body {
  height: 100vh;
  background-color: #202123;
  color: #777;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
}

.video {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: fill;
}

video {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}

.video-full {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: 100vh;
  min-height: 798px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#rosalandia_02,
#rosalandia_03,
#rosalandia_04,
#rosalandia_05,
#rosalandia_06,
#rosalandia_07,
#rosalandia_08,
#rosalandia_09,
#rosalandia_10,
#rosalandia_11,
#rosalandia_12,
#rosalandia_13,
#rosalandia_14,
#rosalandia_15,
#rosalandia_16,
#rosalandia_17,
#rosalandia_18 {
  /* border: 3px solid red; */
}

/* VIDEOS */
#rosalandia_09 {
  height: 60px;
  width: 250px;
  position: fixed;
  top: calc((100% - 430px) / 2);
  left: calc((100% - 1330px) / 2);
  display: none;
}

#rosalandia_10 {
  height: 60px;
  width: 290px;
  position: fixed;
  top: calc((100% - 240px) / 2);
  left: calc((100% - 1450px) / 2);
  display: none;
}

#rosalandia_08 {
  height: 60px;
  width: 220px;
  position: fixed;
  top: calc((100% - 70px) / 2);
  left: calc((100% - 1150px) / 2);
  display: none;
}

#rosalandia_14 {
  height: 60px;
  width: 360px;
  position: fixed;
  bottom: calc((100% - 310px) / 2);
  left: calc((100% - 1600px) / 2);
  display: none;
}

#rosalandia_02 {
  height: 60px;
  width: 360px;
  position: fixed;
  bottom: calc((100% - 630px) / 2);
  left: calc((100% - 1100px) / 2);
  display: none;
}

/* ---- */

#rosalandia_17 {
  height: 45px;
  width: 250px;
  position: fixed;
  top: calc((100% - 640px) / 2);
  left: calc((100% - 730px) / 2);
  display: none;
}

#rosalandia_13 {
  height: 60px;
  width: 270px;
  position: fixed;
  top: calc((100% - 390px) / 2);
  left: calc((100% - 730px) / 2);
  display: none;
}

#rosalandia_12 {
  height: 60px;
  width: 280px;
  position: fixed;
  top: calc((100% - 220px) / 2);
  left: calc((100% - 530px) / 2);
  display: none;
}

#rosalandia_05 {
  height: 60px;
  width: 340px;
  position: fixed;
  bottom: calc((100% - 220px) / 2);
  left: calc((100% - 850px) / 2);
  display: none;
}

#rosalandia_15 {
  height: 60px;
  width: 210px;
  position: fixed;
  bottom: calc((100% - 510px) / 2);
  right: calc((100% - 320px) / 2);
  display: none;
}

#rosalandia_03 {
  height: 60px;
  width: 410px;
  position: fixed;
  bottom: calc((100% - 710px) / 2);
  right: calc((100% - 920px) / 2);
  display: none;
}

/* --- */

#rosalandia_16 {
  height: 70px;
  width: 500px;
  position: fixed;
  top: calc((100% - 570px) / 2);
  right: calc((100% - 1430px) / 2);
  display: none;
}

#rosalandia_11 {
  height: 70px;
  width: 350px;
  position: fixed;
  top: calc((100% - 390px) / 2);
  right: calc((100% - 630px) / 2);
  display: none;
}

#rosalandia_07 {
  height: 70px;
  width: 250px;
  position: fixed;
  top: calc((100% - 360px) / 2);
  right: calc((100% - 1300px) / 2);
  display: none;
}

#rosalandia_06 {
  height: 70px;
  width: 350px;
  position: fixed;
  top: calc((100% - 170px) / 2);
  right: calc((100% - 1100px) / 2);
  display: none;
}

#rosalandia_04 {
  height: 70px;
  width: 400px;
  position: fixed;
  bottom: calc((100% - 190px) / 2);
  right: calc((100% - 800px) / 2);
  display: none;
}

#rosalandia_18 {
  height: 70px;
  width: 390px;
  position: fixed;
  bottom: calc((100% - 490px) / 2);
  right: calc((100% - 1450px) / 2);
  display: none;
}

#voltar {
  height: 40px;
  width: 180px;
  position: fixed;
  background: #f44336;
  bottom: 90px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
}

.show-menu {
  display: initial !important;
}

@media (max-height: 767px) {

  #rosalandia_02,
  #rosalandia_03,
  #rosalandia_04,
  #rosalandia_05,
  #rosalandia_06,
  #rosalandia_07,
  #rosalandia_08,
  #rosalandia_09,
  #rosalandia_10,
  #rosalandia_11,
  #rosalandia_12,
  #rosalandia_13,
  #rosalandia_14,
  #rosalandia_15,
  #rosalandia_16,
  #rosalandia_17,
  #rosalandia_18 {
    /* border: 3px solid red; */
  }

  /* VIDEOS */
  #rosalandia_09 {
    height: 50px;
    width: 250px;
    top: calc((100% - 380px) / 2);
    left: calc((100% - 1200px) / 2);
  }

  #rosalandia_10 {
    height: 50px;
    width: 290px;
    position: fixed;
    top: calc((100% - 200px) / 2);
    left: calc((100% - 1250px) / 2);
  }

  #rosalandia_08 {
    height: 50px;
    width: 180px;
    position: fixed;
    top: calc((100% - 50px) / 2);
    left: calc((100% - 1000px) / 2);
  }

  #rosalandia_14 {
    height: 50px;
    width: 310px;
    position: fixed;
    bottom: calc((100% - 260px) / 2);
    left: calc((100% - 1400px) / 2);
    display: none;
  }

  #rosalandia_02 {
    height: 50px;
    width: 300px;
    position: fixed;
    bottom: calc((100% - 530px) / 2);
    left: calc((100% - 1000px) / 2);
  }

  /* ---- */

  #rosalandia_17 {
    height: 50px;
    width: 250px;
    position: fixed;
    top: calc((100% - 560px) / 2);
    left: calc((100% - 630px) / 2);
  }

  #rosalandia_13 {
    height: 50px;
    width: 250px;
    position: fixed;
    top: calc((100% - 330px) / 2);
    left: calc((100% - 630px) / 2);
  }

  #rosalandia_12 {
    height: 50px;
    width: 280px;
    position: fixed;
    top: calc((100% - 190px) / 2);
    left: calc((100% - 480px) / 2);
  }

  #rosalandia_05 {
    height: 50px;
    width: 320px;
    position: fixed;
    bottom: calc((100% - 190px) / 2);
    left: calc((100% - 750px) / 2);
  }

  #rosalandia_15 {
    height: 50px;
    width: 210px;
    position: fixed;
    bottom: calc((100% - 410px) / 2);
    right: calc((100% - 300px) / 2);
  }

  #rosalandia_03 {
    height: 50px;
    width: 380px;
    position: fixed;
    bottom: calc((100% - 590px) / 2);
    right: calc((100% - 750px) / 2);
  }

  /* --- */

  #rosalandia_16 {
    height: 60px;
    width: 400px;
    position: fixed;
    top: calc((100% - 500px) / 2);
    right: calc((100% - 1200px) / 2);
  }

  #rosalandia_11 {
    height: 60px;
    width: 300px;
    position: fixed;
    top: calc((100% - 330px) / 2);
    right: calc((100% - 550px) / 2);
  }

  #rosalandia_07 {
    height: 60px;
    width: 250px;
    position: fixed;
    top: calc((100% - 300px) / 2);
    right: calc((100% - 1100px) / 2);
  }

  #rosalandia_06 {
    height: 60px;
    width: 330px;
    position: fixed;
    top: calc((100% -  140px) / 2);
    right: calc((100% - 950px) / 2);
    display: none;
  }

  #rosalandia_04 {
    height: 60px;
    width: 350px;
    position: fixed;
    bottom: calc((100% - 160px) / 2);
    right: calc((100% - 700px) / 2);
    display: none;
  }

  #rosalandia_18 {
    height: 60px;
    width: 340px;
    position: fixed;
    bottom: calc((100% - 410px) / 2);
    right: calc((100% - 1250px) / 2);
    display: none;
  }
}