
.blockMenu h2{
	font-family:opensans;
	font-size:30px;
	text-align:center;

	}

.blockMenu p{
	font-family:opensans;
	font-size:16px;
	color: black;
	text-align:center;
	}	
.blockMenu {
	display:block;
	position:relative;
	top:105px;
	padding:20px;
	width:935px;
	height:70px;
	margin:auto;
	border: 1px;
	border-color: #000000; /* Цвет границы */
    border-style: solid;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	z-index:-20;
	-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 0 0 6px 6px;
background:#ffffff;
opacity: 0.7;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
/*-ms-filter must come before filter*/
filter: alpha(opacity = 80);
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*All filters must be placed together*/

}
.blockOrange2 p{
	font-family:opensans;
	font-size:14px;
	color:black;
	line-height: 140%;
}

.blockOrange2 {
	display:block;
	position:relative;
	width:980px;
	height:100px;
	margin:115px auto 0 auto;
	font-family:opensans;
	font-size:14px;
	border: 1px;
	border-color: #D78828; /* Цвет границы */
    border-style: solid;
	border-radius:6px 6px 0 0;
	box-shadow: 0 2px 2px 2px rgba(0,0,0,0.4);
background: #D78022;
background: -moz-linear-gradient(top, #D78022 50%, #FFA600 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#D78022), color-stop(100%,#FFA600));
background: -webkit-linear-gradient(top, #D78022 50%,#FFA600 100%);
background: -o-linear-gradient(top, #D78022 50%,#FFA600 100%);
background: -ms-linear-gradient(top, #D78022 50%,#FFA600 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D78022', endColorstr='#FFA600',GradientType=0 );
background: linear-gradient(top, #D78022 50%,#FFA600 100%);
}

.blockOrange2 h2{
	font-family:opensans;
	font-size:40px;
	color:#ffffff;
}



#slider {
   top:0px;
   background: #000;
   border-radius:1px;
   border: 1px solid #000000;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 400px;
   width: 974px;
   margin: 40px auto 0;
   overflow: visible;
   position: relative;
   z-index:-50;
}

#mask {
   overflow: hidden;
   height: 400px;
}

/* Список изображений */

#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider li {
   width: 974px;  /* Ширина изображения */
   height: 400px; /* Высота изображения */
   position: absolute;
   top: -400px;	/* Исходное положение  (за пределами слайдера) */
   list-style: none;
}

#slider li.firstanimation {
   animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
   animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
   animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
   animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
   animation: cyclefive 25s linear infinite;
}

/* Анимация */

@keyframes cycle {
   0%  { top: 0px; } /* При запуске слайдера, первое изображение уже видимо */
   4%  { top: 0px; } /* Стартовая позиция */
   16% { top: 0px; opacity:1; z-index:0; } /* С 4% до 16 % (3 секунды) изображение видимо */
   20% { top: 400px; opacity: 0; z-index: 0; } /* с 16% до 20% (1 секунды)выход изображения*/
   21% { top: -400px; opacity: 0; z-index: -1; } /* Возвращение на исходную позицию за пределами маски */
   92% { top: -400px; opacity: 0; z-index: 0; }
   96% { top: -400px; opacity: 0; } /* С 96% до 100% (1 секунда) – вход */
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -400px; opacity: 0; } /* Исходная позиция за пределами маски */
   16% { top: -400px; opacity: 0; }/* Начало движения с 16% */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* С 20% до 24% (в течении 1 секунды) — вход*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* С 24% до 36 % (3 секунды) изображение видимо */
   40% { top: 400px; opacity: 0; z-index: 0; } /* С 36% до 40% (1 секунда)— выход */
   41% { top: -400px; opacity: 0; z-index: -1; }   /* Возврат на исходную позицию */
   100%{ top: -400px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -400px; opacity: 0; }
   36% { top: -400px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 400px; opacity: 0; z-index: 0; }
   61% { top: -400px; opacity: 0; z-index: -1; }
   100%{ top: -400px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -400px; opacity: 0; }
   56% { top: -400px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 400px; opacity: 0; z-index: 0; }
   81% { top: -400px; opacity: 0; z-index: -1; }
   100%{ top: -400px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -400px; opacity: 0; }
   76% { top: -400px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 400px; opacity: 0; z-index: 0; }
}

/* Индикатор выполнения */

.progress-bar {
   position: relative;
   top: -5px;
   width: 680px;
   height: 5px;
   background: #000;
   animation: fullexpand 25s ease-out infinite;
}

/* Строка состояния анимации */

@keyframes fullexpand {
   /* В этих ключевых кадрах анимация стационарна */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* В этих — оживает */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* В этих — плавно заполняется */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* В этих ключевых кадрах индикатор выполнения завершил свой путь */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* В этих ключевых кадрах индикатор выполнения исчезнет, а затем возобновит цикл */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

  #slider .tooltip {
   background: rgba(0,0,0,0.7);
   border-radius:3px;
   width: 600px;
   height: 40px;
   position: relative;
   bottom: 95px;
   left: 0px;
}

#slider .tooltip h1 {
   font-size: 25px;
   font-family:opensans;
   color: #CACACA;
   line-height: 20px;
   padding: 5 5 5 5px;
}

#slider .tooltip {
…
   transition: all 0.9s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
   left: 0px;
}

#slider: hover li,
#slider: hover .progress-bar {
   animation-play-state: paused;
}

.scheme {
	display:block;
	position:relative;
	margin:auto;
	top:10px;
	height:980px;
	width:750px;


}

