*{box-sizing: border-box; font-family: Arial, Helvetica, sans-serif;}
html, body{margin:0; padding:0; width: 100%; height: 100%;}
a{text-decoration: none; color: white;}
button{background:none; border:1px solid rgba(0,0,0,0.6); border-radius:5px; padding:7px 10px; cursor:pointer; font-weight: 600;}
input, select, textarea{ border-radius: 5px; border:1px solid rgba(0,0,0,0.1); padding:8px 10px;}
i{display:inline-block; vertical-align: middle;}
h3{ margin:0;}

/* ----------------------AQUI ENCONTRAMOS TODO EN ALTO RELIEVE REDES Y MAS---------------------- */
.redes{ position:fixed; top:42%; right: 0; transform: translateY(-50%); font-size:35px; text-align: center;  font-family:Arial, Helvetica, sans-serif; cursor:pointer; z-index: 2; display:grid; grid-template-columns:1fr;}
.redes > a{ clip-path: border-box;  padding:10px 3px 10px 15px; background: black; text-decoration: none; color:rgba(255,221,0,1); clip-path: polygon(15% 10%, 100% 0%,  100% 100%, 15% 90%, 0% 50%); }
.redes > a > img{ width: 35px;}
.redes > span{ clip-path: border-box;  padding:10px 3px 10px 15px; background: black; text-decoration: none; color:rgba(255,221,0,1); clip-path: polygon(15% 10%, 100% 0%,  100% 100%, 15% 90%, 0% 50%); position:relative;}
.redes > span.btnabcart > span{ width: 20px; height: 20px; display:flex; justify-content: center; align-items: center; background:red; color:white; font-size:14px; position:absolute; top:3px; left: 27px; border-radius: 50%; }
.redes > span:hover{background:rgba(90, 89, 89, 0.37);}
.redes > a:hover{background:rgba(90, 89, 89, 0.37);}
.cotizar{position:fixed; top:55%; left: 0; transform: translateY(-50%); font-size:12px; text-align: center;  font-family:Arial, Helvetica, sans-serif; cursor:pointer; z-index: 2; }
.cotizar div{clip-path: border-box;  padding:10px 15px 10px 13px; background:rgb(255, 208, 0); text-decoration: none; color:rgb(0, 0, 0); clip-path: polygon(0 0, 80% 10%,  100% 50%, 80% 90%, 0% 100%); display:grid; grid-template-columns:1fr;}
.cotizar > div > i{font-size:23px; padding: 0; margin: 0;}
.cotizar a:hover{background:rgba(255, 208, 0, 0.959);}
.whatsapp{ width: initial; height: auto; position:fixed; bottom: 0px; right: 10px;  font-family:Arial, Helvetica, sans-serif; cursor:pointer; z-index: 2; background:rgb(255, 208, 0); border-radius:10px 10px 0 0; }
.whatsapp a{ width: 100%; height: auto; text-decoration:none; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; color: black;   }
.whatsapp > a > span{ display:block; padding:6px 10px; background:rgb(255, 230, 1); font-size: 15px; text-align:bottom;   color: black; display:flex; justify-content: center; align-items:center; border-radius:10px 0px 0 0; font-weight: bold;}
.whatsapp > a > i{ width: 35px; padding:2px 10px; background:rgb(255, 218, 0); display:flex; justify-content: center; align-items:center; font-size:27px; border-radius:0 10px 0 0;}

/* -------------------------HEADER Y SLIDER JUNTOS-------------------------------------------------------- */
.header{ width:100%; max-width:2000px; position:relative; height: 100vh; z-index: 1;}
#c-slider2{width: 100%; height: 100%; margin:0px auto; position:relative; overflow: hidden;}

#slider2{ display:flex; width: 300%; height: 100%; position:relative;}
#slider2 section{width: 100%; height:100%; overflow: hidden; position:relative;}
#slider2 img{ width: 100%; height: auto;  }
#slider2 > section > div{ position: absolute; bottom:100px; width: 100%; background:rgba(0, 0, 0, 0.411); display:grid; grid-template-columns:1fr; grid-template-rows:auto;  color:rgba(255,221,0,1); z-index: 1; }
#slider2 > section > div > span:nth-child(1){ text-align: center; font-size:38px; padding:20px 0 10px 0;}
#slider2 > section > div > span:nth-child(2){ text-align: center; font-size:38px; padding:10px 0 20px 0; font-family:Arial, Helvetica, sans-serif; font-weight: 700;}

#btn-prev2, #btn-next2{ background:rgba(3, 3, 3, 0.418); color:rgba(255, 255, 255, 0.822); position:absolute; top:50%; transform: translateY(-50%); font-size:20px; padding:8px 10px;  text-align: center;  font-family:Arial, Helvetica, sans-serif; cursor:pointer;}
#btn-prev2:hover, #btn-next2:hover{background:rgba(0, 0, 0, 0.733);}
#btn-prev2{left: 70px;}
#btn-next2{right:70px;}
.heamen{ width: 100%; position:absolute; top:0; left: 0; background:rgb(0, 0, 0); z-index: 2; }
.heamen > div.ba{ width: 100%; max-width: 1100px; margin:0 auto; display:flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; position:relative; z-index: 1;}
.heamen > div.ba > img{ width: 100px; height: auto; position: absolute; top:0; left: 0; padding: 50px 15px 5px 15px;  background:black; margin-right: 10px;}
.heamen > div.ba > div.baa{ display:flex; flex-wrap: wrap; flex-direction: column; margin-top:10px; justify-content: center; align-items: center; padding-bottom: 10px;}
.heamen > div.ba > div.baa > div.a{ width: 80%; padding:5px; margin-bottom: 5px; display:flex; justify-content: space-between; align-items: center;}
.heamen > div.ba > div.baa > div.a > div.aa{ width: 100%; height: 40px; border-radius: 5px 5px 5px 5px; border:1px solid rgba(0,0,0,.3); box-shadow:0 0 7px 1px rgba(0,0,0,.3); padding: 8px 10px 8px 10px; display:flex; justify-content:space-between; background:white; position:relative;}
.heamen > div.ba > div.baa > div.a > div.aa > input{border:none; color: rgba(0,0,0,.5); font-size: 15px; width: 100%; outline:0px;}
.heamen > div.ba > div.baa > div.a > div.aa > i{ position: absolute; top:10px; right: 10px;}
.heamen > div.ba > div.baa > div.a > div.ab{ width: 15%; display:flex; flex-direction: column; align-items: center; justify-content: center; color:rgb(233,208,46);}
.heamen > div.ba > div.baa > div.a > div.ab > span{ font-size: 13px;}
.heamen > div.ba > div.baa > div.a > div.ab:hover{ transform:scale(1.07); cursor:pointer;}
.heamen > div.ba > div.baa > div.b{ display:flex;}
.heamen > div.ba > div.baa > div.b > i{ color:white; cursor:pointer; font-size: 23px; display:none;}
.heamen > div.ba > div.baa > div.b > div{ width: 100%;}
.heamen > div.ba > div.baa > div.b > div > div{ display:flex;}
.heamen > div.ba > div.baa > div.b > div > div > img{display:none;}
.heamen > div.ba > div.baa > div.b > div > div > i{ display:none;}
.heamen > div.ba > div.baa > div.b > div > div > a{ color:white; padding:5px 15px; display:flex; font-size:16px; font-weight:600;}
.heamen > div.ba > div.baa > div.b > div > div > span{ color:white; padding:5px 15px; display:flex; font-size:16px; font-weight:600;}
.heamen > div.ba > div.baa > div.b > div > div > div{ position:relative; margin:0; padding:0;}
.heamen > div.ba > div.baa > div.b > div > div > div > a{ color:white; padding:5px 15px; display:flex; font-size:16px; font-weight:600;}
.heamen > div.ba > div.baa > div.b > div > div > div > div{ width: 800px; height: auto; position:absolute; top:100%; left: 0; display:flex; background:black; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; overflow: hidden; display:none;}
.heamen > div.ba > div.baa > div.b > div > div > div > div > a{ display:block; width: 32%; color:rgb(233,208,46); padding:5px 10px; margin:5px;}
.heamen > div.ba > div.baa > div.b > div > div > div > div > a:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.heamen > div.ba > div.baa > div.b > div > div > div > a:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.heamen > div.ba > div.baa > div.b > div > div > a:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.heamen > div.ba > div.baa > div.b > div > div > span:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.heamen > div.ba > div.bab{ margin-top:40px; margin-left: 15px; position:absolute; top:0; right: 0;}
.heamen > div.ba > div.bab > span{display: flex; align-items: center; color:white; border:1px solid rgb(255,217,0); border-radius:5px; padding:7px 13px; background:rgb(255,217,0); color:black; cursor:pointer;}
.heamen > div.ba > div.bab > span > i{ margin:5px 10px 0 0;}
.heamen > div.ba > div.bab > div.a{ width: 250px; height: auto; background:white; position:absolute; top:100%; right: 0; padding:20px; box-shadow:0 0 5px 0 rgb(255,217,0); display:none;}
.heamen > div.ba > div.bab > div.a > span.a{ width: 100%; display:block; font-weight: 600; text-align: center; margin-bottom:20px; color:rgba(0,0,0,0.8);}
.heamen > div.ba > div.bab > div.a > input{ width: 100%; padding:7px 13px; border-radius:5px; border:1px solid rgba(0,0,0,0.4); margin-bottom:10px;}
.heamen > div.ba > div.bab > div.a > div{ width: 100%;  position:relative; margin-bottom:25px;}
.heamen > div.ba > div.bab > div.a > div > input{ width: 100%; border:1px solid rgba(0,0,0,0.4); border-radius:5px; padding:7px 13px; }
.heamen > div.ba > div.bab > div.a > div > span{ position:absolute; top:8px; right: 5px; font-size: 13px; cursor:pointer;}
.heamen > div.ba > div.bab > div.a > button{ display:block; background:rgb(255,217,0); border:none; padding:7px 13px; color:black; font-weight: 600; margin:0 auto; border-radius:5px; cursor:pointer;}
.heamen > div.ba > div.bab > div.a > span.b{ display:block; text-align: center; color:rgba(0,0,0,0.8); font-size: 14px; margin-top:20px; cursor:pointer;}
.heamen > div.ba > div.bab > div.b{ border:1px solid rgba(255,255,255,0.8); border-radius:5px;  padding:7px 10px; color:white; position:relative; font-size: 14px;}
.heamen > div.ba > div.bab > div.b > div.a{cursor:pointer;}
.heamen > div.ba > div.bab > div.b > div.a > i.a{ margin-right: 5px;}
.heamen > div.ba > div.bab > div.b > div.a > i.b{ margin-left: 10px;}
.heamen > div.ba > div.bab > div.b > div.b{ width: 200px; height: auto; display:flex; flex-direction: column; position:absolute; top:100%; right: 0; background:white; color:black; box-shadow:0 15px 15px rgba(255,255,255,0.6); display:none;}
.heamen > div.ba > div.bab > div.b > div.b > span{ padding:7px 15px; cursor:pointer;}
.heamen > div.ba > div.bab > div.b > div.b > span.a{ border-bottom: 2px solid rgba(0,0,0,0.2); display:none;}
.heamen > div.ba > div.bab > div.b > div.b > span:hover{ background:rgb(233,208,46); color:black; font-weight: 600;}

/*------------------------------------------------------------------------------------------------------------*/
.misiovision{ width: 100%; height: auto; display:grid; grid-template-columns:1fr 1fr 1fr; align-content: center; justify-items: center; padding: 20px; background: black;}
.misiovision img{ width: 80%; height: auto;}

/* =========================== */
.catalogo{ width: 150px; height: 35px; background:rgba(255, 230, 1, 1); color:rgba(0,0,0,0.8); position:fixed; bottom:0px; left: 10px; z-index: 1; display:flex; justify-content: center; align-items: center; border-radius:5px 5px 0 0; font-weight: 600; cursor:pointer; z-index: 2;}
.catalogo > i{ width: 50px; height: 100%; background:rgb(255,218,0); display: flex; justify-content: center; align-items: center; font-size: 25px; border-radius:5px 0 0 0;}
.catalogo > span{ width: 100px; text-align: center;}
/* ============================= */

/* ========================================================= */
.domicil{ width: 500px; background: black; color: rgb(233,208,46); font-size:30px; font-family: sans-serif; font-weight: 600; text-align: center; position: fixed; bottom:0; left: 50%; transform: translateX(-50%); justify-content: center; display:flex; align-items: center; border-radius:20px 20px 0 0; z-index: 1;}
.domicil img{ width: 100px; margin-right: 20px;}
.casa{ position: absolute; top:150px; right: 100px; width: 200px;}
/* ========================================================= */
.prompt { background-image: url('../images/launcher-icon-4x.png'); background-position-x: 1rem; background-position-y: 1.5rem; background-repeat: no-repeat; background-size: auto 40%; background-color: #ffffff; box-shadow: 0 20px 40px 0 rgba(91, 107, 174, 0.15); padding: 1.5rem 1rem 0.5rem 5rem; position: fixed; transition: all 0.5s ease-in-out; width: 100vw; z-index: 9;}
.prompt .tex1{font-weight: 600; font-size:14px;}
.prompt > small{font-size:12px;}
.prompt button{border:none; background: none; font-weight: 600; margin:0 15px; cursor:pointer;}
.prompt .add{ color:royalblue; }
.prompt .boto{text-align: right; padding:5px 20px 20px 0px;}
.prompt.show {transition-delay: 3s; bottom: 0; opacity: 1;}
.prompt.hide { bottom: -100%; opacity: 0;}

/* ================================================= */


.baregiexi{width: 100%; height: 100vh; position:fixed; top:0; left: 0; background: rgba(0,0,0,0.6); z-index: 5; display:none;}
.baregiexi > div{width: 400px; height: auto; margin:30px auto 0; background:white; box-shadow:0 0 15px 3px rgba(255,255,255,1); border-radius:5px; display:flex; justify-content: center; align-items: center; flex-direction:column; padding:20px 0 20px; position:relative; overflow: hidden;}
.baregiexi > div > i.a{ width: 50px; height: 50px; color:rgba(100, 243, 64, 0.6); border:1px solid rgba(100, 243, 64, 0.5); border-radius:50%;  display:flex; justify-content: center; align-items: center; font-size: 25px;}
.baregiexi > div > i.b{ width: 50px; height: 50px; color:rgba(243, 64, 64, 0.6); border:1px solid rgba(243, 64, 64, 0.5); border-radius:50%;  display:flex; justify-content: center; align-items: center; font-size: 25px;}
.baregiexi > div > h3{ color:rgba(0,0,0,0.8); margin-top:15px; position:relative; text-align: center;}
.baregiexi > div > div.a{ width: 100%; height: auto; margin:20px 0 5px; text-align: center;}
.baregiexi > div > div.b{ width: 100%; height: auto; padding:0 15px; text-align: justify; color:rgba(0,0,0,0.6); font-size: 14px;}
.baregiexi > div > div.b > span.ba{display:block; margin:5px 0; text-align: center; color:black; }
.baregiexi > div > div.b > span.bb{display:block; color:blue; text-decoration: underline; cursor:pointer; margin:5px 0; position:relative; }
.baregiexi > div > div.b > span.bb > i{ color:black; position: absolute; top:93%; left: 70%; transform: rotate(-25deg);}
.baregiexi > div > button{ margin-top: 10px;}
.baregiexi > div > button:hover{ background: greenyellow; color:white; border:none;}
.baregiexi > div > div.c{ padding:10px; font-size: 14px; color:rgba(0, 0, 255, 0.658); display:none;}

/* ==================================================================================== */

.categorias{ width: 100%; height: auto; background:white; margin:40px 0 40px;}
.categorias > h3{ width: 100%; display:block; text-align: center; letter-spacing: 1.3px; color:rgba(0,0,0,0.8);}
.categorias > div.a{ width: 100%; max-width: 1000px; margin:10px auto 0;}
.item{ width: 100%; height: 250px;}
.item > a{ display:block; width: 100%; height: 100%; text-decoration: none; color:black;}
.item > a > div{ width: 100%; height: 200px;}
.item > a > div > img{ width: 100%; height: 100%;}
.item > a > span{ display:block; width: 100%; height: 50px; display:flex; justify-content: center; align-items: center; text-align: center; color:black;}
.owl-dots{display:none;}
/* ===================================== */
.newproduct{ width: 100%; max-width: 1000px; height: auto;  margin:40px auto 40px;}
.newproduct > h3{ width: 100%; display:block; text-align: left; letter-spacing: 1.3px; border-bottom:2px solid rgba(0,0,0,0.1); padding:3px 15px 10px; color:rgba(0,0,0,0.8); }
.newproduct > div.a{ width: 100%; margin:10px auto 0;}
.item2{ width: 100%; height: 250px; border:2px solid rgba(0,0,0,0.1); border-radius:5px;}
.item2:hover{ border:2px solid rgba(0,0,0,0.4);}
.item2 > a{ display:block; width: 100%; height: 100%; text-decoration: none; color:black; padding:10px;}
.item2 > a > div{ width: 100%; height: 200px;}
.item2 > a > div > img{ width: 100%; height: 100%;}
.item2 > a > span{ display:block; width: 100%; height: 50px; display:flex; justify-content: flex-start; align-items: center; text-align: left; color:black; font-size:14px;}
/* ==================== */

.footer{ width: 100%; height: auto; padding:0px 0px 50px;  background:black;}
.footer > div.a{ width: 100%; max-width: 1100px; margin:0 auto; padding:10px; display:flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap;}
.footer > div.a > div{ width: 33%; height: auto;}
.footer > div.a > div > h3{ color:rgb(255, 208, 0); }
.footer > div.a > div > div > span{ display:block; margin:5px 0; color:rgba(255,255,255,0.8); cursor:pointer;}
.footer > div.a > div > div > a{ display:block; margin:5px 0; color:rgba(255,255,255,0.8); cursor:pointer;}
.footer > div.a > div > div > span > i{ margin-right: 5px;}
.footer > div.a > div > div > span.n{cursor:initial;}
.footer > div.b{ width: 100%; max-width: 1100px; margin:0 auto; text-align: left; color:rgb(255,208,0);}

/* ======================== */

.bamarcas{ width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(0,0,0,0.6); z-index: 2; display:none;}
.bamarcas > div{ width: 1000px; height: auto; background:white; border-radius:5px; box-shadow:0 0 15px 0 black; margin:40px auto 0; position:relative; }
.bamarcas > div > h3{ padding:13px 15px 7px; font-size:16px; margin:0; background:rgb(233,208,46); color:rgba(0,0,0,1); border-radius:5px 5px 0 0;   }
.bamarcas > div > h3 > span{ color:rgba(0,0,0,0.6); font-size:14px; margin-left:5px;}
.bamarcas > div > i{ position:absolute; top:7px; right:10px; font-size: 23px; color:rgba(0, 0, 0, 0.8); cursor:pointer;}
.bamarcas > div > div{ width: 100%; height: auto; max-height: 80vh; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; padding:20px; overflow: auto; }
.bamarcas > div > div > a{ display:block; width: 130px; height: 130px; position:relative; overflow: hidden; border:1px solid rgba(0,0,0,0.1); border-radius:5px; margin:10px; }
.bamarcas > div > div > a > img{ width: 100%; height: auto; position:absolute; top:50%; left: 0; transform:translateY(-50%); }
.bamarcas > div > div > a > img:hover{ width: 110%; left: -5%;}

/* ======================== */

.baregicli{ width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(0,0,0,0.4); z-index: 2; display:none;}
.baregicli > div{ width: 600px; height: auto; background:white; border-radius:5px; margin:50px auto 0; position:relative; border-radius:5px;padding:0 0 30px; box-shadow: 0 0 15px 0 rgba(255,255,255,0.8);}
.baregicli > div > i{position:absolute; top: 5px; right: 10px; color:red; font-size:22px; cursor: pointer;}
.baregicli > div > h3{background:black; color:rgb(234, 207, 30); padding:20px 35px 10px;  font-size:20px; border-radius:5px 5px 0 0; letter-spacing:1.5px;}
.baregicli > div > div.a{display:grid; grid-template-columns: 1fr 1fr; margin:20px auto 10px; padding:5px;}
.baregicli > div > div.a label{display:flex; flex-direction: column; margin:5px 3px;color:rgba(0,0,0,0.6); font-size:14px; position:relative;}
.baregicli > div > div.a label.cc > div{ color:red; font-size: 12px; display:none;}
.baregicli > div > div.a label.f > div.fa{ width: 100%; position:relative; border-radius: 5px; border:1px solid rgba(0,0,0,0.1); padding:5px 10px; margin-top: 5px; }
.baregicli > div > div.a label.f > div.fa i{position:absolute; top:5px; right: 5px; }
.baregicli > div > div.a label.f > div.ab{ width: 100%; height: auto; position:absolute; top:100%; left: 0; background:white; border-right: 1px solid rgb(255, 255, 255); border-left: 1px solid rgb(255, 255, 255); border-bottom:1px solid rgb(255, 255, 255); z-index: 1; border-radius: 0 0 5px 5px; display:none;}
.baregicli > div > div.a label.f > div.ab > div.aba{position: relative; padding:10px;}
.baregicli > div > div.a label.f > div.ab > div.aba > input{width: 100%; padding:10px 15px; background:none; border:1px solid black;}
.baregicli > div > div.a label.f > div.ab > div.aba > i{position: absolute; top:23px; right: 17px; font-size: 20px; cursor:pointer;}
.baregicli > div > div.a label.f > div.ab > div.abb{ width: 100%; height: 150px; display:flex; flex-direction: column; border-radius: 0 0 5px 5px; overflow: auto;}
.baregicli > div > div.a label.f > div.ab > div.abb > span{ width: 100%; text-align: left; padding:5px 10px;}
.baregicli > div > div.a label.f > div.ab > div.abb > span:hover{background:rgb(0, 0, 255); color:white; font-weight: 600;}
.baregicli > div > div.a label.f > div.ab > div.abb::-webkit-scrollbar{width: 5px;}
.baregicli > div > div.a label.f > div.ab > div.abb::-webkit-scrollbar-thumb{ background-color: blue;}
.baregicli > div > div.a label.f > div.ab > div.abb::-webkit-scrollbar-thumb{ background-color: blue; border-radius: 10px;}
.baregicli > div > div.a label.g{ width: 100%; display:flex; }
.baregicli > div > div.a label.g > div{ width: 100%; margin-top:5px; display:flex; align-items: center;}
.baregicli > div > div.a label.g > div > span{ width: 100px; display:inline-block; padding:5px; background:blue; color:white; border-radius:5px; text-align: center; cursor:pointer; }
.baregicli > div > div.a label.g > div > i.a{ color:green; font-size: 20px; width: 30px; height: 30px; display:flex; justify-content: center; align-items: center; border:2px solid green; border-radius:5px; margin-left: 10px; display:none;}
.baregicli > div > div.a label.g > div > i.b{ color:rgb(254, 3, 3); font-size: 20px; width: 30px; height: 30px; display:flex; justify-content: center; align-items: center; border:2px solid rgb(254, 3, 3); border-radius:5px; margin-left: 10px; display:none;}
.baregicli > div > div.a input{ border-radius:5px; border:1px solid rgba(0,0,0,0.1); padding:5px 10px; margin-top:4px; }
.baregicli > div > div.a select{ border-radius:5px; border:1px solid rgba(0,0,0,0.1); padding:5px 10px; margin-top:4px; }
.baregicli > div > div.a div.cuentexist{font-size: 12px; color:red; display:none;}
.baregicli > div > div.b{ display:flex; justify-content: flex-end; padding:10px;}
.baregicli > div > div.b button{ border:1px solid rgba(0,0,0,0.2); border-radius:5px; background:none; font-weight: 600; padding:5px 10px; cursor:pointer; margin:0 5px;}
.baregicli > div > div.b button.creperfi{ background:rgb(234, 207, 30); color: rgb(0, 0, 0); border:none;}
/* ========== */

.banreexi{ width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(0,0,0,.6); z-index: 3; display:flex; justify-content: center; align-items: center; display: none;}
.banreexi > div{ background:white; width: 300px; height: auto; border-radius: 10px; box-shadow: 0 0 15px 0 white; display:flex; flex-direction: column; transform: translateY(-50%); justify-content: center; align-items: center; padding:20px;}
.banreexi > div > i.a{ color:green; width: 50px; height: 50px; border:2px solid green; display:flex; justify-content: center; align-items: center; border-radius:50%; }
.banreexi > div > span.a{ color:rgba(0,0,0,0.8); margin-top:20px;}
.banreexi > div > span.b{ margin-top:20px; color:rgba(0,0,0,0.9); font-weight: 600; text-align: center;}
.banreexi > div > button{ margin-top:20px; background:black; color:rgb(233,208,46); }


/* ================PRODUCTOS============= */
.headpro{ width: 100%; background:rgb(0, 0, 0); }
.headpro > div.ba{ width: 100%; max-width: 1100px; margin:0 auto; display:flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; position:relative; z-index: 1;}
.headpro > div.ba > img{ width: 100px; height: auto; position: absolute; top:0; left: 0; padding: 50px 15px 5px 15px;  background:black; margin-right: 10px;}
.headpro > div.ba > div.baa{ display:flex; flex-wrap: wrap; flex-direction: column; margin-top:10px; justify-content: center; align-items: center; padding-bottom: 10px;}
.headpro > div.ba > div.baa > div.a{ width: 80%; padding:5px; margin-bottom: 5px;}
.headpro > div.ba > div.baa > div.a > div{ width: 100%; height: 40px; border-radius: 5px 5px 5px 5px; border:1px solid rgba(0,0,0,.3); box-shadow:0 0 7px 1px rgba(0,0,0,.3); padding: 10px 10px 10px 20px; display:flex; justify-content:space-between; background:white;}
.headpro > div.ba > div.baa > div.a > div > input{border:none; color: rgba(0,0,0,.5); font-size: 15px; width: 90%; outline:0px;}
.headpro > div.ba > div.baa > div.b{ display:flex;}
.headpro > div.ba > div.baa > div.b > a{ color:white; padding:5px 15px; display:flex; font-size:16px; font-weight:600;}
.headpro > div.ba > div.baa > div.b > span{ color:white; padding:5px 15px; display:flex; font-size:16px; font-weight:600;}
.headpro > div.ba > div.baa > div.b > div{ position:relative; margin:0; padding:0;}
.headpro > div.ba > div.baa > div.b > div > a{ color:white; padding:5px 15px; display:flex; font-size:16px; font-weight:600;}
.headpro > div.ba > div.baa > div.b > div > div{ width: 800px; height: auto; position:absolute; top:100%; left: 0; display:flex; background:black; display:flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; overflow: hidden; display:none;}
.headpro > div.ba > div.baa > div.b > div > div > a{ display:block; width: 32%; color:rgb(233,208,46); padding:5px 10px; margin:5px;}
.headpro > div.ba > div.baa > div.b > div > div > a:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.headpro > div.ba > div.baa > div.b > div > a:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.headpro > div.ba > div.baa > div.b > a:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.headpro > div.ba > div.baa > div.b > span:hover{ background:rgb(255, 217, 0); color:black; border:none; border-radius:5px; cursor:pointer;}
.headpro > div.ba > div.bab{ margin-top:40px; margin-left: 15px; position:absolute; top:0; right: 0;}
.headpro > div.ba > div.bab > span{display: flex; align-items: center; color:white; border:1px solid rgb(255,217,0); border-radius:5px; padding:7px 13px; background:rgb(255,217,0); color:black; cursor:pointer;}
.headpro > div.ba > div.bab > span > i{ margin:5px 10px 0 0;}
.headpro > div.ba > div.bab > div.a{ width: 250px; height: auto; background:white; position:absolute; top:100%; right: 0; padding:20px; box-shadow:0 0 5px 0 rgb(255,217,0); display:none;}
.headpro > div.ba > div.bab > div.a > span.a{ width: 100%; display:block; font-weight: 600; text-align: center; margin-bottom:20px; color:rgba(0,0,0,0.8);}
.headpro > div.ba > div.bab > div.a > input{ width: 100%; padding:7px 13px; border-radius:5px; border:1px solid rgba(0,0,0,0.4); margin-bottom:10px;}
.headpro > div.ba > div.bab > div.a > div{ width: 100%;  position:relative; margin-bottom:25px;}
.headpro > div.ba > div.bab > div.a > div > input{ width: 100%; border:1px solid rgba(0,0,0,0.4); border-radius:5px; padding:7px 13px; }
.headpro > div.ba > div.bab > div.a > div > span{ position:absolute; top:8px; right: 5px; font-size: 13px; cursor:pointer;}
.headpro > div.ba > div.bab > div.a > button{ display:block; background:rgb(255,217,0); border:none; padding:7px 13px; color:black; font-weight: 600; margin:0 auto; border-radius:5px; cursor:pointer;}
.headpro > div.ba > div.bab > div.a > span.b{ display:block; text-align: center; color:rgba(0,0,0,0.8); font-size: 14px; margin-top:20px; cursor:pointer;}
.headpro > div.ba > div.bab > div.b{ border:1px solid rgba(255,255,255,0.8); border-radius:5px;  padding:7px 10px; color:white; position:relative; font-size: 14px;}
.headpro > div.ba > div.bab > div.b > div.a{cursor:pointer;}
.headpro > div.ba > div.bab > div.b > div.a > i.a{ margin-right: 5px;}
.headpro > div.ba > div.bab > div.b > div.a > i.b{ margin-left: 10px;}
.headpro > div.ba > div.bab > div.b > div.b{ width: 200px; height: auto; display:flex; flex-direction: column; position:absolute; top:100%; right: 0; background:white; color:black; box-shadow:0 15px 15px rgba(255,255,255,0.6); display:none;}
.headpro > div.ba > div.bab > div.b > div.b > span{ padding:7px 15px; cursor:pointer;}
.headpro > div.ba > div.bab > div.b > div.b > span:hover{ background:rgb(233,208,46); color:black; font-weight: 600;}

/* =========== */

.seccion{ box-sizing: border-box; width: 100%; max-width: 1200px; margin:180px auto 40px; height: auto; background:white; display:flex; flex-direction:row; justify-content: space-between; }
.seccion > div.a{ width: 20%; height: auto; border-top:7px solid rgb(255, 217, 0); padding: 0 10px; position: sticky; top: 0;}
.seccion > div.a > div > i{ display:none;}
.seccion > div.a > div > h3{ padding: 10px 0px; font-size: 20px; font-weight:bold; font-family:sans-serif; margin:0; }
.seccion > div.a > div > div{ width: 100%; height: auto; display:flex; flex-direction:column; }
.seccion > div.a > div > div > h4{ font-size: 16px; margin:0; margin-top:15px; margin-bottom:10px;}
.seccion > div.a > div > div > a{color:black; width: 100%; height: auto; padding:5px 10px;}
.seccion > div.a > div > div > span.active{ width: 100%; height: auto; display:block; background:black; color:white;}
.seccion > div.a > div > div > span.title{ font-size:18px; font-weight:bold; padding:5px 0;}
.seccion > div.a > div > div > a:hover{background: black; color: rgb(255, 217, 0); cursor:pointer;}
.seccion > div.b{ width: 75%; height: auto;  }
.seccion > div.b > h3{width:100%; height: auto; text-align: center; padding: 5px 0 0; font-size:20px; font-family:sans-serif; font-weight: bold; margin-bottom:30px; }
.seccion > div.b > h3 span{border-bottom:2px solid rgb(255, 217, 0); padding:5px 15px;}
.seccion > div.b > div{ width: 100%; height: auto; display:flex; flex-wrap: wrap; justify-content: space-around; box-sizing: border-box; margin: 0 0 10px 0;}
.seccion > div.b > div > div{ width: 200px; height: 250px; display:flex; flex-direction:column; justify-content: center; align-items: flex-start; margin:0px 10px 30px; text-align: center; position: relative;  border-radius:10px;}
.seccion > div.b > div > div > div{ width: 100%; height: 200px; position:relative; overflow: hidden; border-radius:5px;}
.seccion > div.b > div > div > div > img{ width: 100%; height: auto; border-radius:10px; position:absolute; top:50%; left: 0; transform: translateY(-50%);}
.seccion > div.b > div > div > div > img:hover{cursor: pointer; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);}
.seccion > div.b > div > div > span.a{ width: 100%; display:block; text-align: center; margin:10px 0px 5px;  font-family:sans-serif; font-size:16px; color:rgba(0,0,0,0.6); }
.seccion > div.b > div > div > span.b{ width: 100%; color:rgba(255, 0, 0, 0.685); text-align:left; font-size:16px; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.seccion > div.b > div > div > span.b > span{ text-decoration:line-through;font-size: 14px;}
.seccion > div.b > div > span{ width: 100%; height: auto; display:flex; justify-content: center; align-items: center; margin-top:15px;}
.seccion > div.b > div > span > button{ background:rgb(233,208,46); color:black;  border:none; letter-spacing: 1.5px; }
.seccion > div.b > div > span > button:hover{ background:black; color:rgb(255, 208, 0);}
.seccion > div.b > div > span > button:active{ background:black; color:rgb(255, 208, 0);}
.seccion > div.c{ display:none;}
/* ========================================================================= */

.mostrarinfo{ width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(5, 5, 5, 0.349); z-index: 3; display:flex; justify-content: center; align-items: center; display:none; }
.mostrarinfo > div{ width: 100%; max-width: 1000px; height: 85vh; max-height: 600px; background: white; border-radius:10px; position:relative;}
.mostrarinfo > div > i{ position:absolute; top:10px; right: 15px; font-size:22px; color:red; cursor:pointer; z-index: 2;}
.mostrarinfo > div > h3{ width: 100%; margin:initial; border-radius:10px 10px 0 0; padding:15px 20px 12px; background:rgb(233,208,46); color:rgba(0, 0, 0, 0.9); position:absolute; top:0; left: 0; z-index: 1;}
.mostrarinfo > div > div.a{ width: 100%; height: 100%; display:flex; flex-direction:row; justify-content: space-between; padding:80px 15px 5px; overflow: auto; }
.mostrarinfo > div > div.a::-webkit-scrollbar{width: 7px;}
.mostrarinfo > div > div.a::-webkit-scrollbar-thumb{ background-color: rgb(76, 76, 76);}
.mostrarinfo > div > div.a::-webkit-scrollbar-thumb{ background-color: rgb(76, 76, 76); border-radius: 10px;}
.mostrarinfo > div > div.a > div.a{width: 100%;}
.mostrarinfo > div > div.a > div.a > div.a{ display:block; margin:0 auto; width: 400px; height: 400px; overflow: hidden; position:relative; border-radius: 10px;}
.mostrarinfo > div > div.a > div.a > div.a img{width: 100%; height: auto; position:absolute; top:50%; left: 0;  transform: translateY(-50%);}
.mostrarinfo > div > div.a > div.a > div.a img.ancalt{width: auto; height: 100%; position:absolute; top:0; left: 50%; transform: translateX(-50%);}
.mostrarinfo > div > div.a > div.a > div.b{ display:flex; justify-content: center; align-items: center; margin-top:10px;}
.mostrarinfo > div > div.a > div.a > div.b span{display:block; width: 60px; height: 60px; margin:0 10px; border:1px solid rgba(0, 0, 0, 0.281); padding:2px; background: rgb(232,232,232);}
.mostrarinfo > div > div.a > div.a > div.b span img{width: 100%; height: 100%; cursor:pointer;}
.mostrarinfo > div > div.a > div.b{ width: 100%;}
.mostrarinfo > div > div.a > div.b > h5{ color:rgba(0, 0, 0, 0.637); font-size:14px; margin-bottom:20px;}
.mostrarinfo > div > div.a > div.b p{color:rgba(0, 0, 0, 0.527); margin-bottom: 5px;}
.mostrarinfo > div > div.a > div.b .preciour{ color:red; font-size:20px; margin-bottom:20px;}
.mostrarinfo > div > div.a > div.b .colorur{color:rgba(0, 0, 0, 0.527); margin-bottom: 5px;}
.mostrarinfo > div > div.a > div.b .valcolorur{ display:flex; flex-wrap: wrap; margin-bottom:20px; justify-content: space-around;}
.mostrarinfo > div > div.a > div.b .valcolorur span{ width: 75px; height: 35px; display:inline-block; cursor:pointer; border:1px solid rgba(255, 255, 255, 0.828); box-shadow: 0 0 0px 1px rgba(7, 7, 7, 0.527); margin:0 5px;}
.mostrarinfo > div > div.a > div.b .valcolorur input{ width: 80px; height: 40px; cursor:pointer;}
.mostrarinfo > div > div.a > div.b .calibreur{color:rgba(0, 0, 0, 0.527); margin-bottom: 5px;}
.mostrarinfo > div > div.a > div.b .valcalibreur{ display:flex; flex-wrap: wrap; margin-bottom:20px; grid-gap: 10px;}
.mostrarinfo > div > div.a > div.b .valcalibreur button{ padding:7px 10px; cursor:pointer; border:1px solid rgba(0, 0, 0, 0.205); margin:0 5px;}
.mostrarinfo > div > div.a > div.b .valcalibreur button:hover{border:1px solid red;}
.mostrarinfo > div > div.a > div.b p.e{font-size: 12px;}
.mostrarinfo > div > div.a > div.b p.f{ width: 230px; display:flex; margin-bottom:20px; position:relative; align-items: center;}
.mostrarinfo > div > div.a > div.b p.f span.uni{width: 25px; height: 25px;  border-radius:50%; background: rgb(240,240,240); cursor:pointer; font-size:20px; display:flex; justify-content: center; align-items: center;}
.mostrarinfo > div > div.a > div.b p.f span.texcan{font-size:12px; margin-left: 10px;}
.mostrarinfo > div > div.a > div.b p.f input{ width: 30px; border:none; text-align: center; padding:0;}
.mostrarinfo > div > div.a > div.b > div.a button.g{ background:rgb(233,208,46); color:rgba(0, 0, 0, 0.9); border:none; border-radius:5px; font-weight: 600; cursor:pointer; margin-top:20px; width: 140px; height: 35px; font-size: 14px;}
.mostrarinfo > div > div.a > div.b > div.a button.g:active{background:black;}

/* ============================ */

.banconcart{ width:100%; height:100vh; position:fixed; top:0; left:0; z-index:3; background:rgba(0,0,0,0.6); display:none;}
.banconcart > div{ width: 300px; height: 100%; overflow: auto; padding-bottom: 50px; background:white; position:relative; box-shadow: 1px 0px 10px 0 rgb(255, 255, 255);}
.banconcart > div::-webkit-scrollbar{width: 5px;}
.banconcart > div::-webkit-scrollbar-thumb{ background-color: rgb(46, 46, 46);}
.banconcart > div::-webkit-scrollbar-thumb{ background-color: rgb(46, 46, 46); border-radius: 10px;}
.banconcart > div > i{position:absolute; top:15px; right: 15px; color:rgb(67, 67, 67); font-size: 25px; cursor:pointer; }
.banconcart > div > img{ display:block; width: 60%; margin:30px auto 0;}
.banconcart > div > img.cart{ width: 30%; margin:15px auto 20px;}
.banconcart > div > span{display:block; margin:20px 0; padding:0px 20px; text-align: center; font-size: 16px; }
.banconcart > div > span.b{ text-decoration: underline; color:blue; cursor:pointer;}
.banconcart > div > span.c{padding:0 5px; margin-top:30px; }
.banconcart > div > span.d{font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content:center;}
.banconcart > div > span.d > i{ font-size: 100px;}
.banconcart > div > div.a{ width: 95%; margin:0 auto 10px;}
.banconcart > div > div.a > div{margin-bottom:5px; padding:0 10px 5px; display:flex; justify-content: flex-start; align-items: flex-start;}
.banconcart > div > div.a > div > span.a{ display:inline-block; width: 50px; height: 50px; border-radius:5px; overflow: hidden; margin-right: 10px;}
.banconcart > div > div.a > div img{ width: 100%; height: auto; margin-top:50%; transform: translateY(-50%); }
.banconcart > div > div.a > div > span.b{ width: 100%; display:flex; flex-direction: column; position:relative;}
.banconcart > div > div.a > div > span.b > span{font-size: 14px;}
.banconcart > div > div.a > div > span.b > span.bb{ font-weight: 600; margin-top:3px;}
.banconcart > div > div.a > div > span.b > span.bc{margin-top: 5px;}
.banconcart > div > div.a > div > span.b > span.bc > span{ width: 70px; display:flex; padding:0 5px; justify-content: space-around; align-items: center; border:1px solid rgba(0,0,0,0.2); border-radius:5px; }
.banconcart > div > div.a > div > span.b > span.bc > span > input{ width: 35px; padding:0; text-align: center; background:none; border:none;}
.banconcart > div > div.a > div > span.b > span.bc > span > span.a{width:15px; display:flex; justify-content: center; align-items: center; font-size: 20px;}
.banconcart > div > div.a > div > span.b > span.bc > span > span.b{width:15px; display:flex; justify-content: center; align-items: center; font-size: 18px;}
.banconcart > div > div.a > div > span.b > span.bc > span > span:hover{color:blue; cursor:pointer;}
.banconcart > div > div.a > div > span.b > span.bc > span > span:active{color:red;}
.banconcart > div > div.a > div > span.b > span.bd{ position:absolute; top:20px; right: 5px; color:red; font-size: 12px; cursor:pointer;}
.banconcart > div > div.a > p{display:flex; flex-direction: column; align-items: flex-end; padding:0 20px 10px;}
.banconcart > div > div.a > p > span{display:flex; font-size: 14px;}
.banconcart > div > div.a > p > span > span.a{ display:flex; flex-direction: column; width: 80px; text-align: right; margin-right: 10px;}
.banconcart > div > div.a > p > span > span.b{ display:flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;}
.banconcart > div > div.a > p > span > span.b > span.bc{font-weight: 600;}
.banconcart > div > div.a > p > span > span.b > span.b{ color:blue; text-decoration: underline; cursor:pointer;}
.banconcart > div > div.b{ width: 290px; position:fixed; bottom: 0; left: 0; background:white; padding:10px 15px; display: flex; justify-content: space-around; align-items: center;}
.banconcart > div > div.b > span{font-size: 16px;}
.banconcart > div > div.b > span > span{font-weight: 600;}
.banconcart > div > div.b > button{ background:rgb(233,208,46); color:black; border:none; padding:7px 15px; letter-spacing: 1px}

/* ====================== */

.bamoinmepag{width: 100%; height: 100vh; position:fixed; top:0; left: 0; z-index: 3; background:rgba(0,0,0,0.6); overflow: auto; display:none; overflow: auto;}
.bamoinmepag > div{ width: 450px; height: auto; margin:100px auto 0; background:white; border-radius:5px; position:relative; box-shadow: 0 0 10px 0 rgba(255,255,255,0.6);}
.bamoinmepag > div > i{ position:absolute; top:5px; right:10px; cursor:pointer; color:rgb(43, 43, 43); font-size: 22px; }
.bamoinmepag > div > h3{ background:rgb(233,208,46); color:rgba(0, 0, 0, 0.8); padding:10px 15px; border-radius:5px 5px 0 0;}
.bamoinmepag > div > h3 > i{ margin-right:5px;}
.bamoinmepag > div > div{ overflow: auto; padding-bottom: 20px;}
.bamoinmepag > div > div > div.a{ padding:15px; color:rgba(0,0,0,0.6); }
.bamoinmepag > div > div > div.a > span{color:red;}
.bamoinmepag > div > div > div.b{ width: 90%; height: auto; margin:0 auto;}
.bamoinmepag > div > div > div.b > div{ width: 100%; height: auto; border-radius:5px; border:1px solid rgb(68, 68, 68); padding-bottom: 10px; position: relative; margin-bottom: 10px;}
.bamoinmepag > div > div > div.b > div > h4{ padding:8px 15px; background:rgb(68, 68, 68); color:white; display:flex; margin:0; justify-content: space-between; align-items: center;}
.bamoinmepag > div > div > div.b > div > h4 i{ margin-right: 5px;}
.bamoinmepag > div > div > div.b > div > div.a{ display:flex; justify-content: space-around; flex-wrap: wrap; align-items: center; margin-top:10px;}
.bamoinmepag > div > div > div.b > div > div.a > span{ width: 120px; height: 50px; border:1px solid rgba(0,0,0,0.2); border-radius: 5px; display:flex; justify-content: center; align-items: center; text-align: center; padding:8px; position:relative; cursor:pointer;}
.bamoinmepag > div > div > div.b > div > div.a > span > i{ position:absolute; bottom: -10px; right: 0px; font-size: 25px; opacity: 0.2; transform: rotate(-25deg); }
.bamoinmepag > div > div > div.b > div > div.a > span.mesepag{border:1px solid rgb(100, 250, 1); background:rgba(100, 250, 1,0.2); }
.bamoinmepag > div > div > div.b > div > a{ position:absolute; bottom: -5px; right: 3px; color:greenyellow; cursor:pointer; font-size: 30px;}
.bamoinmepag > div > div > div.c{display:flex; justify-content: flex-end; padding:15px 15px 0; margin-top: 10px; }
.bamoinmepag > div > div > div.c > button{ background:rgb(233,208,46); color:black; border:none; letter-spacing: 0.5px; }
.bamoinmepag > div > div > div.b > div > div.a > div{ width: 100%; display:flex; flex-direction: column; align-items: flex-end; padding:0 10px; display:none;}
.bamoinmepag > div > div > div.b > div > div.a > div img{ width: 100px; margin-right: 15px;}
.bamoinmepag > div > div > div.b > div > div.a > div > span{ width: 100%; display:flex; align-items: center; justify-content: flex-start;}
.bamoinmepag > div > div > div.b > div > div.a > div > span > span.a{font-weight: 600; font-size: 20px; margin-right: 10px;}
.bamoinmepag > div > div > div.b > div > div.a > div > p{margin:10px 0; color:rgba(0,0,0,0.6); font-size: 14px;}

.bamoinmepag > div > div > div.b > div > div.b{ width: 100%; margin:20px 0 0; font-size:14px; padding:10px;}
.bamoinmepag > div > div > div.b > div > div.b > div{ margin-top:5px; display:flex; flex-direction: column; justify-content: center; align-items: center;}
.bamoinmepag > div > div > div.b > div > div.b > div > div{ display:flex; flex-wrap: wrap;}
.bamoinmepag > div > div > div.b > div > div.b > div > div > span{ width: 35px; height: 35px; display:flex; justify-content: center; align-items: center; border:1px solid rgba(0,0,0,0.4); margin:5px; border-radius:5px; cursor:pointer; font-size: 14px; }
.bamoinmepag > div > div > div.b > div > div.b > div > div > span.acti{ background:rgb(233,208,46); color:black; font-weight: 600; border:none;}

/* ========================================= */
.bacargad{width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(0,0,0,0.8); z-index: 3; display:flex; justify-content: center; align-items: center; flex-wrap: wrap; flex-direction: column; display:none;}
.bacargad > img.a{ width: 150px; margin-bottom:40px;}
.bacargad > img.b{ width:60px;}
.bacargad > div{ color:white; margin-top:40px; letter-spacing: 1.5px; font-size:20px; text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);}

/* ========================================== */

.bacomexico{ width: 100%; height: 100vh; background:rgba(0,0,0,0.8); position:fixed; top:0; left: 0; z-index:3; display:none;}
.bacomexico > div{ width: 400px; border-radius:10px; margin:30px auto 0; background:white; padding:10px; position:relative; box-shadow: 0 0 15px 0 rgba(255,255,255,0.6); transition: all 4s; overflow: auto;}
.bacomexico > div > i.a{ position:absolute; top: 10px; right:10px; font-size: 20px; color:red; cursor:pointer; }
.bacomexico > div > span{display:block; width: 100%; height: auto; text-align: center; margin:10px 0;}
.bacomexico > div > span > i.b{ font-size: 70px; color:greenyellow;}
.bacomexico > div > span > i.c{ font-size: 70px; color:red;}
.bacomexico > div > span > span{ display:block; color:rgba(0,0,0,0.8); letter-spacing: 1.2px;}
.bacomexico > div > div{ display:flex; flex-direction: column; align-items: center; flex-wrap: wrap; justify-content: center;}
.bacomexico > div > div > span.a{ display:block; width: 100%; text-align: justify; letter-spacing: 1.1px; color:rgba(0,0,0,0.9);}
.bacomexico > div > div > span.a > strong{ color:blue;}
.bacomexico > div > div > span.b{ display:block; text-align: center; margin:10px 0; font-size:20px;}
.bacomexico > div > div > span.c > span{ color:blue; cursor:pointer; text-decoration: underline;}
.bacomexico > div > div > span.d{ width: 100%; display:flex; justify-content: flex-end; margin-top:15px; padding:5px 10px 10px 0;}
.bacomexico > div > div > span.d > button{ background:blue; color:white; border:none; letter-spacing:1px; }

/* ================================================= */
.baenvicor{ width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(0,0,0,0.6); display:none; z-index: 2;}
.baenvicor > div{ width: 300px; height: auto; background:white; margin:50px auto; border-radius:5px; box-shadow:0 0 15px 0 black; padding:15px;}
.baenvicor > div > div.a{ font-weight: 600; margin-bottom: 15px; font-size: 20px; letter-spacing: 0.5px;}
.baenvicor > div > div.b{ color:rgba(0,0,0,0.8); margin-bottom: 10px;}
.baenvicor > div > input{ width: 100%; border:1px solid rgba(0,0,0,0.6); margin-bottom: 10px;}
.baenvicor > div > div.c{ display:flex; justify-content: flex-end;}
.baenvicor > div > div.c > button{ margin:0 3px;}
.baenvicor > div > div.c > button.b{ border:none; background:blue; color:white; }
.baenvicor > div > div.c > button:active{ background:rgba(0,0,0,0.8);}

/* ==================================================== */


.bancotiz{ width: 100%; height: 100vh; background:rgba(0,0,0,0.6); position:fixed; top:0; left:0; z-index: 2; display:none;}
.bancotiz > div{ width: 500px; background:white; margin:40px auto 0; border-radius:5px; box-shadow: 0 0 15px 0 white; position:relative;}
.bancotiz > div > h3{ background:rgb(233,208,46); color:black; padding:7px 15px 5px; border-radius:5px 5px 0 0;}
.bancotiz > div > h3 > span{ font-size: 12px; margin-left: 5px; font-weight: 400;}
.bancotiz > div > i{ position:absolute; color:rgba(0,0,0,0.6); cursor:pointer; position:absolute; top:5px; right:10px; font-size:20px; } 
.bancotiz > div > div{ display:flex; flex-wrap: wrap; width: 100%; padding:10px; margin-top:15px; justify-content: space-between;}
.bancotiz > div > div > label{ width: 48%; color:rgba(0,0,0,0.8);  margin:5px 0; font-size: 14px;}
.bancotiz > div > div > label > input{ width: 100%; margin-top:5px;}
.bancotiz > div > div > textarea{ width: 100%; height: 100px; margin:15px 0;}
.bancotiz > div > div > div{ width: 100%; display:flex; justify-content: center;}
.bancotiz > div > div > div > button{ background:rgb(233,208,46); color:black; border:none; }
/* ===================================== */

.bancompr{ width: 100%; height: 100vh; background:rgba(0,0,0,0.6); position:fixed; top:0; left:0; z-index: 2; overflow: auto; display:none;}
.bancompr > div{ width: 500px; background:white; margin:40px auto 0; border-radius:5px; box-shadow: 0 0 15px 0 white; position:relative;}
.bancompr > div > h3{ background:rgb(233,208,46); color:black; padding:7px 15px 5px; border-radius:5px 5px 0 0; margin:0;}
.bancompr > div > h3 > span{ font-size: 12px; margin-left: 5px; font-weight: 400;}
.bancompr > div > i{ position:absolute; color:rgba(0,0,0,0.6); cursor:pointer; position:absolute; top:5px; right:10px; font-size:20px; } 
.bancompr > div > div{ display:flex; flex-wrap: wrap; width: 100%; padding:10px; margin-top:5px; justify-content: space-between;}

.bancompr > div > div > div.a{ width: 100%; height: 90px; background:rgba(0,0,0,0.1); border-radius:5px; margin-bottom:10px; overflow: hidden; }
.bancompr > div > div > div.a > h4{ width: 100%; text-align: right; margin:0; padding:7px 15px 3px; border-bottom:1px solid white; color:rgba(0,0,0,0.7); font-size: 14px; }
.bancompr > div > div > div.a.verdet{overflow: initial; height: auto;}
.bancompr > div > div > div.a > div{ width: 100%; height: auto; padding:10px; position:relative; display:flex; flex-wrap: wrap; flex-direction:column; }
.bancompr > div > div > div.a > div > span.a{ margin-bottom:10px; font-size: 14px;}
.bancompr > div > div > div.a > div > span.a > span{ font-weight: 600;}
.bancompr > div > div > div.a > div > span.b{ text-decoration: underline; font-size:14px; margin-bottom:10px;}
.bancompr > div > div > div.a > div > span.c{ font-size: 14px; color:rgba(0,0,0,0.6); letter-spacing: 1.2px;}
.bancompr > div > div > div.a > div > span.d{ font-size: 15px; position:absolute; top:10px; right: 15px; }
.bancompr > div > div > div.a > div > span.e{ background:rgb(233,208,46); color:black; border-radius:5px; padding:5px 10px; position:absolute; top: 40px; left: 50%; transform: translateX(-50%); font-size: 12px; cursor:pointer;}
.bancompr > div > div > div.a > div > span.f{ padding:2px 5px; color:rgba(0,0,0,0.8); font-size: 13px;}
.bancompr > div > div > div.a > div > span.g{ width: 100%; display:flex; justify-content: flex-end; position:relative;}
.bancompr > div > div > div.a > div > span.g > span{ display:flex; flex-direction:column; justify-content: flex-end; color:rgba(0,0,0,0.7); margin:3px 5px; font-size: 14px;}
.bancompr > div > div > div.a > div > span.g > span > span{ width: 100%; display:block; text-align: right;}
.bancompr > div > div > div.a > div > span.g > span.c{ position:absolute; top:100%; right: 0; margin:0;}

.bancompr > div > div > div.b{ width: 100%; display:flex; justify-content: center; margin-top: 15px;}
.bancompr > div > div > div.b > button{ background:rgb(233,208,46); color:black; border:none; }

/* ================================================= */

.camcontr{ width: 100%; height: 100vh; position:fixed; top:0; left:0; background:rgba(0, 0, 0, 0.493); display:flex; justify-content: center; align-items: center; z-index: 3; display:none;}
.camcontr > div{width: 400px; height: auto; background:rgb(54, 54, 54); border-radius:5px; box-shadow: 0 0 5px 0 rgba(255,255,255,1);}
.camcontr > div h3{background:rgb(48, 48, 48); padding:15px 20PX; border-bottom: 1px solid rgba(255,255,255,0.6); font-size:16px; font-weight: 600; color:rgba(255, 255, 255, 0.767); position: relative; border-radius: 5px 5px 0 0; margin:0;}
.camcontr > div h3 i{ position:absolute; top:10px; right: 10px; font-size:20px; cursor:pointer; color:rgb(189, 189, 189);}
.camcontr > div h3 i:hover{transform:scale(1.18);}
.camcontr > div > div{display:flex; justify-content: center; align-items: center; flex-direction:column; padding:20px; position:relative; overflow: hidden;}
.camcontr > div > div input{margin:10px 0; padding:5px 10px; border-radius:5px; border:none; background:white; box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.6); width: 70%; height: auto; text-align:center; z-index: 1;}
.camcontr > div > div button{margin-top:20px; width: 100px; height:35px; display: flex; justify-content: center; align-items: center; background:rgb(233,208,46); color:black; font-weight: 600; border:none; cursor:pointer; z-index: 1;} 
.camcontr > div > div i{position:absolute; top:-30px; left: -80px; font-size:300px; opacity: 0.1; }

/* ================================================= */
.baesciupr{ width: 100%; height: 100vh; background:rgba(0,0,0,0.6); position:fixed; top:0; left: 0; z-index: 2; display:flex; justify-content: center; align-items: center;}
.baesciupr > div{ width: 500px; height: auto; background:white; border-radius:5px; box-shadow: 0 0 15px 0 rgba(0,0,0,1);}
.baesciupr > div > h3{ width: 100%; padding:10px 15px 6px; margin:0; background:rgb(233,208,46); color:black; font-size: 16px; border-radius:5px 5px 0 0; }
.baesciupr > div > div{ width: 100%; height: auto; display:flex; justify-content: space-around; padding:20px 10px 20px; }
.baesciupr > div > div > div{ width: 200px; height: 150px; overflow: hidden; margin:0 3px; position:relative; border-radius:10px; cursor:pointer;}
.baesciupr > div > div > div:hover{ transform: scale(1.03);}
.baesciupr > div > div > div > img{ width: 100%;}
.baesciupr > div > div > div > span{ width: 100%; height: auto; position:absolute; bottom: 0; left: 0; background:black; text-align:center; color:rgb(233,208,46); padding:5px 10px; }

/* ======================== */
.barecomini{ width:100%; height:100vh; background:rgba(0,0,0,0.6); position:fixed; top:0; left:0; z-index:3; overflow:auto;}
.barecomini > div{ width:400px; height:auto; background:white; margin:40px auto 0; border-radius:5px; box-shadow:0 0 15px 0 rgba(255,255,255,0.8); position:relative; }
.barecomini > div > h3{ width:100%; height:auto; position:absolute; top:0; left:0; background:blue; color:white; padding:8px 15px 5px; border-radius:5px 5px 0 0;}
.barecomini > div > h3 > span{ margin-left:5px; font-size: 14px; color:rgba(255,255,255,0.8); font-weight:400;}
.barecomini > div > i{ position:absolute; top:5px; right: 10px; font-size: 23px; color:red; cursor:pointer;}
.barecomini > div > div{ width:100%; height:auto; padding:50px 15px 20px; display:flex; justify-content: center; align-items: center; flex-direction: column;}
.barecomini > div > div > textarea{ width:100%; height: 100px; margin-bottom:10px; border:1px solid red; margin-top:10px;}
.barecomini > div > div > button.a{ width:80%; background:red; color:white; border:none; margin-bottom: 25px;}
/* ========================== */
.bangeresdom{width: 100%; height: 100vh; background:rgba(0,0,0,0.6); position:fixed; top:0; left: 0; z-index:3; display:none;}
.bangeresdom > div{ width: 400px; height: auto; margin:30px auto 0; background:white; box-shadow:0 0 15px 0 rgba(255,255,255,0.8); border-radius:5px; position:relative; display:flex; flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; padding:30px 20px 30px;}
.bangeresdom > div > i{position:absolute; top:5px; right: 10px; font-size: 23px; cursor:pointer; color:red;}
.bangeresdom > div > div{ display:flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center;}
.bangeresdom > div > div > i{ display:block; width: 80px; height: 80px; font-size: 50px;  border:1px solid green; border-radius:50%; display:flex; justify-content: center; align-items: center; margin-bottom:20px;}
.bangeresdom > div > div > i.a{color:green;}
.bangeresdom > div > div > i.b{color:red; border:1px solid red;}
.bangeresdom > div > div > span{ color:rgba(0,0,0,0.8); margin:5px 0; text-align: center;}
.bangeresdom > div > div > span > i.a{ color:green;}
.bangeresdom > div > div > span > i.b{ color:red;}
.bangeresdom > div > button{ width: 60px; margin-top:30px; background:blue; color:white; border:none; letter-spacing: 1.2px;}
/* =================================== */
.bacondomi{ width:100%; height:100vh; background:rgba(0,0,0,0.6); position:fixed; top:0; left:0; z-index:3; overflow:auto;}
.bacondomi > div{ width:400px; height:auto; background:white; margin:40px auto 0; border-radius:5px; box-shadow:0 0 15px 0 rgba(255,255,255,0.8); position:relative;}
.bacondomi > div > h3{ width:100%; height:auto; position:absolute; top:0; left:0; background:blue; color:white; padding:8px 15px 5px; border-radius:5px 5px 0 0;}
.bacondomi > div > h3 > span{ margin-left:5px; font-size: 14px; color:rgba(255,255,255,0.8); font-weight:400;}
.bacondomi > div > i{ position:absolute; top:5px; right: 10px; font-size: 23px; color:red; cursor:pointer;}
.bacondomi > div > div{ width:100%; height:100%; padding:50px 10px 20px; display:flex; flex-direction:column; justify-content: center; align-items: center;}
.bacondomi > div > div > div{ font-size:14px; display:flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center;}
.bacondomi > div > div > div > span{ width:100%; display:block; text-align: left;}
.bacondomi > div > div > div > textarea{ width:100%; height: 70px; margin-bottom:5px;}
.bacondomi > div > div > div.e{ border-top:2px solid rgba(0,0,0,0.4); margin:15px 0; width: 100%;}
.bacondomi > div > div > button{margin-top:25px;}

/* ======================== */
.banentreg{width:100%; height:100vh; background:rgba(0,0,0,0.6); position:fixed; top:0; left:0; z-index:3; overflow:auto;}
.banentreg > div{ width:400px; height:auto; background:white; margin:40px auto 0; border-radius:5px; box-shadow:0 0 15px 0 rgba(255,255,255,0.8); position:relative;}
.banentreg > div > h3{ width:100%; height:auto; position:absolute; top:0; left:0; background:blue; color:white; padding:8px 15px 5px; border-radius:5px 5px 0 0;}
.banentreg > div > h3 > span{ margin-left:5px; font-size: 14px; color:rgba(255,255,255,0.8); font-weight:400;}
.banentreg > div > i{ position:absolute; top:5px; right: 10px; font-size: 23px; color:red; cursor:pointer;}
.banentreg > div > div{width:100%; height:100%; padding:50px 15px 20px; display:flex; flex-direction: column; justify-content: center; align-items: center;}
.banentreg > div > div > button.a{ width:80%; background:green; color:white; margin-top:15px; border:none; margin:10px 0 25px;}