﻿/* Common */
 #nop4youSlider.swiper-container .swiper-slide {
     width: 100%;
     max-width: 100% !important;
     max-height: 100%;
     background-size: cover;
}
/* Slide Caption */
 #nop4youSlider.swiper-container .slide-caption {
     position:absolute;
     top:0;
     left:0;
     width:100%;
     height:100%;
     display:none;
     flex-direction:column;
     justify-content:center;
     visibility:hidden;
}
 #nop4youSlider.swiper-container .slide-caption.left {
     align-items: flex-end;
     padding: 0 0 0 10%;
}
 #nop4youSlider.swiper-container .slide-caption.center {
     align-items: center;
}
 #nop4youSlider.swiper-container .slide-caption.right {
     align-items: flex-start;
}
 #nop4youSlider.swiper-container .slide-caption.right .slide-header, #nop4youSlider.swiper-container .slide-caption.right .slide-body, #nop4youSlider.swiper-container .slide-caption.right .slide-footer {
     padding: 0 10% 0 0;
}
 #nop4youSlider.swiper-container .swiper-slide-active .slide-caption {
     visibility:visible;
}
 #nop4youSlider.swiper-container .slide-header {
     color:#fff;
     font-size:40px;
     text-align: center;
     font-style:normal;
     font-weight:600;
     line-height:1;
}
 #nop4youSlider.swiper-container .slide-body {
     color:#fff;
     font-size:24px;
     font-style:normal;
     font-weight:400;
     line-height: 1;
     margin-bottom: 10px;
     text-align: center;
}
 #nop4youSlider.swiper-container .btn-slider {
     font-size:18px;
     font-weight:500;
     text-transform:uppercase;
     background-color:#c44741;
     color:#fff;
     border-color:#fff;
     border-width:1px;
     padding:15px 30px;
}
 #nop4youSlider.swiper-container .btn-slider:hover {
     background-color:#000;
     color:#fff;
     border-color:#fff;
}
/* Slide Navigation */
 #nop4youSlider.swiper-container .nop4youSlider-next, #nop4youSlider.swiper-container .nop4youSlider-prev {
     position:absolute;
     display:flex;
     justify-content:center;
     align-items:center;
     width:50px;
     height:50px;
     top: calc(50% - 25px);
     font-size:16px;
     background:#fff;
     color:#000;
     border-radius:100%;
     z-index:1;
     outline:unset;
     box-shadow:none;
     cursor:pointer;
     transition:all .3s ease;
}
 #nop4youSlider.swiper-container .nop4youSlider-next span, #nop4youSlider.swiper-container .nop4youSlider-prev span {
     font-size: 30px;
     line-height: 1;
}
 #nop4youSlider.swiper-container .nop4youSlider-prev {
     left:calc(5% - 25px);
}
 #nop4youSlider.swiper-container .nop4youSlider-next {
     right:calc(5% - 25px);
}
 #nop4youSlider.swiper-container .nop4youSlider-next:hover,#nop4youSlider.swiper-container .nop4youSlider-prev:hover {
     box-shadow:0 0 0 6px rgba(196, 71, 65, .3);
     background:#c44741;
     color:#fff;
}
 #nop4youSlider.swiper-container .swiper-pagination {
     bottom: calc(5% + 30px);
}
 #nop4youSlider.swiper-container .swiper-pagination-bullet {
     width:15px;
     height:15px;
     background:#fff;
     box-shadow:unset;
     opacity:1;
     outline:unset;
     transition:all .3s ease;
     margin:0 15px;
}
#nop4youSlider.swiper-container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #c44741;
}
 #nop4youSlider.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active,#nop4youSlider.swiper-container .swiper-pagination-bullet:hover {
     background:#c44741;
     box-shadow:0 0 0 6px rgba(196, 71, 65, .3);
}
 #nop4youSlider.swiper-container,#nop4youSlider.swiper-container img {
     max-width: 100%;
     height: auto;
}
 #nop4youSlider.swiper-container .swiper-pagination-fraction {
     font-size: 24px;
     font-weight: 700;
     color: #fff;
}
 #nop4youSlider:not(.swiper-container-horizontal) .swiper-scrollbar {
     opacity: 0 !important;
 }
 #nop4youSlider.swiper-container-horizontal .swiper-scrollbar {
     opacity: 1 !important;
 }
 #nop4youSlider.swiper-container .swiper-scrollbar.bar {
     bottom: 0;
     left: 0;
     width: 100%;
     height: 4px;
     border-radius: 0;
     transition: opacity .3s ease;
}
 #nop4youSlider.swiper-container .swiper-scrollbar.bar .swiper-scrollbar-drag {
     width: 100% !important;
     background: #c44741;
     border-radius: 0;
     transform: unset !important;
}
#nop4youSlider.swiper-container .swiper-scrollbar.number {
     bottom: calc(5% + 25px);
     left: calc(5% - 25px);
     width: 50px;
     height: 50px;
     border-radius: 100%;
     background-color: rgba(196, 71, 65, .3);
     transition: opacity .3s ease;
}
 #nop4youSlider.swiper-container .swiper-scrollbar.number .swiper-scrollbar-drag {
     width: 100% !important;
     background: #c44741;
     border-radius: 100%;
     transform: unset !important;
}
/* CountdownBar animation */
.swiper-scrollbar.bar .progressAnimation {
     -webkit-animation-name: mymove;
     animation-name: mymove;
     animation-timing-function: linear;
     -webkit-animation-timing-function: linear;
}
 @-webkit-keyframes mymove {
     from {
         transform: translate3d(0px, 0px, 0px) scaleX(0) scaleY(1);
    }
     to {
         transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1);
    }
}
 @keyframes mymove {
     from {
         transform: translate3d(0px, 0px, 0px) scaleX(0) scaleY(1);
    }
     to {
         transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1);
    }
}
/* CountdownCircle animation */
.swiper-scrollbar.number .progressAnimation {
     -webkit-animation-name: mymove2;
     animation-name: mymove2;
     animation-timing-function: linear;
     -webkit-animation-timing-function: linear;
}
 @-webkit-keyframes mymove2 {
     from {
         transform: translate3d(0px, 0px, 0px) scaleX(0) scaleY(0);
    }
     to {
         transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1);
    }
}
 @keyframes mymove2 {
     from {
         transform: translate3d(0px, 0px, 0px) scaleX(0) scaleY(0);
    }
     to {
         transform: translate3d(0px, 0px, 0px) scaleX(1) scaleY(1);
    }
}
/* Delays */
.delay-0-5s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
.delay-1-5s {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
}
.delay-2-5s {
    -webkit-animation-delay: 2.5s;
    animation-delay: 2.5s;
}
.delay-3-5s {
    -webkit-animation-delay: 3.5s;
    animation-delay: 3.5s;
}
.delay-4-5s {
    -webkit-animation-delay: 4.5s;
    animation-delay: 4.5s;
}
/* Media Queries */
 @media (max-width: 1200px) {
     #nop4youSlider.swiper-container .slide-header {
         font-size: 52px;
         margin-bottom: 10px;
    }
     #nop4youSlider.swiper-container .slide-body {
         font-size: 18px;
         margin-bottom: 10px;
    }
     #nop4youSlider.swiper-container .btn-slider {
         font-size: 16px;
         padding: 12px 20px;
    }
}
 @media (max-width: 991px) {
     #nop4youSlider.swiper-container .slide-header {
         font-size: 42px;
         margin-bottom: 5px;
    }
     #nop4youSlider.swiper-container .slide-body {
         font-size: 18px;
         margin-bottom: 5px;
    }
     #nop4youSlider.swiper-container .btn-slider {
         font-size: 16px;
         padding: 12px 20px;
    }
}
 @media (max-width: 767px) {
     #nop4youSlider.swiper-container .swiper-scrollbar.number {
         width: 40px;
         height: 40px;
         left: calc(5% - 20px);
     }
     #nop4youSlider.swiper-container .slide-header {
         font-size: 32px;
         margin-bottom: 5px;
    }
     #nop4youSlider.swiper-container .slide-body {
         font-size: 16px;
         margin-bottom: 5px;
    }
     #nop4youSlider.swiper-container .btn-slider {
         font-size: 14px;
         padding: 10px 18px;
    }
     #nop4youSlider.swiper-container .nop4youSlider-next, #nop4youSlider.swiper-container .nop4youSlider-prev {
         width: 40px;
         height: 40px;
         top: calc(50% - 20px);
    }
     #nop4youSlider.swiper-container .nop4youSlider-prev {
         left: calc(5% - 20px);
    }
     #nop4youSlider.swiper-container .nop4youSlider-next {
         right: calc(5% - 20px);
    }
     #nop4youSlider.swiper-container .swiper-pagination-bullet {
         width: 12px;
         height: 12px;
    }
     #nop4youSlider.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active, #nop4youSlider.swiper-container .swiper-pagination-bullet:hover {
         box-shadow: 0 0 0 4px rgba(196, 71, 65, .3);
    }
}
 @media (max-width: 575px) {
    #nop4youSlider.swiper-container .swiper-pagination {
        bottom: 0;
    }
    #nop4youSlider.swiper-container p {
        margin-bottom: 0;
    }
    #nop4youSlider.swiper-container .swiper-scrollbar.number {
        width: 30px;
        height: 30px;
        left: 5%;
        bottom: 5%;
    }
     #nop4youSlider.swiper-container .slide-header {
         font-size: 22px;
         margin-bottom: 5px;
    }
     #nop4youSlider.swiper-container .slide-body {
         font-size: 14px;
         margin-bottom: 5px;
    }
     #nop4youSlider.swiper-container .btn-slider {
         font-size: 12px;
         padding: 8px 15px;
    }
     #nop4youSlider.swiper-container .slide-caption.right, #nop4youSlider.swiper-container .slide-caption.left {
         align-items: center;
         padding: 0;
    }
     #nop4youSlider.swiper-container .slide-caption.right .slide-header, #nop4youSlider.swiper-container .slide-caption.right .slide-body, #nop4youSlider.swiper-container .slide-caption.right .slide-footer {
         padding: 0;
    }
     #nop4youSlider.swiper-container .nop4youSlider-next, #nop4youSlider.swiper-container .nop4youSlider-prev {
         width: 30px;
         height: 30px;
         top: calc(50% - 15px);
    }
     #nop4youSlider.swiper-container .nop4youSlider-next {
         right: 5%;
    }
     #nop4youSlider.swiper-container .nop4youSlider-prev {
         left: 5%;
    }
     #nop4youSlider.swiper-container .swiper-pagination-bullet.swiper-pagination-bullet-active, #nop4youSlider.swiper-container .swiper-pagination-bullet:hover {
         box-shadow: 0 0 0 3px rgba(196, 71, 65, .3);
    }
     #nop4youSlider.swiper-container .swiper-pagination-bullet {
         width: 10px;
         height: 10px;
    }
     #nop4youSlider.swiper-container .swiper-scrollbar {
         bottom: 0;
    }
}
