html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}
.float-wrap {overflow:hidden}
.fl {float:left}
.fr {float:right}
.abs-wrap { position:relative;}
.abs-pos { position:absolute;}
.hidden { display:none; }
input, textarea, select {font-size:12px}
a {text-decoration:none}

#mb-popup-loader-wrap{bottom:0; left:0; top:0; right:0; position:fixed; z-index:999}
#mb-popup-loader{width:100px; height:100px; margin:150px auto; background:#fff url('/img/interface/loader.gif') center center no-repeat; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px}
#mb-popup-wrap{bottom:0; left:0; top:0; right:0;  position:fixed; z-index:99999; overflow:auto; background-color:rgba(0,0,0,.6); -webkit-overflow-scrolling: touch;-webkit-transform: translateZ(0px)}
#mb-popup-wrap #mb-popup{height:auto; max-width:980px; margin:20px auto; position:relative; overflow:hidden}
#mb-popup-wrap #mb-popup .mb-popup-in{height:auto; max-width:980px; margin:20px auto; position:relative; background:#fff; overflow:hidden; border:1px solid #666666; box-shadow:0px 2px 14px rgba(0,0,0,.6);-moz-box-shadow:0px 2px 14px rgba(0,0,0,.6);-webkit-box-shadow:0px 2px 14px rgba(0,0,0,.6)}
#mb-popup-wrap #mb-popup .mb-popup-in .close{display:block; cursor:pointer; content:''; z-index:9; position:absolute; top:20px; right:20px; width:13px; height:13px; background:url('/img/interface/popup-close.png')}
#mb-popup-wrap #mb-popup .mb-popup-in-message{padding:20px 40px!important; width:450px; margin:180px auto 0; font-size:24px; font-weight:700; background:rgba(0,0,0,.6)!important; color:#fff!important; border:none!important; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px}html {width:100%; min-height: 100%}
body {font-size:14px; min-height:100%; background: #f2f2f2; color:#666; font-family: 'Roboto', Arial, Tahoma, sans-serif; overflow-y:scroll;}
#site-wrap {margin: 0 auto; min-width: 980px; max-width: 1480px;}
.site-wrap {width: 95%; margin: 0 auto;}

.roboto {font-family: 'Roboto', sans-serif;}
.condensed {font-family: 'Roboto Condensed', sans-serif;}
.light {font-weight: 300;}
.regular {font-weight: 400;}
.bold {font-weight: 700;}

#shade {position: absolute; left: 0; top:0; z-index: 90; width: 100%; height: 100%; background: #000; background: rgba(0,0,0,.8);}
#popup {position: fixed; left: 50%; top: 50%; z-index: 100; width: 940px; height: 500px; margin: -270px 0 0 -470px; background: #f4f4f4; border-radius: 10px; box-shadow: 0 0 20px #000;}

#debug {position: fixed; top: 20px; right: 20px; z-index: 1000; padding: 20px; background: #fff; font-size: 12px; line-height: 16px; color: #222; max-height: 400px; overflow-y: auto;}

a{color:#0091d5;}
a:hover{color:#00aeff;}

h1,.h1 {display: block; font-size: 36px; font-weight: 400; color: #000; text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif;}
h2,.h2 {display: block; font-size: 25px; font-weight: 400; color: #000; text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif;}
h3,.h3 {display: block; font-size: 20px; font-weight: 700; color: #000; text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif;}


.text-page {margin-top: 30px;}

.basic-text {font-size: 14px; line-height: 21px;}
.basic-text p {padding-top: 10px;}
.basic-text ul, .basic-text ol {padding-left: 15px;}
.basic-text ul li {padding-top: 10px; list-style: square url('/img/interface/ul-bullet.png');}
.basic-text ol li {padding-top: 5px; list-style: decimal;}
.basic-text h2,.basic-text h3,.basic-text h4 {margin-top: 30px;}

.basic-form {margin-top: 15px;}
.basic-form .line {padding-bottom: 20px;}
.basic-form .line .label {float: left; width: 50%; font-size: 14px; line-height: 21px; padding-top: 3px;}
.basic-form .line .label span {color: #d01b24; }
.basic-form .line .label label.error {color: #d01b24;}
.basic-form .line .input {float: left; width: 50%;}
.basic-form .line .input input[type=text] {width: 100%; font-size: 16px;}
.basic-form .line .input textarea {width: 100%; height: 60px; font-size: 16px;}
.form-error {padding: 20px; margin-bottom: 10px; border: 1px solid #d01b24;}

#brand-colors div {float: left; width: 20%; height: 10px;}
#brand-colors .dark-red {background: #851726;}
#brand-colors .red {background: #ce2036;}
#brand-colors .light-red {background: #e72f36;}
#brand-colors .orange {background: #ec642f;}
#brand-colors .light-orange {background: #f79631;}

.block-title {padding-top: 50px;}
.site-block {background: #fff;}
.mt-30 {margin-top: 30px;}
.mt-0 {margin-top: 0 !important;}
.mb-20 {margin-bottom: 20px;}
.mr {margin-right: 2%;}
.padding-30 {padding: 30px;}
.block-25 {float: left; width: 23%;}
.block-75 {float: left; width: 75%;}
.block-45 {float: left; width: 45%; margin-right: 5%;}
.block-50 {float: left; width: 50%;}

a.button {display: block; background: #ec642f; text-align: center; margin-top: 30px;}
a.button span {display: block; padding: 20px; font-size: 18px; line-height: 18px; text-transform: uppercase; color: #fff;}
a.button:hover {background: #f79631;}

a.pdf-link {display: block; margin-top: 30px; padding: 10px 0 7px 40px; font-size: 18px; line-height: 18px; color: #2f2f2f; background: url('/img/interface/pdf.png') 0 center no-repeat;}
a.pdf-link span {display: block; font-size: 12px; margin-top: 0px; color: #777;}
a.pdf-link:hover {color: #555;}

a.hh-link {display: block; margin-top: 30px; padding: 2px 0 7px 65px; font-size: 18px; line-height: 18px; color: #2f2f2f; background: url('/img/interface/hh.png') 0 center no-repeat;}
a.hh-link span {display: block; font-size: 12px; margin-top: 0px; color: #777;}
a.hh-link:hover {color: #555;}

#logo {margin: 20px 0 30px;}
#header-contacts {position: absolute; right: 0; top: 40px; font-size: 18px; line-height: 24px; color: #333;}
#header-contacts span {display: block;}
#header-contacts a {color: #000;}
#header-contacts a:hover {text-decoration: underline;}

#top-menu {display: block;}
#top-menu li {float: left; border-right: 1px solid #f2f2f2;}
#top-menu li span {display: block; font-size: 18px; line-height: 18px; padding: 8px 25px 10px; color: #333;}
#top-menu li.active span {background: #ec642f; color: #fff;}
#top-menu li a:hover span {background: #ec642f; color: #fff;}
#top-menu li a:active span {background: #ce2036; color: #fff;}

#sub-menu {margin-top: 10px}
#sub-menu li {float: left; border-right: 1px solid #f2f2f2;}
#sub-menu li span {display: block; font-size: 14px; line-height: 14px; padding: 8px 25px 10px; background: #ec642f; color: #fff;}
#sub-menu li.active span {background: #ec642f; color: #fff;}
#sub-menu li.active a {cursor: default;}
#sub-menu li a:hover span, #sub-menu li.active a span {background: #ce2036; color: #fff;}

#footer {margin: 100px 0 50px;}
#footer-info {float: left; width: 50%; color: #363636; font-size: 14px; line-height: 20px;}
#bright-brains {float: right; color: #444; font-size: 11px; line-height: 14px; width: 240px; margin-top: 40px;}
#bright-brains .inner {padding: 3px 0 0 96px;}
#bright-brains .inner img {position: absolute; left: 0; top: 0;}
#bright-brains a {color: #444; text-decoration: none;}
#bright-brains a:hover {color: #000; text-decoration: underline;}

#index-image {display: block; width: 100%; height: 250px; margin-top: 10px; background: #555;}
#index-image {display: block; width: 100%; height: 250px; margin-top: 10px; background: #555;}
#index-image .text {position: absolute; top: 20px; left: 20px; background: #fff; background: rgba(255,255,255,.6); width: 800px; padding: 20px;}
#index-image .text p {padding-top: 10px; color: #000; font-size: 16px; line-height: 24px;}

#index-projects {float: left;}

#index-content {float: left;}

#index-scheme-switch {width: 102%}
#index-scheme-switch li {float: left; width: 32%; margin-right: 1%; background: #b3b3b3; cursor: pointer;}
#index-scheme-switch li .inner {display: block; width: 100%; height: 235px;}
#index-scheme-switch li .step-number {display: block; width: 80%; margin: 15px auto 0; padding-bottom: 20px; text-align: center; font-size: 23px; color: #fff;  border-bottom: 1px solid #fff;}
#index-scheme-switch li .step-number span {display: block; text-align: center; font-size: 80px; line-height: 70px;}
#index-scheme-switch li .step-title {display: block; width: 80%; margin: 15px auto 0; text-align: center; font-size: 17px; line-height: 24px; color: #fff;}

#index-scheme-switch li.active {background: #fff; cursor: default;}
#index-scheme-switch li.active .step-number {color: #e72f36; border-bottom: 1px solid #e72f36;}
#index-scheme-switch li.active .step-title {color: #e72f36;}

#index-scheme-content {padding: 20px 5% 40px;}
#index-scheme-content ul li {padding-top: 25px;}

#index-licenses {padding: 0 5% 20px;}
#licenses-grid {margin: 40px 0 0;}
#licenses-grid li {float: left; width: 150px; height: 240px; margin: 0 25px 25px 0; }
#licenses-grid li img {width: 100%; border: 1px solid #ddd;}
#licenses-grid.in-company li {float: left; width: 18%; margin: 0 2% 25px 0; border: none;}

#services-licences #index-licenses {padding: 0 0 20px;}

#managers-grid {}
#managers-grid li {float: left; width: 19%; margin-right: 1%;}
#managers-grid li img {width: 100%; margin: 0; padding: 0;}
#managers-grid li .name {font-size: 24px; line-height: 26px; padding: 10px; background: #ce2036; color: #fff; margin: -5px 0 0 0;}
#managers-grid li .position {padding-top: 10px; font-size: 13px; line-height: 21px; color: #5a5a5d;}

.projects-grid {}
.projects-grid li {width: 100%; height: 325px;  background: #c7c7c7; margin-top: 30px;}
.projects-grid.full-width li {float: left; width: 23%; margin-right: 2%; height: 325px; background: #c7c7c7; margin-top: 30px;}
.projects-grid li .image {position: absolute; left: 0; top: 0; z-index: 1; display: block; width: 100%; height: 325px; background: #c7c7c7;}
.projects-grid li .image img
{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -moz-filter: grayscale(100%);
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all .6s;-moz-transition: all .6s;-ms-transition: all .6s;-o-transition: all .6s; transition: all .6s;
}
.projects-grid li a:hover .image img
{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: none; /* IE6-9 */
    -webkit-filter: grayscale(0);
    -webkit-filter: grayscale(0%); /* Chrome 19+ & Safari 6+ */
    -moz-filter: grayscale(0%);
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s; transition: all .5s;
}
.projects-grid li .title {position: absolute; left: 0; bottom: 0; z-index: 2; display: block; width: 100%; background: #000; background: rgba(0,0,0,.7); color: #fff;  opacity: 0;
    -webkit-transition: all .4s;-moz-transition: all .4s;-ms-transition: all .4s;-o-transition: all .4s; transition: all .4s;}
.projects-grid li .title span {display: block; padding: 10px 20px 20px; font-size: 16px; line-height: 20px; background: url('/img/interface/brand-colors-350.png') center bottom no-repeat;}
.projects-grid li a:hover .title {opacity: 1;
    -webkit-transition: all .7s;-moz-transition: all .7s;-ms-transition: all .7s;-o-transition: all .7s; transition: all .7s;}

#project-gallery {}
#active-image {height: 400px; text-align: center;}
#active-image img {width: 100%}
#gallery-thumbs {width: 103%;}
#gallery-thumbs a img {float: left; width: 18%; margin: 10px 1% 0 0; border: 2px solid #f2f2f2; opacity: .5;}
#gallery-thumbs a.active img {border: 2px solid #ec642f; opacity: 1;
    -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s; transition: all .5s;}

.project-gallery-arrows {display: block; padding: 15px; background: #000; background: rgba(0,0,0,.5); position: absolute; top: 190px; color: #fff;}
.project-gallery-arrows:hover {background: rgba(0,0,0,.8); color: #fff;}
#project-gallery-arrow-left {left: 10px;}
#project-gallery-arrow-right {right: 10px;}


#back-to-projects {width: 300px;}

#about-structure-img {width: 100%; max-width: 800px;}


@media screen and (max-width: 1200px) {
    #about-history-wrap .block-75 {float: none; width: 100%;}
    #about-history-wrap .block-25 {float: none; width: 100%;}
    #about-history-wrap .block-25 #about-values-wrap {float: left; width: 50%; margin: 30px 2% 0 0;}
    #about-history-wrap .block-25 #about-philosophy-wrap {float: left; width: 48%;}
}


#careers-page-wrap {}
#careers-page-wrap h2 {padding-top: 0; margin-top: 0;}
#careers-page-wrap strong {font-size: 18px; color: #000; font-family: 'Roboto Condensed', sans-serif;}

.vacancies-grid li {margin-top: 30px;}
.vacancies-grid li .title {font-size: 18px; color: #000;}

#contacts-page-wrap {}
#contacts-page-wrap address {font-size: 18px; line-height: 24px; color: #000; font-style: normal; padding-top: 30px;}

#contacts-contacts-wrap {float: left; width: 330px; height: 600px; margin-right: 20px;}
#contacts-contacts-wrap .padding-30 {padding-bottom: 500px;}
#contacts-map-wrap {margin-left: 350px; height: 600px;}
#map-canvas {width: 100%; height: 600px;}