/* ====================================================================================================================
   viewport-banner - default rules
   ==================================================================================================================== */

#viewport-banner{
	position: relative;
	overflow: hidden;
	
	border: 9px solid #ffffff;
	border-top-width: 0;
	border-bottom-width: 0;
}

@media screen and (max-width:767px){

	#viewport-banner{
		background-repeat: no-repeat;
		background-size: cover;
		
		border-bottom-width: 9px;
	}		
}

@media screen and (min-width:768px){

	#viewport-banner{
		background-image: none !important;	
	}		
}

/*---------------------*/

#vb-bkg{
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

@media screen and (max-width:767px){

	#vb-bkg{
		display: none;	
	}		
}

/*---------------------*/

#vb-cover{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	
	background: black;
	background-color: rgba(0,0,0,0.5);
}	

.ie7 #vb-cover,
.ie8 #vb-cover{
	background: transparent url("../_img/top-cycler-cover-bkg.png");
}	

/*---------------------*/

#vb-content{
	position: absolute;
	z-index: 10;
	left: 0;
	width: 100%;	
}

@media screen and (max-width:767px){

	#vb-content{
		position: relative;	
	}		
}