@import url('https://fonts.googleapis.com/css?family=Merriweather&display=swap');
body {
    background: #ddd;
    font-weight: 400;
    font-size: 15px;
    color: #333;
    overflow-y: scroll;
    overflow-x: hidden;
}
#grid{
	padding: 80px 40px;
}
.view:hover .s2{
	-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg);
}
.view:hover .s3, 
.view:hover .s5{
	-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
	-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
	-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
	-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
	transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg);
}
.view:hover .s4{
	-webkit-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
	-moz-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
	-o-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
	-ms-transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
	transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg);
}

.view .s1 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}

.view .s2 > .overlay {
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
	background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%);
}

.view .s3 > .overlay {
	background: -moz-linear-gradient(right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: -ms-linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
	background: linear-gradient(right, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.2) 100%);
}

.view .s4 > .overlay {
	background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
}

.view .s5 > .overlay {
	background: -moz-linear-gradient(left, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(left, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
@media (max-width: 500px){
#grid {
    padding: 80px 6px;
}
	}
.grid-box{
	float: left;
}
.img-caption{
    width: 316px;
    position: absolute;
    float: left;
    left: 0px !important;
    bottom: -50px !important;
    overflow: hidden;
    font-size: 16px;
    color: #333;
    letter-spacing: 0.5px;
    text-align: center;
    font-weight: bold;
    font-family: 'Merriweather', serif;
}