header {
   position: relative; z-index: 35;
   @include media("<=sm") {
       border-bottom: 1px solid $color-primary;
   }
}
header > .container {
    @include media("<=md") {
        width: auto;
    }
}


/*** Nav top ***/

.navtop {
    background-color: #fff; text-align: right; position: absolute; top: 0; right: 15px;
    @include media("<=md") { display: none; }
}

.navtop a {
    display: inline-block;  color: $color-standard-text; font-size: 14px; line-height: 18px; padding: 5px 12px 5px 12px; position: relative;
    @include media("<=lg") {
        padding: 10px 15px 6px 15px;
    }
    &:first-child {
        padding-right: 0;
        &::after {
            content: ""; border-right: 1px solid #333; padding-left: 12px; 
        }
    }
}
.navtop a:focus, .navtop a:hover {
    text-decoration: none; background-color: transparent; color: $color-standard-text;
}

.navtop .switch-langue-container {
    display: inline; padding-left: 10px;
    a {
        display: inline-block; padding: 12px 10px; background-color: $color-primary; color: #fff; font-family: Arial, sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
        &:hover {
            background-color: $color-medium-grey;
        }
        &:first-child::after {
            display: none; 
        }
    }
    html[lang="fr"] & a:last-child {
        background-color: $color-medium-grey;
    }
    html[lang="en"] & a:first-child {
        background-color: $color-medium-grey;
    }
}


.logos-container {
    padding: 15px 0;
    img {
        @include media("<=sm") {
            width: 260px; height: auto; margin-left: 15px;
        }
        @include media("<=xs-large") {
            width: 200px; height: auto;
        }
    }
}
.logo-recrutement {
    display: inline-block;  
}
.logo-immigration {
    display: none;
}
body[data-section-id="immigration"] {
    .logo-immigration {
        display: block;
    }
    .logo-recrutement {
        display: none;
    }
}




.navbar {
    margin: 0; box-shadow: none; border-radius: 0; border: 0;
    @include media("<=sm") { background: none; box-shadow: none; }
}

.navbar-nav {
    border: 0 !important; margin: 80px 0 0 0;
    @include media("<=md-large") { margin-left: 0; }
    @include media("<=sm") { margin-bottom: 22px; }
    .is-cms & {
        visibility: hidden;
    }
}


.navbar-nav > li > a, .navbar-nav > li > a:visited {
    color: #000 !important; font-size: 16px; line-height: 20px; font-weight: 700; padding: 18px; position: relative; z-index: 1001; text-transform: uppercase; transition: all 500ms ease-out;
    @include media(">=md") {
        &::after {
            content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background-color: #ccc; opacity: 0; transform: scale(1.5) translateX(30%); transition: all 0ms ease-out;
        }
    }
    @include media("<=lg") {
        padding: 15px; font-size: 14px; line-height: 18px;
    }
    @include media("<=md") {
        padding-top: 17px; padding-bottom: 15px; display: block; width: 100%; text-align: left; white-space: normal; color: #FFF !important;
    }
}
.nav > li > a:focus, .nav > li > a:hover, .nav > li > a:visited:hover {
    text-decoration: none; background-color: transparent !important; color: #000 !important;
    @include media(">=md") {
        &::after {
            opacity: 1; transform: scale(1); transition: all 500ms ease-out;
        }
    }
    @include media("<=md") {
        color: #fff !important; text-decoration: underline;
    }
}
.nav .open > a, .nav .open > a:visited, .nav .open > a:focus, .nav .open > a:hover, .nav .open > a:visited:hover,
body[data-section-id="accueil"] .navbar-nav > li:nth-child(1) > a,
body[data-section-id="a-propos"] .navbar-nav > li > a[href*="/a-propos/"],
body[data-section-id="recrutement"] .navbar-nav > li > a[href*="/recrutement/"],
body[data-section-id="immigration"] .navbar-nav > li > a[href*="/immigration/"],
body[data-section-id="pourquoi-philippines"] .navbar-nav > li > a[href*="/pourquoi-philippines/"],
body[data-section-id="faq"] .navbar-nav > li > a[href*="/faq/"],
body[data-section-id="contact"] .navbar-nav > li > a[href*="/contact/"]
{
    @include media(">=md") {
        &::after {
            opacity: 1; transform: scale(1);
        }
    }
}
@include media(">=md") {
    .nav .dropdown.open > a, .nav .dropdown.open > a:focus, .nav .dropdown.open > a:hover {
        &::before {
            content: ""; width: 100%; height: 9px; position: absolute; bottom: 5px; left: 0; /*background: url(/images/assets/triangle-blanc-bas.png) no-repeat bottom center;*/
        }
    }
}



.dropdown-menu-container {
    position: relative; /*overflow: hidden; height: 200px;*/ 
}
.dropdown-menu {
    background-color: #fff; border: 0; border-radius: 0; padding: 0 0 10px 0; margin-top: 0px; margin-left: 20px; /*position: relative;*/ box-shadow: none; transition: all 2500ms ease-out; 
    top: 0; left: 0 !important; right: auto !important; border-top: 1px solid $color-dark-grey;
    
    @include media("<=md") {
        float: none; position: relative; width: auto; background-color: transparent; position: static; border: 0; box-shadow: none; margin-top: -10px !important; margin-left: 0;
    }
    
    li {
        @include media("<=sm") {
            padding: 0 0 0 15px;
        }
        & > a {
            color: $color-dark-grey !important; white-space: nowrap; font-size: 15px; line-height: 19px; padding: 20px 0px 0px 0px; position: relative;
            @include media(">=md") { 
                &::after {
                    content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; border-bottom: 1px solid $color-medium-grey; transition: all 300ms ease-out; transform-origin: left top; transform: scaleX(0);
                }
            }
            @include media("<=md") { 
                color: #fff !important; padding: 5px 15px 5px 5px; 
                &::before { content: "•"; font-family: Arial, sans-serif; color: #fff; display: block; position: relative; max-width: 0; max-height: 0; float: left; margin-left: -20px; font-size: 25px; line-height: 25px; }
            }
            &:hover {
                background-color: transparent; text-decoration: none;
                @include media(">=md") { 
                    &::after {
                         transform: scaleX(1); 
                    }
                }
            }
        }
        &.active a {
            background-color: transparent !important;
        }
    }
}

.open .dropdown-menu {
    animation-name: dropdownmenu2; animation-duration: 500ms; animation-fill-mode: forwards; display: block;
}

/** Dropdown menu animate on open */
@include media(">=md") { 
    header .open .dropdown-menu-container {
        animation-name: dropdown-menu-container; animation-duration: 500ms; animation-fill-mode: forwards;
    }
}
/* hack IE */
@media screen and (-ms-high-contrast:active),
 (-ms-high-contrast:none) {
     header .open .dropdown-menu { opacity: 1; animation-name: none; }
}
@media screen and (-ms-high-contrast:active),
 (-ms-high-contrast:none) {
     header .open .dropdown-menu::after { opacity: 1; animation-name: none; }
}
@media screen and (-ms-high-contrast:active),
 (-ms-high-contrast:none) {
     header .open .dropdown-menu ul { opacity: 1; animation-name: none; } 
}

@keyframes dropdown-menu-container {
    0% {
        /*box-shadow: 0 0 0 0 rgba($color-medium-grey, .55);*/ /*transform: translateY(-100%);  transform-origin: center top;*/ height: 0;
    }
    100% {
        /*box-shadow: 0 10px 0 8px rgba($color-medium-grey, .35);*/ height: 150px;
    }
}
@keyframes dropdownmenu2 {
    0% {
        opacity: 0 !important;
    }
    100% {
        opacity: 1 !important;
    }
}


/* Pour faire apparaitre button collapse a 992px */

.navbar-toggle {
    @include media("<=md") {
        background-color: $color-primary; margin-top: 14px; padding: 15px; display: block; display: block; position: absolute; z-index: 100; right: 15px; top: 25px;
    }
    @include media("<=sm") {
        margin-top: 8px; 
    }
    @include media("<=xs-large") {
        top: 18px; padding: 12px; right: 0px;
    }
    .icon-bar {
        background-color: #fff; width: 30px; height: 5px;
        @include media("<=xs-large") {
            width: 27px; height: 5px;
        }
    }
}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: $color-primary;
}
.navbar-collapse {
    padding: 0; boz-shadow: 0; border-top: 0; border-top: 0px solid transparent; box-shadow: 0;
}
.navbar-collapse.collapse.in, .navbar-collapse.collapsing {
    display: block !important; float: none; padding: 15px 20px 15px 25px; position: absolute; top: 58px; right: -10px; z-index: 2000; color: #fff; text-align: center; width: 50%;
    background-color: $color-primary; padding: 15px 0; margin: 0 -16px -1px -16px; box-shadow: 0px 4px 4px rgba(0,0,0,0.5);
    @include media("<=sm") { top: 100px; left: 0px; width: 100%; right: 0; margin-left: 0; overflow: inherit; }
}

@include media("<=md") {
    .navbar-header {
        float: none;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav {
        float: none!important; margin: 0;
    }
    .navbar-nav > li {
        float: none;
    }
}

/* //Pour faire apparaitre button collapse a 992px */