@import url(https://fonts.googleapis.com/css?family=Permanent+Marker);

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* GENERAL */
body{
	background:#fff;
	font-size:16px;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#000;
	text-align:center;
	line-height:25px;
}

a{
	color:#000;
	text-decoration:underline;
}

.content-space-bottom{
	margin-bottom:60px;
}

.content-space-top{
	margin-top:60px;
}


/* HEADER */

header{
	background:#fff;
	position:fixed;
	height:80px;
	width:100%;
	z-index:2000;
	font-family: 'Permanent Marker', cursive;
	font-size:145%;
	
}

header nav ul{
	margin-top:0;
}

header nav ul li{
	display:inline;
	margin: 25px 4vw;
	line-height:20px;
}

header nav ul li a{
	color:#000;
	text-decoration:none;
	text-transform:uppercase;
}

header nav ul li a:hover{
	color:#a91a1a !important;
}

header nav, #logo{
	float:left;
}

#logo{
	width:100%;
	max-width:592px;
	max-height:174px;
	height:9vw;
	text-align:center;
	background-size:30vw;
	min-width:296px;
	margin-top:-55px;
}

#logo h1{
	margin-top:3vw;
}

#logo h1 img{
	width:12vw;
	max-width:282px;
	min-height:50px;
	min-width:100px;
}

header #primary{
	max-width:calc(50% - 296px);
	width:100%;
	text-align:right;
}

header #secondary{
	max-width:calc(50% - 296px);
	width:100%;
	text-align:left;
}

.nav-menu .sub-menu, .nav-menu .children {
    background:rgba(230,230,230,0.8) !important;
}

.sub-menu li{
	margin:0;
	padding:20px;
	text-align:left;
}

.sub-menu li a{
	height:auto;
	color:#666 !important;
}

.sub-menu li a;hover{
	color:#a91a1a !important;
}


/* SLIDER */

.flexslider .slides > li {
	background-size:contain !important;
	background-repeat:no-repeat !important;
}

.flexslider {
	padding-top:80px;
    margin: 0 0 0 !important;
	border:none !important;
}

/* HOME */

.rubrique{
	width:33.33%;
	float:left;
	min-width:300px;
}

.rubrique-titre{
	height:70px;
	font-family: 'Permanent Marker', cursive;
	font-size:145%;
	text-transform:uppercase;
	text-align:center;
	background:#24731e;
}

.rubrique-titre h2{
	padding-top:25px;
	color:#fff;
}


#home-news .rubrique-titre{
	background:#24731e;
}

#home-news ul, #home-indiscretions ul, #home-episodes ul{
	padding:20px;
}

#home-news ul li, #home-indiscretions ul li{
	margin-top:20px;
	padding:0 20px 20px 20px;
}

#home-episodes ul li{
	margin-top:20px;
}


#home-episodes .rubrique-titre{
	background:#184e14;
}

#home-indiscretions .rubrique-titre{
	background:#11380e;
}

.rubrique .news-content, .rubrique article{
	margin-top:30px;
}

.news-date p, #home-episodes h3 {
    background: rgba(0, 0, 0, 0) url("../images/title-logo.png") no-repeat scroll left top;
    display: inline;
    height: 50px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-top: 0;
    width: 100%;
}

#home-episodes h3 {
	padding:0 20px 10px 50px;
}

.date-publi-next {
    bottom: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    font-weight: bold;
    position: absolute;
    right: 15px;
}

.home-episode-img{
	position:relative;
}

.home-episode-img img{
	width:100%;
	height:auto;
}

.home-episode-img img:hover{
    -webkit-filter: opacity(70%);
	filter: opacity(70%);
}

.home-episode-img.next-ep img:hover{
    -webkit-filter: opacity(100%);
	filter: opacity(100%);
}

.next-ep h4{
	font-style:italic;
	color:#000;
	font-weight:normal;
}

.home-episode-title {
    background: #eee;
    font-size: 1em;
    font-weight: bold;
    padding: 20px 15px 10px;;
    position: relative;
	height:70px;
}
.home-episode-title a{
	text-decoration:none;
	color:#24731e;
}

.home-episode-title p{
	color:#888;
	font-size:0.8em;
	font-weight:normal;
	font-style:italic;
}

/* EPISODES */

#episode-season{
	width:100%;
}

#episode-season article{
	width:33.33%;
	display:inline-block;
	min-width:300px;
	margin:5px;
}

/* GALLERY */

#gallery{
	text-align:center;
}

article.gallery-item{
	width:200px;
	display:inline-block;
	margin:20px 10px;
}

.gallery-modal-content img{
	width:100%;
	max-width:600px;
	height:auto;
}

.gallery-modal-content{
	width:100%;
	max-width:600px;
	height:auto;
}

.modal-content{
	width:100%;
	padding-top:10px;
}

.modal-close{
	background: #fff;
    border: 3px solid black;
    border-radius: 25px;
    color: #000;
    font-size: 40px;
    height: 40px;
    padding-top: 5px;
    width: 45px;
	text-decoration:none;
	position:fixed !important;
	top:40px !important;
	right:40px !important;
}

/* CASTING */

#casting{
	text-align:center;
}

#sous-titre{
	margin-bottom:30px;
}

#casting h3{
    background: url("../images/title-logo.png") left top no-repeat;
    display: inline;
    height: 50px;
    padding-bottom: 10px;
    padding-left: 50px;
    padding-top: 0;
    width: 100%;
}

article.casting-item{
	width:270px;
	display:inline-block;
	margin:20px 10px;
}

article.casting-item img, .gallery-item img{
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
}

article.casting-item img:hover, .gallery-item img:hover{
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%); 
}

article.casting-item a, .gallery-item a{
	text-decoration:none;
}

article.casting-item a:hover, article.gallery-item h3 a:hover{
	text-decoration:underline;
	color:#060;
}

article.casting-item p a{
	font-style:italic;
	color:#bbb;
}

div.casting-modal-wrapper{
	background:#fff;
}

div.casting-modal-content, div.musiques-modal-content{
	height: auto !important;
    left: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
}

.casting-modal-content, .musiques-modal-content{
	width:100%;
	max-width:none;
	
}


#image-casting, #image-artiste{
	background-size:cover !important;
	background-position:center top !important;
    height: 475px;
    width: 100%;
}

.acteur-role, .artiste-titre, .episode-titre{
	height:auto;
	font-family: 'Permanent Marker', cursive;
	font-size:145%;
	text-transform:uppercase;
	text-align:center;
	background:#24731e;
	padding-bottom:25px;
}

.acteur-role h4, .artiste-titre h4, .episode-titre h2{
	padding-top:25px;
	color:#fff;
}

.post-content-casting, .post-content-musique{
	width:100%;
	max-width:800px;
	margin:0 auto 30px;
	padding:20px;
	color:#000;
}

.post-content-casting h5{
	font-family: 'Permanent Marker', cursive;
	font-size:150%;
	margin:40px 0 20px;
}

.resume table{
	width:100%;
	margin-top:50px;
}

.resume tr{
	text-align:left;
}

.resume td{
	width:50%;
	padding-left:20px;
	height:40px;
	line-height:40px;
	margin-top:10px;
	background:#ccc;
	border-top:#fff solid 3px;
}

td#saison-titre{
	font-family: 'Permanent Marker', cursive;
	font-size:150%;
	background:#11380e;
	line-height:40px;
	height:40px;
	text-align:center;
	color:#fff;
}

#famille-titre{
	text-align:right;
	padding-right:20px;
	color:#777;
	font-weight:bold;
}

#amour-titre{
	text-align:right;
	padding-right:20px;
	color:#7777;
	font-weight:bold;
}

#emploi-titre{
	text-align:right;
	padding-right:20px;
	color:#777;
	font-weight:bold;
}

#depart-titre{
	text-align:right;
	padding-right:20px;
	color:#777;
	font-weight:bold;
}

.element{
	list-style:square;
}

.modal-container{
	padding:0 40px 0 0;
}


/* MUSIQUES*/ 

.music-grid li{
	display:inline-block;
	position:relative;
}

.music-grid li h3{
	background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    bottom: 0;
    display: inline-block;
    height: 30px;
    line-height: 28px;
    margin-bottom: 6px;
    position: absolute;
    right: 0;
    text-align: center;
    width: 100%;
    z-index: 560;
}

.music-grid li h3 a{
	color:#aaa;
	text-decoration:none;
}

.music-grid li img {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
}

.music-grid li img:hover {
    -webkit-filter: grayscale(0%); 
    filter: grayscale(0%); 
}

.letter-menu{
	height:auto;
}

.letter-menu li{
	border: 2px solid #fff;
    border-radius: 20px;
    display: inline-block;
    margin: 15px 7px;
    padding: 5px;
    width: 25px;
}

.letter-menu li a{
	text-decoration:none;
	color:#fff;
}

.letter-wrapper{
	background: #ddd none repeat scroll 0 0;
    font-size: 200%;
    height: 270px;
    line-height: 270px;
    text-align: center;
    width: 270px;
}

.letter{
	color: #999;
    display: block;
    font-size: 800%;
    margin: 0 auto;
    position: absolute;
    width: 270px;
}

nav.menu-alpha{
	background:#184e14;
	height:auto;
}

.music-list{
	width:100%;
}

.post-content-musique .bio, .music-list ul{
	margin-top:50px;
}

.music-list li{
	clear:left;
	height:150px;
	background:#ddd;
}

.cover{
	width:150px;
	float:left;
}

.cover img{
	width:150px;
	height:150px;
}

.cd-infos{
	width:calc(100% - 150px);
	float:left;
	text-align:left;
	padding: 20px 0;
}

.cd-infos .single, .album-title, .episode-target a{
	font-family: 'Permanent Marker', cursive;
	font-size:150%;
	line-height:30px;
}

.cd-infos p{
	margin:0 20px;
}

.episode-target a{
	text-decoration:none;
	font-weight:bold;
}

.episode-target a:hover{
	text-decoration:underline;
	color:#F60;
}

/* SINGLE EPISODE */

.episode-content{
	max-width:1000px;
	width:88%;
	padding:20px;
	margin:0 auto;
}

#recit p{
	margin:20px 0;
	text-align:justify;
}

#recit #playlist{
	float:right;
	margin:0 0 0 20px;
}

.cast-list li{
	display:inline-block;
	margin-top:30px;
}

.image-casting-episode img{
	width:300px;
	height:300px;
}

#playlist p{
	margin:0;
}


.identite{
	width:300px;
	text-align:center;
}

.identite p{
	
}

.personnage{
	color: #999;
    font-style: italic;
}

.guests{
	font-family: 'Permanent Marker', cursive;
	font-size:150%;
	line-height:30px;
	margin-bottom:10px;
}

.carousel-item{
	width:100%;
	height:500px;
	position:relative;
	text-align:center;
	max-width:500px;
}

.carousel-item h2{
    background: rgba(255,255,255, 0.5) none repeat scroll 0 0;
    bottom: 0;
    font-family: "Quicksand",sans-serif;
    font-size: 150%;
    line-height: 30px;
    padding: 10px 0;
    position: absolute;
    text-align: center;
    max-width: 500px;
	width:100%;
    z-index: 3000;
	display:block;
}

.carousel li{
	margin-right:0;
}

/* TOGGLE */

#toggle-about{
	position:fixed;
	right:0;
	top:100px;
	z-index:10000;
	background:#24731e;
	box-shadow:0 0 10px -2px #000;
}

.cd-panel{
	z-index:10005;
	background:rgba(0,0,0,0.8);
}

.cd-panel-header{
	background:#24731e;
}

.cd-panel-header h1{
	color:#fff;
}

a.cd-panel-close{
	color:#000;
}

.cd-panel-container{
	background:#fff;
}

.cd-panel-content p{
	color:#000;
	margin:50px 30px;
}

.cd-panel-content{
	padding:80px 0 0 0;
}

.cd-panel-content img{
	
}

.cd-panel-content p  > img{
	width:1000px;
	margin-left:-60px;
}

.cd-panel-content h2{
	font-family: 'Permanent Marker', cursive;
	font-size:150%;
	line-height:30px;
	margin-bottom:10px;
}

#presentation{
	padding:30px;
}

.toggle-close{
	position:absolute;
	z-index:10010;
	background:url(../images/toggle-close.png) no-repeat center top;
}

/* FOOTER */


footer{
	background:#000;
	clear:both;
	height:60px;
	font-size:1.2em;
	line-height:3.5em;
	position:relative;
	color:#fff;
}

footer a:hover{
	color:#f00;
}

footer img {
    bottom: 10px;
    height: 40px;
    position: absolute;
    right: 20px;
    width: 40px;
}

footer img:hover{
	-webkit-filter: invert(70%); 
    filter: invert(70%); 
}

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

header nav ul li {
    margin: 25px 3vw;
}

}

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

header nav ul li {
    margin: 25px 2vw;
}

}

@media screen and (max-width:1388px){
	
nav ul#menu-droite {
    padding: 0 !important;
}

nav ul#menu-gauche {
    padding: 0 !important;
}
}

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

header #primary {
    max-width: calc(57% - 296px);
}

header #secondary {
    max-width: calc(57% - 296px);
}

#logo {
    max-width: 400px;
}

}

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

header #primary {
    max-width: calc(61% - 296px);
}

header #secondary {
    max-width: calc(61% - 296px);
}

#logo {
    max-width: 340px;
}

}

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

header nav ul li {
    margin: 28px 1vw;
}

header{
	font-size:120%;
}

}

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

#logo{
	float:none;
	margin:0 auto;
}

#responsive-menu a, #responsive-menu-title {
    font-family: 'Permanent Marker', cursive;
	font-size:150%;
	line-height:30px;
}


}

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

.rubrique{
	width:50%;
}

section.rubrique:nth-child(3){
	width:100%;
}

}

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

header nav ul li {
    margin: 30px 1vw;
}

header{
	font-size:110%;
}

}

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

header #primary{
	display:none;
}

header #secondary{
	display:none;
}

#logo{
	float:none;
	margin:0 auto;
}

.sub-menu li {
    margin: 0;
    padding: 0;
}

#responsive-menu a, #responsive-menu-title {
    font-family: 'Permanent Marker', cursive;
	font-size:150%;
	line-height:30px;
}

.resume td {
     background: #666 none repeat scroll 0 0;
    border-top: 3px solid #2e2e2e;
    display: block;
    height: auto;
    line-height: 25px;
    margin-top: 0;
    padding: 20px;
    text-align: center !important;
    width: 94%;
}

.element{
	list-style:none;
}

}

@media screen and (max-width:600px){
	
.modal-content{
	height: auto;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.modal-close{
	position: absolute;
    right: 0.3em !important;
    top: 0.3em !important;
}	

.rubrique {
    width: 100%;
}

#recit #playlist {
    float: none;
    margin: 50px 0 0 20px;
	display:inline-block;
	text-align:center;
}

}



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

.music-list li{
	width:300px;
	height:auto;
	margin:0 auto 30px
}

.cover img{
	width:300px;
	height:300px;
}

.cover, .cd-infos{
	float:none;
}

.cd-infos {
    padding: 20px 0;
    text-align: left;
    width: 100%;
}

.post-content-casting, .post-content-musique {
    padding: 20px 40px 20px 10px;
}



}

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

.image-casting-episode {
    margin-left: -20px;
}

#recit #playlist {
    float: none;
    margin: 0;
}

}