@charset "ISO-8859-1";

/* Chromatic Wheel
Base color : white cream #F9E9DA
*/

:root{
	--browny:#bb7d6d;
	--darkpurple:#5F567A;
	--deepgreen:#567A59;
	--lightpurple:#E4DCFA;
	--lightgreen:#DCFADE;
	--lightgrey:#BCBCBC;
}


/* CSS Document */
html, body {
    height:100%; 
}
html, body, form, fieldset, ul, ol, dl, pre, h1, h2, h3, h4, h5, h6, code {
	margin:0; padding:0;
}
/*
:root {
	background:url(fond-2b.jpg) fixed top center no-repeat #000;
}
*/
body {
	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
	line-height:1.5;
	font-size:0.9rem;
	color:var(--darkpurple);
	background:url(fond-2b.jpg) fixed top center no-repeat #F9E9DA;
}

/******** LINKS ********/
a {
text-decoration:none;
} 
a:link, a:visited { 
  color: var(--lightgrey); 
}

 
a:hover, a:focus, a:active { 
	/*color: #efe748;*/
	color: var(--deepgreen);
}

p  a:link, p a:visited { 
  color: var(--lightgrey);	
  
  font-weight:bold;
}

 
p a:hover, p a:focus, p a:active { 
	color: var(--lightgrey); 
	
}

/******** TITLES ********/
h1, h3 {
padding-top:10px;
margin-bottom:20px;
color: var(--browny);

/*text-align:center;*/	

/*height:40px;*/
line-height:30px;
font-size:1.6em;
font-weight:normal;
/*text-shadow: 1px 1px 5px #000;*/
}

.tab h3 {
padding-top:0px;
font-size:1.5em;
}


h2 {
	font-family: 'Love Ya Like A Sister', Helvetica, sans-serif;
	font-size:2em;
	height:30px;
	color: var(--deepgreen);
	margin-bottom:15px;
	/*text-shadow: 1px 1px 5px #000;*/
}


h4 {
	font-family: 'Love Ya Like A Sister', Helvetica, sans-serif;
	font-size:1.5em;
	height:20px;
	color: var(--deepgreen);
	margin-bottom:10px;
	/*text-shadow: 1px 1px 5px #000;*/
}


h1 a, h3 a, #footer a, #nav a, #news a , .rightVideo a{
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
	
h1 a:hover, h1 a:focus, h1 a:active, h3 a:hover, h3 a:focus, h3 a:active, #footer a:hover, #footer a:focus, #footer a:active, #nav a:hover, #nav a:focus, #nav a:active, .rightVideo a:hover,.rightVideo a:active, .rightVideo a:focus{
	/*border-bottom: 1px dotted #efe748;*/
	/*border-bottom: 1px dotted #fcb235;*/
	/*text-shadow: 1px 1px 5px #000;*/
}


#logoHeader {
	height:100%;
	margin-top : 20px;
	text-align : center;
}

.current a {
	color: #5F567A;
	/*color:#efe748;*/
}

/******** STRUCTURE PAGE ********/
#content {
	width:980px;
	margin:0 auto;
	position:relative;
	min-height:105%;
	height: auto;
	/*background-color:#f9e9da;*/
	overflow-x:hidden;
}
#janis {
	/*background:url(fond-principal-2.jpg) top center no-repeat #000000;*/
	padding-bottom:120px;
}
#wrapperD {
	display:flex;
	gap:10px;
	width:100%;
	border-collapse: separate;
	border-spacing:10px 0;
	/*background: rgba(0, 0, 0, 0.4);*/
	/*background-color:#f9e9da;*/
	

}

#wrapper {
	width:100%;
}
.clear {
	clear:both;
}
.float_right {
	float:right;
	
}
.float_left {
	float:left;
}


/******** NAV TOP ********/
#nav {
	
	text-align:left;
	margin-left:20px;	
	margin-right:20px;
	padding: 12px 0px;

}
#nav ul,#footer1  ul{
	list-style: none outside none;
	margin:0 auto;
	padding:0;
}
#nav ul li,#footer1  ul li {
	display:inline-block;
	padding:0px 8px;
}
#nav ul li +li,#footer1  ul li +li {
	/*border-left: 2px solid #fff397;*/
	
}

/******** HEADER ********/
#header {
	/*color:white;*/
	text-align:center;
}
#social {
	float:right;
	margin-top:-63px;
	margin-right:10px;
}
#social img {
	border:0;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#social img:hover {
	cursor:pointer;
	-moz-transform:rotate(-10deg);
	-webkit-transform:rotate(-10deg);
	-o-transform:rotate(-10deg);
	transform:rotate(-10deg);
}
#logo {
	margin-top:45px;
	float:left; padding-left:20px; margin-bottom:50px;
}

/******** FOOTER ********/
#footer {
	position:absolute;
	bottom:0;
	margin:auto;
	color:#bcbcbc;
	/*background-color:#000;*/
	height:70px;
	padding-top:20px;
	width:100%;

}
#footer1 {
	margin:auto;
	width:980px;
	height:40px;
	text-align:center;
	
}


#footer2 {
	margin-left:20px;
	width:960px;
	height:auto;
}

/******** HOMEPAGE ********/
#chapo {
	margin-top:5px;
	margin-bottom:10px;
	padding-right:20px;
	padding-left:20px;
	/*color:#FFF;*/
}
.bloc2cols {
	width:100%;
	letter-spacing: -0.4em;
}
#colLeft, #colRight {
	/*display: table-cell;*/
	/*padding-top:10px;*/
	/*color:white;*/
}
#colLeft {
	width:560px;
}
#colRight {
	width:390px;
}

#news {
	width:400px; 
	height:650px;
	overflow:auto;

}



#newsJanis {
margin-top:10px;	
margin-left:10px;
padding-right:10px;
}

#eventcontent {
margin-left:5px;
}


#presentation {
	width:100%;
	/*margin-top:10px;*/
	/*padding-top:10px;*/
	/*border-top: 2px dotted #FFF;*/
	letter-spacing:normal;
	display:block;
}
.homeJanis {
	padding-bottom:5px;
	text-indent:3em;
}

/* Présentation groupe / onglets dynamiques */
.prestabs {
	padding-left:35px;
	padding-right:20px;
	margin-bottom:30px;
	padding-bottom:20px;
	height:650px;
	position: relative;
clear: both;
}


.pres-tab {

float:left;
}


.pres-tab label {
float: left; 
clear: left;
margin-right:15px; 
margin-left:15px;
position: relative;
left: 1px;
text-align:left;
cursor:pointer;
text-transform:inherit;
height:190px;
width:200px;
}



.pres-tab-content {
position:absolute;
width:900px;
height:450px;
text-align:left;
top: 215px;
left: 45px;
right: 0;
bottom: 0;
}

.pres-tab-content p {
	margin-top:0px;
	padding-right:10px;
	margin-left:10px

}
.pres-tab-content img{
	position:static;
	float:left;
	width:321px;
	height:450px;
	margin:0 20px 10px 0;
}

.pres-tab-content> * {
opacity: 0;
/*z-index: -1;*/
-webkit-transform: translateX(+120%);
-moz-transform: translateX(+120%);
-ms-transform: translateX(+120%);
-o-transform: translateX(+120%);
-webkit-transition: all 1s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}



[type=radio]:checked ~ label ~ .pres-tab-content > * {
opacity: 1;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
-webkit-transition: all 1.2s ease;
-moz-transition: all 1.2s ease;
-ms-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
/*z-index: 4;*/
}

.pres-tab [type=radio] {
  display: none;   
}


.pres-tab label[for=tab-1] {background:url(../../images/presentation/jack-nav-nb.png) no-repeat;}
.pres-tab label[for=tab-2] {background:url(../../images/presentation/alain-nav-nb.png) no-repeat;}
.pres-tab label[for=tab-3] {background:url(../../images/presentation/nico-nav-nb.png) no-repeat;}
.pres-tab label[for=tab-4] {background:url(../../images/presentation/seb-nav-nb.png) no-repeat;}



[type=radio]:checked ~ label[for=tab-1], .pres-tab label[for=tab-1]:hover  {background:url(../../images/presentation/jack-nav.png) no-repeat;}
[type=radio]:checked ~ label[for=tab-2], .pres-tab label[for=tab-2]:hover  {background:url(../../images/presentation/alain-nav.png) no-repeat;}
[type=radio]:checked ~ label[for=tab-3], .pres-tab label[for=tab-3]:hover  {background:url(../../images/presentation/nico-nav.png) no-repeat;}
[type=radio]:checked ~ label[for=tab-4], .pres-tab label[for=tab-4]:hover  {background:url(../../images/presentation/seb-nav.png) no-repeat;}


/* Présentation autre */

.box6 {
	position:relative;
	width:940px;
	text-align:left;
	margin-left:30px;
	margin-top:20px;
}

.box6 p {
	margin-top:0px;
	padding-right:10px;
	/*color:#FFF;*/
}

.box6.fixH {
	height:320px;
	}



.box6 img{
	position:static;	
	margin: 5px 20px 10px 0;
}

.box6.imgleft img {
float:left;
}

.box6.imgright img {
float:right;
}

.box6.imgH img {

}

.box6.imgV img {

width:200px;
height:300px;
}

.box6.imglogo img {

	width:500px;
	height:299px;
	margin-left: 200px ;
}



.historique {
	padding-bottom:5px;
	text-indent:3em;
}

/***** CONTACT *****/

fieldset {
	border:none;
	margin:50px 0 50px 50px;
}

#contactdiv label {
	float: left; clear: left; margin: 15px 20px 0 20px; width: 150px;
	text-align: left; font-size: 16px; color: #EFE748; 
	text-shadow: 0px 1px 0px #000;
}

#contactdiv input[type="text"]{
	width: 370px; height: 35px; padding: 5px 20px 0px 20px; margin: 10px 0 10px 0; 
	background: rgba(256, 256, 256, 0.7);
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0px 1px 5px #000;
	-webkit-box-shadow: 0px 1px 5px #FFF;
	font-size: 16px; color: #666; text-shadow: 0px -1px 0px #000; 
	border: 1px solid #FFF;

}

#contactdiv input[type="button"]{
	width: 110px; height: 35px; padding: 5px 20px 0px 20px; 
	margin: 10px 40px 0 40px; 
	background: rgba(256, 256, 256, 0.7);
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0px 1px 5px #000;
	-webkit-box-shadow: 0px 1px 5px #FFF;
	font-size: 16px; color: #666; text-shadow: 0px -1px 0px #000; 
	border: 1px solid #FFF;

}



#contactdiv input::-webkit-input-placeholder  {
    	color: #333; text-shadow: 0px -1px 0px #FFF;  
	}
#contactdiv input:-moz-placeholder {
	    color: #333; text-shadow: 0px -1px 0px #FFF; 
	}

#contactdiv textarea {
		width: 370px; height: 160px; padding: 5px 20px 0px 20px; margin: 10px 0 20px 0; 
		border-radius:3px;
		resize:none;
		border-radius: 5px; -moz-border-radius: 5px; 
		-webkit-border-radius: 5px;
		-moz-box-shadow: 0px 1px 5px #000;
		-webkit-box-shadow: 0px 1px 5px #FFF;
		font-family: sans-serif; font-size: 16px; color: #666; text-shadow: 0px -1px 0px #000; 
		border: 1px solid #FFF;


}
#contactdiv textarea::-webkit-input-placeholder  {
    	color: #333; text-shadow: 0px -1px 0px #FFF;  
	}
#contactdiv textarea:-moz-placeholder {
	    color: #333; text-shadow: 0px -1px 0px #FFF; 
	}
	
#contactdiv input:focus, #contactdiv textarea:focus {
	background: #FCFEC4;
}

.btn,.g-recaptcha {
margin-left:170px;
}

#contactdiv button:hover {
	background: #FCFEC4;
}


#popup{
padding-top:80px;
}


#contactdiv{
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.85);
display: none;
z-index: 0;
}


#contact{
background:#222222;
/*font-family: 'Fauna One', serif;*/
position: absolute;
left: 260px;
top: 30px;
height: 100%;
width: 450px;
height: 610px;
border: 5px solid rgb(90, 158, 181);
}

/******** Concerts ********/
.concertlist {
	width:100%;
	margin-top:20px;
	padding-top:10px;
	line-height:20px;
	font-size:2em;
	
	letter-spacing:normal;
	display:block;
	text-align:center;
}

.concertlist.past {
	color:#BCBCBC;
	font-size:1.7em;
}
.concertlist ul{
	
	display:inline-block;
	padding:0px 8px;
}

.concertlist li{
	
	list-style: none outside none;
	margin-bottom:20px;
	padding:0;
	
}

/******** Streaming********/
.streamlist {
	width:100%;
	margin-top:20px;
	padding-top:10px;
	line-height:40px;
	font-size:2em;
	letter-spacing:normal;
	display:block;
	text-align:left;
}

.streamlist a{
		color: var(--browny);
}

.streamlist a:hover {
		color: var(--deepgreen);
}

.streamlist ul{
	
	display:block;
	padding:0px 20px;
	font-family: 'Love Ya Like A Sister', Helvetica, sans-serif;
	font-size:1.6em;
}

.streamlist li{
	display:flex;
	align-items:center;
	list-style: none outside none;
	margin-bottom:20px;
	padding:0;
}

.streamlist li img{
margin-right:20px;
}