{
  margin:0px;
  padding:0px;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Barlow', sans-serif;
  color:#202020;
  font-size:16px;
  margin: 0px;
}

h1{
  margin: 0 0 40px;
  font-family: 'Open Sans', sans-serif;
  font-size: 2.5em;
}

h3{
  margin: 0 0 20px;
}

p{
  margin: 0 0 20px;
  line-height: 1.5em;
}

a{
  text-decoration: none;
  transition: .4s;
  color: #1091d5;
}

a:hover {
  color: black;
}

#services-hero {
  background-image: url('../images/services-hero.jpg') !important;
}

@media (min-width: 1100px) {

  .container {
    width:1100px;
    margin:0 auto;
  }

  .content{
    padding: 80px 0;
  }

  /*** HEADER DESKTOP STYLES ***/

  #navContainer{
    background: white;
    width: 100%;
    transition: .6s;
    position: fixed;
    top: 0;
    min-height: fit-content;
    z-index: 100;
    padding: 15px 0;
    border-bottom: 1px solid #1091d5;
  }

  #navContainer .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #navContainer img{
    width: 80px;
    height: auto;
    margin-top: 5px;
  }

  .topnav{
    width: 650px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .topnav a{
    font-weight: 900;
    text-transform: uppercase;
    color: #202020;
    padding: 8px 16px;
  }

  .topnav a:hover{
    color: #1091d5;
  }

  a.book-btn{
    background: #1091d5;
    color: white;
    border: 2px solid #1091d5;
    padding: 12px 16px;
    text-transform: uppercase;
    font-weight: 900;
  }

  a.book-btn:hover{
    color: #1091d5;
    background: white;
  }

  #myTopnav a.icon{
    display: none;
  }

  /***HERO DEKSTOP STYLES***/

  #homepage-hero{
    background: url('images/hero.jpg') no-repeat  center;
    background-size: cover;
    height: 700px;
    margin-top: 120px;
    text-transform: uppercase;
    color: white;
  }

  #homepage-hero h1{
    font-size: 4em;
    font-weight: 900;
    margin-bottom: 40px;
  }

  #homepage-hero h1 img{
    margin-left:20px;
  }

  #homepage-hero .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  #homepage-hero p{
    font-size: 2em;
    font-weight: 300;
    margin-bottom: 40px;
  }

  #homepage-hero a{
    color: white;
    font-size: 2em;
    font-weight: bold;
    padding: 10px 15px;
  }

  #homepage-hero a:hover{
    color: #1091d5;
    background-color: white;
  }

  #homepage-hero i{
    color: #1091d5;
  }

  #homepage-hero2{
    background: url(images/hero2.jpg) no-repeat center;
    background-size: cover;
    color: white;
    height: 700px;
  }

  #homepage-hero2 .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #hero2-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: white;
  }

  #hero2-text p {
    width:500px;
  }

  #hero2-text h1,
  #hero2-text h3{
    text-transform: uppercase;
  }

  #hero2-text h1{
    color: #3e3e3e;
    font-weight: 900;
    font-size: 5em;
    margin-bottom: -55px;
/*    margin-left: 130px;*/
    z-index: 0;
  }

  #hero2-text h3{
    font-size: 3em;
    color: #1091d5;
    z-index: 1;
  }

  #hero2-text p{
    font-size: 1.15em;
  }

  #hero2-icon-container{
    display: flex;
    justify-content: space-between;
    align-items: stretch;  
    color: white; 
    margin-top: 60px; 
  }

  .hero2-icon{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 300px;
  }

  .hero2-icon img{
    margin-right: 20px;
  }

  .icon-text{

  }

  .hero2-icon h3{
    text-transform: uppercase;
    font-size: 1.5em;
    margin-bottom: 5px;
  }

  .hero2-icon p{
    font-size: 1.15em;
  }

  .hero2-icon span{
    color: #1091d5;
    text-transform: uppercase;
  }

  #homepage-info .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .homepage-info-col{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 45%;
  }

  .homepage-info-col h3{
    color: #1091d5;
    text-transform: uppercase;
    font-size: 2.5em;
  }

  .homepage-info-col p{
    font-size: 1.15em;
  }

  .col1 p{
    margin-bottom: 40px;
  }

  .col1 a{
    font-size: 1.15em;
  }

  .col2{
    width: 48%;
    flex-flow: row wrap;
    justify-content: space-between;
    height: 316px;
  }

  .col2 h3{
    width: 100%;
  }

  .col2 p{
    width: 48%;
  }

  #homepage-feed{
    background: #202020;
  }

  #homepage-feed h1{
    color: #3e3e3e;
    font-weight: 900;
    font-size: 5em;
    margin-bottom: -45px;
    z-index: 0;
    text-transform: uppercase;
  }

  #homepage-feed h3{
    font-size: 3em;
    color: #1091d5;
    z-index: 1;
    text-transform: uppercase;
  }

  #homepage-feed-img{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 0 20px;
  }

  #homepage-feed-img img{
    width: 190px;
    height: auto;
  }

  /***SUBPAGE DESKTOP STYLES***/

  .subpage-hero{
    background: url(../images/hero.jpg) no-repeat center;
    background-size: cover;
    height: 200px;
    color: white;
    margin-top: 120px;
  }

  .subpage-hero .container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

  .subpage-hero h1{
    font-size: 2.5em;
    text-transform: uppercase;
    font-weight: 900;
  }

  /***FOOTER DEKSTOP STYLES***/

  footer {
    background-color: #202020;
    padding: 40px 0 80px;
    color: white;
  }

  footer .container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  footer h3{
    font-size: 2em;
    text-transform: uppercase;
  }

  #footer-contact{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  #footer-contact{
    width: 300px;
  }

  #footer-contact a{
    color: white;
  }

  #footer-contact a:hover{
    color: #1091d5;
  }

  #footer-contact i{
    color: #1091d5;
  }

  #footer-contact p{
    margin-left: 60px;
  }

  a.footer-email-link{
    border-bottom: 1px solid #1091d5;
  }

  #footer-newsletter{
    width: 450px;
  }

  #footer-newsletter a {
    color:#1091d5;
    font-size: 32pt;
    display: inline-block;
    margin-right: 5px;
    text-decoration: none;
  }

  #footer-newsletter a:hover {
    color: white;
  }

  .newsletter-form{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 20px;
  }

  .newsletter-form input{
    height: 60px;
    text-transform: uppercase;
    color: white;
  }

  .newsletter-form input[name=email]{
    padding: 0 15px;
    background-color: #202020;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    width: 70%;
  }

  .newsletter-form input[type=submit]{
    background-color: #1091d5;
    width: 30%;
    border: 1px solid #1091d5;
    padding: 0 15px;
    height: 64px;
    margin-left: -2px;
    transition: .4s;
    font-weight: bold;
  }

  .newsletter-form input[type=submit]:hover{
    background-color: white;
    color: #202020;
    cursor: pointer;
  }

  #sub-footer{
    color: white;
    padding: 20px 0;
    background: #202020;
    border-top: 1px solid #3e3e3e;
  }

  #sub-footer a{
    color: white;
    border-bottom: 1px solid #1091d5;
  }

  #sub-footer a:hover{
    color: #1091d5;
  }


}

@media (max-width: 1090px) {

  .container {
    width: 100%;
    margin:0 auto;
  }

  .content{
    padding: 40px 20px;
  }

  /***** HEADER MOBILE STYLES *****/

  #navContainer{
    width: 100%;
    background-color: white;
    transition: 0.4s;
    position: fixed;
    top: 0;
    z-index: 100;
    border-bottom: 2px solid #202020;
  }

  #nav{
    padding:0px 10px 0;
    margin-top: 5px;
    height: fit-content;
  }

  #navContainer img{
    width: 70px;
    height: auto;
    margin: 10px 0 0 20px;
  }

  /* Links inside the navbar */
  .topnav a { 
    float: left;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #202020;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  /* Add a background color to navbar links on hover */
  .topnav a:hover{
    background-color: #1091d5;
    color:#fff;
  }

  /* When the screen is less than 1099 pixels wide, hide all links. 
  Show the link that should open and close the topnav (.icon) */
  .topnav a{
    display:none;
  }

  .topnav a.icon {
    display: block;
    position: absolute;
    font-size: 30px;
    top: 14px;
    right: 0;
    float: right;
    margin: 0px 10px 10px 0;
    color: #202020;
    transition: unset;
  }

  .topnav a.icon:hover{
    background-color:transparent;
  }

   /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
  This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  .topnav.responsive {
    position: relative; 
    clear:both;
    margin-bottom:30px;
  }
    .topnav.responsive a.icon {
      position: absolute;
      right: -10px;
      top: -79px;
      border-bottom:none;
      transition: unset;
      /*display: none;*/
    }

    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
      border-bottom:1px solid #1091d5;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }

    a.book-btn{
      color: #1091d5;
      /*background-color: #202020;*/
    }

    a.book-btn:hover{
      color: white;
    }

    /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
    .show {display:block;}

    .topnav.responsive,
    #nav {
      animation: fadeIn .5s;
      -webkit-animation: fadeIn .5s;
      -moz-animation: fadeIn .5s;
      -o-animation: fadeIn .5s;
      -ms-animation: fadeIn .5s;
    }
    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @-moz-keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }


  /*** HERO MOBILE STYLES ***/

  #homepage-hero{
    background: url('images/hero.jpg') no-repeat center;
    background-size: cover;
    min-height: 500px;
    margin-top: 93px;
    color: white;
    text-align: center;
    text-transform: uppercase;
    padding: 60px 20px;
  }

 #homepage-hero h1{
    font-size: 2.5em;
    font-weight: 900;
    margin-bottom: 40px;
  }

  #homepage-hero img{
    width: 100px;
    height: auto;
  }

  #homepage-hero .container{
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #homepage-hero p{
    font-size: 1.5em;
    font-weight: 300;
    margin-bottom: 40px;
  }

  #homepage-hero a{
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    padding: 10px 15px;
  }

  #homepage-hero a:hover{
    color: #1091d5;
    background-color: white;
  }

  #homepage-hero i{
    color: #1091d5;
  }

  #homepage-hero2{
    background: url(images/hero2.jpg) no-repeat center;
    background-size: cover;
    color: white;
    padding: 60px 20px;
  }

  #homepage-hero2 .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #hero2-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
  }

  #hero2-text h1,
  #hero2-text h3{
    text-transform: uppercase;
  }

  #hero2-text h1{
    color: #3e3e3e;
    font-weight: 900;
    font-size: 3em;
    margin-bottom: 10px;
/*    margin-left: 100px;*/
    text-align: center;
    line-height: 1.2em;
    z-index: 0;
  }

  #hero2-text h3{
    font-size: 2em;
    color: #1091d5;
    z-index: 1;
  }

  #hero2-text p{
    font-size: 1.15em;
  }

  #hero2-icon-container{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;  
    color: white; 
    margin-top: 40px; 
  }

  .hero2-icon{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    margin: 20px;
  }

  .hero2-icon img{
    margin-right: 20px;
    width: 47px;
  }

  .icon-text{

  }

  .hero2-icon h3{
    text-transform: uppercase;
    font-size: 1.5em;
    margin-bottom: 5px;
  }

  .hero2-icon p{
    font-size: 1.15em;
  }

  .hero2-icon span{
    color: #1091d5;
    text-transform: uppercase;
  }

  #homepage-info {
    padding-top: 60px;
    padding-bottom: 0px;
  }

  #homepage-info .container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .homepage-info-col{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 60px;
  }

  .homepage-info-col h3{
    color: #1091d5;
    text-transform: uppercase;
    font-size: 2em;
  }

  .col1{
    text-align: center;
  }

  .col1 p{
    margin-bottom: 40px;
  }

  .col1 a{
    font-size: 1.15em;
  }

  .col2{
    flex-flow: row wrap;
    justify-content: space-around;
    align-items: flex-start;
    height: 316px;
  }

  .col2 h3{
    width: 100%;
    text-align: center;
  }

  .col2 p{
    width: fit-content;
    margin:0 20px;
  }

  .homepage-info-col a.book-btn{
    background: #1091d5;
    color: white;
    border: 2px solid #1091d5;
    padding: 12px 16px;
    text-transform: uppercase;
    font-weight: 900;
  }

  .homepage-info-col a.book-btn:hover{
    color: #1091d5;
    background: white;
  }

  #homepage-feed{
    background-color: #202020;
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #homepage-feed .container{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  #homepage-feed h1{
    text-transform: uppercase;
    color: #3e3e3e;
    font-weight: 900;
    font-size: 3em;
    margin-bottom: 5px;
    z-index: 0;
  }

  #homepage-feed h3{
    text-transform: uppercase;
    font-size: 2em;
    color: #1091d5;
    z-index: 1;
    text-align: center;
  }  

  #homepage-feed-img{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 60px 0 20px;
  }

  #homepage-feed-img img{
    width: 190px;
    height: auto;
    margin: 0 10px 20px;
  }

  /***SUBPAGE DESKTOP STYLES***/

  .subpage-hero{
    background: url(images/barber-background.jpg) no-repeat center;
    background-size: cover;
    height: 400px;
    color: white;
    margin-top: 93px;
  }

  .subpage-hero .container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90%;
  }

  .subpage-hero h1{
    font-size: 2em;
    text-transform: uppercase;
    font-weight: 900;
  }

  /***FOOTER DEKSTOP STYLES***/

  footer {
    background-color: #202020;
    padding: 60px 20px;
    color: white;
    border-top: 1px solid #1091d5;
  }

  footer .container{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  footer h3{
    font-size: 2em;
    text-transform: uppercase;
  }

  footer img{
    margin-bottom: 60px;
  }


  #footer-contact,
  #footer-newsletter{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #footer-contact{
    width: 300px;
    text-align: left;
    align-items: center;
    margin-bottom: 20px;
  }

  #footer-contact a{
    color: white;
  }

  #footer-contact a:hover{
    color: #1091d5;
  }

  #footer-contact i{
    color: #1091d5;
  }

  a.footer-email-link{
    border-bottom: 1px solid #1091d5;
  }

  #footer-newsletter{
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-flow: row;
    justify-content: center;
  }

  #footer-newsletter h3{
    text-align: center;
  }

  #footer-newsletter i{
    margin:0 10px;
    font-size: 2em;
  }

  .newsletter-form{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 20px;
  }

  .newsletter-form input{
    height: 60px;
    text-transform: uppercase;
    color: white;
  }

  .newsletter-form input[name=email]{
    padding: 0 15px;
    background-color: #202020;
    border-left: 1px solid white;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    width: 65%;
  }

  .newsletter-form input[type=submit]{
    background-color: #1091d5;
    color: white;
    width: 35%;
    border: 1px solid #1091d5;
    /*padding: 0 15px;*/
    height: 63px;
    margin-left: -2px;
    transition: .4s;
    font-weight: bold;
  }

  .newsletter-form input[type=submit]:hover{
    background-color: white;
    color: #202020;
    cursor: pointer;
  }

  #sub-footer{
    color: white;
    padding: 20px 0;
    background: #202020;
    border-top: 1px solid #3e3e3e;
  }

  #sub-footer a{
    color: white;
    border-bottom: 1px solid #1091d5;
  }

  #sub-footer a:hover{
    color: #1091d5;
  }


}