.map .maplocation .mapIcon { position: absolute; top: 0; left: 0; -webkit-transition: 0.5s ease-in-out all; transition: 0.5s ease-in-out all; } .map .maplocation .mapIcon.blackIcon { left: 47%; top: -5%; } .map .maplocation .mapIcon.yellowIcon { left: 70%; top: 35%; } .map .maplocation .mapIcon.blueIcon { left: 20%; top: 43%; } .map .maplocation .mapIcon.lightblueIcon { left: 34%; top: 67%; } .map .maplocation a.active .mapIcon { -webkit-transform: translateY(-10px); transform: translateY(-10px); } .map .mapCircle ul { display: -webkit-box; display: -ms-flexbox; display: block; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 900px; margin: 0 auto; position: relative; } .map .mapCircle ul li { position: relative; width: 100%; } .map .mapCircle ul li.active .mapDesc .companyTitle a { color: #f7941d; } .map .mapCircle ul li:last-child:after { display: none; } .read-btn { margin-top: 30px; } .map .mapCircle ul li .mapDesc .companyTitle { text-align: left; margin-left: 70px; margin-top: 20px; } a.map.readmore.map-button { color: #fff; } .map .mapCircle ul li .mapDesc { position: relative; padding-top: 18px; max-width: 304px; margin: 0 auto; width: 100%; margin-left: 30px; } .map .mapCircle ul li .mapDesc p { margin-bottom: 0px; text-align: center; } .map .mapCircle ul li .mapDesc .companyTitle { font-size: 14px; color: #606060; font-weight: 500; line-height: 15px; font-family: "Poppins"; text-align: left; } .map .mapCircle ul li .mapDesc .companyTitle a { color: #606060; } .map .mapCircle ul li .mapDesc .companyTitle a:hover { color: #f7941d; } .map .mapCircle ul li .mapDesc .mapArea { font-size: 14px; color: #888888; line-height: 15px; font-family: "Poppins"; text-align: left; } .map .mapCircle ul li .mapDesc:after { content: ""; background-color: #ccc; position: absolute; top: 44px; text-align: left; width: 12px; left: -89px; right: 0; margin: 0 auto; height: 30px; border-radius: 0; z-index: 1; } .map .mapCircle ul li .mapDesc.blackColor:after { background: #ed1c24; } .map .mapCircle ul li .mapDesc.lightBlueColor:after { background: #0066b3; } .map .mapCircle ul li .mapDesc.yellowColor:after { background: #cccccc; } .map .mapCircle ul li .mapDesc.blueColor:after { background: #00aeef; } .product-tab-img img { margin: 1px auto; } .panel-heading h5 { margin-bottom: 10px; color: #0066b3; } svg { /* overflow: hidden; */ vertical-align: top; width: 80% !important; margin-left: 12%; height: auto; } li#lightblueID:hover:after { content: ""; display: block; position: absolute; width: 175px; height: 175px; background: url("https://www.colmac.in//assets/images/columbia_machine_inc.png"); background-repeat: no-repeat; background-size: cover; left: 180%; top: 10%; /* box-shadow: 0px 3px 6px #020000;*/ } li#blackID:hover:after { content: ""; display: block; position: absolute; width: 175px; height: 175px; background: url("https://www.colmac.in//assets/images/techmatik_s_a.png"); background-repeat: no-repeat; background-size: cover; right: -400%; top: -71%; /*box-shadow: 0px 3px 6px #020000;*/ } li#yellowID:hover:after { content: ""; display: block; position: absolute; width: 175px; height: 175px; background: url("https://www.colmac.in//assets/images/columbia_machine_engineering.png"); background-repeat: no-repeat; background-size: cover; right: -350%; bottom: -18%; /*box-shadow: 0px 3px 6px #020000;*/ } li#blueID:hover:after { content: ""; display: block; position: absolute; width: 175px; height: 175px; background: url("https://www.colmac.in//assets/images/columbia_machine.png"); background-repeat: no-repeat; background-size: cover; right: -200%; bottom: 75%; /*box-shadow: 0px 3px 6px #020000;*/ } i.fa.fa-map-marker { padding: 8px 10px; } .map .mapCircle ul li .mapDesc { margin-left: 32px; } .mapImage.textCenter p { text-align: center; } .map span:after { content: "\00bb"; position: absolute; opacity: 0; top: 0; right: -20px; transition: 0.5s; } .map:hover span { padding-right: 25px; } .map:hover span:after { opacity: 1; right: 0; } .map span { cursor: pointer; display: inline-block; position: relative; transition: 0.5s; } .mapCircle { margin-top: -45%; position: absolute; left: -75px; } .map .mapCircle ul li .mapDesc { position: relative; padding-top: 18px; max-width: 100%; margin: 0 auto; margin-left: 32px; } .list-of-states { margin: 0; padding: 0; columns: 100px auto; column-gap: 8px; list-style: none; } .list-of-states li { padding: 2px 4px; display: table-caption; width: 100%; } #states .columbia-machine.on { background: #0066b3; color: white; font-weight: bold; } @media (max-width: 991px) { .map .mapCircle ul li .mapDesc:after { content: ''; background-color: #ccc; position: absolute; top: 30px; text-align: left; width: 12px; left: 0px; right: auto; margin: 0 auto; height: 30px; border-radius: 0; z-index: 1; } .button_container span { display: none; } .button_container img { display: block; } .mapCircle { margin-top: 0%; position: relative; padding-bottom: 34px; } .map .mapCircle ul { display: inline-flex; } } @media (max-width: 767px) { .mapCircle { margin-top: 0%; position: relative; padding-bottom: 34px; } } @media (max-width: 420px) { .mapCircle { margin-top: 0%; position: relative; left: 0px; } } .fil1 { fill: none; fill-rule: nonzero } .fil2 { fill: #a5d7ff; fill-rule: nonzero } .fil4 { fill: #a5d7ff; fill-rule: nonzero } .fil3 { fill: #a5d7ff; fill-rule: nonzero } .fil0 { fill: #a5d7ff; fill-rule: nonzero } .fil2.on, .fil2:hover { fill: #0066B3; cursor: pointer; } .fil3.on, .fil3:hover { fill: #cccccc; cursor: pointer; } .str0:hover { stroke: #a5d7ff; } .fil0.on, .fil0:hover { fill: #ED1C24; } .fil4.on, .fil4:hover { fill: #00AEEF; } svg { width: 100%; height: auto; }

• COLUMBIA MACHINE, INC.World Headquarters Vancouver, Washington

• TECHMATIK S.A. - Radom, Poland

• COLUMBIA MACHINE ENGINEERING (I)
  PVT. LTD. - Vadodara, India

• COLUMBIA MACHINE, INC. - Brazil

var wordStates = document.querySelectorAll(".list-of-states li"); var svgStates = document.querySelectorAll("#states path > *"); function addOnFromList(el) { var stateCode = el.getAttribute("data-state"); var svgState = document.querySelector("#" + stateCode); el.classList.add("on"); svgState.classList.add("on"); } function addOnFromState(el) { var stateId = el.getAttribute("id"); var wordState = document.querySelector("[data-state='" + stateId + "']"); el.classList.add("on"); wordState.classList.add("on"); } wordStates.forEach(function (el) { el.addEventListener("mouseenter", function () { addOnFromList(el); }); el.addEventListener("mouseleave", function () { removeAllOn(); }); el.addEventListener("touchstart", function () { removeAllOn(); addOnFromList(el); }); }); svgStates.forEach(function (el) { el.addEventListener("mouseenter", function () { addOnFromState(el); }); el.addEventListener("mouseleave", function () { removeAllOn(); }); el.addEventListener("touchstart", function () { removeAllOn(); addOnFromState(el); }); }); function removeAllOn() { svgStates.forEach(function (el) { el.classList.remove("on"); }); wordStates.forEach(function (el) { var stateCode = el.getAttribute("data-state"); var svgState = document.querySelector("#" + stateCode); el.classList.remove("on"); svgState.classList.remove("on"); }); }