/*FLIP CARDS*/
.flip-card-inner {
    border-radius: 20px;
}

    .flip-card-inner .flip-card-back {
        background: rgba(0,0,0,0.5);
    }

.flip-card1 .flip-card-inner {
    background-color: #0a7e92;
    color: #fff;
}

.flip-card1 .flip-card-back {
    border: 10px solid #0a7e92;
}

.flip-card2 .flip-card-inner {
    background-color: #d5d441;
    color: #fff;
}

.flip-card2 .flip-card-back {
    border: 10px solid #d5d441;
}


.flip-card3 .flip-card-inner {
    background-color: #88c6da;
    color: #fff;
}

.flip-card3 .flip-card-back {
    border: 10px solid #88c6da;
}

.flip-card4 .flip-card-inner {
    background-color: #a88474;
    color: #fff;
}

.flip-card4 .flip-card-back {
    border: 10px solid #a88474;
}

.flip-card-front-title, .flip-card-back h1, .flip-card-back p {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
}


.flip-card-back p {
    font-weight: normal;
}



.flip-card {
    background-color: transparent;
    width: 100%;
    height: 206px;
    cursor: pointer;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-card-front img {
    width: 70%;
}

.flip-card-front, .flip-card-back {
    padding: 2rem;
    border-radius: 20px;
}




/* This container is needed to position the front and back side */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
    /*transform: rotateY(180deg);*/
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /*transform: rotateX(0deg);*/
    transition: opacity 0.5s ease-in-out;
}

/* Style the front side (fallback if image is missing) */


/* Style the back side */
.flip-card-front {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

.flip-card-back {
    color: white;
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

.flip-card:hover .flip-card-front {
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}

.flip-card:hover .flip-card-back {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}

.enpav-plus-section {
    background: #0a7e92;
    padding: 2rem 0;
    color: #fff;
}

    .enpav-plus-section p {
        font-size: 20px;
        font-style: italic;
    }




.ultima .titolo {
    position: absolute;
    bottom: 0px;
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 2rem;
    width: 100%;
}

.ultima h2 {
    font-size: 16px;
    margin: 0px;
}

.ultima > div {
    padding: 0px;
}


.featured {
    height: 100%;
}

    .featured .col-12 {
        padding-right: 0px;
    }

    .featured .box.eventi:after {
        bottom: 7px;
    }


    .featured .col-12 .box {
        height: 100%;
    }

    .featured .col-12:first-of-type {
        padding-bottom: 7px;
    }

    .featured .col-12:last-of-type {
        padding-top: 8px;
    }

.rivista {
    padding: 6rem 0px;
    background: url('/templates/enpav/images/background-parallax-rivista.jpg');
    background-size: cover;
    background-position: 0 0;
    /*background-attachment: fixed;*/
}

.moduli {
    padding: 6rem 0px;
    background: url('/templates/enpav/images/background-parallax-modulistica.jpg');
    background-size: cover;
    background-position: 0 0;
    /*background-attachment: fixed;*/
}

.rivista .rigabianca {
    background: #fff;
    padding: 2rem 0px;
}



.rivista .rigabianca h3 {
    color: #575756;
    font-weight: bold;
}

.rivista .rigabianca p {
    font-size: 20px;
    font-style: italic;
    color: #0f7f93;
}

.flip-card-back .btn-blu {
    background-color: transparent;
}

    .flip-card-back .btn-blu:hover {
        background-color: #fff;
        color: #0a7e92;
    }

    .sputa-il-rospo h2 {
        font-weight: bold;
        font-size: 50px;
        margin-top: 2rem;
        color: #0a7e92;
    }

.sputa-il-rospo h3 {
    font-size: 20px;
    font-style: italic;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    color: #0a7e92;
}

.sputa-il-rospo img {
    max-width: 250px;
}

.sputa-il-rospo p {
    margin-bottom: 0rem;
}

@media (max-width: 991px) {
    .featured .box.eventi:after {
        bottom: 0px;
    }

    .featured .col-12:last-of-type {
        padding-left: 15px !important;
    }

    .featured.row {
        padding-top: 15px !important;
    }

    .featured .col-12 {
        padding: 0px !important;
    }

    .featured .box {
        min-height: 130px
    }
}

@media (max-width: 990px) {
    .news .container {
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .mininews .box h4 {
        font-size: 12px !important;
    }
    .news .box.in-evidenza {
        font-size: 12px;
    }
    .ultima .box.enpav-plus {
        font-size: 13px;
    }

    .featured.row {
        padding-top: 0px !important;
    }

    .featured .col-12:last-of-type {
        padding-left: 0px !important;
    }

    .rivista img {
        display:none;
    }

    .news .container {
        max-width:100% !important;
    }
}

@media (max-width: 575px) {

    .news .box.in-evidenza {
        font-size: 12px;
        padding-bottom: 5rem;
    }

    .flip-card-back p {
        font-size: 11px;
    }

    .mt-xs-4 {
        margin-top: 1.5rem !important;
    }

    .flip-card-front img {
        width: 30%;
    }
}
@media (max-width: 400px) {
    .flip-card-front img {
        width: 50%;
    }
}
    /*
@media (max-width: 430px) {
    .col-xs-6 {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .col-xs-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}


@media (max-width: 430px) {


}*/

