﻿.card {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    padding: 14px 80px 18px 36px;
    cursor: pointer;
   
}

    .card:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
    }

    .card h3 {
        font-weight: 600;
    }

    .card img {
        position: absolute;
        top: 20px;
        right: 15px;
        max-height: 120px;
    }

.card-1 {
    background-image: url(../Content/Img/ImpElett.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-2 {
    background-image: url(../Content/Img/solarPanel.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-3 {
    background-image: url(../Content/Img/fibraOttica.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-4 {
    background-image: url(../Content/Img/allarmeIntrusione.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-5 {
    background-image: url(../Content/Img/incendio.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}

.card-6 {
    background-image: url(../Content/Img/sorveglianza.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 80px;
}


/* Per dispositivi extra small (XS) */
@media (max-width: 575px) {
    .card{
        margin:20px;
    }
}

/* Per dispositivi small (SM) */
@media (min-width: 576px) and (max-width: 767px) {
    .card {
        margin: 20px;
    }
}

/* Per dispositivi medium (MD) */
@media (min-width: 768px) and (max-width: 991px) {
    .card {
        margin: 20px;
    }
}

/* Per dispositivi large (LG) */
@media (min-width: 992px) and (max-width: 1199px) {
    .card {
        margin: 20px;
    }
}

/* Per dispositivi extra large (XL) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .card {
        margin: 20px;
    }
}

/* Per dispositivi extra extra large (XXL) */
@media (min-width: 1400px) {
    .card {
        margin: 20px;
    }
}

