.thumbnail {

    float: left;

    max-width: 185px;

    max-height: 185px;

    position: relative;

    cursor: pointer;

}



.thumbnail img {

    max-width: 185px;

    max-height: 185px;

    position: absolute;

}



.caption {

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8);

    position: absolute;

    opacity: 0;

    transition: all 300ms ease-in-out;

    -webkit-transition: all 300ms ease-in-out;

    -moz-transition: all 300ms ease-in-out;

    -o-transition: all 300ms ease-in-out;

    -ms-transition: all 300ms ease-in-out;

}



.caption p {

    margin: 0;

    padding: 10px;

    position: absolute;

    top: 50%;

    -ms-transform: translateY(-50%);

    transform: translateY(-50%);

    text-align: center;

    color: white;

}



.thumbnail:hover .caption {

    opacity: 1;

}



.carousel {

    width: 50%;

    height: 400px;

}



.carousel .carousel-item>img {

    width: 100% !important;

    box-shadow: 6px 6px 30px rgba(0, 0, 0, 0.6);

    border: white solid 10px;

}



@media screen and (max-width:768px) {

    .thumbnail {

        width: 360px;

        height: 360px;

    }

    .thumbnail img {

        width: 360px;

        height: 360px;

    }

    .carousel {

        width: 100%;

        height: 400px;

    }

    .carousel .carousel-item>img {

        width: 80% !important;

    }

}