/* Theme Name: Gateway Ticketing Systems Version: 2.0 Theme URI: https://www.gatewayticketing.com Description: This WordPress theme designed and developed by Peer Pressure Creative is for use by Gateway Ticketing Systems only. Tags: Responsive Author: Peer Pressure Creative Author URI: https://www.peerpressurecreative.com */ /* Brand Colors: --------------------------------------------------------------------------------------------------------------------------------- */ /* Dark blue: #023f7e Gateway Blue: #0064A5 Lighter Blue: #248CEA Grey: #6E6E6E */ /* 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% - 150px); height: auto; margin: 0 auto; position: relative;} .wrap.video-wrap {max-width: 800px;} /* Media Queries for Wrap ---------- */ @media only screen and (max-width: 1000px) { .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-family: 'ArialNovaRegular';} /* Selection Color -------------------------------------------------------------------------------------------------------------------------------- */ body ::selection {background: #005cb9; color: #fff;} body ::-moz-selection {background: #005cb9; color: #fff;} /* Centered --------------------------------------------------------------------------------------------------------------------------------------- */ .centered {margin: 0 auto; text-align: center; display: block;} .vert-center{position: relative; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);} /* Hover Rise ------------------------------------------------------------------------------------------------------------------------------------- */ .hover-rise {position: relative; top: 0; transition: all .3s linear;} .hover-rise:hover {top: -10px;} /* @font-face ------------------------------------------------------------------------------------------------------------------------------------- */ /* Arial Nova ---------------------------------------------------------- */ /* font-family: 'ArialNovaLight'; font-family: 'ArialNovaRegular'; font-family: 'ArialNovaBold'; */ /* Blur ------------------------------------------------------------------------------------------------------------------------------------------- */ .blur {filter: blur(3px);} /* Screen Reader ---------------------------------------------------------------------------------------------------------------------------------- */ #screen-reader {position: absolute; left: -99999px; top: -99999px;} /* Announcement ----------------------------------------------------------------------------------------------------------------------------------- */ #announcement {background-color: #0064A5; width: 100%; margin: 0 auto; padding: 5px 0 10px 0; text-align: center; border-radius: 0 0 10px 10px; position: relative; display: block; clear: both; z-index: 5500;} #announcement p {margin: 0 auto; padding: 0 15px; font-size: clamp(12px, 1.1vw, 19px); line-height: 1.4; color: #fff;} #announcement p a {color: #fff; border-bottom: 1px solid #fff;} #announcement p a::after {content: '\f30b'; padding: 0 0 0 10px; font-size: clamp(13px, 1.2vw, 18px); line-height: 1.4; color: #fff; position: relative; transition: all .3s linear; font-weight: 600; font-family: 'Font Awesome 6 Pro';} /* #announcement p a::after {content: '\f324'; padding: 0 0 0 5px; font-size: clamp(8px, .6vw, 10px); line-height: 1.4; color: #1b355a; position: relative; top: -2px; transition: all .3s linear; font-weight: 600; font-family: 'Font Awesome 6 Pro';} */ /* Media Queries for Announcement ---------- */ @media only screen and (max-width: 800px) { } /* Main ------------------------------------------------------------------------------------------------------------------------------------------- */ #main {background-color: #fff; width: calc(100% - 100px); height: auto; margin: 0 auto; padding: 0 25px 0 25px; border-radius: 0 0 10px 10px; position: absolute; top: 0; left: 25px; display: block; clear: both; z-index: 5000;} #main.solid.full-nav-open {background-color: transparent;} /* Media Queries for Main ---------- */ @media only screen and (max-width: 700px) { #main {width: calc(100% - 50px); padding: 0 15px 0 15px; left: 10px;} } /* Main Wrap ----------------------------------------------------------- */ #main-wrap {width: calc(100% - 0px); margin: 0 auto; position: relative; display: block; clear: both;} /* Tertiary Navigation ---------------------------------------------------------------------------------------------------------------------------- */ #tertiary-navigation {width: 100%; margin: 0 0 25px 0; padding: 25px 0 0 0; border-bottom: 1px solid #7faddc; position: relative; display: block; clear: both;} #tertiary-navigation ul {width: auto; position: relative; display: block;} #tertiary-navigation ul li {margin: 0 20px 0 0; position: relative; display: block; float: left;} #tertiary-navigation ul li a {padding: 0 0 20px 0; font-size: clamp(13px, 1vw, 15px); line-height: 1; color: #000; transition: all .3s linear; display: block;} /* Hover ----- */ #tertiary-navigation ul li a:hover {color: #0064A5;} /* Active ----- */ #tertiary-navigation ul li.active a {border-bottom: 5px solid #7faddc; color: #0064A5;} #tertiary-navigation ul li.right {margin-right: 0; float: right;} /* Media Queries for Tertiary Navigation ---------- */ @media only screen and (max-width: 700px) { #tertiary-navigation {margin: 0 0 25px 0; padding: 15px 0 0 0;} #tertiary-navigation ul li a {padding: 0 0 15px 0; font-size: clamp(13px, 1vw, 15px);} /* Active ----- */ #tertiary-navigation ul li.active a {border-bottom: 2px solid #7faddc;} } @media only screen and (max-width: 500px) { #tertiary-navigation ul li {margin: 0 15px 0 0;} #tertiary-navigation ul li a:not(#translate-modal-trigger) {font-size: clamp(9.7px, 1vw, 15px);} } @media only screen and (max-width: 389px) { #tertiary-navigation ul li {margin-right: 10px;} #tertiary-navigation ul li a {font-size: clamp(8.3px, 1vw, 15px);} } /* Logo ------------------------------------------------------------------------------------------------------------------------------------------- */ #logo {width: 205px; margin: 0; padding: 0 0 0 0; position: relative; display: block; float: left; z-index: 10;} #logo span {position: absolute; left: -99999px; top: -99999px;} #logo svg {width: 100%; height: auto; margin: 0; display: block;} #logo svg path, #logo svg rect {/*fill: #fff; transition: fill .5s linear;*/} #logo.color svg path, #logo.color svg rect {/*fill: #0A2136;*/} /* Hover */ #logo:hover {} /* Media Queries for Logo ---------- */ @media only screen and (max-width: 1100px) { } /* Main Navigation -------------------------------------------------------------------------------------------------------------------------------- */ #main-navigation {width: calc(100% - 300px); margin: 0 0 0 0; position: relative; display: block; float: right; z-index: 1;} #main-navigation ul {margin: 0 0 0 0; padding: 0 0 0 0; position: relative; display: block; text-align: right;} #main-navigation ul li {padding: 0; margin: 0 0 0 0; position: relative; display: inline-block;} #main-navigation ul li a {padding: 15px 20px 52px 20px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1; color: #000; display: inline-block; position: relative; transition: all .3s linear;} #main-navigation ul li a::before {content: ''; background-color: #0064A5; width: calc(100% - 30px); height: 2px; position: absolute; bottom: 40px; left: 20px; display: block; opacity: 0; transition: transform .3s ease, opacity .3s linear; transform: scaleX(0);} #main-navigation ul li.mobile-trigger {display: none;} #main-navigation ul li:last-child {margin: 0 0 0 10px;} #main-navigation ul li:last-child a {background-color: #7faddc; padding: 20px 30px; color: #fff; border-radius: 5px;} #main-navigation ul li:last-child a::before {content: none;} /* Hover ----- */ #main-navigation ul li a:hover {color: #0064A5;} #main-navigation ul li a:hover::before {width: calc(100% - 40px); opacity: 1; transform: scaleX(1);} #main-navigation ul li:last-child a:hover {background-color: #0064A5; color: #fff;} /* Active ----- */ #main-navigation ul li.current_page_item a, #main-navigation ul li.current-menu-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, #main-navigation ul li.current-menu-ancestor a, #main-navigation ul li.active a {color: #0064A5;} #main-navigation ul li:last-child.current_page_item a, #main-navigation ul li:last-child.current-menu-item a, #main-navigation ul li:last-child.current_page_parent a, #main-navigation ul li:last-child.current_page_ancestor a, #main-navigation ul li:last-child.current-page-ancestor a, #main-navigation ul li:last-child.current-menu-ancestor a, #main-navigation ul li:last-child.active a {background-color: #0064A5; color: #fff;} #main-navigation ul li.current_page_item a::before, #main-navigation ul li.current-menu-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, #main-navigation ul li.current-menu-ancestor a::before, #main-navigation ul li.active a::before {width: calc(100% - 40px); opacity: 1; transform: scaleX(1);} /* Arrow ---------- */ #main-navigation ul li#arrow {width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #7faddc transparent; position: absolute; bottom: -15px; left: 0; transition: all .3s linear; opacity: 0; visibility: hidden;} /* Active ----- */ #main-navigation ul li#arrow.active {bottom: 0; opacity: 1; visibility: visible;} #main-navigation .sub-menu {display: none;} /* Full Navigation Open ---------- */ #main-navigation.full-nav-open ul li {} /* Dropdown Menus ------------------------------------------------------ */ #dropdown-menu-wrapper {margin: 112px 0 0 0; padding: 0; border-top: 1px solid #7faddc; position: relative; transition: all .3s linear; opacity: 0; visibility: hidden; z-index: 5000;} /* #dropdown-menu-wrapper::before {content: ''; width: 0; height: 0; border-style: solid; border-width: 0 7px 7px 7px; border-color: transparent transparent #fff transparent; position: absolute; top: -7px; left: calc(50% - 3px); transition: all .3s linear;} */ #dropdown-menu-wrapper.active {opacity: 1; visibility: visible;} /* Dropdown Menu Content ---------- */ #dropdown-menu-wrapper .dropdown-menu-content {width: 100%; height: 0; transition: all .3s linear; opacity: 0; visibility: hidden; position: relative; overflow: hidden;} #dropdown-menu-wrapper .dropdown-menu-content.active {height: auto; opacity: 1; visibility: visible;} /* Menu Main Content ----- */ #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content {width: calc(60% - 80px); min-height: 200px; padding: 25px 40px 30px 40px; position: relative; display: block; float: right;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content h2 {margin: 0 0 15px 0; font-size: clamp(20px, 1.5vw, 25px); line-height: 1.3; color: #000; display: block; clear: both; font-family: 'ArialNovaBold';} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content h2 a {color: #000;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content p {margin: 0 0 15px 0; font-size: clamp(12px, 1vw, 16px); line-height: 1.6; color: #000; display: block; clear: both; font-weight: 400;} /* Dropdown Children Pages */ #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages {margin: 0 0 0 0; padding: 10px 0 0 0; position: relative; display: block; clear: both;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li {width: 48%; margin: 0 0 10px 0; padding: 0 0 0 0; position: relative; display: block; float: left;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li:nth-of-type(even) {float: right;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li:nth-of-type(odd) {clear: both;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li a {font-size: clamp(13px, 1vw, 15px); line-height: 1.2; color: #0064A5; transition: all .3s linear;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li.menu-item-has-children > a {font-size: clamp(15px, 1.1vw, 17px); color: #000; font-family: 'ArialNovaBold';} /* Hover ----- */ #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li a:hover {color: #0A2136;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li .sub-menu {width: 100%; margin: 0 0 10px 0; padding: 15px 0 0 0; position: relative; display: block; clear: both;} #dropdown-menu-wrapper .dropdown-menu-content .menu-main-content .dropdown-menu-children-pages li .sub-menu li {width: 100%; margin: 0 0 10px 0; padding: 0 0 0 0; position: relative; display: block; clear: both;} /* Dropdown Menu Feature ----- */ #dropdown-menu-wrapper .dropdown-menu-content .menu-feature {width: 40%; height: auto; padding: 25px 0 30px 0; position: relative; display: block;} /* Feature Card ----- */ #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card {margin: 0; position: relative; display: block;} /* Merchant Card Image ----- */ #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image {width: 100%; height: 100%; border-radius: 10px; position: absolute; top: 0; left: 0; display: block; overflow: hidden;} #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image::before {content: ''; background: rgb(0,63,125); background: linear-gradient(45deg, rgba(0,63,125,1) 15%, rgba(0,63,125,0) 75%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; transition: all .3s linear;} /* Event Card Content ----- */ #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image .feature-card-content {width: calc(100% - 50px); padding: 10px 25px 25px 25px; position: absolute; bottom: 0; left: 0; display: block;} #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image .feature-card-content h4 {margin: 0 auto 5px auto; font-size: clamp(14px, 1.7vw, 28px); line-height: 1.3; color: #fff; text-shadow: 0 1px 1px #152948; text-align: left; display: block; clear: both;} #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image .feature-card-content h4 svg{padding: 0 5px 0 0; color: #ef8a22;} #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image .feature-card-content p {margin: 0 0 10px 0; font-size: clamp(11px, .9vw, 15px); line-height: 1.3; color: #fff; display: block; clear: both;} #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image .feature-card-content p svg {padding: 0 3px 0 0; display: inline-block;} #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card .feature-card-image .feature-card-content p i {font-size: clamp(6px, .6vw, 10px);} /* Hover ----- */ #dropdown-menu-wrapper .dropdown-menu-content .menu-feature .feature-card:hover .feature-card-image::before {height: 125%;} /* Dropdown Overlay ---------- */ #dropdown-menu-overlay {background-color: rgba(2, 64, 126, 0.65); width: 100%; height: 100%; position: fixed; top: 0; left: 0; transition: all .3s linear; opacity: 0; visibility: hidden; z-index: 4999;} #dropdown-menu-overlay.active {opacity: 1; visibility: visible;} /* Media Queries for Main Navigation ---------- */ @media only screen and (max-width: 1200px) { #main-navigation ul li a {padding-right: 12px; padding-left: 12px;} #main-navigation ul li a::before {width: calc(100% - 26px); left: 13px;} #main-navigation ul li.current_page_item a::before, #main-navigation ul li.current-menu-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, #main-navigation ul li.current-menu-ancestor a::before, #main-navigation ul li.active a::before {width: calc(100% - 26px);} } @media only screen and (max-width: 1100px) { #main-navigation ul {display: none;} } /* Accordion ----------------------------------------------------------- */ #full-navigation .accordion li .toggle::after {content: '\f054'; font-size: 13px; line-height: 1; color: #fff; position: absolute; top: calc(50% - 8px); right: 25px; transition: all .3s linear; font-weight: 100; font-family: 'Font Awesome 6 Pro';} /* Full Navigation ------------------------------------------------------------------------------------------------------------------------------ */ #mobile-navigation-wrapper {margin: 0; padding: 0; border-top: 1px solid #7faddc; position: relative; transition: opacity .3s linear; opacity: 0; visibility: hidden; display: none; z-index: 5000;} #mobile-navigation-wrapper.active {opacity: 1; visibility: visible; z-index: 4000;} /* Full Navigation Content --------------------------------------------- */ #mobile-navigation-content {width: calc(100% - 275px); height: auto; margin: 0 auto; padding: 25px 0 0 25px; position: relative; display: block; text-align: left; z-index: 10; overflow: auto; float: right;} /* Full Navigation ---------- */ #mobile-navigation > ul {margin: 0; padding: 0; list-style: none; position: relative; display: block; clear: both;} #mobile-navigation ul li {width: 48%; margin: 0 0 20px 0; padding: 0; position: relative; display: block; float: left;} #mobile-navigation ul > li:nth-of-type(odd) {clear: both;} #mobile-navigation ul > li:nth-of-type(even) {margin-right: 0; float: right;} #mobile-navigation ul li:last-of-type {display: none;} #mobile-navigation > ul > li > a {margin: 0 0 15px 0; padding: 0; font-size: clamp(17px, 3vw, 25px); line-height: 1.2; color: #000; transition: all .3s linear; position: relative; display: inline-block; font-weight: 600;} #mobile-navigation > ul > li > a::before {content: ''; background-color: #000; width: 100%; height: 2px; position: absolute; bottom: -3px; left: 0; display: block; opacity: 0; transition: transform .3s ease, opacity .3s linear; transform: scaleX(0);} /* Sub Menus ---------- */ #mobile-navigation ul li .sub-menu {margin: 0 0 25px 0; padding-left: 0; display: block;} #mobile-navigation ul li .sub-menu li {width: 100%; margin: 0 0 10px 0; display: block; clear: both; float: none;} #mobile-navigation ul li .sub-menu li.mobile {display: none;} #mobile-navigation ul li .sub-menu li a {font-size: clamp(14px, 1vw, 17px); line-height: 1.2; color: #0064A5; position: relative; display: inline-block; font-weight: 400;} #mobile-navigation ul li .sub-menu li.menu-item-has-children a {color: #000; font-weight: 600;} #mobile-navigation ul li .sub-menu li a::before {content: ''; background-color: #0064A5; width: 100%; height: 1px; position: absolute; bottom: -5px; left: 0; display: block; opacity: 0; transition: transform .3s ease, opacity .3s linear; transform: scaleX(0);} #mobile-navigation ul li .sub-menu li.menu-item-has-children a::before {content: ''; background-color: #000;} /* Sub Sub Menus ---------- */ #mobile-navigation ul li .sub-menu li .sub-menu {margin: 0 0 25px 0; padding: 10px 0 0 0; display: block;} #mobile-navigation ul li .sub-menu li .sub-menu li {width: 100%; margin: 0 0 10px 0; display: block; clear: both; float: none;} #mobile-navigation ul li .sub-menu li .sub-menu li a {font-size: clamp(14px, 1vw, 17px); line-height: 1.2; color: #0064A5; position: relative; display: inline-block; font-weight: 400;} #mobile-navigation ul li .sub-menu li .sub-menu li a::before {content: ''; background-color: #0064A5; width: 100%; height: 1px; position: absolute; bottom: -5px; left: 0; display: block; opacity: 0; transition: transform .3s ease, opacity .3s linear; transform: scaleX(0);} /* Hover */ #mobile-navigation ul li a:hover {color: #000;} #mobile-navigation ul li a:hover::after {color: #000;} #mobile-navigation ul li a.open:hover::after {color: #000;} #mobile-navigation > ul > li > a:hover::before {width: 100%; opacity: 1; transform: scaleX(1);} #mobile-navigation ul li .sub-menu li a:hover::before {width: 100%; opacity: 1; transform: scaleX(1);} #mobile-navigation ul li .sub-menu li .sub-menu li a:hover::before {width: 100%; opacity: 1; transform: scaleX(1);} /* 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: #000;} #mobile-navigation ul li.current_page_item > a::before, #mobile-navigation ul li.current-page-ancestor > a::before, #mobile-navigation ul li.current-menu-item > a::before {width: 100%; opacity: 1; transform: scaleX(1);} #mobile-navigation ul li .sub-menu li.current_page_item a::before, #mobile-navigation ul li .sub-menu li.current-page-ancestor a::before, #mobile-navigation ul li .sub-menu li.current-menu-item a::before {width: 100%; opacity: 1; transform: scaleX(1);} /* Full Navigation Footer -------------------------------------------- */ #mobile-navigation-footer {width: 250px; margin: 0; padding: 25px 0 0 0; position: relative; display: block; float: left; z-index: 10;} #mobile-navigation-footer ul {margin: 0; padding: 0; list-style: none;} #mobile-navigation-footer ul li {clear: both;} #mobile-navigation-footer ul li a {color: #fff;} /* Full Navigation Footer Content ------------------------------------ */ #mobile-navigation-footer-content {width: 100%; padding: 0 0 35px 0; position: relative; display: block; clear: both;} /* Full Navigation Footer Content Blocks ---------- */ .mobile-navigation-footer-content-block {margin: 0 0 20px 0; position: relative; display: block;} .mobile-navigation-footer-content-block h3 {margin: 0 0 15px 0; font-size: clamp(14px, .9vw, 17px); line-height: 1.2; color: #fff; position: relative; display: block; clear: both; font-family: 'ArialNovaBold';} .mobile-navigation-footer-content-block p {margin: 0 0 15px 0; padding: 0; font-size: clamp(14px, .9vw, 17px); line-height: 1.5; color: #fff; font-weight: 400;} .mobile-navigation-footer-content-block p a {color: #fff; text-decoration: none;} .mobile-navigation-footer-content-block .hours span {font-size: clamp(14px, .9vw, 17px); line-height: 1.2; color: #7ca0bb; display: block; clear: both;} /* Full Navigation Footer Social ----- */ #mobile-navigation-wrapper #mobile-navigation-footer-social {margin: 0; padding: 0; position: relative; display: block;} #mobile-navigation-wrapper #mobile-navigation-footer-social li {margin: 0 10px 0 0; display: inline-block;} #mobile-navigation-wrapper #mobile-navigation-footer-social li:last-of-type {margin-right: 0;} #mobile-navigation-wrapper #mobile-navigation-footer-social li a {font-size: clamp(16px, 1.5vw, 24px); line-height: 1.5; color: #0064A5; font-weight: 400;} /* Full Navigation Trigger ---------- */ #mobile-nav-trigger {margin: 10px 0 0 0; padding: 0; text-align: center; position: relative; display: none; float: right; z-index: 100;} /* Hamburger ----- */ #hamburger {width: 85px; height: 45px; margin: 0; position: relative; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer;} #hamburger.open span {} #hamburger span {background: #0064A5; width: 25px; height: 2px; font-size: clamp(15px, 1.1vw, 17px); line-height: 1; color: #000; position: absolute; left: 60px; display: block; opacity: 1; transform: rotate(0deg); transition: .25s ease-in-out;} #hamburger span:nth-child(1) {background: transparent; top: 9px; left: 0; transform-origin: left center;} #hamburger span:nth-child(2) {top: 14px; transform-origin: left center;} #hamburger span:nth-child(3) {top: 20px; transform-origin: left center;} #mobile-nav-trigger.active #hamburger span:nth-child(1) {opacity: 0;} #mobile-nav-trigger.active #hamburger span:nth-child(2) {background: #0064A5; transform: rotate(45deg); top: 9px; left: 65px;} #mobile-nav-trigger.active #hamburger span:nth-child(3) {background: #0064A5ww; transform: rotate(-45deg); top: 26px; left: 65px;} /* Media Queries for Full Navigation */ @media only screen and (max-width: 1100px) { #mobile-nav-trigger {display: block;} } @media only screen and (max-width: 800px) { /* Full Navigation Content --------------------------------------------- */ #mobile-navigation-content {width: 100%; padding: 25px 0 0 0; float: none; clear: both;} /* Full Navigation Footer -------------------------------------------- */ #mobile-navigation-footer {width: 100%; margin: 0; padding: 25px 0 0 0; text-align: center; float: none; clear: both;} } @media only screen and (max-width: 500px) { /* Full Navigation Content --------------------------------------------- */ #mobile-navigation-content {width: 100%; padding: 25px 0 0 0; float: none; clear: both;} #mobile-navigation ul li {width: 100%; margin: 0 auto 20px auto; float: none; clear: both;} #mobile-navigation ul > li:nth-of-type(even) {margin-right: auto; float: none; clear: both;} } /* Hero ------------------------------------------------------------------------------------------------------------------------------------------- */ #hero {background-color: #00407e; width: 100%; height: 230px; margin: 0; position: relative; display: block; clear: both; z-index: 10;} #hero.home {height: 70vh; min-height: 550px;} #hero.image {height: 70vh; min-height: 550px;} /* Hero Slide ---------------------------------------------------------- */ #hero .hero-slide {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; overflow: hidden;} #hero .hero-slide::before {content: ''; background: rgb(0,63,126); background: linear-gradient(100deg, rgba(0,63,126,1) 5%, rgba(0,63,126,0) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1;} #hero .hero-slide::after {content: ''; background: rgb(0,63,126); background: linear-gradient(0deg, rgba(0,63,126,1) 0%, rgba(0,63,126,0) 100%); width: 100%; height: 20%; position: absolute; bottom: 0; left: 0; display: block; visibility: visible; z-index: 1;} /* Home Hero Slide Transitions ---------- */ #hero.home .hero-slide {transition: opacity .75s ease-in-out; opacity: 0 !important;} #hero.home .hero-slide.is-selected {opacity: 1 !important;} #hero.home .flickity-viewport {height: 100% !important;} /* Home Hero Prev / Next ---------- */ #hero.home .flickity-prev-next-button {background-color: #F7F6F0; width: 75px; height: 75px; text-align: center; border-radius: 0; position: absolute; top: auto; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); bottom: 0; right: 0;} #hero.home .flickity-prev-next-button:disabled {display: none;} /* Icon ----- */ #hero.home .flickity-prev-next-button .flickity-button-icon {fill: #0064A5; width: 15px; height: auto; margin: 0 auto; position: relative; left: auto; top: auto; z-index: 99999;} /* Previous ----- */ #hero.home .flickity-prev-next-button.previous {right: 76px; left: auto;} /* Next ----- */ #hero.home .flickity-prev-next-button.next {} /* Hero Slide Image ---------- */ #hero .hero-slide .hero-slide-image {background-color: #221f20; background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; right: 0; opacity: 1;} /* Hero Slide Video ---------- */ #hero .hero-slide #video-background, #hero .hero-slide .video-background {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; overflow: hidden;} #hero .hero-slide #video-background video, #hero .hero-slide .video-background video {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;} /* Home Hero Slide Content ---------- */ #hero.home .hero-slide .home-hero-slide-content {width: 60%; position: absolute; bottom: 0; left: 112px; z-index: 10; transition: all .85s linear; opacity: 0;} #hero.home .hero-slide .home-hero-slide-content span {display: block; clear: both;} #hero.home .hero-slide.is-selected .home-hero-slide-content {bottom: 100px; opacity: 1;} #hero.home .home-hero-slide-content h2 {margin: 0 0 15px 0; font-size: clamp(23px, 3vw, 50px); line-height: 1.2; color: #fff; position: relative; display: block; clear: both; font-family: 'ArialNovaLight';} #hero.home .home-hero-slide-content p {margin: 0 0 30px 0; font-size: clamp(14px, 1.3vw, 20px); line-height: 1.5; color: #fff; position: relative; display: block; clear: both;} #hero.home .home-hero-slide-content .button {padding: 12px 30px 12px 30px; font-size: clamp(13px, 1vw, 16px);} /* Hero Slide Content ---------- */ #hero .hero-slide-content {width: calc(100% - 150px); position: absolute; bottom: 15px; left: 75px; z-index: 25;} #hero.image .hero-slide-content {height: calc(100% - 211px);} .hero-slide-content h1, .hero-slide-content h2 {margin: 0; font-size: clamp(14px, 1vw, 17px); line-height: 1.2; color: #fff; float: right; font-family: 'ArialNovaBold';} #hero.image .hero-slide-content #hero-slide-content-heading-intro {width: 60%; max-width: 800px; position: absolute; bottom: 75px; left: 0;} #hero.image .hero-slide-content #hero-slide-content-heading-intro h1, #hero.image .hero-slide-content #hero-slide-content-heading-intro h2 {margin: 0 0 10px 0; font-size: clamp(17px, 3vw, 35px); line-height: 1.2; float: none; clear: both;} #hero.image .hero-slide-content #hero-slide-content-heading-intro p {margin: 0 0 0 0; font-size: clamp(13px, 1.3vw, 19px); line-height: 1.6; color: #fff;} /* Breadcrumbs ---------- */ #breadcrumbs {width: 100%; font-size: clamp(12px, .9vw, 14px); line-height: 1.5; color: #7fafdd; position: relative; display: block; float: left;} #hero.image .hero-slide-content #breadcrumbs {width: 100%; padding: 0 0 12px 0; border-bottom: 1px solid #7fafdd; float: none; clear: both;} #breadcrumbs span {margin: 0 3px 0 3px;} #breadcrumbs span:first-of-type {margin-left: 0;} #breadcrumbs a {color: #7fafdd; border-bottom: 1px solid transparent; position: relative; display: inline-block; vertical-align: top; transition: all .3s linear;} #hero.image #breadcrumbs a {color: #7fafdd;} /* Hover */ #breadcrumbs a:hover {border-bottom: 1px solid #7fafdd;} /* Here */ #breadcrumbs .current-item {max-width: 350px; padding: 0; border-bottom: 1px solid #7fafdd; color: #7fafdd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #breadcrumbs span[property="name"] {max-width: 400px; margin-top: -3px; padding: 0; display: inline-block; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} /* 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; 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;} /* Media Queries for Hero */ @media only screen and (max-width: 1100px) { /* Home Hero Slide Content ---------- */ #hero.home .hero-slide .home-hero-slide-content {width: 70%; bottom: 0; left: 75px;} } @media only screen and (max-width: 900px) { #hero.home {height: 60vh; min-height: 480px;} } @media only screen and (max-width: 700px) { #hero {height: 210px;} /* Home Hero Slide Content ---------- */ #hero.home .hero-slide .home-hero-slide-content {width: calc(100% - 70px); left: 35px;} /* Hero Slide Content ---------- */ #hero .hero-slide-content {width: calc(100% - 50px); left: 25px;} #breadcrumbs span[property="name"] {max-width: 200px;} } @media only screen and (max-width: 400px) { /* Home Hero Slide Content ---------- */ #hero.home .hero-slide .home-hero-slide-content br {display: none;} } /* Home Page -------------------------------------------------------------------------------------------------------------------------------------- */ /* Verticals ----------------------------------------------------------- */ #verticals {background-color: #f2f5f8; /*border-bottom: 1px solid #d0d0d0;*/ position: relative; display: block; clear: both; z-index: 10;} /* Navigation ---------- */ #vertical-tabs {margin: -58px auto 0 auto; padding: 0 25px; text-align: center; position: relative; display: block; list-style: none; z-index: 1000;} #vertical-tabs li {background-color: transparent; padding: 18px 25px; font-size: clamp(12px, 1.3vw, 18px); color: #fff; border-radius: 5px 5px 0 0; transition: all .3s linear; display: inline-block; cursor: pointer; font-family: 'ArialNovaBold';} /* Active */ #vertical-tabs li.is-nav-selected {background: #f2f5f8; color: #0064A5;} /* Tab Content ---------- */ #verticals .tab-content {padding: 50px 112px 50px 187px; position: relative; display: none; overflow: hidden;} /* Tab Content Copy ----- */ #verticals .tab-content .tab-content-copy {width: calc(45% - 75px); margin: 0; /*padding: 12vh 0 0 0;*/ padding: 0 0 0 0; position: relative; display: block; float: left;} #verticals .tab-content .tab-content-copy h2 {margin: 0 0 15px 0; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.4; color: #000; display: block; clear: both; font-family: 'ArialNovaBold';} #verticals .tab-content .tab-content-copy p {margin: 0 0 35px 0; font-size: clamp(15px, 1vw, 20px); line-height: 1.6; display: block; clear: both;} #verticals .tab-content .tab-content-copy .button {} /* Tab Content Image ----- */ #verticals .tab-content .tab-content-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 53%; height: 40vh; min-height: 400px; border-radius: 10px; position: relative; bottom: -150px; transition: all .3s linear; display: block; float: right;} /* Active */ #verticals .tab-content.current {display: inherit;} #verticals .tab-content.is-selected .tab-content-copy {} #verticals .tab-content.is-selected .tab-content-image {bottom: 0;} /* Media Queries for Verticals */ @media only screen and (max-width: 1100px) { /* Navigation ---------- */ #vertical-tabs {margin-top: -55px;} /* Tab Content ---------- */ #verticals .tab-content {padding: 50px 25px 25px 25px;} } @media only screen and (max-width: 900px) { /* Navigation ---------- */ #vertical-tabs {margin-top: -41px;} #vertical-tabs li {padding: 13px 20px;} /* Tab Content ---------- */ #verticals .tab-content {padding: 25px 25px 25px 25px;} /* Tab Content Copy ----- */ #verticals .tab-content .tab-content-copy {width: 100%; margin: 0 auto; padding: 0 0 25px 0; text-align: center; float: none; clear: both;} /* Tab Content Image ----- */ #verticals .tab-content .tab-content-image {width: 100%; height: 30vh; min-height: 300px; float: none; clear: both;} } /* Offerings ----------------------------------------------------------- */ #offerings {width: 100%; padding: 75px 0 75px 0; position: relative; display: block; clear: both; overflow: hidden;} /* Offerings Introduction ---------- */ #offerings #offerings-intro {width: calc(100% - 150px); max-width: 1000px; margin: 0 auto 75px auto; text-align: center; position: relative; display: block; clear: both;} #offerings #offerings-intro::before {content: ''; background-color: #0064A5; width: 90%; max-width: 400px; height: 5px; position: absolute; top: -35px; left: calc(50% - 200px); border-radius: 10px; display: block;} #offerings #offerings-intro h1 {margin: 0 0 25px 0; font-size: clamp(20px, 2vw, 38px); line-height: 1.4; color: #000; display: block; clear: both; font-family: 'ArialNovaBold';} #offerings #offerings-intro p {margin: 0 0 40px 0; font-size: clamp(15px, 1.5vw, 20px); line-height: 1.8; display: block; clear: both;} /* Offering ---------- */ #offerings .offering {width: calc(100% - 226px); margin: 0 auto 25px auto; padding: 38px; border-radius: 10px; position: relative; display: block; clear: both;} #offerings .offering:nth-of-type(odd) {background-color: rgba(231, 237, 243, 0.5);} /* Offering Copy ----- */ #offerings .offering .offering-copy {width: calc(50% - 150px); margin: 0; /*padding: 12vh 75px 0 75px;*/ padding: 0 75px 0 75px; position: relative; display: block; float: right;} #offerings .offering .offering-copy h3 {margin: 0 0 15px 0; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.4; color: #000; display: block; clear: both; font-weight: 600;} #offerings .offering .offering-copy p {margin: 0 0 35px 0; font-size: clamp(15px, 1vw, 20px); line-height: 1.6; display: block; clear: both;} #offerings .offering .offering-copy .button {} #offerings .offering:nth-of-type(odd) .offering-copy {float: left;} /* Offering Image ----- */ #offerings .offering .offering-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 50%; height: 40vh; min-height: 400px; border-radius: 10px; position: relative; transition: all .3s linear; display: block; float: left;} #offerings .offering:nth-of-type(odd) .offering-image {float: right;} /* Offering Intro First Shape ----- */ #offerings .first-shape {width: 130px; height: auto; opacity: .3; position: absolute; top: 57px; left: -100px; rotate: -41deg; z-index: -1;} #offerings .first-shape svg {width: 100%; max-width: 100%; height: auto; display: block;} /* Offering Intro Second Shape ----- */ #offerings .second-shape {width: 440px; height: auto; opacity: .3; position: absolute; top: -293px; right: -323px; rotate: -90deg; z-index: -1;} #offerings .second-shape svg {width: 100%; max-width: 100%; height: auto; display: block;} /* Offering Third Shape ----- */ #offerings .offering .third-shape {width: 400px; height: auto; opacity: .3; position: absolute; bottom: -262px; left: -106px; z-index: -1;} #offerings .offering .third-shape svg {width: 100%; max-width: 100%; height: auto; display: block;} /* Offering Fourth Shape ----- */ #offerings .offering .forth-shape {width: 550px; height: auto; opacity: .3; position: absolute; top: -350px; right: -400px; z-index: -1;} #offerings .offering .forth-shape svg {width: 100%; max-width: 100%; height: auto; display: block;} /* Offering Fifth Shape ----- */ #offerings .offering .fifth-shape {width: 230px; height: auto; opacity: .3; position: absolute; top: -40px; right: -176px; z-index: -1;} #offerings .offering .fifth-shape svg {width: 100%; max-width: 100%; height: auto; display: block;} /* Offering Sixth Shape ----- */ #offerings .offering .sixth-shape {width: 580px; height: auto; opacity: .3; position: absolute; top: -210px; left: -290px; z-index: -1;} #offerings .offering .sixth-shape svg {width: 100%; max-width: 100%; height: auto; display: block;} /* Media Queries for Offerings */ @media only screen and (max-width: 1300px) { /* Offerings Introduction ---------- */ #offerings #offerings-intro {max-width: 800px;} } @media only screen and (max-width: 1000px) { /* Offering ---------- */ #offerings .offering {width: calc(100% - 126px); padding: 38px;} /* Offering Copy ----- */ #offerings .offering .offering-copy {width: calc(50% - 50px); padding: 0 25px 0 25px;} } @media only screen and (max-width: 900px) { #offerings {padding: 25px 0 25px 0;} /* Offering ---------- */ #offerings .offering {width: calc(100% - 100px); padding: 38px 25px;} /* Offering Copy ----- */ #offerings .offering .offering-copy {width: 100%; margin: 0 auto 25px auto; padding: 0; text-align: center; float: none; clear: both;} #offerings .offering:nth-of-type(odd) .offering-copy {float: none; clear: both;} /* Offering Image ----- */ #offerings .offering .offering-image {width: 100%; height: 35vh; min-height: 350px; float: none; clear: both;} #offerings .offering:nth-of-type(odd) .offering-image {float: none;} } @media only screen and (max-width: 500px) { /* Offering Image ----- */ #offerings .offering .offering-image {height: 30vh; min-height: 300px;} } @media only screen and (max-width: 400px) { /* Offering Image ----- */ #offerings .offering .offering-image {height: 25vh; min-height: 200px;} } /* Home Call to Action -------------------------------------------------- */ #home-call-to-action {background-color: #005cb9; margin: 0 auto 65px auto; padding: 65px 75px; border-radius: 10px; position: relative; display: block; clear: both; overflow: hidden;} /* Larger Call to Action Copy ---------- */ #home-call-to-action .copy {width: 65%; position: relative; display: block; float: left; z-index: 1;} #home-call-to-action .copy h2 {margin: 0 0 15px 0; padding: 0; font-size: clamp(21px, 2.2vw, 35px); color: #fff; position: relative; display: block; clear: both; font-family: 'ArialNovaBold';} #home-call-to-action .copy p {margin: 0; padding: 0; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.9; color: #fff;} /* Larger Call to Action Button ---------- */ #home-call-to-action span {text-transform: uppercase; letter-spacing: 1px; position: absolute; right: 75px; z-index: 1;} /* Larger Call to Action Shape ---------- */ #home-call-to-action .shape {width: 70%; position: absolute; top: -300px; right: -400px; opacity: .3; rotate: -95deg; z-index: 0;} /* Media Queries for Home Call to Action */ @media only screen and (max-width: 900px) { #home-call-to-action {padding: 25px 25px; text-align: center;} /* Larger Call to Action Copy ---------- */ #home-call-to-action .copy {width: 100%; margin: 0 auto 25px auto; float: none; clear: both;} /* Larger Call to Action Button ---------- */ #home-call-to-action span {position: relative; right: auto; top: auto; -ms-transform: translateY(0); transform: translateY(0);} /* Larger Call to Action Shape ---------- */ #home-call-to-action .shape {width: 40%; top: -200px; right: -50px;} } /*! Flickity v2.3.0 https://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position: relative; } .flickity-enabled:focus { outline: none; } .flickity-viewport { overflow: hidden; position: relative; height: 100%; } .flickity-slider { position: absolute; width: 100%; height: 100%; } /* draggable */ .flickity-enabled.is-draggable { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab; } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing; } /* ---- flickity-button ---- */ .flickity-button { position: absolute; background: hsla(0, 0%, 100%, 0.75); border: none; color: #333; } .flickity-button:hover { background: white; cursor: pointer; } .flickity-button:focus { outline: none; box-shadow: 0 0 0 5px #19F; } .flickity-button:active { opacity: 0.6; } .flickity-button:disabled { opacity: 0.3; cursor: auto; /* prevent disabled button from capturing pointer up event. #716 */ pointer-events: none; } .flickity-button-icon { fill: currentColor; } /* ---- previous/next buttons ---- */ .flickity-prev-next-button { top: 50%; width: 44px; height: 44px; border-radius: 50%; /* vertically center */ transform: translateY(-50%); } .flickity-prev-next-button.previous { left: 10px; } .flickity-prev-next-button.next { right: 10px; } /* right to left */ .flickity-rtl .flickity-prev-next-button.previous { left: auto; right: 10px; } .flickity-rtl .flickity-prev-next-button.next { right: auto; left: 10px; } .flickity-prev-next-button .flickity-button-icon { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; } /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: -25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; } .flickity-rtl .flickity-page-dots { direction: rtl; } .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 8px; background: #333; border-radius: 50%; opacity: 0.25; cursor: pointer; } .flickity-page-dots .dot.is-selected { opacity: 1; } /* flickity-fade */ .flickity-enabled.is-fade .flickity-slider > * { pointer-events: none; z-index: 0; } .flickity-enabled.is-fade .flickity-slider > .is-selected { pointer-events: auto; z-index: 1; } /* Page Content ----------------------------------------------------------------------------------------------------------------------------------- */ #page-content {min-height: 200px; padding: 50px 112px 50px 112px; position: relative; display: block; clear: both; z-index: 15;} #page-content.skinny {max-width: 800px; margin-right: auto; margin-left: auto;} #page-content h1, #page-content h2, #page-content h3, #page-content h4, #page-content h5, #page-content h6 {margin: 0 0 20px 0; padding: 0; line-height: 1.3; color: #000; position: relative; display: block; clear: both; font-family: 'ArialNovaBold';} #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: #0064A5;} #page-content h1 {font-size: clamp(30px, 2.5vw, 40px);} #page-content h2 {font-size: clamp(21px, 2.2vw, 35px);} #page-content h3 {font-size: clamp(19px, 2vw, 30px);} #page-content h4 {font-size: clamp(18px, 1.8vw, 28px);} #page-content h5 {font-size: clamp(17px, 1.6vw, 26px);} #page-content h6 {font-size: clamp(16px, 1.4vw, 24px);} #page-content p {margin: 0 0 25px 0; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.9; color: #000;} #page-content .reduce-margin p {margin-bottom: 5px;} #page-content p a {color: #0064A5; position: relative; transition: all .3s linear; text-decoration: underline;} #page-content p a:hover {color: #0064A5;} #page-content img {max-width: 100%; width: auto; height: auto; border-radius: 10px; object-fit: contain;} #page-content picture {max-width: 100%; width: auto; height: auto; border-radius: 10px; display: inline-block;} #page-content a[href$=jpg], #content a[href$=jpeg], #content a[href$=png], #content a[href$=gif] {border: none;} #page-content ul {margin: 0 0 25px 0; padding: 0 0 0 35px; position: relative; display: block; clear: both; list-style: disc;} #page-content ul li {margin: 0 0 5px 0; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.9; color: #000; position: relative;} #page-content ul li a {color: #0064A5; text-decoration: underline;} #page-content ul li a:hover {color: #0064A5;} #page-content ol {margin: 0 0 25px 0; padding: 0 0 0 35px; position: relative; display: block; clear: both; list-style: none;} #page-content ol li {margin: 0 0 5px 0; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.9; color: #000; position: relative; counter-increment: step-counter;} #page-content ol li::before {content: counter(step-counter); background-color: #000; width: 20px; height: 20px; font-size: clamp(9px, .8vw, 12px); line-height: 20px; color: #fff; text-align: center; display: block; position: absolute; top: 7px; left: -30px; border-radius: 50%;} #page-content ol li a {color: #0064A5; text-decoration: underline;} #page-content ol li a:hover {color: #0064A5;} #page-content figcaption {margin: 0; padding: 5px 0 10px 0; font-size: clamp(12px, .9vw, 16px); line-height: 1.3; color: #000; font-style: italic; font-weight: 400;} /* Blockquote ---------- */ #page-content blockquote {background-color: #0064A5; margin: 0; padding: 50px; position: relative; display: block; clear: both;} #page-content blockquote h2, #page-content blockquote h3, #page-content blockquote h4, #page-content blockquote h5, #page-content blockquote h6 {color: #fff;} #page-content blockquote p {font-size: clamp(15px, 1.4vw, 24px); line-height: 1.9; color: #fff;} #page-content blockquote cite {font-size: clamp(12px, 1.1vw, 19px); line-height: 1.3; color: #fff; font-style: italic;} /* 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;} #page-content iframe {width: 100%;} /* Video */ #page-content .is-type-video {max-width: 800px; margin: 0 auto 25px auto; padding: 10px 0; position: relative;} #page-content .is-type-video .wp-block-embed__wrapper {border-radius: 10px; overflow: hidden;} /* 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;} /* Carousel ----- */ #page-content .wp-block-gallery.carousel {width: calc(100% + 120px); margin: 0 0 0 -120px; padding: 25px 0; position: relative; display: block; clear: both;} #page-content .wp-block-gallery.carousel .wp-block-image {width: calc(100% / 3); height: 50vh; min-height: 250px; margin: 0 15px 0 0 !important; position: relative; display: block; float: left;} /* Media Queries for Page Content */ @media only screen and (max-width: 1000px) { #page-content {padding: 50px 25px 50px 25px;} /* Video */ #page-content .is-type-video {padding: 25px 0;} } @media only screen and (max-width: 850px) { /* Carousel ----- */ #page-content .wp-block-gallery.carousel {width: calc(100% + 75px); margin: 0 0 0 -37px;} } @media only screen and (max-width: 500px) { /* Carousel ----- */ #page-content .wp-block-gallery.carousel .wp-block-image {width: 100% !important; height: 300px;} } /* Content Wrapper -------------------------------------------------------------------------------------------------------------------------------- */ #content-wrapper {margin: 0 auto; position: relative; display: block;} /* Media Queries for Content Wrapper */ @media only screen and (max-width: 1000px) { #content-wrapper {/*width: calc(100% - 50px);*/} } /* Main Content ----------------------------------------------------------------------------------------------------------------------------------- */ #main-content {width: 70%; min-height: 200px; margin: 0; padding: 0 0 0 0; position: relative; display: block; float: left; z-index: 1;} #main-content.right {float: right;} #main-content.share {width: calc(100% - 110px);} /* Main Content Body --------------------------------------------------- */ #page-content #main-content #main-content-body {width: 100%; position: relative; display: block; clear: both;} #page-content #main-content.wide.secondary-navigation #main-content-body {width: 74%; float: left; clear: none;} /* 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;} /* Page Content Accordions ------------------------------------------------------------------------------------------------------------------------ */ #page-content .wp-block-aab-group-accordion {width: 100%; max-width: 750px; margin: 0 auto; padding: 25px 0 75px 0; position: relative; display: block; clear: both;} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item {background-color: #fff; margin: 0 !important; padding: 15px 60px; border: none !important; border-left: 3px solid rgba(0, 84, 135, 0.35) !important; border-bottom: 2px solid rgba(0, 84, 135, 0.05) !important; position: relative; display: block; clear: both; transition: all .3s linear;} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item:last-child {border-bottom: none !important;} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item .aagb__accordion_head h4 {margin: 0; padding: 15px 0 !important; font-size: clamp(16px, 1.5vw, 21px) !important; opacity: .5; position: relative; display: block; clear: both; cursor: pointer; transition: opacity .3s linear; font-weight: 600 !important; font-family: 'Montserrat', sans-serif !important;} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item .aagb__accordion_head h4::before {content: '\f078'; font-size: 16px; line-height: 1; color: #0A2136; position: absolute; top: 21px; left: -35px; font-weight: 600; font-family: 'Font Awesome 6 Pro';} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item .aagb__accordion_body {margin: 0; border: none !important; position: relative; clear: both;} /* Hover ---------- */ #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item:hover {border-left: 3px solid rgba(0, 84, 135, 0.5) !important;} /* Open ---------- */ #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item.aagb__accordion_active {border-left: 3px solid #0A2136 !important;} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item.aagb__accordion_active .aagb__accordion_head h4 {opacity: 1 !important;} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item.aagb__accordion_active .aagb__accordion_head h4::before {content: '\f077';} #page-content .wp-block-aab-group-accordion .wp-block-aab-accordion-item .aagb__icon {display: none;} /* Media Queries for Main Content */ @media only screen and (max-width: 1000px) { #main-content {width: calc(68% - 87px); padding: 5vw 75px 3vw 12px;} } @media only screen and (max-width: 850px) { #main-content {/*width: calc(100% - 24px); padding: 5vw 12px 3vw 12px;*/ width: 100%; padding: 5vw 0 3vw 0;} #page-content.general-inside #main-content::before {width: calc(100% + 75px); padding: 0 0 0 0; left: -25px;} } /* Sidebar ---------------------------------------------------------------------------------------------------------------------------------------- */ #page-content #sidebar {width: calc(30% - 75px); margin: 0; padding: 0 0 0 75px; position: relative; display: block; float: right;} #page-content #sidebar.share{width: 40px; padding: 0 0 0 0; float: left;} #page-content #sidebar.padding-top {padding-top: 60px;} #page-content #sidebar h3 {margin: 0 0 10px 0; padding: 50px 0 0 0; font-size: clamp(14px, 1vw, 18px); font-family: 'ArialNovaBold';} #page-content #sidebar h3:nth-of-type(1) {padding-top: 0;} #page-content #sidebar p {font-size: clamp(14px, 1.1vw, 18px) /*16px*/; line-height: 1.5;} #page-content #sidebar p a {color: #000;} #page-content #sidebar p a::before {content: none;} #page-content #sidebar a {font-size: clamp(14px, 1.1vw, 18px); line-height: 1.5; color: #0A2136;} #page-content #sidebar ul {margin: 0; padding: 0; list-style: none;} #page-content #sidebar ul li {margin: 0 0 10px 0; font-size: clamp(14px, 1.2vw, 19px); line-height: 1.5; transition: all .3s linear;} #page-content #sidebar ul li a {color: #0A2136; transition: all .3s linear; position: relative; font-family: 'ArialNovaBold';} #page-content #sidebar ul li a.active {color: #0A2136;} #page-content #sidebar ul li a:hover {color: #0A2136;} /* Post Share ----- */ #page-content #sidebar #post-share {margin: 0; padding: 0;} #page-content #sidebar #post-share ul {margin: 0; list-style: none;} #page-content #sidebar #post-share li {margin: 0 10px 10px 10px; padding: 0; font-size: clamp(14px, 2vw, 25px); line-height: 1.5; position: relative; display: inline-block;} #page-content #sidebar #post-share li a {font-size: clamp(14px, 2vw, 25px); color: #0A2136; transition: all .3s linear;} /* Jump Navigation ----------------------------------------------------- */ #page-content #sidebar #jump-navigation {margin: 0; position: relative; display: block; clear: both;} #page-content #sidebar #jump-navigation ul {margin: 0; padding: 0; list-style: none;} #page-content #sidebar #jump-navigation ul li {margin: 0 0 15px 0;} #page-content #sidebar #jump-navigation ul li a {color: #1b3359;} /* Secondary Navigation ------------------------------------------------ */ #page-content #sidebar #secondary {position: relative; display: block; clear: both;} #page-content #sidebar #secondary ul {margin: 0;} #page-content #sidebar #secondary ul li {margin: 0; padding: 0;} #page-content #sidebar #secondary ul li a {margin: 0; padding: 15px 0 15px 0; color: #000; text-decoration: none; position: relative; display: block; z-index: 0;} #page-content #sidebar #secondary ul li:last-child a {border-bottom: none;} /* Children ---------- */ #page-content #sidebar #secondary ul li.page_item_has_children ~ li.page_item:not(.page_item_has_children) {background-color: #fbfbfc; padding: 10px 15px; display: none;} #page-content #sidebar #secondary ul li.page_item_has_children.current_page_item ~ li.page_item:not(.page_item_has_children) {display: block;} #page-content #sidebar #secondary ul li.page_item_has_children ~ li.page_item:not(.page_item_has_children) li {} #page-content #sidebar #secondary ul li.page_item_has_children ~ li.page_item:not(.page_item_has_children) li a {color: red;} /* Hover ----- */ #page-content #sidebar #secondary ul li a:hover {} /* Active ----- */ #page-content #sidebar #secondary ul li.current_page_parent > a, #page-content #sidebar #secondary ul li.current_page_item > a {background-color: #fff; border-radius: 10px;} #page-content #sidebar #secondary ul li.current_page_parent > a::before, #page-content #sidebar #secondary ul li.current_page_item > a::before {content: ''; background-color: #fff; width: calc(100% + 40px); height: 100%; border-radius: 10px; position: absolute; top: 0; left: -20px; z-index: -1;} /* Children */ #page-content #sidebar #secondary ul li .children li.current_page_item > a {color: #0064A5;} /* WooCommerce Filters ------------------------------------------------- */ /* Result Count ---------- */ #page-content #sidebar .woocommerce-result-count {display: none;} /* Media Queries for Sidebar */ @media only screen and (max-width: 1000px) { #page-content #sidebar {width: calc(32% - 25px); margin: 0 0 0 0; padding: 5vw 0 50px 25px;} } @media only screen and (max-width: 850px) { #page-content #sidebar {width: calc(100% - 24px); margin: 0 auto 0 auto; padding: 35px 12px 50px 12px; float: none; clear: both;} /* News Single --------------------------------------------------------- */ #page-content #sidebar.news-single {width: 100%; padding: 60px 0 0 0; float: none; clear: both;} #page-content #sidebar.news-single h3 {padding: 0 0 10px 0; transform: rotate(0deg); position: relative; top: auto; left: auto;} #page-content #sidebar.news-single ul {width: 100%; margin: 0 auto 0 auto; padding: 15px 0 0 0; text-align: center; top: auto;} #page-content #sidebar.news-single ul li {margin: 0 3% 15px 3%; display: inline-block; clear: none;} #page-content #sidebar.news-single ul li a {font-size: 20px; line-height: 1; color: #1b3359;} } /* Landing Pages ---------------------------------------------------------------------------------------------------------------------------------- */ /* Top Call to Action -------------------------------------------------- */ #page-content .top-call-to-action {background-color: #005cb9; margin: 0 auto 65px auto; padding: 65px 75px; border-radius: 10px; position: relative; display: block; clear: both; overflow: hidden;} /* Top Call to Action Copy ---------- */ #page-content .top-call-to-action .copy {width: 65%; position: relative; display: block; float: left; z-index: 1;} #page-content .top-call-to-action .copy h2 {margin: 0; padding: 0; color: #fff;} /* Top Call to Action Button ---------- */ #page-content .top-call-to-action span {text-transform: uppercase; letter-spacing: 1px; position: absolute; right: 75px; z-index: 1;} /* Top Call to Action Shape ---------- */ #page-content .top-call-to-action .shape {width: 70%; position: absolute; top: -300px; right: -400px; opacity: .3; rotate: -95deg; z-index: 0;} /* Hover ---------- */ #page-content .top-call-to-action span:hover{background-color: #248CEA;} /* Carousel ------------------------------------------------------------ */ #page-content .carousel {background-color: rgba(231, 237, 243, 0.5); margin: 0 auto 25px auto; padding: 40px 40px 40px 40px; border-radius: 10px; position: relative; display: block; clear: both;} #page-content .carousel h2 {margin: 0 auto 35px auto; font-size: clamp(20px, 2vw, 38px); line-height: 1.4; color: #000; text-align: center; display: block; clear: both;} #page-content .carousel.blue h2 {color: #fff;} #page-content .carousel.news h2 {width: 65%; margin: 8px 0 0 0; text-align: left; float: left;} #page-content .carousel.news .top-button {float: right;} #page-content .carousel ul {margin: 0; padding: 0; position: relative; display: block; clear: both;} #page-content .carousel ul li {width: calc(100% / 5 - 20px); margin: 0 25px 0 0; text-align: center; position: relative; display: block; float: left;} #page-content .carousel ul li:last-of-type {margin-right: 0;} #page-content .carousel ul li h3 {/*min-height: 75px;*/ margin: 0 0 25px 0; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.4;} #page-content .carousel ul li h3 a {color: #000; text-decoration: none;} #page-content .carousel.blue ul li h3 {color: #fff;} #page-content .carousel.blue ul li h3 a {color: #fff;} #page-content .carousel ul li .carousel-block-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 35vh; min-height: 250px; margin: 0 auto 35px auto; border-radius: 10px; position: relative; display: block; clear: both;} #page-content .carousel ul li .carousel-block-image .article-meta {background-color: #005cb9; padding: 13px 20px; position: absolute; bottom: 10px; left: 10px; border-radius: 10px; font-family: 'ArialNovaBold';} #page-content .carousel ul li .carousel-block-image .article-meta p {margin: 0; font-size: clamp(12px, .8vw, 14px); line-height: 1.2; color: #fff;} #page-content .carousel ul li .button {position: relative;} /* Previous ----- */ #page-content .carousel ul .flickity-prev-next-button.previous {background-color: #f2f6f9); left: -60px;} /* Next ----- */ #page-content .carousel ul .flickity-prev-next-button.next {background-color: #f2f6f9; right: -60px;} /* Media Queries for Carousel ---------- */ @media only screen and (max-width: 900px) { #page-content .carousel {padding: 25px 25px 0 25px;} #page-content .carousel ul li {width: 48% !important; margin: 0 0 25px 0;} #page-content .carousel ul li:nth-of-type(even) {float: right;} #page-content .carousel ul li:nth-of-type(odd) {clear: both;} #page-content .carousel ul li .carousel-block-image {margin: 0 auto 15px auto;} } @media only screen and (max-width: 600px) { #page-content .carousel {padding-bottom: 5px;} #page-content .carousel ul li {width: 100% !important; float: none; clear: both;} #page-content .carousel ul li:nth-of-type(even) {float: none;} } /* Block Group --------------------------------------------------------- */ #page-content .block-group {background-color: rgba(231, 237, 243, 0.5); margin: 0 auto 125px auto; padding: 40px 40px 40px 40px; border-radius: 10px; position: relative; display: block; clear: both;} #page-content .block-group.blue {background-color: #0064A5; padding: 75px 0 40px 0;} #page-content .block-group.blue::before{content: ''; background-color: #0064A5; width: calc(100% + 224px); height: 100%; position: absolute; top: 0; left: -112px;} #page-content .block-group h2 {margin: 0 auto 35px auto; font-size: clamp(20px, 2vw, 38px); line-height: 1.4; color: #000; text-align: center; display: block; clear: both;} #page-content .block-group.blue h2 {color: #fff;} #page-content .block-group.news h2 {width: 65%; margin: 8px 0 0 0; text-align: left; float: left;} #page-content .block-group.news .top-button {float: right;} #page-content .block-group ul {margin: 0; padding: 0; position: relative; display: block; clear: both;} #page-content .block-group.news ul {padding: 50px 0 0 0;} #page-content .block-group ul li {width: calc(100% / 3 - 20px); margin: 0 25px 25px 0; text-align: center; position: relative; display: block; float: left;} #page-content .block-group.news ul li {text-align: left;} #page-content .block-group ul li:nth-of-type(3n+3) {margin-right: 0;} #page-content .block-group ul li:nth-of-type(3n+1) {clear: both;} #page-content .block-group ul li h3 {margin: 0 0 50px 0; font-size: clamp(16px, 1.7vw, 23px); line-height: 1.4;} #page-content .block-group ul li h3 a {color: #000; text-decoration: none;} #page-content .block-group.blue ul li h3 {color: #fff;} #page-content .block-group.blue ul li h3 a {color: #fff;} #page-content .block-group ul li .block-group-block-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 50vh; min-height: 400px; margin: 0 auto 50px auto; border-radius: 10px; position: relative; display: block; clear: both;} #page-content .block-group ul li .block-group-block-image .article-meta {background-color: #005cb9; padding: 13px 20px; position: absolute; bottom: 10px; left: 10px; border-radius: 10px; font-family: 'ArialNovaBold';} #page-content .block-group ul li .block-group-block-image .article-meta p {margin: 0; font-size: clamp(12px, .8vw, 14px); line-height: 1.2; color: #fff;} #page-content .block-group ul li .button {} /* Larger Call to Action -------------------------------------------------- */ #page-content .larger-call-to-action {background-color: #005cb9; margin: 0 auto 65px auto; padding: 65px 75px; border-radius: 10px; position: relative; display: block; clear: both; overflow: hidden;} /* Larger Call to Action Copy ---------- */ #page-content .larger-call-to-action .copy {width: 65%; position: relative; display: block; float: left; z-index: 1;} #page-content .larger-call-to-action .copy h2 {margin: 0 0 15px 0; padding: 0; color: #fff;} #page-content .larger-call-to-action .copy p {margin: 0; padding: 0; color: #fff;} /* Larger Call to Action Button ---------- */ #page-content .larger-call-to-action span {text-transform: uppercase; letter-spacing: 1px; position: absolute; right: 75px; z-index: 1;} /* Larger Call to Action Shape ---------- */ #page-content .larger-call-to-action .shape {width: 70%; position: absolute; top: -300px; right: -400px; opacity: .3; rotate: -95deg; z-index: 0;} /* Hover ---------- */ #page-content .larger-call-to-action span:hover {background-color: #248CEA;} /* Media Queries for Larger Call to Action */ @media only screen and (max-width: 900px) { #page-content .larger-call-to-action {padding: 25px 25px; text-align: center;} /* Larger Call to Action Copy ---------- */ #page-content .larger-call-to-action .copy {width: 100%; margin: 0 auto 25px auto; float: none; clear: both;} /* Larger Call to Action Button ---------- */ #page-content .larger-call-to-action span {position: relative; right: auto; top: auto; -ms-transform: translateY(0); transform: translateY(0);} /* Larger Call to Action Shape ---------- */ #page-content .larger-call-to-action .shape {width: 40%; top: -200px; right: -50px;} } /* FAQs ------------------------------------------------------------------------------------------------------------------------------------------- */ #page-content .faqs {width: calc(100% - 50px); max-width: 750px; margin: 0 auto; padding: 75px 0; position: relative; display: block; clear: both;} #page-content .faqs h2 {text-align: center;} #page-content .faqs p {margin: 0 0 45px 0; text-align: center;} #page-content .faqs ul {background-color: rgba(231, 237, 243, 0.5); margin: 0 0 50px 0; padding: 0; border-radius: 10px; position: relative; display: block; list-style: none;} #page-content .faqs ul li {margin: 0; padding: 25px 40px; border-bottom: 2px solid rgba(0, 84, 135, 0.05); position: relative; display: block; clear: both; transition: all .3s linear;} #page-content .faqs ul li:last-child {border-bottom: none;} #page-content .faqs ul li h3 {margin: 0; padding: 15px 0; font-size: clamp(16px, 1.5vw, 21px); color: #000; opacity: .5; position: relative; display: block; clear: both; cursor: pointer; transition: opacity .3s linear;} #page-content .faqs ul li h3::before {content: '\f078'; font-size: 16px; line-height: 1; color: #023f7e; position: absolute; top: 21px; right: 0; font-weight: 600; font-family: 'Font Awesome 6 Pro';} #page-content .faqs ul li p {margin: 0; text-align: left; position: relative; display: block; clear: both;} #page-content .faqs ul li p ~ p {padding-top: 25px;} /* Hover ---------- */ #page-content .faqs ul li:hover {} /* Open ---------- */ #page-content .faqs ul li.open {} #page-content .faqs ul li.open h3 {opacity: 1;} #page-content .faqs ul li.open h3::before {content: '\f077';} /* Media Queries for FAQs ---------- */ @media only screen and (max-width: 800px) { #page-content .faqs ul li {padding: 30px 25px 30px 50px;} } /* WordPress Media Block -------------------------------------------------------------------------------------------------------------------------- */ #page-content .wp-block-media-text {width: 100%; margin: 0 auto 25px auto; padding: 38px; border-radius: 10px; position: relative;} #page-content .wp-block-media-text:nth-of-type(odd) {background-color: rgba(231, 237, 243, 0.5);} /* WordPress Media Block Copy ----- */ #page-content .wp-block-media-text .wp-block-media-text__content {} #page-content .wp-block-media-text .wp-block-media-text__content h3 {margin: 0 0 15px 0; font-size: clamp(20px, 1.8vw, 40px); line-height: 1.4; color: #000; display: block; clear: both; font-weight: 600;} #page-content .wp-block-media-text .wp-block-media-text__content p {margin: 0 0 35px 0; font-size: clamp(15px, 1.2vw, 23px); line-height: 1.6; display: block; clear: both;} #page-content .wp-block-media-text .wp-block-media-text__content .button{} /* WordPress Media Block Image ----- */ #page-content .wp-block-media-text .wp-block-media-text__media {border-radius: 10px; transition: all .3s linear; overflow: hidden;} /* Media Queries for WordPress Media Block */ @media only screen and (max-width: 1000px) { /* Offering ---------- */ #page-content .wp-block-media-text {width: calc(100% - 126px); padding: 38px;} /* Offering Copy ----- */ #page-content .wp-block-media-text .wp-block-media-text__content {width: calc(100% - 50px); padding: 0 25px 0 25px;} } @media only screen and (max-width: 900px) { /* Offering ---------- */ #page-content .wp-block-media-text {width: 100%; padding: 38px 25px; display: block;} /* Offering Copy ----- */ #page-content .wp-block-media-text .wp-block-media-text__content {width: 100%; margin: 0 auto 25px auto; padding: 0; text-align: center; float: none; clear: both;} #page-content .wp-block-media-text:nth-of-type(odd) .wp-block-media-text__content {float: none; clear: both;} #page-content .wp-block-media-text .wp-block-media-text__content .wp-block-buttons {display: inline-block;} /* Offering Image ----- */ #page-content .wp-block-media-text .wp-block-media-text__media {width: 100%; height: 35vh; min-height: 250px; margin: 0 auto 25px auto; text-align: center; float: none; clear: both;} #page-content .wp-block-media-text:nth-of-type(odd) .wp-block-media-text__media {float: none;} } @media only screen and (max-width: 500px) { /* Offering Image ----- */ #page-content .wp-block-media-text .wp-block-media-text__media {height: 30vh; min-height: 300px;} } @media only screen and (max-width: 400px) { /* Offering Image ----- */ #page-content .wp-block-media-text .wp-block-media-text__media {height: 25vh; min-height: 200px;} } /* Counter ---------------------------------------------------------------------------------------------------------------------------------------- */ #page-content #counter {margin: 0; padding: 0; text-align: center; position: relative; display: block; clear: both; overflow: hidden;} #page-content #counter li {width: calc(100% / 5 - 75px); margin: 0 0 25px 0; padding: 25px 35px; text-align: center; border-radius: 10px; position: relative; vertical-align: top; display: inline-block;} #page-content #counter li i {margin: 0 auto 20px auto; font-size: clamp(25px, 2.5vw, 35px); line-height: 1; color: #005cb9; display: block; clear: both; /*background-color: #005cb9; width: 75px; height: 75px; margin: 0 auto 20px auto; font-size: clamp(25px, 2.5vw, 35px); line-height: 75px; color: #fff; border-radius: 50%; display: block; clear: both;*/} #page-content #counter li h2 {margin: 0 0 10px 0;} #page-content #counter li h3 {margin: 0 0 25px 0; font-size: clamp(14px, 1vw, 18px); line-height: 1.3; color: #262626;} /* Media Queries for Counter ---------- */ @media only screen and (max-width: 1000px) { #page-content #counter li {width: calc(100% / 3 - 75px);} } @media only screen and (max-width: 700px) { #page-content #counter li {width: calc(100% / 2 - 75px);} } @media only screen and (max-width: 500px) { #page-content #counter li {width: 100%; margin: 0 auto; padding: 25px 0;} } /* Leadership ------------------------------------------------------------------------------------------------------------------------------------- */ #page-content #leadership {margin: 0 0 25px 0; position: relative; display: block; clear: both;} /* Leadership Introduction --------------------------------------------- */ #page-content #leadership #leadership-intro {position: relative; display: block; clear: both;} /* Leadership Blocks ---------- */ #page-content #leadership #leadership-blocks {width: 100%; position: relative; display: block; clear: both;} #page-content #leadership #leadership-blocks .leadership-block {width: calc(100% / 4 - 19px); margin: 0 25px 25px 0; position: relative; display: block; float: left;} #page-content #leadership #leadership-blocks .leadership-block:nth-of-type(4n+4) {margin-right: 0;} #page-content #leadership #leadership-blocks .leadership-block:nth-of-type(4n+1) {clear: both;} #page-content #leadership #leadership-blocks .leadership-block .leadership-block-image {background-color: rgba(231, 237, 243, 0.5); background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 45vh; min-height: 300px; margin: 0 0 15px 0; position: relative; display: block;} #page-content #leadership #leadership-blocks .leadership-block .leadership-block-image a {background-color: #fff; padding: 10px 13px; color: #0064A5; position: absolute; bottom: 0; right: 0;} /* Meta ----- */ #page-content #leadership #leadership-blocks .leadership-block .leadership-block-meta {width: calc(100% - 30px); margin: 0 0 0 0; padding: 0; position: relative; bottom: auto; left: 0; text-align: left; z-index: 1;} #page-content #leadership #leadership-blocks .leadership-block .leadership-block-meta h3 {margin: 0 0 5px 0; font-size: clamp(15px, 1.1vw, 21px); color: #000; font-family: 'ArialNovaBold';} #page-content #leadership #leadership-blocks .leadership-block .leadership-block-meta p {margin-bottom: 0; font-size: clamp(13px, 1vw, 17px); line-height: 1.3;} /* Media Queries for Leadership ---------- */ @media only screen and (max-width: 900px) { #page-content #leadership #leadership-blocks .leadership-block {width: 48%; margin: 0 0 25px 0;} #page-content #leadership #leadership-blocks .leadership-block:nth-of-type(even) {float: right;} #page-content #leadership #leadership-blocks .leadership-block:nth-of-type(odd) {clear: both;} } @media only screen and (max-width: 450px) { #page-content #leadership #leadership-blocks .leadership-block {width: 100%; margin: 0 auto 25px auto; float: none; clear: both;} #page-content #leadership #leadership-blocks .leadership-block:nth-of-type(even) {float: none; clear: both;} #page-content #leadership #leadership-blocks .leadership-block:nth-of-type(odd) {clear: both;} } /* Call to Actions -------------------------------------------------------------------------------------------------------------------------------- */ #page-content .call-to-actions {margin: 0 auto 50px auto; padding: 0; position: relative; display: block; clear: both; list-style: none;} #page-content .call-to-actions li {background: rgb(0,100,165); background: linear-gradient(0deg, rgba(0,100,165,0) 0%, rgba(0,100,165,1) 45%); width: calc(100% / 4 - 42px); min-height: 275px; margin: 0 15px 15px 0; padding: 25px 15px; border-radius: 10px; text-align: center; position: relative; float: left;} #page-content .call-to-actions li:last-of-type {margin-right: 0;} #page-content .call-to-actions li h2 {min-height: 80px; margin-bottom: 10px; font-size: clamp(19px, 2vw, 32px); color: #fff;} #page-content .call-to-actions li p {min-height: 150px; margin-bottom: 15px; color: #fff; line-height: 1.6;} #page-content .call-to-actions li i {margin: 0 0 20px 0; font-size: clamp(30px, 3vw, 45px); color: #005eba; display: block; clear: both;} /* Media Queries for Call to Actions ---------- */ @media only screen and (max-width: 1000px) { #page-content .call-to-actions li {width: calc(48% - 30px); min-height: 150px; margin-right: 0;} #page-content .call-to-actions li:nth-of-type(even) {float: right; margin-right: 0;} #page-content .call-to-actions li:nth-of-type(odd) {clear: both;} #page-content .call-to-actions li h2 {min-height: 50px;} #page-content .call-to-actions li p {min-height: 50px;} } @media only screen and (max-width: 500px) { #page-content .call-to-actions li {width: calc(100% - 30px); margin-right: auto; clear: both;} #page-content .call-to-actions li:nth-of-type(even) {float: none; margin-right: auto; clear: both;} #page-content .call-to-actions li h2 {min-height: 25px;} } /* Content Tabs ----------------------------------------------------------------------------------------------------------------------------------- */ #page-content .content-tabs {margin: 75px 0 75px 0; position: relative; display: block; clear: both;} #page-content .content-tabs h2 {font-size: clamp(25px, 2.6vw, 38px);} #page-content .content-tabs .content-tab-introduction {max-width: 800px; margin: 0 auto; text-align: center;} /* Tab Navigation ---------- */ #page-content .content-tabs .content-tabs-navigation {margin: 0 auto 50px auto; padding: 25px 0 0 0; position: relative; text-align: center; display: block; clear: both; list-style: none; z-index: 10;} #page-content .content-tabs .content-tabs-navigation li {margin: 0 10px; position: relative; display: inline-block;} #page-content .content-tabs .content-tabs-navigation li a {background-color: rgba(0, 84, 135, 0.15); padding: 15px 25px; color: #24190c; line-height: 1; border-radius: 30px; transition: all .3s linear; text-decoration: none; display: block; font-weight: 600;} /* Hover ----- */ #page-content .content-tabs .content-tabs-navigation li a:not(.active):hover {background-color: rgba(0, 84, 135, 0.35);} /* Active ----- */ #page-content .content-tabs .content-tabs-navigation li .active {background-color: #0A2136; color: #fff;} /* Content Tab ---------- */ #page-content .content-tabs .content-tab {width: 100%; position: relative; display: block; clear: both; z-index: 0;} /* Content Tab Block ----- */ #page-content .content-tabs .content-tab .content-tab-block {background-color: #23190c; width: calc(100% / 3.13); height: 35vh; margin: 0 2% 2% 0; position: relative; display: block; float: left;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(3n+1) {clear: both;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(3n+3) {margin-right: 0;} /* Slide Image ----- */ #page-content .content-tabs .content-tab .content-tab-block .content-tab-block-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; overflow: hidden;} #page-content .content-tabs .content-tab .content-tab-block .content-tab-block-image::after {content: ''; background: linear-gradient(0deg, rgba(35,25,12,1) 15%, rgba(35,25,12,0) 100%); width: 100%; height: 50%; transition: all .5s linear; position: absolute; bottom: 0; left: 0; display: block; visibility: visible; z-index: 0;} /* Slide Meta ----- */ #page-content .content-tabs .content-tab .content-tab-block-meta {width: calc(100% - 90px); padding: 0 45px; position: absolute; bottom: 55px; left: 0; z-index: 1;} #page-content .content-tabs .content-tab .content-tab-block-meta h3 {margin: 0; font-size: clamp(16px, 1.4vw, 25px); color: #fff; font-family: 'ArialNovaBold';} /* Image / Copy ----- */ #page-content .content-tabs .content-tab .content-tab-image-copy {position: relative; display: block; clear: both;} /* Copy */ #page-content .content-tabs .content-tab .content-tab-copy {width: 50%; position: relative; display: block; float: left;} /* Image */ #page-content .content-tabs .content-tab .content-tab-image {width: 45%; display: block; float: right;} /* Recent News Article ------------------------------------------------- */ #page-content .content-tabs .content-tab .recent-news-article {background-color: #24190c; background-position: center center; background-repeat: no-repeat; background-size: cover; width: calc(40% - 1vw); height: 30vh; margin: 0 0 2vw 0; position: relative; display: block; float: right;} #page-content .content-tabs .content-tab .recent-news-article::before {content: ''; background: rgb(35,25,12); background: linear-gradient(90deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 100%); width: 70%; height: 100%; position: absolute; top: 0; left: 0; display: block;} /* First Block ---------- */ /* #page-content .content-tabs .content-tab .recent-news-article:first-of-type {width: calc(60% - 1vw); height: calc(60vh + 2vw); margin-bottom: 0; float: left;} #page-content .content-tabs .content-tab .recent-news-article:first-of-type::before {content: ''; background: rgb(35,25,12); background: linear-gradient(30deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 70%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; display: block;} #page-content .content-tabs .content-tab .recent-news-article:first-of-type .vert-center {top: auto; transform: translateY(0);} */ #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+1) {width: calc(60% - 1vw); height: calc(60vh + 2vw); float: left;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+1)::before {content: ''; background: rgb(35,25,12); background: linear-gradient(30deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 70%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; display: block;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+1) .vert-center {top: auto; transform: translateY(0);} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+1) .recent-news-article-meta {position: absolute; bottom: 30px;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+2) {} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+3) {} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+4) {width: calc(60% - 1vw); height: calc(60vh + 2vw); float: right;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+4)::before {content: ''; background: rgb(35,25,12); background: linear-gradient(30deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 70%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; display: block;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+4) .vert-center {top: auto; transform: translateY(0);} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+4) .recent-news-article-meta {position: absolute; bottom: 30px;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+5) {float: left;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+6) {float: left;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+7) {width: calc(60% - 1vw); height: calc(60vh + 2vw); float: left;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+7)::before {content: ''; background: rgb(35,25,12); background: linear-gradient(30deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 70%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; display: block;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+7) .vert-center {top: auto; transform: translateY(0);} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+7) .recent-news-article-meta {position: absolute; bottom: 30px;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+8) {} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+9) {} /* Recent News Article Meta ----- */ #page-content .content-tabs .content-tab .recent-news-article-meta {margin: 0; padding: 0 60px; position: relative; display: block; z-index: 1;} #page-content .content-tabs .content-tab .recent-news-article-meta h3 {max-width: 80%; font-size: clamp(15px, 1.2vw, 27px); color: #fff; line-height: 1.3; display: block; clear: both; font-family: 'ArialNovaBold';} #page-content .content-tabs .content-tab .recent-news-article:first-of-type .recent-news-article-meta h3 {font-size: clamp(18px, 1.5vw, 32px);} #page-content .content-tabs .content-tab .recent-news-article-meta p {margin: 0 0 10px 0; font-size: clamp(13px, 1vw, 18px); color: #fff; line-height: 1.3; text-transform: uppercase; display: block; clear: both; font-family: 'ArialNovaBold';} /* Media Queries for Content Tabs */ @media only screen and (max-width: 1100px) { /* Tab Navigation ---------- */ #page-content .content-tabs .content-tabs-navigation li {margin: 0 5px;} /* Content Tab Block ----- */ #page-content .content-tabs .content-tab .content-tab-block {width: calc(98% / 2); height: 40vh; margin: 0 0 2% 0;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(3n+1) {clear: none;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(3n+3) {margin-right: 0;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(even) {float: right;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(odd) {clear: both;} } @media only screen and (max-width: 900px) { /* Recent News Article ------------------------------------------------- */ #page-content .content-tabs .content-tab .recent-news-article {width: 49%; height: 40vh; margin: 0 0 2vw 0; float: left;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(even) {float: right;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(odd) {clear: both;} #page-content .content-tabs .content-tab .recent-news-article::before {content: ''; background: rgb(35,25,12); background: linear-gradient(30deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 70%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; display: block;} #page-content .content-tabs .content-tab .recent-news-article .vert-center {top: auto; transform: translateY(0);} /* Block Pattern ---------- */ #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+1) {width: 49%; height: 40vh; float: left;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+4) {width: 49%; height: 40vh; float: right;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+5) {float: left;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+6) {float: right;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+7) {width: 49%; height: 40vh; float: left;} /* Recent News Article Meta ----- */ #page-content .content-tabs .content-tab .recent-news-article-meta {position: absolute; bottom: 30px;} #page-content .content-tabs .content-tab .recent-news-article-meta h3 {max-width: none;} #page-content .content-tabs .content-tab .recent-news-article:first-of-type .recent-news-article-meta h3 {font-size: clamp(15px, 1.2vw, 27px);} } @media only screen and (max-width: 700px) { /* Tab Navigation ---------- */ #page-content .content-tabs .content-tabs-navigation {margin: 0 auto 40px auto;} #page-content .content-tabs .content-tabs-navigation li {margin: 0 3px 10px 3px;} /* Content Tab Block ----- */ #page-content .content-tabs .content-tab .content-tab-block {width: 100%; height: 40vh; margin: 0 auto 2% auto; float: none; clear: both;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(3n+1) {clear: both;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(3n+3) {margin-right: auto;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(even) {float: none;} #page-content .content-tabs .content-tab .content-tab-block:nth-child(odd) {clear: both;} /* Image / Copy ----- */ /* Copy */ #page-content .content-tabs .content-tab .content-tab-copy {width: 100%; float: none; clear: both;} /* Image */ #page-content .content-tabs .content-tab .content-tab-image {width: 100%; margin: 0 auto 15px auto; float: none; clear: both;} /* Recent News Article ------------------------------------------------- */ #page-content .content-tabs .content-tab .recent-news-article {width: 100%; height: 40vh; float: none; clear: both;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(even) {float: none;} /* Block Pattern ---------- */ #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+1) {width: 100%; float: none;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+4) {width: 100%; float: none;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+5) {float: none;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+6) {float: none;} #page-content .content-tabs .content-tab .recent-news-article:nth-of-type(9n+7) {width: 100%; float: none;} /* Recent News Article Meta ----- */ #page-content .content-tabs .content-tab .recent-news-article-meta {bottom: 25px;} #page-content .content-tabs .content-tab .recent-news-article-meta {padding: 0 25px;} } @media only screen and (max-width: 600px) { /* Tab Navigation ---------- */ #page-content .content-tabs .content-tabs-navigation {margin: 0 auto 5px auto;} #page-content .content-tabs .content-tabs-navigation li {width: 48%; margin: 0 0 4% 0; display: block; float: left;} #page-content .content-tabs .content-tabs-navigation li:nth-of-type(even) {float: right;} #page-content .content-tabs .content-tabs-navigation li:nth-of-type(odd) {clear: both;} /* Content Tab Block ----- */ #page-content .content-tabs .content-tab .content-tab-block {height: 40vh;} } /* Image Call to Action --------------------------------------------------------------------------------------------------------------------------- */ #page-content .image-call-to-action {padding: 75px 0; position: relative; display: block; clear: both;} #page-content .image-call-to-action.blue {background-color: #0A2136;} /* Image ----- */ #page-content .image-call-to-action .image-call-to-action-image {width: 60%; position: relative; display: block; float: left;} #page-content .image-call-to-action.right .image-call-to-action-image {float: right;} #page-content .image-call-to-action img {display: block;} /* Content ----- */ #page-content .image-call-to-action .image-call-to-action-content {width: 35%; position: relative; display: block; float: right;} #page-content .image-call-to-action.right .image-call-to-action-content {float: left;} #page-content .image-call-to-action.blue .image-call-to-action-content h2 {color: #fff;} #page-content .image-call-to-action.blue .image-call-to-action-content p {color: #fff;} #page-content .image-call-to-action-content ol {margin: 0 0 35px 0; padding: 0; counter-reset: item; list-style: none;} #page-content .image-call-to-action-content ol li {margin: 0 0 25px 0; padding: 0 0 0 50px; line-height: 1.4; text-indent: -50px; counter-increment: item;} #page-content .image-call-to-action-content ol li::before {content: counter(item); background: #0A2136; width: 40px; height: 40px; margin-right: 10px; font-size: 14px; line-height: 40px; color: #fff; text-align: center; text-indent: 0; border-radius: 50%; display: inline-block;} /* Media Queries for Image Call to Action */ @media only screen and (max-width: 1100px) { /* Image ----- */ #page-content .image-call-to-action .image-call-to-action-image {width: 50%;} /* Content ----- */ #page-content .image-call-to-action .image-call-to-action-content {width: 45%;} } @media only screen and (max-width: 900px) { /* Image ----- */ #page-content .image-call-to-action .image-call-to-action-image {width: 40%;} /* Content ----- */ #page-content .image-call-to-action .image-call-to-action-content {width: 55%;} } @media only screen and (max-width: 800px) { /* Image ----- */ #page-content .image-call-to-action .image-call-to-action-image {width: 100%; margin: 0 0 25px 0; float: none; clear: both;} /* Content ----- */ #page-content .image-call-to-action .image-call-to-action-content {width: 100%; float: none; clear: both;} } /* Side Carousel ---------------------------------------------------------------------------------------------------------------------------------- */ #page-content .side-carousel {padding: 75px 0; position: relative; display: block; clear: both;} /* Side Carousel Introduction ---------- */ #page-content .side-carousel .side-carousel-intro {width: calc(32% - 120px); margin: 0 0 0 120px; padding: 50px 0; position: relative; display: block; float: left;} #page-content .side-carousel.dark .side-carousel-intro h2 {color: #fff;} #page-content .side-carousel.dark .side-carousel-intro p {color: #fff;} /* Side Carousel Slides ---------- */ #page-content .side-carousel .side-carousel-slides {width: 60%; position: relative; display: block; float: right;} /* Slide ----- */ #page-content .side-carousel .side-carousel-slides .side-carousel-slide {background-color: #23190c; width: 75%; height: 60vh; min-height: 300px; margin: 0 5% 0 0; position: relative; display: block; float: left;} /* Slide Image ----- */ #page-content .side-carousel .side-carousel-slides .side-carousel-slide .side-carousel-slide-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; overflow: hidden;} #page-content .side-carousel .side-carousel-slides .side-carousel-slide .side-carousel-slide-image::after {content: ''; background: linear-gradient(0deg, rgba(35,25,12,1) 15%, rgba(35,25,12,0) 100%); width: 100%; height: 50%; transition: all .5s linear; position: absolute; bottom: 0; left: 0; display: block; visibility: visible; z-index: 0;} #page-content .side-carousel.dark .side-carousel-slides .side-carousel-slide .side-carousel-slide-image::after {background: linear-gradient(0deg, rgba(255,255,255,1) 15%, rgba(255,255,255,0) 100%);} /* Slide Meta ----- */ #page-content .side-carousel .side-carousel-slides .side-carousel-slide .side-carousel-slide-meta {width: calc(100% - 90px); padding: 0 45px; position: absolute; bottom: 55px; left: 0; z-index: 1;} #page-content .side-carousel .side-carousel-slides .side-carousel-slide .side-carousel-slide-meta h3 {margin: 0; font-size: clamp(16px, 1.4vw, 25px); color: #fff; font-family: 'ArialNovaBold';} #page-content .side-carousel .side-carousel-slides .side-carousel-slide .side-carousel-slide-meta p {color: #fff;} #page-content .side-carousel.dark .side-carousel-slides .side-carousel-slide .side-carousel-slide-meta h3 {color: #23190c;} /* Navigation ----- */ #page-content .side-carousel .side-carousel-slides .flickity-page-dots {margin: 0; padding: 25px 0 0 0; text-align: left; position: relative; bottom: auto; display: block; clear: both;} #page-content .side-carousel .side-carousel-slides .flickity-page-dots li {background-color: #0A2136; margin: 0 10px 0 0;} #page-content .side-carousel.dark .side-carousel-slides .flickity-page-dots li {background-color: #fff;} #page-content .side-carousel .side-carousel-slides .flickity-page-dots .dot.is-selected {} /* Media Queries for Side Carousel */ @media only screen and (max-width: 1100px) { /* Side Carousel Introduction ---------- */ #page-content .side-carousel .side-carousel-intro {width: calc(42% - 120px);} /* Side Carousel Slides ---------- */ #page-content .side-carousel .side-carousel-slides {width: 50%;} /* Slide ----- */ #page-content .side-carousel .side-carousel-slides .side-carousel-slide {width: 85%; height: 60vh; margin: 0 3% 0 0;} } @media only screen and (max-width: 900px) { /* Side Carousel Introduction ---------- */ #page-content .side-carousel .side-carousel-intro {width: calc(45% - 60px); margin: 0 0 0 60px;} } @media only screen and (max-width: 800px) { /* Side Carousel Introduction ---------- */ #page-content .side-carousel .side-carousel-intro {width: calc(100% - 50px); margin: 0 25px 0 25px; padding: 30px 0; float: none; clear: both;} /* Side Carousel Slides ---------- */ #page-content .side-carousel .side-carousel-slides {width: 100%; float: none; clear: both;} /* Slide ----- */ #page-content .side-carousel .side-carousel-slides .side-carousel-slide {width: 85%; height: 55vh;} /* Navigation ----- */ #page-content .side-carousel .side-carousel-slides .flickity-page-dots {margin: 0 auto; padding: 25px 25px 0 25px;} } @media only screen and (max-width: 500px) { /* Slide ----- */ #page-content .side-carousel .side-carousel-slides .side-carousel-slide {height: 45vh;} } /* Block Side Carousel ---------------------------------------------------------------------------------------------------------------------------- */ #page-content .side-carousel.block {padding: 75px 0; position: relative; display: block; clear: both;} /* Side Carousel Introduction ---------- */ #page-content .side-carousel.block .side-carousel-intro {width: calc(32% - 120px); margin: 0 0 0 120px; padding: 0 0; position: relative; display: block; float: left;} /* Side Carousel Slides ---------- */ #page-content .side-carousel.block .side-carousel-slides {width: 60%; padding: 50px 0; position: relative; display: block; float: right;} /* Slide ----- */ #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide {background-color: #fff; width: calc(100% / 3); height: auto; min-height: 75px; margin: 0 5% 0 0; padding: 75px 0 75px 0; border-top: 5px solid #015486; position: relative; display: block; float: left;} /* Slide Image ----- */ #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide .side-carousel-slide-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block;} #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide .side-carousel-slide-image::after {content: none;} /* Slide Meta ----- */ #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide .side-carousel-slide-meta {width: calc(100% - 90px); padding: 0 45px; position: relative; bottom: auto; left: auto; text-align: center; z-index: 1;} #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide .side-carousel-slide-meta h3 {margin: 0; font-size: clamp(16px, 1.2vw, 24px); line-height: 1.5; color: #000; font-family: 'ArialNovaBold';} #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide .side-carousel-slide-meta h3 i {margin: 0 auto 10px auto; font-size: clamp(22px, 2vw, 40px); line-height: 1; color: #862e16; display: block; clear: both;} #page-content .side-carousel.block .side-carousel-slides .flickity-page-dots {margin: 0; padding: 25px 0 0 0; text-align: left; position: relative; bottom: auto; display: block; clear: both;} #page-content .side-carousel.block .side-carousel-slides .flickity-page-dots li {background-color: #0A2136; margin: 0 10px 0 0;} #page-content .side-carousel.block .side-carousel-slides .flickity-page-dots .dot.is-selected {} /* Media Queries for Block Side Carousel */ @media only screen and (max-width: 1100px) { /* Side Carousel Introduction ---------- */ #page-content .side-carousel.block .side-carousel-intro {width: calc(42% - 75px); margin: 0 0 0 75px;} /* Side Carousel Slides ---------- */ #page-content .side-carousel.block .side-carousel-slides {width: 50%;} /* Slide ----- */ #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide {width: calc(100% / 2);} } @media only screen and (max-width: 1000px) { /* Side Carousel Introduction ---------- */ #page-content .side-carousel.block .side-carousel-intro {width: calc(42% - 25px); margin: 0 0 0 25px;} /* Slide ----- */ #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide {width: 75%;} } @media only screen and (max-width: 800px) { /* Side Carousel Introduction ---------- */ #page-content .side-carousel.block .side-carousel-intro {width: calc(100% - 75px); margin: 0 auto 0 auto; float: none; clear: both;} /* Side Carousel Slides ---------- */ #page-content .side-carousel.block .side-carousel-slides{width: 100%; float: none; clear: both;} /* Slide ----- */ #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide {width: calc(95% / 2); margin-right: 3%;} #page-content .side-carousel.block .side-carousel-slides .flickity-page-dots {padding: 25px 0 0 25px;} } @media only screen and (max-width: 600px) { #page-content .side-carousel.block {padding: 75px 0 25px 0} /* Slide ----- */ #page-content .side-carousel.block .side-carousel-slides .side-carousel-slide {width: 88%; margin-right: 3%;} } /* Smaller Side Carousel -------------------------------------------------------------------------------------------------------------------------- */ #page-content .smaller-side-carousel {padding: 25px 0; position: relative; display: block; clear: both;} /* Side Carousel Introduction ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-intro {width: 35%; margin: 0 0 0 0; padding: 50px 0; position: relative; display: block; float: left;} #page-content .smaller-side-carousel .smaller-side-carousel-intro h2{} #page-content .smaller-side-carousel .smaller-side-carousel-intro p {} /* Side Carousel Slides ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides {width: calc(60% + 112px); margin: 0 -112px 0 0; position: relative; display: block; float: right;} /* Slide ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide {width: calc(100% / 3); margin: 0 5% 0 0; position: relative; display: block; float: left;} /* Slide Image ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide .smaller-side-carousel-slide-image {background-color: rgba(231, 237, 243, 0.5); background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 45vh; margin: 0 0 15px 0; position: relative; display: block;} #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide .smaller-side-carousel-slide-image a {background-color: #fff; padding: 10px 13px; position: absolute; bottom: 0; right: 0;} /* Slide Meta ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide .smaller-side-carousel-slide-meta {width: calc(100% - 30px); margin: 0 0 0 0; padding: 0; position: relative; bottom: auto; left: 0; text-align: left; z-index: 1;} #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide .smaller-side-carousel-slide-meta h3 {margin: 0 0 5px 0; font-size: clamp(15px, 1.1vw, 21px); color: #000; font-family: 'ArialNovaBold';} #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide .smaller-side-carousel-slide-meta p {font-size: clamp(13px, 1vw, 17px); line-height: 1.3;} /* See All Block */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide.see-all .smaller-side-carousel-slide-meta {background-color: #83a0ba; height: 45vh;} #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide.see-all .smaller-side-carousel-slide-meta h3 {font-size: clamp(15px, 1vw, 19px); color: #fff; text-align: center; font-weight: 600;} #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide.see-all .smaller-side-carousel-slide-meta p {color: #fff; text-align: center;} #page-content .smaller-side-carousel .smaller-side-carousel-slides .flickity-page-dots {margin: 0; padding: 25px 0 0 0; text-align: left; position: relative; bottom: auto; display: block; clear: both;} #page-content .smaller-side-carousel .smaller-side-carousel-slides .flickity-page-dots li {background-color: #0A2136; margin: 0 10px 0 0;} #page-content .smaller-side-carousel .smaller-side-carousel-slides .flickity-page-dots .dot.is-selected {} /* Media Queries for Smaller Side Carousel */ @media only screen and (max-width: 1000px) { #page-content .smaller-side-carousel::before{width: calc(42% + 25px);} /* Side Carousel Introduction ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-intro {width: calc(42% - 25px); margin: 0 0 0 25px; padding: 50px 0;} /* Side Carousel Slides ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides {width: 50%;} /* Slide ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide {width: calc(100% / 2); margin: 0 3% 0 0;} } @media only screen and (max-width: 800px) { /* Side Carousel Introduction ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-intro {width: calc(42% - 25px); margin: 0 0 0 25px; padding: 50px 0;} /* Side Carousel Slides ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides {width: 50%;} /* Slide ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide {width: 75%; margin: 0 3% 0 0;} } @media only screen and (max-width: 700px) { #page-content .smaller-side-carousel::before{width: 100%; height: 50%; min-height: 400px;} /* Side Carousel Introduction ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-intro {width: calc(100% - 75px); margin: 0 auto; padding: 0 25px 50px 25px; float: none; clear: both;} /* Side Carousel Slides ---------- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides {width: 100%; float: none; clear: both;} /* Slide ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide {width: calc(100% / 3); margin: 0 3% 0 0;} } @media only screen and (max-width: 600px) { /* Slide ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide {width: calc(93% / 2);} } @media only screen and (max-width: 500px) { #page-content .smaller-side-carousel {padding: 75px 0 25px 0;} /* Slide ----- */ #page-content .smaller-side-carousel .smaller-side-carousel-slides .smaller-side-carousel-slide {width: 75%;} } /* Full Bleed Call to Action ---------------------------------------------------------------------------------------------------------------------- */ #page-content .full-bleed-call-to-action {background-position: center center; background-repeat: no-repeat; background-size: cover; margin: 0; padding: 75px 0; position: relative; display: block; clear: both;} /* Full Bleed Call to Action Content ---------- */ #page-content .full-bleed-call-to-action-content {background-color: rgba(255, 255, 255, 0.95); width: calc(35% - 120px); max-width: 345px; margin: 0 75px 0 0; padding: 70px 60px; position: relative; display: block; float: right;} /* Media Queries for Full Bleed Call to Action ---------- */ @media only screen and (max-width: 1000px) { /* Full Bleed Call to Action Content ---------- */ #page-content .full-bleed-call-to-action-content {width: calc(50% - 120px); max-width: 500px; margin: 0 75px 0 0;} } @media only screen and (max-width: 800px) { /* Full Bleed Call to Action Content ---------- */ #page-content .full-bleed-call-to-action-content {width: calc(80% - 120px); max-width: 600px; margin: 0 auto; float: none;} } @media only screen and (max-width: 600px) { /* Full Bleed Call to Action Content ---------- */ #page-content .full-bleed-call-to-action-content {width: calc(100% - 150px); max-width: none; padding: 25px 25px;} } /* Video Block ------------------------------------------------------------------------------------------------------------------------------------ */ #page-content .video-block {background-color: #23190d; margin: 0; padding: 75px 0; position: relative; display: block; clear: both;} #page-content .video-block h2 {text-align: center; color: #fff;} /* Video Block Embed ---------- */ #page-content .video-block .video-block-embed {max-width: 100%; height: auto; padding-bottom: 56.25%; position: relative; overflow: hidden; display: block; clear: both;} #page-content .video-block .video-block-embed iframe, #page-content .video-block object .video-block-embed, #page-content .video-block .video-block-embed embed {width: 100%; height: 100%; position: absolute; top: 0; left: 0;} /* Featured Blocks -------------------------------------------------------------------------------------------------------------------------------- */ #page-content .featured-blocks {padding: 100px 0; position: relative; display: block; clear: both;} /* Featured Blocks Introduction ---------------------------------------- */ #page-content .featured-blocks .featured-blocks-intro {position: relative; display: block; clear: both;} /* Featured Blocks Container ------------------------------------------- */ #page-content .featured-blocks .featured-blocks-container {position: relative; display: block; clear: both;} /* Featured Block ---------- */ #page-content .featured-blocks .featured-blocks-container .featured-block {background-color: #fff; width: calc(100% / 3 - 1.4%); margin: 0 2% 2% 0; position: relative; display: block; float: left;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(3n+1) {clear: both;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(3n+3) {margin-right: 0;} /* Featured Block Image ---------- */ #page-content .featured-blocks .featured-blocks-container .featured-block .featured-block-image {background-position: center center; background-repeat: no-repeat; background-size: cover; height: 30vh; min-height: 250px; position: relative; display: block; clear: both;} #page-content .featured-blocks .featured-blocks-container .featured-block .featured-block-meta {padding: 35px 25px; display: block; clear: both;} /* Media Queries for Featured Blocks ---------- */ @media only screen and (max-width: 1100px) { /* Featured Block ---------- */ #page-content .featured-blocks .featured-blocks-container .featured-block {width: 49%; margin: 0 0 2% 0; float: left;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(3n+1) {clear: none;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(3n+3) {margin-right: 0;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(even) {margin-right: 0; float: right;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(odd) {clear: both;} } @media only screen and (max-width: 700px) { #page-content .featured-blocks {padding: 0;} /* Featured Block ---------- */ #page-content .featured-blocks .featured-blocks-container .featured-block {width: 100%; margin: 0 auto 25px auto; float: none; clear: both;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(3n+1) {clear: both;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(3n+3) {margin-right: auto;} #page-content .featured-blocks .featured-blocks-container .featured-block:nth-of-type(even) {margin-right: auto; float: none;} } /* Hero Content Introduction ---------------------------------------------------------------------------------------------------------------------- */ .hero-content-intro {margin: -75px auto 0 auto; padding: 0 0 75px 0; position: relative; display: block; clear: both; z-index: 10;} /* Mission Moment Image ---------- */ .hero-content-intro-image {width: 59%; height: 60vh; min-height: 350px; position: relative; display: block; float: left;} /* Mission Moment Copy ---------- */ .hero-content-intro-copy {background-color: #fbfbfc; width: calc(38% - 90px); padding: 45px 45px 45px 45px; position: relative; display: block; float: right;} .hero-content-intro-copy h2 {margin: 0 0 15px 0; font-size: clamp(19px, 2.1vw, 43px) /* 25px */; line-height: 1.3; color: #130c02; display: block; clear: both;} .hero-content-intro-copy p {margin: 0 0 15px 0; font-size: clamp(14px, 1.2vw, 20px) /* 17px */; line-height: 1.6; color: #130c02; display: block; clear: both;} .hero-content-intro-copy p:last-of-type {margin-bottom: 45px;} /* Media Queries for Hero Content Introduction ---------- */ @media only screen and (max-width: 1100px) { /* Mission Moment Image ---------- */ .hero-content-intro-image {width: 49%; height: 60vh;} /* Mission Moment Copy ---------- */ .hero-content-intro-copy {width: calc(48% - 90px);} } @media only screen and (max-width: 750px) { /* Mission Moment Image ---------- */ .hero-content-intro-image {width: 100%; height: 60vh; float: none; clear: both;} /* Mission Moment Copy ---------- */ .hero-content-intro-copy {width: calc(100% - 90px); padding: 25px 45px 25px 45px; float: none; clear: both;} } @media only screen and (max-width: 500px) { /* Mission Moment Image ---------- */ .hero-content-intro-image {height: 50vh;} /* Mission Moment Copy ---------- */ .hero-content-intro-copy {width: calc(100% - 30px); padding: 25px 15px 25px 15px;} } /* Careers ---------------------------------------------------------------------------------------------------------------------------------------- */ /* Filter Navigation --------------------------------------------------- */ #page-content .button-navigation {margin: 0 auto 50px auto; padding: 25px 0 0 0; position: relative; text-align: center; display: block; clear: both; list-style: none; z-index: 10;} #page-content .button-navigation li {margin: 0 10px; position: relative; display: inline-block;} #page-content .button-navigation li a {background-color: rgba(0, 84, 135, 0.15); padding: 15px 25px; color: #24190c; line-height: 1; border-radius: 30px; transition: all .3s linear; text-decoration: none; display: block; font-weight: 600;} /* Hover ----- */ #page-content .button-navigation li a:not(.active):hover {background-color: rgba(0, 84, 135, 0.35);} /* Active ----- */ #page-content .button-navigation li a.active {background-color: #0A2136; color: #fff;} /* Career Block -------------------------------------------------------- */ #page-content .career-block {width: 100%; margin: 0 0 0 0; padding: 35px 0; border-top: 1px solid #d2d2d2; position: relative; display: block; clear: both;} /* Slide Meta ----- */ #page-content .career-block .career-block-meta {position: relative; display: block; clear: both;} #page-content .career-block .career-block-meta h3 {margin: 0 0 5px 0; font-size: clamp(16px, 1.2vw, 24px); line-height: 1.5; color: #000; font-family: 'ArialNovaBold';} #page-content .career-block .career-block-meta p {margin: 0; font-size: clamp(13x, 1.1vw, 17px); line-height: 1; display: block; clear: both;} #page-content .career-block .career-block-meta i {width: 40px; height: 40px; font-size: 16px; line-height: 40px; color: #7c351f; border: 1px solid #7c351f; border-radius: 50%; text-align: center; transition: all .3s linear; position: absolute; top: 0; right: 0; display: block;} /* Hover ----- */ #page-content .career-block:hover .career-block-meta i {background-color: #7c351f; color: #fff;} /* Events ----------------------------------------------------------------------------------------------------------------------------------------- */ /* Event Block --------------------------------------------------------- */ #page-content .event-block {width: calc(100% - 50px); margin: 0 auto 5px auto; padding: 20px 25px 20px 25px; border-radius: 10px; position: relative; display: block; clear: both;} #page-content .event-block:nth-of-type(odd) {background-color: rgba(231, 237, 243, 0.5);} /* Event Image ----- */ #page-content .event-block .event-image {background-position: center center; background-repeat: no-repeat; background-size: contain; width: 20%; height: 10vh; min-height: 100px; max-height: 150px; border-radius: 10px; position: relative; transition: all .3s linear; display: block; float: left;} /* Event Copy ----- */ #page-content .event-block .event-copy {width: calc(80% - 300px); margin: 0; padding: 0 0 0 75px; position: relative; display: block; float: left;} #page-content .event-block .event-copy h3 {margin: 0 0 15px 0; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.4; color: #000; display: block; clear: both; font-weight: 600;} #page-content .event-block .event-copy p {margin: 0 0 35px 0; font-size: clamp(15px, 1vw, 20px); line-height: 1.6; display: block; clear: both;} #page-content .event-block .event-copy .event-meta {margin: 0 0 35px 0; padding: 0; position: relative; display: block; clear: both; list-style: none;} #page-content .event-block .event-copy .event-meta li {position: relative; display: block; float: left;} #page-content .event-block .event-copy .event-meta li::after {content: '|'; padding: 0 10px; position: relative; display: inline-block;} #page-content .event-block .event-copy .event-meta li:last-child::after {content: none;} #page-content .event-block .event-copy .event-meta li.booth {color: #005eba; font-family: 'ArialNovaBold';} /* Button ----- */ #page-content .event-block .button {margin: 7px 0 0 0; float: right;} /* Media Queries for Events */ @media only screen and (max-width: 950px) { /* Event Copy ----- */ #page-content .event-block .event-copy {width: calc(80% - 25px); padding-left: 25px;} /* Button ----- */ #page-content .event-block .button {margin: 7px 0 0 0; float: none; clear: both;} } @media only screen and (max-width: 700px) { #page-content .event-block {text-align: center;} /* Event Image ----- */ #page-content .event-block .event-image {width: 100%; margin: 0 auto 25px auto; float: none; clear: both;} /* Event Copy ----- */ #page-content .event-block .event-copy {width: 100%; padding-left: 0; text-align: center;} #page-content .event-block .event-copy .event-meta {margin: 0 auto 25px auto; text-align: center;} #page-content .event-block .event-copy .event-meta li {display: inline-block; float: none;} /* Button ----- */ #page-content .event-block .button {margin: 7px auto 0 auto; float: none; clear: both;} } /* Distributors ----------------------------------------------------------------------------------------------------------------------------------- */ #page-content #distributors {margin: 0; padding: 0; position: relative; display: block; clear: both; list-style: none;} #page-content #distributors li {width: calc(100% / 8 - 53px); margin: 0 60px 50px 0; position: relative; display: block; float: left;} #page-content #distributors li:nth-of-type(8n+8) {margin-right: 0;} #page-content #distributors li:nth-of-type(8n+1) {clear: both;} #page-content #distributors li a {width: 100%; height: 20vh; min-height: 100px; font-size: clamp(10px, .9vw, 14px); text-align: center; display: block;} #page-content #distributors li a .distributor-image {background-position: center center; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all .3s linear; filter: grayscale(1);} #page-content #distributors li a .functional-limitations {width: 100%; margin: 0; padding: 0; text-align: right; position: absolute; bottom: 0; right: 0;} #page-content #distributors li a .functional-limitations span {background-color: #000; width: 20px; height: 20px; border-radius: 50%; font-size: clamp(9px, .8vw, 12px); color: #fff; line-height: 20px; text-align: center; display: inline-block;} #page-content #distributors li a .functional-limitations .variable-pricing {background-color: #00ad29; width: 20px; height: 20px; border-radius: 50%; color: #fff; line-height: 20px; text-align: center;} /* Hover ----- */ #page-content #distributors li a:hover .distributor-image {filter: grayscale(0);} /* Media Queries for Distributors */ @media only screen and (max-width: 1300px) { #page-content #distributors li {width: calc(100% / 6 - 50px);} #page-content #distributors li:nth-of-type(8n+8) {margin-right: 60px;} #page-content #distributors li:nth-of-type(8n+1) {clear: none;} #page-content #distributors li:nth-of-type(6n+6) {margin-right: 0;} #page-content #distributors li:nth-of-type(6n+1) {clear: both;} } @media only screen and (max-width: 900px) { #page-content #distributors li {width: calc(100% / 4 - 45px);} #page-content #distributors li:nth-of-type(6n+6) {margin-right: 60px;} #page-content #distributors li:nth-of-type(6n+1) {clear: none;} #page-content #distributors li:nth-of-type(4n+4) {margin-right: 0;} #page-content #distributors li:nth-of-type(4n+1) {clear: both;} } @media only screen and (max-width: 500px) { #page-content #distributors li {width: calc(100% / 2 - 30px);} #page-content #distributors li:nth-of-type(6n+6) {margin-right: 0;} #page-content #distributors li:nth-of-type(4n+1) {clear: none;} #page-content #distributors li:nth-of-type(even) {float: right; margin-right: 0;} #page-content #distributors li:nth-of-type(odd) {clear: both;} } /* Video Block ------------------------------------------------------------------------------------------------------------------------------------ */ .video {margin: 0; padding: 0 0 25px 0; position: relative; display: block; clear: both;} .video h2 {margin: 0 0 40px 0; font-size: clamp(21px, 2.9vw, 45px); color: #00B5C2; text-align: center;} /* Video Block Embed ---------- */ .video .video-container {width: 100%; padding-top: 56.25%; position: relative; border-radius: 10px; overflow: hidden; display: block; clear: both; cursor: pointer;} .video .video-container iframe {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} /* Play Button ----- */ .video .video-container button {background-color: #00B5C2; width: 90px; height: 90px; text-align: center; border: none; border-radius: 50%; outline: none; position: absolute; top: calc(50% - 45px); left: calc(50% - 45px); z-index: 10; cursor: pointer; transition: all .3s linear; cursor: pointer;} .video .video-container button i {font-size: 16px; line-height: 1; color: #fff;} .video .video-container:hover button {background-color: #6CD7E0; transform: scale(1.1);} /* Video Poster ----- */ .video .video-container .video-poster {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; z-index: 8;} /* Resources Landing ------------------------------------------------------------------------------------------------------------------------------ */ #page-content #news-posts {display: block; clear: both;} #page-content #news-posts ul {margin: 0; padding: 25px 0 0 0; display: block; clear: both;} #page-content #news-posts ul li {width: calc(100% / 3 - 34px); margin: 0 50px 75px 0; position: relative; display: block; float: left;} #page-content #news-posts ul li:nth-child(3n+3) {margin-right: 0;} #page-content #news-posts ul li:nth-child(3n+1) {clear: both;} #page-content #news-posts ul li h3 {margin: 0 0 25px 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.4; color: #000; display: block; clear: both;} #page-content #news-posts ul li h3 a{padding: 0 60px 0 0; color: #000; text-decoration: none; position: relative; display: block;} #page-content #news-posts ul li h3 a::after {content: '\f054'; background: url(images/resource-link-shape.svg) no-repeat center center; background-size: contain; width: 50px; height: 50px; font-size: 15px; line-height: 50px; color: #fff; text-align: center; opacity: .5; position: absolute; top: 0; right: 0; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; transition: all .3s linear; font-weight: 600; font-family: 'Font Awesome 6 Pro';} #page-content #news-posts ul li h3 a:hover::after {opacity: 1;} /* Post Image ---------- */ #page-content #news-posts ul li .post-image {background-position: top center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 50vh; min-height: 400px; margin: 0 0 25px 0; border-radius: 5px; position: relative; display: block; clear: both;} /* Post Block Meta ----- */ #page-content #news-posts ul li .post-image .post-block-meta {background-color: #0064A5; padding: 5px 10px; font-size: clamp(10px, .9vw, 12px); color: #023f7e; border-radius: 5px; position: absolute; bottom: 8px; left: 8px; font-weight: 400;} #page-content #news-posts ul li .post-image .post-block-meta span {padding: 0 5px; color: #fff; font-weight: 600;} #page-content #news-posts ul li .post-image .post-block-meta span:first-of-type {padding-left: 0;} #page-content #news-posts ul li .post-image .post-block-meta .post-category {color: #fff;} /* Read Article ---------- */ #page-content #news-posts ul li .read-article {padding: 20px 0 10px 0; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.2; color: #0064A5; border-top: 1px solid #0064A5; transition: all .3s linear; position: relative; display: block; clear: both; font-weight: 500;} #page-content #news-posts ul li .read-article::before {content: ''; background-color: #0064A5; width: 0; height: 1px; opacity: .25; transition: all .3s linear; position: absolute; top: -1px; left: 0; display: block; z-index: -1;} #page-content #news-posts ul li .read-article::after {content: '\f054'; margin: 0; font-size: clamp(13px, 1.1vw, 15px); line-height: 1.2; color: #0064A5; vertical-align: middle; position: absolute; bottom: 12px; right: 10px; display: block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; transition: all .3s linear; font-weight: 600; font-family: 'Font Awesome 6 Pro';} /* Hover ----- */ #page-content #news-posts ul li:hover .read-article::before {width: 100%; opacity: 1;} #page-content #news-posts ul li:hover .read-article::after {right: 5px;} /* Page Navi ----------------------------------------------------------- */ .wp-pagenavi {margin: 0 auto 20px auto; padding: 25px 0; font-size: 16px; line-height: 35px; color: #666; text-align: center; border-top: 1px solid #e5e5e5; display: block; clear: both; position: relative;} .wp-pagenavi a, .wp-pagenavi span:not(.pages) {width: 35px; height: 35px; margin: 0 1%; padding: 0; color: #0A2136; border: 1px solid transparent; border-radius: 50%; text-decoration: none !important; transition: all .3s linear; display: inline-block;} .wp-pagenavi a, .wp-pagenavi span.pages {margin-right: 1%;} .wp-pagenavi a:hover, .wp-pagenavi span.current {color: #fff; border-color: #0A2136;} .wp-pagenavi span.current {background-color: #0A2136; border-color: #0A2136; color: #fff;} .wp-pagenavi .pages, .wp-pagenavi .extend, .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink, .wp-pagenavi .first, .wp-pagenavi .last {border: none;} .wp-pagenavi .nextpostslink:hover, .wp-pagenavi .first:hover, .wp-pagenavi .previouspostslink:hover {} /* Media Queries for News Landing */ @media only screen and (max-width: 900px) { #page-content #news-posts ul li {width: 47%; margin: 0 0 75px 0; float: left;} #page-content #news-posts ul li:nth-child(3n+3) {margin-right: 0;} #page-content #news-posts ul li:nth-child(3n+1) {clear: none;} #page-content #news-posts ul li:nth-child(even) {float: right;} #page-content #news-posts ul li:nth-child(odd) {clear: both;} } @media only screen and (max-width: 600px) { #page-content #news-posts ul li {width: 100%; margin: 0 auto 75px auto; float: none; clear: both;} #page-content #news-posts ul li:nth-child(3n+3) {margin-right: auto;} #page-content #news-posts ul li:nth-child(3n+1) {clear: both;} #page-content #news-posts ul li:nth-child(even) {float: none;} } /* News Single ------------------------------------------------------------------------------------------------------------------------------------ */ /* Single Post Featured Image ------------------------------------------ */ #page-content #single-post-featured-image {margin: 0 0 25px 0; position: relative; display: block; clear: both;} /* Post Block Meta ---------- */ #page-content #post-block-meta {font-size: clamp(12px, .9vw, 14px); color: #0A2136; position: relative; display: block; clear: both; font-weight: 400;} #page-content #post-block-meta span {padding: 0 5px; font-weight: 600;} #page-content #post-block-meta span:first-of-type {padding-left: 0;} #page-content #post-block-meta .post-category {color: #0064A5;} /* Inside Article Title ---------- */ #page-content #inside-article-title {padding: 0 0 10px 0; border-bottom: 2px solid rgba(10, 33, 54, 0.2);} /* Article Clincher ---------- */ #page-content #article-clincher {padding: 25px 0; position: relative; display: block; clear: both;} #page-content #article-clincher::before {content: ''; background-color: #909FA8; width: calc(100% - 35px); height: 1px; position: absolute; top: 50%; left: 0; display: block;} #page-content #article-clincher svg {background-color: #F7F6F0; width: 25px; position: absolute; top: 0; right: 0;} #page-content #article-clincher svg path{fill: #909FA8; stroke-width: 0px;} /* Media Queries for News Single */ @media only screen and (max-width: 850px) { } /* Resources Archive ------------------------------------------------------------------------------------------------------------------------------ */ #page-content .resource-archive {margin: 0; padding: 0; position: relative; display: block; clear: both;} #page-content .resource-archive h2 {text-align: center;} #page-content .resource-archive p {margin: 0 0 45px 0; text-align: center;} #page-content .resource-archive ul {background-color: rgba(231, 237, 243, 0.5); margin: 0 0 10px 0; padding: 0; border-radius: 10px; position: relative; display: block; list-style: none;} #page-content .resource-archive ul li {margin: 0; padding: 25px 40px; border-bottom: 2px solid rgba(0, 84, 135, 0.05); position: relative; display: block; clear: both; transition: all .3s linear;} #page-content .resource-archive ul li:last-child {border-bottom: none;} #page-content .resource-archive ul li h3 {margin: 0; padding: 15px 0; font-size: clamp(16px, 1.5vw, 21px); color: #000; opacity: .5; position: relative; display: block; clear: both; cursor: pointer; transition: opacity .3s linear;} #page-content .resource-archive ul li h3::before {content: '\f078'; font-size: 16px; line-height: 1; color: #023f7e; position: absolute; top: 21px; right: 0; font-weight: 600; font-family: 'Font Awesome 6 Pro';} #page-content .resource-archive ul li p {margin: 0; text-align: left; position: relative; display: block; clear: both;} #page-content .resource-archive ul li p ~ p {padding-top: 25px;} /* Hover ---------- */ #page-content .resource-archive ul li:hover {} /* Open ---------- */ #page-content .resource-archive ul li.open {} #page-content .resource-archive ul li.open h3 {opacity: 1;} #page-content .resource-archive ul li.open h3::before {content: '\f077';} /* Media Queries for Resources Archive ---------- */ @media only screen and (max-width: 800px) { #page-content .resource-archive ul li {padding: 30px 25px 30px 50px;} } /* Member Log In ---------------------------------------------------------------------------------------------------------------------------------- */ /* Submit Button ------------------------------------------------------- */ #page-content #main-content .lwa-wrapper.lwa-bones .pixelbones .lwa-submit-button .button {background-color: #1b3359 !important; margin: 0 !important; padding: 18px 28px !important; height: auto !important; width: auto !important; font-size: 15px !important; line-height: 1 !important; color: #fff !important; text-transform: none !important; border: none !important; border-radius: 0 !important; position: relative !important; display: inline-block !important; letter-spacing: 0 !important; font-weight: 400 !important; z-index: 1;} #page-content #main-content .lwa-wrapper.lwa-bones .pixelbones .lwa-submit-button .button::after {content: none;} #page-content #main-content .lwa-wrapper.lwa-bones .pixelbones .lwa-submit-button .button:hover {background-color: #40719a !important;} /* Page Content Blocks ---------------------------------------------------------------------------------------------------------------------------- */ #page-content-blocks {position: relative; display: block; clear: both;} /* Content Block ------------------------------------------------------- */ #page-content .page-content-block {background-color: #1b3359; height: 100vh; min-height: 650px; margin: 0 0 5% 0; clear: both; position: relative; display: block; overflow: hidden;} #page-content .page-content-block .content-wrap {width: 90%; height: 100vh; min-height: 650px; margin: 0 auto;} /* Child Page Block Image ---------- */ #page-content .page-content-block .page-content-block-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 70%; height: 100%; min-height: 350px; position: absolute; top: 0; right: 0;} #page-content .page-content-block .page-content-block-image::before {content: ''; background: rgb(27,51,89); background: linear-gradient(90deg, rgba(27,51,89,1) 0%, rgba(27,51,89,0) 100%); width: 80%; height: 100%; position: absolute; top: 0; left: 0;} /* Child Page Block Content ---------- */ #page-content .page-content-block .page-content-block-content {width: 45%; max-width: 500px; padding: 0; position: relative; display: block; float: left;} #page-content .page-content-block .page-content-block-content h2 {margin: 0 0 10px 0; font-size: clamp(35px, 3.2vw, 48px) /*42px*/; line-height: 1.2; color: #fff; position: relative; display: block; clear: both; font-weight: 400;} #page-content .page-content-block .page-content-block-content p {margin: 0 0 35px 0; font-size: clamp(14px, 1.2vw, 19px) /*16px*/; line-height: 1.7; color: #fff; position: relative; display: block; clear: both;} #page-content .page-content-block .page-content-block-content .button {color: #fff;} #page-content .page-content-block .page-content-block-content .button::after {color: #fff; border-color: #fff;} #page-content .page-content-block .page-content-block-content .button:hover::after {background-color: #fff; color: #1b3359;} /* Second Child Page Block ---------------------------------------------------- */ #page-content .page-content-block:nth-of-type(3n+2) {width: 42.5%; height: 75vh; min-height: 350px; margin: 0 0 5% 5%; clear: none; float: left;} #page-content .page-content-block:nth-of-type(3n+2) .content-wrap {width: calc(100% - 50px); height: 75vh; min-height: 350px; margin: 0 auto;} /* Child Page Block Image ---------- */ #page-content .page-content-block:nth-of-type(3n+2) .page-content-block-image {width: 100%; height: 70%; display: block;} #page-content .page-content-block:nth-of-type(3n+2) .page-content-block-image::before {background: linear-gradient(0deg, rgba(27,51,89,1) 0%, rgba(27,51,89,0) 100%); width: 100%; height: 50%; top: auto; bottom: 0;} /* Child Page Block Content ---------- */ #page-content .page-content-block:nth-of-type(3n+2) .page-content-block-content {width: calc(100% - 50px); position: absolute; bottom: 50px; top: auto; transform: translateY(0); clear: both;} #page-content .page-content-block:nth-of-type(3n+2) .page-content-block-content h2 {font-size: clamp(32px, 3vw, 45px) /*40px*/;} /* Third Child Page Block ---------------------------------------------------- */ #page-content .page-content-block:nth-of-type(3n+3) {width: 42.5%; height: 75vh; min-height: 350px; margin: 0 5% 5% 0; clear: none; float: right;} #page-content .page-content-block:nth-of-type(3n+3) .content-wrap {width: calc(100% - 50px); height: 75vh; min-height: 350px; margin: 0 auto;} /* Child Page Block Image ---------- */ #page-content .page-content-block:nth-of-type(3n+3) .page-content-block-image {width: 100%; height: 70%; display: block;} #page-content .page-content-block:nth-of-type(3n+3) .page-content-block-image::before {background: linear-gradient(0deg, rgba(27,51,89,1) 0%, rgba(27,51,89,0) 100%); width: 100%; height: 50%; top: auto; bottom: 0;} /* Child Page Block Content ---------- */ #page-content .page-content-block:nth-of-type(3n+3) .page-content-block-content {width: calc(100% - 50px); position: absolute; bottom: 50px; top: auto; transform: translateY(0); clear: both;} #page-content .page-content-block:nth-of-type(3n+3) .page-content-block-content h2 {font-size: clamp(32px, 3vw, 45px) /*40px*/;} /* Media Queries for Page Content Blocks */ @media only screen and (max-width: 850px) { /* Content Block ------------------------------------------------------- */ #page-content .page-content-block {height: auto; min-height: 0; margin: 0 auto 5% auto;} #page-content .page-content-block .content-wrap {width: 90%; height: auto; min-height: 0;} /* Child Page Block Image ---------- */ #page-content .page-content-block .page-content-block-image {width: 100%; height: 50vh; position: relative; top: auto; right: auto;} #page-content .page-content-block .page-content-block-image::before {content: ''; background: rgb(27,51,89); background: linear-gradient(0deg, rgba(27,51,89,1) 25%, rgba(27,51,89,0) 100%); width: 100%; height: 35%; position: absolute; top: auto; bottom: 0; left: 0;} /* Child Page Block Content ---------- */ #page-content .page-content-block .page-content-block-content {width: calc(100% - 14vw); max-width: none; padding: 0 7vw 7vw 7vw; top: auto; transform: translateY(0); float: none; clear: both;} /* Second Child Page Block ---------------------------------------------------- */ #page-content .page-content-block:nth-of-type(3n+2) {width: 100%; height: auto; min-height: 0; margin: 0 auto 5% auto; clear: both; float: none;} #page-content .page-content-block:nth-of-type(3n+2) .content-wrap {width: 90%; height: auto; min-height: 0;} /* Child Page Block Image ---------- */ #page-content .page-content-block:nth-of-type(3n+2) .page-content-block-image {width: 100%; height: 50vh;} #page-content .page-content-block:nth-of-type(3n+2) .page-content-block-image::before {background: linear-gradient(0deg, rgba(27,51,89,1) 25%, rgba(27,51,89,0) 100%); width: 100%; height: 35%; top: auto; bottom: 0;} /* Child Page Block Content ---------- */ #page-content .page-content-block:nth-of-type(3n+2) .page-content-block-content {width: calc(100% - 50px); position: relative; bottom: auto;} /* Third Child Page Block ---------------------------------------------------- */ #page-content .page-content-block:nth-of-type(3n+3) {width: 100%; height: auto; min-height: 0; margin: 0 auto 5% auto; clear: both; float: none;} #page-content .page-content-block:nth-of-type(3n+3) .content-wrap {width: 90%; height: auto; min-height: 0;} /* Child Page Block Image ---------- */ #page-content .page-content-block:nth-of-type(3n+3) .page-content-block-image {width: 100%; height: 50vh;} #page-content .page-content-block:nth-of-type(3n+3) .page-content-block-image::before {background: linear-gradient(0deg, rgba(27,51,89,1) 25%, rgba(27,51,89,0) 100%); width: 100%; height: 35%; top: auto; bottom: 0;} /* Child Page Block Content ---------- */ #page-content .page-content-block:nth-of-type(3n+3) .page-content-block-content {width: calc(100% - 50px); position: relative; bottom: auto;} } /* Map -------------------------------------------------------------------------------------------------------------------------------------------- */ #map-view {padding: 75px 0 0 0; position: relative; display: block; clear: both;} #page-content #main-map {width: 100%; height: 100vh; padding: 0 0 0 0; position: relative; display: block; clear: both;} /* Google Marker ------------------------------------------------------------- */ #page-content #main-map .gm-style .gm-style-iw-t::after {background: linear-gradient(45deg, rgba(239, 62, 51, 1) 50%, rgba(239, 62, 51, 0) 51%, rgba(239, 62, 51, 0) 100%) !important;} #page-content #main-map .gm-style .gm-style-iw {width: 325px !important; padding: 0; display: block !important; overflow: visible;} #page-content #main-map .gm-style .gm-style-iw-d {max-height: none !important; padding: 0; overflow: hidden !important;} #page-content #main-map .gm-style .gm-style-iw-d + button {background-color: #0A2136 !important; color: #fff; opacity: 1; border-radius: 50px;} #page-content #main-map .gm-style .gm-style-iw-d + button img {opacity: 1; filter: invert(1);} #page-content #main-map .gm-style .gm-ui-hover-effect > span {background-color: #fff;} #page-content #main-map .map-card-image {background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 150px; display: block;} #page-content #main-map .map-card-content {padding: 10px 15px 0 15px;} #page-content #main-map .map-card-content h4 {margin: 0 0 5px 0; font-size: clamp(13px, 1.3vw, 19px); line-height: 1.3; color: #0A2136; position: relative; display: block; clear: both;} #page-content #main-map .map-card-content h5 {margin-bottom: 0; font-size: clamp(12px, .7vw, 15px);} #page-content #main-map .map-card-content h5 a {color: #24190c;} /* Map Card Call to Actions ---------- */ /* Map Card Call to Action Links ----- */ #page-content #main-map .map-card-cta .map-card-cta-links {width: 30%; position: relative; display: block; float: left;} #page-content #main-map .map-card-cta {margin: 0 auto; padding: 15px 15px 10px 15px;} #page-content #main-map .map-card-cta a {margin: 0 0 20px 0; font-size: 11px; line-height: 1; color: #0A2136; display: block; clear: both;} /* Map Card Call to Action Hours ----- */ #page-content #main-map .map-card-cta .map-card-cta-hours {width: 68%; position: relative; display: block; float: right;} #page-content #main-map .map-card-cta .map-card-cta-hours h5 {margin: 0 0 10px 0; font-size: 12px; line-height: 1; color: #24190c; position: relative; display: block; clear: both; font-weight: 600;} #page-content #main-map .map-card-cta .map-card-cta-hours .notes{background-color: #ffffd9; margin: 0; padding: 10px; font-size: 11px; line-height: 1.5; color: #24190c; position: relative; display: block; clear: both; font-weight: 400;} #page-content #main-map .map-card-cta .map-card-cta-hours .notes br {margin: 0 0 10px 0; display: block; clear: both;} #page-content #main-map .map-card-cta .map-card-cta-hours ul {margin: 0; padding: 0; list-style: none;} #page-content #main-map .map-card-cta .map-card-cta-hours ul li {margin: 0 0 10px 0; font-size: 11px; line-height: 1; color: #24190c; position: relative; display: block; clear: both; font-weight: 400;} #page-content #main-map .map-card-cta .map-card-cta-hours ul li.today {font-weight: 600;} /* Gallery ---------------------------------------------------------------------------------------------------------------------------------------- */ #page-content .wp-block-gallery:not(.carousel) {margin: 0 auto !important; padding: 0 0 0 0 !important; position: relative; display: block; clear: both; list-style: none;} #page-content .wp-block-gallery:not(.carousel) .wp-block-image {position: relative; display: block; overflow: hidden;} #page-content .wp-block-gallery:not(.carousel) .wp-block-image a {width: 100%; height: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 1; transition: opacity .3s linear; display: block;} #page-content .wp-block-gallery:not(.carousel) .wp-block-image a img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;} #page-content .wp-block-gallery:not(.carousel) .wp-block-image a:hover {opacity: .8;} /* 3 Images Large Left ----- */ /* Large Left */ #page-content .wp-block-gallery:not(.carousel) .wp-block-image:nth-of-type(9n+1) {width: 48.9% !important; 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:not(.carousel) .wp-block-image:nth-of-type(9n+2) {width: 48.9% !important; 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:not(.carousel) .wp-block-image:nth-of-type(9n+3) {width: 48.9% !important; 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;} /* 3 Images Large Right ------------------------------------------------- */ /* Large Right ---------- */ #page-content .wp-block-gallery:not(.carousel) .wp-block-image:nth-of-type(9n+4) {width: 48.9% !important; 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:not(.carousel) .wp-block-image:nth-of-type(9n+5) {width: 48.9% !important; 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:not(.carousel) .wp-block-image:nth-of-type(9n+6) {width: 48.9% !important; 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;} /* 2 Images ------------------------------------------------------------ */ #page-content .wp-block-gallery:not(.carousel) .wp-block-image:nth-of-type(9n+7) {width: 48.9% !important; 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:not(.carousel) .wp-block-image:nth-of-type(9n+8) {width: 48.9% !important; 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;} /* Full Width ----- */ #page-content .wp-block-gallery:not(.carousel) .wp-block-image:nth-of-type(9n+9) {width: 100% !important; height: 0; margin: 0 0 2.4% 0; padding-top: 2.4%; padding-bottom: 56.25%; position: relative; display: block; clear: both;} /* Videos ----------------------------------------------------------------------------------------------------------------------------------------- */ #page-content #videos {margin: 0 auto; padding: 25px 0 0 0; position: relative; display: block; clear: both;} /* Video Wrapper ---------- */ #page-content #videos .video-wrapper {width: 100%; max-width: 100%; margin: 0 0 15px 0; padding-top: 56.25%; position: relative; display: block; overflow: hidden;} #page-content #videos .video-wrapper iframe {width: 100%; height: 100%; border: 0; position: absolute; top: 0; left: 0;} /* Footer ----------------------------------------------------------------------------------------------------------------------------------------- */ /* Original footer {background-color: #005cb9; width: calc(100% - 150px); margin: 0 auto; padding: 0 50px 25px 50px; border-radius: 10px 10px 0 0; position: relative; display: block; clear: both; z-index: 15; overflow: hidden;} */ footer {position: relative; display: block; clear: both; z-index: 0;} /* Footer Contact ------------------------------------------------------ */ #footer-contact {width: 225px; padding: 50px 50px 0 50px; position: relative; display: block; float: left;} #footer-contact::before {content: ''; background-color: #023f7e; width: calc(100vw - 325px); height: 50%; position: absolute; bottom: 0px; right: calc(-100vw + 325px);} /* Footer Logo ---------- */ #footer-logo {width: 175px; margin: 0 0 25px 0; position: relative; display: block; clear: both;} #footer-logo span {position: absolute; left: -99999px; top: -99999px;} #footer-logo img {width: 100%; height: auto; margin: 0; display: block;} #footer-logo svg {width: 100%; height: auto; margin: 0; display: block;} #footer-logo svg path, #footer-logo svg rect, #footer-logo svg polygon {/*fill: #fff; transition: fill .5s linear;*/} /* Footer Number / Address ---------- */ #footer-number-address {} #footer-number-address p {margin: 0 0 25px 0; color: #000; display: block; clear: both; /*font-weight: 600;*/} #footer-number-address p a {color: #000;} /* Footer Social ---------- */ #footer-social {margin: 0 0 0 0; padding: 0 0 0 0; position: relative; display: block; float: left;} #footer-social li {margin: 0 20px 15px 0; position: relative; display: block; float: left;} #footer-social li a {font-size: clamp(16px, 1.4vw, 22px); line-height: 1; color: #000;} /* Footer Content ------------------------------------------------------ */ #footer-content {background-color: #023f7e; width: calc(100% - 425px); margin: 0; padding: 50px 50px 10px 50px; border-radius: 10px 0 0 0; position: relative; display: block; float: right;} #gradient #footer-content {background: none;} /* Footer Content Block ---------- */ .footer-content-block {padding: 0 0 0 0; position: relative; display: block; float: left;} .footer-content-block h3 {margin: 0 0 25px 0; padding: 0; font-size: clamp(13px, 1.1vw, 17px); line-height: 1; color: #fff; display: block; clear: both; font-family: 'ArialNovaBold';} .footer-content-block ul {} .footer-content-block ul li {width: 50%; margin: 0 0 5px 0; position: relative; display: block; float: left;} .footer-content-block ul li a {font-size: clamp(14px, 1.1vw, 18px); line-height: 1.7; color: #fff; font-weight: 400;} /* Helpful Links ---------- */ #helpful-links {width: 55%;} /* Newsletter Signup ---------- */ #newsletter {width: 40%; text-align: right; float: right;} /* Newsletter Form ---------- */ #newsletter #gform_wrapper_1 {background-color: #fff; margin: 24px 0 0 0; padding: 5px; border-radius: 5px;} /* Form Heading ----- */ #newsletter #gform_wrapper_1 .gform_heading {display: none;} /* Form Body ----- */ #newsletter #gform_wrapper_1 .gform_body {width: calc(100% - 100px); float: left;} #newsletter #gform_wrapper_1 .gform_body input {background-color: #fff; margin: 0 !important; padding: 26px 15px 27px 15px !important; font-size: clamp(11px, .9vw, 16px); line-height: 1; color: #525252; border: none; box-shadow: none; -webkit-appearance: none; border-radius: 0; font-weight: 400;} /* Form Footer ----- */ #newsletter #gform_wrapper_1 .gform_footer {width: 100px; margin: 0 !important; padding: 0 !important; float: right;} #newsletter #gform_wrapper_1 .gform_footer #gform_submit_button_1 {background-color: #7faddc; width: 100%; margin: 0 !important; padding: 20px 15px !important; font-size: clamp(11px, .9vw, 16px); line-height: 1; color: #fff; border: none; border-radius: 5px; -webkit-appearance: none; transition: all .3s linear; position: relative; font-weight: 600 !important;} #newsletter #gform_wrapper_1 .gform_footer #gform_submit_button_1::after {content: none;} #newsletter #gform_wrapper_1 .gform_footer #gform_submit_button_1:hover {background-color: #005cb9;} /* Clincher Navigation ---------- */ #clincher-navigation {margin: 0 0 0 0; padding: 50px 0 0 0; text-align: right; position: relative; display: block; clear: both;} #clincher-navigation ul {margin: 0 0 5px 0; display: block; clear: both;} #clincher-navigation ul li {margin: 0 0 0 20px; display: inline-block;} #clincher-navigation ul li::after {content: ''; background-color: #fff; width: 1px; height: 15px; position: relative; top: 4px; left: 12px; display: inline-block;} #clincher-navigation ul li:last-child::after {content: none;} #clincher-navigation li a {font-size: clamp(12px, .9vw, 14px); line-height: 1.4; color: #fff; text-decoration: underline; font-weight: 500;} /* Footer Clincher ----------------------------------------------------- */ #footer-clincher {margin: 0; padding: 0 0 0 10px; position: relative; display: inline-block;} #footer-clincher p {margin: 0 0 5px 0; padding: 0; font-size: clamp(10px, .9vw, 13px); line-height: 1.3; color: #7faddc; display: block; clear: both;} #footer-clincher p a {color: #7faddc;} /* Media Queries for Footer ---------- */ @media only screen and (max-width: 900px) { #footer-contact {width: calc(100% - 100px); height: auto; padding: 0 50px 20px 50px; float: none; text-align: center;} #footer-contact::before {content: none;} /* Footer Logo ---------- */ #footer-logo {width: 175px; margin: 0 auto 25px auto;} /* Footer Social ---------- */ #footer-social {text-align: center; float: none; clear: both;} #footer-social li {margin: 0 10px 15px 10px; position: relative; display: inline-block; float: none;} #footer-content {width: calc(100% - 100px); margin: 0; padding: 0 50px 25px 50px; text-align: center; border-radius: 0; float: none;} .footer-content-block {padding: 35px 0 0 0; float: none; clear: both;} .footer-content-block ul li {width: 100%; margin: 0 0 5px 0; display: inline-block; float: none;} /* Helpful Links ---------- */ #helpful-links {width: 100%;} /* Newsletter Signup ---------- */ #newsletter {width: 100%; text-align: center; float: none;} /* Clincher Navigation ---------- */ #clincher-navigation {padding: 50px 0 0 0; text-align: center;} } @media only screen and (max-width: 500px) { /* Clincher Navigation ---------- */ #clincher-navigation ul {display: block; clear: both;} #footer-clincher p {display: block; clear: both;} } /* Button ----------------------------------------------------------------------------------------------------------------------------------------- */ .button, #page-content .button, #page-content .wp-block-button__link, .wp-block-button__link {background-color: #005eba !important; width: auto; margin: 0; padding: 20px 40px 20px 40px !important; font-size: clamp(13px, 1.1vw, 18px) !important; line-height: 1.3 !important; color: #fff !important; text-decoration: none !important; text-transform: uppercase; border: none; border-radius: 5px; position: relative; display: inline-block; cursor: pointer; vertical-align: middle; transition: all .3s linear; appearance: none; font-family: 'ArialNovaBold'; overflow: hidden;} .button.light, #page-content .button.light, #page-content .wp-block-button__link.light {background-color: #7faedc !important;} /* .button::after, #page-content .button::after, #page-content .wp-block-button__link::after {content: '\f178'; margin: 0; font-size: 15px; line-height: 30px; color: #fff; text-align: center; vertical-align: middle; position: absolute; top: calc(50% - 15px); right: 25px; display: block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; transition: all .3s linear; font-weight: 600; font-family: 'Font Awesome 6 Pro';} .button.no-arrow::after, #page-content .button.no-arrow::after {content: none;} */ .button i, #page-content .button i, #page-content .wp-block-button__link i {font-size: 15px; line-height: 30px; color: #fff; position: absolute; top: calc(50% - 15px); right: 25px;} /* Gutenberg Button ---------- */ .wp-block-button {background: none !important;} /* Hover ---------- */ .button:hover, #page-content .button:hover, #page-content .wp-block-button__link:hover, .wp-block-button__link:hover {background-color: #7faddc !important;} .button.light:hover, #page-content .button.light:hover {background-color: #005eba !important;} /* Modals ----------------------------------------------------------------------------------------------------------------------------------------- */ .modal {background-color: #fff; width: calc(100% - 150px); max-width: 800px; padding: 0; display: none; vertical-align: middle; position: relative; z-index: 2; box-sizing: border-box; border-radius: 0px; text-align: left; z-index: 8000;} .modal.skinny {max-width: 500px;} /* Close --------------------------------------------------------------- */ .modal a.close-modal {background-color: #0064A5; width: 45px; height: 45px; text-align: center; position: absolute; top: 0; right: 0; display: block; transition: all .3s linear;} a.close-modal::before {content: '\f00d'; font-size: 20px; line-height: 45px; color: #fff; position: relative; font-weight: 300; font-family: 'Font Awesome 6 Pro';} a.close-modal:hover {background-color: #248CEA;} /* Modal Image --------------------------------------------------------- */ .modal .modal-image {background-color: #fff; background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 300px; position: relative; display: block; clear: both; z-index: 0;} .modal .modal-image::after {content: ''; background: rgb(25,11,6); background: linear-gradient(0deg, rgba(25,11,6,0.8477766106442577) 0%, rgba(25,11,6,0) 100%); width: 100%; height: 60%; position: absolute; bottom: 0; left: 0; display: block; visibility: visible; z-index: 1;} .modal .modal-image span {position: absolute; bottom: 15px; right: 15px; font-size: clamp(11px, .9vw, 15px); line-height: 1.3; color: #fff; display: block; z-index: 10;} /* Modal Content ------------------------------------------------------- */ .modal .modal-content {padding: 35px 30px 35px 30px; position: relative; display: block; clear: both;} .modal .modal-content.padding-top {padding-top: 75px;} .modal .modal-content h1, .modal .modal-content h2, .modal .modal-content h3, .modal .modal-content h4, .modal .modal-content h5, .modal .modal-content h6 {margin: 0 0 20px 0; padding: 0; line-height: 1.3; color: #000; position: relative; display: block; clear: both; font-family: 'ArialNovaBold';} .popmake-content h1, .popmake-content h2, .popmake-content h3, .popmake-content h4, .popmake-content h5, .popmake-content h6 {margin: 0 0 10px 0; padding: 0; line-height: 1.3; color: #24190c; position: relative; display: block; clear: both; font-family: 'ArialNovaBold';} .modal .modal-content h1 a, .modal .modal-content h2 a, .modal .modal-content h3 a, .modal .modal-content h4 a, .modal .modal-content h5 a, .modal .modal-content h6 a {color: #0064A5;} .popmake-content h1 a, .popmake-content h2 a, .popmake-content h3 a, .popmake-content h4 a, .popmake-content h5 a, .popmake-content h6 a {color: #0064A5;} .modal .modal-content h1, .popmake-content h1 {font-size: clamp(26px, 2.5vw, 40px) /*35px*/;} .modal .modal-content h2, .popmake-content h2 {font-size: clamp(21px, 2.2vw, 35px) /*30px*/;} .modal .modal-content h3, .popmake-content h3 {font-size: clamp(19px, 2vw, 30px) /*28px*/;} .modal .modal-content h4, .popmake-content h4 {font-size: clamp(18px, 1.8vw, 28px) /*26px*/;} .modal .modal-content h5, .popmake-content h5 {font-size: clamp(17px, 1.6vw, 26px) /*24px*/;} .modal .modal-content h6, .popmake-content h6 {font-size: clamp(16px, 1.4vw, 24px) /*22px*/;} .modal .modal-content p, .popmake-content p {margin: 0 0 25px 0; font-size: clamp(14px, 1.2vw, 18px); line-height: 1.5; color: #000;} .modal .modal-content p a, .popmake-content p a {color: #0064A5; position: relative; transition: all .3s linear; text-decoration: underline;} .modal .modal-content img, .popmake-content img {width: auto; max-width: 100%; height: auto; display: block; clear: both;} .modal .modal-content ul {} .modal .modal-content ul li {} /* Flags ---------- */ #translate-modal #flags {width: 100%; margin: 0; padding: 0 0 0 0; text-align: center; position: relative; display: block; clear: both;} #translate-modal #flags ul {width: 100%; margin: 0 auto; position: relative; display: block; float: none;} #translate-modal #flags ul li {margin: 0 1.2%; display: inline-block; float: none !important;} /* Media Queries for Translate ---------- */ @media only screen and (max-width: 1000px) { .modal {width: calc(100% - 10px);} } @media only screen and (max-width: 500px) { .modal .modal-content ul:not(#sortable) li {width: 100%; display: block; float: none; clear: both;} } /* jQuery Modal ----------------------------------------------------------------------------------------------------------------------------------- */ /* Version 0.9.1*/ .blocker{background-color: rgba(2, 64, 126, 0.65); width: 100%; height: 100%; padding:20px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; box-sizing: border-box; text-align: center; cursor: pointer; z-index: 9000;} .blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em} .blocker.behind{background-color:transparent} .modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}} /* Search ----------------------------------------------------------------------------------------------------------------------------------------- */ /* Search Container ---------------------------------------------------- */ #site-search {background-color: #fbfbfc; width: 100%; height: auto; min-height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 9000;} /* Search Form Container ----------------------------------------------- */ #search-form-container {background-color: #fff; width: 100%; padding: 15px 0; border-bottom: 1px solid #ececec; display: block; clear: both;} /* Search Form Input ---------- */ #search-form-container #searchform {width: calc(100% - 45px); margin: 0 0 0 10px; float: left;} #search-form-container #searchform input {width: calc(100% - 75px); margin: 0; padding: 10px 20px; font-size: 22px; line-height: 1; color: #777777; border: none;} /* Search Form Icon ---------- */ #search-form-icon {width: 35px; margin: 10px 0 0 0; font-size: 25px; line-height: 1; color: #999999; text-align: center; position: relative; display: block; cursor: pointer; float: left;} /* Search Close ---------- */ #search-close {width: 35px; margin: 6px 0 0 0; font-size: 30px; line-height: 1; color: #b20000; text-align: center; position: relative; display: block; float: right; cursor: pointer;} /* Search Results ------------------------------------------------------ */ #search-results {width: 100%; position: relative; display: block; clear: both;} #results-for {width: 90%; margin: 0 auto 25px auto; padding: 50px 0 0 0; text-align: center; display: block; clear: both;} .search-results-container {margin: 0 auto 35px auto; display: block; clear: both;} .search-results-container .search-result-section-heading {width: 100%; margin: 0 0 25px 0; font-size: 28px; line-height: 1.2; color: #023864; position: relative; display: block; clear: both;} /* Search Page ---------- */ .search-block {width: 100%; margin: 0 auto; padding: 25px 0; border-right: 2px solid transparent; border-bottom: 2px solid transparent; border-radius: 5px; transition: all .3s linear; position: relative; display: block; clear: both;} /* Search Block Meta ----- */ .search-block .post-block-meta {padding: 20px 30px 35px 30px; position: relative; display: block;} .search-block .post-block-meta .post-block-category {background-color: #005596; margin: 0 0 20px 0; padding: 3px 8px; font-size: 12px; line-height: 1.2; color: #fff; display: inline-block; clear: both; text-transform: uppercase; font-family: 'ArialNovaBold';} .search-block .post-block-meta h3 {width: 100%; margin: 0 0 5px 0; font-size: 20px; line-height: 1.2; color: #023864; position: relative; display: block; clear: both; font-family: 'ArialNovaBold';} .search-block .post-block-meta h4 {width: 100%; margin: 0 0 15px 0; font-size: 14px; line-height: 1.2; color: #939393; position: relative; display: block; clear: both;} .search-block .post-block-meta p {margin: 0 0 25px 0; padding: 0 0 0 10px; font-size: 15px; line-height: 1.4; color: #222; border-left: 2px solid #ececec;} .search-block .post-block-meta .button {margin-bottom: 0; font-size: 16px;} .search-block .post-block-meta .button i {font-size: 13px;} /* Hover ----- */ .search-block:hover {background-color: #fff; border-right: 2px solid #ececec; border-bottom: 2px solid #ececec;} .search-block:hover .post-image-wrapper .post-image {transform: scale(1.1); color: #aaaaaa;} /* Search Post --------------------------------------------------------- */ .search-post-block {background-color: #fff; width: calc(32% - 2px); margin: 0 1% 45px 1%; border: 1px solid #ececec; border-bottom: none; transition: all .3s linear; position: relative; display: block; float: left;} .search-post-block:nth-of-type(3n+1) {margin-left: 0; clear: both;} .search-post-block:nth-of-type(3n+3) {margin-right: 0;} /* Post Image ---------------------------------------------------------- */ /* Post Image Wrapper ---------- */ .search-post-block .post-image-wrapper {width: 100%; height: 250px; position: relative; display: block; clear: both; overflow: hidden;} /* Post Image ---------- */ .search-post-block .post-image-wrapper .post-image {width: 100%; height: 100%; position: absolute; transition: all .3s linear; display: block;} /* Post Block Meta ----------------------------------------------------- */ .search-post-block .post-block-meta {padding: 20px 30px 35px 30px; position: relative; display: block;} .search-post-block .post-block-meta .post-block-category {background-color: #005596; margin: 0 0 20px 0; padding: 3px 8px; font-size: 12px; line-height: 1.2; color: #fff; display: inline-block; clear: both; text-transform: uppercase; font-family: 'ArialNovaBold';} .search-post-block .post-block-meta h3 {width: 100%; height: 52px; margin: 0 0 30px 0; font-size: 20px; line-height: 1.2; color: #023864; position: relative; display: block; clear: both; overflow: hidden; font-family: 'ArialNovaBold'; z-index: 1;} .search-post-block .post-block-meta .button {font-size: 16px;} .search-post-block .post-block-meta .button i {font-size: 13px;} .search-post-block .post-block-meta:after {content: ''; background-color: #005596; width: calc(100% + 2px); height: 5px; position: absolute; bottom: 0; left: -1px; display: block; visibility: visible;} /* Hover ----- */ .search-post-block:hover {background-color: #f9f9f9;} .search-post-block:hover .post-image-wrapper .post-image {transform: scale(1.1);} /* Search WP Live Search --- */ .searchwp-live-search-results {background: none !important; width: 100% !important; min-height: 0 !important; max-height: none !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-shadow: none !important; box-shadow: none !important; border-radius: 0; position: relative !important; top: auto !important; left: auto !important;} .searchwp-live-search-result p {margin: inherit !important; padding: inherit !important; font-size: inherit !important; border: none !important;} .searchwp-live-search-result a {display: block; white-space: normal !important; overflow: visible !important; text-overflow: ellipsis;} /* News / Press Releases ----------------------------------------------- */ /* Post Block ---------- */ #search-result-posts .post-layout .post-block {background-color: #24190c; width: calc(40% - 1vw); height: 30vh; margin: 0 0 2vw 0; position: relative; display: block; float: right;} #search-result-posts .post-layout .post-block::before {content: ''; background: rgb(35,25,12); background: linear-gradient(90deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 100%); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block;} /* Large Block ----- */ #search-result-posts .post-layout .post-block:nth-of-type(3n+1) {width: calc(60% - 1vw); height: calc(60vh + 2vw); float: left;} #search-result-posts .post-layout .post-block:nth-of-type(3n+1)::before {content: ''; background: rgb(35,25,12); background: linear-gradient(30deg, rgba(35,25,12,1) 5%, rgba(35,25,12,0) 70%); width: 100%; height: 100%; position: absolute; bottom: 0; left: 0; display: block;} #search-result-posts .post-layout .post-block:nth-of-type(3n+1) .vert-center {top: auto; transform: translateY(0);} /* Post Block Article Meta */ #search-result-posts .post-layout .post-block .post-block-article-meta {margin: 0; padding: 0 60px; position: relative; display: block; z-index: 1;} #search-result-posts .post-layout .post-block:nth-of-type(3n+1) .post-block-article-meta {position: absolute; bottom: 30px;} #search-result-posts .post-layout .post-block .post-block-article-meta h3 {max-width: 90%; font-size: clamp(18px, 1.5vw, 32px); color: #fff; line-height: 1.3; display: block; clear: both; font-family: 'ArialNovaBold';} #search-result-posts .post-layout .post-block .post-block-article-meta p {margin: 0 0 10px 0; font-size: clamp(13px, 1vw, 18px); color: #fff; line-height: 1.3; text-transform: uppercase; display: block; clear: both; font-family: 'ArialNovaBold';} /* Layout Template ----- */ #search-result-posts .post-layout .post-block:nth-of-type(9n+1) {width: calc(60% - 1vw); height: calc(60vh + 2vw); float: left;} #search-result-posts .post-layout .post-block:nth-of-type(9n+2) {} #search-result-posts .post-layout .post-block:nth-of-type(9n+3) {} #search-result-posts .post-layout .post-block:nth-of-type(9n+4) {width: calc(60% - 1vw); height: calc(60vh + 2vw); float: right;} #search-result-posts .post-layout .post-block:nth-of-type(9n+5) {float: left;} #search-result-posts .post-layout .post-block:nth-of-type(9n+6) {float: left;} #search-result-posts .post-layout .post-block:nth-of-type(9n+7) {width: calc(60% - 1vw); height: calc(60vh + 2vw); float: left;} #search-result-posts .post-layout .post-block:nth-of-type(9n+8) {} #search-result-posts .post-layout .post-block:nth-of-type(9n+9) {} /* Media Queries for Search ---------- */ @media only screen and (max-width: 1200px) { /* Search Post --------------------------------------------------------- */ .search-post-block {width: calc(49% - 2px); margin: 0 0 45px 0;} .search-post-block:nth-of-type(3n+1) {margin-left: 0; clear: none;} .search-post-block:nth-of-type(3n+3) {margin-right: 0;} .search-post-block:nth-of-type(odd) {clear: both;} .search-post-block:nth-of-type(even) {float: right;} } @media only screen and (max-width: 900px) { /* Search Post --------------------------------------------------------- */ .search-post-block {width: calc(100% - 2px); margin: 0 auto 45px auto; float: none; clear: both;} .search-post-block:nth-of-type(3n+1) {margin-left: auto; clear: both;} .search-post-block:nth-of-type(3n+3) {margin-right: auto;} .search-post-block:nth-of-type(odd) {clear: both;} .search-post-block:nth-of-type(even) {float: none; clear: both;} } @media only screen and (max-width: 600px) { .search-results-container {width: 95%;} } /* Forms ------------------------------------------------------------------------------------------------------------------------------------------ */ #page-content .clickdform {margin: 0 0 5px 0; padding-left: 0 !important;} #page-content .clickdform .responsiveCell div.alignTop {display: block;} #page-content .responsiveCellSize1 {width: 49%} #page-content .responsiveRow .responsiveCellSize1:nth-of-type(2) {margin-right: 0; float: right;} #page-content .clickdform .maxSize1 {width: 100%;} #page-content .responsiveCellSize2 {width: 100%;} #page-content .clickdform .minSize1 {width: 100%; display: block;} #page-content .clickdform .minSize2 {width: 100%; display: block;} #page-content .clickdform .maxSize1 {max-width: 100%; display: block;} #page-content .clickdform .maxSize2 {max-width: 100%; display: block;} #page-content .clickdform .responsiveCell .alignBottom {width: 100%; margin: 0 0 5px 0;} /* Labels ----- */ #page-content .clickdform .responsiveCell .alignBottom span {color: #000 !important; font-weight: 400 !important;} #page-content .clickdform .responsiveCell .alignBottom .requiredStar {color: #b10000 !important;} /* Fields -------------------------------------------------------------- */ /* Input ----- */ #page-content .clickdform input[type="text"], #page-content .clickdform input[type="email"], #page-content .clickdform input[type="tel"], #page-content .clickdform input[type="password"], #page-content .clickdform input[type="url"] {width: calc(100% - 0px) !important; margin: 0 auto 5px auto !important; padding: 8px 8px !important; font-size: 16px; line-height: 1.5; color: #c5c5c5; border: none; border: 1px solid #d7d7da; position: relative; -webkit-appearance: none; border-radius: 0; transition: all .3s linear;} /* Hover */ #page-content .clickdform input[type="text"]:hover, #page-content .clickdform input[type="email"]:hover, #page-content .clickdform input[type="tel"]:hover, #page-content .clickdform input[type="password"]:hover, #page-content .clickdform input[type="url"]:hover {color: #c0c0c0; border: 1px solid #c0c0c0;} /* Active */ #page-content .clickdform input[type="text"]:active, #page-content .clickdform input[type="email"]:active, #page-content .clickdform input[type="tel"]:active, #page-content .clickdform .gfield input[type="password"]:active, #page-content .clickdform input[type="url"]:active{color: #707070; border: 1px solid #6a6a6a;} /* Focus */ #page-content .clickdform input[type="text"]:focus, #page-content .clickdform input[type="email"]:focus, #page-content .clickdform input[type="tel"]:focus, #page-content .clickdform input[type="password"]:focus, #page-content .clickdform input[type="url"]:focus {color: #707070; border: 1px solid #6a6a6a;} /* Textarea ----- */ #page-content .clickdform textarea {min-width: 100%; max-width: 100%; min-height: 100px; margin: 0; padding: 7px 8px !important; font-size: 16px; line-height: 20px; color: #c5c5c5; border: none; border: 1px solid #d7d7da; position: relative; -webkit-appearance: none; border-radius: 0; position: relative; transition: all .3s linear;} /* Hover */ #page-content .clickdform textarea:hover {color: #c0c0c0; border: 1px solid #c0c0c0;} /* Active */ #page-content .clickdform textarea:active {color: #707070; border: 1px solid #6a6a6a;} /* Focus */ #page-content .clickdform textarea:focus {color: #707070; border: 1px solid #6a6a6a !important;} /* Select ----- */ #page-content select:not(.ui-datepicker-month):not(.ui-datepicker-year) {background: url(images/dropdown-arrow.png) right center no-repeat #fff; width: calc(100% - 0px) !important; height: auto; margin: 0 0 5px 0 !important; padding: 11px 8px !important; font-size: 18px; line-height: 1.3; color: #707070; border: 0; border-radius: 0; border: 1px solid #d7d7da; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;} /* Button -------------------------------------------------------------- */ #page-content .clickdform #btnSubmit {background-color: #005eba !important; width: auto; margin: 0; padding: 20px 40px 20px 40px !important; font-size: clamp(13px, 1.1vw, 18px) !important; line-height: 1.3 !important; color: #fff !important; text-decoration: none !important; text-transform: uppercase; border: none; border-radius: 5px; position: relative; display: inline-block; cursor: pointer; vertical-align: middle; transition: all .3s linear; appearance: none; font-family: 'ArialNovaBold' !important; overflow: hidden;} /* Hover ---------- */ #page-content .clickdform #btnSubmit:hover {background-color: #7faddc !important;} /* Media Queries for Forms ---------- */ @media only screen and (max-width: 600px) { #page-content .responsiveCellSize1 {width: 100%} #page-content .responsiveRow .responsiveCellSize1:nth-of-type(2) {margin-right: auto; 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 {transition: opacity .5s linear 0.2s; opacity: 1;} /* WOW -------------------------------------------------------------------------------------------------------------------------------------------- */ .wow {visibility: hidden;} .wow.animated {visibility: visible;}