html {
    background: linear-gradient(-20deg, red, #334566, #334566, red);
    min-height: 100%
}

body {
    background-color:transparent;
}

input[type=checkbox] {
    /* Double-sized Checkboxes */
    -ms-transform: scale(1.3); /* IE */
    -moz-transform: scale(1.3); /* FF */
    -webkit-transform: scale(1.3); /* Safari and Chrome */
    -o-transform: scale(1.3); /* Opera */
    padding: 5px;
    cursor: pointer;
    margin-left:3px;
}

@media (max-width: 960px) {
    .main {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 12px 0 rgba(0,0,0,.1), 0 10px 30px 0 rgba(0,0,0,.2);
        margin: -12.8125em 0 0;
        margin-bottom: 50px;
        padding: 20px;
        transition: transform .5s cubic-bezier(.77,0,.175,1);
        width: 100%;
        z-index: 30;
        position: relative;
        left: 0px;
        top: 220px;
    }

    .generalink {
        margin-bottom: 220px;
    }

    .shift {
        padding: 10px;
    }

    .pulsante {
        float:left;
        margin-top: 15px;
    }

    .main input {
        width: 100%;
        margin-bottom: 10px;
    }

    .optTelefono {
        font-style: italic;
        font-size: 12px;
    }

    .descrizione {
        width: 100%;
        margin-top: 10px;
    }

    .frecciaPagamento .importo {
        width: 200px;
    }

    .conteggioCaratteri {
        float: left;
        font-size: 12px;
    }

    .main .importo {
        width: 90px;
        text-align: right;
    }

    .areaImporto {
        margin-top: 12px;
    }
}

@media (min-width: 961px) {
    .main {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 0 12px 0 rgba(0,0,0,.1), 0 10px 30px 0 rgba(0,0,0,.2);
        margin: -12.8125em 0 0;
        margin-bottom: 100px;
        padding: 20px;
        transition: transform .5s cubic-bezier(.77,0,.175,1);
        width: 30.5em;
        z-index: 30;
        position: relative;
        left: 60px;
        top: 400px;
    }

    .shift {
        top: 280px;
        padding:10px;
    }

    .generalink {
        top:250px;
        margin-bottom: 250px;
    }

    .frecciaPagamento {
        float: left;
    }

    .areaPrezzo {
        float: right;
    }

    .pulsante {
        float: left;
    }

    .main input {
        width: 100%;
        margin-bottom: 10px;
    }

    .optTelefono {
        font-style: italic;
        font-size:12px;
    }

    .descrizione {
        width: 100%;
        margin-top: 10px;
    }

    .frecciaPagamento .importo {
        width: 200px;
    }

    .conteggioCaratteri {
        float: left;
        font-size: 12px;
    }

    .main .importo {
        width: 90px;
        text-align:right;
    }

    .areaImporto {
        margin-top: 12px;
    }
}