html, body, section {
  margin: 0%;
  padding: 0%;
  width: 100%;
  height: 100%;
}

#container {
  min-height:100%;
  position:relative;
}



/**************
FONTS
***************/


@font-face{ 
	font-family: 'Baron Neue Black';
	src: url('../fonts/Baron Neue Black.eot');
	src: url('../fonts/Baron Neue Black.eot#iefix') format('embedded-opentype'),
	     url('../fonts/Baron Neue Black.woff') format('woff'),
	     url('../fonts/Baron Neue Black.ttf') format('truetype'),
	     url('../fonts/Baron Neue Black.svg#webfont') format('svg');
}

@font-face{ 
	font-family: 'Baron Neue Italic';
	src: url('../fonts/Baron Neue Italic.eot');
	src: url('../fonts/Baron Neue Italic.eot#iefix') format('embedded-opentype'),
	     url('../fonts/Baron Neue Italic.woff') format('woff'),
	     url('../fonts/Baron Neue Italic.ttf') format('truetype'),
	     url('../fonts/Baron Neue Italic.svg#webfont') format('svg');
}

@font-face{ 
	font-family: 'Nexa light';
	src: url('../fonts/Nexa-Light.eot');
	src: url('../fonts/Nexa-Light.eot#iefix') format('embedded-opentype'),
	     url('../fonts/Nexa-Light.woff') format('woff'),
	     url('../fonts/Nexa-Light.ttf') format('truetype'),
	     url('../fonts/Nexa-Light.svg#webfont') format('svg');
}

@font-face{ 
	font-family: 'Nexa Bold';
	src: url('../fonts/Nexa Bold.eot');
	src: url('../fonts/Nexa Bold.eot#iefix') format('embedded-opentype'),
	     url('../fonts/Nexa Bold.woff') format('woff'),
	     url('../fonts/Nexa Bold.ttf') format('truetype'),
	     url('../fonts/Nexa Bold.svg#webfont') format('svg');
}


html {
  font-size:14px;
}

html h1 {
  margin:0px 0 0px 0;
}

html h2 {
  margin:0px 0 0px 0;
}

body {
  font-size: 100%;
  background-color: #161A1A;
}

h1, h2 {
  font-family: 'Nexa Bold';
  font-weight: lighter; 
  color: #E2DDD1;
  margin:1em 0 1em 0;
}

p {
  font-family: 'Nexa Light';
  font-weight: lighter; 
  color: #E2DDD1;
  margin:1em 0 1em 0;
}

span#rito {
    font-family: Nexa Bold; 
}

span#oculto {
	font-family: Baron Neue Black;

}


/*Botón*/

a.boton {
    color: #E2DDD1;
    font-family: Baron Neue Black;
    border: none;
    font-size: 1.1em;
    margin: 2em;
    cursor: pointer;
    text-decoration: none;
}


/***INTRO***/
.container {
    max-width: 550px;
    display: block;
    margin: auto;
    text-align: center;
    padding-top: 5vh;
}

h1#titulo {
    margin-bottom: 50px;
}

span#rito {
    font-family: Nexa Bold;
    font-size: 0.9em;
    letter-spacing: 1em;
    padding-left: 1em;
    line-height: 1.5em;
}

span#oculto {
    font-family: Baron Neue Black;
    font-size: 1.6em;
    letter-spacing: 0.4em;
    padding-left: 0.4em;
}

img#ojo {
    max-width: 130px;
    margin: 15px;
}

.container p {
    line-height: 1.3em;
    text-align: center;
}

p#intro {
    margin-bottom: 50px;
}

img#culebra {
    max-width: 40px;
}

div#pregunta {
    position: relative;
    margin: 30px auto 15px auto;
}

img.flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    max-width: 50px;
}

img#f_left {
	left:-60px;
}

img#f_right {
	right:-60px;
}

form {
    display: inline-block;
}

input[type="text"], input[type="email"], input[type="number"] {
    background-color: #E2DDD1;
    font-family: Nexa Light;
    padding: 0.5em;
    font-size: 1em;
}

input[type="submit"] {
    background-color: transparent;
    color: #E2DDD1;
    font-family: Baron Neue Black;
    border: none;
    font-size: 1.1em;
    margin: 2em;
    cursor:pointer;
}


/***FALLASTE***/

#fallaste_bloq {
	padding-top: 17vh;
}

img#skull {
    max-width: 150px;
    margin-bottom: 30px;
}

#fallaste_bloq h1 {
    font-weight: 100;
    letter-spacing: 1em;
    font-size: 0.9em;
    margin: 1em;
    line-height: 2em;
}

img#olv {
    margin: 25px;
    max-width: 65px;
}

/***BIENVENIDO***/

#intro_bien {
	padding-top: 13vh;
}

span#bienvenido {
    letter-spacing: 0.7em;
    font-size: 0.7em;
    padding-left: 0.6em;
}

span#invitado {
    font-size: 0.6em;
    letter-spacing: 0.215em;
}

#intro_bien h1 {
    margin-bottom: 50px;
}

div#text_bien {
    position: relative;
    /*margin-bottom: 30px;*/
}

#text_bien p {
    /*max-width: 420px;*/
    display: inline-block;
}

/*Mailchimp Form*/
.mc-field-group {
    margin: 1em 0;
}

.mc-field-group {
    width: 100% !important;
    padding-bottom: 0 !important;
    min-height: inherit !important;
}

#mc_embed_signup .mc-field-group input {
    width: 100% !important;
}

div#form_l {
    width: 45%;
    display: grid;
    margin: 2.5%;
}

div#form_r {
    display: grid;
    width: 45%;
    margin: 2.5%;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #161A1A;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #161A1A;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #161A1A;
}
:-moz-placeholder { /* Firefox 18- */
  color: #161A1A;
}

input#mc-embedded-subscribe {
    background-color: transparent !important;
    display: block !important;
    margin: auto !important;
}

.mce_inline_error {
    color: #FBAF19 !important;
    background-color: #161A1A !important;
}

#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {
    border: 2px solid #FBAF19 !important;
}

div#mce-success-response {
    color: #FBAF19 !important;
    text-align: center !important;
    font-family: Nexa light;
    margin: 0px auto 30px auto !important;
    float: none !important;
}

/***FOOTER***/
footer {
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 0;
    /*background-color: #161A1A;*/
}

#sponsors {
    margin: auto;
    position: absolute;
    width: auto;
    display: block;
    left: 50%;
    transform: translateX(-50%);
}

#sponsors img {
    max-height: 40px;
    margin: 10px;
    opacity: 0.9;
}