/*
                           
  _  /_ .//._    _  /_ _  _ 
 /_// //////_/  /_// //_|/ /
/         /    /            

*/

@charset "UTF-8";

/*general styles*/
body {font-family: "Helvetica"; font-size:12px; margin-top:0; }

#logo {max-width:100px;; float:left; position:relative; top:  0px; left: 120px}

header {height:100px; background-color:white}

nav {width: 1288px; float:left; margin:0 auto;}
ul { float:right; margin-left:0; padding-left:2vw;}
li {display:inline-block}
li a {display: block; width:7vw; margin:12px; margin-right:3vw; font-size:1.4vw; padding-top:40px; font-family:"Helvetica"}
 
a:link {color:darkred; text-align:center; text-decoration:none;} 
a:visited {color:darkred;}
a:hover {color:#yellow} 
a:active {background-color:none;} 


.container {
  position: relative;
  top: -2vh;
  opacity: 80%;
}

.roverlay {
  position: relative;
  bottom: 42vh;
  left: 15vw;
  width: 15vw;
  height:inherit ;
  opacity: 0;
  transition: .5s ease;
  background-color: darkred;
}

.container:hover .roverlay {
  opacity: 1;
}

.doverlay {
  position: relative;
  bottom: 42vh;
  left: 2vw;
  width: 15vw;
  height:inherit ;
  opacity: 0;
  transition: .5s ease;
  background-color: darkred;
}

.container:hover .doverlay {
  opacity: 1;
}

.poverlay {
  position: relative;
  bottom: 42vh;
  left: 2vw;
  width: 15vw;
  height:inherit ;
  opacity: 0;
  transition: .5s ease;
  background-color: darkred;
}

.container:hover .poverlay {
  opacity: 1;
}

.text {
  color: red;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

body {padding-top: 40px}

#content {width: 1288px}

h1 {color:darkred; font-size: 34px; font-family:"Helvetica"; margin-top: 0; margin-bottom: 0}
h2 {color:orange; font-size: 28px; font-family:"Helvetica"; margin-bottom: 0; margin-top: 0; text-align: center}
h3 {color:#17567E; font-size: 24px; font-family:"Helvetica"; margin-bottom: 0; margin-top: 0; }
p {font-size: 20px; font-family:"Helvetica"; line-height: 2em; margin-top: 0}

/*homepage*/
.reservation {float:left; background-color:#darkred;margin-bottom:12px;position: relative; left: 7.5vw; bottom: 1vh; }
.delievery {float:right; background-color:#darkred;margin-bottom:12px; position:relative; left:-22.6vw; bottom: 1.5vh; width:18vw; height:47.8vh;}
.pickup {float:right; background-color:#darkred; margin-bottom:12px; position:relative; left: 14.9vw; bottom: 1.5vh; width:18vw; height:47.8vh;}
.slideshow-container {width: 600vw; position: relative; height: 90vh; margin-bottom: 1.8vh; left: 7.4vw; bottom: 15px; padding-top: 20px;}
#slide1 {display:block}
#slide2 {display: none}
#slide3 {display:none}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 6px;
  color:white;
  font-weight: bold;
  font-size: 27px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  left: 1120px;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  position: relative;
  left: 75px;
  top:  -75px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

h1 {color:darkred; font-size: 30px; font-family:"Helvetica"; margin-top: 0; margin-bottom: 0}
h2 {color:grey; font-size: 20px; font-family:"Helvetica"; margin-bottom: 0; margin-top: 0; text-align: center}
h3 {color:orange; font-size: 18px; font-family:"Helvetica"; margin-bottom: 0; margin-top: 0; }
p {font-size: 20px; font-family:"Helvetica"; line-height: 2em; margin-top: 0}

/*order*/

.ordermenu {
  position: relative;
  left:  5.8vw;
  top:  3vh;
}

#res {
  display: inline-block;
  border-style: solid; border-width: 3px; border-color: red;
  position: relative; height: 74vh; width: 28vw;
}

#del {
  display: inline-block;
  border-style: solid; border-width: 3px; border-color: yellow;
  position: relative;
  margin-left: 1vw;
  height: 74vh;
  width: 28vw;
}

#pic {
  display: inline-block;
  border-style: solid; border-width: 3px; border-color: orange;
  position: relative;
  margin-left: 1vw;
  height: 74vh;
  width: 28vw;
}

.ordertext {color: darkred; font-size: 25px;
  position: relative; text-align: center;}

button {
  position: relative;
  left: 12vw;
  border: none;
  color: white;
  text-align: center;
  font-size: 14.5px;
  transition-duration: 0.4s;
  cursor: pointer;
}

/*menu*/

.menuitems {
  position: relative;
  width: 50vw;
  right: 14.8vw;
  float: right;
  top: 3vh;
  opacity: 80%;
  display: inline-block;
}

.overlay {
  position: inherit;
  height:inherit ;
  opacity: 0;
  transition: .5s ease;
  background-color: darkred;
}

.container:hover .overlay {
  opacity: 1;
}


.menu1 {float:right; background-color:#darkred;margin-bottom:12px;position: relative; left: 7.5vw; bottom: 1.5vh; margin-bottom: 1.5vh
}

.menu2 {float:right; background-color:#darkred;margin-bottom:12px;position: relative; left: 7.5vw; bottom: 1.5vh; margin-right: 1vw; margin-bottom: 1.5vh;
}

.menu3 {float:right; background-color:#darkred;margin-bottom:12px;position: relative; left: 7.5vw; bottom: 1.5vh; 
}

.menu4 {float:right; background-color:#darkred;margin-bottom:12px;position: relative; left: 7.5vw; bottom: 1.5vh; margin-right: 1vw;}

.sidenav {position:  relative;width:242px;float: left; height:500px; left: 15.5vw; top: 12vh;}
.spotlighttext {font-size: 2.2vw; font-family:"Helvetica"; margin-bottom: 3vh; color:orange;}
.menutitletext {position:  relative; color: darkred; font-size: 4vw; font-family:"Helvetica"; top: 2vh}

/*review*/
.entry-group {
  position: relative;
  top: 3vh;
  left: 7.8vw;
  font-size: 1.5vw;
  width: 50vw;
  float: left;
}

.reviewmessage {
  position: relative;
  float: right;
  right: 8vw;
  font-size: 1.2vw;
  width: 30vw;
  top: 3vh;
  text-align: center;
  border-style: solid;
  border-color: darkred;
  border-width: .5vw;
}


/*about*/

.aboutpic {
  position: relative;
  float: right;
  top: 1vh;
  right: 7.5vw;
}

.aboutinfo {
  position: relative;
  float: left;
  left: -2vw;
  width: 25vw;
   top: 8vh;
   font-size: 1vw;
   text-align: justify;
}

.abouttitle {
  position: relative;
  color: darkred;
  font-size: 3vw;
  float: left;
  margin-bottom: 1vh;
  left: 15vw;
}

/*contact*/

.form {position:  relative; left: 30vw; top: 3vh;width:40vw; margin-right: 12px;  margin-bottom: 12px;  float: left; font-family: "Helvetica";font-size: 20px}
.submit {width:243px; height: 40px; float: left; background-color: #17567E; text-align:center; font-family:"Helvetica";font-size: 20px}
.submit:hover {background-color:white;}
.youtube {width:243px; height: 243px; background-color: grey; margin-right: 12px; margin-bottom: 12px; display:inline-block}
.facebook {width:243px; height: 243px; background-color: grey;display:inline-block; margin-bottom:12px}
.twitter {width:243px; height: 243px; background-color: grey; display:inline-block; margin-right: 12px}
.instagram {width:243px; height: 243px; background-color: grey; display:inline-block}

/*footer*/
footer {position: relative;width:98vw; background-color:#000000;clear:both;color:white;text-align:center; font-family:"Helvetica"; font-size: 16px; padding-top:7px}