/* Page Styling */

.vitem {
	text-align:center;
	float:left;
	margin:5px 20px 5px 20px;
	position:relative;
	padding-bottom:40px;
	box-sizing: content-box!important;
	vertical-align:top;
}

.vitem,
.vitem-hover,
.vitem-hover .mask,
.vitem-img,
.vitem-info {
	width: 400px;
	height: 200px;	
}

.vitem-hover,
.vitem-hover .mask,
.vitem-img { 
	position:absolute;
	top:0;
	left:0;			
}		

.vitem-type-line .vitem-hover {	
	z-index:100;	
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	transition: all 300ms ease-out;	
	opacity:0;
	cursor:pointer;						
	display:block;
	text-decoration:none;
	text-align:center;
}

.vitem-type-line .vitem-info {
	z-index:10;
	color:#ffffff;
	display:table-cell;
	vertical-align:middle;
	position:relative;
	z-index:5;				 					
}

.vitem-type-line .vitem-info .headline {
	font-size:20px;	
}

.vitem-type-line .vitem-info .headline h1 {
	font-size:18px!important;
	color:#fff;
	letter-spacing:0.5px;
	padding:3px 10px			
}

.vitem-type-line .vitem-info .line {
	 height:1px;
	 width:0%;
	 margin:15px auto;
	 background-color:#ffffff;
	-webkit-transition: all 500ms ease-out;
	-moz-transition: all 500ms ease-out;
	-o-transition: all 500ms ease-out;
	transition: all 500ms ease-out;					 

}

.vitem-type-line .vitem-info .date {
	font-size:12px;
}

.vitem-type-line .vitem-hover .mask {
/*	background-color:#000;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);										
	opacity:0.5;
	z-index:0;*/
}

.vitem-type-line .vitem-hover:hover .line {
	width:40%;
}

.vitem-type-line .vitem-hover:hover {
	opacity:1;
}				

.vitem-img {
	background-color:#CCCCCC;
	z-index:0;
}
	
	
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	
	.vitem {
		margin:5px 10px 5px 10px;
		padding-bottom:0px;
	}
	
	.vitem,
	.vitem-hover,
	.vitem-hover .mask,
	.vitem-img,
	.vitem-info {
		width: 300px;
		height: 250px;	
	}
	
}

@media (min-width: 1024px) and (max-width:1366px) {

	.vitem {
		margin:5px 15px 5px 15px;
		padding-bottom:0px;
	}
	
	.vitem,
	.vitem-hover,
	.vitem-hover .mask,
	.vitem-img,
	.vitem-info {
		width: 290px;
		height: 200px;	
	}
	
}

 

@media only screen and (device-width: 1366px) and (orientation: landscape) {

	.vitem {
		margin:5px 20px 5px 20px;
		padding-bottom:0px;
	}
	
	.vitem,
	.vitem-hover,
	.vitem-hover .mask,
	.vitem-img,
	.vitem-info {
		width: 350px;
		height: 250px;	
	}
	
}

@media only screen and (device-width: 768px) and (orientation: portrait) {
	
	.vitem {
		margin:5px 10px 5px 10px;
		padding-bottom:0px;
	}
	
	.vitem,
	.vitem-hover,
	.vitem-hover .mask,
	.vitem-img,
	.vitem-info {
		width: 220px;
		height: 150px;	
	}
	
}

@media only screen and (device-width: 820px) and (orientation: portrait) {
	
	.vitem {
		margin:5px 10px 5px 10px;
		padding-bottom:0px;
	}
	
	.vitem,
	.vitem-hover,
	.vitem-hover .mask,
	.vitem-img,
	.vitem-info {
		width: 230px;
		height: 180px;	
	}
	
}