@charset "UTF-8";

/* Reset */
html { color: #000; background: #fff; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td {
  margin: 0; padding: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; font-variant: normal; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
input, textarea, select { font-size: 100%; }
legend { color: #000; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
* { box-sizing: border-box; vertical-align: top; }

/* HTML */
html { height: 100%; font-size: 10px; }
body { width: 100%; min-height: 100%; vertical-align: top; font-size: 1.6rem; font-family: "Roboto", "Arial Narrow", sans-serif;
	font-weight: 300; color: #252525; display: flex; align-items: center; justify-content: center; 
	background:
		linear-gradient(transparent 25%,#e4eef6, #e4eef6, #e4eef6, transparent 75%),
		url(bg-sky.jpg) no-repeat top center,
		url(bg-pattern.jpg) no-repeat bottom center;	
	background-size: auto, contain, contain;	
}

@media screen and (max-width: 1024px) {
	body { background-size: auto, auto, auto; }
}

* { line-height: 1.1; }
body > .container { width: 60%; min-width: 400px; max-width: 700px; }

.top .logo { padding-top: 18%;  background: url(logo-vebas.png) no-repeat center; background-size: contain; margin: 0 auto; }

.top ul { margin: 0 auto; display: flex; font-size: 2rem; text-transform: uppercase; justify-content: center; flex-wrap: wrap; }
.top ul li { padding: 1rem; display: inline-block; display: flex; align-items: center; }
.top ul li::before { content: ''; display: inline-block; margin-right: 1rem; width: 3.7rem; height: 3.7rem; border-radius: 50%; background: no-repeat center, #ffffff90; }
.top ul li[data-icon="develop"]::before { background-image: url(icon-top-develop.png); }
.top ul li[data-icon="seo"]::before { background-image: url(icon-top-seo.png); }
.top ul li[data-icon="support"]::before { background-image: url(icon-top-support.png); }

.panel { background: white; margin: 4rem 0; }
.panel .content { padding: 4rem; font-size: 2.7rem; text-align: center; }
.panel .content strong { color: #c1272d; }
.panel .content .phone { white-space: nowrap; }

.panel > .heading { padding: 4rem; background: linear-gradient(transparent, #e8eff4); text-transform: uppercase; color: #0b568f; display: flex; align-items: center; justify-content: center; }
.panel > .heading i { display: inline-block; width: 11rem; height: 6rem; background: url(icon-site-disabled.png) no-repeat center/contain; margin-right: 2rem; padding-right: 2rem; position: relative; min-width:11rem; }
.panel > .heading i::after { content:''; display: block; position: absolute; right: 0; top:0; bottom:0; width: 1px; background: linear-gradient(transparent, #c2d5e4, transparent); }
.panel > .heading h1 { font-weight: 300; font-size: 3.5rem;}

@media screen and (max-width: 1024px) {
	.panel { margin: 2rem 0; }
	.panel > .heading h1 { font-size: 3rem; }
}

.contacts { text-align: center; }
.contacts .address { font-size: 2.4rem; margin-bottom: 1rem; }
.contacts .phone { color: #c1272d; font-size: 3.6rem; white-space: nowrap; }