@charset "utf-8";



.slider-container {
  position: relative;
  height: 313px; /*should be the same height as the images*/
  width:560px;
  margin:0 auto;
}

.slider-half {
  position: absolute;
  width: 100%;
  height: auto;
  overflow:hidden;
}

.slider-half div {
  display:block;
  vertical-align:middle;
}

.slider-bar {
  position: absolute;
  z-index:9;
  cursor: ew-resize;
  /*set the appearance of the slider:*/
  width: 6px;
  height: 313px;
}
.slider-bar div{
  z-index: 10;
  width:58px;
  height:313px;
  background: url(../img/content/compare_bar.png) center no-repeat;
  position: absolute;
  top:50%;
  left:50%;
  margin-left:-29px;
  margin-top:-156.5px;
  overflow: hidden;
}
.archi3-half{
  background:none;
  width: 560px;
  height: 313px;
}
.archis-half{
  background:none;
  width: 560px;
  height: 313px;
}



@media all and (max-width: 730px){

  .slider-container {
    height: 236px; /*should be the same height as the images*/
    width:420px;
  }


  .slider-bar {
    width: 4px;
    height: 236px;
    margin: 0 auto;
  }
  .slider-bar div{
    z-index: 10;
    width:58px;
    height:236px;
    background: url(../img/content/compare_bar.png) center no-repeat;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-29px;
    margin-top:-118px;
    overflow: hidden;
  }
  .archi3-half{
    background:none;
    width: 420px;
    height: 236px;
  }
  .archis-half{
    background:none;
    width: 420px;
    height: 236px;
  }


}

@media all and (max-width: 550px){

  .slider-container {
    height: 200px; /*should be the same height as the images*/
    width:355px;
  }


  .slider-bar {
    width: 4px;
    height: 200px;
    margin: 0 auto;
  }
  .slider-bar div{
    z-index: 10;
    width:58px;
    height:200px;
    background: url(../img/content/compare_bar.png) center no-repeat;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-29px;
    margin-top:-100px;
    overflow: hidden;
  }
  .archi3-half{
    background:none;
    width: 355px;
    height: 200px;
  }
  .archis-half{
    background:none;
    width: 355px;
    height: 200px;
  }


}

@media all and (max-width: 400px){

  .slider-container {
    height: 168px; /*should be the same height as the images*/
    width:300px;
  }


  .slider-bar {
    width: 4px;
    height: 168px;
    margin: 0 auto;
  }
  .slider-bar div{
    z-index: 10;
    width:58px;
    height:168px;
    background: url(../img/content/compare_bar.png) center no-repeat;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-29px;
    margin-top:-84px;
    overflow: hidden;
  }
  .archi3-half{
    background:none;
    width: 300px;
    height: 168px;
  }
  .archis-half{
    background:none;
    width: 300px;
    height: 168px;
  }


}