
.nav-list a{
    text-decoration: none;
}
nav ul{
    list-style: none;
}
header{
    width: 100%;
    position: relative;
    /* top:0;
    left:0; */
    background-color: seagreen;
}

.menu-icons{
    color:#eee;
    font-size: 4rem;
    position: absolute;
    top:50%;
    right:2rem;
    transform: translateY(-50%);
    cursor: pointer;
    z-index:1500;
    display: none;
}

nav{
    display: flex;
    position: relative;
    align-items: center;
    width:100%;
    height:6rem;
    background-color: #29487D;
    border-bottom: 1px solid rgba(0,255,255,0.1);
    box-shadow: 1px 2px 20px #3a3a3a;
}
.logo-head{
    width:13rem;
    height: 5rem;
    /* background-color: royalblue; */
    display: flex;
    margin-right:20px;
    margin-left: 10px;
    padding:1%;
}

.nav-list{
    display: flex;
    width:100%;
    align-items: center;
    
}


.nav-list li{
    line-height: 2rem;
    padding-left:1%;
    position: relative;
}

.nav-list a:hover{
    /*border-bottom: 2px solid lightblue;*/
    background: linear-gradient(to bottom, #ce2076 0%, #29487d 100%);
}

.nav-list i{
    color: #AAC337;
}

.sub-menu{

  width: 19rem;
    display: block;
    position: absolute;
    border-top: 3px solid #AAC337;
    background-color: #2E2455;
    z-index: 100;
    top: 10rem;
    opacity: 0;
    visibility: hidden;
    padding-left: 0px;
}

.sub-menu::before{
    content: "";
    position: absolute;
    top:-2.5rem;
    left:1rem;
    border:1.2rem solid transparent;
    border-bottom-color: #AAC337;
}

.sub-menu .sub-menu::before{
    
    top:0rem;
    left:-2.5rem;
    border:1.2rem solid transparent;
    border-right-color: #AAC337;
}

.sub-menu .sub-menu{
    border-top: none;
    border-left: 3px solid #AAC337;
    top:0;
    left:100%;
}

.nav-list li:hover > .sub-menu{
    top:3rem;
    opacity:1;
    visibility: visible;
}


.sub-menu li:hover > .sub-menu{
    top:0;
    left:100%;
}

.sub-menu li{
    line-height: 2rem;
}

.nav-list a{
    display: block;
    color:#fff;
    padding:0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;;
    text-transform: uppercase;
}

.nav-list > a:hover{
    background-color: khaki;
}

li.move-right{
    margin:auto 0 auto auto;
}



@media screen and (max-width:992px)
{
    .nav-list{
      position: absolute;
        top:6rem;
        left:0;
        /*height:100vh;*/
        display: none;
        align-items:initial;
        flex-direction: column;
        background-color: #29487D;
        z-index: 1000;
    }
    .nav-list > li{
        line-height: 2rem;
    }

    .sub-menu > li{
        line-height: 2rem;
    }
    .sub-menu{
      position: initial;
      border: 3px solid transparent;
      border-left-color: #AAC337;
      margin-left: 1rem;
      max-height: 0;
    }

    .sub-menu::before{
        display: none;
    }

    .nav-list li:hover > .sub-menu{
        opacity:1;
        visibility: visible;
        max-height: initial;
    }
    li.move-right
    {
        margin: 0 auto 0 0;
        line-height: 0px;

    }

    .menu-icons{
        display: block;
    }
    .fa-times
    {
        display: none;
    }
    nav.active .fa-times{
        display: block;
    }
    nav.active .fa-bars
    {
        display: none;
    }

    nav.active .nav-list{
        display: flex;
    }
}