/*------------ About Page CSS ------------*/

/*------ Hero Header ------*/
#about-hero {
	background: rgb(18,0,12);
	background: linear-gradient(70deg, rgba(18,0,12,1) 0%, rgba(18,0,12,1) 30%, rgba(89,0,64,0.05) 100%), url("../images/banners/bv-inner-hero-bg-About.jpg") no-repeat center center /cover;
}

/*------ Intro ------*/

.intro {
	margin-bottom: 4.375rem;
}
.intro p {
	font-size:1.125rem;
	line-height: 1.625rem;
	margin: 2rem auto 4.313rem;
}
.intro h3 {
	margin: 4.313rem 0 2.438rem;
}

/*------ Overview ------*/

.overview-box {
	width: 100%;
    height: auto;
    border: 1px solid #E3E1E1;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0px 3px 6px #00000029;
    -webkit-box-shadow: 0px 3px 6px #00000029;
    -moz-box-shadow: 0px 3px 6px #00000029;
	margin-bottom: 4rem;
	display: grid;
	overflow: hidden;
}
.overview-text {
    width: 67%;
    float: left;
    padding: 2.719rem 3.75rem 2.719rem 5.844rem;
}
.flex-lg-row-reverse .overview-text {
	padding: 2.719rem 5.844rem 2.719rem 3.75rem;
}
.overview-text h6 {
	font-weight: 400;
	margin-bottom: 1.25rem;
}
.overview-text h4 {
	margin-bottom: 4.375rem;
}
.overview-img {
    width: 33%;    
    border-radius: 8px 0 0 8px;
		-webkit-border-radius: 8px 0 0 8px;
		-moz-border-radius: 8px 0 0 8px;
    position: relative;
    height: 100%;
}
.flex-lg-row-reverse .overview-img {
	border-radius: 0 8px 8px 0;
		-webkit-border-radius: 0 8px 8px 0;
		-moz-border-radius: 0 8px 8px 0;
}
#overview-img-1 {
	background: url("../images/mission-img.jpg") no-repeat top left /cover;
}
#overview-img-2 {
	background: url("../images/vision-img.jpg") no-repeat top right /cover;
}
#overview-img-3 {
	background: url("../images/approach-img.jpg") no-repeat top left /cover;
}
#overview-img-4 {
	background: url("../images/monitoring-img.jpg") no-repeat top right /cover;
}
#overview-img-5 {
	background: url("../images/patent-img.jpg") no-repeat top left /cover;
}

/*------ Grey Section ------*/

.grey-section {
	padding: 4.313rem 0;
}
.grey-section h3 {
	padding-top: 2.875rem;
	margin-bottom: 2.5rem;
}
.grey-section h4 {
	margin-bottom: 0.8rem;
}
.grey-section p {
	padding-left: 0;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2.75rem;
}


/*------ Icon List Section ------*/

.icon-list-intro h2 {
	margin-bottom: 2.875rem;
}


/*------------ Responsive ------------*/

/* RETINA */
@media (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 
	#about-hero {
		background-image: linear-gradient(70deg, rgba(18,0,12,1) 0%, rgba(18,0,12,1) 30%, rgba(89,0,64,0.05) 100%), url("../images/banners/bv-inner-hero-bg-About@2x.jpg");
	}
	#overview-img-1 {
		background: url("../images/mission-img@2x.jpg") no-repeat top left /cover;
	}
	#overview-img-2 {
		background: url("../images/vision-img@2x.jpg") no-repeat top right /cover;
	}
	#overview-img-3 {
		background: url("../images/approach-img@2x.jpg") no-repeat top left /cover;
	}
	#overview-img-4 {
		background: url("../images/monitoring-img@2x.jpg") no-repeat top right /cover;
	}
	#overview-img-5 {
		background: url("../images/patent-img@2x.jpg") no-repeat top left /cover;
	}
}

/* max-width: 992px */
@media (max-width: 992px) {
	.overview-img,
	.overview-text,
	.inner-cta-start .col-8, 
	.inner-cta-start .col-4 {
		width: 100%;
	}	
	.overview-img,
	.flex-lg-row-reverse .overview-img {
		border-radius: 8px 8px 0 0;
			-webkit-border-radius: 8px 8px 0 0;
			-moz-border-radius: 8px 8px 0 0;
		height: 20rem;
		float: none;
		 position: relative;
	}
	#overview-img-1,
	#overview-img-2,
	#overview-img-3,
	#overview-img-4,
	#overview-img-5 {
		background-position: left -2rem;
	}
	.overview-text {
		padding: 2.719rem 4rem;
	}
	.overview-text h4 {
		margin-bottom: 3.1rem;
	}
	.inner-cta-start .col-8, 
	.inner-cta-start .text-end {
		text-align: center !important;
	}
}

/* max-width: 768px */
@media (max-width: 768px) {	
	.inner-hero {
		background-position: 40% center !important;
	}
	.intro p {
		margin-bottom: 4.5rem ;
	}
}
/* max-width: 600px */
@media (max-width: 600px) {	
	.inner-hero {
		background-position: 45% center !important;
	}
	.grey-section p {	
		width: 100%;
	}
	.overview-img,
	.flex-lg-row-reverse .overview-img {
		height: 18rem;
	}
}
/* max-width: 480px */
@media (max-width: 480px) {	
	.inner-hero {
		background-position: 60% center !important;
	}
	.intro p {
		margin-bottom: 5rem;
	}
	.overview-img,
	.flex-lg-row-reverse .overview-img {
		height: 15rem;
	}
	.overview-text {
		padding: 2rem 3rem;
	}
	.overview-text h4 {
		margin-bottom: 2.5rem;
	}
}