body, html{
	margin:0;
	padding:0;
    font-family: 'BenchNine', sans-serif;
    font-size:4vh;
    color:#000;
    text-align:center;
    width:100%;
    height:100%;
    overflow:hidden;
    position: relative;
}

#contenedorGeneral{
    width:100%;
    height:100%;
    background-image: url('../img/fondo_amarillo.jpg');
    background-size:cover;
    background-position:center;
}

.columna{
    width:50%;
    height:100%;
    top:0;
    background-size:contain;    
    background-repeat: no-repeat;
    position:absolute;
    cursor:pointer;
}

#columna_iz{
    left:0;
    background-image: url('../img/buenos.png');
    background-position:left bottom;
    cursor:url(../img/goodhand.png), pointer;
}

.badcursor{
    cursor:url(../img/badhand.png), pointer!important;
}
.goodcursor{
    cursor:url(../img/goodhand.png), pointer!important;
}

#columna_dr{
    right:0;
    background-image: url('../img/malos.png');
    background-position:right bottom;
    cursor:url(../img/badhand.png), pointer;
}

#roto{
    width:5.2708638%;
    height:100%;
    max-width:72px;
    position:absolute;
    margin:0 auto;
    background-image: url('../img/roto.png');
    background-position:center bottom;
    background-size:contain;
    background-repeat: no-repeat;
    left: 0;
    right: 0;
    top: 0;
}

#tt{
    position:absolute;
    top:0;
    left:0;
    width:25.695461%;
    height:17.838541%;
    background-image: url('../img/tt.png');
    background-position:left top;
    background-size:contain;
    background-repeat: no-repeat;
}

#txt1{
    position:absolute;
    top:0;
    right:0;
    width:26.207906%;
    height:10.286458%;
    background-image: url('../img/texto1.png');
    background-position:right top;
    background-size:contain;
    background-repeat: no-repeat;
}

#texto_regalos{
    position:absolute;
    top:0;
    right:0;
    width:26.207906%;
    height:10.286458%;
    background-image: url('../img/texto_regalos.png');
    background-position:right top;
    background-size:contain;
    background-repeat: no-repeat;
    cursor:pointer;
}

#titulo{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:33.016105%;
    height:19.270833%;    
    background-position:center top;
    background-size:contain;
    background-repeat: no-repeat;
    margin:0 auto;
}

.titulo1{
    background-image: url('../img/pregunta.png');
}

.titulo2{
    background-image: url('../img/titulo_buenos.png');
}

.titulo3{
    background-image: url('../img/titulo_malos.png');
}

.transicion{
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out; /* IE10 is actually unprefixed */
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.fueraAbajo{
    top:100% !important;
    bottom:-100% !important;
}

.fueraArriba{
    top:-100% !important;
}

.fueraIzquierda{
    left:-100% !important;
}

.fueraDerecha{
    right:-100% !important;
}

.bn {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

#columna_iz.dos{
    background-image: url('../img/buenos_2.png');
}

#columna_dr.dos{
    background-image: url('../img/malos_2.png');
}

.invisible{
    display:none;
}

.transparente{
    opacity:0;
}

#postales_malos{
    left:0;
    width:50%;
    height:100%;
    top:0;
    position:absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

#postales_buenos{
    right:0;
    width:50%;
    height:100%;
    top:0;
    position:absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}

.contenedor_postales{
    width:84.626647%;
    left:0;
    right:0;
    margin: 0 auto;
    max-width: 70vh;
}

.titulo_postales{
    width:100%;
}

#postal1_malos{
    width: 43.079584%;
    margin-right: 2.2491349%;
}
#postal2_malos{
    width: 29.065743%;
    margin-right: 2.2491349%;
}
#postal3_malos{
    width: 23.356401%;
}
#postal4_malos{
    width: 55.882352%;
    margin-right: 2.5951557%;
}
#postal5_malos{
    width: 41.522491%;
}

#postal1_buenos{
    width: 60.457516%;
    margin-right: 4.248366%;
}
#postal2_buenos{
    width: 35.294117%;
}
#postales_3_4_5{
    width: 44.322344%;
    margin-right: 3.5947712%;
}
#postales_3_4_5 img{
    -o-object-fit: contain;
    object-fit: contain;
}
#postal3_buenos{
    width: 100%;
}
#postal4_buenos{
    width: 44.322344%;
    margin-right: 11.355311%;
}
#postal5_buenos{
    width: 44.322344%;
}
#postal6_buenos{
    width: 51.797385%;
}

.fila100{
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.fila100 img{
    -o-object-fit: contain;
    object-fit: contain;
    margin-bottom: 2vh;
    cursor: pointer;
}

.volver, .enviar{
    display:block;
    margin: 0 auto;
    cursor: pointer;
}

#volver_formulario.volver{
    margin: 2vh 0;
}

#muestraPostal{
    left:0;
    width:50%;
    height:100%;
    top:0;
    position:absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#formulario{
    right:0;
    width:50%;
    height:100%;
    top:0;
    position:absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#formulario_contenedor{
    max-width: 70vh;
}

#postal, #formulario_contenedor{
    width:84.626647%;
    left:0;
    right:0;
    margin: 0 auto;    
    margin-top: 17.838541vh;
}

#postal{
    height: 70vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#formulario_contenedor{
    text-align: left;
}

#campos{
    text-align: left;
}

#p2rellena, #p3envia{
    max-width:100%;
    width: 100%;
}

#p3envia{
    margin: 4vh 0 0 0;
}

#rrss{
    text-align: left;
}

#rrss img{
    width: 12%;
    margin-right: 3%;
    cursor: pointer;
}

input{
    font-family: 'BenchNine', sans-serif;
    font-size:4vh;
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid #000;
    margin-left: 10px;
}

#pie{
    width:100%;
    position:absolute;
    bottom:0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 14px;
}

#bases{
    margin: 0 30px;
}

#bases a{
    text-decoration: none;
    color: #000;
}

#facebook img{
    height: 15px;
    width: auto;
}

#pie.ipad{
    justify-content: space-between;
}

#pie.ipad #facebook{
    margin: 0 30px;
}

.filter{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        display: flex;
    align-items: center;
    justify-content: center;
        background: rgba(255,255,255,0.9);
}

#postalGrande{
    width: 90%;
    height: 76%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
#btnCerrarPreview{
    background: url('../img/envialatuya.png') no-repeat center center;
    width: 269px;
    height: 67px;
    position:absolute;
    bottom:3%;
    cursor:pointer;
}

#zonaCabecera{
    position: absolute;
    width:100%;
    height: 17.838541%;
}

#legal{
    font-size: 10px;
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    position: absolute;
    right: -17px;
    bottom: 10vh;
    color: #FFF;
}

#avisoGiro{
    width:100%;
    height:100%;
    background-color: #f9b601;
    display:none;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.displayFlex{
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}


@media screen and (max-aspect-ratio: 1/1) {
    body, input{
        font-size: 17px;
    }

    #columna_iz{
        background-image: url('../img/buenos_vertical.png');
        
    }

    #columna_dr{
        background-image: url('../img/malos_vertical.png');

    }

    #tt{
        right:0;
        margin:0 auto;
        width: 40vw;
        height: 15.612532vw;
        background-position:center top;
    }

    #titulo{
        top: 15.612532vw;
        width: 50vw;
        height: 22.971172vw;
        max-width: 451px;
    }

    #txt1{
        display:none;
    }
    #roto{
        background-position:center center;
        width:8%;
    }

    #postales_malos, #postales_buenos{
        width: 100%;
        height:60vh;
        bottom:15vh;
        top:auto;
        -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    }

    #muestraPostal{
        left:0;
        width:100%;
        height:55vh;
        top:auto;
        bottom:12vh;
        position:absolute;
        display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
    }

    #postal{
        margin-top:0;
        width: 95vw;
        height: 75vw;
    }

    #navegacion_movil{
        width:100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #navegacion_movil img{
        object-fit: contain;
    }

    #formulario{
        width: 100%;
    }

    #rrss{
        margin: 1vh 0;
    }

    #volver_formulario.volver {
        margin: 5vh 0;
    }

    .volver, .enviar{
        width:20vw;
    }

    #texto_regalos{
        top: auto;
        bottom: 0;
        width: 90vw;
        margin: 0 auto;
        left: 0;
        right: 0;
        background-position: center;
        margin-bottom: 6vh;
    }

    #pie{
        background-color: #f9b601;
        height: 5vh;
    }

    .titulo_postales{
        width: 70%;
        margin-bottom: -1vh
    }

    #formulario_contenedor{
        margin-top: 13vh;
    }
}

@media screen and (max-aspect-ratio: 9/13) {
    /*#titulo{
        width: 50vw;
    }*/
    #muestraPostal {
        bottom: auto;
        top: 33vw;
    }
}

@media screen and (max-aspect-ratio: 1/1) and (min-width : 700px) {
    body, input{
        font-size: 25px;
    }
    .titulo_postales {
        width: 60%;
    }
    #postal {
        height: 70vw;
    }
    .contenedor_postales {
        width: 80%;
    }
    #formulario_contenedor{
        width: 55%;
    }
    #pie{
        background-color:transparent;
    }
    #texto_regalos{
        margin-bottom: 2vh;
    }
    #muestraPostal{
        height:60vh;
    }
    #postales_malos, #postales_buenos{
        bottom:13vh;
    }
}


@media screen and (max-width : 800px) {
    
}

@media screen and (min-width : 1294px) {
    
}