/*Featured Area 1*/
#featured-area-1 {
  position: relative;
  overflow: auto;
  padding: 10px 0px 15px 0px;
  background: darken(@background, 11%);
  border-radius: 10px;
  @media screen and (max-width: 991px) {
    border-radius: 0;
    border-bottom: solid 1px lighten(@background, 5%);
    border-top: solid 1px lighten(@background, 5%);
  }
  .section-title {
    margin-bottom: 10px;
    margin-top: 0px;
  }
  .popular-articles {
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 999;
  }
  .imgcontainer {
    padding: 8px;
    position: relative;
    @media screen and (max-width: 991px) {
    }
    .popimage {
      position: relative;
      overflow: hidden;
      .transition( 0.6s all ease );
      -webkit-backface-visibility: hidden;
      img {
        display: block;
        .transition( 0.4s all ease );
        .transform(scale(1.02));
        -webkit-filter: brightness(0.6);
        filter: brightness(0.6);
        -webkit-backface-visibility: hidden;
        @media screen and (max-width: 991px) {
          width: 100%;
        }
      }
      &:hover {
        img {
          .transform( translateX(0px) );
          opacity: 1;
        }
        .titledesc {
          display: block;
          .transform( translateX(0px) );
          /* left: 0; */
          opacity: 1;

        }
      }
    }
    .titledesc {
      display: block;
      position: absolute;
      .transition(0.8s all ease);
      bottom: 0px;
      left: 0px;
      right: 0px;
      opacity: 1;
      pointer-events: none;
      h2 {
        font-size: 15px;
        background: fade(darken(@background, 11%), 85%);
        padding: 8px 10px;
        margin: 0;
        text-align: left;
        position: relative;
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;

        a {
          color: lighten(@content,6%);
        }
      }

    }

    .popimage:hover {
      img {
        .transform(scale(1.02));
        -webkit-filter: brightness(0.9);
        filter: brightness(0.9);
      }
      .titledesc {
        .transform( translateX(0px));
      }
    }
  }
  .imgcontainer:hover {
    .postdate {
      opacity: 0;
      left: 0px;
    }
  }

}

#featured-area-2 {
  margin-bottom: 20px;
  text-indent: 0px;
  .section-title {
    margin-bottom: 10px;
  }
  .imgcontainer {
    padding: 10px;

    .popimage {
      position: relative;
      img {
        -webkit-filter: brightness(0.4);
        filter: brightness(0.4);
        width: 100%;
        .transition(0.8s all ease);
      }
      .titledesc {
        position: absolute;
        width: 100%;
        top: 50%;
        .transform(translateY(-60%));
        pointer-events: none;
        a {
          color: white;
          font-size: 16px;
          font-weight: lighter;
          display: block;
          text-align: center;
          pointer-events: none;
        }

      }
      &:hover {
        img {
          -webkit-filter: brightness(0.7);
          filter: brightness(0.7);
        }
      }
    }
  }
}

/* Second Featured Area - OLD CODE DONT CARE */
.featured-2 {
  margin: 20px 0;
  position: relative;
  .popular-articles {
    overflow: auto;
    overflow-x: hidden;
    .imgcontainer {
      padding: 6px;
      position: relative;
    }
    .popimage {
      position: relative;
      .transition( 0.4s all ease );
      img {
        display: block;
        .transition( 0.4s all ease );
        @media screen and (max-width: 991px) {
          width: 100%;
        }
      }
      &:hover {
        img {
          .transform( translateX(0px) );
          opacity: 1;
        }
        .titledesc {
          display: block;
          .transform( translateX(0px) );
          /* left: 0; */
          opacity: 1;

        }
      }
    }
    .titledesc {
      display: block;
      position: absolute;
      background: fade(black, 60%);
      .transition(0.8s all ease);
      .transform( translateX(-50px) );
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      opacity: 0;
      h2 {
        font-size: 16px;
        text-align: center;
        color: white;
        font-weight: bold;
      }
      a {
        color: #eee;
        background: @accent;
        text-align: center;
        display: block;
        width: 40%;
        padding: 5px;
        margin: auto;
        margin-top: 25px;
      }
    }
    .imgcontainer:nth-child(odd) {
      .titledesc {
        .transform(translateX(50px));
      }
      .popimage:hover {
        img {
          .transform( translateX(0px));
        }
        .titledesc {
          .transform( translateX(0px));
        }
      }
    }
  }

}