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



.banner {
    position: 				relative;
	margin: 				0 auto;
    width: 					100%;
}


.banner img {
	max-width:				100%;
	min-height: 			300px;
	display:				block;
}

.banner .fading {
	position:						absolute;
	bottom:							0;
	left:							0;
	width:							100%;
	height:							150px;
	
	/* 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, 
.banner .content-top, 
.banner .content-top {
	position:						absolute;
	bottom: 						35%;
	left:							2%;
	display:						block; 
}

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

.banner .content-top-right {
	position:						absolute;
	bottom: 						23%;
	right:							2%;
	display:						block; 
}

.banner .content-bottom-right {
	position:						absolute;
	bottom: 						8%;
	right:							2%;
	display:						block; 
}

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

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




/* responsive */

@media only screen and (min-width: 1441px) {
	
	.banner img {
		
		min-height: 				450px;
		
	}
	
}



/*@media only screen and (min-width: 320px) and (max-width: 639px) {*/
@media only screen and (max-width: 639px) {	
	
	.banner .content-top, 
	.banner .content-top, 
	.banner .content-top {
		
		bottom: 						27%;
	
	}

	.banner .content-bottom, 
	.banner .content-bottom, 
	.banner .content-bottom {
		
		bottom: 						10%;
		
	}
 		
	.banner .style {
		
		font-size: 						22px;
	
	}	

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



/*

@media only screen and (min-width: 640px) and (max-width: 720px) {
	
	
	
}	






@media only screen and (min-width: 721px) and (max-width: 989px) {
	
	
	
}	

*/