.arrow-up { width: 0px; height: 0px; border-style: solid; border-width: 0 10px 15px 10px; margin: 0 auto; position: relative; z-index: 61; } .arrow-down { width: 0px; height: 0px; border-style: solid; border-width: 15px 10px 0 10px; margin: 0 auto; position: relative; z-index: 61; } .arrow-right { width: 0px; height: 0px; border-style: solid; border-width: 10px 0 10px 15px; position: absolute; z-index: 61; } .arrow-left { width: 0px; height: 0px; border-style: solid; border-width: 10px 15px 10px 0; position: absolute; z-index: 61; } .arrow-bottom-border { width: 0px; height: 0px; border-style: solid; border-width: 0 11px 16px 11px; border-color: transparent transparent #ffffff transparent; position: absolute; z-index: 1; } .arrow-top-border { width: 0px; height: 0px; border-style: solid; border-width: 16px 11px 0 11px; border-color: #ffffff transparent transparent transparent; position: absolute; z-index: 1; } .arrow-left-border { width: 0px; height: 0px; border-style: solid; border-width: 11px 0 11px 16px; border-color: transparent transparent transparent #ffffff; position: absolute; z-index: 1; } .arrow-right-border { width: 0px; height: 0px; border-style: solid; border-width: 11px 16px 11px 0; border-color: transparent #ffffff transparent transparent; position: absolute; z-index: 1; } .triangle-left { width: 0px; height: 0px; border-style: solid; border-width: 20px 20px 55px 0; opacity: 1; z-index: 2; } .triangle-right { width: 0px; height: 0px; border-style: solid; border-width: 20px 0 55px 20px; opacity: 1; z-index: 2; } .triangle-left-border { width: 0px; height: 0px; position: absolute; right: 0px; border-style: solid; border-width: 20px 20px 57px 0; border-color: transparent transparent transparent transparent; z-index: 1; } .triangle-right-border { width: 0px; height: 0px; border-style: solid; border-width: 20px 0 57px 20px; border-color: transparent transparent transparent transparent; z-index: 1; } .pin-style { z-index: 10; cursor: pointer; position: absolute; box-shadow: none !important; top: -77px; left: -39.5px; } .pin-mini-style { z-index: 10; cursor: pointer; position: absolute; box-shadow: none !important; top: -18px; left: -8px; } .imapper-pin-color { width: 40px; height: 40px; border-radius: 20px; position: absolute; top: -63px; left: -21.5px; cursor: pointer; } .imapper-pin-icon { position: absolute; top: -53px; text-align: center; color: white !important; } .imapper-pin-shadow { box-shadow: none !important; position: absolute; margin-top: -75px; margin-left: -41px; } .imapper-pin-wrapper { height: 0px; transform-origin:0% 0%; -webkit-transform-origin:0% 0%; -moz-transform-origin:0% 0%; -ms-transform-origin:0% 0%; -o-transform-origin:0% 0%; } .imapper-content-wrapper { opacity: 0; position: relative; visibility: hidden; z-index: 9; /* transform-origin:0% 0%; -webkit-transform-origin:0% 0%; -moz-transform-origin:0% 0%; -ms-transform-origin:0% 0%; -o-transform-origin:0% 0%;*/ } @media (max-width: 600px) { .imapper-content-wrapper { /*transform-origin:0% 0%; -webkit-transform-origin:0% 0%; -moz-transform-origin:0% 0%; -ms-transform-origin:0% 0%; -o-transform-origin:0% 0%;*/ } } .imapper-content { position: relative; z-index: 60; border-style: solid; border-width: 1px; } .imapper-content-header { padding: 10px 10px 0px 10px; margin-bottom: 0 !important; margin-top: 0 !important; } .imapper-content-text { padding: 0 10px 0 10px; margin-top: 10px; line-height: 1.4 !important; } .imagemapper-wrapper { position:relative; visibility:hidden; text-align: left !important; } .imapper-content-tab { font-size: 15px !important; position: absolute; z-index: 100; } .imapper-content-tab a { text-decoration: none; display: block; font-size: 12px; line-height: 1.5; color: white; } .imapper-content-tab a:hover { } .imapper-content-tab a:focus { outline: none !important; } /*NEW CODE*/ .imapper-value-tab-number { display: block; width: 16px; height: 16px; border-radius: 8px; border: 1px solid #191970; background-color: #4f92d3; color: white; font-size: 10px; line-height: 1.4; text-align: center; position: absolute; top: -70px; left: 2px; z-index: 10 } .imapper-overlay-wrapper { background-color: #000; } .imapper-overlay-wrapper > img.imapper-blur-effect { -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); filter: url("data:image/svg+xml;utf8,#blur"); } .imapper-area-pin { overflow:hidden; opacity:0.3; } .imapper-area-pin img{ position:relative; max-width:none !important; display: none; } .imapper-area-pin.imapper-no-overlay img { display: inline; opacity:1; } .imapper-overlay-wrapper > img, .imapper-overlay-wrapper ~ .imapper-pin-wrapper > img, .imapper-overlay-wrapper ~ .imapper-pin-wrapper .imapper-value-tab-number, .imapper-overlay-wrapper ~ .imapper-pin-wrapper > i.imapper-pin-icon, .imapper-overlay-wrapper ~ .imapper-pin-wrapper > div.imapper-pin-color, .imapper-overlay-wrapper ~ .imapper-pin-wrapper > span.iMapper-pin-1:before { opacity:0.5; transition:all 300ms; } .imapper-overlay-wrapper ~ .imapper-pin-wrapper .imapper-area-pin { opacity:0.25; } .imapper-overlay-wrapper ~ .imapper-pin-wrapper > img.imapper-no-overlay, .imapper-overlay-wrapper ~ .imapper-pin-wrapper .imapper-area-pin.imapper-no-overlay, .imapper-overlay-wrapper ~ .imapper-pin-wrapper .imapper-no-overlay ~ .imapper-value-tab-number, .imapper-overlay-wrapper ~ .imapper-pin-wrapper .imapper-no-overlay ~ i.imapper-pin-icon, .imapper-overlay-wrapper ~ .imapper-pin-wrapper .imapper-no-overlay ~ div.imapper-pin-color, .imapper-overlay-wrapper ~ .imapper-pin-wrapper > span.iMapper-pin-1.imapper-no-overlay:before { opacity:1; transition:all 300ms; } .imagemapper-wrapper > img, .imagemapper-wrapper > .imapper-overlay-wrapper img { display: block; } .imapper-category-button { margin-right: 0px !important; margin-top:10px; display: inline-block; padding: 12px 18px; background-color: #CF6527; color: #f2f2f2; } .imapper-categories-wrapper { margin-bottom: 10px; text-align: center; } .imapper-category-active .imapper-category-button { background-color: #f2f2f2; transition:all 400ms linear; color: #CF6527; } .imapper-content-below { margin:0px auto; padding:10px 0px; opacity:1; transition: opacity 400ms linear; -webkit-transition: opacity 400ms linear; background-color: #f2f2f2; } .imapper-content-below.imapper-cb-tabs-version { background-color: transparent; } .imapper-content-below.imapper-content-below-invisible { opacity:0; } .imapper-cb-tab-wrapper .imapper-category-arrow-bottom { border-color: #f2f2f2 transparent; } .imapper-cb-tab-active .imapper-category-arrow-bottom { border-color: #222 transparent; transition:all 400ms linear; } .imapper-cb-tab-wrapper { display: inline-block; margin-right: 10px; } .imapper-cb-tab { margin-top:10px; display: inline-block; padding: 12px 18px; background-color: #f2f2f2; color: #222; text-decoration: none; /* display: inline-block;*/ } .imapper-cb-tab-active .imapper-cb-tab { background-color: #222; color: #fff; transition:all 400ms linear; } .imapper-cb-tabs { margin-bottom: 20px; text-align: left; } .imapper-cb-content.imapper-cb-content-active { opacity:1; transition:opacity 400ms linear; visibility: visible; height: auto; } .imapper-cb-content { opacity:0; visibility: hidden; height: 0; text-align: left; } .imapper-content-below .content-below-header { font-size:15px; font-weight: 700; text-align:left; padding: 20px 20px 15px 20px; } .imapper-content-below .content-below-text { font-size:13px; color:#707070; text-align:left; padding: 0px 20px 20px 20px; } .imapper-content-below.imapper-cb-tabs-version .content-below-header { padding: 0px 0px 15px 0px; } .imapper-content-below.imapper-cb-tabs-version .content-below-text { padding: 0px; } .imapper-category-item-wrapper { display: inline-block; margin-right: 10px; } .imapper-category-arrow-bottom { width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0px; margin: 0px auto; position: relative; z-index: 61; border-color: #CF6527 transparent; } .imapper-category-active .imapper-category-arrow-bottom { border-color: #f2f2f2 transparent; transition: border-color 400ms linear; } .imapper-cb-content-wrapper { background-color:#f2f2f2; padding: 20px; } .imagemapper-wrapper .mCustomScrollBox { max-height: 90%; } /*style.css*/ .imapper-content-header { font-size: 17px; } .imapper-content-text { font-size: 14px; } .imagemapper-wrapper { margin: 0 auto; } .imapper-category-button { margin-right: 10px; text-decoration:none; } .imapper-category-button:focus { outline:none; } .imapper-category-hidden { transition:all 500ms linear; opacity: 0; cursor: auto; z-index:-1; } .imapper-category-hidden .pin-style { cursor: auto; } .imapper-pin-wrapper { transition:opacity 500ms linear; } .imapper-pin-wrapper[data-open-position="top"] .imapper-content-tab[style*="right: 0"],.imapper-pin-wrapper[data-open-position="top"] .imapper-content-tab[style*="right:0"],.imapper-pin-wrapper[data-open-position="bottom"] .imapper-content-tab[style*="right: 0"],.imapper-pin-wrapper[data-open-position="bottom"] .imapper-content-tab[style*="right:0"], .imapper-pin-wrapper[data-open-position="left"] .imapper-content-tab[style*="bottom: 0"],.imapper-pin-wrapper[data-open-position="bottom"] .imapper-content-tab[style*="right:0"] , .imapper-pin-wrapper[data-open-position="right"] .imapper-content-tab[style*="bottom: 0"],.imapper-pin-wrapper[data-open-position="bottom"] .imapper-content-tab[style*="right:0"] { border-width: 1px !important } .imapper-arrow.arrow-down:nth-child(n+3), .arrow-top-border.imapper-arrow-border:nth-child(n+4) { display: none !important; }