/*Suscribe only mail para news letter*/
/*https://codepen.io/ahmedhosna95/pen/WLxbGO*/
/*Como se usa HTML*/
/**<div class="subscribe-box"> 
  <h2>Subscribe to our mailing list</h2>
  <form class="subscribe">
    <input type="email" placeholder="example@gmail.com" autocomplete="off" required="required"/>
    <button type="submit"> <span>Subscribe</span></button>
  </form>
</div>**/

@import url("acec.css");

.subscribe-box {
  background-color: rgb(var(--Color-Azul-Cielo));
  font-family: var(--Fuente-Textos);
  padding: 6em 0;
  text-align: center;
}
.subscribe-box h2 {
  margin: 0 0 .85em 0;
  font-weight: 100;
  font-size: 30px;
  font-family: var(--Fuente-Titulos);
}
.subscribe-box .subscribe {
  width: 100%;
  max-width: 600px;
  margin: auto;
}
.subscribe-box .subscribe input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid;
  padding: 1em 0 .8em;
  text-align: center;
  font-size: 18px;
  font-family: inherit;
  font-weight: 300;
  line-height: 1.5;
  color: inherit;
  outline: none;
}
.subscribe-box .subscribe input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-box .subscribe input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-box .subscribe input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-box .subscribe input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-box .subscribe input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.subscribe-box .subscribe button {
  all: unset;
  margin-top: 2.4em;
  background: transparent;
  border: 2px solid white;
  padding: 1em 4em;
  border-radius: 50px;
  cursor: pointer;
  display: inline-block;
  font-weight: 700;
  position: relative;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.subscribe-box .subscribe button span {
  display: inline-block;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}
.subscribe-box .subscribe button:before, .subscribe-box .subscribe button:after {
  content: "";
  display: block;
  position: absolute;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  opacity: 0;
}
.subscribe-box .subscribe button:before {
  height: 7px;
  width: 7px;
  background: transparent;
  border-right: 2px solid;
  border-top: 2px solid;
  right: 30px;
  top: 21px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.subscribe-box .subscribe button:after {
  background: white;
  height: 2px;
  width: 50px;
  left: 0;
  top: 1.49em;
}
.subscribe-box .subscribe button:hover span {
  -webkit-transform: translateX(-10px);
          transform: translateX(-10px);
}
.subscribe-box .subscribe button:hover:before {
  opacity: 1;
}
.subscribe-box .subscribe button:hover:after {
  width: 14px;
  opacity: 1;
  -webkit-transform: translateX(160px);
          transform: translateX(160px);
}