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

    .container {
        margin-bottom: 0 !important;
    }

    /* HEADER - FOOTER */
    header, footer {
        height: auto;
    }

    header {
        /* display: flex; */
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 0;
        position: fixed;
        height: 100vh;
        z-index: 10000;
        background-color: aliceblue;
    }

    header .logo, footer .logo {
        display: none;
    }

    header nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        height: 50vh;
        margin: auto;
    }

    header nav a {
        width: 90%;
        margin: 10px auto;
        font-size: 32px;
        text-align: center;
    }

    footer {
        height: auto;
        padding: 10px 15px;
    }

    header nav, footer nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    footer nav a {
        font-size: 18px;
    }

    .editor-mode {
        width: 80%;
        margin: 0 auto;
        text-align: center;
    }
    

    .slider {
        height: 300px;
        width: 100%;
        margin: 0;
    }

    .slider-img {
        height: 300px;
        width: 100%;
        border-radius: 0;
        text-align: center;
    }

    .slider-img img {
        height: 300px;
    }

    .slider-txt {
        font-size: 40px;
        bottom: 60px;
        left: 0;
        padding: 0 10px;
    }

    .burger-button {
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        position: absolute !important;
        right: 20px;
        top: 20px;
        z-index: 100000;
        background: none;
        border-radius: 5px;
        border: none;
        cursor: pointer;
    }

    .burger-bar {
        width: 50px;
        height: 8px;
        background-color: var(--w);
        border-radius: 20px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .burger-button.cross .burger-bar:nth-child(1) {
        background-color: var(--r);
        transform: rotate(45deg) translate(15px, 9.5px);
    }

    .burger-button.cross .burger-bar:nth-child(2) {
        opacity: 0;
    }

    .burger-button.cross .burger-bar:nth-child(3) {
        background-color: var(--r);
        transform: rotate(-45deg) translate(15px, -10px);
    }

    /* CARD */

    .card-section {
        width: 100%;
        height: auto !important;
        box-sizing: content-box;
        padding: 10px 0 !important;
        margin: 0 !important;
    }

    .card-container {
        display: block;
        width: 90%;
        margin: 0 auto;
        
    }

    .card {
        width: 100%;
        margin: 20px 0;
        height: auto;
    }

    .card-img {
        width: 100%;
        text-align: center;
        height: 150px !important;
    }

    .card-img img{
        width: 100%;
    }

    .card-title {
        font-size: 20px;
    }

    .card-desc {
        font-size: 14px;
    }

    .president-section {
        height: auto !important;
    }

    .president-container {
        flex-direction: column;
        height: auto !important;
        padding: 0 0 10px 0;
        width: 100%;
    }

    .president-img {
        overflow: hidden;
        height: 200px;
        width: 100%;
        margin: 0 !important;
        border-radius: 0;
        text-align: center;
    }

    .president-img img {
        width: 100%;
    }

    .president-name {
        font-size: 30px;
        bottom: 20px;
        left: 20px;
    }

    .president-title {
        font-size: 30px;
    }

    .president-desc {
        width: 90%;
        height: auto;
        margin: 12px auto;
    }

    .president-desc p {
        font-size: 10px;
        text-align: justify;
    }

    .contact-container {
        border-radius: 0;
        width: 100%;
        height: 300px;
        background-color: var(--w);
        box-shadow: 0 0 0px var(--k);
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .contact-name {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: var(--b);
        font-weight: bold;
        width: 50%;
    }

    .contact-name img {
        height: 100px;
    }

    .contact-txt {
        font-size: 40px;
        top: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: max-content;
    }


    /* EVENT PAGE */
    .search-container {
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: 5px auto;
    }

    .search-container span:first-child {
        font-size: 20px;
    }

    .search-container span, .search-container span input {
        width: 90%;
    }

    .event-container {
        flex-direction: column;
        width: 100%;
        justify-content:flex-start;
    }

    .event-card {
        width: 90%;
        margin: 5px auto;
        height: auto;
    }

    .event-category {
        width: 90%;
        padding: 5px 10px;

    }

    .event-title {
        font-size: 18px;
    }

    .event-img {
        height: 150px;
        width: 100%;
    }

    .event-img img, .event-info {
        width: 100%;
    }

    /* PROGRAMME PAGE */
    .programme-container {
        width: 90%;
    }

    .programme-container h1, .arg-nbr {
        font-size: 32px;
    }

    .programme-category {
        font-size: 18px;
    }

    .programme-resum {
        font-size: 20px;
    }

    .programme-desc p {
        font-size: 16px;
    }

    .programme-arg {
        flex-direction: column;
        align-items: flex-start;
    }

}