/* css reset */

html, body {
    margin:0;
    padding:0;
    font-size:100%;
}

body {
	margin-left: auto;
	margin-right: auto;
	/*background-image: url("../images/mobile-background-splash.png");*/
    /*background-image: url("../images/desktop-background-splash.png");
    background-size:contain;
	background-repeat: no-repeat;*/
	
}


.desktop-container {
    margin:0;
    padding:0 3%;/*fix padding?*/
    /*background-color: orange;*/
    height:auto;
}

.section-vertical-spacing{
    /*background-color: pink;*/
    position: relative;
    top:0;
    height:5vw;
    box-sizing: content-box;
}

img {
   max-width:100%;
}

@font-face {
	font-family: Roboto;
	src: url('fonts/Roboto/Roboto-Bold.ttf');
}

@font-face {
	font-family: Raleway;
	src: url('../fonts/Raleway/Raleway-Medium.ttf');
}



@font-face {/* #### Generated By: http://www.cufonfonts.com #### */
    font-family: 'Gabriola';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/gabriola-font-download.woff');
}

a, p, figure {
	font-family: Raleway, arial, sans-serif;
}

p {
	font-weight: 500;
    font-size: 15px;
    line-height: 24px;
}

a {
	color: #ff8b38;
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    font-family: 'Raleway', Helvetica, Arial, 'Roboto', sans-serif;/*cool with RALEWAY TOO*/
    text-transform: uppercase;
    text-decoration: none;
}

h2, h3, h4, h5 {
	font-family: 'Rockwell', Gill Sans, Garamond, Optima, Palatino, Calisto MT, serif;
	color: #ff8b38;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    text-transform: uppercase;
    
}


/*nav---------------------------------*/
nav li {
	list-style-type: none;
}

nav ul li a:hover { 
    text-decoration: underline; 
}

/*mobile nav----------------------------*/
.desktop-nav {display:none;}

nav.mobile-nav a {
	font-size: 5vh;
}

button#hamburger-icon {
    position: fixed;
	font-size: 2.5em;
	line-height: 0;
	border: 5px solid #000;
	border-radius: 20%;
	padding: 22px 8px 28px 8px;
	top: 20px;
	left: 20px;
	z-index: 100;
	cursor: pointer;
	background-color: transparent;
}

button#hamburger-icon:hover {
	border-color: #fff;
	color: orange;
	background-color: rgba(255,255,255,0.5);
}

.mobile-nav {
	position: fixed;
	width:100vw;
	padding: 0vw 1vw 0vw 5vw;
	box-shadow: 2px 2px 20px 0px black;
	background-color: rgba(250,250,250,0.8);
	transition: transform 1s;
		transform: translateX(-9999px);
	z-index: 100;
}

nav.mobile-nav ul {
	padding: 30px;   
}

nav.mobile-nav li {
	margin: 0.3em;
	padding: 1em;	
}

.after-click {
	transform: translateX(0px);	
}

p#call{
    line-height:1.5;
    position: absolute;
    box-sizing:border-box;
    color:orange;/*or yellow*/
    padding:1%;
    z-index:100;
    /*background-color: yellow;*/
    top:-100px;
    right:3vw;
    height: auto;
    font-size:1.6vw;  
    font-family: 'Rockwell', Gill Sans, Garamond, Optima, Palatino, Calisto MT, serif;
    -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
    animation-delay: 3.1s;
    animation-fill-mode:forwards;

} 

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  0%   {top: -100px;}
  25%  {top: 10vw;}
    50%  {top: 6.5vw;}
    75%  {top: 6.5vw;}
    100%  {top: 6.5vw;}
}

span#call-link{ 
    font-size:1.6vw;  
    font-family:'Roboto', 'Raleway', 'Arial', sans-serif;
    /*color:yellow;*/   
}

span#call-link:hover{
    color:greenyellow;
}


/*logo------------------------------*/
header {
	position: absolute;
    top:0;
    font-size:4vw;
	width:100%;
	text-align: center;
	z-index: 10;
    /*add fallback for unternet exp9*/
    background-image: linear-gradient(to bottom, rgba(45,0,0,1),rgba(45,0,0,1),rgba(45,0,0,1),rgba(45,0,0,1),rgba(45,0,0,1),rgba(45,0,0,0.75), rgba(45,0,0,0.75),rgba(45,0,0,0.75),rgba(45,0,0,0.75),rgba(45,0,0,0.75),rgba(45,0,0,0.75),rgba(45,0,0,0.75),rgba(45,0,0,0.75),rgba(45,0,0,0.75),rgba(45,0,0,0.5),rgba(255,0,0,0)); /* Standard syntax (must be last) */
}

#arcs div {
    position: absolute;
    top:-100px;
    left:30vw;
    width:26.2%;
    margin: 0 auto;
    border: 5.4px solid #fff;
    border-top-width:6px;
    min-width: 8.2em;
    min-height: 10em;
    padding: 0.5em;
    border-radius: 47.5%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    -webkit-animation: arcmove 5s; /* Safari 4.0 - 8.0 */
    animation-delay: 1.1s;
    animation-fill-mode:forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes arcmove {
  0%   {top: -100px;}
  25%  {top: 8vw;}
     75%  {top: 5vw;}
    75%  {top: 5vw;}
    100%  {top: 5vw;}
}

#arcs div:hover{
    border-top-width:7px;
    border-top-right-radius: 55%;
}
.logo-text {
    position:relative;
    color: white;
    letter-spacing: 0.03em;
    font-family: 'Gabriola', sans-serif;
    margin-bottom: 0;  
}

.logo-sub {
    left:-9999px;
    font-family: 'Raleway', 'Roboto', Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size: 1.9vw;
    color:yellow;
    text-transform:uppercase;
    position:relative;
    margin-top:-4.18vw;
    word-spacing: 2.5em;
    -webkit-animation: submove 5s; /* Safari 4.0 - 8.0 */
    animation-delay: 1s;
    animation-fill-mode:forwards;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes submove {
  0%   {left: -999px;}
  25%  {left: 8vw;}
    75%  {left: 1vw;}/*5 looked nice purposfuly offkilter*/
    75%  {left: 1vw;}
    100%  {left: 1vw;}
}

.logo-sub:hover{
    color:lightgoldenrodyellow;
}

.transition-grow {
	transition: transform 2s;
}
    .transition-grow:hover {
		transform: scale(1.2);
	}
        
.transition-rotate {
	transition: transform 1s;
}
	.transition-rotate:hover {
		transform: rotate(2deg);
        transform:translateY(-1vw);
	}

#transition-four {
	transition: transform 5s; /*take 5 sec to transform*/
}
	#transition-four:hover {
		transform: rotate(720deg); /*spin div in circle to right two times*/
	}



/*slider splash page---------------------*/
.fotorama {
    opacity:1;
    margin: 0;
    padding: 0;
}

/*.splash-slider {
	width: 100vw;
	height: 100vh;
	/*background-image: url("../images/avo.jpg");
	background-color:  #201712;
	background-size: cover;
	top: 0;
}*/

/*about section-----------------------*/
#aboutfigure {
    height:auto;
    width:100%;
    margin: 0 auto;/*intresting bc this works even tho element is 100% and that is bc its in div with padding 3%*/
    /*background-color: aqua;*/
}

.figurecontainer {
	width: 100%;
    margin: 0 auto;
	/*background-color: lightgreen;*/
}

.figurecontainer img {
    height:60vw;
    width:100%;
    object-fit: cover;
}

#menu {
	padding: 3%;
	margin: 4%;
	font-size: 3em;
	text-decoration: underline;
	text-align: center;
}

.visit {
	background-color: white;/*#F5F5F5;*/
	text-align: center;
}

.visit h3{
    font-size: 2vw;
    line-height: 1.2em;
    font-family:'Roboto','Raleway', sans-serif;
}
.visit p {
    font-family:'Roboto','Raleway', sans-serif;
    line-height: 1.2;
    font-size:1.5vw; 
}

article#location1 {
	width:98%;
	margin:0 auto;
}

/*MENUUUUUUUUUUUUU*****************************************************/
#food-menu button { display: none; }/*add later for javascript*/
#food-menu input{display:none;}


#menu-title {
  text-align: center;/*fix code later*/
    font-size: 3em;
}

/*nav #foodmenu {
margin-left: 0;
padding-left: 0;
text-align: center;
}*/

/*ul {
	list-style-type: none;  /*test to see which values are necessary
	margin-left: 0;
	padding-left: 0;
}

li {
	margin-left: 0;
	padding-left: 0;
	padding: 1em;
  font-size: 1.5em;
  background-color: orange;
  border: 1px solid;
}*/

 h2 {/*affects menu item categories and VISIT header*/
    text-align: center;
    color: orange;
    font-size: 1.7em;
}

#food-menu span.name{ 
    font-weight: 700;
    background-color: aqua;
    box-sizing: content-box;
    padding: 2%;
}

#food-menu span.cost{
    float: right;
    background-color: yellow;
    display: inline;
    padding:0.5% 1%;
}

.item p {
background-color: aqua;
box-sizing: content-box;
padding:2%;
position: relative;/*?* :( */
}

/*#showcartbutton {     /*add later for fun javascript
  position: fixed;
  width: 120px;
  height: 30px;
  font-size: 1.3em;
  background-color: red;
  border: black solid 1px;
  border-radius: 5px;
}

input[type=number]{
  width: 40px;
}

#cart {
  position: fixed;
  display: none;
  margin: 1px 140px;
  border: black solid 2px;
  border-radius: 3px;
  min-width: 289px;
  max-width: 30%;
  height: auto;
  background-color: yellow;
}


table {
  width: 100%;
}

th {
  /*height: 50px;
  text-align: left;
  width: 33%;
}

th, td, {
  padding-left: 4%;
}

#totalordervalue {
  text-align: right;

}

.cost {
  margin-left: 60px;
}*/


.back_to_top {
  position: fixed;
  padding: 1%;
  margin: 400px 20px;
  background-color: yellow;
  border-radius: 2px;
  font-weight: bold;
  font-size: 1.4em;
  color: red;
  text-decoration: underline;
  z-index: 10;
}

/*.item button {
  background-color: orange;
  border-radius: 6px;
  height: 30px;
}*/


/*CONTACT SECTION**************************/


.map {
    width: 100%;
    height: 472px;
}

.contactform {
    width: 100%;
}

.contactform input, textarea{
	width: 100%;
    padding: 7px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    background-color: floralwhite;
    border: 1px solid #ccc;
    border-radius: 3px;
    
}

label{
    display: inline-block;
    text-align: left;
    width: 100%;
}

div.name, div.lastname {
    width: 48%;
    float: left;
}

div.lastname {
    margin-left: 4%;
}

input[type=text], textarea{
  outline: none;
}
input[type=text]:focus, textarea:focus {
    background-color: ghostwhite;
    
}

textarea#subject, textarea#comments{
width: 100%;
  padding: 1px 20px;
  box-sizing: border-box;
  resize:none;
    border-radius: 3px;
}

textarea#comments{
    padding: 30px;
}


input[type=button], input[type=submit], input[type=reset] {
  background-color: #352B29;/*#4CAF50;*/
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

footer {
    position: relative;
    top:110px;
    color:white;
    text-align: center;
    padding-top:4.5%;
    box-sizing:content-box;
    clear: both;
	background-color: #352B29;
	height:9vw;
    width:100vw;
}




/*GENERAL MEDIA QUERIES***********************************************/
/* for small tablet*/
@media screen and (min-width: 641px){
 
}
/*for tablet------------------------*/
@media screen and (min-width: 768px){
/*nav-----------------------------*/
button#hamburger-icon {display: none;}

.mobile-nav {
	display: none;
} 
    
.desktop-nav a {
    font-size:1.5em;
}
    
.desktop-nav a:hover{
    color:lightgoldenrodyellow;
}
.desktop-nav {
	position: fixed;
    top:0vw;
    height:4.2vw;
	width:100%;
	display: inline-block;
	z-index:200;
	text-align: center;
    background-image: linear-gradient(to bottom, rgba(45,0,0,1),rgba(45,0,0,1),rgba(45,0,0,1),rgba(45,0,0,0.75));  
}

.desktop-nav ul {
	padding: 0;
	margin-top: 0.5vw;
}

.desktop-nav li {
	display: inline-block;
	padding: 1vw;
	width: 18vw;
}

/*about------------------------*/
figure {
	margin:0;
}

#aboutfigure {
	width: 60%;
	max-width: 625px;
    height:37vw;
	/*padding: 1em;*/
	float: left;
	padding-left: 0em;
    margin-right:2em;

}

#about {
    padding-top:0;
    margin-top: -2%;
	width: 30%;
	max-width: 390px;
	float: left;
    box-sizing: content-box;
}

.history-press-location {
	clear:both;/*prevent weird formatting in about info and food menu from collapsing in*/
    position: relative;
    top:0;
    background-color: blue;
    padding: 0 1em;
    height:auto;/*only shows up in text things*/
	/*padding-left: 3%;*/
}

.figurecontainer {
	width: 29.1%;
	float: left;
	margin-top: 1em;
	margin: 2%;
	padding: 0; /*adds space between this and next "reserve" section*/
	/*background-color: green;*/
}
    
.figurecontainer img{
    width:100%;
    max-height: 20vw;
}
  
/*VISIT**********************************************************/
.map {
	width: 48%;
	float:left;
    
}
    
   
.contactform{
	float:right;
	width: 48%;
}
}
 /*end for tablet*/


/* following style for desktop*/
@media screen and (min-width: 1080px){

.desktop-container{ /*centers wrapper for about-figure and p inside the div desktop section*/
	min-width: 1079px;
	max-width: 56%;
	margin: 0 auto;
}

#about {
	max-width: 410px;
}

.figurecontainer img{
    max-height:230px;
}


    
}
/*MENU MEDIA QUERIES*********************************************/

@media screen and (min-width: 618px/*768px*/){
.menu-col-group {
    overflow: hidden;
  }
.menu-col-group > div {
    float: left;
    width: 50%;
  }

.clear {
  	clear: left;
  }

/*nav li {
  display: inline-block;
  padding: 1em;
  /*margin-right: 1em;
  width: 5%;
  margin: 3%;
  font-size: 1.3em;
  border: none;
  background-color: white;
}*/

}

@media screen and (min-width: 972px){
.menu-col-group > div {
    width: 29%;
    padding: 2%;
 	}

 	.clear {
 		clear: none;
 	}
}

/* @media screen and (min-width: 769px){

 	nav {
 		width: 55%;
 		margin: 0 auto;
 		background-color: pink;
 	}

 	ul {
 		margin: 0 auto;
 		text-align: center; // or width: 50%


 	}
 	
 	ul li {
 		display: inline-block;
 		padding: 1em;
 		width: 10%;
 		
 	}

 	a {
 		
 	}
    
 }*/