ul.sublist {
	user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

ul.sublist,
ul.sublist ul {
	list-style: none;
	/*padding-right: 63%;*/
	margin: 20px 0 20px 0;
	padding: 0 0 20px 5%;
	/*display: inline-block;*/
}

ul.sublist ul {
	margin-left: 10%;
	margin-top: 6px;
	margin-bottom: 6px;
	transition: .15s margin-top;
}

ul.sublist li {
	padding: 0px;
	margin: 0px;
}

ul.sublist > li ul {
	display: none;
}

ul.sublist li.show > ul {
	display: block !important;
	margin-left: -20px;
}

ul.sublist li > span > i {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 0;
	padding: 5px 0 5px 10px;
	text-align: center;
	border-left: 1px solid rgba(0,0,0,.2);
	font-style: normal;
	margin-left: 0px;
}

ul.sublist li > span,
ul.sublist li > a {
	/*position: relative;*/
	text-decoration: none;
	background-color: rgba(0,0,0,.025);
	display: inline-block;
	padding: 10px 0 10px 10px;
	cursor: pointer;
	/*border-left: 1px solid rgba(0,0,0,.2);*/
	border: 1px solid rgba(0,0,0,.2);
	min-width: 330px;
	width: 95%;
	color: #212529;
	transition: .5s padding-left, .5s background-color;
}

ul.sublist.counter li > span {
	/*padding-right: 1%;*/
	background-color: #fff;
}

ul.sublist li:last-child > span,
ul.sublist li:last-child > a {
	/*border-bottom: none;*/
}

ul.sublist li > span:hover {
	background-color: rgba(0,0,0,.1);
	padding-left: 2%;
}
ul.sublist li > a:hover {
	background-color: rgba(0,0,0,.1);
	padding-left: 2%;
}

ul.sublist li > a.active {
	display: none;
}

.test-div-2,
.test-div-3{
  display:none;
}
/* Табы на html & css */

.tabs li {list-style-type: none;}
.tabs li a {
	float: left;
	position: relative;
	display: inline-block;
	font-size: 90%;
	font-weight: 700;
	color: rgb(209,209,217);
	text-decoration: none;
	text-shadow: 0 -1px 2px rgba(0,0,0,.2);
	padding: .5em 1em;
	outline: none;
	border-radius: 3px;
	background: linear-gradient(rgb(110,112,120), rgb(81,81,86)) rgb(110,112,120);
	box-shadow:
   0 1px rgba(255,255,255,.2) inset,
   0 3px 5px rgba(0,1,6,.5),
   0 0 1px 1px rgba(0,1,6,.2);
	transition: .2s ease-in-out; 
	text-align: center;
    width: 31%;
	margin: 10px;
    display: block;
	
}
.tabs-content {
    width:960px;
    height:300px;
    overflow:hidden;
}
.tabs-content ul {
    list-style: none
    /* Эти 3 линии для Opera */
    height: 320px;
    overflow: scroll;
    overflow-y: hidden;
}
.tabs-content ul li {
    width:960px;
    height:300px;
	list-style-type: none;
	padding: 0;
}
/* Табы на html & css конец */
@charset "UTF-8";
/* 
* Модальные окна
* на чистом CSS, без javascript
* и дополнительных изображений
*
* Копирайт (c) 2014 shurawi http://www.dbmast.ru
*/

/*** Стили относящиеся к модальному окну и содержанию ***/
.popup h1,
.popup h2,
.popup h3 {
color: #008000;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font-weight: normal;
}
.popup h1 { /* заголовок 1 */
font-size:24px;
}
.popup h2 { /* заголовок 2 */
font-size: 1.5em;
}
.popup h3 { /* заголовок 3 */
font-size: 1.2em;
}
/* Базовые стили слоя затемнения и модального окна  */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
visibility: hidden;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
position: fixed; /* фиксированное поцизионирование */
cursor: default; /* тип курсара */
}
.overlay:target {
visibility: visible;
opacity: 1;
-webkit-transition: all 0.6s;
-moz-transition: all 0.6s;
-ms-transition: all 0.6s;
-o-transition: all 0.6s;
transition: all 0.6s;
}

/* стили модального окна */
.popup {
top: 0;
right: 0;
left: 50%;
font-size: 14px;
font-family: 'Tahoma', Arial, sans-serif;
z-index: 10000;
margin: 0 auto;
width: 100%;
min-width: 320px;
max-width: 820px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 15px;
border: 1px solid #383838;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
background-color: #FFFFFF;
/* внешняя тень */
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-o-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
/* трансформация */
-webkit-transform: translate(-50%, -150%);
-ms-transform: translate(-50%, -150%);
-o-transform: translate(-50%, -150%);
transform: translate(-50%, -150%);
}
/* активируем мод. окно */
.overlay:target+.popup {
top: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* анимируем трансформацию */
-webkit-transition: transform 0.6s ease-out;
-moz-transition: transform 0.6s ease-out;
-ms-transition: transform 0.6s ease-out;
-o-transition: transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}
/* формируем кнопку закрытия */
.close {
position: absolute;
padding: 0px 2px;
top: -10px;
right: -10px;
width: 22px;
height: 22px;
border: 2px solid #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font-weight: bold;
line-height: 7px;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
 -o-transition: all ease .8s;
 transition: all ease .8s;
}
.close:before {
color: rgba(255, 255, 255, 0.9);
content: '\2715';
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}
.close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.popup p {
margin: 0;
padding: 10px;
}
/* планшет */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	.popup {
		width: 95%;
	}
}
/* смарт */
@media only screen and (min-width: 320px) and (max-width: 767px) {
	.popup {
		width:85%;
	}
}
/* изображения внутри окна */
.popup img {
display: block;
border: none;
width: 100%;
height: auto;
}
/* миниатюры слева/справа */
.pic-left, 
.pic-right {
    width: 25%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 5px 15px 5px 0;
}
.pic-right {
    float: right;
    margin: 5px 0 5px 15px;
}
/* встроенные элементы м-медиа, фреймы */
/* адаптивный блок видео */
.video { 
position: relative; 
padding-bottom: 56.25%; 
height: 0; 
overflow:hidden; 
} 
.video iframe, 
.video object, 
.video embed {
position: absolute; 
top: 0; 
left: 0; 
width: 100%;
height: 100%; 
}
/* Слайдер для производителей */
#slider {
    height: 210px;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}
#slider div {
    position: relative;
    height: 300px;
}
#slider img {display: block;}
#slider h1 {
    color: white;
    font-size: 300%;
    left: 60px;
    position: relative;
    text-shadow: 0 0 3px #000000, 0 0 3px #000000; /* Only CSS3, no prefix */
    top: -260px;
}
#slider p {
    background-color: rgba(0, 0, 0, 0.8);
    color: #EEEEEE;
    line-height: 140%;
    padding: 10px 20px;
    position: relative;
    top: -250px;
}
#slider div {
    animation: mymove 20s linear infinite;
    /* “ак как мы сдвинулм дл¤ FF (см. ниже) слайды,
    то делаем небольшую задержку дл¤ первого цикла */
    -moz-animation: mymove 20s linear 3s infinite; /* Firefox */
    -webkit-animation: mymove 20s linear infinite; /* Safari and Chrome */
}

/* —амое сложное просчитать анимацию */
@keyframes mymove {
    8% {top: 0px;}
	11% {top: -300px;}
	
	19% {top: -300px;}
	22% {top: -600px;}
	
	30% {top: -600px;}
	33% {top: -900px;}
	
	41% {top: -900px;}
	44% {top: -1200px;}
	
	52% {top: -1200px;}
	55% {top: -1500px;}
	
	63% {top: -1500px;}
	66% {top: -1800px;}
	
	74% {top: -1800px;}
	77% {top: -2100px;}
	
	85% {top: -2100px;}
	88% {top: -2400px;}
	
	96% {top: -2400px;}
	99.9999% {top: -2700px;}
}
/* Firefox */
@-moz-keyframes mymove {
    /* “ак как Firefox имеет свойство лагать на последнем кадре,
    то дл¤ него необходимо сделать возврат
    анимации посредине последнего/первого стоп-кадра.
    ѕо умолчанию, логически верно сделать так же,
    как и дл¤ других браузеров. */

   /* 0% {top: 0px;}

    21% {top: 0px;}
	24% {top: -300px;}
	
	34% {top: -300px;}
	37% {top: -600px;}
	
	47% {top: -600px;}
	50% {top: -900px;}
	
	60% {top: -900px;}
	63% {top: -1200px;}
	
	73% {top: -1200px;}
	76% {top: -1500px;}
	
	86% {top: -1500px;}
	89.9999% {top: -1800px;}

    90% {top: 0px;}
    100% {top: 0px;}*/
}

/*Safari and Chrome*/
@-webkit-keyframes mymove {
    0% {top: 0px;}

    8% {top: 0px;}
	11% {top: -300px;}
	
	19% {top: -300px;}
	22% {top: -600px;}
	
	30% {top: -600px;}
	33% {top: -900px;}
	
	41% {top: -900px;}
	44% {top: -1200px;}
	
	52% {top: -1200px;}
	55% {top: -1500px;}
	
	63% {top: -1500px;}
	66% {top: -1800px;}
	
	74% {top: -1800px;}
	77% {top: -2100px;}
	
	85% {top: -2100px;}
	88% {top: -2400px;}
	
	96% {top: -2400px;}
	99.9999% {top: -2700px;}

    100% {top: 0px;}
}