/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color:rgba(0,0,0,0.2);
  box-shadow: inset 0 0 1px rgba(255,255,255,0.6); 
  border-radius:8px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--accent-color); 
  border-radius: 8px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color); 
}

#ddlang{
    border:1px solid rgba(255,255,255,0.8); padding:2px 5px 2px 10px;border-radius:4px;
}

.btn:hover{
background-color:#E557FC;color:#FFF;
}

.carousel-inner{
    height: 100vh;
}

.slide-gradient{
  position:absolute;
  top:0vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  height:100vh; width:100%;
}
.slide-image{
   width: 100%; height: auto;
}

.slide-caption{
  position: absolute; left:20vh; top:47vh; bottom:0px; width:50%;
}
.slide-caption h1{
line-height:1em
}
.slide-caption .slide-desc{
padding-top:15px; line-height: 26px; font-weight: 360; font-size: 20px;
}

.slide-story-image{
    object-fit: cover;
    width:100%;
    height: 100vh;
}
.slide-story-gradient{
  position:absolute;
  top:0vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  height:100vh; width:100%;
}

.slide-story-caption{ 
  position: absolute; 
  top:47vh; 
  bottom:0px; 
  width:100%; 
  text-align:center;
  left:0px;
}

.slide-story-caption h1{
    font-family: 'avantgarde-b';
    font-weight:bold;
    font-size: 2.8em;
    line-height:1em
}

.detail-story-image{
    object-fit: cover;
    width:100%;
    height: 100vh;
}
.detail-story-gradient{
  position:absolute;
  top:0vh;
  margin:0px auto;
  background-color: rgba(0, 0, 0, 0.60);
  height:100vh; width:100%;
}

.detail-story-caption{ 
  position: absolute;
  height: 80vh; 
  margin: auto;
  top:15vh; 
  bottom:0px; 
  left: 0;
  right: 0;
  width:100%; 
  text-align:left;
  margin-left: auto;
  margin-right: auto;  
}
.detail-story-caption .desc{ 
    height: 70vh; 
    overflow-y: auto;
}

.slide-story-caption h1{
    font-family: 'avantgarde-b';
    font-weight:bold;
    font-size: 2.8em;
    line-height:1em
}

/*product */

.slide-product-image{
    object-fit: cover;
    width:100%;
    height: 100vh;
}
.slide-product-gradient{
  position:absolute;
  top:0vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5));
  height:100vh; width:100%;
}

.slide-product-caption{ 
  position: absolute; 
  top:47vh; 
  bottom:0px; 
  width:100%; 
  text-align:center;
  left:0px;
}

.slide-product-caption h1{
    font-family: 'avantgarde-b';
    font-weight:bold;
    font-size: 2.8em;
    line-height:1em
}

/*info*/
.info{
    height:300px;width:100%; margin-top: 30px;
}
.info-detail{
    position: absolute;
    top:90px;
    left: 0;
    right: 0;
    height:240px;
    width:100%; 
    text-align:center;  
    margin-left: auto;
}
.info img{
    width:100%;
}
.info-detail h1{
    margin-top:100px;
}


.header-logo{
    margin:0px;padding:0px;
    width: 240px;
}
.footer-desc{
    color:#999999;
}
.footer-menu{
    font-size:12px;
    color: #999999;
    padding-top: 30px;
    padding-bottom: 20px;
}

.footer-menu ul {
  list-style-type: none;
  display: flex;
}

.footer-menu li {
  margin-right:30px;
}

.btn-widget-contact{
    padding:5px 15px;border:1px solid #969696;background-color:rgba(103, 24, 116, 0.2);border-radius:4px; color:#C8C8C8
}

.btn-showmore{
    padding:5px 15px;border:1px solid #969696;
    border-radius:4px; color:#C8C8C8;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right:20px;
}
.video-webm{
    width: 100%; height: 99%; 
    box-shadow: 2px 4px 20px rgba(0,0,0,0.9);
}

.img-wood-right{
    position:absolute;right:0px;margin-top:-80px;
    width: 270px;
}

.bg-contact{
    height:40vh; 
}
.bg-contact h1{
    padding-top:120px
}

.cart-mobile{
  position:absolute;right:70px;margin-top:-4px
}

.img-gallery{
  cursor:pointer;
}

.img-gallery:hover{
  border:3px solid var(--accent-color);
}

@media only screen and (max-width: 768px) {
    #ddlang{
        padding:2px 0px 2px 0px;
    }

    .carousel-inner{
        height: auto;
    }

    .header-logo{
        margin:0px;padding:0px;
        width: 200px
    }

    .footer-menu ul {
        list-style-type: none;
        display:block;
        text-align: center;
    }
    .footer-menu ul li {
        margin-right:0px;
        padding:0px 40px;
    }

    .img-wood-right{
        width: 200px;
    }

    /*Slide Home
    .carousel-control-prev{
        display: none;
    }
    .carousel-control-next{
        display: none;
    }*/

    .slide-image{
        height: auto;
    }
    .slide-caption{
        left:20px; width:90%; top:auto; bottom:25px;
    }
    .slide-caption h1{
        line-height:1em;
        font-size: 22px;
    }
    .slide-caption .slide-desc{
        display: none;
        font-size: 16px;
        line-height:1.2em;
    }
    .icon-box{
        width: 36px;
        padding-right: 20px;
    }

    .slide-story-image{
         height: auto;
    }

    .slide-story-caption{ 
        position: absolute; 
        top:47vh; 
        bottom:10vh; 
        width:100%; 
        text-align:center;
        left:0px;
    }

    .slide-story-gradient{  
        height:90vh; 
    }

    .slide-story-caption h1{
        font-family: 'avantgarde-b';
        font-weight:bold;
        font-size: 1.8em;
        line-height:1em
    }

 
    .detail-story-caption{ 
        top:10vh; 
    }
    .detail-story-caption .desc{ 
        height: 70vh; 
    }
    
    .section {
        padding: 30px 0;
    }
    .container{
        padding-left: 18px;
        padding-right: 18px;
    }



    /*product */

    .slide-product-image{
        height: auto;
    }
    .slide-product-gradient{
        height:90vh; 
    }
    .slide-product-caption{ 
        bottom:10px; 
    }
    .detail-story-gradient{
        height:110vh; 
    }

    /*info*/
    .info{
        height:150px;width:100%; margin-top: 30px;
    }
    .info-detail{
        position: absolute;
        top:0px;
        left: 0;
        right: 0;
        height:120px;
        width:100%; 
        text-align:center;  
        margin-left: auto;
    }
    .info img{
        width:100%; height: 150px; object-fit: cover;
    }
    .info-detail h1{
        margin-top:100px;
    }

    .bg-contact{
        height:20vh; 
    }
    .bg-contact h1{
        padding-top:55px
    }

    .video-webm {
        border-radius: 0px;
    }

}