@charset "UTF-8";
@import url(../fonts/carlito-cufonfonts-webfont/style.css);
body {
  scroll-behavior: smooth !important;
  height: 100%;
  width: 100vw;
  overflow-x: hidden;
}

section {
  background-color: white !important;
}

header {
  border-bottom: 1px solid whitesmoke;
}

button {
  text-transform: uppercase;
}

.title {
  font-family: 'Carlito Bold';
  color: #03014C;
}

p, h1, h2, h3, h4, h5, h6, span, a, button, .options, table, th, tr, td {
  font-family: 'Carlito Regular';
}

button {
  position: relative;
  border: none;
  font-size: 1rem;
  -webkit-transition: color 0.5s, background-color 0.2s, -webkit-transform 0.2s;
  transition: color 0.5s, background-color 0.2s, -webkit-transform 0.2s;
  transition: color 0.5s, transform 0.2s, background-color 0.2s;
  transition: color 0.5s, transform 0.2s, background-color 0.2s, -webkit-transform 0.2s;
  outline: none;
  border-radius: 3px;
  margin: 0px;
  padding: 0.7rem 1.4rem;
  border: 3px solid transparent;
  font-family: 'Carlito Regular';
}

button:active {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
}

button::after, button::before {
  border-radius: 3px;
}

.blogYear, .blogMonth {
  color: #414088 !important;
}

.selectedYear, .selectedMonth {
  color: #03014C !important;
}

.material-bubble {
  background-color: transparent;
  color: #01001a;
  border: none;
  overflow: hidden;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.material-bubble:hover {
  color: #e6e6e6;
  z-index: 999;
}

.material-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #03014C;
  -webkit-transition: opacity 0.3s, border 0.3s;
  transition: opacity 0.3s, border 0.3s;
}

.material-bubble:hover::before {
  opacity: 0;
}

.material-bubble::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 200px;
  background-color: #05027e;
  border-color: transparent;
  border-radius: 50%;
  -webkit-transform: translate(-10px, -70px) scale(0.1);
          transform: translate(-10px, -70px) scale(0.1);
  opacity: 0;
  z-index: -1;
  -webkit-transition: opacity 0.3s, background-color 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, background-color 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
  transition: transform 0.3s, opacity 0.3s, background-color 0.3s, -webkit-transform 0.3s;
}

.material-bubble:hover::after {
  opacity: 1;
  -webkit-transform-origin: 100px 100px;
          transform-origin: 100px 100px;
  -webkit-transform: scale(1) translate(-10px, -70px);
          transform: scale(1) translate(-10px, -70px);
}

.hideScreen {
  display: none;
}

.showScreen {
  display: block;
  opacity: 1;
  visibility: visible;
}

@-webkit-keyframes slide {
  0% {
    opacity: 0;
    right: -100px;
  }
  50% {
    opacity: 0.5;
    right: -50px;
  }
  100% {
    opacity: 1;
    right: 0px;
  }
}

@keyframes slide {
  0% {
    opacity: 0;
    right: -100px;
  }
  50% {
    opacity: 0.5s;
    right: -50px;
  }
  100% {
    opacity: 1;
    right: 0px;
  }
}

@font-face {
  font-family: 'jungle-adventurer';
  src: url("./../assets/fonts/jungle-adventurer.regular.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
  font-family: 'GorgaGrotesque-Bold';
  src: url("./../assets/fonts/GorgaGrotesque-Bold.ttf") format("truetype");
  /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

.achievement_back {
  position: absolute;
  top: 8%;
  left: 5%;
  width: 10rem;
  font-size: 2rem;
  cursor: pointer;
}

#portgallery {
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
  width: 95%;
  margin: 2% auto;
}

#portgallery img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
  border: 1px solid #f3f3f3;
}

@media (max-width: 1200px) {
  #portgallery {
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #portgallery {
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #portgallery {
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #portgallery {
    -webkit-column-count: 1;
    column-count: 1;
  }
}

.app-image-shadow {
  background-color: #ececec;
  border-radius: 0.4rem;
  -webkit-box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
          box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
}

.app-shadow-img {
  -webkit-box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
          box-shadow: 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02), 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028), 12.5px 12.5px 10px rgba(0, 0, 0, 0.035), 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042), 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05), 100px 100px 80px rgba(0, 0, 0, 0.07);
}

.app-shadow {
  -webkit-box-shadow: 14.5px 15.6px 17.9px rgba(0, 0, 0, 0.042), 27.2px 29.2px 33.4px rgba(0, 0, 0, 0.05), 65px 70px 80px rgba(0, 0, 0, 0.07);
          box-shadow: 14.5px 15.6px 17.9px rgba(0, 0, 0, 0.042), 27.2px 29.2px 33.4px rgba(0, 0, 0, 0.05), 65px 70px 80px rgba(0, 0, 0, 0.07);
}

@font-face {
  font-family: 'Arial Regular';
  font-style: normal;
  font-weight: normal;
  src: local("Arial Regular"), url("../fonts/arial/Arial.woff") format("woff");
}

.initial {
  color: #03014C;
}

.name {
  color: #03014C;
  font-family: 'Carlito Bold';
}

.qualification {
  font-family: 'Carlito Bold';
  color: #03014C;
}

.app-bar-icon {
  position: absolute;
  top: 3.5%;
  right: 4%;
  font-size: 1.5rem;
}

.app-menu {
  position: relative;
}

.app-menu * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.app-menu li {
  display: inline-block;
  list-style: outside none none;
  overflow: hidden;
  padding: 0 0.5em;
}

@media screen and (min-width: 1020px) and (max-width: 1366px) {
  .app-menu li {
    margin: 0 0.1em;
    font-size: 1rem;
  }
}

@media screen and (min-width: 375px) and (max-width: 1019px) {
  .app-menu li {
    padding: 0 0.05em;
  }
}

@media screen and (min-width: 1367px) {
  .app-menu li {
    margin: 0 0.5em;
  }
}

.app-menu .app-menua {
  padding: 0.3em 0;
  color: #03014C;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  text-decoration: none;
  font-family: 'Carlito Regular';
}

@media screen and (min-width: 375px) and (max-width: 1019px) {
  .app-menu .app-menua {
    padding: 0.3em 0;
    font-size: 0.75rem;
    margin: 0%;
  }
}

.app-menu .app-menua:before,
.app-menu .app-menua:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  font-family: 'Carlito Regular';
}

.app-menu .app-menua:before {
  bottom: 100%;
  display: block;
  height: 3px;
  width: 100%;
  content: "";
  background-color: #03014C;
  font-family: 'Carlito Regular';
}

.app-menu .app-menua:after {
  padding: 0.3em 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  content: attr(data-hover);
  color: #03014C;
  white-space: nowrap;
  font-weight: bold;
  font-family: 'Carlito Regular';
}

.app-menu li:hover .app-menua,
.app-menu .current .app-menua {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  font-family: 'Carlito Regular';
}

.app-menu li:hover .submenu {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  display: block;
  font-family: 'Carlito Regular';
}

.submenu {
  display: none;
  position: absolute;
  top: 90%;
  z-index: 1000;
  background-color: white;
  padding: 0.5rem 2rem;
  border-radius: 1rem;
  -webkit-box-shadow: 6.7px 6.7px 104.4px rgba(0, 0, 0, 0.05), 12.5px 12.5px 145.7px rgba(0, 0, 0, 0.042), 22.3px 22.3px 177.9px rgba(0, 0, 0, 0.035), 41.8px 41.8px 204px rgba(0, 0, 0, 0.028), 100px 100px 352px rgba(0, 0, 0, 0.02);
          box-shadow: 6.7px 6.7px 104.4px rgba(0, 0, 0, 0.05), 12.5px 12.5px 145.7px rgba(0, 0, 0, 0.042), 22.3px 22.3px 177.9px rgba(0, 0, 0, 0.035), 41.8px 41.8px 204px rgba(0, 0, 0, 0.028), 100px 100px 352px rgba(0, 0, 0, 0.02);
  font-family: 'Carlito Regular';
}

.submenu ul {
  background-color: #03014C;
}

.submenu li {
  display: block;
  list-style: outside none none;
  overflow: hidden;
}

@media screen and (min-width: 1020px) and (max-width: 1366px) {
  .submenu li {
    margin: 0.1em 0em;
    font-size: 1rem;
  }
}

@media screen and (min-width: 1367px) {
  .submenu li {
    margin: 0.7em 0em;
  }
}

.submenu li .submenua {
  padding: 0.3em 0.1em;
  color: #03014C;
  position: relative;
  text-transform: capitalize;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  text-decoration: none;
  font-family: 'Carlito Regular';
}

.submenu .submenua:before,
.submenu .submenua:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  font-family: 'Carlito Regular';
}

.submenu .submenua:before {
  bottom: 100%;
  display: block;
  height: 3px;
  width: 100%;
  content: "";
  background-color: #03014C;
}

.submenu .submenua:after {
  padding: 0.3em 0;
  position: absolute;
  bottom: 100%;
  left: 0;
  font-family: 'Carlito Bold';
  content: attr(data-hover);
  color: #03014C;
  white-space: nowrap;
  font-family: 'Carlito Bold';
}

.submenu li:hover .submenua,
.submenu .current .submenua {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid blue;
  padding-left: 4.2%;
  padding-right: 4.2%;
  padding-top: 0.5%;
  padding-bottom: 0.5%;
  background-color: white;
  z-index: 9999;
  margin: 0% auto;
  border: 1px solid whitesmoke;
}

.menu-bar {
  position: absolute;
  font-size: 2rem;
  top: 3.5%;
  right: 5%;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  background-color: white;
  overflow-x: hidden;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  padding-top: 6rem;
}

.sidenav .closebtn {
  position: absolute;
  top: 3%;
  right: 8%;
  font-size: 36px;
  margin-left: 50px;
  color: black !important;
  z-index: 9999;
}

@media screen and (max-height: 1023px) {
  .sidenav {
    padding-top: 15px;
  }
}

.topnav {
  overflow: hidden;
  background-color: #fff;
}

.topnav a {
  float: left;
  display: block;
  width: 100%;
  color: grey;
  text-align: center;
  padding: 1.5rem;
  text-decoration: none;
  font-size: 1.3rem;
  text-transform: capitalize;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  width: 100%;
  font-family: 'Carlito Regular';
}

.dropdown .dropbtn {
  font-size: 1rem;
  border: none;
  outline: none;
  color: black;
  font-family: 'Carlito Regular';
  padding: 1rem;
  background-color: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 160px;
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  font-family: 'Carlito Regular';
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 1rem 2rem;
  text-decoration: none;
  display: block;
  text-transform: capitalize;
  text-align: left;
  font-size: 1.1rem;
  font-family: 'Carlito Regular';
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: white;
  color: black;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.active-mbl-menu {
  font-weight: bold;
  text-decoration: underline;
  color: white !important;
  background-color: #03014C;
}

.open-tab {
  display: block;
}

.close-tab {
  display: none;
}

@media screen and (max-width: 1023px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1023px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
/*# sourceMappingURL=app_bar.css.map */