/* thank you! http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }

del { text-decoration: line-through; }

table { border-collapse: collapse; border-spacing: 0; }

@font-face { font-family: "Prophet"; src: url("/static/fonts/Prophet-Medium.woff"); src: url("/static/fonts/Prophet-Medium.eot?#iefix") format("embedded-opentype"), url("/static/fonts/Prophet-Medium.woff") format("woff"), url("/static/fonts/Prophet-Medium.otf") format("opentype"); }
@font-face { font-family: "Prophet-Light"; src: url("/static/fonts/Prophet-Light.woff"); src: url("/static/fonts/Prophet-Light.eot?#iefix") format("embedded-opentype"), url("/static/fonts/Prophet-Light.woff") format("woff"), url("/static/fonts/Prophet-Light.otf") format("opentype"); }
@font-face { font-family: 'Prophet-LightIta'; src: url("/static/fonts/Prophet-LightIta.woff"); src: url("/static/fonts/Prophet-LightIta.eot?#iefix") format("embedded-opentype"), url("/static/fonts/Prophet-LightIta.woff") format("woff"), url("/static/fonts/Prophet-LightIta.otf") format("opentype"); font-weight: normal; font-style: italic; }
body.is-debug div.center-wrapper { background-image: url("/static/images/grid.png"); background-repeat: repeat-y; background-position: 20px 0; }

h1, h2 { font-family: 'Prophet','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 16em; text-transform: uppercase; }

h1 { letter-spacing: 0.3em; }

h2 { font-family: 'Prophet','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 2.5em; letter-spacing: 0.1em; }

h2.italics { font-family: 'Prophet-LightIta','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; }

h3 { font-family: 'Prophet-Light','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: 300; font-size: 2.5em; letter-spacing: 0.1em; text-align: left; }

p { font-family: 'Prophet-Light','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: 300; margin-bottom: 1em; line-height: 26px; font-size: 1.2em; text-align: center; margin-bottom: 0; }

img { max-width: 90%; height: auto; display: inline-block; vertical-align: middle; }
img.extend_size { width: 100%; }

a { font-family: 'Prophet','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ED1C4E; text-decoration: none; }
a:hover { color: #0e19ed; }

.logo { padding-bottom: 0.2em; font-family: 'Prophet-LightIta','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: normal; font-style: italic; color: #ED1C4E; text-decoration: none; }
.logo:hover { color: #0e19ed; }

hr { border-style: solid; border: 10px solid #ED1C4E; border-width: 4px; }

::selection { text-shadow: none; background: #0e19ed; color: #fff !important; }

/*
.hover-img { position: relative; a span { 	display: none; 	z-index: -100; }
}

.hover-img span:hover h2:hover div:hover span.reunification { position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%;
}

a.hover-img a span img { position: relative; display: none; z-index: -100;
}
*/
.hover-img { position: relative; }

.hover-img a span { position: relative; display: none; z-index: -100; }

.hover-img a span img { width: 100%; position: relative; }

.hover-img a:hover span.reunification { position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%; margin-left: -225px; margin-right: 100px; top: -475px; }

.hover-img a:hover span.reunification2 { position: absolute; display: block; overflow: visible; float: left; width: 80%; height: 100%; margin-left: 115%; margin-right: 100px; top: -375px; }

.hover-img a:hover span.habaneraPigeon { position: absolute; display: block; overflow: visible; float: left; width: 110%; height: 100%; margin-left: -10%; margin-right: 100px; top: -475px; }

.hover-img a:hover span.habaneraPigeon2 { z-index: 4; position: absolute; display: block; overflow: visible; float: left; width: 80%; height: 50%; margin-left: 115%; margin-right: 100px; top: -425px; }

.hover-img a:hover span.saludoHabanero { position: absolute; display: block; overflow: visible; float: left; width: 90%; height: 100%; margin-left: 35%; margin-right: 100px; top: 45%; }

.hover-img a:hover span.chocolatera { position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%; margin-left: -225px; margin-right: 100px; top: -475px; }

.hover-img a:hover span.elOtro { position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%; margin-left: -225px; margin-right: 100px; top: -475px; }

.hover-img a:hover span.elOtro2 { position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%; margin-left: 50%; margin-right: 100px; top: -475px; }

.hover-img a:hover span.elOtro3 { position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%; margin-left: 98%; margin-right: 100px; top: -475px; }

.hover-img a:hover span.laTierrita { z-index: 4; position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%; margin-left: 85%; margin-right: 100px; top: -375px; }

.hover-img a:hover span.picoHabanero { z-index: 4; position: absolute; display: block; overflow: visible; float: left; width: 150%; height: 100%; margin-left: -225px; margin-right: 100px; top: -475px; }

html { min-width: 98,6%; border: 10px solid #ED1C4E; }

body { background-color: #fff; font-family: 'Prophet','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: 700; text-align: center; color: #ED1C4E; font-size: 12px; }

body > header { padding-top: 1%; }

.vertical-left { transform: rotate(270deg); transform-origin: left -40px; float: left; position: absolute; z-index: 1; top: 50%; bottom: 50%; }

.vertical-right { transform: rotate(90deg); transform-origin: right -40px; float: left; position: absolute; z-index: 1; top: 50%; bottom: 50%; right: 2em; }

div.menu { font-family: 'Prophet','Montserrat', 'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1em; position: fixed; top: 1.4em; z-index: 2; display: block; }
div.menu a { color: #ED1C4E; vertical-align: middle; text-decoration: none; }

#languages { right: 0; margin-right: 1.5%; text-align: right; font-size: 1.5em; }

section.mainsection { width: 100%; margin: 0 auto; overflow: hidden; }

div#front { display: block; position: relative; }

div.header-container { margin-top: 4em; margin-bottom: 4em; }

div.image-container { position: relative; }
div.image-container img { max-width: 50%; height: auto; padding: 2em; }
div.image-container #saludoHabanero { left: 18em; }

div#approaches { padding-top: 9em; padding-bottom: 9em; }

div.full-image img { max-width: 95%; }

div.half-image img { max-width: 45%; float: left; margin-left: 6%; }

div.third-image img { max-width: 30%; }
div.third-image.inner img { float: left; }
div.third-image.outer { right: 10%; }
div.third-image.outer img { float: right; }

img.third-image { max-width: 30% !important; }
img.third-image.inner { float: left; }

div.center-wrapper { max-width: 1180px; padding: 0 20px 0 20px; margin: 0 auto; position: relative; }

div.text-container { padding: 1em; float: left; width: 45.76271%; }
div.text-container p { text-align: left; }

div.text-right { float: right; }

img.linea { width: 8em; vertical-align: middle; }

img.thunder { width: 1.9em; vertical-align: top; }

img.rayo { width: 3em; }

img.picoso { width: 30%; margin-bottom: 3em; vertical-align: middle; }

#responding { margin: 0 0.1em; display: inline-block; margin-bottom: 5em; }

section#front { position: relative; height: 96%; color: #fff; }
section#front img { height: 46em; margin-bottom: 3em; position: relative; }

section#about h2#about { text-align: left; padding: 0.2em; }

section#space { margin-top: 14em; }

section#context { display: inline-block; margin-top: 14em; margin-bottom: 14em; }
section#context h3 { text-align: left; padding: 0.2em; }
section#context h2 { text-align: right; padding: 0.2em; }

section#usopy { background-image: url(/static/images/realMagicalism/usopia1.jpg); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }

section#contact { padding-top: 10em; padding-bottom: 10em; }
section#contact a { text-decoration: none; }

span.title { z-index: 10; display: block; position: absolute; left: 30%; top: 30%; width: 40%; height: auto; }
span.title.left { left: 0; }

h2.title { z-index: 10; display: block; position: absolute; left: 30%; top: 30%; width: 40%; height: auto; }
h2.title.left { left: 0; }

h4.siteInfo { padding-bottom: 1em; }

@media screen and (max-width: 1200px) { h1 { font-size: 12em; letter-spacing: 0.2em; }
  h1 { font-size: 12em; letter-spacing: 0.2em; } }
@media screen and (max-width: 630px) { h1 { font-size: 6em; }
  h2 { padding-top: 0.2em; letter-spacing: 0em; font-size: 1.3em; letter-spacing: 0.1em; }
  h3 { font-size: 1.3em; }
  img.linea { width: 6em; }
  span.title { left: 20%; top: 80%; width: 60%; }
  section#front { height: 85%; }
  section#front img { max-width: 100%; height: initial; }
  body > header { padding-top: 2.4em; font-size: 0.9em; }
  .vertical-left { transform-origin: left 0px; left: 1em; }
  .vertical-right { transform-origin: right 0px; right: 1em; }
  div.text-container { width: 90%; }
  div.text-container p { text-align: left; line-height: 1.4em; font-size: 1em; }
  section#space { margin-top: 4em; }
  section#context { margin-top: 4em; margin-bottom: 4em; }
  #languages { margin-right: 4.5%; font-size: 1.2em; }
  div.image-container img { max-width: 80%; }
  span.title { font-size: 0.8em; } }

/*# sourceMappingURL=base.css.map */