*{
  box-sizing: border-box;
}
html{
  height: 100%
}
body{
  position: relative;
  margin: 0;
  padding: 0;
  color:#fff;
  font-family: 'Sintony', serif;
  height: 100%;
  font-size: 16px;
  text-align: center;
  background: #0345a3; /* Old browsers */
  
}

.underconstruction{
  position: absolute;
  width: 100%;
  text-align: right;
  color: #fff;
  top: 0;
  padding: 10px;
  font-size: 12px;
}

section{
  padding: 10px;
  margin:0 auto;
  min-height: 100%;
  width: 100%;
  background: -moz-linear-gradient(-45deg, #0345a3 0%, #a444e4 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #0345a3 0%,#a444e4 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #0345a3 0%,#a444e4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0345a3', endColorstr='#a444e4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

@media only screen and (min-width: 768px) {
    section{
        padding: 0;
        display: flex;
        align-items: center;
    }
}

.content{
  width: 100%;
}

h1{
  font-family: 'Monoton', cursive;
  font-weight: 400;
  font-size: 50px;
  color:#f72359;
  margin: 0;
}

h2{
  font-weight: 400;
  font-size: 16px;
  text-transform: uppercase;
  margin: 20px;
  margin: 0 0 30px 0;
}

a{
  color: #fff;
}

.separador{
  height: 1px;
  background-color: #fff;
  width: 25%;
  margin: 60px auto;
}




.boton {
position: relative;
-webkit-appearance: none;
 -moz-appearance: none;
      appearance: none;
background: #f72359;
padding: 1em;
display: inline-block;
text-decoration: none;
border: none;
color: white;
font-size: 1.2em;
cursor: pointer;
outline: none;
overflow: hidden;
border-radius: 100px;
}
.boton span {
position: relative;
pointer-events: none;
}
.boton span img{
vertical-align: middle;
}
.boton::before {
--size: 0;
content: '';
position: absolute;
left: var(--x);
top: var(--y);
width: var(--size);
height: var(--size);
background: radial-gradient(circle closest-side, #4405f7, transparent);
-webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
transition: width .2s ease, height .2s ease;
}
.boton:hover::before {
--size: 400px;
}


form{
width: 96%;
margin: 0 auto;
text-align: left;
color: #fff;
}
form div{
width: 100%;
margin-bottom: 10px;
overflow: hidden;
}
form label{
color: #fff;
display: block;
margin-bottom: 2px;
}
form input,
form textarea{
color: #0345a3;
width: 100%;
border-radius: 5px;
padding: 8px 5px;
font-size: 14px;
border: 1px solid #ccc;
outline: 0;
}

.modal{
background: #a444e4; /* Old browsers */
background: -moz-linear-gradient(-45deg, #a444e4 0%, #0345a3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #a444e4 0%,#0345a3 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #a444e4 0%,#0345a3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a444e4', endColorstr='#0345a3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}