@charset "UTF-8";
/* CSS Document */

:root {
	--SCW-blue: #040e42;
	--SCW-brown: #a79a75;
	--SCW-brown-2: #ccbf99;
	--SCW-brown-3: #b4a169;
	--SCW-brown-4: #dbd2b7; /*lightest - for background */
	--SCW-brown-5: #443f32; /*darkest - for some type */
	--SCW-type: #666;
}

/*

var(--SCW-blue)
var(--SCW-brown)
var(--SCW-brown-2)
var(--SCW-brown-3)
var(--SCW-brown-4)
var(--SCW-brown-5)
var(--SCW-type)

/* Import fonts 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;600&display=swap'); 

// Freight Macro Bold 
font-family: freight-macro-pro,serif;
font-weight: 700;

// Freight Macro Book
font-family: freight-macro-pro,serif;
font-weight: 400;

// Freight Micro Bold
font-family: freight-micro-pro,serif;
font-weight: 700;

// Freight Micro Book
font-family: freight-micro-pro,serif;
font-weight: 400;

// Open Sans Bold
font-family: open-sans,sans-serif;
font-weight: 700;

// Open Sans Extra Bold
font-family: open-sans,sans-serif;
font-weight: 800;

// Open Sans Light
font-family: open-sans,sans-serif;
font-weight: 300;

// Open Sans Regular
font-family: open-sans,sans-serif;
font-weight: 400;

*/

/* General */
body, html {
	font-family: open-sans,sans-serif;
	weight: 300;
	margin: 0px;
	padding: 0px;
	color: var(--SCW-type);
}

/* Headers */
h1, h2, h3, h4, p {
	padding: 0px;
	margin: 0px;
	text-align: left;
}

h1, h2 {
	font-size: 2.5em;
	line-height: 1;
	margin-top: 10px;
	font-family: freight-micro-pro,serif;
	font-weight: 700;
}

h1 {
	color: var(--SCW-blue);
}

h1:before {
	content:"ABOUT";
	color: var(--SCW-brown);
	display: block;
	font-family: freight-micro-pro,serif;
	font-weight: 400;
	font-size: .5em !important;
	letter-spacing: .2em;
	padding-bottom: 30px;
}

h2 {
	padding-top: 30px;
}

h2:after {
	content: "";
	display: block;
	border-bottom: 5px solid var(--SCW-brown);
	padding-top: 20px;
	width: 100px;
	height: 0px;
}

h3 {
	font-weight: 100;
	font-size: 2.5em;
	padding: 20px 0px;
}

h4 {
	font-size: 1.2em;
	line-height: 1.8em;
	font-weight: 300;
	margin: 15px 0px 0px 0px;
	padding: 30px 30px;
}

p {
	font-size: 1.2em;
	text-align: left;
	line-height: 1.8em;
	font-weight: 300;
}

/* Containers */
/* Groups */
#scroll-header, #intro, #clients, #action, #footer {
	color: var(--SCW-type);
}

#scroll-header, #intro {
	background-color: #fff;
}

.section, #scroll-header {
	width: 100%;
	box-sizing: border-box;
	padding: 40px 15%;
	z-index: 90;
}

@media only screen and (max-width: 600px) {
	.section, #scroll-header {
		padding: 40px 8%;
	}
}


/* Individual */
/* Headers */
.section {
	min-height: 50px;
	display: block;
	float: left;
	text-align: center;
}

#scroll-header {
	padding: 40px 10%;
	font-size: 1em;
	position: fixed;
	top: 0px;
	z-index: 100;
	border-top: 8px solid var(--SCW-brown);
	font-family: freight-macro-pro,serif;
	font-weight: 700;
}

#return {
	float: right;
	display: block;
	font-family: freight-micro-pro,serif;
	font-weight: 400;
	color: var(--SCW-brown);
	font-size: 1.5em;
}

#scroll-header a {
	color: var(--SCW-blue);
}

#scroll-header a:hover {
	color: var(--SCW-brown);
	text-decoration: none;
}

#scroll-header .logo, #footer .logo {
	height: 50px;
}

#contact-header {
	float: right;
	padding-top: 30px;
}

#contact-header a {
	margin-left: 20px;
}

#contact-header .email-icon {
	position: relative;
	top: -2px;
}

@media only screen and (max-width: 1000px) {
	#contact-header {
		float: none;
		width: 100%;
		text-align: center;
	}
	#scroll-header {
		text-align: center;
	}
	#header h2 {
		font-size: 3em !important;
		width: 100% !important;
	}
}

@media only screen and (max-width: 650px) {
	#contact-header {
		display: none;
	}
	#header h2 {
		font-size: 2.5em !important;
	}
}


/* Header */
#header {
	min-height: 700px;
	height: 100vh;
}

#header h2 {
	display: block;
	padding-top: 40vh;
	font-size: 3.5em;
	color: #fff;
	text-align: left;
	width: 600px;
	font-weight: 300;
}

#header .arrow {
	float: left;
	margin: 50px 0px 0px 230px;
	width: 40px;
}

.parallax-window {
    min-height: 400px;
    background: transparent;
}


/* Intro */
#intro {
	position: relative;
	top: -1px;
}

#intro p, #process p {
	width: 50%;
	float: left;
	padding: 40px;
}

#intro p.left {
	margin-left: -10%;
}

#intro p.left img {
	width: 100%;
	height: 360px;
	object-fit: cover;
	object-position: 0px;
}

#intro p.right {
	width: 60%;
}

#intro h1 {
	padding: 40px 0px 20px 0px;
}

#intro h4 {
	border-top: 1px solid #cbcbcb;
	border-bottom: 1px solid #cbcbcb;
}

.arrow img {
	width: 30px;
}

@media only screen and (max-width: 800px) {
	#intro p {
		border: none !important;
		width: 100% !important; 
		margin-left: 0% !important;
		padding: 0px;
	}	
	#intro p.right {
		padding-top: 0px;
	}
	#intro p.left {
		padding-bottom: 25px;
	}
}


/* Gallery */
#gallery {
	padding-bottom: 40px !important;
	position: relative;
}

#gallery h2 {
	padding-bottom: 30px;
	color: var(--SCW-brown-2);
}

#gallery h2:after {
	border-color: var(--SCW-blue);
}

#gallery p, #gallery h2 {
	padding-left: 100px;
}

#gallery p {
	width: 65%;
	padding-bottom: 60px;
}

#projectMargin {
	margin-top: 150px;
	display: block;
}

#projectMargin h2, #projectMargin p {
	padding-left: 0;
}

#projectMargin h2 {
	color: var(--SCW-blue);
}

#projectMargin h2:after {
	border-color: var(--SCW-brown);
}

.bx-wrapper {
	border: 0px !important;
	-moz-box-shadow: 0 0 8px #666 !important;
  	-webkit-box-shadow: 0 0 8px #666 !important;
  	box-shadow: 0 0 8px #666 !important;
  	background: none !important;
	max-width: 1200px !important;
}

.bx-wrapper .bx-caption {
	background: rgba(255, 255, 255, 0.80) !important;
}

.bx-wrapper .bx-caption span {
  	color: var(--SCW-brown) !important;
  	font-family: freight-macro-pro,serif !important;
  	font-weight: 700 !important;
  	font-size: .85em;
  	padding: 10px;
}

.bx-nextEM a, .bx-prevEM a {
  	position: absolute;
 	display: block;
 	top: 50%;
  	margin-top: -16px;
  	outline: 0;
  	width: 32px;
  	height: 32px;
}

.bx-prevEM {
	margin-left: -50px;
}

.bx-nextEM {
	margin-left: calc(100% + 18px);
}

.bx-prev {
	display: none !important;
}

.bx-next {
	display: none !important;
}

.bx-wrapper .bx-pager.bx-default-pager a {
  background: #d9d0b3 !important;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: var(--SCW-brown-3) !important;
}

button, button:focus {
	border: none;
	outline: none;
}

@media only screen and (max-width: 1250px) {
	#gallery p {
		width: 80%;
	}
}

@media only screen and (max-width: 800px) {
	#gallery h2 {
		padding-left: 0px;
	}
	#gallery p {
		width: 100%;
		padding-left: 0px;
	}
	.bx-prevEM {
		margin-left: -32px;
	}
	.bx-nextEM {
		margin-left: calc(100%);
	}
}


/* Why Us */
#whyUs {
	background-color: var(--SCW-brown-2);
	margin-top: -200px;
	min-height: 400px;
	padding-bottom: 80px;
}

#whyUs-left p {
	color: #fff;
}

#whyUs-right p {
	color: var(--SCW-type);
}

#whyUs-left h2 {
	color: #fff;
	margin-top: 190px;
}

#whyUs-right h2 {
	color: var(--SCW-blue);
	padding-top: 0px;
	margin-top: 0px;
}

#whyUs h2:after {
	border-color: var(--SCW-blue);
	margin-bottom: 30px;
}

#whyUs-right h2:after {
	border-color: var(--SCW-brown-3);
	margin-bottom: 30px;
}

#whyUs-left {
	float: left;
	width: 50%;
}

#whyUs-right {
	color: var(--SCW-blue);
	width: 45%;
	float: right;
	background-color: var(--SCW-brown-4);
	margin-top: 180px;
	padding: 40px;
	border-bottom: 15px solid var(--SCW-blue);
}

#whyUs-right .product {
	color: var(--SCW-blue);
	display: block;
	width: 100%;
	padding: 10px 0;
	font-family: open-sans,sans-serif;
	font-weight: 800;
	border-bottom: 2px solid var(--SCW-brown-3);
}

@media only screen and (max-width: 800px) {
	#whyUs-left, #whyUs-right {
		width: 100%;
	}
	
	#whyUs-right {
		margin-top: 60px;
	}
}


#paraDivider {
	padding: 0px !important;
	min-height: 270px !important;
}


/* History */
#history {
	position: relative;
}

#history h2 {
	color: var(--SCW-blue);
	margin-bottom: 80px;
}

#history p {
	width: 70%;
	margin-left: 30%;
}

.historyPhoto {
	width: 35%;
	float: left;
	margin: 20px;
	margin-top: 8px;
}

.historyPhoto img {
	width: 100%;
}

.leftPhoto {
	margin-left: -10%;
}

.rightPhoto {
	float: right;
	margin-right: -10%;
}

@media only screen and (max-width: 800px) {
	.historyPhoto {
		width: 100%;
		float: none;
		margin: 20px 0;
	}
	#history p {
		width: 100%;
		margin-left: 0%;
	}
	.historyPhoto img {
		object-fit: cover;
		height: 360px;
	}
}


/* CONTACT */
#contact h2 {
	color: var(--SCW-blue);
	z-index: 20;
}

#contact h2:after {
	border-color: var(--SCW-brown-4);
}

#contact {
	margin-bottom: 0px;
	padding-bottom: 0px;
	position: relative; 
	margin-top: 50px;
}

#contact .contactSidebar {
	display: block;
	position: absolute;
	top: 0px;
	right: 12%;
	padding: 40px 80px 40px 40px;
	background-color: var(--SCW-blue);
	z-index: 100;
	border-bottom: 15px solid var(--SCW-brown-4);
	text-align: left;
	color: #fff;
}

#contact .contactLogo {
	width: 220px;
	padding-bottom: 20px;
}

.phone a {
	display: block;
	font-weight: 700;
	color: var(--SCW-brown-4);
	font-size: 2em;
	padding-top: 10px;
	padding-bottom: 0px;
}

.phone a:hover {
	text-decoration: none;
}

.contactMail {
	display: block;
	width: 34px;
	height: 35px;
	padding-top: 10px;
	background-image: url("../images/MailIcon.svg");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: cover;
	background: none;
	color: var(--SCW-brown-4);
}

.contactMail:hover {
	background-position: 0 -25px;
	text-decoration: none;
	border: none;
	color: #fff;
}

#overlay, #overlay2, #overlay3, #overlay4, #map {
	height: 600px;
	width: 100%;
	display: block;
	z-index: 10;
} 

#overlay, #overlay2, #overlay3, #overlay4 {
	position: absolute;
	background-color: var(--SCW-blue);
}

#overlay { 
	mix-blend-mode: color;
}

#overlay2 {
	mix-blend-mode: color-burn;
	opacity: 1;
	background-color: #313b51;
}

#overlay3 {
	mix-blend-mode: color-dodge;
	opacity: .8;
}

#overlay4 {
	mix-blend-mode: darken;
	opacity: .7;
}

#map iframe {
	margin-top: -200px;
	z-index: 0;
}

#map {
	position: relative;
	object-fit: cover;
	height: 500px;
	overflow: hidden;
	background-image: url("../images/SCW-map.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media only screen and (max-width: 800px) {
	#contact .contactSidebar {
		top: 145px;
		right: 0;
		width: 100%;
		text-align: center;
		float: left;
		padding: 60px;
	}
	#map {
		height: 700px;
		float: left;
		padding-top: 150px;
	}
	.contactMail {
		margin: 0px auto;
		width: 100%;
	}
}


/* Testimonials */

#testimonials {
	background-color: var(--SCW-brown-4);
}

#testimonials h2 {
	color: #fff;
}

#testimonials .bx-wrapper {
	border: 0px !important;
	-moz-box-shadow: none !important;
  	-webkit-box-shadow: none !important;
  	box-shadow: none !important;
  	background: none !important;
	max-width: 100% !important;
	padding-top: 40px;
}

#testimonials p {
	color: var(--SCW-brown-5);
}

#testimonials span {
	font-weight: 400;
	font-size: 1em;
	line-height: 1.5em;
	font-style: italic;
	padding-top: 30px;
	display: block;
}

#testimonials .bx-wrapper .bx-pager.bx-default-pager a {
  	background: #ede8da !important;
}

#testimonials .bx-wrapper .bx-pager.bx-default-pager a:hover,
#testimonials .bx-wrapper .bx-pager.bx-default-pager a.active,
#testimonials .bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: var(--SCW-brown-3) !important;
}


#testimonials .bx-pager {
	float: left !important;
	margin: 0 !important;
	text-align: left !important;
}

@media only screen and (max-width: 800px) {
	#testimonials h2 {
	}
}


/* Footer */
#footer {
	background-color: var(--SCW-blue);
	text-align: left;
}

#footer .phone a {
	color: #fff;
	font-size: 1.8em;
	padding: 0;
	margin: 0;
}

#footer .phone, #footer .contactMail {
	float: left;
}

#footer .contactMail {
	/*margin: 12px 0 0 10%;*/
	margin: 12px 0 0 0;
	background-position: 0 -25px;
}

#footer .contactMail:hover {
	color: #fff;
}

#footer .contactMail:hover {
	background-position: 0 0;
}

#footContact {
	margin-top: 0px;
	width: 50%;
}

#footer a.social {
	display: block;
	height: 25px;
	background-repeat: no-repeat;
	background-size: cover;
	float: left;
	margin: 12px 0px 0px 3%;
}

#footer a.twitter {
	margin-left: 7%;
	width: 30px;
	background-image: url("../images/SocialIcons-twitter.svg");
	background-position: 0 -29px;
}

#footer a.twitter:hover {
	margin-left: 7%;
	background-position: 0 0;
}

#footer a.facebook {
	background-image: url("../images/SocialIcons-facebook.svg");
	background-position: 0 -26px;
	width: 15px;
}

#footer a.facebook:hover {
	background-position: 0 0;
}

#footer a.linkedin {
	background-image: url("../images/SocialIcons-linkedin.svg");
	background-position: 0 -27px;
	width: 25px;
}

#footer a.linkedin:hover {
	background-position: 0 0;
}

#footLogo {
	float: right;
}

#footLogo {
	max-width: 40%;
	padding-left: 5%;
}

#footLogo .logo {
	width: 100%;
}

#copyright {
	color: #fff;
	opacity: .3;
	font-size: .9em;
	display: block;
	clear: left;
	margin-top: 90px; 
}

@media only screen and (max-width: 1100px) {
	#footer .contactMail {
		clear: left;
		margin-left: 0;
		margin-bottom: 0px;
		width: 100%;
		float: none;
	}
	#footContact {
	    width: 100%;
	    max-width: 100%;
	}
	#footLogo {
	    float: none;
	    width: 100%;
	    max-width: 100%;
	    margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    #footLogo .logo {
        max-width: 200px;
        margin-left: 0px;
        margin-right: 0px;
    }
    #footer {
        text-align: center;
    }
    #copyright {
        margin-top: 40px;
    }
}