* {
    padding: 0;
    margin: 0;
}

body,
html {
    width: 100%;
    height: 100%;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    hyphens: auto;
}

/* stop oversrolling */
html {
    overflow: hidden;
    scroll-behavior: smooth;
}

body {
    overflow: auto;
    background-color: black;
    font-size: 1em;
    hyphens: auto;
}

/* GENERAL */
.fontMonospaced { font-family: courier, monospace; }
.fontSansSerif { font-family: sans-serif; }

article {
    scroll-behavior: smooth;
}

iframe {
    border: none;
}

ul {
    list-style: none;
}

ul.list {
    list-style: initial;
    padding-left: 1em;
}

.preload {
    position: fixed;
    width: 50px;
    height: 50px;
    overflow: hidden;
    z-index: -1;
}

.backToIndex {
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 50px;
    padding: 7px;
    border-top-right-radius: 50%;
    background-color: rgba(88,150,255,1);
    opacity: 0;
    z-index: 999;
}
.backToIndex:hover {
    opacity: 1;
}
.backToIndex a:hover {
    color: white !important;
}
.shadow { box-shadow: rgba(0,0,0,0.5) 3px 5px 7px; }
.shadowHover:hover { box-shadow: rgba(0,0,0,0.5) 3px 5px 7px; }
.shadowLight { box-shadow: rgba(0,0,0,0.25) 3px 5px 7px; }
.shadowLightHover:hover { box-shadow: rgba(0,0,0,0.25) 3px 5px 7px; }

a:link,
a:visited,
a:focus {
  text-decoration: none;
  color: rgba(88,150,255,1);
  outline: none;
}

a:hover,
a:active {
  text-decoration: underline rgba(88,150,255,0.65) 3px;
  color: rgba(88,150,255,0.85);
}

a.active {text-decoration: underline rgba(88,150,255,0.65) 3px;
}

a:focus { outline: none; }

.pointer { cursor: pointer; }
.cursorDefault { cursor:default; }
.noCursor { cursor: none; }
.noUserSelect { user-select: none; }
.userSelect { user-select: text; }
.noPointerEvents { pointer-events: none; }
.allUnset, .resetStyles { all: unset; }

.noScrollbar::-webkit-scrollbar { display: none; }
.noScrollbar { scrollbar-width: none; }

.hover { opacity: 0.8; }
.hover:hover { opacity: 1; }
.noLiHover:hover { background-color: initial !important; }

/* VISIBILITY */
.hide { display: none; }
.show { display: block; }
.op100 { opacity: 1; }
.op90 { opacity: .9; }
.op75 { opacity: .75; }
.op50 { opacity: .5; }
.op25 { opacity: .25; }
.op10 { opacity: .1; }
.op0 { opacity: 0; }

/* SIZES */
.width100, .maxWidth { width: 100%; }
.height100, .maxHeight { height: 100%; }
.maxHeight50 {max-height: 50px; }
.maxHeight75 {max-height: 75px; }
.maxHeight100 {max-height: 100px; }
.maxHeight150 {max-height: 150px; }
.maxHeight175 {max-height: 175px; }
.maxHeight250 {max-height: 250px; }
.maxHeight300 {max-height: 300px; }
.maxHeight400 {max-height: 400px; }
.maxHeight500 {max-height: 500px; }
.maxHeight600 {max-height: 600px; }
.maxHeight800 {max-height: 800px; }

.maxWidth50 {max-width: 50px; }
.maxWidth75 {max-width: 75px; }
.maxWidth100 {max-width: 100px; }
.maxWidth150 {max-width: 150px; }
.maxWidth250 {max-width: 250px; }
.maxWidth300 {max-width: 300px; }
.maxWidth400 {max-width: 400px; }
.maxWidth500 {max-width: 500px; }
.maxWidth600 {max-width: 600px; }
.maxWidth800 {max-width: 800px; }


.minHeight50 {min-height: 50px; }
.minHeight75 {min-height: 75px; }
.minHeight100 {min-height: 100px; }
.minHeight150 {min-height: 150px; }
.minHeight250 {min-height: 250px; }
.minHeight300 {min-height: 300px; }
.minHeight400 {min-height: 400px; }
.minHeight500 {min-height: 500px; }
.minHeight600 {min-height: 600px; }
.minHeight800 {min-height: 800px; }

.minWidth50 {min-width: 50px; }
.minWidth75 {min-width: 75px; }
.minWidth100 {min-width: 100px; }
.minWidth150 {min-width: 150px; }
.minWidth250 {min-width: 250px; }
.minWidth300 {min-width: 300px; }
.minWidth400 {min-width: 400px; }
.minWidth500 {min-width: 500px; }
.minWidth600 {min-width: 600px; }
.minWidth800 {min-width: 800px; }

.overflowHidden { overflow: hidden; }
.overflowAuto { overflow: auto; }
.overflowAutoX, .overflowXAuto { overflow-x: auto; }
.overflowAutoY, .overflowYAuto { overflow-y: auto; }

.padding0 { padding: 0; }
.padding125 { padding: 0.125em; }
.padding25 { padding: 0.25em; }
.padding05, .padding50 { padding: 0.5em; }
.padding60 { padding: 0.6em; }
.padding75 { padding: 0.75em; }
.padding, .padding1 { padding: 1em; }
.padding1-50 { padding: 1.5em; }
.padding2 { padding: 2em; }
.padding3 { padding: 3em; }

.paddingX0 { padding-left: 0 !important; padding-right: 0 !important; }
.paddingX25 { padding-left: .25em; padding-right: .25em; }
.paddingX50 { padding-left: .5em; padding-right: .5em; }
.paddingX1 { padding-left: 1em; padding-right: 1em; }
.paddingX1-50 { padding-left: 1.5em; padding-right: 1.5em; }
.paddingX2 { padding-left: 2em; padding-right: 2em; }
.paddingX2-50 { padding-left: 2.5em; padding-right: 2.5em; }
.paddingX3 { padding-left: 3em; padding-right: 3em; }
.paddingX3-50 { padding-left: 3.5em; padding-right: 3.5em; }
.paddingX4 { padding-left: 4em; padding-right: 4em; }

.paddingY0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.paddingY50 { padding-top: .5em; padding-bottom: .5em; }
.paddingY25 { padding-top: .25em; padding-bottom: .25em; }
.paddingY1 { padding-top: 1em; padding-bottom: 1em; }
.paddingY1-50 { padding-top: 1.5em; padding-bottom: 1.5em; }
.paddingY2 { padding-top: 2em; padding-bottom: 2em; }

.paddingL0 { padding-left: 0 !important; }
.paddingL25 { padding-left: .25em; }
.paddingL50 { padding-left: .5em; }
.paddingL1 { padding-left: 1em; }
.paddingL1-50 { padding-left: 1.5em; }
.paddingL2 { padding-left: 2em }
.paddingL2-50 { padding-left: 2.5em; }
.paddingL3 { padding-left: 3em }
.paddingL3-50 { padding-left: 3.5em; }
.paddingL4 { padding-left: 4em }

.paddingR0 { padding-right: 0 !important; }
.paddingR25 { padding-right: .25em; }
.paddingR50 { padding-right: .5em; }
.paddingR1 { padding-right: 1em; }
.paddingR1-50 { right-left: 1.5em; }
.paddingR2 { padding-right: 2em }
.paddingR2-50 { right-left: 2.5em; }
.paddingR3 { padding-right: 3em }
.paddingR3-50 { right-left: 3.5em; }
.paddingR4 { padding-right: 4em }

.margin0 { margin: 0; }
.margin25 { margin: 0.25em; }
.margin05, .margin50 { margin: 0.5em; }
.margin60 { margin: 0.6em; }
.margin75 { margin: 0.75em; }
.margin, .margin1 { margin: 1em; }
.margin2 { margin: 2em; }
.margin3 { padding: 3em; }

.marginX25 { margin-left: .25em; margin-right: .25em; }
.marginX50 { margin-left: .5em; margin-right: .5em; }
.marginX1 { margin-left: 1em; margin-right: 1em; }
.marginX1-50 { margin-left: 1.5em; margin-right: 1.5em; }
.marginX2 { margin-left: 2em; margin-right: 2em; }
.marginX3 { margin-left: 3em; margin-right: 3em; }
.marginX4 { margin-left: 4em; margin-right: 4em; }
.marginX5 { margin-left: 5em; margin-right: 5em; }
.marginY50 { margin-top: .5em; margin-bottom: .5em; }
.marginY25 { margin-top: .25em; margin-bottom: .25em; }
.marginY1 { margin-top: 1em; margin-bottom: 1em; }
.marginY1-50 { margin-top: 1.5em; margin-bottom: 1.5em; }
.marginY2 { margin-top: 2em; margin-bottom: 2em; }

/* FONT STYLES */
p { margin-bottom: 1em; }
hr { border-color: rgba(255,255,255,.3); margin: 0; } 
.xlarge { font-size: 3em; }
.large { font-size: 2em; }
.big { font-size: 1.75em; }
.medium { font-size: 1.5em; }
.moderate { font-size: 1.25em; }
.normal { font-size: 1em; }
.small { font-size: .75em; }
.tiny { font-size: .6em; }
.bodySize { font-size: 1rem; }
.bold { font-weight: bolder; }
.normalWeight { font-weight: normal; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normalized { text-transform: initial; }
.italics { font-style: italic; }
.italics.bold, .bold.italics {
    font-weight: bolder;
    font-style: italic;
}
.underline {
    text-decoration: underline;
}
.nobr { white-space: nowrap; }
.ellipsis { text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; }
.whiteSpace { white-space: pre-wrap; }

/* POSITION */
.fixed { position: fixed;}
.absolute { position: absolute; }
.relative { position: relative; }
.flex { display: flex; }
.top { position: absolute; top: 0; }
.right { position: absolute; right: 0; }
.bottom { position: absolute; bottom: 0; }
.left { position: absolute; left: 0; }
.centerContent:not(.hide) {
    display: flex;
    align-items: center;
    justify-content: center;
}
.centerContentX {
    display: flex;
    justify-content: center;
}
.centerContentYRight {
    display: flex;
    align-items: center;
    justify-content: right;
}
.centerContentY {
    display: flex;
    align-items: center;
    justify-content: left;
}
.inline { display: inline; }
.inlineBlock { display: inline-block; }
.block { display: block; }
.borderBox { box-sizing: border-box; }
.alignRight { text-align: right; }
.alignLeft { text-align: left; }
.alignCenter, .centerText { text-align: center; }
.valign, .valignMiddle, .valignCenter, .vertAlign, .verticalAlign { vertical-align: middle; }
.valignTop { vertical-align: top; }
.valignBottom { vertical-align: bottom; }
.valignText { vertical-align: text-top; }

/* EDGES */
.round, .circle { border-radius: 50%; }
.radius2 { border-radius: 2px; }
.radius3 { border-radius: 3px; }
.radius4 { border-radius: 4px; }
.radius5 { border-radius: 5px; }
.radius8 { border-radius: 8px; }
.radius10 { border-radius: 10px; }


/* TRANSFORMERS */
.flipX, .mirrorX { transform: scaleX(-1); }
.flipY, .mirrorY { transform: scaleY(-1); }
.rotate45 { transform: rotate(45deg); }
.rotate90 { transform: rotate(90deg); }
.rotate180 { transform: rotate(180deg); }
.rotate270 { transform: rotate(270deg); }
.rotate-45, .rotate315 { transform: rotate(315deg); }

/* COLORS */
.red { color: rgba(255,80,80,1) !important; }
.green { color: rgb(150, 255, 80) !important; }
.blue { color: rgba(88,150,255,1) !important; }
.cyan { color: cyan !important; }
.grey, .gray { color: grey !important; }
.middleGrey, .darkGray { color: rgb(70, 70, 70) !important; }
.darkGrey, .darkGray { color: rgb(35, 35, 35) !important; }
.black { color: #000000 !important; }
.white { color: white !important; }
.yellow { color: yellow !important; }
.clear, .transparent { color: rgba(0,0,0,0) !important; }
.blackTransparent { color: rgba(0,0,0,0.3) !important; }
.whiteTransparent { color: rgba(255,255,255,0.3) !important; }

.redBg { background-color: rgba(255,80,80,1) !important; }
.greenBg { background-color: rgb(150, 255, 80) !important; }
.blueBg { background-color: rgba(88,150,255,1) !important; }
.greyBg, .grayBg { background-color: grey !important; }
.middleGreyBg, .middleGrayBg { background-color: rgb(70, 70, 70) !important; }
.darkGreyBg, .darkGrayBg { background-color: rgb(35, 35, 35) !important; }
.blackBg { background-color: black !important; }
.whiteBg { background-color: white !important; }
.yellowBg { background-color: rgb(255, 235, 84) !important; }
.clearBg { background-color: rgba(0,0,0,0) !important; }
.blackBgTransparent { background-color: rgba(0,0,0,0.3) !important; }
.blackDarkBgTransparent { background-color: rgba(0,0,0,0.6) !important; }
.whiteBgTransparent { background-color: rgba(255,255,255,0.3) !important; }

.tintRed { filter: brightness(0.5) sepia(100%) hue-rotate(310deg) saturate(800%); }
.tintGreen { filter: brightness(0.5) sepia(100%) hue-rotate(90deg) saturate(330%); }
.tintLightGreen { filter: brightness(1) sepia(100%) hue-rotate(90deg) saturate(330%); }
.tintBlue { filter: brightness(0.5) sepia(100%) hue-rotate(180deg) saturate(250%); }
.tintPink { filter: brightness(0.5) sepia(100%) hue-rotate(310deg) saturate(250%); }
.tintYellow { filter: brightness(0.8) sepia(100%) hue-rotate(0deg) saturate(250%); }
.tintLightBlue { filter: brightness(1) sepia(100%) hue-rotate(180deg) saturate(330%); }
.tintOrange { filter: brightness(1) sepia(100%) hue-rotate(-30deg) saturate(330%); }
.tintBrown { filter: brightness(1) sepia(100%) hue-rotate(-15deg) saturate(330%); }
.tintBlack { filter: brightness(0) saturate(0%); }
.tintWhite { filter: brightness(100) saturate(0%); }

.text-stroke--black,
.text-outline--black { 
    text-shadow:
    -1px -1px 0 black, /* Top-left shadow */
    0px -1px 0 black, /* Top shadow */
    1px -1px 0 black,  /* Top-right shadow */
    1px 0px 0 black,  /* Right shadow */
    1px 1px 0 black,   /* Bottom-right shadow */
    0px 1px 0 black,  /* Bottom shadow */
    -1px 1px 0 black,  /* Bottom-left shadow */
    -1px 0px 0 black; /* Left shadow */
  }

.text-shadow--black { 
    text-shadow:
     -1px -1px 1px #000,  
      1px -1px 1px #000,
      -1px 1px 1px #000,
       1px 1px 1px #000;
  }
  
  .text-shadow--grey50 { 
    text-shadow:
     -1px -1px 1px rgba(125,125,125,.50),  
      1px -1px 1px rgba(125,125,125,.50),
      -1px 1px 1px rgba(125,125,125,.50),
       1px 1px 1px rgba(125,125,125,.50);
  }
  
  .text-shadow--white { 
    text-shadow:
     -1px -1px 1px #fff,  
      1px -1px 1px #fff,
      -1px 1px 1px #fff,
       1px 1px 1px #fff;
  }

.invert {
    filter: invert(1);
}

.invertKeepColors {
    filter: invert(1) hue-rotate(180deg);
}

/* BORDERS */
.blackBorder { border: thin solid black !important; }
.whiteBorder { border: thin solid white !important; }
.greyBorder { border: thin solid grey !important; }
.greyBorderLight { border: thin solid lightgrey !important; }
.greyBorderLightTop { border-top: thin solid lightgrey !important; }
.greyBorderLightRight { border-right: thin solid lightgrey !important; }
.greyBorderLightBottom { border-bottom: thin solid lightgrey !important; }
.greyBorderLightLeft { border-left: thin solid lightgrey !important; }
.redBorder { border: thin solid rgba(255,80,80,1) !important; }
.blueBorder { border: thin solid rgba(88,150,255,1) !important; }
.clearBorder { border: thin solid rgba(0,0,0,0); }

.dottedGrey {
    /* Adjust "50%" to skew relation between spaces and slashes: 25%=short slashes, 50%=eqal, 75%=long slashes */
    background: linear-gradient(to right, grey 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(grey 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to right, grey 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(grey 50%, rgba(255, 255, 255, 0) 0%);
    background-position: top, right, bottom, left;
    background-repeat: repeat-x, repeat-y;
    /* Adjust horz.slash/space-size, horz thickness, vert.slash/space-size, vert thickness: */
    background-size: 8px 1px, 1px 8px;
}

.dottedWhite {
    /* Adjust "50%" to skew relation between spaces and slashes: 25%=short slashes, 50%=eqal, 75%=long slashes */
    background: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(white 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(white 50%, rgba(255, 255, 255, 0) 0%);
    background-position: top, right, bottom, left;
    background-repeat: repeat-x, repeat-y;
    /* Adjust horz.slash/space-size, horz thickness, vert.slash/space-size, vert thickness: */
    background-size: 8px 1px, 1px 8px;
}

.dottedBlack {
    /* Adjust "50%" to skew relation between spaces and slashes: 25%=short slashes, 50%=eqal, 75%=long slashes */
    background: linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(black 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(to right, black 50%, rgba(255, 255, 255, 0) 0%),
    linear-gradient(black 50%, rgba(255, 255, 255, 0) 0%);
    background-position: top, right, bottom, left;
    background-repeat: repeat-x, repeat-y;
    /* Adjust horz.slash/space-size, horz thickness, vert.slash/space-size, vert thickness: */
    background-size: 8px 1px, 1px 8px;
}

/* INPUTS */
button:focus,
select:focus,
textarea:focus,
input:focus { outline: none; }

input[type=text],
input[type=password],
input[type=number] {
    padding: .25em;
    box-sizing: border-box;
}

textarea {
    font-family: inherit;
    border: none;
    resize: vertical;
    padding: .25em;
    box-sizing: border-box;
}

.systemButton:not(.clear) {
    border: none;
    height: 2em;
    padding: .2em 1.5em;
    border-radius: 1em;
    color: white;
    background-color: rgba(88,150,255,1);
    font-family: Roboto, 'Courier New', Courier, monospace;
    opacity: 0.8;
}

.systemButton:not(.clear):hover {
    cursor: pointer;
    /* background-color: rgba(88,150,255,.85); */
    opacity: 1;
}

.systemButton i {
    vertical-align: center;
}


.nudge-y-06 { transform: translateY(0.06em); }
.nudge-y-12 { transform: translateY(0.12em); }
.nudge-y-25 { transform: translateY(0.25em); }
.nudge-y-30 { transform: translateY(0.30em); }
.nudge-y-35 { transform: translateY(0.35em); }
.nudge-y-40 { transform: translateY(0.40em); }
.nudge-y-45 { transform: translateY(0.45em); }
.nudge-y-50 { transform: translateY(0.5em); }
.nudge-y-75 { transform: translateY(0.75em); }
.nudge-y-100 { transform: translateY(1em); }
.nudge-y-125 { transform: translateY(1.25em); }
.nudge-y-150 { transform: translateY(1.50em); }
.nudge-y-200 { transform: translateY(2em); }
.nudge-y-250 { transform: translateY(2.5em); }
.nudge-y-300 { transform: translateY(3em); }
.nudge-y-350 { transform: translateY(3.5em); }
.nudge-y-400 { transform: translateY(4em); }
.nudge-y-450 { transform: translateY(4.5em); }
.nudge-y-500 { transform: translateY(5em); }

.nudge-y--06 { transform: translateY(-0.06em); }
.nudge-y--12 { transform: translateY(-0.12em); }
.nudge-y--25 { transform: translateY(-0.25em); }
.nudge-y--50 { transform: translateY(-0.5em); }
.nudge-y--75 { transform: translateY(-0.75em); }
.nudge-y--100 { transform: translateY(-1em); }
.nudge-y--125 { transform: translateY(-1.25em); }
.nudge-y--150 { transform: translateY(-1.50em); }
.nudge-y--175 { transform: translateY(-1.75em); }
.nudge-y--200 { transform: translateY(-2em); }
.nudge-y--225 { transform: translateY(-2.25em); }
.nudge-y--250 { transform: translateY(-2.5em); }
.nudge-y--400 { transform: translateY(-4em); }
.nudge-y--500 { transform: translateY(-5em); }

.nudge-x-10 { transform: translateX(0.10em); }
.nudge-x-20 { transform: translateX(0.20em); }
.nudge-x-25 { transform: translateX(0.25em); }
.nudge-x-30 { transform: translateX(0.30em); }
.nudge-x-40 { transform: translateX(0.40em); }
.nudge-x-50 { transform: translateX(0.50em); }
.nudge-x-60 { transform: translateX(0.60em); }
.nudge-x-70 { transform: translateX(0.70em); }
.nudge-x-75 { transform: translateX(0.75em); }
.nudge-x-80 { transform: translateX(0.80em); }
.nudge-x-90 { transform: translateX(0.90em); }
.nudge-x-100 { transform: translateX(1.00em); }
.nudge-x-125 { transform: translateX(1.25em); }
.nudge-x-150 { transform: translateX(1.50em); }
.nudge-x-175 { transform: translateX(1.75em); }
.nudge-x-200 { transform: translateX(2.00em); }
.nudge-x-225 { transform: translateX(2.25em); }
.nudge-x-250 { transform: translateX(2.50em); }
.nudge-x-275 { transform: translateX(2.75em); }

.nudge-x--10 { transform: translateX(-0.10em); }
.nudge-x--20 { transform: translateX(-0.20em); }
.nudge-x--25 { transform: translateX(-0.25em); }
.nudge-x--30 { transform: translateX(-0.30em); }
.nudge-x--40 { transform: translateX(-0.40em); }
.nudge-x--50 { transform: translateX(-0.50em); }
.nudge-x--60 { transform: translateX(-0.60em); }
.nudge-x--70 { transform: translateX(-0.70em); }
.nudge-x--75 { transform: translateX(-0.75em); }
.nudge-x--80 { transform: translateX(-0.80em); }
.nudge-x--90 { transform: translateX(-0.90em); }
.nudge-x--100 { transform: translateX(-1em); }
.nudge-x--125 { transform: translateX(-1.25em); }
.nudge-x--200 { transform: translateX(-2.00em); }
.nudge-x--300 { transform: translateX(-3.00em); }
.nudge-x--400 { transform: translateX(-4.00em); }
.nudge-x--500 { transform: translateX(-5.00em); }


/* ANIMATIONS */
.spin { animation: spinner 1s linear infinite; }
.spinCcw { animation: spinnerCcw 1s linear infinite; }
.blink { animation: blinker 1s linear infinite; }
.fade { animation: fader 1s linear infinite; }
.sine { animation: fader 1s ease-in-out infinite; }
.sine20 { animation: fader50 1s ease-in-out infinite; }
.moveUpDown { animation: moveUpDown 1s ease-in-out infinite; }
.shake { animation: shake 0.5s linear 1; }
.popInRight { animation: popInRight 0.5s forwards; }
.popInLeft { animation: popInLeft 0.5s forwards; }
.shine { animation: shake 1s ease-in-out infinite; }
.wiggle, .wiggleX { animation: wiggleX 300ms ease-in-out 1; }
.fadeOut { animation: fadeOut 1s linear 1 forwards; }
.fadeOutFast { animation: fadeOut 250ms linear 1 forwards; }
.fadeIn { animation: fadeIn 1s linear 1 forwards; }
.fadeInFast { animation: fadeIn 250ms linear 1 forwards; }
.dyingScreen { animation: dyingScreenEffect 500ms ease-in-out forwards; }
.flashBg{animation:flashBg .5s ease-out}

@keyframes flashBg{
    0%   {background:rgba(255,255,255,.75)}
    100% {background:transparent}
}

@keyframes spinner { 
    100% { transform:rotate(360deg); } 
}

@keyframes spinnerCcw { 
    100% { transform:rotate(-360deg); } 
}

@keyframes moveUpDown {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes blinker {
    0%   { opacity: 0; }
    49%  { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes fader {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fader50 {
    0%   { opacity: .5; }
    50%  { opacity: 1; }
    100% { opacity: .5; }
}

@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes popInRight {
    0% {
        transform: translateX(100%) scale(0);
        opacity: 0;
    }
    35% {
        transform: translateX(-5%) scale(1);
        opacity: 1;
    }
    70% {
        transform: translateX(-5%) scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes popInLeft {
    0% {
        transform: translateX(-100%) scale(0);
        opacity: 0;
    }
    35% {
        transform: translateX(5%) scale(1);
        opacity: 1;
    }
    70% {
        transform: translateX(5%) scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

@keyframes wiggleX {
    0% { transform: translateX(1px); }
    20% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    80% { transform: translateX(-1px); }
    100% { transform: translateX(1px); }
}

@keyframes dyingScreenEffect {
    0% {
        transform: scaleX(1);
        filter: brightness(90%);
    }
    29% {
        transform: scaleX(1);
        filter: brightness(90%);
    }
    30% {
        transform: scaleX(1.2);
        filter: brightness(100%);
    }
    39% {
        transform: scaleX(1.2);
        filter: brightness(100%);
    }
    40% {
        transform: scaleX(1);
        filter: brightness(100%);
    }
    59% {
        transform: scaleX(1);
        filter: brightness(100%);
    }
    60% {
        transform: scaleX(1.8);
        filter: brightness(66%);
    }
    79% {
        transform: scaleX(1.8);
        filter: brightness(88%);
    }
    80% {
        transform: scaleX(1.8) translateX(5%);
        filter: brightness(66%);
    }
    90% {
        transform: scaleX(1.8) translateX(5%);
        filter: brightness(66%);
    }
    100% {
        transform: scaleX(1.7);
        filter: brightness(82%);
    }
}

@keyframes filmgrain {
    0%, 100% { background-position-x: 50%; }
    15% { background-position-x: 25%; }
    30% { background-position-x: 66%; }
    65% { background-position-x: 75%; }
    80% { background-position-x: 11%; }
}

@keyframes gpuFailMovement {
    0.0% { background-position: 0px 0px;  background-size: 100% 100%; }
    9.0% { background-position: 0px 0px;  background-size: 100% 100%; }
    10.0% { background-position: 666px 0; background-size: 160% 100%; }
    11.0% { background-position: 666px 0; background-size: 100% 100%; }
    50.0% { background-position: 666px 0; background-size: 100% 100%; }
    51.0% { background-position: 0px 0px; background-size: 100% 100%; }
}

@keyframes gpuFail {
    0.0% { transform: scaleX(1);                    filter: brightness(90%); }
    1.0% { transform: scaleX(1);                   filter: brightness(90%); }
    2.0% { transform: scaleX(1.2);                 filter: brightness(100%); }
    2.2% { transform: scaleX(1.2);                 filter: brightness(100%); }
    2.9% { transform: scaleX(1);                   filter: brightness(100%); }
    3.0% { transform: scaleX(1);                   filter: brightness(100%); }
    3.5% { transform: scaleX(1.8);                 filter: brightness(66%); }
    4.0% { transform: scaleX(1.8);                 filter: brightness(88%); }
    4.3% { transform: scaleX(1.8) translateX(5%);  filter: brightness(66%); }
    4.6% { transform: scaleX(1.8) translateX(5%);  filter: brightness(66%); }
    4.8% { transform: scaleX(1.7);                filter: brightness(82%); }
    5.0% { transform: scaleX(1);                   filter: brightness(100%); }

    12.0% { transform: scaleX(1);                   filter: brightness(100%)}
    12.1% { transform: scaleX(1);                    filter: brightness(90%), hue-rotate(90deg); }
    13.0% { transform: scaleX(1);                   filter: brightness(90%), hue-rotate(90deg); }
    13.5% { transform: scaleX(1.2);                 filter: brightness(100%), hue-rotate(90deg); }
    13.7% { transform: scaleX(1.2);                 filter: brightness(100%), hue-rotate(90deg); }
    14.0% { transform: scaleX(1);                   filter: brightness(100%), hue-rotate(90deg); }
    14.6% { transform: scaleX(1);                   filter: brightness(100%), hue-rotate(90deg); }
    15.0% { transform: scaleX(1);                   filter: brightness(100%); }

    20.0% { transform: scaleX(1);                   filter: brightness(100%); }
    21.0% { transform: scaleX(1.8) translateX(5%);  filter: brightness(66%); }
    22.0% { transform: scaleX(1.8) translateX(5%);  filter: brightness(66%); }
    22.5% { transform: scaleX(1.7);                filter: brightness(82%); }
    23.0% { transform: scaleX(1);                   filter: brightness(100%); }

    25.0% { transform: scaleX(1);                    filter: brightness(90%); }
    100.0% { transform: scaleX(1);                    filter: brightness(90%); }
}

/* @-webkit-keyframes sineWave {
    0%   { opacity: 0; }
    50%  { opacity: 1; }
    100% { opacity: 0; }
} */

/* MOBILE */
@media (max-width: 800px) {
}

@media print {    
    .noPrint
    {
        display: none !important;
    }
    .onlyPrint
    {
        display: inherit !important;
    }
}