.history #page
{
	background-color:#f2efea;
}



	.history #banner
	{
		background-color: #eee;
	    background-image: url("backgrounds/trame.png");
	    background-repeat: repeat-x;
	}

	.history .topPhoto
	{
		display:block;
		width:100%;
		/*margin-bottom:192px;*/
	}

	/***Intro***/

		.history .intro
		{
			font-size:17px;
			text-align:center;

			margin-bottom:4em;
			background-color:white;
			padding-bottom:3.5em;
			padding-top:40px;
		}

			.history .portrait
			{
				margin:0 auto 16px auto;
				display:block;
			}

			.history .pageTitle
			{
				margin-bottom:0.3em;
				padding-top:0;
			}
				.history .pageTitle.first
				{
					margin-bottom:1em;
				}

			.history .intro .subTitle
			{
				font-size:30px;
				line-height:1.4em;
				font-weight:bold;
				text-transform:uppercase;

				margin-bottom:1em;
			}

			.history .intro p
			{
				max-width:920px;
				margin:0 auto 1em auto;

				line-height:1.7em;
				font-weight:200;
			}
				.history .intro p:last-child
				{
					margin-bottom:0;
				}

			.history .intro .source
			{
				text-align:right;
				margin-bottom:3em;
			}

				.history .intro .source .name
				{
					font-size:25px;
					margin-bottom:0.2em;
				}

				.history .intro .source .function
				{
					font-size:13px;
				}

	/***/
	
	.history .timeline
	{
		padding-bottom:386px;
		position:relative;
	}
		.history .centerLine
		{
			width:6px;
			position:absolute;
			left:50%;top:0;bottom:0;
			margin-left:-3px;
			background-color:#dadada;
		}

		.history .date
		{
			position:relative;
			min-height:1px;
		}
			.history .date.margin1
			{
				margin-bottom:80px;
			}
			.history .date.margin15
			{
				margin-bottom:136px;
			}
			.history .date.margin2
			{
				margin-bottom:200px;
			}
			.history .date.margin3
			{
				margin-bottom:300px;
			}
			.history .date.margin4
			{
				margin-bottom:400px;
			}
			.history .date.margin5
			{
				margin-bottom:500px;
			}

			.history .date .marker
			{
				margin:0 auto;
				border-radius:50%;
				background-color:black;
				position:relative;
			}
				.history .date.simple .marker
				{
					width:18px;height:18px;
					border:7px solid #dadada;
					
				}
				.history .date.normal .marker
				{
					width:118px;height:118px;
					font-family:"Custom2",Arial,Helvetica,sans-serif;
					color:white;
					text-align:center;
					font-size:30px;
					line-height: 118px;

					box-shadow:2px 2px 2px #888;
				}

			/***Arrows***/

				.history .date .arrow
				{
					width:20px;height:40px;
					position:absolute;
					top:50%;
					margin-top:-20px;
				}
					.history .date .arrow.left
					{
						background-image:url("backgrounds/histoire/right-arrow.png");

						right:50%;
						margin-right:112px;
					}
					.history .date .arrow.right
					{
						background-image:url("backgrounds/histoire/left-arrow.png");
						
						left:50%;
						margin-left:112px;
					}

			/***Events***/

				.history .event,
				.history .press
				{
					position:absolute;
					/*width:468px;*/

				}
					.history .event.left,
					.history .press.left
					{
						left:0;right:50%;
						margin-right:132px;
					}
					.history .event.right,
					.history .press.right
					{
						left:50%;right:0;
						margin-left:132px;
					}

						.history .event.left .text
						{
							text-align:right;
							/*margin-right:132px;*/
						}
						.history .event.right .text
						{
							text-align:left;
						}

					/***Normal***/

						.history .date.normal .event
						{
							background-color:white;
							border-top:10px solid black;
						}

						.history .event.top1
						{
							top:-75px;
						}
						
						.history .event.bottom1
						{
							bottom:-164px;
						}

							/***Gallery***/

								.history .event .photos
								{
									position:relative;
									cursor:pointer;
								}
									.history .event .photos img
									{
										display:none;
										position:absolute;
										left:0;top:0;
									}
										.history .event .photos img:first-child
										{
											display:block;
											position:relative;
											width:100%;
										}
										.history .event .photos img.parsed
										{
											display:block;
											width:100%;
										}

							/***/

							.history .date.normal .event .text
							{
								padding:40px;
								font-weight:200;
							}
								
								.history .event .title
								{
									font-size:32px;
									line-height:1.3em;
									margin-bottom:0.5em;
									text-transform:uppercase;
								}

								.history .event .subTitle
								{
									font-size:22px;
									line-height:1.3em;
									text-transform:uppercase;

									margin-bottom:0.5em;
								}

								.history .date.normal .event p
								{
									font-size:14px;
									line-height:1.5em;
								}

					/***Simple***/

						.history .date.simple .event 
						{
							height:100%;
							top:0;
						}
							.history .date.simple .event .text
							{
								font-weight:200;
								line-height:32px;
							}

			/***Press***/

				.history .press
				{
					font-size:0;
					top:-58px;
				}
					.history .press.left
					{
						text-align:right;
					}
					.history .press.right
					{
						text-align:left;
					}

					.history .press .item
					{
						width:116px;height:116px;
						background:url('pictos/history-press.png') no-repeat center 20px white;
						display:inline-block;
					}
						.history .press.left .item
						{
							margin-left:14px;
						}
						.history .press.right .item
						{
							margin-right:14px;
						}
						.history .press span
						{
							display:block;
							padding-top:80px;
							text-transform:uppercase;
							font-size:17px;
							text-align:center;
						}

		/***Gallery***/

			.history .gallery
			{
				position:relative;
				margin-bottom:220px;
			}
				.history .gallery .photos
				{
					width:50%;
					overflow:hidden;
				}
					.history .gallery .photos .wrapper
					{
						position:relative;
					}
						.history .gallery .photos.left
						{
							position:relative;
							margin:0 0 auto 0;
						}
						.history .gallery .photos.right
						{
							position:absolute;
							left:50%;top:0;right:0;bottom:0;
						}

							.history .gallery .photos .photo
							{
								width:100%;
								display:block;
								margin:0;
								position:absolute;
								left:0;
							}
								.history .gallery .photos .photo.first
								{
									position:relative;
								}

					.history .gallery .button
					{
						position:absolute;
						bottom:0;
						width:80px;height:80px;
						cursor:pointer;
					}
						.history .gallery .button.previous
						{
							right:50%;
							background-image:url('buttons/history/left.jpg');
						}
						.history .gallery .button.next
						{
							left:50%;
							background-image:url('buttons/history/right.jpg');
						}


	/***RESPONSIVE***/

		@media screen and (max-width: 780px)
		{
			.history .topPhoto
			{
				
			}
			.history .timeline
			{
				padding-bottom:120px;
			}

			.history .intro
			{
				font-size:15px;
			}
		}

		/***Dates***/

			@media screen and (max-width: 1200px)
			{
				.history .event .title
				{
					font-size:26px;
				}
			}

			@media screen and (max-width: 980px)
			{
				/***Marker***/

					.history .date.normal .marker
					{
						width:98px;height:98px;
						line-height:98px;
						font-size:22px;
					}

				/***Arrows***/

					.history .date .arrow.left
					{
						margin-right:92px;
					}
					.history .date .arrow.right
					{
						margin-left:92px;
					}

				/***Events***/

					.history .event.left
					{
						margin-right:112px;
					}
					.history .event.right
					{
						margin-left:112px;
					}

						.history .event .title
						{
							font-size:22px;
						}

						.history .date.normal .event .text
						{
							padding:22px;
						}
			}

			@media screen and (max-width: 780px)
			{
				.history .intro .subTitle
				{
					font-size:22px;
				}

				.history .date.margin1,
				.history .date.margin15,
				.history .date.margin2,
				.history .date.margin3,
				.history .date.margin4,
				.history .date.margin5
				{
					margin-bottom:40px;
				}
					.history .date .marker
					{
						margin-bottom:20px;
						
					}
						.history .date.normal .marker
						{
							width:112px;height:112px;

							line-height:112px;
							font-size:30px;
						}
						.history .date.simple .marker
						{
							display:none;
						}

					.history .date .arrow
					{
						display:none;
					}

					.history .date .event
					{
						position:relative;
						width:auto;
						margin:0 auto 26px auto;
					}

						.history .event.left
						{
							margin-right:0;
							right:0;
						}
						.history .event.right
						{
							margin-left:0;
							left:0;
						}

						.history .date .event:last-child
						{
							margin-bottom:80px;
						}
						.history .date.normal .event
						{
							
						}	
							.history .event.top1
							{
								top:0;
							}
							.history .event.bottom1
							{
								bottom:0;
							}
							.history .date.normal .event.left .text,
							.history .date.normal .event.right .text
							{
								text-align:left;
							}

						.history .date.simple .event
						{
							background-color:white;
							height:auto;
						}
							.history .event .title
							{
								font-size:28px;
							}
							.history .date.simple .event.left .text,
							.history .date.simple .event.right .text
							{
								text-align:center;
								padding:12px 0;
							}
			}

			@media screen and (max-width: 600px)
			{
				.history .intro .subTitle
				{
					font-size:18px;
				}

				.history .date .event
				{
					width:auto;
				}
			}
			@media screen and (max-width: 480px)
			{
				.history .date.normal .event .text
				{
					padding:20px;
				}
					.history .event .title
					{
						font-size:22px;
					}
			}

		/***Gallery****/

			
			@media screen and (max-width: 980px)
			{
				.history .gallery .photos
				{
					width:auto;
				}
					.history .gallery .photos.right
					{
						display:none;
					}

					.history .gallery .button
					{
						bottom:auto;
						top:50%;
						margin-top:-40px;
					}
						.history .gallery .button.previous
						{
							left:0;
							right:auto;
						}
						.history .gallery .button.next
						{
							left:auto;right:0;
						}
			}
			@media screen and (max-width: 780px)
			{
				.history .gallery
				{
					margin-bottom:80px;
				}
			}
			@media screen and (max-width: 600px)
			{
				.history .gallery .button
				{
					width:60px;height:60px;
					background-size:100% 100%;
					margin-top:-30px;
				}
			}
			@media screen and (max-width: 480px)
			{
				.history .gallery .button
				{
					width:40px;height:40px;
					margin-top:-20px;
				}
			}

/***INTERVIEW***/

	.history.interview
	{
	}

		

			

			

			

			.history.interview .small
			{
				font-size:12px;
				padding-top:2em;
			}