.thumbSpace {
    overflow: hidden;
}

.thumb {
    padding: 0;
    height: 20vw;
    margin-top: 20px;
    border-bottom: 2px solid #5fadc7;
    overflow: hidden;
    transition-delay: 0.5s;
}

.thumb img {
    height: auto;
    width: 35%;
    position: relative;
    transition: 0.4s;
}

.thumb p {
    font-size: 90%;
    text-align: left;
    letter-spacing: normal;
    padding-bottom: 11px;
}

.thumbTitle {
    position: absolute;
    color: #ffffff;
    height: 20vw;
    width: calc(100% - 30px);
    margin-top: 20px;
    padding: 30px;
    background-color: #5fadc7;
    z-index: 90;
    top: 60%;
    -ms-transform: translateY(40%);
    transform: translateY(40%);
    transition: 0.4s;
}

.thumbTitle h8 {
    color: #ffffff;
    font-size: 180%;
    font-weight: 200;
    padding-bottom: 10px;
}

.thumb:hover .thumbTitle {
    top: 0;
    -ms-transform: translateY(0);
    transform: translateY(0);
    transition: 0.4s ease-out 0.4s;
}

.thumb:hover img, .thumb:hover h8 {
    top: 0;
    -ms-transform: translateY(10%);
    transform: translateY(10%);
    transition: 0.4s ease-out 0.4s;
}

@media screen 
and (max-width : 1199px) {
.thumb {
    margin-top: 20px;
    width: 28vw;
    height: 28vw;
}

.thumbTitle {
    margin-top: 20px;
    width: 28vw;
    height: 28vw;
}
}

@media screen 
and (max-width : 991px) {
.thumb p {
    font-size: 100%;
}
    
.thumb {
    width: 40vw;
    height: 62vw;
}

.thumbTitle {
    width: 40vw;
    height: 62vw;
}
}

@media screen 
and (max-width : 767px) {    
.thumb {
    width: 90vw;
    height: 90vw;
}

.thumbTitle {
    width: 90vw;
    height: 90vw;
}
}