/*reset default styles*/
html {
  box-sizing: border-box;
}

/* Указываем box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
  padding: 0;
}

/* Убираем внешние отступы */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
  list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Упрощаем работу с изображениями */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
  margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
  font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/*reset default styles*/

body {
	font-family: 'Open Sans', sans-serif;
	margin: 0 auto;
	padding: 0 auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 400'%3E%3Cdefs%3E%3CradialGradient id='a' cx='396' cy='281' r='514' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23cdcfdd'/%3E%3Cstop offset='1' stop-color='%2356b9ff'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='400' y1='148' x2='400' y2='333'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0.5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='800' height='400'/%3E%3Cg fill-opacity='0.4'%3E%3Ccircle fill='url(%23b)' cx='267.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='532.5' cy='61' r='300'/%3E%3Ccircle fill='url(%23b)' cx='400' cy='30' r='300'/%3E%3C/g%3E%3C/svg%3E");
	background-attachment: fixed;
	background-size: cover;
}


h1 {
 font-size: 2em;
}
h2 {
  font-size: 1.6em;
}
h3 {
  font-size: 1.4em;
}
h4 {
  font-size: 1.1em;
}

h1, h2 {
  color: #202021;
  text-align: center;
}

p {
  padding: 3px 0;
  text-align: left;
  font-size: 1rem;
  line-height: 26px;
}
a{
  text-decoration: none;
}
/*a:link {color: #14181b;}
a:visited {color:#000;}
a:hover {
  background:rgba(33,150,243,.23);
  transition: all 300ms;
}*/

#wrapper{
	max-width: 1300px;
	min-height: 768px;/* FF, Opera, IE7 */
	margin: 0 auto;
	background: #fff;
}

.sitelogo img {
  max-width: 100%;
	height: auto;
}
/*spoiler*/
.spoiler_btn {
	background-color: green;
	color: white;
	cursor: pointer;
}
.spoiler {
	display: none;
}



/*HEADER*/
#large-header {
  background-image: url('/images/icons/header_bg.jpg');
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  background: #333;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  z-index: 1;
  height: 140px;
}
.header__title h1,
.header__subtitle h2 {
 color: #f5f5f5;
}
.header__title {
  font-size: 1.5rem;
  text-align: center;
}
.header__subtitle {
  font-size:.6rem;
}
/*END HEADER*/


.textholder {
	text-align:left;
	font-size:small;
	padding:6px;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-top-left-radius: 6px;	
	-webkit-border-top-right-radius: 6px;
	
}

#content{
  text-align: justify;
  background: #fff;
  padding: 30px 100px 0 100px;
  z-index: 100;
  min-height: 70vh;
}
#content h1, #content h2 {
  margin: 30px 0;
}

#adres{
font-size: 80%;
margin-left:25px;
}
#text{
text-indent:1.5em;
word-wrap:break-word;
text-align: justify;
}


/*Êíîïêè  */
#greenButton {
  height:35px;
  width: 16em;
  background-color: #54A9C1;
  border:0px solid black;
  font-weight:bold;
  color:#000000;
  text-decoration: none;
  margin: 10px;
  padding-top:5px;
  padding-bottom:5px;
  padding-left:5px;
  padding-right:5px;
}
#greenButton:hover {
  background-color: #80C9DD;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}


/*Àêêîðäèîí*/
.accordion,
 .accordion ul,
 .accordion li,
 .accordion a,
 .accordion span {
 margin: 0;
 padding: 0;
 border: none;
 outline: none;
 }
 .accordion li {
 list-style: none;
 }

/* Îïðåäåëåíèå è ñòèëè ýëåìåíòîâ */

 .accordion li > a {
 display: block;
 position: relative;
 min-width: 110px;
 padding: 0 10px 0 20px;
 height: 32px;

 color: #341b07;
 font: bold 12px/32px Arial, sans-serif;
 text-decoration: none;
 text-shadow: 0px 1px 0px rgba(0,0,0, .35);


/* ìåíþ ñëåâà */
 background: #959595;
 background: -moz-linear-gradient(top,  #0E49A9 0%, #c4d5f0  100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#96b5fb), color-stop(100%,#c4d5f0));
 background: -webkit-linear-gradient(top,  #96b5fb 0%,#c4d5f0 100%);
 background: -o-linear-gradient(top,  #96b5fb 0%,#c4d5f0 100%);
 background: -ms-linear-gradient(top,  #96b5fb 0%,#c4d5f0 100%);
 background: linear-gradient(top,  #96b5fb 0%,#c4d5f0 100%);

 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 }
 .accordion > li:hover > a,
 .accordion > li:target > a,
 .accordion > li > a.active {
 color: Black Bean;
 text-shadow: 1px 1px 1px rgba(255,255,255, .2);

 background: #959595;

/* ìåíþ ñëåâà ïðè íàâåäåíèè */
 background: -moz-linear-gradient(top,  #b3c9fc 0%, #d0ddfc 50%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3c9fc), color-stop(50%,#d0ddfc));
 background: -webkit-linear-gradient(top,  #b3c9fc 0%,#d0ddfc 100%);
 background: -o-linear-gradient(top,  #b3c9fc 0%,#d0ddfc 50%);
 background: -ms-linear-gradient(top,  #b3c9fc 0%,#d0ddfc 50%);
 background: linear-gradient(top,  #b3c9fc 0%,#d0ddfc 50%);
 }
 .accordion li > a span {
 display: block;
 position: absolute;
 top: 7px;
 right: 0;
 padding: 0 10px;
 margin-right: 10px;

 font: normal bold 12px/18px Arial, sans-serif;
 background: #e7e202;

 -webkit-border-radius: 15px;
 -moz-border-radius: 15px;
 border-radius: 15px;

 -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
 -moz-box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
 box-shadow: inset 1px 1px 1px rgba(0,0,0, .2), 1px 1px 1px rgba(255,255,255, .1);
 }
 .accordion > li:hover > a span,
 .accordion > li:target > a span,
 .accordion > li > a.active span {
 color: #fdfdfd;
 text-shadow: 0px 1px 0px rgba(0,0,0, .35);
 background: #3e5706;
 }

/* Èêîíêè ïåðåä ðàçäåëàìè */

 .accordion > li > a:before {
 position: absolute;
 top: 0;
 left: 0;
 content: '';
 width: 24px;
 height: 24px;
 margin: 4px 8px;

 background-repeat: no-repeat;
 background-image: url(../img/icons.png); /* Ññûëêà íà êàðòèíêó-ñïðàéò èêîíîê */
 background-position: 0px 0px;
 }

 .accordion li.home > a:before { background-position: 0px 0px; }
 .accordion li.home:hover > a:before,
 .accordion li.home:target > a:before,
 .accordion li.home > a.active:before { background-position: 0px -24px; }

 .accordion li.otdel > a:before { background-position: -24px 0px; }
 .accordion li.otdel:hover > a:before,
 .accordion li.otdel:target > a:before,
 .accordion li.otdel > a.active:before { background-position: -24px -24px; }

 .accordion li.abitur > a:before { background-position: -48px 0px; }
 .accordion li.abitur:hover > a:before,
 .accordion li.abitur:target > a:before,
 .accordion li.abitur > a.active:before { background-position: -48px -24px; }

 .accordion li.stud > a:before { background-position: -72px 0px; }
 .accordion li.stud:hover > a:before,
 .accordion li.stud:target > a:before,
 .accordion li.stud > a.active:before { background-position: -72px -24px; }

/* Ñòèëè äëÿ ïîä ìåíþ */

 .sub-menu li a {
 color: #161616;
 text-shadow: 1px 1px 0px rgba(255,255,255, .2);

 background: #b8c7f6;
 border-bottom: 1px solid #22244a;

 -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
 }

 .sub-menu li:hover a { background: #cddaf7; }

 .sub-menu li:last-child a { border: none; }

 .sub-menu li > a span {
 color: #cbb29e;
 text-shadow: 1px 1px 0px rgba(255,255,255, .2);
 background: transparent;
 border: 1px solid #cbb291;

 -webkit-box-shadow: none;
 -moz-box-shadow: none;
 box-shadow: none;
 }
 .sub-menu em {
 position: absolute;
 top: 0;
 left: 0;
 margin-left: 14px;
 color: #c9bbaf;
 font: normal 10px/32px Arial, sans-serif;
 }

/* Ñêðûâàåì íåàêòèâíûå áëîêè */

 .accordion li > .sub-menu {
 display: none;
 }
 .accordion li:target > .sub-menu {
 display: block;
 }




.sitelinks a{
	float: left;
	padding-left: 5px;
}

/* deviders*/  
hr.style18 { 
  height: 30px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 1px 0 0 0; 
  border-radius: 20px; 
} 
hr.style18:before { 
  display: block; 
  content: ""; 
  height: 30px; 
  margin-top: -31px; 
  border-style: solid; 
  border-color: #8c8b8b; 
  border-width: 0 0 1px 0; 
  border-radius: 20px; 
}


hr.style14 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
  background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
}

.blur_bg{
 background-image: url(images/blur-background-1.jpg); /* Путь к фоновому изображению */
 background-color: #c7b39b; /* Цвет фона */
 width:1280px;
 height:600px;
}

.shadowimg {
 border:1px solid #000!important;
	-webkit-box-shadow: 4px 6px 5px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: 4px 6px 5px -2px rgba(0,0,0,0.75);
	box-shadow: 4px 6px 5px -2px rgba(0,0,0,0.75);
}


/*startup*/

.docs {
	display: flex;
	justify-content: flex-start;
	background: #f1f1f1;
	margin-top: 30px;
	align-items: flex-start;
}

.docs img {
	width: 60%;
   height: auto;
}

.docs .docs__items {
	padding: 30px;
	background: #f1f1f1;
	flex-basis: 340px;
	text-align: left;

}
.docs__items .title h2 {
	display: table!important;
	width: auto;
	margin: 15px auto;
	letter-spacing: 2px;
	color: #000;
	
}

.docs .docs__items a {
	line-height: 1.3;
	display: block;
	margin-bottom: 13px;
	position: relative;
	color: #2196f3;

}
.docs .docs__items a:before {
	content: '\2713';
   width: 2px;
   height: 2px;
   color: #009688;
   position: absolute;
   top: 1px;
   left: -20px;
}
.docs .docs__items a:hover {
	color:#3386c7;
}



/* pagination */
.pagination {
  width: 100%;
  margin-top: 70px;
  display: flex;
  justify-content: center;
}
.pagination__list {
  display: flex;
  justify-content: center;

}
.pagination__list-item.active a {
  color: #1C62CD; 
}
.pagination__list-item.active {
  color: #1C62CD;
  border: 2px solid #1C62CD;
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}
.pagination__list-item {
  padding: 6px 12px;
  border: 1px solid transparent;
  font-family: "Barlow", sans-serif;
  font-weight: normal;
  /*font-size: 18px;*/
  font-size: 35px;
  line-height: 22px;
  margin: 0 4px;
  color: #c4c4c4;
}

.pagination__list-item a {
  display: block;
   color: #c4c4c4;
   transition: all 300ms;
}
.pagination__list-item a:hover {
  color: #656565;
}

 .style-img-icon{
    list-style-image:url(/images/icons/galka_kub.png);
}


/*Responsive Image Grid*/
.img-grid {
  display: flex;
  flex-wrap: wrap;
  padding: 4px;
  justify-content: center;
}
.img-grid .column {
  padding: 0 4px;
   flex: 32%;
   max-width: 32%;
}
.img-grid .column img {
  margin-top: 8px;
  width: 100%;
  vertical-align: middle;
}

@media screen and (max-width: 800px) {
  .img-grid .column {
    flex: 50%;
    max-width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .img-grid .column {
    flex: 30%;
    max-width: 30%;
  }
}

@media screen and (max-width: 600px) {
  .img-grid .column {
    flex: 100%;
    max-width: 100%;
  }
}
/*.Responsive Image Grid*/