.wadi_image_accordion_direction_horizontal {

  .wadi_images_accordion_wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
}

.wadi_image_accordion_direction_vertical {
  .wadi_images_accordion_wrapper {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 850px;
  }
}
.wadi_images_accordion_wrapper {
    display: flex;
    width: 100%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;

    .wadi_image_element_background {
      display: flex;
      flex: 1;
      height: 100%;
      position: relative;
      transition: flex 0.3s ease-in-out;
      cursor: pointer;

      &.active {
          // width: 350px;
          flex: 3;
          transition: flex 0.3s ease-in-out;
          .wadi_accordion_item {
            .wadi_image_accordion_content {
              opacity: 1;
              visibility: visible;
              transition: opacity 0.3s ease-in 0.3s;
            }
          .wadi_image_accordion_link_container {
          
            .wadi_image_accordion_link_url {
              opacity: 1;
              visibility: visible;
              transition: opacity 0.3s ease-in 0.3s;
            }
          }
        }
      }
      .wadi_accordion_item {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;

        .wadi_accordion_background_image {
          width: 100%;
          height: 100%;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          
          &::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
          }
        }
        .wadi_image_accordion_content {
            display: flex;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            max-height: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
        }

        .wadi_image_accordion_link_container {
            &.wadi_image_accordion_link_whole_image_container {
              display: flex;
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
          }


          .wadi_image_accordion_link_url {
            display: flex;
            font-size: 2rem;
            color: #fff;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in;
          }

          & a.wadi_image_accordion_link_whole_image {
            // display: block;
            height: 100%;
            width: 100%;
          }
        }
      }
    }
}



// Image Accordion Skew Images
// Skew To Right
.wadi_image_accordion_skew_yes.wadi_image_accordion_direction_horizontal {
  &.wadi_image_accordion_skew_direction_right {

    .wadi_images_accordion_wrapper {
      overflow: hidden;
      .wadi_image_element_background {
        width: 130%;
        margin-left: -15%;
        position: relative;
        transform: skewX(-15deg) translateZ(0);
        &:last-of-type {
          margin-right: -15%;
        }
      }
      .wadi_image_accordion_content{
        transform: skew(15deg);
      }
    }
  }
}

//Skew To Left
.wadi_image_accordion_skew_yes.wadi_image_accordion_direction_horizontal {
  &.wadi_image_accordion_skew_direction_left {

    .wadi_images_accordion_wrapper {
      overflow: hidden;
      width: 130%;
      .wadi_image_element_background {
        margin-right: -15%;
        position: relative;
        transform: skewX(15deg) translateZ(0);
        &:first-of-type {
          margin-left: -15%;
        }
      }
      .wadi_image_accordion_content {
        transform: skew(-15deg);
      }
    }
  }
}

// // vertical Skew
// .wadi_image_accordion_skew_yes.wadi_image_accordion_direction_vertical {

//     .wadi_images_accordion_wrapper {
//       overflow: hidden;
//       .wadi_image_element_background {
//         // height: 130%;
//         margin-bottom: -150px;
//         position: relative;
//         transform: skewY(-15deg) translateZ(0);
//         &:first-of-type {
//           margin-top: -150px;
//         }
//       }
//     }
// }