.nama-desa {
  min-height: 94px;
  margin: 0 0 -2em !important;
  padding: 1rem 0;
  text-align: center;
  background: #1f3983;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nama-desa h1 {
  margin: 0;
  font-family: "Basix Montserrat Light", Montserrat;
  letter-spacing: -0.03em;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5em;
  line-height: 1;
  color: #fff;
}
.nama-desa p {
  line-height: 1;
  position: relative;
  margin-bottom: 0.5rem !important;
  top: 0.25em;
  z-index: 5;
  color: #f6ab02;
}
.landscape {
  position: relative;
  max-width: 1440px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
.landscape-inner {
  height: calc(100vh - 94px - 74px);
  background: #43c477;
  overflow: hidden;
  position: relative;
}
@media (orientation: portrait) {
  .landscape-inner {
    min-height: 800px;
    max-height: 1100px;
  }
}
@media (orientation: landscape) {
  .landscape-inner {
    min-height: 460px;
    max-height: 740px;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner {
    min-height: 440px;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .landscape-inner {
    min-height: 420px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner {
    min-height: 480px;
    max-height: 600px;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner {
    min-height: 400px;
  }
}
.landscape-inner .laut {
  width: 1440px;
  height: 37.5%;
  margin: 0 -720px;
  background: #9be4ea;
  position: absolute;
  top: 0;
  left: 50%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .laut {
    height: 30%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .laut {
    height: 25%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .laut {
    width: 1120px;
    margin: 0 -560px;
    height: 35%;
  }
}
@media (max-width: 576px) {
  .landscape-inner .laut {
    width: 1120px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .laut {
    margin: 0 -560px;
    height: 30%;
  }
}
.landscape-inner .laut .gunung {
  height: 65%;
  width: 100%;
  background: url("landscape-img/1-gunung.png") 50% 100% no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 576px) {
  .landscape-inner .laut .gunung {
    left: 15%;
  }
}
.landscape-inner .laut .air {
  height: 35%;
  width: 100%;
  background: #43c477 url("landscape-img/1-laut.png") 50% 0 repeat-x;
  background-size: auto 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.landscape-inner .taman {
  height: 30%;
  width: 100%;
  position: absolute;
  top: 37.5%;
  left: 0;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman {
    top: 30%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .taman {
    top: 25%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman {
    top: 35%;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman {
    top: 30%;
  }
}
.landscape-inner .taman .jalan {
  height: 36px;
  width: 100%;
  background: #575757;
  transform: rotate(-0.5deg);
  position: absolute;
  top: 40%;
  left: 0;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman .jalan {
    top: 45%;
    transform: rotate(-2.5deg);
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .jalan {
    height: 28px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .jalan {
    height: 28px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman .jalan {
    top: 55%;
  }
}
.landscape-inner .taman .jalan::before {
  content: "";
  display: block;
  height: 3px;
  margin: -2px;
  background-image: -webkit-linear-gradient(left, #fff 0, #fff 49%, transparent 50%, transparent 100%);
  background-image: linear-gradient(to right, #fff 0, #fff 49%, transparent 50%, transparent 100%);
  background-repeat: repeat-x;
  background-size: 36px 3px;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .jalan::before {
    height: 2px;
    background-size: 28px 2px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .jalan::before {
    height: 2px;
    background-size: 28px 2px;
  }
}
.landscape-inner .taman .sawah {
  width: 414px;
  height: 90px;
  background: url("landscape-img/6.png") 50% 50% no-repeat;
  background-size: contain;
  position: absolute;
  top: 62.5%;
  left: 20%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman .sawah {
    left: 10%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .taman .sawah {
    left: 12.5%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .taman .sawah {
    left: -15%;
    top: 65%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .sawah {
    width: 322px;
    height: 70px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman .sawah {
    display: none;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .taman .sawah {
    left: -5%;
  }
}
.landscape-inner .taman .pagar {
  width: 1215px;
  height: 225px;
  margin: 0 -585px;
  background: url("landscape-img/1a.png") 50% 100% no-repeat;
  background-size: contain;
  position: absolute;
  top: -197.1px;
  left: 40%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman .pagar {
    left: 52.5%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .taman .pagar {
    left: 37.5%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .taman .pagar {
    left: 45%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .pagar {
    width: 945px;
    height: 175px;
    margin: 0 -455px;
    top: -153.3px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .pagar {
    width: 945px;
    height: 175px;
    margin: 0 -455px;
    top: -153.3px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman .pagar {
    left: 60%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .taman .pagar {
    left: 50%;
  }
}
.landscape-inner .taman .panggung {
  width: 297px;
  height: 192.6px;
  background: url("landscape-img/2.png") 50% 50% no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 69%;
  left: 1%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman .panggung {
    left: -1%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .taman .panggung {
    left: -11%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .taman .panggung {
    left: -15%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .panggung {
    width: 231px;
    height: 149.8px;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .landscape-inner .taman .panggung {
    margin: 0 -115.5px;
    left: 5%;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .panggung {
    width: 198px;
    height: 128.4px;
    margin: 0 -99px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman .panggung {
    bottom: 75%;
    left: -5%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .taman .panggung {
    bottom: 82.5%;
    left: 0;
  }
}
.landscape-inner .taman .jaranan {
  width: 92.34px;
  height: 72.9px;
  background: url("landscape-img/2a.gif") 50% 50% no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 22.5%;
  left: 35%;
  animation: jaranan linear 12s infinite;
}
@media (max-width: 767px) and (orientation: landscape) {
  .landscape-inner .taman .jaranan {
    width: 71.82px;
    height: 56.7px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .jaranan {
    width: 61.56px;
    height: 48.6px;
  }
}
.landscape-inner .taman .jaranan::before {
  content: "";
  display: block;
  width: 30%;
  height: 5px;
  margin: -3px 0;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 50%;
  position: absolute;
  top: 100%;
  left: 35%;
}
@keyframes jaranan {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(75%, -1%) scaleX(1);
  }
  26% {
    transform: translate(75%, -1%) scaleX(-1);
  }
  75% {
    transform: translate(-75%, 1%) scaleX(-1);
  }
  76% {
    transform: translate(-75%, 1%) scaleX(1);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes mask-pasar {
  0% {
    background-position: 0 0;
  }
  2.5% {
    background-position: 20% 0;
  }
  5% {
    background-position: 40% 0;
  }
  7.5% {
    background-position: 60% 0;
  }
  10% {
    background-position: 80% 0;
  }
  12.5% {
    background-position: 100% 0;
  }
  15% {
    background-position: 40% 0;
  }
  17.5% {
    background-position: 60% 0;
  }
  20% {
    background-position: 80% 0;
  }
  22.5% {
    background-position: 100% 0;
  }
  25% {
    background-position: 40% 0;
  }
  27.5% {
    background-position: 60% 0;
  }
  30% {
    background-position: 80% 0;
  }
  32.5% {
    background-position: 100% 0;
  }
  35% {
    background-position: 40% 0;
  }
  37.5% {
    background-position: 60% 0;
  }
  40% {
    background-position: 40% 0;
  }
  42.5% {
    background-position: 60% 0;
  }
  45% {
    background-position: 40% 0;
  }
  47.5% {
    background-position: 20% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.landscape-inner .taman .maskot-pasar {
  width: 126px;
  height: 123px;
  position: absolute;
  bottom: 90%;
  right: 30%;
}
.landscape-inner .taman .maskot-pasar::before,
.landscape-inner .taman .maskot-pasar::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.landscape-inner .taman .maskot-pasar::before {
  width: 38px;
  height: 43px;
  margin-top: 34px;
  margin-left: -27px;
  left: 50%;
  background: url("landscape-img/maskot-pasar-b.png") 0 0 no-repeat;
  background-size: auto 100%;
  animation: mask-pasar linear 5s infinite;
  animation-timing-function: step-start;
}
.landscape-inner .taman .maskot-pasar::after {
  background: url("landscape-img/maskot-pasar-a.png") 0 0 no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-pasar {
    right: 10%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-pasar {
    right: 5%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-pasar {
    width: 111px;
    height: 109px;
  }
  .landscape-inner .taman .maskot-pasar::before {
    width: 34px;
    height: 38px;
    margin-top: 30px;
    margin-left: -24px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .maskot-pasar {
    margin: 0 -49px;
    width: 111px;
    height: 109px;
    margin: 0 -56px;
  }
  .landscape-inner .taman .maskot-pasar::before {
    width: 34px;
    height: 38px;
    margin-top: 30px;
    margin-left: -24px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-pasar {
    right: 10%;
    bottom: 82.5%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-pasar {
    right: 30%;
  }
}
@keyframes mask-idm {
  0% {
    background-position: 0 0;
  }
  33% {
    background-position: 50% 0;
  }
  67% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.landscape-inner .taman .maskot-idm {
  width: 125px;
  height: 112px;
  margin: -125px -56px;
  background: url("landscape-img/maskot-idm-a.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 23.5%;
  left: 47.5%;
}
.landscape-inner .taman .maskot-idm::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("landscape-img/maskot-idm-b.png") 0 0 no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 1px;
  animation: mask-idm linear 3s infinite;
  animation-timing-function: step-start;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-idm {
    left: 55%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-idm {
    left: 45%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-idm {
    width: 98px;
    height: 88px;
    margin: -98px -44px;
  }
  .landscape-inner .taman .maskot-idm::before {
    left: 0;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .maskot-idm {
    width: 98px;
    height: 88px;
  }
  .landscape-inner .taman .maskot-idm::before {
    left: 0;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-idm {
    margin: -98px -44px;
    left: 60%;
    top: 40%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-idm {
    left: 50%;
  }
}
@keyframes mask-inovasi-a {
  0% {
    background-position: 0 0;
  }
  20% {
    background-position: 33.33333333% 0;
  }
  35% {
    background-position: 66.66666667% 0;
  }
  50% {
    background-position: 100% 0;
  }
  60% {
    background-position: 66.66666667% 0;
  }
  70% {
    background-position: 33.33333333% 0;
  }
  90% {
    background-position: 0 0;
  }
}
@keyframes mask-inovasi-b {
  0% {
    background-position: 0 0;
  }
  10% {
    background-position: 33.33333333% 1px;
  }
  20% {
    background-position: 66.66666667% 2px;
  }
  40% {
    background-position: 66.66666667% 3px;
    transform: translate(-1px, -2px);
  }
  70% {
    background-position: 100% 3px;
    transform: translate(-1px, -1px);
  }
  75% {
    background-position: 0 0;
  }
}
.landscape-inner .taman .maskot-inovasi {
  width: 88px;
  height: 101px;
  position: absolute;
  bottom: 60%;
  left: 25%;
  z-index: 1;
}
.landscape-inner .taman .maskot-inovasi span {
  display: block;
  width: 100%;
  height: 100%;
  background: url("landscape-img/maskot-inovasi-a.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.landscape-inner .taman .maskot-inovasi::before,
.landscape-inner .taman .maskot-inovasi::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.landscape-inner .taman .maskot-inovasi::before {
  background: url("landscape-img/maskot-inovasi-c.png") 0 0 no-repeat;
  background-size: auto 100%;
  animation: mask-inovasi-b linear 0.75s infinite;
  animation-timing-function: step-start;
  z-index: -1;
}
.landscape-inner .taman .maskot-inovasi::after {
  background: url("landscape-img/maskot-inovasi-b.png") 0 0 no-repeat;
  background-size: auto 100%;
  animation: mask-inovasi-a linear 0.75s infinite;
  animation-timing-function: step-start;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-inovasi {
    bottom: 55%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-inovasi {
    left: 20%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-inovasi {
    left: 22.5%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-inovasi {
    width: 66px;
    height: 76px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .taman .maskot-inovasi {
    width: 66px;
    height: 76px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .taman .maskot-inovasi {
    left: 20%;
    bottom: 50%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .taman .maskot-inovasi {
    left: 15%;
  }
}
.landscape-inner .waduk {
  width: 518.4px;
  height: 360px;
  margin: -144px 0;
  background: url("landscape-img/3.png") 100% 100% no-repeat;
  background-size: contain;
  position: absolute;
  top: 37.5%;
  right: 0;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .waduk {
    top: 50%;
    right: -5%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .waduk {
    right: -12.5%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .waduk {
    top: 47.5%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .waduk {
    width: 403.2px;
    height: 280px;
    top: 45%;
    right: -10%;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .landscape-inner .waduk {
    right: -12.5%;
  }
}
@media (max-width: 576px) {
  .landscape-inner .waduk {
    width: 288px;
    height: 200px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .waduk {
    margin: 0 -144px;
    right: 25%;
    top: 35%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .waduk {
    top: 55%;
  }
}
.landscape-inner .kampung {
  width: 599.4px;
  height: 232.2px;
  background: url("landscape-img/5.png") 100% 100% no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 22.5%;
  right: 0;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .kampung {
    bottom: 17.5%;
    right: -5%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .kampung {
    right: -15%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .kampung {
    right: -15%;
    bottom: 20%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .kampung {
    width: 466.2px;
    height: 180.6px;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .landscape-inner .kampung {
    margin: 0 -233.1px;
    right: 7.5%;
  }
}
@media (max-width: 576px) {
  .landscape-inner .kampung {
    width: 466.2px;
    height: 180.6px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .kampung {
    margin: 0 -233.1px;
    right: 25%;
    bottom: 10%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .kampung {
    bottom: 17.5%;
  }
}
@keyframes mask-profil {
  0% {
    background-position: 0 0;
  }
  1.5% {
    background-position: 33.33333333% 0;
  }
  3% {
    background-position: 66.66666667% 0;
  }
  5% {
    background-position: 100% 0;
  }
  40% {
    background-position: 100% 0;
  }
  41% {
    background-position: 66.66666667% 0;
  }
  42% {
    background-position: 33.33333333% 0;
  }
  43% {
    background-position: 0 0;
  }
}
.landscape-inner .kampung .maskot-profil {
  width: 102px;
  height: 118px;
  background: url("landscape-img/maskot-profil-a.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 57.5%;
  left: 37.5%;
}
.landscape-inner .kampung .maskot-profil::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("landscape-img/maskot-profil-b.png") 0 0 no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: mask-profil linear 4s infinite;
  animation-timing-function: step-start;
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .kampung .maskot-profil {
    width: 80px;
    height: 93px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .kampung .maskot-profil {
    width: 80px;
    height: 93px;
  }
}
.landscape-inner .rumah {
  width: 441px;
  height: 235.8px;
  position: absolute;
  bottom: 15%;
  left: 0;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .rumah {
    bottom: 12.5%;
  }
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .rumah {
    left: -7.5%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .rumah {
    left: -7.5%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .rumah {
    width: 343px;
    height: 183.4px;
    left: -2.5%;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .landscape-inner .rumah {
    margin: 0 -171.5px;
    left: 12.5%;
  }
}
@media (max-width: 576px) {
  .landscape-inner .rumah {
    width: 343px;
    height: 183.4px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .rumah {
    margin: 0 -171.5px;
    left: 15%;
    bottom: 35px;
  }
}
.landscape-inner .rumah .dalam {
  width: 267.3px;
  height: 235.8px;
  background: url("landscape-img/8-dlm.png") 0 100% no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .rumah .dalam {
    width: 207.9px;
    height: 183.4px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .rumah .dalam {
    width: 207.9px;
    height: 183.4px;
  }
}
@keyframes mask-dir {
  0% {
    background-position: 0 0;
  }
  1% {
    background-position: 20% 0;
  }
  2% {
    background-position: 40% 0;
  }
  4% {
    background-position: 60% 0;
  }
  8% {
    background-position: 80% 0;
  }
  12% {
    background-position: 100% 0;
  }
  16% {
    background-position: 80% 0;
  }
  20% {
    background-position: 100% 0;
  }
  24% {
    background-position: 80% 0;
  }
  28% {
    background-position: 100% 0;
  }
  32% {
    background-position: 80% 0;
  }
  36% {
    background-position: 100% 0;
  }
  40% {
    background-position: 80% 0;
  }
  44% {
    background-position: 60% 0;
  }
  46% {
    background-position: 40% 0;
  }
  47% {
    background-position: 20% 0;
  }
  48% {
    background-position: 0 0;
  }
}
.landscape-inner .rumah .dalam .maskot-bumdesa {
  width: 92px;
  height: 107px;
  background-size: contain;
  position: absolute;
  bottom: 5%;
  left: 55%;
  overflow: hidden;
}
.landscape-inner .rumah .dalam .maskot-bumdesa::before {
  content: "";
  display: block;
  background: url("landscape-img/0maskot-dir-a.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  right: -1px;
}
.landscape-inner .rumah .dalam .maskot-bumdesa::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: url("landscape-img/maskot-dir-b.png") 0 0 no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: mask-dir linear 3s infinite;
  animation-timing-function: step-start;
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .rumah .dalam .maskot-bumdesa {
    width: 69px;
    height: 80px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .rumah .dalam .maskot-bumdesa {
    width: 69px;
    height: 80px;
  }
}
.landscape-inner .rumah .luar {
  width: 234px;
  height: 32.4px;
  background: url("landscape-img/8-lwr.png") 0 100% no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 10%;
  right: 0;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .rumah .luar {
    bottom: 75%;
    right: -15%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .rumah .luar {
    bottom: 95%;
    right: 25%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .rumah .luar {
    width: 182px;
    height: 25.2px;
  }
}
@media (max-width: 767px) and (orientation: landscape) {
  .landscape-inner .rumah .luar {
    right: 5%;
  }
}
@media (max-width: 576px) {
  .landscape-inner .rumah .luar {
    width: 182px;
    height: 25.2px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .rumah .luar {
    bottom: 87.5%;
    right: 30%;
  }
}
.landscape-inner .rumah .luar::before {
  content: "";
  display: block;
  width: 562.5px;
  height: 162px;
  background: url("landscape-img/7.png") 100% 50% no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 111%;
  left: -99%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .rumah .luar::before {
    left: -123%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .rumah .luar::before {
    left: -147%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .rumah .luar::before {
    width: 437.5px;
    height: 126px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .rumah .luar::before {
    width: 437.5px;
    height: 126px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .rumah .luar::before {
    bottom: 102.5%;
  }
}
@keyframes mask-admin {
  0% {
    background-position: 0 0;
  }
  20% {
    background-position: 25% 0;
  }
  40% {
    background-position: 50% 0;
  }
  60% {
    background-position: 75% 0;
  }
  80% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes mask-admin-a {
  0% {
    background-position: 0 0;
  }
  20% {
    background-position: 25% 0;
  }
  21% {
    background-position: 50% 0;
  }
  22% {
    background-position: 75% 0;
  }
  30% {
    background-position: 75% 0;
  }
  37% {
    background-position: 50% 0;
  }
  38% {
    background-position: 25% 0;
  }
  39% {
    background-position: 50% 0;
  }
  40% {
    background-position: 50% 0;
  }
  41% {
    background-position: 50% 0;
  }
  42% {
    background-position: 75% 0;
  }
  50% {
    background-position: 75% 0;
  }
  57% {
    background-position: 50% 0;
  }
  58% {
    background-position: 25% 0;
  }
  59% {
    background-position: 50% 0;
  }
  60% {
    background-position: 50% 0;
  }
  61% {
    background-position: 50% 0;
  }
  62% {
    background-position: 75% 0;
  }
  70% {
    background-position: 75% 0;
  }
  77% {
    background-position: 50% 0;
  }
  78% {
    background-position: 25% 0;
  }
  79% {
    background-position: 50% 0;
  }
  80% {
    background-position: 50% 0;
  }
  81% {
    background-position: 50% 0;
  }
  82% {
    background-position: 75% 0;
  }
  90% {
    background-position: 75% 0;
  }
  97% {
    background-position: 50% 0;
  }
  98% {
    background-position: 25% 0;
  }
  99% {
    background-position: 50% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.landscape-inner .rumah .luar .maskot-admin {
  width: 95px;
  height: 116px;
  margin: 0 -47px;
  background: url("landscape-img/maskot-sid-a.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 50%;
  left: 60%;
}
.landscape-inner .rumah .luar .maskot-admin span {
  display: block;
  width: 100%;
  height: 100%;
  background: url("landscape-img/maskot-sid-a.png") 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}
.landscape-inner .rumah .luar .maskot-admin span::after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  background: url("landscape-img/maskot-sid-b.png") 0 0 no-repeat;
  background-size: auto 200%;
  position: absolute;
  top: 0;
  left: 0;
  animation: mask-admin-a linear 1.5s infinite;
  animation-timing-function: step-start;
}
.landscape-inner .rumah .luar .maskot-admin::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("landscape-img/maskot-sid-b.png") 0 0 no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: mask-admin linear 0.5s infinite;
  animation-timing-function: step-start;
}
.landscape-inner .rumah .luar .maskot-admin::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("landscape-img/maskot-sid-c.png") 0 0 no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 0;
  left: 0;
  animation: mask-admin linear 2s infinite;
  animation-timing-function: step-start;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-inner .rumah .luar .maskot-admin {
    left: 50%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .rumah .luar .maskot-admin {
    width: 74px;
    height: 91px;
    margin: 0 -37px;
  }
}
@media (max-width: 576px) {
  .landscape-inner .rumah .luar .maskot-admin {
    width: 74px;
    height: 91px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .rumah .luar .maskot-admin {
    margin: 0 -37px;
    left: 55%;
  }
}
.landscape-inner .lunalun {
  width: 1440px;
  height: 324px;
  margin: 0 -720px;
  background: url("landscape-img/9.png") 50% 100% no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 50%;
}
@media (max-width: 1199px) and (orientation: landscape) {
  .landscape-inner .lunalun {
    left: 60%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-inner .lunalun {
    left: 60%;
  }
}
@media (max-width: 991px) and (orientation: landscape) {
  .landscape-inner .lunalun {
    width: 1120px;
    height: 252px;
    margin: 0 -560px;
    left: 62.5%;
  }
}
@media (max-width: 576px) {
  .landscape-inner .lunalun {
    width: 960px;
    height: 216px;
    margin: 0 -480px;
    bottom: -15px;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-inner .lunalun {
    left: 75%;
  }
}
@media (max-width: 576px) and (orientation: landscape) {
  .landscape-inner .lunalun {
    left: 67.5%;
  }
}
.landscape-buttons {
  position: absolute;
  list-style: none;
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  bottom: 0;
}
.landscape-buttons > * {
  position: absolute;
  width: 10rem;
  margin: 0 -5rem;
  text-align: center;
}
.landscape-buttons > * a {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 0.75rem;
  font-family: Montserrat;
  text-transform: uppercase;
  font-weight: 700;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff !important;
  background: rgba(230, 48, 65, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.75em;
}
.landscape-buttons > * a:hover {
  background: rgba(230, 48, 65, 0.95);
  border-color: rgba(255, 255, 255, 0.5);
}
.landscape-buttons > *.link-inovasi {
  margin-bottom: 6rem;
  bottom: 82.5%;
  left: 27.5%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-buttons > *.link-inovasi {
    bottom: 65%;
    left: 30%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-buttons > *.link-inovasi {
    bottom: 67.5%;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-buttons > *.link-inovasi {
    bottom: 82.5%;
  }
}
.landscape-buttons > *.link-idm {
  bottom: 80%;
  left: 47.5%;
  margin-top: 3rem;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-buttons > *.link-idm {
    bottom: 90%;
    left: 55%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-buttons > *.link-idm {
    bottom: 95%;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-buttons > *.link-idm {
    bottom: 80%;
  }
}
.landscape-buttons > *.link-pasar {
  margin-bottom: 6rem;
  bottom: 100%;
  right: 35%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-buttons > *.link-pasar {
    bottom: 110%;
    right: 17%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-buttons > *.link-pasar {
    bottom: 118%;
    right: 14%;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-buttons > *.link-pasar {
    margin: 0;
    right: 0;
    bottom: 90%;
  }
}
.landscape-buttons > *.link-profil {
  margin-bottom: -1rem;
  bottom: 62.5%;
  right: 22.5%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-buttons > *.link-profil {
    margin-right: 0;
    bottom: 42.5%;
    right: 17.5%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-buttons > *.link-profil {
    bottom: 50%;
    right: 12.5%;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-buttons > *.link-profil {
    margin: 0;
    bottom: 37.5%;
    right: 7.5%;
  }
}
.landscape-buttons > *.link-sid {
  margin-bottom: 1rem;
  bottom: 17.5%;
  left: 25%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-buttons > *.link-sid {
    bottom: 37.5%;
    left: 37.5%;
  }
}
@media (max-width: 991px) and (orientation: portrait) {
  .landscape-buttons > *.link-sid {
    bottom: 50%;
    left: 20%;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-buttons > *.link-sid {
    margin: 0;
    left: 1%;
    bottom: 50%;
  }
}
.landscape-buttons > *.link-bumdesa {
  margin-bottom: 3rem;
  bottom: 56%;
  left: 14%;
}
@media (max-width: 1199px) and (orientation: portrait) {
  .landscape-buttons > *.link-bumdesa {
    bottom: 32.5%;
    left: 17.5%;
  }
}
@media (max-width: 576px) and (orientation: portrait) {
  .landscape-buttons > *.link-bumdesa {
    margin: 1rem 0.5rem;
    left: 0;
    bottom: 0;
  }
}