@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: 15px;
}
#Global{
width:100%;
min-height:14900px;
}
#centered{
width:70%;
margin:0 15%;
height:14500px;
}
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:99;
}
div#nav ul#nav-du-Gem.visible {
background-image: none;
height: auto;
display:block;
}
div#nav ul#nav-du-Gem.close li{
display: none;
}
div#nav ul#nav-du-Gem{
width:80%;
position:fixed;
top:0;
left:0;
z-index:99999;
height:45px;
line-height:45px;
margin:0 10%;
dispaly:block;
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{
display: block;
}

div#nav ul#nav-du-Gem li{
float:left;
margin:0;
padding:0;
text-align: center;
width:100%;
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:100%;
margin:0;
background: url("../img/menu-close.png") no-repeat top center;
}
div#nav ul#nav-du-Gem.close li#home{
display:block;
height:45px;
width:100%;
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.visible li#Gem-les-ailes ul#Gem-sous-nav{
margin:0;
padding:0;
width:100%;
display:block;
height:auto;
}
div#nav ul#nav-du-Gem.visible  li#Gem-les-ailes ul#Gem-sous-nav  li{
list-style-type: none;
display: block;
padding:0;
float:left;
line-height: 45px;
height:45px;
width:100%;
margin:0;
}
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{
transition:all 0.8s ease;
}

div#nav ul#nav-du-Gem li#Gem-les-ailes a,
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,
div#nav ul#nav-du-Gem li#Gem-les-ailes.active a.active,
div#nav ul#nav-du-Gem li#Gem-coordonnees.active a.active{
transition:all 0.8s ease;
}

h1.titre{
font-family: "Forte MT";
width:100%;
height:auto;
line-height:55px;
font-size:40px;
display:block;
}
h2.sous-titre{
min-height: 50px;
min-width: 70%;
border:0;
margin-right: 20%;
font-family: "Assistant" ,sans-serif;
font-weight: 200;
margin-top:80px;
padding:25px;
font-size:30px;
margin-bottom: 40px;
display:block;
float:left;
}
.gauche,.droite{
float:left;
width:100%;
}
p.texte{
width:285px;
margin:5% 0 0 0;
display:block;
}
.mise-en-avant{
width:35%;
padding:25px;
margin: 25px 0;
text-transform: uppercase;
}

#Accueil {
padding-top: 90px;
min-height: 1700px;
}
#Accueil #logo-gem-accueil{
width:150px;
height:150px;
min-width:150px;
min-height:150px;
display:block;
margin-left:-50px;
}
.apostrophe-haut{
font-size: 65px;
}
.apostrophe-bas{
font-size: 35px;
}

.apostrophe-haut,
.apostrophe-bas{
font-family: "Space Grotesk", sans-serif;
font-weight:700;
height:65px;
}
.extrait{
width:75%;
font-family: "Forte MT";
font-size:25px;
}
#A-Propos{
padding-top: 90px;
min-height:1200px;
}
#A-Propos #a-propos-img{
width:70%x;
height:auto;
min-width:250px;
min-height:250px;
display:block;
}
#La-Charte{
padding-top: 90px;
min-height: 4600px;;
}
.puces-charte{
min-height:270px;
}
.puce{
margin:12.5%;
width:55%;
min-height:300px;
height:auto;
float: left;
line-height:30px;
list-style-type:none;
position: relative
}
.texte-puce{
float:left;
with:80%;
padding:10%;
}
.numeros-charte-gem{
width:30px;
position: absolute;
left:-35px;
text-align: center;
top:100px;
height:30px;
}
.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;
min-width:100%;
min-height:90px;
}
#Les-Partenaires{
padding-top: 90px;
min-height: 2100px;
height: auto;
float:left;
display:block;
}
#Les-Partenaires ul{
float: left;
width: 50%;
margin: 25px 25%;
padding: 0;
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.ars a,
#Les-Partenaires ul li.asei a,
#Les-Partenaires ul li.unafam a{
text-decoration: none;
float:left;
width:100%;
}

#Les-Partenaires ul li.asei a #img,
#Les-Partenaires ul li.unafam a #img,
#Les-Partenaires ul li.ars a #img{
height:181px;
width:80%;
padding:0 10%;
background-size: 90%;
border-radius: 25px 25px 0 0;
}
#Les-Partenaires ul li.ars a p.texte, 
#Les-Partenaires ul li.asei a p.texte,
#Les-Partenaires ul li.unafam a p.texte{
min-height:180px;
float:left;
padding: 5%;
width:90%;
}
#Les-Partenaires ul li.unafam a p.fonction,
#Les-Partenaires ul li.ars a p.fonction,
#Les-Partenaires ul li.asei a p.fonction{
width:90%;
text-align:center;
text-transform: uppercase;
height:35px;
min-height:35px;
line-height: 35px;
}
#Les-Partenaires ul li.ars a p.lien-ars, 
#Les-Partenaires ul li.asei a p.lien-asei,
#Les-Partenaires ul li.unafam a p.lien-unafam{
width:90%;
text-indent: 25px;
float:left;
display:block;
margin:2.5% 5%;
line-height: 55px;
font-size:12px;
background-position: -1500px top;
background-repeat:  no-repeat;
background-size: cover;
text-decoration:none;
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: 0 top;
transition: all 0.8s ease;
}
#Infos-Utiles{
padding-top: 90px;
min-height: 4700px;
}
#Infos-Utiles .texte{
width:70%;
height:auto;
margin-right:30%;
}
#Infos-Utiles div.infos{
width:90%;
height:270px;
}
#Infos-Utiles h3{
font-family: "Assistant" ,sans-serif;
font-size:25px;
height:35px;
line-height:35px;
margin-top:50px;
}
#Infos-Utiles a{
width:90%;
text-indent: 25px;
float:left;
display:block;
margin:2.5% 5%;
line-height: 55px;
font-size:12px;
background-position: -1500px top;
background-repeat:  no-repeat;
background-size: cover;
text-decoration:none;
transition: all 0.8s ease;
}
#Infos-Utiles a:hover{
background-position: 0px top;
transition: all 0.8s ease;
}
#Temoignages{
padding-top: 90px;
min-height: 1050px;
}
div#temoignages-container{
width:80%;
margin:0 10%;
min-height:900px;
padding-top:50px;
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%;
min-height:350px;
}
div#Temoignages div#temoignages-container div.temoignage p.temoins{
width:90%;
text-align: right;
padding:5%;
}
div#Temoignages div#temoignages-container a.prev-temoignage{
z-index: 9999;
position: absolute;
top:365px;
left:-50px;
width:25px;
padding: 25px;
font-size: 35px;
transition: all 0.6s ease;
font-weight:300;
cursor:pointer;
margin-top: -97px;
float:left;
transition: all 0.6s ease;
}
div#Temoignages div#temoignages-container a.next-temoignage{
z-index: 9999;
position: absolute;
top:265px;
right:-100px;
float:right;
width:25px;
padding: 25px;
font-size: 35px;
transition: all 0.6s ease;
font-weight:300;
cursor:pointer;
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;
cursor:pointer;
text-indent:-15px;
float:left;
}
div#Temoignages div#temoignages-container a.next-temoignage:hover{
font-weight:600;
cursor:pointer;
text-indent:15px;
transition: all 0.2s ease;
}
#Coordonnees, #Pied-de-page{
padding-top: 100px; 
width:100%;
margin:0;
float:left;
min-height:420px;
padding-bottom: 200px;
}
#Coordonnees a{
width:100%;
float:left;
margin:25px 6.5px;
height:auto;
display:block;
text-align: center;
padding:15px;
border-radius: 25px 25px 25px 0  ;
}
#Coordonnees a,#Pied-de-page a{
text-decoration:none;
}
#Coordonnees h2.sous-titre{
min-height: 50px;
min-width: 70%;
border:0;
margin-right: 10%;
font-family: "Assistant" ,sans-serif;
font-weight: 200;
margin-top:80px;
padding:25px;
margin-bottom: 40px;
display:block;
float:left;
}
#Coordonnees div.texte{
margin-top:90px;
width:70%;
}
#Coordonnees p.horaires{
margin-left: 30px;
line-height: 45px;
}
#Coordonnees p.animateur,
#Coordonnees p.responsable{
margin-left:30px;
line-height:45px;
width:70%;
color:rgb(44,142,198);
}
#Coordonnees .droite iframe{
width:60%;
height:70%;
margin:0 10%;
margin-top:100px;
min-height:280px;
}
#Coordonnees .section, #Pied-de-page .section{
widt:90%;
margin:0 5%;
display:block;
height:auto;
}
#Coordonnees .section{
min-height:1000px;
}
#Pied-de-page .section{
min-height:900px;
}
#Pied-de-page .gauche{
float:left;
width:100%;
height:auto;
}

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

#Pied-de-page.apostrophe-haut,
#Pied-de-page .apostrophe-bas{
font-family: "Space Grotesk", sans-serif;
font-weight:700;
color:rgb(250,181,0);
height:35px;
line-height:35px;
}
#Pied-de-page .extrait{
width:55%;
font-family: "Forte MT";
color:rgb(255,255,255);
font-size:27px;
height:auto;
}
#Pied-de-page{
background-color: rgb(44,142,198);
}
div#Pied-de-page ul#sous-nav,
div#Pied-de-page p.texte-reseaux{
margin-top:200px;
}
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{
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);
width:70%;
}
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 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);
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;
}
.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;}
}