body,
html {
    width: 100%;
    height: 100%;
    font-size: 16px;
    font-family: Lobster;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul {
    margin: 0;
    padding: 0;
}

ol,
ul {
    list-style-type: none;
}

img {
    height: auto;
}




.animate {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}



.button {
    display: inline-block;
    background-color: #fff;
    color: #000;
    padding: 10px 20px;
    border-radius: 13.5px;
    text-decoration: none;
}

.button:hover {
    color: white;
    background-color: black;

}


.header {
    background: linear-gradient(0deg, rgba(242, 242, 242, 0.6783963585434174) 0%, rgba(0, 0, 0, 0.31985294117647056) 0%);
    
    z-index: 100;
    width: 100%;
}

.header_logo {
    background: url(img/logoForum-removebg-preview.png) no-repeat center center;
    background-size: cover;

    color: #fff;
    float: left;
    display: block;
    padding: 25px;
    margin-left: 5%;
}


.header_menu {

    float: right;

    margin: 0px;
    padding: 0;

}


.header_menu_item {
    display: inline-block;



}

.header_menu_item a {
    color: #fff;
    text-decoration: none;

    display: block;
    padding: 15px;

}

.header_menu_item a:hover {
    background-color: white;
    color: black;
}



.header_icon-bar {
    display: block;
    float: right;
    padding: 13px;
    display: none;
    /*NON deve essere visibile*/
}

.header_icon-bar span {
    display: block;
    height: 3px;
    width: 20px;
    background-color: #fff;
    margin-bottom: 5px;
}



/*_____________________
Cover 
_____________________*/



.cover {

    height: 100%;

    /*ora l immagine la impostiamo su cover cosi da essere responsive*/
    background-size: cover;
    /*impostazione cover*/
    -o-background-size: cover;
    /*impostazione cover per opera*/
    -moz-background-size: cover;
    /*impostazione cover per mozzilla*/

    background-position: center center;
    /*centriamo l immagine*/
    position: relative;
}

/*inimazione cover*/

@keyframes slideshow {
    0% {
        background-image: url(img/logoForumNav.jpg);
    }

    25% {
        background-image: url(img/PSX_20250802_160417.jpg);
    }

    50% {
        background-image: url(img/Rioni.jpg);
    }

    75% {
        background-image: url(img/Rioni2.jpg);
    }

    100% {
        background-image: url(img/Rioni3.jpg);
    }
}


/* Applica l'animazione allo sfondo */
.elemento {
    animation-name: slideshow;
    animation-duration: 60s;
    /* imposta la durata dell'animazione */
    animation-timing-function: 10s;
    /* imposta la funzione di temporizzazione dell'animazione */
    animation-iteration-count: infinite;
    /* imposta il numero di volte che l'animazione deve ripetersi */
}







.cover_filter {
    background-color: #000;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    opacity: 0.5;
}

.cover_caption {

    display: table;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;


}

.cover_caption_copy {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}


/*___________
ora screiamo un modifire cioè una classe css che andra a amodificare solo le pagine interne e si identificano con il trattino e non con l underscore
________________*/

.cover--single {
    height: 50%;
}


/*___________________________
CArds
_____________________________*/

.cards {
    
    width: 50%;
    margin: 20px auto;
}

.card {

    width: 47%;
    margin: 0 1.5%;
    float: left;
    /*ora si deve pulire il float quindi alla classe cards impostiamo la classe clearfix*/
}

.image {
    width: 100%;
    height: auto;
}
.image2 {
    width: 100%;
    height: 80%;
}

.card_copy {
    background-color: #00e0c2;
    color: white;
    text-align: center;
    padding: 15px 20px;
}

.card_copy h3 {
    margin-bottom: 0px;
}

/*___________________________
BANNER
_____________________________*/

.banner {

    background-color: #fff;
    height: 50%;
    
    

}

.banner_image {
    width: 30%;
    float: left;
    height: 100%;
    background-image: url(img/Rioni2.jpg);
    /*ora l immagine la impostiamo su cover cosi da essere responsive*/
    background-size: cover;
    /*impostazione cover*/
    -o-background-size: cover;
    /*impostazione cover per opera*/
    -moz-background-size: cover;
    /*impostazione cover per mozzilla*/

    background-position: center center;
    /*centriamo l immagine*/
}

.banner_image2 {
    background-image: url(img/Rioni4.jpg);
}

.banner_image3 {
    background-image: url(img/logoForumNav.jpg);
}

.float {

    float: right;
}

.right {

    text-align: right;
}

.banner_copy {
    background-color: #00D4FF;
    width: 70%;
    float: left;
    height: 100%;
    display: table;
    color: white;

}

.banner_copy_txt {
    display: table-cell;
    vertical-align: middle;
    padding: 30px;
}


.banner_copy_txt h3 {

    font-size: 36px;
    margin-bottom: 0;
}


.banner_copy_txt h4 {
    font-size: 22px;
    margin: 5px;
    margin-left: 0;
}









.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
}

/* IE6 */
*:first-child+html .clearfix {
    zoom: 1;
}














/*TABLET*/
@media (max-width : 998px) {

    /*banner query*/
    .banner_image,
    .banner_copy {
        width: 50%;
        height: 50%;
    }

    .right {
        text-align: left;
    }
}


/*smatphone*/
@media (max-width : 767px) {
    .right {
        text-align: left;
    }

    /*----------------------------------------
    Menu media queri
    ----------------------------------------*/
    .header_icon-bar {
        display: block;
        /*ora la icon bar sara visibile*/
    }

    .header_menu {
        width: 100%;
        /*l ul occupera tutta la larghezza*/
        /*pero lo dobbiamo anche chiudere*/
        height: 0px;
        overflow: hidden;
        /*questa proprieta nasconde tutto cio che non entra nel contenitore*/
    }

    .header_menu_item {
        display: block;
        /*gli li non saranno piu sulla stessa linea ma uno sotto l altro*/

    }

    /*classe che apre il nostro menu*/
    .is-open {
        height: 285px;
        overflow: auto;
        text-align: center;
    }

    /*----------------------------------------
    fine codice Menu media queri
    ----------------------------------------*/



    /*----------------------------------------
    cover Media Query
    ----------------------------------------*/
    .cover {
        height: 100%;
    }

    /*----------------------------------------
    cards Media Query
    ----------------------------------------*/
    .card {
        width: 100%;
        margin: 5% 5%;
    }

    .cards{
        width: 77%;

        margin-top: 20px;
    }
    


    /*___________________________
    BANNER
    _____________________________*/
    .banner {
        height: 100%;

    }

    .banner_image,
    .banner_copy {
        width: 100%;
        height: 50%;
    }

}





/*___________________________
   Article
    _____________________________*/



.single_copy {
    max-width: 800px;
    margin: 0px auto;
    margin-top: -40px;
    padding: 20px 40px;
    background-color: #868383;
    position: relative;
    z-index: 1;
}














.insta {

    background-image: url(img/insta.png);
    /*ora l immagine la impostiamo su cover cosi da essere responsive*/
    background-size: cover;
    /*impostazione cover*/
    -o-background-size: cover;
    /*impostazione cover per opera*/
    -moz-background-size: cover;
    /*impostazione cover per mozzilla*/

    background-position: center center;
    /*centriamo l immagine*/
    position: fixed;
    bottom: 20px;
    right: 20px;

    padding: 20px;
    border-radius: 5px;

    z-index: 2000;

}

.face {

    background-image: url(img/face.png);
    /*ora l immagine la impostiamo su cover cosi da essere responsive*/
    background-size: cover;
    /*impostazione cover*/
    -o-background-size: cover;
    /*impostazione cover per opera*/
    -moz-background-size: cover;
    /*impostazione cover per mozzilla*/

    background-position: center center;
    /*centriamo l immagine*/
    position: fixed;
    bottom: 70px;
    right: 20px;

    padding: 20px;
    border-radius: 5px;

    z-index: 2000;

}

.gmail {

    background-image: url(img/gmail.png);
    /*ora l immagine la impostiamo su cover cosi da essere responsive*/
    background-size: cover;
    /*impostazione cover*/
    -o-background-size: cover;
    /*impostazione cover per opera*/
    -moz-background-size: cover;
    /*impostazione cover per mozzilla*/

    background-position: center center;
    /*centriamo l immagine*/
    position: fixed;
    bottom: 115px;
    right: 23px;

    padding: 17px;
    border-radius: 5px;

    z-index: 2000;

}



footer {

    background-color: #3b3e23;
    color: black;
    padding: 10px;
    text-align: center;
    font-size: 10px;
    margin-top: 70px;

}

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

.logo img {
    height: 50px;
}

footer p {
    margin: 0;
}

footer a {
    color: #ffc300;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}


/*smatphone*/
@media (max-width : 768px) {

    /*QUERY FOOTER*/

    footer {
        position: relative;
    }


    .container1 {
        position: relative;
    }

    footer::after {
        content: "";
        display: block;
        height: 1em;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #000;
    }
}

/*----------------------------------------
    Menu media queri
    ----------------------------------------*/



*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}












/*DIV EVENTI*/


.divEventi {


    width: 60%;
    height: 90%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    /* centro orizzontale */
    align-items: center;


    display: flex;
    flex-direction: column;   /* mette gli elementi in colonna */
    align-items: center;   
}

.divEventi2 {


    width: 100%;
    height: 9%;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    /* centro orizzontale */
    align-items: center;
}


/*Telefono*/


/*Tablet*/
@media (max-width : 998px) {
    .divContent {
        height: 60%;
        width: 90%;
    }

    .divEventi {
        height: 50%;
    }
}

.slider {
    position: relative;
    width: 30%;
    height: 70%;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider2 {
   
    position: relative;
    width: 30%;
    height: 70%;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;

}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;

}

.slider button {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 20px;
}

.prev {
    left: 10px;
    float: left;
}

.next {
    right: 10px;
    float: right;
}

.bordo {

    border: red solid 1px;
}

.divTesto {
    background-color: #fff;
    width: 60%;
    min-height: 100%;
    margin: 0 auto;

}

.divTestoTxt p {
    width: 70%;
    margin: 0 auto;
}



.divTestoTxt h1 {

    padding: 20px;
    text-align: center;
    margin: 10px 0;
}

.divTestoTxt p {
    font-size: 18px;
    line-height: 1.8;
}

.divTestoTxt {

    width: 100%;
}

@media (max-width : 767px) {
    .slider {
        height: 90%;
        width: 90%;

    }
    .si{

        height: 70%;
    }

    .divEventi {
        width: 100%;
        height: 93%;
    }
    .si2{
        height: 40%;
    }

    .divTesto {
        width: 90%;
    }

    .divTestoTxt p {
        width: 80%;
        margin: 0 auto;
    }

}







.bk {
    background-color: #ffc300;
}


.pagination {
    display: flex;
    justify-content: center;
    padding: 20px;
}

.pagination a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid black;
    margin: 0 4px;
}


.pagination a:hover,
.pagination a:active
{
    background-color: #fff;
    
}