*{
	margin: 0;
	padding: 0;
}

#slide-wrapper{              
	width: 940px;
	margin: 0 auto;
	-webkit-user-select: none;	  			
}

#banner{
	position: absolute;
}

.oneByOne1{
	width: 940px;
	height: 420px;   
	background: #EFEFEF url(../img/paven.png) repeat;    
	position: relative;
	overflow: hidden;  	
}   

#banner .oneByOne_item{
	position: absolute;
	width: 940px;
	height: 420px;  
	overflow: hidden;  
	display: none;
}         

#exampleline{
	position: relative;
	margin: 5% 0 0 0;
}


/* change the width of the slider in your own responsive media query */
@media only screen and (min-width: 960px) {
	.oneByOne1, #banner .oneByOne_item, #slide-wrapper, #exampleline img{
		width: 940px;
	}
}

@media screen and (min-width: 768px) and (max-width: 959px) {
	.oneByOne1, #banner .oneByOne_item, #slide-wrapper, #exampleline img{ width: 748px; }
	/* the oneByOne plugin writes an inline height:341px on these (config.js), which pins the
	   box tall while the width shrinks -> huge empty area. Override it to the true 940x340
	   image ratio. !important is required to beat the plugin's inline style. */
	.oneByOne1, #banner .oneByOne_item{ height: 271px !important; }
}

/* Phones: make the banner fill its container (so its edges line up with the content below)
   instead of a fixed narrow box centered with big side gaps, and scale its height to the
   940x340 image ratio. Height is based on the container width (100vw minus #main's 20px of side
   padding) so it matches the image exactly on a phone. #banner needs an explicit width so the
   absolutely-positioned .oneByOne_item can resolve width:100% (it computes to 0 otherwise). */
@media (max-width: 767px) {
	#slide-wrapper { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
	#banner { width: 100% !important; }
	.oneByOne1, #banner .oneByOne_item { width: 100% !important; height: calc((100vw - 20px) * 0.362) !important; }
}

/* On mobile the oneByOne slider's fade-in leaves each photo's <a> at display:none and applies
   a leftover transform, so the banner renders blank. Force the active slide's image to show as a
   plain responsive image (the active .oneByOne_item still governs which slide is visible). The
   image's auto height matches the proportional container heights set per-breakpoint above. */
@media (max-width: 959px) {
	#banner .oneByOne_item a { display: block !important; }
	#banner .oneByOne_item img.bigImage {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		top: auto !important;
		left: auto !important;
		-webkit-transform: none !important;
		transform: none !important;
	}
	/* The plugin also leaves the caption "banners" (title + price/location) hidden via its
	   fade-in on mobile. Show them overlaid at the bottom-left of the photo, like desktop but
	   scaled down. nowrap+ellipsis keeps a long title from overflowing the short banner. */
	#banner .oneByOne_item span.slide5Txt1,
	#banner .oneByOne_item span.slide5Txt2 {
		display: block !important;
		position: absolute !important;
		float: none !important;
		clear: none !important;
		margin: 0 !important;
		left: 0 !important;
		right: auto !important;
		max-width: 92% !important;
		z-index: 5;
		line-height: 1.25 !important;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-transform: none !important;
		transform: none !important;
	}
	#banner .oneByOne_item span.slide5Txt1 { bottom: 39px !important; font-size: 15px !important; }
	#banner .oneByOne_item span.slide5Txt2 { bottom: 5px !important; font-size: 11px !important; }
}
                      
#banner .oneByOne_item span{
	font-family: helvetica, verdana, arial, sans-serif;
}                                                                                              

#banner .oneByOne_item a{
	text-decoration: none;
	color: #B22222;
}
              


#banner .oneByOne_item span.slide2Txt1{ 
  	position: relative;
	float: left;
	margin: 3% 2% 0 5%;
	color: #9ACD32;	
	font-size: 24px;  
	background: #FFFFFF;
	padding: 8px;             
}
 
#banner .oneByOne_item span.slide2Txt2{ 
  	position: relative;
	clear: left;
	float: left;
	margin: 6px 2% 0 5%;
	color: #666666;	
	font-size: 14px;  
	background: #FFFFFF;
	padding: 8px;             
}   

#banner .oneByOne_item span.slide2Txt3{ 
  	position: relative;
	clear: left;
	float: left;
	margin: 6px 2% 0 5%;
	color: #666666;	
	font-size: 12px;  
	background: #FFFFFF;
	padding: 8px;             
}     
                    
  

#banner .oneByOne_item img.bigImage{ 
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
}

#banner .oneByOne_item span.slide5Txt1{ 
  	position: relative;
	float: left;
	margin: 25% 0 0 0;
	color: #8FC400;	
	font-size: 24px;  
	background: #FFFFFF;
	padding: 8px;             
}
 
#banner .oneByOne_item span.slide5Txt2{ 
  	position: relative;
	clear: left;
	float: left;
	margin: 2px 0 0 0;
	color: #666666;	
	font-size: 12px;  
	background: #FFFFFF;
	padding: 8px;             
}