/* CSS Document for Mexico City Cuisine */

* { margin: 0; padding: 0; border: 0;}

body {background-color: #f8eccd;
    margin: 0 auto; text-align: center; 
    font-family: Arial, Helvetica, sans-serif; 
    }

#wrapper { width: 98%; max-width: 1100px; margin: 0 auto; 
    background-color: #fcf4de; padding:0; border: 1px black solid;
    }

h1, h2, h3, h4 {font-family: 'Happy Monkey', cursive; }


header {width: 100%; height: 145px;  background-color: #000;
	margin: 0 0 15px 0; border-bottom: #ff9c05 15px solid; }
  
#logo {width:346px; padding:2.5% 3% 1% 3.5%; float: left; }
  
#logo a {border: none;}
  
#nav {float: right; margin-right: 1%; width: 55%;}

header	ul { list-style-type: none; margin:0; width: 100%;}		

header	li { float: left; margin-top: 60px; display: inline-block; padding: 2px; width:15%;
      }	

header li a {  margin: 0 ;  padding: 2px 0 2px 0;
   font-size: 1em; text-decoration: none; color: #eee; }	

header li a:hover {color: #ff9c05; }	

header a:active {color: #000;}

#sliders {margin-top: 1%;}
#sliders h1 {margin-top: 0; padding: 0 1%;}
#sliders img {width: 92%; padding-top: 1%;}

#sliders a {color: #bc3201; margin: 2% 0 ;}
#sliders a:hover {color: #000; }
#sliders a:active {color: #fc801b;}

#content1 {float: left; text-align: left; margin: 1.5% 0 0 3%; 
 max-width: 45%; padding:0 1% 1% 1%; }

#content1 p {font-size: .95em; text-align: left; margin-top: 2%; line-height: 130%;}
#content1 h3, #content1 h4 {margin-top: 2%;}
#content1 h2 {margin-top: 2%; color: #bc3201; }

#content1 li {margin-left: 30px;}

#content1 a {color: #fc801b; margin: 2% 0; line-height: 140%; }
#content1 a:hover {color: #bc3201; }
#content1 a:active {color: #000;}

#content2 {float: right; /* padding:0 1%; */ margin:2% 4% 1% 0; text-align: center;
    width: 42%;}
#content2 p {font-size: 1em; text-align: left; margin-top: 2%;  }

#content2 .icon {text-align: center; margin-bottom: 2%; margin-left: 1%;}
#content2 img {width: 100%;}

#footer {font-size: 14px;  padding: 1% 1% 2% 1%; 
    line-height: 140%; background-color: #ff9c05; clear: both; 
    }
#footer p {margin-top: 1%;}

.icon img { width: 13%; max-width: 45px;  padding: 1%;}

/* slideshow */
#slideshow {
    position:relative;
    height:340px;
	margin-bottom: 10px;
}

#slideshow IMG {
    position:absolute; top:5px; right:80px;  z-index:8; opacity:0.0; }

#slideshow IMG.active { z-index:10; opacity:1.0; }

#slideshow IMG.last-active { z-index:9; }

/* Menu Page Items */

.menupix {float: right; margin: 3% 4% 5% 0; clear: left; max-width: 45%;}
.menupix img {width: 100%;  }

.menu {float: left; text-align: left; margin: 1% 0 0 4%; max-width: 45%; padding:0; }

.menu p {font-size: .95em; text-align: left; margin-top: 2%; line-height: 130%;}
.menu h3, .menu1 h4 {margin-top: 2%;}
.menu h2 {margin-top: 2%; color: #bc3201; }

.menu li {margin-left: 30px;}

.menu a {color: #fc801b; margin: 2% 0; line-height: 140%; }
.menu a:hover {color: #bc3201; }
.menu a:active {color: #000;}



.bar h1 {background-color: #ff9c05; clear: both; line-height: 130%; padding: 0.75% 0 0.5% 0;
margin:2% 0 0 0;}

.bar p {text-align: left; margin: 1% 4% 0 4%; }

#management {width: 60%; margin:2% auto; /*border: solid 1px #ff9c05;*/}
    #management img {max-width: 100%;}
     .mpeople {width: 30%; /* height: 264px;*/ float: left; border: solid 1px #ff9c05;
    margin: 2% 1%; padding-bottom: 1.5%;}
    
    #staff {width: 90%; margin:2% auto; /* border: solid 1px #ff9c05;*/}
    #staff img {max-width: 100%;}
    .people {width: 17.6%; /* height: 264px;*/ float: left; border: solid 1px #ff9c05;
    margin: 2% 1%; padding-bottom: 1.5%;}

    .people em {font-size: 85%;}

/* Menu Page Items END */

/* for responsive midrange size adjust navigation */

/* media styles */
	@media screen and (max-width: 960px) {
	#nav {width: 100%; margin: 1.5% 0; float: left; }
	
	header {width: 100%; height: 150px; padding: 5px 0 5px 0;
	border-bottom: none;}
		
	header ul { width:100%; margin:4px 0; clear: left; }
		
	header li {width:33.3%;   margin: 0; 
	padding: 2px 0 2px 0; background-color:#fc9a1b; color: #fff;
	border-bottom: 1px solid black;}
			
	header a:link, header a:visited  { color: #fff;
	margin: 0; padding:2% 0 0 0; text-align: center;}
	
	header li a:hover {color: #d22029;  }
	.icon img { width: 13%; max-width: 45px;  padding: 1% 0 1%  1%;}

	.menupix {float: left; margin: 2% auto; clear: left; }
	.menupix img {width: 100%; padding: 2% 0; }
	iframe {max-width: 98%;}
	
	}
	

/* media styles */
	@media screen and (max-width: 768px) {
	
	#wrapper {width: 100%; margin: 0 auto;}
    
	#logo { width: 98%; max-width: 305px; padding:1% 5% 1% 2%; float: left;}
	
	#logo img { float: left; width: 98%; max-width: 305px;  padding: 1% 0 1%  1%;}
	 
	#nav {width: 100%; margin: 1.5% 0; float: left; }
	
	header {width: 100%; height: 150px; padding: 5px 0 5px 0;
	border-bottom: none;}
		
	header ul { width:100%; margin:4px 0; clear: left; }
		
	header li {width:50%;   margin: 0; 
	padding: 3px 0 3px 0; background-color:#fc9a1b; color: #fff;
	border-bottom: 1px solid black;}
			
	header a:link, header a:visited  { color: #fff;
	margin: 0; padding:2% 0 0 0; text-align: center;}
	
	header li a:hover {color: #d22029;  } 
	
    	#main {clear: both;}
	h1 {font-size: 26px; }
	h2 {font-size: 21px; }
	h3 {font-size: 17px; }

	#sliders {width: 98%; padding: 1%;}
	#sliders img {width: 96%;}

	#content1 {text-align: left; margin: 0 2% 2% 2%; width: 94%; max-width: 600px;
	padding: 0 2%; }
	#content1 li, #content1 p, #content1 a {font-size: .85em}
	
	#content2 {float: left; padding: 2%; margin:2%; width: 94%;
	max-width: 600px;}
	#content2 img {width: 100%;}
	iframe {max-width: 98%;}
	
	#content3 {float: left; padding: 2%; margin:2%; width: 94%;
	max-width: 600px;}
	
	/* for menu page */
	
	.menu1 {text-align: left; margin: 0 2% 2% 2%; width: 94%; max-width: 600px;
	padding: 0 2%; }
	.menu1 li, .menu1 p, .menu1 a {font-size: .85em}
        .menu1 li {text-align: left;}	
	.menupix {float: left; margin: 3%; clear: left; width: 94%; max-width: 600px;}
	
/* 	.menupix {float: left; width: 94%; max-width: 600px; padding: 2% 0; clear: left;  margin:2%; text-align: center; } */
	.menupix img {width: 100%; padding: 2% 0; }
	#footer {font-size: 12px;  padding: 2% 2% 3% 2%; 
	clear: both; line-height: 140%;}
        
        #management {width: 98%; margin:2% auto; /*border: solid 1px #ff9c05;*/}
    
  .people {width: 30%; }  

}