/***************************************
  BREAKS
***************************************/
/***************************************
  FONTS
***************************************/
/***************************************
  COLORS
***************************************/
/***************************************
  ANIMATION
***************************************/
/***************************************
  PORTFOLIO
***************************************/
#portfolio {
  padding: 0;
  overflow: hidden; }
  #portfolio > .header {
    margin-bottom: 45px; }
    @media only screen and (max-width: 1130px) {
      #portfolio > .header {
        margin-bottom: 35px; } }
    #portfolio > .header > .title {
      float: left;
      display: inline-block; }
      @media only screen and (max-width: 767px) {
        #portfolio > .header > .title {
          float: none; } }
    #portfolio > .header > .filters {
      float: right; }
      @media only screen and (max-width: 767px) {
        #portfolio > .header > .filters {
          float: none; } }
      #portfolio > .header > .filters > span {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        color: #9B9B9B; }
        @media only screen and (max-width: 767px) {
          #portfolio > .header > .filters > span {
            display: none; } }
      #portfolio > .header > .filters > .select-box {
        width: 300px;
        margin-left: 20px;
        display: inline-block; }
        @media only screen and (max-width: 767px) {
          #portfolio > .header > .filters > .select-box {
            margin: 35px 0 0;
            width: 100%;
            display: block; } }
  #portfolio > .list {
    display: block;
    width: 100%;
    font-size: 0;
    padding: 60px 0 40px; }
    @media only screen and (max-width: 1130px) {
      #portfolio > .list {
        padding: 40px 0 20px; } }
    #portfolio > .list > .works {
      position: relative; }
      #portfolio > .list > .works > .loader-works {
        z-index: 1;
        left: 50%;
        margin-left: -17px; }
      #portfolio > .list > .works > .works-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); }
        #portfolio > .list > .works > .works-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); }
        #portfolio > .list > .works > .works-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) {
            #portfolio > .list > .works > .works-list > ul {
              margin: 0; } }
          #portfolio > .list > .works > .works-list > ul > li {
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin: 0 10px 20px;
            width: calc(33.33% - 20px); }
            @media only screen and (max-width: 1023px) {
              #portfolio > .list > .works > .works-list > ul > li {
                width: calc(50% - 20px); } }
            @media only screen and (max-width: 480px) {
              #portfolio > .list > .works > .works-list > ul > li {
                width: 100%;
                margin: 0 0 20px; } }
            #portfolio > .list > .works > .works-list > ul > li > .content {
              position: relative; }
              #portfolio > .list > .works > .works-list > ul > li > .content > a {
                display: block;
                width: 100%;
                text-decoration: none;
                overflow: hidden; }
                #portfolio > .list > .works > .works-list > ul > li > .content > a:before, #portfolio > .list > .works > .works-list > ul > li > .content > a: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 > .list > .works > .works-list > ul > li > .content > a:after {
                  z-index: 0;
                  -webkit-transform: scaleX(1);
                      -ms-transform: scaleX(1);
                          transform: scaleX(1);
                  background-color: rgba(0, 0, 0, 0.2);
                  will-change: unset;
                  -webkit-transition: none;
                  -o-transition: none;
                  transition: none; }
                #portfolio > .list > .works > .works-list > ul > li > .content > a.size-xs {
                  height: 300px; }
                #portfolio > .list > .works > .works-list > ul > li > .content > a.size-sm {
                  height: 350px; }
                #portfolio > .list > .works > .works-list > ul > li > .content > a.size-md {
                  height: 450px; }
                #portfolio > .list > .works > .works-list > ul > li > .content > a.size-lg {
                  height: 500px; }
                #portfolio > .list > .works > .works-list > ul > li > .content > a.size-xlg {
                  height: 550px; }
                @media only screen and (max-width: 480px) {
                  #portfolio > .list > .works > .works-list > ul > li > .content > a.size-xs, #portfolio > .list > .works > .works-list > ul > li > .content > a.size-sm, #portfolio > .list > .works > .works-list > ul > li > .content > a.size-md, #portfolio > .list > .works > .works-list > ul > li > .content > a.size-lg, #portfolio > .list > .works > .works-list > ul > li > .content > a.size-xlg {
                    height: 300px; } }
                #portfolio > .list > .works > .works-list > ul > li > .content > a > .content {
                  position: absolute;
                  z-index: 2;
                  bottom: 35px;
                  left: 0;
                  padding-right: 60px; }
                  @media only screen and (max-width: 768px) {
                    #portfolio > .list > .works > .works-list > ul > li > .content > a > .content {
                      bottom: 25px; } }
                  #portfolio > .list > .works > .works-list > ul > li > .content > a > .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 > .list > .works > .works-list > ul > li > .content > a > .content > .local {
                    -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 > .list > .works > .works-list > ul > li > .content > a > .btn {
                  position: absolute;
                  bottom: 0;
                  right: 0;
                  z-index: 2;
                  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; }
                .no-touch #portfolio > .list > .works > .works-list > ul > li > .content > a:hover:before, #portfolio > .list > .works > .works-list > ul > li > .content > a:active:before {
                  -webkit-transform: scaleX(1);
                      -ms-transform: scaleX(1);
                          transform: scaleX(1); }
                .no-touch #portfolio > .list > .works > .works-list > ul > li > .content > a:hover .title, #portfolio > .list > .works > .works-list > ul > li > .content > a:active .title {
                  -webkit-transform: translateX(15px);
                      -ms-transform: translateX(15px);
                          transform: translateX(15px);
                  -webkit-transition-delay: 0s;
                       -o-transition-delay: 0s;
                          transition-delay: 0s; }
                .no-touch #portfolio > .list > .works > .works-list > ul > li > .content > a:hover .local, #portfolio > .list > .works > .works-list > ul > li > .content > a:active .local {
                  -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; }
                .no-touch #portfolio > .list > .works > .works-list > ul > li > .content > a:hover .btn, #portfolio > .list > .works > .works-list > ul > li > .content > a:active .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 > .list > .works > .works-list > ul > li > .content > a:active:hover .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 > .list > .works > .works-list > .loader-list {
          top: auto;
          bottom: -20px;
          left: 50%;
          margin-left: -17px; }
          @media only screen and (max-width: 1129px) {
            #portfolio > .list > .works > .works-list > .loader-list {
              bottom: -10px; } }
      #portfolio > .list > .works > .btn-view-more {
        display: table !important; }
        @media only screen and (max-width: 1129px) {
          #portfolio > .list > .works > .btn-view-more {
            margin-top: 10px; } }
        #portfolio > .list > .works > .btn-view-more.hide {
          display: none !important; }

.select2 .select2-selection--single {
  background-color: #f9f9f9 !important; }

.select2-dropdown > .select2-results > ul.select2-results__options > li.select2-results__option {
  color: #767676 !important;
  font-size: 20px; }

.select2-selection.select2-selection--single {
  background: none; }

.select2-selection__rendered {
  font-size: 20px !important;
  margin-left: 0px !important; }