html, body, div, a, p, ul,li{
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
} 

@font-face{
font-family: "Forte MT";
src: url("../fonts/forte.woff") format("woff"),
url("../fonts/forte.ttf") format("truetype");
}
html, body, p, a, div, h1, h2, h3 {
margin:0;
padding:0;
}


body{
font-family: 'Rubik', sans-serif;
font-size: 19px;
}
#Global{
width:100%;
min-height:12000px;
}
#centered{
width:70%;
margin:0 15%;
height:11800px;
}
div#nav{
width:100%;
height:45px;
position:fixed;
top:0;
left:0;
box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.09);
z-index:9;
}
div#nav ul#nav-du-Gem{
width:80%;
position:fixed;
top:0px;
left:0;
z-index:99;
height:45px;
line-height:45px;
margin:0 10%;
list-style-type: none;
padding: 0;
}
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: rgba(255,255,255,0.5);
color:rgb(44,190,230);
}

div#nav ul#nav-du-Gem li{
float:left;
margin:0;
padding:0;
text-align: center;
width:30%;
position:relative;
display: block;
}

div#nav ul#nav-du-Gem li a{
width:100%;
display:block;
height:30px;
line-height: 30px;
margin: 8.5px 0;
float:left;
font-family: "Forte Mt";
text-decoration:none;
}

div#nav ul#nav-du-Gem li#Gem-les-ailes ul#Gem-sous-nav li a{
width:100%;
display:block;
height:45px;
line-height: 45px;
margin:0;
float:left;
font-family: "Assistant", sans-serif;	
text-decoration:none;
}

div#nav ul#nav-du-Gem li#home{
display:block;
height:45px;
width:45px;
margin:0;
}
div#nav ul#nav-du-Gem li#Gem-les-ailes ul#Gem-sous-nav{
margin:0;
padding:0;
width:100%;
display:none;
height:250px;
}
div#nav ul#nav-du-Gem li#Gem-les-ailes:hover ul#Gem-sous-nav{
margin:-2px;
padding:0;
width:100%;
float:left;
display:block;
height:auto;
}
div#nav ul#nav-du-Gem  li#Gem-les-ailes:hover ul#Gem-sous-nav  li{
list-style-type: none;
display: block;
padding:0;
float:left;
line-height: 45px;
height:45px;
width:100%;
margin:0;
}

h1.titre{
font-family: "Forte MT";
width:100%;
height:65px;
line-height:55px;
font-size:60px;
color:rgb(255,255,255);
display:block;
padding:35px;
background-color: rgba(87,190,230,0.18);
}
h2.sous-titre{
min-height: 50px;
min-width: 400px;
width:40%;
max-width:40%;
margin-right:60%;
border:0;
font-family: "Assistant" ,sans-serif;
font-weight: 200;
margin-top:80px;
padding:25px;
font-size:40px;
margin-bottom: 40px;
display:block;
float:left;
}
.gauche,.droite{
float:left;
width:50%;
}
p.texte{
width:365px;
margin:5% 0 0 0;
display:block;
}
.mise-en-avant{
width:23%;
padding:35px;
margin: 25px 0;
text-transform: uppercase;
}
#Accueil {
padding-top: 200px;
min-height: 1500px;
}
#Accueil #logo-gem-accueil{
width:150px;
height:150px;
min-width:150px;
min-height:150px;
display:block;
margin-left:-50px;
}
.apostrophe-haut{
font-size: 125px;
}
.apostrophe-bas{
font-size: 65px;
}

.apostrophe-haut,
.apostrophe-bas{
font-family: "Space Grotesk", sans-serif;
font-weight:700;
color:rgb(250,181,0);
height:95px;
}
.extrait{
width:70%;
font-family: "Forte MT";
font-size:35px;
}
#A-Propos{
padding-top: 200px;
height:1900px;
}
#A-Propos #a-propos-img{
width:550px;
height:550px;
min-width:550px;
min-height:550px;
display:block;
}
#La-Charte{
padding-top: 200px;
min-height: 2900px;
}
.puce{
margin: 5%;
width: 33%;
min-height:310px;
float: left;
line-height:30px;
list-style-type:none;
position: relative;
background-color: rgba(87,190,230,0.18);	
}
.texte-puce{
float:left;
with:80%;
padding:5%;
}
.numeros-charte-gem{
width:30px;
position: absolute;
left:-35px;
text-align: center;
top:145px;
height:30px;
padding:5px;
border-radius:50%;
}
.puce .picto-charte-01,
.puce .picto-charte-02,
.puce .picto-charte-03,
.puce .picto-charte-04,
.puce .picto-charte-05,
.puce .picto-charte-06,
.puce .picto-charte-07,
.puce .picto-charte-08,
.puce .picto-charte-09,
.puce .picto-charte-10{
float:left;
width:100%;
height:auto;
min-height:145px;
}

#Les-Partenaires{
padding-top: 200px;
min-height: 1100px;
}
#Les-Partenaires ul{
float:left;
width:24%;
margin:145px 2.15%;
list-style-type:none;
}

#Les-Partenaires ul li.ars,
#Les-Partenaires ul li.asei,
#Les-Partenaires ul li.unafam{
float:left;
width:100%;
}
#Les-Partenaires ul li.asei #img,
#Les-Partenaires ul li.unafam #img,
#Les-Partenaires ul li.ars #img{
height:181px;
width:80%;
padding:0 10%;
background-size: 90%;
border-radius: 25px 25px 0 0;
}
#Les-Partenaires ul li.ars a,
#Les-Partenaires ul li.asei a,
#Les-Partenaires ul li.unafam a{
text-decoration: none;
}
#Les-Partenaires ul li.ars p.texte, 
#Les-Partenaires ul li.asei p.texte,
#Les-Partenaires ul li.unafam p.texte{
min-height:180px; 
float:left;
padding:5%;
font-style: italic;
width:90%;
}
#Les-Partenaires ul li.ars p.fonction, 
#Les-Partenaires ul li.asei p.fonction,
#Les-Partenaires ul li.unafam p.fonction{
width:100%;
height:auto;
float:left;
min-height:10px;
padding:0%;
line-height:50px;
text-align:center;
text-transform: uppercase;
}

#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-position: -1500px 0;
background-size: cover;
border-radius: 0 0 25px 25px;
float:left;
min-width:90%;
padding:5%;
text-align: center;
transition: all 0.8s ease;
}

#Infos-Utiles{
padding-top: 200px;
min-height: 2100px;

}
#Infos-Utiles .texte{
width:70%;
height:auto;
margin-right:30%;
}
#Infos-Utiles div.infos{
width:100%;
max-height:auto;
min-height:auto;
}
#Infos-Utiles h3{
font-family: "Assistant" ,sans-serif;
font-size:35px;
height:55px;
margin-top:90px;
text-indent:30px;
}
#Infos-Utiles a{
width:90%;
text-indent: 25px;
float:left;
margin:2.5% 5%;
line-height:55px;
height:55px;
text-decoration:none;
transition: all 0.8s ease;
}

#Temoignages{
padding-top: 200px;
min-height: 1240px;
}

div#temoignages-container{
width:60%;
margin:0 20%;
min-height:400px;
max-height:810px;
display:block;
float:left;
padding-top:150px;
position: relative;
}
div#Temoignages div#temoignages-container div.temoignage{
height: auto;
border-radius: 25px;
display: block;
padding: 35px;
}
div#Temoignages div#temoignages-container div.temoignage p.texte{
padding:5%;
width:90%;
font-weight:300;
font-style: italic;
}
div#Temoignages div#temoignages-container div.temoignage p.temoins{
width:90%;
text-align: right;
padding:5%;
}
div#Temoignages div#temoignages-container a{
display:block;
}
div#Temoignages div#temoignages-container a.prev-temoignage{
z-index: 0;
position: absolute;
top:365px;
left:-50px;
width:25px;
padding: 25px;
font-size: 35px;
transition: all 0.6s ease;
font-weight:300;
margin-top: -97px;
float:left;
}
div#Temoignages div#temoignages-container a.next-temoignage{
z-index: 0	;
position: absolute;
top:265px;
right:-100px;
float:right;
width:25px;
padding: 25px;
font-size: 35px;
transition: all 0.6s ease;
font-weight:300;
text-align:center;
margin-right:50px;
transition: all 0.6s ease;
}
div#Temoignages div#temoignages-container a.prev-temoignage:hover{
transition: all 0.2s ease; 
font-weight:600;
text-indent:-15px;
float:left;
}
div#Temoignages div#temoignages-container a.next-temoignage:hover{
transition: all 0.2s ease;
}
#Coordonnees{
padding-bottom: 200px;
}
#Coordonnees, #Pied-de-page{
padding-top: 100px; 
width:100%;
margin:0;
float:left;
min-height:420px;	
padding-bottom: 200px;
position: relative;
}
#Coordonnees a{
width:200px;
float:left;
margin:25px 6.5px;
height:auto;
display:block;
text-align: center;
padding:15px;
}
#Coordonnees a,#Pied-de-page a{
text-decoration:none;
}
.animateurs-texte,
.responsable-texte{
	margin-top:100px !important;
}

#Coordonnees h2.sous-titre{
min-height: 50px;
min-width: 400px;
border:0;
margin-right: 20%;
font-family: "Assistant" ,sans-serif;
font-weight: 200;
margin-top:80px;
padding:25px;
font-size:40px;
margin-bottom: 40px;
display:block;
float:left;
}
#Coordonnees div.texte{
margin-top:90px;
width:500px;
}

#Coordonnees p.horaires{
margin-left: 30px;
line-height: 45px;
}
#Coordonnees p.animateur,
#Coordonnees p.responsable{
margin-left:30px;
line-height:45px;
width:100%;
}
#Coordonnees .droite iframe{
margin-top:250px;
width:100%;
height:100%;
min-height:380px;
}
#Coordonnees .section, #Pied-de-page .section{
width:70%;
margin:0 15%;
}
#Pied-de-page .gauche{
float:left;
width:33.33%;
height:auto;
}

#Pied-de-page #logo-gem-pied{
width:150px;
height:150px;
}
#Pied-de-page .apostrophe-haut{
font-size: 125px;
}
#Pied-de-page  .apostrophe-bas{
font-size: 65px;
}

#Pied-de-page.apostrophe-haut,
#Pied-de-page .apostrophe-bas{
font-family: "Space Grotesk", sans-serif;
font-weight:700;
height:95px;
}
#Pied-de-page .extrait{
width:80%;
font-family: "Forte MT";
font-size:25px;
}

div#Pied-de-page ul#sous-nav,
div#Pied-de-page p.texte-reseaux{
margin-top:150px;
}
div#Pied-de-page ul,
div#Pied-de-page ul#sous-nav li ul{
list-style-type: none;
}
div#Pied-de-page ul#sous-nav li ul#li-le-Gem-sous-nav{
margin-top:0px;
}
div#Pied-de-page ul#sous-nav li ul#li-le-Gem-sous-nav li a{
text-indent: 55px;
}
div#Pied-de-page ul#sous-nav li a{
display:block;
height:100%;
min-height:20px;
padding:12.25px;
text-indent:12.25px;
width:auto;
transition:all 0.5s ease;
}
div#Pied-de-page ul#sous-nav li ul{
margin-top:12.25px;
}
div#Pied-de-page ul#sous-nav li ul,
div#Pied-de-page ul#sous-nav li ul li {
padding-left:0;
margin-left:0;
}
div#Pied-de-page ul#sous-nav li ul li{
border-left:0px;
}

div#Pied-de-page ul:fisrt-child{
padding:30px;
display:block;
}

div#Pied-de-page ul:first-child li{
border-left:0px;
margin-top:0px;
}
div#Pied-de-page ul:last-child{
display:block;
}
div#Pied-de-page ul:last-child li{
border-left:0px;
}
div#Pied-de-page ul#sous-nav li a{
width:70%;
}

div#Pied-de-page ul li img{
width:81px;
min-width:81px;
min-height:auto;
height:auto;
}
div#Pied-de-page ul li.reseaux{
line-height:48px;
transition : all 0.5s ease;
width:70%;
}
div#Pied-de-page ul li.reseaux:hover{
line-height:48px;
transition : all 0.5s ease;
}
div#Pied-de-page ul li.reseaux img{
width:48px;
min-width:48px;
min-height:auto;
height:auto;
float:left;
}
div#Pied-de-page ul li.reseaux:hover{
color:rgb(255,108,0);
transition : all 0.5s ease;
}
div#Pied-de-page ul li.reseaux:hover a{
color:rgb(255,108,0);
transition : all 0.5s ease;
}


html body div#info-auxiliaire{
transition: all 0.6s ease;
position:fixed;
bottom:10%;
left:0;
float:left;
display:block;
min-width:60px;
min-height:25px;
line-height:25px;
transition: all 0.6s ease;
display: block;
z-index:999;
}
html body div#info-auxiliaire a{
text-decoration:none;
font-family: "Assistant", sans-serif;
text-align:left;
font-weight: 200;
font-size:16px;
padding:0px 15px;
margin-top:5px;
display:block;
float:left;
min-width:60px;
min-height:25px;
line-height:25px;
background-color: rgba(87,190,230,1);
border-left:5px solid rgb(255,255,255);
color: rgb(255,255,255);
transition: all 0.6s ease;
}


.fade{ 
animation-name: fadeIn; 				
animation-duration: 900ms;        		
animation-iteration-count:1; 
} 
@keyframes fadeIn{ 
0% {opacity: 0;} 
25%{translate: 0px -40px}
75%{translate: 0px 0px}
100% {opacity: 1;}
}