html {
  scroll-behavior: smooth;
}


html, body {
    width: 100%;
    height: 100%;
}

article {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

main {
    flex-grow: 1;
}

header, main, footer {
    flex-shrink: 0;
}



* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #000;
  color: #CCC;
  font-family: 'Space Age', sans-serif;
}

body > header, footer {
  padding: 0 10%;
  margin: 0;
}
@media screen and (max-width: 1000px) {
  body > header, footer {
    padding: 3px 0;
    margin: 0;
  }
}

/* layout / styling */
.bg-primary {
  background-color: #000000;
}

.bg-secondary {
  background-color: #111111;
}

.bg-stars {
  background-color: black;
  background-image: url("/img/background/stars.png");
  background-repeat: repeat;
}

.transparent {
  background-color: transparent;
}

.middle {
  display: flex;
  justify-content: center;
}

.width-20 {
  width: 20em;
}

/* two column */
.col-2 {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: row;
}

.col-2 > * {
  width: 50%;
}

.clear {
  clear: both;
}

@media screen and (max-width: 1000px) {
  .col-2 {
    flex-direction: column;
  }

  .col-2 > * {
    width: 100%;
  }
}

.contact-form-group {
    margin-bottom: 1rem;
    margin: 0 0 1rem 0;
    text-align: left;
}

.contact-input-group {
 
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
    margin:0px;
}

@media screen and (max-width: 380px) {
    #newsletter-signup form {
        font-size: small; 
        width: 100%;
    }
}

@media screen and (max-width: 380px) {
    #partner-signup form {
        width: 100%;
        font-size: small;
    }
}

@media screen and (min-width: 768px) {
    #partner-signup form {
        width: 75%;
    }
}

/* height adjustments */
.height-page {
  height: 90vh;
}

.height-content {
  height: min-content;
}

.circle {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.rounded {
  border-radius: 3rem;
}

.semi-opaque {
  background-color: #00000044;
}

.button {
    float: right;
    clear: both;
}

/*Registration and Login Forms*/
#register form div input {
    //float: right;
    clear: both;
}

#register {
    background-color: #00000044;
}

@media screen and (min-width:1000px){
    #register{
        padding-left:20vw;
    }
}

#register input[type=image]{
    width:150px;
}

#reset-password {
    width:100%;
}

#org-type-div {
    width: 77%;
    float: right;
}

#org-type-label {
    width: 15px;
    float: left;
}

#org-type-select {
    width: 57%;
}

@media screen and (max-width:1000px) {
    #org-type-div {
        width: 80%;
        float: right;
    }

    #org-type-label {
        width: 15px;
        float: left;
    }

    #org-type-select {
        width: 58.5%;
    }
}

@media screen and (max-width:380px) {
    #registration-form {
        font-size: small;
        width: 97vw;
    }

    #org-type-div {
        width: 95%;
        float: right;
    }

    #org-type-select {
        width: 64%;
    }
}

.rocket-button, .partner{
    width:150px;
    height:50px;
}

@media only screen and (max-width: 750px) {
    .features,.hero,.first-feature,.second-feature,.third-feature {
        flex-direction:column;
    }
}

iframe.first-feature,video.second-feature, img.third-feature{
    width:50vw;
}

iframe.first-feature{
    height:30vw;
}

@media only screen and (max-width: 750px) {
    iframe.first-feature,video.second-feature, img.third-feature{
        width: 90vw;
    }

    iframe.first-feature {
        height: 40vw;
    }

}



ul.second-feature, ul.third-feature, ul.pricing {
  list-style: none;
  list-style-position:outside;
}

ul li.second-feature:before, li.third-feature:before, li.pricing:before {
  content: '✓';
}



.tpt {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 15px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    margin-left: 41vw;
    text-decoration: none;
    font-size: 3vw;
}

.tpt:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 15px;
    color: black;
    margin-left: 41vw;
    text-decoration: none;
    font-size: 3vw;
    cursor: pointer;
}

/* background video */
#bg-video {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 100%;
  right: 100%;
  z-index: -100;
}

#bg-video > video {
  width: 100%;
}

@media screen and (min-width:1001px) {
    #home-video {
        height: 400px;
    }
}

/* Header */
header {
  background-color: black;
  z-index: 100;
  display: flex;
  top: 0;
  position: sticky;
}

#ie-logo {
  padding: 10px;
  align-self: center;
  flex-grow: 1;
  height: 50px;
}

#ie-logo img {
  width: 50%;
}

@media screen and (min-width: 1600px) {
    #ie-logo img {
        width: 40%;
    }
}

@media screen and (min-width: 400px) and (max-width:1100px) and (orientation:landscape){
    #ie-logo img {
        width: 100%;
    }
}

#ie-logo-al img {
    width: 50%;
}

#navigation {
  flex-grow: 1;
}

.navigation a {
  font-size: 1.5em;
  text-decoration: none;
  color: inherit;
}
.navigation a:active {
  text-decoration: none;
  color: inherit;
}
.navigation a:visited {
  text-decoration: none;
  color: inherit;
}
.navigation a:hover {
  text-decoration: none;
  color: #FFF;
}

.navigation {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  float: right;
}

@media screen and (max-width: 1000px) {
  #header {
    flex-direction: column;
  }
  .navigation {
    flex-direction: column;
  }
}

@media (min-width: 1000px) {
    .navigation > .nav-item {
        display: inline-block;
        font-size: 1.2em;
        list-style: none;
        padding: 0.5em 1em;
        text-align: center;
        width: max-content;
    }
}

@media (max-width: 400px){
    .navigation > .nav-item {
        display: inline-block;
        font-size: 1.2em;
        list-style: none;
        padding: 0.5em 1em;
        text-align: center;
    }
}


.sub-navigation > .nav-item {
  padding: 0.2em 0.5em;
  list-style: none;
  font-size: 0.7em;
  text-align: center;
}

.sub-navigation {
  display: none;
}

.navigation > .nav-item .sub-navigation {
  position: absolute;
  z-index: 10;
  transform: translate(-50%, 0);
  padding: 0;
  margin: 0;
  height: 0;
  color: #0000;
  background-color: #000B;
  transition: color 0.5s, height 0s;
}

@media screen and (min-width: 1001px) {
  .navigation > .nav-item:hover .sub-navigation {
    display: inline-block;
    color: #CCC;
    height: auto;
  }
}

@media screen and (max-width: 1000px) {
  #ie-logo {
    float: left;
  }

  header {
    display: block;
  }

  .navigation {
    width: 100%;
  }

  ol.navigation > li {
    padding: 5px;
    font-size: 1.4em;
  }

  .sub-navigation > li {
    font-size: 0.8em;
  }

  .navigation > .nav-item .sub-navigation {
    display: none;
    position: static;
    z-index: 10;
    transform: translate(0, 0);
    padding: 0;
    margin: 0;
    height: 0;
    color: #0000;
    background-color: #000B;
    transition: color 0.5s, height 0s;
  }

  .navigation > .nav-item .sub-navigation {
    display: none;
  }

  .navigation > .nav-item:hover .sub-navigation {
    color: #CCC;
  }

  .navigation {
    display: none;
  }

  #mobile-hamburger-checkbox:checked ~ .navigation {
    display: flex;
    flex-direction: column-reverse;
    text-align: left;
  }
}

.classPageForm {
    margin: 0 auto;
}

@media screen and (max-width: 380px) {
    .classPageForm {
        margin: 0;
    }
}

@media screen and (min-width: 381px) and (max-width: 1000px) {
    .classPageForm {
        margin: 0;
    }
}

.classPage {
    width: 20%;
    height: 25%;
    object-fit: contain;
}

@media screen and (max-width: 380px) {
    .classPage {
        width: 90%;
        height: 50%;
        object-fit: contain;
    }
}

@media screen and (min-width: 381px) and (max-width: 1000px) {
    .classPage {
        width: 30%;
        height: 50%;
        object-fit: contain;
    }
}

.registeredTo{
    display:flex;
}

.emailInput{
    margin-top:10px;
    margin-bottom:10px;
}


/*.screenshots {
    width: 100%;
    object-fit: contain;
}

@media screen and (min-width: 381px) and (max-width: 1000px) {

    .screenshots {
        width: 25%;
        object-fit: contain;
    }
}*/


.productPage {
    width: 20%; 
    height: 25%; 
    object-fit:contain;
}

.product-text{
    font-family: 'Times New Roman';
}

@media screen and (min-width: 1001px){
    .product-text {
        height: 5vw;
    }
}

@media screen and (max-width: 1000px) {
    .product-text {
        height: 75vw;
    }
}

@media screen and (max-width: 1000px) {
    .productPage {
        width: 50%;
        height: 50%;
        object-fit: contain;
    }

    .product-text form,div p{
        font-size: small;
    }
}

/* content div */
#content {
  font-family: 'Audiowide', sans-serif;
}

#content > div {
  padding: 5%;
}

/* video stuff */
#video {
  padding: 3px;
}

#video > iframe {
  width: 100%;
  height: 60vh;
}

.highscoretitle{
    text-align:center;
}

#highscores {
    background-image: url("../img/background/HighscoreBackground.jpg");
    background-size: contain;
    background-repeat:no-repeat;
    background-position:center;
    margin-bottom: 5vw;
}

#highscores h1{
    text-align:center;
}

.highScores {
    width: 30vw;
    margin: auto;
    border-collapse:unset;
    border:none;
    padding-left:5vw;
    color:aliceblue;
}

.discord{
    margin-top:10vw;
    margin-bottom: 10vw;
}

.uptodate{
    display: block;
    margin: auto;
    width: 70vw;
}

.signup{
    width:30vw;
    display: inline-block;
    margin-right: 5vw;
}

.socialmedia{
    width:25vw;
    display: inline-block;
}

@media screen and (max-width: 500px) {
    .signup {
        width: 50vw;
        display: inline-block;
        margin-right: 5vw;
    }

    .socialmedia {
        width: 50vw;
        display: inline-block;
    }

}

.coming{
    margin-top: 10vw;
    margin-bottom: 10vw;
}

.join img {
    width: 50vw;
    display: block;
    margin: auto;
}

@media screen and (max-width: 500px){
    .join img{
        display: none;
    }
}

.uptodateicons{
    display: inline-block;
}

@media screen and (min-width: 501px) and (max-width: 999px){
    .uptodateicons {
        display: inline-block;
        margin-left: 40vw;
    }
}   

.uptodateicons > ul > li {
    display: inline-block;
    margin: 4px;
}

.uptodateicons > ul > li img {
    width: 40px;
    height: 40px;
}

.spaceballonepage img{
    width:70vw;
    display:block;
    margin:auto;
}

@media screen and (max-width: 500px){
    .spaceballonepage img {
        width: 90vw;
        display: block;
        margin: auto;
    }
}

.spaceballonepage h1{
    text-align: center;
}

.appStores{
    display:flex;
    list-style-type:none;
    margin: 5vw;
}

@media screen and (max-width: 500px) {

    .appStores {
        display: flex;
        flex-direction: column;
        list-style-type: none;
        margin: 15vw;
    }

    .appStores img {
        width: 70vw;
    }
}

@media screen and (min-width: 501px) and (max-width: 999px) {

    .appStores img {
        width: 20vw;
        margin: auto 5vw;
    }
}

@media screen and (min-width: 1000px){
    .appStores img {
        width: 10vw;
        margin: auto 10vw;
    }
}


#pixlee_container > iframe{
    width:40vw;
    margin:5vw;
}

.feeds h1{
    text-align: center;
}

.feeds ul{
    display:flex;
    flex-direction:row;
    list-style-type: none;
}

@media screen and (max-width:400px) {
    .feeds ul {
        flex-direction: column;
    }
}

.feeds iframe{
    width: 40vw;
    margin: 5vw;
}

@media screen and (max-width: 400px){
    .feeds iframe {
        width: 90vw;
        margin: 5vw;
    }    
}

/* Game List */

.banner{
    width:75vw;
}

#games {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

.game {
  margin: 10px 5px;
  padding: 3px;
  background: black;
  min-width: 20em;
  max-width: 15%;
  height: min-content;
  box-shadow: 0 0 2px 3px #FFF7;
}

.game-title {
  display: block;
  padding-bottom: 3px;
}

.embed-responsive::before{
    display:block;
}

.embed-responsive{
    position: relative;
    width:100%;
}

.embed-responsive-16by9::before{
    padding-top:56.25%;
}

.embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Parent wrapper to carousel. Width can be changed as needed. */
.carousel-wrapper {
    overflow: hidden;
    width: 90%;
    margin: auto;
}

    /* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
    /* Apply 'border-box' to 'box-sizing' so border and padding is included in the width and height. */
    .carousel-wrapper * {
        box-sizing: border-box;
    }

/* We'll be using the 'transform' property to move the carousel's items, so setting the 'transform-style' to 'preserve-3d' will make sure our nested elements are rendered properly in the 3D space. */
.carousel {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* By default we're hiding items (except the initial one) until the JS initiates. Elements are absolutely positioned with a width of 100% (as we're styling for mobile first), letting the content's height dictate the height of the carousel. Our magic property here for all our animation needs is 'transition', taking the properties we wish to animate 'transform' and 'opacity', along with the length of time in seconds. */
.carousel__photo {
    //opacity: 0;
    position: absolute;
    top: 0;
    //width: 100%;
    margin: auto;
    //z-index: 100;
    transition: transform .5s, opacity .5s, z-index .5s;
}

    /* Display the initial item and bring it to the front using 'z-index'. These styles also apply to the 'active' item. */
    .carousel__photo.initial,
    .carousel__photo.active {
        opacity: 1;
        //position: relative;
        z-index: 900;
    }

    /* Set 'z-index' to sit behind our '.active' item. */
    .carousel__photo.prev,
    .carousel__photo.next {
        z-index: 800;
    }

    /* Translate previous item to the left */
    .carousel__photo.prev {
        transform: translateX(-100%);
    }

    /* Translate next item to the right */
    .carousel__photo.next {
        transform: translateX(100%);
    }

/* Style navigation buttons to sit in the middle, either side of the carousel. */
.carousel__button--prev,
.carousel__button--next {
    position: absolute;
    top: 50%;
    width: 3rem;
    height: 3rem;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1001; /* Sit on top of everything */
    border: 1px solid black;
    /*  opacity: 0;  Hide buttons until carousel is initialised 
  transition:opacity 1s;*/
}

.carousel__button--prev {
    left: 0;
}

.carousel__button--next {
    right: 0;
}

    /* Use pseudo elements to insert arrows inside of navigation buttons */
    .carousel__button--prev::after,
    .carousel__button--next::after {
        content: " ";
        position: absolute;
        width: 10px;
        height: 10px;
        top: 50%;
        left: 54%;
        border-right: 5px solid white;
        border-bottom: 5px solid white;
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .carousel__button--next::after {
        left: 47%;
        transform: translate(-50%, -50%) rotate(-45deg);
    }

.game img {
  width: 100%;
}

.game-links {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.game-links-home {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.game-link {
  display: inline-block;
  width: 50px;
  height: 50px;
  padding: 2px;
}

.game-link-home {
    display: inline-block;
    width:9em;
    height: 50px;
    padding: 2px;
    margin-top: 3px;
}

.game-link-bulk {
    display: inline-block;
    width: 39em;
    height: 50px;
    padding: 2px;
    margin-top: 3px;
}

.game-link-product {
    display: inline-block;
    width: 24em;
    height: 50px;
    padding: 2px;
    margin-top: 3px;
}

.bulk-game{
    min-width:77vw;
}

@media screen and (max-width:380px){

    .bulk-game {
        min-width: 20em;
    }
}

/*@media screen and (min-width:381px) and (max-width:1000px) {

    .bulk-game {
        min-width: 20em;
    }
}*/

.trybuy {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 0px 5px 0px 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-size: 2em;
    margin:5px;
}

.trybuy:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 0px 5px 0px 5px;
    color: black;
    text-decoration: none;
    font-size: 2em;
}

.trybuy-bulk {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 0px 5px 0px 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-size: 2em;
    margin: 5px;
    //margin-left:4em;
}

.trybuy-bulk:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 0px 5px 0px 5px;
    color: black;
    text-decoration: none;
    font-size: 2em;
    //margin-left:4em;
}

.trybuy-product {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 0px 5px 0px 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    text-decoration: none;
    font-size: 2vw;
    margin: 5px 5px 5px 0px;
}

.trybuy-product:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 0px 5px 0px 5px;
    color: black;
    text-decoration: none;
    font-size: 2vw;
}

@media screen and (min-width:381px) and (max-width:800px){
    .trybuy-product {
        border: 2px solid rgb(186, 249, 255);
        border-radius: 4px;
        padding: 0px 5px 0px 5px;
        background-color: transparent;
        color: white;
        cursor: pointer;
        text-decoration: none;
        font-size: 3vw;
        margin: 5px 5px 5px 0px;
    }

    .trybuy-product:hover {
        background-color: rgb(186, 249, 255);
        border-radius: 4px;
        border: none;
        padding: 0px 5px 0px 5px;
        color: black;
        text-decoration: none;
        font-size: 3vw;
    }
}

@media screen and (max-width:380px){
    .trybuy-product {
        border: 2px solid rgb(186, 249, 255);
        border-radius: 4px;
        padding: 0px 5px 0px 5px;
        background-color: transparent;
        color: white;
        cursor: pointer;
        text-decoration: none;
        font-size: 5vw;
        margin: 5px 5px 5px 0px;
    }

    .trybuy-product:hover {
        background-color: rgb(186, 249, 255);
        border-radius: 4px;
        border: none;
        padding: 0px 5px 0px 5px;
        color: black;
        text-decoration: none;
        font-size: 5vw;
    }
}

.partner-video {
    display: inline-block;
    width: 1000px;
    height: 200px;
    padding: 2px;
}




/* Form customizations */
.required::before {
  content: "Required";
  position: absolute;
  background: #000;
  padding: 0 3px;
  transform: translate(0,-1.4em);
}

form {
  width: max-content;
  text-align: left;
}

form div {
  margin: 1em;
  text-align: right;
}

form div.required {
  text-align: left;
}

.required {
  border: 1px solid #777;
  width: max-content;
  border-radius: 5px;
  padding: .75em 5px 5px;
}

@media screen and (max-width: 360px) {
    .required {
        width: 96%;
        margin: 0;
        margin-top: 10px;
    }
}

/* Mobile */
.mobile { display: none; }

/* Mobile: Phone */
@media screen and (max-width: 1000px) and (max-height: 500px) {
  #video {
    width: 100%;
    margin: 0 auto;
  }
  #video > iframe {
    width: 100%;
    height: 90vh;
  }
}

@media screen and (max-width: 1000px) {
  #mobile-hamburger-checkbox {
    display:block;
    float: right;
    width: 40px;
    height: 32px;
    position: relative;
    padding: 0;
    margin: 10px 10px;
    opacity: 0;
    z-index: 10;
  }

  #mobile-hamburger-custom {
    display: block;
    position: relative;
    float: right;
    padding: 0;
    margin: 7px 10px;
    left: 60px;
    width: 40px;
    height: 32px;
    background:
            repeating-linear-gradient(
                    0deg,
                    #DDD,
                    #DDD 6px,
                    #000 6px,
                    #000 12px
            );
  }

  .mobile-drop-checkbox {
    display:block;
    width: 32px;
    height: 32px;
    position: relative;
    padding: 0;
    margin: 0;
    opacity: 0;
    z-index: 10;
    float: right;
  }

  .mobile-drop-custom {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    right: -32px;
    float: right;
    text-align: center;
    vertical-align: center;
    transition: transform 0.5s;
    background-color: #000;
  }

  .mobile-drop-checkbox:checked ~ .mobile-drop-custom {
    transform: rotate(90deg);
  }

  .mobile-drop-checkbox:checked ~ .sub-navigation {
    display: flex;
    color: #CCC;
    height: auto;
    flex-direction: column;
  }

}

#cart{
    width:800px;
}

#cart col{
    width:200px;
}

#cart img {
    width: 100%;
}

#cart input[type=image]{
    position:absolute;
    right:535px;
    margin:10px;
}

@media screen and (max-width: 800px){ 
    #cart{
        width: 370px;
    }
    
    #cart img {
        width:100%;
    }

    #cart th,td {
        font-size:small;
    }

    #cart input[type=image] {
        position: absolute;
        right: 15px;
        margin: 10px;
    }
}


@media screen and (min-width: 1300px) and (max-width: 1990px) {

    #cart input[type=image] {
        position: absolute;
        right: 1200px;
        margin: 10px;
    }
}

@media screen and (min-width: 2000px) {

        #cart input[type=image] {
            position: absolute;
            right: 70vw;
            margin: 10px;
        }
}

table {
    border: 1px solid #ccc;
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

    table tr {
        border: 1px solid #ddd;
        padding: 5px;
    }

    table th, table td {
        text-align: center;
    }

    table th {
        text-transform: uppercase;
        letter-spacing: 1px;
    }


@media only screen and (max-width: 800px) {

    #flip-scroll .cf:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    #flip-scroll * html .cf {
        zoom: 1;
    }

    #flip-scroll *:first-child + html .cf {
        zoom: 1;
    }

    #flip-scroll table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
    }

    #flip-scroll th,
    #flip-scroll td {
        margin: 0;
        vertical-align: top;
    }

    #flip-scroll th {
        text-align: left;
    }

    #flip-scroll table {
        display: block;
        position: relative;
        width: 100%;
    }

    #flip-scroll thead {
        display: block;
        float: left;
    }

    #flip-scroll tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
    }

    #flip-scroll thead tr {
        display: block;
    }

    #flip-scroll th {
        display: block;
        text-align: right;
    }

    #flip-scroll tbody tr {
        display: inline-block;
        vertical-align: top;
    }

    #flip-scroll td {
        display: block;
        text-align: left;
    }
}


@media screen and (max-width: 800px) {

    .card table {
        border: 0;
    }

        .card table thead {
            display: none;
        }

        .card table tr {
            margin-bottom: 20px;
            display: block;
            border-bottom: 2px solid #ddd;
            box-shadow: 2px 2px 1px #dadada;
            padding:10px;
        }

        .card table td {
            display: block;
            font-size: 13px;
            text-align: left;
            transform: translate(0px, 7px);
            padding:0px;
            padding-bottom:5px;
        }

            .card table td:last-child {
                border-bottom: 0;
            }

            .card table td::before {
                content: attr(data-label);
                text-transform: uppercase;
                font-weight: bold;
            }

    .card tbody {
        line-height: 0 !important;
    }
}

#partner-signup input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
}

#students input[type=submit] {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

#students input[type=submit]:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 5px;
    color: black;
}

#grades {
    display: flex;
    flex-direction: row;
}

@media screen and (max-width:380px) {
    #grades {
        display: flex;
        flex-direction: column;
    }

    .product-icon {
        display: contents;
    }
}

@media screen and (min-width:1000px) {
    .grades-player-name {
        border: 1px solid #ddd;
    }
}


@media screen and (min-width:381px) and (max-width:800px) {
    #grades {
        display: flex;
        flex-direction: column;
    }
}

.gradeSort{
    color:white;
    text-decoration:none;
}

@media screen and (max-width:400px){
    .gradeSort{
        color: white;
        text-decoration: none;
        font-size:3em;
    }

    #sortTD{
        text-align:center;
    }
}

@media screen and (max-width:380px){
    .sm-icons{
        margin-top: 10px;
    }
}

@media screen and (min-width:381px) and (max-width:800px) {
    .sm-icons {
        margin-top: 10px;
    }
}


#grades img {
    width: 300px;
}

@media screen and (max-width:380px) {
    #grades img {
        width: 150px;
    }
}

#grades input[type=submit] {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

#grades input[type=submit]:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 5px;
    color: black;
    margin-bottom: 5px;
    margin-bottom: 5px;
}

@media screen and (min-width:1000px){
    .login {
        display: flex;
    }
}

@media screen and (min-width:1000px) {
    .login {
        background-image: url("../img/background/login.png");
        background-size: 100%;
    }
}

@media screen and (min-width:1000px){
    #login {
        padding-left:15vw;
    }
}


#login input[type=submit] {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

#login input[type=submit]:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 5px;
    color: black;
}

#user input[type=submit] {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

#user input[type=submit]:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 5px;
    color: black;
}

#user input[type=text] {
    height: 25px;
}

#updatepassword{
    width:auto;
    display:flex;
}

.pwdinput{
    margin-top:6px;
    margin-bottom: 7px;
}

.accountInfo{
    margin-top:1vw;
    margin-bottom: 1vw;
}

@media screen and (min-width:1000px){
    .accountDiv {
        margin-left: 25vw;
    }
}


#students input[type=text] {
    height:25px;
}

#billing input[type=submit] {
    border: 2px solid rgb(186, 249, 255);
    border-radius: 4px;
    padding: 5px;
    background-color: transparent;
    color: white;
    cursor: pointer;
}

#billing input[type=submit]:hover {
    background-color: rgb(186, 249, 255);
    border-radius: 4px;
    border: none;
    padding: 5px;
    color: black;
}

.card table li {
    list-style-type: none;
    margin:10px;
    margin-left:0px;
    /*margin-top:12px;
    margin-bottom: 20px;*/
}

@media screen and (max-width:380px) {
    .card table form {
        width: 50%;
    }
}

.backtotop{
    color:white;
}

.class-icons{
    border:none;
    border-collapse:inherit
}


.className li {
    list-style-type: none;
    width:90vw;
}

#products {
    display: block; /* Remove bullet points; allow greater control of positioning */
    padding: 0; /* Override defaults for lists */
    margin: 0; /* Override defaults for lists */
    width: 100%; /* Get the row full width */
    background-image: url(../img/background/space.jpg);
    background-size:50%;
}


#products form {
    width: 50%;
}

#products li {
    //display: inline-block; /* Get all images to show in a row */
    //width: 25%; /* Show 4 logos per row */
    //text-align: center; /* Centre align the images */
    list-style-type: none;
    padding-right: 20px;
    float: left;
}

@media (max-width: 960px) and (min-width: 501px) {
    #products form{
        width:70%;
    }
    #products li {
        //width: 43%;
        //display: inline;
        list-style-type: none;
        padding-right: 1px;
        float: left;
    }
    /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}

@media (max-width: 500px) {
    #products form {
        width: 110%;
    }

    #products li {
        //width: 50%;
        //display: inline;
        list-style-type: none;
        padding-right: 1px;
        float: left;
    }
    /* On small screens, show one logo per row */
}

@media screen and (max-width:1000px){
    .productsPage {
        width: 90vw;
    }
}


.productsPage{
    display:block;
    margin:auto;
}

.screenshot-div {
    margin: 10px 5px;
    padding: 3px;
    background: black;
    min-width: 20em;
    max-width: 15%;
    height: min-content;
    box-shadow: 0 0 2px 3px #FFF7;
}

.screenshot-div img{
    width:100%;
    height:inherit;
}

.screenshot-div a{
    width:100%;
    height:inherit;
}

#productImage img{
    width:100%;
}

#product p::before{
    content:icon

}

/*#productList li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    float: left;
}

@media screen and (max-width: 800px) {
    #productList li {
        display: inline;
        list-style-type: none;
        padding-right: 1px;
        float: left;
    }
}*/

.al-product-name {
    border-style: none;
    background-color: black;
    color: rgb(186, 249, 255);
    font-weight: bold;
    padding-left: 2px;
    text-align: center;
}

#astronauts {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

#astronauts a {
    width: 45%;
    margin: 2.4%;
    padding: 0;
}

#astronauts img {
    width: 100%;
}

@media screen and (max-width:380px) {
    #astronauts img {
        width: 50%;
    }
}

.newsletter{
    width:100%;
}

.newsletter-img-div{
    display: flex;
    flex-direction: row;
}

.newsletter-img-inline {
    width:25%;
    height:50%;
}

@media screen and (max-width:400px){
    .newsletter-img-div{
        flex-wrap: wrap;
        justify-content: center;
    }

    .newsletter-img-inline{
        width:90%;
        height:50%;
        margin:5%;
    }
}

.newsletter-img{
    margin-left:25%;
}

.newsletter-img-flex {
    margin:5%;
    width:40%;
    height:50%;
}

.newsletter a{
    word-wrap:break-word;
}

@media screen and (max-width:801px) {
    #home-video {
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .newsletter {
        width: 100%;
    }
}

.dashboard{
    display:inline-block;
    margin:5vw;
    width:20vw;
    margin-top:2vw;
    margin-bottom:2vw;
    padding-top:2vw;
    padding-bottom:2vw;
}

@media screen and (max-width:400px){
    .dashboard {
        margin: 1vw;
        padding: 1vw;
        display: block;
        width:auto;
    }
}


#careers li {
    width: 30%;
}

#careers dl{
    width: 300%;
}

#careers img {
    width: 100%;
}

#team img {
    width: auto;
}


@media screen and (max-width:600px) {
    #careers li {
        width: 100%;
    }

    #careers img {
        width: 100%;
    }

    #careers dl {
        width: 100%;
    }

    #team li {
        width: 100%;
    }

    #team img {
        width: auto;
    }
}

@media screen and (min-width:601px) and (max-width:1000px) {
    #careers li {
        width: 100%;
    }

    #careers img {
        width: 100%;
    }

    #careers dl {
        width: 100%;
    }
}

.img-center {
    margin: 0 auto;
}

/* flow list */
.flow-list {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  font-weight: bold;
  text-align: center;
}

.flow-list li {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: 1em;
    width: 20%;
}

.product li {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 20%;
}

.flow-list dl {
  text-align: left;
  padding: 0.5em;
  font-weight: normal;
}

.flow-list dd {
  text-align: left;
}

.flow-list dl dd ul {
  list-style: square;
  padding: 0 0 0 2em;
}

.flow-list dl dd ul li {
  display: list-item;
  list-style: square;
  padding: 0;
  margin: 0;
}


.flow-list li img {
    padding-bottom: 1em;
    width: 170%;
}

.product li img {
    padding-bottom: 1em;
    width: 170%;
}

.flow-list li span {
  color: #555;
  font-weight: normal;
}

.flow-list-news {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  font-weight: bold;
  text-align: center;
}

.flow-list-news li {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: auto;
    width: 20%;
}

.flow-list-news li img {
    padding-bottom: 1em;
}

/* mission */
#mission {
  height: min-content;
  padding: 5%;
}

@media screen and (max-width: 800px) {
    #mission {
        width:100%;
        height: min-content;
        padding: 10%;
    }
}

/* Site Map */
.site-map {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    font-size: 1.2em;
}

@media screen and (max-width:400px){
    .site-map {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        font-size: 1.2em;
    }
}


.site-map-item {
  padding: 0.5em;
  list-style: none;
}

.sub-site-map {
  padding-left: 1em; 
  font-size: 1em;
}

.sub-site-map a {
  font-size: 0.8em;
}

.site-map a {
  text-decoration: none;
  color: inherit;
}

.site-map a:active {
  text-decoration: none;
  color: inherit;
}

.site-map a:visited {
  text-decoration: none;
  color: inherit;
}

.site-map a:hover {
  text-decoration: none;
  color: #FFF;
}

/* Footer */
footer {
  padding: 0 20%;
  font-size: 0.8em;
  text-align: center;
  font-family: 'Audiowide', sans-serif;
  background-color: black;
}

footer * {
  margin: 2px;
}

.footer-links {
  float:left;
  text-align: left;
}

.footer-links > * {
  display: block;
  text-decoration: none;
  color: inherit;
}

.socialmedia-icons {
  float: right;
  display: flex;
}

.socialmedia-icons > li {
  display: inline-block;
  margin: 4px;
}

.socialmedia-icons > li img {
  width: 40px;
  height: 40px;
}

.mini-newsletter {
  float: right;
  clear: right;
}

.mini-newsletter form {
  display: flex;
  justify-content: center;
}

.mini-newsletter form div {
  padding: 0 2px;
  margin: auto 0;
}

.spaceball-logo{
    width: 80vw;
}

.spaceball-banner{
    width:80vw;
}

.tournament-calendar{
    width: 80vw;
}

.twitch-embed{
    width: 40vw;
    margin-left: 10vw;
}

.insta-feed{
    width: 40vw;
    margin-right: 10vw;
}