body{
  margin: 0;
  padding: 0;
}

.navbar{
  background-color: #d2edf7;
}

#logo{
  padding-left: 2%;
}

#logo img{
  padding-top: 10px;
  width: 160px;
  height: auto;
}

.txtredes{
  font-size: 21px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.redes img{
  margin-top:20px;
  margin-bottom: 20px;
  width: 45px;
  cursor: pointer;
}
.redes img:hover{
opacity: 0.8;
}

.navbar-nav{
  display: flex;
  justify-content: right;
  padding-top: .6rem;
}

.navbar-nav a{
  text-align: right;
  justify-content: right;
  font-size: 0.90em;
  font-weight: 400;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  display: block;
  color: #374048;
  margin-right: 7px;
}

.navbar-nav a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: #0084ff;
  z-index: 1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease-in-out;
}

.navbar-nav a:hover::before {
  transform: scaleX(1);
}

.navbar-nav[data-animation="bonus"] a::before {
  transform-origin: right;
}

.navbar-nav[data-animation="bonus"] a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.82, 0.94);
}

#hero{
  width: 100%;
  height: auto;
  background-color: #d2edf7;
}

#hero .row{
  position: relative;
}

#hero img{
  padding-top: 0%;
  width: 100%;
  height: auto;
}

#heroelemt{
  position: absolute;
}

#herotest{
  padding-top: 3%;
  text-align: center;
  color: #374048;
  animation-duration: 3s;
  animation-timing-function: ease;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

#herotest h1{
  font-size: 4em;
  font-weight: bolder;
}

#herotest p{
  font-size:1.8em;
  font-weight: 300;
}

#herotest a{
  margin-top: 10px;
  font-size: 1.4em;
  font-weight: 600;
  color: #ffff;
  background-color: #0084ff;
  padding: 10px 70px 10px 70px;
  border-radius: 30px;
  text-decoration: none;
}

#herotest span{
  font-size: 1.1em;
}

#modalvideo{
  width: 98%;
}

#modhead{
  background-color: #0084ff;
  color: white;
}

#videomod{
  background-color: #f3f7fa;
}

	
#tech{
  padding-bottom: 30px;
}

#cont-tech{
  padding-top: 4%;
  text-align: center;
  color: #374048;
}

#cont-tech img{
  text-align: center;
  width:85%;
}

#cont-tech h2{
  font-size: 3em;
  font-weight: bolder;
}

#cont-tech p{
  font-size: 1.4em;
}

#icons{
  padding-top: 3rem;
  padding-left: 12%;
  padding-right: 12%;
  padding-bottom: 2rem;
  background-color:#f3f7fa;
}

.fadeLeft {
  opacity: 0;
  transform: translate(-60vh, 0vh);
  transition: all 2s;
}

.visible {
  opacity: 1;
  transform: translate(0, 0);
}

#icons h2{
  font-size: 2.4em;
  color: #374048;
  font-weight: 700;
}

#icons p{
  font-size: 1.2rem;
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
}

#shape img{
  width: 200px;
  height: 200px;
  }

#shape h4{
  font-size: 1.2em;
  font-weight: 600;
  color: #374048;
}

#shape p{
  font-size: 1em;
  font-weight: 400;
  color: #374048;
}

#certifica{
  text-align: center;
  margin-bottom: 40px;
  margin-top: 30px;
}

#certifica img{
  width: 380px;
  padding-left: 8%;
}

.certext{
  text-align: center;
  padding-top: 1em;
  padding-right: 6%;
  color: #374048;
}

.certext h2{
 font-size: 2em;
 font-weight: 700;
}

.certext p{
  font-size: 1em;
  font-weight: 400;
 }

#kids{
  width: 100%;
  height: 450px;
  background-image: url(/images/fondo_kids.webp);
  background-position: center;
  background-size:cover;
  background-repeat: repeat;
}

.kidsimage img{
  width: 90%;
  padding-left: 10%;
  padding-top: 8%;
}

.textkids{
  background-color: #ffff;
  width: 500px;
  height: 420px;
  padding-top: 0%;
}

.textkids img{
  width: 280px;
  margin-bottom: 10px;
  padding-left: 1.7rem;
}

.textkids ul{
  list-style: none;
}

.textkids li{
  font-size: 18px;
  color: #011689;
  text-decoration: none;
}

#presentaciones{
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 3rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.product_press{
  opacity: 0; 
  transform: translate(0, 20vh);
  transition: all 2s; 
}

.visible2 {
  opacity: 1;
  transform: translate(0, 0);
}

.preselemt{
  width: 250px;
  height: auto;
  background-color: #f8fbfd;
  box-shadow: 5px 5px 20px #9fa0a1;
  margin-right: 2rem;
  margin-top: 30px;
  padding-bottom: 20px;
  border-radius: 10px;
}

.preshead h2{
  font-size: 3em;
  font-weight: 700;
  color: #374048;
}

.preshead p{
  font-size: 1.2em;
  font-weight: 300;
  color: #374048;
}

.preselemt img{
  width: 230px;
  height: auto;
}

.preselemt h3{
  color: #0084ff;
  font-size: 1.2em;
  font-weight: 400;
}

.preselemt p{
  color: #374048;
  font-size: .8em;
  font-weight: 400;
}

.prodimg{
  background-color: #f8f8f8;
}

.carousel-item img{
 margin: auto;
}

.carousel-item img{
  width: 500px;
  height: auto;
}

.prodinfo{
  text-align: left;
  padding-left: 1rem;
  color: #374048;
}

.prodinfo ul{
  list-style-type: none;
  font-size: 1em;
}

.prodinfo h2{
  font-size: 2em;
  font-weight: 700;
  padding-left: 1.8rem;
}

.prodinfo p{
  font-size: 1em;
  font-weight: 300;
  padding-left: 1.8rem;
}

.prodinfo span{
  font-size: 1.2em;
  font-weight: 500;
}

.shop2{
  margin: auto;
  justify-content: center;
}

.retail img{
  width: 110px;
  height: auto;
}

.rtail img{
  width: 150px;
  height: auto;
}

#qual{
  background-color: #f3f7fa;
  padding-top: 2rem;
  padding-left: 8%;
  padding-right: 4%;
  padding-bottom: 2rem;
}

#qual img{
  width: 490px;
}

.qualtext{
  padding-top: 6%;
  color: #374048;
}

.qualtext h2{
  font-size: 2.2em;
  font-weight: 600;
}

.qualtext p{
  font-size: 1.2em;
  font-weight: 300;
  text-align: left;
}

.qualtext i{
  font-size: 1.2em;
  font-weight: 300;
  color: #237bde;
}

#especial{
text-align: left;
}

#esptext{
  padding-top: 4%;
  padding-left: 4%;
  padding-right: 4%;
  text-align: justify;
  color: #374048;
}

#esptext h3{
  font-size: 1.6em;
  font-weight: 700;
}

#esptext p{
  font-size: 1em;
  font-weight: 400;
}

.shop p{
  font-size: 1.2em;
  color: #374048;
  font-weight: 700;
  margin-bottom: 40px;
}

.shop img{
  width: 160px;
}

.one img{
  width: 104%;
}

.two img{
  width: 100%;
}

#reseñas{
  background-color: #f3f7fa;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 4rem;
  margin-bottom: 20px;
}

.reshead{
  padding-top: 2rem;
  color: #374048;
}

.reshead h2{
  font-size: 3em;
  font-weight: 700;
}

.reshead p{
  font-size: 1.2em;
  font-weight: 400;
  padding-left: 20%;
  padding-right: 20%;
}

.review i{
  font-size: 50px;
  margin-bottom: 20px;
  margin-top: 20px;
  color: #989a9c;
}

.review p{
  font-size: 1em;
  font-weight: 300;
}

.review span{
  font-weight: 700;
}


footer{
  text-align: center;
  background-color:#f3f7fa;
}

.chat{
  padding-top: 3rem;
  margin-bottom: 30px;
}

.chat a{
  font-size: 1.4em;
  font-weight: 600;
  color: #ffff;
  background-color: #0084ff;
  padding: 10px 70px 10px 70px;
  border-radius: 30px;
  text-decoration: none;
}

.chat a:hover{
  background-color: #a3edf8;
  color: black;
  box-shadow: 5px 5px 20px #525456;
}

.enlaces{
  width: 30%;
  margin: auto;
  padding-top: 20px;
}

.enlaces a{
  text-decoration: none;
  color: #0084ff;
  font-size: 12px;
}

.phone{
  margin-top: 10px;
  color: #0084ff;
  font-size: 12px;
}

#privacidad h4{
  font-size: 1em;
  font-weight: 700;
  color: #527096;
}

#privacidad p{
  font-size: .8em;
  font-weight: 400;
}

    #carrusel{
      text-align: center;
    }

    #carrusel img{
      margin: auto;
      width: 250px;
      height: 250px;
    }

#fqs{
  margin-top: 40px;
  margin-bottom: 60px;
}

.fqshead{
  padding-left: 15%;
  padding-right: 15%;
  margin-bottom: 5rem;
}

.fqshead h1{
  font-size: 3em;
  font-weight: 700;
  color: #374048;
}
.fqshead h2{
  font-size: 2em;
  font-weight: 700;
  color: #374048;
}

.fqshead p{
  font-size: 1.4em;
  font-weight: 400;
  color: #374048;
}

.questiones{
  text-align: left;
  color: #374048;
  padding-right: 15px;
}

.questiones h3{
  font-size: 1.6em;
  font-weight: 700;
  text-align: left;
}
.questiones h4{
  color: #115798;
}
#question{
  text-align: left;
  color: #374048;
  padding-right: 15px;
}

#questiondos{
  text-align: left;
  color: #374048;
  padding-right: 15px;
  background-color: white;
  margin-top: 0px;
  margin-bottom:0px;
  padding-top: 0px;
}

#question h3{
  font-size: 1.6em;
  font-weight: 700;
}

#question p{
  font-size: 1em;
  font-weight: 400;
}

.infofqs{
  font-size: .8em;
  font-weight: 400;
  color: #374048;
  text-align: left;
}

#registro{
  background-color: #d8f5fa;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 5%;
  padding-bottom: 2%;
  height: auto;
}

.reghead{
  margin-bottom: 30px;
}

.reghead h2{
  font-size: 3em;
  font-weight: 700;
  margin-bottom: 10px;
}

.reghead p{
  font-size: 1.2em;
  font-weight: 400;
}

#form{
  background-color: white;
  box-shadow: 5px 5px 20px #9fa0a1;
  border-radius: 20px;
  padding-left: 5rem;
  padding-right: 5rem;
  height: auto;
}

#form h3{
  padding-top: 5%;
  text-align: center;
  font-size: 2em;
  padding-left: 9%;
  padding-right: 9%;
  margin-bottom: 40px;
}

#form label{
color: #709298;
}
#form input{
  background-color: #f3f8fb;
}

#form textarea{
  background-color: #f3f8fb;
}

#contactEmailRecaptcha{
  width: 90%;
  height: auto;
}

.formbtn{
  text-align: center;
}

.formbtn1{
  width: 300px;
  border-radius: 30px;
  margin: auto;
  background-color: #0084ff;
  box-shadow: 0px 7px 10px #b0b0b0;
  color: white;
  font-size: 22px;
  font-weight: 700;
}

.formbtn1:hover{
  background-color: #a3edf8;
  color: black;
  box-shadow: 5px 5px 20px #525456;
}

#form button{
  width: 200px;
  border-radius: 0px;
  margin: auto;
  background-color: #01d0e9;
  box-shadow: 0px 7px 10px #fb99ba;
  color: white;
  font-size: 18px;
  font-weight: 700;
}

.fqsimage{
 padding-left: 3rem;
 margin: auto;
  }

.fqsimage img{
width: 100%;
height: auto;
}

.phonekcc{
  font-size: 10px;
  margin-top: 20px;
}

#pageerror{
  background-color: #e5effc;
  }

#error{
padding-top: 7%;
}

#error img{
  padding-top: 7%;
  width: 90%;
  height: auto;
  text-align: center;
}

.texterror{
  width: 500px;
  margin: auto;
  background-color: white;
  box-shadow: 0px 10px 20px #3a3c3d;
  border-radius: 20px;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 1rem;
  height: 550px;
}

.hit-error{
  color:#237bde;
  font-size: 12em;
  font-weight: bold;
  text-shadow:
  0 1px 0 #ccc,
  0 2px 0 #c9c9c9,
  0 3px 0 #bbb,
  0 4px 0 #b9b9b9,
  0 5px 0 #aaa,
  0 6px 1px rgba(0,0,0,.1),
  0 0 5px rgba(0,0,0,.1),
  0 1px 3px rgba(0,0,0,.3),
  0 3px 5px rgba(0,0,0,.2),
  0 5px 10px rgba(0,0,0,.25),
  0 10px 10px rgba(0,0,0,.2),
  0 20px 20px rgba(0,0,0,.15);
}

#error p{
  font-size: 1em;
  font-weight: 400;
  color: #374048;
  text-align: left;
  margin-bottom: 20px;
}

#error span{
  font-size: 2em;
  font-weight: 700;
}

#error a{
  font-size: 1.6em;
  font-weight: 700;
  background-color: #01d0e9;
  box-shadow: 0px 7px 10px #7a7a7a;
  color: white;
  padding: 15px;
  text-align: left;
  text-decoration: none;
  margin-top: 10px;
}

@media (max-width: 770px) { 

  #hero{
    width: 100%;
    height: auto;
    background-color: #d2edf7;
  }

  #hero img{
    padding-top: 8rem;
    width: 100%;
    height: auto;
  }

  #herotest{
    padding-top: 6%;
    text-align: center;
    color: #374048;
  }
  
  #herotest h1{
    font-size: 3em;
    font-weight: bolder;
  }
  
  #herotest p{
    font-size:1.4em;
    font-weight: 300;
  }
  
  #herotest a{
    font-size: 1.4em;
  }

  .formbtn1{
    width: 200px;
    border-radius: 20px;
    font-size: 18px;
  }

  #certifica{
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  
  #certifica img{
    width: 250px;
    padding-left: 2%;
  }
  
  .certext{
    text-align: center;
    padding-top: 1em;
    padding-right: 2%;
    color: #374048;
  }
  
  .certext h2{
   font-size: 1.4em;
   font-weight: 700;
  }
  
  .certext p{
    font-size: 1em;
    font-weight: 400;
   }

  #kids{
    width: 100%;
    height: 650px;
  }
  
  .kidsimage img{
    width: 100%;
    padding-left: 7%;
    padding-right: 6%;
    padding-top: 5%;
  }
  
  .textkids{
    margin: auto;
    width: 300px;
    height: 300px;
    padding-top: 6%;
  }
  
  .textkids img{
    width: 240px;
    margin-bottom: 10px;
    padding-left: 1.7rem;
  }
  
  .carousel-item img{
   margin: auto;
  }
  
  .carousel-item img{
    width: 350px;
    height: auto;
  }
  
  .prodinfo{
    padding-left: .3rem;
  }
  
  .prodinfo h2{
    font-size: 1.8em;
    font-weight: 700;
    padding-left: 1.8rem;
  }
  
  .prodinfo p{
    margin-top: 10px;
    font-size: 1em;
    font-weight: 300;
    padding-left: 1.8rem;
  }
  
  .prodinfo span{
    font-size: 1.2em;
    font-weight: 500;
  }

  .prodinfo ul{
    list-style-type: none;
    font-size: 1em;
  }

  .retail img{
    width: 100px;
    height: auto;
  }

  .rtail img{
    width: 140px;
    height: auto;
  }

  #qual{
    background-color: #f3f7fa;
    padding-top: 1rem;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 2rem;
  }
  
  #qual img{
    width: 600px;
  }

  .qualtext{
    padding-top: 6%;
    color: #374048;
  }
  
  .qualtext h2{
    font-size: 3em;
    font-weight: 600;
  }
  
  .qualtext p{
    font-size: 1.6em;
    font-weight: 300;
    text-align: left;
  }
  
  .qualtext i{
    font-size: 1.6em;
    font-weight: 300;
    color: #237bde;
  }

  #esptext{
    padding-top: 4%;
    padding-left: 7%;
    padding-right: 7%;
    text-align: justify;
    color: #374048;
    margin-bottom: 30px;
  }
  
  .one img{
    width: 100%;
  }
  
  .two img{
    width: 100%;
  }

  #reseñas{
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 4rem;
    margin-bottom: 20px;
  }
  
  .reshead{
    padding-top: 1rem;
    color: #374048;
  }
  
  .reshead h2{
    font-size: 2em;
    font-weight: 700;
  }
  
  .reshead p{
    font-size: 1.2em;
    font-weight: 400;
    padding-left: 5%;
    padding-right: 5%;
  }

  .shop{
    padding-right: 2rem;
  }

  .shop img{
    width: 150px;
  }

  .shop p{
    font-size: 1.2em;
    color: #374048;
    font-weight: 700;
    margin-bottom: 10px;
  }

  #fqs{
    margin-top: 30px;
    margin-bottom: 40px;
  }
  
  .fqshead{
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 1rem;
  }
  
  .fqshead h1{
    font-size: 2em;
  }
  .fqshead h2{
    font-size: 1.7em;

  }
  
  .fqshead p{
    font-size: 1em;
  }
  
  #question{
    padding-right: 3%;
    padding-left: 3%;
    text-align: left;
  }

  .bgGris{
    background-color: #ececec;
  }

  #questiondos{
    background-color: #ececec;
    padding-right: 3%;
    padding-left: 3%;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
  }
  
  #question h3{
    font-size: 1.2em;
    font-weight: 700;
  }
  
  #question p{
    font-size: 1em;
    font-weight: 400;
  }

  #registro{
    background-color: #d8f5fa;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 5%;
  }
  
  .reghead{
    margin-bottom: 20px;
  }
  
  .reghead h2{
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
  }
  
  .reghead p{
    font-size: 1em;
    font-weight: 400;
  }
  
  #form{
    background-color: white;
    box-shadow: 5px 5px 20px #9fa0a1;
    border-radius: 10px;
    padding-left: 3rem;
    padding-right: 3rem;
    width: 90%;
    height: auto;
    margin: auto;
  }
  
  #form h3{
    padding-top: 10%;
    text-align: center;
    font-size: 1.2em;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 30px;
  }
  
  #form label{
  color: #709298;
  }
  #form input{
    background-color: #f3f8fb;
  }
  
  #form textarea{
    background-color: #f3f8fb;
  }
  
  .fqsimage{
   padding-left: 1rem;
   padding-top: 2rem;
   margin: auto;
    }
  
  .fqsimage img{
  width: 100%;
  }
  
  .chat{
    padding-top: 3rem;
    margin-bottom: 30px;
  }
  
  .chat a{
    font-size: .8em;
    font-weight: 600;
    color: #ffff;
    background-color: #0084ff;
    padding: 10px 40px 10px 40px;
    border-radius: 30px;
    text-decoration: none;
  }
  
  .enlaces{
    width: 80%;
    margin: auto;
    padding-top: 20px;
  }
  
  .enlaces a{
    text-decoration: none;
    color: #0084ff;
    font-size: 12px;
  }
  
  .phone{
    margin-top: 10px;
    color: #0084ff;
    font-size: 12px;
  }

  #privacidad {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  #privacidad h4{
    font-size: .8em;
    font-weight: 700;
    color: #527096;
  }
  
  #privacidad p{
    font-size: .8em;
    font-weight: 400;
  }

}

@media (max-width: 576px) { 

  #hero{
    width: 100%;
    height: auto;
    background-color: #d2edf7;
  }

  #hero img{
    padding-top: 12rem;
    width: 100%;
    height: auto;
  }

  #herotest{
    padding-top: 1%;
    text-align: center;
    color: #374048;
  }
  
  #herotest h1{
    font-size: 1.8em;
    font-weight: bolder;
  }
  
  #herotest p{
    font-size:.8em;
    font-weight: 300;
  }
  
  #herotest a{
    font-size: 1em;
  }

  .formbtn1{
    width: 200px;
    border-radius: 20px;
    font-size: 18px;
  }

  #cont-tech img{
    width:90%;
  }
  
  #cont-tech h2{
    font-size: 1.8em;
    font-weight: bolder;
  }
  
  #cont-tech p{
    font-size: 1em;
  }

  #icons h2{
    font-size: 1.8em;
  }
  
  #icons p{
    font-size: 1rem;
    padding-left: 7px;
    padding-right: 7px;
  }
  
  #shape p{
    font-size: 1em;
    font-weight: 400;
    color: #374048;
  }

  #certifica{
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;
  }
  
  #certifica img{
    width: 280px;
    padding-left: 2%;
  }
  
  .certext{
    text-align: center;
    padding-top: 1em;
    padding-right: 2%;
    color: #374048;
  }
  
  .certext h2{
   font-size: 1.4em;
   font-weight: 700;
  }
  
  .certext p{
    font-size: 1em;
    font-weight: 400;
   }

  #kids{
    width: 100%;
    height: 650px;
  }
  
  .kidsimage img{
    width: 100%;
    padding-left: 7%;
    padding-right: 6%;
    padding-top: 6%;
  }
  
  .textkids{
    margin: auto;
    width: 300px;
    height: 300px;
    padding-top: 6%;
  }
  
  .textkids img{
    width: 240px;
    margin-bottom: 10px;
    padding-left: 1.7rem;
  }

  .preshead{
    margin: auto;
  }

  .preshead h2{
    font-size: 1.8em;
  }
  
  .preshead p{
    font-size: 1em;
  }

  .preselemt{
   margin-left: 2rem;
  }
  
  .carousel-item img{
   margin: auto;
  }
  
  .carousel-item img{
    width: 250px;
    height: auto;
  }
  
  .prodinfo{
    padding-left: .3rem;
  }
  
  .prodinfo h2{
    font-size: 1.8em;
    font-weight: 700;
    padding-left: 1.8rem;
  }
  
  .prodinfo p{
    margin-top: 10px;
    font-size: .8em;
    font-weight: 300;
    padding-left: 1.8rem;
  }
  
  .prodinfo span{
    font-size: 1em;
    font-weight: 500;
  }

  .prodinfo ul{
    list-style-type: none;
    font-size: .8em;
  }

  .retail img{
    width: 70px;
    height: auto;
  }

  #qual{
    background-color: #f3f7fa;
    padding-top: 1rem;
    padding-left: 4%;
    padding-right: 4%;
    padding-bottom: 2rem;
  }
  
  #qual img{
    width: 300px;
  }

  .qualtext{
    padding-top: 6%;
    color: #374048;
  }
  
  .qualtext h2{
    font-size: 2.2em;
    font-weight: 600;
  }
  
  .qualtext p{
    font-size: 1.2em;
    font-weight: 300;
    text-align: left;
  }
  
  .qualtext i{
    font-size: 1.2em;
    font-weight: 300;
    color: #237bde;
  }

  #esptext{
    padding-top: 4%;
    padding-left: 7%;
    padding-right: 7%;
    text-align: justify;
    color: #374048;
    margin-bottom: 30px;
  }
  
  .one img{
    width: 100%;
  }
  
  .two img{
    width: 100%;
  }

  #reseñas{
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 4rem;
    margin-bottom: 20px;
  }
  
  .reshead{
    padding-top: 1rem;
    color: #374048;
  }
  
  .reshead h2{
    font-size: 2em;
    font-weight: 700;
  }
  
  .reshead p{
    font-size: 1.2em;
    font-weight: 400;
    padding-left: 5%;
    padding-right: 5%;
  }

  .shop{
    padding-right: 2rem;
  }

  .shop img{
    width: 120px;
  }

  .shop p{
    font-size: 1.2em;
    color: #374048;
    font-weight: 700;
    margin-bottom: 10px;
  }

  #fqs{
    margin-top: 30px;
    margin-bottom: 40px;
  }
  
  .fqshead{
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 1rem;
  }
  
  .fqshead h1{
    font-size: 2em;
  }
  .fqshead h2{
    font-size: 1.7em;

  }
  .fqshead p{
    font-size: 1em;
  }
  
  #question{
    padding-right: 3%;
    padding-left: 3%;
    text-align: left;
  }

  #questiondos{
    background-color: #ececec;
    padding-right: 3%;
    padding-left: 3%;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-top: 10px;
  }
  
  #question h3{
    font-size: 1.2em;
    font-weight: 700;
  }
  
  #question p{
    font-size: 1em;
    font-weight: 400;
  }

  #registro{
    background-color: #d8f5fa;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 5%;
  }
  
  .reghead{
    margin-bottom: 20px;
  }
  
  .reghead h2{
    font-size: 1.8em;
    font-weight: 700;
    margin-bottom: 10px;
  }
  
  .reghead p{
    font-size: 1em;
    font-weight: 400;
  }
  
  #form{
    background-color: white;
    box-shadow: 5px 5px 20px #9fa0a1;
    border-radius: 10px;
    padding-left: 3rem;
    padding-right: 3rem;
    width: 90%;
    height: auto;
    margin: auto;
  }
  
  #form h3{
    padding-top: 10%;
    text-align: center;
    font-size: 1.2em;
    padding-left: 0%;
    padding-right: 0%;
    margin-bottom: 30px;
  }
  
  #form label{
  color: #709298;
  }
  #form input{
    background-color: #f3f8fb;
  }
  
  #form textarea{
    background-color: #f3f8fb;
  }
  
  .fqsimage{
   padding-left: 1rem;
   padding-top: 2rem;
   margin: auto;
    }
  
  .fqsimage img{
  width: 100%;
  }
  
  .chat{
    padding-top: 3rem;
    margin-bottom: 30px;
  }
  
  .chat a{
    font-size: .8em;
    font-weight: 600;
    color: #ffff;
    background-color: #0084ff;
    padding: 10px 40px 10px 40px;
    border-radius: 30px;
    text-decoration: none;
  }
  
  .enlaces{
    width: 80%;
    margin: auto;
    padding-top: 20px;
  }
  
  .enlaces a{
    text-decoration: none;
    color: #0084ff;
    font-size: 12px;
  }
  
  .phone{
    margin-top: 10px;
    color: #0084ff;
    font-size: 12px;
  }

  #privacidad {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  #privacidad h4{
    font-size: .8em;
    font-weight: 700;
    color: #527096;
  }
  
  #privacidad p{
    font-size: .8em;
    font-weight: 400;
  }

  #error img{
    padding-top: 7%;
    width: 95%;
    height: auto;
    text-align: center;
    margin: auto;
  }
  
  .texterror{
    width: 300px;
    height: 420px;
    margin-bottom: 30px;
  }
  
  .hit-error{
    color:#237bde;
    font-size: 7em;
  }

}

.logopride img{
  width: 300px;
  height: auto;
}

#heropride{ 
  background-color: #ff3a72;
}

#heropride img{
  width: 100%;
  height: auto;
  margin: auto;
}

#pridebanner img{
width: 100%;
}

#maskpride{
  background-image: url(/images/back_pride2.webp);
  background-position: top;
  background-size: cover;
  height: 400px;
}

#cfrida{
  margin-top: 80px;
}

.imgfrid img{
width: 100%;
}

.textfrida{
  padding-left: 3%;
  padding-top: 2%;
}

.textfrida img{
  width: 60%;
  height: auto;
}

.textfrida p{
  font-size: 1.4em;
  text-align: left;
}

#maskpride p{
  font-size: 1.4em;
  padding-left: 8%;
  padding-top: 50%;
  text-align: justify;
}

.infofriend p{
  font-size: 1.4em;
  padding-top: 15%;
}

.infofriend img{
  width: 70%;
  height: auto;
}

.friends img{
  width: 100%;
  height: auto;
}

#registropride{
  margin-top: 20px;
  margin-bottom: 30px;
}

.formpride{
  width: 50%;
  height: auto;
  margin: auto;
}

.formpride p{
  font-size: 1.4em;
  padding-left: 5%;
  padding-right: 5%;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}

.formpride ::placeholder{
  font-size: 1em;
  font-weight: 400;
  color: black;
}

.imgform{
  margin-bottom: 20px;
  text-align: center;
}

#inputnamepride{
  border-style: none;
  border-bottom: solid 2px #ec2b4f;
  margin-bottom: 10px;
}

#acronimo{
  border-style: none;
  border-bottom: solid 2px #f8a93e;
  margin-bottom: 10px;
}

#legalpride{
  border-style: none;
  border-bottom: solid 2px #f9d557;
  margin-bottom: 10px;
}

#rfcpride{
  border-style: none;
  border-bottom: solid 2px #66b8a1;
  margin-bottom: 10px;
}

#regispride{
  border-style: none;
  border-bottom: solid 2px #2d97ca;
  margin-bottom: 10px;
}

#emailpride{
  border-style: none;
  border-bottom: solid 2px #ec2b4f;
  margin-bottom: 10px;
}

#phonepride{
  border-style: none;
  border-bottom: solid 2px #f8a93e;
  margin-bottom: 10px;
}

#textarea1pride{
  border: solid 2px #645ba7;
  margin-bottom: 10px;
}

#checkpride{
  border: solid 2px #645ba7;
  margin-bottom: 10px;
}

.formbtn{
  text-align: right;
}

.btnpride{
  border-style: none;
  font-size: 1.4em;
  font-weight: 600;
  color: #ffff;
  background-color: #ec2b4f;
  padding: 10px 70px 10px 70px;
  border-radius: 30px;
  text-decoration: none;
}


.btnpride:hover{
  background-color: #fdcf2f;
  color: black;
  box-shadow: 5px 5px 20px #525456;
}

.contactpride p{
  font-size: 1.4em;
  padding-left: 5%;
  padding-right: 5%;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}

.contactpride img{
  margin-top: 40px;
  width: 300px;
}

.rojo{
  height: 40px;
  background-color: #ec2b4f;
}

.naranja{
  height: 40px;
  background-color: #f8a93e;
}

.amarillo{
  height: 40px;
  background-color: #f9d557;
}

.verde{
  height: 40px;
  background-color: #66b8a1;
}

.azul{
  height: 40px;
  background-color: #2d97ca;
}

.morado{
  height: 40px;
  background-color: #645ba7;
}

.rojon{
  height: 70px;
  background-color: #ec2b4f;
}

.naranjan{
  height: 70px;
  background-color: #f8a93e;
}

.amarillon{
  height: 70px;
  background-color: #f9d557;
}

.verden{
  height: 70px;
  background-color: #66b8a1;
}

.azuln{
  height: 70px;
  background-color: #2d97ca;
}

.moradon{
  height: 70px;
  background-color: #645ba7;
}

@media (max-width: 770px) { 

  .logopride img{
    width: 250px;
    height: auto;
  }

  .rojon{
    height: 40px;
    background-color: #ec2b4f;
  }
  
  .naranjan{
    height: 40px;
    background-color: #f8a93e;
  }
  
  .amarillon{
    height: 40px;
    background-color: #f9d557;
  }
  
  .verden{
    height: 40px;
    background-color: #66b8a1;
  }
  
  .azuln{
    height: 40px;
    background-color: #2d97ca;
  }
  
  .moradon{
    height: 40px;
    background-color: #645ba7;
  }
  
  #heropride img{
    width: 100%;
    height: auto;
    margin: auto;
  }
  
  #maskpride{
    background-image: url(/images/back_pride2.webp);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    height: 380px;
  }
  
  #cfrida{
    margin-top: 20px;
  }
  
  .imgfrid img{
  width: 100%;
  margin: auto;
  }
  
  .textfrida{
    padding-left: 2%;
    padding-top: 1%;
  }
  
  .textfrida img{
    width: 90%;
    height: auto;
  }
  
  .textfrida p{
    font-size: 1em;
    text-align: justify;
  }
  
  #maskpride p{
    font-size: 1.2em;
    padding-left: 2%;
    padding-top: 50%;
    text-align: center;
  }

  .friends img{
    width: 400px;
    height: auto;
  }
  
  .infofriend p{
    font-size: 1.2em;
    padding-top: 5%;
  }

  .infofriend img{
    width: 300px;
    height: auto;
  }
  
  #registropride{
    margin-top: 20px;
    margin-bottom: 30px;
  }
  
  #registropride p{
    font-size: 1.2em;
    padding-left: 4%;
    padding-right: 4%;
    font-weight: 600;
  }
  
  #registropride a{
    margin-top: 30px;
    font-size: 1.4em;
    font-weight: 600;
    color: #ffff;
    background-color: #ec2b4f;
    padding: 10px 70px 10px 70px;
    border-radius: 30px;
    text-decoration: none;
  }
  
  #registropride a:hover{
    background-color: #fdcf2f;
    color: black;
    box-shadow: 5px 5px 20px #525456;
  }
  
  #registropride img{
    width: 300px;
    height: auto;
    margin-top: 40px;
    margin-bottom: 10px;
  }
  
  .rojo{
    height: 40px;
    background-color: #ec2b4f;
  }
  
  .naranja{
    height: 40px;
    background-color: #f8a93e;
  }
  
  .amarillo{
    height: 40px;
    background-color: #f9d557;
  }
  
  .verde{
    height: 40px;
    background-color: #66b8a1;
  }
  
  .azul{
    height: 40px;
    background-color: #2d97ca;
  }
  
  .morado{
    height: 40px;
    background-color: #645ba7;
  }

  .formpride{
    width: 80%;
    height: auto;
    margin: auto;
  }

  .formbtn{
    text-align: center;
  }

}

@media (max-width: 576px) { 

  .logopride img{
    width: 140px;
    height: auto;
  }

  .rojon{
    height: 30px;
    background-color: #ec2b4f;
  }
  
  .naranjan{
    height: 30px;
    background-color: #f8a93e;
  }
  
  .amarillon{
    height: 30px;
    background-color: #f9d557;
  }
  
  .verden{
    height: 30px;
    background-color: #66b8a1;
  }
  
  .azuln{
    height: 30px;
    background-color: #2d97ca;
  }
  
  .moradon{
    height: 30px;
    background-color: #645ba7;
  }
  
  #heropride img{
    width: 100%;
    height: auto;
    margin: auto;
  }
  
  #maskpride{
    background-image: url(/images/back_pride2.webp);
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
    height: 200px;
  }
  
  #cfrida{
    margin-top: 20px;
  }
  
  .imgfrid img{
  width: 100%;
  margin: auto;
  }
  
  .textfrida{
    padding-left: 2%;
    padding-top: 1%;
  }
  
  .textfrida img{
    width: 90%;
    height: auto;
  }
  
  .textfrida p{
    font-size: 1em;
    text-align: justify;
  }
  
  #maskpride p{
    font-size: 1em;
    padding-left: 2%;
    padding-top: 30%;
    text-align: center;
  }

  .friends img{
    width: 330px;
    height: auto;
  }
  
  .infofriend p{
    font-size: 1em;
    padding-top: 5%;
  }

  .infofriend img{
    width: 250px;
    height: auto;
  }
  
  #registropride{
    margin-top: 20px;
    margin-bottom: 30px;
  }
  
  #registropride p{
    font-size: 1em;
    padding-left: 5%;
    padding-right: 5%;
    font-weight: 600;
  }
  
  #registropride a{
    margin-top: 30px;
    font-size: 1.4em;
    font-weight: 600;
    color: #ffff;
    background-color: #ec2b4f;
    padding: 10px 70px 10px 70px;
    border-radius: 30px;
    text-decoration: none;
  }
  
  #registropride a:hover{
    background-color: #fdcf2f;
    color: black;
    box-shadow: 5px 5px 20px #525456;
  }
  
  #registropride img{
    width: 250px;
    height: auto;
    margin-top: 40px;
    margin-bottom: 10px;
  }
  
  .rojo{
    height: 40px;
    background-color: #ec2b4f;
  }
  
  .naranja{
    height: 40px;
    background-color: #f8a93e;
  }
  
  .amarillo{
    height: 40px;
    background-color: #f9d557;
  }
  
  .verde{
    height: 40px;
    background-color: #66b8a1;
  }
  
  .azul{
    height: 40px;
    background-color: #2d97ca;
  }
  
  .morado{
    height: 40px;
    background-color: #645ba7;
  }

  .formpride{
    width: 80%;
    height: auto;
    margin: auto;
  }

  .formbtn{
    text-align: center;
  }

}