:root{

    --flashcard-width:350px;
    --flashcard-open-width:700px;

    --flashcard-radius:25px;
}


/* ================= GRID ================= */

.flashcards{
    position: relative;

    max-width:1400px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(var(--flashcard-width),var(--flashcard-width)));

    justify-content:center;

    gap:30px;

}

.flashcard,
.placeholder{

    /*aspect-ratio:3 / 4;*/
    aspect-ratio:2 / 3;

}

.placeholder{

    visibility:hidden;

}

/* ================= CARD ================= */

.flashcard{

    position:relative;

    perspective:1600px;

}

.flashcard-inner{

    width:100%;
    height:100%;

    position:relative;

    transform-style:preserve-3d;

    transition:transform .75s cubic-bezier(.22,1,.36,1);

}

.flashcard.flip .flashcard-inner{

    transform:rotateY(180deg);

}

.face{

    position:absolute;
    inset:0;

    overflow:hidden;

    border-radius:var(--flashcard-radius);

    backface-visibility:hidden;

    /*box-shadow:0 18px 45px rgba(0,0,0,.18);*/

    color:#29715a;

    font-size:18px;
    line-height:24px;

}

/* ================= FRONT ================= */

.front{
    display: block;
    padding: 30px;
    /*display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;*/
    background:#d8eecc;

    cursor:pointer;
    height: 100%;
    text-align: center;
}

.front h3 { font-size: 36px; text-align: left; }
.front .symbol {
    position: absolute;
    right: 30px;
    top: 30px;
    max-width: 50px;
}
.front .bigimg {
    /*margin: 20px 0;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 70%;
}

.front .btn {
    position: absolute;
    bottom: 30px;
    right: 30px;

    font-family: "helvetica-neue-lt-pro", sans-serif;
    font-weight: 400;
    font-style: normal;

    background-color: #f7fcf5;
    font-size: 18px;
    color: #29715a;
    border-radius: var(--flashcard-radius);
    padding: 10px 20px;
}
.front .btn i { color: #29715a; font-size: 18px; font-weight: bold; }

.front:hover .btn { background-color: #f0f0f0; }

/* ================= BACK ================= */

.back{

    display:block;

    background:#fff;

    transform:rotateY(180deg);

}

.back .head h3 { font-size: 60px; }
.back .head img { margin-bottom: 0; max-width: 70px; }
.back .head h4,
.back .body h4 { font-size: 26px; color: #29715a; }

.back .head p,
.back .body p {
    /*font-size: 18px;*/
    font-size: 16px;
    font-family: "helvetica-neue-lt-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
}


.back .body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.back .body li {
    position: relative;
    padding-left: 25px;
    /*margin-bottom: 15px;*/
    min-height: 32px;

    display: flex;
    align-items: center;
    flex-direction: row;

    /*font-size: 18px;*/
    font-size: 16px;
    font-family: "helvetica-neue-lt-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.back .body li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 18px;
    background: url("../img/karty/al_li_small.png") no-repeat center;
    background-size: contain;
    animation: spin 6s linear infinite;
}

.back .body ul.fe li::before { background: url("../img/karty/fe_li_small.png") no-repeat center; width: 16px; height: 19px; }

@keyframes spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}


.back .head p,
.back .body p,
.back .body ul {
    margin-bottom: 28px;
}
.back .head p { margin: 0; }
.back .body p:last-child { margin: 0; }

.flashcard-wrapper{

    display:flex;

    flex-direction:column;

    height:100%;

}

/* ================= HEADER ================= */

.back .head{

    position:relative;

    flex-shrink:0;

    min-height:220px;

    padding:30px;

    background:#d8eecc;

}

/* ================= BODY ================= */

.back .body{

    flex:1;

    padding:30px;

    overflow-y:auto;

    -webkit-overflow-scrolling:touch;

}

/* ================= CLOSE ================= */

.close-flashcard{

    position:absolute;
    top:15px;
    right:15px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#29715a;
    font-size:28px;
    line-height:1.3;
    cursor:pointer;
    transition:.25s;

}

.close-flashcard:focus { outline: 0; }

.close-flashcard:hover{
    transform:scale(1.12);
}

/* ================= OVERLAY ================= */

.overlay{
    display: none;
    position:fixed;
    inset:0;

    background:rgba(166,166,166,0.9);

    opacity:0;
    visibility:hidden;

    transition:.35s;

    z-index:1000;

}

.overlay.show{
    display: block;
    opacity:1;
    visibility:visible;

}

/* ================= FLOATING ================= */

.flashcard.floating{

    position:fixed;

    margin:0;

    z-index:1001;

    transition:
        left .75s cubic-bezier(.22,1,.36,1),
        top .75s cubic-bezier(.22,1,.36,1),
        width .75s cubic-bezier(.22,1,.36,1),
        height .75s cubic-bezier(.22,1,.36,1);

}


.back .head,
.back .body{
    opacity:0;
    transition:opacity .2s;
}

.flashcard.flip .back .head,
.flashcard.flip .back .body{
    opacity:1;
}

/* ================= ANIMACE ================= */

.pohupovani {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}



/* ================= MOBILE ================= */
/*768px*/
@media (max-width:576px){

    .flashcards{
        max-width:420px;
        grid-template-columns:1fr;
        gap:20px;
        padding:15px;
    }

    .flashcard,
    .placeholder{
        width:100%;
    }

    .back .head{
        min-height:170px;
        padding: 20px 30px;
    }

    .back .head img { max-width: 40px; }
    .back .head p { margin: 0; }

    .flashcard.floating{
        border-radius:20px;
    }

    .flashcard.floating .face{
        border-radius:20px;
    }

    .back .body{
        position: relative;
        padding: 20px 30px;

        overflow-y:scroll;
        -webkit-overflow-scrolling:touch;
    }

    .back .head h4, .back .body h4 { font-size: 23px; }

    /* scrollbar */
    .back .body::after{
        content:"";
        position:absolute;
        top:12px;
        right:6px;
        width:4px;
        height:100px;

        border-radius:999px;
        background:#c6c6c6;

        pointer-events:none;

        opacity:1;
        transition:opacity .25s;
    }

    .back .body.scrolled::after{
        opacity:0;
    }

}