@charset "utf-8";
/* БетонСтройРесурс — beton-stroyresurs.ru. Палитра логотипа: #FE6E01 + #25343F */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:13px/1.6 Tahoma,Arial,"Helvetica Neue",sans-serif;color:#3f4a52;background:#e8eaec}
img{max-width:100%;height:auto;border:0;display:block}
a{color:#c25400;text-decoration:underline}
a:hover{text-decoration:none}
h1,h2,h3,h4{font-family:"PT Serif",Georgia,"Times New Roman",serif;font-weight:700;color:#25343F;margin:0 0 12px}
h1{font-size:27px;line-height:1.25}
h2{font-size:22px;line-height:1.3}
h3{font-size:16px}
p{margin:0 0 11px}
.w{width:980px;max-width:100%;margin:0 auto;padding:0 10px}
.page{background:#fff;width:1000px;max-width:100%;margin:0 auto;
	box-shadow:0 0 12px rgba(37,52,63,.18)}
.clr:after{content:"";display:table;clear:both}

/* ---- верхняя строка ---- */
.tline{background:#25343F;color:#9fb0bd;font-size:11px;padding:7px 0}
.tline b{color:#fff;font-weight:normal}
.tline a{color:#ffb277}

/* ---- шапка ---- */
.head{padding:14px 0 12px;background:#fff}
.head .logo{float:left}
.head .logo img{height:56px;width:auto}
.head-r{float:right;text-align:right;padding-top:4px}
.head-r .tel{font-family:"PT Serif",Georgia,serif;font-size:22px;color:#25343F;text-decoration:none;
	display:block;font-weight:700}
.head-r .tel:hover{color:#FE6E01}
.head-r .zv{font-size:11px;color:#7e8b95;display:block;margin-top:2px}
.head-c{float:right;margin-right:26px;font-size:11px;color:#7e8b95;line-height:1.5;
	max-width:210px;text-align:right;padding-top:6px}

/* ---- меню ---- */
.nav{background:#25343F;background:linear-gradient(#2e404e,#213039)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.nav li{flex:0 0 auto}
.nav a{display:block;padding:11px 17px;color:#dfe6eb;text-decoration:none;font-size:12px;
	border-right:1px solid rgba(255,255,255,.08);white-space:nowrap}
.nav a:hover{background:#FE6E01;color:#fff}

/* ---- баннер ---- */
.banner{position:relative;margin:0}
.banner img{width:100%}
.banner .txt{position:absolute;left:0;bottom:0;right:0;padding:20px 22px;
	background:linear-gradient(rgba(37,52,63,0),rgba(37,52,63,.86) 55%)}
.banner h1{color:#fff;margin-bottom:8px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.banner p{color:#e3e9ed;margin:0;max-width:640px;font-size:13px}

/* ---- две колонки ---- */
.body{padding:20px 0 6px}
.main{float:left;width:660px;max-width:100%}
.side{float:right;width:280px;max-width:100%}
.sec{padding:0 0 26px;border-bottom:1px dotted #ccd4da;margin-bottom:26px}
.sec:last-child{border-bottom:0}
.sec h2{border-left:4px solid #FE6E01;padding-left:11px}
.lead{color:#5d6a74;margin-bottom:16px}

/* ---- сайдбар ---- */
.box{border:1px solid #d5dce1;border-radius:3px;margin-bottom:16px;background:#fff}
.box-h{background:linear-gradient(#f6f8f9,#e9eef1);border-bottom:1px solid #d5dce1;
	padding:9px 13px;font-family:"PT Serif",Georgia,serif;font-weight:700;color:#25343F;font-size:14px}
.box-b{padding:13px}
.box-b p:last-child{margin-bottom:0}
.box-o .box-h{background:linear-gradient(#ff8a2b,#f06400);color:#fff;border-bottom-color:#d05600}
.side img{border-radius:3px}
ul.dot{list-style:none;margin:0;padding:0}
ul.dot li{position:relative;padding:0 0 7px 15px;font-size:12px}
ul.dot li:before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
	background:#FE6E01;border-radius:50%}

/* ---- кнопки ---- */
.btn{display:inline-block;padding:9px 22px;border-radius:3px;border:1px solid #d05600;
	background:linear-gradient(#ff8a2b,#f06400);color:#fff;text-decoration:none;font-size:13px;
	text-shadow:0 1px 0 rgba(0,0,0,.2);cursor:pointer;font-family:Tahoma,Arial,sans-serif}
.btn:hover{background:linear-gradient(#ff9945,#ff7212);color:#fff;text-decoration:none}
.btn-d{background:linear-gradient(#3b4f5e,#25343F);border-color:#1a262e}
.btn-d:hover{background:linear-gradient(#4a6274,#2f414f);color:#fff}

/* ---- продукция: плитки без фото ---- */
.prods{display:flex;flex-wrap:wrap;gap:12px}
.prod{flex:1 1 205px;min-width:0;border:1px solid #d5dce1;border-radius:3px;background:#fff;
	display:flex;flex-direction:column}
.prod .t{background:linear-gradient(#f6f8f9,#e9eef1);border-bottom:1px solid #d5dce1;padding:8px 12px;
	font-family:"PT Serif",Georgia,serif;font-weight:700;font-size:13.5px;color:#25343F}
.prod .b{padding:11px 12px;font-size:12px;color:#6a7681;flex:1 1 auto}
.prod .f{padding:0 12px 12px;font-family:"PT Serif",Georgia,serif;font-weight:700;font-size:15px;
	color:#c25400}
.prod .f i{display:block;font-style:normal;font-family:Tahoma,sans-serif;font-size:10.5px;
	font-weight:normal;color:#93a0aa;margin-top:2px}

/* ---- цены плиткой ---- */
.pgroup{font-family:"PT Serif",Georgia,serif;font-weight:700;font-size:15px;color:#25343F;
	margin:20px 0 10px;padding:6px 12px;background:#eef2f4;border-left:4px solid #25343F;border-radius:3px}
.tiles{display:flex;flex-wrap:wrap;gap:10px}
/* колонка + margin-top:auto у цены: описание бывает в две строки,
   и без этого цены в ряду встают на разной высоте */
.tile{flex:1 1 150px;min-width:0;border:1px solid #d5dce1;border-radius:3px;padding:11px 12px;
	background:linear-gradient(#fff,#f7f9fa);display:flex;flex-direction:column}
.tile:hover{border-color:#FE6E01}
.tile b{display:block;font-family:"PT Serif",Georgia,serif;font-size:14px;color:#25343F;margin-bottom:3px}
.tile span{display:block;font-size:11px;color:#8a959e;margin-bottom:8px;min-height:15px;flex:0 0 auto}
.tile u{display:block;text-decoration:none;font-family:"PT Serif",Georgia,serif;font-weight:700;
	font-size:16px;color:#c25400;margin-top:auto}
.pnote{background:#fff8ef;border:1px solid #f3ddc2;border-radius:3px;padding:11px 14px;font-size:12px;
	margin-bottom:6px}

/* ---- прочее ---- */
ul.ch{list-style:none;margin:0 0 14px;padding:0}
ul.ch li{position:relative;padding:0 0 8px 22px;font-size:13px}
ul.ch li:before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border-radius:2px;
	background:linear-gradient(#ff8a2b,#f06400)}
ul.ch li:after{content:"";position:absolute;left:4px;top:8px;width:4px;height:6px;
	border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vols{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.vols div{flex:1 1 70px;text-align:center;border:1px solid #d5dce1;border-radius:3px;padding:9px 4px;
	background:linear-gradient(#fff,#f2f5f7)}
.vols b{display:block;font-family:"PT Serif",Georgia,serif;font-size:17px;color:#c25400}
.vols span{font-size:10.5px;color:#8a959e}
.pumps{display:flex;flex-wrap:wrap;gap:10px}
.pump{flex:1 1 150px;min-width:0;border:1px solid #d5dce1;border-radius:3px;padding:13px 14px;
	background:linear-gradient(#fff,#f7f9fa)}
.pump b{display:block;font-family:"PT Serif",Georgia,serif;font-size:24px;color:#c25400;line-height:1}
.pump u{display:block;text-decoration:none;font-size:11px;color:#25343F;margin:5px 0 6px;
	text-transform:uppercase;letter-spacing:.4px}
.pump span{font-size:11.5px;color:#7a858e}
.gal{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
/* min-width:0 обязателен: у img min-width:auto равен своей ширине,
   без него flex-basis игнорируется и кадр раздувается на всю строку */
.gal img{flex:1 1 190px;min-width:0;width:100%;border:1px solid #d5dce1;border-radius:3px}
.two{display:flex;flex-wrap:wrap;gap:20px}
.two .c{flex:1 1 280px;min-width:0}
.two .c img{border:1px solid #d5dce1;border-radius:3px}

/* ---- контакты ---- */
dl.rq{margin:0}
dl.rq dt{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#93a0aa;margin-top:12px}
dl.rq dd{margin:2px 0 0;font-size:14px;color:#25343F}
dl.rq dd a{color:#25343F}
form input{width:100%;padding:8px 10px;border:1px solid #cdd5da;border-radius:3px;background:#fcfdfd;
	font:13px/1.4 Tahoma,Arial,sans-serif;color:#3f4a52;margin-bottom:10px;
	box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
form input:focus{outline:0;border-color:#FE6E01;background:#fff}
form label{display:block;font-size:11px;color:#7e8b95;margin:0 0 3px}
form .btn{width:100%}
form .sm{font-size:10.5px;color:#93a0aa;margin:8px 0 0}
.hp{position:absolute;left:-9999px}
.map{border:1px solid #d5dce1;border-radius:3px;overflow:hidden;margin-top:16px}
.map iframe{display:block;width:100%;height:330px;border:0}

/* ---- полоса призыва и подвал ---- */
.cta{background:linear-gradient(#ff8a2b,#f06400);color:#fff;padding:18px 22px;border-radius:3px;
	margin:0 0 26px}
.cta b{display:block;font-family:"PT Serif",Georgia,serif;font-size:18px;margin-bottom:4px}
.cta p{color:#ffe4cd;margin:0 0 12px;font-size:12.5px}
.cta .btn{background:#fff;color:#c25400;border-color:#fff;text-shadow:none}
.cta .btn:hover{background:#25343F;color:#fff;border-color:#25343F}
.foot{background:#25343F;color:#8b9aa5;font-size:12px;padding:22px 0 16px}
.foot-c{float:left;width:33.33%;padding-right:20px}
.foot h4{color:#fff;font-family:"PT Serif",Georgia,serif;font-size:13px;margin:0 0 9px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:0 0 6px}
.foot a{color:#a9b8c2}
.foot-b{clear:both;border-top:1px solid #33454f;margin-top:16px;padding-top:12px;font-size:11px;
	color:#6c7d88}

/* ---- адаптив ---- */
@media (max-width:1000px){
	.page{width:100%}
	.main,.side{float:none;width:100%}
	.side{margin-top:22px}
	.head-c{display:none}
}
@media (max-width:640px){
	.head .logo,.head-r{float:none;text-align:left}
	.head-r{margin-top:10px}
	h1,.banner h1{font-size:19px}
	h2{font-size:17px}
	.banner .txt{position:static;background:#25343F;padding:14px 16px}
	.banner p{color:#c9d3da}
	.foot-c{float:none;width:100%;padding:0 0 14px}
	.btn{display:block;width:100%;text-align:center}
	.map iframe{height:260px}
}