@font-face {
    font-family: 'ralewaybold';
    src: url('fonts/raleway-bold-webfont.eot');
    src: url('fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-bold-webfont.woff') format('woff'),
         url('fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ralewayextrabold';
    src: url('fonts/raleway-extrabold-webfont.eot');
    src: url('fonts/raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-extrabold-webfont.woff') format('woff'),
         url('fonts/raleway-extrabold-webfont.ttf') format('truetype'),
         url('fonts/raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'ralewayextralight';
    src: url('fonts/raleway-extralight-webfont.eot');
    src: url('fonts/raleway-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway-extralight-webfont.woff') format('woff'),
         url('fonts/raleway-extralight-webfont.ttf') format('truetype'),
         url('fonts/raleway-extralight-webfont.svg#ralewayextralight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rock_saltregular';
    src: url('fonts/rocksalt-webfont.eot');
    src: url('fonts/rocksalt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/rocksalt-webfont.woff') format('woff'),
         url('fonts/rocksalt-webfont.ttf') format('truetype'),
         url('fonts/rocksalt-webfont.svg#rock_saltregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


h2{
	color:#F7F797;
	font-size: 24px;
	padding: 20px;
	font-family: helvetica;
	text-align: center;
	}


#formcontent{
	text-align: center;
	line-height: 30px;
	font-family: 'ralewayextralight';
	font-size: 20px;
	
	}



h1{
	text-align: center;
	font-size: 60px;
	margin-top: 100px;
	color: green;
	font-family: 'ralewayextralight';
	
	
	
	}
	
h3{
	text-align: center;
	font-family: 'rock_saltregular',Arial, sans-serif; 
	font-size:13px;
	padding: 0 10px 10px 10px;
	
}


form { 
	margin:15px auto; 
	width:300px;
	

}


#submitbutton{
	border:solid 1px #ccc; 
	border-radius: 50%;
	width: 145px;
	height: 145px; 
	 
	font-family: 'rock_saltregular',Arial, sans-serif; 
	font-size:14px;
	text-transform:uppercase;
	font-weight:bold;
	background-color: rgba(255,255,255, .3);
	cursor:pointer;
	text-align: center;
	margin-left: 25%;
}

#submitbutton:hover{
	color: white;
	}

	
label{
	display: inline-block;
	margin-top: 10px;
	width: 140px; 
	text-align: right;
	font-family: 'rock_saltregular';
	}


 
 input, textarea  { 
	display: inline-block;
	margin-top: 10px;
	width: 120px; 
	text-align: left;


	font-family: Helvetica; 
	font-weight: 200; 
	font-size: 14px; 
	color: black; 
	padding: 3px;

	background: rgba(255,255,255,0.7);
	border: 1px solid #FFF; 
	border-radius: 5px; 

} 

textarea{
	width: 100%;
	height: 100px;
	}
	
input:focus { 
	background: #fff; 
	color: #414848; 

} 
input:hover   { 
	background: none; 
	color: #F7F797; 
	 
} 
	
select{
	display: block;
	margin-top: 10px;
	}
	
	

	
span{
	color:red; 
	font-size: 20px;
	margin-left: 2px;
	
	}
.title{
	font-family: 'rock_saltregular';
	color: black;
	font-size: 16px;
	}
	
	
a{
	text-decoration: none;
	color: yellow;
	}	
	
	
	
	
	
	
	
	
	
	
	

#headerback{
	height: 112px;
	
}

#navback{
	height: 150px;
	
}


#container{
	margin: auto;
	max-width: 1024px;
}

body{
	background: url(images/tableset.jpg) center center fixed no-repeat;
	background-size:cover;
	
	-moz-background-size:cover;
	-ms-background-size:cover;
	-webkit-background-size:cover;
}


#header{
	height: 112px;

}

#headerbox{
	width: 68.26171%; /* 699/1024*/
	margin: auto;
}

#hours{
	float: right;
	color: #F9F5EA;
	width: 40%;
	font-size: 11px;
	margin: 25px 0 0 0;
	text-align: right;
	font-family: helvetica , arial;
	font-weight: 100 
}

#hours p{
	padding: 1px;
} 

.hours{
	font-family: 'ralewayextralight', arial;
	font-size: 21px;
	color: #ADF7F5;

}

nav{
	height: 38px;
	background: rgba(255,255,255, .4);
}

#navbox{
	width: 68.26171%; /* 699/1024*/
	height: 38px;
	margin: auto;
}

#navbox li a{
	text-decoration: none;
	color: white;
	}
	
#navbox li a:hover{
	text-decoration: none;
	color: #F7931E;
	}

#reserve{
	float: right;
	text-align: right;
	font-family: 'ralewaybold', arial;
	color: yellow;
	font-size: 17px;
	margin: 11px 0 0 0;

	
}

#secondreserve{
	text-align: center;
	font-family:'ralewaybold', arial;
	color: yellow;
	font-size: 1.5em;
	padding-top: 20px;
	display: none;
	
}


nav ul{
	margin: 0 0 0 130px;
}

nav ul li{
	display: inline-block;
	font-size:22px;
	margin: 10px 3%;
	color: #370211;
	font-family:'ralewayextralight', arial;
}

#logo img{
	max-width: 20.11718%; /*206/1024*/
	float: left;
	margin-top: -130px;
	margin-left: 90px;
	position: absolute;

}

#contentbox{
	width: 71.875%; /* 736/1024 */

	margin: auto;
	overflow: auto;
	padding-bottom: 5px;
	min-height: 750px;
}

#content{
	width:94.97252%; /* 699/736*/
	margin: auto;
}

#contentnapkin{
	width:94.97252%; /* 699/736*/
	margin: auto;
	background-image: url(images/napkin2.png);
	background-size: 160%;
}

#motto{
	width: 100%;
	
	font-family: 'ralewayextralight', arial;
	font-size: 80px;
	text-align: center;
	margin-top: 110px;
	
	}
	
#motto h1{
	color: #ADF7F5;
}
	
#plates img{
	width: 45%;
	margin-left: 10%;
	margin-top: 30px;
	position: fixed;
	color: transparent;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 10s linear infinite 0s;
    -moz-animation: imageAnimation 10s linear infinite 0s;
    -o-animation: imageAnimation 10s linear infinite 0s;
    -ms-animation: imageAnimation 10s linear infinite 0s;
    animation: imageAnimation 10s linear infinite 0s; 
	}
	
#plates img:nth-child(2)  { 
    background-image: url(../images/plate2.png);
    -webkit-animation-delay: 3s;
    -moz-animation-delay: 3s;
    -o-animation-delay: 3s;
    -ms-animation-delay: 3s;
    animation-delay: 3s; 
}
#plates img:nth-child(3) { 
    background-image: url(../images/plate3.png);
    -webkit-animation-delay: 7s;
    -moz-animation-delay: 7s;
    -o-animation-delay: 7s;
    -ms-animation-delay: 7s;
    animation-delay: 7s; 
}

@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

#maphours{
	margin: auto;
	margin-top: 40px;
	max-width: 100%;
	display: none;
	}

#secondhours{
	margin: auto;
	margin-top: 20px;
	max-width: 100%;
	display: none;
}

#hours2{
	color: #370211;
	width: 60%;
	font-size: 13px;
	margin: auto;
	text-align: center;
	font-family: helvetica , arial;
	font-weight: 100 
}


.menutitle{
	
	background: none;
}






footer{
	font-family: helvetica, arial;
	color: white;
	font-size: .625em;
	text-align: center;
	margin: 40px 0 0 0;
	float: left;
	width: 100%;
	
}

#menu3 h1, #menu1 h1, #menu2 h1{
	font-family: 'ralewaybold', arial;
	color: black;
	font-size: 2em;
	padding:20px;
	text-align: center;
	}
	
#menu3 h2, #menu1 h2, #menu2 h2{
	font-family: helvetica, arial;
	color: white;
	font-size: 1em;
	padding:9px;
	
	}
	
#menu3 p, #menu1 p, #menu2 p{
	font-family: helvetica, arial;
	color: black;
	font-size: .75em;
	padding-left:9px;
	padding-bottom: 7px;
	font-style: italic;
	line-height: 16px;
	
	}

#menu1{
	float: left;
	width: 32%;

	margin-top: 60px;
	padding-bottom: 15px;
	
	
}

#menu2{
	float: left;
	width: 32%;

	margin-top: 60px;
	margin-left: 14px;
	padding-bottom: 15px;
}
	
#menu3{
	float: right;
	width: 32%;
	
	margin-top: 60px;
	padding-bottom: 15px;

}

/* Responsive iFrame */
 
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 100px;
    overflow: hidden;
    margin-top: 130px;
}
 
.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




	


@media screen and (max-width: 994px) {

	body{
		font-size: 14px;
		}
		
}


@media screen and (max-width: 844px) {
	
	body{
	font-size: 16px;
	}
	
	#logo img{
	max-width: 23.4375
	%; /*166.104/1024*/
	}
	
	nav ul{
	margin: 0 0 0 145px;
	}
	
	
	
	#menu1{
	width: 100%;
	}
	
	#menu2{
	width: 100%;
	margin: auto;
	}
	#menu3{
	width: 100%;
	margin: auto;
	}

	
}


@media screen and (max-width: 767px) {

	#reserve { display: none;
	}
	nav ul{
	text-align: center;
	margin: auto;
}
	#secondreserve{
	display: block;
	text-align: center;
	font-family: 'ralewaybold', arial;
	color: yellow;
	font-size: 1.5em;
	padding-top: 20px;
	}
	
	#contentnapkin{
	background-image: url(images/napkin2.png);
	background-size: cover 200%;
	
}
	

	
}

@media screen and (max-width: 567px) {
	
	#headerbox{
	display: none;
	}
	
	
	
	#contentbox{
	
	width: 85%; /* 736/1024 */
	
	}
	#secondhours{
	display: block;
	}
	
	#maphours{
	display: block;
	}
	
	
	
	#logo img{
	max-width: 50%; /*206/1024*/
	float: left;
	margin-left: 85px;
	margin-top: -185px;
	
	
	}
	
	#secondreserve{
	display: block;
	text-align: center;
	font-family: 'ralewaybold', arial;
	color: yellow;
	font-size: 1em;
	padding-top: 20px;
	}
	
	#header{
	height: 160px;
	}
	
	nav ul li{
	display: inline-block;
	font-size:18px;
	margin: 10px 1%;
	color: #370211;
	font-family:'ralewayextralight', arial;
}

#contentnapkin{
	background-image: url(images/napkin2.png);
	background-size: cover 200%;
	
}


}