body, html{
	height: 100%;
}

.hero{
	background-repeat: no-repeat;
	background-size: cover;
}

.hero-text{
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	height: 80vh;
}

/*For large screens (iPad upwards)*/
@media screen and (min-width: 992px){
	#hero-index{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/ev-heros.jpg");		
		background-position: bottom 0 left 60%;
	}
	
	#hero-index .hero-text{
		text-align: end;
	}
	
	#hero-contact{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/contact-heros.jpg");
		background-position: top 50% right 40%;
	}
	
	#hero-contact .hero-text{
		text-align: start;
	}
	
	#hero-installation{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/installation-heros.jpg");
		background-position: center center;
	}
	
	#hero-installation .hero-text{
		text-align: start;
	}
	
	#hero-booking{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/booking-heros.jpg");
		background-position: center center;		
	}
	
	#hero-testimonials{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/testimonials-heros.jpg");
		background-position: center center;		
	}
	
	#hero-about{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/about-heros.jpg");
		background-position: center center;		
	}
	
	#hero-privacy{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/privacy-heros.jpg");
		background-position: center center;		
	}
	
}

/*For small screens (smaller than an iPad)*/
@media screen and (max-width: 992px){	
	#hero-index{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/ev-heros.jpg");		
		background-position: bottom 0 left 0%;		
	  /* alternative background-position: bottom 0 left 30%;*/
	}

	#hero-index .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}
	
	#hero-contact{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/contact-heros.jpg");
		background-position: top 0 left 40%;
	}
	
	#hero-contact .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}
	
	#hero-installation{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/installation-heros.jpg");
		background-position: center center;
	}
	
	#hero-installation .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}
	
	#hero-installation .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}
	
	.centre-under-md{
		display: flex;
		justify-content: center;
	}
	
	.text-center-ulg{
		text-align: center;
	}
	
	#hero-booking{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/booking-heros.jpg");
		background-position: center center;		
	}
	
	#hero-booking .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}
	
	#hero-testimonials{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/testimonials-heros.jpg");
		background-position: center center;		
	}
	
	#hero-testimonials .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}
	
	#hero-about{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/about-heros.jpg");
		background-position: center right;		
	}
	
	#hero-about .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}
	
	#hero-privacy{
		background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/privacy-heros.jpg");
		background-position: center right;		
	}	
	
	#hero-privacy .hero-text{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 80vh;
	}

}

@media screen and (max-width: 768px){	
	.text-center-umd{
		text-align: center;
	}
		.hide-md{
		display: flex;
	}

}

@media screen and (max-width: 576px){	
	.text-center-uxs{
		text-align: center;
	}
		.hide-md{
		display: flex;
	}

}

@media screen and (min-width: 769px){
	.hide-md{
		display: none;
	}
}

hr{
	width: 8rem;
	margin: auto;
	margin-bottom: 1rem;
}

#comparison, #contact, #ozev, #values {
	background-color: #F4F4F4;
}

.footer-top{
	background-color: #F0F0F0;
	color: #333333;
}

.footer-bottom{
	background-color: #222222;
}

.carousel-item{
	text-align: center;
	padding: 0 5em;
	color: white;
}

#testimonials{
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/testimonials.jpg");
	background-position: center right;
	background-repeat: no-repeat;
	background-size: cover;
}

.card-icon{
	width: 6rem;
	margin: auto;
	margin-top: 5%;
	/*margin-bottom: 5%*/
	
}

.section-container{
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.testimonials-hr{
	background-color: white;
	width: 15%;
}

@keyframes fade-in {
	from {opacity: 0;}
	to {opacity: 1;}
}

a {
	text-decoration: none;
}

#message{
	height: 8rem;
}

.img-center{
	display: flex;
	justify-content: center;
}

.bgimg-survey{
		background-image: url("../images/survey.jpg");
		background-position: center center;	
}

.full-height{
		text-align: center;
		justify-content: center;
		/*alternatively, justify-content: end*/
		height: 60vh;
}

.fs-title{
	font-size: 4.5rem;
}

.font-small{
	font-size: 0.8rem;
}

.navbar-brand{
	font-family: 'Comfortaa', cursive;
}

.transparent{
	background-color: #F4F4F4;
}

.logo{
	height: 4rem;
}

@media screen and (max-width: 430px){
	.logo{
		height: 3rem;
	}
}

@media screen and (max-width: 350px){
	.logo{
		height: 2rem;
	}
}