:root {
    --cardWidth: 260px;
    --cardHeight: 320px;
}
.flip-container {
    /* Rappresenta l'inclinazione prospettica, in questo caso della rotazione */
    -webkit-perspective: 800;
    -ms-perspective: 800;
    perspective: 800;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 30px;
}
/* ruota il pannello al mousehover */
.flip-container:hover .flipper {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
    width: var(--cardWidth);
    height: var(--cardHeight);
}
/* impostare velocità di transizione */
.flipper {
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}
/* nasconde il retro durante lo swap */
.front,
.back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background:none;
}
/* front pane, placed above back, quello con lo z-index + alto, anche se sta prima nel codice, finisce sopra */
.front {
    z-index: 2;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-box-shadow: 0 0 25px 1px rgba(0, 0, 0, 0.692);
            box-shadow: 0 0 25px 1px rgba(0, 0, 0, 0.692);
}
/* back, initially hidden pane */
.back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-box-shadow:0 0 25px rgba(255, 255, 255, 0.705);
            box-shadow:0 0 25px rgba(255, 255, 255, 0.705);
}


img.slikaselo{
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 5px;
    width: var(--cardWidth);
    height: var(--cardHeight);
}
.back > img.slikaselo {
    -webkit-filter:brightness(25%);
    filter:brightness(25%);
}
.paeseCard{
    padding-top: 60%;
    color: white;
    -webkit-filter:drop-shadow(8px 8px 10px black);
            filter:drop-shadow(8px 8px 10px black);
    font-size: 25px;
}
.text-block {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.795)));
    background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.795));
    background: -o-linear-gradient(transparent, rgba(0, 0, 0, 0.795));
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.795));
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    opacity: 1;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    height: 60%;
}
.btn-block {
    position: absolute;
    text-align: center;
    opacity: 1;
    bottom: 0;
}

.al {
    height: 160px;
    width: 100%;
    border-color: transparent;
}
.binfo{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.bimg{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.big-icon {
    font-size: 50px;
}

@media all and (max-width: 812px) and (orientation: landscape) {
    .flip-container,
    .front,
    .back {
        width: 200px;
        height: 246px;
    }
    img.slikaselo{
        width: 200px;
        height: 246px;   
    }
    .text-block {
        bottom: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
    .big-icon{
        font-size: 32px;
    }
    .al{
        height: 123px;
    }
    .paeseCard{
        font-size: 15px;
    }
}