body
{
    margin:0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
.card
{
    position: absolute!important;
    top: 50%!important;
    left: 50%!important;
    transform: translate(-50%,-50%)!important;
    width: 300px!important;
    height: 450px!important;
    transform-style: preserve-3d!important;
    perspective: 600px!important;
    transition: .5s;
}
.card .front
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    backface-visibility: hidden;
    transform: rotateX(0deg);
    transition: .5s;
}
.card:hover .front
{
    transform: rotateX(-180deg);
}
.card .back
{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background-color: #000;
    backface-visibility: hidden;
    transform: rotateX(180deg);
    transition: .5s;

}
.card:hover .back
{
    transform: rotateX(0deg);
}
.back .details
{
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0,-50%);
    width: 100%;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}
h2
{
    margin: 0;
    color: #fff;
    font-size: 24px;
}
.card .back .details h2 span{
    color: #a7a7a7;
    font-size: 16px;
}
.social-icons
{
    padding: 10px 0px;
}
.social-icons:hover a
{
    transform: rotateY(360deg);

}
.social-icons a{
    display: inline-block;
    width: 36px;
    height: 36px;
    text-align: center;
    background-color: #262626;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;

}
.social-icons a .fa {
line-height: 36px;
}
.social-icons a:hover {
    background-color: red;
}
.social-icons a:hover
{
    animation: otabek 1s alternate infinite;
}
@keyframes otabek {
0%{
    transform: rotateY(0deg);
}
    25%
    {
        transform: rotateY(90deg);
    }
    50%
    {
        transform: rotateY(180deg);
    }
    75%
    {
        transform: rotateY(270deg);
    }
    100%
    {
        transform: rotateY(360deg);
    }
}

.back::before
{
content: "";
    position: absolute;
    top: 0%;
    width: 50%;
    height: 100%;
    background-color: rgba(225,225,225,.105);
    box-sizing: border-box;
}