/* ----------------------
You need to include 
- animate.min.css from https://github.com/daneden/animate.css
- zmd.hierarchical-display.min.css from https://github.com/zavoloklom/material-design-hierarchical-display is optional
-------------------------*/
/* -----------------------
demo style - you don't need it in your projects 
-------------------------*/
/* -- import Roboto Font ---------------------------- */
@import "https://fonts.googleapis.com/css?family=Roboto:400,500&subset=latin,cyrillic";
/* -- Box model ------------------------------- */
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/* -- Demo style ------------------------------- */
html,
body {
  position: relative;
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
html {
  position: relative;
  overflow-x: hidden;
  margin: 0px;
  padding: 0;
  min-height: 100%;
}
body {
  font-family: 'Roboto', 'Helvetica Neue, Helvetica, Arial', sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  line-height: 0px;
  letter-spacing: -2.95px;
  color: #212121;
  background-image: url("cielo1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;

}
.main {
  margin: auto;
  max-width: 1080px;
}
strong {
  font-wieght: 500;
}
h1 {
  font-size: 24px;
  line-height: 2px;
  letter-spacing: 0;
  font-weight: 400;
  color: #212121;
  text-transform: inherit;
  margin-bottom: 0px;
}
h2 {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.1px;
  font-weight: 400;
  color: #212121;
}


.posit {
    width: 100%;
    height: 100px;
    background: transparent;
    border-style: solid;
    border-color:transparent;
    border-radius: 0px;
    padding: 0px;
    position: absolute;
    color:#fff;
    z-index: 1000;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-weight: 500;
    left: 40%; top:12%;
    -webkit-animation: animacion1 20s; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: animacion1 20s;
    animation-direction: alternate;
 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animacion1 {
 0%   {background:rgb(255,255,255,0); left: 41%; top: 11%; opacity: 0;}
 100%  {background:rgb(255,255,255,0); left: 41%; top: 11%; opacity: 1;}
}
@keyframes animacion1 {
 0%   {background:rgb(255,255,255,0); left: 41%; top: 11%; opacity: 0;}
 100%  {background:rgb(255,255,255,0); left: 41%; top: 11%; opacity: 1;}     
}

.entrada {
    width: 100%;
    height: 100px;
    background: transparent;
    border-style: solid;
    border-color:transparent;
    border-radius: 0px;
    padding: 0px;
    position: absolute;
    color:#fff;
    z-index: 1000;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-weight: 500;
    left: 60%; top:80%;
    -webkit-animation: animacion2 20s; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: animacion2 20s;
    animation-direction: alternate; 
}

/* Chrome, Safari, Opera */
@-webkit-keyframes animacion2 {
 0%   {background:rgb(255,255,255,0); left: 61%; top: 80%; opacity: 0;}
 100%  {background:rgb(255,255,255,0); left: 61%; top: 90%; opacity: 1;}
}
@keyframes animacion2 {
 0%   {background:rgb(255,255,255,0); left: 61%; top: 80%; opacity: 0;}
 100%  {background:rgb(255,255,255,0); left: 61%; top: 80%; opacity: 1;}     
}


.diario {
    width: 100%;
    height: 100px;
    background: transparent;
    border-style: solid;
    border-color:transparent;
    border-radius: 0px;
    padding: 0px;
    position: relative;
    color:#fff;
     z-index: 1000;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-weight: 500;
     left: 0%; top:10%;

}