.main-header,
.main-nav {
display:flex;
flex-direction:column;}
input[type=text], select { 
	font-family:Helvetica,Arial,sans-serif;
width: 100%;    
padding: 8px 20px;    
margin: 8px 0;    
border: 1px solid #ccc;    
border-radius: 4px;    
box-sizing: border-box;}
input[type=text-message], select { 
	font-family:Helvetica,Arial,sans-serif;   
width: 100%; 
height:110px;    
padding: 8px 20px;    
margin: 8px 0;    
border: 1px solid #ccc;    
border-radius: 4px;    
box-sizing: border-box;}
textarea {
width:100%;
height:150px;
padding: 8px 20px;    
margin: 8px 0;  
border: 1px solid #ccc;
border-radius:4px;
box-sizing: border-box}
input[type=submit] {   
display:flex; 
background-color: #515151;    
color: white;    
align-self: center;
padding: 14px 20px;    
margin-left:auto;    
border: none;    
border-radius: 4px;
cursor:pointer;  
   
}
input[type=submit]:hover {    background-color: #cccccc;}

.formcp { 
display:flex;
flex-direction:column;
padding: 2% 5% 2% 5%;
margin-right:0; 
color:fff;
width:100%; 
}
.formcp a { color:#ffffff;}
.txtcontact {color: #FFFFFF}
body {
	font-family:Helvetica,Arial,sans-serif;
	color: #515151;
	background: #fff;
	margin:none;
	padding:none;
	line-height: 1.6;
}
.modalDialog {
        position: fixed;
        font-family:Helvetica,Arial,sans-serif;  
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }
	    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }
	    .modalDialog > div {
        width: 80%;
        position: relative;
        margin: 10% auto;
        padding: 10px 30px 30px 30px;
        background: #fff;

    }
	.closemodal {
		font-size:25px;
        background: none;
        color: #cccccc;
        line-height: 25px;
        position: absolute;
        right: 12px;
        text-align: center;
        top: 10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;

    }

    .closemodal:hover { color: #515151; }
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* 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.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.logo {
align-self:center;
margin: .2em 0 .2em 0;
    animation: fadeintop 1s;
    -moz-animation: fadeintop 1s; /* Firefox */
    -webkit-animation: fadeintop 1s; /* Safari and Chrome */
    -o-animation: fadeintop 1s; /* Opera */
}
.main-header {
width:100%;
/*display: flex;
flex-direction: column;
justify-content: center;*/ 
}
.equipe a{
color: #515151;
text-decoration:none;}
.equipe a:hover{
color: #cccccc;}
.main-nav {
list-style:none;
padding-left:0px;
}
.main-nav a{
display:block;
font-weight:300;
font-size: .85em;
text-align:center;
padding: .4em;
margin:auto;
text-decoration:none;
padding: 10px;
}
.main-nav-item a{
color: #515151;
border-bottom: 1px solid #ebecec;
}

.main-nav-item a:hover{
border-bottom-color:#8cc63e; }
.main-nav-item li {
margin: 0 .65em 0 .65em;
text-align:center;
}

.main-nav-item a:visited {
color: #515151;
}
.main-nav-item a:hover {
    color:#CCCCCC;
}
.main-nav-item a:active {
    color:#8cc63e;
}
.en-ca a{
color:#515151;
font-size:0.7em;
text-decoration:none;
float:right;
}
.en-ca a:hover{
color:#ccc;
}
.integrite {
text-align:center;
width: 90%;
margin:auto;
}
.proactif {
text-align:center;
width: 90%;
margin:auto;
}
.partenaria {
text-align:center;
width: 90%;
margin:auto;
}


.titrevert {
text-align:center;
font-size: 38px;
color: #8cc63e;
}
.titrevertmodal {
text-align:center;
font-size: 24px;
color: #8cc63e;
}
.titreblanc {
text-align:center;
font-size: 38px;
color: #fff;
}
.valeurs {
padding:10px 10px 50px 10px;
margin-bottom:0px;
text-align:justify;

}
.equipe {
padding:10px 10px 50px 10px;
margin-bottom:0px;
text-align:justify;
}
.txtgestionnaire {
padding:10px 10px 50px 10px;
margin-bottom:0px;
text-align:center;
width:90%;
}
.mission-box {
background-color:#8cc63e;
color:#fff;
padding:10px 10px 30px 10px;
margin-bottom:0px;
}
.mission {
padding:10px 10px 50px 10px;
text-align:center;
margin:auto;

}
.banner2 {
background-image: url(../img/banner2.jpg);

background-position: center;
background-repeat: no-repeat;
background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
height: 500px;

}
.banner {
background-image: url(../img/banner-bg.jpg);

background-position: top;
background-repeat: no-repeat;
background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
height: 350px;
line-height:1;
}
.bannerb { 
padding-top:2em;
text-align:center;
font-size: 1.75em;
color: #fff;
background-color:rgba(140, 198, 62, 0.7);
height:50%;

}
.contact {
width:100%;
color:fff;
background-image: url(../img/contact-bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
display: flex;
text-align:justify;
}
.contactbox { 
display:flex;
flex-position:column;
}

.contactb {
display:none;
}
.footer {
width:100%;
height:150px;
text-align:center;}
.partenaires {
text-align:center;
padding-top: 1em;
}
.soumission{
background-color: #8cc63e;  
color:#FFFFFF;     
padding: 0px;    
margin: 0;    
border: none;    
border-radius: 5px;
text-align:center;
text-decoration:none;
height:fixed;

/*box-shadow: 1px 1px 5px #ccc;*/
}
.soumission a {
color: #fff;    
padding: 10px;    
text-decoration:none;
background-color: #8cc63e;
border-radius: 5px;
     -webkit-transition: all .3s ease-in-out;
    -webkit-transform: scale(1);
    -ms-transition: all .3s ease-in-out;
    -ms-transform: scale(1);   
    -moz-transition: all .3s ease-in-out;
    -moz-transform: scale(1);
    transition: all .3s ease-in-out;
    transform: scale(1);
}
.soumission a:hover {
     -webkit-transition: all .3s ease-in-out;
    -webkit-transform: scale(1.1);
    -ms-transition: all .3s ease-in-out;
    -ms-transform: scale(1.1);   
    -moz-transition: all .3s ease-in-out;
    -moz-transform: scale(1.1);
    transition: all .3s ease-in-out;
    transform: scale(1.1);
	background-color: #8cc63e;
	border-radius: 5px;
color: #515151;    
padding: 10px;      
text-decoration:none;
box-shadow: 1px 1px 10px #ccc;
border-bottom-color:none;
}
.partenaires {
margin-right:auto;

  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 

}

@media (min-width: 769px) {
.modal {
    padding-top: 100px; /* Location of the box */
}
	    .modalDialog > div {
        width: 30%;
    }
@keyframes fadeintop {
    from {
        opacity:0;
		transform: translateY(-100%);
    }
    to {
        opacity:1;
		transform: translateY(0%);
    }
}
@-moz-keyframes fadeintop { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadeintop { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadeintop { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadein {
    from {
        opacity:0;
		
    }
    to {
        opacity:1;
		
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
.txtbanner {
opacity: 0;
    animation: fadein 2s ease-out .4s forwards;
    -moz-animation: fadein 2s ease-out .4s forwards; /* Firefox */
    -webkit-animation: fadein 2s ease-out .4s forwards; /* Safari and Chrome */
    -o-animation: fadein 2s ease-out .4s forwards; /* Opera */}

.maccueil {
opacity: 0;
    animation: fadeintop 1s ease-out .4s forwards;
    -moz-animation: fadeintop 1s ease-out .4s forwards; /* Firefox */
    -webkit-animation: fadeintop 1s ease-out .4s forwards; /* Safari and Chrome */
    -o-animation: fadeintop 1s ease-out .4s forwards; /* Opera */}
.mvaleurs {
opacity: 0;
    animation: fadeintop 1s ease-out .5s forwards;
    -moz-animation: fadeintop 1s ease-out .5s forwards; /* Firefox */
    -webkit-animation: fadeintop 1s ease-out .5s forwards; /* Safari and Chrome */
    -o-animation: fadeintop 1s ease-out .5s forwards; /* Opera */}
.mmission {
opacity: 0;
    animation: fadeintop 1s ease-out .6s forwards;
    -moz-animation: fadeintop 1s ease-out .6s forwards; /* Firefox */
    -webkit-animation: fadeintop 1s ease-out .6s forwards; /* Safari and Chrome */
    -o-animation: fadeintop 1s ease-out .6s forwards; /* Opera */}
.mequipe {
opacity: 0;
    animation: fadeintop 1s ease-out .7s forwards;
    -moz-animation: fadeintop 1s ease-out .7s forwards; /* Firefox */
    -webkit-animation: fadeintop 1s ease-out .7s forwards; /* Safari and Chrome */
    -o-animation: fadeintop 1s ease-out .7s forwards; /* Opera */}
.mcontact {
opacity: 0;
    animation: fadeintop 1s ease-out .8s forwards;
    -moz-animation: fadeintop 1s ease-out .8s forwards; /* Firefox */
    -webkit-animation: fadeintop 1s ease-out .8s forwards; /* Safari and Chrome */
    -o-animation: fadeintop 1s ease-out .8s forwards; /* Opera */}
.soumission {
opacity: 0;
    animation: fadeintop 1s ease-out .9s forwards;
    -moz-animation: fadeintop 1s ease-out .9s forwards; /* Firefox */
    -webkit-animation: fadeintop 1s ease-out .9s forwards; /* Safari and Chrome */
    -o-animation: fadeintop 1s ease-out .9s forwards; /* Opera */}
	
.main-header,
.main-nav,
.logo,
.footer
{
display: flex;
}
.main-nav a{
border-bottom-color: transparent;
}
.main-nav {
flex-direction: row;
padding: 5px;
}
.main-header {
flex-direction: column;
align-items: center;
justify-content: center;
}
.valeurs {
width:100%;
margin:auto;
flex-direction: row;
justify-content: space-around;
display:flex;
flex-items:center;
}
.mission {
width:50%}
.equipe {
width:50%;
margin:auto;
flex-direction: row;
justify-content: space-around;
display:flex;
flex-items:center;
}
.jsm {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
padding-left: 30px;
}
.jsm:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%); 

}
.fc {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 
padding-left: 30px;
}
.fc:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%); 

}
.integrite {

width: 28%;
margin:0 auto;
}
.proactif {

width: 28%;
margin:0 auto;
}
.partenaria {

width: 28%;
margin:0 auto;
}
.bannerb { 
font-size: 2.25em;
padding-top: 1em;
display: flex;
justify-content:center;
align-items:center;
}
.banner {
height: 550px;
background-attachment:fixed;
}

.partenaires {
margin-right:auto;
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%); 

}
.partenaires:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); 
  filter: grayscale(0%); 
}
.footer {
margin-right:auto;
margin-left:auto;
width:75%;
flex-direction: row;
align-items: center;
justify-content: center;}

}
@media (min-width: 1025px) {
.main-nav {
	flex-direction: row;
	align-self: center;
	}
.main-nav a{
border-bottom-color: transparent;
}
.main-header{
flex-direction: row;
justify-content: space-between;
width:65%;
margin:auto;
}
.valeurs {
width:65%;
margin:auto;
flex-direction: row;
justify-content: space-between;

}
.logo {
margin-right:auto;
}

.equipe {
width:50%;
margin:auto;
flex-direction: row;
justify-content: space-around;

}
.jsm {
padding-left: 50px;
}
.fc {
padding=right: 50px;}
.integrite {

width: 28%;
margin: 0 auto 0 0;
}
.proactif {

width: 28%;
margin:0 auto;
}
.partenaria {

width: 28%;
margin: 0 0 0 auto;
}
.banner {
background-attachment:fixed;
height: 750px;
}
.bannerb {
padding-top: 0em;
text-align:left;
max-width: 35%;
font-size: 2.25em;
height:100%;
padding-left: 12.5%;
margin-right:50px;
}
.banner2 {
height: 750px;
background-attachment:fixed;
}
.contact {

}
.contactbox { 
width: 100%;
display:flex;
flex-position:row;

}
.contactb {
text-align:left;
max-width: 35%;
font-size: 2.25em;
padding-left: 20%;
color: #fff;
background-color:rgba(140, 198, 62, 0.7);
height:100%;
display: flex;
justify-content:center;
align-items:center;
padding-right:50px;
}

input[type=text], select {    
width: 100%;    
}
input[type=text1], select {    
width: 100%; 
height:110px;    
}
.formcp { 

margin-left: 0px;
padding-right:17%;
 }
 .partenaires {
margin-right:auto;
}
.footer {
margin-right:auto;
margin-left:auto;
width:75%;
flex-direction: row;
align-items: center;
justify-content: center;}
.txtgestionnaire {
margin:auto;
width:65%;
}
}