/*Tipography*/
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
/*Colors*/
/*Estructura General*/
.clearfix:after {
  content: ".";
  display: block;
  font-size: 0;
  line-height: 0;
  height: 0;
  clear: both;
  visibility: hidden; }

.clearfix {
  display: inline-block; }

* html .clearfix {
  height: 1%; }

.clearfix {
  display: block; }

*, *:after, *:before {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility; }

html, body {
  width: 100%;
  height: 100%;
  position: relative;
  float: left;
  color: #000000; }

body {
  font-family: "Roboto", sans-serif;
  font-size: 1em; }
  body main {
    height: 100%;
    padding: 2em 0; }
    body main picture {
      width: 50%;
      max-width: 250px; }
    body main img {
      width: 100%;
      line-height: 0; }
    body main p, body main label {
      width: 100%;
      text-align: left;
      padding-bottom: 1em; }
    body main a {
      width: auto;
      padding: 1em 3em;
      color: #ffffff;
      background: #000000;
      border: 1px solid #000000;
      border-radius: 10px;
      text-decoration: none; }
      body main a:hover {
        background: rgba(0, 0, 0, 0.4); }
    body main .nubes {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      background-image: url("../images/nubes.png");
      background-position: 0px 0px;
      background-repeat: repeat-x;
      background-size: auto 100%;
      animation: animatedBackground 120s linear infinite;
      -ms-animation: animatedBackground 120s linear infinite;
      -moz-animation: animatedBackground 120s linear infinite;
      -webkit-animation: animatedBackground 120s linear infinite; }
@keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
@-webkit-keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
@-ms-keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
@-moz-keyframes animatedBackground {
  from {
    background-position: 0 0; }
  to {
    background-position: 100% 0; } }
    body main h1 {
      width: auto;
      text-align: center;
      color: #ffffff;
      font-size: 3em;
      padding-bottom: 0.5em; }
      @media only screen and (max-width: 600px) {
        body main h1 {
          font-size: 2em; } }

body main {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex; }

/*Direction*/
body main {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column; }

/*Justify items*/
body main {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start; }

/*Align items*/
body main {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center; }

/* Backgrounds */
/* Animaciones */
body main a {
  transition: 0.2s all;
  -webkit-transition: 0.2s all;
  -moz-transition: 0.2s all;
  -o-transition: 0.2s all;
  -ms-transition: 0.2s all; }

@keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-o-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }
@-ms-keyframes fadeIn {
  0% {
    opacity: 0;
    left: -100%; }
  100% {
    opacity: 1;
    left: 0; } }