/* CSS Document */
.dt-sc-special-carousel-wrapper { margin: 0 40px 0 0; position: relative; z-index: 1; }
.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-title { font-size: 120px; font-weight: bold; line-height: 0.65em; opacity: 0.13; pointer-events: none; position: absolute; bottom: 0; text-transform: uppercase; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper .dt-sc-special-carousel-item-index { color: #fff; font-size: 120px; font-weight: 600; line-height: normal; position: absolute; left: 0; z-index: 0; -webkit-transform: translateX(-90%) translateY(-25%); transform: translateX(-90%) translateY(-25%); }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper .dt-sc-special-carousel-item-index:before { content: "\0030"; }
.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper .dt-sc-special-carousel-item-index:after { background-color: #76b915; content: ""; height: 1.75em; position: absolute; left: 50%; top: 50%; width: 1.75em; z-index: -1; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

.dt-sc-special-carousel-wrapper .slick-list { overflow: visible !important; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item { opacity: 1 !important; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-perspective: 1000px; perspective: 1000px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item > * { opacity: 0; position: relative; -webkit-transition: opacity 0.35s linear 0s, left 0.5s linear 0s; transition: opacity 0.35s linear 0s, left 0.5s linear 0s; }
.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item.slick-current.slick-active > * { opacity: 1; left: 0; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-image { margin-bottom: 75px; left: 10%; width: 45%;  /*-webkit-transform: translateZ(-125px); transform: translateZ(-125px); -webkit-transition-delay: 0.35s; transition-delay: 0.35s; */ }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-image img { width: 100%; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper { background-color: #fff; background-image: url(../images/star-yoga-chakra-bgimage.png); background-position: 185% 185%; background-repeat: no-repeat; padding: 100px 75px 100px 100px; left: -10%; width: 55%; z-index: 1; -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.1); }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item:hover .dt-sc-special-carousel-item-content-wrapper {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper {
    animation: 4s float_bg infinite paused;
    -webkit-animation: 4s float_bg infinite paused;
}

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper h4,
.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper h5 { margin-top: 0; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper h4 { font-size: 24px; font-weight: 600; }
.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper h5 { font-size: 18px; font-weight: normal; margin-bottom: 35px; padding-bottom: 35px; position: relative; }
.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper h5:after { background-color: currentColor; content: ""; height: 1px; position: absolute; bottom: 0; left: 0; width: 47px; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper .dt-sc-special-carousel-item-content-desc { margin-bottom: 50px; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-image { position: relative; z-index: 0; }
.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-image:after { background-image: url(../images/sqr-pattern-image.png); background-position: 2px 2px; background-repeat: repeat; background-size: 20px 20px; content: ""; height: auto; margin: 20px -20px -20px 20px; pointer-events: none; position: absolute; bottom: 0; left: 0; right: 0; top: 0; width: auto; z-index: -1; -webkit-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; }

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-image:after { 
    -webkit-animation: 4s floating infinite running;
    animation: 4s floating infinite running;
}

.dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item:hover .dt-sc-special-carousel-item-image:after { 
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

-webkit-@keyframes floating {
    0% { -webkit-transform: translateY(0%); }
    50% { -webkit-transform: translateY(-10%); }
    100% { -webkit-transform: translateY(0%); }
}

@keyframes floating {
    0% { transform: translateY(0%); }
    50% { transform: translateY(-10%); }
    100% { transform: translateY(0%); }
}

-webkit-@keyframes float_bg {
    0% { background-position: 185% 185%; }
    50% { background-position: 135% 135%; }
    100% { background-position: 185% 185%; }
}

@keyframes float_bg {
    0% { background-position: 185% 185%; }
    50% { background-position: 135% 135%; }
    100% { background-position: 185% 185%; }
}


.dt-sc-special-carousel-wrapper .carousel-arrows { padding: 0 0 0 30px; position: absolute; bottom: 25px; right: 0; width: 45%; }

.dt-sc-special-carousel-wrapper .carousel-arrows button { border-width: 0; color: #b1a684; height: auto; letter-spacing: 0; margin-top: 0; padding: 0; pointer-events: none; position: relative; left: auto; right: auto; top: auto; text-align: center; width: 50%; -webkit-border-radius: 50%; border-radius: 50%; -webkit-transform: none; transform: none; background: transparent; }

.dt-sc-special-carousel-wrapper .carousel-arrows button, .dt-sc-special-carousel-wrapper .carousel-arrows button:before { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.dt-sc-special-carousel-wrapper .carousel-arrows button.slick-next { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end }

.dt-sc-special-carousel-wrapper .carousel-arrows button:hover { border-color: currentColor; }

.dt-sc-special-carousel-wrapper .carousel-arrows button span { display: none; }

.dt-sc-special-carousel-wrapper .carousel-arrows button:before { border: 1px solid; color: inherit; font-family: 'Pe-icon-7-stroke'; font-size: 50px; height: 42px; line-height: 42px; opacity: 1; pointer-events: auto; position: relative; z-index: 1; width: 42px; -webkit-border-radius: 50%; border-radius: 50%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }

.dt-sc-special-carousel-wrapper .carousel-arrows button.slick-prev:before { content: "\e686"; }
.dt-sc-special-carousel-wrapper .carousel-arrows button.slick-next:before { content: "\e684"; }

.dt-sc-special-carousel-wrapper .carousel-arrows button:after { border-style: dashed; border-width: 0 0 1px; border-color: #b1a684; content: ""; height: 1px; margin: auto; position: absolute; bottom: 0; left: 0; top: 0; width: 100%; }


/* Note: Design for a width of 768px */
@media only screen and (max-width:1280px) {

    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item { 

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;

    }

    .dt-sc-special-carousel-wrapper { margin: 0; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-title { left: 5px; bottom: 30%; -webkit-transform-origin: left center; transform-origin: left center; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper .dt-sc-special-carousel-item-index { left: 15px; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item > *, .dt-sc-special-carousel-wrapper .carousel-arrows { width: 85% !important; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-image { margin-bottom: 35px; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper { left: auto; }
    .dt-sc-special-carousel-wrapper .carousel-arrows { margin: 0 auto; padding: 0; position: relative; bottom: 0; left: 0; right: 0; }

}


/* Note: Design for a width of 768px */
@media only screen and (min-width:1025px) and (max-width:1280px) {

    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-title { left: 20px; bottom: 35%; }

}

/* Common Styles for the devices below 767px width */
@media only screen and (max-width: 767px) {

    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-title { font-size: 90px; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; z-index: 1; -webkit-transform: none; transform: none; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper .dt-sc-special-carousel-item-index { display: inline-block; font-size: 75px; margin: 0 0 35px; position: relative; left: auto; text-align: center; width: 100%; -webkit-transform: none; transform: none; }

    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper { background-position: 50% 150%; padding-left: 30px; padding-right: 30px; text-align: center; -webkit-animation: none; animation: none; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper h5:after { margin: auto; left: 0; right: 0; }
    .dt-sc-special-carousel-wrapper .dt-sc-special-carousel-item .dt-sc-special-carousel-item-content-wrapper .dt-sc-special-carousel-item-content-desc { margin-bottom: 0; }
    .dt-sc-special-carousel-wrapper .carousel-arrows { position: absolute; bottom: -50px; }

}