/* FFQ.CSS V.2 JUILLET 2021 by William Lévesque*/

/*Largeur de la zone de contenu*/

.cadrecontenu{max-width:1410px;margin:auto;}

/*Dégage les sections des deux côtés*/
div.section:after {content:"";display:flex;clear:both;}

/* Variables de couleurs*/

:root {
	
  --noir: #383838;
  --blanc: #ffffff;
  --gris: #808080;
  --grispale: #EEEEEE;
  --vert: black;

}

span.droplink {
	display:block;
	height:200px; /*same height as header*/
	margin-top:-200px; /*same height as header*/
	visibility:hidden;
}

/* Marge et padding inclus*/
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

/* Text resize */

html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}

/* Couleur fond du site */

body{
background-color:var(--blanc);
margin:0px;}

/* Petits characteres */

small{font-size:80%}
.textemedium {font-size:20px;}
.textegris {color:var(--gris);}

/* Petits characteres en exposants */

sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}

/* Images */

img{border-style:none}

/* Affichage par défaut des bouttons */

button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}

button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}

button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}


/* Regroupement dans les formulaires (BOX) */

fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}

/* Légendes des regroupements */

legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}

/* Zones de texte */

textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-input-placeholder{color:inherit;opacity:0.54}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}


/* Paramètres par défaut des pages  */

html,body{font-family:Candara;font-size:100%;text-align:left;padding:0x;line-height:1.6;}
html{overflow-x:hidden}

/* LES TITRES  */

h1{font-size:24px}
h2{font-size:22px}
h3{font-size:20px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}

h1,h2,h3,h4,h5,h6{font-weight:strong;margin:0px}


/* LOADER */

.loaderback{
	
	 background:var(--blanc);
	 height:800px;
}

.loader {
  position:relative;
  top:35%;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid var(--vert);
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin:auto;
  margin-top:50px;
  
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.hide {display:none;}

/*QUICK CLASS*/

.pad5 {padding:5px;}
.padleft5 {padding-left:5px;}
.padleft10 {padding-left:10px;}
.pad10 {padding:10px;}
.pad15 {padding:15px;}
.pad20 {padding:20px;}

.bottom0 {margin-bottom:0px;}
.bottom10 {margin-bottom:10px;}
.bottom20 {margin-bottom:20px;}
.bottom30 {margin-bottom:30px;}
.bottom40 {margin-bottom:40px;}
.bottom50 {margin-bottom:50px;}

.top0 {margin-top:0px;}
.top10 {margin-top:10px;}
.top20 {margin-top:20px;}
.top30 {margin-top:30px;}
.top40 {margin-top:40px;}
.top50 {margin-top:50px;}
.top60 {margin-top:60px;}
.top70 {margin-top:70px;}
.top80 {margin-top:80px;}
.top90 {margin-top:90px;}
.top100 {margin-top:100px;}
.top110 {margin-top:110px;}
.top120 {margin-top:120px;}
.top130 {margin-top:130px;}




.titresite {
	
	margin:0px;
	margin-top:0px;
	margin-left:0px;
	padding:8px;
	font-size:32px;
	line-height:32px;
	
}



/* INFO on HOVER */

.alaffiche {
	
	font-size:30px;
	margin:0px;
	padding:10px;
	padding-top:16px;
	color:gray;
	
	
}

.bouttonaffiche {
	
	width:100%;
	padding:22px;
	margin-bottom:0px;
	font-size:20px;
	font-weight:bold;
	border:none;
	background-color:white;
	color:black;
	
}


.achat {
	
	display:inline-block;
	float:right;
	font-size:18px;
	padding:11px;
	border:none;
	margin-top:7px;
	margin-right:10px;
	background-color:#FFCE51;
	border-radius:10px;
}


.programme {
	
	display:inline-block;
	font-size:18px;
	padding:11px;
	border:none;
	margin-top:7px;
	margin-right:10px;
	background-color:#FFCE51;
	border-radius:10px;
}



.afficheaccueil {
	
	padding:10px;

}

.titreaffiche {
	margin:0px;
	margin-top:5px;
	font-weight:bold;
	
}

.dateaffiche {
	
	color:gray;
	line-height:14px;
	margin:0px;
	
}




/* Les titres du menu */
.itemsmenu {
  position: relative;
  display: inline-block;
}
.menubtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: var(--gris);
  padding: 18px;
  background-color: var(--blanc);
  margin: 0;
}




.titrespectacle {
	
	width:100%;
	padding:10px;
	margin-bottom:10px;
	font-size:20px;
	font-weight:bold;

}


.bandecredit {
	
	font-size:17px;
	padding:5px;
	border: solid lightgray 3px;
	background-color:white;
	margin:0px;
	
	
}

.nomcredit{
	

	padding:10px;
	padding-top:30px;
}

.affichecredit {
	float:left;
	display:inline;
	width:100%;
	
}

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

.datecredit {
	
	float:right;
	margin-right:20px;
	display:inline-block;

	
}


.sectioncredits {
	
	padding:20px 0px;
	
}


.sectioncreditsprog {
	
	padding:20px 0px;
	font-size:26px;
	color:#eade4e;
	text-align:center;
	background-color:#8e181a;
	margin-bottom:20px;
	
	
}

.titrepiece{
	
	text-align:center;
	font-size:20px;
	font-weight:bold;
	padding:0px;
	margin:0px;
}

.nomsint{
	
	text-align:center;
	padding:0px;
	margin:0px;
}

.creditfonction {
	
	color:gray;
	line-height:16px;
	margin:0px;

	
}

.divcredit {
	
	padding-left:30px;
	min-height:75px;
	
}

.photoprofil {
	
	width:50px;
	border-radius:50px;
	float:left;
	margin-right:10px;
	
}


.photoperso {
	
	width:70px;
	border-radius:50px;
	float:left;
	margin-right:10px;
	
}

.photoliste {
	
	width:50px;
	border-radius:50px;
	float:left;
	margin-right:10px;
	
}

.nomliste {
	margin:0px;
	padding:10px;
	font-size:16px;
	font-weight:bold;
	
}
.artistecarte {
	
	padding:10px;
	
}

.nomperso {
	margin:0px;
	padding:15px;
	font-size:22px;
	font-weight:bold;
	
}

.afficheprod {

padding-bottom:20px;

}

.texteprod {

}




/* The grid: Four equal columns that floats next to each other */
.columnprod {
  float: left;
  width: 25%;
  padding: 10px;
}

/* Style the images inside the grid */
.columnprod img {
  opacity: 0.9;
  cursor: pointer;
}

.columnprod img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.rowprod:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container (positioning is needed to position the close button and the text) */
.container {
  position: relative;
  display: none;
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}

/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 35px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}






/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  
}

/* Change the color of links on hover */
.topnav a:hover {

  color: black;
}


/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a {display: none;}
  .topnav a.icon {
    float: left;
    display: block;
	font-size:35px;
	margin:0px;
	padding:0px;
	padding-left:10px;
	padding-right:10px;
	
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {
	  
	  position: relative;

	  }
  .topnav.responsive a.icon {
    position: relative;
    left: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}























/* INFO on HOVER */

.imageover:hover .hide {

	display:block;
	
}


.hide {
	
display:none;	
	
}

.vignettephoto {

position:absolute;
bottom:0px;
left:0px;
background-color:rgba(0, 0, 0, 0.6);
width:100%;
padding:5px;

}

.textevignette {

position:relative;
	display:block;
	float:none;
	color:white;
	margin:auto;
	padding-left:5px;
	opacity:1;
	text-align:center;
	
}

.nbphotos {
	
	float:right;
	color:white;
	margin:0px;
	padding-right:7px;
	opacity:1;
}



/* LES LIENS  */

a{color:inherit}


/* Proportions des divisions PETIT ÉCRAN  */

.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:99.99999%}
.w3-col.s1{width:8.33333%}
.w3-col.s2{width:16.66666%}
.w3-col.s3{width:24.99999%}
.w3-col.s4{width:33.33333%}
.w3-col.s5{width:19.99999%}
.w3-col.s6,.w3-6edepage{width:49.99999%}
.w3-col.s7{width:58.33333%}
.w3-col.s8{width:66.66666%}
.w3-col.s9{width:74.99999%}
.w3-col.s10{width:83.33333%}
.w3-col.s11{width:91.66666%}


/* Proportions des divisions tablette verticale  */

@media (max-width:799px) and (min-width:600px){
.w3-col.v1{width:8.33333%}
.w3-col.v2,.w3-6edepage{width:16.66666%}
.w3-col.v3,.w3-quarter{width:24.99999%}
.w3-col.v4,.w3-third{width:33.33333%}
.w3-col.v5{width:19.99999%}
.w3-col.v6,.w3-half{width:49.99999%}
.w3-col.v7{width:58.33333%}
.w3-col.v8,.w3-twothird{width:66.66666%}
.w3-col.v9,.w3-threequarter{width:74.99999%}
.w3-col.v10{width:83.33333%}
.w3-col.v11{width:91.66666%}
.w3-col.v12{width:99.99999%}}

/* Proportions des divisions ÉCRAN MOYEN  */

@media (max-width:1039px) and (min-width:800px){

.w3-col.m1{width:8.33333%}
.w3-col.m2,.w3-6edepage{width:16.66666%}
.w3-col.m3,.w3-quarter{width:24.99999%}
.w3-col.m4,.w3-third{width:33.33333%}
.w3-col.m5{width:19.99999%}
.w3-col.m6,.w3-half{width:49.99999%}
.w3-col.m7{width:58.33333%}
.w3-col.m8,.w3-twothird{width:66.66666%}
.w3-col.m9,.w3-threequarter{width:74.99999%}
.w3-col.m10{width:83.33333%}
.w3-col.m11{width:91.66666%}
.w3-col.m12{width:99.99999%}}


/* Proportions des divisions GRAND ÉCRAN  */

@media only screen and (min-width:1040px){
.w3-col.l1{width:8.33333%}
.w3-col.l2,.w3-6edepage{width:16.66666%}
.w3-col.l3,.w3-quarter{width:24.99999%}
.w3-col.l4,.w3-third{width:33.33333%}
.w3-col.l5{width:19.99999%}
.w3-col.l6,.w3-half{width:49.99999%}
.w3-col.l7{width:58.33333%}
.w3-col.l8,.w3-twothird{width:66.66666%}
.w3-col.l9,.w3-threequarter{width:74.99999%}
.w3-col.l10{width:83.33333%}
.w3-col.l11{width:91.66666%}
.w3-col.l12{width:99.99999%}}


.fixe {
	
	position:fixed;
	top:0px;
	background:blue;
	z-index:9;
	margin:auto;
	
}




/*Menu*/


/*Page d'accueil*/



.titredesection {
	
	font-size:24px;
	padding-top:10px;
	color:gray;
}

.imgaccueil{

	height:410px;
	background-position: center;
	background-size: cover;
}

.titreaccueil {
	
	color:var(--gris);
	padding:30px 0px 0px 20px;
	
}

.texteaccueil {
	
	padding:0px 40px;
	text-align:justify;
	
}

.tableauaccueil {
	
	width:100%;
	padding:20px;
	border-collapse: collapse;
}

.tableauaccueil tr:nth-child(even) {

  background-color: var(--grispale);
  
}

.grosplus {

	padding:5px;
	font-size:80px;
	color:var(--vert);
	
	
}



/*CHAMPS SÉLECTIONS RECHERCHE*/

.selectionfiltre {
	
position:relative;
height:36px;
border:solid lightgray 2px;
width:100%;
border-radius:5px;
	
}

.champrecherche {
	
position:relative;
top:-1px;
right:4px;
height:36px;
border:solid lightgray 2px;
width:100%;
border-radius:5px;

}



.titrepagephoto {
	
	padding:10px 12px;
	font-size:30px;
	display:inline-block;
	position:relative;
	top:0px;
	background-color:var(--vert);
	width:100%;
	color:var(--blanc);
	margin-bottom:1px;
	
}

.bandeespeces{

	margin:0px;
	margin-left:8px;
	max-width:1410px;
	margin:auto;

}

.bandefamilles{
    margin-top:0px;
	max-width:1410px;
	margin:auto;
	background-color:var(--blanc);

}

.titreespeces {
	
	margin:0px;
	margin-top:0px;
	margin-left:0px;
	font-size:32px;

}



.compteurespeces{
    
	position:relative;
	top:-11px;
	margin:0px;
	margin-left:0px;
	margin-bottom:-10px;
	font-size:21px;
	padding-left:2px;
	
}

.sectionphoto {
	
	width:100%;
	background-color:var(--vert);
	padding:12px;
	font-size:30px;
	color:var(--blanc);
	margin-top:50px;	
}

.photomenu {
	
	width:45px;
	float:left;
	
}

.sectionphotofixe {
	
	position:fixed;
	width:100%;
	top:0px;
	left:50%;
	height:80px;
	transform: translate(-50%, 0);
	color:var(--vert);
	background-color:var(--blanc);
	padding:0px;
	font-size:30px;
	z-index:1000;
	
}

.sectionphotofixe2 {
	
	position:fixed;
	width:100%;
	top:80px;
	left:50%;
	transform: translate(-50%, 0);
	color:var(--vert);
	background-color:var(--blanc);
	padding:0px;
	font-size:30px;
	z-index:999;
	
}

.bandeselectionleft {
	
	padding:25px;
	position:absolute;
	top:0;
	left:0;
	background:#141414;
	height:100%;
	opacity:0.4;
	z-index:2
		
}

.bandeselectionright {
	
	padding:25px;
	position:absolute;
	top:0;
	right:0;
	background:#141414;
	opacity:0.4;
	height:100%;
	z-index:2

}

.rotate90{
-webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
  transform: rotate(-180deg);

}

.divphotos {

padding-top:75%;

}

.cartephotosnature {
  max-width: 90%;
  margin: auto;
  margin-top:20px;
  color:var(--noir);
 
}

.infophotosnature {

padding:10px;
margin-top:0px;
margin-bottom:0px;
font-size:17px;
line-height:20px;

}

.infoalbum {

padding:10px;
margin-top:-15px;
margin-left:2px;
font-size:15px;
line-height:20px;

}

.infopresalbum {

font-size:19px;
line-height:24px;
}

.ligne1280bas {
	
	height:2px;
	margin:auto;
	margin-top:0px;
	margin-bottom:20px;
	padding:0px;
}

div.lignegrise {
	width:100%;
	height:2px;
	display:block;
	background-image:radial-gradient(#5D5D5D, white);
}

.separation {
	
	text-align:center;

}

.titresoussection {

  color:var(--gris);
  position:relative;
  top:24px;
  float:none;
  display:inline-block;
  padding:3px 10px 3px 10px;
  background:var(--blanc);
  font-size:23px;
 
}


 
  
/*Général*/

/*Ajustement de la hauteur d'un lien sur une page (#)*/

span.droplink {

  display:block;
  height:200px; /*same height as header*/
  margin-top:-200px; /*same height as header*/
  visibility:hidden;
}

span.droplink2 {

  display:block;
  height:75px; /*same height as header*/
  margin-top:-75px; /*same height as header*/
  visibility:hidden;
}

/*Exposants*/

sup {
    vertical-align: super;
    font-size: smaller;
}


/*Style pour les notes*/

.note {
	
	font-style:italic;
	color:var(--gris);
	font-size:12px;	
}

/*Couleur*/

.couleur1 {
	
	color:var(--couleur-1);
}

span.vert {
	
	color:#84B836;
}

.hyperlien {

	cursor:pointer;
	color:var(--couleur-1);
}

.phototag {
    position: relative;
    text-align: center;
    color: #bbbbbb;
	margin-bottom:15px;
	margin-top:15px;
}

.w3-left{float:left!important}
.w3-right{float:right!important}
.droite{float:right!important}


/*CARTEs*/

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);	
  max-width: 90%;
  margin: auto;
  margin-top:20px;
  text-align: center;
  color:var(--noir);
  overflow: hidden;
}

.cardinst {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);	
  max-width: 95%;
  margin: auto;
  margin-top:20px;
  text-align: center;
  color:var(--noir);
  overflow: hidden;
}

.cardcat {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);	
  max-width: 95%;
  padding:20px;
  font-size:20px;
  font-weight:bold;
  margin: auto;
  margin-top:20px;
  text-align: center;
  color:var(--noir);
  border-radius:10px;
  
}

.bandetitre {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);	
  color:var(--noir);
}


.price {
  color: grey;
  font-size: 22px;
}


.card button:hover {
  opacity: 0.8;
}


.textecartes {
	
	padding:0px 20px 20px 20px;
	min-height:200px;
	margin-top:0px;
	
}

.ombre {
	
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	
}

.creditphoto {
	
	position:relative;
	display:inline-block;
}

.creditphoto .credittexte {
	
	position:absolute;
	z-index:2;
	bottom:0;
	right:0;
	background-color:var(--noir);
	opacity:0.7;
	margin-bottom:0px;
	color:var(--blanc);
	padding:2px 10px 2px 10px;
	font-size:12px;
}

.courrier {
	
	font-size:18px;
	position: relative;
    top: 1px;
	color:var(--grispale);
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted var(--noir); /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

/* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

/* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

* {box-sizing:border-box}

.button {
  cursor: pointer;
}

.button:hover {opacity: 1}

}

.button:active {
  transform: translateY(6px);
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: var(--blanc);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/*ANCIENS EMERITES*/

.titreae {

padding:10px;	
text-align:center;	
}	
	
.tagae {
	padding:5px;
	font-weight:bold;
	color : var(--noir);
	
}

.spanae {
	
	font-weight:normal;
	color : var(--noir);
	
}

.photoselection {
		
		width:100%;
		max-width:1200px;
		margin:auto;
		
		}

img {
	
	width:100%;
	display:block;
}

a {
	text-decoration:none;
	
	}
	
	
.centre {
text-align:center;
}	
	
.full {
	
	width:100%;
	
}

/*Footer*/

div.footer {
	
border:none;
width:90%;
display:block;
margin:auto;
margin-top:45px;
background: #f9f9f9; /* For browsers that do not support gradients */
background: -webkit-radial-gradient(var(--blanc), #f7f7f7); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(var(--blanc), #f7f7f7); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(var(--blanc), #f7f7f7); /* For Firefox 3.6 to 15 */
background:  radial-gradient(var(--blanc), #f7f7f7); /* Standard syntax */
padding:10px;
border-radius:8px;
margin-top:15px;
	
}

/* RESPONSIVE SCREEN */	

/* Téléphone */		
	
@media (max-width:600px) {


.titresite {
	
	margin:0px;
	margin-top:0px;
	margin-left:0px;
	font-size:25px;

}
	
.w3-hide-small{display:none!important} 
	
div.menutop {

	border:none;
	margin-bottom:2px;

	}

}
		
/* Tablette exceptions verticales*/	
	
@media (max-width:768px) and (min-width:601px){ 
	
		.w3-hide-ipadvert{display:none!important} 
		
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--blanc);
    width:100%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:1;
}

.creditphoto .credittexte {
	
	font-size:10px
}

}
	
/* Tablette horizontale */	
	
@media (max-width:1079px) and (min-width:769px){
	
	.w3-hide-medium{display:none!important} 
	
	p, ul {font-size:82%;}

	.photoselection {
		
		width:100%;
		max-width:860px;
		margin:auto;
		
		}
	
div.vrt {

padding:12px;
}
	
}

/* Portable et bureau */	


@media (min-width:1080px){
	
	.w3-hide-large{display:none!important}
	p, ul {font-size:96%;} 
}

/*menu drop*/

.show {display: block;}

/* Slideshow */


* {
  box-sizing: border-box;
}

button {
	
	cursor:pointer;
}