.button {
 background-image: -webkit-radial-gradient(circle, #e2f0cb, #9bd151);
 background-image: -moz-radial-gradient(circle, #e2f0cb, #9bd151);
 background-image: -ms-radial-gradient(circle, #e2f0cb, #9bd151);
 background-image: radial-gradient(circle, #e2f0cb, #9bd151);
 width: 265px;
 height: 265px;
 box-sizing: border-box;
 text-align: center;
 cursor: pointer;
 box-shadow: 0 0 21px rgba(50, 49, 79, 0.3);
 transition: all .4s;}

.button:hover { box-shadow: 0 0 30px rgba(50, 49, 79, 0.5); }

.modal {
 width: 530px;
 height: 265px;
 perspective: 2000px;
 z-index: 2;
 position: fixed;
 top: calc(50% - 132.5px);
 left: calc(50% - 265px);
 display: none;
 color:#5f5f5f;
 font-family:'Lato',sans-serif;}

.shadow { box-shadow: 0 0 30px rgba(50, 49, 79, 0.5); }

.wrapper {
 background: rgba(50, 49, 79, 0.5);
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 display: none;}

.front, .back, .opened {
 height: 265px;
 position: absolute;
 box-sizing: border-box;}

.front img,.button img {
 width:265px;
 height:265px;}

.front {
 background-image: -webkit-radial-gradient(circle, #e2f0cb, #9bd151);
 background-image: -moz-radial-gradient(circle, #e2f0cb, #9bd151);
 background-image: -ms-radial-gradient(circle, #e2f0cb, #9bd151);
 background-image: radial-gradient(circle, #e2f0cb, #9bd151);
 width: 265px;
 text-align: center;
 cursor: pointer;
 z-index: 3;
 backface-visibility: hidden;
 transform-origin: 0% 50%;
 box-shadow: 0 0 21px rgba(50, 49, 79, 0.5);
 transform: rotateY(-180deg);}

.back, .opened {
 width: 530px;
 padding: 35px 25px;
 clip: rect(auto, auto, auto, 265px);}

.back {
 background: #f2f2f2;
 transform-origin: 50% 50%;
 transform: rotateY(-180deg);}

.back .content { transform: rotateY(180deg); }
.opened { background: #f2f2f2; }

.close {
 position: absolute;
 top: 15px;
 right: 15px;
 cursor: pointer;
 width: 25px;
 height: 25px;
 background: url(https://keonprod.3dn.ru/csgoskins/3dbook/close.png) no-repeat center;
 background-size: cover;
 opacity: .6;}

.front-open { animation: front 1.1s forwards ease-in-out; }
.back-open { animation: back 1.1s forwards ease-in-out; }
.opened-open { animation: opened 1.1s forwards ease-in-out; }
.front-close { animation: front 1.1s forwards reverse ease-in-out; }
.back-close { animation: back 1.1s forwards reverse ease-in-out; }
.opened-close { animation: opened 1.1s forwards reverse ease-in-out; }

@font-face {
 font-family:'Lato';
 src: url(https://keonprod.3dn.ru/csgoskins/Lato-Regular.ttf);}

h1 {font-size:30px;margin-bottom:20px;}
p {font-size:15px;}

 @keyframes 
front { 0% {
 transform: rotateY(0deg);
 left: 132.5px;
}
 100% {
 transform: rotateY(-180deg);
 left: 265px;
}
}
@keyframes 
back { 0% {
 transform: rotateY(0deg);
 left: -132.5px;
 background: #4d4d4d;
}
 100% {
 transform: rotateY(-180deg);
 left: 0;
 background: #f2f2f2;
}
}
@keyframes 
opened { 0% {
 left: -132.5px;
 background: #a6a6a6;
}
 100% {
 left: 0;
 background: #f2f2f2;
}
}