/* Icon 1 */

.animated-icon1, .animated-icon2, .animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon1 span, .animated-icon2 span, .animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}

.animated-icon1 span {
background: none;
}

.animated-icon2 span {
background: #e3f2fd;
}

.animated-icon3 span {
background: #f3e5f5;
}

.animated-icon1 span:nth-child(1) {
top: 0px;
}

.animated-icon1 span:nth-child(2) {
top: 10px;
}

.animated-icon1 span:nth-child(3) {
top: 20px;
}

.animated-icon1.open span:nth-child(1) {
top: 11px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
background:#fff;
}

.animated-icon1.open span:nth-child(2) {
opacity: 0;
left: -60px;
}

.animated-icon1.open span:nth-child(3) {
top: 11px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
    background:#fff;
}

/* Icon 3*/

.animated-icon2 span:nth-child(1) {
top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
top: 10px;
}

.animated-icon2 span:nth-child(4) {
top: 20px;
}

.animated-icon2.open span:nth-child(1) {
top: 11px;
width: 0%;
left: 50%;
}

.animated-icon2.open span:nth-child(2) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
top: 11px;
width: 0%;
left: 50%;
}

/* Icon 4 */

.animated-icon3 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}

.animated-icon3.open span:nth-child(2) {
width: 0%;
opacity: 0;
}

.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}

.navbar{
position: absolute;
background: none;
width: 100%;
padding: 0px;
z-index: 10;
}

.navbar-brand{
background: url(../../img/charte/brand.svg) no-repeat;
width: 250px;
height: 166px;
position: relative;
left: 10%;
    top: 3px;
padding: 0px;
}


.navbar-toggler{
background: url(../../img/charte/menu.svg) no-repeat;
background-size: contain;
    background-position: 0px -50px;
width: 200px;
height: 150px;
padding: 0px;
position: absolute;
    top: 0px;
right: 30px;
}

#main-wrapper .navbar-light .navbar-toggler{
border-color: transparent;
border: 0px;
}


.navbar-brand span{
display:none;
}

.navbar button{
float: right;
right: 0px;
}

#navbarSupportedContent20{
background-color: #2c3e50;
background-image: url(../../img/charte/fond-menu-open.png);
background-repeat: no-repeat;
background-position: top right;
background-size: cover;
position: absolute;
top: 0px;
left: 0px;
height: 500px;
width: 100%;
    z-index: 9;
}

.animated-icon1{
z-index: 10;
position: absolute;
right: 20px;
top: 20px;
}

.navbar-nav{
text-align: center;
padding-top: 150px;
}

ul.navbar-nav li{
list-style-type: none;
}

.navbar-nav strong{
color: #fff;
font-family: 'Montserrat', 'arial', sans-serif;
font-weight: 400;
text-transform: uppercase;
}

.navbar-light .navbar-nav a.nav-link{
color: #ee7304;
font-family: 'Montserrat', 'arial', sans-serif;
font-weight: 400;
}

.navbar-light .navbar-nav a.nav-link:hover{
color: #fff;

}

.navbar-light .navbar-nav #active{
background-color: #ee7304;
}

.navbar-light .navbar-nav #active a.nav-link{
color: #2c3e50;
}

p a {
 color: #ee7304;
}


.language-selector{
    position: relative;
text-align: center;

}

.navbar-nav .language-selector{
margin-bottom: 10px;

}

.flag {
    width: 50px;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}

.flag:hover {
    transform: scale(1.1);
}



@media screen and (max-width: 768px) {


.navbar-brand{
width: 125px;
height: 83px;
left: 3%;
    top: 5px;
background-size: contain;
}


#navbarSupportedContent20{
background-position: top left;
}

.navbar-nav{
text-align: center;
padding-top: 50px;
}

.navbar-toggler .animated-icon1.open{
position: absolute;
right: 20px;
top: 20px;
}

    .navbar-nav .offset-md-2{
    margin-bottom: 20px;
    }

#navbarSupportedContent20{
background-color: #2c3e50;
background-image: none;
    height: inherit;
    padding-bottom: 20px;
}

}