/*
Theme Name: tsquare
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* Banner Home */
.banner-home {margin-top:15px}

/* Banner */
.box_left, .box_center, .box_right {padding-bottom:10px}
.box_left {padding-right:0}
.box_right {padding-left:0}
.brand-item .icon-box-img {margin-bottom:0}


/*  Slider */
.swiper-container {width: 100%;position: relative;overflow: hidden;}
.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;background-size: cover;background-position: center;}
.mySwiper2 {height: 80%;width: 100%;}
.mySwiper {height: 20%;box-sizing: border-box;}
.mySwiper .swiper-slide {width: 25%;height: 100%;font-size:12px;align-items:center}
.mySwiper .swiper-slide-thumb-active {opacity: 1;font-weight:600}
.swiper-slide img {height: 100%;object-fit: cover;}
.swiper-container-thumbs .swiper-slide {justify-content: center;align-items: center;font-size: 12px;}
.mySwiper .swiper-slide:after {position:absolute;content:'';width:0;height:2px;background:var(--primary-color);left:0;bottom:0;transition: 0.3s all}
.mySwiper .swiper-slide-thumb-active:after {width:100%}
.swiper-button-next, .swiper-button-prev {background: rgb(0 0 0 / 30%);border-radius: 50px;color: #fff!important;width: 60px!important;height: 60px!important;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: -70px!important;padding-left: 25px;transition: 0.3s all}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: -70px!important;padding-right: 25px;transition: 0.3s all}
.swiper-container:hover .swiper-button-next {right: -30px!important;}
.swiper-container:hover .swiper-button-prev {left: -30px!important;}  
.swiper-button-next:after, .swiper-button-prev:after {font-family: "fl-icons" !important;speak: none !important;margin: 0;padding: 0;display: inline-block;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;position: relative;line-height: 1.2;font-size:24px!important}
.swiper-button-next:after {content: "\f105"!important;}
.swiper-button-prev:after {content: "\f104"!important;}
.slider-nav-circle .previous, .slider-nav-circle .next {background: rgb(0 0 0 / 30%);color: #fff!important;width: 30px!important;height: 60px!important;top: 30%;margin-top: 0 !important;}
.slider-nav-circle .previous {border-radius: 0 50px 50px 0;left: 0px!important;padding-left: 25px;transition: 0.3s all} 
.slider-nav-circle .next {border-radius: 50px 0 0 50px;right: 0px!important;padding-right: 25px;transition: 0.3s all}
.slider-nav-circle:hover .previous {left: 0px!important;}
.slider-nav-circle:hover .next {right: 0px!important;}
.slider-nav-circle .previous svg {left: 70%;}
.slider-nav-circle .next svg {left:30%}
/* .slider.slider-nav-circle {overflow:hidden} */
.slider.slider-nav-circle .flickity-prev-next-button svg {padding:35%}
.slider-nav-circle .flickity-prev-next-button svg, .slider-nav-circle .flickity-prev-next-button .arrow {border:0}
.slider-nav-circle .flickity-prev-next-button:hover svg, .slider-nav-circle .flickity-prev-next-button:hover .arrow {background-color: transparent !important;}
.product.product-small:hover {box-shadow: 0 3px 6px 0 rgb(0 0 0 / 16%);background-color: #fff;}
.slider.slider-nav-circle .product.product-small:hover {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;} 

.image-ads {height:100%;position: relative;}
.item-image-ads {overflow:hidden}
.item-image-ads:not(:last-child) {margin-bottom:11px}
.item-image-ads a {}
.item-image-ads img {display: block;}

/* Badge Sale */
.badge-container {margin:0}
.badge-circle-inside .badge-inner, .badge-circle .badge-inner {border-radius: 8px 30px 30px 0;background: #f00;position: relative;padding: 0 5px;}
.badge-circle-inside .badge-inner:after, .badge-circle .badge-inner:after {position: absolute;content: '';width: 3px;height: 15px;background: #8b0018;bottom: -5px;left: 0;z-index: -1;border-radius: 0 0 0 15px;}
.badge {height: 30px;width: 70px;font-size: 13px;margin-left: -12px;margin-top: -10px;}