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, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure, figcaption {
margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
vertical-align: baseline;
list-style-type: none;
}
html, body {
-webkit-text-size-adjust: 100%;
height: 100%;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 148px;
}
body {
margin: 0px;
background-color: #151b29;
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
}
/*body:not(.home).sticky-fixed {
padding: 147px 0 0 0; }
body:not(.home).sticky-fixed.admin-bar {
padding: 115px 0 0 0; }
*/
body {
scroll-padding-top: 148px;
overflow: auto; }
/* HTML5 display-role reset for older browsers */
article, aside, details, footer, header, hgroup, menu, nav, section {
display: block; }
figure, figcaption {
display: grid; }
hr { outline: none; }
img {
max-width: 100%;
display: block; }
img a {
border: none; }
video {
outline: 0; }
button {
all: unset;
cursor: pointer;
appearance: none;
/* Standard property */ }
/*OneTrust overwrite cookie button styles */
#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings{
background-color: #e9e9ed!important;
}
.jw-state-idle .jw-controls, .jw-background-color{
background-color:rgba(255,255,255,0) !important;
background-color: transparent !important;
}
.jw-state-idle .jw-controls{
background-color: transparent !important;
}
.jw-controls-backdrop{
background: none !important;
}
.jw-state-complete .jw-controls{
background-color: transparent !important;
}
.fade {
-webkit-animation: fadein 1s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 1s;
/* Firefox < 16 */
-ms-animation: fadein 1s;
/* Internet Explorer */
-o-animation: fadein 1s;
/* Opera < 12.1 */
animation: fadein 1s; }
@keyframes fadein {
from {
opacity: 0; }
to {
opacity: 1; } }
@keyframes fadeSlideIn {
from {
opacity: 0;
transform: translateY(5px); }
to {
opacity: 1;
transform: translateY(0); } }
[data-gallery-item] {
animation: fadeSlideIn 250ms ease-out;
}
.hidden {
display: none !important
}
/* -------- GENERAL PURPOSE UTILITY CLASSES --------*/
p {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 15px;
line-height: 24px;
padding: 0 0 15px 0;
}
h1, h2, h3{
font-weight: 400;
}
/*body paragraph sup*/
sup {
vertical-align: 50%;
line-height: 8px;
font-size: 9px;
}
.light {font-weight: 300 !important;}
.medium {font-weight: 500 !important;}
.semi-bold { font-weight: 600 !important; }
.bold { font-weight: 700 !important; }
.uppercase {text-transform: uppercase;}
a.phone{
text-decoration: none;
cursor: default;
color:#c9c8c5;
}
.clear {
clear:both;
}
.text-center { text-align: center; }
.clear { clear: both; }
.clearright { clear: right; }
.clearleft { clear: left; }
.center-image {
margin-right: auto;
margin-left: auto; }
.object-contain img { object-fit: contain; }
.block { display: block; }
.img-loading { opacity: 0; }
.img-placeholder {
background-color: #b4b0ac; }
.img-fade{
animation: fadeIn 3s;
-webkit-animation: fadeIn 3s;
-moz-animation: fadeIn 3s;
-o-animation: fadeIn 3s;
-ms-animation: fadeIn 3s;
}
.icon-link-download {
position: relative;
padding-left: 16px;
}
.icon-link-download::before {
content: '';
position: absolute;
inset: 0;
background: transparent url("../images/elements/download.svg") center left / 10px no-repeat;
}
.icon-link-pdf {
position: relative;
padding-left: 16px;
}
.icon-link-pdf::before {
content: '';
position: absolute;
inset: 0;
background: transparent url("../images/elements/file-pdf.svg") center left / 10px no-repeat;
}
.button .icon-link-pdf,
.button .icon-link-download {
padding-left: 0;
}
.button .icon-link-pdf::before,
.button .icon-link-download::before {
display: none;
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
blockquote,
blockquote p {
font-size: 26px;
line-height:30px;
font-weight: 300!important;
font-style: italic;
color: #dcd8cd;
}
blockquote {
width: 90%;
margin: 10px auto;
padding: 20px 20px 20px 35px;
/* border-left:5px solid #d5a129 ;*/
position: relative;
}
blockquote::before{
font-family:Arial;
content: "\201C";
color:#d5a129;
font-size:60px;
position: absolute;
left: 0;
top:30px;
}
blockquote::after{
content: '';
}
blockquote .quote-signature {
display:block;
color: #d5a129;
font-size: 16px;
font-style: normal;
font-weight: 300!important;
margin-top:10px;
}
.wrapper{
max-width: 1400px;
margin-left: auto;
margin-right: auto;
position:relative;
box-sizing: border-box;
}
.content{
clear:both;
width: 100%;
padding-right:40px;
padding-left: 40px;
position:relative;
box-sizing: border-box;
}
.m-0 {margin: 0px !important;}
.mt-30 {margin-top: 30px !important;}
.mt-50 {margin-top: 50px !important;}
.mb-0 {margin-bottom: 0px !important;}
.mb-5 {margin-bottom: 5px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-15 {margin-bottom: 15px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}
.mb-40 {margin-bottom: 40px !important;}
.mb-50 {margin-bottom: 50px !important;}
.p-0 {padding: 0px !important;}
.p-30 {padding: 30px !important;}
.pt-0 {padding-top: 0px !important;}
.pt-5 {padding-top: 5px !important;}
.pt-10 {padding-top: 10px !important;}
.pt-15 {padding-top: 15px !important;}
.pt-20 {padding-top: 20px !important;}
.pt-30 {padding-top: 30px !important;}
.pt-40 {padding-top: 40px !important;}
.pt-50 {padding-top: 50px !important;}
.pr-0 {padding-right: 0px !important;}
.pr-5 {padding-right: 5px !important;}
.pr-10 {padding-right: 10px !important;}
.pb-0 {padding-bottom: 0px !important;}
.pb-5 {padding-bottom: 5px !important;}
.pb-10 {padding-bottom: 10px !important;}
.pb-15 {padding-bottom: 15px !important;}
.pb-20 {padding-bottom: 20px !important;}
.pb-30 {padding-bottom: 30px !important;}
.pb-40 {padding-bottom: 40px !important;}
.pb-50 {padding-bottom: 50px !important;}
.pl-0 {padding-left: 0px !important;}
.pl-5 {padding-left: 5px !important;}
.pl-10 {padding-left: 10px !important;}
/* -------- spacers --------*/
.spacer1 {
clear: both;
height: 20px; }
.spacer2 {
clear: both;
height: 25px; }
.spacer3 {
clear: both;
height: 50px; }
.spacer4 {
clear: both;
height: 70px; }
.relative {
position: relative;
}
.absolute {
position: absolute;
}
hr.dashed {
border: none;
border-top: 1px none;
margin: 15px 0;
}
hr.dashed.yellow {
border-top: 1px dashed #835500;
}
hr.dashed.gray {
border-top: 1px dashed #5F5F5F;
}
hr.dashed.blue {
border-top: 1px dashed #2f394e;
}
.object-contain img {object-fit: contain;}
/*------- GENERAL BUTTON Default Yellow----------*/
.button-anchor {
margin-top: auto !important;
margin-bottom: 40px;
margin-left: 35px;
}
.button-anchor.left {
margin-top: auto;
margin-bottom: 40px;
margin-left: 0;
}
.button-anchor.center{
align-self: center;
margin-left: 0;
}
.button-align {
margin: 10px 0 30px 0;
}
.button-align.left {
margin: 10px 0 30px 0;
margin-left: 0;
}
.button-align.center{
margin: 10px 0 15px 0;
align-self: center;
}
.button a:link, .button a:visited, .button a:active {
color:#fff;
background-color:#835500;
display: inline-block;
font-family: proxima-nova, sans-serif;
font-weight: 300 !important;
font-style: normal;
font-size: 15px;
line-height: 20px;
text-transform:uppercase;
padding: 10px 18px 10px 18px;
margin: 10px 0 0 0;
text-align: center;
box-sizing: border-box;
text-decoration: none !important;
border-radius: 2px;
cursor: pointer;
letter-spacing: .5px;
transition: all 0.3s ease;
}
.button a:hover {
color:#fff !important;
background-color:#6d6d6d;
}
/*--------------- Generic Lists -----------------*/
ul { display:block;}
/*--------------- Body content lists -----------------*/
.list ul li{
font-size: 15px;
line-height: 21px;
font-weight: 300;
position: relative;
width: 100%;
list-style-position: outside;
text-indent: -1px;
margin: 0 0 10px 0;
padding: 0 0 0 0;
}
/*--------------- bullet lists -----------------*/
.bullet-list ul {
margin-bottom: 10px;
}
.bullet-list ul li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 5px 15px;
}
.bullet-list ul li:before {
content: "\FFED";
font-size: 16px;
position: absolute;
left: -1px;
display: inline-block;
background-size: contain;
color: #d5a02a;
margin: 0 0 0 0;
}
/*--------- for quick mockups ---------------*/
.txt-yellow {
color: #d5a129 !important;
}
.txt-dark-yellow {
color: #af8b36 !important;
}
.txt-white {
color: #dcd8cd !important;
}
/*-----------------Background Colors------------------*/
.color-white{
background: rgb(255, 255, 255, 0.7);
}
.bg-header-blue {
background: #151b29;
}
.bg-test {
background-color: red;
}
.bg-midblue {background-color: #151e2d !important;}
.bg-deepblue {background-color: #061222 !important;}
.bg-darkgray {background-color: #36383d !important;}
.bg-lightgray {background-color: #f2f2f2 !important;}
.bg-white {background-color: #fff !important;}
/*----------------- Background image used for cards background ------------------*/
/*.fpo-static-bg {
background-image:url("../images/background/fpo-bg.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}*/
.has-bg-image {
background-image:url("../images/background/steel-joist-deck-background.webp");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/*------------- Flex ---------*/
.items-center {
align-items: center; }
.order-container {
display: flex;
flex-direction: column; }
.order-1 {
order: 1; }
.order-2 {
order: 2; }
.order-3 {
order: 3; }
/*------------- Flex container wrap ---------*/
.flex-container-wrap {
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
justify-content: left;
width: 100%;
}
.flex-container-wrap > div.full,
.flex-container-wrap > div.one,
.flex-container-wrap > div.two,
.flex-container-wrap > div.three,
.flex-container-wrap > div.two-third,
.flex-container-wrap > div.two-third-three,
.flex-container-wrap > div.four,
.flex-container-wrap > div.four-boxes{
position: relative;
display: flex;
flex-direction: column;
}
.center-all .flex-container-wrap { justify-content: center !important; text-align: center!important; }
.center .flex-container-wrap {justify-content: center !important;}
.flex-container-wrap > div.full{
width: 100%;
}
.flex-container-wrap > div.two-third{
width: 65%;
}
.flex-container-wrap > div.two-third-three{
width: 31%;
}
.flex-container-wrap > div.one{
width: 75%;
}
.flex-container-wrap > div.two{
width: 48%;
}
.flex-container-wrap > div.three{
width: 31%;
}
.flex-container-wrap > div.four{
width: 22%;
}
.flex-container-wrap > div.four-boxes{
width: 22%;
}
/*------- Flex alignment and spacers ---------*/
.gap {gap: 30px 35px;}
.gap1 {gap: 25px 25px;}
.gap2 {gap: 50px 50px;}
.justify-center{justify-content: center;}
.justify-start{justify-content: flex-start;}
.row-reverse{flex-direction: row-reverse;}
.justify-end{justify-content: flex-end;}
.align-items-center{align-items: center;}
/*-----------------------------------Themes common styles -----------------*/
/*-------Theme Deepblue--------*/
.theme-deepblue{
background-color: #061222;
color:#dcd8cd;
}
.theme-deepblue a:link, .theme-deepblue a:visited, .theme-deepblue a:active{
color:#dcd8cd;
text-decoration: underline .8px #816231;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.theme-deepblue a:hover{
color: #d5a129;
text-decoration: none!important;
}
.theme-deepblue h1 {color:#dedddb !important;}
.theme-deepblue h1 a:link, .theme-deepblue h1 a:visited, .theme-deepblue h1 a:active{
color:#dcd8cd;
text-decoration: none !important;
}
.theme-deepblue h1 a:hover, .theme-deepblue h1 a:focus{
color: #d5a129;
}
.theme-deepblue h2{
color:#d5a129;
}
.theme-deepblue h2 a:link, .theme-deepblue h2 a:visited, .theme-deepblue h2 a:active{
color:#d5a129;
text-decoration: none !important;
}
.theme-deepblue h2 a:hover, .theme-deepblue h2 a:focus{
color:#dcd8cd;
text-decoration: none !important;
}
/*------- H3 ------*/
.theme-deepblue h3 a:link, .theme-deepblue h3 a:visited, .theme-deepblue h3 a:active{
text-decoration: none !important;
}
.theme-deepblue h3 a:hover, .theme-deepblue h3 a:focus{
color:#d5a129;
text-decoration: none !important;
}
.theme-deepblue .slick-slider .photo-credit {
font-size: 11px;
padding: 0;
margin: 5px;
color: #a5a5a5 !important;
}
.theme-deepblue hr {
border: none;
border-top: 1px dashed #393f48;
width: 100%;
}
/*------------------ Theme Midblue ------------------------*/
.theme-midblue{
/*background-color: #171f31;*/
background-color: #151e2d;
color:#dcd8cd;
}
.theme-midblue h1 {color:#dedddb !important;}
.theme-midblue h1 a:link, .theme-midblue h1 a:visited, .theme-midblue h1 a:active{
color:#dcd8cd;
text-decoration: none !important;
}
.theme-midblue h1 a:hover, .theme-midblue h1 a:focus{
color: #af8b36;
}
.theme-midblue h2 {color:#d5a129;}
.theme-midblue h2 a:link, .theme-midblue h2 a:visited, .theme-midblue h2 a:active{
color:#d5a129;
text-decoration: none !important;
}
.theme-midblue h2 a:hover, .theme-midblue h2 a:focus{
color: #dcd8cd;
}
.theme-midblue h3 a:link, .theme-midblue h3 a:visited, .theme-midblue h3 a:active{
text-decoration: none !important;
}
.theme-midblue a:link, .theme-midblue a:visited, .theme-midblue a:active{
color:#dcd8cd;
text-decoration: underline .8px #816231;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.theme-midblue a:hover{
color: #d5a129;
text-decoration: none!important;
}
.theme-midblue.specifications a:link, .theme-midblue.specifications a:visited, .theme-midblue.specifications a:active{
color:#d5a129;
text-decoration: none;
}
.theme-midblue.specifications a:hover{
text-decoration: underline .8px #816231 !important;
-webkit-text-decoration-line: underline;
}
.theme-midblue .slick-slider .photo-credit {
font-size: 11px;
padding: 0;
margin: 5px;
color: #a5a5a5 !important;
}
.theme-midblue hr {
border: none;
border-top: 1px dashed #3a3e44;
width: 100%;
}
/*---------------------------- Theme Darkgrey -------------------------------*/
.theme-darkgray{
background-color: #36383d;
color:#dcd8cd;
}
.theme-darkgray h1 {color:#dedddb !important;}
.theme-darkgray h1 a:link, .theme-darkgray h1 a:visited, .theme-darkgray h1 a:active{
color:#dcd8cd;
text-decoration: none !important;
}
.theme-darkgray h1 a:hover, .theme-darkgray h1 a:focus{
color: #d5a129;
}
.theme-darkgray h2{
color:#d5a129;
}
.theme-darkgray h2 a:link, .theme-darkgray h2 a:visited, .theme-darkgray h2 a:active{
color:#d5a129;
text-decoration: none !important;
}
.theme-darkgray h2 a:hover, .theme-darkgray h2 a:focus{
color:#dcd8cd;
}
.theme-darkgray h3 a:link, .theme-darkgray h3 a:visited, .theme-darkgray h3 a:active{
text-decoration: none !important;
}
.theme-darkgray a:link, .theme-darkgray a:visited, .theme-darkgray a:active{
color:#dcd8cd;
text-decoration: underline .8px #816231;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.theme-darkgray a:hover{
color: #d5a129;
text-decoration: none!important;
}
.theme-darkgray .slick-slider .photo-credit {
font-size: 11px;
padding: 0;
margin: 5px;
color: #a5a5a5 !important;
}
.theme-darkgray hr {
border: none;
border-top: 1px dashed #666;
width: 100%;
}
/*-------Theme Lightgray--------*/
.theme-lightgray{
background-color: #f2f2f2;
color:#2a2a2a;
}
.theme-lightgray h1{
color:#202c45;
}
.theme-lightgray h2{
color:#202c45;
}
.theme-lightgray h2 a:link, .theme-lightgray h2 a:visited, .theme-lightgray h2 a:active{
text-decoration: none !important;
}
.theme-lightgray h3 a:link, .theme-lightgray h3 a:visited, .theme-lightgray h3 a:active{
text-decoration: none !important;
}
.theme-lightgray a:link, .theme-lightgray a:visited, .theme-lightgray a:active{
color: #121723;
text-decoration: underline .8px #666;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.theme-lightgray a:hover{
color: #175d96;
text-decoration: none!important;
}
.theme-lightgray .button a:link, .theme-lightgray .button a:visited, .theme-lightgray .button a:active{
color: #fff;
background-color: #202c45;
}
.theme-lightgray .button a:hover{
background-color:#9a6c00;
}
/*------- breadrumb nav -------*/
.theme-lightgray .breadcrumb ul li {
color: #36383D;
}
.theme-lightgray .breadcrumb ul li.current {
color: #666;
}
.theme-lightgray .breadcrumb ul li a:link, .theme-lightgray .breadcrumb ul li a:visited, .theme-lightgray .breadcrumb ul li a:active{
color: #36383D;
}
.theme-lightgray .breadcrumb ul li a:hover {
color: #175d96!important;
}
.shell {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.shell .main-content {
flex: 1;
}
/*------- slick slider ----------*/
.project-slider:not(.theme-initialized) {
display: flex;
overflow: hidden;
opacity: 0;
}
.project-slider:not(.theme-initialized) > div {
min-width: 100%;
}
.project-slider {
transition: opacity 0.3s ease-in-out;
}
/* .project-slider:not(.theme-initialized) > div:first-child {
display: block;
width: 100%;
flex-grow: 1;
} */
/* .project-slider .slick-track {
display: flex;
} */
.project-slider .slick-slide {
margin: 0 !important;
}
.project-slider .slick-prev {
top: 50%;
left: -30px !important;
}
.project-slider .slick-next {
top: 50%;
right: -30px !important;
}
.theme-lightgray .slider p {
color: #474747;
}
.theme-lightgray .slider a:link, .theme-lightgray .slider a:visited, .theme-lightgray .slider a:active{
color:#121723;
text-decoration: none !important;
}
.theme-lightgray .slider a:hover{
color: #121723;
text-decoration: underline .8px #c5cacd !important;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.theme-lightgray .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 8px;
line-height: 18px;
text-align: center;
color: #a5a5a5;
opacity: .5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.theme-lightgray .slick-dots li.slick-active button:before {
color: #d59f0f !important;
opacity: 1; }
.theme-lightgray .slick-dots li button:hover, .theme-lightgray .slick-dots li button:focus {
outline: none; }
.theme-lightgray .slick-dots li button:hover:before, .theme-lightgray .slick-dots li button:focus:before {
color: #36383D;
opacity: 1; }
.theme-lightgray .slick-slider .photo-credit {
font-size: 11px;
padding: 0;
margin: 5px;
color: #a5a5a5;
}
.theme-lightgray hr {
border: none;
border-top: 1px dashed #c5c5c5;
width: 100%;
}
/*----------------------Theme White-----------------------*/
.theme-white{
background-color: #ffffff;
color:#2a2a2a;
}
.theme-white h1{
color:#202c45!important;
}
.theme-white h2{
color:#202c45;
}
.theme-white h2 a:link, .theme-white h2 a:visited, .theme-white h2 a:active{
text-decoration: none !important;
}
.theme-white h3 a:link, .theme-white h3 a:visited, .theme-white h3 a:active{
text-decoration: none !important;
}
.theme-white a:link, .theme-white a:visited, .theme-white a:active{
color: #121723;
text-decoration: underline .8px #666;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.theme-white a:hover{
color: #175d96;
text-decoration: none!important;
}
.theme-white .button a:link, .theme-white .button a:visited, .theme-white .button a:active{
color: #fff;
background-color: #202c45;
}
.theme-white .button a:hover{
background-color:#9a6c00;
}
/*------- breadrumb nav -----*/
.theme-white .breadcrumb ul li {
color: #36383D;
}
.theme-white .breadcrumb ul li.current {
color: #666;
}
.theme-white .breadcrumb ul li a:link, .theme-white .breadcrumb ul li a:visited, .theme-white .breadcrumb ul li a:active{
color: #36383D;
}
.theme-white .breadcrumb ul li a:hover {
color: #175d96!important;
}
/*------- slick slider---------*/
.theme-white .slider p {
color: #474747;
}
.theme-white .slider a:link, .theme-white .slider a:visited, .theme-white .slider a:active{
color:#121723;
text-decoration: none !important;
}
.theme-white .slider a:hover{
color: #121723;
text-decoration: underline .8px #c5cacd !important;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.theme-white .slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 8px;
line-height: 18px;
text-align: center;
color: #a5a5a5;
opacity: .5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.theme-white .slick-dots li.slick-active button:before {
color: #d59f0f !important;
opacity: 1; }
.theme-white .slick-dots li button:hover, .theme-white .slick-dots li button:focus {
outline: none; }
.theme-white .slick-dots li button:hover:before, .theme-white .slick-dots li button:focus:before {
color: #36383D;
opacity: 1; }
.theme-white .slick-slider .photo-credit {
font-size: 11px;
padding: 0;
margin: 5px;
color: #a5a5a5;
}
.theme-white hr {
border: none;
border-top: 1px dashed #c5c5c5;
width: 100%;
}
/*-------------------- button module-----------------------------------*/
.button .button-container {
padding: 15px 50px 25px 50px;
}
/*-----------------Header Elements------------------*/
header {
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.header-content{
clear:both;
width: 100%;
padding: 30px 40px 10px 40px;
position: relative;
box-sizing: border-box;
}
.header-logo{
display: block;
width: 250px;
padding: 0 0 10px 0;
float: left;
}
.search-wrap {
background-color: #323640;
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 14px;
line-height: 17px;
color: #bcbec2;
padding: 3px 6px;
float: right;
margin-top: 50px;
width: 200px;
text-align: right;
display: flex;
justify-content: space-between;
}
.gsc-control-cse {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.gsc-orderby-container {
display: none !important;
}
.gsc-result-info {
color: #151B29 !important;
}
.gsc-webResult.gsc-result {
margin-bottom: 1.5rem !important;
}
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
background-color: transparent !important;
}
.gsc-above-wrapper-area,
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult {
border: none !important;
}
input.search-field {
flex-grow: 1;
background: none;
border: none;
max-width: 140px;
color: white;
}
/* add placeholder styles to .search-field */
input.search-field::placeholder {
color: #bcbec2;
opacity: 1; /* Firefox */
text-transform: uppercase;
}
/***************************************
* Google Custom Search Styles
***************************************/
/* Grid coversion for new UI */
.gs-result {
display: grid;
grid-template-columns: 200px 1fr;
grid-auto-rows: auto;
grid-template-areas: "image title"
"image url"
"image snippet";
gap: 10px;
}
.gs-result .gsc-thumbnail {
grid-area: image;
}
.gs-result .gsc-thumbnail-inside {
grid-area: title;
}
.gs-result .gsc-url-top {
grid-area: url;
}
.gs-result .gsc-table-result {
grid-area: snippet;
}
table.gsc-above-wrapper-area-container {
margin-top: 0 !important;
padding-top: 1rem !important;
}
.gsc-control-cse .gsc-table-result,
.gsc-control-cse,
.gs-search-results {
font-family: proxima-nova, sans-serif !important;
font-style: normal !important;
font-weight: 300 !important;
font-size: 16px;
}
.gsc-search-button {
width: 20px !important;
}
table.gsc-search-box td {
width: 20px !important;
}
form.gsc-search-box {
margin: 0 !important;
padding: 3px 0 !important;
}
table.gsc-input {
height: 32px !important;
}
table.gsc-search-box td.gsc-input {
padding-right: 0 !important;
width: 100% !important;
}
.gsst_a .gscb_a {
color: #d5a129 !important;
}
td.gsib_a {
background-position: 5px 5px;
}
table.gsc-search-box td.gsib_b {
width: 10px !important;
height: auto !important;
}
.gsc-search-button-v2 {
display: block;
width: 20px;
height: 20px;
padding: 0 !important;
border-color: transparent !important;
background: transparent url(../images/elements/magnifying-glass.svg) no-repeat center center !important;
background-size: contain !important;
}
.gsc-search-button-v2 svg {
display: none !important;
}
.gsc-input-box {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: none !important;
}
.gsc-input-box input[type="text"] {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: none !important;
color: #fff !important;
}
.gs-webResult div.gs-visibleUrl,
.gs-title {
color: #151B29 !important;
font-size: 20px !important;
}
div.gs-title {
margin-bottom: 0.25rem !important;
overflow: visible !important;
}
.gs-fileFormat,
.gs-fileFormatType {
color: #151B29 !important
}
div.gsc-url-top,
div.gsc-url-top span {
margin-bottom: 0.25rem !important;
font-size: 14px !important;
line-height: 20px !important;
padding: 5px 0 15px 0 !important;
color: #65676b !important;
}
.gs-webResult.gs-result a.gs-title b {
color: #986F00 !important;
font-size: 20px !important;
}
.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet {
color: #151B29 !important;
}
.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet b {
color: #986F00 !important;
}
.gs-result .gs-image {
border: none !important;
box-shadow: none !important;
}
.gs-web-image-box {
width: 100% !important;
}
.gs-web-image-box .gs-image {
padding: 0 0 15px 0 !important;
}
.gsc-table-result {
max-width: 780px !important;
line-height: 22px !important;
font-size: 16px !important;
color: #2a2a2a !important;
}
.gsc-results .gsc-cursor {
display: flex !important;
gap: 0.3rem !important
}
.gsc-results .gsc-cursor-box .gsc-cursor-page,
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
background-color: transparent !important;
border: none !important;
color: #d5a129 !important;
}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
color: #151B29 !important;
}
.gcsc-find-more-on-google,
.gcsc-find-more-on-google-magnifier {
color: #d5a129 !important;
}
.gcsc-more-maybe-branding-root,
.gcsc-find-more-on-google-branding {
display: none !important;
}
.gsc-completion-container tr:has(img) {
display: none !important;
}
/* ---------------------------------------
Google Site Search adaptions: 02/12/2026
--------------------------------------- */
/* Results outermost wrapper */
.gsc-wrapper {
max-width: 900px !important;
}
/* Results count */
.gsc-result-info {
padding-left: 0 !important;
}
/* Results container */
.gsc-webResult.gsc-result {
padding: 0 !important;
}
/* Move image to the left and improve theme */
.gs-web-image-box {
width: 100% !important;
float: left !important;
padding: 0 10px 0 0 !important;
}
.gs-web-image-box .gs-image {
width: 100% !important;
height: 90px !important;
border-radius: 0 !important;
padding: 0 !important;
}
/*------- .gs-search-results SEARCH RESULT styles for Carlos and to be deleted ----------*/
.gs-search-results a:link, .gs-search-results a:visited, .gs-search-results a:active{
color: #202c45;
text-decoration: underline .8px #D59F0F;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.gs-search-results a:hover{
color: #175d96;
text-decoration: none!important;
}
.gs-search-results .results-number {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 20px;
padding: 5px 0 15px 0;
color: #151B29;
}
.gs-search-results .gs-title {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-size: 20px;
line-height: 26px;
padding: 0 0 0 0;
color: #202c45;
}
.gs-search-results .gs-url {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 20px;
padding: 5px 0 15px 0;
color: #65676b;
}
.gs-search-results .gs-result-search {
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 16px;
line-height: 22px;
padding: 0 0 15px 0;
color: #2a2a2a;
}
.gs-search-results .search-word {
color:#986F00;
font-weight: 600;
}
.gs-search-results .result-bucket {
margin: 0 0 50px 0;
}
.gs-search-results .float-left {
float: left;
width: 200px;
padding: 0 15px 0 0;
}
/*-------------*/
.search-icon {
display: block;
width: 20px;
padding: 0 0 0 0;
margin: 0 0 0 10px;
float: right;
}
/*----------TOP NAV-----------*/
.topnav{
position:absolute;
top:0;
right:0;
padding:5px 0 0 50px;
z-index: 1000;
}
.topnav ul{
display:block;
}
.topnav ul li{
display: inline-block;
padding: 15px 15px 5px 15px;
}
.topnav ul li a:link, .topnav ul li a:visited, .topnav ul li a:active {
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 13px;
line-height: 17px;
color: #bcbec2;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
transition: color 0.3s ease;
text-decoration: none;
text-transform: uppercase;
}
.topnav ul li a:hover, .topnav ul li a:focus {
color: #d5a129;
}
.topnav ul li:last-child{
padding: 5px 50px 5px 25px;
}
/*------- top-section module ----------*/
.top-section .top-image {
position: relative;
}
.top-section h1.page-title {
font-size: 40px;
line-height: 46px;
padding: 30px 0 0 0;
}
.top-section h1.page-title sup {
vertical-align: 100% !important;
line-height: 18px !important;
font-size: 16px !important;
padding-left: 2px;
}
.top-section h2.page-subtitle {
font-size: 22px;
line-height: 28px;
font-weight: 300;
margin: 0 0 0 0;
padding: 0 0 25px 0;
color: #a5a5a5!important;
}
.top-section h2.page-subtitle sup{
vertical-align: 100%;
line-height: 8px;
font-size: 9px;
padding: 0 0 0 1;
}
.theme-white h2.page-subtitle {
color: #65676b !important;
letter-spacing: -.2;
font-size: 22px;
line-height: 28px;
font-weight: 400 !important;
}
.theme-lightgray h2.page-subtitle {
color: #65676b!important;
letter-spacing: -.2;
font-size: 22px;
line-height: 28px;
font-weight: 400 !important;
}
/*----- breadrumb nav -----*/
.top-section .breadcrumb ul{
padding: 10px 5px 20px 0px;
list-style: none;
}
.top-section .breadcrumb ul li {
line-height: 20px;
display: inline;
font-size: 14px;
color: #949494
}
.top-section .breadcrumb ul li.current {
color: #949494;
}
.top-section .breadcrumb ul li + li::before {
color: #d5a129;
content: "|";
padding: 10px;
}
.top-section .breadcrumb ul li a{
color: #bcbec2;
text-decoration: none !important;
}
.top-section .breadcrumb ul li a:hover {
color: #d5a129;
}
/*-------------------- specifications module-----------------------------------*/
.theme-deepblue.specifications a:link, .theme-deepblue.specifications a:visited, .theme-deepblue.specifications a:active{
color:#af8b36;
text-decoration: none;
}
.theme-deepblue.specifications a:hover{
color: #bcbec2;
text-decoration: underline .8px #816231 !important;
-webkit-text-decoration-line: underline;
}
.theme-deepblue.specifications .list li li a:link, .theme-deepblue.specifications .list li li a:visited, .theme-deepblue.specifications .list li li a:active{
color:#bcbec2;
text-decoration: none;
}
.theme-deepblue.specifications .list-borders li li a:link, .theme-deepblue.specifications .list-borders li li a:visited, .theme-deepblue.specifications .list-borders li li a:active{
color:#bcbec2;
text-decoration: none;
}
.specifications .content{
padding-right:0;
padding-left: 10px;
}
.specifications .project h3{
font-size: 20px;
line-height: 24px;
letter-spacing: 2px;
margin: 10px 0 20px 0;
text-transform: uppercase;
}
.specifications .products h3{
font-size: 20px;
line-height: 24px;
letter-spacing: 2px;
margin: 10px 0 20px 0;
text-transform: uppercase;
}
.specifications .specs-wrap {
padding: 25px 25px 15px 30px;
}
.specifications .blue {
background-color: #111928;
}
.specifications ul li {
font-weight: 400;
font-size: 15px;
line-height: 24px;
}
.specifications .list li {
text-transform: uppercase;
color: #af8b36;
padding: 0 0 15px 0;
margin: 0 0 10px 0;
}
.specifications .list li.last {
padding: 0 0 25px 0;
margin-bottom: 0;
}
.specifications .list li li{
border-bottom: none;
text-transform: none;
color: #bcbec2;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.specifications .list-borders li {
text-transform: uppercase;
color: #af8b36;
border-bottom: 1px dashed #2f394e;
padding: 0 0 15px 0;
margin: 0 0 10px 0;
}
.specifications .list-borders li.last{
padding: 0 0 25px 0;
border-bottom: none;
margin-bottom: 0;
}
.specifications .list-borders li li{
border-bottom: none;
text-transform: none;
color: #bcbec2;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
/*--------------- flyout module ------------------*/
.flyout {
position: fixed;
inset: 0 0 0 auto;
z-index: 1000;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
width: 100vw;
max-width: 500px;
}
.flyout.active {
transform: translateX(0);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.flyout .wrapper,
.flyout .content {
height: 100%;
}
.flyout a:link, .flyout a:visited, .flyout a:active{
color:#2a2a2a;
text-decoration: none;
cursor: pointer;
}
.flyout a:hover{
color: #000;
text-decoration: underline .8px #2a2a2a;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
.flyout .close-btn {
display: block;
width: 20px;
height: 20px;
padding: 5px;
float: right;
background: transparent url(../images/elements/window-close.svg) 0 0 no-repeat;
}
.flyout .phone {
color: #000;
text-decoration: none;
}
.flyout .wrapper{
max-width: 500px;
position:relative;
box-sizing: border-box;
}
.flyout .content{
clear:both;
width: 100%;
padding: 0;
position:relative;
box-sizing: border-box;
background-color: #f2f2f2;
}
.flyout .header{
font-size: 15px;
line-height: 18px;
font-weight: 500;
padding: 10px 10px 6px 20px;
margin: 0 0 5px 0;
text-transform: uppercase;
background-color: #36383d;
color: #ececec;
width: 100%;
}
.flyout .specs-wrap {
padding: 5px 25px 10px 20px;
}
.flyout p {
font-weight: 300;
font-size: 15px;
line-height: 21px;
padding: 0 0 15px 0;
}
.flyout .name {
font-weight: 500;
padding: 0 0 3px 0;
}
.flyout ul {
list-style: none;
padding-left: 5px;
padding-top: 0;
}
.flyout ul li {
display: flex;
align-items: flex-start; /* Align bullet to top of double line */
margin-bottom: 8px;
}
.flyout li {
font-weight: 300;
font-size: 15px;
line-height: 20px;
padding: 0 0 0 0;
}
.flyout a.link::before,
.flyout .link li::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-image: url("../images/elements/link.svg");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-top: 4px;
margin-right: 8px;
margin-left: 0;
}
.flyout a.download::before,
.flyout .download li::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-image: url("../images/elements/download.svg");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-top: 4px;
margin-right: 8px;
margin-left: 0;
}
.flyout a.pdf::before,
.flyout .pdf li::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-image: url("../images/elements/file-pdf.svg");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-top: 4px;
margin-right: 8px;
margin-left: 0;
}
.flyout a.external-link::before,
.flyout .external-link li::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-image: url("../images/elements/external-link.svg");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-top: 4px;
margin-right: 8px;
margin-left: 0;
}
/*--------------- pingpong module ------------------*/
.pingpong-group {
display: flex;
flex-direction: column;
gap: 35px;
}
.pingpong h3{
font-size: 22px;
line-height: 28px;
color: #d5a129;
margin: 0 0 10px 0;
}
.pingpong h3 sup{
vertical-align: 70% !important;
font-size: 13px !important;
line-height: 10px !important;
}
.theme-lightgray.pingpong h3{
color: #000;
}
.theme-white.pingpong h3{
color: #000;
}
/*----- Ping pong base layout (desktop) */
.pingpong .content-block {
display: flex;
align-items: flex-start;
gap: 35px;
}
.pingpong .text {
flex: 1;
max-width: 60%;
}
.pingpong .image {
position: relative;
width: 100%;
max-width: 600px;
}
/*--- bullet lists poingpong ----*/
.pingpong ul {
margin-bottom: 10px;
}
.pingpong ul li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 10px 15px;
}
.pingpong ul li:before {
content: "\FFED";
font-size: 16px;
position: absolute;
left: -1px;
display: inline-block;
background-size: contain;
color: #d5a02a;
margin: 0 0 0 0;
}
/*--------------- icons-section module ------------------*/
.icons-section .flex-container-wrap > div.three{
width: 23%;
}
.icons-section .flex-container-wrap > div.four{
width: 22%;
}
.icons-section .content{
padding: 0 0 10px 0;
}
.icons-section .icon-head-container {
position: relative;
width: 100%;
height: 50px;
}
.icons-section hr {
border-top: 10px #dddddd solid;
display: block;
margin-block-start: 0;
margin-block-end: 0;
border-bottom: 1px solid #dddddd;
}
.icons-section .icon-head-wrap {
position: absolute;
margin: 0 auto;
text-align: center;
top: 0%;
left: 50%;
transform: translate(-50%, -0%);
width: 100%;
}
.icons-section .icon-head {
color: #000;
background-color: #e6ae2c;
font-size: 20px;
line-height: 26px;
font-weight: 600;
padding: 10px 20px 10px 20px;;
display: inline-block;
border-radius: 0 0 4px 4px;
max-width: 650px;
}
.icons-section .icons-wrap {
padding: 15px 0 25px 0;
}
.icons-section .icons-title {
font-size: 17px;
line-height: 23px;
font-weight: 600!important;
color: #061122;
text-align: center;
margin: 10px auto 0 auto;
padding: 0 0 10px 0 ;
text-transform: uppercase!important;
}
.icons-section .icons-title a{
text-decoration: none;
color: #061122;
}
.icons-section .icons-title a:hover{
color: #835500;
}
.icons-section .icon-img {
max-width: 100px;
display: block;
margin: auto;
}
/*--------------- bullets module ------------------*/
.bullets .flex-container-wrap > div.two-third{
width: 70%;
}
.theme-deepblue.bullets h2, .theme-midblue.bullets h2, .theme-darkgray.bullets h2{
color: #fff;
font-size: 20px;
line-height: 26px;
margin: 0 0 15px 0;
}
.theme-lightgray.bullets h2, .theme-white.bullets h2{
color: #474747;
font-size: 20px;
line-height: 26px;
margin: 0 0 15px 0;
}
.bullets h2 sup{
vertical-align: 100% !important;
font-size: 10px !important;
line-height: 7px !important;
}
.bullets .bullet-wrap {
padding: 35px 35px 30px 35px;
}
.theme-deepblue.bullets .bullet-wrap {
background-color: #121a2c;
}
.theme-deepblue.bullets .bullet-wrap.border-left {
border-left: 8px #50555f solid!important;
border: 1px #50555f solid;
}
.theme-midblue.bullets .bullet-wrap {
background-color: #111928;
}
.theme-midblue.bullets .bullet-wrap.border-left {
background-color: #141d31;
border-left: 8px #50555f solid!important;
border: 1px #50555f solid;
}
.theme-white.bullets .bullet-wrap {
background-color: #F2F2F2;
border: 1px #EAEAEA solid;
}
.theme-white.bullets .bullet-wrap.border-left {
border-left: 8px #e1e1e1 solid;
}
.theme-lightgray.bullets .bullet-wrap {
background-color: #fff;
}
.theme-lightgray.bullets .bullet-wrap.border{
border: 1px #e1e1e1 solid;
}
.theme-lightgray.bullets .bullet-wrap.border-left {
/*padding: 25px 30px 25px 30px; */
border-left: 8px #e1e1e1 solid!important;
border: 1px #e1e1e1 solid;
}
.theme-darkgray.bullets .bullet-wrap {
background-color: #303236;
}
.theme-darkgray.bullets .bullet-wrap.border {
border: 1px #555555 solid;
}
.theme-darkgray.bullets .bullet-wrap.border-left {
border-left: 8px #686868 solid!important;
border: 1px #686868 solid;
}
.bullets ul {
margin: 0 0 10px 0;
}
.bullets ul li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 15px 15px;
}
.bullets ul li:before {
content: "\FFED";
font-size: 12px;
position: absolute;
left: -1px;
display: inline-block;
background-size: contain;
color: #bb9849;
margin: 0 0 0 0;
}
/*-- generic use for all modules list no bullet ---*/
ul.nobullet li a:link, ul.nobullet li a:visited, ul.nobullet li a:active{
text-decoration: none;
}
ul.nobullet li a:hover {
text-decoration: underline .8px #816231 !important;
-webkit-text-decoration-line: underline;
}
ul.nobullet {
margin-bottom: 10px;
}
ul.nobullet li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 12px 0!important;
}
ul.nobullet li:before {
content: ""!important;
font-size: 16px;
position: absolute;
left: 0;
display: inline-block;
background-size: contain;
color: #d5a02a;
margin: 0 0 0 0;
}
/*----------- Hero-media module ----------------------
A general purpose module helper for positioning images and video elements
within a hero (hero-cta, hero-quote) element
*/
.hero-media {
position: absolute;
inset: 0;
width: 100%;
padding-top: 0;
animation: 2s fadeIn;
}
.hero-media img,
.hero-media .jwplayer,
.hero-media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover !important;
}
/*----------- Hero-quote module ----------------------*/
.hero-quote {
clear: both;
background-position: 0 0;
background-position-y: 0px;
background-repeat: no-repeat;
width: 100%;
padding-top: 0;
animation: 2s fadeIn;
position: relative;
background-size: cover !important;
}
.hero-quote .content {
display: flex;
flex-direction: column;
justify-content: center; /* Vertical axis centering */
padding: 50px 40px;
min-height: 480px;
}
.hero-quote .left-quote {
align-self: flex-start;
}
.hero-quote .right-quote {
align-self: flex-end;
}
/*.hero-quote .filename-hero-img-quote {
background-image: url(../images/background/fpo-hero-quote.jpg);
}
.hero-quote .filename-hero-img-quote-dark {
background-image: url(../images/background/fpo-hero-quote-dark.jpg);
}*/
.hero-quote .hero-box {
background-color: rgba(6, 18, 34, 0.9);
padding: 35px 35px 35px 35px;
width: 450px;
}
.hero-quote .hero-box p {
font-size: 25px;
line-height: 33px;
font-weight: 300;
}
.hero-quote sup {
vertical-align: 100%;
font-size: 14px;
line-height: 8px;
padding: 0 0 0 1px;
}
/*----------------- Hero-cta module - STYLES -----------------------------------*/
.hero-cta h2 {
font-size: 26px;
line-height: 32px;
padding: 0 0 15px 0;
color: #dcd8cd;
}
.hero-cta h2 sup {
font-size: 16px!important;
line-height: 12px!important;
padding-left: 2px;
}
.hero-cta .filename-hero {
clear: both;
/*- background-image: url(../images/background/steel-joist-deck-background.webp); --*/
background-position: 0 0;
background-position-y: 0px;
background-repeat: no-repeat;
width: 100%;
padding-top: 0;
animation: 2s fadeIn;
position: relative;
background-size: cover !important;
}
.hero-cta .filename-hero-img {
clear: both;
background-image: url(../images/background/steel-joist-deck-background.webp);
background-position: 0 0;
background-position-y: 0px;
background-repeat: no-repeat;
width: 100%;
padding-top: 0;
animation: 2s fadeIn;
position: relative;
background-size: cover !important;
}
.hero-cta .wrap {
padding: 10px 0 15px 0;
}
.hero-cta .content {
display: flex;
flex-direction: column;
justify-content: center; /* Vertical axis centering */
padding: 50px 40px;
min-height: 480px;
}
.hero-cta .hero-box-right {
background-color: rgba(6, 18, 34, 0.9);
padding: 30px 40px 40px 40px;
font-size: 25px;
line-height: 33px;
font-weight: 300;
width: 550px;
align-self: flex-end;
margin: 0 0 0 0;
}
.hero-cta .hero-box-left {
background-color: rgba(6, 18, 34, 0.9);
padding: 30px 40px 40px 40px;
font-size: 25px;
line-height: 33px;
font-weight: 300;
width: 550px;
align-self: flex-start;
margin: 40px 0 0 0;
}
/*------- Photo credit generic ---------------------*/
.photo-credit {
position: absolute;
bottom: -30px;
right: 0;
font-size: 8px;
padding: 3px;
margin: 8px;
}
.photo-credit.white {
color: #dcd8cd;
}
.photo-credit.black {
color: #131313;
}
/*------- Slick-slider common styles ---------------------*/
.slider a:link, .slider a:visited, .slider a:active{
color:#dcd8cd;
text-decoration: none !important;
}
.slider a:hover{
color: #dcd8cd;
text-decoration: underline .8px #816231 !important;
text-underline-offset: 4px;
-webkit-text-decoration-line: underline;
}
/*------- slick-slider-project module---------------------*/
.slider.slick-slider .project{
font-size: 15px;
line-height: 24px;
margin: 10px 0 50px 0 !important;
padding: 0;
text-align: center;
}
/*------- Callout generic styles ----------*/
.callout h2{
font-size: 25px;
line-height: 30px;
padding: 0 0 10px 0;
}
.callout h2 sup{
vertical-align: 100% !important;
line-height: 10px !important;
font-size: 11px !important;
padding-left: 1px;
}
.callout {
line-height: 23px;
}
img.arrow-down-callout{
display: block;
width: 18px;
padding: 5px 0 0 0;
margin-right: auto;
margin-left: auto;
}
/*------- callout BUTTON----------*/
.callout .button a:link, .callout .button a:visited, .callout .button a:active {
margin: 15px 0 0 0;
}
/*------- Callout-left generic styles ----------*/
.callout-cta .textwrap {
padding: 0 50px 0 0;
}
.callout-cta {
line-height: 23px;
}
.callout-cta h2{
font-size: 22px;
line-height: 30px;
text-align: left;
padding: 0 0 10px 0;
}
.callout-cta h2 sup{
vertical-align: 100% !important;
line-height: 8px !important;
font-size: 11px !important;
padding-left: 1px;
}
.callout-cta h3{
font-size: 17px;
line-height: 23px;
padding: 0 0 10px 0;
}
.callout-cta h3 sup{
vertical-align: 90% !important;
line-height: 6px !important;
font-size: 11px !important;
}
.callout-wrap{
display: inline-block;
max-width: 200px;
text-align: left;
}
img.arrow-down-callout-cta{
display: inline-block;
width: 13px;
margin: 0 5px 0 0;
text-align: left;
}
img.image-callout-cta{
display: inline-block;
width: 180px;
text-align: left;
margin: 5px 0 0 0;
}
/*------- accordion-panel module ----------*/
.accordion-panel .flex-container-wrap > div.two-third{
width: 65%;
}
/*------- accordion script ----------*/
.accordion-panel .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
border: none;
text-align: left;
outline: none;
transition: 0.4s;
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 20px;
margin-bottom: 10px;
border-left: 3px solid #e3e3e3;
border-bottom: 1px solid #DADADA;
}
.accordion-panel .panel {
margin-bottom: 10px;
padding: 0 0;
background-color: #f9f9f9;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
border-left: 3px solid #d5a129;
color: #444 !important;
}
.accordion-panel .active, .accordion:hover {
background-color: #eee;
border-left: 3px solid #d5a129;
}
.accordion-panel .accordion:after {
/*content: '\002B';*/ /* Unicode character for "plus" sign (+) */
content: url("../images/elements/arrow-down.svg");
display: block;
height: 13px;
width: 13px;
float: right;
margin-left: 5px;
}
.accordion-panel .active:after {
/* content: "\2212";*/ /* Unicode character for "minus" sign (-) */
content: url("/images/elements/arrow-up.svg");
display: block;
height: 13px;
width: 13px;
}
.accordion-panel .content-wrap {
padding: 20px 20px 30px 20px;
}
.accordion-panel ul {
list-style: none;
padding-left: 5px;
padding-top: 0;
}
.accordion-panel ul li {
display: flex;
align-items: flex-start; /* Align bullet to top of double line */
margin-bottom: 8px;
}
.accordion-panel li {
font-weight: 300;
font-size: 15px;
line-height: 20px;
padding: 0 0 0 0;
}
.accordion-panel ul.links {
margin-left: 0;
padding-left: 0;
}
.accordion-panel a,
.accordion-panel a:hover {
color: #444 !important;
}
.accordion-panel a.link::before,
.accordion-panel .link li::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-image: url("../images/elements/link.svg");
background-size: contain;
background-repeat: no-repeat;
flex-shrink: 0;
margin-top: 4px;
margin-right: 8px;
margin-left: 0;
}
/*-----------*/
/*------- general content ----------*/
.general-content .flex-container-wrap > div.two{
width: 48%;
padding: 0 35px 0 0;
}
.general-content .column-wrap {
padding: 25px 30px 20px 0;
}
.general-content h2{
font-size: 24px;
line-height: 30px;
padding: 0 0 10px 0;
}
.general-content h2 sup{
vertical-align: 100% !important;
line-height: 10px !important;
font-size: 11px !important;
padding-left: 1px;
}
/*---- bullet lists CARDS ---*/
.general-content ul {
margin-bottom: 10px;
}
.general-content ul li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 10px 15px;
}
.general-content ul li:before {
content: "\FFED";
font-size: 16px;
position: absolute;
left: -1px;
display: inline-block;
background-size: contain;
color: #d5a02a;
margin: 0 0 0 0;
}
/*------- column-content ----------*/
.column-content .flex-container-wrap > div.three{
flex: 1!important;
row-gap: 25px;
}
.column-content .flex-container-wrap > div.two{
flex: 1!important;
row-gap: 25px;
}
.column-content .gap1 {
gap: 50px;
}
.column-content .column-wrap {
padding: 0 0 0 0;
}
.column-content h2{
font-size: 24px;
line-height: 30px;
text-align: left;
padding: 0 0 10px 0;
}
.column-content h2 sup{
vertical-align: 100% !important;
line-height: 10px !important;
font-size: 11px !important;
padding-left: 1px;
}
.column-content h3{
font-size: 20px;
line-height: 26px;
height: 68px;
display: inline-block;
}
.column-content h3 sup{
vertical-align: 80% !important;
line-height: 10px !important;
font-size: 11px !important;
padding-left: 1px;
}
/*------- 4 column content ----------*/
.column4-content .content{
padding-right:20px;
padding-left: 20px;
}
.column4-content .column-wrap {
padding: 25px 30px 20px 0;
}
.column4-content .flex-container-wrap > div.four{
width: 20%;
}
.column4-content .gap1 {
gap: 50px 50px;
}
.column4-content h3{
font-size: 20px;
line-height: 26px;
padding: 0 0 13px 0;
}
.column4-content .txt-center{
text-align: center!important;
}
.column4-content .txt-left{
text-align: left!important;
}
.column4-content h3 sup{
vertical-align: 80% !important;
line-height: 10px !important;
font-size: 11px !important;
padding-left: 1px;
}
.column4-content .flex-wrap {
display: flex;
}
.column4-content .flex-main {
flex-grow: 1;
}
.column4-content ul {
margin-bottom: 10px;
}
.column4-content ul li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 10px 15px;
}
.column4-content ul li:before {
content: "\FFED";
font-size: 16px;
position: absolute;
left: -1px;
display: inline-block;
background-size: contain;
color: #d5a02a;
margin: 0 0 0 0;
}
/*--------- column-content module---*/
.column-content ul {
margin-bottom: 10px;
}
.column-content ul li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 10px 15px;
}
.column-content ul li:before {
content: "\FFED";
font-size: 16px;
position: absolute;
left: -1px;
display: inline-block;
background-size: contain;
color: #d5a02a;
margin: 0 0 0 0;
}
/*------- video-full module styles ----------*/
.video-full .column-wrap {
padding: 25px 15px 0 15px;
}
.video-full .txt-center{
text-align: center!important;
}
.video-full .txt-left{
text-align: left!important;
}
.video-full h2{
font-size: 22px;
line-height: 28px;
display: inline-block;
margin: 0 0 20px 0;
}
.video-full h2 sup{
vertical-align: 80% !important;
line-height: 10px !important;
font-size: 11px !important;
}
/*------- video-two-three module ----------*/
.video-two-three .flex-container-wrap > div.three{
width: 31%;
}
.video-two-three .flex-container-wrap > div.two{
width: 48%;
}
.video-two-three .gap {
gap: 50px 50px;
}
.video-two-three .gap1 {
gap: 25px 40px;
}
.video-two-three .column-wrap {
padding: 25px 0 0 0;
}
.video-two-three p.txt-center {
text-align: center!important;
}
.video-two-three h2{
font-size: 25px;
line-height: 30px;
margin: 0 0 20px 0;
}
.video-two-three h2 sup{
vertical-align: 100% !important;
line-height: 10px !important;
font-size: 11px !important;
padding-left: 1px;
}
.video-two-three h3{
font-size: 20px;
line-height: 26px;
padding: 0 0 15px 0;
}
.video-two-three h3.txt-center{
text-align: center;
}
.video-two-three h3 sup{
vertical-align: 80% !important;
line-height: 10px !important;
font-size: 11px !important;
padding-left: 1px;
}
/*------- video-two-thirds module styles ----------*/
.video-two-thirds .flex-container-wrap > div.two-third{
width: 60%;
order: 0;
}
.video-two-thirds .flex-container-wrap > div.two-third-three{
width: 36%;
}
.video-two-thirds .gap{
gap: 35px 33px;
}
.video-two-thirds h2{
font-size: 25px;
line-height: 30px;
display: inline-block;
margin: 0 0 20px 0;
}
.video-two-thirds h2 sup{
vertical-align: 100% !important;
font-size: 10px !important;
line-height: 11px !important;
}
.video-two-thirds h3{
font-size: 20px;
line-height: 26px;
padding: 0 0 15px 0;
}
.video-two-thirds h3 sup{
vertical-align: 80% !important;
line-height: 10px !important;
font-size: 11px !important;
}
/*------- CARDS styles ----------*/
.cards .cards-wrap {
padding: 25px 30px 20px 30px;
}
.cards h2{
font-size: 22px;
line-height: 28px;
height: 68px;
display: inline-block;
}
.cards h2 sup{
vertical-align: 80% !important;
line-height: 10px !important;
font-size: 11px !important;
}
.theme-midblue.cards .card, .theme-deepblue.cards .card {
background-color: #111928;
}
.theme-darkgray.cards .card {
background-color: #303236;
}
.theme-lightgray.cards .card {
background-color: #fff;
}
.theme-white.cards .card {
background-color: #f2f2f2;
}
/*---- bullet lists CARDS ---*/
.cards ul {
margin-bottom: 10px;
}
.cards ul li {
font-size: 15px;
line-height: 21px;
font-weight: 300;
list-style: none;
position: relative;
width: 100%;
list-style-position: inside;
text-indent: -1px;
padding: 0 0 10px 15px;
}
.cards ul li:before {
content: "\FFED";
font-size: 16px;
position: absolute;
left: -1px;
display: inline-block;
background-size: contain;
color: #d5a02a;
margin: 0 0 0 0;
}
.cards .flex-container-wrap > div.three {
width: 31%;
}
/*---------------Project Gallery NAV SPECIAL--------------------*/
.nav-special-container {
display: block;
align-items: center;
justify-content: center;
padding: 0 0 65px 0;
}
/* Hamburger (hidden on desktop) */
#nav-special-toggle {
display: none;
}
.nav-special-toggle-label {
display: block;
font-size: 13px;
line-height: 18px;
color: #a5a5a5;
text-transform: uppercase;
margin-bottom: 25px;
cursor: default;
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.nav-special-menu.gap {gap: 10px 10px;}
ul.nav-special-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
list-style: none;
padding: 0;
max-width: max-content;
margin: auto;
}
@media(max-width: 1200px) {
ul.nav-special-menu {
grid-template-columns: repeat(3, 1fr);
}
}
@media(max-width: 920px) {
ul.nav-special-menu {
grid-template-columns: repeat(2, 1fr);
}
}
ul.nav-special-menu a,
ul.nav-special-menu button {
all: unset;
cursor: pointer;
display: block;
width: 230px;
font-weight: 400;
font-style: normal;
font-size: 13px;
line-height: 17px;
color: #b4b0ac;
background-color:#181f2f;
padding: 8px 8px 8px 10px;
text-decoration: none;
text-align: left;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
border-left: #151b29 5px solid;
text-transform: uppercase;
}
ul.nav-special-menu .first a ,
ul.nav-special-menu .first button {
width: 230px;
border-left: #151b29 5px solid;
background-color: #816231;
text-align: center;
}
ul.nav-special-menu a:hover,
ul.nav-special-menu button:hover {
background-color:#181f2f;
border-left: #816231 5px solid;
}
ul.nav-special-menu button[aria-active="true"] {
color: #b4b0ac;
background-color: #816231;
}
.nav-special-item {
position: relative;
}
.nav-special-item:hover > a,
.nav-special-item:hover > button {
background-color:#816231;
}
/* Dropdown */
.dropdown {
list-style: none;
display: none;
position: absolute;
top: 100%;
left: 0;
background-color:#181f2f;
min-width: 180px;
z-index: 999;
box-sizing:border-box!important;
}
ul.nav-special-menu .dropdown button {
display: block;
font-weight: 400;
font-style: normal;
font-size: 12px;
line-height: 16px;
color: #b4b0ac;
padding: 8px 8px 8px 8px;
text-decoration: none;
background-color:#181f2f;
text-align: left;
}
ul.nav-special-menu .dropdown button:hover {
background-color: #181f2f !important;
}
ul.nav-special-menu .dropdown button[aria-active="true"] {
background-color: #816231 !important;
}
.nav-special-item:hover .dropdown {
display: block;
}
/*------- General gallery ----------*/
/* Provide a dimension basis so that the UI doesn't bounce so much when images load/reload from filters */
.gallery .img-placeholder {
aspect-ratio: 396/231;
}
[data-gallery-results].loading {
min-height: 283px;
}
/*------- PRODUCT GALLERY module ----------*/
.product-gallery .flex-container-wrap > div.gallery{
width: 30%;
padding: 0 0 5px 0;
}
.product-gallery .flex-container.gap2{
gap: 50px 50px;
}
.product-gallery p {
font-size: 15px;
line-height: 24px;
padding: 8px 0 15px 0;
text-transform: uppercase;
}
.product-gallery a:link, .product-gallery a:visited, .product-gallery a:active{
text-decoration: none;
}
.product-gallery a:hover{
color:#dcd8cd!important;
text-decoration-line: underline!important;
text-decoration-color: #816231!important;
text-decoration-thickness: .8px!important;
text-underline-offset: 5px!important;
}
.product-gallery h2{
font-size: 24px;
line-height: 26px;
padding: 0 0 30px 0;
text-align: center;
text-transform: uppercase;
margin: 0 auto 0 auto;
color: #b5b0ad;
letter-spacing: 2px;
}
.product-gallery img.arrow-down-gallery{
display: block;
width: 18px;
padding: 5px 0 0 0;
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
}
.product-gallery img.arrow-down-gallery-inline{
display: inline-block;
width: 16px;
margin: 0 0 0 0;
text-align: left;
padding: 0 0 6px 0;
}
.product-gallery img.arrow-down-gallery-filter{
display: inline-block;
width: 11px;
margin: 0 0 0 5px;
text-align: left;
}
/*--------- global back to top button ---------------------*/
#topBtn {
display: none;
position: fixed;
bottom: 40px;
right: 20px;
z-index: 99; /* Make sure it does not overlap */
background-color: rgba(169, 128, 64, 0.8);
cursor: pointer;
padding-top: 6px;
padding-left: 9px;
width: 25px;
height: auto;
border-radius: 50%;
border: none;
outline: none;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#topBtn:before {
content: "\2303";
color: #f0f0f0;
font-size: 20px;
}
#topBtn:hover {
background-color: #70706F;
}
/*
* Sitemap styles
-------------------------------------------------------------- */
/* Sitemap: Layout sitemap as grid */
.site-map-wrap > ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
list-style: none;
padding: 0;
margin: 0;
}
/* Sitemap: Pad individual top level items */
.site-map-wrap > ul > li {
padding: 25px 30px 20px 30px
}
/* Sitemap: gap betwen child items */
.site-map-wrap > ul ul {
display: flex;
flex-direction: column;
}
/* Sitemap: Style top level item links as headers */
.site-map-wrap > ul > li > a {
display: block;
margin-bottom: 20px;
font-size: 22px;
font-weight: 400;
line-height: 28px;
text-decoration: none !important;
}
.site-map-wrap a {
text-decoration: none !important;
}
.site-map-wrap .sub-menu a {
display: block;
margin-bottom: 4px;
}
/* Sitemap: Theme specific styles */
.theme-darkgray .site-map-wrap > ul > li {
background-color: #303236;
}
.theme-midblue .site-map-wrap > ul > li,
.theme-deepblue .site-map-wrap > ul > li {
background-color: #111928;
}
.theme-lightgray .site-map-wrap > ul > li {
background-color: #fff;
}
.theme-white .site-map-wrap > ul > li {
background-color: #f2f2f2;
}
.theme-white .site-map-wrap > ul > li > a,
.theme-lightgray .site-map-wrap > ul > li > a,
.theme-darkgray .site-map-wrap > ul > li > a {
color: #d5a129;
}
.theme-midblue .site-map-wrap > ul > li > a,
.theme-deepblue .site-map-wrap > ul > li > a {
color: #ffffff;
}
/*-----------------Footer Elements------------------*/
footer{
clear:both;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
background-color: #061222;
color: #c9c8c5;
}
.footer-bg-icon {
background-image: url("../images/logos/New-Millennium-icon.svg");
background-position: center ;
background-repeat: no-repeat;
background-size: 50%, contain;
padding: 30px 0 50px 0;
}
.footer-content{
clear: both;
width: 100%;
padding: 0 40px 0 40px;
position:relative;
box-sizing: border-box;
}
.footer-main-nav { float: left;}
.footer-main-nav ul {
margin: 0 0 50px 0;
}
.footer-main-nav ul li{
display: inline-block;
padding: 0 60px 20px 0;
}
.footer-main-nav ul li a:link, .footer-main-nav ul li a:visited, .footer-main-nav ul li a:active{
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
text-transform: uppercase;
font-size: 12px;
line-height: 19px;
color: #c9c8c5;
-webkit-transition: color 0.3s ease;
-moz-transition: color 0.3s ease;
-ms-transition: color 0.3s ease;
transition: color 0.3s ease;
text-decoration: none;
}
.footer-main-nav ul li a:hover, .footer-main-nav ul li a:focus{
color: #d5a129;
text-decoration: none;
text-underline-offset: 3px;
}
.footer-address {float: left;}
.footer-address address, .footer-address address p, .footer-address address a{
font-family: proxima-nova, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 23px;
color:#c9c8c5;
padding-bottom :5px;
text-decoration: none !important;
}
.footer-address address a:hover {
padding-bottom:5px;
text-decoration: none!important;
cursor: default;
}
/********* social icons *********/
.icon-social {
display: inline-block;
width: 18px;
height: 18px;
background-size: cover;
margin: 5px 0 0 0;
}
/**** hover svg social media icons ******/
.icon-facebook:hover,
.icon-facebook:focus {
filter: invert(15%) sepia(87%) saturate(1000%) hue-rotate(323deg) brightness(75%) contrast(92%);
}
.icon-linkedin:hover,
.icon-linkedin:focus {
filter: invert(15%) sepia(87%) saturate(1000%) hue-rotate(323deg) brightness(75%) contrast(92%);
}
.icon-youtube:hover,
.icon-youtube:focus {
filter: invert(15%) sepia(87%) saturate(1000%) hue-rotate(323deg) brightness(75%) contrast(92%);
}
/**********/
ul.footer-social {
margin: 0 0 0 0;
padding: 8px 0 0 0;
}
ul.footer-social li {
display: inline;
}
ul.footer-social li a {
padding: 0 15px 0 0;
}
ul.footer-social li a:hover, ul.footer-social li a:focus {
padding-bottom: 0;
}
/********* end social icons *********/
.footer-tagline {
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
letter-spacing: 1px;
color:#e9e7e3;
align-self: flex-end;
margin-bottom: 50px;
}
.footer-sdi-logo {
float: right;
width: 200px;
padding: 0 0 50px 0;
align-self: flex-end;
}
.copyright{
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 10px;
line-height: 19px;
color: #9b9997;
float: left;
}
.footer-legal-nav {
float: right;
}
.footer-legal-nav ul li{
display: inline-block;
padding: 0 5px 0 20px;
}
.footer-legal-nav ul li a:link, .footer-legal-nav ul li a:visited, .footer-legal-nav ul li a:active{
font-family: proxima-nova, sans-serif;
font-weight: 300;
font-style: normal;
font-size: 12px;
line-height: 19px;
color: #9b9997;
text-decoration: none;
}
.footer-legal-nav ul li a:hover, .footer-legal-nav ul li a:focus{
color: #d5a129;
text-decoration: none!important;
text-underline-offset: 3px;
}
/****************** 1847 **************************/
@media screen and (max-width : 1847px ){
/*------ bullets module ------ */
.bullets .flex-container-wrap > div.two-third{
width: 80%;
}
.bullets .bullet-wrap {
padding: 30px 30px 20px 30px;
}
/*-----------------SPECIAL NAV ------------------*/
ul.nav-special-menu a,
ul.nav-special-menu button {
width: 250px;
}
ul.nav-special-menu .first a ,
ul.nav-special-menu .first button {
width: 250px;
}
/*--------- Ping pong base layout */
.pingpong .image {
width: 100%;
max-width: 400px;
}
/*--------- end Ping pong */
/*------- column-content ----------*/
.column-content .flex-container-wrap > div.three{
/*flex: 0 auto!important;*/
}
/*------- Flex ---------*/
.flex-container-wrap > div.three{
width: 48%;
}
.icons-section .flex-container-wrap > div.three{
width: 30%;
}
/*-----------------Footer Elements -----------------*/
.footer-bg-icon {
background-image: url("../images/logos/New-Millennium-icon.svg");
background-position: center ;
background-repeat: no-repeat;
background-size: 90%, contain;
padding: 30px 0 50px 0;
}
.footer-sdi-logo {
float: none;
padding: 20px 0 10px 0;
}
.copyright{
float: none;
margin: 5px 0 25px 0;
}
.footer-legal-nav {
float: none;
}
.footer-legal-nav ul li{
display: inline;
padding: 0 20px 0 0;
}
/*----------------------------*/
}
/****************** 1100 **************************/
@media screen and (max-width: 1300px){
/*------- video-two-three module 1100 ----------*/
.video-two-three .gap {
gap: 35px 35px;
}
.video-two-three .gap1 {
gap: 25px 30px;
}
blockquote{
font-size: 20px;
line-height:26px;
width:100%;
margin:0 auto;
padding:20px 20px 20px 25px;
}
blockquote::before{
font-size:50px;
top:20px;
}
blockquote .quote-signature {
font-size: 14px;
margin-top:10px;
}
}
/****************** 1100 **************************/
@media screen and (max-width: 1100px){
/*------- 4 column content ----------*/
.column4-content .flex-container-wrap > div.four{
width: 43%;
margin: 0 0 20px 0;
}
.column4-content .gap1 {
gap: 30px 50px;
}
/*------- video-two-thirds module 1100 ----------*/
.video-two-thirds .flex-container-wrap > div.two-third{
width: 45%;
}
.video-two-thirds .flex-container-wrap > div.two-third-three{
width: 45%;
}
}
/****************** 995 **************************/
@media screen and (max-width: 995px){
/*------- video-full module 995 ----------*/
.video-full .column-wrap {
padding: 25px 0 10px 0;
}
/*------- video-two-three module styes ----------*/
.video-two-three .flex-container-wrap > div.two{
width: 100%;
}
.video-two-three .flex-container-wrap > div.three{
width: 100%;
}
.video-two-three .gap{
gap: 20px 20px;
}
.video-two-three .gap1{
gap: 20px 20px;
}
/*------- video-two-thirds module styles ----------*/
.video-two-thirds .flex-container-wrap > div.two-third{
width: 100%!important;
order: 0;
}
.video-two-thirds .flex-container-wrap > div.two-third-three{
width: 100%!important;
order: -1!important;
}
.video-two-thirds .gap{
gap: 0 0!important;
}
/*------- top-section module ----------*/
.top-section h1.page-title {
font-size: 30px;
line-height: 36px;
}
.top-section h1.page-title sup {
vertical-align: 60% !important;
line-height: 18px !important;
font-size: 16px !important;
}
.top-section h2.page-subtitle {
font-size: 20px;
line-height: 26px;
}
/*-------- pingpong layout 995 ---------*/
.pingpong .content-block {
flex-direction: column;
text-align: left;
gap: 0px;
}
/* Row 1: Text above Image (default column order) */
.pingpong .row-1 .text {
order: 1;
max-width: 100%;
margin: 0 0 30px 0;
}
.pingpong .row-1 .image {
order: 2;
margin: 0 0 0 0;
}
/* Row 2: Image above Text */
.pingpong .row-2 .image {
order: 2;
margin: 0 0 0 0;
}
.pingpong .row-2 .text {
order: 1;
max-width: 100%;
margin: 0 0 10px 0;
}
.pingpong .image {
width: 100%;
max-width: 100%;
}
/*--------*/
/*------- Product gallery 995 ----------*/
.product-gallery .flex-container-wrap > div.gallery{
width: 46%!important;
}
/*------- Callout-left 995 ----------*/
.callout-cta .textwrap {
padding: 0 30px 0 0;
}
.callout-wrap{
max-width: 300px;
}
img.image-callout-cta{
width: 200px;
padding: 10px 0 0 0;
}
/*------- Flex 995 ---------*/
.flex-container-wrap > div.full{
width: 100%;
}
.flex-container-wrap > div.one{
width: 90%;
}
.flex-container-wrap > div.two-third{
width: 55%;
}
.flex-container-wrap > div.two-third-three{
width: 35%;
}
.flex-container-wrap > div.four{
width: 48%;
}
/*------- column-content 995 ----------*/
.column-content .flex-container-wrap > div.three{
flex: 50%!important;
}
.column-content .flex-container-wrap > div.two{
flex: auto!important;
}
/*--------------- icons-box module 995 ------------------*/
.icons-section .flex-container-wrap > div.four{
width: 35%;
}
.icons-section .icons-wrap {
padding: 15px 0 20px 0;
width: 100%;
}
.icons-section .icon-head {
font-size: 20px;
line-height: 28px;
padding: 10px 20px 10px 20px;
}
/*------ bullets module 995 ------ */
.bullets .flex-container-wrap > div.two-third{
width: 100%;
}
.bullets .bullet-wrap {
padding: 25px 25px 20px 25px;
}
/*---------------- Footer Elements 995 -----------------*/
.footer-bg-icon {
background-image: url("../images/logos/New-Millennium-icon.svg");
background-position: center ;
background-repeat: no-repeat;
background-size: 100%, contain;
padding: 30px 0 50px 0;
}
/*------- accordion-panel module 995 ----------*/
.accordion-panel .flex-container-wrap > div.two-third{
width: 90%!important;
}
}
/****************** 845 *************************/
@media screen and (max-width: 845){
/*------- column-content 845 ----------*/
.column-content .flex-container-wrap > div.three{
flex: auto!important;
width: auto!important;
}
.column-content .flex-container-wrap > div.two{
flex: auto!important;
width: auto!important;
}
}
/******************800**************************/
@media screen and (max-width: 800px) {
.cards .flex-container-wrap {
justify-content: center;
margin: 0 auto;
}
.cards .flex-container-wrap > div.three {
width: calc(50% - 12.5px);
}
.site-map-wrap > ul {
grid-template-columns: repeat(2, 1fr);
}
}
/******************768**************************/
@media screen and (max-width: 768px){
/*-----------------Header Elements 768------------------*/
header {
clear: both;
width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/*-----------------SPECIAL NAV 768------------------*/
.nav-special-container {
display: block;
align-items: center;
justify-content: center;
padding: 0 0 35px 0;
}
.nav-special-toggle-label {
color: #cec7bf !important;
padding: 8px 10px;
cursor: pointer;
margin-bottom: 10px;
text-align: center;
}
.nav-special-toggle-label:hover{
color: #af8b36;
}
ul.nav-special-menu, ul.nav-special-menu .first {
flex-direction: column;
width: 100%;
display: none;
}
.nav-special-menu.gap {gap: 5px 10px;}
#nav-special-toggle:checked + .nav-special-toggle-label + ul.nav-special-menu {
display: flex;
}
.nav-special-item:hover .dropdown {
display: none;
}
.nav-special-item:has[aria-active="true"] > .dropdown {
display: block;
position: static;
}
.nav-special-item:has(ul) > button:before{
content: "\25be";
float:right;
color:#b4b0ac;
}
ul.nav-special-menu button {
width: 100%;
min-width: none;
box-sizing: border-box;
border-bottom: 1px solid #2c2f36;
}
img.down-arrow-nav{
display: block;
width:18px;
padding: 10px 0 5px 0;
margin-right: auto;
margin-left: auto;
}
/*---- These can go with your existing nav-special-item styles------- */
.nav-special-item button[aria-active="true"] {
color: #b4b0ac;
background-color: #816231;
}
/*------- Product gallery 768 ----------*/
.product-gallery .flex-container-wrap > div.gallery{
width: 100%!important;
}
/*----------------- cards background images 768 mobile ------------------*/
/* Can't drop this at mobile, this is just a utility class */
/* .has-bg-image { display: none;} */
/*----------------- Hero cta module - 768 ------------------------*/
.hero-cta h2 {
font-size: 22px;
line-height: 26px;
}
.hero-cta h2 sup {
font-size: 14px;
vertical-align: 40% !important;
}
.hero-cta .hero-box-right {
width: 100%;
float: left;
margin: 30px 0 0 0;
}
.hero-cta .hero-box-left {
width: 100%;
float: left;
margin: 30px 0 0 0;
}
/*------- accordion-panel module ----------*/
.accordion-panel .flex-container-wrap > div.two-third{
width: 100%!important;
}
/*------- CARDS 768 ----------*/
.cards h2{
font-size: 20px;
line-height: 26px;
padding-bottom: 10px;
height: auto;
}
.cards h2 sup{
vertical-align: 70% !important;
}
/*---------- specifications 768 ---------*/
.specifications .content{
padding-right:0;
padding-left: 0;
}
.specifications .specs-wrap {
padding: 20px 20px 0 40px;
}
.specifications .list li.last{
padding: 0 0 10px 0;
}
/*------- Flex CARDS 768 ---------*/
.flex-container-wrap > div.three{
width: 100%;
}
.flex-container-wrap > div.two{
width: 100%;
}
.flex-container-wrap > div.four{
width: 100%;
}
.general-content .flex-container-wrap > div.two{
width: 100%;
padding: 0 0 0 0;
}
/*-----------Footer Elements 768 ----------------*/
.footer-main-nav ul {
margin: 0 0 30px 0;
}
.footer-address{
float: none;
}
.footer-tagline {
float: none;
padding: 30px 0 20px 0;
align-self: flex-start;
margin-bottom: 0!important;
}
.footer-sdi-logo {
float: none;
padding: 10px 0 20px 0;
align-self: flex-start;
}
}
/******************640**************************/
@media screen and (max-width: 640px){
/*------- masthead mobile ----------*/
.header-content {
padding-top: 10px;
}
.topnav {
position: relative;
margin-bottom: 1rem;
padding: 0;
text-align: center;
}
.topnav ul li:last-child {
padding-right: 0;
}
.header-logo {
float: none;
margin: 0 auto 1rem auto;
}
.search-wrap {
float: none;
margin-top: 0;
width: 100%;
}
/*------- top-section module ----------*/
.top-section h1.page-title {
font-size: 28px;
line-height: 33px;
padding: 30px 0 0 0;
}
.top-section h1.page-title sup {
vertical-align: 60% !important;
line-height: 18px !important;
font-size: 14px !important;
}
.top-section h2.page-subtitle {
font-size: 17px;
line-height: 22px;
padding: 5px 0 25px 0;
}
.top-section h2.page-subtitle sup{
line-height: 6px;
padding: 0 0 0 1px;
}
.top-section .breadcrumb ul {
padding: 10px 5px 10px 0px;
}
.top-section .breadcrumb ul li {
display: inline;
font-size: 14px;
line-height: 22px;
padding: 0 0 0 0!important;
}
/*------- 4 column content 640 ----------*/
.column4-content .content{
padding-right:40px;
padding-left: 40px;
}
.column4-content .flex-container-wrap > div.four{
width: 100%;
}
/*------- Callout 640 ----------*/
.callout h2{
font-size: 20px;
line-height: 26px;
padding: 0 0 10px 0;
}
.callout h2 sup{
vertical-align: 60% !important;
}
.callout-cta .textwrap {
padding: 0 0 0 0;
}
.callout-cta h2{
font-size: 20px;
line-height: 26px;
}
.callout-cta h2 sup{
vertical-align: 60% !important;
}
.callout-cta h3{
font-size: 16px;
line-height: 21px;
}
.callout-cta h3 sup{
vertical-align: 60% !important;
}
img.arrow-down-callout{
padding: 15px 0 0 0;
}
.callout-wrap{
max-width: 250px;
}
img.image-callout-cta{
width: 350px;
padding: 10px 0 0 0;
}
/*----------- Hero-cta 640 ----------------------*/
.hero-cta .hero-media {
display: none;
}
.hero-cta .content {
padding: 0;
min-height: none;
}
.hero-cta .hero-box-right,
.hero-cta .hero-box-right {
margin: 0;
}
/*----------- Hero-quote module - STYLES 640 ----------------------*/
.hero-quote .filename-hero-img-quote {
background-image: url(../images/background/fpo-hero-quote-m.jpg);
}
.hero-quote .filename-hero-img-quote-dark {
background-image: url(../images/background/fpo-hero-quote-dark-m.jpg);
}
.hero-quote .hero-box.right-quote, .hero-quote .hero-box.left-quote{
background-color: rgba(6, 18, 34, 0.9);
padding: 25px 30px 25px 30px!important;
width: 100%;
margin: 45px 0 0 0!important;
}
.hero-quote .hero-box.right-quote p, .hero-quote .hero-box.left-quote p{
font-size: 22px;
line-height: 32px;
}
.hero-quote sup {
font-size: 12px;
line-height: 7px;
}
/*-----------Flex 640 ----------------*/
.flex-container-wrap > div.full{
width: 100%;
}
.flex-container-wrap > div.one{
width: 100%;
}
.flex-container-wrap > div.two-third{
width: 100%;
}
.flex-container-wrap > div.two-third-three{
width: 100%;
}
.flex-container-wrap > div.four{
width: 100%;
}
/*--------------- icons-box module 640 ------------------*/
.icons-section .flex-container-wrap > div.three{
width: 100%;
}
.icons-section .icon-head {
font-size: 18px;
line-height: 24px;
width: 100%;
border-radius: 0;
}
.icons-section .icons-wrap {
padding: 15px 0 15px 0;
}
.icons-section .icons-wrap.first {
padding: 25px 0 15px 0;
}
.icons-section .flex-container-wrap > div.four{
width: 100%;
}
/*-----------Site Map 640 ----------------*/
.site-map-wrap > ul {
grid-template-columns: repeat(1, 1fr);
}
/*-----------Footer Elements 640 ----------------*/
.footer-bg-icon {
background-image: url("../images/logos/New-Millennium-icon.svg");
background-position: top ;
background-repeat: no-repeat;
background-size: 150%, contain;
padding: 30px 0 50px 0;
}
.footer-main-nav ul {
margin: 0 0 30px 0;
}
.footer-main-nav ul li{
display: block;
padding: 0 0 10px 0;
}
.footer-tagline {
font-size: 18px;
}
.footer-legal-nav {
margin: 10px 0 0 0;
}
.footer-legal-nav ul li{
display: block;
padding: 5px 20px 5px 0;
}
.footer-legal-nav ul li a:link, .footer-legal-nav ul li a:visited, .footer-legal-nav ul li a:active{
font-size: 12px;
text-decoration: none!important;
}
/*-----------------*/
/*-----------------Google Site Search 640 ----------------*/
.gs-result {
grid-template-columns: 1fr;
grid-template-areas:
"title"
"image"
"url"
"snippet";
border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
padding-bottom: 2rem !important;
}
div.gsc-url-top, div.gsc-url-top span {
margin-bottom: 0 !important;
padding: 0 !important;
}
.gs-webResult .gs-visibleUrl {
margin-bottom: 0 !important;
}
}
/******************600**************************/
@media screen and (max-width: 600px) {
.cards .flex-container-wrap {
flex-direction: column;
align-items: center;
}
.cards .flex-container-wrap > div.three {
width: 100%;
/* max-width: 300px; */
}
}
/******************480**************************/
@media screen and (max-width: 480px){
/*----------Global Elements 480 ----------------*/
p {
font-size: 14px;
line-height: 20px;
padding: 0 0 10px 0;
}
/*----------------- Hero-cta module - 480 ---------*/
.hero-cta .filename-hero {
background-image: none;
height: auto;
}
.hero-cta .content {
padding: 0 0 0 0 !important;
}
/*----------- Hero-quote module - 480 ----------------------*/
.hero-quote .content {
padding: 0 30px 0 30px !important;
}
.hero-quote .hero-box.right-quote, .hero-quote .hero-box.left-quote{
margin: 30px 0 0 0!important;
}
}