html,
body {
    margin: 0;
    font-size: 100%;
    background: #00beef;
    scroll-behavior: smooth;
    padding:0;
    overflow-x:hidden;
    padding:0 !important;
}

body a {
    text-decoration: none;
}

html {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

}

a:hover {
    text-decoration: none;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    transition: .5s ease-in;
    -webkit-transition: .5s ease-in;
    -moz-transition: .5s ease-in;
    -o-transition: .5s ease-in;
    -ms-transition: .5s ease-in;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 600;
}

p {
    font-size: 1em;
    color: #777;
    line-height: 1.8em;
}

ul {
    margin: 0;
    padding: 0;
}
.modal-dialog2{
  animation-name: sidebar;
  animation-duration: .5s;
}
@keyframes sidebar {
  0%   {transform: translateX(2000px);}
  100% {transform: translateX(0px);}
}
#myBtn {
  display: none;
  position: fixed;
  bottom: 0px;
  right: 65px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
.bg-area1{
    background: url(../img/bg1.png) no-repeat bottom;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 115vh;
    padding:90px 80px 0px 80px;
}
.area1{
    height:100vh;
}
.card {
    position: relative;
    display: inline-block;
    background:transparent;
    border:none;
}
.card .img-top {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
}
.card:hover .img-top {
    display: inline;
    cursor:pointer;
    transition: .5s ease-in;
    -webkit-transition: .5s ease-in;
    -moz-transition: .5s ease-in;
    -o-transition: .5s ease-in;
    -ms-transition: .5s ease-in;
}
.menubtn{
  cursor:pointer;
}
.arah{
    position:absolute;
    bottom:0;
    right:90px;
}
.bg-area2{
    background: url(../img/bg2.png) no-repeat top;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100%;
}
.bg-area3{
    background: url(../img/bg3.png) no-repeat top;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100%;
}
.bg-area4{
    background: url(../img/bg4.png) no-repeat top;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100%;
    padding: 50px 100px;
}
.bg-area5{
    width:100%;
    background:#e6e6e6;
}
.bg-area5 img {
  padding-left: 60px;
  padding-top:40px;
}
button.accordion{
  border:none;
  outline:none;
}
button.accordion:hover{
  color:black;
}
.accordion {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  font-size:18px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.bg-area6{
  background: url(../img/bg5.png) no-repeat top;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  height: 100%;
}
.bg-area7{
  background: url(../img/bg6.png) no-repeat bottom;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  height: 100%;
}
.galaxi img{
    margin-top:50px;
}
.instruction{
  position: relative;
    top: 160px;
}
.return{
  width:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  padding:0 100px;
  display:none;
}
.wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.game-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.game {
  width: 800px;
  height:600px;
  animation: scroll-background 5s linear infinite;
  position: relative;
}

@keyframes scroll-background {
  from {
    background-position-y: 0px;
  }
  to {
    background-position-y: 256px;
  }
}

.game .enemy {
  position: absolute;
  margin-left: -20px;
  margin-top: 90px;
  margin-bottom:-50px;
  width: 100px;
}

.game .player {
  position: absolute;
  margin-left: -20px;
  width: 100px;
}

.game .laser {
  position: absolute;
  margin-left: -2.5px;
  height: 50px;
}

.game .enemy-laser {
  position: absolute;
  margin-left: -2.5px;
  height: 50px;
}

.congratulations {
  display: none;
  position: absolute;
  background: #c7a526;
  color: white;
  padding: 20px 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  text-align: center;
  animation: pop-in 1s;
}

.game-over {
  display: none;
  position: absolute;
  background: #6b1818;
  color: white;
  padding: 20px 50px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  text-align: center;
  animation: pop-in 1s;
}
.up:hover, .up:focus {
  box-shadow: inset 0 -3.25em 0 0 var(--hover);
}
.up {
  --color: #e4cb58;
  --hover: #e4cb58;
}
button {
  color: var(--color);
  transition: 0.25s;
}
button:hover, button:focus {
  border-color: var(--hover);
  color: #fff;
}
button {
background: none;
border: 2px solid;
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
}
.btn {
  background: none;
border: 2px solid;
font: inherit;
line-height: 1;
margin: 0.5em;
padding: 1em 2em;
color: #e4cb58;
  transition: 0.25s;
}
.btn:hover{
  border-color: #e4cb58;
  color: #fff;
  box-shadow: inset 0 -3.25em 0 0 #e4cb58;
}
@keyframes pop-in {
  0% {
    opacity: 0;
    transform: translate(0, -100px);
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translate(0, 30px);
  }
  100% {
    transform: translate(0, 0);
  }
}

  .meet{
      padding:0 100px;
  }
  .meet img{
    position: relative;
    top: -80px;
  }
  .spincoin {
    animation: spin3D 1s infinite;
    top: -130px;
    position: relative;
    left: 400px;
  }
  .spincoin2 {
    animation: spin3D 1s infinite;
    top: -240px;
    position: relative;
    right: -1450px;
  }
  @keyframes spin3D {
    from { transform: rotateY(0deg) }
    to { transform: rotateY(360deg) }
  }
  .bawah{
    animation:bawahanimation 1.2s infinite;
  }
  @keyframes bawahanimation{
    0%{
        opacity:0;
        transform:translate(0,-30px);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(0px,0px);
    }
  }
  .atas{
    animation:atasanimation 1.2s infinite;
  }
  @keyframes atasanimation{
    0%{
        opacity:0;
        transform:translate(0,0px);
    }
    50%{
        opacity:1;
    }
    100%{
        opacity:0;
        transform:translate(0px,-30px);
    }
  }
  .bg-area2 p{
    padding-left:60px;
    font-size:25px;
    color:#754a30;
    font-weight:500;
    line-height:32px;
  }
  .bg-area2 h1{
    color:white;
    font-size:60px;
  }
  .bg-area2 h2{
    color:white;
    font-size:35px;
  }

  .tim{
    position: relative;
    top: -130px;
  }

  .gambar{
    margin-top:90px;
  }
  .pixel{
    margin-top:30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pixel img{
    width:200px;
    height:300px;
    animation:animate 1s ease-in-out infinite;
  }
  
  .chrspc{
      width: 320px !important;
      height: 100%;
  }

  .p3{
    width:300px !important;
    height:300px !important;
  }
  .karakter h3{
    margin-top:30px;
    font-size:25px;
    color:white;
    line-height:32px;
    font-family: "Pixelify Sans", sans-serif;
  }
  .wavearea{
    height:210px;
    width:100%;
    position:relative;
    display:flex;
    z-index:0;
    margin-top:100px;
}
.wave#wave1{
  --i:1;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:url(../img/wave.png);
  background-size:90% 200px;
  animation:animate 4s ease-in-out infinite;
  position:absolute;
  animation-delay:calc(var(--i)*0.25s);
  z-index:1000;
  opacity:1;
  background-position-x: 400px;
}
.wave#wave2{
  --i:2;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:url(../img/wave.png);
  background-size:90% 200px;
  animation:animate 4s ease-in-out infinite;
  position:absolute;
  animation-delay:calc(var(--i)*0.25s);
  z-index:999;
  opacity:0.5;
  background-position-x: 300px;
}
.wave#wave3{
  --i:3;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:url(../img/wave.png);
  background-size:90% 200px;
  animation:animate 4s ease-in-out infinite;
  position:absolute;
  animation-delay:calc(var(--i)*0.25s);
  z-index:998;
  opacity:0.2;
  background-position-x: 200px;
}
.wave#wave4{
  --i:4;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:url(../img/wave.png);
  background-size:90% 200px;
  animation:animate 4s ease-in-out infinite;
  position:absolute;
  animation-delay:calc(var(--i)*0.25s);
  z-index:999;
  opacity:0.7;
  background-position-x: 100px;
}
.waveareas{
  height:410px;
  width:100%;
  position:relative;
  display:flex;
  z-index:0;
}
.waves#waves1{
--i:1;
bottom:0;
left:0;
width:100%;
height:150px;
background:url(../img/api1.png);
background-size:90% 150px;
animation:animate 1s ease-in-out infinite;
position:absolute;
animation-delay:calc(var(--i)*0.25s);
z-index:1000;
background-position-x: 400px;
}
.waves#waves2{
  --i:2;
  bottom:0;
  left:0;
  width:100%;
  height:250px;
  background:url(../img/api2.png);
  background-size:90% 250px;
  animation:animate 1s ease-in-out infinite;
  position:absolute;
  animation-delay:calc(var(--i)*0.25s);
  z-index:999;
  background-position-x: 300px;
}
.waves#waves3{
  --i:3;
  bottom:0;
  left:0;
  width:100%;
  height:400px;
  background:url(../img/api3.png);
  background-size:90% 400px;
  animation:animate 1s ease-in-out infinite;
  position:absolute;
  animation-delay:calc(var(--i)*0.25s);
  z-index:998;
  background-position-x: 200px;
}
@keyframes animate{
  0%,100%{
      transform: translateY(0px)
  }
  50%{
      transform: translateY(10px)
  }
}
.naikm{
  position: absolute;
    bottom: -260px;
}
.darah{
  display: flex;
    align-items: center;
    justify-content: center;
}
.responsive{
  width:100% !important;
}
.responsive .prev_arrow{
  color: white;
    font-size: 50px;
    text-align: center;
    display: inline-block;
    position: absolute;
    bottom: -80px;
    left: 45%;
    transform: translate(-45%);
    cursor:pointer;
}
.responsive .next_arrow{
  color: white;
    font-size: 50px;
    text-align: center;
    display: inline-block;
    position: absolute;
    bottom: -80px;
    right: 38%;
    transform: translate(-38%);
    cursor:pointer;
}
.widget2{
  position: relative;
    top: -50px;
}
.widget2{
  position: relative;
    top: -50px;
}
.widget3{
  float:right;
  position: relative;
    top: -80px;
}
.bg-area3 p{
  padding-left:60px;
  font-size:25px;
  color:#fff;
  line-height:32px;
  margin-top:40px;
}
.whtpic{
  padding-left:60px;
}
.jumparea1{
  position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    padding-left:20px;
}
.jumparea2{
  position: absolute;
    top: 110px;
    right: 0;
    text-align: center;
}
.jumper1, .jumper2{
  display: flex;
    align-items: center;
    justify-content: center;
}
.jumper1 img, .block1 img{
  padding:0;
}
.people{
  height:250px;
  animation: pop 1.2s infinite;
  z-index:1;
}
.dragon{
  height:250px;
  animation: pop2 1.2s infinite;
  z-index:0;
}
@keyframes pop {
  0% { }
  50% { transform: translate(0%, -70%) scale(1, 1); }
  55% { transform: translate(0%, -70%)  }
  60% { transform: translate(0%, -70%)  }
  65% { transform: translate(0%, -70%)  }
  70% { transform: translate(0%, -70%)  }
  100% { }
}
@keyframes pop2 {
  0% { }
  50% { transform: translate(0%) scale(1, 1); }
  70% { transform: translate(0%, -50%)  }
  100% { }
}

.gun{
  width: 100%;
  position: absolute;
    top: -100px;
    animation: shoot 1.2s infinite;
}
.gun2{
  width: 100%;
  position: absolute;
    top: 20px;
    animation: shoot2 1.2s infinite;
}
.modal-body h2{
  color:black
}
.gun2 img{
  height:70px;
  width:280px;
  z-index:1;
}
.gun img{
  height:50px;
  width:280px;
}

@keyframes shoot {
  0% {left:49%; opacity:0;}
  50%{opacity:1;left:50%;}
  100%{left:300%;}
}
@keyframes shoot2 {
  0% { opacity:1;right:50%;}
  60%{opacity:0;}
  100%{opacity:0;right:300%;}
}
@keyframes shoot3 {
  0% { left:0%;}
  50%{left:80%;}
  100% {left:0%;}
}
.roleplay{
  display:none;
}
.roleplay.active{
  display:block;
}
.portof{
  width:100%;
  display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
}
.box{
  width:160px;
  height:160px;
  background:red;
}
.box p{
  font-size:45px;
  text-align:left;
  color:black;
  font-weight:700;
  line-height: normal;
  margin-left: 15px;
}
.circle{
  border: 5px solid black;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation:hilang 3s ease-in-out infinite;
}
.circle::before{
  content: 'Click';
    font-size: 45px;
    font-weight: 600;
    animation:hilang 3s ease-in-out infinite;
}

@keyframes hilang {
  0% {content:'30';transition:.5s;font-weight:700;}
  100% {content:'Click';transition:.5s}
}
.cardz1,.cardz2, .cardz3,.cardz4,.cardz5,.cardz6,.cardz7,.cardz8,.cardz9, .cardz10,
.cardz11,.cardz12, .cardz13,.cardz14,.cardz15,.cardz16,.cardz17,.cardz18,.cardz19, .cardz20,
.cardz21,.cardz22, .cardz23,.cardz24,.cardz25,.cardz26,.cardz27,.cardz28,.cardz29, .cardz30{
    /* padding: 4rem; */
    height: 170px;
    width: 100%;
    margin: 0px;
    cursor:pointer;
}
.cardsz p{
  font-size:45px;
  text-align:left;
  color:black;
  font-weight:700;
  line-height: normal;
  margin-left: 15px;
}
.cardsz {
  display: grid;
}

.cardz9,.cardz11,.cardz17,.cardz23,.cardz29{
  background:#fceec4;
}
.cardz2,.cardz10,.cardz18,.cardz15,.cardz22,.cardz27{
  background:#f2b336;
}
.cardz3,.cardz6,.cardz19,.cardz14,.cardz25,.cardz28{
  background:#7dd7db;
}
.cardz4,.cardz8,.cardz16,.cardz12,.cardz21,.cardz30,.cardz1{
  background:#37efb2;
}
.cardz5,.cardz7,.cardz20,.cardz13,.cardz24,.cardz26{
  background:#e04c38;
}
/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
  .cardsz { grid-template-columns: repeat(5, 1fr); }
}

/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
  .cardsz { grid-template-columns: repeat(10, 1fr); }
}

.piala{
  margin-top:50px;
  height:80px;
}
.piala img{
  height:80px;
  float:left;
  animation: pop2 1.2s infinite;
}
.elemen{
  width: 1700px;
    height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.elemen img{
  width:87%;
}
.dadu{
  display:flex;
  animation: shoot3 5s infinite;
  position:relative;
}
@keyframes spin {
  0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  16% { transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg); }
  33% { transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg); }
  50% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
  66% { transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
  83% { transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
  100% { transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}
#wrapper {
  position: relative;
  width: 200px;
  padding-top: 50px;
  perspective: 1200px;
}
#platform {
margin-top:100px;
}
#dice span {
  position:absolute;
  margin:100px 0 0 100px;
  display: block;
  font-size: 2.5em;
  padding: 10px;
}
#dice {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}
.side {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgb(0, 0, 0);
  box-shadow:inset 0 0 40px rgb(53, 53, 53);
  border-radius: 20px;
}
#dice .cover, #dice .inner {
  background: #000000;
  box-shadow: none;
}
#dice .cover {
  border-radius: 0;
  transform: translateZ(0px);
}
#dice .cover.x {
  transform: rotateY(90deg);
}
#dice .cover.z {
  transform: rotateX(90deg);
}
#dice .front  {
  transform: translateZ(50px);
}
#dice .front.inner  {
  transform: translateZ(49px);
}
#dice .back {
  transform: rotateX(-180deg) translateZ(50px);
}
#dice .back.inner {
  transform: rotateX(-180deg) translateZ(49px);
}
#dice .right {
  transform: rotateY(90deg) translateZ(50px);
}
#dice .right.inner {
  transform: rotateY(90deg) translateZ(49px);
}
#dice .left {
  transform: rotateY(-90deg) translateZ(50px);
}
#dice .left.inner {
  transform: rotateY(-90deg) translateZ(49px);
}
#dice .top {
  transform: rotateX(90deg) translateZ(50px);
}
#dice .top.inner {
  transform: rotateX(90deg) translateZ(49px);
}
#dice .bottom {
  transform: rotateX(-90deg) translateZ(50px);
}
#dice .bottom.inner {
  transform: rotateX(-90deg) translateZ(49px);
}
.dot {
  position:absolute;
  width:23px;
  height:23px;
  border-radius:11.5px;
  background:rgb(255, 255, 255);
  box-shadow:inset 5px 0 10px rgb(255, 255, 255);
}
.dot.center {
  margin:38.5px 0 0 38.5px;
}
.dot.dtop {
  margin-top:10px;
}
.dot.dleft {
  margin-left:67px;
}
.dot.dright {
  margin-left:10px;
}
.dot.dbottom {
  margin-top:67px;
}
.dot.center.dleft {
  margin:38.5px 0 0 10px;
}
.dot.center.dright {
  margin:38.5px 0 0 67px;
}

.teks5{
  padding:40px 60px;
  color:#754a30;
}

.teks5 h2{
  font-weight: 600;
}

.get{
  padding-left: 60px;
    padding-top: 40px;
}
.getteks h2{
  color:#754a30;
  margin-top:40px;
  margin-left: 50px;
    font-weight: normal;
}
.typebox{
  width:100%;
  padding: 150px 400px 0 400px
}
.type1{
  background:#d58900;
  width:100%;
  height:600px;
  border-radius: 60px;
  padding:0 10px;
}
.type2{
  background:#f2d847;
  width:100%;
  height:100%;
  border-radius: 60px;
  padding:10px 30px;
}
.type3{
  background:#ffefa1;
  width:100%;
  height:100%;
  border-radius: 60px;
  padding: 0 70px;
}
.star5{
    position: relative;
    top: 0;
    transform: translate(-50%, -70%);
    left: 50%;
}
.inputteks{
  position: relative;
    top: -150px;
}
.form-group {
  margin-bottom: 10px;
  background: #e6e6e6;
  border-radius: 10px;
  padding: 0 20px;
}
.form-control {
  display: block;
    width: 100%;
    padding: 0 20px;
    font-size: 1.5rem;
    line-height: 1.5;
    border: none;
    background-color: #e6e6e6;
    background-clip: padding-box;
    border-radius: 10px;
}
.form-group label {
  color:#754a30;
  font-weight:600;
  margin-bottom:0;
  font-size: 1.7rem;
}
.isi2 {
  width: 50%;
  background: transparent;
  border: 0;
  border: none;
  outline: none;
  color: black;
}
.form-control::placeholder{
  color:#754a30;
  font-weight:600;
  font-size:1.7rem;
  font-style:normal;
}
::placeholder {
  color: #c4c3c2;
  font-size:1.5rem;
  font-style: italic;
}

input{
  font-size:1.5rem;
}
.rumput{
  position: relative;
    left: 50%;
    transform: translate(-50%);
    width: 65%;
}

.send{
  padding: 2px 20px;
    float: right;
    border-radius: 50px;
    font-weight: 600;
    background: linear-gradient(to top, #c40851, #ff2968,#ff4e72, #ffa7bd);
    font-size: 25px;
}

.send:hover{
  border-color: black;
    color: #fff;
    box-shadow: inset 0 -3.25em 0 0 #e4cb58;
}
.map{
  width:100%;
  height:580px;
  padding: 0 200px;
}
.footer_menu{
  display:flex;
  margin-top:20px;
  margin-bottom: 240px;
}
.footer_menu a{
  margin: 0 auto;
    color: white;
    font-size: 26px;
    font-weight: 600;
}

.footer_menu a:hover{
  color:black;
  transition:.5s;
}
.kontak{
  text-align: right;
    padding: 0 100px;
    color: white;
}
.kontak h4{
  font-weight:normal;
}
.pelari{
  position:relative;
  animation: shoot4 8s infinite;
}
@keyframes shoot4 {
  0%{opacity:0;left:0%;}
  10% {opacity:1}
  99%{opacity:1}
  100% {left:90%;opacity:0;}
}
.h-menu{
  width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.areamenu{
    height: 100%;
    display: inline-block;
    text-align: center;
}
.areamenu li{
  list-style-type:none;
  margin:25px;
  font-size:30px;
  color:white;
  cursor:pointer;
}

.areamenu li a span{
  color:white;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}

.areamenu li a span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  left: -20px;
  transition: 0.5s;
}

.areamenu li:hover span {
  padding-left: 25px;
}

.areamenu li:hover span:after {
  opacity: 1;
  left: 0;
}


.areamenu2{
  display: inline-block;
}

.grounde{
  position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
}
@media (max-width: 1650px){
  .bg-game{
    width:100%;
  }
  .spincoin {
    left: 380px;
  }
  .spincoin2 {
    right: -1180px;
  }
  .naikm {
    position: absolute;
    bottom: -190px;
    width: 70%;
}
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, 
  .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, 
  .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 148px;
  }
  @keyframes pop {
    0% { }
    50% { transform: translate(0%, -100%) scale(1, 1); }
    55% { transform: translate(0%, -100%)  }
    60% { transform: translate(0%, -100%)  }
    65% { transform: translate(0%, -100%)  }
    70% { transform: translate(0%, -100%)  }
    100% { }
  }
  .gun {
    top: -170px;
  }
  .jumper1 img{
    width:160px;
  }
  .block1 img, .block2 img{
    width:90%;
  }
  .block2{
    text-align: end;
  }
  .dragon{
    width: 300px;
    height: 240px;
  }
  .pixel img {
    width: 180px;
  }
  .chrspc{
      width: 320px !important;
  }
  .p3 {
    width: 280px !important;
  }
  .next_arrow img, .prev_arrow img{
    width:80%;
  }
  .jumparea2 {
    top: 120px;
  }
  .inputteks {
    top: -90px;
  }
  .typebox {
    padding: 110px 400px 0 400px;
    margin-top: 50px;
  }
  .star5 {
    width: 40%;
  }
  .rumput {
    width: 55%;
  }
  .responsive .next_arrow {
    right: 35%;
  }
  .responsive .prev_arrow {
    left: 44%;
  }
  .map {
    height: 440px;
  }
  .footer_menu a {
    font-size: 20px;
  }
  .kontak h4 {
    font-size: 18px;
  }
}
@media (max-width: 1450px){
  .logo img{
    width: 150px;
  }
  .bg-area1, .modal-content2 {
    padding: 60px 80px 0px 80px;
  }
  .areamenu li {
    margin: 20px;
    font-size: 25px;
  }
  .ground {
    width: 40%;
  }
  .menubtn{
    width:50%;
  }
  .card{
    text-align:end;
  }
  .galaxi img{
    margin:0;
  }
  .spincoin2 {
    right: -1050px;
    top: -150px;
    width: 50px
  }
  .spincoin {
    top: -60px;
    left:300px;
    width: 50px
  }
  .bawah, .atas{
    width:70px;
  }
  .game .player{
    width:80px;
  }
  .game .enemy{
    width:80px;
  }
  .instruction h1{
    font-size:30px;
  }
  .instruction h2{
    font-size:25px;
  }
  .meet img {
    width: 35%;
    top: -60px
  }
  .naikm {
    bottom: -150px;
  }
  .bg-area2 p {
    font-size: 18px;
    line-height: 25px;
  }
  .bg-area2 h1 {
    font-size: 40px;
  }
  .bg-area2 h2 {
    font-size: 25px;
  }
  .pixel img {
    width: 150px;
    height: 250px;  
  }
  .p3 {
    width: 230px !important;
    height: 250px !important;
  }
  .responsive .prev_arrow, .responsive .next_arrow {
    bottom: -70px;
  }
  .karakter h3 {
    margin-top: 20px;
    font-size: 20px;
  }
  .gambar {
    margin-top: 40px;
  }
  .tim {
    top: -90px;
  }
  .wavearea{
    margin-top:50px;
    height: 190px;
  }
  .wave#wave1, .wave#wave2, .wave#wave3, .wave#wave4{
    height: 180px;
    background-size: 90% 180px;
  }
  .widget3 {
    top: -50px;
    width: 15%;
  }
  .widget2 {
    top: -50px;
    width: 15%;
  }
  .whtpic {
    width: 65%;
  }
  .bg-area3 p {
    font-size: 18px;
    line-height: 25px;
  }
  .block1 img, .block2 img {
    width: 70%;
  }
  .jumper1 img {
    width: 120px;
  }
  .people {
    height: 190px;
  }
  @keyframes pop {
    0% { }
    50% { transform: translate(0%, -65%) scale(1, 1); }
    55% { transform: translate(0%, -65%)  }
    60% { transform: translate(0%, -65%)  }
    65% { transform: translate(0%, -65%)  }
    70% { transform: translate(0%, -65%)  }
    100% { }
  }
  .gun img {
    height: 40px;
    width: 200px !important;
  }
  .gun {
    top: -65px;
    text-align:start;
  }
  .jumper2{
    display:block;
    text-align: end;
  }
  .dragon {
    width: 200px;
    height: 180px;
  }
  .gun2 img {
    height: 40px;
    width: 180px;
  }
  .work{
    width: 40%;
  }
  .piala {
    margin-top: 0px;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 128px;
  }
  .cardsz p {
    font-size: 30px;
  }
  .circle::before {
    font-size: 30px;
  }
  .modal-body img{
    width: 80% !important;
  }
  .modal-body h2 {
    color: black;
    font-size:20px;
  }
  .ourc{
    width:80%;
  }
  .teksc h4{
    font-size:18px;
  }
  .teksc h2{
    font-size:23px;
    float:left;
  }
  .teksc h2:hover{
    color:black;
  }
  .get {
    width: 50%;
  }
  .getteks h2{
    font-size:18px;
    width: 80%;
  }
  .typebox {
    padding: 110px 250px 0 250px;
    margin-top: 40px;
  }
  .inputteks {
    top: -110px;
  }
  .form-control {
      font-size: 18px;
  }
  .form-group label {
    font-size: 20px;
  }
  .form-control::placeholder{
    font-size:20px;
  }
  ::placeholder {
    font-size:18px;
  }
  
  input{
    font-size:18px;
  }
  .type1, .type2{
    height:auto;
  }
  .type3 {
    height: 500px;
  }
}
@media (max-width: 1366px){
  .game .enemy {
    width: 70px;
  }
  .game .player{
    width:70px;
    top:-20px;
  }
  .game .enemy-laser{
    margin-top:90px;
    height: 40px;
  }
  .ground.backbtn{
    width:30%;
  }
  .wavearea {
    margin-top: 50px;
    height: 150px;
  }
  .wave#wave1, .wave#wave2, .wave#wave3, .wave#wave4 {
    height: 145px;
    background-size: 90% 145px;
  }
  @keyframes pop {
    0% { }
    50% { transform: translate(0%, -80%) scale(1, 1); }
    55% { transform: translate(0%, -80%)  }
    60% { transform: translate(0%, -80%)  }
    65% { transform: translate(0%, -80%)  }
    70% { transform: translate(0%, -80%)  }
    100% { }
  }
  .gun {
    top: -80px;
    text-align:start;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
      height: 120px;
  }
  #dice {
    width: 50px;
    height: 50px;
  }
  .side {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }
  #dice .front  {
    transform: translateZ(25px);
  }
  #dice .front.inner  {
    transform: translateZ(24.5px);
  }
  #dice .back {
      transform: rotateX(-180deg) translateZ(25px);
  }
  #dice .back.inner {
      transform: rotateX(-180deg) translateZ(24.5px);
  }
  #dice .right {
      transform: rotateY(90deg) translateZ(25px);
  }
  #dice .right.inner {
      transform: rotateY(90deg) translateZ(24.5px);
  }
  #dice .left {
      transform: rotateY(-90deg) translateZ(25px);
  }
  #dice .left.inner {
      transform: rotateY(-90deg) translateZ(24.5px);
  }
  #dice .top {
      transform: rotateX(90deg) translateZ(25px);
  }
  #dice .top.inner {
      transform: rotateX(90deg) translateZ(24.5px);
  }
  #dice .bottom {
      transform: rotateX(-90deg) translateZ(25px);
  }
  #dice .bottom.inner {
      transform: rotateX(-90deg) translateZ(24.5px);
  }
  .dot {
    width:11.5px;
    height:11.5px;
    border-radius:5.75px;
  }
  .dot.center {
    margin:19.25px 0 0 19.25px;
  }
  .dot.dtop {
      margin-top:5px;
  }
  .dot.dleft {
      margin-left:33.5px;
  }
  .dot.dright {
      margin-left:5px;
  }
  .dot.dbottom {
      margin-top:33.5px;
  }
  .dot.center.dleft {
      margin:19.25px 0 0 5px;
  }
  .dot.center.dright {
      margin:19.25px 0 0 33.5px;
  }
  #wrapper {
    width: 100px;
  }
  .type3 {
    height: 460px;
  }
  .piala {
    margin-top: 20px;
    height: 60px;
  }
  .piala img {
    height: 60px;
  }
  .awancli{
    width: 80%;
  }
  .map {
    height: 350px;
  }
  .footer_menu {
    margin-bottom: 20px;
  }
  .teksc h4 {
    font-weight: normal;
  }
  .chrspc{
      width: 250px !important;
  }
}
@media (max-width: 1280px){
  .areamenu li {
    margin: 15px;
  }
  .instruction {
    top: 120px;
  }
  .game .enemy{
    margin-top:40px;
  }
  .game .player{
    top:-50px;
  }
  .game .enemy-laser{
    margin-top:0px;
  }
  .next_arrow img, .prev_arrow img {
    width: 60%;
  }
  .responsive .next_arrow {
    right: 33%;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 114px;
  }
  .type3 {
    height: 440px;
  }
  .map {
    padding: 0 150px;
  }
  .pixel img {
    width: 130px;
    height: 200px;
  }
  .chrspc{
      width: 220px !important;
      height: 100%;
  }
  .p3 {
    width: 200px !important;
    height: 200px !important;
  }
  .darah img{
    width: 50%;
  }
  .meet img {
    top: -40px;
  }
  .gambar {
    margin-top: 30px;
  }
  .tim {
    top: -50px;
  }
  .naikm {
    width: 60%;
  }
  .wavearea {
    margin-top: 70px;
    height: 130px;
  }
  .wave#wave1, .wave#wave2, .wave#wave3, .wave#wave4 {
    height: 125px;
    background-size: 90% 125px;
  }
  .pelari{
    width:3%;
  }
  @keyframes shoot4 {
    0%{opacity:0;left:0%;}
    10% {opacity:1}
    99%{opacity:1}
    100% {left:83%;opacity:0;}
  }
  .spincoin2 {
    right: -930px;
    top: -130px;
  }
  .block1 img, .block2 img {
    width: 60%;
  }
  .jumper1 img {
    width: 110px;
  }
  .people {
    height: 160px;
  }
  .dragon {
    width: 170px;
    height: 150px;
  }
  @keyframes pop {
    0% { }
    50% { transform: translate(0%, -120%) scale(1, 1); }
    55% { transform: translate(0%, -120%)  }
    60% { transform: translate(0%, -120%)  }
    65% { transform: translate(0%, -120%)  }
    70% { transform: translate(0%, -120%)  }
    100% { }
  }
  .gun {
    top: -150px;
    text-align:start;
  }
  .waveareas {
    height: 210px;
  }
  .waves#waves1{
    height: 50px;
    background-size: 70% 50px;
  }
  .waves#waves2{
    height: 100px;
    background-size: 70% 100px;
  }
  .waves#waves3{
    height: 200px;
    background-size: 70% 200px;
  }
  .typebox {
    margin-top: 0px;
    padding: 110px 150px 0 150px;
  }
}
@media (max-width: 1150px){
  .spincoin {
    top: -40px;
    left: 240px;
  }
  .spincoin2 {
    right: -850px;
    top: -120px;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 95px;
  }
  .circle {
    border: 3px solid black;
  }
  .cardsz p {
    font-size: 20px;
  }
  .circle::before {
    font-size: 20px;
  }
  .areamenu li a span{
    font-size: 20px;;
  }
  .areamenu li {
    margin: 5px;
  }
}
@media (max-width: 1080px){
  .instruction h1 {
    font-size: 25px;
  }
  .instruction h2 {
    font-size: 20px;
  }
  .spincoin2 {
    right: -810px;
  }
  .spincoin {
    left: 200px;
  }
  .meet img {
    top: 0;
  }
  .meet{
    padding: 0 75px;
    margin-bottom: 20px;
  }
  .wavearea {
    margin-top: 140px;
  }
  .pixel img {
    width: 120px;
    height: 170px;
  }
  .chrspc{
      width: 190px !important;
  }
  .p3 {
    width: 170px !important;
    height: 170px !important;
  }
  .karakter h3 {
    margin-top: 20px;
    font-size: 18px;
    line-height: 20px;
  }
  .naikm {
    bottom: -220px;
  }
  .tim {
    top: 0px;
  }
  .responsive .next_arrow {
    right: 30%;
  }
  .responsive .prev_arrow, .responsive .next_arrow {
    bottom: -60px;
  }
  .block1{
    text-align: start;
  }
  .jumper1{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  @keyframes shoot {
    0% {opacity:0;left:29%}
    50%{opacity:1;left:30%;}
    100%{left:300%;}
  }
  @keyframes pop {
    0% { }
    50% { transform: translate(0%, -110%) scale(1, 1); }
    55% { transform: translate(0%, -110%)  }
    60% { transform: translate(0%, -110%)  }
    65% { transform: translate(0%, -110%)  }
    70% { transform: translate(0%, -110%)  }
    100% { }
  }
  .gun {
    top: -130px;
    text-align:start;
  }
  .map {
    padding: 0 60px;
  }
  .kontak {
    text-align: right;
    padding: 0 50px;
    color: white;
  }
  .footer_menu {
    margin-bottom: 50px;
  }
  .areamenu li {
    margin: 15px;
  }
  .footer_menu a {
    font-size: 15px;
  }
}
@media (max-width: 1024px){
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 85px;
  }
  @keyframes pop {
    0% { }
    50% { transform: translate(0%, -130%) scale(1, 1); }
    55% { transform: translate(0%, -130%)  }
    60% { transform: translate(0%, -130%)  }
    65% { transform: translate(0%, -130%)  }
    70% { transform: translate(0%, -130%)  }
    100% { }
  }
  .gun {
    top: -150px;
    text-align:start;
  }
  .areamenu li {
    margin: 10px;
  }
  .wrap{
    display:none;
  }
  .return{
    display: block;
  }
  .r1{
    text-align:center;
  }
  .r1 img {
    width:70px;
    margin: 30px 40px;
    position: relative;
    animation:musuhanimation 5s infinite;
  }
  @keyframes musuhanimation{
    0%   {left:0px; top:0px;}
    25%  {left:20px; top:0px;}
    50%  {left:20px; top:10px;}
    75%  {left:0px; top:10px;}
    100% {left:0px; top:0px;}
  }
  .r2{
    height:100px;
    position: relative;
    bottom: -80px;
    padding: 0 120px 0 120px;
  }
  @keyframes sampinganimation{
    0%{left:0%;}
    50%{left:100%;}
    100% {left:0%}
  }
  .r2 img{
    width:70px;
    position:relative;
    animation:sampinganimation 7s infinite;
  }
  .meet img {
    width: 25%;
  }
  .bg-area2 p {
    font-size: 15px;
    line-height: 22px;
  }
  .naikm {
    bottom: -150px;
  }
  .wavearea {
    margin-top: 100px;
  }
  .bg-area3 p {
    font-size: 15px;
    line-height: 22px;
  }
  .ourc {
    width: 70%;
  }
  .teksc h2 {
    font-size: 20px;
  }
  .teksc h4 {
    font-size: 15px;
  }
  .get {
    width: 40%;
  }
  .getteks h2 {
    font-size: 15px;
    width: 80%;
    margin-top: 20px;
  }
  .form-control {
    font-size: 15px;
  }
  .form-group label {
    font-size: 15px;
  }
  .form-control::placeholder{
    font-size:15px;
  }
  ::placeholder {
    font-size:15px;
  }
  .isi2{
    font-size:15px;
  }
  .type3 {
    height: 350px;
  }
  .send {
    font-size: 15px;
  }
  .kontak h4 {
    font-size: 15px;
  }
  .block1 img, .block2 img {
    width: 40%;
  }
  .jumper1 img {
    width: 80px;
  }
  .people {
    height: 120px;
  }
  .dragon {
    width: 120px;
    height: 120px;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 80px;
  }
  /* .drop {
    background: url(../img/laser-red-14.png) no-repeat bottom;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    width:1px;
    height:89px;
    position: absolute;
    bottom:200px;
    -webkit-animation: fall .63s linear infinite;
    -moz-animation: fall .63s linear infinite;
    
  }
  @-webkit-keyframes fall {
    to {margin-top:900px;}
  }
  @-moz-keyframes fall {
    to {margin-top:900px;}
  } */
  
}
@media (max-width: 992px){
  .return{
    position:relative;
    top: -100px;
  }
  .r1 img {
    width: 70px;
    margin: 30px 20px;
  }
  .arah {
    position: relative;
    bottom: 200px;
    right: 0;
    float: right;
  }
  .spincoin {
    top: -350px;
    left: 180px;
  }
  .spincoin2 {
    right: -690px;
    top: -400px;
  }
  .bg-area1, .area1{
    height:100%;
  }
  .naikm {
    bottom: -100px;
  }
  .wavearea {
    margin-top: 30px;
  }
  .ground {
    width: 100%;
  }
}
@media (max-width: 780px){
  #myBtn{
    right:60px;
  }
  .r1 img {
    width: 50px;
    margin: 10px 15px;
  }
  .r2 {
    padding: 0 10px 0 10px;
    bottom: -120px;
  }
  .r2 img {
    width: 50px;
  }
  .spincoin {
    top: -240px;
    left: 150px;
    width: 30px;
  }
  .spincoin2 {
    right: -500px;
    top: -280px;
    width: 30px;
  }
  .arah {
    bottom: 100px;
  }
  .bawah, .atas {
    width: 50px;
  }
  .bg-area2 p {
    padding-left: 10px;
  }
  .wave#wave1, .wave#wave2, .wave#wave3, .wave#wave4 {
    height: 105px;
    background-size: 90% 105px;
  }
  .bg-area2 h1 {
    font-size: 25px;
  }
  .bg-area2 h2 {
    font-size: 20px;
  }
  .pixel img {
    width: 80px;
    height: 130px;
  }
  .chrspc{
      width: 140px !important;
  }
  .p3 {
    width: 130px !important;
    height: 130px !important;
  }
  .karakter h3 {
    font-size: 15px;
  }
  .next_arrow img, .prev_arrow img {
    width: 50%;
  }
  .responsive .next_arrow {
    right: 20%;
  }
  .responsive .prev_arrow {
    left: 39%;
  }
  .naikm {
    bottom: -160px;
  }
  .wavearea {
    margin-top: 80px;
  }
  .jumparea2 {
    top: 150px;
  }
  .bg-area3 p {
    padding-left: 10px;
  }
  .whtpic {
    padding-left: 10px;
  }
  .gun img {
    height: 20px;
    width: 130px !important;
  }
  .gun2 img {
    height: 20px;
    width: 110px;
  }
  @keyframes shoot2 {
    0% { opacity:1;right:25%;}
    60%{opacity:0;}
    100%{opacity:0;right:200%;}
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 115px;
  }
  .inputteks {
    top: -40px;
  }
  .widget3, .widget2 {
    top: -30px;
  }
  .typebox {
    margin-top: 0px;
    padding: 70px 150px 0 150px;
  }
  .gun {
    top: -130px;
  }
  .bg-area7 {
    background: url(../img/bg6.png) no-repeat right;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100%;
  }
  .bg-area7 .col-md-7 img{
    width:80%;
  }
}
@media (max-width: 768px){
  .return{
    padding: 0 40px;
  }
  .areamenu li a span {
    font-size: 25px;
  }
  .areamenu li {
    margin: 50px;
  }
}
@media (max-width: 767px){
  #myBtn{
    right:15px;
  }
  .areamenu li a span , .areamenu li{
    font-size: 15px;
  }
  .areamenu li {
    margin: 10px;
  }
  .ground {
    width: 50%;
  }
  .backbtn{
    width: 10%;
    margin-bottom: 10px !important; 
  }
  .r2 {
    bottom: -100px;
  }
  .wavearea {
    margin-top: 240px;
  }
  .naikm {
    bottom: -680px;
    width: 50%;
  }
  .menubtn {
    width: 30%;
  }
  .logo img {
    width: 100px;
  }
  .arah {
    bottom: 150px;
  }
  .meet {
    padding: 0 25px;
  }
  .meet img {
    width: 35%;
  }
  .bg-area1, .modal-content2{
    padding: 60px 30px 0px 30px;
  }
  .responsive .next_arrow {
    right: 34%;
  }
  .responsive .prev_arrow {
    left: 44%;
  }
  .spincoin2 {
    right: -580px;
  }
  .karakter h3 {
    font-size: 20px;
  }
  .whtpic {
    width: 35%;
  }
  .jumparea1{
    position:relative;
    bottom: -180px;
  }
  .jumparea2{
    position:relative;
    top: -170px;
  }
  .block1 img, .block2 img {
    width: 30%;
  }
  .bg-area3 {
    background: url(../img/bg3.png) no-repeat left;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -ms-background-size: cover;
    height: 100%;
  }
  @keyframes shoot {
    0% {opacity:0;left:9%}
    50%{opacity:1;left:10%;}
    100%{left:300%;}
  }
  .gun {
    top: -100px;
  }
  @keyframes shoot2 {
    0% { opacity:1;right:15%;}
    60%{opacity:0;}
    100%{opacity:0;right:200%;}
  }
  .work {
    width: 55%;
  }
  .modal-body {
    padding: 0 1rem;
  }
  .modal-body img {
    width: 50% !important;
  }
  .ourc {
    width: 50%;
  }
  .awancli {
    width: 40%;
  }
  .typebox {
    padding: 70px 100px 0 100px;
  }
  .type3 {
    height: 400px;
    padding: 0 20px;
  }
  .inputteks {
    top: -60px;
  }
  .get {
    width: 50%;
  }
  .bg-area7 .col-md-7 img {
    width: 66%;
  }
  .bg-area7{
    height:auto;
  }
  .kontak{
    text-align:left;
  }
}
@media (max-width: 736px){
  .bg-area1, .modal-content2 {
    padding: 30px 30px 0px 30px;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 105px;
  }
  @keyframes shoot4 {
    0%{opacity:0;left:0%;}
    10% {opacity:1}
    99%{opacity:1}
    100% {left:63%;opacity:0;}
  }
}
@media (max-width: 667px){
  .naikm {
    bottom: -620px;
  }
  @keyframes shoot {
    0% {opacity:0;left:14%}
    50%{opacity:1;left:15%;}
    100%{left:300%;}
  }
  .wavearea {
    margin-top: 190px;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 95px;
  }
  .type3 {
    height: 370px;
  }
  .pelari {
    width: 5%;
  }
}
@media (max-width: 640px){
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 110px;
  }
  .bg-area4 {
    padding: 50px 50px;
  }
  .responsive .next_arrow {
    right: 32%;
  }
  .awancli {
    display: none;
  }
  .widget3 , .widget2 {
    width: 20%;
  }
  .spincoin2 {
    right: -460px;
  }
  .typebox {
    margin-top: 30px;
    padding: 70px 50px 0 50px;
  }
}
@media (max-width: 600px){
  .r1 {
    margin-top: 30px;
  }
  .r1 img, .r2 img {
    width: 40px;
  }
  .r2 {
    bottom: -50px;
  }
  .spincoin2, .spincoin {
    width: 15px;
  }
  .areamenu li {
    margin: 2px;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 100px;
  }
  .bg-area2 p, .bg-area3 p, .teksc h4{
    font-size: 12px;
    line-height: 19px;
  }
  .teksc h2, .bg-area2 h2, .karakter h3 {
    font-size: 15px;
  }
  .bg-area2 h1 {
    font-size: 18px;
  }
  .map {
    height: 200px;
  }
  .map iframe{
    border-radius: 20px !important;
  }
  .wave#wave1, .wave#wave2, .wave#wave3, .wave#wave4 {
    height: 75px;
    background-size: 90% 75px;
  }
  .getteks h2 {
    font-size: 12px;
  }
  .form-control {
    font-size: 12px;
  }
  .form-group label {
    font-size: 12px;
  }
  .form-control::placeholder{
    font-size:12px;
  }
  ::placeholder {
    font-size:12px;
  }
  .isi2{
    font-size:12px;
  }
  .modal-dialog2{
    margin:0 !important;
  }
}
@media (max-width: 568px){
  .arah {
    bottom: 100px;
  }
  .r2 {
    height:auto;
  }
  .ground {
    width: 100%;
  }
  .backbtn {
    width: 30%;
  }
  .areamenu li a span, .areamenu li {
    font-size: 20px;
  }
  .areamenu li {
    margin: 30px;
  }
  .naikm {
    bottom: -560px;
  }
  .wavearea {
    margin-top: 160px;
  }
  .jumparea1 {
    bottom: -140px;
  }
  @keyframes pop {
    0% { }
    50% { transform: translate(0%, -95%) scale(1, 1); }
    55% { transform: translate(0%, -95%)  }
    60% { transform: translate(0%, -95%)  }
    65% { transform: translate(0%, -95%)  }
    70% { transform: translate(0%, -95%)  }
    100% { }
  }
  .gun {
    top: -70px;
  }
  .darah img {
    width: 30%;
  }
}
@media (max-width: 479px){
  .return {
    padding: 0 ;
  }
  .galaxi img {
    margin: 0;
    margin-top: 30px;
  }
  .spincoin {
    top: -220px;
    left: 90px;
  }
  .spincoin2 {
    right: -350px;
    top: -250px;
  }
  .r1 img {
    width: 50px;
    margin: 10px 15px;
  }
  .r1 img, .r2 img{
    width:30px;
  }
  .darah img {
    width: 15%;
  }
  .responsive .next_arrow {
    right: 25%;
  }
  .responsive .prev_arrow {
    left: 41%;
  }
  .naikm {
    bottom: -520px;
  }
  .wavearea {
    margin-top: 130px;
  }
  .wave#wave1, .wave#wave2, .wave#wave3, .wave#wave4 {
    height: 65px;
    background-size: 90% 65px;
  }
  .typebox {
    margin-top: 0px;
  }
  .inputteks {
    top: -20px;
  }
  @keyframes shoot2 {
    0% { opacity:1;right:22%;}
    60%{opacity:0;}
    100%{opacity:0;right:200%;}
  }
  @keyframes shoot4 {
    0%{opacity:0;left:0%;}
    10% {opacity:1}
    99%{opacity:1}
    100% {left:58%;opacity:0;}
  }
  .jumparea2 {
    position: relative;
    top: -150px;
  }
  .jumparea1 {
    bottom: -160px;
  }
  .roleplay, .roleplay.active {
    margin-top: 80px;
  }
  .circle {
    border: none;
    margin-left: 15px;
    align-items: start;
    justify-content: start;
  }
  .widget3, .widget2 {
    top: -15px;
  }
  @keyframes shoot3 {
    0% { left:0%;}
    50%{left:60%;}
    100% {left:0%;}
  }
}
@media (max-width: 414px){
  #myBtn{
    right:0px;
  }
  .responsive .next_arrow {
    right: 23%;
  }
  .r1 {
    margin-top: 50px;
  }
  .spincoin2 {
    right: -290px;
    top: -260px;
  }
  .spincoin {
    top: -220px;
    left: 70px;
  }
  .cardz1, .cardz2, .cardz3, .cardz4, .cardz5, .cardz6, .cardz7, .cardz8, .cardz9, .cardz10, .cardz11, .cardz12, .cardz13, .cardz14, .cardz15, .cardz16, .cardz17, .cardz18, .cardz19, .cardz20, .cardz21, .cardz22, .cardz23, .cardz24, .cardz25, .cardz26, .cardz27, .cardz28, .cardz29, .cardz30 {
    height: 70px;
  }
  .getteks h2 {
    width: auto;
    margin: 20px 50px 0 50px;
  }
  .get {
    padding-left: 50px;
    width: 60%;
  }
  .modal-dialog{
    margin-top:50px;
  }
  .typebox {
    padding: 70px 10px 0 10px;
  }
}
@media (max-width: 384px){
  .card.float-right{
    float:none !important;
    display: flex;
  }
  .bawah, .atas {
    width: 40px;
    margin: 0 5px;
  }
  .r1 {
    margin-top: 60px;
  }
  .meet img {
    width: 50%;
    margin-top: 20px;
  }
  .responsive .next_arrow {
    right: 21%;
  }
  .naikm {
    bottom: -530px;
    width: 64%;
  }
  .whtpic {
    width: 50%;
  }
  .people {
    height: 100px;
  }
  .jumper1 img {
    width: 60px;
  }
  .dragon {
    width: 90px;
    height: 90px;
  }
  .jumparea1 {
    bottom: -110px;
  }
  @keyframes shoot {
    0% {opacity:0;left:18%}
    50%{opacity:1;left:19%;}
    100%{left:300%;}
  }
  .work {
    width: 70%;
  }
  .piala, .piala img {
    height: 50px;
  }
  @keyframes shoot3 {
    0% { left:0%;}
    50%{left:40%;}
    100% {left:0%;}
  }
  .ourc {
    width: 70%;
  }
  .bg-area4 {
    padding: 50px 25px;
  }
  .teks5 {
    padding: 40px 25px;
  }
  .bg-area5 img {
    padding-left: 25px;
  }
  .get {
    padding-left: 25px;
    width: 75%;
  }
  .getteks h2 {
    width: auto;
    margin: 20px 25px 0 25px;
  }
  .kontak {
    padding: 0 25px;
  }
  @keyframes shoot4 {
    0%{opacity:0;left:0%;}
    10% {opacity:1}
    99%{opacity:1}
    100% {left:45%;opacity:0;}
  }
  .bg-area7 .col-md-7 img {
    width: 90%;
  }
  .waveareas {
    height: 185px;
  }
  .waves#waves3 {
    height: 180px;
    background-size: 70% 180px;
  }
}
@media (max-width: 375px){
  .menubtn {
    width: 38%;
  }
  .r1 img {
    margin: 10px 8px;
  }
  .spincoin2 {
    right: -260px;
  }
  .spincoin {
    top: -240px;
    left: 60px;
  }
  @keyframes sampinganimation{
    0%{left:0%;}
    50%{left:80%;}
    100% {left:0%}
  }
  .type3 {
    padding: 0 5px;
  }
  .kontak{
    margin-bottom: 50px;
  }
  .pelari {
    width: 7%;
  }
  @keyframes shoot4 {
    0%{opacity:0;left:0%;}
    10% {opacity:1}
    99%{opacity:1}
    100% {left:40%;opacity:0;}
  }
  .type2 {
    padding: 10px 10px;
  }
}
@media (max-width: 320px){
  .spincoin2 {
    right: -230px;
  }
  @keyframes shoot4 {
    0%{opacity:0;left:0%;}
    10% {opacity:1}
    99%{opacity:1}
    100% {left:30%;opacity:0;}
  }
  .responsive .next_arrow {
    right: 16%;
  }
  .responsive .prev_arrow {
    left: 40%;
  }
  .map {
    padding: 0 20px;
    margin-bottom: 50px;
  }
  .footer_menu {
    margin-bottom: 10px;
  }
}