/*Example4*/

/*Main Container*/




			@media (min-width:1000px){				
				
				.demoPage1250{
					display:hidden;
				}
			}

			@media (min-width:1250px){
				.demoPage1000{
					display:hidden;
				}
				
				.demoPage1250{
					display:block;
				}
			}

			
			
			
			
			/* показываем только клавиши малого размера, а на большом размере - только большого */
				.accordi__hide1000{
					display:none;
				}
			
			@media (min-width:1250px){
				.accordi__hide1250{
					display:none;
				}
				.accordi__hide1000{
					display:block;
				}
			}
			
			



.container4 {	
	#width:100%;										/* делает адаптивность аккордеона */
				#height: 540px;
				#width:1178px;
				#margin-left: -60px;
				
	#border:1px solid black;
	#border-radius: 5px;
	#overflow: hidden;								/* отключение позволяет не прятать при превышении размера контейнера */
}


@media (min-width:1250px){
	.container4 {
		
				#height: 540px;
				#width:1178px;
				#margin-left: 0;
				#position: relative;
				

	
		}
	}


.container4:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	#visibility: hidden;
	visibility: visible;
}
	
.container4 > ul {
	list-style-type: none;
	#margin: 0px;									/* делает отступ клавиш и блока контента от контейнера */
			#margin: 20px;
			
	padding:0px;	
			margin-left: -45px;							/* сдвигает влево контент и клавиши позволяет вместе с left не делать перенос строки*/ /* *********сдвиг********* */
			#padding-right: 0px;								
			#padding-left: 0px;								/* сдвигает всё обратно вправо, чтобы за края не уходило */								/* *********сдвиг********* */
			#padding-right: 60px;
			position: relative;
			left: 45px;									/* сдвигает вправо контент и клавиши */													/* *********сдвиг********* */
}
.container4 > ul > li {
	display: inline;
	margin: 0px;			
	padding:0px;
				
}


/*Handle*/
.handle4 {
				cursor:pointer;						/* курсор не стрелкой */
	float: left;
	width: 17px;									/* ширина клавиш */
	height: 361px;									/* высота всего аккордеона */
	text-align:center;
	background: #fff;
	#border: 0.35em solid transparent;
	border: 0.35em solid white;						/* толщина белой рамки вокруг клавиш */
	
	position: relative;
	box-sizing:content-box;							/* меняет этот параметр из main.css - из-за него клавиши аккордеона глючат, а если поменять, то сабюниты и эвентслист */
		
				margin-top: 26px;																											/* необрезка категории текущего */
	
}

			@media (min-width:1250px){
			.handle4 {
				height: 520px;									/* высота всего аккордеона */
				margin-top: 26px;																											/* необрезка категории текущего */
				}

			}

.handle4 .text{color: white;position:absolute;bottom:50%;left:0;width:100%;font-weight: bold;font-size:13px;
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}


.handle4 img {
	#margin-top:2px;												/* отступ сверху от края блока до клавиш */
	filter:alpha(opacity=100);									/* непрозрачность 100% */
	-moz-opacity:1;
	opacity:1;	
	height:361px;										/* высота клавиш при размере меньше 1250 */	
	width: 17px;										/* ширина клавиш, не меняется */
	}
					
					
					
					
					
								@media (min-width:1250px){
									.handle4 img {
									height:520px;					/* высота клавиш при размере больше 1250 */
									}
								}
					
					
					 
					
					.slide__header__text{
						font-family	: DINPro-Regular,arial,sans-serif;
						font-size:8pt;
						word-wrap: normal;
						text-transform:uppercase;
						
						-moz-transform: rotate(-90deg);
						-o-transform: rotate(-90deg);
						-webkit-transform: rotate(-90deg);
						-ms-transform: rotate(-90deg);
						filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
						#text-align: center;
						text-align: right;
						position: relative;
						#margin-top: -500px;
						#margin-top: -372px;
						#margin-top: -367px;
						margin-top: -210px;
						#margin-top: -554px;		/* добавляем, вот хер знает почему именно столько/ Да потому что плюс высота картинки минус отступ текста*/
						#margin-bottom: auto;
						left: -194px;						
						width: 370px;						
						#height: 20px;
						height: auto;
						color:#262626;
						
						#background-color: #ddd;
						#border: 1px solid #000;
						
						#visibility: collapse;
						#opacity: 0.5;	
						
					}					
					
								.slide__header__text:hover{
									opacity: 1.0;						
									visibility: visible;
									transition-duration: 0.3s;
								}
									
					
								@media (min-width:1250px){
									.slide__header__text{								
										#margin-top: -526px;							
										#left: -50px;
										left: -270px;						
										width: 520px;
										margin-top: -295px;
										}
								}
					
					
					
					.handle-hidden{
						font-family	: DINPro-Regular,arial,sans-serif;
						font-size:8pt;
						text-transform:uppercase;
						-moz-transform: rotate(-90deg);
						-o-transform: rotate(-90deg);
						-webkit-transform: rotate(-90deg);
						-ms-transform: rotate(-90deg);
						filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
						#z-index: -2;																													/* ПРОЯВЛЕНИЕ КАТЕГОРИИ */
						text-align: right;
						position: relative;
						#margin-top: -530px;
						#margin-top: -370px;							/* положение проявляющейся категории при размерах меньше 1250*/
						margin-top: -222px;
						#margin-bottom: auto;
						#left: -50px;
						left: -189px;
						#width: 80px;
						width: 360px;
						height: auto;
						
						#display:none;
						color:#262626;
						
						#background-color: #ddd;
						
						#filter:alpha(opacity=0);									
						#-moz-opacity:.0;							/* прозрачность сначала*/
						
						opacity: 0.0;								/* прозрачность санчала*/						
						visibility: collapse;							/* невидимость сначала */
						
						#background-color: #ddd;
						#border: 1px solid #000;
						
						}						
						
									@media (min-width:1250px){
										.handle-hidden{							
											#margin-top: -530px;			/* положение проявляющейся категории при размерах больше 1250 */
											margin-top: -307px;
											left: -265px;
											width: 510px;
														
										}
									}
		
						
        
													
						.handleOver4 .handle-hidden {																											/* ПРОЯВЛЕНИЕ КАТЕГОРИИ */
							#display: block;
							transition-duration: 0.2s;				/* продолжительность анимации проявления категории */	
						#transition-timing-function: euse-out;			/* анимация начинается быстро, заканчивается медленно */							
						transition-timing-function: step-end;			/* без анимации, появляется сразу в конце времени */							
						#filter:alpha(opacity=50);									/* непрозрачность */
						#-moz-opacity:.50;							/* прозрачность при наведении*/
						
						opacity: 1.0;								/* прозрачность при наведении*/
						visibility: visible;						/* видимость при наведении */
							
						}			
									
					
										
						
					.handle-hidden:hover{
						#opacity:0.5;						
					}
					
					

					/* Попытка сделать клавишу из большой картинки путём показа только её части, сдвиг или обрезка */
/* 			.pic-handle-1 {
				#clip: rect(0px, 68px, auto, 34px); 
				margin-left: -17px; 
				}
*/

			   


.handleOver4 {
	
	#border: 1px solid white;									/* при наведении*/				
				#border-left: 30px solid #fff;					/* лучше так, чем маргин - не прыгает */										/* *********сдвиг********* */
				border-left: 20px solid transparent;			/* прозрачный ободок */
				#transition:border-left-color 0.3s ease 1s;
				#will-change:border-bottom-color;
				transition-duration: 0.5s; 						/* продожительность */
				-webkit-transition-duration: 0.5s;  
				-moz-transition-duration: 0.5s;  
				-o-transition-duration: 0.5s;  
				
				#transition-timing-function: ease-out;			/* анимация начинается быстро, заканчивается медленно */
				transition-timing-function: cubic-bezier;			/* анимация начинается быстро, заканчивается медленно */

				 
				 #transition:border-bottom-color 0.5s ease 0s;
				 #transition-property, transition-duration, transition-timing-function и transition-delay
				
				#margin-left: 15px;
				#float: left;
				#width: 33px;
				#overflow: hidden; 
				#height: 525px;									/* высота при наведении */
				#z-index: 0;																															/* ПРОЯВЛЕНИЕ КАТЕГОРИИ */
}
.handleOver4 img {
	
	margin-top:-5px;												/* отступ сверху от края блока до клавиш при наведении */
				#margin-left: -15px;
				#padding-left: 15px;
				transition-delay: filter 0.1s; 						/* продожительность */
				transition-duration: 0.2s; 						/* продожительность */				
				#transition-timing-function: ease-in;
	filter:alpha(opacity=60);									/* непрозрачность 60% при наведении*/
	-moz-opacity:.60;
	opacity:.60;
}
	
	
	
	
	
	
							
							
						

.handleSelected4 img {

	border-left:1px solid red;									/* выделение активной клавиши */
	display:none;												/* скрыть активную клавишу */
	#visibility: hidden;
}

/*Content Container*/
.contentWrapper4 {
	text-align: justify;
	background-color: #fff;
				#margin-left: 0px;								/* сдвигает слайдер относительно оболочки */									/* *********сдвиг********* */
				margin-top: 5px;
				#padding: 0px;								/* сдвигает слайдер относительно оболочки */									/* *********сдвиг********* */
				#width: 100%;
				
				
				
				margin-top:30px;																											/* необрезка категории текущего */
				margin-bottom:-30px;
				
				
}


								.all_handles{
									#margin-left: -30px;
								}


.contentInnerWrapper4 {
	#padding: 4px;												/* отступ контента слайдера от контентвраппера  */
				padding-left: 40px;
				padding-right: 220px;
				#margin-left: 30px;
				background-color:transparent;
}
.contentWrapper4 h3 {
	border-bottom: 1px solid silver;
	color: #1E90FF;
	text-transform:uppercase;
}
.contentContainer4 {
	padding-left: 0px;
	float: left;
					
	
	width:0px;
				
	#height: 550px;
	height: 391px;
	overflow:hidden;
	
}
				@media (min-width:1250px){
					.contentContainer4 {							
						height: 550px;
					}
				}


/* ******************************************************************* правки слайдов аккордеона ********************************************* */

			
				
					.img-slide{
						filter:alpha(opacity=100);									
						-moz-opacity:1.0;							/* прозрачность санчала*/
						opacity: 1.0;								/* прозрачность санчала*/	
						transition-duration: 0.5s;				/* продолжительность анимации осветления слайда */	
						transition-timing-function: ease-out;
						width:613px;								/* ширина слайдов при размере меньше 1250 */
							#height:391px;
							#background-color: #ddd;
					 }			


								@media (min-width:1250px){
									
									.img-slide {
										width:882px;				/* ширина слайдов при размере больше 1250 */
									}
								}
										
					 
					.img-slide:hover,.img-slide1000:hover{
						filter:alpha(opacity=80);									
						-moz-opacity:.8;							/* прозрачность при наведении*/
						opacity: 0.8;								/* прозрачность при наведении*/	
					 }
	

	
	
				a.hide1250{
					display:none;
				}
				
				a.hide1000{
					display:block;
				}
				
				@media(min-width:1250px){
					a.hide1250{
					display:block;
					}
					a.hide1000{
						display:none;
					}
				}
				
	
	.accord__slide__container{	
		display:block;
		height:361px;							
		width:613px;
			#border:1px solid #000;
	}
	
			@media(min-width:1250px){
				.accord__slide__container{						
					height:520px;							
					width:887px;
					#border:1px solid #000;
				}	
			}
	
	
	/* .accord__slide__image__accordi{			
		height:361px;							
		width:17px;							
		background-color:#262626;
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;			
	} */
	

	.accord__slide__image{	
		#position:relative;
		#display:inline-block;
		height:361px;							
		#width:613px;							/* полная ширина картинки */
		width:245px;							/* ширина видимой части до полного открытия */
		
		#padding-top:100%;								/* высота блока-картинки в процентах от ширины (треть ширины страницы) */
		#padding-top:65.78%;
		#padding-top:361px;						/* делает высоту блока и соответственно картинки, адаптивность нарушается */
		
		#background-color:#262626;
		background-color:#D9D9D9;
		background-size:cover;
		background-position:center;
		background-repeat:no-repeat;
			transition-duration: 0.5s;					/* скорость прозрачности */
	}
								
							.accord__slide__image:hover{
								opacity: 0.80;								/* прозрачность картинок при наведении */
								}
								
					@media(min-width:1250px){
						.accord__slide__image{	
							height:520px;							
							#width:882px;							/* полная ширина картинки */
							width:353px;							/* ширина видимой части до полного открытия */
						}
					}
						
								
								
		.accord__slide__text{
			#position:absolute;				/* абсолют, чтобы рядом был с картинкой - не катит, закрывает другие слайды*/
			#display:inline-block;
			word-wrap:break-word;
			background-color:#ccc;			/* фон блока текста */			
			height:361px;
			width:360px;
			#margin-top:-361px;				/* двигаем вверх от картинки */
			margin-top:-361px;				/* двигаем вверх от картинки */
			margin-left: 253px;				/* двигаем вправо на ширину картинки + 7пх пробел между картинкой и текстом*/
			#display:none;
			transition: 0.5s ease 0s;		/* скорость сдвига вправо */
			
		}
		
		
		
					@media(min-width:1250px){
						.accord__slide__text{	
							height:520px;
							width:528px;
							margin-top:-520px;				/* двигаем вверх от картинки */
							margin-left: 361px;				/* двигаем вправо на ширину картинки + 7пх пробел между картинкой и текстом*/
						}
					}
		
		
		
		.accord__slide__text__title{
			display:block;
			padding:40px 20px 15px 15px;					/* отступы текста от границ - сверху (от самого края, без учёта высоты мета), справа, снизу, слева */
			#transition:color .3s ease 0s;
			#will-change:color;
			font-size:24px;	
			font-weight:400;
			line-height:28px;
			-webkit-flex:1 0 auto;
			-ms-flex:1 0 auto;
			flex:1 0 auto;
			font-family: Fugue-Regular,arial,sans-serif;
			text-transform:uppercase;
			#background-color:#bbb;			/* фон блока текста титла */
			text-align:left;
			#color:rgba(39,39,39,1.0);
			#color:#272727;
			height:0;						/* нулевая высота, чтобы стрелка не была привязана к высоте заголовка */
		}
				
				.accord__slide__text__title__notime{					
							padding:20px 20px 15px 15px;
						}
		
				
								
					.accord__slide__text__title:hover{
						color:rgba(39,39,39,.6);
						#color: #fff;
						}			
					

					@media(min-width:1250px){
						.accord__slide__text__title{
							padding:40px 20px 15px 25px;					/* отступы текста от границ - сверху, справа, снизу, слева */
							font-size:36px;	
							line-height:44px;
						}
						
						
						.accord__slide__text__title__notime{					
							padding:20px 20px 15px 25px;
						}
					}
					
						
		.accord__slide__text__meta{
			padding:15px 0px 10px 15px;								/* отступы текста от границ - сверху, справа, снизу, слева */
			font-weight:400;
			font-size: 16px;
			color:#272727;
			font-size:15px;
			line-height:20px;	
			font-family: Fugue-Mono,arial,sans-serif;
			text-transform:uppercase;
			#background-color:#ccc;			/* фон блока текста мета */
			height:0;						/* нулевая высота, чтобы стрелка не была привязана к высоте заголовка */
			}			
			

					@media(min-width:1250px){
						.accord__slide__text__meta{
							padding:15px 0px 35px 25px;								/* отступы текста от границ - сверху, справа, снизу, слева */
						}
					}
					
			
			
			.accord__slide__arrow{
				#z-index:3;
				
				height:14px;
				width:16px;
				#margin-top:-361px;				/* двигаем вверх от блока текста */
				#margin-top:116px;				/* двигаем вверх от блока текста */
				margin-top:256px;				/* двигаем вверх от блока текста */
				
				margin-left: 10px;				/* двигаем вправо на ширину блока картинки плюс пробел */
				#background-color:#262626;
				background-size:cover;
				background-position:center;
				background-repeat:no-repeat;
			}
			
				.accord__slide__arrow__notime{
					margin-top:276px;
					}
			
					@media(min-width:1250px){
						.accord__slide__arrow{
							#margin-top:170px;
							margin-top:390px;
						}
						
						.accord__slide__arrow__notime{
						margin-top:410px;
						}
					}
					
					


			.accord__slide__text__close{								
				#display:inline-block;
				word-wrap:break-word;
				background-color:#ccc;			/* фон блока текста */
				height:361px;
				width:100px;
				#margin-top:-361px;				/* двигаем вверх от картинки */
				margin-top:-361px;				/* двигаем вверх от картинки */
				margin-left: 523px;				/* двигаем вправо на ширину картинки + 8пх пробел между картинкой и текстом*/
				#display:none;
				visibility: hidden;
				#transition: 0.0s ease 0.5s;	
				#transition: 0.0s ease 0.1s;
				#transition: 0.2s ease 0.0s; 		/* меняется в скрипте для плавности */
			}

					
					@media(min-width:1250px){
						.accord__slide__text__close{
							height:520px;
							width:100px;
							margin-top:-520px;				
							margin-left: 789px;				
						}
					}

					
			.accord__slide__cross{				
				#z-index:3;
				position:relative;
				height:14px;
				width:14px;
				#margin-top:-361px;				/* двигаем вверх от блока текста */
				#margin-top:-24px;				/* двигаем вверх от блока текста */
				#margin-left: 533px;				/* двигаем вправо на ширину блока картинки плюс пробел */
				top:337px;				/* двигаем вверх от блока текста */
				margin-left: 10px;
				#background-color:#262626;
				background-size:cover;
				background-position:center;
				background-repeat:no-repeat;
				#display:none;
				
			}		
			
			
					@media(min-width:1250px){
						.accord__slide__cross{	
							top:495px;			
						}
					}