.slider { margin: 30px auto 50px; position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }

.slider .slick-track, 
.slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }

.slider .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0 !important; }
.slider .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; }

.slider .slick-slide { display: none; float: left; height: 100%; min-height: 1px; color: #ffffff; }

.slider .slick-active { opacity: 0.5;  }
.slider .slick-active.slick-current { opacity: 1; position: relative; }

.slider.slider-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; }
.slider.slider-nav:before { position: absolute; content:""; right: 100%; left: -100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: block; bottom: 0; }
.slider.slider-nav:after { position: absolute; content:""; right: -100%; left: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: block; bottom: 0; }
.slider.slider-nav .slick-slide { cursor: pointer; padding: 20px 0; }
.slider.slider-nav .slick-active.slick-current:before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; display: block; }
.slider.slider-nav .sliderBlue.slick-active.slick-current:before { border-bottom: 2px solid #3474ff; }
.slider.slider-nav .sliderLightBlue.slick-active.slick-current:before { border-bottom: 2px solid #00aeff; }
.slider.slider-nav .sliderPurple.slick-active.slick-current:before { border-bottom: 2px solid #583bec; }
.slider.slider-nav .sliderGreen.slick-active.slick-current:before { border-bottom: 2px solid #11c979; }
.slider.slider-nav .sliderYellow.slick-active.slick-current:before { border-bottom: 2px solid #ffcc2a; }
.slider.slider-nav .sliderBlack.slick-active.slick-current:before { border-bottom: 2px solid #293443; }
.slider.slider-nav .sliderGray.slick-active.slick-current:before { border-bottom: 2px solid #e0e7ef; }
.slider.slider-nav .sliderRed.slick-active.slick-current:before { border-bottom: 2px solid #ec5050; }

.slider.slider-nav .draggable { max-width: 600px; margin: 0 auto; padding: 0 !important; }
.slider.slider-for .slick-list { position: relative; z-index: 0; }

.sliderContentBox { position: relative; z-index: 0; }
.sliderContentBox .sliderPersonBox { width: 100px; }
.sliderContentBox .sliderTestiomonialPersonBox { position: relative; z-index: 2; padding: 15px; }
.sliderContentBox.sliderBlue .sliderTestiomonialPersonBox { background-color: #3474ff; }
.sliderContentBox.sliderLightBlue .sliderTestiomonialPersonBox { background-color: #00aeff; }
.sliderContentBox.sliderPurple .sliderTestiomonialPersonBox { background-color: #583bec; }
.sliderContentBox.sliderGreen .sliderTestiomonialPersonBox { background-color: #11c979; }
.sliderContentBox.sliderYellow .sliderTestiomonialPersonBox { background-color: #ffcc2a; }
.sliderContentBox.sliderBlack .sliderTestiomonialPersonBox { background-color: #293443; }
.sliderContentBox.sliderGray .sliderTestiomonialPersonBox { background-color: #e0e7ef; }
.sliderContentBox.sliderRed .sliderTestiomonialPersonBox { background-color: #ec5050; }
.sliderContentBox .sliderPersonDetailWrap { position: relative; padding: 15px; }
.sliderContentBox .sliderPersonDetailWrap .sliderPersonDetailBox { /* font-size: 12px; line-height: 18px; */ }
.sliderContentBox .sliderPersonDetailWrap .sliderPersonVideoBox {  }
.sliderContentBox .sliderPersonDetailWrap .sliderPersonVideoBox .roll-effect-link-box:before { background-image: url("/resources/en/2checkout-site-img/link-video-icon.png"); width: 30px; height: 30px; margin-top: -15px; }
.sliderContentBox .sliderPersonDetailWrap .sliderPersonVideoBox .roll-effect-link-box:hover:before { right: 0; }
.sliderContentBox .sliderPersonDetailWrap .sliderPersonVideoBox .roll-effect-link-box .roll-effect-link { padding-right: 40px; line-height: 40px; height: 40px; }

@media (min-width: 320px) and (max-width: 767px){
    .sliderContentBox .sliderPersonBox { margin: 0 auto 30px; }
    .slick-arrow { display: none; } 
}

@media (min-width: 768px){
    .sliderContentBox { padding-left: 100px; padding-top: 50px;  }
    .sliderContentBox .sliderPersonBox { position: absolute; top: 0; left: 20px; z-index: 1; }
}

@media (min-width: 992px){
    .slider.slider-for .slick-list:before { -webkit-box-shadow: inset 300px 0px 100px -100px rgba(41, 52, 67, 1); content: ""; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; display: block; width: 300px; }
    .slider.slider-for .slick-list:after { -webkit-box-shadow: inset -300px 0px 100px -100px rgba(41, 52, 67, 1); content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; display: block; width: 300px; }
    .slider .slick-next { right: 17%; }
    .slider .slick-prev { left: 17%; }
    .sliderContentBox .sliderTestiomonialPersonBox { min-height: 160px; }
}

@media (min-width: 1200px){
    .sliderContentBox .sliderPersonDetailWrap .sliderPersonVideoBox { text-align: right; position: absolute; right: 0; top: 50%; margin-top: -15px; }
    .sliderContentBox .sliderPersonDetailWrap { padding: 15px 176px 15px 0; }
    .slider .slick-next { right: 20%; }
    .slider .slick-prev { left: 20%; }
}

@media (min-width: 1400px){
    .slider.slider-for { margin: 0 -100px; }
}