* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html,body {margin: 0; padding: 0;}
body {font-family: Arial, Helvetica, sans-serif; background: #fff;}
div {color: #282828; font-size: 16px; font-weight: normal; letter-spacing: 0.02em; line-height: 18px;}
a {color: #111; text-decoration: underline; transition: .15s ease-in;}
a:hover {color: #000;}
h1,h2 {text-align: center; padding: 0; font-size: 28px; font-weight: bold; color: #424242; margin: 15px 0 15px 0; line-height: 28px;}
ul {list-style: none; margin: 0; padding: 0;}

/* header */
header {background-color: #f8f8f8; position: sticky; top: 0; z-index:12; border-top: 3px solid #efefef;}

.top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: wrap;
	padding: 10px 0;
}

.top div {margin: 3px 3px;}

.logo {flex: 0 1 auto;}
.logo img {max-width: 380px; width: 100%; height: auto;}

.logo {visibility: visible; display: block;}
.logo_mob {visibility: hidden; display: none;}

.header_ico {width:24px; height:24px; display:inline-block; vertical-align:bottom;}

.phone {flex: 0 1 auto; font-size: 24px; line-height: 24px; color: #1a1a1a; font-weight: 600;}
.phone ul li {padding: 8px 12px 8px 2px; position: relative; display: inline-block;}
.phone a {text-decoration: none; color: #424242;}

.whatsapp {flex: 0 1 auto; font-size: 24px; line-height: 24px; color: #1a1a1a; font-weight: 600;}
.whatsapp ul li {padding: 8px 12px 8px 2px; position: relative; display: inline-block;}
.whatsapp a {text-decoration: none; color: #108020;}

.header_desc {font-size: 16px; font-weight: normal;}

nav {background-color: #6f706b;}
nav ul {display: block; max-width: 1200px; margin: 0 auto; position: relative; text-align: center;}
nav ul li {display: inline-block; margin-right: 3px;}
nav ul li a {display: block; text-decoration: none; color: #e5e8ec; background: #49768b; font-size: 18px; line-height: 18px; padding: 10px 20px;}
nav ul li a.act {color: #fff; background: #d9531e;}
nav ul li a:hover {background: #e76e3f; color: #fff;}

/* content */
section {max-width: 1200px; margin: 0 auto; padding: 20px;}

.zag_lightblue {line-height: 24px; background-color: #49768b; color: #ffffff; border-radius: 3px; padding: 3px;}

.article {background-color: #fff;}
.article ul {list-style-image: url(/img/button.png);}

.price_table {width:600px; border-collapse: collapse; border:1px solid #69899F;}
.price_table th {font-size:18px; border:2px solid #69899F; padding:5px; background: #c3dfec;}
.price_table td {font-size:18px; border:1px dotted #000000; padding:5px;}

.prod, .preim1, .preim2 {box-shadow: 3px 3px 12px rgba(0,0,0,.3) inset; text-align: center;}

.opis {color: #eee; font-size: 22px; line-height: 24px; max-width: 80%; margin: 0 auto; text-shadow: 0 1px 3px rgba(0,0,0,.2);}

.prod {background: #fff url('/img/bg1.jpg');}
.tovar ul {display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap;}
.tovar li {border: 1px solid #a2bdf0; text-align: center; flex: 0 1 30%; padding: 10px 3px; margin: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2);}
.tovar span {display: block; font-size: 24px; color: #e74e1b; padding: 5px 0; line-height: 26px;}

.preim1 {background: #fff url('/img/bg2.jpg');}
.preim1 h2, .opis h2, .prod h2 {color: #315db0; font-weight: bold; display: inline-block; padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2); background: rgba(255,255,255,.9);}
.preim1 .tovar {font-size: 18px; line-height: 20px;}
.preim1 .tovar li {text-align: center;}

.preim2 {background: #fff url('/img/bg3.jpg');}
.preim2 h2, .opis h2, .prod h2 {color: #315db0; font-weight: bold; display: inline-block; padding: 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.2); background: rgba(255,255,255,.9);}
.preim2 .tovar {font-size: 18px; line-height: 20px;}
.preim2 .tovar li {text-align: center;}

/* Менять прозрачность: */
.tovar li {background: rgba(255,255,255,.7);}

footer {background-color: #464646;}
.bottom {display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px 0;}

.bot_nav, .first, .addr {margin: 0 10px;}

.bot_nav ul {display: inline-block;}
.bot_nav li {display: block; padding: 5px 10px; font-size: 20px; line-height: 20px; margin: 0 0 10px 0;}
.bot_nav li a {color: #e5e8ec; text-decoration: none;}
.bot_nav ul li a.act {color: #7b9eda; background: rgba(0,0,0,.2);}
.bot_nav li a:hover {color: #7b9eda;}

.first .phone ul {margin: 20px 0;}
.first .phone ul li {display: block; margin-bottom: 10px;}
.first .phone a {color: #e5e8ec;}
.first .logo {opacity: .4;}

.addr {flex: 0 1 35%; color: #e5e8ec;}
.addr li {display: block; padding: 5px 0 5px 25px; margin-bottom: 10px; line-height: 22px; position: relative;}

.stat {text-align: center; color: #62748c; background-color: #202020; padding: 20px 0;}

@media screen and (max-width: 1110px) {
.top, .bottom {justify-content: space-around;}
}

@media screen and (max-width: 720px) {
header {background: #fff url('/img/bg-header-mob.jpg');}

.logo {display: none; visibility: hidden;}
.logo_mob {visibility: visible; display: block; text-align: center;}
.logo_mob img {width: 240px;}

/*плашки под логотип и телефоны в шапке*/
.header_plashka_logo_mob {background: rgba(255,255,255,.7); padding: 10px 3px; border: 1px solid #636060; height: 46px; border-radius: 3px;}
.header_plashka_phone_mob {background: rgba(255,255,255,.8); padding: 0 3px; border: 1px solid #636060; height: 58px; border-radius: 3px;}

.phone ul {text-align: center;}
.phone ul li, .whatsapp ul li {padding: 2px 12px 2px 2px;}

.price_table {width:100%;}

.tovar li {flex: 0 1 auto; width: 100%;}
iframe {width: 90%;}
.mob_hidden {display: none; visibility: hidden;}

.article img {width: 90%;}
}

@media screen and (max-width: 400px) {
.addr {flex: 0 1 auto;}
}