/*BODY*/
body{
    margin:0;
    padding:0;
    background-color: #eaf9ff;
    font-family: "Raleway", sans-serif;
    font-size: 1vw;
    color:#1f353e;
}

/*MENU*/

#logo{
    max-height: 4em;
    width: auto;
    float: left;
    padding-top: 1vh;
    padding-left: 2vh;
    padding-bottom: 1vh;
}

.menu {
    background-color: #66aecc;
    grid-area: menu;
    overflow: hidden;
    top: 0;
    position: sticky;
    z-index: 2;
}
  
.menu a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding-right: 2vh;
    padding-bottom: 1vh;
    padding-top: 1vh;
    padding-left: 2vh;
    margin-top: 3vh;
    margin-bottom: 3vh;
    text-decoration: none;

}
  
.menu a:hover {
    background-color: #f2f2f2;
    color: #1f353e;
    border-radius: 15px;

}

.menu .icon {
    display: none;  /* add an icon for the menu*/
}

#book-btn{
    
    border: #eaf9ff solid thin;
    border-radius: 10px;
    
}

/*FOOTER*/

.footer{
    background-color: #1f353e;
    color:  #eaf9ff;
    grid-area: footer;
    padding: 3em;
    margin-top: 2em;
}

/*GENERAL CLASSES*/

.center{
    position: relative;
    text-align: center;
}


.title{
    padding-top: 1em;
    font-family: "Bitter", serif;
    font-size: 5vh;
    font-style: italic;
}

button{
    margin-top: 0.5em;
    margin-bottom: 1vh;
    padding: 1vh 2vh;

    background-color: #d68f48;
    border: #d68f48 thin solid;
    color: #eaf9ff;

    text-decoration: none;
    font-size: 2vh;

    border-radius: 10px;

}

button:hover{
    background-color: #66aecc;
    border:#eaf9ff thin solid;
}

p{
    padding-bottom: 1em;
}

a{
    text-decoration: none;
    color: #66aecc;
}


/*SERVICES PAGE*/

.leftie{
    background-color: #d68f48;
    grid-area: leftie;
    width: 10em;
}
.rightie{
    grid-area: rightie;
}

.mini-grid{
    display: grid;
    grid-template-areas: 
    "leftie rightie"
    ;
}

#longhair-pic{
    background-image: url("images/services/longhair2.webp");
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

#barber-pic{
    background-image: url("images/services/barber-pic.webp");
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

#color-pic{
    background-image: url("images/services/color.webp");
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

#treatment-pic{
    background-image: url("images/services/ginger.webp");
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}

#hilite-pic{
    background-image: url("images/services/blonde.webp");
    background-size: cover;
    background-position: center;
    border-radius: 10px;
}


.round{
    border-radius: 10px;
}

.frame{
    border: black thin solid;
    border-radius: 10px;
    padding-left: 15vh;
    padding-right: 15vh;
    height: 22vh;
    
}

.bookframe{
    border: black thin solid;
    border-radius: 10px;
    padding-left: 15vh;
    padding-right: 15vh;
    height: 15vh;
    width: 15vw;
}

.hideframe{
    border: #eaf9ff thin solid;
}


#no-top{
    margin-top: 0px;
    padding-top: 0px;
}

#no-bottom{
    margin-bottom: 0px;
    padding-bottom: 0px;
}

#no-bottom2{
    margin-bottom: 0px;
    padding-bottom: 0px;
}


.service-bold{
    font-weight: bold;
}

.service{
    padding: 2vh;
}

.service div{
    margin: 0px;
}

.beep{
    padding-bottom: 1vh;
}

#services-header{
    grid-area: services;
}

#barber{
    grid-area: barber;
    margin-left: 15vh;
}

#longhair{
    grid-area: longhair;
}

#treatments{
    grid-area: treatments;
    margin-right: 15vh;
}

#highlights{
    grid-area: highlights;
    margin-left: 15vh;
}

#colouring{
    grid-area: colouring;
}

#book-box{
    grid-area: book-box;
    margin-right: 15vh;
    
}

#border{
    border: solid thin #1f353e;
    height: 10em;
    width: 10em;
}

#book-padding{
    padding-top: 3em;
}

#products-header{
    grid-area: products;
}

.product-image{
    width: 260px;
    height: auto;
}

#joico{
    grid-area: joico;
    margin-left: 25vh;
}

#milkshake{
    grid-area: milkshake;
}

#loma{
    grid-area: loma;
    margin-right: 25vh;
}

#verb{
    grid-area: verb;
    margin-left: 25vh;
}

#ag{
    grid-area: ag;
}

#statement{
    grid-area: statement;
    margin-right: 25vh;
}

#layrite{
    grid-area: layrite;
    margin-left: 25vh;
}

#depot{
    grid-area: depot;
}

#blacklight{
    grid-area: blacklight;
    margin-right: 25vh;
}


/* TEAM PAGE */

#team-header{
    grid-area: team;
    margin-bottom: 2vh;
}

#team-sub{
    font-size: 2vh;
}

.image{
    width: 10em;
    height: auto;
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    margin-left: 15vw;
    border-radius: 40px;
}

.whitespace{
    margin-right: 15vw;
}

.gap{
    padding-top: 1vh;
}

#stylist1-img{
    grid-area: stylist1-portrait;
}

#stylist1-text{
    grid-area: stylist1-textbox;
}

#stylist2-img{
    grid-area: stylist2-portrait;
}

#stylist2-text{
    grid-area: stylist2-textbox;
}

#stylist3-img{
    grid-area: stylist3-portrait;
}

#stylist3-text{
    grid-area: stylist3-textbox;
}

#stylist4-img{
    grid-area: stylist4-portrait;
}

#stylist4-text{
    grid-area: stylist4-textbox;
}

#stylist5-img{
    grid-area: stylist5-portrait;
}

#stylist5-text{
    grid-area: stylist5-textbox;
}

#stylist6-img{
    grid-area: stylist6-portrait;
}

#stylist6-text{
    grid-area: stylist6-textbox;
}

#stylist7-img{
    grid-area: stylist7-portrait;
}

#stylist7-text{
    grid-area: stylist7-textbox;
}

#stylist8-img{
    grid-area: stylist8-portrait;
}

#stylist8-text{
    grid-area: stylist8-textbox;
}

#stylist9-img{
    grid-area: stylist9-portrait;
}

#stylist9-text{
    grid-area: stylist9-textbox;
}

#booknow{
    grid-area: booknow;
}

/* HOME PAGE */

#space{
    width: 1px;
}

#space:hover{
    background-color: #66aecc;
}

#banner-text{
    grid-area: banner-text;
    padding-top: 5em;
    padding-bottom: 5em;
    display: none;
}

.banner-title{
    padding-top: 10vh;
    font-family: "Bitter", serif;
    font-size: 7vh;
    font-style: italic;
    color: #eaf9ff;
}

.banner-subtitle{
    padding-top: 2vh;
    margin-bottom: 2vh;
    font-style: italic;
    color: #eaf9ff;
}

#banner-image{
    grid-area: banner-image;
    margin-bottom: 8vh;
}

/* from W3 schools for hero image*/
/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/home/brae.webp");
  
    /* Set a specific height */
    height: 95vh;
  
    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }
  
  /* Place text in the middle of the image */
  .hero-text {
    position: absolute;
    left: 15%;
    top: 25%;
    
    color: white;
  }

#team{
    grid-area: team-home;
    padding-top: 3vh;
}

#team-image{
    grid-area: team-image;
    max-width: 40vw;
    border-radius: 25px;
}

#services{
    grid-area: services;
    padding-top: 3vh;
}

#services-image{
    grid-area: services-image;
    max-width: 40vw;
    border-radius: 25px;
}

#bookhome{
    grid-area: book-home;
    margin-bottom: 2vh;
    margin-top: 2vh;
}

.bigger{
    font-size: 3vh;
    padding-bottom: 1vh;
    font-family: "Bitter", serif;
    font-style: italic;
}

.margins{
    margin-left: 5vw;
    margin-right: 5vw;
    
}


/* BOOK WITH US PAGE */

#book{
    grid-area: book;
}

#book-title{
    padding-top: 1em;
    
}


.one{
    padding-top: 2vh;
    grid-area: one;
}
.two{
    grid-area: two;
}
.three{
    grid-area: three;
}
.four{
    grid-area: four;
}
.other-grid{
    display: grid;
    grid-template-areas: 
    "one"
    "two"
    "three"
    "four";
}

#stylist1-contact{
    grid-area: stylist1-contact;
    margin-left: 15vh;
}

#stylist2-contact{
    grid-area: stylist2-contact;
}

#stylist3-contact{
    grid-area: stylist3-contact;
}

#stylist4-contact{
    grid-area: stylist4-contact;
    /*margin-right: 15vh;*/
}

#stylist6-contact{
    grid-area: stylist6-contact;
}

#stylist5-contact{
    grid-area: stylist5-contact;
    /*margin-left: 15vh;*/
}

#stylist7-contact{
    grid-area: stylist7-contact;
}

#stylist8-contact{
    grid-area: stylist8-contact;
    margin-right: 15vh;
}

#stylist9-contact{
    grid-area: stylist9-contact;
    margin-left: 15vh;
}

#blank1-contact{
    grid-area: blank1-contact;
    margin-right: 15vh;
    background-image: url("images/book/chair.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#blank2-contact{
    grid-area: blank2-contact;
    margin-left: 15vh;
    background-image: url("images/book/haircut.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#blank3-contact{
    grid-area: blank3-contact;
    margin-right: 15vh;
    background-image: url("images/book/hairtrim.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.name{
    padding-top: 1vh;
}

.contact{
    padding-bottom: 1vh;
}



#hours-title{
    padding-top: 1em;
    
    grid-area: hours-title;
}

#days{
    grid-area: days;
}



#hours{
    grid-area: hours;
}


#location-title{
    padding-top: 1em;
    
    grid-area: location-title;
}

#location{
    grid-area: location;
}

#map{
    width: 30vw;
    height: auto;
}



/*GRIDS*/

.grid-services{
    display: grid;
    grid-template-areas:
    'menu menu menu'
    'services services services'
    'barber longhair treatments'
    'highlights colouring book-box'
    'products products products'
    'joico milkshake loma'
    'verb ag statement'
    'layrite depot blacklight'
    'footer footer footer';
    gap: 2rem;
}

.grid-book{
    display: grid;
    grid-template-areas:
    'menu menu menu menu'
    'book book book book'
    'stylist1-contact stylist2-contact stylist3-contact blank1-contact'
    'blank2-contact stylist6-contact stylist7-contact stylist8-contact'
    'stylist9-contact stylist5-contact stylist4-contact blank3-contact'
    'hours-title hours-title location-title location-title'
    'days hours location location'
    'footer footer footer footer';
    gap: 2rem;
}

.grid-team{
    display: grid;
    grid-template-areas:
    'menu menu menu menu'
    'team team team team'
    'stylist1-portrait stylist1-textbox stylist1-textbox stylist1-textbox'
    'stylist2-portrait stylist2-textbox stylist2-textbox stylist2-textbox'
    'stylist3-portrait stylist3-textbox stylist3-textbox stylist3-textbox'
    'stylist4-portrait stylist4-textbox stylist4-textbox stylist4-textbox'
    'stylist5-portrait stylist5-textbox stylist5-textbox stylist5-textbox'
    'stylist6-portrait stylist6-textbox stylist6-textbox stylist6-textbox'
    'stylist7-portrait stylist7-textbox stylist7-textbox stylist7-textbox'
    'stylist8-portrait stylist8-textbox stylist8-textbox stylist8-textbox'
    'stylist9-portrait stylist9-textbox stylist9-textbox stylist9-textbox'
    'booknow booknow booknow booknow'
    'footer footer footer footer';

}


.grid-home{
    display: grid;
    grid-template-areas:
    'menu menu'
    'banner-image banner-image'
    'team-image services-image'
    'team-home services'
    'book-home book-home'
    'footer footer';
}





@media only screen and (max-width: 1300px){

    body{
        font-size: 2vh;
    }

}


@media only screen and (max-width: 1200px){

    #joico, #milkshake, #loma, #verb, #ag, #statement, #layrite, #depot, #blacklight {
        margin-left: auto;
        margin-right: auto;
    }

    #barber, #longhair, #treatments, #highlights, #colouring, #book-box{
        margin-left: 10vw;
        margin-right: 10vw;
    }

    .grid-services{
        display: grid;
        grid-template-areas:
        'menu menu'
        'services services'
        'barber longhair'
        'treatments highlights'
        'colouring book-box'
        'products products'
        /*
        'joico joico'
        'milkshake milkshake'
        'loma loma'
        'verb verb'
        'ag ag'
        'statement statement'
        'layrite layrite'
        'depot depot'
        'blacklight blacklight'*/
        'joico milkshake'
        'loma verb'
        'ag statement'
        'layrite depot'
        'blacklight blacklight'
        'footer footer';
    }
}

@media only screen and (max-width: 900px){

    #joico, #milkshake, #loma, #verb, #ag, #statement, #layrite, #depot, #blacklight {
        margin-left: auto;
        margin-right: auto;
    }

    #barber, #longhair, #treatments, #highlights, #colouring, #book-box{
        margin-left: 10vw;
        margin-right: 10vw;
    }

    .grid-services{
        display: grid;
        grid-template-areas:
        'menu'
        'services'
        'barber'
        'longhair'
        'treatments'
        'highlights'
        'colouring'
        'book-box'
        'products'
        'joico'
        'milkshake'
        'loma'
        'verb'
        'ag'
        'statement'
        'layrite'
        'depot'
        'blacklight'
        'footer';
    }
}


@media only screen and (max-width: 600px){

    #services{
        text-align: center;
    }
    #banner-text{
        display: unset;
        padding-top: 1vh;
        padding-bottom: 1vh;
        padding-left: 2vh;
        background-color:#66aecc;
        margin-bottom: 1vh;
    }
    .hero-text{
        display:none;
    }
    .hero-image{
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/home/braemobile.webp");
    }
   
    #location-title, #hours-title, #book-title{
        font-size: 4vh;
    }

    .menu a {
        margin-top: 3vh;
        margin-bottom: 3vh;
    }

    #banner-image{
        margin-bottom: 0vh;
    }

    .banner-title{
        padding-top: 2vh;
    }

    .image{
        margin-left: 15vw;
        width: 60vw;
        text-align: center;

    }

    .whitespace{
        margin-left: 5vw;
        margin-right: 5vw;
    }

    .gap2{
        margin-bottom: 4vh;
    }

    #team-image{
        max-width: 95vw;
    }

    #services-image{
        max-width: 95vw;;
    }

    #joico, #milkshake, #loma, #verb, #ag, #statement, #layrite, #depot, #blacklight {
        margin-left: auto;
        margin-right: auto;
    }

    #barber, #longhair, #treatments, #highlights, #colouring, #book-box{
        margin-left: 10vw;
        margin-right: 10vw;
    }

    #book-btn{
        border: none;
    }

    #stylist1-contact, #stylist4-contact, #stylist5-contact, #stylist8-contact{
        margin-left: auto;
        margin-right: auto;

    }

    .bookframe{
        margin-left: auto;
        margin-right: auto;
        width: 30vw;
    }

    #map{
        width: 70vw;
    }

  


    .grid-services{
        display: grid;
        grid-template-areas:
        'menu'
        'services'
        'barber'
        'longhair'
        'treatments'
        'highlights'
        'colouring'
        'book-box'
        'products'
        'joico'
        'milkshake'
        'loma'
        'verb'
        'ag'
        'statement'
        'layrite'
        'depot'
        'blacklight'
        'footer';
    }

    .grid-team{
        display: grid;
        grid-template-areas:
        'menu'
        'team'
        'stylist1-portrait'
        'stylist1-textbox'
        'stylist2-portrait'
        'stylist2-textbox'
        'stylist3-portrait'
        'stylist3-textbox'
        'stylist4-portrait'
        'stylist4-textbox'
        'stylist5-portrait'
        'stylist5-textbox'
        'stylist6-portrait'
        'stylist6-textbox'
        'stylist7-portrait'
        'stylist7-textbox'
        'stylist8-portrait'
        'stylist8-textbox'
        'stylist9-portrait'
        'stylist9-textbox'
        'booknow'
        'footer';  
    }

    .grid-home{
        display: grid;
        grid-template-areas:
        'menu'
        'banner-image'
        'banner-text'
        'team-image'
        'team-home'
        'services-image'
        'services'
        'book-home'
        'footer';
    }

   

    .grid-book{
        display: grid;
        grid-template-areas:
        'menu menu'
        'book book'
        'stylist1-contact stylist2-contact'
        'stylist3-contact stylist4-contact'
        'stylist5-contact stylist6-contact'
        'stylist7-contact stylist8-contact'
        'stylist9-contact stylist9-contact'
        'hours-title hours-title'
        'days hours'
        'location-title location-title'
        'location location'
        'footer footer';
        gap: 2rem;
    }

    #blank1-contact, #blank2-contact, #blank3-contact{
        display: none;
        background-image: none;
    }

    #stylist9-contact{
        margin-left: auto;
    }
   


}


/* media queries for menu, these are copied from W3 schools*/

@media screen and (max-width: 600px) {
    .menu a {display: none;}
    .menu a.icon {
      float: right;
      display: block;
    }
}
  
@media screen and (max-width: 600px) {
    .menu.responsive {position: sticky;}
    .menu.responsive .icon {
      position: absolute;
      right: 0;
      top: 0;
}

.menu.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
}  

@media screen and (min-width: 600px) {
    .frame{
        width: 40vh;
    }
}