/*
 * responsive_style.css
 * Banca del Tempo di Modena
 */

/* =====================================================
   TABLET
   ===================================================== */

@media screen and (max-width: 900px) {

    body {
        padding: 0;
    }

    /* HEADER */

    #headercont {
        width: 100%;
        box-sizing: border-box;
        padding: 0 15px;
    }

    #headercont #headerleft {
        width: 60%;
        box-sizing: border-box;
    }

    #headercont #headerright {
        width: 40%;
        box-sizing: border-box;
    }


    /* CONTENITORE */

    #container {
        width: 100%;
        box-sizing: border-box;
    }


    /* MENU */

    #container #menucont {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }


    /* IMMAGINE HEADER */

    #container #gallerycont {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        overflow: hidden;
    }

    #container #gallerycont img {
        display: block;
        width: 100%;
        height: auto;
    }


    /* CONTENUTO */

    #container #maincont {
        width: 100%;
        box-sizing: border-box;
    }


    /* GOOGLE CALENDAR */

    #GoogleCalendar {
        width: 100%;
        box-sizing: border-box;
    }

    #GoogleCalendar iframe {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }


    /* IMMAGINI */

    #GoogleCalendar img {
        max-width: 100%;
        height: auto;
    }


    /* FOOTER */

    #footercont {
        width: 100%;
        box-sizing: border-box;
    }
}


/* =====================================================
   SMARTPHONE
   ===================================================== */

@media screen and (max-width: 600px) {

    body {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow-x: hidden;
    }


    /* =================================================
       HEADER
       ================================================= */

    #headercont {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    #headercont #headerleft {
        float: none;
        width: 100%;
        padding: 20px 0 10px 0;
        box-sizing: border-box;
    }

    #headercont #headerleft h1 {
        margin: 0;
    }

    #headercont #headerleft h1 a {
        display: block;
        font-size: 32px;
        line-height: 1.1;
    }


    /* SOCIAL */

    #headercont #headerright {
        float: none;
        width: 100%;
        padding: 0 0 10px 0;
        box-sizing: border-box;
    }

    #headercont #headerright ul {
        float: none;
        margin: 0;
        padding: 0;
    }

    #headercont #headerright ul li a {
        margin-top: 5px;
    }


    /* =================================================
       CONTENITORE
       ================================================= */

    #container {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
    }


    /* =================================================
       MENU
       ================================================= */

    #container #menucont {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        box-sizing: border-box;
    }

    #container #menucont ul {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    #container #menucont ul li {
        display: inline;
    }

    #container #menucont ul li a {
        float: none;
        display: inline-block;
        padding: 8px 7px;
        line-height: 20px;
        font-size: 12px;
    }


    /* =================================================
       IMMAGINE HEADER
       ================================================= */

    #container #gallerycont {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
        box-sizing: border-box;
        overflow: hidden;
    }

    #container #gallerycont img {
        display: block;
        width: 100%;
        height: auto;
    }


    /* =================================================
       CONTENUTO
       ================================================= */

    #container #maincont {
        width: 100%;
        box-sizing: border-box;
        line-height: 20px;
    }


    /* TITOLO */

    #container #maincont h1 {
        font-size: 24px;
        line-height: 30px;
    }


    /* =================================================
       GOOGLE CALENDAR
       ================================================= */

    #GoogleCalendar {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    #GoogleCalendar iframe {
        display: block;
        width: 100%;
        height: 600px;
        border: 0;
        box-sizing: border-box;
    }


    /* =================================================
       RSS / ICAL
       ================================================= */

    #GoogleCalendar img {
        width: 48px;
        height: 48px;
        max-width: 100%;
    }


    /* =================================================
       FOOTER
       ================================================= */

    #footercont {
        width: 100%;
        padding: 15px 10px;
        box-sizing: border-box;
        text-align: center;
    }

}