/* =============================================================================
   SLIDER
   ============================================================================ */
.slider-wrap    {
	clear:		both;
	margin:     0px auto;
	position:   relative;
	width:		970px;
	z-index: 	90;
}
	.slider {
		height:     230px;
		margin:     0 auto;
		overflow:   hidden;
		padding:	0 0 52px;
		position:   relative;
		width:      970px;
		margin-bottom:-54px;
	}
		.slider .elem   {
			left:       0;
			position:   absolute;
			top:        0;
		}
			.slider .elem img   {
			/*	-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				-ms-border-radius: 5px;
				border-radius: 5px;
				vertical-align: top;*/
			}
			.slider .elem .title,
			.slider .elem .text {
				display:    none;
			}
	.slider-wrap .controls	{
	/*	background:	url('../images/grey_bg.png') 0 0 repeat;*/
		bottom:		72px;
		padding:	5px 7px 13px;
		position:	absolute;
		right:		0;
		z-index:	999;
		box-shadow: inset 0px 0px 65px 2px rgba(0,0,0,0.2);
	}
		.controls .page	{
			color:			#646464;
			cursor:			pointer;
			float:			left;
			line-height:	1.385;
			padding:		0 10px;
			width:			200px;
		}
			.controls .page p	{
				margin:		0;
			}
			.controls .page .title	{
				color:				#979797;
				font-size:			150%;
				
				text-decoration:	underline;
				font-size:10px;
				text-transform:uppercase;
				padding: 20px 0 12px 0;
			}
			.controls .page .text	{
				font-family:	108%.333;
				font-style:		italic;
				width:210px;
			}
			.controls .page:hover,
			.controls .page.active,
			.controls .page:hover .title,
			.controls .page.active .title	{
				color:		#fff;
			}
		.controls .arrow	{
			background:	url('../images/arrow-left.png') 0 0 no-repeat;
			display:	block;
			height:		10px;
			left:		117px;
			margin:		0 0 0 -10px;
			position:	absolute;
			top:		-10px;
			z-index:	999;
			width:		19px;
		}
		.slider-wrap .text p{font-size:12px; font-family:Arial;}
         .controls { background: rgba(34,35,35,0.9);
		 }
    .active{
    border-radius: 10px;
    padding: 20px;
    position: relative;
   
	}
	.page.active:after{
	 content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    left: 20px; top: -45px; /* Положение треугольника */
    border: 20px solid transparent; /* Прозрачные границы */
    border-bottom: 20px solid rgba(34,35,35,0.9); /* Добавляем треугольник */
	}
