@import "parts/flex-mixins";

//Classic layout - show dividers
article {
  .portfolio-shortcode &,
  .albums-shortcode & {
    .flex-display(@display: flex);
    .align-items(@align: flex-start);
  }
  .mode-masonry:not(.bottom-overlap-layout-list).portfolio-shortcode &,
  .mode-grid:not(.bottom-overlap-layout-list).portfolio-shortcode &,
  .mode-masonry:not(.bottom-overlap-layout-list).albums-shortcode &,
  .mode-grid:not(.bottom-overlap-layout-list).albums-shortcode & {
    .flex-flow( column nowrap);
    .align-items(@align: stretch);
  }
  .bottom-overlap-layout-list.portfolio-shortcode &,
  .bottom-overlap-layout-list.albums-shortcode &  {
    .flex-flow( column nowrap);
    .align-items(@align: center);
  }
  .gradient-overlay-layout-list.mode-grid.portfolio-shortcode &,
  .content-rollover-layout-list.mode-grid.portfolio-shortcode &,
  .gradient-overlay-layout-list.mode-grid.albums-shortcode &,
  .content-rollover-layout-list.mode-grid.albums-shortcode & {
    height: auto;
  }
  .hover-grid &,
  .hover-grid-reverse & {
    position: relative;
    overflow: hidden;
  }
  .gradient-overlay-layout-list.portfolio-shortcode &,
  .gradient-overlay-layout-list.albums-shortcode & {
    overflow: hidden;
    transform: translateZ(0);
  }
}

.portfolio-shortcode.scale-img .post-thumbnail-rollover,
.portfolio-shortcode.quick-scale-img .post-thumbnail-rollover,
.albums-shortcode.scale-img .post-thumbnail-rollover,
.albums-shortcode.quick-scale-img .post-thumbnail-rollover {
  transform: translateZ(0);
}
//IMG
.post-thumbnail-wrap {
  .portfolio-shortcode &,
  .albums-shortcode & {
    position: relative;
    width: 100%;
    .box-sizing (border-box);
    -ms-flex: 0 0 auto;
  }
}
.related-projects .project-list-media,
.gallery-carousel-shortcode .rollover {
  position: relative;
  width: 100%;
  .box-sizing (border-box);
  -ms-flex: 0 0 auto;
}
.post-thumbnail {
  .portfolio-shortcode &,
  .albums-shortcode & {
    position: relative;
    display: block;

    & .alignleft {
      margin: 0;
    }
    & .alignnone {
      margin-bottom: 0;
    }
  }
  .portfolio-shortcode .format-gallery & {
    width: 100%;
  }
}
.post-thumbnail:not(.overlay-placeholder) > .post-thumbnail-rollover img {
  width: 100%;
}

article:hover .post-thumbnail:not(.overlay-placeholder) > .post-thumbnail-rollover img {
  .mobile-false .quick-scale-img.gradient-overlay-layout-list &,
  .mobile-false .quick-scale-img.content-rollover-layout-list &,
  .mobile-false .quick-scale-img.gradient-overlap-layout-list & {
    transform: scale(1.2);
    transition: transform 0.25s ease-out;
  }
}
article.is-clicked .post-thumbnail:not(.overlay-placeholder) > .post-thumbnail-rollover img {
  .mobile-true .quick-scale-img.gradient-overlay-layout-list &,
  .mobile-true .quick-scale-img.content-rollover-layout-list & {
    transform: scale(1.2);
    transition: transform 0.25s ease-out;
  }
}

.post-thumbnail > .post-thumbnail-rollover  img {
  .mobile-false .gradient-overlap-layout-list.scale-img article:hover &,
  .mobile-true .gradient-overlap-layout-list.scale-img .is-clicked & {
    transform: scale(1.2);
    transition: transform 4s ease-out;
  }
}
.post-entry-wrapper,
.post-entry-content:before {
  .content-rollover-layout-list.albums-shortcode.show-content & {
    transform: translateY(0) !important;
    bottom: 0 !important;
  }
}
.entry-excerpt,
.post-details {
  #page .content-rollover-layout-list.albums-shortcode.show-content & {
    opacity: 1;
  }
}
//Content
.post-entry-content {

  .portfolio-shortcode &,
  .albums-shortcode & {
    position: relative;
    z-index: 10;
  }
  .gradient-overlap-layout-list.portfolio-shortcode &,
  .gradient-overlap-layout-list.albums-shortcode & {
    position: relative;
    margin-top: -125px;
    z-index: 1;
    padding-top: 90px;
    &:before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 150px;
      content: "";
    }
  }
  .gradient-overlay-layout-list.portfolio-shortcode &,
  .gradient-overlay-layout-list.albums-shortcode &  {
    position: absolute;
    .flex-display(@display: flex);
    .justify-content(@justify: center);
    .flex-flow( column nowrap);
    background: none !important;
    width: 100%;
    min-height: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: opacity 0.35s;
    .mobile-true .hover-scale& {
      opacity: 0;
    }

  }
  .mobile-true .hover-scale.gradient-overlay-layout-list.portfolio-shortcode .is-clicked &,
  .mobile-true .hover-scale.gradient-overlay-layout-list.albums-shortcode .is-clicked & {
    opacity: 1;
  }

  .mobile-true .hover-scale article.is-clicked & {
    opacity: 1;
  }
  .content-rollover-layout-list.portfolio-shortcode &,
  .content-rollover-layout-list.albums-shortcode & {
    height: auto;
  }
  .gradient-overlay-layout-list.hover-fade article & {
    opacity: 0;
    visibility: hidden;
  }
  .mobile-false .gradient-overlay-layout-list.hover-fade article:hover &,
  .mobile-true .gradient-overlay-layout-list.hover-fade article.is-clicked & {
    opacity: 1;
    visibility: visible;
  }

  @keyframes fadeInFromNone {
    0% {
      visibility: hidden;
      opacity: 0;
    }

    1% {
      visibility: visible;
      opacity: 0;
    }

    100% {
      visibility: visible;
      opacity: 1;
    }
  }
  @keyframes fadeToNone {
    0% {
      opacity: 1;
    }

    1% {
      opacity: 0;
    }

    100% {
      opacity: 0;
      visibility: hidden;
    }
  }

  .mobile-false .hover-scale & {
    transform: scale(0);
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
  }
  .mobile-false .hover-scale article:hover & {
    opacity: 1;
    transform: scale(1);
  }
  .hover-grid &,
  .hover-grid-reverse & {
    opacity: 0;
  }
  .mobile-false .hover-grid article:hover &,
  .mobile-false .hover-grid-reverse article:hover &,
  .mobile-true .hover-grid .is-clicked &,
  .mobile-true .hover-grid-reverse .is-clicked & {
    opacity: 1;
  }
}
.post-thumbnail-rollover:after {
  .mobile-false .hover-scale & {
    display: none;
  }
}

.entry-excerpt {
  .portfolio-shortcode & {
    overflow: hidden;
  }
}

.elementor-element {
  .entry-title a,
  .entry-meta > a,
  .entry-meta > span,
  .portfolio-categories > a,
  .portfolio-categories > span {
    text-decoration: inherit;
  }
}

.post-entry-content .entry-title a,
.post-entry-title-content .entry-title a {
  .portfolio-shortcode & {
    transition: color 0.35s;
    .accent-gradient & {
      transition: none;
    }
  }
}

.entry-meta {
  .portfolio-shortcode &,
  .albums-shortcode & {
    padding: 0;
    & a:hover {
      text-decoration: none;
    }
    & > span a {
      display: inline-block;
    }
  }
}
.entry-meta * {
  .portfolio-shortcode &,
  .albums-shortcode & {
    color: inherit;
  }
}
.entry-meta > a:after,
.entry-meta > span:after {
  .portfolio-shortcode &,
  .albums-shortcode & {
    right: 0;
    width: 3px;
    height: 3px;
    top: 50%;
    transform: translateY(-50%);
    content: "";
  }
}
.entry-meta > .data-link:hover {
  .portfolio-shortcode &,
  .albums-shortcode & {
    text-decoration: none;
  }
}

.project-links-container {
  .post-thumbnail-wrap &,
  .post-entry-content & {

    .flex-display(@display: flex);
    .align-items(@align: center);
    .justify-content(@justify: center);
    .gradient-overlap-layout-list & {
      height: calc(100% ~'-' 125px);
    }
    .content-rollover-layout-list:not(.content-align-center) &,
    .gradient-overlay-layout-list:not(.content-align-center) & {
      .justify-content(@justify: flex-start);
    }
    & a {
      position: relative;
      font-size: 0;
      line-height: 0;
      opacity: 0;
      text-align: center;
      transition: opacity 300ms ease;
      -webkit-backface-visibility: hidden;
      &:before,
      &:after {
        position: absolute;
        background: none;
        border-style: solid;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        box-sizing: border-box;
        border-radius: inherit;
        transition: opacity 0.150s linear;
        -webkit-backface-visibility: hidden;
        .disable-icon-hover-bg & {
          transition: none;
        }
      }
      &:before,
      &:hover:after {
        opacity: 1;
      }
      &:after,
      &:hover:before {
        opacity: 0;
      }

      &:hover:before,
      &:not(:hover):after {
        transition-delay: 0.100s;
      }
      & > span {
        position: relative;
        z-index: 2;
        transition: color 0.250s;
      }
      .gradient-overlay-layout-list & {
        opacity: 1;
      }
    }
  }
  .post-thumbnail-wrap & {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
  }
}
.portfolio-shortcode .post-thumbnail:hover > .post-thumbnail-rollover:after,
.mobile-true .portfolio-shortcode .is-clicked .post-thumbnail > .post-thumbnail-rollover:after,
.gradient-overlap-layout-list.portfolio-shortcode article:hover  .post-thumbnail-rollover:after,
.mobile-true .gradient-overlap-layout-list.portfolio-shortcode .is-clicked  .post-thumbnail-rollover:after  {
  opacity: 1;
}

.project-links-container a {
  .post-entry-content:hover &,
  .post-thumbnail:hover &,
  .gradient-overlap-layout-list article:hover & {
    opacity: 1;

  }
}

//Multipurpose carousel
.text-and-icon-carousel,
.testimonials-carousel {
  margin-left: auto;
  margin-right: auto;
}
.dt-owl-item-wrap {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}
/*Carousel content*/
.dt-owl-item-inner {
    align-self: flex-start;
    display: grid;
    width: 100%;
    grid-gap: 0px;
    grid-template-rows: auto;
    color: inherit;
}
a.dt-owl-item-wrap:hover .dt-owl-item-description {
  color: inherit;
}

.dt-owl-item-heading {
   grid-area: header;
   align-self: center;
}
.dt-owl-item-subtitle {
   grid-area: subtitle;
   align-self: center;
}
.dt-owl-item-heading a,
.dt-owl-item-heading a:hover {
  color: inherit;
}
.dt-owl-item-description {
   grid-area: desc;
}
.dt-slide-button {
   grid-area: button;
   align-self: flex-start;
   pointer-events: none;
   transition: all 0.25s;
}
.box-hover .dt-slide-button,
.elements-hover .dt-slide-button {
   pointer-events: auto;
}

.text-and-icon-carousel[data-auto-height="false"] .owl-stage,
.testimonials-carousel[data-auto-height="false"] .owl-stage {
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
}
.text-and-icon-carousel[data-auto-height="false"] .owl-stage .dt-owl-item,
.testimonials-carousel[data-auto-height="false"] .owl-stage .dt-owl-item {
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    flex-shrink: 0;
}
.dt-owl-item-image {
  position: relative;
  display: inline-block;
  align-self: flex-start;
  grid-area: icon;
  line-height: 0;
  max-width: 100%;
}
.dt-owl-item-image:after,
.dt-owl-item-image:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
}
.dt-owl-item-image:before {
  z-index: 1;
}
.dt-owl-item-image:before,
.box-hover:hover .dt-owl-item-image:after,
.elements-hover .dt-owl-item-image:hover:after {
  opacity: 1;
}

.dt-owl-item-image:after,
.elements-hover .dt-owl-item-image:hover:before,
.box-hover:hover .dt-owl-item-image:before {
  opacity: 0;
}
#page .quick-scale-img .dt-owl-item-image img {
    transition: transform 0.25s ease-out, opacity 0.25s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#page .scale-img .dt-owl-item-image img {
    transition: transform 4s ease-out, opacity 0.25s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.scale-img .dt-owl-item-image,
.quick-scale-img .dt-owl-item-image {
  overflow: hidden;
  transform: translateZ(0);
}
#page .quick-scale-img .box-hover:hover .dt-owl-item-image img,
#page .quick-scale-img .elements-hover .dt-owl-item-image:hover img {
    transform: scale(1.2);
    transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}
#page .scale-img .box-hover:hover .dt-owl-item-image img,
#page .scale-img .elements-hover .dt-owl-item-image:hover img {
      transform: scale(1.2);
      transition: transform 4s ease-out, opacity 0.25s ease-out;
}


.dt-owl-item-icon {
  grid-area: icon;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.dt-owl-item-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 3;
}
.dt-owl-item-icon:before,
.dt-owl-item-icon:after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0 !important;
      content: "";
      font-size: 0 !important;
      border-radius: inherit;
      
      z-index: 2;
      border-style: solid;
  }
  .box-hover:hover .dt-owl-item-icon:before,
  .elements-hover .dt-owl-item-icon:hover:before,
  .dt-owl-item-icon:after {
      opacity: 0;
  }
  .dt-owl-item-icon:before,
  .box-hover:hover .dt-owl-item-icon:after,
  .elements-hover .dt-owl-item-icon:hover:after {
      opacity: 1;
  }


 .slide-h-position-left .text-and-icon-carousel .dt-slide-button,
  .slide-h-position-left .text-and-icon-carousel .dt-owl-item-icon,
  .slide-h-position-left .text-and-icon-carousel .dt-owl-item-image,
  .layout-2 .dt-slide-button {
    justify-self: flex-start;
  }
  .dt-slide-button,
  .dt-owl-item-icon,
  .dt-owl-item-image {
    .slide-h-position-center .text-and-icon-carousel &,
    .elementor-widget:not(.slider-tablet-layout_3).slide-h-position-tablet-center .text-and-icon-carousel & {
      justify-self: center;
    }
  }
  .slide-h-position-right .text-and-icon-carousel .dt-slide-button,
  .elementor-widget:not(.slider-layout_3).slide-h-position-right .text-and-icon-carousel .dt-owl-item-icon,
  .elementor-widget:not(.slider-layout_3).slide-h-position-right .text-and-icon-carousel .dt-owl-item-image {
    justify-self: flex-end;
  }
.owl-nav a:after,
.owl-nav a:before {
  .text-and-icon-carousel &,
  .testimonials-carousel & {
    display: none;
  }
}
    .slider-layout_2.text-and-icon-carousel {
    & .dt-owl-item-wrap:not(.hide-icon) .dt-owl-item-inner {
      grid-template-areas:
          " icon header "
          " icon subtitle "
          " desc desc "
          " button button ";
    }
  }
   
  .slider-layout_6.text-and-icon-carousel {
    & .dt-owl-item-wrap:not(.hide-icon) .dt-owl-item-inner{
      grid-template-areas:
          " desc desc "
          " icon header "
          " icon subtitle "
          " icon button ";
      grid-auto-rows: 1fr;
      grid-template-rows: auto auto 0fr;
    }
  }
 
  .slider-layout_1 .dt-owl-item-inner,
  .hide-icon .dt-owl-item-inner,
  .slider-default .dt-owl-item-inner {
      grid-template-areas:
          " icon"
          " header "
          " subtitle "
          " desc"
          " button ";
      grid-template-columns: minmax(0, 100%);
  }
  .slider-layout_5 .dt-owl-item-inner {
      grid-template-areas:
          " desc"
          " icon"
          " header "
          " subtitle "
          " button ";
      grid-template-columns: minmax(0, 100%);
  }
  .slider-layout_3.text-and-icon-carousel {
    & .dt-owl-item-wrap:not(.hide-icon) .dt-owl-item-inner {
      grid-template-columns: 100px minmax(0, 1fr);
      grid-template-areas:
          "icon header"
          "icon subtitle"
          "icon desc"
          "icon button";
      grid-template-rows: repeat(3, auto) 1fr;
    }
  }
  .slider-layout_7.text-and-icon-carousel  {
    & .dt-owl-item-wrap:not(.hide-icon) .dt-owl-item-inner {
      grid-template-columns: 100px minmax(0, 1fr);
      grid-template-areas:
          "icon desc"
          "icon header"
          "icon subtitle"
          "icon button";
      grid-template-rows: repeat(3, auto) 1fr;
    }
  }
  .slider-layout_4.text-and-icon-carousel {
    & .dt-owl-item-wrap:not(.hide-icon) .dt-owl-item-inner {
      grid-template-columns: minmax(0, 1fr) 100px;
      grid-template-areas:
          " header icon "
          " subtitle icon "
          " desc icon "
          " button icon ";
      grid-template-rows: repeat(3, auto) 1fr;
    }
  }
   .slider-layout_8.text-and-icon-carousel {
    & .dt-owl-item-wrap:not(.hide-icon) .dt-owl-item-inner {
      grid-template-columns: minmax(0, 1fr) 100px;
      grid-template-areas:
          " desc icon "
          " header icon "
          " subtitle icon "
          " button icon ";
      grid-template-rows: repeat(3, auto) 1fr;
    }
  }
   .slider-layout_9 .dt-owl-item-inner {
      grid-template-areas:
          " icon"
          " desc"
          " header "
          " subtitle "
          " button ";
      grid-template-columns: minmax(0, 100%);
  }

.elementor-widget .text-and-icon-carousel .dt-btn.dt-slide-button:not(.keep-custom-css):not(.class-1):not(.class-2),
.elementor-widget .testimonials-carousel .dt-btn.dt-slide-button:not(.keep-custom-css):not(.class-1):not(.class-2) {
  & {
    background: var(--the7-button-normal-bg-color);
  }

  // &:hover {
  //   background: var(--the7-button-hover-bg-color);
  // }
}
.box-hover:hover .dt-btn.dt-slide-button:not(.keep-custom-css):not(.class-1):not(.class-2),
.elements-hover .dt-btn.dt-slide-button:not(.keep-custom-css):not(.class-1):not(.class-2):hover {
  .elementor-widget .testimonials-carousel &,
  .elementor-widget .text-and-icon-carousel & {
    background: var(--the7-button-hover-bg-color);
  }
  
}