glittergallery/GlitterGallery

@media screen and (max-width: 81.03em) and (min-width: 64.063em){
  #opacity_first, #opacity_second, #mask_first, #mask_second{
    width: 50%;
  }
}

@media screen and (min-width: 0em){
  body{
    .wrapper{
      article{
        section{
          #side_first, #side_second{
            width: 48%;
            float: left;
          }

          #toggle{
            position: relative;
          }

          #toggle_first, #toggle_second{
            position:absolute;
            cursor:pointer;
            -webkit-transition: opacity 1s ease-in-out;
            -moz-transition: opacity 1s ease-in-out;
            -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
          }

          #toggle_second.transparent{
            opacity:0;
          }

          #opacity_first, #opacity_second, #mask_first, #mask_second{
            position:absolute;
            padding:0;
          }

          #opacity_slider, #mask_slider{
            position: relative;
            width: 100%;
            padding: 0;
          }
          .ui-slider-range{
            padding: 0;
          }

          #mask_second{
            overflow: hidden;
            width: 0;
            padding-left: 0;
            padding-right: 0;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 60.063em){
  #opacity_first, #opacity_second, #mask_first, #mask_second{
    width: 98%;
  }
}