@charset "UTF-8";

header{
	position: relative;
	width:100%;
	height:700px;
	overflow: hidden;
}
#img_sous_header{
	position: absolute;
	height:115%;
	width:115%;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	background-image: url(../../../pngs/art2.png);
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
	filter:blur(15px);
	z-index: 0;
}
#expo_header{
	position: absolute;
	height:90%;
	width:90%;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	overflow: hidden;
	z-index:2;
}
#img_header{
	position: absolute;
	height:80%;
	width:70%;
	left:50%;
	top:50%;
	transform: translate(-70%,-60%);
	background-image: url(../../../pngs/art2.png);
	background-repeat:no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 1;
}
#info_expo{
	position: absolute;
	background-color:rgba(255,255,255,0.80);
	height:50%;
	width:45%;
	z-index:2;
	top:50%;
	right:0%;
	transform: translate(0%,0%);
}
.nom_expo{
	font-family:'The Bold Font',arial;
	color:#232323;
	font-size:3.5em;
	margin:0;
}
#nom_expo_header{
	color:#232323;
	text-align: right;
	padding: 0 10px;
	margin:10px 0 0 0;
}
#type_expo_header{
	font-family:'The Bold Font',arial;
	color:#232323;
	font-size:1.2em;
	text-align:right;
	margin:0;
	padding-right: 10px;
}

#date_expo_header{
	color:#232323;
	font-size:2.5em;
	font-family:'Aristotelica Smallcaps',arial;
	text-align: right;
	padding-right: 10px;
	margin:15px 0 0 0;
}
.nb_expo_header{
	font-family: 'The Bold Font';
	color:#B02425;
	font-size:1.2em;
}
#heure_expo_header{
	color:#232323;
	font-size:2.5em;
	font-family:'Aristotelica Smallcaps',arial;
	text-align: right;
	padding-right: 10px;
	margin:0;
}

#description_expo{
	position: relative;
	height:auto;
	width:60%;
	background-color: white;
	border-left:solid 2px #B02425;
	border-bottom:solid 2px #B02425;
	left:50%;
	transform: translate(-50%);
}
#bloc_txt_expo{
	position: relative;
	height:90%;
	width:110%;
	padding:60px 0px 60px 60px;
}
#type_expo{
	font-family:'The Bold Font',arial;
	color:#232323;
	font-size:1em;
	margin:10px 0px 50px 0px;
}
#txt_expo{
	font-family:'Aristotelica Smallcaps',arial;
	color:#232323;
	margin:0;
	text-align:justify;
	font-size: 1.8em
}
#reserver{
	position: absolute;;
	left:100%;
	top:65px;
	transform: translate(-100%,0%);
	border:solid 2px #B02425;
	outline: none;
	width:200px;
	height:50px;
	color:white;
	cursor: pointer;
	transition: all 0.3s;
	overflow:hidden
}
#reserver_in{
	position: absolute;
	height:100%;
	width:100%;
	background-color: #B02425;
	top:100%;
	transition:all 0.3s;
	z-index: 0;
}
#reserver:hover #reserver_in{
	top:0;
}
#reserver:hover #txt_reserv{
	color:white;
}
#txt_reserv{
	position: absolute;
	top:50%;
	left:50%;
	font-size:1.6em;
	color:#B02425;
	font-family: 'The Bold Font',Futura,Helvetica,Arial;
	transform: translate(-50%,-115%);
	transition:all 0.3s;
	z-index:2;
}
#photo_expo{
	position: relative;
	height:900px;
	width:60%;
	background-color: white;
	border-right:solid 2px #B02425;
	left:50%;
	transform: translate(-50%);
}
#photo_expo_container{
	position: absolute;
	height:75%;
	width:95%;
	right:0;
	margin:60px 5% 0 0;
}
#back_select_slider{
	position: absolute;
	width:230px;
	height:40px;
	background-color: rgba(176,36,37,0.80);
	top:100%;
	left:100%;
	transform: translate(-90%,-50%);
}

.title_section{
	position: absolute;
	font-family: 'The Bold Font';
	font-size: 6em;
	color: #B02425;
}
#debug_descrip{
	position: absolute;
	height:100px;
	width:100px;
	top:100%;
	transform: rotate(-90deg) translate(100%,-100%);
}
#title_descrip{
	position: absolute;
	margin: 0;
	left:0%;
	top:50%;
	transform:translate(0%,-50%);
}
#debug_photos{
	position: absolute;
	height:100px;
	width:100px;
	left:100%;
	transform: rotate(90deg) translate(0%,0%);
}
#title_photos{
	position: absolute;
	margin: 0;
	left:0%;
	top:50%;
	transform:translate(0%,-50%);
}

#slide1{
	background-image:url('../../../jpgs/mr_doodle/mr_doodle1.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#slide2{
	background-image:url('../../../jpgs/mr_doodle/mr_doodle2.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#slide3{
	background-image:url('../../../jpgs/mr_doodle/mr_doodle3.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#slide4{
	background-image:url('../../../jpgs/mr_doodle/mr_doodle4.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
#select_sliderG_in{
	height:10px;
	width:10px;
}

@media (max-height:800px){
	#info_expo{
		top:100%;
		transform: translate(0,-120%);
		height:60%;
	}
}


@media (min-width:1500px){
	#slide1{
		background-position: top;
	}
	#slide3{
		background-position: top;
	}
	#slide4{
		background-position: top;
	}
}

@media (max-width:1100px){
	#nom_expo_header{
		font-size:3em;
	}
	#type_expo_header{
		font-size:1em;
	}
	#date_expo_header{
		font-size:2em;
	}
	#heure_expo_header{
		font-size:2em;
	}
	#info_expo{
		height:250px;
	}
}
@media (max-width:1100px){
	#reserver{
		position: relative;
		left:0;
		top:0;
		transform: translate(0,0);
		margin-bottom: 20px;
	}
	#type_expo{
		margin-bottom: 20px;
	}
	.title_section{
		font-size:5em;
	}
}
@media (max-width:1000px){
	header{
		height:300px;
	}
	#info_expo{
		transform: translate(0,-50%);
		height:80%;
		top:60%;
	}
}
@media (max-width:900px){
	#reserver{
		height:40px;
		width:150px;
	}
	#txt_reserv{
		font-size:1.3em;
	}
	#type_expo{
		margin-bottom: 20px;
	}
	#bloc_txt_expo{
		padding-left:20px;
		padding-bottom:20px;
	}
	#photo_expo{
		height:500px;
	}
	#photo_expo_container{
		margin-top: 20px;
		margin-right: 10%;
		width:90%;
	}
	#slide1{
		background-position: top;
	}
	#slide3{
		background-position: top;
	}
	#nom_expo_header{
		font-size:2em;
	}
	#type_expo_header{
		font-size:0.8em;
	}
	#date_expo_header{
		font-size: 1.4em;
	}
	#heure_expo_header{
		font-size: 1.4em;
	}
	#info_expo{
		height:60%;
		width:40%;
		top:60%;
		transform: translate(0);
	}
}
@media (max-width:600px){
	#txt_expo{
		font-size:1.3em;
	}
	.nom_expo{
		font-size:2em;
	}
	.title_section{
		font-size:3.5em;
	}
	#debug_descrip{
		transform: rotate(-90deg) translate(100%,-80%);
	}
	#debug_photos{
		transform: rotate(90deg) translate(0%,20%);
	}
	#info_expo{
		top:60%;
		height:60%;
		width:75%;
	}
}
@media (max-width:500px){
	#photo_expo{
		height:300px;
	}
	#txt_expo{
		font-size:1em;
	}
	#back_select_slider{
		width:160px;
		height:40px;
	}
	#bloc_flecheD{
		display: none;
	}
	#bloc_flecheG{
		display: none;
	}
	#info_expo{
		width:90%;
		top:60%;
	}
}