@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Roboto:300,400&display=swap);
*,
body {
  font-family: 'Open Sans', sans-serif;
  padding: 0;
  margin: 0; }

body {
  overflow-x: hidden; }

.auxLateral {
  width: 5vw;
  height: 100vh;
  background: #fff;
  z-index: 1;
  overflow: hidden;
  border-right: 1px solid #e5e5e5;
  position: absolute;
  display: flex;
  justify-content: center;
  padding: 1em;
  box-sizing: border-box; }
  @media only screen and (max-width: 768px) {
    .auxLateral {
      width: 10vw;
      position: fixed;
      z-index: -1;
      right: 0; } }

.containerLogoMobile {
  background: #232426;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.5em 0;
  position: fixed;
  width: 100%;
  display: none; }
  @media only screen and (max-width: 768px) {
    .containerLogoMobile {
      display: none;
      z-index: 1;
      box-shadow: 0px -2px 4px 0px; } }

.logoBrand {
  width: 3vh;
  z-index: 1; }
  .logoBrand:hover {
    border-color: #136cbe;
    border-bottom-width: 2px;
    transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1); }
  @media only screen and (max-width: 768px) {
    .logoBrand {
      display: none; } }

/* Scroll */
::-webkit-scrollbar {
  width: 0.2em;
  height: 0.2em; }

::-webkit-scrollbar-thumb {
  background: #457bfe; }

::-webkit-scrollbar-track {
  background: #ecf2ff; }

.btnPrimary {
  border-radius: 27px;
  font-size: 1em;
  letter-spacing: 0.08em;
  font-weight: 400;
  border: 2px solid #fff;
  margin-top: 1em;
  transition-property: all;
  transition: cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-duration: 350ms;
  background: transparent;
  color: #fff;
  position: relative;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.14em; }
  .btnPrimary::before {
    content: '';
    position: absolute;
    display: flex;
    width: 0%;
    height: 100%;
    background: #136cbe;
    transition: width 0.3s; }
  .btnPrimary:hover {
    transition-property: all;
    transition: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-duration: 500ms;
    background: transparent;
    color: #fff; }
    .btnPrimary:hover::before {
      width: 100%;
      transition: width 0.3s; }
  .btnPrimary:active {
    transition-property: all;
    transition: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-duration: 500ms;
    background: transparent;
    color: #ebebeb;
    border: 2px solid transparent;
    transition: border 0.3s; }
    .btnPrimary:active::before {
      width: 0%;
      transition: width 0.3s;
      transition-delay: 0.3s; }
  .btnPrimary span {
    position: relative; }

.btnCard {
  border-radius: 27px;
  font-size: 1em;
  letter-spacing: 0.08em;
  font-weight: 400;
  border: 0;
  margin-top: 1em;
  transition-property: all;
  transition: cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-duration: 350ms;
  background: #6cbe13;
  color: #fff;
  position: relative;
  outline: none;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.14em; }
  .btnCard::before {
    content: '';
    position: absolute;
    display: flex;
    width: 0%;
    height: 100%;
    background: #136cbe;
    transition: width 0.3s; }
  .btnCard:hover {
    transition-property: all;
    transition: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-duration: 500ms;
    background: transparent;
    color: #fff; }
    .btnCard:hover::before {
      width: 100%;
      transition: width 0.3s; }
  .btnCard:active {
    transition-property: all;
    transition: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-duration: 500ms;
    background: #6d6d6b;
    color: #ebebeb;
    transition: border 0.3s; }
    .btnCard:active::before {
      width: 0%;
      transition: width 0.3s;
      transition-delay: 0.3s; }
  .btnCard span {
    position: relative; }
  @media only screen and (max-width: 768px) {
    .btnCard {
      width: 100%; } }

.uiScroll {
  background: rgba(255, 255, 255, 0.6);
  z-index: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
  padding-bottom: 4em; }
  .uiScroll span {
    display: block;
    width: 21px;
    height: 21px;
    border-bottom: 1.5px solid #136cbe;
    border-right: 1.5px solid #136cbe;
    transform: rotate(45deg);
    margin: 0;
    animation: scrollAnimate 2s infinite; }
    .uiScroll span:nth-child(2) {
      animation-delay: -0.2s;
      transform: rotate(45deg) translate(-20px, -20px); }
    .uiScroll span:nth-child(3) {
      animation-delay: -0.4s; }
  @media only screen and (max-width: 768px) {
    .uiScroll {
      bottom: 11%; }
      .uiScroll span {
        width: 13px;
        height: 13px; } }

@keyframes scrollAnimate {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-20px, -20px); }
  50% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(20px, 20px); } }

.paddingHorizon {
  padding-left: 12px;
  padding-right: 12px; }

/* Make clicks pass-through */
#nprogress {
  pointer-events: none; }

#nprogress .bar {
  background: #29d;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px; }

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px); }

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px; }

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite; }

.nprogress-custom-parent {
  overflow: hidden;
  position: relative; }

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute; }

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg); } }

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.paddings {
  padding-left: 70px;
  padding-right: 70px;
  max-width: 1430px; }
  @media only screen and (max-width: 768px) {
    .paddings {
      padding-left: 20px;
      padding-right: 20px; } }

.containerProto {
  visibility: hidden; }

.containerPrototypesHero {
  width: 100vw;
  height: 100vh; }
  .containerPrototypesHero::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: #136cbe; }

.uxElement {
  position: absolute;
  transform: translate(30%, 24%);
  height: 100%;
  z-index: -6;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    .uxElement {
      width: auto; } }
  .uxElement span:nth-child(1) {
    position: absolute;
    width: 50vh;
    height: 50vh;
    border: 2px solid #136cbe;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate 10s linear infinite; }
  .uxElement span:nth-child(2) {
    position: absolute;
    width: 50vh;
    height: 50vh;
    border: 2px solid #136cbe;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate2 10s linear infinite; }
  .uxElement span:nth-child(3) {
    border: none;
    background: #6d6d6b; }

@keyframes animate {
  0% {
    transform: rotate(360deg); }
  100% {
    transform: rotate(0deg); } }

@keyframes animate2 {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.logoHero::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  background: #fff; }

.logoHero img {
  width: 200px;
  object-fit: cover; }

.heroInner {
  display: flex;
  align-items: center;
  height: 100%;
  flex-direction: column;
  justify-content: center; }
  .heroInner .heroContainerInner {
    color: #323232; }
    .heroInner .heroContainerInner h1 {
      font-weight: 500;
      font-size: 32px; }
      .heroInner .heroContainerInner h1 .heroContainerLine {
        margin: 0;
        height: 44px;
        overflow: hidden; }
      .heroInner .heroContainerInner h1 span {
        font-weight: 700; }

.areaPrototypes {
  background: #fbfbfb; }

.PrototypesItems {
  width: 50%;
  box-sizing: border-box;
  visibility: hidden; }
  .PrototypesItems .containerInfo {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0 15px; }
    .PrototypesItems .containerInfo h2 {
      font-weight: 400;
      text-align: center;
      line-height: 1.2;
      letter-spacing: 0.02em;
      pointer-events: auto;
      color: #252525; }
    .PrototypesItems .containerInfo p {
      color: #757575;
      font-weight: 300; }

.bannerPrototypes {
  position: relative;
  height: 300px;
  width: 100vw;
  box-sizing: border-box;
  padding-left: 70px;
  padding-right: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly; }
  @media only screen and (max-width: 768px) {
    .bannerPrototypes {
      padding-left: 20px;
      padding-right: 20px;
      flex-direction: column;
      height: 200px; } }
  .bannerPrototypes .copies h3 {
    font-weight: 400;
    letter-spacing: 0.02em;
    pointer-events: auto;
    color: #252525; }
  .bannerPrototypes .copies p {
    color: #757575;
    font-weight: 300; }
  .bannerPrototypes .areaBtn {
    border: 1px solid #757575;
    border-radius: 4px;
    padding: 0.3em 2em;
    box-sizing: border-box;
    transition: all 500ms ease-in-out; }
    .bannerPrototypes .areaBtn:hover {
      border: 1px solid transparent;
      background: #e1e1e1;
      transition: all 500ms ease-in-out; }
      .bannerPrototypes .areaBtn:hover a {
        color: #252525; }
    .bannerPrototypes .areaBtn a {
      transition: all 500ms ease-in-out;
      text-decoration: none;
      color: #252525;
      font-weight: 400;
      font-size: 1.2rem; }

.sectionItems {
  display: flex;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 768px) {
    .sectionItems {
      margin: 0;
      height: 100%; } }
  .sectionItems .containerItems {
    width: 90vw;
    height: 600px;
    position: relative;
    margin: auto; }
    @media only screen and (max-width: 768px) {
      .sectionItems .containerItems {
        height: 100%; } }
    .sectionItems .containerItems .controlsArea {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      overflow: hidden;
      z-index: 3;
      background: #fff;
      border: 1px solid #ecf0f3;
      position: absolute;
      bottom: 13%;
      right: 10%; }
      @media only screen and (max-width: 768px) {
        .sectionItems .containerItems .controlsArea {
          position: absolute;
          bottom: -15%;
          right: 18%; } }
      .sectionItems .containerItems .controlsArea i {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #019aff;
        cursor: pointer;
        padding: 1em;
        z-index: 5;
        transition: all 350ms ease-in-out; }
        .sectionItems .containerItems .controlsArea i:hover {
          transition: all 350ms ease-in-out;
          background: #019aff;
          color: #fff; }
    .sectionItems .containerItems .inner {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 600px; }
      @media only screen and (max-width: 768px) {
        .sectionItems .containerItems .inner {
          flex-direction: column;
          height: 420px; } }
      .sectionItems .containerItems .inner .t-image {
        position: relative;
        width: 500px;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center; }
        @media only screen and (max-width: 768px) {
          .sectionItems .containerItems .inner .t-image {
            align-items: flex-start;
            height: 100%; } }
        .sectionItems .containerItems .inner .t-image ul {
          display: flex;
          position: absolute;
          overflow: hidden;
          width: 340px;
          border-radius: 8px;
          list-style: none; }
          @media only screen and (max-width: 768px) {
            .sectionItems .containerItems .inner .t-image ul {
              width: 340px;
              height: 100%; } }
          .sectionItems .containerItems .inner .t-image ul li {
            width: 100%; }
            .sectionItems .containerItems .inner .t-image ul li img {
              height: 100%;
              width: 340px;
              object-fit: cover; }
      .sectionItems .containerItems .inner .t-content {
        width: 400px;
        height: 600px;
        display: flex;
        align-items: center;
        position: relative; }
        @media only screen and (max-width: 768px) {
          .sectionItems .containerItems .inner .t-content {
            margin: auto;
            z-index: 1;
            position: initial;
            height: 420px; } }
        .sectionItems .containerItems .inner .t-content ul {
          position: absolute;
          overflow: hidden;
          width: 100%;
          height: 100%; }
          .sectionItems .containerItems .inner .t-content ul li {
            width: 100%;
            height: 100%;
            color: #2e293c;
            display: flex;
            align-items: center;
            position: absolute;
            opacity: 0; }
            .sectionItems .containerItems .inner .t-content ul li .content-inner {
              width: 500px; }
              .sectionItems .containerItems .inner .t-content ul li .content-inner .name {
                font-size: 26px;
                font-weight: 600;
                margin-bottom: 0; }
              .sectionItems .containerItems .inner .t-content ul li .content-inner .moreInfo {
                font-size: 18px;
                color: #a09da6;
                font-weight: 400; }

.containerProject {
  width: 90vw;
  margin: 0 auto;
  padding: 40px 0 40px 0; }
  .containerProject ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none; }
    .containerProject ul li {
      margin-bottom: 30px;
      overflow: hidden;
      width: 50%;
      padding: 1em;
      box-sizing: border-box; }
      @media only screen and (max-width: 768px) {
        .containerProject ul li {
          width: 100%;
          margin-bottom: 18px; } }
      .containerProject ul li img {
        border-radius: 4px;
        width: 100%; }
      .containerProject ul li h4 {
        font-size: 18px;
        line-height: 28px;
        color: #232426;
        font-weight: 600; }
      .containerProject ul li p {
        font-size: 18px;
        letter-spacing: 0.88px;
        line-height: 28px;
        color: #a09da6;
        font-weight: 300; }

.elementBeforeHero {
  display: none; }

.btnScroll {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 8vh;
  text-align: center;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #232426;
  font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (2300 - 300)));
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: 0.35px;
  text-align: center; }
  .btnScroll::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background: #fff; }
  @media only screen and (max-width: 768px) {
    .btnScroll {
      height: 15vh; } }
  .btnScroll .contenedor-line {
    width: 2px;
    height: 50%;
    position: relative;
    overflow: hidden;
    display: flex; }
    .btnScroll .contenedor-line::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      transform: translateY(-100%);
      width: 100%;
      height: 100%;
      background-color: #136cbe;
      animation: progress_line 2s ease-in-out infinite; }

@keyframes progress_line {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(100%); } }

#cursor {
  z-index: 999;
  pointer-events: none !important;
  position: fixed;
  width: 18px;
  height: 18px;
  background-color: #136cbe;
  border-radius: 50%;
  transition: width 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275), height 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  #cursor #cursor.hover {
    width: 25px;
    height: 25px;
    border: 1px solid #000000;
    background-color: transparent; }

.errorPages {
  background-image: radial-gradient(#d7d7d7 0.8px, transparent 1px), radial-gradient(#d7d7d7 0.8px, transparent 1px);
  background-position: 0 0, 13px 13px;
  background-size: 34px 34px;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; }
  .errorPages .container {
    height: 55%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column; }
    @media only screen and (min-width: 768px) {
      .errorPages .container {
        height: 33%; } }
  .errorPages img {
    width: 250px;
    height: auto; }
    @media only screen and (min-width: 768px) {
      .errorPages img {
        width: 500px; } }
  .errorPages h1 {
    font-size: 56px;
    line-height: 92px;
    font-weight: 300; }
  @media only screen and (max-width: 768px) {
    .errorPages h1 {
      display: none; } }
  .errorPages p {
    font-size: 21px;
    line-height: normal;
    font-weight: 300;
    padding: 0 1em;
    text-align: center; }
  .errorPages a {
    font-size: 27px;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    padding: 0.2em 1em;
    border-bottom-width: 0;
    background: #136cbe;
    box-shadow: 4px 4px #0a3761;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
    .errorPages a:hover {
      border-radius: 21px 0px 21px 0;
      box-shadow: 0px 0px #0a3761;
      border-color: rgba(13, 13, 13, 0.2); }

.theNewMenu {
  width: 100%;
  height: 55px;
  justify-content: space-between;
  display: flex;
  align-items: center; }

.NewHero {
  height: 100vh;
  display: flex; }

.trails-main {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center; }

.trails-text {
  position: relative;
  width: 100%;
  height: 80px;
  line-height: 80px;
  color: #136cbe;
  font-size: 5em;
  font-weight: 800;
  text-transform: uppercase;
  will-change: transform, opacity;
  overflow: hidden; }

.trails-text > div {
  overflow: hidden; }

@media only screen and (max-width: 768px) {
  .trails-text {
    position: relative;
    width: 100%;
    height: 80px;
    line-height: 80px;
    color: #136cbe;
    font-size: 3em;
    font-weight: 800;
    text-transform: uppercase;
    will-change: transform, opacity;
    overflow: hidden; } }

.ui_sticky_active {
  position: fixed !important;
  width: 100%;
  top: 0;
  z-index: 3; }

.icon {
  align-self: center;
  display: flex;
  width: 34px;
  height: auto;
  justify-content: center;
  cursor: pointer;
  position: absolute; }
  .icon .hamburger {
    width: 34px;
    height: 5px;
    position: absolute;
    transform: translate(0, -50%);
    background: transparent;
    border-radius: 100px; }
    .icon .hamburger::after, .icon .hamburger::before {
      content: '';
      border-radius: 100px;
      position: absolute;
      width: 27px;
      height: 4px;
      background: #136cbe;
      transition: all 350ms cubic-bezier(0.39, 0.575, 0.565, 1); }
    .icon .hamburger::before {
      top: -6px; }
    .icon .hamburger::after {
      top: 6px; }

.activeMenu .hamburger {
  background: transparent;
  transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1); }
  .activeMenu .hamburger::before {
    top: 0;
    background: #fff;
    transform: rotate(45deg); }
  .activeMenu .hamburger::after {
    top: 0;
    background: #fff;
    transform: rotate(135deg); }

.arrowAux {
  z-index: 7;
  position: fixed;
  right: 5%;
  top: 3%; }
  @media only screen and (max-width: 768px) {
    .arrowAux {
      right: 13%;
      top: 5%; } }

.menu_circle path {
  fill: none;
  stroke-width: 2px;
  stroke: #136cbe;
  stroke-dashoffset: 157;
  stroke-dasharray: 157;
  transition: all 0.6s; }
  .menu_circle path.animate {
    stroke-dashoffset: 0; }

.areaFromHero {
  width: 88%;
  margin-top: 1.8em; }
  .areaFromHero form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column; }
    .areaFromHero form .inputStyle,
    .areaFromHero form textarea {
      height: auto;
      background: transparent !important;
      border-color: #fff;
      color: #fff;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      width: 100%;
      margin-bottom: 1.2em;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      font-size: 21px;
      font-weight: 300;
      letter-spacing: 0.02em;
      padding: 8px;
      box-sizing: border-box; }
      .areaFromHero form .inputStyle:active, .areaFromHero form .inputStyle:focus,
      .areaFromHero form textarea:active,
      .areaFromHero form textarea:focus {
        outline: none;
        background: transparent !important; }
      @media only screen and (max-width: 768px) {
        .areaFromHero form .inputStyle,
        .areaFromHero form textarea {
          font-size: 16px;
          border-bottom: 1px solid #136cbe;
          margin-bottom: 3em;
          color: #222; } }
  .areaFromHero .btnContact {
    width: fit-content;
    border: 0;
    text-align: center;
    padding: 0.5em 1.5em;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition-property: all;
    transition: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-duration: 350ms;
    background: #136cbe;
    color: #fff; }
    .areaFromHero .btnContact::after {
      content: 'Send Message'; }
    .areaFromHero .btnContact:hover {
      border-radius: 21px 0px 21px 0;
      transition-property: all;
      transition: cubic-bezier(0.39, 0.575, 0.565, 1);
      transition-duration: 350ms;
      background: #fff;
      color: #136cbe; }
      .areaFromHero .btnContact:hover:focus {
        outline: 0; }
    .areaFromHero .btnContact:focus {
      outline: 0; }
  .areaFromHero .not-activeBtn {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
    background: #6d6d6b;
    color: #fff !important; }
    .areaFromHero .not-activeBtn::after {
      content: '...'; }

.msgSend {
  width: 50%; }
  .msgSend h2 {
    font-size: 3rem;
    font-weight: 300;
    line-height: 120%;
    margin-bottom: 18px; }
  .msgSend p {
    font-size: 2rem;
    font-weight: 300; }
    .msgSend p span {
      color: #279AFF; }
  @media only screen and (max-width: 768px) {
    .msgSend {
      width: 100%; }
      .msgSend h2 {
        font-size: 2.3rem;
        color: #196cbe; }
      .msgSend p {
        color: #222; } }

.grid-contianer {
  height: 100vh;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-areas: 'box1 box2'
 'box1 box2'
 'box1 box3'; }
  @media only screen and (max-width: 768px) {
    .grid-contianer {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-areas: 'box1 box1'
 'box2 box2'
 'box2 box2'; } }
  .grid-contianer .gridA {
    grid-area: box1;
    overflow: hidden; }
    .grid-contianer .gridA img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: uiImgCta 55s infinite; }
  .grid-contianer .gridB {
    grid-area: box2;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 2em; }
    @media only screen and (max-width: 768px) {
      .grid-contianer .gridB {
        padding: 3em; } }
  .grid-contianer .gridC {
    grid-area: box3;
    background: #136cbe; }

/* CONTACT AREA */
.grid-contianerContact {
  height: 100vh;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 2fr 1fr 1fr;
  grid-template-areas: 'box1 box2'
 'box1 box2'
 'box1 box3'; }
  @media only screen and (max-width: 768px) {
    .grid-contianerContact {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-template-areas: 'box2'
 'box2'
 'box2'
 'box2'; } }

.contactGrid .gridA {
  grid-area: box1;
  overflow: hidden; }
  .contactGrid .gridA img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: uiImgCta 55s infinite; }
  @media only screen and (max-width: 768px) {
    .contactGrid .gridA {
      display: none; } }

.contactGrid .gridB {
  grid-area: box2;
  background: #232426;
  color: #fff;
  flex-direction: column;
  padding: 2em;
  justify-content: center;
  display: flex; }
  @media only screen and (max-width: 768px) {
    .contactGrid .gridB {
      background: #fff;
      padding: 2em;
      display: flex;
      justify-content: center; }
      .contactGrid .gridB h1 {
        font-size: 34px;
        line-height: 50px;
        font-weight: 400;
        color: #232426; }
      .contactGrid .gridB p {
        font-size: 27px;
        line-height: 44px;
        font-weight: 300;
        color: #232426; } }

.contactGrid .gridC {
  grid-area: box3;
  background: #136cbe;
  display: flex;
  justify-content: center; }
  .contactGrid .gridC .AdressStyle {
    display: flex;
    align-items: center;
    padding: 1em; }
    .contactGrid .gridC .AdressStyle p {
      color: #fff;
      font-size: 21px;
      line-height: 27px;
      font-weight: 300; }
  @media only screen and (max-width: 768px) {
    .contactGrid .gridC {
      display: none; } }

.grid-contianer-team {
  height: 100vh;
  display: grid;
  grid-template-columns: 6fr 2fr 2fr 2fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: 'box1 box2 box4 box6'
 'box1 box2 box4 box6'
 'box1 box2 box5 box6'
 'box1 box3 box5 box6'
 'box1 box3 box7 box7'; }
  @media only screen and (max-width: 768px) {
    .grid-contianer-team {
      display: none; } }
  .grid-contianer-team .itemGrid {
    overflow: hidden; }
    .grid-contianer-team .itemGrid img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(1);
      transition: all 350ms ease-in-out; }
      .grid-contianer-team .itemGrid img:hover {
        filter: grayscale(0);
        transition: all 350ms ease-in-out; }
  .grid-contianer-team .gridA {
    grid-area: box1;
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 2em; }
  .grid-contianer-team .gridB {
    grid-area: box2; }
  .grid-contianer-team .gridC {
    grid-area: box3; }
  .grid-contianer-team .gridD {
    grid-area: box4; }
  .grid-contianer-team .gridE {
    grid-area: box5; }
  .grid-contianer-team .gridF {
    grid-area: box6; }
  .grid-contianer-team .gridG {
    grid-area: box7;
    background: #232426; }
  @media only screen and (max-width: 768px) {
    .grid-contianer-team .gridA h1 {
      font-size: 37px;
      line-height: 57px;
      font-weight: 400; }
    .grid-contianer-team .gridB,
    .grid-contianer-team .gridC,
    .grid-contianer-team .gridE,
    .grid-contianer-team .gridD,
    .grid-contianer-team .gridF {
      display: none; } }

.areaDreamHero h1 {
  font-size: 2.5em;
  line-height: normal;
  font-weight: 300; }

.areaDreamHero p {
  font-size: 1.4em;
  line-height: 1.6em;
  font-weight: 300; }
  .areaDreamHero p span {
    border-bottom-width: 1px;
    border-bottom-style: solid; }

@media only screen and (max-width: 768px) {
  .areaDreamHero h1 {
    font-size: 34px;
    line-height: 50px;
    font-weight: 300; }
  .areaDreamHero p {
    font-size: 24px;
    line-height: 34px;
    font-weight: 300; } }

.boxContainer {
  justify-content: center;
  display: grid;
  background: #232426;
  overflow: hidden; }

.boxFun {
  display: -webkit-box;
  width: 100%;
  height: auto;
  overflow: hidden; }
  .boxFun .box {
    position: relative;
    width: 16px;
    height: 16px;
    animation: enter 4s; }
    .boxFun .box::before {
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      background: #232426;
      transition: 2s ease-in-out; }

@keyframes enter {
  from {
    transform: translateY(-100%);
    transition: all 350ms ease-in-out; }
  to {
    transform: translateY(0%);
    transition: all 350ms ease-in-out; } }
    .boxFun .box:hover::before {
      transition: 0s ease-in-out; }
    .boxFun .box:nth-child(9n + 1):hover::before {
      background: #136cbe; }
    .boxFun .box:nth-child(9n + 2):hover::before {
      background: #1579d5; }
    .boxFun .box:nth-child(9n + 3):hover::before {
      background: #1c86e8; }
    .boxFun .box:nth-child(9n + 4):hover::before {
      background: #3393eb; }
    .boxFun .box:nth-child(9n + 5):hover::before {
      background: #4a9fed; }
    .boxFun .box:nth-child(9n + 6):hover::before {
      background: #61abef; }
    .boxFun .box:nth-child(9n + 7):hover::before {
      background: #78b7f2; }
    .boxFun .box:nth-child(9n + 8):hover::before {
      background: #90c4f4; }
    .boxFun .box:nth-child(9n + 9):hover::before {
      background: #a7d0f6; }

.menuMobile {
  background: rgba(35, 36, 38, 0.98);
  opacity: 0;
  width: 100vw;
  height: 100vh;
  transition: all 2000ms cubic-bezier(0.76, 0.24, 0.18, 0.85);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center; }
  .menuMobile.showMenu {
    position: fixed;
    display: flex;
    z-index: 6;
    opacity: 1;
    transition: all 350ms cubic-bezier(0.76, 0.24, 0.18, 0.85); }
  .menuMobile ul.itemMenuPlasta {
    list-style: none;
    overflow: hidden; }
    .menuMobile ul.itemMenuPlasta li {
      transform: translateY(200%);
      transition: transform 600ms cubic-bezier(0.76, 0.24, 0.18, 0.85); }
      .menuMobile ul.itemMenuPlasta li:nth-child(1) {
        transition-delay: all 212ms; }
      .menuMobile ul.itemMenuPlasta li:nth-child(2) {
        transition-delay: all 424ms; }
      .menuMobile ul.itemMenuPlasta li.active {
        transition: transform 600ms cubic-bezier(0.76, 0.24, 0.18, 0.85);
        transform: translateY(0); }
        .menuMobile ul.itemMenuPlasta li.active:nth-child(1) {
          transition-delay: 212ms; }
        .menuMobile ul.itemMenuPlasta li.active:nth-child(2) {
          transition-delay: 424ms; }
  .menuMobile ul.socialIconMenu {
    list-style: none;
    overflow: hidden; }
    .menuMobile ul.socialIconMenu li {
      display: flex;
      justify-content: space-between; }
      .menuMobile ul.socialIconMenu li a {
        transition: transform 600ms cubic-bezier(0.76, 0.24, 0.18, 0.85);
        transform: translateY(100%); }
        .menuMobile ul.socialIconMenu li a.active {
          transition: transform 600ms cubic-bezier(0.76, 0.24, 0.18, 0.85);
          transform: translateY(0); }
          .menuMobile ul.socialIconMenu li a.active:nth-child(1) {
            transition-delay: 212ms; }
          .menuMobile ul.socialIconMenu li a.active:nth-child(2) {
            transition-delay: 424ms; }
          .menuMobile ul.socialIconMenu li a.active:nth-child(3) {
            transition-delay: 636ms; }
  .menuMobile a {
    text-decoration: none;
    font-size: 2.2em;
    letter-spacing: 0.03em;
    text-transform: capitalize;
    transition-property: all;
    transition: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-duration: 350ms;
    background: transparent;
    color: #fff; }
    .menuMobile a:active {
      transition-property: all;
      transition: cubic-bezier(0.39, 0.575, 0.565, 1);
      transition-duration: 350ms;
      background: transparent;
      color: #136cbe; }

.menuPlasta {
  z-index: -4;
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  opacity: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .menuPlasta.activeMenu {
    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 1;
    z-index: 4;
    height: 100vh; }
  .menuPlasta .container {
    padding: 6em;
    display: flex;
    width: 100%;
    height: 80%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around; }
    .menuPlasta .container h4 {
      font-size: 66px;
      line-height: 108px;
      font-weight: 300;
      color: #fff; }
      .menuPlasta .container h4 span {
        color: #136cbe; }
    .menuPlasta .container .subTitleBox {
      display: flex; }
    .menuPlasta .container p {
      font-size: 55px;
      line-height: normal;
      font-weight: 400;
      color: #136cbe; }
    .menuPlasta .container ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden; }
      @media (min-width: 768px) {
        .menuPlasta .container ul {
          display: flex; } }
      .menuPlasta .container ul li {
        font-size: 38px;
        line-height: 64px;
        font-weight: 300;
        color: #fff; }
        @media (min-width: 768px) {
          .menuPlasta .container ul li {
            float: left;
            margin-left: 1em;
            display: flex;
            align-items: flex-end; } }
        .menuPlasta .container ul li:first-child {
          margin: 0; }
    .menuPlasta .container h3 {
      color: #fff;
      font-size: 22px;
      line-height: 36px;
      font-weight: 400; }
    .menuPlasta .container h2 {
      font-size: 34px;
      line-height: normal;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.6); }
    @media only screen and (max-width: 768px) {
      .menuPlasta .container {
        padding: 2em; }
        .menuPlasta .container .subTitleBox {
          flex-direction: column; }
        .menuPlasta .container h4 {
          font-size: 44px;
          line-height: 100%; }
        .menuPlasta .container p {
          font-size: 34px; }
        .menuPlasta .container ul li {
          font-size: 21px;
          line-height: 100%; }
          .menuPlasta .container ul li:first-child {
            margin: 0; }
        .menuPlasta .container h2 {
          font-size: 23px; }
        .menuPlasta .container h3 {
          font-size: 16px; } }
  .menuPlasta a {
    font-size: 38px;
    line-height: 64px;
    font-weight: 300;
    text-decoration: none;
    cursor: pointer;
    color: #fff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
    .menuPlasta a:hover {
      border-color: #136cbe; }
    .menuPlasta a.social_link {
      margin-right: 1em; }
      .menuPlasta a.social_link:last-child {
        margin-right: 0; }
    @media only screen and (max-width: 768px) {
      .menuPlasta a {
        font-size: 21px;
        line-height: 39px; } }

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: #136cbe;
  color: #019aff !important; }

.homePages {
  height: auto;
  z-index: 2;
  position: relative;
  background: #ebebeb; }

.containerIndex {
  height: 88vh;
  display: flex; }
  .containerIndex .conLeft {
    background: #fff; }
    .containerIndex .conLeft img {
      width: 233px; }
  .containerIndex .conRight {
    background: #ebebeb; }
  .containerIndex .conLeft,
  .containerIndex .conRight {
    width: 50vw;
    display: flex;
    align-items: center;
    justify-content: center; }
  .containerIndex p {
    padding: 3em;
    font-size: 2em;
    letter-spacing: 0.02em; }
    .containerIndex p span {
      color: #136cbe; }
  @media only screen and (max-width: 768px) {
    .containerIndex {
      height: 100vh;
      flex-direction: column;
      display: flex; }
      .containerIndex .conLeft,
      .containerIndex .conRight {
        width: 100vw;
        height: 50vh; }
      .containerIndex p {
        padding: 1em;
        font-size: 1.3em;
        letter-spacing: 0.02em;
        line-height: 200%; }
        .containerIndex p span {
          color: #136cbe; } }

.bannerContainer {
  height: 300px;
  overflow: hidden;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .bannerContainer {
      height: 300px; } }
  .bannerContainer img {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    animation: uiImgCta 55s infinite; }
  .bannerContainer .plasta {
    background: rgba(35, 36, 38, 0.8);
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .bannerContainer .plasta .text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 400px; }
      .bannerContainer .plasta .text .left,
      .bannerContainer .plasta .text .rigth {
        display: flex;
        justify-content: center;
        height: 100%;
        padding: 0.8em; }
      .bannerContainer .plasta .text .left {
        width: 50%;
        align-items: center;
        background: #fff; }
      .bannerContainer .plasta .text .rigth {
        width: 50%;
        flex-direction: column;
        background: #136cbe; }
        .bannerContainer .plasta .text .rigth .auxPaddingL {
          padding-left: 1em; }
      .bannerContainer .plasta .text h3 {
        color: #136cbe;
        font-size: 6em; }
      .bannerContainer .plasta .text p {
        letter-spacing: 0.13em;
        color: #fff;
        font-size: 2em;
        font-weight: 300; }
    @media only screen and (max-width: 768px) {
      .bannerContainer .plasta .text {
        width: 300px; }
        .bannerContainer .plasta .text .left,
        .bannerContainer .plasta .text .rigth {
          display: flex;
          justify-content: center;
          height: 100%;
          padding: 0.8em; }
        .bannerContainer .plasta .text .rigth .auxPaddingL {
          padding-left: 1em; }
        .bannerContainer .plasta .text h3 {
          color: #136cbe;
          font-size: 3em; }
        .bannerContainer .plasta .text p {
          letter-spacing: 0.13em;
          color: #fff;
          font-size: 1.3em;
          font-weight: 400; } }

@keyframes uiImgCta {
  0% {
    transform: scale(1);
    filter: blur(1px);
    transition: 300ms ease-in-out; }
  50% {
    transform: scale(1.1);
    filter: blur(0);
    transition: 300ms ease-in-out; }
  100% {
    transform: scale(1);
    filter: blur(1px);
    transition: 300ms ease-in-out; } }

.servicesArea {
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  padding: 80px 0;
  min-height: 564px;
  background-image: radial-gradient(#d7d7d7 0.8px, transparent 1px), radial-gradient(#d7d7d7 0.8px, transparent 1px);
  background-position: 0 0, 13px 13px;
  background-size: 34px 34px; }
  @media only screen and (max-width: 768px) {
    .servicesArea {
      height: auto;
      padding: 6em 0; } }
  .servicesArea h2 {
    text-align: center;
    font-size: 48px;
    font-weight: 300;
    position: absolute;
    width: 30%;
    top: 6%;
    color: #232426; }
    @media only screen and (max-height: 1200px) {
      .servicesArea h2 {
        width: 8%;
        transform: rotate(-90deg);
        top: 20%; } }
    @media only screen and (max-width: 450px) {
      .servicesArea h2 {
        width: 0;
        transform: rotate(0deg);
        top: 3.4%;
        font-size: 2em;
        left: 8%;
        font-weight: 500; } }
  .servicesArea .itemsElemts {
    display: flex;
    align-items: center;
    width: 80%;
    height: 100%;
    margin: auto;
    overflow: hidden;
    flex-wrap: wrap;
    justify-content: space-between; }
    @media only screen and (max-width: 768px) {
      .servicesArea .itemsElemts {
        height: auto; } }
    @media only screen and (min-width: 1800px) {
      .servicesArea .itemsElemts {
        justify-content: center; } }
    .servicesArea .itemsElemts .servicesBox {
      display: flex;
      flex-direction: column;
      width: 322px;
      height: 260px;
      justify-content: center;
      align-items: flex-start;
      margin: 2em 1em; }
      @media only screen and (min-width: 1080px) {
        .servicesArea .itemsElemts .servicesBox {
          width: 370px; } }
      @media only screen and (max-width: 768px) {
        .servicesArea .itemsElemts .servicesBox {
          margin: 1.4em 0;
          height: auto; } }
      @media only screen and (max-height: 1080px) {
        .servicesArea .itemsElemts .servicesBox {
          margin: 1em 1em; } }
    .servicesArea .itemsElemts h3 {
      font-size: 27px;
      line-height: 34px;
      font-weight: 400;
      color: #136cbe;
      width: 80%; }
    .servicesArea .itemsElemts p {
      font-size: 18px;
      line-height: 27px;
      font-weight: 400;
      padding: 1em 0; }
    .servicesArea .itemsElemts h5 {
      font-size: 15px;
      line-height: 34px;
      font-weight: 600;
      color: #004294;
      display: none; }
    .servicesArea .itemsElemts a {
      font-size: 27px;
      font-weight: 300;
      text-decoration: none;
      cursor: pointer;
      color: #fff;
      padding: 0.2em 1em;
      border-bottom-width: 0;
      background: #136cbe;
      box-shadow: 4px 4px #0a3761;
      transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
      .servicesArea .itemsElemts a:hover {
        border-radius: 21px 0px 21px 0;
        box-shadow: 0px 0px #0a3761;
        border-color: rgba(13, 13, 13, 0.2); }
    @media only screen and (max-width: 768px) {
      .servicesArea .itemsElemts h3 {
        font-weight: 500;
        font-size: 27px;
        line-height: 34px; }
      .servicesArea .itemsElemts p {
        margin-bottom: 20px;
        -webkit-font-smoothing: antialiased;
        font-size: 21px;
        line-height: 1.4;
        font-weight: 400;
        color: #7f7f7f; }
      .servicesArea .itemsElemts h5 {
        display: none; }
      .servicesArea .itemsElemts a {
        font-size: 21px;
        font-weight: 500;
        color: #fff;
        padding: 0.2em 1em;
        border-bottom-width: 0;
        background: #136cbe;
        box-shadow: 4px 4px #0a3761; } }

.boxServices {
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.07);
  border-radius: 5px;
  width: 888px;
  height: 377px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: #fff; }
  .boxServices .boxIndicate {
    width: auto;
    height: auto;
    position: relative; }
    .boxServices .boxIndicate .indicate {
      width: 0.5em;
      height: 0.5em;
      background: rgba(19, 108, 190, 0.3);
      border-radius: 50px;
      margin-bottom: 1em;
      cursor: pointer;
      transition: 350ms ease-in-out; }
      .boxServices .boxIndicate .indicate:last-child {
        margin-bottom: 0; }
      .boxServices .boxIndicate .indicate:hover {
        background: rgba(19, 108, 190, 0.8);
        transition: 350ms ease-in-out; }
      .boxServices .boxIndicate .indicate.active {
        background: #136cbe;
        height: 1.3em; }
  @media only screen and (max-width: 768px) {
    .boxServices {
      width: 90vw;
      flex-direction: column; }
      .boxServices .boxIndicate {
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 51%; }
        .boxServices .boxIndicate .indicate {
          margin-bottom: 0; }
          .boxServices .boxIndicate .indicate:last-child {
            margin-right: 0; }
          .boxServices .boxIndicate .indicate.active {
            background: #136cbe;
            width: 1.3em; } }

.boxMain {
  width: 80%; }
  .boxMain .typeHr {
    margin: 1em 0;
    height: 0.3em;
    width: 20%;
    background: #019aff; }
  .boxMain h2 {
    color: #136cbe;
    font-size: 2em;
    opacity: 0;
    transition: 3s all ease; }
    .boxMain h2.active {
      transition-delay: 4s;
      opacity: 1;
      transition: 2s all ease; }
  .boxMain h3 {
    font-size: 1em;
    color: #9fa0a6;
    font-weight: 500;
    letter-spacing: 0.05em;
    opacity: 0; }
    .boxMain h3.active {
      transition-delay: 4s;
      opacity: 1;
      transition: 2s all ease; }
  .boxMain p {
    width: 64%;
    padding: 0.5em 0.3em;
    color: #232426;
    font-size: 1.5em;
    line-height: 144%;
    opacity: 0; }
    .boxMain p.active {
      transition-delay: 4s;
      opacity: 1;
      transition: all 2s all ease; }
  .boxMain a {
    text-decoration: none;
    opacity: 0; }
    .boxMain a.active {
      animation: showThis 50s; }
  @media only screen and (max-width: 768px) {
    .boxMain {
      height: 300px;
      display: flex;
      align-items: center; }
      .boxMain h2 {
        font-size: 1.55em;
        text-align: center; }
      .boxMain h3 {
        display: none; }
      .boxMain p {
        font-size: 1em;
        width: 100%;
        line-height: 200%;
        text-align: center; } }

@keyframes showThis {
  from {
    opacity: 0; }
  to {
    opacity: 1;
    transition: 2s all ease; } }

.fade-appear {
  opacity: 0;
  z-index: 1; }

.fade-appear.fade-appear-active {
  opacity: 1;
  transition: opacity 300ms lineal; }

.fade-enter {
  opacity: 0;
  z-index: 1; }

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms lineal; }

.typeHero {
  height: 100vh;
  width: 100%; }

.titleArea {
  height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; }
  .titleArea h1 {
    color: #232426;
    font-size: 56px;
    line-height: 92px;
    font-weight: 300; }
    .titleArea h1 span {
      color: #136cbe; }
  .titleArea p {
    text-align: center;
    color: #6d6d6b;
    font-size: 32px;
    line-height: 52px;
    font-weight: 300; }
  @media only screen and (max-width: 768px) {
    .titleArea {
      height: 320px; }
      .titleArea h1 {
        text-align: center;
        font-size: 2em; }
      .titleArea p {
        font-size: 20px;
        line-height: 32px; } }

.displayTextEnd {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding-bottom: 4em; }
  .displayTextEnd p {
    text-align: center;
    color: #6d6d6b;
    font-size: 32px;
    line-height: 52px;
    font-weight: 300; }
  @media only screen and (max-width: 768px) {
    .displayTextEnd p {
      font-size: 20px;
      line-height: 32px; } }

.bannerColor {
  height: 34px;
  width: 100%;
  display: flex; }
  .bannerColor .colorA {
    background: #019aff;
    width: 50%;
    height: 100%; }
  .bannerColor .colorB {
    background: #6ed3ff;
    width: 50%;
    height: 100%; }
  @media only screen and (max-width: 768px) {
    .bannerColor {
      height: 34px; } }

.teamPages {
  background: #ebebeb;
  height: auto;
  z-index: 2;
  position: relative; }
  @media only screen and (max-width: 768px) {
    .teamPages {
      z-index: 0; } }

.areaProfile {
  padding: 1em 0 5em 0; }
  .areaProfile .box {
    display: flex;
    justify-content: center;
    flex-direction: row;
    width: 80%;
    align-items: center;
    flex-wrap: wrap;
    margin: auto; }
    @media only screen and (max-width: 1200px) {
      .areaProfile .box {
        width: 100%;
        overflow: hidden;
        justify-content: flex-start;
        overflow-x: scroll;
        flex-wrap: nowrap; } }

.heroWeDone {
  clip-path: polygon(0 0, 100% 0, 100% 68%, 0% 100%);
  height: 55vh;
  width: 100vw;
  overflow: hidden; }
  @media only screen and (max-width: 768px) {
    .heroWeDone {
      height: 45vh; } }
  .heroWeDone img {
    object-fit: cover;
    filter: brightness(0.5);
    transform: translateY(-40px);
    width: 100%; }
    @media only screen and (max-width: 768px) {
      .heroWeDone img {
        height: 50vh; } }

.containerClientesMain {
  background: #f8f9fb; }

.containerWeDone {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f8f9fb; }
  .containerWeDone .clientsHKIA {
    width: 300px;
    margin-bottom: 8vh;
    padding: 2vh;
    background: white;
    border-radius: 3px;
    filter: grayscale(1);
    transition: all 350ms ease-in-out; }
    .containerWeDone .clientsHKIA:hover {
      transition: all 350ms ease-in-out;
      filter: grayscale(0); }
  .containerWeDone .containerClientes {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4vh 0; }
  .containerWeDone .containerClientesB {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4vh 0; }
  .containerWeDone .divisor {
    width: 40%;
    background: #136cbe;
    height: 0.2vh;
    border-radius: 100px;
    margin: 1em 0; }
  .containerWeDone .aboutProyect {
    flex-direction: column;
    display: flex;
    justify-content: center;
    width: 34%;
    padding: 2vh;
    background: white;
    border-radius: 3px; }
  .containerWeDone h2 {
    font-size: 1em;
    color: #136cbe;
    font-weight: 400; }
  .containerWeDone h3 {
    font-weight: 300; }
  .containerWeDone .titlesBanner {
    text-align: center; }
    @media only screen and (max-width: 768px) {
      .containerWeDone .titlesBanner p {
        font-size: 1em; } }
  .containerWeDone h1 {
    font-size: 2.3em;
    font-weight: 400; }
  .containerWeDone h2 {
    font-size: 2em;
    font-weight: 400; }
  .containerWeDone p {
    font-size: 1.4em;
    line-height: 1.6em;
    font-weight: 300; }
    .containerWeDone p span {
      font-weight: 600; }

.bannerFriend {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8vh; }
  @media only screen and (max-width: 768px) {
    .bannerFriend {
      display: block; }
      .bannerFriend .especialForReverse {
        flex-direction: column-reverse;
        display: flex; } }
  .bannerFriend .imagesContainerFriend {
    width: 300px;
    height: 300px;
    background: #ffff;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    display: flex; }
    .bannerFriend .imagesContainerFriend img {
      justify-self: center;
      filter: grayscale(0);
      width: 100%; }
  .bannerFriend .auxToCenterAll {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    padding: 0.8em; }
  .bannerFriend .aboutBoxFriend {
    background: #fff;
    justify-items: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height: 300px; }
    .bannerFriend .aboutBoxFriend .divisorFriend {
      width: 34%;
      background: #136cbe;
      border-radius: 10em;
      height: 3px;
      margin-top: 0.5em; }
    .bannerFriend .aboutBoxFriend h2 {
      color: #232426;
      font-weight: 400; }
    .bannerFriend .aboutBoxFriend .smallLabel {
      text-align: center;
      padding: 1em;
      font-size: 1em;
      font-family: 'Roboto', sans-serif; }
    .bannerFriend .aboutBoxFriend p {
      text-align: center;
      font-size: 1em;
      line-height: 144%;
      font-family: 'Roboto', sans-serif; }

.bannerWeDone {
  height: 100vh;
  background: #fff;
  margin-top: 8vh;
  overflow: hidden;
  align-content: center;
  justify-content: center;
  display: flex;
  align-items: center; }
  @media only screen and (max-width: 768px) {
    .bannerWeDone {
      height: auto; } }
  .bannerWeDone .gridContainerWeDone {
    display: grid;
    grid-template-columns: repeat(14, 88px);
    grid-template-rows: repeat(10, 88px);
    grid-gap: 5px;
    grid-auto-flow: column; }
    @media only screen and (max-width: 768px) {
      .bannerWeDone .gridContainerWeDone {
        grid-template-columns: repeat(6, 55px);
        grid-template-rows: repeat(10, 75px);
        grid-gap: 2px;
        margin: 1em 0.5em;
        overflow: hidden; } }
    .bannerWeDone .gridContainerWeDone .itemGrid {
      overflow: hidden;
      justify-items: stretch; }
      .bannerWeDone .gridContainerWeDone .itemGrid img {
        width: 100%;
        height: 100%;
        object-fit: cover; }
    .bannerWeDone .gridContainerWeDone .gridA {
      overflow: hidden;
      grid-row: 2/6;
      grid-column: 1/4; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridA {
          grid-row: 12/17;
          grid-column: 1/7; } }
    .bannerWeDone .gridContainerWeDone .gridS {
      grid-area: box2;
      overflow: hidden;
      grid-row: 6/9;
      grid-column: 1/4; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridS {
          grid-row: 1/4;
          grid-column: 1/7; } }
    .bannerWeDone .gridContainerWeDone .gridD {
      grid-area: box3;
      overflow: hidden;
      grid-row: 4/8;
      grid-column: 4/7; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridD {
          display: none; } }
    .bannerWeDone .gridContainerWeDone .gridF {
      overflow: hidden;
      grid-row: 3/6;
      grid-column: 7/10; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridF {
          display: none; } }
    .bannerWeDone .gridContainerWeDone .gridG {
      overflow: hidden;
      grid-row: 6/8;
      grid-column: 7/9; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridG {
          grid-row: 4/8;
          grid-column: 1/5; } }
    .bannerWeDone .gridContainerWeDone .gridH {
      overflow: hidden;
      grid-row: 6/8;
      grid-column: 9/12; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridH {
          grid-row: 4/7;
          grid-column: 5/7; } }
    .bannerWeDone .gridContainerWeDone .gridJ {
      grid-area: box6;
      overflow: hidden;
      grid-row: 2/6;
      grid-column: 10/15; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridJ {
          display: none; } }
    .bannerWeDone .gridContainerWeDone .gridK {
      overflow: hidden;
      grid-row: 8/11;
      grid-column: 4/8; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridK {
          overflow: hidden;
          grid-row: 7/11;
          grid-column: 5/7; } }
    .bannerWeDone .gridContainerWeDone .gridL {
      overflow: hidden;
      display: none;
      grid-row: 5/10;
      grid-column: 12/15; }
      .bannerWeDone .gridContainerWeDone .gridL img {
        transform: rotateZ(90deg); }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridL {
          grid-row: 8/11;
          grid-column: 1/5; } }
    .bannerWeDone .gridContainerWeDone .gridZ {
      overflow: hidden;
      grid-row: 8/11;
      grid-column: 8/12; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridZ {
          grid-row: 12/11;
          grid-column: 1/7; } }
    .bannerWeDone .gridContainerWeDone .gridX {
      overflow: hidden;
      grid-row: 1/4;
      grid-column: 4/7; }
      @media only screen and (max-width: 768px) {
        .bannerWeDone .gridContainerWeDone .gridX {
          display: none; } }

.containeBestClients {
  margin: 5em auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: unset;
  justify-content: space-around;
  width: 100%;
  overflow: hidden; }
  @media only screen and (max-width: 768px) {
    .containeBestClients {
      flex-direction: column; } }

.bestClients {
  display: flex;
  align-content: center;
  position: relative; }
  .bestClients .imgMain {
    width: 300px;
    height: 100%; }
  .bestClients .bfImg {
    filter: contrast(0.5); }
    .bestClients .bfImg img {
      width: 600px;
      height: 400px; }
      @media only screen and (max-width: 768px) {
        .bestClients .bfImg img {
          width: 100vw; } }
  .bestClients .text {
    position: absolute;
    background: rgba(255, 255, 255, 0.88);
    padding: 1em;
    height: 100%; }
    .bestClients .text .nameAndlogo {
      display: flex;
      flex-direction: row-reverse; }
    .bestClients .text p {
      font-size: 1.4em; }
    .bestClients .text .logo {
      background: #fff;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center; }
      .bestClients .text .logo img {
        width: 144px; }

.areaPhoto img {
  width: 144px; }

.textForRead {
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  padding: 1em;
  height: 100%; }

.areaProfile .typeCard {
  overflow: hidden;
  background: #fff;
  width: 400px;
  border-radius: 5px;
  height: 600px;
  position: relative;
  margin: 2em;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.07); }
  @media only screen and (max-width: 768px) {
    .areaProfile .typeCard {
      width: 330px;
      height: 500px;
      margin: 2em 1em 3em 1em; } }

.areaProfile .boximages {
  width: 100%;
  height: 87%;
  position: absolute;
  overflow: hidden; }
  .areaProfile .boximages::before {
    z-index: 1;
    content: '';
    position: absolute;
    display: flex;
    width: 100%;
    height: 0%;
    background: #136cbe;
    transition: 300ms all ease-in; }
  @media only screen and (max-width: 768px) {
    .areaProfile .boximages {
      height: 80%; } }

.areaProfile .avartaImages {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 300ms all ease-in;
  position: absolute;
  filter: grayscale(1) brightness(0.5) blur(0px); }
  .areaProfile .avartaImages:hover {
    transition: 300ms all ease-in;
    filter: grayscale(0) brightness(0.88) blur(0px); }

.areaProfile .newStyleAux {
  position: absolute;
  bottom: 8%; }

.areaProfile .plastaAvatar {
  width: 100%;
  transition: 300ms all ease-in;
  z-index: 1;
  display: flex;
  justify-content: center; }
  .areaProfile .plastaAvatar:hover {
    transition: 300ms all ease-in; }
  .areaProfile .plastaAvatar .infoProfile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; }
    .areaProfile .plastaAvatar .infoProfile .textProfile {
      color: #fff;
      letter-spacing: 0.05em;
      font-weight: 400;
      font-size: 1.3rem; }
    .areaProfile .plastaAvatar .infoProfile .auxHr {
      margin: 0.5em 0;
      height: 1px;
      background: #fff;
      width: 34%; }
    .areaProfile .plastaAvatar .infoProfile .gitIcon {
      border: 1px solid rgba(255, 255, 255, 0.5);
      overflow: hidden;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
      transition: 300ms all ease-in; }
      .areaProfile .plastaAvatar .infoProfile .gitIcon .IconSocial {
        color: #ebebeb; }
      .areaProfile .plastaAvatar .infoProfile .gitIcon:hover {
        transition: 300ms all ease-in;
        transform: scale(1.3);
        background: #136cbe; }

.areaProfile .infoCard {
  height: 13%;
  background: #fff;
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1.3em;
  overflow: hidden; }
  .areaProfile .infoCard .infoCardTop {
    color: #136cbe;
    font-weight: 300;
    letter-spacing: 0.04em;
    font-size: 1.5em; }
  .areaProfile .infoCard .infoCardBottom {
    color: #6d6d6b;
    font-size: 16px;
    line-height: normal;
    font-weight: 300; }
  @media only screen and (max-width: 768px) {
    .areaProfile .infoCard {
      height: 20%; }
      .areaProfile .infoCard .infoCardTop {
        font-size: 1.1em; }
      .areaProfile .infoCard .infoCardTop {
        font-size: 0.8em; } }

.privacyPage {
  max-width: 80vw;
  margin: 0 auto;
  padding: 40px 0; }
  .privacyPage h1, .privacyPage h2 {
    margin-bottom: 0.5em; }
  .privacyPage h3, .privacyPage h4 {
    margin-bottom: 0.25em; }
  .privacyPage p {
    margin-bottom: 0.5em; }
  .privacyPage ul {
    margin: 1em 0;
    padding-left: 40px; }

footer {
  background: #232426;
  position: relative;
  color: #ebebeb;
  overflow: hidden; }
  footer .containerFooter {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    padding-top: 3em;
    padding-bottom: 2em;
    width: 100%; }
    footer .containerFooter .leftSite,
    footer .containerFooter .rightSite {
      max-width: 400px;
      width: 45%; }
    footer .containerFooter .leftSite .quickLinks ul {
      margin: 0;
      padding: 0; }
      footer .containerFooter .leftSite .quickLinks ul li {
        display: inline-block;
        float: none;
        line-height: 0;
        margin: 0 5px 0 0;
        padding: 0;
        vertical-align: middle; }
        footer .containerFooter .leftSite .quickLinks ul li a {
          border-right: 1px solid #FFF;
          color: #FFF;
          font-size: 0.75rem;
          line-height: 0.75rem;
          padding: 0 5px 2px 0;
          text-transform: lowercase; }
      footer .containerFooter .leftSite .quickLinks ul > li:last-child a {
        border-right: 0; }
    footer .containerFooter .copy {
      font-size: 0.75em;
      opacity: 0.75; }
  footer h3 {
    color: #fff;
    font-weight: 400;
    font-size: 2em; }
    footer h3 span {
      color: #019aff; }
  footer p {
    font-size: 16px;
    line-height: 27px;
    font-weight: 300; }
  footer h4 {
    color: #019aff;
    font-size: 1.3em;
    font-weight: 400; }
  footer .weMakeFooter {
    display: flex;
    justify-content: space-between; }
  footer ul {
    list-style: none;
    flex: none; }
    footer ul li {
      margin-left: 5px;
      font-size: 16px;
      line-height: 27px;
      font-weight: 300; }
      footer ul li::before {
        contain: '/';
        margin-left: 5px; }
      @media only screen and (max-width: 768px) {
        footer ul li {
          display: none; } }
  footer .footerBottom {
    background: #019aff;
    width: 100%;
    height: 1em;
    position: absolute;
    bottom: 0; }
  @media only screen and (max-width: 768px) {
    footer {
      height: 100%;
      padding: 2em 0 4em 0;
      z-index: 1; }
      footer .containerFooter {
        flex-direction: column;
        align-items: flex-start; }
        footer .containerFooter .leftSite,
        footer .containerFooter .rightSite {
          width: 88%;
          margin: 1em auto; } }