body {
	background-color:#eee;
}
* {
	margin:0;
	padding:0;
	font-family:"HPE";
}
.wrap {
	margin:0 auto;
	width:1000px;
	max-width:1000px;
}
.tile {
	width:400px;
	height:300px;
	margin:20px;
	background-color:#99aeff;
	display:inline-block;
	background-size:cover;
	position:relative;
	cursor:pointer;
	transition:all 0.4s ease-out;
	box-shadow:0px 35px 77px -17px rgba(0,0,0,0.44);
	overflow:hidden;
	color:white;
}
.tile img {
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	transition:all 0.4s ease-out;
}
.tile .text {
	z-index:99;
	position:absolute;
	padding:30px;
	height:calc(100% - 60px);
}
.tile h1 {
	font-weight:300;
	text-shadow:2px 2px 10px rgba(0,0,0,0.3);
}
.tile h2 {
	font-weight:100;
	margin-top:20px;
	font-style:italic;
	transform:translateX(200px);
}
.tile p {
	font-weight:300;
	margin-top:20px;
	line-height:25px;
	transform:translateX(-200px);
	transition-delay:0.2s;
}
.animate-text {
	opacity:0;
	transition:all 0.6s ease-in-out;
}
.tile:hover {
	box-shadow:0px 35px 77px -17px rgba(0,0,0,0.64);
	transform:scale(1.05);
}
.tile:hover img {
	opacity:0.2;
}
.tile:hover .animate-text {
	transform:translateX(0);
	opacity:1;
}
.dots {
	position:absolute;
	bottom:20px;
	right:30px;
	margin:0 auto;
	width:30px;
	height:30px;
	color:currentColor;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:space-around;
}
.dots span {
	width:5px;
	height:5px;
	background-color:currentColor;
	border-radius:50%;
	display:block;
	opacity:0;
	transition:transform 0.4s ease-out,opacity 0.5s ease;
	transform:translateY(30px);
}
.tile:hover span {
	opacity:1;
	transform:translateY(0px);
}
.dots span:nth-child(1) {
	transition-delay:0.05s;
}
.dots span:nth-child(2) {
	transition-delay:0.1s;
}
.dots span:nth-child(3) {
	transition-delay:0.15s;
}