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



/* BANNER
================================*/
.banner {
	padding 				: 0 20px;
	position 				: relative;
	z-index 				: 100;
	background 				: #FFFFFF;
}

.banner-content {
	padding 				: 20px;
	background-image		: -webkit-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -webkit-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image		: -moz-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -moz-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image		: -o-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -o-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image		: linear-gradient(to right, #f6a01e 0%, #e75d00 100%), linear-gradient(to right, #f6a01e 0%, #e75d00 100%);
	text-align 				: center;
}

.banner a {
	display 				: inline-block;
}

.banner a:first-child {
	margin 					: 0 7.5px 0 0;
}

.banner a:last-child {
	margin 					: 0 0 0 7.5px;
}

@media all and (max-width: 576px) {
	.banner a {
		display 				: block;
		margin-right 			: 0 !important;
		margin-left 			: 0 !important;
	}
	
	.banner a:first-child {
		margin-bottom 				: 10px;
	}
}

/* NEWS
================================*/
#news {
	padding-bottom 		: 90px;
}

#news .grid-container {
	padding-right 		: 15px;
	padding-left 		: 15px;
}

.grid {
	margin-right 		: -7.5px;
	margin-left 		: -7.5px;
	overflow 			: hidden;
}

.grid-sizer,
.news-item {
	width 				: 33.3333333%;
	overflow 			: hidden;
}

.news-item--width2 {
	width 				: 66.6666666%;
}

.news-item .news-body {
	background 			: #FFFFFF;
	padding 			: 7.5px;
}

/* --- NEWS | HEADLINE --- */
.news-item .news-body h3 {
	font 				: 700 23px/40px 'Open Sans';
	color 				: #272727;
	text-transform 		: uppercase;
	letter-spacing 		: -0.5px;
	-webkit-transition 	: all 300ms linear 0s;
	-o-transition 		: all 300ms linear 0s;
	transition 			: all 300ms linear 0s;
}

/* --- NEWS | TEXT --- */
.news-item .news-body p {
	font-size 			: 19px;
	line-height 		: 25px;	
}

.cut-text {
	overflow 			: hidden;
	width 				: 100%;
	display 			: -webkit-box;
	-webkit-line-clamp 	: 3;
	-webkit-box-orient 	: vertical;
}

/* --- NEWS | DATE --- */
.news-item .news-body .date {
	font 				: 400 13px/18px 'Open Sans';
	color 				: #272727;
	margin-bottom 		: 0;
}

.news-item .news-body .date span {
	padding 			: 0 10px 0 0;
}

/* --- NEWS | NEWS WITH IMAGE --- */
/* --- IMAGE --- */
.news-with-img {
	display 			: block;
	padding-bottom 		: 25px;
}

.news-with-img:hover {
	text-decoration 	: none;
}

.news-with-img > .news-img,
.news-dark > .news-img,
.news-light > .news-img,
.news-orange > .news-img {
	display 			: block;
	overflow 			: hidden;
	margin-bottom 		: 25px;
}

.news-with-img .news-img img,
.news-dark .news-img img,
.news-light .news-img img,
.news-orange .news-img img {
	-webkit-transition 	: all .5s ease 0s;
	-o-transition 		: all .5s ease 0s;
	transitioN 			: all .5s ease 0s;
}

.news-with-img .news-img:hover img,
.news-dark .news-img:hover img,
.news-light .news-img:hover img,
.news-orange .news-img:hover img {
	-webkit-transform 	: scale(1.1);
	-ms-transform 		: scale(1.1);
	-o-transform 		: scale(1.1);
	transform 			: scale(1.1);
}

/* --- NEWS | NEWS DARK ---*/
.news-dark {
	background 			: #272727;
	display 			: block;
}

.news-dark .news-content {
	padding 			: 28px 29px;
}

.news-dark:hover {
	text-decoration 	: none;
}

.news-dark h3,
.news-dark p {
	color 				: #FFFFFF !important;
	-webkit-transition 	: all 300ms linear 0s;
	-o-transition 		: all 300ms linear 0s;
	transition 			: all 300ms linear 0s;
}

.news-dark:hover h3,
.news-dark:hover p {
	color 				: rgba(255,255,255,.7) !important;
	text-decoration 	: none;
}

/* --- NEWS | NEWS ORANGE ---*/
.news-orange {
	display 			: block;
	background 			: rgb(246,160,30);
	background 			: -moz-linear-gradient(90deg, rgba(246,160,30,1) 0%, rgba(231,93,0,1) 100%);
	background 			: -webkit-linear-gradient(90deg, rgba(246,160,30,1) 0%, rgba(231,93,0,1) 100%);
	background 			: linear-gradient(90deg, rgba(246,160,30,1) 0%, rgba(231,93,0,1) 100%);
	filter 				: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f6a01e",endColorstr="#e75d00",GradientType=1); 
}

.news-orange .news-content {
	padding 			: 28px 29px;
}

.news-orange:hover {
	text-decoration 	: none;
}

.news-orange h3,
.news-orange p,
.news-orange a {
	color 				: #FFFFFF !important;
	-webkit-transition 	: all 300ms linear 0s;
	-o-transition 		: all 300ms linear 0s;
	transition 			: all 300ms linear 0s;
}

.news-orange:hover h3,
.news-orange:hover p {
	color 				: #272727 !important;
}

/* --- NEWS | NEWS LIGHT ---*/
.news-light {
	display 			: block;
	background 			: #FFFFFF;
	color 				: #272727;
	border 				: 2px solid #272727;
}

.news-light .news-content {
	padding 			: 28px 29px;
}

.news-light:hover {
	border 				:  2px solid #F07E00;
	text-decoration 	: none;
}

#load-more {
	padding 			: 50px 0;
	text-align 			: center;
}

@media all and (max-width:767px) {	
	.grid-sizer,
	.news-item {
		width 				: 50%;
	}
	
	.news-item--width2 {
		width 				: 100%;
	}
	
	.news-dark,
	.news-orange,
	.news-light {
		padding 			: 18px 19px;
	}
	
	.news-with-img {
		padding-bottom 		: 18px;
	}
	
	.news-with-img > .news-img {		
		margin-bottom 		: 10px;
	}
}

@media all and (max-width:500px) {	
	.grid-sizer,
	.news-item {
		width 				: 100%		
	}	
}

/* --- DOWNLOAD BTN --- */
.download-btn {
	display 				: inline-block;
	cursor 					: pointer;
	text-transform 			: uppercase;
	color 					: #FFFFFF;
	font-size 				: 13px;
	letter-spacing 			: 1px;
	line-height 			: 15px;
	border-radius 			: 0;
	border-width 			: 0 2px;
	border-style 			: solid;
	border-left-color 		: #f6a01e;
	border-right-color 		: #e75d00;
	padding 				: 20px;
	margin 					: 0;
	background 				: transparent;
	background-position 	: 0 0, 0 100%;
	background-repeat 		: no-repeat;
	-webkit-background-size : 100% 2px;
	background-size 		: 100% 2px;
	background-image		: -webkit-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -webkit-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image 		: -moz-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -moz-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image 		: -o-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -o-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image 		: linear-gradient(to right, #f6a01e 0%, #e75d00 100%), linear-gradient(to right, #f6a01e 0%, #e75d00 100%);
	-webkit-transition 		: all 300ms linear 0s;
	-o-transition 			: all 300ms linear 0s;
	transition 				: all 300ms linear 0s;
	font-weight 			: 600;
	height 					: 100%;
}

.download-btn > span > span {
	display 				: block;
	text-align 				: center;
}

.download-btn > span > span:nth-child(1) {
	margin-bottom			: 20px;
}

.download-btn span {
	background			 	: -webkit-linear-gradient(240deg, #f6a01e 0%, #e75d00 100%);
	background			 	: -o-linear-gradient(240deg, #f6a01e 0%, #e75d00 100%);
	background			 	: linear-gradient(330deg, #f6a01e 0%, #e75d00 100%);
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
	color 					: #e75d00;
}

.download-btn [class^="flaticon-"]:before,
.download-btn [class*=" flaticon-"]:before,
.download-btn [class^="flaticon-"]:after,
.download-btn [class*=" flaticon-"]:after {   
	font-size 				: 60px;
	line-height 			: 60px;
	margin 					: 0;
	font-weight 			: 200;
}

.download-btn:hover,
.download-btn:focus {
	text-decoration 		: none;
	background-size 		: 100% 100%;
	border-left-color 		: #f6a01e;
	border-right-color 		: #e75d00;
}

.download-btn:hover span,
.download-btn:focus span {
	background 				: -webkit-linear-gradient(240deg, white 0%, white 100%);
	background 				: -o-linear-gradient(240deg, white 0%, white 100%);
	background 				: linear-gradient(330deg, white 0%, white 100%);
	color 					: #FFFFFF;
	text-decoration 		: none;
	-webkit-background-clip : text;
	-webkit-text-fill-color : transparent;
}

@media all and (max-width:767px) {
	.download-btn {
		width 				: 100%;
		height 				: auto;
		margin-bottom 		: 20px;
	}
}

/* --- MODAL - PROMO BOX --- */
@media (max-width: 992px) {
	#promo-modal .modal-dialog {
		max-width 			: 100%;
	}
}

@media (min-width: 992px) {
	#promo-modal .modal-dialog {
		max-width 			: 1200px;
	}
}

#promo-modal {
	padding 				: 0 17px;
}

#promo-modal .modal-content {
	background 					: transparent;
	border 						: 0;
}
#promotion .container {
	max-width 					: 1310px !important;
	width 						: 100%;
}

@media all and (max-width: 1310px) {
	#promotion .container {
	    max-width 				: 940px !important;
	}
}

.promotion-body {
	display 					: flex;
	flex-wrap 					: wrap;
	overflow 					: hidden;
}

.promo-img {
	-ms-flex 					: 0 0 50%;
	flex 						: 0 0 50%;
	max-width 					: 50%;
	position 					: relative;
}

.promo-img img {
	position 					: relative;
	top 						: 50%;
	-webkit-transform 			: translateY(-50%);
	-ms-transform 				: translateY(-50%);
	-o-transform 				: translateY(-50%);
	transform 					: translateY(-50%);
	max-width 					: 110%;
	left 						: -5%;
	border 						: 5px solid #FFF;
}

.promo-content {
	-ms-flex 					: 0 0 50%;
	flex 						: 0 0 50%;
	max-width 					: 50%;
	position 					: relative;
}

.promo-bg {
	background-image			: -webkit-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -webkit-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image			: -moz-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -moz-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image			: -o-linear-gradient(left, #f6a01e 0%, #e75d00 100%), -o-linear-gradient(left, #f6a01e 0%, #e75d00 100%);
	background-image			: linear-gradient(to right, #f6a01e 0%, #e75d00 100%), linear-gradient(to right, #f6a01e 0%, #e75d00 100%);
	width 						: 200%;
	height 						: 100%;
	position	 				: absolute;
	left	 					: -20px;
	-webkit-transform 			: skewX(-6deg);
	-ms-transform 				: skewX(-6deg);
	-o-transform 				: skewX(-6deg);
	transform 					: skewX(-6deg);
}

.promo-text {
	position 					: relative;
	text-align	 				: center;
	padding 					: 100px 50px;
	top 						: 50%;
	-webkit-transform 			: translateY(-50%);
	-ms-transform 				: translateY(-50%);
	-o-transform 				: translateY(-50%);
	transform 					: translateY(-50%);
}

.promo-text h3 {
	text-transform 				: none;
	margin-bottom 				: 20px;
	color 						: #FFF;
	font 						: 700 calc(22px + (55 - 22) * ((100vw - 350px) / (2400 - 350))) / calc(30px + (65 - 30) * ((100vw - 350px) / (2400 - 350))) 'Open Sans';
}

.promo-text p {
	margin-bottom 				: 40px;
	color 						: #FFF;
}

@media all and (max-width:1310px) {
	.promo-img {
		-ms-flex 					: 0 0 100%;
		flex 						: 0 0 100%;
		max-width 					: 100%;
	}

	.promo-content {
		-ms-flex 					: 0 0 100%;
		flex 						: 0 0 100%;
		max-width 					: 100%;
	}
	
	.promo-bg {
		width 						: 100%;
		height 						: 200%;
		position	 				: absolute;
		top	 						: -40px;
		left 						: 0;
		-webkit-transform 			: skewX(0deg) skewY(-5deg);
		-ms-transform 				: skewX(0deg) skewY(-5deg);
		-o-transform 				: skewX(0deg) skewY(-5deg);
		transform 					: skewX(0deg) skewY(-5deg);
	}
	
	.promo-img img {
		max-width 					: 100%;
		left 						: 0;
		border 						: 0;
	}
	
	.promo-text {
		padding 					: 10px 50px 50px 50px;
	}
}

@media all and (max-width:767px) {
	.promo-bg {
		top	 						: -20px;
		-webkit-transform 			: skewX(0deg) skewY(-3deg);
		-ms-transform 				: skewX(0deg) skewY(-3deg);
		-o-transform 				: skewX(0deg) skewY(-3deg);
		transform 					: skewX(0deg) skewY(-3deg);
	}
	
	.promo-text {
		padding 					: 10px 20px 20px 20px;
	}
}