/*=========================================================
 GIOCOSCUOLA PUZZLE 3.0
-----------------------------------------------------------
 style.css
=========================================================*/

/*=========================================================
 RESET
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*=========================================================
 BODY
=========================================================*/

body{

    background:#dfefff;

    background-image:
    linear-gradient(
        to bottom,
        #eaf6ff 0%,
        #ffffff 100%
    );

    font-family:
        Verdana,
        Arial,
        sans-serif;

    color:#003366;

    min-height:100vh;

}

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

#contenitore{

    width:100%;

    max-width:1800px;

    margin:0 auto;

    background:white;

    background-image:
    url("../../imgs/sfondo.png");

    box-shadow:

        0 0 15px rgba(0,0,0,.18);

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

.header{

    display:flex;

    flex-wrap:wrap;

    justify-content:space-between;

    align-items:flex-start;

    width:100%;

    padding:15px;

    margin-bottom:20px;

}


/*=========================================================
 LOGO
=========================================================*/

.header>a:first-child{

    flex:0 0 auto;

}

.header>a:first-child img{

    width:320px;

    max-width:100%;

    height:auto;

    display:block;

}


/*=========================================================
 BANNER
=========================================================*/

#headerGiocoscuola{

    width:100%;

    margin-top:15px;

    clear:both;

}

#headerGiocoscuola img{

    width:100%;

    display:block;

    border-radius:10px;

    box-shadow:

        0 4px 12px rgba(0,0,0,.18);

}


/*=========================================================
 CONTENITORE DEL GIOCO
=========================================================*/

#contenitoregioco{

    width:90%;

    margin:30px auto;

    padding:30px;

    background:white;

    border-radius:18px;

    box-shadow:

        0 5px 20px rgba(0,0,0,.15);

}


/*=========================================================
 TITOLI
=========================================================*/

h1,
h2,
h3{

    color:#005baa;

    text-align:center;

    margin-bottom:20px;

}

h2{

    font-size:36px;

    font-family:

        "Comic Sans MS",
        Verdana,
        sans-serif;

}
/*=========================================================
 MENU GIOCOSCUOLA
=========================================================*/

#menuGiocoscuola{

    flex:1;

    text-align:right;

    padding-top:20px;

}

#menuGiocoscuola a{

    display:inline-block;

    margin-left:8px;

    padding:10px 14px;

    text-decoration:none;

    color:#005baa;

    font-family:"Comic Sans MS",Verdana,sans-serif;

    font-size:20px;

    font-weight:bold;

    border-radius:8px;

    transition:
        background .25s,
        color .25s,
        transform .25s;

}

#menuGiocoscuola a:hover{

    background:#005baa;

    color:white;

    transform:translateY(-2px);

}


/*=========================================================
 PULSANTE MENU SMARTPHONE
=========================================================*/
#btnMenu{

    display:flex !important;

    width:58px;
    height:58px;

    margin:-60px 15px 20px auto;

    padding:0;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:8px;

    background:#f7941d;

    border:none;

    border-radius:8px;

    position:relative;

    z-index:10001;

}


#btnMenu span{

    display:block;

    width:30px;

    height:4px;

    margin:0 !important;

    background:#ffffff;

    border-radius:3px;

}
#btnMenu span{

    display:block;

    width:28px;
    height:4px;

    margin:10px auto !important;

    background:#ffffff;

    border-radius:3px;

}

#btnMenu:hover{

    background:#e67e00;

}


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

@media (max-width:768px){

    .header{

        flex-direction:column;

        align-items:center;

    }

    #btnMenu{

        display:block;

        margin:-60px 15px 20px auto;

    }

    #menuGiocoscuola{

        display:none;

        width:100%;

        padding:0;

        margin:0;

        text-align:center;

        animation:menuApertura .30s ease;

    }

    #menuGiocoscuola.aperto{

        display:block;

    }

    #menuGiocoscuola a{

        display:block;

        margin:0;

        padding:16px;

        background:white;

        border-bottom:1px solid #dddddd;

        font-size:22px;

    }

    #menuGiocoscuola a:hover{

        background:#f7941d;

        color:white;

    }

}


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

@keyframes menuApertura{

    from{

        opacity:0;

        transform:translateY(-10px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*=========================================================
 PANNELLI
=========================================================*/

.panel{

    max-width:1000px;

    margin:25px auto;

    padding:25px;

    background:#ffffff;

    border-radius:15px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.15);

    text-align:center;

}

.panel h2{

    margin-bottom:20px;

    color:#005baa;

}


/*=========================================================
 LABEL
=========================================================*/

label{

    display:block;

    margin:18px 0 8px;

    font-size:20px;

    font-weight:bold;

    color:#005baa;

}


/*=========================================================
 SELECT E INPUT
=========================================================*/

select,
input{

    width:100%;

    max-width:450px;

    padding:12px 15px;

    font-size:18px;

    border:1px solid #c8d6e5;

    border-radius:10px;

    background:white;

    color:#003366;

    outline:none;

    transition:.25s;

}

select:focus,
input:focus{

    border-color:#005baa;

    box-shadow:0 0 8px rgba(0,91,170,.25);

}


/*=========================================================
 PULSANTI
=========================================================*/

button{

    margin:10px 6px;

    padding:14px 26px;

    background:#f7941d;

    color:white;

    border:none;

    border-radius:10px;

    font-size:19px;

    font-weight:bold;

    cursor:pointer;

    transition:
        transform .20s,
        background .20s,
        box-shadow .20s;

    box-shadow:
        0 3px 8px rgba(0,0,0,.20);

}

button:hover{

    background:#e67e00;

    transform:translateY(-2px);

    box-shadow:
        0 5px 12px rgba(0,0,0,.25);

}

button:active{

    transform:scale(.98);

}


/*=========================================================
 BARRA INFORMAZIONI
=========================================================*/

#barraInfo{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin:25px auto;

}

.infoBox{

    min-width:160px;

    padding:15px;

    background:white;

    border-radius:12px;

    text-align:center;

    box-shadow:
        0 3px 10px rgba(0,0,0,.15);

}

.infoBox strong{

    display:block;

    margin-bottom:8px;

    color:#005baa;

    font-size:20px;

}

.infoBox div{

    font-size:28px;

    font-weight:bold;

    color:#f7941d;

}
/*=========================================================
 AREA PRINCIPALE DEL PUZZLE
=========================================================*/

#areaPuzzle{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:40px;

    margin:35px auto;

    flex-wrap:wrap;

}


/*=========================================================
 COLONNA ANTEPRIMA
=========================================================*/

#colonnaAnteprima{

    flex:0 1 340px;

}


#colonnaAnteprima .panel{

    text-align:center;

}


#imgOriginale{

    width:100%;

    max-width:300px;

    height:auto;

    border-radius:12px;

    border:6px solid white;

    box-shadow:
        0 5px 18px rgba(0,0,0,.25);

}


/*=========================================================
 COLONNA PUZZLE
=========================================================*/

#colonnaPuzzle{

    flex:1 1 650px;

}


#colonnaPuzzle .panel{

    display:flex;

    flex-direction:column;

    align-items:center;

}


/*=========================================================
 CONTENITORE PUZZLE
=========================================================*/
#puzzle{

    display:grid;

    gap:0;

    margin:20px auto;

    background:transparent;

    padding:0;

    border:none;

    box-shadow:none;

}


/*=========================================================
 TESSERE
=========================================================*/

#puzzle canvas,
.tessera{

    border-radius:4px;

    cursor:pointer;

    transition:
        transform .20s,
        box-shadow .20s;

}


#puzzle canvas:hover,
.tessera:hover{

    transform:scale(1.02);

    box-shadow:
        0 2px 8px rgba(0,0,0,.25);

}


/*=========================================================
 BARRA INFERIORE
=========================================================*/

#barraInferiore{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:20px;

    margin:35px auto;

}


#barraInferiore .infoBox{

    min-width:220px;

}


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

@media (max-width:1000px){

    #areaPuzzle{

        flex-direction:column;

        align-items:center;

    }

    #colonnaAnteprima,
    #colonnaPuzzle{

        width:100%;

        max-width:750px;

    }

}


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

@media (max-width:768px){

    #imgOriginale{

        max-width:220px;

    }

    #puzzle{

        padding:6px;

        gap:1px;

    }

}
/*=========================================================
 TESSERE DEL PUZZLE
=========================================================*/

.pezzo{

    user-select:none;

    cursor:pointer;

    overflow:hidden;

    background-repeat:no-repeat;

    background-color:white;

    border:1px solid rgba(255,255,255,.30);

    transition:
        transform .18s,
        box-shadow .18s,
        opacity .18s;

}

.pezzo:hover{

    transform:scale(1.03);

    box-shadow:
        0 3px 10px rgba(0,0,0,.30);

    z-index:2;

}

.pezzo:active{

    transform:scale(.98);

}

.pezzo.vuoto{

    background:#f3f7fb;

    border:2px dashed #b8c8d8;

    cursor:default;

    box-shadow:none;

}

.pezzo.vuoto:hover{

    transform:none;

    box-shadow:none;

}


/*=========================================================
 ANIMAZIONE SPOSTAMENTO
=========================================================*/

.animazione{

    animation:spostaPezzo .18s ease;

}

@keyframes spostaPezzo{

    from{

        transform:scale(.92);

    }

    to{

        transform:scale(1);

    }

}


/*=========================================================
 PUZZLE RISOLTO
=========================================================*/

.puzzleCompletato{

    animation:vittoria .7s ease-in-out;

}

@keyframes vittoria{

    0%{

        transform:scale(1);

    }

    25%{

        transform:scale(1.03);

    }

    50%{

        transform:scale(.99);

    }

    75%{

        transform:scale(1.02);

    }

    100%{

        transform:scale(1);

    }

}


/*=========================================================
 MESSAGGIO DI VITTORIA
=========================================================*/

#messaggioVittoria{

    display:none;

    margin:30px auto;

    max-width:700px;

    padding:25px;

    background:#e8fff0;

    border:3px solid #39b54a;

    border-radius:15px;

    text-align:center;

    color:#006633;

    font-size:28px;

    font-weight:bold;

    box-shadow:
        0 5px 15px rgba(0,0,0,.15);

}

#messaggioVittoria.mostra{

    display:block;

    animation:comparsa .4s ease;

}

@keyframes comparsa{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================================
 MESSAGGI GENERICI
=========================================================*/

.messaggioErrore{

    color:#d63031;

    font-weight:bold;

}

.messaggioInfo{

    color:#005baa;

    font-weight:bold;

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

#footer{

    width:100%;

    margin-top:40px;

    padding:20px;

    background:#87f773;

    color:#003366;

    text-align:center;

    font-size:14px;

    line-height:1.7;

}

#footer p{

    margin:10px 0;

}

#footer a{

    color:#005baa;

    text-decoration:none;

    font-weight:bold;

    transition:.25s;

}

#footer a:hover{

    color:#d35400;

    text-decoration:underline;

}

#footer img{

    vertical-align:middle;

}


/*=========================================================
 LINK
=========================================================*/

a{

    transition:.25s;

}

a:hover{

    text-decoration:none;

}


/*=========================================================
 OMBRE STANDARD
=========================================================*/

.panel,
.infoBox,
#imgOriginale,
#puzzle{

    box-shadow:

        0 6px 18px rgba(0,0,0,.15);

}


/*=========================================================
 TRANSIZIONI
=========================================================*/

button,
select,
input,
.panel,
.infoBox{

    transition:all .25s ease;

}


/*=========================================================
 VERSIONE LIM
=========================================================*/

@media (min-width:1600px){

    body{

        font-size:20px;

    }

    h2{

        font-size:42px;

    }

    button{

        font-size:22px;

        padding:16px 30px;

    }

    select,
    input{

        font-size:20px;

        padding:14px 18px;

    }

    #contenitoregioco{

        width:95%;

    }

    #imgOriginale{

        max-width:380px;

    }

}


/*=========================================================
 SCHERMI GRANDI
=========================================================*/

@media (min-width:1900px){

    #areaPuzzle{

        gap:60px;

    }

    #colonnaAnteprima{

        flex-basis:420px;

    }

    #colonnaPuzzle{

        flex-basis:900px;

    }

}


/*=========================================================
 STAMPA
=========================================================*/

@media print{

    #btnMenu,
    button{

        display:none;

    }

    body{

        background:white;

    }

    #contenitore{

        box-shadow:none;

        background:white;

    }

}
/*=========================================================
 EFFETTI GRAFICI
=========================================================*/

.panel:hover{

    transform:translateY(-3px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.18);

}

.infoBox:hover{

    transform:scale(1.03);

}


/*=========================================================
 ANTEPRIMA IMMAGINE
=========================================================*/

#imgOriginale{

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

#imgOriginale:hover{

    transform:scale(1.03);

    box-shadow:
        0 8px 25px rgba(0,0,0,.30);

}


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

#puzzle{

    transition:
        box-shadow .30s,
        transform .30s;

}

#puzzle:hover{

    box-shadow:
        0 10px 25px rgba(0,91,170,.25);

}


/*=========================================================
 EVIDENZIAZIONE TESSERA
=========================================================*/

.pezzoSelezionato{

    outline:4px solid #ff9900;

    outline-offset:-4px;

    z-index:5;

}


/*=========================================================
 TESSERA CORRETTA
=========================================================*/

.pezzoCorretta{

    animation:flashVerde .45s ease;

}

@keyframes flashVerde{

    0%{

        filter:brightness(100%);

    }

    50%{

        filter:brightness(130%);

    }

    100%{

        filter:brightness(100%);

    }

}


/*=========================================================
 CARICAMENTO IMMAGINE
=========================================================*/

#imgOriginale.caricamento{

    opacity:.35;

    filter:blur(3px);

}


/*=========================================================
 DISSOLVENZA
=========================================================*/

.fadeIn{

    animation:fadeIn .50s ease;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/*=========================================================
 COMPARSA DAL BASSO
=========================================================*/

.slideUp{

    animation:slideUp .45s ease;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*=========================================================
 EFFETTO SUCCESSO
=========================================================*/

.successo{

    animation:successo .60s ease;

}

@keyframes successo{

    0%{

        transform:scale(1);

    }

    30%{

        transform:scale(1.04);

    }

    60%{

        transform:scale(.98);

    }

    100%{

        transform:scale(1);

    }

}


/*=========================================================
 PANNELLO IMPOSTAZIONI
=========================================================*/

#setup{

    animation:fadeIn .60s ease;

}


/*=========================================================
 AREA GIOCO
=========================================================*/

#gioco{

    animation:fadeIn .60s ease;

}
/*=========================================================
 RESPONSIVE TABLET
=========================================================*/

@media (max-width:1200px){

    #contenitoregioco{

        width:95%;

        padding:20px;

    }

    #areaPuzzle{

        gap:25px;

    }

    #colonnaAnteprima{

        flex:0 1 280px;

    }

    #colonnaPuzzle{

        flex:1 1 550px;

    }

}


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

@media (max-width:900px){

    #areaPuzzle{

        flex-direction:column;

        align-items:center;

    }

    #colonnaAnteprima,
    #colonnaPuzzle{

        width:100%;

        max-width:700px;

    }

    #barraInfo,
    #barraInferiore{

        gap:15px;

    }

    .infoBox{

        min-width:160px;

    }

}


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

@media (max-width:768px){

    #contenitore{

        margin:0;

    }

    #contenitoregioco{

        width:98%;

        padding:15px;

    }

    h2{

        font-size:28px;

    }

    .panel{

        padding:18px;

    }

    label{

        font-size:18px;

    }

    select,
    input{

        width:100%;

        max-width:100%;

        font-size:17px;

    }

    button{

        width:100%;

        margin:8px 0;

        font-size:18px;

    }

    #imgOriginale{

        max-width:220px;

    }

}


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

@media (max-width:480px){

    h2{

        font-size:24px;

    }

    .panel{

        padding:15px;

    }

    .infoBox{

        width:100%;

        min-width:100%;

    }

    #imgOriginale{

        max-width:180px;

    }

}


/*=========================================================
 IMMAGINI RESPONSIVE
=========================================================*/

img{

    max-width:100%;

    height:auto;

}


/*=========================================================
 EVITA SCROLL ORIZZONTALE
=========================================================*/

html,
body{

    overflow-x:hidden;

}
/*=========================================================
 GIOCOSCUOLA PUZZLE 3.0
 BLOCCO FINALE
=========================================================*/


/*=========================================================
 VARIABILI GRAFICHE
=========================================================*/

:root{

    --blu:#005baa;

    --blu-scuro:#003366;

    --arancio:#f7941d;

    --arancio-hover:#e67e00;

    --giallo:#ffcc00;

    --verde:#39b54a;

    --bianco:#ffffff;

    --grigio:#f4f6f8;

    --ombra:
        0 5px 18px rgba(0,0,0,.18);

}


/*=========================================================
 CLASSI DI UTILITÀ
=========================================================*/

.hidden{

    display:none !important;

}

.visibile{

    display:block !important;

}

.centrato{

    text-align:center;

}

.sinistra{

    text-align:left;

}

.destra{

    text-align:right;

}

.grassetto{

    font-weight:bold;

}

.ombra{

    box-shadow:var(--ombra);

}

.bordoArrotondato{

    border-radius:12px;

}


/*=========================================================
 TRANSIZIONI GLOBALI
=========================================================*/

*{

    transition:

        background-color .20s,

        color .20s,

        border-color .20s;

}


/*=========================================================
 SELEZIONE TESTO
=========================================================*/

::selection{

    background:var(--arancio);

    color:white;

}

::-moz-selection{

    background:var(--arancio);

    color:white;

}


/*=========================================================
 BARRA DI SCORRIMENTO
=========================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#e9eef5;

}

::-webkit-scrollbar-thumb{

    background:#005baa;

    border-radius:8px;

}

::-webkit-scrollbar-thumb:hover{

    background:#003f7d;

}


/*=========================================================
 IMMAGINI
=========================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}


/*=========================================================
 FOCUS ACCESSIBILITÀ
=========================================================*/

button:focus,
select:focus,
input:focus{

    outline:3px solid var(--giallo);

    outline-offset:2px;

}

#barraInferiore{

    display:none;

}


/*=========================================================
  MENU GIOCOSCUOLA
  TENDINA MATERIALI DELLE LEZIONI
=========================================================*/

.gc-dropdown{

    position:relative;

    display:inline-block;

}


.gc-dropdown-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    padding:10px 14px;

    margin-left:8px;

    border:none;

    border-radius:8px;

    background:transparent;

    color:#005baa;

    font-family:"Comic Sans MS",Verdana,sans-serif;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:none;

}


.gc-dropdown-btn:hover{

    background:#005baa;

    color:#ffffff;

    transform:translateY(-2px);

}


.gc-freccia{

    font-size:11px;

    transition:transform .2s ease;

}


.gc-dropdown.aperto .gc-freccia{

    transform:rotate(180deg);

}


/*=========================================================
  MENU A TENDINA DESKTOP
=========================================================*/

.gc-dropdown-menu{

    display:none;

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    width:280px;

    margin-top:5px;

    padding:8px 0;

    background:#ffffff;

    border-radius:10px;

    box-shadow:0 8px 20px rgba(0,0,0,.20);

    z-index:9999;

}


.gc-dropdown.aperto .gc-dropdown-menu{

    display:block;

}


.gc-dropdown-menu a{

    display:block !important;

    width:100%;

    margin:0 !important;

    padding:10px 15px !important;

    background:#ffffff;

    color:#005baa !important;

    font-family:Arial,Helvetica,sans-serif !important;

    font-size:15px !important;

    font-weight:bold;

    text-align:left;

    text-decoration:none;

    white-space:nowrap;

    border-radius:0 !important;

}


.gc-dropdown-menu a:hover{

    background:#eef5fb !important;

    color:#f7941d !important;

    transform:none !important;

}


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

@media (max-width:768px){

    /*-----------------------------------------------------
      TESTATA PICCOLA
    -----------------------------------------------------*/

    #headerGiocoscuola img{

        content:url(
            "https://www.giocoscuola.it/imgs/testatapiccola.png"
        );

        display:block;

        width:100%;

        height:auto;

    }


    /*-----------------------------------------------------
      PULSANTE ARANCIONE
    -----------------------------------------------------*/

    #btnMenu{

        display:flex !important;

        width:50px;

        height:50px;

        margin:-60px 15px 20px auto;

        padding:0;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:5px;

        background:#f7941d;

        border:none;

        border-radius:8px;

        z-index:10001;

    }


    #btnMenu span{

        display:block;

        width:28px;

        height:4px;

        margin:0 !important;

        background:#ffffff;

        border-radius:3px;

    }


    /*-----------------------------------------------------
      MENU MOBILE
    -----------------------------------------------------*/

    #menuGiocoscuola{

        display:none;

        width:100%;

        margin:0;

        padding:0;

        text-align:center;

        position:relative;

        z-index:10000;

    }


    #menuGiocoscuola.aperto{

        display:block;

    }


    #menuGiocoscuola > a{

        display:block;

        width:100%;

        margin:0;

        padding:16px;

        background:#ffffff;

        border-bottom:1px solid #dddddd;

        font-size:22px;

        text-align:center;

    }


    #menuGiocoscuola > a:hover{

        background:#f7941d;

        color:#ffffff;

    }


    /*-----------------------------------------------------
      TENDINA MATERIALI MOBILE
    -----------------------------------------------------*/

    .gc-dropdown{

        display:block;

        width:100%;

    }


    .gc-dropdown-btn{

        display:flex;

        width:100%;

        margin:0;

        padding:16px;

        justify-content:center;

        font-size:22px;

        border-radius:0;

    }


    .gc-dropdown-menu{

        position:static;

        transform:none;

        width:100%;

        margin:0;

        padding:0;

        background:#f4f8fc;

        box-shadow:none;

        border-radius:0;

    }


    .gc-dropdown-menu a{

        display:block !important;

        width:100%;

        margin:0 !important;

        padding:12px 8px !important;

        font-size:16px !important;

        text-align:center;

        white-space:normal;

        border-bottom:1px solid #dddddd;

    }


    .gc-dropdown-menu a:last-child{

        border-bottom:none;

    }

}
/*=========================================================
  MENU GIOCOSCUOLA - PUZZLES
=========================================================*/

.gc-dropdown{
    position:relative;
    display:inline-block;
}


.gc-dropdown-btn{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    margin-left:8px;
    padding:10px 14px;

    border:none;
    border-radius:8px;

    background:transparent;

    color:#005baa;

    font-family:"Comic Sans MS",Verdana,sans-serif;

    font-size:20px;
    font-weight:bold;

    cursor:pointer;

}


.gc-dropdown-btn:hover{

    background:#005baa;
    color:white;

}


.gc-freccia{
    font-size:11px;
}


.gc-dropdown-menu{

    display:none;

    position:absolute;

    top:100%;
    left:50%;

    transform:translateX(-50%);

    width:280px;

    margin-top:5px;

    padding:8px 0;

    background:white;

    border-radius:10px;

    box-shadow:0 8px 20px rgba(0,0,0,.20);

    z-index:9999;

}


.gc-dropdown.aperto .gc-dropdown-menu{
    display:block;
}


.gc-dropdown-menu a{

    display:block !important;

    width:100%;

    margin:0 !important;

    padding:10px 15px !important;

    background:white;

    color:#005baa !important;

    font-family:Arial,Helvetica,sans-serif !important;

    font-size:16px !important;

    font-weight:bold;

    text-align:left;

    text-decoration:none;

    box-sizing:border-box;

}


.gc-dropdown-menu a:hover{

    background:#eef5fb !important;

    color:#f7941d !important;

}


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

@media (max-width:768px){

    /* TESTATA PICCOLA */

    #headerGiocoscuola img{

        content:url(
            "https://www.giocoscuola.it/imgs/testatapiccola.png"
        );

        width:100%;
        height:auto;

        display:block;

    }


    /* PULSANTE ARANCIONE */

    #btnMenu{

        display:block !important;

        width:58px;
        height:50px;

        margin:-60px 15px 20px auto;

        padding:10px;

        background:#f7941d;

        border:none;
        border-radius:8px;

        position:relative;

        z-index:10001;

    }


    #btnMenu span{

        display:block;

        width:28px;
        height:4px;

        margin:5px auto;

        background:white;

        border-radius:3px;

    }


    /* MENU */

    #menuGiocoscuola{

        display:none;

        width:100%;

        margin:0;
        padding:0;

        text-align:center;

        position:relative;

        z-index:10000;

    }


    #menuGiocoscuola.aperto{

        display:block;

    }


    #menuGiocoscuola > a{

        display:block;

        width:100%;

        margin:0;

        padding:16px;

        background:white;

        border-bottom:1px solid #ddd;

        font-size:22px;

        text-align:center;

        box-sizing:border-box;

    }


    /* TENDINA MOBILE */

    .gc-dropdown{

        display:block;

        width:100%;

    }


    .gc-dropdown-btn{

        display:flex;

        width:100%;

        margin:0;

        padding:16px;

        justify-content:center;

        font-size:22px;

        border-radius:0;

    }


    .gc-dropdown-menu{

        position:static;

        transform:none;

        width:100%;

        margin:0;

        padding:0;

        box-shadow:none;

        border-radius:0;

        background:#f4f8fc;

    }


    .gc-dropdown-menu a{

        padding:12px 8px !important;

        font-size:16px !important;

        text-align:center;

        white-space:normal;

    }

}


/*=========================================================
  CORREZIONE DEFINITIVA BARRE MENU MOBILE
=========================================================*/

@media (max-width:768px){

    #btnMenu{

        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        align-items:center !important;

        gap:10px !important;

        width:58px !important;

        height:58px !important;

        padding:0 !important;

        margin:-60px 15px 20px auto !important;

        background:#f7941d !important;

        border:none !important;

        border-radius:8px !important;

        position:relative !important;

        z-index:10001 !important;

    }


    #btnMenu span{

        display:block !important;

        width:30px !important;

        height:4px !important;

        margin:0 !important;

        padding:0 !important;

        background:#ffffff !important;

        border-radius:3px !important;

        flex:none !important;

    }

}

/*=========================================================
 VERSIONE STABILE 3.0
=========================================================*/