.osun_map_init * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; transition: none !important; }
.osun_map_preload { width: 0; height: 0; font-size: 0; line-height: 0; background-image: url(images/osun-map-dark-flat.png); }

#osunmap.osunmap { position: relative; width: 100%; }
#osunmap .blur, #osunmap .blur * { pointer-events: none !important; -webkit-filter: blur(2px); filter: blur(2px); }
#osunmap_image.osunmap_image { width: 100%; z-index: 10; }
#osunmap_image > img { width: 100%; }
#osunmap_overlay { position: absolute; width: 100%; left: 0; top: 0; }

details#osunmap_overlay > summary:first-child { display: none; list-style: none; }
details#osunmap_overlay > summary:first-child::-webkit-details-marker { display: none; }

#osunmap .loc { position: absolute; display: block; box-sizing: border-box; height: auto; text-decoration: none; outline: none; overflow: visible; z-index: 12; }
#osunmap .loc:hover { z-index: 13; cursor: pointer; }
#osunmap summary.hot { list-style: none; }
#osunmap summary.hot::-webkit-details-marker { display: none; }

#osunmap .hot { position: absolute; width: 100%; padding-top: 100%; top: 0; display: block; box-sizing: border-box; height: auto; text-decoration: none; outline: none; cursor: pointer; overflow: visible; z-index: 12; background: transparent; background-image: url(images/osun-map-dark-flat.png); background-image: url(images/osun-map-flat.png); background-repeat: no-repeat; background-position: left top; border-radius: 50%; border-width: 0px; transition: transform 25ms linear 0ms; }
#osunmap .hot,
#osunmap .loc:not([open]) .hot { box-shadow: none; transform: scale(1); transition: transform 25ms linear 0ms; }

#osunmap .loc[open] { z-index: 14; }
#osunmap .hot:hover,
#osunmap .loc:not([open]) .hot:hover,
#osunmap .loc[open] .hot { box-shadow: 0px 0px 5px  rgba(34,34,34,0.60); transform: scale(4); transition: transform 25ms linear 0ms; cursor: pointer; }

#osunmap .loc .info { position: absolute; display: block; box-sizing: border-box; left: -100px; top: 300%; margin: 0 10px 10px 10px; padding: 10px 10px 10px 10px; width: auto; min-width: 200px; font-family: "Wix Madefor Display", sans-serif;  color: #333; font-size: 14px; line-height: 1.2em; font-weight: normal; text-align: left; overflow: hidden; z-index: 15; background-color: #FFF; box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.275); border: 1px solid #999; opacity: 0; transition: all 25ms ease; }
#osunmap .loc .info ul { list-style: none; margin: 0; padding: 0; }
#osunmap .loc .info li { list-style: none; margin: 0 0 .5em 0; text-wrap: nowrap; }
#osunmap .loc .info a,
#osunmap .loc .info a:visited,
#osunmap .loc .info a:active { color: #20616A; text-decoration: none; outline: none; }
#osunmap .loc .info a:hover,
#osunmap .loc .info a:focus { text-decoration: underline; }
#osunmap .loc[open] .info { z-index: 15; opacity: 1; transition: all 3s ease; }

/*-----------------------*/

#loc_NA5.loc { width: 18px; padding-top: 1.7%; left: 25%; margin-top: 25.5%; }
#loc_NA5 .hot { background-size: calc(100% * 50) auto; background-position: 24.5% 41.3%; }

#loc_NA6.loc { width: 30px; padding-top: 2%; left: 26%; margin-top: 22%;}
#loc_NA6 .hot { background-size: calc(100% * 25) auto; background-position: 25.9% 37.2%; }
#loc_NA6 .hot:hover,
#loc_NA6.loc[open] .hot { transform: scale(2) !important; }
#loc_NA6.loc .info { width: 500px; top: 200%; }

#loc_NA7.loc { width: 15px; padding-top: 1.7%; left: 27.5%; margin-top: 29%; }
#loc_NA7 .hot { background-size: calc(100% * 50) auto; background-position: 26.6% 51.3%; }


#loc_SA1.loc { width: 15px; padding-top: 1.7%; left: 28.5%; margin-top: 34%; }
#loc_SA1 .hot { background-size: calc(100% * 50) auto; background-position:  26.3% 59.9%; }

#loc_EU4.loc { width: 27px; padding-top: 1.7%; left: 52.9%; margin-top: 17.1%; }
#loc_EU4 .hot { background-size: calc(100% * 50) auto; background-position: 50.95% 29.9%; }

#loc_AF1.loc { width: 15px; padding-top: 1.7%; left: 47%; margin-top: 33%; }
#loc_AF1 .hot { background-size: calc(100% * 50) auto; background-position:  45.65% 60.0%; }

#loc_AF2.loc { width: 15px; padding-top: 1.7%; left: 54%; margin-top: 46%; }
#loc_AF2 .hot { background-size: calc(100% * 50) auto; background-position:  53.6% 82.7%; }

#loc_AF3.loc { width: 20px; padding-top: 1.7%; left: 58%; margin-top: 35.5%; }
#loc_AF3 .hot { background-size: calc(100% * 50) auto; background-position:  57.3% 65.5%; }

#loc_AS1.loc { width: 20px; padding-top: 1.7%; left: 57.6%; margin-top: 23.3%; }
#loc_AS1 .hot { background-size: calc(100% * 50) auto; background-position:  56.75% 45.1%; }

#loc_AS3.loc { width: 20px; padding-top: 1.7%; left: 65.9%; margin-top: 23.1%; }
#loc_AS3 .hot { background-size: calc(100% * 50) auto; background-position:  67.2% 42.7%; }

#loc_AS5.loc {width: 20px; padding-top: 1.7%; left: 72.6%; margin-top: 27%; }
#loc_AS5 .hot {background-size: calc(100% * 50) auto; background-position:  72.0% 48.8%; }

#loc_AS7.loc { width: 25px; padding-top: 1.7%; left: 79.6%; margin-top: 27%; }
#loc_AS7 .hot {background-size: calc(100% * 25) auto; background-position:  80.8% 47.5%; }
#loc_AS7 .hot:hover,
#loc_AS7.loc[open] .hot { transform: scale(2) !important; }
#loc_AS7.loc .info { top: 200%;}

/* -------------------------------------------- MOBILE  STYLES ------------------------------------ */
@media screen and (max-width: 800px) {

#osunmap .blur,
#osunmap .blur * { pointer-events: auto; -webkit-filter: blur(2px); filter: blur(2px); }

#osunmap_image.osunmap_image { position: relative; }
details#osunmap_overlay { position: relative; width: 100%; height: auto; max-height: 2rem; z-index: 11; overflow: hidden; }
details#osunmap_overlay[open] { height: auto; max-height: 99rem; transition: all 0.8s ease; }
details#osunmap_overlay > summary:first-child { position: relative; width: 100%; height: auto; margin: 1em 0 1em 0; padding: 0px 2% 0px 2%; display: block; font-size: 14px; line-height: 1.2em; font-weight: 600; text-align: left; text-decoration: none; outline: none; cursor: pointer; }
details#osunmap_overlay > summary:first-child:hover,
details#osunmap_overlay > summary:first-child:focus { text-decoration: underline; }

#osunmap .loc { position: relative; width: 100%; left: 0; margin: 0; padding: 0; }
#osunmap .hot { position: relative; display: none; background: none; }
#osunmap .loc .info { position: relative; left: 0; width: auto; margin: 0; padding: 0px 2% 0px 2%; box-shadow: none; border: none; }

}

@media screen and (max-width: 650px) {
	#osunmap.osunmap {display: none;}
}