* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: "Lora", serif;
    font-size: 26px;
    font-weight: 300;
    line-height: normal;
    color: #161616;
}

body {
    background: #fff;
}

.middle {
   position: absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
}

.card {
    cursor: pointer;
    width: 200px;
    height: 200px;
}

.front, .back {
    width: 100%;
    height: 100%;
    /*overflow: hidden;  */  /*wyłącza paski przewijania*/
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
}

img {
    border-radius: 50%;
}

.front {
    transform: perspective(600px) rotateY(0deg);
}

.back {
    transform: perspective(600px) rotateY(180deg);
}

.card:hover a {
    color: #b49543;
}

.card:hover > .front {
    transform: perspective(600px) rotateY(-180deg);

}

.card:hover > .back {
    transform: perspective(600px) rotateY(0deg);

}
.down-content {
    text-align: center;
}