@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,200,600,500,700);

@font-face {
    font-family: 'Dosis-light';
    src: url('/2015/font/Dosis-Light.otf ');
}

#top {
    width: 100%;
    height: 1px;
}

#firma {
    z-index: 1;
}


/*INIZIO MOBILE#############*/
@media screen and (max-width: 899px) {


    div.box_miniatura {
        float: left;
        width: 48.18%;
        height: auto;
        margin-left: 3.62950%;
        margin-bottom: 5%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    div.box_miniatura:nth-child(2n+1) {
        margin-left: 0px;
        clear: left;

    }


    #firma {
        width: 90%;
        margin: 11% 5% 6%;
        background-image: url(/2015/comuni/firma-nero.png);
        background-repeat: no-repeat;
        background-size: contain;
    }

    #firma img {
        width: 100%;
        height: auto;
    }

    #contenitore-slideshow {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    #trasparente {
        width: 139%;
    }

    div.slide {
        position: absolute;
        top: 0px;
        width: 100%;
    }

    .slide img {
        width: 139%;
        margin-left: -20%;
    }



    h1 {
        font-family: 'Josefin Sans';
        font-size: 180%;
        font-weight: 100;
        text-align: center;
        margin-top: 10%;
        margin-right: 1%;
    }

    h2 {
        font-family: 'Josefin Sans';
        font-size: 130%;
        font-weight: 100;
        text-align: center;
        margin-top: 4%;
        margin-bottom: 10%;
        margin-right: 1%;
    }

    h3 {
        font-family: 'Josefin Sans';
        font-size: 250%;
        font-weight: 100;
        text-align: left;
        color: firebrick;
        margin-bottom: 2%
    }

    h4 {
        font-family: "Josefin Sans";
        font-weight: 100;
        color: firebrick;
        font-size: 130%;
        margin-bottom: 4%;
    }

    #menu-principale {
        position: relative;
        width: 100%;
        top: 0px;
        display: none;
    }

    menuitem {
        display: block;
        height: 35px;
        width: 100%;
        text-align: center;
        padding-top: 10px;
        background-color: darkgray;
        border-top: solid 1px gray;


    }

    #menu-label-open,
    #menu-label-close {
        display: block;
        height: 40px;
        width: 40%;
        text-align: center;
        background-color: #FFF;
        margin: 10px 30%;
    }

    #menu-label-close {
        display: block;
    }

    #menu-label-open img {
        height: 20px;
        width: auto;
        margin-top: 0px
    }

    #menu-label-close img {
        height: 20px;
        width: auto;
        margin-top: 10px;
    }

    #menu-label img a {
        border: 0px;
    }

    menuitem a:link,
    menuitem a:visited,
    menuitem a:active {
        font-family: Dosis-light;
        font-size: 120%;
        color: white;
        text-decoration: none;
    }

    menuitem a:hover {
        color: lightgrey;
    }

    /*menu lingua luglio 2022*/

    #flag-lingua {
        text-align: right;
        margin-bottom: 0;
        margin-right: 5%;
    }

    #flag-lingua img {
        width: 31px;
        height: auto;
    }

    #sezione-news {
        width: 90%;
        padding: 7% 5%;
        background-color: white;
        border-top: 1px solid grey;
    }

    .news-box {
        width: 100%;
        margin-top: 5%;
    }

    .news-box p {
        font-family: Dosis-light;
        font-size: 110%;
        line-height: 115%;
        text-align: justify;
    }

    .news-box .data {
        font-family: "Josefin Sans";
        font-size: 110%;
        margin-bottom: 1%;
    }

    .news-side {
        /*    float: left;*/
        width: 100%;
        margin: 0px 2% 5px 0px;
    }


    #sezione-gallery {
        width: 90%;
        padding: 7% 5%;
        background-color: gainsboro;
    }

    #sezione-gallery img.miniatura {
        display: block;
        width: 100%;
        height: 100%;
        margin-bottom: 5px;
        padding: 5%;
        background-color: white;
        border: 1px solid darkgrey;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .sezione {
        font-family: Dosis-light;
        font-size: 100%;
        font-weight: 100;
        text-align: left;
        margin-left: 1%;
    }

    .clear {
        clear: both
    }

    /* Nuova sezione Miniature At Home with Clients (maggio 2022)   */

    #sezione-at-home {
        width: 90%;
        padding: 7% 5%;
        background-color: gainsboro;
    }

    #sezione-at-home h3 {
        margin-bottom: 1%;
    }

    #sezione-at-home div.box_miniatura {
        float: left;
        width: 48.00%;
        height: auto;
        margin-left: 4%;
        margin-bottom: 4%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #sezione-at-home div.box_miniatura:nth-child(2n+1) {
        margin-left: 0px;
        clear: left;

    }

    #sezione-at-home img.miniatura {
        display: block;
        width: 100%;
        height: 100%;
        margin-bottom: 5px;
        /*    padding: 5%;*/
        /*    background-color: white;*/
        border: 1px solid darkgrey;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

    }

    #sezione-at-home .descrizione-sezione {
        font-family: "Raleway";
        font-size: 90%;
        text-align: left;
        line-height: 110%;
        margin: 0px 0px 5% 0px;
        color: #333333;

    }


    #sezione-at-home .rimando-alla-sezione {
        display: block;
        font-family: "Raleway";
        font-size: 140%;
        text-align: right;
        line-height: 130%;
        /*    margin: 0px 0px 2% 0px;*/
        color: #b22222;
    }



    /* ======================================================   */

    footer {
        position: relative;
        width: 95%;
        height: auto;
        background-color: #696969;
        padding: 1% 0px 4% 5%;
    }

    footer a {
        display: block;
        position: absolute;
        top: 10%;
        right: 15px;
        width: auto;
    }

    footer a img {
        width: 60px;

    }

    #copyright a {
        position: static;
        color: white;
        margin-top: 5%;
        font-size: 90%;


    }


    #copyright {
        width: 80%;
        color: white;
        font-family: 'Dosis-light';
        text-align: left;
        font-size: 120%;
        margin-left: 0px;
        min-height: 80px;

    }

    #rag-sociale {
        width: 80%;
        color: white;
        font-family: 'Raleway', sans-serif;
        font-weight: 200;
        text-align: left;
        font-size: 90%;
        margin: 2% 2% 2% 0px;
        line-height: 120%;

    }

    #newsletter-footer {
        width: 100%;
        float: left;
        margin: 1% 0 7% 0;
    }

    #newsletter-footer p {
        color: white;
        font-family: 'Raleway', sans-serif;
        text-align: left;
        font-size: 95%;
        line-height: 110%;
        font-weight: 200;
        width: 75%;

    }

    #newsletter-footer a {
        position: static;
        display: block;
        margin-top: 2%;
        font-family: 'Raleway', sans-serif;
        color: white;
        text-align: left;
        font-size: 100%;
        line-height: 110%;
        font-weight: 500;
    }




    /* fine MOBILE ###############################*/
}


/*SECONDO BREAKPOINT#######*/
@media screen and (max-width: 899px) and (min-width: 550px) {

    div.box_miniatura {
        float: left;
        width: 23.3%;
        height: auto;
        margin-left: 2%;
        margin-bottom: 5%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    div.box_miniatura:nth-child(2n+1) {
        margin-left: 2%;
        clear: none;

    }

    div.box_miniatura:nth-child(4n+1) {
        margin-left: 0px;
        clear: left;

    }



    h1 {
        margin: 5% 1% 2% 1%;
    }

    h2 {
        margin: 1% 1% 1% 1%;
    }

    .news-side {
        float: left;
        width: 35%;
    }

}


/*inizio DESK##############*/
@media screen and (min-width:900px) {

    #firma {
        display: block;
        width: 95%;
        position: relative;
        background-image: url("firma-grigio.png");
        background-repeat: no-repeat;
        background-size: contain;
        margin: 20px 2.5% 4.5% 2.5%;

    }

    #firma img {
        width: 100%;
        height: auto;
    }

    #contenitore-slideshow {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    #trasparente {
        width: 100%;
    }

    div.slide {
        position: absolute;
        top: 0px;
        width: 100%;
    }

    .slide img {
        width: 100%;
    }

    h1 {
        font-family: "Josefin Sans";
        font-size: 180%;
        font-weight: 100;
        position: absolute;
        top: 20px;
        right: 5%;
        text-align: right;
    }

    h2 {
        font-family: "Josefin Sans";
        font-size: 235%;
        font-weight: 100;
        position: absolute;
        top: 34px;
        text-align: right;
        right: 5%;
        color: firebrick;
    }

    h2.assisi {
        font-family: "Josefin Sans";
        font-size: 196%;
        font-weight: 100;
        position: absolute;
        top: 65px;
        text-align: right;
        right: 5%;
        color: black;
        padding-right: 200px;
    }

    h3 {
        font-family: "Josefin Sans";
        font-size: 450%;
        font-weight: 100;
        text-align: left;
        color: #B22222;
        margin-bottom: 4%;
        line-height: 80%;
    }

    h4 {
        font-family: "Josefin Sans";
        font-weight: 100;
        color: firebrick;
        font-size: 130%;
        margin-bottom: 2%;
        line-height: 40%;
    }

    #menu-principale {
        position: absolute;
        width: 95%;
        display: block;
        text-align: left;
        top: 0%;
        left: 2.7%;
        padding-top: 23%;
    }

    menuitem {
        display: inline-block;
        height: 35px;
        width: auto;
        text-align: left;
        padding-top: 10px;
        border-top: 0px solid #808080;
        padding-right: 3%;
        text-transform: uppercase;
        font-size: 90%;


    }

    #menu-label-open,
    #menu-label-close {
        display: none;

    }


    menuitem a:link,
    menuitem a:visited,
    menuitem a:active {
        font-family: Josefin Sans;
        font-size: 95%;
        color: grey;
        text-decoration: none;
    }

    menuitem a:hover {
        color: firebrick;
    }

    /*menu lingua luglio 2022*/

    #flag-lingua {
        position: absolute;
        width: 10%;
        display: block;
        text-align: right;
        top: 0%;
        right: 2.7%;
        padding-top: 22.5%;
    }

    #flag-lingua img {
        height: 20px;
        width: auto;
    }

    #flag-lingua a {
        opacity: 0.5;
    }

    #flag-lingua a:hover {
        opacity: 1;
    }


    #sezione-news {
        width: 95%;
        padding: 4% 2.5%;
        background-color: white;
        border-top: 0px solid grey;
    }

    .news-box {
        width: 100%;
        margin-top: -1%;
    }

    .news-box p {
        font-family: Dosis-light;
        font-size: 140%;
        line-height: 115%;
        text-align: justify;
    }

    .news-box .data {
        font-family: "Josefin Sans";
        font-size: 110%;
        margin-bottom: 1%;
    }

    .news-side {
        float: left;
        width: 25%;
        margin-right: 1%;
    }


    #sezione-gallery {
        width: 95%;
        padding: 3% 2.5%;
        background-color: gainsboro;
    }

    #sezione-gallery div.box_miniatura {
        float: left;
        width: 23.8%;
        height: auto;
        margin-left: 1.5%;
        margin-bottom: 5%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    /*
    div.box_miniatura:nth-child(2n+1) {
    margin-left: 3.62950%; clear: none;

}
*/

    #sezione-gallery div.box_miniatura:nth-child(4n+1) {
        margin-left: 0px;
        clear: left;

    }


    #sezione-gallery img.miniatura {
        display: block;
        width: 100%;
        height: 100%;
        margin-bottom: 5px;
        padding: 5%;
        background-color: white;
        border: 1px solid darkgrey;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

    }


    /* Nuova sezione Miniature At Home with Clients (maggio 2022)   */

    #sezione-at-home {
        width: 95%;
        padding: 3% 2.5%;
        background-color: gainsboro;
    }

    #sezione-at-home h3 {
        margin-bottom: 1%;
    }

    #sezione-at-home div.box_miniatura {
        float: left;
        width: 23.50%;
        height: auto;
        margin-left: 2%;
        margin-bottom: 5%;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    #sezione-at-home div.box_miniatura:nth-child(4n+1) {
        margin-left: 0px;
        clear: left;

    }

    #sezione-at-home img.miniatura {
        display: block;
        width: 100%;
        height: 100%;
        margin-bottom: 5px;
        /*    padding: 5%;*/
        /*    background-color: white;*/
        border: 1px solid darkgrey;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;

    }

    #sezione-at-home .descrizione-sezione {
        font-family: "Raleway";
        font-size: 140%;
        text-align: left;
        line-height: 110%;
        margin: 0px 0px 2% 0px;
        color: #333333;

    }


    #sezione-at-home .rimando-alla-sezione {
        display: block;
        font-family: "Raleway";
        font-size: 140%;
        text-align: right;
        line-height: 130%;
        /*    margin: 0px 0px 2% 0px;*/
        color: #b22222;
    }



    /* ======================================================   */

    .sezione {
        font-family: Dosis-light;
        font-size: 100%;
        font-weight: 100;
        text-align: left;
        margin-left: 1%;
    }

    .clear {
        clear: both
    }

    footer {
        position: relative;
        width: 100%;
        height: auto;
        background-color: #696969;
        padding: 1% 0px 4% 0px;
    }

    footer a {
        display: block;
        top: 10%;
        right: 10px;
        width: auto;
        position: absolute;
        top: 15px;
        right: 30px;
    }

    footer a img {
        width: 60px;

    }


    #copyright {
        width: auto;
        color: white;
        font-family: 'Dosis-light';
        text-align: left;
        font-size: 100%;
        line-height: 120%;
        margin-left: 2.5%;
        float: left;

    }

    #copyright a {
        position: static;
        color: white;
        margin-top: 5%;
        font-size: 90%;


    }

    #rag-sociale {
        width: 20%;
        color: white;
        font-family: 'Raleway', sans-serif;
        text-align: left;
        font-size: 80%;
        line-height: 150%;
        font-weight: 200;
        margin: 0px 0px 0px 50px;
        float: left;
    }


    #newsletter-footer {
        width: 55%;
        float: left;
        margin-left: 2.5%;
    }

    #newsletter-footer p {
        color: white;
        font-family: 'Raleway', sans-serif;
        text-align: left;
        font-size: 95%;
        line-height: 110%;
        font-weight: 200;

    }

    #newsletter-footer a {
        position: static;
        display: block;
        margin-top: 2%;
        font-family: 'Raleway', sans-serif;
        color: lightgrey;
        text-align: left;
        font-size: 100%;
        line-height: 110%;
        font-weight: 500;
    }


    #newsletter-footer a:hover {

        color: white;
    }





    /* fine DESK ###########################*/
}