html, body{   overflow-x: hidden; } body{ 	font-family:Tahoma, sans-serif; 	color:#333;   min-width: 360px; } section{ 	padding: 0 25px; } h1{ font-size:4em; color:#FFF; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; } .h1_details{ font-size:4em; color:#d3d3d3; font-weight:600; letter-spacing: 0.1em; } h2{ font-size:2.5em; color:#01437f } h3{ font-size:2em; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; } h4{ font-size:1.625em; } a{ color:#ccc; text-decoration:none; } abbr{ text-decoration: none; } .bold{ font-weight: 600; } strong{ font-weight: 600; } .gray{ color:#ccc; } .softGray{ color:#d5d5d5; } .black{ #color:#333; } ul{ list-style: square outside; margin-left:25px; } ul>li{ margin-bottom:10px; } ul>li:last-child{ margin-bottom:0; } .wrapper{ background-image:url(plumber-bg.jpg); order:2; background-color:#000; display:flex; flex-direction: column;     background-repeat: no-repeat;     background-position: center;     background-size: cover; } .container{ max-width:1176px; display:flex; justify-content: left; margin: 0 auto; } .header{ 	padding: 175px 25px 105px; 	gap: 75px; 	order: 2; } .header__description{ 	color:#fff; 	margin-top:25px; } .header__description p{ font-size: 1.25em; } .header__description ul{ margin-top: 15px; font-size: 1.125em; } .header__description ul li{ margin-bottom:5px; } .header__description ul li:last-child{ margin-bottom:0; } .header a{     margin-top: 50px;     display: block;     background: #068703;     width: 138px;     text-align: center;     padding: 15px;     color: #FFF;     letter-spacing: 0.1em; } .header img{ width:250px; height: 250px; } .header a:hover{ background:#15a712; box-shadow: 0 0 5px #15a712; } .topBar{ background: #00539f; color: #FFF; order:1; position: fixed; width: calc(100% - 50px); padding: 5px 25px; } .topBar__container{ justify-content: space-between; } .topBar__address{ display: flex; gap: 25px; } .priceBlock{ 	flex-direction:column; padding:25px 0; } .priceBlock h2{ margin-bottom:20px; } .priceBlock .description{ 	font-size:0.75em; 	margin-bottom:20px; } .offers{ justify-content: space-between; flex-direction:column; padding: 50px 0; } .offers h2{ margin-bottom:50px; } .offers__item{ display: flex;gap: 150px; margin-bottom:100px; align-items: center; } .offers__item:last-child{ margin-bottom:0px; } .offers article:nth-child(odd) img{ 	order: 2; } .offers__item img{ width: 350px;height: 350px;border-radius: 50%;border: 5px solid #00539f; } .item__group{ display: flex;flex-direction: column;justify-content: center; } .item__group ul, .item__group p{ margin-bottom:10px;     line-height: 1.5em; } .item__group p.item__price{ margin-bottom:0; margin-top:20px; } .item__price{ text-align: right; } .price__value{ color: #068703; font-size: 1.625em; } table{ width: 100%;     max-width: 100%;     background-color: transparent; 	margin-bottom:25px; } table tr:hover{ background:#eee; } table tr th:last-child, table tr td:last-child { text-align: right } table tr th:first-child, table tr td:first-child { text-align: left; } table td, table th{     padding: 10px 0;     line-height: 1.42857143;     vertical-align: top;     border-top: 1px solid #ddd; } table th{     border-top: none; 	vertical-align: bottom;     border-bottom: 2px solid #ddd; 	border-top:none; 	font-weight: bold; 	font-size:1.125em; } table td span:first-child, table td span:last-child{ font-size:0.75em; } sup{ vertical-align: super; padding-left:2px; } .footer{ background: #00539f;color: #FFF;width: 100%; padding: 5px 0; } .contactsBlock{flex-direction:column; padding:25px 25px;} .contactsBlock h2{color: #fff;margin-bottom: 20px;} .contactsBlock__group{display: flex;justify-content: space-between;} .contactsBlock__group>div{display: flex;font-size: 1em;flex-direction: column; gap: 10px;} .contactsBlock__group>div:last-child{align-items: end} .phoneButton{ 	display:none; 	width:48px; 	height: 48px; 	background-image: url('phone.svg'); 	background-position: center center; 	background-size:70%; 	background-repeat:no-repeat; 	position: fixed; 	left:20px; 	bottom:20px; 	border-radius: 50%; 	background-color: #16a035;     animation: 3200ms ease 2s normal none 1 running shake;     animation-iteration-count: infinite;     -webkit-animation: 3200ms ease 2s normal none 1 running shake;     -webkit-animation-iteration-count: infinite; } .viberButton{ 	display:none; 	width:48px; 	height: 48px; 	background-image: url('viber.svg'); 	background-position: center center; 	background-size:70%; 	background-repeat:no-repeat; 	position: fixed; 	left:20px; 	bottom:80px; 	border-radius: 50%; 	background-color: #7360f2; } @keyframes shake {     0% {         transform: rotateZ(0deg);         -ms-transform: rotateZ(0deg);         -webkit-transform: rotateZ(0deg);     }     10% {         transform: rotateZ(-30deg);         -ms-transform: rotateZ(-30deg);         -webkit-transform: rotateZ(-30deg);     }     20% {         transform: rotateZ(15deg);         -ms-transform: rotateZ(15deg);         -webkit-transform: rotateZ(15deg);     }     30% {         transform: rotateZ(-10deg);         -ms-transform: rotateZ(-10deg);         -webkit-transform: rotateZ(-10deg);     }     40% {         transform: rotateZ(7.5deg);         -ms-transform: rotateZ(7.5deg);         -webkit-transform: rotateZ(7.5deg);     }     50% {         transform: rotateZ(-6deg);         -ms-transform: rotateZ(-6deg);         -webkit-transform: rotateZ(-6deg);     }     60% {         transform: rotateZ(5deg);         -ms-transform: rotateZ(5deg);         -webkit-transform: rotateZ(5deg);     }     70% {         transform: rotateZ(-4.28571deg);         -ms-transform: rotateZ(-4.28571deg);         -webkit-transform: rotateZ(-4.28571deg);     }     80% {         transform: rotateZ(3.75deg);         -ms-transform: rotateZ(3.75deg);         -webkit-transform: rotateZ(3.75deg);     }     90% {         transform: rotateZ(-3.33333deg);         -ms-transform: rotateZ(-3.33333deg);         -webkit-transform: rotateZ(-3.33333deg);     }     100% {         transform: rotateZ(0deg);         -ms-transform: rotateZ(0deg);         -webkit-transform: rotateZ(0deg);     } } @-webkit-keyframes shake {     0% {         transform: rotateZ(0deg);         -ms-transform: rotateZ(0deg);         -webkit-transform: rotateZ(0deg);     }     10% {         transform: rotateZ(-30deg);         -ms-transform: rotateZ(-30deg);         -webkit-transform: rotateZ(-30deg);     }     20% {         transform: rotateZ(15deg);         -ms-transform: rotateZ(15deg);         -webkit-transform: rotateZ(15deg);     }     30% {         transform: rotateZ(-10deg);         -ms-transform: rotateZ(-10deg);         -webkit-transform: rotateZ(-10deg);     }     40% {         transform: rotateZ(7.5deg);         -ms-transform: rotateZ(7.5deg);         -webkit-transform: rotateZ(7.5deg);     }     50% {         transform: rotateZ(-6deg);         -ms-transform: rotateZ(-6deg);         -webkit-transform: rotateZ(-6deg);     }     60% {         transform: rotateZ(5deg);         -ms-transform: rotateZ(5deg);         -webkit-transform: rotateZ(5deg);     }     70% {         transform: rotateZ(-4.28571deg);         -ms-transform: rotateZ(-4.28571deg);         -webkit-transform: rotateZ(-4.28571deg);     }     80% {         transform: rotateZ(3.75deg);         -ms-transform: rotateZ(3.75deg);         -webkit-transform: rotateZ(3.75deg);     }     90% {         transform: rotateZ(-3.33333deg);         -ms-transform: rotateZ(-3.33333deg);         -webkit-transform: rotateZ(-3.33333deg);     }     100% {         transform: rotateZ(0deg);         -ms-transform: rotateZ(0deg);         -webkit-transform: rotateZ(0deg);     } } @media screen and (max-width: 1280px) { 	.offers__item{ 	gap:100px; 	} } @media screen and (max-width: 900px) { 	.offers__item{ 	gap:50px; 	} 	 	.topBar .title{ 		display:flex; 		flex-direction: column; 	} 	.topBar__address>div{ 		display:flex; 		flex-direction: column; 	} 	.phoneButton, 	.viberButton{ 		display:block; 	} 	.footer{ 		padding-bottom: 120px; 	} } @media screen and (max-width: 850px) { 	.offers__item{ 	gap:50px; 	} 	.header{ 	flex-direction: column;     align-items: center; 	padding: 75px 25px 55px;     gap: 25px; 	} 	.header img{ 		order:1; 		width:150px; 		height:150px; 	} 	.header a{ 		    margin-top: 25px; 	} 	.header>div{ 	 align-items: center;     display: flex;     flex-direction: column; 	} 	.header h1{ 		text-align: center; 	} 	 	.header .header__description{ 	display: flex;     flex-direction: column;     align-items: center; 	} 	 	.header__description p{ 	text-align: center; 	} .priceBlock{ 	padding: 45px 0; } h2, h3 { 	text-align: center; } .offers__item{ 	flex-direction: column; 	margin-bottom:35px; } .offers__item img{ 	width:250px; 	height: 250px; } .offers article:nth-child(odd) img{ 	background: blue; 	order: initial; } } @media screen and (max-width: 590px) { 	.header { 		padding: 25px; 	} 	.header h1 { 	font-size: 2em; 	} 	.topBar { 		order: 2; 		position: initial; 	} 	.topBar__container, .topBar__address{ 		flex-direction: column; 		gap:10px; 		text-align: center; 	} 	.contactsBlock__group{ 	flex-direction: column; 	} 	.contactsBlock__group>div:last-child { 			margin-top:10px;     align-items: initial; 	} 	.item__group p.item__price{ 		margin-top:5px; 	} 	 }