.slide-home-image .swiper-slide {overflow: hidden;}
.slide-home-image .swiper-slide  {padding: 0px;}

@keyframes slideRight {
    0% {
        transform: translateX(200%);
        opacity: 0;
    }
    30% {
        transform: translateX(-40px);
        opacity: 0.5;
    }
    60% {
        transform: translateX(5px);
        opacity: 0.75;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(-200%);
        opacity: 0;
    }
    30% {
        transform: translateX(-40px);
        opacity: 0.5;
    }
    60% {
        transform: translateX(5px);
        opacity: 0.75;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideUp {
0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    transform: translateY(60px);
  }
  80% { transform: translateY(-20px); }
  100% { transform: translateY(0); }


}

@keyframes slideDown {
0% {
    opacity: 0;
    transform: translateY(100%);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% { transform: translateY(30px); }
  100% { transform: translateY(0); }


}

@keyframes floatAndGrow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(2px, -2px) scale(1.02);
  }
  50% {
    transform: translate(-2px, 2px) scale(1.02);
  }
  75% {
    transform: translate(2px, 2px) scale(1.02);
  }
}

@keyframes growBrightenShake {
0% {
    transform: scale(0) translate(0, 0);
    opacity: 0;
  }
  20% {
    transform: scale(0.2) translate(-3px, -3px);
    opacity: 0.5;
  }
  
  30% {
    transform: scale(0.3) translate(-3px, -3px);
    opacity: 0.5;
  }
  
  40% {
    transform: scale(0.4) translate(3px, 3px);
    opacity: 0.7;
  }
  
  50% {
    transform: scale(0.5) translate(3px, 3px);
    opacity: 0.7;
  }
  
  60% {
    transform: scale(0.6) translate(-2px, 2px);
    opacity: 0.9;
  }
  
   70% {
    transform: scale(0.7) translate(-2px, 2px);
    opacity: 0.9;
  }
  
  80% {
    transform: scale(0.9) translate(2px, -2px);
    opacity: 0.95;
  }
  100% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
}

@keyframes slideLeftNew {
   0% {
       transform: translateX(-200%);
       opacity: 0;
   }
   100% {
       transform: translateX(0);
       opacity: 1;
   }
}

@keyframes slideRightNew {
   0% {
       transform: translateX(200%);
       opacity: 0;
   }
   100% {
       transform: translateX(0);
       opacity: 1;
   }
}

@keyframes slideTopNew {
   0% {
       transform: translateY(-100%);
       opacity: 0;
   }
   100% {
       transform: translateY(0);
       opacity: 1;
   }
}

@keyframes slideBottomNew {
   0% {
       transform: translateY(100%);
       opacity: 0;
   }
   100% {
       transform: translateY(0);
       opacity: 1;
   }
}



@media (min-width :576px) {

.swiper-slide-active .animation-1 {
  animation: slideLeft 2.5s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active .animation-2 {
   animation: slideRight 2.5s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active .animation-3 {
  animation: slideUp 1s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
 }
.swiper-slide-active .animation-4 {
  animation: slideDown 1s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active .animation-5 {
  animation: growBrightenShake 0.5s ease-in-out, floatAndGrow 8s ease-in-out 1s infinite;
}

.swiper-slide-active .animationtext-1 {
   opacity: 0;
   transform: translateX(-100%);
   animation: slideLeftNew 0.5s ease-out forwards;
}
.swiper-slide-active .animationtext-2  {
    opacity: 0;
   transform: translateX(100%);
   animation: slideRightNew 0.5s ease-out forwards;
 }
.swiper-slide-active .animationtext-3  {
   opacity: 0;
   transform: translateY(-100%);
   animation: slideTopNew 0.6s ease-out forwards;
}
.swiper-slide-active .animationtext-4 {
    opacity: 0;
   transform: translateY(100%);
   animation: slideBottomNew 0.6s ease-out forwards;
}

.swiper-slide-active .animationtext-5 {
  animation: growBrightenShake 0.5s ease-in-out;
  animation-delay: 0.5s;
}

.slide-home-image .align-1 {text-align: left !important;}
.slide-home-image .align-2 {text-align: center !important;}
.slide-home-image .align-3 {text-align: right !important;}

}

@media (max-width :575px) {

.swiper-slide-active .animationm-1 {
  animation: slideLeft 1.5s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active .animationm-2 {
   animation: slideRight 1.5s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active .animationm-3 {
  animation: slideUp 1s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
 }
.swiper-slide-active .animationm-4 {
  animation: slideDown 1s ease-out, floatAndGrow 8s ease-in-out 1.4s infinite;
}
.swiper-slide-active .animationm-5 {
  animation: growBrightenShake 0.3s ease-in-out, floatAndGrow 8s ease-in-out 0.6s infinite;
}

.swiper-slide-active .animationtextm-1 {
   opacity: 0;
   transform: translateX(-100%);
   animation: slideLeftNew 0.5s ease-out forwards;
}
.swiper-slide-active .animationtextm-2  {
    opacity: 0;
   transform: translateX(100%);
   animation: slideRightNew 0.5s ease-out forwards;
 }
.swiper-slide-active .animationtextm-3   {
   opacity: 0;
   transform: translateY(-100%);
   animation: slideTopNew 0.6s ease-out forwards;
}
.swiper-slide-active .animationtextm-4  {
    opacity: 0;
   transform: translateY(100%);
   animation: slideBottomNew 0.6s ease-out forwards;
}

.swiper-slide-active .animationtextm-5 {
  animation: growBrightenShake 0.5s ease-in-out;
  animation-delay: 0.5s;
}

.slide-home-image .alignm-1 {text-align: left !important;}
.slide-home-image .alignm-2 {text-align: center !important;}
.slide-home-image .alignm-3 {text-align: right !important;}

}


.collection-zone {position: relative; padding: 50px 0px}
.collection-zone:before {content: ''; width: 100%; position: absolute; left: 0px; top: 0px; height: 85%; background: #f5f5f5; z-index: -1;}
.collection-zone .prod-box {background: #fff;}
.collection-zone .head-bm-big {font-size: 24px;  font-weight: 600; margin-bottom: 0px;}
.collection-zone .collection-text {background: #fff; padding: 30px; border-radius: 5px; max-width: 320px;}
.collection-zone .image_title  {padding-left: 40px; padding-top: 40px;}
.collection-zone .collection-text p {font-size: 13px; font-weight: 500; margin-bottom: 20px; line-height: 24px;}
.collection-zone .info-box {padding-right: 0px; padding-left: 0px;}
.collection-zone .info-icon {height: 78px;  display: inline-block;  border-radius: 5px; max-width: 200px; width: max-content;  background-image: linear-gradient(#f3da00, #f3da00), 
                      linear-gradient(#adbb26, #adbb26), 
                      linear-gradient(#f29017, #f29017), 
                      linear-gradient(#445194, #445194), 
                      linear-gradient(#d90b1b, #d90b1b),  
                      linear-gradient(#8f136b, #8f136b);     
    background-size: 50% 26px, 100% 26px, 50% 26px, 100% 26px, 50% 26px, 100% 26px; 
    background-repeat: no-repeat;
    background-position: 0% 0px, 50% 0px, 0% 26px, 50% 26px, 0% 52px, 50% 52px; 
    box-shadow: 2px 3px 15px 9px rgba(0,0,0,0.1);  
    margin-bottom: 5px;
}
.collection-zone .info-icon span {display: inline-flex;  align-items: center; justify-content: center; background: #fff; line-height: 20px; margin: 10px; max-width: 150px; border-radius: 6px; font-size: 14px; font-weight: 600; height: 58px; overflow: hidden; text-align: center; min-width: 140px; padding: 8px 4px;}
.collection-zone .baner-head {margin-top: 35px;font-size: 20px;font-weight: 600;padding-left: 0px;margin-bottom: 25px !important;}
.collection-zone .more-collections .btn-border  {padding: 10px 16px; font-size: 12px; margin-left: 140px;}
.collection-zone .prod-box {padding-left: 30px; padding-right: 30px;}
.collection-zone .more-collections  {margin-top: 20px !important}

.container.home-width {padding: 0px;}
.home-width {width: 100% !important;}
.container.home-width #content-wrapper {padding: 0px;}
.container.home-width .container {padding-right: 0.625rem; padding-left: 0.625rem;}
.post-home .blog-title a {font-weight: 700; font-size: 15px}
.post-home .blog-title  {line-height: 22px; height: 50px; overflow: hidden;}
.blog-link a {font-weight: 700; font-size: 14px;}
.blog-link a .material-icons {position: relative;top: 7px;margin-left: 5px;}
.blog_home__navigation {position: absolute; top: 0px; right: 0px;}
.blog_home__header {position: relative}

.more-products {display: block !important}
p.head-bm-big {font-size: 24px; text-transform: uppercase; font-weight: 700; margin-bottom: 5px !important;}
p.head-bm-mini {font-weight: 400; font-size: 16px;}
.more-products {margin: 20px 0px}
.btn-border {border: 1px solid #333; padding: 11px 27px 11px 15px; position: relative; font-weight: 700; font-size: 12px; text-transform: uppercase;}
.btn-border .material-icons {padding-left: 0px; margin-left: -2px;}
.btn-border:hover .material-icons {padding-left: 2px;}
.btn-border .material-icons {color: #333}
.slide-box-image .box-bgb {position: relative; padding: 40px 0px;}
.slide-box-image .box-bgb:before {content: ''; position: absolute; background: #e3e3e3; height: 100%; width: 100%; bottom: 0px;}
.products-list__block--mini {text-align: left !impirtant}

.slide-box-image .slide-box-text {background: #fff; padding: 12px 0px; transition: all 0.2s ease-in;}
.slide-box-image .slide-box-text .baner-head {font-size: 16px !important; font-weight: 800 !important}
.slide-box-image .slide-box-text p {padding: 0px; font-weight: 500; display: block;  font-size: 14px; margin-bottom: 0px}
.slide-box-image .swiper-slide:hover .slide-box-text {background: #f9f9f9;}
.slide-box-image .swiper {margin-right: -0.625rem; margin-left: -0.625rem; position: relative}

@media only screen and (min-width: 992px) and (max-width: 1199px) { 


}

@media only screen and (min-width: 768px) and (max-width: 1199px) { 


}

@media ( min-width :1200px) {

.collection-zone .prod-box {padding-left: 40px; padding-right: 40px; }	
	
}


@media ( min-width :768px) {

.collection-zone .col-imgmob {display: none}

}

@media ( min-width :992px) {
#main .nav-link {padding: 0.5rem 1.25rem;}
.swiper-pagination.slider-home {text-align: right; padding-right: 50px; padding-bottom: 10px;}
.slide-box-image {margin-bottom: 70px !important}

}


@media ( max-width :991px) {
.home-xone-head {margin: 10px 0px !important;}
.more-products {margin: 20px 0px 5px !important}
p.head-bm-big {font-size: calc(1rem + 0.4838709677vw);}
.blog_home__header {margin-bottom: 20px !important;}
.homeslider.container {padding:0px}
.container.home-width .container {padding-right: 1.2rem; padding-left: 1.2rem;}

}

@media (max-width: 767px) {
.home-blog .swiper.product-slider .swiper-slide {max-width: 70%;}
.post-home .blog-title a {font-size: 14px;}
.post-home .blog-title {height: 46px;}
.collection-zone .col-imgdesk {display: none}

}

@media ( max-width :576px) {
p.head-bm-big {max-width: 80%; margin: 0 auto 20px;}
.collection-zone .collection-text {max-width: 260px;}
.collection-zone .image_title {padding-left: 25px; padding-top: 25px;}
.collection-zone .collection-text p {line-height: 22px;}
.collection-zone .collection-text {padding: 25px;}
.collection-zone .collection-text img {max-width: 130px;}

}