/*
Theme Name: Tom de Peyret
Author: Thibault Brevet
Author URI: https://www.thibault.io
Description: Tom de Peyret WP Theme.
Version: 1.0
Text Domain: tom-de-peyret
*/

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: Helvetica, Arial, sans-serif;
}

body {
	overflow-y: scroll;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	padding: 1.5em;
	z-index: 10;
	box-sizing: border-box;
}

.bio {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 4em 1.5em;
	box-sizing: border-box;
}

.bio-col {
	width: calc((100% - 2em) / 4);
	max-width: 450px;
	display: inline-block;
	vertical-align: top;
	padding-right: 3em;
	box-sizing: border-box;
	margin-bottom: 3em;
}

.bio-col a:link {
	color: #000;
}

.bio-col a:visited,
.bio-col a:hover {
	color: #000;
}

.bio-col a:hover {
	text-decoration: underline;
}

.bio-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 1.5em;
	z-index: 10;
}

.bio-close a:link,
.bio-close a:visited{
	color: #000;
	text-decoration: none;
}

.bio-close a:hover {
	border-bottom: 1px solid #000;
}

.index {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 5em 3em;
	box-sizing: border-box;
}

.index-image {
	display: inline-block;
	width: calc((100% - 2em) / 4);
	height: calc((100vw - 2em) / 7);
	transform: scale(1);
	transition: transform 0.1s ease-in-out;
	margin-bottom: 4em;
}

.index-image:hover {
	cursor: pointer;
	transform: scale(1.04);
}

.index-image img {
	display: block;
	height: calc(100% - 1.5em);
	margin: 0 auto;
	margin-bottom: 0.5em;
}

.index-image a:link,
.index-image a:visited,
.index-image a:hover {
	color: #000;
	text-decoration: none;
}

.index-title {
	text-align: center;
}

.index-title_title {
	display: inline;
}

.index-title_year {
	display: none;
}

.index-image:hover .index-title_title {
	display: none;
}

.index-image:hover .index-title_year {
	display: inline;
}

.images {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.image-wrapper {
	width: 100%;
	height: 85vh;
	box-sizing: border-box;
	padding: 1.5em;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
}

.image-left,
.image-right {
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
}

.image-left {
	left: 0;
}

.image-right {
	right: 0;
}

.image-left:hover {
	cursor: w-resize;
}

.image-right:hover {
	cursor: e-resize;
}

.images-arrows {
	position: fixed;
	bottom: 1.5em;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	text-align: center;
	font-size:
}

.images-arrows span {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
	font-size: 1.25em;
}

.images-arrows span:hover {
	border-bottom: 1px solid #000;
	cursor: pointer;
}

.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 1.5em;
	box-sizing: border-box;
	z-index: 10;
}

.header a:link,
.header a:visited,
.footer a:link,
.footer a:visited {
	color: #000;
	text-decoration: none;
}

.header a:hover,
.footer a:hover {
	border-bottom: 1px solid #000;
}

@media only screen and (max-width: 768px) {

	.bio {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 5em 1.5em;
		box-sizing: border-box;
	}

	.bio-col {
		width: 100%;
		max-width: auto;
		display: block;
		padding-right: 0;
		box-sizing: border-box;
	}

	.bio-close {
		padding: 1em 1.5em;
	}

	.index {
		padding: 5em 1.5em;
	}

	.index-image {
		display: inline-block;
		width: calc((100% - 2em) / 2);
		height: calc((100vw - 2em) / 4);
		margin-bottom: 2.5em;
	}

	.header,
	.footer {
		width: 100%;
		background-color: #fff;
		padding: 1em 1.5em;
	}

	.images-arrows {
		display: none;
	}

}