/************************************************************************
*  Portfolio css
************************************************************************/

/*Portfoloio element start*/

@font-face {
    font-family: 'lightcase';
    src: url('../fonts/lightcase.eot?55356177');
    src: url('../fonts/lightcase.eot?55356177#iefix') format('embedded-opentype'), url('../fonts/lightcase.woff?55356177') format('woff'), url('../fonts/lightcase.ttf?55356177') format('truetype'), url('../fonts/lightcase.svg?55356177#lightcase') format('svg');
    font-weight: normal;
    font-style: normal;
  }
  .tgx-portfolio .portfolio-filter{
      margin-bottom: 40px;
      margin-left:0px;
      li{
        margin:0;
        &:first-child{
          padding-left:0;
        }
        &:last-child{
          padding-right:0;
        }
      }
  }
  .tgx-portfolio .portfolio-filter li a{
      font-size: 16px;
      padding: 10px 15px;
      outline: none;
      text-decoration: none;
      font-weight: 600;
  }
  .tgx-portfolio .portfolio-filter li a.active, 
  .tgx-portfolio .portfolio-filter li a:hover,
  .tgx-portfolio .portfolio-filter li a:focus {
      background: transparent;
      outline: none;
      text-decoration: none;
  
  }
  
  .tgx-portfolio .portfolio-item img{
      width: 100%;
  }
  
  .tgx-portfolio .portfolio-item .title{
      font-size: 20px;
  }
  .tgx-portfolio .portfolio-item .desc{
      font-size: 12px;
  }
  
  
  
  
  
  /*Fitter border css*/
  
  .portfolio-filter.border {
    padding-bottom: 15px;
  }
  .portfolio-filter.border > li {
    display: inline-block;
    padding: 10px 10px;
  }
  .portfolio-filter.border > li a {
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    position: relative;
  }
  .portfolio-filter.border > li a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 100%;
    height: 1px;
    background-color: transparent;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
  }
  .portfolio-filter.border > li a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 100%;
    height: 1px;
    background: transparent;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
  }
  .portfolio-filter.border > li a:hover:before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }
  .portfolio-filter.border > li a:hover:after {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }
  .portfolio-filter.border > li a.mixitup-control-active,
  .portfolio-filter.border > li a.active,
  .portfolio-filter.border > li a:hover {
    color:#ed485f;
  }
  .portfolio-filter.border > li a.mixitup-control-active:before,
  .portfolio-filter.border > li a.active:before,
  .portfolio-filter.border > li a:hover:before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-color: #ed485f;
  }
  .portfolio-filter.border > li a.mixitup-control-active:after,
  .portfolio-filter.border > li a.active:after,
  .portfolio-filter.border > li a:hover:after {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-color:#ed485f;
  }
  .portfolio-filter.border > div {
    margin: -3px -2px !important;
  }
  
  
  
  
  
  
  /*Fitter round css*/
  
  .portfolio-filter.round {
    padding-bottom: 15px;
  }
  .portfolio-filter.round > li {
    display: inline-block;
    padding: 5px 10px;
  }
  .portfolio-filter.round > li a {
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    position: relative;
    border: 1px solid #ece9f0;
    display: inline-block;
     padding: 10px 15px;
     margin: 0;
  }
  .portfolio-filter.round > div {
    margin: -3px -2px !important;
  }
  
  
  
  
  /*filter slash start*/
  .portfolio-filter.slash {
    position: relative;
  }
  .portfolio-filter.slash > li {
    display: inline-block;
    padding: 5px 0px;
  }
  .portfolio-filter.slash > li .filter-slash {
    margin: 0 5px 0 -15px;
  }
  .portfolio-filter.slash > li a {
    transition: all .4s ease;
    -moz-transition: all .4s ease;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    position: relative;
        padding: 0 15px 0 0px;
  }
  .portfolio-filter.slash > li a.mixitup-control-active,
  .portfolio-filter.slash > li a.active,
  .portfolio-filter.slash > li a:hover {
    color: #6d6be7;
  }
  .portfolio-filter.slash > li a.mixitup-control-active:before,
  .portfolio-filter.slash > li a.active:before,
  .portfolio-filter.slash > li a:hover:before {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-color: #ddd;
  }
  .portfolio-filter.slash > li a.mixitup-control-active:after,
  .portfolio-filter.slash > li a.active:after,
  .portfolio-filter.slash > li a:hover:after {
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-color: #6d6be7;
  }
  .portfolio-filter.slash > div {
    margin: -3px -2px !important;
  }
  
  
  /*Hover effect 1 start*/
  
  .overlay{
      background:inherit;
      position: inherit;
      opacity: 1;
  }
  
  .tgx-portfolio #hover-1 .portfolio-item:hover .portfolio-buttons {
    opacity: 1;
  }
  .tgx-portfolio #hover-1 .portfolio-item img {
    width: 100%;
  }
  .tgx-portfolio #hover-1 .portfolio-item .portfolio-buttons {
    position: absolute;
    top: 40%;
    left: 0;
    opacity: 0;
    right: 0;
    text-align: center;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
  }
  .tgx-portfolio #hover-1 .portfolio-item .portfolio-buttons a {
    display: inline-block;
    background: #fff;
    margin: 0 5px;
    text-align: center;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -ms-transition: .5s all;
    -o-transition: .5s all;
    transition: .5s all;
    color: #51BBE5;
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;
    line-height: 55px;
    font-size:18px;
  }
  .tgx-portfolio #hover-1 .portfolio-item .portfolio-buttons a i {
    font-size: 20px;
  }
  .tgx-portfolio #hover-1 .portfolio-item .portfolio-buttons a:hover {
    color: #51BBE5;
  }
  .tgx-portfolio .hover-1 .portfolio-item span {
    display: block;
    position: relative;
    overflow: hidden;
  }
  .tgx-portfolio .hover-1 .portfolio-item span div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(81, 187, 229, 0.92);
  }
  .tgx-portfolio .hover-1 .portfolio-item img {
    display: block;
    position: relative;
  }
  
  
  
  
  /*Hover effect 2 start*/
  .tgx-portfolio .hover-2 .portfolio-item {
    padding: 0px;
    text-align: center;
  }
  
  .tgx-portfolio .hover-2 .portfolio-btn a {
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 0;
      font-size:18px;
  }
  
  .tgx-portfolio .hover-2 .icon-search {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;
    margin: 0 -10px;
    text-align: center;
    border-radius: 2px;
    opacity: 0;
    -moz-animation: imageLinksTwo .4s 1;
    transform: translateX(0%) translateY(-50%);
    -webkit-transform: translateX(0%) translateY(-50%);
    -moz-transform: translateX(0%) translateY(-50%);
    -ms-transform: translateX(0%) translateY(-50%);
    -o-transform: translateX(0%) translateY(-50%);
    border: 1px solid #fff;
    color: #fff;
  }
  .tgx-portfolio .hover-2 .icon-search:hover {
    background: #fff;
    color: #6d6be7;
    border-color: #fff;
  }
  
  .tgx-portfolio .hover-2 .overlay:hover .overlay-spin:before {
    opacity: 0.90;
  }
  .tgx-portfolio .hover-2 .overlay:hover .icon-search {
    opacity: 1;
    transform: translateX(-50px) translateY(-50%) rotate(0deg);
    -webkit-transform: translateX(-50px) translateY(-50%) rotate(0deg);
  }
  .tgx-portfolio .hover-2 .overlay:hover .icon-link {
    opacity: 1;
    transform: translateX(50px) translateY(-50%) rotate(0);
    -webkit-transform: translateX(50px) translateY(-50%) rotate(0);
    -moz-transform: translateX(50px) translateY(-50%) rotate(0);
    -ms-transform: translateX(50px) translateY(-50%) rotate(0);
    -o-transform: translateX(50px) translateY(-50%) rotate(0);
  }
  .tgx-portfolio .hover-2 .overlay:hover .portfolio-content {
    opacity: 1;
    transition: all 0.5s ease;
    left: 56px;
  }
  
  
  
  .tgx-portfolio .hover-2 .overlay .portfolio-content {
    position: absolute;
    bottom: 5px;
    left: 150px;
    transition: all 0.5s ease;
    opacity: 0;
    color: #fff;
  }
  .tgx-portfolio .hover-2 .overlay .portfolio-content .title {
    color: #fff;
    margin-bottom: 0;
  }
  
  
  .tgx-portfolio .hover-2 .icon-link {
    border: 1px solid #fff;
    position: absolute;
    top: 50%;
    left: 40%;
    z-index: 4;
    margin: 0 5px;
    text-align: center;
    font-size: 17px;
    color: #fff;
    opacity: 0;
    -moz-animation: imageLinksTwo .4s 1;
    transform: translateX(0%) translateY(-50%);
    -webkit-transform: translateX(0%) translateY(-50%);
    -moz-transform: translateX(0%) translateY(-50%);
    -ms-transform: translateX(0%) translateY(-50%);
    -o-transform: translateX(0%) translateY(-50%);
  }
  .tgx-portfolio .hover-2 .icon-link:hover {
    background: #fff;
    color: #6d6be7;
    border-color: #fff;
  }
  @-webkit-keyframes imageLinksOne {
    0% {
      transform: translateX(0px) translateY(-50%) rotate(0);
    }
    50% {
      transform: translateX(-55px) translateY(-50%) rotate(-20deg);
    }
    100% {
      transform: translateX(-50px) translateY(-50%) rotate(0deg);
    }
  }
  @keyframes imageLinksOne {
    0% {
      transform: translateX(0px) translateY(-50%) rotate(0);
    }
    50% {
      transform: translateX(-55px) translateY(-50%) rotate(-20deg);
    }
    100% {
      transform: translateX(-50px) translateY(-50%) rotate(0deg);
    }
  }
  .tgx-portfolio .hover-2 .overlay-spin,
  .tgx-portfolio .hover-4 .overlay-spin {
    position: relative;
  }
  .tgx-portfolio .hover-2 .overlay-spin:before{
    position: absolute;
    content: "";
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    opacity: 0;
    background-color: #4da2ff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  @-webkit-keyframes imageLinksTwo {
    0% {
      transform: translateX(0px) translateY(-50%) rotate(0);
    }
    50% {
      transform: translateX(55px) translateY(-50%) rotate(20deg);
    }
    100% {
      transform: translateX(50px) translateY(-50%) rotate(0);
    }
  }
  @keyframes imageLinksTwo {
    0% {
      transform: translateX(0px) translateY(-50%) rotate(0);
    }
    50% {
      transform: translateX(55px) translateY(-50%) rotate(20deg);
    }
    100% {
      transform: translateX(50px) translateY(-50%) rotate(0);
    }
  }
  
  
  
  /*hover effect 3*/
  
  .tgx-portfolio .hover-3 {
      margin: 0;
      padding: 0;
      list-style: none;
      text-align: center;
  }
  
  
  .tgx-portfolio .hover-3 .effect-3 {
      overflow: hidden;
      position: relative;
  }
  
  
  
  .tgx-portfolio .hover-3 .effect-3 .info {
      background-color: rgba(54, 55, 50, 0.79);
      bottom: -155px;
      color: #fff;
      padding: 25px 30px 5px;
      position: absolute;
      width: 100%;
      text-align: left;
      
      -webkit-transition: all 0.4s ease 0s;
         -moz-transition: all 0.4s ease 0s;
          -ms-transition: all 0.4s ease 0s;
           -o-transition: all 0.4s ease 0s;
              transition: all 0.4s ease 0s;
  }
  
  .tgx-portfolio .hover-3 .effect-3:hover .info {
      bottom: 0;
  }
  
  .tgx-portfolio .hover-3 .effect-3 .info .title {
      margin: 0;
  }
  
  .tgx-portfolio .hover-3 .effect-3 .external-link {
      list-style: outside none none;
      margin: 0;
      padding: 0;
      position: absolute;
      right: 20px;
      top: -55px;
      opacity:0;
      
      -webkit-transition: all 0.4s ease 0s;
         -moz-transition: all 0.4s ease 0s;
          -ms-transition: all 0.4s ease 0s;
           -o-transition: all 0.4s ease 0s;
              transition: all 0.4s ease 0s;
  }
  
  
  
  .tgx-portfolio .hover-3 .effect-3 .external-link li {
      display: inline-block;
  }
  
  .tgx-portfolio .hover-3 .effect-3 .external-link li a {
      background-color: rgba(255, 255, 255, 0.9);
      color: #818181;
      display: block;
      width: 50px;
      height: 50px;
      line-height: 50px;
      border-radius: 0px;
      font-size:18px;
      
      -webkit-transition: all 0.5s ease 0s;
         -moz-transition: all 0.5s ease 0s;
          -ms-transition: all 0.5s ease 0s;
           -o-transition: all 0.5s ease 0s;
              transition: all 0.5s ease 0s;
  }
  
  .tgx-portfolio .hover-3 .effect-3 .external-link li a:hover {
      background-color: #009EE3;
      color: #fff;
  }
  
  .tgx-portfolio .hover-3 .effect-3:hover .external-link {
      top: 15px;opacity:1;z-index: 9;
  }
  
  .icon-link:before{
      content:"";
  }
  
  /*Hover Effect 4*/
  
  
  
  .tgx-portfolio .hover-4 .overlay{
      position: relative;
  }
  
  
  .tgx-portfolio .hover-4 .overlay .portfolio-content {
    position: absolute;
    left: 0;
    right: 0;
    top: 41%;
    transition: all 0.5s ease;
    opacity: 0;
    color: #fff;
    text-align: center;
  }
  
  .tgx-portfolio .hover-4 .overlay .portfolio-content .title{
      font-size: 28px;
      margin-top: -70px;
      transition: all 0.3s ease;
      position: relative;
  }
  
  .tgx-portfolio .hover-4 .overlay .portfolio-content .title:before{
      content: "";
      position: absolute;
      background: #fff;
      width: 100px;
      height: 1px;
      left: 0;
      right:0;
      text-align: center;
      top: 200px;
      transition: all 0.3s ease;
      margin: auto;
  }
  .tgx-portfolio .hover-4 .overlay:hover .portfolio-content .title:before{
      top: 50px;
  }
  .tgx-portfolio .hover-4 .overlay:hover .portfolio-content .title{
      margin-top: 0px;
  }
  .tgx-portfolio .hover-4 .overlay:hover .portfolio-content {
    opacity: 1;
    transition: all 0.5s ease;
  }
  
  .tgx-portfolio .hover-4 .overlay-spin:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background-color: #4da2ff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
  
  .tgx-portfolio .hover-4 .overlay:hover .overlay-spin:before {
    opacity: 0.90;
  }

  .tgx-portfolio{
    .hover-4{
      .overlay{
        .demo_link{
            top:0;
            width:100%;
            height:100%;
            a{
                width:100%;
                height:100%;
                display:flex;
                align-items: center;
                justify-self: center;
            }
        }
      }
    }
  }
  
  
  @media (max-width: 1080px){
      .elementor-lightbox .elementor-lightbox-item img {
          width: 100%;
          padding: 40px;
      }
  }
  
  @media (max-width: 767px){
      .elementor-lightbox .elementor-lightbox-item img {
          width: 100%;
      }
  }