.block-map-perso{margin-top:100px}
.block-map-perso .customMarker:not(.openMarker){-webkit-filter: grayscale(1); filter: grayscale(1);}
.customMarker{background: url(//www.epinal-labelleimage.fr/wp-content/themes/test-commune/images/icon-marker.svg) no-repeat center center; background-size: contain; width: 45px; height: 45px;}
.customMarker.noIcon{background: url(//www.epinal-labelleimage.fr/wp-content/themes/test-commune/images/icon-marker-empty.svg) no-repeat center center; background-size: contain;}
.customMarker img{width: 16px;position: absolute; left: 50%; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); top:50%; transform: translate(-50%, -30%); margin-top: -10px}
.leaflet-popup {margin-left: 2px;}
.block-map-perso .leaflet-popup-content{padding: 0; margin: 0}
.block-map-perso .leaflet-popup-content .img{width: 100%; position: relative; height: 100px}
.block-map-perso .leaflet-popup-content .name{font-weight: 600; color: #000000; text-transform: uppercase; font-size: 1rem; text-align: center; padding: 15px 23px; position: relative;}
.block-map-perso .leaflet-popup-content .name::after{content: ''; position: absolute; bottom: 0; left: calc(50% - 30px); height: 2px; width: 60px; background-color: #29617C;}
.block-map-perso .leaflet-popup-content .content{padding: 15px; min-width: 180px; text-align: center;}
.block-map-perso .leaflet-popup-content .content p {font-size: 0.9rem;}
.block-map-perso .leaflet-popup-content .content p + p {margin-top: 10px;}
.block-map-perso .leaflet-popup-content .content a{color: #00788C}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{overflow: hidden; padding: 0; }
.leaflet-popup-content p{margin: 0}
.leaflet-container a.leaflet-popup-close-button{color: #FFF; right: 3px}
.mapPerso {position: relative; z-index: 4}
.block-map-perso .fullBackground {height: 100px;}
.block-map-perso .leaflet-popup-content-wrapper {border-radius: 0;}.s4Communes.noJsAndAction * {pointer-events: none!important;}
.s4Communes {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 30px 0;}
.s4Communes>* {width: 50%; -webkit-flex: 0 0 50%; -ms-flex: 0 0 50%; flex: 0 0 50%;}
.s4Communes .mapContent {}
.s4Communes .mapContent svg {height: 800px; width: 100%;}
.s4Communes .mapContent svg path {transition: all 0.2s ease-in-out;}
.s4Communes .mapContent svg path.activePath:hover, .s4Communes .mapContent svg path.fakingHover {cursor: pointer; fill: #BF643F;}
.s4Communes .txtContent {}
.s4Communes .txtContent .divContent {padding: 60px;}
.s4Communes .txtContent .divContent .title2 {color: #529AAE; padding-bottom: 0; margin-bottom: 0;}
.s4Communes .txtContent .divContent .title2::before {content: unset; display: none;}
.s4Communes .txtContent .divContent>*:not(:first-child) {margin-top: 30px;}
.s4Communes .txtContent .divContent label.select {display: block; margin-top: 60px; position: relative;}
.s4Communes .txtContent .divContent label.select::before {content: ''; position: absolute; top: 50%; right: 15px; width: 15px; height: 15px; background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(//www.epinal-labelleimage.fr/wp-content/themes/test-commune/images/arrow-right-blue.svg); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); pointer-events: none;}
.s4Communes .txtContent .divContent label.select select {-webkit-appearance: none; appearance: none; outline: none; width: 100%; background-color: transparent; border: 1px solid #529AAE; color: #529AAE; font-weight: 700; padding: 10px; font-size: 1.2rem;}
.s4Communes .txtContent .divContent .commune-info:not(.showIt) {display: none!important;}
.s4Communes .txtContent .divContent .commune-info .box-ville {background-color: #FFFFFF; color: #000000; position: relative; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); width: 100%; max-width: 350px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .img-ville {position: relative; height: 130px; overflow: hidden;}
.s4Communes .txtContent .divContent .commune-info .box-ville .img-ville .fond {position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center; filter: blur(5px); -webkit-filter: blur(5px);}
.s4Communes .txtContent .divContent .commune-info .box-ville .img-ville svg {position: relative; height: 80%; margin: auto; margin-bottom: 0;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville {padding: 30px; text-align: center;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .titre {font-weight: 700; text-transform: uppercase;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .titre::after {content: ''; display: block; width: 100%; max-width: 50px; margin: auto; margin-top: 15px; height: 2px; background-color: #29617C;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu {margin-top: 20px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu>* + * {margin-top: 10px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu>ul {text-align: left;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu>ul li {font-size: 1rem;}
@media (max-width: 991px) {
main .s4Communes .mapContent svg {height: auto;}
.s4Communes .txtContent .divContent {padding: 40px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville {padding: 20px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .titre::after, .s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu {margin-top: 10px;}
}
@media (max-width: 767px) {
.s4Communes {-webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;}
.s4Communes>* {width: 100%; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%;}
.s4Communes .txtContent {margin-top: 30px;}
.s4Communes .txtContent .divContent {padding: 0;}
main .s4Communes .mapContent svg {height: 300px;}
.s4Communes .txtContent .divContent label.select {margin-top: 20px;}
.s4Communes .txtContent .divContent .commune-info .box-ville .txt-ville .contenu p {font-size: 1.2rem; line-height: 1.3;}
.s4Communes .txtContent .divContent .commune-info .box-ville {margin: auto;}
}