*{
  box-sizing: border-box;
}
html, body{
  background-color: rgb(66,66,66);
  font-family: 'Raleway', sans-serif;
  color: #464646;
  font-family: 'Lato', sans-serif;
}
.hoverme{
  margin: 0 auto;
  display: block;
  margin-bottom:-220px;
}
.content{
  width: 250px;
  height: 400px;
  margin: 100px auto;
  position: relative;
  perspective: 500px;
  -webkit-perspective: 500px;
  
}
.A{
  position: absolute;
  transform-origin:100% 50%;
  -webkit-transform-origin:100% 50%;
  z-index: 2;
}
.B{
  position: absolute;
  transform-origin:0% 50%;
  -webkit-transform-origin:0% 50%;
  transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  z-index:1;

}
.up, .down{
  width: 250px;
  height:200px;
}
.upA{
  background:url("http://www.iltourdinibali.it/codepens/mike.jpg");
  top:0px;
  left:0px;
  transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
}
.downA{
  background:yellow;
  top:200px;
  left:0px;
  transition: all 0.7s ease-out;
  -webkit-transition: all 0.7s ease-out;
  background:url("http://www.iltourdinibali.it/codepens/mike.jpg");
  background-position: bottom;
 }
.upB{
  top:0px;
  left:250px;
  transition: all 0.5s ease-out;
 -webkit-transition: all 0.5s ease-out; background:url("http://www.iltourdinibali.it/codepens/old_moon.jpg");
  text-align:center;
}
.upB h1{
  color: white;
  background:#464646;
  padding: 10px;
  position:relative;
  font-size:26px;
  font-weight: 700;
  line-height: 28px;
  display: inline-block;
  margin: 25px 0px 20px 0px;
  
}
.downB{
  top:200px;
  left:250px;
  transition: all 0.7s ease-out;
  -webkit-transition: all 0.7s ease-out;
  
  background:url("http://www.iltourdinibali.it/codepens/old_moon.jpg");
  padding:0px 25px;
  text-align:center;
 }
.downB div{
  margin-top: 40px;
}
.downB .quote{
  position:relative;
  font-size: 22px;
  font-weight: 700;
  font-style:italic;
}
.downB .title{
  margin-top: 15px;
  display:block;
}

.content:hover .upA{
  transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
  left: -250px;  
}
.content:hover .downA{
  transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
  left: -250px; 
}
.content:hover .upB{
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  left: 0px;
  z-index:3;
}
.content:hover .downB{
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  left: 0px; 
  z-index:3;
}