html, body {
  height: 100%;
}
.navbar-default {margin: 0; }
#wrap {
  min-height: 100%;
  height: 100%;
  margin: 0 auto -301px;
  padding: 0 0 301px;
}

#footer {
  height: 301px;
  background:url("../images/pie.png") center center;
}

body {
    background: url("../images/fondo.jpg");
}
#main-container {
    min-height: 100%;
}

.absoluto
{
  position: absolute;
}
.oculto
{
  display: none;
}
.centrado
{
  margin-left:auto; 
  margin-right:auto; 
  left:0; 
  right:0;
}
#fondoNegro,.fondoNegro
{
  background: #000;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99998;
}
#fondoBlanco
{
  background: #FFF;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99997;
}
#cerrarBlanco
{
  width: 5%;
  height: 10%;
  position: fixed;
  z-index: 999999;
  top:5%;
  left: 95%;
}


.transparente
{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
.transparente2
{
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity:0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}
.agregado,
.agregado2
{
  /*-webkit-filter: blur(5px);
  filter: blur(5px);*/
  -webkit-filter: opacity(30%); /* Safari */
    filter: opacity(30%);
}
.borde
{
  border: #000 solid;
}
#juguetesContenedor
{
  position: fixed;
  z-index: 999999;
  padding: 5% 0%;
  width: 80%;
  

}


/*Pagina1*/
#bonett-benny
{
  top: 20%;
  left: 50%;
}
#buzon
{
  top: 20%;
  left: 65%;
}

.bonett
{
 top: 0;
  left: 0; 
}
#arbolito
{
  top: 3%;
  left: 26%;
}
#lampara
{
  top: 3%;
  left: 20%;
}

#estrella_entrar
{
  top: 0px;
  left: 77%;
}
#estrella_login
{
  top: 73%;
  left: 62%;
}
#entrarHome
{
  top: 0%;
  left: 74%;
  width: 200px;
  height: 200px;
  z-index: 1;
}

/*Pagina2*/
#texto1
{
  
  top:10%; 
}
#circulo
{
  top: 18%;
  
}
#circulo-fondo
{
  top: 20%;
  width: 24%;
  height: 52%;
  border-radius: 50%;
}

#circulo-fondoCarta
{
  top: 5%;
  left: -58%;
  width: 10%;
  height: 20%;
  border-radius: 50%;
  z-index: 1;
}


#soy_nina
{
  top: 80%;
  left: 20%;
}
#soy_nino
{
  top: 80%;
  left: 65%;
}
#ImagenAgregada img
{
  width: 156px;
  height: 156px;
  border-radius: 50%;
}

#check-1
{
  top: 65%;
  left: 67%;

}

#check-2
{
  top: 65%;
  left: 23%;
}
#estrella_seguir-0
{
  top: 60%;
}

/* Pagina 3 */
#texto2
{
  top: 5%;
}
#benny
{
  top: 38%;
  left: 15%;  
}
#bonett
{
  top: 35%;
  left: 60%;
}
#texto_benny
{
  top: 29%;
  left: 24%;  
}
#texto_bonett
{
  top: 29%;
  left: 69%;
}

/*pagina4*/
#como_te_llamas
{
  top: 52%;
}

#bonettPantalla3
{
  top: 30%;
  left: 64%;
}
#estrella_seguir
{
  top: 65%;
  left: 49%;
  z-index: 1;
}
#mail_papas
{
  top: 5%;
  left: 10%;
  
}
#bennyPantalla3
{
  top: 40%;
  left: 70%;
}

#mail_papas_benny
{
  top: 5%;
  left: 10%;
}

#nombre
{
  top: 60%;
  left: 10%;
}
#emailPapa
{
  top: 33%;
  left: 10%;
}

input#nombre,
input#emailPapa 
{
  width:  35%!important;
  height: 15%!important;
  background: url("../images/pagina4/linea.png");
  border: none!important;
  font-size: 25px!important;
  font-family: 'Comfortaa';
  font-weight: bolder!important;
  
}
#nube1,#nube2,#nube3 
{
  z-index: 99999;
  top: 15%;
}


/*pagina5*/
#sobre
{
  top: 5%;
  left: 35%;
  width: 35%;
}
#benny2
{
  top: 30%;
  left: 12%;
}
#bonett2
{
  top: 23%;
  left: 12%;
}
#para_quien_es
{
  top: 25%;
  left: 40.5%;
  width: 25%;
}
#santaclaus
{
  top: 659px;
  left: 103px;
}
#nino_dios
{
  top: 668px;
  left: 748px;
}
#estrella_seguir2
{
  top: 0px;
  left: 860px;
}
#Jesus,
#Jesus-1
{
  top: 68%;
  left: 43%;
  width: 16%;
}
#Santa,
#Santa-1
{
  top: 75%;
  left: 35%;
  width: 10%;
}
#Reyes,
#Reyes-1
{
  top: 68%;
  left: 57%;
  width: 22%;
}
#droppCont
{
  top: 27%;
  left: 35%;
  width: 35%;
  height: 44%;
  
  
}

#flecha1
{
  top: 51%;
  left: 36%;
}
#flecha2
{
  top: 51%;
  left: 62%;
}
#flecha3
{
  top: 49%;
  left: 37%;
}
#flecha4
{
  top: 44%;
  left: 63%;
}


/*pagina6*/
#bonett-6
{
  top: 70%;
  left: 15%;
  z-index: 1;
}
#benny-6
{
  top: 70%;
  left: 15%;
  z-index: 1;
}
#imprimir
{
  top: 77%;
  left: 80%;
  z-index: 1;
}
#imprimirRespuesta
{
  top: 57%;
  left: 80%;
  z-index: 1;
}
#eliminar
{
  background:url("../images/eliminar.png") no-repeat;
  top: 70%;
  left: 72%;
  z-index: 1;
  width: 76px;
  height: 139px;
}
#eliminar.ui-droppable-active
{
  background:url("../images/eliminarCerrado.png")!important;
}

#eliminarCerrado
{
}

#cuaderno,#paraCopia
{
  top: 10%;
  left: 20%;
  width: 60%;
}
#paraCopia
{
  z-index: -1;
  width: 60.3%;
  height: 90%;
  
}
#paraCopia8
{
  top: 0px;
  left: 0px;
}
#paraCopia8
{
  z-index: 99;
  width: 670px;
  height: 0;

}

#juguete_btn
{
  top: 10%;
  left: 80.5%;
}
#emoji_btn
{
  top: 25%;
  left: 80.5%;
}
#whats_btn
{
  top: 40%;
  left: 80.5%;
}

#amix_btn
{
  top: 40%;
  left: 80.5%;
}
#estrella_enviar-6
{
  top: 55%;
  left: 78%;
  width: 10%;
}

#nube2-6
{
  top: 602px;
  left: 160px;
}
#nube3-6
{
  top: 488px;
  left: 205px;
}

#texto-6
{
  top: 539px;
  left: 244px;
}

#juguetes
{
  top: 5%;
  left: 10%;
  width: 30%;
  height: 20%;
  /*overflow: auto;*/
  text-align: center;
  padding-top: 10%;
}
#juguetes img
{
  position: initial;
}
#imagenDetalle
{
  width: 100%;
}
.jugueteAgregado
{
  top:35%;
  left: 45%;
}
.FondoRojo
{
  background: #F00;
  -webkit-transition: margin 0.5s ease-out;
  -moz-transition: margin 0.5s ease-out;
  -ms-transition: margin 0.5s ease-out;
  transition: margin 0.5s ease-out;

}
.sinScroll
{
  overflow: hidden!important;
}
.imgSize
{
  z-index: 20;
  max-width: 100%;
  max-height: 100%;
  float: left!important;
  display: inline-block;
}
.imgSize2
{
  z-index: 20;
  max-width: 120px;
}
.imgSize3
{
  z-index: 20;
  width: 70px;
}
.emojiSize2
{
 width: 100px; 
}

#cuerpoCarta
{
  width: 52%;
  height: 60%;
  top: 26%;
  left: 26%;
  line-height:28px;
  border: none;
  background: none;
  font-family: 'Comfortaa';
  font-weight: bolder!important;
  font-size: 26px;
  z-index: 19;
  
}

#querido
{
  top: 20%;
  left: 25%;
  font-family: 'Comfortaa';
  font-size: 24px;
  z-index: 1;

}

.fondo7
{
  background: url("../images/pagina7/fondo_final.png")center center!important;
  z-index: 1;
  width: 100%;
  height: 100%;
  position: fixed;
}
#cerrarFin
{
  top: 60%;
  z-index: 1;
}
#ave1
{
  top: 35%;
  left: 25%;
  z-index: 1; 
}
#ave2
{
  top: 52%;
  z-index: 1;
  left: -16%;
  
}
#casas
{
  top: 50%;
  
}



#ImgEsfera
{
  top: 30%;
  height: 30%;
  z-index: 2;
  background: url("../images/pagina7/circulo.png") no-repeat;
  width:209px;
  height: 210px;
}
#ImgEsfera img
{
  width: 100%;
  height: 89%!important;
  border-radius: 50%;
}
#mensaje-7
{
  top: 5%;
  left: 0;
  font-family: 'Comfortaa';
  font-size: 40px;
  z-index: 1;
  text-align: center;
  color: #FFF;
  width: 100%;
}

/* pagina 8 */

img#reyes
{
  left: 55%;
  z-index: 1;
  width: 19%;
}
img#santa
{
  left: 65%;
  top: 0;
  z-index: 1;
  width: 10%;
}
img#jesus
{
  left: 60%;
  top: 10%;
  z-index: 1;
  width: 10%;
}
#sobre_responde
{
  left: 78%;
  top: 30%;
}
img#sobre_responde
{
  width: 10%;
}

#sobre_juguetes
{
  left: 78%;
  top: 55%;
}
img#sobre_juguetes
{
  width: 10%;
}

#botonPago
{
  left: 78%;
  top: 80%;
}

#botonPagoInicio
{
  left: 78%;
  top: 88%;
}
#responderA
{
  left: 79%;
  top: 38%;
  text-align: center;
  z-index: 2; 
  width: 8%;
}

#juguetes8
{
  top: 26px;
  left: 700px;
  width: 274px;
  height: 557px;
  /*overflow: auto;*/
  text-align: center;
  padding-top: 20px;
}

#imagenDetalle8
{
  width: 100%;
}
.imgSize8
{
  z-index: 20;
  width: 130px;
  float: left!important;
}

#cuerpoCarta8
{
  width: 515px;
  height: 520px;
  top: 165px;
  left: 122px;
  line-height:28px;
  border: none;
  background: none;
  font-family: 'Comfortaa';
  font-weight: bolder!important;
  font-size: 26px;
  z-index: 19;
  /*border: #000 solid 1px;*/
}

#cuerpoCarta8Imp
{
  width: 515px;
  height: 448px;
  top: 165px;
  left: 122px;
  line-height:28px;
  border: none;
  background: none;
  font-family: 'Comfortaa';
  font-weight: bolder!important;
  font-size: 26px;
  z-index: 19;
  /*border: #000 solid 1px;*/
}

#querido8
{
  top: 74px;
  left: 111px;
  font-family: 'Comfortaa';
  font-size: 24px;
  z-index: 1;
  width: 416px;

}

#respustaCartaOpt
{
  top: 111px;
  left: 130px;
  font-family: 'Comfortaa';
  font-size: 24px;
  z-index: 1;

}

.parpadea2
{
  animation-name: parpadeo;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

/*Pagina Respuesta*/

#buzonA
{
  top: 10%;
  left: 65%;
}
#mail_papas_bennyA
{
  top: 10%;
  left: 10%;
}
#emailPapaA
{
  top: 45%;
  left: 10%;  
}

input#nombreA,
input#emailPapaA 
{
  width: 37%!important;
  height: 15%!important;
  background: url("../images/pagina2A/linea.png");
  border: none!important;
  font-size: 40px!important;
  font-family: 'Comfortaa';
  font-weight: bolder!important;
  padding-left: 15px;
}
#estrella_seguirA
{
  top: 40%;
  left: 50%;   
}
#nube1A,#nube2A,#nube3A,#nube4A,#nubeError
{
  z-index: 99999;
  top: 20%;
}

textarea:focus {
    outline: none;
}

.listaCarta
{
  font-size: 25px!important;
  font-family: 'Comfortaa';
}

.cursor
{
  cursor: pointer;
}

.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

.efecto1
{
  animation-duration: 2s;
  animation-name: rotar;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

@keyframes rotar {
  from {
    transform: rotate(-540deg);
    -webkit-transform: rotate(-540deg);
    -o-transform: rotate(-540deg); 
    -moz-transform: rotate(-540deg);
  }

}

.efecto2
{
  animation-duration: 2s;
  animation-name: escala;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

@keyframes escala {
  from {
   transform: scale(1.5);
    -webkit-transform: scale(1.5);
    -o-transform: scale(1.5); 
    -moz-transform: scale(1.5);
  }
}
.efecto3
{
  animation-duration: 1s;
  animation-name: mover;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

@keyframes mover {
  from {
   transform: translate(-32px, 0);
  -webkit-transform: translate(-32px, 0);
  -moz-transform: translate(-32px, 0);
  -o-transform: translate(-32px, 0);
  -ms-transform: translate(-32px, 0);
  }
}

.efecto4
{
  animation-duration: 1s;
  animation-name: mover2;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}

@keyframes mover2 {
  from {
   transform: translate(32px, 0);
  -webkit-transform: translate(32px, 0);
  -moz-transform: translate(32px, 0);
  -o-transform: translate(32px, 0);
  -ms-transform: translate(32px, 0);
  }
}