header {
    background-image: url(../pictures/background.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 40vh;
    /* =100% de la hauteur de ton ecran */
    color: #fff;
    max-width: 100vw;
}


/* -----------------------------------------------------------------------
Partie droite
----------------------------------------------------------------------- */
.header__right {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-around;
}

/* -----------------------------------------------------------------------
    Nav
----------------------------------------------------------------------- */
nav {
    background-color: #262626;
}

.navbar-light .navbar-nav .nav-link {
    font-weight: 200;
    color: white;
    letter-spacing: 2px;
}

.navbar-nav {
    justify-content: flex-end !important;
    width: 100%;
    margin: 1em;
}

.nav-item i {
    margin: 0 5px;
}


.logo {
    width: 150px;
}

.nav-item {
    margin: 0.5em;
}

.navbar-toggler {
    border: solid 1px white !important;
    padding: 0.5em;
}

.nav-social {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 2em 0 1em 0;
}
.nav-connect{
    min-width: 150px;
}
.wrapper-menu {
    width: 20px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 330ms ease-out;
}

.wrapper-menu.open {
    transform: rotate(-45deg);

}

.line-menu {
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
    height: 2px;
}

.line-menu.half {
    width: 50%;
}

.line-menu.start {
    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
    transform-origin: right;

}

.open .line-menu.start {
    transform: rotate(-90deg) translateX(3px);
}

.line-menu.end {
    align-self: flex-end;
    transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
    transform-origin: left;
}

.open .line-menu.end {
    transform: rotate(-90deg) translateX(-3px);
}

@media (orientation: landscape) and (max-width: 992px) {

    .top-landscape .navbar-nav {
        margin: 0 !important;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .top-landscape .logo {
        margin-top: 0.5em;
    }

    .top-landscape {
        margin-top: 0em;
    }
    .nav-social{
        margin: 0.5em 0;
    }
    .nav-item {
        width: 40%;
    }
}


@media (min-width: 992px) {
    nav {
        background-color: #262626;
    }
    .logo{
        width: 220px;
        margin: 0.5em;
    }
    .navbar-nav{
        margin-right:0 ;
    }
    .nav-item.big a{
        width: 108px;
        padding-left: 0;
        padding-right: 0;
    }
    .navbar-nav li:after {
        content: '';
        display: block;
        margin: 0 auto;
        height: 2px;
        width: 0%;
        background: transparent;
        transition: width 0.5s ease,
                    background-color 0.5s ease;
    }
    .navbar-nav li:hover:after {
        width: 50%;
        background:  #eb9001;
    }
            
    .navbar-nav li:active:after{
        width: 50%;
        background:  #f29400;
    }

    .nav-link{
        color: white;
        transition:	color 0.5s linear;
    }

    .nav-link:hover {
        color: #eb9001 !important;
    }
    .nav-item i {
        display: none;
    }

    .navbar-nav {
        justify-content: flex-end !important;
    }
    .nav-social {
        display: none;
    }
    .nav-connect{
        display: flex;
        justify-content: flex-end;
        min-width: 300px !important;
    }
    .nav-connect .button-styled{
        margin:5px;
    }
}

/* -----------------------------------------------------------------------
header content
----------------------------------------------------------------------- */
.header__content {
    background-color: #26262671;
    height: 100%;
    min-height: 30vh;
    display: flex;
}

.header__content__secondary__link {
    background-color: #262626;
    width: 70px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em;
}

.header__content__secondary__link ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.header__content__social-menu .social-link{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header__content__social-menu .separation::after{
    content:"";
    height: 40px;
    background-color: rgb(255, 255, 255);
    width: 2px;
    margin: 1.5em 0;
}
@media (orientation: landscape) {

    .client {
        width: 45%;
    }
}

@media (min-width: 600px) {
    .client {
        display: flex;
        align-items: flex-start;
    }

    .header__left {
        height: 100vh;
        width: 200px;
    }
}
@media (min-width: 992px) {
    .header__content__secondary__link{
        display: flex;
    }
}