*, *::before, *::after { box-sizing: border-box;}
::-moz-selection { background-color: var(--colo4); color: #fff;}
::selection { background-color: var(--colo4); color: #fff;}
::-webkit-input-placeholder { color: var(--colo2);}
:root {  --colo5: rgb(25,44,0); --colo1: rgb(64,113,0); --colo2: rgb(143,190,0); --colo3: rgb(192,255,0); --colo4: rgb(240,240,240); --colo6: rgb(37,169,4); --colo7: rgb(236,0,0); }
html { font-size: 1vw; }
body { background-color: var(--colo4); font-family: 'Asap','Arial'; color:var(--colo5); font-weight: 200; font-size: 1rem; }
body.abierto { overflow: hidden; }
section { position: relative; }
a { display: inline-block;  text-decoration: none; }
.seccion { padding-top: 4rem; padding-bottom: 4rem;}
.container { width: 85%; padding: 0 1rem; margin: 0 auto;}
.container-full { width: 100%; padding: 0 1rem;}
.fila.fila-centrada { justify-content: center;}
.fila { margin: 0 -1rem; display: flex; flex-wrap: wrap; }
.filax { display: flex; flex-wrap: wrap; justify-content: center; }
.columna { padding: 0 1rem; }
.columna-100 { width: 100%; }
.columna-95 { width: 95%; }
.columna-90 { width: 90%; }
.columna-85 { width: 85%; }
.columna-80 { width: 79%; }
.columna-75 { width: 75%; }
.columna-60 { width: 60%; }
.columna-50 { width: 50%; }
.columna-41 { width: 41.66%; }
.columna-40 { width: 40%; }
.columna-33 { width: 33.33%; }
.columna-30 { width: 30%; }
.columna-25 { width: 25%; }
.columna-20 { width: 20%; }
.columna-15 { width: 15%; }
.columna-14 { width: 14%; }
.columna-10 { width: 10%; }
.columna-5 { width: 5%; }
.columna-0 { width: 0%; }
.txtmed { font-size: 1.3rem; color :var(--colo2); }
.arriba{ margin: 0.2rem 0 0 0; }
.abajo{ margin-bottom: 1.5rem; }
.centrar { text-align: center; }
.derecha { text-align: right; }
.inclinar { font-style: italic; }
.justificar { text-align: justify; }
.fcenter { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.vcenter { display: flex; align-items: center; }
.orden { order: 0;}
.masarriba { padding-top: 5rem; }
.masabajo { padding-bottom: 10rem; }
.arriba{ margin: 0.2rem 0 0 0; }
.abajo{ margin-bottom: 1.5rem; }
.abajo2{ margin-bottom: 0.3rem; }
.tit1 { text-align: center; }
.filacenter { justify-content: center; margin-bottom: 0.5rem; }
.titu { text-align: center; font-size: 1.5rem; color: var(--colo1); font-weight: bold; }
.titu2 { text-align: center; font-size: 1.2rem; color: var(--colo1); font-weight: bold; }
.fallpadd { padding: 0.5rem; }
.szfnt { font-size: 0.7rem; }
.btn-wa {
  position: fixed;
  top: 80%;
  left: 95%;
}
.compitem{
  border: 0.13rem solid var(--colo2);
  border-radius: 0.5rem;
  background-color: #fff;
  color: var(--colo1);
  font-weight: bold;
}
.compitem i{
  color: var(--colo1);
}
.compitem .fprec {
  color: red; 
}
header {
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgb(64,113,0, .77);
  z-index: 999;
}
header #banner {
  position: relative;
  transition: all .5s ease;
  background-color: rgb(0,210,0, .8);
}
header #banner img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.75;
  object-fit: cover;
  object-position: center;
}
header a:hover { color: var(--colo3); }
header a {
  color: #fff; 
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}
header nav ul { 
  list-style : none; 
  word-spacing: 1rem;
  margin: 0; 
  padding: 0; 
}
header nav ul li {
  display:inline-block;
  position: relative;
}
header nav ul li:hover { color: var(--colo3); }
header nav ul li a {
  display:block;
  word-spacing: 1px;
}
header nav ul li:hover .children { display:block; }
header nav ul li .children {
  display: none;
  background: var(--colo1);
  position: absolute;
  width: 150%;
  z-index:1000;
  padding: .5rem 0;
}
header nav ul li .children li {
  display:block;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.5);
}
header nav ul li .children li a { display: block; }
header nav ul li .children li a span {
  float: right;
  position: relative;
  top:3px;
  margin-right:0;
  margin-left:10px;
}
header nav ul li .caret {
  position: relative;
  top:3px;
  margin-left:;
  margin-right:0px;
}
header.fondo {
  background-color: rgb(64,113,0, .77);
  padding: 0 0;
}
header.fondo a { margin-top: 2px; }
header.fondo .link-logo .logo { width: 7rem; }
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .link-logo .logo {
  width: 8rem;
  height: auto;
  transition: all .5s ease;
}
header .cab-contac { display: inline-block; }
header .cab-contac a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 40px;
  height: 40px;
  color: var(--colo3);
  font-size: 1.8rem;
}
header .cab-contac .carfnt{
  font-size: 2.3rem;
}
header .cab-contac .chequea {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.1rem;
  left: 0.8rem;
  width: 1.6rem;
  height: 1.5rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  border-color: #ca0808;
  background: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  color: #ca0808;
}
header .cab-contac a:first-child,
header .cab-menu a:first-child { margin-left: 0; }
header .cab-contac a:last-child,
header .cab-menu a:last-child { margin-right: 0; }
header .cab-hamb {
  color: rgba(190,242,2, 1);
  font-size: 2rem;
  display: none;
}
footer {
  background-color: var(--colo1);
  z-index:1000;
  font-size: 0.9rem;
  margin-top: 2rem;
}
footer .prefooter .foottit{
  color: var(--colo3);
  font-size: 1.1rem;
}
footer ul { list-style:none; padding: 0;}
footer ul li {
  display: block;
  position: relative;
}
footer ul li a:hover { color:var(--colo4); }
footer ul li a {
  color: var(--colo4);
  display:block;
  text-decoration:none;
}
footer .pie {
  padding: 0.05rem 0;
  background-color: var(--colo5);;
  color: var(--colo2);
  text-align: center;
}
.logo-load {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}
.logo-load img {
  width: 5rem;
  height: 5rem;
  display: inline-block;
  animation-name: palpitar;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes palpitar {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: .5s ease;
  z-index: -1;
}
.overlay.active {
  opacity: 1;
  z-index: 2;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 80%;
  max-height: calc(100% - 100px);
  color: var(--colo1);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: .5s ease;
  border: 0.13rem solid var(--colo2);
  border-radius: 0.5rem;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
}
.modal p { margin-left: 3rem; margin-right: 3rem; }
.modal.active {
  visibility: visible;
  opacity: 1;
}
.modal label {
  padding: 1rem;
}
#inicio { margin: 14rem 0 2rem 0; }
#inicioprod { margin: 5rem 0 2rem 0; }
#iniciocomp { margin: 6rem 0 2rem 0; }
#iniciopedi { margin: 6rem 0 2rem 0; }
#iniciocped { margin: 8rem 0 2rem 0; }
#inicionoso { margin: 6rem 0 2rem 0; }
#iniciocont { margin: 6rem 0 2rem 0; }
#inicioccon { margin: 6rem 0 2rem 0; }
.bloque{
  position: relative;
  height: 100%;
  text-align: center;
  cursor: pointer;
  background-color: #fff;
  font-size: 1rem;
  font-weight: bold;
}
.bloque1{
  position: relative;
  height: 100%;
  background-color: #fff;
}
.bloque-img {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  background-color: #fff;
}
.bloque-img1 {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background-color: #fff;
  cursor: pointer;
}
.bloque-img2 {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background-color: #fff;
}
.bloque-img1:hover {
  border: 1px solid var(--colo1);
}
.bloque-img2 img,
.bloque-img1 img,
.bloque-img .princi {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.bloque-img .circul {
  position: absolute;
  top: 3%;
  left: 82%;
  width: 2rem;
  height: 2rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: var(--colo4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bloque-img .circul .carr{
 width: 1.2rem;
 height: 1.2rem;
}
.recip {
  display: flex;
  list-style: none;
  padding: 0.2em 0 0.2em;
  margin: 0;
  justify-content: space-between;
}
.recip-item { flex: 1; }
.recip-item .value {
  color: #ff4f87;
  margin-left: 0.3rem;
  vertical-align: middle;
}
.sinprod { text-align: center; }
.btnbox { display: flex; justify-content: center; }
.btnbox1 { display: flex; justify-content: center; }
.btnbox a{ padding-left: 0.5rem; padding-right: 0.5rem; }
.pbtns .bton1{ padding-left: 0.5rem; padding-right: 0.5rem; }
button:disabled,
button:disabled:hover {
  background-color: rgb(210,210,210);
  color: rgb(150,150,150);
  border-color: rgb(150,150,150);
  cursor: default;
}
.vboton {
  color: white;
  padding: 0.5rem 1.5rem;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  border-color: var(--colo2);
  border-radius: 0.5rem;
}
.btn1, .btn2, .btn3 {
  background-color: white;
  color: var(--colo1);
}
.btn1:hover, .btn2:hover, .btn3:hover {
  background-color: var(--colo1);
  color: white;
}
.etiq {
  font-size: 1.2rem;
  color: var(--colo1);
  font-weight: bold;
}
.eti2 {
  font-size: 1.4rem;
  color: var(--colo1);
  font-weight: bold;
}
.eti5 {
  font-size: 1.4rem;
  color: var(--colo7);
  font-weight: bold;
}
.eti4 {
  font-size: 1.1rem;
  color: var(--colo5);
}
.eti3 {
  font-size: 1.6rem;
  color: var(--colo6);
  font-weight: bold;
  text-align: center;
}
#contacto h3{ margin-bottom: 0.5rem; }
.form-bloques {
  margin-bottom: 0.5rem;
}
.form-bloques p {
  font-weight: bold;
  color: var(--colo1);
  text-align: left;
  margin-bottom: 0.2rem;
  margin-top: 0.2rem;
}
.form-bloques .form-input {
  width: 100%;
  height: 2.8rem;
  padding: 0.75rem;
  border: 0.13rem solid var(--colo2);
  color: var(--colo1);
  transform: all 0.5s ease;
  border-radius: 0.75rem;
  font-size: 1rem;
}
.form-bloques .form-input:focus {
  outline: 0.1rem solid var(--colo4);
  box-shadow: 0.1rem 0.1rem 1.3rem 0px var(--colo4);
}
.form-bloques textarea.form-input {
  height: 7rem;
  resize: none;
}
.form-bloques.form-bloque-rpta { 
  margin-top: 1rem; 
  font-size: 1.2rem;
}
.error,.form-bloques .form-input.error-input { color: red; }
.form-bloques .form-input.error-input { border-color: red; }
.blok{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.blok-text {
  color: var(--colo1);
}
.blok-text-bold {
  font-weight: bold;   
}
.ima-tam {
  width: 60px;
  height: 60px;
}
@media (max-width: 777px){
  html { font-size: 4vw; }
  .mbcol-crd { width: 100%; }
  .mbcol-90 { width: 90%; }
  .mbcol-80 { width: 80%; }
  .mbcol-20 { width: 20%; }
  .mbcol-75 { width: 75%; }
  .mbcol-25 { width: 25%; }
  .mbcol-100 { width: 100%; }
  .mbcol-66 { width: 66.66%; }
  .mbcol-33 { width: 33.33%; }
  .container { width: 100%; }
  .orden { order: 1;}
  header .cab-hamb { 
    display: block; 
    position: relative;
    font-size: 1.5rem;
    z-index: 2;
  }
  header .cab-menu { 
    padding-right: 1rem;
    padding-left: 1rem;
    transition: all .5s ease;
    transform: translateX(100%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--colo1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  header .cab-menu li {
    display: block;
  }
  header .cab-menu.abierto { transform: translateX(0); }
  header .cab-menu a {
    margin: 1rem 0;
    font-size: 1.2rem;
  }
  header .link-logo { position: relative; z-index: 2; }
  header .link-logo .logo { width: 7rem; height: auto; }
  header.fondo .link-logo .logo { width: 6rem; }
  header #banner { padding-bottom: 0rem; }
  #inicio { margin: 7rem 0 2rem 0; }
  #inicionoso { margin: 4rem 0 2rem 0; }
  .masarriba { padding-top: 2rem; }
  .masabajo { padding-bottom: 2rem; }
  .btn-wa { left: 85%; }
  .ima-tam { width: 40px; height: 40px; }
}