/* =============================================================================
  #RESET
============================================================================= */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0;margin:0 0 1em}


/* =============================================================================
  #TOOLS
============================================================================= */
html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }


/* =============================================================================
  #GENERAL
============================================================================= */
* {
    font-family: inherit;
    line-height: inherit;
    color: inherit;
}

html {
    min-height: 100%;
    height: 100%;

    scroll-behavior: smooth;
}

body {
    font-family: 'Advent Pro', Helvetica, Arial, Verdana, sans-serif;
    color: #5c5c5c;
    font-size: 18px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    background-color: #ffffff;
}


.container {
  margin: 0 auto;
  padding: 0 10px;
  width: 100%;
  max-width: 1080px;
}


.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


/* =============================================================================
  #IMAGES
============================================================================= */
img {
  max-width: 100%;
  font-style: italic;
  font-size: 0.8em;
  vertical-align: middle;
}

img[width],
img[height] {
  max-width: none;
}


/* =============================================================================
  #TYPOGRAPHY
============================================================================= */
h1, h2, h3 {
  color: #000000;
}

h2 {
  margin-bottom: 10px;
  
  font-size: 32px;
  font-weight: 700;
}

h2, h3 {
  text-transform: uppercase;
  letter-spacing: 2px;
}

p {
  margin-bottom: 20px;
}


/* =============================================================================
  #BUTTONS
============================================================================= */
.btn {
  overflow: hidden;
  position: relative;
  display: inline-flex;
  padding: 10px 30px;

  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;

  background-color: #E2A079;
  border-radius: 0;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background-color: #000000;

  transition: all 350ms ease-in-out;

  transform: skewX(-50deg) translate(-150%, 0%);
}

.btn:hover::before {
  transform: skewY(0deg) translate(0%, 0%);
}

  .btn span {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

    .btn span svg {
      margin-right: 20px;
      height: 16px;
    }


/* =============================================================================
  #CONTENT SECTION
============================================================================= */
.content {
  padding: 40px 0;

  background-color: #ffffff;
}

@media (min-width: 700px) {
  .content {
    padding: 80px;
  }
}

  .content__intro {
    margin: 0 auto;
    margin-bottom: 40px;
    max-width: 640px;

    text-align: center;
  }

    .content__intro p {
      font-size: 1.2em;
      font-weight: 600;
    }


/* =============================================================================
  #HIGHLIGHT SECTION
============================================================================= */
.highlight {
  position: relative;
  padding: 60px 10px;

  color: #ffffff;

  background-color: #1E140A;
  background-image: url('https://images.unsplash.com/photo-1573588546512-2ace898aa480?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
  background-image: url('../img/store-front.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

@media (min-width: 700px) {
  .highlight {
    padding: 120px 40px;
  }
}

  .highlight__content {
    max-width: 640px;
  }

  .highlight > * {
    position: relative;
  }

  .highlight h2 {
    color: inherit;
  }

  /* Overlay */
  .highlight::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: rgba(0, 0, 0, .75);
  }


/* =============================================================================
  #HERO
============================================================================= */
.hero {
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  color: #ffffff;
  text-align: center;

  background-color: #1E140A;
  background-image: url('https://images.unsplash.com/photo-1598887142487-3c854d51eabb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

@media (max-width: 460px) {
  .hero {
    min-height: 80vh;
  }
}

  .hero > * {
    position: relative;
  }

  .hero h1 {
    margin-bottom: 10px;

    color: inherit;
    font-weight: 700;
    font-size: 34px;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
  }

  @media (min-width: 700px) {
    .hero h1 {
      font-size: 56px;
    }
  }

  .hero p {
    margin-bottom: 40px;

    font-size: 24px;
  }

  .hero > *:last-child {
    margin-bottom: 0;
  }
  

  /* Overlay */
  .hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: rgba(0, 0, 0, .5);
  }


/* Hero layout */
.hero__head {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding: 15px;
  width: 100%;
}

@media (min-width: 700px) {
  .hero__head {
    flex-direction: row;
  }
}


.hero__contact {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;

  font-size: 14px;
  font-weight: 700;
}

@media (min-width: 700px) {
  .hero__contact {
    justify-content: flex-start;

    font-size: 18px;
  }
}

  .hero__contact svg {
    margin-right: 5px;
    height: 14px;
    width: 14px;
  }

  .hero__contact li {
    display: flex;
    align-items: center;
  }

  .hero__contact li + li {
    margin-left: 40px;
  }


.hero__social {
  display: flex;
  margin-top: 15px;
  align-self: flex-end;
}

@media (min-width: 700px) {
  .hero__social {
    margin-top: 0;
    align-self: center;
  }
}

  .hero__social li + li {
    margin-left: 20px;
  }

    .hero__social li a {
      display: flex;

      transition: all 150ms ease-in-out;
    }

  .hero__social svg {
    height: 28px;
  }

  .hero__social:hover a {
    opacity: .5;
    
    transform: scale(.8);
  }

  .hero__social:hover a:hover {
    opacity: 1;
    transform: scale(1.1);
  }


.scroll-down img {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
}


.hero__content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  padding: 60px 0;
}

/* =============================================================================
  #SERVICES
============================================================================= */
.services {
  display: flex;
  flex-wrap: wrap;

  text-align: center;
}

  .service {
    flex: 0 0 100%;
    padding: 15px 30px;
  }

  @media (min-width: 600px) {
    .service {
      flex: 0 0 calc(100% / 2);
      margin-top: 40px;
    }
  }

  @media (min-width: 900px) {
    .service {
      flex: 0 0 calc(100% / 3);
      margin-top: 40px;
    }
  }

    .service h3 {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
      padding: 0 30px;
      min-height: 3em;

      font-size: 18px;
    }

    .service h3::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: -2px;
      bottom: -2px;
      left: -8px;
      right: -8px;

      background-color: #fcede5;

      transform: skewX(-10deg);
    }

      .service h3 span {
        position: relative;
      }

      .service h3 .service__price {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        padding: 2px 8px;

        color: #ffffff;

        background-color: #b26436;
        box-shadow: -4px 4px 0 0 #ffffff;
        transform: skewX(-10deg) translate(50%, -50%);
      }


/* =============================================================================
  #TEAM
============================================================================= */
.team {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 820px;
}

  .team__item {
    flex: 0 0 100%;
    padding: 0 20px;
  }

  .team__item + .team__item {
    margin-top: 20px;
  }

  @media (min-width: 700px) {
    .team__item {
      flex: 0 0 50%;
    }

    .team__item + .team__item {
      margin-top: 0;
    }
  }

  .team__photo {
    margin-bottom: 20px;
    padding-bottom: 125%;

    background-color: #f4f4f4;
    background-size: cover;
  }


/* =============================================================================
  #GALLERY
============================================================================= */
.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

  .gallery__item {
    overflow: hidden;
    flex: 0 0 calc(100% / 2);
    height: calc(100vw / 2);

    background-color: #f4f4f4;
    border: 5px solid #ffffff;
  }

  @media (min-width: 700px) {
    .gallery__item {
      overflow: hidden;
      flex: 0 0 calc(100% / 3);
      height: calc(100vw / 3);
  
      background-color: #f4f4f4;
      border: 5px solid #ffffff;
    }
  }

    .gallery__item img {
      object-fit: cover;
      width: 100%;
      height: 100%;

      transition: all 550ms ease-in-out;
    }


    /* Hover */
    .gallery:hover .gallery__item img {
      filter: grayscale(100%);
      opacity: .75;
    }

    .gallery:hover .gallery__item img:hover {
      filter: grayscale(0%);
      opacity: 1;

      transform: scale(1.1) rotate(-5deg);
    }


/* =============================================================================
  #MAPS
============================================================================= */
.maps iframe {
  margin-bottom: -8px;
  height: 30vw;
}

@media (max-width: 700px) {
  .maps iframe {
    height: 280px;
  }
}

/* =============================================================================
  #FOOTER
============================================================================= */
.footer {
  display: flex;
  flex-wrap: wrap;
}

  .footer__content {
    position: relative;
    flex: 0 0 100%;
    padding: 40px 15px;

    color: #ffffff;

    background-color: #1E140A;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }

  @media (min-width: 700px) {
    .footer__content {
      flex: 0 0 50%;
      padding: 80px 40px;
    }
  }

    .footer__content > * {
      position: relative;
    }

    .footer__content h2 {
      color: inherit;
    }

    .footer__content h3 {
      color: #E2A079;
      font-size: 16px;
    }

    .footer__content > *:last-child {
      margin-bottom: 0;
    }


    /* Overlay */
    .footer__content--has-bg::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      background-color: rgba(20, 12, 4, 0.85);
    }