<style>
html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: light;
}
#map {
    /* configure the size of the map */
    width: 500px;
    height: 500px;
}
.update{
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: light;
}
.prix{
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 300;
}
.km{
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 300;
}
.kms{
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: 300;
}
.nstation{
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: 300;
}
.vstation{
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: light;
}
.footer{
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    font-weight: light;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
}

.markgreen{
    background: #bdfac4; /* vert */
    padding:7px 12px; /* on gonfle le bloc 7px en haut+bas 9px en droite+gauche*/
    border-radius:7px; /* 4 coins arrondis */
    display:inline-block; /* indispensable pour la transformation */
    transform:rotate(-1deg); /* on tourne */
    display:inline-block; /* cf au dessus */
    transform:rotate(1deg); /* idem dans l'autre sens */
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
}
.markorange{
    background:#f4c485; /* orange */
    padding:7px 12px; /* on gonfle le bloc 7px en haut+bas 9px en droite+gauche*/
    border-radius:7px; /* 4 coins arrondis */
    display:inline-block; /* indispensable pour la transformation */
    transform:rotate(-1deg); /* on tourne */
    display:inline-block; /* cf au dessus */
    transform:rotate(1deg); /* idem dans l'autre sens */
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
}
.markrouge{
    background:#db9f9e;/* rouge*/
    padding:7px 12px; /* on gonfle le bloc 7px en haut+bas 9px en droite+gauche*/
    border-radius:7px; /* 4 coins arrondis */
    display:inline-block; /* indispensable pour la transformation */
    transform:rotate(-1deg); /* on tourne */
    display:inline-block; /* cf au dessus */
    transform:rotate(1deg); /* idem dans l'autre sens */
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
}
.tcarbu{
    font-size: 12px;
}
.carbs{
  border: medium solid #9b9293;
}
.geoloc { 
    background-image: url("../img/geolocalisation.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
}
.topnav {
    overflow: hidden;
    background-color: #d1c894;
        //#333;
}

.topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.logo {
    background-color:#d1c894;
        //#e4bf81;
    //#e6e8ea
    color: black;
}
.topnav a.active {
    background-color: #ddd;//#bbd194;
        //#04AA6D;
    color: white;
}
img, input {
    vertical-align:middle;
}


.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2196F3;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;

</style>