body, html {padding: 0; margin: 0;font-family: 'Varela Round', sans-serif;}
.page-wrapper {width: 100%;height: auto;}
.nav-width{width: 100%;margin: auto;}
.nav-wrapper {width: 100%;position: -webkit-sticky; position: sticky;top: 0;z-index: 10;}
.grad-bar {width: 100%;height: 2px;background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: gradbar 15s ease infinite;-moz-animation: gradbar 15s ease infinite;animation: gradbar 15s ease infinite;}
a {cursor: pointer !important;}

/* NAVIGATION */
.navbar {display: grid;grid-template-columns: 1fr 3fr;align-items: center;height: 60px;overflow: hidden;background: #000;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.85);}
.navbar img {height: 55px;width: auto;justify-self: start;margin-left: 20px;position: relative;top: 3px;}
.navbar ul {list-style: none;display: grid;grid-template-columns: repeat(6,1fr);justify-self: end;width: 575px;padding-inline-start: 0;text-align: center;font-family: 'anton', sans-serif;letter-spacing: 2px;position: relative;top: -2px;}
.nav-item a {color: #fff;font-size: 0.9rem;font-weight: 400;text-decoration: none;transition: color 0.3s ease-out;}
.nav-item a:hover {color: #333;}
.book-now-menu-button a {color: #fff;font-size: 0.9rem;font-weight: 400;text-decoration: none;transition: color 0.3s ease-out;}
.book-now-menu-button a:hover {color: #333;}
.current-page{background: rgba(80, 80, 80, 0.45);padding: 5px 8px;}

/* MOBILE MENU & ANIMATION */
.menu-toggle .bar{width: 25px;height: 3px;background-color: #fff;margin: 5px auto;-webkit-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.menu-toggle {justify-self: end;margin-right: 25px;display: none;}
.menu-toggle:hover{cursor: pointer;}
#mobile-menu.is-active .bar:nth-child(2){opacity: 0;}
#mobile-menu.is-active .bar:nth-child(1){-webkit-transform: translateY(8px) rotate(45deg);-ms-transform: translateY(8px) rotate(45deg);-o-transform: translateY(8px) rotate(45deg);transform: translateY(8px) rotate(45deg);}
#mobile-menu.is-active .bar:nth-child(3){-webkit-transform: translateY(-8px) rotate(-45deg);-ms-transform: translateY(-8px) rotate(-45deg);-o-transform: translateY(-8px) rotate(-45deg);transform: translateY(-8px) rotate(-45deg);}

/* KEYFRAME ANIMATIONS */
@-webkit-keyframes gradbar {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@-moz-keyframes gradbar {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
@keyframes gradbar {0% {background-position: 0% 50%}50% {background-position: 100% 50%}100% {background-position: 0% 50%}}
.social-icons{display: inline-block;color: #fff;font-size: 40px;background: #555;border-radius: 5px;margin: 0 10px;}
@media (min-width: 720px) {.social-icons{display: none;}}
@media only screen and (max-width: 720px) {
/* MOBILE NAVIGATION */
.navbar ul {display: flex;flex-direction: column;position: fixed;justify-content: start;top: 44px;background-color: rgba(0, 0, 0, 0.9);width: 100%;height: calc(100vh - 55px);transform: translate(-101%);text-align: center;overflow: hidden;padding-inline-start: 0;}
.navbar .nav-item {padding: 15px;}
.navbar li:first-child {margin-top: 60px;}
.navbar li a {font-size: 1.9rem;}
.menu-toggle, .bar {display: block;cursor: pointer;}
.mobile-nav {transform: translate(0%)!important;}
/* SECTIONS */
.headline {height: 20vh;}
.feature-container p {margin-bottom: 25px;}
.feature-container {margin-top: 20px;}
.feature-container:nth-child(2) {order: -1;}
/* SEARCH DISABLED ON MOBILE */
#search-icon {display: none;}
.search-input {display: none;}
.book-now-menu-button{position: absolute;bottom: 8px;left: 2.5px;width: 100%;text-align: center;padding: 8px 0;background: #6c6c6c;margin: auto;display: block;}
.current-page{background: rgba(80, 80, 80, 0.45);padding: 6px 17px;}}
@media only screen and (max-width: 320px) {.navbar li:first-child {margin-top: 10px;}.navbar .nav-item{padding: 7.5px;}}

/* Homepage */
.index-atf-bg{height:90vh;background: url(../images/haircuts.jpeg);background-position: center;background-size: cover;display: flex;justify-content: center;align-items: center;}
.main-title{font-size: 60px;color: #fff;text-align: center;font-family: 'Anton', sans-serif; letter-spacing: 3px; margin-top: 0; margin-bottom: 0;}
.location{background: #fff;position: relative;top: -27px;font-size: 16px;text-align: right;padding: 0 4px;margin-bottom: 3px;letter-spacing: 6px;margin-left: 10px;margin-right: 10px;font-size: 16px;}
.atf-cta-container{display: flex;align-items: center;justify-content: space-evenly;max-width: 300px;margin: auto;}
.cta1{font-size: 20px;background: #6c6c6c;padding: 10px;color: #fff;text-decoration: none;}
.cta1:hover{transition: 0.3s; background: #555;}
.cta2{font-size: 20px;padding: 8px;border: 2px solid #fff;color: #fff;;text-decoration: none;}
.cta2:hover{transition: 0.3s; background: #d8d8d8; color: #000;}


/* Maps */
.map-container{display: block;margin-top: 20px;margin-bottom: 10px;padding: 0 15px;}

/* Footer */
.footer-logo{padding: 11px 2px;height: 38px;width: auto;}
footer {background: #000;}
.footer-menu {list-style-type: none;font-size: 13px;text-decoration: none;color: #fff;line-height: 1.5;}
.footer-menu a {text-decoration: none;color: #fff;}
.footer-menu a:hover {color: #ababab;}
.certification {width: 100%;max-width: 247px;padding: 20px 0px 20px 0px;display: block;}
.icons {padding:0;text-align: center;margin: auto; display: flex; justify-content: center;}
.icons i {font-size: 40px;padding: 9px 0px 0px 30px}
.icons a {color:#c3c3c3}
.icons i:hover {color: #d6d6d6;}
.container-footer-box p {padding: 0;}
.container-footer-box a {color: #fff;text-decoration: none;}
.container-footer-box a:hover {color: #ababab;text-decoration: none;}
#link {text-decoration: none;color: #253964;font-size: 12px;}
#link a {color: #253964;text-decoration: none;}
#link a:hover {text-decoration: underline;}
@media(min-width:750px) {.container-footer {display: flex;flex-direction: row;justify-content: space-around;}}
.container-footer {padding-bottom: 40px;max-width: 1100px;margin: auto; border-bottom: 2px solid #f5f5f5;}
.container-footer-box {flex-basis: 30%;font-size: 15px;color: #fff;min-height: 150px;padding: 20px 10px 10px 10px;}
@media (max-width:950px) {.container-footer-box {max-width: 375px; margin-left: auto;margin-right: auto;}}
.left {text-align: left;;}
.container-footer-box h4 {text-align: left; margin-bottom: 10px; font-size: 18px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.12); font-family: 'anton', sans-serif; letter-spacing: 3px;}
.footer-links {list-style-type: none;padding-left: 0px;text-align: left;}
.footer-links li {padding: 3px 0 3px 0;}
.legal{max-width: 1060px;margin: auto;display: block;color: #f5f5f5;padding: 5px 10px;font-size: 11px;}
.legal a {color: #fff;font-weight: 900;}
.legal a:hover{color: #ababab;}
.company-info{color: #555;text-align: center;font-size: 10px;padding: 10px;margin: 0;}
.icon-scroll,.icon-scroll:before {position: absolute;left: 50%;}
.icon-scroll {width: 40px;height: 70px;margin-left: -20px;top: 50%;margin-top: -35px;box-shadow: inset 0 0 0 1px #fff;border-radius: 25px;}
.icon-scroll:before {content: '';width: 8px;height: 8px;background: #fff;margin-left: -4px;top: 8px;border-radius: 4px;-webkit-animation-duration: 1.5s;animation-duration: 1.5s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-name: scroll;animation-name: scroll;}
@-webkit-keyframes scroll {0% {opacity: 1;}100% {opacity: 0;-webkit-transform: translateY(46px);transform: translateY(46px);}}
@keyframes scroll {0% {opacity: 1;}100% {opacity: 0;-webkit-transform: translateY(46px);transform: translateY(46px);}}

/* Reviews */
.container-reviews{padding: 20px 20px 40px 20px;background: url(../images/slate-barbers-shop2.jpg);background-size: cover;background-position: center;color: #fff;}
.container-reviews2{padding: 20px 20px 40px 20px;background: #191919;background-size: cover;background-position: center;color: #fff;max-width: 1200px;margin: auto;}
.container-reviews h3, .container-reviews2 h3{text-align: center;font-size: 28px;font-family: 'anton', sans-serif;letter-spacing: 4px;}
.testimonial {padding: 20px 30px;}
.testimonial-content{border: 4px solid #6c6c6c;background: #000;padding: 15px;box-shadow: 0px 2px 8px 4px rgba(85, 85, 85, 0.78);}
#sync2 .owl-nav{display: flex;justify-content: space-between;position: relative;top: -160px;}
.img-slider{position: relative;top: -50px;margin-left: 10px;margin-right: 10px;}

/* Backgrounds */
.blk-bg{background: #191919;}


/* Widths */
.home-areas-width {max-width: 1200px;display: block;margin: auto;}

@media (min-width: 900px){.home-areas-section {display: flex;flex-direction: row;justify-content: center;align-content: center;align-items: center;}}
.home-areas-section-box1 {flex-basis: 50%;padding: 40px;line-height: 2;color: #2d2e36;font-weight: 700;}
.home-areas-section-box2 {flex-basis: 50%;padding: 40px;line-height: 2;color: #2d2e36;font-weight: 700;}
.home-areas-section-box2 p {color: #f2f2f2;}
@media (max-width:900px) {.home-areas-section-box2 p {font-size: 14px;}}
@media (max-width:600px) {.home-areas-section-box2 p {font-size: 13px;}}
.small-title {font-weight: 900;margin: 10px 0;background: #7777778a;color: #fff;width: 100px;text-align: center;}
.homepage-flex-image {width: 100%;display: block;margin: auto;box-shadow: 0px 1px 20px 4px #6c6c6c;}
.home-areas-section-box2 h2 {font-size: 28px;color: #808080;font-family: 'Anton', sans-serif;letter-spacing: 1.5px;margin-top: 0;line-height: 1.5;}
.homepage-flex-cta{background: #000;padding: 10px 20px;font-size: 20px;text-decoration: none;color: #fff;font-family: 'Anton', sans-serif;letter-spacing: 1.5px;border: 2px solid #6c6c6c;}
.internal-link-homepage{background: #4b4b4b;color: #fff;padding: 4px;text-decoration: none;}
.homepage-services {max-width: 1150px;margin: auto;padding: 30px 30px 50px 30px;}
.homepage-services-box {height: 250px;flex-basis: 30%;background-size: cover;margin: 20px 0;background-position: center;display: flex;align-items: flex-end;justify-content: center;box-shadow: 1px 1px 9px 1px #6c6c6cde;}
@media (min-width: 650px){.homepage-services {display: flex;flex-direction: row;justify-content: space-around;}}
.homepage-services-box a {background: #000;font-size: 18px;padding: 8px 15px;border-radius: 3px;color: #d0d0d0;text-decoration: none;width: 100%;text-align: center;font-family: 'Anton', sans-serif;letter-spacing: 1.5px;}
.homepage-service-box a:hover{color: #555;}

.services-title{background: #191919;margin: 0;padding: 30px 0;text-align: center;color: #808080;font-family: 'anton', sans-serif;letter-spacing: 4px;font-size: 34px;}


.timeline *,.timeline *::before,.timeline *::after {box-sizing: border-box;}
.timeline {max-width: 100vw}
.timeline ul {background: #191919;padding: 30px 0; margin: 0; }
.timeline ul li {list-style-type: none;position: relative;width: 4px;margin: 0 auto;background: #2b2b2b;padding-bottom: 70px;font-size: 18px;font-family: sans-serif;line-height: 1.5;}
.timeline p {font-weight: 600;
    font-size: 13px;
    text-align: center;
    max-width: 350px;
    margin: auto;}
.timeline ul li::after {content: '';position: absolute;left: 50%;bottom: 35px;transform: translateX(-50%);width: 25px;height: 25px;border-radius: 50%;background: inherit;}
.timeline ul li div {position: relative;bottom: 0;width: 400px;padding: 10px 10px;background: #191919;color: #fff;}
.timeline ul li div::before {content: '';position: absolute;bottom: 7px;width: 0;height: 0;border-style: solid;}
.timeline ul li:nth-child(odd) div {left: 25px;}
.timeline ul li:nth-child(odd) div::before {left: -15px;border-width: 8px 16px 8px 0;border-color: transparent transparent transparent transparent;}
.timeline ul li:nth-child(even) div {left: -439px;}
.timeline ul li:nth-child(even) div::before {right: -15px;border-width: 8px 0 8px 16px;border-color: transparent transparent transparent transparent;}
.timeline img {width:100%; max-width: 500px; display: block; margin: auto; padding-top: 10px; max-width: 300px;}
.timeline time {display: block;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 8px;
    background: #fff;
    color: #000;
    font-family: 'anton', sans-serif;
    letter-spacing: 3px;
    text-align: center;}
.timeline ul li::after {transition: background .5s ease-in-out;}
.timeline ul li div {visibility: hidden;opacity: 0;transition: all .5s ease-in-out;}
.timeline ul li:nth-child(odd) div {transform: translate3d(200px, 0, 0);}
.timeline ul li:nth-child(even) div {transform: translate3d(-200px, 0, 0);}
.timeline ul li.in-view div {transform: none;visibility: visible;opacity: 1;}
@media screen and (max-width: 900px) {.timeline ul li div {width: 250px;}.timeline ul li:nth-child(even) div {left: -289px;}
.timeline ul li:nth-child(odd) div {transform: none;}
}
@media screen and (max-width: 600px) {
.timeline ul li {margin-left: 20px;}
.timeline ul li div {width: calc(100vw - 71px);}
.timeline ul li:nth-child(even) div {left: 25px;}
.timeline ul li:nth-child(even) div::before {left: -15px;border-width: 8px 16px 8px 0;border-color: transparent #dedede transparent transparent;}}






.contact-content{
  background: #191919;
  padding: 20px;
}

.contact-title-section{
  color: #fff;
  letter-spacing: 3px;
  font-family: 'anton', sans-serif;
  max-width: 1100px;
  margin: auto;
}

.contact-title-section h1{
  border-bottom: 1px solid #fff;
  font-family: 'anton', sans-serif;
}

.contact-flex-section{
   display: flex;
   max-width: 1100px;
   margin: auto;
}

.contact-flex-box{
   flex-basis: 50%;
   min-height: 200px;
   color: #fff;
   font-family: 'anton', sans-serif;
   font-size: 20px;
   letter-spacing: 3px;
}

.contact-flex-box h2{margin-bottom: 0;}

.contact-flex-box p{margin-top: 0;}




.contact-background-image{
  height:350px; background: url(../images/contact-header.jpg); background-size:cover; max-width: 1100px; margin: auto; margin-bottom: 30px;
}

.about-background-image{
  height:350px; background: url(../HQimages/IMG_0536.jpg); background-size:cover; max-width: 1100px; margin: auto; margin-bottom: 30px;
}

.services-background-image{
  height:350px; background: url(../images/haircuts.jpg); background-size:cover; max-width: 1100px; margin: auto; margin-bottom: 30px; background-position: center;
}

.our-work-background-image{
  height:350px; background: url(../HQimages/IMG_0536.jpg); background-size:cover; max-width: 1100px; margin: auto; margin-bottom: 30px;
}


@media (max-width: 600px) {
.contact-background-image, .about-background-image, .services-background-image, .our-work-background-image{
  height: 210px;
}
}





.services-box {
  flex-basis: 30%;
  margin: 20px 0;
  color: #fff;
  text-align: left;

}

.services-box h2{
  font-family: 'anton', sans-serif;
  color: #fff;
  letter-spacing: 2px;
}


.services-box p{
line-height: 1.7;
font-size: 14px;
}

.services-box a {
  background: #444;
  color: #ffffff;
  padding: 3px 11px;
  text-decoration: none;
  font-size: 17px;
  font-family: 'anton', sans-serif;
  letter-spacing: 3px;
}

.servies-box a:hover{
  background: #8c8c8c;
  transition: 0.3s;
}

.services-container{
  max-width: 1100px;
  margin: auto;
}


@media (min-width: 650px){
.services-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
}


@media (max-width: 650px){
.services-box {
padding: 15px 20px;
}
}

.price-duration-outer{
  position: absolute;
}

.price-duration-inner{
  position: relative;
  top: -18px;
  left: 0px;
  padding: 1px 5px;
  font-size: 12px;
  background: #444;
}

.duration{
  padding-left: 8px;
}



.gallery-flex-container{
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  margin: auto;
}

@media (max-width:650px) {
  .gallery-flex-container{
flex-direction: column;
  }

  .gallery-sub-container{
     margin-bottom: 5px;
  }

}

.gallery-sub-container{
  display: flex;
      flex-direction: row;
      flex-basis: 50%;
      justify-content: space-around;
      margin-bottom: 5px;
}

.gallery-image{
  flex-basis: 49%;
  height: 220px;
  background: #fff;
  background-size: cover;
  background-position: center;
}



.internal-link{
  text-decoration: underline;
  color: #f9f9f9;
}



.team-container{
  display: flex;
  max-width: 1000px;
  margin: auto;
  justify-content: space-around;
  padding-bottom: 45px;
}

@media (max-width:700px) {
  .team-container{
    flex-direction: column;
  }

  .team-box{
padding: 20px;

  }

}

.team-box{
  flex-basis: 31%;
}

.team-box img{
  width: 100%;
}

.team-box a {
  background: #fff;
      color: #000;
      width: 100%;
      padding: 8px 0px;
      font-family: 'anton',sans-serif;
      letter-spacing: 2px;
      position: relative;
      display: flex;
      justify-content: center;
      text-decoration: none;
}
.team-box a:hover{background: #a5a5a5;transition: 0.4s;}


.team-box h4{text-align: center;color: #fff;font-family: 'anton', sans-serif;font-size: 32px;margin: 0;letter-spacing: 4px;}



.cookie-notice{box-sizing: border-box;position: fixed;bottom: 0;left: 0;width: 100%;padding: 2px 5px;background: rgba(0,0,0,0.8);box-shadow: 0 2px 4px rgba(20,40,80,.2);border-radius: 0;font-size: 13px;line-height: 1.5;color: #fff;transform: translate3d(0,0,0);animation: cookie-notice-fadein .5s ease;z-index: 2147483000;display: flex;justify-content: center;align-items: center;}
.cookie-notice a {color: #fff;}
.cookie-notice button {background: #9E9E9E;color: #050505;cursor: pointer;font-weight: 700;padding: 6px 10px;margin-left: 10px;font-size: 16px;border: none;font-family: 'anton',sans-serif;letter-spacing: 2px;}