@defcolor: #DF811C;

.wce-posts-carousel-3 {

  .slick-next:before, .slick-prev:before {
    font-family: FontAwesome;
    font-size: 40px;
    // line-height: 1;
    color: #3B3B3B;
  }
  .slick-next:before {

    content: "\f0da";
  }

  .slick-prev:before {
    content: "\f0d9";
  }

  .slick-next, .slick-prev {
    top: -20px;
    border: 1px solid #E0E0E0;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 38px;
    &:before {
      font-size: 13px;
    }
  }
  .slick-prev {
    right: 39px;
    left: auto;
  }
  .slick-next {
    right: 10px;
  }

}

.wce-posts-carousel-3 {

  .post_read_more {
    display: none;
  }

  > div article {
    background: #fff;
    position: relative;
    color: #0E0E0E;
    font-weight: normal;
    // margin: 10px;
    transition: background-color ease 0.5s;
    float: left;
    height: 100%;

    &:hover {
      .thumbnail-wrapper .post-title {
        bottom: -200px;
      }


      .img_rollover .fa {
        left: initial;
        right: -200px;
      }
    }

    .overlay {
      position: absolute;
      background: blue;
      width: 100%;
      opacity: 0;
      height: 100%;
      z-index: 0;
    }

    a {
      &:hover {
        text-decoration: none;
      }
    }

    .img_rollover {
      text-align: center;
      background: blue;

      .fa {
        font-size: 24px;
        line-height: 24px;
        width: 50px;
        height: 50px;
        margin: auto !important;
        position: absolute;
        left: auto;
        right: 10px;
        top: 10px;
        bottom: auto;
        background: @defcolor;
        color: #fff;
        transition: all .3s ease-in-out;
        &:before {
          display: inline-block;
          vertical-align: middle;
        }
        &:after {
          content: '';
          display: inline-block;
          vertical-align: middle;
          height: 100%;
        }
      }
    }
    .thumbnail-wrapper {
      width: 100%;
      position: relative;
      display: block;
      float: left;


      .post-title {
        position: absolute;
        bottom: 0px;
        margin: 0;
        left: 0;
        padding: 50px 20px;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        transition: all ease 0.2s;
        z-index: 20;
        background: linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,0));
        width: 100%;

        a {
          color: #fff;
        }
      }

    }

  }
}

.wce-posts-carousel-3 article {
  overflow: hidden;
  position: relative;


  .captionPane {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: @defcolor;
    right: 0;
    transition: all 400ms ease;
    .btArticleDate:not(:last-child), .btArticleAuthor:not(:last-child), .btArticleComments:not(:last-child), .btArticleCategories:not(:last-child) {
      border-color: rgba(255, 255, 255, 0.5) !important;
    }
    .captionTable {
      display: table;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      .captionCell {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        .captionTxt {

          .fa {
            width: 100%;
            margin-top: 20px;
            margin-bottom: 15px;
            text-align: center;
            font-size: 45px;
          }

          display: block;
          padding: 0 20px;
          color: #FFF;
          opacity: 0;
          transition: opacity 400ms ease 200ms;
          h4, p, a, span {
            color: #FFF;
          }
          .header .btSubTitle p {
            display: block !important;
            margin: 5px auto;
          }
          .captionTxt .header {
            margin-top: 20;
          }
        }
      }
    }
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .captionPane {
    right: -1px;
  }
}

.wce-p3-item:hover {
  .captionPane {
    opacity: .8;
    .captionTxt {
      opacity: 1 !important;
    }
  }
  .btShowTitle {
    transform: translateY(100%);
  }
}

.in-top:not(.btCircleImage) .captionPane {
  animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right:not(.btCircleImage) .captionPane {
  animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom:not(.btCircleImage) .captionPane {
  animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left:not(.btCircleImage) .captionPane {
  animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top:not(.btCircleImage) .captionPane {
  animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right:not(.btCircleImage) .captionPane {
  animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom:not(.btCircleImage) .captionPane {
  animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left:not(.btCircleImage) .captionPane {
  animation: out-left 300ms ease 0ms 1 forwards;
}



@keyframes in-top {
  from {
    transform: translate3d(0, -100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}



@keyframes out-top {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, -100%, 0);
  }
}


@keyframes in-right {
  from {
    transform: translate3d(100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}


@keyframes out-right {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(100%, 0, 0);
  }
}


@keyframes in-bottom {
  from {
    transform: translate3d(0, 100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}


@keyframes out-bottom {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, 100%, 0);
  }
}


@keyframes in-left {
  from {
    transform: translate3d(-100%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}


@keyframes out-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}