/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  SPACES
***************************************/
#spaces {
  padding: 0;
  overflow: hidden; }
  #spaces > .header {
    margin-bottom: 55px; }
    @media only screen and (max-width: 1130px) {
      #spaces > .header {
        margin-bottom: 45px; } }
    @media only screen and (max-width: 767px) {
      #spaces > .header {
        margin-bottom: 35px; } }
    #spaces > .header > .title {
      display: inline-block; }
  #spaces > .list {
    display: block;
    width: 100%;
    font-size: 0;
    padding: 60px 0 40px; }
    @media only screen and (max-width: 1130px) {
      #spaces > .list {
        padding: 40px 0 20px; } }
    #spaces > .list > .spaces {
      position: relative; }
      #spaces > .list > .spaces > .loader-spaces {
        z-index: 1;
        left: 50%;
        margin-left: -17px; }
        .bg-soft-ghost {
          background-color: #000;
          color: white;
        }
      #spaces > .list > .spaces > .spaces-list {
        position: relative;
        min-height: 65vh;
        opacity: 0;
        -webkit-transform: translateY(100px);
            -ms-transform: translateY(100px);
                transform: translateY(100px);
        will-change: opacity, transform;
        -webkit-transition: opacity 0.2s linear, min-height 0.3s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
        transition: opacity 0.2s linear, min-height 0.3s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
        -o-transition: opacity 0.2s linear, transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1), min-height 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
        transition: opacity 0.2s linear, transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1), min-height 0.3s cubic-bezier(0.58, 0.3, 0.005, 1);
        transition: opacity 0.2s linear, transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1), min-height 0.3s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1); }
        #spaces > .list > .spaces > .spaces-list.active {
          opacity: 1;
          -webkit-transform: translateY(0);
              -ms-transform: translateY(0);
                  transform: translateY(0);
          -webkit-transition: opacity 0.2s linear, min-height 0.8s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
          transition: opacity 0.2s linear, min-height 0.8s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
          -o-transition: opacity 0.2s linear, transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1), min-height 0.8s cubic-bezier(0.58, 0.3, 0.005, 1);
          transition: opacity 0.2s linear, transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1), min-height 0.8s cubic-bezier(0.58, 0.3, 0.005, 1);
          transition: opacity 0.2s linear, transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1), min-height 0.8s cubic-bezier(0.58, 0.3, 0.005, 1), -webkit-transform 0.6s cubic-bezier(0.58, 0.3, 0.005, 1); }
        #spaces > .list > .spaces > .spaces-list > ul {
          position: relative;
          z-index: 1;
          margin: 0 -10px;
          -webkit-transition: height 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
          -o-transition: height 0.6s cubic-bezier(0.58, 0.3, 0.005, 1);
          transition: height 0.6s cubic-bezier(0.58, 0.3, 0.005, 1); }
          @media only screen and (max-width: 480px) {
            #spaces > .list > .spaces > .spaces-list > ul {
              margin: 0; } }
          #spaces > .list > .spaces > .spaces-list > ul > li {
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin: 0 10px 20px;
            padding: 0;
            width: calc(33.33% - 20px); }
            @media only screen and (max-width: 1023px) {
              #spaces > .list > .spaces > .spaces-list > ul > li {
                width: calc(50% - 20px); } }
            @media only screen and (max-width: 480px) {
              #spaces > .list > .spaces > .spaces-list > ul > li {
                width: 100%;
                margin: 0 0 20px; } }
        #spaces > .list > .spaces > .spaces-list > .loader-list {
          top: auto;
          bottom: -20px;
          left: 50%;
          margin-left: -17px; }
          @media only screen and (max-width: 1129px) {
            #spaces > .list > .spaces > .spaces-list > .loader-list {
              bottom: -10px; } }
      #spaces > .list > .spaces > .btn-view-more {
        display: table !important; }
        @media only screen and (max-width: 1129px) {
          #spaces > .list > .spaces > .btn-view-more {
            margin-top: 10px; } }
        #spaces > .list > .spaces > .btn-view-more.hide {
          display: none !important; }


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

#worksSlider .slick-list .work a .btn-plus.btn-aqua,
#worksSlider .slick-list .work a:hover .btn-plus.btn-aqua {
    background-color: var(--color-primary);
}

#worksSlider > .container:not(.moved-triangles) > ul.works-slider > .slick-list li.work > a > .covered:before {
    background-color: rgba(135, 204, 208, 0.3);
}