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

.newsbox {
	position:					relative;
	margin: 					0 auto;
	width:						100%;
	background:					#FFFFFF;
}

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

.news .container {
	width:						100%;
	display: 					inline-block;
}

.news .column {
	float: 						left;
	width:						28%;
	margin-left: 				4%;

	 border:                    Solid 1px #fff;
    -moz-box-shadow:           2px  5px 25px #888;
    -webkit-box-shadow:        2px  5px 25px #888;
    filter:                    progid:DXImageTransform.Microsoft.Shadow(color='#888', Direction=135, Strength=10);
    box-shadow:                2px 5px 25px #888;
}

.news .column44 {
	float: 						left;
	width:						44%;
	margin-left: 				4%;
	margin-top: 					20px;
	margin-bottom: 					20px;
	
	 border:                    Solid 1px #fff;
    -moz-box-shadow:           2px  5px 25px #888;
    -webkit-box-shadow:        2px  5px 25px #888;
    filter:                    progid:DXImageTransform.Microsoft.Shadow(color='#888', Direction=135, Strength=10);
    box-shadow:                2px 5px 25px #888;
}

.news .column33 {
	float: 						left;
	width:						30%;
	margin-left: 				3%;
	margin-top: 					20px;
	margin-bottom: 					20px;
	
	 border:                    Solid 1px #fff;
    -moz-box-shadow:           2px  5px 25px #888;
    -webkit-box-shadow:        2px  5px 25px #888;
    filter:                    progid:DXImageTransform.Microsoft.Shadow(color='#888', Direction=135, Strength=10);
    box-shadow:                2px 5px 25px #888;
}

.news .caption {
	margin: 					0 auto;
	width:						100%;
	position:					relative;
	height: 					50px;
	background:  				#FFFFFF url('images/race-flag50.png') no-repeat left top;	
	cursor:						pointer;
}	

.news .content {
	position:					absolute;
	right: 						0;
	top:						0;
	width: 						57%;
	height:						100%;
}

.news .content img {
	margin: 					15px 10px;
	float: 						right;
	max-width: 					100%;
}

.news .subnews {
	position:					relative;
	margin: 					0;
	padding-bottom:				10px;
	width:						100%;
	font-family:         		'Verdana'; 
	background:					#FFFFFF;
	min-height:					220px;
}

.news .subnews p {
    padding: 					15px;
    font-size:		            14px; 
	font-weight:    		    normal;
	color: 						#111111; 
	background:					#FFFFFF;
}

.news .subnews h1 {
	margin: 					0;
	width:						100%;
	font-family: 				'Michroma', sans-serif;
	font-size:   		        18px; 
	color:              		#333333; 
	background:					#FFFFFF;
	text-align:				    left;
	padding: 					10px 5px 0 15px;
	font-weight:       		    bold; 
}

.news img {
	max-width: 					100%;
	display: 					block;
}

.news .button {
	position: 					absolute;
	bottom: 					25px;
	left: 						15px;
}

.news .price {
	position: 					absolute;
	bottom: 					20px;
	right: 						20px;
	 font-size:		            14px; 
	font-weight:    		    bold;
	color: 						#111111; 
}





/* responsive */

@media only screen and (max-width: 319px) {
 		
	
	
	.news .column44 {
		float: 						left;
		width:						90%;
		margin: 					20px 5%;
	}
	
	
	
	.news .subnews p {
		
		font-size:		            12px; 
	
	}
	
	.news .subnews {
		
		min-height:					230px;
	}
		
}


@media only screen and (min-width: 320px) and (max-width: 533px) {
 		
	
	
	.news .column44 {
		float: 						left;
		width:						90%;
		margin: 					20px 5%;
	}
	
	
	
	.news .subnews p {
		
		font-size:		            16px; 
	
	}
	
	.news .subnews {
		
		min-height:					255px;
	}
		
}



@media only screen and (min-width: 534px) and (max-width: 720px) {
 	
	.news {
		width:						530px;
	}	
		
	.news .column44 {
		float: 						left;
		width:						480px;
		margin: 					20px 25px;
	}
	
	
	
	.news .subnews p {
		
		font-size:		            16px; 
	
	}
		
}






@media only screen and (min-width: 721px) and (max-width: 989px) {
	
	
	
	.news .column44 {
		float: 						left;
		width:						44%;
	}
	
	
		
	.news .subnews p {
		
		font-size:		            14px; 
	
	}
	
}	



@media only screen and (min-width: 990px) and (max-width: 1640px){
	
	.news {
		width:						100%;
	}
	
	
	.news .column44 {
		float: 						left;
		width:						28%;
		margin-left: 				4%;
	}
		
	.news .subnews p {
		
		font-size:		            14px; 
	
	}
	
	.news .subnews {
		
		min-height:					265px;
	}
	
}
	


@media only screen and (min-width: 1641px) {
	
	.news {
		width:						1640px;
	}
	
	
	.news .column44 {
		float: 						left;
		width:						480px;
		margin-left: 				50px;
	}
		
	.news .subnews p {
		
		font-size:		            14px; 
	
	}
	
}