/* ================================
 * !Reset styles
 * Based on Eric Meyer's reset ( http://meyerweb.com/eric/tools/css/reset/ )
 * ================================*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display:block;
}

body {
	line-height:1;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

/* ================================
 * !Layout
 * ================================*/
body {
	overflow-y: scroll;
	text-align: center;
}

/* ================================
 * !Header
 * ================================*/

.header {
	margin: 2em 0;
}

/* ================================
 * !Search form
 * ================================*/

.search-form {
	margin: 2em 0;
}

.search-form input {
	-webkit-appearance: none;
	border: 1px solid #CCC;
	font-size: 1.4em;
	padding: .5em;
	width: 25%;
}

.search-form button {
	border: 1px solid #CCC;
	font-size: 1.4em;
	padding: .45em;
}

/* ================================
 * !Loader
 * ================================*/
.loader {
	-webkit-animation-duration: 2s;
	-moz-animation-duration   : 2s;
	animation-duration        : 2s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count   : infinite;
	animation-iteration-count        : infinite;
	-webkit-animation-name: loader;
	-moz-animation-name   : loader;
	animation-name        : loader;
	background: url(../img/loader.png) no-repeat 50% 50%;
	display: none;
	height: 200px;
	left: 50%;
	margin: -100px 0 0 -100px;
	position: absolute;
	top: 50%;
	width: 200px;
	background-size: cover;
}

.loader.active {
	display: block;
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotateZ(0deg);
	}

	30% {
		-webkit-transform: rotateZ(-180deg);
	}

	60% {
		-webkit-transform: rotateZ(-360deg);
	}

	90% {
		-webkit-transform: rotateZ(-360deg) scale(.5);
	}

	100% {
		-webkit-transform: rotateZ(-360deg) scale(1);
	}
}

@-moz-keyframes loader {
	0% {
		-moz-transform: rotateZ(0deg);
	}

	30% {
		-moz-transform: rotateZ(-180deg);
	}

	60% {
		-moz-transform: rotateZ(-360deg);
	}

	90% {
		-moz-transform: rotateZ(-360deg) scale(.5);
	}

	100% {
		-moz-transform: rotateZ(-360deg) scale(1);
	}
}

@keyframes loader {
	0% {
		transform: rotateZ(0deg);
	}

	30% {
		transform: rotateZ(-180deg);
	}

	60% {
		transform: rotateZ(-360deg);
	}

	90% {
		transform: rotateZ(-360deg) scale(.5);
	}

	100% {
		transform: rotateZ(-360deg) scale(1);
	}
}

/* ================================
 * !List
 * ================================*/
.card {
	display: inline-block;
	position: relative;
	margin: 1em;
}

.card .photo {
	vertical-align: middle;
}

.card .front {
	display: inline-block;
	-webkit-transition: -webkit-transform .4s ease-in-out;
	transition        :         transform .4s ease-in-out;
}

.card.flipped .front {
	-webkit-transform: perspective(700px) scale(0);
	transform        : perspective(700px) scale(0);
}

/* ================================
 * !Cover
 * ================================*/

.cover {
	background-size: cover;
	background-position: 50% 50%;
	bottom: 0;
	left: 0;
	opacity: 0;
	position: fixed;
	right: 0;
	top: 0;
	transition: opacity 1s;
	z-index: -1;
}

.cover.ready {
	opacity: 1;
}