@import url(http://fonts.googleapis.com/css?family=Rye);
@import url(http://fonts.googleapis.com/css?family=Slackey);
@import url("sc-player-standard/standards.css"); 
@import url("sc-player-standard/structure-horizontal.css"); 
@import url("sc-player-standard/colors-green.css");

body {
	background: url(../bodybg.jpg) center fixed;
	background-size:cover;
	
	
}
h1 {border:none;}
/*@media only screen and (device-width: 768px) {
	body {
	background: url(../bodybg.jpg);
	background-size:100%;
	background-repeat: repeat-y;
	

	
}
}
*//* -------------------------------------    SOCIAL ----------------------------------------------------------------------------- */
.overlay {
	background-color:black;
	opacity:0.8;
	position:absolute;
	z-index:500;
	width:70%;
	left:15%;
color:white;
display:none;
	height:auto;
	
}
.overlay:target {
	display:block;
	
	
}
.overlay a {color:white;font-size:1.8em;}
a.social img {
	max-width:60%;
	height:auto;
	width:auto;
	z-index:1000;

}
	
a.social {
	display:block;
	position:absolute;
	width:10%;
	top:0%;
	right:-30px;
	-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	z-index:1000;
	
}
a.social:hover {
	 -webkit-transform: translate(4px);/* Agrandissement de la photo à l'échelle 1.4 et rotation de -10 degrés */
    -moz-transform:  translate(4px);
    -o-transform:  translate(4px);
    transform:  translate(4px);
	z-index:1000;
	
}

#facebook { 
	top:4%;
	
	}
#myspace { top:14%;}
#utube { top:24%;}
#bookus {top:34%;}
#credits {top:44%;}

/* -------------------------------------    CONTAINER ----------------------------------------------------------------------------- */
.st-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
	}

.st-container > input,
.st-container > a {
	position: fixed;
	bottom: 0px;
	width: 20%;
	cursor: pointer;
	font-size: 16px;
	height: 34px;
	line-height: 34px;
}

.st-container > input {
	opacity: 0;
	z-index: 1000;
}

.st-container > a {
	z-index: 10;
	font-weight: 700;
	background: rgba(51, 6, 6, 0.7);
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
	font-family:'Rye';
	font-weight:normal;
	font-variant:small-caps;
	text-shadow:none;
}


/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
/* -------------------------------------    NAVIGATION ----------------------------------------------------------------------------- */


#st-control-1, #st-control-1 + a {
	left: 0;
}

#st-control-2, #st-control-2 + a {
	left: 20%;
}

#st-control-3, #st-control-3 + a {
	left: 40%;
}

#st-control-4, #st-control-4 + a {
	left: 60%;
}

#st-control-5, #st-control-5 + a {
	left: 80%;
}

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
	background: #600;
	opacity:0.7;
}

.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
	bottom: 100%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: rgba(51, 6, 6, 0.7);
	border-width: 20px;
	left: 50%;
	margin-left: -20px;
}

.st-container > input:hover + a{
	background: #600;
	opacity:0.7;
}

.st-container > input:hover + a:after {
	border-bottom-color: #600;
	opacity:0.7;
}
/* -------------------------------------    CONTAINER DES PAGES ----------------------------------------------------------------------------- */
.st-scroll,
.st-panel {
	position: relative;
	width: 100%;
	height: 100%;
}

.st-scroll {
	top: 0;
	left: 0;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
	
	/* Let's enforce some hardware acceleration */
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
}

.st-panel{
/*	background: yellow;*/
	overflow: hidden;
} 

#st-control-1:checked ~ .st-scroll {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-o-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
	-webkit-transform: translateY(-300%);
	-moz-transform: translateY(-300%);
	-o-transform: translateY(-300%);
	-ms-transform: translateY(-300%);
	transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
	-webkit-transform: translateY(-400%);
	-moz-transform: translateY(-400%);
	-o-transform: translateY(-400%);
	-ms-transform: translateY(-400%);
	transform: translateY(-400%);
}


/* Content elements */
/* -------------------------------------    PAGES  ----------------------------------------------------------------------------- */

.st-panel {

	background-size:cover;
	overflow:hidden;
	
}


.st-panel div p {
	color:white;	
	overflow-x:hidden;
	padding:2%;
	font-size:1.2em;
		
}
#st-control-1:checked ~ .st-scroll #st-panel-1 div,
#st-control-2:checked ~ .st-scroll #st-panel-2 div,
#st-control-3:checked ~ .st-scroll #st-panel-3 div,
#st-control-4:checked ~ .st-scroll #st-panel-4 div,
#st-control-5:checked ~ .st-scroll #st-panel-5 div{
	-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
.st-panel h2 {
	color: black;
	text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
	position: absolute;
	font-size: 54px;
	font-family:'Rye';
	font-weight: normal;
	width: 80%;
	left: 10%;
	text-align: center;
	line-height: 50px;
	/*margin: -70px 0 0 0;*/
	padding: 0;
	/*top: 50%;*/
	
	-webkit-backface-visibility: hidden;
}

#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2,
#st-control-1:checked ~ .st-scroll #st-panel-1 #ladymood img{
	-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
h3 {
	font-family: 'Slackey', cursive;
	font-size:1.4em;
	display:block;
	position:static;
	width:100%;
	color:#C60;
	text-align:center;
	text-shadow: 10px 10px 10px #1a171a;
	clear:both;
}


/* -------------------------------------    ANIMATION ----------------------------------------------------------------------------- */


@-webkit-keyframes moveDown{
	0% { 
		-webkit-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}

@-moz-keyframes moveDown{
	0% { 
		-moz-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}

@-o-keyframes moveDown{
	0% { 
		-o-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}

@-ms-keyframes moveDown{
	0% { 
		-ms-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}

@keyframes moveDown{
	0% { 
		transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}
/*@-webkit-keyframes moveMood{
	0% { 
		-webkit-transform: translateY(-800px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}

@-moz-keyframes moveMood{
	0% { 
		-moz-transform: translateY(-800px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}

@-o-keyframes moveMood{
	0% { 
		-o-transform: translateY(-800px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}

@-ms-keyframes moveMood{
	0% { 
		-ms-transform: translateY(-800px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}

@keyframes moveMood{
	0% { 
		transform: translateY(-800px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}*/



@-webkit-keyframes moveUp{
	0% { 
		-webkit-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}

@-moz-keyframes moveUp{
	0% { 
		-moz-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}

@-o-keyframes moveUp{
	0% { 
		-o-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}

@-ms-keyframes moveUp{
	0% { 
		-ms-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}

@keyframes moveUp{
	0% { 
		transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}




/* -------------------------------------    PAGE ACCUEIL  ----------------------------------------------------------------------------- */



section#st-panel-1 {
/*	background: url(../../barb.png) center no-repeat fixed ;/* prb de fixed sur ipad*/
	background-size:cover;*/
	
	}
	


div#teaser-video  {
	background-color:black;
	width:38%;
	height:45%;
	top:44%;
	position:absolute;
	left:28%;
	padding:5px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5); 
	box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5);
}

div#teaser-video iframe {
	position:absolute;
	height:96%;
	text-align:center;
}

@media screen and (max-width: 360px) {
	div#news  {
		display:none;
	}
	div#teaser-video  {display:none;
	}
	div#logo{

	width:70%;	
position:absolute;
	left:15%;
	top:3%;
}
	
}
   
div#news  {
	
	z-index:10;
	width:14%;
	height:auto;
	top:10%;
	position:absolute;
	left:16%;
	padding:5px;
	/*-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow:  -4px -4px 20px 8px rgba(0, 0, 0, 0.5); 
	box-shadow:  -6px -8px 5px 1px rgba(0, 0, 0, 0.5);*/
	/*-moz-transform: scale(1) rotate(5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);*/
		-webkit-transform: scale(1) rotate(-5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        /*-o-transform: scale(1) rotate(5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        -ms-transform: scale(1) rotate(5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
        transform: scale(1) rotate(5deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
		-webkit-transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;*/
		-webkit-transform-origin: 40% 5%;
	 background-image: url(../news300-2.png);
	 background-size: cover;
	 background-repeat:no-repeat;
	 font-family:'Rye';
	color:black;
	text-align:center;
	padding:4px;
	padding-top:2%;
	padding-bottom:2%;
	overflow:visible;
	font-size:1.5em;
	
}

div#news span.pre{
	
	color:#92050e;
}
span#newshead {
	font-family:'Rye';
	color:#92050e;
	font-size:1.5em;
	display:block;
	padding-top:8px;
	padding-bottom:8px;
	border-bottom:1px solid #92050e;
	border-top:1px solid #92050e;
	width:70%;
	margin-left:15%;
}

div#ladymood {
/*	background-color:black;*/
/*	width:30%;*/
	height:100%;
position:absolute;
	left:58%;
	top:-2%;
	
}
#ladymood img {
	height:100%;
}
@media screen and (max-width: 360px) {
	
	div#ladymood {

	height:100%;
position:absolute;
	left:5%;
	top:10%;
	
}
	
}
div#logo{
/*	background-color:black;*/
	width:30%;	
position:absolute;
	left:33%;
	top:3%;
}
#logo img {
	width:100%;
}
@media screen and (max-width: 360px) {
	
	div#logo{

	width:70%;	
position:absolute;
	left:15%;
	top:-40px;
}
	
}
#st-control-1:checked ~ .st-scroll #st-panel-1 div#ladymood {
		-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-moz-animation: moveMood 0.6s ease-in-out 0.2s backwards;
	-o-animation: moveMood 0.6s ease-in-out 0.2s backwards;
	-ms-animation: moveMood 0.6s ease-in-out 0.2s backwards;
	animation: moveMood 0.6s ease-in-out 0.2s backwards;
}

/* -------------------------------------    PAGE INFOS ----------------------------------------------------------------------------- */

#infos {
	/*position:absolute; 
	width:60%; 
	height:70%; 
	left:20%; 
	top:15%;
	overflow:auto;
	-webkit-backface-visibility: hidden;
	overflow-x:hidden;
	text-align:justify;
	font-family: 'Slackey', cursive;
	font-variant:small-caps;
	text-shadow: 10px 10px 10px #1a171a;
    filter: dropshadow(color=#1a171a, offx=10, offy=10);
	font-size:1.5em;
	line-height:1.7em;
	padding:2%;*/
	font-family:'Rye';
	font-weight:normal;
	color:black;
	font-variant:small-caps;
	text-shadow:none;
	position:absolute; 
	background-image:url(../bgshow.jpg);
	background-size:cover;
	background-attachment:scroll;
	background-repeat:no-repeat;
	width:60%; 
	height:70%; 
	left:20%; 
	top:15%;
	overflow:auto;
	-webkit-backface-visibility: hidden;
	overflow-x:hidden;
	-webkit-box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5); 
	box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5);
	}
#infos p { font-family:'Rye';
	font-weight:normal;
	color:black;
	font-variant:small-caps;
	text-shadow:none;
	text-align:justify;
	font-size:1.4em;
}
#infos h3 {
	font-family:'Rye';
	font-weight:normal;
	color:black;
	text-shadow:none;
	font-size:2em !important;
	display:block;
	width:90%;
	border-top:thin #333 solid;
	border-bottom: thin #333 solid;
	padding:10px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:0px;
	
}
span#bababoom {
	font-size:5em;
	color:#600;
	text-align:center;
}


div.moodiesPicts-container{
/*	border:blue solid 1px;*/
	width:100%;
	position:static;
	overflow:visible;
	padding-left:8%;
	background-color:red;
	
	
}
div.moodiesPicts {
	background-image:url(../Wanted-Poster.png);
	background-size:100%;
	background-repeat:none;
	float:left;
	width:20%;
    margin-right:4%;
	margin-bottom:4%;
	position:static;
	height:400px;
}

/* -------------------------------------    PAGE SHOWS ----------------------------------------------------------------------------- */
#shows {
	font-family:'Rye';
	font-weight:normal;
	color:black;
	font-variant:small-caps;
	text-shadow:none;
	position:absolute; 
	background-image:url(../bgshow.jpg);
	background-size:100%;
	background-repeat:no-repeat;
	width:60%; 
	height:70%; 
	left:20%; 
	top:15%;
	overflow:auto;
	-webkit-backface-visibility: hidden;
	overflow-x:hidden;
	-webkit-box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5); 
	box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5);
		
	}
#shows h3 {
	font-family:'Rye';
	font-weight:normal;
	color:black;
	text-shadow:none;
	font-size:2em !important;
	display:block;
	width:90%;
	border-top:thin #333 solid;
	border-bottom: thin #333 solid;
	padding:10px;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:0px;
	
}
#shows ul {
	list-style:none;
	width:90%;
	margin-left:auto;
	margin-right:auto;
	padding:0px;
}
#shows ul li {
	/*background-color:yellow;*/
	margin-bottom:10px;
	border-bottom:thin solid black;
	padding-bottom:10px;
}
#shows ul li span.date {
	color:#600;
	display: inline-block;
	padding:4px;
	opacity:0.8;
	margin-right:10px;
}
#shows ul li a {
	display:block;
	color:#600;
	width:100%;
	text-align:right;
}
#nextshow {
	width:90%;
	margin-left:auto;
	margin-right:auto;
	
}

#nextshow-date {
	width:150px;
	height:150px;
	
}
#date {color:#600;
	font-size:6em ;
	display:block;
	float:left;
	text-align:center;
	margin-right:20px;}
	#date:before {
	content:"jeudi";
	font-size:0.6em;
	color:#333;
	display:block;
	margin-bottom:-20px;
}
#date:after {
	content:"avril";
	font-size:0.6em;
	color:#333;
	display:block;
	top:-50px;
	margin-top:-30px;
}
#nextshow-infos {
	margin-top:-136px;	
}
#nextshow-infos-titre {color:#600;
	font-size:2em ;
	display:block;
	text-align:justify;
	display:block;
	margin-bottom:0px;
	padding-top:-20px;
	
	
}
#nextshow-infos-heure {
	font-size:1.8em ;
	display:block;
	display:block;
	margin-top:0px;
	float:left;
	margin-right:10px;	
}
#nextshow-infos-lieu {
	color: #666;
	font-size:1em ;
	display:block;
	display:block;
	margin-top:10px;
	margin-right:10px;	
}
#nextshow-infos-details {
	font-family:'Rye';
	font-weight:normal;
	color:black;
	text-shadow:none;
	font-size:1em ;
	display:block;
	font-variant: normal;
	text-align:justify;
	margin-left:0px;
	padding:0px;
	
}
#nextshow a {
	font-size:1.2em;
	padding-right:20px;
	color:white;
	background-color: #600;
	opacity:0.8;
	display:block;
	width:100%;
	text-align:right;
	clear:left;
	
}
#nextshow a:hover {
	background-color:white;
color:#600;
	
}

/* -------------------------------------    MOBILES ET IPAD  ----------------------------------------------------------------------------- */

#music {position:absolute; width:70%; height:70%; left:15%; top:18%;}
#videos {position:absolute; width:70%; height:70%; left:15%; top:18%;}
#videos iframe {padding:5px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5); 
	box-shadow:  0px 0px 20px 8px rgba(0, 0, 0, 0.5); background-color:black;}