html, body {overflow-x: hidden;}
body {margin:0;  padding:0; background-color:#9499A9; z-index:-3; font-family: 'Open Sans', Arial, sans-serif;}
.tema1 {margin-top:-1%;}	
#gen2 {border:3px solid #FFE8B6; border-radius: 8px; width:65%; margin-left:2%; margin-top:17%; background-color:rgba(0,0,0,.5);}
	h1 {font-family: 'Fredericka the Great', cursive; margin-left:5%; font-size:270%; margin-top:0%; padding-top: 1%;}
	h2 {font-family: 'Neucha', cursive; margin-left:5%;font-size:330%; color:#FFE8B6; margin-top:-0.5%;}
	h3 {font-family: 'Neucha', cursive; text-decoration:underline; margin-left:5%; font-size:180%;  margin-top:-5%; margin-bottom:0;color:#FFE8B6;}
	h4 {margin-top:1%; margin-left:1%; font-family: 'Poiret One', cursive; font-size:200%;}
	h5, h6 {font-family: 'Oswald', sans-serif;  width:100%; margin-left:50%;}
	h5 {text-shadow: black 2px 2px 0; font-size:220%; color:#999;}
	h6 {text-shadow: white 1px 1px 0; font-size:160%; text-decoration:underline; color:#555;}
	p {text-indent: 0; padding-left: 5px; padding-top:5%;}
	.ft p {padding:0.05% 2%;}
.a16 {border: none; width:90%;}
.a17 {border: none; width:0;}
.a18 {border: none; width:65%;}
.a19 {border: none; width:90%;}

.main {margin-top:1%;}
.grid {position: relative; z-index: -1; background-color:#2f3238;}

ul, .main, .item, .news, .news1, .news2, .predisl, h5, h6,.tema1 {
  margin: 0;
  padding: 0;
}
#container {
  position: relative;
  padding: 20px 40px;
  padding-top: 20px;
}

/* Menu Button */
.menu-btn {
  width: 150px;
  padding: 10px;
  float:right;
  margin-bottom: 30px;
  margin-right:9%;
  background: rgba(148, 153, 169, 0.8);
  color: #000;
  text-align: center;
  cursor: pointer;
  border: 0px;
}
.menu-btn:hover {
  opacity: 0.8;
}

/* Header */
.site-header {
  position: fixed;

  color: #000;
  width: 100%;
  padding: 20px 0;
  text-align: left;
  z-index: 9998;
}

/* Footer */
.site-footer {
  position: relative;
  border-top: 1px solid #EEE;
  color: #999;
  padding: 10px;
  font-size: 0.8em;
  text-align: center;
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }

.item {
	position: relative;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1900px;
	list-style: none;
	text-align: center;
}
.item  h4{margin-bottom:3%;}

/* Common style */
.item figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 1% 1%;
	min-width: 320px;
	max-width: 585px;
	max-height: 360px;
	width: 31%;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}

.item figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 0.8;
}

.item figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.item figure figcaption::before,
.item figure figcaption::after {
	pointer-events: none;
}

.item figure figcaption,
.item figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.item figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.item figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.item figure h2 span {
	font-weight: 800;
}

.item figure h2,
.item figure p {
	margin: 0;
}

.item figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


			
/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
	background: #2f3238;
}

figure.effect-julia img {
	max-width: none;
	height: 400px;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	text-align: left;
}

figure.effect-julia h2 {
	position: relative;
	padding: 0.5em 0;
}

figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.4em 1em;
	background: rgba(255,255,255,0.9);
	color: #2f3238;
	text-transform: none;
	font-weight: 500;
	font-size: 90%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-460px,0,0);
	transform: translate3d(-460px,0,0);
}

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

figure.effect-julia:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
	.main{width:100%;}
	.predisl{border:1px solid #FFE8B6; border-radius: 8px; background-color:rgba(192, 192, 192, 0.7); padding:0.5% 1%;text-indent: 40px;}
	.item{width:30%; background-color:rgba(0, 0, 0, 0.6); margin-top:3.5%;float:right; border-radius: 4px;}
	
	
	.dt .item {width:100%; border-radius:0;}
	.dt .item figure,  .str .item figure {min-width: 29%; width: 25%;}	
	
.dt figure.effect-julia img {opacity: 0.4;}	
.dt figure.effect-julia:hover img {
	opacity: 1;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);}	
	
	.str .item {width:100%; border-radius:0; background-color:#C4C2BB}
	
	.str figure.effect-julia {background: #CAC8C2;}	
	.str figure.effect-julia h2 {color:#2f3238; margin-top:-7%;}
	.ital h2, .star h2  {text-align:right;}
	  

	.str figure.effect-julia .hor h2 {margin-bottom:35%;}
	.str figure.effect-julia .cheh h2 {margin-top:23%; text-align:right;}
	.str figure.effect-julia .star h2 {margin-top:25%;}

	
	
.str figure.effect-julia img {opacity: 0.7;}
.str figure.effect-julia:hover img {
	opacity: 1;
	-webkit-transform: scale3d(1.2,1.2,1);
	transform: scale3d(1.2,1.2,1);}
	
	#logot {width: 40%; margin-top: 5%; margin-left:15%;}	
	
	figcaption img {
	-webkit-transform: translate3d(-1460px,0,0);
	transform: translate3d(-1460px,0,0);}
	figcaption :hover img {
	opacity: 1;
	-webkit-transform: translate3d(10px,0,0);
	transform: translate3d(10px,0,0);}	
	
	.news{width:69%; float:left; background-color:rgba(255, 255, 255, 0.7); border-radius: 4px;}
	.news h4 {margin-bottom:-1%;}
	.news_img{width:50%;}
	.news img{width:100%;}
	.news_p {margin-left:1.5%;  width:25%; position:absolute; z-index:3;}
	.news_p1 {background-color:#fff; margin-bottom:-6%; padding-left: 10px;}

	.button {
    display: inline-block; /* Строчно-блочный элемент */
    padding: 5px 20px; /* Добавляем поля */
    text-decoration: none; /* Убираем подчёркивание у ссылки */
    cursor: pointer; /* Курсор в виде руки */
    background: #DFE1E5; /* Фон для браузеров, не поддерживающих градиент */
    /* Градиент */
    background: -moz-linear-gradient(top, #DFE1E5 0%, #9499A9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DFE1E5), color-stop(100%,#9499A9));
    background: -webkit-linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    background: -o-linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    background: -ms-linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    background: linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    border-radius: 10px; /* Скругляем уголки */
    border: 1px solid #000; /* Добавляем синюю рамку */
    font: 12px/1 Arial, sans-serif; /* Рубленый шрифт */
    color: #000; /* Цвет текста и ссылки */
	}	
	a.button:hover {
		    background: -moz-linear-gradient(top, #BEBFC3 0%, #6B6E7A 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BEBFC3), color-stop(100%,#6B6E7A));
			background: -webkit-linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			background: -o-linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			background: -ms-linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			background: linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			color: #fff; }
	
	.news2{width:70%; background-color:#fff; float:right; border-radius: 4px; margin-right:1%; margin-top:2%;}	
	.news2 .news_img {float:right;}
	.news2 img {float:right;}	
	

	
	.news1{ width:70%; background-color:#fff; float:left;  border-radius: 4px; margin-left:1%; margin-top:2%;}
	.news1 .news_img {float:left;}
	.news1 img {float:left;}
	.news1 .news_p {margin-left:20%;}
	.news1 h5, .news1 h6 {margin-left:25%;}
	.news1 .button {margin-left:18%;}
	
	*, *::after, *::before {box-sizing: border-box;}
	.item {list-style: none; font-family: 'Open Sans', Arial, sans-serif;}
	.item figure {cursor: pointer;}
	.item figure figcaption {color: #fff; text-transform: uppercase;}
	.item h4 {color:#fff;}
	.item img {border:0;}
	.item a {outline: none; color: #3498db; text-decoration: none;}
	
	figure.effect-julia {background: #2f3238;}
	
	.item figure img{position: relative;
		display: block;
		width: 100%;
		opacity: 0.8;}
	figure.effect-julia img {
		max-width: none;
		height: 100%;
		-webkit-transition: opacity 1s, -webkit-transform 1s;
		-webkit-backface-visibility: hidden;
		transition: opacity 1s, transform 1s;
		backface-visibility: hidden;
	}
	
	.item figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 1% 2%;
	min-width: 96%;	
	width: 31%;
	text-align: center;
	cursor: pointer;
	}
	
  	.item figure figcaption, .item figure figcaption > a{position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;} 
	.item figure figcaption > a {z-index: 1000;
		text-indent: 200%;
		white-space: nowrap;
		font-size: 0;
		opacity: 0;}
	.item figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
	font-family: 'Open Sans', Arial, sans-serif;
	color: #fff;
	font-size: 1.7em;}
	
	figure.effect-julia h2 {
    position: relative;
    padding: 0.5em 0;}
	
	figure.effect-julia figcaption {text-align: left;}
	.but {
    display: inline-block; /* Строчно-блочный элемент */
    padding: 10px 40px; /* Добавляем поля */
    text-decoration: none; /* Убираем подчёркивание у ссылки */
    cursor: pointer; /* Курсор в виде руки */
    background: #DFE1E5; /* Фон для браузеров, не поддерживающих градиент */
    /* Градиент */
    background: -moz-linear-gradient(top, #DFE1E5 0%, #9499A9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DFE1E5), color-stop(100%,#9499A9));
    background: -webkit-linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    background: -o-linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    background: -ms-linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    background: linear-gradient(top, #DFE1E5 0%,#9499A9 100%);
    border-radius: 10px; /* Скругляем уголки */
    border: 1px solid #000; /* Добавляем синюю рамку */
    font: 14px/1 Arial, sans-serif; /* Рубленый шрифт */
    color: #000; /* Цвет текста и ссылки */
	}	
	a.but:hover {
		    background: -moz-linear-gradient(top, #BEBFC3 0%, #6B6E7A 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#BEBFC3), color-stop(100%,#6B6E7A));
			background: -webkit-linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			background: -o-linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			background: -ms-linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			background: linear-gradient(top, #BEBFC3 0%,#6B6E7A 100%);
			color: #fff; }
	.inst {vertical-align: middle; color:black;}
	.inst  img {width:205px;}
	.news1 h5 {padding:10px;}
	.news1 h6 {padding:12px;}
	@media screen and (max-width:3920px)  {.tema1{background: url(img/9/815.jpg) no-repeat;background-size: 100%;}}
	@media screen and (max-width:1920px)  {.tema1{background: url(img/9/814.jpg) no-repeat;background-size: 100%;}}
	@media screen and (max-width:1675px)  {.item figure figcaption {font-size: 1em;} .tema1{background: url(img/9/812.jpg) no-repeat;background-size: 100%;}} 
	@media screen and (max-width:1475px)  {
											h1 {font-size:220%;}h2 {font-size:300%;} h3 {font-size:160%;}.item figure figcaption {font-size: 0.8em;}
											.news1, .news2 {width:80%;} .news_p {width:28%;} .news1 .button {margin-left:25%;}
											.tema1{background: url(img/9/812.jpg) no-repeat; background-size: 100%;}} 
	@media screen and (max-width:1280px)  {
											h1 {font-size:210%;}h2 {font-size:280%;} h3 {font-size:150%;} h4 {font-size:160%;}
											.item figure figcaption {font-size: 0.75em;}.news1 .news_p {margin-left: 26%;}
											#gen2 {width: 75%;margin-top:15%;border:1.5px solid #FFE8B6; border-radius: 6px;}
											.news1, .news2 {width:95%;}.news_p {width:31%;}.news1 .button {margin-left:35%;}
											.tema1 {background: url(img/9/810.jpg) no-repeat;background-size: 100%;}}
	@media screen and (max-width:1060px)  {
											h1 {font-size:180%;}h2 {font-size:250%;} h3 {font-size:140%;}.item figure figcaption {font-size: 1em;}
											h5 {font-size: 210%;}
											#gen2 {width: 85%;margin-top:14%;border:1px solid #FFE8B6; border-radius: 4px;}
											.news1, .news2 {width:97%;}.news_p {width:40%;} .news1 .button {margin-left:45%;}
											.news_p {margin-left:10%;}	.news1 .news_p {margin-left:40%;}
											.news {width: 100%;float: none;} .item {width: 100%; border-radius:0;float: none;}.item figure {min-width: 46%;}.a17 {width:96%;}
											.tema1	{background: url(img/9/809.jpg) no-repeat;background-size: 100%;}
											.dt .item figure,  .str .item figure {min-width: 45.5%; width: 40%;}.a19 {width:0;}}
	@media screen and (max-width:930px)  {
											#gen2 {width: 90%;} 
											h1 {font-size:150%;}h2 {font-size:220%;} h3 {font-size:130%;}h5 {font-size: 200%;}
											.item figure figcaption {font-size: 0.9em;}
											.news_p {margin-left:5%; width:45%;}.news1 .news_p {margin-left:38%;}}
	@media screen and (max-width:830px)  {
											h1 {font-size:140%;}h2 {font-size:210%;} h3 {font-size:120%;}h5 {font-size: 190%;} h6 {font-size:150%;}
											.news_p {margin-left:3%; width:49%;}.news1 .news_p {margin-left:36%;}#gen2 {width: 93%;}#container {padding-left:10px; padding-right:10px;}
											.item figure h2 {font-size: 1.2em;}}
	@media screen and (max-width:770px)  {
											#gen2 {width: 95%;} #container {padding-left:0; padding-right:0;} h1 {font-size:130%;padding-top: 2%;}h4 {font-size:180%;}
											.item figure {width: 96%;}.item figure {max-height: 460px;}.item figure figcaption {font-size: 1.2em;}.item figure figcaption p{font-size: 1.05em;}
											.news_p {margin-left:1%; width:50%;}.news1 .news_p {margin-left:34%;}.item figure h2 {font-size: 1.1em;}}
	@media screen and (max-width:690px)  {
											.news2, .news1 {margin-top:18%;margin-bottom:18%;} .news_img {width:90%;} 
											h4{font-size:220%;} h5 {font-size: 210%; margin-top:-17%; color:#fff;} 
											h6{color:#fff;text-shadow: black 2px 2px 0;margin-bottom:95%;}
											.news_p {width:90%;}.news1 .news_p {margin-left: 4%;} .news_p1{border-radius:5px;}
											.item figure figcaption {font-size: 1em;}.item figure figcaption p{font-size: 1.1em;}
											.dt .item figure,  .str .item figure {min-width: 94%; width: 40%;} .item figure h2 {font-size: 1.7em;}}
	@media screen and (max-width:600px)  {.news_img {width:95%;}.news_p {width:95%;} .news1 .news_p {margin-left: 2%;}.news2, .news1 {margin-top:20%;margin-bottom:24%;}
											h5 {margin-top:-19%;}.item figure figcaption p{font-size:0.95em;}}
	@media screen and (max-width:520px)  {.news_img {width:97%;}.news_p {width:96%;} .news1 .news_p {margin-left: 1%;}
											.news2, .news1 {margin-top:24%;margin-bottom:28%;}h5 {margin-top:-22%;}}
	@media screen and (max-width:460px)  {
											h1{font-size:120%; padding-top: 3%;}h2 {font-size:180%;}h3 {font-size:140%;}
											.news_img {width:99%;}.news_p {width:97%;} .news1 .news_p {margin-left: 1%;}
											.news2, .news1 {margin-top:27%;margin-bottom:33%;} h5 {margin-top:-24%;}
											.item figure figcaption p{font-size:0.85em;}.item figure h2 {font-size: 1.5em;}}
	@media screen and (max-width:415px)  {	h2 {font-size:160%;}
											.news2, .news1 {margin-top:29%;margin-bottom:40%;} h5 {margin-top:-26%;}
											.item figure figcaption {font-size: 0.8em;}}
	@media screen and (max-width:380px)  {.news2, .news1 {margin-top:35%;margin-bottom:45%;}}