@charset "UTF-8";
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,900");

@font-face {
        font-family: 'novecento_sans_widemedium';
    src: url('webfontkit/novecentosanswide-medium-webfont.eot');
    src: url('webfontkit/novecentosanswide-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfontkit/novecentosanswide-medium-webfont.woff') format('woff'),
         url('webfontkit/novecentosanswide-medium-webfont.ttf') format('truetype'),
         url('webfontkit/novecentosanswide-medium-webfont.svg#novecento_sans_widemedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body {
	width: 100%;
	margin: 0;
	background-color: #474747;
	font-family: 'Lato', sans-serif;
	text-align:center;
	font-size: 14px;
	line-height: 140%;
	font-weight: 300;
}

strong {
	font-weight: 300;
	font-style: normal;
}


#langues {
	text-align: center;
	padding: 10px;
}

#langues img {
	padding: 5px;
	width: 40px;
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(0.8); /* Google Chrome, Safari 6+ & Opera 15+ */
}

#langues img:hover {
		-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
	filter: none;
    -webkit-filter: grayscale(0);
}

h1 {
	font-size: 20px;
	text-align: left;
	color: #00aeaa;
}

#mentions h1 {
	font-size: 20px;
	text-align: left;
	color: rgba(62,62,62,1.00);
}

#mentions p {
	
	text-align: left;
	
}

p {
	text-align: center;
}

.diapo {
	opacity: 0.8;
	filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

.diapo:hover {
	opacity: 1;
	-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
	filter: none;
    -webkit-filter: grayscale(0);
}



#videoarticle
{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}


#videoarticle iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videocenter
{
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.videocenter iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/* ======================= Banner ===================== */
	@-moz-keyframes reveal-banner { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-webkit-keyframes reveal-banner { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-o-keyframes reveal-banner { 0% { opacity: 0; } 100% { opacity: 1; } }
	@-ms-keyframes reveal-banner { 0% { opacity: 0; } 100% { opacity: 1; } }
	@keyframes reveal-banner { 0% { opacity: 0; } 100% { opacity: 1; } }


section {
		text-align: center;
	}

	#banner {
		/*background-attachment: fixed;*/
		background-color: #ffffff;
		background-image: url("images/051.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
		color: white;
		text-align: center;
		margin: auto;
		
	}

		#banner .inner {
			-moz-animation: reveal-banner 1s 0.25s ease-in-out;
			-webkit-animation: reveal-banner 1s 0.25s ease-in-out;
			-o-animation: reveal-banner 1s 0.25s ease-in-out;
			-ms-animation: reveal-banner 1s 0.25s ease-in-out;
			animation: reveal-banner 1s 0.25s ease-in-out;
			-moz-animation-fill-mode: forwards;
			-webkit-animation-fill-mode: forwards;
			-o-animation-fill-mode: forwards;
			-ms-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
			background: rgba(255,255,255,0.8);
			width: 80%;
			color: white;
			display: inline-block;
			opacity: 0;
			padding: 5%;
			text-align: center;
			margin: 5%;
		}

			#banner .inner header {
				display: inline-block;
			}
			
			#banner .inner header .intro1 {
				font-family: 'novecento_sans_widemedium';
				font-size: 1.3em;
				color: #005584;
				line-height: 120%;
			}
			
			#banner .inner header .intro2 {
				font-family: 'novecento_sans_widemedium';
				font-size: 1.3em;
				color: #00aeaa;
				line-height: 120%;
			}
			
			#banner .inner footer .intro3 {
				font-size: 1.5em;
				background-color: #00aeaa;
				padding: 10px;
				line-height: 120%;
				-webkit-transition: all .3s ease-in;
    			-moz-transition: all .3s ease-in;
    			transition: all .3s ease-in;
			}
			
			#banner .inner footer .intro3 a {
				color: #ffffff;
				font-weight: 400;
			}
			
			#banner .inner footer .intro3:hover {
				background-color: #005584;
				font-weight: 400;
			}

.picto img {
	width: 40%;
}


/* =================== Menu ======================== */				
	
	
.logotop {
	position: relative;
	background-color: white;
	background: radial-gradient(#FFFFFF, #EAEAEA);
	padding: 1%;
	height: auto;
}

.logotop img {

	width: 20%;
	max-width: 500px;
	min-width: 250px;
	
}

.small {

	display: none;
	
}



nav
{
    display: inline-block;
	position: relative;
	left: 0;
    width: 100%;
    text-align: center;
	background-color: #00aeaa;
	height: 35px;
	padding: 0;
	-webkit-transition: all .6s ease-in;
    -moz-transition: all .6s ease-in;
    transition: all .6s ease-in;
	border-top:5px solid #005584;
	box-shadow: 0px 2px 10px #555;
}
 
nav ul
{
    list-style-type: none;
	text-align: center;

}
 
nav li
{
    position: relative;
	display: inline-block;
	left: -20px;
	top: -6px;
}

nav a
{
	font-size: 14px;
	font-weight: 400;
	text-align: center;
	margin: 10px;
	color: white;
    text-decoration: none;
	-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
}

nav a:hover {
	color: #005584;
	font-weight: 400;
}

.active {
	color: #555555;
	font-weight: 400;
}

#sticky {
	width: 100%;
	z-index: 1;
	height:auto;
}

#sticky-sticky-wrapper
{
	height:auto;
}
/* =================== Rows ======================== */

.row{
		width:100%;
		height: auto;
		padding: 3em 0;
}


	.row:after{
		content:"";
		display:block;
		clear:both;
	}
	
	.grey{
		/*border-bottom:5px solid #00aeaa;*/
		background: radial-gradient(#FFFFFF, #D6D6D6);
		background-color: #CFCFCF;
}

	.darkgrey{
		background-color: #707070;
}

	.white{
		background-color: white;
}

	.blue{
		background: radial-gradient(#979FA1, #5F6A74);
		background-image: url("images/fondcatch.png"), url("images/stripes.png");
		background-position: center;
		background-repeat: no-repeat, repeat;
		background-size: cover, auto;
		-webkit-background-size: cover, auto;
    	-moz-background-size: cover, auto;
    	-o-background-size: cover, auto;
		color: white;
		height: auto;
		vertical-align: central;
		padding: 0;

	}

#illustration {
		padding: 0;
		margin-bottom: -5px;
}

#illustration img {
	width: 100%;
	margin: 0;
}

article, aside
{
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

 
aside
{
    position: relative;
    width: 30%;
	height: auto;
    color: #585858;
	text-align: left;
	text-justify: auto;
	padding: 10px;
}

article
{
    width: 50%;
	min-width: 400px;
	color: #585858;
	padding: 10px;
}
 
article p
{
	text-align: justify;
}

aside p
{
	text-align: justify;
	padding-right: 5%;
}

article h1 {
	text-align: left;
	color: #00aeaa;
}
 


article img
{
	width: 100%;
}

aside img
{
	width: 100%;
}

#ligne2 aside h1 {
	text-align: right;
	padding-right: 5%;
}


#news {
	height: 700px;
	overflow: scroll;
	-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}

.newssmall {
	max-width: 300px;
}

#catch {
	text-align: center;
	padding-top: 2%;
	padding-bottom: 2%;
	height: auto;
	margin: auto;
}

#catch p {
	position: relative;
	font-weight: 400;
	width: 80%;
	font-size: 1.5em;
	line-height: 120%;
	text-transform: uppercase;
	text-shadow: 2px 2px 10px #000000;
	margin: auto;
}

#center {
	width: 80%;
	text-align: center;
	padding: auto;
	margin: auto;
}

#center p {
	
	text-align: justify;
}

#center h1 {
	text-align: left;
	color: #00aeaa;
}

#center h2 {
	text-align: left;
	color: #005584;
	font-size: 16px;
}

.key {
	display: inline-block;
	margin: 5px;	
}

.info {
	display: inline-block;
	width: 100%;
}
	


/* =================== Footer ======================== */



#footer {
	display: inline-block;
	position: relative;
	text-align: center;
	width: 100%;
	height: 30px;
	padding-top: 2em;
}

#footer ul {
	list-style-type: none;
	
}

#footer li {
	position: relative;
	display: inline-block;
	left: -20px;
}

#footer a {
	color: white;
	text-decoration: none;
	padding: 20px;
	-webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    transition: all .3s ease-in;
	
}

#footer a:hover {
	color: #00aeaa;
}


/* =================== Contact ======================== */

form,
	fieldset {
		padding:0;
		margin:0;
		border:0;
		width: 100%;
	}
	
.formRow{
		margin:0 0 0.6em;
	}
	.formRow:after{
		content:"";
		display:block;
		clear:both;
	}
	.textField{
		overflow:hidden;
		font-weight:bold;
	
	}
	
	input,
	textarea{
		display:block;
		background:#fff;
		font:1em/1.214em Arial, Helvetica, sans-serif;  /*14px/17px*/
		color:#444;
		width:100%;
		padding:0.3em;
		margin:0;
		border:0;
		resize:none;
	}
	
	textarea {
		overflow: auto;
		height:10.812em;
	}
	
	
.button {
	padding: 15px;
}

#mentions {
	width: 80%;
	text-align: left;
	margin: auto;
	background-color: white;
}

#404 {
	width: 80%;
	text-align: center;
	margin: auto;
	background-color: white;
}

.center {
	text-align: center;
	margin: auto;
}



/* =================== Timeline ======================== */

a {
	color: #005183;
	text-decoration: none;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
	a:hover,
	a.selected {
		color: #00aeaa;
	}


#timeline {
		width: 80%;
		height: 500px;
		overflow: hidden;
		text-align: center;
		margin: auto;
		position: relative;
		background: url('jQueryTimelinr_0954/images/dot.png') left 60px repeat-x;
}


#dates {
			width: 100px;
			height: 60px;
			overflow: hidden;
		}
			#dates li {
				list-style: none;
				float: left;
				width: 100px;
				height: 50px;
				font-size: 24px;
				text-align: center;
				background: url('jQueryTimelinr_0954/images/biggerdot.png') center bottom no-repeat;
			}
				#dates a {
					line-height: 38px;
					padding-bottom: 10px;
				}
				#dates .selected {
			        font-size: 38px;
				}
		
		#issues {
			width: 100%;
			height: 400px;
			overflow: hidden;
		}	
			#issues li {
				width: 300px;
				height: 100%;
				list-style: none;
				float: left;
			}
				
				
				#issues li p {
					color: #4A4A4A;
					font-size: 14px;
					font-weight: normal;
					line-height: 22px;
					width: 200px;
					height: 100%;
					text-align: left;
				}
				
				#issues img {
					width: 100%;
				}
		
		
		
		#next,
		#prev {
			position: absolute;
			top: 0;
			font-size: 70px;
			top: 170px;
			width: 22px;
			height: 38px;
			background-position: 0 0;
			background-repeat: no-repeat;
			text-indent: -9999px;
			overflow: hidden;
		}
			#next:hover,
			#prev:hover {
				background-position: 0 -76px;
			}
			#next {
				right: 0;
				background-image: url('jQueryTimelinr_0954/images/next.png');
			}
			#prev {
				left: 0;
				background-image: url('jQueryTimelinr_0954/images/prev.png');
			}
				#next.disabled,
				#prev.disabled {
					opacity: 0.2;
				}

/* =================== Cookie alert ======================== */
.cc_container {
    border-radius: 0px!important;
    font-weight: normal!important;
    background-color: rgba(255, 255, 255, 0.95)!important;
    padding-bottom: 70px!important;
    border: 0px solid #ccc!important;}
.cc_btn.cc_btn_accept_all {
    color: #fff!important;
    text-transform: uppercase!important;
    font-weight: 400;
    font-family:  Lato!important;
    bottom:20px!important}
.cc_container .cc_btn, .cc_container .cc_btn:visited {
    color: #fff!important;
    background-color: #00aeaa!important;
    border-radius: 0px!important;
    -webkit-border-radius: 0px!important;}
.cc_container .cc_btn:hover, .cc_container .cc_btn:active {
    background-color: #005584!important;
    color: #fff!important;}
.cc_container a, .cc_container a:visited {
    color: #005183!important;}
.cc_container a:hover, .cc_container a:active {
    color: #00aeaa!important;}
.cc_container .cc_logo {display: none!important;}
/* =========================================== */

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

article, aside {
	width: 80%;
	max-width: 100%;
	min-width: 0;
	text-align: center;
	margin: 10px;
	padding: 0;
}

article img, aside img, #news {
	width: 100%;
	padding: 0;
	margin: 0;
}

article p, aside p, h1 {
	padding: 0;
}


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

.big {

	display: none;
	
}

.logotop img {
	
		min-width: 30px;
		width: 30px;
}

.small {
	display: inline-block; 
}
}

@media all and (max-width: 475px)
{
	
nav {
	height: 65px;
}

nav li {
	margin-top: 5px;
}

#footer li {
	margin-bottom: 1em;
}