html{
	



}
*{
	box-sizing: border-box;
}
body{
	width: 100%;
	
	font-family: 'Roboto', sans-serif;
	margin: 0;
	
}

/* Начинаются стили шапки сайта*/
.header{
 max-width: 960px;
 margin: 0 auto;
 padding: 0 10px;
 display: flex;
 flex-flow: row wrap;
 justify-content: space-between;
 align-items: center;

}

/*Правая часть шапки */
.logotip{
 display: flex;
 flex-flow: row wrap;

}
.logotip a{
	
	padding-right: 5px;
	margin-right: 5px;

}
.logotip img{
	padding-top: 5px;
}
.logotip h1{
	margin: 0;
	text-transform: uppercase;
	font-size: 25px;
	font-weight:bold;
	color:rgb(0,155,255);
	text-shadow: 1px 1px 1px rgba(9, 60, 90, 0.95);
}
.logotip p{
	
	line-height: 0%;
	color: rgb(160,160,160);
}
.logotip .dop{
	color:rgb(160,160,160);
}
/*Середина шапки где указано время работы */
.timework{
	padding: 0 10px;
	text-align: center;
	font-weight: 400;
	color: rgb(0,0,0);	
}
.timework p strong{
	color:rgb(0,155,255);	
}
/* Левая часть шапки: телефон и почта*/
.contakty{
	padding-top: 15px;
	text-align: right;
	
}
.contakty p{
	color: rgb(160,160,160);
}
.telephon a{
	text-decoration: none;
	font-size: 30px;
	font-weight:bold;
	color:rgb(0,155,255);
	text-shadow: 1px 1px 1px rgba(9, 60, 90, 0.95);
}
.telephon span{
	color:black;
}
.ip{
	
	padding-bottom: 10px;
	text-decoration: none;
	color:rgb(160,160,160);
	margin: 5px 0 0 0;

	
}
/* Заливка главного контента*/
.main-bacground{
	width: 100%;
	
	padding-bottom: 30px;
	
	background: rgb(81,222,231);
	background: radial-gradient(farthest-corner circle at 20% 40%, #51DEE7, rgb(15,164,171) );
}
/* Преимущества*/

.preim{
	
	max-width: 960px;
	margin: 0 auto;
	display: flex;
 	flex-flow: row wrap;
 	justify-content: center;
 	align-items: center;
}
.preim div{
	min-width: 290px;
	max-width: 290px;
	margin-top:5px;
	flex: 1;
	border-radius: 5px;
	background-size: 7%;
	margin:10px;
}
.vyezd{
		background: url(../img/galochka1.png) no-repeat 2% 50% rgba(252,252,252,.5);
		
}
.zap{
		background: url(../img/galochka3.png) no-repeat 2% 50% rgba(252,252,252,.5);
		
}
.garan{
			background: url(../img/galochka4.png) no-repeat 2% 50% rgba(252,252,252,.5);

}
.preim h2{
	font-size: 18px;
	padding-left: 35px;
	margin: 3px 0 0 0;

}
.preim p{
	padding-left: 35px;
	margin: 0 0 3px 0;
}
/*Главный контент */
.main{
	padding:0 20px;
	max-width: 960px;
	margin: 0 auto;	
	display: flex;
	flex-flow: row nowrap;
	
	

}
.main div{
	flex:1;
	

}
.main div, ul{
	
	margin-top: 0;
	margin-bottom: 0;
	
	

 
}
/*Где нарисована сама стиралка */
.import-img{
	
	
	min-width: 370px;
	padding:20px 0;

}
.import-img img{
	width: 90%;
	margin-left:0px;
}
/*Описание поломок */
.polomki{
	width: 100%;
	display: flex;
	flex-flow:column;
	align-items: center;
	
}
.polomki p{
font-size: 18px;
font-weight: bold;
font-style: italic;
line-height: 120%;
color:rgba(0,0,0,.8);
text-transform: uppercase;
}
.polomki ul{
	margin-top: 10px;
	width: 100%;
}
.polomki li{
	
	list-style: none; 
    background: url(../img/galochka2.png) no-repeat left 50%;
    background-size:20px; 
    padding-left: 25px;

}
.polomki .specli{
	list-style: none; 
    background: url(../img/galochka5.png) no-repeat left 50%;
    background-size:20px; 
    padding-left: 25px;}
/* Форма отправки мобильного телефона*/
.form{
	
	background:rgba(157, 227, 221, 1);
	border-radius: 5px;
	padding-left:20px;
	margin-left: 10px; 
	padding-right:20px;
	width: 100%;
	min-width: 300px;
	display: flex;
	flex-flow: column nowrap;	


}

.form input{
	
	background: url(../img/icons8-андроид-24.png) no-repeat left 50% ;
	z-index: 1;
	background-color: white;


	
	width: 100%;
	padding-left:25px;
	padding-bottom: 0;	
	height: 40px;
	border: 1px solid black;
	font-size: 20px;

	
}
.form input:hover{
    border: 1px solid red;
}
.form input:focus{
	outline: none;
    border: 1px solid red;
    background: url(../img/icons8-андроид-25.png) no-repeat left 50% ;
	z-index: 1;
	background-color: white;
}

.form button{
	
	width: 100%;
	height: 40px;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	
	text-transform: uppercase;
	color: black;
	  text-decoration: none;
	  padding: .25em .5em;
	  outline: none;
	  background: rgb(255,212,3) linear-gradient(rgb(255,212,3), 
	  	rgb(248,157,23));
	  box-shadow: inset 0 -2px 1px rgb(0,0,0,0),
	   inset 0 1px 2px rgb(0,0,0,0), inset 0 0 0 60px 
	   rgb(255,255,0,0);
	  transition: box-shadow .2s, border-color .2s	
}
.form button:hover{
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0),
	 inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px 
	 rgba(255,255,0,.5);	
	
}
.form button:active{
	padding: calc(.25em + 1px) .5em calc(.25em - 1px); 	
  	box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), 
  	inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px 
  	rgba(255,255,0,.45);
	color:white;
}
.podform{
	width: 100%;
	max-width: 960px;
}
.minats5{

	width: 100%;
}

.minats5 p{
	
	font-weight: bold;
	font-style: normal;
	color:#fff;
	text-align: center;	
}
.procent{
	width: 100%;
	
	background: url(../img/galochka.png) no-repeat 2% 50% rgba(252,252,252,.5);
	border-radius: 3px;
	background-size: 7%;
}
.procent p{

	color:black;
	text-align: center;	
	padding:5px 0 5px 15px;
}
.text{
	max-width: 960px;
	width: 100%;
	
	margin: 0 auto;
	padding: 0 10px 0 10px;
	
	
	
}
.text p{
	font-size: 18px;
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	margin: 0 10px;
	padding: 0 10px 0 10px;
	
	
}

.lastA {
	color: #fff;
}








/*Планшетная версия*/
@media  (max-width: 951px) {
/*Заголовок название сайта контакты*/


.logotip h1{
	padding-top: 5px;
	font-size: 20px;	
}

.logotip .dop{
	font-size: 16px;

}
/*Середина шапки где указано время работы */
.timework{
	color:black;
	padding: 0 5px;
	font-size: 14px;
	
}
/* Левая часть шапки: телефон и почта*/
.contakty{
	padding-top: 15px;
	
}
.contakty p{
	color: rgb(160,160,160);
}
.telephon a{

	font-size: 25px;
	font-weight:bold;
	color:rgb(0,155,255);
	text-shadow: 1px 1px 1px rgba(9, 60, 90, 0.95);
}
.telephon span{
	color:black;
}
.ip{
	margin-top: 5px;
	padding-bottom: 10px;
	
}
.ip p{
	text-decoration: none;
	color:rgb(160,160,160);
	margin: 0;
	
}
.polomki p{
font-size: 16px;
}
/*Описание преимуществ 3 колонки*/
	.preim{
 	justify-content: space-between;
 }
   
.preim div{
	height: 50px;
	min-width: 220px;
	max-width: 250px;
	background-size: 9%;
}
.preim h2{
	padding-top: 5px;
	font-size: 15px;
	
	margin: 3px 0 0 0;

}
.preim p{
	padding-left: 35px;
	margin: 0 0 3px 0;
}
.lastA {
	display: block;
	text-align: center;
	margin: 25px auto;
	font-size: 30px;
}

}















/*Мобильная версия*/
@media  (min-width: 320px) and (max-width: 775px) {

.header{

 display: flex;
 flex-flow: column;
 justify-content: center;


}

/*Правая часть шапки */
.logotip{
 display: flex;
 flex-flow: column;

}
.logotip img{
	display: block;
	margin: auto;
	margin-top: 20px;
	padding-top: 5px;
}
.logotip h1{

	font-size: 40px;
	text-align: center;
	

}

.logotip .dop{
	font-size: 25px;
	text-align: center;
}
/*Середина шапки где указано время работы */
.timework{


	font-size: 25px;

}

/* Левая часть шапки: телефон и почта*/
.contakty{
	padding-top: 15px;
	text-align: center;
	
}
.contakty p{
	color: rgb(160,160,160);
}
.telephon a{
	font-size: 40px;
	color:rgb(0,155,255);
}
.telephon span{
	color:black;
}
.ip{
	font-size: 25px;


	
}
/* Заливка главного контента*/

/* Преимущества*/

.preim{
	padding-top: 10px;
 	flex-flow: column;
 
}
.preim div{
	margin-top: 10px;
	min-width: 280px;
	max-width: none;
	width: 90%;
}

.preim h2{
	font-size: 25px;
	padding-left: 60px;
	margin: 3px 0 0 0;

}
.preim p{
	font-size: 25px;
	padding-left: 60px;
	padding-bottom: 10px;
	margin: 0 0 3px 0;
	color:rgba(0,0,0,.5);
}
/*Главный контент */
.main{
	padding:0 10px;
	max-width: 960px;
	margin: 0 auto;	
	display: flex;
	flex-flow: column;
	
	

}
.main div{
	flex:1;
	

}
.main div, ul{
	
	margin-top: 0;
	margin-bottom: 0;
	
	

 
}
/*Где нарисована сама стиралка */
.import-img{
	
	
	min-width: 280px;
	padding:20px 0;

}
.import-img img{
	display: block;
	margin:auto;
	width: 100%;
	max-width: 450px
	
}
/*Описание поломок */
.polomki{
	
	display: flex;
	flex-flow:column;
	align-items: center;
	
}
.polomki p{

font-size: 25px;
font-weight: bold;
font-style: italic;
line-height: 120%;
color:rgba(0,0,0,.8);
text-transform: uppercase;
}
.polomki ul{
	padding-left: 0;
	max-width: 450px;
	margin-top: 10px;
	width: 100%;
}
.polomki li{
	
	list-style: none; 
    background: url(../img/galochka2.png) no-repeat left 50%;
    background-size:25px; 
    padding-left: 30px;

}
.polomki .specli{
	list-style: none; 
    background: url(../img/galochka5.png) no-repeat left 50%;
    background-size:25px; 
    padding-left: 30px;
}
/* Форма отправки мобильного телефона*/
.form{
	
	background:rgba(157, 227, 221, 1);
	border-radius: 5px;
	padding-left:20px;
	margin-left: 10px; 
	padding-right:20px;
	
	min-width: 370px;
	display: flex;
	flex-flow: column nowrap;	


}

.form input{
	
	background: url(../img/icons8-андроид-24.png) no-repeat left 50% ;
	z-index: 1;
	background-color: white;


	
	width: 100%;
	padding-left:25px;
	padding-bottom: 0;	
	height: 60px;
	border: 1px solid black;
	font-size: 25px;

	
}
.form input:hover{
    border: 1px solid red;
}
.form input:focus{
	outline: none;
    border: 1px solid red;
    background: url(../img/icons8-андроид-25.png) no-repeat left 50% ;
	z-index: 1;
	background-color: white;
}

.form button{
	
	width: 100%;
	height: 70px;
	font-family: 'Roboto', sans-serif;
	font-size: 25px;
	
	text-transform: uppercase;
	color: black;
	  text-decoration: none;
	  padding: .25em .5em;
	  outline: none;
	  background: rgb(255,212,3) linear-gradient(rgb(255,212,3), 
	  	rgb(248,157,23));
	  box-shadow: inset 0 -2px 1px rgb(0,0,0,0),
	   inset 0 1px 2px rgb(0,0,0,0), inset 0 0 0 60px 
	   rgb(255,255,0,0);
	  transition: box-shadow .2s, border-color .2s	
}
.form button:hover{
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0),
	 inset 0 1px 2px rgba(0,0,0,0), inset 0 0 0 60px 
	 rgba(255,255,0,.5);	
	
}
.form button:active{
	padding: calc(.25em + 1px) .5em calc(.25em - 1px); 	
  	box-shadow: inset 0 -1px 1px rgba(0,0,0,.1), 
  	inset 0 1px 2px rgba(0,0,0,.3), inset 0 0 0 60px 
  	rgba(255,255,0,.45);
	color:white;
}
.podform{
	width: 100%;
	max-width: 960px;
}
.minats5{

	width: 100%;
}

.minats5 p{
	font-size: 25px;
	font-weight: bold;
	font-style: normal;
	color:#dbdbdb;
	text-align: center;	
}
.procent{
	width: 100%;
	
	background: url(../img/galochka.png) no-repeat 2% 50% rgba(252,252,252,.5);
	border-radius: 3px;
	background-size: 7%;
}
.procent p{
	font-size: 25px;
	color:black;
	text-align: center;	
	padding:5px 0 5px 15px;
}
.text{
	max-width: 960px;
	width: 100%;
	
	margin: 0 auto;
	padding: 0 10px 0 10px;
	
	
	
}
.text p{
	font-size: 25px;
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	margin: 0 10px;
	padding: 0 10px 0 10px;
	
	
}
}