.gallery_bg {
    background-color: #bea869 !important;
}

.gallery_bg:hover {
    background-color: #F0796C !important;
}

.gallery,
.overylay {
    -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
     !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.overylay {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    background-color: gray;
}

.overylay:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.galry_img {
    height: 200px;
    margin-left: 1%;
    background-size: cover;
}

/*overiding bootstrap classes */

.gridBox {
    width: 250px;
    height: 250px;
    position: relative;
    /*box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);*/
    margin-bottom: 19px;
    /* margin-right: 20px; */
    /* margin-left: 20px; */
    padding: 0;
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
    border: none !important;
}

.gridBox:hover {
    box-shadow: 0 30px 40px 0 rgba(0, 0, 0, .2);
}

.gridBox .gridBoxOverlay {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translateY(0px);
    transition: all .2s ease;
    z-index: 1;
    border: none;
}

.gridBox img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.gridBox .transparentOverlay {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 28% 5%;
    text-align: center;
    color: #fff;
    background-color: #f36557;
    transition: background-color .2s;
    transform: translateX(0%) translateY(100%);
    transition: 0.2s ease-out;
}

.gridBox:hover .transparentOverlay {
    /*     background-color: rgba(0, 0, 0, .75);*/
    transform: translateX(0%) translateY(0%);
}

.gridBox:hover .gridBoxOverlay h3 {
    opacity: 1;
    /*     transform: translateX(-50%) translateY(-220%);*/
}

.gridBox:hover .gridBoxOverlay p {
    opacity: 1;
    /*     transform: translateX(-50%) translateY(-20%);*/
}

.gridBox:hover .gridBoxOverlay {
    /*     transform: translateY(-40px);*/
}

/* modal*/

.arrow {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    vertical-align: initial;
    align-items: center;
}

.modal-body {
    border: 2px solid #d8c89c;
    padding: 5px;
}

.modal .modal-body {
    background-color: #d8c89c;

}

.arrow .left_img {
    position: relative;
    left: 21px;
}

.arrow .right_img {
    position: absolute;
    right: 21px;
}

.gallery_section .rotate h2 {
    color: #f16657;
}

@media (min-width: 768px) {
    .gallery_section .rotate h2 {
        color: #f16657;
        margin-top: 80px;
        -ms-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .gallery_section .rotate:after {
        content: '';
        position: absolute;
        border: 1px solid #c4c5c7;
        height: 100%;
        right: 20px;
        top: 0;
    }

    .col-md-3 {
        -ms-flex: 0 0 24%;
        flex: 0 0 24%;
        max-width: 24%;
    }
}

@media (max-width: 1199.98px) {
    .gridBox {
        width: 211px;
        height: 210px;
    }
}

@media (max-width: 575px) {
    .gridBox {
        /* width: 211px; */
        height: 210px;
        margin: 9px auto;
    }

}

@media (min-width: 576px) {
    .galry_img {
        max-width: 49%;
    }
}