@-webkit-keyframes fadeIn {
    96%, 100% { opacity: 1; }
}

@keyframes fadeIn {
    96%, 100% { opacity: 1; }
} 

@-moz-keyframes fadeIn {
    96%, 100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    96%, 100% { opacity: 1; }
}

@-webkit-keyframes widthRight {
    from {
        width: 0%;
        display: none;
    } to {
        width: 50%;
        display: flex;
    }
}

@keyframes widthRight {
    from {
        width: 0%;
        display: none;
    } to {
        width: 50%;
        display: flex;
    }
}

@-moz-keyframes widthRight {
    from {
        width: 0%;
        display: none;
    } to {
        width: 50%;
        display: flex;
    }
}

@-o-keyframes widthRight {
    from {
        width: 0%;
        display: none;
    } to {
        width: 50%;
        display: flex;
    }
}

@-webkit-keyframes widthRight2 {
    from {
        width: 0%;
        display: none;
    } to {
        width: 25%;
        display: flex;
    }
}

@keyframes widthRight2 {
    from {
        width: 0%;
        display: none;
    } to {
        width: 25%;
        display: flex;
    }
}

@-moz-keyframes widthRight2 {
    from {
        width: 0%;
        display: none;
    } to {
        width: 25%;
        display: flex;
    }
}

@-o-keyframes widthRight2 {
    from {
        width: 0%;
        display: none;
    } to {
        width: 25%;
        display: flex;
    }
}
.mobile-title {
    display: none;
}
.toggler {
    opacity: 0;
    cursor: none;
}
.hamburguer-wrap {display: none;}
header .hamburguer-menu { display: none; }

header nav {
    position: static;
}

header nav a {
    display: block;
}

header nav a,
header nav .menu-btn {
    color: black;
    padding: 10px 10px;
}

header nav > ul {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
} 

header nav > ul > li {
    list-style: none;
} 

header nav > ul > li:hover {
    cursor: pointer;
}

header nav > ul > li .menu-link {
    position: relative;
} 

header nav > ul > li .menu-link:before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    top: 23px;
    left: 0;
    background-color: rgb(38, 95, 170);
    visibility: hidden;
    transition: all 0.3s ease-in-out;
} 

header nav > ul > li:hover .menu-link:before {
    visibility: visible;
    width: 100%;
}  

header nav > ul > li > ul {
    position: absolute;
    width: 98.9vw;
    height: 0px;
    top: 62.4px;
    left: 0; /* 50% */
    /*transform: translateX(-50%);*/
    background: white;
    z-index: 10;
    transition: height .5s;
} 

header nav > ul > li > ul > li > ul {
    position: absolute;
    top: 0px;
    left: 25%;
    width: 50%;
    flex-direction: column;
    height: 100%;
    flex-wrap: wrap;
    align-items: flex-start;
    display: none;
} 

header nav > ul > li > ul > li > ul:first-of-type {
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    z-index: 2;
    background: white;
} 

header nav > ul > li > ul > li > ul:last-of-type {
    left: 75%;
    width: 25%;
    flex-direction: column;
    align-items: center;
    background: white;
    z-index: 1;
} 

header nav > ul > li > ul > li > ul:last-of-type li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0px;
} 

header nav > ul > li > ul > li > ul > li {
    display: block;
    font-size: 0.9em;
} 

.last-link {
    position: absolute;
    bottom: 0;
    right: 0; /**/
    font-size: 0.8em;
    color: rgb(38, 95, 170);
} 

header nav > ul > li > ul > li > ul > .fade-link-p > a,
header nav > ul > li > ul > li > ul > .fade-link > a { opacity: 0; } 

header nav > ul > li > ul > li > ul:last-of-type li img { width: 180px; } 

header nav > ul > li > ul > li > ul > .fade-link-2-p > img,
header nav > ul > li > ul > li > ul > .fade-link-2 > img { opacity: 0; }

header nav > ul > li > ul > li > ul > .fade-link-2-p > p,
header nav > ul > li > ul > li > ul > .fade-link-2 > p { opacity: 0; }

@media only screen and (min-width: 948px) {
    header nav > ul > li:hover > ul { 
        border-top: 1px solid rgb(236, 236, 236);
        border-bottom: 3px solid rgb(68, 70, 72);
        height: 60vh; /* 405px */ 
    } 

    header nav > ul > li > ul > li {
        padding: 10px 20px;
        z-index: 2;
        width: 25%;
        display: none;
        border-top:1px solid rgba(236,233,230,0);
        border-bottom:1px solid rgba(236,233,230,0);
    } 

	header nav > ul > li > ul > li span { opacity: 0; } 

    header nav > ul > li > ul > li:hover { 
        background-image: linear-gradient( 109.6deg, rgba(223,234,247,1) 11.2%, rgba(244,248,252,1) 91.1% ); /**/
        border-top-color: rgba(244,248,252,1);
        border-bottom-color: rgba(244,248,252,1);
    }  

    header nav > ul > li:hover > ul > li {
		opacity: 1; 
        display: block; 
    } 

    header nav > ul > li:hover > ul > li span {
        animation: fadeIn 0.5s linear;
        -webkit-animation: fadeIn 0.5s linear;
		-moz-animation: fadeIn 0.5s linear;
		-o-animation: fadeIn 0.5s linear;
        animation-delay: .5s;
        -webkit-animation-delay: .5s;
		-moz-animation-delay: 0.5s;
		-o-animation-delay: 0.5s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
    }
	
	header nav > ul > li > ul:hover .title-reference { opacity: 1; }

    header nav > ul > li:hover > ul > .mobile-title { display: none;}

    header nav > ul > li> ul > .active:hover  ul:first-of-type { 
        animation: widthRight 0.5s; 
        -webkit-animation: widthRight 0.5s;
		-moz-animation: widthRight 0.5s;
		-o-animation: widthRight 0.5s;
    
    } 

    header nav > ul > li> ul > .active:hover  ul:last-of-type { 
        animation: widthRight2 0.5s; 
        -webkit-animation: widthRight2 0.5s;
		-moz-animation: widthRight2 0.5s;
		-o-animation: widthRight2 0.5s;
    } 

    header nav > ul > li> ul > .active:hover > ul .fade-link-p > a,
    header nav > ul > li> ul > .active:hover > ul .fade-link > a {
        animation: fadeIn 0.5s;
        -webkit-animation: fadeIn 0.5s;
		-moz-animation: fadeIn 0.5s;
		-o-animation: fadeIn 0.5s;
        animation-delay: 0.5s;
        -webkit-animation-delay: .5s;
		-moz-animation-delay: 0.5s;
		-o-animation-delay: 0.5s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
    } /**/

    header nav > ul > li > ul > .active:hover > ul > .fade-link-2-p img,
    header nav > ul > li > ul > .active:hover > ul > .fade-link-2 img { 
        animation: fadeIn 0.5s;
        -webkit-animation: fadeIn 0.5s;
		-moz-animation: fadeIn 0.5s;
		-o-animation: fadeIn 0.5s;
        animation-delay: 0.5s;
		-moz-animation-delay: 0.5s;
		-o-animation-delay: 0.5s;
        -webkit-animation-delay: .5s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
    } 

    header nav > ul > li > ul > .active:hover > ul > .fade-link-2-p p,
    header nav > ul > li > ul > .active:hover > ul > .fade-link-2 p {
        animation: fadeIn 0.5s;
        -webkit-animation: fadeIn 0.5s;
		-moz-animation: fadeIn 0.5s;
		-o-animation: fadeIn 0.5s;
        animation-delay: 0.5s;
        -webkit-animation-delay: .5s;
		-moz-animation-delay: 0.5s;
		-o-animation-delay: 0.5s;
        animation-fill-mode: forwards;
        -webkit-animation-fill-mode: forwards;
		-moz-animation-fill-mode: forwards;
		-o-animation-fill-mode: forwards;
    } 

    .last-link:hover {
        background-color: transparent;
        /*color: rgb(80, 80, 185);*/
    } 
    
    header nav > ul > li > ul > li:hover ul {
        width: 50%;
        display: flex;
        opacity: 1;
    }
    
    header nav > ul > li > ul > li:hover ul:last-of-type { width: 25%; } 
    
    header nav > ul > li > ul > li:hover ul li:not(.fade-link-2):not(.fade-link-2-p) p { opacity: 1; }
    
    header nav > ul > li > ul > li:hover ul li:not(.fade-link-2):not(.fade-link-2-p) img { opacity: 1; }
    
header nav > ul > li > ul > li:hover ul:first-of-type li:hover a { color: #999; }
}