::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-thumb{
    border-radius: 20px;
    background: gray;
}
::-webkit-scrollbar-thumb:hover{
    background: rgb(63, 63, 63);
}
::-webkit-scrollbar-track{
    background: white;
}
header{
    width: 100%;
    background-color: black;
}
#logo, #menu{
    margin-top: 0.3%;
}
header a{
    text-decoration: none;
}
#logo{
    margin-left: 3%;
    margin-right: 6%;
    font-size: 5em;
    float: left;
    background-image: url("../images/menu/laleakat.png");
}
header #menu{
    float: left;
    text-align: center;
}
header #menu a.menu, .sandwich, #portfolio_sandwich{
    float: right;
    margin-left: 0.4%;
    display: inline;
    text-decoration: none;
    position: relative;
    z-index: 100;
    cursor: pointer;
}
a.sandwich{
    height: 2.5vw;
}
#portfolio_sandwich{
    overflow: hidden;
    background-color: black;
}
.sandwich{
    width: 100%;
}
a.sandwich{
    text-transform: capitalize;
    font-weight: bold;
    text-decoration: none;
    margin-top: 1vw;
    opacity: 0.6;
}
a.sandwich:link {
color: white;
}
a.sandwich:visited {
color: white;
}
a.sandwich:hover {
color: white;
opacity: 0.8;
}
a.sandwich:active {
color: white;
}
#logo, .menu, #portfolio_sandwich, .sandwich{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
#menu_temoignage{
    background-image: url("../images/menu/temoignage.png");
}
#menu_portfolio{
    background-image: url("../images/menu/portfolio.png");
}
#menu_propos{
    background-image: url("../images/menu/propos.png");
}
#menu_contact{
    background-image: url("../images/menu/contact.png");
}
.menu{
    opacity: 1;
}
.menu:hover{
    opacity: 0.8;
}
#icon_sandwich{
    height: 9vw;
    width: 9vw;

    position: absolute;
    right: 5vw;
    top: 2vw;
    background-image: url("../images/autres/sandopen.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    z-index: 100;
}
@media (min-width:0px) and (max-width:1025px)  { /* smartphone et tablette petit format */
    header{
        height: 15vw;
    }
    #logo{
        width: 33%;
        height: 90%;
    }
    #menu{
        display: none;
        background-color: black;
        height: auto;
        width: 100%;
    }
    header #menu a.menu, .sandwich, #portfolio_sandwich{
        float: left;
    }
    #icon_sandwich{
        display: block;
    }
    header #menu a.menu, #portfolio_sandwich{
        width: 100%;
    }
    header #menu a.menu, div.sandwich, #portfolio_sandwich{
        height: 10vw;
    }
    a.sandwich{
        font-size: 2em;
    }

}
@media (min-width:1025px)  { /* autres */
    header{
        height: 6vw;
    }
    #logo{
        width: 15%;
        height: 90%;
    }
    #menu{
        display: block;
        height: 90%;
        width: 70%;
    }
    header #menu a.menu, .sandwich, #portfolio_sandwich{
        float: right;
    }
    #icon_sandwich{
        display: none;
    }
    header #menu a.menu, #portfolio_sandwich{
        width: 16%;
    }
    header #menu a.menu, div.sandwich, #portfolio_sandwich{
        height: 5.5vw;
    }
    a.sandwich{
        font-size: 1em;
    }

}
.sandwich {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.sandwich.mariage{
    background-image: url("../images/menu/mariage.png");
}
.sandwich.famille{
    background-image: url("../images/menu/famille.png");
}
.sandwich.portrait{
    background-image: url("../images/menu/portrait.png");
}
.sandwich.soeurs{
    background-image: url("../images/menu/soeurs.png");
}
.sandwich.errance{
    background-image: url("../images/menu/errance.png");
}
.sandwich.pluie{
    background-image: url("../images/menu/pluie.png");
}