body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

.wrapper {
	width:735px;
	 height: 350px;
	display: flex;
	border: 1px solid #0084a9;
	
}

.flip-card {
  background-color: transparent;
  width: 245px;
  height: 349px;
  position:relative;
  perspective: 1000px;
  
}
img {
	width: 245px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
 
    -webkit-transform-origin: 100% 0;
    -moz-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
   
   
}



.lev {
  transform: rotateY(180deg);
  transition-delay: 2s;
  
  
  
}

.prav {
  transform: rotateY(-180deg);
  
}


.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}

.flip-card-front {
  background-color: #bbb;
  color: black;
  z-index: 2;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
  z-index: 1;
}




.right {
	 -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
	
	
	 
}
.buttons {
	width: 735px;
	text-align: center;
	margin-top: 20px;
}
button {
text-decoration: none; 
padding: 4px 12px;          
background: linear-gradient(#0084a9, #00566e);      
border: solid 1px #002833;       
border-bottom: solid 1px #00566e;       
box-shadow: inset 0 0 0 1px #00b2e4;     
color: #fff;       
text-shadow: 0 1px 0 #7b502e;
font-weight: bold;
font-size: 110%;
cursor: pointer;

}