#myicon {
  opacity: 0;
  color: #000000;
}

.navbar-brand {
  margin-left: 3rem;
  color: #000000;
  font-size: 1.5rem;
  height: 45px;
}
.navbar-brand img {
  width: 40%;
  position: relative;
  top: -1.4rem;
}

#myul {
  width: 100%;
}

#myul .nav-link {
  margin-left: 2rem;
}

#my-navigation {
  width: 100%;
  position: fixed;
  z-index: 500;
  padding-bottom:0;
  background: #fff;
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.2);
}
 
#my-navigation .nav-link {
  color: #000000;
  font-weight: 400;
}

#my-navigation .nav-link:hover {
  color: #FF0000;
}

.mynavbar {
  margin-left: 12%;
  margin-right: 8%;
  position:relative;
  top:1.5rem;
}

.mynavbar .nav-link{
  margin-left: 1.8rem;
  font-size: 1rem;
}


.sdown{
    z-index:1000;
    position:relative;
    width:130px;
    padding-bottom:3rem;
}

.sdown i{
    font-size:0.8rem;
    position:relative;
    top:-0.03rem;
}

.mydropdown{
    background-color:#084A84;
    position:absolute;
    left:35%;
    top:3.45rem;
    padding-top:1rem;
    width:245px;
    padding-bottom:2rem;
    overflow:hidden;
    transform:translatey(5rem);
    z-index:1000; 
    padding-left:0;
    opacity:0;
    visibility:hidden;
}

.mydropdown li{
    list-style:none;
    margin-top:0.5rem;
    font-size:1rem;
    padding: 0.5rem 1rem;
}

.mydropdown li a{
    text-decoration:none;
    color:white;
}
 
.mydropdown li:hover{
      background-color:#FF0000;
      color:white;
      transition:.3s ease;
      padding-left:1.5rem;
}

.mydropdown li:hover a{
     transform:translatex(7px);
}
 

.sdown:hover .mydropdown{
      transform:translatey(0.6rem)!important;
      transition:.4s ease;
      opacity:1;
      visibility:visible;
      display: block;
}

.mycollapse{
  width: 70%;
  padding: 0;
  background: #fff;
}

.mycollapse li a:hover {
  color: #FF0000;
}

.colse:hover .coldrop{
  transform: translateY(0rem);
  transition: .3s ease;
  display: block;
}

.coldrop{
  background-color:#284795;
  padding-left:0;
  transform: translateY(2rem);
  display: none;
}

.coldrop li{
  list-style: none;
  padding:0.5rem;
  margin-top:0.5rem;
}

.coldrop li:hover{
  background-color: #FF0000;
  color:#ffff;
  transition: .3s ease;
  padding-left:1rem;
}

.coldrop li a{
  text-decoration: none;
  color:#fff;
}

.coldrop li a:hover{
  color:#fff;
}

@media only screen and (max-width:1331px){

  .mynavbar {
    margin-left: 10%;
    margin-right: 8%;
  }
}

@media only screen and (max-width:1306px){

  .mynavbar {
    margin-left: 7%;
    margin-right: 8%;
  }
}

@media only screen and (max-width:1237px){

  .mynavbar {
    margin-left: 7%;
    margin-right: 8%;
  }
}


@media only screen and (max-width:1269px){

  .mynavbar {
    margin-left:3%;
    margin-right: 5%;
    position:relative;
    top:1.5rem;
  }
}


@media only screen and (max-width:1195px){

  .mynavbar {
    margin-left:0%;
    margin-right: 3%;
  }
}

@media only screen and (max-width:1146px){

  .mynavbar {
    margin-left:-8%;
    margin-right: 3%;
  }
}

@media only screen and (max-width:1146px){

  .mynavbar {
    margin-left:-12%;
    margin-right: 3%;
  }
}


@media only screen and (max-width:992px){
    
#myicon{
    opacity:1;
    color:#000000;
    position: absolute;
    right:1rem;
    top:2rem;
    font-size:1.3rem;
}

#my-navigation {
  padding:1.3rem 0;
}
 
.navbar-brand img {
  width: 30%;
  position: relative;
  top: -1.2rem;
}


}
@media only screen and (max-width:576px){

  .navbar-brand {
    margin-left: 1rem;
    color: #000000;
    font-size: 1.5rem;
    height: 45px;
  }
}