#philosophy-clients {
    position: relative;
    padding-top: 100px;
    background-color: var(--dark-grey);
    display: flex;
    flex-wrap: wrap;
}

.clients-text {
    width: 870px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#logos-row {
    margin-bottom: 50px;
}

.logo-wrapper {
    width: 20%;
    flex-basis: 20%;
    max-width: 100%;
}

.logo-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.logo-inner img {
    width: 140px;
    max-width: 100%;
    height: auto;
}

.after-logos {
    font-size: 40px;
    letter-spacing: 16px;
    line-height: 50px;
    text-transform: uppercase;
    color: #6d6d6d;
    font-weight: 300;
}

#clients-map {
    margin-top: 80px;
    width: 960px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

#map-1 {
    margin-bottom: -120px;
}

#map-2 {
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    /*width: 100%;*/
    display: none;
}

.pin {
    position: absolute;
    width: 20px;
}

.pin-1 {
    top: 210px;
    left: 298px;
}

.pin-2 {
    top: 200px;
    left: 322px;
}

.pin-3 {
    top: 165px;
    left: 331px;
}

.pin-4 {
    top: 316px;
    left: 331px;
}

.pin-5 {
    top: 215px;
    left: 345px;
}

.pin-6 {
    top: 220px;
    left: 348px;
}

.pin-7 {
    top: 184px;
    left: 352px;
}

.pin-8 {
    top: 175px;
    left: 358px;
}

.pin-9 {
    top: 179px;
    left: 363px;
}

.pin-10 {
    top: 187px;
    left: 360px;
}

.pin-11 {
    top: 188px;
    left: 368px;
}

.pin-12 {
    top: 194px;
    left: 362px;
}

.pin-13 {
    top: 194px;
    left: 366px;
}

.pin-14 {
    top: 198px;
    left: 358px;
}

.pin-15 {
    top: 199px;
    left: 364px;
}

.pin-16 {
    top: 202px;
    left: 356px;
}

.pin-17 {
    top: 206px;
    left: 358px;
}

.pin-18 {
    top: 201px;
    left: 361px;
}

.pin-19 {
    top: 205px;
    left: 365px;
}

.pin-20 {
    top: 213px;
    left: 364px;
}

.pin-21 {
    top: 140px;
    left: 382px;
}

.pin-22 {
    top: 155px;
    left: 381px;
}

.pin-23 {
    top: 165px;
    left: 380px;
}

.pin-24 {
    top: 169px;
    left: 381px;
}

.pin-25 {
    top: 171px;
    left: 385px;
}

.pin-26 {
    top: 190px;
    left: 403px;
}

.pin-27 {
    top: 208px;
    left: 440px;
}

.pin-28 {
    top: 212px;
    left: 455px;
}

.pin-29 {
    top: 210px;
    left: 470px;
}

.pin-30 {
    top: 222px;
    left: 450px;
}

.pin-31 {
    top: 222px;
    left: 450px;
}

.pin-32 {
    top: 262px;
    left: 571px;
}

.pin-33 {
    top: 258px;
    left: 583px;
}

.pin-34 {
    top: 237px;
    left: 614px;

}

.pin-35 {
    top: 229px;
    left: 677px;
}

.pin-36 {
    top: 247px;
    left: 694px;
}

.pin {
    opacity: 0;
    z-index: 1;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
}

.pin.visible {
    opacity: 1;
}

@media (max-width: 1199.9px) {
    #clients-map {
        margin-left: -15px;
        margin-right: -15px;
        max-width: 990px;
    }
}

@media (max-width: 991.8px) {
    #philosophy-clients {
        padding: 40px 0;
    }

    #clients-map {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .pin {
        display: none;
    }

    #map-1 {
        display: none;
    }

    #map-2 {
        position: relative;
        display: block;
    }

    .logo-inner {
        padding: 0;
    }
}

@media (max-width: 767.8px) {
    .logo-wrapper {
        width: 33.33%;
        flex-basis: 33.33%;
        max-width: 33.33%;
    }
}

@media (max-width: 575.8px) {
    .logo-wrapper {
        width: 50%;
        flex-basis: 50%;
        max-width: 50%;
        padding: 20px 15px;
    }

    .after-logos {
        font-size: 30px;
        letter-spacing: 12px;
        line-height: 40px;
    }
}