@charset "UTF-8";
* {page
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  overflow-x: hidden;
  overflow-y: hidden; }

/**
  Author: Enrique Nieto Martínez
  Agency: Docking
  Client: Ratpack
  Date:   29/03/2019 01:17:00
*/
.nav-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  bottom: 0px;
  left: 0px;
  background: black;
  width: 120px;
  height: 120px;
  font-family: 'd-din_condenseddinCnBd';
  overflow-x: hidden;
  overflow-y: hidden;
  -moz-transform: scale(0.5, 0.5);
  -o-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  -moz-transform-origin: bottom left;
  -o-transform-origin: bottom left;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
  -moz-transition: 0.3s all 0.1s;
  -o-transition: 0.3s all 0.1s;
  -webkit-transition: 0.3s all 0.1s;
  transition: 0.3s all 0.1s;
  z-index: 2; }
  .nav-menu:hover {
    width: 360px;
    -moz-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -moz-transition: 0.3s all 0.3s;
    -o-transition: 0.3s all 0.3s;
    -webkit-transition: 0.3s all 0.3s;
    transition: 0.3s all 0.3s; }
  .nav-menu .logo {
    display: block;
    position: absolute;
    width: 120px;
    height: 120px; }
    .nav-menu .logo .texto {
      background: url("../media/imgs/hamburguer.svg");
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 48px;
      height: 48px;
      margin: 36px auto;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -moz-transition: 0.3s all 0.5s;
      -o-transition: 0.3s all 0.5s;
      -webkit-transition: 0.3s all 0.5s;
      transition: 0.3s all 0.5s; }
    .nav-menu .logo .logo-active {
      background: url("../media/imgs/menu.svg");
      -moz-transition: 0.3s all 0.3s;
      -o-transition: 0.3s all 0.3s;
      -webkit-transition: 0.3s all 0.3s;
      transition: 0.3s all 0.3s; }
  .nav-menu nav {
    position: relative;
    left: 120px;
    width: 240px;
    height: 120px; }
    .nav-menu nav ul {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: end;
      -ms-flex-pack: end;
      justify-content: end; }
      .nav-menu nav ul .work {
        background: #ff0080;
        color: #fff;
        cursor: pointer;
        font-size: 22px;
        text-decoration: none;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s; }
        .nav-menu nav ul .work:hover {
          background: #e60073; }
      .nav-menu nav ul .about {
        background: #00a9ea;
        color: #fff;
        cursor: pointer;
        font-size: 22px;
        text-decoration: none;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s; }
        .nav-menu nav ul .about:hover {
          background: #0097d1; }
      .nav-menu nav ul .contact {
        background: #ffc300;
        color: #fff;
        cursor: pointer;
        font-size: 22px;
        text-decoration: none;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s; }
        .nav-menu nav ul .contact:hover {
          background: #e6b000; }
      .nav-menu nav ul li {
        display: block;
        background: blue;
        width: 120px;
        height: 50%;
        text-align: center; }
        .nav-menu nav ul li a {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          height: 100%;
          text-transform: uppercase; }
        .nav-menu nav ul li .social {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          height: 100%; }
          .nav-menu nav ul li .social .s1 {
            background: #4e4e4e;
            color: #fff;
            cursor: pointer;
            font-size: 22px;
            text-decoration: none;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s; }
            .nav-menu nav ul li .social .s1:hover {
              background: #414141; }
          .nav-menu nav ul li .social .s2 {
            background: black;
            color: #fff;
            cursor: pointer;
            font-size: 22px;
            text-decoration: none;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            -webkit-transition: all 0.3s;
            transition: all 0.3s; }
            .nav-menu nav ul li .social .s2:hover {
              background: #262626; }
          .nav-menu nav ul li .social a {
            background: white;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 50%;
            height: 100%;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center; }

@-webkit-keyframes out {
  0% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); } }

@-moz-keyframes out {
  0% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); } }

@-o-keyframes out {
  0% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); } }

@keyframes out {
  0% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); } }

@-webkit-keyframes in {
  0% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); } }

@-moz-keyframes in {
  0% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); } }

@-o-keyframes in {
  0% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); } }

@keyframes in {
  0% {
    -moz-transform: scale(0.1, 0.1);
    -o-transform: scale(0.1, 0.1);
    -webkit-transform: scale(0.1, 0.1);
    transform: scale(0.1, 0.1); }
  50% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); }
  100% {
    -moz-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    transform: scale(0.5, 0.5); } }

header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 22px;
  left: 0px;
  width: 100vw;
  height: 40px;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 38px;
  z-index: 2; }
  header .page-info-top-bar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding-right: 32px; }
    header .page-info-top-bar .left {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 100%; }
      header .page-info-top-bar .left img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0px 11px 0px 0px;
        padding: 0px 0px 0px 42px;
        width: 160px;
        cursor: pointer; }
      header .page-info-top-bar .left .info {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        left: 0px;
        font-family: 'Roboto Slab', serif;
        text-transform: uppercase; }
        header .page-info-top-bar .left .info h2, header .page-info-top-bar .left .info h3 {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          background: blue;
          height: 28px;
          margin-right: 5px;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center; }
        header .page-info-top-bar .left .info h2 {
          background: #ff0080;
          padding: 0px 11px;
          font-size: 16px; }
        header .page-info-top-bar .left .info h3 {
          background: black;
          font-size: 14px;
          font-weight: 100;
          color: white;
          padding: 0px 13px; }
    header .page-info-top-bar .close_btn {
      margin: 0px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      justify-items: right;
      justify-self: right;
      width: 28px;
      height: 28px; }
      header .page-info-top-bar .close_btn img {
        cursor: pointer;
        margin: 0px;
        width: 100%;
        height: 100%; }

.arrow-container {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 30px;
  height: 100%;
  overflow: hidden; }
  .arrow-container .left-arrows {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 1150px; }
    .arrow-container .left-arrows::after, .arrow-container .left-arrows::before {
      content: '';
      background-image: -webkit-linear-gradient(45deg, black 25%, white 25%, white 50%, black 50%, black 75%, white 75%, white);
      background-image: -o-linear-gradient(45deg, black 25%, white 25%, white 50%, black 50%, black 75%, white 75%, white);
      background-image: linear-gradient(45deg, black 25%, white 25%, white 50%, black 50%, black 75%, white 75%, white);
      background-size: 16px 16px;
      width: 100%;
      position: absolute;
      -moz-animation: move_lines 25s linear infinite;
      -o-animation: move_lines 25s linear infinite;
      -webkit-animation: move_lines 25s linear infinite;
      animation: move_lines 25s linear infinite; }
    
    
    /*
    .arrow-container .left-arrows::before {
      height: 51%;
      top: 51%;
      -moz-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      transform: translateY(-100%); 
        
    }
    */
    
    .arrow-container .left-arrows::after {
      top: 0%;
      height: 100%;
      /* top: 0%; */
      left: -3px;
      -moz-transform: rotateX(180deg);
      -o-transform: rotateX(180deg);
      -webkit-transform: rotateX(180deg);
      transform: rotateX(180deg); 
      z-index: 5;    
    }
    

@-webkit-keyframes move_lines {
  from {
    background-position: left center; }
  to {
    background-position: right center; } }

  .nav-menu.not-showed {
        visibility: hidden;
        opacity: 0; 

  }
  .header-menu {

    display: none;
  }

.right-scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 65px;
  height: 100vh;
  position: relative;
  bottom: 0px;
  right: calc(-100vw + 65px);
  overflow-x: hidden;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s; }
  .right-scroll:hover {
    width: 80px;
    -moz-transform: translateX(-15px);
    -o-transform: translateX(-15px);
    -webkit-transform: translateX(-15px);
    -ms-transform: translateX(-15px);
    transform: translateX(-15px); }
  .right-scroll .hover-btn {
    background: #EDEDED;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50px;
    height: 100%;
    position: absolute;
    left: 0px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    z-index: 1; }
    .right-scroll .hover-btn img {
      width: 20px;
      height: 158px; }

.project-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 510px;
  height: 100%; }
  .project-item .image {
    background: black;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 367px;
    min-height: 367px; }
    .project-item .image img {
      display: block;
      width: 100%;
      height: 100%; }
  .project-item .data {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: auto;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    .project-item .data .data-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      width: 350px; }
      .project-item .data .data-container .client_name {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        height: 16px;
        margin-top: 32px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center; }
        .project-item .data .data-container .client_name p {
          display: block;
          background: black;
          font-family: "Roboto Slab", serif;
          font-size: 10px;
          text-transform: uppercase;
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
          height: 100%;
          padding: 1px 10px 0px 10px;
          margin: 0px; }
      .project-item .data .data-container .project-name {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex; }
        .project-item .data .data-container .project-name h2 {
          font-family: "d-din_condenseddinCnBd";
          font-size: 24px;
          text-transform: uppercase;
          margin: 0px; }
          .project-item .data .data-container .project-name h2::-moz-selection {
            color: #ff0080;
            background: #fad3d6fe; }
          .project-item .data .data-container .project-name h2::selection {
            color: #ff0080;
            background: #fad3d6fe; }
      .project-item .data .data-container .synopsis {
        font-family: "Roboto Slab", serif;
        font-size: 12px;
        line-height: 18px;
        margin: 0px;
        white-space: initial; }
      .project-item .data .data-container .view-more-btn {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        background: transparent;
        border: 1px solid #9E9E9E;
        border-radius: 5px;
        color: #9E9E9E;
        cursor: pointer;
        text-decoration: none;
        text-transform: uppercase;
        font-family: "Roboto Slab", serif;
        font-size: 10px;
        width: 86px;
        height: 30px;
        margin-top: 12px;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        -webkit-transition: all 0.3s;
        transition: all 0.3s; }
        .project-item .data .data-container .view-more-btn:hover {
          background: #ff0080;
          border: 1px solid #ff0080;
          color: white; }

body {
  overflow-x: hidden;
  overflow-y: hidden; }

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  width: auto;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  /*
  white-space: nowrap; 
  */
}
  
  .container .page {
    -ms-flex-negative: 1;
    flex-shrink: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* min-width: 630px; */
    min-width: 100vw;   
    height: 100vh; 
  }
    @media (min-height: 600px) and (max-height: 700px) {
      .container .page {
        min-width: 100vw; 
          
      } 
        
    }
    .container .page .project-item {
      position: relative;
      top: 100px;
      left: 60px; }
      @media (min-height: 600px) and (max-height: 700px) {
        .container .page .project-item {
          -moz-transform: scale(0.8);
          -o-transform: scale(0.8);
          -webkit-transform: scale(0.8);
          -ms-transform: scale(0.8);
          transform: scale(0.8);
          -moz-transform-origin: top right;
          -o-transform-origin: top right;
          -webkit-transform-origin: top right;
          -ms-transform-origin: top right;
          transform-origin: top right;
          left: -43px; } }
      @media (min-height: 400px) and (max-height: 599px) {
        .container .page .project-item {
          overflow-y: scroll; } }
  .container .home {
    min-width: 100vw; }
  .container .left {
    background-image: -webkit-linear-gradient(120deg, #000000, #515151);
    background-image: -o-linear-gradient(120deg, #000000, #515151);
    background-image: linear-gradient(-30deg, #000000, #515151);
    background-size: 100vw 100%; }
  .container .right {
    background: white; }
    .container .right .data .data-container .project-name h2 {
      color: #4F4F4F; }
    .container .right .data .data-container .synopsis {
      color: #4F4F4F; }
  .container #work {
    border: 0px; }