﻿.slider{
	position:relative; /*желательно*/
	width:650px; /*ширина по умолчанию (если ее нет - скрипт сам придаст нужную)*/
	height: 325px; /*высота по умолчанию (если ее нет - скрипт сам придаст нужную)*/
	border: 4px solid #fff;
	border-radius: 4px;
	background:#fff;
	overflow:hidden; /*обязательно*/
}

.in_slider{ /*то окно, которое будем крутить*/
	position: relative;
	width: 100%; /*максимальная ширина*/
	overflow:hidden;/*обязательно*/
}
.price_slide{
	width: 99999px; /*желательно огромное число*/
}

.nav{ /*кнопки вперед-назад*/
	position:absolute;
	top: 48%; /*+-по средине*/
	width:28px;
	height:28px;
	cursor:pointer;
	background: transparent url(./ico.png) no-repeat;
	transition: all .3s; /*сss3 - анимация*/
}

.prev{
	left:-5px;
	background-position: center left;
	opacity:0;
}

.next{
	right: -5px;
	background-position: center right;
	opacity:0;
}

.slider:hover .prev{
	left:5px; /*смещаем на нужное место*/
	opacity:0.7;
}
.slider:hover .next{
	right:5px; /*смещаем на нужное место*/
	opacity:0.7;
}

.prev:hover, .next:hover{
	opacity:1 !important; /*убираем прозрачность при наведении курсора*/
}

.list{
	width: 650px; /*эта ширина потом перемеряеться в скрипте*/
	height: 325px; /* -//- */
	float: left;
	display:inline-block;
	background: #aaa url(./load.gif) no-repeat center center; /*после загрузки изображения - анимация пропадает*/
	text-align:center;
	position:relative;
}

.list img{
	width: 650px; /*по умолчанию*/
	height: 325px;/*по умолчанию*/
	/* display:none; */ /*прячем, потом, когда загрузиться - покажем его*/
}

.mark{ /*блок с маркировками*/
	width: 650px;
	text-align:center;
	margin:12px 0;
}
.mark a{
	display:inline-block;
	text-align:center;
	padding: 0 3px;
}
.mark a span{ /*обычная точка*/
	display:inline-block;
	width: 10px;
	height:10px;
	background:rgba(200,200,200,.7);
	border-radius:5px;
	box-shadow: 0 0 2px #fff, inset 0 0 3px silver;
	transition: background .3s;
}
.mark a:hover span{ /*при наведении*/
	background:rgba(0,0,0,.85);
}
.sel_mark span{ /*выбраная точка*/
	background:#000 !important;
}
.restart{
	position:absolute;
	top: 1%;
	right:1%;
	width:70px;
	height:70px;
	background:rgba(0,0,0,.7) url(./rest.png) center center no-repeat;
	cursor:pointer;
	border-radius:40px;
	display:none;
	opacity:.7;
	transition: all .4s;
}
.restart:hover{
	transform: rotate(360deg);
	opacity:1;
}


.test{
	position:absolute;
	z-index:1;
	bottom:20px;
	left:0;
	background:gray; 
	padding: 5px; 
	color:#fff; 
	width: 200px;
}