:root {
    --mobileMenu-bg : #F3342E;
    --mobileMenu-bg2 : #fff;
    --mobileMenu-color : #F3342E;
}

.site-header {
    background: var(--mobileMenu-bg);
}

nav a ,nav a:visited ,nav a:focus{
    display:var(--link-display);
    text-decoration:var(--link-text-decoration);
    padding:var( --link-padding);
    color:var(--link-color);
    border-radius: var(--link-border-radius);
    border-color:var(--link-border-color);
    border:none;
   font-size: 1.1rem;
 
}

nav a:hover  {
    color:var(--link-color-hover);
    border-radius: var(--link-border-radius);
    border-color:var(--link-border-color-hover);
    border:none;
    cursor:var(--link-cursor-hover);
}

.nav-menu >  li {
    padding:0.25rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    width:150px;
}
.nav-menu >  li a{
    z-index: 1;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.nav-menu >  li:hover a{
   color:var( --mobileMenu-bg);
}

.nav-menu >  li:last-of-type {
   padding:0.25rem 2rem;
}


.nav-menu > li:after {
    content:'';
    width:1px;
    height: 100%;
    background:#fff;
    position: absolute;
    right:0;
    top:0;
}
.nav-menu > li:before {
    content:'';
    width:100%;
    height: 0%;
    background:#fff;
    position: absolute;
    right:0;
    left:0;
    bottom:0;
    top:0;
    margin:auto;
    transition: all ease 0.4s;
    display: block;
    z-index: 0;
}
.nav-menu > li:hover:before {
    content:'';
    width:100%;
    height: 100%;
    background:#fff;
    position: absolute;
    right:0;
    left:0;
    bottom:0;
    top:0;
    margin: auto;
    transition: all ease 0.4s;
    display: block;
    z-index: 0;
}
.nav-menu > li:hover {
    color:var(--mobileMenu-bg);
}



@media screen and (max-width: 782px) {
    html #wpadminbar {
        position: fixed;
    }
}



    .navLogo {
        position: relative;
        min-width: 80px;
        min-height: 80px;
        background-image: url(https://feps-europe.eu/wp-content/themes/fepseuropetheme/img/logo_feps.png);
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        font-size: 0;
        margin:0.5rem;
    }
    .navLogo a{
        font-size: 0;
    }

#site-navigation{
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-content: space-between;
    padding: 0;
    position: relative;
}
#site-navigation > div{
    display: flex;
    align-items: stretch;
    align-content: stretch;
    justify-content: space-between;
}



#site-navigation.toggled{
    position: fixed;
    width:100%;
    min-height:100%;
    align-content: flex-start;
    top:0;
    left:0;
    background:var( --mobileMenu-bg );
    z-index:99;
    padding:80px 0;
}

#site-navigation.toggled  .nav-menu >  li {
    width:80%;
    border:none;
    border-bottom:1px solid white;
    min-height: 50px;
    margin-bottom:0.5rem;
}
#site-navigation.toggled  .nav-menu >  li:after {
    background:transparent;
}


#site-navigation.toggled .main-website-menu{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 350px;
}

#site-navigation.toggled .main-website-menu > ul{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 350px;
}



#site-navigation.toggled .menu-toggle{
    position: absolute;
    top:60px;
    right:1rem;
}

.main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul {
    display:none;
}


 .main-navigation.toggled ul {
    display:none;
}
 .main-navigation.toggled .nav-menu {
    display:block;
     width:80%;
     min-width: 350px;
     margin:auto;
}

 .main-navigation.toggled .nav-menu > li{
    margin: 0;
}


 .main-navigation.toggled  .sub-menu.open {
    display: block;
}


#site-navigation.toggled  .menu-item-has-children{
    position: relative;
}

.main-navigation .sub-menu , .main-navigation .sub-menu a {
    width:100%;
}

.main-navigation ul ul , .main-navigation ul ul ul {
    position: relative;
    left:0rem;
    display:flex;
    top:0;
    box-shadow: none;
}

.main-navigation ul {
    font-size:1.3rem;
}

.main-navigation ul ul a {
    padding:0.25rem 0 0.25rem 1.5rem;
    font-size: 1rem;
}
.main-navigation ul ul ul a {
    padding-left:3rem;
    font-size:0.90rem;
}


.sub-menu.open > ul {
    display:block;
}



.menu-item-has-children .mobileArrow {
    position: absolute;
    right:0;
    width: 40px;
    height: 40px;
    margin:auto;
    bottom:0;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
        transition: all ease 0.5s;
}
.menu-item-has-children .mobileArrow.rotate {
    transform: rotate(90deg);
    transition: all ease 0.5s;
}
.menu-item-has-children .mobileArrow:before {
    content:'';
    position: absolute;
    margin:auto;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid #fff;
    font-size:2rem;
    transition: all ease 0.5s;
}  



.sub-menu.open {
    padding:1rem 0;
}

.nav-menu , .menu  {
    flex-basis: 100%;
    flex-grow: 1;
    display: flex;
}
    


#site-navigation .websiteTitle {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
}



.title {
    font-weight: 900;
    color:white;
    font-size: 1.5rem;
    line-height: 1.6rem;
}
.subTitle {
    font-weight: 100;
    color:white;
    font-size: 1.3rem;
    line-height: 1.6rem;
}


@media screen and (min-width:1000px) {
    
    .nav-menu, .menu {
        flex-basis: 500px;
        justify-content: flex-end;
    }
    
        .menu-item-has-children .mobileArrow {
        display:none;
    }
    .nav-menu .sub-menu ,  .menu .sub-menu {
        position: absolute;
        display: none;
        flex-direction: column;
        top: 100%;
        right:0;
        min-width:250px;
    }   
    
    
    .nav-menu .sub-menu > li:first-of-type , .menu .sub-menu > li:first-of-type{
        margin-top:1rem;
    }    
    .nav-menu .sub-menu > li:last-of-type , .menu .sub-menu > li:last-of-type{
        margin-bottom:1rem;
    }     
    
    
    
    .nav-menu .menu-item-has-children:hover > .sub-menu ,.menu .menu-item-has-children:hover > .sub-menu {
        display: block;
        background-color:var(--mobileMenu-bg );
    }
    .nav-menu .menu-item-has-children:hover > .sub-menu .menu-item-has-children:hover > .sub-menu ,     .menu .menu-item-has-children:hover > .sub-menu .menu-item-has-children:hover > .sub-menu {
        display: block;
        transform: translateX(calc(-100%));
        top:-1rem;
        background-color:var(--mobileMenu-bg2 );
    }
}


@media screen and (max-width:1000px) {
    #site-navigation .websiteTitle {
         flex-basis: calc(100% - 170px);
    }
}