body {
    background-color: #f0f0f0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='32' viewBox='0 0 16 32'%3E%3Cg fill='%23c3c2c5' fill-opacity='0.26'%3E%3Cpath fill-rule='evenodd' d='M0 24h4v2H0v-2zm0 4h6v2H0v-2zm0-8h2v2H0v-2zM0 0h4v2H0V0zm0 4h2v2H0V4zm16 20h-6v2h6v-2zm0 4H8v2h8v-2zm0-8h-4v2h4v-2zm0-20h-6v2h6V0zm0 4h-4v2h4V4zm-2 12h2v2h-2v-2zm0-8h2v2h-2V8zM2 8h10v2H2V8zm0 8h10v2H2v-2zm-2-4h14v2H0v-2zm4-8h6v2H4V4zm0 16h6v2H4v-2zM6 0h2v2H6V0zm0 24h2v2H6v-2z'/%3E%3C/g%3E%3C/svg%3E");
}

.tarjeta__contenedor {
    width: 400px;
    height: 600px;
    background: #FFF;
    position: fixed;
    margin: auto;
    overflow: hidden;
    left:0;right: 0;
}

.h-30 {
    height: 30%;
}

.carousel-item {
    transition: transform 4s ease, opacity 2.5s ease-out !important;
}



.h-70 {
    height: 70%;
}



.form-control:focus {
    outline: none !important;
}

.tarjeta__ventana {
    background: url(../img/Tarjeta/Emergentes/fondo_ventana.png);
    z-index: 442;
    transform: translateY(-100%);
    overflow: hidden;
    transition: transform 2s linear;
}

.tarjeta__ventana.active {
    transform: translateY(0);
}

.tarjeta__ventana-header {
    height: 18%;
}

.tarjeta__ventana-body {
    height: 82%;
    top: 19%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.close-ventana {
    z-index: 2;
    width: 25%;
    cursor: pointer;
    right: 0;
    height: 100%;
}

.share img {
    width: 40%;
    margin-bottom: 1em;
}


@media only screen and (max-width: 600px) {
    .tarjeta__contenedor {
        width: 100%;
        height: 100%;
        background: #f8f8f8;
        position: fixed;
        margin: auto;
        overflow: hidden;
        left:0;right: 0;
    }

}

.qr {
    left: 0px;
    right: 0px;
    z-index: 4;
    top: 18%;
    position: absolute;
    margin: auto;
    width: 81% !important;
    transform: scale(0);
    -webkit-transition: transform 1.25s linear;
       -moz-transition: transform 1.25s linear;
        -ms-transition: transform 1.25s linear;
         -o-transition: transform 1.25s linear;
            transition: transform 1.25s linear;
}

.qr.active {
    transform: scale(1);
}


.position-absolute {
    
}

.door-up {
    background: url('../img/Portada/paladar_arriba.png');
    background-size: 100% 100%;
    z-index: 8;
    transition: all 2s linear;
}
.door-up.active {
    transform: translateY(-50%) scale(1.3);
}

.door-down {
    background: url('../img/Portada/paladar_abajo.png');
    background-size: 100% 100%;
    transform: translateY(35%);
    height: 75%;
    z-index: 7;
    transition: transform 2s linear;
}
.door-down.active {
    transform: translateY(102%) scale(1.4);
}



.slider {
}

.btn-primario {
    z-index: 10;
    left: 0;
    right:0;
    margin:auto;
    transform: translateY(-100%);
    transition: transform 2s linear 1s;
}

.btn-primario.active {
    transform: translateY(131%);
}

.btn-secundario {
    z-index: 2;
    height: 60%;
    width: 90%;
    margin: auto;
    left:0;right:0;top: 23%;bottom:0;
    transition: transform 2s linear;
    transform: scale(0);
    padding-top: 10%;
    z-index: 15;
}

.btn-secundario .col-4 img {
    width: 59%;
}
.btn-secundario.active {
    transform: scale(1);
}

.fondo-secundario {
    background: url('../img/Tarjeta/Botones/SECUNDARIOS/fondo_secundarios.png')
 center / cover;
    z-index: 2;
    opacity: 0;
    transition: opacity 2s linear;
}
.fondo-secundario.active {
    opacity: 1;
}
.img-share{
    width: 40%;
    margin-bottom: 1em;
}

.btn-principal {
    height: 15% !important;
    z-index: 44;
    overflow: hidden;
    transition: transform 2s linear 1s;
    transform: translateY(-100%);
}

.btn-principal.active {
    transform: translateY(0);
}