
.stage{
	position:absolute;
	inset:0;
	overflow:hidden;
}
.layer{
	position:absolute;
	left:70%;
	top:52%;
	width:0;
	height:0;
	transform:translate(calc(var(--mx,0)*var(--d)*1px),calc(var(--my,0)*var(--d)*1px));
	transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.c{
	--s:min(64vmin,600px);
	position:absolute;
	width:var(--s);
	height:var(--s);
	margin:calc(var(--s)/-2);
	border-radius:50%;
	mix-blend-mode:screen;
	animation:drift var(--t) ease-in-out infinite alternate;
}
.c1{
	background:linear-gradient(90deg,rgba(95,165,10,.95),rgba(47,122,18,.45) 55%,rgba(10,74,42,0));
	--k:-1;
	--t:9s;
}
.c2{
	background:linear-gradient(90deg,rgba(143,209,10,.95),rgba(74,148,16,.5) 55%,rgba(10,74,42,0));
	--k:0;
	--t:11s;
	animation-delay:-3s;
}
.c3{
	background:linear-gradient(90deg,#a6e60a,rgba(95,165,10,.65) 50%,rgba(10,74,42,.1));
	--k:1;
	--t:13s;
	animation-delay:-6s;
	box-shadow:inset 0 0 0 2px rgba(182,242,10,.55),0 0 90px rgba(166,230,10,.18);
}
@keyframes drift{
	from{transform:translateX(calc(var(--s)*-.2*var(--k) - var(--s)*.03)) scale(.95)}
	to{transform:translateX(calc(var(--s)*.2*var(--k) + var(--s)*.03)) scale(1.05)}
}
.ring{
	position:absolute;
	width:min(64vmin,600px);
	height:min(64vmin,600px);
	margin:calc(min(64vmin,600px)/-2);
	border-radius:50%;
	border:2px solid rgba(182,242,10,.5);
	left:calc(min(64vmin,600px)*.2);
	animation:pulse 6s ease-out infinite;
	opacity:0
}
.ring:nth-child(2){
	animation-delay:-2s;
}
.ring:nth-child(3){
	animation-delay:-4s;
}
@keyframes pulse{
	0%{
		transform:scale(1);
		opacity:.55
	}
	100%{
		transform:scale(1.7);
		opacity:0
	}
}
.dot{
	position:absolute;
	bottom:-12px;
	width:var(--w);
	height:var(--w);
	border-radius:50%;
	background:var(--lime);
	opacity:0;
	animation:rise var(--r) linear infinite;
	animation-delay:var(--dl);
}
@keyframes rise{
	0%{
		transform:translateY(0);
		opacity:0
	}
	15%{
		opacity:.6
	}
	85%{
		opacity:.4
	}
	100%{
		transform:translateY(-110vh) translateX(var(--x));
		opacity:0;
	}
}
.ripple{
	position:absolute;
	width:20px;
	height:20px;
	margin:-10px;
	border-radius:50%;
	border:2px solid var(--lime);
	pointer-events:none;
	animation:rip 1.4s ease-out forwards;
}
@keyframes rip{
	to{
		transform:scale(22);
		opacity:0;
		border-width:1px;
	}
}
@media (prefers-reduced-motion:reduce){
	.c, .ring, .dot, .ripple{
		animation:none;
	}
	.ring, .dot{
		display:none;
	}
}





* {
	margin:0;
	padding:0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;

	--color-dark: rgba(20, 40, 35, 1);
/*	--color-light: rgba(205, 240, 55, 1);*/
	--color-light: rgba(188, 241, 1, 1);
	--color-grey: rgba(137, 137, 137, 1);
	--color-text: rgba(5, 50, 35, 1);

	/* volga */
	--color-volga-blue: rgba(0, 160, 227, 1);
	--color-volga-green: rgba(157, 181, 28, 1);
	
	/* spec */
	--color-spec: rgba(254, 82, 0, 1);
	
	outline:none;

	/* Animated */
	--bg1:#06432a;
	--bg2:#033021;
	--bg3:#021f16;
	--lime:#b6f20a;
/*
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	transition: all 0.2s ease;
*/
}

html {
	height:100%;
	background:var(--bg2);
}

body {
	margin:0;
	padding:0;
	min-width:340px;
	height:100%;
	font-family: 'Proxima Nova Light', Arial, 'Calibri', Helvetica;
	font-size:12pt;
	color:#fff;
	/*background: var(--color-dark);*/
	/*background:url('/images/background-logon.jpg') no-repeat center fixed;*/
	/*background-size: cover;*/
	
	background:linear-gradient(135deg,var(--bg1),var(--bg2) 55%,var(--bg3));
}

.logon {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	width:100%;
	height:100%;
	z-index:999;
}
.logon .inner {
	padding:25px 40px;
}
.logon .row, .logon input:not(.ui-button) {
	display:block;
	width:100%;
	min-width:240px;
	text-align:center;
}
.logon .row {
	padding:0 0 10px 0;
}
.logon .row.center {
	padding:10px 0;
	text-align:center;
}
.logon input {
	color:var(--color-text);
	border:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}
.logon input:not(.ui-button) {
	padding:10px;
}

.logon a {
	color:#fff;
}

.logon a:hover {
	color:var(--color-light);
}

.ui-button {
	min-width:135px;
	padding:8px 25px;
	text-transform:uppercase;
	text-align:center;
	color:var(--color-text);
	background:var(--color-light);
	cursor:pointer;
}

.header {
	position:absolute;
	padding:50px 50px;
	top:0;
	left:0;
	width:100%;
}
.header img {
	max-width:250px;
}

.footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}
.footer img {
	width:100%;
}



.logon {
	z-index:99;
}


/* Подложка */
.content {
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content: center;
	flex-direction: row;
	z-index:-1;
}

.content .block {
	display:flex;
	align-items:center;
	justify-content: center;
	flex-grow:1;
	width:100%;
	height:100%;
}

.content .volga {
	background: linear-gradient(55deg, var(--color-volga-blue) 0%, var(--color-volga-blue) 15%,
									   var(--color-volga-green) 80%, var(--color-volga-green) 100%);
}

.content .spec {
	background:var(--color-spec);
}

.content .inner {
	padding:10px;
	width:45%;
	text-align:center;
}

.content .volga .inner {
	margin:-11.5% 0 0 0;
	width:40%;
}

.content .inner img {
	width:100%;
}




/* Placeholders */
/* Chrome/Opera/Safari */
::-webkit-input-placeholder {
	font-family: 'Proxima Nova Light', Arial, 'Calibri', Helvetica;
	text-align:center;
	text-transform:uppercase;
	color: var(--color-gray);
	opacity:1;
}
/* Firefox 19+ */
::-moz-placeholder {
	font-family: 'Proxima Nova Light', Arial, 'Calibri', Helvetica;
	text-align:center;
	text-transform:uppercase;
	color: var(--color-gray);
	opacity:1;
}
/* IE 10+ */
:-ms-input-placeholder {
	font-family: 'Proxima Nova Light', Arial, 'Calibri', Helvetica;
	text-align:center;
	text-transform:uppercase;
	color: var(--color-gray);
	opacity:1;
}
/* Firefox 18- */
:-moz-placeholder {
	font-family: 'Proxima Nova Light', Arial, 'Calibri', Helvetica;
	text-align:center;
	text-transform:uppercase;
	color: var(--color-gray);
	opacity:1;
}