@charset "UTF-8";
/*

Kirby Starterkit

Author: Bastian Allgeier / Sascha Lack
URL:    http://getkirby.com
Email:  support@getkirby.com

*/


/* Fonts
-------------------------------------------------- */
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/sourcesanspro-300.woff) format('woff');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/sourcesanspro-400.woff) format('woff');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: normal;
	font-weight: 600;
	src: url(../fonts/sourcesanspro-600.woff) format('woff');
}
@font-face {
	font-family: 'Source Sans Pro';
	font-style: italic;
	font-weight: 400;
	src: url(../fonts/sourcesanspro-400-italic.woff) format('woff');
}
@font-face {
	font-family: 'Sani Trixie';
	src: url(../fonts/sani/SaniTrixieSans.eot);
	src: url(../fonts/sani/SaniTrixieSans.eot?#iefix) format('embedded-opentype'),
	url(../fonts/sani/SaniTrixieSans.woff2) format('woff2'),
	url(../fonts/sani/SaniTrixieSans.woff) format('woff'),
	url(../fonts/sani/SaniTrixieSans.ttf) format('truetype'),
	url(../fonts/sani/SaniTrixieSans.svg#sani_trixie_sansregular) format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'gap_sansregular';
	src: url(../fonts/gap/GapSans-webfont.eot);
	src: url(../fonts/gap/GapSans-webfont.eot?#iefix) format('embedded-opentype'),
	url(../fonts/gap/GapSans-webfont.woff2) format('woff2'),
	url(../fonts/gap/GapSans-webfont.woff) format('woff'),
	url(../fonts/gap/GapSans-webfont.ttf) format('truetype'),
	url(../fonts/gap/GapSans-webfont.svg#gap_sansregular) format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'gap_sansblack';
	src: url(../fonts/gap/GapSansBlack-webfont.eot);
	src: url(../fonts/gap/GapSansBlack-webfont.eot?#iefix) format('embedded-opentype'),
	url(../fonts/gap/GapSansBlack-webfont.woff2) format('woff2'),
	url(../fonts/gap/GapSansBlack-webfont.woff) format('woff'),
	url(../fonts/gap/GapSansBlack-webfont.ttf) format('truetype'),
	url(../fonts/gap/GapSansBlack-webfont.svg#gap_sansblack) format('svg');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'gap_sansbold';
	src: url(../fonts/gap/GapSansBold-webfont.eot);
	src: url(../fonts/gap/GapSansBold-webfont.eot?#iefix) format('embedded-opentype'),
	url(../fonts/gap/GapSansBold-webfont.woff2) format('woff2'),
	url(../fonts/gap/GapSansBold-webfont.woff) format('woff'),
	url(../fonts/gap/GapSansBold-webfont.ttf) format('truetype'),
	url(../fonts/gap/GapSansBold-webfont.svg#gap_sansbold) format('svg');
	font-weight: 900;
	font-style: normal;
}

/* Reset
-------------------------------------------------- */
*, *:before, *:after {
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
	display: block;
}


/* Pix
-------------------------------------------------- */
img {
	display: block;
	max-width: 100%;
}


/* Links
-------------------------------------------------- */
a {
	color: #000;
	text-decoration: none;
	transition: color .3s, background .3s, border .3s;
}
a:hover {
	color: red;
}


/* Clearfix
-------------------------------------------------- */
.cf:after {
	content: "";
	display: table;
	clear: both;
}


/* Site
-------------------------------------------------- */
html {
	height: 101%;
	font-family: "Sani Trixie", sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 16px;
}
body {
	margin: 0 auto;
	background: #fbfbfb;
	color: #222;
	font-size: 1rem;
	line-height: 127%;
}


/* Header
-------------------------------------------------- */
#header {
	border-bottom: 1px solid black;
	padding: 20px;
	position: fixed;
	background: #fff;
	width: 100%;
	height: 5rem;
	z-index: 9999999;
}
.logo {
	display: inline-block;
	margin-top: -1px;
	float: left;
}
.logo img {
	height: 2.75rem;
}


/* Navigation
-------------------------------------------------- */

#menubutton{
	display: none;
	float: right;
	cursor: pointer;
	margin-top: .25rem;
}
#menubutton img{
	height: 2.3rem;
}
.menu a {
	display: inline-block;
	color: #222;
	font-size: 2rem;
	line-height: 1.25em;
}
.menu a:hover {
	color: red;
	text-decoration: none;
}
.menu .active {
	border-bottom: 1px solid black;
}
li, ul {
	list-style: none;
}
.menu > li {
	position: relative;
}
.submenu {
	position: absolute;
	z-index: 1;
	display: none;
	left: 1rem;
}
.submenu:before {
	position: absolute;
	z-index: -1;
	content: '';
	top: -6px;
	left: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #222;
}
.submenu li {
	border-bottom: 1px solid #444;
}
.submenu a {
	padding: 6px 18px;
	font-size: 12px;
	font-weight: 300;
	color: #fff;
	background: #222;
	white-space: nowrap;
}
.submenu a:hover {
	background: #333;
	color: #fff;
}

@media screen and (max-width: 1023px) {
	#header{
		position: relative;
		height: auto;
	}
	#main {
		padding-top: 0rem;
	}
	.col1, .col2 {
		width: 100% !important;
	}
	#menubutton{
		display: inline-block;
	}
	#header nav {
		display: none;
	}
	#header nav.shown {
		display: block;
		margin-top: 3.5rem;
		clear: both;
	}
	.menu a {
		color: #222;
		font-size: 2rem;
		line-height: 1.25em;
	}
	#cover #caption {padding-bottom: 2rem !important;}
	#text-accueil {
		display: none !important;
	}
	.item, .filters-box {
		width: auto !important;
		margin: 0 2rem 5rem 2rem !important;
	}
	.recompenses {
		width: auto !important;
		margin-left: 0 !important;
		padding-right: 0 !important;
	}
	.actu p { font-size: 1.1rem !important; }
}
@media screen and (min-width: 1024px) {
	body {
	}
	.logo {
		float: left;
	}
	.menu {
		float: right;
		margin-right: .5rem;
	}
	.menu > li {
		float: left;
	}
	.menu > li > a {
		border: 0;
		margin: 0rem 0 0 3rem;
	}
	.menu > li > a.lang-link {
		font-size: 1rem;
		margin-left: 2.5rem;
		line-height: 3rem;
	}
	.menu > li > a.fb-link {
		font-size: 1rem;
		margin-left: 1.5rem;
		line-height: 3rem;
	}
	.menu > li > a.newsletter-link {
		font-size: 1rem;
		margin-left: 1rem;
		line-height: 3rem
	}
	.menu > li:hover .submenu {
		/*display: block;*/
	}
	#main {
		padding-top: 5rem;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1500px) {
	.menu > li > a {
		color: #222;
		font-size: 1.2rem !important;
		line-height: 1.25em !important;
		margin: .75rem 0 0 2rem !important;
	}
	.menu > li > a.lang-link, .menu > li > a.fb-link, .menu > li > a.newsletter-link  {
		font-size: .8rem !important;
		margin: 1.12rem 0 0 1rem !important;
	}
	.menu > li > a.lang-link {
		margin-left: 1.5rem !important;
	}
	.actu p { font-size: 1.1rem !important; }
}

/* Headings
-------------------------------------------------- */
h1 {
	font-size: 4rem;
	line-height: 1em;
	margin-bottom: .5rem;
	font-weight: normal;
}
h2 {
	font-size: 3rem;
	line-height: 1em;
	margin-bottom: .5rem;
	font-weight: normal;
}
h3 {
	font-size: 2rem;
	line-height: 1em;
	margin-bottom: .5rem;
	font-weight: normal;
}
h4 {
	font-size: 1.2rem;
	line-height: 1em;
	margin-bottom: .5rem;
	font-weight: normal;
}
h1 a, h2 a, h3 a, h4 a {
	color: inherit;
	border: 0 !important;
}


/* Main
-------------------------------------------------- */
#main {
	vertical-align: top;
}
hr {
	height: 1px;
	background: #000;
}
#main p,
#main figure,
#main ul,
#main ol {
}
#main a {
}
#main a:hover {
	/*border-color: #222;*/
}
#cover {
	height: 600px;
	position: relative;
	overflow: hidden;
}

#cover > .centeredImg {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: absolute;
	top: 0;
	left: 0;
}
#cover #caption {
	font-family: "gap_sansregular" , sans-serif;
	position: absolute;
	text-align: center;
	padding : 0 3%;
	width: 100%;
	height:	100%;
	display: table;
	z-index: 9;
}
#caption #captionwarp{
	vertical-align: middle;
	display: table-cell;
	padding-bottom: 4%;
}
#captionwarp h1{
	font-size: .75em;
	margin-bottom: .25em;
	line-height: 1.25em;
}
#captionwarp h2 {
	font-size: .25em;
}
#caption.accueil #captionwarp h1{ font-size: .75em; }

#cover .trailer iframe {
	width: 100%;
	height: 100%;
}
#cover .trailer, #cover .video {
	height: 100%;
}
#cover #bigButton {
	font-size: 2.5rem;
	border: 0.3rem solid;
	border-radius: 3rem;
	height: 4.5rem;
	width: 4.5rem;
	line-height: 3.85rem;
	text-align: center;
	padding-left: 0.5rem;
	cursor: pointer;
	display: inline-block;
	margin-top: 2rem;
}

/* Text blocks */
.text ul,
.text ol {
	margin-left: 1rem;
}
#text-accueil {
	padding: 0.75rem 1rem .3rem 1rem;
	background: #FAFAE0;
	margin: 1rem;
	border: 1px solid black;
	width: 300px;
	position: absolute;
	z-index: 9999;
}
#text-accueil .cross{
	position: absolute;
	right: -7px;
	top: -7px;
	font-size: 1rem;
	cursor: pointer;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}
#text-accueil #liens{
}
#text-accueil p{
	margin-bottom: .5rem;
}
.actu{
	margin: 5rem 5%;
}
.actu:last-child{
	border: none;
}
.actu p{
	font-size: 1.35rem;
	line-height: 1.35em;
}
.actu a {
	border-bottom: 1px solid;
}
.actu a.film {
	border: 1px solid;
	padding: 0 .5rem;
}
.actu figure, .actu img {
	width: 100%;
	height: auto;
}
#scrollButton {
	margin-top: -109px;
	margin-bottom: 54px;
	margin-left: auto;
	margin-right: auto;
	width: 70px;
	padding: 10px;
	text-align: center;
	position: relative;
	cursor: pointer;
	z-index: 999;
}
#scrollButton #arrow{
	width: 50px;
	height: 50px;
	margin-top: -15px;
	padding: 10px;
	text-align: center;
	cursor: pointer;
	border-bottom: 1px solid;
	border-left: 1px solid;
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/*
#scrollButton {
margin-top: -109px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
width: 200px;
padding: 10px;
text-align: center;
background: white;
border: 1px solid black;
position: relative;
cursor: pointer;
z-index: 999;
}
#scrollButton h2{
margin-bottom: 5px;
font-size: 2rem;
}
#scrollButton:after, #scrollButton:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
#scrollButton:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 20px;
margin-left: -20px;
}
#scrollButton:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 21px;
margin-left: -21px;
}
*/
.col1{
	width: 50%;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 2rem;
	border: 1px solid black;
}
.col2{
	width: 48%;
	display: inline-block;
	vertical-align: top;
	padding: 1.25rem;
	padding-top: 0px;
	margin-bottom: 3rem;
}
.date.tag {
	margin-bottom: 1.5rem;
}
.cartouche{
	width: 25%;
	display: inline-block;
	vertical-align: top;
	margin-right: 4%;
	margin-bottom: 2rem;
	min-width: 300px;
}
.article{
	margin-bottom: 3rem;
	min-width: 300px;
	max-width: 50%;
	display: inline-block;
	vertical-align: top;
}
.article p{
	margin-bottom: 2rem;
}
.article figure{
	margin-bottom: 3rem;
}
.col2 .demi:first-child {
	margin-right: 1rem;
}
#container{
	margin: 4rem 4%;
	margin-right: 0;
	vertical-align: top
}
.item, .filters-box {
	margin: 0 4% 5rem 1rem;
	display: inline-block;
	vertical-align: top;
	max-width: 300px
}
.item .textblock{
	padding-top: 1rem;
}
.item .metablock {
	margin-bottom: 1rem;
}
.item .image img{
	display: block;
	border: 1px solid black;
	height: 100%;
}
.item .imageblock .tag{
	position: absolute;
	margin-top: -1rem;
	margin-left: -1rem;
}
.tag{
	display: inline-block;
	margin: 0 .5rem .25rem 0;
	padding: .25rem .5rem;
	border: 1px solid black;
	background: white;
}
/* Catalogue tags selecteurs
--------------------------------------------------*/
#entete{
	padding: 1rem 1rem;
	border: 1px solid black;
	background: #FAFAE0;
	width: 100%;
	margin-bottom: 4rem;
}
.tag-list {
	float: left;
	border: 1px solid;
	background: none repeat scroll 0% 0% rgb(255, 255, 255);
	margin-bottom: 1rem;
	padding: 0.5rem 1rem;
	width: 100%;
}
.tag-list:last-child {
	margin-bottom: 0;
}
.tag-list p{
	cursor: pointer;
}
.tag-list p:before {
	content: "▶";
	font-size: .7rem;
	vertical-align: middle;
	margin-right: 0.6rem;
	margin-bottom: .1rem;
	display: inline-block;
	line-height: 0;
}
.tag-list.open p:before {
	content: "▼";
}
.tag-list li {
	display: none;
}
.tag-list.open li {
	display: block;
	cursor: pointer;
	padding-left: 1.25rem;
}
.tag-list.open span{
	border-bottom: 1px solid black;
}
.remove-filters:hover span {
	text-decoration: line-through;
}

/* Project meta
-------------------------------------------------- */
ul.meta {
	border: 1px solid black;
	margin-bottom: 1rem;
	padding-bottom: .75rem;
}
.meta h2, .meta h3, .meta h4{
	margin: 0;
	line-height: 1.25em;
}
.meta li {
	list-style: none;
	padding: 0 1rem .25rem;
	font-size: 1rem;
}
.meta li:last-child {
	border: none;
}
.meta li b {
	font-weight: 400;
	color: #000;
	padding-right: .25rem;
}
.meta .meta-title {
	border-bottom: 1px solid black;
	margin-bottom: .75rem;
	padding: .5rem 1rem;
}
.meta .label{
	border-bottom: 1px solid #ccc;
	padding-bottom: 1px;
}
.meta .meta-img{
	padding: 0;
}
.meta .meta-img img{
	width: 100%;
}
.meta.poster{
	padding-bottom: 0;
}
.meta.poster li {
	margin: 0;
}

/* Projet Photo Album
-------------------------------------------------- */
.album-photos figure {
	display: none;
}

.album-photos figure:first-child {
	display:block;
}
.album-photos.active {
	cursor: url("http://samuelriversmoore.net/public/docs/css/M_right.png") 10 20, pointer;
}
.album-photos-wrapper {
	position: relative;
	font-size: 1rem;
}
.album-photos-wrapper .compteur {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	color: rgb(255, 255, 255);
	border: 1px solid;
	padding: 0.1rem .3rem;
}

/* PROJECTIONS
------------------------------------------------------- */
.projections {
	margin-bottom: 3rem;
}
.projection {
	border-bottom: 1px solid;
	cursor: ns-resize;
	padding-top: .65rem;;
}
.projections h3 {
	border-bottom: 1px solid black;
	margin: 0;
	padding-bottom: .75rem;
}
.projection span  {
	display: block;
	width: 20%;
	float: left;
	height: 2rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.projection .date {
	width: 25%;
	padding-right: 1%;
}
.projection .place{
	text-align: right;
	padding-right: 1%;
}
.projection .city{
	text-align: right;
	width: 15%;
}
.projection .comment {
	width: 35%;
	padding-right: 1%;
}
.projection .plus {
	width: 5%;
	text-align: right;
}

.projection.open span {
	height: auto;
	white-space: normal;
	margin-bottom: 1rem;
}

/* RECOMPENSES SELECTIONS
-------------------------------------------------*/
.recompenses {

}

/* BIO DES AUTEURS
-------------------------------------------------*/
.artistes {
	padding-top: 1rem;
}

/* Project teaser
-------------------------------------------------- */
.teaser {
	list-style: none;
}
.teaser li {
	margin: 1.5rem 1rem;
	list-style: none;
}
@media screen and (min-width: 800px) {
	.teaser li {
		/*float: left;
		width: 30%;
		margin-left: 5%;*/
	}
}


/* Next/Prev nav
-------------------------------------------------- */
.nextprev {
	margin-top: 3rem;
	width: 100%;
}
.nextprev a {
	border: 0;
	padding: .5rem .75rem;
	border: 1px solid black;
	width: 50%;
}
.nextprev a:last-child{
	border-left: none;
}
.nextprev a:first-child{
	border-left: 1px solid black;
}
.nextprev .prev {
	float: left;
}
.nextprev .next {
	float: right;
	text-align: right;
}


/* Newsletter
--------------------------------------------------*/
.uniform__potty {
	position: absolute;
	left: -9999px;
}

.newsletter-page.article {
	padding-right: 4rem;
	max-width: none;
	width: 100%;
	text-align: center;
}

.newsletter-page p {
	font-size: 2rem;
    line-height: 120%;
    font-family: "gap_sansregular" , sans-serif;
}

.newsletter-page form {
	text-align: center;
	padding: 0rem 4rem;
}

input[name="mail"] {
	border: 1px solid;
	font-size: 2rem;
	padding: 1rem;
	font-family: "gap_sansregular" , sans-serif;
	width: 100%;
    margin-bottom: 2rem;
}
input[type="submit"] {
	border: 1px solid;
    padding: 1rem 1.5rem;
    font-family: "gap_sansregular" , sans-serif;
    font-size: 2rem;
    background-color: #FAFAE0;
    cursor: pointer;
    margin-bottom: 2rem;
}
@media screen and (max-width: 1024px) {
	.newsletter-page.article {
		padding-right: 1rem;
	}
	.newsletter-page form {
		text-align: center;
		padding: 0;
	}
}

/* Footer
-------------------------------------------------- */
.footer {
	padding: 1rem 1rem 4rem;
	font-size: 1rem;
	border-top: 1px solid black;
}
.footer .copyright {
	margin-right: 4rem;
	float: left;
}
.footer .links {
	margin-left: 4rem;
	margin-right: .5rem;
	margin-bottom: 1rem;
	text-align: right;
	float: right;
}
.colophon a b {
	color: red;
	padding-left: .25rem;
}