/* -----------------------------------------------------------------------------

    This file should be used to add your own CSS definitions or override
	the existing ones.

----------------------------------------------------------------------------- */

	/* FONT */
	/* body { font-family: 'insert-font-family-name-here', 'Arial', sans-serif; } */

	/* STANDARD LOGO DIMENSIONS */
	/* .header-branding img { width: 140px; } */

	/* LARGE LOGO DIMENSIONS */
	.header-branding.m-large-logo img { width: 250px; }
	
	.sidebarfixed{position:fixed;} 
	
	/* Scroll down to "MEDIUM DEVICES" to change width of large logo on mobile devices */

	/* your CSS here */


/* -----------------------------------------------------------------------------

    RESPONSIVE DEFINITIONS

----------------------------------------------------------------------------- */

    /* -------------------------------------------------------------------------
        LARGE DEVICES
		devices with width between 992px and 1199px
    ------------------------------------------------------------------------- */

    @media ( max-width: 1199px ) {

		/* your CSS here */

	}

    /* -------------------------------------------------------------------------
        MEDIUM DEVICES
		devices with width between 768px and 991px
    ------------------------------------------------------------------------- */

    @media ( max-width: 991px ) {

		/* LARGE LOGO DIMENSIONS */
		.header-branding.m-large-logo img { width: 140px; }

		/* your CSS here */

	}

	/* -------------------------------------------------------------------------
        SMALL DEVICES
		devices with width between 481px and 767px
    ------------------------------------------------------------------------- */

    @media ( max-width: 767px ) {

		/* your CSS here */
		.sidebarfixed{position:relative;}

	}

	/* -------------------------------------------------------------------------
        EXTRA SMALL DEVICES
		devices with width up to 480px
    ------------------------------------------------------------------------- */

	@media ( max-width: 480px ) {

		/* your CSS here */

	}
	

	.villeDep a {text-transform: uppercase;font-size:14px;}
	
	
	.soustitre .ico-shadow {
		position: absolute;
		font-size: 60px;
		opacity: 0.1;
		filter: alpha(opacity=8);
		z-index: 5;
		color: #565656;
		padding-left:5px;
	}
	
	.ft20{font-size:22px;margin-left:25px;padding-right:10px;}
		
	#search_list {
		background-color: rgba(244, 244, 244, 0.9);
		z-index: 50;
		position:relative;
	}
	
	#search_list ul{
		list-style:none;
		padding-left:25px;
	}
	
	#results {
		color: #fff;
	}
	
	.pochette{text-align:center;}
	.pochette img {box-shadow: 1px 3px 4px 4px #CCC;margin-bottom:15px;}
	.pochette img:hover {box-shadow: 1px 3px 4px 4px #58cbf1 }
	
	.marquee-rtl {
	  margin-bottom:5px;overflow: hidden;font-size:20px; background-color: rgba(255, 255, 255, 0.5);text-align:right; padding:5px;  padding-left:50%;color:#000;  text-transform: uppercase;	}

	.marquee-rtl > :first-child {
	  display: inline-block;               
	  white-space: nowrap;                 
	  animation: defilement-rtl 38s infinite linear;
	  animation-name: defilement-rtl;       
	  animation-delay: 1s;                 
	  animation-iteration-count: infinite; 
	  animation-timing-function: linear;   
	}
	@keyframes defilement-rtl {
	  0% {
		transform: translate3d(0,0,0);      /* position initiale à droite */
	  }
	  100% {
		transform: translate3d(-100%,0,0);  /* position finale à gauche */
	  }
	}
	
	ul .horairesDep li {padding-top:10px;}

	/* #feffd9 */
	
	.maj{border-bottom: 3px solid #efefef;margin-bottom:20px;margin-top:10px;}
	
	.descriptifActu{padding:10px;padding-bottom:0px;clear:both;background: #f5f1d5;margin-bottom:20px;box-shadow: 1px 3px 4px 4px #efefef;}
	.descriptifVille{padding:10px;padding-bottom:0px;clear:both;background: #EFE;color:#333;box-shadow: 1px 3px 4px 4px #efefef;text-align:justify;}
	
	.form-group label {background:#EFEFEF;color:#333;font-size:20px;padding:20px;}
	.form-group {margin-bottom:20px;}
	
	#filelist{font-size:20px;}
	
	#droparea{border:5px dashed #EFEFEF;text-align:center;margin-top:20px;margin-bottom:20px;font-size:20px;padding:20px;}
	.icoDemande {font-size:32px;}
	
#tiles {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		position: relative;
	}

#tiles .villesTour {
	-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
	-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
	transition: transform 0.5s ease, opacity 0.5s ease;
	position: relative;
	width: calc(33.3333333333% - 0.5em);
	height:100%;
	margin: 0.5em 0 0 0.5em;
	float:left;
	background:#e7e7e7;
}
@media (max-width: 767px) {
  #tiles .villesTour { width:100%;height:100%;}
}

#tiles  .villesTour .fili h3{
	margin-bottom:0px;
	padding:3px;
}	

#tiles  .villesTour:hover {
	background-color: rgba(255, 255, 255, 0.8);
}	

#tiles  .villesTour .fili{
		background-color: rgba(255, 255, 255, 0.8);
		width:100%;
}	


#tiles  .villesTour > .image {
	-moz-transition: -moz-transform 0.5s ease;
	-webkit-transition: -webkit-transform 0.5s ease;
	-ms-transition: -ms-transform 0.5s ease;
	transition: transform 0.5s ease;
	position: relative;
	display: block;
	width: 100%;
	height:120px;
	border-radius: 4px;
	overflow: hidden;
}

	#tiles .villesTour > .image img {
		display: block;
		width: 100%;
	}

#tiles .villesTour > a {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-ms-justify-content: center;
	justify-content: center;
	-moz-transition: background-color 0.5s ease, -moz-transform 0.5s ease;
	-webkit-transition: background-color 0.5s ease, -webkit-transform 0.5s ease;
	-ms-transition: background-color 0.5s ease, -ms-transform 0.5s ease;
	transition: background-color 0.5s ease, transform 0.5s ease;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	border-bottom: 0;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	z-index: 3;
}

#tiles .villesTour p{
	color:#333;
}

	.tiles article > a > :last-child {
		margin: 0;
	}

	.tiles article > a:hover {
		color: #ffffff !important;
	}

	.tiles article > a h2 {
		margin: 0;
	}