*,*:after,*:before {margin:0;padding:0;box-sizing:inherit}
body,html {margin:0;height:100%;}html{font-size:16px;}
body {line-height:1;font-size:16px;font-family:"Lato", sans-serif;font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}
h1,h2,h3,h4,h5,h6 {margin:0}
ol li,ul li {list-style:none}
a {text-decoration:none}
/*img {max-width:100%}*/

.slide-in {animation: slide-in 0.5s forwards;-webkit-animation: slide-in 0.5s forwards;}
.slide-out {animation: slide-out 0.5s forwards;-webkit-animation: slide-out 0.5s forwards;}
@keyframes slide-in {100% { transform: translateX(0%); }}
@-webkit-keyframes slide-in {100% { -webkit-transform: translateX(0%); }}
@keyframes slide-out {0% { transform: translateX(0%); }100% { transform: translateX(-150%); }}
@-webkit-keyframes slide-out {0% { -webkit-transform: translateX(0%); }100% { -webkit-transform: translateX(-200%); }}
    
/* Style de la page */
.fond-svg {position:absolute;z-index:0;bottom:0;overflow: hidden;line-height:0;}
.slider {width:100%;height:100%;margin:0 auto;overflow:hidden;}
.slider__container {position:relative;width:100%;height:100%;display:block;margin:0;padding:0;font-size:0;list-style:none;white-space:nowrap}
.slider__content {position:absolute;top:0;left:0;width:100%;height:100%;font-size:16px;visibility:hidden}
.slider__content a {text-decoration: underline;color:inherit;}
.slider__item {position:relative;height:100%;width:100%;display:inline-block}
.slider-controls {width:100%;position:absolute;top:50%;-webkit-transform:translate3d(0px, -50%, 0px);transform:translate3d(0px, -50%, 0px);z-index:10;opacity:0.5;-webkit-transition: opacity 0.5s;transition: opacity 0.5s;}
.slider-controls:hover {opacity:1;}
.slider-vote {width:30px;height:30px;top:5px;right:5px;position:absolute;z-index:999;opacity:0.7;-webkit-transition: opacity 0.5s;transition: opacity 0.7s;}
.slider-vote:hover {opacity:1;}
.slider-controls > .previous, .slider-controls > .next {position:absolute;width:64px;height:64px;display:block;cursor:pointer;border:none;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-size:64px;background-color:transparent;background-repeat:no-repeat;}
.slider-vote > .nbrVote {position:absolute;width:30px;height:30px;display:block;cursor:pointer;border:none;outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-size:30px;background-color:transparent;background-repeat:no-repeat;}
.slider-controls > .next {right:5px;background-image:url("../images/arrow-right.svg");}
.slider-controls > .previous {display:none;left:5px;background-image:url("../images/arrow-left.svg")}
.slider-vote > .nbrVote{right:5px;background-image:url("../images/vote.svg")}

.slider-navigation {position:absolute;left:0;right:0;bottom:32px;text-align:center}
.slider-navigation > li{position:relative;display:inline-block;margin-right:10px}
.slider-navigation > li > a {display:inline-block;width:15px;height:15px;border:3px solid #313131;border-radius:50%;background:transparent;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
.slider-navigation > li > a.is-active {background:rgba(31,31,31,0.5);border-color:rgba(31,31,31,0)}

.section {position:relative;width:100%;height:100%;box-sizing:border-box}
.grid {display: flex;}
.grid > .column {width:50%;margin:auto;}
.grid > .column:first-child {text-align:left;padding-left:5%;}
.grid > .column:last-child {padding:0;text-align:center;}
.slide-ag .slider__content .column:first-child {margin-top:5%;}
.slide-ag {background:linear-gradient(45deg, #4696D6 65%, #65B2F1)} 
.slide-sommaire {background:linear-gradient(45deg, #E2BC74 65%, #e2ab41)}
.slide-moral {background:linear-gradient(45deg, #fbcb77 65%, #FDE5BB)}
.slide-moral .soustexte {margin-top:10px;}
.slide-activite, .slide-ardoises, .slide-solaire, .slide-parrainage, .slide-maison, .slide-chioma {background:linear-gradient(45deg, #e3b371 65%, #EBCA9C)}
.slide-projet, .slide-projet2 {background:linear-gradient(45deg, #d1ab55 65%, #DEC488)}
.slide-finance {background:linear-gradient(45deg, #808080 65%, #C0C0C0)}
.slide-cotisation {background:linear-gradient(45deg, #fea357 65%, #FEBF8A)}
.slide-bureau, .slide-vote {background:linear-gradient(45deg, #F3B49F, #eb7e5b 50%)}
.title {font-size:6em;font-weight:500;color:#FFF;text-transform:uppercase}
.slide-finance .title, .slide-finance .texte, .slide-finance .soustexte {color:#313131;}
.slide-ardoises .title, .slide-solaire .title, .slide-maison .title, .slide-chioma .title, .slide-parrainage .title, .slide-projet .title, .slide-projet2 .title {color:#313131;font-size:250%;margin-bottom:15px;white-space: normal;}
.slide-ardoises .soustexte, .slide-solaire .soustexte, .slide-maison .soustexte, .slide-chioma .soustexte, .slide-parrainage .soustexte, .slide-projet .soustexte, .slide-projet2 .soustexte {color:#313131;}
.slide-ag .title:first-child {font-size:3em;font-weight:300;}
.slide-ardoises .title:first-child, .slide-solaire .title:first-child, .slide-maison .title:first-child, .slide-chioma .title:first-child, .slide-parrainage .title:first-child, .slide-projet .title:first-child, .slide-projet2 .title:first-child {font-size:3em;font-weight:300;}
.slide-sommaire .title,.slide-activite .title, .slide-finance .title, .slide-cotisation .title, .slide-bureau .title, .slide-degustation .title, .slide-moral .title, .slide-vote .title  {font-size:3.5em;margin-bottom:15px;font-weight:300;}

.title {color:#313131;}
.texte {font-size:2em;font-weight:500;color:#313131;margin-bottom:15px;white-space: normal;}
.soustexte,.soustexte2 {font-size:1.3em;line-height:1.3em;font-weight:300;color:#313131;white-space: normal;padding-left:10px;}
.budget {font-size:1.5em;font-weight:500;color:#e3b371;width:380px;padding:10px;background-color:#313131;margin-top:20px;}
.slide-projet .budget, .slide-projet2 .budget {color:#d1ab55}
.budget2 {font-size:2em;font-weight:500;color:#e1914a;width:300px;padding:10px;background-color:#313131;margin-top:20px;}
.slide-finance .budget2 {background-color:#313131;color:#C0C0C0;}
sup {font-size:80%;}

.bureau {display: block; position:relative;width:100%;text-align:center;}
.bureau > div {position:relative;display:inline-block;width:300px;height:300px;cursor:pointer;text-align:center;}
.bureau > div > span {display:block;position:absolute;width:100%;height:100%;padding-top:30%;}
.bureau > div > span p {font-size:1.3em;color:white;font-weight:300;text-align:center;vertical-align:middle;}
.bureau > div > span h2 {font-size:1.7em;color:white;font-weight:400;text-transform: uppercase;padding:5px;margin:5px;text-align:center;}
.bureau > div > img {display:block;position:absolute;max-width:100%;}

.slide-cotisation .now2 {font-size:2em;font-weight:500;color:#fea357;width:300px;padding:10px;background-color:#313131;margin-top:20px;margin-bottom:10px;}
.ag1 {position:absolute;bottom:5%;opacity:0;width:auto;height:65%;}
.sommaire {width:100%;height:auto;}
.activite {width:80%;height:auto;}
.slide-ag .column:first-child {width:90%;} 
.slide-ag .column:last-child {width:10%;}
.slide-ag .column:last-child img {position:absolute;top:20px;right:20px;width:300px;height:auto;}
.slide-sommaire .column:first-child {width:40%;}
.slide-sommaire .column:last-child {width:50%}
.activite {width:60%;height:auto;}
.slide-parrainage .column:first-child {width:40%;}
.slide-parrainage .column:last-child {width:60%}
.cotisation {width:65%;height:auto;}


/*------------- Loader de la page ---------------*/
.container-loader {position:absolute;z-index:3; top: 50%; left: 50%;margin-left:-100px;margin-top:-100px;width: 200px;height: 200px;}
.container-loader img {animation: contImg 6s ease-out;}
.loader {position:absolute;z-index:3;top: 50%; left: 50%;margin-left:-100px;margin-top:-100px;border: 2px solid #F0C755;border-top: 2px solid #EF2B2D;border-bottom: 2px solid #009949;border-radius: 50%;width: 200px;height: 200px;animation: spin 1s ease-in infinite;}
@keyframes spin {0% { transform: rotate(0deg);}100% { transform: rotate(360deg);}}
@keyframes contImg {0% { opacity: 0;}100% { opacity:1;}}

/*-------------- Tooltip ------------------*/
.text-tooltip {text-align:left;}
.tooltip-inner {min-width: 200px;font-size:1.4em;}

/*------------- Gestion du vote -------------*/
div.bouton-vote {margin-top:20px;}
.bouton-vote a {padding:10px 50px;font-size:1.5em;font-weight:700;color:#eb7e5b;background-color:#313131;text-transform:uppercase;text-align:center;cursor:pointer;transition: opacity 1s;text-decoration:none;}
.bouton-vote a:hover {opacity:0.7;}

.soustexte ul {margin-left:5%;margin-top:2%;}
.soustexte label {margin-left:2%;}
.soustexte label i {font-style:italic;font-size:80%;}

.identite {overflow: auto;height:150px;}
.identite table {color:#313131;font-weight:300;font-size:1.4em;margin:0 auto;margin-bottom:50px;border-collapse: collapse;}
.identite table input[type="email"] {width:100%;}
.identite table td, .identite table th {background-color:white;border-left:4px solid #eb7e5b;border-bottom:4px solid #eb7e5b;padding:1px 3px;vertical-align:middle;white-space: nowrap;}
#nom, #prenom, #email {color:#313131;background-color:white;font-weight:300;font-size:90%;vertical-align:middle;border:none;padding:2px;}
#vote {border:#eb7e5b;}
#nom, #prenom {width:150px;}
.identite table td, .identite table th {white-space: nowrap;}
.identite table td label {margin-left:3px;color:#313131;font-size:90%;}
.identite table th:last-child {font-size:100%;text-align:center;background-color:#eb7e5b;}
.identite table td:nth-last-child(-n+2) {background-color:#eb7e5b;text-align:center}

.vote {text-align:center;}
.output-cot, .output-don  {text-align:center;color:#313131;font-size:1.5em;font-weight:300;height:40px;}
.text-label-cot, .text-label-don {color:#313131;font-size:2em;margin-top:8px;text-align:left;font-weight:300;}

#message {width:50%;height:50px;margin:0 auto;;margin-top:5px;margin-bottom:20px;color:#80888F;padding:3px;font-size:100%;border:none;resize: none;}

#boutons {position:relative;overflow:auto;height:280px;}
#validation-vote {display:none;margin:20px;}
#validation-vote a {padding:10px 50px;font-size:1.5em;font-weight:700;color:#eb7e5b1;background-color:#fff;text-transform:uppercase;text-align:center;cursor:pointer;transition: opacity 1s;text-decoration:none;}
#validation-vote a:hover {opacity:0.7;}
#bouton_paypal {margin: 0 auto;width:50%;}
.response-validation-vote {height:60px;font-style:italic;font-weight:300;}

/* Range */
.rangeContainerCotisation, .rangeContainerDon {position:relative;width: 90%;padding-bottom:50px;}
.range-value {position:relative}
.range-cot, .range-don {-webkit-appearance: none;width: 100%;height:8px;background:#313131;outline: none;opacity: 0.8;-webkit-transition: .2s;transition: opacity .2s;}
.range-cot:hover, .range-don:hover {opacity: 1;}
.range-cot::-webkit-slider-thumb, .range-don::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 25px;height: 25px;border-radius:15px;border: 3px solid #313131;background:#eb7e5b;cursor: pointer;}
.range-cot::-moz-range-thumb, .range-don::-moz-range-thumb {width: 25px;height: 25px;border-radius:15px;background:#eb7e5b;border: 3px solid #313131;cursor: pointer;}
.arrow-right {position:absolute;right:-16px;top:-12px;width: 0; height: 0; border-top: 16px solid transparent;border-bottom: 16px solid transparent;border-left: 16px solid #313131;}


/*---------- Loder reponse vote ----------------*/
.loader-response-vote {display:none;border: 8px solid white;border-top: 8px solid #313131; /* Blue */border-radius: 50%;width: 60px;height: 60px;animation: spin 2s linear infinite;margin: 0 auto;}
@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}

/*----------------- Responsive ----------------*/
@media (min-width: 800px) and (max-width: 1400px) {
    .dispensaire, .bancs, .projet, .projet2 {width:100%;}
    .slide-bureau .title, .slide-vote .title, .slide-finance .title  {font-size:230%;}
    .bureau > div {width:230px;height:230px;margin:0;}
    .bureau > div > span p {font-size:130%;}
    .bureau > div > span h2 {font-size:110%;}
}

@media only screen and (max-width: 800px){
    .slider-controls > .previous, .slider-controls > .next {width:30px;height:30px;background-size:30px;}
    .slider-intero > .intero, .slider-vote > .nbrVote {width:20px;height:20px;background-size:20px;}
    .slider-intero {position:absolute;top:5px;}
    .grid {flex-direction: column;justify-content: center;}
    .grid > .column {width:100%;}
    .grid > .column:first-child {text-align:center;position:absolute;z-index:2;top:8px;padding:1px;}
    .grid > .column:last-child {text-align:center;position:absolute; bottom:0;padding:0;margin:0;}
    .slide-ag .column:first-child, .slide-ag .column:last-child {width:100%;}
    .slide-sommaire .column:first-child {width:100%;}
    .slide-sommaire .column:last-child {width:100%}
    .slide-ag .title:first-child {font-size:1.5em;}
    .slide-parrainage .column:first-child {width:100%;}
    .slide-parrainage .column:last-child {width:100%}
    .slide-vote .column:last-child {width:100%;top:160px;}
    
    /*---- Format des images ------*/
    .ag1 {width:auto;height:65%;margin: 0 auto;}
    .ag {width:35%; height:auto;margin-bottom:250px;}
    .sommaire {width:95%;height:auto;margin: 0 auto;}
    .moral {width:50%; height:auto;margin: 0 auto;}
    .activite {width:100%; height:auto;margin: 0 auto;margin-bottom:20px;}
    .parrainage {width:80%;height:auto;margin: 0 auto;margin-bottom:20px;}
    .projet, .projet2 {width:80%;height:auto;margin: 0 auto;margin-bottom:20px;}
    .bureau {width:100%;height:auto;margin: 0 auto;margin-bottom:30px;}
    .cotisation {width:80%;height:auto;margin: 0 auto;margin-bottom:30px;}
    /*------- Format date projets -----------*/
   .slide-parrainage .title:first-child, .slide-projet .title:first-child, .slide-projet2 .title:first-child {font-size:120%;}
    
    /*---------- Titres et textes --------------*/
    .slide-activite .title, .slide-sommaire .title, .slide-moral .title, .slide-parrainage .title, .slide-projet .title, .slide-projet2 .title, .slide-cotisation .title, .slide-bureau .title, .slide-vote .title {font-size:110%;}
    .texte {font-size:120%;margin-bottom:8px;}
    .soustexte {font-size:90%;padding-left:5px;text-align:left;font-weight:400;}
    .slide-finance .title {font-size:110%;margin-bottom:10px;}
    .slide-vote .title {margin-top:15px;}
    .slide-cotisation .now2 {margin:0 auto;}
    .budget, .budget2 {font-size:1em;width:250px;padding:5px;margin:0 auto;margin-top:10px;}
    
    /*------------ Rond de navigation -------*/
    .slider-navigation {bottom:10px;}
    .slider-navigation > li{margin-right:8px}
    .slider-navigation > li > a {width:8px;height:8px;border:2px solid #313131;}
    
     #finance {width:100%;}
    .bureau > div {width:150px;height:150px;margin:0;}
    .bureau > div > span p {font-size:0.8em;}
    .bureau > div > span h2 {font-size:0.9em;}
    
    /*------- Slide vote -----------*/
    .vote {padding:5px}
    .identite {width:98%;height:80px;}
    .identite table td, .identite table th {border-left:2px solid #eb7e5b;border-bottom:2px solid #eb7e5b;}
    .identite table {font-size:1em;margin-bottom:20px;border-collapse: collapse;}
    .identite table th:first-child {width:100px;}
    #nom, #prenom {width:100px;}
    .identite table td label {margin-left:1px;}
    .text-label-cot, .text-label-don {font-size:110%;margin:2px 0px;}
    .output-cot, .output-don  {font-size:100%;height:25px;}
    #validation-paiement, #validation-question, #validation-vote {margin:20px;}
    #validation-vote a, #validation-paiement a, #validation-question a {padding:5px 25px;font-size:1em;}
    .rangeContainerCotisation, .rangeContainerDon {width: 95%;padding-bottom:20px;}
    .range-cot, .range-don {-webkit-appearance: none;width: 100%;height:4px;background:#313131;outline: none;opacity: 0.8;-webkit-transition: .2s;transition: opacity .2s;}
    .range-cot::-webkit-slider-thumb, .range-don::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 15px;height: 15px;border-radius:15px;border: 1px solid #313131;background:#eb7e5b;cursor: pointer;}
    .range-cot::-moz-range-thumb, .range-don::-moz-range-thumb {width: 15px;height: 15px;border-radius:15px;background:#eb7e5b;border: 1px solid #313131;cursor: pointer;}
    .arrow-right {position:absolute;right:-10px;top:-8px;width: 0; height: 0; border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #313131;}
    #message {width:80%;height:25px;margin-bottom:10px;}
    #bouton_paypal {width:80%;}
}