:root {
    --off-black: rgb(15,15,15);
    --alaska-blue: rgb(46, 115, 192);
    --light-gray: rgb(210, 210, 210);
}

::-webkit-scrollbar {
    display: none;
}

.artwork{
    width: 100%;
    height: auto;
}

/* COPIED LOAD ANIMATION FILE https://css-loaders.com/spinner/ */
/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background:
      linear-gradient(0deg ,rgb(0 0 0/50%) 30%,#0000 0 70%,rgb(0 0 0/100%) 0) 50%/8% 100%,
      linear-gradient(90deg,rgb(0 0 0/25%) 30%,#0000 0 70%,rgb(0 0 0/75% ) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: l23 1s infinite steps(12);
  }
  .loader::before,
  .loader::after {
     content: "";
     grid-area: 1/1;
     border-radius: 50%;
     background: inherit;
     opacity: 0.915;
     transform: rotate(30deg);
  }
  .loader::after {
     opacity: 0.83;
     transform: rotate(60deg);
  }
  @keyframes l23 {
    100% {transform: rotate(1turn)}
  }

@keyframes perspectiveTop{
    from{
        transform: perspective(100px) rotateX(30deg) scale(2);
        -webkit-transform: perspective(100px) rotateX(30deg) scale(2);
    }
    to {
        transform: 0;
        -webkit-transform: 0;
    }
}

@keyframes perspectiveBottom{
    from{
        transform: perspective(100px) rotateX(20deg) scale(1.5);
        -webkit-transform: perspective(100px) rotateX(-90deg) rotateY(-360deg) scale(.1);
    }
    to {
        transform: 0;
        -webkit-transform: 0;
    }
}

@keyframes toCenter{
    from{
        height: 100%;
        width: initial;
    }
    to{
        height: initial;
        width: 100%;
    }
}
.to-center{
    animation: toCenter 1s;
}
.perspective-top{
    animation: perspectiveTop 2s;
}
.perspective-bottom{
    animation: perspectiveBottom opacity 3s;
}
.small-caps{
    font-variant: small-caps;
}
.big-caps{
    text-transform: capitalize;
}
@keyframes transitionIn {
    from{
      opacity: .3;
    }
  
    to{
      opacity: 1;
    }
}
@keyframes opacityIn {
    from{
      opacity: .2;
    }
  
    to{
      opacity: 1;
    }
}
@keyframes fadeInOut{
    0%{
        display: block;
        opacity: 0;
    }
    50%{
        display: block;
        opacity: 1;
    }
    100%{
        display: block;
        opacity: 0;
    }
}
@keyframes leftSlide {
    from{
      transform: translateX(-100%);
      opacity: 0;
    }
  
    to{
      transform: translateX(0);
      opacity: 1;
    }
}

@keyframes rightSlide {
    from{
      transform: translateX(100%);
      opacity: 0;
    }
  
    to{
      transform: translateX(0);
      opacity: 1;
    }
}
@keyframes rightSlideScale {
    from{
        transform: translateX(100%) scaleY(0);
        opacity: 0;
      }
    
      to{
        transform: translateX(0) scaleY(1);
        opacity: 1;
      }
}

@keyframes leftSlideScale {
    from{
        transform: translateX(-100%) scaleY(0);
        opacity: 0;
      }
    
      to{
        transform: translateX(0) scaleY(1);
        opacity: 1;
      }
}

@keyframes slideUp{
    from{
        transform: translateY(100%);
        opacity: 0;
      }
    
      to{
        transform: translateY(0);
        opacity: 1;
      }
}
@keyframes slideDown{
    from{
        transform: translateY(-100%);
        opacity: 0;
      }
    
      to{
        transform: translateY(0);
        opacity: 1;
      }
}
@keyframes colorChange {
    0% {
        color: var(--off-black);
    }
    50%{
        color: white;
    }
    100%{
        color: var(--off-black);
    }
}
@keyframes colorChangeWhite {
    0% {
        color: rgba(255,255,255,1);
    }
    50%{
        color: rgba(255,255,255,.1);
    }
    100%{
        color: rgba(255,255,255,1);
    }
}
@keyframes letterSpace {
    0% {
        letter-spacing: normal;
    }
    50% {
        letter-spacing: 1px;
    }
    100% {
        letter-spacing: normal;
    }
}
@keyframes flashingQuestion{
    0%{
        content: ""
    }
    50%{
        content: "?"
    }
    100%{
        content: ""
    }
}
@keyframes searchAnimate {
    25%{
        content: ""
    }
    50%{
        content: "."
    }
    75%{
        content: ".."
    }
    100%{
        content: "..."
    }
}
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
.color-change{
    animation: colorChange 2.5s infinite;
}
.color-change-white{
    animation: colorChangeWhite 2.5s infinite;
}
.letter-spacing{
    animation: letterSpace 2.5s infinite;
}
.flashing-question:after{
    animation: flashingQuestion 1s infinite .3s;
    animation-fill-mode: forwards;
}
.typing{
    animation: typing 2s steps(20, end);
    white-space: nowrap;
}
.opacity-in-out{
    animation: fadeInOut 3s infinite;
}
.right-slide{
    animation: leftSlide 1s;
}

.left-slide{
    animation: rightSlide 1s;
}

.left-slide-scale{
    animation: rightSlideScale 1s;
}

.slide-up{
    animation: slideUp 1s;
}
.slide-down{
    animation: slideDown 1.5s;
}
.din{
    font-family: din-2014;
}
h1, h2, h3, h4, h5, h6{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    color: white;
}
*{
    padding: 0;
    margin: 0;
}
html{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", din-2014, system-ui, BlinkMacSystemFont, SF Pro, helvetica neue, helvetica, sans-serif;
}
body{
    color: var(--off-black);
    position: relative;
    animation: transitionIn .75s;
}
.opacity-in{
    animation: opacityIn 1.5s;
}
.waiting-animation:after{
    animation: searchAnimate 1s infinite .3s;
    animation-fill-mode: forwards;
}
.background-black{
    background-color: black;
}
.background-alaska-blue{
    background-color: var(--alaska-blue);
}
.background-off-black{
    background-color: var(--off-black);
}
.background-white{
    background-color: white;
}
.background-white-opaque{
    background-color: rgba(245, 245, 245, 0.7);
}
.font-white{
    color: white;
}
.font-off-black{
    color: var(--off-black);
}
.font-off-black a{
    color: var(--off-black);   
}
popup{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
fixed{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.hover-show-bottom{
    visibility: hidden;
}
.hover-show:hover .hover-show-top{
    display: none;
}
.hover-show:hover .hover-show-bottom{
    visibility: visible;
}
#navigation{
    background:white;
}
.\100{
    width: 100%;
}
.aspect-6x9{
    aspect-ratio: auto 6 / 9;
}
.pointer{
    cursor:pointer;
}
.cursor-default{
    cursor: default;
}

#user{
    width: 30px;
    height: 30px;
    border-radius: 6px;
}
.button-shape-classic-small{
    padding: 8px 10px;
    font-size: 12px;
}
.image-30{
    width: 30px;
    height: 30px;
}
.image-40{
    width: 40px;
    height: 40px;
}
.image-50{
    width: 50px;
    height: 50px;
}
.image-r-10{
    width: 10px;
    height: auto;
}
.image-r-20{
    width: 20px;
    height: auto;
}
.image-r-30{
    width: 30px;
    height: auto;
}
.image-r-40{
    width: 40px;
    height: auto;
}
.image-r-50{
    width: 50px;
    height: auto;
}
.image-r-60{
    width: 60px;
    height: auto;
}
.image-r-70{
    width: 70px;
    height: auto;
}
.image-r-80{
    width: 80px;
    height: auto;
}
.image-r-90{
    width: 90px;
    height: auto;
}
.image-r-100{
    width: 100px;
    height: auto;
}
.image-r-125{
    width: 125px;
    height: auto;
}
.image-r-150{
    width: 150px;
    height: auto;
}

.image-r-175{
    width: 175px;
    height: auto;
}
.image-r-200{
    width: 200px;
    height: auto;
}
.image-r-300{
    width: 200px;
    height: auto;
}
.image-r-400{
    width: 400px;
    height: auto;
}
.image-r-500{
    width: 500px;
    height: auto;
}
.image-w-100p{
    width: 100%;
    height: auto;
}
.image-r-h-60{
    height: 60px;
    width: auto;
}
.image-r-h-80{
    height: 80px;
    width: auto;
}
.gray-image{
    -webkit-filter: grayscale(100%);
    -moz-filter:    grayscale(100%);
    -ms-filter:     grayscale(100%);
    -o-filter:      grayscale(100%);
    filter: gray; 
}
.gray-image:hover{
    transition: .3s;
    -webkit-filter: grayscale(0%);
    -moz-filter:    grayscale(0%);
    -ms-filter:     grayscale(0%);
    -o-filter:      grayscale(0%);
    filter: gray; 
}
underlay{
    z-index: -1;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin-bottom: 0;
}
float{
    position: absolute;
}
.dropdown:hover .dropdown-sub{
    display:block;
    animation: leftSlideScale .5s;
}
.dropdown-sub{
    display:none;
}
overlay{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin-bottom: 0;
    z-index: 2;
}
.overlay{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin-bottom: 0;
    z-index: 2;
}
.overlay-custom{
    position: absolute;
    bottom:0;
    right:0;
    left:0;
    margin-bottom: 0;
    z-index: 2;
}
.opacity-1{
    opacity: 0.1;
}
.opacity-2{
    opacity: 0.2;
}
.opacity-3{
    opacity: 0.3;
}
.opacity-4{
    opacity: 0.4;
}
.opacity-5{
    opacity: 0.5;
}
.opacity-6{
    opacity: 0.6;
}
.opacity-7{
    opacity: 0.7;
}
.opacity-8{
    opacity: 0.8;
}
.opacity-9{
    opacity: 0.9;
}
.opacity-10{
    opacity: 1;
}
.z1{
    z-index: 1;
}
.z-1{
    z-index: -1;
}
.black-opaque{
    background: rgba(0,0,0, 0.6);
}

h1{
    font-size: 30px;
    font-weight:600;
}
label{
    font-weight: 200;
}
.input-padding{
    padding: 10px 0;
}
input {
    font-size: 22px;
    color: var(--off-black);
}
.min-width-200{
    min-width: 200px;
}
.min-width-300{
    min-width: 300px;
}
.min-width-400{
    min-width: 400px;
}
.min-width-500{
    min-width: 500px;
}
.max-width-100p{
    max-width: 100%;
}
.max-width-100{
    max-width: 100px;
}
.max-width-200{
    max-width:200px;
}
.max-width-250{
    max-width:250px;
}
.max-width-300{
    max-width:300px;
}
.max-width-400{
    max-width:400px;
}
.max-width-500{
    max-width:500px;
}
.max-width-600{
    max-width:600px;
}
.initial-height{
    height: initial;
}
.height-1{
    height:1px;
}
.height-2{
    height:2px;
}
.height-50p{
    height: 50%;
}
.height-100p{
    height: 100%;
}
.height-100p-50{
    height: calc(100% - 50px);
}
.height-100p-125{
    height: calc(100% - 125px);
}
.max-height-100p{
    max-height: 100%;
}
.max-width-100p{
    max-height: 100%;
}
.width-20p{
    width: 20%;
}
.width-25p{
    width: 25%;
}
.width-33p{
    width: 33.3%;
}
.width-66p{
    width: 66.6%;
}
.width-60p{
    width: 60%;
}
.width-80p{
    width: 80%;
}
.width-100p{
    width: 100%;
}
.width-100p-100{
    width: calc(100% - 100px);
}
.width-100p-150{
    width: calc(100% - 150px);
}
.width-100p-200{
    width: calc(100% - 200px);
}
.width-100p-400{
    width: calc(100% - 400px);
}
.width-50p{
    width: 50%;
}
.width-100p{
    width: 100%;
}
.height-100{
    height: 100px;
}
.height-200{
    height: 200px;
}
.height-300{
    height: 300px;
}
.height-400{
    height: 400px;
}
.width-1{
    width: 1px;
}
.width-50{
    width: 50px;
}
.width-100{
    width: 100px;
}
.width-125{
    width: 125px;
}
.width-150{
    width: 150px;
}
.width-200{
    width: 200px;
}
.width-250{
    width: 250px;
}
.width-300{
    width: 300px;
}
.width-400{
    width: 400px;
}
.width-500{
    width: 500px;
}
.width-600{
    width: 600px;
}
.width-700{
    width: 700px;
}
.width-800{
    width: 800px;
}
.padding-horizontal-5{
    padding-left: 5px;
    padding-right: 5px;
}
.padding-horizontal-6{
    padding-left: 6px;
    padding-right: 6px;
}
.padding-horizontal-7{
    padding-left: 7px;
    padding-right: 7px;
}
.padding-horizontal-8{
    padding-left: 8px;
    padding-right: 8px;
}
.padding-horizontal-9{
    padding-left: 9px;
    padding-right: 9px;
}
.padding-horizontal-10{
    padding-left: 10px;
    padding-right: 10px;
}
.padding-horizontal-11{
    padding-left: 11px;
    padding-right: 11px;
}
.padding-horizontal-12{
    padding-left: 12px;
    padding-right: 12px;
}
.padding-horizontal-13{
    padding-left: 13px;
    padding-right: 13px;
}
.padding-horizontal-14{
    padding-left: 14px;
    padding-right: 14px;
}
.padding-horizontal-15{
    padding-left: 15px;
    padding-right: 15px;
}
.padding-horizontal-16{
    padding-left: 16px;
    padding-right: 16px;
}
.padding-horizontal-17{
    padding-left: 17px;
    padding-right: 17px;
}
.padding-horizontal-18{
    padding-left: 18px;
    padding-right: 18px;
}
.padding-horizontal-15{
    padding-left: 19px;
    padding-right: 19px;
}
.padding-horizontal-20{
    padding-left: 20px;
    padding-right: 20px;
}
.padding-horizontal-5p{
    padding-left: 5%;
    padding-right: 5%;
}
.padding-horizontal-8p{
    padding-left: 8%;
    padding-right: 8%;
}
.padding-horizontal-10p{
    padding-left: 10%;
    padding-right: 10%;
}
.padding-horizontal-15p{
    padding-left: 15%;
    padding-right: 15%;
}
.padding-horizontal-20p{
    padding-left: 20%;
    padding-right: 20%;
}
.padding-vertical-5{
    padding-top: 5px;
    padding-bottom: 5px;
}
.padding-vertical-10{
    padding-top: 10px;
    padding-bottom: 10px;
}
.padding-vertical-12{
    padding-top: 12px;
    padding-bottom: 12px;
}
.padding-vertical-15{
    padding-top: 15px;
    padding-bottom: 15px;
}
.padding-vertical-20{
    padding-top: 20px;
    padding-bottom: 20px;
}
.padding-vertical-3p{
    padding-top: 3%;
    padding-bottom: 3%; 
}
.padding-vertical-4p{
    padding-top: 4%;
    padding-bottom: 4%; 
}
.padding-vertical-5p{
    padding-top: 5%;
    padding-bottom: 5%; 
}

.padding-5{
    padding: 5px;
}
.padding-10{
    padding: 10px;
}
.padding-15{
    padding: 15px;
}
.padding-20{
    padding: 20px;
}
.padding-top-5{
    padding-top: 5px;
}
.padding-top-10{
    padding-top: 10px;
}
.padding-top-15{
    padding-top: 15px;
}
.padding-top-20{
    padding-top: 20px;
}
.padding-top-25{
    padding-top: 25px;
}
.padding-top-30{
    padding-top: 30px;
}
.padding-top-40{
    padding-top: 40px;
}
.padding-right-5{
    padding-right: 5px;
}
.padding-right-10{
    padding-right: 10px;
}
.padding-right-15{
    padding-right: 15px;
}
.padding-right-20{
    padding-right: 20px;
}
.padding-left-5{
    padding-left: 5px;
}
.padding-left-10{
    padding-left: 10px;
}
.padding-left-15{
    padding-left: 15px;
}
.padding-left-20{
    padding-left: 20px;
}
.margin-horizontal-5{
    margin-left: 5px;
    margin-right: 5px;
}
.margin-horizontal-10{
    margin-left: 10px;
    margin-right: 10px;
}
.neg-margin-top-5{
    margin-top: -5px;
}
.neg-margin-top-10{
    margin-top: -10px;
}
.margin-auto{
    margin: auto;
}
.margin-left-auto{
    margin-left:auto;
}
.margin-right-auto{
    margin-right: auto;
}
.margin-right-20{
    margin-right: 20px;
}
.margin-top-auto{
    margin-top: auto;
}
.margin-top-5{
    margin-top: 5px;
}
.margin-top-10{
    margin-top: 10px;
}
.margin-bottom-auto{
    margin-bottom: auto;
}
.margin-bottom-5{
    margin-bottom: 5px;
}
.margin-bottom-10{
    margin-bottom: 10px
}
.margin-bottom-15{
    margin-bottom: 15px;
}
.margin-bottom-20{
    margin-bottom: 20px;
}
.margin-bottom-25{
    margin-bottom: 25px;
}
.margin-bottom-30{
    margin-bottom: 30px;
}
.margin-left-1{
    margin-left: 1px;
}
.margin-left-2{
    margin-left: 2px;
}
.margin-left-3{
    margin-left: 3px;
}
.margin-left-4{
    margin-left: 4px;
}
.margin-left-5{
    margin-left: 5px;
}
.margin-left-7{
    margin-left: 7px;
}
.margin-left-8{
    margin-left: 8px;
}
.margin-left-10{
    margin-left: 10px;
}
.margin-left-15{
    margin-left: 15px;
}
.margin-left-20{
    margin-left: 20px;
}
/*  */
.margin-right-1{
    margin-right: 1px;
}
.margin-right-2{
    margin-right: 2px;
}
.margin-right-3{
    margin-right: 3px;
}
.margin-right-4{
    margin-right: 4px;
}
.margin-right-5{
    margin-right: 5px;
}
.margin-right-6{
    margin-right: 6px;
}
.margin-right-7{
    margin-right: 7px;
}
.margin-right-8{
    margin-right: 8px;
}
.margin-right-9{
    margin-right: 9px;
}
.margin-right-10{
    margin-right: 10px;
}
.margin-right-15{
    margin-right: 15px;
}
.overflow{
    overflow: auto;
}
.overflow-hidden{
    overflow: hidden;
}
.overflow-x{
    overflow-y: hidden;
    overflow-x: auto;
}
.float-right{
    float:right;
}
.float-left{
    float:left;
}
.field-row{
    overflow: auto;
}
.field-row section{
    float:left;
    box-sizing: border-box;
}
.field-row-2 section{
    width: 50%;
    box-sizing: border-box;
}
.fixed{
    position:fixed;
}
.sticky{
    position: sticky;
}
.border-bottom-1-white{
    border-bottom: 1px solid white;
}
.border-bottom-1-5-white{
    border-bottom: 1.5px solid white;
}
.border-bottom-2-white{
    border-bottom: 2px solid white;
}
.border-bottom-1-black{
    border-bottom: 1px solid var(--off-black);
}
.border-bottom-1-5-black{
    border-bottom: 1.5px solid var(--off-black);
}
.border-bottom-2-black{
    border-bottom: 2px solid var(--off-black);
}
.signup-button{
    background: var(--off-black);
    color:white;
    padding: 7px 10px;
    border-radius: 5px;
}
.padding-top-10{
    padding-top: 15px;
}
.padding-bottom-5{
    padding-bottom: 5px;
}
.padding-bottom-10{
    padding-bottom: 10px;
}
.padding-bottom-15{
    padding-bottom: 15px;
}
.padding-bottom-20{
    padding-bottom: 20px;
}
.padding-preceding{
    padding-left: 15px;
}
.padding-following{
    padding-right: 15px;
}
.padding-horizontal{
    padding: 0 8%;
}
.logo{
    cursor: pointer;
    display:block;
    width: 100px;
    height: auto;
}
.game-cover-x-small{
    width: 71px;
    height: 100px;
    display:block;
}
.game-cover-small{

}
.game-cover-medium{
    width:180px;
    height:251px;
    display: block;
}
.game-cover-large{
    width: 230px;
    height: 322px;
}

.disable-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.sub-menu{
    display:none;
}
.menu:hover .sub-menu{
    display:block;
    animation: slideUp .75s;
}
label{
    display: block;
}
input, select{
    border:0;
    background: none;
    width: 100%;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-appearance: none;
    color: var(--off-black);
}
input[type="search"] {
    -webkit-appearance: none;
}
.form-row{
    overflow: auto;
    margin-bottom: 15px;
}
.form-row section{
    float:left;
}
textarea{
    border:0;
    background: none;
    width: 100%;
    font-family: -apple-system, system-ui, BlinkMacSystemFont, SF Pro, helvetica neue, helvetica, sans-serif;
}
textarea:focus{
    outline: 0;
}
textarea::placeholder{
    color: rgba(155,155,155, 0.5);
}
input:focus, select:focus{
    outline: 0;
}
input::placeholder { 
    color: rgba(155,155,155, 0.5);
}
button:focus{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
a:focus{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
a:focus{
    outline: none !important;
}
button:focus {
    outline: none !important;
}
button{
    background:none;
    border: 0;
    cursor: pointer;
    color: var(--off-black);
}
button:active{
    opacity: 0.6;
    transition: 0.15s;
}
.all-clickable button:active{
    opacity: 0.6;
    transition: 0.15s;
} 
.all-clickable a:active{
    opacity: 0.6;
    transition: 0.15s;
}
.clickable:hover{
    cursor:pointer
}
.clickable:active{
    opacity: 0.6;
    transition: 0.15s;
    cursor: pointer;
}
.border-box{
    box-sizing: border-box;
}
li {
    list-style-type: none;
}
.color-white{
    color:white;
}
.thin{
    font-weight: 100;
}

.light{
    font-weight: 200;
}
.regular{
    font-weight: 400;
}
.medium{
    font-weight: 500;
}

.bold{
    font-weight: 600;
}
.italic{
    font-style: italic;
}
.italic{
    font-style: italic;
}
.style-normal{
    font-style: normal;
}
.underline{
    text-decoration: underline;
}
.sans{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,"Helvetica Neue", din-2014, system-ui, BlinkMacSystemFont, SF Pro, helvetica neue, helvetica, sans-serif;
}
.mono{
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', Menlo, Consolas, monospace;
}
.helvetica-neue{
    font-family: helvetica neue, helvetica, sans-serif;
}
.shadow{
    text-shadow: 0px 20px 40px rgba(0,0,0,0.4);
}
.grid{
    display: grid;
    grid-template: 1fr / 1fr;
}
.grid > *{
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}
.flex{
    display:flex;
}
.align-top{
    display:flex;
}
.align-bottom{
    display:flex;
    align-items: flex-end;
}
.center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.align-right{
    display:flex;
    justify-content: right;
}
.center-horizontal{
    display: flex;
    justify-content: center;
}
.center-vertical{
    display: flex;
    align-items: center;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
.select-right { text-align-last: right; }
.select-right option { direction: rtl; }
.pad-items-bottom-5 > *{
    padding-bottom: 5px;
}
.pad-items-bottom-10 > *{
    padding-bottom: 10px;
}
.pad-items-bottom-15 > *{
    padding-bottom: 15px;
}
.pad-items-bottom-20 > *{
    padding-bottom: 20px;
}
.pad-items-bottom-25 > *{
    padding-bottom: 25px;
}
.pad-items-horizontal-5 > *{
    padding-right: 5px;
    padding-left: 5px;
}
.pad-items-horizontal-7 > *{
    padding-right: 7px;
    padding-left: 7px;
}
.link-stack a{
    display:block;
}
.link-row-center{
    display: flex;
    justify-content: center;
}
.button-stack button{
    display:block;
}
.link-row{
    overflow: auto;
    box-sizing: border-box;
}
.link-row a{
    display: block;
    float:left;
    padding: 0 10px;
}
.link-row i{
    font-size: 12px;
    padding-left: 3px;
}
.button-row{
    overflow: auto;
    box-sizing: border-box;
}
.button-row button{
    float:left;
}

.relative{
    position: relative;
}
.absolute{
    position: absolute;
}
.absolute-full-width{
    position: absolute;
    left: 0;
    right: 0;
}
.fixed-full-width{
    position: fixed;
    left: 0;
    right: 0;
}
.bottom{
    bottom: 0;
}
.nowrap{
    white-space: nowrap;
}


/* scrolls */
.scroll-x{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

.scroll-y{
    overflow-x: hidden;
    overflow-y: scroll;
}
.hidden{
    display:none;
}
.block{
    display:block;
}
.inline{
    display:inline-block;
}
.inline-neg-margin{
    display:inline-block;
    margin-left: -4px;
}
.inline-neg-margin-1{
    display:inline-block;
    margin-left: -5px;
}
.white-space-normal{
    white-space: normal;
}

/* weights */
.x-thin{
    font-weight: 100;
}
.thin{
    font-weight: 200;
}
.light{
    font-weight: 300;
}
.normal{
    font-weight: 400;
}
.semibold{
    font-weight: 500;
}
.bold{
    font-weight: 600;
}
.x-bold{
    font-weight: 700;
}

.uppercase{
    text-transform: uppercase;
}

/* font sizes */
.size-10{
    font-size: 10px;
}
.size-11{
    font-size: 11px;
}
.size-12{
    font-size: 12px;
}
.size-13{
    font-size: 13px;
}
.size-14{
    font-size: 14px;
}
.size-15{
    font-size: 15px;
}
.size-16{
    font-size: 16px;
}
.size-17{
    font-size: 17px;
}
.size-18{
    font-size: 18px;
}
.size-19{
    font-size: 19px;
}
.size-20{
    font-size: 20px;
}
.size-22{
    font-size: 22px;
}
.size-24{
    font-size: 24px;
}
.size-26{
    font-size: 26px;
}
.size-28{
    font-size: 28px;
}
.size-30{
    font-size: 30px;
}
.size-40{
    font-size: 40px;
}
.size-50{
    font-size: 50px;
}
.size-60{
    font-size: 60px;
}
.corner-radius-1{
    border-radius: 1px;
}
.corner-radius-2{
    border-radius: 2px;
}
.corner-radius-3{
    border-radius: 3px;
}
.corner-radius-4{
    border-radius: 4px;
}
.corner-radius-5{
    border-radius: 5px;
}
.corner-radius-6{
    border-radius: 6px;
}
.corner-radius-7{
    border-radius: 7px;
}
.corner-radius-8{
    border-radius: 8px;
}
.corner-radius-9{
    border-radius: 9px;
}
.corner-radius-10{
    border-radius: 10px;
}
.corner-radius-11{
    border-radius: 11px;
}
.corner-radius-12{
    border-radius: 12px;
}
.corner-radius-13{
    border-radius: 13px;
}
.corner-radius-14{
    border-radius: 14px;
}
.corner-radius-15{
    border-radius: 15px;
}
.corner-radius-16{
    border-radius: 16px;
}
.corner-radius-17{
    border-radius: 17px;
}
.corner-radius-18{
    border-radius: 18px;
}
.corner-radius-19{
    border-radius: 19px;
}
.corner-radius-20{
    border-radius: 20px;
}
.auto-invert-text{
    filter: invert(1);
    mix-blend-mode: difference;
}
#play-pause{
    background: rgb(25, 25, 25);
    font-size: 14px;
    font-weight: 100;
    padding: 5px 10px;
    border-radius: 7px;
    color:white;
}
#play-bar{
    border-bottom: 1px solid var(--light-gray);
} 
@media screen and (min-width: 1441px) {
    /* use 'expanding' as pre-fix */
    .expanding-w-33p{
        width: 33%;
    }
    .expanding-w-16p{
        width: 16.6%;
    }
    .expanding-w-25p{
        width: 25%;
    }
    .expanding-w-50p{
        width: 50%;
    }
}

@media screen and (max-width: 768px){
    .break-horizontal-center{
        display: flex;
        justify-content: none;
        align-items: none;
    }
    .break-horizontal-center{
        display: flex;
        justify-content: none;
    }
    .break-vertical-center{
        display: flex;
        align-items: none;
    }
    .logo{
        width: 90px;
        height: auto;
    }
    .game-cover-medium{
        width: 89px;
        height: 125px;
    }
    .responsive{
        width: 100%;
        height:auto;
    }
    .responsive-background-off-black{
        background-color: var(--off-black);
    }
    .responsive-background-white{
        background-color: white;
    }
    .responsive-font-white{
        color:white;
    }
    .responsive-fixed-bottom{
        position: fixed;
        bottom:0;
    }
    .responsive-text-adjust{
        font-size: initial;
    }
    .responsive-padding-h-15{
        padding-right: 15px;
        padding-left: 15px;
    }
    .responsive-padding-h-20{
        padding-right: 20px;
        padding-left: 20px;
    }
    .responsive-m-bottom-10{
        margin-bottom: 10px;
    }
    .responsive-m-bottom-15{
        margin-bottom: 15px;
    }
    .responsive-w-100-50{
        width: calc(100% - 50px);
    }
    .responsive-w-300{
        width: 300px;
    }
    .responsive-w-350{
        width: 350px;
    }
    .responsive-max-w-100p{
        max-width:100%;
    }
    .responsive-w-25p{
        width: 25%;
    }
    .responsive-w-33p{
        width: 33.3%;
    }
    .responsive-w-50p{
        width: 50%;
    }
    .responsive-max-w-100{
        width: 100px;
    }
    .responsive-max-w-150{
        width: 150px;
    } 
    .responsive-max-w-200{
        width: 200px;
    }
    .responsive-padding-b-15{
        margin-bottom: 15px;
    }
    .responsive-padding-b-450{
        padding-bottom: 450px;
    }
    .responive-overflow{
        overflow:auto;
    }
    .responsive-hide{
        display:none;
    }
    .responsive-float{
        right: 20px;
    }
    .responsive-float-items > *{
        float:left; 
    }
    .responsive-inline-items > *{
        display: inline-block;
        white-space: normal;
    }
    .responsive-items-margin > *{
        margin: 0 5px;
    }
    .responsive-items-margin-b-10 > *{
        margin-bottom: 10px;
    }
    .responsive-center-horizontal{
        display:flex;
        justify-content: center;
    }
    .responsive-text-center{
        text-align: center;
    }
    .responsive-50{
        width: 50%;
    }
    .responsive-h-50p{
        height: 50%;
    }
    .responsive-h-100p{
        height: 100%;
    }
    .responsive-height{
        height:initial;
    }
    .responsive-white-space-normal{
        white-space: normal;
    }
    .responsive-image-h-20{
        height: 20px;
        width: auto;
    }
    .responsive-image-h-30{
        height: 30px;
        width: auto;
    }
    .responsive-image-h-60{
        height: 60px;
        width: auto;
    }
    .responsive-image-h-70{
        height: 70px;
        width: auto;
    }
    .responsive-image-h-100p{
        height: 100%;
        width: auto;
    }
    .responsive-float-left{
        float:left;
    }
    .responsive-float-right{
        float:right;
    }
    .responsive-block{
        display:block;
    }
    .responsive-flex{
        display:flex;
    }
    .responsive-scroll-x{
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    .repsonsive-scroll-y{
        overflow-x: none;
        overflow-y: scroll;
    }
    .responsive-inline{
        display: inline-block;
    }
    .responsive-size-16{
        font-size: 16px;
    }
    .break-grid{
        display:block;
    }
    .responsive-link-stack a{
        display: block;
        width: 100%;
    }
    .responsive-link-stack span{
        display: block;
        width: 100%;
    }
    .form-row section{
        width: 100%;
    }
}

@media screen and (max-width: 480px){
    .responsive-m{
        width: 100%;
    }
    .responsive-float{
        right: 20px;
    }
    .responsive-50{
        width: 100%;
    }
    .responsive-block{
        display:block;
    }
    .repsonsive-scroll-y{
        overflow-x: none;
        overflow-y: auto;
    }
    .break-grid{
        display:block;
    }
}