/*compareslider*/
.compareslider{position: relative; overflow: hidden;touch-action: none;user-select: none;}
.csliderContainer,.csliderContent{position: relative;
      touch-action: none;}
.csliderContent>*:first-child{position: absolute; top:0; left: 50%; overflow: hidden; width: 100%; height: 100%; z-index: 1}
.csliderContent>*:first-child>*:first-child{position: absolute; top:0;left: -50%}
.csliderButton{background: transparent; position: absolute; top:0; margin-left: -30px; left:50%; width: 60px; height: 100%; z-index: 100; cursor: pointer; outline: none;
      touch-action: none; user-select: none;}
.csliderButton .baseicon{width:30px; height: 2rem; background-color: #FFF; pointer-events: none; position: absolute; bottom: 30px;}
.csliderButton .baseicon:nth-child(2){left:30px}
.csliderButton .baseicon svg{height: 2rem}
.csliderButton:after{ content: ''; display: block; width: 6px; left: 27px; position: absolute; height: 100%; background-color: #FFF;top: 0;}
.csliderContent figcaption {
  white-space:nowrap;
    bottom: 30px;
    position: absolute;
    left: 30px;
    background-color: #FFF;
    padding: 5px 15px;
    display: block;
    margin: 0;
}
.csliderContent>*:first-child figcaption{left: auto; right: 30px}
@media(max-width:600px){
  .csliderButton .baseicon{bottom:0}
  .csliderContent figcaption {bottom: 0;}
}