/*!
	@file S&P Website Template - Style
	@version 1.2.0
	
	@description An S&P Website Template file that styles the
      page and responds based on the device the website is being
      viewed on.
	@copyright Copyright (c) 2016-2024 S&P Ventilation Group, North
      America. All rights reserved.
*/
/* FMC Style */

@import url('https://use.typekit.net/hji1dmf.css');

body {
	font-family: "futura-pt", sans-serif !important;
	font-size: 1.2rem;
	line-height: 1.5;
	margin: 0;
	padding: 0
}

*,
::after,
::before {
	font-family: "futura-pt", sans-serif !important
}

#siteseal,
img.social-icons {
	height: 30px
}

.overlay,
.text {
	position: absolute
}

.apage a:link,
.apage a:visited,
.apage2 a:link,
.apage2 a:visited,
.apg,
.footerlist a:link,
.footerlist a:visited,
.text,
ul.btm-secondary li a {
	color: #fff
}


html {
	scroll-behavior: smooth
}

.content.with-margin {
	margin-top: 70px
}

#siteseal {
	display: flex;
	justify-content: flex-start
}

.bg-darkBlue {
	background-color: #003b5c;
	color: white;
}

.darkBlue {
	color: #003B5C;
}

a.btn.bg-darkBlue.m-1:hover {
	color: #ffffff; /* Change text color to white */
	background-color: #003B5C; /* Optional: Keep background same or change it */
	text-decoration: none; /* Prevent underline on hover */
  }

.navbar {
	background-color: #000
}

#navbarNav {
	margin-left: 11rem
}

.semi-bold {
	font-weight: 500; /* or 600 */
  }

.NCA {
	margin-left: 40rem
}

@media screen and (max-width:1745px) {
	.NCA {
		margin-left: 30rem
	}
}

@media screen and (max-width:1585px) {
	.NCA {
		margin-left: 20rem
	}
}

@media screen and (max-width:1430px) {
	.NCA {
		margin-left: 10rem
	}
}

@media screen and (max-width:1265px) {
	.NCA {
		margin-left: 5rem
	}
}

.splogo {
	width: 100%;
	height: auto;
	display: block
}

@media screen and (max-width:1024px) {
	.splogo {
		width: 100%;
		height: auto;
		display: block
	}
}

ul {
	margin-left: 3rem
}

ul.apage,
ul.footerlist {
	list-style-type: none;
	margin: 1.5rem;
	padding: 0
}

.footerlist>li:first-child {
	font-weight: 700;
	font-size: 1rem
}

.footerlist {
	line-height: 2.5rem
}

.headerlogo {
	box-shadow: 3px 5px 10px -1px #000
}

ul.striped-list>li:nth-of-type(odd) {
	background-color: #e5e5e5
}

@media screen and (min-width:0px) {
	.headerlogo {
		width: 75%
	}
}

@media screen and (max-width:767px) {
	.logodiv {
		margin-left: auto;
		margin-right: auto
	}

	.headerlogo {
		width: 65%;
		margin-top: 1rem
	}
}

@media screen and (max-width:1199px) {

	.com2,
	.oem3,
	.res1 {
		margin-bottom: 2rem
	}
}

@media screen and (max-width:1145px) {
	.headerssa {
		margin-bottom: 2rem
	}
}

.fade-in {
	opacity: 0;
	transition: opacity 275ms ease-in
}

.fade-in.appear,
.imgapp:hover,
.overlay {
	opacity: 1
}

.slidec {
	width: 30px;
	height: 30px;
	border-radius: 100%
}

.image {
	display: block;
	width: 100%;
	height: auto
}

.overlay {
	bottom: -1rem;
	left: 0;
	right: 0;
	background-color: #fff;
	overflow: hidden;
	width: 100%;
	height: 15%;
	transition: .5s
}

.container:hover .overlay {
	height: 115%
}

.text {
	font-size: 25px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center
}

@media screen and (max-width:1250px) {

	.headerssa1,
	.headerssa3 {
		font-size: 17px
	}

	.text {
		font-size: 20px;
		top: 60%
	}
}

@media screen and (max-width:991px) {
	.orco {
		font-size: 18px
	}
}

@media screen and (max-width:460px) {
	.orco {
		font-size: 14px
	}
}

.rhe {
	font-size: 20px
}

@media screen and (max-width:1866px) {
	.rhe {
		font-size: 18px
	}
}

@media screen and (max-width:1682px) {
	.rhe {
		font-size: 16px
	}
}

#overLay {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #707070;
	opacity: .7;
	z-index: 9;
	left: 0;
	top: 0
}



@media screen and (max-width:570px) {
	#overLay {
		display: none
	}
}

.cookie-container {
	border-radius: 15px;
	background-image: url("/images/pages/homepage/KH-model.webp");
	width: 500px;
	height: 500px;
	margin: auto;
	position: sticky;
	vertical-align: middle;
	z-index: 9999;
	display: none;
	left: 0;
	right: 0;
	padding: 10px;
	box-shadow: 0 -2px 16px rgba(47, 54, 64, .39)
}

.cookie-container.active {
	bottom: 30%
}

.cookie-container a {
	color: #f5f6fa
}

.link-btn {
	position: absolute;
	width: 265px;
	height: 100px;
	top: 25rem;
	left: 1.3rem;
	opacity: 0;
	background: #00f
}

.hc-btn:hover {
	background-color: #3f5981;
	color: #fff
}

.need-help {
	color: #3f5981;
	margin-top: 5rem
}

.text-size {
	font-size: 1.2rem
}

.close-btn,
.section h1 {
	font-size: 2.5rem
}

.close-btn {
	position: absolute;
	z-index: 200;
	top: -.5rem;
	left: 35rem;
	color: #f5f5f5
}

.close-btn:hover,
.disabled {
	opacity: .5
}

@media (min-width:768px) {
	.media {
		background: #e8ebe9;
		height: 250px
	}




}

@media (max-width:768px) {
	.media {
		background: #e8ebe9
	}

	#content-header {
    margin-top: 7rem;
}



h1 {
	font-size: 2rem!important;
}

}

.parallax-bottom,
.parallax-top {
	height: 300px;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover
}

@media (max-width:568px) {
	.cookie-container {
		display: none
	}
}

.parallax-top {
	background-image: url("/images/pages/homepage/sp-advancing-ventilation.webp");
	margin-bottom: 50px
}

.parallax-bottom {
	background-image: url("/images/pages/homepage/sp-plant.webp")
}

@media screen and (max-width:1171px) {
	.parallax-top {
		display: none;
		background-image: url("/images/landing/parallax-oas3.jpg");
		height: 300px;
		margin-bottom: 50px;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 1500px 828px
	}
}

@media screen and (max-width:888px) {
	.parallax-top {
		background-image: url("/images/landing/parallax-oas3.jpg");
		height: 300px;
		margin-bottom: 50px;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 1000px 552px
	}
}

@media screen and (max-width:600px) {
	.parallax-top {
		background-image: url("/images/landing/parallax-oas3.jpg");
		height: 300px;
		margin-bottom: 50px;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 700px 386px
	}
}

@media screen and (max-width:406px) {
	.parallax-top {
		background-image: url("/images/landing/parallax-oas3.jpg");
		height: 300px;
		margin-bottom: 50px;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: 500px 276px
	}
}

.middle-modal {
	position: fixed;
	top: 50% !important;
	left: 50%;
	transform: translate(-50%, -50%)
}

.imgapp {
	opacity: .85
}

@media screen and (min-width:1370px) {

	.mainh,
	.mainp {
		margin-top: 2rem
	}

	.mainp {
		font-size: 17px
	}
}

@media screen and (max-width:1725px) {

	.reqnew,
	.reqnew2 {
		display: none
	}
}

.apage {
	font-size: 1.75rem;
	color: #fff;
	line-height: 3rem
}

.apage2 {
	font-size: 1.5rem;
	color: #fff;
	line-height: 2.5rem
}

a.disco:link,
a.disco:visited,
a.ventilation:link,
a.ventilation:visited {
	background-color: #5d7798;
	color: #fff;
	padding: 14px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block
}

.apg:active,
.apg:hover,
a.disco:active,
a.disco:hover,
a.ventilation:active,
a.ventilation:hover {
	background-color: #72849b
}

.apg:link,
.apg:visited {
	color: #fff;
	text-align: center;
	text-decoration: none
}

.career:link,
.career:visited {
	color: #fff;
	text-align: center;
	display: inline-block
}

a.positions:link,
a.positions:visited {
	background-color: #72849b;
	color: #fff;
	padding: 14px 25px;
	text-align: center;
	text-decoration: none;
	display: inline-block
}

a.positions:active,
a.positions:hover {
	background-color: #5d7798
}

@media screen and (max-width:1520px) {
	.aguides {
		font-size: 1.5rem
	}
}

@media screen and (max-width:1240px) {
	.aguides {
		font-size: 1.25rem
	}
}

@media screen and (max-width:1056px) {
	.aguides {
		font-size: 1rem
	}
}

@media screen and (max-width:904px) {
	.aguides {
		font-size: .75rem
	}
}

@media screen and (max-width:658px) {
	.aguides {
		font-size: .75rem
	}
}

@media screen and (max-width:772px) {
	.aguides {
		font-size: 3rem
	}

	.card-group {
		flex-direction: column !important;
		flex-flow: column;
		padding: .8rem
	}
}

@media screen and (max-width:380px) {
	.aguides {
		font-size: 2rem
	}
}

.phrase {
	font-size: 5.5rem;
	color: #5d7798
}

@media screen and (max-width:1128px) {
	.phrase {
		font-size: 4.75rem
	}
}

@media screen and (max-width:974px) {
	.phrase {
		font-size: 4rem
	}
}

@media screen and (max-width:768px) {
	.phrase {
		font-size: 3.5rem
	}
}

@media screen and (max-width:600px) {
	.phrase {
		font-size: 2.75rem
	}
}

*,
::after,
::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

button {
	background: 0 0;
	border: none;
	cursor: pointer;
	outline: 0
}

.section {
	background: #f45b69;
	padding: 50px 0
}

.section .container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: center
}

.loader,
.navbar.sticky {
	position: fixed;
	top: 0;
	width: 100%
}

.data,
.section h2 {
	font-size: 1.3rem
}

/*

.timeline ol {
	font-size: 0;
	width: 100vw;
	padding: 250px 0;
	transition: 1s
}

.timeline ol li {
	position: relative;
	display: inline-block;
	width: 160px;
	height: 3px;
	background: #fff
}

.timeline ol li:last-child {
	width: 280px
}

.timeline ol li:not(:first-child) {
	margin-left: 14px
}

.timeline ol li:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 50%;
	left: calc(100% + 1px);
	bottom: 0;
	width: 12px;
	height: 12px;
	transform: translateY(-60%);
	border-radius: 50%;
	background: #f45b69
}

.timeline ol li div {
	position: absolute;
	left: calc(100% + 7px);
	width: 280px;
	padding: 15px;
	font-size: 1rem;
	white-space: normal;
	color: #000;
	background: #fff
}

.timeline ol li div::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 0;
	height: 0;
	border-style: solid
}

.timeline ol li:nth-child(odd) div {
	top: -16px;
	transform: translateY(-100%)
}

.timeline ol li:nth-child(odd) div::before {
	top: 100%;
	border-width: 8px 8px 0 0;
	border-color: #fff transparent transparent
}

.timeline ol li:nth-child(2n) div {
	top: calc(100% + 16px)
}

.timeline ol li:nth-child(2n) div::before {
	top: -8px;
	border-width: 8px 0 0 8px;
	border-color: transparent transparent transparent #fff
}

.timeline time {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 8px
}

.timeline .arrows {
	display: flex;
	justify-content: center;
	margin-bottom: 20px
}

.timeline .arrows .arrow__prev {
	margin-right: 20px
}

.timeline .arrows img {
	width: 45px;
	height: 45px
}

@media screen and (max-width:599px) {

	.timeline ol,
	.timeline ol li {
		width: auto
	}

	.timeline ol {
		padding: 0;
		transform: none !important
	}

	.timeline ol li {
		display: block;
		height: auto;
		background: 0 0
	}

	.timeline ol li:first-child {
		margin-top: 25px
	}

	.timeline ol li:not(:first-child) {
		margin-left: auto
	}

	.timeline ol li div {
		width: 94%;
		height: auto !important;
		margin: 0 auto 25px;
		position: static
	}

	.timeline ol li:nth-child(odd) div {
		transform: none
	}

	.timeline ol li:nth-child(2n) div::before,
	.timeline ol li:nth-child(odd) div::before {
		left: 50%;
		top: 100%;
		transform: translateX(-50%);
		border: none;
		border-left: 1px solid #fff;
		height: 25px
	}

	.timeline .arrows,
	.timeline ol li:last-child,
	.timeline ol li:not(:last-child)::after,
	.timeline ol li:nth-last-child(2) div::before {
		display: none
	}
} */

.crpnav {
	font-size: 1.5rem
}

.bloqbc {
	border-color: #fff;
	border-width: .25rem
}

.bloqc {
	color: #fff;
	font-weight: 700
}

select {
	font-size: 1.1rem
}

.loader {
	z-index: 99;
	left: 0;
	height: 100%;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center
}

.loader>img {
	width: 100px
}

.loader.hidden {
	animation: 1s forwards fadeOut
}

@keyframes fadeOut {
	100% {
		opacity: 0;
		visibility: hidden
	}
}

.thumb {
	height: 100px;
	border: 1px solid #000;
	margin: 10px
}

.flow-grid {
	display: grid
}

.media-scroller {
	display: grid;
	gap: 1em;
	grid-auto-flow: column;
	grid-auto-columns: 21%;
	padding: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain
}

.scrolling-element {
	display: grid;
	grid-template-rows: min-content;
	gap: 1em;
	padding: 0;
	background: #e9ecef;
	border-radius: var(--radius-2);
	box-shadow: 0 3px 5px -2px hsl(var(--shadow-color)/ calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color)/ calc(var(--shadow-strength) + 5%))
}

.media-element>img {
	inline-size: 100%;
	object-fit: cover
}

.snaps-inline {
	scroll-snap-type: inline mandatory;
	scroll-padding-inline: .25rem, 1rem
}

.snaps-inline>* {
	scroll-snap-align: start
}

@media screen and (max-width:576px) {
	.responsive-card {
		max-width: auto
	}
}

.responsive-mt-top {
	margin-top: 4.5rem
}

@media screen and (max-width:1200px) {

	.parallax-bottom,
	.parallax-top {
		display: none
	}

	.growing {
		top: 4rem
	}

	.responsive-mt-top {
		margin-top: 0
	}
}

@supports ((position:-webkit-sticky) or (position:sticky)) {
	.sticky-top {
		position: -webkit-sticky;
		position: sticky;
		top: 5em;
		z-index: 998
	}
}

@media screen and (max-width:1700px) {
	.header-right-title {
		margin-left: 1rem !important
	}
}

@media screen and (max-width:1580px) {
	.header-right-title {
		margin-left: -1rem !important
	}
}

@media screen and (max-width:1482px) {
	.header-right-title {
		margin-left: -2rem !important
	}
}

@media screen and (max-width:1458px) {
	.header-right-title {
		margin-left: -3rem !important
	}
}

@media screen and (max-width:1350px) {
	.header-right-title {
		margin-left: -4rem !important
	}
}

@media screen and (max-width:1294px) {
	.header-right-title {
		margin-left: -4.2rem !important
	}
}

@media screen and (max-width:1258px) {
	.header-right-title {
		margin-left: -4.8rem !important
	}
}

.sub-btn {
	margin-top: 1.5rem;
	margin-left: 19.5rem
}

#hfc-frame.hfc-mobile_badge,
.navbar-brand,
.slider-small,
.video-header {
	display: none
}

.mobile-nav-btn {
	color: rgba(0, 0, 0, .5);
	margin-left: 3.2rem;
	background-color: none !important;
	text-transform: uppercase
}

#content.with-margin {
	margin-top: 60px
}

.background-large {
	background-color: #f8f8f8
}

.mnav {
	background-color: #fff
}

.carousel-indicators .active {
	background-color: #8f8d8d !important
}

ol.carousel-indicators {
	bottom: -20px !important
}

@media (max-width:767px) {

	.video-content,
	.video-content h1,
	.video-content p {
		color: #fff;
		text-align: center
	}

	#slideshow.carousel,
	#top-header-logo,
	.slider-large {
		display: none
	}

	.my-Nav {
		display: flex;
		flex-direction: inherit;
		justify-content: space-between
	}

	.navbar-brand {
		display: block;
		margin-bottom: .5rem;
		padding: 0
	}

	.slider-small {
		display: block;
		width: 100%;
		height: 400px
	}

	.mobile-info-wrapper {
		display: flex;
		max-width: 100%;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		background-color: #f8f8f8
	}

	.mobile-info-wrapper>.container-fluid {
		scroll-snap-align: start;
		flex: 0 0 calc(100% - 60px);
		width: 100%;
		margin-right: 10px
	}

	.mobile-info-wrapper .row {
		display: flex;
		flex-wrap: nowrap;
		width: fit-content
	}

	.background-large {
		background-color: transparent
	}

	.video-header {
		position: relative;
		height: 250px;
		overflow: hidden;
		display: flex;
		flex-direction: column
	}

	.video-background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-mask-image: linear-gradient(to top, transparent 10%, black 50%);
		mask-image: linear-gradient(to top, transparent 2%, black 40%);
		background-color: #000;
		z-index: 2
	}

	.video-background img {
		width: 100%;
		height: 100%;
		object-fit: none;
		opacity: .8
	}

	.video-content {
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 15px
	}

	.video-content h1 {
		font-size: 38px;
		margin-bottom: 0;
		z-index: 3
	}

	.video-content p {
		font-size: 20px;
		z-index: 3
	}

	.fade-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%
	}
}

/* General Footer Styles */
#footer {
    background-color: #003B5C; /* Dark blue background */
    color: #fff; /* White text */
    padding: 40px 0;
    font-size: 16px;
    border-top: #ee373f solid 4px;
    font-size: 18px;
  }

  .row.lower {
    width: 100%;
}
  
  #footer a {
    color: #99d6ea; /* Light blue link color */
    text-decoration: none;
  }
  
  #footer a:hover {
    text-decoration: underline;
  }
  
  /* Container and alignment */
  .footer-container {
    max-width: 1540px; /* Set width to 85% */
    margin: 0 auto; /* Center the footer */
  }
  
  .footer-column {
    margin-bottom: 30px;
  }
  
  .label {
    font-weight: 500;
    margin-bottom: 15px;
  }
  
  /* Address and Certifications */
  .address {
    font-size: 1rem;
    margin-top: 15px;
  }
  
  .certs {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
    margin-top: 15px;
    align-items: center;
  }
  
  .certs img {
    width: 60px;
    height: auto;
  }
  
  /* Social Media Icons */
 
  
  .social-media-title {
    
    color: #fff;
    margin-bottom: 0px;
    margin-top: 0px;
    border: none;
    padding-bottom: 0px;
}
  
  .social-icon {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left!important;
    color: #fff;
    position: relative;
  }
  
  .social-icon li {
    display: inline-block;
  }
  
  .social-icon a {
    display: inline-block;
    transition: transform 0.3s ease;
  }
  
  .social-icon a:hover {
    transform: scale(1.1); /* Scale effect on hover */
  }
  
  .social-icons {
    width: 30px;
    height: auto;
    filter: brightness(0) invert(1); /* White icons on dark background */
  }
  
  /* Important Links */
  .menu {
    list-style: none;
    padding-left: 0;
  }
  
  .menu li {
    margin-bottom: 10px;
  }

   ul.menu {
    margin: 0px;
  }
  
  .menu li a {
    color: white!important;
  }
  
  /* Contact Section */
  .contact {
    font-size: 1rem;
  }
  
  .contact div {
    margin-bottom: 10px;
  }
  
  /* Copyright */
  .copyright {
    margin-top: 30px;
    font-size: 0.9rem;
    color: #bfbfbf;
  }

  .search-button {
    background: #ef3340;
    border: none;
    color: white;
    padding: 0.3rem;
    cursor: pointer;
    border-radius: 4px;
}

button.search-button {
    display: flex;
    padding: .5rem;
}

.search-input {
    padding: 0.2rem;
    margin-right: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: black;
    align-self: center;
}

.search-form {
    display: flex;
    align-items: center;
    position: static;
    
}

.social-media.col-md-4 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: end;
    flex-wrap: wrap;
}
  
  /* Responsive Styles */
  @media (max-width: 768px) {
    .footer-column {
      text-align: center;
      margin-bottom: 20px;
    }
  
    .certs {
      justify-content: center;
    }
  
    .social-media-title {
      text-align: center;
    }


    .address-sm {
        margin-bottom: 5rem;
    }

    .social-media {
        align-content: center!important;
        flex-wrap: wrap!important;
        margin-top: 2rem!important;
      
    }

    .search-form {
        display: none!important;
        align-items: center;
        position: static;
        
    }

    .social-media.col-md-4 {
        display: flex
    ;
        flex-direction: column;
        justify-content: flex-start;
        align-content: end;
        flex-wrap: wrap;
        margin-bottom: 2rem!important;
    }


  }