body {
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.container{
    overflow-x: hidden;
    width: 100%;
    max-width: 414px;
    position: relative;
    margin: 0 auto;
    height:680px;
    background:#292929;
}
#container{
    overflow-x: hidden;
    position: relative;
    height:550px;
    width: 100%;
    left: 0px;
    background-color: #292929;
}
.frameUno{
    position: absolute;
    width: 320px;
    height: 480px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-image: url(../img/bg.jpg);
    z-index: 1;
    background-size: 100%;
    background-repeat: no-repeat;
}
.text_1{
    position: absolute;
    width: 218px;
    height: 160px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-image: url(../img/text_1.png);
    z-index: 1;
    top: 30px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.carUno{
    position: absolute;
    width: 137px;
    height: 147px;
    margin: 0 auto;
    left: -170px;
    right: 0;
    background-image: url(../img/car_premium.png);
    z-index: 1;
    top: 170px;
    animation: scale 1000ms ease-in-out forwards;
    background-repeat: no-repeat;
    background-size: contain;
}
@keyframes scale {
    0% {
      transform: scale(0);
    }
    50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
  }



  .carDos{
    position: absolute;
    
    margin: 0 auto;
    left: 150px;
    right: 0;
    background-image: url(../img/car_monster.png);
    z-index: 1;
    top: 200px;
    animation: scaleDos 2000ms ease-in-out forwards;
    width: 137px;
    height: 147px;
    background-repeat: no-repeat;
    background-size: contain;
}
@keyframes scaleDos {
    0% {
      transform: scale(0);
    }
    50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
  }



  .carTres{
    position: absolute;
   
    margin: 0 auto;
    left: -80px;
    right: 0;
    background-image: url(../img/car_collect.png);
    z-index: 1;
    top: 320px;
    animation: scaleTres 3000ms ease-in-out forwards;
    width: 137px;
    height: 147px;
    background-repeat: no-repeat;
    background-size: contain;
}
@keyframes scaleTres {
    0% {
      transform: scale(0);
    }
    50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
  }


  .clickGame{
    width: 320px;
    height: 480px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 8;
    top: 0;
  }

  .frameFianl{
    position: absolute;
    max-width: 414px;
    width: 100%;
    height: 826px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-image: url("../img/bg_final.jpg");
    z-index: 1;
}

.text_2{
    position: absolute;
    width: 100%;
    height: 240px;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-image: url(../img/text_2.png);
    z-index: 1;
    top: 40px;
    background-repeat: no-repeat;
    background-size: contain;
}

.juguete{
    position: absolute;
    width: 223px;
    height: 263px;
    margin: 0 auto;
    left: 0px;
    right: 0;
    background-image: url(../img/juguete_city.png);
    z-index: 1;
    top: 270px;
    animation: juguete_city 300ms ease-in-out forwards;
    z-index: 2;
    background-size: 100%;
    background-repeat: no-repeat;
}
@keyframes juguete_city {
    0% {
      transform: scale(0);
    }
    50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
  }



.line{
    position: absolute;
    height: 150px;
    width: 4%;
    margin-left: 48%;
    background-color: rgba(255,255,255,0.5);
}
#line_1{
    top: -150px;
}
#line_2{
    top: 150px;
}
#line_3{
    top: 450px;
}
.car{
    position: absolute;
    height: 56px;
    width: 26px;

}
#car{
    bottom: 8%;
    left: 60%;
    background-image: url("../img/car01.png");
    /*background-color: #ffdf5a;*/
}
.f_glass{
    position: absolute;
    height: 20%;
    width: 60%;
    margin-left: 20%;
    top: 15%;
    border-radius: 0px 0px 5px 5px;
    background-color: #484848;
}
.b_glass{
    position: absolute;
    height: 20%;
    width: 60%;
    margin-left: 20%;
    bottom: 15%;
    border-radius: 5px 5px 0px 0px;
    background-color: #484848;
}
.f_light_l{
    position: absolute;
    height: 10%;
    width: 20%;
    margin-left: 10%;
    top: -6%;
    border-radius: 5px 5px 0px 0px;
    background-color: #efefef;
}
.f_light_r{
    position: absolute;
    height: 10%;
    width: 20%;
    margin-left: 70%;
    top: -6%;
    border-radius: 5px 5px 0px 0px;
    background-color: #efefef;
}
.f_tyre_l{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: grey;
    top: 20%;
    left: -10%;
    border-radius: 5px 0px 0px 5px;
}
.f_tyre_r{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: grey;
    top: 20%;
    left: 100%;
    border-radius: 0px 5px 5px 0px;
}
.b_tyre_l{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: grey;
    top: 70%;
    left: -10%;
    border-radius: 5px 0px 0px 5px;
}
.b_tyre_r{
    position: absolute;
    height: 20%;
    width: 10%;
    background-color: grey;
    top: 70%;
    left: 100%;
    border-radius: 0px 5px 5px 0px;
}
#car_1{
    top: -100px;
    left: 60%;
    background-image: url("../img/car02.png");
}
#car_2{
    top: -200px;
    left: 40%;
    background-image: url("../img/car02.png");
}
#car_3{
    top: -350px;
    left: 50%;
    background-image: url("../img/car03.png");
}
#restart_div {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
    z-index: 9;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#restart {
    position: absolute;
    width: 210px;
    height: 131px;
    margin: 0 auto;
    left: -100px;
    right: 0;
    background-image: url(../img/volver_jugar.png);
    z-index: 1;
    top: 540px;
    z-index: 999;
    background-size: 70%;
    background-repeat: no-repeat;
}
#comprar {
    position: absolute;
    width: 210px;
    height: 131px;
    margin: 0 auto;
    left: 190px;
    right: 0;
    background-image: url(../img/comprar_ahora.png);
    z-index: 1;
    top: 540px;
    z-index: 2;
    background-size: 70%;
    background-repeat: no-repeat;
}
.linkLanding{
    position: absolute;
    width: 100%;
    height: 730px;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
}
.small_text{
    font-size: 15px;
}
#score_div{
    position: absolute;
    margin-top: 20%;
    margin-left: 10%;
    font-size: 35px;
    background-color: white;
    color: #454545;
    padding: 10px;
    box-shadow: 4px 4px 0px 1px #808080;
}
#help{
	text-align: center;
}
.control{
  width: 219px;
  height: 120px;
  /* background: red; */
  position: relative;
  z-index: 9;
  margin: 0 auto;
}
.left{
    width: 58px;
    height: 65px;
  border-radius: 50%;
  position: absolute;
  left: 11px;
  top: 37px;
  background-image: url('../img/btnGame.png');
  background-position: 4px;
  background-size: 39px;
  background-repeat: no-repeat;
}
.rigth{
  width: 58px;
  height: 65px;
  border-radius: 50%;
  position: absolute;
  right: 11px;
  top: 37px;
  background-image: url('../img/btnGame.png');
  background-position: 8px;
  background-size: 39px;
  background-repeat: no-repeat;
}