* {margin:0; padding:0; outline:none}

body {overflow-x: hidden; }

html {scroll-behavior: smooth;}

::selection {background: #ffe0e0; color:#000000;}
::-moz-selection {background: #ffe0e0; color:#000000;}
::-webkit-selection {background: #ffe0e0; color:#000000;}

@media (prefers-color-scheme: dark) {body {background: #1d061a;}}

/* -------------------------------------------------------------------------- */  

body::-webkit-scrollbar {width: calc(0.3em + 0.3vw); background-color: #fdf4f3;}
body::-webkit-scrollbar-thumb {border-radius: 10px; background-color: #ff9983;}
body::-webkit-scrollbar-track {border-radius: 10px; background-color: #fdf4f3;}

@media (prefers-color-scheme: dark)
{body::-webkit-scrollbar {width: calc(0.3em + 0.3vw); background-color: #1d061a;}}

@media (prefers-color-scheme: dark)
{body::-webkit-scrollbar-track {border-radius: 10px; background-color: #1d061a;}}

/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */

/* Шрифты */

/* rubik */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/rubik-v20-latin_cyrillic-300.eot');
  src: local(''),
       url('fonts/rubik-v20-latin_cyrillic-300.eot?#iefix') format('embedded-opentype'),
       url('fonts/rubik-v20-latin_cyrillic-300.woff2') format('woff2'),
       url('fonts/rubik-v20-latin_cyrillic-300.woff') format('woff'),
       url('fonts/rubik-v20-latin_cyrillic-300.ttf') format('truetype'),
       url('fonts/rubik-v20-latin_cyrillic-300.svg#Rubik') format('svg');
}

/* hachi-maru-pop-regular */
@font-face {
  font-display: swap;
  font-family: 'Hachi Maru Pop';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/hachi-maru-pop-v17-cyrillic_latin-regular.eot');
  src: url('fonts/hachi-maru-pop-v17-cyrillic_latin-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/hachi-maru-pop-v17-cyrillic_latin-regular.woff2') format('woff2'),
       url('fonts/hachi-maru-pop-v17-cyrillic_latin-regular.woff') format('woff'),
       url('fonts/hachi-maru-pop-v17-cyrillic_latin-regular.ttf') format('truetype'),
       url('fonts/hachi-maru-pop-v17-cyrillic_latin-regular.svg#HachiMaruPop') format('svg');
}

/* -------------------------------------------------------------------------- */  


/* вверх */

.scroll_start{width:63px; height:87px; transform: scale(0.7); opacity:0.9; position:fixed; bottom:5%; right:1.5%; display:none; text-indent:-9999px; background: url(up.png) no-repeat; 
outline:0; -webkit-tap-highlight-color: transparent; z-index:9;}

@media screen and (min-width: 0px) and (max-width: 1050px)
{.scroll_start{transform: scale(0.5); bottom:1%; right:1%; -webkit-tap-highlight-color: transparent;}}

@media screen and (min-width: 3000px) and (max-width: 5000px)
{.scroll_start{transform: scale(1.5); bottom:4%; right:2.5%; }}

@media screen and (min-width: 5001px) and (max-width: 7000px)
{.scroll_start{transform: scale(2.0); bottom:4%; right:2.5%; }}

@media screen and (min-width: 7001px) and (max-width: 99999999999999px)
{.scroll_start{transform: scale(3.0); bottom:4%; right:2.5%; }}

@media (prefers-color-scheme: dark) {.scroll_start{background: url(up_dark.png) no-repeat; opacity:0.7; }}

/* -------------------------------------------------------------------------- */  


/* -------------------------------------------------------------------------- */  
/* логотип */
/* -------------------------------------------------------------------------- */  


@media screen and (min-width: 0px) and (max-width: 1400px)
{img.logotype {width:100%; max-width: 270px; margin-top: calc(0.4em + 0.8vw); 
 border: 6px solid #ffb7a9;
   -moz-box-shadow:0px 0px 15px #ffb7a9;
 -webkit-box-shadow:0px 0px 15px #ffb7a9;
 box-shadow:0px 0px 15px #ffb7a9;
 padding: 4px;
 border-radius: 50% 50% 50% 50%;
 -webkit-border-radius:50% 50% 50% 50%;
 -moz-border-radius: 50% 50% 50% 50%;  
 }}


@media screen and (min-width: 1400.00001px) and (max-width: 2000px)
{img.logotype {width:100%; max-width: 300px; margin-top: calc(0.4em + 0.8vw); 
border: calc(0.2em + 0.1vw) solid #ffb7a9;
  -moz-box-shadow:0px 0px 15px #ffb7a9;
 -webkit-box-shadow:0px 0px 15px #ffb7a9;
 box-shadow:0px 0px 15px #ffb7a9;
 border-radius: 50% 50% 50% 50%;
 -webkit-border-radius:50% 50% 50% 50%;
 -moz-border-radius: 50% 50% 50% 50%;
  padding: calc(0.2em + 0.1vw);
 }}


@media screen and (min-width: 2000.00001px) and (max-width: 800000000px)
{img.logotype {width:15%; margin-top: calc(0.2em + 0.8vw); 
border: calc(0.2em + 0.1vw) solid #ffb7a9;
  -moz-box-shadow:0px 0px 15px #ffb7a9;
 -webkit-box-shadow:0px 0px 15px #ffb7a9;
 box-shadow:0px 0px 15px #ffb7a9;
 border-radius: 50% 50% 50% 50%;
 -webkit-border-radius:50% 50% 50% 50%;
 -moz-border-radius: 50% 50% 50% 50%;
  padding: calc(0.2em + 0.1vw);
}}

img.logotype:hover {animation: moving1 3s linear infinite; opacity:0.91; cursor: pointer;}

@keyframes moving1 {0%, 100% {transform: translateY(2px);}   50% {transform: translateY(-2px);}}

@media screen and (min-width: 3000px) and (max-width: 99999px)
{@keyframes moving1 {0%, 100% {transform: translateY(8px);} 50% {transform: translateY(-8px);}}}


/* -------------------------------------------------------------------------- */  


/* -----Меню универсальное------------------------------------------------ */  

@-webkit-keyframes IntervalitsmagicBorder {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	80% {
		-webkit-transform: scale(1.65);
		transform: scale(1.6);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1.65);
		transform: scale(1.65);
	}
}

@keyframes IntervalitsmagicBorder {
	0% {
		opacity: 1;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	80% {
		-webkit-transform: scale(1.65);
		transform: scale(1.65);
	}
	100% {
		opacity: 0;
		-webkit-transform: scale(1.65);
		transform: scale(1.65);
	}
}

.itsmagic {
	transform: none;
	width: 64px;
	height: 64px;
	display: block;
	position: relative;
	cursor: pointer;
	position: fixed;
	top: 2.25em;
	left: 2.25em;
	z-index: 9;
	border-radius:  10%; 
 -webkit-border-radius:  10%; 
 -moz-border-radius:  10%; 
background-color: #fff;
	pointer-events: auto;
	opacity: 0.89;
    -webkit-tap-highlight-color: transparent;
}

@media (prefers-color-scheme: dark) {.itsmagic {background-color: transparent; -webkit-tap-highlight-color: transparent; }}

.itsmagic::after {
	transform: none;
	width: 64px;
	height: 64px;
	box-sizing: border-box;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	border: 2px solid #ffb7a9;
	border-radius:   10%; 
 -webkit-border-radius:   10%; 
 -moz-border-radius:  10%;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-name: IntervalitsmagicBorder;
	animation-name: IntervalitsmagicBorder;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@media (prefers-color-scheme: dark) {.itsmagic::after {border: 3px solid #ff6a18;}}

.itsmagic__line {
	width: 28px;
	height: 2px;
	overflow: hidden;
	position: absolute;
	z-index: 9;
}

.itsmagic__line-in {
	width: 84px;
	height: 2px;
	position: absolute;
	top: 0;
	left: 0;
}

.itsmagic__line-in::before,
.itsmagic__line-in::after {
	width: 28px;
	height: 2px;
	content: '';
	display: block;
	position: absolute;
	top: 0;
	background-color: #ee5c38;
}
@media (prefers-color-scheme: dark) {.itsmagic__line-in::before,.itsmagic__line-in::after {background-color: #ffffff;}}

.itsmagic__line-in::before {
	left: -56px;
}

.itsmagic__line-in::after {
	left: 0;
}

.itsmagic__line--01,
.itsmagic__line--02,
.itsmagic__line--03,
.itsmagic__line--cross01,
.itsmagic__line--cross02 {
	left: 18px;
}

.itsmagic__line--01 {
	top: 24.6px;
}

.itsmagic__line--02,
.itsmagic__line--cross01,
.itsmagic__line--cross02 {
	top: 31px;
}

.itsmagic__line--03 {
	top: 37.4px;
}

.itsmagic__line--cross01 {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.itsmagic__line--cross02 {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.itsmagic__line {
	-webkit-transition-duration: 0.6s;
	transition-duration: 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.itsmagic__line-in {
	-webkit-transition-duration: 0.6s;
	transition-duration: 0.6s;
	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.itsmagic__line-in::before,
.itsmagic__line-in::after {
	-webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

.itsmagic__line-in--cross01,
.itsmagic__line-in--cross02 {
	-webkit-transform: translateX(-33.3%);
	transform: translateX(-33.3%);
}

.itsmagic__line-in--01 {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.itsmagic__line-in--02 {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.itsmagic__line-in--02::before,
.itsmagic__line-in--02::after {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.itsmagic__line-in--03 {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.itsmagic__line-in--03::before,
.itsmagic__line-in--03::after {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.itsmagic__line-in--cross01 {
	-webkit-transition-delay: 0.0s;
	transition-delay: 0.0s;
}

.itsmagic__line-in--cross02 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.itsmagic__line-in--cross02::before,
.itsmagic__line-in--cross02::after {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.itsmagic.is-opened-navi .itsmagic__line-in--01,
.itsmagic.is-opened-navi .itsmagic__line-in--02,
.itsmagic.is-opened-navi .itsmagic__line-in--03 {
	-webkit-transform: translateX(33.3%);
	transform: translateX(33.3%);
}

.itsmagic.is-opened-navi .itsmagic__line-in--cross01,
.itsmagic.is-opened-navi .itsmagic__line-in--cross02 {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}

.itsmagic.is-opened-navi .itsmagic__line-in--01 {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

.itsmagic.is-opened-navi .itsmagic__line-in--02 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.itsmagic.is-opened-navi .itsmagic__line-in--03 {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.itsmagic.is-opened-navi .itsmagic__line-in--cross01 {
	-webkit-transition-delay: 0.25s;
	transition-delay: 0.25s;
}

.itsmagic.is-opened-navi .itsmagic__line-in--cross02 {
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.itsmagic:hover .itsmagic__line-in::before,
.itsmagic:hover .itsmagic__line-in::after {
	-webkit-transform: translateX(200%);
	transform: translateX(200%);
}

.itsmagic:hover .itsmagic__line-in--01::before,
.itsmagic:hover .itsmagic__line-in--01::after,
.itsmagic:hover .itsmagic__line-in--02::before,
.itsmagic:hover .itsmagic__line-in--02::after,
.itsmagic:hover .itsmagic__line-in--03::before,
.itsmagic:hover .itsmagic__line-in--03::after {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
}

.itsmagic:hover .itsmagic__line-in--cross01::before,
.itsmagic:hover .itsmagic__line-in--cross01::after,
.itsmagic:hover .itsmagic__line-in--cross02::before,
.itsmagic:hover .itsmagic__line-in--cross02::after {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}

.itsmagic.is-opened-navi:hover .itsmagic__line-in--cross01::before,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--cross01::after,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--cross02::before,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--cross02::after {
	-webkit-transition-duration: 1s;
	transition-duration: 1s;
}

.itsmagic.is-opened-navi:hover .itsmagic__line-in--01::before,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--01::after,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--02::before,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--02::after,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--03::before,
.itsmagic.is-opened-navi:hover .itsmagic__line-in--03::after {
	-webkit-transition-duration: 0s;
	transition-duration: 0s;
}

@media screen and (min-width: 0px) and (max-width: 1050px)
{
	.itsmagic {
		position: fixed;
		top: 0.5em;
		left: 0.5em;
		transform: scale(0.75);
	}
}

@media screen and (min-width: 1051px) and (max-width: 1920px)
{
	.itsmagic {
		position: fixed;
		top: 1.5em;
		left: 1.5em;
		transform: scale(1.00);
	}
}

@media screen and (min-width: 1921px) and (max-width: 3000px)
{
	.itsmagic {
		position: fixed;
		top: 4%;
		left: 2%;
		transform: scale(1.4);
	}
}

@media screen and (min-width: 3001px) and (max-width: 4000px)
{
	.itsmagic {
		position: fixed;
		top: 5%;
		left: 2%;
		transform: scale(1.8);
	}
}

@media screen and (min-width: 4001px) and (max-width: 5000px)
{
	.itsmagic {
		position: fixed;
		top: 6%;
		left: 4%;
		transform: scale(2.25);
	}
}

@media screen and (min-width: 5001px) and (max-width: 6000px)
{
	.itsmagic {
		position: fixed;
		top: 6%;
		left: 4%;
		transform: scale(2.75);
	}
}

@media screen and (min-width: 6001px) and (max-width: 9999999999px)
{
	.itsmagic {
		position: fixed;
		top: 6%;
		left: 4%;
		transform: scale(3.75);
	}
}

/* -------------------------------------------------------------------------- */  




/* --Содержимое меню---------------------------------------------------------- */  


*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table;  }
.clearfix:after { clear: both; }

/* фон */
.overlay {position: fixed; width: 100%; height: 100%; top: 0; left: 0; 
background: #b02e73;
background: -webkit-linear-gradient(to left, #ee5c38, #e73f58, #b02e73);
background: linear-gradient(to left, #ee5c38, #e73f58, #b02e73);
 z-index: 10; }


/* закрыть */
.overlay .overlay-close {border:0; width: 0px; height: 0px; display: block; cursor: pointer; position: fixed;
	top: 2.25em; right: 2.25em;	z-index: 12; border-radius: 50%; pointer-events: auto;	-webkit-tap-highlight-color: rgba(255,255,255,1.00); background: url(close.png) no-repeat center center;}

.overlay:hover .overlay-close:hover {opacity: 0.8;}	

img.new_b {border:0; cursor: pointer; width: 40px; position: fixed; top: 2.25em; left: 2.25em; z-index: 12; }

@media screen and (max-width: 55em)
{ img.new_b {border:0; cursor: pointer; width: 7%; position: fixed; top: 2.25em; left: 2.25em; z-index: 12; }}

@media screen and (min-width: 1921px) and (max-width: 800000000px)
{ img.new_b {border:0; cursor: pointer; width: 2%; position: fixed; top: calc(3.5em + 0.8vw); left: calc(3.5em + 0.8vw); z-index: 12; }}

img.new_b:hover { opacity: 0.75; }

@media screen and (min-height: 0em) and (max-height: 15.999em)
{img.new_b {border:0px;  cursor: pointer;  width: 25px; position: fixed; left: 0.85em; top: 0.7em;  z-index: 12;  }}

.overlay nav.krupnoe_menu {text-align: center; position: relative; top: 40%; height:70%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}

.overlay ul {list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative;}
.overlay ul li {display: block; height: 20%; height: calc(100% / 9); min-height: 54px;}

/* описание ссылок  */
.overlay ul li a {text-rendering: optimizeLegibility !important; -moz-osx-font-smoothing: grayscale !important;  -webkit-font-smoothing: antialiased !important;
 color: #ffffff; font: normal 1.5rem 'Hachi Maru Pop'; text-decoration: none; text-transform: uppercase;  letter-spacing: -0.3px; line-height: 1.9rem; white-space: nowrap; padding: 6px;
text-align: center;  }

.overlay ul li a:hover, .overlay ul li a:focus {opacity: 1.0; border-bottom: 2px solid #ffffff;}

@media (prefers-color-scheme: dark) {.overlay ul li a {opacity: 0.99;  color: #ffffff; }}
@media (prefers-color-scheme: dark) {.overlay ul li a:hover, .overlay ul li a:focus {opacity: 1.0;  color: #ffffff; border-bottom: 2px solid #ffffff; }}


/* увеличение размера пунктов меню для больших по ширине экранов */

@media screen and (max-width: 55em)
{ .overlay ul li a {font: normal 1.4rem 'Hachi Maru Pop'; }}

@media screen and (min-width: 1921px) and (max-width: 3000px)
{ .overlay ul li a {font: normal 2.2rem 'Hachi Maru Pop'; }}

 @media screen and (min-width: 3001px) and (max-width: 4000px)
{ .overlay ul li a {font: normal 3.2rem 'Hachi Maru Pop'; }}

@media screen and (min-width: 4001px) and (max-width: 5000px)
{ .overlay ul li a {font: normal 4.2rem 'Hachi Maru Pop'; }}

@media screen and (min-width: 5001px) and (max-width: 6000px)
{ .overlay ul li a {font: normal 5.2rem 'Hachi Maru Pop'; }}

@media screen and (min-width: 6001px) and (max-width: 800000000px)
{ .overlay ul li a {font: normal calc(2.5em + 0.8vw) 'Hachi Maru Pop'; }}

.overlay-hugeinc {opacity: 0; visibility: hidden;-webkit-transition: opacity 0.5s, visibility 0s 0.5s;transition: opacity 0.5s, visibility 0s 0.5s; }
.overlay-hugeinc.open {opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; }
.overlay-hugeinc nav {-webkit-perspective: 1200px; perspective: 1200px;}
.overlay-hugeinc nav ul {opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;	transition: transform 0.5s, opacity 0.5s;}
.overlay-hugeinc.open nav ul { opacity: 1;-webkit-transform: rotateX(0deg); transform: rotateX(0deg);}
.overlay-hugeinc.close nav ul { -webkit-transform: translateY(25%) rotateX(-35deg);	transform: translateY(25%) rotateX(-35deg);}

/* Для небольших по высоте экранов или для альбомной ориентации компактных смартфонов */

@media screen and (min-height: 0em) and (max-height: 4.999em)
{.overlay nav.krupnoe_menu {height: 10px;  top: -45px;}}

@media screen and (min-height: 0em) and (max-height: 4.999em)
{.overlay ul li {display: inline;  }}

@media screen and (min-height: 0em) and (max-height: 4.999em)
{.overlay ul li a {font: normal 0.8rem 'Hachi Maru Pop'; line-height: 1.5rem; white-space: nowrap; margin-right: 28px; }}

@media screen and (min-height: 0em) and (max-height: 4.999em)
{.overlay ul li a:hover, .overlay ul li a:focus {opacity: 1.0;  color: #2e756f; border-bottom: 0px; }}

/* --------------------------------------------- */

@media screen and (min-height: 5em) and (max-height: 8.999em)
{.overlay nav.krupnoe_menu {height: 10px;  top: -40px;}}

@media screen and (min-height: 5em) and (max-height: 8.999em)
{.overlay ul li {display: inline;  }}

@media screen and (min-height: 5em) and (max-height: 8.999em)
{.overlay ul li a {font: normal 0.9rem 'Hachi Maru Pop'; line-height: 1.9rem; white-space: nowrap; margin-right: 29px;}}

@media screen and (min-height: 5em) and (max-height: 8.999em)
{.overlay ul li a:hover, .overlay ul li a:focus {opacity: 1.0;  color: #2e756f; border-bottom: 0px; }}

/* --------------------------------------------- */

@media screen and (min-height: 9em) and (max-height: 15.999em)
{.overlay nav.krupnoe_menu {height: 10px;  top: -20px;}}

@media screen and (min-height: 9em) and (max-height: 15.999em)
{.overlay ul li {display: inline;  }}

@media screen and (min-height: 9em) and (max-height: 15.999em)
{.overlay ul li a {font: normal 1.2rem 'Hachi Maru Pop'; line-height: 2.5rem; white-space: nowrap; padding-right: 12px; }}

@media screen and (min-height: 9em) and (max-height: 15.999em)
{.overlay ul li a:hover, .overlay ul li a:focus {opacity: 1.0;  color: #2e756f; border-bottom: 0px; }}

/* --------------------------------------------- */

@media screen and (min-height: 16em) and (max-height: 29.999em)
{.overlay nav.krupnoe_menu {height: 19px; top: -40px;}}

@media screen and (min-height: 16em) and (max-height: 29.999em)
{.overlay ul li {min-height: 23px; margin-top:24px; }}

@media screen and (min-height: 16em) and (max-height: 29.999em)
{.overlay ul li a {font: normal 1.2rem 'Hachi Maru Pop'; ;}}

@media screen and (min-height: 16em) and (max-height: 29.999em)
{.overlay ul li a:hover, .overlay ul li a:focus {opacity: 1.0;  color: #2e756f; border-bottom: 0px; }}

/* --------------------------------------------- */

@media screen and (min-height: 30em) and (max-height: 37em)
{.overlay nav.krupnoe_menu {height: 3%; top: 2%;}}

@media screen and (min-height: 30em) and (max-height: 37em)
{.overlay ul li {min-height: 38px; margin-top: 12px; }}


@media screen and (min-height: 30em) and (max-height: 37em)
{.overlay ul li a {font: normal 1.4rem 'Hachi Maru Pop'; line-height: 2.5rem;}}

/* -------------------------------------------------------------------------- */  
/* -------------------------------------------------------------------------- */  

/* Условия для меню на большом экране.  */
 
@media screen and (min-width: 0px) and (max-width: 700px)
{.bolshoy_ekran {display: none;}}

@media screen and (min-width: 701px) and (max-width: 3000px)
{.bolshoy_ekran {display: block; margin-top: 15px; }}

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{.bolshoy_ekran {display: block; margin-top: calc(1.3em + 1.3vw); }}

/* -------------------------------------------------------------------------- */  


/* Меню для больших экранов */


@media screen and (min-width: 701px) and (max-width: 950.99999px)
{table.menu_table {width: 80%;}}

@media screen and (min-width: 951px) and (max-width: 1200.99999px)
{table.menu_table {width: 70%;}}

@media screen and (min-width: 1201px) and (max-width: 1500.99999px)
{table.menu_table {width: 60%;}}

@media screen and (min-width: 1501px) and (max-width: 2000.99999px)
{table.menu_table {width: 50%;}}

@media screen and (min-width: 2001px) and (max-width: 8000000px)
{table.menu_table {width: 45%;}}

/* -------------------------------------------------------------------------- */  


/* Содержимое меню --------- */  

.tot {display: flex;}

a.upmenu {color: #ee5c38; font-family: 'Hachi Maru Pop'; font-size: calc(0.48vw + 0.48vh + 0.48vmin);
 text-decoration: none; text-transform: uppercase; font-weight: bold;
text-align: center;  letter-spacing: 0.2px; line-height: 1.9rem; white-space: nowrap; padding: 0px;} 

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{a.upmenu { font-size: calc(0.50vw + 0.50vh + 0.50vmin); } }

a.upmenu:hover {color: #b12f73;} 

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{a.upmenu:hover { font-size: calc(0.50vw + 0.50vh + 0.50vmin); } }


a.upmenu_select {color: #b12f73; font-family: 'Hachi Maru Pop'; font-size: calc(0.48vw + 0.48vh + 0.48vmin);
 text-decoration: none; text-transform: uppercase; font-weight: bold;
text-align: center;  letter-spacing: 0.2px; line-height: 1.9rem; white-space: nowrap; padding: 0px;} 

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{a.upmenu_select { font-size: calc(0.50vw + 0.50vh + 0.50vmin); } }

a.upmenu_select:hover {color: #ee5c38;} 

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{a.upmenu_select:hover { font-size: calc(0.50vw + 0.50vh + 0.50vmin); } }


.lucky {  
  background: hsl(0, 0%, 100%);
  padding: calc(0.28vw + 0.28vh + 0.28vmin) calc(0.58vw + 0.58vh + 0.58vmin);
  position: relative;
  border-radius: calc(0.88vw + 0.88vh + 0.88vmin);
  -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01);}

  .lucky::after {
    position: absolute;
    content: "";
    top: 3px;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    transform: scale(0.9) translateZ(0);
    filter: blur(15px);
    background: #fff; border: 2px solid #000;
    background-size: 200% 200%;
   }


@media (prefers-color-scheme: dark)

 {.lucky {  background: #1d061a;
  padding: calc(0.28vw + 0.28vh + 0.28vmin) calc(0.58vw + 0.58vh + 0.58vmin);
  position: relative;
  border-radius: calc(0.88vw + 0.88vh + 0.88vmin);
  -moz-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 0px rgba(0, 0, 0, 0);
   }}



@media (prefers-color-scheme: dark)
 {.lucky::after {
    position: absolute;
    content: "";
    top: 3px;
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    transform: scale(0.9) translateZ(0);
    filter: blur(15px);
   background: #1d061a; border: 0px solid #000;
    background-size: 200% 200%;
   }}

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{.lucky {  padding: calc(0.58vw + 0.58vh + 0.58vmin) calc(0.68vw + 0.68vh + 0.68vmin);}}

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{.lucky::after {  filter: blur(50px);}}


.lucky:hover {
  background: hsl(0, 0%, 100%);
  position: relative;
  border-radius: calc(0.88vw + 0.88vh + 0.88vmin);}


@media (prefers-color-scheme: dark)
{.lucky:hover {
  background: #1d061a;
  position: relative;
  border-radius: calc(0.88vw + 0.88vh + 0.88vmin);}}


 .lucky:hover::after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    transform: scale(0.9) translateZ(0);
    filter: blur(20px); border: transparent;
    background: linear-gradient(
      to left,
      #fc5a34,
      #fa4849,
      #df336e,
      #cf3794,
      #cf01af,
      #cf3794,
      #df336e,
      #fa4849,
      #fc5a34
    ); 
    background-size: 200% 200%;
    animation: somethingcool 1.25s linear infinite;
  }

@keyframes somethingcool {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{.lucky:hover {  padding: calc(0.58vw + 0.58vh + 0.58vmin) calc(0.68vw + 0.68vh + 0.68vmin); }}

@media screen and (min-width: 3001px) and (max-width: 8000000px)
{.lucky:hover::after  { filter: blur(calc(0.38vw + 0.38vh + 0.38vmin));}}


/* -------------------------------------------------------------------------- */   



/* ----навигатор на главной странице-------------------------------- */  

.tracy_one {width: 94.5%; border: 0px; margin-top: 25px; padding: calc(0.7vw + 0.7vh + 0.7vmin); -moz-box-shadow:0px 0px 15px #ecf0ea;
 -webkit-box-shadow:0px 0px 15px #ecf0ea; box-shadow:0px 0px 15px #ecf0ea;}

@media screen and (min-width: 1501px) and (max-width: 3000px)
{.tracy_one {width: 80%; border: 0px; margin-top: calc(1.3em + 0.8vw); padding: calc(1.2vw + 1.2vh + 1.2vmin); -moz-box-shadow:0px 0px 15px #ecf0ea;
 -webkit-box-shadow:0px 0px 15px #ecf0ea; box-shadow:0px 0px 15px #ecf0ea;}}

@media screen and (min-width: 3001px) and (max-width: 99999px)
{.tracy_one {width: 80%; border: 0px; margin-top: calc(2.9em + 0.8vw); padding: calc(1.2vw + 1.2vh + 1.2vmin); -moz-box-shadow:0px 0px 15px #ecf0ea;
 -webkit-box-shadow:0px 0px 15px #ecf0ea; box-shadow:0px 0px 15px #ecf0ea;}}


@media (prefers-color-scheme: dark) {.tracy_one {background: #1d061a; -moz-box-shadow:0px 0px 1px rgb(255,255,255,0.0);
 -webkit-box-shadow:0px 0px 1px rgb(255,255,255,0.0); box-shadow:0px 0px 1px rgb(255,255,255,0.0); }}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; 
}

@media screen and (min-width: 0px) and (max-width: 600.999px)
{
.container .box {
  position: relative;
  width: 320px;
  height: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px;
  transition: 0.5s;
}}

@media screen and (min-width: 601px) and (max-width: 1000.999px)
{
.container .box {
  position: relative;
  width: 320px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
  transition: 0.5s;
}}

@media screen and (min-width: 1001px) and (max-width: 1400px)
{
.container .box {
  position: relative;
  width: 320px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
  transition: 0.5s;
}}

@media screen and (min-width: 1401px) and (max-width: 99999px)
{.container .box {
  position: relative;
  width: calc(10.50vw + 10.50vh + 10.50vmin);
  height: calc(11.0vw + 11.0vh + 11.0vmin);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: calc(0.8vw + 0.8vh + 0.8vmin);
  transition: 0.5s; 
}}

.container .box::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 70px;
  width: 50%;
  height: 100%;
  text-decoration: none;
  background: #fff;
  border-radius: 8px;
  transition: 0.5s;
}

.container .box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  width: 50%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  transition: 0.5s;
  filter: blur(7px);
}

@media (prefers-color-scheme: dark)
{.container .box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 70px;
  width: 50%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  transition: 0.5s;
  filter: blur(3px);
}}

@media screen and (min-width: 4001px) and (max-width: 99999px)
{
.container .box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  width: 50%;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  transition: 0.5s;
  filter: blur(40px);
}}

.container .box:hover:before,
.container .box:hover:after {
  left: 40px;
  width: calc(100% - 90px);
height: calc(100% + 90px);
top: -45px;
}

@media screen and (min-width: 4001px) and (max-width: 99999px)
{
.container .box:hover:before,
.container .box:hover:after {
  left: 215px;
  width: calc(100% - 430px);
height: calc(100% + 90px);
top: -45px;
}}


.container .box:nth-child(1):before,
.container .box:nth-child(1):after {
  background: linear-gradient(315deg, #ffbc00, #ff1e1e);
}

.container .box:nth-child(2):before,
.container .box:nth-child(2):after {
 background: linear-gradient(315deg, #ff00ea, #fff600);
}

.container .box:nth-child(3):before,
.container .box:nth-child(3):after {
  background: linear-gradient(315deg, #ff1e1e, #ff1ef2);
}


.container .box:nth-child(4):before,
.container .box:nth-child(4):after {
  background: linear-gradient(0deg, #8f34ff, #58ffe5);

}

.container .box:nth-child(5):before,
.container .box:nth-child(5):after {
  background: linear-gradient(20deg, #ff34ee, #42ff34);

}

.container .box:nth-child(6):before,
.container .box:nth-child(6):after {
  background: linear-gradient(20deg, #ff7f9d, #bfbfbf);

}

.container .box span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

.container .box span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: 0.1s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

@media screen and (min-width: 0px) and (max-width: 1000.999px)
{
.container .box:hover span::before {
  top: -50px;
  left: 50px;
  width: 70px;
  height: 70px;
  opacity: 1;
}}

@media screen and (min-width: 1001px) and (max-width: 2000.999px)
{
.container .box:hover span::before {
  top: -50px;
  left: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}}

@media screen and (min-width: 2001px) and (max-width: 3000.999px)
{
.container .box:hover span::before {
  top: -30px;
  left: 80px;
  width: calc(2.5vw + 2.5vh + 2.5vmin);
  height: calc(2.5vw + 2.5vh + 2.5vmin);
  opacity: 1;
}}


@media screen and (min-width: 3001px) and (max-width: 99999px)
{
.container .box:hover span::before {
  top: -20px;
  left: 220px;
  width: calc(2.1vw + 2.1vh + 2.1vmin);
  height: calc(2.1vw + 2.1vh + 2.1vmin);
  opacity: 1;
}}

.container .box span::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  transition: 0.5s;
  animation: animate 2s ease-in-out infinite;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  animation-delay: -1s;
}

@media screen and (min-width: 0px) and (max-width: 1000.999px)
{
.container .box:hover span:after {
  bottom: -50px;
  right: 50px;
  width: 70px;
  height: 70px;
  opacity: 1;
}}


@media screen and (min-width: 1000px) and (max-width: 2000.999px)
{.container .box:hover span:after {
  bottom: -50px;
  right: 50px;
  width: 100px;
  height: 100px;
  opacity: 1;
}}

@media screen and (min-width: 2001px) and (max-width: 3000.999px)
{
.container .box:hover span:after {
  bottom: -30px;
  right: 80px;
 width: calc(2.5vw + 2.5vh + 2.5vmin);
  height: calc(2.5vw + 2.5vh + 2.5vmin);
  opacity: 1;
}}

@media screen and (min-width: 3001px) and (max-width: 99999px)
{
.container .box:hover span:after {
  bottom: -20px;
  right: 220px;
 width: calc(2.1vw + 2.1vh + 2.1vmin);
  height: calc(2.1vw + 2.1vh + 2.1vmin);
  opacity: 1;
}}

@keyframes animate {
  0%,
  100% {
    transform: translateY(10px);
  }

  50% {
    transform: translate(-10px);
  }
}

.container .box .content {
  position: relative;
  left: 0;
  padding: 10px 40px;
  background: rgba(255, 255, 255, 0.05);
  
  border-radius: calc(1.2vw + 1.2vh + 1.2vmin);
  z-index: 1;
  transform: 0.5s;
  background: linear-gradient(450deg, #cc2d7c, #fc5b36);
  opacity: 1.0;
}

.container .box:hover .content {
animation: animate3 2s ease-in-out infinite;

}

@keyframes animate3 {
  0%,
  100% {
    transform: translateY(4px);
  }

  50% {
    transform: translateY(-4px);
  }
}


@media screen and (min-width: 3000px) and (max-width: 99999px)
{@keyframes animate3 {
  0%,
  100% {
    transform: translateY(16px);
  }

  50% {
    transform: translateY(-16px);
  }
}}

@media screen and (min-width: 0px) and (max-width: 1400.999px)
{.container .box .content p {
  color: #ffffff; font-family: 'Hachi Maru Pop'; font-size: 14px;
 text-decoration: none; text-transform: uppercase; font-weight: bold;
  letter-spacing: 0.2px; line-height: 2.2em;  padding: 0px;
}}


@media screen and (min-width: 1401px) and (max-width: 3500.999px)
{
.container .box .content p {
  color: #ffffff; font-family: 'Hachi Maru Pop'; font-size: calc(0.48vw + 0.48vh + 0.48vmin);
 text-decoration: none; text-transform: uppercase; font-weight: bold;
  letter-spacing: -0.2px; line-height:  calc(0.98vw + 0.98vh + 0.98vmin);  padding: 0px;
}}

@media screen and (min-width: 3501px) and (max-width: 99999px)
{
.container .box .content p {
  color: #ffffff; font-family: 'Hachi Maru Pop'; font-size: calc(0.48vw + 0.48vh + 0.48vmin);
 text-decoration: none; text-transform: uppercase; font-weight: bold;
  letter-spacing: -0.2px; line-height:  calc(0.98vw + 0.98vh + 0.98vmin);  padding: 40px;
}}

.container .box .content a {
  display: inline-block;
color: #b02e73; font-family: 'Rubik'; font-size: calc(0.68vw + 0.68vh + 0.68vmin);
 text-decoration: none; text-transform: uppercase; font-weight: bold;
  letter-spacing: 0.6px; line-height:  calc(1.2vw + 1.2vh + 1.2vmin);  padding: 0px;  
  background: #fff;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  margin-top: 5px;  margin-bottom: 15px;
}

@media screen and (min-width: 1401px) and (max-width: 3500.999px)
{
.container .box .content a {
  display: inline-block;
color: #b02e73; font-family: 'Rubik'; font-size: calc(0.43vw + 0.43vh + 0.43vmin);
 text-decoration: none; text-transform: uppercase; font-weight: bold;
  letter-spacing: 0.6px; line-height:  calc(0.98vw + 0.98vh + 0.98vmin);  padding: 0px;  
  background: #fff;
  padding: calc(0.23vw + 0.23vh + 0.23vmin);
  border-radius:  calc(0.28vw + 0.28vh + 0.28vmin);
  text-decoration: none;
  margin-top:  calc(0.23vw + 0.23vh + 0.23vmin);
  margin-bottom:  calc(0.23vw + 0.23vh + 0.23vmin);
}}

@media screen and (min-width: 3501px) and (max-width: 99999px)
{
.container .box .content a {
  display: inline-block;
color: #b02e73; font-family: 'Rubik'; font-size: calc(0.48vw + 0.48vh + 0.48vmin);
 text-decoration: none; text-transform: uppercase; font-weight: bold;
  letter-spacing: 0.6px; line-height:  calc(0.98vw + 0.98vh + 0.98vmin);  padding: 0px;  
  background: #fff;
  padding: calc(0.23vw + 0.23vh + 0.23vmin);
  border-radius:  calc(0.28vw + 0.28vh + 0.28vmin);
  text-decoration: none;
  margin-top:  calc(0.23vw + 0.23vh + 0.23vmin);
  margin-bottom:  calc(1.03vw + 1.03vh + 1.03vmin);
  margin-left:  calc(0.23vw + 0.23vh + 0.23vmin);
}}

.container .box .content a:hover {
  background: #ffe25c; opacity: 0.9;
  color: #000;}

/* -------------------------------------------------------------------------- */  




/* -------------------------------------------------------------------------- */  

.int_onas {width: 94.5%; border: 0px; margin-top: 25px; padding: calc(0.7em + 0.7vw); text-align:left; -moz-box-shadow:0px 0px 10px #ff8fa0;
 -webkit-box-shadow:0px 0px 10px #ff8fa0; box-shadow:0px 0px 10px #ff8fa0;
background: #b02e73; background: -webkit-linear-gradient(to left, #ee5c38, #e73f58, #b02e73);
background: linear-gradient(to left, #ee5c38, #e73f58, #b02e73); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;}

@media screen and (min-width: 1501px) and (max-width: 3000px)
{.int_onas {width: 80%; border: 0px; margin-top: calc(1.3em + 0.8vw); padding: calc(1.2em + 1.2vw); text-align:left; -moz-box-shadow:0px 0px 15px #ff8fa0;
 -webkit-box-shadow:0px 0px 15px #ff8fa0; box-shadow:0px 0px 15px #ff8fa0;
background: #b02e73; background: -webkit-linear-gradient(to left, #ee5c38, #e73f58, #b02e73);
background: linear-gradient(to left, #ee5c38, #e73f58, #b02e73); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
}}

@media screen and (min-width: 3001px) and (max-width: 99999px)
{.int_onas {width: 80%; border: 0px; margin-top: calc(2.9em + 0.8vw); padding: calc(1.2em + 1.2vw);	text-align:left; -moz-box-shadow:0px 0px 15px #ecf0ea;
 -webkit-box-shadow:0px 0px 15px #ecf0ea; box-shadow:0px 0px 15px #ecf0ea;
 -webkit-box-shadow:0px 0px 15px #ecf0ea; box-shadow:0px 0px 15px #ecf0ea;
background: #b02e73; background: -webkit-linear-gradient(to left, #ee5c38, #e73f58, #b02e73);
background: linear-gradient(to left, #ee5c38, #e73f58, #b02e73); border-radius: calc(0.95vw + 0.95vh + 0.85vmin); 
-webkit-border-radius: calc(0.95vw + 0.95vh + 0.85vmin); -moz-border-radius: calc(0.95vw + 0.95vh + 0.85vmin);}}

@media (prefers-color-scheme: dark) {.int_onas { -moz-box-shadow:0px 0px 1px rgb(255,255,255,0.3);
 -webkit-box-shadow:0px 0px 1px rgb(255,255,255,0.3); box-shadow:0px 0px 1px rgb(255,255,255,0.3); }}

/* -------------------------------------------------------------------------- */  

.int_onas2 {width: 94.5%; border: 0px; margin-top: 25px; padding: calc(0.7em + 0.7vw); text-align:left; -moz-box-shadow:0px 0px 10px #ffd7dd;
 -webkit-box-shadow:0px 0px 10px #ffd7dd; box-shadow:0px 0px 10px #ffd7dd;
background: #fff; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;}

@media screen and (min-width: 1501px) and (max-width: 3000px)
{.int_onas2 {width: 80%; border: 0px; margin-top: calc(1.3em + 0.8vw); padding: calc(1.2em + 1.2vw); text-align:left; -moz-box-shadow:0px 0px 10px #ffd7dd;
 -webkit-box-shadow:0px 0px 10px #ffd7dd; box-shadow:0px 0px 10px #ffd7dd;
background: #fff; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
}}

@media screen and (min-width: 3001px) and (max-width: 99999px)
{.int_onas2 {width: 80%; border: 0px; margin-top: calc(2.9em + 0.8vw); padding: calc(1.2em + 1.2vw);	text-align:left; -moz-box-shadow:0px 0px 15px #ffd7dd;
 -webkit-box-shadow:0px 0px 15px #ecf0ea; box-shadow:0px 0px 15px #ffd7dd;
 -webkit-box-shadow:0px 0px 15px #ffd7dd; box-shadow:0px 0px 15px #ffd7dd;
background: #fff; border-radius: calc(0.95vw + 0.95vh + 0.85vmin); 
-webkit-border-radius: calc(0.95vw + 0.95vh + 0.85vmin); -moz-border-radius: calc(0.95vw + 0.95vh + 0.85vmin);}}

@media (prefers-color-scheme: dark) {.int_onas2 {background: #b02e73; background: -webkit-linear-gradient(to left, #ee5c38, #e73f58, #b02e73);
background: linear-gradient(to left, #ee5c38, #e73f58, #b02e73); -moz-box-shadow:0px 0px 1px rgb(255,255,255,0.3);
 -webkit-box-shadow:0px 0px 1px rgb(255,255,255,0.3); box-shadow:0px 0px 1px rgb(255,255,255,0.3); }}


/* -------------------------------------------------------------------------- */  


/* -------------------------------------------------------------------------- */  
/* ТЕКСТ  */  
/* -------------------------------------------------------------------------- */  

@media screen and (min-width: 0px) and (max-width: 800.9999px)
{.text_onas_inte  {color:#fff; font-family: 'Rubik'; font-size: calc(1.3vw + 1.3vh + 1.2vmin); letter-spacing: -0.005em; line-height: calc(1.7vw + 1.7vh + 1.7vmin);  } } 

@media screen and (min-width: 801px) and (max-width: 1200.9999px)
{.text_onas_inte  {color:#fff; font-family:'Rubik'; font-size: calc(0.8vw + 0.8vh + 0.8vmin); letter-spacing: -0.005em; line-height: calc(1.1vw + 1.1vh + 1.1vmin);  } } 

@media screen and (min-width: 1201px) and (max-width: 99999px)
{.text_onas_inte  {color:#fff; font-family:'Rubik'; font-size: calc(0.8vw + 0.7vh + 0.6vmin); letter-spacing: -0.005em; line-height: calc(0.95vw + 0.95vh + 0.85vmin);  } }

@media (prefers-color-scheme: dark) {.text_onas_inte { color:#ecf4ff; }}

/* -------------------------------------------------------------------------- */

/* ФОТО  */  

@media screen and (min-width: 0px) and (max-width: 600px)
{img.ph_inter {width:100%; margin-bottom: 20px; margin-top: 0; border: 0px solid #fff; border-radius: 5%; -webkit-border-radius: 5%; -moz-border-radius: 5%; padding: 4px;}}

@media screen and (min-width: 600.001px) and (max-width: 1000px)
{img.ph_inter {width:45%; float: right; margin-left: 4%; border: 0px solid #fff; border-radius: 5%; -webkit-border-radius: 5%; -moz-border-radius: 5%; padding: 4px;}}

@media screen and (min-width: 1000.001px) and (max-width: 99999px)
{img.ph_inter {width:35%; float: right; margin-left: 4%; border: 0px solid #fff; border-radius: 5%; -webkit-border-radius: 5%; -moz-border-radius: 5%; padding: 4px;}}

img.ph_inter:hover {opacity: 0.95;} 


@media (prefers-color-scheme: dark) {img.ph_inter {  border: 0px;-moz-box-shadow:0px 0px 0px rgb(255,255,255,0.0);
 -webkit-box-shadow:0px 0px 0px rgb(255,255,255,0.0); box-shadow:0px 0px 0px rgb(255,255,255,0.0); }}

/* -------------------------------------------------------------------------- */

@media screen and (min-width: 0px) and (max-width: 600px)
{img.ph_inter2 {width:100%; margin-bottom: 20px; margin-top: 0; border: 0px solid #fff; border-radius: 8%; -webkit-border-radius: 8%; -moz-border-radius: 8%; padding: 4px;}}

@media screen and (min-width: 600.001px) and (max-width: 1000px)
{img.ph_inter2 {width:45%; float: left; margin-right: 4%; border: 0px solid #fff; border-radius: calc(0.7vw + 0.7vh + 0.7vmin); -webkit-border-radius: calc(0.7vw + 0.7vh + 0.7vmin); -moz-border-radius: calc(0.7vw + 0.7vh + 0.7vmin); padding: 4px;}}

@media screen and (min-width: 1000.001px) and (max-width: 99999px)
{img.ph_inter2 {width:35%; float: left; margin-right: 4%; border: 0px solid #fff; border-radius: calc(0.7vw + 0.7vh + 0.7vmin); -webkit-border-radius: calc(0.7vw + 0.7vh + 0.7vmin); -moz-border-radius: calc(0.7vw + 0.7vh + 0.7vmin); padding: 4px;}}

img.ph_inter2:hover {opacity: 0.95;} 


@media (prefers-color-scheme: dark) {img.ph_inter2 {  border: 0px;-moz-box-shadow:0px 0px 0px rgb(255,255,255,0.0);
 -webkit-box-shadow:0px 0px 0px rgb(255,255,255,0.0); box-shadow:0px 0px 0px rgb(255,255,255,0.0); }}

/* -------------------------------------------------------------------------- */


/* --Отступ------------------- */  
.otstup {margin-top: calc(0.85em + 0.85vw);}

/* -------------------------------------------------------------------------- */



/* -------------------------------------------------------------------------- */  
/* --картинки в контактах -- */  
/* -------------------------------------------------------------------------- */  

@media screen and (min-width: 0px) and (max-width: 1920px)
{img.img_link {width: 28px; margin-right: 11px; opacity: 0.9; vertical-align: middle;}}

@media screen and (min-width: 1921px) and (max-width: 99999px)
{img.img_link {width: 3%; vertical-align: middle; margin-right: calc(0.8em + 0.2vw); } }


img.img_link:hover {opacity: 0.6;  }

@media (prefers-color-scheme: dark) {img.img_link {filter: brightness(50%);} }


/* -------------------------------------------------------------------------- */  


@media screen and (min-width: 0px) and (max-width: 800.9999px)
{a.contact_links  {color:#434447; font-family: 'Rubik'; font-size: calc(0.8vw + 0.8vh + 1.2vmin); letter-spacing: -0.005em; line-height: calc(1.7vw + 1.7vh + 1.7vmin);
text-decoration: none; text-transform:none; } } 

@media screen and (min-width: 801px) and (max-width: 1200.9999px)
{a.contact_links  {color:#434447; font-family:'Rubik'; font-size: calc(0.8vw + 0.8vh + 0.8vmin); letter-spacing: -0.005em; line-height: calc(1.2vw + 1.2vh + 1.2vmin);
text-decoration: none; text-transform:none; } } 

@media screen and (min-width: 1201px) and (max-width: 99999px)
{a.contact_links  {color:#434447; font-family:'Rubik'; font-size: calc(0.6vw + 0.6vh + 0.6vmin); letter-spacing: -0.005em; line-height: calc(1.1vw + 1.1vh + 1.1vmin);
text-decoration: none; text-transform:none;} }

a.contact_links:hover {color:#ed583b; padding-bottom: 4px; border-bottom: 1px solid #ed583b;  }

@media (prefers-color-scheme: dark) {a.contact_links  { color:#ffffff; opacity: 0.95; padding-bottom: 4px; border-bottom: 1px solid transparent;  } }

@media (prefers-color-scheme: dark) {a.contact_links:hover  {color:#ffffff; padding-bottom: 4px; border-bottom: 1px solid #ffffff;  } }


/* -------------------------------------------------------------------------- */  
/* -------------------------------------------------------------------------- */  



/* -------------------------------------------------------------------------- */  
/* --Меню в предложениях------------------------------------------------------ */  
/* -------------------------------------------------------------------------- */  

@media screen and (min-width: 0px) and (max-width: 800.9999px)
{a.contact_links2  {color:#fff; font-family: 'Rubik'; font-size: calc(0.95vw + 0.95vh + 0.95vmin); letter-spacing: 0.02em; line-height: calc(1.6vw + 1.6vh + 1.6vmin); text-decoration: none; text-transform:none;  } } 

@media screen and (min-width: 801px) and (max-width: 1200.9999px)
{a.contact_links2  {color:#fff; font-family:'Rubik'; font-size: calc(0.6vw + 0.6vh + 0.6vmin); letter-spacing: 0.02em; line-height: calc(1.1vw + 1.1vh + 1.1vmin);text-decoration: none; text-transform:none;  } } 

@media screen and (min-width: 1201px) and (max-width: 99999px)
{a.contact_links2  {color:#fff; font-family:'Rubik'; font-size: calc(0.6vw + 0.6vh + 0.5vmin); letter-spacing: 0.02em; line-height: calc(1.1vw + 1.1vh + 1.1vmin); text-decoration: none; text-transform:none;  } }

@media screen and (min-width: 0px) and (max-width: 800.9999px)
{a.contact_links2:hover {color:#4a1e00;}}

@media screen and (min-width: 801px) and (max-width: 99999px)
{a.contact_links2:hover {color:#fff;  background: rgba(255,255,255, 0.3); padding: calc(0.3vw + 0.3vh + 0.3vmin); padding-left: 0; border-radius: calc(0.6vw + 0.6vh + 0.6vmin);  }}


/* -------------------------------------------------------------------------- */  
/* -------------------------------------------------------------------------- */  


@media screen and (min-width: 0px) and (max-width: 600px)
{.ppp {width:100%; margin-bottom: 20px; margin-top: 0; border: 0px solid green; }}

@media screen and (min-width: 600.001px) and (max-width: 1000px)
{.ppp {width:45%; float: left; margin-right: 4%; border: 0px solid green; }}

@media screen and (min-width: 1000.001px) and (max-width: 9999999px)
{.ppp {width:35%; float: left; margin-right: 4%; border: 0px solid green;}}

.ppp:hover {opacity: 0.85;} 


/* -------------------------------------------------------------------------- */  
/* ТЕКСТ2  */  
/* -------------------------------------------------------------------------- */  


@media screen and (min-width: 0px) and (max-width: 800.9999px)
{.text_onas_inte2  {color:#3a3a3a; font-family: 'Rubik'; font-size: calc(1.3vw + 1.3vh + 1.2vmin); letter-spacing: -0.005em; line-height: calc(1.7vw + 1.7vh + 1.7vmin);  } } 

@media screen and (min-width: 801px) and (max-width: 1200.9999px)
{.text_onas_inte2  {color:#3a3a3a; font-family:'Rubik'; font-size: calc(0.8vw + 0.8vh + 0.8vmin); letter-spacing: -0.005em; line-height: calc(1.1vw + 1.1vh + 1.1vmin);  } } 

@media screen and (min-width: 1201px) and (max-width: 99999px)
{.text_onas_inte2  {color:#3a3a3a; font-family:'Rubik'; font-size: calc(0.8vw + 0.7vh + 0.6vmin); letter-spacing: -0.005em; line-height: calc(0.95vw + 0.95vh + 0.85vmin);  } }

@media (prefers-color-scheme: dark) {.text_onas_inte2 { color:#ffffff; }}


/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */


/* ВИДЖЕТ НОВОСТЕЙ */ 

.lenta_from_vk_light, .lenta_from_vk_dark {width: 80%; }

@media screen and (min-width: 0px) and (max-width: 1050px)
{.lenta_from_vk_light, .lenta_from_vk_dark {width: 100%; max-width: 800px; }}


/* --------Условия появления для светлой и темной тем--------- */  

@media (prefers-color-scheme: dark) {.lenta_from_vk_light {display: none;} }
.lenta_from_vk_dark {display: none;}
@media (prefers-color-scheme: dark) {.lenta_from_vk_dark  {display: block;} }


/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */  
/* --Фото--------------------------- */  
/* -------------------------------------------------------------------------- */  

/* -------------------------------------------------------------------------- */ 
/* Если экран небольшой */
/* -------------------------------------------------------------------------- */ 

@media screen and (min-width: 0px) and (max-width: 800px)
{.obolochka_mini {border: 0px; padding-left: 1.5%; padding-right: 1.5%;}}

@media screen and (min-width: 800.00001px) and (max-width: 99999px)
{.obolochka_mini {display: none;}}

/* -------------------------------------------------------------------------- */ 
/* Если экран большой */
/* -------------------------------------------------------------------------- */ 

@media screen and (min-width: 0px) and (max-width: 800px)
{.obolochka_big {display: none;}	}

@media screen and (min-width: 800.00001px) and (max-width: 1500px)
{.obolochka_big {border: 0px; padding-left: 0%; padding-right: 0%; }}

@media screen and (min-width: 1500.00001px) and (max-width: 3000px)
{.obolochka_big {border: 0px; padding-left: 7.75%; padding-right: 7.75%; }}

@media screen and (min-width: 3000.00001px) and (max-width: 99999px)
{.obolochka_big {border: 0px; padding-left: 7.2%; padding-right: 7.2%; }}


/* -------------------------------------------------------------------------- */ 

* {box-sizing: border-box;}

.clear {clear: both; float: none; width: 100%;}

@media screen and (min-width: 0px) and (max-width: 800px)
{
.gallery a img {
 
 width: 48%;
  height: auto;
  border: 0px;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  border-radius: 5%;
 -webkit-border-radius:5%;
 -moz-border-radius: 5%;
 overflow: hidden;  
  position: relative;padding: 0px; margin: 0px;
}}

@media screen and (min-width: 800.00001px) and (max-width: 99999px)
{
.gallery a img {
  
 width: 23.3%;
  height: auto;
  border: 0px;
 
 -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  filter: alpha(opacity=80);
 -moz-opacity:1.00; 
 opacity:1.00;
 
 border-radius: 5%;
 -webkit-border-radius:5%;
 -moz-border-radius: 5%;
 overflow: hidden;  
  position: relative; padding: 0px; margin: 0px;
}}

@media (prefers-color-scheme: dark) {.gallery a img { -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow: none;  border: 0px;}}

.gallery a:hover img {opacity:0.85; z-index: 5;  border: 0px; cursor: pointer; }

@media (prefers-color-scheme: dark){.gallery a:hover img {border: 0px;padding: 0px;}}
.gallery a.big img {width: 40%;}
.align-center {text-align: center;}