body {
    font-family: $font-stack;
    font-size: 18px;
    font-weight: 400;
    color: #000;
    background: #fff;

    p{
      font-family: "Rokkitt-light"!important;
      font-size: 25px;
      line-height: 25px;
}
    h1,h2,h3,h4,h5,b,a{
      font-family: "Rokkitt-light"!important;
    }
    h2{
      font-size: 33px;
      b{
        font-family: "Rokkitt"!important;
      }
    }
    h1{
      font-size: 54px;
      @media screen and (max-width: 425px){
        font-size: 49px;
      }
    }
}

.balanzat{
/*  text-shadow: 1px 0px #5f504d, -1px 0px #5f504d;*/
  font-family: "Rokkitt-title" !important;
  font-weight: bold;
  color: #5F504D!important;
  font-size: 25px;
  &-logo{
    font-family: "geogtq" !important;
    letter-spacing: 8px;
  }
}
header{
  .menu{
    @include d-flex();
    @include align-items-center();
    @include justify-content-end();

    &-list-desk{
      .nav{
        list-style: none;
        &-item{
          &.active{
            border-bottom: 4px dotted #cecece;
          }
        }
      }
      li{
        margin-left: 25px;
        a{
          padding: 5px 15px;
      }
      }
      @media only screen and (max-width:823px) and (max-height:823px ) {
        display: none;
      }
    }
  }

  .menu-wrapper {
    display: none;

    .container-fluid {
      padding-left: 0;
      padding-right: 0;
    }
    .menu-list{

      margin-top:10px;
      margin-bottom:10px;
//      border-top: 4px dotted #cecece;
      ul{
        list-style: none;
        li{
          text-align: center;
          border-bottom: 4px dotted #cecece;
          @media screen and (max-width: 900px) and (orientation: landscape) {
            width: 50%;
            &:nth-last-child(3) ~ li{
              border-bottom: none;
            }
          }


          a{
            margin: 10px;
            padding: 20px;
            width: 100%;
            height: 100%;
            display: block;
            font-size: 30px;
            text-transform: uppercase;
          }
          &:last-child{
            border-bottom: none;
          }

        }
      }
    }
    &.active {
      display: block;
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      z-index: 50;
      background: #fff;

      .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
      }

      .header-menu {
        margin-bottom: 0px;
        display: block;
      }

      .change-lang {
        border-left: 30px solid #fff;
        border-right: 30px solid #fff;

        a {
            font-size: 15px;
        }
      }
    }
  }
  .open-menu {

    display: none;
    @media only screen and (max-width:823px) and (max-height:823px ) {
      display: inline-block;
    }

    .bars-icon {
      display: inline-block;
      width: 40px;
      height: 25px;
      border-bottom: 3px solid black;
      position: relative;

      &::after,
      &::before {
        content: '';
        width: 40px;
        height: 3px;
        background: black;
        display: block;
        position: absolute;
        left: 0;
      }
      &::after {
        bottom: 8px;
      }
      &::before {
        top: 0;
      }
    }
  }

  .menu-wrapper .menu-interior {
    text-align: left;
    border-bottom: 2px solid $primary-color;
    padding-top: 4px;
    padding-bottom: 2px;

    ul li {
      display: inline-block;

      &:not(:last-of-type)::after {
        content: '';
        display: inline-block;
        width: 2px;
        height: 12px;
        background: $primary-color;
        margin-left: 30px;
        margin-right: 27px;
      }
    }

    a {
      font-size: 16px;
      font-family: 'Akkurat-Mono';

      &.active {
        color: #fff;
      }
    }
  }

  .close-menu,
  .back-to-projects {
    display: inline-block;
    position: relative;
    width: 35px;
    height: 35px;

    .close-icon {
      position: absolute;
      top: -7px;
      left: 14px;


      &::after,
      &::before {
        content: '';
        height: 40px;
        border-left: 2px solid black;
        position: absolute;
        left: 0;
        }
      &::after {
        transform: rotate(45deg);
      }

      &::before {
        transform: rotate(-45deg);
      }
    }
  }
}
.title-primary{
  color: $primary-color;
}
footer{
  background: $primary-color;
  padding-top:5%;
  padding-bottom:5%;

  .row{
    -webkit-box-align: end!important;
    -ms-flex-align: end!important;
    align-items: flex-end!important;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;

    div[class^="col-"]{
     -webkit-box-pack: center!important;
     -ms-flex-pack: center!important;
     justify-content: center!important;
     display: -webkit-box!important;
     display: -ms-flexbox!important;
     display: flex!important;
     }
  }

  .social{
    -ms-flex-pack: distribute!important;
    justify-content: space-around!important;
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
    max-width: 300px;
    width: 100%;
    i{
      margin: 10px;
    }

    a{
      width: 100%;
      height:100%;
      max-width: 35px;
      max-height:35px;
      color: #8D817F;
      font-size: 15px;
      border-radius: 50px;
      border:2px solid #8D817F;
      padding: 6px;
      -webkit-box-pack: center!important;
      -ms-flex-pack: center!important;
      justify-content: center!important;
      -webkit-box-align: center!important;
      -ms-flex-align: center!important;
      align-items: center!important;
      display: -webkit-box!important;
      display: -ms-flexbox!important;
      display: flex!important;
    }
  }

}

hr{
  border-top: 4px dotted #cecece;
}

.logo{
  max-height: 100px!important;
  width: auto!important;
  margin-top: 10px;
  margin-bottom: 10px;

  @media screen and (max-width: 900px) and (max-height:900px ) {
    max-height: 50px!important;
    width: auto!important;
  }
}

.wrapper {
    padding: 0 15px 15px;

    @media screen and (min-width: 640px) {
        padding: 0 20px 20px;
    }
    @media screen and (min-width: 1024px) {
        padding: 0 35px 35px;
    }
}

* {
  box-sizing: border-box;
  font-family: Avenir;
}

html {
  height: 100%;
  font-size: 100%;
}

.module {
  clear: both;
  margin-bottom: 4em;
  @media screen and (max-width: 425px){
    margin-bottom: 2em;
}
}

.imgContainer, .intro {
  float: left;
}

.imgContainer {
  width: 300px;
  margin-bottom: 100px;
}

.imgContainer img {
  max-width: 100%;
  height: auto;
}
.img-fluid{
  max-width: 100%;
  height: auto;
  //max-height: 500px;
}
.intro {
  width: 55%;
  padding-left: 20px;
}

.contact-form {
  height: 500px;
}


/* ============================================================
  HOME
============================================================ */
section{
  .my-auto{
    margin-top: auto;
    margin-bottom: auto;
  }
  img{
    margin-right:auto;
    margin-left:auto;
    display: flex;
  }
  &.module{
    h1{
      padding-bottom: 30px;
      font-size: 54px;
      @media screen and (max-width: 425px){
        padding-bottom: 25px;
        font-size: 39px;
    }
    }
    h2{
      margin-bottom: 40px;
      font-size: 44px;
    }
    p{
      font-family: "Rokkitt-light"!important;
      margin-bottom: 30px;
      font-weight: 300;
      font-size: 27px;
      line-height: 27px;
      @media screen and (max-width: 425px){
        margin-bottom: 20px;
        font-size: 22px;
    }
    }
    p:last-child{
      margin-bottom: 0;
    }
    a{
      color:#464646;
      font-size: 30px;
    }
    &.home ~ section {
      h1{
        padding-bottom: 20px;
        @media screen and (max-width: 425px){
          font-size: 39px;
        }
      }
      p{
        font-size: 33px;
        line-height: 30px;
        @media screen and (max-width: 425px){
      font-size: 22px;
    }
  }
      h2{
        font-size: 39px;
        @media screen and (max-width: 425px){
          font-size: 39px;
        }
      }
      h3{
        font-size: 50px;
        @media screen and (max-width: 425px){
          font-size: 31px;
        }
      }
    }
  }
  .module:last-child{
    margin-bottom: 0;
  }
  .content{
    padding: 40px;
  }
  &.parallax{
    height: 100vh;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    &-1{
      background-image: url("../images/home/home-1.jpeg");
      background-position-y: -36%;
      height: 90vh;
    }
    &-2{
      background-image: url("../images/home/home-2.jpg");
    }
    &-3{
      background-image: url("../images/home/home-3.jpg");
    }
    &-4{
      background-image: url("../images/home/home-4.jpeg");
    }
    h1{
      color: rgba(255, 255, 255, 0.8);
      font-size: 3em;
      line-height: 300px;
      font-weight: 400;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }
  }
  &.banner{
    height: 80vh;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    &-aures{
      background-image: url("../images/aures/aures-1.jpeg");
    }
    &-vino{
      background-image: url("../images/aceite/oli-1.jpg");
    }
    &-libro{
      background-image: url("../images/libro/libro-1.jpg");
    }
  }
}

/* ============================================================
  END HOME
============================================================ */


/* ============================================================
  AURES
============================================================ */






/* ============================================================
  END AURES
============================================================ */


/* ============================================================
  MARCAS SLIDER
============================================================ */
.rw-slider{
  border-top:2px dotted  #cecece ;
  border-bottom:2px dotted #cecece ;
  padding-bottom: 5em;
  @media screen and (max-width:425px){
    padding-bottom: 2em;
  }
  h2{
    margin-top: 2em;
    margin-bottom: 2em;
  }

  &-content{
    img{
      width: 100%;
      height: calc( 100vh - 80px );
      /** max-height: 100vh;
      /** min-height: 100vh;
      -o-object-fit: contain;**/
      object-fit: fill;
      @media screen and (max-width:1023px){
        height: auto;
      }
      @media screen and (max-height:824px){
        height: auto;
      }
    }
  }
  &-grid{
    img{
      width: 100%;
      height: 60px!important;
      margin: 5px;
      object-fit: fill;
      @media screen and (max-width:320px){
        height: 45px!important;
      }

    }
    .slick-list{
      margin: 0px 35px;
    }
    .slick-slide {
      width: 13%!important;
      padding-right: 10px;
      padding-left: 10px;
      @media screen and (max-width:576px){
        width: 7%!important;
      }
    }
    .slick-next, .slick-prev{
      position: absolute;
      height: 55px;
      width: 55px;
      border-radius:50px;
      background: #d2d2d2;
      display: flex;
      align-items: center;
      justify-content: center;
      top: 20%;
      color: white;
      font-size: 30px;
      z-index: 5099;
      @media screen and (min-width:568px) and (max-height:320px) {
        top: 10%;
      }
      @media screen and (max-width:425px){
        top: 0px;
      }
    }
    .slick-prev{
      right: 95%;
      padding-right: 5px;
      @media screen and (max-width:576px){
        right: 91%;
      }
      @media screen and (max-width:425px){
        right: 87%;
      }
      @media screen and (min-width:568px) and (max-height:320px) {
        right: 94%!important;
      }
    }
    .slick-next{
      left: 95%;
      padding-left: 5px;

      @media screen and (max-width:576px){
        left: 91%;
      }
      @media screen and (max-width:425px){
        left: 87%;
      }
      @media screen and (min-width:568px) and (max-height:320px) {
        left: 94%!important;
      }
    }
  }
}




/* ============================================================
  END MARCAS SLIDER
============================================================ */




/* ============================================================
  PUNTOS DE VENTA
============================================================ */

.rw{
  &-puntos, &-default{
    margin: 0px;
    padding: 0px;
  }
  &-puntos{
    h3,h4,p{
      font-family: "Rokkitt" !important;
    }
    h3{
      font-size: 25px;
      color:#6f8798;
    }
    h4{
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 0px;
      margin-top: 7px;
    }
    p{
      font-size: 20px;
      line-height: 21px;
    }
    &-ventas{
      margin-bottom: 20em;
      img{
        width: 100%;
      }
      .titulo{
        margin-top:2em;
        margin-bottom:2em ;
      }
    }

    &-lista{
      margin-top: 3em;
    }
    .rw-lista {
      padding: 0;
      margin: 0;
      list-style: none;
      border-top: 2px dotted #cecece;
      -ms-box-orient: horizontal;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -moz-flex;
      display: -webkit-flex;
      display: flex;

      -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    }

    .rw-direccion{
      margin: 3px 15px 3px 5px;
      width: 220px;
      height: auto;

    }
  }
  &-default{
    &-aures{
      background: #C4CED6;
      max-height: 345px;
      height: 100%;
      width: 100%;
      margin-top: 17px!important;
    }
    &-aceite{
      background: #C7BEA2;
      max-height: 345px;
      height: 100%;
      width: 100%;
      margin-top: 17px!important;
    }
  }
}






/* ============================================================
  END PUNTOS DE VENTA
============================================================ */



/* ============================================================
  VINO
============================================================ */


/* ============================================================
  END VINO
============================================================ */

/* ============================================================
  FORMATOS
============================================================ */

.lista-formatos{
  @include d-flex();
  @include align-items-end();
  @include justify-content-between();
  @include flex-wrap();
  padding: 2em 0px 2em 0px;
  border-top:2px dotted  #cecece ;
  border-bottom:2px dotted #cecece ;
}

/* ============================================================
  END FORMATOS
============================================================ */


/* ============================================================
  LIBRO
============================================================ */

.desk{
  width: 100%;
  height: 80vh;
  margin-bottom: 50px !important;

}

/* ============================================================
  END LIBRO
============================================================ */