/*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: 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;
}
main h1 {
  text-align: center;
  margin:30px;
}
main h2 {
 font-weight:bold;
 text-align:center;
}
main h3 {
  font-weight: bold;

}

.store{
  border-radius:10px;
  margin:2em;
}
.storewrap p{
font-size:25px;
}
.location{
  text-align:center;
}
.map{
  margin:100px;
}

h2 {
  font-family: Arial;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


.gallery {
  
}

.gallery-cell {
  width: 86%;
  height:25rem;
  margin-right: 10px;
 background: rgba(255,255,255,.5);
  counter-increment: gallery-cell;
  display: grid;
  grid-template-columns:60% 40%;
  grid-template-areas:
  "left right";
 
}
.left {
  grid-area:left;
font-size:.95em;
}
.right{
  grid-area:right;

   margin:auto;
}
.right img {
  padding-top:2.5em;
  
  max-width:90%;
}
.gallery-cell p{
  font-size:.6em;
}
.gallery-cell li{
  font-size:.6em;
}
/* cell number */
.gallery-cell:before {
  display: block;
  text-align: center;
  margin:5px;
  line-height: 200px;
  font-size: 80px;
  color: navy;
  
  
}
.gallery-cell h2{
  color:navy;
}
.gallery-cell ul{
  color:navy;
  
}
.gallery-cell p{
  color:navy;
  font-weight:bold
}

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;
}

/* Location */

.storewrap {
  position: relative;

}

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";
  }
 .wrapper2 { /*services.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";
  }
  .gallerywrapper {
  display: grid;
  justify-items:center;
  grid-gap:.5em;
  align-items:end;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}
  
/*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";
    }
    .wrapper2 { /*services.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav nav"
    "header header"
    "main main"
    "aside aside"
    "footer footer";
  }
  .wrapper3 { /*location.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav nav"
    "header header"
    "main main"
    "footer footer";
  }
 .gallery-cell {
  width: 86%;
  height:35rem;
  margin-right: 10px;
 background: rgba(255,255,255,.5);
  counter-increment: gallery-cell;
}
.gallery-cell p{
  font-size:1em;
  margin:10px;
}
.gallery-cell li{
  font-size:1em;
}
#content-desktop {
  display:none;
}
#content-mobile {
  display:grid;
}
.facebook {
 max-height:4em;
 min-width:2em;
 margin-right:.25em;
 margin-bottom:0;
 margin-top:2em;
}
.gallery-cell {
  width: 86%;
  min-height: 400px;
  margin-right: 10px;
 background: rgba(255,255,255,.5);
  counter-increment: gallery-cell;
}
}
/*---------------------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";
    }
    .wrapper2 { /*services.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav nav"
    "header header"
    "main main"
    "aside aside"
    "footer footer";
  }
.wrapper3 { /*location.html*/
    display: grid;
    margin:0;
    grid-gap: .5em;
    grid-template-areas:
    "nav nav"
    "header header"
    "main main"
    "footer footer";
  }
.gallery-cell {
  width: 86%;
  height:30rem;
  margin-right: 10px;
 background: rgba(255,255,255,.5);
  counter-increment: gallery-cell;
}
.gallery-cell p{
  font-size:1em;
}
.gallery-cell li{
  font-size:1em;
}

#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;
}
.gallery-cell {
  width: 86%;
  min-height: 400px;
  margin-right: 10px;
 background: rgba(255,255,255,.5);
  counter-increment: gallery-cell;
}
}