/*====== Responsive grid ===== */
* {
    box-sizing: border-box;
}
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	/*border: 1px solid;*/
	/*box-sizing: border-box;*/
	display:block;
	width: 100%;
	/*border-bottom: 1px solid #3F3D39 ;*/
}


/*  COLUMN SETUP  */
.column {
	display:block;
	float:left;
	margin: 1% 0 1% 1.6%;
	padding: 20px 20px 20px 20px;
	/*border: 1px dotted;*/
	box-sizing: border-box;
}

.row_spacer {
	display:block;
	float:left;
	margin: 1% 0 1% 1.6%;
	padding: 5px 20px 5px 20px;
	/*border: 1px dotted;*/
	box-sizing: border-box;
}

.column:first-child { margin-left: 0; }

/*  GROUPING  */
.row:before,
.row:after { content:""; display:table; }
.row:after { clear:both;}
.row { zoom:1; /* For IE 6/7 */ }



/*  GRID OF TWELVE  */
.span_12 {
	width: 100%;
}

.span_11 {
  	width: 91.53%;
}
.span_10 {
  	width: 83.06%;
}

.span_9 {
  	width: 74.6%;
}

.span_8 {
  	width: 66.13%;
}

.span_7 {
  	width: 57.66%;
}

.span_6 {
  	width: 49.2%;
}

.span_5 {
  	width: 40.73%;
}

.span_4 {
  	width: 32.26%;
}

.span_3 {
  	width: 23.8%;
}

.span_2 {
  	width: 15.33%;
}

.span_menu {
  	width: 100%;
}

.span_1 {
  	width: 6.866%;
}


/*==Grid of 12, no gutters====

.span_12 {
	width: 100%;
}

.span_11 {
  	width: 91.66%;
}
.span_10 {
  	width: 83.33%;
}

.span_9 {
  	width: 75%;
}

.span_8 {
  	width: 66.66666%;
}

.span_7 {
  	width: 58.33%;
}

.span_6 {
  	width: 50%;
}

.span_5 {
  	width: 41.66%;
}

.span_4 {
  	width: 33.33%;
}

.span_3 {
  	width: 25%;
}

.span_2 {
  	width: 16.66%;
}

.span_1 {
  	width: 8.33%;
}

===*/

/*  GO FULL WIDTH BELOW 800 PIXELS */
@media only screen and (max-width: 950px) {
	.column {  margin: 1% 0 1% 0%; }
    
    .span_1, .span_2, .span_3, .span_4, .span_5, .span_6, .span_7, .span_8, .span_9, .span_10, .span_11, .span_12, .span_menu {
	width: 100%; 
	}
}


/*======================*/

/*======== General Layout =========== */

@font-face {
    font-family: BebasNeue-Regular;
    src: url(BebasNeue-Regular.otf);
}





@font-face {
    font-family: 'six_capsregular';
    src: url('sixcaps-webfont.woff2') format('woff2'),
         url('sixcaps-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


body
{
    /*background-image: url(v3-background-tile.jpg);*/
	/*background-image: url(images/vintage_background.jpg);*/
	background-repeat: no-repeat;
	background-size: cover;
    background-attachment: fixed;
	font-size: 1em;
	/*background-color: black;*/
	background-color: rgb(246,227,224);
	color: #3F3D39 ;
	width: 100%;
	
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	font-family: Verdana, Arial, sans-sherif;
}
	
.corps
{
	margin-left: 20%; /* Same as the width of the sidebar*/
	/*background-image: url(background_post_transp.png) ;
		max-width: 1100px;
		width: 95%;
		/*margin-left: auto;
		margin-right: auto;*/
		/*border: 1px dotted #3F3D39 ;
		box-shadow: 1px 1px 5px #888888;*/
		
		
}

.container
{
	
	max-width: 1100px;
	width: 95%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

	
h1,h2,h3,h4,h5,h6 {
	font-family: BebasNeue-Regular ;","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Tahoma,sans-serif;
 
	
}
	
h1 {
    font-size: 2.0em;
	border-bottom: 3px solid #3F3D39 ;
	margin: 6px ;
	
}

h2 {
    font-size: 1.5em;
}

h3 {
	font-size: 1.5em;
}

h4
 {
	font-size: 1.5em;
}
	
p , ul{
    font-size: 0.875em;
	
}
	
img {
		
	max-width: 100%;
	height: auto;
	/*box-shadow: 1px 1px 5px #888888;*/
}

audio {
	width: 100%;
	display: block;
	
}
	
a
{
	color: rgb(64,0,0);
	text-decoration: underline;
}

a:hover
{
	font-weight: bold;
}
	
aside
{
	/*border: 1px solid white;*/
	background-image: url(backgnd_dark1.jpg);
	
	box-shadow: 3px 3px 5px #888888;
}

aside h2
{
	border-bottom: 3px solid #3F3D39 ;
}


.title {
	border-bottom: 3px solid #3F3D39 ;
}	

.center {
text-align: center ;
}
	
	
.center_block
{
	display: block;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	
}
q
 {
	 text-decoration: italic;
 }
 
.bouton {
    
	
	background-color: #4CAF50; /* Green */
    border: 1px solid black;
	border-radius: 4px;
    color: white;
    padding: 5px 15px;
	margin:7px 0px 0px 0px;
    text-align: center;
    text-decoration: none;
    display: inline-block ;
	/*box-shadow: 1px 1px 5px #888888;*/
    
}
 
 .border
{
	border: 2px solid #3F3D39 ;
	box-shadow: 1px 1px 5px #888888;
}

.image_border
{
	border: 25px solid white ;
	box-sizing: border-box;
}

.border_fine
{
	border: 1px solid #3F3D39 ;
}
	
	
.hidden
{ 
	display: none ;
}

	
/*======= Menu Navigation ========*/
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
 .content 
 {
	 padding-top: 0px;
 }
 
 .sticky {
  position: fixed;
  top: 0;
  width: 95%;
  max-width: 1050px;
  background-image: url(images/vintage_background.jpg);
  z-index: 1000;
 
  
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new 
position at the top of the page (position:fixed and top:0) CECI NE MARCHE PAS ENCORE*/ 
.sticky + .content 
{
  padding-top: 60px;
}


/*  ==Resposive menu button==  */

.menu_spacer {
	display: none;
}
.menu_bar {
	display: none;
}

#top_nav_id .active {
    /*background-color: rgb(171, 72, 51);*/
	/*color: rgb(236, 201, 193);*/
	border-bottom: 5px  solid  rgb(171, 72, 51);
}

.top_nav a:hover
{
	/*background-color: rgb(171, 72, 51);*/
	/*color: rgb(236, 201, 193);*/
	font-weight: normal;
	border-bottom: 5px solid rgb(171, 72, 51);
}

 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Menu"). 
 Show the first link Menu button (.icon) + configuration position */
@media screen and (max-width: 600px) {
  
 .menu_bar {
	display:block;
	float:left;
	position: fixed;
	top: 0;
	width: 100%;
	padding: 1.3em 0em 1.3em 0em ;
	background-color: rgb(104, 93, 75);
	}

.menu_bar_logo{
	display:block;
	float:left;
	position: fixed;
	top: 8px;
	left: 10px;
	z-index: 10;
	
}

	
	 

	 .menu_spacer {
		display:block;
		float:left;

		width: 100%;
		padding: 20px 0em 20px 0px;	
	}
 
  
  .top_nav a:not(:first-child) {
		display: none;  		
		}
  
  .top_nav a.icon {
    
    display: block;
	position: fixed;
	top: 0;
	width: 90%;
	max-width: 1000px;
	background-color: rgb(104, 93, 75);
	color: rgb(236, 201, 193);
	text-align: right ;
	}
  
  .top_nav a.icon:hover{

	font-weight: normal;
	border-bottom: none;*/
	}	
  
	#top_nav_id .active {
		background-color: rgb(104, 93, 75);
		color: rgb(236, 201, 193);
		border: none ;
	}
}

/* Apres le clic sur bouton le script ajoute "responsive" au nom de class. Ici donc configuration du menu apres le clic.*/

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

  .top_nav.responsive {
	display: block;
	position: fixed;
	top: 3.5em;
	width: 90%;	
	}


	.top_nav.responsive .icon {
		display: block;
		position: fixed;
		top: 0;
		width: 90%;
		max-width: 1000px;
		background-color: rgb(104, 93, 75);
		color: rgb(236, 201, 193);
		text-align: right;
		border: none ;
	}
	
	
	  .top_nav.responsive a {
		float: none;
		background-color: rgb(196, 188, 174);
		display: block;
		text-align: center;
		margin: 0 0 0 0 ;
		border: 1px solid #3F3D39 ;
		}
  
		.active {
		background-color: rgb(104, 93, 75);
		color: rgb(236, 201, 193);
		border-bottom: 1px solid #3F3D39 ;
		}

		.top_nav.responsive a.:hover{
		font-weight: normal;
		border-bottom: 1px solid #3F3D39 ;
		}

}
/*========*/

 /* Hide the menu button that opens and closes the topnav on small screens */
.top_nav .icon {
    display: none;
}




.top_nav a{
	float: left;
	/*margin-left: 0.3%; /* Cree une séparation entre les boutons */
	font-family: BebasNeue-Regular ;
	/*text-transform: uppercase;*/
	font-size: 1.1em;
	/*font-weight: bold;*/
	display: block;
	text-align: center;
	padding: 5px 0px 5px 0px ;
	text-decoration: none;
	color: black;
    /*background-color: rgb(236, 201, 193);*/
}

	
	.top_nav{
	list-style-type: none;
    margin-top: 0px;
	margin-bottom: 10px;
	/*margin: 0;*/
    padding: 0;
    overflow: hidden;
	/*background-color: rgb(236, 201, 193); /*couleur des séparations */
	/*background-image: url(backgnd.jpg);*/
}


  
.sidenav {
    height: 100%; /* Full-height: remove this if you want "auto" height */
    width: 20%; /* Set the width of the sidebar */
    position: fixed; /* Fixed Sidebar (stay in place on scroll) */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    /*background-color: white;*/
	background-image: url(backgnd_dark1.jpg);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 40px;
	border-right: 1px solid black;
}

.small_screen {
  
    display: none ;/*Hide elements for small screen on larger screens*/
}

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

  .small_screen {display: block;}/* show elements for small screens*/
  .sidenav {width: 0px;}/* Set the width of the sidebar */
  .corps {margin-left: 0px;} /* Set the width of the sidebar */
}
  
  
.sidenav_container{
	padding: 0px 20px 10px 20px ;
}







 
	

.logo 
{
	text-align:center;
	/*background-color: rgb(171, 72, 51);*/
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	/*border-top: 1px solid rgb(236, 201, 193);
	border-bottom: 1px solid rgb(236, 201, 193);*/
	box-sizing: border-box;
}

.logo_container
{
	text-align:center;
	/*background-color: rgb(128, 54, 38);
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	box-sizing: border-box;*/
	margin-bottom: 20px;
}

.logo h1
{
	font-family:   FoglihtenNo07calt , UpperEastSide , Arial ;
	font-size: 3.0em;
}


/*==============================================================================*/



.article
{
	background-image:  url(background_post.jpg);
}

.article h2
{
		border-bottom: 3px solid #3F3D39 ;
}


/*.videowrapper
{
	margin-bottom: 25px ;
	
}

p .videowrapper
{
	padding-bottom: 0px ;
} -->


/*======================================================*/

/*Slide shows - Carousels*/

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0}
  to {opacity: 1}
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: normal;
  font-size: 30px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  background-color: rgba(0,0,0,0.3);
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/*========================================================*/


/*==Concerts==*/

.concerts h2
{
	border-bottom: none ;
	font-size: 2em;
}



.concerts_column {
	display:block;
	float:left;
	margin: 0;
	padding: 0px 0px 0px 15px;
	border: ;
	box-sizing: border-box;
}	

.concerts_year {
	display:block;
	float:left;
	margin: 0;
	padding: 0px 0px 0px 15px;
	border: ;
	box-sizing: border-box;
	text-align: center;
	background-image: url(backgnd_dark1.jpg);
}
.concerts_section {
	clear: both;
	padding: 0px;
	margin: 15px;
	border-bottom: 1px solid #3F3D39 ;
	box-sizing: border-box;
}

/*=============================*/

	
.contact p
{
		/*font-size: 1.2em;
		font-family: "trebuchet MS";
		font-weight: bold;*/
		padding: 5;
		margin: 0;
}

.contact h3,h4
{
	padding: 15px 0px 0px 0px;
	margin: 0;
}

.contact ul
{
	list-style-type: none;
	padding-left:0;
	
}



#pied_de_page
{
	clear: left;
	margin-top: 100px;
	padding: 1px;
	text-align: center;
	border-top: 1px solid; 
}

blockquote
{
	font-size: 1.0em;
	font-style: italic;
	text-align: left;
	text-indent:0px;
}


/*==================Icons=================================================*/

.fa {
  
  font-size: 1.5em !important;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border: 1px solid black;
  border-radius: 50%;
  width: 1.5em;
  
}


.fa.small_screen {
  font-size: 1.8em !important;
  padding: 11px;
  text-align: center;
  text-decoration: none;
  margin: 0px 15px 20px 15px;
  border: 1px solid black;
  border-radius: 50%;
  width: 1.8em;
  
}

.fa:hover {
    opacity: 0.7;
}



/*=======================================================*/