@media screen and (max-width: 960px){
    #header .relative{ width: 100%; }
    #slider .item > div form
    { display: none; }

    #slider .item > div{
        display: flex;
        width: calc(100% - 90px);
        left: 90px;
    }

    #header .mainmenu,
    #header .menuside{ display: none; }
    #header{ margin-top: 0; }
    #header .logo{ position: relative; }
    #header .menu{ display: block; }

    section.messages{ padding: 0 0; }
    .section.messages .inner{
        width: 70%;
        padding-top: 40px;
        margin: 0 auto;
    }
    .section.messages .allnews{ padding: 0 15px; }
    .section.messages .news img,
    .section.messages .news .noimg{ width: 120px; height: 120px; }
    .section.messages .news img + div{ width: calc(100% - 120px); }
}

@media screen and (max-width: 768px){
	/* Styles for Tablets & Phones */
    #header .mainmenu,
    #header .menuside{ display: none; }
    #header{ margin-top: 0; }
    #header .logo{ position: relative; }
    #header .menu{ display: block; }
    #header .logo{
        width: 100px;
        height: 100px;
    }
    #slider .item > div{
        display: flex;
        width: 100%;
        left: 0;

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

@media screen and (max-width: 600px){
    #slider .ellipse,
    #slider .item > div p,
    #slider .item > div form
    { display: none; }
    #slider .item > div h3{
        color: #fff;
        text-align: center;
        width: 80%;
        font-size: 1.4em;
    }

    #slider .controls.left{ left: 0px }
    #slider .controls.right{ right: 0px }

    .section .section-title{ font-size: 2.5em; }
    .section .section-desc{ font-size: 0.9em; }

    .section.community .blocs .bloc{
        width: 100%;
        height: 150px;
    }
    .section.community .blocs{ gap: 15px; }
    .section.community .blocs .bloc .texts .relative > div{ width: calc(100% - 42px); }
    .section.leaders .squares{ display: none; }
    .section.leaders{ height: auto; }
    .section.leaders span{
        display: block;
        margin: 0 auto;
    }
    .section.messages .inner{
        width: 100%;
        padding-top: 0px;
    }
    .section.actualites .posts{ flex-wrap: wrap; }
    .section.actualites .posts .post{ width: 100%; }
    .section.newsletter h3{ width: 100%; }
    .section.newsletter .form{ width: 100%; }

    footer .logo-holder{ display: none; }
    footer .mini{ margin-bottom: 30px; }
    footer .container{ padding-bottom: 50px;}
    footer .goup{ bottom: 0; }
    footer .madeby{ right: 15px; bottom: 20px; }

    .section.hero{ height: auto; }
    .section.hero h3,
    .section.hero h3 + p{ width: 100%; }
    .section.hero h3{ font-size: 2.8em; }
    .section.apropos .image{ height: 300px; overflow: hidden; }
    .section.apropos .image img{ width: 100%; }
    .section.programme .contenu{ padding: 0 0; }
    .section.programme .seance p{ width: calc(100% - 32px); }

    .section .section-desc{ width: 100%; }
    .section.joinus .locations{ padding-left: 0; }
    .section.joinus .map{ height: 300px; }

    .sidedpage{ margin-top: 0; }
    .sidedpage .section{ padding: 30px 15px 0; }
    .sidedpage .sidebar .section{  padding: 30px 0 45px; }
    .audio .metas{
        flex-direction: column;
        row-gap: 15px;
    }
    .audio .metas a{ justify-content: center; padding: 15px 0; margin-bottom: 15px; }
    .audio .metas audio{ width: 100%; }

    #videoModal .modal-body .videoHolder{
        padding-right: calc(0.5 * 1.5rem);
    }
    #videoModal .modal-body iframe{
        border-top-left-radius: 16px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 16px;
        border-bottom-right-radius: 0px;
    }
    #videoModal .modal-body .texts{
        padding-left: calc(1 * 1.5rem);
        padding-right: calc(1 * 1.5rem);
    }
    #videoModal .modal-body .texts h3{ margin-top: 30px; }
    .dons .container > div{ width: 100% !important; }
    .communaute .grid{
        row-gap: 15px;
        column-gap: 0;
        width: 100%;
        grid-template-columns: 1fr;
    }
    .communaute .grid > div{ width: 100%; }
    .communaute .grid div.staged{
        grid-column: auto / auto;
        grid-row: auto / auto;

        height: 250px;
    }
    .lecture .header{ margin-top: 60px; }
    .lecture .header .controls{ top: -40px; margin-top: 0; }
}