/* mixins */
/* Funciones */
@import url(normalize3.0.2.css);
/*fonts*/
/* Montserrat Light */
@font-face {
  font-family: "MontserratLight";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/montserrat-light-webfont.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/montserrat-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-light-webfont.woff") format("woff"), url("../fonts/montserrat-light-webfont.ttf") format("truetype"), url("../fonts/montserrat-light-webfont.svg#svgFontName") format("svg");
  /* Legacy iOS */ }
/* KOMIKAX */
@font-face {
  font-family: "Komikaxweb";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/komikax_-webfont.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/komikax_-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/komikax_-webfont.woff") format("woff"), url("../fonts/komikax_-webfont.ttf") format("truetype"), url("../fonts/komikax_-webfont.svg#svgFontName") format("svg");
  /* Legacy iOS */ }
::-moz-selection {
  background: #ff5a00;
  color: #fff;
  text-shadow: none; }

::selection {
  background: #ff5a00;
  color: #fff;
  text-shadow: none; }

input, textarea, button, select {
  font-family: "regular";
  font-size: 16px; }

/* Estilos generales */
img {
  vertical-align: middle; }

figure {
  margin: 0; }

.navold {
  margin: 0;
  background: #666;
  color: #fff;
  font-size: 11px;
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px dashed white;
  font-size: 12px; }
  .navold span, .navold a {
    color: #eba325;
    font-size: 16px;
    text-decoration: none; }
  .navold a:hover {
    color: #fff; }

/* Animaciones */
@keyframes flotando {
  25% {
    transform: translateY(-3%); }
  50% {
    transform: translateY(0%); }
  75% {
    transform: translateY(-3%); }
  100% {
    transform: translateY(0%); } }
@keyframes vibracion {
  25% {
    transform: translate(-2%, -5%); }
  50% {
    transform: translate(2%, 5%); }
  75% {
    transform: translate(2%, -5%); }
  100% {
    transform: translate(-2%, 5%); } }
@keyframes zoominout {
  50% {
    transform: scale(1.8); }
  100% {
    transform: scale(1); } }
body {
  background: url(../images/bg-rayas.png) center top;
  background-attachment: fixed;
  font-size: 18px;
  line-height: 1.25em;
  font-family: 'MontserratLight';
  color: #808184;
  padding-top: 123px;
  padding-bottom: 50px; }

em {
  font-style: italic; }

a {
  color: inherit; }

img {
  max-width: 100%; }

p:last-child {
  margin-bottom: 0; }

.navbar-collapse {
  padding-left: 0;
  padding-right: 0; }

/* LAYOUT */
/*Contenidos - General */
.contenido {
  padding-top: 40px;
  padding-bottom: 40px;
  background: #fff; }
  .contenido .titulo {
    background: #262424;
    color: #fff;
    padding: 15px 0;
    margin-bottom: 40px; }
    .contenido .titulo h2 {
      font-size: 1em;
      margin-top: 0;
      margin-bottom: 0; }

/* encabezado */
.headercontainer {
  position: fixed;
  z-index: 100;
  padding: 20px 0;
  top: 0;
  left: 0;
  right: 0;
  background: url(../images/bg-rayas.png) center top;
  transition: 300ms all ease-in-out; }
  .headercontainer.f-nav {
    padding-top: 10px;
    padding-bottom: 10px; }
    .headercontainer.f-nav header a.logo img {
      max-width: 200px; }
    .headercontainer.f-nav header nav.navbar.navbar-default.menuprincipal ul li {
      font-size: 1em; }
      .headercontainer.f-nav header nav.navbar.navbar-default.menuprincipal ul li a {
        padding-top: 5px;
        padding-bottom: 5px;
        background-size: auto 15px;
        color: #808184; }
        .headercontainer.f-nav header nav.navbar.navbar-default.menuprincipal ul li a:hover, .headercontainer.f-nav header nav.navbar.navbar-default.menuprincipal ul li a.activo {
          color: #000; }

header {
  background-color: #f5dd30;
  padding: 15px 0 10px 0;
  /*menu principal*/ }
  header img, header li, header li a {
    transition: 300ms all ease-in-out; }
  header nav.navbar.navbar-default.menuprincipal {
    background: none;
    margin-bottom: 0;
    border: none;
    padding: 0;
    min-height: 0; }
    header nav.navbar.navbar-default.menuprincipal button.navbar-toggle {
      position: absolute;
      top: -45px;
      right: -10px;
      z-index: 101;
      border: none; }
      header nav.navbar.navbar-default.menuprincipal button.navbar-toggle .icon-bar {
        background: #666; }
      header nav.navbar.navbar-default.menuprincipal button.navbar-toggle:hover, header nav.navbar.navbar-default.menuprincipal button.navbar-toggle:focus {
        background: none; }
        header nav.navbar.navbar-default.menuprincipal button.navbar-toggle:hover .icon-bar, header nav.navbar.navbar-default.menuprincipal button.navbar-toggle:focus .icon-bar {
          background: #000; }
    header nav.navbar.navbar-default.menuprincipal ul.navbar-nav {
      margin-left: 0;
      margin-right: 0;
      float: none;
      text-align: center; }
      header nav.navbar.navbar-default.menuprincipal ul.navbar-nav li {
        text-transform: lowercase;
        font-size: 1.27778em;
        display: inline-block;
        float: none; }
        header nav.navbar.navbar-default.menuprincipal ul.navbar-nav li a {
          padding-left: 30px;
          background: url(../images/separador.png) no-repeat left center;
          margin-left: 5px; }

/* Banner principal - portada */
.bannercontainer {
  position: relative;
  z-index: 1; }
  .bannercontainer .fusion {
    position: absolute;
    z-index: 5;
    right: 3%;
    top: 65px;
    width: 35%;
    animation-name: flotando;
    animation-duration: 6s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out; }
    .bannercontainer .fusion img {
      max-width: 100%; }

.bannerprincipal {
  margin-bottom: 30px; }

/* Comics */
.comics {
  background-color: #f5dd30;
  padding-bottom: 115px; }
  .comics .descomic {
    background: #262424;
    color: #fff;
    padding: 15px 0;
    margin-bottom: 20px;
    min-height: 55px; }
    .comics .descomic h2 {
      font-size: 1em;
      margin-top: 0;
      margin-bottom: 0; }
      .comics .descomic h2 small {
        color: #999; }
  .comics .comic {
    display: inline-block;
    position: relative;
    z-index: 2;
    margin-bottom: 35px;
    perspective: 700px;
    perspective-origin: 50% 50%; }
    .comics .comic img.interior {
      box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
      border-right: 1px solid #fff;
      border-bottom: 1px solid #999; }
    .comics .comic .tapa, .comics .comic .tapaback {
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      transform-origin: 0 50%;
      transition: 500ms all ease;
      transform-style: preserve-3d; }
    .comics .comic .brillo {
      position: absolute;
      z-index: 101;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transition: 500ms all ease;
      background: url(../images/comics/brillo.png) no-repeat 0px 0px;
      background-size: 100% 100%; }
    .comics .comic .tapa {
      z-index: 5; }
    .comics .comic .tapaback {
      z-index: 4; }
    .comics .comic:hover {
      z-index: 9; }
      .comics .comic:hover .tapa, .comics .comic:hover .tapaback {
        transform: rotateY(-100deg);
        border-right: 5px solid #fff;
        box-shadow: -10px 10px 20px rgba(0, 0, 0, 0.5); }
      .comics .comic:hover .brillo {
        background-position: 300px center;
        opacity: 0; }
      .comics .comic:hover .tapa {
        opacity: 0;
        z-index: 96; }
      .comics .comic:hover .tapaback {
        z-index: 95; }

/* Marquesina Comics */
.marqueecontainer {
  overflow: hidden; }

@keyframes marquee {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(-100%); } }
.resumen {
  display: none;
  float: left;
  width: 100%;
  transform: translateX(100%);
  margin-top: 0;
  margin-bottom: 0; }
  .resumen.marquee {
    display: block;
    animation-name: marquee;
    animation-duration: 15s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: linear; }

/* Misiones */
.misiones .titlecontainer {
  position: relative;
  z-index: 10; }

.fusionsmall {
  width: 10%;
  position: absolute;
  z-index: 500;
  top: -40px;
  right: 10%; }

.grid {
  margin-left: 5%;
  margin-right: 5%;
  position: relative;
  z-index: 2 !important; }
  .grid .grid-item {
    width: 200px;
    border: 5px solid #fff;
    transition: 200ms all ease;
    z-index: 5 !important; }
    .grid .grid-item:hover {
      transform: scale(1.05);
      transform: translate(-5px, -5px);
      box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
      z-index: 5; }
    .grid .grid-item a {
      display: block; }

/* BASE */
.mapafusion {
  height: 300px;
  width: 100%; }

.embed-responsive-16by9 {
  padding-bottom: 40%;
  margin-bottom: 30px; }

.fotosbase a {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 30px; }
  .fotosbase a img {
    transition: 200ms all ease;
    position: relative;
    z-index: 1; }
.fotosbase a:hover > img {
  opacity: 0.8;
  transform: scale(1.05);
  z-index: 5;
  box-shadow: 30x 3px 10px rgba(0, 0, 0, 0.2); }

/* footer */
footer {
  position: fixed;
  z-index: 101;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
  footer .footercontainer {
    /*padding-bottom: 10px;
    border-bottom:1px solid $grismedio;*/ }
    footer .footercontainer a {
      display: inline-block;
      margin-left: 5px;
      margin-right: 5px; }

/*#disparador{
	position: fixed;
	z-index: 9;
	right:0;
	top:80%;
	width: 20px;
	height: 20px;
	background-color: #f00;
}*/
/* comics */
.comicontainer {
  max-width: 960px; }

.comic, .tapa, .pagina {
  position: relative;
  margin-bottom: 20px; }
  .comic .elem, .tapa .elem, .pagina .elem {
    position: absolute;
    z-index: 5;
    height: auto;
    transition: all 500ms ease-in-out;
    transform: translateX(-50px);
    opacity: 0; }
    .comic .elem.der, .tapa .elem.der, .pagina .elem.der {
      transform: translateX(50px); }
    .comic .elem.findama, .comic .elem.fin, .tapa .elem.findama, .tapa .elem.fin, .pagina .elem.findama, .pagina .elem.fin {
      transform: rotate(120deg); }
    .comic .elem.in, .tapa .elem.in, .pagina .elem.in {
      transform: none;
      opacity: 1; }

.moraleja {
  background-color: #f5dd30;
  font-family: "Komikaxweb";
  max-width: 940px;
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 1em 2em;
  font-size: 1.2em;
  line-height: 1.5em;
  color: #666; }
  .moraleja.inicio {
    font-size: 1em;
    line-height: 1em;
    max-width: 1140px;
    margin-top: 0; }

/* mixins posicionamiento*/
/* COMIC 1 WHITE LADY */
#comic01 #damapag1 .introdama {
  width: 22.08333%;
  top: 11.09626%;
  left: 3.85417%; }
#comic01 #damapag1 .fotodama {
  width: 22.29167%;
  top: -1.3369%;
  left: 23.4375%; }
#comic01 #damapag1 .introeleu {
  width: 31.14583%;
  top: 2.6738%;
  left: 44.6875%; }
#comic01 #damapag1 .pensamientoeleu {
  width: 30.72917%;
  top: 55.74866%;
  left: 61.77083%; }
#comic01 #damapag1 .dance {
  width: 23.4375%;
  top: 60.82888%;
  left: 1.875%;
  animation-delay: 0s; }
#comic01 #damapag1 .tuiter {
  width: 18.33333%;
  top: 81.81818%;
  left: 21.66667%;
  animation-delay: -0.4s; }
#comic01 #damapag1 .snap {
  width: 20%;
  top: 79.14439%;
  left: 72.91667%;
  animation-delay: -0.8s; }
#comic01 #damapag1 .dance, #comic01 #damapag1 .tuiter, #comic01 #damapag1 .snap {
  animation-name: flotando;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#comic01 #damapag2 .lasideas {
  width: 20.10417%;
  top: 1.02421%;
  left: 28.85417%; }
#comic01 #damapag2 .altodamablanca {
  width: 23.125%;
  top: 22.25326%;
  left: 73.22917%; }
#comic01 #damapag2 .elentrometidofusion {
  width: 52.8125%;
  top: 49.81378%;
  left: 15.625%;
  z-index: 6; }
#comic01 #damapag2 .soyinmune {
  width: 33.54167%;
  top: 51.21043%;
  left: 49.375%; }
#comic01 #damapag2 .shoshh {
  width: 41.35417%;
  top: 73.5568%;
  left: 20.3125%;
  animation-name: vibracion;
  animation-duration: 0.2s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#comic01 #damapag3 .blam {
  width: 22.08333%;
  top: 15.2381%;
  left: 2.08333%;
  animation-name: vibracion;
  animation-duration: 0.1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#comic01 #damapag3 .aiee {
  width: 17.39583%;
  top: 15.66138%;
  left: 33.95833%;
  animation-name: zoominout;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#comic01 #damapag3 .seguieleuterio {
  width: 20.72917%;
  top: 0.31746%;
  left: 73.64583%; }
#comic01 #damapag3 .yelcreativo {
  width: 17.70833%;
  top: 80.63492%;
  left: 22.60417%; }
#comic01 #damapag3 .clapclap {
  width: 28.64583%;
  top: 57.56614%;
  left: 68.54167%;
  animation-name: vibracion;
  animation-duration: 0.3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#comic01 #damapag3 .findama {
  width: 5.3125%;
  top: 94.07407%;
  left: 93.75%; }

/* COMIC 2 HORAA */
#horapag1 .introhora {
  width: 24.79167%;
  top: 7.30634%;
  left: 2.1875%; }
#horapag1 .fotohora {
  width: 27.5%;
  top: 0.88028%;
  left: 22.60417%; }
#horapag1 .otrodesenfrenado {
  width: 20.20833%;
  top: 3.34507%;
  left: 62.70833%; }
#horapag1 .estanlospresu {
  width: 19.6875%;
  top: 42.42958%;
  left: 23.64583%; }
#horapag1 .deathline {
  width: 26.45833%;
  top: 72.44718%;
  left: 1.04167%; }
#horapag1 .novamosallegar {
  width: 22.39583%;
  top: 73.15141%;
  left: 53.33333%; }

#horapag2 .claroqueno {
  width: 30.20833%;
  top: 1.50376%;
  left: 69.0625%; }
#horapag2 .claroqueno {
  width: 30.20833%;
  top: 1.50376%;
  left: 69.0625%; }

#horapag3 .quebonito {
  width: 35.52083%;
  top: 0.51395%;
  left: 0.10417%; }
#horapag3 .yaseacaba {
  width: 30.625%;
  top: -2.56975%;
  left: 37.70833%; }
#horapag3 .crash {
  width: 49.89583%;
  top: 83.62702%;
  left: 16.97917%;
  animation-name: vibracion;
  animation-duration: 0.3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }

#horapag4 .fusionflotando {
  width: 13.22917%;
  top: 1.23457%;
  left: 19.79167%;
  animation-name: flotando;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#horapag4 .unanuevamision {
  width: 19.27083%;
  top: 2.60631%;
  left: 69.79167%; }
#horapag4 .fin {
  width: 5.41667%;
  top: 96.02195%;
  left: 93.33333%; }

/* COMIC 2 DESTRUCTOR DE IDEAS */
#destructorpag1 .fotodestructor {
  width: 40.10417%;
  top: -3.22581%;
  left: 2.5%; }
#destructorpag1 .introdestructor {
  width: 39.58333%;
  top: 7.57689%;
  left: 51.97917%; }
#destructorpag1 .undia {
  width: 35.10417%;
  top: 33.53338%;
  left: 32.5%; }
#destructorpag1 .yconeso {
  width: 21.45833%;
  top: 72.69317%;
  left: 3.64583%; }
#destructorpag1 .sitienen {
  width: 21.14583%;
  top: 75.16879%;
  left: 21.97917%; }
#destructorpag1 .pormiestabien {
  width: 15%;
  top: 74.4186%;
  left: 43.54167%; }
#destructorpag1 .perfecta {
  width: 11.77083%;
  top: 75.01875%;
  left: 88.54167%; }
#destructorpag1 .simeparece {
  width: 15.41667%;
  top: 85.44636%;
  left: 63.22917%; }
#destructorpag1 .estovapegar {
  width: 12.08333%;
  top: 83.87097%;
  left: 85.72917%; }

#destructorpag2 .clapclap {
  width: 25.9375%;
  top: 0.39308%;
  left: 21.35417%;
  animation-name: flotando;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#destructorpag2 .pow {
  width: 15.10417%;
  top: 10.22013%;
  left: 43.125%;
  animation-name: vibracion;
  animation-duration: 0.1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#destructorpag2 .yonoestoy {
  width: 16.45833%;
  top: 0.39308%;
  left: 77.8125%; }
#destructorpag2 .porqueria {
  width: 17.39583%;
  top: 8.49057%;
  left: 82.5%; }
#destructorpag2 .ohno {
  width: 18.95833%;
  top: 25.62893%;
  left: 8.4375%; }
#destructorpag2 .dejatranquila {
  width: 23.75%;
  top: 23.97799%;
  left: 75.41667%; }
#destructorpag2 .fracasar {
  width: 27.29167%;
  top: 56.28931%;
  left: 1.25%; }
#destructorpag2 .ideaenterrada {
  width: 27.5%;
  top: 55.97484%;
  left: 71.04167%; }

#destructorpag3 .blam {
  width: 24.79167%;
  top: 2.34009%;
  left: 73.33333%;
  animation-name: zoominout;
  animation-duration: 0.3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#destructorpag3 .buenasideas {
  width: 41.875%;
  top: 39.9376%;
  left: 2.5%; }
#destructorpag3 .clapclap2 {
  width: 37.1875%;
  top: 75.039%;
  left: 58.02083%;
  animation-name: flotando;
  animation-duration: 0.3s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }
#destructorpag3 .aprobado {
  width: 58.54167%;
  top: 83.69735%;
  left: 24.375%; }
#destructorpag3 .fin {
  width: 17.1875%;
  top: 89.9376%;
  left: 81.5625%; }

/* COMIC 4 PRESUPUESTO'I */
#presupag1 .intropresu {
  width: 19.375%;
  top: 6.32184%;
  left: 3.125%; }
#presupag1 .fotopresu {
  width: 20.9375%;
  top: 16.09195%;
  left: 23.75%; }
#presupag1 .ysihacemos {
  width: 15.83333%;
  top: 4.94253%;
  left: 46.66667%; }
#presupag1 .semeocurre {
  width: 19.27083%;
  top: 56.32184%;
  left: 0.9375%; }
#presupag1 .nilopienses {
  width: 33.33333%;
  top: 42.41379%;
  left: 49.79167%; }

#presupag2 .notanrapido {
  width: 36.875%;
  top: 3.66848%;
  left: 5.9375%; }
#presupag2 .yase {
  width: 23.4375%;
  top: 43.75%;
  left: 63.125%; }
#presupag2 .ayyy {
  width: 25.72917%;
  top: 8.15217%;
  left: 52.29167%;
  animation-name: zoominout;
  animation-duration: 1s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; }

#presupag3 .excelente {
  width: 17.5%;
  top: 9.64567%;
  left: 10.625%; }
#presupag3 .unplacer {
  width: 16.35417%;
  top: 33.85827%;
  left: 34.375%; }
#presupag3 .otramision {
  width: 30.72917%;
  top: 7.48031%;
  left: 47.8125%; }
#presupag3 .fin {
  width: 5.41667%;
  top: 84.64567%;
  left: 91.66667%; }

@media only screen and (max-width: 959px) {
  .headercontainer, footer {
    position: relative;
    top: auto;
    left: auto;
    bottom: auto;
    right: auto; }

  .headercontainer {
    margin-bottom: 1em; }

  body {
    padding-top: 0;
    padding-bottom: 0; } }
@media only screen and (max-width: 599px) {
  .headercontainer header a.logo img {
    max-width: 200px;
    margin-bottom: 0.5em; }
  .headercontainer header nav.navbar.navbar-default.menuprincipal ul li {
    font-size: 16px; } }

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