@keyframes recrutement {
    from {top: 50%; opacity: 0; pointer-events: none; background: transparent;}
    to {top: 100%; opacity: 1; pointer-events: all; background: rgba(0,0,0,.8);}
}

.menu-recrutement .lien-recrutement {
	color: #faa819 !important;
}

.menu-recrutement .lien-recrutement:hover {
	color: #e00034 !important;
}

.menu-recrutement.active .lien-recrutement {
	color: white !important;
}

.menu-recrutement {
	position: relative;
}

.menu-recrutement a.lien-offre-emploi {
    content: 'Ingénieur Commercial (H/F)';
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
	opacity: 0;
    top: 50%;
    left: -70%;
    width: 250%;
    height: 100%;
    background: rgba(0,0,0,.8);
    font-size: .8em;
    text-align: center;
	color: white !important;

	-webkit-border-bottom-right-radius: 10px !important;
	-webkit-border-bottom-left-radius: 10px !important;
	-moz-border-radius-bottomright: 10px !important;
	-moz-border-radius-bottomleft: 10px !important;
	border-bottom-right-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
}

.navbar-shrink .menu-recrutement a.lien-offre-emploi {
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	animation-name: recrutement;
    animation-duration: 1s;
}

.logo-xplanet {
    width: 90%;
}

.logo-ard {
    width: 70%;
}

.navbar-default.navbar-shrink .navbar-brand {
    padding: 10px;
}

@media (min-width:768px) {
    .logo-xplanet {
        width: 70%;
    }

    .logo-ard {
        width: 40%;
    }

    .navbar-default.navbar-shrink .navbar-brand {
        padding: 0px;
    }
}