.hamburger{
    display: none;
    position: absolute;
    top: 50%;  right: 0;
    transform: translate(-50%,-50%);
    width: 40px;  height: 40px;
    background: #1E4877;
    /* box-shadow: 0 0 20px rgba(0,0,0,.5); */
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
}
.hamburger span{
    list-style: none;
    position: absolute;
    transform: translateY(-50%);
    width: 70%;  height: 3px;
    border-radius: 10px;
    background: #fff;
    transition: 1s;
}
.hamburger span:nth-of-type(1){
    top: 30%;  left: 15%; 
    transition-delay: 1s; 
    opacity: 1; 
}
.hamburger span:nth-of-type(2){
    top: 50%;  left: 15%; 
    transition-delay: 0s;   
}
.hamburger span:nth-of-type(3){
    top: 70%;  right: 15%;
    transition-delay: 1s; 
    opacity: 1; 
}
.hamburger.active span:nth-of-type(1){
    left: 100%;
    transition-delay: 0s;
    opacity: 0; 
}
.hamburger.active span:nth-of-type(2){
    transform: translateY(-50%) rotate(405deg);
    transition-delay: .5s;
}
.hamburger.active span:nth-of-type(3){
    right: 100%;
    transition-delay: 0s;
    opacity: 0; 
}




.hamburger span:nth-of-type(2)::before{
   content: '';
   position: absolute;
   top: -150px;  left: 0;
   width: 100%;  height: 100%;
   background: #fff;
   border-radius: 10px;
   transform: rotate(90deg);
   transition: 1s;
   transition-delay: .5s;
}
.hamburger.active span:nth-of-type(2)::before{
   top: 0; 
   transition-delay: 1s;
}

/* mobile */
@media only screen and (max-width: 700px) {

    .bluebar{
        background-color: #102B4E;
        width: 80px;

    } 
    .hamburger{
        display: block;
        background-color: #1E4672;
    }
   
    ul{
        position: fixed;
        top: 90px;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: rgba(16, 43, 78, .9);
        display: flex;
        flex-direction: column;
        text-align: center;
        
        transition: .6s ease-in-out;
    }

    ul.active{
        max-height: calc(100% - 50px);
  overflow-y: auto;
        left: 0;
    }
    
    li{
        
        font-size: 13px;
        font-weight: 300;
        margin-bottom: 55px;
    }
    
    
  }