html {
  scroll-behavior: smooth !important;
}

html,
body {
  max-width: 100% !important;
  user-select: none !important;
}

img {
  max-width: 100%;
  display: block;
}

#navbar-main-container {
  top: 0 !important;
}

@media only screen and (max-width: 450px) {
  .blog-item-content-container .column-container {
    padding: 0 !important;
  }
}

.add-to-cart-label {
  padding: 0.1em 0.5em;
  border-radius: 0.2em;
  margin-left: 2em;
  background-color: black;
  color: white;
  transition: 0.21s all ease-in-out;
}
  .add-to-cart-label:hover {
    background-color: #2ed573;
    color: white;
  }

/* div:not(.slick-slider),
div:not(.slick-slider .slider-item) {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
} */

p {
  font-size: 100%;
}

@media (max-width: 500px) {
}
@media (min-width: 501px) {
}

#scroll-to-top-btn {
  position: fixed;
  z-index: 100;
  text-decoration: none;
  cursor: pointer;
  left: 0.5em;
  bottom: 0.5em;
  color: black;
  background-color: white;
  /* width: 83px; */
  padding: 0;
  width: 34px;
  height: 34px;
  font-size: 100%; font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.3em;
  transition: all 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
#scroll-to-top-btn:hover {
  bottom: 0.75em;
}

/* START: UTILITY */
.null-nav-item {
  cursor: pointer;
}

.header-icons {
  padding-bottom: 0.3em !important;
}

.masthead-brand {
  padding-top: 0.82em !important;
}

.notice-header {
  font-size: 120% !important;
}

.navbar-social-icons {
  text-align: right !important;
}

.navbar-toggle {
  margin-right: 0 !important;
}

.navbar-social-icons a {
  padding-right: 1.3em;
  font-size: 120%;
}

.navbar-social-icons a:last-of-type {
  padding-right: 0.2em;
  /* font-size: 120%; */
}

.navbar-expandables {
  padding: 0 0 0.5em 0;
  width: 100%;
}
  .navbar-expandables li {
    float: right !important;
  }
  /* .navbar-expandables li:nth-child(2) {
    padding-right: 1em;
  } */
  .nav li:first-of-type {
    padding-left: 1.4em;
  }

#nav-main-logo-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.free-play-link {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 150%;
  width: 100%;
  margin: 0 auto;
}

.amber-capsule-container .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 3em;
}
  .amber-capsule-container .row img {
    width: 100%;
  }

.hyper-green {
  color: #55efc4 !important;
}

.hyper-blue {
  color: #0652DD !important;
}
.hyper-pink {
  color: #D980FA !important;
}
.hyper-red {
  color: #ff073a !important;
}

#augmented-reality-toys-container {
  padding-top: 10em;
}

.dropdown-menu {
  min-width: 400px;
  max-height: auto;
  height: fit-content;
  margin: auto;
  overflow: auto;
  float: left;
  background-color: black;
  border: 1px solid white;
  padding-bottom: 1.4em;
}
  .dropdown-header {
    margin-bottom: 0;
  }
  .dropdown-item {
    display: block;
    color: white;
    padding-left: 1.5em;
    padding-top: 0.7em;
  }
  .dropdown-divider {
    padding: 0.1em;
  }

#mc_embed_signup form {
  padding-left: 0 !important;
}
#mc_embed_signup .mc-field-group {
  width: 100% !important;
}
#mc_embed_signup .button {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 auto 1.2em auto !important;
}

.blog-standard-list ul {
  list-style-type: disc;
}
.blog-standard-list li {
  font-size: 130%;
}

#navbar_main {
  overflow: visible;
}

.blog-dual-section > div {
  text-align: left;
  height: auto;
  padding-left: 0;
}
.blog-dual-section > div > img {
  min-height: 470px;
}

.blog-dual-tilt-right {
  
}

#legend-container-title {
  font-weight: 700;
  font-size: 200%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.leadership-title {
  padding-bottom: 0.5em;
}

.leadership-container {
  display:flex;
  padding: 0 0 2em 0;
}
  .leadership-container-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .leadership-container-item-img {
    width: 40%;
  }
  .leadership-container-item-img > img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    object-position: center top;
  }
  .leadership-container-item-img > h3,h4 {
    text-align: left;
  }
    .leadership-container-item-img > h3 {
      color: #6c5ce7;
    }
  .leadership-container-item-bio {
    width: 100%;
    height: 100%;
    padding-left: 2em;
  }
  .about-us-container-item-bio {
    width: 100%;
    height: 100%;
    padding-left: 0;
  }
  .partners-list li {
    font-size: 120%;
  }

@media only screen and (max-width: 700px) {
  .leadership-container-item {
    flex-direction: column;
  }
    .leadership-container-item-img {
      width: 100%;
    }
      .leadership-container-item-img > img {
        width: 100%;
        max-height: 430px;
      }
    .leadership-container-item-bio {
      padding-left: 0;
    }
}

#game-legend-list li {
  padding-top: 1em;
  font-size: 150%;
}
#game-legend-list li a {
  color: black;
}

.xl-top-margin {
  margin-top: 1.4em;
}

.btn-group {
  margin-top: 0.7em;
  padding-bottom: 1.2em;
  margin-right: 0 !important;
}

.download-app-column {
  display: flex; 
  flex-direction: row; 
  justify-content: space-evenly; 
  align-items: center;
}
  .download-app-column h3 {
    padding-right: 3em;
    font-weight: 600;
    letter-spacing: 0.1em;
    width: 30%;
    min-width: 140px;
  }

.floating-button-bottom-right {
  position: fixed;
  cursor: pointer;
  z-index: 1000;
  background-color: white;
  color: black;
  font-weight: 600;
  min-width: 5em;
  width: auto;
  height: auto;
  padding: 0.5em 1em;
  border-radius: 1.1em;
  
  left: 3em;
  bottom: 1em;
}
#latest-news-header {
  background-color: black;
  width: 95%;
  border-radius: 0.3em;
  margin: 0 auto !important;
  /* margin-left: 2em;
  margin-right: 2em; */
  /* width:500px; */
  /* margin: auto auto; */
}
.slick-news-slider {
    padding: 2.2em;
    width: 100%;
    /* width:500px; */
    margin: auto auto;
    border-radius: 2em;
    /* margin: 0 auto; */
}
@media only screen and (max-width: 830px) {
  .slick-news-slider {
    width: 90%;
  }
  #latest-news-header {
    width: 80%;
  }
}
@media only screen and (max-width: 450px) {
  #latest-news-header h1 {
    margin-left: auto;
    margin-right: auto;
  }
}
.slider-item {
  padding: 0.7em;
}
.slider-item > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  background-color: white;
  color: black;
  height: 100%;
  min-height: 550px;
  text-align: left;
  border-radius: 1.6em;
}
@media only screen and (min-width: 600px) and (max-width: 800px) {
  .slider-item > div {
    min-height: 650px;
  }
}

.slider-item-d-flex {
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
  .slider-item-d-flex > .slider-item-information {

  }
  .slider-item-d-flex > .slider-item-actionbar {
    padding: 1.2em;
  }

.slider-item-header {
  padding: 0 1.2em 0 1.2em;
}
  .slider-item-header h3 {
    font-size: 120%;
  }
.slider-item-body {
  padding: 1.2em 1.2em 0 1.2em; 
  height: 100%;
}
.slider-item img {
  width:500px;
  height:200px;
  object-fit: cover;
  object-position: top center;
}

/* @media only screen and (max-width: 1200px)
and (orientation:landscape) {
  .ar-tcg-logo img {
    width: 50% !important;
  }
} */

@media only screen and (max-width: 1199px) {
  .navbar-social-icons {
    display: none;
  }
  .navbar-social-icons-mobile-vis {
    display:block !important;
  }
}
@media only screen and (min-width: 1200px) {
  .navbar-social-icons {
    display: block;
  }
  .navbar-social-icons-mobile-vis {
    display: none !important;
  }
}

@media only screen and (max-width: 1200px) {
  .navbar-options {
    margin-top: 1em !important;
    width: 60% !important;
  }
  #hero-home-hero-section {
    margin-top: 0 !important;
  }
}


@media only screen and (max-width: 1200px) {
  .xl-top-margin {
    margin-top: 0;
  }
  .navbar-expandables li:not(.no-top-margin):last-of-type {
    margin-top: 2em !important;
  }
  .navbar-options {
    margin-top: 0;
    text-align: right;
    width: 100%;
  }
}

@media only screen and (max-width: 990px) {
  .navbar-expandables {
    width: 200%;
  }
  .navbar-expandables li:last-of-type {
    margin-top: 0 !important;
  }

  .blog-item-banner-img {
    padding-top: 0 !important;
  }
  .blog-item-main-container {
    padding: 0 0 2vh 0 !important;
  }
}
@media only screen and (max-width: 800px)
and (orientation: portrait) {
  .download-app-column {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
  }
    .download-app-column h3 {
      text-transform:uppercase;
      padding-right: 0;
      /* font-weight: 600;
      letter-spacing: 0.1em; */
    }
}
@media only screen and (max-width: 800px) {
  .navbar-options {
    width: 100% !important;
    margin-top: 0.4em !important;
    text-align: right;
  }
}
@media only screen and (max-width: 900px)
and (orientation: landscape) {
  .ar-tcg-logo {
    display: none;
  }
}
@media only screen and (max-width: 800px)
and (orientation: landscape) {
  /* .header-icons {
    display: none !important;
  } */
  #hero-home-hero-section {
    margin-top: 3.4em !important;
    /* margin-top: 7em !important; */
  }
    #herocontentbar_content {
      padding-top: 0 !important;
    }
  .navbar-options {
    width: 100% !important;
    margin-top: 0.4em !important;
    text-align: right;
  }
    .navbar-options li a {
      font-size: 80% !important;
    }
  .navbar-expandables {
    width: 100% !important;
  }
  .dropdown-menu {
    max-height: 200px;
  }
}

@media only screen and (max-width: 450px)
and (orientation: portrait) {
  .navbar-options {
    width: auto !important;
    margin-top: 0;
  }
  .navbar-expandables {
    width: 100%;
  }
  
}

@media only screen and (max-width: 700px) and (orientation:portrait){
  .navbar-expandables {
      flex-direction: column;
      align-items: flex-end;
  }
}

@media only screen and (max-device-width: 1000px) and (orientation:landscape){
  .hero {
    background-position: center -20%;
  }
  .ks-logo {
    display: none !important;
  }
  .inner {
    margin-top: 30vh !important;
    padding: 0.5em !important;
  }
}
@media only screen and (max-device-width: 800px) and (orientation:landscape){
  .hero {
    background-position: center 0%;
  }
}
@media only screen and (max-device-width: 800px) and (orientation:landscape){
  .hero {
    background-position: center 20%;
  }
}

@media only screen and (max-width: 900px) and (orientation:landscape){
  #attention-banner {
      display: none;
  }
  .genesis-ks {
      display: none;
  }
  /* #herocontentbar_content { */
      /* padding-top: 8em;    */
  /* } */
  .navbar-options li a {
      font-size: 60%;
  }
  .navbar-expandables {
      padding-top: 0em;
  }
  .navbar-expandables button {
      font-size: 60%;
  }
  .dropdown-menu {
      max-height: 200px;
      min-width: 220px !important;
  }
  .dropdown-item {
      padding-right: 1.5em;
  }
}
@media only screen and (max-width: 700px) and (orientation:landscape){
  .dropdown-menu {
      max-height: 150px;
      min-width: 200px;
  }
  
}

@media only screen and (max-width: 767px) {
  #navbar_main {
    padding: 0;
    width: 100%;
  }

  #legend-container-title {
    flex-direction: column;
  }

  .see-all-ar-games-btn-group {
    margin-left: 0 !important;
    margin-right: auto !important;
    padding-bottom: 0.5em;
  }

  .footer-icons {
    margin-bottom: 1em !important;
  }
  /* .dropdown-menu-left {
      right: 0;
      left: auto;
    } */
  /* .dropdown-menu {
    position: relative;
  } */

  .dropdown-menu {
    min-width: 280px;
  }

  /* .blog-item-flip img { */
  /* .blog-item-banner-img {
    padding-top: 3em !important;
  } */

  .blog-item-banner {
    padding-top: 2em;
  }

  #blog-section p {
    font-size: 150% !important;
  }

  #legend-container-title h2 {
    font-size: 120% !important;
    padding-right: 0.5em;
  }

  #list-legend-ul {
    padding-right: 3em !important;
  }
}

@media only screen and (max-width: 560px) {
  #game-legend-list {
    padding-left: 0 !important;
  }
  #game-legend-list li {
    font-size: 100% !important;
  }
}


@media only screen and (max-width: 450px) {
  .dropdown-menu {
    max-height: 160px;
  }

  #gatcha-main-container .dropdown-menu {
    min-width: 180px !important;
  }

  .pill-container {
    display: none !important;
  }
  .footer-links a:last-of-type {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  .btn-group button {
    white-space: normal;
    text-align: left;
  }
  #mc_embed_signup form {
    margin: 0 auto !important;
    /* display: flex !important; */
    width: 100% !important;
    padding: 10px 0 10px 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }
    #mc_embed_signup .mc-field-group {
      width: 100% !important;
    }
    #mc_embed_signup .button {
      width: 100% !important;
    }
}

@media only screen and (max-width: 350px) {
  .ar-tcg-logo {
    display: none;
  }
  #gatcha-main-container .dropdown-menu {
    min-width: 110px !important;
  }
  .dropdown-header,
  .dropdown-item {
    padding-left: 0.5em;
  }
  .dropdown-menu {
    max-height: 160px;
  }
}
@media only screen and (max-width: 250px) {
  #gatcha-main-container .dropdown-menu {
    min-width: 70px !important;
  }
  .btn-group button {
    padding: 0 0.1em;
  }
  .card-main-container > div {
     padding-left: 0 !important;
  }
}

/* END: UTILITY */

/* HOME */

#main-cover-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* END HOME */

/* FAQ START */

.faq-header {
    font-weight: 700;
    color: grey;
}

/* FAQ END */

.ar-card-generation-section {
  /* background-color: white; */
  color: white;
  padding: 1em;
  text-align: center;
  /* width: auto;
  margin: 0 13% 3em 13%; */
  font-weight: 700;
}
/* @media only screen and (max-width: 820px) {
  .ar-card-generation-section {
    margin: 0 5% 3em 5%;
  }
}
@media only screen and (max-width: 747px) {
  .ar-card-generation-section {
    margin: 0 10% 3em 10%;
  }
} */

/* START HEROES */

.stripe-pricing-container {
  background-color: white;
  padding: 2em 0 !important;
}

.pill-container {
  margin: 0.6em auto;
  width: 100%;
}

.xpill-5-row {
  width: 19.5% !important;
}

.xpill {
  width: 24.5%;
  height: 100%;
  /* padding: 0 0.3em; */
}
.xpill:first-of-type {
  padding-left: 0;
}
.xpill:last-of-type {
  padding-right: 0;
}

.xpill-22 {
  width: 24.3% !important;
}
@media only screen and (max-width: 1000px) {
  .xpill-22 {
    width: 24.7% !important;
  }
}

.cover-container {
  height: 100%;
}

#herocontentbar-2 {
  position:absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding-top: 6em; */
  margin-top: 0 !important;
  height: 100%;
  width: 100%;
}

.ar-card-headshot-container {
  display: flex;
  justify-content: center;
  padding: 0 1em;
}

.ar-card-headshot {
  padding-top: 3em;
  width: 50%;
  max-width: 140px;
  min-width: 20px;
  height: auto;
  margin: 0 auto;
}
  .ar-card-headshot--w30 {
    width: 30%;
  }
  .ar-card-headshot--w40 {
    width: 40%;
  }

  @media only screen and (min-width: 1200px) {
    #navbar_main {
      height: auto !important;
      display: flex !important;
      flex-direction: column;
      align-items: flex-end;
      padding-top: 0.5em;
    }
  }

@media only screen and (max-width: 1200px) {
  .masthead-nav > li > a {
    font-size: 14px;
  }
  /* #gatcha-main-container {
    padding-top: 11em;
  } */
  .navbar-expandables {
    width: 100%;
  }
}
@media only screen and (max-width: 1150px) {
  #hero-genesis-logo-how-to {
    display: none;
  }
  .ar-card-headshot-container {
    display: none;
  }
}
@media only screen and (max-width: 920px) {
  .masthead-nav > li > a {
    font-size: 16px;
  }
}
@media only screen and (max-width: 767px) {
  /* #hero-genesis-logo-how-to {
    display: block;
  } */
  #gatcha-main-container {
    padding-top: 0em;
  }
}

@media only screen and (max-width: 250px) {
  #hero-genesis-logo-how-to {
    display: block;
  }
  #hero-headshot-container {
    display: none;
  }
  .story-container {
    padding: 1em 0 !important;
  }
}

.card-main-container {
  margin: 3em auto 0 auto;
  width: 100%;
}

#gatcha-hero-header-text-container {
    text-align: left;
}

#hero-header-text-container {
    text-align: right;
}
  #hero-header-text-container h1,
  #hero-header-text-container h2 {
    line-height: 1.2em;
  }

.pill-container:first-of-type {
  padding-top: 2em;
}
.hero-header-pill-container {
  display: flex;
  flex-direction: row;
  text-align: right;
  justify-content: flex-start;
  padding-right: 0;
  padding-left: 0;
}
.hero-header-gatcha-pill-container {
  display: flex;
  flex-direction: row;
  text-align: right;
  justify-content: center;
}

#hero-main-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end !important;
    margin: 4em auto; 
    width: 80%;
}

.promo-girl {
    width: 100%;
    height: auto;
}

.genesis-emoji {
  font-size: 1000%;
  display: inline-block;
  top:0;
  left: 0;
}

#blog-section p {
font-size: 120%;
}
#blog-section .tilt-obj{
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
#blog-section .tilt-obj:hover {
  border: black 50px solid !important;
  border-radius: 3em !important;
}
.blog-item-banner {
  width: 100%;
  margin: 4em auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
  .blog-item-banner-img {
    /* padding-top: 1em; */
    width: 100%;
    height: auto;
    max-height: fit-content;
    object-fit: cover;
  }
  .blog-item-banner h2 {
    line-height: 1.3em !important;
  }

/* END HEROES */

/* START BLOGS */
.last-blog-item {
  padding-bottom: 2em !important;
}
/* END BLOGS */

#herocontentbar {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
  .ks-logo {
    /*   */
    max-width: 250px !important;
    display: inline;
  }
  .main-header {
    color:white;
  }
  .main-subheader {
    color:#F2F2F2;
  }

.masthead-brand {
    font-size: 130%;
    text-align: left;
    padding: 0.2em 0 0 1em;
}

#howtoplaytext {
    font-weight: 400;
    display: none;
    opacity: 0;
    overflow: scroll;
    overflow-x: hidden;
    height: auto;
    overflow: hidden;
}
  #howtoplaytext .lead a {
    color: #2ecc71;
  }
  .howtoplay-characters {
    color: #7d5fff !important;
  }
  .notice-header {
    font-size: 170% !important;
    font-weight: 800;
    display: block;
    color:white;
  }
  .notice-body {
    color:#F2F2F2;
    width: 60%;
    text-align: center;
    margin: 0 auto;
  }
  .notice-cta {
    width: 60%;
    text-align: center;
    margin: 0 auto;
  }
    .notice-cta a {
      color:#f39c12;
    }
  #close {
    font-weight: 400;
    color: white;
  }

.cover-heading{
  font-size: 100%;
  /* font-weight: 600; */
}
.what-is-genesis-header {
  margin: 1rem 0;
  font-size: 150%;
}

.footer-distributed {
  margin: 0;
  padding-bottom: 2em;
}
  .footer-right {
    float: none;
  }

.footer-logo {
  width: 100%;
  margin: 0;
  max-width: 250px;
}

.story-container {
    padding: 10vh 2em 10vh 2em;
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 0.4);
}
.story-container p{
    font-size: 1.7em !important;
    font-weight: 500;
    width: 80%;
    margin: 4vh auto;
}

  .download-android-btn {
    width: 280px;
    display: inline;
  }
  .download-ios-btn {
    /* opacity: 0.5; */
    /* padding: 20px; */
    width: 280px;
    display: inline;
  }
  .half-opacity-btn {
    opacity: 0.5;
  }

#legend-container {
  text-align: left;
  height: auto;
  margin: 1em 0;
  padding: 1.5em 0 1.5em 0; 
  background-color: white;
  border-radius: 0.3em;
  border: 3px solid #6c5ce7;
  color: black;
}

.occult-bg {
  background-color: #010B1E;
  background-image: url('../img/occult-bg.webp');
}

#Awards {
    background-image: none !important;
    background-color: #010b1f !important;
    z-index: -1;
    -webkit-box-shadow: 0px 6px 1px 0px rgba(0,0,0,1);
    -moz-box-shadow: 0px 6px 1px 0px rgba(0,0,0,1);
    box-shadow: 0px 6px 1px 0px rgba(0,0,0,1);
}

  #Awards .emoji-container {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 1vh; 
    padding: 20px;
  }

  .award-container {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 1vh; 
    padding: 20px;
  }

.video-js {
    margin: 0 auto;
    position: relative !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 400px !important;
    max-width: 900px;
    /*-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);*/
}

.blog-item-main-container-no-top-padding {
  padding: 0 0 2vh 0 !important;
}

.blog-item-main-container {
  /* width: 80%; */
  height: auto;
  padding: 9vh 0 2vh 0;
  margin: 0 auto;
  text-align: left;
}

@media only screen and (max-width: 991px) {
  .column-container {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .blog-item-main-container {
    padding-top: 0 !important;
  }
  .blog-item-banner {
    margin: 0em auto !important;
  }
  .blog-item-banner-img {
    padding-left: 0;
    padding-right: 0;
  }
  .blog-item-flip {
    padding: 0em !important;
  }
  .blog-item-flip img {
    padding-left: 0 !important;
    padding-right: 1em !important;
  }
}

@media only screen and (max-width: 880px) {
  .footer-logo {
    margin: 0 auto !important;
  }
}

@media only screen and (max-width: 767px) {
  .blog-item-banner-img {
    padding-left: 0;
    padding-right: 0;
  }
}

.numbered-list-span-row-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
}
.numbered-list-span-row-container span {
  font-size: 200%;
}

.column-container {
    padding: 0 5% 0 5%;
}

#slider-container {
  height: auto;
  width: 100%;
}

.container__title {
  padding: 0;
  text-transform: uppercase;
  margin-bottom: 1em;
}

.slider {
  height: 85vh;
  padding-top: 100px;
}

.zoomer__image {
  max-width: 350px;
  border-radius: 8px;
}

.slide__title {
  text-transform: uppercase;
  line-height: 1.1em;
  padding-top: 100px;
  padding-bottom: 50px;
}

.slider__nav {
  bottom: 1em;
  z-index: 100000;
}

.content__item-inner {
  text-align: left;
}

/* FOOTER */
.footer-distributed {
      padding-bottom: 2em;
      margin-top: 0 !important;
      padding-top: 80px !important;
}
.footer-right {
  float: none;
}

.character-spotlight {
padding: 10vh 4% 6em 4%; 
/* padding-bottom: 5em; */
/*text-align: left;*/
}

.genesis-hero-cards {
width: 95%;
margin: 0 auto;
display: flex; flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

.genesis-card {
/* padding: 6% !important; */
margin: 0;
margin: 1%;
margin-bottom: 4em;
transform-style: preserve-3d;

/* box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); */


/* min-width: 120px; */
/* max-width: 100% !important; */
/* width: auto !important; */
/* max-height: 200px !important; */
/*max-width: 100px;*/
}

.genesis-card {
  margin: 0;
  margin: 1%;
  margin-bottom: 4em;
  transform-style: preserve-3d;
}

.card-info-container {
  background-color: black;
  width: 100%;
  height: 100px;
  border-radius: 0 0 0.3em 0.3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* border-top: 1px solid white; */
}

.genesis-hero-cards img {
width: 300px !important;
height: auto;
border-radius: 0.3em 0.3em 0 0;
}
.genesis-hero-cards h1,
.genesis-hero-cards h2 {
font-size: 180%;
font-weight: 600;
margin: 0 auto;
/* position: absolute;
top: 81%;
bottom: 0;
left: 0;
right: 0; */
/* transform: translateZ(20px) */
}

.genesis-hero-cards h3 {
  font-size: 180%;
  font-weight: 500;
  margin: 0 auto;
  text-decoration: none !important;
  /* position: absolute;
  top: 87%;
  bottom: 0;
  left: 0;
  right: 0; */
}

.slide__title {
padding: 0 0 80px 0 !important;
margin-top: -8vh !important;
color: white;
font-size: 2.5em;
}

.slide__title span {
color: #16a085;
}

.featherlight .featherlight-content {
padding: 10px 10px 0;
border-bottom: 20px solid transparent;
background: black;
}

#mc_embed_signup{background:transparent; clear:left; font:14px Helvetica,Arial,sans-serif; width: 100%; margin: 0 auto; }
#mc-embedded-subscribe { background-color: #fdcb6e !important; color: black !important; font-weight: 600 !important; width: 96% !important; height: 3em !important;}
#mc_embed_signup div#mce-responses {
  margin: 0;
}

#mc_embed_signup #mce-success-response {
  color: #55efc4;
}

#mc_embed_signup div.response {
  margin: 0 auto;
  width: 100%;
  padding: 1.5em 0;
}

#finalCTA .container {
    width: 80%;
  }
  #finalCTA .container h1 {
    color: white;
    font-size: 40px;
    
  }
  #finalCTA .container p {
    font-size: 2em;
    font-weight: 400;
    padding-top: 3vh;
  }
  #finalCTA .container a {
    text-decoration: none;
  }

  #finalCTA {
    padding: 30px 0;
  }

.site-design-container {
    width: 100%;
    margin-left: 0 !important;
    /* min-width: 225px; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}
    .site-design-text {
        word-wrap: normal;
        text-align: left;
        width: auto !important;
        display: inline-block;
        font-weight: 600;
        transition: all 0.5s ease-in-out;
        text-decoration: none;
    }
    .site-design-text:hover {
        color: #a29bfe;
        text-decoration: none !important;
    }
    .ufo-emoji-text {
        word-wrap: normal;
        text-align: right !important;
        width: 100% !important;
        font-size: 170%;
        max-width: 230px;
        padding-right: 1.2em;
    }
      @media only screen and (max-width: 880px) {
        .ufo-emoji-text {
          padding-right: 1.9em;
        }
      }
      @media only screen and (max-width: 320px) {
        .ufo-emoji-text {
          display: none;
          font-size: 100% !important;
          /* padding-right: 1.6em; */
        }
        .site-design-text {
          font-size: 80%;
          /* padding-right: 2.3em; */
          /* white-space: nowrap; */
        }
      }
      @media only screen and (max-width: 290px) {
        .site-design-text {
          font-size: 80%;
          /* padding-right: 2.3em; */
          text-align: center;
          line-height: 2em;
          /* white-space: nowrap; */
        }
        .ufo-emoji-text {
          font-size: 100% !important;
        }
      }
    #goat-emoji-text {
      /* filter: hue-rotate(250deg); */
      transform: translate(0, -0.4em) rotate(16deg);;
      display: inline-block;
    }

/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
@media only screen and (max-width: 1200px) {
    .masthead-brand {
        padding-top: 0.25em !important;
    }
    .genesis-ar-cards-header {
      padding-top: 5em;
    }
}
@media (min-width: 1200px) {
    #mc_embed_signup{ width: 40% !important; }
    #hero-main-container {
      margin: 10em auto 0 auto !important;
    }
}

@media only screen and (max-width: 992px) {
  .blog-item-flip {
    padding: 2.3em 0;
    display: flex;
    flex-direction: column-reverse !important;
  }
  .navbar-options li {
    float: right;
  }
  #hero-main-container {
    margin: 7em auto 0 auto !important;
    padding-top: 2em;
  }
}
@media only screen and (max-width: 880px) {
    .site-design-container {
        width: 100%;
        align-items: center;
    }
}
@media only screen and (min-width: 880px) {
    .footer-right {
        float: right;
        margin-bottom: 2em;
    }
    .footer-distributed {
        padding-bottom: 5em;
    }
}

@media only screen and (max-width: 767px){
    .first-blog-item {
      padding-top: 4em !important;
    }
    .last-blog-item {
      padding-bottom: 4em !important;
    }

    /* .blog-item-content-container:first-of-type {
      display: flex;
      flex-direction: column !important;
    } */
    
    .masthead-brand {
        padding: 0.8em 0 0.4em 0 !important;
        margin: 0;
    }
    .faq-title {
        padding-top: 2em !important;
    }
}

@media only screen and (max-width: 750px){
    #herocontentbar {
        margin-top: 20vh !important;
        padding-bottom: 20px; 
    }
    #hero-main-container {
      display: flex !important;
      flex-direction: column-reverse !important;
      padding-top: 0;
  }
}

/* @media (max-width: 1000px){
#herocontentbar {
    margin-top: 0vh !important;
}
}     */

@media only screen and (max-width: 700px) {
    .column-container{
       padding: 0 8% 0 8% !important;
       /* padding: 0 !important; */
    }
    .blog-dual-section > div > img {
      min-height: 320px !important;
    }
}

@media only screen and (max-width: 393px) {
  .dropdown-menu-left {
    left: auto !important;
    right: 0 !important;
  }
}

@media only screen and (max-width: 650px) {
  .dropdown-menu-left {
    right: 0;
    left: auto;
  }
}
@media only screen and (max-width: 600px) {
    /* Start the vertical centering */
    .video-js {
        height: 240px !important;
    }
}

.video-js .vjs-big-play-button {
    position: relative !important;
    left: 0;
    top:0;
}

.column-text {
    font-size: 20px;
}

.this-is-genesis {
    /* background-color: #010B1E; */
    background: #010B1E;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #000428, #010B1E);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #000428, #010B1E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

@media (max-width: 1200px) {
    .this-is-genesis {
        padding-bottom: 5em;
    }
}

@media (max-width: 1200px) {
  .navbar-header {
      width: 100% !important;
      margin: 0 auto !important;
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

@media (min-width: 200px) {
  .what-is-genesis-header {
    font-size: 180%;
    text-align: center;
    white-space: normal;
  }
}

@media (min-width: 300px) {
  .cover-heading{
    font-size: 150%;
  }
  .what-is-genesis-header {
    font-size: 200%;
  }
}
@media only screen and (max-width: 450px) {   
    body {
      max-width: 100% !important;
      overflow-x: hidden !important;
      overflow-y: visible !important;
    }

    /* #hero-main-container {
      padding-top: 3em;
    } */

    .masthead-brand {
        padding-top: 1.3em !important;
        font-size: 100%;
    }
    .character-showcase h1 {
      font-size: 173% !important;
    }
    /* .card-main-container {
      margin: 0 !important;
    } */
}

@media only screen and (max-width: 350px) {
  .dropdown-menu {
    min-width: auto;
  }
  .ks-logo {
    display: none !important;
    max-width: 80%;
  }
  .masthead-brand {
    text-align: left !important;
    padding-right: 1em !important;
    padding-top: 1.25em !important;
  }
  .blog-dual-section > div > img {
    min-height: 120px !important;
  }
  .dropdown-menu-left {
    max-width: 100% !important;
    min-width: auto !important;
  }

  div {
    overflow-x: hidden !important;
  }
}

@media only screen and (max-width: 300px) {
  .masthead-brand {
    padding-top: 0.8em !important;
  }
}

@media only screen and (max-width: 200px) {
  h2 {
    font-size: 100% !important;
  }
  h3,h4 {
    font-size: 100% !important;
  }
  #blog-section p {
    font-size: 80% !important;
  }
  #finalCTA .container h1 {
    font-size: 100% !important;
  }
  #finalCTA .container p {
    font-size: 100% !important;
  }
  #finalCTA .container {
    padding:0 !important;
  }
  .btn-group button {
    font-size: 80% !important;
    max-width: 100% !important;
  }
  #herocontentbar-2 {
    padding:0;
  }
  .footer-distributed {
    padding:0 !important;
  }
  .what-is-genesis-header {
    font-size: 100% !important;
  }

  .character-spotlight {
    overflow-x: hidden !important;
  }
  #genesis-ar-cards-title {
    font-size: 100% !important;
  }
  #genesis-ar-cards-cta-body {
    font-size: 100% !important;
  }
  .character-showcase h1 {
    font-size: 100% !important;
  }
  .genesis-hero-cards h1, .genesis-hero-cards h2 {
    word-break: break-all;
    font-size: 100% !important;
    top: 60% !important;
  }
  .genesis-hero-cards h3 {
    top: 70% !important;
  }

  .genesis-emoji {
    font-size: 500% !important;
  }
  .wiki-list-open-dossier-btn button {
    white-space: normal !important;
  }
  #legend-container {
    display: none !important;
  }
  #list-legend-ul {
    padding:0 !important;
  }
    #list-legend-ul ul {
      padding:0 !important;
    }

  .information-table-header-container {
    font-size: 100% !important;
  }

  #series-i .row,
  #series-ii .row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
  
  #series-i .row div,
  #series-ii .row div {
    width: 100% !important;
    margin: 0.5em auto !important;
    padding: 0.3em 0 !important;
    max-width:  100% !important;
  }

  .wiki-list-open-dossier-btn button {
    display: none !important;
  }
  .information-table-header-container {
    display: none !important;
  }

  /* .download-ios {
    padding: 2em 0 !important;
    min-width: 150px !important;
  } */
}
@media only screen and (max-width: 100px) {
  #play-genesis-augmented-reality,
  .footer-distributed,
  #Awards,
  #finalCTA {
    display: none !important;
  }
  h2 {
    font-size: 50% !important;
    max-width: 100% !important;
  }
  h3,h4 {
    font-size: 50% !important;
    max-width: 100% !important;
  }
  p,span {
    max-width: 100% !important;
    font-size: 80% !important;
  }
  .cover-heading {
    font-size: 50% !important;
  }
  #blog-section p {
    font-size: 40% !important;
  }
  #finalCTA .container h1 {
    font-size: 50% !important;
  }
  #finalCTA .container p {
    font-size: 50% !important;
  }
  #finalCTA .container {
    padding:0 !important;
  }
  .btn-group button {
    font-size: 40% !important;
    max-width: 100% !important;
  }
  #herocontentbar-2 {
    padding:0;
  }
  .footer-distributed {
    padding:0;
  }
  .genesis-emoji {
    font-size: 250% !important;
  }
  #series-i .row div,
  #series-ii .row div {
    font-size: 80% !important;
    padding: 0.1em 0 !important;
  }
  /* .download-ios {
    padding: 2em 0 !important;
    min-width: 150px !important;
  } */
}

@media (min-width: 450px) {
  .cover-heading {
    font-size: 250%;
  }
  .what-is-genesis-header {
    font-size: 250% !important;
  }
}
@media (min-width: 850px) {
  .cover-heading {
    font-size: 350%;
  }
  .what-is-genesis-header {
    font-size: 300% !important;
  }
}

@media (min-width: 880px) {
  .footer-right {
    float: right;
    margin-bottom: 2em;
  }
  .footer-distributed {
    padding-bottom: 5em;
  }
}