/* CSS Document */

/* mobile res */


@media only screen 
and (min-width : 320px)
and (max-width : 849px) {

.topContentMiddle {	visibility:hidden;	display: none; } 
.topContentMiddleResp {display:block; visibility:visible;float: right; margin-right: 25px;position: absolute; right: 0; }

#menuContainer { position: relative; float: left; }
.topContentLeft, .topContentRight {display:none;}

.topContentRightResp { display:block ; font-size: 18pt; color: #393939; text-align: center; text-decoration: none; width: 100%; float: left; margin-top: 10px; }
.topContentRightResp div { width: 90%; border-top: 1px solid #97bf0d; margin: 0 auto; padding-top: 20px;}

h1 {font-size: 37pt; margin-top: 0em;}

#footerBlock { height: 35vh; }
#footerBlock .wideContainer { padding: 1em 10%; }

.infoBox { width: 70%; left: 40%; }
.infoBox h3 { font-size: 20pt; }
.infoBox p { font-size: 12pt; }

}



@media only screen and (min-width : 320px) and (max-width : 599px) {
#partnersBlock .innerContainer div a { width: 100%; text-align: center; }	
}


@media only screen and (min-width : 320px) and (max-width : 849px) { #topContainer { zoom: 0.7; height:auto; padding-bottom: 20px;} #menuContainer ul {zoom: 1.4285715 } #menuContainer ul li a {font-size: 15pt}}
@media only screen and (min-width : 620px) and (max-width : 849px) and (orientation: landscape) {  .firstContent { padding-top: 107px;} }
@media only screen and (min-width : 320px) and (max-width : 849px) and (orientation: portrait) { #responsive-menu { margin-top: calc(154px * 0.7);}}

@media only screen and (min-width : 850px) and (max-width : 949px) { #topContainer { zoom: 0.7; height:auto; } #menuContainer ul {zoom: 1.4285715 } #menuContainer ul li a {font-size: 16pt} .firstContent { padding-top: 93px;} #responsive-menu { margin-top: calc(134px * 0.7);}}
@media only screen and (min-width : 950px) and (max-width : 1099px) { #topContainer { zoom: 0.8; height:auto; } #menuContainer ul {zoom: 1.25} #menuContainer ul li a {font-size: 18pt} .firstContent { padding-top: 106px;} #responsive-menu { margin-top: calc(134px * 0.8);}} 
@media only screen and (min-width : 1100px) and (max-width : 1199px) { #topContainer { zoom: 0.9; height:auto} #menuContainer ul {zoom: 1.111111} .firstContent { padding-top: 120px;} #responsive-menu { margin-top: calc(134px * 0.9);}}



@media only screen and (min-width : 500px) and (max-width : 859px) { .topImagesContainer a span {font-size: 14pt} }
@media only screen and (min-width : 860px) and (max-width : 999px) { .topImagesContainer a span {font-size: 14pt} }
@media only screen and (min-width : 1000px) and (max-width : 1299px) { .topImagesContainer a span {font-size: 17pt} }
@media only screen and (min-width : 1300px) and (max-width : 1650px) { .topImagesContainer a span {font-size: 20pt} }


@media only screen and (min-width : 320px) and (max-width : 499px) { .gdg-1 { width: 100%; margin: 1em 0 1em 0; } }
@media only screen and (min-width : 500px) and (max-width : 899px) { .gdg-1 { width: 50%;} }
@media only screen and (min-width : 900px) and (max-width : 1099px) { .gdg-1 { width: 33.3%;} }



/*@media only screen 
and (min-width : 320px)
and (max-width : 1100px)
and (orientation: portrait) {
.topImagesContainer { flex-flow: row wrap; }
}
*/

@media only screen 
and (min-width : 320px)
and (max-width : 849px)
and (orientation: portrait) {
.logoBottomExtend { bottom: -235px; z-index: 100; }	
}


@media only screen 
and (min-width : 320px)
and (max-width : 1100px)
and (orientation: portrait) {
.topImagesContainer { flex-flow: row wrap; }

.topImagesContainer a { width: 100%; height: 25vh; border:0; border-bottom: 1px solid #fff;}

.topImagesContainer a span { bottom: 2vh; padding: 3%; font-size: 18pt; }

.topImages1 { background-image: url(images/topImage1resp.jpg);}
.topImages2 { background-image: url(images/topImage2resp.jpg);}
.topImages3 { background-image: url(images/topImage3resp.jpg);}
.topImages4 { background-image: url(images/topImage4resp.jpg);}




/*#topContent { position: relative; }*/
#topContainer { position: relative; }
.firstContent {  padding-top: 0px; }
.topContentRightResp { padding-bottom: 20px;}


.travelContainer { padding-left: 0px; padding-top: 90px; background-position: top center;}
.travelContainer h5 { text-align: center;}

#responsive-menu { margin-top: calc(213px * 0.7);}

}


@media only screen and (min-width : 500px) and (max-width : 849px) and (orientation: portrait) { #responsive-menu { margin-top: calc(213px * 0.7);}}

@media only screen  and (min-width : 320px) and (max-width : 999px) { .column { width: 100%; } }
@media only screen  and (min-width : 320px) and (max-width : 399px) { #contactsBlock .column p { font-size: 12pt; } #contactsBlock .column p span { font-size: 10pt; } }
	
@media only screen 
and (min-width : 320px)
and (max-width : 699px)
and (orientation: landscape) {


.logoBottomExtend { bottom: -275px; z-index: 100; }
#topContent { position: relative; }
/*#topContainer { position: relative; }*/
/*.firstContent {  padding-top: 0px; }*/
.topContentRightResp { padding-bottom: 20px;}

.topImagesContainer a {  height: 100vh; }

#mapBlock iframe { height: 90vh;}

}



@media only screen and (min-width : 620px) and (max-width : 849px) and (orientation: landscape) {

.topContentMiddleResp {
    visibility: visible;
    position: absolute;
    margin-right: 25px;
    right: 0;
}

.topContentRightResp {
    font-size: 18pt;
    text-align: left;
    width: 50%;
}

.topContentRightResp div {
    width: 100%;
    border: 0;
    padding: 0;
    height: 115px;
    line-height: 115px;
}

.logoBottomExtend {
    bottom: -206px;
}



}




@media only screen 
and (min-width : 700px)
and (max-width : 849px)
and (orientation: landscape) {
.logoBottomExtend {
    bottom: -40px;
}
}





@media only screen and (min-width : 320px) and (max-width : 619px) and (orientation: landscape) { #responsive-menu { margin-top: calc(233px * 0.7);} }
@media only screen and (min-width : 620px) and (max-width : 699px) and (orientation: landscape) { #responsive-menu { margin-top: calc(165px * 0.7);} }
@media only screen and (min-width : 700px) and (max-width : 849px) and (orientation: landscape) { #responsive-menu { margin-top: calc(154px * 0.7);} }
@media only screen and (min-width : 850px) and (max-width : 949px) and (orientation: portrait) { #responsive-menu { margin-top: calc(134px * 0.7);} }
@media only screen and (min-width : 950px) and (max-width : 1099px) and (orientation: portrait) { #responsive-menu { margin-top: calc(134px * 0.8);} }



@media only screen and (min-width : 320px) and (max-width : 599px) and (orientation: portrait) { .topSlimImage {height: 25vh; background-position-x: left; background-size: cover;} }
@media only screen and (min-width : 320px) and (max-width : 599px) and (orientation: landscape) { .topSlimImage {height: 50vh; background-position-x: left; background-size: cover;} }
@media only screen and (min-width : 600px) and (max-width : 899px) and (orientation: landscape) { .topSlimImage {height: 35vh; background-position-x: left; background-size: cover;} }

@media only screen and (min-width : 320px) and (max-width : 619px) and (orientation: landscape) { .firstContent { padding-top: 160px;} }

@media only screen and (min-width : 320px) and (max-width : 649px) { 
.tableFormShort td, .tableFormShort th, .captchaFormShort td, .captchaFormShort th 
.tableForm td, .captchaForm td, .tableForm th, .captchaForm th { width: 100%; float: left; text-align: center;}
.captchaFormShort th { padding-top: 15px; padding-bottom: 5px;}
.restaurantLinks a { width: 100%; margin-bottom: 2em;}
}

@media only screen and (min-width : 1100px) and (max-width : 10000px) { 
.tableFormShort, .captchaFormShort, .submitFormShort {
padding: 0 20%; box-sizing:border-box;	
}
}

@media only screen and (min-width : 320px) and (max-width : 1199px) { 
.priceTables table  { width: 100%; margin-bottom: 2em;}
.priceTables table td, .priceTables table th { padding: 0.5em 1%; }
.priceTables table td { text-align:center; }
.weekMenuTable { width: 100%; }
}


/*
@media only screen 
and (min-width : 320px) 
and (max-width : 767px) 
and (orientation: landscape) {

}

*/