.gal {
    float: right;
    display: block;
    margin: 15px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, .5);
    filter: grayscale(100%);
    transition: filter .2s .2s ease-in-out;
}

.gal3 {
    clear: both;
}

.insideGal {
    margin: 20px;
    background-color: rgba(0, 0, 0, .2);
    opacity: 0;
    transition: all .2s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: rgb(255, 255, 255);
}

.gal:hover {
    filter: grayscale(0);
}

.gal:hover .insideGal {
    opacity: 1;
    transition: all .3s .1s ease-in-out;
}

.insideGal span {
    text-align: center;
}

.insideGal .galUnderline {
    height: 3px;
    background-color: white;
    width: 0px;
    transition: all .3s .3s ease-in-out;
    margin-top: 5px;
}

.gal:hover .insideGal .galUnderline {
    width: 50px;
}

.galPic img {
    height: 150px;
    margin: 10px;
}

.subGal {
    width: 290px;
    height: 270px;
}


/*==============================[MEDIA]==================================*/

@media only screen and (min-width: 1400px) {
    .gal1,
    .gal2,
    .gal3,
    .gal4,
    .gal5,
    .gal8 {
        width: 370px;
        height: 270px;
    }
    .gal1,
    .gal4 {
        height: 570px;
    }
    .gal6,
    .gal7 {
        width: 770px;
        height: 270px;
    }
    .insideGal {
        height: 230px;
    }
    .gal1 .insideGal,
    .gal2 .insideGal,
    .gal3 .insideGal,
    .gal4 .insideGal,
    .gal5 .insideGal,
    .gal8 .insideGal {
        width: 330px;
    }
    .gal1 .insideGal,
    .gal4 .insideGal {
        height: 530px;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .gal1,
    .gal2,
    .gal3,
    .gal4,
    .gal5,
    .gal8 {
        width: 340px;
        height: 250px;
    }
    .gal1,
    .gal4 {
        height: 530px;
    }
    .gal6,
    .gal7 {
        width: 710px;
        height: 270px;
    }
    .insideGal {
        height: 210px;
    }
    .gal1 .insideGal,
    .gal2 .insideGal,
    .gal3 .insideGal,
    .gal4 .insideGal,
    .gal5 .insideGal,
    .gal8 .insideGal {
        width: 300px;
    }
    .gal1 .insideGal,
    .gal4 .insideGal {
        height: 490px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .gal1,
    .gal2,
    .gal3,
    .gal4,
    .gal5,
    .gal8 {
        width: 280px;
        height: 205px;
    }
    .gal1,
    .gal4 {
        height: 440px;
    }
    .gal6,
    .gal7 {
        width: 590px;
        height: 205px;
    }
    .insideGal {
        height: 165px;
    }
    .gal1 .insideGal,
    .gal2 .insideGal,
    .gal3 .insideGal,
    .gal4 .insideGal,
    .gal5 .insideGal,
    .gal8 .insideGal {
        width: 240px;
    }
    .gal1 .insideGal,
    .gal4 .insideGal {
        height: 400px;
    }
}

@media only screen and (max-width: 991px) {
    .gal {
        width: 540px;
        height: 280px;
        margin: 10px auto;
        float: none;
        display: block;
        padding-top: 1px;
    }
    .fullHeight>.container>div {
        float: none !important
    }
    .insideGal {
        height: 240px;
        width: 500px;
        opacity: 1;
    }
}