@font-face {
  font-family: 'Butler';
  src:  url('fonts/Butler_Regular.otf') format('otf')
}

/* ================================
Intro Section
================================= */

#intro {
  width: 100%;
  height: 100vh;
}

#intro .item {
  width: 100%;
  height: 100vh;
  background-size:auto;
  background-position: center;
  background-repeat: no-repeat;
}

#intro .item::before {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#intro .carousel-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

#intro .carousel-content {
  text-align: center;
}

#intro h2 {
  color: #fff;
  /* margin-bottom: 30px; */
  font-family: 'Butler';
  font-size: 76px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#intro .carousel-inner .item {
  transition-property: opacity;
  background-position: center;
  background-size: cover;
}

/* mobile */
@media (max-width: 599px ) {
  #intro h2 {
    font-size: 48px;
  }
}
/* desktop */
@media (min-width: 1367px ) {
  #intro img {
    width: 100%;
  }
}


/* ------------------------------------------------------------------
Paralax Section
--------------------------------------------------------------------- */
.paralax-wrap {
  background: #fff url(../images/background.jpg) no-repeat center top fixed;
  background-size: cover;
  background-repeat: repeat-y;
  color: #fff;
}

.paralax-content {
  padding: 2% 12%;
  text-align: center;
}

.paralax-wrap .paralax-content h2 {
  font-size: 30px;
  text-transform: uppercase;
  line-height: 52px;
  font-family: "Butler";
  font-weight: 600;
  color: rgb(255, 255, 255);
  line-height: 1.684;
  text-align: center;
  letter-spacing: 0.4em;
}

.paralax-wrap .paralax-content p {
  padding: 2% 8%;
  font-size: 12px;
  font-family: "Montserrat";
  color: rgb(255, 255, 255);
  font-weight: 600;
  line-height: 2.308;
  text-align: center;
}

.paralax-content img.certificate{
  width: 30%;
  margin-bottom: 30px;
  border-radius: 20px;
}

.paralax-content img.product{
  width:20%;
  margin: 2% 1%;
}

.paralax-content div.blank{
  height: 120px;
}
@media (max-width: 399px ) {
  .paralax-wrap .paralax-content h2 {
    margin-top: 20px;
    font-size: 18px;
  }
  .paralax-wrap .paralax-content p {
    font-size: 10px;
    padding: 2% 0;
  }
  .paralax-content img.certificate{
    width: 100%;
    margin-bottom: 20px;
  }
  .paralax-content img.product{
    width:100%;
  }
  .paralax-content div.blank{
    height: 50px;
  }
}
@media (min-width: 400px ) and (max-width: 800px ) {
  .paralax-content img.product{
    width:50%;
  }
}

/* IPHONE XR */
/* 1792x828px at 326ppi */
@media only screen
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 2)
{
    .paralax-content img.product{
      width:80%;
    }
}

/* IPHONE XS */
/* 2436x1125px at 458ppi */
@media only screen
    and (device-width : 375px)
    and (device-height : 812px)
    and (-webkit-device-pixel-ratio : 3)
{
  .paralax-content img.product{
    width:80%;
  }
}

/* IPHONE XS MAX */
/* 2688x1242px at 458ppi */
@media only screen
    and (device-width : 414px)
    and (device-height : 896px)
    and (-webkit-device-pixel-ratio : 3)
{
  .paralax-content img.product{
    width:80%;
  }
}