#plan-navigation {width:300px; position:absolute; z-index:300; top:25%; left:20%;}
#plan-navigation div.etaj-links h4{color:#fff;}
#plan-navigation div.etaj-links {width:95%; max-width:1200px; margin:0 auto; }
#plan-navigation div.etaj-links a {display:inline-block; font-size:3em; cursor:pointer;   text-align:Center; width:30px; height:40px; background:rgba(105, 98, 57, 0.6); color:#fff; border:1px solid #8a8253;  text-decoration:none;}
#plan-navigation div.etaj-links a span {top:10%; position:relative;}
#plan-navigation div.etaj-links a:hover {text-decoration:underline; background:#867e4e;}
#plan-navigation div.etaj-links a.current {background:#fff; color:#867e4e;}

 

div.svg1.current-etaj {display:block !important;}
div.svg2.current-etaj {display:block !important;;}
div.svg3.current-etaj {display:block !important;;}
div.svg4.current-etaj {display:block !important;;}
div.svg5.current-etaj {display:block !important;;}
div.svg6.current-etaj {display:block !important;;}


ul#my-id li.sob.hide {display:none;}
ul#my-id li.sob-desc.hide {display:none;}
ul#my-id li.etaj.hide {display:none;}
ul#my-id li.etaj-desc.hide {display:none;}
ul#my-id li.num.hide {display:none;}
ul#my-id li.num-desc.hide {display:none;}
ul#my-id li.rooms.hide {display:none;}
ul#my-id li.rooms-desc.hide {display:none;}
 
ul#my-id li a{text-decoration:none; border:1px solid #c9dff1; color:#008aff; font-size:1.6em; padding:6px 10px;}
ul#my-id li a:hover{border:1px solid #008aff;}
ul#my-id li.active a{background:#008aff;  color:#fff;  }


#genplan-all {position:relative;  }

	div.etaj-select {position:absolute; z-index:505; top:3%;  cursor:pointer; width:100%; text-align:center;}
	div.etaj-select p{margin:0 auto 10px; color:#fff; text-shadow:1px 3px 2px #000;}
	div.etaj-select a {border-radius:50%; display:inline-block; width:22px; height:22px; background:rgba(0,0,0,0.3); padding:10px; font-size:2em; color:#fff; border:2px solid rgba(255,255,255,0.7); text-decoration:none;} 
	div.etaj-select a:hover {background:rgba(255, 204, 0, 0.88); } 
	div.etaj-select a.selected {background:#fff; color:#1d2432; text-decoration:none; font-weight:bold; text-shadow:none; box-shadow:2px 5px 13px rgba(0, 0, 0, 0.26);} 
	 
	
	div.com-select {position:absolute; z-index:505; top:56%;  cursor:pointer; width:100%; text-align:center;}
	div.com-select p{margin:0 auto 10px; color:#fff; text-shadow:1px 3px 2px #000;}
	div.com-select a {border-radius:50%; display:inline-block; width:22px; height:22px; background:rgba(0,0,0,0.3); padding:10px; font-size:2em; color:#fff; border:2px solid rgba(255,255,255,0.7); text-decoration:none; } 
	div.com-select a:hover {background:rgba(255, 204, 0, 0.88); } 
	div.com-select a.selected {background:#fff; color:#1d2432; text-decoration:none; font-weight:bold; text-shadow:none; box-shadow:2px 5px 13px rgba(0, 0, 0, 0.26);} 
	
	div.etaj-big-num {position:absolute; z-index:505; top:43%;  left:50%; margin-left:-50px; width:100px; display:inline; text-align:center;}
	div.etaj-big-num.com{top:20%;}
		div.etaj-big-num p{display:none; font-size:7em; color:#fff;}
			div.etaj-big-num p.this{display:inline;}
	

#pic {width:100%;}
#pic div#to-top{position:absolute; top:15%; z-index:1; width:1px; height:1px;}
#pic div#to-middle{position:absolute; top:30%; z-index:1; width:1px; height:1px;}
#pic img{width: 100%; position: absolute; top: 0px; }




#genplan-all svg {position:relative; z-index:10;  overflow:visible;}
#genplan-all svg path {  fill-opacity: 0; cursor: pointer; transition: all 0.2s ease-out;}
#genplan-all svg path:hover {fill:#eb0041; fill-opacity: 0.6; stroke: #fff; stroke-width: 6px; transform: translate(0px,0px); transition: transform .2s;}
			
			#genplan-all svg path.path-net {fill-opacity: 1; fill:rgba(255,255,255,0.9);  stroke: rgba(66, 60, 92, 0); stroke-width: 2px; cursor:default;}
			#genplan-all svg path.path-net:hover {transform: none; fill:#888 !important; filter: none; }
	
					/*Показать конкретную квартиру на ген плане*/
					a.ontheplan {font-size:1.8em;}
				 
	
 
	
	#genplan-all svg path.path-flat1a:hover {fill:#79d400; fill-opacity: 0.6; stroke: #fff; stroke-width: 7px;}
	
 
		

div.com-select::after {content:'\f177  Север'; display:block; font-family: FontAwesome; color:#fff; font-size:2.4em; position:Absolute; top:100px; left:0px; right:0;  text-shadow:1px 2px 3px #000;}


h1.spisok-kvartir {text-align:center;}
#spisok-kvartir {margin:0 auto; width:96%; max-width:1000px; text-align:center; border-bottom:1px solid #ddd;}
#spisok-kvartir:hover{background:#dedede;}
#spisok-kvartir:nth-child(2n) {background:#eee;}
#spisok-kvartir:nth-child(2n):hover {background:#dedede;}
#spisok-kvartir a.flat-title{font-size:2em; text-decoration:none; float:Left; display:inline-block; margin:15px 0; padding:0 10px;}
#spisok-kvartir a b{ text-decoration:underline;}
#spisok-kvartir a .metr{padding:3px 5px; border-radius:5px; border:3px solid #ffcc00; display:inline-block; font-weight:bold; color:#000;}
#spisok-kvartir p {float:right;  margin:15px 0; padding:0 10px;}
#spisok-kvartir p a {display:inline-block; padding:5px; width:12px; color:#000; position:relative; font-size:1em;}
#spisok-kvartir p a.sold {color:#000;}
#spisok-kvartir p a:hover {color:#008aff; text-decoration:underline;}
#spisok-kvartir p a.sold::after {content:'/'; color:#ff0000; position:absolute; left:0.2em; top:-0.1em; font-size:2em;}
 

#spisok-com {width:95%; max-width:500px; margin:0 auto;} 
#spisok-com a {font-size:2em; display:block; text-align:center; width:100%; padding:13px 5px;  text-decoration:none;} 
#spisok-com a:hover { text-decoration:underline;} 
#spisok-com a span {padding:5px; background:#ffcc00; color:#000;} 
#spisok-com a:nth-child(2n) {background:#eee;}
 
	#flat-menu {background: rgba(1, 220, 180, 0.8); position:absolute; right:20%; top:300px; z-index:20; padding:20px;}
	#flat-menu a{ display:block; font-size:2em; padding:8px 10px; color:#fff; background:rgba(0,0,0,0.2); text-decoration:none; border-bottom:1px solid rgba(255,255,255,0.5);}
	#flat-menu a.cur{background:#ffcc00; color:#000;}
	#flat-menu a.cur:hover{cursor:pointer; background:#ffcc00;}
	#flat-menu a:hover{cursor:pointer; background:rgba(0,0,0,0.5); } 
 
/*-------------------MOBILE-----------------*/

@media screen and (orientation: portrait) { 
 
}

@media  screen and (max-width: 1600px) {	
	#flat-menu { right:10%; top:200px;}
}	

@media  screen and (max-width: 1280px) {	
	#genplan-all {position:relative; top:-90px;}
	#flat-menu { right:10%; top:110px;}
	#plan-navigation {top:18%;}
}	

@media  screen and (max-width: 920px) {	
	
	#flat-menu { right:2%; top:10%;}
	#plan-navigation {top:15%;}
}	

@media  screen and (max-width: 800px) {	
	#genplan-all {position:relative; top:-40px;}
	#flat-menu { right:2%; top:6%; padding:10px;}
	#plan-navigation {top:10%;}
}	

@media  screen and (max-width: 640px) {	
	
	 
	#flat-menu a {padding:5px; font-size:1.6em;}
	#plan-navigation {top:12%; left:10%;}
	#plan-navigation h4{margin:5px 0;}
}
@media  screen and (max-width: 500px) {	
	#genplan-all {position:relative; top:0px;}
	#flat-menu { right:2%; top:3%; padding:6px;}
	#plan-navigation {top:6%; left:5%;}
	#plan-navigation h4{margin:5px 0;}
}	
@media  screen and (max-width: 470px) {	
	
 
}

@media  screen and (max-width: 415px) {	
	
	#flat-menu { right:2%; top:2%; padding:3px;}
	#flat-menu a {padding:3px; font-size:1.4em;}
	div.genplan_col {font-size:0.8em; width:120px !important;}
	div.genplan_col h4 {font-size:1.3em;}
	#plan-navigation {top:4%; left:2%;}
}

@media  screen and (max-width: 370px) {	
 
	#plan-navigation {top:1%; left:1%;}
}

@media  screen and (max-width: 340px) {	
 
	#plan-navigation {top:1%; left:1%; font-size:0.6em;}
	#plan-navigation div.etaj-links a{width:25px; height:28px;}
}