html, body { padding: 0; margin: 0; font-family: 'DINCondensed', sans-serif; font-size: 16px; line-height: 1.5em; color: #343434; font-weight: 400; min-height: 100vh; }

body { background-position: center top; background-size: cover; background-color: #211e27; }

header { position: fixed; left: 0; top: 0; right: 0; padding-right: 10%; padding-left: 5.5%; padding-top: 70px; font-size: 22px; z-index: 100; }
header a { color: #ebf3f7; text-decoration: none; }
header .sitename { text-align: center; position: absolute; left: 45%; right: 45%; opacity: 1; transition: all .1s ease-in 0s; }
header .menu { float: right; }
header .menu ul { list-style: none; margin: 0; padding: 0; }
header .menu ul li { display: inline-block; margin-left: 60px; opacity: 1; }
header .menu ul li:nth-child(1) { transition: all .1s ease-in 0.2s; }
header .menu ul li:nth-child(2) { transition: all .1s ease-in 0.4s; }
header .menu ul li:nth-child(3) { transition: all .1s ease-in 0.6s; }
header .menu ul li:nth-child(4) { transition: all .1s ease-in 0.8s; }
header .menu ul li:nth-child(5) { transition: all .1s ease-in 1.0s; }
header .lk { float: left; font-size: 17px; position: relative; line-height: 37px; opacity: 1; transition: all .1s ease-in 1.0s; }
header .lk:before { content: " "; position: absolute; margin-left: -50px; display: block; width: 37px; height: 37px; background: url(../images/ico-user@2x.png); background-size: 37px 37px;  }

header .lk .lk-form { display: none; position: absolute; left: -80px; top: -20px; background: rgba(37,37,37,.8); box-shadow: 0 0 25px 0 rgba(0,0,0,.5); padding: 20px 80px 20px 80px; white-space: nowrap; z-index: 1000; }
header .lk .lk-form.opened { display: block; }
header .lk .lk-form .name i { font-family: 'PFDinTextPro'; position: absolute; right: 20px; top: 10px; cursor: pointer; font-size: 40px; transform: rotate(45deg); color: #fff; }
header .lk .lk-form .field { margin: 8px 0; }
header .lk .lk-form .field input { border: 1px solid #a1a1a1; background: #252525; border-radius: 4px; height: 36px; padding: 0 8px; font-size: 18px; font-family: 'PFDinTextPro'; color: #ebf3f7; width: 100%; box-sizing: border-box; }
header .lk .lk-form .button button { border: 1px solid #a1a1a1; background: #252525; border-radius: 4px; height: 36px; padding: 0 36px; font-size: 18px; font-family: 'PFDinTextPro'; color: #ebf3f7; cursor: pointer; }
header .lk .lk-form .error { margin: 8px 0; color: #c77; }

.social { position: fixed; right: 10%; bottom: 50px; font-size: 0; opacity: 1; transition: all .1s ease-in 1s; z-index: 100; }
.social a { margin-left: 12px; }
.social img + img { margin-left: 5px; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	header { padding-right: 2%; padding-left: 5.5%; padding-top: 30px; }
	header .menu ul li { margin-left: 20px; }

	.social { right: 2%; bottom: 10px; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
	header { padding-right: 5%; padding-left: 5.5%; padding-top: 40px; }
	header .menu ul li { margin-left: 30px; }

	.social { right: 5%; bottom: 10px; }
}


.mainpage { padding: 100px 10% 100px; text-align: right; position: relative; }
.mainpage .name { font-size: 32px; color: #fff; text-transform: uppercase; transition: all .1s linear; }
.mainpage ul { font-size: 32px; color: #fff; line-height: 32px; margin-top: 100px; margin-left: calc(5.5% + 780px); transition: all .1s linear .2s; }
.mainpage ul li { margin: 50px 0; position: relative; cursor: pointer; }
.mainpage ul li.active { color: #fafc7a; }
.mainpage ul li.active i.line { background: #fff; height: 2px; position: absolute; width: 1px; right: 0; bottom: -2px; }
.mainpage .desc { position: absolute; left: 5.5%; width: 700px; min-height: 300px; top: 100px; color: #fff; text-align: left; background: rgba(37,37,37,.8); padding: 40px 0px 10px 10px; transition: all .1s linear .2s; margin-bottom: 50px; }
.mainpage .desc:before { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; border: 1px solid #fff; border-left: 0; width: 80px; }
.mainpage .desc .text { font-size: 60px; line-height: 60px; }
.mainpage .desc .hint { font-family: 'PFDinTextPro'; font-size: 18px; text-align: left; line-height: 24px; margin: 50px 0 25px; }
.mainpage .desc .hint-extra { display: none; margin-top: 0px; }
.mainpage .desc .hint-extra.opened { display: block; }
.mainpage .desc .hint p { margin: .5em 0; }
.mainpage .desc .hint h3 { font-family: 'DINAlternate'; font-size: 18px; margin: 1em 0 .5em; padding: 5px 65px; text-transform: uppercase; text-align: right; width: 65%; }
.mainpage .desc .hint h3.color1 { background: #71517a; color: #fff; }
.mainpage .desc .hint h3.color2 { background: #97d1d9; color: #fff; }
.mainpage .desc .hint h3.color3 { background: #a8b213; color: #fff; }
.mainpage .desc .more { font-family: 'PFDinTextPro'; font-size: 18px; text-align: right; line-height: 24px; font-weight: bold; margin: 50px 0 25px; }
.mainpage .desc .more a { color: #fff; }
.mainpage .desc .element { display: none; }
.mainpage .desc .element.active { display: block; max-height: 500px; overflow: auto; }
.mainpage .desc .element .text,
.mainpage .desc .element .hint,
.mainpage .desc .element .more { margin-right: 70px; }

.mainpage.disabled .name { display: none; }
.mainpage.disabled ul { display: none; }
.mainpage.disabled .desc { display: none; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.mainpage { padding: 50px 2%; }
	.mainpage ul { margin-top: 50px; margin-left: calc(5.5% + 500px); }
	.mainpage .desc { left: 5.5%; width: 500px; top: 50px; padding: 20px 0px 10px 10px; }
	.mainpage .desc .text { font-size: 40px; line-height: 40px; }
	.mainpage .desc .element .text,
	.mainpage .desc .element .hint { margin-right: 30px; }
	.mainpage .desc .hint h3 { padding: 5px 35px; width: 80%; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.mainpage { padding: 50px 5%; }
	.mainpage ul { margin-top: 70px; margin-left: calc(5.5% + 500px); }
	.mainpage .desc { left: 5.5%; width: 500px; top: 50px; padding: 20px 0px 10px 10px; }
	.mainpage .desc .text { font-size: 40px; line-height: 40px; }
	.mainpage .desc .element .text,
	.mainpage .desc .element .hint { margin-right: 30px; }
	.mainpage .desc .hint h3 { padding: 5px 35px; width: 75%; }
}

.section-name { position: fixed; left: 5.5%; top: 160px; font-size: 100px; line-height: 76px; color: #fff; width: 1px; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.section-name { left: 2.5%; top: 100px; font-size: 60px; line-height: 55px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.section-name { left: 2.5%; top: 120px; font-size: 80px; line-height: 65px; }
}

.section-cards { margin: 0px 10% 5px calc(5.5% + 100px); font-size: 0; }
.section-cards .element { background: rgba(78,80,96,.85); width: calc(25% - 18px); margin: 9px; display: inline-block; vertical-align: top; font-size: 16px; line-height: 18px; color: #cacaca; padding: 20px 20px 20px 60px; height: 40vh; text-align: right; }
.section-cards .element:hover { background: url(../images/hover1.gif) 0 0 no-repeat rgba(78,80,96,.85); background-size: cover; }
.section-cards .element .name { font-size: 42px; line-height: 36px; margin-bottom: 40px; min-height: 72px; color: #fff; }
.section-cards .element .name.copy { color: #db51a3; }
.section-cards .element .name .ux { color: #726cd5; }
.section-cards .element .name.apps { color: #ddf744; }
.section-cards .element .name.support { color: #8adbda; }
.section-cards .element .name.smm { color: #80ebe2; }
.section-cards .element .name.pics { color: #aa53f0; }
.section-cards .element .name.webdev { color: #b13e3e; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.section-cards { margin: 0 2% 5px calc(2.5% + 50px); }
	.section-cards .element { padding: 15px 15px 15px 30px; height: 40vh; }
	.section-cards .element .name { font-size: 28px; line-height: 25px; margin-bottom: 20px; min-height: 50px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.section-cards { margin: 0 2% 5px calc(2.5% + 80px); }
	.section-cards .element { padding: 15px 15px 15px 30px; height: 40vh; }
	.section-cards .element .name { font-size: 28px; line-height: 25px; margin-bottom: 20px; min-height: 50px; }
}

.section-agency { font-size: 0; margin: 0px 10% 5px calc(5.5% + 100px); }
.section-agency .text { color: #ebf3f7; font-size: 16px; line-height: 20px; font-family: 'PFDinTextPro'; background: rgba(37,37,37,.8); padding: 15px 32px 32px 20px; display: inline-block; vertical-align: top; position: relative; }
.section-agency .text:before { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; border: 1px solid #fff; border-left: 0; width: 80px; }
.section-agency .text p { margin: 1em 0; }
.section-agency .text p.sub { margin: 1em 0 1em 2em; font-style: italic; }
.section-agency .text1 { width: 40%; margin-right: 15px; font-weight: 200; }
.section-agency .text1 h1 { font-size: 1.6em; line-height: 1.2em; font-weight: 500; }
.section-agency .text2 { width: calc(30% - 15px); margin-right: 15px; }
.section-agency .text2 b { font-size: 1.2em; font-weight: 500; }
.section-agency .text3 { width: calc(30% - 15px); }
.section-agency img { max-width: 100%; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.section-agency { margin: 0 2% 5px calc(2.5% + 50px); }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.section-agency { margin: 0 2% 5px calc(2.5% + 80px); }
}

.section-contacts { font-size: 0; margin: 0px 10% 5px calc(5.5% + 100px); }
.section-contacts .text { color: #ebf3f7; font-size: 16px; line-height: 20px; font-family: 'PFDinTextPro'; background: rgba(37,37,37,.8); padding: 15px 32px 32px 20px; display: inline-block; vertical-align: top; position: relative; }
.section-contacts .text:before { content: " "; display: block; position: absolute; right: 0; top: 0; bottom: 0; border: 1px solid #fff; border-left: 0; width: 80px; }
.section-contacts .text p { margin: 1em 0; }
.section-contacts .text p.sub { margin: 1em 0 1em 2em; font-style: italic; }
.section-contacts .text1 { display: inline-block; text-align: right; width: calc(30% - 50px); margin-right: 50px; font-weight: 200; font-size: 36px; line-height: 48px; color: #eff7fa; font-family: 'PFDinTextPro'; font-weight: bold; }
.section-contacts .text1 b { font-size: 72px; display: block; }
.section-contacts .text1 .percent75 { display: inline-block; width: 310px; height: 310px; background: url(../images/percent75.png) center center no-repeat; text-align: center; padding-top: 110px; margin-bottom: 50px; }
.section-contacts .text1 .percent86 { display: inline-block; width: 310px; height: 310px; background: url(../images/percent86.png) center center no-repeat; text-align: center; padding-top: 110px; font-size: 30px; }
.section-contacts .text2 { width: calc(30% - 15px); margin-right: 15px; font-size: 40px; line-height: 40px; color: #eff7fa; text-align: right; font-family: 'PFDinTextPro'; }
.section-contacts .text2 b { font-size: 82px; display: block; margin-bottom: 10px; font-weight: bold; }
.section-contacts .text2 p { margin-bottom: 100px; }
.section-contacts .text2 b.cases { color: #d732ac;  }
.section-contacts .text2 b.projects { color: #1db4ed; font-size: 117px; margin-bottom: 20px; }
.section-contacts .text2 b.tasks { color: #20df2b; font-size: 117px; margin-bottom: 20px; }
.section-contacts .text3 { width: 40%; font-size: 18px; line-height: 22px; font-family: 'PFDinTextPro'; }
.section-contacts .text3 .phone { font-size: 38px; margin: 0; }
.section-contacts .text3 .email { font-size: 24px; display: block; margin-top: .2em; }
.section-contacts .text3 .form .field { margin: 8px 0; }
.section-contacts .text3 .form .field input[type=text] { border: 1px solid #a1a1a1; background: #252525; border-radius: 4px; height: 36px; padding: 0 8px; font-size: 18px; font-family: 'PFDinTextPro'; color: #ebf3f7; width: 100%; box-sizing: border-box; }
.section-contacts .text3 .form .field textarea { border: 1px solid #a1a1a1; background: #252525; border-radius: 4px; height: 36px; padding: 8px 8px; height: 200px; font-size: 18px; font-family: 'PFDinTextPro'; color: #ebf3f7; width: 100%; box-sizing: border-box; }
.section-contacts .text3 .form .button { text-align: right; }
.section-contacts .text3 .form .button button { border: 1px solid #a1a1a1; background: #252525; border-radius: 4px; height: 36px; padding: 0 36px; font-size: 18px; font-family: 'PFDinTextPro'; color: #ebf3f7; cursor: pointer; }
.section-contacts .text3 .form .error { margin: 8px 0; color: #c77; }
.section-contacts .text3 .form .done { margin: 8px 0; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.section-contacts { margin: 0 2% 5px calc(2.5% + 50px); }

	.section-contacts .text1 { font-size: 30px; line-height: 36px; }
	.section-contacts .text1 b { font-size: 50px; }
	.section-contacts .text1 .percent75 { width: 200px; height: 200px; background-size: 200px; padding-top: 60px; margin-bottom: 50px; }
	.section-contacts .text1 .percent86 { width: 200px; height: 200px; background-size: 200px; padding-top: 60px; font-size: 24px; }

	.section-contacts .text2 { font-size: 25px; line-height: 25px; }
	.section-contacts .text2 b { font-size: 64px; }
	.section-contacts .text2 p { margin-bottom: 60px; }
	.section-contacts .text2 b.projects { font-size: 82px; }
	.section-contacts .text2 b.tasks { font-size: 82px; }

	.section-contacts .text3 { font-size: 16px; line-height: 20px; }
	.section-contacts .text3 .phone { font-size: 32px; }
	.section-contacts .text3 .email { font-size: 22px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.section-contacts { margin: 0 2% 5px calc(2.5% + 80px); }

	.section-contacts .text2 { font-size: 30px; line-height: 30px; }
	.section-contacts .text2 b { font-size: 70px; }
	.section-contacts .text2 p { margin-bottom: 60px; }
	.section-contacts .text2 b.projects { font-size: 100px; }
	.section-contacts .text2 b.tasks { font-size: 100px; }
}

.section-projects { margin: 0px 10% 5px calc(5.5% + 100px); font-size: 0; height: calc(100vh - 160px);}
.section-projects .element { font-family: 'PFDinTextPro'; width: calc(33% - 18px); margin: 9px; display: inline-block; vertical-align: top; font-size: 18px; line-height: 1.4em; color: #fff; border-right: 1px solid #fff; position: relative; background-size: cover; }
.section-projects .element:before { content: " "; position: absolute; top: 0; right: 0; width: 45px; height: 1px; background: #fff; }
.section-projects .element:after { content: " "; position: absolute; bottom: 0; right: 0; width: 45px; height: 1px; background: #fff; }
.section-projects .element .pad { padding: 40px 20px; min-height: 30vh; }
.section-projects .element .name { font-size: 22px; line-height: 1.2em; }
.section-projects .element .text { font-size: 18px; line-height: 1.4em; margin-top: 1em; }
.section-projects .element .text b { font-weight: 600; }
.section-projects .element .text ul li { position: relative; padding-left: 20px; }
.section-projects .element .text ul li:before { content: "\2714"; position: absolute; left: 0; }
.section-projects .element .text ul li + li { margin-top: 8px; }
.section-projects .element:nth-child(4n+1) { background-color: rgba(37,37,37,.8); }
.section-projects .element:nth-child(4n+2) { background-color: rgba(199,178,153,.8); }
.section-projects .element:nth-child(4n+3) { background-color: rgba(125,167,217,.8); }
.section-projects .element:nth-child(4n) { background-color: rgba(211,182,50,.8); }
.section-projects .element .pad.black { background-color: rgba(37,37,37,.8); }
.section-projects .element .pad.blue { background-color: rgba(125,167,217,.8); }
.section-projects .element .pad.gold { background-color: rgba(199,178,153,.8); }
.section-projects .element .pad.cream { background-color: rgba(199,178,153,.8); }
.section-projects .element.bg:nth-child(4n+1) .pad { background-color: rgba(37,37,37,.8); }
.section-projects .element.bg:nth-child(4n+2) .pad { background-color: rgba(199,178,153,.8); }
.section-projects .element.bg:nth-child(4n+3) .pad { background-color: rgba(125,167,217,.8); }
.section-projects .element.bg:nth-child(4n) .pad { background-color: rgba(211,182,50,.8); }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.section-projects { margin: 0 2% 5px calc(2.5% + 50px); height: calc(100vh - 100px); }
	.section-projects .element { width: calc(50% - 18px); }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.section-projects { margin: 0 2% 5px calc(2.5% + 80px); height: calc(100vh - 120px); }
}

div.preloader  { display: none; text-align: center; position: fixed; left: calc(50vw - 75px); top: calc(50vh - 162px); }

body.preloader { background-color: #211e27; }
body.preloader > div.mainpage { display: none; }
body.preloader > div.preloader { display: block; }

body.preloader header .sitename { opacity: 0; }
body.preloader header .menu ul li { opacity: 0; }
body.preloader header .lk { opacity: 0; }

body.preloader > .social { opacity: 0; }

.pages { display: block; position: fixed; left: 0; right: 0; top: 150px; bottom: 0; overflow: auto; }
.pages.disabled { display: none; }

@media (min-width: 992px) and (max-width: 1199.98px) {
	.pages { top: 90px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
	.pages { top: 110px; }
}