#offices{position:relative;margin-top:50px;width:100%;height:500px;background-color:#f5f9f9}
h1{position:relative;display:inline-block;margin-top:50px;text-align:center;width:95%;max-width:800px;font-size:24px;font-weight:bold;font-family:'Assistant',sans-serif;color:black}
#text-box{position:absolute;top:100px;left:10%;font-family:'Assistant',sans-serif;width:40%;min-width:200px;color:#222}
#text-box>p{margin-bottom:40px}
#offices p{font-size:24px}
#offices .boldie{font-size:42px;font-weight:bold}
#offices .text3{font-size:20px;color:black}
#offices .cities{display:inline-block;position:relative;border:0;background-color:#2B3856;border-radius:10px;padding:10px;color:white;margin-left:5px;width:90px;box-sizing:border-box;text-align:center;margin-bottom:9px;font-size:16px}
#map-zone{position:absolute;left:50%;height:100%;border:0}
#map-zone img{height:500px;width:400px}
#map-zone a,#map-zone button{position:absolute;width:15px;height:15px;background-color:blue;border:0;border-radius:50%;cursor:pointer}
#map-zone a:hover,#map-zone button{width:21px;height:21px;background-color:#091A7F;transform:translate(-3px,-3px)}
#je1{top:368px;left:227px}
#je2{top:370px;left:280px}
#je3{top:243px;left:178px}
#je4{top:150px;left:190px}
#je5{top:300px;left:330px}
#je6{top:67px;left:72px}
#je7{top:182px;left:168px}

@media(max-width:800px){
#offices{height:auto;margin-top:20px;overflow:hidden}
#offices p{font-size:16px}
#offices .boldie{font-size:28px}
#text-box{width:90%;top:auto;margin-top:20px;left:5%}
#text-box>p{margin-bottom:20px}
#map-zone{position:relative;height:auto;width:320px}
h1{font-size:18px;margin-top:20px}
#offices .cities{width:85px;margin-left:0}
#map-zone img{height:300px;width:100%}
#je1{top:215px;left:179px}
#je2{top:220px;left:222px}
#je3{top:147px;left:150px}
#je4{top:90px;left:151px}
#je5{top:172px;left:264px}
#je6{top:36px;left:53px}
#je7{top:108px;left:132px}
#map-zone{left:auto;display:inline-block;margin-top:300px}
}

@media(max-width:610px){
#text-box{text-align:center}}