/*

/ffs
Colors:

rouge f - 993333
rouge c - ff6666
rouge c++ - ff7575
bleu f - 000033
bleu c - 336699
vert f - 336633
vert c - 339966
"blanc" - f9f9f9
*/

/* Background pattern from Subtle Patterns */

body{
	background: url('../img/symphony.png') repeat;
	font-family: 'Open Sans', sans-serif;
}
#message{
	background: #f39c12;
	text-align: center;
	color:#fff;
	padding:12px;
}

#wrap, header {
	width:100%;
}

.fb-like{
	float:right;
}

/*  #ff6666  */

/************

Nav

************/

#TopNav{
	position: fixed;
	z-index: 200;
	width: 100%;
}

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f9f9f9;
	border-bottom: 2px solid #d8d8d8;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

/* Style the links inside the list items */
ul.topnav li a.el {
  display: inline-block;
  color: #ff6666;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  margin:22px 20px;
  padding:14px 16px;
	border:2px solid #f9f9f9;
}

ul.topnav li a:hover {
	border:2px solid #ff6666;
	color: #ff6666;
}

ul.topnav li.logo a{
	padding:0; margin:0;
}
ul.topnav li.logo a img{
	width:82px;
	margin-bottom:-5px;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon{
	font-size:2em;
	display: none;
	position: absolute;
	right: 25px;
    top: 35px;
}
ul.topnav li.icon a:hover{
	border:none;
}
ul.topnav li a.el.btn{
	color:#fff;
    background: #ff6666;
}


/***********************************/


#container{
	max-width:1100px;
	overflow: hidden;
	margin:0 auto;
	position: relative;
	top:150px;
}
#contenu{
	background: #F9F9F9;
	/*min-width:900px;*/
	max-width:1100px;
}

/*****

Infos et programme

*****/

#articles .title.first.actual{
	font-family: 'Amatic SC', cursive;
	font-weight: 700;
	font-size: 8em;
}

.infos{
	position: relative;
	padding: 5px 0;
	height:1250px;
	font-size: 1.1em;
}
.infos p.info{
	margin-top:15px;
	margin-left: 20px;
	display: inline-block;
	margin-right:45px;
}
.infos .content{
	position: absolute;
	top:100px; right:0;
	z-index:100;
}
.infos .programme{
	margin:0 auto;
}
.parts .content, footer{
	padding:60px 30px;
}

.parts:first-of-type{
	padding-top:0px;
}

.intros{
	height:220px;
	text-align:center;
	position: relative;
	background-repeat: no-repeat;
	background-position: 50% 30%;
	background-size: cover;
}
.intros .title{
	position: relative;
	text-transform: uppercase;
	font-size: 1.5em;
	top: 90px;
	padding:3px 8px;
	background:rgba(250,250,250,.8);
	color:rgb(231, 76, 60);
	z-index:10;
}
.intros .title.first{
	right:0px;
}
.background_filter{
	position: absolute;
	height:220px; width:100%;
	left:0%;
}
.articles .title.first.actual{
	font-size:2em;
}

.article .date{
	float:right;
	margin-top:-30px;
	font-style: italic;
}

.events{
	background-image: url("../img/intro_3.jpg");
	background-position: 50% 50%;
	margin-bottom: 0;
	margin-top:40px;
}
.events .background_filter{
	background: rgba(33, 124, 126,.6);
}
.events .title{
	color:rgb(33, 124, 126);
}
#events{
	text-align: center;
}
#events img{
	text-align: center;
	max-width: 100%;
	height: auto;
	margin: 0 10px 10px 0;
}


.presentation{
	background-image: url("../img/intro_1.jpg");
	margin-top:80px;
}
.presentation .background_filter{
	background: rgba(231, 76, 60,.6);
}

.first.content{
	padding-bottom:40px;
}
.content .texts,
.content.texts{
	max-width:800px;
	margin:0 auto;
}
.content .texts ul,
.content.texts ul{
	list-style-type:none;
	text-align: justify;
}
.content .texts ul li,
.content.texts ul li{
	margin-bottom: 20px;
}
.content h3{
	margin-bottom: 10px;
}
.social{
	position: relative;
	top:125px;
}
.social .links{
	font-size:1.5em;
	padding-right:15px;
	color:#ff6666;
}
.social a.links:hover{
	color:#e20f0f;
}
.content p{
	text-align: justify;
	margin-top:25px;
	line-height: 1.8;
}
.content .e2018 img{
	margin:0 0 10px 30px;
}
.content .e2018 .centered{
	padding-top:5%;
}
.content .striked{
	color:#adadad;
}


#presentation #assoc{
	margin-bottom:30px;
}
#presentation #assoc p{
	line-height: 28px;
}

.projets{
	background-image: url("../img/intro_4.jpg");
	background-position: 50% 50%;
	margin-bottom: 0;
	margin-top:40px;
}
.projets .background_filter{
	background: rgba(52, 73, 94,.6);
}

#timeline #history{
	color:#34495e;
}
.timeline_before,
.timeline_after{
	margin-left:20%;
	width:100%;
	height:60px;
	border-left:3px dashed rgb(52, 73, 94);
}
.content.timeline{
	border-left:3px solid rgb(52, 73, 94);
	margin-left:20%;
	padding:10px 40px;
	position: relative;
}
.timeline p.time{
	color:rgb(52, 73, 94);
	margin:40px 0;
}
.timeline .year{
	background: rgb(52, 73, 94);
	color:#fff;
	padding:10px;
	position: absolute;
	left:-30px;
}
.timeline .year.one{
	left:-55px;
}
#timeline li{
	list-style-type: none;
	margin:20px 0 20px 20px;
}
#timeline li span.date{
	font-weight: bold;
}
#timeline li:before{
	content: '—';
	padding-right: 8px;
}
#timeline ul.second li{
	list-style-type: circle;
	margin:10px 0 0 40px;
}
#timeline ul.second li:before{
	content:'';
}

.medias{
	background-image: url("../img/intro_2.jpg");
	background-position: 50% 60%;
}
.medias .background_filter{
	background: rgba(52, 152, 219,.6);
}
#medias .title{
	color:#2980b9;
}
#medias p{
	margin-top:20px;
}
#medias p.subtitle{
	width:100%;
	border-bottom: 1px solid #cccccc;
	margin-bottom: 20px;
	font-size:1.3em;
}
#medias p ul{
	margin-top:100px;
}
#medias ul li{
	list-style-type: none;
}
#medias .video-container{
	text-align: center;
	margin:20px 0;
}
#medias li.jour{
	margin-left:19px;
	padding:5px;
	list-style-type: none;
}
#medias li.jour audio{
	margin-top:15px;
	width:500px;
}
#medias .audio-container{
	text-align: center;
	margin:20px 0;
}

.contact{
	background-image: url("../img/intro_3.jpg");
}
.contact .background_filter{
	background: rgba(46, 204, 113,.6);
}
#contact .title{
	color:#2ecc71;
}
#contact{
	padding-bottom:40px;
}
#contact section{
	padding:50px 30px 20px 30px;
	display:flex;
	flex-direction:row;
}
#contact .column{
	padding-left:150px;
	position: relative;
}
.form .field{
	font-size: 1.1em;
}
.form input,
.form textarea{
	display: block;
	margin-top:20px;
	padding:8px 10px;
	border:1px solid #A3A3A3;
	border-radius: 4px;
}
.form textarea{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
}

#contact #address{
	margin-bottom:30px;
}
#contact #address ul{
	list-style-type: none;
}
#contact #address li.mail{
	margin-top:10px;
}
#contact #address .networking{
	margin-top:15px;
}
#contact #address .networking a{
	font-size:1.5em;
	padding-right:15px;
	color:#ff6666;
}
#contact #address .networking a:hover{
	color:#e20f0f;
}
#contact #location{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 0;
  height:0;
  overflow: hidden;
}
#contact #location iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

footer{
	background:#f9f9f9;
	border-top:2px solid #d8d8d8;
	padding:20px 30px;
	margin-bottom: 10px;
	font-size:1em;
	color:#333333;
}
footer a{
	border-bottom:	1px dotted #ff7575;
	color:#ff7575;
}
footer a:hover{
	border-bottom:	1px dotted #993333;
	color: #993333;
}

p.success,
p.error{
	text-align: center;
	color: #000;
	padding:7px 10px;
	background: #42ff81;
	border-radius: 4px;
}
p.error{
	background:#ff4300;
	color:#ffc5af;
}


/*UP LAYER when click on "devenir membre" btn */
#upwrap,
#membre{
	z-index:1000;
	display:none;
}
#upwrap{
	position: absolute;
	height:500%;
	top:0; left:0; right:0;
	background: rgba(0,0,0,.5);
}
#membre{
	position: relative;
	width:40%;
	min-width: 250px;
	margin:10% auto;
	padding:20px 50px;
	background: #f9f9f9;
	text-align:center;
	color:#000;
}
#membre img{
	float:left;
	margin:50px 20px 0 10px;
}
#membre a.close{
	position:absolute;
	right:20px; top:10px;
	color:#ff7575;
	font-size: 1.8em;
}
#membre a.close:hover{
	color:#993333;
}
#membre p{
	line-height: 1.7;
}
#membre p.urpoor{
	font-size: .8em;
}

ul.topnav li.logo a,
ul.topnav li.logo a:hover{
	border:none;
}

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?99ee2c');
  src:  url('fonts/icomoon.eot?99ee2c#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?99ee2c') format('truetype'),
    url('fonts/icomoon.woff?99ee2c') format('woff'),
    url('fonts/icomoon.svg?99ee2c#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"],
.ico {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook2:before {
  content: "\ea91";
}
.icon-instagram:before {
  content: "\ea92";
}


/* IFRAME GALLERY */
button#u_0_2,
tr#top_row{
	display: none;
}


/*---------------

	MOBILE

---------------*/
@media screen and (max-width:800px) {
	  ul.topnav li:not(:first-child) {display: none;}
	  ul.topnav li.icon {
	    float: right;
	    display: inline-block;
	  }
	  ul.topnav li.logo a{
	  	text-align: center;
	  }

	#articles .title.first.actual{
		font-size: 3.5em;
	}

	#membre{
		padding: 5px;
	}

	#membre img{
		float:none;
		margin:10px;
	}

	.content .e2018 img{
		width : 100%;
	}

	#presentation .intros.presentation {
		margin-top:0;
	}

	#medias video{
		width: 100%    !important;
  		height: auto   !important;
	}
	#medias .audio-container{
		margin-top:50px;
	}
	#medias audio{
		width: 100%    !important;
  		height: auto   !important;
	}
	#contact .comite{
	  	margin-bottom: 40px;
	  }

	  #presentation .texts{
	  	float:none;
	  	width:auto;
	  }
	  #presentation .texts:first-child{
	  	margin-bottom:40px;
	  }
	  .first.content{
			padding-bottom:50px;
	  }

/*  Historique mobile redo */

	#timeline .timeline_before,
	#timeline .timeline_after{
		display: none;
	}
	#timeline .content.timeline{
		border-left: 0;
		position: inherit;
		padding: 0;
		max-width:800px;
		margin:0 auto;
	}
	#timeline p.time .year{
		position: inherit;
	}
	#timeline .content.timeline ul.datesList{
		max-width:800px;
		margin:0 auto;
		padding:0 20px;
	}

  	#contact section{
		padding:20px 30px;
		display:flex;
		flex-direction:column;
	}
	#contact .column{
		margin-top: 50px;
		padding-left: 0;
	}
	#contact .column,
	#contact section{
		max-width: 400px !important;
	}
}

/* Google Search Console Footer textsize fix */
@media only screen and (max-width: 600px) {
    footer .flt-right{
      float:none !important;
    }
}

@media screen and (max-width:800px) {
  ul.topnav.responsive {top:-20px;position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  ul.topnav.responsive li.logo,
  ul.topnav.responsive li.logo:hover{
  	border:none;
  }
}