/* CSS Document */

:root {

	--color1: rgba(0, 150, 90, 1);

	--color1-1: rgba(0, 150, 90, 0.1);

	--color1-2: rgba(0, 150, 90, 0.2);

	--color1-3: rgba(0, 150, 90, 0.3);

	--color1-5: rgba(0, 150, 90, 0.5);

	--color1-7: rgba(0, 150, 90, 0.7);



	--color2: rgba(0, 77, 78, 1);

	--color2-3: rgba(0, 77, 78, 0.3);

	--color2-5: rgba(0, 77, 78, 0.5);

	--color2-7: rgba(0, 77, 78, 0.7);



	--color3: rgba(0, 45, 46, 1); /* black */

	--color3-3: rgba(0, 45, 46, 0.3);

	

	--color4: rgba(26, 211, 9, 1); /* light */

	--color4-1: rgba(26, 211, 9, 0.1);

	

	--color-gray1: rgba(214, 218, 221, 1);

	--color-gray1-0: rgba(214, 218, 221, 0);

	--color-gray1-5: rgba(214, 218, 221, 0.5);

	--color-gray1-7: rgba(214, 218, 221, 0.7);

	

	--color-gray2: rgba(177, 181, 190, 1.0);

	--color-gray2-5: rgba(177, 181, 190,0.5);

}





::selection {

	color: #fff;

	background-color: var(--color1-5);

}



::-moz-selection {

	color: #fff;

	background-color: var(--color1-5);

}





@font-face {

  font-family: "font_light";

  font-style: normal;

  font-weight: normal;

  src: url("/files/font/font_roboto_thin.ttf") format("truetype");

}

@font-face {

  font-family: "font_regular";

  font-style: normal;

  font-weight: normal;

  src: url("/files/font/font_roboto_light.ttf") format("truetype");

}

@font-face {

  font-family: "font_medium";

  font-style: normal;

  font-weight: normal;

  src: url("/files/font/font_roboto_regular.ttf") format("truetype");

}

@font-face {

  font-family: "font_bold";

  font-style: normal;

  font-weight: normal;

  src: url("/files/font/font_roboto_medium.ttf") format("truetype");

}

@font-face {

  font-family: "font_header";

  font-style: normal;

  font-weight: normal;

  src: url("/files/font/AvantGardeGothicC-Demi.otf");

}





/* анимации */



@keyframes fade_out {

	0% {

		opacity: 1;

		left: 0px;

	}

	99% {

		opacity: 0;

		left: 0px;

	}

	100% {

		opacity: 0;

		left: -999px;

	}

}









/* теги */



html {

	font-size: 14pt;

}



body {

	font-family: 'font_regular', Verdana, Tahoma, Geneva, sans-serif;

	background-color: #fff;

	color: #000;

	margin: 0px;

	padding: 0px;

	line-height: 1.5;

}



header {

	padding: 2em;

	display: flex;

	justify-content: space-between;

	align-items: center;

	background: url(/files/site/pattern.png), linear-gradient(90deg, var(--color-gray1-5), var(--color-gray2-5));

	background-repeat: repeat, repeat;

	background-size: 100px, auto;

	font-size: 100%;

	box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.5);

	position: relative;

	z-index: 2;

}



main {

	height: calc(100vh - 7em);

	max-height: calc(100vh - 7em);

	display: flex;

	position: relative;

	z-index: 1;

	flex-wrap: nowrap;

}





footer {

	margin: 5em -1em 0 -1em;

	background-color: var(--color-gray1);

}



a {

	font-size: inherit;

	color: var(--color1);

	font-family: inherit;

	font-style: normal;

	text-decoration: none;

	transition: 200ms;

}

a:hover {

	text-decoration: none;

	color: var(--color2);

}



a.dashed {

	text-decoration: underline;

	text-decoration-color: var(--color1);

	text-decoration-style: dotted;

}



a.admin {

	background-color: rgba(128,128,128,.2);

	border-radius: 2px;

	color: rgba(0,0,0,.4);

	font-size: 80%;

	padding: 2px;

	position: absolute;

	right: 5px;

	z-index: 1000;

}



img {

	max-width: 100%;

	max-height: 100%;

}



img.inline {

	height: 1em;

	vertical-align: middle;

}



img.inline2 {

	height: 2em;

	vertical-align: middle;

}



h1 {

	font-family: "font_header", "font_bold";

	font-weight: normal;

	margin-bottom: 0.5em;

	/*color: var(--color1);*/

}

h2 {

	font-family: "font_header", "font_bold";

	font-weight: normal;

	margin-bottom: 0.5em;

	/*color: var(--color1);*/

}

h3 {

	font-family: "font_header", "font_bold";

	font-weight: normal;

	margin-bottom: 0.5em;

	/*color: var(--color1);*/

}



.color ul, ul.color {

	list-style: none;

	padding: 0.5em 0 0 calc(1.5em + 12px);

}

.color ul li::before, ul.color li::before {

	content: url(/files/site/li_marker.png);

	margin-left: calc(0px - 1em - 12px);

	margin-right: 1em;

}

.color ul li, ul.color li {

	margin-bottom: 0.5em;

}







/* form */



input, select, textarea, a.button {

	font-size: inherit;

	border: 1px solid transparent;

	background-color: var(--color-gray1-5);

	padding: 1em 1em;

	color: #000;

	border-radius: 4px;

	box-sizing: border-box;

}



input:focus, select:focus, textarea:focus {

	border: 1px solid var(--color-gray2);

	background-color: #fff;

}



input[type="number"] {

	width: 100px;

}



input[type="image"] {

	border: 0;

	background: transparent;

}



input[type="file"] {

	padding: 0.5em;

}



input[type="submit"], a.button {

	font-size: inherit;

	cursor: pointer;	

	color: #fff !important;

	text-align: center;

	border: 0px solid var(--color1);

	border-radius: 4px;

	/*-webkit-appearance: button;*/

	background-color: var(--color1);

	padding: 1em 2em;

	transition: 200ms;

	display: inline-block;

	margin-bottom: 1em;

	font-family: "font_header";

	font-weight: normal;



}

input[type="submit"]:hover, a.button:hover {

	color: #fff !important;

	background-color: var(--color4);

}

a.button2 {
	color: var(--color1) !important;
	background-color: #fff;
	border: 1px solid var(--color1-5);
}
a.button2:hover {
	color: var(--color1) !important;
	background-color: var(--color1-1);
}


input[type="submit"]:disabled {

	background-color: #ccc;

	background: linear-gradient(to bottom, #ccc, #bbb);

	/*box-shadow: 0px 0px 0px rgba(255,80,80,.5);*/

}

input:hover, select:hover, textarea:hover {

	/*background-color: var(--color4-1);*/

}

input:not([type="submit"]):focus, select:focus, textarea:focus {

	background-color: #fff;

	box-shadow: 0px 0px 20px 0px var(--color1-5);

}



input[readonly] {

	filter: grayscale(50%);

	opacity: 0.5;

}



label {

	cursor: pointer;

	padding: 0.5em 1em;

	line-height: 3em;

}





input[type="radio"] {

	/*display: none;*/

	opacity: 0;

	position: absolute;

}



input[type="radio"] + label {

	/*width: 100%;*/

	display: inline-block;

	cursor: pointer;

	position: relative;

    line-height: 1.1em;

	padding: 0em 0em 0em 2em;

}



input[type="radio"] + label::before {

	content: "";

	display: block;

	

	position: absolute;

	left: 0;

	top: 0;



	width: 1.2em;

	height: 1.2em;

	border-radius: 50%;

	font-size: 1em;

	font-weight: bold;

	color: #fff;

	text-align: center;

    line-height: 1em;



	margin-right: 10px;

	background-color: var(--color-gray1-5);

	box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, .2);

	vertical-align: middle;

}



input[type="radio"]:checked + label::before {

	content: "\2713";

	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);

	background-color: var(--color1);

}



input[type="radio"]:hover + label::before {

	box-shadow: inset 0 0 16px 0 rgba(0, 0, 0, .3);

}







input[type="checkbox"] {

	display: none;

}



input[type="checkbox"] + label {

	/*width: 100%;*/

	display: inline-block;

	cursor: pointer;

	position: relative;

    line-height: 1.1em;

	padding: 0em 0em 0em 2em;

}



input[type="checkbox"] + label::before {

	content: "";

	display: block;

	

	position: absolute;

	left: 0;

	top: 0;



	width: 1.2em;

	height: 1.2em;

	font-size: 1em;

	font-weight: bold;

	color: #fff;

	text-align: center;

    line-height: 1em;



	margin-right: 10px;

	background-color: var(--color-gray1);

	box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, .2);

	vertical-align: middle;

}



input[type="checkbox"]:checked + label::before {

	content: "\2713";

	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);

	background-color: var(--color1);

}



input[type="checkbox"]:hover + label::before {

	box-shadow: inset 0 0 16px 0 rgba(0, 0, 0, .3);

}









/* table */



table {

	font-size: inherit;

	font-family: inherit;

	color: inherit;

	border: 0px;

	border-spacing: 0px;

}



table.list {

	padding: 2px 4px;

	margin: auto;

}



table.border td {

	border: 1px solid #888;

}



table.rows td {

	border-bottom: 1px solid #bbb;

}



tr {

	font-size: inherit;

	font-family: inherit;

	color: inherit;

	border: 0px;

}



td {

	font-size: inherit;

	font-family: inherit;

	color: inherit;

	border: 0px;

	padding: 0px;

}



.list0 td {

	padding: 0px 0px;

}



.list td, .list th {

	padding: 4px 4px;

}



form td {

	padding: 4px 4px;

}



th {

	font-size: smaller;

	font-family: inherit;

	color: inherit;

	border: 0px;

	background-color: var(--color-gray1);

	padding: 4px 2px;

	border-right: 1px solid #fff;

}



table.highlight tr:hover,

tr.highlight:hover {

	background-color:  var(--color-gray1);

}

















/*  */



.admin_stat {

	opacity: 0;

	left: -999px;

	position: fixed;

	font-size: 70%;

	top: 200px;

	text-align: left;

	color: #000;

	z-index: 2000;

	padding: 10px;

	background-color: rgba(128,128,128,.2);





	animation-name: fade_out;

	animation-duration: 4s;

	animation-timing-function: ease-in;

	animation-delay: 0s;

	animation-iteration-count: 1;

	animation-direction: normal;

	animation-fill-mode: forwards;

}



.login {

	position: absolute;

	top: 1em;

	right: 1em;

	z-index: 9999;

	

	text-align: right;

	color: #000;

	font-size: 80%;

	padding: 0.5em 0em;

}







.white_text {

	color: #fff;

}



.white_text h1,

.white_text h2,

.white_text h3 {

	color: #fff;

}

.white_text a {

	color: var(--color4);

}

.white_text a:hover {

	color: var(--color4);

}



.gray {

	opacity: 0.5;

}



.color1 {

	color: var(--color1);

}



.color2 {

	color: var(--color2);

}



.light {

	font-family: "font_light";

}



.medium {

	font-family: "font_medium";

}



.huge {

	font-size: 150%;

}



.sm {

	font-size: 80%;

}



.img_bg {

	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

}



.bg_color1 {

	background-color: var(--color1);

}



.bg_color2 {

	background-color: var(--color2);

}



.bg_color3 {

	background-color: var(--color3);

}



.bg_color4 {

	background-color: var(--color4);

}



.bg_tint {

	background-color: rgba(0, 0, 0, 0.5);

	background-blend-mode: multiply;

}



.bg_light {

	background-color: var(--color1-2);

}



.bg_gray1 {

	background-color: var(--color-gray1);

}



.black {

	background-color: var(--color3);

	color: #fff;

}



.black a {

	color: var(--color4);

}



.mh100 { max-height: 100vh; }

.mh80 { max-height: 80vh; }
.mh50 { max-height: 50vh; }



.hidden {

	display: none !important;

}





.button_more {

	display: inline-block;

	width: auto;

	padding: 1em 2em;

	background-color: var(--color1);

	color: #fff;

	text-decoration: none;

	text-align: center;

	margin: 1em;

}



.button_more:hover {

	color: #000;

	text-decoration: none;

	background-color: rgba(0, 0, 0, 0.2);

}



.round {

	border-radius: 50%;

}



.font_header {

	font-family: "font_header";

	font-weight: normal;

}

progress {
	background-color: var(--color1-3);
	border: 1px solid var(--color1-5);
}

progress {
}
progress::-webkit-progress-bar,
progress::-webkit-progress-value,
progress::-moz-progress-bar {
	background-color: var(--color1);
}









/* modal */



.modal {

	display: none;

	position: fixed;

	top: 0px;

	bottom: 0px;

	right: 0px;

	left: 0px;

	z-index: 9999;

	padding-top: 100px;

}



.modal_bg {

	position: fixed;

	top: 0px;

	bottom: 0px;

	right: 0px;

	left: 0px;

	background-color: rgba(0,0,0,0.7);

	overflow: auto;

}



.modal_card {

    position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	flex-wrap: wrap;

	width: 100%;

	height: 100%;

}



.modal_container {

    position: relative;

}



.close_modal {

	position: absolute;

	top: 0.2em;

	right: 0.2em;

	cursor: pointer;

	opacity: 0.5;

}

.close_modal:hover {

	opacity: 1;

}

.close_modal img {

	width: 2em;

	height: 2em;

	display: block;

}





/* slider */





.slick-dots {

	list-style: none;

	display: flex;

	align-items: flex-start;

	justify-content: center;

	flex-wrap: wrap;

	opacity: 1;

	position: relative;

	padding: 0 !important;

}



.slick-dots li::before {

	content: '' !important;

}





.slick-dots li {

	display: block;

	width: 1em;

	height: 0.3em;

	margin: 0.3em;

	background-color: var(--color1-3);

	border-radius: 2px;

	border: 0px solid var(--color1);

	cursor: pointer;

}



.slick-dots li.slick-active {

	background-color: var(--color1);

}



.slick-dots li:hover {

	background-color: var(--color1-5);

}



.slick-dots button {

	display: none;

}



.slick-slide {

	outline: none;

}



.slick-prev {

	position: absolute;

	left: 0;

	top: -95px;

	padding: 0em;

	cursor: pointer;

	z-index: 100;

}



.slick-next {

	position: absolute;

	right: 0;

	top: -95px;

	padding: 0em;

	cursor: pointer;

	z-index: 100;

}



.slick-prev img,

.slick-next img {

	height: 193px;

}



.pres-prev {

	position: absolute;

	left: 0;

	top: 0;

	bottom: 0;

	padding: 0;

	cursor: pointer;

	z-index: 100;

	background-color: rgba(0, 0, 0, 0.2);

	display: flex;

	align-items: center;

	opacity: 0.15;

	transition: 100ms;

}



.pres-next {

	position: absolute;

	right: 0;

	top: 0;

	bottom: 0;

	padding: 0;

	cursor: pointer;

	z-index: 100;

	background-color: rgba(0, 0, 0, 0.2);

	display: flex;

	align-items: center;

	opacity: 0.15;

	transition: 100ms;

}



.pres-prev:hover,

.pres-next:hover {

	opacity: 1;

}



.pres-prev img,

.pres-next img {

	height: 50px;

}









/* сайт */



.menu_top {

	position: absolute;

	top: 0px;

	width: 100%;

	padding: 1rem 0rem;

	background-color: var(--color3-3);

	color: #fff;

	z-index: 9998;

	box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.3);

	margin-bottom: 1rem;

    font-size: 150%;

}

.menu_top a.menu {

	color: #fff;

	padding: 0.5rem 0.5rem;

	border-bottom: 2px solid transparent;

}

.menu_top a.menu:hover {

	color: #fff;

	border-bottom: 2px solid var(--color1);

}



.menu_side {

	background-image: url(/files/site/bg_menu.jpg);

	background-position: bottom center;

	background-size: cover;

	background-repeat: no-repeat;

	overflow-y: auto;

	overflow-x: hidden;

	height: 100%;

	width: auto;

}



.menu_side a.menu {

	display: block;

	padding: 0.3em 2em 0.3em 1em;

	color: var(--color1);

	font-family: "font_header";

	font-weight: normal;

	font-size: 120%;

	border-right: 5px solid transparent;

	width: 15em;

}



.menu_side a.menu:hover {

	background-color: var(--color1-1);

	border-right: 5px solid var(--color1-3);

}



.menu_selected {

	background-color: var(--color1);

	color: #fff !important;

	border-right: 5px solid var(--color2-5) !important;

}





.menu_mobile {

	display: none;

	position: fixed;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background-color: #fff;

	padding: 0;

	margin: 0;

	z-index: 100000;
	overflow-y: auto;

}



.menu_mobile li {

	display: block;

}



.menu_mobile a {

	display: block;

	padding: 1em 1em 1em 1em;

	color: #000;

}



.menu_mobile_links {

	position: absolute;

	top: 2em;

	right: 1em;

	width: auto;

}







.tab {

	padding: 0.1em 0.3em;

	border-radius: 0px;

	border-bottom: 2px solid var(--color1);

}

.tab:hover {

	background-color: var(--color1-5);

	color: #fff !important;

	border-radius: 4px;

}

.tab_selected {

	padding: 0.1em 0.3em;

	border-radius: 4px;

	background-color: var(--color1);



}

.tab_selected:hover {

	background-color: var(--color1);

	color: #fff !important;

}





a .card {

	color: #000;

}

a .card h3 {

	color: var(--color1);

}



.white_text a .card {

	color: #fff;

}



.required {

	color: #f00;

}





.news_img_block {

	display: flex;

	align-items: flex-start;

	justify-content: flex-start;

	flex-wrap: wrap;

}



.news_img_block img {

	max-height: 200px;

	margin-bottom: 1em;

	margin-right: 1em;

}





.anketa .card {

	padding: 1em 1em 1em 1em;

	margin-top: 1em;

	margin-bottom: 1em;

}



.anketa {

	background-color: var(--color1-1);

}

.anketa_question {

	/*font-weight: bold;*/

	font-family: 'font_header';

	font-size: 150%;

}

.anketa input,

.anketa textarea,

.anketa select {

	border-color: var(--color1-3);

	margin-bottom: 0.5em;

}



.anketa_question_img {

	/*display: block;*/

	max-width: 100%;

	max-height: 100px;
    margin-left: 0.5em;
}



video {

	max-width: 100%;

}



.video iframe {

	display: block;

	margin: 1rem auto;

	max-width: 100%;

}



a.auth {

	display: inline-block;

	padding: 0.5em 1em;

	border-bottom: 1px solid var(--color-gray2);

	color: var(--color-gray2);

	font-weight: bold;

}

a.auth_active, a.auth:hover {

	color: var(--color1);

	border-bottom: 4px solid var(--color1);

}



.login_1 {

	border-bottom-left-radius: 0;

	border-bottom-right-radius: 0;

}

.login_2 {

	border-top-left-radius: 0;

	border-top-right-radius: 0;

}



.logo {

	display: block;

	height: 3em;

}



.content {

	padding: 1.5em 1em 0 1em;

	width: 100%;

	overflow-y: auto;

}



.pr_img {

	height: 6em;

	margin-bottom: 1em;

}



.card_pattern {

	position: relative;

	height: 100%;

	background: url(/files/site/pattern.png), linear-gradient(120deg, var(--color-gray1-5), var(--color-gray2-5));

	background-repeat: repeat, repeat;

	background-size: 100px, auto;

	font-size: 100%;

	z-index: 1;

	overflow: hidden;

	clip-path: polygon(4.33em 0, 100% 0, 100% 100%, 0 100%, 0 2.5em);

	/*clip-path: polygon(4.33em 0, 100% 0, 100% calc(100% - 2.5em), calc(100% - 4.33em) 100%, 0 100%, 0 2.5em);*/

	/*clip-path: polygon(

		4.33em 0,

		calc(100% - 4.33em) 0,

		100% 2.5em,

		100% calc(100% - 2.5em),

		calc(100% - 4.33em) 100%,

		4.33em 100%,

		0 calc(100% - 2.5em),

		0 2.5em

	);*/

}

.card_pattern2 {
	background: url(/files/site/pattern.png), linear-gradient(120deg, var(--color-gray1-5), var(--color-gray2-5));
	background-repeat: repeat, repeat;
	background-size: 100px, auto;
}



.img_hex {

	clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);

}



.img_square {

	aspect-ratio: 1 / 1;

	position: relative;

	display: block;

	width: 100%;

	object-fit: cover;

}



.img_square_contain {

	aspect-ratio: 1 / 1;

	position: relative;

	display: block;

	width: 100%;

	object-fit: contain;

}



.fame_img {

	clip-path: polygon(4.33em 0, 100% 0, 100% calc(100% - 2.5em), calc(100% - 4.33em) 100%, 0 100%, 0 2.5em);

	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;

}



.invert {

	background-color: var(--color1);

	color: #fff;

	border-radius: 4px;

	padding: 4px 8px;

}



.education_item {

	padding-top: 0.5em;

	padding-bottom: 0.5em;

	/*border-bottom: 1px solid var(--color1-3);*/

}



.education_item:hover {

	/*background-color: var(--color1-1);*/

}



.admin_hover {

	display: none;

}



.education_item:hover .admin_hover {

	display: inline;

}







.student_img {

	height: 1.5em;

}



div.anketa_order_block {

	padding: 1em 0.5em;

	background-color: var(--color-gray1-5);

	border: 1px solid var(--color-gray2-5);

	margin-bottom: 0.5em;

}



#questions .card {

	display: none;

}



#questions .card_visible {

	display: block;

}



#student_login {

	border-radius: 4px 4px 0 0;

}

#student_pw {

	border-radius: 0 0 4px 4px;

}



.doc_frame {

	min-width: calc(100vw - 1rem);

	min-height: 80vh;

}



a.auth {

	display: inline-block;

	padding: 0.5em 1em;

	border-bottom: 1px solid var(--color-gray2);

	color: var(--color-gray2);

	font-weight: bold;

}

a.auth_active, a.auth:hover {

	color: var(--color1);

	border-bottom: 4px solid var(--color1);

}



.module_submenu {

	

}



.module_submenu {

	display: block;

	background-color: var(--color1-1);

	color: #000;

	font-weight: bold;

	padding: 0.5em 1em;

	margin-bottom: 3px;

	border-right: 5px solid transparent;

}



.module_submenu:hover {

	background-color: var(--color1-2);

	color: #000;

}



.module_submenu_selected {

	background-color: var(--color1-7);

	color: #fff;

	border-right-color: var(--color1);

}





ol li {

	margin-bottom: 0.5em;

}

.quiz_img {
	object-fit: contain;
	width: 100%;
	aspect-ratio: 1 / 1;
}


.cke_notifications_area {
	display: none;
}







/* xxl */

@media screen {

	.video iframe {

		width:  900px;

		height:  506px;

	}

}



@media screen and (max-width: 1800px) {

	

}



/* xl */

@media screen and (max-width: 1400px) {

	.menu_side a.menu {

		font-size: 100%;

	}

}



/* lg */

@media screen and (max-width: 1200px) {

	.menu_side {

		display: none;

	}

}



/* md */

@media screen and (max-width: 992px) {

	.video iframe {

		width:  750px;

		height:  422px;

	}



}



/* sm */

@media screen and (max-width: 768px) {

	.video iframe {

		width:  550px;

		height:  309px;

	}

}



/* xs */

@media screen and (max-width: 576px) {

	.video iframe {

		width:  100vw;

		height:  56.25vw;

	}



}