:root {
  --white: white;
  --black: black;
}

.container {
  max-height: 100%;
  max-width: 100%;
  background-image: url('../images/JAMES.jpg');
  background-position: 0 0;
  background-size: cover;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.parent {
  width: 457px;
  height: 220px;
  object-fit: scale-down;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  margin: 15vh auto auto 64px;
  display: flex;
  position: relative;
}

.child {
  width: 457px;
  height: 221px;
  opacity: 1;
  position: absolute;
}

.child._1 {
  z-index: 3;
  opacity: .96;
  background-color: #fff;
  display: block;
}

.child._2 {
  z-index: 2;
}

.child._3 {
  z-index: 1;
}

.child._4 {
  z-index: 0;
}

.image {
  opacity: 1;
}

.e1 {
  width: auto;
  display: block;
  position: relative;
}

.e1.hide {
  opacity: .38;
  display: none;
}

._1eb {
  display: block;
  position: relative;
}

.image-2 {
  display: none;
}

.n {
  width: auto;
  display: block;
  position: relative;
}

.n.hide {
  opacity: .38;
  display: none;
}

.i, .g {
  display: block;
  position: relative;
}

.i {
  width: auto;
}

.i.hide {
  opacity: .38;
  display: none;
}

.e1-copy {
  display: block;
  position: relative;
}

.g {
  width: auto;
}

.g.hide {
  opacity: .38;
  display: none;
}

.m {
  width: auto;
  display: block;
  position: relative;
}

.m.hide {
  opacity: .38;
  display: none;
}

.a1 {
  width: auto;
  display: block;
  position: relative;
}

.a1.hide {
  opacity: .38;
  display: none;
}

.m2 {
  width: auto;
  display: block;
  position: relative;
}

.m2.hide {
  opacity: .38;
  display: none;
}

.a2 {
  width: auto;
  display: block;
  position: relative;
}

.a2.hide {
  opacity: .38;
  display: none;
}

.d {
  width: auto;
  display: block;
  position: relative;
}

.d.hide {
  opacity: .38;
  display: none;
}

.e2 {
  width: auto;
  display: block;
  position: relative;
}

.e2.hide {
  opacity: .38;
  display: none;
}

.dot {
  width: auto;
  display: none;
  position: relative;
}

.dot.hide {
  opacity: .38;
  display: none;
}

.c {
  width: auto;
  display: none;
  position: relative;
}

.c.hide {
  opacity: .38;
  display: none;
}

.o {
  width: auto;
  display: none;
  position: relative;
}

.o.hide {
  opacity: .38;
  display: none;
}

.e1-copy {
  display: block;
  position: relative;
}

.e1-copy.hide {
  width: auto;
  display: none;
}

.n-copy {
  display: block;
  position: relative;
}

.n-copy.hide, .i-copy.hide, .g-copy.hide {
  display: none;
}

.m-copy {
  display: block;
  position: relative;
}

.m-copy.hide {
  display: none;
}

.a1-copy {
  display: block;
  position: relative;
}

.a1-copy.hide {
  display: none;
}

.m2-copy {
  display: block;
  position: relative;
}

.m2-copy.hide {
  display: none;
}

.a2-copy {
  display: block;
  position: relative;
}

.a2-copy.hide {
  display: none;
}

.d-copy {
  display: block;
  position: relative;
}

.d-copy.hide {
  display: none;
}

.e2-copy {
  display: block;
  position: relative;
}

.e2-copy.hide {
  display: none;
}

.dot-copy {
  display: block;
  position: relative;
}

.dot-copy.hide {
  display: none;
}

.c-copy {
  display: block;
  position: relative;
}

.c-copy.hide {
  display: none;
}

.o-copy {
  display: block;
  position: relative;
}

.o-copy.hide {
  display: none;
}

.section {
  width: 100vw;
  height: 100vh;
  background-image: url('../images/twentyfourseven.jpg');
  background-position: 50%;
  background-size: cover;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.black {
  width: 100vw;
  height: 100vh;
  opacity: 0;
  background-color: #000;
  display: block;
  position: absolute;
}

.arrow {
  width: auto;
  display: none;
  position: relative;
}

.arrow.hide {
  width: 72px;
  opacity: 0;
  display: none;
}

.button {
  margin: auto auto 25vh;
  position: relative;
}

.div-block {
  margin: auto auto auto 64px;
}

.button-2 {
  width: auto;
  height: auto;
  text-align: center;
  background-color: red;
  border-radius: 20px;
  margin-bottom: auto;
  margin-left: 64px;
  padding: 9px 20px 12px;
  font-family: Oswald, sans-serif;
  font-size: 24px;
  font-weight: 700;
  display: none;
  position: relative;
}

.div-block-2 {
  width: 252px;
  height: 41px;
  margin: 75vh auto auto 64px;
  display: flex;
}

.div-block-2.miguel {
  margin-top: auto;
  margin-bottom: 15vh;
  padding-top: 10px;
}

.pass.letter {
  display: none;
}

.image-3 {
  width: 152px;
  height: 16px;
}

@media screen and (max-width: 479px) {
  .parent {
    width: 360px;
    object-fit: fill;
    flex-flow: wrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20vh;
    margin-left: 20px;
  }

  .e1 {
    width: 45px;
    object-fit: scale-down;
  }

  .n {
    width: 50px;
  }

  .i {
    width: 24px;
  }

  .g {
    width: 49px;
  }

  .m {
    width: 56px;
  }

  .a1 {
    width: 96px;
  }

  .m2 {
    width: 60px;
  }

  .a2, .d {
    width: 50px;
  }

  .e2 {
    width: 45px;
  }

  .dot {
    width: 19px;
  }

  .c, .o {
    width: 48px;
  }

  .e1-copy.hide {
    width: 45px;
    object-fit: scale-down;
  }

  .n-copy.hide {
    width: 50px;
    object-fit: scale-down;
  }

  .i-copy.hide {
    width: 24px;
  }

  .g-copy.hide {
    width: 49px;
  }

  .m-copy.hide {
    width: 56px;
  }

  .a1-copy.hide {
    width: 96px;
  }

  .m2-copy.hide {
    width: 60px;
  }

  .a2-copy.hide {
    width: 50px;
    min-width: 50px;
  }

  .d-copy.hide {
    width: 50px;
  }

  .e2-copy.hide {
    width: 45px;
  }

  .dot-copy.hide {
    width: 19px;
  }

  .c-copy.hide, .o-copy.hide {
    width: 48px;
  }

  .section {
    background-image: url('../images/twentyfourseven.jpg');
    align-items: flex-start;
  }

  .arrow {
    width: 45px;
    object-fit: scale-down;
    display: none;
  }

  .arrow.hide {
    width: 50px;
  }

  .button-2 {
    margin-left: auto;
    margin-right: auto;
  }

  .div-block-2 {
    margin-left: auto;
  }

  .div-block-2.miguel {
    object-fit: fill;
    margin-bottom: 5vh;
    padding-top: 0;
  }

  .image-3 {
    width: 152px;
    height: 16px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
}