/* input(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(119,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(467,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' */
* {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}

@font-face {
    font-family: 'ToxTypewriter';
    src: url('/fonts/ToxTypewriter.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'BebasNeueBold';
    src: url('/fonts/BebasNeueBold.ttf') format('truetype');
    font-display: swap;
}

.menu-content{
    background-color: transparent;
    position: absolute;
    width: 100%;
}


.container-fluid {
    padding: 0px;
   /* margin: 0px;*/
}


.navbar .nav-item {
    padding: .0rem;
}

.bg-nav {
    background-color: #fff;
    font-family: 'ToxTypewriter';
}

.menu {
    padding: 0px 15px !important;
    margin: auto !important;
}

.img-menu {
    max-width: 75%;
    height: auto;
}

.img-tamaño {
    width: 150px;
}

.btn-start {
    z-index: 1080;
}


.btn-menu {
    color: #000000;
    margin: 0px 10px;
    /*padding: 2px 0px;*/
    transition: scale 0.2s;
    font-size: 20px;
}

.btn-contacto{
     color: #fff;
    margin: 5px 10px;
  padding: 3px 9px;
    transition: scale 0.2s;
    font-size: 20px;
    background-color: #000000;
    border-radius: 20px;
    &:hover{
        background-color: #448eb5 !important; 
         color: #fff;
    }
}

.btn-menu>p {

    padding: 10px;
    margin: auto;
    color: #ffffff;
}

.btn-menu:hover {
     scale: 110%;
    color: #fff !important;
    margin: 5px 10px;
    padding: 3px 9px;
    transition: scale 0.2s;
    font-size: 20px;
    background-color: #000 !important;
    border-radius: 20px;
}


.btn-menu.active,
.btn-menu.show {
    color: #0055b8;
    color: #fff;
}
.btn-product{
     border-radius: 20px;
    border: 1px solid #000000;
    font-size: 15pt;
    font-family: 'ToxTypewriter';
    margin-top: 5px;
    background-color: #fff;
    color:#000;
    transition: scale 0.2s;
    &:hover{
        scale: 105%;
    color: #fff !important;
    border: 1px solid #000000;
    background-color: #000;
    }
}
.justificar {
    justify-content: center;
}

.btn-categoria {
    display: inline-flex;
    /*padding: 2px 0px;*/
    align-items: center;
}
.logo-menu{
    width: 200px;
}

/* mobile */
.btn-ham {
    display: flex;
    align-items: center;
}

.btn-ham>.mob-btn {
    width: 43px;
    height: 43px;
    border: 0px solid #1c1c1d;
    border-radius: 5px;
    margin: 0px 5px;
    font-size: 18px;
    color: #0055b8;
    position: relative;
    padding: 0px;
    background-color: #f0f0f0;
}


.dropkbb-item {
    display: block;
    width: 100%;
    background-color: transparent;
    border: 0;
    margin-top: 10px;
    font-size: 20px;

}



.dropkbb-menu .dropkbb-item {
    display: flex;
    align-items: center;
}



.ico-linea {
    fill: none;
    stroke: #0055B1;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
}



/*-----Hover mega menu -----*/

/* breakpoint and up - mega dropdown styles */
@media screen and (min-width: 992px) {

    /* remove the padding from the navbar so the dropdown hover state is not broken */
    .navbar {
        padding-top: 0px;
        padding-bottom: 0px;
    }




    /* makes the dropdown full width  */
    .navbar .drop-kbb {
        position: static;
    }

    .navbar .drop-kbb-menu {
        width: 100%;
        left: 0;
        right: 0;
        /*  height of nav-item  */
        top: 70px;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.3s linear;
        background-color: rgba(243, 245, 246, 0.9);

    }

    /* shows the dropdown menu on hover */
    .drop-kbb:hover .drop-kbb-menu,
    .drop-kbb .drop-kbb-menu:hover {
        display: block;
        visibility: visible;
        opacity: 1;
        transition: visibility 0s, opacity 0.3s linear;
    }


}

@keyframes hoverAnimationBtnTrigger {
    0% {
        transform: rotate(0deg) scale(1);
    }



    100% {
        transform: rotate(0deg) scale(1);
    }
}

@keyframes fadeOutProps {
    0% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


.menu-max {
    max-width: 1320px;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}

.mega-menu {
    background-color: rgba(243, 245, 246, 0.9);
    border: 1px solid #ccc;
}

.menu-lista div {
    padding-bottom: 5px;
}

.menu-lista ul,
a {
    list-style: none;
    text-decoration: none;
    color: #000000;
}


.menu-lista a:hover {
    color: #000000;
}

.menu-subcategoria {
    font-family: 'ToxTypewriter';
    font-size: 20px;
}

.menu-sub-producto{
     display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.menu-sub-producto img{
    width: 200px;
    max-width: 100%;
}
.navbar-toggler-icon {
    background-image: url("../images/menu-ico.webp");
}

.navbar-expand-lg .navbar-nav{
    height: 80px;
}
.justificar ul{
    padding: 0px;
}


/* btn subir*/
.go-top {
    display: none;
}

.btn-go {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
}
/*-----------------------*/
/*   FOOTER MOVIL*/
/*----------------------*/






/*-----------------------*/
/*   Laptop */
/*----------------------*/

@media (min-width: 1200px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-toggler {
        display: none !important;
    }
.banner-hero{
    margin-top: 50px;
}

}

@media only screen and (min-width: 992px) and (max-width:1841px) {

    .navbar .nav-item {
        padding: .3rem;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1391px) {

    .btn-menu {
        font-size: 15px;
        margin: 0px 4px;
    }

    .btn-contacto {
   
    font-size: 15px;
  
}
}

@media only screen and (min-width: 992px) and (max-width: 1249px) {
    .navbar .dropdown-menu {
        top: 75px;
    }
.banner-hero{
    margin-top: 50px;
}
ul {
    padding-left: 1rem;
}
}

@media only screen and (min-width: 1250px) and (max-width: 1391px) {
    .navbar .dropdown-menu {
        top: 75px;
    }

}

@media only screen and (min-width: 1392px) and (max-width: 1563px) {
    .navbar .dropdown-menu {
        top: 80px;
    }


}

/*-----------------------*/
/*   MOVIL */
/*----------------------*/

@media (max-width: 991px) {
.logo-menu{
    margin: 5px 8px;
}
    .navbar-collapse {
        background-color: #000;
        overflow: scroll;
        height: 517px;
    }

    .mega-menu {
        background-color: #f3f5f6;
        border: 0px;
    }

    .menu {
        padding: 0px 1px !important;
    }

    .btn-menu {
        border-radius: 0px;
        text-align: left;
        font-size: 20px;
        margin: 5px 10px;
        color: #fff;
    }

    .btn-menu>p {
        border-radius: 0px;
        color: inherit;
        padding: 0px;
    }

  

    .flecha {
        display: none;
    }


    .btn-menu.active,
    .btn-menu.show {
        background-color: #f3f5f6;
        color: #795548;
        border-color: #f3f5f6;
    }

    .btn-mob {
        border: 1px solid #ffffff;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin-left: 20px !important;
        height: 32px;
        width: 51px;
        &:hover{
              border: 1px solid #ffffff;}

        
    }

.btn-mob svg{
    color: #ffffff;
   
}
.btn-mob.show {
   border: 1px solid #fff;
        background-color: #eeeeef !important;
}
.btn-mob.show svg{
    color:#000;
}

    .btn-mob ul {
        width: 100%;

    }

    .btn-contacto{
     color: #060606;
    background-color: #ffffff;
}

    .nav-item {
        border-bottom: 1px solid #d9d9d9;
    }

    .btn-categoria {
        display: inline-block;
    }

    .btn-group {
        border-radius: 0px;
    }

    .nav-link {
        display: inline-flex;
    }



.menu-sub-producto img{
    width: 127px;
   max-width: 100%;
}
.banner-hero{
    margin-top: 50px;}

   

  

    .justificar {
        justify-content: center;
    }

}

/* TABLET */
@media only screen and (max-width: 768px) {

    .banner-hero{
    margin-top: 60px;}
     .go-top {
        display: block;
        z-index: 1030;
        position: absolute;
    }

    #btn-back-to-top {
        position: fixed;
        bottom: 20px;
        right: 2px;
        display: none;
        z-index: 1;
        background-color: #448eb5c9;
        color: #fff;
    }

    .btn-go {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
    }

    .btn-go svg {
        margin-left: -50%;
        margin-right: -50%;
          }
}

/* MOBILE */
@media only screen and (max-width: 576px) {

   .banner-hero{
    margin-top: 15px;
    overflow: hidden;}
}

/* ------------------------- */
/* Footer */
/* ------------------------- */


footer {
    background-color: #10215D;


}
.direccion{
    display: flex;
    align-items: start;
    flex-direction: column;
}

.footer-content {
    max-width: 1527px;
}

.footer p {
    padding: 0px 0px 0px 10px;
    text-align: left;
    min-height: auto;
    font-size: 12pt;
    color: #fff;
    max-width: 80%;
}

.logo-footer {
    text-align: left;
}

.logo-footer img {
    width: 250px;
    padding: 25px 0px;
}

.redes {
    margin-top: 30px;
}

.redes li {
    margin: 10px;
}

.iconos {
    margin-bottom: 10px;
    width: 30px;
}

.aviso {
    color: #fff;
    font-family: 'TTNormsPro-Normal';
    font-size: 12pt;
    border: 1px solid #fff;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
}

.aviso:hover {
    color: #fff;
}

.sub-footer {
    background-color: #000;
    padding: 10px;
    margin: auto;
}

.text-footer2 {
    text-align: center !important;
    opacity: 0.7;
    font-size: 12px;
    color: #fff;
}

.autorizado{
    text-align: center;
    font-family: 'ToxTypewriter';
    font-size: 11pt !important;
    padding: 10px;
    margin: 0px;
}
.mapa{
    margin-top: 80px;
}
.map-links a {
     font-family: 'ToxTypewriter';
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}
.menu-categoria{
    font-weight: bold;
      font-size: 17px;
}

@media (max-width: 1400px) {
    .footer-content {
        max-width: 1320px;
    }
}

@media (max-width: 1200px) {
    .footer-content {
        max-width: 1140px;
    }
}

@media (max-width: 992px) {
    .footer-content {
        max-width: 960px;
    }

}

@media (max-width: 768px) {
    .footer-content {
        max-width: 720px;
    }
}

@media (max-width: 576px) {
    .footer-content {
        max-width: 540px;
    }
}

@media only screen and (max-width: 768px) {
    .logo-footer {
        text-align: center;
    }

    .footer p {
        padding: 0px;
        text-align: center;
        font-size: 12pt !important;
    }
    .direccion{
    display: flex;
    align-items: center;
    flex-direction: column;
}
.mapa{
    margin-top: 30px;
}
.btn-product {
  
    font-size: 11pt;
   
}
}