:root {
	--bordeau: #A40000;
	--vert:#134f23;
}
body.offcanvas-active {
    overflow: hidden;
}

.offcanvas-header {
    display: none;
}

.screen-darken {
    height: 100%;
    width: 0%;
    z-index: 30;
    position: fixed;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(34, 34, 34, 0.6);
    transition: opacity .2s linear, visibility 0.2s, width 2s ease-in;
}

.screen-darken.active {
    z-index: 10;
    transition: opacity .3s ease, width 0s;
    opacity: 1;
    width: 100%;
    visibility: visible;
}

@media all and (min-width: 991px) {
    #navbar_main {
        display: none;
    }
}

/* ============ mobile view ============ */
@media all and (max-width: 991px) {

    ::-webkit-scrollbar {
        width: 0px!important;
        background: none;
        /* background-image: initial; */
        /* background-position-x: initial; */
        /* background-position-y: initial; */
        /* background-size: initial; */
        /* background-repeat: initial; */
        /* background-attachment: initial; */
        /* background-origin: initial; */
        /* background-clip: initial; */
        /* background-color: rgb(150, 0, 0); */
    }
    .offcanvas-header {
        display: block;
    }

    .mobile-offcanvas { 
        0px 0px 10px 0px rgba(34, 34, 34, 0.2)
        visibility: hidden;
        transform: translateX(-100%);
        border-radius: 0;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1200;
        overflow-y: scroll;
        overflow-x: hidden;
        transition: visibility .3s ease-in-out, transform .3s ease-in-out;
    }

    .mobile-offcanvas.show {
        visibility: visible;
        transform: translateX(0);
    }

    .mobile-offcanvas .container,
    .mobile-offcanvas .container-fluid {
        display: block;
    }

    .no-lightbox img {
        max-width: 100% !important;
    }

    #contenu_menu_mobile {
        height: 100%;
        width: 98%;
        background-image: linear-gradient(rgba(17, 27, 41, 0.6), rgba(17, 27, 41, 0.6)), url(https://assets.tryhackme.com/img/svgs/star-pattern.svg);
        background-color: darkslateblue;
    }

    .sub-menu {
        display: none;
    }

    li a:hover+.sub-menu,
    .sub-menu:hover {
        display: block !important;
    }
}

#navbar_main {
    width:90%;
    z-index: 99999999999;
}

#navbar_main a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
}

#navbar_main ul li {
    text-align: left;
    list-style-type: none;
    text-transform: uppercase;


}

#navbar_main i,
header i {
    background-color: transparent;
}

#cff.cff-masonry.masonry-4-desktop .cff-item {
    width: 21% !important;
}


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

@media screen and (min-width: 1601px) and (max-width: 1990px) {}

@media screen and (min-width: 900px) and (max-width: 1200px) {}

@media screen and (min-width: 640px) and (max-width: 900px) {}

/* MOBILE */
@media screen and (min-width: 200px) and (max-width: 640px) {

    #cff.cff-masonry.masonry-4-desktop .cff-item {
        width: 98% !important;
        padding-left: 4px;
        padding-right: 4px;
        height: auto;
    }

    .news .card {
        width: 100%;
    }

    #header {
        display: none !important;
    }
    


}

.bouton_fermeture {
    font-size: 30px !important;
    padding:10px;
}