@import url('https://fonts.googleapis.com/css2?family=Inter&family=Open+Sans:wght@300&display=swap');

body {

  font-family: 'Inter', sans-serif !important;
  font-family: 'Open Sans', sans-serif !important;

}

.modal-lg,
.modal-xl {
  max-width: 60% !important;
}

.modal-content {

  background-color: #007c9b !important;
  color: white;
}


.espacio-h {


  padding: 1%;

}

.row {


  padding: 0% !important;
  margin: 0% !important;


}

p {

  font-size: larger !important;

}

h1 {

  font-size: xx-large;

}



/*inicia carousel*/


@keyframes slidein {
  0% {
    top: -400px;
    opacity: 0;
  }

  100% {
    opacity: 1;
    top: 0px;
  }
}

@keyframes slideout {
  0% {
    top: 0;
    opacity: 1;
  }

  100% {
    top: -400px;
    opacity: 0;
  }
}

.carouseld {
  background: #eee;
  font-family: "Tahoma";
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.carouseld #scene {
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  height: 460px;
  position: relative;
}

.carouseld #scene #left-zone {
  background: #fff;
  height: 75%;
  flex-grow: 0;
  display: flex;
  width: 350px;
  align-items: center;
  justify-content: left;
}

.carouseld #scene #left-zone .list {
  display: flex;
  list-style: none;
  align-content: stretch;
  flex-direction: column;
  flex-grow: 1;
  margin: 0;
  padding: 0;
}

.carouseld #scene #left-zone .list li.item input[type="radio"] {
  display: none;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~label {
  display: block;
  opacity: 0.5;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~label:first-letter {
  text-transform: uppercase;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~label:hover {
  opacity: 0.75;
  cursor: pointer;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~label.label_strawberry:before {
  content: " ";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  margin-left: 15px;
  background-image: url('../assets/seguro-de-salud.png');
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~label.label_banana:before {
  content: " ";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  margin-left: 15px;
  background-image: url('../assets/caja-medica.png');
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~label.label_apple:before {
  content: " ";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  margin-left: 15px;
  background-image: url('../assets/coche.png');
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~label.label_orange:before {
  content: " ";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  margin-left: 15px;
  background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/9636-200.png');
  background-position: center;
  background-size: 75% 75%;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content {
  position: absolute;
  left: 350px;
  top: -400px;
  width: 650px;
  height: 400px;
  animation-duration: 0.75s;
  animation-name: slideout;
  animation-timing-function: ease-out;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_strawberry .picto {
  height: 100px;
  width: 100px;
  background-image: url('../assets/seguro-de-salud.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_strawberry h1 {
  color: #D64541;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_banana .picto {
  height: 100px;
  width: 100px;
  background-image: url('../assets/caja-medica.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_banana h1 {
  color: #F5D76E;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_apple .picto {
  height: 100px;
  width: 100px;
  background-image: url('../assets/coche.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_apple h1 {
  color: #00B16A;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_orange .picto {
  height: 100px;
  width: 100px;
  background-image: url('https://d30y9cdsu7xlg0.cloudfront.net/png/9636-200.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content.content_orange h1 {
  color: #F27935;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content h1:first-letter {
  text-transform: uppercase;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]~.content p {
  max-width: 90%;
  text-align: center;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]:checked~label {
  opacity: 1;
  animation: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.carouseld #scene #left-zone .list li.item input[type="radio"]:checked~label.label_strawberry {
  color: #D64541;
  border-right: solid 4px #D64541;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]:checked~label.label_banana {
  color: #F5D76E;
  border-right: solid 4px #F5D76E;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]:checked~label.label_apple {
  color: #00B16A;
  border-right: solid 4px #00B16A;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]:checked~label.label_orange {
  color: #F27935;
  border-right: solid 4px #F27935;
}

.carouseld #scene #left-zone .list li.item input[type="radio"]:checked~.content {
  animation-duration: 0.75s;
  animation-name: slidein;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.carouseld #scene #middle-border {
  background-color: #eee;
  height: 75%;
  flex-grow: 1;
  max-width: 2px;
  z-index: 0;
}

.carouseld #scene #right-zone {
  background: #fff;
  height: 100%;
  flex-grow: 3;
}





/*termina carousel*/




.texto-prod {

  padding-top: 5%;
  padding-bottom: 5%;

}

.header {
  height: 100vh;
  min-height: 500px;
  background-size: cover;
  background-image: url("../assets/home_hero_bg_2.png");
  color: white;
  width: 100%;

}

.text-titu {


  text-align: start;

}

.imagenhead {

  max-width: 50%;
  margin-left: auto;
  margin-right: auto;

}

.teclado {


  width: 100%;
  text-align: center;

}


.prod {


  width: 100%;

  background-image: url("../assets/scott-graham-5fNmWej4tAA-unsplash.jpg");
  background-size: cover;
  height: auto;

  background-position: center;
  background-repeat: no-repeat;


}

.space {

  margin-top: 10%;
  margin-bottom: 10%;
  padding-top: 5%;
  padding-bottom: 5%;


}

.backblue {

  width: 100%;
  margin: auto;
  background-color: #007c9ba8;

}


/*Inicia estilo card*/


.card {
  position: relative;
  width: 320px;
  height: 480px;
  background: #191919;
  border-radius: 20px;
  overflow: hidden;
  background-color: #0078b4 !important;
  border: 0px !important;
  border-radius: 7% !important;
}

.card::before {
  content: "";
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
  background: #006593;
  transform: skewY(345deg);
  transition: 0.5s;
}

.card:hover::before {
  top: -70%;
  transform: skewY(390deg);
}

.card::after {

  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 600;
  font-size: 6em;
  color: rgba(0, 0, 0, 0.1);
}

.card .imgBox {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  z-index: 1;
}

/* .card .imgBox img {
  max-width: 100%;
  transition: .5s;
}
.card:hover .imgBox img {
  max-width: 50%;
}
*/
.card .contentBox {
  position: relative;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 2;
}

.card .contentBox h3 {
  font-size: 18px;
  color: white;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.buy {

  color: white !important;

  background-color: #007bff;
  border-color: #007bff;
  padding: 3%;
  border-radius: 30px;

}

.card .contentBox .price {
  font-size: 24px;
  color: white;
  font-weight: 700;
  letter-spacing: 1px;
}

.card .contentBox .buy {
  position: relative;
  top: 100px;
  opacity: 0;
  padding: 10px 30px;
  margin-top: 15px;
  color: #000;
  text-decoration: none;
  background: #00bbff;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.5s;
}

.card:hover .contentBox .buy {
  top: 0;
  opacity: 1;
}

.mouse {
  height: 300px;
  width: auto;
}

.resalt {

  color: #0078b4;

}

/*Termina estilo card*/



.contacto {


  background-color: #0078b3;
  color: white;

  padding-top: 5%;
  padding-bottom: 5%;

}

.cartaContacto {

  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  background-color: #ffff;

  border-radius: 20%;
  border-radius: 7%;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-right: 5%;
  padding-left: 5%;
  color: black !important;

}


.formularioModal {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 2%;
  border-color: whie 1px aliceblue;
  border: solid 1px white;
  margin-top: 5%;
  margin-bottom: 5%;
  border-radius: 3%;

}

.ppag {

  background-color: #007c9b;

}

.contact {



  margin-bottom: 4%;

}

@media only screen and (max-width: 820px) {


  .carouseld #scene #left-zone {
    background: #fff;
    height: 75%;
    flex-grow: 0;
    display: flex;
    width: 40%;
    align-items: center;
    justify-content: left;
  }
  
  .carouseld #scene #left-zone .list li.item input[type="radio"] ~ .content {
    position: absolute;
    left: 350px;
    top: -400px;
    width: initial;
    height: 400px;
    animation-duration: 0.75s;
    animation-name: slideout;
    animation-timing-function: ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .modal-lg, .modal-xl {
    max-width: 95% !important;
  }


}




@media only screen and (max-width: 600px) {

  .carouseld #scene #left-zone .list li.item input[type="radio"] ~ .content {
    position: inherit;
    left: 350px;
    top: -400px;
    width: 100%;
    height: auto;
    animation-duration: 0.75s;
    animation-name: slideout;
    animation-timing-function: ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .carouseld #scene {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    height: auto;
    position: relative;
    padding: 2%;
  }


  .modal-lg, .modal-xl {
    max-width: 100% !important;
  }

  .header {
    height: auto;
    min-height: 600px;
    background-size: cover;
    background-color: #087d9e;
    color: white;

    width: 100%;


  }




  .card:hover::before .card:active::before {
    top: -70%;
    transform: skewY(390deg);
  }

  .card {
    position: relative;
    width: 100%;
    height: 480px;
    background: #191919;
    background-color: rgb(25, 25, 25);
    background-clip: border-box;
    border-radius: 20px;
    overflow: hidden;
    background-color: #0078b4 !important;
    border: 0px !important;
    border-radius: 7% !important;
    margin-top: 5%;
    margin-bottom: 5%;

  }

}