/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  WORK
***************************************/
#work {
  padding: 0;
  overflow: hidden; }
  #work > .info {
    display: table;
    position: relative;
    margin: 60px auto; }
    @media only screen and (max-width: 1130px) {
      #work > .info {
        margin: 40px auto; } }
    @media only screen and (max-width: 1023px) {
      #work > .info {
        display: block; } }
    #work > .info > .details {
      position: relative;
      display: table-cell;
      vertical-align: top;
      width: 300px; }
      @media only screen and (max-width: 1023px) {
        #work > .info > .details {
          display: block;
          width: 100%; } }
      #work > .info > .details > ul {
        display: block;
        position: relative;
        margin-bottom: 30px; }
        #work > .info > .details > ul:before {
          position: absolute;
          top: -30px;
          left: -30px;
          z-index: 0;
          width: 100%;
          height: calc(100% + 60px);
          opacity: 0.3; }
          .msie #work > .info > .details > ul:before {
            opacity: 0.5; }
          @media only screen and (max-width: 1023px) {
            #work > .info > .details > ul:before {
              width: 60%; } }
          @media only screen and (max-width: 480px) {
            #work > .info > .details > ul:before {
              width: 80%; } }
        #work > .info > .details > ul > li {
          position: relative;
          display: block;
          z-index: 1; }
          #work > .info > .details > ul > li span[class^='eu-'] {
            display: inline-block;
            vertical-align: top;
            color: #FFD700;
            width: 20px;
            font-size: 16px;
            line-height: 2.3; }
            @media only screen and (max-width: 767px) {
              #work > .info > .details > ul > li span[class^='eu-'] {
                width: 18px;
                font-size: 14px; } }
            @media only screen and (max-width: 480px) {
              #work > .info > .details > ul > li span[class^='eu-'] {
                width: 16px;
                font-size: 12px;
                line-height: 2.5; } }
          #work > .info > .details > ul > li.client > span {
            display: block;
            margin: 20px 0; }
            @media only screen and (max-width: 480px) {
              #work > .info > .details > ul > li.client > span {
                margin: 10px 0; } }
          #work > .info > .details > ul > li.client:first-child > span {
            margin-top: 0; }
          #work > .info > .details > ul > li.client > .image {
            display: block;
            width: 120px;
            height: 120px;
            background-color: #FFFFFF;
            text-align: center; }
            #work > .info > .details > ul > li.client > .image > a,
            #work > .info > .details > ul > li.client > .image > img {
              display: block;
              position: relative;
              top: 50%;
              -webkit-transform: translateY(-50%);
                  -ms-transform: translateY(-50%);
                      transform: translateY(-50%); }
            #work > .info > .details > ul > li.client > .image > 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 #work > .info > .details > ul > li.client > .image > a:hover, #work > .info > .details > ul > li.client > .image > a:active {
                opacity: 0.5; }
            #work > .info > .details > ul > li.client > .image img {
              display: block;
              margin: 0 auto;
              font-size: 10px;
              color: #000000; }
    #work > .info > .text {
      display: table-cell;
      padding-left: 95px; }
      @media only screen and (max-width: 1023px) {
        #work > .info > .text {
          display: block;
          width: 100%;
          padding: 0; } }
      #work > .info > .text:before {
        left: 0;
        width: 65px; }
        @media only screen and (max-width: 1023px) {
          #work > .info > .text:before {
            margin-top: 65px;
            width: 100px; } }
      #work > .info > .text:first-child {
        padding-left: 125px;
        display: block;
        margin-top: -10px; }
        @media only screen and (max-width: 1023px) {
          #work > .info > .text:first-child {
            padding: 0; } }
        #work > .info > .text:first-child:before {
          left: 0; }
          @media only screen and (max-width: 1023px) {
            #work > .info > .text:first-child:before {
              margin-top: -15px; } }
      #work > .info > .text > .current-title {
        margin-top: -5px; }
        @media only screen and (max-width: 1023px) {
          #work > .info > .text > .current-title {
            margin-top: 0; } }
        #work > .info > .text > .current-title:after {
          display: none; }
  #work > .galleries {
    position: relative; }
    #work > .galleries > .gallery {
      width: 100%;
      margin-bottom: 60px; }
      @media only screen and (max-width: 1130px) {
        #work > .galleries > .gallery {
          margin-bottom: 40px; } }
      #work > .galleries > .gallery:nth-child(odd) > div {
        float: left; }
        @media only screen and (max-width: 1023px) {
          #work > .galleries > .gallery:nth-child(odd) > div {
            float: none; } }
        #work > .galleries > .gallery:nth-child(odd) > div.image {
          margin: 0 60px 0 -90px; }
          @media only screen and (max-width: 1279px) {
            #work > .galleries > .gallery:nth-child(odd) > div.image {
              margin-left: 0; } }
          @media only screen and (max-width: 1130px) {
            #work > .galleries > .gallery:nth-child(odd) > div.image {
              margin-right: 40px; } }
          @media only screen and (max-width: 1023px) {
            #work > .galleries > .gallery:nth-child(odd) > div.image {
              margin: 0; } }
        #work > .galleries > .gallery:nth-child(odd) > div.products > .title:after {
          left: -100%; }
      #work > .galleries > .gallery:nth-child(even) > div {
        float: right; }
        @media only screen and (max-width: 1023px) {
          #work > .galleries > .gallery:nth-child(even) > div {
            float: none; } }
        #work > .galleries > .gallery:nth-child(even) > div.image {
          margin: 0 -90px 0 60px; }
          @media only screen and (max-width: 1279px) {
            #work > .galleries > .gallery:nth-child(even) > div.image {
              margin-right: 0; } }
          @media only screen and (max-width: 1130px) {
            #work > .galleries > .gallery:nth-child(even) > div.image {
              margin-left: 40px; } }
          @media only screen and (max-width: 1023px) {
            #work > .galleries > .gallery:nth-child(even) > div.image {
              margin: 0; } }
        #work > .galleries > .gallery:nth-child(even) > div.products > .title:after {
          right: -100%; }
          @media only screen and (max-width: 1023px) {
            #work > .galleries > .gallery:nth-child(even) > div.products > .title:after {
              right: auto;
              left: -100%; } }
      #work > .galleries > .gallery > .image {
        display: block;
        position: relative;
        z-index: 2;
        font-size: 0;
        width: calc(100% - 250px); }
        @media only screen and (max-width: 1279px) {
          #work > .galleries > .gallery > .image {
            width: calc(100% - 310px); } }
        @media only screen and (max-width: 1130px) {
          #work > .galleries > .gallery > .image {
            width: calc(100% - 290px); } }
        @media only screen and (max-width: 1023px) {
          #work > .galleries > .gallery > .image {
            width: 100vw;
            left: -30px; } }
        @media only screen and (max-width: 768px) {
          #work > .galleries > .gallery > .image {
            left: -15px; } }
        #work > .galleries > .gallery > .image > .points-area {
          position: relative;
          display: inline-block; }
          #work > .galleries > .gallery > .image > .points-area > img {
            max-width: 100%;
            font-size: 10px;
            line-height: 1.8; }
            @media only screen and (max-width: 1023px) {
              #work > .galleries > .gallery > .image > .points-area > img {
                width: 100vw;
                max-width: none; } }
          #work > .galleries > .gallery > .image > .points-area > .points-container {
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% - 60px);
            height: calc(100% - 60px); }
            @media only screen and (max-width: 480px) {
              #work > .galleries > .gallery > .image > .points-area > .points-container {
                width: calc(100% - 40px);
                height: calc(100% - 40px); } }
            #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point {
              position: absolute;
              background-color: #000000;
              color: #FFFFFF;
              width: 50px;
              height: 50px;
              font-size: 22px;
              line-height: 50px;
              text-align: center;
              text-decoration: none;
              display: none; }
              @media only screen and (max-width: 1130px) {
                #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point {
                  width: 40px;
                  height: 40px;
                  font-size: 18px;
                  line-height: 40px; } }
              @media only screen and (max-width: 767px) {
                #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point {
                  width: 30px;
                  height: 30px;
                  font-size: 14px;
                  line-height: 30px; } }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-left > .btn-plus {
                right: -15px; }
                @media only screen and (max-width: 1130px) {
                  #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-left > .btn-plus {
                    right: -10px; } }
                @media only screen and (max-width: 767px) {
                  #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-left > .btn-plus {
                    right: -5px; } }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-left > .product {
                right: -145px;
                -webkit-transform-origin: bottom left;
                    -ms-transform-origin: bottom left;
                        transform-origin: bottom left; }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-right > .btn-plus {
                left: -15px; }
                @media only screen and (max-width: 1130px) {
                  #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-right > .btn-plus {
                    left: -10px; } }
                @media only screen and (max-width: 767px) {
                  #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-right > .btn-plus {
                    left: -5px; } }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.align-right > .product {
                left: -145px;
                -webkit-transform-origin: bottom right;
                    -ms-transform-origin: bottom right;
                        transform-origin: bottom right; }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .number {
                position: relative;
                display: block;
                z-index: 1; }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .btn-plus {
                position: absolute;
                pointer-events: none;
                bottom: -5px;
                padding: 0;
                line-height: 0;
                -webkit-backface-visibility: hidden;
                        backface-visibility: hidden;
                will-change: transform;
                -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: -webkit-transform 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
                -o-transition: transform 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: transform 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: transform 0.3s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.3s cubic-bezier(0.58, 0.3, 0.005, 1); }
                #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .btn-plus > span {
                  opacity: 1;
                  will-change: opacity;
                  -webkit-transition: opacity 0.1s linear;
                  -o-transition: opacity 0.1s linear;
                  transition: opacity 0.1s linear; }
                @media only screen and (max-width: 1130px) {
                  #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .btn-plus {
                    width: 20px;
                    height: 20px; }
                    #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .btn-plus > span {
                      -webkit-transform: scale(0.8);
                          -ms-transform: scale(0.8);
                              transform: scale(0.8); } }
                @media only screen and (max-width: 767px) {
                  #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .btn-plus {
                    width: 14px;
                    height: 14px; }
                    #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .btn-plus > span {
                      -webkit-transform: scale(0.6);
                          -ms-transform: scale(0.6);
                              transform: scale(0.6); } }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .product {
                position: absolute;
                bottom: 0;
                width: 150px;
                text-transform: none;
                visibility: hidden;
                opacity: 0;
                -webkit-transform: scale(0);
                    -ms-transform: scale(0);
                        transform: scale(0);
                will-change: opacity, transform;
                -webkit-transition: visibility 0s linear 0.4s, opacity 0.2s linear, -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: visibility 0s linear 0.4s, opacity 0.2s linear, -webkit-transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                -o-transition: visibility 0s linear 0.4s, opacity 0.2s linear, transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: visibility 0s linear 0.4s, opacity 0.2s linear, transform 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
                transition: visibility 0s linear 0.4s, opacity 0.2s 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); }
                #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point > .product .btn-plus > span:before {
                  content: '\e900'; }
              #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:hover, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:active, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.hovered {
                z-index: 2;
                display: block; }
                #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:hover > .btn-plus, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:active > .btn-plus, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.hovered > .btn-plus {
                  -webkit-transform: rotate(90deg);
                      -ms-transform: rotate(90deg);
                          transform: rotate(90deg); }
                  #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:hover > .btn-plus > span, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:active > .btn-plus > span, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.hovered > .btn-plus > span {
                    opacity: 0; }
                #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:hover > .product, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point:active > .product, #work > .galleries > .gallery > .image > .points-area > .points-container > a.product-point.hovered > .product {
                  visibility: visible;
                  opacity: 1;
                  -webkit-transition-delay: 0s;
                       -o-transition-delay: 0s;
                          transition-delay: 0s;
                  -webkit-transform: scale(1);
                      -ms-transform: scale(1);
                          transform: scale(1); }
      #work > .galleries > .gallery > .products {
        display: block;
        position: relative;
        z-index: 1;
        width: 280px;
        margin-top: 20px; }
        @media only screen and (max-width: 1279px) {
          #work > .galleries > .gallery > .products {
            width: 250px; } }
        @media only screen and (max-width: 1023px) {
          #work > .galleries > .gallery > .products {
            width: 100%; } }
        #work > .galleries > .gallery > .products > .title {
          position: relative;
          display: inline-block;
          margin: 0; }
          #work > .galleries > .gallery > .products > .title:after {
            content: '';
            position: absolute;
            bottom: -5px;
            width: 200%;
            height: 2px;
            background-color: #6DCDB8; }
        #work > .galleries > .gallery > .products > ul.list {
          display: block;
          margin-top: 5px; }
          #work > .galleries > .gallery > .products > ul.list > li {
            position: relative;
            font-size: 0; }
            #work > .galleries > .gallery > .products > ul.list > li > .area {
              display: block;
              font-family: "Questrial", sans-serif !important;
              margin: 20px 0 0; }
              #work > .galleries > .gallery > .products > ul.list > li > .area:before {
                font-family: "europalco", sans-serif;
                color: #9B9B9B;
                font-size: 25px;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px; }
                @media only screen and (max-width: 767px) {
                  #work > .galleries > .gallery > .products > ul.list > li > .area:before {
                    font-size: 20px; } }
              #work > .galleries > .gallery > .products > ul.list > li > .area + a {
                margin-top: 3px; }
            #work > .galleries > .gallery > .products > ul.list > li > a {
              display: inline-block;
              margin-top: 8px;
              font-size: 16px;
              max-width: 100%;
              overflow: hidden;
              -o-text-overflow: ellipsis;
                 text-overflow: ellipsis;
              white-space: nowrap; }
              @media only screen and (max-width: 767px) {
                #work > .galleries > .gallery > .products > ul.list > li > a {
                  font-size: 14px; } }
        #work > .galleries > .gallery > .products > .no-results {
          display: block;
          font-size: 16px;
          margin-top: 20px;
          line-height: 1.6; }
          @media only screen and (max-width: 767px) {
            #work > .galleries > .gallery > .products > .no-results {
              font-size: 14px; } }