/* 
Header Logo Header Logo Header Logo Header Logo Header Logo
Header Logo Header Logo Header Logo Header Logo Header Logo
Header Logo Header Logo Header Logo Header Logo Header Logo
Header Logo Header Logo Header Logo Header Logo Header Logo
Header Logo Header Logo Header Logo Header Logo Header Logo
*/

#scheader {
  background-color: #0065B8;
}

#sclogo {
  background-color: #0065B8;
  padding: 10px;
  padding-bottom: 0px;
  display: flex;
}

#sclogosub {
  margin: auto;
}

#sclogosub p {
  text-align: center;
  margin-bottom: 0px;
}

#sclogosub a {
  text-decoration: none;
  padding: 0px 20px;
}

#txtlogo {
  text-decoration: none;
  background-color: #B21F1F;
  border-radius: 5px;
  color: white;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}

@media screen and (max-width: 960px) {
  #txtlogo {
    padding: 5px;
    border-radius: 3px;
    font-size: 20px;
  }
}


/* 
Desktop Desktop Desktop Desktop Desktop Desktop
Desktop Desktop Desktop Desktop Desktop Desktop
Desktop Desktop Desktop Desktop Desktop Desktop
*/

#navmenu,
#navmenu ul,
#navmenu ul li,
#navmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#navmenu:after,
#navmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#navmenu {
  font-family: sans-serif;
  background: #0065B8;
  display: flex;
  justify-content: center;
  z-index: 999999 !important;
}
#navmenu > ul > li {
  float: left;
}
#navmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#navmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#navmenu.align-center ul ul {
  text-align: left;
}
#navmenu.align-right > ul > li {
  float: right;
}
#navmenu > ul > li > a {
  padding: 10px 15px;
  font-size: 20px;
  letter-spacing: 0.7px;
  text-decoration: none;
  color: #FFEEA3;
}
#navmenu > ul > li:hover > a {
  color: #ffffff;
  border-radius: 5px;
  background-color: #B21F1F;
}
#navmenu > ul > li:hover > ul > li:hover > a {
  color: #ffffff;
  border-radius: 5px;
  background-color: #BF2222;
}
#navmenu > ul > li:hover > ul > li:hover > ul > li:hover a {
  color: #ffffff;
  border-radius: 5px;
  background-color: #D42525;
}
#navmenu ul ul {
  position: absolute;
  left: -9999px;
}
#navmenu.align-right ul ul {
  text-align: right;
}
#navmenu ul ul li {
  height: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#navmenu li:hover > ul {
  left: auto;
}
#navmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#navmenu li:hover > ul > li {
  height: fit-content;
}
#navmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#navmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#navmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 8px 15px;
  min-width: 180px;
  font-size: 14px;
  letter-spacing: 0.25px;
  text-decoration: none;
  color: #FFEEA3;
  background: #0065B8;
}
#navmenu ul ul li:last-child > a,
#navmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#navmenu ul ul li:hover > a,
#navmenu ul ul li a:hover {
  color: #ffffff;
}

@media screen and (max-width: 960px) {
  #navmenu > ul > li > a {
    padding: 10px 10px;
    font-size: 16px;
  }

  #navmenu ul ul li a {
    display: none;
  }
}

/* 
Desktop-Search Desktop-Search Desktop-Search Desktop-Search
Desktop-Search Desktop-Search Desktop-Search Desktop-Search
Desktop-Search Desktop-Search Desktop-Search Desktop-Search
*/

.search-box-container .search-box {
  position: relative;
  margin-left: 50px;
  height: 40px;
  width: 40px;
}
.search-box-container .search-box i {
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.search-box-container .search-box .input-box {
  position: absolute;
  right: calc(100% - 40px);
  top: 50px;
  height: 60px;
  width: 300px;
  background: #0065B8;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.search-box-container.showInput .search-box .input-box {
  top: 50px;
  opacity: 1;
  pointer-events: auto;
  background: #0065B8;
}
.search-box .input-box::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  background: #0065B8;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}
.search-box .input-box input {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}

.input-box button[type="submit"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  font-size: 14px;
  font-weight: 400;
  color: white;
  border: none;
  padding: 3px 3px;
  border-radius: 3px;
  background-color: #0065B8;
  cursor: pointer;
}

.input-box button[type="submit"]:hover {
  opacity: 1;
  color: #FFEEA3;
}

@media screen and (max-width: 960px) {
  .search-box-container .search-box {
    height: 35px;
    width: 35px;
  }

  .search-box-container .search-box i {
    line-height: 35px;
    font-size: 20px;
  }

 .search-box-container.showInput .search-box .input-box {
    top: 47px;
  }

 .search-box .input-box::before {
    right: 12px;
  }
}