@font-face {
    font-family: MASTERPLAN TRIAL; 
    src: url(fonts/10909.otf)format("truetype");
	font-style: normal; 
	font-weight: normal;
	}
body{
	scroll-behavior: smooth;
	font-family: Calibri, sans-serif;
	background-color:  #282827;
	color: #000;
	min-width: 320px;
	position: relative;
}
ul {
	font-family:Calibri, sans-serif;
 	list-style: none; /*убираем маркеры списка*/
  	margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
  	padding-left: 0; /*убираем левый отступ, равный 40px*/
}
p{
	font-family: Calibri, sans-serif;
}
a {
	display: block;
	font-family: Product suns, sans-serif;
	text-decoration:none;
	color: black; /*убираем подчеркивание текста ссылок*/
	} 
div{
	box-sizing: border-box;
}
button{
	text-decoration: none;
	outline: none !important;
	outline-offset: 0;
}
a:hover, a:focus, a:active, a {
	color: black;
	text-decoration: none;
	outline: none !important;
    outline-offset: 0;
    display: block;
}
img{
	max-width: 100%;
	max-height: 100%;
}
input{
	border: none;
	outline: 0;
    outline-offset: 0;
}

/**************стили попап окна******************/

/* ________________Основные стили всего и вся_________________*/

.container{
	background-size: cover;
	background: url(img/fon.png) no-repeat center top;
}
.logo{
	position: absolute;
	margin: 0 0 0 0px;
	/*border: 1px solid blue;*/
	z-index: 999;
}
.logo img {
  -webkit-filter: drop-shadow(5px 5px 5px #000);
  filter: drop-shadow(10px 15px 5px #000);
}
/*****************   МЕнЮ   ********************/
.menu{
	background: #282827;
	margin-top: 20px;
	z-index: 998;
}
.nav{
	float: right;
	background:  #282827;
	margin-top: 10px;
	margin-bottom: 5px;
	color: #dc3d24;
	font-size: 18px;
}
.nav :hover{
	color: #fff;
}
.nav a{
	text-align: right;
	color: #dc3d24;
	background: transparent ; /* #00000000 */
	transition: 0.8s;
	padding-left: 30px;
}
/*.nav a:hover{
	font-size: 19px;
}*/
.tel{
	text-align: right;
	padding-right: 40px;
	box-shadow: 3px 2px 5px 4px #000;
	background:  #dc3d24;
	font-size:18px;
	font-weight: bold; 
	border-radius:  0 0 8px 8px;

}
.zagolovok p{
	padding-left: 40px;
	font-size: 22px;
	color: #fff;
	font-family: Calibri, sans-serif;
	text-shadow: #000 2px 2px 2px;
}



/**********  ФОРМА ОБРАТНОЙ В ШАПКЕ  *********/
.screen_1_form{
	background-color: rgba(41,41,39,0.75);
	border: 2px solid #dc3d24;
	text-align: center;
	color: #fff;
	font-size: 22px;
	line-height: 1.2;
	padding: 20px 0px 10px 0px;
	font-family: Calibri, sans-serif;
}
#input_name{
	width: 100%;
	padding-left: 30px;
	background: transparent;
	border: none;
	margin-top: 10px;
	height: 100%;
	font-size: 20px;
	color: white;

}
#input_phone{
	width: 100%;
	padding-left: 30px;
	background: transparent;
	border: none;
	margin-top: 10px;
	height: 100%;
	font-size: 20px;
	color: white;
}
#line{
	height: 2px;
	background: #dc3d24;
	margin-right: 30px;
	margin-left:  30px;
	margin-bottom: 15px;
}
#button{
	padding: 8px 11px 8px 11px;
	color: #fff;	
	transition: 0.5s;
	cursor: pointer;
	font-size:18px;
	text-align: center;
	background: #dc3d24;
	line-height: 1;
}

#button:hover{
	background: #b44421
}

#dannye1{
	margin-top: 10px;
	display: block;
	font-size: 12px;
	color: #fff;
	line-height: 1.2;
} 
#dannye1 a{
	display: inline;
	font-size: 12px;
	color: #fff;
	line-height: 1.2;
	text-decoration: underline;
}
/******************************************/


/**********  ЛОГОТИПЫ КАМАЗОВ  *********/
.zgl1_scr_2{
	margin-top: 100px;
	margin-bottom: 30px;
	background: url(img/line_right.png) no-repeat;
	font-size: 26px;
	color: #000;
	font-weight: bold;
	padding:5px 0px 5px 30px;
}
.zgl2_scr_2{
	margin-top: 20px;
	margin-bottom: 50px;
	background: url(img/line_right.png) no-repeat;
	font-size: 26px;
	color: #000;
	font-weight: bold;
	padding:5px 30px 10px 20px;

}
.line_on{
	height: 2px;
	background:  #dc3d24;
	transition: 1s;
}
.logo_gruz{
	color: #dc3d24;
	font-size: 24px;
	font-weight: bold;
}
.plashka{
	 transition: 1s;
	height: 150px;
}

.plashka:hover {
}
/************************************************/


/************   ЛОГОТИПЫ ОБЫЧНЫХ АВТО   ********/
.auto{
	margin-right: 10px;
	margin-left:10px;
	height: 121px;
	width: 121px;
	
}
.auto img{
	height: 110px;
	width: 110px;
	transition: 0.5s;
}
.auto img:hover{
	height: 120px;
	width: 120px;
}
/************************************************/



/************   ЛОГОТИПЫ ПОСТАВЩИКИ  ********/

.plashka_1{
	background: #FFF;
	 transition: 1s;
	height: 150px;
}

.plashka:hover {
}
.zgl1_scr_22{
	text-align: right;
	margin-top: 50px;
	margin-bottom: 50px;
	background: url(img/line_left.png) no-repeat right;
	font-size: 26px;
	color: #000;
	font-weight: bold;
	padding:5px 0px 5px 30px;
}
/************************************************/



/**********   фОРМА ДЛЯ ЗАРПОСА ЗАПЧАСТИ   *******/
.form_2{
	margin-top: 100px;
	background: rgba(190,188,184,0.9);
	border: 4px solid  #dc3d24;
	padding-bottom: 15px;: 
}
.form_2 input{
	border: 2px solid  #dc3d24;
}

.zgl{
	text-align: center;
	padding: 0px;
	color: #000;
	font-size: 30px;
	margin:0px;
	font-weight: bold;
}
.zgl_2{
	text-align: center;
	padding: 0px;
	color: #000;
	font-size: 20px;
	margin:0px;
	line-height: 1.1;
}
.marka p{
	font-size: px;
	color: #000;
	margin-top: 20px;
	margin-bottom: 0px;
	}
.marka input{
	padding: 5px 0px 4px 15px ;
	border: 2px solid black;
	width: 100%;
	margin-top: 0px;
}


#button2{
	margin-top: 20px;
	padding: 6px 40px 6px 40px;
	color: #fff;	
	transition: 0.5s;
	cursor: pointer;
	font-size:18px;
	text-align: center;
	background: #dc3d24;
	line-height: 1;
	width: 100%;
}
#button2:hover{
	background: #b44421
}

/************************************************/


/**********  3й экран с преимуществами  *******/
.zgl1_scr_3{
	color: #fff;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	margin-top: 50px;
	margin-bottom: 30px;
}
.prem{
	margin-top: 30px;
	background: rgba(190,188,184,0.4);
	border-radius: 10px;
	padding: 0px 5px 5px 5px;
}
.prem img{
	margin-left: 10px;
	float: left;
	}
#big{
	margin: 0px 0px 0px 50px;
	padding:0px;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
}
#small{
	padding:0px;
	margin-top: 5px;
	margin-left: 50px;
	color: #fff;
	font-size: 16px;
	line-height: 1.2;
}
.sale{
	margin-top: 30px;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	color:#fff;
}
/************************************************/


/********** ШАГИ К СОВЕРШЕНИЮ ПОКУПКИ *******/
#zgl1_scr_4_big{
	margin-bottom: 0px;
	margin-top: 50px;
	text-align: center;
	color: #fff;
	font-size: 32px;
	font-weight: bold

}
#zgl1_scr_4_small{
	line-height: 1;
	text-align: center;
	color: #fff;
	font-size: 18px;
	margin-bottom: 50px;
}
.step{
	font-size:20px;
	text-align: center;
	margin-bottom: 50px;
	transition: 0.8s;
}
.top{
	color: #969695;
	font-weight: bold;
	font-size: 22px;
	margin-top: 33px;
	margin-bottom: 0px;
	transition: 0.8s;
}
.check{
	background:#dc3d24;
	border-radius: 18px;
	width: 36px;
	margin:auto;
	font-size: 24px;
	color: #fff;
	opacity: 0;
	margin-top: 0px;
	opacity: 0;
	margin-bottom: 0px;
	transition: 0.8s;
}
.about{
	margin-top: 20px;
	font-size: 16px;
	color: #969695;
	line-height: 1;
	transition: 0.8s;
}
.step:hover .check{
	border-radius: 18px;
	background:#dc3d24;
	margin-top: 33px;
	opacity: 1;
}
.step:hover .top{
	color: #fff;
	margin-top: 0px;
}
.step:hover .about{
	color: #fff;
	margin-top: 50px;
}
.line_abs{
	position: absolute;
	height: 2px;
	width: 900px;
	left: 50%;
	margin-top: 240px;
	margin-left: -450px;
	text-align: center;
	background: #dc3d24;
}

/************************************************/


/**********  ФОРМА ОБРАТНОЙ В футере  *********/
.screen_5_form{
	background-color:#474747;
	border: 2px solid #dc3d24;
	text-align: center;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	padding: 10px 0px 10px 0px;
	font-family: Calibri, sans-serif;
}
.screen_5_form p{
	padding-bottom: 0px;
}
#input_name1{
		margin-top: 0px;
	width: 100%;
	padding:5px 0px 4px 10px;
	background: #dbdbdb;
	border:1px solid red;
	margin-top: 10px;
	height: 100%;
	font-size: 20px;
	

}
#input_phone1{
	width: 100%;
	margin-top: 0px;
	padding:5px 0px 4px 10px;
	background: #dbdbdb;
	border:1px solid red;
	margin-top: 10px;
	height: 100%;
	font-size: 20px;
}

#button{
	margin-top: 0px;
	padding: 8px 11px 6px 11px;
	color: #fff;	
	transition: 0.5s;
	cursor: pointer;
	font-size:18px;
	text-align: center;
	background: #dc3d24;
	line-height: 1;
}

#button:hover{
	background: #b44421
}

#dannye11{
	margin-top: 10px;
	display: block;
	font-size: 12px;
	color: #fff;
	line-height: 1.2;
} 
#dannye11 a{
	display: inline;
	font-size: 12px;
	color: #fff;
	line-height: 1.2;
	text-decoration: underline;
}
/******************************************/


/**********         КАРТА         *******/
#zgl1_scr_5_big{
	margin-bottom: 0px;
	margin-top: 50px;
	text-align: center;
	color: #fff;
	font-size: 32px;
	font-weight: bold

}
#zgl1_scr_5_small{
	line-height: 1;
	text-align: center;
	color: #fff;
	font-size: 18px;
	margin-bottom: 50px;
}
.line_in_form{
	height: 2px;
	width: 80%;
	left: 50%;
	margin-top: 10px;
	margin-left: 30px;
	background: #dc3d24;
}
.ya_map{
	margin: 0px;
}
}
.mapi{
	z-index: 100;
}
.form{
	position: absolute;
	margin-left: 60%;
	margin-right: 70px; 
	margin-top: 70px;
	z-index: 200;
	background-color: RGBA(0,0,0,0.6);
	border: 2px solid #dc3d24;
	padding-bottom: 22px;

}
.txt_1{
	text-shadow: #000 2px 2px 2px;
	margin-bottom: 0px;
	margin-top: 20px;
	text-align: center;
	font-size: 22px;
	color: #fff;
	line-height: 1.1;
}
.txt_2{
	text-shadow: #000 2px 2px 2px;
	margin-top: 20px;
	text-align: center;
	font-size: 22px;
	color: #fff;
	line-height: 1.1;
	margin-bottom: 0px;
}
.txt_4{
	text-shadow: #000 2px 2px 2px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	font-size: 22px;
	color: #fff;
	line-height: 1.1;
}
.txt_3{
	text-shadow: #000 2px 2px 2px;
	text-align: center;
	font-size: 22px;
	color: #fff;
	line-height: 1.1;
	margin-top: 0px;
}
/************************************************/

/**********   ФУТЕР ФУТЕР *******/
.soc_s{
	margin-top: 38px;
	margin-left: 10px;
	display: inline;
	float: left;
	height: 25px;
	width: 25px;
}
.cr_by{
	margin-top: 30px;
	text-align: center;
	margin-bottom: 10px;
}
.cr_by p{
	display:inline;
	color: #fff;
	font-size: 14px;
}
.cr_by a{
	color: #dc3d24;
	display: inline;
}
.ot p {
	margin-top: 30px;
	float: left;
	 font-family: MASTERPLAN TRIAL; 
	 color: #fff;
	 font-size: 30px;
}
.contacts{
	margin-top: 20px;
	color: #fff;
	text-align: right;
	line-height: 1.3;
}

@media only screen and (max-width: 1199px){

}
@media only screen and (max-width: 180px){

}
@media only screen and (max-width: 991px){
	.logo{
		width: 50%
		height:50%;
	}
	.zagolovok p{
		padding-left: 0px;
		margin-left: 0px;
	}
	.tel{
		padding-right: 10px;
	}
	#button{
		margin-top: 17px;
	}
	
}
@media only screen and (max-width: 991px){
	.line_abs{
	position: absolute;
	display: none;
	}
	.about{
		padding-top: 0px;
		margin-top: 0px;
	}
	.top{
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	.zgl1_scr_2{
		margin-top: 50px;
		text-align: center;
		font-size: 16px;
		line-height: 1;
	}
	.zgl2_scr_2{
		text-align: center;
		font-size: 18px;
		line-height: 1;
		
	}
	.zgl1_scr_22{
		text-align: center;
		font-size: 16px;
		line-height: 1;	
	}
	.logo_gruz{
		font-size: 20px;
	}
	.auto{
		margin-left: 50px;
	}
	.form {
	position: absolute;
	margin-left: 15px;
	margin-right: 30px; 
	margin-top: 70px;
	z-index: 200;
	background-color: RGBA(0,0,0,0.6);
	border: 2px solid #dc3d24;
	padding-bottom: 22px;

}
}

@media only screen and (max-width: 767px){
	.zagolovok{
		padding-left: 0px;
		padding-top: 90px;
		text-align: center;
		margin-top: 20px;
	}
	.ot  {
	text-align: center;
	}
	.contacts{
		margin-top: 20px;
		color: #fff;
		margin-left: 0px;
		text-align: center;
		line-height: 1.3;
	}

	
}
@media only screen and (max-width: 575px){	
	.zgl1_scr_2{
		margin-top: 50px;
		text-align: center;
		font-size: 16px;
		line-height: 1;
	}
}