/* CSS Document */
.formulario{width:60%;margin:0 auto;}

input.form-1:focus ~ label.form-1, textarea:focus ~ label.form-1, input.form-1:valid ~ label.form-1, textarea:valid ~ label.form-1 {
  font-family: 'Handlee', cursive;
  font-size: 1.2em;
  color: #63babe;
  top: -2.75rem;
  -webkit-transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
          transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
}

.styled-input {
  float: left;
  width: 100%;
  margin: 2rem 0 1rem;
  position: relative;
}
.styled-input label.form-1 {
  color: #999;
  padding: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
          transition: all 0.25s cubic-bezier(0.2, 0, 0.03, 1);
  pointer-events: none;
}
.styled-input.wide {
  width: 100%;
}

.styled-input-submit {
  width: 100%;display:block;
}

input.form-1, textarea {
  background:#fff  url("../img/paper_bg.jpg");
  padding: 1rem 1rem;
  border: 0;
  width: 100%;
  font-family: 'Handlee', cursive;
  font-size: 1.2rem;
  background:transparent;
  border-bottom:1px solid #63babe;color:#63babe;
}
input.form-1 ~ span, textarea ~ span {
  display: block;
  width: 0;
  height: 3px;
  background: #63babe;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
          transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
}
input.form-1:focus, textarea:focus {
  outline: 0;
}
input.form-1:focus ~ span, textarea:focus ~ span {
  width: 100%;
  -webkit-transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
          transition: all 0.125s cubic-bezier(0.2, 0, 0.03, 1);
}

textarea{
  width: 100%;
  min-height: 15em;
}

#submit {
 width:100%;
 background:#63babe;
 border:none;
 color:#fff;
 cursor:pointer;
 font-size:20px;
 padding:10px;
 }
 
input#submit:hover{
 background:#59a0a2;
 }

.error-message{color:#F00; font-size: 1.2rem; margin-top:12px;font-style:italic;}