* {
    box-sizing: border-box;
    border-collapse: collapse;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}
[class*="col-"] {
    float: left;
    padding: 0 20px;
    /*border: 1px solid red;*/
}

/* ------------------------------------------------------------------------------------------ DESKTOP */
@media only screen and (min-width: 1367px) {
    .col-1 {width: auto;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}

    .contact, .studio{padding-left: 0}

    #about .description p {margin-bottom: 70px}
}



/* ------------------------------------------------------------------------------------------ TABLET E LAPTOP */
@media only screen and (min-width: 768px) and (max-width: 1366px) {
    .col-t-1 {width: 8.33%;}
    .col-t-2 {width: 16.66%;}
    .col-t-3 {width: 25%;}
    .col-t-4 {width: 33.33%;}
    .col-t-5 {width: 41.66%;}
    .col-t-6 {width: 50%;}
    .col-t-7 {width: 58.33%;}
    .col-t-8 {width: 66.66%;}
    .col-t-9 {width: 75%;}
    .col-t-10 {width: 83.33%;}
    .col-t-11 {width: 91.66%;}
    .col-t-12 {width: 100%;}

    footer{
        padding: 0;
        padding-left: 20px!important;
        bottom: 0;
        height: 2rem;
        line-height: 2rem;
        background-color: #eeeeee;
    }

    #container {padding: 0;}
    #menu{position: relative; top:-2px;}
    header{padding-top: 20px!important; padding-bottom: 30px!important}
    form#search{margin-top: 0; padding-right: 27px; margin-left: -8px;}
    #work{margin-top: 10px}
    #works p {margin-bottom: 30px;}
    #works a:last-child p {margin-bottom: 70px}
    #work-details{margin-top: 10px; margin-bottom: -20px}
    #work-details p {margin-bottom: 0}
    #work a{margin-bottom: 20px}
    #work a:last-child {margin-bottom: 50px}

    /* non posso usare 'odd' e 'even' come nello smartphone perché la fila è da 3 elementi sul tablet */
    #works [class*="col-"] {
        padding: 0 10px!important;
    }
    #works a:nth-child(1), #works a:nth-child(4), #works a:nth-child(7), #works a:nth-child(10),
    #works a:nth-child(13), #works a:nth-child(16), #works a:nth-child(19), #works a:nth-child(22),
    #works a:nth-child(25), #works a:nth-child(28), #works a:nth-child(31), #works a:nth-child(34),
    #works a:nth-child(37), #works a:nth-child(40), #works a:nth-child(43), #works a:nth-child(46),
    #works a:nth-child(49), #works a:nth-child(52), #works a:nth-child(55), #works a:nth-child(58){
        padding-left: 20px!important;
    }
    #works a:nth-child(3), #works a:nth-child(6), #works a:nth-child(9), #works a:nth-child(12),
    #works a:nth-child(15), #works a:nth-child(18), #works a:nth-child(21), #works a:nth-child(24),
    #works a:nth-child(27), #works a:nth-child(30), #works a:nth-child(33), #works a:nth-child(36),
    #works a:nth-child(39), #works a:nth-child(42), #works a:nth-child(45), #works a:nth-child(48),
    #works a:nth-child(51), #works a:nth-child(54), #works a:nth-child(57), #works a:nth-child(60){
        padding-right: 20px!important;
    }

    .contact, .studio{padding-left: 0}
    #about h1 {margin-top: 40px; margin-bottom: 20px;}
    #about .studio p {margin-bottom: 70px}
}



/* ------------------------------------------------------------------------------------------ SMARTPHONE */
@media only screen and (max-width: 767px) {
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}

    .smartphone{
        display: block;
    }

    footer{
        padding: 0;
        padding-left: 20px!important;
        bottom: 0;
        height: 2rem;
        line-height: 2rem;
        background-color: #eeeeee;
    }

    #container {padding: 0;}
    #menu{position: relative; top:-2px;}
    header{padding-top: 20px!important; padding-bottom: 30px!important}
    form#search{margin-top: 0; padding-right: 19px;}
    .thumbnail {height: 110px;}
    #work{margin-top: 10px}
    #works p {margin-bottom: 20px; max-block-size: 38px;}
    #works a:last-child p {margin-bottom: 70px}
    #work-details{margin-top: 10px; margin-bottom: -20px}
    #work-details p {margin-bottom: 0}
    #work a{margin-bottom: 20px}
    #work a:last-child {margin-bottom: 50px}

    #works a:nth-child(odd) { /* elementi dispari */
        padding-right: 10px!important;
    }
    #works a:nth-child(even) { /* elementi pari */
        padding-left: 10px!important;
    }

    .contact, .studio{padding-left: 0}
    #about h1 {margin-top: 40px; margin-bottom: 20px;}
    #about .description p {margin-bottom: 70px}

}