/* CSS Document */
body {
	background-color:#f5f5f5;
}
.wrapper {
	max-width:1000px;
	margin:40px auto 0;
	font:16px/22px 'Lato', sans-serif;
	font-weight:300;
	text-align:center;
	text-transform:uppercase;
}
h2 {
	font-size:0.8em;
	font-weight:300;
	margin:0;
}
a {
	color:#fff;
	text-decoration:none;
	display:block;
}
a:hover figure, a:hover .box-headline {
	opacity:0.8;
	transition: all 0.25s;
	-moz-transition: all 0.25s;
	-webkit-transition: all 0.25s;
	-o-transition: all 0.25s;
}
.box {
	border:1px solid #D7D7D7;
	box-sizing:border-box;
	margin-bottom:20px;
	-webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
	background-color:#fff;
}
.box figure {
	overflow:hidden;
	max-height:180px;
	margin:0;
}

/**
 * Animation
 */
@-webkit-keyframes example {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes example {
    from {opacity: 0;}
    to {opacity: 1;}
}
.box img {
	opacity:0;
	-webkit-animation-name: example;
    -webkit-animation-duration: 2s;
    animation-name: example;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
}
.box-headline {
	background-color:#8b1a1a;
	padding:10px 5px;
}
.delay_0 * {
	-webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.delay_1 * {
	-webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}
.delay_3 * {
	-webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.delay_2 * {
	-webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}
.delay_4 * {
	-webkit-animation-delay: 0.5s;
    animation-delay: 0.6s;
}