* { box-sizing: border-box; }
.video-background {
  background: #000;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -99;
  opacity: 0; 
  animation: fadeInAnimation 2s ease-in-out forwards;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0; 
  }
  to {
    opacity: 1; 
  }
}

.indexTxt {
  opacity: 0; 
  animation: fadeInAnimation 3s ease-in-out forwards;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0; 
  }
  to {
    opacity: 1; 
  }
}

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#vidtop-content {
	top: 0;
	color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;}
a {
color: inherit;
    text-decoration: none !important;
}



.center {
font-family: 'Montserrat', sans-serif;


  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
    animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}

input {
  background: rgba(255,255,255,0.3);
  border: none;
  position: relative;
  display: block;
  outline: none;
  width: 310px;
  height: 30p;
  margin: 0 auto;
  padding: 10px;
  color: rgb(19, 19, 19);
  -webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,0.5);
  box-shadow: 0 2px 10px 1px rgba(0,0,0,0.5);
  text-align: center;
}
::-webkit-input-placeholder { color: rgb(46, 46, 46);} 
:-moz-placeholder { color: rgb(46, 46, 46);}
::-moz-placeholder { color: rgb(46, 46, 46);}
:-ms-input-placeholder { color: rgb(46, 46, 46);}

.frackH1 {
  letter-spacing: 4px; 
  font-size: 30px;
}

.backHome2 {
  font-family: 'Montserrat', sans-serif;
  position: fixed;
  top: 85%;
  left: 50%;
  font-size: 14px;
  color: rgb(167, 167, 167);
  

  transform: translate(-50%, -50%);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}


.btn-outline-secondary:hover {
transition: 400ms;
}

nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: #333;
  padding: 10px;
}


.headerLogin {
  position: fixed;
  top: 4.2%;
  left: 97%;
  font-size: 26px;
  color: rgb(255, 255, 255);
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  transform: translate(-50%, -50%);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

.headerLogin:hover {
  position: fixed;
  top: 4.2%;
  left: 97%;
  font-size: 26px;
  text-decoration: none;
  color: white;
  transition: 200ms;
  transform: translate(-50%, -50%);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

.headerLogin2 {
  position: fixed;
  top: 4.2%;
  left: 93.5%;
  font-size: 26px;
  color: rgb(255, 255, 255);
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  transform: translate(-50%, -50%);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

.headerLogin2:hover {
  position: fixed;
  top: 4.2%;
  left: 93.5%;
  font-size: 26px;
  text-decoration: none;
  color: white;
  transition: 400ms;
  transform: translate(-50%, -50%);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

.headerDatabase {
  position: fixed;
  top: 4.2%;
  left: 3%;
  font-size: 26px;
  color: rgb(255, 255, 255);
  padding: 4px;
  padding-left: 8px;
  padding-right: 8px;
  transform: translate(-50%, -50%);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

.headerDatabase:hover {
  position: fixed;
  top: 4.2%;
  left: 3%;
  font-size: 26px;
  text-decoration: none;
  color: white;
  transition: 200ms;
  transform: translate(-50%, -50%);
  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

@media (max-width: 1366px) {
  nav {
    flex-direction: column;
    align-items: flex-end;
  }

  .headerLogin{
    margin-right: 0px;
    margin-top: 10px;
  }
  .headerLogin2 {
    margin-left: -25px;
    margin-top: 10px;
  }
  .headerDatabase{
    margin-right: 0px;
    margin-top: 10px;
  }
}

.indexHoverText {
    color: white;
  }

.indexHoverText:hover {
    color: rgb(180, 180, 180);
    transition-duration: 0.25s;
}


@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

html, body {
    overflow: hidden;
    color: #fefeff;
  }
  body {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
  
  }
  canvas {
    width: 100%;
    height: 100%;
    z-index: -999999999;
    opacity: 0.7;
  }
  [class^="letter"] {
    -webkit-transition: opacity 3s ease;
    -moz-transition: opacity 3s ease;
    transition: opacity 3s ease;
  }
  .letter-0 {
    transition-delay: 0.2s;
  }
  .letter-1 {
    transition-delay: 0.4s;
  }
  .letter-2 {
    transition-delay: 0.6s;
  }
  .letter-3 {
    transition-delay: 0.8s;
  }
  .letter-4 {
    transition-delay: 1.0s;
  }
  .letter-5 {
    transition-delay: 1.2s;
  }
  .letter-6 {
    transition-delay: 1.4s;
  }
  .letter-7 {
    transition-delay: 1.6s;
  }
  .letter-8 {
    transition-delay: 1.8s;
  }
  .letter-9 {
    transition-delay: 2.0s;
  }
  .letter-10 {
    transition-delay: 2.2s;
  }
  .letter-11 {
    transition-delay: 2.4s;
  }
  .letter-12 {
    transition-delay: 2.6s;
  }
  .letter-13 {
    transition-delay: 2.8s;
  }
  .letter-14 {
    transition-delay: 3.0s;
  }
  .letter-15 {
    transition-delay: 3.2s;
  }

  .gangN {
    margin-top: 22px;
  }

  .backgangN {
    margin-top: 30px;
  }


.indexButtons {
  padding: 0px;
  margin: 0px;
  position: relative;
  top: 40px;
}

.h1Custom {
  text-decoration: none;
  color: inherit;
  cursor: default;
}

.h1Custom:hover {
  cursor: default; 
}