@font-face {
	font-family: "Western";
	/*src: url('font/Western Bang Bang.woff');
	*/
	src: url('font/Western Bang Bang.otf');
}
@font-face {
	font-family: "BeatStreet";
	/*src: url('font/Western Bang Bang.woff');
	*/
	src: url('font/beatstreet.ttf');
}

@font-face {
	font-family: "Amsterdam";
	/*src: url('font/Western Bang Bang.woff');
	*/
	src: url('font/amsterdam.ttf');
}

@font-face {
	font-family: "1942";
	/*src: url('font/Western Bang Bang.woff');
	*/
	src: url('font/1942.ttf');
}
@font-face {
	font-family: "typewriter";
	/*src: url('font/Western Bang Bang.woff');
	*/
	src: url('font/typewriter.ttf');
}
@font-face {
	font-family: "stampwriter";
	/*src: url('font/Western Bang Bang.woff');
	*/
	src: url('font/stampwriter.ttf');
}
@font-face {
	font-family: "jmh";
	/*src: url('font/Western Bang Bang.woff');
	*/
	src: url('font/JMH.ttf');
}
html {
	background: #a99888 url(images/fond_home.jpg) repeat ; 
	height:100%
}

body {
	height:100%; 
	margin:0; 
	padding:0; 
	font-family:"Western", arial;
	font-size : 32px;
	color:#d8bfa4;
}
a {
	color:#d8bfa4;
}

/* menu */
#menu {
	z-index:1000;
	/*border-right:2px solid #333333;*/
	padding:0px 10px; 
	width:90px; 
	height:100%;
	background:#0009; 
	position:absolute;
	text-align:center;
	overflow:hidden;
}
#menu.opaque {
	background:#111; 
}
#menu .item {
	cursor:pointer;
	transition:0.3s;
	margin:40px 0; 
	transform: scale(0.8);
}
#menu .item:hover {
	transform: rotateZ(10deg);
	transition:0.3s;
}

#menu .item.selected {
	transform: rotateZ(10deg);
}

#picto_lapin_jail {
	margin-top:13px;
	border:5px solid white; 
	height:45px ; 
	width:60px;
}
#picto_nous {
	margin-top:16px;
	height:50px ; 
	width:80px;
}
/* Fin menu */

/* pages */
.page {
	display:none; 
	padding:2%; 
	position:absolute; 
	top:0px; left:110px; right:0px; bottom:0px;
	overflow:auto;
}
.page .column {
	max-width:800px;
	margin:auto;
}
.page .title{
	font-size:64px;
	margin:0 0 20px 0;
}
.title.previous_closed{
	cursor:pointer;
	border-bottom: 0;
	font-size: 24px !important;
	background: white;
	color: black;
	padding: 5px 25px;
	opacity: 0.5;
	text-align: right;
	float: right;
}
.page .subtitle{
	font-size:38px;
}
.fullpageImage {
	height:100%
}

#links{
	position: absolute; bottom:0; right:0; padding:20px; 			color:white;	
}

#main #lapinou{
	position: absolute;
	top: 50%;
	right: 50%;
	margin-right: -420px;
	margin-top: -300px;
}
#main #lapinette{
	opacity:0.9;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -550px;
	margin-top: -150px;
}
#main #grafiti {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: scale(0.7);
	margin-left: -450px;
	margin-top: -300px;
}
#main #lampadaire{
	position:absolute; top:0; height:110%; left:70%;
display:none;
}

#calendar {
	background:url(images/fond_mur_noir.jpg);
	background-size:cover;
	background-position:center top;
	color:white;
	font-family : BeatStreet;
}
#calendar a {
	color:white;
}
#calendar .title{
	border-bottom: 3px solid white;
}
.event{
	padding-bottom:40px;
	margin-bottom:20px;
}
.event img.affiche{
	width:250px;
	margin-right:30px;
	display:inline-block;
	vertical-align:middle;
	box-shadow:0px 0px 10px black;
	cursor:pointer;
}
.eventLocation{font-size:32px;}
.eventLocation img{ height: 28px;}
.event .description{
	font-size:38px;
	display:inline-block;
	vertical-align:middle;
	max-width: calc(100% - 300px);
}
.previousEvent{
	position:relative;
	display:inline-block; 
	text-align:center; 
	margin:0 10px 20px 0;
}
.previousEvent img.affiche{
	cursor:pointer;
	height:160px; 
	width: auto; 
	margin:0 0 15px 0;
}
.previousEvent img.album{
	position:absolute; 
	cursor:pointer;
	padding:15px 38px;
	background:#000000aa;
	right:0;
	bottom:15px;
	height:28px;
}
#trombi {
	background: #eee url(images/fond_nous.jpg) top no-repeat ;
	background-size: 100% auto !important;
	color:#333;
	overflow:hidden;
}

.photo {
	margin:0;
	position:absolute;
	bottom:0px;
	top:0;
	left:0;
	width:100%;
	margin:0;
	background: center bottom no-repeat; 
	background-size: auto 70%;
	transition : 1s;
	transform-origin:center bottom;
}
.photo .description{
	font-family : "typewriter";
	font-size:14px; 
	position:absolute; 
	left:52%; 		
	width:30%; 
	height:68%; 
	bottom:0; 
	background:url(images/feuille.png); 
	box-shadow: 0 0 7px black; 
	color:#222222; 
	z-index: 100;
	padding: 30px 2%;
}
.photo.previous {
	margin-left:-100%;
	transition : 1s;
}
.photo.next {
	margin-left:100%;
/* File qui avance*/
/*	transform:scale(0.9);
	transform-origin: 0% bottom;
*/
	transition : 1s;
}
#next {
	z-index:100; position:absolute; right:0;top:50%; border:50px solid transparent; border-left:50px solid #333; cursor:pointer;
}
#previous{
	z-index:100; position:absolute; left:0;top:50%; border:50px solid transparent; border-right:50px solid #333;cursor:pointer;
}
#home,#main {
	text-align:center;
}
/* Fin pages */






/* MOBILE */
@media (max-width: 600px) { 
	@media screen and (min-height: 600px) {
		#menu {
			height:200px !important; 
		}
		#menu .item {
			width:50% !important; 
		}
		.page {
			bottom:200px !important;
		}
	}

	body {
		height:100%; 
		min-height:0;
		font-size : 24px;
	}

	/* menu */
	#menu {
		width:100%;
		height:100px; 
		bottom:0px;
		padding:0;
	}
	#menu img {
		transition:0.3s;
	}
	#menu .item {
		width:25%;
		float:left;
		margin:10px 0;
	}

	/* Fin menu */

	/* Pages */
	.page .title {
		font-size:46px;
		text-align: center;
		margin-bottom:0px;
	}
	
.title.previous_closed{
	float:none;
}
	.page {
		left:0px;
		right:0px;
		top:0px;
		bottom:100px;
		padding:5%;
	}
	.fullpageImage {
		max-width:100%;
	}
	#links{padding: 10px 20px;}
	
#main #lapinou{
	position: absolute;
	margin-right: 0;
	margin-top: 0;
	top: 0;right: 0;width: 60%;
}
#main #lapinette{
	position: absolute;
	margin-left: 0;
	margin-top: 0;
	top: 30%;left: 0;width: 60%;
}
#main #grafiti {
	position: absolute;
	top: initial;
	bottom:5%; left: 0;transform: scale(0.7);width: 90%;
	margin-left: 0;
	margin-top: 0;
	opacity:0.9;
}
#main #lampadaire{
	display:none;
	
}

	#trombi {
		background-position: center 80px;	
	}
	.photo {
		background-size: auto 70%;	
	}
	.photo {
		background-position-x : center !important;
	}
	.photo .description{
		display:none;	
	}
	#calendar .title{
		border-bottom: 0px solid white;
	}
	.event{
		text-align:center;	
		border-bottom: 1px solid white;
	}
	.eventTitle {display:none;}
	.event img.affiche{
		width:200px;
		margin:0 0 20px 0;
	}
	.eventLocation{font-size:24px;}
	.eventLocation img{ height: 24px;}
	.event .description{
		font-size:32px;
		width: 100%;
		max-width: unset;
	}
	.previousEvent img.affiche{
		width:auto;
	}
	#next {
		border:30px solid transparent; 
		border-left:30px solid #333;
		border-right:5px solid transparent; 
	}
	#previous{
		border:30px solid transparent; 
		border-right:30px solid #333;
		border-left:5px solid transparent;
	}
	/* Fin pages */
}