@charset "utf-8";
/* CSS Document */
/* general */
 body.ca{
     font-family: 'Raleway', sans-serif;
}
 .title{
    margin-bottom:40px;
}
 .page-section{
     padding:50px 0;
     text-align:center;
}
 .button{
     color: #58595B;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
     position: relative;
     border: 2px solid #58595B;
     overflow: hidden;
     line-height: 50px;
     height: 50px;
     text-align: center;
     margin-right: auto;
     margin-left: auto;
     padding-left:15px;
     padding-right:15px;
     cursor: pointer;
     display:inline-block;
     margin: auto;
}

 .button:hover {
    background-color: rgba(255,255,255,0.2);
    color: #58595B;
    text-decoration: none;
    opacity: 0.8;
}


 .highlight{
     background-color:#ff6a5a ;
     color:#fff;
}
 .big{
    font-size:1.6em;
     text-transform:uppercase;
}
 .back-to-top {
     background: none;
     margin: 0;
     position: fixed;
     bottom: 0;
     right: 0;
     z-index: 100;
     display: none;
     text-decoration: none;
     color: rgba(0,0,0,0.2);
     padding:15px;
     font-size:2em;
}
 .back-to-top i {
     font-size: 60px;
}
 .error{
    color:#f15342;
     text-transform:inherit;
}
 img{
    max-width:100%;
}
/* header */
 #masthead{
     position:fixed;
     width:100%;
     z-index:9;
}
 #menu-menu-principal li a{
     color:#484848;
     text-transform:uppercase;
     padding: 5px 15px;
     font-weight:bold;
}
 #menu-menu-principal li a.active{
    color:#e1447f;
}
 #menu-menu-principal span{
    line-height:30px;
}
 nav.fast{
    background:rgba(255,255,255,0.6);
}
 .social{
    padding-left:30px;
}
 .social li{
    display:inline;
}
 .social li a{
    color:#fff;
     padding:5px 10px;
}
/* intro */
 #intro{
     background:url('../img/campus.jpg')#b0caed;
     background-position:center center;
     background-size:cover;
     background-repeat:no-repeat;
     color:#1a171b;
     text-align:center;
     height: 100vh;
     position: relative;
     display: flex;
    align-items: top;
	 background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.intro{width: 100%;}
 #intro h1{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 2.5em;
    z-index: 99;
    padding-top: 40px;
    text-align: left;
}


#intro h3{text-align: left;}

.blocIntro{
    BACKGROUND: RGBA(255,255,255,0.6); 
    padding: 40px;
    margin-left: 0 !important;
    margin-right: 0 !important;
 /*    min-height: 100%;
   vertical-align: middle;
    align-items: center;*/
}

.arrow{
	POSITION: absolute;
    left: 50%;
    top: 80%;
    font-size: 4em;
    color: #fff;
}
/* proche */
 #debats{
     background: #f1f1f1;

}
#debats img{padding: 15px;}
#debats h2{margin: 20px 0 40px 0; text-align: center;}
#debats p{margin: 20px; font-weight:bold; font-size: 1.2em; text-align: left;}
#debats h2.design{margin:auto; margin-top: 40px; margin-bottom: 30px;}
.bold{font-weight: bold;}
 .white p {
    margin:20px 0;
     color:#fff;
}
.smaller{font-size: 1.1em;}
 #proche{
     background: #93e9dc;
     text-align:center;
}
 #proche .title, #solidaire .title{
     margin-bottom:0;
}
 hr{
     width: 150px;
     margin: auto;
     margin: 20px auto;
     background: #f15342;
     height: 2px;
     border: none;
}
 #proche .epargne{
     align-self: flex-end;
     text-align:left;
     margin-top:-100px;
     margin-left:55%;
}
 img.banque, .voix{
    margin:auto;
}
/* proche3 */
 #proche3{
     background:#ff6a5a;
}
 #responsable p, #talents p{
     text-transform:uppercase;
     color:#1c8b91;
}
 #responsable hr, #talents hr{
     width: 150px;
}
 #responsable span, #talents span{
     color:#e20a17;
     font-size:0.4em;
     vertical-align: middle !important;
     margin:0 5px;
}
 #responsable .asso{
    padding-top:40px;
}
 #talents {
     background:url('../img/background-gourmand.jpg') #50def8;
     background-size:cover;
     background-position:center center;
     background-repeat:no-repeat;
}
 #talents.page-section{
    padding:10px;
}
 .talents-gourmands{
     padding:10px;
     background:rgba(255,255,255,0.6);
     margin:auto;
}
 #solidaire{
     background:#5ce3e4;
}
 #solidaire .voix{
    margin:20px auto;
     font-size:1.2em;
}
 #rdv .big{
    color:#3bbabb ;
}
 .pink{
    text-transform:uppercase;
     color:#fff;
     background:#e1447f;
     padding:5px 10px;
     text-align:left;
     display:inline-block;
}
 #rdv.page-section{
    text-align:left;
}
 #rdv.page-section .big{
    text-align:center;
}
 form{
    margin-top:20px;
}
 form label{
    text-transform:uppercase;
     margin:5px 0;
}
 form input{
    color:#e1447f;
}
 #rdv .form-control{
    border-color:#e1447f ;
     border-radius:0;
}
 #rdv .container{
    width:70%;
}
 #rdv button{
     background-color: #e1447f;
     border-color: #e1447f;
     border-radius:0;
     float:right;
}
 #mention{
    text-align:left;
}
 #mention p{
    font-size:0.6em;
}

footer{text-align: center; padding: 30px 0;}
 footer a{
     color:#090909;
     text-decoration:none;
     margin:0 10px;
}
 footer a:hover{
     color:#000;
	  text-decoration:none;
}
/* responsive */
 @media screen and (min-width: 200px) and (max-width:500px) {
	 #proche .white p{margin-bottom:0;}
 }
 @media screen and (min-width: 200px) and (max-width: 1199px) {
     #menu-menu-principal span{
        display:none;
    }
     .social {
         position: absolute;
         left: 0;
         top: 40px;
    }
     #menu-menu-principal{
         background:rgba(255,255,255,0.6);
         position:relative;
         z-index:99;
    }
     #intro img {
         margin-top: 0px;
    }

     #proche2 .epargne{
         margin-top: 0px;
         margin-left: 0;
    }
     .space{
        margin-top:30px;
    }
     #rdv .container{
        width:100%;
    }
}
 @media screen and (min-width: 320px) and (max-width: 767px) {
   #intro h1{
       position: relative;
        transform:none;
        text-align: center;
       margin-top: 40px;
     }
}
 @media screen and (min-width: 768px) and (max-width: 991px) {

    
}
 @media screen and (min-width: 992px) and (max-width: 1199px) {
     
}

.col-md-6{width:50%;}