body, html{
	margin:0;
	padding:0;
    overflow: hidden;
    font-family: "Open Sans", sans-serif;
    font-size:12px;
    background-color:#FFF;
    width:100%;
    height:100%;
}

body{
    /*display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;*/
    background-image: url('../img/fondo_desktop.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
}

#contenedor{
    z-index:2;
    width:67.204301vh;
    height:100vh;
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
    background-color: #FFF;
    -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
}

#canvas{
    width: 100%;
}

.pag{
    width:100%;
    height:100%;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out; 
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

#pag_2{
    background-image: url('../img/fondo_pie.jpg');
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#pag_2, #pag_3{
    display:none;
    opacity:0;    
}

#pie1, #titulo_1, #titulo_2, #titulo_3, #fondo_iconos, #pie2, #pie3{
    width:100%;
    height:auto;
}

#fondo_iconos{
    /*visibility: hidden;*/
}

#titulo_1, #titulo_2, #titulo_3{
    display:block;
}

#contenedor_canvas, #fotoCompartida{
    width:89.6%;
    height: auto;
    margin: 0 auto;
    position: relative;
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

#fotoCompartida{
    background-image: url('../img/mar.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center;
    display: block;
}

#contenedor_iconos{
    width:100%;
    position:relative;
    /*overflow:auto;*/
    overflow-y: hidden;
}

#personajes, #objetos{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    /*background-image: url(../img/fondo_iconos_10.png);
    background-size: auto 103%;*/
}

#canvas_2, #overlay, #output{
    width:100%;
    height:100%;
}

#overlay{
    position:absolute;
    top:0;
    display:none;
}

#output{
    position:absolute;
    top:0;
    display:none;
}

.icono{
    width:15.733333%;
    height:auto;
    margin-right: 2%;
}

#personaje_1, #objeto_1, #boton_1{
    margin-left:5.2%;
}

#boton_1{
    background-image: url('../img/boton_1_desactivado.png');
}
#boton_2{
    background-image: url('../img/boton_2_desactivado.png');
}
#boton_3{
    background-image: url('../img/boton_3_desactivado.png');
}
#boton_4{
    background-image: url('../img/boton_4_desactivado.png');
}
#boton_5{
    background-image: url('../img/boton_5_desactivado.png');
}

#boton_1.activo{
    background-image: url('../img/boton_1.png');
    cursor:pointer;
}
#boton_2.activo{
    background-image: url('../img/boton_2.png');
    cursor:pointer;
}
#boton_3.activo{
    background-image: url('../img/boton_3.png');
    cursor:pointer;
}
#boton_4.activo{
    background-image: url('../img/boton_4.png');
    cursor:pointer;
}
#boton_5.activo{
    background-image: url('../img/boton_5.png');
    cursor:pointer;
}

#boton_1.borrar{
    background-image: url('../img/boton_1_borrar.png');
    cursor:pointer;
}

.boton{
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center;
    display:inline-block;
    vertical-align: top;
    width:15.733333%;
    height:auto;
    margin-right: 2%;
}

#filePhoto{
    display:none;
}

.hide {
    display : none;
}

#loaderGeneral{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background-color: rgba(24,52,88,0.7);
    background-image: url('../img/loader.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size:50% auto;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s;
    transition: all 0.5s;
    text-align:center;
}

#loaderCanvas{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    /*background-color: rgba(41,152,211,0.7);*/
    background-image: url('../img/loader.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size:50% auto;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s;
    transition: all 0.5s;
    opacity:0;
}

#fondoLoader{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background-image: url('../img/mar.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:100% auto;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#burbujas_2{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background-image: url('../img/burbujas_loader_2.png');
    background-repeat:repeat-y;
    background-size:100% auto;
    background-position:center top;
}

#burbujas_1{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background-image: url('../img/burbujas_loader_2.png');
    background-repeat:repeat-y;
    background-size:200% auto;
    background-position:center top;
}

#eligeUnaFoto{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    background-image: url('../img/eligeUnaFoto.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size:100% auto;
    cursor:pointer;
}

#bocadillo{
    position:absolute;
    width:100%;
    height:100%;
    top:20%;
    background-image: url('../img/bocadillo.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size:100% auto;
    opacity:0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s; /* IE10 is actually unprefixed */
    -o-transition: all 0.3s;
    transition: all 0.3s;
    pointer-events:none;
}

@keyframes anim1 {
    from {
        background-position: center 0%;
    }
    to {
        background-position: center 10000%;
    }
}
@-moz-keyframes anim1 {
    from {
        background-position: center 0%;
    }
    to {
        background-position: center 10000%;
    }
}
@-webkit-keyframes anim1 {
    from {
        background-position: center 0%;
    }
    to {
        background-position: center 10000%;
    }
}

.subiendo_2{
    animation: anim1 50s linear infinite;
    -moz-animation: anim1 50s linear infinite;
    -webkit-animation: anim1 50s linear infinite;
    -o-animation: anim1 50s linear infinite;
}

.subiendo_1{
    animation: anim1 100s linear infinite;
    -moz-animation: anim1 100s linear infinite;
    -webkit-animation: anim1 100s linear infinite;
    -o-animation: anim1 100s linear infinite;
}

#contenedor_boton_HazLaTuya{
    width:100%;
    position:relative;
    text-align: center;
    cursor:pointer;
}

#boton_HazLaTuya{
    width:49.4666666%;
    height:auto;
    margin:0 auto;
    left:0;
    right:0;
    cursor:pointer;
}

::-webkit-scrollbar{
  width: 12px;  /* for vertical scrollbars */
  height: 6px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb{
  background: rgba(0, 0, 0, 0.5);
}

#pag_descarga, #pag_compartir, #pag_email{
    background-color: rgba(217,228,237,0.9);
    position: absolute;
    top: 0;
    text-align: center;
    display:none;
}

#txt_descarga{
    display:block;
    margin:0 auto;
    width:49.066666%;
    margin-top: 30vh;
}

#boton_descarga{
    display:block;
    margin:0 auto;
    width:58.4%;
    margin-top: 3vh;
    cursor:pointer;
}

#txt_compartir{
    display:block;
    margin:0 auto;
    width:54%;
    margin-top: 30vh;
}

#txt_email{
    display:block;
    margin:0 auto;
    width:54%;
    margin-top: 30vh;
}

#boton_fb, #boton_tw, #boton_wa, #boton_ym, #boton_em{
    margin:0 1%;
    margin-top: 3vh;
    width:15.6%;
    cursor:pointer;
}

.cerrar{
    width: 5.5%;
    float: right;
    margin-top: 3vh;
    margin-right: 3vh;
    cursor:pointer;
}

textarea{
    font-size:3vh;
    width:87.6%;
    height:90%;
    margin:0 auto;
    display:block;
    padding: 1%;
}

#email{
    font-size:3vh;
    width:87.6%;
    /*height:90%;*/
    margin:0 auto;
    display:block;
    padding: 1%;
    margin-top: 3vh;
}

#nieve{
    width:100%;
    height:100%;
    position:absolute;
    z-index:3;
    pointer-events: none;
}

#errorEmail{
    color:#b50723;
}

/* MOVIL */
@media screen and (max-aspect-ratio: 5/7) {
    /*#nieve{
        display:none;
    }*/
    body{
        background-image:none;
    }
    #contenedor{
        width:100vw;
        height:148.8vw;
    }
    ::-webkit-scrollbar{
      height: 2px; /* for horizontal scrollbars */
    }
    /*#animation_container{
        max-height:148.8vw;
        max-width:none;
    }*/
}

/* ENTRE MOVIL Y CUADRADO */
/*@media screen and (min-aspect-ratio: 2/3) and (max-aspect-ratio: 1/1) {

}*/

/* ENTRE CUADRADO Y 4/3 */
/*@media screen and (min-aspect-ratio: 1/1) and (max-aspect-ratio: 4/3) {
    
}*/

/*@media screen and (min-aspect-ratio: 4/3) {
    
}

@media screen and (min-aspect-ratio: 16/9) {
    
}*/