@charset 'UTF-8';
@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,600");


/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/

	body
	{
		background: #f4dcbd;
	}

		body.is-loading *
		{
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-o-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
		}

	body,input,textarea,select
	{
		font-family: 'Source Sans Pro', sans-serif;
		font-size:1.5em;
		font-weight: 300;
		line-height: 1.75em;
		color: #2a2828;
	}

	h1,h2,h3,h4,h5,h6
	{
		font-weight: 300;
		color: #2a2828;
		line-height: 1.5em;
	}
	
		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
		{
			color: inherit;
			text-decoration: none;
		}

		h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong
		{
			color: #2a2828;
		}
		
		h2
		{
			font-size: 2em;
			letter-spacing: -1px;
		}
		
			h2.alt
			{
				color: #888;
			}
			
			h2.alt strong{
				color: #666;
			}

		h3	{
			font-size: 1.5em;
		}

	header	{
		margin: 0 0 2em 0;
	}

		header > p		{
			margin: 1em 0 0 0;
		}

	footer	{
		margin: 2em 0 0 0;
	}

	strong, b	{
		font-weight: 300;
		color: #666;
	}
	
	em, i{
		font-style: italic;
	}

	a	{
		text-decoration: none;
		color: inherit;
		-moz-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-webkit-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-o-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		-ms-transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		transition: color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
		outline: 0;
	}

		a:hover{
			color: #E27689;
			border-bottom-color: rgba(255,255,255,0);
		}

	sub{
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}
	
	sup{
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}
	
	hr{
		border: 0;
		border-top: solid 1px #ddd;
	}
	
	blockquote	{
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}
	
	p, ul, ol, dl, table	{
		margin-bottom: 2em;
	}

	br.clear	{
		clear: both;
	}

	/* Sections/Article */
	
		section, article{
			margin-bottom: 3em;
		}
		
			section > :last-child,
			article > :last-child,
			section > .container > :last-child,
			article > .container > :last-child
			{
				margin-bottom: 0;
			}

			section:last-child, article:last-child{
				margin-bottom: 0;
			}

			.row > section, .row > article {
				margin-bottom: 0;
			}

	/* Image */

		.image{
			display: inline-block;
			border: 0;
		}
		
			.image img{
				display: block;
				width: 100%;
			}
			
			.image.avatar48	{
				width: 70px;
				height: 70px;
				background: #f00;
			}
			
				.image.avatar48 img{
					width: 70px;
					height: 70px;
				}

			.image.fit{
				display: block;
				width: 100%;
			}
			
			.image.featured{
				display: block;
				width: 100%;
				margin: 0 0 2em 0;
			}
			
			.image.left{
				float: left;
				margin: 0 2em 2em 0;
			}
			
			.image.centered{
				display: block;
				margin: 0 0 2em 0;
			}

				.image.centered img{
					margin: 0 auto;
					width: auto;
				}





/*///////////////////////////////////////////
			MAIN : PARTIE DU CONTENU
///////////////////////////////////////////*/

	#main	{
	position:relative;
		width:100%;
		max-width:1680;
		height:100%;
		max-height:1050px;
	}
	
		#main > section	{
			margin: 0;
			overflow: hidden;
			text-align: center;
		}

		
		
	.titre h1{
	margin-top:0.8em;
text-shadow: 0.05em 0.01em 0.061em #555;
	}
		
/*///////////////////////////////////////////
			MENU : PATCHWORK AVEC DES PHOTOS
///////////////////////////////////////////*/		
		#menu{

	position:relative;
	width:100%;
		margin-left:auto;
		margin-right:auto;
		}
		#blocmenu{
	width:80%;
	text-align:center;
		position:relative;
			padding-left:5%;
			padding-right:5%;
		margin-left:auto;
		margin-right:auto;
		}
		.menuimage {
			display:block;
			float:left;
			width:30%;
			overflow-y:hidden;
			overflow:hidden;
		}		
.menuimage img{
		margin:0 auto;
		width:80%;
		}	



			/*///// ANIMATION HOVER IMAGE MENU ////*/
								.menuimage a img{
									-webkit-transition: all 0.25s linear;
										-moz-transition: all 0.25s linear;
										-o-transition: all 0.25s linear;
										-ms-transition: all 0.25s linear;
										transition: all 0.25s linear;
										opacity:1;
										-webkit-opacity:1;
								}
								.menuimage a:hover img{
										opacity:0.1;
								}
								.menuimage a h5{
									font-size:0.9em;
									font-weight:400;
									line-height:1.2em;
									position:relative;
									margin:0 auto;
									padding-left:1.1em;
									padding-right:1.1em;
									margin-bottom:-1em;
									text-shadow: 0.05em 0.01em 0.061em #888888;
										-webkit-transition: all 0.25s linear;
										-moz-transition: all 0.25s linear;
										-o-transition: all 0.25s linear;
										-ms-transition: all 0.25s linear;
									transition: all 0.25s linear;
									opacity:0;
									top:-4em;
									overflow:hidden;
								}
								.menuimage a:hover h5{
									display:block;
									opacity:1;
									top:-7em;									
								}
								
								.anim1 img{
								position:relative;
								-webkit-animation:anim1 2s;
								-moz-animation:anim1 2s;
								-o-animation:anim1 2s;
								-ms-animation:anim1 2s;
								animation:anim1 2s;
								}
								
								@-webkit-keyframes anim1{
									from { left:100%; }
									to {left:0%; }
								}
								@-moz-keyframes anim1{
									from { left:100%; }
									to {left:0%; }
								}
								@-o-keyframes anim1{
									from { left:100%; }
									to {left:0%; }
								}
								@-ms-keyframes anim1{
									from { left:100%; }
									to {left:0%; }
								}
								@keyframes anim1{
									from { left:100%; }
									to {left:0%; }
								}
								.anim2 img{
								position:relative;
								-webkit-animation:anim2 2s;
								-moz-animation:anim2 2s;
								-o-animation:anim2 2s;
								-ms-animation:anim2 2s;
								animation:anim2 2s;
								}
								
								@-webkit-keyframes anim2{
									from { right:100%; }
									to {right:0%; }
								}
								@-moz-keyframes anim2{
									from { right:100%; }
									to {right:0%; }
								}
								@-o-keyframes anim2{
									from { right:100%; }
									to {right:0%; }
								}
								@-ms-keyframes anim2{
									from { right:100%; }
									to {right:0%; }
								}
								@keyframes anim2{
									from { right:100%; }
									to {right:0%; }
								}
/*////////////////////////////////////////////////////////
		MEDIA QUERIES
////////////////////////////////////////////////////////*/

@media only screen and (min-width: 400px) {

			.titre h1{
	font-size:1.5em;
	}
			.menuimage a h5{
				font-size:0.85em;
			}
			.menuimage a:hover h5{
			top:-7em;									
			}	
	
}

@media only screen and (min-width: 700px) {

			.titre h1{
	font-size:2em;
	}
			.menuimage a h5{
				font-size:0.7em;
			}
			.menuimage a:hover h5{
			top:-7em;									
			}
}

@media only screen and (min-width: 900px) {

			.titre h1{
	font-size:2em;
	}
			.menuimage a h5{
				font-size:0.7em;
			}
			.menuimage a:hover h5{
			top:-7em;									
			}
}

@media only screen and (min-width: 1100px) {

		.titre h1{
	font-size:2em;
	}
				.menuimage a h5{
				font-size:0.9em;
			}
			.menuimage a:hover h5{
			top:-7em;									
			}
}

@media only screen and (min-width: 1280px) {

	.titre h1{
	font-size:2.5em;
	}
			.menuimage a h5{
				font-size:0.9em;
			}
			.menuimage a:hover h5{
			top:-9em;									
			}
}

/*********************************************************************************/
/* Touch Mode                                                                    */
/*********************************************************************************/

	body.touch {
	}
	
		body.touch .main {
			background-attachment: scroll !important;
		}
		
		body.touch .poptrox-popup {
		}

			body.touch .poptrox-popup .nav-next,
			body.touch .poptrox-popup .nav-previous,
			body.touch .poptrox-popup .closer {
				opacity: 1.0 !important;
			}