.ahvr-box-effect-1 {
  overflow: hidden;

  .overlay {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba($ahvr-black, 0.57);
    height: 65px;
    max-height: 65px;
  }

  .box-content {
    color: #ffffff;
    text-align: center;
    width: 100%;
    padding: 5px 10px;
  }

  .box-content .box-title {
    border-bottom: 1px dotted transparent;

    min-height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .box-content .box-text {
    width: 100%;
    bottom: 0;
    min-height: 50px;
    padding-top: 10px;
  }

  .image,
  .overlay,
  .box-content {
    transition: all 1s ease-out;
  }

  .box-content .box-text {
    transition: all 2s ease-out;
  }

  .box-content.info-center {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  &:hover {
    .image {
      transform: scale(1.09);
    }

    .overlay {
      height: 100%;
      max-height: 100%;
    }

    .overlay.box-center {
      display: flex;
      align-items: center;
    }

    .overlay.box-start {
      display: flex;
      align-items: flex-start;
      ;
    }

    .overlay.box-end {
      display: flex;
      align-items: flex-end;
      ;
    }


    .box-content .box-title {
      border-bottom: 1px dotted #fff;
    }


  }
}

/* effects opacity hover */
.ahvr-square.effect-opacity {
  .overlay {
    background: rgba(0, 0, 0, 0.6);
    transition: all 0.5s ease-in-out;
    opacity: 0;
  }

  &:hover .overlay {
    opacity: 1;
  }
}