/* . - class, # - id */
HTML	{font-size: 12px;} /* для исчисления rem */

BODY 	{position:relative; 
	font-size: calc( (100vw - 25rem) / (85 - 25) * (1.05 - 1) + 1.05rem); 
	font-family: Verdana, arial, Tahoma, helvetica, sans-serif; 
	text-decoration: none; 
	padding: 0 0 0 0; 
	margin:0 0 0 1%; 
	display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 
	flex-direction: column; -webkit-flex-direction:column; 
	background: white;
	}
H1 	{font-size: calc( (100vw - 25rem) / (85 - 25) * (2 - 1) + 2rem); font-weight: bold; text-align: center; 
	margin-bottom:2px;margin-top: 2px; color: #FF0000;
	}
H2 	{font-size: calc( (100vw - 25rem) / (85 - 25) * (1.34 - 1) + 1.34rem); font-weight: bold; 
	text-align: center; color: #505F92;margin-left: 10px;  margin-bottom: 2px; 
	}
H3 	{font-size: calc( (100vw - 25rem) / (85 - 25) * (1.1 - 1) + 1.1rem); font-weight: bold; 
	text-align: center; color: #818a02;margin-left: 10px;  margin-bottom: 2px; 
	}
#shift	{position:relative; left:0px;width:100%;}
P	{font-size: calc( (100vw - 25rem) / (85 - 25) * (1.05 - 1) + 1.05rem); 
	color: #000000;
	}
P.epigraph	{color: #7fe815;
	}
.ps	{color: #cc6666;
	}
#top	{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 
	-webkit-flex-direction:row; flex-direction: row; 
	justify-content: space-between;
	background: #f3f3f3;
	width: 98%;
	}
.inrow	{
	display: -webkit-box; display: -webkit-flex; 
  	display: -ms-flexbox; display: flex; 
	-webkit-flex-direction:row; flex-direction: row; 
	margin: 3px 3px 3px 3px;
	border: 2px transparent;
	justify-content: space-between;
	align-items: center;	
	}
/* service windows */

#reserve{position:relative;
	width: 15vw;
	}

#service{
	position:absolute;
	 top: 10px; 
	display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 
	-webkit-flex-direction:row; flex-direction: row; 
	justify-content: space-between;
	-webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center;
	align-items: center;
	padding: 0 35% 4vw;
	}
#service span {
	position:relative;
	display: contents;
	width: 4vw;
	padding: 20px 10px 5px 20px; 
	}

#service span a {
	text-decoration: none;	
	}

#infbox	{
	position: absolute;
	top: 0px;
	left: 0px;
	width: auto;
	display: none; 
	z-index:50;  
	margin: 0px;
	padding: 6px;
	border: 0px ;
	-moz-border-radius: 12px;-webkit-border-radius: 12px; 
	font-size: calc( (100vw - 25rem) / (85 - 25) * (1.05 - 1) + 1.05rem);
	background: #f9ff9c;
	opacity: 1;
	transition: opacity 1s;
	z-index:51;  
	}

#nick	{
	position:relative;
	top: 0px; 
	text-decoration: none;
	cursor: default;
	margin-right: 5px;
	}
#toWrite {
	position:relative;
	cursor: pointer;
	}
#liswin, #priwin, #ediwin, #regwin, #mailwin, #regwinRes, #agreewinRes	{
	position: absolute;
	top: 65px;  
	text-align:left; 
	margin:10px;
	padding: 5px; 
	display:none; 
	font-size: calc( (100vw - 25rem) / (85 - 15) * (1.05 - 1) + 1.02rem); 
	z-index:65; 
	background:white; 
	border: 2px solid #063df7;
	opacity: 1.0; 
	width: 	auto;				/* 21rem; */
		}
#liswin select	{
	overflow-y: hidden;
	border: 0;
	}

#regwinRes,#agreewinRes	{
	margin: 0 4px 4px 0;
	padding: 0 5px 5px 5px;
	border:solid 1px #666666;
	-moz-border-radius: 6px;-webkit-border-radius: 6px;
	overflow: visible;
	}

#ediwin .small, #regwin .small, #mailwin .small	{
	font-size: smaller;
	color: #05d505;
	}
.delsymb	{
	position: absolute;
	right: -41px; 
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index:65;  
	padding: 0;
	border: 1px;
	list-style: none;
	line-height: 1;
	border-radius: 20px;
	text-decoration: none;
	text-align: center;
	background: #bbbbbb;
	}
.delsymb span	{
	height: 20px;
	margin: 10px 0;
	color: grey;
	}
.delsymb span:before, .delsymb span:after {
	position: absolute;
	top: 9px;
	left: 20px;
	content: ' ';
	height: 20px;
	width: 2px;
	background-color: #333;
	}
.delsymb span:before {
	transform: rotate(45deg);
	}
.delsymb span:after {
	transform: rotate(-45deg);
	}
#puzzle, #mosaic {
	position:relative;
	display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 
	display: flex; 
	-webkit-flex-direction:row; flex-direction: row; 
	justify-content: space-between;
	-webkit-align-items: center; -webkit-box-align: center; 
	-ms-flex-align: center;
	align-items: center;
	padding: 0 1vw 1vw;
	width:385px;
	background:white;
	}

/* CUSTOM RADIO & CHECKBOXES
   https://stackoverflow.com/a/17541916/383904 */
.rad	{
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	}

.rad > input	{ /* HIDE ORG RADIO */
	visibility: hidden;
	}

/* RADIO STYLES */
.rad > i	{     /* DEFAULT <i> STYLE */
	display: inline-block;
	vertical-align: middle;
	width: 125px;
	height: 125px;
	padding: 2px;
	}

.rad:hover > i{ /* HOVER <i> STYLE */
	boarder: solid 2px #fff;
	background: gray;
	}

.rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */
	boarder: solid 3px #fff;
	background: orange;
	}

#service span.star	{vertical-align:-20%;padding:0px;}

.mybutton {
	background-color: #dedede;
    	padding: 5px 5px;
    	border-radius: 5px;
    	border: 1px ridge black;
	cursor: pointer;
	text-align: center;
	}

/* show_hide_password */

.password {

	position: relative;
	height: 25px;
	top: -16px;
	}

.password-control {
	position: absolute;
	top: 40px; 
	left: 13rem; 
	display: inline-block;
	width: 12rem;
	height: 15px;
	}

.password-control::after {
	content: url(../pics/view.svg); 
	position: absolute;
	top: -4px; 
	right: 8.5em;
	width: 15px;
	}

.password-control.view::after  {
	content: url(../pics/no-view.svg); 
	}

textarea {
	font-size: calc( (100vw - 25rem) / (85 - 25) * (1.05 - 1) + 1.05rem); 
	font-family: Verdana, arial, Tahoma, helvetica, sans-serif; 
	}

/* search box */ 

#search	{position: relative; 
	padding: 5px 0px 5px 0px; 
	margin: 0 5px; 
	width: 78vw; 
	}
#search_box { 
	padding:4px; 
	border:solid 1px #666666; 
	width: 50vw; 
	height:30px; 
	font-size:18px;
	-moz-border-radius: 6px;-webkit-border-radius: 6px; 
	}
.search_button { 
	border:#000000 solid 1px; 
	padding: 3px; 
	color:#000; 
	font-weight:bold; 
	font-size:16px; 
	-moz-border-radius: 6px; -webkit-border-radius: 6px;
	}
ul.update { 
	list-style:none; 
	font-size:1.1em; 
	margin-top:10px; 
	padding-left: 10px; 
	}
ul.update li { 
	height:30px; 
	border-bottom:#dedede solid 1px; 
	text-align:left;
	}
ul.update li:first-child { 
	border-top:#dedede solid 1px; 
	height:30px; 
	text-align:left;
	}
#searchresults { 
	position: absolute; 
	text-align:left; 
	margin-top:20px; 
	display:none; 
	font-family:Arial, Helvetica, sans-serif; 
	color:#000;
	font-size: calc( (100vw - 25rem) / (85 - 25) * (1.05 - 1) + 1.05rem); 
	z-index:60; 
	background:white; 
	opacity: .8; 
	}

.word	{font-weight:bold; color:#000000; /* оформление выдачи результатов поиска */
	} 


/* =========  Menu bar priorityscroll ========= */ 
#placekeeper	{
	position: relative;
	height: 116px;
	}
#prioritycover	{
	position: absolute;
	top: 150px;
	width: 95%;
	height:800px;
	overflow-x: hidden;
	}
#priorityscroll {
  	position: relative;  /* change to "fixed" if you want a fixed menu bar */
	overflow-y: visible;
	z-index: 55;
  	left: 0;
  	top: 0px;
	width: 100%;
  /* 	max-width: 1280px; */
	background: #999999; /* background of menu strip */
	}
html.can-touch #priorityscroll {
	max-width: 1200px; 
/*	overflow-x: hidden; */
	}
#priorityscroll ul {
	margin: 0;
	padding: 0px 20px 0px 0px;
	display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 
	list-style-type: none;
  	position: relative; 
  	min-width: 100%;
  	z-index: 55;
	-webkit-overflow-scrolling: touch; /* only for Safari */
	-webkit-transform: translateX(0);
	transform: translateX(0);
	-webkit-transition: -webkit-transform 0.3s; /* was 1s; */ 
	transition: transform 0.3s; /* was 1s; */ 
	}
#priorityscroll ul.has {
	margin: 0;
	padding: 0px 20px 0px 0px;
	display: none;
	transition: display 1.0s;
	list-style-type: none;
  	position: absolute; 
	top: 106px;
	left: -3px;
  	min-width: 100%;
	}


html.can-touch #priorityscroll ul { 
	padding: 0px 0px 0px 0px; 
	overflow: visible; /* was auto; */ 
	}

#priorityscroll li {
	position: relative;
	margin: 0;
	display: -webkit-box; display: -webkit-flex;
    	display: -ms-flexbox; 
	display: flex;
	-webkit-flex: none;
	flex: none;
	flex-wrap: wrap;
	justify-content:-webkit-flex-start; justify-content:flex-start; 
	float: left; /* non flex browsers */
	height: 106px;
  	z-index: inherit;
	}

#priorityscroll li.sub:hover {
/*	height: 224px; */
	}

#priorityscroll li a {
	font-family: freeset, compact, sans-serif;
    	font-weight: bold;
	display: block;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
	padding: 5px 5px; /*padding inside each link */
	color: white;
  	outline: none;
	/* border-right: 1px solid #999999; */
	border-bottom: 8px solid #999999;;
  	background: #bfbfbf; /*background of tabs (default state)*/
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
	width: 110px; height: 88px;
  	z-index: inherit;
	}


.outer {
    	position: relative;
	display: flex;
  	align-items: center;
  	justify-content: center;
	}
.inner {
    	position: absolute;
    	top: 44px;
	-webkit-transform: translateY(-50%);
    	transform: translateY(-50%);
	}
.inner2 {
    	position: absolute;
    	top: 22px;
	-webkit-transform: translateY(-50%);
    	transform: translateY(-50%);
	}
.inner3 {
    	position: relative;
    	top: -22px;
	left: 80px;
	}
.noselect {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	}
.fatBoard	{min-width:40px; background: #999999;}
.leftCl    	{border-right: 1px solid white;}
.rightCl    	{border-left: 1px solid white;}
	
#priorityscroll li a.end {
	width: 70px; 
	}
/* #priorityscroll li a:visited {
	color: white;
	}	*/

#priorityscroll li a:hover, #priorityscroll li a:active {
	border-bottom: 8px solid rgba(0,0,0,.3);
	background: red; /*background of UI links for hover state  */
	}
#priorityscroll li.sub:hover > ul, #priorityscroll li.sub:active > ul {
	display: flex;
	flex-direction:column;
	}
#priorityscroll li.sub ul li {
	height: auto;
	opacity: 80;
	}
#priorityscroll li.sub ul li:hover {
	left: -1.5px;
	top: -1.5px;
	}

#priorityscroll li.sub ul li a {
	display: block;
	height: 44px;
	background: #999999;
	border: 3px solid #f3f3f3;
	}
#priorityscroll li.sub ul li a:hover {
	border: 3px solid red;
	}
#priorityscroll ul li.sub:nth-child(1) ul li a, #priorityscroll ul li:nth-child(1) a:hover, #priorityscroll li.sub:nth-child(1) a.active {background: #999966;
	}
#priorityscroll ul li.sub:nth-child(2) ul li a, #priorityscroll ul li:nth-child(2) a:hover, #priorityscroll li.sub:nth-child(2) a.active {background: #6699CC;
	}
#priorityscroll ul li.sub:nth-child(3) ul li a, #priorityscroll ul li:nth-child(3) a:hover, #priorityscroll li.sub:nth-child(3) a.active {background: #99CC66;
	}
#priorityscroll ul li.sub:nth-child(4) ul li a, #priorityscroll ul li:nth-child(4) a:hover, #priorityscroll li.sub:nth-child(4) a.active {background: #666699;
	}
#priorityscroll ul li.sub:nth-child(5) ul li a, #priorityscroll ul li:nth-child(5) a:hover, #priorityscroll li.sub:nth-child(5) a.active {background: #CC6666;
	}
#priorityscroll ul li.sub:nth-child(6) ul li a, #priorityscroll ul li:nth-child(6) a:hover, #priorityscroll li.sub:nth-child(6) a.active {background: #d008b7;
	}
#priorityscroll ul li.sub:nth-child(7) ul li a, #priorityscroll ul li:nth-child(7) a:hover, #priorityscroll li.sub:nth-child(7) a.active {background: #05ccc2;
	}
#priorityscroll ul li.sub:nth-child(8) ul li a, #priorityscroll ul li:nth-child(8) a:hover, #priorityscroll li.sub:nth-child(8) a.active {background: #bbcc00;
	}


.nav__scroll {
	position: absolute; 
	top: 0;
	z-index: 56;
	padding: 0 0 .15em;
	width: calc(1.5em/2);
	min-width: 40px;
	max-width:50px;
	background-color: #eeeeee;
	font-family: Gill Sans, Futura, sans-serif;
	font-size: 12.0em;
	line-height: 0;
	height: 110px; /* b/c font-size is doubled */
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s;
	display: none;
	}
.nav__scroll:focus {
	opacity: 1;
	}
#nav__scroll--left {
	left: 0px;
	border-right: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	transition: left 0.3s;
	}
#nav__scroll--right {
	right: 0px;
	border-left: 1px solid #e0e0e0;
	border-bottom: 1px solid #e0e0e0;
	transition: right 0.3s;
	}

#arrow {
	min-width: 50px;
	}

/* ####### responsive layout CSS ####### */
html.can-touch .nav__scroll {
	display: block; touch-action: none; /*Отключает стандартное поведение браузера */
	}

/* ==========line of bread crumbs ================== */

#breadcrumbs	{
	position: relative; 
	top: 10px; 
	width: 100%;
/*	max-width:1250px; */
	left: 30px; 
	height: 20px;
	font-size: calc( (100vw - 25rem) / (85 - 25) * (1.09 - 1) + 1.09rem); font-weight: bold;
	}
.breadcrumbs a {
    	color : blue;
	}

/* ================ main content ================== */

#bodyId	{position: relative; top: 10px; max-width:1280px; min-width:320px;
	 display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; 	display:flex;
	}
#placekeeperZ	{ /* держатель места для вертикального меню */
	position: relative;
	height: 485px;
	width: 150px;
	}
#ZcolId	{position: absolute; width:150px; 
	}
#FcolId	{position: relative;
	left:20px; 
	padding-left: 5px; 
	margin-left: 10px; 
	display:block;
	width: fit-content;
	max-width:85%; 
	min-width:350px;
	-webkit-column-count:2;  
	-moz-column-count:2;  
	column-count:2;
	-moz-column-width: 170px;  
	-webkit-column-width: 170px;   
	column-width: 170px;
	-webkit-column-gap: 10px;  
	-moz-column-gap: 10px;  
	column-gap: 10px;   
	}
#FcolId.theonlycolumn	{	
	-webkit-column-count:1;  
	-moz-column-count:1;  
	column-count:1;
	-moz-column-width: 350px;  
	-webkit-column-width: 350px;   
	column-width: 350px;
	}
#status	{display: none;} /* поле для дополнительной формы на странице */ 
.onecolumn	{
		overflow: hidden; /* Fix for firefox and IE 10-11  */
		-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
		page-break-inside: avoid; /* Firefox */
		break-inside: avoid; /* IE 10+ */
		break-inside: avoid-column;
		}
.textfade, .expand
		{position: relative; color: #a0038d; cursor: pointer; 
		font-weight:bold;		
		}
.paragraphfade, .parexpand
		{position: relative; color: lightblue; cursor: pointer; 
		font-weight:bold;		
		}
.paragraphfade ul, .parexpand ul
		{color: black; 		
		}
.textfade p, .paragraphfade p, .expand  p, .parexpand  p, .textfade ul, .paragraphfade ul, .expand  ul, .parexpand  ul
		{position: relative; font-weight: normal; 
		}
.textfade p, .expand  p, .textfade ul, .expand  ul
		{color: #a0038d;
		}
.textfade > p, .paragraphfade > p, .paragraphfade > div, .paragraphfade > .textfade > p, .parexpand > .textfade > p, .textfade > ul, .paragraphfade > ul, .paragraphfade > .textfade > ul, .parexpand > .textfade > ul, .paragraphfade > h3
		{
		display: none;	
		}

.textfade:before{content: 'Подробнее...';
		}
.textfade:active:before, .expand:before
		{content: 'Ниже свернуть'; 
		}
.textfade:active:after, .expand:after
		{content: 'Конец свитка'; 
		}
.textfade:active > p, .expand > p, .paragraphfade:active > p, .parexpand > p, .paragraphfade:active > div, .parexpand > div, .textfade:active > ul, .expand > ul, .paragraphfade:active > ul, .parexpand > ul, .parexpand > h3
		{display: block;
		}
.paragraphfade:before{content: 'Читать';
		}
.paragraphfade:active:before, .parexpand:active:before, .parexpand:before
		{content: 'Закрыть'; 
		}
.paragraphfade:active:after, .parexpand:active:after, .parexpand:after
		{content: 'Конец раздела'; 
		}

/* ============ for tables ============= */

.bl		{font-size: 1rem; color: #475778; width: 100%;
    		max-width: 100%;}
.bl th,	.bl td	{padding: 0.1rem 0.2rem; vertical-align: middle; text-align: center;
		} 
.bl th		{background:#bc0;}
.bl tr:nth-child(even) {
    		background:#fff8dd;}

.zBlock	{position: relative; z-index:40;}

.lineDescr	{position: relative; width:400px; 
		display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; 
		display:flex; 
		height:52px; 
		}
.lineDescr > p	{margin:2px; width:50px; height:50px; border: 1px solid #000000; background: white; font-weight: 100;   padding: 0px 14px 0px 14px; font-size: 18px;
		}
.lineDescr > p:first-child,.lineDescr > p:last-child {font-size: 24px;
		}
.lineDescr  a	{position: absolute; top:20px; cursor: pointer; }
.lineDescr > p:first-child a,.lineDescr > p:last-child a {top:14px;
		}
.lineDescr > p.chosen {font-weight: bold; border-width: 2px}

/* ============ picture gallery ============= */

#galleryBlock	{position: relative; 
		display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 
		-webkit-justify-content: flex-start; justify-content: flex-start; 
		-webkit-align-items:center; align-items:center; 
		z-index:50;
		top: 5px;
		}

#galleryId	{position: relative; 
		height: 240px; 	/*30vh;*/
		width: 100%; 
		overflow: hidden; 
		z-index:49;
		}
#galleryId img	{ width:auto;
		height: 240px;	/*height: 240px;*/
		cursor: pointer;
		cursor: url('../pics/zoom.gif');
		cursor: zoom-in;
		}

#leftArrowId, #rightArrowId {
		width: 100px; 
		position: absolute; 
		z-index:50; 
		cursor: pointer;
		}
#leftArrowId	{left: -30px;	/*-2vh;*/
		}
#rightArrowId	{right:-25px;	/*-2vh;*/
		}
#galleryIdUl	{position: absolute; 
		left: 50px; 	/*10vh;*/
		width: 100%; 
		padding: 5px 0 0 0; 
		margin:0; 
		min-width: 2400px; 
		display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; 
		list-style-type: none; 
		-webkit-justify-content: flex-start; justify-content: flex-start; 
		-webkit-align-items:center; align-items:center; 
		}
.clmoveim0	{opacity: 1;
		animation-name: opdown;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		}
.clmoveim1	{opacity: 1;
		animation-name: opup;
		animation-duration: 1s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		}
.clleftright	{opacity: 1;
		animation-name: leftright, opdownup;
		animation-duration: 4s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		}
.clrightleft	{opacity: 1;
		animation-name: rightleft, opdownup;
		animation-duration: 4s;
		animation-iteration-count: 1;
		animation-direction: normal;
		animation-timing-function: linear;
		}
@-webkit-keyframes leftright { from { -webkit-transform: translateX(0px);} to { -webkit-transform: translateX(-120px);} }
   @-moz-keyframes leftright { from { -moz-transform:  translateX(0px);} to { -moz-transform: translateX(-120px);} }
     @-o-keyframes leftright { from { -o-transform:  translateX(0px);} to { -o-transform: translateX(-120px);} }
        @keyframes leftright { from { transform:  translateX(0px);} to { transform:  translateX(0px);} }

@-webkit-keyframes rightleft { from { -webkit-transform: translateX(0px);} 50% { -webkit-transform: translateX(120px);} to { -webkit-transform: translateX(0px);}  }
   @-moz-keyframes rightleft { from { -moz-transform:  translateX(0px);} 50% { -moz-transform: translateX(120px);} to { -moz-transform:  translateX(0px);}  }
     @-o-keyframes rightleft { from { -o-transform:  translateX(0px);} 50% { -o-transform: translateX(120px);} to { -o-transform:  translateX(0px);}  }
        @keyframes rightleft { from { transform:  translateX(0px);} 50% { transform:  translateX(0px);} 75% { transform: translateX(120px);} to { transform:  translateX(0px);}  }

@-webkit-keyframes opdown { from { opacity: 1;} to { opacity: 0;}  }
   @-moz-keyframes opdown { from { opacity: 1;} to { opacity: 0;}  }
     @-o-keyframes opdown { from { opacity: 1;} to { opacity: 0;}  }
        @keyframes opdown { from { opacity: 1;} to { opacity: 0;} }

@-webkit-keyframes opup { from { opacity: 0;} to { opacity: 1;}  }
   @-moz-keyframes opup { from { opacity: 0;} to { opacity: 1;}  }
     @-o-keyframes opup { from { opacity: 0;} to { opacity: 1;}  }
        @keyframes opup { from { opacity: 0;} to { opacity: 1;} }

#galleryIdUl li { padding: 0 10px; 
		}
#gal1	{position: relative; width: 240px;	/*25vh;*/
	}
#gal0 img	{cursor: auto;
	}
.imScale	{ display:block;
		-webkit-transform: scale(0.5); transform: scale(0.5);
		}

/*    ----------------Всплывающее окно-----------------     */
#popUp {display:none;
	left: 30%; 
	height: 480px;
	position: absolute;
	width: 480px;  
	border-radius: 11px;
	background: #fef; 
	margin-left: -70px;	
	margin-top: -70px;
	padding: 17px;
	}
#popUp img {
  	height: 100%;
  	width: 100%;
  	object-fit: contain;
	}
.popUpTransOn {z-index: 61;
	-webkit-transform: translateY(250px);
	transform: translateY(250px);
	-webkit-transition: -webkit-transform 1s ease-in 0.5s; 
	transition: transform 1s ease-in 0.5s;
	}
.popUpTransOff {z-index: 0;
	-webkit-transform: translateY(-600px);
	transform: translateY(-600px);
	-webkit-transition: -webkit-transform 1s ease-in, z-index 0s linear 1s; 
	transition: transform 1s ease-in, z-index 0s linear 1s;
	}
#popUp #close {
	cursor: pointer;
	position: absolute;
	width: 23px;
	height: 23px;
	top: 0px;
	right: 0px;
	display: block;
}
#overlay {display:none;
	background-color:#262666; 
	position:fixed; 
	width:100%; 
	height:100%;
	top:0;
	left:0;
	}
.overlayTransOn { opacity:0.86; z-index:60; 
	-webkit-transition: opacity 1s linear; 
	transition: opacity 1s linear; 
	}
.overlayTransOff { opacity:0; z-index:0; 
	-webkit-transition: opacity 1s linear, z-index 0s linear 1s; 
	transition: opacity 1s linear, z-index 0s linear 1s;
	}

/* ===== Additional variety for checking multilevel css menu ======= */
.check-media{
	display:none;
	width:101vw; /* must to be no less than 101 for unbreakable switching */
	} 
/* =============  clocks of answer waiting ==================================== */

.clock {
	border: 1px solid #000000;
	border-radius: 50%;
 	position: relative;
 	width: 50px;
 	height: 50px;
 	}
.clock.opened {
	display: block;
	}
.clock.closed {
	display: none;
	}
.clock div, .clock div:before, .clock div:after {
 	box-sizing: border-box;
 	position: absolute;
 	left: 0;
 	top: 0;
 	width: 100%;
 	height: 100%;
 	content: '';
 	display: block;
	}
.clock .border .arrow {
 	width: 95%;
 	height: 95%;
 	left: 1%;
 	top: 1%;
 	z-index: 50;
 	-webkit-animation: seconds  60s infinite steps(60);
 	animation: seconds  60s infinite steps(60);
	}
.clock .border .arrow:before {
 	width: 2px;
 	height: 50%;
 	left: 50%;
 	margin-left: -1px;
 	background: black;
	}
.clock .border .arrow:after {
 	width: 8px;
 	height: 8px;
 	left: 50%;
 	top: 50%;
 	margin-left: -4px;
 	margin-top: -4px;
 	background: #fff;
 	border: 2px solid #000;
 	border-radius: 50%;
	}
@keyframes seconds {
 	0% {
	 -moz-transform: rotate(0deg); /* Для Firefox */
	 -ms-transform: rotate(0deg); /* Для IE */
	 -webkit-transform: rotate(0deg); /* Для Safari, Chrome, iOS */
	 -o-transform: rotate(0deg); /* Для Opera */
	 transform: rotate(0deg);
	 }
	 100% {
	 -moz-transform: rotate(360deg); /* Для Firefox */
	 -ms-transform: rotate(360deg); /* Для IE */
	 -webkit-transform: rotate(360deg); /* Для Safari, Chrome, iOS */
	 -o-transform: rotate(360deg); /* Для Opera */
	 transform: rotate(360deg);
	 }
	}


/* =============   Adaptive multilevel css vertical menu ======================= */
#shortmes	{
	position: absolute;
	top: 0px;
	left: 160px;
	width: 100%;
	display: none; 
	z-index:50;  
	margin: 0px;
	padding: 6px;
	border:solid 1px #666666;
	-moz-border-radius: 6px;-webkit-border-radius: 6px; 
	font-size: calc( (100vw - 25rem) / (85 - 25) * (1.05 - 1) + 1.05rem);
	background: #00ffff;
	opacity: 0;
	transition: opacity 0.5s;
	cursor:crosshair;
	}
#shortmes::after {
	content: "+"; 
	font-size: 1.5em;
 	color: black;
	position: absolute;
	top: -3px;
	right: -12px;
	width: 20px;
	height: 20px;
	padding-bottom: 4px;
	padding-left: 4px;
	margin: -14px 0px 0px -14px; /* Поля вокруг content */ 
	background: orange;
	border-radius: 50%;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: rotate 0.5s ease;
	}
#vert-menu-button { 
	position: absolute;
	top: -40px;
	width: 148px;
	display: none; 
	z-index:50;  
	margin: 0;
	padding: 0;
	border: 0;
	height: 41px;
	list-style: none;
	line-height: 1;
	text-decoration: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #bbbbbb;
	}

#verticalscroll {
	display: block;
  	position: relative;  /* change to "fixed" if you want a fixed menu bar */
	overflow-y: hidden;
	overflow-x: hidden;
	z-index: 45;
  	left: 0;
  	top: 0px; /* was 0 */
	width: 100%;
  	max-width: 150px;
	height: 480px;
	background: #bfbfbf; /* background of menu strip */
	}

#verticalscrollExp {
	display: block;
	}

#verticalscrollExp.closed {
	display: none;
	}

#verticalscroll ul {
	margin: 0;
	padding: 0px 0px 0px 0px; /* was 40px 0px 40px 0px */
	display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; 
	display: flex; 
	list-style-type: none;
  	position: relative; 
  	min-width: 100%;
  	z-index: 47;
	-webkit-overflow-scrolling: touch; /* only for Safari */
	-webkit-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: -webkit-transform 1.5s; /* was 1s; */ 
	transition: transform 1.5s; /* was 1s; */ 
	flex-direction:column;
	}

#verticalscroll ul li ul.roll {
	display: none;
	padding: 0px 0px 0px 0px;
	}

#verticalscroll ul li ul.roll.opened {
	display: block;
	background: gray;
	mах-width: 100%;
	}

html.can-touch #verticalscroll ul {
/*	padding: 0px 0px 41px 0px; */
	}
html.can-touch #verticalscroll { 
	overflow-y: visible; /* was auto; */ 
	}

#verticalscroll li {
	position: relative;
	margin: 0;
	display: -webkit-box; display: -webkit-flex;
    	display: -ms-flexbox; 
	display: flex;
	-webkit-flex: none;
	flex: none;
	flex-wrap: wrap;
	justify-content:flex-start; justify-content:-webkit-flex-start;
	float: left; /* non flex browsers */
	left: 2px;
	}
html.can-touch #verticalscroll ul li {
	top:0px;	/* was 40px */
	}
html.can-touch #verticalscroll ul li ul li {
	top:0px;
	}
#verticalscroll li a,  html.can-touch #verticalscroll li a:hover {
	display: block;
  	position: relative;
	text-decoration: none;
	margin: 0;
	padding: 10px 5px 0px 5px; /*padding inside each link */
	color: white;
  	outline: none;
	border-top: 1px solid rgba(0,0,0,.2);
	border-right: 8px solid rgba(0,0,0,.2);
  	background: #2222; /*background of tabs (default state)*/
	-webkit-transition: all 1s;
	transition: all 1s;
	height: 30px;
	width: 130px;
	}
#verticalscroll li a:visited {
	color: white;
	}

#verticalscroll a.cursor	{
	cursor:url("../pics/down.gif"), s-resize;
	}
#verticalscroll a.cursor::after, html.can-touch #verticalscroll li a:hover::after {
	content: ""; 
	position: absolute;
	top: 12px;
	right: 10px;
	width: 7px;
	height: 10px;
	border-bottom: 3px solid red;
	border-right: 3px solid red;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	transition: rotate 1s ease;
	}

#verticalscroll li a:hover, #verticalscroll li a.active, html.can-touch #verticalscroll li a.active {
	border-bottom: 1px solid rgba(0,0,0,.3);
	background: gray; /*background of UI links for hover state  */
	}

#verticalscroll a.cursor:hover::after, #verticalscroll a.cursor.active::after, html.can-touch #verticalscroll a.cursor.active::after
	{
	content: ""; 
	position: absolute;
	top: 12px;
	right: 10px;
	width: 7px;
	height: 10px;
	border-bottom: 3px solid red;
	border-right: 3px solid red;
	-webkit-transform: rotate(45deg);
 	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: rotate 1s ease;
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
	}

html.can-touch #verticalscroll li a::after{
	/* disable hover effect on touch screen input */
	/* background: inherit; */
	} 

.nav__scroll_v {
	position: relative; 
	z-index: 49;
	padding: 0 0 .15em;
	max-width:148px;
	background-color: #eeeeee;
	font-family: Gill Sans, Futura, sans-serif;
	font-size: 6.0em;
	line-height: 0;
	height: 41px;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s;
	display: none;
	width: 148px;
	text-align: center;
	}
.nav__scroll_v span {
	/* vertical-align: -37px; */
	}

#nav__scroll--up {
	top: 0px;
	border-bottom: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	transition: top 0.3s;
	height: 41px;
	}

.nav__scroll--up span::after 
	{
  	position: absolute;
  	top: 10px;
  	right: 55px;
  	width: 20px;
  	height: 20px;
  	border-top: 5px solid #000000;
  	border-right: 5px solid #000000;
  	content: "";
  	-webkit-transform: rotate(-45deg);
  	-moz-transform: rotate(-45deg);
  	-ms-transform: rotate(-45deg);
  	-o-transform: rotate(-45deg);
  	transform: rotate(-45deg);
	}

#nav__scroll--bottom {
	bottom: 0px;
	border-top: 1px solid #e0e0e0;
	border-right: 1px solid #e0e0e0;
	transition: bottom 0.3s;
	height: 41px;
	}
.nav__scroll--bottom span::after 
	{
  	position: absolute;
  	top: 5px;
  	right: 55px;
  	width: 20px;
  	height: 20px;
  	border-bottom: 5px solid #000000;
  	border-right: 5px solid #000000;
  	content: "";
  	-webkit-transform: rotate(45deg);
  	-moz-transform: rotate(45deg);
  	-ms-transform: rotate(45deg);
  	-o-transform: rotate(45deg);
  	transform: rotate(45deg);
	}

.nav__scroll_v:focus {
	opacity: 0.9;
	}
.nav__scroll--visible {
	opacity: .8;
	transition: opacity 0.3s;
	}

/* ####### responsive layout CSS ####### */
html.can-touch .nav__scroll_v 
	{display: block; touch-action: none; 
	} /*Отключает стандартное поведение браузера */

#verticalscroll li.nodisp	{display: none;}

/* ============ The end of Adaptive multilevel css menu ============= */


/*
.returnHistory {
	font-size:15px; 
	font-weight:bold; 
	text-align: center; 
	margin-left:5px;
	color:#505F92; 
	cursor:pointer;}
*/



#foot 	{position:relative;
	display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
	-webkit-flex-direction:column; flex-direction: column;
	}
#footposition 	{
	position:relative; 
	top:50px;
	}
#socialNets {display: flex; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; flex-direction: row; -webkit-flex-direction:row; -webkit-justify-content: flex-start; justify-content: flex-start; align-items:center; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
.shift4	{position: relative; top: 0px; margin: 5px; z-index:51; -webkit-flex: 0 1 80px; 
	-ms-flex:  0 1 80px; 
	flex:  0 1 80px;
	}

#adrrId	{border: none; 
	background-image: url(/pics/adrr.gif); 
	width:750px; 
	height:45px; 
	margin:0; 
	background-size: contain; background-repeat: no-repeat;
	}

/* -------------  bottom menu begin for 12 boxes------------ */

.nav 	{position: absolute;
 	top:200px; left:18vw;
 	width:98vw;
 	max-width:115vw; 
	font-size: 2.6vw;
	height:	4.5em;			/* 90px; 25vh;*/
	/*max-height:10vw;*/	
 	margin-top: -40px;
	margin-left:-18vw;  
	background-color: #999999;
	transform: translateZ(0); 
	}
.nav:hover .link { 
	width: 5vw;} 	/*width: 4%; 4.4vw;*/

.nav .link {
	position: relative;
	float: left;
	width: calc( 97vw/12 ); 	/* width: 8%; 7.3vw*/
	height: 100%; 	
	color: #fff;
	border-right:0.008vw solid #ddd;	/*  1px*/
	transition: .5s width;
	overflow: hidden;
	cursor: pointer;
	}

.nav .link:last-child {
	float: left;
	border-right: 0;
	}
.nav .link:hover {
	width: calc( 97vw - 5vw*11 ); 	/*width: 56%; 40vw*/
	color: #555;
	background-color: #bfbfbf;
	}

.nav .link .small {
	position: absolute;
	top: 0.5em;	
	left: 1.5vw;	/*1vw;*/
	width: 6.5vw;
	line-height: 4em;
	}
.nav .link .small img {
	width:4.8vw;
	}
.nav:hover .link .small {
	left: 5vw;		/* 4.95vw; */
	}
.nav .link:hover .small {
	left: 1vw;
	}
.nav .link .full {
	position: absolute;
	top:0.5em; 				/*20px; 1.5vh;*/
	left: 8vw; /* 7.5 vw;*/
	text-transform: uppercase;	
	}
.nav .link .full .f1, .nav .link .full .f2 {
	font-size:2.6vw;
	white-space:nowrap;
	}
.nav .link .full .f2 {
	margin-top: 0.6vw;
	font-size: 0.7em;	/*1.3vw;*/
	}
.nav .link .prev {
	position:absolute; 
	top:0.5em;			/*10px; 0.5em;*/
	left: 1vw;		/*0.4vw;*/
	line-height:4em; 
	transition: .5s opacity;
	opacity:0;
	}
.nav .link .prev img { 
	width:3.0vw; 
	}
.nav .link:hover .prev {
	opacity: 0;
	}
.nav:hover .prev {
	 opacity: 1;
	}

/* ---------------  bottom menu end ------------------------- */

#cw	{position: relative; top:100px;}

@media (max-width: 1024px)
	{
	.nav {width: 99vw; }	

	}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) /* Tablet and Mobile */ 
	{
	.nav {width: 99vw; }
	#gal0	{width: 180px;}
/*	#galleryId, #galleryId img	{height: 180px; }	*/
	.imScale	{-webkit-transform: scale(0.75); transform: scale(0.75);}
	#adrrId	{width:600px; }
	}


@media all and (max-width: 600px) and (orientation: portrait) 
	{
	.nav {width: 99vw; }
	#reserve{height: 120px;}
	#service{flex-direction: column;}
	#service span {padding: 5px 10px 5px 10px; }
	#prioritycover	{top: 165px;} 
	#breadcrumbs {max-width: 570px; left:5px;}
	.nav {top:250px;}
	#adrrId	{width:550px; }
	#galleryId	{top:5px;}
	#shift		{left: 140px; width:65%;top:15px;}
	#placekeeperZ	{ /* держатель места для вертикального меню */
	width: 0px;
	}
	#FcolId		{
		left:0px; 
		min-width:400px;
		-webkit-column-count:1;  
		-moz-column-count:1;  
		column-count:1;
		-moz-column-width: 400px;  
		-webkit-column-width: 400px;   
		column-width: 400px;  
		}
 	#vert-menu-button
 			{display:block;
			 padding:20px; color:#000000;
			 cursor:pointer;
			 font-size:12px;
			 text-transform: uppercase;
			}
  	#vert-menu-button::after
 			{content: '';
			 position:absolute; top:15px; right:20px; display:block;
			  width:15px; height:2px; background:#000000;
			} /* ---------- top strip -------*/
   	#vert-menu-button::before
 			{ content: ''; 
			 position:absolute; top:20px; right:20px; 			display:block;
    			width:15px; height:3px; 
			border-top:2px solid #000000; 
			border-bottom:2px solid #000000;
			} /* ---------- two bottom strips -------*/
	}

@media screen and (max-width: 550px) 
	{
	.nav {width: 100vw; }
	#adrrId	{width:540px; }
	#adrrId	{background-image: url(/pics/adrr2.gif); width:320px; height:50px; }
	#shift		{width:48%;}
	#FcolId		{ 
		min-width:200px;
		-webkit-column-count:1;  
		-moz-column-count:1;  
		column-count:1;
		-moz-column-width: 200px;  
		-webkit-column-width: 200px;   
		column-width: 200px;  
		}
	}

@media (max-width: 480px) and (orientation: portrait), (max-width: 320px) 
	{
	.nav {width: 101vw;}
	#gal0	{width: 108px;}
	#galleryId, #galleryId img	{height: 158px;}	
	.imScale	{-webkit-transform: scale(0.55); transform: scale(0.55);}
	#galleryIdUl	{left: 35px;}
	#popUp {left: 20%; 
		height: 300px;
		width: 300px;  
		}
	.popUpTransOn {
			-webkit-transform: translateY(150px);
			transform: translateY(150px);
			}
	#shift		{width:40%;}
	#FcolId		{ 
		max-width: 300px;
		min-width:150px;
		-webkit-column-count:1;  
		-moz-column-count:1;  
		column-count:1;
		-moz-column-width: 150px;  
		-webkit-column-width: 150px;   
		column-width: 150px;  
		}
	#adrrId	{ width:300px; }
	#linksAcounts {width:320px; }
	}

@media (max-width: 300px) and (orientation: portrait) 
	{
	.nav {width: 102vw; }
	#galleryId, #galleryId img	{height: 102px; }	
	#gal0	{width: 102px;}
	.imScale  {-webkit-transform: scale(0.5); transform: scale(0.5);}
	#galleryIdUl	{left: 30px;}
	#popUp {left: 1%; 
		height: 250px;
		width: 250px;  
		}
	#shift		{width:40%;}
	#FcolId		{ 
		min-width:120px;
		-webkit-column-count:1;  
		-moz-column-count:1;  
		column-count:1;
		-moz-column-width: 120px;  
		-webkit-column-width: 120px;   
		column-width: 120px;  
		}
	#adrrId	{width:200px; }
	#linksAcounts {width:300px; }
	}