.row {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto; }

.column {
  padding: 0 0.5em; }

.max-1 {
  width: 8.333333333%;
  max-width: 8.333333333%; }

.max-2 {
  width: 16.666666666%;
  max-width: 16.666666666%; }

.max-3 {
  width: 24.999999999%;
  max-width: 24.999999999%; }

.max-4 {
  width: 33.333333332%;
  max-width: 33.333333332%; }

.max-5 {
  width: 41.666666665%;
  max-width: 41.666666665%; }

.max-6 {
  width: 49.999999998%;
  max-width: 49.999999998%; }

.max-7 {
  width: 58.333333331%;
  max-width: 58.333333331%; }

.max-8 {
  width: 66.666666664%;
  max-width: 66.666666664%; }

.max-9 {
  width: 74.999999997%;
  max-width: 74.999999997%; }

.max-10 {
  width: 83.33333333%;
  max-width: 83.33333333%; }

.max-11 {
  width: 91.666666663%;
  max-width: 91.666666663%; }

.max-12 {
  width: 99.999999996%;
  max-width: 99.999999996%; }

.sp-max-1 {
  margin-left: 8.333333333%; }
  @media only screen and (max-width: 520px) {
    .sp-max-1 {margin-left:0;}
  }

.sp-max-2 {
  margin-left: 16.666666666%; }

.sp-max-3 {
  margin-left: 24.999999999%; }

.sp-max-4 {
  margin-left: 33.333333332%; }

.sp-max-5 {
  margin-left: 41.666666665%; }

.sp-max-6 {
  margin-left: 49.999999998%; }

.sp-max-7 {
  margin-left: 58.333333331%; }

.sp-max-8 {
  margin-left: 66.666666664%; }

.sp-max-9 {
  margin-left: 74.999999997%; }

.sp-max-10 {
  margin-left: 83.33333333%; }

.sp-max-11 {
  margin-left: 91.666666663%; }

.sp-max-12 {
  margin-left: 99.999999996%; }

@media only screen and (min-width: 791px) and (max-width: 1110px) {
  .lg-1 {
    width: 8.333333333%;
    max-width: 8.333333333%; }

  .lg-2 {
    width: 16.666666666%;
    max-width: 16.666666666%; }

  .lg-3 {
    width: 24.999999999%;
    max-width: 24.999999999%; }

  .lg-4 {
    width: 33.333333332%;
    max-width: 33.333333332%; }

  .lg-5 {
    width: 41.666666665%;
    max-width: 41.666666665%; }

  .lg-6 {
    width: 49.999999998%;
    max-width: 49.999999998%; }

  .lg-7 {
    width: 58.333333331%;
    max-width: 58.333333331%; }

  .lg-8 {
    width: 66.666666664%;
    max-width: 66.666666664%; }

  .lg-9 {
    width: 74.999999997%;
    max-width: 74.999999997%; }

  .lg-10 {
    width: 83.33333333%;
    max-width: 83.33333333%; }

  .lg-11 {
    width: 91.666666663%;
    max-width: 91.666666663%; }

  .lg-12 {
    width: 99.999999996%;
    max-width: 99.999999996%; }

  .sp-lg-0 {
    margin-left: 1em; }

  .sp-lg-1 {
    margin-left: 8.333333333%; }

  .sp-lg-2 {
    margin-left: 16.666666666%; }

  .sp-lg-3 {
    margin-left: 24.999999999%; }

  .sp-lg-4 {
    margin-left: 33.333333332%; }

  .sp-lg-5 {
    margin-left: 41.666666665%; }

  .sp-lg-6 {
    margin-left: 49.999999998%; }

  .sp-lg-7 {
    margin-left: 58.333333331%; }

  .sp-lg-8 {
    margin-left: 66.666666664%; }

  .sp-lg-9 {
    margin-left: 74.999999997%; }

  .sp-lg-10 {
    margin-left: 83.33333333%; }

  .sp-lg-11 {
    margin-left: 91.666666663%; }

  .sp-lg-12 {
    margin-left: 99.999999996%; } }
@media only screen and (min-width: 521px) and (max-width: 790px) {
  .md-1 {
    width: 8.333333333%;
    max-width: 8.333333333%; }

  .md-2 {
    width: 16.666666666%;
    max-width: 16.666666666%; }

  .md-3 {
    width: 24.999999999%;
    max-width: 24.999999999%; }

  .md-4 {
    width: 33.333333332%;
    max-width: 33.333333332%; }

  .md-5 {
    width: 41.666666665%;
    max-width: 41.666666665%; }

  .md-6 {
    width: 49.999999998%;
    max-width: 49.999999998%; }

  .md-7 {
    width: 58.333333331%;
    max-width: 58.333333331%; }

  .md-8 {
    width: 66.666666664%;
    max-width: 66.666666664%; }

  .md-9 {
    width: 74.999999997%;
    max-width: 74.999999997%; }

  .md-10 {
    width: 83.33333333%;
    max-width: 83.33333333%; }

  .md-11 {
    width: 91.666666663%;
    max-width: 91.666666663%; }

  .md-12 {
    width: 99.999999996%;
    max-width: 99.999999996%; }

  .sp-md-0 {
    margin-left: 1em; }

  .sp-md-1 {
    margin-left: 8.333333333%; }

  .sp-md-2 {
    margin-left: 16.666666666%; }

  .sp-md-3 {
    margin-left: 24.999999999%; }

  .sp-md-4 {
    margin-left: 33.333333332%; }

  .sp-md-5 {
    margin-left: 41.666666665%; }

  .sp-md-6 {
    margin-left: 49.999999998%; }

  .sp-md-7 {
    margin-left: 58.333333331%; }

  .sp-md-8 {
    margin-left: 66.666666664%; }

  .sp-md-9 {
    margin-left: 74.999999997%; }

  .sp-md-10 {
    margin-left: 83.33333333%; }

  .sp-md-11 {
    margin-left: 91.666666663%; }

  .sp-md-12 {
    margin-left: 99.999999996%; } }
@media only screen and (max-width: 520px) {
  .sm-1 {
    width: 8.333333333%;
    max-width: 8.333333333%; }

  .sm-2 {
    width: 16.666666666%;
    max-width: 16.666666666%; }

  .sm-3 {
    width: 24.999999999%;
    max-width: 24.999999999%; }

  .sm-4 {
    width: 33.333333332%;
    max-width: 33.333333332%; }

  .sm-5 {
    width: 41.666666665%;
    max-width: 41.666666665%; }

  .sm-6 {
    width: 49.999999998%;
    max-width: 49.999999998%; }

  .sm-7 {
    width: 58.333333331%;
    max-width: 58.333333331%; }

  .sm-8 {
    width: 66.666666664%;
    max-width: 66.666666664%; }

  .sm-9 {
    width: 74.999999997%;
    max-width: 74.999999997%; }

  .sm-10 {
    width: 83.33333333%;
    max-width: 83.33333333%; }

  .sm-11 {
    width: 91.666666663%;
    max-width: 91.666666663%; }

  .sm-12 {
    width: 99.999999996%;
    max-width: 99.999999996%; }

  .sp-sm-0 {
    margin-left: 0em; }

  .sp-sm-1 {
    margin-left: 8.333333333%; }

  .sp-sm-2 {
    margin-left: 16.666666666%; }

  .sp-sm-3 {
    margin-left: 24.999999999%; }

  .sp-sm-4 {
    margin-left: 33.333333332%; }

  .sp-sm-5 {
    margin-left: 41.666666665%; }

  .sp-sm-6 {
    margin-left: 49.999999998%; }

  .sp-sm-7 {
    margin-left: 58.333333331%; }

  .sp-sm-8 {
    margin-left: 66.666666664%; }

  .sp-sm-9 {
    margin-left: 74.999999997%; }

  .sp-sm-10 {
    margin-left: 83.33333333%; }

  .sp-sm-11 {
    margin-left: 91.666666663%; }

  .sp-sm-12 {
    margin-left: 99.999999996%; } }
.clearfix:after {
  visibility: hidden;
  display: block;
  display: -ms- flexbox;
  content: "";
  clear: both;
  height: 0; }

* html .clearfix {
  zoom: 1; }

/* IE6 */
*:first-child + html .clearfix {
  zoom: 1; }

/* IE7 */
.relative {
  position: relative; }
  @media only screen and (max-width: 520px) {
    .relative .sm-static {
      position: static; } }

.absolute {
  position: absolute; }
  @media only screen and (max-width: 520px) {
    .absolute .sm-static {
      position: static; } }

.float {
  float: left; }

.fixed-left {
  position: fixed;
  left: 0;
  z-index: 25; }

.fixed-right {
  position: fixed;
  right: 0;
  z-index: 25; }

.very-far {
  z-index: 0; }

.far {
  z-index: 5; }

.middle {
  z-index: 10; }

.close {
  z-index: 15; }

.very-close {
  z-index: 20; }

.break-left {
  margin-left: -3rem; }
  @media only screen and (max-width: 520px) {
    .break-left {
      margin-left: -1rem; } }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    .break-left {
      margin-left: -2rem; } }

.break-right {
  margin-left: 3rem; }
  @media only screen and (max-width: 520px) {
    .break-right {
      margin-left: 0; } }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    .break-right {
      margin-left: 2rem; } }

.hide-sm {
  display: inherit; }
  @media only screen and (max-width: 520px) {
    .hide-sm {
      display: none; } }

.hide-md {
  display: inherit; }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    .hide-md {
      display: none; } }

.hide-sm-med {
  display: inherit; }
  @media only screen and (max-width: 790px) {
    .hide-sm-med {
      display: none; } }

@media only screen and (min-width: 521px) {
  .show-sm {
    display: none; } }

@media only screen and (max-width: 520px) and (min-width: 791px) {
  .show-md {
    display: none; } }

@media only screen and (min-width: 791px) {
  .show-sm-md {
    display: none; } }

.margen-vertical {
  margin-top: 5em !important;
  margin-bottom: 5em !important; }
  @media only screen and (max-width: 520px) {
    .margen-vertical {
      margin-top: 10em !important;
      margin-bottom: 10em !important; } }

body {
  margin: 0;
  overflow-x: hidden; }
  @media only screen and (max-width: 520px) {
    body {
      margin: 0 1em; } }

body, p {
  font-size: 18px; }
  @media only screen and (min-width: 791px) and (max-width: 1110px) {
    body, p {
      font-size: 13.5px; } }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    body, p {
      font-size: 9.45px; } }
  @media only screen and (max-width: 520px) {
    body, p {
      font-size: 8.1px; } }

body, p, h1, h2, h3, h4, h5, h6, a {
  font-family: "PingFang HK", "Roboto", "Helvetica Neue", sans-serif;
  font-weight: 500;
  color: #333; }

h1, h2 {
  font-family: "PingFang HK", "Roboto", "Helvetica Neue", sans-serif;
  font-size: 4em;
  line-height: 1;
  color: #333; }

h3 {
  font-size: 2em;
  line-height: 1; }
  @media only screen and (min-width: 791px) and (max-width: 1110px) {
    h3 {
      font-size: 3em;
      line-height: 1.5; } }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    h3 {
      font-size: 3em;
      line-height: 1.5; } }
  @media only screen and (max-width: 520px) {
    h3 {
      font-size: 3em;
      line-height: 1.5; } }

h4 {
  font-size: 1.5rem;
  line-height: 1.5;
}
h5 {
  font-size: 1.25em;
  line-height: 1.75;
}

p {
  margin: 0 0 1em; }

p, li {
  line-height: 2; }
  @media only screen and (min-width: 791px) and (max-width: 1110px) {
    p, li {
      font-size: 1.25em; } }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    p, li {
      font-size: 1.5em; } }
  @media only screen and (max-width: 520px) {
    p, li {
      font-size: 1.75em; } }

ul {
  padding-left: 0; }

li {
  color: #333;
  list-style: none; }

ol li {
  list-style: decimal;
}

img {
  max-width: 100%; }

.color-uno {
  color: #10dcb4; }

.color-dos {
  color: #ad00ff; }

.color-tres {
  color: #f3840c; }

.sombra-negra {
  -webkit-box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 10px 50px 0 rgba(0, 0, 0, 0.25); }

.sombra-morada {
  -webkit-box-shadow: 0 10px 50px 0 rgba(42, 2, 84, 0.3);
  box-shadow: 0 10px 50px 0 rgba(42, 2, 84, 0.3); }

section {
  margin: 15em 0; }

.texto-centrado {
  text-align: center; }

#linea-arriba {
  position: fixed;
  top: 0;
  height: 4px;
  width: 100%;
  z-index: 100;
  background: #ad00ff;
  /* Old browsers */
  background: -moz-linear-gradient(90deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(90deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(90deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-dos', endColorstr='$color-tres',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }
  @media only screen and (max-width: 520px) {
    #linea-arriba {
      margin-left: -1em; } }

#logo-top {
  margin-top: 3em;
  position: fixed;
  z-index: 98; }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    #logo-top img {
      max-width: 80%; } }
  @media only screen and (max-width: 520px) {
    #logo-top img {
      max-width: 70%; } }

header {
  padding-top: 5em;
  margin-bottom: 15em; }
  header h1 {
    top: 2em; }
    @media only screen and (max-width: 520px) {
      header h1 {
        top: 1em; } }
  header img[src*="foto-header-peq"] {
    margin-top: 18em; }

@media only screen and (min-width: 1111px) {
  .texto-intro {
    padding-left: 1.5em; } }

.titulo-fondo {
  color: #ededed;
  z-index: -1;
  font-size: 15em;
  line-height: 1;
  top: -1.25em;
  margin: 0; }
  @media only screen and (min-width: 791px) and (max-width: 1110px) {
    .titulo-fondo {
      font-size: 12em; } }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    .titulo-fondo {
      font-size: 12em;
      top: -1em; } }
  @media only screen and (max-width: 520px) {
    .titulo-fondo {
      font-size: 8em;
      top: -2em; } }

.extra-margin-top {
  margin-top: 22.5em; }

.proyecto {
  margin-bottom: 1em; }
  .proyecto .overlay-proyecto {
    opacity: 0;
    background: #ad00ff;
    /* Old browsers */
    background: -moz-linear-gradient(60deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(60deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(60deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-dos', endColorstr='$color-tres',GradientType=1 );
    /* IE6-9 fallback on horizontal gradient */
    position: absolute;
    z-index: 1;
    top: 6.5%;
    left: 5%;
    width: 90%;
    height: 85%; }
    .proyecto .overlay-proyecto h3, .proyecto .overlay-proyecto h4 {
      color: #fff;
      padding-left: 1rem;
      margin: 0; }
    .proyecto .overlay-proyecto h3 {
      font-size: 2em;
      margin-top: 3.75em;
      line-height: 1.5; }
      @media only screen and (min-width: 791px) and (max-width: 1110px) {
        .proyecto .overlay-proyecto h3 {
          font-size: 1.75em;
          margin-top: 1.5em; } }
      @media only screen and (min-width: 521px) and (max-width: 790px) {
        .proyecto .overlay-proyecto h3 {
          font-size: 2em;
          margin-top: 1em; } }
      @media only screen and (max-width: 520px) {
        .proyecto .overlay-proyecto h3 {
          font-size: 4em;
          margin-top: 1em; } }
    .proyecto .overlay-proyecto h4 {
      font-size: 1.5em; }
      @media only screen and (min-width: 791px) and (max-width: 1110px) {
        .proyecto .overlay-proyecto h4 {
          font-size: 1.25em; } }
      @media only screen and (min-width: 521px) and (max-width: 790px) {
        .proyecto .overlay-proyecto h4 {
          font-size: 1.5em; } }
      @media only screen and (max-width: 520px) {
        .proyecto .overlay-proyecto h4 {
          font-size: 2.5em; } }
  .proyecto:hover .overlay-proyecto {
    opacity: 0.9; }

#gif {
  text-align: center;
  margin: 26.25em 0 18.75em; }

#contact a {
  color: #333;
  text-decoration: underline; }
  #contact a:hover {
    color: #10dcb4; }
#contact h2 {
  margin: 0 0 0.25em; }
  @media only screen and (max-width: 520px) {
    #contact h2 {
      font-size: 3em; }
      #contact h2.color-dos {
        font-size: 4em; } }

#linea-abajo {
  height: 1em;
  width: 100%;
  z-index: 100;
  background: #ad00ff;
  /* Old browsers */
  background: -moz-linear-gradient(90deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(90deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(90deg, #10dcb4 0%, #ad00ff 49%, #ad00ff 51%, #f3840c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-dos', endColorstr='$color-tres',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */ }
  @media only screen and (max-width: 520px) {
    #linea-abajo {
      margin-left: -1em; } }

.navegacion-proyectos {
  position: fixed;
  top: 3.25em;
  width: 100%;
  max-width: 1220px;
  margin: 0 auto; }
  .navegacion-proyectos a {
    text-decoration: none; }

.contenedor-iconos-navegacion {
  float: right; }
  @media only screen and (max-width: 520px) {
    .contenedor-iconos-navegacion {
      margin-right: 2em; } }

.icono-navegacion {
  margin: 0 0.35em; }
  @media only screen and (max-width: 520px) {
    .icono-navegacion {
      margin: 0 0.5em; } }
  .icono-navegacion #flecha-izquierda, .icono-navegacion #icono-cerrar, .icono-navegacion #flecha-derecha {
    fill: #c4c4c4; }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    .icono-navegacion svg[width='55.362px'] {
      width: 44.2896px; } }
  @media only screen and (max-width: 520px) {
    .icono-navegacion svg[width='55.362px'] {
      width: 33.2172px; } }
  @media only screen and (min-width: 521px) and (max-width: 790px) {
    .icono-navegacion svg[width='42.221px'] {
      width: 33.7768px; } }
  @media only screen and (max-width: 520px) {
    .icono-navegacion svg[width='42.221px'] {
      width: 25.3326px; } }
  .icono-navegacion:hover #flecha-izquierda {
    fill: #10dcb4; }
  .icono-navegacion:hover #icono-cerrar {
    fill: #ad00ff; }
  .icono-navegacion:hover #flecha-derecha {
    fill: #f3840c; }

.intro-proyecto, .descripcion-proyecto {
  margin-bottom: 5em; }
  .intro-proyecto h2, .descripcion-proyecto h2 {
    margin-bottom: 0.5em; }
  .intro-proyecto h3, .descripcion-proyecto h3 {
    margin: 1em 0 0.5em;
    color: #333; }
  .intro-proyecto p, .descripcion-proyecto p {
    color: gray; }
  .intro-proyecto a:hover, .descripcion-proyecto a:hover {
    color: #10dcb4; }

.intro-proyecto {
  padding-top: 10em; }

.descripcion-proyecto {
  margin-top: -2.5em; }

hr {
  margin: 5em 0; }

.visit-site {
  margin: 1em 0 5em; }
  .visit-site a:hover {
    color: #10dcb4; }

.imagen-final img, .imagen-final iframe {
  margin-bottom: 2.5em; }

@media only screen and (max-width: 520px) {
  iframe {
    height: 210px; } }

#preloader {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 99;
  background: white; }

.placeholder {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -123.5px;
  margin-left: -500px; }
  @media only screen and (max-width: 1000px) {
    .placeholder {
      margin-top: 0;
      top: 40%;
      margin-left: 0;
      left: 0; } }

table{
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid black;
  padding: 0.25rem;
}