/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  ABOUT US
***************************************/
#aboutUs {
  padding: 0;
  overflow: hidden; }
  #aboutUs > .breadcrumbs-share {
    margin-bottom: 50px;
    text-align: center; }
    @media only screen and (max-width: 1130px) {
      #aboutUs > .breadcrumbs-share {
        margin-bottom: 35px; } }
  #aboutUs > .title {
    position: relative;
    padding-left: 15px;
    font-size: 50pt;
    z-index: 1; }
    #aboutUs > .title:before {
      position: absolute;
      top: -20px;
      left: -40px;
      z-index: 0;
      width: 250px;
      height: 250px;
      opacity: 0.3; }
      .msie #aboutUs > .title:before {
        opacity: 0.5; }
      @media only screen and (max-width: 1130px) {
        #aboutUs > .title:before {
          width: 200px;
          height: 200px;
          left: 0; } }
    #aboutUs > .title > .current-title {
      position: relative;
      display: inline-block;
      top: -10px; 
      font-size: 40pt;}
      @media only screen and (max-width: 991px) {
        #aboutUs > .title > .current-title {
          top: 0; } }
      #aboutUs > .title > .current-title:after {
        position: absolute;
        bottom: -15px;
        right: -80px;
        width: 100px;
        background-color: #000; }
        @media only screen and (max-width: 1024px) {
          #aboutUs > .title > .current-title:after {
            right: -65px; } }
        @media only screen and (max-width: 991px) {
          #aboutUs > .title > .current-title:after {
            position: relative;
            bottom: -22px;
            right: 0; } }


@media (min-width: 1130px) {
  .images-about-us{
    width: 20%;
    display: inline-table;
    font-size: 20px;
    text-align: center;
    letter-spacing: 10px;
    text-transform: uppercase;
    margin-right: 50px;
  }
  
  .about-us-text-images{
    color:#FFFFFF;
    font-size: 20pt;
    margin-bottom: 100px;
  }
}
@media (max-width: 1130px) {
.images-about-us{
  width: 30%;
  display: inline-table;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  margin-right: 50px;
}
.about-us-text-images{
  color:#FFFFFF;
  font-size: 20pt;
  margin-bottom: 50px;
  display: inline-table;
}
}
  .about-us-images{
    width: 100%;
  }
  .content-about-us{
    font-size: 13pt;
    width: 23%;
    display: inline-grid;
    margin-right: 10%;
  }

  @media only screen and (max-width: 1130px){
  .content-about-us {
    width: 100%;
    display: block;
    margin-top: 50px;
  }

  }

  #aboutUs > .intro {
    font-size: 20pt;
    padding-left: 15px;
    display: block;
    margin-top: -10px; 
  }
    @media only screen and (max-width: 991px) {
      #aboutUs > .intro {
        margin-top: 6px; } }
  #aboutUs > .about,
  #aboutUs > .services,
  #aboutUs > .gallery,
  #aboutUs > .solutions,
  #aboutUs > .work {
    position: relative;
    margin-top: 200px;
    display: block;
    margin-bottom: 60px; }
    @media only screen and (max-width: 1130px) {
      #aboutUs > .about,
      #aboutUs > .services,
      #aboutUs > .gallery,
      #aboutUs > .solutions,
      #aboutUs > .work {
        margin-bottom: 40px; } }
    #aboutUs > .about:before,
    #aboutUs > .services:before,
    #aboutUs > .gallery:before,
    #aboutUs > .solutions:before,
    #aboutUs > .work:before {
      position: absolute;
      top: -20px;
      left: -40px;
      z-index: 0;
      width: 250px;
      height: 250px;
      opacity: 0.3; }
      .msie #aboutUs > .about:before, .msie
      #aboutUs > .services:before, .msie
      #aboutUs > .gallery:before, .msie
      #aboutUs > .solutions:before, .msie
      #aboutUs > .work:before {
        opacity: 0.5; }
      @media only screen and (max-width: 1130px) {
        #aboutUs > .about:before,
        #aboutUs > .services:before,
        #aboutUs > .gallery:before,
        #aboutUs > .solutions:before,
        #aboutUs > .work:before {
          width: 200px;
          height: 200px;
          left: 0; } }
    #aboutUs > .about .subtitle,
    #aboutUs > .services .subtitle,
    #aboutUs > .gallery .subtitle,
    #aboutUs > .solutions .subtitle,
    #aboutUs > .work .subtitle {
      display: table;
      color: #9B9B9B;
      margin: 0 0 5px; }
      #aboutUs > .about .subtitle:after,
      #aboutUs > .services .subtitle:after,
      #aboutUs > .gallery .subtitle:after,
      #aboutUs > .solutions .subtitle:after,
      #aboutUs > .work .subtitle:after {
        width: 50%;
        margin-top: 5px; }
    #aboutUs > .about .title,
    #aboutUs > .services .title,
    #aboutUs > .gallery .title,
    #aboutUs > .solutions .title,
    #aboutUs > .work .title {
      display: block;
      margin: 0 0 15px; }
  #aboutUs > .about {
    padding-left: 15px;
    margin-bottom: 160px; }
    @media only screen and (max-width: 1130px) {
      #aboutUs > .about {
        margin-bottom: 120px; } }
    #aboutUs > .about > .content {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      max-width: 1130px;
      font-size: 0; }
      #aboutUs > .about > .content > .text {
        font-size: 20pt;
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 100%;
        padding-right: 60px; }
        @media only screen and (max-width: 1130px) {
          #aboutUs > .about > .content > .text {
            padding-right: 40px; } }
        @media only screen and (max-width: 1023px) {
          #aboutUs > .about > .content > .text {
            display: block;
            width: 100%;
            padding: 0;
            margin-bottom: 40px; } }
        @media only screen and (max-width: 767px) {
          #aboutUs > .about > .content > .text {
            font-size: 16px; } }
      #aboutUs > .about > .content > .image-1 {
        position: relative;
        display: inline-block;
        vertical-align: bottom;
        width: 40%;
        height: 250px; }
        @media only screen and (max-width: 1023px) {
          #aboutUs > .about > .content > .image-1 {
            display: block;
            width: 100%; } }
        @media only screen and (max-width: 480px) {
          #aboutUs > .about > .content > .image-1 {
            height: 200px; } }
    #aboutUs > .about > .images {
      position: relative;
      z-index: 2;
      display: block;
      width: 100%;
      font-size: 0;
      margin-top: 20px; }
      #aboutUs > .about > .images > div {
        position: relative;
        display: inline-block;
        vertical-align: top;
        width: 40%;
        height: 250px; }
        @media only screen and (max-width: 767px) {
          #aboutUs > .about > .images > div {
            display: block;
            width: 100%; } }
        @media only screen and (max-width: 480px) {
          #aboutUs > .about > .images > div {
            height: 200px; } }
        #aboutUs > .about > .images > div.image-3 {
          width: calc(60% - 20px);
          margin-right: 20px; }
          @media only screen and (max-width: 767px) {
            #aboutUs > .about > .images > div.image-3 {
              display: block;
              width: 100%;
              margin: 0 0 20px; } }
    #aboutUs > .about > .background {
      display: block;
      position: relative; }
      #aboutUs > .about > .background > span {
        position: absolute;
        bottom: -60px;
        left: -90px;
        z-index: 1;
        opacity: 0.2;
        width: 80%;
        height: 250px; }
        @media only screen and (max-width: 1279px) {
          #aboutUs > .about > .background > span {
            left: -40px; } }
        @media only screen and (max-width: 1130px) {
          #aboutUs > .about > .background > span {
            bottom: -40px;
            left: -25px; } }
        @media only screen and (max-width: 480px) {
          #aboutUs > .about > .background > span {
            height: 200px; } }
        #aboutUs > .about > .background > span:before {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%; }
  #aboutUs > .services:before {
    top: -40px; }
  #aboutUs > .services > .content {
    position: relative;
    display: table;
    width: 100%;
    z-index: 2; }
    @media only screen and (max-width: 1023px) {
      #aboutUs > .services > .content {
        display: block; } }
    #aboutUs > .services > .content > .title,
    #aboutUs > .services > .content > .text {
      position: relative;
      display: table-cell;
      vertical-align: top;
      white-space: nowrap; }
      @media only screen and (max-width: 1023px) {
        #aboutUs > .services > .content > .title,
        #aboutUs > .services > .content > .text {
          display: block;
          width: 100%;
          white-space: normal; } }
    #aboutUs > .services > .content > .text {
      padding: 30px 0 0 60px;
      white-space: normal; }
      @media only screen and (max-width: 1130px) {
        #aboutUs > .services > .content > .text {
          padding-left: 40px; } }
      @media only screen and (max-width: 1023px) {
        #aboutUs > .services > .content > .text {
          padding: 0; } }
  #aboutUs > .solutions:before {
    top: 110px;
    left: 250px;
    width: 300px;
    height: 300px; }
    @media only screen and (max-width: 1023px) {
      #aboutUs > .solutions:before {
        left: -40px; } }
    @media only screen and (max-width: 767px) {
      #aboutUs > .solutions:before {
        top: 85px;
        width: 250px;
        height: 250px; } }
    @media only screen and (max-width: 480px) {
      #aboutUs > .solutions:before {
        width: 200px;
        height: 200px; } }
  #aboutUs > .solutions > .content {
    position: relative;
    display: table;
    width: 100%;
    z-index: 2; }
    @media only screen and (max-width: 1023px) {
      #aboutUs > .solutions > .content {
        display: block; } }
    #aboutUs > .solutions > .content > .title,
    #aboutUs > .solutions > .content > .text {
      position: relative;
      display: table-cell;
      vertical-align: top;
      white-space: nowrap; }
      @media only screen and (max-width: 1023px) {
        #aboutUs > .solutions > .content > .title,
        #aboutUs > .solutions > .content > .text {
          display: block;
          width: 100%;
          white-space: normal; } }
    #aboutUs > .solutions > .content > .text {
      padding: 30px 0 0 60px;
      white-space: normal; }
      @media only screen and (max-width: 1130px) {
        #aboutUs > .solutions > .content > .text {
          padding-left: 40px; } }
      @media only screen and (max-width: 1023px) {
        #aboutUs > .solutions > .content > .text {
          padding: 0; } }
  #aboutUs > .solutions > ul.services {
    position: relative;
    z-index: 1;
    margin: 20px -10px 0;
    font-size: 0; }
    #aboutUs > .solutions > ul.services > li {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin: 20px 10px 0;
      padding: 0;
      width: calc(20% - 20px);
      height: 170px;
      background-color: #FFFFFF; }
      @media only screen and (max-width: 1129px) {
        #aboutUs > .solutions > ul.services > li {
          width: calc(25% - 20px); } }
      @media only screen and (max-width: 1023px) {
        #aboutUs > .solutions > ul.services > li {
          width: calc(33.33% - 20px); } }
      @media only screen and (max-width: 767px) {
        #aboutUs > .solutions > ul.services > li {
          width: calc(50% - 20px); } }
      #aboutUs > .solutions > ul.services > li > .icon {
        width: 80px;
        height: 80px;
        display: block;
        margin: 25px auto 10px;
        border-radius: 100%;
        border: 2px solid #DDDDDD;
        text-align: center;
        font-size: 0; }
        #aboutUs > .solutions > ul.services > li > .icon > img {
          position: relative;
          display: block;
          top: 50%;
          -webkit-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
                  transform: translateY(-50%);
          margin: 0 auto;
          padding: 15px;
          max-width: 100%;
          font-size: 10px; }
      #aboutUs > .solutions > ul.services > li > .title {
        display: block;
        color: #9B9B9B;
        font-size: 14px;
        text-align: center;
        margin: 0;
        line-height: 1.2;
        padding: 0 15px; }
  #aboutUs > .work {
    margin-bottom: 120px; }
    @media only screen and (max-width: 1130px) {
      #aboutUs > .work {
        margin-bottom: 80px; } }
    @media only screen and (max-width: 1023px) {
      #aboutUs > .work {
        margin-bottom: 40px; } }
    #aboutUs > .work:before {
      top: 110px;
      left: 250px;
      width: 300px;
      height: 300px; }
      @media only screen and (max-width: 1023px) {
        #aboutUs > .work:before {
          left: -40px; } }
      @media only screen and (max-width: 767px) {
        #aboutUs > .work:before {
          top: 85px;
          width: 250px;
          height: 250px; } }
      @media only screen and (max-width: 480px) {
        #aboutUs > .work:before {
          width: 200px;
          height: 200px; } }
    #aboutUs > .work > .content {
      position: relative;
      display: table;
      width: 100%;
      z-index: 2; }
      @media only screen and (max-width: 1023px) {
        #aboutUs > .work > .content {
          display: block; } }
      #aboutUs > .work > .content > .title,
      #aboutUs > .work > .content > .text {
        position: relative;
        display: table-cell;
        vertical-align: top;
        white-space: nowrap; }
        @media only screen and (max-width: 1023px) {
          #aboutUs > .work > .content > .title,
          #aboutUs > .work > .content > .text {
            display: block;
            width: 100%;
            white-space: normal; } }
      #aboutUs > .work > .content > .text {
        padding: 30px 0 0 60px;
        white-space: normal; }
        @media only screen and (max-width: 1130px) {
          #aboutUs > .work > .content > .text {
            padding-left: 40px; } }
        @media only screen and (max-width: 1023px) {
          #aboutUs > .work > .content > .text {
            padding: 0; } }
      #aboutUs > .work > .content .image {
        position: absolute;
        left: -90px;
        bottom: -60px;
        width: 110%;
        height: 350px; }
        @media only screen and (max-width: 1279px) {
          #aboutUs > .work > .content .image {
            left: -40px;
            width: 100%; } }
        @media only screen and (max-width: 1130px) {
          #aboutUs > .work > .content .image {
            bottom: -40px;
            left: -25px;
            width: 90%;
            height: 320px; } }
        @media only screen and (max-width: 1023px) {
          #aboutUs > .work > .content .image {
            position: relative;
            left: 0;
            bottom: 0;
            width: 100%;
            margin: 20px 0; } }
        @media only screen and (max-width: 480px) {
          #aboutUs > .work > .content .image {
            height: 200px; } }


#aboutUs > .breadcrumbs-share img {
    padding: 100px 0 60px 0;
}