/* CSS FOR ALL SCREEN RESOLUTIONS (MOBILE IN PORTRAIT) AND ABOVE */

/* 

Color Palette

#3B20A9 dark blue

rgba(102,102,102,0.5) Grey, this color adds the a at the end which stands for "Alpha". The alpha number allows us to adjust the opacity of the color so that it appears transperant in the browser.

Lightgrey is used to distinguish the columns from the background space.

*/

body {
    background-color: white;
    color: black;
    font-size: 16px;
    font-family: 'Open Sans', sans-serif;
}

header, footer {
    padding: 1em;
}

/* This effect the primary content below the hero image and above the footer */
section {
    margin: 1em;
}

/* Styling for the appearance of the footer and content */
footer {
    background-color: #3B20A9;
}

footer img {
    padding: 0 12px 0;
}

footer nav {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

/* This effects the main navigation at the top of the page */
nav {
    padding: .2em;
    font-size: 1em;
    background-color: #3B20A9;
}

nav a {
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}

ul {
    margin-left: 1em;
}

nav li {
    display: inline-block;
    margin-right: 2em;
}

/* Header tags */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'Bitter', serif;
}

h2 {
    background-color: #3B20A9;
    padding: .2em .2em .2em .5em;
    line-height: 1.75em;
}

h3 {
    padding: 0 .2em .2em .2em;
    display: inline;
    background-color: rgba(102,102,102,0.5);
}

h1, h2, h3, h4, h5, h6, ul li {
    margin: 1em 0;
}

p {
    padding: 1em 1em 1em;
}

h1 {
    font-size: 2em;
}

header {
    /* Hero Image at the top of the page */
    background-image: url(../images/food_carts.jpg);
    background-size: cover;
    height: 45vh;
    padding-top: 4em;
}

/* hamburger menu used for navigatoin at smaller resolutions*/

.header {
  background-color: #3B20A9;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 3;
}
 
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #3B20A9;
}
 
.header li a {
  display: block;
  padding: 20px 20px;
  text-decoration: none;
}
 
.header li a:hover {
  background-color: #f4f4f4;
}
 
.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}
 
.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}
 
.header .menu-icon .navicon {
  background: #fff;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}
 
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #fff;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}
 
.header .menu-icon .navicon:before {
  top: 5px;
}
 
.header .menu-icon .navicon:after {
  top: -5px;
}

.header .menu-btn {
  display: none;
}
 
.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}
 
.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}
 
.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}
 
.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}
 
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* End of Hamburger Menu */

#container {
    margin: 0px auto;
    background-color: lightgray;
}

/* Juan, I tried this but it was making a large white box appear above all the tags except the map
#about:before,
#menu:before,
#order:before,
#map:before,
#locations_hours:before {
    display: block;
    content: " ";
    margin-top: -70px;
    height: 70px;
    visibility: hidden;
} */

/* Styling for food menu content */
#menu {
    background-color: white;
}

#menu ul li {
    padding-bottom: 1em;
}

/* These add a background images to the apprpriate sub-header or h3 in the food menu */
#meat {
    background-image: url(../images/burrito.jpg);
    height: 4em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover; 
}

#veggies {
    background-image: url(../images/veggies.jpg);
    height: 4em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#rice {
    background-image: url(../images/rice.jpg);
    height: 4em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#toppings {
    background-image: url(../images/burrito_toppings.jpg);
    height: 4em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Styling for remaining content catagories */
#about{
    background-color: white;
}

#locations_hours{
    background-color: white;
}

#map {
    background-color: white;
}

#order {
    background-color: white;
}

/* Effects the phone number link */
#order a {
    text-decoration: none;
}

/* The following code effects the responsive grid */
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/* Mobile number link. This is the styling to display a clickable phone number at mobile and tablet resolutions. The block attribute makes the clickable number visible while none makes the text version invisible at these sizes. They switch places at larger resolutions.*/
.mobile_number {
    display: block;
}

.text_number {
    display: none;
}

/* 
THE NEXT SERIES OF MEDIA QUERIES DENOTED BY min-widths INTRODUCE ADDITIONAL CSS
FOR INCREASINGLY LARGER SCREENS.

WE ARE CONCERNED NOT WITH THE min-width NUMERICAL VALUES OF THE BREAKPOINTS THEMSELVES,
BUT WHAT HAPPENS AFTER THOSE BREAKPOINTS.
*/

/* 
CSS FOR MOBILE LANDSCAPE (480PX) AND ABOVE.
THIS MEDIA QUERY CONTAINS ADDITIONAL NEEDED CSS AND EXCEPTIONS TO THE CSS RULES SET ASIDE PREVIOUSLY.
*/

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

@media screen and (min-width: 321px) {

    header {
        /* height: 30vh; */
        background-position: center 80%;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    h2 {
        font-size: .8em;
    }
    
}

/* Additional code needed for the responsive grid to work */
/*  GRID OF THREE  */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 32.26%; }

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}

/* 
CSS FOR TABLET IN PORTRAIT ORIENTATION (768PX) AND ABOVE. 
CONTAINS ADDITIONAL NEEDED CSS AND EXCEPTIONS TO THE CSS RULES SET ASIDE PREVIOUSLY. 
*/

@media screen and (min-width: 481px) {

    body {
        font-size: 18px;
    }
    
}

/* 
CSS FOR TABLET IN LANDSCAPE ORIENTATION (1024PX) AND ABOVE. 
CONTAINS ADDITIONAL NEEDED CSS AND EXCEPTIONS TO THE CSS RULES SET ASIDE PREVIOUSLY. 
*/

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

    nav {
        font-size: .75em;
    }
    
    /* Mobile number link */
    .mobile_number {
        display: none;
    }

    .text_number {
        display: block;
    }
    
}

/* 
CSS FOR A LAPTOP (1440PX) AND ABOVE. 
CONTAINS ADDITIONAL NEEDED CSS AND EXCEPTIONS TO THE CSS RULES SET ASIDE PREVIOUSLY. 
*/

@media screen and (min-width: 1025px) {
    
    h2 {
        font-size: 1em;
    }

}