.box-hover-effect {
    display: inline-block;
    vertical-align: middle;
}

.box-hover-effect .effect-wrapper {
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
    /* Icons Holder */
    /* Icons Holder middle */
    /* Icons Holder top left */
    /* Icons Holder top right */
    /* Icons Holder bottom left */
    /* Icons Holder bottom right */
    /* Text Holder */
    /* Text Holder middle */
    /* Text Holder top */
    /* Text Holder bottom */
}

.box-hover-effect .effect-wrapper .thumb {
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.box-hover-effect .effect-wrapper .thumb.gradient-effect:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 10px, transparent);
}

.box-hover-effect .effect-wrapper .hover-link {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background: none !important;
    color: transparent !important;
    z-index: 11;
}

.box-hover-effect .effect-wrapper .overlay-shade {
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    background-color: #000;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.box-hover-effect .effect-wrapper .overlay-shade.shade-white {
    background-color: #fff;
}

.box-hover-effect .effect-wrapper .icons-holder {
    display: inline-block;
    opacity: 0;
    position: absolute;
    z-index: 13;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.box-hover-effect .effect-wrapper .icons-holder .icons-holder-inner {
    position: relative;
    margin: 0;
}

.box-hover-effect .effect-wrapper .icons-holder .icons-holder-inner a {
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.box-hover-effect .effect-wrapper .icons-holder-middle {
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    top: 40%;
    vertical-align: middle;
    width: 80%;
}

.box-hover-effect .effect-wrapper .icons-holder-middle .icons-holder-inner {
    display: inline-block;
    vertical-align: middle;
}

.box-hover-effect .effect-wrapper .icons-holder-middle .icons-holder-inner a {
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.box-hover-effect .effect-wrapper .icons-holder-top-left {
    top: -20%;
    left: 0;
    padding: 15px;
}

.box-hover-effect .effect-wrapper .icons-holder-top-left .icons-holder-inner {
    display: block;
}

.box-hover-effect .effect-wrapper .icons-holder-top-right {
    top: -20%;
    right: 0;
    padding: 15px;
}

.box-hover-effect .effect-wrapper .icons-holder-top-right .icons-holder-inner {
    display: block;
}

.box-hover-effect .effect-wrapper .icons-holder-bottom-left {
    bottom: -20%;
    left: 0;
    padding: 5px 15px;
}

.box-hover-effect .effect-wrapper .icons-holder-bottom-left .icons-holder-inner {
    display: block;
}

.box-hover-effect .effect-wrapper .icons-holder-bottom-right {
    bottom: -20%;
    right: 0;
    padding: 5px 15px;
}

.box-hover-effect .effect-wrapper .icons-holder-bottom-right .icons-holder-inner {
    display: block;
}

.box-hover-effect .effect-wrapper .text-holder {
    display: inline-block;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 13;
}

.box-hover-effect .effect-wrapper .text-holder .title {
    color: #fff;
}

.box-hover-effect .effect-wrapper .text-holder .text_holder_inner {
    display: table;
    height: 100%;
    position: relative;
    width: 100%;
}

.box-hover-effect .effect-wrapper .text-holder .text_holder_inner2 {
    display: table-cell;
    height: 100%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

.box-hover-effect .effect-wrapper .overlay-shade.shade-white+.text-holder .title {
    color: #333;
}

.box-hover-effect .effect-wrapper .text-holder-middle {
    display: block;
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    top: 30%;
    vertical-align: middle;
    width: 80%;
}

.box-hover-effect .effect-wrapper .text-holder-top {
    display: block;
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    top: -40px;
    vertical-align: middle;
    width: 80%;
}

.box-hover-effect .effect-wrapper .text-holder-bottom {
    display: block;
    left: 0;
    margin: 0 auto;
    right: 0;
    text-align: center;
    bottom: -40px;
    vertical-align: middle;
    width: 80%;
}

.box-hover-effect .effect-wrapper .text-holder-top-left {
    left: 0;
    padding: 5px 15px;
    top: -40px;
    width: auto;
}

.box-hover-effect .effect-wrapper .text-holder-top-right {
    right: 0;
    padding: 5px 15px;
    top: -40px;
    width: auto;
}

.box-hover-effect .effect-wrapper .text-holder-bottom-left {
    left: 0;
    padding: 5px 15px;
    bottom: -40px;
    width: auto;
}

.box-hover-effect .effect-wrapper .text-holder-bottom-right {
    right: 0;
    padding: 5px 15px;
    bottom: -40px;
    width: auto;
}

.box-hover-effect:hover .effect-wrapper .thumb {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.box-hover-effect:hover .effect-wrapper .overlay-shade {
    opacity: 0.8;
    filter: alpha(opacity=80);
}

.box-hover-effect:hover .effect-wrapper .icons-holder {
    opacity: 1;
}

.box-hover-effect:hover .effect-wrapper .icons-holder-middle {
    top: 45%;
}

.box-hover-effect:hover .effect-wrapper .icons-holder-top-left {
    top: 0;
}

.box-hover-effect:hover .effect-wrapper .icons-holder-top-right {
    top: 0;
}

.box-hover-effect:hover .effect-wrapper .icons-holder-bottom-left {
    bottom: 2%;
}

.box-hover-effect:hover .effect-wrapper .icons-holder-bottom-right {
    bottom: 2%;
}

.box-hover-effect:hover .effect-wrapper .text-holder {
    opacity: 1;
}

.box-hover-effect:hover .effect-wrapper .text-holder-middle {
    top: 40%;
}

.box-hover-effect:hover .effect-wrapper .text-holder-top {
    top: 20px;
}

.box-hover-effect:hover .effect-wrapper .text-holder-bottom {
    bottom: 20px;
}

.box-hover-effect:hover .effect-wrapper .text-holder-top-left {
    top: 0;
}

.box-hover-effect:hover .effect-wrapper .text-holder-top-right {
    top: 0;
}

.box-hover-effect:hover .effect-wrapper .text-holder-bottom-left {
    bottom: 0;
}

.box-hover-effect:hover .effect-wrapper .text-holder-bottom-right {
    bottom: 0;
}

.shadow-overlay {
    background-image: url("../images/shadow-overlay.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    bottom: 0;
    color: #fff;
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

/* Individual effects */
/* Individual effect = image-zoom-in */
.box-hover-effect.image-zoom-in .thumb {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.box-hover-effect.image-zoom-in:hover .thumb {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* Individual effect = image-zoom-out */
.box-hover-effect.image-zoom-out .thumb {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.box-hover-effect.image-zoom-out:hover .thumb {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.effect-wrapper .thumb .img-fullwidth {
    width: 100%;
}

/* Individual effect = play button */
.box-hover-effect.play-button {
    /* Text Holder */
    width: 100%;
    margin: auto;
}

.box-hover-effect.play-button .thumb {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.box-hover-effect.play-button:hover .thumb {
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
}

.box-hover-effect.play-button .text-holder {
    opacity: 1;
}

.box-hover-effect.play-button .text-holder-middle {
    top: 34%;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.box-hover-effect.play-button:hover .text-holder-middle {
    top: 34%;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.box-hover-effect.play-button .video-button {
    z-index: 11;
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 255, 255, 0.8);
    width: 60px;
    height: 60px;
    border-radius: 100%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.box-hover-effect.play-button .video-button:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #666;
    -webkit-transform: translate(-15%, -50%);
    transform: translate(-15%, -50%);
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.box-hover-effect.play-button:hover .video-button {
    background: rgba(255, 51, 51, 0.9);
    width: 80px;
    height: 80px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.3);
}

.box-hover-effect.play-button:hover .video-button:before {
    border-left: 10px solid #fff;
}