/*****
TYPOGRAPHY
*****/
@font-face{
    font-family: 'honestyregular';
    src: url('../fonts/honesty-webfont/honesty-webfont.woff2') format('woff2'),
         url('../fonts/honesty-webfont/honesty-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face{
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?wwu9kg');
  src:  url('../fonts/icomoon.eot?wwu9kg#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?wwu9kg') format('truetype'),
    url('../fonts/icomoon.woff?wwu9kg') format('woff'),
    url('../fonts/icomoon.svg?wwu9kg#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-twitter:before {
  content: "\ea96";
}
.icon-pinterest2:before {
  content: "\ead2";
}
.icon-sphere:before {
  content: "\e9c9";
}

*{
    font-weight: normal;
}
p, h2, h3, a, #page-nav label{
    font-family: 'Montserrat', sans-serif;
}
.button, nav a, h1, .stylists h2{
    font-family: 'honestyregular', cursive, fantasy;
    text-transform: lowercase;
}
.button, nav a{
    font-size: 2.5em;
}
section h1, .stylists h2{
    font-size: 5em;
}
section h1{
    padding-top: 50px;
}
.stylists h1, .stylists img{
    text-transform: lowercase;
}
.pricelist h2, #page-nav label, .products h2{
    text-transform: uppercase;
}
/*****
DESKTOP
*****/
header, footer{
    background-image: url("../img/header-img.png"); /* The image used */
    background-color: #c0c0c0; /* Used if the image is unavailable */
    background-position: top; /* Position the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
}
header{
    padding-bottom: 20px;
}
footer{
    background-position: bottom;
}
header img{
    max-width: 15%;
    margin: 20px;
}
header img, footer img{
    border-radius: 50%;
}
header img, .stylists img, .pricelist img{
    border: 1px solid #c0c0c0;
}
header p{
    margin: 0px auto 20px;
    max-width: 900px;
    font-size: 2em;
}
nav{
    float: right;
    padding: 25px 10px 0px 0px;
}
ul{
    list-style-type: none;
    padding: 0;
}
nav li{
    display: inline;
    padding: 20px;
}
nav a:hover{
    color: #000;
    border-bottom: 5px solid #D2B48C;
}
a{
    color: #000;
    text-decoration: none;
}
a:hover, .news a:hover{
    color: #D2B48C;
}
main{
    background-image: url("../img/triangle-mosaic.png"); /* The image used */
    background-color: #cccccc; /* Used if the image is unavailable */
    background-position: center; /* Center the image */
    background-repeat: repeat; /* Do not repeat the image */
}
.button{
    background-color: #707070;
    border: none;
    color: #FFF;
    padding: 10px 32px;
    text-decoration: none;
    display: inline-block;
    width: 350px;
    margin: 0 5px;
}
section{
    max-width: 75%;
    margin: 0 auto;
    padding-bottom: 20px;
}
section h1{
    margin: 0;
}
.news img{
    max-width: 500px;
}

.logo-block img{
    max-width: 300px;
    padding: 0px 30px;
}

.news, .pricelist, .stylists, .services, .products, .contact, .button, header p, footer{
    text-align: center;
}
.stylists img, .pricelist img{
    max-width: 300px;
}
.stylists img, .pricelist img, .profile{
    border-radius: 50%;
}
.profile{
    max-width: 100%;
}
.stylists h2{
    position: relative;
    top: -135px;
    left: 150px;
    color: #D2B48C;
}
.stylists a:hover h2, .news a{
    color: #707070;
}

.ig-link span{
    padding-right: 10px;
    vertical-align: middle;
}


.products blockquote{
    padding-bottom: 50px;
}

.order-products{
    padding-top: 100px;
}

.order-products h2{
    font-size: 1.3em;
}

.productline{
    padding-bottom: 100px;
}

.about{
    max-width: 60%;
}

.contact img{
    max-width: 60%;
}
footer{
    background-color: #707070;
    color: #FFF;
    min-width: 100%;
    margin: 0px;
    padding: 10px 0;
}
footer img{
    max-height: 200px;
}
footer span{
    font-size: 1.5em;
    color: #FFF;
    padding: 0 10px;
}
footer span:hover{
    color: #D2B48C;
}
.social{
    padding-top: 80px;
}
.smallprint p{
    font-size: 1em;
}
/*****
NAVIGATION
*****/
/* Hide Hamburger */
#page-nav label, #hamburger {
  display: none;
}
/* [ON SMALL SCREENS] */
@media screen and (max-width: 796px){
  /* Show Hamburger */
  #page-nav label {
    display: block;
    color: #fff;
    background: #707070;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
    margin: 0 20px;
  }
  #page-nav li a{
      font-size: 2.5em;
  }
  /* Break down menu items into vertical */
  #page-nav ul li {
      text-align: center;
      display: block;
  }
  /* Toggle show/hide menu on checkbox click */
  #page-nav ul {
    display: none;
  }
  #page-nav input:checked ~ ul {
    display: block;
  }
}

@media screen and (max-width: 957px){
    nav li a {
        font-size: 1.7em;
    }


}

 @media screen and (min-width: 862px) {
        .fixed-nav{
            background-color: #707070;
            color: #FFF;
            max-height: 80px;
            position: fixed;
            min-width: 100%;
            z-index: 1;
            padding: 0;
        }
        .fixed-nav img{
            max-width: 150px;
            position: relative;

        }
        .fixed-nav nav{
            padding: 0;
        }
        .fixed-nav a{
            color: #FFF;
        }
        .fixed-main{
            padding-top: 150px;
        }
}
/*****
BREAKPOINTS
*****/
@media screen and (max-width: 1400px){
    /* 2 col stylists */
}

@media screen and (max-width: 1200px){
    header p{
        font-size: 1.5em;
    }
}

@media screen and (max-width: 1152px){
    .button{
        margin-bottom: 10px;
    }
    header p{
        max-width: 60%;
    }
}

@media screen and (max-width: 900px){
    /* 1 col directions */
}

@media screen and (max-width: 868px){
    /* button padding */
}

@media screen and (max-width: 861px){
    .profile{
        padding-top: 20px;
    }
}

@media screen and (max-width:796px){
    header p{
        font-size: 1.2em;
        padding-top: 20px;
    }
    /* mobile nav */
    header{
        display: flex;
        flex-direction: column;
    }
    header img{
        max-width: 30%;
    }

}

@media screen and (min-width: 501px){
    .about a{
        display: none;
    }

    .covidbutton {
        display: none;
    }
}
@media screen and (max-width: 501px){
    .about span{
        display: none;
    }
    .stylists h2{
        position: inherit;
    }
    .covid{
        display: none;
    }
}