@charset "utf-8";
/* CSS Document � 
 * Used Animista code. See http://animista.net
 * ---------------------------------------------- */

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ BASIC ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
p {
	text-align: justify;
	margin: 0 0 0.6em 0;
}

	p:last-child {
		margin-bottom: 0;
	}

a,
a:hover,
a:visited,
a:focus {
	color: inherit;
	text-decoration: none;
	border: none;
	padding: 0;
	margin: 0;
}

ol, ul {
	text-align: justify;
	display: grid;
	margin: 0;
	gap: 6px;
	padding: 0 0 0 1em;
}

ol {
	list-style-type: decimal;
}

ul + p {
	margin-top: 0.6em;
}

ol li {
	border-bottom: dotted 2px rgba(0, 0, 0, 0.25);
}

/*ol li a {
  border: none !important;
}*/

li span {
	float: right;
}

::selection {
	background: var(--b-select);
	color: var(--f-select);
}

i, b, del, dfn, mark, u, s, sub, sup, strong, small, samp {
	display: inline;
	color: inherit;
	font-weight: inherit;
	text-decoration: none !important;
}

	i[lang='en'], p[lang='en'] {
		display: none;
	}

		i[lang='en'] q::before, p[lang='en'] q::before {
			content: '\201C';
		}

		i[lang='en'] q::after, p[lang='en'] q::after {
			content: '\201D';
		}

q.eng::before {
	content: '\201C';
}

q.eng::after {
	content: '\201D';
}

em {
	font-style: italic;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ LINKS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */


a.link {
	color: rgba(0, 0, 0, 0.8);
	background: linear-gradient(var(--back-link), var(--back-link)) center no-repeat;
	background-size: 0 0;
	padding: 0 4px;
	border-bottom: dotted 2px rgba(0, 0, 0, 0.25);
}

	a.link.alt {
		color: var(--red);
		background: linear-gradient(var(--back-link-alt), var(--back-link-alt)) center no-repeat;
		background-size: 0 0;
		border: none !important;
	}

a.link:hover, a.link:focus,
a.link.alt:hover, a.link.alt:focus {
	color: rgba(255, 255, 255, 0.8);
	background-size: 100% 100%;
	border-color: transparent;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

a.link.alt:hover, a.link.alt:focus {
	color: rgba(255, 255, 255, 0.9);
}

.webres a {
	padding: 2px 4px;
	color: rgba(0, 0, 0, 0.8);
	background: linear-gradient(var(--back-link), var(--back-link)) center no-repeat;
	background-size: 100% 0;
	-webkit-transition: all .1s ease;
	transition: all .1s ease;
}

.webres a:hover, .webres a:focus {
	color: rgba(255, 255, 255, 0.9);
	background-size: 100% 100%;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}


span.news {
	display: block;
	position: relative;
	margin-bottom: 4px;
	border-bottom:2px dotted #a3a3a3;
}

span.news:hover {
	border-bottom:2px dotted transparent;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

span.news:last-of-type {
	margin-bottom: 0;
}

.news::after {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	content: attr(data-news);
	color: rgba(0,0,0,0.6);
	padding: 3px 4px 2px 0;

}

.news:hover::after {
	color: white;
	-webkit-transition: all .4s ease;
	transition: all .2s ease;
}


.news a {
	display: block;
	padding: 0;
	padding: 3px 2px 2px 4px;
	text-align: start;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	height: 100%;
	background: linear-gradient(var(--back-link), var(--back-link)) center no-repeat;
	background-size: 100% 0;
	
}

.news a:hover {
	color: white;
	background-size: 100% 100%;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

	.news a b {
		display: none;
	}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ SECTION ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.wrapper {
	display: -webkit-flex;
	display: flex;
	width: 100%;
	max-width: 100%;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	min-height: 100vh;
}

main, #navbar {
	background-color: var(--b-dark);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	padding: 0;
	margin: 0;
}



main {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	min-height: 100vh;
	/*height: 100vh;
  min-height: 100%;*/
	width: calc(100% - var(--navbar-width) - 0.5rem );
	max-width: 1024px;
}

section {
	display: none;
	margin: 0;
	padding: 0;
}

.cur-section {
	display: block;
}

article {
	display: block;
	padding: 0;
	/*	992px */
	width: calc(100% - 2rem); 
	margin: 1rem;
}

article.nonmargin {
	margin-bottom: 0.5rem;
}

section > details {
	display: none;
}

.body-text {
	display: block;
	/*width: calc(100% - 2rem);*/
	padding: 1rem;
	background-color: var(--text-back);
	cursor: default;
}

.body-text:after {
	content: "";
	display: table;
	clear: both;
	height: 0;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ MAIN ANIMATION ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
#navbar {
	-webkit-animation: start-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: start-left 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

main {
	-webkit-animation: start-right 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: start-right 0.9s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes start-left { 0% { -webkit-transform: translateX(-280px); transform: translateX(-280px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

@keyframes start-left { 0% { -webkit-transform: translateX(-280px); transform: translateX(-280px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

@-webkit-keyframes start-right { 0% { -webkit-transform: translateX(280px); transform: translateX(280px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

@keyframes start-right { 0% { -webkit-transform: translateX(280px); transform: translateX(280px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

@-webkit-keyframes panel-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } 100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 } }

@keyframes panel-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } 100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 } }

@-webkit-keyframes panel-in-right { 0% { -webkit-transform: translateX(100%); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

@keyframes panel-in-right { 0% { -webkit-transform: translateX(100%); transform: translateX(1000px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

/*------------ SECTION ANIMATION -------------*/

.section-out {
	-webkit-animation: slide-out-sec-bot 0.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: slide-out-sec-bot 0.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.section-in {
	-webkit-animation: slide-in-sec-bot 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-sec-bot 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-sec-bot { 0% { -webkit-transform: translateY(300px); transform: translateY(300px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

@keyframes slide-in-sec-bot { 0% { -webkit-transform: translateY(300px); transform: translateY(300px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

@-webkit-keyframes slide-out-sec-bot { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } 100% { -webkit-transform: translateY(300px); transform: translateY(300px); opacity: 0 } }

@keyframes slide-out-sec-bot { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } 100% { -webkit-transform: translateY(300px); transform: translateY(300px); opacity: 0 } }


/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ MAIN HEADER & FOOTER ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
h1, h2, h3, h4, h5, h6, header {
	font: var(--fnt-header);
	color: var(--white-alpha);
	text-decoration: none;
}

h1, h2, h3 { display: none !important; }

article > header {
	position: relative;
	height: var(--header-height);
	line-height: var(--header-height);
	padding: 0 1rem 0 1rem;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	background-color: var(--b-head);
	color: var(--yellow-alpha);
	text-align: left;
}

article > footer {
	font: var(--sans-serif-sm);
	/*font-variant: small-caps;*/
	height: var(--footer-height);
	line-height: var(--footer-height);
	padding: 0 1rem 0 1rem;
	margin: 0;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--white-alpha);
	background-color: var(--army-lt);
	text-align: left;
}

article > footer.black {
	font: var(--fnt-text-sm);
	font-variant: small-caps;
	height: var(--header-height);
	line-height: var(--header-height);
	color: var(--f-foot);
	background-color: var(--b-head);
}

footer > span,
header > span {
	display: inline-block;
	float: right;
	color: var(--f-foot);
}

footer.small {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: auto;
	padding: 0.5rem 1rem 0.5rem 1rem;
	background-color: var(--army-pal-lt);
	gap: 0.8rem;
	overflow: visible;
}

footer.small > span {
	float: none;
	flex: 1;
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	max-height: 52px;
	font: var(--sans-serif-sm);
	font-size: 12px;
	text-align: justify;
	color: var(--white-back);
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 4;
}

footer.small > .nordic-logo {
	height: 40px;
	margin-top: 10px;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ NAVBAR ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
#navbar {
	position: -webkit-sticky;
	position: sticky;
	display: -webkit-flex;
	display: flex;
	flex-flow: column;
	top: 0;
	width: var(--navbar-width);
	min-width: var(--navbar-width);
	height: 100vh;
	/*min-height: 100%;*/
	margin-right: 0.5rem;
}

nav, header, footer {
	overflow: hidden;
	-webkit-user-select: none;
	user-select: none;
}

#navbar-header {
	display: block;
	min-height: var(--logo-height);
	margin: 0;
	background-color: black;
}

#navbar-slider{	
	display: block;
	position: relative;
	left: 0; top: 0;
	margin: 0;
	width: 256px; height: 256px;
	background-color: black;
	background-image: url('../images/srv/slider01.webp');
	background-repeat: no-repeat;
	background-position: -512px 0;
	-webkit-transition: background-position .8s ease;
					transition: background-position .8s ease;
	cursor: pointer;
	z-index: 100;
}

#navbar-slider::before {
	display: block;
	position: absolute;
	content: '';
	left: 0; top: 0;
	width: 256px; height: 256px;
	background-color: transparent;
	background-image: url('../images/srv/slider01.webp');
	background-repeat: no-repeat;
	background-position: 0 0;
	opacity: 1;
	-webkit-transition: opacity .9s ease;
					transition: opacity .9s ease;
	z-index: 101;
}

#navbar-slider::after {
	display: block;
	position: absolute;
	content: '';
	left: 0; top: 0;
	width: 256px; height: 256px;
	background-color: transparent;
	background-image: url('../images/srv/slider01.webp');
	background-repeat: no-repeat;
	background-position: -256px 0;
	opacity: 0;
	-webkit-transition: opacity .2s ease;
					transition: opacity .2s ease;
	z-index: 102;
}

#navbar-slider.open::before { opacity: 0; }
#navbar-slider.broken::after { opacity: 1; }


#navbar > footer {
	display: block;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	/*position: relative;*/
	/*background-color: black;*/
	margin: 0;
	flex: 1;
}

#navlist {
	margin: 1rem 1rem;
	padding: 0;
}

#navlist > a {
	display: block;
	position: relative;
	height: 38px;
	margin: 0;
	padding: 0 1rem 0 1rem;
	font: var(--fnt-button);
	line-height: 38px;
	letter-spacing: 1px;
	text-decoration: none;
	color: var(--f-anav);
	background-color: var(--army-lt);
	-webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	-webkit-transition: background-color .2s ease;
	transition: background-color .2s ease;
}

#navlist > a + a {
	margin-top: 6px;
}

#navlist > a.active {
	/*color: var(--yellow) !important;*/
	color: var(--yellow-alpha) !important;
	background-color: var(--army) !important;
	cursor: default;
	pointer-events: none;
	-webkit-text-shadow: none;
	text-shadow: none;
}


#navlist > a:hover, #navlist > a:focus {
	color: var(--f-anav);
	background-color: var(--army);
}

#navlist > a span {
	float: right;
	color: rgba(255, 255, 255, 0.6);
}

#navlist > a.active span {
	float: right;
	color: rgba(255, 255, 255, 0.8);
}


#navlist > a::before {
	position: absolute;
	content: '';
	top: 2px; left:3px;
	width: 4px; height: 34px;
	background-color: #8d8b7c;
	-webkit-transition: 0.3s ease all;
	transition: 0.3s ease all;
}

#navlist > a:hover::before, 
#navlist > a:focus::before{
		background-color: #67634f !important;
}

#navlist > a:active::before{
		background-color: #efc04f !important;
}


#navlist > a.active::before {
		background-color: #efc04f !important;
}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ NAV-BUTTON, NAV-ICON ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

.menu-button {
	display: block;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.menu-icon {
	display: block;
	position: relative;
	width: 28px;
	height: 24px;
	margin: 0;
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
}

	.menu-icon s {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
		height: 3px;
		width: 100%;
		background-color: var(--ico-gray);
		/*border-radius: 2px;*/
		opacity: 1;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: all .15s ease-in-out;
		transition: all .15s ease-in-out;
	}

.menu-button:hover .menu-icon s {
	background-color: var(--ico-gray-h);
}

.menu-icon s:nth-child(1) {
	top: 0;
}

.menu-icon s:nth-child(2), .menu-icon s:nth-child(3) {
	top: 8px;
}

.menu-icon s:nth-child(4) {
	top: 16px;
}

.menu-button.open .menu-icon s {
	height: 4px;
}

	.menu-button.open .menu-icon s:nth-child(1) {
		top: 8px;
		width: 0%;
		left: 50%;
	}

	.menu-button.open .menu-icon s:nth-child(2) {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.menu-button.open .menu-icon s:nth-child(3) {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.menu-button.open .menu-icon s:nth-child(4) {
		top: 8px;
		width: 0%;
		left: 50%;
	}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ NAV MENU ELEMENTS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
#navmenu {
	display: none;
	/*display: block;*/
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	height: var(--navmenu-height);
	background-color: var(--navmenu-back);
	overflow: visible;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4) !important;
	z-index: 300;
}

#nav-button {
	position: absolute;
	top: 0;
	right: 0;
	width: 42px;
	height: var(--navmenu-height);
}

#nav-icon {
	left: 0px;
	top: 9px;
}

#navbar-sandbox {
	display: none;
	position: fixed;
	width: 100%;
	height: calc(100% - var(--navmenu-height));
	top: var(--navmenu-height);
	left: 0;
	background: rgba(0,0,0,0.7);
	-webkit-backdrop-filter: blur(3px) grayscale(90%);
	backdrop-filter: blur(3px) grayscale(90%);
	-webkit-animation: fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both;
	animation: fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both;
	z-index: 98;
}

/* ▬▬▬▬▬▬▬▬▬▬ NOTES MENU ELEMENTS ▬▬▬▬▬▬▬▬▬▬ */


.nav-notes {
	display: block;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	margin: 1rem 1rem 0 1rem;
	font: var(--fnt-header);
	height: var(--header-height);
	line-height: var(--header-height);
	background-color: black;
	color: var(--yellow-alpha);
	padding: 0 1rem 0 1rem;
	background-position: center;
	background-repeat: no-repeat;
	overflow: visible;
	text-align: left;
	z-index: 300;
	-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5) !important;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.5) !important;
}

.nav-notes + article {
	margin-top: 0;
}


.notes-menu {
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	min-height: var(--header-height);
	width: 30rem;
	float: right;
	z-index: 260;
	text-align: left;
}

.note-menu-button {
	display: block;
	float: right;
	min-height: var(--header-height);
	width: 42px;
}

	.note-menu-button .menu-icon {
		left: 0px;
		top: 8px;
	}

.notes-content {
	display: none;
	-webkit-animation: fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both;
	animation: fade-in 0.5s cubic-bezier(.39,.575,.565,1.000) both;
}

.notes-content-body {
	padding: 0.6rem 0 0.4rem 0;
	font: var(--sans-serif);
	background-color: var(--b-dark-dark);
}

	.notes-content-body a {
		display: block;
		background-color: rgba(255, 255, 255, 0.1);
		color: rgba(255, 255, 255, 0.6);
		margin: 0 0.6rem 0.2rem 0.6rem;
		padding: 0.4rem 0.4rem 0.4rem 0.4rem;
	}

		.notes-content-body a:hover, .notes-content-body a:focus {
			color: rgba(255, 255, 255, 0.6);
			background-color: rgba(255, 255, 255, 0.2);
		}

		.notes-content-body a > span {
			float: right;
		}

.cur-cmd-note {
	color: rgba(255, 255, 255, 0.8) !important;
	background-color: var(--red-back) !important;
	pointer-events: none;
}

.notes-menu h4 {
	display: inline-block;
	color: rgba(255, 255, 255, 0.6);

	height: var(--header-height);
	line-height: var(--header-height);
	padding-left: 0.8rem;
	opacity: 0;
	text-align: left;
}

.notes-menu.open {
	background-color: var(--dark-steel);
	-webkit-box-shadow: 0 3px 7px rgba(0,0,0,0.6);
	box-shadow: 0 3px 7px rgba(0,0,0,0.6);
}

	.notes-menu.open h4 {
		opacity: 1;
	}

	.notes-menu.open .notes-content {
		display: block;
	}

.notes-menu.closed .notes-content {
	-webkit-animation: fade-out 0.5s ease-out both;
	animation: fade-out 0.5s ease-out both;
}

#notes-menu-help {
	display:block;
	position:absolute;
	right:54px; top: 6px;
  
	width:28px; height:22px;
	background-color: rgba(255, 255, 255, 0.40);
	-webkit-mask-image: var(--i-arr-right);
	mask-image: var(--i-arr-right);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-animation: bounce-slow-right 3s infinite 0.3s;
	animation: bounce-slow-right 3s infinite 0.3s;
}


.menu-sandbox {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: transparent;
}

	.menu-sandbox.open {
		display: block;
	}

/* ▬▬▬▬▬▬▬▬▬▬ LOGO ▬▬▬▬▬▬▬▬▬▬ */

#logo-main {
	position: relative;
	top: 0;
	width: 100%;
	height: var(--logo-height);
	background-color: #000;
	overflow: hidden;
}

.logo-ja3 {
	position: relative;
	margin: auto auto;
	width: 420px;
	height: 250px;
	background-color: transparent;
	background-image: url('../images/srv/ja3_logo.webp');
	background-repeat: no-repeat;
	background-position: center;
	-webkit-animation: scale-up-center 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: scale-up-center 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

#logo-cove {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: transparent;
	overflow: hidden;
}

.logo-haemimont {
	display: block;
	padding: 0;
	width: 180px;
	height: 100px;
	background-color: black;
	content: var(--empty);
	background-position: center;
	background-repeat: no-repeat;
	content: var(--haemimont);
	object-position: center;
	object-fit: none;
	opacity: 0.4;
	-webkit-transition: opacity 0.9s ease;
	transition: opacity 0.9s ease;
}

	.logo-haemimont.small {
		width: 101px;
		height: 54px;
		content: var(--haemimont-sm);
	}

	.logo-haemimont:hover {
		opacity: 0.8;
	}

.nordic-logo {
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	width: 246px;
	height: 39px;
	content: var(--nordic);
	object-position: center;
	object-fit: none;
}

.aim-logo {
	display: block;
	content: var(--empty);
	width: 94px;
	height: 34px;
	background-image: var(--aim-logo);
	background-position: center;
	background-repeat: no-repeat;
}

.youtube {
	display: block;
	content: var(--empty);
	background-size: 100% 100%;
	background-image: var(--youtube);
	background-position: 0 0;
	background-repeat: no-repeat;
}

/* ▬▬▬▬▬▬▬▬▬▬ TEXTBOX ▬▬▬▬▬▬▬▬▬▬ */
input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
select,
textarea {
	display: block;
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	max-width: 100%;
	height: 1.7rem;
	background: rgba(255, 255, 255, 0.5);
	border: solid 1px rgba(0, 0, 0, 0.3);
	/*box-shadow: 0 0 0 1px #E74C3C;*/

	color: inherit;
	outline: 0;
	padding: 0 1rem;
	text-decoration: none;
}

	input[type='text']:focus,
	input[type='password']:focus,
	input[type='email']:focus,
	input[type='tel']:focus,
	select:focus,
	textarea:focus {
		border: solid 1px var(--gray);
	}

/* ▬▬▬▬▬▬▬▬▬▬ BUTTONS ▬▬▬▬▬▬▬▬▬▬ */
input[type='submit'],
input[type='reset'],
input[type='button'],
button {
	position: relative;
	display: inline-block;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	outline: 0;
	padding: 0 1.5rem;
	text-align: center;
	font: var(--fnt-button);
	letter-spacing: 1px;
	text-transform: uppercase;
	height: 1.7rem;
	line-height: 1.7rem;
}

/* ▬▬▬▬▬▬▬▬▬▬ CHECKBOX ▬▬▬▬▬▬▬▬▬▬ */
.che-button {
	display: inline-block;
	width: 58px;
	max-width: 58px;
	height: 27px;
	overflow: hidden;
}

	.che-button .knobs {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	.che-button .knobs {
		z-index: 2;
	}

.che-button .knobs:before,
.che-button .knobs:after,
.che-button .knobs span {
	position: absolute;
	top: 3px;
	width: 24px !important;
	font: var(--fnt-button);
	height: 21px !important;
	line-height: 21px;
	text-align: center;
	-webkit-transition: 0.3s ease all;
	transition: 0.3s ease all;
}

/* ------------ RU ---------------- */
.che-button .knobs:before {
	content: '';
	left: 3px;
	background-color: rgba(0,0,0,0.4);
}

/* ---------- EN inactive ----------*/
.che-button .knobs:after {
	content: attr(data-alt);
	right: 3px;
	color: rgba(253,253,253,0.65);
}
/* ---------- EN acive ----------- */
.che-button > .checkbox:checked + .knobs:after {
	color: #fff;
}

/* ---------- RU activ ---------- */
.che-button .knobs span {
	display: inline-block;
	left: 3px;
	color: var(--orange-lt);
	z-index: 1;
}

/* ------- RU inactiv ----------- */
.checkbox:checked + .knobs span {
	color: rgba(255,255,255,0.65);
}

.checkbox {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 3;
}

.checkbox:checked + .knobs:before {
	left: 31px;
	background-color: #f44336;
}

/* ▬▬▬▬▬▬▬▬▬▬ BTN-ROLL ▬▬▬▬▬▬▬▬▬▬ */
.btn-roll {
	position: relative;
	display: block;
	width: 160px;
	height: var(--footer-sm-height);
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	background-color: var(--gray-gary);
	overflow: hidden !important;
}

.btn-roll::before,
.btn-roll::after {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	content: '\2605\00A0\GRANDCHIEN.RU\00A0\2605';
	padding: 0;
  background-color: var(--gray-gary);
	
	color: var(--silver);
	-webkit-text-shadow: 0 0px 1px rgba(0,0,0,0.7);
	text-shadow: 0 0px 1px rgba(0,0,0,0.7);
	font: var(--fnt-decor);
	letter-spacing: 1px;
	line-height: var(--footer-sm-height);
	text-decoration: none;
	text-align: center;
	-webkit-transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
	transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-roll::after {
		top: 100%;
		content: '\2605\00A0GRANDCHIEN.RU\00A0\2605';
		background-color: var(--gray-dark);
	}

.btn-roll:hover::after,
.btn-roll:hover::before {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%);
}

/*----------- navbar-roll -------------*/
#navbar-roll {
	top: calc(var(--logo-height) - 28px);
	width: 100%;
	height: 28px;
  background-color: var(--navmenu-back);
}

#navbar-roll::before,
#navbar-roll::after {
	/*content: '\2605\00A0\GOOD MORNING, GRAND CHIEN\00A0\2605';*/
	content: '\2605\00A0\WELCOME TO GRANDCHIEN.RU\00A0\2605';
	letter-spacing: normal;
	line-height: 26px !important;
	height: 28px !important;
}

#navbar-roll::after {
	content: '\2605\00A0\GOOD MORNING, GRAND CHIEN\00A0\2605';
}

/*----------- navmenu-roll -------------*/

#navmenu-roll {
	height: var(--navmenu-height);
	width: 160px;
	background-color: var(--navmenu-back);
}

	#navmenu-roll::before,
	#navmenu-roll::after {
		background-color: var(--navmenu-back);
		content: '\2605\00A0GRANDCHIEN.RU\00A0\2605';
		letter-spacing: normal;
		line-height: var(--navmenu-height);
		height: var(--navmenu-height);
	}

/*----------- btn-roll.download -------------*/

.btn-roll.download {
	width: 100px;
	height: var(--footer-sm-height);
	float: right;
	background-color: var(--red-back-pale);
	cursor: pointer;
}

	.btn-roll.download::before,
	.btn-roll.download::after {
		content: '\2022\00A0\0044OWNLOAD\00A0\2022';
		background-color: var(--red-back-pale);
		color: rgba(255,255,255,0.8);
		font: var(--fnt-button);
		-webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.2);
		text-shadow: 0 1px 1px rgba(0,0,0,0.2);
		line-height: var(--footer-sm-height);
		letter-spacing: 1px;
	}

	.btn-roll.download::after {
		content: '\2022\00A0ЗАГРУЗИТЬ\00A0\2022';
		color: rgba(255,255,255,0.9);
		background-color: var(--red-back);
	}

/* ▬▬▬▬▬▬▬▬▬▬ LINK NEXT PREV ▬▬▬▬▬▬▬▬▬▬ */
.link-footer {
	display: block;
	position: relative;
	background-color: black;
	padding: 0 1rem;
}

.link-footer > table {
	color: var(--yellow-alpha);
	font: var(--fnt-header);
	height: 30px;
	line-height: 25px;
	margin: 0 0.5rem 0 0.5rem;
	table-layout: fixed;
	width: calc(100% - 1rem);
}

.link-footer .td-left {
	text-align: left;
	align-content: start;
}

.link-footer .td-center {
	text-align: center;
	align-content: center;
}


.link-footer .td-right {
	text-align: right;
	align-content: end;
}

.nonmargin .link-footer::after {
	display: block;
	position: absolute;
	left: 0; bottom: -6px;
	width: 100%; height: 6px;
	content: '';
	padding: 0;
  background-color: var(--gray-gary);
}

.a-prev, .a-next, .a-center {
	display: inline-block;
	position: relative;
	-webkit-transition: color 0.25s ease-out;
	transition: color 0.25s ease-out;
}

/*.a-prev, .a-prev:hover, .a-prev:active { margin-left: 1rem; }
.a-next, .a-next:hover, .a-next:active { margin-right: 1rem; }*/

.a-prev::after {
	display: block;
	position: absolute;
	left: -16px;
	top: 8px;
	width: 10px;
	height: 14px;
	content: '';
	background-color: var(--yellow-alpha);
	-webkit-mask-image: var(--i-prev);
	mask-image: var(--i-prev);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
}

.a-next::after {
	display: block;
	position: absolute;
	right: -16px;
	top: 8px;
	width: 10px;
	height: 14px;
	content: '';
	background-color: var(--yellow-alpha);
	-webkit-mask-image: var(--i-next);
	mask-image: var(--i-next);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-transition: background-color 0.25s ease-out;
	transition: background-color 0.25s ease-out;
}

.a-prev:hover::after, .a-next:hover::after {
	background-color: white;
}

.a-prev:hover, .a-next:hover, .a-center:hover {
	color: white;
}

/* ▬▬▬▬▬▬▬▬▬▬ PICTURES ▬▬▬▬▬▬▬▬▬▬ */

.pic-ani {
	position: relative;
	display: -webkit-flex;
	display: flex;
	flex-flow: column;
	padding: 5px;
	cursor: default;
	background-color: var(--white-back);
	-webkit-box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
}

.pic-ani > img {
	object-fit: none;
	content: var(--empty);
	display: block;
	width: 220px;
	height: 220px;
	background-image: url(../images/srv/smiles.webp);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: var(--white-back);
	opacity: 1;
}

.pic-ani::before {
	display: block;
	position: absolute;
	content: '';
	top: 5px;
	left: 5px;
	width: 220px;
	height: 220px;
	background-image: url(../images/srv/smiles.webp);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: transparent;
	opacity: 1;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

.pic-ani::after {
	display: block;
	position: absolute;
	content: '';
	top: 5px;
	left: 5px;
	width: 220px;
	height: 220px;
	background-image: url(../images/srv/smiles.webp);
	background-position: 0 0;
	background-repeat: no-repeat;
	background-color: transparent;
	opacity: 1;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}


.pic-ani:hover::after {
	opacity: 0;
}

.pic-ani:hover:active::before {
	opacity: 0;
}

.buns-smile.pic-ani:hover:active::before {
	opacity: 0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
}


.pic-ani > figcaption {
	display: block;
	position: relative;
	background-color: var(--gray-dark);
	color: var(--white-alpha);
	/*font: var(--sans-serif);*/
	font: var(--sans-serif-sm);
	line-height: 1.5;
	padding: 0 3px;
	text-align: center;
	cursor: default;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

	.pic-ani > figcaption[data-hover]::after {
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		content: attr(data-hover);
		bottom: 0;
		left: 0;
		background-color: var(--gray-dark);
		opacity: 0;
		-webkit-transition: opacity 0.9s ease;
		transition: opacity 0.9s ease;
	}

.pic-ani:hover > figcaption::after {
	opacity: 1;
}

#wrapper[lang='en'] .pic-ani > figcaption[data-hover]::after {
	content: attr(data-hover-en);
}

.pic-ani.ivan-smile::after { background-position: 0 0; }

.pic-ani.ivan-smile::before { background-position: -220px 0; }

.pic-ani.ivan-smile > img { background-position: -440px 0; }

.pic-ani.buns-smile::after { background-position: 0 -220px; }

.pic-ani.buns-smile::before { background-position: -220px -220px; }

.pic-ani.buns-smile > img { background-position: -440px -220px; }

.pic-ani.fidel-smile::after { background-position: 0 -440px; }

.pic-ani.fidel-smile::before { background-position: -220px -440px; }

.pic-ani.fidel-smile > img { background-position: -440px -440px; }

.pic-ani.fidel-sepia::after {
	width: 278px;
	height: 350px;
	background: url('../images/notes/fidel_sepia.webp') 0 0 no-repeat;
}

.pic-ani.fidel-sepia::before {
	width: 278px;
	height: 350px;
	background: url('../images/notes/fidel_sepia.webp') -278px 0 no-repeat;
}

.pic-ani.fidel-sepia > img {
	width: 278px;
	height: 350px;
	background: url('../images/notes/fidel_sepia.webp') -278px 0 no-repeat;
}

.pic-ani.vicki-smile::after { background: url('../images/srv/vicki_smile.webp') 0 0 no-repeat; }

.pic-ani.vicki-smile::before { background: url('../images/srv/vicki_smile.webp') -220px 0 no-repeat; }

.pic-ani.vicki-smile > img { background: url('../images/srv/vicki_smile.webp') -440px 0 no-repeat; }


.img-left {
	float: left;
	margin: 0 0.7em 0 0;
}

.img-right {
	float: right;
	margin: 0 0 0 0.7em;
}

.pic-left, .pic-right {
	display: -webkit-flex;
	display: flex;
	flex-flow: column;
	margin: 0 0.7em 0.3em 0;
	padding: 5px;
	float: left;
	background-color: var(--white-back);
	-webkit-box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	gap: 0;
}

	.pic-left > a, .pic-right > a {
		display: inline;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		background-color: transparent;
		line-height: 0;
	}

.pic-right {
	margin: 0 0 0.3em 0.7em;
	float: right;
}

	.pic-left img,
	.pic-right img {
		display: block;
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		background-color: transparent;
	}

	.pic-left > figcaption,
	.pic-right > figcaption {
		display: block;
		background-color: var(--gray-dark);
		color: var(--white-alpha);
		font: var(--sans-serif);
		height: var(--footer-sm-height);
		line-height: var(--footer-sm-height);
		text-align: center;
		cursor: default;
		margin: 0 !important;
		padding: 0 2px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

.img-full {
  width: 100%;  /*width of parent container*/
  object-fit: contain;
  margin-bottom:0.5rem;
}

/*--------------- star back -------------------*/
.back-star, .back-star-w {
	position: relative;
}

.back-star::after, .back-star-w::after {
	display: block;
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 21px;
	height: 16px;
	background-image: var(--star-y);
	background-position: 0 0;
	background-repeat: repeat-x;
	background-color: transparent;
}

.back-star-w::after {
	background-image: var(--star-w);
	opacity: 0.5;
}

.back-star.star2::after, .back-star-w.star2::after { width: 42px; }

.back-star.star3::after, .back-star-w.star3::after { width: 63px; }

.back-star.star4::after, .back-star-w.star4::after { width: 84px; }

.back-star.star5::after, .back-star-w.star5::after { width: 105px; }





/* ▬▬▬▬▬▬▬▬▬▬ ICONS EMOJI ▬▬▬▬▬▬▬▬▬▬ */

.i-smile,
.i-laugh,
.i-warn,
.i-love,
.i-oops,
.i-quest {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 14px;
	-webkit-animation: bounce-top 0.9s both;
	animation: bounce-top 0.9s both;
}

.i-warn, .i-quest {
	-webkit-animation: blinking 0.6s 2 both;
	animation: blinking 0.6s 2 both;
}

.i-oops, .ico-cry {
	-webkit-animation: fa-shake .8s cubic-bezier(.455,.03,.515,.955) both;
	animation: fa-shake .8s cubic-bezier(.455,.03,.515,.955) both;
}

.i-love {
	-webkit-animation: bounce-in-fwd 1s both;
	animation: bounce-in-fwd 1s both;
	animation-delay: 0.1s;
}

.i-smile::after,
.i-laugh::after,
.i-warn::after,
.i-love::after,
.i-oops::after,
.i-quest::after {
	display: block;
	position: absolute;
	width: 20px;
	height: 20px;
	content: '';
	bottom: -4px;
	left: 1px;
	background-image: var(--i-smile);
	background-position: 0 0;
	background-repeat: no-repeat;
}

.i-love::after { background-image: var(--i-heart); }

.i-warn::after { background-image: var(--i-warn); bottom: -2px; }

.i-cry::after { background-image: var(--i-cry); }

.i-quest::after { background-image: var(--i-quest); }

.i-laugh::after { background-image: var(--i-laugh); }

.i-oops::after { background-image: var(--i-oops); }

/* ▬▬▬▬▬▬▬▬▬▬ IMG ICONS ▬▬▬▬▬▬▬▬▬▬ */
.img-icon,
.bot-icon {
	display: inline-block;
	position: relative;
	height: 20px;
	width: 20px;
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
}

.img-icon::after,
.bot-icon::after {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	content: '';
	bottom: 0;
	left: 0;
	background-image: none;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	visibility: hidden;
}

.img-icon.finger::after {
	width: 48px;
	height: 48px;
	visibility: visible;
	opacity: 0.8;
	background-image: var(--finger);
}

.img-icon.loading {
	background-image: var(--i-load);
}


/* ▬▬▬▬▬▬▬▬▬▬ BTN-ICON ▬▬▬▬▬▬▬▬▬▬ */
.btn-icon {
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.btn-icon::after {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	content: '';
	background-color: white;
	-webkit-mask-image: var(--i-note);
	mask-image: var(--i-note);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	opacity: 0.7;
	-webkit-transition: opacity 0.2s ease;
	transition: opacity 0.2s ease;
}

.btn-icon:hover::after {
	opacity: 0.9;
}

.btn-icon:hover:active::after {
	-webkit-transition: none;
	transition: none;
	opacity: 1;
	top: 2px;
}

/*-------------- ico-close -----------------*/
.ico-close {
	width: 24px;
	height: 24px;
}

.ico-close::after {
	-webkit-mask-image: var(--cross);
	mask-image: var(--cross);
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.ico-close:hover::after {
	-webkit-transform: rotate(540deg);
	transform: rotate(540deg);
}

/*-------------- ico-scale -----------------*/
.ico-scale {
	width: 24px;
	height: 24px;
}

.ico-scale::after {
	-webkit-mask-image: var(--scale);
	mask-image: var(--scale);
}


/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ GALLERY ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.gallery {
	--gap: 8px;
	display: -webkit-flex;
	display: flex;
	width: 100%;
	margin: 5px 0 5px 0;
	/*-webkit-justify-content: space-between;
				justify-content: space-between;*/
	-webkit-justify-content: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--gap);
}

.gallery figure {
	display: block;
	width: calc(20% - var(--gap));
	height: 184px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 4px solid #faf9f7;
	-webkit-box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	overflow: hidden;
}

.gallery figure a {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border: none;
	background-color: white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	background-color: var(--b-dark);
}

.gallery figure a img, 
.gallery figure a span {
	display: block;
	width: 100%;
	object-position: 50% 50%;
	background-color: var(--b-dark);
}

.gallery figure a:hover, .gallery figure a:focus {
	transform: scale(1.1);
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ COLUMNS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.col-box {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.col-box .column {
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
	flex: 1;
	text-align: left;
	/*min-width: 370px;*/
	overflow: hidden;
}

.col-box li {
	margin: 0px;
	list-style-type: square;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ BLOCKQUOTE ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
blockquote.elegant {
	position: relative;
	font: var(--fnt-text-mid);
	font-style: italic;
	margin: 0.5em auto;
	padding: 1em 1em 0.5em 2.5em;
	background: rgba(0,0,0,0.04);
	/*border: 1px solid rgba(0,0,0,0.05);*/
	border-left: 8px solid var(--orange-lt);
	text-align: justify;
}

blockquote.elegant::before {
	position: absolute;
	left: 10px;
	top: -10px;
	font-family: 'Arial', sans-serif;
	content: '\201C';
	color: var(--orange-lt);
	font-size: 4em;
	font-style: normal;
}

blockquote.elegant div {
	display: block;
	color: var(--gray-lt);
	font: var(--fnt-text);
	font-weight: 600;
	font-size: 16px;
	font-style: normal;
	margin-top: 0.5em;
}

blockquote.elegant div span {
	margin-right: 0.3em;
}

blockquote.elegant.copyright {
	border-left: 8px solid var(--red-back);
	font-style: normal;
}

blockquote.elegant.copyright::before {
	content: '\00a9';
	left: 10px;
	top: 0px;
	font-weight: bold;
	font-size: 1.6em;
	color: var(--red-back);
}

blockquote.elegant.star::before {
	content: '\272A';
	left: 9px;
	top: 0px;
	font-size: 1.8em;
}

blockquote.elegant.solder {
	padding-left:92px;
}
blockquote.elegant.solder::before {
	content: '';
	background-image: var(--solder);
	width:80px; height:108px;
	background-position: center;
	background-repeat: no-repeat;
	opacity:1;
	left: 6px; top: 10px;
	
}
h5 {
	display:block;
	position:relative;
	font: var(--fnt-text);
	font-style: italic;
	/*color: var(--f-text);*/
	color: var(--army);
	height:38px;
	line-height:38px;
	border-bottom: 3px solid rgba(0,0,0,0.2);
	margin: 0 0 1rem 0;
}

h5.globe,
h5.target{
	margin: -.5rem 0 1rem 44px;
	/*padding-left:48px;*/
}

h5.globe::before,
h5.target::before {
	display:block;
	position: absolute;
	left: -44px; top: 0;
	content: '';
	background-image: var(--target);
	width:36px; height:36px;
}

h5.globe::before { background-image: var(--globe); }

cite {
	display: block;
	position: relative;
	font: var(--fnt-text-mid);
  color: #252525;
	font-style: italic;
  border: 3px solid var(--army-sha);
  padding:0.5em;
  margin-bottom: calc(0.5rem + 23px);
}

cite::after {
	position: absolute;
	left: -3px; bottom: -23px;
	content: '';
	background-color: var(--army-sha);
	color: var(--white-alpha);
	font: var(--sans-serif-sm);
	height:23px;	width:calc(100% + 6px);
	line-height:23px;
}

cite.charter::after {
	content: '\00a0\00a0\2605\00a0Устав A.I.M.\00a0\2605';
}

#wrapper[lang='en'] cite.charter::after {
	content: '\00a0\00a0\2605\00a0\0041.I.M. Charter\00a0\2605';
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ LAYERS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.modal-layer {
	position: absolute;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #424B54;
	background-image: url('../images/srv/bg02.webp');
	background-attachment: fixed;
	background-size: cover;
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
	-webkit-transition: scale, opacity 0.5s ease;
	transition: scale, opacity 0.5s ease;
	overflow: hidden;
	z-index: -1;
}

.modal-layer.open {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
	z-index: 1000;
	color: red;
}

.layer-close {
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 66px;
	height: 52px;
	z-index: 1000;
}

.layer-close::after {
	top: 4px;
	left: -2px;
}

.modal-layer section {
	display: block;
	width: 100%;
	max-width: 1024px;
	opacity: 1;
	/*background-color: rgba(0, 0, 0, 0.4);*/
	background-color: transparent;
	padding: 0;
	-webkit-backdrop-filter:  blur(14px) brightness(60%) contrast(1.1);
	backdrop-filter: blur(14px) brightness(60%) contrast(1.1);
	-webkit-box-sizing: border-box; 
	box-sizing: border-box;
	border:2px solid rgba(255, 255, 255, 0.3);
}

.modal-layer .layer-body {
	margin: 0 1rem 1rem 1rem;
	padding: 1rem;
	background-color: rgba(255, 255, 255, 0.04);
	border:1px solid rgba(255, 255, 255, 0.1);
	/*color:#64645e !important;*/
	color: var(--silver-alpha);
	font: var(--sans-serif);
	font-size: 1rem !important;
	min-height: 360px;
}

.chien-ru {
	font: var(--fnt-decor);
	font-size: 2em;
	line-height: 2em;
	position: relative;
	color: rgba(255, 255, 255, 0.6);
	cursor: default;
	letter-spacing: 1px;
	/*margin-left:2rem;*/
	padding: 0 2rem;
	/*-webkit-box-reflect: below -35px linear-gradient(transparent, rgba(0,0,0,.2));*/
}

.chien-ru.active {
}

.chien-ru > i:nth-child(2) {
 margin-left: 4px;
	color: rgba(255, 204, 128, 0.8)
}

/* ▬▬▬▬▬▬▬▬▬▬ black-button ▬▬▬▬▬▬▬▬▬▬ */
	
.black-button { 
	height: 2.2rem;
	line-height: 2.2rem;
	color: rgba(255, 255, 255, 0.5) !important;
	
	background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 0;

	border: 2px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 2em;	
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.black-button:disabled { 
		background-color: black !important;
		cursor: default;
		opacity:0.8;
}

.black-button:hover:not(:disabled){
		color: rgba(255, 255, 255, 0.7) !important;
		border-color: rgba(255, 255, 255, 0.7) !important;
	  background-size: 100% 100%;
		/*background-color: black !important;*/
}

.black-button:hover:active:not(:disabled){
		background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));
		color: rgba(255, 255, 255, 0.9) !important;
		border-color: rgba(255, 255, 255, 0.9) !important;
		/*background-color: black !important;*/
}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ABOUT ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.aboutus {
	font: var(--fnt-text);
	line-height: 1.1;
	text-align: justify;
	cursor:default;
}

.aboutus p {
	margin: 0 0 0.3em 0;
}

.aboutus ul {
	gap: 1px;
	margin: -0.1em 0 0.3em 0;
	list-style-type: circle;
	padding: 0 0 0 1em;
}

.aboutus hr {
  border:0;
  border-top: 3px solid rgba(0,0,0,0.2);
  margin-top: 8px;
  margin-bottom: 8px;
}

.aboutus li {
		margin-bottom: 2px;
}

#about-layer p { line-height:1.2em }
#about-layer hr {  border-top: 3px solid rgba(255,255,255,0.2);}

#about-layer strong u,
#about-layer .rline { 
	color:var(--yellow-alpha);
}
#about-layer strong u:hover,
#about-layer .rline:hover { 
	color: white;
}

#about-layer strong u::before,
#about-layer .rline::before { 
		background-color: var(--orange-lt);
}
#about-layer figure { margin-right:1rem;}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ DOWNLOAD ▬▬▬▬▬▬▬▬▬▬▬▬▬ */

#download-layer {
	background-image: url('../images/srv/palmtree.webp');
	cursor: default;
}

#download-layer .pic-left, #download-layer .pic-right {
	background-color: #cacaca;
}

#download-layer section {
	max-width: 800px;
}

*#file-request, #countdown-end span {
	color: var(--yellow-alpha);
}

#file-request {
	display: inline-block;
	text-align: center;
}

#countdown-info { line-height:28px; }

#countdown-end { display: none; }

#loadform button { width: 90px; margin:0 0.5rem;}

#loadform { 
	display: -webkit-flex;
	display: flex;
	flex-flow: column;
	position: relative;
	width: auto;
	margin-top: 1rem;
	padding:1rem;
  /*border: 3px solid rgba(255,255,255,0.2);*/
	gap: 0.5rem;
	/*width:360px;*/
}

#loadform fieldset {
		text-align: center;
		align-content: center;
}

#loadform fieldset:last-of-type {
		margin-top: 1rem;
}


#countdown {
	display: inline-block;
	font: var(--sans-serif-norm);
	/*padding: 3px 8px 3px 8px;*/
	width:26px; height: 26px;
	line-height: 26px;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 50%;
	background-color: rgba(231, 76, 60) !important;
}


/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ SPECIAL ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

.empty {
	content: var(--empty);
}

.reset, .reset * {
	-webkit-animation: none !important;
	animation: none !important;
	-webkit-transition: none !important;
	transition: none !important;
	/*animation-delay: 0;*/
}

/* -------- prevent animation when section loading ------- */
article.a-loading *, article.a-loading *:before, article.a-loading *:after {
	-webkit-animation: none !important;
	animation: none !important;
}


.small-caps {
	font-variant: small-caps;
}

.small-font {
	font: var(--fnt-text-sm);
}


.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.disabled {
	pointer-events: none;
}
.nonopacity {
	opacity:0;
}

.hyphenate {
	text-align: justify;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	-webkit-hyphenate-limit-after: 1;
	-webkit-hyphenate-limit-before: 2;
}

.donthyphenate {
	-webkit-hyphens: none;
	hyphens: none;
}

.f-left {
	float: left;
	margin: 0 0.7rem 0 0;
}

.f-right {
	float: right;
	margin: 0 0 0 0.7rem;
}

.red {
	color: var(--red);
}
.blue {
	color: var(--blue);
}

.back-blue {
	background-color: var(--blue);
	color: white;
	padding: 0 4px 2px 3px;
}

.notready-dst {
	display: block;
	width: 100%;
}

.draft {
	color: rgba(0,0,0,0.3);
}

.draft-title {
	font: var(--fnt-decor);
	font-size: 18pt;
	color: rgba(0,0,0,0.2);
	text-align: center;
	clear: both;
}

.draft-text {
	font: var(--fnt-text-sm);
	color: rgba(0,0,0,0.40);
	text-align: center;
	/*margin: 0 2em;*/
}

.draft-block {
	display: block;
	position: relative;
	font: var(--fnt-text-sm);
	color: rgba(0,0,0,0.50);
	text-align: justify;
	margin-top: 1.5rem;
}

.draft-block::before {
	display: block;
	position: absolute;
	content: '';
	background-color: rgba(0,0,0,0.1);
	height: 2px;
	top: -0.5rem;
	left: 0;
	width: 100%;
}

.rounded-pill {
	display: inline-block;
	padding: .3em .5em .2em .5em;
	font: var(--sans-serif);
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	/*border-radius: .25rem;*/
	border-radius: 50rem !important;
	border-radius: 50%;
	background-color: rgba(231, 76, 60) !important;
}

hr {
  border: 0;
  border-top: 3px solid rgba(0,0,0,0.2);
  margin-top: 0;
  margin-bottom:14px;
}

/*a[href^="mailto:"] {
  color: var(--blue);
}*/

/*.b-blue {
	background-color: var(--b-blue);
}

.b-blue:hover:not(:disabled) {
	background-color: var(--b-blue-h);
}
.b-blue:hover:active:not(:disabled) {
	background-color: var(--b-blue);
}

.b-orange {
	background-color: #db9240;
}

.b-orange:hover:not(:disabled) {
	background-color: #eea046;
}
.b-orange:hover:active:not(:disabled) {
	background-color: #db9240;
}*/

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ALL ANIMATION ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
/* -------------- SCALE (Zoom In) -------------*/
.scale-up-center {
	-webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-center { 0% { -webkit-transform: scale(.5); transform: scale(.5) } 100% { -webkit-transform: scale(1); transform: scale(1) } }

@keyframes scale-up-center { 0% { -webkit-transform: scale(.5); transform: scale(.5) } 100% { -webkit-transform: scale(1); transform: scale(1) } }

.scale-up-center-opacity {
	opacity:0;
	-webkit-animation: scale-center-opacity 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: scale-center-opacity 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}


@-webkit-keyframes scale-center-opacity { 0% { -webkit-transform: scale(.5); transform: scale(.5); opacity: 0 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } }

@keyframes scale-center-opacity { 0% { -webkit-transform: scale(.5); transform: scale(.5); opacity: 0 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } }

/*-------------------- BLINK ------------------------*/
.blinking { 
 -webkit-animation: blinking 0.6s 1 both;
	animation: blinking 0.6s 1 both;
}

@-webkit-keyframes blinking { 0%,50%,100% { opacity: 1 } 25%,75% { opacity: 0 } }

@keyframes blinking { 0%,50%,100% { opacity: 1 } 25%,75% { opacity: 0 } }

/*------------------------ SLIDE IN --------------------------*/

.slide-in-top {
	-webkit-animation: slide-in-top .6s cubic-bezier(.25,.46,.45,.94) both;
	animation: slide-in-top .6s cubic-bezier(.25,.46,.45,.94) both;
}

@-webkit-keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

@keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

.slide-in-bottom {
	-webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-bottom { 0% { -webkit-transform: translateY(2000px); transform: translateY(2000px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

@keyframes slide-in-bottom { 0% { -webkit-transform: translateY(2000px); transform: translateY(2000px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

.slide-in-right {
	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

@keyframes slide-in-right { 0% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-left { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

@keyframes slide-in-left { 0% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0 } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } }

.slide-in-elliptic-top-fwd {
	-webkit-animation: slide-in-elliptic-top-fwd .7s cubic-bezier(.25,.46,.45,.94) both;
	animation: slide-in-elliptic-top-fwd .7s cubic-bezier(.25,.46,.45,.94) both;
}

@-webkit-keyframes slide-in-elliptic-top-fwd { 
	0% { -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0); transform: translateY(-600px) rotateX(-30deg) scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0 } 
	100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 1400px; transform-origin: 50% 1400px; opacity: 1 } 
}

@keyframes slide-in-elliptic-top-fwd {
	0% { -webkit-transform: translateY(-600px) rotateX(-30deg) scale(0); transform: translateY(-600px) rotateX(-30deg) scale(0); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; opacity: 0 }
	100% { -webkit-transform: translateY(0) rotateX(0) scale(1); transform: translateY(0) rotateX(0) scale(1); -webkit-transform-origin: 50% 1400px; transform-origin: 50% 1400px; opacity: 1 }
}

/*------------------------ SLIDE OUT --------------------------*/
.slide-out-bottom {
	-webkit-animation: slide-out-bottom 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: slide-out-bottom 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } 100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0 } }

@keyframes slide-out-bottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } 100% { -webkit-transform: translateY(1000px); transform: translateY(1000px); opacity: 0 } }

.slide-out-right {
	-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } 100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 } }

@keyframes slide-out-right { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } 100% { -webkit-transform: translateX(1000px); transform: translateX(1000px); opacity: 0 } }

.slide-out-left {
	-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@-webkit-keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } 100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0 } }

@keyframes slide-out-left { 0% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1 } 100% { -webkit-transform: translateX(-1000px); transform: translateX(-1000px); opacity: 0 } }

/*------------------------ WOBBLE --------------------------*/
.wobble-hor-bottom {
	-webkit-animation: wobble-hor-bottom .8s both;
	animation: wobble-hor-bottom .8s both;
}

@-webkit-keyframes wobble-hor-bottom {
	0%,100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% }
	15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg) }
	30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg) }
	45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg) }
	60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg) }
	75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg) }
}

@keyframes wobble-hor-bottom {
	0%,100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% }
	15% { -webkit-transform: translateX(-30px) rotate(-6deg); transform: translateX(-30px) rotate(-6deg) }
	30% { -webkit-transform: translateX(15px) rotate(6deg); transform: translateX(15px) rotate(6deg) }
	45% { -webkit-transform: translateX(-15px) rotate(-3.6deg); transform: translateX(-15px) rotate(-3.6deg) }
	60% { -webkit-transform: translateX(9px) rotate(2.4deg); transform: translateX(9px) rotate(2.4deg) }
	75% { -webkit-transform: translateX(-6px) rotate(-1.2deg); transform: translateX(-6px) rotate(-1.2deg) }
}

/*---------------------------- FADE ----------------------------*/
.fade-in {
	-webkit-animation: fade-in .3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: fade-in .3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.fade-in-long {
	-webkit-animation: fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;
	animation: fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;
}

@-webkit-keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }

@keyframes fade-in { 0% { opacity: 0 } 100% { opacity: 1 } }

.fade-out {
	-webkit-animation: fade-out 0.3s ease-out both;
	animation: fade-out 0.3s ease-out both;
}

@-webkit-keyframes fade-out { 0% { opacity: 1 } 100% { opacity: 0 } }

@keyframes fade-out { 0% { opacity: 1 } 100% { opacity: 0 } }

.fade-in-fwd {
	-webkit-animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in-fwd 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-fwd { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0 } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } }

@keyframes fade-in-fwd { 0% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0 } 100% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } }

/*------------------------ FADE-OUT-BCK --------------------------*/

.fade-out-bck {
	-webkit-animation: fade-out-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: fade-out-bck 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes fade-out-bck { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } 100% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0 } }

@keyframes fade-out-bck { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1 } 100% { -webkit-transform: translateZ(-80px); transform: translateZ(-80px); opacity: 0 } }

/*------------------------ BOUNCE-TOP --------------------------*/

.bounce-top { 
  -webkit-animation: bounce-top 0.9s both; 
  animation: bounce-top 0.9s both; 
}

@-webkit-keyframes bounce-top {
	0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1 }
	24% { opacity: 1 } 	
	40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	25%,55%,75%,87% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

@keyframes bounce-top {
	0% { -webkit-transform: translateY(-45px); transform: translateY(-45px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1 }
	24% { opacity: 1 }
	40% { -webkit-transform: translateY(-24px); transform: translateY(-24px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	65% { -webkit-transform: translateY(-12px); transform: translateY(-12px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	82% { -webkit-transform: translateY(-6px); transform: translateY(-6px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	93% { -webkit-transform: translateY(-4px); transform: translateY(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	25%,55%,75%,87% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	100% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

/*------------------------ BOUNCE-IN-FWD-BCK --------------------------*/

.bounce-in-fwd {
	-webkit-animation: bounce-in-fwd 1.1s both;
	animation: bounce-in-fwd 1.1s both;
}

@-webkit-keyframes bounce-in-fwd {
	0% { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
	38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
	55% { -webkit-transform: scale(.7); transform: scale(.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	81% { -webkit-transform: scale(.84); transform: scale(.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	95% { -webkit-transform: scale(.95); transform: scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
}

@keyframes bounce-in-fwd {
	0% { -webkit-transform: scale(0); transform: scale(0); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
	38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
	55% { -webkit-transform: scale(.7); transform: scale(.7); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	81% { -webkit-transform: scale(.84); transform: scale(.84); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	95% { -webkit-transform: scale(.95); transform: scale(.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
}

.bounce-in-bck {
	-webkit-animation: bounce-in-bck 1.1s both;
	animation: bounce-in-bck 1.1s both;
}

@-webkit-keyframes bounce-in-bck {
	0% { -webkit-transform: scale(2); transform: scale(2); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
	38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
	55% { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	81% { -webkit-transform: scale(1.24); transform: scale(1.24); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
	95% { -webkit-transform: scale(1.04); transform: scale(1.04); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
	100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
}

@keyframes bounce-in-bck {
	0% { -webkit-transform: scale(2); transform: scale(2); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
 38% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
 55% { -webkit-transform: scale(1.5); transform: scale(1.5); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 72% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 81% { -webkit-transform: scale(1.24); transform: scale(1.24); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 89% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 95% { -webkit-transform: scale(1.04); transform: scale(1.04); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 100% { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
}

/*------------------------ BOUNCE-LEFT-RIGHT -------------------*/
.bounce-left { 
  -webkit-animation: bounce-left 0.8s both; 
  animation: bounce-left 0.8s both;
}

@-webkit-keyframes bounce-left { 
 0% { -webkit-transform: translateX(-48px); transform: translateX(-48px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(-13px); transform: translateX(-13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(-6.5px); transform: translateX(-6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(-4px); transform: translateX(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

@keyframes bounce-left {
	0% { -webkit-transform: translateX(-48px); transform: translateX(-48px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(-13px); transform: translateX(-13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(-6.5px); transform: translateX(-6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(-4px); transform: translateX(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

@-webkit-keyframes bounce-left-far { 
 0% { -webkit-transform: translateX(-348px); transform: translateX(-348px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(-13px); transform: translateX(-13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(-6.5px); transform: translateX(-6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(-4px); transform: translateX(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

@keyframes bounce-left-far {
	0% { -webkit-transform: translateX(-348px); transform: translateX(-348px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(-26px); transform: translateX(-26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(-13px); transform: translateX(-13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(-6.5px); transform: translateX(-6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(-4px); transform: translateX(-4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

.bounce-right {
	-webkit-animation: bounce-right 0.8s both;
	animation: bounce-right 0.8s both;
}

@-webkit-keyframes bounce-right {
	0% { -webkit-transform: translateX(48px); transform: translateX(48px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(26px); transform: translateX(26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(13px); transform: translateX(13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(6.5px); transform: translateX(6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(4px); transform: translateX(4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

@keyframes bounce-right { 
 0% { -webkit-transform: translateX(48px); transform: translateX(48px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 1 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(26px); transform: translateX(26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(13px); transform: translateX(13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(6.5px); transform: translateX(6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(4px); transform: translateX(4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

@-webkit-keyframes bounce-right-far {
	0% { -webkit-transform: translateX(348px); transform: translateX(348px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(26px); transform: translateX(26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(13px); transform: translateX(13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(6.5px); transform: translateX(6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(4px); transform: translateX(4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

@keyframes bounce-right-far { 
 0% { -webkit-transform: translateX(348px); transform: translateX(348px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0 }
 24% { opacity: 1 }
 40% { -webkit-transform: translateX(26px); transform: translateX(26px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 65% { -webkit-transform: translateX(13px); transform: translateX(13px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 82% { -webkit-transform: translateX(6.5px); transform: translateX(6.5px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 93% { -webkit-transform: translateX(4px); transform: translateX(4px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in }
 25%,55%,75%,87%,98% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out }
 100% { -webkit-transform: translateX(0); transform: translateX(0); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; opacity: 1 }
}

/*------------------------ BOUNCE-SLOW --------------------------*/
.bounce-slow-right {
	-webkit-animation: bounce-slow-right 3s infinite 0.3s;
	animation: bounce-slow-right 3s infinite 0.3s;
}

.bounce-slow-left {
	-webkit-animation: bounce-slow-left 3s infinite 0.3s;
	animation: bounce-slow-left 3s infinite 0.3s;
}

@-webkit-keyframes bounce-slow-left {
	0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
 40% { -webkit-transform: translateX(30px); transform: translateX(30px); }
 60% { -webkit-transform: translateX(15px); transform: translateX(15px); }
}

@keyframes bounce-slow-left {
	0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
 40% { -webkit-transform: translateX(30px); transform: translateX(30px); }
 60% { -webkit-transform: translateX(15px); transform: translateX(15px); }
}

@-webkit-keyframes bounce-slow-right {
	0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
 40% { -webkit-transform: translateX(-30px); transform: translateX(-30px); }
 60% { -webkit-transform: translateX(-15px); transform: translateX(-15px); }
}

@keyframes bounce-slow-right {
	0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
 40% { -webkit-transform: translateX(-30px); transform: translateX(-30px); }
 60% { -webkit-transform: translateX(-15px); transform: translateX(-15px); }
}

/*------------------------ JELLO --------------------------*/
.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	animation: jello-horizontal 0.9s both;
}

@-webkit-keyframes jello-horizontal {
	0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) }
 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) }
 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) }
 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) }
 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) }
 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
}

@keyframes jello-horizontal {
	0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
 30% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) }
 40% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) }
 50% { -webkit-transform: scale3d(1.15,.85,1); transform: scale3d(1.15,.85,1) }
 65% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) }
 75% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) }
 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
}

.jello-vertical {
	-webkit-animation: jello-vertical 0.9s both;
	animation: jello-vertical 0.9s both;
}

@-webkit-keyframes jello-vertical {
	0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
 30% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) }
 40% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) }
 50% { -webkit-transform: scale3d(.85,1.15,1); transform: scale3d(.85,1.15,1) }
 65% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) }
 75% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) }
 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
}

@keyframes jello-vertical {
	0% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
 30% { -webkit-transform: scale3d(.75,1.25,1); transform: scale3d(.75,1.25,1) }
 40% { -webkit-transform: scale3d(1.25,.75,1); transform: scale3d(1.25,.75,1) }
 50% { -webkit-transform: scale3d(.85,1.15,1); transform: scale3d(.85,1.15,1) }
 65% { -webkit-transform: scale3d(1.05,.95,1); transform: scale3d(1.05,.95,1) }
 75% { -webkit-transform: scale3d(.95,1.05,1); transform: scale3d(.95,1.05,1) }
 100% { -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1) }
}


/* --------------- ROTATE ------------------------------- */
.rotate-in-center {
	-webkit-animation: rotate-in-center .6s cubic-bezier(.25,.46,.45,.94) both;
	animation: rotate-in-center .6s cubic-bezier(.25,.46,.45,.94) both;
}

@-webkit-keyframes rotate-in-center {
	0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); opacity: 0 }
 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 }
}

@keyframes rotate-in-center { 
 0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); opacity: 0 }
 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 }
}

.rotate-only {
	-webkit-animation: rotate-only .6s cubic-bezier(.25,.46,.45,.94) both;
	animation: rotate-only .6s cubic-bezier(.25,.46,.45,.94) both;
}

@-webkit-keyframes rotate-only {
	0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}

@keyframes rotate-only {
	0% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
 100% { -webkit-transform: rotate(0); transform: rotate(0); }
}

.rotate-in-hor {
	-webkit-animation: rotate-in-hor .6s cubic-bezier(.25,.46,.45,.94) both;
	animation: rotate-in-hor .6s cubic-bezier(.25,.46,.45,.94) both;
}

@-webkit-keyframes rotate-in-hor {
	0% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 0 }
 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1 }
}

@keyframes rotate-in-hor {
	0% { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); opacity: 0 }
 100% { -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1 }
}

.rotate-in-ver {
	-webkit-animation: rotate-in-ver .6s cubic-bezier(.25,.46,.45,.94) both;
	animation: rotate-in-ver .6s cubic-bezier(.25,.46,.45,.94) both;
}

@-webkit-keyframes rotate-in-ver {
	0% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); opacity: 0 }
 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1 }
}

@keyframes rotate-in-ver {
	0% { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); opacity: 0 }
 100% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); opacity: 1 }
}

.rotate-slow {
	-webkit-animation: rotate-slow 3s linear infinite;
	animation: rotate-slow 3s linear infinite;
}

@-webkit-keyframes rotate-slow { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes rotate-slow { from { -webkit-transform: rotate(0); transform: rotate(0); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

/* --------------- SHAKE-HORIZONTAL ------------------------------- */
.shake-horizontal {
	-webkit-animation: shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both;
	animation: shake-horizontal .8s cubic-bezier(.455,.03,.515,.955) both;
}

@-webkit-keyframes shake-horizontal {
	0%,100% { -webkit-transform: translateX(0); transform: translateX(0) }
 10%,30%,50%,70% { -webkit-transform: translateX(-10px); transform: translateX(-10px) }
 20%,40%,60% { -webkit-transform: translateX(10px); transform: translateX(10px) }
 80% { -webkit-transform: translateX(8px); transform: translateX(8px) }
 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px) }
}

@keyframes shake-horizontal {
	0%,100% { -webkit-transform: translateX(0); transform: translateX(0) }
 10%,30%,50%,70% { -webkit-transform: translateX(-10px); transform: translateX(-10px) }
 20%,40%,60% { -webkit-transform: translateX(10px); transform: translateX(10px) }
 80% { -webkit-transform: translateX(8px); transform: translateX(8px) }
 90% { -webkit-transform: translateX(-8px); transform: translateX(-8px) }
}

.shake-lr {
	-webkit-animation: shake-lr .7s cubic-bezier(.455,.03,.515,.955) both;
	animation: shake-lr .7s cubic-bezier(.455,.03,.515,.955) both;
}

@-webkit-keyframes shake-lr {
	0%,100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% }
 10% { -webkit-transform: rotate(8deg); transform: rotate(8deg) }
 20%,40%,60% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) }
 30%,50%,70% { -webkit-transform: rotate(10deg); transform: rotate(10deg) }
 80% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg) }
 90% { -webkit-transform: rotate(8deg); transform: rotate(8deg) }
}

@keyframes shake-lr {
	0%,100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% }
 10% { -webkit-transform: rotate(8deg); transform: rotate(8deg) }
 20%,40%,60% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) }
 30%,50%,70% { -webkit-transform: rotate(10deg); transform: rotate(10deg) }
 80% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg) }
 90% { -webkit-transform: rotate(8deg); transform: rotate(8deg) }
}


.fa-shake {
	-webkit-animation: fa-shake .8s linear both;
	animation: fa-shake .8s linear both;
}

@-webkit-keyframes fa-shake {
	0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg) }
 4% { -webkit-transform: rotate(15deg); transform: rotate(15deg) }
 8%,24% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg) }
 12%,28% { -webkit-transform: rotate(18deg); transform: rotate(18deg) }
 16% { -webkit-transform: rotate(-22deg); transform: rotate(-22deg) }
 20% { -webkit-transform: rotate(22deg); transform: rotate(22deg) }
 32% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg) }
 36% { -webkit-transform: rotate(12deg); transform: rotate(12deg) }
 40%,to { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
}

@keyframes fa-shake {
	0% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg) }
 4% { -webkit-transform: rotate(15deg); transform: rotate(15deg) }
 8%,24% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg) }
 12%,28% { -webkit-transform: rotate(18deg); transform: rotate(18deg) }
 16% { -webkit-transform: rotate(-22deg); transform: rotate(-22deg) }
 20% { -webkit-transform: rotate(22deg); transform: rotate(22deg) }
 32% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg) }
 36% { -webkit-transform: rotate(12deg); transform: rotate(12deg) }
 40%,to { -webkit-transform: rotate(0deg); transform: rotate(0deg) }
}


/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ AIM-ACCESS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
#aim-access {
	display: -webkit-flex;
	display: flex;
	flex-flow: row;
	position: relative;
	width: 100%;
	gap: 0.4rem;
}

	#aim-access::before {
		display: block;
		position: absolute;
		top: -14px;
		left: 0;
		content: '';
		width: 100%;
		height: 3px;
		background-color: rgba(0, 0, 0, 0.1);
	}

.figerprint {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--finger) no-repeat center;
	background-color: var(--army-pal-lt);
	border-radius: 50%;
	border: 1px solid transparent;
	width: 54px;
	height: 54px;
	margin-right: 1rem;
}


#aim-access .warning {
	display: inline-block;
	flex: 1;
	text-align: justify;
	font: var(--fnt-text-sm);
	line-height: 1;
	color: rgba(0,0,0,0.60);
	padding-right: 0.3rem;
	margin-left: 64px;
}

#aim-access .cmd-panel {
	width: 260px;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

#aim-access input[type='text'],
#aim-access input[type='password'] {
	height: var(--footer-sm-height);
	display: block;
	text-align: center;
	flex: 1;
}

#aim-access-button {
	display: block;
	width: 127px;
	height: var(--footer-sm-height);
	font: var(--fnt-button);
	line-height: var(--footer-sm-height);
	letter-spacing: 2px;
	margin-left: 6px;
	-webkit-user-select: none;
	user-select: none;
	background-color: var(--gray-alpha);
	border: solid 1px var(--gray);
	text-align: center;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
}

/*#aim-access-button:hover {
	background-color: var(--red-back-pale);
	color: var(--white-alpha);
	border: solid 1px var(--red-back);
}
#aim-access-button:active {
	background-color: var(--red-back);
	border: solid 1px var(--red-back);
	-webkit-transition: none !important;
	transition: none !important;
}*/

/*#aim-access-err,*/
#aim-access-msg {
	display: block;
	width: 100%;
	margin-top: 6px;
	font-variant: small-caps;
	height: 1.6rem;
	line-height: 1.6rem;
	text-align: center;
	letter-spacing: 1px;
	color: var(--white-alpha);
	border: solid 1px var(--gray);
	background-color: var(--gray-alpha);
}

.sec-intro {
	display:block;
	position: relative;
	background-color: var(--army-pal-lt);
  margin-bottom:1rem;
}
.sec-intro > header, .sec-intro > footer{
	display:block;
	color: var(--white-alpha);
	/*background-color: var(--army-lt);*/
	background-color: var(--army-sha);
	font: var(--sans-serif-sm);
	text-align: left;
	height:26px;
	line-height:26px;
	padding: 0 0.5rem 0 0.5rem;
}
.sec-intro > header > b {
	display:inline-block;
	opacity:0;
	-webkit-animation: bounce-right-far 1.4s both .5s;
	animation: bounce-right-far 1.4s both .5s;
}

.sec-intro > footer > b {
	display:inline-block;
	opacity:0;
	-webkit-animation: bounce-left-far 1.4s both .5s; 
  animation: bounce-left-far 1.4s both .5s;
}

.sec-intro > footer{
	text-align: right;
}

.sec-intro > header > s { 
	float:right;
	opacity:0;
	font:var(--fnt-text-sm);
	font-style: italic;
	line-height:26px;
	/*-webkit-animation: fade-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: fade-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;*/
	-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.sec-intro > footer > s { 
	float:left;
	opacity:0;
	font:var(--fnt-text-sm);
	font-style: italic;
	line-height:26px;
	/*-webkit-animation: fade-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	animation: fade-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;*/
	-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;

}

#ak47big{
	position: relative;
	background-color: transparent;
	background-image: var(--ak47);
	width:340px; height:98px;
	background-position: center;
	background-repeat: no-repeat;
	opacity:0;
	-webkit-animation: scale-center-opacity 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: scale-center-opacity 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	margin:0.5rem auto 0.5rem auto;
}

.guarantee {  
	position: absolute;
	top:38px; left:80%;
	opacity:0;
	object-fit: none;
	object-position: 0 0;
	-webkit-animation: swirl-in-fwd .6s ease-out 1.5s both;
	animation: swirl-in-fwd .6s ease-out 1.5s both
}

.certified {  
	position: absolute;
	top:38px; right:80%;
	opacity:0;
	object-fit: none;
	object-position: -103px 0;
	-webkit-animation: swirl-in-fwd .6s ease-out 2s both;
	animation: swirl-in-fwd .6s ease-out 2s both
}

.bobbyray {  
	display:block;
	width:166px; height:22px;
	position: absolute;
	top:78px; right:56%;
	font: var(--fnt-decor);
	font-size: 1.2em;
	line-height: 1.2em;
	color: #a9a791;
	letter-spacing: -1px;
	opacity:0;
	text-align:center;
	-webkit-animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s both;
	        animation: tracking-in-expand-fwd 0.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) 1s both;
}

@-webkit-keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}
@keyframes tracking-in-expand-fwd{0%{letter-spacing:-.5em;-webkit-transform:translateZ(-700px);transform:translateZ(-700px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

.pantera {  
	position: relative;
	background-color: transparent;
	background-image: var(--pantera);
	width:320px; height:90px;
	background-position: center;
	background-repeat: no-repeat;
	opacity:0;
	-webkit-animation: scale-center-opacity 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1s;
	animation: scale-center-opacity 0.9s cubic-bezier(0.390, 0.575, 0.565, 1.000) both 1s;
	margin:0.5rem auto 0.5rem auto;
}

.swirl-in-fwd{ 
	-webkit-animation:swirl-in-fwd .6s ease-out both;
	animation:swirl-in-fwd .6s ease-out both
}
@-webkit-keyframes swirl-in-fwd{0%{-webkit-transform:rotate(-540deg) scale(0);transform:rotate(-540deg) scale(0);opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);opacity:1}}
@keyframes swirl-in-fwd{0%{-webkit-transform:rotate(-540deg) scale(0);transform:rotate(-540deg) scale(0);opacity:0}100%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1);opacity:1}}

#flag-chien {
	display: block;
	width: 184px;
	height: 126px;
}

#flag-chien > s {
	display: block;
	height: 42px;
}

#flag-chien > s:nth-child(1) { 	
  background-color: #dbd7c9;
	animation: flagBlack 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

#flag-chien > s:nth-child(2) { 	
  background-color: #e6e3d5;
	animation: flagGreen 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.4s both;
}
#flag-chien > s:nth-child(3) { 	
  background-color: #dbd7cc;
	animation: flagRed 0.8s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0.8s both;
}

@keyframes flagBlack { 0% { background-color: #dbd7c9;  } 100% { background-color: #3a3a3a; } }
@keyframes flagGreen { 0% { background-color: #e6e3d5;  } 100% { background-color: #4e984f; } }
@keyframes flagRed { 0% { background-color: #dbd7cc;  } 100% { background-color: #e44c1a; } }

.aimwarning {  
	object-fit: none;
	object-position: 0 -86px;
}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ POPUP ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.pop-logo-up {
	position: absolute;
	bottom: calc(1rem + 4px);
	right: calc(1rem + 4px);
	font: var(--fnt-decor);
	line-height: 2em;
	text-align: center;
	margin: 0;
	padding: 0 5px 0 5px;
	background-color: var(--gray-gary);
	color: var(--silver);
	border: 2px solid var(--silver);
	-webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.9);
	text-shadow: 0 1px 1px rgba(0,0,0,0.9);
	-webkit-user-select: none;
	-khtml-user-select: none;
	user-select: none;
	-webkit-animation: popup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s both;
	animation: popup 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) .7s both;
	z-index: 0;
}

@-webkit-keyframes popup { 0% { -webkit-transform: translateY(80px); transform: translateY(80px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

@keyframes popup { 0% { -webkit-transform: translateY(80px); transform: translateY(80px); opacity: 0 } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 } }

/*------------------ UNDER CONSTRUCTION --------------*/
.pop-recon {
	color: rgba(248,197,43, 0.9);
	border: 2px solid rgba(248, 197, 43, 1);
	letter-spacing: 2px;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ TOOL-TIPS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
[data-tip] {
	display: inline-block !important;
	position: relative !important;
	white-space: nowrap !important;
	margin: 0;
	padding: 0;
}

	[data-tip]::before {
		display: block;
		position: absolute;
		content: attr(data-tip);
		bottom: 120%;
		left: 50%;
		font: var(--sans-serif-sm);
		color: rgba(255,255,255,0.8);
		background-color: var(--b-tips);
		/*background-color: rgba(0,0,0,0.8);*/
		border-radius: 2px;
		padding: 3px 6px;
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		z-index: 500;
	}

	[data-tip].multiline::before {
		white-space: normal !important;
		min-width: 220px;
		text-align: start;
	}

	[data-tip]::after {
		display: block;
		position: absolute;
		bottom: 90%;
		left: 50%;
		content: '';
		width: 1px;
		height: 1px;
		background-color: transparent;
		border-style: solid;
		border-width: 10px 10px 0 10px;
		border-color: var(--b-tips) transparent transparent transparent;
		pointer-events: none;
		visibility: hidden;
		opacity: 0;
		z-index: 501;
	}

	[data-tip]:hover::before {
		visibility: visible;
		-webkit-animation: slide-tip 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
		animation: slide-tip 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
	}


@-webkit-keyframes slide-tip { 0% { -webkit-transform: translate(-50%,-20px); transform: translate(-50%,-20px); opacity: 0 } 100% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); opacity: 1 } }

@keyframes slide-tip { 0% { -webkit-transform: translate(-50%,-20px); transform: translate(-50%,-20px); opacity: 0 } 100% { -webkit-transform: translate(-50%,0); transform: translate(-50%,0); opacity: 1 } }

@-webkit-keyframes scale-tip-zoom { 0% { -webkit-transform: translate(-50%,20px) scale(0.5); transform: translate(-50%,20px) scale(0.5); opacity: 0; } 100% { -webkit-transform: translate(-50%,0) scale(1); transform: translate(-50%,0) scale(1); opacity: 1; } }

@keyframes scale-tip-zoom { 0% { -webkit-transform: translate(-50%,20px) scale(0.5); transform: translate(-50%,20px) scale(0.5); opacity: 0; } 100% { -webkit-transform: translate(-50%,0) scale(1); transform: translate(-50%,0) scale(1); opacity: 1; } }

[data-tip]:hover::after {
	visibility: visible;
	-webkit-animation: scale-tip-down .2s cubic-bezier(.25,.46,.45,.94) 0.6s both;
	animation: scale-tip-down .2s cubic-bezier(.25,.46,.45,.94) 0.6s both;
}

@-webkit-keyframes scale-tip-down { 
  0% { -webkit-transform: translate(-50%, 0) scaleY(0); transform: translate(-50%, 0) scaleY(0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 } 
  100% { -webkit-transform: translate(-50%, 0) scaleY(1); transform: translate(-50%, 0) scaleY(1); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 } 
}

@keyframes scale-tip-down {
	0% { -webkit-transform: translate(-50%, 0) scaleY(0); transform: translate(-50%, 0) scaleY(0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 }
	100% { -webkit-transform: translate(-50%, 0) scaleY(1); transform: translate(-50%, 0) scaleY(1); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 }
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬ DATA IMAGE TIPS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
[data-img] {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	-webkit-hyphens: none !important;
	hyphens: none !important;
}

	[data-img]::after {
		display: block;
		position: absolute;
		bottom: 120%;
		left: calc(50% - 67px);
		content: '';
		width: 128px;
		height: 128px;
		margin: 0;
		padding: 0;
		background-color: var(--b-tips);
		background-image: url('../images/srv/persons.webp');
		background-position: 0 0;
		background-repeat: no-repeat;
		background-origin: padding-box;
		box-shadow: var(--b-tips) 0px 0px 0px 1px inset, rgba(50, 50, 93, 0.3) 0px 2px 5px -1px, rgba(0, 0, 0, 0.35) 0px 1px 3px -1px;
		border: 3px solid var(--b-tips);
		opacity: 0;
		visibility: hidden;
		z-index: 501;
	}

[data-img^='merc-']::after {
	background-image: url('../images/game/mercs.webp');
}

[data-img]:not([data-img^='merc-'])::after {
	background-size: 640px 384px;
}

[data-img]::before {
	display: block;
	position: absolute;
	bottom: 90%;
	left: calc(50% - 10px);
	width: 1px;
	height: 1px;
	content: '';
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: var(--b-tips) transparent transparent transparent;
	opacity: 0;
	visibility: hidden;
	z-index: 500;
}

[data-img]:hover::after {
	visibility: visible;
	-webkit-animation: scale-tip 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
	animation: scale-tip 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.4s both;
}

@-webkit-keyframes scale-tip {
	0% { -webkit-transform: translate(0,60px) scale(0.5); transform: translate(0,60px) scale(0.5); opacity: 0; }
	100% { -webkit-transform: translate(0,0) scale(1); transform: translate(0,0) scale(1); opacity: 1; }
}

@keyframes scale-tip { 
  0% { -webkit-transform: translate(0,60px) scale(0.5); transform: translate(0,60px) scale(0.5); opacity: 0; }
	100% { -webkit-transform: translate(0,0) scale(1); transform: translate(0,0) scale(1); opacity: 1; }
}


[data-img]:hover::before {
	visibility: visible;
	-webkit-animation: scale-tip-arr .3s cubic-bezier(.25,.46,.45,.94) 0.6s both;
	animation: scale-tip-arr .3s cubic-bezier(.25,.46,.45,.94) 0.6s both;
}

@-webkit-keyframes scale-tip-arr {
	0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 }
	100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 }
}

@keyframes scale-tip-arr {
	0% { -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 }
	100% { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; opacity: 1 }
}

[data-img='currie']::after { background-position: 0 0; }

[data-img='yancurrie']::after { background-position: -256px -256px; }

[data-img='peychev']::after { background-position: -128px -256px; }

[data-img='lars']::after { background-position: -128px 0; }

[data-img='linda']::after { background-position: -256px 0; }

[data-img='logston']::after { background-position: -384px 0; }

[data-img='brad']::after { background-position: -512px 0; }

[data-img='ivanov']::after { background-position: 0 -128px; }

[data-img='spasov']::after { background-position: -128px -128px; }

[data-img='meduna']::after { background-position: -256px -128px; }

[data-img='kazemi']::after { background-position: -384px -128px; }

[data-img='dobrev']::after { background-position: -512px -128px;
}

[data-img='shaun']::after {	background-position: 0 -256px; }


[data-img='merc-buns']::after { background-position: var(--merc-buns); }

[data-img='merc-fidel']::after { background-position: var(--merc-fidel); }

[data-img='merc-red']::after { background-position: var(--merc-red); }

[data-img='merc-ivan']::after { background-position: var(--merc-ivan); }

[data-img='merc-steroid']::after { background-position: var(--merc-steroid); }

[data-img='merc-raven']::after { 	background-position: var(--merc-raven); }


/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ underline all and tip ▬▬▬▬▬▬▬▬▬▬▬▬ */

article > footer a,
#subfloor a,
[data-tip] u,
[data-img] s,
[data-img] u {
	display: inline-block;
	position: relative;
	margin: 0;
	padding: 0;
	color: var(--red);
	-webkit-transition: color 0.4s ease-out;
	transition: color 0.4s ease-out;
}

.rline,
.yline,
.rline:hover {
	display: inline-block;
	position: relative;
	margin: 0; padding: 0;
	padding-bottom:2px;
	color: var(--red);
	-webkit-transition: color 0.4s ease-out;
	transition: color 0.4s ease-out;
}

.rline::before,
.yline::before,
#subfloor a::before,
article > footer a::before,
[data-tip] u::before,
[data-img] s::before,
[data-img] u::before {
	content: '';
	position: absolute;
	width: 100%;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	height: 2px;
	left: 0;
	bottom: -1px;
	background-color: var(--red-back);
	transform-origin: bottom right;
	-webkit-transition: transform 0.25s ease-out;
	transition: transform 0.25s ease-out;
}

.rline:hover::before,
.yline:hover::before,
#subfloor a:hover::before,
#subfloor a.active::before,
article > footer a:hover::before,
[data-tip]:hover u::before,
[data-img]:hover s::before,
[data-img]:hover u::before {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	transform-origin: bottom left;
}

.yline,
[data-img] s {
	color: var(--orange);
}

.yline::before,
[data-img] s::before {
	background-color: var(--orange-lt);
}


article > footer a {
	color: var(--white-alpha) !important;
}

article > footer a:hover {
	color: var(--white-alpha) !important;
}

article > footer a::before {
	background-color: white;
	bottom: 4px !important;
}

article > footer.black a {
	color: var(--yellow-alpha) !important;
}

article > footer b {
	display: none;
}

/*============= SUBFLOOR ===============*/
#subfloor {
	display: block;
	display: -webkit-flex;
	display: flex;
	/*width: 100%;*/
	-webkit-justify-content: space-between;
	justify-content: space-between;
	padding:0 1rem;
					
	background-color: rgba(0, 0, 0, 0.6);
	margin: -0.5rem 1rem 1rem 1rem;
	text-align: center;
	font: var(--fnt-text-sm);
	/*font-variant: small-caps;*/
	height: var(--header-height);
	line-height: var(--header-height);
	color: var(--f-foot);
}

#subfloor > a { 
	margin:0; 
	line-height: var(--header-height);
	padding: 0 0 3px 0;
	color: var(--yellow-alpha) !important;
}

#subfloor > a:hover,
article > footer.black a:hover {
	color: white !important;
}

#subfloor > a::before,
#subfloor > a.active::before,
article > footer.black a::before {
	background-color: var(--orange-lt) !important;
	bottom: 6px !important;
}

#subfloor > a.active { 
	color: white !important;
	cursor: default;
	pointer-events: none;
}


#subfloor span {
	display: inline-block;
	float:none;
	text-align: center;
	margin:0 0 0 4px;
	color: var(--yellow-alpha) !important;
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ MERCS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.buddy b,
.hate b,
.prof, 
.trait {
	display: inline-block;
	color: white;
	background-color: #8cc34b;
	padding: 0 4px;
	height: 20px;
	line-height: 20px;
	margin-right: 6px;
	border-radius: 2px;
}

.hate b { background-color: #ff7044; }

.prof { background-color: #79818c; }

.trait { background-color: #e2b07d; }

.trait.psycho::before { content: 'Псих'; }
.trait.friendl::before { content: 'Дружелюбие'; }

#wrapper[lang='en'] .trait.psycho::before { content: 'Psycho'; }
#wrapper[lang='en'] .trait.friendl::before { content: 'Friendliness'; }

.psicho-src { content: 'Can decide to use a more vicious attacks then the one selected. Additional conversion options.'; }


.buddy::before { content: 'Друзья: '; }
.hate::before { content: 'Неприязнь: '; }
#wrapper[lang='en'] .buddy::before { content: 'Likes: '; }
#wrapper[lang='en'] .hate::before { content: 'Hates: '; }

.nick-buns::after { content: 'Сдоба'; }
.nick-steroid::after { content: 'Анаболик'; }
.nick-red::after { content: 'Рыжий'; }
.nick-ivan::after { content: 'Иван'; }
.nick-raven::after { content: 'Сова'; }

#wrapper[lang='en'] .nick-buns::after { content: 'Buns'; }
#wrapper[lang='en'] .nick-steroid::after { content: 'Steroid'; }
#wrapper[lang='en'] .nick-red::after { content: 'Red'; }
#wrapper[lang='en'] .nick-ivan::after { content: 'Ivan'; }
#wrapper[lang='en'] .nick-raven::after { content: 'Raven'; }


.prof.marksman::after { content: 'Стрелок'; }
.prof.explosive::after { content: 'Эксперт взрывотехник'; }

#wrapper[lang='en'] .prof.marksman::after { content: 'Marksman'; }
#wrapper[lang='en'] .prof.explosive::after { content: 'Explosive expert'; }


/* ------------- MERC-INFO ---------------- */
.person sub:nth-child(1) u:nth-child(1)::before { content: 'Здоровье '; }
.person sub:nth-child(1) u:nth-child(2)::before { content: 'Подвижность '; }
.person sub:nth-child(1) u:nth-child(3)::before { content: 'Ловкость '; }
.person sub:nth-child(1) u:nth-child(4)::before { content: 'Сила '; }
.person sub:nth-child(1) u:nth-child(5)::before { content: 'Интелект '; }
.person sub:nth-child(2) u:nth-child(1)::before { content: 'Лидерство '; }
.person sub:nth-child(2) u:nth-child(2)::before { content: 'Меткость '; }
.person sub:nth-child(2) u:nth-child(3)::before { content: 'Механика '; }
.person sub:nth-child(2) u:nth-child(4)::before { content: 'Взрывчатка '; }
.person sub:nth-child(2) u:nth-child(5)::before { content: 'Медицина '; }
.person sub:nth-child(3) u:nth-child(1)::before { content: 'Найм 1д '; }
.person sub:nth-child(3) u:nth-child(2)::before { content: 'Найм 7д '; }
.person sub:nth-child(3) u:nth-child(3)::before { content: 'none '; }
.person sub:nth-child(3) u:nth-child(4)::before { content: 'Депозит '; }
.person sub:nth-child(3) u:nth-child(5)::before { content: 'Уровень '; }

#wrapper[lang='en'] .person sub:nth-child(1) u:nth-child(1)::before { content: 'Health '; }
#wrapper[lang='en'] .person sub:nth-child(1) u:nth-child(2)::before { content: 'Agility '; }
#wrapper[lang='en'] .person sub:nth-child(1) u:nth-child(3)::before { content: 'Dexterity '; }
#wrapper[lang='en'] .person sub:nth-child(1) u:nth-child(4)::before { content: 'Strength '; }
#wrapper[lang='en'] .person sub:nth-child(1) u:nth-child(5)::before { content: 'Wisdom '; }
#wrapper[lang='en'] .person sub:nth-child(2) u:nth-child(1)::before { content: 'Leadership '; }
#wrapper[lang='en'] .person sub:nth-child(2) u:nth-child(2)::before { content: 'Marksmanship '; }
#wrapper[lang='en'] .person sub:nth-child(2) u:nth-child(3)::before { content: 'Mechanical '; }
#wrapper[lang='en'] .person sub:nth-child(2) u:nth-child(4)::before { content: 'Explosives '; }
#wrapper[lang='en'] .person sub:nth-child(2) u:nth-child(5)::before { content: 'Medical '; }
#wrapper[lang='en'] .person sub:nth-child(3) u:nth-child(1)::before { content: '1D fee '; }
#wrapper[lang='en'] .person sub:nth-child(3) u:nth-child(2)::before { content: '7D fee '; }
#wrapper[lang='en'] .person sub:nth-child(3) u:nth-child(3)::before { content: 'none '; }
#wrapper[lang='en'] .person sub:nth-child(3) u:nth-child(4)::before { content: 'Deposit '; }
#wrapper[lang='en'] .person sub:nth-child(3) u:nth-child(5)::before { content: 'Level '; }

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ PERSON ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.body-pers {
	padding-bottom: 0.5rem;
}

.person {
	display: block;
	position: relative;
	margin-bottom: 10px;
}

.person:last-of-type {
	margin-bottom: 0px;
}

.person > figcaption {
	display: block;
	font: var(--sans-serif-norm);
	height: var(--footer-sm-height);
	line-height: var(--footer-sm-height);
	padding: 0 0.5em 0 0.5em;
	margin: 0 0 0 150px;
	color: var(--white-alpha);
	background-color: var(--army-pal);
	text-align: left;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.person > figcaption > span {
	float: right;
	color: var(--silver-alpha);
}

.pic-pers {
	display: block;
	float: left;
	padding: 5px;
	margin-top: -26px; /*var(--footer-sm-height);*/
	background-color: var(--white-back);
	-webkit-box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	-webkit-user-select: text;
	user-select: text;
}

.pic-pers > img {
	display: block;
	/*content: var(--empty);*/
	object-position: 0 0;
	object-fit: none;
	width: 128px;
	height: 128px;
	background-image: url('../images/game/mercs.webp');
	background-position: 0 0;
	background-repeat: no-repeat;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.pic-pers.merc-buns > img  { object-position: var(--merc-buns); }
.pic-pers.merc-fidel > img { object-position: var(--merc-fidel); }
.pic-pers.merc-red > img   { object-position: var(--merc-red); }
.pic-pers.merc-ivan > img  { object-position: var(--merc-ivan); }
.pic-pers.merc-steroid > img { object-position: var(--merc-steroid); }
.pic-pers.merc-raven > img { object-position: var(--merc-raven); }

.pic-pers > figcaption {
	display: block;
	background-color: var(--gray-dark);
	color: var(--white-alpha);
	font: var(--sans-serif);
	padding: 0;
	height: 20px;
	line-height: 20px;
	text-align: center;
	cursor: default;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.person .legend {
	min-height: 100px;
	max-height: 100px;
	margin: 0 0 0 150px;
	padding-top: 6px;
	font: var(--fnt-text-sm);
	overflow: hidden;
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
}

.person footer {
	display: block;
	font: var(--sans-serif);
	padding: 0 0.5em;
	height: var(--footer-sm-height);
	line-height: var(--footer-sm-height);
	margin: 0 0 0 150px;
	background-color: var(--army-pal-lt);
	overflow: visible !important;
}

.person > footer {
	margin: 8px 0 0 0;
}


.person > footer .btn-icon {
	width: var(--footer-sm-height);
	height: var(--footer-sm-height);
}

.pers-info {
	display: inline-block;
}

.pers-data {
	font: var(--sans-serif);
	letter-spacing: -0.5px;
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 4px 2px 0 2px;
}

.pers-data > * {
	width: 32%;
	/*margin-top: 0.5em;*/
}

.pers-data sub {
	display: block;
}

.pers-data u {
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	align-content: space-between;
	border-bottom: dotted 2px rgba(0, 0, 0, 0.25);
	padding-right: 4px;
	background-color: transparent;
}

.buddy::before {
	letter-spacing: -0.5px;
}

.hate::before {
	letter-spacing: -0.5px;
}

.person q::before {
	content: '\201C';
}

.person q::after {
	content: '\201D';
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ GAME-ITEM ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

.body-items {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 0.6rem;
}

.body-items > .game-item:nth-child(odd) {
	border-right: solid 3px var(--text-back);
}

.body-items > .game-item:nth-child(even) {
	border-left: solid 3px var(--text-back);
}

.game-item {
	width: 50%;
	background-color: var(--army-sha);
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-bottom: solid 6px var(--text-back);
	font: var(--sans-serif);
	letter-spacing: -0.5px;
}

.game-item > figcaption {
	display: block;
	font: var(--sans-serif);
	line-height: 24px;
	height: 24px;
	color: var(--white-alpha);
	background-color: var(--army-pal);
	text-align: center;
	letter-spacing: normal;
	border-bottom: 6px solid var(--army-sha-lt);
}

	.game-item > figcaption > span {
		float: right;
	}

.game-item > .item-info {
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0;
}

.pic-item {
	width: 128px;
	height: 96px;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}

.game-item.item .pic-item {
	width: 128px;
	height: 112px;
}

.game-item.rifle .pic-item {
	width: 192px;
	height: 86px;
}

.game-item.handgun .pic-item {
	width: 128px;
	height: 86px;
}

.pic-item > img {
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

.img-hgun,
.img-rifle,
.img-outfit,
.img-misc,
.img-food,
.img-med {
	display: block;
	width: 96px;
	height: 96px;
	background-color: transparent;
	object-position: 0 0;
	object-fit: none;
	
}
.img-rifle { width: 192px; height: 64px; }
.img-hgun { width: 96px; height: 72px; }

/* ------------------ WEAPON -----------------------*/
.weapon sub:nth-child(1) u:nth-child(1)::before { content: 'Урон ';}
.weapon sub:nth-child(1) u:nth-child(2)::before { content: 'ОД ';}
.weapon sub:nth-child(1) u:nth-child(3)::before { content: 'Дальность ';}
.weapon sub:nth-child(1) u:nth-child(4)::before { content: 'Крит ';}
.weapon sub:nth-child(1) u:nth-child(5)::before { content: 'Прицел ';}
.weapon sub:nth-child(1) u:nth-child(6)::before { content: 'Пробивание ';}
.weapon sub:nth-child(2) u:nth-child(1)::before { content: 'Слоты ';}
.weapon sub:nth-child(2) u:nth-child(2)::before { content: 'Вес ';}
.weapon sub:nth-child(2) u:nth-child(3)::before { content: 'Части ';}
.weapon sub:nth-child(2) u:nth-child(4)::before { content: 'Ресурс ';}
.weapon sub:nth-child(2) u:nth-child(5)::before { content: 'Стоимость ';}
.weapon sub:nth-child(2) u:nth-child(6)::before { content: 'None ';}

#wrapper[lang='en'] .weapon sub:nth-child(1) u:nth-child(1)::before { content: 'Damage ';}
#wrapper[lang='en'] .weapon sub:nth-child(1) u:nth-child(2)::before { content: 'AP ';}
#wrapper[lang='en'] .weapon sub:nth-child(1) u:nth-child(3)::before { content: 'Range ';}
#wrapper[lang='en'] .weapon sub:nth-child(1) u:nth-child(4)::before { content: 'Crit ';}
#wrapper[lang='en'] .weapon sub:nth-child(1) u:nth-child(5)::before { content: 'Aiming ';}
#wrapper[lang='en'] .weapon sub:nth-child(1) u:nth-child(6)::before { content: 'Рiercing ';}
#wrapper[lang='en'] .weapon sub:nth-child(2) u:nth-child(1)::before { content: 'Slots ';}
#wrapper[lang='en'] .weapon sub:nth-child(2) u:nth-child(2)::before { content: 'Weight ';}
#wrapper[lang='en'] .weapon sub:nth-child(2) u:nth-child(3)::before { content: 'Parts ';}
#wrapper[lang='en'] .weapon sub:nth-child(2) u:nth-child(4)::before { content: 'Durable ';}
#wrapper[lang='en'] .weapon sub:nth-child(2) u:nth-child(5)::before { content: 'Price ';}
#wrapper[lang='en'] .weapon sub:nth-child(2) u:nth-child(6)::before { content: 'None ';}

/*------------- IMG-RIFLE  -------------*/
.img-rifle.ak47 { object-position: var(--wpn-ak47); }
.img-rifle.m16a4 { object-position: var(--wpn-m16a4); }
.img-rifle.famas { object-position: var(--wpn-famas); }
.img-rifle.an94 { object-position: var(--wpn-an94); }

/*------------- IMG-HGUN -------------*/
.img-hgun.eagle { object-position: var(--wpn-eagle); }
.img-hgun.fnbarr { object-position: var(--wpn-fnbarr); }
.img-hgun.berr93 { object-position: var(--wpn-berr93); }
.img-hgun.glock17 { object-position: var(--wpn-glock17); }

/* ----------------- OUTFIT --------------------*/
.outfit u:nth-child(1)::before { content: 'Защита '; }
.outfit u:nth-child(2)::before { content: 'Броня '; }
.outfit u:nth-child(3)::before { content: 'Вес '; }
.outfit u:nth-child(4)::before { content: 'Цена '; }
#wrapper[lang='en'] .outfit u:nth-child(1)::before { content: 'Defence '; }
#wrapper[lang='en'] .outfit u:nth-child(2)::before { content: 'Armor '; }
#wrapper[lang='en'] .outfit u:nth-child(3)::before { content: 'Weight '; }
#wrapper[lang='en'] .outfit u:nth-child(4)::before { content: 'Price '; }

.img-outfit.flak1 { object-position: var(--arm-flak1); }
.img-outfit.flak2 { object-position: var(--arm-flak2); }
.img-outfit.flak3 { object-position: var(--arm-flak3); }
.img-outfit.flak4 { object-position: var(--arm-flak4); }
.img-outfit.cap1 { object-position: var(--arm-cap1); }
.img-outfit.cap2 { object-position: var(--arm-cap2); }
.img-outfit.cap3 { object-position: var(--arm-cap3); }
.img-outfit.cap4 { object-position: var(--arm-cap4); }

/* -------------- CONSUME food & med -----------------*/
.consume u:nth-child(1)::before { content: 'Здоровье ';}
.consume u:nth-child(2)::before { content: 'Энергия ';}
.consume u:nth-child(3)::before { content: 'Экстра эффект ';}
.consume u:nth-child(4)::before { content: 'Вес ';}
.consume u:nth-child(5)::before { content: 'Цена ';}
#wrapper[lang='en'] .consume u:nth-child(1)::before { content: 'Health ';}
#wrapper[lang='en'] .consume u:nth-child(2)::before { content: 'Energy ';}
#wrapper[lang='en'] .consume u:nth-child(3)::before { content: 'Extra effect ';}
#wrapper[lang='en'] .consume u:nth-child(4)::before { content: 'Weight ';}
#wrapper[lang='en'] .consume u:nth-child(5)::before { content: 'Price ';}

/* -------------- MISC -----------------*/
.misc u:nth-child(1)::before { content: 'Тип ';}
.misc u:nth-child(2)::before { content: 'Вес ';}
.misc u:nth-child(3)::before { content: 'Цена ';}
#wrapper[lang='en'] .misc u:nth-child(1)::before { content: 'Type ';}
#wrapper[lang='en'] .misc u:nth-child(2)::before { content: 'Weight ';}
#wrapper[lang='en'] .misc u:nth-child(3)::before { content: 'Price ';}

.img-food.ham { object-position: var(--food-ham); }
.img-food.sausg { object-position: var(--food-sausg); }
.img-food.beans { object-position: var(--food-beans); }
.img-food.papp  { object-position: var(--food-papp); }

/* ---------------- IMG-MED ---------------------*/
.img-med.lmed { object-position: var(--med-lmed); }
.img-med.smed { object-position: var(--med-smed); }
.img-med.bond { object-position: var(--med-bond); }
.img-med.blood { object-position: var(--med-blood); }

/*------------- IMG-ITEMS -------------*/
.img-misc.docs  { object-position: var(--misc-docs); }
.img-misc.game1 { object-position: var(--misc-game1); }
.img-misc.balms { object-position: var(--misc-balms); }
.img-misc.toil  { object-position: var(--misc-toil); }



.game-item .features {
	display: block;
	text-align: left;
	line-height: 1.2;
	padding: 2px 6px 6px 6px;
	width: auto;
	flex: 1;
	height: 86px;
	border-left: 6px solid var(--army-sha-lt);
	overflow: hidden;
}


.item-data {
	/*position:relative;*/
	display: -webkit-flex;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	flex: 1;
	padding: 4px 10px 10px 10px;
	background-color: var(--army-sha-lt);
}

	.item-data.outfit, .item-data.consume, .item-data.misc {
		display: block;
	}

	.item-data sub {
		display: block;
	}

	.item-data > * {
		float: left;
		width: 50%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.item-data.outfit > *, .item-data.consume > *, .item-data.misc > * {
		float: none;
		width: 100%;
	}

	.item-data sub u {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		align-content: space-between;
		border-bottom: dotted 2px rgba(0, 0, 0, 0.25);
		padding-right: 4px;
		background-color: transparent;
	}

.weapon sub:nth-child(odd) {
	padding-right: 4px;
}

.weapon sub:nth-child(even) {
	padding-left: 4px;
}

.game-item .legend {
	display: block;
	font: var(--fnt-text-sm);
	letter-spacing: normal;
	padding: 6px 8px;
}

.game-item.item .legend {
	border-top: 6px solid var(--army-sha-lt);
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ MODS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
.mod {
	display: block;
	position: relative;
	margin-bottom: 1rem;
}

.mod:last-of-type { margin-bottom: 0; }


.mod > figcaption {
	display: block;
	background-color: var(--gray-dark);
	color: var(--white-alpha);
	font: var(--sans-serif);
	padding-left: 10px;
	margin-left: 150px;
	height: var(--footer-sm-height);
	line-height: var(--footer-sm-height);
	cursor: default;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* ------------ mod icons ------------ */
.pic-mod {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	/*float: left;*/
	padding: 5px;
	/*margin-top: -26px !important;*/
	width: 128px;
	height: 128px;
	background-color: var(--white-back);
	-webkit-box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	box-shadow: rgba(60, 64, 67, 0.15) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 2px 1px;
	-webkit-user-select: none;
	user-select: none;
}

.icon-pack,
.icon-note,
.icon-tools {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 128px;
	height: 128px;
	/*background-color: #6e7884;*/
	background-color: var(--silver);
}

	.icon-pack::after,
	.icon-note::after,
	.icon-tools::after {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		width: 128px;
		height: 128px;
		content: '';
		background-image: var(--ico-tools);
		background-repeat: no-repeat;
		opacity: 0.9;
	}

	.icon-note::after {
		background-image: var(--ico-note);
	}

	.icon-pack::after {
		background-image: var(--ico-pack);
	}

.mod-info {
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	font: var(--fnt-text-sm);
	margin-left: 150px;
	padding-top: 10px;
	min-height: 94px;
	max-height: 94px;
	overflow: hidden;
}

.mod footer {
	display: block;
	/*width:100%;	*/
	height: var(--footer-height) !important;
	font: var(--sans-serif);
	line-height: var(--footer-height) !important;
	margin-top: 18px;
	padding: 0 0.5em;
	color: rgba(255, 255, 255, 0.80);
	-webkit-text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	text-shadow: 0 1px 1px rgba(0,0,0,0.2);
	/*background-color: #c5c3b8 !important;*/
	background-color: #b0ae9e !important;
	overflow: visible !important;
	cursor: default;
}

.mod footer > span {
	color: var(--white-alpha);
}

.mod footer a {
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	border-bottom: solid 2px transparent;
}
.mod footer a:hover {
	color: #FFFFFF;
	border-bottom: solid 2px white;
}


/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬ MEDIA SCREENS 1024 ▬▬▬▬▬▬▬▬▬▬▬▬▬ */
@media screen and (max-width: 1024px) {
	body, #wrapper {
		width: 100% !important;
		max-width: 100vw !important;
		margin: 0 !important;
		padding: 0 !important;
		/*overflow-x: hidden !important;*/
	}

	#wrapper {
		display: block;
	}

	#logo-main {
		border-bottom: 3px solid #2d2d31;
	}

	main {
		width: 100% !important;
		max-width: 100vw !important;
		-webkit-animation: fade-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: fade-in .5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	}

	article {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		overflow-x: hidden !important;
	}

		article > header { border-top: 3px solid #dcdace; }

		article:first-of-type > header { border-top: none; }

	#navbar {
		display: none;
		position: fixed;
		top: var(--navmenu-height);
		right: 0;
		height: calc(100% - var(--navmenu-height));
		margin: 0;
		padding: 0;
		background-color: var(--b-dark-dark);
		z-index: 100;
	}

		#navbar.open {
			display: -webkit-flex;
			display: flex;
			-webkit-animation: panel-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
			animation: panel-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
		}

		#navbar.closed {
			display: -webkit-flex;
			display: flex;
			-webkit-animation: panel-out-right 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
			animation: panel-out-right 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		}

	.modal-back { background-color: transparent; }

	#navbar-sandbox.open { display: block; }

	#navbar > header { display: none; }

	#navmenu { display: block; }

	.nav-notes { margin: 0; }

	#navlist > a { line-height: 32px; height: 32px; }

	#navlist > a::before { height: 28px; }
	
	#subfloor { display: none; }
	
	.modal-layer .layer-body { margin:0; }

}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 850 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
@media screen and (max-width: 850px) {

	.col-box { flex-direction: column; }
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 750 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
@media screen and (max-width: 750px) {

	#aim-access { flex-flow: column; }

		#aim-access .cmd-panel {
			margin-left: auto;
			margin-right: 0;
		}

		#aim-access .warning { padding-right: 0; }

	.pic-ani > img {
		width: 180px;
		height: 180px;
		background-size: 540px 540px;
	}

	.pic-ani::before {
		width: 180px;
		height: 180px;
		background-size: 540px 540px;
	}

	.pic-ani::after {
		width: 180px;
		height: 180px;
		background-size: 540px 540px;
	}

	.pic-ani.ivan-smile::after { background-position: 0 0; }

	.pic-ani.ivan-smile::before { background-position: -180px 0; }

	.pic-ani.ivan-smile > img { background-position: -360px 0; }

	.pic-ani.buns-smile::after { background-position: 0 -180px; }

	.pic-ani.buns-smile::before { background-position: -180px -180px; }

	.pic-ani.buns-smile > img { background-position: -360px -180px; }

	.pic-ani.fidel-smile::after { background-position: 0 -360px; }

	.pic-ani.fidel-smile::before { background-position: -180px -360px; }

	.pic-ani.fidel-smile > img { background-position: -360px -360px; }

	.pic-ani.vicki-smile::after {
		background-position: 0 0;
		background-size: 540px 180px;
	}

	.pic-ani.vicki-smile::before {
		background-position: -180px 0;
		background-size: 540px 180px;
	}

	.pic-ani.vicki-smile > img {
		background-position: -360px 0;
		background-size: 540px 180px;
	}

	.pic-ani.fidel-sepia::after {
		width: 230px;
		height: 290px;
		background-position: 0 0;
		background-size: 460px 290px;
	}

	.pic-ani.fidel-sepia::before {
		width: 230px;
		height: 290px;
		background-position: -230px;
		background-size: 460px 290px;
	}

	.pic-ani.fidel-sepia > img {
		width: 230px;
		height: 290px;
		background-position: -230px;
		background-size: 460px 290px;
	}

	.aimwarning { display: none; }

	.mod > figcaption { margin-left: 0; }

	.pic-mod {
		width: 96px;
		height: 96px;
		top: 32px;
	}

	.icon-pack, .icon-note, .icon-tools {
		width: 96px;
		height: 96px;
	}

		.icon-pack::after, .icon-note::after, .icon-tools::after {
			background-size: 96px 96px;
		}

	.mod-info {
		margin-left: 120px;
		min-height: 96px;
		max-height: 96px;
	}

	.mod footer { margin-top: 20px; }

	.lbox-icon-next, .lbox-icon-prev { display: none; }

	.person > figcaption { margin: 0 0 0 0 !important; }

	.pic-pers { margin: 6px 0 8px 0; }

	.pers-info > footer { margin: 10px 0 0 0; }

	.pers-info > footer sub:nth-child(1) *[data-img]:nth-child(1)::after { left: calc(50% - 44px); }

	.person .legend {
		max-height: 166px !important;
		margin: 0 0 0 150px !important;
		padding-top: 4px;
		-webkit-line-clamp: 9;
	}

	.pers-data { padding-top: 6px; }

	.buddy::before, .hate::before { display: none; }

	.body-items { flex-direction: column; }

	.game-item { width: 100%; flex: 1; }

	.body-items > *:nth-child(odd) { border-right: none; }

	.body-items > *:nth-child(even) { border-left: none; }

	.gallery figure {
		width: calc(25% - var(--gap));
		height: 167px;
	}

	#gallery-dst figure:nth-child(9) { display: none; }

	#gallery-dst figure:nth-child(10) { display: none; }

	article > footer s { display: none; }

	article > footer b { display: inline; }
	
}
/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 650 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
@media screen and (max-width: 650px) {

	:root {
		--fnt-text: normal normal 400 16px/1.25 'Georgia Pro Cond', Georgia, Times, 'Times New Roman', serif;
		--fnt-text-sm: normal normal 400 16px/1.1 'Georgia Pro Cond', Georgia, Times, 'Times New Roman', serif;
	}

	body {
		font-size: 16px;
		line-height: 1.25;
	}


	#logo-main {
		height: 200px;
	}

	.logo-ja3 {
		width: 336px;
		height: 200px;
		background-size: 336px 200px;
	}

	#navbar header {
		height: 200px;
	}

	.mod-info {
		margin-left: 120px;
		min-height: 90px;
		max-height: 90px;
	}

	/*.news a { margin-left: 68px; }*/

	.news a b,
	.news a s,
	.guarantee,
	.certified,
	.sec-intro s { display: none; }
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 550 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
@media screen and (max-width: 550px) {

	.back-star::after, .back-star-w::after {
		display: none;
	}

	.notes-menu {
		min-width: 100%;
		max-width: 100%;
	}

	.gallery figure {
		width: calc(33.3% - var(--gap));
		height: 118px;
	}

	#gallery-dst figure:nth-child(9) {
		display: block;
	}

	.pop-logo-up {
		bottom: calc(1rem - 4px);
		right: calc(1rem - 4px);
		font: var(--fnt-decor);
		font-size: 14px;
		line-height: 16px;
		padding: 3px 4px 3px 4px;
	}

	footer.small > .nordic-logo {
		margin: 0;
		width: 100%;
	}

	footer.small > .logo-haemimont {
		height: 66px;
	}

	footer.small > span {
		-webkit-line-clamp: 5;
		max-height: 66px;
	}

	.draft { font-size: 18px; }

	.draft-text { text-align: justify; }

	#file-request {
		width: 100%;
		padding-top: 6px;
	}
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬  450 x 920 Honor Note 10 1080x2220 = 2.4MP text width:361px ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */
@media screen and (max-width: 450px) {


	.img-float {
		display: block;
		float: none;
		margin: 0 auto 0.5em auto;
		width: 100%;
		height: auto;
	}

	.pic-float {
		display: block;
		float: none;
		margin: 0 auto 0.5em auto;
	}

		.pic-float img {
			display: block;
			width: 100%;
			height: auto;
		}

	blockquote.elegant {
		padding-left: 2em;
	}


		blockquote.elegant::before {
			left: 2px;
		}


	#aim-access .cmd-panel {
		margin-left: 64px;
		width: calc(100% - 64px);
	}

	.nordic-logo.img-float {
		content: var(--nordic-big);
		float: none;
		width: 360px;
		height: 58px;
		margin: 0 auto 8px auto;
	}
}



/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ AIM Bot ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

.bot-panel {
	position: relative;
	display: block;
	height: 28px;
	margin: 0;
	padding: 0;
	background-color: black;
	border: 1rem solid black;
}

	.bot-panel > .che-button {
		display: inline-block;
		background-color: #363636;
		position: absolute;
		top: 0;
		right: 0;
	}

#navbar-bot {
	display: block;
	position: relative;
	background-color: #363636;
	width: 164px;
	height: 28px;
	padding-right: 4px;
}

.bot-msg {
	display: block;
	position: relative;
	height: 28px;
	font: var(--sans-serif-sm);
	line-height: 28px;
	text-align: center;
	color: var(--silver-alpha);
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	/*-webkit-animation: fade-in 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
			animation: fade-in 0.5s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;*/
}

/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ PUSH ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

.push-panel {
	display: block;
	border-style: solid;
	border-width: 0 1rem 0 1rem;
	border-color: black;
	background-color: black;
	height:100%;
	flex: 1;
	-webkit-transition: background-color 1.25s ease-out;
	transition: background-color 1.25s ease-out;
	overflow: hidden;
}

.push-panel.open {
		background-color: transparent !important;
		/*-webkit-animation: fade-out 1.3s ease-out both;
			animation: fade-out 1.3s ease-out both;*/
	}

.push-inner {
	display: block;
	height: 39px;
	/*margin: 2px 2px;*/
	background-color: black;
	background-image: url('../images/srv/push_image.webp');
	background-repeat: no-repeat;
	background-position: 0 0;
	border-bottom: 2px solid #000000;
	opacity: 0;
}

.push-inner.steam {
	background-position: 0 -42px;
}

.push-inner.moddb {
	background-position: 0 -84px;
}

.push-inner.last {
	background-image: none;
	height: 100%;
}

.push-panel.open .push-inner {
	-webkit-animation: slide-push 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-push 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-push {
	0% { -webkit-transform: translateY(2000px); transform: translateY(2000px); opacity: 0 }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 }
}

@keyframes slide-push {
	0% { -webkit-transform: translateY(2000px); transform: translateY(2000px); opacity: 0 }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1 }
}

.push-panel.open .push-inner:nth-child(1) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.push-panel.open .push-inner:nth-child(2) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.push-panel.open .push-inner:nth-child(3) { -webkit-animation-delay: 1.4s; animation-delay: 1.4s; }
.push-panel.open .push-inner:nth-child(4) { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; }
.push-panel.open .push-inner:nth-child(5) { -webkit-animation-delay: 1.8s; animation-delay: 1.8s; }
.push-panel.open .push-inner:nth-child(6) { -webkit-animation-delay: 2s; animation-delay: 2s; }
.push-panel.open .push-inner:nth-child(7) { -webkit-animation-delay: 2.2s; animation-delay: 2.2s; }
.push-panel.open .push-inner:nth-child(8) { -webkit-animation-delay: 2.4s; animation-delay: 2.4s; }
.push-panel.open .push-inner:nth-child(9) { -webkit-animation-delay: 2.6s; animation-delay: 2.6s; }
.push-panel.open .push-inner:nth-child(10) { -webkit-animation-delay: 2.8s; animation-delay: 2.8s; }
.push-panel.open .push-inner:nth-child(11) { -webkit-animation-delay: 3s; animation-delay: 3s; }
.push-panel.open .push-inner:nth-child(12) { -webkit-animation-delay: 3.2s; animation-delay: 3.2s; }
.push-panel.open .push-inner:nth-child(13) { -webkit-animation-delay: 3.4s; animation-delay: 3.4s; }
.push-panel.open .push-inner:nth-child(14) { -webkit-animation-delay: 3.6s; animation-delay: 3.6s; }

.push-block {
	/*min-height:300px;*/
	background-color: transparent;
	padding: 0;
	-webkit-backdrop-filter:  blur(14px) brightness(60%) contrast(1.1);
	backdrop-filter: blur(14px) brightness(60%) contrast(1.1);
}

.navbar-plug {
	display: block;
	height: 1rem;
	width: 100%;
	background-color: black;
}



/* ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ BOT ANIMATION ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

.bot-icon {
	opacity: 1;
	float: left;
	width: 20px;
	height: 28px;
	margin: 0 2px 0 4px;
	background-image: var(--i-bot-face);
}

/*.bot-icon::after { visibility: visible; opacity:0; background-image: var(--i-bot-blink); }*/

.bot-ico-loading {
	background-image: var(--i-bot-load);
	-webkit-animation: rotate-slow 1s linear infinite reverse both;
	animation: rotate-slow 1s linear infinite reverse both;
}

.bot-ico-ready {
	-webkit-animation: fade-in 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190) both, rotate-only .6s cubic-bezier(.25,.46,.45,.94) .9s;
	animation: fade-in 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190) both, rotate-only .6s cubic-bezier(.25,.46,.45,.94) .9s;
}

.bot-fade-out-in {
	animation: fade-out 0.4s cubic-bezier(0.550, 0.055, 0.675, 0.190) forwards, fade-in 0.2s cubic-bezier(0.550, 0.055, 0.675, 0.190) both 0.3s;
}

/*--------------- wait ---------------------*/
.bot-ico-wait {
	-webkit-animation: none; 
	animation: none;
	
}

/*.bot-icon.bot-ico-wait::after {
	visibility: visible;
	opacity: 0;
	background-image: var(--i-bot-blink);
	animation: bot-blink 5s infinite both;
	-webkit-animation: bot-blink 5s infinite both;
}*/

@keyframes bot-blink{ 5%,10%{opacity:1} 7%,12% {opacity:0} }
@-webkit-keyframes bot-blink{ 5%,10%{opacity:1} 7%,12% {opacity:0} }