/*
	###################################
	GENERAL
	###################################
*/

	html {
		overflow-x: hidden;
	}

	body {
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		color: #000000;
		overflow-x: hidden;
	}

	header {
		/*position: relative;*/
	}

	main {
		margin: 0 auto;
		margin-top: 0px;
	}

	.container-fluid,
	section {
		position: relative;
		margin: 0 auto;
		max-width: 1440px;
	}

	section.fluid,
	.offcanvas-collapse .container-fluid {
		max-width: 100%;
	}

	.text-red {color: #AC2229;}
	.text-grey {color: #8C7D7E;}
	.text-white {color: #fff;}

	.bg-grey {background-color: #FAF4F5;}
	.bg-dark {background-color: #484848 !important;}

	.h-55 {
		height: 55%!important;
	}

	.h-60 {
		height: 60%!important;
	}

	.h-65 {
		height: 65%!important;
	}

	.pt-250 {padding-top: 250px;}
	.pt-200 {padding-top: 200px;}
	.pt-150 {padding-top: 150px;}
	.pt-120 {padding-top: 120px;}
	.pt-100 {padding-top: 100px;}
	.pt-80 {padding-top: 80px;}
	.pt-50 {padding-top: 50px;}

	.pb-250 {padding-bottom: 250px;}
	.pb-200 {padding-bottom: 200px;}
	.pb-150 {padding-bottom: 150px;}
	.pb-120 {padding-bottom: 120px;}
	.pb-100 {padding-bottom: 100px;}
	.pb-80 {padding-bottom: 80px;}
	.pb-50 {padding-bottom: 50px;}

	.mt-250 {margin-top: 250px;}
	.mt-200 {margin-top: 200px;}
	.mt-150 {margin-top: 150px;}
	.mt-120 {margin-top: 120px;}
	.mt-100 {margin-top: 100px;}
	.mt-80 {margin-top: 80px;}
	.mt-50 {margin-top: 50px;}

	.mb-250 {margin-bottom: 250px;}
	.mb-200 {margin-bottom: 200px;}
	.mb-150 {margin-bottom: 150px;}
	.mb-120 {margin-bottom: 120px;}
	.mb-100 {margin-bottom: 100px;}
	.mb-80 {margin-bottom: 80px;}
	.mb-50 {margin-bottom: 50px;}

	.pu-250 {margin-top: -250px;}
	.pu-200 {margin-top: -200px;}
	.pu-150 {margin-top: -150px;}
	.pu-120 {margin-top: -120px;}
	.pu-100 {margin-top: -100px;}
	.pu-80 {margin-top: -80px;}
	.pu-50 {margin-top: -50px;}
	
	.ml-n50, .mx-n50 {margin-left: -50%;}

	.content-cols-2 {
		column-count: 2;
		column-gap: 5rem;
	}

	.content-cols-3 {
		column-count: 2;
		column-gap: 3rem;
	}


	@media (max-width: 767px) {
		.pt-sm-160 {padding-top: 160px !important;}
		.pt-sm-80 {padding-top: 80px !important;}
		.pt-sm-60 {padding-top: 60px !important;}
		.pt-sm-40 {padding-top: 40px !important;}

		.pb-sm-80 {padding-bottom: 80px !important;}
		.pb-sm-60 {padding-bottom: 60px !important;}
		.pb-sm-40 {padding-bottom: 40px !important;}
		.pb-sm-00 {padding-bottom: 0px !important;}
		
		.mt-sm-100 {margin-top: 100px !important;}
		.mt-sm-80 {margin-top: 80px !important;}
		.mt-sm-60 {margin-top: 60px !important;}
		.mt-sm-40 {margin-top: 40px !important;}
		.mt-sm-20 {margin-top: 20px !important;}
		
	}

	@media (max-width: 991px) { 

		.pt-sm-160 {padding-top: 160px !important;}
		.pt-sm-80 {padding-top: 80px !important;}
		.pt-sm-60 {padding-top: 60px !important;}
		.pt-sm-40 {padding-top: 40px !important;}

		.pb-sm-80 {padding-bottom: 80px !important;}
		.pb-sm-60 {padding-bottom: 60px !important;}
		.pb-sm-40 {padding-bottom: 40px !important;}
		.pb-sm-00 {padding-bottom: 0px !important;}
		
		.mt-sm-100 {margin-top: 100px !important;}
		.mt-sm-80 {margin-top: 80px !important;}
		.mt-sm-60 {margin-top: 60px !important;}
		.mt-sm-40 {margin-top: 40px !important;}
		.mt-sm-20 {margin-top: 20px !important;}

		.pt-md-00 {padding-top: 0;}
		.pb-md-20 {padding-bottom: 20px;}

		.mt-md-00 {margin-top: 0;}

		.pu-md-00 {margin-top: 0;}

		.w-md-100 {width: 100% !important;}

		.vert-line-white-bottom {
			display: none;
		}

		.content-cols-2,
		.content-cols-3 {
			column-count: 1;
			column-gap: 0rem;
		}

	}


	@media (max-width: 991px) {

		.crop-md-360 img,
		img.crop-md-360,
		.crop-md-250 img,
		img.crop-md-250 {
		  object-fit: cover; /* Do not scale the image */
		  object-position: center; /* Center the image within the element */
		  width: 100%;
		  max-height: 360px;
		}

		.crop-md-250 img,
		img.crop-md-250 {
		  max-height: 250px;
		}

	}




/*
	###################################
	FULL WIDTH SECTIONS
	###################################
*/

	@media (min-width: 576px) and (max-width: 767px) { 
		.fixed-col-5,
		.fixed-col-6 {
			max-width: 540px;
		}
	}

	@media (min-width: 768px) and (max-width: 991px) { 
		.fixed-col-5,
		.fixed-col-6 {
			max-width: 720px;
		}
	}

	@media (min-width: 992px) and (max-width: 1200px) { 
		.fixed-col-5 {
			max-width: calc(5*960px/12 - 30px);
		}
		.fixed-col-6 {
			/*max-width: 450px;*/
			max-width: calc(960px/2 - 30px);
		}
	}

	@media (min-width: 1200px) { 
		.fixed-col-5 {
			max-width: calc(5*1140px/12 - 45px);
		}
		.fixed-col-6 {
			/*max-width: 540px;*/
			max-width: calc(1140px/2 - 30px);
		}
	}









/*
	###################################
	TYPOGRAPHY
	###################################
*/





	h1 {
		font-family: 'Barlow', sans-serif;
		font-size: 5.5rem /* 88px */ ;
		line-height: 5.5rem;
		font-weight: 700;
		color: #AC2229;
		text-transform: uppercase;
	}

	#homepage h1 {
		font-family: 'Barlow', sans-serif;
		font-size: 3.875rem /* 62px */ ;
		line-height: 3.625rem;
		font-weight: 700;
		color: #ffffff;
		text-transform: uppercase;
	}

	h2 {
		font-family: 'Barlow', sans-serif;
		font-size: 3.375rem;
		line-height: 3rem;
		font-weight: 700;
		color: #8C7D7E;
		text-transform: uppercase;
		margin-bottom: 50px;
	}

	h1 span,
	h2 span {
		display: block;
		font-size: 1.125rem;
		line-height: 1.25rem;
		color: #AC2229;
		margin-bottom: .75rem;
	}

	#homepage h1 span {
		color: #ffffff;
	}

	h3 {
		font-family: 'Barlow', sans-serif;
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: 700;
		color: #8C7D7E;
		text-transform: uppercase;
	}

	h4 {
		font-family: 'Barlow', sans-serif;
		font-size: 1.875rem;
		line-height: 2rem;
		font-weight: 500;
		/* color: #8C7D7E; */
		text-transform: uppercase;
	}

	h5 {
		font-family: 'Roboto', sans-serif;
		font-size: 1.5rem;
		line-height: 2rem;
		font-weight: 500;
		text-transform: uppercase;
	}

	h6 {
		font-family: 'Barlow', sans-serif;
		font-size: 1rem;
		line-height: 1.5rem;
		font-weight: 500;
		text-transform: uppercase;
	}

	p, li {
		font-size: 1.125rem;
		line-height: 1.5rem;
		font-weight: 500;
		margin-bottom: 1.875rem;
	}

	ul {
		list-style-type: '\2014';
		padding-left: 1rem;
	}

	li {
		padding-left: 1rem;
	}

	.small p,
	p.small {
		font-size: 1rem;
		line-height: 1.5rem;
		margin-bottom: 1.5rem;
	}

	/* @media (max-width: 767px) {

		h1,
		h2 { 
			font-size: 2.857rem;
			line-height: 2.857rem;
			margin-bottom: 50px;
		}

		h2.smaller { 
			font-size: 2.571rem;
			line-height: 2.571rem;
			font-weight: 200;
			letter-spacing: 0rem;
			margin-bottom: 50px;
		}

		h3 { 
			font-size: 2rem;
			line-height: 2.143rem;
			font-weight: 200;
			letter-spacing: 0rem;
		}

		h4 { 
			font-size: 1.286rem;
			line-height: 1.3rem;
			font-weight: 400;
			letter-spacing: -0.01rem;
			text-transform: uppercase;
			margin-top: .75rem;
			margin-bottom: .5rem;
		}

		h5 {
			font-size: 1.286rem;
			line-height: 1.6rem;
			font-weight: 400;
			letter-spacing: rem;
		}

		p { 
			font-size: 0.9286rem;
			line-height: 1.857rem;
			margin-bottom: 1.875rem;
		}

		p.small-title,
		.small-title {  
			font-size: 0.9286rem;
			line-height: 1.15rem;
			font-weight: 700;
			letter-spacing: 0.125rem;
			text-transform: uppercase;
			margin-left: 3px;
			margin-bottom: 15px;
		}

		#hero p.large-title { 
			font-size: 2.857rem;
			line-height: 3rem;
			letter-spacing: -0.125rem;
			margin-bottom: 15px;
		}

		#hero p.small-title { 
			font-size: 1.143rem;
			line-height: 1.2rem;
			letter-spacing: 0.05rem;
		}

	} */





	/*
	######################################
	NAVIGATION — Q
	######################################
	*/


	.offcanvas-collapse {
	  position: fixed;
	  top: 0px; /* Height of navbar */
	  bottom: 0;
	  left: 100%;
	  width: 100%;
	  padding-right: 0rem;
	  padding-left: 0rem;
	  overflow-y: auto;
	  visibility: hidden;
	  background-color: #FAF4F5;
	  transition: visibility 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
	  transition: transform 0.8s ease-in-out, visibility 0.8s ease-in-out;
	  transition: transform 0.8s ease-in-out, visibility 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
	}

	.offcanvas-collapse.open {
	  visibility: visible;
	  -webkit-transform: translateX(-100%);
	  transform: translateX(-100%);
	}

	.menu-link {
		text-align: center;
		height: calc(50vh - 54px); /* subtract half the height of the header */
	}

	.menu-link a {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		font-size: 2.75rem;
		line-height: 3rem;
		font-weight: 700;
		color: #AC2229;
		text-transform: uppercase;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #e0dddd;
		border-top: 1px solid #e0dddd;
		transition: color .2s ease-in-out,
		background .2s ease-in-out,
		border-color .2s ease-in-out,
		box-shadow .2s ease-in-out,
		opacity .2s ease-in-out !important;
	}

	.menu-link:nth-child(3) a, 
	.menu-link:nth-child(6) a {
		border-right: none;
	}

	.menu-link a:hover {
		color: #fff;
		background: #8C7D7E;
	}

	.menu-link a span {
		font-size: 1rem;
	}

	
	/* Stack menu items when smaller than MD */
	@media only screen and (max-width: 767px) {
	  .menu-link {
		height: calc(100vh/6 - 18px); /* subtract 1/6 the height of the header */
	  }

	  .menu-link a {
		font-size: 1.75rem;
		line-height: 2rem;
		border-right: none;
	  }

	  .menu-link a span {
	    font-size: .875rem;
	  }

	}

	.hamburger-inner, .hamburger-inner:after, .hamburger-inner:before, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
		width: 30px;
		height: 3px;
		background-color: #AC2229;
	}

	.hamburger-label {
		display: inline-block;
		font-size: 0.875rem;
		font-weight: 500;
		color: #AC2229 !important;
		text-transform: uppercase;
		margin-right: 10px;
	}

	.hamburger-box {
		width: 40px;
		height: 11px;
	}

	.hamburger--arrow-r.is-active .hamburger-inner:before {
		transform: translate3d(9px,1px,0) rotate(45deg) scaleX(.7);
	}

	.hamburger--arrow-r.is-active .hamburger-inner:after {
		transform: translate3d(9px,-1px,0) rotate(-45deg) scaleX(.7);
	}

	.hamburger-inner:before {
		top: -8px;
	}

	.hamburger-inner:after {
		bottom: -8px;
	}



	.navbar,
	.navbar .btn-contact,
	#homepage .hamburger-inner,
	#homepage .hamburger-label,
	#homepage #logo {
		transition: all 0.5s;
	}

	#header.unpinned:not(.menu-open) .navbar {
		background-color: #ffffff;
	}

	#homepage #header:not(.unpinned):not(.menu-open) #logo {
		filter: grayscale(100%) brightness(450%);
	}

	#homepage #header:not(.unpinned):not(.menu-open) .hamburger-label,
	#homepage #header:not(.unpinned):not(.menu-open) .btn-contact {
		color: #fff !important;
	}

	#homepage #header:not(.unpinned):not(.menu-open) .hamburger-inner,
	#homepage #header:not(.unpinned):not(.menu-open) .hamburger-inner:after,
	#homepage #header:not(.unpinned):not(.menu-open) .hamburger-inner:before,
	#homepage #header:not(.unpinned):not(.menu-open) .hamburger.is-active .hamburger-inner,
	#homepage #header:not(.unpinned):not(.menu-open) .hamburger.is-active .hamburger-inner:after,
	#homepage #header:not(.unpinned):not(.menu-open) .hamburger.is-active .hamburger-inner:before {
		background-color: #fff;
	}

	.navbar .btn-contact {
		font-size: 0.875rem;
		font-weight: 500;
		text-transform: uppercase;
		background-color: transparent;
		border-color: transparent;
		padding: 0.5rem 1rem;
		color: #AC2229 !important;
	}

	.navbar .btn-contact:hover {
		color: #fff !important;
		background-color: #AC2229;
		border-color: #AC2229;
	}





/*
	###################################
	FOOTER
	###################################
*/

	#footer-logo-kaeline {
		max-width: 100px;
	}


/*
	###################################
	CONTACT
	###################################
*/

	#company-contact h3 {
		font-size: 38px;
	}

	#company-contact h4 {
		font-size: 26px;
		line-height: 28px;
		text-transform: none;
	}
	
/*
	###################################
	PRODUCT CONTACT FORM
	###################################
*/




	section#contact-form {
		margin-top: 80px;
	}

	.contact-information p {
		margin-bottom: 40px;
	}


	.contact{
		max-width: 970px;
	}

	input,textarea,button{
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		transition: all 0.3s;
	}

	.contact form .form{
		width:100%;
		height: auto;
		padding:15px 15px 12px;
		font-size:18px;
		margin-bottom:18px;
		color:#7f7f7f;
		letter-spacing: 0.25px;
		border: 1px solid #ced4da;
		border-radius: 0.25rem;
	}

	.light-form{
		background: #FAF8F9;
	}

	.dark-form{
		background-color:transparent;
		border:1px solid #2e2e2e;
	}

	.contact form .textarea{
		height: 201px;
		max-width: 100%;
		max-height: 201px;
	}

	.contact form button.contact-form-button{
		margin-bottom:0;
		color: #ffffff;
	}

	#subscribe form .subscribe-form{
		width:100%;
		height: auto;
		padding:15px 15px 12px;
		font-size:18px;
		margin-bottom:18px;
		color:#7f7f7f;
		letter-spacing: 0.5px;
	}

	/* Actives, Focuses and Rollovers */

	.contact form .form:active,
	.contact form .form:focus{
		outline: none;
	}

	.contact form button.contact-form-button:hover{
		color: #ffffff;
	}

	.contact form .light-form:hover{
		border-color: #918c8c;
	}

	/* Message For Mail */

	.mail-message-area{
		width:100%;
		padding:0 15px;
	}

	.mail-message{
		width: 100%;
		-webkit-transition: all 0.7s;
		-moz-transition: all 0.7s;
		transition: all 0.7s;
		margin:0 auto;
		border-radius: 0;
	}

	.not-visible-message{
		height:0px;
		opacity: 0;
	}

	.visible-message{
		height:auto;
		opacity: 1;
		margin:25px auto 0;
	}

	#contact-form span {
		display:none;
		font-size:12px;
		line-height:30px;
		color:red;
	}