:root {
    --border: rgb(3, 169, 244);
    --g1: #416BBB;
    --g2: #23427E;
    --g3: #041840;
}

body {
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Montserrat', sans-serif;
}
/*.difuminado {
    background-color: rgba(0,0,0,0.7);
}*/

.selec-group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 0.8em;
    color: #b9b9b9;
    margin-bottom: 0em;
}


.dis-inputs {
    border-width: 0px;
    background-color: #dadada;
    padding-block:0.8vh;
}


.naval-size {
    height: 5vh;
}



.selec-out {
    margin: 1em;
    margin-bottom: 3em;
}



div .btn {
    font-weight: 600;
    margin-left: 0em;
    margin-top: 0em;
}

.bodysh { /* 
  background-color: #6058a5; */
    width: 100svw;
    height: 100svh;
    position: absolute;
    opacity: 1;
    animation: zeta ease 6s;
}


@keyframes zeta {
    0% {
        z-index: 1;
    }

    99% {
        z-index: 1;
    }

    100% {
        z-index: -1;
    }
}


.fase-1 {
    position: absolute;
    top: 15%;
    left: 35%;
    width: 30svw;
    z-index: -1;
    opacity: 0;
    animation: fadeinRIBBONITEMS ease 4.25s;
    animation-delay: 2s;
}

.fase-2 {
    position: absolute;
    top: 15%;
    left: 35%;
    width: 30svw;
    z-index: -1;
    opacity: 0;
    animation: fadeinRIBBONITEMS ease 4.25s;
    animation-delay: 2s;
}

.fase-3 {
    position: absolute;
    top: 15%;
    left: 35%;
    width: 30svw;
    z-index: -1;
    opacity: 0;
    animation: fadein ease 5.75s;
    animation-delay: 0.75s;
}

.fase-4 {
    position: absolute;
    top: 15%;
    left: 35%;
    width: 30svw;
    z-index: -1;
    opacity: 0;
    animation: fadein ease-in 5s;
    animation-delay: 0.85s;
}

.fase-5 {
    position: absolute;
    top: 15%;
    left: 35%;
    width: 30svw;
    z-index: -1;
    opacity: 0;
    animation: fadeinML ease-out 5s;
    animation-delay: 1.5s;
}

.fase-6 {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100svh;
    width: 100svw;
    object-fit: cover;
    z-index: -2;
    opacity: 0;
    animation: fadeinBG ease-in-out 6s;
}

@keyframes fadeinRIBBONITEMS {
    0% {
        opacity: 0;
        transform: scale(0.5,0.5);
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    50% {
        transform: scale(1,1);
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: scale(1,1);
    }

    100% {
        opacity: 0;
        transform: scale(0,0);
    }
}

@keyframes fadein {
    0% {
        opacity: 0;
        transform: scale(0.5,0.5);
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    50% {
        transform: scale(1,1);
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: scale(1,1);
    }

    100% {
        opacity: 0;
        transform: scale(0,0);
    }
}

@keyframes fadeinBG {
    0% {
        opacity: 1; /* 
    width: 0%; */
    }

    10% {
        opacity: 1; /* 
    width: 75%; */
    }

    90% {
        opacity: 1; /* 
  width: 75%; */
    }

    100% {
        opacity: 0; /* 
    POR AHORA SE DEJA EN 1 PARA QUE NO HAGA BLINK */
    }
}

@keyframes fadeinML {
    0% {
        opacity: 0;
        transform: scale(0.5,0.5);
    }

    20% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    50% {
        transform: scale(1,1);
    }

    60% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: scale(1,1);
    }

    100% {
        opacity: 0;
        transform: scale(0,0);
    }
}

.hero-text-home {
    transform: translate(60svw,-5svh);
}


.modal-backdrop {
    z-index: -99999 !important;
    
}
.modal-footer {
    background-color: white !important;
}
.modal-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0 !important;
    background-color: white !important;
}


.modal-background {
    background-color: rgba(0,0,0,0.2); /* Color de fondo semi-transparente */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0 !important; /* Asegúrate de que el z-index sea superior al del modal */
}

.difuminado2 {
    background-color: rgba(0,0,0,0.2);
}

.rounded {
    border-radius: 1rem
}

.nav-pills .nav-link {
    color: #555
}

.purchase-history-container {
    width:100%;
    height:100%;
    display: flex;
    flex-direction:column;
    justify-content: start;
    align-items: center;
}


.dynamic-height-container {
    overflow-y:scroll;
    max-height:450px;
}



.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #f7c045 !important;
    font-size: calc(7px + 0.390625vw) !important;
}


.nav-pills .nav-link.active {
    color: #555 !important;
    font-weight: 600 !important;
    font-size: calc(7px + 0.390625vw) !important;
}

.btn-primary {
    background-color: #f7c045 !important;
    border: none !important;
    color: #555 !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: calc(7px + 0.390625vw) !important;
}

    .btn-primary:hover {
        background-color: #e2b246 !important;
        font-size: calc(7px + 0.390625vw) !important;
    }



.btn-secondary {
    background-color: #555 !important;
    border: none !important;
    color: white !important;
    border-radius:20px !important;
    margin-top:4vh;
    font-weight: 600 !important;
    font-size: calc(7px + 0.390625vw) !important;
}

    .btns-secondary:hover {
        background-color: #555 !important;
        font-size: calc(7px + 0.390625vw) !important;
    }


/*****************************MIS COMPRAS *************************/

.recurring-purchase-container {
    width:100%;
    height:max-content;
    display: flex;
    justify-content: center;
    margin-top:5vh;
}

.search-party {
    width: 75%;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: end;
    padding-bottom: 5vh;
    padding-top: 5vh;
}
.formulario-contenedor{
    display: flex;
    gap: 10px;
}


.casillas-formulario-purchase {
    width: auto;
    height: 100%;
    display: block;
    display: flex;
    flex-direction: column;
}

.botones-contenedor{
    width: 50%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
}
.casillas-formulario-purchase-buttons {
    padding-top: 2svh;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
}

.title-billing {
    width: 100%; /* Ancho del contenedor */
    word-wrap: break-word; /* Ajusta las palabras largas */
    white-space: normal; /* Permite saltos de línea */
}

.title-billing h2{
    color: #555;
    font-size: calc(22px + 0.390625vw);
    width:100%;
}

.title-billing strong {
    color: #444;
    font-weight: 600;
    font-size: calc(28px + 0.390625vw);
}

.dis-inputs-be-weird {
    width: 200px;
    border-width: 0px;
    background-color: #dadada;
    padding-block: 0.8vh;
}



/************************************ FIN MIS COMPRAS *************************/



input[type="radio"] {
    margin-right: 5px
}

.bold {
    font-weight: bold
}


.fs-1 {
    font-size: 8px;
}

.aVer {
    transform: translate(0px, 0px);
    background-image: none;
    mix-blend-mode: none;
}


.btn-primaryo {
    color: #201c42;
    background-color: #F7C045;
    border-color: #FFC600;
    font-size: calc(20px + 0.390625vw);
    font-weight: 600;
    line-height: 0.9;
    padding-inline: 20px;
    padding-top: 5px;
    padding-bottom: 11px;
    margin-left: 20px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.644);
}

    .btn-primaryo:hover {
        color: #201c42;
        background-color: #e2af3f;
        border-color: #cc9e00;
        text-decoration: none;
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.644);
    }

.btn-secundaryo {
    color: #ffffff;
    background-color: #201c42;
    border-color: #6058a5;
    font-size: calc(4px + 0.390625vw);
    width: 80%;
    font-weight: 600;
    line-height: 0.5;
    padding-top: 5px;
    padding-bottom: 5px;
}

/*
#theDiv h5 {
    width: 80%;
    line-height:1.1;
    font-size: calc(3px + 0.390625vw) !important;
}*/


.contenedor-paneles-what-for {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items:center;
}

.panel-what-for-posi,
.panel-what-for-chuta {
    display:flex;
    width: 100%;
    margin:0.25vw;
}


.panel-what-for-posi .btn-primary,
.panel-what-for-chuta .btn-secondary {
    width:100%;
    max-width: 200px;
    margin: 0.25vw;
}

.iconos-trans {
    width:10%;
    display: flex;
    justify-content:center;
    align-items:center;
    margin-inline:auto !important;
    padding-bottom: 1vh;
}


.bien, .mal {
    font-size: calc(4px + 0.390625vw);
    text-align: center;
    margin-inline:auto;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    height:2vh;
}

    .btn-secundaryo:hover {
        color: #201c42;
        background-color: #e2af3f;
        border-color: #cc9e00;
        text-decoration: none;
        box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.644);
    }

.customLink {
    color: #443d81;
    font-size: calc(5px + 0.390625vw);
}

    .customLink:hover {
        text-decoration: none;
        color: #655bb9;
    }

.heroes {
    justify-content: center;
    align-items: center;
}


.hero-text-light {
    color: white;
    font-size: calc(40px + 0.390625vw);
    font-weight: 300;
    line-height: 0.9;
}

.hero-text-std {
    color: white;
    font-size: calc(20px + 0.390625vw);
    font-weight: 700;
    line-height: 0.9;
}


.hero-text-bold {
    color: white;
    font-size: calc(40px + 0.390625vw);
    font-weight: 900;
    line-height: 0.9;
}

.custom-paragraph {
    font-size: calc(12px + 0.390625vw);
    font-weight: 200;
    line-height: 1.2; /* 
    width: 40vw; */
}

.custom-paragraph-2 {
    font-size: calc(10px + 0.390625vw);
    font-weight: 400;
    line-height: 1;
    color: #969696;
    padding-block:2vh;
}

.sombra {
    box-shadow: rgba(100, 100, 111, 0.6) 0px 3px 10px 0px;
}

/*.fondoBacan {
    background-image: url("img/fongo.png");
    background-position: 50% 60%;
}*/

.fondoResto {
    background-image: url("img/fongo_2.png");
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    background-position: 10% 100%;
}



.contenedorFusionado {
    mix-blend-mode: normal;
}

.evenColumns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 2fr;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    gap: 0em;
    height: 75svh;
    width: min(90svw);
}

.evenColumns2 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 6fr;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    gap: 0em;
    height: 75svh;
    width: min(90svw);
}



.wrap-the-whole-container {
    display: flex;
    width: 100%;
    height: 90vh;
    /*    background-color: rebeccapurple;*/
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


.wrap-the-whole-thing-long {
    display: flex;
    width: 100%;
    min-height: 90vh;
    /*    background-color: rebeccapurple;*/
    justify-content: center;
    align-items: center;
    margin: 0 auto !important;
    padding-block: 3vh;
}




.align-middle {
    line-height: 1.1;
}





.short-inputs {/*
    margin-left: auto !important;
    margin-right: auto !important;*/
    align-self:start;
    margin-top: 2vh;
    width:100%;
    padding-inline:10vw;
}


.titulos-and-such {
    align-self: end;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    font-size: calc(8px + 0.390625vw);
}


.titulos-and-such-refill {
    align-self: center;
    text-align: center;
    margin: 0 !important;
    padding: 0 !important;
    font-size: calc(8px + 0.390625vw);
}


.titulo-necio {
    font-size: calc(8px + 0.390625vw);
    line-height:1.1;
    margin-top: 2vh;
    margin-bottom: 5vh;
    width: 50%;
    margin-inline: auto;
}

.better-long-buttons {
    margin-inline: 0 auto !important;
    width: 100%;
    height: 100%;
    padding-block: 0.25vh;
    border-radius: 25px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 0;
    background-color: #f7c045;
    color: #555;
    border: 0 !important;
    font-size: calc(7px + 0.390625vw);
}


.contenedor-principal-recovery {
    width: 100%;
    height: 100%;
    display: grid;
    place-items:center;/*
    margin-left: 0 auto !important;
    margin-right: 0 auto !important;*/
    padding-left: 5vw;
    padding-right: 5vw;
}



.contenedor-payment-staging {
    margin-bottom:5vh !important;
    gap:2vh;
    margin-top:5vh;
    width:100%;
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items:center;
}


.mein-padding {
    padding-inline: 1vw !important;
}


.product-description-container {

}


.contenedor-principal-no-pad {
    width: 100%;
    height: 100%;
    display: grid; 
}


.evenColumns3-payout {
    display: grid;
    /*    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 1fr 1fr;*/
    /*    justify-items:center;
    align-items:center;*/
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    height: 80%;
    width: 80%;
    margin: auto !important;
    border-radius: 25px;
}


.evenColumns3-refill {
    display: grid;
    /*    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 1fr 1fr;*/
    /*    justify-items:center;
    align-items:center;*/
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    height: 80%;
    width: 80%;
    margin: auto !important;
    border-radius: 25px;
}



.evenColumns3-borat {
    display: grid;
    /*    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: 1fr;*/
    grid-template-rows: 0.25fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    height: 100%;
    width: 80%;
    margin: auto !important;
    border-radius: 25px;
    padding-inline: 5vw;
    padding-block: 2vh;
}


.evenColumns3-borat-b {
    display: grid;
    /*    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: 1fr;*/
    grid-template-rows:1fr 1fr;
    grid-template-columns:1fr;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    width: 80%;
    height:65vh;
    margin: auto !important;
    border-radius: 25px;
    padding-inline: 5vw;/*
    padding-block: 2vh;*/
}


/***********************************************RECARGAS *****************************/
.evenColumns3-borat-refill {
    display: grid;
    /*    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: 1fr;*/
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    width: 80%;
    height: 65vh;
    margin: auto !important;
    border-radius: 25px;
    padding-inline: 5vw; /*
    padding-block: 2vh;*/
}

.contenedor-recargas {
    width: 100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}
/**********************FIN RECARGAS *****************************************/


/********************************USUARIO CLIENTE ***********************/
.evenColumns3 {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 5fr;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    height: 100%;
    width: 80%;
    margin: auto !important;
    border-radius: 25px;
    overflow: hidden;
}
/*****************************FIN USUARIO CLIENTE *************************/


/***********************DIRECCIONES REGISTRO *********************************************/
.wrap-the-whole-thing {
    display: flex;
    width: 100%;
    height: 90vh;
    padding-block: 3vh;
    /*    background-color: rebeccapurple;*/
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.evenColumns3-client-register {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 5fr;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    height: 70vh;
    width: 80%;
    border-radius: 25px;
}

.contenedor-principal {
    width: 100%;
    height: 100%;
    display: grid; /*
    margin-left: 0 auto !important;
    margin-right: 0 auto !important;*/
    padding-left: 5vw;
    padding-right: 5vw;
}

.side-pic-addresses {
    max-height: 100%;
    background: url("../../Imagenes/rec_1-01.jpg");
    background-size: cover;
    padding: 0 !important;
    margin: 0 !important;
}

/**************************FIN DIRECCIONES REGISTRO ************************************/


.wrap-the-whole-form {
    padding-block: 10%;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr; /*
    grid-auto-flow:row;*/
    grid-template-areas:
        'one two three four'
        'five six seven eight'
        'nine ten eleven twelve';
    justify-content: center;
    align-items: center;
}

.wrap-the-whole-form-registro-cliente {
    width: 100%;
    height: max-content;
    padding-inline: 1vw;
    display: grid;
    margin-block: auto;
    grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        'one one two two'
        'three four five six'
        'seven seven eight eight'
        'nine nine ten ten'
        'eleven thirteen fourteen twelve';
    justify-content: center;
    align-items: center;
}




#item-1 {
    grid-area: one;
}

#item-2 {
    grid-area: two;
}

#item-3 {
    grid-area: three;
}

#item-4 {
    grid-area: four;
}

#item-5 {
    grid-area: five;
}

#item-6 {
    grid-area: six;
}

#item-7 {
    grid-area: seven;
}

#item-8 {
    grid-area: eight;
}

#item-9 {
    grid-area: nine;
}

#item-10 {
    grid-area: ten;
}

#item-11 {
    grid-area: eleven;
}

#item-12 {
    grid-area: twelve;
    width:100%;
    height:100%;
    margin-inline: auto;
    margin-block: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#item-13 {
    grid-area: thirteen;
}

#item-14 {
    grid-area: fourteen;
}


#item-1-registro {
    grid-area: one;
}

#item-2-registro {
    grid-area: two;
}

#item-3-registro {
    grid-area: three;
}

#item-4-registro {
    grid-area: four;
}

#item-5-registro {
    grid-area: five;
}

#item-6-registro {
    grid-area: six;
}

#item-7-registro {
    grid-area: seven;
}

#item-8-registro {
    grid-area: eight;
}

#item-9-registro {
    grid-area: nine;
}

#item-10-registro {
    grid-area: ten;
}

#item-11-registro {
    grid-area: eleven;
}

#item-12-registro {
    grid-area: twelve;
    width: 100%;
    height: 100%;
    margin-inline: auto;
    margin-block: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}


#item-13 {
    grid-area: thirteen;
}

#item-14 {
    grid-area: fourteen;
}


.submission-buttons {
    color: #201c42;
    width: 70%;
    margin-inline:auto;
    min-height:25px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7em;
    font-weight: 700;
    border-radius: 20px;
}


.casillas-formulario {
    width: 80%;
    height: 10vh;
    display: block;
    padding-block: 0.8vh;
    margin: 0 auto !important;
}

.casillas-formulario-lonesome-dropdown {
    width: 50%;
    padding-block: 0.8vh;
    margin-inline: auto;
    margin-top: 5vh;
    align-self: start;
}


.casillas-formulario-short {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    padding-inline: 3vw;
    padding-block: 0.8vh;
    margin: 0 auto !important;
}



a {
    transition: all 150ms !important;
}

    a:hover {
        text-decoration: none !important;
        color: #555 !important;
        font-weight: 400;
        transition: all 150ms !important;
    }

.casillas-formulario-short-buttons {
    padding-top: 5vh !important;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-inline: 3vw;
    padding-block: 0.8vh;
    margin: 0 auto !important;
    gap: 1vh;
}


.better-than-bs-buttons {
    background: #f7c042;
    width: auto;
    /*width:40%;*/
    padding-inline: 1vw;
    padding-block: 0.75vh;
    border-radius: 20px;
    color: black;
    border: 0 !important;
}


.better-than-bs-buttons-purchase-history {
    background: #f7c042;
    width: 100%;
    height: 60%;/*
    padding-inline: 1vw;
    padding-block: 0.15vh;*/
    border-radius: 20px;
    font-size: calc(7px + 0.390625vw);
    color: black;
    border: 0 !important;
    margin-bottom:0.25vh;
}

.casillas-formulario-registro {
    /*    width: 80%;
    height: 10vh;*/
    height: 100%;
    display: block;
    padding-block: 0.8vw;
    padding-inline: 0.5vw;
}

.casillas-agreement {
    /*    width: 80%;
    height: 10vh;*/
    width: 100%;
    height: 100%;
    display: flex;
    padding-left: 2vw;
    justify-content: center;
    align-items: start;
    padding-block: 0.8vw;
}


/*.casillas-formulario {
    width: 80%;
    height: 10vh;
    display: block;*/
    /*    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
    /*margin: 0 auto !important;
}*/


.casillas-formulario-1 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
    width: 80%;
    height: 10vh;
    display: block;
    /*    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
    margin: 0 auto !important;
}


.fondoDegradado {
    background-image: radial-gradient (at left 100%, 
                rgba(240, 240, 240, 0.993), 
                rgba(255, 255, 255, 0.822),
                rgb(255, 255, 255));
    border-radius: 20px;
    mix-blend-mode: normal;
}


.side-pic {
    max-height: 100%;
    background: url("../../Imagenes/Registro_Cliente.jpg");
    background-size: cover;
    background-position: -5vw center;
    background-repeat: no-repeat; /* Evita que se repita */
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 20px 0px 0px 20px;
}


.el-footer {
    position: relative;
    left: 0;
    right: 0;
    z-index: 999;
    bottom: 0em;
}


.dat-navbar {
    height: auto;
    position:relative;
    top:0;
    background-color: #555;
    z-index: 9999999;
}



.dat-footer {
    display:block;
    position:relative;
    width:100%;
    height:5vh;
    bottom:0;
}


.text-for-form {
    color: #201c42;
    font-size: calc(7px + 0.390625vw);
    line-height: 0.8;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.text-for-form-unlimited {
    color: #201c42;
    font-size: calc(5px + 0.390625vw);
    line-height: 0.8;

    a {
          text-decoration: underline;
      }
}

.text-for-inner-form {
    color: #201c42;
    font-size: 0.8em;
    line-height: 0.8;
    border-radius: 25px;
    padding-left: 0.8vw;
}


.text-for-inner-form-button {
    color: #201c42;
    font-size: 0.8em;
    line-height: 0.8;
    border-radius: 25px;
    text-align: center;
}



.evenColumns4 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 2fr;
    justify-content: space-evenly;
    gap: 0em;
    height: 80svh;
    width: min(90svw);
    padding-bottom: 2vh;
}



.evenColumns5 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    justify-content: space-evenly;
    gap: 0em;
    height: 80svh;
    width: min(90svw);
    padding-bottom: 2vh;
}





.margins-personalizados {
    margin-top: 5svh;
    margin-bottom: 5svh;
}

.photo-phillie {
    /*   height: 60svh;
  width: 30vw;
  padding-left: 0vw;
 */
    display: block;
    position: relative;
    object-fit: cover;
    height: 75svh;
    width: 20svw;
    /*       transform: translate(0px, -20%); */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.photo-phillie-alt {
    /*   height: 60svh;
    width: 30vw;
    padding-left: 0vw;
   */
    display: block;
    position: relative;
    object-fit: cover;
    height: 80svh;
    width: 40svw;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.photo-phillie2 {
    /*   height: 60svh;
    width: 30vw;
    padding-left: 0vw;
   */
    display: block;
    position: relative;
    object-fit: cover;
    height: 75svh;
    width: 10svw;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


/*.photo-phillie3 {
    display: block;
    position: relative;
    object-fit: cover;
    height: 102%;
    width: 10svw;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}*/

.photo-phillie3 {
    display: block;
    position: relative;
    object-fit: cover;
    height: 100%;
    width: 3%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}


/*    .card-img-topcard-img-top {
    background-color: rgb(0, 17, 255);
    opacity: 0.2;
    color: white;

   } */



/*.card-deck2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}*/



/*.card {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    z-index: 1;
}*/

/*****************************CATALOGO ******************************/
.catalogoCategoriasContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-block: 10%;
}

.card-ani {
    cursor: pointer;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: white;
    border-radius: 10px;
    /*flex: 1 0 0%;*/
    position: relative;
    width: 12svw;
    padding: 0;
    margin-left: 1svw;
    margin-right: 1svw;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, .125);
}


    .card-ani::before {
        background: linear-gradient( 130deg, transparent 0% 33%, var(--g1) 66%, var(--g2) 83.5%, var(--g3) 100% );
        background-position: 0% 0%;
        background-size: 300% 300%;
        content: "";
        height: 100%;
        left: 0px;
        position: absolute;
        top: 0px;
        transition: background-position 850ms ease;
        width: 100%;
        z-index: -1;
        opacity: 1;
        border-radius: 10px;
        mix-blend-mode: multiply;
    }

    .card-ani:hover:before {
        background-position: 80% 100%;
        transform: scale(1, 1);
    }



.card-footer-shop {
    border-radius: 0 0 10px 10px !important;
    text-align: center;
    padding-block: 5%;
    background-color: #f7c045 !important;
    font-weight:800 !important;
    color: #201c42;
    font-size: calc(14px + 0.390625vw) !important;
}

/*****************************FIN CATALOGO ******************************/

/*****************************CATALOGO DETALLE ***********************************/
.catalogoDetalleContainer {
    display: flex;
    flex-wrap: wrap;
    /*    grid-template-rows: 0.25fr 1fr 1fr 1fr;
    grid-template-columns: 1fr;*/
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    width: 80%;
    margin: auto !important;
    border-radius: 25px;
    padding-inline: 5vw;
    padding-block: 2vh;
}

.contenedor-principal-no-pad {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 15px 0px;
}

.contenedorImagenDetalles {
    width: 15%;
    display: flex;
    padding: 0px 10px;
}

.eye-sore {
    background-color: #c4c4c4;
    width: 100%;
    height: 100%;
    margin: 15px;
    color: #556;
}


.contendorDetalleProducto {
    display: flex;
    width: 60%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: start;
    padding: 0px 2svw;
}

.contenedorBotones {
    display: flex;
    width: 25%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0px 5%;
    row-gap: 15px;
}
/*****************************FIN CATALOGO DETALLE***********************************/



.prueba {
    font-weight: 100;
    font-size: calc(8px + 0.390625vw);
    border-radius: 5px;
    color: rgb(0, 0, 0);
}

/* VOLVER AQUI PARA PONER EL ESTILO DE ACTIVE CON PSEUDO CLASSES
 */

.activado {
    background-color: #F7C045;
    font-weight: 800;
    padding-left: 5px;
    color: white;
}




.form-group {
    margin-left: 20px;
    margin-right: 20px;
}

.fa-3x {
    vertical-align: middle;
}



.ancho-standard {
    max-width: 40vw;
}


.dropdown-menu {
    display: block;
    width: 40vw;
}

.dropdown-item {
    display: block;
    width: 40vw;
}



.ancho-tabla {
    width: 40vw;
}

.container .form-outline .form-control {
    /* max-height: 20px; */
/*    font-size: calc(4px + 0.390625vh) !important;*/
font-size:0.5em;
    color: dimgray;
}

.anchors {
    opacity: 0;
    line-height: normal;
}

.container {
    height: max-content;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}







/* .btn {
  background-color: white;
  padding: 1em 1.5em;
  border-radius: 0.5rem;
  text-decoration: none;
  i {
    padding-right: 0.3em;
  }
}
 */

/*   borrar_si_no_sirve_modal */



/*   borrar_si_no_sirve_modal */


/*and (resolution: 1.25dppx)*/



@media (resolution: 1.25dppx) {
    .dynamic-height-container {
        max-height:300px;
    }
}




/****************************************MEDIA QUERIE MOBILE PEQUENO ***********************************/
@media (max-width: 376px) {

    body {
        min-height: 100vh;
        background-size: cover;
        background-repeat: no-repeat;
        font-family: 'Montserrat', sans-serif;
        overflow-y: scroll;
    }

    .evenColumns3-client-register {
        height: auto !important;
    }


    .side-pic {
        min-height: 100%;
        background: url("../../Imagenes/Registro_Cliente.jpg");
        background-size: cover;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 20px 0px 0px 20px;
    }


    /***************************USUARIO CLIENTE MOBILE PEQUENO*******************/
    .evenColumns3 {
        grid-template-rows: 1fr 5fr;
        grid-template-columns: 1fr;
    }
    /************************FIN USUARIO CLIENTE MOBILE PEQUENO********************/

    /*************************UBICACIONES CLIENTE MOBILE PEQUENO *****************************/

    .titulo-necio{
        width: 70%;
        font-size: 10px;
    }

    /*************************FIN UBICACIONES CLIENTE MOBILE PEQUENO *****************************/

    /***********************DIRECCIONES REGISTRO MOBILE PEQUENO ********************/
    .wrap-the-whole-thing {
        margin: 0 auto !important;
        padding: 0 auto !important;
    }


    .evenColumns3-client-register {
        grid-template-rows: 1fr 5fr;
        grid-template-columns: 1fr;
        overflow: hidden;
    }

    .side-pic-addresses {
        background-size: cover;
        background-position: center;
        border-radius: 0px;
    }

    .casillas-formulario-lonesome-dropdown {
        width: 70%;
    }

    .text-for-form {
        font-size: 10px !important;
    }

    /**************************FIN DIRECCIONES REGISTRO MOBILE PEQUENO************************************/

    /****************************CATALOGO MOBILE PEQUENO********************************/
    .card-ani {
        position: relative;
        width: 100%;
        z-index: 1;
    }

    .photo-phillie2 {
        display: block;
        position: relative;
        top: 0svh;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10svh;
        width: 90svw;
        object-fit: cover;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }


    .evenColumns2 {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
        height: fit-content;
    }

    /**************************** FIN CATALOGO MOBILE PEQUENO********************************/
    /*****************************CATALOGO DETALLE MOBILE PEQUENO ***********************************/
    .catalogoDetalleContainer {
        width: 100%;
    }

    .contenedorImagenDetalles {
        width: 100%;
        background-color: transparent;
        margin: 0px;
        padding: 0px;
    }

        .contenedorImagenDetalles img {
            object-fit: contain;
            background-color: transparent;
        }

    .eye-sore {
        margin: 0px;
    }

    .contendorDetalleProducto {
        width: 100%;
        padding: 5svw 5svw;
    }

    .contenedorBotones {
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0px;
        place-content: space-evenly;
    }

        .contenedorBotones .btn-primary {
            font-size: 13.33px !important;
            padding: 10px 20px;
        }

        .contenedorBotones .btn-secondary {
            font-size: 13.33px !important;
            padding: 10px 20px;
        }
    /*****************************FIN CATALOGO DETALLE MOBILE PEQUENO***********************************/
    /*****************************MIS COMPRAS MOBILE PEQUENO *************************/

    .search-party {
        width: 100%;
    }

    .formulario-contenedor {
        display: flex;
        gap: 10px;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .casillas-formulario-purchase {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }


    .botones-contenedor {
        width: 100%;
    }

    .casillas-formulario-purchase-buttons {
        padding-top: 2svh;
        width: 45%;
    }

    .dis-inputs-be-weird {
        width: 100%;
    }
    /************************************ FIN MIS COMPRAS MOBILE PEQUENO *************************/

    /***********************************************RECARGAS MOBILE PEQUENO *****************************/
    .evenColumns3-borat-refill {
        height: auto !important;
        padding-top: 5svh;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        width: 80%;
    }

    .contenedor-payment-staging {
        margin-bottom: 0px !important;
    }

    .recargaSaldo {
        height: auto !important;
        padding: 5svh 0px;
    }
    /**********************FIN RECARGAS  MOBILE PEQUENO *****************************************/

    /**********************************PAGAR MOBILE PEQUENO ***********************************/
    .evenColumns3-payout {
        display: flex;
        flex-wrap: wrap;
        padding: 5svh 15px
    }

    .responsiveTabla {
        width: inherit;
        padding-bottom: 5svh;
    }

        .responsiveTabla .title-billing .h1, h1 {
            font-size: 2.2rem !important;
        }

        .responsiveTabla .custom-paragraph-2 {
            font-size: 15px !important;
        }

    .mein-padding .table .thead-light th {
        font-size: 11px !important;
    }

    .card-header .custom-paragraph-2 {
        font-size: 15px !important;
    }

    .text-for-form-unlimited {
        font-size: 10px !important;
        a{
            font-size: 10px !important;
            text-decoration: underline;
            }
}
/**********************************FIN PAGAR MOBILE PEQUENO ***********************************/
.text-for-form { /*
        color: aliceblue;*/
    font-size: calc(7px + 0.390625vw);
}

    .text-for-inner-form {
        color: #201c42;
        font-size: 0.5em;
    }

    .casillas-formulario {
        width: 80%;
/*        height: 100%;*/
        display: block;
        /*    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
        margin: 0 auto !important;
    }


    .wrap-the-whole-shop {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-auto-flow: column;
    }



    .wrap-the-whole-form {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr; /*
    grid-auto-flow:row;*/
        /*        grid-template-areas:
            'empty-a empty-b empty-c empty-d'
            'one two three four'
            'five six seven eight'
            'nine ten eleven twelve'
            'empty-e empty-f empty-g empty-h';*/
        grid-template-areas:
            'empty-a empty-b'
            'one two'
            'three four'
            'five six'
            'seven nine'
            'ten eleven'
            'eight twelve'
            'empty-c empty-d';
        /*    background-color: rebeccapurple;*/
        justify-content: center;
        align-items: center;
        padding-block: 0px !important;
    }
}


/****************************************FIN MEDIA QUERIE MOBILE PEQUENO ***********************************/


/****************************MEDIA QUERIE TELEFONO ******************************************************/
@media (min-width: 376px) and (max-width: 765px) {

    .casillas-formulario {
        width: 80%;
        /*height: 100%;*/
        display: block;
        margin: 0 auto !important;
    }

    .evenColumns3-client-register {
        height: auto !important;
    }

    .wrap-the-whole-form {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'empty-a empty-b'
            'one two'
            'three four'
            'five six'
            'seven nine'
            'ten eleven'
            'eight twelve'
            'empty-c empty-d';
        padding-block: 0px !important;
    }

    .side-pic {
        max-height: 100%;
        background: url("../../Imagenes/Registro_Cliente.jpg");
        background-size: cover;
        background-position: 30% 70%; /* 30% desde la izquierda, 70% desde arriba */
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 20px 0px 0px 0px;
    }


    .selec-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 0.8em;
        color: #b9b9b9;
        margin-bottom: 2em;
    }



    .selec-out {
        margin: 0em;
        margin-bottom: 0.75em;
    }



    div .btn {
        font-weight: 600;
        margin-left: 0em;
        margin-top: 0em;
    }

    .container-pers {
        height: fit-content;
    }

    /***************************USUARIO CLIENTE MOBILE *******************/
    .evenColumns3 {
        grid-template-rows: 1fr 5fr;
        grid-template-columns: 1fr;
    }
    /************************FIN USUARIO CLIENTE MOBILE********************/

    /*************************UBICACIONES CLIENTE MOBILE *****************************/

    .titulo-necio {
        width: 70%;
        font-size: 12px;
    }

    /*************************FIN UBICACIONES CLIENTE MOBILE  *****************************/

    /***********************DIRECCIONES REGISTRO MOBILE*********************************************/

    .wrap-the-whole-thing {
        margin: 0 auto !important;
        padding: 0 auto !important;
    }

    .evenColumns3-client-register {
        grid-template-rows: 1fr 5fr;
        grid-template-columns: 1fr;
        overflow: hidden;
    }

    .side-pic-addresses {
        background-size: cover;
        background-position: center;
        border-radius: 0px;
    }
    .casillas-formulario-lonesome-dropdown{
        width: 70%;
    }
    .text-for-form {
        font-size: 12px !important;
    }
    /**************************FIN DIRECCIONES REGISTRO MOBILE************************************/
    /****************************CATALOGO MOBILE********************************/
    .card-ani {
        position: relative;
        width: 45%;
        z-index: 1;
    }

    .photo-phillie2 {
        display: block;
        position: relative;
        top: 0svh;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10svh;
        width: 90svw;
        object-fit: cover;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    /**************************** FIN CATALOGO MOBILE********************************/

    /*****************************CATALOGO DETALLE MOBILE ***********************************/
    .catalogoDetalleContainer{
        width: 100%;
    }
    .contenedorImagenDetalles {
        width: 30%;
        background-color: transparent;
        margin: 0px;
        padding: 0px;
    }

    .contenedorImagenDetalles img {
        object-fit: contain;
        background-color: transparent;
    }
    .eye-sore {
        margin: 0px;
    }

    .contendorDetalleProducto {
        width: 70%;
        padding: 5svw 5svw;
    }

    .contenedorBotones {
        display: flex;
        width: 100%;
        height: 100%;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0px;
        place-content: space-evenly;
    }

    .contenedorBotones .btn-primary {
        font-size: 13.33px !important;
        padding: 10px 20px;
     }

    .contenedorBotones .btn-secondary {
        font-size: 13.33px !important;
        padding: 10px 20px;
     }
    /*****************************FIN CATALOGO DETALLE MOBILE***********************************/


    /*****************************MIS COMPRAS MOBILE *************************/

    .search-party {
        width: 100%;
    }

    .formulario-contenedor {
        display: flex;
        gap: 10px;
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .casillas-formulario-purchase {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items:center;
    }


    .botones-contenedor {
        width: 100%;
    }

    .casillas-formulario-purchase-buttons {
        padding-top: 2svh;
        width: 45%;
    }

    .dis-inputs-be-weird {
        width: 200px;
    }
    /************************************ FIN MIS COMPRAS MOBILE *************************/

    /***********************************************RECARGAS MOBILE *****************************/
    .evenColumns3-borat-refill {
        padding-top: 5svh;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        width: 80%;
    }

    .contenedor-payment-staging {
        margin-bottom: 0px !important;
    }


    .recargaSaldo {
        height: auto !important;
        padding: 5svh 0px;
    }

    .recargaContenido{
        height: auto !important;
    }
    /**********************FIN RECARGAS  MOBILE*****************************************/

    /**********************************PAGAR MOBILE***********************************/
    .evenColumns3-payout {
        display: flex;
        flex-wrap: wrap;
        padding: 5svh 15px
    }

    .responsiveTabla {
        width: inherit;
        padding-bottom: 5svh;
    }

    .responsiveTabla .title-billing .h1, h1 {
        font-size: 2.2rem !important;
    }

    .responsiveTabla .custom-paragraph-2{
        font-size: 15px !important;
    }

    .mein-padding .table .thead-light th {
        font-size: 11px !important;
    }

    .card-header .custom-paragraph-2 {
        font-size: 15px !important;
    }

    .text-for-form-unlimited {
        font-size: 10px !important;

        a{
            font-size: 10px !important;
            text-decoration: underline;

         }
    }
    /**********************************FIN PAGAR MOBILE***********************************/
    .fase-1 {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 90svw;
        z-index: -1;
        opacity: 0;
        animation: fadeinRIBBONITEMS ease 4.25s;
        animation-delay: 2s;
    }

    .fase-2 {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 90svw;
        z-index: -1;
        opacity: 0;
        animation: fadeinRIBBONITEMS ease 4.25s;
        animation-delay: 2s;
    }

    .fase-3 {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 90svw;
        z-index: -1;
        opacity: 0;
        animation: fadein ease 5.75s;
        animation-delay: 0.75s;
    }

    .fase-4 {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 90svw;
        z-index: -1;
        opacity: 0;
        animation: fadein ease-in 5s;
        animation-delay: 0.85s;
    }

    .fase-5 {
        position: absolute;
        top: 20%;
        left: 5%;
        width: 90svw;
        z-index: -1;
        opacity: 0;
        animation: fadeinML ease-out 5s;
        animation-delay: 1.5s;
    }

    .fase-6 {
        position: absolute;
        top: 0%;
        left: 0%;
        height: 100svh;
        width: 100svw;
        object-fit: cover;
        z-index: -2;
        opacity: 0;
        animation: fadeinBG ease-in-out 6s;
    }

    .hero-text-home {
        transform: translate(0,0);
    }

    .card {
        width: 100%;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .card-body {
        width: 50vw;
        padding-left: 0px;
        padding-right: 0px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .evenColumns4 {
        display: grid;
        grid-auto-flow: row;
        grid-auto-columns: 0fr;
        gap: 0em;
        height: 100svh;
        width: min(90svw);
    }

    .fondoBacan {
        background-position: 28% 0%;
    }

    .photo-phillie {
        /* margin-top: 0svh;
  margin-bottom: 0svh;
  height: 20svh;
  width: 90svw; */
        display: block;
        position: relative;
        top: 0svh;
        left: 0;
        right: 0;
        bottom: 0;
        height: 5svh;
        width: 90svw;
        object-fit: cover;
        /*       transform: translate(0px, -20%); */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }



    .evenColumns {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
    }


    .evenColumns2 {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
        height: fit-content;
    }


    .evenColumns5 {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
        height: auto;
    }

    .photo-phillie3 {
        display: block;
        position: relative;
        object-fit: cover;
        height: 10svh;
        width: 90svw;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .photo-phillie-alt {
        display: block;
        position: relative;
        top: 0svh;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10svh;
        width: 90svw;
        object-fit: cover;
        /*       transform: translate(0px, -20%); */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }


    .ancho-standard {
        max-width: 80vw;
    }

    .fondoResto {
        height: 100svh;
        background-position: 50.5% 100%;
    }

    .el-footer {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 999;
    }
}
/****************************FIN MEDIA QUERIE TELEFONO ******************************************************/


/****************************************MEDIA QUERIE TABLET VERTICAL ***********************************/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    body {
        min-height: 100vh;
    }

    .wrap-the-whole-form {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        /*    grid-auto-flow:row;*/
        /*        grid-template-areas:
            'empty-a empty-b empty-c empty-d'
            'one two three four'
            'five six seven eight'
            'nine ten eleven twelve'
            'empty-e empty-f empty-g empty-h';*/
        grid-template-areas:
            'one two'
            'three four'
            'five six'
            'seven nine'
            'ten eleven'
            'eight twelve';
        /*    background-color: rebeccapurple;*/
        justify-content: center;
        align-items: center;
        /*    padding:10em;*/ /*
        margin: 0 auto !important;
        padding: 0 auto !important;
        overflow: hidden;*/
    }


    .casillas-formulario {
        width: 80%;
        height: 15%;
        margin: 0 !important;
        padding: 0 !important;
        display: block;
        /*    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;*/
        margin: 0 auto !important;
    }



    .wrap-the-whole-thing {
        display: flex;
        width: 100%;
        height: 90vh;
        /*    background-color: rebeccapurple;*/
        justify-content: center;
        align-items: center;
        margin: 0 auto !important;
        padding: 0 auto !important;
        overflow: hidden;
    }

    .wrap-the-whole-thing-registro-cliente {
        display: flex;
        width: 100%;
        height: 90vh;
        /*    background-color: rebeccapurple;*/
        justify-content: center;
        align-items: center;
        margin: 0 auto !important;
        padding: 0 auto !important;
        overflow: hidden;
    }

    /******************** CATALOGO TABLET VERTICAL ******************/
    .catalogoCategoriasContainer {
        row-gap: 15px;
        justify-content: start;
    }

    .card-ani {
        width: 30%;
    }


    .evenColumns2 {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
        height: auto;
        margin-bottom: 1svh;
    }
    /******************** FIN  CATALOGO TABLET ***************/

    /*****************************CATALOGO DETALLE TABLET VERTICAL***********************************/
    .catalogoDetalleContainer {
    }

    .contenedor-principal-no-pad {
    }

    .contenedorImagenDetalles {
        width: 20%;
        margin: 0px;
    }


    .contendorDetalleProducto {
        display: flex;
        width: 60%;
        height: 100%;
        flex-wrap: wrap;
        justify-content: start;
        padding: 0px 2svw;
    }

    .contenedorBotones {
        width: 20%;
        padding: 0px;
    }
    /*****************************FIN CATALOGO DETALLE TABLET VERTICAL***********************************/

    /*****************************MIS COMPRAS TABLET VERTICAL *************************/

    .search-party {
        width: 100%;
    }

    .formulario-contenedor {
        display: flex;
        gap: 10px;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .casillas-formulario-purchase {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }


    .botones-contenedor {
        width: 50%;
    }

    .casillas-formulario-purchase-buttons {
        padding-top: 2svh;
        width: 45%;
    }

    .dis-inputs-be-weird {
        width: 200px;
    }
    /************************************ FIN MIS COMPRAS TABLET VERTICAL *************************/
    /**********************************PAGAR MOBILE TABLET VERTICAL ***********************************/
    .evenColumns3-payout {
        display: flex;
        flex-wrap: wrap;
        padding: 5svh 15px
    }

    .responsiveTabla {
        width: inherit;
        padding-bottom: 5svh;
    }

    .mein-padding .table .thead-light th {
        font-size: 12px !important;
    }

    .responsiveTabla .title-billing .h1, h1 {
        font-size: 2.2rem !important;
    }

    .responsiveTabla .custom-paragraph-2 {
        font-size: 15px !important;
    }

    .card-header .custom-paragraph-2 {
        font-size: 15px !important;
    }

    .text-for-form-unlimited {
        font-size: 10px !important;
        a

{
    font-size: 10px !important;
    text-decoration: underline;
}

}
    /**********************************FIN PAGAR MOBILE TABLET VERTICAL ***********************************/
    .evenColumns3-registro {
        display: grid;
        /*    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 1fr 1fr;*/
        /*    justify-items:center;
    align-items:center;*/
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 5fr;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        height: 80%;
        width: 80%;
        margin: auto !important;
        border-radius: 25px;
    }


    .evenColumns3 {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 5fr;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        height: 80%;
        width: 80%;
        margin: auto !important;
        border-radius: 25px;
    }

.side-pic {
    max-height: 100%;
    width: 100%;
    background: url("../../Imagenes/Registro_Cliente.jpg");
    background-size: cover; /*
        padding: 0 !important;
        margin: 0 !important;*/
    border-radius: 20px 0px 0px 20px;
}

    .container {
        height: 75%;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0svh;
    }



    .fase-1 {
        position: absolute;
        top: 15%;
        left: 10%;
        width: 80svw;
        z-index: -1;
        opacity: 0;
        animation: fadeinRIBBONITEMS ease 4.25s;
        animation-delay: 2s;
    }

    .fase-2 {
        position: absolute;
        top: 15%;
        left: 10%;
        width: 80svw;
        z-index: -1;
        opacity: 0;
        animation: fadeinRIBBONITEMS ease 4.25s;
        animation-delay: 2s;
    }

    .fase-3 {
        position: absolute;
        top: 15%;
        left: 10%;
        width: 80svw;
        z-index: -1;
        opacity: 0;
        animation: fadein ease 5.75s;
        animation-delay: 0.75s;
    }

    .fase-4 {
        position: absolute;
        top: 15%;
        left: 10%;
        width: 80svw;
        z-index: -1;
        opacity: 0;
        animation: fadein ease-in 5s;
        animation-delay: 0.85s;
    }

    .fase-5 {
        position: absolute;
        top: 15%;
        left: 10%;
        width: 80svw;
        z-index: -1;
        opacity: 0;
        animation: fadeinML ease-out 5s;
        animation-delay: 1.5s;
    }

    .fase-6 {
        position: absolute;
        top: 0%;
        left: 0%;
        height: 100svh;
        width: 100svw;
        object-fit: cover;
        z-index: -2;
        opacity: 0;
        animation: fadeinBG ease-in-out 6s;
    }

    .hero-text-home {
        transform: translate(0,0);
    }

    .ancho-standard {
        max-width: 70vw;
    }

    .no-veo-el-fondo {
        padding-top: 4vh;
        padding-bottom: 0px;
    }

    .fondoBacan {
        background-position: 20% 0%;
    }

    .fondoResto {
        background-position: 50.5% 0%;
    }

    .fs-1 {
        font-size: 16px;
    }

    .prueba {
        background-color: transparent;
    }

    .heroes {
        justify-content: center;
        align-items: end;
    }

    .aVer {
        transform: translate(0px, 0px);
        background-image: radial-gradient(at center, rgba(0, 0, 0, 0.658), rgba(0, 0, 0, 0.055),rgba(0, 0, 0, 0.001));
        mix-blend-mode: normal;
    }

    .btn-primaryo {
        margin-left: 0px;
    }

    .photo-phillie {
        /* margin-top: 0svh;
      margin-bottom: 0svh;
      height: 20svh;
      width: 90svw; */
        display: block;
        position: relative;
        top: 0svh;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10svh;
        width: 90svw;
        object-fit: cover;
        /*       transform: translate(0px, -20%); */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .evenColumns {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
    }

    .fitted-paragraph {
        /*     width: max(65vw); */
        padding-bottom: 0vh;
        margin-left: 0vw;
        margin-right: 0vw;
    }

    .margins-personalizados {
        margin-top: 5svh;
        margin-bottom: 0svh;
    }

    .custom-paragraph {
        font-size: calc(12px + 0.390625vw);
        font-weight: 200;
        line-height: 1.2; /* 
      width: 70vw; */
    }


/*
    .evenColumns3 {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
        height: auto;
    }*/

    .evenColumns4 {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
        height: auto;
    }

    .evenColumns5 {
        grid-auto-flow: row;
        gap: 0em;
        grid-auto-rows: 0fr;
        height: auto;
    }

    .photo-phillie2 {
        /* margin-top: 0svh;
      margin-bottom: 0svh;
      height: 20svh;
      width: 90svw; */
        display: block;
        position: relative;
        top: 0svh;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10svh;
        width: 90svw;
        object-fit: cover;
        /*       transform: translate(0px, -20%); */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .photo-phillie3 {
        display: block;
        position: relative;
        object-fit: cover;
        height: 10svh;
        width: 90svw;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }

    .photo-phillie-alt {
        display: block;
        position: relative;
        top: 0svh;
        left: 0;
        right: 0;
        bottom: 0;
        height: 10svh;
        width: 90svw;
        object-fit: cover;
        /*       transform: translate(0px, -20%); */
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 0px;
        border-bottom-left-radius: 0px;
    }


    .dropdown-menu {
        display: block;
        width: 70vw;
    }

    .dropdown-item {
        display: block;
        width: 70vw;
    }

    .ancho-tabla {
        width: 70vw;
    }

    .anchors {
        opacity: 0;
        line-height: 5;
    }

    .el-footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
}
/**************************************** FIN MEDIA QUERIE TABLET ***********************************/



.difuminado {
    background-color: rgba(0,0,0,0.7) !important;
}

.my-custom-style {
    font-size: 40px; /* Tamaño de fuente personalizado */
    font-stretch: expanded;
    font-weight: bold;/*
    font-family: Comic Sans MS;*/
}

.my-button {
    width: 35px; /* Ancho personalizado */
    height: 35px; /* Altura personalizada */
    font-size: 16px; /* Tamaño de fuente personalizado */
    justify-content: center;
    text-align: center;
    justify-items: center;
    border-radius: 25px;
}





@media (resolution: 1dppx) {
    .text-for-form { /*
        color: aliceblue;*/
        font-size: calc(7px + 0.390625vw);
    }

    .text-for-inner-form {
        color: #201c42;
        font-size: 0.9em;
    }
}

@media (resolution: 1.25dppx) {

    .text-for-form { /*
        color: aliceblue;*/
        font-size: calc(7px + 0.390625vw);
    }

    .text-for-inner-form {
        color: #201c42;
        font-size: 0.7em;
    }


    .wrap-the-whole-thing {
        display: flex;
        width: 100%;
        height: 90vh;
        /*    background-color: rebeccapurple;*/
        justify-content: center;
        align-items: center;
        margin: 0 auto !important;
        padding: 0 auto !important;
        overflow: hidden;
    }


    /*.evenColumns3 {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr 1fr 1fr 1fr;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        gap: 1em;*/
    /*    padding:3em;*/
    /*max-height: max-content;
        max-width: 70%;
        margin: 0 auto !important;
        border-radius: 25px;*/
    /*    padding-bottom: 2vh;
    padding-right: auto;
    padding-left: auto;*/
    /*}*/


    .fondoDegradado {
 /*       background: yellow;*/ /*
        backdrop-filter: blur(10px);*/
    }


    .side-pic {
        max-height: 100%;
        background: url("../../Imagenes/Registro_Cliente.jpg");
        background-size: cover;
        padding: 0 !important;
        margin: 0 !important;
        background-position: -5vw center; /* Mueve la imagen a la izquierda dependiendo del ancho de la ventana */
        background-repeat: no-repeat;
        background-clip: padding-box;
        padding: 10em;
    }

    .el-footer {
        position: relative;
        left: 0;
        right: 0;
        z-index: 999;
        bottom: -4em;
    }
}