@font-face { font-family: PublicoText; src: url('Publico/PublicoText-Roman.otf'); } 
@font-face { font-family: PublicoText; font-weight: bold; src: url('Publico/PublicoText-Bold.otf');}

.logo{
  position: fixed; 
  left: 6vw; 
  top: 10vh;
}
.page-slide {
  opacity: 0;
}
.banaag1{
  position: fixed; left: 6vw; top: 10vh;
}
.covid {
  position: fixed;
  width: auto;
  height: 70vh;
  right: 10%;
  top: 20%;
  z-index: -100;
}
#concept-1 {
  animation-name: concept-1;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}
@keyframes concept-1 {
  0% {
      opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
      opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
      opacity: 1;
  }
}
#concept-2 {
  animation-name: concept-2;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: none;
  animation-delay: 0s;
}
@keyframes concept-2 {
  0% {
      opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
      opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
      opacity: 0;
  }
}
.nav-title{
  position: absolute;
  font-family: PublicoText;
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  line-height: 1em;
  margin-left: 4em;
  margin-top: 1em;
  
  letter-spacing: 0.2em;
  
  color: #E7B089;
}

.nav-bar{
  color: #E7B089; 
  position: fixed; 
  left: 25vw; 
  top: 10vh; 
  align-self: center;
  z-index: 11;
}

.hdr-2-titles{
  position: relative;
  margin-left: 0%;
  color: #FFFFFF;
  font-family: PublicoText;
  font-style: normal;
  font-weight: bold;
}
.hdr-title{
  margin-left: 0%;
  color: #FFFFFF;
  font-family: PublicoText;
  font-style: normal;
  font-weight: normal;
  font-size: 5em; 
  padding-left: 8%;
  letter-spacing: 0.4em;
  line-height: 1em;
  color: #FFFFFF;
}
.hdr-title2{
  font-size: 0.8em; 
  letter-spacing: 0.6em;
  line-height: 1em;
}

.hdr-sub{
  position: absolute;
  margin-left: 8%;

  font-family: Lato;
  font-style: normal;
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.2em;
  color: #FFFFFF;
}

.bdy-txt{
  position: relative;
  font-family: Lato;
  font-style: normal;
  font-weight: 300;
  font-size: 1.3em;
  line-height: 1.5em;
  left: 6%;
  color: #FFFFFF;
}
.bdy-gdlns-txt{
  position: relative;
  font-family: Lato;
  font-style: normal;
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.5em;
  left: 6%;
  color: #FFFFFF;
}
.bdy-note{
  font-family: Lato;
  font-style: normal;
  font-weight: 300;
  font-size: 0.4em;
  line-height: 1.2em;
  padding-top: 1.5em;
  margin-bottom: 10vh;
}

.bdy-title{
  position: relative;

  font-family: PublicoText;
  font-style: normal;
  font-weight: normal;
  font-size: 3em;
  line-height: 1em;
  margin-bottom: 5vh;
  left: 6%;
  color: #FFFFFF;
}
.bdy-gdlns{
  position: relative;
  font-family: PublicoText;
  font-style: normal;
  font-weight: normal;
  font-size: 3em;
  line-height: 1em;
  left: 6%;
  color: #FFFFFF;
}

.bdy-txt2{
  position: relative;
  font-family: Lato;
  font-style: normal;
  font-weight: 300;
  font-size: 1.5em;
  line-height: 1.5em;
  left: 6%;
  color: #FFFFFF;
  margin-top: 2em;
  margin-bottom: 5vh;
}
.bdy-title2{
  position: relative;
  font-family: PublicoText;
  font-style: normal;
  font-weight: normal;
  font-size: 2.5em;
  line-height: 1em;
  color: #FFFFFF;
  left: 6%;
}

.sbmt-title{
  font-size: 4.5em; 
  line-height: 0.2em;
}

#scrll1{
  display: block;
}
#scrll2{
  display: none;
}

li{
  margin-bottom: 0.5em;
}


.btn-sbmt {
  display: inline-block;
  margin-bottom: 0;
  font-family: Lato;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  font-size: 0.8em;
  line-height: 1.42857143;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #E7B089;
  background-color: #233342;
  border: 2px solid #E7B089;
  border-radius: 0.1em;
  width: 13em; height: 4em;
}
.btn-sbmt:focus,
.btn-sbmt:active:focus,
.btn-sbmt.active:focus,
.btn-sbmt.focus,
.btn-sbmt:active.focus,
.btn-sbmt.active.focus {
  outline: 0px auto -webkit-focus-ring-color;
  outline-offset: 0px;
}
.btn-sbmt:focus,
.btn-sbmt.focus {
  color: #233342;
  background-color: #E7B089;
}
.btn-sbmt:hover {
  color: #233342;
  background-color: #E7B089;
}
.btn-sbmt:active,
.btn-sbmt.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.125);
}

.btn-sbmt:active,
.btn-sbmt.active,
.open > .dropdown-toggle.btn-sbmt {
  color: #233342;
  background-color: #E7B089;
}


.sbmt-txt{
  margin-top: 1em;
}

.btn-back2top{
  margin-left: 15%; font-size: 1em;
}

.dot {
  top: 30vh;
  left: 6vw;
  margin-left: 0.5em;
  position: fixed;
  height: 2vh;
  width: 2vh;
  background-color: #233342;
  border-radius: 100%;
  border: 2px solid #E7B089;
  display: inline-block;
  cursor: pointer;
  z-index: 11;
}
.is-selected {
  animation: anim_s 1s;
  animation-fill-mode: forwards;
}
.is-deselected {
  animation: anim_d 1s;
  animation-fill-mode: forwards;
}

@keyframes anim_s {
  from {}
  to {background-color: #E7B089;}
}
@keyframes anim_d {
  from {background-color: #E7B089;}
  to {}
}

.scrll_arrw{
  position: fixed;
  top: 85vh;
  left: 6vw;
}
.arrow{
  position: relative;
  width: 0; 
  height: 0; 
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  border-top: 1em solid #E7B089;
}
.scrll{
  position: relative;
  padding-bottom: 0.5em;
  font-family: Lato;
  font-style: normal;
  font-weight: normal;
  font-size: 0.9em;
  color: #E7B089;
}

.scrll_arrw2{
  position: fixed;
  top: 85vh;
  font-size: 0.7em;
}
.scrll2{
  position: relative;
  font-family: Lato;
  font-style: normal;
  font-weight: normal;
  font-size: 1rem;
  line-height: 5em;
  color: #E7B089;
}

.bounce {
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  animation: bounce 3.6s ease infinite;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  5.55556% {
    transform: translateY(0);
  }
  11.11111% {
    transform: translateY(0);
  }
  22.22222% {
    transform: translateY(-15px);
  }
  27.77778% {
    transform: translateY(0);
  }
  33.33333% {
    transform: translateY(-15px);
  }
  44.44444% {
    transform: translateY(0);
  }
  100% {
    transform:  translateY(0);
  }
}
._line{
  height:2.5em;
  border-bottom: 0.1em solid #E7B089;
  top: 10vh;
  position: fixed;
}
._line0{
  height:2.5em;
  border-bottom: 0.1em solid #E7B089;
  top: 10vh;
  position: fixed;
}
._line1{
  height:2.5em;
  border-bottom: 0.1em solid #E7B089;
  top: 10vh;
  position: fixed;
}
._line2{
  height:2.5em;
  border-bottom: 0.1em solid #E7B089;
  top: 10vh;
  position: fixed;
}
._line3{
  height:2.5em;
  border-bottom: 0.1em solid #E7B089;
  top: 10vh;
  position: fixed;
}
._line4{
  height:2.5em;
  border-bottom: 0.1em solid #E7B089;
  top: 10vh;
  position: fixed;
}
.header .menu-btn {
  display: none;
}

/* --------------------- */

.mobile_nav {
  background: #233342;
  width: 15em;
  height: 100vh;
  position: fixed;
  top: 0vh;
  right: -15em;
  display: none;
  transition: all 0.5s;
  z-index: 1;
}

.active {
  right: 0em;
  transition: all 0.5s;
}

.mobile_nav ul {
  padding: 10vh 0;
  transition: all 0.5s;
}

.mobile_nav li {
  color: #E7B089;
  text-align: center;
  height: 3em;
  padding-top: 1em;
  font-family: PublicoText;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.5s;
  list-style-type: none;
}

.button1 {
  width: 5em;
  height: 3em;
  position: absolute;
  top: 10%;
  right: 15em;
  cursor: pointer;
  border: 0px;
  outline: none;
}

.button1 span {
  position: absolute;
  background: #E7B089;
  width: 1.5em;
  height: 0.1em;
  display: block;
  top: 45%;
  transition: all 0.5s;
}

.button1 span:before {
  content: '';
  background: #E7B089;
  width: 1.5em;
  height: 0.1em;
  display: block;
  position: absolute;
  top: -0.5em;
  transition: all 0.5s;
}

.button1 span:after {
  content: '';
  background: #E7B089;
  width: 1.5em;
  height: 0.1em;
  display: block;
  position: absolute;
  top: 0.5em;
  transition: all 0.5s;
}

.button1.btn span {
  background: transparent;
  transition: all 0.5s;
}

.button1.btn span:before {
  transform: rotate(45deg);
  top: 0;
  transition: all 0.5s;
}

.button1.btn span:after {
  transform: rotate(-45deg);
  top: 0;
  transition: all 0.5s;
}

.mobile_selected {
  animation: m_anim_s 1s;
  animation-fill-mode: forwards;
}
.mobile_deselected {
  animation: m_anim_d 1s;
  animation-fill-mode: forwards;
}

@keyframes m_anim_s {
  from {}
  to {background-color: #E7B089; color: #1c2936;}
}
@keyframes m_anim_d {
  from {background-color: #E7B089; color: #1c2936;}
  to {}
}



/* --------------------*/


@media only screen and (max-width: 1081px) {
  
  .logo{
    top: 5vh;
  }
  .nav-bar{
    display: none;
  } 
  .banaag1{
    position: fixed;
    top: 5vh;
  }
  .dot{
    display: none;
  }
  .covid {
    position: absolute;
    height: auto;
    width: 80vw;
    left: 10%;
    right: 10%;
    top: 30%;
    z-index: -100;
  }
  .title-sub {
    padding-top: 90%;
  }
  .hdr-2-titles{
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    text-align: center;
  }
  .hdr-title{
    font-family: PublicoText;
    font-style: normal;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    font-size: 10vw;
    letter-spacing: 0.5em;
    line-height: 1em;
    padding-left: auto;
    padding-right: auto;
    text-align: center;
  }
  .hdr-title2{
    font-family: PublicoText;
    font-style: normal;
    font-weight: normal;
    font-size: 0.8em; 
    letter-spacing: 0.7em;
    color: #FFFFFF;
    line-height: 1em;
    text-align: center;
  }
  .hdr-sub{
    justify-content: center;
    top: 0%;
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    font-size: 0.5em;
    letter-spacing: 0.2em;
  }
  .container{
    display: flexbox;
  }
  .row {
    justify-content: left; 
    /*margin-left: 20vw;*/
  }
  .bdy-title, .bdy-gdlns{
    font-size: 2.5em;
    /*margin-left: 4.5vw;*/
  }
  .bdy-title2{
    /*font-size: 1.7em;
    left: 8.5%;*/
    font-size: 2.5em;
  }
  .bdy-gdlns-txt{
    font-size: 1.1em;
    margin-bottom: 20vh;
    /*margin-left: 5vw;*/
  }
  .bdy-txt, .bdy-txt2{
    font-size: 1.1em;
    padding-left: 1em;
    /*margin-left: 5vw;*/
  }
  .bdy-note{
    /*font-size: 0.5em;*/
    margin-bottom: 20vh;
  }
  .sbmt-title{
    justify-self: left;
    font-size: 3em; 
    line-height: 1em;
    /*margin-left: 10vw;*/
    top: -5%;
  }
  .sbmt-txt{
    /*margin-left: 10vw; */
    margin-top: 0em;
    top: -8%;
  }
  .btn-back2top{
    margin-left: 5%; 
    font-size: 0.5em;
  }
  .mobile_nav {
    position: fixed;
    width: 15em;
    top: -5vh;
    right: -15em;
    height: 150vh;
    display: block;
    transition: all 0.5s;
    background-color: #1c2936;
    z-index: 11;
  }
  .active {
    right: 0em;
    transition: all 0.5s;
  }
  .mobile_nav ul {
    padding: 17vh 0;
    transition: all 0.5s;
  }
  .button1{
    position: fixed;
    top: 5vh;
    right: 0em;
  }
  .button1 span {
    right: 30%;
  }
  .scrll_arrw2{
    font-size: 0.8rem;
  }
  #scrll1{
    display: none;
  }
  #scrll2{
    display: block;
    margin-left: -0.05em;
  }
}