@font-face {
  font-family: Montserrat;
  src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf');
}
@font-face {
  font-family: Roboto;
  src: url('../fonts/Roboto/Roboto-Regular.ttf');
}
body {
  font-family: "Roboto";
  font-size: 14px;
  background-color: #ffffff;
  position: relative; }
  body:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    opacity: 0;
    visibility: hidden;
    z-index: 1; }
  body.offcanvas-menu:before {
    opacity: 1;
    z-index: 1002;
    visibility: visible; }

p {
  color: #000000;
  font-weight: 300; font-size:16px; font-family: Helvetica;}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Montserrat"; }

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease; }
  a, a:hover {
    text-decoration: none !important; }



/* owl  */

.main-content {
    position: relative;
    .owl-theme {
        .owl-dots {position: relative; top:-50px;}

        @media (max-width: 520.98px) {
           .owl-dots {position: relative; top:-30px;}
        }
    }
}





div.owl-item{
  opacity: 0.6;
}
div.owl-item.active {
  opacity: 1;
}




.new-arrival {
    position: relative;

    .owl-theme {
        .custom-nav {
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;

            .owl-prev, .owl-next {
                position: absolute;
                height: 0px;
                color: inherit;
                background: rgba(255, 255, 255, 0);
                border: none;
                z-index: 100;

                i {
                    font-size: 2.5rem;
                    color: rgba(0, 0, 0, 0.3);;
                }
            }

            .owl-prev {
                left: 0;
            }

            .owl-next {
                right: 0;
            }
        }

        @media (max-width: 1199.98px) {
          .owl-prev, .owl-next {
                height: 0px;
                top:-30px;
            }
        }

        @media (max-width: 767.98px) {
           .owl-prev, .owl-next {
                height: 0px;
                top:-50px;
            }
        }


        @media (max-width: 520.98px) {
           .owl-prev, .owl-next {
                height: 0px;
                top:-30px;
            }
        }

        
    }


}



.shop-our-products {
    position: relative;

    .owl-theme {
        .custom-nav {
            position: absolute;
            top: 30%;
            left: 0;
            right: 0;

            .owl-prev, .owl-next {
                position: absolute;
                height: 0px;
                color: inherit;
                border: none;
                z-index: 100;

                i {
                    font-size: 2.5rem;
                    color: rgba(0, 0, 0, 0.3);
                }
            }

            .owl-prev {
                left: 0;
            }

            .owl-next {
                right: 0;
            }
        }

        @media (max-width: 1199.98px) {
          .owl-prev, .owl-next {
                height: 0px;
                top:-30px;
            }
        }

        @media (max-width: 767.98px) {
           .owl-prev, .owl-next {
                height: 0px;
                top:-50px;
            }
        }


        @media (max-width: 520.98px) {
           .owl-prev, .owl-next {
                height: 0px;
                top:-30px;
            }
        }

        
    }


}
.owl-prev, .owl-next { background-color: transparent !important;}
.owl-left-right {height: 40px; background-color: transparent !important;}
/* end owl */


.inputypelogin {border-right: 1px solid #c3cad2;}
.inputpasslogin {border-right: 0px; width: 261px !important;}
.showhidepassword {border: 1px solid #c3cad2; border-left: 0px; border-radius: 0px 4px 4px 0px;}
.showhidepassword a, .showhidepassword a:hover {color: #59626a; font-size: 12px; padding-right:10px;}
.form-control {height: 45px;}


.bg-header-instagram {background-image: linear-gradient(to right,#232374, #185aa3, #232374);}
/*
.bg-header-instagram {background-color: #429681;}
*/
.text-follow-ig {position: relative; top:-1px;}

.bg-footer {background-image: linear-gradient(to right,#232374, #185aa3, #232374); color:#ffffff; font-size: 12px;}
.bg-footer a, .bg-footer a:hover, .bg-footer p {color: #ffffff;}
.bg-footer .social-media i {font-size: 18px; margin-left: 5px; background-color: #000000; padding: 10px 12px; border-radius: 50%;}
.bg-footer .social-media .ifirst {margin-left: 0px;}
/*
.bg-footer {background-color: #f3f3f3; color: #555555; font-size: 14px;}
.bg-footer a, .bg-footer a:hover, .bg-footer p {color: #555555;}
.bg-footer .social-media i {font-size: 18px; margin-left: 5px; background-color: #000000; padding: 10px 12px; border-radius: 50%; color: #ffffff;}
.bg-footer .social-media .ifirst {margin-left: 0px;}
*/
.navbar-instagram {font-size: 20px; font-weight: bold;}
.navbar-instagram i {font-size: 24px;}
.navbar-instagram a, .navbar-instagram a:hover {color:#ffffff;}
.header-logo img {height: 100px;}
.header-link-nav {color: #555555; height: 18px; margin-left: 6px; margin-right: 6px; font-size: 18px;}
.header-link-nav img {height: 25px;}
.nav-main-menu a,.nav-main-menu a:hover { color:#191c1f; font-size: 18px; font-weight: bold;}
.nav-main-menu .active {color: #000000 !important;}
@media (max-width: 520.98px) {
  .nav-main-menu a,.nav-main-menu a:hover { font-size: 16px; font-weight: bold; padding: 10px;}
  .navbar-instagram {font-size: 22px; font-weight: bold;}
  .navbar-instagram i {font-size: 32px;}
}
.product-thumb-title, .product-thumb-title a, .product-thumb-title a:hover {color: #161a18; font-size: 15px; font-weight: bold;}
.product-thumb-subtitle, .product-thumb-subtitle a, .product-thumb-subtitle a:hover {font-size: 13px; color: #636665;}
.product-thumb-price {color: #f00f00; font-size: 14px; font-weight: bold;}
.product-thumb-btn-buy {}
.product-thumb-price-coret {color: #b2b2b2; font-size: 14px; text-decoration: line-through;}

.product-thumb-title-newarrival, .product-thumb-title-newarrival a, .product-thumb-title-newarrival a:hover {color: #161a18; font-size: 14px; font-weight: bold;}
.product-thumb-subtitle-newarrival, .product-thumb-subtitle-newarrival a, .product-thumb-subtitle-newarrival a:hover {font-size: 14px; color: #636665;}


@media (max-width: 520.98px) {
    .product-thumb-title, .product-thumb-title a, .product-thumb-title a:hover {color: #161a18; font-size: 12px; font-weight: bold;}
    .product-thumb-subtitle, .product-thumb-subtitle a, .product-thumb-subtitle a:hover {font-size: 12px; color: #636665;}
    .product-thumb-price {color: #f00f00; font-size: 12px; font-weight: bold;}
    .product-thumb-btn-buy {}
    .product-thumb-price-coret {color: #b2b2b2; font-size: 12px; text-decoration: line-through;}

    .product-thumb-title-newarrival, .product-thumb-title-newarrival a, .product-thumb-title-newarrival a:hover {color: #161a18; font-size: 12px; font-weight: bold;}
    .product-thumb-subtitle-newarrival, .product-thumb-subtitle-newarrival a, .product-thumb-subtitle-newarrival a:hover {font-size: 12px; color: #636665;}
}
/*
.btn-larosanna {background-image: linear-gradient(to right,#232374, #185aa3, #232374); border:0px; font-size: 10px; padding: 5px 30px;}
*/
@media (max-width: 767.98px) {
  .best-seller-hide {display: none !important;}
}
.title-homepage {font-weight: bold; font-size: 35px; color:#555555;}
.rounded-shop {border-radius: 20px;}
.subcribe-input {height: 28px !important; border: 0px;}
.envelope {font-size: 37px; position: relative; top:-4px; margin-right: 5px;}

@media (max-width: 520.98px) {
    .title-homepage {font-size: 25px;}
}

.btn-search {background-image: linear-gradient(to right,#232374, #185aa3, #232374); color:#ffffff;}
.bagde-discount {background-image: linear-gradient(to right,#f00f00, #d61104, #f00f00); color: #ffffff !important; position: absolute; text-align: center; padding: 12px 10px; }
.bagde-new {background-image: linear-gradient(to right,#232374, #185aa3, #232374); color: #ffffff !important; position: absolute; text-align: center; padding: 12px 10px; }

.nav-link, .nav-link a, .nav-link a:hover{color:black; padding: 12px 16px;}
.nav-main-menu .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  left: -2px;
  top:50px;
}

.dropdown a, .dropdown a:hover {color:black; padding: 12px 16px;}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 100;
  left: -2px;
  top:40px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content {padding: 0px; margin: 0px;}
.dropdown:hover .dropdown-content {
  display: block;
}


.pagination > li > a
{
    background-color: white;
    color: #555555;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover
{
    color: #5a5a5a;
    background-color: #eee;
    border-color: #ddd;
}

.pagination > .active > a
{
    color: white;
    background-color: #555555 !Important;
    border: solid 1px #555555 !Important;
}

.pagination > .active > a:hover
{
    background-color: #555555 !Important;
    border: solid 1px #555555;
}
.icon-topright-header {position: absolute; top:40px; right:110px;}
.header-logo-m img {width: 130px;}

.offcanvas-link {font-size:18px; color: #000000;}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.btn:active, .btn:focus {
    outline: none;
    box-shadow: none;
}

.product-title, .product-title a, .product-title a:hover {color: #161a18; font-size: 20px; font-weight: bold;}
.product-subtitle, .product-subtitle a, .product-subtitle a:hover {font-size: 14px; color: #636665;}
.product-price {color: #f00f00; font-size: 28px; font-weight: bold;}
.product-btn-buy {}
.product-price-coret {color: #636665; font-size: 14px; text-decoration: line-through;}
.bintang-ulasan {height: 20px; padding:0px !important;}
.bintang-ulasan img{height:18px !important;}
.produk-page .bintang-ulasan {height: 20px; padding:0px !important;}
.produk-page .bintang-ulasan img{height:18px !important; position: relative; top:-4px}
.jlh-ulasan {font-size: 12px; padding:0px; padding-left: 3px;}
.text-discount {color:#f00f00; margin-left: 10px; font-weight: bold;}
.product-qty {color: #636665; font-size: 14px; padding-top: 4px; margin-right: 20px;}
.btn-number, .btn-number-cart {border:1px solid #000; padding: 3px 8px;}
.input-number, .input-number-cart {border: 1px solid #000; height: 32px; width: 45px !important; color: #000; font-size: 20px;}
.btn-buy-now, .btn-buy-now:hover{ background-image: linear-gradient(to right,#232374, #185aa3, #232374); color: #ffffff; font-weight: bold; font-size: 22px; border-radius: 18px; padding: 4px 20px;}
.btn-add-to-cart, .btn-add-to-cart:hover {border:3px solid #232374; border-radius: 18px; padding: 4px 20px; font-size: 20px; font-weight: bold; color: #232374;}
.addWishList img {height: 30px;}
.addWishList {background-color: #fff; border-radius: 50%; border: 0px; padding: 5px 5px; width: 45px; height: 45px}
.removeWishList img {height: 30px;}
.removeWishList {background-color: #f00; border-radius: 50%; border: 0px; padding: 5px 5px; width: 45px; height: 45px}
.tabs-text, .tabs-text p {color: #555555; padding: 10px 0px; font-family: Helvetica; font-size: 14px;}
.nav-tabs .nav-item .nav-link {color:#999 !important; border:0px; background-color: transparent !important;}
.nav-tabs .nav-item .active {color:#000 !important; border:0px;}
.bg-tab-content {background-image: linear-gradient(to right,#f9f9f9, #f3f3f3);; min-height: 200px;}
.account-link {font-size: 16px; color: #777; font-weight: 500;}
.account-link-active {font-size: 16px; color: #191c1f; font-weight: 600;}
.red-circle {font-size: 11px; position: absolute; padding: 2px 8px; margin-left: -4px;}
#redWishlist2 {position: absolute; margin-left: -8px; margin-top:-10}
#redCart2,#redCart3 {position: absolute; margin-left: -10px; margin-top:-10}


.icon-notif-in {
    -webkit-animation-name: bounce; 
    animation-name: bounce;
    -webkit-animation-duration: 1s;
    animation-duration: 1s; 
}
@keyframes bounce { 
    0% {transform: translateY(-25%);}
    20% {transform: translateY(15%);}
    40% {transform: translateY(-15%);}
    60% {transform: translateY(5%);}
    80% {transform: translateY(-5%);}
    100% {transform: translateY(0%);}
}

.navcart {position:absolute; bottom:0px; width: 100%; z-index: 100}
.cart-produk-title,.cart-produk-title:hover {color:#555; font-weight: bold;}
.cart-produk-price {color:#555; }
.cart-produk-price-coret { color:#b2b2b2;}
.subtotalcart {font-size: 16px; color: #000;}

.border-bottom-lg {border-bottom: 0px;}
@media (min-width: 767.98px) {
    .border-bottom-lg {border-bottom: 1px solid #d2d2d2;}
}

.borderulasanempty {border-right: 1px solid #e2e2e2;}
@media (max-width: 990px) {
    .borderulasanempty {border:0px;}
}


.review-profile{ font-size: 30px; padding: 12px 18px; width:100px; height: 100px;}
@media (max-width: 767.98px) {
    .review-profile{ font-size: 20px; padding: 5px 9px; width: 25px; height: 25px;}
}

#qna p {padding-top: 2px; padding-bottom: 2px; margin-bottom: 3px;}

/* events */
.events-img img{ width: 100%}
.events-date a ,.events-date a:hover { color:#b2b2b2; font-size:12px; }
.events-title a {color: #40403f; font-weight: bold; font-size: 14px;}
/* end events */

.btn-success, .btn-success:hover {background-color: #32bf74 !important; border-color :#32bf74 !important;}
.readnews-content , .readnews-content p {color: #000000; font-size:16px; font-family: Helvetica; font-weight: 300;}