/* ///////////////////////////// */
/* ////////// CLASSES ////////// */
/* ///////////////////////////// */

/* STATES */

.state-opacity-0 {
  opacity: 0;
  pointer-events: none;
  transform: scale(0);
}

.state-opacity-1 {
  opacity: 1;
  pointer-events: default;
  transform: scale(1);
}

/* THANK YOU */

.thankyou__wrapper {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
}

img.thankyou {
  height: 60vh;
  bottom: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 120%);
  transition: transform 0.3s;
}

.promo {
  width: 50vh;
  margin: 3vh auto 0 auto;
  border-radius: 1vh;
  box-shadow: 0 0 1vh rgba(73, 62, 130, 0.3);
}

div.thankyou {
  width: 55vh;
  margin: 7vh auto 0vw auto;
  opacity: 0;
  transition: opacity 0.5s;
}

h1.thankyou,
p.thankyou {
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

p.thankyou {
  margin: 0 auto;
  font-size: 3.5vh;
  line-height: 4vh;
}

a:link {
  color: #493e82;
}
a:visited {
  color: #493e82;
}
a:hover {
  color: #493e82;
}
a:active {
  color: #493e82;
}

.button--back {
  display: block;
  margin: 2vh auto 2vh auto;
  color: white;
  background-color: #6052c0;
  padding: 1.5vh 3.5vh;
  border-radius: 10vh;
  font-size: 2.5vh;
  letter-spacing: 0.1vh;
}

.button--back:hover {
  transform: scale(1.1);
}

.button--back:active {
  transform: scale(1);
}

/* GENERAL CLASSES */

* {
  padding: 0;
  margin: 0;
}

html {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: "Londrina Solid", sans-serif;
  background-color: #7fcfff;
}

input,
button {
  font-family: "Londrina Solid" !important;
  font-weight: 300 !important;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

video {
  width: 102%;
  position: relative;
  left: -1%;
  display: block;
}

img {
  display: block;
}

/* STATES */

.state__modal--hidden {
  pointer-events: none;
  opacity: 0;
}

.state__modal--visible {
  pointer-events: auto;
  opacity: 1;
}

.state__display--none {
  display: none;
}

.state__display--block {
  display: block;
}

/* SECTION CLASSES */

footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
  grid-column-start: 2;
  grid-column-end: 21;
  grid-row-start: 17;
  grid-row-end: 17;
  margin-top: -3.5vw;
}

header {
  padding: 1vw;
  display: flex;
  justify-content: space-between;
}

section.grid {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  z-index: 0;
  position: relative;
}

section.blackout {
    width: 100vw;
    height: 100vh;
    background-color: rgba(8,38,117,0.8);
    position: fixed;
    z-index: 10;
    transition: opacity 0.3s;
}

/* DIV CLASSES */

div.trailer__wrapper {
  width: 80vw;
  height: 45vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;

}

div.imageWrapper {
  z-index: 1;
}

div.textWrapper {
  z-index: 1;
}

.imageWrapper__screencap1 {
  grid-column-start: 1;
  grid-column-end: 11;
  overflow: hidden;
}

.imageWrapper__screencap2 {
  grid-column-start: 11;
  grid-column-end: 21;
  overflow: hidden;
}

div.imageWrapper__bullet {
  margin-top: -8vw;
}

div.imageWrapper__fullwidth {
  grid-column-start: 1;
  grid-column-end: 22;
}

div.imageWrapper__halfwidth {
  grid-column-start: 12;
  grid-column-end: 22;
}

div.textWrapper__halfwidth {
  grid-column-start: 4;
  grid-column-end: 11;
}

div.imageWrapper__halfwidth--2 {
  grid-column-start: 1;
  grid-column-end: 12;
}

div.textWrapper__halfwidth--2 {
  grid-column-start: 11;
  grid-column-end: 18;
}

div.banner {
  z-index: 0;
}

div.footer__item {
  position: absolute;
  bottom: 1vw;
  right: 1vw;
}

/* TEXT CLASSES */

h1 {
  font-size: 4.5vw;
  line-height: 4.5vw;
  font-weight: 300;
  color: #6052c0;
}

h2 {
  font-size: 1.5vw;
  font-weight: 300;
  color: #6052c0;
  text-align: center;
  margin-top: 2vw;
  margin-bottom: -1vw;
}

p {
  margin-top: 1.75vw;
  font-size: 2vw;
  font-weight: 300;
  color: #6052c0;
}

 #video--thumbnail--mobile {
    display: none;
  }

#h2__end {
  color: #ba3974;
  margin-bottom: -0.6vw;
}

.imageWrapper > p {
  font-size: 1.75vw;
  margin-top: 1vw;
  text-align: center;
  letter-spacing: 0.05vw;
}

.textWrapper__halfwidth--2 > h2 {
  text-align: center;
}

.textWrapper__halfwidth--2 > p {
  color: #faf74a;
  text-align: center;
  font-size: 1.75vw;
  margin-top: 1vw;
  font-weight: 300;
}

div.footer__item > p {
  color: #ffe8e3;
  font-size: 1.5vw;
  display: inline-block;
  vertical-align: bottom;
}

.footer__img__wrapper {
  width: 2vw;
  height: 2vw;
  display: inline-block;
  vertical-align: bottom;
  margin-left: 0.75vw;
}

/* HERO */

.imageWrapper__hero {
  margin-top: 5vw;
  margin-bottom: 5vw;
  grid-column-start: 6;
  grid-column-end: 16;
  grid-row-start: 1;
  grid-row-end: 1;
  position: relative;
}

div.subscribeBox {
  width: 25.5rem;
  box-sizing: border-box;
  margin: -4.5vw auto -3vw auto;
  border-radius: 0.5vw;
  padding: 0.4rem 0 0 0;
  background-color: rgba(255,255,255,0.4);
  box-shadow: 0px 0px 1vw rgba(96, 82, 192, 0.2);
  transition: all 0.2s;
  height: 5.8rem;
}

div.subscribeBox__bottom {
  width: 90%;
  height: auto;
  box-sizing: border-box;
  margin: 0vw auto 0 auto;
  border-radius: 1vw;
  padding: 0;
}

.subscribeButton {
  background-color: white;
  margin: 2vw auto 0 auto;
  text-align: center;
  padding: 1vw 2.5vw 1vw 2.5vw;
  width: 13vw;
  border-radius: 5vw;
  box-shadow: 0 0 0.5vw rgba(96, 82, 192, 0.5);
  transition: opacity 0.2s;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.img-subscribeButton {
  width: 7vw;
  position: absolute;
  left: -1vw;
  top: 0.5vw;
  pointer-events: none;
  animation-name: hand;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes hand {
  0%   {transform: rotate(-5deg);}
  50%   {transform: rotate(5deg);}
  100%   {transform: rotate(-5deg);}
}


.subscribeButton:hover {
  transform: scale(1.05);
}

.subscribeButton:active {
  transform: scale(1);
}

.p-subscribeButton {
  margin: 0 0 0 3.5vw;
  padding: 0;
  font-weight: 500;
  color: #6052c0;
  user-select: none;
  font-size: 2vw;
}

/* IMAGE CLASSES */

.imageWrapper > img {
  width: 100%;
}

.textWrapper > img {
  margin-top: 6vw;
  width: 100%;
}

.footer__img__wrapper > img {
  width: 100%;
  height: 100%;
}

/* BUTTON CLASSES */

.modal__close {
  width: 3vw;
  height: 3vw;
  background-image: url("../assets/index/button-clear.png");
  background-size: 100%;
  position: absolute;
  z-index: 12;
  transform-origin: center;
  right: -1.6vw;
  top: -1.5vw;
}

.modal__close:hover {
 transform: scale(1.1);
}

.modal__close:active {
 transform: scale(1);
}

.button--trailer {
  width: 10.3vw;
  height: 10.3vw;
  background-image: url("../assets/index/button-trailer.png");
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  margin: 0 auto;
  top: 20vw;
  cursor: pointer;
  transform-origin: center;
  transform: scale(0.95);
  z-index: 998;
}

.button--trailer:hover {
  background-image: url("../assets/index/button-trailer-hover.png");
  transform: scale(0.99);
}

.button--trailer:active {
  background-image: url("../assets/index/button-trailer.png");
  transform: scale(0.95);
}

/* ///////////////////////////// */
/* //////////// IDs //////////// */
/* ///////////////////////////// */

/* DIV IDs */

/* video trailer */
#video {
  background-color: white;
  grid-column-start: 1;
  grid-column-end: 21;
  grid-row-start: 3;
  grid-row-end: 3;
  padding: 4vw 0 0 0;
  margin-top: -0.1vw;
}

#video--thumbnail {
  width: 80vw;
  height: 50vw;
  margin: -10vw auto 0 auto;
  background-image: url("../assets/index/trailer-thumbnail.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  position: relative;
}

#video--trailer {
  width: 100%;
  height: 100%;
  box-shadow: 0vw 0vw 3vw rgba(8,38,117,0.7);
  position: absolute;
}

/* clouds front */
#imageWrapper__layer__1 {
  margin-top: 26vw;
  grid-column-start: 8;
  grid-column-end: 15;
  grid-row-start: 2;
  grid-row-end: 2;
  height: 10vw;
  z-index: 4;
  overflow: hidden;
}

/* tower */
#imageWrapper__layer__2 {
  margin-top: 5vw;
  grid-column-start: 8;
  grid-column-end: 14;
  grid-row-start: 2;
  grid-row-end: 2;
  z-index: 3;
}

/* clouds back */
#imageWrapper__layer__3 {
  margin-top: 1vw;
  grid-column-start: 1;
  grid-column-end: 21;
  grid-row-start: 2;
  grid-row-end: 2;
  z-index: 2;
}

/* sun */
#imageWrapper__layer__4 {
  margin-top: 12.5vw;
  grid-column-start: 7;
  grid-column-end: 15;
  grid-row-start: 2;
  grid-row-end: 2;
  z-index: 1;
}
#imageWrapper__fullwidth__clouds {
  margin-top: -2vw;
  grid-row-start: 2;
  grid-row-end: 2;
}

#imageWrapper__screencap__bar__top {
  grid-row-start: 9;
  grid-row-end: 9;
  grid-column-start: 1;
  grid-column-end: 21;
  margin-bottom: -2.6vw;
  z-index: 10;
}

#imageWrapper__screencap__1 {
  grid-row-start: 10;
  grid-row-end: 10;
}

#imageWrapper__screencap__2 {
  grid-row-start: 10;
  grid-row-end: 10;
}

#imageWrapper__screencap__3 {
  margin-top: -0.5vw;
  grid-row-start: 11;
  grid-row-end: 11;
}

#imageWrapper__screencap__4 {
  margin-top: -0.5vw;
  grid-row-start: 11;
  grid-row-end: 11;
}

#imageWrapper__screencap__bar__bottom {
  grid-row-start: 13;
  grid-row-end: 13;
  grid-column-start: 1;
  grid-column-end: 21;
  margin-top: -2.7vw;
  z-index: 10;
}

#banner__clouds {
  margin-top: -3vw;
  background-color: white;
  grid-row-start: 4;
  grid-row-end: 10;
  grid-column-start: 1;
  grid-column-end: 22;
}

#banner__screenshots {
  background-color: #444c87;
  grid-row-start: 10;
  grid-row-end: 15;
  grid-column-start: 1;
  grid-column-end: 22;
}

#banner__dark {
  background-color: #521b3e;
  grid-row-start: 15;
  grid-row-end: 17;
  grid-column-start: 1;
  grid-column-end: 22;
  background-image: url("../assets/index/wasteland.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 50vw;
  background-position: center bottom;
}

#imageWrapper__halfwidth__tower {
  margin-top: 6vw;
  margin-bottom: 6vw;
  grid-row-start: 4;
  grid-row-end: 4;
}

#textWrapper__halfwidth__tower {
  margin-top: 10vw;
  margin-bottom: 6vw;
  grid-row-start: 4;
  grid-row-end: 4;
}

#imageWrapper__bullet__1 {
  margin-top: -20vw;
  grid-row-start: 5;
  grid-row-end: 5;
  grid-column-start: 4;
  grid-column-end: 7;
}

#imageWrapper__bullet__2 {
  grid-row-start: 6;
  grid-row-end: 6;
  grid-column-start: 8;
  grid-column-end: 11;
}

#imageWrapper__bullet__3 {
  grid-row-start: 7;
  grid-row-end: 7;
  grid-column-start: 12;
  grid-column-end: 15;
}

#imageWrapper__bullet__4 {
  margin-bottom: 12vw;
  grid-row-start: 8;
  grid-row-end: 8;
  grid-column-start: 16;
  grid-column-end: 19;
}

#textWrapper__halfwidth__characters {
  margin-top: 10vw;
  grid-row-start: 15;
  grid-row-end: 15;
}

#imageWrapper__halfwidth__characters {
  margin-top: 6vw;
  grid-row-start: 15;
  grid-row-end: 15;
  position: relative;
  margin-left: -2vw;
}

#imageWrapper__mobile {
  display: none;
}

/* IMG IDs */

#imageWrapper__layer__4 > img {
  width: 100%;
}

#imageWrapper__layer__3 > img {
  width: 125%;
  animation-name: layer__3;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: translateX(-20%);
}

@keyframes layer__3 {
  0% {transform: translateX(-20%);}
  50% {transform: translateX(0%);}
  100% {transform: translateX(-20%);}
}

#imageWrapper__layer__2 > img {
  width: 100%;
}

#imageWrapper__layer__1 > img {
  width: 300%;
  animation-name: layer__1;
  animation-duration: 100s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform: translateX(-40%);
}

@keyframes layer__1 {
  0% {transform: translateX(-40%);}
  50% {transform: translateX(0%);}
  100% {transform: translateX(-40%);}
}

/* PRESS KIT */

.section--pressKit {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ae3c35;
  padding: 1vw 0;
}

.img--pressKitButton {
  width: 5vw;
  cursor: pointer;
  margin-right: 2vw;
}

.img--pressKitButton:active{
  content: url("../assets/index/button-press-kit-active.png");
}

h3 {
  font-size: 2vw;
  color: #fafa35;
  font-weight: 300;
}

/* ///////////////////////////// */
/* //////// BREAKPOINT ///////// */
/* ///////////////////////////// */

/* responsive breakpoint */
@media only screen and (max-width: 1200px) {

  h2 {
    font-size: 2vw;
  }

}

/* responsive breakpoint */
@media only screen and (max-width: 800px) {

  /* ///////////////////////////// */
  /* /////// SWITCH IMAGES /////// */
  /* ///////////////////////////// */

  html {
    overflow: auto;
  }

  .logo--nomobile {
    display: none;
  }

  img#logo {
    content: url("../assets/index/anodos-logo-mobile.png");
  }

  section.grid {
    grid-template-columns: repeat(21, 1fr);
  }

  footer {
    grid-row-start: 17;
    grid-row-end: 17;
    position: relative;
  }

  #video--thumbnail--mobile {
    width: 88vw;
    height: 55vw;
    margin: -6vw auto 0 auto;
    background-image: url("../assets/index/trailer-thumbnail-mobile.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    display: block;
  }

  #video--thumbnail {
    display: none;
  }

  #imageWrapper__screencap__bar__top,
  #imageWrapper__screencap__bar__bottom {
    grid-column-start: 1;
    grid-column-end: 22;
  }

  #imageWrapper__screencap__bar__bottom {
    grid-row-start: 14;
    grid-row-end: 14;
  }

  /* video trailer */
  #video {
    background-color: white;
    grid-column-start: 1;
    grid-column-end: 22;
    grid-row-start: 3;
    grid-row-end: 3;
    padding: 0vw 0 0vw 0;
    margin-top: 3.5vw;
    margin-bottom: -8vw;
  }

  .button--trailer {
    width: 20vw;
    height: 20vw;
    top: 32vw;
    left: 0.2vw;
  }

  div.trailer__wrapper {
    width: 88vw;
    height: 49.5vw;
    top: 50%;
    left: 50%;
  }

  .modal__close {
    width: 8vw;
    height: 8vw;
    right: -3vw;
    top: -4vw;
  }

  .imageWrapper__hero {
    margin-top: 10vw;
    margin-bottom: 0vw;
    grid-column-start: 3;
    grid-column-end: 20;
    grid-row-start: 1;
    grid-row-end: 1;
  }

  #imageWrapper__layer__1,
  #imageWrapper__layer__2,
  #imageWrapper__layer__3,
  #imageWrapper__layer__4 {
    display: none;
  }

  #imageWrapper__mobile {
    margin-top: 15vw;
    margin-bottom: -5vw;
    display: block;
    grid-column-start: 1;
    grid-column-end: 22;
    grid-row-start: 2;
    grid-row-end: 2;
  }

  .imageWrapper__halfwidth {
    display: none;
  }

 #textWrapper__halfwidth__tower {
    margin-top: 30vw;
    grid-column-start: 3;
    grid-column-end: 20;
  }

  h1 {
    font-size: 11vw;
    line-height: 11vw;
  }

  h2 {
    font-size: 5vw;
    width: 80%;
    text-align: center;
    margin: 5vw auto -3vw auto;
  }

  #h2__end {
    width: 60%;
  }

  p {
    margin-top: 4.6vw !important;
    font-size: 4.6vw !important;
  }

  #imageWrapper__bullet__1 {
    margin-top: 6vw;
    grid-column-start: 3;
    grid-column-end: 8;
    grid-row-start: 5;
    grid-row-end: 5;
  }

  #imageWrapper__bullet__2 {
    margin-top: 6vw;
    grid-column-start: 9;
    grid-column-end: 14;
    grid-row-start: 5;
    grid-row-end: 5;
  }

  #imageWrapper__bullet__3 {
     margin-top: 6vw;
    margin-bottom: 28vw;
    grid-column-start: 15;
    grid-column-end: 20;
    grid-row-start: 5;
    grid-row-end: 5;
  }

  #imageWrapper__bullet__4 {
    display: none;
  }

  div.subscribeBox {
    margin: -15vw auto 0 auto;
    width: 75vw;
    border-radius: 2vw;
    height: auto;
    min-height: 5.8rem;
  }

  .imageWrapper__screencap1,
  .imageWrapper__screencap2 {
    grid-column-start: 1;
    grid-column-end: 22;
  }

  #imageWrapper__screencap__1 {
    margin-top: -1vw;
    grid-row-start: 10;
    grid-row-end: 10;
    content: url("../assets/index/screenshot-1-mobile.jpg");
    width: 100%;
  }

  #imageWrapper__screencap__2 {
    margin-top: -1vw;
    grid-row-start: 11;
    grid-row-end: 11;
    content: url("../assets/index/screenshot-2-mobile.jpg");
    width: 100%;
  }

  #imageWrapper__screencap__3 {
    margin-top: -1vw;
    grid-row-start: 13;
    grid-row-end: 13;
    content: url("../assets/index/screenshot-3-mobile.jpg");
    width: 100%;
  }

  #imageWrapper__screencap__4 {
    margin-top: -1vw;
    grid-row-start: 12;
    grid-row-end: 12;
    content: url("../assets/index/screenshot-4-mobile.jpg");
    width: 100%;
  }

  #textWrapper__halfwidth__characters {
    margin-top: 6vw;
    margin-bottom: 8vw;
    grid-column-start: 3;
    grid-column-end: 20;
    grid-row-start: 15;
    grid-row-end: 15;
  }
  
  #imageWrapper__halfwidth__characters {
    grid-column-start: 1;
    grid-column-end: 23;
    grid-row-start: 16;
    grid-row-end: 16;
    margin-bottom: -6.8vw;
    margin-top: 6vw;
  }

  #banner__dark {
    grid-row-start: 15;
    grid-row-end: 17;
    grid-column-start: 1;
    grid-column-end: 22;    
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vw;
    background-position: center bottom;
    background-image: url("../assets/index/wasteland-mobile.jpg");
  }

  #textWrapper__halfwidth__characters {
    margin-top: 31vw;
    grid-column-start: 3;
    grid-column-end: 20;
    grid-row-start: 15;
    grid-row-end: 15;
  }

  .footer__img__wrapper {
    width: 6vw;
    height: 6vw;
    margin-left: 2vw;
  }

  .footer__item {
    text-align: center;
    left: 50%;
    transform: translate(-50%, -5%);
    width: 70%;

  }

  div.footer__item > p {
    font-size: 3.5vw !important;
    line-height: 3.5vw;
    padding: 1vw 3vw 1.3vw 3vw;
    border-radius: 3vw;
  }

  h1.thankyou,
  p.thankyou {
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  p.thankyou {
    margin-top: 2vh !important;
    font-size: 3.5vh !important;
    line-height: 4vh !important;
  }

  .promo {
    width: 90%;
  }

  .section--pressKit {
    padding: 3vw 0;
  }

  .img--pressKitButton {
    width: 12vw;
  }

  h3 {
    font-size: 5vw;
  }

  .subscribeButton {
    margin: 6vw auto 0 auto;
    cursor: pointer;
    padding: 0vw 6vw 4.5vw 8vw;
    width: max-content;
    border-radius: 10vw;
    box-shadow: 0 0 1vw rgba(96, 82, 192, 0.5);
  }

  .p-subscribeButton {
    margin-left: 8vw;
    font-size: 6vw !important;
  }

  .img-subscribeButton {
    width: 20vw;
    top: 3.5vw;
    left: -5.5vw;
  }

  
}

/* responsive breakpoint */
@media only screen and (max-width: 550px) {
  
  .thankyou__wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
  }
  
  img.thankyou {
    height: 65vh;
  }
  
  div.thankyou {
    width: 100vw;
    margin-top: -6vw !important;
    padding-top: calc(60px - 4%);
  }
  
  h1.thankyou,
  p.thankyou {
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 0;
  }
  
  h1.thankyou {
    margin: 18vw auto 0 auto !important;
    font-size: 11vw !important;
    width: 55vw;
  }
  
  p.thankyou {
    margin: 10vw auto 0 auto !important;
    font-size: 5vw !important;
    line-height: 6vw !important;
    width: 75vw;
  }

}