/* Theme Name: Jackson Sky - Version 3 Theme URI: https://jacksonsky.com Author: Jackson Sky Web Design & Development Author URI: https://jacksonsky.com/ Description: This is a custom responsive theme designed and developed exclusively for Jackson Sky. Tags: education, jackson-sky, one-column, two-columns, custom-menu, full-width-template Version: 1.0 */ /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- 1.0 Normalize 2.0 Accessibility 3.0 Alignments 4.0 Clearings 5.0 Typography 6.0 Forms 7.0 Formatting 8.0 Lists 9.0 Tables 10.0 Links 11.0 Navigation 12.0 Layout 12.1 Header 12.2 Regular Content 12.3 Content Layouts 12.4 Sidebar Content 12.5 Footer 12.6 Home Page 12.7 Interior Pages 12.8 Page Sections 12.9 Posts 12.10 MISC Universal Styles 13.0 Comments 14.0 Widgets 15.0 Media 15.1 Galleries 16.0 Media Queries 16.1 Query sm - Over 576px 16.2 Query md - Over 768px 16.3 Query lg - Over 992px 16.4 Query xl - Over 1200px 16.5 Query xxl - Over 1400px 17.0 Print --------------------------------------------------------------*/ /*-------------------------------------------------------------- 1.0 Normalize - See Stylesheet normalize.css --------------------------------------------------------------*/ /* But it is not enough now, below dont hide play button parent div */ *::-webkit-media-controls-panel { display: none!important; -webkit-appearance: none; } /* Old shadow dom for play button */ *::--webkit-media-controls-play-button { display: none!important; -webkit-appearance: none; } /* New shadow dom for play button */ /* This one works */ *::-webkit-media-controls-start-playback-button { display: none!important; -webkit-appearance: none; } /*-------------------------------------------------------------- 2.0 Accessibility --------------------------------------------------------------*/ /* Text meant only for screen readers. */ /* Hide visually and from screen readers */ .hidden {display: none !important;} /* * Hide only visually, but have it available for screen readers: * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;} /** Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: * https://www.drupal.org/node/897638 */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;} /** Hide visually and from screen readers, but maintain layout */ .invisible {visibility: hidden;} /* Text meant only for screen readers. */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus {background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */} /*-------------------------------------------------------------- 3.0 Alignments --------------------------------------------------------------*/ .alignleft {display: inline; float: left; margin-right: 1.5em;} .alignright {display: inline; float: right; margin-left: 1.5em;} .aligncenter {clear: both; display: block; margin-left: auto; margin-right: auto;} /*-------------------------------------------------------------- 4.0 Clearings --------------------------------------------------------------*/ /**** Clearfix update ****/ .group:before, .group:after { visibility: hidden; display: block; content: ""; clear: both; height: 0; } * html .group { zoom: 1; } /* IE6 */ *:first-child+html .group { zoom: 1; } /* IE7 */ /*-------------------------------------------------------------- 5.0 Typography --------------------------------------------------------------*/ @font-face { font-family: "CooperBT-Light"; src: url("assets/fonts/CooperBT-Light.ttf") format("ttf"), url("assets/fonts/CooperBT-Light.woff2") format("woff2"); font-weight: 300; } /*@font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-Regular.ttf') format('ttf') } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-Regular.ttf') format('ttf'); font-weight: 400; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-Italic.ttf') format('ttf'); font-style: italic; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-Light.ttf') format('ttf'); font-weight: 300; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-LightItalic.ttf') format('ttf'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-Italic.ttf') format('ttf'); font-style: italic; font-weight: 400; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-Medium.ttf') format('ttf'); font-weight: 500; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-MediumItalic.ttf') format('ttf'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-SemiBold.ttf') format('ttf'); font-weight: 600; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-SemiBoldItalic.ttf') format('ttf'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-Bold.ttf') format('ttf'); font-weight: 700; } @font-face { font-family: 'Figtree', "Figtree", Figtree; src: url('assets/fonts/figtree/Figtree-BoldItalic.ttf') format('ttf'); font-weight: 700; font-style: italic; }*/ @font-face { font-family: 'CooperBT', "CooperBT", CooperBT; src: url('assets/fonts/CooperBT-Light.ttf') format('ttf'); font-weight: 300; font-style: normal; } * { font-synthesis: none !important; } body, button, input, select, textarea { font-family: 'Figtree', Helvetica, Arial, sans-serif; color:#727272; font-weight: 300; font-style:normal; line-height:1.6; letter-spacing:.025em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis: none !important; } h1, h2, h3, h4, h5, h6, .intro-large{font-family: "CooperBT-Light", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight:300; color:#011e41; line-height:1.1; margin:0; padding:0; margin-bottom:.4em; letter-spacing: .035em; font-synthesis: none !important;} h1, .intro-large{font-size: 34px;} h2{font-size:28px;} h3{ font-size:26px;} h4{ font-size:24px; margin-bottom:.55em;} h5{ font-size: 23px; margin-bottom: .2em;} h6{ font-size:21px; margin-bottom: .15em; text-transform: uppercase; font-weight: 600; font-family: 'Figtree', serif; } .intro-large{line-height: 1.1;} p {margin: 0 0 2em; padding: 0;} .serif{font-family: serif; font-size:1.5em;} #main section p:last-of-type{margin-bottom: 0;} dfn, cite, em, i {font-style: italic;} blockquote { font-family: "CooperBT-Light", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-size: 1.25rem; line-height: 1.5; overflow: hidden; margin-bottom:1.8em; font-weight: 300; } blockquote.alt{font-family: 'Figtree', serif; font-size: 1.6666666em;} blockquote p:last-child{margin-bottom: 0;} blockquote cite { display: block; font-style: normal; font-weight: 600; margin-top: 0.5em; } address { margin: 0 0 1.5em;} pre { background: #eee; font-family: "Courier 10 Pitch", Courier, monospace; font-size: 15px; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 1.6em; max-width: 100%; overflow: auto; padding: 1.6em; } code, kbd, tt, var { font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; font-size: 15px; font-size: 0.9375rem; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #eee; text-decoration: none; } .big {font-size: 125%;} .light{ font-weight:300;} .normal{font-weight:400;} .semibold{font-weight:600;} .strong, strong{font-weight:700;} blockquote {quotes: "" "";} q {quotes: "“" "”" "‘" "’";} blockquote:before, blockquote:after {content: "";} :focus {outline: none;} .uppercase{text-transform: uppercase;} sup{ position: relative; top: 0; font-size: 50%; vertical-align: super; } /*-------------------------------------------------------{------- 6.0 Forms --------------------------------------------------------------*/ label { color: #676767; display: block; font-weight: 600; margin-bottom: 0.35em; } legend{color:#676767;} fieldset { margin-bottom: 1em; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea, select{ color: #000; background: #fff; background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); border: 1px solid #bbb; display: block; padding: 0.5em; font-size:14px; width: 100%; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { color: #222; border-color: #333; } textarea { resize: vertical; } select { border: 1px solid #bbb; max-width: 100%; } input[type="radio"], input[type="checkbox"] { margin-right: 0.5em; } input[type="radio"] + label, input[type="checkbox"] + label { font-weight: 400; } /************* Buttons **********/ button,.button, .buttonAlt, a.button, input[type="button"], input[type="submit"], #content .gform-footer input[type="submit"]{ font-family: 'Figtree', sans-serif; text-transform:uppercase; background-color: #eb6c4d; border: 0 !important; outline: 0 !important; color: #fff; cursor: pointer; display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; letter-spacing: .06em; line-height: 1.2; padding: .85em 1.6em; text-shadow: none; -o-transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear; margin-right: 10px; margin-bottom: 7px; text-decoration: none !important; text-align: center; box-shadow: 0 !important; } #content .gform-footer input[type="submit"]:focus, .gform-footer input[type="submit"]:focus, input[type="submit"]:focus{border: 0 none !important;} button:hover,.button:hover, .buttonAlt:hover, a.button:hover, input[type="button"]:hover, input[type="submit"]:hover, #content .gform-footer input[type="submit"]:hover{ color:#fff; background-color:#1289a7;} button.buttonAlt, .button.buttonAlt, .buttonAlt, a.buttonAlt, a.button.alt{background:#f89e23; color:#fff; font-weight: 600; } button.buttonAlt:hover, .button.buttonAlt:hover, .buttonAlt:hover, a.buttonAlt:hover, a.button.alt:hover{ background: #e29020; color:#fff; text-decoration: none !important;} button.buttonAlt:after, .button.buttonAlt:after, .buttonAlt:after, a.buttonAlt:after, a.button.alt:after{content:none;} button#my-gform-button{box-shadow: none !important;} .trans2{-o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} /********* Placeholders **********/ /* Placeholder text color -- selectors need to be separate to work. */ ::-webkit-input-placeholder { color: #9f9f9f; font-family: 'Figtree', Helvetica, Arial, sans-serif; } :-moz-placeholder { color: #9f9f9f; font-family: 'Figtree', Helvetica, Arial, sans-serif; } ::-moz-placeholder { color: #9f9f9f; font-family: 'Figtree', Helvetica, Arial, sans-serif; opacity: 1; /* Since FF19 lowers the opacity of the placeholder by default */ } :-ms-input-placeholder { color: #9f9f9f; font-family: 'Figtree', Helvetica, Arial, sans-serif; } /******* Gravity Forms *********/ /*-------------------------------------------------------------- 7.0 Formatting --------------------------------------------------------------*/ hr { background-color:#e7e8e8; border: 0; height: 8px; margin-top: 2em; margin-bottom: 2em; opacity: 1; } hr.short{ max-width: 90px; width: 25%; margin-left: 0; background-color:#d6e033;} hr.dot{background-color:transparent; height: 30px; background-image: url("assets/images/background-dots-grey1.png"); background-repeat: repeat-x; background-size: auto 100%;} ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } .inline-block{display: inline-block;} /*-------------------------------------------------------------- 8.0 Lists --------------------------------------------------------------*/ ul, ol { margin: 0 0 2em 2em; padding: 0;} ul {list-style: disc;} ol {list-style: decimal;} #content ul, #content ol{margin: .75em 0 2em 2em;} li{ padding-left:0; margin-bottom:.5em;} li > ul, li > ol {margin-bottom: 0; margin-left: 1.5em;} ul.fancy-list{list-style: none;} ul.fancy-list li{padding-left:1.5em; font-size: 125%; position: relative;} ul.fancy-list li::before{ content: "\f058"; /* FontAwesome Unicode */ font-family: 'Font Awesome 6 Pro'; display: inline-block; margin-left: -1.5em; width: 1.5em; position: absolute;} ol.fancy-list { margin: 0 0 2em .2em !important; counter-reset: li; list-style-type: none; } ol.fancy-list li { position: relative; padding-left: 2em ; font-size: 1.25em; font-weight: 400; line-height: 1.5; margin-bottom: 1em; } ol.fancy-list li:before { content: counter(li); counter-increment: li; height: 1.5em; width: 1.5em; border: 2px solid #0C4E97; border-radius: 50%; text-align: center; position: absolute; left: 0; color:#0C4E97; line-height: 1.3em; } dt {font-weight: 700;} dd {margin: 0 1.5em 1.5em;} /*-------------------------------------------------------------- 9.0 Tables --------------------------------------------------------------*/ table { border-collapse: collapse; margin: 0 0 1.5em; width: 100%;} thead th { border-bottom: 2px solid #bbb; padding-bottom: 0.5em;} th { padding: 0.4em; text-align: left; } tr { border-bottom: 1px solid #eee;} td {padding: 0.4em;} th:first-child,td:first-child {padding-left: 0;} th:last-child,td:last-child {padding-right: 0;} /*** Pseudo Table Styles****/ .table{display:table;} .tableRow{display:table-row;} .tableCell{display:table-cell;} .tableMiddle{ vertical-align:middle;} .vert50{ height:50%;} /*-------------------------------------------------------------- 10.0 Links --------------------------------------------------------------*/ a{color:#44697d; text-decoration: none;} a:hover{color:#a2b6c3; text-decoration: underline;} #content a{text-decoration:underline; font-weight: 500; -o-transition: all .1s linear; -moz-transition: all .1s linear; -webkit-transition: all .1s linear; transition: all .1s linear;} a.alt{color:#44697d; text-decoration: none; text-transform: uppercase; font-weight: 700; font-size: 90%;} a.alt:hover{color:#44697d; text-decoration: underline;} a:active, a:focus{outline:none;} a.alt:after{font-family: 'FontAwesome'; content: '\f0a9'; padding-left: 8px; position: relative; font-size: 120%;} /*-------------------------------------------------------------- 11.0 Navigation --------------------------------------------------------------*/ .nav-control{position: relative; z-index: 200; color: #fff; font-size: 125%;} .nav-control:hover{color: #fff !important; text-decoration: none;} .nav-control:before{content: '\f0c9'; font-family:"Font Awesome 6 Pro"; font-weight: 700; } #site-header.nav-open .nav-control:before{content: '\f00d';} #nav-takeover{position: fixed; top:0; background-color:#60d2d0; opacity: 0; visibility: hidden; height: 1%; width: 100%; /*border-bottom-right-radius: 100%;*/ -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; /*transform: scale(0);*/} #nav-takeover.main{opacity: 1; visibility: visible; background-color: #1289a7; /*transform: scale(1);*/ height: 100%; border-bottom-right-radius: 0; width: 100%; overflow: hidden;} .nav-pad{padding-top: 95px; -o-transition: all .3s linear; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear} .shrink .nav-pad{padding-top:55px;} #takeover-inside, #takeover-inside h3{color: #fff;} #takeover-inside a{color: #fff; text-decoration: none; text-transform: uppercase;} #takeover-inside a:hover{color: #d6e033;} #takeover-inside ul{list-style-type: none; padding: 0; margin: 0;} #takeover-inside ul li{padding: 0; margin: 0;} #takeover-inside nav#takeover-main{font-size: 48px; font-weight: 700;} #takeover-inside nav#takeover-main a{font-weight: 700;} #takeover-inside .to-cta-link a{font-size: 14px; font-weight: 500;} #takeover-secondary ul li{font-weight: 500;} /********* Main Navigation ********/ #mainNav #mega-menu-wrap-main-menu .mega-menu-toggle{pointer-events: none; cursor: default;} #mainNav #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-blocks-right .mega-search-wrap{pointer-events: all;} #mainNav #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-blocks-right a.nav-control{pointer-events:all; cursor: pointer;} /*** Mega Max Mobile****/ #mainNav #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {font-family: 'Figtree', Helvetica, Arial, sans-serif !important; font-weight: 600 !important;} #mainNav #mega-menu-wrap-main-menu .mega-menu-toggle{padding:0 10px;} #mainNav #mega-menu-wrap-main-menu .mega-menu-toggle .mega-toggle-block-1 .mega-search input[type=text] {padding-left: 18px;} /*-------------------------------------------------------------- 12.0 Layout --------------------------------------------------------------*/ html, body { height: 100%; } html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; } body { display: flex; flex-direction: column; background: #fff; background: rgba(255,255,255,1); } #content.site-content{flex: 1 0 auto;} /*-------------------------------------------------------------- 12.1 Header --------------------------------------------------------------*/ /***** Main Header *****/ #site-header{position: fixed; background-color: transparent; /*background-color: #2db2d3*/; width: 100%; z-index: 200; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} /*#site-header.shrink{background-color: rgba(18,137,167,1);}*/ #site-header h1.site-title{width:132px; margin-bottom: 0; padding-bottom: 0; line-height: 1em; font-size:20px; position: relative; z-index: 100; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header.shrink h1.site-title{width:100px; margin-bottom: 0; padding-bottom: 0; line-height: 1em; font-size:20px;} #site-header h1.site-title img{width: 100%; height: auto; max-width: 100%;} #site-header .header-pad{padding-top: 24px !important; padding-bottom: 24px !important; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header.shrink .header-pad{padding-top: 10px !important; padding-bottom: 10px !important;} #site-header #mainNav{-o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} #site-header.shrink #mainNav{padding-top: 8px !important;} /*-------------------------------------------------------------- 12.2 Regular Content --------------------------------------------------------------*/ /******** Page Header ********/ /*-------------------------------------------------------------- 12.3 Content Layouts --------------------------------------------------------------*/ /*-------------------------------------------------------------- 12.4 Sidebar Content --------------------------------------------------------------*/ /*-------------------------------------------------------------- 12.5 Footer --------------------------------------------------------------*/ footer.site-footer { background-color: #1289a7; color:#fff; font-size: 14px;} footer.site-footer a{color:#d6e033; text-decoration: none;} footer.site-footer a:hover{color:#d6e033; text-decoration: underline;} footer.site-footer h1, footer.site-footer h2, footer.site-footer h3, footer.site-footer h4, footer.site-footer h5, footer.site-footer h6{color:#fff;} footer.site-footer h2{font-family: "CooperBT-Light", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: 300; text-transform: none; font-size: 36px; } footer.site-footer h3{font-size: 14px; text-transform: uppercase; font-family: 'Figtree', Helvetica, Arial, sans-serif; font-weight: 700;} footer.site-footer .foot-social a{margin-right: .5em;} /**** Gravity Form ****/ #site-footer .gform-theme--foundation .gform_fields{grid-template-rows: 10px;} #site-footer .gform-theme--framework{--gf-color-danger: #f99f24 !important;} #site-footer .gform-theme--framework .gform_validation_errors: focus{border-color:#f99f24 !important; } #site-footer .foot-mailing .gform_body input{background-color: #1289A7; border-radius: 0; border:1px solid #60d2d0; color:#fff; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; } #site-footer .foot-mailing .gform_body input:focus{background-color:#60d2d0; outline: none; } #site-footer .foot-mailing .gform_body input::placeholder{text-transform: uppercase; color: #fff; font-weight: 600;} #site-footer .foot-mailing .gform-footer{margin-top: 32px;} #site-footer .foot-mailing .gform-footer button#my-gform-button, a.underline-link{ background-color: transparent; padding: 14px 4px; line-height: 1.5em; text-decoration: none; color: #fff; text-transform: uppercase; background-image: linear-gradient(to right, #60d2d0 50%, #60d2d0 50%); background-size: 200% 10px; background-repeat: no-repeat; background-position: 100% 100%; transition: background-size .2s; border-radius: 0; } #site-footer .foot-mailing .gform-footer button#my-gform-button i{font-family:"Font Awesome 6 Pro";} #site-footer .foot-mailing .gform-footer button#my-gform-button:hover, a.underline-link:hover { background-position: 0% 100%; background-size: 200% 50px; } #site-footer .foot-contact a{color:#fff; font-weight: 500;} #site-footer .foot-contact a:hover{color:#fff; text-decoration: none;} .foot-copyright{font-size: 11px;} /*-------------------------------------------------------------- 12.6 Home Page --------------------------------------------------------------*/ .home h1{font-size: 34px;} /******* Banner ********/ .home .banner-background{padding: 150px 0 150px; color: #fff;} h1.page-title br{display: none;} #home-projects{font-size: 16px;} #home-projects .bump-up{margin-top: -100px;} #home-projects h5{font-family: 'Figtree', Helvetica, Arial, sans-serif; font-weight: 700; text-transform: uppercase; font-size: 16px;} #home-projects h5 a{color:#2db2d3; text-decoration: none; font-weight: 700;} #home-projects h5 a:hover{text-decoration: underline;} #home-projects .cs-description{line-height: 1.4;} #home-about{font-size: 21px; font-family: "CooperBT-Light", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: 300; } #test-info{font-size: 14px; border-top: solid 7px #d6e033;} #test-info a{text-transform: uppercase;} /*-------------------------------------------------------------- 12.7 Interior Pages --------------------------------------------------------------*/ /**** Padding Options****/ .v-margin-both{padding-top: 1em; padding-bottom: 1em;} .v-margin-top{padding-top: 1em; padding-bottom: 0;} .v-margin-bottom{padding-top: 0; padding-bottom: 1em;} .v-margin-none{padding-top: 0; padding-bottom: 0;} /***** Case Studies Overview ******/ #case-studies-overview{background-color: #e7e8e8;} .white-card{background: #fff;} #case-studies-overview h3{font-family: 'Figtree', Helvetica, Arial, sans-serif; font-weight: 700;} #case-studies-overview h3 a{color:#2db2d3; text-decoration: none; font-weight: 700;} #case-studies-overview h3 a:hover{text-decoration: underline;} #case-studies-overview .cs-services{font-size: .80em; } #case-studies-overview .cs-link{text-transform: uppercase;} #case-studies-overview .cs-link a{text-decoration: none; font-weight: 700; font-size: .85em;} #case-studies-overview .cs-link a:hover{text-decoration: underline;} #case-studies-overview hr{background-color: #e7e8e8; width: 33.333%; min-width: 90px;} #case-studies-list-section h2{color: #727272;} /****** Services ******/ .core_services h4{font-family: 'Figtree', Helvetica, Arial, sans-serif; font-weight: 700; text-transform: uppercase; line-height: 1;} .core_services hr{width: 25%; max-width: 110px;} .core_services .service-content{font-size: 90%;} #home-projects.services h1{color:#727272;} /***** Team *******/ .team-section h3{font-family: 'Figtree', Helvetica, Arial, sans-serif; font-weight: 700; } .team-section .imageCon img{width: 100%; height: auto;} .friends-section h2{font-size: 36px; color: #727272;} .friends-section .white-card{font-size: 16px;} .friends-section h6{font-size: 20px; text-transform: none;} /****** Testimonial ********/ .testimonial-mason .mason .card{border-radius: 0; border: none;} .testimonial-mason .mason .card{background-color: #f3f3f3;} .testimonial-mason .mason .card.yellow{background-color: #d6e033;} .testimonial-mason .mason .card.red{background-color: #eb6c4d; color: #fff;} .testimonial-mason .mason .card.blue{background-color: #2db2d3; color: #fff;} /*.testimonial-mason > .mason:nth-child(3n + 1) .card{background-color: #f3f3f3;} .testimonial-mason > .mason:nth-child(3n + 2) .card{background-color: #e5e5e5;} .testimonial-mason > .mason:nth-child(3n + 3) .card{background-color: #d3d3d3;}*/ .testimonial-mason{font-size: 90%; line-height: 1.5;} .testimonial-mason .author{font-weight: 500; font-size: 85%;} /**** 404 ****/ #searchform #s{max-width: 450px; width: 100%; margin-bottom: .8em;} /*** Search Results ***/ .search-results .smalltext p:last-of-type{margin-bottom: 0} /*-------------------------------------------------------------- 12.8 Page Sections --------------------------------------------------------------*/ /******* Banner - Page ********/ .banner-background{padding: 120px 0 60px; color: #fff;} #page-intro-section h1{color: #fff; font-family: "CooperBT-Light", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: 300; text-transform: none;} #page-intro-section a.intro-button, #takeover-cta .to-cta-link a{ padding: 14px 4px; line-height: 1.5em; text-decoration: none; color: #fff; text-transform: uppercase; background-image: linear-gradient(to right, #60d2d0 50%, #60d2d0 50%); background-size: 200% 10px; background-repeat: no-repeat; background-position: 100% 100%; transition: background-size .2s; } #page-intro-section a.intro-button:hover, #takeover-cta .to-cta-link a:hover { background-position: 0% 100%; background-size: 200% 50px; } #page-intro-section .intro-content-section.intro-project, #page-intro-section .intro-content-section.intro-meta{font-size: 14px;} #page-intro-section .intro-content-section.intro-project a, #page-intro-section .intro-content-section.intro-meta a{color: #fff; } #page-intro-section .intro-content-section.intro-project a:hover, #page-intro-section .intro-content-section.intro-meta a:hover{color: #d6e033; } /***** Two Column ******/ .two_column .image-border img{border: solid 12px #e7e8e8; } /**** Testimonial ****/ .testimonial-block{ border-left: solid 10px #e7e8e8;} .testimonial-text{font-size: 135%; font-family: "CooperBT-Light", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; font-weight: 300; line-height: 1.5;} .testimonial-block .cite{font-size: 14px;} .testimonial-block .test-link a, .test-link a{font-size: 14px; font-weight: 700 !important; text-transform: uppercase; text-decoration: none !important;} .testimonial-block .test-link a:hover, .test-link a:hover{text-decoration: underline !important;} /***** Accordion Section ******/ .accordion-background {background-color:#e8f0f8; font-weight: 400;} .accordion-background.background-white{background-color: #fff;} .accordion .card{border-radius: 0; border: 0 none; padding-bottom: 6px; background-color: transparent;} .accordion .card .card-header{padding: 0; border-bottom: 0 none;} .accordion .card button.btn{border-radius: 0; margin: 0; font-size: 18px; background-color:#0c4e97; color:#fff; font-weight: 600; padding: .75em 1.85em .75em .9em; text-transform: none; letter-spacing: .03em;} .accordion .card button.btn:hover{background-color:#053162;} .accordion .card button.btn::after{content: '-'; position: absolute; right: .75em; top:.75em; font-weight: 700;} .accordion .card button.btn.collapsed::after{content: '+';} .accordion .card .card-body{background-color: #fff; padding-top: 1.75rem; padding-bottom: 1.75rem;} .accordion-background.background-white .card .card-body{background-color: #E8F0F8;} #content .accordion .card .card-body p:last-of-type{margin-bottom: 0;} .accordion .btn:focus{box-shadow: none;} /***** Callout *****/ .callout-section{font-weight: 500;} .callout-section hr{height: 10px;} /****** Background *******/ .grey-background{background-color:#e7e8e8; color:#727272; font-family: "CooperBT-Light", "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";} .grey-background h1, .grey-background h2, .grey-background h3, .grey-background h4, .grey-background h5, .grey-background h6{color:#727272;} .grey-background p{font-size: 1.3em;} /****** Grey Section ********/ .grey-dots{ height: 30px; background-image: url("assets/images/background-dots-grey1.png"); background-repeat: repeat-x; background-size: auto 100%;} /****** Image Only Section *****/ .embed-image img{width: 100%; height: auto;} /***** Vertical Line Section ******/ .vert-line-section .vert-line{border-left-width: 10px; border-left-style: solid;} /***** Carousel ****/ #carouselSlideshow {padding-bottom: 50px;} .slideshow .carousel-control-prev{justify-content: flex-start;} .slideshow .carousel-control-next{justify-content: flex-end;} .slideshow .carousel-control-prev-icon, .slideshow .carousel-control-next-icon{background-image: none; text-indent: none; text-indent:0; color: #000; font-family: 'Font Awesome 6 Pro',"Font Awesome 6 Free"; height: 1em; font-size: 110%;} .slideshow .carousel-control-prev-icon:before{content: "\f053"} .slideshow .carousel-control-next-icon:before{content: "\f054"} .slideshow button{color:#727272;} .slideshow button:hover{background-color: transparent;} .slideshow .carousel-indicators{margin-bottom: 0;} .slideshow .carousel-indicators [data-bs-target]{border-radius: 50%; background-color: #000; height: 20px; width: 20px; margin-bottom: 0;} /***** Footer Section - CTA ******/ #footer-cta{background-color:#e7e8e8;} #footer-cta h2{color:#727272;} #footer-cta .cta-footer-link a{font-size: 14px; text-transform: uppercase; color: #eb6c4d; text-decoration: none; font-weight: 700;} #footer-cta .cta-footer-link a:hover{color:#1289a7; text-decoration: underline;} /*-------------------------------------------------------------- 12.9 Posts --------------------------------------------------------------*/ /**** Post List Page ****/ #post-list{background-color: #ecf0f3;} #post-list .blogBox{background-color: #fff; font-size: 14px;} #post-list img{border: 1px solid #ECF0F3;} #post-list .blogBox a{text-decoration: none; color: #1289a7;} #post-list .blogBox a:hover{color:#eb6c4d;} #post-list .blogBox h3, #post-list .blogBox h4, #post-list .blogBox h5, #post-list .blogBox h6{font-family: 'Figtree', Helvetica, Arial, sans-serif;} #post-list .blogBox h3{font-size: 16px; } #postTitle h2 a{text-decoration: none;} #postTitle h2 a:hover{text-decoration: underline;} #content-post{font-size: 18px;} #paging-bottom{width:100%; display:block; clear:both;} #paging-bottom .alignleft, #paging-bottom .alignright{ display: block; width: 32%; } #paging-bottom .alignleft a, #paging-bottom .alignright a{ display: block; width: 100%; } #paging-bottom .alignleft { float: left; } #paging-bottom .alignright { float: right; } #paging-bottom .alignleft a, #paging-bottom .alignright a { background-color: #eb6c4d; color: #fff; text-decoration: none; font-weight: 500; display: block; width: 100%; text-align: center; text-transform: uppercase; padding: 10px 0; font-size: 16px; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear; } #paging-bottom .alignleft a:hover, #paging-bottom .alignright a:hover { background: #1289A7; } /******************* Blog Single ************************/ /********************* WordPress Styles *********************/ #postInfo {color:#9f9f9f; font-size:14px; margin:0 0 20px 0; clear: both; font-style:italic;} #paging { display: block; text-align: center; margin-top: 60px; padding-bottom: 60px; font-weight:bold; font-size:14px; text-transform:uppercase; } #paging a{text-decoration: none;} #paging a:hover{text-decoration: underline;} /*-------------------------------------------------------------- 12.10 MISC Universal Styles --------------------------------------------------------------*/ ul.fancy-list{list-style: none;} ul.fancy-list li{padding-left:1.5em; font-size: 125%; position: relative;} ul.fancy-list li::before{ content: "\f058"; /* FontAwesome Unicode */ font-family: 'Font Awesome 6 Pro'; display: inline-block; margin-left: -1.5em; width: 1.5em; position: absolute;} ol.fancy-list { margin: 0 0 2em .2em !important; counter-reset: li; list-style-type: none; } ol.fancy-list li { position: relative; padding-left: 2em ; font-size: 1.25em; font-weight: 400; line-height: 1.5; margin-bottom: 1em; } ol.fancy-list li:before { content: counter(li); counter-increment: li; height: 1.5em; width: 1.5em; border: 2px solid #0C4E97; border-radius: 50%; text-align: center; position: absolute; left: 0; color:#0C4E97; line-height: 1.3em; } .text-enlarged{font-size: 115%;} .text-enlarged-133{font-size: 110%;} .center{text-align: center;} .bold{font-weight: 700;} .extrabold{font-weight: 800;} .credit{color: #2d2d2d; font-weight: 700; font-size: 12px;} .smalltext{font-size: 12px;} .grey{color:#6f727b;} .centerBtn{text-align:center; display:block; width:100%;} .noPad{padding: 0;} .moreLink{text-transform: uppercase; font-weight: 800;} hr.hr-small-center{width: 90px; margin-left: auto !important; margin-right: auto !important;} .trans-2{-o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; transition: all .2s linear;} .circle-center{display: flex; border: 6px solid #94a545; border-radius: 50%; width:100%; justify-content: center; align-items: center;} .circle-center:before{content:""; float: left; padding-top: 100%;} .extra-large-text{} .word-wrap { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; } /**** Background Colors ******/ .background-grey{background-color: #e7e8e8;} /*-------------------------------------------------------------- 13 Comments --------------------------------------------------------------*/ /*-------------------------------------------------------------- 14 Widgets --------------------------------------------------------------*/ /*-------------------------------------------------------------- 15 Media --------------------------------------------------------------*/ img {vertical-align: middle; max-width:100%; height:auto;} img.alignleft {float:left; display:inline; margin:5px 20px 15px 0; max-width:50%; height:auto;} img.alignright {float:right; display:inline; margin:5px 0 15px 20px; max-width:50%; height:auto;} img.alignnone {margin: 0 0 10px 0; max-width:100%; height:auto;} img.aligncenter {clear: both; display: block; margin: 0 auto 10px; max-width:100%; height:auto;} .wp-caption.alignright{float:right; margin:5px 0 15px 5%; max-width:40%; height:auto;} .wp-caption.alignleft{float:left; margin:5px 5% 15px 0; max-width:40%; height:auto;} .alignright {float: right; margin: 0 0 5px 15px; display:inline;} .alignleft {float: left; margin: 0 15px 5px 0; display:inline;} .center{text-align:center;} .wp-caption.alignright img{ width:100%; height:auto;} p.wp-caption-text {margin:.5em 0 1.8em; font-size:14px; color:#5e6a71;} .wp-caption img{margin:5px 15px 5px 0;} .wp-caption {margin-bottom:2em; font-size:12px; color:#5e6a71; max-width: 100%;} .wp-caption p{margin-bottom:5px;} /******* Video ******/ .embed-container { position: relative; padding-bottom: 56.25%; overflow: hidden; max-width: 100%; height: auto; margin-bottom: 1.25em; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .embed-holder { position: relative; padding-bottom: 55.25%; overflow: hidden; max-width: 100%; height: auto; margin-bottom: 1.25em; } .embed-holder iframe, .embed-holder object, .embed-holder embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #content .epyt-gallery-title{font-size: 12px;} /*-------------------------------------------------------------- 15.1 Galleries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 16 Media Queries --------------------------------------------------------------*/ /*-------------------------------------------------------------- 16.1 Query sm - Over 576px --------------------------------------------------------------*/ @media only screen and (min-width : 576px) { body, input, select, textarea{} button, .button, .buttonAlt, a.button, input[type="button"], input[type="submit"] {font-size:14px} /**** Navigation ****/ #takeover-inside nav#takeover-main{font-size: 52px;} /*----- Typography -------*/ h1, .intro-large{font-size: 38px;} h2{font-size:30px;} h3{ font-size:28px;} h4{ font-size:26px;} h5{ font-size: 24px;} h6{ font-size:22px;} h2.callout{font-size:36px;} h1.page-title br{display:inline;} blockquote {font-size: 1.75rem;} hr{margin-top: 2.7em; margin-bottom: 2.7em;} /************* Buttons **********/ /*------ Header ---------*/ #nav-con-submenu #mega-menu-wrap-max_mega_menu_3 a.mega-menu-link{font-size: 14px !important;} /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ /**** Hero Section .home #hero-section h2{font-size: 24px; font-weight: 500; text-transform: none; line-height: 1.1; color:#0b4e95;} .home #hero-section .banner-background{background-size: 60%;} .home #home-information h2{font-size: 36px;} .home #home-information{font-size: 21px;}*****/ .home h1{font-size: 38px;} .home .banner-background{padding: 130px 0 190px;} #home-projects .bump-up{margin-top: -150px;} #home-about{font-size: 24px; } /*----- Page Sections ------*/ /***** Intro Banner Section ****/ #intro-banner-section button, #intro-banner-section .button, #intro-banner-section .buttonAlt, #intro-banner-section a.button{font-size: 24px;} #page-intro-section .intro-content-section{font-size: 18px;} /**** Testimonials ****/ .testimonial-text{font-size: 140%;} /*----- MISC ------*/ .smalltext{font-size: 14px;} .text-enlarged-133{font-size: 115%;} .text-enlarged{font-size:120%;} .extra-large-text{font-size: 50px;} #content .epyt-gallery-title{font-size: 14px;} img.alignleft {float:left; display:inline; margin:5px 20px 15px 0; max-width:50%; height:auto;} img.alignright {float:right; display:inline; margin:5px 0 15px 20px; max-width:50%; height:auto;} } /*-------------------------------------------------------------- 16.2 Query md - Over 768px --------------------------------------------------------------*/ @media only screen and (min-width : 768px) { /*----- Typography -------*/ body, input, select, textarea{ font-size: 18px;} h1, .intro-large{font-size: 42px;} h2{ font-size:36px;} h3{ font-size:32px;} h4{ font-size:28px;} h5{ font-size:26px;} h6{ font-size:23px;} h2.callout{font-size:48px;} #content {} /**** Navigation ****/ #takeover-inside nav#takeover-main{font-size: 60px;} /************* Buttons **********/ button,.button, .buttonAlt, a.button, input[type="button"], input[type="submit"]{font-size: 18px;} /*------ Header ---------*/ /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ .home h1{font-size: 38px;} .home .banner-background{padding: 120px 0 200px;} #home-projects .bump-up{margin-top: -200px;} #home-projects .cs-description{line-height: 1.6;} #home-about{font-size: 27px; } #test-info{font-size: 14px; border-left: solid 7px #d6e033; border-top: 0 none;} /*----- Interior Pages -------*/ .state-list{font-size: 18px;} /****** Services ******/ .services h4{font-size:26px;} .core_services .service-content{font-size: 85%;} /******* About ******/ .friends-section h2{font-size: 46px;} /*----- Page Sections ------*/ /**** Testimonials ****/ .testimonial-text{font-size: 150%;} /*----- MISC ------*/ .extra-large-text{font-size: 60px;} .text-enlarged{font-size: 135%;} .text-enlarged-133{font-size: 133.333333%;} img.alignleft {float:left; display:inline; margin:5px 35px 15px 0; max-width:50%; height:auto;} img.alignright {float:right; display:inline; margin:5px 0 15px 35px; max-width:50%; height:auto;} } /*-------------------------------------------------------------- 16.3 Query lg - Over 992px --------------------------------------------------------------*/ @media only screen and (min-width : 992px) { /*----- Typography -------*/ h1, .intro-large, h2.headline{font-size: 48px;} h2 { font-size:36px;} h3{ font-size:30px;} h4{ font-size:24px;} h5{ font-size:28px;} h6{ font-size:23px;} h2.callout{font-size:60px;} /*------ Header ---------*/ #site-header #mega-menu-wrap-main-menu #mega-menu-main-menu li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator:after{display:none;} #intro-banner-section.default-banner h1{font-size: 54px;} /******** Navigation *******/ /*** Sub Navigation ***/ #nav-con-submenu{display: block;} #nav-con-submenu.makeStick{top: 90px;} /*-------------------------------------------------------------- 12.2 Regular Content --------------------------------------------------------------*/ #content.site-content{} /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ .home h1{font-size: 42px;} .home #hero-section h2{font-size: 32px;} .home #hero-section .banner-background{background-size: 50%;} .home #home-information h2{font-size: 72px;} /*----- Interior Pages -------*/ /****** Services ******/ .services h4{font-size:26px;} .core_services .service-content{font-size: 90%;} /***** Team *****/ .friends-section h2{font-size: 52px;} /*----- Page Sections ------*/ #page-intro-section .intro-content-section{font-size: 18px;} /******** Misc ********/ .text-enlarged{font-size: 150%;} .extra-large-text{font-size: 72px;} } /*-------------------------------------------------------------- 16.4 Query xl - Over 1200px --------------------------------------------------------------*/ @media only screen and (min-width : 1200px) { #content.site-content{} /*----- Typography -------*/ h1, h2.headline{font-size: 60px;} h2 { font-size:48px;} h3{ font-size:36px;} h4{ font-size:30px;} h5{ font-size:24px;} h6{ font-size:24px;} h2.callout{font-size:72px;} /*------ Header ---------*/ #mainNav #mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link{padding: 0 10px 0 10px;} /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ .home h1{font-size: 60px;} /*----- Interior Pages -------*/ /****** Services ******/ .services h4{font-size:30px;} /****** Team *****/ .friends-section h2{font-size: 60px;} /*----- Page Sections ------*/ #intro-banner-section .intro-content{font-size: 24px;} } /*-------------------------------------------------------------- 16.4 Query xxl - Over 1400px --------------------------------------------------------------*/ @media only screen and (min-width : 1400px) { /*----- Typography -------*/ h1{} h2{} h3{} h4{} h5{} h6{} /*------ Header ---------*/ /*------ Sidebar Content --------*/ /*----- Footer -----*/ /*------------ Home Page ---------*/ /*----- Interior Pages -------*/ /*----- Page Sections ------*/ } /*-------------------------------------------------------------- 17 Print --------------------------------------------------------------*/ /* ========================================================================== Print styles. Inlined to avoid the additional HTTP request: http://www.phpied.com/delay-loading-your-print-css/ ========================================================================== */ @media print { *, *:before, *:after, *:first-letter, *:first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http://www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links that are fragment identifiers, * or use the `javascript:` pseudo protocol */ a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } /* * Printing Tables: * http://css-discuss.incutio.com/wiki/Printing_Tables */ thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }