/*======= Portfolio =======*/
.portfolios {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -2.5px;
  margin-right: -2.5px; }
  .portfolios .portfolio {
    width: 20%; }
    .portfolios .portfolio .portfolio__inner {
      position: relative;
      margin: 0 2.5px;
      margin-bottom: 5px; }
      .portfolios .portfolio .portfolio__inner .portfolio__image {
        position: relative; }
        .portfolios .portfolio .portfolio__inner .portfolio__image:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          height: 100%;
          width: 100%;
          z-index: 2;
          background: -webkit-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
          background: -moz-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
          background: -ms-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
          background: -o-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
          background: linear-gradient(90deg, #e51515 0%, #c60de1 100%);
          filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(229, 21, 21), endColorstr=rgb(198,13,225));
          -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgb(229, 21, 21), endColorstr=rgb(198,13,225))";
          opacity: 0.5;
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.3s ease-in-out 0s;
          -moz-transition: all 0.3s ease-in-out 0s;
          -ms-transition: all 0.3s ease-in-out 0s;
          -o-transition: all 0.3s ease-in-out 0s;
          transition: all 0.3s ease-in-out 0s; }
      .portfolios .portfolio .portfolio__inner .portfolio__content {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        padding: 20px;
        z-index: 3;
        visibility: hidden;
        opacity: 0;
        -webkit-transition: all 0.3s ease-in-out 0s;
        -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s; }
        .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio-zoom-trigger a {
          font-size: 36px;
          color: #ffffff;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -15px;
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.3s ease-in-out 0.2s;
          -moz-transition: all 0.3s ease-in-out 0.2s;
          -ms-transition: all 0.3s ease-in-out 0.2s;
          -o-transition: all 0.3s ease-in-out 0.2s;
          transition: all 0.3s ease-in-out 0.2s;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
          .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio-zoom-trigger a:hover {
            color: #ffffff;
            opacity: .9; }
        .portfolios .portfolio .portfolio__inner .portfolio__content a.cus-modal-tigger {
          font-size: 36px;
          color: #ffffff;
          position: absolute;
          left: 50%;
          top: 50%;
          margin-top: -15px;
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.3s ease-in-out 0.2s;
          -moz-transition: all 0.3s ease-in-out 0.2s;
          -ms-transition: all 0.3s ease-in-out 0.2s;
          -o-transition: all 0.3s ease-in-out 0.2s;
          transition: all 0.3s ease-in-out 0.2s;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
          .portfolios .portfolio .portfolio__inner .portfolio__content a.cus-modal-tigger:hover {
            color: #ffffff;
            opacity: .9; }
        .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text {
          display: -webkit-box;
          display: -webkit-flex;
          display: -moz-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          -webkit-justify-content: space-between;
          -moz-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          -moz-align-items: center;
          align-items: center;
          position: absolute;
          left: 20px;
          bottom: 0;
          visibility: hidden;
          opacity: 0;
          -webkit-transition: all 0.3s ease-in-out 0.2s;
          -moz-transition: all 0.3s ease-in-out 0.2s;
          -ms-transition: all 0.3s ease-in-out 0.2s;
          -o-transition: all 0.3s ease-in-out 0.2s;
          transition: all 0.3s ease-in-out 0.2s;
          width: calc( 100% - 40px ); }
          .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text h5 {
            margin-bottom: 0;
            padding-right: 15px;
            line-height: 21px;
            width: calc( 100% - 75px); }
          .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text a {
            letter-spacing: 0.1px;
            font-weight: 500;
            text-transform: uppercase;
            color: #ffffff; }
            .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text a span {
              padding-right: 5px; }
            .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text a:hover {
              color: #ffffff; }
          .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text .share__content__wrap {
            text-align: right;
            width: 75px; }
            .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text .share__content__wrap .share__content {
              right: 0;
              left: auto;
              -webkit-transform: translateX(0);
              -moz-transform: translateX(0);
              -ms-transform: translateX(0);
              -o-transform: translateX(0);
              transform: translateX(0); }
              .portfolios .portfolio .portfolio__inner .portfolio__content .portfolio__content__text .share__content__wrap .share__content:before {
                left: auto;
                right: 25px; }
      .portfolios .portfolio .portfolio__inner:hover .portfolio__image:before {
        visibility: visible;
        opacity: 0.5; }
      .portfolios .portfolio .portfolio__inner:hover .portfolio__content {
        visibility: visible;
        opacity: 1; }
        .portfolios .portfolio .portfolio__inner:hover .portfolio__content .portfolio-zoom-trigger a {
          visibility: visible;
          opacity: 1;
          margin-top: 0; }
        .portfolios .portfolio .portfolio__inner:hover .portfolio__content a.cus-modal-tigger {
          visibility: visible;
          opacity: 1;
          margin-top: 0; }
        .portfolios .portfolio .portfolio__inner:hover .portfolio__content .portfolio__content__text {
          visibility: visible;
          opacity: 1;
          bottom: 20px; }

@media only screen and (min-width: 1600px) and (max-width: 1919px) {
  .portfolios .portfolio {
    width: 20%; } }
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .portfolios .portfolio {
    width: 25%; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolios .portfolio {
    width: 33.33%; }
    .portfolios .portfolio:last-child {
      display: none; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolios .portfolio {
    width: 50%; }
    .portfolios .portfolio .portfolio__image img {
      width: 100%; } }
@media only screen and (max-width: 767px) {
  .portfolios .portfolio {
    width: 70%;
    margin-left: 15%; }
    .portfolios .portfolio .portfolio__image img {
      width: 100%; }
    .portfolios .portfolio .portfolio__inner {
      margin-bottom: 30px; }
    .portfolios .portfolio:last-child .portfolio__inner {
      margin-bottom: 0; } }
@media only screen and (max-width: 575px) {
  .portfolios .portfolio {
    width: 100%;
    margin-left: 0; } }
.portfolio-filter {
  margin-bottom: 70px; }
  .portfolio-filter button {
    display: inline-block;
    outline: none;
    border: none;
    color: #ffffff;
    margin: 0 15px;
    padding: 0 5px;
    text-transform: uppercase;
    background: transparent;
    background-color: transparent;
    letter-spacing: 1px;
    cursor: pointer;
    height: 22px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    position: relative; }
    .portfolio-filter button span {
      position: relative; }
    .portfolio-filter button:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      height: 50%;
      background: #e51515;
      width: 100%;
      -webkit-transform: scaleX(0);
      -moz-transform: scaleX(0);
      -ms-transform: scaleX(0);
      -o-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s; }
    .portfolio-filter button.is-checked:before {
      -webkit-transform: scaleX(1);
      -moz-transform: scaleX(1);
      -ms-transform: scaleX(1);
      -o-transform: scaleX(1);
      transform: scaleX(1); }
    .portfolio-filter button:hover {
      opacity: 0.8; }
    .portfolio-filter button:focus, .portfolio-filter button:active {
      outline: none;
      border: none; }

.portfolios.layout-2 {
  margin-left: -15px;
  margin-right: -15px; }
  .portfolios.layout-2 .portfolio {
    width: 33.33%; }
    .portfolios.layout-2 .portfolio .portfolio__inner {
      position: relative;
      margin: 0 15px;
      margin-bottom: 30px; }
      .portfolios.layout-2 .portfolio .portfolio__inner .portfolio__content {
        padding: 30px; }
        .portfolios.layout-2 .portfolio .portfolio__inner .portfolio__content .portfolio__content__text {
          left: 30px;
          width: calc( 100% - 60px ); }
      .portfolios.layout-2 .portfolio .portfolio__inner:hover .portfolio__content .portfolio__content__text {
        bottom: 30px; }

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-filter button {
    margin: 0 12px; }

  .portfolios.layout-2 .portfolio {
    width: 50%; } }
@media only screen and (max-width: 767px) {
  .portfolio-filter {
    text-align: center; }
    .portfolio-filter button {
      display: block;
      width: 100%;
      margin: 10px 0; }
      .portfolio-filter button span {
        display: block;
        width: 100%; }

  .portfolios.layout-2 .portfolio {
    width: calc(100% - 60px);
    margin-left: 30px;
    margin-right: 30px; }
    .portfolios.layout-2 .portfolio:last-child .portfolio__inner {
      margin-bottom: 0; } }
@media only screen and (max-width: 575px) {
  .portfolios.layout-2 .portfolio {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px; } }
.gallery-portfolios .portfolio {
  float: left;
  width: 50%;
  overflow: hidden;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -ms-transition: inherit;
  -o-transition: inherit;
  transition: inherit; }
  .gallery-portfolios .portfolio .portfolio__inner {
    position: relative; }
    .gallery-portfolios .portfolio .portfolio__inner .portfolio__image {
      cursor: pointer; }
      .gallery-portfolios .portfolio .portfolio__inner .portfolio__image img {
        max-width: 100%; }
    .gallery-portfolios .portfolio .portfolio__inner .portfolio__content {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 25px 30px;
      visibility: hidden;
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
      -webkit-transform-origin: 50% 100%;
      -moz-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
      -o-transform-origin: 50% 100%;
      transform-origin: 50% 100%;
      -webkit-transition: all 0.3s ease-in-out 0s;
      -moz-transition: all 0.3s ease-in-out 0s;
      -ms-transition: all 0.3s ease-in-out 0s;
      -o-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s; }
      .gallery-portfolios .portfolio .portfolio__inner .portfolio__content h5, .gallery-portfolios .portfolio .portfolio__inner .portfolio__content h6 {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 0;
        color: #ffffff;
        z-index: 2;
        letter-spacing: 0.1px; }
      .gallery-portfolios .portfolio .portfolio__inner .portfolio__content h5 {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px; }
        .gallery-portfolios .portfolio .portfolio__inner .portfolio__content h5 a {
          color: #ffffff; }
          .gallery-portfolios .portfolio .portfolio__inner .portfolio__content h5 a:hover {
            opacity: 0.9; }
      .gallery-portfolios .portfolio .portfolio__inner .portfolio__content h6 {
        font-size: 14px;
        font-weight: 400; }
      .gallery-portfolios .portfolio .portfolio__inner .portfolio__content:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        opacity: .5;
        left: 0;
        bottom: 0;
        background: -webkit-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
        background: -moz-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
        background: -ms-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
        background: -o-linear-gradient(90deg, #e51515 0%, #c60de1 100%);
        background: linear-gradient(90deg, #e51515 0%, #c60de1 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=rgb(229, 21, 21), endColorstr=rgb(198,13,225));
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=rgb(229, 21, 21), endColorstr=rgb(198,13,225))";
        z-index: 1; }
  .gallery-portfolios .portfolio:hover .portfolio__inner .portfolio__content {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }

@media only screen and (max-width: 767px) {
  .gallery-portfolios .portfolio {
    width: 100%; } }

/*# sourceMappingURL=portfolio.css.map */