/* office map
   ============================ */

.office-map .wrapper {
    padding-bottom: 40px;
    padding-top: 40px;
}
.office-map h2 {
    margin-bottom: 32px;
}

/* responsive
   ============================ */

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

    /* office map */
    .office-map.g-map .map {
        height: auto;
    }
    .office-map .wrapper {
        padding-bottom: 0;
    }
    .office-map h2 {
        margin-bottom: 22px;
    }

    .office-map .desktop-tablet-view {
        display: none;
    }
    .office-map .mobile-view {
        display: block;
    }

    /* country selection */
    .office-map .country-select {
        background: url("../images/map.png") no-repeat center top transparent;
        background-size: cover;
        height: auto;
        padding: 54px 21px 55px;
        width: 100%;
    }

    /* location details */
    .office-map.g-map .location-details {
        bottom: auto;
        clear: both;
        max-width: 100%;
        position: relative;
        right: auto;
        top: 0;
    }
    .office-map.g-map .location-details .inner {
        padding: 29px 20px 14px;
    }
    .office-map.g-map .location-details .inner header {
        padding-top: 0;
    }
    .office-map.g-map .location-details .inner header h3 {
        margin-bottom: 22px;
    }
    .office-map.g-map .location-details .inner header h3,
    .office-map.g-map .location-details .inner header h3 > span {
        font-size: 2.6rem;
        line-height: 3.2rem;
    }
    .office-map.g-map .location-details .inner ul > li {
        font-size: 1.4rem;
        line-height: 2.2rem;
        padding-bottom: 22px;
    }
    .office-map.g-map .location-details .inner ul > li > a:hover,
    .office-map.g-map .location-details .inner ul > li > a:focus {
        color: #ffffff;
        text-decoration: underline;
    }
}