@charset "utf-8";
/* ТрансБетон — volokolamskbeton.ru. Палитра логотипа: синий #446F92 + серый #58595B */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:13px/1.6 Arial,Helvetica,sans-serif;color:#4a4f54;background:#e9ebed}
img{max-width:100%;height:auto;border:0;display:block}
a{color:#37607f;text-decoration:underline}
a:hover{text-decoration:none}
h1,h2,h3,h4{font-family:Cuprum,"Trebuchet MS",Arial,sans-serif;font-weight:700;color:#3f444a;margin:0 0 12px}
h1{font-size:28px;line-height:1.22}
h2{font-size:22px;line-height:1.28;text-transform:uppercase;letter-spacing:.3px}
h3{font-size:16px}
p{margin:0 0 11px}
.w{width:1020px;max-width:100%;margin:0 auto;padding:0 12px}
.page{width:1044px;max-width:100%;margin:0 auto;background:#fff;
	box-shadow:0 0 12px rgba(63,68,74,.22)}
.clr:after{content:"";display:table;clear:both}
.sec{padding:30px 0;border-bottom:1px solid #e6e8ea}
.sec:last-of-type{border-bottom:0}
.sec-gray{background:#f4f5f6}
.sec h2{position:relative;padding-bottom:9px}
.sec h2:after{content:"";position:absolute;left:0;bottom:0;width:58px;height:3px;background:#446F92}
.lead{color:#6c7278;margin-bottom:18px;max-width:820px}

/* ---- верхняя строка: адрес, почта, телефон ---- */
.tline{background:#58595B;background:linear-gradient(#6a6b6d,#4c4d4f);color:#c3c5c7;font-size:11.5px;
	padding:7px 0;border-bottom:1px solid #3f4042}
.tline-in{display:flex;flex-wrap:wrap;gap:5px 24px;align-items:center}
.tline a{color:#e8eaeb}
.tline a:hover{color:#a8c6de}
.tline .t{margin-left:auto;color:#fff;font-weight:bold}

/* ---- шапка ---- */
.head{padding:13px 0;background:linear-gradient(#fff,#f4f5f6);border-bottom:1px solid #dfe2e4}
.head-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo img{height:74px;width:auto}
.logo span{display:block;font-size:11px;color:#8a9096;letter-spacing:.3px}
.head-r{margin-left:auto;text-align:right}
.head-r .tel{font-family:Cuprum,"Trebuchet MS",Arial,sans-serif;font-size:23px;color:#3f444a;
	text-decoration:none;display:block;font-weight:700}
.head-r .tel:hover{color:#446F92}
.head-r .zv{font-size:11px;color:#8a9096;display:block;margin-top:1px}

/* ---- меню ---- */
.nav{background:linear-gradient(#6a6b6d,#4c4d4f);border-bottom:3px solid #446F92}
.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 19px;color:#e4e6e8;text-decoration:none;font-size:12.5px;
	font-family:Cuprum,"Trebuchet MS",Arial,sans-serif;text-transform:uppercase;letter-spacing:.4px;
	border-right:1px solid rgba(255,255,255,.09);white-space:nowrap}
.nav a:hover{background:#446F92;color:#fff}

/* ---- баннер ---- */
.banner{position:relative}
.banner img{width:100%}
.banner .plate{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:52%;
	background:rgba(63,68,74,.88);border-left:4px solid #446F92;padding:18px 22px;border-radius:0 3px 3px 0}
.banner h1{color:#fff;margin-bottom:8px;font-size:25px}
.banner p{color:#d6dade;margin:0 0 14px;font-size:12.5px}

/* ---- полоса преимуществ ---- */
.adv{display:flex;flex-wrap:wrap;gap:0;background:#f4f5f6;border-bottom:1px solid #e6e8ea}
.adv div{flex:1 1 220px;padding:16px 18px;display:flex;align-items:center;gap:12px;
	border-right:1px solid #e6e8ea}
.adv div:last-child{border-right:0}
.adv i{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#446F92;color:#fff;
	font-style:normal;font-family:Cuprum,Arial,sans-serif;font-size:16px;font-weight:700;
	display:flex;align-items:center;justify-content:center}
.adv b{display:block;font-family:Cuprum,Arial,sans-serif;font-size:14px;color:#3f444a}
.adv span{font-size:11.5px;color:#7d838a}

/* ---- кнопки ---- */
.btn{display:inline-block;padding:10px 24px;border-radius:3px;border:1px solid #35597a;
	background:linear-gradient(#5280a4,#3d6486);color:#fff;text-decoration:none;font-size:13px;
	font-family:Cuprum,Arial,sans-serif;text-transform:uppercase;letter-spacing:.4px;cursor:pointer;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.btn:hover{background:linear-gradient(#5f8fb4,#456f94);color:#fff;text-decoration:none}
.btn-g{background:linear-gradient(#76777a,#545557);border-color:#414244}
.btn-g:hover{background:linear-gradient(#85868a,#5f6062);color:#fff}
.btn-w{background:linear-gradient(#fff,#eef0f1);color:#37607f;border-color:#cfd4d8;box-shadow:none}
.btn-w:hover{background:linear-gradient(#fff,#e4e7e9);color:#2e5170}

/* ---- продукция: карточки с номером ---- */
.prods{display:flex;flex-wrap:wrap;gap:14px}
.prod{flex:1 1 300px;min-width:0;border:1px solid #dfe2e4;border-radius:3px;background:#fff;
	display:flex;gap:13px;padding:15px 16px;box-shadow:0 1px 2px rgba(63,68,74,.07)}
.prod:hover{border-color:#446F92}
.prod .n{flex:0 0 42px;width:42px;height:42px;border-radius:3px;background:#446F92;color:#fff;
	font-family:Cuprum,Arial,sans-serif;font-size:19px;font-weight:700;
	display:flex;align-items:center;justify-content:center}
.prod .c{min-width:0;display:flex;flex-direction:column}
.prod h3{margin-bottom:5px;font-size:15px}
.prod p{font-size:12px;color:#757b82;margin-bottom:9px;flex:1 1 auto}
.prod .f{font-family:Cuprum,Arial,sans-serif;font-weight:700;font-size:15px;color:#37607f;margin-top:auto}
.prod .f i{display:block;font-style:normal;font-family:Arial,sans-serif;font-size:10.5px;
	font-weight:normal;color:#98a0a7;margin-top:1px}

/* ---- прайс таблицей ---- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #dfe2e4;border-radius:3px;
	background:#fff}
.tw table{border-collapse:collapse;width:100%;min-width:540px;font-size:12.5px}
.tw th{background:linear-gradient(#6a6b6d,#4c4d4f);color:#fff;font-family:Cuprum,Arial,sans-serif;
	font-size:12px;padding:10px 16px;text-align:left;text-transform:uppercase;letter-spacing:.4px}
.tw th:last-child,.tw td.p{text-align:right}
.tw td{padding:9px 16px;border-top:1px solid #edeff0}
.tw tr.g td{background:#eef2f5;color:#3f444a;font-family:Cuprum,Arial,sans-serif;font-weight:700;
	font-size:13px;border-top:1px solid #dfe2e4;text-transform:uppercase;letter-spacing:.3px}
.tw tbody tr:hover td{background:#fafbfb}
.tw tr.g:hover td{background:#eef2f5}
.tw td.n{font-weight:bold;color:#3f444a}
.tw td.p{font-family:Cuprum,Arial,sans-serif;font-weight:700;font-size:14px;color:#37607f;
	white-space:nowrap}
.pnote{background:#f2f6f9;border:1px solid #d6e2ea;border-radius:3px;padding:11px 15px;
	font-size:12px;margin-bottom:15px}

/* ---- прочее ---- */
.two{display:flex;flex-wrap:wrap;gap:22px}
.two .c{flex:1 1 300px;min-width:0}
.two .c img{border:1px solid #dfe2e4;border-radius:3px}
ul.ch{list-style:none;margin:0 0 14px;padding:0}
ul.ch li{position:relative;padding:0 0 9px 23px;font-size:13px}
ul.ch li:before{content:"";position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:2px;
	background:linear-gradient(#5280a4,#3d6486)}
ul.ch li:after{content:"";position:absolute;left:4px;top:7px;width:4px;height:7px;
	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 72px;text-align:center;border:1px solid #dfe2e4;border-radius:3px;padding:9px 5px;
	background:linear-gradient(#fff,#f3f5f6)}
.vols b{display:block;font-family:Cuprum,Arial,sans-serif;font-size:18px;color:#37607f}
.vols span{font-size:10.5px;color:#8a9096}
.pumps{display:flex;flex-wrap:wrap;gap:12px}
.pump{flex:1 1 200px;min-width:0;border:1px solid #dfe2e4;border-radius:3px;padding:15px 16px;
	background:linear-gradient(#fff,#f6f8f9);box-shadow:0 1px 2px rgba(63,68,74,.07)}
.pump b{display:block;font-family:Cuprum,Arial,sans-serif;font-size:26px;color:#37607f;line-height:1}
.pump u{display:block;text-decoration:none;font-size:11px;color:#3f444a;margin:5px 0 6px;
	text-transform:uppercase;letter-spacing:.4px}
.pump span{font-size:11.5px;color:#7d838a}
.gal{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
/* min-width:0 обязателен: у img min-width:auto равен своей ширине,
   без него flex-basis игнорируется и кадр раздувается на всю строку */
.gal figure{flex:1 1 220px;min-width:0;margin:0}
.gal img{width:100%;border:1px solid #dfe2e4;border-radius:3px}
.gal figcaption{font-size:11px;color:#8a9096;padding-top:5px}

/* ---- контакты ---- */
dl.rq{margin:0}
dl.rq dt{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:#98a0a7;margin-top:12px}
dl.rq dd{margin:2px 0 0;font-size:14px;color:#3f444a}
dl.rq dd a{color:#3f444a}
.form{border:1px solid #dfe2e4;border-radius:3px;background:linear-gradient(#fff,#f7f8f9);padding:18px}
form input{width:100%;padding:8px 10px;border:1px solid #ccd2d6;border-radius:3px;background:#fff;
	font:13px/1.4 Arial,sans-serif;color:#4a4f54;margin-bottom:10px;
	box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
form input:focus{outline:0;border-color:#446F92}
form label{display:block;font-size:11px;color:#7d838a;margin:0 0 3px}
form .btn{width:100%}
form .sm{font-size:10.5px;color:#98a0a7;margin:8px 0 0}
.hp{position:absolute;left:-9999px}
.map{border:1px solid #dfe2e4;border-radius:3px;overflow:hidden;margin-top:16px}
.map iframe{display:block;width:100%;height:340px;border:0}

/* ---- призыв и подвал ---- */
.cta{background:linear-gradient(#5280a4,#3d6486);border-radius:3px;padding:16px 22px;color:#fff;
	margin-bottom:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.cta b{display:block;font-family:Cuprum,Arial,sans-serif;font-size:18px;margin-bottom:3px}
.cta p{color:#d5e3ee;margin:0 0 12px;font-size:12px}
.foot{background:linear-gradient(#6a6b6d,#4c4d4f);color:#b6b9bc;font-size:12px;padding:20px 0 14px;
	border-top:3px solid #446F92}
.foot-c{float:left;width:33.33%;padding-right:20px}
.foot h4{color:#fff;font-family:Cuprum,Arial,sans-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:#d4d7d9}
.foot-b{clear:both;border-top:1px solid #5d5e60;margin-top:15px;padding-top:11px;font-size:11px;
	color:#95989b}

/* ---- адаптив ---- */
@media (max-width:1044px){
	.page{width:100%}
	.banner .plate{position:static;transform:none;width:100%;border-left:0;border-top:3px solid #446F92;
		border-radius:0}
}
@media (max-width:640px){
	.head-in{gap:12px}
	.head-r{margin-left:0;text-align:left}
	h1,.banner h1{font-size:19px}
	h2{font-size:17px}
	.logo img{height:46px}
	.head-r .tel{font-size:19px}
	.adv div{flex:1 1 100%;border-right:0;border-bottom:1px solid #e6e8ea}
	.foot-c{float:none;width:100%;padding:0 0 13px}
	.btn{display:block;width:100%;text-align:center}
	.map iframe{height:260px}
}