/* global */
html { scroll-behavior: smooth }
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; color: #000; font-family: 'Open Sans', sans-serif }
body.no-scroll { overflow: hidden }
a { text-decoration: none !important }
.sticky { position: fixed !important; top: 0; width: 100%; z-index: 10000 }
#overlay-sidebar { background-color: rgba(0, 0, 0, 0.7); display: none; height: 100vh; opacity: 0; position: fixed; transition: all 0.5s ease-in-out; width: 100vw; z-index: 999 }
#overlay-sidebar.open { display: block; opacity: 1 }
header { -moz-box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, .25); -webkit-box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, .25); background-color: #FFF; box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, .25); left: 0; }
header #header-logo { display: block; margin: 20px 0; width: 40% }
header #btn-sidebar { display: none }
header #header-right { height: 100%; position: relative }
header #header-contact { padding-top: 25px }
header #header-links p { color: #212322; font-size: 24px; font-weight: 700; margin: 0 }
header #header-links p + p { padding-left: 20px }
header #header-links p a { color: #212322; font-weight: 700; padding-left: 3px }
header #header-social { font-size: 20px; padding-left: 30px }
header #header-social a + a { margin-left: 10px }
header #header-social a.facebook { color: #4267B2 }
header #header-social a.instagram { color: #C13584 }
header #header-social a.linkedin { color: #0072B1 }
header #header-nav { bottom: 5px; position: absolute; right: 0; margin-top: 40px; }
header #header-nav .navbar { padding: 0 }
header #header-nav .navbar .nav-item .nav-link { color: #000; font-size: 16px; padding: 7px 24px 9px 24px; text-transform: uppercase }
header #header-nav .navbar .nav-item .nav-link:hover, header #header-nav .navbar .nav-item .nav-link.active, header #header-nav .navbar .nav-item .nav-link.show { color: #C8102E }
header #header-nav .navbar .nav-item .dropdown-menu { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; padding-bottom: 6px; padding-top: 0; margin-top: 5px; border: none; }
header #header-nav .navbar .nav-item .dropdown-menu .dropdown-item { font-size: 16px; text-transform: uppercase }
header #header-nav .navbar .nav-item .dropdown-menu .dropdown-item:hover, header #header-nav .navbar .nav-item .dropdown-menu .dropdown-item:active { background-color: #fff; color: #C8102E }
#header-spacer { height: 0px }
#strapline { padding-bottom: 70px; text-align: center }
#strapline h1 { color: #4F4F4F; font-size: 42px; font-weight: 700; margin: 0 0 10px 0 }
#strapline p { font-size: 22px; font-style: italic; font-weight: 300; margin: 0 }
.no-wrap {
white-space: nowrap;
}
.grid-sizer, .grid-item { width: 33.333%; }
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
flex: 0 0 33.333%;
}
#recent-projects { padding: 50px 0 80px 0; background-color: #212322; color: #fff }
#recent-projects #recent-projects-top { margin-bottom: 30px }
#recent-projects h5 { color: #fff; font-size: 27px; font-weight: 700; margin: 0; text-transform: uppercase; font-family: 'Montserrat', sans-serif }
#recent-projects #recent-projects-all { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; border: 2px solid #fff; color: #fff; font-size: 18px; padding: 10px 25px; text-transform: uppercase; transition: 0.3s; border-radius: 4px; }
#recent-projects #recent-projects-all:hover { background-color: #C8102E; border-color: #C8102E; color: #FFF }
#recent-projects h3 { color: #fff; font-size: 21px; margin: 0; font-weight: 700; padding-bottom: 10px; }
#recent-projects p { color: #fff; font-size: 15px; font-weight: 100; padding-bottom: 10px; }
#recent-projects .read-more a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #212322; color: #fff; font-size: 18px; padding: 10px 25px; text-transform: uppercase; transition: 0.3s; border: solid 2px #fff; border-radius: 4px; }
#recent-projects .read-more a:hover { background-color: #C8102E; border-color: #C8102E; color: #FFF }
#projects { margin-bottom: 50px; }
#projects #rojects-top { margin-bottom: 30px }
#projects h5 { font-size: 27px; margin: 0; text-transform: uppercase; font-family: 'Montserrat', sans-serif }
#projects #projects-all { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; border: 2px solid #fff; color: #fff; font-size: 18px; padding: 10px 25px; text-transform: uppercase; transition: 0.3s; border-radius: 4px; }
#projects #projects-all:hover { background-color: #C8102E; border-color: #C8102E; color: #FFF }
#projects h3 { font-size: 21px; margin: 0; font-weight: 700; padding-bottom: 10px; }
#projects p { font-size: 15px; font-weight: 100; padding-bottom: 10px; }
#projects .read-more a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #fff; color: #212322; font-size: 18px; padding: 10px 25px; text-transform: uppercase; transition: 0.3s; border: solid 2px #212322; border-radius: 4px; }
#projects .read-more a:hover { background-color: #C8102E; border-color: #C8102E; color: #FFF }
#page-banner .page-banner-gradient { background: rgb(0,0,0); background: -moz-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.50) 40%); background: -webkit-linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.50) 40%); background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.50) 40%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1); bottom: 0; height: 170px; left: 0; position: absolute; width: 100% }
#cta { background-color: #E6E6E6; padding: 50px 0 }
#cta h5 { color: #212322; font-size: 29px; margin: 0 100px 0 0; font-family: 'Montserrat', sans-serif }
#cta h6 { font-size: 43px; font-style: italic; margin: 0 100px 0 0 }
#cta a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #212322; color: #fff; font-size: 18px; padding: 10px 25px; text-transform: uppercase; transition: 0.3s; border-radius: 4px; }
#cta a:hover { background-color: #C8102E; color: #FFF }
footer { padding: 80px 0 }
footer #footer-logo { display: block }
footer #footer-logo img { width: 150px; }
footer #footer-contact { font-size: 16px }
footer #footer-contact .footer-address { margin: 0 0 0 40px }
footer #footer-contact .footer-address i { color: #C8102E; }
footer #footer-contact address { margin-bottom: 0.5rem; }
footer #footer-contact address .co-name { font-size: 20px; font-weight: 700; }
footer #footer-contact address .co-address { margin-top: 10px }
footer #footer-contact address .co-tel { margin-top: 10px }
footer #footer-contact p { margin: 0 0 0 50px }
footer #footer-contact a { color: #000; font-weight: 700; padding-left: 3px }
footer #footer-social { font-size: 36px; text-align: right }
footer #footer-social a + a { margin-left: 10px }
footer #footer-social a.facebook { color: #000000 }
footer #footer-social a.facebook:hover { color: #4267B2 }
footer #footer-social a.twitter { color: #000000 }
footer #footer-social a.twitter:hover { color: #1DA1F2 }
footer #footer-social a.instagram { color: #000000 }
footer #footer-social a.instagram:hover { color: #C13584 }
footer #footer-social a.linkedin { color: #000000 }
footer #footer-social a.linkedin:hover { color: #0072B1 }
footer #footer-links { font-size: 16px; padding-top: 15px; text-align: right; text-transform: uppercase }
footer #footer-links a { color: #000 }
footer #footer-links span { padding: 0 7px; position: relative; top: -1px }
#footer-bottom { background-color: #2D2D2E; color: #FFF; font-size: 14px; font-weight: 300; padding: 20px 0 }
#footer-bottom #footer-bottom-copyright br { display: none }
#footer-bottom #footer-bottom-designed { text-align: right }
#footer-bottom #footer-bottom-designed img { padding-left: 5px; position: relative; top: -1px; width: 220px }
footer #iso-9000-logo img { width: 141px; margin-right: 30px }
footer #fsb-logo img { width: 80px; margin-right: 30px }
footer #equal-opp-logo img { width: 147px; margin-right: 30px }
footer #tica-logo img { width: 130px; }
/* page */
#page-banner { background-size: cover !important; color: #FFF; height: 231px; margin-bottom: 50px; position:relative; }
#page-banner.about { background: url('/img/banner/about.webp') no-repeat center bottom }
#page-banner.commercial { background: url('/img/banner/commercial.webp') no-repeat center bottom }
#page-banner.contact-us { background: url('/img/banner/contact-us.webp') no-repeat center bottom }
#page-banner.cookie-policy { background: url('/img/banner/cookie-policy.webp') no-repeat center bottom }
#page-banner.domestic { background: url('/img/banner/domestic.webp') no-repeat center bottom }
#page-banner.error { background: url('/img/banner/404.webp') no-repeat center bottom }
#page-banner.faqs { background: url('/img/banner/faqs.webp') no-repeat center bottom }
#page-banner.privacy-policy { background: url('/img/banner/privacy-policy.webp') no-repeat center bottom }
#page-banner.projects { background: url('/img/banner/case-studies.webp') no-repeat center bottom }
#page-banner.reviews { background: url('/img/banner/reviews.webp') no-repeat center bottom }
#page-banner.team { background: url('/img/banner/team.webp') no-repeat center bottom }
#page-banner.product-marine { background: url('/img/banner/product-marine.webp') no-repeat center center }
#page-banner.product-energy { background: url('/img/banner/product-energy.webp') no-repeat center center }
#page-banner.product-industrial { background: url('/img/banner/product-industrial.webp') no-repeat center bottom }
#page-banner.product-automotive { background: url('/img/banner/product-automotive.webp') no-repeat right center }
#page-banner.product-specialist { background: url('/img/banner/product-specialist.webp') no-repeat right center }
#page-banner.product-personnel { background: url('/img/banner/product-personnel.webp') no-repeat center center }
#page-banner .container { height: 100%; position: relative }
#page-banner h1 { bottom: 50px; font-size: 44px; left: 12px; margin: 0; position: absolute; font-family: 'Montserrat', sans-serif; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.62); }
#page-banner h1 span { font-weight: 700; }
/* project listing */
.project-listing { color: #FFF !important; display: block; margin-bottom: 24px; position: relative }
.project-listing .project-listing-hover { -moz-border-bottom-right-radius: 30px; -moz-border-top-left-radius: 30px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-border-bottom-right-radius: 30px; -webkit-border-top-left-radius: 30px; -webkit-transition: 0.3s; background-color: rgba(0, 0, 0, .7); border-bottom-right-radius: 30px; border-top-left-radius: 30px; height: 80%; left: 7%; opacity: 0; padding: 30px; position: absolute; top: 10%; transition: 0.3s; width: 86% }
.project-listing .project-listing-hover h3 { font-size: 32px; margin: 0 }
.project-listing .project-listing-hover div { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #FFF; bottom: 30px; color: #000; font-size: 18px; left: 30px; padding: 10px 25px; position: absolute; text-transform: uppercase; transition: 0.3s }
.project-listing .project-listing-hover div:hover { background-color: #6C6C6C; color: #FFF }
.project-listing:hover .project-listing-hover { opacity: 1 }
.sidebar-project-listing { color: #000 !important; display: block; margin-bottom: 24px; margin-top: 24px; }
.sidebar-project-listing h3 { font-size: 20px; }
.sidebar-project-listing .sidebar-project-image { }
.sidebar-project-listing .sidebar-project-date { font-size: 18px!important; text-transform: uppercase; }
/* sidebar */
#sidebar { -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); -moz-transition: 0.5s all ease; -o-transition: 0.5s all ease; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); -webkit-transition: 0.5s all ease; background-color: #282F36; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1); height: 100vh; left: -300px; overflow: auto; padding-bottom: 120px; position: fixed; top: 0; transition: 0.5s all ease; width: 300px; z-index: 1000 }
#sidebar.open { left: 0 }
#sidebar #btn-sidebar-close { background-color: transparent; border: none; color: #FFF; display: block; font-size: 29px; padding: 10px 15px; position: absolute; right: 0; top: 0 }
#sidebar ul { font-size: 18px; list-style: none; margin: 50px 0 0 0; padding: 0 }
#sidebar ul li a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #FFF; display: block; padding: 5px 15px; position: relative; transition: 0.3s; }
#sidebar ul li a.collapse-trigger:after { content: '\f0d7'; font-family: 'Font Awesome 6 Pro'; font-weight: 700; position: absolute; right: 15px; top: 4px }
#sidebar ul ul { margin: 0 }
#sidebar ul ul li a { padding-left: 30px }
@media (max-width: 4200px) {
/* global */
.container { max-width: 1640px }
}
@media (max-width: 1669px) {
/* global */
.container { max-width: 1140px }
header #header-logo { margin: 15px 0 }
header #header-contact { padding-top: 10px }
header #header-links p { font-size: 20px }
header #header-links p + p { padding-left: 15px }
header #header-social { font-size: 18px; padding-left: 24px }
header #header-nav .navbar .nav-item .nav-link { font-size: 14px; padding: 5px 14px 8px 14px }
header #header-nav .navbar .nav-item .dropdown-menu { margin-top: 5px; }
header #header-nav .navbar .nav-item .dropdown-menu .dropdown-item { font-size: 14px }
/*#header-spacer { height: 94px }*/
#strapline { padding-bottom: 65px }
#strapline h1 { font-size: 36px; margin-bottom: 7px }
#strapline p { font-size: 20px }
#recent-projects { padding-bottom: 45px }
#recent-projects h5 { font-size: 24px }
#recent-projects #recent-projects-all { font-size: 16px; padding: 8px 22px }
#cta { padding: 45px 0 }
#cta h5 { font-size: 26px; margin: 0 60px 0 0 }
#cta h6 { font-size: 34px; margin: 0 60px 0 0 }
#cta a { font-size: 16px; padding: 9px 18px }
footer { padding: 70px 0 }
footer #footer-contact { font-size: 15px }
footer #footer-contact address { margin: 0 }
footer #footer-contact p { margin: 0 0 0 25px }
footer #footer-social { font-size: 22px }
footer #footer-links { font-size: 14px; padding-top: 18px }
#footer-bottom { font-size: 15px; padding: 18px 0 }
#footer-bottom #footer-bottom-designed img { height: 12px; width: 180px }
#cta a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #212322; color: #fff; font-size: 16px; padding: 10px 14px; text-transform: uppercase; transition: 0.3s; border-radius: 4px; }
#recent-projects .read-more a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #212322; color: #fff; font-size: 16px; padding: 10px 14px; text-transform: uppercase; transition: 0.3s; border: solid 1px #fff; border-radius: 4px; }
#projects .read-more a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #fff; color: #212322; font-size: 16px; padding: 10px 14px; text-transform: uppercase; transition: 0.3s; border: solid 1px #212322; border-radius: 4px; }
.project-listing { margin-top: 30px; }
header #header-nav { bottom: 5px; position: absolute; right: 0; /*margin-top: 50px;*/ }
/*footer #footer-contact .footer-address { margin: 0 }*/
footer #footer-contact span br { display: none; }
footer #footer-logo img { width: 200px; }
footer #footer-logos img { padding-right: 8px!important; }
/* page */
#page-banner { height: 250px; margin-bottom: 40px }
#page-banner h1 { bottom: 40px; font-size: 36px }
/* project listing */
.project-listing .project-listing-hover { -moz-border-bottom-right-radius: 24px; -moz-border-top-left-radius: 24px; -webkit-border-bottom-right-radius: 24px; -webkit-border-top-left-radius: 24px; border-bottom-right-radius: 24px; border-top-left-radius: 24px; padding: 24px }
.project-listing .project-listing-hover h3 { font-size: 26px }
.project-listing .project-listing-hover div { bottom: 24px; font-size: 16px; left: 24px; padding: 8px 22px }
}
@media (max-width: 1199px) {
/* global */
.container { max-width: 960px }
header #header-links p { font-size: 20px }
header #header-links p + p { padding-left: 10px }
header #header-social { font-size: 16px; padding-left: 18px }
header #header-nav .navbar .nav-item .nav-link { font-size: 13px; padding: 5px 9px 6px 9px }
header #header-nav .navbar .nav-item .dropdown-menu .dropdown-item { font-size: 13px }
/*#header-spacer { height: 84px }*/
#strapline { padding-bottom: 60px }
#strapline h1 { font-size: 32px; margin-bottom: 5px }
#strapline p { font-size: 18px }
#recent-projects { padding-bottom: 40px }
#recent-projects h5 { font-size: 22px }
#recent-projects #recent-projects-all { font-size: 14px; padding: 6px 19px }
#cta { padding: 40px 0 }
#cta h5 { font-size: 36px; margin: 0 45px 0 0 }
#cta h6 { font-size: 30px; margin: 0 45px 0 0 }
footer { padding: 60px 0 }
footer #footer-contact { font-size: 14px }
footer #footer-contact address { margin: 0 0 0 30px }
footer #footer-contact p { margin: 0 0 0 40px }
footer #footer-social { font-size: 20px }
footer #footer-links { font-size: 12px; padding-top: 16px }
#footer-bottom { font-size: 14px; padding: 15px 0 }
#footer-bottom #footer-bottom-designed img { height: 11px; width: 160px }
/* page */
#page-banner { height: 300px; margin-bottom: 30px }
#page-banner h1 { bottom: 30px; font-size: 30px }
/* project listing */
.project-listing .project-listing-hover { -moz-border-bottom-right-radius: 18px; -moz-border-top-left-radius: 18px; -webkit-border-bottom-right-radius: 18px; -webkit-border-top-left-radius: 18px; border-bottom-right-radius: 18px; border-top-left-radius: 18px; padding: 18px }
.project-listing .project-listing-hover h3 { font-size: 22px }
.project-listing .project-listing-hover div { bottom: 18px; font-size: 14px; left: 18px; padding: 6px 19px }
}
@media (max-width: 991px) {
/* global */
.container { max-width: 720px }
header #header-logo { margin: 10px 0; width: 180px }
header #btn-sidebar { align-items: center; background-color: #FFF; border: none; color: #000; display: flex; font-size: 40px }
/*#header-spacer { height: 75px }*/
#recent-projects { padding-bottom: 30px }
#cta { padding: 25px 0 30px 0; text-align: center }
#cta h5 { margin: 0 0 10px 0; font-size: 26px; }
#cta h6 { margin: 0 0 20px 0 }
#cta a { display: inline-block }
footer { padding: 40px 0 25px 0 }
footer #footer-logo { margin: 0 auto; width: 300px }
footer #footer-logos { text-align: center; margin-bottom: 40px; }
footer #footer-logos img { margin-bottom: 10px; }
footer #footer-contact { text-align: center }
footer #footer-contact address { margin: 20px 0 0 0 }
footer #footer-contact p { margin: 10px 0 0 0 }
footer #footer-social { margin-top: 10px; text-align: center }
footer #footer-links { font-size: 12px; padding-top: 30px; text-align: center }
#footer-bottom { padding: 12px 0 11px 0; text-align: center }
#footer-bottom #footer-bottom-designed { padding-top: 5px; text-align: center }
#footer-bottom #footer-bottom-designed img { height: 12px; width: 180px }
footer #footer-contact .footer-address { margin: 0 0 30px 0 }
/* page */
#page-banner { height: 250px }
#page-banner h1 { font-size: 26px }
}
@media (max-width: 767px) {
/* global */
.container { max-width: 540px }
#strapline { padding-bottom: 55px }
#strapline h1 { font-size: 28px; margin-bottom: 3px }
#strapline p { font-size: 16px }
header #header-logo { margin: 10px 0; width: 150px }
/* page */
#page-banner { height: 200px }
#page-banner h1 { font-size: 22px }
/* project listing */
.project-listing .project-listing-hover h3 { font-size: 20px }
.project-listing .project-listing-hover div { display: none }
}
@media (max-width: 575px) {
/* global */
.container { max-width: 100% }
header #header-logo { width: 150px }
header #btn-sidebar { font-size: 30px }
/*#header-spacer { height: 68px }*/
#recent-projects { text-align: center }
#recent-projects #recent-projects-top { }
#recent-projects h5 { margin-bottom: 12px }
#cta h5 { font-size: 28px; margin: 0 0 10px 0 }
#cta h6 { font-size: 26px; margin: 0 0 15px 0 }
footer #footer-logo { width: 260px }
#footer-bottom #footer-bottom-copyright span { display: none }
#footer-bottom #footer-bottom-copyright br { display: inline }
#footer-bottom #footer-bottom-designed { padding-top: 8px }
#footer-bottom #footer-bottom-designed img { display: block; height: 11px; margin: 5px auto 0 auto; width: 160px }
/* page */
#page-banner h1 { bottom: 15px; font-size: 22px; left: 0; padding: 0 50px; text-align: center }
/* sidebar */
#sidebar { left: -100vw; width: 100vw }
}
@media (max-width: 374px) {
/* global */
header #header-logo { width: 150px }
header #btn-sidebar { font-size: 24px }
/*#header-spacer { height: 61px }*/
#strapline h1 { font-size: 24px }
#strapline p { font-size: 15px }
#cta h5 { font-size: 28px }
#cta h6 { font-size: 22px }
footer #footer-logo { width: 225px }
/* page */
#page-banner h1 { font-size: 20px; padding: 0 30px }
}