* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   /*color: #5a5a5a; */
   min-width: 360px;
}

.navbar-collapse {
   padding: 10px;
}

@media (min-width:768px) {
   .nav20 .elem-31 ul {
      align-items: center;
   }

   .nav20 .elem-31 {
      padding: 0%;
   }
}

:root {
   --color-verde-logo: #25DE1F;
   --color-azul-logo: #1F85DE;
   --nav-anaraj-logo: #FF9900;
   --btn-desactivo-oscuro: #B3B3B3;
   --btn-desactivo-hoover: #CCCCCC;
   --fondo-gris: #6C757D;
   --linea-hr-gris: #6C757D;
   --nav-azul-logo: #1F85DE;
   --nav-cadetblue: cadetblue;
   --nav-cornflowerblue: cornflowerblue;
   --nav-verde-brand: #25DE1F;
   --nav-verde: #79C843;
   --nav-negro: black;
   --nav-negroclaro: #222222;
   --nav-anaraj: #F9901E;
   --nav-anaranj-claro: #fed8b1;
   --nav-success: #198754;
   --verde-success: #198754;
   --nav-fondo: #222222;
   --nav-brend: #79C843;
   --letra-blanca: #ffffff;
   --letra-negra: #222222;
   --letra-gris: #6C757D;
   --letra-gris-clara: #F9F9F9;
   --letra-naranja: #FF9900;
   --letra-anaranjada: #F9A319;
   --letra-limon-naranja: #FBC668;
   --letra-verde-brend: #79C843;
   --letra-azul-sidebar: #3591E1;
   --letra-azul-primary: #428bca;
   --letra-azul-comercio: #2780E3;
}

.btn_up {
   position: fixed;
   bottom: -50px;
   right: 15px;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 2px solid #ccc;
   background: rgb(31, 133, 222);
   opacity: 0.2;
   z-index: 100;
   outline: 0 !important;
   transition: .4s;
}

.btn_up:after {
   content: '';
   width: 15px;
   height: 15px;
   border-top: 5px solid rgb(250, 250, 240);
   border-left: 5px solid rgb(250, 250, 240);
   transform: rotate(45deg);
   position: absolute;
   top: 4px;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}

.btn_up.active {
   bottom: 80px;
}

.carousel-item {
   height: 21.875rem;
}

.carousel {
   overflow: hidden;
}

.nav20 {
   padding: 0;
   background-color: black;
   color: white;
   /* font-size: 0.85rem;*/
   top: 0;
   vertical-align: middle;
   height: auto;
   /* z-index: 2; */
}

.nav20 .elem-31 .brand-2, .nav20 .brand-1 {
   color: var(--nav-verde-brand);
   font-size: 1.4rem;
   font-weight: 550;
   margin-left: 12px;
   margin-right: 12px;
}

.nav20 .elem-312 {
   margin-right: 30px;
}

.nav20 ul li a {
   color: white;
   text-decoration: none;
}

.nav20 .elem-31 a:hover {
   color: #FF9900;
}

.nav20 .navbar-toggler {
   color: white;
}

.nav20 .elem-30 form button {
   color: white;
   background-color: var(--nav-cadetblue);
}

/*
.nav20 .elem-30 form button:hover {
   color: white;
   background-color: chocolate;
}
*/

.nav20 .elem-312 img {
   max-height: 1.15rem;
}

.nav20 .dropdown-toggle, .nav20 .dropdown-menu {
   margin-right: 100px;
}

.nav20 .dropdown-menu.show {
   background: #222222;
   color: white;
   font-size: 0.8rem;
}

#bandera p {
   position: absolute;
   top: 45px;
   margin-left: 75%;
   color: gainsboro;
   z-index: 1;
   font-size: 0.8rem;
   padding: 4px;
}

#bandera p:hover {
   color: var(--nav-anaranj-claro);
}

#bandera img {
   height: 10px;
   width: 14px;
}

.nav18 {
   padding: 0;
   background-color: black;
   color: white;
   font-size: 0.85rem;
   overflow: hidden;
}

.nav18 .elem-31 .brand-2, .nav18 .brand-1 {
   color: var(--nav-verde-brand);
   font-size: 1.4rem;
   font-weight: 550;
   margin-left: 30px;
}

.nav18 ul li a {
   color: white;
   text-decoration: none;
   align-items: center;
   height: 40px;
}

.nav18 .elem-31 a:hover {
   color: var(--nav-anaraj) !important;
}

.nav18 .elem-32 a:hover {
   background: chocolate;
}

.nav18 .navbar-toggler {
   color: white;
   margin: 12px;
}

.nav18 .elem-30 form button {
   color: white;
   background-color: var(--nav-cornflowerblue);
}

.nav18 .elem-30 form button:hover {
   color: white;
   background-color: chocolate;
}

.nav18 .elem-31 img, .nav18 .elem-32 img, .nav18 .elem-32 svg {
   max-height: 1.15rem;
}

.nav18 .elemli-02 .dropdown-menu {
   background: chocolate;
   text-align: center;
   border: 0px;
   border-radius: 4px;
   width: 160px !important;
   height: 32px;
}

.nav18 .elemli-02 .dropdown-menu.show {
   padding: 0px;
}

.nav18 .elemli-02 .dropdown-item {
   align-items: center !important;
   font-size: 0.9rem;
}

.nav18 .elemli-02 .dropdown-menu a {
   color: white !important;
}

.nav18 .elemli-02 .dropdown-menu a:hover {
   background: var(--nav-anaraj);
   color: white !important;
   border-radius: 4px;
   height: 32px;
   margin: auto;
}

.nav18 .elem-3214 img {
   height: 1rem;
}

@media (max-width:767px) {
   .nav20 {
      position: relative;
   }

   .nav20 .container-fluid {
      width: 80%;
      min-width: 280px;
   }

   .nav20 .brand-2 {
      display: none;
   }

   .nav20 .elem-3111 a:hover, .nav20 .elem-3112 a:hover, .nav20 .elem-3113 a:hover {
      background: chocolate;
      color: white !important;
   }

   .nav20 .elem-3122 {
      margin-bottom: 20px;
   }
}

@media (min-width:992px) {
   .nav20 .brand-1 {
      display: none;
   }

   .nav20 .elem-31 {
      background-color: black;
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
      padding: 0;
      align-items: center;
   }

   .nav20 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

@media (min-width:768px) and (max-width:867px) {
   .nav20 .brand-1 {
      display: none;
   }

   .nav20 .elem-31 {
      background-color: black;
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
   }

   .nav20 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

@media (min-width:868px) and (max-width:991px) {
   .nav20 .brand-1 {
      display: none;
   }

   .nav20 .elem-31 {
      background-color: black;
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
   }

   .nav20 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

.nav30 {
   /* font-size: 0.85rem; */
   top: auto;
   padding: 0%;
}

@media (max-width:767px) {
   .nav30 {
      position: relative;
      background: black;
   }
}

.nav30 ul li a {
   color: white;
   text-decoration: none;
}

.nav30 .elem-32 a:hover {
   background: chocolate;
}

.nav30 .elem-30 form button {
   color: white;
   background-color: var(--nav-cadetblue);
}

.nav30 .elem-30 form button:hover {
   color: white;
   background-color: chocolate;
}

@media (min-width:992px) {
   .nav30 .elem-32 {
      background-color: var(--nav-cadetblue);
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
      align-items: center;
   }

   .nav30 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

@media (min-width:768px) and (max-width:867px) {
   .nav30 .elem-32 {
      background-color: var(--nav-cadetblue);
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
      align-items: center;
   }

   .nav30 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

@media (min-width:868px) and (max-width:991px) {
   .nav30 .elem-32 {
      background-color: var(--nav-cadetblue);
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
      align-items: center;
   }

   .nav30 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

.cont-prod .nav31 .navbar-brand {
   font-weight: 550;
   font-size: 1.2rem;
   color: var(--nav-verde-brand);
}

.cont-prod .nav31 ul li ul li a {
   color: white;
}

@media (max-width:767px) {

   .nav30 .container-fluid {
      width: 80%;
      min-width: 280px;
      /* background-color: black; */

   }

   .nav31 .shoptienda ul {
      /* width: 80%; */
      min-width: 280px;
      /* background-color: black; */
      background-color: #12203e;

   }

   .nav30 .elem-32 ul .search-li {
      margin-top: 15px;
   }

   .nav30 .elem-32 ul .final-li {
      margin-bottom: 30px;
   }
}

@media (min-width:768px) {
   .nav30 .final-li {
      margin-right: 10px;
   }

   .nav30 .elem-32 {
      padding: 0px;
   }
}

/* carrusel: title otros */
@media (min-width:768px) {
   #carrusel-010 {
      background: url(../../img/carrusel-01/carr01-fondo1a.png);
      height: 100%;
   }

   #title-010 {
      position: absolute;
      color: #3FA9F5;
   }

   #title-010 h5 {
      margin-top: 50px;
      margin-left: 120px;
   }

   #title-010 p {
      margin-left: 215px;
      margin-top: 150px;
      max-width: 300px;
      text-align: center;
      font-size: 0.95rem;
   }

   #carrusel-020 {
      background: url(../../img/carrusel-01/carr01-fondo2a.png);
      height: 100%;
   }

   #title-020 {
      position: absolute;
      color: #3FA9F5;
   }

   #title-020 h5 {
      margin-top: 50px;
      margin-left: 150px;
   }

   #title-020 p {
      margin-left: 150px;
      margin-top: 50px;
      max-width: 420px;
      text-align: justify;
      text-indent: 10px;
      font-size: 0.95rem;
   }

   #carrusel-030 {
      background: url(../../img/carrusel-01/carr01-fondo3a.png);
      height: 100%;
   }

   #title-030 {
      position: absolute;
      color: white;
   }

   #title-030 h5 {
      margin-top: 50px;
      margin-left: 150px;
   }

   #title-030 p {
      margin-left: 150px;
      margin-top: 50px;
      max-width: 420px;
      text-align: justify;
      text-indent: 10px;
      font-size: 0.95rem;
   }

   #carrusel-040 {
      background: url(../../img/carrusel-01/carr01-fondo4a.png);
      height: 100%;
   }

   #title-040 {
      position: absolute;
      color: white;
   }

   #title-040 h5 {
      margin-top: 50px;
      margin-left: 200px;
   }

   #title-040 p {
      margin-left: 200px;
      margin-top: 50px;
      max-width: 470px;
      text-align: justify;
      text-indent: 10px;
      font-size: 0.95rem;
   }

   #carrusel-050 {
      background: url(../../img/carrusel-01/carr01-fondo5a.png);
      height: 100%;
   }

   #title-050 {
      position: absolute;
      color: white;
   }

   #title-050 h5 {
      margin-top: 50px;
      margin-left: 200px;
   }

   #title-050 p {
      margin-left: 200px;
      margin-top: 50px;
      max-width: 470px;
      text-align: justify;
      text-indent: 10px;
      font-size: 0.95rem;
   }

   #carrusel-060 {
      background: url(../../img/carrusel-01/carr01-fondo6a.png);
      height: 100%;
   }

   #title-060 {
      position: absolute;
      color: white;
   }

   #title-060 h5 {
      margin-top: 50px;
      margin-left: 120px;
   }

   #title-060 p {
      margin-left: 120px;
      margin-top: 50px;
      max-width: 390px;
      text-align: justify;
      text-indent: 10px;
      font-size: 0.95rem;
   }
}

/* carrusel: title otros */
@media (max-width:767px) {
   .carousel-item {
      height: 207px;
   }

   #carrusel-010 {
      background: url(../../img/carrusel-01/carr01-fondo1c.png) !important;
      height: 100%;
   }

   #title-010 {
      position: absolute;
      color: #3FA9F5;
      min-width: 368px;
   }

   #title-010 h5 {
      font-size: 1rem;
      margin-left: 65px;
      margin-top: 30px;
   }

   #title-010 p {
      margin-top: 80px;
      margin-left: 65px;
      max-width: 250px;
      font-size: 0.8rem;
      text-align: center;
   }

   #carrusel-020 {
      background: url(../../img/carrusel-01/carr01-fondo2c.png);
      height: 100%;
   }

   #title-020 {
      position: absolute;
      color: #3FA9F5;
      min-width: 268px;
   }

   #title-020 h5 {
      font-size: 0.9rem;
      margin-left: 65px;
      margin-top: 30px;
   }

   #title-020 p {
      margin-left: 65px;
      max-width: 290px;
      text-align: justify;
      font-size: 0.8rem;
      text-indent: 10px;
      margin-right: 15px;
   }

   #carrusel-030 {
      background: url(../../img/carrusel-01/carr01-fondo3c.png);
      height: 100%;
   }

   #title-030 {
      position: absolute;
      color: white;
      min-width: 268px;
   }

   #title-030 h5 {
      font-size: 0.9rem;
      margin-left: 80px;
      margin-top: 40px;
   }

   #title-030 p {
      margin-left: 80px;
      max-width: 290px;
      text-align: justify;
      font-size: 0.8rem;
      text-indent: 10px;
      margin-right: 15px;
   }

   #carrusel-040 {
      background: url(../../img/carrusel-01/carr01-fondo4c.png);
      height: 100%;
   }

   #title-040 {
      position: absolute;
      color: white;
      min-width: 340px;
   }

   #title-040 h5 {
      font-size: 0.9rem;
      margin-left: 95px;
      margin-top: 30px;
   }

   #title-040 p {
      margin-left: 95px;
      max-width: 320px;
      text-align: justify;
      font-size: 12px;
      text-indent: 10px;
      margin-right: 15px;
   }

   #carrusel-050 {
      background: url(../../img/carrusel-01/carr01-fondo5c.png);
      height: 100%;
   }

   #title-050 {
      position: absolute;
      color: white;
      min-width: 300px;
   }

   #title-050 h5 {
      font-size: 0.9rem;
      margin-left: 70px;
      margin-top: 30px;
   }

   #title-050 p {
      margin-left: 70px;
      max-width: 360px;
      text-align: justify;
      font-size: 0.75rem;
      text-indent: 10px;
      margin-right: 15px;
   }

   #carrusel-060 {
      background: url(../../img/carrusel-01/carr01-fondo6c.png);
      height: 100%;
   }

   #title-060 {
      position: absolute;
      color: white;
      min-width: 360px;
   }

   #title-060 h5 {
      font-size: 0.9rem;
      margin-left: 70px;
      margin-top: 30px;
   }

   #title-060 p {
      margin-left: 70px;
      max-width: 320px;
      text-align: justify;
      font-size: 12px;
      text-indent: 10px;
      margin-right: 15px;
   }

   #title-062 {
      margin-top: -10px;
      text-align: center;
   }

   .carousel-control-prev-icon {
      margin-left: -50px;
      width: 24px;
      height: 24px;
   }

   .carousel-control-next-icon {
      margin-right: -50px;
      width: 24px;
      height: 24px;
   }
}

/* carrusel */
@media (max-width:567px) {
   .carousel-control-prev-icon {
      margin-left: -30px;
      width: 36px;
      height: 36px;
   }

   .carousel-control-next-icon {
      margin-right: -30px;
      width: 36px;
      height: 36px;
   }
}

/* carrusel */
@media (max-width:467px) {
   .carousel #title-010, .carousel #title-020, .carousel #title-030, .carousel #title-040, .carousel #title-050, .carousel #title-060 {
      margin-left: -10px;
      width: 380px;
   }

   .carousel #title-010 p, .carousel #title-020 p, .carousel #title-030 p, .carousel #title-040 p, .carousel #title-050 p, .carousel #title-060 p {
      font-size: 0.75rem;
   }

   .carousel #title-010 h5, .carousel #title-020 h5, .carousel #title-030 h5, .carousel #title-040 h5, .carousel #title-050 h5, .carousel #title-060 h5 {
      font-size: 0.8rem;
   }
}

/* carrusel */
@media (max-width:400px) {
   .carousel-control-prev-icon {
      margin-left: -10px;
      width: 28px;
      height: 28px;
   }

   .carousel-control-next-icon {
      margin-right: -10px;
      width: 28px;
      height: 28px;
   }

   .carousel #title-010, .carousel #title-020, .carousel #title-030, .carousel #title-040, .carousel #title-050, .carousel #title-060 {
      margin-left: -30px;
      width: 360px;
      font-size: 0.9rem;
   }

   .carousel #title-010 p, .carousel #title-020 p, .carousel #title-030 p, .carousel #title-040 p, .carousel #title-050 p, .carousel #title-060 p {
      font-size: 0.7rem;
   }

   .carousel #title-010 h5, .carousel #title-020 h5, .carousel #title-030 h5, .carousel #title-040 h5, .carousel #title-050 h5, .carousel #title-060 h5 {
      font-size: 0.8rem;
   }
}

/* bandera */
@media (max-width:767px) {
   #bandera p {
      margin-left: 45%;
      top: 40px;
   }

   #bandera p:hover {
      color: var(--nav-verde);
   }
}

/* bandera */
@media (max-width:340px) {
   #bandera p {
      margin-left: 100px;
   }

   #bandera p:hover {
      color: var(--nav-verde);
   }
}



/* nav 18 */
@media (min-width:992px) {
   .nav18 .brand-1 {
      display: none;
   }

   .nav18 .elem-32 {
      background-color: var(--nav-negroclaro);
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
      align-items: center;
   }

   .nav18 .elem-31 {
      background-color: black;
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
   }

   .nav18 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

/* nav 18: final-li */
@media (min-width:768px) {
   .nav18 .final-li {
      margin-right: 10px;
   }
}

/* nav 18 */
@media (max-width:767px) {
   .nav18 .container-fluid {
      width: 80%;
      min-width: 280px;
   }

   .nav18 .brand-2 {
      display: none;
   }

   .nav18 .elem-31 .elemli-03, .nav18 .elem-31 .elemli-04, .nav18 .elem-31 .elemli-05 {
      margin-left: 10px;
   }

   .nav18 .elem-32 {
      margin-left: 13px;
   }

   .nav18 .elem-32 ul .final-li {
      margin-top: 15px;
      margin-bottom: 30px;
   }
}

/* nav 18: brand-1 elem: 30 31 32 */
@media (min-width:768px) and (max-width:867px) {
   .nav18 .brand-1 {
      display: none;
   }

   .nav18 .elem-32 {
      background-color: var(--nav-negroclaro);
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
      align-items: center;
   }

   .nav18 .elem-31 {
      background-color: black;
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
   }

   .nav18 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}

/* nav 18: brand-1 elem: 30 31 32 */
@media (min-width:868px) and (max-width:991px) {
   .nav18 .brand-1 {
      display: none;
   }

   .nav18 .elem-32 {
      background-color: var(--nav-negroclaro);
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
      align-items: center;
   }

   .nav18 .elem-31 {
      background-color: black;
      display: flex;
      display: -webkit-flex;
      display: -ms-flexbox;
      justify-content: space-between;
   }

   .nav18 .elem-30 {
      padding: 0;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(1, auto);
   }
}