/*********************************************************************************************************
*********************************************** SLIDER ********************************************
**********************************************************************************************************/
/* Proposition de 3 Entités  - contenu de Gauche */



.slider
{
	position:relative;
}

.slider .view-content
{
	margin-top:10px;
    width: 590px;
    width: 100%; /* for mobile */
	overflow:hidden;
	background:#E6E6E6;

	border:10px solid #E6E6E6;

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;


}


.slider .content
{
	height:225px;
    /*overflow-x: hidden;*/ /* BUG : scroll y si trop de text */
    overflow: hidden;
    width: 570px;
	/*margin:auto;*/
}
.slider .description .content
{
	width: 100%;

}

/* SLIDER nav */
.slider .nav {
	display: block;
	position: absolute;
	z-index: 10;
	top:-40px;
	right:0px;
	cursor:pointer;

}
.slider .nav span{
	display: inline-block;
	width: 7px;
	height: 19px;
	overflow:hidden;
	text-indent:-2000px;
	margin:10px 10px;
}


.slider .prev
{
	background:url(../images/assets/arrow-left-black.png);
	right:50px;

}
.slider .next
{
	background:url(../images/assets/arrow-right-black.png);
	right:0px;
}


.slider .items
{
	/*width:2000px;*/
	left: 0;
    position: relative;
	-webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;    -o-transition: all 0.3s ease;    transition: all 0.3s ease;
}
.grid-slider
{
	  width: 183px;
	  height:210px;
	  display: inline;
	  float: left;
	  margin-left: 0px;
	  margin-right: 10px;
	  /* margin-top:2px;  pour inserer correctement le sticker  */
	  background:#E6E6E6;
	  position: relative; /* pour positionner le sticker */
}
.grid-slider:first-child{border-left:none;}
.grid-slider:hover{	background:white;}

.grid-slider .pict {	height:120px;background:black;margin-bottom:15px; position:relative; overflow:hidden;}
.grid-slider .pict img{	position:absolute; top:0px;}

/*UPPERCASE*/
.grid-slider .title{  letter-spacing:0.01em; /* text-transform:lowercase; */} /* focus Chris Marker */
.grid-slider .title:first-letter, .grid-slider .date:first-letter, .grid-slider .author:first-letter {text-transform:uppercase;}

/*FONT*/
.grid-slider { font-size:12px; line-height:16px;}
.grid-slider .date {line-height:10px;}
.grid-slider .date, .grid-slider .author{/*font-family:Times*/}
.grid-slider .date { font-weight:bold; }


.grid-slider .title, .grid-slider .author, .grid-slider .date, .grid-slider .body, .grid-slider p, .grid-slider .type
{ margin:0px;}

.grid-slider .title a {	color:black; text-decoration:none;}

.grid-slider .date:first-letter {text-transform:uppercase;}

/* color date */
.cinema .grid-slider .date { color:#22B573}
.ecole .grid-slider .date { color:#703F1D}
.fresnoy .grid-slider .date { color:#009CA4}
.expo .grid-slider .date { color:#475CA2}
/* fin color date */

.grid-slider .body {}




/*********************************************************************************************************
*********************************************** BADGES ********************************************
**********************************************************************************************************/
/* Proposition de 6 Entités  par ligne de 3 élements sur toute la largeur du contenu de Gauche*/
.grid-badge
{
	  width: 190px;
	  display: inline;
	  float: left;
	  height: 325px;
	  margin-left: 0px;
	  margin-right: 10px;
	  line-height: 13px;
	  position:relative; /* absolute body*/
	  margin-bottom: 10px;
}
.grid-badge:nth-of-type(3n) /*permet de caler le 3eme item à droite*/
{
	  margin-right: 0px;
}

.grid-badge:hover
{
	background:#E6E6E6;
}

.grid-badge .type
{
	position:absolute;
	color:#5a5a5a;
	text-transform:uppercase;
	font-size:0.7em;
	top:-14px;
	width:100%;
	text-align:right;
}

.grid-badge .pict {	height:160px;background:black; margin-bottom:10px; overflow:hidden; position:relative;}
.grid-badge .pict img{	position:absolute; top:0px;}
.grid-badge .title h3 {	font-weight:bold;font-size:13px;margin-bottom:5px; letter-spacing:0.01em; /*text-transform:capitalize;*/} /*NO CAPITALIZE REMAQUE DE LA COMM*/
.grid-badge .title h3:first-letter, .grid-badge .date:first-letter {text-transform:uppercase;}
.grid-badge .title a,
.grid-badge .title h3, /* new */
#block-system-main .grid-badge a,
#block-system-main .grid-badge .title a,
#block-system-main .grid-badge a img
{	color:black; text-decoration:none; border:0px dotted;}

.grid-badge .dates { font-size:0.85em; font-weight: bold;}

.grid-badge .body,
.grid-badge .diapotxt{
	height:95px;
	font-size:12px;
	/*position:absolute; */
	top:230px;
	overflow:hidden;

} /*absolute permet d'avoir des titres sur deux lignes en alignant tous les textes*/


/* mobile */
@media screen and (max-device-width: 480px) and (min-device-width: 320px) {
	.grid-badge {height:110px; overflow:hidden; }
	.grid-badge .diapotxt{position:static }


}



.context-homepage #block-system-main .grid-badge .body a,
.context-homepage #block-system-main .grid-badge .diapotxt a
{
	text-decoration:none;
	color:#4D4D4D;
	text-decoration:none;
	border-bottom:1px dotted;
}



.context-homepage #block-system-main .grid-badge .diapotxt a:hover {
		text-decoration:none;
		border-bottom-style:dashed;

	}



.grid-badge .copyright{

	position:absolute;
	display:block;
	bottom:154px;
	font-size:0.75em;
	color:black;
	left:0px;
	width:190px;
	text-align:right;
	/*text-shadow: 0px -1px 1px #999;*/
	/*
	position:absolute; display:block; bottom:170px; font-size:0.8em; color:white; left:190px; width:160px; text-align:left;
	transform:rotate(-90deg); 	-ms-transform:rotate(-90deg);	-moz-transform:rotate(-90deg);	-webkit-transform:rotate(-90deg);	-o-transform:rotate(-90deg);
	-webkit-transform-origin: 0% 100%;	-moz-transform-origin: 0% 100%;	-ms-transform-origin: 0% 100%;	-o-transform-origin: 0% 100%;	transform-origin: 0% 100%;
	text-shadow: 0px 0px 2px #000;
	*/
}
.grid-badge .copyright div{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


/*COULEURS PAR CONTEXTES*/
.grid-badge .date { font-size:0.85em; font-weight: bold;}
.context-ecole .grid-badge .date {color:#703F1D}
.context-cinema .grid-badge .date {color:#22B573}
.context-fresnoy .grid-badge .date {color:#009CA4}
.context-expo-evenements .grid-badge .date {color:#475CA2}

/*JUSTIFICATION DES TEXTES SUR LES BAGES CINE*/
.context-cinema .grid-badge .body p{ text-align:left;}



/* HOME PAGE */

.context-homepage .grid-badge .title a {
	font-size:0.65em;
	font-weight: bold;
}

.context-homepage .grid-badge .date {color:#00B5AD}


/******************************** AVATAR ****************************************/
.grid-badge .avatar {
	margin-bottom: 10px;
}

/*********************************************************************************************************
*********************************************** STICKER BADGE ********************************************
**********************************************************************************************************/
.spotlight-badge .sticker, .grid-badge .sticker,  .grid-slider .sticker{
    position: absolute;
    top: 0px;
    left: 10px;
    width: 70px;
    background: #22B573;
    margin-left: 0px;
    text-align: center;
    padding: 5px 0px 0px 0px;
    color: white;
	text-transform:uppercase;
	font-weight:bold;
	font-size:10px;
	line-height:12px;
}

.grid-badge .type206.sticker,  /* 206-conference */
.grid-badge .type204.sticker  /*204-ecole*/
{ background:#703F1D;}
.grid-badge .type196.sticker { background:#22B573;}  /*cinema*/
.grid-badge .type182.sticker,
.grid-badge .type238.sticker /* ado */
{ background:#8D34F4;}  /*scolaire groupe jeune public */
/*.grid-badge .sticker.??? { background:#009CA4;}*/
.grid-badge .type181.sticker { background:#475CA2;} /*expo*/
.grid-badge .type227.sticker { background:#475CA2;} /*évènement*/

.grid-badge .type193.sticker { background:#F2276A;} /*ce soir*/
.grid-badge .type193.sticker:after{border-top-width: 5px; border-color: #f2276a #f2276a transparent; border-bottom: 10px solid transparent; }

/*.grid-badge .type183.sticker { background:#000;}  hors les murs */
.grid-badge .type183.sticker { background:#75c2b6;} /* hors les murs */
.grid-badge .type183.sticker[data="/fr/spotlight/le-fresnoy-20-ans-diffusion-hors-les-murs"] { background:#75c2b6;}


.spotlight-badge .sticker:after, .grid-slider .sticker:after, .grid-badge .sticker:after{
	top: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	border-width:10px 35px 0 35px;
	left: 50%;
	margin-left: -35px;
	border-color: #22B573 transparent transparent transparent;
	border-style: solid;
	pointer-events: none;

}


.context-ecole.spotlight-badge .sticker,
.context-ecole.spotlight-badge .sticker:after
{ background: #703F1D;}

.context-cinema.spotlight-badge .sticker,
.context-cinema.spotlight-badge .sticker:after
{ background: #22B573;}

.context-fresnoy.spotlight-badge .sticker,
.context-fresnoy.spotlight-badge .sticker:after
{ background: #009CA4;}

.context-expo.spotlight-badge .sticker,
.context-expo.spotlight-badge .sticker:after
{ background: #475CA2;}

.context-groupes-et-scolaires.spotlight-badge .sticker,
.context-groupes-et-scolaires.spotlight-badge .sticker:after
{ background: #8D34F4;}


.context-ecole.spotlight-badge .sticker:after,
.grid-badge .type206.sticker:after,  /* conference */
.grid-badge .type204.sticker:after  /* ecole */
{border-color: #703F1D transparent transparent transparent;}

.context-cinema.spotlight-badge .sticker:after,
.grid-badge .type196.sticker:after /* cinema */
{border-color: #22B573 transparent transparent transparent;}

.context-fresnoy.spotlight-badge .sticker:after
{border-color: #009CA4 transparent transparent transparent;}

.context-expo.spotlight-badge .sticker:after,
.grid-badge .type181.sticker:after, /* expo */
.grid-badge .type227.sticker:after /* évènement  */
{border-color: #475CA2 transparent transparent transparent;}


 .context-groupes-et-scolaires.spotlight-badge .sticker:after,
.grid-badge .type182.sticker:after, /* groupe scolaire jeune public */
.grid-badge .type238.sticker:after /* ado */
{border-color: #8D34F4 transparent transparent transparent;}

/*  hors les murs */
.grid-badge .type183.sticker:after
/*{border-color: #000 transparent transparent transparent;}*/
{border-color: #75c2b6 transparent transparent transparent;}

.grid-badge .type183.sticker[data="/fr/spotlight/le-fresnoy-20-ans-diffusion-hors-les-murs"]:after
{border-color: #75c2b6 transparent transparent transparent;}