*     { font-family: Open Sans, Helvetica, Arial; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 
body  { margin: 0; padding: 30pt 0 0 0; font-size: 12pt; color: #222; background-color: #f0f0f0; }
table { border-collapse: collapse; }
img   { border: 0; }

.anim, 
.anim * {
	transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-webkit-transition: all 200ms ease-in-out;
}

*:focus  { outline: none; }
*.minw   { min-width: 320px; }
*.wrap   { display: block; max-width: 1000px; margin: 0 auto; padding: 0 10pt; }
*.bbox   { box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; }
*.nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

*.l { text-align: left;   }
*.c { text-align: center; }
*.r { text-align: right;  }

h1 { margin: 0; font-size: 21pt; font-weight: 300; }
h2 { margin: 0; font-size: 19pt; font-weight: 300; }
h3 { margin: 0; font-size: 17pt; font-weight: 300; }
h4 { margin: 0; font-size: 15pt; font-weight: 300; }
h5 { margin: 0; font-size: 13pt; font-weight: 300; }
h6 { margin: 0; font-size: 11pt; font-weight: 300; }

/* loader */
@keyframes loading {
    0% { width: 0%; margin-left: 0%; margin-right: 100%; }
   50% { width: 100%; margin-left: 0%; margin-right: 0%; }
  100% { width: 0%; margin-left: 100%; margin-right: 0%; }
}
div.loader     { position: fixed; z-index: 12; left: 0; right: 0; bottom: 0; transform: translate3d(0,0,0); }
div.loader > * { height: 2px; background-color: #f00; position: absolute; bottom: 0; }
div.loader > * { animation: loading 10s linear infinite paused; }

/* popup messages */
div.dialogs                  { position: fixed; z-index: 8; right: 10pt; bottom: 0; width: 200pt; }
div.dialogs div.dialog       { padding: 5pt; margin-bottom: 10pt; cursor: default; overflow: hidden; text-overflow: ellipsis; }
div.dialogs div.dialog       { 
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#000));
	background: -moz-linear-gradient(top, #333, #000);
	background: -o-linear-gradient(top, #333, #000);
	background-color: #000; color: #fff;
	border: 1px solid #000; box-shadow: 0 0 3pt 0 #000, inset 0 0 1pt #fff;
}
div.dialogs div.dialog.error { color: #f22; }
div.dialogs div.dialog.info  { color: #2fa; }
div.dialogs div.dialog.blue  { color: #2af; }

/* top and bottom menus */
nav ul      { margin: 0; padding: 0; }
nav ul > li { margin: 0; padding: 0; list-style-type: none; }

/* header line */
header { position: fixed; z-index: 10; left: 0; top: 0; width: 100%; height: 30pt; }
header { background-color: rgba(0,0,0,0.8); box-shadow: 0 0 1pt 0 rgba(0,0,0,0.3); }

/* header navigation */
header nav         { height: 30pt; line-height: 30pt; font-size: 12pt; white-space: nowrap; }
header nav a       { display: block; text-decoration: none; color: #ddd; height: 30pt; }
header nav a:hover { color: #000; background-color: #fff; }
header nav li      { float: left; position: relative; }
header nav li li   { float: none; }

header nav div.menu       { width: 30pt; text-align: center; float: left; font-size: 16pt; cursor: pointer; color: #ddd; }
header nav div.menu:hover { color: #000; background-color: #fff; }

header nav div.menu { display: none; }
header nav ul.menu  { display: block; }

header nav ul.menu.main  { float: left; }
header nav ul.menu.icons { float: right; }

header nav .icon         { display: block; float: left; width: 30pt; font-size: 16pt; text-align: center; }
header nav .text         { display: inline-block; overflow: hidden; padding: 0 6pt; }
header nav .icon + .text { padding: 0 6pt 0 0; }

header nav ul.menu ul .text         { padding: 0 6pt 0 30pt; }
header nav ul.menu ul .icon + .text { padding: 0 6pt 0 0; }

/* header icons */
header nav ul.icons > li       .text { max-width: 0; padding: 0; }
header nav ul.icons > li:hover .text { max-width: 200px; padding: 0 6pt 0 0; }

/* second level */
header nav ul.menu              ul { position: absolute; left: 0; min-width: 100pt; background-color: rgba(0,0,0,0.8); box-shadow: 0 0 1pt 0 rgba(0,0,0,0.3); }
header nav ul.menu.icons        ul { left: auto; right: 0; }
header nav ul.menu > li       > ul { display: none; }
header nav ul.menu > li:hover > ul { display: block; }

header i.lang { display: inline-block; width: 20pt; height: 20pt; background: no-repeat center center; background-size: contain; vertical-align: middle; }

/* compact screens navigation */
@media screen and (max-width: 820px) {
	/* remove gap and show menu button */
	header nav.wrap     { padding: 0; }
	header nav div.menu { display: block; }

	/* header menu displaying */
	header nav div.menu:hover + ul.main { left: 0; }
	header nav ul.main:hover            { left: 0; }

	/* header menu become left-sided */
	header nav ul.main      { position: fixed; z-index: 10; top: 30pt; bottom: 0; left: -150pt; width: 150pt; padding-top: 20pt; overflow: auto; }
	header nav ul.main      { background-color: rgba(0,0,0,0.8); box-shadow: 0 0 1pt 0 rgba(0,0,0,0.3); }
	header nav ul.main > li { float: none; }

	/* second level */
	header nav ul.main > li > ul { position: relative; display: block; background-color: transparent; box-shadow: none; }

	/* align if there is no icon */
	header nav .text         { padding: 0 6pt 0 30pt; }
	header nav .icon + .text { padding: 0 6pt 0 0; }
}

footer                       { min-height: 50pt; }
footer div.wrap              { border-top: 1px dotted #888; padding: 5pt 10pt; }
footer div.copy              { font-size: 12pt; white-space: nowrap; }
footer nav                   { float: right; }
footer nav > ul > li         { display: inline-block; margin-left: 2pt; font-size: 0; }
footer nav > ul > li a       { display: block; color: #000; text-decoration: none; font-size: 12pt; padding: 4pt; }
footer nav > ul > li a:hover { text-decoration: underline; }

@media screen and (max-width: 480px) {
	footer nav > ul > li     { display: block; }
}

footer div.manage            { display: block; float: left; font-size: 0; }
footer div.manage a          { display: inline-block; text-decoration: none; text-align: center; font-size: 18pt; line-height: 26pt; width: 26pt; }
footer div.manage a          { color: #000; background-color: rgba(0,0,0,0); }
footer div.manage a:hover    { color: #fff; background-color: #000; }

div.social      { font-size: 0; margin: 2pt 0; }
div.social a    { display: inline-block; width: 18pt; height: 18pt; background: no-repeat center center; background-size: 100%; margin-right: 2pt; }
div.social a.fb { background-image: url('/static/img/social/facebook.png'); }
div.social a.gp { background-image: url('/static/img/social/googleplus.png'); }
div.social a.vk { background-image: url('/static/img/social/vkontakte.png'); }


/* forms */
form                     { line-height: auto; }
form div.row             { margin: 10pt 0; }
form div.row:first-child { margin-top: 0; }
form div.row:last-child  { margin-bottom: 0; }
form label               { display: block; font-size: 15pt; padding: 2pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
form label.header        { background-color: #e0e0e0; }
form label.disabled      { color: #888; }
form label input         { width: auto; border: none; }
form label span          { color: #999; }
form option              { font-size: 15pt; }
form input,
form textarea,
form select              { width: 100%; border: 1px solid #ccc; font-size: 15pt; padding: 2pt; margin: 0; }
form input.error,
form textarea.error,
form select.error        { border-color: #f22; }
form :required           { background-color: #ffffe0; }

form div.attach                   { border: 1px dashed #888; background-color: rgba(0,0,0,0.1); overflow: hidden; }
form div.attach > div             { padding: 4pt; cursor: pointer; }
form div.attach > ul              { margin: 0; padding: 0 4pt; list-style-type: none; }
form div.attach > ul > li         { margin: 0; padding: 0; padding-bottom: 4pt; }
form div.attach > ul > li a       { display: block; float: left; color: red; text-decoration: none; padding: 0 2pt 0 0; }
form div.attach > ul > li a:hover { color: red; text-decoration: none; }
form div.attach > ul > li span    { display: block; float: right; color: #888; font-style: italic; }
form div.attach > ul > li div     { padding: 0 2pt; color: #048; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
form div.attach > img             { display: block; margin: 0 auto; max-width: 100%; }

form.signin  { margin: 0 auto; max-width: 200pt; }
form.contact { margin: 0 auto; max-width: auto; }

form.compact div.row { margin: 0; }
form.compact label   { font-size: 12pt; padding: 0; }
form.compact input   { font-size: 12pt; }


/* content */
section.main               { margin: 10pt auto; }
main.content               { display: block; position: relative; overflow: hidden; margin: 0; padding: 10pt; }
main.content               { background-color: #fff; box-shadow: 0 0 1pt 0 rgba(0,0,0,0.1); }
main.content p             { margin: 10pt 0; text-indent: 0; text-align: justify; }
main.content p:first-child { margin-top: 0; }
main.content p:last-child  { margin-bottom: 0; }
main.content a             { color: #048; text-decoration: underline; }
main.content a:hover       { color: #06c; text-decoration: none; }
main.content ul            { margin: 10pt 0; padding: 0 0 0 10pt; list-style-type: square; }
main.content li            { margin: 0; padding: 0; }
main.content img           { max-width: 100%; }

main.content.no-bg         { background: none; padding: 0; box-shadow: none; }


div.contact         { max-width: 200pt; margin: 0 auto; }
div.contact ul li   { position: relative; padding: 2pt 0; }
div.contact ul li a { position: absolute; right: 0; }

div.calc   { font-size: 15pt; }
div.calc b { color: red; }

div.feedbacks       { margin-top: 10pt; }
div.feedbacks .item { margin-bottom: 10pt; padding: 5pt; }
div.feedbacks .item { background-color: #fff; box-shadow: 0 0 1pt 0 rgba(0,0,0,0.1); }
div.feedbacks div.text { margin-top: 5pt; }

/* multi columns */
.multicol     { -webkit-column-gap: 10pt; -moz-column-gap: 10pt; column-gap: 10pt; }
.multicol > * { 
	-webkit-column-break-inside: avoid; 
	-moz-column-break-inside: avoid; 
	-o-column-break-inside: avoid; 
	-ms-column-break-inside: avoid; 
	column-break-inside: avoid; 
	page-break-inside: avoid;
	break-inside: avoid;
	width: 100%;
}

.multicol.m2  { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
.multicol.m3  { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }

@media screen and (max-width: 800px) {
	.multicol.m2  { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
	.multicol.m3  { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
}

@media screen and (max-width: 640px) {
	main.content     { padding: 0; background-color: inherit; box-shadow: none; }
	.multicol.m2  { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
	.multicol.m3  { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
}

.multicol2 > *                 { margin-top: 10pt; float: left; width: 50%; padding: 0 5pt; }
.multicol2 > *:nth-child(2n+1) { padding-left: 0; }
.multicol2 > *:nth-child(2n+2) { padding-right: 0; }

@media screen and (max-width: 640px) {
	.multicol2 > *             { float: none; width: 100%; padding: 0; }
}


.multicol-flex {
	display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
}


.multicol-flex > * { margin-top: 10pt; width: calc(50% - 5pt); }

@media screen and (max-width: 640px) {
	.multicol-flex > * { width: 100%; }
}


/* typed lists */
div.group .item            { position: relative; display: block; text-decoration: none; }
div.group .item            { box-shadow: 0 0 1pt 0 rgba(0,0,0,0.1); }

div.group .project         { min-height: 100pt; }
div.group .project:hover   { color: #000; }
div.group .project img     { width: 100%; display: block; }
div.group .project h3      { padding: 0 5pt; line-height: 30pt; }
div.group .project         div.caption { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; background-color: rgba(0,0,0,0.6); }
div.group .project         div.caption { opacity: 0.8; }
div.group .project:hover   div.caption { opacity: 1.0; }

div.group .smi             { min-height: 100pt; }
div.group .smi:hover       { color: #000; }
div.group .smi img         { width: 100%; display: block; }
div.group .smi h3          { padding: 0 5pt; line-height: 30pt; }
div.group .smi             div.caption { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; background-color: rgba(0,0,0,0.6); }
div.group .smi             div.caption { opacity: 0.8; }
div.group .smi:hover       div.caption { opacity: 1.0; }

ul.articles          { margin: 0; padding: 5pt 0 0 0; }
ul.articles li       { margin: 0 0 0 10pt; padding: 2pt 10pt 2pt 0; }


/* team */
div.team .item              { position: relative; display: block; text-decoration: none; }
div.team .item              { box-shadow: 0 0 1pt 0 rgba(0,0,0,0.1); }
div.team .item              { padding: 0; margin: 10pt 0; background: #fff; color: #444; }
div.team .item    div.info  { padding: 10pt; }
div.team .item    img.photo { max-width: 200pt; }
div.team .item.ll div.info  { margin-left: 200pt; }
div.team .item.ll img.photo { float: left; }
div.team .item.rr div.info  { margin-right: 200pt; }
div.team .item.rr img.photo { float: right; }
div.team h3                 { line-height: 20pt; color: #000; font-weight: 500; }
div.team small              { position: relative; top: -2pt; }
div.team ul                 { margin: 0; padding: 5pt 0 5pt 15pt; }
div.team li                 { margin: 0; padding: 0; }

@media screen and (max-width: 520px) {
	div.team .item    img.photo { max-width: 100%; }
	div.team .item.ll div.info  { margin-left: 0; }
	div.team .item.ll img.photo { float: none; }
	div.team .item.rr div.info  { margin-right: 0; }
	div.team .item.rr img.photo { float: none; }
}

/* home page specific styles */
aside.right                 { float: right; width: 200pt; position: sticky; top: 40pt; }
aside.right + main.content  { margin-right: 210pt; }

aside.right .block             { background-color: rgba(255,255,255,0.5); margin-top: 10pt; }
aside.right .block:first-child { margin-top: 0; }
aside.right .block h4          { padding: 1pt 3pt; line-height: 24pt; background-color: rgba(255,255,255,0.8); }

aside.right div.project       { margin: 5pt 0; }
aside.right div.project a     { position: relative; display: block; text-decoration: none; }
aside.right div.project a     { height: 80pt; background: center center no-repeat; background-size: cover; }
aside.right div.project a       .caption { display: block; padding: 5pt; }
aside.right div.project a       .caption { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; background-color: rgba(0,0,0,0.6); }
aside.right div.project a       .caption { opacity: 0.8; }
aside.right div.project a:hover .caption { opacity: 1.0; }

aside.right div.article a       { display: block; padding: 5pt; }
aside.right div.article a       { color: #048; text-decoration: none; }
aside.right div.article a:hover { color: #06c; text-decoration: underline; }

@media screen and (max-width: 800px) and (min-width: 481px) {
	aside.right	               { float: none; width: auto; position: static; top: auto; margin-bottom: 10pt; background-color: rgba(255,255,255,0.5); }
	aside.right + main.content { margin-right: 0; }

	aside.right .block    { background-color: transparent; }
	aside.right	.block.b1 { float: left; width: calc(50% - 5pt); }
	aside.right	.block.b2 { float: right; width: calc(50% - 5pt); margin-top: 0; }

	aside.right div.project       { margin: 0; }
	aside.right div.project a     { height: auto; background: none !important; }
	aside.right div.project a       .caption { position: static; background-color: rgba(255,255,255,0.0); opacity: 1; }
	aside.right div.project a       .caption { color: #048; text-decoration: none; }
	aside.right div.project a:hover .caption { color: #06c; text-decoration: underline; }
}

@media screen and (max-width: 480px) {
	aside.right	               { float: none; width: auto; position: static; top: auto; margin-bottom: 10pt; }
	aside.right + main.content { margin-right: 0; }
}