/* caro */
#slider>li{list-style-type: none !important;}
#slider {position: relative;height: calc(100% - 50px); }
.slides {padding: 0px 0px;position: relative;margin:0px 0px;width: 100%;height: 100%; }
.slides li { padding: 85px 0px !important;list-style-type: none;position: absolute;opacity: 0;-webkit-transition: opacity 0.65s ease-in-out;
 -o-transition: opacity 0.65s ease-in-out; transition: opacity 0.65s ease-in-out; }
.slides li.active {opacity: 1;-webkit-transition: opacity 0.65s ease-in-out;-o-transition: opacity 0.65s ease-in-out;transition: opacity 0.65s ease-in-out;
 -webkit-transition-delay: 0.4s;-o-transition-delay: 0.4s; transition-delay: 0.4s; }
.slides li.active .animate .from-bottom {-webkit-transform: translateY(0%);-ms-transform: translateY(0%); transform: translateY(0%);
-webkit-transition: -webkit-transform 0.55s ease;transition: -webkit-transform 0.55s ease;-o-transition: transform 0.55s ease; transition: transform 0.55s ease;
 transition: transform 0.55s ease, -webkit-transform 0.55s ease;-webkit-transition-delay: 0.45s;-o-transition-delay: 0.45s;
 transition-delay: 0.45s; }
.slides li.active .animate .from-left {-webkit-transform: translateX(0%); -ms-transform: translateX(0%);transform: translateX(0%);
-webkit-transition: -webkit-transform 0.55s ease;transition: -webkit-transform 0.55s ease;-o-transition: transform 0.55s ease;
 transition: transform 0.55s ease; transition: transform 0.55s ease, -webkit-transform 0.55s ease;-webkit-transition-delay: 0.45s;
 -o-transition-delay: 0.45s;
 transition-delay: 0.45s; }
.slides .slide-image { width: 50% !important;float: left; padding: 0 50px;text-align: center; overflow: visible; }
.slides .slide-image img { max-width: 100%; max-height: 36vw; vertical-align: middle; }
.slides .slide-content { max-width: 50%;display: inline-block; float: left; padding-right: 50px;text-align: left;-webkit-transform: translateY(25%);
-ms-transform: translateY(25%); transform: translateY(25%); }
 .slides .slide-content h2 {font-size: 3rem;line-height: 1.3em;margin: 0; }
 .slides .slide-content p { padding-left: 10px;font-size: 12px;color: #969696;line-height: 24px; }
 .slides .slide-content .product-type {text-transform: uppercase; font-size: 2rem; font-weight: 800; letter-spacing: 6px; text-align: left;color: #ca2227; }
 .slides .slide-content a {font-size: 14px;font-weight: bold;text-transform: uppercase;text-align: center;display: inline-block; padding: 5px 20px;
  text-decoration: none;color:white!important;position: relative; }
.slides .slide-content a:hover {text-decoration: none; }
.slides a.shop-now:before {content: ''; position: absolute; height: 100%;width:90%;right: 3px; background-color: #dae6e6; z-index: -1; top: 0;
 -webkit-transition: width 0.2s ease-out;-o-transition: width 0.2s ease-out; transition: width 0.2s ease-out; }
.animate {position: relative; overflow: hidden; }
.animate .from-bottom {-webkit-transform: translateY(100%);-ms-transform: translateY(100%);transform: translateY(100%);-webkit-transition: -webkit-transform 0.45s ease;
 transition: -webkit-transform 0.45s ease;-o-transition: transform 0.45s ease;transition: transform 0.45s ease;transition: transform 0.45s ease, -webkit-transform 0.45s ease; }
.animate .from-left {-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);-webkit-transition: -webkit-transform 0.45s ease;
 transition: -webkit-transform 0.45s ease;-o-transition: transform 0.45s ease;transition: transform 0.45s ease; transition: transform 0.45s ease, -webkit-transform 0.45s ease; }
.text-clip {background: url("http://res.cloudinary.com/faaezahmd/image/upload/v1496575220/bara-slider/3.jpg"); background-attachment: fixed;
 -webkit-text-fill-color: transparent;-webkit-background-clip: text; background-clip:text; background-size: 100% 100%;display: inline-block;font-size: 6rem;
 line-height: 100%; background-position: center;margin: 0;margin-left: -80px; }
 .text-clip span.small {font-size: 3rem;vertical-align: middle; }
 .text-clip .divider { width: 30px;display: inline-block;margin-left: 10rem;margin-right: 3rem;vertical-align: middle; }
 .slide-1 hr.slider-bottom { display: inline-block;border-bottom: 0px solid #969696;width: 320px;vertical-align: middle;margin-left: -10em; }
 .slide-1 hr.slider-top { border-bottom: 0px solid #969696;margin: 3em auto;width: 125px; }
 .slide-1 h4 { display: inline-block; letter-spacing: 5px;text-transform: uppercase; font-size: 0.7rem; padding-left: 40px; }
 .slider-bottom-area {margin-top: 100px;text-align: center; }
 #container {position: relative;height: 100vh; padding: 1em; }
 .line-two {padding-left: 10rem; }
 .slide-label {font-size: 25px;font-weight: 800;color: red;display: inline-block;position: absolute;left: 11%; top: 46%;z-index: 10; background-color:#fff9;
  padding: 6px 15px;border-radius: 50px; }
  .slider-nav {display: inline-block;position: absolute;width: 35px;right: 10px;bottom: 50%;top: 260px;cursor: pointer; }
 .slide-nav-up, .slide-nav-down {display: inline-block; padding-bottom: 12px;position: absolute; }
 .slide-nav-up { bottom: 0px; opacity: 0.5; }
 .slide-nav-down {border-bottom: 1px solid #969696;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);
  transform: rotate(180deg); opacity: 0.5; }
/* caro */

/* zoom */
.zoom {padding:2px;transition: transform .2s;}
.zoom:hover {transform: scale(1.1); }


@media (min-width:300px) and (max-width:767px){
 .btn {width:100% !important; padding: 10px 100px !important; font-size: 13px !important;} .slides .slide-content { display:none;}
 .slides li { padding: 30px 50px !important;} .slide-label {font-size: 12px;left: 30%;top: 43%; padding: 5px 17px;}
 .slider-nav {top: 100px;} .slide-label{left: 31%;} .slides .slide-image { width: 100% !important;}
}
@media (min-width:415px) and (max-width:767px){.slides li { padding: 30px 130px !important;} .slide-label {left: 40% !important;}}
@media (min-width:414px) and (max-width:520px){.slides li { padding: 23px 70px !important;}}

   @media only screen and (min-width: 375px) and (max-width:569px){ .slides .slide-content { display:none;}
   .slides li { padding: 30px 90px !important;} .slides .slide-image { width: 100% !important;}}
   @media only screen and (min-width: 570px) and (max-width: 1125px){
    .slides li { padding: 30px 0px !important;} .slides .slide-content p {padding-left:0px !important;font-size:17px !important;}
    .slides .slide-content .product-type {font-size: 20px;}
    }