/* Theme Name: Landcore Version: 1.0 Theme URI: https://www.landcoreconsulting.com Description: This WordPress theme designed and developed by Peer Pressure Creative is for use by Landcore Engineering Consultants P.C. only. Author: Peer Pressure Creative Author URI: https://www.peerpressurecreative.com */ /* Brand Colors: --------------------------------------------------------------------------------------------------------------------------------- */ /* Blue: #00416b Aqua: #0099bb Green: #b2da0a */ /* All Mighty Reset ------------------------------------------------------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, strike, sub, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-family: inherit; vertical-align: baseline;} * {margin: 0;} :focus {outline: 0;} ol, ul {list-style: none;} a {text-decoration: none;} /* Wrap ------------------------------------------------------------------------------------------------------------------------------------------- */ .wrap {width: calc(100% - 100px); max-width: 2000px; height: auto; margin: 0 auto; position: relative;} /* Media Queries for Wrap ---------- */ @media only screen and (max-width: 1100px) { .wrap {width: calc(100% - 50px);} } /* Clear Fix -------------------------------------------------------------------------------------------------------------------------------------- */ .clearfix:after {content: " "; height: 0; font-size: 0; visibility: hidden; display: block; clear: both;} * html .clearfix {zoom: 1;} /* IE6 */ *:first-child+html .clearfix{zoom: 1;} /* IE7 */ .clear {clear: both;} /* Body ------------------------------------------------------------------------------------------------------------------------------------------- */ body {background-color: #fff; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; font-weight: 400; font-family: 'Heebo', sans-serif;} /* Selection Color -------------------------------------------------------------------------------------------------------------------------------- */ body ::selection {background: #0099bb; color: #fff;} body ::-moz-selection {background: #0099bb; color: #fff;} /* Centered --------------------------------------------------------------------------------------------------------------------------------------- */ .centered {margin: 0 auto; text-align: center; display: block;} .vert-center{position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);} /* @font-face ------------------------------------------------------------------------------------------------------------------------------------- */ /* Gothic A1 font-family: 'Gothic A1', sans-serif; 400: Regular 700: Bold 900: Black font-family: 'Heebo', sans-serif; 300: Light 400: Regular 700: Bold 900: Black */ /* Blur ------------------------------------------------------------------------------------------------------------------------------------------- */ .blur {-webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px);} /* Screen Reader ---------------------------------------------------------------------------------------------------------------------------------- */ #screen-reader {position: absolute; left: -99999px; top: -99999px;} /* Announcement ----------------------------------------------------------------------------------------------------------------------------------- */ #announcement {background-color: #f0cc00; margin: 0 auto; padding: 10px 0 12px 0; text-align: center; position: relative; display: block; clear: both; z-index: 5500;} #announcement p {margin: 0 auto; padding: 0; font-size: 18px; line-height: 1.4; color: #635400;} #announcement p a {color: #635400; border-bottom: 1px solid #635400;} /* Media Queries for Announcement ---------- */ @media only screen and (max-width: 800px) { #announcement p {font-size: 16px; line-height: 1.4;} } /* Main ------------------------------------------------------------------------------------------------------------------------------------------- */ #main {width: 100%; height: auto; margin: 0 auto 0 auto; padding: 0 0 0 0; position: absolute; top: 0; display: block; clear: both; z-index: 5000;} /* Logo ------------------------------------------------------------------------------------------------------------------------------------------- */ #logo {width: 100%; max-width: 300px; margin: 0 0 0 0; padding: 5px 0 0 0; position: absolute; top: 28px; left: 50px; display: block; z-index: 10;} #logo span {position: absolute; left: -99999px; top: -99999px;} #logo img {width: 100%; height: auto; margin: 0; display: block;} #logo svg {width: 100%; height: auto; margin: 0; display: block;} #logo svg path, #logo svg rect, #logo svg polygon {transition: fill .5s linear;} #logo svg .white {fill: #fff;} #logo svg .aqua {fill: #0099bc;} #logo.color svg .white {fill: #00416b;} /* Hover */ #logo:hover {} /* Media Queries for Logo ---------- */ @media only screen and (max-width: 1100px) { #logo {max-width: 300px; top: 28px; left: 25px;} } @media only screen and (max-width: 1050px) { #logo {max-width: 250px; top: 32px;} } @media only screen and (max-width: 1000px) { #logo {width: 100%; max-width: 300px; top: 20px;} } @media only screen and (max-width: 430px) { #logo {max-width: 240px;} } @media only screen and (max-width: 374px) { #logo {max-width: 190px; top: 24px;} } /* Main Navigation -------------------------------------------------------------------------------------------------------------------------------- */ #main-navigation {width: calc(57% - 25px); margin: 0; position: relative; top: 0; right: 50px; display: block; float: right; z-index: 1;} #main-navigation ul {padding: 0 0 0 0; text-align: right;} #main-navigation ul li {padding: 0 0 0 0; margin: 0; display: inline-block;} #main-navigation ul li a {padding: 52px 0 35px 22px; font-size: 13px; line-height: 1; color: #1b3359; text-transform: uppercase; position: relative; display: block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #main-navigation ul li:first-child a {padding-left: 0;} #main-navigation ul li:last-child a {padding-right: 0;} #main-navigation ul li a::before {content: ''; background-color: #0099bb; width: 0; height: 3px; position: absolute; top: 0; left: 22px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #main-navigation ul li:first-child a::before {left: 0;} /* Hover ----- */ #main-navigation ul li a:hover {color: #0099bb;} #main-navigation ul li a:hover::before {width: calc(100% - 22px);} #main-navigation ul li:first-child a:hover::before {width: 100%;} /* Active ----- */ #main-navigation ul li.current_page_item a, #main-navigation ul li.current_page_parent a, #main-navigation ul li.current_page_ancestor a, #main-navigation ul li.current-page-ancestor a {color: #0099bb;} #main-navigation ul li.current_page_item a::before, #main-navigation ul li.current_page_parent a::before, #main-navigation ul li.current_page_ancestor a::before, #main-navigation ul li.current-page-ancestor a::before {width: calc(100% - 22px);} #main-navigation ul li:first-child.current_page_item a::before, #main-navigation ul li:first-child.current_page_parent a::before, #main-navigation ul li:first-child.current_page_ancestor a::before, #main-navigation ul li:first-child.current-page-ancestor a::before {width: 100%;} /* Dropdown Menus ------------------------------------------------------ */ .dropdown-menus::before {/* never visible - used in JS to check mq */ content: 'mobile'; display: none;} .dropdown-menus .dropdown-menu-wrapper {background-color: #fcfcfc; width: 100%; padding: 1.2em 5%; position: absolute; top: 35px; left: 0;} .dropdown-menus.nav-open .dropdown-menu-wrapper {display: block;} .dropdown-menus .dropdown-list > ul > li {/*margin-bottom: 3.3em;*/} .dropdown-menus .content li::after {content: ''; clear: both; display: block;} .dropdown-menus .links .content > ul > li {margin: 0; vertical-align: top;} .dropdown-menus .links:first-of-type .content > ul > li:first-of-type {} .dropdown-menus .links .content > ul > li:last-child {} .dropdown-menus .links-list a {padding: 8px 22px 8px 15px; font-size: 15px !important; line-height: 1.5; display: block; color: #1b1d36; position: relative; cursor: pointer; font-weight: 600;} .dropdown-menus .links-list a:after {content: "\f061"; font-size: 12px; opacity: 0; position: absolute; top: 10px; right: 20px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: "Font Awesome 5 Pro";} /* Hover */ .dropdown-menus .links-list a:hover {background-color: #0099bb; color: #fff;} .dropdown-menus .links-list a:hover:after {opacity: 1; right: 12px;} .dropdown-menus {background-color: transparent; width: 100%; /*height: 80px;*/ padding: 0; text-align: center; position: absolute; left: 0; top: 0;} .dropdown-menus::before {content: 'desktop';} .dropdown-menus .dropdown-menu-wrapper {/* dropdown wrapper - used to create the slide up/slide down effect when dropdown is revealed/hidden */ display: block; /* overwrite mobile style */ width: auto; padding: 0; box-shadow: none; background-color: transparent; /* Force Hardware acceleration */ -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; } .dropdown-menus.is-dropdown-visible .dropdown-menu-wrapper {-webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} .dropdown-menus .dropdown-list { position: absolute; top: 50px; left: 0; visibility: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform, width, height; -webkit-transition: visibility .3s; transition: visibility .3s; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); } .no-csstransitions .dropdown-menus .dropdown-list {display: none;} .dropdown-menus .dropdown-list > ul {width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden;} .dropdown-menus.is-dropdown-visible .dropdown-list { visibility: visible; -webkit-transition: width .3s, height .3s, -webkit-transform .3s; transition: width .3s, height .3s, -webkit-transform .3s; transition: transform .3s, width .3s, height .3s; transition: transform .3s, width .3s, height .3s, -webkit-transform .3s; } .dropdown-menus.is-dropdown-visible .dropdown-list::before {opacity: 1;} .dropdown-menus .dropdown { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; width: 100%; -webkit-transition: opacity .3s, visibility .3s; transition: opacity .3s, visibility .3s; } .dropdown-menus .dropdown.active {opacity: 1; visibility: visible;} .dropdown-menus .dropdown.move-left .content { -webkit-transform: translateX(-100px); -ms-transform: translateX(-100px); transform: translateX(-100px); } .dropdown-menus .dropdown.move-right .content { -webkit-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .dropdown-menus .label {/* hide the label on bigger devices */ display: none;} .dropdown-menus .content {padding: 0px 0 0px 0; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s, -webkit-transform .3s; text-align: left;} .dropdown-menus .content > ul::after {content: ''; clear: both; display: block;} .dropdown-menus .content > ul > li {margin: 0 auto 0 auto; display: block; float: none; clear: both;} .dropdown-menus .content > ul > li:nth-of-type(2n) {margin-right: 0;} .dropdown-menus .links .content > ul > li {margin-top: 0;} .dropdown-menus .links .content {width: 190px;} .dropdown-menus .links-list a {font-size: 15px;} .dropdown-menus .content h2 {margin: 0 0 .6em; font-size: 1.8rem; color: #1A1A1A; text-transform: none; display: none; font-weight: normal;} /* BG Layer ---------- */ .dropdown-menus .bg-layer {background: #fff; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; -webkit-transition: opacity .3s; transition: opacity .3s; -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; -webkit-box-shadow: 0 2px 3px 1px rgba(0,0,0,.25); box-shadow: 0 2px 3px 1px rgba(0,0,0,.25);} .dropdown-menus.is-dropdown-visible .bg-layer {opacity: 1; -webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, -webkit-transform .3s; transition: transform .3s, opacity .3s; transition: transform .3s, opacity .3s, -webkit-transform .3s;} .dropdown-menus .bg-layer:before {content: ''; width: 0; height: 0; position: absolute; top: -12.5px; left: calc(50% - 12.5px); border-style: solid; border-width: 0 12.5px 12px 12.5px; border-color: transparent transparent #fff transparent; transform-origin: 0 0; box-sizing: border-box; /* -webkit-filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5)); z-index: 0;*/} /* Media Queries for Main Navigation ---------- */ @media only screen and (max-width: 1100px) { #main-navigation {width: calc(58% - 4px); right: 25px;} } @media only screen and (max-width: 1050px) { #main-navigation {width: calc(67% - 4px);} } @media only screen and (max-width: 1000px) { #main-navigation {display: none;} } /* Mobile Navigation ------------------------------------------------------------------------------------------------------------------------------ */ #mobile-navigation {background-color: #00416b; width: 100%; height: 100%; margin: 0 auto; padding: 0 0 175px 0; position: absolute; top: 0; left: 0; text-align: center; z-index: 4000; display: none;} #mobile-navigation > ul {background-color: #fff; margin: 0 auto; padding: 100px 25px 35px 25px; text-align: right; position: relative; clear: both; z-index: 1;} #mobile-navigation ul li {margin: 0 0 7px 0; position: relative; display: block;} /* Mobile Tertiary ----- */ #mobile-navigation ul li.tertiary {display: none;} #mobile-navigation ul li.menu-item-has-children a {padding-right: 10px;} #mobile-navigation ul li.menu-item-has-children a:after {content: '\f107'; font-size: 20px; line-height: 1.5; color: #58585a; position: relative; top: 2px; right: -10px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family:'Font Awesome 5 Pro';} #mobile-navigation ul li.menu-item-has-children a.open:after{content: '\f106'; font-size: 20px; line-height: 1.5; color: #58585a; position: relative; top: 2px; right: -10px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family:'Font Awesome 5 Pro';} #mobile-navigation ul li a {padding: 7px 0; font-size: 14px; line-height: 1.2; color: #00416b; text-transform: uppercase; display: block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 900; font-family: 'Gothic A1', sans-serif;} /* Sub Menus ---------- */ #mobile-navigation ul li .sub-menu {padding: 0 23px 5px 0;} #mobile-navigation ul li .sub-menu li {} /* Sub Menu with Dropdown */ #mobile-navigation ul li .sub-menu li.dropdown a {padding-right: 20px !important;} #mobile-navigation ul li .sub-menu li.dropdown a:after {content: '\f107'; font-size: 20px; line-height: 1.5; color: #58585a; position: absolute; top: 1px; right: -10px; font-family:'Font Awesome 5 Pro';} #mobile-navigation ul li .sub-menu li.dropdown a.open:after {content: '\f106'; font-size: 20px; line-height: 1.5; color: #58585a; position: absolute; top: 1px; right: -10px; font-family:'Font Awesome 5 Pro';} #mobile-navigation ul li .sub-menu li a {padding: 4px 0 !important; font-size: 14px; line-height: 19px;} #mobile-navigation ul li .sub-menu li a:after {content: none;} #mobile-navigation ul li .sub-menu li.dropdown .sub-menu {margin: 0 0 25px 0;} #mobile-navigation ul li .sub-menu li.dropdown .sub-menu a {padding-right: 0 !important; color: #fff;} #mobile-navigation ul li .sub-menu li.dropdown .sub-menu a:after {content: none;} /* Hover */ #mobile-navigation ul li a:hover {color: #0099bb;} #mobile-navigation ul li a:hover::after {color: #0099bb;} #mobile-navigation ul li a.open:hover::after{color: #0099bb;} /* Here */ #mobile-navigation ul li.current_page_item > a, #mobile-navigation ul li.current-page-ancestor > a, #mobile-navigation ul li.current-menu-item > a {color: #0099bb;} #mobile-navigation ul li.current_page_item > a:after, #mobile-navigation ul li.current-page-ancestor > a:after, #mobile-navigation ul li.current-menu-item > a:after {color: #0099bb;} #mobile-navigation ul li.current_page_item > a.open:after, #mobile-navigation ul li.current-page-ancestor > a.open:after, #mobile-navigation ul li.current-menu-item > a.open:after{color: #0099bb;} /* Mobile Navigation Footer -------------------------------------------- */ #mobile-navigation-footer {width: calc(100% - 50px); margin: 0 auto; text-align: right; position: relative; display: block; clear: both; z-index: 0;} /* Mobile Navigation Footer Logo --------------------------------------- */ #mobile-navigation-footer-logo {width: 50%; max-width: 250px; height: 100%; margin: 0; padding: 0 0 0 0; position: absolute; top: 0; left: 0;} #mobile-navigation-footer-logo svg {fill: red; width: 40%; height: auto; margin: 0; padding: 0; opacity: 1; position: relative; display: block; float: right;} /* Mobile Navigation Footer Content ------------------------------------ */ #mobile-navigation-footer-content {width: 100%; padding: 25px 0 25px 0; color: #fff; position: relative; display: block; float: right;} /* Mobile Navigation Footer Content Blocks ---------- */ .mobile-navigation-footer-content-block {width: 100%; margin: 0 0 25px 0; position: relative; display: block; float: none; clear: both;} .mobile-navigation-footer-content-block:last-of-type {width: 100%; float: none; clear: both;} .mobile-navigation-footer-content-block h3 {margin: 0 0 5px 0; font-size: 15px; line-height: 1.2; text-transform: uppercase; font-weight: 700;} .mobile-navigation-footer-content-block p {margin: 0 0 10px 0; padding: 0; font-size: 13px; line-height: 1.5; color: #fff;} .mobile-navigation-footer-content-block p a {color: #fff; text-decoration: none;} /* Mobile Navigation Footer Social ----- */ #mobile-navigation #mobile-navigation-footer-social {position: relative; display: block;} #mobile-navigation #mobile-navigation-footer-social li {margin: 0 0 0 3%; display: inline-block;} #mobile-navigation #mobile-navigation-footer-social li:last-of-type {margin-right: 0;} #mobile-navigation #mobile-navigation-footer-social li a {font-size: 14px; line-height: 1.5; color: #fff; font-weight: 400;} /* Mobile Navigation Trigger ---------- */ #mobile-nav-trigger {width: 35px; margin: 40px 25px 0 0; padding: 0; text-align: center; position: relative; float: right; display: none; z-index: 8001;} /* Hamburger ----- */ #hamburger {width: 35px; height: 45px; margin: 0; position: absolute; top: 0; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;} #hamburger.open span {background: #0099bc;} #hamburger span {background: #00416b; width: 100%; height: 3px; position: absolute; left: 0; display: block; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;} #hamburger span:nth-child(1) {top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;} #hamburger span:nth-child(2) {top: 9px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;} #hamburger span:nth-child(3) {top: 18px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;} #hamburger.open span:nth-child(1) {top: -3px; left: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); opacity: 0;} #hamburger.open span:nth-child(2) {width: 100%; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -4px; left: 5px;} #hamburger.open span:nth-child(3) {width: 100%; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 21px; left: 5px;} /* Media Queries for Mobile Navigation */ @media only screen and (max-width: 1000px) { /* Mobile Navigation Trigger ---------- */ #mobile-nav-trigger {display: block;} } @media only screen and (max-width: 430px) { /* Mobile Navigation Trigger ---------- */ #mobile-nav-trigger {margin-top: 35px;} } /* Hero ------------------------------------------------------------------------------------------------------------------------------------------- */ #hero {width: 100%; height: 55vh; min-height: 400px; position: relative; display: block; clear: both;} #hero::before {content: ''; background-color: #fff; width: 100%; height: calc(100% - 150px); position: absolute; top: 0; left: 0;} #hero.home {height: 95vh; margin: 0 0 180px 0;} #hero.inside {min-height: 470px;} #hero.no-hero-image {height: 50vh; min-height: 300px;} /* Hero Content -------------------------------------------------------- */ #hero-content {background-color: #00416b; width: 40%; height: calc(100% - 50px); min-height: 370px; position: relative; top: 0; display: block;} #hero.inside #hero-content {height: calc(100% - 126px);} /* Tagline ------------------------------------------------------------- */ #tagline {width: calc(100% - 0px); padding: 105px 0 0 0; font-size: 4.5vw; line-height: 1.3; color: #fff; text-transform: uppercase; letter-spacing: .1vw; position: absolute; left: 0; display: block; z-index: 2; font-weight: 700; font-family: 'Gothic A1', sans-serif;} #tagline #tagline-intro {width: calc(32% - 5px); padding: 0 5px 0 0; color: transparent; -webkit-text-stroke: 1px #fff; text-align: right; position: relative; left: 0; display: inline-block;} #tagline #tagline-rotate {width: calc(68% - 5px); padding: 0 0 0 5px; text-align: left; position: absolute; right: 0; display: inline-block;} #tagline #sub-tagline {width: calc(68% - .75vw); margin: -5px 0 0 0; padding: 0 0 0 .75vw; font-size: 1.16vw; color: #b3db0b; text-align: left; position: absolute; right: 0; display: block; clear: both;} /* Hero Image ---------------------------------------------------------- */ #hero #hero-image {background-color: #000; background-size: cover; width: calc(100% - 50px); height: calc(100% - 120px); min-height: 300px; position: absolute; top: 120px; right: 0; display: block; z-index: 1;} #hero #hero-image::before {content: ''; background: rgb(0,48,79); background: linear-gradient(45deg, rgba(0,48,79,0.7497373949579832) 0%, rgba(0,48,79,0) 100%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0;} #hero #hero-image .wrap {height: calc(100% - 60px);} #hero #hero-image .wrap.full-height {height: calc(100% - 10px);} /* Home Hero Image ---------- */ #hero.home #hero-image {background-color: #000; width: 68%; height: calc(100% - 120px); position: absolute; bottom: 0; right: 0; display: block; z-index: 1;} /* Hero Content Copy ---------- */ #hero-content-copy {width: calc(100% - 30px); margin: 0 auto; padding: 0 0 0 30px; position: absolute; bottom: 0; left: 0; z-index: 5;} #hero.inside #hero-content-copy {bottom: 0;} #hero.no-hero-image #hero-content-copy {bottom: 95px;} #hero-content-copy h1, #hero-content-copy h2:not(#page-intro) {font-size: 48px; line-height: 1.3; letter-spacing: 1px; color: #fff; text-transform: uppercase; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #hero-content-copy h1.lowercase, #hero-content-copy h2.lowercase:not(#page-intro) {font-size: 38px; text-transform: none;} #hero-content-copy #page-intro {max-width: 550px; margin: 0; font-size: 15px; line-height: 1.7; color: #b2d909; position: relative; display: block; clear: both; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #hero-content-copy #page-intro i {padding: 0 3px 0 0;} /* Breadcrumbs ---------- */ #breadcrumbs {margin: 0 0 0 0; padding: 5px 0 0 2px; font-size: 13px; line-height: 1.5; color: #fff; position: relative; display: block; clear: both; font-weight: 300; font-family: 'Heebo', sans-serif;} #breadcrumbs a {color: #fff; border-bottom: 1px solid transparent; position: relative; display: inline-block; vertical-align: top; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover */ #breadcrumbs a:hover {border-bottom: 1px solid rgba(255, 255, 255, 0.75);} /* Here */ #breadcrumbs .current-item {max-width: 350px; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} /* Media Queries for Hero */ @media only screen and (max-width: 1100px) { /* Hero Image ---------------------------------------------------------- */ #hero #hero-image {width: calc(100% - 25px);} } @media only screen and (max-width: 1050px) { /* Hero Content -------------------------------------------------------- */ #hero-content {width: 32%;} } @media only screen and (max-width: 1000px) { /* Hero Content -------------------------------------------------------- */ #hero-content {width: 350px;} /* Hero Image ---------------------------------------------------------- */ #hero #hero-image {height: calc(100% - 102px); min-height: 300px; top: 102px;} } @media only screen and (max-width: 800px) { #hero.home {height: 95vh; margin: 0 0 120px 0;} /* Home Hero Image ---------- */ #hero.home #hero-image {width: calc(100% - 25px); height: calc(100% - 120px); bottom: auto;} /* Tagline ------------------------------------------------------------- */ #tagline {width: calc(100% - 0px); padding: 105px 0 0 0; font-size: 6vw; line-height: 1.3; /*top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);*/} #tagline #tagline-intro {background-color: #00416b; width: 100%; max-width: 345px; padding: 50px 5px 50px 0; left: 0;} #tagline #tagline-rotate {width: calc(68% - 5px); padding: 50px 0 0 5px; position: absolute; right: auto; left: 350px;} #tagline #sub-tagline {width: calc(68% - .75vw); margin: -55px 0 0 0; padding: 0 0 0 3px; font-size: 1.16vw; right: auto; left: 355px;} } @media only screen and (max-width: 700px) { /* Hero ---------------------------------------------------------------- */ #hero {height: 55vh;} #hero.home {height: 80vh; min-height: 500px; margin: 0 0 120px 0;} #hero.inside {min-height: 400px;} /* Hero Content -------------------------------------------------------- */ #hero.home #hero-content {height: calc(100% - 40px); min-height: 350px;} /* Home Hero Image ---------- */ #hero.home #hero-image {width: 100%; height: calc(100% - 120px); bottom: auto;} /* Tagline ------------------------------------------------------------- */ #tagline {background-color: rgba(0, 65, 108, 0.95); width: calc(100% - 75px - 25px); padding: 50px 25px 50px 25px; font-size: 9vw; line-height: 1.3; text-align: center; top: calc(50% + 42px); left: 25px;} #tagline #tagline-intro {background: none; width: 100%; max-width: none; padding: 0 5px 0 0; text-align: center; left: auto;} #tagline #tagline-rotate {width: 100%; margin: 0 auto; padding: 0 0 0 0; text-align: center; position: relative; right: auto; left: auto;} #tagline #sub-tagline {width: 100%; margin: 0 auto 0 auto; padding: 0 0 0 0; text-align: center; font-size: 2vw; position: relative; right: auto; left: auto;} /* Hero Image ---------------------------------------------------------- */ #hero #hero-image {height: calc(75% - 102px);} /* Hero Content Copy ---------- */ #hero-content-copy {width: calc(100% - 0px); padding: 0 0 0 0; bottom: 50px;} #hero.inside #hero-content-copy {bottom: 50px;} #hero-content-copy h1, #hero-content-copy h2:not(#page-intro) {font-size: 40px; line-height: 1.3; letter-spacing: 1px;} #hero-content-copy h1.lowercase, #hero-content-copy h2.lowercase:not(#page-intro) {font-size: 35px;} #hero-content-copy #page-intro {font-size: 13px;} /* Breadcrumbs ----- */ #breadcrumbs {font-size: 12px;} } @media only screen and (max-width: 470px) { /* Hero Content -------------------------------------------------------- */ #hero-content {width: calc(100% - 85px);} } @media only screen and (max-width: 430px) { /* Hero Content -------------------------------------------------------- */ #hero-content {height: calc(100% - 25px);} /* Hero Image ---------------------------------------------------------- */ #hero #hero-image {height: calc(75% - 93px); top: 93px;} /* Hero Content Copy ---------- */ #hero-content-copy {width: calc(100% - 0); padding: 0 0 0 0; bottom: 25px;} #hero.inside #hero-content-copy {bottom: 50px;} #hero-content-copy h1, #hero-content-copy h2:not(#page-intro) {font-size: 30px;} #hero-content-copy h1.lowercase, #hero-content-copy h2.lowercase:not(#page-intro) {font-size: 28px;} #hero-content-copy #page-intro {font-size: 11px;} /* Breadcrumbs ----- */ #breadcrumbs {font-size: 10px;} } /* Hero Slide ---------------------------------------------------------- */ .hero-slide {background-color: #000; background-size: cover; width: calc(100% - 70px); height: 100%; position: relative; display: block; float: left;} /* #hero .hero-slide::after {content: ''; background-color: rgba(0,0,0,.20); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; visibility: visible;} */ /* Hero Slide Content ---------- */ .hero-slide-content {width: 50%; position: absolute; bottom: 40px; /*left: -125px;*/ left: 25px; z-index: 10;} .hero-slide-content h1 {margin: 0 0 15px 0; font-size: 42px; line-height: 1.2; color: #fff; text-shadow: 0 1px 2px #333333; font-weight: 700;} .hero-slide-content .button {color: #fff; text-shadow: 0 1px 2px #333333;} .hero-slide-content .button::before {color: #fff; text-shadow: 0 1px 2px #333333; border-color: #fff;} /* Hover ---------- */ .hero-slide-content .button:hover::before {background-color: #fff !important; color: #122a7c !important;} /* Navigation Dots ----- */ #hero.home #navigation-dots {width: 40px; height: 90%; text-align: center; position: absolute; top: 0; right: 0; z-index: 500;} #hero.home #navigation-dots-wrapper {margin: 0 auto;} #hero.home #navigation-dots .slick-dots {width: 100%; margin: 0 auto; padding: 0; list-style: none; display: block; text-align: center !important;} #hero.home #navigation-dots .slick-dots li {position: relative; display: block !important; height: 25px !important; width: 25px !important; margin: 0 !important; padding: 0 !important; cursor: pointer; float: none !important; clear: none !important;} #hero.home #navigation-dots .slick-dots li:before {content: none !important;} #hero.home #navigation-dots .slick-dots li button {border: 0; background: transparent; display: block; height: 25px; width: 25px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none;} #hero.home #navigation-dots .slick-dots li button:focus {outline: none;} #hero.home #navigation-dots .slick-dots li button:before {content: "\2022"; width: 25px !important; height: 25px !important; font-size: 35px; line-height: 1; color: #fff; text-align: center; opacity: .25; position: relative; top: auto; left: auto; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: "slick";} #hero.home #navigation-dots .slick-dots li:hover button:before {opacity: .5;} #hero.home #navigation-dots .slick-dots li.slick-active button:before {opacity: 1; color: #fff;} /* Home Page -------------------------------------------------------------------------------------------------------------------------------------- */ /* Home Introduction --------------------------------------------------- */ #home-intro {margin: 0 0 180px 0; padding: 125px 0; position: relative; display: block; clear: both;} /* Home Introduction Top Image ---------- */ #home-intro-top-image {background-color: #e6eaed; background-position: center center no-repeat; background-size: cover; width: 45%; height: calc(100% - 110px); position: absolute; top: -125px; left: 0; display: block; z-index: 0;} /* Home Introduction Copy ---------- */ #home-intro-copy {background-color: rgba(255, 255, 255, 0.95); width: 100%; max-width: 600px; margin: 0 auto; padding: 80px 100px; position: relative; display: block; z-index: 1;} #home-intro-copy h2 {margin: 0 0 20px 0; font-size: 30px; line-height: 1.3; color: #01426c; text-transform: uppercase; display: block; clear: both; font-weight: 700; font-family: 'Gothic A1', sans-serif;} #home-intro-copy p {margin: 0 0 20px 0; font-size: 19px; line-height: 1.8; color: #5c5c5c; display: block; clear: both;} #home-intro-copy p:last-of-type {margin-bottom: 40px;} /* Home Introduction Bottom Image ---------- */ #home-intro-bottom-image{background-color: #e6eaed; background-position: center center no-repeat; background-size: cover; width: 45%; height: calc(100% - 110px); position: absolute; bottom: -125px; right: 0; display: block; z-index: 0;} /* Home Testimonial ---------------------------------------------------- */ #home-testimonial {background: url(images/logo-wave.svg) center top no-repeat #003f68; background-size: cover; width: calc(100% - 100px); margin: 0 auto 200px auto; padding: 50px 50px 70px 50px; text-align: center; position: relative; display: block; clear: both;} #home-testimonial::before {content: '\f10d'; margin: 0 auto 25px auto; font-size: 28px; line-height: 1; color: #0099bb; position: relative; display: block; font-weight: 700; font-family: 'Font Awesome 5 Pro';} #home-testimonial .testimonial {position: relative; display: block; float: left;} #home-testimonial h3 {max-width: 800px; margin: 0 auto 25px auto; font-size: 25px; line-height: 1.6; color: #fff;} #home-testimonial p {padding-bottom: 25px; font-size: 15px; line-height: 1.2; color: #fff; font-weight: 700;} #home-testimonial p span{background-color: #0099bb; width: 1px; height: 100%; margin: 0 3px; position: relative; display: inline-block;} /* Testimonial Navigation ---------- */ #testimonial-navigation {width: 100%; position: absolute; bottom: 25px; left: 0; display: block; clear: both;} /* Dots ----- */ #testimonial-navigation .slick-dots {width: 100%; margin: 0 auto; padding: 10px 0 0 0; list-style: none; display: block;} #testimonial-navigation .slick-dots li {position: relative; display: inline-block !important; height: 25px !important; width: 25px !important; margin: 0 !important; padding: 0 !important; cursor: pointer; float: none !important; clear: none !important;} #testimonial-navigation .slick-dots li:before {content: none !important;} #testimonial-navigation .slick-dots li button {border: 0; background: transparent; display: block; height: 35px; width: 35px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none;} #testimonial-navigation .slick-dots li button:focus {outline: none;} #testimonial-navigation .slick-dots li button:before {content: "\2022"; width: 15px !important; height: 15px !important; font-size: 25px; line-height: 15px; color: #fff; text-align: center; opacity: .25; position: absolute; top: 0; left: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: "slick";} #testimonial-navigation .slick-dots li:hover button:before {opacity: .5;} #testimonial-navigation .slick-dots li.slick-active button:before {opacity: 1; color: #0099bb;} /* Home Featured Projects ------------------------------------------------------------------------------------------------------------------------- */ #home-featured-projects {background: url(images/spotlight-background.png) center center no-repeat; background-size: cover; height: 90vh; min-height: 650px; margin: 0 auto 300px auto; border-top: 1px solid rgba(76, 76, 76, 0.1); border-bottom: 1px solid rgba(76, 76, 76, 0.1); position: relative; display: block; clear: both;} #home-featured-projects::before {content: ''; background-color: rgba(255,255,255,.85); width: 100%; height: 100%; position: absolute; top: 0; left: 0;} /* Home Featured Projects Tabs ----------------------------------------- */ #home-featured-projects #home-featured-projects-nav {margin: -35px auto 40px auto; position: relative; display: block; clear: both;} #home-featured-projects #home-featured-projects-nav li {text-align: center; border-bottom: 1px solid rgba(76, 76, 76, 0.1); border-right: 1px solid rgba(76, 76, 76, 0.1); position: relative; display: block; float: left;} #home-featured-projects #home-featured-projects-nav li:first-child {width: calc(100% / 3 - 2px); border-left: 1px solid rgba(76, 76, 76, 0.1);} #home-featured-projects #home-featured-projects-nav li a{background-color: #fff; width: 100%; padding: 30px 0 25px 0; font-size: 14px; line-height: 1; color: #5e5f60; letter-spacing: 1px; text-transform: uppercase; display: block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #home-featured-projects #home-featured-projects-nav li a::before {content: ''; background-color: #dfdfdf; width: 100%; height: 5px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: absolute; top: 0; left: 0;} /* Hover ---------- */ #home-featured-projects #home-featured-projects-nav li:hover::before {background-color: #0098bb;} #home-featured-projects #home-featured-projects-nav li:hover a {color: #00416a;} /* Active ---------- */ #home-featured-projects #home-featured-projects-nav li .active {color: #00416a;} #home-featured-projects #home-featured-projects-nav li .active::before {background-color: #0098bb;} /* Tab Content --------------------------------------------------------- */ .tab-content {width: 100%; height: 100%; display: block;} /* Home Featured Project ----------------------------------------------- */ .home-featured-project {width: 100%; height: 100%; position: relative; display: block;} .home-featured-project .wrap {height: 100%;} /* Home Featured Project Image ---------- */ .home-featured-project-image {width: 80%; height: 80%; position: absolute; top: 0; left: 0; display: block;} /* Home Featured Project Content ---------- */ .home-featured-project-content {background-color: #fff; width: calc(60% - 95px - 95px); padding: 70px 95px 70px 95px; border: 1px solid rgba(76, 76, 76, 0.1); position: absolute; bottom: -20px; right: 0; display: block;} .home-featured-project-content h2 {margin: 0 0 10px 0; font-size: 20px; line-height: 1.2; color: #00416a; display: block; clear: both; font-weight: 900; font-family: 'Gothic A1', sans-serif;} .home-featured-project-content h3 {margin: 0 0 20px 0; font-size: 13px; line-height: 1.2; color: #0099bb;; display: block; clear: both; font-weight: 900; font-family: 'Gothic A1', sans-serif;} .home-featured-project-content h3 i {padding-right: 3px;} .home-featured-project-content p {font-size: 16px; line-height: 1.7; color: #5c5c5c; margin: 0 0 20px 0; display: block; clear: both;} /* Project Spotlight */ .home-featured-project-content span {background-color: #00416a; padding: 17px 20px 13px 95px; font-size: 11px; line-height: 1; color: #fff; text-align: right; text-transform: uppercase; position: absolute; top: -42px; left: -1px; font-weight: 900; font-family: 'Gothic A1', sans-serif;} /* View Portfolio ------------------------------------------------------ */ #view-portfolio {margin: 0 auto 25px auto; padding: 75px 0 0 0; text-align: center; position: relative;} #view-portfolio a {} /* Media Queries for Home Page */ @media only screen and (max-width: 1100px) { /* Home Featured Projects ------------------------------------------------------------------------------------------------------------------------- */ /* Home Featured Project Content ---------- */ .home-featured-project-content {width: calc(80% - 100px); padding: 60px 50px 60px 50px;} /* Project Spotlight */ .home-featured-project-content span {padding: 17px 20px 13px 50px;} } @media only screen and (max-width: 900px) { /* Home Introduction --------------------------------------------------- */ #home-intro {margin: 0 0 180px 0; padding: 100px 0;} /* Home Introduction Copy ---------- */ #home-intro-copy {width: calc(100% - 200px); max-width: 600px; padding: 50px 50px;} } @media only screen and (max-width: 800px) { /* Home Testimonial ---------------------------------------------------- */ #home-testimonial {width: calc(100% - 0px); margin: 0 auto 200px auto; padding: 50px 50px 70px 50px;} #home-testimonial::before {margin: 0 auto 25px auto; font-size: 28px;} #home-testimonial h3 {margin: 0 auto 25px auto; font-size: 20px; line-height: 1.5;} #home-testimonial p {font-size: 15px;} } @media only screen and (max-width: 700px) { /* Home Introduction --------------------------------------------------- */ #home-intro {margin: 0 0 180px 0; padding: 100px 0;} /* Home Introduction Top Image ---------- */ #home-intro-top-image {width: 60%; height: 50%; top: -100px; left: -25px;} /* Home Introduction Copy ---------- */ #home-intro-copy {width: calc(100% - 75px); padding: 50px 25px;} #home-intro-copy h2 {font-size: 25px;} #home-intro-copy p {font-size: 16px;} /* Home Introduction Bottom Image ---------- */ #home-intro-bottom-image{width: 60%; height: 50%; bottom: -100px; right: -25px;} /* Home Featured Projects ------------------------------------------------------------------------------------------------------------------------- */ #home-featured-projects {height: auto; min-height: 90vh; margin: 0 0 125px 0;} /* Home Featured Projects Tabs ----------------------------------------- */ #home-featured-projects #home-featured-projects-nav li a{font-size: 12px;} /* Home Featured Project Image ---------- */ .home-featured-project-image {width: 100%; height: 50vh; min-height: 400px; position: relative; top: auto; left: auto;} /* Home Featured Project Content ---------- */ .home-featured-project-content {width: calc(100% - 100px); margin: 0 auto 50px auto; padding: 50px 50px 50px 50px; position: relative; bottom: auto; right: auto;} /* Project Spotlight */ .home-featured-project-content span {padding: 17px 20px 13px 50px;} /* View Portfolio ------------------------------------------------------ */ #view-portfolio {padding: 5px 0 0 0;} } @media only screen and (max-width: 500px) { /* Home Introduction --------------------------------------------------- */ #home-intro {margin: 0 0 180px 0; padding: 100px 0;} /* Home Introduction Top Image ---------- */ #home-intro-top-image {width: 90%; height: 50%;} /* Home Introduction Copy ---------- */ #home-intro-copy {width: calc(100% - 50px); padding: 35px 25px;} /* Home Introduction Bottom Image ---------- */ #home-intro-bottom-image{width: 90%; height: 50%;} /* Home Testimonial ---------------------------------------------------- */ #home-testimonial {width: calc(100% + 50px); margin: 0 auto 200px auto; padding: 50px 25px 50px 25px; left: -25px;} #home-testimonial::before {font-size: 25px;} #home-testimonial h3 {margin: 0 auto 25px auto; font-size: 18px;} #home-testimonial p {font-size: 14px;} /* Home Featured Projects ------------------------------------------------------------------------------------------------------------------------- */ #home-featured-projects {height: auto; min-height: 90vh;} /* Home Featured Projects Tabs ----------------------------------------- */ #home-featured-projects #home-featured-projects-nav li a{font-size: 11px;} /* Home Featured Project Image ---------- */ .home-featured-project-image {width: 100%; height: 30vh; min-height: 275px;} /* Home Featured Project Content ---------- */ .home-featured-project-content {width: calc(100% - 50px); padding: 35px 25px 35px 25px;} /* Project Spotlight */ .home-featured-project-content span {padding: 17px 20px 13px 25px;} } /* Page Content ----------------------------------------------------------------------------------------------------------------------------------- */ #page-content {width: 100%; min-height: 500px; margin: 0 auto; padding: 50px 0 100px 0; position: relative; display: block; clear: both;} #page-content.news-inside {padding-top: 0;} #page-content.no-padding {padding-top: 0;} #page-content.approach {padding: 50px 0 0 0;} #page-content h1, #page-content h2, #page-content h3, #page-content h4, #page-content h5, #page-content h6 {margin: 0 0 20px 0; line-height: 1.3; color: #00416a; position: relative; display: block; clear: both; font-weight: 300; font-family: 'Heebo', sans-serif;} #page-content h1 a, #page-content h2 a, #page-content h3 a, #page-content h4 a, #page-content h5 a, #page-content h6 a {color: #00416a;} #page-content h1 {font-size: 32px;} #page-content h2 {font-size: 28px;} #page-content h3 {font-size: 24px;} #page-content h4 {font-size: 20px;} #page-content h5 {font-size: 18px;} #page-content h6 {font-size: 17px;} #page-content p {margin: 0 0 20px 0; font-size: 16px; line-height: 1.9; color: #5c5c5c;} #page-content p a {color: #00416a; position: relative; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #page-content p a::before {content: ''; background-color: #00416a; width: 0; height: 1px; position: absolute; bottom: 0; left: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #page-content p a:hover:before {width: 100%;} #page-content img {max-width: 100%; width: auto; height: auto;} #page-content a[href$=jpg], #page-content a[href$=jpeg], #page-content a[href$=png], #page-content a[href$=gif] {border: none;} #page-content a[href$=jpg]::before, #page-content a[href$=jpeg]::before, #page-content a[href$=png]::before, #page-content a[href$=gif]::before {content: none;} #page-content strong {font-weight: 700;} #page-content ul {margin: 0 0 25px 0; padding: 0 0 0 35px; position: relative; display: block; clear: both; list-style: none;} #page-content ul li {margin: 0 0 5px 0; font-size: 16px; line-height: 1.9; color: #5c5c5c; position: relative;} #page-content ul li::before {content: ''; background-color: #0098bb; width: 3px; height: 3px; border-radius: 50%; position: absolute; top: 15px; left: -13px; display: inline-block;} #page-content ul li a {color: #00416a; display: inline-block;} #page-content ol {margin: 0 0 25px 0; padding: 0 0 0 35px; position: relative; display: block; clear: both; list-style: decimal;} #page-content ol li {margin: 0 0 5px 0; font-size: 16px; line-height: 1.9; color: #5c5c5c; position: relative;} #page-content ol li a {color: #00416a; display: inline-block;} /* Blockquote ---------- */ #page-content blockquote {margin: 0; padding: 10px 0 35px 50px; text-align: left; position: relative; display: block; clear: both;} #page-content blockquote:before {content: '\f10d'; font-size: 25px; line-height: 1; color: #0098bb; position: absolute; top: 7px; left: 0; font-weight: 600; font-family: 'Font Awesome 5 Pro';} #page-content blockquote p {margin: 0 0 25px 0; font-size: 17px; line-height: 1.9; color: #5c5c5c; font-style: normal;} #page-content blockquote em {font-style: normal;} #page-content blockquote cite {color: #5c5c5c; font-weight: 700;} #page-content blockquote cite em{font-style: normal;} /* Gutenberg Embeds ----- */ .wp-block-embed__wrapper {padding-top: 56.25%; position: relative; overflow: hidden;} .wp-block-embed__wrapper iframe {width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0;} /* Gutenberg Table ----- */ #page-content .wp-block-table {} #page-content .wp-block-table th {padding: 10px 0; text-align: center;} #page-content .wp-block-table td {padding: 10px 0; text-align: center;} /* Main Content ----------------------------------------------------------------------------------------------------------------------------------- */ #main-content {background-color: #fff; width: calc(92% - 125px - 168px); min-height: 300px; margin: 0; padding: 70px 168px 50px 125px; position: relative; display: block; float: left; z-index: 10;} #page-content.news-inside #main-content {margin: -50px 0 0 0; border-top: 5px solid #00416a;} #page-content #main-content.secondary-navigation {width: calc(92% - 168px); padding-left: 0;} #page-content #main-content.no-right-padding {width: 92%; padding-right: 0;} #page-content #main-content.team-inside {width: calc(92% - 168px); padding-left: 0;} #page-content.tabs #main-content, #page-content.wide #main-content {width: calc(100% - 50px); padding: 75px 50px 0 0;} #page-content #main-content #main-content-article {width: calc(90% - 110px); position: relative; float: right;} #page-content #main-content #main-content-article.disabled {width: 100%; float: none; clear: both;} #page-content #main-content.secondary-navigation #main-content-article {width: calc(90% - 237px);} #page-content #main-content.team-inside #main-content-article {width: calc(90% - 237px);} /* Tabs ---------------------------------------------------------------- */ #page-content #main-content .main-content-tab {background-color: #fff; width: calc(70% - 110px); padding: 75px 10px 70px 100px; position: relative; float: right;} /* Tab Image ---------- */ #page-content #main-content .tab-image {width: 40%; height: 100%; position: absolute; top: 0; left: 0; display: block;} /* Yoast How-to Steps -------------------------------------------------- */ #main-content .schema-how-to-steps {} #main-content .schema-how-to-step {background-color: #f9f9f9; margin: 0 0 45px 0; padding: 10px 15px; border: 1px solid #ececec;} #main-content .schema-how-to-step .schema-how-to-step-name {margin: 0 0 10px 0; position: relative; display: block; clear: both;} #main-content .schema-how-to-step .schema-how-to-step-text picture {margin: 10px 0 0 0; position: relative; display: block; clear: both;} /* Yoast FAQ ----------------------------------------------------------- */ #main-content .schema-faq {} #main-content .schema-faq-section {background-color: #f9f9f9; margin: 0 0 20px 0; padding: 20px 15px 5px 15px; border: 1px solid #ececec;} #main-content .schema-faq .schema-faq-question {margin: 0 0 10px 0; font-size: 19px; line-height: 1.3; position: relative; display: block; clear: both;} #main-content .schema-faq .schema-faq-answer picture {margin: 10px 0 0 0; position: relative; display: block; clear: both;} /* Main Content Blocks ------------------------------------------------- */ #main-content-blocks {width: calc(100% - 160px); margin: 0 auto 0 auto; padding: 0; position: relative; display: block; clear: both;} /* Main Content Block ---------- */ .main-content-block {margin: 0 0 50px 0; padding: 50px 0; position: relative; display: block; clear: both;} /* Main Content Block Content ----- */ .main-content-block-content {background-color: #fff; width: calc(60% - 65px); margin: 0; padding: 50px 0 25px 65px; position: relative; display: block; float: right; z-index: 1;} .main-content-block:nth-of-type(even) .main-content-block-content {padding: 50px 65px 25px 0; float: left;} .main-content-block.no-image .main-content-block-content {width: calc(100% - 130px); padding-right: 65px; float: none; clear: both;} /* Main Content Block Image ----- */ .main-content-block-image {width: 63%; height: 100%; position: absolute; top: 0; left: 0; display: block; z-index: 0;} .main-content-block:nth-of-type(even) .main-content-block-image {left: auto; right: 0;} /* Media Queries for Main Content */ @media only screen and (max-width: 1100px) { /* Main Content -------------------------------------------------------- */ #main-content {width: calc(92% - 125px - 50px); padding: 70px 50px 50px 125px;} #page-content #main-content.team-inside {width: calc(100% - 50px);} #page-content #main-content.secondary-navigation {width: calc(92% - 50px); padding-left: 0;} #page-content.tabs #main-content, #page-content.wide #main-content {width: calc(100% - 0px); padding: 75px 0 0 0;} /* Main Content Blocks ------------------------------------------------- */ #main-content-blocks {width: calc(100% - 50px);} } @media only screen and (max-width: 900px) { /* Main Content Blocks ------------------------------------------------- */ /* Main Content Block ---------- */ .main-content-block {margin: 0 0 50px 0;} /* Main Content Block Content ----- */ .main-content-block-content {width: calc(90% - 50px); padding: 50px 0 25px 50px;} .main-content-block:nth-of-type(even) .main-content-block-content {padding: 50px 50px 25px 0;} .main-content-block.no-image .main-content-block-content {width: calc(100% - 100px); padding-right: 50px; float: none; clear: both;} /* Main Content Block Image ----- */ .main-content-block-image {width: 63%;} } @media only screen and (max-width: 800px) { /* Main Content -------------------------------------------------------- */ #main-content {width: calc(100% - 50px); padding: 70px 25px 50px 25px;} #page-content.news-inside #main-content {margin: -50px 0 0 0;} #page-content #main-content.secondary-navigation {width: calc(100% - 25px);} #page-content #main-content.team-inside {width: calc(100% - 25px);} #page-content #main-content.secondary-navigation #main-content-article {width: calc(100% - 212px);} #page-content #main-content.team-inside #main-content-article {width: calc(100% - 159px);} } @media only screen and (max-width: 700px) { #page-content.news-inside #main-content {margin: -25px 0 0 0;} #page-content.tabs #main-content, #page-content.wide #main-content {width: 100%; padding-right: 0;} #page-content #main-content.secondary-navigation #main-content-article {width: calc(100% - 50px);} #page-content #main-content #main-content-article {width: 100%; margin: 0 auto 25px auto; float: none; clear: both;} #page-content #main-content.secondary-navigation #main-content-article {width: calc(100% - 50px);} #page-content #main-content.team-inside #main-content-article {width: calc(100% - 50px);} /* Main Content Tab ----- */ #page-content #main-content .main-content-tab {width: calc(90% - 25px); padding: 75px 25px 70px 25px;} /* Tab Image ---------- */ #page-content #main-content .tab-image {width: 70%;} /* Main Content Blocks ------------------------------------------------- */ /* Main Content Block ---------- */ .main-content-block {margin: 0 0 25px 0; padding: 0 0 25px 0;} /* Main Content Block Content ----- */ .main-content-block-content {width: 100%; padding: 25px 0 25px 0;} .main-content-block:nth-of-type(even) .main-content-block-content {padding: 25px 25px 25px 0;} .main-content-block.no-image .main-content-block-content {width: calc(100% - 0px); padding-right: 0;} /* Main Content Block Image ----- */ .main-content-block-image {width: 100%; height: 40vh; min-height: 250px; position: relative; display: block; clear: both;} } @media only screen and (max-width: 600px) { /* Main Content -------------------------------------------------------- */ #page-content #main-content.secondary-navigation #main-content-article {width: calc(100% - 50px);} } @media only screen and (max-width: 500px) { /* Main Content -------------------------------------------------------- */ #main-content {width: calc(100% - 25px); padding-left: 25px;} #page-content #main-content.secondary-navigation {width: calc(100% - 25px); padding-left: 25px;} #page-content #main-content.secondary-navigation #main-content-article {width: 100%; float: none; clear: both;} #page-content #main-content.team-inside {width: calc(100% - 25px); padding-left: 25px;} #page-content #main-content.team-inside #main-content-article {width: 100%;} #page-content #main-content.no-right-padding {padding-right: 25px;} /* Main Content Tab ----- */ #page-content #main-content .main-content-tab {width: calc(90% - 50px); padding: 50px 25px 50px 25px; float: right;} /* Tab Image ---------- */ #page-content #main-content .tab-image {width: 80%;} /* Main Content Blocks ------------------------------------------------- */ #main-content-blocks {width: 100%;} /* Main Content Block Image ----- */ .main-content-block-image {height: 30vh; min-height: 200px;} } @media only screen and (max-width: 400px) { #page-content.tabs #main-content, #page-content.wide #main-content {padding-top: 0;} /* Main Content Tab ----- */ #page-content #main-content .main-content-tab {width: calc(100% - 50px); padding: 0 25px 0 25px; position: relative; display: block; float: none; clear: both;} /* Tab Image ---------- */ #page-content #main-content .tab-image {display: none;} } /* Sidebar ---------------------------------------------------------------------------------------------------------------------------------------- */ #page-content #main-content #sidebar {width: 100px; border-right: 1px solid #ebf0f3; position: relative; float: left;} #page-content #main-content.secondary-navigation #sidebar {width: 255px; left: -30px;} #page-content #main-content.team-inside #sidebar {width: 225px; left: 0;} #page-content #main-content #sidebar h3 {max-width: 80px; margin: 0 0 20px 0; font-size: 11px; line-height: 1.2; color: #a4a4a4; text-align: center; text-transform: uppercase; font-weight: 700; font-family: 'Gothic A1', sans-serif;} /* Social Share ---------- */ #page-content #main-content #sidebar #post-share {} #page-content #main-content.team-inside #sidebar #post-share {padding: 0 0 0 125px;} #page-content #main-content #sidebar #post-share ul {max-width: 80px; margin: 0; padding: 0; text-align: center; position: relative; display: block; clear: both; list-style: none;} #page-content #main-content #sidebar #post-share li {margin: 0 0 15px 0; padding: 0; font-size: 22px; line-height: 1; display: block; clear: both;} #page-content #main-content #sidebar #post-share li::before {content: none;} #page-content #main-content #sidebar #post-share li:last-child {margin-bottom: 0;} #page-content #main-content #sidebar #post-share li a {margin: 0; padding: 0; font-size: 20px; line-height: 1; color: #00416a; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover ----- */ #page-content #main-content #sidebar #post-share li a:hover {color: #0098bb;} /* Secondary Navigation ---------- */ #page-content #main-content #sidebar #secondary-navigation {text-align: right; position: relative; display: block; clear: both;} #page-content #main-content #sidebar #secondary-navigation ul {margin: 0; padding: 0; position: relative; display: block; list-style: none;} #page-content #main-content #sidebar #secondary-navigation ul li {margin: 0; padding: 0; display: block; clear: both;} #page-content #main-content #sidebar #secondary-navigation ul li::before {content: none;} #page-content #main-content #sidebar #secondary-navigation ul li a {margin: 0; padding: 25px 30px 25px 30px; font-size: 12px; line-height: 1.2; color: #00416a; text-transform: uppercase; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; display: block; clear: both; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #page-content #main-content #sidebar #secondary-navigation ul li::after {content: ''; background-color: #ebf0f3; width: calc(100% - 30px); height: 1px; position: relative; right: -30px; display: block;} #page-content #main-content #sidebar #secondary-navigation ul li:last-child::after {content: none;} /* Hover ----- */ #page-content #main-content #sidebar #secondary-navigation ul li.current_page_item a {background-color: #00416a; color: #fff;} #page-content #main-content #sidebar #secondary-navigation ul li a:hover {background-color: #00416a; color: #fff;} /* Media Queries for Sidebar */ @media only screen and (max-width: 1100px) { #page-content #main-content.secondary-navigation #sidebar {left: 0;} #page-content #main-content #sidebar #secondary-navigation ul li::after {width: 100%; right: 0;} } @media only screen and (max-width: 800px) { #page-content #main-content.team-inside #sidebar #post-share {padding: 0 0 0 25px;} #page-content #main-content.secondary-navigation #sidebar {width: 175px;} #page-content #main-content.team-inside #sidebar {width: 125px;} } @media only screen and (max-width: 700px) { #page-content #main-content #sidebar {width: 100%; padding: 25px 0 0 0; border-right: none; border-top: 1px solid #ebf0f3; position: relative; float: none; clear: both;} #page-content #main-content.team-inside #sidebar {width: calc(100% - 25px); margin: 0 auto;} #page-content #main-content #sidebar h3 {width: 100%; max-width: 100%; margin: 0 0 20px 0; font-size: 11px; line-height: 1.2; text-align: center;} /* Social Share ---------- */ #page-content #main-content.team-inside #sidebar #post-share {width: 100%; max-width: 100%; padding: 0;} #page-content #main-content #sidebar #post-share ul {width: 100%; max-width: 100%; text-align: center;} #page-content #main-content #sidebar #post-share li {margin: 0 10px 15px 10px; padding: 0; font-size: 22px; line-height: 1; display: inline-block; clear: none;} #page-content #main-content #sidebar #post-share li:last-child {margin-bottom: 15px;} #page-content #main-content #sidebar #post-share li a {margin: 0; padding: 0; font-size: 20px; line-height: 1; color: #00416a; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover ----- */ #page-content #main-content #sidebar #post-share li a:hover {color: #0098bb;} #page-content #main-content.secondary-navigation #sidebar {display: none;} } /* Team ------------------------------------------------------------------------------------------------------------------------------------------- */ /* Professional Level -------------------------------------------------- */ #page-content .professional-level {min-height: 250px; margin: 0 auto 0 auto; padding: 0 0 100px 0; position: relative; display: block; clear: both;} #page-content .professional-level:first-of-type {/*margin-top: -50px; padding-top: 0;*/} #page-content .professional-level h2 {font-size: 17px; line-height: 1; letter-spacing: 2px; text-transform: uppercase; position: relative;} #page-content .professional-level h2 span {margin: 0; padding: 0; position: relative; display: block; z-index: 1;} /* #page-content .professional-level h2 {background-color: #fff; width: 165px; height: 375px; font-size: 17px; line-height: 1; letter-spacing: 2px; text-align: center; text-transform: uppercase; position: absolute; top: 0; left: 0;} #page-content .professional-level h2 span {background-color: #fff; width: 375px; height: 44px; margin: 0; padding: 30px 0 2px 0; transform: rotate(-90deg); position: absolute; left: -150px; top: 48%; display: block; z-index: 1;} */ /* Team Members ---------- */ #page-content .professional-level .team-members {margin: 0; padding: 0; position: relative; display: block;} #page-content .professional-level .team-members a {margin: 0 2% 50px 0; text-align: center; position: relative; display: block; float: left;} /* Featured Image ----- */ #page-content .professional-level .team-members a .team-member-featured-image {width: 100%; height: 45vh; min-height: 275px; margin: 0 auto 25px auto; position: relative; display: block; clear: both; z-index: 0;} /* Hover Image ----- */ #page-content .professional-level .team-members a .team-member-hover-image {width: 100%; height: 45vh; min-height: 275px; margin: 0 auto 25px auto; opacity: 0; position: absolute; top: 0; left: 0; display: block; clear: both; -moz-transition: opacity .5s linear; -webkit-transition: opacity .5s linear; -ms-transition: opacity .5s linear; -o-transition: opacity .5s linear; transition: opacity .5s linear; z-index: 1;} /* Team Member Meta ----- */ #page-content .professional-level .team-members a .team-member-meta h3 {margin: 0 0 5px 0;} #page-content .professional-level .team-members a .team-member-meta p {margin: 0; font-size: 15px; line-height: 1.2; color: #2f3031; font-weight: 700;} /* Hover ----- */ #page-content .professional-level .team-members a:hover .team-member-hover-image {opacity: 1;} /* Leadership ----- */ #page-content #leadership.professional-level {/*background-color: #f0f4f6;*/} #page-content #leadership.professional-level .team-members a {width: calc(100% / 2 - 1%);} #page-content #leadership.professional-level .team-members a:nth-of-type(2n+2) {margin-right: 0;} #page-content #leadership.professional-level .team-members a:nth-of-type(2n+1) {clear: both;} /* Project Management ----- */ #page-content #project-management.professional-level {background-color: #fff;} #page-content #project-management.professional-level h2, #page-content #project-management.professional-level h2 span {/*background-color: #f0f4f6;*/} #page-content #project-management.professional-level .team-members a {width: calc(100% / 2 - 1%);} #page-content #project-management.professional-level .team-members a:nth-of-type(2n+2) {margin-right: 0;} #page-content #project-management.professional-level .team-members a:nth-of-type(2n+1) {clear: both;} /* Our Team ----- */ #page-content #our-team.professional-level {/*background-color: #f0f4f6;*/} #page-content #our-team.professional-level .team-members {margin-left: 0;} #page-content #our-team.professional-level .team-members #team-gallery {padding-top: 0 !important;} /* Media Queries for Team */ @media only screen and (max-width: 1000px) { /* Project Management ----- */ #page-content #leadership.professional-level .team-members a, #page-content #project-management.professional-level .team-members a {width: 100%; margin: 0 auto 50px auto;} #page-content #leadership.professional-level .team-members a:nth-of-type(2n+2), #page-content #project-management.professional-level .team-members a:nth-of-type(2n+2) {margin-right: auto;} #page-content #leadership.professional-level .team-members a:nth-of-type(2n+1), #page-content #project-management.professional-level .team-members a:nth-of-type(2n+1) {clear: both;} } /* Team Inside ------------------------------------------------------------------------------------------------------------------------------------ */ /* Article Links ------------------------------------------------------- */ #article-links {margin: 35px 0 0 0; padding: 35px 0 0 0; border-top: 1px solid #ebf0f3; position: relative; display: block; clear: both;} #article-links a {margin: 0 0 25px 0; padding: 3px 0 3px 90px; font-size: 19px; line-height: 1.3; color: #00416a; position: relative; display: block; clear: both; font-weight: 300;} #article-links a::before {content: '\f178'; margin: 0; padding: 0 0 0 5px; font-size: 15px; line-height: 1; color: #0098bb; position: absolute; top: calc(50% - 7px); left: 0; display: inline-block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 300; font-family: 'Font Awesome 5 Pro';} #article-links a::after {content: ''; background-color: #ebf0f3; width: 1px; height: 100%; position: absolute; top: 0; left: 40px;} /* Hover ----- */ #article-links a:hover::before {left: 3px;} /* Additional Images ---------- */ #page-content #main-content #additional-images {width: 100%; margin: 0 auto; padding: 10px 0 0 0; position: relative; display: block; clear: both;} #page-content #main-content #additional-images a {width: 49%; height: 30vh; min-height: 200px; margin: 0 0 1% 0; position: relative; display: block; float: left;} #page-content #main-content #additional-images a:nth-of-type(even) {float: right;} #page-content #main-content #additional-images a:nth-of-type(odd) {clear: both;} #page-content #main-content #additional-images a img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;} /* Media Queries for Team Inside */ @media only screen and (max-width: 500px) { /* Additional Images ---------- */ #page-content #main-content #additional-images a {width: 100%; height: 40vh; min-height: 250px; margin: 0 auto 2% auto; float: none; clear: both;} #page-content #main-content #additional-images a:nth-of-type(even) {float: none;} #page-content #main-content #additional-images a:nth-of-type(odd) {clear: both;} } /* Approach --------------------------------------------------------------------------------------------------------------------------------------- */ #page-content #approach {max-width: 910px; margin: 0 auto 80vh auto; position: relative; display: block; clear: both; overflow-x: hidden;} /* Approach Jump Navigation -------------------------------------------- */ #page-content #approach-jump {margin: 0 auto 100px auto; padding: 5px 0; text-align: center; position: relative; display: block; clear: both; list-style: none; z-index: 10;} #page-content #approach-jump.sticky {background-color: #00264c;} #page-content #approach-jump li {margin: 0 2.5%; position: relative; display: inline-block;} #page-content #approach-jump li:first-child {margin-left: 0;} #page-content #approach-jump li:last-child {margin-right: 0;} #page-content #approach-jump li::before {content: none;} #page-content #approach-jump li a {font-size: 11px; line-height: 1; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: block; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 900; font-family: 'Gothic A1', sans-serif;} /* Active ---------- */ #page-content #approach-jump li.active a {color: #b2d909;} /* Approach Logo ------------------------------------------------------- */ #page-content #approach #approach-logo {width: 100px; position: absolute; top: 0; left: 0;} #page-content #approach #approach-logo svg {} #page-content #approach #approach-logo svg.path {} /* Approach Step ------------------------------------------------------- */ #page-content .approach-step {min-height: 100vh; margin: 0; padding: 0 0 150px 0; position: relative; display: block; clear: both;} #page-content .approach-step:last-of-type {padding-bottom: 0;} /* Step Number ---------- */ #page-content #approach #approach-steps .step-number {margin-bottom: 100px; font-size: 11px; line-height: 1; color: #fff; text-transform: uppercase; letter-spacing: 1px; position: static; top: -100px; right: 650px; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #page-content #approach #approach-steps .step-number::before {content: ''; background-color: #00264c; width: 8px; height: 8px; margin: 0 15px 0 0; border: 3px solid #b2d909; border-radius: 50%; position: relative; top: 3px; display: inline-block;} #page-content .approach-step.step-1 .step-number::before {background: none;} #page-content .approach-step:last-of-type .step-number {top: 38px;} /* Content ---------- */ #page-content #approach .approach-step .approach-step-content {width: calc(100% - 30px); max-width: 520px; padding: 0 0 0 30px; position: relative; display: block; float: right; clear: both;} #page-content #approach .approach-step .approach-step-content h2 {margin: 0 0 10px 0; font-size: 40px; color: #fff;} #page-content #approach .approach-step .approach-step-content h3 {margin: 0 0 2px 0; font-size: 11px; line-height: 1.3; color: #0098bb; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #page-content #approach .approach-step .approach-step-content p {color: #fff;} #page-content #approach .approach-step .approach-step-content li, #page-content #approach .approach-step .approach-step-content li a {color: #fff;} #approach-steps .step-number{ /*position: static; margin-bottom: 100px;*/ } #approach path#curved-line { display: none; } #approach .approach-step-content{ /*padding-left: 30px;*/ } #page-content #approach{ /*margin-bottom: 300px;*/ } #approach-steps{ margin-left: 185px; position: relative; } #approach-steps .approach-step:last-child { padding-bottom: 0; min-height: 0; } .approach-step{ position: relative; } .approach-step svg, #approach-steps svg { position: absolute; left: 6px; width: 2px; top: 2px; height: 100%; } .approach-step:last-child svg{ display: none; visibility: hidden; } #approach-steps .approach-step:last-child .step-number{ font-size: 0; margin-bottom: 0; } #page-content .approach-step.step-1 .step-number::before { background: #00264c; } #approach-steps .approach-step:last-child .approach-step-content{ top: -50px; } @media only screen and (max-width:767px){ #page-content #approach #approach-logo{ width: 40px !important; } #approach-steps .step-number{ margin-bottom: 50px; } #approach-steps{ margin-left: 55px; } .approach-step-content h2{ font-size: 24px !important; } .approach-step-content p, .approach-step-content li { font-size: 13px !important; } } /* Media Queries for Portfolio */ @media only screen and (max-width: 450px) { /* Approach Jump Navigation -------------------------------------------- */ #page-content #approach-jump li {margin: 0 1.7%;} #page-content #approach-jump li a {font-size: 10px;} } @media only screen and (max-width: 370px) { /* Approach Jump Navigation -------------------------------------------- */ #page-content #approach-jump li {margin: 0 .95%;} #page-content #approach-jump li a {font-size: 9px;} } /* New Approach ----------------------------------------------------------------------------------------------------------------------------------- */ #page-content #approach-process {background-color: #00416b; padding: 50px 0; position: relative; display: block; clear: both;} /* Site Identified ----------------------------------------------------- */ #page-content #approach-process #site-identified {background-color: #b2d909; width: calc(125px - 60px); margin: 0 auto 70px auto; padding: 15px 30px; text-align: center; border-radius: 5px; position: relative; display: block;} #page-content #approach-process #site-identified h2 {margin: 0; padding: 0; font-size: 16px; line-height: 1.2;} /* Arrow ---------- */ #page-content #approach-process #site-identified .arrow {width: 0px; height: 0px; position: absolute; bottom: -45px; left: calc(50% - 10px); border-style: solid; border-width: 10px 10px 0 10px; border-color: #b2d909 transparent transparent transparent; transform: rotate(0deg);} #page-content #approach-process #site-identified .arrow::before {content: ''; background-color: #b2d909; width: 2px; height: 35px; position: absolute; bottom: 10px; left: calc(50% - 1px);} /* Approach Process Steps ---------------------------------------------- */ #page-content #approach-process .approach-process-step {background-color: #0197ba; width: 200px; height: 200px; margin: 0 auto 70px auto; text-align: center; border-radius: 50%; outline: 2px solid #b2d909; outline-offset: 3px; position: relative; display: block;} #page-content #approach-process .approach-process-step h2 {padding: 0 5px; font-size: 25px; color: #fff;} #page-content #approach-process .approach-process-step h2 i {display: block; clear: both;} /* Arrow ---------- */ #page-content #approach-process .approach-process-step .arrow {width: 0px; height: 0px; position: absolute; bottom: -50px; left: calc(50% - 10px); border-style: solid; border-width: 10px 10px 0 10px; border-color: #b2d909 transparent transparent transparent; transform: rotate(0deg);} #page-content #approach-process .approach-process-step .arrow::before {content: ''; background-color: #b2d909; width: 2px; height: 35px; position: absolute; bottom: 10px; left: calc(50% - 1px);} /* Scissors ---------- */ #page-content #approach-process .approach-process-step .scissors {position: absolute; bottom: -50px; left: calc(50% - 10px);} #page-content #approach-process .approach-process-step .scissors::before {content: ''; background-color: #b2d909; width: 2px; height: 35px; position: absolute; bottom: 10px; left: calc(50% - 1px);} #page-content #approach-process .approach-process-step .scissors i {font-size: 20px; line-height: 1; color: #0197ba; position: relative; top: 9px; left: -7px; transform: rotate(-45deg);} /* Step Content -------------------------------------------------------- */ #page-content #approach-process .approach-process-step-content {background-color: #002c47; width: calc(100% - 300px); margin: 0 auto 25px auto; padding: 40px 50px 20px 50px; border: 2px solid #b2d909; position: relative; top: -45px; display: none; z-index: 1;} #page-content #approach-process .approach-process-step-content p {color: #fff;} /* Arrow ---------- */ #page-content #approach-process .approach-process-step-content .arrow {width: 0px; height: 0px; position: absolute; bottom: -45px; left: calc(50% - 10px); border-style: solid; border-width: 10px 10px 0 10px; border-color: #b2d909 transparent transparent transparent; transform: rotate(0deg);} #page-content #approach-process .approach-process-step-content .arrow::before {content: ''; background-color: #b2d909; width: 2px; height: 35px; position: absolute; bottom: 10px; left: calc(50% - 1px);} /* Scissors ---------- */ #page-content #approach-process .approach-process-step-content .scissors {position: absolute; bottom: -45px; left: calc(50% - 10px);} #page-content #approach-process .approach-process-step-content .scissors::before {content: ''; background-color: #b2d909; width: 2px; height: 35px; position: absolute; bottom: 10px; left: calc(50% - 1px);} #page-content #approach-process .approach-process-step-content .scissors i {font-size: 20px; line-height: 1; color: #0197ba; position: relative; top: 9px; left: -7px; transform: rotate(-45deg);} /* Media Queries for New Approach */ @media only screen and (max-width: 600px) { /* Step Content -------------------------------------------------------- */ #page-content #approach-process .approach-process-step-content {width: calc(100% - 140px); padding: 40px 20px 20px 20px;} #page-content #approach-process .approach-process-step-content p {font-size: 14px;} } @media only screen and (max-width: 500px) { /* Step Content -------------------------------------------------------- */ #page-content #approach-process .approach-process-step-content {width: calc(100% - 80px); padding: 20px 20px 0px 20px;} #page-content #approach-process .approach-process-step-content p {font-size: 13px;} } /* Portfolio -------------------------------------------------------------------------------------------------------------------------------------- */ /* Portfolio Filters --------------------------------------------------- */ #portfolio-filters {background-color: #0099bb; margin: -50px auto 50px auto; padding: 90px 0 40px 0; position: relative; display: block; clear: both;} #portfolio-filters .wrap {max-width: 1000px;} /* Filter Global ---------- */ .portfolio-filter {width: 32.333333333333333%; margin: 0 1% 0 0; position: relative; display: block; float: left;} .portfolio-filter select {background: url(images/dropdown-arrow.png) right center no-repeat #fff; width: 100%; margin: 0 0 5px 0; padding: 20px 8px 20px 8px !important; font-size: 12px; line-height: 1.2; color: #00416a; text-transform: uppercase; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-weight: 700; font-family: 'Gothic A1', sans-serif;} /* Search ----- */ #portfolio-filter-search {width: 33.333333333333333%; margin: 0; padding: 0; position: relative; display: block; float: left;} /* Input ----- */ #portfolio-filter-search #search-input {width: calc(100% - 16px); padding: 20px 8px 19px 8px !important; font-size: 12px; line-height: 1.2; color: #9f9f9f; text-transform: uppercase; border: none; font-weight: 700; font-family: 'Gothic A1', sans-serif;} /* Projects ------------------------------------------------------------ */ #projects {position: relative; display: block; clear: both;} /* Project ---------- */ #projects .project {width: 31.3%; height: 55vh; min-height: 400px; margin: 0 1% 2% 1%; position: relative; display: block; float: left; overflow: hidden;} #projects .project::after {content: ''; background: rgb(0,65,106); background: linear-gradient(0deg, rgba(0,65,106,1) 0%, rgba(0,65,106,0) 100%); width: 100%; height: 65%; position: absolute; bottom: 0; left: 0; display: block; visibility: visible;} /* #projects .project:nth-child(3n+3) {margin-right: 0;} #projects .project:nth-child(3n+1) {clear: both;} */ /* Project Featured Image ---------- */ #page-content #projects .project .project-featured-image {width: 100%; height: 100%; -moz-transition: all .4s linear; -webkit-transition: all .4s linear; -ms-transition: all .4s linear; -o-transition: all .4s linear; transition: all .4s linear;} /* Project Meta ---------- */ #page-content #projects .project .project-meta {width: 100%; margin: 0; padding: 0; text-align: center; position: absolute; bottom: 40px; z-index: 1;} #page-content #projects .project .project-meta h3 {margin: 0 0 10px 0; padding: 0 0 0 0; font-size: 17px; line-height: 1.3; color: #fff; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #page-content #projects .project .project-meta p {margin: 0 0 0 0; padding: 0 0 0 0; font-size: 13px; line-height: 1.3; color: #b2da0a; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #page-content #projects .project .project-meta p i {padding: 0 3px 0 0;} /* Hover ---------- */ #page-content #projects .project:hover .project-featured-image {transform: scale(1.1);} /* Media Queries for Portfolio */ @media only screen and (max-width: 900px) { /* Projects ------------------------------------------------------------ */ /* Project ---------- */ #projects .project {width: calc(96% / 2); height: 55vh; min-height: 400px; margin: 0 1% 2% 1%; float: left;} } @media only screen and (max-width: 700px) { /* Projects ------------------------------------------------------------ */ /* Portfolio Filters --------------------------------------------------- */ #portfolio-filters {margin: -44px auto 50px auto; padding: 90px 0 40px 0;} } @media only screen and (max-width: 600px) { /* Portfolio Filters --------------------------------------------------- */ /* Filter Global ---------- */ .portfolio-filter {width: 49.5%; margin: 0 0 0 0;} .portfolio-filter:nth-of-type(even) {float: right;} /* Search ----- */ #portfolio-filter-search {width: 100%; margin: 0 auto; padding: 0; float: none; clear: both;} /* Projects ------------------------------------------------------------ */ /* Project ---------- */ #projects .project {width: 100%; height: 55vh; min-height: 400px; margin: 0 auto 25px auto; float: none; clear: both;} } @media only screen and (max-width: 430px) { /* Portfolio Filters --------------------------------------------------- */ #portfolio-filters {padding: 76px 0 40px 0;} /* Filter Global ---------- */ .portfolio-filter {width: 100%; margin: 0 auto 0 auto;} .portfolio-filter:nth-of-type(even) {float: none; clear: both;} /* Search ----- */ #portfolio-filter-search {width: 100%; margin: 0 auto; padding: 0; float: none; clear: both;} } /* Portfolio Inside ------------------------------------------------------------------------------------------------------------------------------- */ /* Project Details ----------------------------------------------------- */ #page-content #project-details {max-width: 1100px; margin: 0 auto 40px auto; padding: 0; text-align: center; position: relative; vertical-align: top; display: block; clear: both;} #page-content #project-details li {width: calc(100% / 5 - 5px); margin: 0; padding: 0; text-align: left; position: relative; vertical-align: top; display: inline-block;} #page-content #project-details li::before {content: none;} #page-content #project-details li a {} #page-content #project-details li h3 {margin: 0 0 5px 0; font-size: 11px; line-height: 1.2; color: #00416a; text-transform: uppercase; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #page-content #project-details li p {margin: 0 0 0 0; font-size: 14px; line-height: 1.8; color: #5c5c5c;} /* Project Gallery ----------------------------------------------------- */ #page-content #project-gallery {height: 55vh; min-height: 400px; margin: 0 auto 50px auto; padding: 0 0 0 0; position: relative; display: block; clear: both;} #page-content #project-gallery li {height: 100%; margin: 0 .125%; padding: 0; position: relative; display: block;} #page-content #project-gallery li::before {content: none;} #page-content #project-gallery li a {width: 100%; height: 100%; margin: 0; padding: 0; display: block;} /* Slick Slider ---------- */ #page-content #project-gallery .slick-list, #page-content #project-gallery .slick-track {height: 100%;} /* Media Queries for Portfolio Inside */ @media only screen and (max-width: 800px) { /* Project Details ----------------------------------------------------- */ #page-content #project-details {max-width: 1100px; margin: 0 auto 40px auto; text-align: center;} #page-content #project-details li {width: 49%; margin: 0 0 25px 0; padding: 0; text-align: center; display: block; float: left; clear: none;} #page-content #project-details li:nth-child(even) {float: right;} #page-content #project-details li:nth-child(odd) {clear: both;} #page-content #project-details li h3 {margin: 0 0 0px 0; display: block;} /* #page-content #project-details li h3 {margin: 0 0 5px 0; font-size: 11px; display: inline-block; clear: none;} #page-content #project-details li h3::after {content: ':'; position: relative; display: inline-block;} #page-content #project-details li p {margin: 0 0 0 0; padding: 0 0 0 5px; display: inline-block; clear: none;} */ } @media only screen and (max-width: 600px) { /* Project Gallery ----------------------------------------------------- */ #page-content #project-gallery {height: 45vh; min-height: 300px; margin: 0 auto 50px auto;} } @media only screen and (max-width: 500px) { /* Project Details ----------------------------------------------------- */ #page-content #project-details {max-width: 1100px; margin: 0 auto 40px auto; text-align: center;} #page-content #project-details li {width: 100%; margin: 0 auto 25px auto; float: none; clear: both;} #page-content #project-details li:nth-child(even) {float: none;} #page-content #project-details li:nth-child(odd) {clear: both;} } /* News + Insights -------------------------------------------------------------------------------------------------------------------------------- */ /* Category and Sign Up ------------------------------------------------ */ #category-sign-up {background-color: #0098bb; width: calc(100% - 175px); margin: 0 auto; padding: 0 0 0 75px; position: relative; display: block; clear: both;} /* Category Search ---------- */ #category-search {width: calc(66% - 89px); position: relative; display: block; float: left;} /* Category Filter ---------- */ #category-filter {width: 48%; padding: 40px 0 40px 0; position: relative; display: block; float: left;} #category-filter select {background: url(images/dropdown-arrow.png) right center no-repeat #fff; width: 100%; margin: 0 0 5px 0; padding: 20px 8px 20px 8px !important; font-size: 12px; line-height: 1.2; color: #00416a; text-transform: uppercase; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-weight: 700; font-family: 'Gothic A1', sans-serif;} /* News + Insights Search ---------- */ #news-insights-search {width: 48%; margin: 0; padding: 40px 0 40px 0; position: relative; display: block; float: right;} /* Input ----- */ #news-insights-search #search-input {width: calc(100% - 16px); padding: 20px 8px 20px 8px !important; font-size: 12px; line-height: 1.2; color: #9f9f9f; text-transform: uppercase; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-weight: 700; font-family: 'Gothic A1', sans-serif;} /* Updates Sign Up ---------- */ #updates-sign-up {background-color: #f0f4f6; width: 33%; height: 100%; margin: 0; padding: 0; font-size: 16px; line-height: 1; color: #0098bb; text-transform: none; position: absolute; top: 0; right: 0; font-weight: 400;} #updates-sign-up span {display: block;} #updates-sign-up i {right: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #updates-sign-up::after {content: none;} /* Hover ----- */ #updates-sign-up:hover {background-color: #b2da0a; color: #fff;} #updates-sign-up:hover i {right: -3px;} /* News Posts ---------------------------------------------------------- */ #page-content #news-posts {margin: 0 auto 50px auto; position: relative; display: block; clear: both;} /* Post Block ---------------------------------------------------------- */ #page-content #news-posts > .post-block {background-color: #fff; width: calc(32% - 2px); margin: 0 2% 2% 0; border: 1px solid rgba(76, 76, 76, 0.1); position: relative; display: block; float: left;} #page-content #news-posts > .post-block:nth-child(3n+1) {clear: both;} #page-content #news-posts > .post-block:nth-child(3n+3) {margin-right: 0;} #page-content #news-posts > .post-block::before {content: ''; background-color: #00416a; width: 4px; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;} /* Layout Template ---------- */ #page-content #news-posts > .post-block:nth-of-type(10n+1) {clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+2) {} #page-content #news-posts > .post-block:nth-of-type(10n+3) {margin-right: 0;} #page-content #news-posts > .post-block:nth-of-type(10n+4) {width: calc(66% - 2px); clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+5) {margin-right: 0;} #page-content #news-posts > .post-block:nth-of-type(10n+6) {margin-left: 0; margin-right: 2%; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+7) {margin-left: 0; clear: none;} #page-content #news-posts > .post-block:nth-of-type(10n+8) {margin-left: 0; margin-right: 0; clear: none;} #page-content #news-posts > .post-block:nth-of-type(10n+9) {margin-left: 0; margin-right: 2%; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+10) {width: calc(66% - 2px); margin-left: 0; margin-right: 0; clear: none;} /* Post Image ---------- */ #page-content #news-posts .post-block .post-image {width: 100%; height: 28vh; min-height: 250px; position: relative; display: block; clear: both; overflow: hidden;} #page-content #news-posts .post-block .post-image span {width: 100%; height: 100%; position: absolute; top: 0; left: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Post Block Meta ---------- */ #page-content #news-posts .post-block .post-block-meta {position: relative; display: block;} #page-content #news-posts .post-block .post-block-category-title {width: calc(100% - 124px); padding: 30px 30px 0 34px; position: relative; display: block; float: left;} #page-content #news-posts .post-block .post-block-category-title::after {content: ''; background-color: #ebf0f3; width: 1px; height: calc(100% - 65px); position: absolute; top: 37px; right: 0; display: block;} #page-content #news-posts .post-block .post-block-meta h3 {max-width: 500px; font-size: 19px; line-height: 1.5; color: #00416a; position: relative; display: block; font-weight: 300; font-family: 'Heebo', sans-serif;} /* Post Block Arrow ---------- */ #page-content #news-posts .post-block .post-block-arrow {width: 60px; height: 100%; font-size: 15px; line-height: 1; color: #0098bb; text-align: center; position: absolute; top: 0; right: 0; display: block; float: right;} #page-content #news-posts .post-block .post-block-arrow i {right: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover ---------- */ #page-content #news-posts .post-block:hover .post-image span {transform: scale(1.1);} #page-content #news-posts .post-block:hover .post-block-arrow i {right: -3px;} /* Media Queries for News + Insights */ @media only screen and (max-width: 1100px) { /* Category and Sign Up ------------------------------------------------ */ #category-sign-up {width: calc(100% - 100px); padding: 0 0 0 50px;} /* Category Search ---------- */ #category-search {width: calc(66% - 56px);} /* Post Block ---------------------------------------------------------- */ #page-content #news-posts > .post-block {width: calc(49% - 2px); margin: 0 0 2% 0;} #page-content #news-posts > .post-block:nth-child(3n+1) {clear: none;} #page-content #news-posts > .post-block:nth-child(3n+3) {margin-right: 0;} #page-content #news-posts > .post-block:nth-child(even) {float: right;} #page-content #news-posts > .post-block:nth-child(odd) {clear: both;} /* Layout Template ---------- */ #page-content #news-posts > .post-block:nth-of-type(10n+1) {clear: none;} #page-content #news-posts > .post-block:nth-of-type(10n+3) {margin-right: 0;} #page-content #news-posts > .post-block:nth-of-type(10n+4) {width: calc(49% - 2px); clear: none;} #page-content #news-posts > .post-block:nth-of-type(10n+5) {margin-right: 0;} #page-content #news-posts > .post-block:nth-of-type(10n+6) {margin-left: 0; margin-right: 0; clear: none;} #page-content #news-posts > .post-block:nth-of-type(10n+7) {margin-left: 0; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+8) {margin-left: 0; margin-right: 0; clear: none;} #page-content #news-posts > .post-block:nth-of-type(10n+9) {margin-left: 0; margin-right: 0; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+10) {width: calc(49% - 2px); margin-left: 0; margin-right: 0; clear: none;} } @media only screen and (max-width: 700px) { /* Category and Sign Up ------------------------------------------------ */ #category-sign-up {width: calc(100% - 75px); padding: 25px 0 25px 25px;} /* Category Search ---------- */ #category-search {width: calc(60% - 35px);} /* Category Filter ---------- */ #category-filter {width: 100%; padding: 0 0 5px 0; float: none; clear: both;} /* News + Insights Search ---------- */ #news-insights-search {width: 100%; margin: 0 auto; padding: 0; float: none; clear: both;} /* Updates Sign Up ---------- */ #updates-sign-up {width: calc(40% - 20px); height: 100%; padding: 0 10px;} /* Post Block ---------------------------------------------------------- */ #page-content #news-posts > .post-block {width: 100%; margin: 0 auto 15px auto; float: none; clear: both;} #page-content #news-posts > .post-block:nth-child(3n+1) {clear: both;} #page-content #news-posts > .post-block:nth-child(3n+3) {margin-right: auto;} #page-content #news-posts > .post-block:nth-child(even) {float: none;} #page-content #news-posts > .post-block:nth-child(odd) {clear: both;} /* Layout Template ---------- */ #page-content #news-posts > .post-block:nth-of-type(10n+1) {clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+3) {margin-right: auto;} #page-content #news-posts > .post-block:nth-of-type(10n+4) {width: 100%; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+5) {margin-right: auto;} #page-content #news-posts > .post-block:nth-of-type(10n+6) {margin-left: auto; margin-right: auto; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+7) {margin-left: auto; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+8) {margin-left: auto; margin-right: auto; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+9) {margin-left: auto; margin-right: auto; clear: both;} #page-content #news-posts > .post-block:nth-of-type(10n+10) {width: 100%; margin-left: auto; margin-right: auto; clear: both;} } @media only screen and (max-width: 550px) { /* Category and Sign Up ------------------------------------------------ */ #category-sign-up {width: calc(100% - 50px); margin-top: -50px; padding: 75px 25px 25px 25px; left: 0;} /* Category Search ---------- */ #category-search {width: 100%; margin: 0 auto 10px auto;} /* Category Filter ---------- */ #category-filter {width: 100%; padding: 0 0 5px 0; float: none; clear: both;} /* News + Insights Search ---------- */ #news-insights-search {width: 100%; margin: 0 auto; padding: 0; float: none; clear: both;} /* Updates Sign Up ---------- */ #updates-sign-up {width: calc(100% - 20px); height: auto; padding: 20px 10px 20px 10px; position: relative; top: auto; right: auto;} #updates-sign-up span {top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} } /* News + Insights Inside ------------------------------------------------------------------------------------------------------------------------- */ #page-content #main-content #main-content-article #post-date {margin: 0 0 45px 0; font-size: 12px; line-height: 1.2; color: #a4a4a4; text-transform: uppercase; display: block; clear: both; font-weight: 700; font-family: 'Gothic A1', sans-serif;} #page-content #main-content #main-content-article #post-date a {font-size: 12px; line-height: 1.2; color: #a4a4a4; text-transform: uppercase;} #page-content #main-content #main-content-article #post-date a::before {background-color: #a4a4a4;} #page-content #main-content #main-content-article #post-date .post-date-divide {padding: 0 5px; color: #e5e5e5; display: inline-block;} #page-content #main-content #main-content-article #post-tags {padding: 10px 0 0 0; font-size: 14px;} /* Related Posts ---------------------------------------------------------- */ #page-content #related-posts {max-width: 800px; margin: 0 auto 50px auto; padding: 75px 0 0 0; position: relative; display: block; clear: both;} #page-content #related-posts > h2 {margin: 0 0 25px 0; font-size: 25px; line-height: 1.2; color: #868686; text-align: center; font-weight: 400; font-family: 'Gothic A1', sans-serif;} /* Post Block ---------------------------------------------------------- */ #page-content #related-posts > .post-block {background-color: #fff; width: 48%; margin: 0 0 2% 0; border: 1px solid rgba(76, 76, 76, 0.1); position: relative; display: block; float: left;} #page-content #related-posts > .post-block:nth-of-type(even) {float: right;} #page-content #related-posts > .post-block::before {content: ''; background-color: #00416a; width: 4px; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;} /* Post Image ---------- */ #page-content #related-posts .post-block .post-image {width: 100%; height: 28vh; min-height: 250px; display: block; position: relative; clear: both; overflow: hidden;} #page-content #related-posts .post-block .post-image span {width: 100%; height: 100%; position: absolute; top: 0; left: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Post Block Meta ---------- */ #page-content #related-posts .post-block .post-block-meta {position: relative; display: block;} #page-content #related-posts .post-block .post-block-category-title {width: calc(100% - 124px); padding: 30px 30px 0 34px; position: relative; display: block; float: left;} #page-content #related-posts .post-block .post-block-category-title::after {content: ''; background-color: #ebf0f3; width: 1px; height: calc(100% - 65px); position: absolute; top: 37px; right: 0; display: block;} #page-content #related-posts .post-block .post-block-meta h3 {max-width: 500px; font-size: 19px; line-height: 1.5; color: #00416a; position: relative; display: block; font-weight: 300; font-family: 'Heebo', sans-serif;} /* Post Block Arrow ---------- */ #page-content #related-posts .post-block .post-block-arrow {width: 60px; height: 100%; font-size: 15px; line-height: 1; color: #0098bb; text-align: center; position: absolute; top: 0; right: 0; display: block; float: right;} #page-content #related-posts .post-block .post-block-arrow i {right: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover ---------- */ #page-content #related-posts .post-block:hover .post-image span {transform: scale(1.1);} #page-content #related-posts .post-block:hover .post-block-arrow i {right: -3px;} /* Media Queries for News + Insights Inside */ @media only screen and (max-width: 600px) { #page-content #related-posts > .post-block {width: 100%; margin: 0 auto 15px auto; float: none; clear: both;} #page-content #related-posts > .post-block:nth-of-type(even) {float: none;} } /* Page Navi -------------------------------------------------------------------------------------------------------------------------------------- */ .wp-pagenavi {background-color: #fff; min-height: 30px; margin: 0 auto 20px auto; padding: 25px 0 0 0; font-size: 15px; line-height: 20px; color: #5c5c5c; text-align: center; display: block; clear: both; position: relative;} .wp-pagenavi a, .wp-pagenavi span {margin: 0 1%; padding: 0; border: 1px solid transparent; color: #151515; text-decoration: none !important; opacity: .5; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; display: inline-block;} .wp-pagenavi a:hover, .wp-pagenavi span.current {color: #0099bb; opacity: 1; font-weight: 700;} .wp-pagenavi .pages, .wp-pagenavi .extend, .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink, .wp-pagenavi .first {} .wp-pagenavi .nextpostslink:hover, .wp-pagenavi .first:hover, .wp-pagenavi .previouspostslink:hover {} /* Careers Landing -------------------------------------------------------------------------------------------------------------------------------- */ /* Jump Navigtion ------------------------------------------------------ */ #jump-nav {background-color: #fff; padding: 0 0 50px 0; position: relative; display: block; clear: both; list-style: none;} #jump-nav ul {margin: 0; padding: 0; text-align: center; position: relative; display: block; clear: both;} #jump-nav ul li {background-color: #fff; margin: 0; padding: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: block; float: left;} #jump-nav ul li::before {content: none;} #jump-nav ul li:first-of-type {border-left: none;} #jump-nav ul li a {margin: 0; padding: 35px 0 30px 0; font-size: 15px; line-height: 1; color: #5e5f60; text-transform: uppercase; border: 1px solid rgba(76, 76, 76, 0.1); border-right: none; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: relative; display: block; font-weight: 900; font-family: 'Gothic A1', sans-serif;} #jump-nav ul li a::before {content: ''; background-color: #dfdfdf; width: 100%; height: 5px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; position: absolute; top: 0; left: 0;} /* Hover ----- */ #jump-nav ul li:hover a {color: #00416a;} #jump-nav ul li a:hover::before {background-color: #0098bb;} /* Active ----- */ #jump-nav ul li a.active {border-bottom-color: #fff;} #jump-nav ul li a.active {color: #00416a;} #jump-nav ul li a.active::before {background-color: #0098bb;} /* Jump Page Content --------------------------------------------------- */ /* Career Opportunities ---------- */ #career-opportunities {width: 100%; margin: 0 0 0 0; padding: 25px 0 50px 0; position: relative; display: block; clear: both;} #career-opportunities a {background-color: #fff; width: calc(48% - 130px - 1px); margin: 0 0 25px 0; padding: 25px 100px 25px 30px; font-size: 17px; line-height: 1.4; color: #00416a; border: 1px solid rgba(76, 76, 76, 0.1); border-left: none; position: relative; display: block; float: left;} #career-opportunities a:nth-of-type(even) {float: right;} #career-opportunities a:nth-of-type(odd) {clear: both;} #career-opportunities a::before {content: ''; background-color: #0098bb; width: 5px; height: calc(100% + 2px); position: absolute; top: -1px; left: 0;} #career-opportunities a .career-opportunity-title {position: relative; display: block;} #career-opportunities a .career-opportunity-title::after {content: ''; background-color: #ebf0f3; width: 1px; height: 100%; position: absolute; top: 0px; right: -40px; display: block;} /* Carrer Opportunity Arrow ----- */ #career-opportunities a .career-opportunity-arrow {width: 60px; height: 100%; font-size: 15px; line-height: 1; color: #0098bb; text-align: center; position: absolute; top: 0; right: 0; display: block; float: right;} #career-opportunities a .career-opportunity-arrow i {right: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover ---------- */ #career-opportunities a:hover .career-opportunity-arrow i {right: -3px;} /* Team Gallery -------------------------------------------------------- */ #page-content #team-gallery {margin: 0 auto !important; padding: 100px 0 0 0 !important; position: relative; display: block; clear: both; list-style: none;} #page-content #team-gallery ul {margin: 0; padding: 0;} #page-content #team-gallery li {} #page-content #team-gallery li::before {content: none;} #page-content #team-gallery li a {position: relative; display: block; -moz-transition: opacity .3s linear; -webkit-transition: opacity .3s linear; -ms-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; overflow: hidden;} #page-content #team-gallery li a img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;} #page-content #team-gallery li a:hover {opacity: .8;} /* 3 Images Large Left ----- */ /* Large Left */ #page-content #team-gallery li:nth-of-type(9n+1) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 2.4% !important; padding-bottom: 56.25% !important; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+1) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content #team-gallery li:nth-of-type(9n+2) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+2) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content #team-gallery li:nth-of-type(9n+3) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+3) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* 3 Images Large Right ------------------------------------------------- */ /* Large Right ---------- */ #page-content #team-gallery li:nth-of-type(9n+4) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 2.4% !important; padding-bottom: 56.25% !important; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+4) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content #team-gallery li:nth-of-type(9n+5) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+5) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content #team-gallery li:nth-of-type(9n+6) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+6) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* 2 Images ------------------------------------------------------------ */ #page-content #team-gallery li:nth-of-type(9n+7) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125%; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+7) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content #team-gallery li:nth-of-type(9n+8) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125%; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content #team-gallery li:nth-of-type(9n+8) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Full Width ----- */ #page-content #team-gallery li:nth-of-type(9n+9) {width: 100%; height: 0; margin: 0 0 2.4% 0; padding-top: 2.4%; padding-bottom: 56.25%; position: relative; display: block; clear: both;} #page-content #team-gallery li:nth-of-type(9n+9) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Media Queries for Careers Landing */ @media only screen and (max-width: 1100px) { /* Career Opportunities ---------- */ #career-opportunities a {width: calc(100% - 130px - 1px); margin: 0 auto 25px auto; float: none; clear: both;} #career-opportunities a:nth-of-type(even) {float: none;} #career-opportunities a:nth-of-type(odd) {clear: both;} } @media only screen and (max-width: 700px) { /* Jump Navigtion ------------------------------------------------------ */ #jump-nav ul li a {font-size: 13px;} } @media only screen and (max-width: 500px) { /* Jump Navigtion ------------------------------------------------------ */ #jump-nav ul li a {font-size: 11px;} } /* Careers Inside --------------------------------------------------------------------------------------------------------------------------------- */ /* Apply Form ---------------------------------------------------------- */ #apply-form {background-color: #fff; width: 100%; max-width: calc(1000px - 120px); margin: 0 auto 200px auto; padding: 50px 60px 0 60px; border-top: 5px solid #00416a; position: relative; display: block; clear: both;} #apply-form h1, #apply-form h2, #apply-form h3, #apply-form h4, #apply-form h5, #apply-form h6 {margin: 0 0 20px 0; line-height: 1.3; color: #00416a; position: relative; display: block; clear: both; font-weight: 300; font-family: 'Heebo', sans-serif;} #apply-form h1 a, #apply-form h2 a, #apply-form h3 a, #apply-form h4 a, #apply-form h5 a, #apply-form h6 a {color: #00416a;} #apply-form h1 {font-size: 32px;} #apply-form h2 {font-size: 28px;} #apply-form h3 {font-size: 24px;} #apply-form h4 {font-size: 20px;} #apply-form h5 {font-size: 18px;} #apply-form h6 {font-size: 17px;} #apply-form p {margin: 0 0 20px 0; font-size: 16px; line-height: 1.9; color: #5c5c5c;} #apply-form p a {color: #00416a; position: relative; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #apply-form p a::before {content: ''; background-color: #00416a; width: 0; height: 1px; position: absolute; bottom: 0; left: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #apply-form p a:hover:before {width: 100%;} #apply-form img {max-width: 100%; width: auto; height: auto;} #apply-form a[href$=jpg], #apply-form a[href$=jpeg], #apply-form a[href$=png], #apply-form a[href$=gif] {border: none;} #apply-form a[href$=jpg]::before, #apply-form a[href$=jpeg]::before, #apply-form a[href$=png]::before, #apply-form a[href$=gif]::before {content: none;} #apply-form strong {font-weight: 700;} /* Submit Button ---------- */ #apply-form .gform_wrapper {padding-top: 25px;} #apply-form .gform_footer {padding-top: 30px;} #apply-form .gform_footer #gform_submit_button_3 {background-color: #00416a; width: 100%; margin: 0 0 -65px 0; padding: 40px 0; font-size: 22px; line-height: 1; text-transform: none; font-weight: 400; font-family: 'Gothic A1', sans-serif;} /* Hover ----- */ #apply-form .gform_footer #gform_submit_button_3:hover {background-color: #0099bb;} /* Media Queries for Careers Inside */ @media only screen and (max-width: 1100px) { /* Apply Form ---------------------------------------------------------- */ #apply-form {width: calc(100% - 150px); max-width: none; margin: 0 auto 200px auto; padding: 50px 50px 0 50px;} } @media only screen and (max-width: 700px) { /* Apply Form ---------------------------------------------------------- */ #apply-form {width: calc(100% - 100px); padding: 50px 25px 0 25px;} } @media only screen and (max-width: 500px) { /* Apply Form ---------------------------------------------------------- */ #apply-form {width: calc(100% - 75px); margin: 0 0 200px 0; right: -25px;} /* Submit Button ---------- */ #apply-form .gform_footer #gform_submit_button_3 {font-size: 20px;} } /* WordPress Gallery ------------------------------------------------------------------------------------------------------------------------------ */ #page-content .wp-block-gallery {margin: 0 auto !important; padding: 0 !important; position: relative; display: block; clear: both; list-style: none;} #page-content .wp-block-gallery ul {margin: 0; padding: 0;} #page-content .wp-block-gallery li {} #page-content .wp-block-gallery li a {position: relative; display: block; -moz-transition: opacity .3s linear; -webkit-transition: opacity .3s linear; -ms-transition: opacity .3s linear; -o-transition: opacity .3s linear; transition: opacity .3s linear; overflow: hidden;} #page-content .wp-block-gallery li a img {max-width: 100%; width: 100%; height: 100%;} #page-content .wp-block-gallery li a:hover {opacity: .8;} /* Full Width ---------------------------------------------------------- */ #page-content .wp-block-gallery li:nth-of-type(9n+1) {width: 100%; height: 0; margin: 0 0 2.4% 0; padding-top: 2.4%; padding-bottom: 56.25%; position: relative; display: block; clear: both;} #page-content .wp-block-gallery li:nth-of-type(9n+1) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* 3 Images Large Left ------------------------------------------------- */ /* Large Left ---------- */ #page-content .wp-block-gallery li:nth-of-type(9n+2) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 2.4% !important; padding-bottom: 56.25% !important; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+2) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content .wp-block-gallery li:nth-of-type(9n+3) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+3) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content .wp-block-gallery li:nth-of-type(9n+4) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+4) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* 3 Images Large Right ------------------------------------------------- */ /* Large Right ---------- */ #page-content .wp-block-gallery li:nth-of-type(9n+5) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 2.4% !important; padding-bottom: 56.25% !important; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+5) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content .wp-block-gallery li:nth-of-type(9n+6) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+6) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content .wp-block-gallery li:nth-of-type(9n+7) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125% !important; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+7) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* 2 Images ------------------------------------------------------------ */ #page-content .wp-block-gallery li:nth-of-type(9n+8) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125%; position: relative; display: block; overflow: hidden; float: left; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+8) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #page-content .wp-block-gallery li:nth-of-type(9n+9) {width: 48.9%; height: 0; margin: 0 0 2.4% 0 !important; padding-top: 0 !important; padding-bottom: 28.125%; position: relative; display: block; overflow: hidden; float: right; clear: none !important;} #page-content .wp-block-gallery li:nth-of-type(9n+9) a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* WordPress Gallery Carousel --------------------------------------------------------------------------------------------------------------------- */ #page-content .wp-block-gallery.carousel {margin: 0 auto 100px auto !important; position: relative; display: block; clear: both;} #page-content .wp-block-gallery.carousel li.slick-slide {width: 100%; height: calc(55vw * (9/16)); margin: 0 !important; padding: 0 !important; position: relative; display: block; float: left; clear: none;} #page-content .wp-block-gallery.carousel li.slick-slide a {margin: 0 15px; width: calc(100% - 30px); height: 100%; position: relative; display: block;} #page-content .wp-block-gallery.carousel li.slick-slide a:before{content: ''; background-color: #000; width: 100%; height: 100%; opacity: .55; position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; visibility: visible; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; z-index: 100;} #page-content .wp-block-gallery.carousel li.slick-slide.slick-current a:before {opacity: 0;} /* Dots ---------- */ #page-content .wp-block-gallery.carousel .slick-dots {width: 100%; margin: 0 auto; padding: 5px 0 0 0; list-style: none; display: block; text-align: center !important;} #page-content .wp-block-gallery.carousel .slick-dots li {width: 25px !important; height: 25px !important; margin: 0 !important; padding: 0 !important; position: relative; display: inline-block !important; cursor: pointer; vertical-align: top; float: none !important; clear: none !important;} #page-content .wp-block-gallery.carousel .slick-dots li:before {content: none !important;} #page-content .wp-block-gallery.carousel .slick-dots li button {border: 0; background: transparent; display: block; height: 35px; width: 35px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none;} #page-content .wp-block-gallery.carousel .slick-dots li button:focus {outline: none;} #page-content .wp-block-gallery.carousel .slick-dots li button:before {content: "\2022"; width: 35px !important; height: 35px !important; font-size: 35px; line-height: 35px; color: #016791; text-align: center; opacity: .25; position: absolute; top: 0; left: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: "slick";} #page-content .wp-block-gallery.carousel .slick-dots li:hover button:before {opacity: .5;} #page-content .wp-block-gallery.carousel .slick-dots li.slick-active button:before {opacity: 1; color: #016791;} /* Media Queries for Gallery Carousel */ @media only screen and (max-width: 1200px) { #page-content .wp-block-gallery.carousel li.slick-slide {height: calc(70vw * (9/16));} } @media only screen and (max-width: 900px) { #page-content .wp-block-gallery.carousel li.slick-slide a {margin: 0 10px; width: calc(100% - 20px);} } @media only screen and (max-width: 600px) { #page-content .wp-block-gallery.carousel li.slick-slide {height: calc(90vw * (9/16));} #page-content .wp-block-gallery.carousel li.slick-slide a {margin: 0; width: 100%;} } /* Footer Call to Action -------------------------------------------------------------------------------------------------------------------------- */ #footer-cta {background-color: #00416b; width: calc(100% - 45px); margin: 0 0 175px 0; padding: 45px 0 45px 45px; position: relative; right: 0; display: block; clear: both;} #footer-cta h3 {width: 65%; font-size: 35px; line-height: 1.5; color: #fff; float: left; font-weight: 700;} #footer-cta h3 span {font-size: 18px; line-height: 1.1; color: #fff; display: block; clear: both; font-weight: 600;} #footer-cta a {background-color: #0099bb; width: 25%; height: 100%; font-size: 22px; line-height: 1; color: #fff; text-align: center; position: absolute; top: 0; right: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #footer-cta a::after {content: ''; background-color: #0099bb; width: 100%; height: 100%; position: absolute; top: 0; right: -100%; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} #footer-cta a span {display: block;} #footer-cta a span::after {content: '\f178'; position: relative; display: inline-block; left: 5px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 300; font-family: 'Font Awesome 5 Pro';} /* Hover ----- */ #footer-cta a:hover, #footer-cta a:hover::after {background-color: #b2da0a;} #footer-cta a:hover span::after {left: 8px;} /* Media Queries for Footer Call to Action */ @media only screen and (max-width: 1000px) { #footer-cta a {width: 35%;} } @media only screen and (max-width: 700px) { #footer-cta {width: calc(100% - 50px); margin: 0 auto 175px auto; padding: 25px 25px 0 25px; text-align: center; right: auto; overflow: hidden;} #footer-cta h3 {width: 100%; float: none; clear: both;} #footer-cta a {width: calc(100% - 50px); margin: 10px 0 0 0; padding: 25px 25px; position: relative; top: auto; right: 0; display: block; clear: both; z-index: 1;} #footer-cta a::after{content: ''; width: calc(100% + 50px); top: 0; left: -25px; right: auto; z-index: -1;} #footer-cta a span {top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0);} } @media only screen and (max-width: 500px) { #footer-cta h3 {font-size: 28px; line-height: 1.5; float: none; clear: both;} #footer-cta a {font-size: 20px;} } /* Footer ----------------------------------------------------------------------------------------------------------------------------------------- */ footer {background-color: #f0f4f6; width: 100%; margin: 0 auto; padding: 0; position: relative; display: block; clear: both;} footer::before {content: ''; background: url(images/footer-sketch.svg) center top no-repeat; background-size: cover; width: 100%; max-width: 725px; height: calc(100% + 130px); position: absolute; top: -130px; left: 0; opacity: .75;} /* Footer Logo --------------------------------------------------------- */ #footer-logo {margin: 0 0 35px 0; position: relative; display: block; clear: both;} #footer-logo img, #footer-logo svg {width: 100%; max-width: 42px; height: auto; display: block;} /* Footer Information -------------------------------------------------- */ #footer-info {background-color: #00416b; width: calc(33% - 15px); height: calc(100% - 80px); margin: -50px 0 0 0; padding: 55px 15px 75px 0; position: absolute; top: 0; left: 0; display: block;} #footer-info::before {content: ''; background-color: #00416b; width: 100%; height: 100%; position: absolute; top: 0; left: -100%;} #footer-info h3 {margin: 0 0 2px 0; font-size: 16px; line-height: 1.2; color: #fff; font-weight: 700;} #footer-info p {margin: 0 0 5px 0; font-size: 15px; line-height: 1.4; color: #fff; display: block; clear: both;} #footer-info p a {color: #fff;} #footer-info #footer-phone {padding: 10px 0 0 0;} /* Footer Social ---------- */ #footer-social {padding: 35px 0 0 0; position: relative; display: block; clear: both;} #footer-social li {margin: 0 8px 0 0; display: inline-block;} #footer-social li a {background-color: #0099bb; padding: 1px 7px; font-size: 18px; line-height: 1; color: #00416b; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover ----- */ #footer-social li a:hover {background-color: #b2da0a;} /* Footer Meta --------------------------------------------------------- */ #footer-meta {width: 60%; padding: 80px 0 0 0; position: relative; display: block; float: right;} /* Footer Navigation ---------- */ #footer-navigation {width: 55%; position: relative; display: block; float: left;} #footer-navigation h3 {margin: 0 0 15px 0; font-size: 15px; line-height: 1.2; color: #00416b; font-weight: 700; font-family: 'Gothic A1', sans-serif;} #footer-navigation ul {} #footer-navigation ul li {width: 48%; margin: 0 0 6px 0; position: relative; display: block; float: left;} #footer-navigation ul li a {font-size: 15px; line-height: 1.1; color: #00416b;} #footer-navigation ul li a::after {content: '\f178'; position: relative; display: inline-block; left: 5px; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 300; font-family: 'Font Awesome 5 Pro';} /* Hover ----- */ #footer-navigation ul li a:hover::after {left: 8px;} /* Footer Newsletter ---------- */ #footer-newsletter {width: 45%; position: relative; display: block; float: right;} #footer-newsletter h3 {margin: 0 0 5px 0; font-size: 15px; line-height: 1.2; color: #00416b; font-weight: 700; font-family: 'Gothic A1', sans-serif;} #footer-newsletter p {margin: 0 0 10px 0; font-size: 14px; line-height: 1.2; color: #8f9092;} /* Form ----- */ #footer-newsletter .gform_wrapper {position: relative; display: block; clear: both;} /* Body */ #footer-newsletter .gform_body {width: 62%; position: relative; float: left;} #footer-newsletter .gform_body input {padding: 12px 13px !important; border: none;} #footer-newsletter .gform_required_legend {display: none;} /* Footer */ #footer-newsletter .gform_footer {width: 38%; margin: 0; padding: 0; position: relative; float: right;} #footer-newsletter .gform_footer .button {background-color: #0099bb; width: calc(100% - 10px); padding: 16px 5px 16px 5px; font-size: 12px; line-height: 1; color: #fff; text-transform: uppercase; display: inline-block;} #footer-newsletter .gform_footer .button::after {font-size: 12px; line-height: 1;} /* Hover */ #footer-newsletter .gform_footer .button:hover {background-color: #b2da0a;} /* Footer Clincher ---------- */ #footer-clincher {padding: 35px 0 25px 0; position: relative; display: block; clear: both;} /* Copyright ----- */ #copyright {font-size: 13px; line-height: 1.3; color: #8f9092;} #copyright a {color: #8f9092;} /* Media Queries for Footer ---------- */ @media only screen and (max-width: 1100px) { /* Footer Meta --------------------------------------------------------- */ #footer-meta {width: 60%; padding: 25px 0 0 0; float: right;} /* Footer Navigation ---------- */ #footer-navigation {width: 100%; margin: 0 0 25px 0; float: none; clear: both;} /* Footer Newsletter ---------- */ #footer-newsletter {width: 100%; float: none; clear: both;} #footer-newsletter .gform_body input {padding: 11px 13px 11px 13px !important;} /* Footer Clincher ---------- */ #footer-clincher {padding: 15px 0 25px 0;} } @media only screen and (max-width: 600px) { /* Footer Logo --------------------------------------------------------- */ #footer-logo {margin: 0 auto 25px auto; text-align: center;} #footer-logo img {max-width: 42px; margin: 0 auto;} /* Footer Information -------------------------------------------------- */ #footer-info {width: calc(100% - 15px); height: calc(100% - 80px); margin: -50px 0 0 0; padding: 25px 15px 25px 0; text-align: center; position: relative; top: auto; left: auto; clear: both;} #footer-info::after {content: ''; background-color: #00416b; width: 25px; height: 100%; position: absolute; top: 0; right: -25px; visibility: visible;} /* Footer Meta --------------------------------------------------------- */ #footer-meta {width: 100%; padding: 25px 0 0 0; float: none; clear: both;} /* Footer Navigation ---------- */ #footer-navigation {width: 100%; margin: 0 auto 50px auto;} /* Footer Newsletter ---------- */ #footer-newsletter {width: 100%; float: none; clear: both;} #footer-newsletter .gform_body input {padding: 8px 13px 8px 13px !important;} /* Footer Clincher ---------- */ #footer-clincher {padding: 15px 0 25px 0; text-align: center;} /* Copyright ----- */ #copyright {font-size: 11px;} } /* Button ----------------------------------------------------------------------------------------------------------------------------------------- */ .button, #page-content .wp-block-button__link {background-color: #0099bb; width: auto; margin: 0; padding: 27px 30px; font-size: 14px; line-height: 1.2; color: #fff; text-align: center; text-transform: uppercase; text-decoration: none !important; border: none; position: relative; display: inline-block; cursor: pointer; vertical-align: middle; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; -webkit-appearance: none; -moz-appearance: none; appearance: none; letter-spacing: 1px; font-weight: 700;} .button::after, #page-content .wp-block-button__link::after {content: '\f178'; margin: 0 10px 0 0; font-size: 15px; line-height: 1.1; color: #fff; text-align: center; vertical-align: middle; position: relative; left: 10px; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 300; font-family: 'Font Awesome 5 Pro';} .button i, #page-content .wp-block-button__link i {font-size: 15px; position: relative; transition: all .3s linear;} /* Gutenberg Button ---------- */ .wp-block-button {background: none !important;} /* Hover ---------- */ .button:hover {background-color: #b2da0a;} .button:hover::after, .button.active::after, #page-content .wp-block-button__link:hover::after {left: 13px;} /* Button No Box ------------------------------------------------------- */ .button.no-box {background: none; width: auto; margin: 0; padding: 10px 10px; font-size: 14px; line-height: 1.2; color: #00416b; text-align: center; text-transform: uppercase; text-decoration: none !important; border: none; position: relative; display: inline-block; cursor: pointer; vertical-align: middle; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; -webkit-appearance: none; -moz-appearance: none; appearance: none; letter-spacing: 1px; font-weight: 700;} .button.no-box::after {content: '\f178'; margin: 0 10px 0 0; font-size: 15px; line-height: 1; color: #00416b; text-align: center; vertical-align: middle; position: relative; top: -1px; left: 10px; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-weight: 300; font-family: 'Font Awesome 5 Pro';} /* Hover ---------- */ .button.no-box:hover {color: #b2da0a;} .button.no-box:hover::after {color: #b2da0a; left: 13px;} /* Forms ------------------------------------------------------------------------------------------------------------------------------------------ */ #page-content .gform_body ul {width: 100%; margin: 0 auto !important; padding: 0 !important;} #page-content .gform_body .gfield, .gform_body .gfield {margin: 0 0 20px 0 !important;} #page-content .gfield {margin-top: 0 !important; padding-left: 0 !important;} /* Labels ----- */ #page-content .gfield_label, .gfield_label, .gform_wrapper.gravity-theme .gfield_label {margin: 0 0 10px 0 !important; padding: 0; font-size: 16px; line-height: 1; color: #2f3031; display: block; font-weight: 700;} .gform_body .gfield .ginput_container span label, .gform_body .gfield .gform_fileupload_rules {margin: 0; padding-top: 3px !important; font-size: 14px !important; line-height: 1 !important; color: #8d8e8e;} #page-content .gfield_description {padding: 0 !important;} #page-content .gsection_title {padding: 20px 0 0 0 !important; font-size: 20px; display: block; clear: both;} /* No Label ----- */ .gform_wrapper .gfield.no-label .gfield_label {display: none !important;} /* Fields ----- */ .gfield {padding-right: 0 !important;} #page-content .ginput_container {margin-top: 2px;} /* Left / Right Column Fields ----- */ #page-content .gf_left_half, #page-content .gf_right_half {width: 49%;} #page-content .gf_right_half {float: right;} #page-content .gf_left_third, #page-content .gf_middle_third, #page-content .gf_right_third {width: 32.3%;} #page-content .gf_middle_third {margin-left: 1.5% !important;} #page-content .gf_right_third {float: right;} /* AJAX loading image ----- */ .gform_footer {position: relative;} .gform_ajax_spinner {position: relative !important; top: 9px !important; right: 0px !important; z-index: 100;} /* Password Strength ----- */ .gfield_password_strength {color: #707070;} /* Input ----- */ .gfield input[type="text"], .gfield input[type="email"], .gfield input[type="tel"], .gfield input[type="password"], .gfield input[type="url"] {width: calc(100% - 0px) !important; margin: 0 auto 5px auto !important; padding: 15px 10px !important; font-size: 16px; line-height: 1.5; color: #c5c5c5; border: none; border: 1px solid rgba(76, 76, 76, 0.25); position: relative; -webkit-appearance: none; border-radius: 0; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover */ .gfield input[type="text"]:hover, .gfield input[type="email"]:hover, .gfield input[type="tel"]:hover, .gfield input[type="password"]:hover, .gfield input[type="url"]:hover {color: #c0c0c0; border: 1px solid #c0c0c0;} /* Active */ .gfield input[type="text"]:active, .gfield input[type="email"]:active, .gfield input[type="tel"]:active, .gfield input[type="password"]:active, .gfield input[type="url"]:active{color: #707070; border: 1px solid #6a6a6a;} /* Focus */ .gfield input[type="text"]:focus, .gfield input[type="email"]:focus, .gfield input[type="tel"]:focus, .gfield input[type="password"]:focus, .gfield input[type="url"]:focus {color: #707070; border: 1px solid #6a6a6a;} /* Error */ .gfield_error input[type="text"], .gfield_error input[type="email"], .gfield_error input[type="tel"], .gfield_error input[type="password"], .gfield_error input[type="url"] {border: 1px dotted #7f0303;} /* Textarea ----- */ .gfield textarea {min-width: calc(100% - 0px); max-width: calc(100% - 0px); min-height: 100px; margin: 0; padding: 7px 8px !important; font-size: 16px; line-height: 20px; color: #c5c5c5; border: none; border: 1px solid rgba(76, 76, 76, 0.25); position: relative; -webkit-appearance: none; border-radius: 0; position: relative; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} /* Hover */ .gfield textarea:hover {color: #c0c0c0; border: 1px solid #c0c0c0;} /* Active */ .gfield textarea:active {color: #707070; border: 1px solid #6a6a6a;} /* Focus */ .gfield textarea:focus {color: #707070; border: 1px solid #6a6a6a !important;} /* Error */ .gfield_error textarea {border: 1px dashed #7f0303 !important;} /* Select ----- */ #page-content .gform_wrapper select {background: url(images/dropdown-arrow.png) right center no-repeat #fff; width: calc(100% - 0px) !important; margin: 0 0 5px 0 !important; padding: 20px 8px 20px 8px !important; font-size: 12px; line-height: 1.2; color: #707070; text-transform: uppercase; border: none; border-radius: 0; border: 1px solid #d7d7da; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-weight: 700; font-family: 'Gothic A1', sans-serif;} /* Date ----- */ .clear-multi .ginput_container_date {width: 33.33333333% !important;} .gform_wrapper .gfield_checkbox li input, .gform_wrapper .gfield_checkbox li input[type=checkbox], .gform_wrapper .gfield_radio li input[type=radio] {margin-left: 1px;} /* File Upload Fields ----- */ .file-upload {margin-bottom: 40px;} .gform_wrapper .gform_fileupload_multifile .gform_drop_area {margin-bottom: 5px !important;} .gform_fileupload_multifile {} .screen-reader-text {} /* Submit Button ----- */ .gform_button.button {border: none;} /* Success Message ----- */ .gform_confirmation_message {background-color: #dff0d8 !important; margin: 0 auto 20px auto; padding: 15px 3% 15px 3% !important; border: 1px solid #d6e9c6; font-size: 15px !important; line-height: 20px !important; color: #3c763d; font-weight: normal !important; text-align: center; position: relative; display: block;} /* Error Message ----- */ .gform_validation_errors {background-color: #f2dede !important; margin: 0 auto 20px auto !important; padding: 15px 3% 15px 3% !important; margin-bottom: 20px !important; border: 1px solid #ebccd1 !important; text-align: center; position: relative !important; display: block;} .gform_validation_errors h2 {margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1.3 !important; color: #a94442 !important; font-weight: normal !important;} #content .gform_wrapper.gform_validation_error .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) {max-width: calc(100% - 0px) !important;} #content .gform_wrapper li.gfield.gfield_error, #content .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {background: none !important; margin: 0 !important; border: none !important; padding: 0 !important;} /* Media Queries for Forms ---------- */ @media only screen and (max-width: 640px) { /* Left / Right Column Fields ----- */ #page-content .gf_left_half, #page-content .gf_right_half {width: 100%;} #page-content .gf_right_half {float: none; clear: both;} } /* Lazyload Fade In ------------------------------------------------------------------------------------------------------------------------------- */ /* Image with 'data' attribute is hidden */ img[data-lazy-src] {opacity: 0;} /* Image without 'data' attribute is (or becomes) visible */ img.lazyloaded {-webkit-transition: opacity .5s linear 0.2s; -moz-transition: opacity .5s linear 0.2s; transition: opacity .5s linear 0.2s; opacity: 1;} /* Slider ----------------------------------------------------------------------------------------------------------------------------------------- */ .slick-slider {position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent;} .slick-list {position: relative; overflow: hidden; display: block; margin: 0; padding: 0;} .slick-list:focus {outline: none;} .slick-loading .slick-list {background: white url(images/ajax-loader.gif) center center no-repeat;} .slick-list.dragging {cursor: pointer; cursor: hand;} .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img {-webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .slick-track {margin: 0 auto; position: relative; left: 0; top: 0; display: block; zoom: 1;} .slick-track:before, .slick-track:after {content: ""; display: table;} .slick-track:after {clear: both;} .slick-loading .slick-track {visibility: hidden;} .slick-slide {float: left; height: 100%; min-height: 1px; display: none;} .slick-slide img {display: block;} .slick-slide.slick-loading img {display: none;} .slick-slide.dragging img {pointer-events: none;} .slick-initialized .slick-slide {display: block;} .slick-loading .slick-slide {visibility: hidden;} .slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;} /* Arrows -------------------------------------------------------------- */ .slick-prev, .slick-next {background-color: rgba(255, 255, 255, 0.5); width: 50px; height: 50px; padding: 0; font-size: 0; line-height: 0; text-align: center; color: transparent; position: absolute; top: calc(50% - 25px); display: block; cursor: pointer; border: none; border-radius: 50%; outline: none; display: block; z-index: 1000; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} .slick-prev:focus, .slick-next:focus {outline: none;} .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {color: #e5e5e5; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear;} .slick-prev.slick-disabled, .slick-next.slick-disabled {color: #e5e5e5;} .slick-prev:before, .slick-next:before {font-size: 45px; line-height: 45px; color: #fff; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Font Awesome 5 Pro";} .slick-prev {left: 50px;} .slick-prev:before {content: '\f104';} .slick-next {right: 50px;} .slick-next:before {content: '\f105';} /* Dots ---------------------------------------------------------------- */ .slick-dots {width: 100%; margin: 0 auto; padding: 10px 0 0 0; list-style: none; display: block;} .slick-dots li {position: relative; display: inline-block !important; height: 25px !important; width: 25px !important; margin: 0 !important; padding: 0 !important; cursor: pointer; float: none !important; clear: none !important;} .slick-dots li:before {content: none !important;} .slick-dots li button {border: 0; background: transparent; display: block; height: 35px; width: 35px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none;} .slick-dots li button:focus {outline: none;} .slick-dots li button:before {content: "\2022"; width: 25px !important; height: 25px !important; font-size: 35px; line-height: 25px; color: #fff; text-align: center; opacity: .25; position: absolute; top: 0; left: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; -ms-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; font-family: "slick";} .slick-dots li:hover button:before {opacity: .5;} .slick-dots li.slick-active button:before {opacity: 1; color: #fff;} /* WOW -------------------------------------------------------------------------------------------------------------------------------------------- */ .wow {visibility: hidden;} .wow.animated {visibility: visible;}