/* BOUTON BURGER */

.boutonBurger {
    position: fixed;
    top: 20px;
    right: 20px;
    /* border: 1px solid #000; */
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 25;    transition-duration: 0.5s;
}

.boutonBurger:hover {width: 50px;}

.span1 {
    position: absolute;
    top: 8px;
    width: 100%;
    height: 4px;
    background-color: #c0c0c0;
    transition-duration: 0.5s;
}

/*.span1:hover {width: 50%;}*/

.span1Open {
    transform: rotate(-45deg);
    top: 16px;
}
.span2 {
    position: absolute;
    top: 18px;
    width: 100%;
    height: 4px;
    background-color: #c0c0c0;
    transition-duration: 0.5s;
}
.span2Open {
    display: none;
}
.span3 {
    position: absolute;
    top: 28px;
    width: 100%;
    height: 4px;
    background-color: #c0c0c0;
    transition-duration: 0.5s;
}

/*.span3:hover {width: 50%;}*/

.span3Open {
    transform: rotate(45deg);
    top: 16px;
}

/* MENU BURGER */

.menuBurger {
    position: fixed;
    top: 0;
    right: -130vw;
    width: 450px; /*30vw;*/
    height: 100vh;
    background-color: rgba(230, 230, 230, 0.9);
    /* background-image: url('../images/');*/

    /*background: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, rgba(200, 200, 200, 0.9) 10%, rgba(250, 250, 250, 1) 100%);*/
    border-radius: 0px;
    transition-duration: 0.9s;
    z-index: 20;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*background-color: rgba(250, 0, 0, 0.9);*/
    font-family: 'Josefin Sans', sans-serif; text-align: right; padding-right: 0px;
    font-weight: 200;
    font-size: 1em;
    line-height: 2em ;
}

.menuBurgerOpen {
    right: 0;
}

.menuBurger>a {
    color: #777;
    /*opacity: 0.2;*/
    margin: 20px 0 20px 0;
    /*text-decoration: none;*/
    transition: color 0.6s ease-in-out;
    font-size: 3em;
    
}

.menu:hover {
  /*opacity: 1;*/
  color: #fff;
}

.socialBurger {
    width: 100%;
    padding: 20px;
    position: absolute;
    bottom: 0;
   /* text-align: center;*/
display: flex;
align-items: center;
justify-content: center;
    background: rgba(0, 0, 0, 0.0);}

/* TABLETTE & DESKTOP */
@media (max-width: 768px) {

.menuBurger {
    width: 380px;
    font-size: 1.2em;

}