/* CSS Document */
#HKcarousel{ width: 100%; overflow: hidden; position: relative; left: 0px; margin: 0 auto;	min-height: 244px; }
#HKcarousel ul{ position: absolute; top:0; left: 0; padding-top: 10px; min-height: 250px;}
#HKcarousel ul li{ display: inline-block; width: 200px; height: 200px; overflow: hidden; margin: 10px 5px; position: relative; background: #FFF; border-radius: 5px; z-index:1; clear: none !important; }
#HKcarousel ul li img{ width: 200px; height: 200px; border-radius: 5px; }	
#HKcarousel ul li h2{ position: absolute; bottom: 0; left:0; width: 180px; background: rgba(0,0,0,.7); text-align: center; padding: 10px;  
font-size: 0.9em; text-transform:uppercase; color: #÷FFF; text-shadow: 1px 1px 1px rgba(0,0,0,.5); font-weight: normal; opacity:0; }
#HKcarousel ul li:hover { -webkit-transform: scale(1.15); transform: scale(1.15); z-index:2; box-shadow: 0 0 10px rgba(0,0,0,.6); }
#HKcarousel ul li:hover h2{ opacity: 1; } 
#HKcarousel ul li a{ color: #FFF; text-decoration: none; }
#HKcarousel .pn{ display: block; z-index: 10; position: absolute; bottom: 100px; width: 60px; border-radius: 30px; box-shadow: 0 0 10px rgba(0,0,0,.5), inset 0 0 10px rgba(0,0,0,.4); text-align: center; font-size: 5em; padding-top: 25px; height: 35px; line-height: 0; text-shadow: 1px 1px 2px rgba(0,0,0,.8); 
font-family: sans-serif; }
.ar #HKcarousel .pn{ font-size: 3em; }
#HKcarousel:hover .pn:hover{ -webkit-transform: scale(1.2); transform: scale(1.2); background: #C00;}
#HKcarousel:hover .pn.p{ left: 30px;}	
#HKcarousel:hover .pn.n{ right: 30px;}		
#HKcarousel .pn.p{ left: -100px;}	
#HKcarousel .pn.n{ right: -100px;}		
/* CAS PARTICULIER ARABE */
.ar #HKcarousel ul, .ar #HKcarousel .pn { direction:ltr; }
#HKcarousel:after{content:''; display:block; width: 100%; height: 1px; clear:both;}

#HKcarousel ul.bi li{ background: none;}
#HKcarousel ul.bi li:hover{ box-shadow: none; }