body {
	overflow: hidden;
	height: 100%;
	min-height: 100%;
}

.content {
	position: fixed;
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
	margin: 0;
	padding: 0;
	text-align: left;
	overflow: hidden;
}

.content-wrapper {
	margin: auto;
	height: 100%;
	max-width: 100%;
}

.left-side {
	left: 0px;
	width: 0px;
	height: 100vh;
	position: fixed; 
}

.map-wrapper {
	width: 100%;
	height: 600px;
	position: relative;
}		

.box {
	width: 100%;
	height: 100%;
	background-color: white;
	overflow: hidden;
	position: relative;
}

.box.cur_move {
	cursor: move;
}

.box.cur_grabbing {
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.box.cur_default {
	cursor: default;
}

.box .map {
	/*width: 5560px;
	height: 2490px;*/
	
	position: relative;
}	

.box img {
	width: 100%;
	/*height: 100%;*/
}	

.map-wrapper .stores .nameplate { height: 30px; line-height: 30px; background-color: rgba(81, 126, 181, 0.9); color: white; text-align: center; font-size: 18px; padding: 0 5px 0 5px; cursor: pointer;}

.map-wrapper .stores .needle {width: 75px; height: 77px; background-image: url(/public/img/tag_down.png); background-size: 75px 77px; border: 0px solid green; margin: 0 auto 0 auto;}
.map-wrapper .stores {filter: grayscale(100%); z-index: auto; transition: transform .15s linear; transform-origin: center bottom}
.map-wrapper .stores:hover {transform: scale(1.15, 1.15);}
.map-wrapper .stores.active {filter: grayscale(0%);}

.map-wrapper .stores.smallZoom .nameplate {height: 20px; line-height: 20px; background-color: rgba(81, 126, 181, 0.9); color: white; text-align: center; font-size: 14px; padding: 0 4px 0 4px; cursor: pointer;}
.map-wrapper .stores.smallZoom .needle {width: 60px; height: 62px; background-image: url(/public/img/tag_down.png); background-size: 60px 62px; border: 0px solid green; margin: 0 auto 0 auto;}
.map-wrapper .stores.smallZoom {filter: grayscale(100%); z-index: auto; transition: transform .15s linear; transform-origin: center bottom}
.map-wrapper .stores.smallZoom:hover {transform: scale(1.15, 1.15);}
.map-wrapper .stores.smallZoom.active {filter: grayscale(0%);}		

.map-wrapper .markers {overflow: hidden; cursor: pointer;}	
.map-wrapper .markers.collapsed {}
.map-wrapper .markers.collapsed.opened {}
	
.map-wrapper .markers .nameplate { height: 20px; line-height: 20px; color: white; text-align: center; font-size: 13px; padding: 0 5px 0 5px; white-space: nowrap;}
.map-wrapper .markers .nameplate .icon {width: auto; height: 86%; vertical-align: middle; margin-bottom: 2px;}
.map-wrapper .markers .nameplate .label {vertical-align: middle;}	

.map-wrapper .markers .needle {width: 30px; height: 30px; background-size: 30px 30px; border: 0px solid green; margin: 0 auto 0 auto;}
.map-wrapper .markers {z-index: auto; transition: transform .15s linear; transform-origin: center bottom}
.map-wrapper .markers:hover {transform: scale(1.15, 1.15);}

.map-wrapper .markers.smallZoom {}

.map-wrapper .markers.smallZoom .nameplate {height: 20px; line-height: 20px; font-size: 13px; padding: 0 4px 0 4px;}
.map-wrapper .markers.smallZoom .needle {width: 30px; height: 30px; background-size: 30px 30px; margin: 0 auto 0 auto;}
.map-wrapper .markers.smallZoom:hover {transform: scale(1.15, 1.15);}

.map-wrapper .markers.blue .nameplate {background-color: rgba(81, 126, 181, 0.9);}
.map-wrapper .markers.blue .needle {background-image: url(/public/img/tag_down.png);}

.map-wrapper .markers.green .nameplate {background-color: #3fb33c;}
.map-wrapper .markers.green .needle {background-image: url(/public/img/tag_down_museum.png);}

.map-wrapper .markers.red .nameplate {background-color: #d69aab;}
.map-wrapper .markers.red .needle {background-image: url(/public/img/tag_down_hotel.png);}
	
	
.map-wrapper .labels .label.street {
	color: #343C5D;
	font-size: 11px;
}
	
.map-wrapper .labels .label.river {
	color: #343C5D;
	font-size: 10px;
}	

.map-wrapper .labels .label.square {
	text-align: center;
	color: #343C5D;
	font-size: 10px;
}	
	
.map-wrapper .labels .label.island {
	text-align: center;
	color: #343C5D;
	font-size: 10px;
}		
	
	
.map-wrapper .labels.smallZoom .label.street {
	color: #343C5D;
	font-size: 6px;
}
	
.map-wrapper .labels.smallZoom .label.river {
	color: #343C5D;
	font-size: 6px;
}	

.map-wrapper .labels.smallZoom .label.square {
	text-align: center;
	color: #343C5D;
	font-size: 6px;
}	
	
.map-wrapper .labels.smallZoom .label.island {
	text-align: center;
	color: #343C5D;
	font-size: 6px;
}		
	
	
	
	
.map-wrapper .tags {
	margin: 0;
	width: 74px; 
	height: 110px; 
	transition: margin 0.2s ease-out, height 0.2s ease-out;
}

.map-wrapper .tags:hover {
	margin-top: -10px !important;
	/*height: 120px !important;*/
}

.map-wrapper .tags .line {
	transition: height 0.2s ease-out;
	border-right: 1px solid #000; 
	width: 50%; 
	height: 50px;	
}

.map-wrapper .tags:hover .line {
	height: 60px !important;
}	

.map-wrapper .tags .tag {
	transition: transform 0.6s ease-out;
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%; 
	height: 57px; 
	background-size: contain;
}	

.map-wrapper .tags:hover .tag {
	transform: rotateY(360deg);
}	

.map-wrapper .figures .figure {
	background-position: center bottom;
	background-repeat: no-repeat;

	background-size: cover;
	
}

.map-wrapper .figures .area {

}

.map-wrapper .figures .area.staronevsky {
	position: relative;
	width: 100%; 
	height: 100%;	
	border: 10px solid rgba(3, 180, 245, 0.3);
	border-radius: 50%;
	overflow: hidden;
}

.map-wrapper .figures.smallZoom .area.staronevsky {
	border: 7px solid rgba(3, 180, 245, 0.3);
}

.map-wrapper .figures .figure.hokusai {
	width: 100%; 
	height: 100%; 
	transform-origin: center bottom;
	transition: transform 0.1s ease-out;
	cursor: pointer;
}

.map-wrapper .figures .figure.bigtag {
	width: 100%; 
	height: 100%; 
	transform-origin: left bottom;
	background-image: url('/public/img/mapspb/stn_tag_v1.png');
	cursor: pointer;
}


.map-wrapper .objects .object.bigtag {
	width: 283px; 
	height: 308px; 
	background-position: center bottom;
	background-repeat: no-repeat;

	background-size: cover;	
	transform-origin: left bottom;
	background-image: url('/public/img/mapspb/stn_tag_v1.png');
	cursor: pointer;
}



.map-wrapper .figures.smallZoom .figure.hokusai {
	/*transform: scale(0.6);*/
}

/*
.map-wrapper .tags.smallZoom  {
	margin: 0;
	width: 60px; 
	height: 110px; 
	transition: margin 0.2s ease-out, height 0.2s ease-out;	
}

.map-wrapper .tags.smallZoom:hover {
	margin-top: -10px !important;
	//height: 120px !important;
}

.map-wrapper .tags.smallZoom .line {
	transition: height 0.2s ease-out;
	border-right: 1px solid #000; 
	width: 50%; 
	height: 50px;	
}

.map-wrapper .tags.smallZoom:hover .line {
	height: 60px !important;
}	

.map-wrapper .tags.smallZoom .tag {
	transition: transform 0.6s ease-out;
	background-position: center bottom;
	background-repeat: no-repeat;
	width: 100%; 
	height: 46px; 
	margin-top: 4px;
	background-size: contain;
}	

.map-wrapper .tags.smallZoom:hover .tag {
	transform: rotateY(360deg);
}	
*/

.stores-selector {text-align: center;}


.map-wrapper .zoom-controls {
	display: block;
	position: absolute;
	margin-top: -73px;
	top: 50%;
	right: 20px;
	width: 42px;
	height: 146px;
	z-index: 10000;
}

.map-wrapper .zoom-controls #zoomIn {
	border-radius: 50%; 
	width: 40px; 
	height: 40px;
	right: 40px; 
	bottom: 90px; 
	border: 1px solid #777; 
	color: #777;
	font-size: 38px; 
	text-align: center; 
	vertical-align: middle; 
	line-height: 35px; 
	cursor: pointer;
	box-shadow: 0.2em 0.2em 5px rgba(122,122,122,0.3);
}

.map-wrapper .zoom-controls #zoomIn.disabled {
	border: 1px solid #cacaca;
	color: #cacaca; 
}

.map-wrapper .zoom-controls #zoomOut {
	margin: 10px 0 0 0;
	border-radius: 50%; 
	width: 40px; 
	height: 40px; 
	right: 40px; 
	bottom: 40px;
	border: 1px solid #777;
	color: #777; 
	font-size: 38px; 
	text-align: center; 
	vertical-align: middle;
	line-height: 35px; 
	cursor: pointer;
	box-shadow: 0.2em 0.2em 5px rgba(122,122,122,0.3);
}

.map-wrapper .zoom-controls #zoomOut.disabled {
	border: 1px solid #cacaca;
	color: #cacaca; 
}

.map-wrapper .zoom-controls #zoomDef{
	margin: 10px 0 0 0;
	border-radius: 50%; 
	width: 40px; 
	height: 40px; 
	right: 40px; 
	bottom: 40px;
	border: 1px solid #777;
	color: #777; 
	font-size: 26px; 
	text-align: center; 
	vertical-align: middle;
	line-height: 42px; 
	cursor: pointer;
	box-shadow: 0.2em 0.2em 5px rgba(122,122,122,0.3);
}

.map-wrapper .zoom-controls #zoomDef.disabled{
	border: 1px solid #cacaca;
	color: #cacaca; 
}

.map-wrapper .blockDirection {
	position: absolute;
	z-index: 9999;
	cursor: pointer;
	/*border: 1px solid red;*/
}

.map-wrapper .blockDirection .arrow {
	width: 0; 
	height: 0; 
	margin: 2px 2px 2px 2px;
	border-style: solid;
	border-width: 7.5px 30px 7.5px 0; 
	border-color: transparent rgba(81, 126, 181, 0.9) transparent transparent;
	/*outline: 1px solid green;*/
}

.map-wrapper .directionTitle {
	position: absolute;
	z-index: 9999;
	cursor: pointer;
	/*outline: 1px solid green;*/
}

.map-wrapper .citymap-pc-logo {
	display: block;
	position: absolute; 
	width: 90%;
	margin: 0; 
	left: 12%;
	bottom: 50px;
	z-index: 100;
	max-width: 514px;
}

.map-wrapper .citymap-mob-logo {
	display: none;
	position: absolute;
	width: 100%; 
	left: 10px;
	bottom: 20px;
	z-index: 100; 
	max-width: 260px;	
}

@media screen and (max-width:1440px) {
	.map-wrapper .citymap-pc-logo {
		width: 90%; 
		margin: 0;
		left: 40px;
		z-index: 100;
		max-width: 514px;
	}
}

@media screen and (max-width:1024px) {

	.map-wrapper .tags {
		margin: 0;
		width: 54px; 
		height: 80px; 
		transition: margin 0.2s ease-out, height 0.2s ease-out;
	}

	.map-wrapper .tags:hover {
		margin-top: -10px !important;
		/*height: 120px !important;*/
	}

	.map-wrapper .tags .line {
		transition: height 0.2s ease-out;
		border-right: 1px solid #000; 
		width: 50%; 
		height: 38px;	
	}

	.map-wrapper .tags:hover .line {
		height: 48px !important;
	}	

	.map-wrapper .tags .tag {
		transition: transform 0.6s ease-out;
		background-position: center bottom;
		background-repeat: no-repeat;
		width: 100%; 
		height: 40px; 
		background-size: contain;
	}	

	.map-wrapper .tags:hover .tag {
		transform: rotateY(360deg);
	}	

	
	.map-wrapper .zoom-controls {

		top: 170px;

	}

	.content {
		margin: 0;
		padding: 0;	
		width: auto;
	}
	
	.left-side {
		left: -260px;
		width: 260px;
		z-index: 10000;
		background-color: rgba(255, 255, 255, 0.95);
	}
	
	.map-wrapper .stores .nameplate { height: 24px; line-height: 24px; background-color: rgba(81, 126, 181, 0.9); color: white; text-align: center; font-size: 14px; padding: 0 5px 0 5px; cursor: pointer;}
	.map-wrapper .stores .needle {width: 60px; height: 62px; background-image: url(/public/img/tag_down.png); background-size: 60px 62px; border: 0px solid green; margin: 0 auto 0 auto;}
	.map-wrapper .stores {filter: grayscale(100%); z-index: auto; transition: transform .15s linear; transform-origin: center bottom}
	.map-wrapper .stores:hover {transform: scale(1.15, 1.15);}
	.map-wrapper .stores.active {filter: grayscale(0%);}	
	
	.map-wrapper .stores.smallZoom .nameplate { height: 16px; line-height: 16px; background-color: rgba(81, 126, 181, 0.9); color: white; text-align: center; font-size: 12px; padding: 0 4px 0 4px; cursor: pointer;}
	.map-wrapper .stores.smallZoom .needle {width: 50px; height: 52px; background-image: url(/public/img/tag_down.png); background-size: 50px 52px; border: 0px solid green; margin: 0 auto 0 auto;}
	.map-wrapper .stores.smallZoom {filter: grayscale(100%); z-index: auto; transition: transform .15s linear; transform-origin: center bottom}
	.map-wrapper .stores.smallZoom:hover {transform: scale(1.15, 1.15);}
	.map-wrapper .stores.smallZoom.active {filter: grayscale(0%);}		
	

	.map-wrapper .markers .nameplate { height: 20px; line-height: 20px; font-size: 12px; padding: 0 5px 0 5px;}
	.map-wrapper .markers .needle {width: 30px; height: 30px; background-size: 30px 30px; border: 0px solid green; margin: 0 auto 0 auto;}
	.map-wrapper .markers {z-index: auto; transition: transform .15s linear; transform-origin: center bottom}
	.map-wrapper .markers:hover {transform: scale(1.15, 1.15);}

	.map-wrapper .markers.smallZoom .nameplate {height: 16px; line-height: 16px; font-size: 12px; padding: 0 4px 0 4px;}
	.map-wrapper .markers.smallZoom .needle {width: 30px; height: 30px; background-size: 30px 30px; margin: 0 auto 0 auto;}
	.map-wrapper .markers.smallZoom:hover {transform: scale(1.15, 1.15);}
	

		
	.map-wrapper .directionTitle {
		font-size: 13px;
	}	
	
	.map-wrapper .citymap-pc-logo {
		display: none;
	}

	.map-wrapper .citymap-mob-logo {
		display: block;
	}
	
	
	.map-wrapper .objects .object.bigtag {
		width: 193px; 
		height: 210px; 
	}	
	
}

@media screen and (max-width:500px) {

	.map-wrapper .figures .area.staronevsky {
		/*border: 3px solid rgba(3, 180, 245, 0.3);*/
	}	
	

	.map-wrapper .objects .object.bigtag {
		width: 92px; 
		height: 100px; 
		background-position: center bottom;
		background-repeat: no-repeat;

		background-size: cover;	
		transform-origin: left bottom;
		background-image: url('/public/img/mapspb/stn_tag_v1.png');
		cursor: pointer;
	}
	
}