body{-webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; padding: 0; margin: 0; color:rgb(34,34,34); font-size: 1.1em;}
.logoblock{width:280px; height: 30px;} 
.styleicon{color: orange; font-size: 25px;}
.searchblock{width: 60%; text-align: left;} 
.search{color: orange; font-size: 18px;} 
main{width: 90%; margin-left: 5%; display: flex; margin-top: 80px;}
main section h1,h2{padding-bottom: 0; margin-bottom: 0;}
main section p{padding-top: 0; margin-top: 0; padding-left: 5px; padding-right: 5px;}
main a img{width: 40px; margin: 5px;}
.seti{vertical-align:middle;}
.about{width: 90%; margin-left: 5%;}
.about a img{width: 40px; margin: 5px;}
footer{background: rgb(43, 53, 66); color: white; border-top: 5px dashed orange; padding: 10px; margin: 0; box-sizing:border-box; width:100%; display: flex; flex-direction: column;}
footer a{color: white; text-decoration: none;}
p{text-indent:20px;}
.goodplumber{display: flex; flex-direction: column; float: left; border:1px solid rgb(43, 53, 66);}
.blockbtn{display: flex; flex-direction: row; justify-content: space-between; width: 100%; background: rgb(43, 53, 66); height: 33px;}
.btn{background: rgb(43, 53, 66); border-bottom: 5px dashed orange; text-decoration: none; color: white; font-size: 23px; height: 30px;}
.btn:hover{border-top: 5px dashed orange; color:orange; transition: 0.3s;}
.bn{border: none;}
.dopsec{display: flex;}
.dopsec div{margin: 10px;}
.showtext{display: none; font-size: 24px;}
#nav h2{padding-bottom:0; margin-bottom:0;}
#nav p{padding-top:0; margin-top:0;} 
#nav{text-align: center;}
.price{font-weight: 700;}
.ho{ margin-top: 80px; text-align: center;}
.photo{width: 90%; margin-left: 5%; display: flex; flex-wrap: wrap;}
.photo div{width: 50%;margin-top: 10px;}
.photo img{float: left; padding-right: 10px; padding-left: 10px;}
.otziv{width: 90%; margin-left: 5%; display: flex; flex-wrap: wrap;}
/* .otziv video{width: 25%; height: 10%; max-height: 300px; margin: 10px;} */
.otziv video{width: 25%; height: 300px; margin: 10px;}
.usluga{flex-direction: row-reverse;}
.usluga h1{padding-left: 10px;}
.usluga h2{padding-left: 10px;}
.usluga p{text-indent:0; padding-left: 20px;padding-bottom: 0; margin-bottom: 0;}
.usluga ul{padding-bottom: 0; margin-bottom: 0;padding-top: 0; margin-top: 0;}
.usluga div{min-width: 36%;}
.menu{display: none;}
.dev{text-align: right; font-size: 20px; padding-right: 10px; padding-bottom: 5px; padding-top: 15px;}
.fon{width: 100%; padding-top: 30px;}
#cont{display: flex; justify-content: center;}
#cont a{padding: 10px; font-size: 22px;}
#vanna{background: url(../img/icons/vanna.jpg) center center no-repeat;}
#unitaz{background: url(../img/icons/unitaz.jpg) center center no-repeat;}
#schetchik{background: url(../img/icons/schetchik.jpg) center center no-repeat;}
#radiator{background: url(../img/icons/radiator.jpg) center center no-repeat;}
#shtrob{background: url(../img/icons/shtroblenie.jpg) center center no-repeat;}
#truba{background: url(../img/icons/razvodka.jpg) center center no-repeat;}
#boiler{background: url(../img/icons/boiler.jpg) center center no-repeat;}
#stoyak{background: url(../img/icons/stoyak.jpg) center center no-repeat;}
#stiral{background: url(../img/icons/stiralnaya.jpg) center center no-repeat;}
#pol{background: url(../img/icons/pol.jpg) center center no-repeat;}
#smesitel{background: url(../img/icons/smesitel.jpg) center center no-repeat;}
#dush{background: url(../img/icons/dush.jpg) center center no-repeat;}
#rakovina{background: url(../img/icons/rakovina.jpg) center center no-repeat;}
#zasor{background: url(../img/icons/zasor.jpg) center center no-repeat;}
#filtr{background: url(../img/icons/filtr.jpg) center center no-repeat;}
#posuda{background: url(../img/icons/posudomoyka.jpg) center center no-repeat;}
#fantrub{background: url(../img/icons/fanovaya.jpg) center center no-repeat;}
#kotel{background: url(../img/icons/kotel.jpg) center center no-repeat;}
#polotence{background: url(../img/icons/polotence.jpg) center center no-repeat;}
#instal{background: url(../img/icons/install.jpg) center center no-repeat;}
#jir{background: url(../img/icons/jiroulovitel.jpg) center center no-repeat;}
#wolt{background: url(../img/icons/elektrik.jpg) center center no-repeat;}
.cw{color: white;}
.co{color: orange;}
#mySearch {
  width: 80%;
  font-size: 18px;
  padding: 8px;
  border-radius: 5px;
  border: 2px solid orange;
}
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex; 
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
#myMenu li{
  border: 1px solid black; margin: 10px;
  display: block;
  width: 230px; height: 230px;
}
#myMenu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  color: white;
  text-decoration: none;
  width: 230px; height: 230px;
  background: rgba(43, 53, 66,0.8);
}
#myMenu li a span{
  display: none;
}
#myMenu li a:hover {
  color: orange;
  border-top: 3px solid orange;
  border-bottom: 3px solid orange;
  box-sizing: border-box;
}
header *:focus,.menu *::before,.menu *::after {outline: 0;}
header a{text-decoration: none; color: white; font-size: 23px;}
header{ z-index:999; background: rgb(43, 53, 66); border-bottom: 5px dashed orange; padding: 0; margin: 0; text-align: center;box-sizing:border-box; width:100%; display: flex; justify-content:space-around; align-items:center; height:80px; position: fixed; top: 0;}
header ul{padding:0; margin:0px; display: flex; list-style:none; box-sizing: border-box;}
header li a{display: flex; align-items: center; justify-content: center; background: rgb(43, 53, 66); color:white; text-decoration: none; height:73px; font-size: 22px; padding-left: 5px; padding-right: 5px; min-width: max-content;}
header li a:hover{border-top: 5px dashed orange; color:orange; box-sizing: border-box;  transition: 0.3s;}
.callback-bt {
  background:orange;
  border:2px solid orange;
  border-radius:50%;
  box-shadow:0 8px 10px rgba(250,180,2,0.3);
  cursor:pointer;
  height:68px;
  text-align:center;
  width:68px;
  position: fixed;
  right: 8%;
  bottom: 10%;
  z-index:999;
  transition:.3s;
  -webkit-animation:hoverWave linear 1s infinite;
  animation:hoverWave linear 1s infinite;
  display: none;
}
.callback-bt a {
  color:#fff;
  font-size:34px;
  line-height: 66px;
  text-decoration: none;
}
@-webkit-keyframes hoverWave {
  0% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 0 rgba(250,180,2,0.2),0 0 0 0 rgba(250,180,2,0.2)
}
40% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 15px rgba(250,180,2,0.2),0 0 0 0 rgba(250,180,2,0.2)
}
80% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 30px rgba(250,180,2,0),0 0 0 26.7px rgba(250,180,2,0.067)
}
100% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 30px rgba(250,180,2,0),0 0 0 40px rgba(250,180,2,0.0)
}
}
@keyframes hoverWave {
  0% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 0 rgba(250,180,2,0.2),0 0 0 0 rgba(250,180,2,0.2)
}
40% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 15px rgba(250,180,2,0.2),0 0 0 0 rgba(250,180,2,0.2)
}
80% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 30px rgba(250,180,2,0),0 0 0 26.7 rgba(250,180,2,0.067)
}
100% {
  box-shadow:0 8px 10px rgba(250,180,2,0.3),0 0 0 30px rgba(250,180,2,0),0 0 0 40px rgba(250,180,2,0.0)
}
}
@media screen and (max-width: 1338px) {
h1{font-size: 1em;}
h2{font-size: 1em;}
.logoblock{position: relative; top: 5px; left:5px;}
.searchblock{width: 100%; padding-left: 5px; line-height: 26px;}
main section p{padding-left: 0; padding-right: 0;}
header{display: block; text-align: left; height: 110px;}
header ul{display: none; margin-top: 10px;width: 100%;}
header nav::before,
header::after{background: rgb(43, 53, 66); color:orange; font-size:45px; position: absolute; top: -10px; right: 5px; cursor: pointer; content:'\2630';}
header::after{z-index: 1; content:'\2716';}
header nav::before{z-index: 2;}
header nav:focus::before{z-index:0;}
header nav:focus ul,
header ul:hover{display: block;}
header li a:hover{border-top: none;}
.callback-bt {display: block;}
main{margin-top: 110px; flex-direction: column;} 
.ho{ margin-top: 110px;}
.usluga{flex-direction: column-reverse;}
.menu{display: block;}
}
@media screen and (max-width: 1100px) {
.dopsec{flex-direction: column;}
.dopsec img {width: 100%;}
#myMenu li{width: 250px; height: 250px;}
#myMenu li a {width: 250px; height: 250px;}
#shtrob,#razvod,#stoyak,#pol,#zasor,#instal{background-size: 250px 250px;}
}  
@media screen and (max-width: 900px) {
#cont{flex-direction: column; align-items: center;}
#cont a{width: 176px;}
.photo{display: flex; flex-direction: column; text-align: center;}
.photo div{width: 100%; border: 1px solid rgb(43, 53, 66);}
.photo img{float: none; padding-right: none; padding-top: 10px;}
.otziv{flex-direction: column;}
.otziv video{width: 100%; height: 10%; max-height: 300px; margin: 0; margin-top: 10px;}
  }  
@media screen and (max-width: 670px) {
    .goodplumber{float: none; max-width: 250px; position: relative; left: 10%;}
  }