@charset "UTF-8";
/* CSS Document */

#main-banner, .owl-stage-outer, #main-banner .owl-stage, #main-banner .owl-item, #main-banner .item {float:left;  overflow:hidden;}
#main-banner, .owl-stage-outer, #main-banner .owl-item, #main-banner .item {width:100%;}

#main-banner .item > .col-md-4 {padding-bottom:65px;}

#main-banner h3 .material-icons {font-size:18px;}

#main-banner .owl-dot {display:none !important;}
/* #main-banner .owl-dots {position:absolute; left:6%; bottom:0; height:75px; display:inline-flex; align-items: center; justify-content:flex-start;}
.owl-carousel .owl-dots .owl-dot {float:left; width:50px; height:3px; background:#ccc;} */
.owl-carousel .owl-dots .owl-dot.active {background:#8b071a;}
#main-banner .owl-nav {position:absolute; left:33.333%; bottom:0; transform:translateX(-50%); z-index: 3; display:block; height:75px; width:150px;}
.owl-carousel .owl-nav > div {float:left; width:75px; height:75px; display:inline-flex; justify-content: center; align-items: center;}
.owl-carousel .owl-nav > div.owl-prev {background:#eee;}
.owl-carousel .owl-nav > div.owl-next {background:#e3e3e3;}
.owl-carousel .owl-nav > div.owl-prev:hover, .owl-carousel .owl-nav > div.owl-next:hover {background:#ccc;}

#main-banner .promo-info {opacity:1.0; transform:translateX(-100%); transition:0.5s; width:90%;}
#main-banner .product-info {opacity:1.0; transform:translate(10%, 100px); transition:0.5s;}
#main-banner .lifestyle-image {opacity:0; transform:translateY(-100%); transition:0.5s;}

#main-banner .active .promo-info {opacity:1.0; transform:translateX(10%); transition-delay: 0.1s;}
#main-banner .active .product-info {opacity:1.0; transform:translate(10%, 0px); transition-delay: 0.1s;}
#main-banner .active .lifestyle-image {opacity:1.0; transform:translateY(0%); transition-delay: 0.1s;}

#main-banner .fadeOut .promo-info {opacity:0.0; transform:translateX(10%);}
#main-banner .fadeOut .product-info {opacity:0.0; transform:translate(10%, 0px);}
#main-banner .fadeOut .lifestyle-image {opacity:0.0; transform:translateY(100%);}

@media only screen and (min-width:769px) and (max-width:1215px) {
    #main-banner  .product-info {display:none;}
}

@media only screen and (min-width:300px) and (max-width:768px) {
    #main-banner .owl-controls {float:left; width:100%; display:flex;}
    #main-banner .owl-dots {height:50px; position:relative; top:auto; left:auto; width:100%; display:inline-flex; justify-content:center;}
    #main-banner .owl-nav {bottom:auto; top:30%; left:0; width:100%; height:0; transform:translateX(0%); display:inline-flex; justify-content:space-between;}
    #main-banner .owl-nav > div.owl-prev, #main-banner .owl-nav > div.owl-next, .owl-carousel .owl-nav > div.owl-prev, .owl-carousel .owl-nav > div.owl-next {width:50px; height:50px;}
    #main-banner .owl-nav > div.owl-prev, #main-banner .owl-nav > div.owl-next {background:#333; color:#fff;}
    
    #main-banner .active .promo-info {transform:translateX(0%);}
}