@font-face {
  font-family: "gills";
  src: url('fonts/gillsans.otf');
}


*{
font-family:'gills', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin:0;
box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  /*necessary for Brave*/
  overflow: hidden;
  height:100%;
}

body {
    width:100vw;
    height: 100vh;
    overflow: hidden;
    background-color:black;
    position: relative;
}

.mainbg {
  position: absolute;
  z-index:0;
  height: 4000px;
  top:-1500px;
  right: -1500px;
  background-repeat: repeat;
  background-image: url('../images/bg/mainbg.webp');
  animation: main 30s linear infinite;
  width:4000px;
}

@keyframes main {
  0% {
    transform: translate(0px,0px) rotate(-5deg);
  }
  90% {
    opacity:100%
    }
    100% {
      transform: translate(-1000px,1000px) rotate(-5deg);
      opacity: 0
    }

}

.stnbg {
  position: absolute;
  width:100vw;
  height: 100vh;
  z-index:0;
  background-image: url('../images/bg/stn.gif');
  background-size: cover;
}

.graphbg {
  position: absolute;
  width:3300px;
  height: 3300px;
  z-index:0;
  background-image: url('../images/bg/graph.webp');
  background-size: auto;
  animation: graph 50s linear infinite;
}

.tmgmbg {
  position: absolute;
  z-index:0;
  height: 100vh;
  background-image: url('../images/bg/city-1.gif');
  background-size: cover;
  width:100vw;
  z-index:-2;
  
}

@keyframes graph {
  0% {
    transform: translate(-1100px,0px);
  }
  100% {
      transform: translate(0px, -1100px);
    }
}


#overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.logo-icon {
    position: absolute;
    right:10px;
    top:0;
    width: 150px;
    z-index: 99;
}

.logo-back {
    position: absolute;
    right:-20px;
    top:-80px;
    width: 0; 
    height: 0; 
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 100px solid black;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
  }

.sect-logo {
  width:240px;
  position: relative;
  top: -130px;
  margin-bottom: -100px;
  transform: rotate(1deg);
}

.top {
    height: calc(100vh - 575px);
}

.info{

-webkit-transform: rotate(1.5deg);
-ms-transform: rotate(1.5deg);
transform: rotate(1.5deg);
position: relative;
z-index:1;
}

.info-sect{
position: relative;
left:-10px;
height:200px;
width:120vw;
background-color: white;
border-top:solid 5px #ffee00;
}

.text-sect{
    width: calc(100vw - 700px);
    margin-left:4%;
    margin-top: 5px;
    -webkit-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
    transform: rotate(-1.5deg);   
}

.main-text-sect{
  width:80% !important;
}

.text-header{
 font-size:28pt;
 color:#ffee00;
 font-weight:600;
 margin-bottom: 20px;
}

.text-subheader{
  font-size:16pt;
  color: #ffee00;
 }

.text-body {
font-size:12pt;
}

.left-align {
    text-align:left;
    padding-left:5%;
    padding-right: 5%;
}

.info-sel{
position: relative;
left:-10px;
width:120vw;
background-color: #ffee00;
border-bottom:solid 5px #ffee00;
}

.justify-content-end{
display:flex;
justify-content:end;
}


.img{
position: absolute;
bottom:0px;
right:0;
z-index: 2;
}

.img-overlay{
  height:0px;
  overflow:visible;
  pointer-events:none;
  background:none !important;
  }

#opt0 {
  width:70%;
  position: relative;
  top: -5px;
  display:block;
}

.footer{
   color: white;
   position: absolute;
   bottom: 0vh;
}

 /* Popup container */
 .popup {
    position: absolute;
    top: 15vh;
    display: inline-block;
    cursor: pointer;
  }

  /* The actual popup (appears on top) */
  .popup .popuptext {
    visibility: hidden;
    width: 90vw;
    height:80vh;
    background-color: rgba(0,0,0,.9);
    border:2px solid #ffee00;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    left: 5vw;
    z-index: 1;
  }
  

  
  /* Toggle this class when clicking on the popup container (hide and show the popup) */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    overflow: scroll;
  }

  .bdemail {
    color:white; 
    font-size:15pt
  }


 
  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  } 



/*Slider*/
  .slider {
      width: 40%;
  }

  .slick-slide {
    margin: 0px 0px;
  }

  .slick-slide img {
    width: 100%;
  }

  .slick-prev:before,
  .slick-next:before {
    color: black;
  }


  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
  }

  .char-sel {
border: solid 2px black;
  }
  
  .slick-active {
    opacity: .4;
  }

  .slick-current {
    opacity: 1;
  }

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
  }
.justify-content-center {
  -ms-flex-pack: center !important;
  justify-content: center !important;
  }

.flex-column {
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
  }

.pb-1,
.py-1 {
    padding-bottom: 0.25rem !important;
  }

.pt-2,
.py-2 {
  padding-top: 1em !important;
}

.pb-2,
.py-2 {
  padding-bottom: 1em !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3em !important;
}   

.pb-5,
.py-5 {
  padding-bottom: 3em !important;
} 

#stnvid {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -2;
}

@keyframes gb {
  0% {
    transform: translate(0px,0px);
  }
  50% {
      transform: translate(0px, 20px);
    }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes ship-float {
  0% {
    transform: translate(0px,0px);
  }
  40% {
      transform: translate(0px, 10px);
    }
  80% {
    transform: translate(0px, 0px);
  }
}

@keyframes bigger {
  0% {
    transform: scale(0,0);
  }
  100% {
      transform: scale(1,1);
    }
  }

  @keyframes ship {
    0% {
      transform: scale(0,0) translate(800px,-800px);
    }
    100% {
      transform: scale(1,1) translate(0px, 0px);
    }
  }


.gbclass {
padding-bottom: 80px;
transform: translate(0px, 0px);
animation: gb 3s linear infinite, bigger .5s linear;
}

.stnclass {
  padding-bottom: 170px;
  transform: translate(0px, 0px);
  animation: ship-float 2s linear infinite, ship .2s linear;
  }


/* btn glitch */
.btn-glitch,
.btn-glitch:after {
  width: 120px;
  Height:30px;
  font-size: 14px;
  font-family: 'Bebas Neue', sans-serif;
  background: linear-gradient(45deg, transparent 5%, #000000 5%);
  border: 0;
  margin-top:20px;
  color: #fff;
  letter-spacing: 3px;
  box-shadow: 6px 0px 0px #ffee00;
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.btn-glitch:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  
  content: 'LEARN MORE';
  display: block;
  position: absolute;
  top: -40;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 3%, #00E6F6 3%, #00E6F6 5%, #000000 5%);
  text-shadow: -3px -3px 0px #ffee00, 3px 3px 0px #00E6F6;
  clip-path: var(--slice-0);
}
.btn-glitch:hover {
  animation: 1s fade infinite;
  color:#ffee00;
  transform: rotate(-1.5deg);
}
@keyframes fade {
  0% {
    transform: translate(-2px, -2px);
  }
  10% {
    transform: translate(2px, 2px);
  }
  20% {
    transform: translate(-2px, 2px);
    opacity:50%;
  }
  30% {
    transform: translate(0px, 1px);
  }
  40% {
    transform: translate(-1px, 0px);
  }
  50% {
    transform: translate(1px, 0px);
    opacity:75%;
  }
  60% {
    transform: translate(1px, 1px);
  }
  70% {
    transform: translate(-2px, 2px);
  }
  80% {
    transform: translate(2px, -2px);
    opacity:75%;
  }
  90% {
    transform: translate(-2px, 0px);
  }
  100% {
    transform: translate(0);
  }
}


.btn-glitch:hover:after {
  animation: 1s glitch infinite;
  animation-timing-function: steps(2, end);
}

@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 5px);
  }
  70% {
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    transform: translate(10px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
  }
}

/* btn-85 */
.btn-sub {
  padding: 0.6em 2em;
  font-size:12pt;
  font-weight:600;
  border: none;
  outline: none;
  color: #6f6e6e;
  background: #2f2f2f;
  cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}


.button-85 {
  padding: 0.6em 2em;
  font-size:12pt;
  font-weight:600;
  border: none;
  outline: none;
  color: #ffffff;
  background: #ffee00;
  cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-85:hover {
  color: #ffee00;
}

.button-85:active:before {
  background: #ffee00;
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  border-radius: 20px;
}


.button-85::before {
  content: "";
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7300,
    #fffb00,
    #48ff00,
    #00ffd5,
    #002bff,
    #7a00ff,
    #ff00c8,
    #ff0000
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 400%;
  z-index: -1;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing-button-85 20s linear infinite;
  transition: opacity 0.3s ease-in-out;
  border-radius: 10px;
}

@keyframes glowing-button-85 {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  100% {
    background-position: 0 0;
  }
}

.button-85:after {
  z-index: -1;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  border-radius: 10px;
}

.btn-x {
  padding: .5em .5em;
  border: none;
  outline: none;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  z-index: 1;
  float:right;
  font-weight:800;
  font-size:22pt;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

@media (max-width: 1200px) {
  .info-sect{
      height:225px
    }
}

@media (max-width: 960px) {
  .img {
    display: none !important;
  }
  .info-sect{
      height:250px
    }
    .text-sect {
      width: 75%;
    }
    .slider {
      width: 60%;
  }
}


@media (max-width: 576px) { 
.slider {
  width: 90%;
}
.sect-logo {
  width: 120px;
}
.opt-sol-logo {
  display: none;
}
}

@media (max-width: 434px) { 
  .info-sect{
    height:325px
  }
  }


  _:default:not(:root:root), body {
    height: 100%;
  }

  @media screen and (max-device-width: 480px){
  .top {
    height: calc(100vh - 75%);
    }


  .logo-icon {
    width:300px;
  }
  .img {
    display: none !important;
  }
  .slider {
    width: 80%;
  }
  .slick-prev:before, 
  .slick-next:before {
    font-size: 50px;
  }
  .text-sect {
    width: 75%;
  }
  .text-body {
    font-size:24pt;
  }
  .info-sect{
    height:455px
  }
  .sect-logo {
    width: 400px;
    top: -200px;
  }
  .logo-back {
    right: -50px;
    top: -130px;
    border-top: 200px solid transparent;
    border-bottom: 200px solid transparent;
    border-right: 200px solid black;
    }

  .opt-sol-logo {
    display: none;
  }
  .btn-glitch {
    width: 240px;
    height: 60px;
    font-size: 28px;
  }
  .text-subheader {
    font-size: 24pt;
  }
  .bd-email {
    font-size: 24pt;
  }
  .footer {
    font-size: 24pt;
  }
  @media (max-height: 1200px) {
    body {
      height: 1200px;
    }
    .top {
      height: calc(1200px - 850px);
      }
      .opt-sol-logo {
        display: none;
      }
    }
  
}

@media only screen and (max-height: 700px) {
  .top {
    height: calc(100vh - 350px);
    }
    .opt-sol-logo {
      display: none;
    }
  }

  @media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
    .top {
      height: calc(100vh - 450px);
      }
      .info-sect{
        height:200px
      }
  }