body {
    margin: 0;
}

.container {
    max-width: 1280px;
}

@media screen and (min-width: 992px) {
    .button {
        display: none;
    }
}

.map {
    position: relative;
    height: auto;
    border-bottom: 1px solid #a3a3a3;
    max-width: 848px;
}

@media screen and (min-width: 992px) {
    .map {
        float: left;
        border-bottom: none;
    }
    .map--small {
        width: calc((100% / 3) - 1px);
    }
    .map--big {
        width: calc((100% / 3) * 2);
        border-right: 1px solid #a3a3a3;
    }
    .map:nth-child(2) {
        border-bottom: 1px solid #a3a3a3;
    }
}

.map__title {
    color: #0c2e82;
    font-family: 'Fira Sans Condensed', sans-serif;
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    position: absolute;
    top: 20px;
    left: 20px;
    margin-top: 0;
}

.map__image {
    display: block;
    max-width: 100%;
    height: auto;
}

/*** Markers ***/
.map__marker {
    position: absolute;
}

.map__marker--north {
    width: 13px;
    top: 10px;
    right: 5px;
}

.map__marker--center {
    height: 32px;
}

.map__campus-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.map__campus-list__img {
    position: absolute;
    top: 63.181818%;
    left: 52.1875%;
    margin-top: -118px;
    height: 118px;
    z-index: 2;
}

.map--big .map__campus-list {
    position: absolute;
    top: 63.181818%;
    left: 52.1875%;
    z-index: 3;
    margin-top: -96px;
    width: 72px;
}

.map--big .map__campus-link {
    display: block;
    color: transparent;
}

@media screen and (min-width: 992px) {
    .map--big .map__marker--north {
        right: 30px;
    }
    .map--big .map__campus-list {
        display: block;
        color: inherit;
        position: static;
        margin-top: 0;
        width: auto;
    }
    .map__campus-list {
        height: 0;
        display: block;
    }
    .map__campus-list__img {
        display: none;
    }
}

/* ------------- Markers position ------- */
/* ----------- Charleroi --------------- */
.map__marker--gosselies {
    top: 13.01369863%;
    margin-top: -27px;
    left: 64.386792453%;
    margin-left: -14px;
}

.map__marker--ville-haute {
    top: 59.246575342%;
    margin-top: -34px;
    left: 59.433962264%;
    margin-left: -14px;
}

.map__marker--charleroi-center {
    top: 69.178082192%;
    margin-top: -32px;
    left: 57.311320755%;
    margin-left: -32px;
}

.map__marker--charleroi-airport {
    height: 18px;
    top: 19.863013699%;
    margin-top: -18px;
    left: 66.273584906%;
    margin-left: -10px;
}

/* -------------- Belgium ------------------- */
.map__marker--brussels {
    left: 53.537735849%;
    margin-left: -14px;
    top: 45.205479452%;
    margin-top: -34px;
}

.map__marker--charleroi {
    left: 57.075471698%;
    margin-left: -14px;
    top: 56.849315068%;
    margin-top: -34px;
}

/* --------- Brussels -------- */

/*** Brussels ***/
.map__marker--brussels-center {
    top: 47.431506849%;
    margin-top: -30px;
    left: 44.575471698%;
    margin-left: -32px;
}

.map__marker--brussels-airport {
    height: 18px;
    top: 9.246575342%;
    margin-top: -18px;
    left: 83.372641509%;
    margin-left: -10px;
}

.map__campus-list .map__marker--erasme {
    display: none;
}
@media screen and (max-width: 992px) {
    .map--big .map__marker--campus:not(.map__marker--erasme) {
        display: none;
    }
}
@media screen and (min-width: 992px) {
    .map--big .map__marker--campus:not(.map__marker--erasme) {
        display: block;
    }
    .map__campus-list__container {
        position: static;
        margin-top: 0;
        padding: 0;
    }
}

.campus-area {
    position: absolute;
    background-color: rgba(12, 46, 130, 0.35);
    content: '';
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    left: 52.1875%;
    margin-left: -21px;
    top: 63.181818%;
    margin-top: -23px;
    z-index: 1;
}
@media screen and (min-width: 768px) {
    .campus-area {
        width: 80px;
        height: 80px;
        margin-left: -40px;
        margin-top: -40px;
    }
}
@media screen and (min-width: 992px) {
    .campus-area {
        display: none;
    }
}

.map__campus-title--erasme {
    display: none;
}

.map__marker--campus {
    height: 34px;
    display: block;
}

.map__marker--erasme {
    top: 63.636364%;
    left: 23.75%;
    margin-left: -64px;
    margin-top: -34px;
}

.map--small .map__campus-title {
    display: none;
}

@media screen and (min-width: 992px) {
    .map__campus-list--brussels {
        background-color: transparent;
        position: static;
    }
    .map__marker--flagey {
        top: 57.191780822%;
        margin-top: -34px;
        left: 50.117924528%;
        margin-left: -14px;
    }

    .map__marker--plaine {
        top: 63.356164384%;
        margin-top: -34px;
        left: 56.839622642%;
        margin-left: -14px;
    }

    .map__marker--solbosch {
        top: 69.178082192%;
        margin-top: -34px;
        left: 53.655660377%;
        margin-left: -14px;
    }

    .map__marker--uccle {
        top: 67.808219178%;
        margin-top: -34px;
        left: 47.405660377%;
        margin-left: -53px;
    }

    .map__marker--usquare {
        top: 63.01369863%;
        margin-top: -34px;
        left: 52.004716981%;
        margin-left: -70px;
    }
}