@import url("webfonts/Comfortaa_Light/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");
@import url("webfonts/PoiretOne_Regular/stylesheet.css");


/* --------------- reset.css --------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;                               /* обнуляем отступы и убираем бордюры */
	vertical-align: baseline;          /* приводим все к одной базовой линии */
	background: transparent;      /* чтобы не проскакивали левые фоны, установленные по умолчанию */
	font-size: 100%;                     /* размер шрифта всем одинаковый */
	letter-spacing: 0.7px;
}
a {                                      	     /* ссылка не в общем списке чтобы не сбрасывать outline по умолчанию */
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	outline:none;
}
table {						/* устраняем отступы между ячейками таблицы */
	border-collapse: collapse; 
	border-spacing: 0;
}
td, td img {
	vertical-align: top;			/* возвращаем привычное вертикальное выравнивание */
} 
input, select, button, textarea {
	margin: 0; 				/* убираем отступы по умолчанию для элементов форм (в частности для checkbox и radio) */
	font-size: 100%; 			/* делаем размер шрифтов везде одинаковым */
	outline: none;
}
input[type="text"], input[type="password"], textarea {
	padding: 0; 				/* убираем внутренние отступы для текстовых полей */
}
input[type="checkbox"] { 		/* вертикальное выравнивание чекбоксов и радиобатонов относительно меток */
	vertical-align: bottom;
}
input[type="radio"] {
	vertical-align: text-bottom;
}
sub {
	vertical-align: sub;
	font-size: smaller;
}
sup {
	vertical-align: super;
	font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
nav ul {
	 list-style:none;
}
/* --------------- /reset.css --------------- */
/* конец кода сброса стилей браузера */


@charset "utf-8";


#header {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFFFFF;
	display: block;
	clear: both;
	margin-top: 30px;
}
#poloska  {
	max-width: 1200px;
	padding-bottom: 30px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	clear: both;

}

#header #logo {
	float: left;
	background-color: #FFFFFF;
	max-width: 600px;
	padding-left: 20px;
	padding-bottom: 30px;
	text-decoration: none;
}
#header #logo h1 {
	color: #000000;
	font-size: 72px;
	font-family: "PoiretOne Regular";
	font-weight: lighter;
	text-align: center;
	display: block;
	letter-spacing: 0;
	text-decoration: none;
}

#header #contakt {
	padding-top: 25px;
	padding-bottom: 50px;
	float: right;
	max-width: 600px;
	padding-right: 20px;
	text-decoration: none;
}
#header #contakt p {
	color: #000000;
	font-family: "PoiretOne Regular";
	font-weight: lighter;
	font-size: 30px;
	text-align: right;
	max-width: 600px;
	text-decoration: none;
	letter-spacing: 0;
}


/*------------------------------------*\
	НАВИГАЦИЯ
\*------------------------------------*/
#nav{
	float: left;
	width: 100%;
	list-style: none;
	margin-bottom: 10px;
	text-decoration: none;
	text-align: center;
	color: #FFFFFF;
	font-family: "Comfortaa Light";
	font-size: 20px;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	background-color: #232424;
	background-image: url(img/polosa.jpg);
	background-position: center bottom;
	background-repeat: repeat-x;
	background-size: auto auto;
	padding-bottom: 8px;
	padding-left: 0px;
	 z-index: 10;
}
#nav li{
	float: left;
	position: relative;
	padding-left: 0px;
	width: 20%;
	
}
#nav li a{
	color: #fff;
	background-color: #232424;
	text-decoration: none;
	padding-left: 0px;
	display: inline-block;
	padding-bottom: 9px;
	padding-top: 10px;
	width: 100%;
	max-width: 240px;
	z-index: 10;
}
#nav li a:hover{
	color: #fff;
	background: #6b0c36;
	background: rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
	text-decoration: none;
	
}


/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
	list-style: none;
	position: absolute;
	left: -9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
	opacity: 0; /* Устнавливаем начальное состояние прозрачности */
	-webkit-transition: 0.5s linear opacity;
	z-index: 20;
	
}
#nav ul li{
	padding-top: 0px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
	float: none;
	width: 240px;
	z-index: 20;	
}
#nav ul a{
	white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
	display:block;
	z-index: 20;
	
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
	left: 0; /* Приносим его обратно на экран, когда нужно */
	opacity: 1; /* Делаем непрозрачным */
	padding-left: 0px;
	z-index: 20;
	
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
	background-color: #5C87C8; /* Выглядит полупрозрачным */
	text-decoration: none;
	padding-left: 0px;
	z-index: 20;
	
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
	text-decoration: none;
	-webkit-transition: -webkit-transform 0.075s linear;
	padding-left: 0px;
	z-index: 20;
	
}

#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
	background: #333;
	background-color: #8BB2ED; /* Будет полупрозрачным */
	padding-left: 0px;	
	z-index: 20;
	
}




#blueBlock {
	max-width: 1200px;
	width: 100%;
	clear: both;
	background-color: #5C87C8;
	color: #FFFFFF;
	font-family: "Comfortaa Light";
	font-size: 14px;
	line-height: 1.2em;
	font-weight: lighter;
	margin-left: auto;
	margin-right: auto;
}
#blueBlock h1 {
	font-family: "Comfortaa Light";
	color: #FFFFFF;
	text-align: center;
	font-size: 25px;
	font-weight: 100;
	text-decoration: none;
	padding-top: 30px;
	padding-bottom: 20px;
	line-height: 1.2em;
}
#blueBlock h2 {
	font-family: "Comfortaa Light";
	color: #FFFFFF;
	text-align: center;
	font-size: 25px;
	font-weight: 100;
	text-decoration: none;
	padding-top: 30px;
	padding-bottom: 20px;
	line-height: 1.2em;
}
#blueBlock p {
	font-family: "Comfortaa Light";
	font-weight: 100;
	font-size: 14px;
	text-indent: 30px;
	text-align: justify;
	padding-left: 17%;
	padding-right: 17%;
	padding-bottom: 10px;
}
#blueBlock .last {
	padding-bottom: 50px;
}
#primenenie {
	max-width: 1200px;
	width: 100%;
	clear: both;
	font-family: "Comfortaa Light";
	font-size: 14px;
	line-height: 1.2em;
	font-weight: lighter;
	margin-left: auto;
	margin-right: auto;
}
#primenenie h1 {
	font-family: "Comfortaa Light";
	text-align: center;
	font-size: 25px;
	font-weight: 100;
	text-decoration: none;
	padding-top: 30px;
	padding-bottom: 20px;
	text-indent: 30px;
	padding-left: 17%;
	padding-right: 17%;
	color: #232424;
}#primenenie h2 {
	font-family: "Comfortaa Light";
	text-align: center;
	font-size: 25px;
	font-weight: 100;
	text-decoration: none;
	padding-top: 30px;
	padding-bottom: 20px;
	text-indent: 30px;
	padding-left: 17%;
	padding-right: 17%;
	color: #232424;
}
#primenenie p {
	font-family: "Comfortaa Light";
	font-weight: 100;
	font-size: 14px;
	text-indent: 30px;
	text-align: justify;
	padding-left: 17%;
	padding-right: 17%;
	padding-bottom: 10px;
	color: #232424;
}
#primenenie #photo {
	width: 100%;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	color: #5C87C8;
	font-size: 14px;
	font-weight: bold;
	max-width: 750px;
}

#primenenie #photo #prim1 {
	float: left;
	position: relative;
	padding-left: auto;
	padding-right: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 33%;
	min-width: 208px;
}

#primenenie #photo #prim2 {
	float: left;
	position: relative;
	padding-left: auto;
	padding-right: auto;
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 33%;
	min-width: 208px;
}



#primenenie #photo #prim3 {
	float: left;
	margin-left: auto;
	padding-left: auto;
	padding-right: auto;
	margin-right: auto;
	display: block;
	position: relative;
	max-width: 33%;
	min-width: 208px;

}
#photo #prim1 p {
	text-align: center;
	text-indent: 0px;
	color: #5C87C8;
	font-weight: bold;
	font-size: 14px;
}

#photo #prim2 p {
	text-align: center;
	text-indent: 0px;
	color: #5C87C8;
	font-weight: bold;
	font-size: 14px;
}
#photo #prim3 p {
	text-align: center;
	text-indent: 0px;
	color: #5C87C8;
	font-weight: bold;
	font-size: 14px;
}
#contacts {
	max-width: 1200px;
	background-color: #232424;
	margin-left: auto;
	width: 100%;
	margin-right: auto;
	padding-left: 0px;
	clear: both;
	padding-bottom: 120px;
	padding-top: auto;
}

#contacts h1 {
	color: #FFFFFF;
	font-family: "PoiretOne Regular";
	font-size: 30px;
	text-align: center;
	font-style: normal;
	font-weight: lighter;
	padding-top: 15px;
	padding-bottom: 30px;
}
ul li a {
	color: #6E6E6E;
	text-decoration: none;
}

ul li a:hover {
	color: #F0F0F0; /* Цвет ссылки при наведении на нее курсора мыши */
	text-decoration: underline; /* Добавляем подчеркивание */
   }

#contacts #block1 {
	width: 200px;
	padding-left: 0px;
	float: left;
	text-decoration: none;
	list-style-type: none;
}
#block1 ul li {
	list-style-type: none;
	padding-left: 20px;
	color: #A6A6A6;
	font-family: "Comfortaa Light";
	font-size: 15px;
	text-decoration: none;
}
#contacts #block2 {
	width: 200px;
	padding-left: 0px;
	float: left;
	text-decoration: none;
	list-style-type: none;
}
#block2 ul li {
	list-style-type: none;
	padding-left: 20px;
	color: #A6A6A6;
	font-family: "Comfortaa Light";
	font-size: 15px;
	text-decoration: none;
}


#contacts #block3 {
	width: 200px;
	padding-left: 0px;
	float: left;
	text-decoration: none;
	list-style-type: none;
}
#block3 ul li {
	list-style-type: none;
	padding-left: 20px;
	color: #A6A6A6;
	font-family: "Comfortaa Light";
	font-size: 15px;
	text-decoration: none;
}
#contacts #block4 {
	width: 600px;
	padding-left: 0px;
	float: left;
	text-decoration: none;
	list-style-type: none;
	position: relative;
	margin-left: 0px;
	display: block;
}
#block4 p {
	/* clear: both; */
	color: #B7B7B7;
	font-family: "Comfortaa Light";
	font-size: 16px;
	text-align: right;
	margin-top: -15px;
	position: relative;
	/* font-weight: 100; */
	margin-bottom: 10px;
	padding-right: 20px;
	/* width: 100%; */
	/* float: left; */
	/* display: -webkit-inline-box; */
}
#mat {
	max-width: 800px;
	width: 100%;
	clear: both;
	color: #000000;
	font-family: "Comfortaa Light";
	font-size: 14px;
	line-height: 1.2em;
	font-weight: lighter;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 50px;
	text-align: justify;
	letter-spacing: 0.7px
}
#mat h1 {
	max-width: 800px;
	width: 100%;
	color: #5C87C8;
	font-family: "Comfortaa Light";
	font-size: 18px;
	line-height: 1.2em;
	font-weight: lighter;
	padding-bottom: 10px;
	padding-top: 10px;
}
#mat p {
	text-align: justify;
	text-indent: 30px;
	}
#mat img {
	float: left;
	padding-right: 50px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#mat h2 {
	max-width: 800px;
	width: 100%;
	color: #5C87C8;
	font-family: "Comfortaa Light";
	font-size: 24px;
	line-height: 1.2em;
	font-weight: lighter;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
}
#mat h3 {
	max-width: 800px;
	width: 100%;
	color: #5C87C8;
	font-family: "Comfortaa Light";
	font-size: 18px;
	line-height: 1.2em;
	font-weight: lighter;
	padding-top: 10px;
	text-align: justify;
	text-indent: 30px;
}
#mat .fut {
	padding-right: 0px;
	max-width: 800px;
	width: 100%;
	display: block;
	height: auto;
	padding-left: 0px;
}
#prim1 p a {
	color: #5C87C8;
}
#prim2 p a {
	color: #5C87C8;
}
#prim3 p a {
	color: #5C87C8;
}
#logo h1 a {
	text-decoration: none;
	color: #232424;
}






















@media (max-width:1220px){
	#contacts #block1, #block2, #block3 {
	display: none;		
		}

	#contacts #block4 {
	padding-left: auto;
	padding-right: auto;
	width: 100%;
	padding-bottom: 20px;
		}

}

@media (max-width:1000px){
#header #logo h1 {
	font-size: 52px;
	padding-right: 20px;
	text-decoration: none;
}

#header #contakt p {
	font-size: 20px;
	padding-right: 20px;
}
}

@media (max-width:740px){
#header #logo {
	float: none;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-left: auto;
	margin-right: auto;
}
#header #contakt {
	float: none;
	text-align: center;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin-left: auto;
	margin-right: auto;
}
#header #logo h1 {
	font-size: 40px;
	padding-left: 10px;
	padding-right: 10px;
}
#header #contakt p {
	font-size: 20px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
#punctMenu li .okulen {
	display: none;
}
#nav li {
	width: 33%;
	z-index: 20;
}

#nav li a {
	font-size: 14px;
	z-index: 20;
}

#primenenie #photo #prim1 {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: auto;
	padding-right: auto;
	float: none;
	clear: left;
}

#primenenie #photo #prim2 {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: auto;
	padding-right: auto;
	float: none;
	clear: left;
}

#primenenie #photo #prim3 {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: auto;
	padding-right: auto;
	float: none;
	clear: left;
}
	

}

#okulen {
	max-width: 800px;
	width: 100%;
	clear: both;
	color: #000000;
	font-family: "Comfortaa Light";
	font-size: 14px;
	line-height: 1.2em;
	font-weight: lighter;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 50px;
}

#okulen #blok1 {
	padding-top: 30px;
	padding-bottom: 70px;

}
#okulen #blok2 {
	padding-top: 50px;
	padding-bottom: 30px;
}

#okulen #blok3 {


}

#okulen #blok1 img {
	float: right;
	padding-right: 10px;
	padding-left: 30px;
}
#okulen #blok2 img {
	float: left;
	padding-right: 30px;
	padding-left: 10px;
}


#okulen #blok1 h1 {
	font-family: "Comfortaa Light";
	text-align: left;
	font-size: 25px;
	font-weight: 100;
	text-decoration: none;
	text-indent: 30px;
	color: #232424;
	padding-bottom: 10px;
	padding-top: 10px;
	max-width: 800px;
	width: 100%;
	line-height: 1.2em;
	margin-left: auto;
	margin-right: auto;
}
#okulen #blok2 h1 {
	font-family: "Comfortaa Light";
	text-align: left;
	font-size: 25px;
	font-weight: 100;
	text-decoration: none;
	text-indent: 30px;
	color: #232424;
	padding-bottom: 30px;
	padding-top: 10px;
}
#okulen #blok3 h1 {
	text-align: center;
	font-family: "Comfortaa Light";
	font-size: 25px;
	font-weight: 100;
	text-decoration: none;
	color: #232424;
	padding-bottom: 30px;
	padding-top: 40px;
}



#okulen #blok1 p {
	text-align: justify;
	text-indent: 30px;

}
#okulen #blok2 p {
	text-align: justify;
	text-indent: 30px;
}

#okulen #blok3 p {
	text-align: center;
}
#okulen #blok3 #sert {
	width: 442px;
	margin-left: auto;
	margin-right: auto;

}
#blok3 #sert img {
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 30px;
}

/*модальное окно*/

.modalDialog1 {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
	
	}
.modalDialog2 {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
	
	}
.modalDialog3 {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
	
	}
.modalDialog4 {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	display: none;
	pointer-events: none;
	
	}

	.modalDialog1:target {
		display: block;
		pointer-events: auto;
	}
	.modalDialog2:target {
		display: block;
		pointer-events: auto;
	}
	.modalDialog3:target {
		display: block;
		pointer-events: auto;
	}
	.modalDialog4:target {
		display: block;
		pointer-events: auto;
	}
	.modalDialog1 > div {
	width: 484px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
	background-color: #FFFFFF;
	margin-top: 50px;
	}
	
	.modalDialog2 > div {
	width: 484px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
	background-color: #FFFFFF;
	margin-top: 50px;
	}
	
	.modalDialog3 > div {
	width: 484px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
	background-color: #FFFFFF;
	margin-top: 50px;
	}
	
	.modalDialog4 > div {
	width: 484px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-right: 20px;
	padding-left: 10px;
	padding-bottom: 10px;
	border-radius: 10px;
	background-color: #FFFFFF;
	margin-top: 50px;
	}

	.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 12px;
		-moz-border-radius: 12px;
		border-radius: 12px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
	}

	.close:hover {
	background-color: #5C87C8;
}
/*конец модальное окно*/

/* форма обратной связи*/
					/* Стили формы */
					#application {
					width: 350px;
					margin: 0 auto;
					}
					 
					/*Стили полей для ввода*/
					#applicationName, #applicationEmail, #applicationTelephone {
	width: 100%;
	height: 50px;
	background: none;
	margin-top: 25px;
	border: 1px solid #5C87C8;
	border-radius: 4px;
	font-family: "PoiretOne Regular";
	font-size: 24px;
	font-weight: 100;
	text-align: center;
	color: #232424;
	transition: all .8s;
						}				
					
/*Стили полей при клике по ним*/
#applicationName:focus, #applicationEmail:focus, #applicationTelephone:focus {
	border: 1px solid #FF5252;
	border-radius: 4px;
	
	}
 
/*Стили текста, выводящегося в placeholder*/
::-webkit-input-placeholder {
    color: #000;
    font-family: "PoiretOne Regular";
	font-weight: 100;
	font-size: 24px;
	font-weight: 100;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	letter-spacing: 0;
}
 
::-moz-placeholder  {
    color: #000;
    font-family: "PoiretOne Regular";
	font-size: 24px;
	font-weight: 100;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}  /* Firefox 19+ */
 
:-moz-placeholder {
    color: #000;
    font-family: "PoiretOne Regular";
	font-size: 24px;
	font-weight: 100;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}  /* Firefox 18- */
 
:-ms-input-placeholder {
    color: #000;
    font-family: "PoiretOne Regular";
	font-size: 24px;
	font-weight: 100;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
 
::placeholder {
    color: #000;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}					


					/*Стили для кнопки*/
					.applicationButton {
	margin-top: 25px;
	background-color: #5C87C8;
	border: none;
	width: 100%;
	height: 73px;
	border-radius: 4px;
	color: #FFFFFF;
	font-size: 24px;
	text-transform: uppercase;
	font-family: "Comfortaa Light";
	cursor: pointer;
	transition: all .8s;
					}
						.applicationButton:hover {
	background-color: #DBE9FF;
	border-radius: 4px;
	border: 1px solid #5C87C8;
						color: #232424;
						}
/* КОНЕЦ форма обратной связи*/


#karta {
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	border-width: 0px;
	border-width: 0px;
	border-width: 0px;
	border-style: solid;
	border-color: #5C87C8;
}
#blueBlock>ul {
    font-family: "Comfortaa Light";
    font-weight: 100;
    font-size: 14px;
    text-indent: 30px;
    text-align: justify;
    padding-left: 17%;
    padding-right: 17%;
    padding-bottom: 10px;
    list-style-type: square;
}

#blueBlock>ul>li {
    margin-left: 46px;
    text-align: left;
}
#contacts h6 {
    color: #FFFFFF;
    font-family: "PoiretOne Regular";
    font-size: 30px;
    text-align: center;
    font-style: normal;
    font-weight: lighter;
    padding-top: 15px;
    padding-bottom: 30px;
}
.shema {
    display: none;
}
.codesOn .i-name {
  display: none;
}
.codesOn .i-code {
  display: inline;
}
.i-code {
  display: none;
}
@font-face {
      font-family: 'sociallan';
      src: url('./fonts/social/sociallan.eot?91207867');
      src: url('./fonts/social/sociallan.eot?91207867#iefix') format('embedded-opentype'),
           url('./fonts/social/sociallan.woff?91207867') format('woff'),
           url('./fonts/social/sociallan.ttf?91207867') format('truetype'),
           url('./fonts/social/sociallan.svg?91207867#sociallan') format('svg');
      font-weight: normal;
      font-style: normal;
    }
     
     
    .demo-icon
    {
      font-family: "sociallan";
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      opacity: .8;
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      padding: 10px 0 6px 0;
      height: 20px;
      width: 40px;
      border-radius: 50%;
      background: gray;
      color: #232424;
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      text-decoration: none;
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      margin-top: 1px;
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
	.demo-icon:hover {
    background: white;
    color: #232424;
}
i.demo-icon {
    /* float: left; */
    /* text-decoration: none; */
}
#block4 a {
    padding-top: 0px;
    display: block;
    float: right;
    margin-top: 13px;
}