@charset "utf-8";
/*

Theme Name: Productions Arreuh
Theme URI: http://www.productionsarreuh.com/
Description: Thème conçu pour les Productions Arreuh. Programmation et design par Mathieu Poirier.
Version: 1.0
Author: Mathieu Poirier
Author URI: mailto:jean.mathieu.poirier.gmail.com
 

*/


/* CSS Document */


/* 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;
}

a:link, a:visited{
	text-decoration:none;
	color:#F9A4A4;
}

a:hover{
	text-decoration:none;
	color:#D03C3E;
}

.arreuh{

}

body{
	font-family: 'Open Sans', sans-serif;
	background-color:#EFEFEF;
	color: #FFF;
	font-weight:300;
}

.banniere{
	height:34px;
	background-color:#111111;
	border-top: #252525 solid 1px;
	border-bottom: #252525 solid 1px;
}

.banniere .inside{
	width:1060px;
	padding: 0 20px;
}

.likebox_ban{
	float:left;
	width:50px;
	padding-top:7px;
}

.nav_banniere{
	padding-top:9px;
	float:right;
}

.nav_banniere li{
	display: inline-block;
	padding-left: 3px;
}

.nav_banniere a:link, .nav_banniere a:visited{
	color:#FFF;
}

.nav_banniere a:hover{
	color:#D03C3E;
}

#conteneur{
	width:1110px;
	margin: 0 auto;
	background-color:#000000;
	padding-top:20px;
	position:relative;
}

.header{
	position:relative;
	margin: 0 auto;
}

.home{
	height:288px;
	width:940px;
}

.festival{
	width:1010px;
	padding: 0 50px;
}

.autre{
	height:25px;
	width:940px;
}

.inside{
	width:1100px;
	margin: 0 auto;
}

.copyright{
	padding:10px 0;
	text-align:right;
	font-size: 11px;
	background-color:#111111;
	border-bottom: #252525 solid 1px;
	border-top: #252525 solid 1px;
}

.building{
	position:absolute;
	right:-50px;
	z-index:0;
}

.cont_logo_nav_index{
	height:288px;
}

.cont_logo_nav_festival{
	height:391px;
}

.cont_logo_nav_microrevue{
	height:100px;
}

.cont_logo_nav_autre{
	width:500px;
	height:288px;
	float:right;
}

.logo_index{
	float:left;
	height:288px;
}

.logo_microrevue{
	float:left;
	height:100px;
}

.logo_autre{
	float:right;
	position:relative;
	z-index:3;
}

.logo_autre img{
	width:100%;
	height:auto;
}

.intro_accueil{
	font-size:22px;
	float:left;
	width:450px;
	margin:60px 70px;;
}

#contenu_index{
	position:relative;
	width:940px;
	height:850px;
	margin: 0 auto;
}

#contenu{
	width:940px;
	margin-top: 30px;
	min-height: 400px;
	padding: 0 0 50px 50px;
	overflow:hidden;
}

.singleimg img{
	max-width:475px;
}

.singleimg img{
	max-width:475px;
}

.microrevueimg img{
	max-width:920px;
	margin-top:20px;
}

.barre{
	height: 270px;
	width: 520px;
	background-color: #111111;
	position: absolute;
	z-index: 2;
}

.barre1{
	right: -85px;
	top: 233px;
}

.barre2{
	left: -85px;
	top: 75px;
}

.barre3{
	left: -85px;
	top: 415px;
}

.titrebarre{
	width:625px;
	color:#fff;
	font-size:24pt;
	position:relative;
}

.titrebarre_d{
	left:4px;
	top:-20px;
	padding-left:25px;
}
	
.titrebarre_g{
	right:135px;
	top:-20px;
	text-align:right;
	padding-right:25px;
}

.left{
	float:left;
}

.right{
	float:right;
}

.fleche_accueil{
	position:absolute;
	top: 550px;
	right: 140px;
}

#footer{
	background-color: #111111;
	border-top: #252525 solid 1px;
	overflow:hidden;
	padding:30px 0;
}

.cont_banniere{
	position:relative;
	width:1020px;
	margin: 0 auto;
}

.vide_banniere{
	height:215px;
	width:1020px;
	position:relative;
	z-index:0;
}

.banniere_single{
	width:1020px;
	height:157px;
	background-image: url(/wp/wp-content/themes/productionsarreuh/images/verre_raye.png);
	position:relative;
}

.article_wrap{
	color:#FFF;
	padding:0px 30px 20px 30px;
	width:420px;
}

.article_wrap_w{
	height:75px;
	overflow:hidden;
}

.article_wrap img{
	padding: 3px 5px 12px 0;
}

.article_wrap .right{
	width:350px;
}

.article_wrap_titre{
	font-size: 16px;
	line-height: 20px;
	text-transform: uppercase;
	margin-bottom:3px;
}

.article_wrap_meta{
}

.article_wrap_resum{
	font-weight:300;
	font-size:11px;
	line-height:13px;
	padding-bottom:10px;
}

.titre_single{
	position:absolute;
	left:360px;
	bottom:10px;
	padding-right:50px;

}

.titre_single h1{
	font-size:25px;
	line-height:28px;
	font-weight:300;
}

.titre_category{
	padding-top: 80px;
	padding-left: 60px;	

}

.titre_category h1{
	font-size:40px;
	line-height:40px;
	font-weight:300;
}

#thumbnail_contenu{
	width:300px;
	position:absolute;
	bottom:-20px;
	left:40px;
	z-index:2;
	border: solid 3px #000;
}

#thumbnail_contenu img{
	width:100%;
	height:auto;
}

.texte_contenu{
	width:495px;
	padding: 20px 40px 0 60px;
	float:left;
	
}

.texte_contenu p{
	font-weight:300;
	font-size: 14pt;
	line-height: 16pt;
	padding-bottom:16pt;
}

.texte_contenu h3{
	font-size:15pt;
	font-weight: 600;
	padding: 15pt 0 15pt 0;
}

.texte_contenu h4{
	font-size:13pt;
	font-weight: 400;
	padding: 15pt 0 15pt 0;
}

.texte_contenu h6{
	font-size:10pt;
	font-weight: 400;
	padding: 15pt 0 15pt 0;
}

.sidebar{
	float:right;
	width:345px;
}

.mediassociaux_texte{
	padding-top:20px;
}

.mediassociaux_texte li{
	list-style-type: none;	
	padding-right:15px;
	display:inline-block;
	vertical-align:top;
}

.mediassociaux_sidebar{
	margin: 90px 145px 30px 0;
	width: 100px;
	padding: 10px;
	border: 2px dashed #666666;
}

.mediassociaux_sidebar li{
	padding-bottom: 10px;
	list-style-type: none;	
}

.mediassociaux_sidebar li:last-child{
	padding:0;
}

.mediassociaux_footer{
	float:right;
}

.mediassociaux_footer li{
	list-style-type: none;	
	padding-right:15px;
	display:inline-block;
	vertical-align:top;
}

.wrap_footer{
}


/* MENUS */

#navtop_index{
	font-size:18px;
	line-height:18px;
	font-weight:300;
	padding: 13px 0 20px 20px;
	text-transform: uppercase;
}

.index_nav{
	position:relative;
	z-index:1;
	float:left;
}

.festival_nav{
	float:right;
}


#navtop_footer{
	width:300px;
	padding-left:20px;
	padding-right: 30px;
	font-size:20px;
	line-height:22px;
	font-weight:300;
	float:left;
	text-transform: uppercase;
}

#navtop_footer ul {
	padding-bottom:5px;
}

#navtop_footer ul li ul {
	font-size:12px;
	line-height:13px;
	padding-left:10px;
}


#navtop_index ul li{
		display:inline-block;
		padding-right: 8px;
		padding-left: 3px;
		border-right: 1px solid #D52046;
		height:20px;
		position:relative;
}

#navtop_index ul li:first-child {
		padding-left: 0;
}

#navtop_index ul li:last-child {
		padding-right: 0;
		border-right: none;
}

#navtop_index ul li:hover ul, #navtop_autre ul li:hover ul {
	display: block;
	
}

#navtop_index ul li ul {
display: none;
position: absolute;
z-index: 999;
right: 0;
text-align:right;
overflow: hidden;
background-color: #4D4B4B;
padding: 6px;
font-size:12px;
line-height:13px;
width:195px;
border-top:solid #000 10px;
}

#navtop_autre{
	font-size: 20px;
	line-height:22px;
	text-align: right;
	font-weight: 300;
	padding-top: 160px;
	float: right;
	position: relative;
	z-index: 9999;
	text-transform: uppercase;
}

#navtop_autre ul li{
		position:relative;
		padding-right:6px;
}

#navtop_autre ul li ul {
display: none;
position: absolute;
z-index: 999;
top: -2px;
right: -209px;
overflow: hidden;
background-color: #4D4B4B;
padding: 6px;
font-size:12px;
line-height:13px;
width:195px;
text-align:left;
}

#navtop_index ul li ul li{
	border-right:none;
	padding:0;
}


#navtop_index li a:link, #navtop_index li a:visited, #navtop_autre li a:link, #navtop_autre li a:visited, #navtop_footer li a:link, #navtop_footer li a:visited{
	color:#FFF;
}

#navtop_index li a:hover, #navtop_autre li a:hover, #navtop_footer li a:hover{
	color:#D03C3E;
}



/* DTT 2015 */


.sidebar_dtt{
	margin:0 40px 50px 0;
	width:230px;
	float:left;
}

.datesfestival{
padding-bottom:75px;
font-size:40px;
font-weight:500;
text-align:center;
}

.actu_dtt{
	position:relative;
	min-height: 250px;
	background-color: #022344;
	background-position: left bottom;
	background-image: url(/wp/wp-content/themes/productionsarreuh/images/building_transparent.png);
	background-repeat: no-repeat;
	position:relative;
	margin-bottom:50px;
}

.w_titre_actu{
	width: 100%;
	background-color: #b2b1b1;
	height: 30px;
	opacity: 0.26;
	position:absolute;
	top:20px;
}

.titre_actu{
	font-size:18px;
	position:absolute;
	top:25px;
	padding-left:13px;
	font-weight:400;
}

.sidebar_actu_wrap{
	padding-top:65px;
}

.sidebar_wrap_titre{
	font-size:14px;
	line-height:14px;
	font-weight:500;
	color:#fff;
	padding:0 15px;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.sidebar_wrap_titre a:link, .sidebar_wrap_titre a:visited{
	color:#fff;
}

.sidebar_wrap_titre a:hover{
	text-decoration: none;
	color: #F9A4A4;
}

.sidebar_wrap_meta{
	font-size:12px;
	font-weight:300;
	padding:2px 20px 20px 35px;
}

#conteneur_festival {
	width: 1010px;
	margin-top: 30px;
	min-height: 400px;
	padding: 0 50px 50px 50px;
	overflow: hidden;
}

.festival_accroche{
	width: 630px;
	padding: 20px 100px 25px 25px;
	background-color: #111111;
	box-shadow: 15px 15px 0px 0px rgba(43, 43, 43, 1);
	-webkit-box-shadow:15px 15px 0px 0px rgba(43, 43, 43, 1);
	-moz-box-shadow:15px 15px 0px 0px rgba(43, 43, 43, 1);
	position: absolute;
	right: -55px;;
	top: 90px;
}

.festival_accroche h3{
	font-weight:500;
	font-size: 40px;
	padding-bottom:20px;
	text-align:right;
}

.festival_accroche p{
	font-weight:300;
	padding-bottom:20px;
	text-align:justify;
}

.festival_accroche p:last-child{
	padding-bottom:0;
}

.contenu_festival{
	width:700px;
	float:right;
}

.spectacles_festival{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	margin-bottom:50px;
}
	

.boites {
	width:220px;
	height:220px;
	background:#4c0b18;
	margin-right:20px;
	margin-bottom:20px;
	position:relative;
	z-index:1;
}

.conteneur_festival_2018 .boites,
.conteneur_festival_2018 .boites:nth-of-type(even){
/*	background-color:#FFF;	
	color:#000000;*/
	background-image:url("http://www.productionsarreuh.com/wp/wp-content/uploads/2018/02/gold-foil-texture_petit_petit.jpg");
	
}

.boites_hover{
	position:absolute;
	z-index:2;
	width:220px;
	height:220px;
	top:0;
	left:0;
}

.boites_hover a:hover{
	position: absolute;
	z-index: 2;
	width: 220px;
	height: 220px;
	top: 0;
	left: 0;
	background-image: url(/wp/wp-content/themes/productionsarreuh/images/hovertransparent_hover.png);
	background-repeat: repeat;	
}

.boites:nth-of-type(even) {
	background:#022344;
}

.boites:nth-of-type(3n){
	margin-right:0;
}

.cont_festival_collabo{
	height:286px;
	margin-top:50px;
}

.ct_fs_collabo{
	position:relative;
	float:left;
	width: 450px;
	margin:0 10px 0 50px;
	height:100%;
}

.ct_fs_collabo ul{
	border-top: solid 1px #727272;
	padding-left:50px;
	position:absolute;
	bottom:0;
}

.ct_fs_collabo li{
	display:inline-block;
	vertical-align:middle;
}

.logo_collabo {
	margin:20px 20px 0 0;
	display:inline-block;
}

.logo_collabo img{
	height:auto;
	width:auto;
	max-height:65px;
	max-width:100px;
	image-rendering: optimizeQuality;  /* Firefox 3.6+ ; comportement identique à celui par défaut, pas besoin de spécifier */
       -ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0 ; par défaut dans IE8+ */
}

.ct_fs_logo{
	float:right;
	width:190px;
}

.wrap_boites{
	height:117px;
}

.bt_date{
	text-transform: uppercase;
	padding: 11px 5px 3px 11px;
	font-size:25px;
	font-weight:500;
}

.bt_salle{
	font-size: 12px;
	text-transform: uppercase;
	padding: 0 5px 15px 20px;
}

.bt_titre{
	font-size:14px;
	padding: 0 5px 1px 40px;
}

.bt_type{
	font-size: 12px;
	font-style: italic;
	padding: 0 5px 3px 40px;
}

.bt_image{
	position:absolute;
	bottom:-2px;	
}

.bt_image img{
	width:220px;
	height:auto;

}

.bt_microrevue{
	position:absolute;
	bottom:10px;
	right:0;
	padding: 11px;
	text-align:right;
	float:right;
	font-weight:300;
}

.bt_microrevue_sans_directeur{
	margin-top:134px;
	padding: 9px;
	text-align:right;
	float:right;
	font-weight:300;
}

.bt_mc_titre{
	font-size:18px;
}

.bt_mc_titre2{
	font-size:16px;
}

.bt_mc_directeur{
}


.contenu_microrevue{
	float:right;
	width:600px;
}

#titre{
	padding-bottom:10px;
	font-size: 40px;
	font-weight: 600;
	line-height: 36px;
	margin-bottom: 5px;
}

#facebook{
	padding-bottom:70px;
}

#elements{
	margin-bottom:70px;
}

.micro{
	margin-bottom: 20px;
	padding-bottom:10px;
	border-bottom: 1px solid #999999;
	overflow:hidden;
}

.infosrevues{

	width:377px;
	float:left;
	overflow:hidden;
}

.datedesortie{
	font-size:12px;
	line-height: 12px;
}

.infosrevues h3 {
font-size: 18px;
font-weight: 600;
}

.couverture{
	width:223px;
	float:right;
	text-align:right;

}

.couverture img{
	width:100%;
	height:auto;
}

.fw{
	width:100%;
}

.event_box{
	background-color:#FFF;
	padding:20px;
	color:#000000;
	font-weight:400;
	margin:20px 0;
}

.event_box h3,
.event_box h4,
.event_box h6{
	padding:0;
	margin:0;
}

.event_box h4{
	text-transform:uppercase;
}

.ligne_sep{
	margin:15px 0;
	border-top:solid 1px #d4d4d4;
}

.event_fb{
	margin:30px 0 20px 0;
}

.event_fb a {
    color: #000000;
    border: solid 1px #d4d4d4;
    border-radius: 5px;
    padding: 5px 15px;
    background-color: #f7f7f7;
    text-transform: uppercase;
}

.event_fb a:hover{
	background-color:#F9A4A4;
	color:#FFF;
}




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

.banniere .inside{
	width:940px;
	padding: 0 10px;
}

#conteneur{
	width:920px;
	padding:0 20px;
	overflow:hidden;
}

.festival {
width: 100%;
padding: 0 0;
margin-top:20px;
}

.home {
height: 288px;
width: 100%;
margin-top:20px;
}

.autre {
height: 25px;
width: 100%;
margin-top:20px;
}

.cont_banniere {
position: relative;
width: 100%;
margin: 0 auto;
}

.banniere_single {
width: 920px;
height: 157px;
padding-right: 20px;
}

.festival_accroche {
width: 520px;
padding: 20px 25px 25px 25px;
right: 60px;
top: 90px;
}

.building {
right: 0px;
}

.barre1{
	right: -65px;
	top: 233px;
}

.barre2{
	left: -65px;
	top: 75px;
}

.barre3{
	left: -65px;
	top: 415px;
}


.festival_accroche h3 {
font-size: 35px;
}

#conteneur_festival {
width: 100%;
margin-top: 95px;
padding: 0 0 50px 0;
}

.sidebar_dtt {
margin: 0 30px 50px 0;
}

.contenu_festival {
width: 660px;
}

.boites {
width: 210px;
height: 220px;
margin-right: 15px;
margin-bottom: 15px;

}

.boites_hover {
width: 210px;
height: 220px;
}

.boites_hover a:hover{
	width: 210px;
	height: 220px;	
}

.bt_image img{
	width:210px;
}

.bt_titre {
font-size: 13px;
padding: 0 5px 1px 20px;
}

.bt_type {
font-size: 11px;
font-style: italic;
padding: 0 5px 3px 20px;
}

.ct_fs_collabo {
width: 420px;
height: 95px;
margin: 160px 0 15px 50px;
}

.logo_collabo {
margin: 20px 20px 0 0;
height: 50px;
width: 50px;
}

.logo_collabo img {
height: 50px;
width: 100%;
}

.inside {
width: 920px;
margin: 0 auto;
padding: 0 20px;
}

#navtop_footer {
width: 250px;
padding-left: 0px;
padding-right: 20px;
font-size: 20px;
line-height: 22px;
}



}

@media only screen and (max-width: 960px) {
	
.banniere {
width:960px;
}

.banniere .inside {
width:900px;
padding: 0 30px;
}

#footer {
width:960px;
}

.inside {
width: 900px;
padding: 0 30px;
}

.copyright {
width:960px;
}

#navtop_footer {
width: 180px;
font-size: 15px;
line-height: 16px;
}