/* ===================================
    Galleri CSS
====================================== */

.food-gallery {
    text-align: center;    
    margin-bottom: 23px;
}

.food-gallery-item {
    width: 25%;
    padding: 9px;
    float: right;    
    position: relative;
}

.food-gallery-item.wide {
    width: 50%;
}

.food-gallery-item img {
    display: block;
}

.gallery-big-height {
    max-height: 386px;
    overflow: hidden;
}

.gallery-small-height {
    max-height: 193px;
    overflow: hidden;
}

.food-gallery-item a {
    display: inline-block;
    width: 100%;
    height: 100%;
    /*position: relative;*/    
    vertical-align: top;
}

.food-gallery-item .image-hover-overlay {
    position: absolute;
    top: 15px;
    right: 15px;
    display: block;
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    height: -webkit-calc(100% - 30px);
    height: calc(100% - 30px);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    background-color: rgba(101,58,150,.5);
}

.food-gallery-item:hover .image-hover-overlay {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}

.image-hover-overlay i.fa {
    color: #fff;
    font-size: 50px;
}

.food-gallery-item .image-hover-overlay i {
    position: absolute;
    top: 50%;
    right: 50%;
    display: block;
    margin-top: -20px;
    margin-right: -20px;
}