/**
 * Stylesheet declaration for KOLPINGHAUS - JUGENDWOHNEN
 *
 *
 * @url        /
 * @author     Tanja Almasy
 * @copyright  (c) 2019 ACTS Communication GmbH
 * @license    all rights reserved
 */

/* --- HERO IMG --- */
header {
	position 			: relative;
	padding 			: 0 20px;
	z-index 			: 100;
	background 			: #FFFFFF;
}

@media all and (max-width:600px) {
	/*header {
		padding 			: 0 15px;		
	}*/
}

#hero-image {
	height 				: calc(55vh - 90px);
	margin-top 			: 90px;
	overflow 			: hidden;
	width 				: 100%;
	background-size 	: cover;
	background-position : center center;
	position 			: relative;
}

#hero-image.living {
	background-image	: url("../images/hero-slider/living.jpg");
}

#hero-image.education {
	background-image 	: url("../images/hero-slider/education.jpg");
}

#hero-image.contact {
	background-image 	: url("../images/hero-slider/contact.jpg");
}

#hero-image.registration {
	background-image 	: url("../images/hero-slider/registration.jpg");
}

#hero-image.news {
	background-image	: url("../images/hero-slider/news.jpg");
	background-position : center 20%;
}

#hero-image .overlay {
	position 			: absolute;
	top 				: 0;
	right 				: 0;
	bottom 				: 0;
	left 				: 0;
	width 				: 100%;
	height 				: 100%;
	background  	 	: -webkit-linear-gradient(left, rgba(246,160,30,.4) 0%, rgba(231,93,0,.4) 100%);
	background  	 	: -moz-linear-gradient(left, rgba(246,160,30,.4) 0%, rgba(231,93,0,.4) 100%);
	background  	 	: -o-linear-gradient(left, rgba(246,160,30,.4) 0%, rgba(231,93,0,.4) 100%);
	background  	 	: linear-gradient(to right, rgba(246,160,30,.4) 0%, rgba(231,93,0,.4) 100%);
}

.hero-content {
	bottom 				: 50%;
	-webkit-transform 	: translate(-50%, 50%);
	-ms-transform 		: translate(-50%, 50%);
	-o-transform 		: translate(-50%, 50%);
	transform 			: translate(-50%, 50%);
	background 			: transparent;
}

@media all and (max-width:1300px) {
	.hero-content {
		width 				: 900px;
	}
}

@media all and (max-width:1300px) {
	.hero-content {
		width 				: 900px;
	}
}

@media all and (max-width:1100px) {
	.hero-content {
		width 				: 650px;
	}
}

@media all and (max-width:800px) {
	.hero-content {
		width 				: 100%;
	}
	
	.hero-content {
		padding 			: 0 30px;
	}
}

.hero-body {
	width 				: 100%;
	flex 				: 0 0 100%;
}

.hero-content h1 {
	color 				: #FFFFFF;
	display 			: block;
	margin-bottom 		: 20px;
}