/* RPM case styles - standalone, paths relative to assets/img/img/ */
/* Override .body padding-right from general.css */
.page-vse-keysy--case-open.body {
  padding-right: 0;
}
.page-vse-keysy--case-open #dyslider {
  margin-left: 90px;
}
.page-vse-keysy--case-open #dyslider section.section {
  width: 100%;
}
.page-vse-keysy--case-open button#next {
  left: 90px;
  width: calc(100% - 90px);
}
.page-vse-keysy--case-open .scrollbar {
  right: 0;
}

@media screen and (max-width: 1024px) {
  section.case.rpm h2 {
    padding: 0 20px !important;
  }
  section.case.rpm .withbefore-line {
    padding-left: 20px;
    margin-bottom: 20px;
  }
  section.case.rpm .withbefore-lineCenter {
    color: #000;
  }
}

@media screen and (min-width: 1025px) {
  section.case.rpm .content-new-txtTopCenter {
    width: calc(100% - 80px);
    height: 100%;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 80px 80px 0 !important;
    text-align: center;
    box-sizing: border-box;
  }
  section.case.rpm .content-new-txtRight {
    margin-left: 0;
  }
  section.case.rpm.easy-operate .withbefore-lineCenter {
    margin-bottom: 50px;
    color: #000 !important;
  }
  section.case.rpm .withbefore-lineCenter {
    margin-bottom: 50px;
    color: #fff !important;
  }
}

@media screen and (max-width: 1024px) {
  section.case.rpm .withbefore-line {
    padding-left: 20px;
    margin-bottom: 20px;
    padding-right: 20px;
  }
  section.case.rpm .withbefore-lineCenter {
    color: #000;
  }
  section.case.rpm.result .withbefore-lineCenter {
    color: #fff;
  }
  section.case.rpm .content-new-txtTopCenter .withbefore-lineCenter {
    padding: 0 20px;
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .page-vse-keysy--case-open.body {
    margin-top: 52px;
    height: calc(100vh - 52px);
  }
  .page-vse-keysy--case-open #dyslider {
    margin-left: 0;
  }
  .page-vse-keysy--case-open #dyslider section.section {
    height: calc(100vh - 52px) !important;
    padding-bottom: 70px;
  }
  .page-vse-keysy--case-open button#next {
    left: 0;
    width: 100%;
  }
}

/* RPM-specific styles from original rpm.css */
section.rpm{background-color:#fff;overflow:hidden}
section.rpm .text-width{width:100%;max-width:650px}
section.rpm h2{color:#4b4b4e;text-transform:uppercase}
section.rpm:first-child{background-image:url(../img/img/mainimg.jpg)}
section.rpm:first-child .mymouse{top:auto;bottom:50px}
section.rpm:first-child span.case-name{letter-spacing:1em;padding-left:1em}
section.rpm:first-child .links{display:flex;flex-direction:column;align-items:flex-end}
section.rpm:first-child .links .link_to_site{margin-bottom:10px}
section.rpm:first-child .links .link_to_site span{border-bottom:1px solid rgba(255,255,255,.3)}
section.rpm.mocup .wrapper-mocup{position:absolute;left:0;top:0;width:100%;height:100%;display:flex;justify-content:flex-end;align-items:center}
section.rpm.mocup .mocup{max-width:calc(100% - 350px - 80px);max-height:70%;transform:translateX(23%)}
section.rpm.new-shelf .wrapper-img{position:absolute;bottom:0;right:0;height:100%;max-width:calc(100% - 610px);overflow:hidden}
section.rpm.new-shelf .wrapper-img img{height:100%}
section.rpm.select .wrapper-screens{position:absolute;left:80px;top:0;height:100%;width:calc(100% - 80px - 160px - 40% - 20px)}
section.rpm.select .wrapper-screens .block{position:absolute;left:0;top:0;height:100%;width:100%;display:flex;align-items:center;justify-content:flex-start;opacity:0;transition:opacity .7s}
section.rpm.select .wrapper-screens .block--active{opacity:1}
section.rpm.select .wrapper-screens .map-img{max-height:75%;max-width:100%}
section.rpm.select .wrapper-screens .filter-img{position:absolute;top:50%;transform:translate3d(0,-50%,0);min-width:150px;width:30%;max-height:40%}
section.rpm.select .text-width{width:40%;min-width:350px}
section.rpm.easy-operate{position:relative}
section.rpm.easy-operate .text-width{width:100%;max-width:650px}
section.rpm.easy-operate .wrapper-screen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:flex-end;justify-content:center}
section.rpm.easy-operate .screen{max-width:calc(85% - 160px);max-height:calc(100% - 270px)}
section.rpm.details{position:relative}
section.rpm.details .wrapper-screens{position:absolute;top:0;right:0;width:calc(100% - 80px - 650px);height:100%}
section.rpm.details .right-img{position:absolute;top:0;right:0;height:100%;width:100%;max-width:385px;background:url(../img/img/bg-details.jpg) center no-repeat;background-size:cover}
section.rpm.details .screen{position:absolute;opacity:0;transition:opacity 1s}
section.rpm.details .screen--visible{opacity:1}
section.rpm.details .screen1{top:calc(50% + 45px);right:560px}
section.rpm.details .screen2{top:calc(50% + 90px);right:470px;transition:opacity .5s}
section.rpm.details .screen3{top:calc(50% + 315px);right:143px}
section.rpm.details .screen4{top:calc(50% - 180px - 200px);right:365px}
section.rpm.details .screen5{top:calc(50% - 320px - 30px);right:125px}
section.rpm.approach .wrapper-scrollBlock{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:absolute;left:80px;top:0;height:100%;width:calc(100% - 80px - 160px - 590px);max-width:690px;text-align:center}
section.rpm.approach .wrapper-scrollBlock .wrapper-img{height:calc(100% - 144px);width:100%;overflow-y:auto;z-index:5}
section.rpm.approach .wrapper-scrollBlock .wrapper-img img{width:100%}
section.rpm.approach .wrapper-scrollBlock .mymouse{position:relative;height:30px;width:18px;top:auto;left:auto;border:1px solid #cb4b48}
section.rpm.approach .wrapper-scrollBlock .mymouse:before{background:#cb4b48}
section.rpm.approach .wrapper-scrollBlock p{margin:15px 0 18px;font-size:16px;color:#adadad}
section.rpm.approach .text-width{max-width:570px}
section.rpm.result{background-image:url(../img/img/new-result.jpg);color:#fff}
section.rpm.result h2{margin:60px 0 0;color:#fff}
section.rpm.result p{max-width:550px;margin-bottom:0}
section.rpm.result .link_to_site--new{margin-top:45px}
section.rpm.last h2{margin-bottom:50px}
section.rpm.last .mymouse{border:2px solid rgba(125,125,125,.7)}
section.rpm.last .mymouse:before{background:rgba(125,125,125,.7)}

@media screen and (max-width:1450px){section.rpm.details .text-width{max-width:520px}section.rpm.details .wrapper-screens{width:calc(100% - 80px - 530px)}}
@media screen and (max-width:1330px),(max-height:775px){section.rpm.details .text-width{max-width:500px}section.rpm.details .wrapper-screen{width:calc(100% - 80px - 510px)}section.rpm.details .screen1{width:33px;top:calc(50% + 25px);right:296px}section.rpm.details .screen2{width:82px;top:calc(50% + 50px);right:247px}section.rpm.details .screen3{width:261px;top:calc(50% + 175px);right:65px}section.rpm.details .screen4{width:149px;top:calc(50% - 205px);right:188px}section.rpm.details .screen5{width:185px;top:calc(50% - 160px - 30px);right:55px}}
@media screen and (max-width:1150px){section.rpm.mocup .content-new-txtLeft{align-items:flex-start;padding-top:80px}section.rpm.mocup .wrapper-mocup{justify-content:center;align-items:flex-end}section.rpm.mocup .wrapper-mocup .mocup{transform:translateX(0);max-width:80%;max-height:calc(100% - 300px - 42px);margin-bottom:42px}}
@media (max-width:1115px){section.rpm.select .wrapper-screens{width:calc(100% - 80px - 160px - 350px - 20px)}}
@media screen and (max-width:1080px){section.rpm.mocup .external-screen{margin-left:-130px}}
@media screen and (max-width:1024px){section.rpm.select .wrapper-screens{width:calc(100% - 80px - 350px - 40px)}section.rpm.approach .wrapper-scrollBlock{width:calc(100% - 80px - 340px)}section.rpm.approach .text-width{max-width:300px}}
@media screen and (max-width:900px){section.rpm.details .text-width{max-width:330px}section.rpm.details .wrapper-screens{width:calc(100% - 80px - 340px)}}
@media screen and (max-width:768px){section.rpm.mocup .content-new-txtLeft{flex-direction:column-reverse;justify-content:center}section.rpm.mocup .wrapper-mocup{height:auto;position:initial}section.rpm.mocup .wrapper-mocup .mocup{transform:translateX(0);max-width:80%;max-height:70%}section.rpm:first-child .content{height:100%}section.rpm.new-shelf .wrapper-img{max-width:80%;opacity:.2}section.rpm.select .wrapper-screens{width:100%;left:0}section.rpm.select .wrapper-screens .block{margin-top:62px;align-items:flex-start;height:calc(100% - 62px - 250px);overflow:hidden;background-size:cover;background-repeat:no-repeat;background-position:left top}section.rpm.select .wrapper-screens .block:first-child{margin: 0;height:40dvh;background-image:url(../img/img/new-filter1-1.jpg)}section.rpm.select .wrapper-screens .block:nth-child(2){background-image:url(../img/img/new-filter2-2.jpg)}section.rpm.select .wrapper-screens .block:last-child{background-image:url(../img/img/new-filter3-3.jpg)}section.rpm.select .wrapper-screens .map-img{display:none}section.rpm.select .wrapper-screens .filter-img{max-height:none}section.rpm.select .content-new-txtRight{align-items:flex-end;padding-bottom:20px}section.rpm.select .text-width{width:100%;min-width:auto}section.rpm.easy-operate .screen{max-width:95%;max-height:calc(100% - 270px)}section.rpm.easy-operate .content{justify-content:center;padding-top:20px}section.rpm.approach .content-new-txtRight{padding-top:80px;align-items:flex-start}section.rpm.approach .wrapper-scrollBlock{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:absolute;left:0;height:100%;width:100%;max-width:none}section.rpm.approach .wrapper-scrollBlock .wrapper-img{height:50%;width:calc(100% - 40px);overflow-y:hidden}section.rpm.approach .wrapper-scrollBlock .mymouse,section.rpm.approach .wrapper-scrollBlock p{display:none}section.rpm.approach .text-width{max-width:none}section.rpm.details .content-new-txtLeft{align-items:center;padding-top:80px;flex-direction:column}section.rpm.details .text-width{max-width:none}section.rpm.details .wrapper-screens{width:calc(100%);opacity:.2}section.rpm.details .right-img{max-width:100%;display:none}section.rpm.details .screen{right:auto;max-height:100%;opacity:1}section.rpm.details .screen1{top:500px;left:calc(50% - 112px)}section.rpm.details .screen2{width:75px;top:524px;left:calc(50% - 112px)}section.rpm.details .screen3{width:240px;top:630px;left:calc(50% - 112px)}section.rpm.details .screen4{width:140px;top:280px;left:calc(50% - 120px)}section.rpm.details .screen5{width:170px;top:300px;left:calc(50% - 30px)}}
@media screen and (max-height:680px){section.rpm:first-child .mymouse{bottom:20px}}