/*

80/10  ==   8
80/5   ==   16
80/4   ==   20
80/2   ==   40

*/

/* Start Page Content */

.image-section-content
{
    display:flex;
    flex-wrap:wrap;
}

.image-section-content > div
{
    flex-basis:calc(100% / 5);
    width:calc(100% / 8);
    position:relative;
    cursor: pointer;
}

.image-section-content > div img
{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.image-section-content > div .overlay
{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:8px 0;
    font-weight:300;
    font-size:15px;
    letter-spacing:.3px;
    text-align:center;
    opacity:0;
}

.image-section-content > div .overlay,
.image-section-content > div img
{
    transition:all .3s ease-in-out;
}

    .image-section-content > div:hover {
        z-index: 5;
        border: 2px solid #E64C2F;
    }

        .image-section-content > div:hover img {
            -webkit-filter: grayscale(0); /* Safari 6.0 - 9.0 */
            filter: grayscale(0);
            -webkit-box-shadow: 0px 0px 75px 2px rgba(230,76,47,1);
            -moz-box-shadow: 0px 0px 75px 2px rgba(230,76,47,1);
            box-shadow: 0px 0px 75px 2px rgba(230,76,47,1);
        }

.image-section-content > div:hover .overlay
{
    opacity:1;
}

/*Active Thumbnail*/
    /*.image-section-content > div:hover img {
        -webkit-filter: grayscale(0);
        filter: grayscale(0);
    }

    .image-section-content > div:hover .overlay {
        opacity: 1
    }*/


/* responsive */
@media (min-width:2150px)
{
    .image-section-content > div .overlay
    {
        padding-top:18px;
        padding-bottom:18px;
        font-size:22px;
    }
}
@media (min-width:1800px)
{
    .image-section-content > div
    {
        flex-basis:calc(100% / 8);
        width:calc(100% / 8);
    }    
}
@media (min-width:992px) and (max-width:1199px)
{
    .image-section-content > div .overlay
    {
        font-size:13px;
        padding:7px;
    }      
}
@media (min-width:881px) and (max-width:991px)
{
    .image-section-content > div
    {
        flex-basis:calc(100% / 4);
        width:calc(100% / 4)
        
    }
    .image-section-content > div .overlay
    {
        font-size:13px;
        padding:6px;
    }      
}
@media (min-width:767px) and (max-width:880px)
{
    .image-section-content > div
    {
        flex-basis:calc(100% / 3);
        width:calc(100% / 3);        
    }
    .image-section-content > div:last-of-type,
    .image-section-content > div:nth-last-of-type(2)
    {
        flex-basis:50%;
        width:50%;
    }
    .image-section-content > div .overlay
    {
        font-size:13px;
        padding:6px;
    }    
}

@media (min-width: 766px){
    .row > .col-md-8 {
        padding-right: 3px;
    }
}

@media (min-width:500px) and (max-width:766px)
{
    /*.row > .col-md-8 {
        padding-right: 15px !important;
    }*/

    .image-section-content > div
    {
        flex-basis:calc(100% / 4);
        width:calc(100% / 4);
    }
    .image-section-content > div .overlay
    {
        font-size:13px;
        padding:6px;
    }
}
@media (max-width:500px)
{
    .image-section-content > div
    {
        flex-basis:calc(100% / 2);
        width:calc(100% / 2);
    }    
}