/* =============================================================================
   HTML5 Boilerplate CSS: h5bp.com/css
   ========================================================================== */




/* =============================================================================
   Free Styles
   ========================================================================== */


/*new anims*/
@-webkit-keyframes rotating {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes rotatingReverse {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(-360deg); }
}


@-moz-keyframes rotating {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); }
}

@-ms-keyframes rotating {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); }
}

@-o-keyframes rotating {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); }
}

@keyframes rotating {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}  


@-moz-keyframes rotatingReverse {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(-360deg); }
}

@-ms-keyframes rotatingReverse {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(-360deg); }
}

@-o-keyframes rotatingReverse {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(-360deg); }
}

@keyframes rotatingReverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}  
/*end*/ 
 







.rotateRing:hover, .rotateRingReverse:hover, .pauseani, .btnRotate2:hover, .btnRotate1:hover{
	    animation-play-state:paused;
		-moz-animation-play-state:paused; /*Firefox*/
		-webkit-animation-play-state:paused; /* Safari and Chrome */
		-o-animation-play-state:paused; /* Opera */
}

.rotateRing{
		z-index:2;
		animation: rotating 35s linear infinite;
		-moz-animation: rotating 35s linear infinite;
		-ms-animation:    rotating 35s linear infinite;
		-webkit-animation: rotating 35s linear infinite;
		-o-animation: rotating 35s linear infinite;
}

.rotateRingReverse{
		z-index:2;
		animation: rotatingReverse 35s linear infinite;
		-moz-animation: rotatingReverse 35s linear infinite;
		-webkit-animation: rotatingReverse 35s linear infinite;
		-ms-animation:    rotatingReverse 35s linear infinite;
		-o-animation: rotatingReverse 35s linear infinite;
}

.btnRotate1{
	animation: rotating 65s linear infinite;
	-moz-animation: rotating 65s linear infinite;
	-webkit-animation: rotating 65s linear infinite;
	-ms-animation: rotating 65s linear infinite;
	-o-animation: rotating 65s linear infinite;

}
.btnRotate2{
	animation: rotatingReverse 45s linear infinite;
	-moz-animation: rotatingReverse 45s linear infinite;
	-webkit-animation: rotatingReverse 45s linear infinite;
	-ms-animation:    rotatingReverse 45s linear infinite;
	-o-animation: rotatingReverse 45s linear infinite;
}
/**/
.keepRotating{
	animation: rotating 65s linear infinite;
	-moz-animation: rotating 65s linear infinite;
	-ms-animation: rotating 65s linear infinite;
	-webkit-animation: rotating 65s linear infinite;
	-o-animation: rotating 65s linear infinite;

}
.keepRotatingReverse{
	animation: rotatingReverse 45s linear infinite;
	-moz-animation: rotatingReverse 45s linear infinite;
	-webkit-animation: rotatingReverse 45s linear infinite;
	-ms-animation:  rotatingReverse 45s linear infinite;
	-o-animation: rotatingReverse 45s linear infinite;
}

#book:hover, #bookBtn:hover, #commentBtn:hover{
	cursor:pointer;
}


#placeholder{
	width:90%;
}

.ipad .hotspot, .iphone .hotspot, .android .hotspot{
	visibility:visible!important;
	opacity:1!important;
}




.ring{
	height:100%;
	width: 100%;
	position:absolute;
	left:0;
	top:0;
	z-index: 10;
}

	



/*
	
/*SPLASH*/
	.splashHolder{
		opacity:0.9;
		top: 50%;
		left: 50%;
		position: absolute;
		width: 170px;
		height: 170px;
		background: transparent url(../img/language/bg.png) no-repeat 0 0;
		background-size:contain;
		z-index: 1000;
		margin-left: -48%;
		margin-top: -5%;
	}
	


	
	#logoSplash2{
		height: 85%;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -50%;
		margin-top: -58px;
	}
	
	
	
	
	#logoSplash{
		height: 126px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -45px;
		margin-top: -68px;
	}
	
	#splashring{
		width: 70px;
		height: 70px;
		position: absolute;
		left: 19px;
		top: 216px;
	}
	
	#splashring2{
		width: 166px;
		height: 166px;
		position: absolute;
		left: 10px;
		top: 290px;
	}
	
	#splashring3{
		width: 77px;
		height: 77px;
		position: absolute;
		right: 102px;
		top: 106px;
	}
	
	#splashring4{
		width: 91px;
		height: 91px;
		position: absolute;
		right: 8px;
		top: 125px;
	}

	#splashring5{
		width: 52px;
		height: 53px;
		position: absolute;
		right: 30px;
		top: 224px;
	}
	
	#splashText{
		position: relative;
		text-align: center;
		top: 27px;
	}
	
	#splashText a{
		font-size: 30px;
	}
	
	#splashText p{
		margin: 10px;
		font-size: 24px;
	}
	
	#gate{
		display:none;
		opacity:0;
	}

	
	
	
	
	#ring1{
		left: 6px;
		top: 426px;
		position: relative;
		height: 110px;
		width: 110px;
	}
	
	#ring2{
		left: 112px;
		top: 389px;
		position: relative;
		height: 68px;
		width: 68px;
	}
	
	#ring3{
		left: 169px;
		top: 379px;
		position: relative;
		height: 40px;
		width: 40px;
	}
	
	#ring4{
		left: 189px;
		top: 267px;
		position: relative;
		height: 80px;
		width: 80px;
	}
	
	#ring5{
		left: 237px;
		top: 131px;
		position: relative;
		height: 56px;
		width: 56px;
	}
	
	#ring6 {
	left: 232px;
	top: 50px;
	position: relative;
	height: 23px;
	width: 23px;
	}
	


/*I phone madafaka*/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
{	
	.bigRing{
		display:none;
	}
	.smallRing{
		display: none;
	}
	
	
	
	.logoH,.logo,#closeBtn,#mainmenu,#nav,#slidersHolder,#changeRoom{
		-webkit-transform: scale(0.35);  
	    -moz-transform:scale(0.35);  
	    -ms-transform: scale(0.35);  
	    -o-transform:scale(0.35);  
	    transform: scale(0.35);  
	    transform-origin:top left;
		-ms-transform-origin:top left; /* IE 9 */
		-webkit-transform-origin:top left; /* Safari and Chrome */
		-moz-transform-origin:top left; /* Firefox */
		-o-transform-origin:top left; /* Opera */
	}
	
	#changeRoom{
		
	}
	

	

	#rightSliders{
		display:none;
	}
	
	.splashHolder{
		-webkit-transform: scale(0.4);  
	    -moz-transform:scale(0.4);  
	    -ms-transform: scale(0.4);  
	    -o-transform:scale(0.4);  
	    transform: scale(0.4);  
	  }
}

.


/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
	.showroom{
		display:none;
		height:0;
		position:fixed;
		top:0;
	}
}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	#navigation{
		display:none;
	}
}


.fb_iframe_widget_lift{
	left: -46px;
	top: -25px;
	-webkit-transform: scale(0.8);
}

#meals #scrollerMenu {
	width: 100%;
}

#meals .dishph {
	width: 100%;
}

.meal {
	width: 95%;
}