/*
Theme Name: ECOLE
Theme URI: http://www.ecoledelamer.com
Author: Olivia COULON
Author URI: www.olivia-coulon.com
Description: site de l'ECOLE de la mer
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: ecole de la mer, association, environnement, littoral
Text Domain: ECOLE de la mer

*/


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

html {
font-family : "robotolight";
  color : black;
height : 100%;
margin-top : 0 !important;
}


* {
    margin  : 0;
    border  : 0 none;
    padding : 0;
    -webkit-box-sizing : border-box;
       -moz-box-sizing : border-box;
            box-sizing : border-box;
}

@font-face {
    font-family: 'robotolight';
    src: url('fonts/roboto-light-webfont.eot');
    src: url('fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/roboto-light-webfont.woff2') format('woff2'),
         url('fonts/roboto-light-webfont.woff') format('woff'),
         url('fonts/roboto-light-webfont.ttf') format('truetype'),
         url('fonts/roboto-light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
min-height : 100%;
margin, padding : 0;
position : relative;
}

.wrapper{
  width: 75%;
  margin: 0 auto;
}


a{
text-decoration : none;
}

a:hover{
text-decoration : none;
}

#header{
	margin-top : 0;
	background : url("images/fond-header.jpg") no-repeat ;
	-webkit-background-size: cover; /* pour anciens Chrome et Safari */
 	background-size: cover; /* version standardisée */
  	-moz-background-size: cover; /* pour Firefox */
        -o-background-size: cover; /* pour Opera */
	height : 250px;
}

.bandeau{
top : 0;
height : 500px;
background : center no-repeat;
background-size : cover;
-webkit-background-size : cover;
}


#actus{
position : absolute;
  margin-top : 80px;
  margin-left : 100px;
  width : 40%;
  min-width : 300px;
  background-color: white;
  opacity : 0.75;
  padding : 20px;
}

#titre-rubrique{
  color : #595a5a;
  font-size : 1.5em;
  text-transform : uppercase;
  font-weight : bold;
  padding-bottom : 10px;
}

#bandeau1{
  color : #9a9ca0;
  text-transform : uppercase;
  font-weight : bold;
  font-size : 1.5em;
  text-decoration : none;
}

#bandeau2{
  font-style : italic;
  padding-top : 5px;
text-transform : none;
font-size : 1.2em;
}

#article2, #article3, #article4, #article5{
  text-align : center;
  line-height : 2.255em;
  padding-bottom : 35px;
width : 75%;
margin : 0 auto;
}

#article1{
 text-align : justify;
  line-height : 2.255em;
  padding-bottom : 35px;
width : 75%;
margin : 0 auto;
}

#article1, #article2, #article3, #article4, #article5{
  padding-bottom : 60px;
}

#article1 p{
line-height : 2em;
font-size : 1.3em;
color : black;
}

.titre-rubrique{
  color : #15b1f3;
  text-transform : uppercase;
  font-size : 2em;
  font-weight : bold;
  padding-top : 35px;
  padding-bottom : 25px;
}


#article1 p{
text-transform : none;
}

ul, ol{
list-style-type : none;
}

#nav-principal{
	margin, padding : 0;
	width : 100%;
	text-align : center;
}

#nav-principal ul li{
	text-align : center;
	background-color : #5dc1e8;
	height : 150px;
	font-size : 1em;
        line-height: 30px;
        vertical-align: top;
        display: inline-block;
        width : 115px;
	padding-top : 1em
}

#nav-principal ul li:nth-child(1):hover{
font-size : 1em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 115px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_presentation-lasso.png') center;
background-repeat: no-repeat;
background-size : 100%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(2):hover{
font-size : 1em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 115px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_edu-projets.png') center;
background-repeat: no-repeat;
background-size : 95%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(3):hover{
font-size : 1em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 115px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_conf.png') center;
background-repeat: no-repeat;
background-size : 95%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(4):hover{
font-size : 1em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 115px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_expos.png') center;
background-repeat: no-repeat;
background-size : 95%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(5):hover{
font-size : 1em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 115px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_pecheur-projets.png') center;
background-repeat: no-repeat;
background-size : 100%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li a{
color : white;
}

#apropos, #nosmissions, #nousrejoindre{
font-size : 2.4em;
margin-top : 20px;
text-align : center;
width : 100%;
}

#h2-index-actus{
font-size : 2em;
font-weight : bold;
text-transform : uppercase;
padding-bottom : 10px;
}

#bandeautitre:link, #bandeautitre:visited, #bandeautitre:active{
color : gray;
}

#bandeautitre:hover{
color : #2E2E35;
}

h1{
  width: 75%;
  font-size : 1.25em;
  text-transform : uppercase;
  font-weight : bold;
  color : #15b1f3;
  margin : 0 auto;
  text-align: center;
  padding-top : 12px;
  padding-bottom : 40px;
}


.top_link{
  position : fixed;
  right : 100px;
  bottom : 50px;
  padding : 20px;
  background-color : #5dc1e8;
  border-radius : 100px;
  -moz-border-radius : 100px;
  -webkit-border-radius : 100px;
  opacity : 0.7;
  z-index : 2000;
}

a.top_link{
  text-decoration :none;
  color : white;
  font-size : 0.8em;
}


#logo{
background-repeat: no-repeat;
background-size : 45%;
width : 300px;
height : 130px;
position: absolute;
left: 10%;
top: 30px;
}

#facebook-header{
  position : absolute;
  background-size : 100%;
  width : 31px;
  height : 31px;
  top : 30px;
  right : 280px;
}

#facebook-header:hover{
    transform: scale(1.2); 
    transition: ease 0.5s;
}

#article2, #article4{
background-color : #DDDBDC;
width : 100%;
  padding-left : 30px;
padding-right : 30px;
margin-bottom : 30px;
  margin : 0 auto;
min-height: 650px;
}


#div-article2 h3{
text-transform : uppercase;
color : white;
font-weight : bold;
font-size : 1.3em;
margin-bottom : 20px;
padding-left : 5px;
padding-right : 5px;
}


.div-article2-float{
  width: 32.5%;
  float : left;
  line-height : 1.2em;
  margin : 0 auto;
margin-bottom : 10px;
margin-left : 1px;
margin-right : 1px;
}


#div-article2{
text-align : center;
margin : 0 auto;
width : 100%;
}

.div-article2-float p, #except p{
   color : #15b1f3;
   line-height : 1.3em;
   font-weight : bold;
   overflow: hidden;
  -o-text-overflow: ellipsis; /* pour Opera 9 */
  text-overflow: ellipsis;
font-size : 120%;
}


#nousrejoindre{
display : inline-block;
}

#article3 ul li{
line-height : 1.5em;
font-size :  140%;
color : black;
}

#article3-nousrejoindre p{
color : #2990B1;
font-weight : bold;
text-align : center;
font-size :150%;
line-height : 1.5em;
width : 100%;
margin : 0 auto;
}

#article3-nousrejoindre{
padding-top : 30px;
}

#box-footer{
background-color : #2f90b3;
position : absolute;
width : 100%;
left : 0;
bottom : 0;
}


footer h5{
color : white;
font-size : 1.2em;
font-style : italic;
text-align : center;
padding-top : 15px;
}


#nav-footer ul{
padding-top : 10px;
text-align : center;
}


#nav-footer ul li{
text-align : center;
background-color : transparent;
display : inline-block;
text-decoration : none;
font-size : 0.9em;
height : 40px;
text-transform : uppercase;
width : auto;
padding :20px;
}

#nav-footer ul li a{
color : white;
}

#copyright-footer{
text-align : center;
padding-top : 30px;
line-height : 0.5em;
color : white;
font-size : 0.8em;
padding-bottom : 5px;
}

#copyright-footer a{
color : white;
font-style : italic;
font-size : 0.9em;
width : auto;
}


#nav-footer ul li:hover{
text-transform :  none;
background : none;
background-size : 0%;
transition: ease 0.1s;
display : inline-block;
text-decoration : none;
font-size : 0.88em;
font-weight : bold;
height : 40px;
text-transform : uppercase;
width : auto;
padding :20px;
}

#contact{
  background : url("../images/fond-contact.jpg") no-repeat 75%;
background-position : top;
   -webkit-background-size: cover; /* pour anciens Chrome et Safari */
   background-size: cover; /* version standardisée */
   height : 1664px;
   width : 100%;
position : relative;
}


#contact-wrapper{
 background-color : #6fcdef;
background-position : top;
  opacity : 0.75;
  height : 1600px;
width : 75%;
text-align : left;
margin : 0 auto;
position : absolute;
top : 0;
}

#contact h4{
 color : white;
  font-weight : bold;
  font-size : 1.3em;
  text-align : left;
  line-height : 1.25em;
  margin-top : 20px;
  margin-bottom : 15px;
  padding-left : 25px;
  background-color : rgba(255, 255, 255, 0.37);
}

#formulaire p, #formulaire span{
z-index : 40;
position : relative;
text-align : center;
width : 100%;
padding-bottom : 5px;
font-size : 1.1em;
margin : 0 auto;
margin-top : -10px;
}

#captcha{
margin-top : 5px;
}

#telephone{
padding-bottom : 20px;
}


#adresse{
padding-top : 80px;
padding-bottom : 20px;
height : 400px;
}

form input{
  line-height : 2em;
  width : 35%;
min-width : 250px;
  padding-left : 10px;
z-index : 45;
position : relative;
margin : 0 auto;
text-align : center;
}

form textarea{
  line-height : 1.1em;
    width : 35%;
min-width : 250px;
  padding-left : 10px;
  height : 180px;
z-index : 45;
position : relative;
margin : 0 auto;
text-align : center;
padding-top : 10px;
}

form input[type="submit"]{
  margin-top : 60px;
  color : white;
  font-size : 1.3em;
  line-height : 1.5em;
  background-color : rgba(255, 255, 255, 0);
  border : 1px solid white;
width : 400px;
text-align : center;
z-index : 40;
position : relative;
margin : 0 auto;
cursor : pointer;
}


#formulaire form input{
margin-top : 10px;
padding : 5px;
}

#formulaire form textarea{
margin-top : 10px;
padding : 5px;
}



.sous-titre-formu{
 font-size : 1.3em;
  color : white;
  text-transform : uppercase;
  display : block;
  padding-top : 30px;
  padding-bottom : 10px;
}

#captcha-span{
width : 290px;
margin-left : 10px;
padding : 5px;
}

#nouscontacter2 h2{
 font-size : 1.5em;
  padding-top : 20px;
  width : 100%;
  background-color: #2f90bb;
  opacity : 0.75;
  position : absolute;
  z-index : 1;
text-transform : uppercase;
color : white;
text-align : center;
margin : 0 auto;
padding-bottom : 15px;
font-weight : bold;
}

.details{
margin-left : 50px;
color : white;
font-size : 1.3em;
}

#logo-formulaire-enveloppe{
width : 60px;
height : 49px;
z-index : 50;
float :right;
margin-top : 8px;
margin-right : 440px;
 position : relative;
}

#logo-formulaire-adresse{
width : 30%;
padding-left : 60px;
z-index : 80;
position : relative;
opacity : 1;
}

#carte{
width : 45%;
max-height : 18%;
margin-bottom : 100px;
position : relative;
float : right;
padding-right: 70px;
margin-top : -18%;
}

#logo-formulaire-telephone{
width : 4%;
float : left;
margin-left : 50px;
margin-right : 20px;
}

#tel-p{
margin-top : 30px;
}

#telephone{
height : 130px;
}


#facebook-footer{
  position : absolute;
  background-size : 100%;
  width : 31px;
  height : 31px;
  bottom : 100px;
  right : 280px;
}

.titre-page{
text-align : center;
margin : 0 auto;
width : 100%;
color : #2a83ab;
font-size : 2.3em;
font-weight : bold;
padding-top : 10px;
margin-bottom : 30px;
padding-bottom : 10px;
text-transform : uppercase;
}

.degrade{
background-color : #f6fbfe ;
width : 100%;
height : auto;
padding-bottom : 40px;
}

#actu-complement{
text-align : center;
margin : 0 auto;
float : none;
width : 100%;
height : 800px;
}

#logo-page_pres{
text-align : center;
margin : 0 auto;
margin-top : 20px;
margin-bottom : 40px;
float : none;
width : 100%;
}

#logo-image-page-conf{
text-align : center;
margin : 0 auto;
width : 100%;
}

#logo-pageconf{
text-align : center;
margin : 0 auto;
margin-top : 20px;
margin-bottom : 40px;
float : none;
width : 400px;
}

#logo-pageexpo{
text-align : center;
margin : 0 auto;
float : none;
height : 60%;
width : 60%;
min-width : 300px;
}


#figure-image-a-propos, #figure-image-nos-missions, #figure-image-nous-rejoindre{
text-align : center;
margin : 0 auto;
width : 100%;
}


#logo-apropos, #logo-nosmissions, #logo-nousrejoindre{
margin-top : 20px;
margin-bottom : 40px;
float : none;
min-width : 30%;
height : auto;
}

.sous-titre{
text-transform : uppercase;
font-weight : bold;
color : #15b1f3;
font-size : 1.3em;
text-align : left;
padding-left : 40px;
margin-bottom : 25px;
border-bottom : 1px dotted #15b1f3;
}

.presentation{
font-size : 1.1em;
line-height : 1.3em;
text-align : justify;
padding-bottom : 15px;
}

#titre-proch-conf{
  text-transform : uppercase;
  font-weight : bold;
  color : #15b1f3;
font-size : 1.3em;
text-align : left;
padding-left : 40px;
margin-bottom : 35px;
margin-top : 80px;
border-bottom : 1px dotted #15b1f3;
}

#date, #date2{
color : #2a83ab;
font-weight : bold;
text-align : center;
margin : 0 auto;
width : 100%;
font-size : 1.5em;
}

#titre-conf, #titre-conf2{
text-align : center;
margin : 0 auto;
text-transform : uppercase;
color : #2fa9d4;
font-size : 1.3em;
padding-top : 25px;
line-height : 1.5em;
font-weight : bold;
width : 80%;
padding-bottom : 15px;
}

#intervenants, #intervenants2{
text-align : center;
margin : 0 auto;
width : 100%;
color : #939393;
font-size : 1.1em;
font-weight : bold;
line-height : 1.6em;
width : 60%;
padding-bottom : 20px;
}

#descriptif{
text-align : justify;
padding-left : 40px;
padding-right : 40px;
padding-top : 30px;
font-size : 1.3em;
line-height : 1.5em;
padding-bottom : 60px;
}

#mention{
text-align : center;
padding-left : 40px;
padding-right : 40px;
font-size : 1.1em;
line-height : 1.25em;
color : #939393;
margin-bottom : 50px;
}

#article-mentions a:link, #article-mentions a:active, #article-mentions a:visited{
color : black;
}

#crea:hover, #crea:focus, #crea:active{
color : #5dc1e8!important;
}

#presentation-expos{
font-size : 1.1em;
line-height : 1.3em;
padding-bottom : 50px;
text-align : justify;
margin : 0 auto;
padding-left : 20px;
padding-right : 20px;
}


#liste-anim, #liste-expos{
height : auto;
text-align : center;
margin-bottom : 30px;
}


.titre-expo{
line-height : 2em;
text-transform : uppercase;
color : white;
font-size : 0.75em;
}

.titre-expobis{
line-height : 2em;
text-transform : uppercase;
color : white;
font-size : 0.75em;
width : auto;
text-align : center;
margin : 0 auto;
}

.img_actu{
text-align : center;
margin : 0 auto;
padding-bottom : 30px;
}

#image-actu{
width : 30%;
padding-top : 10px;
padding-bottom : 15px;
min-width : 250px;
}

.image-actu-asso{
width : 40%;
height : auto;
min-width : 200px;
}

#actu-partenaires-life{
width : 500px;
}

#affiche img, #affiche2 img{
width : 40%;
min-width : 300px;
} 

#affiche, #affiche2{
width : 100%;
margin : 0 auto;
text-align : center;
} 


.sstitre{
text-align : left;
color : #939393;;
padding-top : 15px;
padding-bottom : 15px;
font-size : 1.3em;
text-transform : uppercase;
}

.presentation2{
padding-bottom : 15px;
padding-top : 30px;
  font-style : italic;
font-size : 1.1em;
font-weight : bold;
text-align : center;
}

.liste-presentation li{
text-align : center;
font-weight : bold;
margin : 0 auto;
width : 100%;
line-height : 1.2em;
}

.article-actu{
padding-top : 30px;
padding-bottom : 5px;
}

.presentation3{
padding-top : 30px;
  font-style : italic;
font-size : 1.2em;
font-weight : bold;
text-align : center;
text-transform : uppercase;
}


#article2-lasso, #article3-lasso, #article4-lasso, #article5-lasso{
text-align : center;
line-height : 2.255em;
padding-bottom : 35px;
width : 75%;
margin : 0 auto;
}

#article1-lasso{
text-align : center;
  line-height : 2.255em;
  padding-bottom : 35px;
width : 75%;
margin : 0 auto;
}

#article1-lasso, #article2-lasso, #article3-lasso, #article4-lasso, #article5-lasso{
  padding-bottom : 60px;
}

#article1-lasso p{
text-align : justify;
line-height : 2em;
font-size : 1.3em;
color : black;
}

#article4-lasso{
padding-bottom : 30px;
}

.parag-asso{
margin-bottom : 20px;
}

#article2-lasso, #article4-lasso{
background-color : #DDDBDC;
width : 100%;
  padding-left : 30px;
padding-right : 30px;
margin-bottom : 30px;
  margin : 0 auto;
min-height: 550px;
}

.photo-presentation_asso{
width : 100%;
height : auto;
}

.phrase-missions{
font-weight : bold;
font-size : 1.5em;
}

#missions{
width : 75%;
margin : 0 auto;
}

#missions li{
display : inline-block;
font-size : 1.3em;
float : none;
text-align : justify;
margin-top : 30px;
width : 75%;
text-indent : 50px;
list-type-style : none;
line-height : 1.7em;
background : url('../images/puce-capsuleraie.png') no-repeat 0 0;
}

#article3-lasso h4{
font-size : 1.4em;
text-transform : uppercase;
text-align : left;
padding-bottom : 20px;
margin-top : 30px;
}

.images_adherents{
     display: table;
     width:2200px;
     -webkit-animation: slideAnim 45s ease 0s infinite;
        -moz-animation: slideAnim 45s ease 0s infinite;
         -ms-animation: slideAnim 45s ease 0s infinite;
          -o-animation: slideAnim 45s ease 0s infinite;
             animation: slideAnim 45s ease 0s infinite;
}

.images_adherents li{
display: table-cell; 
width : 2700px;
}

#article3-lasso{
overflow-x : hidden;
}
@keyframes slideAnim{
from,11%,to {margin-left:0;}
15%,26%{margin-left:-600px;}
30%,41%{margin-left:-900px;}
45%,56%{margin-left:-1200px;}
65%,76%{margin-left:-1500px;}
80%,91%{margin-left:-1800px;}
99,99%{margin-left:-2100px;}
}

#actions li{
font-size : 1.5em;
line-height : 1.3em;
text-align : left;
font-weight : bold;
width : 75%;
}

#actions{
display : block;
min-width : 70%;
margin-bottom : 15px;
}

.section-benevoles{
width : 100%;
position : relative;
display : block;
margin-top : 30px;
}

.reduction-article5{
width : 75%;
margin : 0 auto;
}

.benevoles-img{
float : right;
padding-left : 30px;
}

#accroche-benevoles{
color : #2f90b3;
font-size : 1.3em;
line-height : 1.4em;
text-align : justify;
display : block;
width : 100%;
padding-top : 30px;
margin-bottom : 15px;
}

.bouton{
display : block;
background-color : #c4c2c3;
padding : 10px;
text-transform : uppercase;
font-size : 1.3em;
text-align : center;
margin-bottom : 15px;
margin-top : 30px;
width : 200px;
color : black;
}

.bouton:hover, .bouton:active, .bouton:focus{
color : #2E2E35;
text-decoration : none;
}

#article5-lasso h4{
font-size : 1.8em;
text-align : center;
padding-bottom : 20px;
margin-top : 30px;
margin : 0 auto;
width : 100%;
}


.descriptif-actus-asso{
line-height : 2.255em;
text-align : justify;
font-size : 1.3em;
}

.img_edu{
text-align : center;
margin : 0 auto;
}

#article1-edu{
text-align : center;
line-height : 2.255em;
padding-bottom : 35px;
width : 75%;
margin : 0 auto;
}

.article-expo{
text-align : center;
line-height : 2.255em;
padding-bottom : 35px;
width : 75%;
margin : 0 auto;
}

#article1bis-edu{
text-align : center;
line-height : 2.255em;
padding-bottom : 35px;
width : 110%;
margin : 0 auto;
}



#article2-edu, #article3-edu, #article4-edu, #article5-edu{
text-align : center;
line-height : 2.255em;
padding-bottom : 35px;
width : 75%;
margin : 0 auto;
}

#article2-edu, #article4-edu, #article6-edu{
background-color : #DDDBDC;
width : 100%;
  padding-left : 30px;
padding-right : 30px;
margin-bottom : 30px;
  margin : 0 auto;
}


#article1-edu p{
text-align : center;
font-size : 1.4em;
line-height : 1.4em;
margin-bottom : 30px;
}

.anim, .expo{
background-color : #5dc1e8;
margin-right : 60px;
margin-bottom : 80px;
border : #5dc1e8 4px solid;
display : inline-block;
}

.anim, .expo{
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
.anim:hover, .expo:hover{
    -moz-transform: scale(1.10);
    -webkit-transform: scale(1.10);
    -o-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
opacity : 1;
}

.dossier-edu li, #img_brochure{
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

.dossier-edu li:hover, #img_brochure:hover{
    -moz-transform: scale(1.10);
    -webkit-transform: scale(1.10);
    -o-transform: scale(1.10);
    -ms-transform: scale(1.10);
    transform: scale(1.10);
}

#img_brochure{
width: 30%;
min-width : 250px;
}

#logo-jmo{
width: 45%;
min-width : 300px;
}

#affiche-jmo{
width: 45%;
min-width : 250px;
}

.titre-expo{
line-height : 2em;
text-transform : uppercase;
color : white;
font-size : 0.75em;
width : 203px;
}

.mentions-edu{
margin-top : 20px;
line-height: 2.255em;
padding-bottom: 35px;
text-align : center;
}

#rectorat{
font-style : italic;
text-align : center;
}

#article2-edu p{
text-align : center;
font-size : 1.3em;
line-height : 1.4em;
margin-bottom : 30px;
}

.dossier-edu{
width : 100%;
margin-bottom : 40px;
}

.dossier-edu li{
display: block;
background-color: #58c9f5;
padding: 10px;
text-transform: uppercase;
font-size: 1.4em;
text-align: center;
width: 300px;
min-width : 40%;
color: white;
float : none;
margin : 0 auto;
margin-top : 30px;
margin-bottom : 10px;
text-align : center;
}

#descriptif_jmo{
text-align : justify;
font-size : 1.3em;
line-height : 1.5em;
width : 75%;
margin : 0 auto;
margin-bottom : 50px;
margin-top : 30px;
}

#section-jmo{
float : right;
width : 400px;
}

#section-jmo p{
padding-left : 10px;
text-align : justify;
font-size : 1.2em;
}

#section-jmo div{
margin-top : 20px;
text-align : center;
font-size : 1.8em;
color : #58c9f5 ;
margin-bottom : 32px;
font-weight : bold;
}

#photo-jmo{
width : 105%;
min-width : 200px;
}

#grde-section_jmo{
width : 75%;
margin : 0 auto;
margin-top : 40px;
margin-bottom : 10px;
text-align : center;
}

#ssdescriptif-jmo{
display : block;
text-align : justify;
font-size : 1.3em;
line-height : 1.5em;
width : 75%;
margin : 0 auto;
padding-top : 15px;
}

#ssdescriptif-jmo div{
display: block;
background-color: #58c9f5;
padding: 10px;
font-size: 1.4em;
text-align: center;
width: 300px;
min-width : 40%;
color: white;
float : none;
margin : 0 auto;
margin-top : 30px;
margin-bottom : 10px;
text-align : center;
}

#article5-edu p{
text-align : justify;
font-size : 1.3em;
line-height : 1.6em;
width : 75%;
margin : 0 auto;
padding-top : 15px;
}

.titre-rubriquebis{
text-align : left;
color : #2f90bb;
font-size : 1.6em;
text-transform : uppercase;
font-weight : bold;
}

.ressourcespedago li{
display: block;
background-color: #58c9f5;
padding: 10px;
font-size: 1.3em;
text-align: center;
width: 80%;
color: white;
float : none;
margin : 0 auto;
margin-top : 10px;
margin-bottom : 10px;
text-align : center;
}

#article5-edu h3{
margin-top : 50px;
margin-bottom : 10px;
}

#article6-edu h3{
text-align : center;
}

#article6-edu{
text-align : center;
padding-bottom : 60px;
}

#section1-metiers p{
text-align : justify;
font-size : 1.3em;
line-height : 1.6em;
width : 75%;
margin : 0 auto;
}

#photo-metiers{
text-align : center;
margin : 0 auto;
width : 75%;
}

#section1-metiers h4{
text-align : left;
padding-bottom : 15px;
margin-top : 50px;
padding-left : 30px;
}

.annexes-metiers{
text-align : left;
color: #58c9f5;
font-size : 1.5em;
font-weight : bold;
margin-bottom : 20px;
}

.annexes-actus{
text-align : center;
color: #58c9f5;
font-size : 1.5em;
font-weight : bold;
margin-bottom : 20px;
}

.img-actu{
height : 500px;
width : auto;
}

#article-mentions{
text-align : justify;
line-height : 2.255em;
padding-bottom : 35px;
width : 75%;
margin : 0 auto;
font-size : 1.1em;
}

#navigation{
display : none;
}

@media screen and (max-width: 880px){
.wrapper{
width : 100%;
}

.top_link{
display : none;
}

#actus{
margin-left : 30px;
}

#bandeau1, #bandeau2{
font-size : 1em;
}

#logo-apropos, #logo-nosmissions, #logo-nousrejoindre, #logo-pageconf{
position : relative;
text-align : center;
width : 250px;
margin : 0 auto;
}

#logo-formulaire-enveloppe{
display : none;
}

#article1 p, #article1-lasso p, .phrase-missions, #article3-lasso h4{
font-size : 1em;
}

.benevoles-img{
float : none;
padding : 10px;
width : 250px;
}

#actions{
width : 100%;
padding : 5px;
}

#actions li, #accroche-benevoles, #article5-lasso h4, #article1-edu p{
font-size : 1em;
text-align : justify;
width : 100%;
}

#missions li{
font-size : 1em;
width : 100%
}

.image-actu-asso{
width : 300px;
}

.descriptif-actus-asso{
font-size : 1em;
line-height : 1.1em;
}


#article1bis-edu{
padding-bottom : 5px;
}

.mentions-edu{
margin-top : 5px;
padding-bottom : 10px;
}

footer h5{
font-size : 0.9em;
}

#descriptif_jmo{
width : 100%;
font-size : 1em;
}

#section-jmo{
float : none;
width : 100%;
margin : 0 auto;
}

.dossier-edu li, #section-jmo p{
font-size : 1em;
}

.titre-rubrique{
font-size : 1em;
}

#ssdescriptif-jmo p, #article5-edu p, #section1-metiers p, .annexes-metiers{
font-size : 0.8em;
}

#photo-jmo{
width : 250px;
margin : 0 auto;
}

#ssdescriptif-jmo div, .ressourcespedago li{
width : 250px;
font-size : 1em;
}

#liste-anim{
margin-bottom : 0;
}

#photo-metiers{
width : 280px;
}

h4.titre-rubriquebis{
text-align : left;
padding-bottom : 5px;
margin-top : 30px;
font-size : 1em;
padding-left : -80px;
}


#nav-footer{
display : none;
}

#copyright-footer a, #copyright-footer{
font-size : 0.7em;
}

#div-article2 h3{
font-size : 1em;
padding-bottom : 5px;
}

.div-article2-float p{
font-size : 1em;
}

#logo-formulaire-adresse, #logo-formulaire-telephone{
display : none;
}

#adresse{
height : 300px;
}

.bouton{
font-size : 1em;
width : 250px;
line-height : 1.3em;
}

#contact-wrapper{
width : 100%;
height : 1500px;
}

#contact{
height : 1500px;
}

#formulaire p, #formulaire span{
font-size : 0.9em;
padding-left : 5px;
padding-right : 5px;
}

#article3 ul li, #article3-nousrejoindre p{
font-size : 1em;
margin-bottom : 15px;
}

form input[type="submit"]{
width : 300px;
}

.div-article2-float{
width : 100%;
float : none;
margin-bottom : 20px;
}

h1{
  width: 60%;
  font-size : 1em;
  text-transform : uppercase;
  font-weight : bold;
  color : #15b1f3;
  margin : 0 auto;
  text-align: center;
  padding-top : 12px;
  padding-bottom : 40px;
}

#facebook-header {
    position: absolute;
    background-size: 100%;
    width: 31px;
    height: 31px;
    top: 30px;
    right: 10%;
}

#carte{
display : none;
}

#logo{
background-repeat: no-repeat;
background-size : 45%;
width : 300px;
height : 100px;
position : relative;
text-align : center;
margin : 0 auto;
margin-bottom : 50px;
}

#nav-principal{
display : none;
}

.titre-page{
font-size : 1.2em;
line-height : 1.4em;
width : 80%;
}

#conf, #conf2{
text-align : center;
width : 100%;
margin : 0 auto;
}

.presentation{
margin : 0 auto;
width : 90%;
font-size : 1em;
line-height : 1.5em;
}

#descriptif{
margin-left : 5px;
margin-right : 5px;
margin : 0 auto;
width : 100%;
font-size : 1em;
line-height : 1.5em;
}

#date, #date2{
font-size : 1em;
width : 90%;
}

#logo-pageexpo{
width : 250px;
height : auto;
}

.expo{
float : none;
width : 275px;
height : auto;
background-color: #5DC1E8;
border: 5px solid #5DC1E8;
margin : 0 auto;
margin-top : 20px;
margin-bottom : 20px;
}

.sstitre, .presentation2{
text-align : center;
margin : 0 auto;
width : 90%;
}

.img_actu img{
width : 270px;
margin : 0 auto;
height : auto;
}

#actu-partenaires-life{
width : 350px!important;
height : auto;
margin : 0 auto;
}

.presentation3{
font-size : 1em;
width : 90%;
margin : 0 auto;
}

#article-mentions{
font-size : 1em;
line-height : 1.3em;
margin : 0 auto;
width : 90%;
}




#navigation{
display : block;
}


#navigation ul{
    /* maximum height */
    max-height: 20em;
    overflow: visible;
    /* translate with hardware acceleration */
    
    transform: translateZ(0);
    -webkit-transition: max-height .4s;
    transition: max-height .4s, overflow .4s;
    will-change: max-height, overflow;
    /* global styles */
    
    margin: 0;
    padding: 0;
    list-style: none;
    position : relative;
    z-index : 50;
  }

  #navigation ul li a{
    display: inline-block;
    padding: 1.2rem;
    color: #fff;
    background: #5dc1e8;
    text-decoration: none;
    margin-bottom: 2px;
    font-size: 1.2em;
    text-align : center;
    width : 100%;
    text-transform : uppercase;
  }

  #navigation a:hover,
  #navigation a:focus,
  #navigation a:active{
    background: #4cb0d7;
  }
  /* Theming closed nav */
  
  #navigation.is-closed ul{
    max-height: 0;
    overflow: hidden;
  }
  /* Global styling nav button */
  
  #navigation > button{
    position: absolute;
    top: 25px;
    left: 6%;
    z-index: 1;
    height: 3rem;
    width: 3rem;
    background-color: transparent;
    padding: 0;
    outline: 0;
    border: 2px solid #5dc1e8;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
  }
  /*  Removing Firefox's dotted outline on button */
  
  #navigation > button::-moz-focus-inner{
    border: 0;
  }
  #navigation > button::after,
  #navigation > button::before{
    content: "";
    position: absolute;
    top: 15%;
    right: 40%;
    bottom: 15%;
    left: 40%;
    background-color: #5dc1e8;
    border-radius: 10px;
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
  }
  #navigation > button::before{
    top: 40%;
    right: 15%;
    bottom: 40%;
    left: 15%;
  }
  /* Theming opened nav button */
  
  #navigation:not(.is-closed) > button,
  #navigation:not(.is-closed) > button::before{
    -webkit-transform: rotate(90deg) translateZ(0);
    -ms-transform: rotate(90deg) translateZ(0);
    transform: rotate(90deg) translateZ(0);
  }
  /* Hide alternate text except from screen readers */
  
  .visually-hidden{
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
  }

html {
font-family : "robotolight";
  color : black;
height : 100%;
margin-top : 0 !important;
}


}

@media only screen and (min-width: 881px) and (max-width: 1250px){

#logo-formulaire-enveloppe{
display : none;
}

.top_link{
display : none;
}


h1{
  width: 60%;
  font-size : 1em;
  text-transform : uppercase;
  font-weight : bold;
  color : #15b1f3;
  margin : 0 auto;
  text-align: center;
  padding-top : 12px;
  padding-bottom : 40px;
}

#facebook-header {
    position: absolute;
    background-size: 100%;
    width: 31px;
    height: 31px;
    top: 30px;
    right: 10%;
}

#nav-principal ul li{
	text-align : center;
	background-color : #5dc1e8;
	height : 150px;
	font-size : 1em;
        line-height: 30px;
        vertical-align: top;
        display: inline-block;
        width : 90px;
	padding-top : 1em
}

#nav-principal ul li:nth-child(1):hover{
font-size : 0.9em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 90px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_presentation-lasso.png') center;
background-repeat: no-repeat;
background-size : 100%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(2):hover{
font-size : 0.9em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 90px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_edu-projets.png') center;
background-repeat: no-repeat;
background-size : 95%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(3):hover{
font-size : 0.9em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 90px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_conf.png') center;
background-repeat: no-repeat;
background-size : 95%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(4):hover{
font-size : 0.9em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 90px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_expos.png') center;
background-repeat: no-repeat;
background-size : 95%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#nav-principal ul li:nth-child(5):hover{
font-size : 0.9em;
line-height: 30px;
vertical-align: top;
display: inline-block;
width : 90px;
text-align : center;
background-color : #5dc1e8;
height : 215px;
text-decoration:none;
text-transform : uppercase;
background : url('../images/illu_pecheur-projets.png') center;
background-repeat: no-repeat;
background-size : 100%;
transition: ease 0.6s;
margin-bottom : -30px;
}

#navigation{
display : none;
}

html {
font-family : "robotolight";
  color : black;
height : 100%;
margin-top : 0 !important;
}

}