@import url(http://fonts.googleapis.com/css?family=Bubbler+One);
.slides-example1{
  width:1200px;
  height:400px;
  margin:0;
  position:
  absolute;
  overflow:hidden
}
.slides-example1 li{
  list-style:none;
  border:4px solid #000;
  height:392px;
  width:192px;
  position:absolute;
  left:0;
  z-index:2;
  -webkit-transition-property:width,left;
  -moz-transition-property:width,left;
  -o-transition-property:width,left;
  transition-property:width,left;
  -webkit-transition-duration:1s;
  -moz-transition-duration:1s;
  -o-transition-duration:1s;
  transition-duration:1s;
  overflow:hide
}
.slides-example1 li:hover{
    width:320px;z-index:3
}
.slides-example1 li:hover h4{
      -webkit-transform:rotate(0deg);
      -moz-transform:rotate(0deg);
      -ms-transform:rotate(0deg);
      -o-transform:rotate(0deg);
      transform:rotate(0deg);
      bottom:10px;right:10px
}
.slides-example1 li:hover img{
  clip:auto;margin:0;
  height:100%;width:320px
}
.slides-example1 li h4{
  position:absolute;
  bottom:0;
  right:10px;
  display:block;
  white-space:nowrap;
  margin:0;
  padding:0;
  font-family:'Bubbler One', sans-serif;
  color:#000;
  font-size:32px;
  -webkit-transform-origin:top right;
  -moz-transform-origin:top right;
  -ms-transform-origin:top right;
  -o-transform-origin:top right;
  transform-origin:top right;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  -webkit-transition-property:-webkit-transform,right,bottom;
  -moz-transition-property:-moz-transform,right,bottom;
  -o-transition-property:-o-transform,right,bottom;
  transition-property:transform,right,bottom;
  -webkit-transition-duration:1s;
  -moz-transition-duration:1s;
  -o-transition-duration:1s;
  transition-duration:1s
}
.slides-example1 li img{
  max-width:none !important;
  border:0;
  position:absolute;
  margin-left:-100px;
  margin-top:-100px;
  clip:rect(100px, 292px, 492px, 100px)
}
.slides-example1 .slide-2{
  left:200px
}
.slides-example1 .slide-2:hover{
  left:136px
}
.slides-example1 .slide-3{
  left:400px
}
.slides-example1 .slide-3:hover{
  left:336px
}
.slides-example1 .slide-4{
  left:600px
}
.slides-example1 .slide-4:hover{
  left:536px;left:472px
}
.slides-example1 .slide-5{
  left:800px
}
.slides-example1 .slide-5:hover{
  left:736px;
}
.slides-example1 .slide-6{
  left:1000px
}
.slides-example1 .slide-6:hover{
  left:936px;
}