/**
 * 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.privacy {
	background-image	: url("../images/hero-slider/01.jpg");
}

#hero-image .overlay {
	position 			: absolute;
	top 				: 0;
	right 				: 0;
	bottom 				: 0;
	left 				: 0;
	width 				: 100%;
	height 				: 100%;
	background  	 	: -webkit-linear-gradient(left, rgba(255,194,71,.4) 0%, rgba(255,157,56,.4) 100%);
	background  	 	: -moz-linear-gradient(left, rgba(255,194,71,.4) 0%, rgba(255,157,56,.4) 100%);
	background  	 	: -o-linear-gradient(left, rgba(255,194,71,.4) 0%, rgba(255,157,56,.4) 100%);
	background  	 	: linear-gradient(to right, rgba(255,194,71,.4) 0%, rgba(255,157,56,.4) 100%);
}

.hero-content {
	display 				: flex;
	flex-wrap 				: wrap;
    position 				: absolute;
    width 					: 1130px;
    z-index 				: 5;
	bottom 					: 50%;
	left 					: 50%;
	padding 				: 0 60px;
	-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: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;
}