/* .sticky {

  position: fixed;

  top: 0;

  width: 100%;

  animation: slide-down 0.7s;

  transform: translateY(0);

  transition: transform 0.5s;

} */

.sticky>header {

  background: #c2f4fd;

  border-top: 1px solid #014a58;

}

@keyframes slide-down {

  0% {

    transform: translateY(-100%);

  }

  100% {

    transform: translateY(0);

  }

}

.toggle,
[id^=drop] {

  display: none;

}



nav {

  margin: 0;

  padding: 0;

  background-color: #000000a3;

  border-bottom: 1px solid #02333c;

  border-top: 1px solid #02333c;

}



nav:after {

  content: "";

  display: table;

  clear: both;

}

nav ul {
  /* padding:0;

margin:0; */
  list-style: none;
  position: relative;
  width: 100%;
  text-align-last: left;
  margin: auto;
  /* border-top: 1px solid #539ea5; */
  /* display: table; */
}

nav ul li {

  margin: 0px;

  display: table-cell;

  /* float: left; */

  /* background-color: #1b4d89; */

}



nav a {

  display: block;
  padding: 13px 22px;
  color: #ffffff;
  font-size: 15px;
  text-decoration: none;
  letter-spacing: 1.2px;
  text-transform: uppercase;

  font-weight: 700;

}

nav ul li:hover {

  background: #03877a;

}

nav ul li:hover>a {

  color: #fff;

}

nav ul li ul li:hover {

  background: #03877a;

}

nav ul li ul li:hover>a {

  color: #fff;

}

nav ul ul ul li a {

  color: #02333c;

}

nav a:hover {

  background-color: #009688;

  color: #fff;

}

nav ul ul {

  display: none;

  position: absolute;

  min-width: 200px;

  width: auto;

  /* top: 40px;

padding-top: 7px; */



}

nav ul li {

  /* border-right: 1px solid #87aad3; */

}

nav ul li:first-child {

  /* border-left: 1px solid #87aad3; */



}

/* .menu li:first-child a{

  padding: 15px;

} */

.menu li:first-child a i {

  font-size: 35px;

  color: #022a32;

}

nav ul ul li {

  background-color: #000000a3;

  border: none;

}

nav ul ul li:first-child {

  border: none;

}

nav ul ul li:first-child a,
nav ul ul li a {

  padding: 10px 20px !important;

}

/* nav ul ul li a{

  padding: ;

} */

nav ul ul li a:hover {

  background: #078377;

}

nav ul li:hover>ul {

  display:inherit;

}

nav ul ul::before {

  position: absolute;

  top: 0px;

  left: 40%;

  content: none;

  width: 0;

  height: 0;

  border-left: 7px solid transparent;

  border-right: 7px solid transparent;

  border-bottom: 7px solid #009688;

}

nav ul ul li {

  width: auto;

  float: none;

  display: list-item;

  position: relative;

}

nav ul ul ul {

  position: absolute;

  right: -30px;

  top: 60px;

}

nav ul ul ul li {

  position: relative;

  top: -60px;

  left: 170px;

}



/* li > a:after { content:  ' +'; } */

li>a:only-child:after {
  content: '';
}

@media only screen and (min-width: 1200px) and (max-width: 1384px) {

  nav a {

    display: block;

    padding: 13px 22px;

    color: #ffffff;

    font-size: 15px;

    text-decoration: none;

    letter-spacing: 0.7px;

    text-transform: uppercase;

  }

}



@media all and (max-width : 768px) {

  nav a {

    display: block;

    padding: 7px 20px;

    color: #ffffff;

    font-size: 16px;

    text-decoration: none;

    letter-spacing: 0.5px;

    font-weight: 500;

  }

  .menu li:first-child a {

    /* padding: 1px 17px; */

    color: #fff;

  }

  .menu li:first-child a i {

    font-size: 26px;

    color: #ffffff;

  }



  #logo {

    display: block;

    padding: 0;

    width: 100%;

    text-align: center;

    float: none;

  }



  nav {

    margin: 0;

    background: #18686f;

  }



  .toggle+a,

  .menu {

    display: none;

  }



  .toggle {

    display: block;

    padding: 7px 20px;

    color: #FFF;

    font-size: 17px;

    text-decoration: none;

    border: none;

  }



  .toggle:hover {

    background-color: #009688;

  }



  [id^=drop]:checked+ul {

    display: block;

  }



  nav ul li {

    display: block;

    width: 100%;

  }



  nav ul ul .toggle,

  nav ul ul a {

    padding: 0 40px;

  }



  nav ul ul ul a {

    padding: 0 80px;

  }



  nav a:hover,

  nav ul ul ul a {

    background-color: #009688;

  }



  nav ul li ul li .toggle,

  nav ul ul a,

  nav ul ul ul a {

    padding: 7px 20px;

    color: #FFF;

    font-size: 17px;

  }



  nav ul li ul li .toggle,

  nav ul ul a {

    background-color: #035158;

  }



  nav ul ul {

    float: none;

    position: static;

    color: #ffffff;

  }



  nav ul ul li:hover>ul,

  nav ul li:hover>ul {

    display: none;

  }



  nav ul ul li {

    display: block;

    width: 100%;

  }



  nav ul ul ul li {

    position: static;

  }

  nav ul ul::before {



    content: none;

  }

  nav ul ul ul {

    position: relative;

    right: 0px;

    top: 0px;

    padding-left: 3px;

  }

  nav ul ul ul li a {

    font-size: 15px;

    font-weight: 500;

    line-height: 13px;

  }

  nav ul ul li a {

    font-weight: 500;

  }

  nav ul ul ul li a {

    color: #fff;

  }

}



@media all and (max-width : 330px) {

  nav ul li {

    display: block;

    width: 94%;

  }

}





/* ************************************************ */

.marquee-box {

  background: #014a58;

  padding: 0px 0px 1px;

}

.marquee-section {

  position: relative;

}

.marquee-section .notice_marquee {

  padding: 1px 0px;

  position: relative;

  margin-bottom: -5px;

}

.marquee-section .notice_marquee a {

  position: relative;

  color: #fff;

  padding-left: 26px;

  font-size: 14px;

  margin-left: 19px;

  letter-spacing: 1px;

  text-decoration: none;

}

.marquee-section .notice_marquee a::before {

  content: '\f0a4';

  font-family: FontAwesome;

  position: absolute;

  left: 0px;

  font-weight: 500;

  font-size: 17px;

}

.marquee-section .notice_marquee a img {

  width: 21px;

}

.marquee-section .updates {

  position: absolute;

  top: 0px;

  left: 0px;

  background: #03877a;

  z-index: 1;

  padding: 4.4px 10px;

  font-weight: 700;

  text-transform: uppercase;

  font-size: 13px;

  letter-spacing: 1px;

  color: #fff;

}

.marquee-section .updates::after {

  position: absolute;

  /* content: ""; */

  right: -13px;

  top: 0px;

  border-top: 27px solid transparent;

  border-bottom: 0 solid transparent;

  border-left: 13px solid #fb7c31;

  width: 0px;

  height: 0px;

}

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

  .marquee-section .updates span {

    display: none;

  }

}