/*
Theme Name: Jonathan Ricquebourg
Author: Sophie Rentien Lando
*/

@font-face {
	font-family: 'Garamond';
	src: url('fonts/Garamond.ttf') format('truetype');
	font-style: normal;
}

@font-face {
	font-family: 'Garamond';
	src: url('fonts/Garamond_Italic.ttf') format('truetype');
	font-style: italic;
}

* {
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: 'Garamond', sans-serif;
}

body {
	overflow-x: hidden;
	background-color: #F1F1F1;
	font-size:12pt;
}

a {
	color:black;
	text-decoration: none;
}

header {
	padding:5px 10px;
}

.home header, .page header, .home .lang, .page .lang {
	mix-blend-mode: difference;
}

header a, header p {
	color:white;
}


.lang {
	position:absolute;
	padding:5px 10px;
	right:0;
	z-index: 6;
}

.lang li {
	display: inline-block;
	color:white;
}

.lang li:first-of-type:after {
	content:' /';
	color:white;
	opacity:0.3;
}

.lang a {
	opacity:0.3;
	transition-duration:0.2s;
	transition-property: opacity;	
	color:white;
}

.lang a:hover {
	opacity:1;
}

.lang li.current-lang a {
	opacity:1;
}

#abt-mb {
	display: none;
}

/*Nav*/
ul {
	position:absolute;
	padding:5px;
	top:0;
	margin-left: calc(25vw + 2px);
	width:75%;
}

.home ul, .page ul {
	mix-blend-mode: difference;
}

.home li a, .page li a {
	color:white;
}

ul li {
	list-style: none;
	display:inline-block;
	width:calc(100% / 3 - 4px);
	font-style: italic;
}

ul li a {
	transition-duration:0.2s;
	transition-property: opacity;	
	opacity:0.3;

}


ul li.current-menu-item a {
	opacity:1;
}

ul li a:hover {
	opacity:1;
}

/*Home page / Cat pages*/

main.cats {
	padding-bottom: 30px;
}

main article {
	width:calc(100% - 10px);
	margin-left:5px;
	margin-top:30px;
	transition-duration:0.2s;
	transition-property: opacity;
}

main article img, main article p, main article figcaption, main article .wide {
	transition-duration:0.2s;
	transition-property: opacity;
}

main article:first-of-type {
	width:calc(100% - 10px);
	margin-left:5px;
	margin-top:60px;
}

main article .thumbnails {
	width:75%;
	display: inline-block;
}

main article .thumbnails .thumb {
	width: calc(100% / 3 - 5px);
	display: inline-block;
	margin-left: 5px;
	height: calc(28vh + 14px);
	position: relative;
	vertical-align: top;
	overflow: hidden;
}

main article .thumbnails .thumb img {
	position: absolute;
	height: 28vh;
	width: auto;
	top: 0;
	max-width: unset;
	margin-left: 50%;
	transform: translateX(-50%);
}

.wide {
	height:28vh;
	overflow:hidden;
}

main article .thumbnails .thumb .wide img {
	width:100%;
	height:auto;
	margin-left:0;
	margin-top:14vh;
	transform:translateY(-50%);
	position:relative
}

main article .thumbnails .thumb .wide + figcaption {
	margin-top:0;
}

main article .thumbnails .thumb figcaption {
	font-size: 8pt;
	letter-spacing: 1px;
	padding-top:2px;
	margin-top: 28vh;
	background-color:#F1F1F1;
}

main article .information {
	width:25%;
	display: inline-block;
	text-align: center;
	vertical-align: top;
	height:13vw;
}

main article .information p {
	margin-top: 13vh;
	transform: translateY(-50%);
}

main article .information p em:first-of-type {
	text-transform: uppercase;
	font-size:12pt;
}

main article:hover p {
	opacity:0.3;
}

main article:hover img {
	opacity:0.7;
}

main article:hover .wide {
	opacity:0.7;
}

main article:hover .wide img {
	opacity:1;
}

/*Project pages*/
.single {
	background:black;
}

.single header {
	color:white;
	position:absolute;
	z-index: 5;
}

.single ul {
	z-index: 3;
}

.single ul a {
	color:white;
}

.single ul li a {
	opacity:1;
}

.nav_proj p a, .single header p a, .col a, .page header a {
	transition-duration:0.2s;
	transition-property: opacity;
}

.page header a:hover, .single ul li a:hover, .nav_proj p a:hover, .single header p a:hover, .col a:hover {
	opacity: 0.3;
}

.nav_proj {
	/*mix-blend-mode: difference;*/
	color:white;
	position:absolute;
	z-index: 2;
	padding:24px 10px;
	width:100%;
}

.nav_proj p {
	font-style: italic;
}

.nav_proj p#prev {
	float:left;
}

.nav_proj p#next {
	float:right;
}

.nav_proj a {
	color:white;
}


figure {
	top:0;
	position:absolute;
	width:100vw;
	height:100vh;
	overflow: hidden;
	background-color: black;
	opacity:0;
	transition-duration:0.5s;
	transition-property: opacity;
}

figure img {
	position:absolute;
	top:0;
	width:100vw;
	height:auto;
	margin-top:50vh;
	transform:translateY(-50%);
}

.wide img {
	width:auto;
	height:100vh;
	margin-top:0;
	margin-left:50vw;
	transform:translateX(-50%);
	max-width: unset;
}

.single figure figcaption {
	color:white;
	position:absolute;
	bottom:0;
	z-index: 2;
}

figure {
	opacity:0;
}

figure:first-of-type {
	opacity:1;
}

.columns {
	position: absolute;
	bottom:0;
	z-index: 3;
	color:white;
	width: 100%;
	padding: 0px 10px;
}

.col {
	width:25%;
	display: inline-block;
	padding:5px;
}

.col svg {
	margin-bottom: -3px;
}

.col a {
	color:white;
}

#col_1 {
	padding:0;
}

#mobile-only {
	display: none;
}

.single figcaption {
	padding:5px;
	padding-left:calc(25vw + 10px);
}

/*About*/

main.about {
	padding:10px;
	padding-top:50px;
}

.about-ctn {
	display: inline-block;
	vertical-align: top;
}

.about-ctn p {
	padding-bottom:36px;
}

#films {
	width:50%;
}

#awards, #contact {
	width:25%;
	padding-left:5px;
}

.about-ctn h1 {
	text-align:center;
	font-weight: normal;
	font-style: italic;
	font-size:12pt;
	padding-bottom:26px;
}

.about-ctn h2 {
	text-align:center;
	font-weight: normal;
	font-style: italic;
	font-size:12pt;
}

#films h1 {
	width:50%;
}

#films h2 {
	width:50%;
	padding-bottom:18px;
}

#contact p {
	text-align: center;
}