:root {
	--content-normal-width: min(1400px,calc(92vw)); /*calc(0.9vw);*/
	--content-max-width: 1400px;
	--content-min-width: 350;	
	
	--font-italic: 'Rubik_italic';

	--shadow-box: 0px 0px 15px #E5E5E5;

	--color-text: black;
	--color-text-blond: #AAAAAA;
	--color-heads: black;
	--color-link:  black;
	--color-link-hover:  #822FA5;
	--color-slide-text:  #C2C7CC;
	
	--FixMenu-background-color: #eee;
	--colorLine-background-color: #5FC8E6; /* #FA6A23;*/
	--DarkButton-background-color : #554BFF;
	--white-background-color : #fff;
	--light-background-color: #FA6A23;

	--colorLine-head-color: #FCD12A;
	--colorLine-text-color: #fff;
	--light-text-color: white;
	--light-head-color: #FCD12A;

	
	--bold-color: black;
	--bold-size: 1.1em;
	
	--font-family-head: 'Rubik_bold';
	--font-family-condensed: 'OpenSans_Condensed_Light';
	--font-family-condensed_bold: 'OpenSans_Condensed';

	--border-normal: 1px solid;
	--borders-color: #5FC8E6;
	--borders-color-dark: #480D62;

    --debug-border: 0px dotted blue;	
}

/* ---------------------------------------- Шрифты Google----------------------------  */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Regular.ttf');
}
@font-face {
  font-family: 'Rubik_italic';
  src: url('../fonts/Rubik-Italic.ttf');
}
@font-face {
  font-family: 'Rubik_bold';
  src: url('../fonts/Rubik-Bold.ttf');
}
@font-face {
  font-family: 'OpenSans_Condensed_Light';
  src: url('../fonts/OpenSans_Condensed-Light.ttf');
}
@font-face {
  font-family: 'OpenSans_Condensed';
  src: url('../fonts/OpenSans_Condensed-Regular.ttf');
}
/* ------------------------------------- Основные стили ------------------------------ */
body {
	font-family: Rubik, Tahoma, Verdana;
	/* --------- base font size --------- */
	@media screen and (min-device-width:  420px) { font-size: 28px };
	@media screen and (min-device-width:  600px) { font-size: 25px };
	@media screen and (min-device-width:  992px) { font-size: 21px };
	@media screen and (min-device-width: 1200px) { font-size: 17px };
	/* --------- end base font size --------- */
	width: 98%;
	margin: 0px auto 0px auto;
	color: var(--color-text);
	border: 0px solid gray; 
	border-radius: 5px;
	background: linear-gradient(180deg, #fff, #eee, #fff, #eee); 
	background-size: 400% 400%;
	animation: gradient 90s ease infinite;
}
@keyframes gradient {
	0% { background-position: 50% 0%; }
	50% { background-position: 50% 100%;}
	100% { background-position: 50% 0%;}
}
div.main{	/* окно, в котором находится весь контент */
	width: var(--content-normal-width);
	min-width: var(--content-min-width);
	max-width: var(--content-max-width);
	margin: 0px auto 0px auto;
	/* min-height:98%; */
	border-radius: 5px;
	border: var(--debug-border);
}
.center {
	text-align: center; 
	align-items: center;
	text-indent: 0em;
	justify-content: center;
}
.right{
	text-align: right; 
	align-items: right;
	justify-content: right;
	
}
.downborder {
	border-bottom:  var(--border-normal) var(--borders-color);
}

h1, h2, h3, h4 {
	font-family: var(--font-family-head);
	color: var(--color-heads);
	border: var(--debug-border);	
}
.slide-text {
	color: var(--color-slide-text);
}
table, tr, td {
	font-size: 1em;
}
p {
	margin: 7px 2px 2px 2px;
	padding: 0px 7px 0px 7px;
	font-size: 1em;
	line-height: 1.4em;
	text-align: justify; 
	text-indent: 2em;
}
.left_text {
	text-align: left; 
}
p.headline{
	margin-top: 1rem;
	font-size: 1rem;
	font-size: var(--bold-size);
	color: var(--bold-color);
	text-align: justify; 
	font-weight: bold;
}
p.center {
	text-align: center; 
	text-indent: 0em;
}
a {
	color: var(--color-link);
	text-decoration: none;
}
a:hover {
	text-shadow: #A1A1A1 2px 0 15px; 	
	color: var(--color-link-hover);
}
a:active {text-shadow: #444444 2px 0 15px;}

li {margin-bottom: 0.2em;}
img {margin: 10px;}
img.photo {
	border-radius: 20px;
	box-shadow: #fff 0px 0px 15px;
} 
/* ------------------------ модификаторы ---------------------- */
.notindent {text-indent: 0em;}
.nomargin {margin: 0px; padding: 0px;}
.toleft {margin-right: auto; margin-left: 0px;}
.toright {margin-left: auto; margin-right: 0px;}

/* -------------------------------- Блоки для сокрытия в мобильной и PC версии --------------------------------  */
.mobile_hidden { @media screen and (max-width: 980px) { display: none; }; }
.pc_hidden {     @media screen and (min-width: 981px) { display: none; }; }


/* -------------------------------- Верхнее меню --------------------------------  */
.menu {
	cursor: hand;
}
div.up_menu{
	display: flex;
	width: 98%;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 5px;
	margin: 0px auto 10px auto;
	border-radius: 5px;	
	border: var(--debug-border);
}
div.logo {
	color: var(--color-text-blond);
	background: url('../images/logo.png');
	background: url('../images/logo_animation.gif');
	background-size: 55px;
	background-repeat: no-repeat;
	padding: 3px 3px 3px 60px;
	height: 55px;
	min-width: 160px;
	border: var(--debug-border);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	box-shadow: var(--shadow-box);	
	
}
div.up_menu_items{
	height: 45px;
	margin: 0px auto 0px auto;
	padding: 2px 3% 2px 3%;
	width: 57%;
	display: flex;
	flex-wrap: wrap;
	border: var(--debug-border);	
	@media screen  and (max-width: 980px) {	display: none; };	/*			<-------- mobile / PC ------------- */	
}
div.up_menu_item {
	margin: 4px auto 4px auto;
	font-family: var(--font-family-condensed);	
	font-size: 1.3rem;
	border: var(--debug-border);	
	font-weight: condensed;
	cursor: hand;
}
div.current_item {
	font-family: var(--font-family-condensed_bold);
	font-weight: bold;
	
}
div.up_menu_rigth{
	margin: 4px 10px 4px auto;
	border: var(--debug-border);	
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
}
div.fix_menu {
	display: none;	
	flex-wrap: wrap;
	position: fixed;
	background-color: var(--FixMenu-background-color);
	top: 0; left:0;
	width: 100%;
	align-items: center;
	justify-content: center;
    opacity: 0;
    animation: ani 0.4s forwards;
	height: 2.5rem;
	z-index: 3;
	
}
@keyframes ani {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
div.fix {
	height: 2rem;
	width: 70%;
}
div.fix_menu_PC {
	width: 92%;
	display: flex;
	flex-wrap: wrap;
	align-items: top;
	justify-content: center;
	flex-direction: row;
	@media screen  and (max-width: 980px) {	display: none; };	/*			<-------- mobile / PC ------------- */

}
div.fix_menu_mobile {
	width: 90%;
	min-width: var(--content-min-width);
	padding: 0px;
	margin: 0px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	flex-direction: row;
}

div.mobile_menu {
	display: none;	
	position: fixed;
	width: max(10%, 300px);
	top: 50%;
	left:50%;
	transform:translate(-50%, -50%);	
	z-index: 200;
	background-color: var(--FixMenu-background-color); 
	padding: 20px;
	border: var(--border-normal) var(--borders-color);
	border-radius: 17px;
	font-size: 1.3rem;
	line-height: 1.8em;
	flex-wrap: wrap;
	flex-direction: column;
}
div.mobile_menu_item {
	font-size: 1.6rem;
	line-height: 1.8em;
	
}

div.global_opacity{
	width: 100%;
	height: 100%;
	background-color: #767C73;
	opacity: 0.85;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}


/* -------------------------------------- контент ---------------------------------------- */
img.oval {
	margin: 5px auto 5px auto;
	border-radius:45px;
	box-shadow: inset 0px 0px 15px #fff;
	
}
div.color_line {
	width: 100%;
	margin: 20px 5px 20px 5px;
	background-color: var(--colorLine-background-color);
	color: var(--colorLine-text-color);
	border: var(--debug-border);	
	border-radius:15px;	
	display: flex;
	flex-wrap: wrap;
}
div.color_line_content {
	width: var(--content-normal-width);
	width: 98%;
	min-width: var(--content-min-width);
	max-width: var(--content-max-width);
	margin: 0px auto 0px auto;
	padding: 20px 10px 20px 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: bottom;
}
div.light_div {
	/*width: 98%;*/
	margin: 20px 5px 20px 5px;
	padding: 15px; 
	display: flex;
	flex-wrap: wrap;
	color: var(--light-text-color);
	background-color: var(--light-background-color);
	border: var(--debug-border);	
	border-radius: 10px;
}

div.color_line.h1 {
	color: var(--colorLine-head-color);
	border: var(--debug-border);	
}
div.col_text {
	width: 45%;
	min-width: var(--content-min-width);
	border: var(--debug-border);	
}
div.div_right_bok {
	width: 98%;
	min-width: var(--content-min-width);
	border: var(--debug-border);	
	display: flex;
	flex-wrap: wrap;
	border: var(--debug-border);	
}

div.twocols {
	width: 65%;
	min-width: 320px;
	padding: 5px;
	background-color: var(--white-background-color);
	border: var(--border-normal) var(--borders-color);
	border-radius: 15px;
	text-align: left;
}
div.split_div {
	width: 65%;
	min-width: var(--content-min-width);
	border: var(--debug-border);	
	border-radius: 20px;
	margin: 20px 0px 20px 0px;
	padding: 0px;
	background-color: var(--colorLine-background-color);
	color: var(--colorLine-text-color);
	display: flex;
	flex-wrap: wrap;
}
div.right_bok {
	width:15%;
	margin: auto auto auto 0px;
	padding: 20px 5px 20px 10px;
	background-color: var(--light-background-color);
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	font-family: var(--font-italic);
	font-size: 0.9rem;
	line-height: 1.6rem;
	color: var(--colorLine-text-color);
	border: var(--debug-border);	
}
div.third_of {
	width: 30%;
	min-width: 160px;
	height: 12em;
	margin: 15px auto 15px auto;
	padding: 5px;
	background-color: var(--white-background-color);
	border: var(--border-normal) var(--borders-color);
	border-radius: 15px;
}
div.third_of_noheight {
	width: 30%;
	min-width: 160px;
	margin: 15px auto auto auto;
	padding: 5px;
	background-color: var(--white-background-color);
	border: var(--border-normal) var(--borders-color);
	border-radius: 15px;
}
div.doubleheight {
	height: 22em;
}
div.halfheight {
	height: 14em;
}
div.selfheight {
	height: 6em;
}
div.miniheight {
	height: 5em;
}



/* Карусель изображений */

@keyframes scroll {
	0% { transform: translateX(0); }
	50% { transform: translateX(calc(-250px * 4))}
	100% { transform: translateX(0); }
	
}

.slider_left {
	/*background: white;*/
	box-shadow: 90 0px 0px 50px gray;
	height: 100px;
	border-radius: 10px;
	overflow:hidden;
	position: relative;
	width: 98%;
	
	&::before,
	&::after {
		/*background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);*/
		content: "";
		height: 100px;
		position: absolute;
		width: 160px;
		z-index: 2;
	}
	&::after {
		right: 0;
		top: 0;
		transform: rotateZ(180deg);
	}
	&::before {
		left: 0;
		top: 0;
	}
	.slide-track {
		animation: scroll 50s linear infinite;
		display: flex;
		width: calc(160px * 14);
		text-align: center;
		align-items: center;
	}
	
	.slide {
		height: 80px;
		margin: auto 10px auto 10px;
		width: 270px;
		font-family: var(--font-family-head);
		color: #C2C7CC;
		font-size: 3.2rem;
		text-align: center;
		align-items: center;
	}
}
/* ------------------------------- Увеличение картинок -------------------------------- */
div.gallery_third {
	width: 30%;
	min-width: 160px;
	float: left; 
	margin: 20px;
	padding: 5px;
	background-color: var(--white-background-color);
	border: var(--border-normal) var(--borders-color);
	border-radius: 15px;
}
img.small {
	max-height: 140px;
	max-width: 120px;
	margin: 6px;
}
/* с увеличением */
img.preview {
	max-height: 140px;
	max-width: 140px;
	margin: 6px;
}
img.preview:hover {
	box-shadow: #A1A1A1 2px 0 15px; 	
	max-height: 144px;
	max-width: 144px;
	margin: 4px;
}
img.preview:active {
	max-height: 800px;
	max-width: 800px;
	z-index:100;
	position: fixed;
	top: 5%;
	left: 10%;
	border: 15px solid white;
	border-radius: 10px;
}

/* ------------------------------- управление -------------------------------- */
input.text{
	margin: 2px 10px 2px 10px;
	line-height: 1.2rem;
	min-width: 200px;
	border-radius:5px;
	border: 1px solid var(--borders-color-dark);
	font-size: 1.1rem;
	padding: 3px;
	padding-left: 10px;
}
input.submit {
	margin: 2px 10px 2px 10px;
	line-height: 1.2rem;
	min-width: 150px;
	border: 1px solid var(--borders-color-dark);
	border-radius: 10px;
	background-color: var(--light-background-color);
	font-family: var(--font-family-condensed_bold);	
	font-size: 1.1rem;
	cursor: hand;
}
div.button_dark {
	color: white;
	text-align: center;
	min-width: 200px;
	height: 1.7rem;
	width: 20%;
	margin: 5px auto 5px auto;
	padding: 5px 12px 5px 12px;
	border: 1px solid var(--borders-color-dark);
	border-radius: 10px;
	background-color: var(--DarkButton-background-color);
	font-family: var(--font-family-condensed_bold);	
	font-size: 1.1rem;
	cursor: hand;
}
div.button_dark:hover, div.button_light:hover {
	background-color: #fff;
	text-shadow: #A1A1A1 2px 0 15px; 	
	color: black;
	font-weight:bold;
}
div.button_dark:active, div.button_light:active {text-shadow: #444444 2px 0 15px;}
div.button_light {
	color: white;
	text-align: center;
	min-width: 200px;
	height: 1.7rem;
	width: 20%;
	margin: 5px auto 5px auto;
	padding: 5px 12px 5px 12px;
	border: 1px solid var(--borders-color-dark);
	border-radius: 10px;
	background-color: var(--light-background-color);
	font-family: var(--font-family-condensed_bold);	
	font-size: 1.1rem;
	cursor: hand;
}

/* ---------------------- нижняя часть ---------------------- */
div.footer {
	width: 98%;
	background-color: #D9DCDF;
	margin-top: 40px;
	padding: 10px 5px 5px 5px;
	border-top: var(--border-normal) var(--borders-color);		
}