/* ************************************************* */
/* *********************** FONT ******************** */
/* ************************************************* */
@font-face {
    font-family: 'open_sanssemibold';
    src: url('./font/OpenSans-Semibold-webfont.eot');
    src: url('./font/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-Semibold-webfont.woff') format('woff'),
         url('./font/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('./font/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('./font/OpenSans-ExtraBoldItalic-webfont.eot');
    src: url('./font/OpenSans-ExtraBoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-ExtraBoldItalic-webfont.woff') format('woff'),
         url('./font/OpenSans-ExtraBoldItalic-webfont.ttf') format('truetype'),
         url('./font/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('./font/OpenSans-SemiboldItalic-webfont.eot');
    src: url('./font/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('./font/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('./font/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansregular';
    src: url('./font/OpenSans-Regular-webfont.eot');
    src: url('./font/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-Regular-webfont.woff') format('woff'),
         url('./font/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('./font/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanslight';
    src: url('./font/OpenSans-Light-webfont.eot');
    src: url('./font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-Light-webfont.woff') format('woff'),
         url('./font/OpenSans-Light-webfont.ttf') format('truetype'),
         url('./font/OpenSans-Light-webfont.svg#open_sanslight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('./font/OpenSans-LightItalic-webfont.eot');
    src: url('./font/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-LightItalic-webfont.woff') format('woff'),
         url('./font/OpenSans-LightItalic-webfont.ttf') format('truetype'),
         url('./font/OpenSans-LightItalic-webfont.svg#open_sanslight_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansitalic';
    src: url('./font/OpenSans-Italic-webfont.eot');
    src: url('./font/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-Italic-webfont.woff') format('woff'),
         url('./font/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('./font/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansextrabold';
    src: url('./font/OpenSans-ExtraBold-webfont.eot');
    src: url('./font/OpenSans-ExtraBold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-ExtraBold-webfont.woff') format('woff'),
         url('./font/OpenSans-ExtraBold-webfont.ttf') format('truetype'),
         url('./font/OpenSans-ExtraBold-webfont.svg#open_sansextrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansbold';
    src: url('./font/OpenSans-Bold-webfont.eot');
    src: url('./font/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-Bold-webfont.woff') format('woff'),
         url('./font/OpenSans-Bold-webfont.ttf') format('truetype'),
         url('./font/OpenSans-Bold-webfont.svg#open_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansbold_italic';
    src: url('./font/OpenSans-BoldItalic-webfont.eot');
    src: url('./font/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/OpenSans-BoldItalic-webfont.woff') format('woff'),
         url('./font/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
         url('./font/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ************************************************* */
/* ******************** GENERIC RULES ************** */
/* ************************************************* */
body {
    margin: 0;
    padding: 0;
}
body,
input,
textarea {
  color:#404040;
  color:rgba(0,0,0,0.75);
  font:15px/20px 'open_sansregular', sans-serif;
  -webkit-font-smoothing:antialiased;
}
div, ul, li, a, section, nav,
h1, h2, h3, h4, h5, h6,
hr, input, textarea, footer, header {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
hr {
    clear: both;
    width: 100%;
    height: 0;
    max-width: 980px;
    margin: 28px auto;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #ddd;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 0;
}
ol, ul {
    list-style: none;
}
h2, h3 {
    margin-bottom: 15px;
    line-height: 1.2em;
}
h1 {
    line-height: 1em;
}
h1, h2, h3, h4, h5 {
    font-family: 'open_sansbold';
    font-weight: normal;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
strong {
    font-family: "open_sansbold";
    font-weight: normal;
}
.img-group img {
    vertical-align: top;
}
a {
    color: #333;
}

/* ************************************************* */
/* *********************** GRID ******************** */
/* ************************************************* */
.wrapper {
    width: 100%;
    clear: both;
}
.wrapper:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.row {
    width: 100%;
    max-width: 1200px;
    clear: both;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
}
.col {
    float: left;
}
.col + .col {
    padding-left: 40px;
}
.half {
    width: 50%;
}
.third {
    width: 33.33%;
}
.two-third {
    width: 66.66%
}
.quarter {
    width: 25%;
}
.wide {
    width: 100%;
    padding-right: inherit;
}
.mshow, .tshow {
    display: none;
}


/* ************************************************* */
/* ********************** FORMS ******************** */
/* ************************************************* */
input[type="text"], input[type="password"], input[type="date"],
input[type="datetime"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"],
input[type="url"], textarea {
    border: 1px solid #c3c3c3;
	    border-radius: 0;
    color: rgba(0, 0, 0, 0.75);
    display: block;
    font-family: inherit;
	height: 5rem;
    font-size: 1.3rem;
    line-height: 2.5rem;
    margin: 0 0 14px;
    padding: 7px;
    width: 100%;
}
input[type="submit"],
.button {
    border: none;
    border-radius: 2px;
    padding: 0 20px;
    text-decoration: none;
    color: #fff;
    font-size: 1.1em;
    background-color: #4E5D73;
    display: inline-block;
    margin-top: 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 100%;
}
.button.action {
    background-color: #C75C5C;
}
.button.neutral {
    background-color: #E0E0D1;
    color: #666;
}
input[type="submit"]:hover,
.button:hover {
    background-color: #666;
    color: #fff;
}
textarea {
    height: 200px;
}
select {
    width: 100%;
    background-color: #fff;
    height: 28px;
    line-height: 28px;
    color: rgba(0, 0, 0, 0.75);
    border: 1px solid #ddd;
    margin-bottom: 15px;
}
select[multiple="multiple"] {
    height: auto;
}
label.cap {
    background-color: #eee;
    border: #ddd solid 1px;
    border-bottom: none;
    display: block;
    border-radius: 2px 2px 0 0;
    padding: 5px;
    font-family: 'open_sanssemibold';
}
label.cap + textarea,
label.cap + input {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
input.error {
    box-shadow: 0px 0px 6px #CF000F;
}
ul.errors li {
    background-color: #E74C3C;
    margin-top: -14px;
    margin-bottom: 14px;
    padding: 2px 5px;
}
.help-text, .helptext {
    display: block;
    padding: 7px 7px;
    margin-top: -14px;
    margin-bottom: 14px;
    background: #777;
    color: #eee;
    font-size: 11px;
    border-radius: 0 2px;
}
select + .help-text {
    margin-top: 0;
}


/* ************************************************* */
/* *************** HEADER & FOOTER ***************** */
/* ************************************************* */
header {
    min-height: 100px;
    padding: 0 20px;
    background-color: #fefefe;
    color: #333;
    border-bottom: 1px solid #eee;
}
header h1 {
    line-height: 100px;
    font-size: 36px;
    font-weight: normal;
    font-family: 'open_sanslight';
}
header .menu {
    float: right;
    margin-right: 60px;
}
header .menu a {
    color: #333;
    line-height: 100px;
    font-size: 15px;
    text-transform: uppercase;
    font-family: 'open_sansextrabold';
    font-weight: normal;
}
header .menu a:hover {
    text-decoration: underline;
}
header .menu a + a {
    margin-left: 20px;
}
header section {
    display: inline-block;
}
footer {
    border-top: 1px solid #222;
    padding: 50px;
    color: #fefefe;
    background-color: #333;
    margin-top: 100px;
}
footer a,
header a {
    text-decoration: none;
    color: #fefefe;
    font-family: 'open_sanslight';
}
header h1 a {
    background-image: url('./img/logo.jpg');
    background-repeat: no-repeat;
    background-position: left 20px center;
    color: #333;
    padding-left: 140px;
}
footer ul {
    width: 30%;
    display: inline-block;
}
footer .twitter:before {
    width: 20px;
    height: 20px;
    background-image: url('./img/twitter.png');
    background-position: left center;
    background-size: 20px auto;
    background-repeat: no-repeat;
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
}
.beta:after {
    content: 'bêta';
    font-family: 'open_sansextrabold';
    font-weight: normal;
    color: #de1c12;
    font-size: 15px;
    padding: 3px 5px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: 25px;
    left: -31px;
}
.flashes li {
    padding: 10px;
    text-align: center;
}
.flashes li:before,
.flashes li:after {
    font-family: 'open_sansextrabold';
}
.flashes .success {
    background-color: #66CC99;
}
.flashes .success:before {
    content: '⍟ ';
}
.flashes .success:after {
    content: ' ⍟';
}
.flashes .error {
    background-color: #E74C3C;
}
.flashes .error:before {
    content: '⚠ ';
}
.flashes .error:after {
    content: ' ⚠';
}


/* ************************************************* */
/* ******************** HOME *********************** */
/* ************************************************* */
.home .window {
    background-image: url('./img/window.png');
    background-position: top left;
    width: 100%;
    height: 350px;
    text-align: center;
}
.home .window h1,
.home .window h2 {
    background-color: #fefefd;
    display: inline-block;
    line-height: 1.5em;
    padding: 4px 12px;
    font-weight: normal;
}
.home .window h1 {
    margin-top: 100px;
    font-size: 2.9em;
    font-family: 'open_sansextrabold';
}
.home .window h2 {
    font-family: 'open_sanslight_italic';
    font-size: 1.3em;
}
.home .pitch {
    background-color: #222;
    color: #fefefd;
    padding: 10px 30px;
    text-align: center;
    font-size: 1.2em;
    line-height: 1.2em;
    font-family: 'open_sanslight';
}
.home .pitch strong {
    font-family: 'open_sanssemibold';
}
.home .pitch a {
    font-family: 'open_sanssemibold_italic';
    color: #fefefd;
}
.pitch p {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}
.home .partners {
    text-align: center;
    padding: 50px 0;
}
.home .partners li {
    display: inline-block;
    vertical-align: middle;
}
.home .partners li + li {
    margin-left: 50px;
}
.home .partners li img {
    max-width: 150px;
    max-height: 150px;
}
.home .actions {
    background-color: #2C3E50;
    text-align: center;
    padding: 50px 0;
}
.home .actions li {
    display: inline-block;
    width: 20%;
}
.home .actions li a {
    color: #fefefe;
    text-decoration: none;
    height: 140px;
    display: inline-block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top center;
    vertical-align: bottom;
    padding-top: 110px;
    text-transform: uppercase;
    font-family: 'open_sansbold';
}
.home .actions li a:hover {
    text-decoration: underline;
}
.home .actions .download {
    background-image: url('./img/download.svg');
}
.home .actions .contribute {
    background-image: url('./img/contribute.svg');
}
.home .actions .tools {
    background-image: url('./img/tools.svg');
}
.home .actions .about {
    background-image: url('./img/about.svg');
}
.home h2.inter {
    height: 70px;
    line-height: 70px;
    font-size: 30px;
    padding-left: 20px;
    background-color: #666;
    font-family: 'open_sanslight';
    font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 0;
    color: #fef0f1;
}
.home footer {
    margin-top: 0;
}

/* ************************************************* */
/* ***************** Content pages ***************** */
/* ************************************************* */
.head {
    background-color: #333;
}
.head .row {
    max-width: 1400px;
    margin-top: 0;
    background-color: #333;
    color: #efefef;
    padding: 40px;
    padding-left: 140px;
    background-repeat: no-repeat;
    background-position: center left 20px;
}
.prose {
    font-size: 1.1em;
}
.prose ul {
    list-style: circle;
}
.prose ul li {
    margin-left: 30px;
}
.prose h3 {
    margin-top: 15px;
}
sup {
    font-size: 0.8em;
    line-height: 1em;
}


/* ************************************************* */
/* ********************* API *********************** */
/* ************************************************* */
.api .head .row {
    background-image: url('./img/api.svg');
}
.api .entrypoint h2, .api .entrypoint h3 {
    font-weight: normal;
}
.api .entrypoint h2 {
    font-family: 'open_sansbold';
}
.api .entrypoint {
    color: #333;
    padding-top: 40px;
    padding-bottom: 40px;
}
.api .entrypoint + .entrypoint {
    border-top: 1px solid #ddd;
}
.api .entrypoint .details {
    background-color: #eee;
    color: #333;
    padding: 40px; 
    border: 1px solid #ddd;
}
.api .entrypoint pre {
    font-size: 12px;
    background-color: #ddd;
    border: solid 1px #ccc;
    width: 95%;
    overflow: auto;
    padding: 10px;
}
.api .col:first-of-type {
    padding-right: 20px;
}
.api footer {
    margin-top: 0;
}


/* ************************************************* */
/* ******************** TOOLS ********************** */
/* ************************************************* */
.tools .head .row {
    background-image: url('./img/tools.svg');
}
.tools h2 a {
    color: #333;
}
.tools .content ul li {
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50px;
    padding-left: 70px;
}
.tools ul .map {
    background-image: url('./img/map.svg');
}
.tools ul .csv {
    background-image: url('./img/csv-grey.svg');
}
.tools ul .api {
    background-image: url('./img/api-grey.svg');
}
.tooltip {
    position: fixed;
    z-index: 10000;
    background-color: #333;
    opacity: 0.9;
    color: #fefefd;
    padding: 10px;
    border-radius: 1px;
    box-shadow: 0 0 2px black;
    display: none;
    cursor: pointer;
}
.tooltip.tooltip-top:after {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #333;
    border-width: 11px;
    margin-left: -100px;
}
.tooltip.tooltip-left:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #333;
    border-width: 11px;
    margin-top: -10px;
}



/* ************************************************* */
/* ********************* MAP *********************** */
/* ************************************************* */
.map #map {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
}
.map #map .photon-input {
    width: 400px;
}
.map #map .leaflet-right {
    right: calc(50% - 200px);
}
.map footer {
    display: none;
}
.reverse-label {
    padding: 0 10px;
    margin-bottom: 0!important;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    opacity: 0.8;
}
.photon-autocomplete li .type {
    font-family: 'open_sanslight';
    font-weight: normal;
    float: right;
    font-size: 0.8em;
}
ul.photon-autocomplete {
    z-index: 1004;
}
.photon-autocomplete li.on {
    background-color: #ABB7B7;
}


/* ************************************************* */
/* ********************* CSV *********************** */
/* ************************************************* */
.csv .head .row {
    background-image: url('./img/csv.svg');
}
.csvtogeocoder #chosenColumns:empty:before {
    content: "Glisser les colonnes ici"!important;
}

/* ************************************************* */
/* ********************* FAQ *********************** */
/* ************************************************* */
.faq .head .row {
    background-image: url('./img/faq.svg');
}


/* ************************************************* */
/* ******************** ABOUT ********************** */
/* ************************************************* */
.about .head .row {
    background-image: url('./img/about.svg');
}


/* ************************************************* */
/* ********************* FOSS ********************** */
/* ************************************************* */
.foss .head .row {
    background-image: url('./img/copyleft.svg');
}


/* ************************************************* */
/* ******************* DOWNLOAD ******************** */
/* ************************************************* */
.download .head .row {
    background-image: url('./img/download.svg');
}
.download h2 {
    text-align: center;
    text-transform: uppercase;
}
.download-map {
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
    background-color: #fefefd;
}
.download-map .dep {
    fill: #ececec;
    stroke: #aaa;
}
.download-map .dep:hover {
    fill: #6C7A89;
    cursor: pointer;
}
.departements {
    border-right: 1px solid #ddd;
}
.departements li {
    padding: 5px;
}
.departements li:target {
    border-right: 3px solid #ddd;
    background-color: #f6f6f6;
}
.departements li:target:before {
    content: '⮕ ';
}


/* ************************************************* */
/* ******************** NEWS *********************** */
/* ************************************************* */
.news .head .row {
    background-image: url('./img/news.svg');
}


/* ************************************************* */
/* ***************** Contribute ******************** */
/* ************************************************* */
.contribute .head .row {
    background-image: url('./img/contribute.svg');
}


/* ************************************************* */
/* **************** Crowdsourcing ****************** */
/* ************************************************* */
body.crowdsourcing {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.crowdsourcing #map {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
}
.crowdsourcing .step {
    z-index: -1;
    opacity: 0;
}
.crowdsourcing .with-transition {
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.crowdsourcing #search .input {
    position: absolute;
    left: calc(50% - 250px);
    top: calc(50% - 100px);
    z-index: 1003;
    width: 500px;
    padding: 40px;
    box-shadow: 0 0px 2px 0px #999 inset;
    background-color: #fff;
    background-image: url('./img/texture.png');
}
.crowdsourcing #search input {
    margin-bottom: 0;
    width: 360px;
    display: inline-block;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    vertical-align: middle;
}
.crowdsourcing #search input:focus {
    outline: none;
}
.crowdsourcing #search .geolocate {
    width: 56px;
    height: 56px;
    display: inline-block;
    background-image: url('./img/geolocate.svg');
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    vertical-align: middle;
    margin-top: 0;
}
.crowdsourcing .step-action:before {
    background-color: #333;
    border: 3px solid #E0E0D1;
    border-radius: 27px;
    color: white;
    content: "1";
    display: block;
    font-family: 'open_sansbold';
    font-size: 36px;
    height: 48px;
    line-height: 46px;
    margin-left: -68px;
    position: absolute;
    text-align: center;
    width: 48px;
}
.crowdsourcing #overlay {
    background-color: #fff;
    opacity: 0.8;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-image: url('./img/texture.png');
}
.crowdsourcing.step-edit #overlay {
    opacity: 0;
    z-index: -1;
}
.crowdsourcing #panel {
    opacity: 0;
    position: absolute;
    right: -400px;
    top: 0;
    bottom: 0;
    width: 400px;
    background-color: #fff;
    padding: 20px;
    background-image: url('./img/texture.png');
}
.crowdsourcing #panel .handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background-color: #666;
    cursor: pointer;
    background-image: url('./img/properties.svg');
    background-repeat: no-repeat;
    background-position: top 30px center;
    background-size: 80%;
}
.crowdsourcing #panel .body {
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 10px;
}
.crowdsourcing.step-edit #panel.toggled,
.crowdsourcing #panel.toggled {
    right: -360px;
}
.crowdsourcing #login-provider .message,
.crowdsourcing #login .message,
.crowdsourcing #thanks .message {
    position: absolute;
    left: calc(50% - 400px / 2);
    bottom: 0;
    width: 400px;
    padding: 40px;
    box-shadow: 0 0px 2px 0px #999 inset;
    background-color: #fff;
    z-index: 1003;
}
.crowdsourcing.step-search #search,
.crowdsourcing.step-thanks #thanks,
.crowdsourcing.step-edit #panel {
    opacity: 1;
    display: block;
    z-index: 1003;
}
/* Workaround FF bug that doesn't propagate opacity to children */
/* when there is a transition in some cases */
.crowdsourcing #search > *,
.crowdsourcing #thanks > * {
    visibility: hidden;
}
.crowdsourcing.step-search #search > *,
.crowdsourcing.step-thanks #thanks > * {
    visibility: visible;
}
/* end FF bug workaround */
.crowdsourcing.step-edit #panel {
    right: 0;
}
.crowdsourcing.ask-for-login #login .message {
    bottom: calc(50% - 150px);
}
.crowdsourcing.choose-login-provider #login-provider .message {
    bottom: calc(50% - 50px);
    text-align: center;
}
.crowdsourcing.step-thanks #thanks .message {
    bottom: calc(50% - 100px);
}
.crowdsourcing #login {
    display: none;
}
.crowdsourcing.ask-for-login #login {
    display: block;
}
.crowdsourcing #login .message p {
    font-size: 0.9em;
    font-family: 'open_sanslight_italic';
}
.crowdsourcing #login-provider {
    display: none;
}
.crowdsourcing.choose-login-provider #login-provider {
    display: block;
}
.crowdsourcing #login-provider a.provider {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-image: url('./dgfr.png');
    background-size: contain;
    background-repeat: no-repeat;
}
.crowdsourcing #login-provider a.provider + a.provider {
    margin-left: 10px;
}
.crowdsourcing #login-provider a.france-connect {
    background-image: url('./france-connect.png');
}
.crowdsourcing #login-provider a.osm {
    background-image: url('./img/OSM-240px.png');
}
.crowdsourcing .marker {
    position: relative;
    background: #22313F;
    border: 3px solid #efefef;
    color: #efefef;
    text-align: center;
    width: 40px;
    font-family: 'open_sansbold';
    height: 30px;
    line-height: 20px;
    box-shadow: 6px 11px 11px 0px #000;
}
.crowdsourcing .marker:after, .marker:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.crowdsourcing .marker:after {
    border-color: rgba(122, 213, 115, 0);
    border-top-color: #22313F;
    border-width: 11px;
    margin-left: -11px;
}
.crowdsourcing .marker:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #efefef;
    border-width: 15px;
    margin-left: -15px;
}
.crowdsourcing .on-dirty {
    display: none;
}
.crowdsourcing.dirty .on-dirty {
    /*display: initial;*/
    display: inline-block;
}
.crowdsourcing.dirty .on-not-dirty {
    display: none;
}
.crowdsourcing #menu {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 1001;
    text-align: center;
    font-size: 0.9em;
}
.crowdsourcing #menu .buttons,
.crowdsourcing #menu .navigation {
    padding: 10px;
    background-color: #fff;
    background-image: url('./img/texture.png');
    border: 1px solid #eee;
    margin-top: 5px;
}
.crowdsourcing #menu .buttons {
    display: none;
}
.crowdsourcing #menu .button {
    line-height: 40px;
    height: 40px;
    margin-top: 5px;
    padding: 0 10px;
}
.crowdsourcing #menu .zoom {
    margin-top: 5px;
    border-radius: 2px;
    background-color: #fff;
    background-image: url('./img/texture.png');
    border: 1px solid #ccc;
    display: none;
    border: 1px solid #eee;
}
.crowdsourcing #menu .zoom a {
    padding: 0;
    display: inline-block;
    width: 50%;
    text-decoration: none;
    text-align: center;
    font-family: 'open_sanslight';
    font-size: 20px;
    height: 30px;
    line-height: 30px;
    vertical-align: middle;
}
.crowdsourcing #menu .goto-search a {
    background-color: #fff;
    display: block;
    padding: 10px;
    padding-left: 15px;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid #eee;
    font-family: 'open_sanslight';
    background-image: url('./img/back.svg');
    background-repeat: no-repeat;
    background-position: left 5px center;
    background-size: 15%;
}
.crowdsourcing.step-edit #menu .buttons,
.crowdsourcing.step-edit #menu .zoom {
    display: block;
}
.crowdsourcing.step-search .goto-search {
    display: none;
}
.crowdsourcing #menu .goto-search a:hover,
.crowdsourcing #menu .zoom a:hover {
    background-color: #E4F1FE;
}
.crowdsourcing #menu .zoom a + a {
    border-left: 1px solid #ccc;
}
.crowdsourcing #menu .buttons a {
    background-image: url('./img/submit.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40%;
    width: 48%;
    margin: 0;
}
.crowdsourcing #menu .buttons a + a {
    margin-left: 2px;
}
.crowdsourcing #menu .buttons a.cancel {
    background-image: url('./img/cancel.svg');
}
.crowdsourcing #menu .buttons a.fake-submit {
    cursor: not-allowed;
}
.crowdsourcing .when-logged {
    display: none;
}
.crowdsourcing.logged .when-logged {
    display: block;
}
.crowdsourcing.logged .when-anonymous {
    display: none;
}
.crowdsourcing textarea {
    height: 100px;
    resize: vertical;
}
.crowdsourcing .half + .half {
    margin-left: 1%;
}
.crowdsourcing .half {
    display: inline-block;
    width: 49%;
}
.crowdsourcing #panel textarea,
.crowdsourcing #panel input {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.crowdsourcing .leaflet-control-container {
    display: none;
}
.crowdsourcing.step-edit .leaflet-control-container {
    display: block;
}
.crowdsourcing .close {
    color: #999;
    position: absolute;
    right: 10px;
    top: 10px;
}
.crowdsourcing .close:before {
    content: '🗙';
    width: 20px;
    height: 20px;
    display: inline-block;
}
.crowdsourcing .close:hover {
    color: #666;
}

/* ************************************************* */
/* ********************* MOBILE ******************** */
/* ************************************************* */
@media only screen and (max-width:1023px) {
    header section {
        display: block;
    }
    header {
        padding: 5px;
        line-height: 1em;
        text-align: center;
        margin-bottom: 20px;
    }
    header .menu {
        float: none;
        margin-right: 0;
    }
    header .menu a {
        line-height: 50px;
    }
}
@media only screen and (max-width:767px) {
    .row {
        padding-left: 5px;
        padding-right: 5px;
    }
    .twide {
        width: 100%;
        padding-left: 0!important;
    }
    .tthird {
        width: 33.3333%;
    }
    .tshow {
        display: inherit;
    }
    .thide {
        display: none;
    }
    .crowdsourcing.step-edit #panel {
        right: -360px;
    }
    .crowdsourcing.step-edit #panel.toggled {
        right: 0;
        width: 100%;
    }
}
@media only screen and (max-width: 639px) {
    .mwide {
        padding-left: 0!important;
        width: 100%;
    }
    .mwide + .mwide {
        margin-top: 20px;
    }
    .mthird {
        width: 33.3333%;
    }
    .mshow {
        display: inherit;
    }
    .mhide {
        display: none!important;
    }
    header h1 a {
        display: block;
        background-position: center top 10px;
        padding-top: 50px;
        padding-left: 0;
    }
    header .menu a {
        display: block;
        line-height: 20px;
        margin-left: 0!important;
    }
    header .menu {
        margin-bottom: 10px;
    }
    .home .actions li a {
        height: 160px;
    }
    .home .actions li {
        width: 49%;
    }
    .home .partners li {
        margin-left: 0!important;
    }
}
@media only screen and (max-width: 499px) {
    .crowdsourcing #search .input {
        left: calc(50% - 150px);
        width: 300px;
    }
    .crowdsourcing #search input {
        width: 160px;
    }
}
@media only screen and (max-height: 767px) {
    .crowdsourcing #panel .body {
        overflow-y: scroll;
    }
}