/*##################################*/

/* Eléments principaux de la page */

*{
	margin:0;
	padding:0;
}

body, html{height:100%;}

body
{

	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	line-height: 1.75;
	color: #343649;
	background: #F7F7F7;
	min-height:100%;
}

#main_wrapper
{
	position:relative;
	min-height:100%;
	padding-bottom: 200px;
	margin-top: 4em;
}


header h1, section h1
{
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	text-transform: uppercase;
}


/*##################################*/

/* Header */

header
{
	width: 100%;
	position: fixed;
	top: 0;
	background: linear-gradient(rgba(247, 247, 247, 1),rgba(247, 247, 247, .99), rgba(247, 247, 247, .8));
	padding-top: 1em;
}

#menu
{
	width: 80%;
	margin-left: 10%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

header h1
{
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	color: #5E0707;
	font-size: 1.4em;
	font-weight: normal;
	letter-spacing: 0.15em;
	min-width: 12em;
}


#title
{
	display: flex;
	align-items: center;
}


#title img
{
	height: 1.3em;
	margin-right: .8em;
}


/* Navigation */

nav
{
	margin-bottom: .4em;
}


nav ul
{
	list-style-type: none;
	display: flex;
	padding-left: 0;

}

nav > ul > li
{
	margin-left: 3em;

}

nav > ul > li:first-child
{
	margin-left: 0;
}


nav a
{
	font-size: 1em;
	color: #5E0707;
	text-decoration: none;
	font-weight: 350;
}


.active
{
	border-bottom: 1px solid #5E0707;
	padding-bottom: .65em;
}

nav > ul > li > ul .active
{
	border-bottom: 1px solid grey;
	padding-bottom: .01em;
}


nav a:hover
{
	color: #343649;
	border-bottom-color: #343649;
}

nav > ul > li 
{
	position: relative;
}

nav ul li ul { display: none; } 

nav ul li:hover ul 
{

	position: absolute;
	margin-left: -7.9em;
	border: 2px gradient gray;


	min-width: 12em;
	display: flex;
	flex-direction: column;
	justify-content: right;
	color: #343649;

}

#sous_menu {

	-webkit-box-shadow: 0 0 8px grey;
	box-shadow: 0 0 8px grey;
	background: white;
}

.arrow-up {
	margin-left: auto;
	margin-right: 2em;

	width: 18px;
	height: 12px;
	background-color: white;
	clip-path: polygon(50% 0, 0 100%, 100% 100%);

}

nav > ul > li > ul > #sous_menu > li a 
{
	color: gray;
}


nav > ul > li > ul > #sous_menu > li
{
	text-align: right;
	padding-right: 1em;
	
	font-size: .9em;
} 

#nav2 {
	display: none;
}

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

	#main_wrapper{
		margin-top: 6em;}

		#menu
		{
			flex-direction: column;
			align-items: center;
			padding: 0;
			height: 4.55em;
		}



		#title img
		{
			height: 1.2em;
			margin-right: 1em;
		}

		nav
		{
			height: 3em;
		}

	}


	@media all and (max-device-width: 480px)
	{

		#main_wrapper{
			margin-top: 5.2em;
		}

		body {
			font-size: 2em;
			line-height: 1.7em;
		}


		header
		{
			flex-direction: column;
			align-items: center;
			font-size: .5em;
		}

		#menu
		{
			height: 9em;
			width: 100%;
			margin-left: 0;
		}

		header h1
		{
			margin: 0;
			font-size: 3em;
			letter-spacing: 0.2em;
		}

		
		#title img
		{
			height: 2.3em;
			margin-right: 2em;
		}

		#title h1 
		{
			margin-right: 0;
		}

		nav{
			display: none;
		}
		

		#nav2 {
			display: flex;
			width: 95%;
			font-size: 2.1em;
		}

		.active
		{
			padding-bottom: .4em;
		}

		#gradient_left
		{
			position: absolute;
			left: 0;
			height: 30%;
			width: 8%;
		}
		#gradient_right
		{
			position: absolute;
			right: 0;
			height: 30%;
			width: 8%;
		}


		.horizontal-scroll-wrapper {
			overflow: auto;
			white-space: nowrap;
		}


		.horizontal-scroll-wrapper a{
			text-decoration: none;
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			color: #5E0707;

		}
		.horizontal-scroll-wrapper ul{
			height: 2.1em;
		}

		.horizontal-scroll-wrapper > ul > li {
			display: inline-block;

			color: #777;
			text-align: center;
			padding: 0 35px 0 35px;
			text-decoration: none;
		}

	}

	/*##################################*/

	/* Bannière */

	#banniere_clognier
	{
		margin: 0 -.5em 5em -.5em;
	}
	#banniere_clognier img
	{
		width: 100%;

	}


	/* Corps */

	section
	{
		display: flex;
		flex-direction: column;
		margin-bottom: 2em;
	}

	section h1
	{
		text-align: center;
		font-weight: 300;
		letter-spacing: 0.025em;
		font-size: 1.8em;
		margin-bottom: 2em;
	}

	section h2
	{
		margin-bottom: 1em;
	}

	#contacter 
	{
		background-color: #F4F4F4;
		width: 20em;
		height: 3.2em;
		margin: auto;
		color: #959595;
		border: 2px solid #d1d1d1;
		margin-bottom: 1.7em;
		text-decoration: none;
	}


	article
	{
		text-align: justify;
		width: 80%;
		margin: 0 auto;
		margin-bottom: 4em;
		display: flex;
		flex-direction: column;
	}


	article img,
	{
		width: 60%;
		margin: auto;

	}

	.news img
	{
		width: 100%;
	}



		.rel
		{
			width: 100%;
		}


		.ref
		{
			text-align: right;
		}

		aside
		{
			width: 60%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			margin-bottom: 6em;

		}

		aside img, aside p
		{
			width: 100%;
			margin: auto;
		}

		aside a
		{
			text-decoration: none;
			color: #343649;
		}


		aside p
		{
			text-align: right;
			line-height: 1.50;
		}

		.image 
		{
			margin-bottom: 3em;
		}



		.little
		{
			width: 40%;
		}

		.large
		{
			width: 80%;
		}

		.float
		{
			float:left;
			width: 40%;
		}


		.artiste
		{
			width: 50%;
		}


		.biographie
		{
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
		}
		.biographie h1 {
			width: 100%;
		}

		.biographie p
		{
			width: 49%;
			margin-left: 1%;
		}

		.artiste img
		{
			width : 100%;
		}






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

			aside
			{
				width: 80%;
			}

			
			.little
			{
				width: 60%;
			}

			#contacter 
			{
				width: 20em;
				font-size: .5em;
			}

			.artiste
			{
				width: 100%;
				margin-bottom: 2em;
				margin-top: auto;
			}


			.biographie p
			{
				width: 100%;
				margin-left: 0;
			}



		}


		@media all and (max-device-width: 480px)
		{
			section h1
			{
				font-size: 2em;
			}

			aside
			{
				width: 80%;
			}



				#contacter 
				{
					width: 20em;
				}


			}




			/*############ Exposition #############*/




			.exp1
			{
				width: 60%;
				display: flex;
				flex-direction: row;
				height: 1%;
				background-color: #F4F4F4;
				border: 1px solid #949699;
			}

			.img_exp1
			{
				width: 30%;
				margin-bottom: auto;
			}

			.img_exp1 img
			{
				width: 100%;
				height: 100%;
			}

			.exp1 h1
			{
				margin: 0;
			}

			.exp1 h2
			{
				margin: 0;
			}

			.exp2
			{
				width: 70%;
				padding: .4em;
			}

			.exp3
			{
				display: flex;
			}

			.exp4{
				width: 77%;
				padding-right: .4em;
				line-height: 140%
			}

			.crt
			{
				width: 23%;
				margin: auto;
				max-height: 10em;
			}

			.adr
			{
				margin-top: .2em;
			}

			.img_mob
			{
				width: 100%;
				display: none;
			}

			.expo_lieu
			{
				margin-top: .4em;
			}





			@media screen and (max-width: 1050px)
			{
				.exp1
				{

					width: 80%;
				}

			}


			@media all and (max-device-width: 480px)
			{

				.exp1
				{

					width: 80%;
				}

				.img_exp1
				{
					display: none;
				}

				.img_mob
				{
					display: flex;
					margin-bottom: .2em;
				}
				.exp2{
					width: 100%;
				}

				.exp1 h1
				{
					margin-top: .4em;
					margin-bottom: .5em;
				}


				.exp1 h2
				{
					text-align: center;
					margin-bottom: .5em;
				}


			}






			/*##################################*/

			/* Partie étiqettes */

			.etiquette_bleue
			{
				background-color: #F4F4F4;
				border: 2px solid #c6c6c6;
				color: #858585;

				width: 60%;
				margin: auto;
				text-align: center;
				margin-bottom: 2em;
			}

			.etiquette_bleue h2
			{
				padding: 0;
				margin: 0;
			}

			.etiquette_bleue a
			{
				text-decoration: none;
				color: #858585;
			}


		

			.text_news
			{
				/*background-color: #F4F4F4;*/
				/*border: 2px solid #c6c6c6;*/
				/*color: #858585;*/

				width: 60%;
				margin: auto;
				text-align: center;
				margin-bottom: 2em;
			}

			.text_news h2
			{
				padding: 0;
				margin: 0;
			}

			.text_news a
			{
				text-decoration: none;
				color: #858585;
			}






			.etiquette_rouge
			{
				background-color: #FFE7E7;
				/*border: 2px solid #E03232;*/
				color: #C11B1B;

				width: 60%;
				margin: auto;
				text-align: center;
			}



			.block
			{
				width: 60%;
				margin: auto;
				margin-bottom: 8em;
			}

			.bande_grise 
			{
				background-color: #F4F4F4;
				border: 1px solid #949699;
				min-height: 15em;

			}

			.bande_grise p
			{
				padding-left: 5px;
			}

			.bande_grise ul
			{
				padding-left: 40px;
			}

			.bande_grise a
			{
				text-decoration: none;
			}

			.bande_network
			{
				background-color: #F4F4F4;
				border: 1px solid #949699;

			}


			.bande_network2 
			{
				margin: 0 10% 0 10%;
				height: 7em;
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: center;

			}


			.bande_network2 img{
				width: 3em;
			}


			.draw
			{
				width: 2em;
			}

			#bruno
			{
				height: 15em;
				float: right;
			}

			.click {
				width: 60%;
				margin: auto;
			}

			.region
			{
				width: 50%;
			}

			#atelier
			{
				width: 60%;
			}

			#autre
			{
				display: flex;
			}



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

				.etiquette_rouge
				{
					width: 80%;	
				}


				.etiquette_bleue{
					width: 80%;	
				}

				.text_news{
					width: 80%;	
				}

				.click {
					width: 80%;
					margin: auto;
				}

			}
			/*##################################*/

			/* Partie plus d'infos */


			#reference
			{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				background-color: #fdfdfd; 
				padding-bottom: 4em;
			}

			#reference > article{
				display: flex;
				flex-direction: column;
				align-items: center;
				background: #F7F7F7;
				margin: 1em;
				width: 40%;
				padding-bottom: 1em;
			}

			#reference article p
			{
				padding: 0 .5em 0 .5em;
				width: 98%;
				text-align: left;

			}


			#reference article img
			{
				max-width: 100%;
				max-height: 40em;
			}

			.re
			{
				line-height: 1.8;
			}

			.re img
			{
				margin-bottom: 1.2em;
				width: 100% ;
			}

			#visit a {
				text-decoration: none;
				color: #5E0707;
			}


			@media screen and (max-width: 750px)

			{#reference > article{
				width: 80%;
				}}

				@media all and (max-device-width: 750px)
				{
					#reference > article{
						width: 80%;
					}

				}





/*
@media all and (max-device-width: 480px)
{
	#reference article{
		font-size: 1.5em;
	}
	}*/


	/*##################################*/

	/* Footer */


	footer
	{
		background-color: #343649;

		bottom:0;
		width:101%;
		display: flex;
		align-items: center;
		line-height: 1.2em;
		position: absolute;
	}

	#main_bottom
	{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 70%;
		margin: 2em auto 2em auto;
	}

	#end
	{
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: .85em;
	}

	#end p, #end div
	{
		padding: .4em;
	}

	#end_text p
	{
		margin-right: 5em;
	}


	#end_text{
		display: flex;
		flex-wrap: wrap;
		margin-right: auto;
	}

	#reseaux
	{
		min-width: 9em;
	}

	footer ul
	{
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		list-style-type: none;
	}

	footer ul > li
	{
		margin: 0 0 0 1.5em;
	}


	footer li img
	{
		width: 40px;
	}


	footer p, footer h2
	{
		color : #F7F7F7;
	}

	@media screen and (max-width: 1050px)
	{
		#main_bottom{
			width: 90%;
		}



	}
	@media all and (max-device-width: 480px)
	{
		footer li img
		{
			width: 70px;
		}
		#main_wrapper
		{
			padding-bottom: 400px;
		}
	}