/*
╭━━━━━━━━━━━╯ KARIMBA-DESIGN ╰━━━━━━━━━━━╮
	
	Feuille de styles pour l'impression
	
 _________________________________________________________ 
	Mis à jour le 24/04/2014 à 18:53:07 par Y. Guérin
	© KARIMBA-DESIGN > http://www.karimba-design.fr
╰━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╯
*/


#main h2 {
	padding: 1em;
	font-size: 1.8em;
	line-height: 1.1em;
}

.eventsSlider {
	overflow: hidden;
	display: table;
	position: relative;
	background: #333;
}
.eventsSlider ul.illus {
	position: relative;
	left:0;
	vertical-align: top;
	white-space: nowrap;
	-webkit-transition: left 0.5s ease;
	   -moz-transition: left 0.5s ease;
	     -o-transition: left 0.5s ease;
			transition: left 0.5s ease;
}
.eventsSlider ul.illus li {
	display: inline-block;
	background: #000;
	z-index: 1;
	margin-bottom: -0.4em;
}
.eventsSlider ul.illus li a {
	display: block;
	width: 100%;
	cursor: default;
}
.eventsSlider ul.illus li a img {
	display: block;
	width: 100%;
}
.eventsSlider a.arrow {
	position: absolute;
	box-sizing: content-box;
	display: block;
	top:0;
	width:5%;
	padding: 0 25px;
	height:100%;
	z-index: 5;
	background: transparent no-repeat center;
	background-size: 20%;
}
.eventsSlider a.arrow.left {
	left:0;
	background-image: url(../img/arrow-left.png);
}
.eventsSlider a.arrow.right {
	right:0;
	background-image: url(../img/arrow-right.png);
}

.eventsMosaic ul:before, .eventsMosaic ul:after { content: ""; display: table; }
.eventsMosaic ul:after { clear: both; }
.eventsMosaic ul {
	background: #333;
	*zoom: 1;
}
.eventsMosaic ul li {
	float:left;
	position: relative;
	width: 25%;
	background: #000 no-repeat center;
	background-size: 105%;
	-webkit-transition: all 0.5s ease;
	   -moz-transition: all 0.5s ease;
	     -o-transition: all 0.5s ease;
		transition: all 0.5s ease;
}
.eventsMosaic ul li a,
.eventsMosaic ul li a:focus {
	display: block;
	position: relative;
	width: 100%;
	height:0;
	outline:none;
	padding-bottom: 66.66%;
	overflow: hidden;
}
.eventsMosaic ul li a div.backtitle {
	position: absolute;
	left:0;
	bottom: 0;
	padding: 1% 5% 68%;
	width: 100%;
	text-align: left;
	background:rgba(0,0,0,0.5);
	background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 0.1%);
	background:    -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 0.1%);
	background:     -ms-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 0.1%);
	background:      -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 0.1%);
	background:         linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 0.1%);
	-webkit-transition: all 0.3s ease;
	   -moz-transition: all 0.3s ease;
	     -o-transition: all 0.3s ease;
		transition: all 0.3s ease;
}

.eventsMosaic ul li a div.backtitle span,
.eventsMosaic ul li a div.backtitle h4 {
	position: relative;
	opacity: 0;
	top:200px;
	text-shadow: 0 0 0.3em #000;
	-webkit-transition: all 0.2s ease;
	   -moz-transition: all 0.2s ease;
	     -o-transition: all 0.2s ease;
		transition: all 0.2s ease;
}
.eventsMosaic ul li a div.backtitle span {
	font-size: 0.7em;
	color: #D9B734;
}
.eventsMosaic ul li a div.backtitle h4 {
	font-size: 0.9em;
	line-height: 1em;
	color: #FFF;
	padding-bottom: 2%;
}
@media (max-width : 1000px) {.eventsMosaic ul li {width: 33.333%;}}
@media (max-width : 650px) {.eventsMosaic ul li {width: 50%;}}

@keyframes eventsArrowRight {
    0% {background-position: 0% center;opacity: 0;}
    100% {background-position: 130% center;opacity: 1;}
}
@keyframes eventsArrowLeft {
    0% {background-position: 100% center;opacity: 0;}
    100% {background-position: -30% center;opacity: 1;}
}
@media (min-width : 501px) {
	.eventsSlider a.arrow.left:hover {
		animation: eventsArrowLeft 0.5s ease-out infinite;
	}
	.eventsSlider a.arrow.right:hover {
		animation: eventsArrowRight 0.5s ease-out infinite;
	}
	.eventsMosaic ul li:hover {background-size: 125%;}
	.eventsMosaic ul li a:hover div.backtitle,
	.eventsMosaic ul li a:focus div.backtitle {
		padding-bottom: 0;
		background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:    -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:     -ms-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:      -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:         linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	}
	.eventsMosaic ul li a:hover div.backtitle span,
	.eventsMosaic ul li a:hover div.backtitle h4,
	.eventsMosaic ul li a:focus div.backtitle span,
	.eventsMosaic ul li a:focus div.backtitle h4 {
		opacity: 1;
		top:0;
	}
}


@media (max-width : 500px) {
	.eventsSlider a.arrow {
		width: 10%;
		padding: 0 5px;
	}
	.eventsSlider a.arrow.left {background-position: 20% center;}
	.eventsSlider a.arrow.right {background-position: 80% center;}
	.eventsMosaic ul li {width: 100%;}
	.eventsMosaic ul li a div.backtitle {
		padding-bottom: 0;
		background: -webkit-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:    -moz-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:     -ms-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:      -o-linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
		background:         linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	}
	.eventsMosaic ul li a div.backtitle span,
	.eventsMosaic ul li a div.backtitle h4 {
		opacity: 1;
		top:0;
	}
}


/* ╰━┅┉┈  © KARIMBA-DESIGN - www.karimba-design.fr  ┈┉┅━╯ /*