/*-----------------*/
/*-----Navbars-----*/
/*-----------------*/
@media (min-width: 1px) and (max-width: 692px){
    .navbar {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        border-radius: 15px;
        border: 1px solid var(--Main-Colors-Black-Deskiz, #181A1F);
        background: var(--Main-Colors-Blanc-Deskiz, #FFF);
        overflow: hidden;
    }
    .navbar .right ul {
        list-style: none;
        flex-direction: column;
        font-family: 'Alpino-Regular';
        gap: 10px;
        letter-spacing: -.3px;
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        display: none;
        align-items: stretch;
        padding-inline-start: 0;
        margin-block-end: 0;
        margin-left: 30px;
        margin-right: 30px;
        margin-block-start: 0.5em;
    }
    .navbar .right  {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .navbar .right li{
        padding: 2.4% 4.4% 2% 4.4%;
        white-space: nowrap;
        border-radius: 50px;
        border-top: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-right: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-bottom: 4px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-left: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        background: var(--Foundation-Yellow-Light, #FFFAE6);     
        text-decoration: none;  
        transition: all .1s;
        cursor: pointer;
    }
    .navbar .right li:active{
        border-top: 4px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-right: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-bottom: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-left: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
    }
    .hamburger {
        display: flex;
        padding: 16px;
        padding: 5px 12px !important;
        position: absolute;
        right: 20px;
        top: 30px;
    }
    .hamburger-inner, .hamburger-innerbefore, .hamburger-innerafter {
        width: 30px !important;
        height: 4px !important;
    }
    .hamburger-box {
        margin-block-start: 4px;
    }
    .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
        width: 30px !important;
        height: 4px;
    }
    .navbar .left {
        display: none;
        align-items: center;
        flex-direction: column;
        margin-block-start: 1.25em;
    }
    .navbar .left .button_connection {
        align-self: stretch;
        text-decoration: none;
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        text-align: center;
        font-family: Eskool;
        border-top: 1px solid var(--Main-Colors-Black-Deskiz, #181A1F);
    }
    #homepage .navbar .left .button_connection:active {
        background-color: var(--main-colorsjaune-deskiz);
    }
    .navbar .left .button_register {
        align-self: stretch;
        text-decoration: none;
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        text-align: center;
        font-family: Eskool;
        background: var(--Main-Colors-Jaune-Deskiz, #FFC901);
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        text-align: center;
        font-family: Eskool;
        border-top: 1px solid var(--Main-Colors-Black-Deskiz, #181A1F);
    }
    #homepage .navbar .left .button_register:active {
        background: var(--Main-Colors-Black-Deskiz, #181A1F);
        color: var(--Main-Colors-Jaune-Deskiz, #FFC901);
    }

    .navbar img {
        width: 35px;
        margin-top: 17px;
        margin-left: 35px;
        margin-bottom: 17px;
    }

    .navbar.active .right, .navbar.active .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .navbar.active .right ul, .navbar.active .left {
        gap: 20px;  
    }

    .navbar .right li, .navbar .left a {
        padding: 10px 20px;
        text-align: center;
        text-decoration: none;
    }
}
@media (min-width: 693px) {
    .hamburger {
        display: none !important;
    }
    .navbar .right ul {
        list-style: none;
        font-family: 'Alpino-Regular';
        gap: 10px;
        letter-spacing: 0.15px;
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        display: none;
        align-items: stretch;
        margin-block-start: 1.1em;
    }
    #homepage .navbar {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        border-radius: 15px;
        border: 1px solid var(--Main-Colors-Black-Deskiz, #181A1F);
        background: var(--Main-Colors-Blanc-Deskiz, #FFF);
        overflow: hidden;
    }
    #homepage .navbar .right {
        display: flex;
        align-items: center;
        margin-left: 4.4%;
    }
    .navbar .right li{
        padding: 2.4% 4.4% 2% 4.4%;
        white-space: nowrap;
        border-radius: 50px;
        border-top: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-right: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-bottom: 4px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-left: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        background: var(--Foundation-Yellow-Light, #FFFAE6);
        text-decoration: none;
        cursor: pointer;
        transition: all .1s;
    }
    .navbar .right li:hover{
        border-top: 4px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-right: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-bottom: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
        border-left: 1px solid var(--Main-Colors-Jaune-Deskiz, #FFC901);
    }
    #homepage .navbar img {
        width: 35px;
    }
    #homepage .navbar .left {
        display: flex;
        align-items: center;
    }
    #homepage .navbar .left .button_connection {
        display: flex;
        padding: 0px 30px 50px 30px;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        height: 100%;
        font-family: 'Alpino-Regular';
        text-decoration: none;
        border-left: 1px solid var(--Main-Colors-Black-Deskiz, #181A1F);
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        text-align: center;
        font-family: Eskool;
        transition: all .1s;
    }
    #homepage .navbar .left .button_connection:hover {
        background-color: var(--main-colorsjaune-deskiz);
    }
    #homepage .navbar .left .button_register {
        display: flex;
        padding: 0px 30px 50px 30px;
        align-items: center;
        gap: 10px;
        align-self: stretch;
        height: 100%;
        font-family: 'Alpino-Regular';
        text-decoration: none;
        border-left: 1px solid var(--Main-Colors-Black-Deskiz, #181A1F);
        background: var(--Main-Colors-Jaune-Deskiz, #FFC901);
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        text-align: center;
        font-family: Eskool;
        transition: all linear .1s;
    }
    #homepage .navbar .left .button_register:hover {
        background: var(--Main-Colors-Black-Deskiz, #181A1F);
        color: var(--Main-Colors-Jaune-Deskiz, #FFC901);
    }
}
@media (min-width: 1224px) {
    .navbar .right ul {
        list-style: none;
        font-family: 'Alpino-Bold';
        gap: 10px;
        letter-spacing: -.2px;
        color: var(--Main-Colors-Black-Deskiz, #181A1F);
        display: flex;
        align-items: stretch;
        margin-block-start: 1.1em;
    }
}


/*-----------------*/
/*-----Buttons-----*/
/*-----------------*/
@media (min-width: 1px) {

    /*-----2D or 3D-----*/
    .btn-small-size-3d {
        border-top: 1.25px solid;
        border-right: 1.25px solid;
        border-bottom: 3.75px solid;
        border-left: 1.25px solid;
        text-decoration: none;
        transition: all ease-out .15s;
    }
    .btn-small-size-3d:hover{
        border-top: 3.75px solid;
        border-bottom: 1.25px solid;
    }
    .btn-large-size-3d {
        border-top: 2px solid;
        border-right: 2px solid;
        border-bottom: 6px solid;
        border-left: 2px solid;
        text-decoration: none;
        transition: all ease-out .15s;
    }
    .btn-large-size-3d:hover {
        border-top: 6px solid;
        border-bottom: 2px solid;
    }
    .btn-small-size-2d {
        border: 1px solid;
    }
    .btn-large-size-2d {
        border: 1px solid;
    }

    /*-----Radius and size-----*/
    .btn-small-radius-round {
        border-radius: 500px;
        padding: 5px 20px;
    }
    .btn-small-radius-square {
        border-radius: 10px;
        padding: 5px 15px;
    }
    .btn-large-radius-round {
        border-radius: 500px;
        padding: 14px 32.5px 15px 32.5px;
    }
    .btn-large-radius-square {
        border-radius: 10px;
        padding: 14px 32.5px 15px 32.5px;
    }
    
}


/*----------------*/
/*-----Footer-----*/
/*----------------*/
@media (min-width: 1px) {
    #footer {
        border-radius: 15px;
        background: var(--Main-Colors-Bleu-fonc-Deskiz, #042E4C);
    }
    #footer .container {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    #footer .up_part {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 25px;
        flex-direction: column;
    }
    #footer .up_part p {
        color: var(--Main-Colors-Blanc-Deskiz, #FFF);
        font-family: 'Eskool';
        line-height: 105%; /* 42px */
        letter-spacing: -1.2px;
    }
    #footer .up_part .icons {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
    }
    #footer .up_part img {
        height: 24px;
    }
    #footer .separator {
        background: var(--Main-Colors-Blanc-Deskiz, #FFF);
        display: flex;
        min-height: 1px;
        flex-direction: column;
        align-items: flex-start;
    }
    #footer .bottom_part {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    #footer .bottom_part .list_wrapper{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0px;
    }
    #footer .bottom_part .list{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        padding: 0;
    }
    #footer .bottom_part .list h3{
        color: #FFF;
        font-family: 'Alpino-Regular';
        line-height: 24px; /* 133.333% */
        margin-block-end: 0.3em;
    }
    #footer .bottom_part .list li{
        font-family: 'Alpino-Regular';
        color: #FFF;
        text-decoration: none;
        list-style: none;
        cursor: pointer;
        transition: all ease .1s;
    }
    #footer .bottom_part .list li:active{
        color: var(--main-colorsjaune-deskiz, rgba(255, 201, 1, 1));
    }
    #footer .bottom_part img {
        height: 84px;
    }
}

@media (min-width:666px) {
    #footer .bottom_part .list_wrapper{
        flex-direction: row;
        align-items: flex-start;
        gap: 30px;
    }
}

@media (min-width:992px) { /*SD & HD*/
    #footer .up_part {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-direction: row;
    }
    #footer .bottom_part .list_wrapper{
        gap: 50px;
    }
    #footer .bottom_part {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    #footer .bottom_part .list li:hover{
        color: var(--main-colorsjaune-deskiz, rgba(255, 201, 1, 1));
    }
}