/* W23.CSS V.1 Avril 2020 by William Lévesque*/


/*Largeur de la zone de contenu*/

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


/* Variables de couleurs*/

:root {
	
  --noir-1: #383838;
  --blanc-1: #ffffff;
  --gris-1: #f3f3f3;
  
  --couleur-1: linear-gradient(to bottom right, #B4AFA9, #837D73);
  --couleurboutton-1: #467D59;   
  --couleur-2: #AAA087;
}

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:#ffffff;
margin:0px;}

/* Petits characteres */

small{font-size:80%}
.textemedium {font-size:20px;}
.textegris {color:gray;}

/* 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}

.coinsronds {
	
	border-radius:10px;
}


.loaderback{
	
	 background:white;
	 height:800px;
}


.loader {
  position:relative;
  top:35%;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #839754;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
  margin:auto;
  margin-top:150px;
  
}
/* 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;
	
}

.pad5 {
	
	padding:5px;
	
}

.padleft5 {
	
	padding-left:5px;
	
}

.padleft10 {
	
	padding-left:10px;
	
}

.pad10 {
	
	padding:10px;
	
}

.pad15 {
	
	padding:15px;
	
}

.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;
	
}
/* LES LIENS  */

a{color:inherit}


/*|PDFs|*/

.pdfdoc {
	width:100%;
}

.titrepdf {
	padding:10px 0px 0px 0px;
	font-weight:bold;
	margin-bottom:0px;
}

.notepdf {
	font-size:14px;
	padding:0px 0px 0px 0px;
	color:var(--textegris-1);
}

/*.w3-container:after {content:"";display:block;clear:both}*/

/* 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 ÉCRAN MOYEN  */

@media only screen and (min-width:666px){
.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:1279px){
.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%}}


.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  float:none;
  margin: auto;
  padding:16px;
  border: 1px solid #888;
  
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 40px;
  font-weight: bold;
    margin-top:-24px;
  padding:0px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/*LA THEORIE*/

.menutheorie a {
	
	font-size:20px;
	display:block;
	padding:7px;
	
}

a.sousmenu {
	
	font-size:16px;
	padding:0px;
	margin-top:-10px;
	margin-bottom:0px;
	
}

.retourmenu {
	
	font-size:30px;
	padding:15px;
	color:lightgray;
}

.savoirplus {
	
	font-size:30px;
	padding:13px;
	color:lightgray;
}

.savoirplusgroupe {
	
	font-size:24px;
	padding:12px;
	color:lightgray;
}

.play {
	
	font-size:20px;
	padding:4px 5px;
	color:lightgray;
}

.iconesinfo {
	
	font-size:20px;
	padding:5px 8px;
	color:lightgray;
	position:relative;
	top:2px;
}



.iconeyoutube {
	

	color:red;

}


.iconeterre {
	
	color:lightblue;

}

.iconehorloge {
	

	color:brown;
	position:relative;
	top:2px;

}

.camera {
	
	font-size:23px;
	padding:0px;
	color:#9B8369;
	position:relative;
	top:3px;
	left:6px;
	
}

.cameracarte {
	
	font-size:23px;
	padding:2px 8px;
	position:relative;
	top:4px;
	left:6px;
	
}

.savoirplustitre {
	
	font-size:30px;
	padding:17px 17px 13px;
	color:lightgray;
	display:inline-block;
}

.titreinst {
	
	padding:0px;
	font-size:34px;
	display:inline-block;
	position:relative;
	top:0px;

}


.question {
	
	padding:10px;
	color:white;
	font-size:16px;
	display:inline-block;
	background-color:#919191;
	margin-top:10px;
	width:90%;
	cursor:pointer;
	
}

.compris {
	
	padding:10px;
	font-size:16px;
	display:inline-block;
	color:white;
	background-color:#6BCC13;
	margin-top:10px;
	width:90%;
	cursor:pointer;
}

.rejouer {
	
	padding:10px;
	font-size:16px;
	display:inline-block;
	width:90%;
	color:white;
	background-color:#919191;
	margin-top:10px;
	cursor:pointer;
}

.titrecartes {
	
	padding:10px 9px ;
	display:inline-block;
	margin:auto;
	margin-top:0px;
	font-size:17px;
	
}

.titrecartesgenres {
	
	padding:9px 9px ;
	display:block;
    float:none;
	margin:auto;
	margin-top:0px;
	font-size:17px;
	text-align:center;
	
}

.titregroupe {
	
	font-size:17px;
	padding:0px;


}

.titrepiece {
	
	padding:5px 5px ;
	display:inline-block;
	font-size:15px;
	
}

.infoband {
	
	padding:5px;
	margin:0px;
	margin-left:17px;
	
}

.titresectioninst {
	
	padding:8px 16px ;
	display:inline-block;
	margin:auto;
	margin-top:-1px;
	font-size:19px;
	
}


.titreinstruments {
	
	padding:12px 13px;
	display:inline-block;
	margin:auto;
 

}

.centrevertical {
	
	height:100%;
  position: relative;
	
} 

.centrevertical h2 {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	
} 

.titrecartestech {
	
	padding:7px 13px;
	display:inline-block;
	margin:auto;
	margin-top:10px;
}
.etoile {
	
	color:gold;
	font-size:14px;
	margin-left:6px;
	position:relative;
	top:-1px;
	
}

.cadrecontenu {
	
	margin:auto;
}

.cadretheorie {

	margin-bottom:100px;
	border:solid;
	border-color:lightgray;
	border-width:1px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

.cadremenutheorie {
	margin-bottom:50px;
	border:solid;
	border-color:lightgray;
	border-width:1px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
	min-height:600px;
	padding:0px 0px 30px 0px;
}

.titretheorie {
	
	padding:10px 0px 10px 30px;
	
}

.textetheorie {
	
	font-size:22px;
	padding:10px 40px 0px 40px;
}

.imgtheorie {
	
	max-width: 400px;
	margin:auto;
	padding:40px;
	margin-top:0px;
}

.lienstheorie {
	
	width:50px;
}


/*PHOTOSNATURE*/

.imageindex{
	
	padding:0px;
	
}


/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}


.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  color:Black;
  font-size:20px;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: #839754 !important; 
  color: #ffffff; 
}


.btnslideg {
	
  position:absolute;
  top: 40%;
  left:1px;
  padding:20px;
  font-size:50px;
  color:white;
  background:none;
  border:none;
}

.btnslided {
	
  position:absolute;
  top: 40%;
  right:1px;
  padding:20px;
  font-size:50px;
  color:white;
  background:none;
  border:none;
}

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

.plus90 {
	
	margin-top:105px;
	
}


span.droplinkphotos {

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

.activephotos {
  background-color: #666;
  color: white;
}

/* Les titres du menu */
.dropdownphotos {
  position: relative;
  display: inline-block;
}

.dropdownphotos .dropbtnphotos {
  font-size: 16px;  
  border: none;
  outline: none;
  color: gray;
  padding: 10px;
  background-color: white;
  margin: 0;
}

/* Fond du menu déroulant HOVER */
.dropdown-contentphotos a:hover {
    color:gray;
}

/* Déploie le menu déroulant au passage de la souris */
.dropdownphotos:hover .dropdown-contentphotos {
    display: block;
}

.dropdown-contentphotos {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 500px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  padding:0px;
  font-size:15px;
  margin:0px;
}

.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display:block;
}

/* Create three equal columns that floats next to each other */


.dropdown-contentphotos a {
  color: black;
  padding: 6px 20px;
  text-decoration: none;
  display: block;
  
}


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

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .columnphotos {
    width: 100%;
    height: auto;
  }
}

body.listephoto {
	
	background-color:white;
	
}


.titrepagephoto {
	
	padding:10px 12px;
	font-size:30px;
	display:inline-block;
	position:relative;
	top:0px;
	background-color:#839754;
	width:100%;
	color:white;
	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:white;


}

.menuclasses{
	
	display:inline-block;
	font-size:18px;
	padding:9px;
	color:gray;
	margin-top:0px;
	
	
}

.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:#839754;
	padding:12px;
	font-size:30px;
	color:white;
	margin-top:50px;	
}

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

.loupephoto {width:35px;float:right;margin-left:10px;margin-top:9px;}



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

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

.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-1);
 
}

.infophotosnature {

padding:10px;
margin-top:-3px;
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 {

padding:10px;
margin-top:7px;
margin-left:12px;
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:gray;
  position:relative;
  top:24px;
  float:none;
  display:inline-block;
  padding:3px 10px 3px 10px;
  background:white;
  font-size:23px;
  

}


/*SUIVI d'ÉLÈVES*/



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


.photosuivi {
	width: 33%;
	display:inline-block;
	margin-bottom:-6px;
}

.infosuivi {
	width:65%;
	display:inline-block;
	vertical-align:top;
	padding:6px 0px 0px 14px;
}

.nomsuivi {
	text-align:left;	
	width:100%;
	display:inline-block;
	margin:0px;

}

.suivititreclasse {
	text-align:left;	
    font-size:20px;
	color:gray;
	margin-bottom:0px;
	padding:10px;
	padding-top:20px;

}

.competences {
	text-align:center;	
	width:100%;
	font-size:20px;
	font-weight:bold;
	display:inline-block;
	margin:0px;
	margin-bottom:10px;

}

.textecartesuivi {
	text-align:left;	
	color:gray;
	margin-top:0px;
	margin-bottom:8px;
	font-size:14px;
	line-height:14px;
}

.fondsuivi {
	background-color:white;
}

/*Plan de cours*/

.plansection{
	
	border-radius:10px;
	width:95%;
	background-color:white;
	margin:auto;
	margin-bottom:40px;
	padding-bottom:30px;
	
}



.planssjtitre {
	
	margin-top:0px;
	font-size:30px;
	padding:5px;
	color:lightgray;
	display:inline-block;
}

.plantitresoussection {

  color:gray;
  position:relative;
  top:7px;
  float:none;
  display:inline-block;
  padding:3px 10px 3px 10px;
  background:white;
  font-size:23px;
margin-top:0px;
z-index:3;

}

.planligne1280bas {
	position:relative;
  top:-13px;
	height:2px;
	margin:auto;
	margin-bottom:0px;
	z-index:1;

	
}

.plansoussection {

margin-top:0px;
padding:0px;
}

.plancategories{
	
	color:#8E6C3E;
	margin-top:15px;
	font-size:20px;
	margin-bottom:5px;
}	


.elements{
	
	margin:0px;
	display:inline-block;
	color:gray;
	padding:7px;
	border-style:solid;
	border-width:1px;
	border-color:gray;
	width:100%;
	border-radius:5px;
	background-color:white;
}

.plancode {
	
	text-align:center;
	display:inline-block;
	padding:1px;
	margin-top:1px;
	margin-left:2px;
	margin-right:3px;
	border-radius:10%;
	height:25px;
	width:40px;
	color:white;
	
}

.contentcode {
	
	font-family:arial;
	font-size:14px;
	}

.texteelements {
	
	margin:0px;
	float:left;
	font-size:15px;
	padding:0px;
}

.divelements {
	
padding:5px;
margin:0px;

	
}

.checkelements {
	
	display:inline-block;
	padding:0px;
	margin:0px;
	
}

.plantitresection{
	
	width:100%;
	text-align:left;
	font-size:30px;
	color:gray;
	margin:0px;
	padding:0px;
}




/*Menu*/


/* Icones du menu principal (facebook, bottin, etc.)*/

div.icones a {
    float:right;
    display: block;
	padding:8px;
  }


/* Cache le hamburger sur grand écran */

.topnav .icon {
    display: none;
}

/* Les titres du menu */

.dropdown  {
    float: left;
    overflow: hidden;
}

/* Le premier titre (Le Séminaire) */

.dropdownfirst  {
    float: left;
    overflow: hidden;
	margin-left:5px;
	
}


/* Style des Titres du menu principal */

.dropdown  .dropbtn {
    font-size: 16px; 
    border: none;
    outline: none;
    color: #262626;
    padding: 20px 8px;
    background-color: white;
	line-height:14px;
	font-family:quicksand;
}

/* Style du premier Titre du menu principal */

.dropdownfirst  .dropbtn {
    font-size: 16px; 
    border: none;
    outline: none;
    color: #262626;
    padding: 20px 6px;
    background-color: white;
	line-height:14px;
	font-family:quicksand;
}


/* Style des menus déroulants du menu principal */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:1000;
	opacity:1.0;
}

/* Style des menus BOUTONS déroulants du menu principal
Pour l'ouverture de documents ou autre action directes
Devrait être identique aux autres items du menu déroulant (voir plus haut) */

.dropdown-content button {

    background-color: white;
	width:100%;
	opacity:1.0;
    border: none;
	font-size: 14px; 
    outline: none;
    color: var(--noir-1);
    padding: 12px 16px;
	background-color: white;
	text-align: left;
}


/* Style du texte des menus déroulants */

.dropdown-content a {
    float: none;
    color: var(--noir-1);
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
	font-size:19px;
}


/* Fond du menu déroulant HOVER */

.dropdown-content a:hover {
    background-image: var(--couleur-1);
    color: var(--blanc-1);
}





/* Déploie le menu déroulant au passage de la souris */

.dropdown:hover .dropdown-content {
    display: block;
}

/* Déploie le premier menu déroulant au passage de la souris */
.dropdownfirst:hover .dropdown-content {
    display: block;
}


/* Cache le menu et montre le hamburger pour les appareils mobiles */

@media screen and (max-width: 768px) {
  .topnav a {display: block;}
  .topnav a.icones {display: block;}
  
  .dropdown .dropbtn {display: none;}
  .dropdownfirst .dropbtn {display: none;}
  
 /* Icones du menu principal (facebook, bottin, etc.) MOBILES!!!*/
 
  .topnav a.icon {
    float:right;
    display: block;
	padding:10px;
  }
  
  
    .topnav div.icones a {
		 
    float:right;
    display: block;
	padding:10px;
  }
  
}

/* STYLE MOBILE (JAVASCRIPT TRIGGER) */

@media screen and (max-width: 768px) {
  .topnav.responsive {position: relative;
	z-index:1;}
 
  }
  
  
/* STYLE DES ICONES QUAND LE MENU MOBILE EST déployé) */
  
  .topnav.responsive a.icon {
    position: absolute;
     top:50px;
	right:0px;
	padding:10px;

  }

  
  .topnav.responsive div.icones {
	  
	position: absolute;
    top:50px;
	right:54px;
	  padding:0px;
  }
  
    .topnav.responsive div.icones a {

    float:right;
    display: block;
	padding:10px;
  }
  
  
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdownfirst {float: none;}
  
    
 /* Contenu déroulant MOBILE!!!*/
  
    .topnav.responsive .dropdown-content a {
      top:50px;
	  text-align:center;
	  margin:auto;
	  background-color:var(--gris-1);
	  font-size:18px;
	  
	  }
  
  
  /* Contenu déroulant MOBILE!!!*/
  
  .topnav.responsive .dropdown-content {
	  
	  position: relative;
	  z-index:1000;
	  text-align:center;
	  margin:auto;}
	  
	     .topnav.responsive .dropdown-content button {

    background-color: white;
	width:100%;
	opacity:1.0;
	text-align:center;
    border: none;
	font-size:18px;
    outline: none;
    color: var(--noir-1);
    padding: 12px 16px;
	background-color: var(--gris-1);

}
	  
    /* Positionement du premier MENU MOBILE!!!*/

    .topnav.responsive .dropdownfirst {
		
		margin-left:0px;
	}
  
    /* MENU PRINCIPAL MOBILE!!!*/
  
  .topnav.responsive .dropdown .dropbtn {
	  
    display:block;
    width:100%;
    text-align:center;
	font-size:22px;
	padding:20px;
	position:relative;
	z-index:1000;
	  background: var(--noir-1);
	  color:white;
  }
  
   .topnav.responsive .dropdownfirst .dropbtn {
	  
    display:block;
    width:100%;
    text-align:center;
	margin-top:60px;
	font-size:22px;
	padding:20px;
	position:relative;
	z-index:1000;
	  background: var(--noir-1);
	  color:white;
  }
  


  
/*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:gray;
	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}


/*FX*/



/*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-1);
  overflow: hidden;
}

.cardgenres {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);	
  max-width: 90%;
  margin: auto;
  margin-top:20px;
  color:var(--noir-1);
  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-1);
  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-1);
  border-radius:10px;
  
}



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


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

.card button {
  border: none;
  outline: 0;
  padding: 12px;
  color: black;
  background-image: var(--couleur-2);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 18px;
}

.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:black;
	opacity:0.7;
	margin-bottom:0px;
	color:white;
	padding:2px 10px 2px 10px;
	font-size:12px;
}




.courrier {
	
	font-size:18px;
	position: relative;
    top: 1px;
	color:lightgray;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* 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: white;
  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-1);
	
}


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




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

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

	margin-bottom:0px;

}

div.boutonvert {

	display:inline-block;

	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
	border:solid white;
	border-width:2px;
background: var(--couleur-1);
}

div.boutonor {

	display:inline-block;

	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
	border:solid white;
	border-width:2px;
background: radial-gradient(#A6CC6D, #84B836);
}

div.boutonnoir {

	display:inline-block;

	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
	border:solid white;
	border-width:2px;
  background: var(--noir-1);
}


div.boutongris {

	display:inline-block;
	background-color:#f9f9f9;
	padding:15px;
	color:#262626;
	font-weight:bold;
	text-align:center;
	border:solid white;
	border-width:2px;

}


/*FORMULAIRES*/

button.vert {

	display:inline-block;
background: var(--couleur-1);
	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
border:none;
}

button.noir {

	display:inline-block;
background:  var(--noir-1);
	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
border:none;
}

button.pourpre {

	display:inline-block;
background: radial-gradient(#D55ED5, #891A89);
	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
border:none;
}

button.or {

	display:inline-block;
background: radial-gradient(#BDB199, #836E41);
	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
border:none;
}



input[type=text] {
	margin:0px;
	width:100%;
	padding:12px;
border:none;
font-size:16px;	
	} 
	
input[type=password] {
	margin:0px;
	width:100%;
	padding:12px;
border:none;
font-size:16px;	
	} 
	
input[type=email] {
	margin:0px;
	width:100%;
	padding:8px;
border:none;
font-size:16px;		
	} 
	
input[type=date] {
	margin:0px;
	width:100%;
	padding:8px;	
	border:none;
	font-size:16px;	
	} 
	 	
hr { 
    display: block;
    border-width: 10px;
}
select {
	margin:0px;
	width:100%;
	padding:8px;
border:none;
font-size:16px;	
	} 



/*Sections*/

div.section:after {
	
	content:"";
    display:flex;
	clear:both;	
}



/*Blanc*/
div.fondblanc {
	
	display:box;
	background-color:var(--blanc-1);
    color:#262626;
	
}

div.encadreblanc {
	
	display:block;
	color:white;
	border:solid var(--blanc-1);
border-width:2px
}


/*Noir*/
div.fondnoir {
	
	display:block;
	  background: var(--noir-1);
	color:white;
	
}

div.encadrenoir {
	
	display:block;
	color:#303030;
	border:solid var(--noir-1);
border-width:2px
}

/*Gris*/
div.fondgris {
	
	display:block;
	background-color:var(--gris-1);
	color:#262626;

}

/*Couleur*/
div.fondcouleur {
	
	display:block;
	  background: var(--couleur-1);
	color:white;
	
}


div.encadrecouleur {
	
	display:block;
	background: white);
	color:var(--couleur-1);
	border:solid var(--couleur-1);
	border-width:2px
}

div.titrecouleur {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:14px;
    margin-top:30px;
	background: var(--couleur-1);
}


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


/*Couleur2*/

div.titrecouleur2 {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:20px;
    margin-top:0px;
background: var(--couleur-2);
}

div.fondcouleur2 {
	
	display:block;
	  background: var(--couleur-2);
	color:white;
	
}

/*Bottin*/



/*Vert sports*/
div.fondvertsports {
	
	display:block;
	  background: radial-gradient(#1B4B36, #1B4B36);
	color:white;
	
}


/*Brun*/
div.fondres {
	
	display:block;
	  background:radial-gradient(#460D0D, #460D0D);
	color:white;
	
}

/*Vert*/
div.fondvert {
	
	display:block;
background: radial-gradient(#32582D, #32582D);
	color:white;

}

div.fondor {
	
	display:block;
background: radial-gradient(#BDB199, #836E41);
	color:white;

}

/*Pourpre*/
div.fondpourpre {
	
	display:block;
background: radial-gradient(#A6CC6D, #891A89);
	color:white;

}

div.encadre {
	
	display:block;
background: white);
	color:#627F70;
	border:solid #627F70;
border-width:2px
}


div.sectiontexte {
	
	padding:20px 30px 10px 30px;

}


div.bottin {	

	border:solid white;
	width:50%;
	display:inline-block;
	margin:0px;
	background:var(--noir-1);
	color:white;
	padding:13px;
	text-align:center

}	

span.faicon {
	
		color:#c1c1c1;
	
}


/*profil*/


.davincititre {
	
	width:75px;
	float:left;
	padding:0px;
	margin-left:20px;
	margin-top:10px;
	
}

.logoprofil {
	
	width:75px;
	float:left;
	padding:0px;
	margin:4px;
	margin-top:10px;
}

.logoprofilbande {
	
	width:40px;
	float:left;
	padding:0px;
	margin:4px;
	margin-top:6px;
}


div.contact {
	
	
	
padding:13px;
background-color:white;
border: solid gray;
border-width:2px;
width:100%;
position:relative;
border-radius:5px;
}

.photocontact {
	
	width:50px;
	float:left;
	padding:0px;
	margin:0px;
	margin-top:0px;
	border-radius:100px;
}

.nomcontact {
	
	font-size:14px;
	display:inline-block;
	margin-top:4px;
	margin-left:10px;
	font-weight:bold;
	margin-bottom:0px;
}

.telcontact {
	
font-size:12px;
font-weight:normal;
margin:0px;

}


div.carteprofil {
	
	background-color:#f1f1f1;
	border:solid;
border-color:white;
border-width:5px;
min-height:104px;
}

div.carteprofilbande {
	
	background-color:#f1f1f1;
	border:solid;
border-color:white;
border-width:5px;
}



.titreprofil {
	
	font-size:22px;
	display:inline-block;
	margin-top:17px;
	margin-bottom:-20px;
	font-weight:bold;
}

.soustitre {
	
	font-size:14px;

}

.titreprofilbande {
	
	font-size:15px;
	display:inline-block;
	margin-top:10px;
	margin-bottom:0px;
	font-weight:bold;
}

.soustitrebande {
	
	font-size:10px;

}

.nosprofils {
	font-size:23px;
	font-weight:bold;
	padding:28px;
	border:solid;
	border-color:white;
	border-width:5px;
	text-align:center;
	background: radial-gradient(#5F5F5F, #262626);
	color:white;
	min-height:104px;
}
	
	
/*Menu déroulant*/


	
.gras {
	
    font-weight:bold;
	
}

AIzaSyDFk9veQU5qnPRCjehg8Wn7svq2-4-nRD0

ChIJnc_N76fIx0wRPVh09XhrmQs

/* Carte sport*/

div.cartesport {

padding:20px;

}

/* Carte vie scolaire*/

div.actviesco {

padding:10px;
text-align:center;

}

div.titrevert {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:20px;
    margin-top:0px;
background: radial-gradient(#32582D, #32582D);
}


div.titrevertpetit {
	
	font-size:20px;
	text-align:center;
    color:white;
	padding:10px;
    margin-top:0px;
background: var(--couleur-1);
}

div.titregrispetit {
	
	font-size:20px;
	text-align:center;
	padding:10px;
    margin-top:0px;
    background-color:#f3f3f3;
	color:var(--noir-1);
}

div.titreor {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:20px;
    margin-top:0px;
background: radial-gradient(#BDB199, #836E41);
}

div.titrepo {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:16px;
    margin-top:0px;
background-color:#0E0E26;
}

div.titrepourpre {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:20px;
    margin-top:0px;
background: radial-gradient(#D55ED5, #891A89);
}

div.titrenoir {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:20px;
    margin-top:0px;
background: #2A2A2A
}



div.titrebtres {
	
	font-size:16px;
	text-align:center;
    color:gray;
	padding:20px;
    margin-top:0px;
background: white;
}

div.titrefondation {
	
	font-size:24px;
	text-align:center;
    color:white;
	padding:20px;
    margin-top:0px;
background: radial-gradient(#D9C79D, #BE9F5A);
}

/* Carte personnel*/

div.carteperso {
  width:95%;	
  max-width:500px;
  margin:auto;
  margin-bottom:30px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  text-align: center;
  background-color:#262626;
  padding:0px;
}

h1.carteperso {
	
	color:#84B836;
	font-size:20px;
}

.titleperso {
  color: white;
  font-size: 16px;
  text-align: center;
  margin-top:-5px;
  line-height:30px;
}

button.carteperso {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 12px;
  color: white;
background: radial-gradient(#A6CC6D, #84B836);
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 22px;
}

a.carteperso {
  text-decoration: none;
  font-size: 22px;
  color: black;
}

button.carteperso:hover, a.carteperso:hover {
  opacity: 0.7;
}




/*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(white, #f7f7f7); /* For Safari 5.1 to 6.0 */
	background: -o-radial-gradient(white, #f7f7f7); /* For Opera 11.1 to 12.0 */
	background: -moz-radial-gradient(white, #f7f7f7); /* For Firefox 3.6 to 15 */
	background:  radial-gradient(white, #f7f7f7); /* Standard syntax */
padding:10px;
border-radius:8px;
margin-top:15px;
	
}


/*NOUVEAU SITE*/

input.miel {
	
	position: absolute; 
	top: -100px; 
	left: -1680px;}



h3.intext {
	
	font-size: 16px;

}

span.ombre {
	
	padding:16px;

	background: rgba(0, 0, 0, 0.6);

}


div.cubeas {
	
min-height:250px;

}

div.blk {

font-size: 27px;
width:85%;	
background-color:#262626;
padding:10%;
color:white;
text-align:center;
margin:auto;	
margin-bottom:40px;	
box-shadow: 2px 2px 20px;
}

div.vrt {

font-size: 27px;
width:85%;	
padding:5%;

color:white;
text-align:center;
margin:auto;	
margin-bottom:40px;	
box-shadow: 2px 2px 20px;
background: radial-gradient(#A6CC6D, #84B836);
}

div.boutonphoto {

font-size: 130%;
width:85%;	
background-color:#262626;
padding:10%;
text-align:center;
color:white;
margin:auto;	
margin-bottom:40px;	
box-shadow: 2px 2px 20px;
background-size:cover;
font-weight:bold;
}

div.cartefront {

width:90%;
margin:auto;
margin-bottom:30px;


}

h2.titreicone {
	
	margin-left:0px;
	margin-bottom:16px;
	text-align:center;
	color:gray;
	font-size:15px;
	font-weight:normal;
	padding:0px;
	margin-top:30px;
	line-height:0px;
	
}

img.profilindex {

width:85%;
margin:auto;
margin-bottom:10px;


}

img.pubverticale {

width:94%;
margin:auto;
margin-top:0px;
margin-bottom:10px;


}

div.bandepub {
	
	width:100%;
	margin-bottom:90px;

	
}

div.cartefronttitre {
	
font-size:100%;
font-weight:bold;
color:white;
text-align:center;
background: radial-gradient(#5F5F5F, #262626);
padding:15px;
max-height:62px;

}

div.cartefronttitrevert {
	
font-size:100%;
font-weight:bold;
color:white;
text-align:center;
background-color:#84B836;
padding:15px;
max-height:62px;

}





img.carteopt {
	
	width:90%;
	margin:auto;
	
}

img.newsindex {
	
	width:90%;
	float:left;
	margin-bottom:30px;
	margin-top:-10px;
	border-radius:0px;
}

p.newsindex {
	
	font-size:80%;
	
}

div.newsindex {
	
	font-size:100%;
font-weight:bold;
color:white;
text-align:center;
background: radial-gradient(#5F5F5F, #262626);
padding:15px;
max-height:62px;
width:90%;
	margin:auto;
}

.colprimaire {
	
background: linear-gradient(#A6CC6D, #84B836);
	color:white;
}	

.colprimairetxt {

	color:#84B836;	
}	

.colsecondaire {
	
	background-color:#262626;
	color:white;
}	



/* RESPONSIVE SCREEN */	
	
	
/* Téléphone */		
	


@media (max-width:600px) {
	
	.w3-hide-small{display:none!important} 
	
div.menutop {

	border:none;
	margin-bottom:2px;

	}
	
div.bottin {	

	width:100%;
	display:block;
	margin:0px;
	padding:13px;

}
	
	
	
.creditphoto .credittexte {
	
	font-size:8px;
	padding:3px;
}
	
div.bouttonvert {

	display:inline-block;
	padding:15px;
	color:white;
	font-weight:bold;
	text-align:center;
	border:none;
	margin-bottom:3px;

}
	
div.menuglobal {

	margin-bottom:0px;
}

}
	
	
/* 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: white;
    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%;}

	
	
	
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;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

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

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-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);
}

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

/* Container for image text */
.caption-container {
  text-align: center;
background-color:#f3f3f3;
  padding: 2px 16px;
  color: gray;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}






/* Style the tab TAB!!!!!!!!!!!!!!! */
.tab {
    overflow: hidden;
    background-color: #f3f3f3;
}

/* Style the buttons inside the tab */
.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
	width:16.6665%;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #f3f3f3;
    border-top: none;
}

button {
	
	cursor:pointer;
}