.suscripcion {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 40px;
}

.contacto-info {
  background-color: #2c2a2f;
  border-radius: 20px;
  text-align: center;
  width: 80%;
  margin: 0 auto;
  margin-top: 5%;
  padding-bottom: 3%;
}

.logo {
  padding-top: 40px;
  width: 50%;
  margin: auto;
}

.beneficios {
  margin: auto;
  margin-top: 40px;
  margin-left: 9%;
  margin-bottom: 20px;
}

.beneficios h3 {
  font-family: 'Couture';
  text-align: initial;
  font-size: 18px;
}

.listado {
  text-align: initial;
  font-size: 15px;
}

.listado li {
  font-family: inherit;
  list-style: none;
  margin-left: -20px;
}

.btn {
  font-family: 'Couture';
  /* font-size: 12px;
  width: 80%;
  background-color: #f2af29;
  color: black; */
}
#plandiv{
  margin-top: 20px;
  margin-bottom: 10px;
}

.btn:hover {
  color: white;
  /* background-color: rgb(220,147,37); */
}

.pagos {
  width: 85%;
  margin: auto;
}

.boton {
  margin: 20px auto;
}

.boton-stripe{
  background: #313838;
  border-radius: 14px;
  height: 32px; 
  cursor: pointer;
  width: 100%;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
.class-o{
  color: #0a0a0a;
  font-size: small;
  font-family: cursive;

}

.div-pago {
  width: 33%;
  background-color: rgb(255,255,255);
  box-shadow: 0px 0px 15px 0px rgb(0,0,0);
  height: auto;
  border-radius: 8px;
  margin: auto;
  opacity: 0.85;
}

.div-pago-active{
  opacity: 1;
}

.div-pago:hover {
  opacity: 1;
}

.mensualbig {
  width: 95%!important;
  height: 330px;
}
.dolar{
  margin: 0!important;
  width: 50%!important;
}

.titulo {
  background-color: rgb(158,158,158);
  border-radius: 8px 8px 0px 0px;
  font-family: 'Couture';
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 18PX;
}

.titulo-llamativo {
  background-color: rgb(242,175,41);
  border-radius: 10px 10px 0px 0px;
  font-family: 'Couture';
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 18PX;
}

.img-fluid.precio {
  width: 80%;
  margin: auto;
  margin-top: 10px;
}

.mensual-botones {
  margin-top: 10px;
}

.semestral-botones {
  margin-top: 70px;
}

.footer {
  width: 70%;
}


@media only screen and (min-width: 200px) and (max-width: 500px) {
      .suscripcion {
          margin-top: 20px;
      }

      .inicio {
          font-size: 12px;
          margin-left: 5%;
      }

      .contacto-info {
          width: 100%;
          background-color: transparent;
      }

      .logo {
          width: 80%;
      }

      .beneficios h3 {
          font-size: 12px;
      }

      .listado {
          font-size: 12px;
          margin-right: 40px;
      }

      .div-pago {
          width: 80%;
          margin: 10px auto;
      }

      .mensualbig {
        width: 80%!important;
        height: 200px;
        margin: 10px auto;
      }

      .dolar{
        width: 70%!important;
      }

      .titulo {
          font-size: 15PX;
      }

      .img-fluid.precio {
          width: 60%;
          margin-top: 0px;
      }

      .mensual-botones {
          margin-top: 0px;
      }

      .semestral-botones {
          margin-top: 0px;
      }

      .boton {
          margin: 10px auto;
      }
}

@media only screen and (min-width: 501px) and (max-width: 700px) {
      .suscripcion {
          margin-top: 20px;
      }

      .inicio {
          font-size: 12px;
          margin-left: 5%;
      }

      .contacto-info {
          width: 100%;
          background-color: transparent;
      }

      .logo {
          width: 80%;
      }

      .beneficios h3 {
          font-size: 12px;
      }

      .listado {
          font-size: 12px;
          margin-right: 40px;
      }

      .div-pago {
          width: 55%;
          margin: 10px auto;
      }

      .mensualbig {
        width: 55%!important;
        height: 200px;
        margin: 10px auto;
      }

      .dolar{
        width: 70%!important;
      }

            .titulo {
          font-size: 15PX;
      }

      .img-fluid.precio {
          width: 60%;
          margin-top: 0px;
      }

      .mensual-botones {
          margin-top: 0px;
      }

      .semestral-botones {
          margin-top: 0px;
      }

      .boton {
          margin: 10px auto;
      }
}

@media only screen and (min-width: 701px) and (max-width: 800px) {
      .suscripcion {
          margin-top: 20px;
      }

      .inicio {
          font-size: 12px;
          margin-left: 5%;
      }

      .contacto-info {
          width: 100%;
          background-color: transparent;
      }

      .logo {
          width: 80%;
      }

      .beneficios h3 {
          font-size: 12px;
      }

      .listado {
          font-size: 12px;
          margin-right: 40px;
      }

      .div-pago {
          width: 33%;
          margin: 10px auto;
      }

            .titulo {
          font-size: 15PX;
      }

      .img-fluid.precio {
          width: 65%;
          margin-top: 0px;
      }

      .anual-botones{
          margin-top: 45px;
      }

      .mensual-botones {
          margin-top: 21px;
      }

      .semestral-botones {
          margin-top: 40px;
      }

      .boton {
          margin: 10px auto;
      }

      .anual .precio{
        margin-top: 20px;
        width: 80%;
      }

      .semestral .precio{
          margin-top: 13px;
      }

}

@media only screen and (min-width: 801px) and (max-width: 1000px) {
      .contacto-info {
          width: 90%;
      }

      .inicio {
          margin-left: 7%;
      }

      .logo {
          width: 70%;
      }
      .div-pago {
          width: 33%;
          margin: 10px auto;
      }

      .titulo {
          font-size: 15PX;
      }

      .img-fluid.precio {
          width: 65%;
      }

      .anual-botones{
          margin-top: 42px;
      }

      .mensual-botones {
          margin-top: 21px;
      }

      .semestral-botones {
          margin-top: 34px;
      }

      .anual .precio{
        margin-top: 40px;
        width: 80%;
      }

      .semestral .precio{
        margin-top: 35px;
      }

}

@media only screen and (min-width: 1001px) {
      .pagos {
          width: 680px;
          margin: auto;
      }

      .inicio {
          margin-left: 20%;
      }

      .logo {
          width: 60%;
      }
      .div-pago {
          width: 33%;
          margin: 10px auto;
      }

      .titulo {
          font-size: 18PX;
      }

      .anual-botones {
          margin-top: 0px;
      } 
      /* .anual-botones{
          margin-top: 78px;
      }
      */
      .mensual-botones {
          margin-top: 0px; 
      }
      /* .mensual-botones {
          margin-top: 21px;
      } */

      .semestral-botones {
          margin-top: 0px;
      }

      
      .img-fluid.precio {
          width: 80%;
      }

      .anual .precio{
        margin-top: 40px;
        width: 80%;
      }

      .semestral .precio{
        margin-top: 35px;
      }


}

.StripeElement {
  box-sizing: border-box;

  height: 40px;

  padding: 10px 12px;

  border: 1px solid transparent;
  border-radius: 4px;
  background-color: white;

  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
.scale{transform: scale(1.15)!important;z-index: 99;}
footer{z-index: 999;}

.btn-pay img{cursor: pointer;}
.img-desc-pypl{width: 13px;position: relative;margin-left: 152px;margin-top: -66px;z-index:999;}
/* .img-desc-pypl{width: 13px;position: relative;margin-left: 152px;margin-top: -69px;z-index:999;} */
.btn-shadow{border: 1px solid #000;width: 83%;border-radius: 50px;display: inline-flex;margin: 0px 0px 10px 0px;cursor: pointer;}
.btn-shadow:hover{box-shadow: 0 0 5px #fabf18;}
.btn-shadow:active{box-shadow: 0 0 5px #fabf18;	}
.btn-icon{border: 1px solid #fabf18;background: #fabf18!important;width: 25%;border-radius: 50px 0px 0px 50px;padding: 10px 0px 0px 7px;display: inline-block;}
.txt-card{color: #000;font-size: 9px;font-weight: bold;margin-left: 10px;}
.txt-card-2{color: #000;font-size: 9px;font-weight: bold; margin-left: 10px;}
.txt-efectivo{}
.oxxo{width: 37px; margin-left: -10px;padding-bottom: 3px;}
.americanexp{width: 20px;padding: 2px;margin-left: -2px; /*margin-left: 10px;*/	}
.americanexp2{width: 20px;padding: 2px;margin-left: -26px;}
.icon-card{	width: 20px;}
.btn-card{display: inline-block; /*padding: 1px;*/}
.icon-desc{	width: 15px;position: absolute;margin-left: 40px;margin-top: -28px; }