.header-main {
    background-color: #01c2ff;
    color: #002733;
	background-color: #99e7ff;
	border-bottom: 1px solid #33cfff;
}
.logo {
    max-width: 142px
}
.header-main .header-nav {
    background-color: #99e7ff
}

header {
    position: relative;
    padding-top: 24px;
    padding-bottom: 32px
}

header li {
    margin-right: 32px
}

header .header-nav-list {
    margin-bottom: -32px;
    padding-bottom: 32px
}

header .header-nav a {
    color: #001419
}

.menu-list .button.slim {
    border-color: #ffe500 !important;
    background: #fffce5 !important
}

.dropdown-menu-blk {
    position: absolute;
    z-index: 9;
    width: 100%;
    left: 0;
    top: 100%;
    background-color: #fff;
    font-size: 14px;
    line-height: 20px;
    box-shadow: 0 14px 10px -20px #000
}

.dropdown-menu-blk .menu-img {
    max-width: 144px;
    height: 80px;
    object-fit: cover
}

.dropdown-menu-blk .list-icon {
    margin-top: 2px;
    margin-right: 16px;
    flex: 0 0 18px;
    max-width: 18px;
    height: 18px
}



@media screen and (min-width:992px) {
    .dropdown-menu-blk {
        visibility: hidden;
        opacity: 0;
        transition: .1s ease
    }

    .menu-list .link-anim {
        padding-right: 0 !important
    }

    .menu-list:hover .link-anim {
        display: inline-block;
        padding-right: 0
    }

    .menu-list:hover .link-anim:before {
        width: calc(100% - 5px)
    }

    .resources-link img {
        transition: padding .5s
    }

    .resources-link:hover img {
        transform: rotate(1turn);
        transition: all .5s
    }

    .header-nav-list {
        margin-bottom: -32px;
        padding-bottom: 32px
    }

    .header-nav-list>.link-anim {
        padding-right: 25px
    }

    .header-nav-list>.link-anim:after {
        content: "";
        display: block;
        background-image: url("../images/down.svg");
        position: absolute;
        right: 0;
        width: 20px;
        top: 4px;
        height: 20px;
        transition: 1s
    }

    .header-nav-list>.link-anim.active:before {
        width: calc(100% - 25px) !important
    }

    .header-nav-list:hover>.link-anim:after {
        transform: rotate(180deg)
    }

    .header-nav-list:hover>.link-anim:before {
        width: calc(100% - 25px)
    }

    .header-nav-list:hover .dropdown-menu-blk {
        visibility: visible;
        opacity: 1;
        transition: .5s
    }
}

@media screen and (max-width:991px) {
    .dropdown-menu-blk {
        position: relative;
        top: 0;
        margin-top: 10px;
        display: none
    }

    .header-nav {
        background-color: #fff !important;
        -webkit-align-items: start;
        align-items: start;
        max-width: 480px;
        width: 100%;
        padding-top: 100px;
        position: fixed;
        top: 0;
        bottom: 0;
        right: -100%;
        z-index: 9999;
        overflow: auto;
        flex-direction: column;
        transition: .5s;
        box-shadow: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03)
    }

    .header-nav.active {
        right: 0;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -o-transition: .5s;
        transition: .5s
    }

    .header-nav.active li {
        opacity: 1;
        -webkit-transition: .5s .3s;
        -moz-transition: .5s .3s;
        -o-transition: .5s .3s;
        transition: .5s .3s
    }

    .header-nav>li {
        width: 100%;
        border-bottom: 1px solid #e3e3e3;
        margin-right: 0
    }

    .header-nav>li .link-anim.active:before,
    .header-nav>li .link-anim:hover:before {
        width: 100%
    }

    .header-nav li {
        padding: 15px 28px !important;
        margin-bottom: 0;
        opacity: 0
    }

    .header-nav .header-nav-list {
        margin-bottom: 0;
        padding-bottom: 32px;
        margin-right: 0;
        position: relative
    }

    .header-nav .header-nav-list .link-anim {
        padding-right: 25px
    }

    .header-nav .header-nav-list .link-anim.active:before,
    .header-nav .header-nav-list .link-anim:hover:before {
        width: calc(100% - 25px)
    }

    .header-nav .header-nav-list.active:after {
        transform: rotate(180deg)
    }

    .header-nav .header-nav-list.active .link-anim:before {
        width: 0
    }

    .header-nav .header-nav-list:after {
        content: "";
        display: block;
        background-image: url("../images/down.svg");
        position: absolute;
        right: 20px;
        width: 20px;
        top: 20px;
        height: 20px;
        transition: 1s
    }
}



@media screen and (max-width:576px) {
    .header-nav {
        max-width: 100%;
        left: 100%
    }

    .header-nav.active {
        left: 0
    }

    .ham.active .close-menu {
        max-width: 100%
    }
}