/* Start:/bitrix/components/sv/test.znak.boga/templates/.default/style.css?17544374621416*/
.card {
    text-align: center;
}
.card h3 {
    font-size: 23px;
    margin: 10px 0;
}
.card .card_description{
    font-size: 14px;
}
.card .card_description b{
    display: block;
    margin-bottom: 10px;
}
.cardimg {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    background-size: cover;
}
.cardback {
    animation-name: card-swing;
    animation-delay: 5s;
    animation-duration: 6s;
    transform-origin: center center;
    animation-iteration-count: infinite;
    background-size: cover;
    /*animation-fill-mode: both;*/

    /*transition: top 0.7s ease, left 0.7s ease, box-shadow 0.1s ease;*/
    cursor: pointer;
    position: relative;
}
.cardback:hover {
    animation: none;
    box-shadow: 3px 3px 7px 0 rgba(0, 0, 0, 0.2);
    top: -2px;
    left: -2px;
}


/* entire container, keeps perspective */
.flip-container {
    /*margin: 0 auto;*/
    perspective: 1000px;
}
.flip-container.flip .flipper {
    transform: rotateY(-180deg);
}
.flip-container, .front, .back {
    width: 180px;
    height: 180px;
}
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(-180deg);
}
/* End */
/* /bitrix/components/sv/test.znak.boga/templates/.default/style.css?17544374621416 */