/*
Theme Name: rotiroad
Theme URI: 
Description: rotiroad
Version: 1.0
Author: 
Author URI: 
Tags: fixed-layout, responsive-layout, valid XHTML, widgets
*/
@font-face {
  font-family: 'intro_regular';
  src: url('fonts/intro-webfont.eot');
  src: url('fonts/intro-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/intro-webfont.woff') format('woff'),
    url('fonts/intro-webfont.ttf') format('truetype'),
    url('fonts/intro-webfont.svg#intro_regular') format('svg');
  font-weight: normal;
  font-style: normal;

}
@font-face {
  font-family: 'intro_inline';
  src: url('fonts/intro_inline-webfont.eot');
  src: url('fonts/intro_inline-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/intro_inline-webfont.woff') format('woff'),
    url('fonts/intro_inline-webfont.ttf') format('truetype'),
    url('fonts/intro_inline-webfont.svg#intro_inlineregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'aleoregular';
  src: url('fonts/aleo-regular-webfont.eot');
  src: url('fonts/aleo-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/aleo-regular-webfont.woff') format('woff'),
    url('fonts/aleo-regular-webfont.ttf') format('truetype'),
    url('fonts/aleo-regular-webfont.svg#aleoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
html, body {
  height: 100%;
  font-size:18px;
  font-family:'intro_regular';
}
* {
  /*   -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; */
  margin:0;
  padding:0;
}
a{
  text-decoration:none;
  color:#000000;
}
a:hover{
  text-decoration:none;
  color:#FECE43;
}
.menu{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position:fixed;
  width:100%;
  height:110px;
  background:#ffffff;
  padding-right:2%;
  z-index:600;
  top:-110px;
  text-align:right;
  overflow:hidden;
}
.menumb{
  display:none;
}
.menushow{
  top:0;
}
.menulogo{
  width:150px;
  height:110px;
  background:url(img/logosb.png) center no-repeat;
  float:left;
  cursor:pointer;
}
.menulogo:hover{
  background:url(img/logosy.png) center no-repeat;
}
.menuitem{
  display:inline-block;
  height:110px;
  line-height:110px;
  cursor:pointer;
  padding: 0px 0.7em;
  font-size: 1.9em;
}
.mactive{
  color:#FFCD3E;
}
.down{
  background:url(img/down.png) center no-repeat;
  background-size:contain;
  width:60px;
  height:60px;
  margin:0 auto;
  display:block;
  cursor:pointer;
}
.down:hover{
  background:url(img/downy.png) center no-repeat;
  background-size:contain;
}
.sect1{
  width:100%;
  background:url(img/back1_s.png) fixed;

}
.logo1{
  position:relative;
  background:url(img/logotop.png) center top no-repeat;
  background-size:contain;
  width:680px;
  height:447px;
  margin:0 auto;
}
.slogan{
  position:relative;
  margin:0.8em auto;
  text-align:center;
  font-size:5em;
  font-weight:bold;
  line-height:1em;
}
.slogansub{
  position:relative;
  margin:4em auto 0;
  width:50%;
  font-size:2.4em;
  font-family: 'aleoregular';
}
.slogan1{
  margin:0;
}
.sun{
  position:absolute;
  background:url(img/sun_cuth.png) center top no-repeat;
  background-size:100% auto;
  width:100%;
  top:0;
}
.girl{
  position:absolute;
  background:url(img/girl.png) center top no-repeat;
  background-size:95% auto;
  width:100%;
}
.slogan2{
  position:relative;
  width:100%;
}
.pentwrap{
  position:relative;
  height:1600px;
  width:100%;
}
.pentagon{
  text-align:center;
  position:absolute;
  width:20em;
  left:58%;
  height:0;
  background:url(img/pentagon.png) no-repeat center top;
  font-size:1.1em;
  background-size:100% auto;
  padding-right:3em;
  padding-left:3em;
  overflow:hidden;
}
.pentshow{
  height:679px;
  padding-top:4em;
  padding-bottom:4em;
}
.slogan2 .title{
  font-size:2.2em;    
}
.slogan2 .cont{
  font-family:'aleoregular';
}
.rotiblur{
  position:absolute;
  background:url(img/rotiblur.png) center top repeat-y;
  background-size:100% auto;
  width:100%;
  top:3000px;
}
.rotisharp{
  position:absolute;
  background:url(img/rotisharp.png) center top repeat-y;
  background-size:100% auto;
  width:100%;
  top:3000px;
  z-index:0;
}
.slogan3{
  margin:0 auto 20%;
}
.shop{
  position:relative;
  font-size:1.7em;
}
.shop1,.shop2{
  position:relative;
  /*    width:570px; */
  width:38%;
  background:#ffffff;
  text-align:center;
  padding-bottom:2em;
}

.shop3{
  width:80%;
  background:#ffffff;
  text-align:center;
  padding-bottom:2em;
}

.shop1{
  float:left;
  margin-left:10%;
}
.shop2{
  float:right;
  margin-right:10%;
}

.shop3{
    float:left;
    margin-top:5%;
    margin-left:10%;
}

.social{
  position:relative;
  margin:5em auto;
}
.mapicon{
  display:inline-block;
  margin:1em 0;
  width:65px;
  height:65px;
  background:url("img/mapb.png") no-repeat center;
  cursor:pointer;
}
.mapicon:hover{
  background:url("img/mapy.png") no-repeat center;
}
.hours{
  display:inline-block;
  font-size:0.7em;
  font-family:'aleoregular';
  text-align:left;
  margin:1em 1em 0;
}
.hours td{
  padding:2px 10px;
}

.spacebig{
    line-height:1.7;
}

.dots{
  /*  font-weight:bold;font-size:1.5em;*/
}
.dot{
  width:8px;
  height:8px;
  background-color:#000000;
  border-radius:4px;
  display:inline-block;
  margin:5px 5px 6px;
}
.dot.sq{
  margin:1em 5px;
}
.hourname{
  font-family: 'intro_regular';
  text-align:center;
}
.shopimg{
  width:90%;margin:30px auto;    
}

.shopimg2{
  width:90%;margin:30px auto;    
}

#mbooknow1,#mbooknow2{
  display: block;
  padding: 0.6em;
  border: 5px solid #000000;
  margin: 1em 1.8em 0.4em;
}

#mbooknow3{
  display: block;
  padding: 0.6em;
  border: 5px solid #000000;
  margin: 1em 10em 0.4em;
}


#mbooknow1:hover,#mbooknow2:hover,#mbooknow3:hover{
  border: 5px solid #FECE43;
}
.slogan4{
  margin:20% auto 0em;
}
.sect2{
  width:100%;
  height:100%;
}
.cycle-slideshow{
  height:100%;
}
.slimg{
  position:relative;
  display:block;
  text-decoration:none;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
}
.iconrr,.iconfb,.iconig{
  display:inline-block;
  width:94px;
  height:94px;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin:0 30px;
  cursor:pointer;
}
#menu .iconfb,#menu .iconig{
  display:block;
  float:right;
  width:3.5em;
  height:3.5em;
  margin:1.3em 1em;
  background-size:54px auto;
}
.iconrr{
  background-image:url(img/logosb.png);
}
.iconrr:hover{
  background-image:url(img/logosy.png);
}
.iconfb{
  background-image:url(img/fb.png);
}
.iconfb:hover{
  background-image:url(img/fy.png);
}
.iconig{
  background-image:url(img/ig.png);
}
.iconig:hover{
  background-image:url(img/igy.png);
}
.photos{
  position:relative;
  width:66em;
  margin:0 auto;
}
.photo_side{
  float:left;
}
.photo{
  width:14em;
  height:14em;
  margin:0 2em 2em;
  background-size:cover;
  cursor:pointer;
}
.photo_c{
  float:left;
  width:30em;
  height:30em;
  background-size:cover;
  cursor:pointer;
}
.shadow{
  display:none;
  background-color:rgba(0,0,0,0.6);
  margin:0;
  color:#FECE43;
}
.heart,.comment{
  padding:0.3em 0 0.3em 3.6em;
  margin:0;
  background-image:url(img/icon_heart_y.png);
  background-repeat:no-repeat;
  background-size:1em;
  background-position:1.7em center;
  height:1.2em;
  line-height:1.2em;
}
.comment{
  background-image:url(img/icon_comment_y.png);
}
.menu1,.menu2{
  width:30%;
  max-width:23em;
  height:20em;
  z-index:500;
  position:absolute;
  bottom:50%;
  cursor:pointer;
}
.menu1{
  background:url(img/menufoff.png) no-repeat center;
  background-size:contain;
  left:30%;
  -o-transform: translate(-50%, 50%);
  -moz-transform: translate(-50%, 50%);
  -webkit-transform: translate(-50%, 50%);
  -ms-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}
.menu2{
  background:url(img/menuhoff.png) no-repeat center;
  background-size:contain;
  right:30%;
  -o-transform: translate(50%, 50%);
  -moz-transform: translate(50%, 50%);
  -webkit-transform: translate(50%, 50%);
  -ms-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}
.menu1:hover{
  background:url(img/menufon.png) no-repeat center;
  background-size:contain;
}
.menu2:hover{
  background:url(img/menuhon.png) no-repeat center;
  background-size:contain;
}
.cycle-pager {
  text-align: center;
  width: 100%;
  z-index: 500;
  position: absolute;
  bottom:0;
  overflow: hidden;
  height:100px;
}
.cycle-pager span {
  font-family: arial;
  font-size: 100px;
  width: 30px;
  height: 100px;
  line-height: 100px;
  display: inline-block;
  color:#ffffff;
  cursor: pointer;
  padding:8px;
}
.cycle-pager span.cycle-pager-active {
  color:#FECF43;
}
.sect3{
  position:relative;
  width:100%;
  background-image:url(img/back_promo.jpg);
  background-position:center -750px;
  background-size:cover;
  padding:22em 0;
}
.promoline{
  position:relative;
  width:70%;
  margin:2em auto;
  max-width:70em;
}
.promoline:after{
  content: "";
  display:block;
  clear: both;
}
.promol,.promor{
  position:relative;
  width:40%;
  max-width:30em;
  height:30em;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
.promol{
  float:left;
}
.promor{
  float:right;
}
.sect3{
  padding:10em 0px;
}
.sect5{
  width:100%;
  background:url(img/back3_s.jpg) fixed;
  padding-top:10px;
  text-align:center;
}
.sect5 .slogan{
  margin:2em auto 1.3em;
}
.banquets{
  text-align:center;
  width:80%;
  padding:6em 10%;
}
.banquet{
  width:23%;
  padding:0 5%;
  float:left;
  line-height:1.8em;
}
.extitle{
  position:relative;
  font-size:1.1em;
  line-height:1.2em;
}
.extitle span{
  font-size:1.6em;
  font-weight:bold;
  line-height:1.8em;
}
.excont{
  position:relative;
  font-size:1.1em;
  font-family:'aleoregular';
}
.banq{
  border:solid 1px black;
  width:4em;
  display:inline-block;
  margin:1em;
}
.enquire{
  position:relative;
  background:url(img/enquire.png);
  background-size:cover;
  width:100%;
  padding:16em 0 5em;
}
.enqcont{
  position:relative;
  width:50em;
  margin:0 auto;
  color:#ffffff;
}
.enqtext{
  position:relative;
  background:left center no-repeat #ffffff;
  background-size:contain;
  height:70px;
  width:100%;
  border-style:none;
  margin:1em 0;
  padding-left:5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size:1.1em;
  font-family:'aleoregular';
}
.enqselect{
  width:90%;
  padding-left:0px;
  position:absolute;
  left:10%;
  margin:0;
}
.enqarea{
  position:relative;
  background:url(img/enq_msg.png) left top no-repeat #ffffff;
  height:300px;
  width:100%;
  border-style:none;
  margin:1em 0;
  padding-left:5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size:1.1em;
  font-family:'aleoregular';
  padding-top:1em;
}
.subbtn{
  position:absolute;
  background:url(img/enq_btn.png) 10px center no-repeat #ffffff;
  height:70px;
  width:10em;
  border-style:none;
  margin:1em 0;
  padding-left:2.6em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size:1.1em;
  color:#000000;
  right:0;
  font-weight:bold;
  cursor:pointer;
}
.enqname{
  background-image:url(img/enq_name.png);
}
.enqmob{
  background-image:url(img/enq_mob.png);
}
.enqemail{
  background-image:url(img/enq_email.png);
}
.enqsubj{
  background-image:url(img/enq_subject.png);
  color:#757575;
  float:left;
}
.enqpax{
  background-image:url(img/enq_pax.png);
}
.hue{
  position:relative;
  font-size:0.9em;
  color:#ffffff;
  margin:12em auto 0;
}
.huelink{
  color:#ffffff;
}
.huelink:hover{
  color:#FECE43;
}
.screen-reader-response{
  display:none;
}
@media only screen and (max-width:1400px) {
  .menuitem{
    display:inline-block;
    height:110px;
    line-height:110px;
    cursor:pointer;
    padding: 0px 0.6em;
    font-size: 1.3em;
  }
  #menu .iconfb,#menu .iconig{
    display:block;
    float:right;
    width:3em;
    height:3.5em;
    margin:1.3em 0.6em;
    background-size:contain;
  }


}
@media only screen and (max-width:1200px) {
  html, body {
    font-size:16px;
  }
  .slogan{
    font-size:3em;
  }
  .logo1{
    width:50%;
  }
  .sun{
    position:absolute;
    background:url(img/sun_cuth.png) center top no-repeat;
    background-size:140% auto;
    width:100%;
    top:0;
  }

  .slogan2{
    /*
  width:30%;
  margin:75% 0 0 50%;
  padding:2em;
    */
  }
  .pentagon{
    text-align:center;
    position:relative;
    width:100%;
    max-width:20em;
    margin:0 auto;
    background:url(img/pentagon.png) no-repeat center top;
    font-size:1.1em;
    background-size:120% auto;
    padding-right:1em;
    padding-left:1em;
    overflow:hidden;
    left:0;
  }
  .pentwrap{
    height:800px;
  }
  .shop{
    font-weight:normal;
    font-size:1.2em;
  }
  .shop1,.shop2{
    width:43%;
  }
  
    .shop3{
    width:80%;
  }
  
  .shop1{
    margin-left:5%;
  }
  .shop2{
    margin-right:5%;
  }
.shop3{
    margin-left:5%;
  }
  .social{
    position:relative;
    margin:2em auto;
  }

  .dot{
    width:6px;
    height:6px;
    background-color:#000000;
    border-radius:3px;
    display:inline-block;
    margin:5px 1px 6px;
  }
  .slogan3 {
    margin: 20% auto;
  }
  .photos{
    position:relative;
    width:100%
  }
  .promoline{
    width:80%;
  }
  .promol,.promor{
    height:18em;
  }
  .rotiblur{
    top:1200px;
  }
  .rotisharp{
    top:1200px;
  }
  .excont{
    width:90%;
    max-width:24em;
  }
  .enquire{
    padding: 6em 0px 2em;
    background:url(img/enquire2.png);
    background-size:100% auto;
  }
  .enqtext{
    height:36px;
    margin:2px auto;
    padding-left:3em;
  }
  .enqcont{
    width:40em;
  }
  .enqcont span{
    font-size:1.1em;
  }
  .enqselect {
    padding-left: 15px;
    position: absolute;
    left: 2em;
    margin:0;
  }
  .enquire textarea{
    height:60px;
    width:100%;
    margin:2px 0;
    background:url(img/enq_msg.png) left top no-repeat #ffffff;
    background-size:36px auto;
    padding-left:3em;
  }
  .subbtn{
    background:url(img/enq_btn.png) 10px center no-repeat #ffffff;
    background-size:36px;
    height:36px;
    width:9em;
    line-height:36px;
  }
  .hue{
    position:relative;
    font-size:0.9em;
    color:#ffffff;
    margin:6em auto 0;
  }


}
@media only screen and (max-width:900px) {
  .menu{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position:fixed;
    width:100%;
    height:auto;
    /*    background:rgba(255,255,255,0.8);*/
    background:rgba(255,255,255,1);
    padding-top:5em;
    padding-bottom:2em;
    padding-right:0;
    padding-left:0;
    z-index:600;
    top:-30em;
    text-align:center;
    overflow:hidden;
  }
  #mtop{
    display:none;
  }
  .menumb{
    display:block;
    height:45px;
    width:100%;
    background:#ffffff;
    position:fixed;
    top:-45px;
    z-index:700;
  }
  .mbsw{
    float: right;
    font-size: 45px;
    line-height: 45px;
    padding-right: 10px;
    cursor:pointer;
    width:45px;
    height:45px;
  }
  #mbarx{
    display:none;
    font-size:30px;
    background:url(img/cross.png) no-repeat center;
  }
  #mbaro{
    background:url(img/tribar.png) no-repeat center;
  }
  .menulogo{
    width:60px;
    height:39px;
    margin:3px;
    float:left;
    cursor:pointer;
    background:url(img/logosb.png) center no-repeat;
    background-size:contain;
  }
  .menulogo:hover{
    background:url(img/logosy.png) center no-repeat;
    background-size:contain;
  }
  .menushow{
    top:0;
  }
  .menuitem{
    display:block;
    width:100%;
    padding:0;
    cursor:pointer;
    height: 1.6em;
    line-height: 1.6em;
    font-size: 1.7em;
  }
  .iconrr,.iconfb,.iconig{
    width:35px;
    height:35px;
    margin:0 12px;
  }
  #menu .iconfb,#menu .iconig{
    width:35px;
    height:35px;
    margin: 25px 12px 15px;
    background-size:contain;
    display:inline-block;
    float:none;
  }
  .photo_side{
    width:400px;
    height:190px;
    float:none;
    margin:0 auto;
  }
  .photo{
    width:190px;
    height:190px;
    margin:0 5px;
    background-size:cover;
    float:left;
  }
  .photo_c{
    float:none;
    width:390px;
    height:400px;
    background-size:cover;
    margin:10px auto;
  }
  .photo_side:after{
    content:"";
    clear:both;
    display: table;
  }
  .shadow{
    margin:0;
  }
}
@media only screen and (max-width:400px) {
  html, body {
    font-size:14px;
  }
  .slogan{
    font-size:2.4em;
    font-weight:normal;
  }
  .girl{
    background-size:120% auto;
  }
  .logo1{
    width:250px;
    height:250px;
    background:url(img/logotops.png) center top no-repeat;
    background-size:contain;
  }
  .pentagon{
    width:80%;
    font-size:0.8em;
    background:url(img/pentagon.png) no-repeat center top;
    background-size:120% auto;
  }
  .pentwrap{
    height:400px;
  }
  .down{
    width:30px;
    height:30px;
  }
  .slogan2{/*
    width:80%;
    margin:10% auto;
    padding:1em;
    */
  }
  .slogan2 .title{
    font-size:1.7em;    
  }
  .slogan2 .cont{
    font-family:'aleoregular';
  }
  .slogan3 {
    margin: 10% auto;
  }
  .shop{
    font-weight:normal;
    font-size:1.2em;
  }
  .shop1,.shop2,.shop3{
    float:none;
    margin-left:auto;
    margin-right:auto;
    width:90%;
    margin-bottom:2em;
  }
  
  #mbooknow3{
  display: block;
  padding: 0.6em;
  border: 5px solid #000000;
  margin: 1em 1.8em 0.4em;
}


  .dot{
    width:6px;
    height:6px;
    background-color:#000000;
    border-radius:3px;
    display:inline-block;
    margin:5px 1px 6px;
  }
  .mapicon{
    width:35px;
    height:35px;
    background:url("img/mapb.png") no-repeat center;
    background-size:contain;
  }
  .mapicon:hover{
    background:url("img/mapy.png") no-repeat center;
    background-size:contain;
  }
  .sect2{
    height:60%;
  }
  .menu1,.menu2{
    width:40%;
  }
  .menu1{
    left:25%;
  }
  .menu2{
    right:25%;
  }
  .photo_side{
    width:300px;
    height:140px;
  }
  .photo{
    width:140px;
    height:140px;
    margin:0 5px;
  }
  .photo_c{
    width:290px;
    height:300px;
  }
  .photo_side:after{
    content:"";
    clear:both;
    display: table;
  }
  .shadow{
    margin:0;
  }
  .promol,.promor{
    position:relative;
    float:none;
    width:90%;
    max-width:30em;
    height:18em;
    margin:1em auto;
  }
  .sect3{
    padding: 6em 0px;
    background-image: url("img/back_promo.jpg");
    background-position: center top;
    background-size: auto 120%;
  }
  .sect5 {
    width: 100%;
    text-align: center;
    padding: 4em 0 0;
  }

  .sect5 .slogan{
    width:90%;
    margin:1em auto;
  }
  .slogansub {
    font-size: 1.1em;
    width:70%;
    margin:1em auto;
  }
  .enquire{
    padding: 5em 0px 2em;
    background: transparent url("img/enquire2.png") repeat scroll center 0% / 120% auto;
  }
  .enqcont{
    width:20em;
  }
  .enqcont span{
    font-size:1.1em;
  }
  .enqselect{
    width: 12.4em;
    padding-left: 0px;
    position: absolute;
    left: 2.4em;
    margin: 0;
  }
  .cycle-pager {
    height:50px;
  }
  .cycle-pager span {
    font-size: 40px;
    width: 15px;
    height: 50px;
    line-height: 50px;
  }
  .banquets{
    padding:4em 10% 0;
  }
  .banquet{
    width:80%;
    padding:0 10% 4.5em;
    float:none;
  }
  .excont{
    width:100%;
  }

}