@font-face {
    font-family: Avenir;
    src: url('../fonts/avenirltstd-light.otf');
}
@font-face {
	font-family: Scriptina;
	src: url('../fonts/SCRIPTIN.ttf');
  }

body { background-color: #005761; }

a { color: rgb(250 202 125); }
a:hover { color: rgb(250 202 125); }

a.btn { background-color: rgb(250 202 125); border: solid rgba(153, 153, 151, 1) 0px; border-radius: 0; cursor: pointer !important; padding: 8px 16px; color: #fff; }
a.btn:hover { background-color: #005761; color: #fff; }

.container { padding: 0 !important; }
.container-fluid, .container-lg, .container-md, .container-sm, .container-xl { padding-left: 0 !important; padding-right: 0 !important; }
.row { margin-left: 0 !important; margin-right: 0 !important; }

.parallax-container { height: 650px; }

.left-content, .right-content { width: 50%; display: flex; align-items: center; justify-content: center; }

#header { color: #fff; }
    #header img { width: 100%; }

.navigation { position: absolute; top: 20px; z-index: 99; color: #fff; }

#nav { list-style: none; overflow: hidden; }
    #nav > li { float: left; font-family: 'Avenir', sans-serif; padding: 0 10px; font-size: 15px; transition: color 0.4s ease 0s; }
	#nav > li > a { color: #fff; }
	#nav > li > a:hover { color: #F7DC4F; text-decoration: none; }

.heading { max-width: min-content; align-self: center; font-family: 'Roboto', sans-serif; }
    .heading h1 { font-size: 114px; font-weight: 600; line-height: 0.9em; }
    .heading h2 { color: #F7DC4F; font-size: 48px; }
section#body { background-color: #f1f0f0; padding: 120px 0; }
	section#body h2 { position:relative; display:inline-block; color: #005761; text-align: center; font-family: 'Oswald', 'Roboto', sans-serif; font-size: 48px; font-weight: 600; padding-bottom: 21px; }
	section#body h2:before, section#body h2:after, #services h2:before, #services h2:after { content: "..."; position: absolute; bottom: 35px; }
	section#body h2:before, #services h2:before { left: -40px; }
	section#body h2:after, #services h2:after { right: -40px; }
    section#body p { font-family: 'Avenir', sans-serif; line-height: 1.8em; text-align: center; font-size: 15px; letter-spacing: 0.05em; }
    
#services { background-color: #fff; padding: 80px 0; }
    #services h2 { position: relative; display: inline-block; color: #005761; text-align: center; font-family: 'Oswald', 'Roboto', sans-serif; font-size: 48px; font-weight: 600; padding-bottom: 21px; }
	#services .card { text-align: center; border: 0; }
	#services .card .card-body { margin-bottom: 30px; }
	#services .card .card-title { position: relative; margin-bottom: 2rem; }
	#services .card .card-title:after { content: " "; border-bottom: 5px solid #faca7d; width: 20%; left: 40%; bottom: -20px; position: absolute; }

#contact { display: flex; height: 500px; max-height: 600px; overflow: hidden; background-image: url('../img/footer-bkg.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; }
    #contact h1 { color: #faca7d; font-family: 'Oswald', 'Roboto', sans-serif; font-size: 80px; font-weight: 200; }
    #contact h4 { color: #fff; font-family: 'Roboto', sans-serif; }
    #contact ul { padding-left: 10px; }
        #contact ul > li { list-style: none; color: #fff; }
	/*#contact .container, #contact .container * { width: fit-content; }*/
	#contact > .container { display: flex; flex-flow: row; }
    #contact .left-content img { display: none; width: 100%; }
    #contact .contact-icon-bar > a { background: none !important; padding: 10px; }

#footer { font-family: 'Avenir', sans-serif; line-height: 1.8em; text-align: center; font-size: 15px; letter-spacing: 0.05em; min-height: 50px; }
    #footer .copyright { background-color: #fff; text-align: center; height: 80px; display: flex; align-items: center; justify-content: center; }

.parallax-window { min-height: 100vh; background: transparent; }


/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
position: fixed;
top: 50%;
right: 0;
z-index: 99;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/* Style the icon bar links */
.icon-bar a {
display: block;
text-align: center;
padding: 10px 12px;
transition: all 0.3s ease;
color: #000;
font-size: 20px;
}
.icon-bar a:first-child { padding-top: 10px; }
.icon-bar a:last-child { padding-bottom: 10px; }
/* Style the social media icons with color, if you want */
.icon-bar a { background-color: #faca7d; color: #d48200; }
.icon-bar a:hover { background-color: #000; color: #fff; }
.facebook {
/*background: #3B5998;*/
color: white;
}
.twitter {
/*background: #55ACEE;*/
color: white;
}
.instagram {
/*background: #dd4b39;*/
color: white;
}
.linkedin {
/*background: #007bb5;*/
color: white;
}
.youtube {
/*background: #bb0000;*/
color: white;
}


/*-----------------------------------------------------------------------------------*/
/*	3. Homepage Hero & Featured Content
/*-----------------------------------------------------------------------------------*/

#home-header {
	position: relative;
	/* For customizing this property, use custom.css */
	padding-top: 70px; /* this should match #header .container min-height */
}
#header.extended + #main #home-header {
	/* For customizing this property, use custom.css */
	padding-top: 144px; /* this should match #header.extended .container min-height */
}
#home-header > .stripe-upper-bg {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
#home-header > .stripe-upper-bg::before {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";
	background-image: -webkit-linear-gradient(135deg, #384b54, rgba(56, 75, 84, 0.9) 18%, rgba(80, 115, 133, 0.8));
	background-image: -o-linear-gradient(135deg, #384b54, rgba(56, 75, 84, 0.9) 18%, rgba(80, 115, 133, 0.8));
	background-image: linear-gradient(135deg, #384b54, rgba(56, 75, 84, 0.9) 18%, rgba(80, 115, 133, 0.8)); /* #384b54, #507385 */
}

#home-hero-content {
	position: relative;
}
#home-hero-content::before {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	content: "";
	background-color: #fff;
	background-image: url(../img/strip-bg.png);
	background-position: left top;
	background-repeat: repeat;
	opacity: 0.9;
	z-index: 2;
}
#home-hero-content .content-wrapper {
	position: relative;
	overflow: hidden;
	z-index: 4;
}

#home-hero {
	position: relative;
	z-index: 2;
}
#home-hero .hero-image {
	position: relative;
}
#home-hero .hero-image.shadow {
	-webkit-box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.45) !important;
    		box-shadow: 0 0 25px 2px rgba(0, 0, 0, 0.45) !important;
}
#home-hero .hero-image img {
	position: relative;
	z-index: 1;
	width: 100%;
}
#home-hero .hero-image::before { /* image overlay border */
	position: absolute;
	content: "";
	border: 2px solid #eee;
	z-index: 2;
}
#home-hero-content .top-square-wrapper,
#home-hero-content .bottom-square-wrapper {
	position: absolute;
	left: 0;
	right: 0;
}
#home-hero-content .top-square-wrapper {
	z-index: 1;
}
#home-hero-content .bottom-square-wrapper {
	z-index: 3;
}
#home-hero-content .top-square { /* top colored square */
	position: relative;
	left: 100%;
	background-color: #6b9bb3;
}
#home-hero-content .bottom-square { /* bottom colored square */
	position: relative;
	left: 50%;
	background-color: #faca7d;
}

/* Homepage intro
--------------------------------------------------- */
#home-intro {
	position: relative;
	align-self: center;
	z-index: 1;
}
#home-intro::before {
	position: absolute;
	content: "";
	background-color: #f9f9f9;
}
#home-intro .intro-text {
	position: relative;
}
#home-intro .intro-text h1 {
	font-size: 3em;
	color: #005761;
}
#home-intro .intro-text h1,
#home-intro .intro-text h2 {
	font-family: Oswald;
}
#home-intro .intro-text .signature {
	font-family: Scriptina;
	font-size: 70px;
	padding-top: 50px;
}
#home-intro .intro-text p {
	margin-bottom: 25px;
}
#home-intro .intro-text p:not(.lead-text-large) {
	line-height: 1.5;
}

/* Homepage featured content
--------------------------------------------------- */
#home-featured-content {
	
}

/* Media queries
--------------------------------------------------- */
@media (min-width: 1520px) {
	#home-hero-content::before {
		width: calc(50% + 645px); /* 645px = 1320px / 2 - 15px */
	}
	#home-hero {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	#home-hero .hero-image {
		margin-right: calc(-8.073vw); /* -155px for 1920px */
	}
	#home-hero .hero-image::before {
		top: 50px;
		left: 50px;
		bottom: 50px;
		right: 50px;
	}
    #home-hero .hero-image img { width: 100%; }
	#home-hero-content .top-square {
		width: 260px;
		height: 260px;
		margin-left: calc(8.073vw - 220px);
		margin-top: 52px;
	}
	#home-hero-content .bottom-square {
		width: 140px;
		height: 140px;
		margin-top: -60px;
	}
	#home-intro {
		height: 645px;
	}
	#home-intro::before {
		top: -180px;
		left: -295px;
		bottom: -180px;
		right: -215px;
	}
	#home-intro .intro-text {
		padding-right: 90px;
	}
	#home-intro .intro-text p {
		margin-bottom: 30px;
	}
}
@media (min-width: 1681px) {
	#home-hero-content .top-square {
		background-color: #adcad9;
	}
}
@media (min-width: 1850px) {
	#home-hero .hero-image {
		width: 800px;
		margin-right: -155px;
	}
	#home-hero-content .top-square {
		width: 300px;
		height: 300px;
		margin-left: -95px;
	}
}
@media (min-width: 1520px) and (max-width: 1680px) {
	#home-hero .hero-image {
		margin-right: -145px;
	}
	#home-hero-content .top-square {
		width: 60px;
		height: 60px;
		margin-left: 35px; /* 30px = -60px - 50px + 145px */
		margin-top: 35px;
	}
	#home-intro::before {
		top: -170px;
		left: -220px;
		bottom: -170px;
		right: -120px;
	}
}
@media (min-width: 1200px) and (max-width: 1519px) {
	#home-hero-content::before {
		width: calc(50% + 467px); /* 467px = 1170px / 2 - 15px - (58px + 45px)  */
	}
	#home-hero {
		padding-top: 90px;
		padding-bottom: 90px;
	}
	#home-hero .hero-image {
		margin-left: 30px;
		margin-right: -62px;
	}
	#home-hero .hero-image::before {
		top: 40px;
		left: 40px;
		bottom: 40px;
		right: 40px;
    }
    #home-hero .hero-image img {
        width: 100%;
    }
    #home-hero .hero-image img { width: 100%; }
	#home-hero-content .top-square {
		width: 80px;
		height: 80px;
		margin-left: -58px; /* -58px = -80px - 40px + 62px */
		margin-top: 37px;
	}
	#home-hero-content .bottom-square {
		width: 140px;
		height: 140px;
		margin-left: 30px;
		margin-top: -70px;
	}
	#home-intro {
		height: 570px;
	}
	#home-intro::before {
		top: -130px;
		left: -135px;
		bottom: -130px;
		right: -125px;
	}
}
@media (min-width: 1360px) and (max-width: 1519px) {
	#home-hero-content::before {
		width: calc(50% + 495px); /* 495px = 1170px / 2 - 15px - (25px + 50px) */
	}
	#home-hero {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	#home-hero .hero-image {
		margin-left: 40px;
		margin-right: -105px;
	}
    #home-hero .hero-image img { width: 100%; }
	#home-hero-content .top-square {
		width: 90px;
		height: 90px;
		margin-left: -25px; /* -25px = -90px - 40px + 105px */
		margin-top: 30px;
	}
	#home-hero-content .bottom-square {
		margin-left: 40px;
		margin-top: -60px;
	}
	#home-intro::before {
		top: -135px;
		left: -140px;
		bottom: -135px;
		right: -130px;
	}
}
@media (min-width: 992px) {
	#home-hero-content .content-wrapper .container {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
				flex-wrap: wrap;
		-webkit-flex-direction: row-reverse;
				flex-direction: row-reverse;
    }
	#home-hero,
	#home-intro {
		-webkit-flex-basis: 0;
			-ms-flex-preferred-size: 0;
				flex-basis: 0;
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
			-ms-flex-positive: 1;
				flex-grow: 1;
	}
	#home-intro::before {
		-webkit-border-radius: 50%;
				border-radius: 50%;
	}
	#home-intro .intro-text {
		top: 50%;
		-webkit-transform: translate(0, -50%);
			-ms-transform: translate(0, -50%);
			 -o-transform: translate(0, -50%);
				transform: translate(0, -50%);
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#home-hero-content::before {
		width: calc(50% + 353px); /* 353px = 970px / 2 - 15px - (77px + 50px) */
	}
	#home-hero {
		padding-top: 120px;
		padding-bottom: 120px;
	}
	#home-hero .hero-image {
		margin-left: 20px;
		margin-right: -73px; /* 73px = 43px + 30px (hidden image part from the right side) */
	}
	#home-hero .hero-image::before {
		top: 40px;
		left: 40px;
		bottom: 40px;
		right: 70px;
	}
	#home-hero-content .top-square {
		width: 80px;
		height: 80px;
		margin-left: -77px; /* -77px = -80px - 70px + 73px */
		margin-top: 65px;
	}
    #home-hero .hero-image img { width: 100%; }
	#home-hero-content .bottom-square {
		width: 120px;
		height: 120px;
		margin-left: 20px;
		margin-top: -80px;
	}
	#home-intro {
		height: 470px;
	}
	#home-intro::before {
		top: -160px;
		left: -180px;
		bottom: -160px;
		right: -140px;
	}
	#home-intro .intro-text .lead-text-extra-large {
		font-size: 28px;
	}
	#home-intro .intro-text .lead-text-large {
		font-size: 25px;
	}
	#home-intro .intro-text p:not([class*="lead-text-"]) {
		font-size: 20px;
	}
}
@media (max-width: 991px) {
	#home-header,
	#header.extended + #main #home-header {
		/* For customizing this property, use custom.css */
		padding-top: 70px; /* this should match #header .container min-height for @media (max-width: 991px) */
	}
	#home-hero-content .bottom-square-wrapper {
		z-index: 5;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	#home-hero-content::before {
		width: calc(50% + 219px); /* 219px = 750px / 2 - 15px - (96px + 45px) */
	}
	#home-hero {
		padding-top: 70px;
		padding-bottom: 0;
	}
	#home-hero .hero-image {
		margin-left: 120px;
		margin-right: -24px;
	}
	#home-hero .hero-image::before {
		top: 40px;
		left: 40px;
		bottom: 40px;
		right: 40px;
	}
    #home-hero .hero-image img { width: 100%; }
	#home-hero-content .top-square {
		width: 80px;
		height: 80px;
		margin-left: -96px; /* 96px = -80px - 40px + 24px */
		margin-top: 20px;
	}
	#home-hero-content .bottom-square {
		left: 100%;
		width: 100px;
		height: 100px;
		margin-left: -100px;
		margin-top: -50px;
	}
	#home-intro::before {
		top: -100px;
		bottom: 0px;
		left: -136px;
		right: -136px;
	}
	#home-intro .intro-text {
		padding: 70px 0 80px;
	}
}
@media (min-width: 480px) and (max-width: 767px) {
	#home-hero-content::before {
		width: 330px; /* fallback */
		width: calc(100% - 150px); /* 150px = 40px + 70px + 40px */
	}
	#home-hero {
		padding-top: 60px;
		padding-bottom: 0;
	}
	#home-hero .hero-image {
		margin-left: 110px;
		margin-right: -15px;
	}
	#home-hero .hero-image::before {
		top: 40px;
		left: 40px;
		bottom: 40px;
		right: 40px;
	}
    #home-hero .hero-image img { width: 100%; }
	#home-hero-content .top-square {
		width: 70px;
		height: 70px;
		margin-left: -95px; /* 95px = -70px - 40px + 15px */
		margin-top: 20px;
	}
	#home-hero-content .bottom-square {
		left: 100%;
		width: 100px;
		height: 100px;
		margin-left: -100px;
		margin-top: -50px;
	}
	#home-intro::before {
		top: -100px;
		bottom: 0px;
		left: -15px;
		right: -15px;
	}
	#home-intro .intro-text {
		padding: 70px 0 80px;
	}
}
@media (max-width: 479px) {
	#home-hero-content::before {
		width: 200px; /* fallback */
		width: calc(100% - 120px); /* 120px = 30px + 60px + 30px */
	}
	#home-hero {
		padding-top: 40px;
		padding-bottom: 0;
	}
	#home-hero .hero-image {
		margin-left: 25px;
		margin-right: -15px;
	}
	#home-hero .hero-image::before {
		top: 30px;
		left: 30px;
		bottom: 30px;
		right: 30px;
		border-width: 1px;
	}
	#home-hero-content .top-square {
		width: 60px;
		height: 60px;
		margin-left: -75px; /* 75px = -60px - 30px + 15px */
		margin-top: 15px;
	}
	#home-hero-content .bottom-square {
		left: 100%;
		width: 70px;
		height: 70px;
		margin-left: -70px;
		margin-top: -35px;
	}
	#home-intro::before {
		top: -100px;
		bottom: 0px;
		left: -15px;
		right: -15px;
	}
	#home-intro .intro-text {
		padding: 60px 0 80px;
	}
}