.menu {
    display: flex;
   /* justify-content: flex-end;*/

}


.menu a {
    display: flex;
    justify-content: center;
}


/* hambuger */

.navbar-toggle {
    cursor: pointer;
    color: #fff;
    font-size: 2em;
    position: absolute;
    top: 0.2em;
    margin-left: 2vh;
   
    z-index: 200;

}



/* tablette */


@media screen and (min-width:768px) and (max-width:980px) {
    .menu {
        justify-content: space-between;
    }
}


/* tel */


@media screen and (min-width:320px) and (max-width:767px) {
    .navbar-toggle {
        display: block;
    }

    .menu {
        display: none;

    }

    .navbar {
        display: block;
        position: relative;
    }
}







/* js
 */


 .active {
    display: flex;
    flex-direction: column;
}







/* icon animer hamburger */

.bar1,
.bar2,
.bar3 {
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
    transition: 1s;

}

.change .bar1 {
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: rotate(45deg) translate(-8px, -8px);
}