h1, h2, .main-font {
  font-family: 'Fredoka One', cursive; }

h3, h4, h5, p, li, span, a, .second-font {
  font-family: 'Quattrocento Sans', sans-serif; }

html, body {
  width: 100%;
  height: 100%; }

div#background {
  width: 100%;
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$mainColor', endColorstr='$secondColor',GradientType=0 );
  background-image: url("/application/assets/media/bg/bg-login.png"), -webkit-linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-image: url("/application/assets/media/bg/bg-login.png"), -moz-linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-image: url("/application/assets/media/bg/bg-login.png"), -webkit-gradient(linear, left top, left bottom, from(#6936d2), to(#a02f7e));
  background-image: url("/application/assets/media/bg/bg-login.png"), -o-linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-image: url("/application/assets/media/bg/bg-login.png"), linear-gradient(top, #6936d2 0%, #a02f7e 100%);
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat; }

div#content-login {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  max-width: 90%;
  min-height: 200px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  div#content-login img#logo {
    display: block;
    margin: auto;
    max-width: 70px; }
  div#content-login p#titulo {
    text-align: center;
    font-size: 1.4em;
    color: white;
    margin-bottom: 40px; }
  div#content-login input {
    display: block;
    margin: auto;
    width: 95%;
    height: 35px;
    margin-top: 20px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
    outline: none;
    color: white;
    -webkit-transition: border-bottom .2s;
    -o-transition: border-bottom .2s;
    transition: border-bottom .2s;
    border-radius: 0px !important; }
    div#content-login input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.6); }
    div#content-login input:focus {
      border-bottom: 1px solid white; }
    div#content-login input[type='email'] {
      display: none; }
  div#content-login button {
    display: block;
    margin: auto;
    width: 95%;
    padding: 15px;
    margin-top: 40px;
    background-color: transparent;
    color: white;
    border: none;
    border: 1px solid white;
    border-radius: 25px;
    cursor: pointer;
    outline: none;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: background-color .2s, border-left .5s, border-bottom .5s, -webkit-transform linear 1s;
    transition: background-color .2s, border-left .5s, border-bottom .5s, -webkit-transform linear 1s;
    -o-transition: background-color .2s, transform linear 1s, border-left .5s, border-bottom .5s;
    transition: background-color .2s, transform linear 1s, border-left .5s, border-bottom .5s;
    transition: background-color .2s, transform linear 1s, border-left .5s, border-bottom .5s, -webkit-transform linear 1s; }
    div#content-login button span {
      -webkit-transition: color .2s;
      -o-transition: color .2s;
      transition: color .2s; }
    div#content-login button:hover {
      background-color: white; }
      div#content-login button:hover span {
        color: #6936d2; }
  div#content-login p#recuperar-pass {
    display: inherit;
    text-align: center;
    margin-top: 20px;
    color: white;
    text-decoration: none;
    cursor: pointer; }
    div#content-login p#recuperar-pass:hover {
      text-decoration: underline; }

p#texto-cookies {
  color: #EAEAEA;
  font-size: .9em;
  margin-top: 50px;
  text-align: center; }
  p#texto-cookies a {
    color: white;
    font-weight: bold; }

@-webkit-keyframes rotate360 {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes rotate360 {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }