*{margin:0;padding:0}body{font-family:'Source Sans Pro',sans-serif}nav{position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%;height:100px;background-color:white;z-index:99999;-webkit-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s}.sticky{height:50px!important}.barreMenu{position:absolute;bottom:0;width:100%;height:3px;background-color:#FB0000}.logoAccueil{margin:auto;text-align:center}.logoAccueil a img{width:80%;height:auto;-webkit-transition:width 0.3s;-o-transition:width 0.3s;transition:width 0.3s}.logoAccueilRedim{width:50%!important}.navigation{margin:8px auto auto auto;display:-webkit-box;display:-ms-flexbox;display:flex;list-style:none}.navigation li a{text-decoration:none;font-family:'Amatic SC',cursive;font-weight:700;font-size:1.5em;color:black;padding-right:20px;padding-left:20px;margin:auto;-webkit-transition:color 0.3s;-o-transition:color 0.3s;transition:color 0.3s}.navigationInactive{display:none}.navigation li a:hover{color:#FB0000!important}.navResaInactive{display:none}.navResaActive{display:block}#carrousel{position:relative;width:100%;height:85vh;overflow:hidden;margin:auto;display:-webkit-box;display:-ms-flexbox;display:flex}#carrousel ul li img{display:none;left:0%;z-index:0;position:absolute;top:0;width:100%;height:auto;list-style:none;-webkit-filter:contrast(75%) grayscale(.25) brightness(.9);filter:contrast(75%) grayscale(.25) brightness(.9)}#carrousel ul li{height:0}#carrousel ul li div{z-index:9998;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;top:40%;left:20%;right:20%;text-align:center;font-family:'Amatic SC',cursive;font-weight:700;opacity:0;-webkit-transition:opacity 0.3s;-o-transition:opacity 0.3s;transition:opacity 0.3s}#carrousel ul li div h2{font-size:4em;text-transform:uppercase;color:#FB0000;margin-bottom:20px;text-shadow:0 2px 8px rgba(0,0,0,.75)}#carrousel ul li div p{color:white;font-size:2.5em;margin-bottom:20px;text-shadow:0 2px 8px rgba(0,0,0,.75)}#carrousel ul li div a{margin:auto;width:220px;height:40px;font-size:2em;background-color:white;color:#FB0000;text-decoration:none;padding:10px;border-radius:10px;-webkit-transition:color 0.3s,background-color 0.3s;-o-transition:color 0.3s,background-color 0.3s;transition:color 0.3s,background-color 0.3s;-webkit-box-shadow:0 10px 42px 0 rgba(0,0,0,.75);box-shadow:0 10px 42px 0 rgba(0,0,0,.75)}#carrousel ul li div a:hover{color:white;background-color:#FB0000}.textActif{opacity:1!important;z-index:9999!important}.controls{margin:auto;width:100%;height:auto}.prev,.next{position:absolute;color:#FB0000;font-size:3.5em;z-index:999;padding:20px;background-color:white;cursor:pointer;-webkit-transition:color 0.3s,background-color 0.3s;-o-transition:color 0.3s,background-color 0.3s;transition:color 0.3s,background-color 0.3s}.next{right:0}.prev{left:0}.prev:hover,.next:hover{color:white;background-color:#FB0000}.chargementCarrousel{width:100%;height:3px;position:absolute;bottom:0;background-color:white;z-index:99998}.barreChargementCarrousel{position:absolute;bottom:0;background-color:#FB0000;height:3px;z-index:99999;width:0%}#pucesCarrousel{height:15vh;display:-webkit-box;display:-ms-flexbox;display:flex;text-align:center;background-color:#eee}#pucesCarrousel li{display:inline-block;background-position:50% 25%;background-size:cover;width:100%;height:100%;cursor:pointer;-webkit-filter:grayscale(100%);filter:grayscale(100%);opacity:.3;-webkit-transition:opacity 0.5s,-webkit-filter 0.5s;transition:opacity 0.5s,-webkit-filter 0.5s;-o-transition:opacity 0.5s,filter 0.5s;transition:opacity 0.5s,filter 0.5s;transition:opacity 0.5s,filter 0.5s,-webkit-filter 0.5s}#pucesCarrousel li:hover{-webkit-filter:grayscale(0%);filter:grayscale(0%);opacity:1!important}#pucesCarrousel li:nth-of-type(1){background-image:url(../img/velosLyon.jpg)}#pucesCarrousel li:nth-of-type(2){background-image:url(../img/confluence.jpg)}#pucesCarrousel li:nth-of-type(3){background-image:url(../img/deplacementsLyon.jpg)}#pucesCarrousel li:nth-of-type(4){background-image:url(../img/ruellesLyon.jpg)}.puceActive{opacity:1!important}#carte{background-color:#E8E8E8;height:100vh;width:100%}#map{width:100%;height:100%;float:left}#voletInfos{height:100%;margin-bottom:0;display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-left:75vw;padding-right:20px;padding-left:20px;text-align:center;-ms-flex-pack:distribute;justify-content:space-around}.fermetureVolet{text-align:right;padding-top:60px}.fa-times{cursor:pointer;color:#FB0000;font-size:2em}hr{margin:30px 20% 30px 20%;color:#eee}.boutonReservationActif{margin:50px auto 50px auto;background-color:#28A745;padding:7px;border-radius:4px;cursor:pointer;border:2px solid #28A745;color:white;font-weight:700;-webkit-transition:background-color 0.3s,color 0.3s,border-color 0.3s;-o-transition:background-color 0.3s,color 0.3s,border-color 0.3s;transition:background-color 0.3s,color 0.3s,border-color 0.3s}.boutonReservationActif:hover{background-color:white;color:#28A745;border-color:white}.boutonReservationInactif{cursor:not-allowed;padding:7px;border-radius:4px;margin:50px auto 50px auto;border:2px solid #ddd;font-weight:700}.remplacementCanva,.blocCanva{height:60%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.blocCanva{display:none;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:distribute;justify-content:space-around}#canvas{background-color:white;border-radius:8px;cursor:crosshair;border:2px solid white;-webkit-transition:border-color 0.5s;-o-transition:border-color 0.5s;transition:border-color 0.5s;width:100%;height:100%;min-height:150px}.canvasZone{display:-webkit-box;display:-ms-flexbox;display:flex;height:50%}#canvas:hover{border:2px solid #FB0000}.groupBoutons{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.groupBoutons button{padding:8px 12px 8px 12px;border-radius:4px;cursor:pointer}.confirmerActif{font-weight:700;z-index:999;background-color:#28A745;border:2px solid #28A745;color:white;-webkit-transition:border 0.3s,background-color 0.3s,color 0.3s,font-weight 0.3s;-o-transition:border 0.3s,background-color 0.3s,color 0.3s,font-weight 0.3s;transition:border 0.3s,background-color 0.3s,color 0.3s,font-weight 0.3s}.confirmerActif:hover{border-color:white;background-color:white;color:#28A745}.confirmerInactif{cursor:not-allowed!important;border:2px solid #ddd}.rafraichir{background-color:#6C757D;color:white;border:2px solid #6C757D;-webkit-transition:border 0.3s,background-color 0.3s,color 0.3s;-o-transition:border 0.3s,background-color 0.3s,color 0.3s;transition:border 0.3s,background-color 0.3s,color 0.3s}.rafraichir:hover{border-color:white;background-color:white;color:#6C757D}.annuler{font-weight:700;background-color:#FB0000;color:white;border:2px solid #FB0000;-webkit-transition:border 0.3s,background-color 0.3s,color 0.3s;-o-transition:border 0.3s,background-color 0.3s,color 0.3s;transition:border 0.3s,background-color 0.3s,color 0.3s}.annuler:hover{border-color:white;background-color:white;color:#FB0000}.blocVide{width:25%;height:100%;background-color:#E8E8E8;display:-webkit-box;display:-ms-flexbox;display:flex}#reservationActive{display:-webkit-box;display:-ms-flexbox;display:flex;height:95vh;background-color:rgb(250,250,250)}#reservationInactive{display:none}#reservationActive h2{padding:200px 10vw 120px 10vw}.infosReservation,.decompteReservation{padding-left:10%}.sectionResa{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.sectionResa div:last-child{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.fa-bicycle{font-size:4em;margin-left:10vw;color:#28A745}.annulerResa{font-family:'Source Sans Pro',sans-serif;margin-left:10vw;margin-top:80px;padding:8px 15px 8px 15px;border-radius:2px;cursor:pointer;font-weight:700;font-size:1em;background-color:#FB0000;color:white;border:2px solid #FB0000;-webkit-transition:border 0.3s,background-color 0.3s,color 0.3s;-o-transition:border 0.3s,background-color 0.3s,color 0.3s;transition:border 0.3s,background-color 0.3s,color 0.3s}.annulerResa:hover{border-color:white;background-color:white;color:#FB0000}.autreResa{display:none;width:210px;text-align:center;margin-right:auto;margin-left:10vw;margin-top:80px;padding:8px 15px 8px 15px;border-radius:2px;cursor:pointer;font-weight:700;text-decoration:none;background-color:#28A745;color:white;-webkit-transition:background-color 0.3s,color 0.3s;-o-transition:background-color 0.3s,color 0.3s;transition:background-color 0.3s,color 0.3s}.autreResa:hover{background-color:white;color:#28A745}.confirmationTexte{display:none;margin-left:10vw;margin-right:10vw;margin-top:60px}.confirmation,.retour{margin-left:10vw;margin-top:30px;border-radius:2px;cursor:pointer;font-weight:700;color:white;-webkit-transition:background-color 0.3s,color 0.3s;-o-transition:background-color 0.3s,color 0.3s;transition:background-color 0.3s,color 0.3s;padding:8px 15px 8px 15px;border:none}.confirmation{background-color:#28A745}.confirmation:hover{background-color:white;color:#28A745}.retour{background-color:#FB0000}.retour:hover{background-color:white;color:#FB0000}@media all and (max-width:1024px){nav{height:60px}.navigation li:nth-child(1) a{color:#FB0000}.logoAccueil a img{width:50%}.navigationInactive{display:-webkit-box;display:-ms-flexbox;display:flex}#carrousel ul li img{top:60px!important;width:auto;height:100%;left:-8%}.blocVide{width:15%}}@media all and (max-width:768px){#carrousel ul li img{left:-50%}}@media all and (max-width:414px){#carrousel ul li img{left:-85%}#carrousel ul li div h2{font-size:1.8rem}#carrousel ul li div p{font-size:1.25rem!important}#carrousel ul li div a{padding:3px 10px;font-size:1.6rem;width:auto;height:auto}.next,.prev{font-size:1.5rem;padding:35px 10px 35px 10px}#voletInfos{margin-left:0vw!important}.fermetureVolet{padding-top:150px}#reservationActive h2{padding-top:140px;padding-bottom:80px}.blocVide{display:none}.infosReservation,.decompteReservation{padding-right:10vw}}@media all and (max-width:320px){.navigation li{font-size:.8rem}.navigation li a{padding-right:4px;padding-left:4px}.fermetureVolet{padding-top:125px}.last_update{margin-top:-35px}#reservationActive h2{padding-top:140px;padding-bottom:0}hr{margin:10px 20% 10px 20%}}@media all and (max-width:740px) and (orientation:landscape){nav{height:40px!important}.navigation li a{font-size:1.3rem}.navigation{margin-top:5px!important}#carrousel ul li img{top:0!important;left:0%;width:100%!important;height:auto!important}#carrousel ul li div h2{font-size:1.7rem}#carrousel ul li div p{font-size:1.4rem!important}#carrousel ul li div{top:28%}#carrousel ul li div a{padding:3px 10px;font-size:1.6rem;width:auto;height:auto}.next,.prev{font-size:1.5rem;padding:35px 10px 35px 10px}.fermetureVolet{padding-top:40px}.name{font-size:1rem}.arrondissement,.address,.available_bikes,.available_bike_stands,.status,.blocCanva div p{font-size:.8rem}hr{margin:8px 20% 8px 20%}.boutonReservationActif{margin:10px auto 10px auto}.groupBoutons button{padding:1px 12px 1px 12px}#canvas{min-height:80px}#reservationActive h2{padding:40px 0 20px 10vw!important}.annulerResa,.confirmationTexte{margin-top:30px}}@media all and (max-width:667px) and (orientation:landscape){.navigation{margin-top:10px!important}#carrousel ul li div h2{font-size:1.5rem}#carrousel ul li div p{font-size:1.3rem!important}}@media all and (max-width:667px) and (orientation:landscape){.navigation li a{font-size:1.15rem}}@media all and (max-width:630px) and (orientation:landscape){.navigation li a{font-size:.75rem}#carrousel ul li div h2{font-size:2rem!important}#carrousel ul li div p{font-size:1rem!important}.arrondissement,.address,.available_bikes,.available_bike_stands,.status,.blocCanva div p,.confirmationTexte{font-size:.7rem}.blocCanva div small{font-size:.5rem}.confirmation,.retour,.autreResa,.confirmationTexte{margin-top:10px}hr{margin:3px 20% 3px 20%}}@media all and (max-width:1366px) and (min-width:415px){#carrousel ul li div h2{font-size:3rem}#carrousel ul li div p{font-size:2rem}#voletInfos{margin-left:50vw}#reservationActive h2{padding:150px 0 120px 10vw}}@media all and (max-width:1238px){#carrousel ul li img{top:80px;width:auto;height:100%}}@media all and (max-width:713px){nav{height:120px}.infosReservation,.decompteReservation{padding-left:10vw}}