:root {
    --nav-contact-info-height: 45px;
}

/*--DESKTOP NAVIGATION MENU--*/
header{
    background: linear-gradient(to right,  #1d1868 0%,#1d1868 50%,#7dd3f6 51%,#7dd3f6 100%);  /*W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+*/
} 
header:after{
    content: "";
    display: block;
    background-color: var(--primary-color1);
    height: var(--nav-contact-info-height);
    width: 35%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}
header > .container:first-child {
    background: linear-gradient(to right,  #1d1868 0%,#1d1868 50%,#7dd3f6 51%,#7dd3f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
header .container .content{
    background-color: var(--primary-color2);
    display: flex;
    justify-content: space-between;
    align-items: start;
}
header #logo{
    max-width: 245px;
    position: relative;
    z-index: 1;
    transition: all 0.2s ease;
}
header #logo img{
    display: block;
    width: 100%;
    margin-left: -1px;
}

header .inner-header{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

header #nav-menu{
    position: relative;
    z-index: 1;
}
header #nav-menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: right;
}
header #nav-menu ul li{
    display: inline-block;
    align-items: center;
}
header #nav-menu ul li.language{
    padding: 0 .65em;
}
header #nav-menu ul li a{
    text-decoration: none;
    color: var(--primary-color1);
    font-family: "poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    font-size: 14px;
    padding: .50em .65em .35em;
    line-height: 0px;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}
header #nav-menu ul li a.language-btn{
    font-family: "poppins", sans-serif;
    font-size: 12px;
    border-radius: var(--border-radius);
    padding: .25em .65em .10em;
    background-color: white;
    color: var(--primary-color1);
}
header #nav-menu ul li a:hover{
    color: white;
    background-color: var(--primary-color1);
}
header #nav-menu ul li a.language-btn:hover{
    color: var(--secondary-color1);
    background-color: var(--secondary-color2);
}
header #nav-menu ul li a.active{
    color: white;
    background-color: var(--primary-color1);
}

header #nav-contact-info{
    text-align: right;
    position: relative;
    right: 0;
    z-index: 1;
    height: var(--nav-contact-info-height);
    line-height: var(--nav-contact-info-height);
    margin-bottom: 17px;
    width: 450px;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 24% 100%);
    background-color: var(--primary-color1);
    transition: all 0.2s ease;
}
header #nav-contact-info ul{
    list-style-type: none;
    margin: 0;
}
header #nav-contact-info ul li{
    display: inline-block;
    justify-content: space-between;
}
header #nav-contact-info ul li a{
    text-decoration: none;
    color: white;
    font-family: "poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    font-size: 18px;
    padding: .35em .55em;
    transition: var(--transition);
}
header #nav-contact-info ul li a:hover{
    color: var(--secondary-color2);
}
header #nav-contact-info ul li a.nav-phone svg{
    width: 28px;
    vertical-align :middle;
    transition: var(--transition);
}
header #nav-contact-info ul li a.nav-soumission svg{
    width: 23px;
    vertical-align: sub;
    transition: var(--transition);
    margin-right: 4px;
}

/*--MOBILE NAV-CONTACT-INFO MENU--*/
header #mobile-nav-contact-info{
    display: none;
    background-color: var(--secondary-color1);
}
header #mobile-nav-contact-info .container{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
}
header #mobile-nav-contact-info .container > a{
   width: 50%;
   flex: 1;
   padding: 15px 0 12px 0;
   border: 1px solid var(--primary-color1);
}
header #mobile-nav-contact-info a{
    text-decoration: none;
    color: white;
    font-family: "poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    text-transform: uppercase;
    font-size: 18px;
    white-space: nowrap;
    transition: var(--transition);
}
header #mobile-nav-contact-info a:hover{
    color: var(--primary-color2);
    background-color: var(--primary-color1);
}
header #mobile-nav-contact-info a.nav-phone svg{
    width: 26px;
    vertical-align:middle;
    transition: var(--transition);
}
header #mobile-nav-contact-info a.nav-soumission svg{
    width: 22px;
    vertical-align:sub;
    transition: var(--transition);
}

/*--MOBILE NAVIGATION MENU--*/
.logo-nav{
    margin: 0 auto;
    max-width: 175px;
    padding: 1em 0 !important;
    border: 0 !important;
}

#side-bar-menu{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background: rgba(0,0,0,.75);
    -webkit-backdrop-filter: blur(36px);
    backdrop-filter: blur(36px);
    padding-top :75px;
    z-index: 1;
    display: none;
    -webkit-transform: translateY(-750px);
    -moz-transform: translateY(-750px);
    -o-transform: translateY(-750px);
    -ms-transform: translateY(-750px);    
    transform: translateY(-750px);
    -webkit-transition: transform 250ms ease-in-out;
    -moz-transition: transform 250ms ease-in-out;
    -ms-transition: transform 250ms ease-in-out;
    -o-transition: transform 250ms ease-in-out;    
    transition: transform 250ms ease-in-out;
}
#side-bar-menu ul{
    list-style-type: none;
    display: block;
    padding: 5px 25px 0px 25px;
    text-align: center;
}
#side-bar-menu ul li{
    border-bottom: solid 1px #454545;
}
#side-bar-menu ul li:last-child{
    border-bottom: 0;
}
#side-bar-menu ul li a{
    color: #FFFFFF;
    text-decoration:none;  
    text-transform: uppercase;
    font-size: 16px;
    padding: 20px;
    display: block;
}
/* #side-bar-menu ul li a.active{
    color: white;
    background-color: var(--primary-color1);
    border-radius: var(--border-radius);
} */
#side-bar-menu ul li a.language-btn{
    border-radius: var(--border-radius);
    padding: .25em .65em .10em;
    margin: 1.5em 0 1em;
    background-color: white;
    color: var(--primary-color1);
    display: inline-block;
    font-weight: 700;
}
#side-bar-menu ul li a.language-btn:hover{
    background-color: var(--primary-color1);
    color: white;
}
#side-bar-menu ul li a:hover{
    background: rgba(0,0,0,.35);
}

#side-bar-menu ul li.logo-nav a{
    padding: 0;
}
#side-bar-menu ul li.logo-nav a:hover{
    background: none;
}

input[type="checkbox"]:checked ~ #side-bar-menu {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);    
    transform: translateY(0);
}

input[type=checkbox] {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;    
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    display: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    width: 75px;
    float: right;
    border-radius: 6px;
    position: relative;
    z-index: 2;
    padding: 0 .65em;
}

.spinner {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 5px;
    width: 100%;
    background: var(--primary-color1);
    -webkit-backdrop-filter: blur(36px);
    backdrop-filter: blur(36px);
    border-radius: .5em;
}
.horizontal {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);    
    transform: rotate(135deg);
    margin-top: 8px;
    background-color: white;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;      
    transition: all 0.3s;
    box-sizing: border-box;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);    
    transform: rotate(-135deg);
    margin-top: -12px;
    background-color: white;
}



/*--FOOTER--*/
footer{
    background-color: var(--secondary-color1);
    color: white;
    padding: 30px 0;
    font-size: .85em;
    clear: both;
}
footer .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .container div{
    flex: 1;
}
footer .container div:first-child img{
    max-width: 175px;
    margin-bottom: 5px;
}
footer .container div:first-child p{
    /* font-size: .85em; */
    color: var(--primary-color2);
    white-space: nowrap;
}
footer .container div:nth-of-type(2) p:nth-of-type(1){
    margin-bottom: 5px;
}
footer .container div:nth-of-type(2){
    flex: 3;
    text-align: center;
}
footer .container div:nth-of-type(2) h4{
    color: var(--primary-color2);
    font-size: 1.25em;
    margin-bottom: 5px;
}
footer .container div:nth-of-type(2) a{
    text-decoration: none;
    color: var(--primary-color2);
}
footer .container div:nth-of-type(3){
    display: flex;
    justify-content: end;
}
footer .container div:nth-of-type(3) ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* font-size: .9em; */
}
footer .container div:nth-of-type(3) ul li a{
    text-decoration: none;
    color: white;
    transition: color 0.2s ease;
}
footer .container div:nth-of-type(3) ul li a:hover{
    text-decoration: none;
    color: var(--primary-color2);
}
footer p.copyright{
    font-size: .65em;
    color: rgba(255,255,255,.75) !important;
}

/*--MEDIA QUERY--*/
@media only screen and (max-width: 2000px) {
    header:after {
        width: 30%;
}   
}
@media only screen and (max-width: 1070px) {
    header #logo{
        max-width: 200px;
    }  
    header #nav-contact-info {
        width: 400px;
    }       
    header #nav-contact-info ul li a {
        font-size: 16px;
        padding: .25em .45em;
    }      
    header #nav-contact-info{
        margin-bottom: 10px;
    }      
    header #nav-menu ul li a{
        font-size: 12px;
    }
    header #nav-contact-info ul li a.nav-phone svg {
        width: 25px;
    }    
    header #nav-contact-info ul li a.nav-soumission svg {
        width: 20px;
    }
    header #nav-menu ul li a.language-btn{
        font-size: 10px;
    }    
}
@media only screen and (max-width: 970px) {
    .sidebarIconToggle{
        display: block;
    }   
    #nav-menu{
        display: none;
    }
    #side-bar-menu{
        display: block;
    }      
}
@media only screen and (max-width: 780px) {
    header .container .content{
        align-items: center;
    }    
    header #nav-contact-info{
        display: none;
    }  
    header #mobile-nav-contact-info{
        display: block;
    }     
    header:after{
        display: none;
    } 
}
@media only screen and (max-width: 700px) {
    footer .container{
        /* display: block; */
        flex-direction: column-reverse;
        text-align: center;
    }
    footer .container div:nth-of-type(3){
        display: none;
    }
    footer .container div:first-child{
        margin-top: 1.5em;
    }
}
@media only screen and (max-width: 380px) {
    header #mobile-nav-contact-info a{
        font-size: 14px;
    }
}