/* CSS Document */

/* Ce css contient :
- Bouton Haut de page
- Onglets
- Menu photo
- Menu picto
- Liste d'éléments + filtre
- Navigation par lettres
 */


/*
=========================================================================

Bouton Haut de page (#haut_page)l

=========================================================================
*/
#haut_page span {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}
#haut_page a {
	background-color: white;
	opacity: 0.8;
	width: 60px;
	height: 60px;
	bottom: 20px;
	display: none;
	position: fixed;
	right: 20px;
	padding-top: 5px;
	z-index: 1;
	border-radius: 35px;
	-webkit-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
}
#haut_page a:before {
	content: " ";
	width: 60px;
	height: 60px;
	background-image: url(../img/pictos/picto-fleche-haut.svg);
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60%;
	top: 0;
}
#haut_page a:focus,
#haut_page a:hover {
	opacity: 1;
}
/*
=========================================================================

Onglets

- Des styles particuliers pour les onglets ont été définis pour Patrimoine urbain, voir applications.css.
=========================================================================
*/

/* Menu des onglets */
.onglets-menu {
	list-style: none;
	margin: 0px;
}
.onglets-menu li {
	font-size: 90%;
	top: 1px;
	position: relative;
	padding: 5px 10px;
	margin: 0px;
	cursor: pointer;
	transition: background 0.1s;
	text-decoration: underline;
	text-transform: uppercase;
	color: #074b98;
	display: inline-block;
	background: url(../img/bg-onglets.png) no-repeat left center;
}

@media (min-width: 766px) {
.onglets-menu li {
	padding: 15px 30px;
}
}
.onglets-menu li:first-child, .onglets-menu li.apres, .onglets-menu li.actif {
	background: 0 none;
}
.onglets-menu li.actif {
	background-color: #f2f2f2;
	text-decoration: none;
	font-family: "proxima-nova-bold", sans-serif;
	font-size: 95%;
}
/* Lorsque les onglets ont des pictos */
.onglets-menu li[class*="picto-"] {
	padding-left: 50px;
	padding-right: 25px;
}
.onglets-menu li[class*="picto-"]:before {
	display: block;
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	top: 0.8em;
	left: 12px;
	width: 30px;
	height: 50%;
	max-height: 30px;
	position: absolute;
	text-align: center;
}
/* Contenus des onglets */
.onglet-container {
	background-color: #f2f2f2;
	padding: 30px;
	margin-bottom: 20px;
}
.onglet-container h2, .onglet-container h3, .onglet-container h4 {
	text-transform: none;
	color: #000000
}
.onglet-container > h2:first-child, .onglet-container > h3:first-child, .onglet-container > h4:first-child {
	margin-top: 0px;
}
/*
=========================================================================

Onglets pour carte interactive
.onglet-container.liste  /  .onglet-container.carte
=========================================================================
*/
.onglet-container.carte {
	padding: 10px;
}
.onglet-container.carte .carte-interactive {
	margin: 0;
}
.onglet-container.liste {
	padding: 10px 20px;
}
.toggle-container.liste .item:first-child {
	border-top: none;
}
.onglet-container.liste .item:first-child {
	border-top: none;
}


/*
=========================================================================

Carte interactive avec .js

=========================================================================
*/
.esriPopupWrapper .contentPane h2:first-child,
.esriPopupWrapper .contentPane h3:first-child,
.esriPopupWrapper .contentPane h4:first-child {
	margin-top: 0;
}
.esriPopupWrapper .contentPane .note {
	font-size: inherit
}
/*
=========================================================================
MENU PICTOS (Accueil de section et contenu)
- Utilisé dans la section Sécurité civile

=========================================================================
*/

.menu-pictos {
	margin-left: -10px;
	margin-right: -10px;
    list-style: none;
}
.menu-pictos .col {
	padding: 0 10px;
	flex: 0;
	flex-basis: 100% !important;
	margin-top: 0.4em;
}

/* Affiche en 2 colonnes */
@media (min-width: 450px) {
    .menu-pictos {
         display: flex;
         flex-wrap : wrap;
    }
    .menu-pictos .col {
        margin: 10px 0;
        flex-basis: 50% !important;
    }
    .menu-pictos > .col:nth-child(2n+1) {
        margin-left: 0;
    }
}



/* Affiche en 3 colonnes */
@media (min-width: 1050px) {
    .menu-pictos .col {
        flex-basis: 33.33333% !important;
    }
    .menu-pictos > .col:nth-child(2n+1) {
    }
    .menu-pictos > .col:nth-child(3n+1) {
        margin-left: 0;
    }
}

.menu-pictos a {
	background-color: white;
	min-height: 55px;
	position: relative;
	left: 0;
	top: 0;
	text-decoration: none;
	display: block;
	padding-left: 5%; 
    box-shadow: 2px 2px 3px rgba(0,0,0,0.15);
	transition: background-color 0.3s, box-shadow 0.3s;
}

@media (min-width: 766px) {
    .menu-pictos a {
        min-height: 75px;
    /*    padding-left: 30%; */
    }
}
@media (min-width: 1050px) {
    .menu-pictos a {
        min-height: 85px;
    }
}
.menu-pictos h2, 
.menu-pictos h3 {
    position: absolute;
	text-transform: none;
	top: 50%;

	transform: translateY(-50%);
	margin: 0;
	padding: 0;
	padding-right: 12px;
	padding-left: 10px;
	font-size: 15px;
}
.menu-pictos a[class*="picto-"] h2,
.menu-pictos a[class*="picto-"] h3 {
        left: 50px;
}

.menu-pictos div a:focus,
.menu-pictos div a:hover {
	box-shadow: 2px 2px 3px rgba(0,0,0,0.30);
    background-color: #e6e6e6;
}
.menu-pictos div a:active {
	box-shadow: 2px 2px 3px rgba(0,0,0,0.05);
    background-color: #efefef;
}

.menu-pictos a:active h3, 
.menu-pictos a:active h2, 
.menu-pictos a:active a:before {
	opacity: 0.8;
}
.menu-pictos a[class*="picto-"]:before {
	position: absolute;
	width: 50px;
	height: 100%;
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	left: 5px;
	top: 50%;
	transform: translateY(-50%);
}

/* Couleurs style 2 - Gris avec picto en bleu */
.menu-pictos.style2 a {
	border: 0px;
	background-color: #f2f2f2;
}
.menu-pictos.style2 a h2, .menu-pictos.style2 a h3 {
	color: #074b98;
}
/* Couleurs style 3 - Bleu avec picto en blanc*/

.menu-pictos.style3 a {
	border: 0px;
	background-color: #074b98;
}
.menu-pictos.style3 a h2, .menu-pictos.style3 a h3 {
	color: white;
}
.menu-pictos.style3 div a:focus,
.menu-pictos.style3 div a:hover {
	box-shadow: 2px 2px 3px rgba(0,0,0,0.30);
    background-color: #1a5fad;
}
.menu-pictos.style3 div a:active {
	box-shadow: 2px 2px 3px rgba(0,0,0,0.05);
    background-color: #1a5fad;
}
.menu-pictos.style3 a[class*="picto-"]:before {
	filter: invert(50%) brightness(200%);
}
/* Couleurs de la section faire-face  */
.section-securite-civile .menu-pictos a {
	background-color: #ee7523;
    transition: filter 0.3s;
}
.section-securite-civile .menu-pictos a:focus,
.section-securite-civile .menu-pictos a:hover {
	filter: brightness(120%);
    background-color: #ee7523;
}
.section-securite-civile .menu-pictos a h2, 
.section-securite-civile .menu-pictos a h3 {
	color: #000000;
}
.section-securite-civile .menu-pictos a[class*="picto-"]:before {
	filter: invert(100%) brightness(0%);
}
/*
=========================================================================

MENU PHOTOS
mise en page spéciale d'un menu avec photo dans le contenu. pour le moment utilisé dans la section Police > Prévention , mais pourrait être utilisé ailleurs. (Accueil et contenu)

=========================================================================
*/
.menu-photos .col {
	margin: 10px 0px;
	-webkit-flex: 0;
	flex: 0;
}

/* Affiche en 2 colonnes */
@media (min-width: 450px) {
    .menu-photos {
        display: flex;
        flex-wrap : wrap;
        margin: -10px -10px 0;
    }
    .menu-photos .col {
        padding: 0px 10px;
        flex-basis: auto;
        width: 50%;
    }
    .menu-photos > .col:nth-child(2n+1) {
        margin-left: 0;
    }
}

.menu-photos.menu-photos-cols-2 div.col {
    width: 100%;
}
@media(min-width: 767px) {
    .menu-photos.menu-photos-cols-2 div.col {
        width: 50%;
    }
}
.menu-photos.menu-photos-cols-1 div.col {
    width: 100%;
}
        

       
/* Affiche en 3 colonnes */
@media (min-width: 1050px) {
.menu-photos div.col {
	-webkit-flex-basis: auto;
	flex-basis: auto;
	width: 33.3%;
}
.menu-photos > .col:nth-child(2n+1) {
}
.menu-photos > .col:nth-child(3n+1) {
	margin-left: 0;
}
}
/* Style du texte en lien */
.menu-photos a {
	text-decoration: none;
	display: block;
}
/* Image de fond */
.menu-photos a {
	background-repeat: no-repeat;
	background-size: 100%;
	position: relative;
	overflow: hidden;
}
/* Bande bleu, emplacement et couleur */
.menu-photos a > div {
	position: absolute;
	width: 100%;
	bottom: 0;
	background: linear-gradient(to bottom, rgba(7,75,152,0.7) 0%, rgba(24,109,183,0.9) 100%);
}
/* Efface les styles des titres */
.menu-photos h2, .menu-photos h3 {
	color: white;
	text-transform: none;
	padding: 10px 25px 10px 10px;
	margin: 0 42px 0 0;
	position: relative;
	width: 100%;
	font-size: 16px;
	font-family: 'proxima-nova-semibold';
	line-height: 1em;
}
/*  Gère la hauteur du bouton selon la résolution d'écran */
.menu-photos a {
	height: 220px
}

@media (min-width: 450px) {
.menu-photos a {
	height: 114px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 520px) {
.menu-photos a {
	height: 120px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 600px) {
.menu-photos a {
	height: 130px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 650px) {
.menu-photos a {
	height: 150px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 700px) {
.menu-photos a {
	height: 160px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 768px) {
.menu-photos a {
	height: 130px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 900px) {
.menu-photos a {
	height: 170px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 1000px) {
.menu-photos a {
	height: 175px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 1110px) {
.menu-photos a {
	height: 180px;
	transition: 0.45s all ease-in-out;
}
}

@media (min-width: 1050px) {
.menu-photos a {
	height: 144px;
	transition: 0.45s all ease-in-out;
}
}

.menu-photos.menu-photos-haut a {
    background-color: rgb(27, 81, 160);
    height: 0;
    padding-bottom: 78%;
    box-shadow: 2px 2px 4px rgb(0 0 0 / 30%);
}
.menu-photos.menu-photos-haut a:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.0);
    transition: background 0.3s;
} 
.menu-photos.menu-photos-haut a:focus,
.menu-photos.menu-photos-haut a:hover {
    background-color: rgb(47, 101, 180);
    
}
.menu-photos.menu-photos-haut a:active{
    box-shadow: 2px 2px 4px rgb(0 0 0 / 0%);
    
}
.menu-photos.menu-photos-haut a:focus:after,
.menu-photos.menu-photos-haut a:hover:after {
    background: rgba(228,228,228,0.1);
} 
.menu-photos.menu-photos-haut a:active:after {
    background: rgba(255,255,255,0);
} 
.menu-photos.menu-photos-haut a > div {
    background: none;
    background: rgb(27, 81, 160);
}
.menu-photos.menu-photos-haut:not(.texte-descriptif) a:focus  div,
.menu-photos.menu-photos-haut:not(.texte-descriptif) a:hover  div {
    background: rgb(47, 101, 180);
    
}

/* Menu photo sans texte descriptif qui apparait au survol */
.menu-photos:not(.texte-descriptif) a div {
	transition: 0.20s all;
}
.menu-photos:not(.texte-descriptif) a:focus div,
.menu-photos:not(.texte-descriptif) a:hover div {
	transition: 0.35s all;
	background: linear-gradient(to bottom, rgba(7,75,152,1) 0%, rgba(24,109,183,1) 100%);
}
.menu-photos.texte-descriptif a div {
	position: absolute;
}
.menu-photos.texte-descriptif a:focus div,
.menu-photos.texte-descriptif a:hover div {
	bottom: 0 !important;
	transition: 0.45s all ease-in-out;
	background: linear-gradient(to bottom, rgba(25,102,177,1) 0%, rgba(27,75,157,1) 100%);
}
/* Menu photo avec texte descriptif qui apparait au survol */
.menu-photos.texte-descriptif a p {
	font-size: 95%;
	color: white;
	padding: 3px 10px;
	padding-right: 40px;
	line-height: 1.2em;
}
/* Flèche à droite */
.menu-photos a h2:after, .menu-photos a h3:after {
	content: "";
	display: block;
	position: absolute;
	width: 20px;
	height: 100%;
	max-height: 20px;
	background-repeat: no-repeat;
	right: 1%;
	top: 8px;
	background-image: url("../img/pictos/picto-fleche-droite.svg");
	-webkit-filter: invert(50%) brightness(200%);
	filter: invert(50%) brightness(200%);
}

/* Hack pour IE 11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.menu-photos a h2:after, .menu-photos a h3:after {
	background-image: url("../img/pictos/picto-fleche-droite-blanc.svg");
}
}
/* Page Police - Prévention */
.police .menu-photos .photo-aines {
	background-image: url(/citoyens/police/prevention/img/img-aines.jpg)
}
.police .menu-photos .photo-citoyens {
	background-image: url(/citoyens/police/prevention/img/img-famille.jpg)
}
.police .menu-photos .photo-enfants {
	background-image: url(/citoyens/police/prevention/img/img-enfants.jpg)
}
.police .menu-photos .photo-gens-affaires {
	background-image: url(/citoyens/police/prevention/img/img-gens-affaires.jpg)
}

/* Page Police - Nouveau site */
.police .menu-photos .photo-decouvrir-spvq {
	background-image: url("/citoyens/police/img/menu-decouvrir-spvq.jpg")
}
.police .menu-photos .photo-services {
	background-image: url("/citoyens/police/img/menu-service.jpg")
}
.police .menu-photos .photo-postes {
	background-image: url("/citoyens/police/img/menu-postes-de-police.jpg")
}
.police .menu-photos .photo-diversite {
	background-image: url("/citoyens/police/img/menu-diversite.jpg")
}
.police .menu-photos .photo-nouvelle-centrale {
	background-image: url("/citoyens/police/img/menu-nouvelle-centrale.jpg")
}
.police .menu-photos .photo-diversite {
	background-image: url("/citoyens/police/img/menu-diversite.jpg")
}
.police .menu-photos .photo-recrutement {
	background-image: url("/citoyens/police/img/menu-recrutement.jpg")
}
.police .menu-photos .photo-911 {
	background-image: url("/citoyens/police/img/menu-911.jpg")
}
.police .menu-photos .photo-intervention-jeunesse {
	background-image: url("/citoyens/police/img/menu-prevention-jeunesse.jpg")
}
.police .menu-photos .photo-securite-routiere {
	background-image: url("/citoyens/police/img/menu-securite-routiere.jpg")
}
.police .menu-photos .photo-service-clientele {
	background-image: url("/citoyens/police/img/menu-service-clientele.jpg")
}
.police .menu-photos .photo-archives {
	background-image: url("/citoyens/police/img/menu-archives.jpg")
}
.police .menu-photos .photo-patrouille {
	background-image: url("/citoyens/police/img/menu-patrouille.jpg")
}
.police .menu-photos .photo-enquetes {
	background-image: url("/citoyens/police/img/menu-enquetes.jpg")
}
.police .menu-photos .photo-activites-protocolaires {
	background-image: url("/citoyens/police/img/menu-activites-protocole.jpg")
}
.police .menu-photos .photo-histoire-archives {
	background-image: url("/citoyens/police/img/menu-enquetes.jpg")
}
.police .menu-photos .photo-dast {
	background-image: url("/citoyens/police/img/menu-surveillance-territoire.jpg")
}
.police .menu-photos .photo-doaf{
	background-image: url("/citoyens/police/img/menu-dev-organisationel-af.jpg")
}
.police .menu-photos .photo-ess {
	background-image: url("/citoyens/police/img/menu-enquetes-services-specialises.jpg")
}
.police .menu-photos .photo-emploi-policier {
	background-image: url("/citoyens/police/img/menu-enquetes-services-specialises.jpg")
}
.police .menu-photos .photo-emploi-civil {
	background-image: url("/citoyens/police/img/menu-enquetes-services-specialises.jpg")
}
.police .menu-photos .photo-devenir-policier {
	background-image: url("/citoyens/police/img/menu-enquetes-services-specialises.jpg")
}
.police .menu-photos .photo-pieces-auto {
	background-image: url("/citoyens/police/intervention/img/menu-service-pieces-auto.jpg")
}
.police .menu-photos .photo-emprunt-burin {
	background-image: url("/citoyens/police/intervention/img/menu-service-pieces-auto.jpg")
}
.police .menu-photos .photo-encadrement-marche {
	background-image: url("/citoyens/police/intervention/img/menu-service-encadrement-marche.jpg")
}
.police .menu-photos .photo-filtrage {
	background-image: url("/citoyens/police/intervention/img/menu-service-filtrage.jpg")
}
.police .menu-photos .photo-prise-empreinte {
	background-image: url("/citoyens/police/intervention/img/menu-service-prise-empreinte.jpg")
}
.police .menu-photos .photo-emprunt-burin {
	background-image: url("/citoyens/police/intervention/img/ph-menu-service-emprunt-burin.jpg")
}

.police .menu-photos .photo-personnes-recherches {
	background-image: url("/citoyens/police/intervention/img/menu-personnes-recherches.jpg")
}
.police .menu-photos .photo-remise-arme {
	background-image: url("/citoyens/police/intervention/img/menu-service-remise-arme.jpg")
}
.police .menu-photos .photo-suspension-casier {
	background-image: url("/citoyens/police/intervention/img/menu-service-suspension-casier.jpg")
}
.police .menu-photos .photo-programme-agir {
	background-image: url("/citoyens/police/intervention/img/menu-641-agir.jpg")
}
.police .menu-photos .photo-porter-plainte {
	background-image: url("/citoyens/police/intervention/img/menu-porter-plainte.jpg")
}
.police .menu-photos .photo-remas {
	background-image: url("/citoyens/police/intervention/img/menu-remas.jpg")
}
.police .menu-photos .photo-rapport-evenement {
	background-image: url("/citoyens/police/img/menu-rapport-evenement.jpg")
}
.police .menu-photos .photo-services {
	background-image: url("/citoyens/police/intervention/img/menu-services.jpg")
}
.police .menu-photos .photo-zone-rencontre {
	background-image: url("/citoyens/police/intervention/img/ph-menu-service-zone-rencontre-neutre.jpg")
}
.police .menu-photos .photo-demande-acces {
	background-image: url("/citoyens/police/intervention/img/menu-demande-acces.jpg")
}
.police .menu-photos .photo-prevention-alcool {
	background: url("/citoyens/police/prevention/img/bandeau-alcool-drogues.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-agression {
	background: url("/citoyens/police/prevention/img/bandeau-agression.jpg") right/200% no-repeat ;
}
.police .menu-photos .photo-prevention-cybersecurite {
	background: url("/citoyens/police/prevention/img/bandeau-cybersecurite.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-fraude {
	background: url("/citoyens/police/prevention/img/bandeau-fraude.jpg") center/175% no-repeat ;
}
.police .menu-photos .photo-prevention-intimidation {
	background: url("/citoyens/police/prevention/img/bandeau-intimidation.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-maltraitance {
	background: url("/citoyens/police/prevention/img/bandeau-maltraitance.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-sextage {
	background: url("/citoyens/police/prevention/img/bandeau-sextage.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securite-biens {
	background: url("/citoyens/police/prevention/img/bandeau-vol.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securitebiens-vol {
	background: url("/citoyens/police/prevention/img/bandeau-vol.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securitebiens-effraction {
	background: url("/citoyens/police/prevention/img/bandeau-vol-effraction.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securitebiens-vandalisme {
	background: url("/citoyens/police/prevention/img/bandeau-vandalisme.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-aide-mobilite {
	background: url("/citoyens/police/prevention/img/bandeau-aide-mobilite.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-ceinture {
	background: url("/citoyens/police/prevention/img/bandeau-ceinture-securite.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-cellulaire {
	background: url("/citoyens/police/prevention/img/bandeau-cellulaire-volant.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-distraction {
	background: url("/citoyens/police/prevention/img/bandeau-distraction.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-capacites-affaiblies {
	background: url("/citoyens/police/prevention/img/bandeau-alcool-drogues.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-vitesse {
	background: url("/citoyens/police/prevention/img/bandeau-vitesse.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-fatigue {
	background: url("/citoyens/police/prevention/img/bandeau-fatigue-volant.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-securite-velo {
	background: url("/citoyens/police/prevention/img/bandeau-securite-velos.jpg") center/200% no-repeat ;
}
.police .menu-photos .photo-prevention-securiteroutiere-zone-scolaire {
	background: url("/citoyens/deplacements/securite-routiere/img/bandeau-scolaire.jpg") center/200% no-repeat ;
}
/**taxes**/
.taxes-et-evaluation .menu-photos .photo-programme-aines {
	background-image: url("/citoyens/taxes_evaluation/compte_taxe/img/menu-programme-aines.jpg")
}
.taxes-et-evaluation .menu-photos .photo-programme-entreprises {
	background-image: url("/citoyens/taxes_evaluation/compte_taxe/img/menu-programme-entreprises.jpg")
}




/* Page Activités de loisirs */
.loisirs-et-sports .menu-photos .photo-activites-aquatiques {
	background-image: url(/citoyens/loisirs_sports/repertoire-activites-loisir/img/img-activites-aquatiques.jpg)
}
.loisirs-et-sports .menu-photos .photo-activites-culturelles {
	background-image: url(/citoyens/loisirs_sports/repertoire-activites-loisir/img/img-activites-culturelles.jpg)
}
.loisirs-et-sports .menu-photos .photo-activites-mieux-etre {
	background-image: url(/citoyens/loisirs_sports/repertoire-activites-loisir/img/img-activites-mieux-etre.jpg)
}
.loisirs-et-sports .menu-photos .photo-activites-educatives {
	background-image: url(/citoyens/loisirs_sports/repertoire-activites-loisir/img/img-activites-educatives.jpg)
}
.loisirs-et-sports .menu-photos .photo-activites-physiques {
	background-image: url(/citoyens/loisirs_sports/repertoire-activites-loisir/img/img-activites-physiques.jpg)
}
.loisirs-et-sports .menu-photos .photo-activites-recreatives {
	background-image: url(/citoyens/loisirs_sports/repertoire-activites-loisir/img/img-activites-recreatives.jpg)
}
.loisirs-et-sports .menu-photos .photo-loisirs-adaptes {
	background-image: url(/citoyens/loisirs_sports/repertoire-activites-loisir/img/img-loisirs-adaptes.jpg)
}
/*Page Colloque Art */
.menu-photos .photo-colloque-art-jour-1 {
	background-image: url(/citoyens/art-culture/activites/img/menu-img-programmation-6juin.jpg)
}
.menu-photos .photo-colloque-art-jour-2 {
	background-image: url(/citoyens/art-culture/activites/img/menu-img-programmation-7juin.jpg)
}
.menu-photos .photo-colloque-art-jour-famille {
	background-image: url(/citoyens/art-culture/activites/img/menu-img-programmation-8juin.jpg)
}
/*Page PPU */

.menu-photos .photo-ppu-belvedere {
	background-image: url("/apropos/planification-orientations/amenagement_urbain/ppu/img/ppu_gen_belvedere.jpg")
}
.menu-photos .photo-ppu-collineparlementaire {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/ppu/img/ppu_gen_colline.jpg)
}
.menu-photos .photo-ppu-destimauville {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/ppu/img/ppu_gen_estimauville.jpg)
}
.menu-photos .photo-ppu-entreesaintroch {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/ppu/img/ppu_gen_stroch.jpg)
}
.menu-photos .photo-ppu-sudsaintroch {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/ppu/img/ppu_gen_stroch_sud.jpg)
}
.menu-photos .photo-ppu-centrestefoy {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/ppu/img/ppu_gen_plateau_stefoy.jpg)
}
.menu-photos .photo-ppu-sillery {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/ppu/img/ppu_gen_sillery.jpg)
}
.menu-photos .photo-ppu-hamel-laurentienne {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/ppu/img/pole-hamel-laurentienne.jpg)
}


/* Page travaux incidences sur la circulation **/
.menu-photos .photo-travaux-laurier {
	background-image: url("/citoyens/travaux_entretien_rues/img/img_menu_laurier.jpg")
}
.menu-photos .photo-travaux-rue-dorchester {
	background-image: url("/citoyens/travaux_entretien_rues/img/img_menu_dorchester.jpg")
}
.menu-photos .photo-travaux-hotel-de-ville {
	background-image: url("/citoyens/travaux_entretien_rues/img/img_menu_hotel_de_ville.jpg")
}
.menu-photos .photo-travaux-grand-theatre {
	background-image: url("/citoyens/travaux_entretien_rues/grands-chantiers/img/img-secteur-grand-theatre.jpg")
}

.menu-photos .photo-travaux-cartier {
	background-image: url("/citoyens/travaux_entretien_rues/grands-chantiers/img/img-secteur-cartier.jpg")
}

.menu-photos .photo-travaux-tunnel{
		background-image: url("/citoyens/travaux_entretien_rues/grands-chantiers/img/img-secteur-tunnel.jpg")
}

.menu-photos .photo-travaux-vl-maizerets{
		background-image: url("/citoyens/travaux_entretien_rues/grands-chantiers/img/img-secteur-vl-maizerets.jpg")
}


/* Page Grands projets urbains */

.menu-photos .photo-biblio-gabrielle-roy {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/biblio-gabrielle-roy.jpg)
}
.menu-photos .photo-centre-communautaire-des-chutes {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/centre-communautaire-des-chutes.jpg)
}
.menu-photos .photo-centre-communautaire-sportif-saint-roch {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/centre-communautaire-saint-roch.jpg)
}
.menu-photos .photo-centre-glaces{
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/centre-glaces.jpg)
}
.menu-photos .photo-colisee{
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/colisee.jpg)
}
.menu-photos .photo-cite-verte {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/cite-verte.jpg)
}
.menu-photos .photo-ecoquartier-estimauville {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/ecoquartier-estimauville.jpg)
}
.menu-photos .photo-ecoquartier-pointe-lievres {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/ecoquartier-lievres.jpg)
}
.menu-photos .photo-espace-innovation-chauveau {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/espace-innovation-chauveau.jpg)
}
.menu-photos .photo-grand-marche {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/grand-marche.jpg)
}
.menu-photos .photo-jardins-du-corps-de-garde {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/jardins-du-corps-de-garde.jpg)
}
.menu-photos .photo-littoral-est {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/littoral-est.jpg)
}

.menu-photos .photo-place-paris {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/place-paris.jpg)
}
.menu-photos .photo-place-jean-beliveau {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/place-jean-beliveau.jpg)
}
.menu-photos .photo-zone-industrielle-maizerets-limoilou {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/revitalisation-limoilou.jpg)
}
.menu-photos .photo-revitalisation-sainte-anne {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/boulevard-sainte-anne.jpg)
}

.menu-photos .photo-mobilite-active {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/pole-mobilite-active.jpg)
}

.menu-photos .photo-marche-sainte-foy {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/marche-sainte-foy.jpg)
}
.menu-photos .photo-zile {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/grands_projets_urbains/img/zile.jpg)
}


.menu-photos .photo-lac-st-charles {
	background-image: url("/apropos/planification-orientations/amenagement_urbain/img/menu-lac-st-charles.jpg")
}


/* Visions */
.menu-photos .photo-secteur-1ereavenue {
	background-image: url("/apropos/planification-orientations/amenagement_urbain/visions/img/menu-secteur-1ere-avenue.jpg")
}

.menu-photos .photo-charest-ouest {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/visions/img/menu-charest-ouest.jpg)
}
.menu-photos .photo-secteur-chaudiere {
	background-image: url(/apropos/planification-orientations/amenagement_urbain/visions/img/menu-secteur-chaudiere.jpg)
}

.menu-photos .photo-quartiers-canardiere {
	background-image: url("/apropos/planification-orientations/amenagement_urbain/visions/img/menu-quartiers-canardiere.jpg")
}



/* Page Maire depuis 1833 */
.menu-photos .photo-bedard {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-elzear-bedard.jpg);
	background-position: 0 -20px;
}
.menu-photos .photo-caron {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph_re_caron_g.jpg);
	background-position: 0 -30px;
}
.menu-photos .photo-stuart {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-georges-stuart.jpg);
	background-position: 0 -20px;
}
.menu-photos .photo-belleau {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-narcisse-belleau.jpg);
	background-position: 0 -15px;
}
.menu-photos .photo-tessier {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-ulric-joseph-tessier.jpg);
	background-position: 0 -20px;
}
.menu-photos .photo-alleyn {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph_c_alleyn_g.jpg);
	background-position: 0 -15px;
}
.menu-photos .photo-morrin {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-joseph-morrin.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-robitaille {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-olivier-robitaille.jpg);
	background-position: 0 -30px;
}
.menu-photos .photo-langevin {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-hector-langevin.jpg);
	background-position: 0 -25px;
}
.menu-photos .photo-pope {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-thomas-pope.jpg);
	background-position: 0 -15px;
}
.menu-photos .photo-tourangeau {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-adolphe-guillet-tourangeau-p.jpg);
	background-position: 0 -55px;
}
.menu-photos .photo-cauchon {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-joseph-cauchon.jpg);
	background-position: 0 -50px;
}
.menu-photos .photo-lemesurier {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-john-lemesurier.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-hossak {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-william-hossack.jpg);
	background-position: 0 -25px;
}
.menu-photos .photo-garneau {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-pierre-garneau.jpg);
	background-position: 0 -30px;
}
.menu-photos .photo-murphy {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-owen-murphy.jpg);
	background-position: 0 -25px;
}
.menu-photos .photo-chambers {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-robert-chambers.jpg);
	background-position: 0 -30px;
}
.menu-photos .photo-brousseau {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-jean-docile-brousseau.jpg);
	background-position: 0 -40px;
}
.menu-photos .photo-langelier {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-francois-charles-langelier.jpg);
	background-position: 0 -50px;
}
.menu-photos .photo-fremont {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-jules-joseph-taschereau.jpg);
	background-position: 0 -45px;
}
.menu-photos .photo-parent {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-simon-napoleon-parent.jpg);
	background-position: 0 -45px;
}
.menu-photos .photo-tanguay {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-georges-tanguay.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-garneau2 {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph_jg_garneau_g.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-drouin {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-olivier-napoleon-drouin.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-lavigueur {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-henri-edgar-lavigueur.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-samson {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-joseph-samson.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-valmont {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-martin-valmont.jpg);
	background-position: 0 -35px;
}
.menu-photos .photo-simard {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-telesphore-simard.jpg);
	background-position: 0 -15px;
}
.menu-photos .photo-auger {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph_jo_auger_g.jpg);
	background-position: 0 -15px;
}
.menu-photos .photo-gregoire {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-joseph-ernest-gregoire.jpg);
	background-position: 0 -45px;
}
.menu-photos .photo-borne {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-lucien-hubert-borne.jpg);
	background-position: 0 -15px;
}
.menu-photos .photo-hamel {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-wilfrid-hamel.jpg);
	background-position: center;
}
.menu-photos .photo-lamontagne {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-gilles-lamontagne.jpg);
	background-position: 0 -100px;
}
.menu-photos .photo-pelletier {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph_j_pelletier_g.jpg);
	background-position: 0 -60px;
}
.menu-photos .photo-lallier {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph_jp_lallier_g.jpg);
	background-position: center;
}
.menu-photos .photo-boucher {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph-andree-p-boucher.jpg);
	background-position: center;
}
.menu-photos .photo-labeaume {
	background-image: url(/apropos/gouvernance/maire/maires/img/ph_r_labeaume_g.jpg);
	background-position: center;
}
/* Guide du tri - onglet catégorie */
.menu-photos .photo-bois {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-bois.jpg);
	background-size: cover;
}
.menu-photos .photo-dechets {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-dechets-construction.jpg);
	background-size: cover;
}
.menu-photos .photo-divers {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-divers.jpg);
	background-size: cover;
}
.menu-photos .photo-electrique {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-materiel-electrique.jpg);
	background-size: cover;
}
.menu-photos .photo-dangereuses {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-rdd.jpg);
	background-size: cover;
}
.menu-photos .photo-metal {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-metal.jpg);
	background-size: cover;
}
.menu-photos .photo-mobilier {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-mobilier.jpg);
	background-size: cover;
}
.menu-photos .photo-papier {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-papier-carton.jpg);
	background-size: cover;
}
.menu-photos .photo-plastique {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-plastique.jpg);
	background-size: cover;
}
.menu-photos .photo-organiques {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-matieres-organiques.jpg);
	background-size: cover;
}
.menu-photos .photo-residus-verts {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/bandeau-residus-verts.jpg);
	background-size: cover;
}
.menu-photos .photo-verre {
	background-image: url(/citoyens/environnement/matieres-residuelles/guide-du-tri/img/ph-bandeau-verre.jpg);
	background-size: cover;
}
/* Guide du tri - onglet type de collecte */
.menu-photos .photo-recyclage {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-recyclage.jpg);
	background-size: cover;
}
.menu-photos .photo-ecocentres {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-ecocentres.jpg);
	background-size: cover;
}
.menu-photos .photo-ecocentre-mobile {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-ecocentre-mobile.jpg);
	background-size: cover;
}
.menu-photos .photo-encombrants {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-encombrants.jpg);
	background-size: cover;
}
.menu-photos .photo-compostage {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-composte.jpg);
	background-size: cover;
}
.menu-photos .photo-ordures {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-ordures.jpg);
	background-size: cover;
}
.menu-photos .photo-reemploi {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-reemploi.jpg);
	background-size: cover;
}
.menu-photos .photo-residus-verts {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-residus-verts.jpg);
	background-size: cover;
}
.menu-photos .photo-residus-alimentaires {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-residus-alimentaires.jpg);
	background-size: cover;
}
.menu-photos .photo-compostage {
	background-image: url(/citoyens/environnement/matieres-residuelles/img/menu-composte.jpg);
	background-size: cover;
}
/* Photo Installations municipales */
.menu-photos .photo-centre-de-tri {
	background-image: url(/citoyens/environnement/installations-municipales/img/menu-centre-de-tri.jpg);
	background-size: cover;
}
.menu-photos .photo-incinerateur {
	background-image: url(/citoyens/environnement/installations-municipales/img/menu-incinerateur.jpg);
	background-size: cover;
}

/* Photo archives police */
.menu-photos .photo-policiers-au-travail {
	background-image: url(/citoyens/police/archives_photos/img/travail/images/image11.jpg);
	background-size: cover;
}
.menu-photos .photo-postes-de-police {
	background-image: url(/citoyens/police/archives_photos/img/postes_police/images/image4.jpg);
	background-size: cover;
}
.menu-photos .photo-telecommunications {
	background-image: url(/citoyens/police/archives_photos/img/telecom/images/image5.jpg);
	background-size: cover;
}
.menu-photos .photo-transport {
	background-image: url(/citoyens/police/archives_photos/img/transport/images/image2.jpg);
	background-size: cover;
}
.menu-photos .photo-uniformes {
	background-image: url(/citoyens/police/archives_photos/img/uniformes/images/image7.jpg);
	background-size: cover;
}

/* Photo archives incendie */
.menu-photos .photo-incendie-casernes {
	background-image: url("/citoyens/incendie/organisation/photos-archives/img/casernes/images/N010027.jpg");
	background-size: cover;
	background-position: center 
}
.menu-photos .photo-incendie-grands-incendies {
	background-image: url("/citoyens/incendie/organisation/photos-archives/img/grands-incendies/images/N016771.jpg");
	background-size: cover;
	background-position: center 
}
.menu-photos .photo-incendie-habit {
	background-image: url("/citoyens/incendie/organisation/photos-archives/img/habit/images/N014522.jpg");
	background-size: cover;
	background-position: top center 
}
.menu-photos .photo-incendie-telecomm {
	background-image: url("/citoyens/incendie/organisation/photos-archives/img/materiel-telecommunications/images/N006601.jpg");
	background-size: cover;
	background-position: center 
}
.menu-photos .photo-incendie-outils {
	background-image: url("/citoyens/incendie/organisation/photos-archives/img/outils-travail/images/N001287.jpg");
	background-size: cover;
	background-position: center 
}
.menu-photos .photo-incendie-pompiers{
	background-image: url("/citoyens/incendie/organisation/photos-archives/img/pompiers/images/N030934.jpg");
	background-size: cover;
	background-position: center 
}
.menu-photos .photo-incendie-vehicules{
	background-image: url("/citoyens/incendie/organisation/photos-archives/img/vehicules/images/N001562.jpg");
	background-size: cover;
	background-position: center 
}

/* Archives - Pages d'histoires*/
.pages-histoire .menu-photos .photo-aqueduc {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-aqueduc.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-caleches {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-caleches.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-hier-aujourdhui {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-hier-aujourdhui.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-colisee {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-colisee.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-dominion-corset {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-dominion-corset.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-edifice-price {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-edifice-price.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-escaliers {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-escaliers.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-femmes-politique {
	background-image: url("/citoyens/patrimoine/archives/pages_histoire/img/photo-femmes-politique.jpg");
	background-size: cover;
}
.pages-histoire .menu-photos .photo-fx-garneau {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-fx-garneau.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-hockey {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-hockey.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-hotel-ville {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-hotel-ville.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-maison-gomin {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-maison-gomin.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-marches {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-marches-publics.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-pont-glace {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-pont-glace.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-pont-quebec {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-pont-quebec.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-tramways {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-tramways.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-archives {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-archives.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-cartes-postales {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-cartes-postales.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-chateau-frontenac {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-chateau-frontenac.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-gravures {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-gravures.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-palais-montcalm {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-palais-montcalm.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-personnel-municipal {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-personnel-municipal.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-thadee-lebel {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-thadee-lebel.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-tricentennaire {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-tricentenaire.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-wb-edwards {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-wb-edwards.jpg);
	background-size: cover;
}
.pages-histoire .menu-photos .photo-wesley {
	background-image: url(/citoyens/patrimoine/archives/pages_histoire/img/photo-wesley.jpg);
	background-size: cover;
}
/* Répertoire des oeuvres d'art public */
.repertoire-oeuvres .menu-photos .photo-grande-alle {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-grande-alle.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-d-auteil {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-d-auteil.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-sainte-anne {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-sainte-anne.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-petit-champlain {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-petit-champlain.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-gare-du-palais {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-gare-du-palais.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-saint-roch {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-saint-roch.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-saint-jean-baptiste {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-saint-jean-baptiste.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-montcalm {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-montcalm.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-saint-sauveur {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-saint-sauveur.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-saint-sacrement {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-saint-sacrement.jpg);
	background-size: cover;
}
.repertoire-oeuvres .menu-photos .photo-maizerets {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-maizerets.jpg);
	background-size: cover;
}


.repertoire-oeuvres .menu-photos .photo-maizerets {
	background-image: url(/citoyens/art-culture/art-public/repertoire/img/photo-maizerets.jpg);
	background-size: cover;
}


/* Emplois et stages */
.emplois-et-stages .menu-photos .photo-aquatique{
	background-image: url("/apropos/emplois-et-stages/img/img-menu-aquatique.jpg");
	background-size: cover;
}
.emplois-et-stages .menu-photos .photo-champ-etude{
	background-image: url("/apropos/emplois-et-stages/img/img-menu-emploi-etudes.jpg");
	background-size: cover;
}
.emplois-et-stages .menu-photos .photo-loisir{
	background-image: url("/apropos/emplois-et-stages/img/img-menu-loisirs.jpg")
}
.emplois-et-stages .menu-photos .photo-loisir2{
	background-image: url("/apropos/emplois-et-stages/img/img-menu-loisirs2.jpg")
}
.emplois-et-stages .menu-photos .photo-camp-jour{
	background-image: url("/apropos/emplois-et-stages/img/img-menu-camps-jour.jpg")
}
.emplois-et-stages .menu-photos .photo-ete{
	background-image: url("/apropos/emplois-et-stages/img/img-menu-emploi-ete.jpg")
}
/* Mois Noirs */
.mois-noirs .menu-photos .photo-saviez-vous {
	background-image: url(/citoyens/art-culture/activites/mois-histoire-noirs/img/photo-saviez-vous.jpg);
	background-size: cover;
}
.mois-noirs .menu-photos .photo-activites {
	background-image: url(/citoyens/art-culture/activites/mois-histoire-noirs/img/photo-activites.jpg);
	background-size: cover;
}
.mois-noirs .menu-photos .photo-inventions {
	background-image: url(/citoyens/art-culture/activites/mois-histoire-noirs/img/photo-inventions.jpg);
	background-size: cover;
}
.menu-photos .photo-padepanik {
	background-image: url(/citoyens/securite_civile/sepreparer/img/photo-padepanik.jpg);
	background-size: cover;
}
.menu-photos .photo-pif {
	background-image: url(/citoyens/securite_civile/sepreparer/img/photo-pif.jpg);
	background-size: cover;
}


/*
=========================================================================

Liste d'éléments avec ou sans filtre
.liste  / .filtre ou .choix
=========================================================================
*/
/* Filtre */
.liste .filtre, .liste .choix {
	padding: 10px;
	background-color: #f2f2f2;
	margin-bottom: 10px;
	clear: both;
}
.liste .filtre select, .liste .choix select {
	margin: 0 0 0.3em;
	padding: 6px 8px;
	font-size: 1em;
	max-width: 325px;
}

@media (min-width: 450px) {
.liste .filtre select, .liste .choix select, .encadre.liste .filtre select, .encadre.liste .choix select {
	margin: 0 10px;
	width: auto;
	max-width: 100%
}
}
/* Si le filtre est dans un onglet */
.onglet-container.liste .filtre, .onglet-container.liste .choix {
	background-color: #cccccc;
}
.liste .filtre label, .liste .choix label {
	display: inline
}
/* Affichage d'éléments de la liste*/
.liste.liste-avec-fin {
	border-bottom: 1px solid #cccccc;
	margin-bottom: 1em;
}
.liste.liste-avec-fin .item:last-child {
	padding-bottom: 0.1em;
}
.liste .item {
	clear: both;
	border-top: 1px solid #cccccc;
	overflow: hidden;
	padding: 10px 0px;
}
.liste > div.item:first-child {
	border-top: 0px solid #cccccc;
}
/* Enlève la bordure pour l'élément après le filtre */
.liste .filtre + .item {
	border-top: 0 none;
}
.liste .item a.ph_aligne_droite, .onglet-container.liste .item a.ph-aligne-droite {
	padding: 10px 10px 10px 10px
}
.liste .item a.ph_aligne_droite, .onglet-container.liste .item a.ph-aligne-droite {
	margin-right: -10px;
}
/* Pictos pour illustrer un bloc */
.liste .item[class*="picto-"] {
	padding-left: 35px;
	position: relative;
}

@media (min-width: 766px) {
    .liste .item[class*="picto-"] {
        /*padding-left: 75px;*/
        padding-left: 65px;
    }
}
.liste .item[class*="picto-"]:before {
	display: block;
	content: " ";
	background-position: center;
	background-repeat: no-repeat;
	top: 12px;
	left: 0;
	width: 30px;
	height: 40%;
	max-height: 40px;
	position: absolute;
	text-align: center;
}

@media (min-width: 766px) {
.liste .item[class*="picto-"]:before {
	width: 60px;
	height: 80%;
    max-height: 45px;
	top: 8px;
}
}
.liste .item > h2:first-child {
	margin-top: 0.25em;
}
.liste .item > h3:first-child {
	margin-top: 0.45em;
}
.liste .item > h4:first-child {
	margin-top: 0.75em;
}
.liste .item>figure + h2, 
.liste .item>a.aligne-droite + h2, 
.liste .item>figure.aligne-droite + h3 {
	margin-top: 0.5em;
}
/* Style 2 */
.liste.style2 {
	background-color: #f2f2f2;
	box-shadow: none;
	padding: 1em;
}
.liste.style2 > div.item:first-child {

     padding-top: 0px; 
}
@media (min-width: 766px) {
.liste.style2 {
	box-shadow: inset 0 0 0 0.5em #f2f2f2;
	padding: 25px 2.8em 25px 2em;
}
}

@media (min-width: 767px) {
	.liste.colonnes-2 {
		margin-left: 0;
		
	}
	.liste.colonnes-2 .item {
		flex-basis: 50%;
	}
	.liste.colonnes-2 .item:nth-child(2) {
		border-top: none;
	}
}
/*
=========================================================================

Navigation par lettres
- Liste à puces de lettres, utilisée dans Toponymie et Patrimoine urbain, et Guide du tri entre autre mais pourrait être utilisé ailleurs
- P utilisé dans Description des emplois

=========================================================================
*/
/* Lexique */
.filtre-lettres {
	font-family: "proxima-nova-bold", sans-serif;
}
.filtre-lettres ul  {
	list-style: none;
	margin-left: 0px;
}
.filtre-lettres li {
	display: inline;
	padding: 0px 3px;
	font-size: 160%;
}
.filtre-lettres a {
	padding: 0px 3px;
	font-size: 140%;
}
ul.filtre-lettres li a, div.filtre-lettres li a {
	padding: 0px;
	font-size: 100%;
}
 p.filtre-lettres {
	margin-top: 20px;
}

div.onglet-container > div.filtre-lettres ul{margin-top:0px;}
@media (min-width: 766px) {
 .filtre-lettres li {
	font-size: 150%;
}
.filtre-lettres a {
	font-size: 160%;
}
ul.filtre-lettres li a, div.filtre-lettres li a  {
	font-size: 100%;
}
}