#entrance {
  position: relative;
  width: 100%;
  height: auto;
  background-image: url('../img/kx.jpg');
  background-repeat: repeat;
  background-size: 40px;
  box-sizing: border-box;
  padding: 250px 0 0;
  overflow-x: hidden;
}
  #entrance .sun {
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 120px;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1500px;
    aspect-ratio: 1.52;
    background-image: url('../img/sun.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: all .5s ease;
  }
  #entrance .content {
    position: relative;
    z-index: 20;
    margin: 0 0 0 0;
  }
  #entrance .bg {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    aspect-ratio: 2;
    background-image: url('../img/beach.png');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
    padding: 0;
    transition: all .5s ease;
  }

  h1 {
    font-family: 'Futura', sans-serif;
    font-size: 3rem;
    font-weight: 700;
  	color: #673b16;
  	line-height: .95em;
  	padding: 0;
    text-transform: uppercase;
    text-align: center;
  	margin: 0 0 20px;
  	transition: all .2s;
  	-webkit-transition: all .2s;
  }
  #entrance .actions {
    margin: 0 0 60px;
  }
    #entrance .actions a.btn {
      display: inline-block;
      font-size: .9rem;
      padding: 10px 20px;
      margin: 0 15px 0 0;
    }
    #entrance .actions a.btn:last-child {
      margin-right: 0;
    }

  #entrance .graphics {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 700px;
    padding: 0;
    margin: 0;
    transition: all .2s ease;
  }
    #entrance .graphics .halo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 200px;
      width: 90%;
      max-width: 1000px;
      transition: all .2s ease;
    }
      #entrance .graphics .halo img {
        display: block;
        width: 100%;
        height: auto;
        transition: all .2s ease;
      }
    #entrance .graphics .hrz {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 250px;
      background: rgb(236,171,2);
      background: linear-gradient(0deg, rgba(236,171,2,1) 0%, rgba(177,108,2,1) 100%);
      transition: all .2s ease;
    }
    #entrance .graphics .products {
      z-index: 1000;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      width: 90%;
      max-width: 1200px;
      transition: all .2s ease;
    }
      #entrance .graphics .products img {
        display: block;
        width: 100%;
        height: auto;
        transition: all .2s ease;
      }

#products {
  position: relative;
  width: 100%;
  background: rgb(240,138,0);
  background: rgb(243,153,0);
  background: -moz-linear-gradient(0deg, rgba(243,153,0,1) 0%, rgba(255,212,1,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(243,153,0,1) 0%, rgba(255,212,1,1) 100%);
  background: linear-gradient(0deg, rgba(243,153,0,1) 0%, rgba(255,212,1,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f39900",endColorstr="#ffd401",GradientType=1);
  text-align: center;
  border: solid #a34a1a;
  border-width: 4px 0;
  box-sizing: border-box;
  padding: 100px 0;
  overflow: hidden;
}
  #products .w {
    padding: 0 20px;
  }
  .products_crsl {
    margin: 0 0 60px;
  }
    .products_crsl a.prod {
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: calc(25% - 22.5px);
      height: 320px;
      background-color: rgba(255,255,255, 1);
      background-size: 70%;
      background-position: center center;
      background-repeat: no-repeat;
      border: 4px solid #fff;
      border-radius: 3px;
      -webkit-border-radius: 3px;
      box-sizing: border-box;
      padding: 20px;
      margin: 0 15px;
    }
    .products_crsl a.prod:hover {
      background-size: 75%;
    }
      .products_crsl.slick-slider .slick-arrow {
        position: absolute;
        z-index: 1000;
        top: calc(50% - 20px);
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #673a16;
        font-size: 0;
        cursor: pointer;
        box-shadow: 0 0 15px rgba(0,0,0, .2);
        border-radius: 100%;
        -webkit-border-radius: 100%;
        border: none;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        transform: scale(1) rotate(45deg);
        transition: all .2s;
        -webkit-transition: all .2s;
      }
      .products_crsl.slick-slider .slick-arrow:hover {
        transform: scale(1.1) rotate(45deg);
        box-shadow: 0 0 15px rgba(0,0,0, .4);
      }
        .products_crsl.slick-slider .slick-arrow.carousel_prev {
          left: -4px;
        }
        .products_crsl.slick-slider .slick-arrow.carousel_next {
          right: -4px;
        }
      .products_crsl.slick-slider .slick-arrow def {
        display: inline-block;
        width: 100%;
        height: inherit;
        background-color: #ffd400;
        -webkit-mask-position: center center;
        mask-position: center center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-image: url('../svg/chevron-d.svg');
        mask-image: url('../svg/chevron-d.svg');
        -webkit-mask-size: 45%;
        mask-size: 45%;
        transform: rotate(45deg);
      }
      .products_crsl.slick-slider .slick-arrow.carousel_next def {
        -webkit-mask-image: url('../svg/chevron-d.svg');
        mask-image: url('../svg/chevron-d.svg');
        transform: rotate(-135deg);
      }

  .products_crsl + a.btn {
  }

#poster {
  position: relative;
  width: 100%;
  aspect-ratio: 1.9;
  background-image: url('../img/beach-sunset.jpg');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: all .2s ease;
}




@media screen and (max-width: 1400px){

}



@media screen and (max-width: 1200px){
  #entrance {
    height: auto;
    min-height: 500px;
    padding: 180px 0 0;
  }
    #entrance .bg {
      aspect-ratio: 1.6;
      background-size: auto 120%;
    }
    #entrance .graphics {
      min-height: 700px;
    }
}



@media screen and (max-width: 1000px){
  #entrance .graphics {
    min-height: 600px;
  }

  #entrance .sun {
    top: 50px;
    width: 120%;
    max-width: 2500px;
  }
}


@media screen and (max-width: 800px){
  #entrance .graphics {
    min-height: 500px;
  }

  #poster {
    aspect-ratio: 4/3;
  }
}


@media screen and (max-width: 600px){
  #entrance {
    padding: 130px 0 0;
  }
    #entrance .graphics {
      min-height: 450px;
    }
    #entrance .graphics .hrz {
      height: 200px;
    }
    #entrance .sun {
      top: 60px;
      width: 160%;
    }

}


@media screen and (max-width: 500px){
  h1 {
    font-size: 2.4rem;
    line-height: .95em;
  	margin: 0 0 20px;
  }
  #entrance {
    padding: 110px 0 0;
  }
#entrance .bg {
  aspect-ratio: 1.1;
  background-size: auto 120%;
}
    #entrance .graphics {
      min-height: 300px;
    }
      #entrance .graphics .halo {
        bottom: 120px;
      }
      #entrance .graphics .hrz {
        height: 140px;
      }
      #entrance .graphics .products {
        bottom: 30px;
      }

}


@media screen and (max-width: 350px){
  #entrance .sun {
    top: 60px;
    width: 200%;
  }
}