.location-map{ position:relative } .location-map .map{ background:url(../map.svg) no-repeat center center; background-size:cover } .location-map .map-grey{ background:url(../map.svg) no-repeat center center; background-size:cover } .location-container{ position:absolute; top:50%; left:50% } .section-dark .location-map .map{ opacity:0.5 } .location-map-sm{ height:260px } .location-map-sm .location-container{ height:260px; width:524px; margin:-130px 0 0 -262px } .location-map-sm .map{ height:260px; width:524px } .location-map-sm .location-name{ opacity:0; visibility:hidden; -webkit-transition:all ease .15s; transition:all ease .15s; -webkit-transform:scale(0.65); transform:scale(0.65); -webkit-transform-origin:bottom left; transform-origin:bottom left } .location-map-sm .location:hover{ z-index:1000 } .location-map-sm .location:hover .location-name{ opacity:1; visibility:visible; -webkit-transform:scale(1); transform:scale(1) } @media (max-width: 991px){ .location-map-sm{ height:170px } .location-map-sm .location-container{ -webkit-transform:scale(0.65); transform:scale(0.65) } } .location-map-lg .map{ height:580px; width:1174px } @media (min-width: 568px){ .location-map-lg{ height:520px } .location-map-lg .location-container{ height:580px; width:1174px; margin:-290px 0 0 -582px } .location-map .actions{ position:absolute; bottom:0; left:0; width:100% } } @media (min-width: 568px) and (max-width: 1199px){ .location-map-lg{ height:450px } .location-map-lg .location-container{ -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -ms-transform:scale(0.9); -o-transform:scale(0.9); transform:scale(0.9) } } @media (min-width: 568px) and (max-width: 991px){ .location-map-lg{ height:424px } .location-map-lg .location-container{ -webkit-transform:scale(0.68); -moz-transform:scale(0.68); -ms-transform:scale(0.68); -o-transform:scale(0.68); transform:scale(0.68) } } @media (min-width: 568px) and (max-width: 767px){ .location-map-lg{ height:290px } .location-map-lg .location-container{ -webkit-transform:scale(0.5); -moz-transform:scale(0.5); -ms-transform:scale(0.5); -o-transform:scale(0.5); transform:scale(0.5) } } @media (max-width: 567px){ .location-map-lg .map{ display:none } .location-map-lg .location-container{ position:inherit; top:auto; left:auto; max-width:380px; margin:0 auto; padding:25px 0 } .location-container:after,.location-container:before{ display:block; content:""; clear:both } .location-map-lg .location-map{ padding:0 30px } } .location-pin,.location-pin:after{ background-color:#1e88e4; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100% } .location-pin{ position:relative; z-index:999; display:block; height:12px; width:12px } .location-pin-lg{ position:relative; display:block; height:20px; width:20px } .location-pin:after{ position:absolute; top:50%; left:50%; display:block; content:""; height:22px; width:22px; margin:-11px 0 0 -11px; -webkit-animation:pulsate 2s linear; animation:pulsate 2s linear; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite } .location-pin-lg:after{ height:40px; width:40px; margin:-20px 0 0 -20px } .location-map-sm .location{ height:8px; width:8px; cursor:pointer } .location-map-sm .location-pin{ height:8px; width:8px } .location-map-sm .location-pin:after{ height:16px; width:16px; margin:-8px 0 0 -8px } @-webkit-keyframes "pulsate"{ 0%{ -webkit-transform:scale(0); opacity:.05; } 20%{ -webkit-transform:scale(0.7); opacity:.1; } 40%{ -webkit-transform:scale(0.9); opacity:.2; } 60%{ -webkit-transform:scale(1.1); opacity:.3; } 100%{ -webkit-transform:scale(1.4); opacity:0; } } @keyframes "pulsate"{ 0%{ transform:scale(0); opacity:.05; } 20%{ transform:scale(0.7); opacity:.1; } 40%{ transform:scale(0.9); opacity:.2; } 60%{ transform:scale(1.1); opacity:.3; } 100%{ transform:scale(1.4); opacity:0; } } .location{ position:absolute; z-index:998; height:12px; width:12px } .location-name{ position:absolute; z-index:999; display:block; height:28px } .location-name span{ display:block; height:28px; padding:0 10px; background-color:#1e88e4; color:#fff; font-size:14px; line-height:28px; white-space:nowrap; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; -webkit-box-shadow:0 5px 20px -5px rgba(11,27,38, 0.2); box-shadow:0 5px 20px -5px rgba(11,27,38, 0.2) } .location-name:after{ position:absolute; z-index:-1; display:block; content:""; height:1px; width:20px; background-color:#545a5e } .location-map-grey .location-name:after{ background-color:#c4cacc } .location-seattle{ top:180px; left:150px } .location-seattle .location-name{ bottom:44px; right:44px } .location-seattle .location-name:after{ bottom:-20px; right:-49px; width:58px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } .location-map-sm .location-seattle{ top:84px; left:66px } .location-silicon-valley{ top:215px; left:148px } .location-silicon-valley .location-name{ top:35px; right:37px } .location-silicon-valley .location-name:after{ top:-10px; right:-35px; width:50px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-silicon-valley{ top:100px; left:64px } .location-los-angeles{ top:232px; left:164px } .location-los-angeles .location-name{ top:78px; right:-45px } .location-los-angeles .location-name:after{ left:50%; top:-70px; height:70px; width:1px } .location-map-sm .location-los-angeles{ top:108px; left:72px } .location-dallas{ top:238px; left:232px } .location-dallas .location-name{ bottom:72px; right:-24px } .location-dallas .location-name:after{ left:50%; bottom:-60px; height:60px; width:1px } .location-map-sm .location-dallas{ top:106px; left:98px } .location-miami{ top:265px; left:288px } .location-miami .location-name{ top:29px; left:30px } .location-miami .location-name:after{ top:-10px; left:-30px; width:40px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } .location-map-sm .location-miami{ top:120px; left:126px } .location-atlanta{ top:234px; left:276px } .location-atlanta .location-name{ top:-9px; left:110px } .location-atlanta .location-name:after{ top:50%; left:-100px; width:100px } .location-map-sm .location-atlanta{ top:108px; left:126px } .location-new-jersey{ top:210px; left:300px } .location-new-jersey .location-name{ bottom:28px; left:28px } .location-new-jersey .location-name:after{ bottom:-10px; left:-24px; width:30px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-new-jersey{ top:98px; left:132px } .location-chicago{ top:200px; left:267px } .location-chicago .location-name{ bottom:70px; left:70px } .location-chicago .location-name:after{ bottom:-31px; left:-75px; width:90px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-chicago{ top:90px; left:116px } .location-london{ top:134px; left:525px } .location-london .location-name{ bottom:24px; right:24px } .location-london .location-name:after{ bottom:-10px; right:-24px; width:30px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } .location-map-sm .location-london{ top:62px; left:232px } .location-amsterdam{ top:131px; left:545px } .location-amsterdam .location-name{ bottom:73px; left:73px } .location-amsterdam .location-name:after{ bottom:-32px; left:-78px; width:95px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-amsterdam{ top:60px; left:242px } .location-paris{ top:154px; left:538px } .location-paris .location-name{ top:50px; left:50px } .location-paris .location-name:after{ top:-20px; left:-52px; width:65px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } .location-map-sm .location-paris{ top:70px; left:240px } .location-frankfurt{ top:142px; left:562px } .location-frankfurt .location-name{ top:-9px; left:60px } .location-frankfurt .location-name:after{ top:50%; left:-60px; width:60px } .location-map-sm .location-frankfurt{ top:66px; left:250px } .location-korea{ top:200px; left:960px } .location-korea .location-name{ bottom:72px; right:-24px } .location-korea .location-name:after{ left:50%; bottom:-60px; height:60px; width:1px } .location-map-sm .location-korea{ top:106px; left:98px } .location-tokyo{ top:201px; right:162px } .location-tokyo .location-name{ bottom:50px; left:50px } .location-tokyo .location-name:after{ bottom:-22px; left:-58px; width:75px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-tokyo{ top:90px; right:72px } .location-singapore{ top:318px; right:285px } .location-singapore .location-name{ bottom:30px; left:35px } .location-singapore .location-name:after{ bottom:-12px; left:-34px; width:45px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-singapore{ top:142px; right:126px } .location-map-sm .location-singapore .location-name{ bottom:20px; left:20px } .location-map-sm .location-singapore .location-name:after{ bottom:-10px; left:-24px; width:25px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-hongkong{ top:255px; right:260px } .location-hongkong .location-name{ bottom:35px; left:-32px } .location-hongkong .location-name:after{ bottom:-10px; left:34px; width:45px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-hongkong{ top:142px; right:126px } .location-map-sm .location-hongkong .location-name{ bottom:24px; left:24px } .location-map-sm .location-hongkong .location-name:after{ bottom:-10px; left:-24px; width:30px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-taiwan{ top:247px; left:940px } .location-taiwan .location-name{ top:-9px; left:110px } .location-taiwan .location-name:after{ top:50%; left:-100px; width:100px } .location-map-sm .location-taiwan{ top:-200px; left:526px } .location-hanoi{ top:255px; left:880px } .location-hanoi .location-name{ bottom:44px; right:44px } .location-hanoi .location-name:after{ bottom:-20px; right:-49px; width:58px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } .location-map-sm .location-hanoi{ top:84px; left:66px } .location-dannang{ top:272px; left:890px } .location-dannang .location-name{ bottom:20px; right:40px } .location-dannang .location-name:after{ bottom:0px; right:-35px; width:40px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } .location-map-sm .location-dannang{ top:40px; left:66px } .location-hcm{ top:290px; left:885px } .location-hcm .location-name{ top:35px; right:37px } .location-hcm .location-name:after{ top:-10px; right:-35px; width:50px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .hcm{ top:100px; left:64px } .location-indonesia{ top:360px; left:950px } .location-indonesia .location-name{ top:35px; right:32px } .location-indonesia .location-name:after{ top:-10px; right:-35px; width:50px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .indonesia{ top:300px; left:520px } .location-malaysia{ top:300px; right:300px } .location-malaysia .location-name{ top:-9px; right:110px } .location-malaysia .location-name:after{ top:50%; right:-100px; width:100px } .location-map-sm .location-malaysia{ top:-300px; right:526px } .location-philippines{ top:310px; left:960px } .location-philippines .location-name{ top:-9px; left:110px } .location-philippines .location-name:after{ top:50%; left:-100px; width:100px } .location-map-sm .location-philippines{ top:-200px; left:526px } .location-india{ top:400px; left:610px } .location-india .location-name{ top:35px; right:37px } .location-india .location-name:after{ top:-10px; right:-35px; width:50px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-india{ top:100px; left:64px } .location-sydney{ bottom:102px; right:83px } .location-sydney .location-name{ bottom:50px; left:50px } .location-sydney .location-name:after{ bottom:-22px; left:-58px; width:75px; -webkit-transform:rotate(-45deg); transform:rotate(-45deg) } .location-map-sm .location-sydney{ bottom:44px; right:36px } .location-london .location-name,.location-seattle .location-name{ -webkit-transform-origin:bottom right; transform-origin:bottom right } .location-silicon-valley .location-name{ -webkit-transform-origin:top right; transform-origin:top right } .location-los-angeles .location-name{ -webkit-transform-origin:top center; transform-origin:top center } .location-dallas .location-name{ -webkit-transform-origin:bottom center; transform-origin:bottom center } .location-atlanta .location-name,.location-frankfurt .location-name{ -webkit-transform-origin:left center; transform-origin:left center } .location-miami .location-name,.location-paris .location-name{ -webkit-transform-origin:top left; transform-origin:top left } @media (max-width: 1199px){ .location-seattle .location-name{ bottom:54px; right:-26px } .location-tokyo .location-name{ left:auto; right:50px } .location-sydney .location-name{ left:auto; right:50px } .location-tokyo .location-name:after,.location-sydney .location-name:after{ left:auto; right:-58px; -webkit-transform:rotate(45deg); transform:rotate(45deg) } .location-seattle .location-name:after{ right:3px; -webkit-transform:rotate(90deg); transform:rotate(90deg) } } @media (min-width: 568px) and (max-width: 767px){ .location-map-lg .location-name{ height:36px; font-size:20px; line-height:36px } } @media (max-width: 567px){ .location-map-lg .location{ position:inherit; top:auto; bottom:auto; left:auto; right:auto; float:left; height:auto; width:50%; margin-bottom:8px; padding-left:30px } .location-map-lg .location:after,.location-map-lg .location:before{ display:block; content:""; clear:both } .location-map-lg .location-pin{ position:absolute; left:0; top:4px; margin:5px 10px 5px } .location-map-lg .location .location-name{ position:inherit; left:auto; right:auto; top:auto; bottom:auto; display:inline-block; background:transparent; color:#616366; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none } .location-map-lg .location .location-name > span{ position:inherit; left:auto; right:auto; top:auto; bottom:auto; display:inline-block; background:transparent; color:#616366; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow:none } .location-map-lg .location-name:after{ display:none } .section-dark .location-map-lg .location .location-name span{ color:#fff } }