.mobile-nav {
        display:none;
    }
.mobile-container {
  max-width: 480px;
  margin: auto;
  /*background-color: #555;*/
  height: 50px;
  color: white;
  border-radius: 10px;
}

.topnav {
      width: 90%;
    /* overflow: hidden; */
    background-color: #ffffff;
    position: relative;
    /*border: 1px solid #cccccc;*/
    border-radius: 5px;
    margin-left: 10%;
    position:relative;
    z-index:100;
}

.topnav #myLinks {
  display: none;
  
}

.topnav a {
  color: #000000;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: #ffffff;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ffffff;
  color: black;
}

.active {
  background-color: #04AA6D;
  color: white;
}




.navigation {
  width: 300px;
  
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainmenu a, .mainmenu label {
  display: block;
  /*background-color: #CCC;*/
  text-decoration: none;
  padding: 10px;
  color: #000;
  font-size:17px;
}
.mainmenu a:hover, .mainmenu label:hover {
    /*background-color: #C5C5C5;*/
}

/* hide the input */
.mainmenu input {
  display: none;
}
/* if a sibling checkbox is check show the menu */
.mainmenu input:checked ~ .submenu {
  display: block;
  max-height: 535px;
}
.submenu a, .submenu label {
  background-color: #ccc;
}
.submenu a:hover {
  background-color: #666;
}
.submenu {
  overflow: hidden;
  max-height: 0;
  transition: all 0.5s ease-out;
}
ul {
    height: auto !important;
}



.header_styel1 {
    width: 40%;
    float: left;
}

.header_styel2 {
    width: 25%;
    float: left;
    color: #FFFFFF;
    text-align: center;
}
.header_styel3 {
    width: 70%;
    float: left;
    display:block;
}
.header_styel4 {
    width: 30%;
    float: left;
    font-size: 14px;
}

.header_styel5 {
    width: 10%;
    float: left;
    background-color: #2e61e2;
    border: 1px solid #08319b;
    color: #FFFFFF;
    text-align: center;
    padding: 1% 0% 1% 0%;
    margin: 0% 2% 0% 0%;
}

.header_styel6 {
    width: 10%;
    float: left;
    background-color: #13850a;
    border: 1px solid #08319b;
    color: #FFFFFF;
    text-align: center;
    padding: 1% 0% 1% 0%;
    margin: 0% 2% 0% 0%;
}
.login1 {
    width: 45%;
    float: left;
    margin: 0% 0% 4.5% 0%;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 1% 0% 4% 0%;
    box-shadow: 10px 6px 17px -9px;
}

.login2 {
    width: 100%;
    float: left;
}
.login3 {
    width: 80%;
    float: left;
}

@media only screen and (max-width: 600px) {
    .mobile-nav {
        display:block;
    }
    .header_styel1 {
        width: 100%;
    }
    .header_styel2 {
        width: 100%;
    }
    .header_styel3 {
        display:none;
    }
    .header_styel4 {
        width: 100%;
    }
    .header_styel5 {
        width: 98%;
        margin: 0% 1% 0% 0%;
    }
    .header_styel6 {
        width: 98%;
        margin: 2% 1% 0% 0%;
    }
    .login1 {
        width: 96%;
        float: left;
        margin: 0% 2% 4.5% 2%;
    }
    .login3 {
        width: 100%;
        float: left;
    }

}