/*
    banner.css
    web-communication.eu | 14/04/2016
    Copyright 2016 web-communication.eu
*/

.banner {
    position: 				relative;
	margin: 				0 auto;
    width: 					100%;
	background: 			#000000;
	overflow:				hidden;
	height: 300px;
}


.banner img {
	max-width:				1920px;
	width:					100%;
	display:				block;
}



.banner .fading {
	position:						absolute;
	bottom:							0;
	left:							0;
	width:							100%;
	height:							250px;
	
	/* webkit example */
	background-image: -webkit-gradient(
	linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.8))
	);

	/* mozilla example - FF3.6+ */
	background-image: -moz-linear-gradient(
	  rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 95%
	);

}



.banner .content-top {
	position:						absolute;
	bottom: 						60px;
	left:							2%;
	display:						block; 
}


.banner .content-bottom {
	position:						absolute;
	bottom: 						30px;
	left:							2%;
	display:						block; 
}





.banner .style {
	font-family: 					'Michroma', sans-serif;
	font-weight: 					normal;
	font-size: 						34px;
	color:							#FFFFFF;
	/*z-index: 9999999;*/
}	

.banner .style-1 {
	font-weight: 					normal;
	font-size: 						24px;
	color:							#ccc;
}	

.banner .style-2 {
	font-weight: 					normal;
	font-size: 						20px;
	color:							#000;
}	





.banner .content-mid { 
    position:						absolute;
    bottom: 						100px;
	left:							655px;
	width: 							12px;
	height: 						50px;
	background: 					#ff0000;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
}

.banner .content-mid-over { 
    position:						absolute;
    bottom: 						80px;
	right:							120px;
	width: 							350px;
	height: 						50px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	padding: 						8px 30px;
	border-left: 					12px solid #ccc;
	border-bottom: 					2px solid #ccc;
	background: 					rgba(0, 0, 0, 0.7);
}

.banner .content-mid-under { 
    position:						absolute;
    bottom: 						180px;
	right:							70px;
	width: 							300px;
	height: 						50px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
			background:				rgba(0, 0, 0, 0.7);
	border-left: 					12px solid #ccc;
	border-bottom: 					2px solid #ccc;
	padding: 						8px 30px;
}



.banner .content-middle { 
    position:						absolute;
    bottom: 						130px;
	right:							150px;
	width: 							370px;
	height: 						50px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
			background:				rgba(0, 0, 0, 0.7);
	border-left: 					12px solid #ccc;
	border-bottom: 					2px solid #ccc;
	padding: 						8px 30px;
}

.banner .content-middle-over { 
    position:						absolute;
    bottom: 						70px;
	right:							50px;
	width: 							620px;
	height: 						70px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	padding: 						7px 30px;
	border-left: 					12px solid #ff0000;
	border-bottom: 					2px solid #ff0000;
	background: 					rgba(0, 0, 0, 0.9) url('images/arrow.png') no-repeat 520px 10px;
	background-size: 				55px;
}

.banner .content-middle-under { 
    position:						absolute;
    bottom: 						140px;
	right:							30px;
	width: 							430px;
	height: 						40px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	background:						#ccc;
	padding: 						5px 30px;
}




.banner .content-post { 
    position:						absolute;
    bottom: 						105px;
	right:							26px;
	width: 							12px;
	height: 						75px;
	background: 					#ccc;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
}

.banner .content-post-over { 
    position:						absolute;
    bottom: 						70px;
	right:							50px;
	width: 							620px;
	height: 						70px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	padding: 						7px 30px;
	border-left: 					12px solid #ff0000;
	border-bottom: 					2px solid #ff0000;
	background: 					rgba(0, 0, 0, 0.9) url('images/arrow.png') no-repeat 400px 10px;
	background-size: 				55px;
}

.banner .content-post-under { 
    position:						absolute;
    bottom: 						140px;
	right:							30px;
	width: 							430px;
	height: 						40px;
	-ms-transform: 					skew(-20deg); /* IE 9 */
	-webkit-transform: 				skew(-20deg);
	   -moz-transform: 				skew(-20deg);
	     -o-transform: 				skew(-20deg);
			transform: 				skew(-20deg);
	background:						#ccc;
	padding: 						5px 30px;
}
	






.banner .button {
	position: absolute;
	bottom: 						60px;
	left:							40%;
	
	border: 1px solid #fff;
	/*background:       			rgba(0,0,0,.7);*/
	font-family:      			Arial, sans-serif;
	 font-size:        			14px;
	color:#fff; 
	text-transform: uppercase;
	padding: 10px 25px;
	text-decoration: none;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
 }
 
 .banner .button:hover{
	background-color: #2181FF;
	/*border: 1px solid #2181FF;*/
	color:            			#FFFFFF;
 }





/* responsive */		

@media only screen and (max-width: 1135px) {
	
	.banner {
	    width: 						1135px;
	}	
	
	.banner .content-top {
		bottom: 						40px;
	}


	.banner .content-bottom {
		bottom: 						18px;
	}
	
	.banner .style {
		font-size: 						26px;
		
	}	

	.banner .style-1 {
		font-size: 						18px;
	}
	
	.banner .fading {
		height:							150px;
	}
	
}



@media only screen and (min-width: 1136px) and (max-width: 1280px) {
	
	.banner .content-top {
		bottom: 						45px;
	}


	.banner .content-bottom {
		bottom: 						20px;
	}
	
	.banner .style {
		font-size: 						28px;
		
	}	

	.banner .style-1 {
		font-size: 						20px;
	}
	
	.banner .fading {
		height:							200px;
	}
	
}	



@media only screen and (min-width: 1921px) {
	
	.banner {
	    width: 						1920px;
	}
	
}

@media only screen and (min-width: 1441px) {
	/*
	.banner .content-top {
		width:							1440;
		left:							52%;
		margin-left:					-720px;
	}


	.banner .content-bottom {
		width:							1440;
		left:							52%;
		margin-left:					-720px;
	}
	*/
	
}