/**
 * Pannello laterale autouscente con navigazione
 * che esce al clic da sinistra
 */

.nav {
    /*  larghezza libera */
    width: 300px;
    min-width: 300px;
    /* fissiamo e indichiamo l'altezza massima  */
    height: 100%;
    position: fixed;
    /*top: 80px;*/
    /*bottom: 0;*/
    margin: 0;
    /* spostiamo (nascondiamo) il pannello rispetto bordo sinistro della pagina  */
    left: -300px;
    /* spazi interni */
    padding: 15px 25px;
    /* regoliamo l'uscita del panello  */
    -webkit-transition: left 0.3s;
    -moz-transition: left 0.3s;
    transition: left 0.3s;
    /* indichiamo il colore dello sfondo del pannello */
    /*background: #16a085;*/
    /* indichiamo che sarà sopra tutti gli altri elementi della pagina  */
    z-index: 2000000;
}

/**
 * Bottone interruttore del pannello 
 * tag <label>
 */

.nav-toggle {
    /* posizionamento assoluto*/
    position: absolute;
    /* rispetto al bordo sinistro del pannello  */
    left: 300px;
    /* rispetto al bordo superiore  */
    /*top: 1em;*/
    /* spazi interni  */
    padding: 0em 0.5em 0em 0.5em;
    /* indichiamo il colore dello sfondo dell'interruttore
     * di solito corrisponde al colore del pannello 
    */
    background: inherit;
    /* colore del testo */
    /*color: #dadada;*/
    /* tipo del cursore */
    cursor: pointer;
    /* altezza del font */
    /*font-size: 2em;*/
    line-height: 1;
    /* sempre in prima vista rispetto altri elementi della pagina  */
    z-index: 2000001;
    /* animazione del colore del testo al verificarsi dell'evento hover */
    -webkit-transition: color .25s ease-in-out;
    -moz-transition: color .25s ease-in-out;
    transition: color .25s ease-in-out;
}

/* identifichiamo il testo del bottone interruttore 
 * simbolo Unicode (TRIGRAM FOR HEAVEN)
*/

    .nav-toggle:after {
        content: '\2630';
        text-decoration: none;
    }

/* colore del testo al verificarsi dell'evento hover  */

    .nav-toggle:hover {
        /*color: #f4f4f4;*/
    }

/**
 * Checkbox nascosto
 * invisibile e inaccessibile  :)
 * nome del selettore dell'attributo del checkbox
 */

[id='nav-toggle'] {
    position: absolute;
    display: none;
}

    .nav-toggle, [id='nav-toggle']:checked ~ .nav > .nav-toggle {
        top: 1em;
    }

/**
 * cambiamento della posizione dell'interruttore  
 * in caso di dispositivi mobili
 * quando il pannello aperto si trova al interno del pannello 
 */
    [id='nav-toggle']:checked ~ .nav > .nav-toggle {
        left: auto;
        right: 2px;
        /*top: 1em;*/
    }

/**
 * Quando il checkbox è selezionato, per aprire il pannello 
 * usiamo la pseudo-classe :checked
 */

    [id='nav-toggle']:checked ~ .nav {
        left: 0;
        box-shadow: 4px 0px 20px 0px rgba(0,0,0, 0.5);
        -moz-box-shadow: 4px 0px 20px 0px rgba(0,0,0, 0.5);
        -webkit-box-shadow: 4px 0px 20px 0px rgba(0,0,0, 0.5);
        overflow-y: auto;
    }

/* 
 * spostamento del contenuto della pagina 
 * per la larghezza del pannello.
 * Non è obbligatorio.
*/

    [id='nav-toggle']:checked ~ main > article {
        -webkit-transform: translateX(320px);
        -moz-transform: translateX(320px);
        transform: translateX(320px);
    }

/*
 * cambio del simbolo del bottone interruttore,
 * solita croce (MULTIPLICATION X), 
 * oppure qualsiasi altro simbolo
*/

    [id='nav-toggle']:checked ~ .nav > .nav-toggle:after {
        content: '\2715';
    }

/**
 * prefissi per Android <= 4.1.2
 * 
 */

@-webkit-keyframes bugfix {
    to {
        padding: 0;
    }
}

/**
 * per dispositivi medie e piccoli
 */

@media screen and (min-width: 300px) {
}

@media screen and (max-width: 300px) {
    .nav {
        width: 100%;
        box-shadow: none;
    }
}

/**
 * Definiamo lo stile del titolo del pannello  
*/

.nav h2 {
    width: 100%;
    padding: 0;
    /*margin: 50% 0 0 0;*/
    margin-left: -25px;
    position: absolute;
    bottom: 5%;
    text-align: center;
    text-shadow: rgba(255, 255, 255, .1) -1px -1px 1px, rgba(0, 0, 0, .5) 1px 1px 1px;
    font-size: 1.3em;
    /*line-height: 1.3em;*/
    opacity: 0;
    transform: scale(0.1, 0.1);
    -ms-transform: scale(0.1, 0.1);
    -moz-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    transition: opacity 0.8s, transform 0.8s;
    -ms-transition: opacity 0.8s, -ms-transform 0.8s;
    -moz-transition: opacity 0.8s, -moz-transform 0.8s;
    -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}

/*.nav h2 a {
        color: #dadada;
        text-decoration: none;
        text-transform: uppercase;
    }*/


/* Uscita morbida del titolo (logo) all'apertura del pannello */

[id='nav-toggle']:checked ~ .nav h2 {
    opacity: 1;
    transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
}

/**
 * Decoriamo il menu 
 * usando la lista non numerata per le voci
 * aggiungiamo passaggi morbidi e trasformazioni 
 */

.nav > ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .nav > ul > li {
        line-height: 2.5;
        opacity: 0;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
        -moz-transition: opacity .5s .1s, -moz-transform .5s .1s;
        -ms-transition: opacity .5s .1s, -ms-transform .5s .1s;
        transition: opacity .5s .1s, transform .5s .1s;
    }

[id='nav-toggle']:checked ~ .nav > ul > li {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

/* impostiamo gli intervalli di apparizione delle voci del menu  */

.nav > ul > li:nth-child(1) {
    -webkit-transition: opacity .5s .1s, -webkit-transform .5s .1s;
    transition: opacity .5s .1s, transform .5s .1s;
}

.nav > ul > li:nth-child(2) {
    -webkit-transition: opacity .5s .2s, -webkit-transform .5s .2s;
    transition: opacity .5s .2s, transform .5s .2s;
}

.nav > ul > li:nth-child(3) {
    -webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s;
    transition: opacity .5s .3s, transform .5s .3s;
}

.nav > ul > li:nth-child(4) {
    -webkit-transition: opacity .5s .4s, -webkit-transform .5s .4s;
    transition: opacity .5s .4s, transform .5s .4s;
}

.nav > ul > li:nth-child(5) {
    -webkit-transition: opacity .5s .5s, -webkit-transform .5s .5s;
    transition: opacity .5s .5s, transform .5s .5s;
}

.nav > ul > li:nth-child(6) {
    -webkit-transition: opacity .5s .6s, -webkit-transform .5s .6s;
    transition: opacity .5s .6s, transform .5s .6s;
}

.nav > ul > li:nth-child(7) {
    -webkit-transition: opacity .5s .7s, -webkit-transform .5s .7s;
    transition: opacity .5s .7s, transform .5s .7s;
}

.nav > ul > li:nth-child(8) {
    -webkit-transition: opacity .5s .8s, -webkit-transform .5s .8s;
    transition: opacity .5s .8s, transform .5s .8s;
}

.nav > ul > li:nth-child(9) {
    -webkit-transition: opacity .5s .9s, -webkit-transform .5s .9s;
    transition: opacity .5s .8s, transform .5s .9s;
}

/* altezza font */
.nav-toggle, .nav > ul > li > a {
    font-size: 1.9em;
}

/**
 * decoriamo i link delle voci del menu 
 */

.nav > ul > li > a {
    display: inline-block;
    position: relative;
    padding: 0;
    text-decoration: none;
    /* passagio morbido */
    -webkit-transition: color .5s ease, padding .5s ease;
    -moz-transition: color .5s ease, padding .5s ease;
    transition: color .5s ease, padding .5s ease;
}

 /**
 * stato dei link al passaggio del mouse
 */

    .nav > ul > li > a:hover,
    .nav > ul > li > a:focus {
        padding-left: 15px;
    }

/**
 * sottolineatura dei link del menu
 */
    .nav > ul > li > a:before, .nav > ul > li > a:after {
        content: '';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
    }

    .nav > ul > li > a:before {
        transition: width 0s ease;
    }

    .nav > ul > li > a:after {
        transition: width .5s ease;
    }

/**
 * animazione della  linea di sottolineatura al verificarsi dell'evento hover 
*/

    .nav > ul > li > a:hover:before {
        width: 0%;
        -webkit-transition: width .5s ease;
        transition: width .5s ease;
    }

    .nav > ul > li > a:hover:after {
        width: 0%;
        -webkit-transition: width 0s ease;
        transition: width 0s ease;
    }

/* 
 * lo sfondo oscurante della pagina  
 * in questo caso gli elementi vengono bloccati 
*/

.mask-content {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
    opacity: 0;
}

[id='nav-toggle']:checked ~ .mask-content {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s, visibility .5s;
    transition: opacity .5s, visibility .5s;
}

.colonnaMenu {
    height: 100%;
}

.colonnaBody {
    vertical-align: middle;
    text-align: center;
}

.paginaMenuSX {
    width: 100%;
}

.paginaMenuSX {
    display: table;
}

.colonnaPagina {
    display: table-cell;
}

@media screen and (max-width: 599px) {
    .colonnaMenu {
    }

    .colonnaBody {
        padding-left: 20%;
    }

    .paginaMenuSX {
    }
}

@media screen and (min-width: 600px) {
    .colonnaMenu {
    }

    .colonnaBody {
        padding-left: 4%;
    }

    .paginaMenuSX {
    }
}

.divTitolo {
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}