/* CSS Document */
/* CSS Document */
/* * * * Medidas * * * */
/* * * * Colores * * * */
/* * * * Textos * * * */
/* * * * Imagenes * * * */
/* * * * z * * * */
/* * * * fuentes * * * */
@font-face { font-family: heebo; src: url(fuentes/Heebo-Light.ttf) format("truetype"); font-weight: 300; }
@font-face { font-family: heebo; src: url(fuentes/Heebo-Regular.ttf) format("truetype"); font-weight: 400; }
@font-face { font-family: heebo; src: url(fuentes/Heebo-Medium.ttf) format("truetype"); font-weight: 500; }
/* * * * * SCSS * * * * */
a.botonPaso, div.botonPaso { display: inline-block; width: 40px; height: 40px; margin: 15px 15px 15px 0; vertical-align: top; text-align: center; line-height: 40px; font-size: 1.33rem; }

/* * * * * Reglas css * * * * */
html { height: 100%; margin: 0; padding: 0; background: -webkit-linear-gradient(left, #fff 0%, #fff 40%, #49a942 40%, #49a942 100%); background: linear-gradient(to right, #fff 0%, #fff 40%, #49a942 40%, #49a942 100%); }
@media screen and (max-width: 700px) and (orientation: portrait) { html { background: #49a942 none; } }

body { width: 100%; height: 100%; margin: 0; padding: 0; background: -webkit-linear-gradient(left, #fff 0%, #fff 40%, #49a942 40%, #49a942 100%); background: linear-gradient(to right, #fff 0%, #fff 40%, #49a942 40%, #49a942 100%); font: 400 18px "heebo", Arial, Helvetica, sans-serif; color: #33632e; }
@media screen and (max-width: 700px) and (orientation: portrait) { body { background: #49a942 none; } }

/* * * * * *  html 5 fix  * * * * * */
section, article, header, footer, nav, aside, hgroup { display: block; }

/* * * * * *  resets  * * * * * */
a { text-decoration: none; }

/* * * * * *  layout  * * * * * */
.portada { box-sizing: border-box; position: absolute; width: 100%; height: 100%; z-index: 100; background: #fff url(imagenes/portada.jpg) center/cover; -webkit-animation: disolverPortada 0.5s ease-in 3s 1 forwards; animation: disolverPortada 0.5s ease-in 3s 1 forwards; }
.portada span { position: absolute; bottom: 5px; width: 94%; padding: 0 3%; font-size: 0.778rem; line-height: 15px; color: #000; text-align: center; }
.portada:target { -webkit-animation: none; animation: none; display: none; }

header { box-sizing: border-box; height: 0px; min-width: 325px; text-align: right; padding: 0px; line-height: 0px; background: #fff url(imagenes/logoLilly.png) center left/contain no-repeat; font-weight: 500; font-size: 2rem; color: #49a942; }
@media screen and (max-width: 440px) { header { font-size: 1.66rem; } }

.contenedor { display: inline-block; width: 40%; vertical-align: top; background-color: #fff; }
@media screen and (max-width: 700px) and (orientation: portrait) { .contenedor { width: 100%; min-width: 325px; } }

.animacion { display: inline-block; width: 55%; height: calc(100% - 40px); margin-left: 5%; text-align: center; background-color: #49a942; }
@media screen and (max-width: 700px) and (orientation: portrait) { .animacion { position: absolute; top: 41.844px; left: 0; width: 100%; margin-left: 0; height: auto; text-align: center; } }
@media screen and (max-width: 440px) { .animacion { top: 31.548px; } }

.progreso { position: relative; left: 1px; padding-left: 15px; font-size: 1.66rem; font-weight: 300; color: #fff; background-color: #49a942; }
@media screen and (max-width: 700px) and (orientation: portrait) { .progreso { position: static; } }
@media screen and (max-width: 440px) { .progreso { font-size: 1.22rem; } }

@media screen and (max-width: 700px) and (orientation: portrait) { nav { position: absolute; top: 41.844px; z-index: 10; } }

.textos { padding: 20px; }
@media screen and (max-width: 700px) and (orientation: portrait) { .textos { margin-top: 800px; } }
@media screen and (max-width: 555.55px) and (orientation: portrait) { .textos { margin-top: 144.14414%; } }

footer { min-height: 40px; min-width: 325px; padding: 0 15px; text-align: center; font-size: 0.778rem; color: #fff; font-weight: 300; line-height: 40px; background-color: #49a942; }
@media screen and (max-width: 440px) { footer { font-size: 0.66rem; line-height: 40px; } }

/* * * * * *  elements  * * * * * */
a.botonPaso { box-sizing: border-box; background-color: #2f8c29; color: #fff; font-weight: 300; }
a.botonPaso:hover { border: 3px solid #fff; line-height: 34px; }
@media screen and (max-width: 700px) and (orientation: portrait) { a.botonPaso { display: block; } }

div.botonPaso { background-color: #fff; color: #2c7527; font-weight: 500; }
@media screen and (max-width: 700px) and (orientation: portrait) { div.botonPaso { display: block; } }

.instruccion { font-size: 1.33rem; font-weight: 400; color: #33632e; text-decoration: underline; }
@media screen and (max-width: 440px) { .instruccion { font-size: 1.11rem; } }

.detalles { font-size: 1rem; color: #49a942; font-weight: 300; }
.detalles span { color: #33632e; }
.detalles .negrita { font-weight: 400; }

canvas { width: 100%; max-width: 555.55px; min-width: 325px; height: auto; }

/* * * * * *  text  * * * * * */
/* * * * * *  buttons  * * * * * */
/* * * * * *  absolute elements  * * * * * */
@-webkit-keyframes disolverPortada { 0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; } }
@keyframes disolverPortada { 0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; } }