/* Main CSS */
body{
	font-family: 'Open Sans', sans-serif;
	overflow-x: hidden;
	background-color: #c8c7c7;
	text-decoration: none;
}

p{
	/*color: #656565;*/
}

.p1{
	color: #fff;
	font-size: 2rem;
}

/* iframe 
.fancybox-slide--iframe .fancybox-content {
    width  : 800px;
    height : 600px;
    max-width  : 80%;
    max-height : 80%;
    margin: 0;
}
*/

/* Banner Area */
.bannerArea{
	height: 100px;
	background-color: #f5f5f5;
	background-image: url("../img/Art_Top_1920x252px.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.bannerHtml{
	height: 50px;
	background-color: #f5f5f5;
	background-image: url("../img/Art_Top_1920x252px.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
}

.colorOverlay{
	margin: 0;
	height: 100%;
	width: 100%;
	/*background-color: rgba(0,0,0,.5);*/
}

.bannerArea .container{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.heroText h1{
	font-size: 40px;
	font-weight: 700;
	color: #fff;
}

.heroText{
	color: #fff;
}

.heroText p{
	font-weight: 100;
	font-size: 15px;
	color: #fff;
}

/* Call Outs Section */
.callOuts h5{
	font-weight: bold;
}

.callOuts p{
	color: #555657;
	font-size: .8rem;
}

.callOuts img{
	margin-bottom: 15px;
}

/* Info Section 1 & 2 */
.infoSect1{
	background-color: #2b2b2b;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	position: relative;
	max-height: 800px;
}

.infoSect1 h5, .infoSect2 h5{
	font-weight: bold;
	color: #fff;
}

.infoSect1 p, .infoSect1 ul, .infoSect2 p{
	color: #fff;
	font-size: 1rem;
}

.infoSect1 img{
	max-height: 400px;
	margin-top: -20px;
}

.infoSect1 ul{
	margin: 0;
}

/* Call to Action */
.callToAction{
	background-color: #2b2b2b;
	color: #fff;
}

.callToAction h1{
	font-weight: bold;
}

.callToAction p{
	font-weight: 100;
}

.btn-outline-secondary:hover{
	text-decoration: none;
	background-color: transparent;
	color: green;
	border-color: #bfc1c1;
}

.btn-outline-secondary{
	text-decoration: none;
	color: #fff;
	background-color: transparent;
	border-color: #fff;
}

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

/* Quote Area */
.quoteArea blockquote{
	font-size: 30px;
	font-style: italic;
	font-weight: 100;
	color: #ffffff;
}

.quoteArea p{
	font-weight: bold;
}

/* Footer Area */
.footerArea{
	background-color: #000;
	color: #fff;
	display: flex;
	justify-content: center;
	flex-direction: column;
	font-weight: bold;
	height: 80px;
}

.footerArea p{
	margin: 0;
}

.section.fade-in {
	opacity: 0;
	transition: all 1s ease-out;
}

/**** Column Sections ****/

.section1{
	-webkit-animation-duration: .8s;
}

.section2{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: .3s;
}

.section3{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: .6s;
}

.section4{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: .9s;
}

.section5{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 1.2s;
}

.section6{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 1.5s;
}

.section7{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 1.8s;
}

.section8{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 2.1s;
}

.section9{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 2.4s;
}

.section10{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 2.7s;
}

.section11{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 3.0s;
}

.section12{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: 3.3s;
}
.phone{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: .5s;
}

.laptop{
	-webkit-animation-duration: .8s;
	-webkit-animation-delay: .5s;
}

/***** Responsive Code *****/

/*klein devices (landscape phones, 380px and up)*/
@media (min-width: 380px) {
	.bannerArea{
	height: 120px;
	}
	.heroText p{
	font-size: 16px;
	}	
	.heroText h1{
		font-size: 26px;
	}
	.infoSect1{
		max-height: 700px;
	}
	.infoSect1 img{
		margin-top: -30px;
	}
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.bannerArea{
	height: 180px;
	}
	.heroText p{
	font-size: 24px;
	}	
	.heroText h1{
		font-size: 30px;
	}
	.infoSect1{
		max-height: 370px;
	}
	.infoSect1 img{
		max-height: 600px;
		margin-top: -30px;
	}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) { 
	.bannerArea{
		height: 150px;
	}
	.topBar>img{
		margin-left: 50px;
	}
	.heroText p{
		font-size: 24px;
	}
	.heroText h1{
		font-size: 50px;
	}
	.infoSect1{
		max-height: 400px;
	}
	.infoSect1 img{
		max-height: 400px;
		margin-top: -100px;
	}
	.quoteArea blockquote{
		font-size: 40px;
	}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.bannerArea{
		height: 200px;
	}
	.infoSect1 img{
		max-height: 400px;
		margin-top: -45px;
	}
	.infoSect1 .mb-2{
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: 400px;
	}
	.infoSect2 .col-md-5{
		display: flex;
		justify-content: center;
		flex-direction: column;
		height: 400px;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

}