.list-city {
    display: none;
}

ul {
    padding: 0;
}

li {
    list-style: none;
    padding: .4em;
}

.map {
    overflow: hidden;
    margin-bottom: 3em;
}

.map__image {
    min-width: 400px;
    min-height: 200px;
    float: left;
}

/*****************Agudelle************************/
.map__image .Bois,
.map__image .Boisredon,
.map__image .Champagnolles,
.map__image .Consac,
.map__image .Lorignac,
.map__image .Mirambeau,
.map__image .Plassac,
.map__image .Saint-Bonnet-sur-Gironde,
.map__image .Saint-Ciers-du-Taillon,
.map__image .Saint-Dizant-du-Bois,
.map__image .Saint-Dizant-du-Gua,
.map__image .Sainte-Ramée,
.map__image .Saint-Fort-sur-Gironde,
.map__image .Saint-Genis-de-Saintonge,
.map__image .Saint-Georges-des-Agoûts,
.map__image .Saint-Germain-du-Seudre,
.map__image .Saint-Martial-de-Mirambeau,
.map__image .Saint-Sorlin-de-Conac,
.map__image .Saint-Thomas-de-Conac,
.map__image .Semillac,
.map__image .Semoussac,
.map__image .Soubran {
    fill: #00a758;
    stroke: #fff;
    stroke-width: 1px;
    transition: fill 0.3s;
}

.map__image .is-active .Bois,
.map__image .is-active .Boisredon,
.map__image .is-active .Champagnolles,
.map__image .is-active .Consac,
.map__image .is-active .Lorignac,
.map__image .is-active .Mirambeau,
.map__image .is-active .Plassac,
.map__image .is-active .Saint-Bonnet-sur-Gironde,
.map__image .is-active .Saint-Ciers-du-Taillon,
.map__image .is-active .Saint-Dizant-du-Bois,
.map__image .is-active .Saint-Dizant-du-Gua,
.map__image .is-active .Sainte-Ramée,
.map__image .is-active .Saint-Fort-sur-Gironde,
.map__image .is-active .Saint-Genis-de-Saintonge,
.map__image .is-active .Saint-Georges-des-Agoûts,
.map__image .is-active .Saint-Germain-du-Seudre,
.map__image .is-active .Saint-Martial-de-Mirambeau,
.map__image .is-active .Saint-Sorlin-de-Conac,
.map__image .is-active .Saint-Thomas-de-Conac,
.map__image .is-active .Semillac,
.map__image .is-active .Semoussac,
.map__image .is-active .Soubran {
    fill: #0f472d;
}

/**********************************************************************/

.map__list {
    display: flex;
    flex-direction: row;
}

.map__list a {
    color: inherit;
    transition: color 0.3s;
    font-family: 'Montserrat', 'Tahoma', 'Calibri', sans-serif;
    text-decoration: none;
    color: #575757;
    font-weight: 300;
}

.map__list a.is-active {
    background-color: #00a758;
    padding: .5em;
    color: #fff;
}

/******************************MEDIA QUERIES**************************/

@media only screen and (max-width: 1124px) {

    /* For mobile phones: */

    .map__list {
        width: 100%;
    }
}

@media only screen and (max-width: 1124px) {
    /* For mobile phones: */

    .map__image {
        min-width: 400px;
    }
}


@media only screen and (max-width: 660px) {
    /* For mobile phones: */

    .map__list {
        display: none !important;
    }
}

@media only screen and (max-width: 660px) {
    /* For mobile phones: */

    .list-city {
        display: inline;
    }
}