*::-webkit-input-placeholder {
	color: #666;
	opacity: 1;
}
*:-moz-placeholder {
	color: #666;
	opacity: 1;
}
*::-moz-placeholder {
	color: #666;
	opacity: 1;
}
*:-ms-input-placeholder {
	color: #666;
	opacity: 1;
}

body input:focus:required:invalid,
body textarea:focus:required:invalid {
	
}
body input:required:valid,
body textarea:required:valid {
	
}
body {
	font-family: "DINPro", sans-serif;
	font-size: 16px;
	min-width: 320px;
	position: relative;
}
.hidden {
	display: none;
}
.carousel img {
	width: 100%;
	height: auto;
}
.parallax {
	background-attachment: fixed;
	background-position: 50% 0;
	position: relative;
}
header {
	background-image: url(../img/top_bg.jpg);
	min-height: 500px;
	background-repeat: repeat-x;
	background-position: top center;
	position: relative;
	font-family: "DINPro-Bold";
}
header a {
	color: #fff;
}

.block {
	font-family: "DINPro-Bold";
	display: inline-block;
    margin: 200px 50px;
    
}
.block {
	color: #fff;
}
.block span {
	color: #ef7f1a;
}
.block_text {
	font-family: "DINPro";
	width: 60%;
	color: #fff;
	text-shadow: .07em 0 black;
}

.top_line {
	min-height: 120px;
	-webkit-box-shadow: rgba(255,255,255,.3) 0 0 0 1px;
	box-shadow: rgba(255,255,255,.3) 0 0 0 1px;
	position: absolute;
	top: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.6);
	padding: 22px 0 5px;
}

.top_line a {
	font-size: 21px;
	border-bottom: #fff dashed 1px;
	-webkit-transition: all .25s;
	-o-transition: all .25s;
	transition: all .25s;
}



.top_line a:hover {
	border-bottom: transparent dashed 1px;
}
.top_addr {
	padding-left: 50px;

	background-repeat: no-repeat;
	background-position: left top;
	line-height: 26px;
}


.top_addr strong {
	color: #ef7f1a;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 18px;

}

@media screen and (max-width: 479px) {
.top_addr {
    width: 50%;
    float: left;
    background-image: none;
    padding-left: 10px;
}
}
@media screen and (max-width: 479px){
.top_addr strong {

    font-size: 20px;
    padding-right: 10px;
}}



.top_line .logo {
	border-bottom: none;
	position: absolute;
	margin-top: -22px
}
@media screen and (max-width: 479px){
.top_line .logo {
    display: none;
}}
.top_line .logo:hover {
	border-bottom: none;
}
.logo_wrap {
	position: relative;
	padding-top: 10px;
	width: 160px;
	margin: auto;
}
.ta_right {
	background-image: none;
	padding-left: 0;
	text-align: right;
}
.ta_right span {
	color: #fff;
}

@media screen and (max-width: 479px){
.ta_right {
    width: 50%;
    text-align: right;
  padding-right: 10px;
}
}

.waranty {
	color: #fff;
	cursor: default;
	float: right;
	font-size: 16px;
	border: 3px solid #fff;
	border-radius: 3px;
	padding: 3px 5px;
	line-height: 18px;
	margin-top: 7px;
	margin-right: 80px;
}
.w_left,.w_right {
	display: inline-block;
	vertical-align: top;
} 
.w_left span {
	font-size: 34px
}
.w_left {
	font-family: "BebasNeueBold";
	font-size: 20px;
	margin-top: 13px;
	margin-right: 10px;
}
.main_cats {
	padding: 40px 0 32px;
}
.main_cats h2 {
	text-transform: uppercase;
	font-family: "BebasNeueBold";
	text-align: center;
}
.main_cats h2 strong {
	color: #9a9a9a;
}
.main_cats h2 span {
	color: #FFED00;
}
.sectoin h2 {
	position: relative;
}
.main_cats h2::before {
	content: "";
	position: absolute;
	width: 40px;
	height: 16px;
	top: 27px;
	margin-left: -50px;
}
.main_cats h2::after {
	content: "";
	position: absolute;
	background-position: -40px 0;
	width: 40px;
	height: 16px;
	top: 27px;
	margin-left: 10px;
}


@media screen and (max-width: 479px){
.main_cats h2::before{
    top: 8px;
   
}}

@media screen and (max-width: 479px){
.main_cats h2::after{
    top: 8px;
   
}}


.mc_item {
	background-color: #e6e5e5;
	padding-top: 10px;
}
.mc_item_wrap {
	
	width: 100%;
	 margin: auto;
  background: #fff;
  overflow: hidden;
	display: inline-block;
	text-align: center;
}
.mc_item_wrap:nth-chid(1) {
	margin-left: 0;
}

.mc_wrap {
	text-align: center;
	padding: 0;
	position: relative;
}
.mc_item_wrap a {
	color: #000;
}
.mc_item span {
	display: block;
	height: 66px;
	width: 99px;
	background-image: url("../img/cats_iconset.png");
	margin: 10px auto 0;
}
.mc_item_wrap:nth-child(1) span{
 background-position: 0px 0;
}
.mc_item_wrap:nth-child(2) span{
 background-position: 510px 0;
}

.mc_item_wrap:nth-child(3) span{
 background-position: 405px 0;
}

.mc_item_wrap:nth-child(4) span{
 background-position: 300px 0;
}

.mc_item_wrap:nth-child(5) span{
 background-position: 197px 0;
}
.mc_item_wrap:nth-child(6) span{
 background-position: 100px 0;
}
.mc_item h4 {
	font-family: "BebasNeueBold";
	font-size: 20px;
	font-weight: normal;
	margin-top: 0;
	margin-bottom: 0;
}
.mc_item a:hover h4,
.mc_item_wrap.active h4 {
	text-decoration: none;
}
.mc_item_wrap.active,
.mc_item_wrap:hover {
	background-color: #f5f5f5;
}
.mc_toggle {
	position: relative;
	background-color: #a2d9f7;
	height: 20px;
	cursor: pointer;
	background-image: url(../img/mc_arr.png);
	background-repeat: no-repeat;
	background-position: -126px 7px;
}
.mc_item_wrap.active .mc_toggle,
.mc_item_wrap:hover .mc_toggle {
	background-color: #0880bf;
	background-position: 73px 7px;
}
.mc_item_wrap_af {
	background-image: url(../img/mc_c_arr.png);
	content: "";
	height: 11px;
	width: 21px;
	position: absolute;
	margin: 20px 10px;
	display: none;
}

.orange {
	width: 50px;
	height: 50px;
	background-color: #fff;
	border: 0.1em solid #ef7f1a;
	color: #ef7f1a;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	padding: .18em .25em;
	float: left;
	margin-right: 20px;
}
.palitrablue {
	width: 100px;
	height: 100px;
	background-color: #0069b4;
	
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	padding: .60em .25em;
}
.palitragreen {
	width: 100px;
	height: 100px;
	background-color: #13a538;
	
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	padding: .60em .25em;
}
.palitrared {
	width: 100px;
	height: 100px;
	background-color: #ff0019;
	
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	padding: .60em .25em;
}

.palitraorange {
	width: 100px;
	height: 100px;
	background-color: #E15501;
	
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	padding: .60em .25em;
}
.palitrablack {
	width: 100px;
	height: 100px;
	background-color: #000;
	
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	padding: .60em .25em;
}
.palitrawhite {
	width: 100px;
	height: 100px;
	background-color: #fff;
	border: 0.1em solid #2A2D2F;
	color: #000;
	font-size: 24px;
	border-radius: 50%;
	text-align: center;
	padding: .60em .25em;
}

.poster{
    position:relative;
    margin:0;
   
}
.descr{
	display:none;
    margin-top:20px;
    background:#f3f3f3;
    -moz-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 5px 5px rgba(0,0,0,0.3);
    box-shadow:0 5px 5px rgba(0,0,0,0.3);
    background-color: #086496;
    color: #fff;
	font-size: 14px;
	position: absolute;
	width: auto;
	padding: 15px 0;
	list-style-type: none;
	font-family: "RobotoRegular";
}
.poster:hover .descr{
    display:block;
    position:absolute;
    top:140px;
    z-index:9999;
    width:auto;
}

.about_us {
	position: relative;
	width: 100%;
	padding: 40px 0;
}
.abouttext {
	margin: 50px;
	color: #808080;
}

.bold_center {
	text-align: center;  /* выравнивание заголовка по центру обертки */
    width: 80%;          /* ширина обертки. На самом деле для фиксированной верстки можно использовать и px, но лучше сразу адаптировать под разные устройства, т.к. это, что называется, тренди :-) */
    margin: 0 auto;      /* выравнивание обертки по центру документа */
    overflow: hidden;
    color: #808080;
    font-family: "DINPro-Bold";
    padding-bottom: 20px;
}
.bold_center span{
position: relative;
}
.bold_center span:before {
    display: block;                  /* делаем псевдоэлемент блоком для последующего работы с ним, как с простым div'ом */
    width:1000px;                    /* устанавливаем ширину линию. Можно использовать произвольную ширину */
    content: '';                     /* позволяет вставлять генерируемое содержание в текст страницы, которое первоначально в тексте отсутствует */
    position: absolute;              /* абсолютное позиционирование для управления линиями */
    border-bottom: 1px solid #808080;   /* бордер псевдо дива, т.е. сама линия */
    top:50%;                         /* позиционирование по вертикали */
    right: 250px;                    /* позиционирование по горизонтали */
}
 
/* аналогичные стили для второго псевдоэлемента */
 
.bold_center span:after {
    display: block;
    width:1000px;
    content: '';
    position: absolute;
    border-bottom: 1px solid #808080;
    top:50%;
    left: 250px; 
}

.grey {
	padding: 50px 0;
	height: auto;
background: repeating-linear-gradient(45deg, #fffaf0, #fffaf0 10px, #fff 10px, #fff 20px);
}

li{
	list-style: none; /* Убираем исходные маркеры */

 }

.strela li{
	list-style: none; /* Убираем исходные маркеры */
    background: url(../img/strela.png) no-repeat;
    padding: 15px 0 20px 70px;}

.formblock {
	background-color: #f4f2f2;
	padding: 40px 0 0;
}

.formblock h2 {
	text-transform: uppercase;
	font-family: "BebasNeueBold";
	text-align: center;
}
.formblock h2 strong {
	color: #9a9a9a;
}
.formblock h2 span {
	color: #0972ab;
}

.formblock h2::before {
	content: "";
	position: absolute;
	width: 40px;
	height: 16px;
	top: 27px;
	margin-left: -50px;
}
.formblock h2::after {
	content: "";
	position: absolute;
	background-position: -40px 0;
	width: 40px;
	height: 16px;
	top: 27px;
	margin-left: 10px;
}

@media screen and (max-width: 479px){
.formblock h2::before{
    top: 8px;
   
}}

@media screen and (max-width: 479px){
.formblock h2::after{
    top: 8px;
   
}}








.form {
	background-color: #fff;
	padding: 25px 30px;
	border: none;
	border-radius: 5px;
}
.form h2 {
	text-transform: uppercase;
	margin-top: 0;
	font-family: "RobotoBold", sans-serif;
	font-size: 22px;
	color: #cc0000;
	line-height: 22px;
}
label {
display: block;
margin-bottom: 10px;
color: #666;
font-size: 12px;
}
input {
display: block;
line-height: 30px;
height: 30px;
border: 1px solid;
box-shadow: 0 0 20px rgba(0,0,0,.02) inset;
width: 100%;
text-indent: 10px;
}
select {
display: block;
line-height: 30px;
height: 30px;
border: 1px solid;
box-shadow: 0 0 20px rgba(0,0,0,.06) inset;
width: 100%;
text-indent: 10px;
}
input:focus {
color: #cc0000 0 0 0 2px;
border-radius: 3px;
border-color: #cc0000;
}
button {
	border: none;
}

  .zakaz h2 {
   	text-align: center;
   }
   .buttons_zakaz {
 color:#ef7f1a;
 padding: 10px 20px;
 width:200px;
 text-decoration:none;
 text-align:center;
 margin:50px auto;
 display: block;
 background-image: linear-gradient(to left,transparent,transparent 50%,#ef7f1a 50%,#ef7f1a);
 background-position: 100% 0;
 background-size: 200% 100%;
 transition: all .25s ease-in;
 font: 400 18px tahoma;
 border: 1px solid #ef7f1a;
}
a.buttons_zakaz:hover {
background-position: 0 0;
color:#fff;
}

.map {
	width: 100%;
	height: 400px;
	padding:0; 
	margin: 20px 0 0 0;

}


.footer {
	background: #2a2a2a;
	color: #fff;
	font-size: 15px;
	font-family: "DINPro-Bold";
	text-transform: uppercase;
	line-height: 60px;
}

@media screen and (max-width: 479px){
.footer a{
    font-size: 15px;
    padding: 0;
   
}}


.footer ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
}
.footer li {
	float: left;
}
.footer a {
	color: #cecece;
	padding: 0 26px;
	display: block;
}
.footer a:hover {
color: #fff;
}
.footer p {
padding: 2px;
text-align: center;
}


/* весь контейнер поддерживает перспективу */
.flip-container {
 perspective: 1000;
}
 /* переверните сторону при проведении мышью */
 .flip-container:hover .flipper, .flip-container.hover .flipper {
 transform: rotateY(180deg);
 }
 
.flip-container, .front, .back {
 width: 320px;
 height: 290px;
 border-left: 1px solid #fff;

}
 
/* здесь находится скорость перевертывания */
.flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}
 
/* скройте обратную сторону во время переворота */
.front, .back {
 backface-visibility: hidden;
 
 position: absolute;
 top: 0;
 left: 0;
}
 
/* лицевая сторона размещена над обратной */
.front {
 z-index: 2;
 background-color: #fff;
 padding: 40px;

}

/* обратная, изначально скрытая сторона */
.back {
 transform: rotateY(180deg);
 background-color: #fff;
 color: #fff;
 padding: 40px;
}

3
.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
 transform: rotateY(180deg);
}

.icon {
	margin-bottom: 20px;
}