.list-city {
    display: none;
}

ul {
    padding: 0;
}

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

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

.map__image {
    min-width: 500px;
    float: left;
}

/*****************Agudelle************************/
.map__image .agudelle,
.map__image .Allas-Bocage,
.map__image .Allas-Champagne,
.map__image .Archiac,
.map__image .Arthenac,
.map__image .Brie-sous-Archiac,
.map__image .Champagnac,
.map__image .Clam,
.map__image .Clion,
.map__image .Fontaines-d-Ozillac,
.map__image .Guitinières,
.map__image .Jarnac-Champagne,
.map__image .Jonzac,
.map__image .Léoville,
.map__image .Lussac,
.map__image .Meux,
.map__image .Mortiers,
.map__image .Neuillac,
.map__image .Neulles,
.map__image .Nieul-le-Virouil,
.map__image .Ozillac,
.map__image .Réaux-sur-Trèfle,
.map__image .Saint-Ciers-Champagne,
.map__image .Sainte-Lheurine,
.map__image .Saint-Eugène,
.map__image .Saint-Georges-Antignac,
.map__image .Saint-Germain-de-Lusignan,
.map__image .Saint-Germain-de-Vibrac,
.map__image .Saint-Hilaire-du-Bois,
.map__image .Saint-Maigrin,
.map__image .Saint-Martial-de-Vitaterne,
.map__image .Saint-Médard,
.map__image .Saint-Sigismond-de-Clermont,
.map__image .Saint-Simon-de-Bordes,
.map__image .Villexavier {
    fill: #C44D86;
    stroke: #fff;
    stroke-width: 1px;
    transition: fill 0.3s;
}

.map__image .is-active .agudelle,
.map__image .is-active .Allas-Bocage,
.map__image .is-active .Allas-Champagne,
.map__image .is-active .Archiac,
.map__image .is-active .Arthenac,
.map__image .is-active .Brie-sous-Archiac,
.map__image .is-active .Champagnac,
.map__image .is-active .Clam,
.map__image .is-active .Clion,
.map__image .is-active .Fontaines-d-Ozillac,
.map__image .is-active .Guitinières,
.map__image .is-active .Jarnac-Champagne,
.map__image .is-active .Jonzac,
.map__image .is-active .Léoville,
.map__image .is-active .Lussac,
.map__image .is-active .Meux,
.map__image .is-active .Mortiers,
.map__image .is-active .Neuillac,
.map__image .is-active .Neulles,
.map__image .is-active .Nieul-le-Virouil,
.map__image .is-active .Ozillac,
.map__image .is-active .Réaux-sur-Trèfle,
.map__image .is-active .Saint-Ciers-Champagne,
.map__image .is-active .Sainte-Lheurine,
.map__image .is-active .Saint-Eugène,
.map__image .is-active .Saint-Georges-Antignac,
.map__image .is-active .Saint-Germain-de-Lusignan,
.map__image .is-active .Saint-Germain-de-Vibrac,
.map__image .is-active .Saint-Hilaire-du-Bois,
.map__image .is-active .Saint-Maigrin,
.map__image .is-active .Saint-Martial-de-Vitaterne,
.map__image .is-active .Saint-Médard,
.map__image .is-active .Saint-Sigismond-de-Clermont,
.map__image .is-active .Saint-Simon-de-Bordes,
.map__image .is-active .Villexavier {
    fill: #6b0c38;
}

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

.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: #C44D86;
    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;
    }
}

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

    .list-city {
        display: inline;
    }
}