.list-city {
    display: none;
}

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

.map {
    overflow: hidden;
    margin-bottom: 3em;
}
/*
.map__image {
    min-width: 280px;
    min-height: 200px;
    float: left;
}
*/
.map__image {
    min-width: 500px;
    float: left;
}

/*****************************************/
.map__image .Bedenac,
.map__image .Boresse-et-Martron,
.map__image .Cercoux,
.map__image .Chatenet,
.map__image .Chevanceaux,
.map__image .Clerac,
.map__image .La-Clotte,
.map__image .Le-Fouilloux,
.map__image .Montguyon,
.map__image .Montlieu-la-Garde,
.map__image .Neuvicq,
.map__image .Orignolles,
.map__image .Pouillac,
.map__image .Sainte-Colombe,
.map__image .Saint-Martin-d-Ary,
.map__image .Saint-Palais-de-Négrignac,
.map__image .Saint-Pierre-du-Palais,
.map__image .Boscamnant,
.map__image .La-Barde,
.map__image .La-Genetouze,
.map__image .Saint-Aigulin,
.map__image .Saint-Martin-de-Coux {
    fill: #009cb9;
    stroke: #fff;
    stroke-width: 1px;
    transition: fill 0.3s;
}

.map__image .is-active .Bedenac,
.map__image .is-active .Boresse-et-Martron,
.map__image .is-active .Cercoux,
.map__image .is-active .Chatenet,
.map__image .is-active .Chevanceaux,
.map__image .is-active .Clerac,
.map__image .is-active .La-Clotte,
.map__image .is-active .Le-Fouilloux,
.map__image .is-active .Montguyon,
.map__image .is-active .Montlieu-la-Garde,
.map__image .is-active .Neuvicq,
.map__image .is-active .Orignolles,
.map__image .is-active .Pouillac,
.map__image .is-active .Sainte-Colombe,
.map__image .is-active .Saint-Martin-d-Ary,
.map__image .is-active .Saint-Palais-de-Négrignac,
.map__image .is-active .Saint-Pierre-du-Palais,
.map__image .is-active .Boscamnant,
.map__image .is-active .La-Barde,
.map__image .is-active .La-Genetouze,
.map__image .is-active .Saint-Aigulin,
.map__image .is-active .Saint-Martin-de-Coux {
    fill: #a4ced2;
}

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

.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: #009cb9;
    padding: .5em;
    color: #fff;
}

.second-list {
    position: absolute;
    left: 30em;
}

/******************************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: 280px;
    }
}


@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;
    }
}