@import url('fonts.css');
/* Elementos */
/* Seccion */

/* body .body-inner{
    height: 100vh !important;
    overflow-y:hidden;
} */


.input-group-increment {
    margin-top: 10px;
    display: flex;
    align-items: center !important;
}

.offcanvas-body {
    overflow-y: scroll !important;
    background-color: transparent !important;
}

.input-group-increment input {
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 20px;
    width: 80px;
    text-align: center;
}

.input-group-increment.btn-group {
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    padding: 0 !important;
    color: black !important;
    transition: all 0.5s ease;
    cursor: pointer;
}

.input-group-increment.btn-group span {
    padding: 5px !important;
    margin: 0 auto;
    font-size: 15px;
}

.input-group-increment.btn-group:hover {
    cursor: pointer;
}

.scroll-no {
    height: 90vh !important;
    overflow-y: hidden;
}

.img-bolsa {
    border-radius: 20px;
    box-shadow: 10px 10px 10px #ddd;
}

.text-yellow {
    color: #F3BF00 !important;
}


.restricciones-swal {
    width: 100% !important;
}

.compra {
    transition: .5s;
}

.compra:hover {
    background-color: #000 !important;
    border: none !important;
    color: #fff !important;
    zoom: 1.1;
}

span.select2 {
    padding: 0;
    width: 100% !important;
    border: none;

}

.text-insta {
    color: #950089;
}

.text-green {
    color: #076700;
}

.text-facebook {
    color: #001370;
}

.video-mantenimiento {
    width: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

.vh-25 {
    height: 27.5vh;
}

.vh-50 {
    height: 55vh;

}

.titulo-mant {
    position: fixed;
    width: 100%;
}

.video-mantenimiento video {
    object-fit: cover;

}

.position-sm {
    object-position: 0px -130px !important
}

/*   .modal{
    z-index: 9 !important;
  } */
.z-arribototota {
    z-index: 99 !important;
}

.lh-1 {
    line-height: 1 !important;
}

/* Enlaces */
.text-underline {
    text-decoration: underline !important;
    color: #F3BF00 !important;
}

#oculto a {
    text-decoration: none !important;
}

/* Encabezados */
#oculto h2 {
    font-size: 5.5vh !important;
}

/* Texto */
#oculto p {
    text-align: justify
}

#oculto span {
    line-height: 1;
}

#oculto .il-1 {
    line-height: 1;
}

@media (max-width:500px) {
    #card-element.home iframe#clip-iframe {
        zoom: .6;
    }
}



/* minimo */
@media (max-width:575px) {

    .titulo-mant-text {
        height: 40vh;
        background-image: url('../../images/sitio-web/esperanos.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .titulo-mant {
        top: 40vh;
    }

    .animacion-servicios img {
        height: 100px;
    }

    .ideal {
        width: 150px;
    }

    .faqs-text,
    .faqs-titulo {
        font-size: 5vw !important;
    }

    .ideal-sm {
        width: 100%;
    }

    .text-sm {
        font-size: 3.5vw !important;
        line-height: 1 !important;
    }

    .text-mid {
        font-size: 5vw !important;
        line-height: 1 !important;
    }

    .text-mid-big {
        font-size: 10vw !important;
        line-height: 1 !important;
    }

    .text-big {
        font-size: 7vw !important;
        line-height: 1 !important;
    }

    .text-mega {
        font-size: 10vw !important;
        line-height: 1 !important;
    }

    .text-giga {
        font-size: 13vw !important;
        line-height: 1 !important;
    }
}

/* s-sm */
@media (min-width:576px) {
    .titulo-mant-text {
        height: 40vh;
        background-image: url('../../images/sitio-web/esperanos.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .titulo-mant {
        top: 40vh;
    }

    .ideal {
        width: 120px;
    }

    .ideal-sm {
        width: 100%;
    }

    .faqs-text,
    .faqs-titulo {
        font-size: 5vw !important;
    }

    .text-sm {
        font-size: 2.5vw;
        line-height: 1 !important;
    }

    .gif2 {
        width: 60%;
    }

    /* textos */

    .text-mid {
        font-size: 3vw !important;
        line-height: 1 !important;
    }

    .text-mid-big {
        font-size: 4vw !important;
        line-height: 1 !important;
    }

    .text-big {
        font-size: 5vw !important;
        line-height: 1 !important;
    }

    .text-mega {
        font-size: 7vw !important;
        line-height: 1 !important;
    }

    .text-giga {
        font-size: 8vw !important;
        line-height: 1 !important;
    }
}

/* s-md */
@media (min-width:768px) {
    .titulo-mant {
        top: 30vh;
    }

    .faqs-text,
    .faqs-titulo {
        font-size: 3.5vw !important;
    }

    .text-mid {
        font-size: 3vw !important;
        line-height: 1 !important;
    }

    .text-big {
        font-size: 5vw !important;
        line-height: 1 !important;
    }

    .text-mega {
        font-size: 6vw !important;
        line-height: 1 !important;
    }

    .text-giga {
        font-size: 8vw !important;
        line-height: 1 !important;
    }
}

/* s-lg */
@media (min-width:992px) {

    .pt-xs-0 {
        padding-top: 12px !important;
    }

    .flickity-button-icon {
        font-weight: bold;
    }

    .faqs-text,
    .faqs-titulo {
        font-size: 3vw !important;
    }

    .btn-login-m {
        display: none !important;
    }

    /* textos */
    .video-window {
        padding: 50px !important;
    }

    .text-mid {
        font-size: 3vw !important;
        line-height: 1 !important;
    }

    .text-big {
        font-size: 5vw !important;
        line-height: 1 !important;
    }

    .text-mega {
        font-size: 6vw !important;
        line-height: 1 !important;
    }

    .text-giga {
        font-size: 8vw !important;
        line-height: 1 !important;
    }
}

/* s-xl */
@media (min-width:1200px) {
    .titulo-mant-text {
        height: 20vh;
        background-image: url('../../images/sitio-web/proximamente.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .swal-wide {
        width: 1000px !important;
    }

    .servicios-s img {
        width: 100px;
    }

    .faqs-text,
    .faqs-titulo {
        font-size: 2.2vw !important;
    }

    .servicios-s {
        height: 370px !important;
        padding: 20px !important;
    }

    /* textos */
    .text-mid {
        font-size: 2.5vw !important;
        line-height: 1 !important;
    }

    .text-big {
        font-size: 4vw !important;
        line-height: 1 !important;
    }

    .text-mega {
        font-size: 5vw !important;
        line-height: 1 !important;
    }

    .text-giga {
        font-size: 8vw !important;
        line-height: 1 !important;
    }
}

/* s-xxl */
@media (min-width:1400px) {

    .faqs-text,
    .faqs-titulo {
        font-size: 1.5vw !important;
    }

    /* textos */

    .text-mid {
        font-size: 2vw !important;
        line-height: 1 !important;
    }

    .text-big {
        font-size: 4vw !important;
        line-height: 1 !important;
    }

    .text-mega {
        font-size: 5vw !important;
        line-height: 1 !important;
    }

    .text-giga {
        font-size: 6vw !important;
        line-height: 1.5 !important;
    }
}

canvas.confetti {
    overflow-y: hidden;
    overflow-x: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}


.faqs-titulo {
    width: 100%;
}

.faqs-text span b {
    font-weight: bold !important;
}

.video-fxf {
    height: 100vh;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.video-fixed {
    position: fixed !important;
    top: 0px;
}

.wo-bg {
    height: 100vh !important;
}

.tx-none {
    text-decoration: none !important;
}

.btn-r {
    border-radius: 5px !important;
}

.btn-y-bbto:hover {
    color: #fff !important;
    background-color: #000 !important;
    border: none !important;
}

.h-text-yellow:hover {
    color: #F3BF00 !important;
}

.h-text-white:hover {
    color: #fff !important;
}

.h-text-black:hover {
    color: #000 !important;
}

.btn-b-bbto:hover {
    background-color: #F3BF00 !important;
    color: #000 !important;
    border: none !important;
}

.btn-login {
    background-color: #fff !important;
    border-radius: 200px;
}

/* End: Elementos */

/* Extras */
.loader {
    margin-top: 50%;
}

.dropdown-menu {
    margin-top: 0px !important;
}


.animado {
    position: relative;
    display: flex;
}

.over {
    z-index: 10;
}

.body-oculto {
    display: none;
}

.sube-volumen {
    border-radius: 100px;
    width: 100px;
    position: absolute;
    top: 10px;
    right: 5px;
}

.sube-volumen img {
    border-radius: 100px;
    width: 50px;
    height: 50px;
    box-shadow: 5px 5px 10px #ddd;
}

.social-mail:hover {
    color: #fff;
    background-color: #F3BF00;
}

#btn-bb {
    border-radius: 5px !important;
}

/* Especiales */

/* video */

.video-mm {
    min-height: 500vh;
    background-color: #000;
}

.video-top {
    position: fixed !important;
    top: 0 !important;
}

.video-end {
    position: fixed !important;
    bottom: 0 !important;
}

#videobg {
    min-height: 100vh !important;
    width: 100%;
}

.transicion {
    position: fixed;
    top: 80px;
    background-color: #000;
    width: 100%;
    height: 100vh;
    z-index: 9999999;
}

.es-trans {
    opacity: 0;
}

.es-btn-l {
    left: -10vw;
}

.es-btn-r {
    right: 10vw;
}

.escena-1 {
    width: 100%;
    position: fixed;
    top: 120px;
    left: 5%;
}

.escena-2 {
    position: fixed;
    top: 120px;
    right: -100%;
}

.escena-3 {
    width: 80%;
    position: fixed;
    top: 120px;
    left: -100%;

}

/* Servicios */
.cuadrado {
    width: 100px;
    height: 100px;
    margin: 5px 5px 5px 5px;
    background-color: #000;

}

.desliza {
    position: fixed;
    top: 100px;
    width: 100%;
}

.desliza div p {
    font-size: 25px !important;
}

.desliza img {
    width: 50px !important;
    ;
}

.video-servicios {
    border-radius: 20px;
    box-shadow: 10px 10px 10px #dddddd;
    border: #dddddd solid 2px;
}

.video-subito-partes {
    border-radius: 20px;
}

.video-subito-partes .border {
    border: #dddddd solid 2px;
}

.trayectoria {
    width: 100%;
}

.servicios-card {
    width: 500px;
    height: 200px;
    margin: 5px 5px 5px 5px;
    background-color: #F3BF00;
    border-radius: 20px;
    box-shadow: 10px 10px 10px rgba(78, 78, 78, 0.426);
}

.servicios-card:hover {
    transition: .5s;
    background-color: #dddddd;
    scale: 1.05;
    cursor: pointer;
}

.close-sc {
    margin-top: 15px;
    margin-left: 15px;
    width: 35px;
    height: 35px;
    padding: 0;
    border: none;
    border-radius: 20px;
    color: #000;

}

.close-sc {
    margin-top: 15px;
    margin-left: 15px;
    width: 35px;
    height: 35px;
    padding: 0;
    border: none;
    border-radius: 20px;
    color: red;
    font-family: 'Subito-bold';
    font-size: 20px;
}

.demo-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 290px;
    height: 100%;
}

.servicios {
    background-color: #fff;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: -5px 5px 5px rgba(78, 78, 78, 0.426);
}

.servicios-s {
    height: 250px;
}

/* Slider */

.bg-overlay-img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    z-index: 0;
    background-image: url('../../images/sitio-web/malla.webp');
    opacity: .5;
}

.bg-overlay-mas {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    content: ' ';
    z-index: 0;
    background: #000;
    opacity: .5;
}


@media (min-width: 1401px) {}

#slider h1 {
    text-shadow: 0px 8px 15px rgba(0, 0, 0, 0.6);
}


#slider {
    background: none !important;
    height: 101vh !important;
}

#slider .slide .row {
    z-index: 0;
    padding: 5%;
}

@media (min-width: 991px) {
    #slider .slide .row {
        margin-left: 40px !important;
    }
}

.slider-t {
    font-size: 4.5rem;
    font-weight: bold;

}

@media (max-width: 991px) {
    .slider-t {
        margin-bottom: 35vh !important;
    }
}

@media (max-width: 991px) {
    .hero {
        padding: 0 !important;
    }

    .hero .slide-captions div {
        margin-top: 40vh !important;
    }
}


.bg-r-1 {
    background-image: url('images/sitio-web/responsivo2.png');
}

.bg-r-2 {
    background-image: url('images/sitio-web/responsivo1.png');
}

.bg-r-3 {
    background-image: url('images/sitio-web/responsivo3.png');
}

/* botones */
.btn-yellow {
    background-color: #F3BF00;
}

/* Fondos imagen */
.f-blanco {
    background-color: #fff;
}

.fondo-blanco {
    background-image: url(../../images/patron.webp) !important;
    background-position: center;
    background-repeat: repeat;
    background-size: 300px;
}

#home-representante {
    min-height: 100vh;
}

.fondo-blanco-gif {
    background-image: url(../../images/sitio-web/fondo_blanco.gif) !important;
    background-position: center;
    background-size: cover;
}

.fondo-blanco2 {
    background-image: url(../../images/sitio-web/white_bg.png) !important;
    background-position: center;
    background-size: cover;
}

.fondo-login {
    background-image: url(../../images/sitio-web/fondo-login.png) !important;
    background-position: center;
    background-size: cover;
}

.fondo-ama {
    background-image: url(../../images/sitio-web/fondo_ama.png) !important;
}

.fondo-ama-o {
    background-image: url(../../images/sitio-web/fondo-ama-overlay.png) !important;
}

/* Fondos degradados */
.bg-wy {
    background: #F3BF00;
}

.bg-w {
    background: #fff;
}

.bg-gray {
    background-color: #dddddd !important;
}

.bg-gray-s {
    background-color: #a7a7a7 !important;
}

#registro_usuario {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    transition: all 0.5s ease;
}

@media (max-width: 980px) {
    #registro_usuario {
        width: 100%;
        transition: all 0.5s ease;
    }
}

@media (min-width: 1201px) {
    .bg-wb {
        background: #000;
    }
}

@media (max-width: 1200px) {
    .bg-wb {
        background-color: #000;
    }
}

/* Accordion */
.accordion-subito {
    background-color: #dddddd;
    margin-top: 20px;
    border-radius: 20px;
    color: #444;
    cursor: pointer;
    padding: 8px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 1s;
}

.accordion-subito:hover {
    background-color: #F3BF00;
}

.accordion-subito-active {
    background-color: #F3BF00;
}

.icono-acor-active {
    transform: rotate(45deg);
}

.panel-s {
    margin-top: 15px;
    padding: 0 18px 0 18px;
    background: none;
    display: none;
    overflow: hidden;
    transition: 0.6;
}

/* panel web */

/* .contenedor-panel{
    padding-top: 150px;
} */

.comercio-direccion {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* login */

.card-login {
    box-shadow: 5px 5px 10px #00000045;
    background-color: #fff !important;
}

.box-shadow {
    box-shadow: 5px 5px 10px #00000045;
}

.text-shadow {
    text-shadow: 5px 5px 10px #00000045;

}

.text-shadow-w {
    text-shadow: 5px 5px 10px #ffffff45;

}

.formulario-prueba {
    background-color: #dddddd;
    border-radius: 5px !important;
}

.btn-web {
    transition: opacity .7s, left .5s;
    border-radius: 200px;
    letter-spacing: 2px;
    left: -200px;
    background-color: #000000;
    position: fixed;
    transition: all 300ms ease 0ms;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    z-index: 99;
}

#has_code:hover,
#forgot:hover {
    color: #000 !important;
    cursor: pointer;
}



.animate-bw {
    opacity: 1;
}

@media(min-width:766px) {
    .btn-web {
        width: 180px;
        padding: 50px 0px 50px 0px;
        top: 40px;
    }

    .animate-position {

        left: 40px !important;
    }
}

@media(max-width:766px) {

    .animate-position {

        left: 10px !important;
    }

    .btn-web {
        top: 10px;
        width: 130px;
        padding: 35px 0px 35px 0px;
    }
}

.btn-web:hover {
    transform: scale(1.2);
    cursor: pointer;
}

/* header */
.btn-header-lo img {
    position: sticky;
    width: 50px;
}

.menu-rep {
    background: none !important;
    box-shadow: none !important;
}

.menu-rep-icon {
    transition: .5s;
    padding-top: 10px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    text-align: center;
}

.menu-rep-icon:hover {

    cursor: pointer;
    scale: 1.1;
}


/* representante */

#formulario-nc .card {
    border: none;
    background: none;
}

@media (min-width: 993px) {
    .btn-mr img {
        height: 300px;
        width: 300px;
    }
}

@media (max-width: 992px) {
    .btn-mr img {
        height: 200px;
        width: 200px;
    }
}

@media (max-width: 768px) {
    .btn-mr img {
        height: 150px;
        width: 150px;
    }
}

@media (max-width: 576px) {
    .btn-mr img {
        height: 200px;
        width: 200px;
    }
}


/* menu representante */

.menu-rep-box {
    position: absolute;
    overflow-y: scroll;
    top: 0px;
    padding-top: 25px;
    height: 100vh;
    background-color: #fff;
    box-shadow: -10px -10px 10px #ddddddbd;
}

.logo-comercio {
    width: 200px;
    border-radius: 200px;
    object-fit: cover;
}

.card {
    background: none;
    margin-top: 10px;
}

.fondo-rest {
    background-color: #ffffffaa !important;
    border: none !important;
}

.logo-comercio-back {
    width: 200px;
    height: 200px;
    display: flex;

    border-radius: 200px;
    margin-bottom: 20px;
    padding: 0;
}

@media (min-width: 801px) {
    .menu-rep-box {
        width: 30%;
        right: -30%;
    }
}

@media (max-width: 800px) {
    .menu-rep-box {
        width: 60%;
        right: -60%;
    }
}

@media (max-width: 500px) {
    .menu-rep-box {
        width: 100%;
        right: -100%;
    }
}

.body-panel {
    overflow-y: scroll;
}

.tienda-login:hover {
    cursor: pointer;
    zoom: 1.1;
}

.btn-close-rep {
    box-shadow: none !important;
    padding: 15px !important;
    text-align: center;
    font-size: 25px;
}

.menu-rep-btn {
    transition: 1s;
}

.menu-rep-btn:hover {
    zoom: 1.2 !important;
}


/* Prueba gratis */
.datepicker {
    border: #dddddd solid 1px;
    border-radius: 10px;
    padding: 5px;
}

#ui-datepicker-div {
    background-color: #fff !important;
    padding: 10px;
    border-radius: 15px;

}

#ui-datepicker-div .ui-datepicker-prev {
    margin-left: 75px;
}

.ui-datepicker-next {
    margin-left: 100px;
}

#ui-datepicker-div:hover {
    cursor: pointer;
}

#ui-datepicker-div .ui-datepicker-header a {
    font-size: 1rem;
    text-decoration: none;
    color: #000;
    padding: 0px;
}

#ui-datepicker-div .ui-datepicker-header a:hover {
    color: #F3BF00;
    border: none;
}

#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-unselectable {
    background-color: #dddddd;
}

#ui-datepicker-div .ui-datepicker-calendar tbody {
    background-color: #F3BF00;
}

#ui-datepicker-div .ui-datepicker-calendar th,
tr,
td {
    text-decoration: none;
    color: #000;
    padding: 5px;
}

#ui-datepicker-div .ui-datepicker-calendar td:hover {
    background-color: #e5ff00;
}

#ui-datepicker-div .ui-datepicker-calendar th {
    color: #F3BF00;
    border: #fff solid 1px;
}


#ui-datepicker-div .ui-datepicker-calendar a {
    text-decoration: none;
    color: #000;
}


/* maps */
.gmnoprint {
    height: 25px !important;
}

.gm-svpc {
    height: 45px !important;
    width: 45px !important;
}

.gm-svpc div img {
    height: 25px !important;
    width: 25px !important;
}

div .gm-control-active.gm-fullscreen-control {
    height: 45px !important;
    width: 45px !important;
}

div .gm-control-active.gm-fullscreen-control img {
    height: 20px !important;
    width: 20px !important;
}

.cards-app {
    background-color: white !important;
    border-radius: 25px;
    margin-top: 20px;
    border: 0 !important;
    box-shadow: 0px 1px 15px rgba(0, 0, 0, 0.1);
}

.cards-app .table {
    white-space: nowrap;
    font-family: Arial, Helvetica, sans-serif !important;
}

.cards-app.table.thead {
    width: 100% !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

#tabpaymentslist li button {
    color: #000 !important;
}

.iframe-contrato {
    width: 100%;
    height: 100vh
}

#listado-planes div .card {
    background-image: url('./../img/logo_lineas.png');
    box-shadow: 5px 5px 5px #dddddda5;
}

#listado-planes div .card .prom {
    display: flex;
    background-color: #F3BF00;
    border-radius: 14px 0px 14px 0px;
    width: 50%;
    height: 50px;
}

#listado-planes div .card .card-body {
    background: none;
}

#listado-planes div img {
    width: 30px;
}


.fs-7 {
    font-size: .8rem !important
}

.fs-8 {
    font-size: .6rem !important
}