/* Screenshot-box */
.screenshot-box {position:relative; border-radius:3px;}

/* Light text scheme*/
.screenshot-box--light {background:#fff; }
/* Dark text scheme*/
.screenshot-box--dark {background:#121212;}

.screenshot-box__title {color:#CD2122; line-height: 1.4; font-size: 16px; }
.screenshot-box__feature-title {font-size:14px; line-height:1.3; margin:5px 0 0; font-weight: 600;}
.screenshot-box__feature-desc {font-size: 11px; }
.screenshot-box .left-side ul.features {margin:20px 0; padding:0; list-style:none; }
.screenshot-box .left-side ul.features li {padding-left:35px; background-repeat:no-repeat; background-position: left center; margin-top:20px;}
.screenshot-box .left-side ul.features li:first-child {margin-top:0;}
.zn_screenshot-carousel {margin:0; padding:0; list-style:none;}
.zn_screenshot-carousel li {float:left}

/* Style 1 */
.screenshot-box.kl-style-1 {border:1px solid #b3b3b3; padding:15px 20px 20px 30px;}
.screenshot-box--dark.kl-style-1 {border-color:#323232;}
.screenshot-box.kl-style-1 .left-side {float:left; max-width: 90%;}
.screenshot-box.kl-style-1 .thescreenshot { overflow:hidden;float:right; margin-left:30px; width:580px; height:328px; padding:42px 16px 0 10px; position:relative; background-repeat:no-repeat; background-position: left top; margin-top: -40px; box-sizing: content-box;}
.screenshot-box.kl-style-1 .thescreenshot .controls {position:absolute; top:15px; left:17px; width:43px; height:19px;}
.screenshot-box.kl-style-1 .thescreenshot .controls a {display:block; width:21px; height:19px; float:left;}

/* Style 2 */
.screenshot-box.kl-style-2 { border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.screenshot-box.kl-style-2 .left-side { padding: 10px 0 25px 30px; }
.screenshot-box.kl-style-2 .left-side ul.features {margin: 25px 0;}
.screenshot-box.kl-style-2 .left-side ul.features li {padding-left: 50px; background-repeat:no-repeat; background-position: left center;}
.screenshot-box.kl-style-2 .screenshot-box__feature-title {margin: 0 0 5px; text-transform: uppercase;}
.screenshot-box.kl-style-2 .left-side > .btn { margin-left: 50px; }
.screenshot-box.kl-style-2 .thescreenshot { position: relative; background-color: #dcdee7; padding: 36px 0 0; border-top-left-radius: 4px; border-top-right-radius: 4px; margin-top: -10px; }
.screenshot-box.kl-style-2 .thescreenshot:before { content: ""; position: absolute; top: 15px; margin-top: 0; left: 30px; display: block; background: #ababab; border-radius: 50%; width: 7px; height: 7px; box-shadow: -12px 0 0 #ababab, 12px 0 0 #ababab; }
.screenshot-box.kl-style-2 .thescreenshot img { width: 100%; }
.screenshot-box.kl-style-2 .znSlickDots { position: absolute; bottom: 20px; text-align: center; left: 0; right: 0; z-index: 10; }
.screenshot-box.kl-style-2 .znSlickDots button {width: 35px;height: 3px;background-color: rgba(0,0,0,0.5);display: inline-block;margin: 0;-webkit-transition: color .2s ease;transition: color .2s ease;border-radius: 0;}
.screenshot-box.kl-style-2 .znSlickDots .slick-active button { background-color: #fff; }

@media (min-width: 1200px) {
    .screenshot-box .screenshot-box__title { font-size: 19px; }
    .screenshot-box .screenshot-box__feature-desc { font-size: 13px; }
    .screenshot-box.kl-style-2 .screenshot-box__title {font-size: 24px; font-weight: 100;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .screenshot-box .screenshot-box__title { font-size: 16px; }
    .screenshot-box .screenshot-box__feature-desc { font-size: 11px; }
    .thescreenshot {float:none;}
    .screenshot-box .left-side {width: auto; float: none; margin: 20px;}
}

@media (max-width: 767px) {
    .thescreenshot {float:none;}
    .screenshot-box .left-side {width: auto; float: none; margin: 20px;}
    .screenshot-box.kl-style-1 { padding: 0 25px }
    .screenshot-box.kl-style-1 .left-side {width: 100%; margin: 0 0 20px }
    .screenshot-box.kl-style-1 .thescreenshot { width: 100%; padding: 0; margin: 0; background: none; }
    .screenshot-box.kl-style-2 .left-side { padding: 0 30px 25px 30px }
    .screenshot-box.kl-style-2 .screenshot-box__title { text-align: center }
    .screenshot-box.kl-style-2 .left-side > .btn { margin-left: 0; display: block }
    .screenshot-box.kl-style-2 .thescreenshot { margin-top: 0 }
}