#Global{
background: url("../img/fond-ecran.jpg") no-repeat top left;
background-size: cover;
}
#overlayDidacticiel{
  position:fixed;
  z-index:99;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.7);
  display: block;
}
#didacticiels-ui #entete-didct{
  position:fixed;
  z-index:999;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display: block;
  text-align: center;
}
#didacticiels-ui #entete-didct p{
	margin-top:50px;
}
#didacticiels-ui #entete-didct span.typo-gem{ 
font-family: "Forte MT";
font-size:55px;	
}
#fermer{
	position:fixed;
	top:0;
	left:0;
	Width:150px;
	height:45px;
	line-height:45px;
	text-indent: 25px;
	z-index:9999999;
	background-color: rgba(255,108,0);
	display: block;
	color: rgb(255,255,255);
}
#fermer:hover{
	position:fixed;
	top:0;
	left:0;
	Width:150px;
	height:45px;
	line-height:45px;
	text-indent: 25px;
	z-index:9999999;
	background-color: rgb(255,255,255);
	display: block;
	color:rgb(255,108,0);
}
.fullscreen{
	background:url("../didacticiel/fullscreen.png") no-repeat center center;
	background-size: 100%;
	width:999.2px;
	height:200.3px;
	position:fixed;
	right:40px;
	top:0%;
	color:#fff;
	z-index:9999;
	display:block;
}
.font{
	background:url("../didacticiel/font.png") no-repeat center center;
	background-size: 100%;
	width:1165.4px;
	height:228.4px;
	position:fixed;
	right:40px;
	top:13%;
	color:#fff;
	z-index:9999;
	display:block;
}
.contraste{
	background:url("../didacticiel/contraste.png") no-repeat center center;
	background-size: 100%;
	width:1165.4px;
	height:228.4px;
	position:fixed;
	right:40px;
	top:38%;
	color:#fff;
	z-index:9999;
	display:block;
}
.lecteur{
	background:url("../didacticiel/lecteur.png") no-repeat center center;
	background-size: 100%;
	width:988.6px;
	height:342.4px;
	position:fixed;
	right:40px;
	bottom:5%;
	color:#fff;
	z-index:9999;
	display:block;
}
.reseaux-sociaux{
	background:url("../didacticiel/reseaux.png") no-repeat center center;
	background-size: 100%;
	width:946.2px;
	height:236.1px;
	position:fixed;
	left:60px;
	bottom:23%;
	color:#fff;
	z-index:9999;
	display:block;
}	
.indacteur{
	background:url("../didacticiel/indicateur.png") no-repeat center center;
	background-size: 100%;
	width:988.6px;
	height:342.4px;
	position:fixed;
	left:150px;
	bottom:3%;
	color:#fff;
	z-index:9999;
	display:block;
}
body{
color:rgb(255,255,255);
}
div#nav{
background: rgba(255,255,255, 0);
background: linear-gradient(90deg,rgba(255,255,255, 0) 0%, rgba(255,255,255, 1)15%, rgba(255,255,255, 1)85%, rgba(255,255,255, 0) 100%);
}
div#nav ul#nav-du-Gem.visible  li#accueil,
div#nav ul#nav-du-Gem.visible  li#Gem-les-ailes,
div#nav ul#nav-du-Gem.visible  li#Gem-coordonnees{
background-color: rgb(255,255,255)!important;
color:rgb(87,190,230)!important;
}
div#nav ul#nav-du-Gem li a{
border-right :1px solid rgb(87,190, 230);
}
div#nav ul#nav-du-Gem li#Gem-les-ailes ul#Gem-sous-nav li a{
color:rgb(255,108,0);
border-right :0;
}
div#nav ul#nav-du-Gem li#home{
background: url("../img/logo_gem_les_ailes_castres.png") no-repeat center center;
background-size: contain;
}
div#nav ul#nav-du-Gem li#accueil.active,
div#nav ul#nav-du-Gem li#Gem-les-ailes.active,
div#nav ul#nav-du-Gem li#Gem-coordonnees.active{
background-color: rgb(255,255,255);
color:rgb(87,190,230)!important;
}

div#nav ul#nav-du-Gem li#accueil:hover a,
div#nav ul#nav-du-Gem li#Gem-les-ailes:hover a,
div#nav ul#nav-du-Gem li#Gem-coordonnees:hover a,{
color:rgb(255,108,0);
transition:all 0.8s ease;
}
div#nav ul#nav-du-Gem li#accueil a,
div#nav ul#nav-du-Gem li#Gem-les-ailes a,
div#nav ul#nav-du-Gem li#Gem-coordonnees a{
color:rgb(87,190,230);
}
div#nav ul#nav-du-Gem li#Gem-les-ailes ul#Gem-sous-nav  li a{
 background-color: rgba(255,255,255,0.81);
 color:rgb(87,142,198);
}
div#nav ul#nav-du-Gem li#Gem-les-ailes ul#Gem-sous-nav li a:hover{
background-color: rgb(44,142,198);
color:rgb(255,255,255);
 }
div#nav ul#nav-du-Gem li#Gem-les-ailes ul#Gem-sous-nav li a.active{
background-color: rgb(250,181,0);
color:rgb(255,255,255);
}
div#nav ul#nav-du-Gem li#Gem-les-ailes ul#Gem-sous-nav li:hover a.active{
background-color: rgb(250,108,0);
color:rgb(255,255,255);
}
div#nav ul#nav-du-Gem li#accueil{
background: url("../img/liseret-orange.svg") no-repeat -1100px 0px;
background-size: 200%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#accueil:hover{
background: url("../img/liseret-orange.svg") no-repeat -40px 0;
background-size: 250%;
/*background-color:rgba(87,190,230,0.81);*/
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#accueil.active{
background: url("../img/liseret-jaune.svg") no-repeat -40px  0;
background-size: 250%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#accueil.active:hover{
background: url("../img/liseret-jaune.svg") no-repeat -40px  0;
background-size: 250%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#Gem-les-ailes{
background: url("../img/liseret-bleu-fonce.svg") no-repeat -1100px 0px;
background-size: 250%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#Gem-les-ailes:hover{
background: url("../img/liseret-bleu-fonce.svg") no-repeat -40px  0;
background-size: 250%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#Gem-les-ailes.active{
background: url("../img/liseret-jaune.svg") no-repeat -40px  0;
background-size: 250%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#Gem-coordonnees{
background: url("../img/liseret-orange.svg") no-repeat -1100px 0px;
background-size: 250%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#Gem-coordonnees:hover{
background: url("../img/liseret-orange.svg") no-repeat -40px  0;
background-size: 250%;
transition: all 0.8s ease;
}
div#nav ul#nav-du-Gem li#Gem-coordonnees.active{
background: url("../img/liseret-jaune.svg") no-repeat -40px  0;
background-size: 250%;
transition: all 0.8s ease;
}
h2.sous-titre{
background-color: rgba(44,142,198,0.81);
}
.mise-en-avant{
background-color: rgb(255,108,0);
}
.apostrophe-haut,
.apostrophe-bas{
color:rgb(250,181,0);
}
.extrait{
color:rgb(44,142,198);
}
#A-Propos #a-propos-img{
background-size:contain;
background-image:url("../img/a_propos_gem_les_ailes_castres.png");
background-position: center center;
background-repeat: no-repeat;
}
#Accueil #logo-gem-accueil,
#Pied-de-page #logo-gem-pied{
background-size:contain;
background-image:url("../img/logo_gem_les_ailes_castres.png");
background-position: center center;
background-repeat: no-repeat;
}
.numeros-charte-gem{
background-color:rgb(250,181,0);
padding:5px;
border-radius:50%;
}
.puces-charte{

}
.puce{
background-color: rgba(87,190,230,0.81);
}
.puce .picto-charte-01{
background: url("../img/charte/picto-charte-01.png") no-repeat center center;
}
.puce .picto-charte-02{
background: url("../img/charte/picto-charte-02.png") no-repeat center center;
}
.puce .picto-charte-03{
background: url("../img/charte/picto-charte-03.png") no-repeat center center;
}
.puce .picto-charte-04{
background: url("../img/charte/picto-charte-04.png") no-repeat center center;
}
.puce .picto-charte-05{
background: url("../img/charte/picto-charte-05.png") no-repeat center center;
}
.puce .picto-charte-06{
background: url("../img/charte/picto-charte-06.png") no-repeat center center;
}
.puce .picto-charte-07{
background: url("../img/charte/picto-charte-07.png") no-repeat center center;
}
.puce .picto-charte-08{
background: url("../img/charte/picto-charte-08.png") no-repeat center center;
}
.puce .picto-charte-09{
background: url("../img/charte/picto-charte-09.png") no-repeat center center;
}

#Les-Partenaires ul li.unafam #img{
background: url("../img/logo-unafam.png") no-repeat center center;
background-color: rgba(255,255,255,0.18);
background-size: contain;

}
#Les-Partenaires ul li.asei #img{
background: url("../img/logo-asei.png") no-repeat center center;
background-color: rgba(255,255,255,0.18);
background-size: contain;

}
#Les-Partenaires ul li.ars #img{
background: url("../img/logo-ars.png") no-repeat center center;
background-color: rgba(255,255,255,0.18); 
background-size: contain;
}
#Les-Partenaires ul li.ars p.texte, 
#Les-Partenaires ul li.asei p.texte,
#Les-Partenaires ul li.unafam p.texte{
color:rgb(255,255,255);
}
#Les-Partenaires ul li.unafam p.fonction{
	background-color: rgb(45,46,135);
}
#Les-Partenaires ul li.ars p.fonction{
	background-color: rgb(122,184,0);
}
#Les-Partenaires ul li.asei p.fonction{
	background-color: rgb(226,0,59);
}
#Les-Partenaires ul li.ars p.lien-ars, 
#Les-Partenaires ul li.asei p.lien-asei,
#Les-Partenaires ul li.unafam p.lien-unafam{
background-color: rgba(255,255,255,0.81);
background-image: url("../img/btn-lien.png");
background-position: -1500px 0;
background-size: cover;
color:rgb(255,108,0);
border-radius: 0 0 25px 25px;
transition: all 0.8s ease;
}
#Les-Partenaires ul li.ars p.lien-ars:hover, 
#Les-Partenaires ul li.asei p.lien-asei:hover,
#Les-Partenaires ul li.unafam p.lien-unafam:hover{
background-position: 0px top;
color:rgb(255,255,255);
transition: all 0.8s ease;
}
#Infos-Utiles h3{
background-color: rgba(87,190,230,0.405);
margin-right: 25px;
}
#Infos-Utiles  .gauche{
background-color: rgba(87,190,230,0.5);
}
#Infos-Utiles a{
color:rgb(255,108,0);
background-image: url("../img/btn-lien.png");
background-position: -1500px 0;
background-repeat:  no-repeat;
background-color: rgba(255,255,255,0.81);
background-size: cover;
transition: all 0.8s ease;
border-radius: 0 0 0 25px;
}
#Infos-Utiles a:hover{
background-position: 0px 0;
color : rgb(255,255,255);
transition: all 0.8s ease;
}
div#Temoignages div#temoignages-container div.temoignage{
background-color: rgba(255,255,255,0.81);
}
div#Temoignages div#temoignages-container div.temoignage p.temoins{
color:rgb(255,108,0) !important;
}
div#Temoignages div#temoignages-container div.temoignage p.texte{
border-bottom: 1px solid rgb(255,100,0);
border-top: 1px solid rgb(255,100,0);
color:rgb(87,190,230);
}
div#Temoignages div#temoignages-container a.prev-temoignage{
transition: all 0.6s ease;
background-color:rgba(255,255,255,1);
color: rgba(255,108,0,1);
}
div#Temoignages div#temoignages-container a.next-temoignage{
transition: all 0.6s ease;
background-color:rgba(255,255,255,1);
color: rgba(255,108,0,1);
}
div#Temoignages div#temoignages-container a.prev-temoignage:hover{
background-color:rgba(255,108,0,1);
color:rgba(255,255,255,1); 
}
div#Temoignages div#temoignages-container a.next-temoignage:hover{
transition: all 0.2s ease;
background-color:rgba(255,108,0,1);
color:rgba(255,255,255,1);
}
#Coordonnees, #Pied-de-page{
color:rgb(87,190,230);
}
#Coordonnees{
background-color: transparent;
}
#Coordonnees h1{
color:rgb(87,190,230);
background-color: transparent	;
}
#Coordonnees a{
background-color: rgba(255,108,0,0.81);
color:rgb(255,255,255);
border-radius: 25px 25px 25px 0  ;
}
#Coordonnees h2.sous-titre{
background-color: rgba(44,142,198,0.81);
color:rgb(255,255,255);
}
#Coordonnees div.texte span.ouverture{
color:rgb(255,108,0);
}
#Coordonnees p.animateur,
#Coordonnees p.responsable{
color:rgb(44,142,198);
}
#Pied-de-page.apostrophe-haut,
#Pied-de-page .apostrophe-bas{
color:rgb(250,181,0);
}
#Pied-de-page .extrait{
color:rgb(255,255,255);
}
#Pied-de-page{
background-color: rgb(44,142,198);
}
div#Pied-de-page ul#sous-nav li{
border-left:5px solid rgb(255,255,255);
}
div#Pied-de-page ul#sous-nav li:hover{
border-left:5px solid rgb(255,108,0);
}
div#Pied-de-page ul#sous-nav li a{
transition:all 0.5s ease;
color:rgb(255,255,255);
}
div#Pied-de-page ul#sous-nav li:hover a:hover{
color:rgb(255,108,0);
background-color:rgb(255,255,255);
transition: all 0.6s ease;
}
div#Pied-de-page ul:last-child a{
color:rgb(255,255,255);
}
div#Pied-de-page ul li.reseaux:hover{
color:rgb(255,108,0);
background-color:rgb(255,255,255);
transition : all 0.5s ease;
}
div#Pied-de-page ul li.reseaux:hover a{
color:rgb(255,108,0);
transition : all 0.5s ease;
}
div#Pied-de-page ul li.reseaux:hover img{
filter: brightness(0) saturate(100%) invert(46%) sepia(98%) saturate(2833%) hue-rotate(2deg) brightness(106%) contrast(103%);
transition: all 0.6s ease;
}
html body div#info-auxiliaire a{
background-color: rgb(251,181,0);
border-left:5px solid rgb(255,255,255);
color: rgb(255,255,255);
transition: all 0.6s ease;
}

html body div#info-auxiliaire a:hover{
background-color:rgb(251,181,0);
border-left:5px solid rgb(255,255,255);
color: rgb(255,255,255);
transition: all 0.6s ease;
}

html body div#info-auxiliaire a.active,
html body div#info-auxiliaire a#aux-accueil.active,
html body div#info-auxiliaire a#aux-a-propos.active,
html body div#info-auxiliaire a#aux-temoignages.active,
html body div#info-auxiliaire a#aux-charte.active,
html body div#info-auxiliaire a#aux-infos.active,
html body div#info-auxiliaire a#aux-partenaires.active,
html body div#info-auxiliaire a#aux-coordonnees.active,
html body div#info-auxiliaire a#aux-pied-de-page.active{
background-color: rgba(255,108,0,1);
display:block;
border-left:5px solid rgb(255,255,255);
color: rgb(255,255,255);
transition: all 0.6s ease;
}
html body div#info-auxiliaire a.active:hover,
html body div#info-auxiliaire a#aux-accueil.active:hover,
html body div#info-auxiliaire a#aux-a-propos.active:hover,
html body div#info-auxiliaire a#aux-temoignages.active:hover,
html body div#info-auxiliaire a#aux-charte.active:hover,
html body div#info-auxiliaire a#aux-infos.active:hover,
html body div#info-auxiliaire a#aux-partenaires.active:hover,
html body div#info-auxiliaire a#aux-coordonnees.active:hover
html body div#info-auxiliaire a#aux-pied-de-page.active:hover{
background-color:rgb(251,181,0);
border-left:5px solid rgb(255,255,255);
color: rgb(255,255,255);
transition: all 0.6s ease;
}

html body div#info-auxiliaire a#aux-a-propos.display-none,
html body div#info-auxiliaire a#aux-temoignages.display-none,
html body div#info-auxiliaire a#aux-charte.display-none,
html body div#info-auxiliaire a#aux-infos.display-none,
html body div#info-auxiliaire a#aux-partenaires.display-none,
html body div#info-auxiliaire a#aux-coordonnees.display-none,
html body div#info-auxiliaire a#aux-pied-de-page.display-none{
transition: all 0.6s ease;
display:none;
}
html body div#info-auxiliaire a.display-block,
html body div#info-auxiliaire a#aux-a-propos.display-block,
html body div#info-auxiliaire a#aux-temoignages.display-block,,
html body div#info-auxiliaire a#aux-charte.display-block,
html body div#info-auxiliaire a#aux-infos.display-block,
html body div#info-auxiliaire a#aux-partenaires.display-block,
html body div#info-auxiliaire a#aux-coordonnees.display-block,
html body div#info-auxiliaire a#aux-pied-de-page.display-block{
transition: all 0.6s ease;
display:block;
}
@media screen and (min-width:980px) and (max-width:1024px) {
#overlayDidacticiel{
  position:fixed;
  z-index:99;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.7);
  display: block;
}
#didacticiels-ui #entete-didct{
  position:fixed;
  z-index:999;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display: block;
  text-align: center;
}
#didacticiels-ui #entete-didct p{
	margin-top:50px;
}
#didacticiels-ui #entete-didct span.typo-gem{ 
font-family: "Forte MT";
font-size:55px;	
}
#fermer{
	position:fixed;
	top:0;
	left:0;
	Width:100px;
	height:45px;
	line-height:45px;
	text-indent: 15px;
	z-index:9999999;
	background-color: rgba(255,108,0);
	display: block;
	color: rgb(255,255,255);
}
#fermer:hover{
	position:fixed;
	top:0;
	left:0;
	Width:100px;
	height:45px;
	line-height:45px;
	text-indent: 15px;
	z-index:9999999;
	background-color: rgb(255,255,255);
	display: block;
	color:rgb(255,108,0);
}
.fullscreen{
	background:url("../didacticiel/fullscreen-tablette.png") no-repeat center center;
	background-size: 100%;
	width:545px;
	height:99px;
	position:fixed;
	right:40px;
	top:6%;
	color:#fff;
	z-index:9999;
	display:block;
}
.font{
	background:url("../didacticiel/font-tablette.png") no-repeat center center;
	background-size: 100%;
	width:673px;
	height:113px;
	position:fixed;
	right:40px;
	top:20%;
	color:#fff;
	z-index:9999;
	display:block;
}
.contraste{
	background:url("../didacticiel/contraste-tablette.png") no-repeat center center;
	background-size: 100%;
	width:565px;
	height:92px;
	position:fixed;
	right:40px;
	top:43%;
	color:#fff;
	z-index:9999;
	display:block;
}
.lecteur{
	background:url("../didacticiel/lecteur-tablette.png") no-repeat center center;
	background-size: 100%;
	width:548px;
	height:167px;
	position:fixed;
	right:40px;
	bottom:5%;
	color:#fff;
	z-index:9999;
	display:block;
}
.reseaux-sociaux{
	background:url("../didacticiel/reseaux-tablette.png") no-repeat center center;
	background-size: 100%;
	width:519px;
	height:116px;
	position:fixed;
	left:60px;
	bottom:28%;
	color:#fff;
	z-index:9999;
	display:block;
}	
.indacteur{
	display:none;
}
}
@media screen and (min-width:220px) and (max-width:979px) {
#overlayDidacticiel{
display:none;
}
#didacticiels-ui #entete-didct{
 display:none;
}
#didacticiels-ui #entete-didct p{
display:none;
}
#didacticiels-ui #entete-didct span.typo-gem{ 
display:none;
}
#fermer{
	display:none;
}
#fermer:hover{
	display:none;
}
.fullscreen{
display:none;
}
.font{
display:none;
}
.contraste{
display:none;
}
.lecteur{
	display:none;
}
.reseaux-sociaux{
display:none;
}	
.indacteur{
	display:none;
}
}
@media screen and (min-width:1025px) and (max-width:1370px) {
#overlayDidacticiel{
  position:fixed;
  z-index:99;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.7);
  display: block;
}
#didacticiels-ui #entete-didct{
  position:fixed;
  z-index:999;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  display: block;
  text-align: center;
}
#didacticiels-ui #entete-didct p{
	margin-top:50px;
}
#didacticiels-ui #entete-didct span.typo-gem{ 
font-family: "Forte MT";
font-size:55px;	
}
#fermer{
	position:fixed;
	top:0;
	left:0;
	Width:100px;
	height:45px;
	line-height:45px;
	text-indent: 15px;
	z-index:9999999;
	background-color: rgba(255,108,0);
	display: block;
	color: rgb(255,255,255);
}
#fermer:hover{
	position:fixed;
	top:0;
	left:0;
	Width:100px;
	height:45px;
	line-height:45px;
	text-indent: 15px;
	z-index:9999999;
	background-color: rgb(255,255,255);
	display: block;
	color:rgb(255,108,0);
}
.fullscreen{
	background:url("../didacticiel/fullscreen-tablette.png") no-repeat center center;
	background-size: 100%;
	width:545px;
	height:99px;
	position:fixed;
	right:40px;
	top:6%;
	color:#fff;
	z-index:9999;
	display:block;
}
.font{
	background:url("../didacticiel/font-tablette.png") no-repeat center center;
	background-size: 100%;
	width:673px;
	height:113px;
	position:fixed;
	right:40px;
	top:20%;
	color:#fff;
	z-index:9999;
	display:block;
}
.contraste{
	background:url("../didacticiel/contraste-tablette.png") no-repeat center center;
	background-size: 100%;
	width:565px;
	height:92px;
	position:fixed;
	right:40px;
	top:43%;
	color:#fff;
	z-index:9999;
	display:block;
}
.lecteur{
	background:url("../didacticiel/lecteur-tablette.png") no-repeat center center;
	background-size: 100%;
	width:548px;
	height:167px;
	position:fixed;
	right:40px;
	bottom:5%;
	color:#fff;
	z-index:9999;
	display:block;
}
.reseaux-sociaux{
	background:url("../didacticiel/reseaux-tablette.png") no-repeat center center;
	background-size: 100%;
	width:519px;
	height:116px;
	position:fixed;
	left:60px;
	bottom:28%;
	color:#fff;
	z-index:9999;
	display:block;
}	
.indacteur{
	background:url("../didacticiel/indicateur-tablette.png") no-repeat center center;
	background-size: 100%;
	width:547px;
	height:116px;
	position:fixed;
	left:150px;
	bottom:9%;
	color:#fff;
	z-index:9999;
	display:block;
}
}