/*index - this does the sticky navigation (top) and the header having an image beside the text*/
* {
 box-sizing:border-box;
}
body {
  background-image: url("bubbles.png");
  background-repeat: repeat;
  font-family: Arial;
  margin:0;
    }
img {
    max-width:100%;
    }
.box {
  border: 1px;
  padding: 10px;
    }
    
header {
    grid-area:header;
    padding: 1%;
    background:rgba(255,255,255,.3);
    }

.headerpic {
    grid-area:headerpic;

    }
.headertext {
   grid-area:headertext;
    text-align:center;

    }
.social {
  grid-area:social;

}
.logo {
  min-height:6em;
}
figure {
  margin:0;
}
.figure1 {
   text-align:center;
}
.facebook {
 max-height:3em;
 min-width:1.5em;
 border-radius: 10%;
 margin-left:1em;
 margin-right: 2em;
 margin-top:1em;
}
.bbb {
  max-height:3em;
}
.headerwrapper {
    display:grid;
    grid-template-columns:1.3fr 2fr 1fr;
    grid-template-areas:
    "headerpic headertext social"
    }
header h1 {
     font-size:6vw;
     font-family:Arial;
     text-shadow: 2px 2px 5px black;
     margin: 2px 0;
    }
header h4 {
    font-size:3vw;
    font-family:Arial;
    color:navy;
    text-shadow: 2px 2px 5px black;
    margin:1em 0 0 0;
    }
    
header a {
    text-decoration:none;
    color:white;
    }
header li {
  color: navy;
  font-size: 20px;
  
}
header p {
  text-align: right;
  color: navy;
  font-size: 15px;
}
nav {
    background-color:#B21515;
    font-size:125%;
    grid-area:nav;
    text-align:center;
    padding:.5em;
    margin:0;
    /*Lines 102 to 105 make the menu stick to the top*/
    position: -webkit-sticky;
    position: sticky;
    top:0;
    z-index:999;
}

main {
    background:rgba(255,255,255,.3);
    color:navy;
    grid-area:main;
  
    }
main a {
    
    font-weight:bold;
}
.button {
 color: navy;
}
h2 {
  font-family: Arial;
}
aside {
    background:rgba(255,255,255,.3);
    color: navy;
    grid-area:aside;
    }
aside a {
 color: navy;
 font-weight:bold;
}
/*Slideshow*/
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
65% { left: -200%; }
70% { left: -300%; }
85% { left: -300%; }
100% { left: -400%; }
}
div#slider { overflow: hidden; }
div#slider figure img { width: 20%;}
div#slider figure {
  position: relative;
  z-index:1;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

.diagonal-box {
 background-image: linear-gradient(45deg,#000080,#000047,#770808, #B21515);
  transform:skewY(-11deg);
  position:relative;
  max-height:15em;
  top:110px;
  margin-top:30px;
}

.storewrap {
  max-width:50em;
  margin:10px auto;
  transform: skewY(0deg);
  font-size:2em;
  text-align:center;
  color:white;
  padding:10px;
}
.storewrap a{
  color:white;
}
.title {
 text-shadow: 7px 7px 5px black;
  transform:skewY(-11deg);
  position:absolute;
  max-height:20em;
  top:200px;
  margin-top:25px;
}
.content {
  max-width:50em;
  margin:10px auto;
  transform: skewY(0deg);
  font-size:150px;
  text-align:center;
  color:navy;
  padding:10px;
}

footer {
    background:rgba(255,255,255,.3);
    color:navy;
    text-align:center;
    grid-area:footer;
    }


   
/*--------Mobile first - no media query needed until the screen is larger than 480px---------*/
.wrapper1 { /*index.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav"
    "header"
    "main"
    "aside"
    "footer";
  }
 .wrapper3 { /*location.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav"
    "header"
    "main"
    "footer";
  }
  
  
/*This stuff is for the hamburger menu*/
.toggleNav {
    display:grid; /*This is what allows the hamburger icon and "Menu" to display*/
    }

#flex-nav ul {
    display: none; /*jQuery toggles the nav from to this class to the .open when clicked*/
    text-align:center;
    list-style: none;
    margin: 0;
    padding: 0;
    }
 
#flex-nav ul.open { /*.open is the class that gets toggled when clicked (with help from the jQuery code)*/
    display:grid;
    }
    
#flex-nav li {
    padding-left:10px;
    padding-top:10px;
    }
#flex-nav a {
    color:white;
    text-decoration:none;
    font-weight:bold;
    }
#flex-nav a:hover {
    color:white;
    }

nav ul {
 list-style-type: none;
}
/*This stuff is to make my navigation go horizontal on full screen*/
.first {
    grid-area:first;
    margin-left:0;
}
.second {
    grid-area:second;
}
.third {
    grid-area:third;
}
.fourth {
    grid-area:fourth;
}
.fifth {
    grid-area:fifth;
}
#navwrapper {
    display:grid;
    grid-template-areas:
    "first"
    "second"
    "third"
    "fourth"
    "fifth";
    }
    
#content-desktop {
  display:none;
}
#content-mobile {
  display:grid;
}
.nestedgrid{
display:grid;
grid-template-areas:
"div1 div2 div3 div4";
}
/*---------------------Tablet media query----------------------------*/
@media only screen and (min-width: 480px)  {
.wrapper1 { /*index.html*/
    grid-template-columns: 45% auto;
    grid-template-areas:
    "nav nav"
    "header header"
    "main aside"
    "footer footer";
    }
 .wrapper3 { /*location.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav nav"
    "header header"
    "main main"
    "footer footer";
  }
  
#content-desktop {
  display:none;
}
#content-mobile {
  display:grid;
}
.facebook {
 max-height:4em;
 min-width:2em;
 margin-right:.25em;
 margin-bottom:0;
 margin-top:2em;
}
}
/*---------------------Desktop media query----------------------------*/
@media only screen and (min-width: 1100px)   {
     
.wrapper1 { /*index.html*/
    grid-template-columns: 60% auto;
    grid-template-areas:
    "nav nav"
    "header header"
    "main aside"
    "footer footer";
    }
     .wrapper3 { /*location.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav nav"
    "header header"
    "main main"
    "footer footer";
  }

#navwrapper {
    display:grid;
    grid-template-areas:
    "first second third fourth fifth";
    }
    
.toggleNav {
    display: none; /*Makes the hamburger icon with the word "Menu" to disappear at this screen size*/
  }
  
#flex-nav ul {
    display:grid;
    text-align:center;
}
#flex-nav li {
    padding-top:10px;
}
#content-desktop {
  display:grid;
}
#content-mobile {
  display:none;
}
.facebook{
  margin-top:1em;
  margin-right:0;
}
}