/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  ABOUT
***************************************/
#about {
  overflow: hidden;
  padding: 120px 0;
  background-color: transparent;
}
  @media only screen and (max-width: 1130px) {
    #about {
      padding: 60px 0; } }
  #about > .container {
    position: relative;
    z-index: 1; }
    #about > .container:before {
      position: absolute;
      top: 15px;
      right: 0;
      z-index: 0;
      width: 300px;
      height: 300px;
      opacity: 0.3; }
      .msie #about > .container:before {
        opacity: 0.5; }
      @media only screen and (max-width: 1130px) {
        #about > .container:before {
          width: 250px;
          height: 250px; } }
      @media only screen and (max-width: 1023px) {
        #about > .container:before {
          right: -100px; } }
      @media only screen and (max-width: 767px) {
        #about > .container:before {
          right: -150px; } }
    #about > .container > .title {
      margin: 0; }
    @media only screen and (max-width: 1023px) {
      #about > .container > .row > .content {
        width: 100%;
        float: none;
        margin: 0; } }
    #about > .container > .row > .content > .text {
      display: block;
      position: relative; }
      #about > .container > .row > .content > .text:before {
        content: '';
        position: absolute;
        top: 15px;
        left: -145px;
        display: block;
        width: 125px;
        height: 2px;
        /*background-color: var(--color-primary);*/ }
        @media only screen and (max-width: 1023px) {
          #about > .container > .row > .content > .text:before {
            position: relative;
            top: 0;
            left: 0;
            margin: 20px 0 25px; } }
    #about > .container > .row > .content > .btn {
      margin-top: 25px; }
  #about > .image {
    position: relative;
    z-index: 1;
    display: table;
    font-size: 0;
    margin-left:10%;
    margin: 55px 0 0 auto;
    padding-left: 195px; }
    .bg-soft-ghost {
      background-color: #000;
      color: white;
    }
    @media only screen and (max-width: 1023px) {
      #about > .image {
        padding-left: 120px; } }
    @media only screen and (max-width: 767px) {
      #about > .image {
        margin-top: 35px;
        padding-left: 50px; } }
    #about > .image > img.office {
      max-width: 100%; }
    #about > .image > img.logo {
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 70px;
      width: 46px;
      font-size: 12px; }
      @media only screen and (max-width: 1130px) {
        #about > .image > img.logo {
          left: 85px;
          width: 36px; } }
      @media only screen and (max-width: 1023px) {
        #about > .image > img.logo {
          display: none; } }
  #about > .background {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: none;
  }
    #about > .background > .covered {
      position: relative;
      width: 800px;
      height: 800px; }
      @media only screen and (max-width: 1130px) {
        #about > .background > .covered {
          width: 600px;
          height: 600px; } }
      @media only screen and (max-width: 1023px) {
        #about > .background > .covered {
          width: 400px;
          height: 400px; } }
      @media only screen and (max-width: 767px) {
        #about > .background > .covered {
          width: 250px;
          height: 250px; } }
    #about > .background > .overlay {
      background-color: #000000; }
      #about > .background > .overlay, #about > .background > .overlay:before, #about > .background > .overlay:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 1; }
      #about > .background > .overlay:before {
        opacity: 0.2; }
      #about > .background > .overlay:after {
        border-style: solid;
        border-width: 0 800px 800px 0;
        border-color: transparent #000000 transparent transparent; }
        @media only screen and (max-width: 1130px) {
          #about > .background > .overlay:after {
            border-width: 0 600px 600px 0; } }
        @media only screen and (max-width: 1023px) {
          #about > .background > .overlay:after {
            border-width: 0 400px 400px 0; } }
        @media only screen and (max-width: 767px) {
          #about > .background > .overlay:after {
            border-width: 0 250px 250px 0; } }

/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  CLIENTS
***************************************/
.new-clients-white{
  background: #FFFFFF!important;
}
#clients > .container {
  position: relative;
  margin-bottom: 10px; }
  #clients > .container > .title {
    text-align: center;
    margin: 0; }
  #clients > .container > .clients-slide {
    background: white;
    padding: 0 25px; }
    @media only screen and (max-width: 1130px) {
      #clients > .container > .clients-slide {
        margin-top: 40px; } }
    #clients > .container > .clients-slide:before, #clients > .container > .clients-slide:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      width: 55px;
      height: 100%; }
    #clients > .container > .clients-slide:before {
      left: 0;
      /*background: -webkit-gradient(linear, left top, right top, from(white), color-stop(50%, white), to(rgba(255, 255, 255, 0)));
      background: -o-linear-gradient(left, white 0%, white 50%, rgba(255, 255, 255, 0) 100%);
      background: linear-gradient(to right, white 0%, white 50%, rgba(255, 255, 255, 0) 100%);*/ }
    #clients > .container > .clients-slide:after {
      right: 0;
      /*background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, white), to(white));
      background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 50%, white 100%);*/ }
    #clients > .container > .clients-slide .client {
      display: block;
      height: 110px;
      text-align: center; }
      #clients > .container > .clients-slide .client > a,
      #clients > .container > .clients-slide .client > img {
        display: inline-block;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%); }
      #clients > .container > .clients-slide .client > a {
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        will-change: opacity;
        -webkit-transition: opacity .2s linear;
        -o-transition: opacity .2s linear;
        transition: opacity .2s linear; }
        .no-touch #clients > .container > .clients-slide .client > a:hover, #clients > .container > .clients-slide .client > a:active {
          opacity: 0.5; }
      #clients > .container > .clients-slide .client img {
        display: block;
        margin: 0 auto;
        font-size: 10px;
        text-align: center;
        color: #000000; }

/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  PORTFOLIO
***************************************/
#portfolio {
  overflow: hidden; }
  #portfolio > .container:not(.moved-triangles) {
    position: relative;
    z-index: 1; }
    #portfolio > .container:not(.moved-triangles) > .title {
      margin: 0;
      max-width: 350px; }
      @media only screen and (max-width: 767px) {
        #portfolio > .container:not(.moved-triangles) > .title {
          max-width: 200px; } }
    #portfolio > .container:not(.moved-triangles) > .portfolio-slide {
      margin-top: 60px; }
      @media only screen and (max-width: 1130px) {
        #portfolio > .container:not(.moved-triangles) > .portfolio-slide {
          margin-top: 40px; } }
      #portfolio > .container:not(.moved-triangles) > .portfolio-slide .slick-list {
        overflow: visible; }
      #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work {
        text-align: center;
        margin-bottom: 20px;
        -webkit-transition-duration: 0s !important;
             -o-transition-duration: 0s !important;
                transition-duration: 0s !important; }
        #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work.transition-delay {
          -webkit-transition-delay: 1.2s !important;
               -o-transition-delay: 1.2s !important;
                  transition-delay: 1.2s !important; }
        #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a {
          display: inline-block; }
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered {
            position: relative;
            width: 500px;
            height: 150px;
            display: block;
            margin: 0;
            -webkit-box-shadow: 10px 10px 40px 0 rgba(0, 0, 0, 0.5);
                    box-shadow: 10px 10px 40px 0 rgba(0, 0, 0, 0.5); }
            @media only screen and (max-width: 767px) {
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered {
                width: 360px;
                height: 120px; } }
            @media only screen and (max-width: 480px) {
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered {
                width: 240px;
                height: 90px; } }
            #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered:before, #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered:after {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              z-index: 1;
              background-color: rgba(109, 205, 184, 0.3);
              -webkit-transform: scaleX(0);
                  -ms-transform: scaleX(0);
                      transform: scaleX(0);
              -webkit-transform-origin: top left;
                  -ms-transform-origin: top left;
                      transform-origin: top left;
              will-change: transform;
              -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
              transition: -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
              -o-transition: transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
              transition: transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
              transition: transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1); }
            #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered:after {
              z-index: 2;
              background-color: var(--color-primary);
              -webkit-transform: scaleX(1);
                  -ms-transform: scaleX(1);
                      transform: scaleX(1); }
            #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top:before {
              -webkit-transition-delay: 0s;
                   -o-transition-delay: 0s;
                      transition-delay: 0s; }
            #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top:after {
              -webkit-transition-delay: 0.5s;
                   -o-transition-delay: 0.5s;
                      transition-delay: 0.5s; }
            #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top > .content {
              position: absolute;
              z-index: 3;
              right: -50%;
              top: 50%;
              text-align: left;
              width: 300px;
              -webkit-transform: translateY(-50%);
                  -ms-transform: translateY(-50%);
                      transform: translateY(-50%); }
              @media only screen and (max-width: 1023px) {
                #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top > .content {
                  right: auto;
                  left: -15px; } }
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top > .content > .title {
                -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                will-change: transform;
                -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0.05s;
                transition: -webkit-transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0.05s;
                -o-transition: transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0.05s;
                transition: transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0.05s;
                transition: transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0.05s, -webkit-transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0.05s; }
                #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top > .content > .title > .text-box {
                  -webkit-transform: translateX(-110%);
                      -ms-transform: translateX(-110%);
                          transform: translateX(-110%);
                  will-change: transform;
                  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0.3s;
                  transition: -webkit-transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0.3s;
                  -o-transition: transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0.3s;
                  transition: transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0.3s;
                  transition: transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0.3s, -webkit-transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0.3s; }
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top > .content > .local-date {
                -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                will-change: transform;
                -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                transition: -webkit-transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                -o-transition: transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                transition: transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                transition: transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0s, -webkit-transform 0.5s cubic-bezier(0.58, 0.3, 0.005, 1) 0s; }
                #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top > .content > .local-date > span {
                  color: #6DCDB8;
                  display: inline-block;
                  margin-left: 20%;
                  line-height: 1.4;
                  -webkit-transform: translateY(-110%);
                      -ms-transform: translateY(-110%);
                          transform: translateY(-110%);
                  will-change: transform;
                  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                  transition: -webkit-transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                  -o-transition: transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                  transition: transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0s;
                  transition: transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0s, -webkit-transform 0.8s cubic-bezier(0.58, 0.3, 0.005, 1) 0s; }
                  @media only screen and (max-width: 1023px) {
                    #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-top > .content > .local-date > span {
                      margin-left: 0;
                      color: #FFFFFF;
                      background-color: #6DCDB8;
                      padding: 1px 10px; } }
            #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-middle {
              overflow: hidden;
              margin: 60px 0; }
              @media only screen and (max-width: 767px) {
                #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-middle {
                  margin: 40px 0; } }
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-middle:before {
                -webkit-transition-delay: 0.05s;
                     -o-transition-delay: 0.05s;
                        transition-delay: 0.05s; }
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-middle:after {
                -webkit-transition-delay: 0.55s;
                     -o-transition-delay: 0.55s;
                        transition-delay: 0.55s; }
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-middle > .btn {
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: 1;
                pointer-events: none;
                -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                -webkit-transform: translateY(100%);
                    -ms-transform: translateY(100%);
                        transform: translateY(100%);
                -webkit-transform-origin: bottom right;
                    -ms-transform-origin: bottom right;
                        transform-origin: bottom right;
                will-change: transform;
                -webkit-transition: -webkit-transform 0.3s ease 0s;
                transition: -webkit-transform 0.3s ease 0s;
                -o-transition: transform 0.3s ease 0s;
                transition: transform 0.3s ease 0s;
                transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s; }
            #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-bottom {
              width: 600px; }
              @media only screen and (max-width: 767px) {
                #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-bottom {
                  width: 450px; } }
              @media only screen and (max-width: 480px) {
                #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-bottom {
                  width: 290px; } }
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-bottom:before {
                -webkit-transition-delay: 0.1s;
                     -o-transition-delay: 0.1s;
                        transition-delay: 0.1s; }
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a > .covered.image-bottom:after {
                -webkit-transition-delay: 0.6s;
                     -o-transition-delay: 0.6s;
                        transition-delay: 0.6s; }
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a.active .covered:after {
            -webkit-transform: scaleX(0);
                -ms-transform: scaleX(0);
                    transform: scaleX(0);
            -webkit-transform-origin: top right;
                -ms-transform-origin: top right;
                    transform-origin: top right; }
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a.active .image-top:after {
            -webkit-transition-delay: 0s;
                 -o-transition-delay: 0s;
                    transition-delay: 0s; }
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a.active .image-top > .content > .title > .text-box {
            -webkit-transform: translateX(0);
                -ms-transform: translateX(0);
                    transform: translateX(0);
            -webkit-transition-delay: 0.3s;
                 -o-transition-delay: 0.3s;
                    transition-delay: 0.3s; }
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a.active .image-top > .content > .local-date > span {
            -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                    transform: translateY(0);
            -webkit-transition-delay: 0.6s;
                 -o-transition-delay: 0.6s;
                    transition-delay: 0.6s; }
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a.active .image-middle:after {
            -webkit-transition-delay: 0.05s;
                 -o-transition-delay: 0.05s;
                    transition-delay: 0.05s; }
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a.active .image-bottom:after {
            -webkit-transition-delay: 0.1s;
                 -o-transition-delay: 0.1s;
                    transition-delay: 0.1s; }
          .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-top:before,
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-top:before {
            -webkit-transform: scaleX(1);
                -ms-transform: scaleX(1);
                    transform: scaleX(1);
            -webkit-transition-delay: 0s;
                 -o-transition-delay: 0s;
                    transition-delay: 0s; }
          .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-top .title,
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-top .title {
            -webkit-transform: translateX(15px);
                -ms-transform: translateX(15px);
                    transform: translateX(15px);
            -webkit-transition-delay: 0s;
                 -o-transition-delay: 0s;
                    transition-delay: 0s; }
            @media only screen and (max-width: 1023px) {
              .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-top .title,
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-top .title {
                -webkit-transform: translateX(30px);
                    -ms-transform: translateX(30px);
                        transform: translateX(30px); } }
          .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-top .local-date,
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-top .local-date {
            -webkit-transform: translateX(15px);
                -ms-transform: translateX(15px);
                    transform: translateX(15px);
            -webkit-transition-delay: 0.05s;
                 -o-transition-delay: 0.05s;
                    transition-delay: 0.05s; }
            @media only screen and (max-width: 1023px) {
              .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-top .local-date,
              #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-top .local-date {
                -webkit-transform: translateX(30px);
                    -ms-transform: translateX(30px);
                        transform: translateX(30px); } }
          .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-middle:before,
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-middle:before {
            -webkit-transform: scaleX(1);
                -ms-transform: scaleX(1);
                    transform: scaleX(1);
            -webkit-transition-delay: 0.05s;
                 -o-transition-delay: 0.05s;
                    transition-delay: 0.05s; }
          .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-middle > .btn,
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-middle > .btn {
            -webkit-transform: translateY(0);
                -ms-transform: translateY(0);
                    transform: translateY(0);
            -webkit-transition-delay: 0.3s;
                 -o-transition-delay: 0.3s;
                    transition-delay: 0.3s; }
          .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:hover > .covered.image-bottom:before,
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active > .covered.image-bottom:before {
            -webkit-transform: scaleX(1);
                -ms-transform: scaleX(1);
                    transform: scaleX(1);
            -webkit-transition-delay: 0.1s;
                 -o-transition-delay: 0.1s;
                    transition-delay: 0.1s; }
          .no-touch #portfolio > .container:not(.moved-triangles) > .portfolio-slide .work > a:active:hover > .image-middle > .btn {
            -webkit-transform: translateY(0) scale(1.2);
                -ms-transform: translateY(0) scale(1.2);
                    transform: translateY(0) scale(1.2);
            -webkit-transition-delay: 0s;
                 -o-transition-delay: 0s;
                    transition-delay: 0s; }
      #portfolio > .container:not(.moved-triangles) > .portfolio-slide .slick-arrow {
        margin-top: -40px; }
      #portfolio > .container:not(.moved-triangles) > .portfolio-slide .slick-dots {
        margin-top: 30px; }
        @media only screen and (max-width: 1130px) {
          #portfolio > .container:not(.moved-triangles) > .portfolio-slide .slick-dots {
            margin: 20px 0 0; } }
        #portfolio > .container:not(.moved-triangles) > .portfolio-slide .slick-dots button:before {
          background-color: #9B9B9B; }



.portfolio-slide > .slick-arrow.slick-prev::before,
.portfolio-slide > .slick-arrow.slick-next::before {
  font-size: 30px;
  color: white; 
  display: none;}

/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  PRODUCTS
***************************************/
#products {
  overflow: hidden; }
  #products > .container {
    position: relative; }
    #products > .container > .new-products {
      position: relative;
      z-index: 1;
      margin: 60px 0 0; }
      @media only screen and (max-width: 1130px) {
        #products > .container > .new-products {
          margin: 40px 0 0; } }
     /*  #products > .container > .new-products:before {
        position: absolute;
        top: -20px;
        left: -120px;
        z-index: 0;
        width: 300px;
        height: 300px; }
        @media only screen and (max-width: 1130px) {
          #products > .container > .new-products:before {
            width: 250px;
            height: 250px;
            left: -60px; } } */
      #products > .container > .new-products > .content {
        position: relative;
        overflow: hidden;
        padding: 35px;
        background-color: #FFF;
        color: #000; }
        @media only screen and (max-width: 767px) {
          #products > .container > .new-products > .content {
            padding: 25px; } }
        #products > .container > .new-products > .content > [data-bar-color] {
          background-color: #fff;
          position: absolute;
          z-index: 0;
          top: -55px;
          left: -5px;
          width: 110%;
          height: 190px;
          -webkit-transform: rotate(4deg);
              -ms-transform: rotate(4deg);
                  transform: rotate(4deg);
          -webkit-transition: background-color 0.3s ease;
          -o-transition: background-color 0.3s ease;
          transition: background-color 0.3s ease; }
          @media only screen and (max-width: 1023px) {
            #products > .container > .new-products > .content > [data-bar-color] {
              height: 190px; } }
          @media only screen and (max-width: 767px) {
            #products > .container > .new-products > .content > [data-bar-color] {
              height: 150px; } }
          @media only screen and (max-width: 480px) {
            #products > .container > .new-products > .content > [data-bar-color] {
              height: 140px; } }
          #products > .container > .new-products > .content > [data-bar-color]:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: -10px;
            width: 300px;
            height: 100%;
            background-color: #FFF;
            -webkit-transform: skew(-20deg);
                -ms-transform: skew(-20deg);
                    transform: skew(-20deg); }
            @media only screen and (max-width: 1023px) {
              #products > .container > .new-products > .content > [data-bar-color]:before {
                width: 250px; } }
            @media only screen and (max-width: 767px) {
              #products > .container > .new-products > .content > [data-bar-color]:before {
                width: 120px; } }
        #products > .container > .new-products > .content > .new-area {
          display: block;
          width: 100%;
          font-size: 0;
          margin-bottom: 60px; }
          @media only screen and (max-width: 1023px) {
            #products > .container > .new-products > .content > .new-area {
              margin-bottom: 70px; } }
          @media only screen and (max-width: 767px) {
            #products > .container > .new-products > .content > .new-area {
              margin-bottom: 60px; } }
          @media only screen and (max-width: 480px) {
            #products > .container > .new-products > .content > .new-area {
              margin-bottom: 50px; } }
          #products > .container > .new-products > .content > .new-area > div {
            display: inline-block;
            vertical-align: middle;
            margin: 0;
            /* line-height: 0.8;  */
            line-height: 1; }
            #products > .container > .new-products > .content > .new-area > div.new-title {
              text-transform: uppercase;
              width: 55%; }
              @media only screen and (max-width: 1023px) {
                #products > .container > .new-products > .content > .new-area > div.new-title {
                  width: 230px; } }
              @media only screen and (max-width: 767px) {
                #products > .container > .new-products > .content > .new-area > div.new-title {
                  width: 95px;
                  font-size: 14px; } }
            #products > .container > .new-products > .content > .new-area > div.area-title {
              color: #000000;
              width: 45%; }
              @media only screen and (max-width: 1023px) {
                #products > .container > .new-products > .content > .new-area > div.area-title {
                  width: auto; } }
              @media only screen and (max-width: 767px) {
                #products > .container > .new-products > .content > .new-area > div.area-title {
                  font-size: 25px; } }
              #products > .container > .new-products > .content > .new-area > div.area-title:after {
                content: '';
                position: absolute;
                left: 5px;
                top: 55px;
                width: 2px;
                height: 190px;
                background-color: var(--color-primary); }
                @media only screen and (max-width: 1023px) {
                  #products > .container > .new-products > .content > .new-area > div.area-title:after {
                    display: none; } }
              #products > .container > .new-products > .content > .new-area > div.area-title span {
                display: block;
                will-change: transform;
                -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                -o-transition: transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                -webkit-transform: translateX(-100%);
                    -ms-transform: translateX(-100%);
                        transform: translateX(-100%); }
                #products > .container > .new-products > .content > .new-area > div.area-title span.active {
                  -webkit-transform: translateX(0);
                      -ms-transform: translateX(0);
                          transform: translateX(0); }
        #products > .container > .new-products > .content > .products-designation {
          position: relative;
          display: block;
          width: 100%;
          font-size: 0; }
          #products > .container > .new-products > .content > .products-designation > .products-slide {
            position: relative;
            display: block;
            width: 55%; }
            @media only screen and (max-width: 1023px) {
              #products > .container > .new-products > .content > .products-designation > .products-slide {
                width: 100%; } }
            #products > .container > .new-products > .content > .products-designation > .products-slide .product {
              -webkit-transition-duration: 0s !important;
                   -o-transition-duration: 0s !important;
                      transition-duration: 0s !important; }
              #products > .container > .new-products > .content > .products-designation > .products-slide .product.transition-delay {
                -webkit-transition-delay: 0.4s !important;
                     -o-transition-delay: 0.4s !important;
                        transition-delay: 0.4s !important; }
              #products > .container > .new-products > .content > .products-designation > .products-slide .product > a {
                display: block;
                width: 310px;
                margin: 0 auto;
                text-align: center;
                pointer-events: none; }
                @media only screen and (max-width: 480px) {
                  #products > .container > .new-products > .content > .products-designation > .products-slide .product > a {
                    width: 220px; } }
                #products > .container > .new-products > .content > .products-designation > .products-slide .product > a .image {
                  position: relative;
                  display: block;
                  width: 100%;
                  height: 240px;
                  opacity: 0;
                  margin: 0 auto;
                  -webkit-transform: translateX(15px);
                      -ms-transform: translateX(15px);
                          transform: translateX(15px);
                  will-change: opacity, transform;
                  -webkit-transition: opacity 0.2s linear, -webkit-transform 0.4s ease;
                  transition: opacity 0.2s linear, -webkit-transform 0.4s ease;
                  -o-transition: opacity 0.2s linear, transform 0.4s ease;
                  transition: opacity 0.2s linear, transform 0.4s ease;
                  transition: opacity 0.2s linear, transform 0.4s ease, -webkit-transform 0.4s ease; }
                  @media only screen and (max-width: 480px) {
                    #products > .container > .new-products > .content > .products-designation > .products-slide .product > a .image {
                      height: 160px; } }
                  #products > .container > .new-products > .content > .products-designation > .products-slide .product > a .image > img {
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    -webkit-transform: translate(-50%, 0);
                        -ms-transform: translate(-50%, 0);
                            transform: translate(-50%, 0);
                    max-width: 100%;
                    max-height: 100%;
                    font-size: 10px;
                    text-align: center;
                    color: #000000; }
                #products > .container > .new-products > .content > .products-designation > .products-slide .product > a .title {
                  display: inline-block;
                  margin: 0;
                  color: #9B9B9B;
                  will-change: transform;
                  -webkit-transition: color 0.25s linear, -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  transition: color 0.25s linear, -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  -o-transition: color 0.25s linear, transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  transition: color 0.25s linear, transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  transition: color 0.25s linear, transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  -webkit-transform: translateY(100%);
                      -ms-transform: translateY(100%);
                          transform: translateY(100%); }
                .no-touch #products > .container > .new-products > .content > .products-designation > .products-slide .product > a:hover .title,
                .no-touch #products > .container > .new-products > .content > .products-designation > .products-slide .product > a:active .title {
                  color: #000000; }
                #products > .container > .new-products > .content > .products-designation > .products-slide .product > a.active {
                  pointer-events: all; }
                  #products > .container > .new-products > .content > .products-designation > .products-slide .product > a.active .image {
                    opacity: 1;
                    -webkit-transform-origin: right center;
                        -ms-transform-origin: right center;
                            transform-origin: right center;
                    -webkit-transform: translateX(0);
                        -ms-transform: translateX(0);
                            transform: translateX(0); }
                  #products > .container > .new-products > .content > .products-designation > .products-slide .product > a.active .title {
                    -webkit-transform: translateY(0);
                        -ms-transform: translateY(0);
                            transform: translateY(0); }
                #products > .container > .new-products > .content > .products-designation > .products-slide .product > a.remove .image {
                  opacity: 0;
                  -webkit-transform-origin: left center;
                      -ms-transform-origin: left center;
                          transform-origin: left center;
                  -webkit-transform: translateX(-15px);
                      -ms-transform: translateX(-15px);
                          transform: translateX(-15px); }
          #products > .container > .new-products > .content > .products-designation > .designation {
            position: absolute;
            width: 45%;
            bottom: 10px;
            right: 0; }
            @media only screen and (max-width: 1023px) {
              #products > .container > .new-products > .content > .products-designation > .designation {
                position: relative;
                display: block;
                width: 100%;
                bottom: 0;
                text-align: center; } }
            #products > .container > .new-products > .content > .products-designation > .designation > .title {
              display: block;
              margin: 0 0 90px 25px;
              width: 70%;
              color: #000000; }
              @media only screen and (max-width: 1023px) {
                #products > .container > .new-products > .content > .products-designation > .designation > .title {
                  margin: 25px 0;
                  width: 100%; } }
            #products > .container > .new-products > .content > .products-designation > .designation > .btn {
              position: absolute;
              bottom: 0;
              left: 25px; }
              @media only screen and (max-width: 1023px) {
                #products > .container > .new-products > .content > .products-designation > .designation > .btn {
                  position: relative;
                  display: block;
                  left: 0; } }
      #products > .container > .new-products > .slick-prev-products {
        left: -90px; }
        #products > .container > .new-products > .slick-prev-products:before {
          content: "\e920"; }
        @media only screen and (max-width: 1130px) {
          #products > .container > .new-products > .slick-prev-products {
            left: -60px; } }
        @media only screen and (max-width: 768px) {
          #products > .container > .new-products > .slick-prev-products {
            display: none; } }
      #products > .container > .new-products > .slick-next-products {
        right: -90px; }
        #products > .container > .new-products > .slick-next-products:before {
          content: "\e921"; }
        @media only screen and (max-width: 1130px) {
          #products > .container > .new-products > .slick-next-products {
            right: -60px; } }
        @media only screen and (max-width: 768px) {
          #products > .container > .new-products > .slick-next-products {
            display: none; } }
    #products > .container > .products {
      position: relative;
      margin: 25px -25px 0;
      z-index: 1; }
      @media only screen and (max-width: 1023px) {
        #products > .container > .products {
          margin: 0; } }
      .text-aqua{
        color: #000!important;
      }
      .text-gray{
        color: #000!important;
      }
      .text-magenta{
        color: #000!important;
      }
      #spaces .btn-yellow{
        border-radius: 0px!important;
        background-color: var(--color-primary);
        color: #000;
        border-color: var(--color-primary);
      }
      #products > .container > .products > ul {
        width: 100%;
        height: 100%;
        display: table;
        border-collapse: separate;
        border-spacing: 25px 0; }
        @media only screen and (max-width: 1023px) {
          #products > .container > .products > ul {
            display: block;
            border-spacing: 0; } }
        #products > .container > .products > ul > li {
          position: relative;
          display: table-cell;
          vertical-align: top;
          width: 50%;
          height: 100%;
          background-color: #FFF;
          overflow: hidden; }
          @media only screen and (max-width: 1023px) {
            #products > .container > .products > ul > li {
              display: block;
              width: 100%;
              margin-top: 25px; } }
          #products > .container > .products > ul > li > a {
            position: relative;
            display: table;
            vertical-align: top;
            width: 100%;
            height: 100%;
            padding: 35px;
            text-decoration: none;
            z-index: 1;
            font-size: 0;
            border-spacing: 0;
            -webkit-box-shadow: inset 0 0 0 0 #DDDDDD;
                    box-shadow: inset 0 0 0 0 #DDDDDD;
            -webkit-transition: -webkit-box-shadow 0.3s ease;
            transition: -webkit-box-shadow 0.3s ease;
            -o-transition: box-shadow 0.3s ease;
            transition: box-shadow 0.3s ease;
            transition: box-shadow 0.3s ease, -webkit-box-shadow 0.3s ease; }
            @media only screen and (max-width: 767px) {
              #products > .container > .products > ul > li > a {
                padding: 25px; } }
            #products > .container > .products > ul > li > a > .image {
              position: relative;
              display: table-cell;
              width: 120px;
              vertical-align: middle; }
              @media only screen and (max-width: 767px) {
                #products > .container > .products > ul > li > a > .image {
                  width: 80px; } }
              #products > .container > .products > ul > li > a > .image > img {
                display: block;
                margin: 0 auto;
                max-width: 100%;
                max-height: 100%;
                font-size: 10px;
                text-align: center;
                color: #000000; }
                @media only screen and (max-width: 767px) {
                  #products > .container > .products > ul > li > a > .image > img {
                    max-height: 80px; } }
            #products > .container > .products > ul > li > a > .area-title {
              position: relative;
              display: table-cell;
              vertical-align: top;
              padding-left: 35px; }
              @media only screen and (max-width: 767px) {
                #products > .container > .products > ul > li > a > .area-title {
                  padding-left: 25px; } }
              #products > .container > .products > ul > li > a > .area-title > .area {
                color: #000;
                display: block;
                margin: 0; }
                #products > .container > .products > ul > li > a > .area-title > .area:after {
                  content: '';
                  display: block;
                  width: 50px;
                  height: 2px;
                  background-color: var(--color-primary);
                  margin: 15px 0;
                  -webkit-transform-origin: top left;
                      -ms-transform-origin: top left;
                          transform-origin: top left;
                  will-change: transform;
                  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  transition: -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  -o-transition: transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  transition: transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                  transition: transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1); }
              #products > .container > .products > ul > li > a > .area-title > .title {
                color: #FFFFFF;
                display: block;
                margin: 0;
                padding-right: 20px; }
            #products > .container > .products > ul > li > a > .btn {
              position: absolute;
              bottom: 0;
              right: 0;
              z-index: 1;
              pointer-events: none;
              -webkit-backface-visibility: hidden;
                      backface-visibility: hidden;
              -webkit-transform: translateY(100%);
                  -ms-transform: translateY(100%);
                      transform: translateY(100%);
              -webkit-transform-origin: bottom right;
                  -ms-transform-origin: bottom right;
                      transform-origin: bottom right;
              will-change: transform;
              -webkit-transition: -webkit-transform 0.3s ease;
              transition: -webkit-transform 0.3s ease;
              -o-transition: transform 0.3s ease;
              transition: transform 0.3s ease;
              transition: transform 0.3s ease, -webkit-transform 0.3s ease; }
            .no-touch #products > .container > .products > ul > li > a:hover .area:after,
            .no-touch #products > .container > .products > ul > li > a:active .area:after {
              -webkit-transform: scaleX(1.5);
                  -ms-transform: scaleX(1.5);
                      transform: scaleX(1.5); }
            .no-touch #products > .container > .products > ul > li > a:hover .btn,
            .no-touch #products > .container > .products > ul > li > a:active .btn {
              -webkit-transform: translateY(0);
                  -ms-transform: translateY(0);
                      transform: translateY(0); }
            #products > .container > .products > ul > li > a:hover:active {
              -webkit-box-shadow: inset 0 0 25px 2px #DDDDDD;
                      box-shadow: inset 0 0 25px 2px #DDDDDD; }
              #products > .container > .products > ul > li > a:hover:active .area:after {
                -webkit-transform: scaleX(1.5);
                    -ms-transform: scaleX(1.5);
                        transform: scaleX(1.5); }
              .no-touch #products > .container > .products > ul > li > a:hover:active .btn {
                -webkit-transform: translateY(0) scale(1.2);
                    -ms-transform: translateY(0) scale(1.2);
                        transform: translateY(0) scale(1.2); }
              .touch #products > .container > .products > ul > li > a:hover:active .btn {
                -webkit-transform: translateY(0);
                    -ms-transform: translateY(0);
                        transform: translateY(0); }

/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  SPACES
***************************************/
#spaces:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1; }

#spaces > .container {
  position: relative; }
  #spaces > .container > .title {
    text-align: center;
    margin: 0; }
  #spaces > .container > .spaces-slide {
    margin-top: 60px;
    position: relative; }
    @media only screen and (max-width: 1130px) {
      #spaces > .container > .spaces-slide {
        margin-top: 40px; } }
    #spaces > .container > .spaces-slide > ul {
      overflow: hidden; }
      #spaces > .container > .spaces-slide > ul .slick-list {
        margin: 0 -10px; }
      #spaces > .container > .spaces-slide > ul .slick-dots {
        margin: 50px 0 -10px; }
        @media only screen and (max-width: 1130px) {
          #spaces > .container > .spaces-slide > ul .slick-dots {
            margin-top: 30px; } }
        #spaces > .container > .spaces-slide > ul .slick-dots button:before {
          background-color: #9B9B9B; }
    #spaces > .container > .spaces-slide .slick-prev-spaces {
      left: -45px; }
      #spaces > .container > .spaces-slide .slick-prev-spaces:before {
        content: "\e920"; }
      @media only screen and (max-width: 1229px) {
        #spaces > .container > .spaces-slide .slick-prev-spaces {
          display: none; } }
    #spaces > .container > .spaces-slide .slick-next-spaces {
      right: -45px; }
      #spaces > .container > .spaces-slide .slick-next-spaces:before {
        content: "\e921"; }
      @media only screen and (max-width: 1229px) {
        #spaces > .container > .spaces-slide .slick-next-spaces {
          display: none; } }
      .text-purple{
        color: black!important;
        font-size: 30px!important;
        letter-spacing: 0px!important;
      }
      .catalog-btn:hover{
        background-color: black;
        border-color: white;       
      }
      .catalog-btn::before{
        background-color: var(--color-primary);  
      }



/* New Code 2024 */

header .logo > a > img {
    float: left;
    font-size: 12px;
    margin: 0;
    height: 64px; 
}

@media only screen and (min-width: 1131px) {
  #social > .container img {
    display: block;
    width: 46px;
    position: absolute;
    top: -140px;
    left: -80px;
  }
}


@media only screen and (max-width: 1130px) {
    #social > .container img {
      display: none;
    }
}

#social.section {
    padding-top: 100px;
}

#banners.homepage {
  background-color: transparent;
}

#banners.homepage img {
  z-index: 65;
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body:before {
  content: '';
  background-image: url(/www/assets/default/images/generic/elemento-grafico-azul.png);
  position:absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 0;
}

#products.section {
  z-index: 70;
  background-color: transparent;
}

#products.section h1 {
  color: #000000;
  background-color: transparent;
}


@media only screen and (min-width: 1023px) {
    body:before {
      top: 124px;
      right: 4vw;
    }

    #banners.homepage,
    .no-touch #banners.homepage {
      height: 400px;
      margin-top: 0;
    } 
  
    #banners.homepage img {
      width: 30%;
      max-width: 350px;
      padding-top: 100px;
    }
 
    #products > .container > .new-products {
      margin: 16px 0 0;
    }
}

@media only screen and (max-width: 1022px) {

    body:before {
        top: 90px;
        right: 4vw;
    }

    #banners.homepage {
        height: 280px;
    }

    #banners.homepage img {
        padding-bottom: 0;
        width: 25%;
    }

    #products.section {
        padding-top: 0;
    }

    #products > .container > .new-products {
        margin: 15px 0;
    }

    #products > .container > .products {
        margin: 0;
    }
}

@media only screen and (max-width: 767px) {
    body:before {
        top: 90px;
    }

    #banners.homepage {
        height: 180px;
    }

    #banners.homepage img {
        width: 160px;
    }  

    #products > .container > .products {
        margin: 0 50px;
    }
    
    #products > .container > .new-products {
        margin: 15px 50px 0;
    }
}


@media only screen and (max-width: 480px) {

    body:before {
        top: 87px;
    }

    #banners.homepage {
        height: 120px;
    }

    #banners.homepage img {
        width: 110px;
    } 

    #products.section h1 {
      font-size: 20px;
    }     
    
    #products > .container > .products {
      margin: 0 15px;
    }
    
    #products > .container > .new-products {
        margin: 15px 15px 0;
    }
}

.animation.animated {
  background-color: transparent;
}

#spaces .box-space > a:before {
  background-color: rgba(135, 204, 208, 0.3);
}

#spaces a .btn-plus.btn-yellow,
#spaces a:hover .btn-plus.btn-yellow {
    background-color: var(--color-primary);
    color: #FFFFFF;
}