.hq-projet-carte {
    margin-bottom: 10px;
}

.column-content {
    margin-top: 15px;
}

.column-aside {
    margin-top: 15px;
}

.column-aside > aside {
    margin-top: 0;
}

.module-diaporama {
    margin-top: 15px;
}

address {
    margin-bottom: 10px;
}
/* Pages projets */

#gmap-page-projet {
    position: relative;
    padding-bottom: 100%;
    height: 0;
    overflow: hidden;
    display: block;
}

.colonne-info-projet {
    background-color: #f8f8f8;
}
@media screen and (min-width: 768px) {
    #hq-main-header .hq-nav-grande-section {
        max-width: 40%;
        line-height: 24px;
    }
}

/* Cartes */
div[id*="_container"].esriMapContainer::after {
    content: "© Gouvernement du Québec.";
    z-index: 999;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 3px 5px;
    font-size: 1.2rem;
}
#carte-projet_container.esriMapContainer::after {
    top: 0px;
    bottom: unset;
}
/* #carte-projet {
    height: 250px;
    position: relative;
    background: url("/images2016/loading.gif") no-repeat center center#f2f2f3;
}
@media screen and (min-width: 992px){
    #carte-projet {
        height: 400px;
    }
}
.hq-partage.float-none {
    float: none;
    margin-top: 0;
    margin-bottom: 30px;
}
.hq-carte h3 {
    font-size: 1.6rem;
}
#carte-projet .mention-legale {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 100%;
    display: block;
    padding: 2px 10px;
    text-align: right;
    background-color: rgba(255, 255, 255, 0.9);
}

#carte-projet.mention-legale p {
    font-size: 1rem;
}
@media screen and (min-width: 912px) {
    #carte-projet .mention-legale p {
        font-size: 1.2rem;
    }
}

.mention-legale p img {
    vertical-align: bottom;
}
#carte-projet .esriControlsBR {
    display: none;
} */
/* Cartes */
#carte-projet {
    height: 250px;
    width: 100%;
    position: relative;
    background: url(/images2016/loading.gif) no-repeat center center#f2f2f3;
}
@media screen and (min-width: 992px) {
    #carte-projet {
        height: 400px;
    }
}
#carte-projet + .hq-bloc-gris {
    padding: 10px 20px;
}
#carte-projet + .hq-bloc-gris hr {
    margin: 0.5em 0;
}
#carte-projet svg path[data-popup-highlight] {
    display: none !important;
}
#carte-projet .mention-legale {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
    width: 100%;
    display: block;
    padding: 0 10px;
    text-align: right;
    background-color: rgba(255, 255, 255, 0.6);
}
#carte-projet.mention-legale p {
    font-size: 1rem;
}
@media screen and (min-width: 912px) {
    #carte-projet .mention-legale p {
        font-size: 1.2rem;
    }
}
.mention-legale p img {
    vertical-align: bottom;
}
#carte-projet .esriControlsBR {
    display: none;
}
.map .esriMapContainer .esriMapLayers {
    background-color: #fff;
}
/* bannieres pages projets */
#image-texte.banniere {
    display: none;
}
@media screen and (min-width: 768px) {
    #image-texte.banniere {
        display: block;
        background: url("http://via.placeholder.com/1920x250") no-repeat center;
        background-size: cover;
        height: 250px;
        max-height: 250px;
        margin-bottom: 10px;
    }
}
.hq-carte h3 {
    font-size: 1.6rem;
}
.need-traduction {
    background-color: yellow !important;
}

figure img.question_commentaires {
    display: block;
    margin: auto;
    max-width: 150px;
}

/*-----Argenteuil-----*/

.argenteuil #hq-accueil-image {
    background-image: url(/themes/projets/images/argenteuil/banniere-2009-396-0218.jpg);
    max-height: 250px;
    background-repeat: no-repeat;
    background-size: cover !important;
}
.argenteuil .dialogue-box {
    padding: 40px;
}
.dialogue-box.bg-grey {
    background-color: #f1f1f0;
}
.argenteuil ul.hq-liste-donnees li > span.txt {
    width: 69%;
}
.argenteuil ul.hq-liste-donnees li > span.nbr {
    width: 31%;
}
.argenteuil .legende-carte ul,
.gnl-quebec .legende-carte ul {
    list-style-type: none;
    list-style-image: none;
    padding: 0;
}
.argenteuil .hq-section.bg-grey.help,
.gnl-quebec .hq-section.bg-grey.help {
    padding: 10px 0;
}
.argenteuil .legende-carte ul li,
.gnl-quebec .legende-carte ul li {
    line-height: 1.5;
    clear: both;
}
.argenteuil .legende-carte ul li figure,
.gnl-quebec .legende-carte ul li figure {
    max-width: 60px;
    margin: 0 10px 0 0;
    float: left;
    max-height: 40px;
}
.argenteuil .legende-carte-mobile {
    max-height: 0;
    overflow: hidden;
    transition: 0.6s linear all;
}
.argenteuil .legende-carte-mobile.is-active {
    max-height: 1000px;
    margin: 10px 0;
}
.argenteuil .legende-carte-mobile .legende-niveau1 li,
.gnl-quebec .legende-carte-mobile .legende-niveau1 li {
    padding: 0;
    clear: both;
    font-size: 14px;
}
.argenteuil .legende-carte-mobile .legende-niveau1 p,
.gnl-quebec .legende-carte-mobile .legende-niveau1 p {
    font-size: 14px;
}
.argenteuil .legende-carte-mobile .legende-niveau1 .legende-niveau2 li,
.gnl-quebec .legende-carte-mobile .legende-niveau1 .legende-niveau2 li {
    padding: 0;
}
.argenteuil
    .legende-carte-mobile
    .legende-niveau1
    .legende-niveau2
    li
    .col-image,
.gnl-quebec
    .legende-carte-mobile
    .legende-niveau1
    .legende-niveau2
    li
    .col-image {
    float: left;
    max-width: calc(15% - (15px / 2));
    width: 100%;
    margin: 0 15px 0 0;
}
.argenteuil
    .legende-carte-mobile
    .legende-niveau1
    .legende-niveau2
    li
    .col-value,
.gnl-quebec
    .legende-carte-mobile
    .legende-niveau1
    .legende-niveau2
    li
    .col-value {
    float: left;
    max-width: calc(85% - (15px / 2));
    width: 100%;
    font-size: 14px;
}

@media only screen and (max-width: 767px) {
    .argenteuil #hq-accueil-image {
        background-image: url(/themes/projets/images/argenteuil/banniere-2009-396-0218.jpg) !important;
        max-height: 250px;
        display: block !important;
        height: 250px !important;
        background-repeat: no-repeat;
        background-size: cover !important;
        background-position: 50% 50% !important;
    }
}
#legende-carte-mobile {
    position: absolute;
    bottom: 0;
}
.argenteuil .map-story,
.gnl-quebec .map-story {
    position: relative;
}
.argenteuil #arcgis,
.gnl-quebec #arcgis {
    background-color: #fff;
    position: relative;
    width: 100%;
    height: 250px;
    transition: height 0.6s ease-in-out;
}
.argenteuil #arcgis.open {
    height: 650px;
}
@media screen and (min-width: 768px) {
    .argenteuil #arcgis,
    .gnl-quebec #arcgis {
        height: 350px;
    }
}
@media screen and (min-width: 912px) {
    .argenteuil #arcgis,
    .gnl-quebec #arcgis {
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
    }
}
.argenteuil #arcgis.fixed-map .close-map-button,
.gnl-quebec #arcgis.fixed-map .close-map-button {
    display: block;
}
@media screen and (min-width: 912px) {
    .argenteuil #arcgis.fixed-map .close-map-button,
    .gnl-quebec #arcgis.fixed-map .close-map-button {
        display: none;
    }
}
.argenteuil .close-map-button,
.gnl-quebec .close-map-button {
    display: none;
    text-align: center;
    padding: 5px 0;
    font-size: 1.4rem;
    color: #000;
    position: absolute;
    bottom: 0;
    z-index: 50;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.6);
}
.argenteuil #arcgis.fixed-map.closed {
    height: 30px;
}
.argenteuil #arcgis.fixed-map,
.gnl-quebec #arcgis.fixed-map {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
.argenteuil #arcgis.fixed-map + .story,
.gnl-quebec #arcgis.fixed-map + .story {
    padding-top: 250px;
}
@media screen and (min-width: 768px) {
    .argenteuil #arcgis.fixed-map + .story,
    .gnl-quebec #arcgis.fixed-map + .story {
        padding-top: 350px;
    }
}
@media screen and (min-width: 912px) {
    .argenteuil #arcgis.fixed-map + .story,
    .gnl-quebec #arcgis.fixed-map + .story {
        padding-top: 150px;
    }
}
@media screen and (min-width: 912px) {
    .argenteuil #arcgis.fixed-map,
    .gnl-quebec #arcgis.fixed-map {
        z-index: 0;
    }
}
.argenteuil #arcgis_root,
.gnl-quebec #arcgis_root {
    height: 200px !important;
    transition: 0.6s ease all;
}
@media screen and (min-width: 768px) {
    .argenteuil #arcgis_root,
    .gnl-quebec #arcgis_root {
        height: 350px !important;
    }
}
@media screen and (min-width: 912px) {
    .argenteuil #arcgis_root,
    .gnl-quebec #arcgis_root {
        height: 100% !important;
    }
}
@media screen and (min-width: 912px) {
    .argenteuil #arcgis.absolute-bottom,
    .gnl-quebec #arcgis.absolute-bottom {
        bottom: 0;
        top: auto;
    }
}
.argenteuil .story,
.gnl-quebec .story {
    position: relative;
    z-index: 1;
}
@media screen and (min-width: 912px) {
    .argenteuil .story,
    .gnl-quebec .story {
        width: 45%;
        padding-top: 150px;
    }
}
.argenteuil .story-content > div,
.gnl-quebec .story-content > div {
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: rgba(255, 255, 255, 0.9);
}
@media screen and (min-width: 912px) {
    .argenteuil .story-content > div,
    .gnl-quebec .story-content > div {
        margin-left: 5%;
    }
}
.argenteuil .esriSimpleSlider.esriSimpleSliderTL,
.gnl-quebec .esriSimpleSlider.esriSimpleSliderTL {
    display: block;
    top: 20px;
    right: 20px;
    left: auto;
}
.argenteuil .legende-carte,
.gnl-quebec .legende-carte {
    padding-top: 10px;
    padding-bottom: 10px;
    position: absolute;
    top: 135px;
    right: 0;
    z-index: 10001;
    max-height: calc(100vh - 60px);
    overflow: auto;
    width: 400px;
    transition: transform 300ms ease;
    transform: translate(100%);
    background-color: #fff;
}
.argenteuil .legende-carte.is-active,
.gnl-quebec .legende-carte.is-active {
    transform: translate(0);
}
.argenteuil #modal-btn-mobile-carte-legende,
.gnl-quebec #modal-btn-mobile-carte-legende {
    position: absolute;
    top: 90px;
    right: 20px;
    z-index: 1;
    padding: 4px 8px;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #57585a;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .argenteuil #modal-btn-mobile-carte-legende,
    .gnl-quebec #modal-btn-mobile-carte-legende {
        display: none;
    }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px) and (orientation: landscape) {
    .argenteuil #modal-btn-mobile-carte-legende,
    .gnl-quebec #modal-btn-mobile-carte-legende {
        display: none;
    }
    .argenteuil #arcgis,
    .gnl-quebec #arcgis {
        height: auto;
    }
}

/*-----Rapide blanc-----*/

.rapide-blanc #hq-accueil-image {
    background-image: url(/themes/projets/rapide-blanc/images/2015-247-437-w.jpg);
    max-height: 250px;
    background-repeat: no-repeat;
    background-size: cover !important;
}
@media only screen and (max-width: 767px) {
    .rapide-blanc #hq-accueil-image {
        background-image: url(/themes/projets/rapide-blanc/images/2015-247-437-w.jpg) !important;
        max-height: 250px;
        display: block !important;
        height: 250px !important;
        background-repeat: no-repeat;
        background-size: cover !important;
        background-position: 50% 50% !important;
    }
}
.rapide-blanc .hq-partage {
    float: none;
    margin: 0 0 30px;
}
.rapide-blanc .dialogue-box {
    padding: 40px;
}
.rapide-blanc img.diner-conference {
    margin-top: 2.6rem;
}
.rapide-blanc h4.h6 {
    font-size: 1.4rem;
}
.rapide-blanc .small-font {
    font-size: 1.2rem;
}
.rapide-blanc #measures-and-activities .hq-bloc-contour {
    min-height: 190px;
}
.rapide-blanc #measures-and-activities .hq-bloc-contour .big-number {
    display: inline-block;
    float: left;
    height: 100%;
    font-size: 4rem;
    color: #000000;
    background: #ffffff;
    padding: 0px;
}
.rapide-blanc #measures-and-activities .hq-bloc-contour p {
    margin-left: 45px;
}
.rapide-blanc .interessant-a-savoir p.text-normal {
    font-size: 1.6rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
}

/*-----des cèdres-----*/

.des-cedres #hq-accueil-image {
    background-image: url(/themes/projets/des-cedres/images/2014-301-L20193-AR.jpg);
    max-height: 250px;
    background-repeat: no-repeat;
    background-size: cover !important;
}
.des-cedres .dialogue-box {
    padding: 40px;
    background-color: #f8f8f8;
}

/*-----GNL Quebec-----*/

.gnl-quebec #carte-projet {
    /* height: 605px; */
}
.gnl-quebec #hq-accueil-image {
    background-image: url(/themes/projets/gnl-quebec/images/gnl-quebec-header-r.jpg);
    max-height: 250px;
    background-repeat: no-repeat;
    background-size: cover !important;
}
.gnl-quebec figcaption {
    margin: 10px 0 0;
}
.gnl-quebec .traceCommun {
    width: 100px;
    height: 4px;
    display: inline-block;
    margin: 0 0 3px 20px;
    background-color: red;
}
.gnl-quebec .traceA {
    width: 100px;
    height: 4px;
    display: inline-block;
    margin: 0 0 3px 20px;
    background-color: #ff99ff;
}
.gnl-quebec .traceB {
    width: 100px;
    height: 4px;
    display: inline-block;
    margin: 0 0 3px 20px;
    background-color: #3399ff;
}
.gnl-quebec .traceC {
    width: 100px;
    height: 4px;
    display: inline-block;
    margin: 0 0 3px 20px;
    background-color: #00cc33;
}
.gnl-quebec .traceD {
    width: 100px;
    height: 4px;
    display: inline-block;
    margin: 0 0 3px 20px;
    background-color: #b39c38;
}
.gnl-quebec .dialogue-box {
    padding: 40px;
    background-color: #f8f8f8;
}
.gnl-quebec ul.hq-liste-donnees.low-ratio li > span.txt {
    width: 60%;
}
.gnl-quebec ul.hq-liste-donnees.low-ratio li > span.nbr {
    width: 40%;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px) and (orientation: portrait) {
    .gnl-quebec #arcgis {
        height: auto;
    }
    .gnl-quebec #modal-btn-mobile-carte-legende {
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        top: 0;
        left: 0;
        right: 0;
        padding: 10px 20px;
        border-radius: 0;
        border: none;
        position: relative;
        transition: 0.3s ease height;
    }
    .gnl-quebec .traceCommun,
    .gnl-quebec .traceA,
    .gnl-quebec .traceB,
    .gnl-quebec .traceC,
    .gnl-quebec .traceD {
        width: 50px;
    }
    .gnl-quebec #modal-btn-mobile-carte-legende::before {
        content: url(/themes/projets/images/icone-legende.png);
        margin: 0 10px 0 0;
    }
    .gnl-quebec #modal-btn-mobile-carte {
        font-family: "Open Sans", sans-serif;
        font-weight: 600;
        padding: 10px 20px;
        text-align: center;
        border: none;
        position: relative;
        background-color: #f1f1f0;
        z-index: 3;
        cursor: pointer;
    }
    .gnl-quebec #modal-btn-mobile-carte::after {
        content: url(/themes/projets/images/icone-close-carte.png);
        margin: 0 0 0 20px;
        transition: 0.3s ease all;
        display: inline-block;
    }
    .gnl-quebec .closed #modal-btn-mobile-carte::after {
        transform: rotate(180deg);
    }
    .gnl-quebec #legende-carte-mobile {
        position: relative;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: 0.3s ease all;
    }
    .gnl-quebec #legende-carte-mobile.open {
        max-height: 1000px;
        margin: 10px 0;
    }
    .gnl-quebec .closed #arcgis_root {
        height: 0 !important;
    }
    .gnl-quebec .closed #modal-btn-mobile-carte {
        top: 0;
    }
    .gnl-quebec .closed #modal-btn-mobile-carte-legende {
        height: 0;
        overflow: hidden;
        padding: 0;
    }
    .gnl-quebec #arcgis.fixed-map.closed + .story {
        padding-top: 50px;
    }
    .gnl-quebec .closed #legende-carte-mobile {
        height: 0px;
    }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 767px) and (orientation: landscape) {
    .gnl-quebec #legende-carte-mobile {
        display: none;
    }
    #modal-btn-mobile-carte {
        display: none;
    }
}