/* $color-1 : #ee7624; $color-2 : #005776; */ html, body { font-family: 'Lato', sans-serif; font-weight: 300;} /**************** ** Olark Button Override ****************/ .page-id-6363 #hbl-live-chat-wrapper { visibility: hidden; } /**************** ** Header Gap ****************/ .header-gap { padding-top: 185px; -webkit-transition: padding 0.3s ease; transition: padding 0.3s ease;} @media screen and (min-width:1063px) { .sticky + .header-gap { padding-top: 130px;} } @media screen and (max-width:1062px) { .header-gap { padding-top: 80px;} } @media screen and (max-width:762px) { .header-gap { padding-top: 50px;} } /**************** ** Header Nav ****************/ #page-header a:hover { text-decoration: none;} /**************** ** Headings ****************/ .section h1, .section h2, .section h3, .section h4, .section h5, .section h6, .section .h1, .section .h2, .section .h3, .section .h4, .section .h5, .section .h6 { font-family: 'Lato', sans-serif; margin: 0; line-height: 1.25; font-weight: 900;} .section h1, .section .h1 { font-size: 54px;} .section h2, .section .h2 { font-size: 39px;} .section h3, .section .h3 { font-size: 34px;} .section h4, .section .h4 { font-size: 30px; font-weight: 300; text-transform: none; letter-spacing: 0;} .section .h4.bold { font-weight: 900;} @media screen and (max-width: 762px) { .section h1, .section .h1 { font-size: 46px; line-height: 1.05;} .section h2, .section .h2 { font-size: 34px; line-height: 1.05;} .section h3, .section .h3 { font-size: 30px;} .section h4, .section .h4 { font-size: 26px;} } /**************** ** Shades ****************/ .shaded-color-1 { background: #ee7624;} .shaded-color-2 { background: #005776;} .shaded-color-2-dark { background: #003957;} .shaded-black { background: #000;} .shaded-black *, .shaded-color-2 *, .shaded-color-2-dark * { color: #fff;} .gradient-1 { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#005574+0,002f3f+100 */ background: rgb(0,85,116); /* Old browsers */ background: -moz-linear-gradient(top, rgba(0,85,116,1) 0%, rgba(0,47,63,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,85,116,1) 0%,rgba(0,47,63,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,85,116,1) 0%,rgba(0,47,63,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005574', endColorstr='#002f3f',GradientType=0 ); /* IE6-9 */ } /**************** ** Column Gap ****************/ .row.columns { margin-top: -45px;} .row.columns .post-preview { margin-top: 45px;} /**************** ** Patterns ****************/ .text-center { text-align: center!important;} .background { background-repeat: no-repeat; background-position: center; background-size: cover;} .overlay { position: absolute; top: 0; right: auto; bottom: auto; left: 0; margin: 0; width: 100%; height: 100%;} .bg-wrapper { position: relative; padding-top: 53.75%; overflow: hidden;} @media screen and (min-width:1063px) { .parallax { background-attachment: fixed;} } /**************** ** Add orange line to bottom ****************/ .addLine { margin-bottom: 4rem;} .addLine::after { content: ""; position: absolute; top: auto; right: 0; bottom: 0; left: 0; margin: auto; width: 3px; height: 8rem; background: #ee7624; -webkit-transform: translate3d(0,50%,0); transform: translate3d(0,50%,0);} /**************** ** Play button ****************/ .play-button { width: 48px; height: 48px; background: #ee7624; border-radius: 50%; border: 1px solid #fff; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; cursor: pointer; transition-property: background, border, box-shadow, color, opacity, transform; transition-duration: 0.3s;} .play-button:hover { background: #c3550b; text-decoration: none;} /**************** ** Blue floating heading ****************/ .floating-header { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: auto; height: auto; text-align: center;} .floating-header > div { display: inline-block; padding: 1rem 2rem; background: #005776; transform: translate3d(0,-50%,0);} .floating-header * { color: #fff;} /**************** ** Stack Elements ****************/ .flex-stack { display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: stretch; align-items: stretch; -ms-flex-pack: center; justify-content: center;} .flex-stack > div { width: 100%; max-width: 100%;} .flex-stack > div:not(:first-child) { margin-left: -100%;} .flex-stack .content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;} @media screen and (min-width:763px) { .flex-stack-md { display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-direction: row; flex-direction: row; -ms-flex-align: stretch; align-items: stretch; -ms-flex-pack: center; justify-content: center;} .flex-stack-md > div { width: 100%; max-width: 100%;} .flex-stack-md > div:not(:first-child) { margin-left: -100%;} .flex-stack-md .content { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;} } /**************** ** Img/Txt Blocks ****************/ .post-details > div { margin: 0;} .post-details > div:not(:first-child) { margin-top: 2rem;} .stack-sm .post-details > div:not(:first-child) { margin-top: 1rem;} .stack-lg .post-details > div:not(:first-child) { margin-top: 3rem;} .post-title h1, .post-title h2 { margin: 0 0 -10px;} .post-title h3, .post-title h4, .post-title h5, .post-title h6 { margin: 0;} .parallax .post-icon { width: 54px; } /**************** ** Download box ****************/ .brochure-download a, .brochure-download a:hover { text-decoration: none;} .brochure-download .post-details { display: block;} .brochure-download .post-details > div { position: relative; margin: 0;} .brochure-download .post-details > .post-download { margin: -1rem auto; text-align: center; padding: 0 1rem;} .brochure-download .download { display: inline-block; background: #ee7624; color: #fff; border: 1px solid #ee7624; text-transform: uppercase; font-weight: 700; padding: 4px 1rem; -webkit-border-radius: 100px; border-radius: 100px;} .brochure-download a:hover .download { background: #c3550b; border-color: #fff;} /**************** ** Section details ****************/ .section { position: relative; padding-left: 0; padding-right: 0;} .section .container { width: 100%; max-width: 1500px; padding-left: 2rem; padding-right: 2rem;} @media screen and (min-width:1063px) { .section .container { padding-left: 4rem; padding-right: 4rem;} } .section h1 sup { top: -1.2em; font-size: 50%;} .section ul, .section ol { margin-left: 1rem;} /**************** ** Section Borders ****************/ .section.addBorder-left { border-left: 4px solid #ee7624;} .section.addBorder-left .bg-wrapper::after { content: ""; position: absolute; top: 0; right: auto; bottom: 0; left: 0; margin: 0; width: 45%; height: 100%; z-index: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+33,1+66,0+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 66%, rgba(255,255,255,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 66%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 66%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */ } .section.addBorder-right { border-right: 4px solid #ee7624;} .section.addBorder-right .bg-wrapper::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: auto; margin: 0; width: 45%; height: 100%; z-index: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+33,1+66,1+100 */ background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 66%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 66%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 33%,rgba(255,255,255,1) 66%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */ } @media screen and (max-width:1062px) { .section.addBorder-left .bg-wrapper, .section.addBorder-right .bg-wrapper { padding-top: 75%;} .section.addBorder-left .bg-wrapper::after, .section.addBorder-right .bg-wrapper::after { content: none;} .section.addBorder-left .background { background-size: 160% auto; background-position: right 20% center;} .section.addBorder-right .background { background-size: 160% auto; background-position: left 20% center;} } .section.addBorder-left.shaded-black .bg-wrapper::after { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,1+33,1+66,0+100 */ background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 33%, rgba(0,0,0,1) 66%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 66%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 66%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */ } .section.addBorder-right.shaded-black .bg-wrapper::after { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+33,1+66,1+100 */ background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 33%, rgba(0,0,0,1) 66%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 66%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 33%,rgba(0,0,0,1) 66%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */ } /**************** ** Forms ****************/ .section form ul, .section form li { list-style-type: none; padding: 0; margin: 0;} .section form li + li { margin-top: 1rem;} .section .gfield_checkbox label { margin: 0;} .section .gfield_checkbox li + li { margin-top: 0.5rem;} .section .ginput_container_consent label { display: inline;} body .gform_wrapper select option { color: #000;} body .gform_wrapper ul.gform_fields { margin: -10px -15px!important; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} body .gform_wrapper ul.gform_fields li.gfield { margin: 10px 0!important; padding: 0 15px!important; width: 100%!important;} body .gform_wrapper select, body .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]) { line-height: 1; padding: 4px 10px; -webkit-border-radius: 0; border-radius: 0; width: 100%!important; color: #000;} body .gform_wrapper .top_label .gfield_label { margin-bottom: 0;} body .gform_wrapper .gform_footer input[type="submit"] { font-weight: 300; min-width: 120px; -webkit-border-radius: 100px; border-radius: 100px;} body .gform_confirmation_message { background: #c8f4c2; border-left: 5px solid #1e6c17; padding: 10px 15px; color: #1e6c17;} #contact .gform_wrapper ul.gform_fields li.gfield, #contact .gform_wrapper.gform_validation_error .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half):not(.ginput_recaptcha_wrapper) { max-width: 50%!important;} #contact .gform_wrapper ul.gform_fields li.ginput_recaptcha_wrapper { max-width: 100%!important;} /**************** ** Banner ****************/ .banner-stack .bg-wrapper { position: static;} .banner-stack .align-b { padding: 18% 0 0;} @media screen and (max-width:1062px) { .banner-stack .align-b { padding: 8rem 0 48%;} .banner-stack .background { background-size: contain; background-position: bottom center;} } @media screen and (max-width:762px) { .banner-stack .bg-wrapper { padding: 0;} .banner-stack .align-b { padding: 6rem 0 55%;} } @media screen and (max-width:575px) { .banner-stack .background { background-size: auto 400px;} .banner-stack .align-b { padding-bottom: 300px;} } /**************** ** Contact section ****************/ #contact .container { padding-top: 3rem; padding-bottom: 3rem;} @media screen and (min-width:1063px) { #contact .container { padding-top: 6rem; padding-bottom: 6rem;} } #contact .background { background-position: bottom center;} /**************** ** Promo Area ****************/ .promo-area { position: fixed; top: auto; bottom: 0; right: 40px; left: auto; z-index: 5; margin: auto; width: auto; padding: 15px; color: #fff; width: 100%; max-width: 200px; text-align: center; transition: all 0.5s ease; transform: translate3d(0,0,0);} .promo-area.hide { transform: translate3d(0,101%,0);} .promo-area .post-text p { line-height: 1.5; font-weight: 600;} .promo-area img { width: 65px; height: auto;} .promo-area .promo-close { float: none; text-align: right; cursor: pointer; color: #fff; font-size: 1.8rem; opacity: 1; margin-bottom: 10px; line-height: 1;} /**************** ** Promo Block ****************/ #promo-block { max-width: 400px; padding: 0; border-radius: 3px 3px 0 0; overflow: hidden;} #promo-block .promo-close { position: absolute; top: 0; right: 0; bottom: auto; left: auto; z-index: 10; font-size: 26px; padding: 12px 20px; cursor: pointer; color: #fff; -webkit-border-radius: 0 3px 0 3px; border-radius: 0 3px 0 3px;} #promo-block .promo-close:hover { color: #fff; background: #ee7624;} #promo-block .panel { position: relative; z-index: 1; margin: 0;} #promo-block .slick-slide { padding: 0;} #promo-block .slick-tools-wrap { display: none;} #promo-block .post-image { padding-top: 54.5185%; position: relative;} #promo-block .post-image::after { content: none;} #promo-block .post-image .background { background-size: cover; background-repeat: no-repeat; background-position: 50%; background-position: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0;} #promo-block .post-preview { background: #005776; color: #fff; padding-bottom: 50px;} #promo-block .post-details { text-align: left; padding: 45px 30px;} #promo-block .post-title { position: relative; font-size: 26px; font-weight: 900; padding-right: 45px;} #promo-block .post-title + * { margin-top: 15px;} #promo-block .post-text { font-size: 16px; line-height: 1.35;} #promo-block .post-text p { margin: 0;} #promo-block .btn { display: inline-block; color: #fff; background: #ee7624; font-size: 12px; padding: 14px 20px; font-size: 16px; text-decoration: none; font-weight: 700; -webkit-border-radius: 3px; border-radius: 3px; -webkit-transition: all .3s; transition: all .3s;} #promo-block .btn:hover, #promo-block .btn:active, #promo-block .btn:focus { outline: none; background: rgb(195, 85, 11);} #promo-block .btn-group { text-align: center; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} #promo-block .btn-group .btn { padding: 14px; margin-left: 1px; -webkit-border-radius: 0; border-radius: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1;} #promo-block .btn-group .btn:first-child { -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; margin-left: 0;} #promo-block .btn-group .btn:last-child { -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;} #promo-block .panel { border-radius: 0; border: 0;} @media screen and (max-width: 991px) { #promo-block { left: 0; right: 0; border-radius: 0; max-width: 100%;} #promo-block .promo-close { color: #fff; padding: 6px 14px;} #promo-block .promo-close:hover { color: #ee7624; background: #fff;} #promo-block .post-preview { padding-bottom: 70px;} #promo-block .post-details { padding: 15px;} #promo-block .post-image { display: none;} }