.list-city {
    display: none;
}

ul {
    padding: 0;
}

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

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

.map__image {
    min-width: 500px;
    float: left;
    margin-right: 2%;
}

/*****************Agudelle************************/
.map__image .Avy,
.map__image .Belluire,
.map__image .Biron,
.map__image .Bougneau,
.map__image .Brives-sur-Charente,
.map__image .Celles,
.map__image .Chadenac,
.map__image .Cierzac,
.map__image .Coulonges,
.map__image .Échebrune,
.map__image .Fléac-sur-Seugne,
.map__image .Germignac,
.map__image .Givrezac,
.map__image .Lonzac,
.map__image .Marignac,
.map__image .Mazerolles,
.map__image .Mosnac,
.map__image .Pérignac,
.map__image .Pons,
.map__image .Saint-Grégoire-d-Ardennes,
.map__image .Saint-Léger,
.map__image .Saint-Martial-sur-Né,
.map__image .Saint-Palais-de-Phiolin,
.map__image .Saint-Quantin-de-Rançanne,
.map__image .Saint-Seurin-de-Palenne,
.map__image .Salignac-sur-Charente {
    fill: #0071bb;
    stroke: #fff;
    stroke-width: 1px;
    transition: fill 0.3s;
}

.map__image .is-active .Avy,
.map__image .is-active .Belluire,
.map__image .is-active .Biron,
.map__image .is-active .Bougneau,
.map__image .is-active .Brives-sur-Charente,
.map__image .is-active .Celles,
.map__image .is-active .Chadenac,
.map__image .is-active .Cierzac,
.map__image .is-active .Coulonges,
.map__image .is-active .Échebrune,
.map__image .is-active .Fléac-sur-Seugne,
.map__image .is-active .Germignac,
.map__image .is-active .Givrezac,
.map__image .is-active .Lonzac,
.map__image .is-active .Marignac,
.map__image .is-active .Mazerolles,
.map__image .is-active .Mosnac,
.map__image .is-active .Pérignac,
.map__image .is-active .Pons,
.map__image .is-active .Saint-Grégoire-d-Ardennes,
.map__image .is-active .Saint-Léger,
.map__image .is-active .Saint-Martial-sur-Né,
.map__image .is-active .Saint-Palais-de-Phiolin,
.map__image .is-active .Saint-Quantin-de-Rançanne,
.map__image .is-active .Saint-Seurin-de-Palenne,
.map__image .is-active .Salignac-sur-Charente {
    fill: #a4ced2;
}

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

.map__list {
    display: ruby;
}

.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: #0071bb;
    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: 500px;
    }
}


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

    /* For mobile phones: */
    .map__image {
        min-width: 350px;
    }

    .map__list {
        display: none;
    }
}

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

    .list-city {
        display: inline;
    }
}

@media (max-width:770px) {

    div {
        min-width: 20px
    }
}