/* GLOBAL */
/*
@font-face {
    font-family: 'Helvetica';
    src: url('../font/Helvetica.ttc') format('truetype');
    font-weight: thin;
}
*/

* {
    margin: 0 0;
    padding: 0 0;
    box-sizing: border-box;
    font-family: Helvetica, sans-serif;
    font-weight: 100;
    
   
}



.responsive, .mobile {
    display: none;
}

html, body {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;

    background-image: url('../img/sfondo2.jpg') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    

}

a {
    text-decoration: none;
    color: white
}

section {
    width: 100%;
    height: 100vh;
    position: relative;
  
   
    scroll-snap-align: start;

}

#calendarioeventi {
    height: max-content !important;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
}

#associati {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

#tessera, #immagineassociati {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    text-align: center;
}

#tessera img, #immagineassociati img  {
    width: 400px;
    height: auto;
}

#immagineassociati img {
    width: 300px;
    margin-bottom: 100px;
}

.tesseratesto {
    color: white;
}

.tesseratesto h1 {
    font-weight: bolder;
}

.tesseratestotitolo {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    padding-bottom: 2rem;
}

.tesseratestotitolo h3 {
    font-size: 25px;
    line-height: 40px;
}

.tesseratestotitolo h2 b, .contattibox h2 {
    font-weight: bolder !important;
    line-height: 35px;
}

#tessera span {
    padding: 20px 0;
    font-size: 18px;
}



/*
    ALIGNMENT
*/

.colonna {
    display: flex;
    flex-direction: column;
}

.riga {
    display: flex;
    flex-direction: row;
}

.centrato {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centratosx {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.rigalogo.contatti {
    height: 150px;
}


/* LOCANDINA */

#oscura {
    background-color: rgba(34,34,34,.8);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#oscura img {
    width: 50%;
    height: auto;
}

#locandina {
    display: flex;
    flex-direction: column;
    position: relative
}

#logohome {
    position: fixed;
    top: 2%;
    right: 2%;
    width: 300px;
    height: auto;
    z-index: 100;
}

.immaginelocandina {
    width: 100%;
    position: relative;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.immaginelocandina img {
    width: 120%;
    height: auto;
}

.datalocandina {
    width: 100%;
    height: 180px;
    flex-shrink: 0;
    background-color: #ffc965;
    display: flex;
    flex-direction: row;
    padding: 10px 0;
}


.bollinodata {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 3%;
}

.bollinodata img {
    width: 170px;
    height: auto;
}


.datalocandinaparole {
    display: flex;
    flex-direction: column;
    width: 60%;
    height: 100%;
    align-items: flex-start;
    justify-content: flex-start;
}


.meseoralocandina {
    font-size: 25px;
    height: 30px;
    line-height: 30px;
    flex-shrink: 0;
    font-weight: bold;
}

.datalocandinaparole h1 {
    color: white;
    font-size: 60px;
    letter-spacing: 1px;
    height: 100%;
    font-weight: bolder;
}

.datalocandinaparole h2 {
    color: white;
    font-size: 35px;
    height: 50%;
  

}

.locationlocandina {
    font-size: 20px;
    height: 30px;
    width: 100%;
    flex-shrink: 0;
    line-height: 30px;
}

.testolocandina {
    height: min-content;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10%;
    color: white;
    font-size: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

}

.testolocandina b {
    margin-top: 15px;
    font-size: 22px;
    color: white;
    font-weight: 600;

}

.socilocandina, .sponsorlocandina {
    width: 100%;
    height: 80px;
    background-color: white;
    text-align: center;
    line-height: 30px;
    padding: 10px 20px;
    flex-shrink: 0;
}

.sponsorlocandina {
    padding: 0 10%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;

}


.sponsorlocandina img {

    width: auto;
    height: 50px;
    margin: 0 20%;

}
.footerlocandina {
    color: white;
    font-size: 20px;
    text-align: center;
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding: 10px 0;
    flex-shrink: 0;
}

.footerlocandina a {
    cursor: pointer;
}



/* 
TIPOGRAFIA 

*/

h1 {
    font-size: 40px;
    letter-spacing: 3px;
}


h2 {
    font-size: 25px;
}

h2 b {
    font-size: 28px;
    text-transform: uppercase;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

.rigalogo {
    height: 150px;
    width: 100%;
    padding-top: 10px;
}

.rigalogo img {
    height: 200px;
    width: auto
}

.lineabianca {
    width: 100%;
    height: 3px;
    background-color: white;
    margin: 5px 0;
}

#banner {
    background-color: white;
    padding: 10px 10%;
    width: 100%;
    height: 100px;
    font-size: 20px;

}

.banner img {
    height: 100%;
    width: auto;
}

.eventi {
    /*background-image: url("../img/villa.jpg") !important;*/
    background-position: bottom;
    background-size: cover;
}

.immagineevento {
    width: 200px;
    height: 100%;
    flex-shrink: 0;
    position: relative;
}

.circoloevento {
    height: 170px;
    width: 100%;
    flex-shrink: 0;
    z-index: 10;
    position: absolute;
    top: 5px;
    left: 5px;
}


.circoloevento img {
    height: 100%;
    width: auto;
}

.testoevento {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 5px 10px;
}

.marzo10 {
    background-color: #e8a465;
}

.marzo10sfondo {
    background-image: url("../img/marzo2022/desktop/calendario/10marzo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}



.marzo24 {
    background-color: #a0bcc7;
}

.marzo24sfondo {
    background-image: url("../img/marzo2022/desktop/calendario/24marzo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.marzo31 {
    background-color: #f18c84;
}

.marzo31sfondo {
    background-image: url("../img/marzo2022/desktop/calendario/31marzo.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.aprile14 {
    background-color: #93bfb2;
}

.aprile14sfondo {
    background-image: url("../img/marzo2022/desktop/calendario/14aprile.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.aprile28 {
    background-color: #d7a9b6;
    color: #222 !important;
}

.aprile28 h1, .aprile28 h2, .aprile28 h3 {
    color: #222 !important;
}

.aprile28sfondo {
    background-image: url("../img/marzo2022/desktop/calendario/28aprile.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.maggio12 {
    background-color: #ecc65b;
}

.maggio12sfondo {
    background-image: url("../img/marzo2022/desktop/calendario/12maggio.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


.maggio26 {
    background-color: #aa874f;
}

.maggio26sfondo {
    background-image: url("../img/marzo2022/desktop/calendario/26maggio.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.maintitleevento {
    width: 100%;
    flex-shrink: 0;
    height: auto;
    margin-bottom: 20px;
}
.dataevento {
    width: 60%;
    height: 20px;
    font-size: 20px;
    color: white;
    font-weight: bold;
    
}

.dataevento span {
    color: #000;
    font-size: 22px;
    margin: 0 10px 0 0;
    font-weight: bold;
}

.titoloevento {
    color: #000;
    width: 100%;
    padding: 5px 0;
}

.titoloeventospan {
    font-size: 36px;
    font-weight: bold;

}

.sottotitoloeventospan {
    font-size: 18px;
}

.sottotitoloeventospan.rilievo {
    font-size: 26px;
    font-weight: bold;
}

.descrizioneevento {
    font-size: 18px;
    height: 100%;
    width: 100%;
    flex-shrink: 1;
    letter-spacing: .5px;
}

.footerevento {
    font-size: 16px;
    width: 100%;
    height: 50px; 
    flex-shrink: 0;
    color: #000;
    font-weight: bold;
}

/* MENU */


#menu_page {
    width: 100%;
    height: 50px;
    background-color: rgba(17,17,17,.8);
    color: white;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 20px;
    z-index: 100;
    text-transform: uppercase;
}

.footer {
    width: 100%;
    height: 100px;
    z-index: 100;
    background-color: rgba(190,150,91,.8);
    color: white;
    position: absolute;
    bottom: 0;
    left: 0;

}

.coloreblu {
    color: #2c3060 !important;
}

.colorebianco {
    color: white
}

.contattibox {
    width: 50%;
    margin: 0 25%;
    height: auto;
    color: white;
}

.contattibox.claimcontatti {
    width: 40%;
    height: auto;
    margin: 25px auto;
    text-align: center !important;
}

.contattirow {
    height: 60px;
    width: 40%;
    margin: 0 30%;
    align-items: flex-start !important;
}

.immaginecontatto {
    width: 60px;
    height: 60px;
    align-items: flex-start !important;
    padding: 0 10px;
}

.immaginecontatto img {
    width: 30px;
    height: 30px;
}

.labelcontatto {
    font-size: 20px;
    letter-spacing: 1px;
    color: white;
    display: flex;
    flex-direction: column;
    height: auto;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;

}

.labelcontatto span {
    font-size: 10px;
    color: #a0a0a0;
}


#projectbox {
    width: 60%;
    height: auto;
    font-size: 20px;
    color: white;
    margin: 30px 20%;
}


.titlecalendario {
   
    font-size: 50px;
    width: 100%;
    height: 100;
    padding: 25px 0;
    text-align: center;
    background-color: white;
    color: #222;
}

.eventrow {
    width: 48%;
    height: 450px;
   
    background-color: #222;
    margin: 1rem 1%;
    flex-shrink: 0;
}


.oscuraEventoCalendario {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

}

.oscuraEventoCalendario img {
    height: 80%;
    width: auto;
    
}


#evento1 {
    top: 200px;
    left: 5px
}

#evento2 {
    top: 200px;
    right: 5px
}

#evento3 {
    top: 700px;
    left: 5px
}

#evento4 {
    top: 700px;
    right: 5px
}

#evento5 {
    top: 1200px;
    left: 5px
}

#evento6 {
    top: 1200px;
    right: 5px
}


@media screen and (min-width: 1366px) and (max-width: 1599px) {
    .descrizioneevento {
        font-size: 14px;
}
}
@media screen and (min-width: 1600px) and (max-width: 1700px) {
    .descrizioneevento {
        font-size: 16px;
}
}

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

    .responsive {
        display: none !important;
    }
    
    #projectbox {
        font-size: 1.3rem;
    }

    .footer {
        height: 150px;
        font-size: 1.3rem;
    }
    .contattibox {
        font-size: 1.3rem;
    }

}

@media screen and (min-width: 1920px) {
    .responsive {
        display: none;
    }
   
    #projectbox {
        font-size: 1.5rem;
    }

    .footer {
        height: 150px;
        font-size: 1.5rem;
    }
    .contattibox {
        font-size: 1.5rem;
    }

}

.fire, .fire h2, .fire h1, .fire h3 {
    background-color: #83c2db !important; 
    color: #222 !important;
}

.settembre, .settembre h2, .settembre h1, .settembre h3 {
    background-color: #efbd49 !important; 
    color: #222 !important;
}

.ottobre, .ottobre h2, .ottobre h1, .ottobre h3 {
    background-color: #ee704d !important; 
    color: #222 !important;
}

.novembre, .novembre h2, .novembre h1, .settenovembrembre h3 {
    background-color: #c28ebf !important; 
    color: #222 !important;
}

.dicembre, .dicembre h2, .dicembre h1, .dicembre h3 {
    background-color: #e44a53 !important; 
    color: #222 !important;
}


.cordaro, .cordaro h2, .cordaro h1, .cordaro h3 {
    background-color: #ADA6D2 !important; 
    color: #222 !important;
}

.tonodem, .tonodem h2, .tonodem h1, .tonodem h3 {
    background-color: #F08B85 !important; 
    color: #222 !important;
}

.bluebop, .bluebop h2, .bluebop h1, .bluebop h3 {
    background-color: #A9874F !important; 
    color: #222 !important;
}

.powersoul, .powersoul h2, .powersoul h1, .powersoul h3 {
    background-color: #70AF9E !important; 
    color: #222 !important;
}

.conte, .conte h2, .conte h1, .conte h3 {
    background-color: #EECB6B !important; 
    color: #222 !important;
}

.duohana, .duohana h2, .duohana h1, .duohana h3 {
    background-color: #D7A9B5 !important; 
    color: #222 !important;
}

.sorpresa, .sorpresa h2, .sorpresa h1, .sorpresa h3 {
    background-color: #EC6771 !important; 
    color: #222 !important;
}



.marzo, .marzo h2, .marzo h1, .marzo h3 {
    background-color: #b1c888 !important; 
    color: #222 !important;
}

.aprile, .aprile h2, .aprile h1, .aprile h3 {
    background-color: #f4a280 !important; 
    color: #222 !important;
}

.maggio, .maggio h2, .maggio h1, .maggio h3 {
    background-color: #d393b0 !important; 
    color: #222 !important;
}


.sfondo {

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.fire.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/fire.jpg");
}

.fiozanotti.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/powersoul.jpg");
}

.mobile.fiozanotti.sfondo {
    background-image: url("../img/rev_agosto2022/mobile/calendario/powersoul.jpg");
}

.tonodem.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/tonodem.jpg");
}

.powersoul.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/powersoul.jpg");
}

.cordaro.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/cordaro.jpg");
}

.conte.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/conte.jpg");
}

.duohana.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/duohana.jpg");
}


.sorpresa.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/sorpresa.jpg");
}

.bluebop.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/bluebop.jpg");
}

.ggquartet.sfondo {
    background-image: url("../img/2023_1semestre/desktop/calendario/20230202.jpg");
}

.bluepop.sfondo {
    background-image: url("../img/2023_1semestre/desktop/calendario/20230316.jpg");
}

.kikka.sfondo {
    background-image: url("../img/2023_1semestre/desktop/calendario/20230302.jpg");
}

.jetlag.sfondo {
    background-image: url("../img/2023_1semestre/desktop/calendario/20230511.jpg");
}

.bandostello.sfondo {
    background-image: url("../img/2023_1semestre/desktop/calendario/bandostellocalifornia.jpg");
}

.nataleinsieme.sfondo {
    background-image: url("../img/2023_1semestre/desktop/calendario/nataleinsieme.jpg");
}

.positiva.sfondo {
    background-image: url("../img/2023_1semestre/desktop/calendario/positivarockabillygang.jpg");
}

.hystory.sfondo {
    background-image: url("../img/rev_agosto2022/desktop/calendario/thehystoryofvocaljazz.jpg");
}

.mobile.bandostello.sfondo {
    background-image: url("../img/rev_agosto2022/mobile/calendario/bandostellocalifornia.jpg");
}

.mobile.positiva.sfondo {
    background-image: url("../img/rev_agosto2022/mobile/calendario/rockabillygang.jpg");
}





.btn-wrapper {
    width: 80%;
    margin: 10px 10%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    
}

.btn-wrapper a {
    background-color: #FFF;
    color: #222;
    padding: 20px 30px;
    margin: 3px 3px;
    border-radius: 10px 10px;
    font-weight: 600;
    font-size: 20px;
}

.doubleborder {
    width: auto;
    height: min-content;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-self: center;
    margin-top: 20px;
    border-radius: 10px 10px;
}




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

.desktop {
    display: none;
}

     .mobile {
            display: block;
        }

        #progetto {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .ctn.responsive {
            margin-top: 0;
            padding-top: 0;
        }

        .rigalogo img{
            margin: 0 10%;
        }

        .responsive {
            display: block;
        }

        #banner {
            display: none;
        }

        .lineabianca {
            display: none;
        }

        #banner img {
            width: 220%;
            height: auto
        }

        #projectbox {
            display: none;
        }


        .rigalogo {
           
            flex-shrink: 0;
        }

        .rigalogo.evento {
            margin-top: 0;
            height: 150px;
        }

        .rigalogo img {
            width: 80%;
            height: auto;
        }

        .rigalogo.evento img {
            width: 90%;
            height: auto;
        }

        .footer {
            position: absolute;
            top: 150px;
            left: 0;
            padding: 5 2%;
            text-align: center;
            height: 180px;
        }


        .lineabianca.responsive {
            height: 2px;
            width: 100%;
            background-color: white;
            margin: 5px 0;
            display: block;
        }

        #banner.responsive {
            width: 100%;
   
            padding: 15px 5px;
            background-color: white;
            display: flex;
            height: 150px;
            color: #222;
            text-align: center;
        }


        .rigalogo.contatti {
            display: none;
        }


            .contattibox {
                width: 90%;
                height: auto;
                padding: 10% 5%;
                margin: 0 0;

            }

          
            .contattibox.claimcontatti {
                width: 90%;
                height: auto;
                margin: 5% 5%;
            }

            .contattirow {
                margin: 0 0;
                width: 100%;
                height: 50px;;
            }


    h1 {
        margin: 20px 0;
    }

    .oscuraEventoCalendario img {
        width: 80%;
        height: auto;
        
    }

    
   

  /*  section {
        background-image: url("http://www.amicidelsound.it/img/sfondo2_mob.jpg") !important;
    } */


    .eventi {
        background-image: url("http://www.amicidelsound.it/img/villa_mob.jpg") !important;
    }   


    .immaginelocandina img{
        width: 100%;
        height: auto;
    
    }

    


    
}
@media only screen and (min-width: 1025px) {
    .responsive {
        display: none;
    }


}

@media only screen and (min-width: 401px) and (max-width: 1024px) {


    section {
        background-image: url("../img/sfondo2_mob.jpg");
    }


    .eventi {
        background-image: url("../img/villa_mob.jpg");
    }    


   

       

        .footer {
            top: 25%;
        }

        .rigalogo.evento img {
            width: 90%;
        }

        h1 {
            margin: 25px 0;
        }

        .contattibox.claimcontatti {

            width: 70%;
        }
  
        .contattibox {
            width: 70%;
        }

        .contattirow {
            width: 100%;
            margin: 10px 10%;

        }

        .sponsorlocandina img {
            height: 50px;
            width: auto;
        }

        .immaginelocandina img{
            width: 100%;
            height: auto;
        
        }
    
       

        

}