.spot_box{
	width: 100%;
	font-size: 0;
}
.spot{
	font-size: 24px;

	display: inline-block;
	text-align: center;
	position: relative;
	/*width: 275px;*/
	background-color: #00b0ff;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	
	margin: 1.5%;
	
	width: 30.3%; /* old browsers */
	float: left; /* old browsers */
}




@media only screen and (min-width: 600px) {
	.spot{
		width: 30.3%
	}
}
@media only screen and (max-width: 600px) {
	.spot{
		width: 47%
	}
}





.spot img{


	position: relative;
	display: block; 

	height: 100%;
	width: 100%;

	float: left;

	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;

	opacity: 1;

}


.spot:hover img{

	opacity: 0.7;

}

.spot p{
	
	font-family: 'Raleway', 'sans-serif';
	font-size: 24pt; 
	color: #fff;
	text-decoration: none;

	position: absolute;

	width: 100%;
	text-align: center;
	margin: 0;
	
	top: 50px;
	opacity: 0;

	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;

}

.spot:hover p{
	top: 10px;
	opacity: 1;

}

.spot div{


	font-family: 'Raleway', 'sans-serif';
	font-size: 24pt; 
	color: #fff;
	text-decoration: none;

	position: absolute;

	bottom: -20px;

	width: 100%;
	text-align: center;

	-webkit-transform: translate3d(0px,10px,0);
	transform: translate3d(0px,10px,0);

	opacity: 0;

	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	transition-duration: 0.2s;

	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;

}

.spot:hover div{

	bottom: 20px;

	opacity: 1;

}