/* 
/////////////////////////////////////////
// Copyright © 2022 | FFKA-Navigation.js
// License: Commercial
// Author: D.Hristov - 54ka
// Company: eLando 
/////////////////////////////////////////
*/

.navWrap {
    height: 41px;
}

.navWrap.active {
    height: unset;
}

.navWrap div {
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 15px;

    cursor: pointer;
}

.navWrap a {
    color: #63aee9;
    text-decoration: none;
}

.navWrap div:hover,
.navWrap a:hover {
    color: #fff;
}

/*  */
.navWrap>div:nth-child(1) {
    color: #b5cbe7;
    background: #2961a9;
    padding-left: 25px;
    padding-right: 35px;
}

.navWrap>div:nth-child(1):hover {
    color: #fff;
}


.navWrap>div:nth-child(1)::before,
.navWrap>div:nth-child(1)::after {
    content: none;
}

.navWrap.active>div:nth-child(1) {
    color: #fff;
}

.navWrap>div:nth-child(1)::after,
.navWrap.active>div:nth-child(1)::after {
    content: '';
    position: absolute;

    top: 13px;
    left: unset;
    right: 15px;
    width: 15px;
    height: 15px;

    border-radius: unset;
    box-shadow: unset;
    background: unset;

    opacity: 0.7;
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 472 472' style='enable-background:new 0 0 472 472;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cpath class='st0' d='M236,326.5l9.2-7.7l180-151.5l-18.4-21.8L236,289.4L65.2,145.5l-18.4,21.8l180,151.5L236,326.5z'/%3E%3C/svg%3E%0A");
}

.navWrap.active>div:nth-child(1)::after {
    transform: rotate(180deg);
    opacity: 1;
}

/*  */

.navWrap>div {
    position: relative;
    padding-left: 57px;
    color: #8ebfe6;
    background: linear-gradient(90deg, rgba(14, 86, 143, 1) 0%, rgba(40, 78, 153, 1) 100%);
}

.navWrap>div::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 33px;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    box-shadow: 0 0 0 1px #333333;

    background: #2595ea;
}

.navWrap>div,
.navWrap .links {
    display: none;
}

.navWrap>div:nth-child(1) {
    display: block;
}

.navWrap.active>div {
    display: block;
}

.navWrap.active .links {
    position: relative;
    display: block;

    padding-left: 57px;
    padding-top: 14px;
    padding-bottom: 14px;

    color: #63aee9;
    background: linear-gradient(90deg, rgba(13, 78, 128, 1) 0%, rgba(36, 70, 138, 1) 100%);
}

.navWrap>div::before,
.links::before {
    content: '';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 35px;

    width: 1px;
    background: #116cb2;
}

/*  */

.lnk {
    cursor: unset !important;
}

/*  */
.fLink::after {
    content: unset !important;
}

.fLink a {
    color: #b5cbe7;
}

.navWrap.active .fLink a {
    color: #fff;
}

/*  */
a.active {
    color: #fff;
}