/*
      <div class="sldbox">       
         <div class="slider owl-carousel" >
           <div class="item " style="background-image:url(img88/s5a.jpg)"> </div>
		   <div class="item " style="background-image:url(img88/s5a.jpg)"> </div>
		   <div class="item " style="background-image:url(img88/s5a.jpg)"> </div>
		 </div>  
		 
		 <img src="img88/al.png" class="al">
         <img src="img88/ar.png" class="ar">
       </div> 
*/

/*prevent  vertical scroll while slide */
/* no use in ios
.owl-carousel 
{
-ms-touch-action: pan-x;
touch-action: pan-x; 
}

.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
        touch-action: auto;
}
*/
.owl-carousel
{
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}


/*owl slider, fit parent size*/
.sldbox {
position:absolute;
width:100%;
height:100%;
display:block;
left:0px;
top:0px;		
}
.slider {
width:100%;
height:100%;
}
.slider .item{
height:100%;
background-size:cover;
position:relative;
}
.slider .owl-stage-outer,.slider .owl-stage,.slider .owl-item {
	height:100%;
}

/*pager dots*/
.sldbox .owl-dots {
bottom:7%;
position:absolute;
width:100%;
text-align:center;
z-index:5;
height:10px;
}
.sldbox .owl-carousel  .owl-dot {
 width:15px;
 height:15px;
 border-radius:20px;
 display:inline-block;
 background-color:#4d4d4d;
 margin:15px;
}
.sldbox .owl-dot[class~=active] {
 background-color:#d70101;
}


/*l r pager*/
.sldbox .al,.sldbox .ar{
position:absolute;
top:50%;		
z-index:2;
cursor:pointer;
width:10%;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
}

.sldbox .al{
left:0%;	
}
.sldbox .ar{
right:0%;	
}