* {
  margin: 0;
  padding: 0;
  color: #FFF;
  background-color: #000;
  /*overflow: hidden;*/
}

body {
  font-size: 16px;
  font-family: "Vibur", sans-serif;
}

div.rescheduled {
  position: fixed;
  top: 18rem;
  transform: rotate(334deg);
  font-size: 5em;
  background: rgb(248 243 243 / 23%);
  left: 2rem;
  color: #ff0000;
  padding: 0.25em;
  border-radius: 0.3em;
  font-weight: bold;
  white-space: nowrap;
}

.legionLearning {
  text-align: center;
}

.legionLearning img {
  position: relative;
  /*
  background-image: url(/images/legion.png);
  background-size: cover;
  */
  opacity: .35;
  height: 1000px;
  width: 1000px;
}

.text div {
  background-color: transparent !important;
}

.text {
  position: relative;
  top: -266px;
  background-color: transparent !important;
  width: 600px;
  text-align: center;
  margin: 0 auto;
}

body.latest,
body.postmeeting {
  overflow: hidden;
}

.postmeeting img {
  width: 100vh;
  height: 100vh;
}

.postmeeting .legionnairemeeting.text {
  font-size: 6em;
}

.postmeeting .text {
  width: 100vw;
  font-size: 7em;
  /* Vertically center */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

.canceled {
  position: absolute;
  z-index: 1000;
  color: red;
  transform: rotate(-45deg);
  text-align: center;
  width: auto;
  padding: 16px;
  font-size: 90px;
  top: 40%;
  right: 20%;
  left: 18%;
  background-color:rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}

.commander {
  position: absolute;
  z-index: 1000;
  color: red;
  text-align: center;
  width: auto;
  padding: 16px;
  font-size: 100px;
  top: 65%;
  right: 26%;
  background-color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
  border-radius: 10px;
}

.bold {
  font-weight: bold;
}

.fullWidth {
  width: 100%;
}

.hidden {
  display: none;
}

.meetings {
  margin: 0 auto;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 84%;
}

ul {
  list-style-position: outside;
  text-align: left;
  margin: 0 auto;
}

ul li {
  margin-bottom: 30px;
  font-size: 40px;
}
 
.center {
  margin: 0 auto;
  text-align: center;
}

.big {
  font-size: 96px;
}

.imgLatest {
  position: relative;
  top: -175px;
  width: 60%;
  height: 60%;
}

.imgBox {
  display: grid;
  height: 100%;
}

.verticallyCenter {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

.centerFit {
  max-width: 100%;
  max-height: 100vh;
  margin: auto;
}

.marginTop {
  margin-top: 50px;
}

.marginBottom {
  margin-bottom: 50px;
}

.uppercase {
  text-transform: uppercase;
}

.normalText {
  text-transform: none;
}

.offsetTop75 {
  position: relative;
  top: 75px;
}

.offsetTop {
  position: relative;
  top: 175px;
}

.ledOffsetTop {
  position: relative;
  top: 250px !important;
} 

body.meetings {
  overflow: scroll;
}

body.meetings .offsetTop {
  position: relative;
  top: 100px;
}

body.meetings h1 {
  font-size: 80px;
  margin-bottom: 100px;
}

body.meetings ul {
  width: 100vw;
  position: relative;
  left: -125px;
}

body.meetings ul li {
  font-size: 70px;
}

.ledCanvas,
.ledDiv {
  border: 2px solid gray;
  border-radius: 8px;
  /*left: 25px;*/
  position: relative;
  width: 95vw;
}

.ledContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
}

.animate-character
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #fff800 0%,
    #ff1361 29%,
    #44107a 67%,
    #ff4f00 100%
/*
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
*/
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  animation: textclip 4s linear infinite;
  display: inline-block;
}

@keyframes textclip {
  to {
    background-position: -200% center;
  }
}

.neonText {
  color: #fff;
  text-shadow:
    0 0 7px #fff,
    0 0 10px #fff,
    0 0 21px #fff,
    0 0 42px #0fa,
    0 0 82px #0fa,
    0 0 92px #0fa,
    0 0 102px #0fa,
    0 0 151px #0fa;
}

/* https://codepen.io/DevchamploO/pen/NBWBGq */
.neon {
  font-family: 'Monoton', cursive;
  font-size:64px;
  color: #FFD5FF;
  margin: 0 auto;
  font-weight: 400;
  letter-spacing: 8px;
  text-shadow: 1px 0px 4px #FFD5FF, 2px 0px 4px #FFD5FF, 3px 0px 4px #FFD5FF, 2px 0px 3px #D42CCA, 2px 3px 15px #D42CCA, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #D42CCA,40px 0vw 200px #D42CCA;
}

.blue .flicker-slow,
.blue .flicker-fast,
.neon.blue {
  color: #afffe3 !important;
  text-shadow: 1px 0px 4px #AFB4FF, 2px 0px 4px #AFB4FF, 3px 0px 4px #AFB4FF, 2px 0px 3px #A66CFF, 2px 3px 15px #A66CFF, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #A66CFF,40px 0vw 200px #A66CFF;
}

.flicker-slow {
  background-color: transparent;
  animation: flicker 3s linear infinite;
  color: #FFD5FF;
  text-shadow: 1px 0px 4px #FFD5FF, 2px 0px 4px #FFD5FF, 3px 0px 4px #FFD5FF, 2px 0px 3px #D42CCA, 2px 3px 15px #D42CCA, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #D42CCA,40px 0vw 200px #D42CCA;
}

.flicker-fast {
  background-color: transparent;
  animation: flicker 1s linear infinite;
  color: #FFD5FF;
  text-shadow: 1px 0px 4px #FFD5FF, 2px 0px 4px #FFD5FF, 3px 0px 4px #FFD5FF, 2px 0px 3px #D42CCA, 2px 3px 15px #D42CCA, 2px 0px 15px, 5px 0px 125px, 20px 0vw 200px #D42CCA,40px 0vw 200px #D42CCA;
}

@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: .99;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.4;
  }
}

@keyframes neonspark  { 
  0% { text-shadow: none; }
  30% { text-shadow: 0 0 30px rgba(255,0,84,0.6); }
  60% {
    text-shadow: 0 0 30px rgba(255,0,84,0.6), 0 0 60px rgba(255,0,84,0.4); 
  }
  80% { text-shadow: none; }
  100% { 
    text-shadow: 0 0 30px rgba(255,0,84,0.6),
      0 0 60px rgba(255,0,84,0.4),
      0 0 100px rgba(255,0,84,0.2),
      0 0 90px rgba(255,0,84,0.1);
  }
}

@font-face{
  font-family:'Neon80sRegular';
  src: url('/fonts/neon-webfont.woff') format('woff');
  font-weight:normal;
  font-style:normal;
}

.neon-tubing {
  padding: 6rem;
  text-align: center;
  color: rgba(255,200,200,0.8);
  font-family: Neon80s, sans-serif;
  font-size: 11rem; letter-spacing: 2rem;
  /*background: url(brick-wall-texture-faded.jpg);*/
  /*background-size: cover;*/
}

.neon-tubing { 
  margin: 0;
  font-weight: 100;
  /*
  background-image: radial-gradient(ellipse farthest-corner,rgba(0,0,0,0),rgba(0,0,0,0)),
    url(//thenewcode.com/assets/images/brick-wall-texture-faded.jpg);
  */
  text-align: center;
  font-family: Neon80sRegular, sans-serif;
  color: #fee;
  padding: 4rem;
  text-transform: uppercase;
  font-size: 4rem; 
  letter-spacing: 2rem;
  animation: neonspark 1s 3s forwards;
  text-shadow: 
    0 0 20px rgba(255,0,84,0.6),
    0 0 40px rgba(255,0,84,0.4),
    0 0 60px rgba(255,0,84,0.2),
    0 0 80px rgba(255,0,84,0.1); 
}

.neon-tubing span { animation: neonspark 4s 3s infinite;  }

div.growImage {
  overflow: hidden;
}

div.growImage img {
  animation: growImage 25s;
}

@keyframes growImage {
  from {
    transform: scale(.8);
  }
  to {
    transform: scale(1.10);
  }
}

img.fullSize {
  height: 100vh;
}

/* Mobile Screen */
@media screen and (max-width: 63.9375em) {
  .postmeeting .text {
    font-size: 3em !important;
  }

  .big {
    font-size: 32px;
  }

  div.rescheduled {
    top:17rem;
    font-size: 1.5em;
    left: 1rem;
  }

  .commander {
    font-size: 63px;
    top: 35%;
    right: 0%;
  }

  .meetings {
    margin: 50px auto 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
  }
  ul {
    position: relative;
  }
  ul li {
    font-size: 24px;
  }

  .imgBox {
    display: inline-grid;
  }

  img {
    height: 75%;
  }

  img.fullSize {
    height: 100%;
  }

  .offsetTop {
    top: 50px;
  }

  .marginTop {
    margin-top: 0;
  }
  
  .marginBottom {
    margin-bottom: 0;
  }

  .imgLatest {
    position: relative;
    top: 0;
    width: 90%;
    height: 90%;
  }
}

/* Legion TV Screen */
@media screen and (min-width: 75em) and (max-width: 85em) {
  *.latest {
    overflow: hidden;
  }
  .ledOffsetTop {
    position: relative;
    top: 250px !important;
  } 
  .ledContainer {
    display: relative;
    left: -8px;
  }
  .offsetTop {
    top: 50px;
  }
  .big {
    font-size: 48px;
  }
  .meetings {
    margin: 30px auto 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
  }
  ul {
    position: relative;
  }
  ul li {
    font-size: 48px;
  }
  img {
    height: 100%;
  }
  .marginTop {
    margin-top: 25px;
  }
  .marginTop {
    margin-top: 50px;
  }
  .imgLatest {
    top: -100px;
  }
}

/* 4k Screen */
@media screen and (min-width: 200em) {
  .big {
    font-size: 128px;
  }
  img {
    height: 100%;
  }
  .marginTop {
    margin-top: 275px;
  }
}

@media screen and (max-width: 1080px) {
  .postmeeting .text {
    font-size: 5em;
  }
}

/* Small only <640 */
@media screen and (max-width: 39.9375em) {
  body.meetings h1 {
    font-size: 3em;
    margin-bottom: 0;
  }

  body.meetings ul {
    width: 90vw;
    list-style-type: none;
    left: 0;
  }

  body.meetings ul li {
    font-size: 2rem;
  }

  .meetings > div.offsetTop,
  .meetings > div {
    top: 0;
  }
  .meetings {
    position: relative;
    left: 0;
    transform: none;
    width: auto;
  }
}

/* TV */
@media screen and (width: 1920px) and (height: 1080px) {
  body.meetings {
    overflow: hidden;
  }
}