/*==============================================================*/
/* ===========================Reset ===========================*/
/*============================================================*/
ul{list-style-type: none; padding-left: 0;}
a{text-decoration: none;}
p{margin: 0;}
button{border: unset; background: unset;}
a{color: inherit;}




/*==============================================================*/
/* ===========================FONTS ===========================*/
/*============================================================*/


/*===== Использование шрифтов ===*/
/*

0. .font_interface: 
		Класс, для подписи элементов интерфейса. 
		Самый маленький шрифт не предназначенный для текстов

1. .font_low: 
		Класс, соответствующий малой степени внимания. 
		Может использоваться, например, для текста с нежным шрифтом, который не привлекает сильное внимание.

2. .font_regular: 
		Класс, соответствующий средней степени внимания. 
		Может использоваться для обычного текста на сайте со стандартным шрифтом, 
		который не является особенно акцентирующим.

3. .font_hight: 
		Класс, соответствующий активной степени внимания. 
		Может использоваться для элементов, 
		которые требуют большего внимания пользователя, например, для заголовков или важных сообщений.

4. .font_attention: 
		Класс, соответствующий увлеченной степени внимания. 
		Может использоваться для элементов, которые должны 
		выделяться на сайте и привлекать особое внимание 
		пользователей, например, для важных блоков контента или интерактивных компонентов.

5. .font_intense: Класс, соответствующий максимальной степени внимания. 
						 Может использоваться для элементов, которые требуют 
						 максимального внимания пользователя, например, 
						 для предупреждающих или критически важных сообщений, 
						 или для элементов интерфейса, которые должны 
						 быть чрезвычайно акцентированными.
*/



/*===== Подключение шрифтов  =====*/
@font-face {font-family: 'OpenSans';				src: url('../../assets/fonts/opensans/OpenSans.ttf');								font-display: swap; font-display: auto;	}
@font-face {font-family: 'OpenSansBold';			src: url('../../assets/fonts/opensans/OpenSansBold.ttf');						font-display: swap; font-display: auto;	}	 

@font-face {font-family: 'Montserrat-Medium';	src: url('../../assets/fonts/montserrat/Montserrat-Medium.ttf');				font-display: swap; font-display: auto;	}
@font-face {font-family: 'Montserrat-Bold';		src: url('../../assets/fonts/montserrat/Montserrat-Bold.ttf');					font-display: swap; font-display: auto;	} 


@font-face {font-family: 'Roboto-Medium';			src: url('../../assets/fonts/roboto/Roboto-Medium.ttf');							font-display: swap; font-display: auto;	}
@font-face {font-family: 'Roboto-Regular';		src: url('../../assets/fonts/roboto/Roboto-Regular.ttf');						font-display: swap; font-display: auto;	}
@font-face {font-family: 'Roboto-Bold';			src: url('../../assets/fonts/roboto/Roboto-Bold.ttf');							font-display: swap; font-display: auto;	}


@font-face {font-family: 'Graphik_LC-Regular';	src: url('../../assets/fonts/graphik_dino_inter/Graphik_LC-Regular.ttf');	font-display: swap; font-display: auto;	}
@font-face {font-family: 'Graphik_LC-Medium';	src: url('../../assets/fonts/graphik_dino_inter/Graphik_LC-Medium.ttf');	font-display: swap; font-display: auto;	}

@font-face {font-family: 'DINPro';					src: url('../../assets/fonts/graphik_dino_inter/DINPro.otf');					font-display: swap; font-display: auto;	} 
@font-face {font-family: 'Raleway';					src: url('../../assets/fonts/Raleway-VariableFont_wght.ttf');				font-display: swap; font-display: auto;	} 


@font-face {font-family: 'Raleway-bold';			src: url('../../assets/fonts/raleway/Raleway-Bold.ttf');					font-display: swap; font-display: auto;	} 
@font-face {font-family: 'Raleway-Black';			src: url('../../assets/fonts/raleway/Raleway-Black.ttf');				font-display: swap; font-display: auto;	} 
@font-face {font-family: 'Raleway-SemiBold';		src: url('../../assets/fonts/raleway/Raleway-SemiBold.ttf');			font-display: swap; font-display: auto;	} 
@font-face {font-family: 'Raleway-Regular';		src: url('../../assets/fonts/raleway/Raleway-Regular.ttf');				font-display: swap; font-display: auto;	} 

@font-face {font-family: 'Roboto-light';				src: url('../../assets/fonts/roboto/Roboto-light.woff');					font-display: swap; font-display: auto;	} 
@font-face {font-family: 'Robotocondensed-light';	src: url('../../assets/fonts/roboto/robotocondensed-light.woff');		font-display: swap; font-display: auto;	} 


/*===== Настройки шрифтов ===*/
.font_low, .font_regular, .font_hight, .font_attention, .font_intanse, input{font-stretch: 100%; -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums;}




/* low */
/* .font_low{font-family: 'Graphik_LC-Regular'; font-size: 12px; 	line-height: 15px; font-weight: 400; opacity:0.7;}  */


/* interface */
.font_interface{font-family: 'Roboto-light'; font-size: 12px; line-height: normal; font-weight: 400; }  

/* low */
.font_low{font-family: 'Roboto-light'; font-size: 14px; line-height: normal; font-weight: 400; opacity:0.8;}  


/* regular */
.font_regular{	font-family: 'Raleway-Regular'; 	font-size: 15px; font-weight: 400;}	  


/* hight */
.font_hight{font-family: 'Raleway-bold';	font-size: 23px; line-height: normal;}
.font_hight_uppercase{font-family: 'Raleway-SemiBold';	font-size: 16px; line-height: normal; text-transform: uppercase;}



/* attention */
.font_attention{font-family: 'Raleway-SemiBold'; font-size: 45px; line-height: normal;}	
@media(max-width: 576px){.font_attention{font-size: 36px;}}


/* intense */
.font_intanse{font-family: 'Raleway-Black'; font-size: 127px; line-height: 115px;}	
@media(max-width: 1024px){.font_intanse{font-size: 100px;}}
@media(max-width: 768px){.font_intanse{font-size: 90px;}}
@media(max-width: 576px){.font_intanse{font-size: 50px;}}
@media(max-width: 320px){.font_intanse{font-size: 35px;}}




/*==============================================================*/
/*========================Базавые классы=======================*/
/*============================================================*/

/*===== Container =====*/
@media (min-width: 1400px){
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1370px;
		/* max-width: 1160px; */
	}
}


/* ====== радиус ======*/
.big_radius, .medium_radius, .small_radius{overflow: hidden;}
.big_radius		{border-radius: 20px;}
.medium_radius	{border-radius: 5px;}
.small_radius	{border-radius: 3px;}


/* ====== ссылки ======*/




a:hover{
	color: black;
    opacity: 0.7;
	-webkit-transition: all 1s ease;
    transition: all 1s ease; 
}


a.white:hover{
	color: white;
    opacity: 0.7;
	-webkit-transition: all 1s ease;
    transition: all 1s ease; 
}







/*====== Основной вид кнопки  ======*/
.main_btn{
	width: 100%;
	height: 40px;
	padding: 0px 30px;
	text-align: center;
}
.btn:hover {color: #ffffff;}

.btn-check:focus+.btn, 
.btn:focus {
	box-shadow: unset;
}


/*====== инпуты на всем сайте ======*/
input[type="text"], input[type="tel"], input[type="email"], input[type="date"], input[type="password"], textarea{
	width: 100%;
	height: 42px;
	font-size: 14px;
	text-align: left;
	padding-left: 15px;
	margin-bottom: 10px;
	outline: none;    
    -webkit-appearance: none;
    -moz-appearance: none;
}

button.toggle-password{
	height: 42px;
	opacity: 0.6;
}

input.password{
	border: unset;
	margin-bottom: unset;
}



input::placeholder 	{	color: #000000;	  }
input, textarea 		{	outline:none;			}
textarea					{	min-height: 200px;	}





/*==============================================================*/
/* =========================== Utilities ======================*/
/*============================================================*/

/* ======== STICKY ========== */
@media(min-width: 960px){
	.sticky {
		position: sticky;
		top: 80px;
	}
}

/* ======== NOSELECT ========== */
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	  -webkit-user-select: none; /* Safari */
		-khtml-user-select: none; /* Konqueror HTML */
		  -moz-user-select: none; /* Old versions of Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				 user-select: none; /* Non-prefixed version, currently
											  supported by Chrome, Edge, Opera and Firefox */
}



.relative{position: relative;}

.mb-10 {
	margin-bottom: 7rem !important;
}
.mt-10 {
	margin-top: 7rem !important;
}

.pointer{cursor: pointer;}


.shadow{
	box-shadow: 0 4px 15px rgb(35 31 32 / 10%) !important;
}





/* Изменение порядка элементов в фильтрах и в каталоге */

/* В фильтрах */
.filters_area {display: flex; flex-direction: column;}

.wrap_filter[value="Техника"] { order: 1; }
.wrap_filter[value="Шлемы и аксессуары"] { order: 2; }
.wrap_filter[value="Одежда"] { order: 3; }
.wrap_filter[value="Обувь"] { order: 4; }
.wrap_filter[value="Мотохимия"] { order: 5; }



/* Меняем поряок в фильтрах в подкатегориях */
.cat_2_list{display: flex; flex-direction: column;}

.cat_2_list li[value="джерси"] { order: 1; }
.cat_2_list li[value="мотоштаны"] { order: 2; }
.cat_2_list li[value="мотокуртки"] { order: 3; }
.cat_2_list li[value="мотоперчатки"] { order: 4; }
.cat_2_list li[value="мотозащита"] { order: 5; }
.cat_2_list li[value="мотодождевики"] { order: 6; }
.cat_2_list li[value="подшлемники"] { order: 7; }
.cat_2_list li[value="термобелье"] { order: 8; }
.cat_2_list li[value="мотокомбинезоны"] { order: 9; }
.cat_2_list li[value="повседневная одежда"] { order: 10; }



/* Устанавливаем порядок элементов  в каталоге */
.nav_content__column {display: flex;}

.content_item:nth-child(1) { order: 4; } /* мотоперчатки */
.content_item:nth-child(2) { order: 7; } /* подшлемники */
.content_item:nth-child(3) { order: 6; } /* мотодождевики */
.content_item:nth-child(4) { order: 10; } /* повседневная одежда */
.content_item:nth-child(5) { order: 5; } /* мотозащита */
.content_item:nth-child(6) { order: 8; } /* термобелье */
.content_item:nth-child(7) { order: 1; } /* джерси */
.content_item:nth-child(8) { order: 2; } /* мотоштаны */
.content_item:nth-child(9) { order: 9; } /* мотокомбинезоны */
.content_item:nth-child(10) { order: 3; } /* мотокуртки */