nav {
    background-color: rgb(25, 44, 107);
}

.toggleNav {
  display: none;
  color: white;
    text-decoration: none;
    font-size: 20px;
    margin: 0px;
    padding: 0px;
}

.toggleNav a {
  font-size: 30px;
}
.flex-nav {
  background-color: rgb(25, 44, 107);
   margin:  0 auto;
    padding: 0px 0px;
    display: flex;
    justify-content: center; 
   flex-direction: column;
    align-items: center;
   text-decoration: none;
  
}


.flex-nav ul {
width: 80%;
background-color: rgb(25, 44, 107);
text-align: center;
  list-style: none;
 margin: 0px;
  padding: 0px;
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
    display: flex;
    justify-content: space-around;
    
   
  color: black;
}

/* Flex Item */
.flex-nav li  {
    /* height: 100%; */
    padding: 25px 0px;
    
    
   
    
  -webkit-box-flex:3;
  -webkit-flex:3;
      -ms-flex:3;
          flex:3;
  color: black;
}

.flex-nav li a{
    margin: 0 auto;
  width: 100%;
  text-decoration: none;
  font-size: 20px;
   
  
  color: #ffffff;
}

.flex-nav li:hover{
    background-color: #07185B;
    border-top: 2px solid #66CCFF;
}

.flex-nav .social {
  -webkit-box-flex:1;
  -webkit-flex:1;
      -ms-flex:1;
          flex:1;
}

.dropdown-nav  {
  background-color: rgb(25, 44, 107);
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 50%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0px 40px;
}

@media all and (max-width:1000px) {
  
  .flex-nav ul {
    background-color: rgb(25, 44, 107);
    -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
  }

  .flex-nav li {
    -webkit-box-flex:1;
    -webkit-flex:1 1 50%;
        -ms-flex:1 1 50%;
            flex:1 1 50%;
  }

}


/* This is where the magic Happens */

@media all and (max-width:600px) {
  
  .flex-nav li {
    -webkit-flex-basis:100%;
        -ms-flex-preferred-size:100%;
            flex-basis:100%;
      width: 100%;
     
  }
  
 /* Nav */
  .flex-nav {
    background-color: rgb(25, 44, 107);
    -webkit-box-ordinal-group:2;
    -webkit-order:1;
        -ms-flex-order:1;
            order:1;
  }

  .toggleNav {
    display: block;
      padding: 10px;
      
  }

  .flex-nav ul {
    display: none;
      width: 100%;
  }
    .flex-nav ul.open {
      display:-webkit-box;
      display:-webkit-flex;
      display:-ms-flexbox;
      display:flex;
        flex-direction: row;
    }
  
}