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}/*@import url("http://fast.fonts.net/lt/1.css?apiType=css&c=18643c56-f305-4f11-9de8-a563078c8446&fontids=777240,777252,777255");*/
@font-face{
   font-family:"HelveticaNeueW10-45Ligh";
   src:url("/css/fonts/777240/5b85c7cc-6ad4-4226-83f5-9d19e2974123.eot?#iefix");
   src:url("/css/fonts/777240/5b85c7cc-6ad4-4226-83f5-9d19e2974123.eot?#iefix") format("eot"),url("/css/fonts/777240/835e7b4f-b524-4374-b57b-9a8fc555fd4e.woff") format("woff"),url("/css/fonts/777240/2c694ef6-9615-473e-8cf4-d8d00c6bd973.ttf") format("truetype"),url("/css/fonts/777240/3fc84193-a13f-4fe8-87f7-238748a4ac54.svg#3fc84193-a13f-4fe8-87f7-238748a4ac54") format("svg");
}
@font-face{
   font-family:"HelveticaNeueW10-55Roma";
   src:url("/css/fonts/777252/f1feaed7-6bce-400a-a07e-a893ae43a680.eot?#iefix");
   src:url("/css/fonts/777252/f1feaed7-6bce-400a-a07e-a893ae43a680.eot?#iefix") format("eot"),url("/css/fonts/777252/8ac9e38d-29c6-41ea-8e47-4ae4d2b1a4e1.woff") format("woff"),url("/css/fonts/777252/4bd09087-655e-4abb-844c-dccdeb68003d.ttf") format("truetype"),url("/css/fonts/777252/df234d87-eada-4058-aa80-5871e7fbe1c3.svg#df234d87-eada-4058-aa80-5871e7fbe1c3") format("svg");
}
@font-face{
   font-family:"HelveticaNeueW10-56Ital";
   src:url("/css/fonts/777255/0b4619e6-628c-49d4-bf60-7554a2e70215.eot?#iefix");
   src:url("/css/fonts/777255/0b4619e6-628c-49d4-bf60-7554a2e70215.eot?#iefix") format("eot"),url("/css/fonts/777255/7f54a4ba-4c3c-4563-8afe-9768f10dfd12.woff") format("woff"),url("/css/fonts/777255/79c99d88-8763-4b02-804d-2b502ab14e59.ttf") format("truetype"),url("/css/fonts/777255/37fbb6f5-87b0-4f0e-b646-f0d19d1cf808.svg#37fbb6f5-87b0-4f0e-b646-f0d19d1cf808") format("svg");
}
@font-face{
   font-family:"HelveticaNeueW10-75Bold";
   src:url("/css/fonts/777276/41fb73ed-90c8-456d-838e-254f4dfda106.eot?#iefix");
   src:url("/css/fonts/777276/41fb73ed-90c8-456d-838e-254f4dfda106.eot?#iefix") format("eot"),url("/css/fonts/777276/d85949a1-c37a-43f7-9d09-fb056acf0c27.woff") format("woff"),url("/css/fonts/777276/5289fb0d-053f-4fac-9c67-2d02365d6d05.ttf") format("truetype"),url("/css/fonts/777276/1376b116-8954-4534-8045-eabe8e2fcaa4.svg#1376b116-8954-4534-8045-eabe8e2fcaa4") format("svg");
}

.regular {font-family:"HelveticaNeueW10-55Roma";}
.bold, strong {font-family:"HelveticaNeueW10-75Bold";}
.italic {font-family:"HelveticaNeueW10-56Ital";}
.light {font-family:"HelveticaNeueW10-45Ligh";}
.black {color: #010101;}

* {-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;}
html {width:100%; min-height: 100%}
body {min-height:100%; color:#010101; font-family: "HelveticaNeueW10-55Roma", Arial, Tahoma, sans-serif; overflow-y:scroll;}
#site-wrap {width: 100%; min-width: 320px; margin:0 auto;}
.site-wrap {width: 100%; max-width: 1154px; min-width: 320px; margin: 0 auto;}

#shade {position: absolute; left: 0; top:0; z-index: 90; width: 100%; height: 100%; background: transparent; background: rgba(255,255,255,0);}
#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;}
#debug div {padding-top: 10px;}

a{color:#000;
   -webkit-transition: color .5s;-moz-transition: color .5s;-ms-transition: color .5s;-o-transition: color .5s;transition: color .5s;}
a:hover{color:#f01e1e;
   -webkit-transition: color 0s;-moz-transition: color 0s;-ms-transition: color 0s;-o-transition: color 0s;transition: color 0s;}

a.white-button {display: inline-block; font-size: 14px; line-height: 18px; color: #9b9b9b; border: 1px solid #ccc; padding: 20px 0; font-family:"HelveticaNeueW10-75Bold";}
a.white-button:hover {color: #232323; border: 3px solid #f01e1e; padding: 18px 0; }

h1,.h1 {display: block; font-size: 30px; font-weight: normal;}
h2,.h2 {display: block; font-size: 25px; font-weight: normal;}
h3,.h3 {display: block; font-size: 20px; font-weight: normal;}

.grey-block {background: #f2f2f2; border-top: 1px solid #ccc;}
.white-block {background: #fff; border-top: 1px solid #ccc;}

.basic-text-page {padding: 40px 0;}

.basic-text {font-size: 16px; line-height: 22px;}
.basic-text p {padding-top: 10px;}
.basic-text p img {max-width: 100%; height: auto !important;}
.basic-text h2 {padding-top: 10px; color: #232323; font-size: 20px; line-height: 23px; font-family:"HelveticaNeueW10-75Bold";}
.basic-text h3 {padding-top: 10px; color: #232323; font-size: 16px; line-height: 22px; font-family:"HelveticaNeueW10-75Bold";}
.basic-text h4 {padding-top: 10px; color: #232323; font-size: 16px; line-height: 22px; font-family:"HelveticaNeueW10-75Bold";}
.basic-text h5 {padding-top: 10px; color: #232323; font-size: 16px; line-height: 22px; font-family:"HelveticaNeueW10-75Bold";}
.basic-text h6 {padding-top: 10px; color: #232323; font-size: 16px; line-height: 22px; font-family:"HelveticaNeueW10-75Bold";}
.basic-text ul, .basic-text ol {margin-left: 18px;}
.basic-text ul li {padding: 0 0 0 13px; list-style: none; background: url('/img/interface/li-bullet.png') 0 8px no-repeat; margin: 10px 0 0 0;}
.basic-text ol li {padding-top: 5px; list-style: decimal;}
.basic-text blockquote {padding: 10px 36px 23px; border: 1px solid #9b9b9b; margin: 18px 0 24px; color: #232323; font-family: "HelveticaNeueW10-75Bold";}
.basic-text blockquote strong {color: #f01e1e;}

.small-basic-text {font-size: 14px; line-height: 18px; color: #9b9b9b;}
.small-basic-text p {padding-top: 10px;}
.small-basic-text ul, .basic-text ol {padding-left: 15px;}
.small-basic-text ul li {padding-top: 5px; list-style: disc;}
.small-basic-text ol li {padding-top: 5px; list-style: decimal;}
.small-basic-text strong {color: #232323;}

.big-text {width: 680px; margin: 0 auto; font-size: 36px; line-height: 42px; text-align: center; padding: 15px 0 10px; color: #232323; font-family:"HelveticaNeueW10-45Ligh";}

.grey-text {color: #9b9b9b;}
.grey-text strong {color: #232323;}

.two-col-text {text-align: center;}
.two-col-text .text-col {display: inline-block; vertical-align: top; width: 400px; margin-right: 25px; text-align: left;}
.two-col-text .text-col:last-of-type {margin-right: 0;}

.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: #f01e1e; }
.basic-form .line .label label.error {color: #f01e1e;}
.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 #f01e1e;}

.fancy-select {display: inline-block; height: 40px; width: 100%; overflow: hidden;}
.fancy-select .fb-content {display: block; height: 38px; border: 1px solid #ccc;}
.fancy-select:hover .fb-content {border: 1px solid #000;}
.fancy-select .fb-content span {display: block; padding-left: 18px; font-size: 14px; line-height: 35px; color: #9b9b9b; padding-top: 2px; font-family: "HelveticaNeueW10-75Bold"}

.fancy-select-dropdown {position: absolute; left: 0; top: 0; z-index: 5; background: #fff; box-shadow: 0 3px 5px #aaa; border: 3px solid #f01e1e; padding: 9px 0 13px;}
.fancy-select-dropdown ul li {}
.fancy-select-dropdown ul li:last-child {border-bottom: none;}
.fancy-select-dropdown ul li.active a {color: #f01e1e; font-family: "HelveticaNeueW10-75Bold";}
.fancy-select-dropdown ul li a {display: block; padding: 0 25px 0 17px; font-size: 14px; line-height: 20px; text-decoration: none; color: #9b9b9b;}
.fancy-select-dropdown ul li:first-of-type {padding-bottom: 10px;}
.fancy-select-dropdown ul li:first-of-type a {color: #000; font-family: "HelveticaNeueW10-75Bold";}
.fancy-select-dropdown ul li:first-of-type a:hover {color: #000;}
.fancy-select-dropdown ul li a:hover {background: #fff; color: #f01e1e;}


#header {height: 60px; border-bottom: 1px solid #ccc;}
#header-logo {position: absolute; left: 0; top: 13px;}

#top-menu {position: absolute; left: 50%; top: 20px; margin-left: -215px;}
#top-menu.folded {height: auto;}
#top-menu li {float: left; padding-right: 12px; font-size: 14px; line-height: 18px; color: #f01e1e;}
#top-menu li span {display: block; color: #9b9b9b; text-decoration: none; padding-bottom: 22px;}
#top-menu li.hover a, #top-menu li a:hover {color: #f01e1e;}
#top-menu li.active span {color: #f01e1e;}

#header-langs {position: absolute; right: 0; top: 23px;}
#header-langs li {float: left; padding-left: 3px; font-size: 10px; color: #9b9b9b;}
#header-langs li a {color: #9b9b9b;}
#header-langs li.active {color: #000;}

.top-menu-dropdown {position: absolute; left: 0; top: 60px; width: 100%; height: 0; z-index: 1000; background: #fff;}
.top-menu-dropdown ul {padding: 13px 0 30px; text-align: center; border-top: 1px solid #ccc;}
.top-menu-dropdown ul li {font-size: 20px; line-height: 24px; color: #f01e1e;}
.top-menu-dropdown ul li a {color: #9b9b9b;}
.top-menu-dropdown ul li a:hover {color: #f01e1e;}
.top-menu-dropdown ul li, .top-menu-dropdown ul li strong {font-weight: normal; font-family: "HelveticaNeueW10-45Ligh";}
.top-menu-dropdown ul li.bold a {color: #f01e1e;}

#footer-social {text-align: center; padding: 30px 0;}
#footer-social li {display: inline-block; width: 40px; height: 40px; vertical-align: top; margin: 0 7px;}
#footer-social li img {width: 40px; height: 40px; background-position: 0 0;}
#footer-social li a:hover img {background-position: 0 -40px;}

#footer {padding: 20px 0;}

#footer-left {float: left; width: 50%; min-height: 240px;}
#cbi-footer-logo {position: absolute; left: 0; top: 1px;}
#footer-contacts {position: absolute; left: 126px; top: -13px;}

#footer-right {float: right; width: 50%; min-height: 240px;}
.footer-menu-col {float: left;}
.footer-menu-col .title {display: block; font-family:"HelveticaNeueW10-75Bold"; font-size: 14px; color: #232323;}
.footer-menu-col a:hover .title {color: #f01e1e;
   -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}

.footer-menu-col .footer-submenu {margin: 10px 0 36px;}
.footer-menu-col .footer-submenu li {font-size: 14px; line-height: 18px; color: #232323;  font-family:"HelveticaNeueW10-55Roma";}
.footer-menu-col .footer-submenu li a {color: #9b9b9b;}
.footer-menu-col .footer-submenu li a:hover {color: #f01e1e;
   -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}

#footer-menu-col-competence {width: 208px;}
#footer-menu-col-products {width: 162px;}
#footer-menu-col-integration {width: 180px;}


#footer-copyright {font-size: 12px; padding: 10px 0; color: #9b9b9b;}

#cases-filter {height: 76px; border-bottom: 1px solid #ccc;}

#cases-view-type {position: absolute; left: 0; top: 28px;}
#cases-view-type li {float: left; width: 20px; height: 20px; margin-right: 18px;}
#cases-view-type li a {display: block; width: 20px; height: 20px; background: url('/img/interface/sprites.png') 0 0 no-repeat;}
#cases-view-type li.active a {cursor: default;}
#cases-view-type li#cases-view-type-grid a {background-position: 0 0;}
#cases-view-type li#cases-view-type-grid.active a {background-position: -25px 0;}
#cases-view-type li#cases-view-type-list a {background-position: 0 -25px;}
#cases-view-type li#cases-view-type-list.active a {background-position: -25px -25px;}

#cases-filter-wrap {position: absolute; left: 50%; top: 18px; vertical-align: middle; width: 580px; margin-left: -290px;}
#cases-filter-wrap div.title {display: inline-block; margin: 0 15px 0 0; font-size: 14px; color: #232323; vertical-align: middle;}
#cases-filter-wrap div.filter {display: inline-block; width: 198px; margin-right: 15px; vertical-align: middle;}


.works-filters-button {display: inline-block; height: 40px; width: 100%; overflow: hidden;}
.works-filters-button .fb-content {display: block; height: 38px; border: 1px solid #ccc;}
.works-filters-button:hover .fb-content {border: 1px solid #000;}
.works-filters-button .fb-content span {display: block; padding-left: 18px; font-size: 14px; line-height: 35px; color: #9b9b9b; padding-top: 2px; font-family: "HelveticaNeueW10-75Bold"}

.works-filters-button.disabled .fb-content {background: #eee; cursor: default; border: 1px solid #ccc;}
.works-filters-button.disabled:hover .fb-content {background: #eee; cursor: default; border: 1px solid #ccc;}

.works-filters-dropdown {position: absolute; left: 0; top: 0; z-index: 150; background: #fff; box-shadow: 0 0 5px rgba(255,255,255,.7); border: 3px solid #f01e1e; padding: 9px 0 13px;}
.works-filters-dropdown ul li {}
.works-filters-dropdown ul li:last-child {border-bottom: none;}
.works-filters-dropdown ul li.active a {color: #f01e1e; font-family: "HelveticaNeueW10-75Bold";}
.works-filters-dropdown ul li a {display: block; padding: 0 25px 0 17px; font-size: 14px; line-height: 20px; text-decoration: none; color: #9b9b9b;}
.works-filters-dropdown ul li a:hover {background: #fff; color: #f01e1e;}


#cases-active-filters-wrap {padding: 18px 0; border-bottom: 1px solid #ccc;}
#cases-active-filters-title {float: left; margin-right: 11px; color: #232323; font-family:"HelveticaNeueW10-75Bold"; font-size: 14px; padding-top: 4px;}
#cases-active-filters {vertical-align: top;}
#cases-active-filters span.filter {display: inline-block; background: #f2f2f2; padding: 6px 7px 5px 10px; color: #232323; font-size: 12px; margin: 0 11px 11px 0; border-radius: 10px;  vertical-align: top;}
#cases-active-filters span.filter span.circle {display: inline-block; background: #f01e1e; width: 10px; height: 10px; border-radius: 10px; margin-left: 3px; vertical-align: middle;}
#cases-active-filters span.filter a:hover {color: #9b9b9b;}
#cases-active-filters span.filter a:hover span.circle {background: #9b9b9b url('/img/interface/work-filter-off.png') 0 0 no-repeat;}


.cases-grid {margin-top: 18px; width: 1160px;}
.cases-grid li {float: left; width: 270px; height: 250px; margin-right: 18px;}
.cases-grid li .image-placeholder {position: absolute; left: 0; top: 0; width: 270px; height: 166px; z-index: 0; background: #f2f2f2;}
.cases-grid li .image {position: absolute; left: 0; top: 0; width: 270px; height: 166px; z-index: 1;}
.cases-grid li .image-hover {position: absolute; left: 0; top: 0; width: 270px; height: 166px; z-index: 2; opacity: 0; background: rgba(0,0,0,.5)}
.cases-grid li a:hover .image-hover {opacity: 1;
   -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.cases-grid li .title {position: absolute; left: 0; top: 180px; font-size: 14px; line-height: 18px; color: #232323;}
.cases-grid li a:hover .title {color: #f01e1e;
   -webkit-transition: color .5s;-moz-transition: color .5s;-ms-transition: color .5s;-o-transition: color .5s;transition: color .5s;}
.cases-grid li .just-in-list {display: none;}

.cases-list {margin-top: 18px; width: 1160px;}
.cases-list li {width: 100%; height: 75px; margin-bottom: 18px;}
.cases-list li:hover  {background: #f2f2f2;
   -webkit-transition: background .5s;-moz-transition: background .5s;-ms-transition: background .5s;-o-transition: background .5s;transition: background .5s;}
.cases-list li .image-placeholder {position: absolute; left: 0; top: 0; width: 126px; height: 75px; z-index: 0; background: #f2f2f2;}
.cases-list li .image {position: absolute; left: 0; top: 0; width: 126px; height: 75px; z-index: 1;}
.cases-list li .image-hover {position: absolute; left: 0; top: 0; width: 126px; height: 75px; z-index: 2; opacity: 0; background: rgba(0,0,0,.5)}
.cases-list li a:hover .image-hover {opacity: 1;
   -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.cases-list li .title {position: absolute; left: 144px; top: 14px; font-size: 14px; line-height: 18px; color: #232323;}
.cases-list li a:hover .title {color: #f01e1e;
   -webkit-transition: color .5s;-moz-transition: color .5s;-ms-transition: color .5s;-o-transition: color .5s;transition: color .5s;}
.cases-list li .case-projects {position: absolute; left: 0; top: 14px; font-size: 14px; line-height: 18px; color: #232323;}
.cases-list li .case-projects a {color: #232323;}
.cases-list li .case-projects a:hover {color: #f01e1e;}

.cases-list li .title-width {display: block;}

#no-matching-cases { color: #9b9b9b; padding: 0 0 18px 0;}



#case-navigation {padding: 10px 0 12px; border-bottom: 1px solid #ccc; font-size: 14px; line-height: 18px;}
#case-navigation h1 {display: inline-block; font-size: 14px; line-height: 18px;}
#case-navigation a {color: #9b9b9b;}
#case-navigation a.case-title {color: #000;}
#case-navigation a:hover {color: #f01e1e;}
#case-navigation span {color: #f01e1e;}


.big-quote {border-bottom: 1px solid #ccc;}
.big-quote .quote-text {width: 680px; margin: 0 auto; font-size: 36px; line-height: 42px; text-align: center; padding: 31px 0 28px;}
.big-quote .quote-read-more {font-size: 14px; line-height: 14px; text-align: center; padding-bottom: 45px;}
.big-quote .quote-read-more a {color: #9b9b9b;}
.big-quote .quote-read-more a:hover {color: #f01e1e;}
.big-quote .quote-full-text {height: 0;}
.big-quote .quote-full-text-height-wrap {text-align: center;}
.big-quote .quote-full-text-height-wrap div {display: inline-block; vertical-align: top; width: 410px; margin-right: 25px; text-align: left; padding-bottom: 30px;}
.big-quote .quote-full-text-height-wrap div:last-of-type {margin-right: 0;}

.grid-gallery-preview {width:100%; height: 100%;}
.grid-gallery-preview .grid-gallery {width: 100%; height: 100%; z-index: 1;}
.grid-gallery-preview .grid-gallery li {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; text-align: center; background: #ffffff;}
.grid-gallery-preview .grid-gallery li img {max-width: 100%; max-height: 100%;position: relative;  top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

.grid-gallery-preview .grid-switches {position: absolute; left: 0; bottom: 18px; width: 100%; text-align: center; z-index: 100;}
.grid-gallery-preview .grid-switches li {display: inline-block; width: 10px; height: 10px; margin: 0 4px;}
.grid-gallery-preview .grid-switches li span {display: block; width: 10px; height: 10px; border-radius: 10px; background: #cccccc; cursor: pointer; opacity: .8;}
.grid-gallery-preview .grid-switches li.active span {background: #f01e1e; cursor: default; opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}


.grid-gallery-preview.competence-gallery {}
.grid-gallery-preview.competence-gallery li a {display: block; height: 344px; border: 3px solid transparent; background: #f2f2f2;}
.grid-gallery-preview.competence-gallery li a:hover {border: 3px solid #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.grid-gallery-preview.competence-gallery li .competence-title {display: block; font-size: 22px; line-height: 26px; padding: 10px 0 0 15px; color: #f01e1e; text-align: left;}
/*
.grid-gallery-preview.competence-gallery li .competence-image {display: block; width: 166px; height: 166px; margin: 40px auto 0;}
.grid-gallery-preview.competence-gallery li .competence-no-image {display: block; width: 166px; height: 166px; margin: 40px auto 0; background: #f01e1e; border-radius: 166px;}
*/
.grid-gallery-preview.competence-gallery li .competence-image {position: absolute; left: 50%; top: 89px; margin-left: -83px; display: block; width: 166px; height: 166px;}
.grid-gallery-preview.competence-gallery li .competence-no-image {position: absolute; left: 50%; top: 89px; margin-left: -83px; display: block; width: 166px; height: 166px; background: #f01e1e; border-radius: 166px;}

.grid-gallery-preview.competence-gallery li .competence-image img {width: 166px; height: 166px; background-position: 0 0; background-repeat: no-repeat;}
.grid-gallery-preview.competence-gallery li a:hover .competence-image img {background-position: 0 -170px;}

.grid-gallery-preview.competence-gallery-big {}
.grid-gallery-preview.competence-gallery-big li a {display: block; height: 344px; border: 3px solid transparent;  background: #f2f2f2;}
.grid-gallery-preview.competence-gallery-big li a:hover {border: 3px solid #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.grid-gallery-preview.competence-gallery-big li .competence-title {display: block; font-size: 36px; line-height: 36px; padding: 11px 15px 0 15px; color: #f01e1e; text-align: left;}
.grid-gallery-preview.competence-gallery-big li .competence-text {display: block; font-size: 28px; line-height: 32px; padding: 18px 15px 0 15px; color: #232323; text-align: left;}

.grid-gallery-button {position: absolute; z-index: 200; top: 50%; margin-top: -25px; width: 50px; height: 50px; background: url('/img/interface/sprites.png') no-repeat; opacity: .5;}
.grid-gallery-button:hover {opacity: 1; -webkit-transition: opacity .5s;-moz-transition: opacity .5s;-ms-transition: opacity .5s;-o-transition: opacity .5s;transition: opacity .5s;}
.grid-gallery-button-prev {left: 18px; background-position: 0 -80px;}
.grid-gallery-button-next {right: 18px; background-position: 0 -140px;}

#index-load-more {text-align: center; padding: 18px 0 36px;}
#index-load-more a {width: 270px;}

#products-slider { width: 1170px; margin: 0 auto; height: 350px;}
#products-slider .grid-switches {bottom: 16px}

.gallery-apple-text {position: absolute; left: 162px; top: 35px; width: 270px; height: 265px; background: url('/img/interface/cbi-apple.png') 0 0 no-repeat;}
.gallery-apple-text .text {text-align: center; font-size: 22px; line-height: 24px; position: relative; top: 50%; transform: translateY(-40%); -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%); padding: 0 10px;}
.gallery-apple-text .text div {padding-bottom: 7px;}

.product-type-title {display: block; background: #f2f2f2; font-size: 24px; line-height: 24px; color: #9b9b9b; text-align: center; padding: 15px 0 20px; margin-top: 10px;}

.products-wrap {text-align: center;}
.products-wrap .product-subtype {display: inline-block; margin: 17px 0 28px; vertical-align: top;}
.products-wrap .product-subtype .product-subtype-title {margin-bottom: 5px;}
.products-wrap .product-subtype:last-of-type {border-right: none;}
.products-wrap .product {display: inline-block; width: 90px; height: 85px; text-align: center; font-size: 12px; line-height: 14px; vertical-align: top; margin: 15px 9px 0;}
.products-wrap .product span {display: block; width: 42px; height: 42px; border: 2px solid #f01e1e; border-radius: 42px; margin: 0 auto 8px; background-position: -2px -1px;}
.products-wrap .product a {color: #9b9b9b;}
.products-wrap .product a:hover span {background-color: #f01e1e;  background-position: -2px -47px;}
.products-wrap-classic .product {margin: 15px 61px -8px;}
.products-wrap-boxed .product {margin: 15px 7px 0;}
.products-wrap-integration .product {margin: 15px 25px 4px;}

#products-bottom-text {padding-bottom: 57px;}


.subtype {}
.subtype .big-text {padding-top: 38px;}
.subtype .subtype-text {float: left; width: 486px; margin: 23px 0 0 53px;}
.subtype .subtype-text strong {font-size: 20px;}
.subtype .subtype-image {float: right; width: 486px; margin: 37px 53px 0 0;}
.subtype.odd .subtype-text {float: right; margin: 23px 53px 0 0;}
.subtype.odd .subtype-image {float: left; margin: 37px 0 0 53px;}

.subtype .subtype-products {border: 1px solid #ccc; margin: 21px 0 36px; }
.subtype .subtype-products .subtype-title {background: #f2f2f2; text-align: center; font-size: 24px; padding: 16px 0 20px;}
.subtype .subtype-products .products-wrap {background: #fff;}

.subtype .subtype-products .products-wrap.decision-to-start .product { margin: 15px 32px 0; }
.subtype .subtype-products .products-wrap.if-you-want-more .product { margin: 15px 32px 0; }
.subtype .subtype-products .products-wrap.strictly-by-specialty .product { margin: 15px -2px 0; }


.product-title {padding: 13px 0;}
.product-title span.circle {float: left; width: 68px; height: 67px; border: 3px solid #f01e1e; border-radius: 68px; margin-left: 288px; background-color: #f01e1e; background-position: 0 -92px;}
.product-title h1 {float: left; font-size: 48px; line-height: 50px; margin: 8px 0 0 20px;}

.post-title {padding: 13px 0; text-align: center;}
.post-title h1 {font-size: 48px; line-height: 50px; margin: 8px 0 0 20px;}


.product-title .competence-image {float: left; width: 68px; height: 68px; background-color: #f01e1e; border-radius: 68px; background-position: -3px -423px; margin-left: 288px;}

.announce-text {font-size: 23px; line-height: 28px; color: #232323; padding: 22px 0; border-bottom: 1px solid #ccc;  font-family:"HelveticaNeueW10-45Ligh"; margin-bottom: 14px;}


#product-left { float: left; width: 198px; margin: 19px 0;}
#product-right { float: left; width: 560px; margin: 18px 0 18px 90px;}
#product-right.without-left { margin-left: 288px;}


#product-gallery {width: 558px; height: 350px;}

.product-price-wrap {margin-left: -9px; width: 660px; font-family:"HelveticaNeueW10-45Ligh"}
.product-price {display: inline-block; width: 234px; margin: 18px 9px 0; background: #f2f2f2; font-size: 20px; color: #232323; padding: 18px;}
.product-price p {padding-top: 0;}

.left-submenu {}
.left-submenu li {font-size: 14px; line-height: 18px; color: #f01e1e;}
.left-submenu li a {color: #9b9b9b;}
.left-submenu li a:hover {color: #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.left-submenu li span {display: block; border-bottom: 1px solid #ccc; padding: 10px 0 12px;}


#clients-wrap {width: 100%; font-size: 14px; line-height: 16px; margin-bottom: 36px;}
#clients-wrap .clients-half-column {float: left; width: 50%; }
#clients-wrap .clients-column {float: left; width: 50%; }
#clients-wrap .clients-column .clients-block {padding-top: 25px;}
#clients-wrap .clients-column .clients-block .letter {}
#clients-wrap .clients-column .clients-block ul.clients {}
#clients-wrap .clients-column .clients-block ul.clients li {color: #9b9b9b;}


#team-grid {width: 1200px;}
#team-grid li {float: left; width: 270px; height: 418px; margin: 18px 18px 0 0;}
#team-grid li .portrait {width: 270px; height: 350px;}
#team-grid li .person-name {display: block; color: #232323; font-size: 14px; line-height: 18px; padding-top: 11px;}
#team-grid li .person-position {display: block; color: #9b9b9b; font-size: 14px; line-height: 18px;}
#team-grid li a:hover .person-name {color: #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#team-grid li a:hover .person-position {color: #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}

#team-grid li .person-quote-wrap {position: absolute; left: 0; top: 0; width: 270px; height: 350px; background: #f2f2f2; opacity: 0;}
#team-grid li a:hover .person-quote-wrap {opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#team-grid li .person-quote-wrap .text {display: block; padding: 18px; color: #232323; font-size: 20px; line-height: 24px;font-family: HelveticaNeueW10-55Roma;}
#team-grid li .quote-person {position: absolute; left: 18px; bottom: 18px;}
#team-grid li .quote-person img {float: left; width: 74px; height: 74px; border-radius: 74px;}
#team-grid li .quote-person .person-info {float: left; font-size: 12px; line-height: 15px; color: #232323; margin: 18px 0 0 18px; width: 120px;}


#person-wrap {margin: 18px 0 36px 145px;}
#person-wrap #person-portrait {float: left; width: 270px; height: 350px;}
#person-wrap #person-info {float: left; width: 380px; margin-left: 54px;}
#person-wrap #person-info .person-name {font-size: 24px; line-height: 24px; padding-top: 18px;}
#person-wrap #person-info .person-position {font-size: 18px; line-height: 24px;}
#person-wrap #person-info .text {font-size: 20px; line-height: 24px; padding-top: 24px;}
#person-wrap #person-info .person-email {padding-top: 65px;}
#person-wrap #person-info .person-email a {display: inline-block; font-size: 18px; color: #9b9b9b; padding: 8px 20px; border: 1px solid #ccc; border-radius: 18px;}
#person-wrap #person-info .person-email a:hover {color: #f01e1e; border: 1px solid #f01e1e;}
#person-wrap #person-info .person-facebook {padding: 22px 0 10px;}
#person-wrap #person-info .person-facebook a {display: block; width: 40px; height: 40px; background: url('/img/interface/sprites.png') 0 -200px no-repeat;}
#person-wrap #person-info .person-facebook a:hover {background-position: 0 -240px;}

.person-more-text-wrap {padding: 42px 0 59px;}


#competence-list-wrap {width: 1200px; margin-bottom: 36px;}
#competence-list {}
#competence-list li {float: left; width: 270px; margin: 18px 18px 0 0;}
#competence-list li a {display: block; height: 344px; border: 3px solid transparent; background: #f2f2f2;}
#competence-list li a:hover {border: 3px solid #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#competence-list li .competence-title {display: block; font-size: 22px; line-height: 26px; padding: 10px 0 0 15px; color: #f01e1e; text-align: left;}
#competence-list li .competence-image {position: absolute; left: 50%; top: 89px; margin-left: -83px; display: block; width: 166px; height: 166px;}
#competence-list li .competence-no-image {position: absolute; left: 50%; top: 89px; margin-left: -83px; display: block; width: 166px; height: 166px; background: #f01e1e; border-radius: 166px;}
#competence-list li .competence-image img {width: 166px; height: 166px; background-position: 0 0; background-repeat: no-repeat;}
#competence-list li a:hover .competence-image img {background-position: 0 -170px;}

#competence-list li.compact {float: left; width: 270px; height: 106px; margin: 18px 18px 0 0;}
#competence-list li.compact a {display: block; height: 100px; border: 3px solid transparent; background: #f2f2f2;}
#competence-list li.compact a:hover {border: 3px solid #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#competence-list li.compact .competence-title {display: block; font-size: 18px; line-height: 24px; font-weight: normal; font-family: "HelveticaNeueW10-55Roma"; width: 150px; color: #f01e1e; text-align: left; padding: 0; margin: 24px 18px 0 98px;}
#competence-list li.compact .competence-image {position: absolute; left: 10px; top: 16px; display: block; width: 74px; height: 74px; background: #fff; border-radius: 74px; margin: 0;}
#competence-list li.compact .competence-image img {width: 74px; height: 74px; background-position: 0 -340px; background-repeat: no-repeat;}
#competence-list li.compact a:hover .competence-image {background: #f01e1e;}
#competence-list li.compact a:hover .competence-image img {background-position: 0 -420px;}
#competence-list li.compact .competence-no-image {position: absolute; left: 10px; top: 16px; display: block; width: 74px; height: 74px; background: #fff; border-radius: 74px; margin: 0;}

/*558px*/
#competence-list li.with-text {float: left; width: 558px; height: 350px; margin: 18px 18px 0 0;}
#competence-list li.with-text a {display: block; height: 344px; border: 3px solid transparent; background: #f2f2f2;}
#competence-list li.with-text a:hover {border: 3px solid #f01e1e; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
#competence-list li.with-text .competence-title {display: block; font-size: 36px; line-height: 36px; padding: 11px 15px 0 15px; color: #f01e1e; text-align: left;}
#competence-list li.with-text .competence-text {display: block; font-size: 28px; line-height: 32px; padding: 18px 15px 0 15px; color: #232323; text-align: left;}

#competence-list li.quote {background: #f2f2f2;  width: 270px; height: 350px;}

#competence-list li.quote .quote-text {padding: 18px; font-size: 20px; line-height: 24px; font-family: HelveticaNeueW10-55Roma;}
#competence-list li.quote .quote-person {position: absolute; left: 18px; bottom: 18px;}
#competence-list li.quote  .quote-person img {float: left; width: 74px; height: 74px; border-radius: 74px;}
#competence-list li.quote  .quote-person .person-info {float: left; font-size: 12px; line-height: 15px; color: #232323; margin: 18px 0 0 18px; width: 120px;}


#contacts-page {margin: 18px 0;}
#contacts-page #map-canvas {float: left; width: 846px; height: 536px; background: #f2f2f2;}
#contacts-page #contacts-text {float: right; width: 270px; margin-left: 18px;}


.blog-posts-wrap {margin-top: 18px; width: 1152px;}

.blog-post-in-grid-image {float: left; width: 558px; height: 350px; margin: 0 18px 18px 0;}
.blog-post-in-grid-image .padding {display: block; padding: 18px;}
.blog-post-in-grid-image a {position: absolute; left: 0; top: 0; display: block; width: 552px; height: 344px; border: 3px solid transparent; background: rgba(255,255,255,0);}
.blog-post-in-grid-image a:hover {display: block; width: 552px; height: 344px; background: rgba(255,255,255,.85); -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.blog-post-in-grid-image-img {}
.blog-post-in-grid-image .date {display: block; opacity: 0; color: #232323; font-size: 12px; padding-bottom: 3px;}
.blog-post-in-grid-image .post-in-grid-title {display: block; opacity: 0; color: #f01e1e;}
.blog-post-in-grid-image .post-text {display: block; opacity: 0;}
.blog-post-in-grid-image a:hover .date {opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.blog-post-in-grid-image a:hover .post-in-grid-title {opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.blog-post-in-grid-image a:hover .post-text {opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}


.blog-post-in-grid-small-image {float: left; width: 270px; height: 350px; margin: 0 18px 18px 0;}
.blog-post-in-grid-small-image .padding {display: block; padding: 18px;}
.blog-post-in-grid-small-image a {position: absolute; left: 0; top: 0; display: block; width: 270px; height: 344px; border: 3px solid transparent; background: rgba(255,255,255,0);}
.blog-post-in-grid-small-image a:hover {display: block; width: 270px; height: 344px; background: rgba(255,255,255,.85); -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.blog-post-in-grid-small-image .date {display: block; opacity: 0; color: #232323; font-size: 12px; padding-bottom: 3px;}
.blog-post-in-grid-small-image .post-in-grid-title {display: block; opacity: 0; color: #f01e1e;}
.blog-post-in-grid-small-image .post-text {display: block; opacity: 0;}
.blog-post-in-grid-small-image a:hover .date {opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.blog-post-in-grid-small-image a:hover .post-in-grid-title {opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.blog-post-in-grid-small-image a:hover .post-text {opacity: 1; -webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s;}

.blog-post-in-grid-quote {float: left; width: 270px; height: 350px; background: #f2f2f2; margin: 0 18px 18px 0;}
.blog-post-in-grid-quote a {display: block;  width: 270px; height: 350px;}
.blog-post-in-grid-quote .date {display: block; padding: 18px 18px 3px; color: #232323; font-size: 12px;}
.blog-post-in-grid-quote .text {display: block; padding: 0 18px; font-size: 20px; line-height: 24px;font-family: HelveticaNeueW10-55Roma;}
.blog-post-in-grid-quote .quote-person {position: absolute; left: 18px; bottom: 18px;}
.blog-post-in-grid-quote .quote-person img {float: left; width: 74px; height: 74px; border-radius: 74px;}
.blog-post-in-grid-quote .quote-person .person-info {float: left; font-size: 12px; line-height: 15px; color: #232323; margin: 18px 0 0 18px; width: 120px;}


.blog-post-in-grid-text {float: left; width: 270px; height: 350px; background: #fff; margin: 0 18px 18px 0;}
.blog-post-in-grid-text a {display: block; width: 264px; height: 344px; border: 3px solid transparent;}
.blog-post-in-grid-text a:hover {border: 3px solid #f01e1e;}
.blog-post-in-grid-text .date {display: block; padding: 18px 18px 3px; color: #232323; font-size: 12px;}
.blog-post-in-grid-text .title {display: block; padding: 0 18px 0; font-size: 20px; line-height: 24px; font-family: HelveticaNeueW10-75Bold;}
.blog-post-in-grid-text .small-basic-text {display: block; padding: 0 18px;}



.error-404-left {float: left; width: 541px; margin: 41px 18px;}
.error-404-left-number {display: block; font-size: 240px; text-align: center; color: #232323;}
.error-404-left-error {display: block; font-size: 33px; text-align: center; color: #232323; margin-top: -20px;}

.error-404-right {float: left; width: 541px; margin: 68px 0;}
.error-404-h1 {font-size: 36px; color: #f01e1e;}
.error-404-right-text { font-size: 28px; line-height: 32px; color: #9b9b9b; padding-top: 18px;}

.ny-iframe {
   position: relative;
   width: 100%;
   padding-bottom: 62%;
}

.ny-iframe iframe {
   position: absolute;
   width: 100%;
   height: 100%;
}

.fold-wrap {
   padding-top: 10px;
}

.fold,
.fold + label ~ div.fold-text {
   display: none;
}
.fold + label {
   position: relative;
   margin: 0;
   padding: 0;
   cursor: pointer;
   color: #010101;
}
.fold + label::after {
   display: inline-block;
   content: '+';
   vertical-align: middle;
   width: 11px;
   height: 11px;
   font-size: 10px;
   line-height: 10px;
   text-align: center;
   border: 1px solid #999;
   color: #999;
   margin-left: 6px;
}
.fold + label:hover::after {
   border: 1px solid #000;
   color: #000;
}
.fold:checked + label {
   color: #f01e1e;
}
.fold:checked + label::after {
   content: '-';
   border: 1px solid #f01e1e;
   color: #f01e1e;
}
.fold:checked + label ~ div.fold-text {
   display: block;
   padding: 0 0 10px 0;
}

@media screen and (max-width: 1200px)
{
   .site-wrap {width: 98%;}

   .cases-grid {margin-top: 18px; width: 100%; text-align: center;}
   .cases-grid li {float: none; display: inline-block; width: 270px; height: 250px; margin: 0 9px; vertical-align: top;}

   #team-grid {width: 100%; text-align: center;}
   #team-grid li {float: none; display: inline-block; width: 270px; height: 418px; margin: 18px 9px 0;}

   #person-wrap {width: 710px; margin: 18px auto 36px ;}

   #competence-list-wrap {width: 100%;}

   #competence-list li {float: left; width: 23%; height: 350px; margin: 18px 2% 0 0;}
   #competence-list li.quote {width: 22%; height: 350px;}
   #competence-list li.quote .quote-text {font-size: 14px; line-height: 18px;}
   #competence-list li.quote .quote-person {width: 80%;}
   #competence-list li.quote .quote-person img {width: 60px; height: 60px; border-radius: 74px;}
   #competence-list li.quote .quote-person .person-info {float: none; width: auto; margin: 10px 0 0 70px;}

   #competence-list li.with-text {float: left; width: 47%; height: 350px; margin: 18px 2% 0 0;}
   #competence-list li.with-text .competence-title {font-size: 28px; line-height: 28px;}
   #competence-list li.with-text .competence-text {font-size: 22px; line-height: 24px;}

   #competence-list li.compact {float: left; width: 30.7%; height: 106px; margin: 18px 2% 0 0;}


   .blog-posts-wrap {width: 100%;}

   .blog-post-in-grid-image {width: 47%; height: 350px; margin: 18px 2% 0 0; background-size: 100% auto; background-repeat: no-repeat;}
   .blog-post-in-grid-image a {display: block; width: 100%; height: 100%;}
   .blog-post-in-grid-image a:hover {display: block; width: 100%; height: 100%;}

   .blog-post-in-grid-small-image {width: 23%; height: 350px; margin: 18px 2% 0 0; background-size: 100% auto; background-repeat: no-repeat;}
   .blog-post-in-grid-small-image a {display: block; width: 100%; height: 100%;}
   .blog-post-in-grid-small-image a:hover {display: block; width: 100%; height: 100%;}

   .blog-post-in-grid-quote {width: 23%; height: 350px; margin: 18px 2% 0 0;}
   .blog-post-in-grid-quote a {width: 100%; height: 100%;}
   .blog-post-in-grid-quote a:hover {width: 100%; height: 100%;}
   .blog-post-in-grid-quote .text {font-size: 14px; line-height: 18px;}
   .blog-post-in-grid-quote .quote-person {width: 90%;}
   .blog-post-in-grid-quote .quote-person img {width: 60px; height: 60px; border-radius: 74px;}
   .blog-post-in-grid-quote .quote-person .person-info {float: none; display: block; width: auto; margin: 10px 0 0 70px;}

   .blog-post-in-grid-text {width: 23%; height: 350px; margin: 18px 2% 0 0;}
   .blog-post-in-grid-text a {display: block; width: 100%; height: 100%; border: none;}
   .blog-post-in-grid-text a:hover {border: none;}


   #product-left {float: none; width: 100%; border-bottom: 1px solid #ccc; margin-top: 0;}
   .left-submenu {width: 100%; text-align: center; padding: 12px 0;}
   .left-submenu li {display: inline-block; vertical-align: top; padding: 0 9px;}
   .left-submenu li span {display: block; border-bottom: none; padding: 0;}

   #case-navigation {text-align: center;}
   #case-navigation h1 {display: block;}
   #case-navigation .case-title {display: block;}


   #product-right {float: none; width: 560px; margin: 0 auto 18px;}
   #product-right.without-left { margin-left: auto;}

   .product-title {width: 560px; margin: 0 auto; text-align: center;}
   .product-title span.circle {float: none; display: block; margin: 0 auto;}
   .product-title h1 {float: none; font-size: 48px; line-height: 50px; margin: 8px 0 0 20px;}

   .product-title .competence-image {float: none; display: block; margin: 0 auto;}


   .subtype .subtype-text {float: left; width: 45%; margin: 23px 2% 0 3%;}
   .subtype .subtype-image {float: right; width: 47%;margin: 37px 3% 0 0;}
   .subtype .subtype-image img {max-width: 100%;}
   .subtype.odd .subtype-text {float: right; width: 47%; margin: 37px 0 0 3%;}
   .subtype.odd .subtype-image {float: left; width: 45%; margin: 23px 3% 0 2%;}

   #products-slider { width: 100%; margin: 0 auto; height: 350px; background: #f2f2f2;}
   #products-slider .grid-gallery li {background: #f2f2f2;}
   #products-slider li img {height: 100%; width: auto; max-width: none;}
   .gallery-apple-text {position: absolute; left: 50%; top: 35px; width: 270px; height: 265px; margin-left: -135px;}


   #contacts-page #map-canvas {float: left; width: 75%; height: 536px;}
   #contacts-page #contacts-text {float: right; width: 23%; margin-left: 2%;}

}


@media screen and (max-width: 980px)
{
   .two-col-text .text-col {display: inline-block; width: 39%; margin: 0 5%;}
   .two-col-text .text-col:last-of-type {margin-right: 5%;}

   .big-quote .quote-full-text-height-wrap div {display: inline-block; width: 39%; margin: 0 5%;}
   .big-quote .quote-full-text-height-wrap div:last-of-type {margin-right: 5%;}

   #competence-list li {float: left; width: 48%; height: 350px; margin: 18px 2% 0 0;}
   #competence-list li.quote {width: 48%; height: 350px; margin: 18px 2% 0 0;}
   #competence-list li.quote .quote-text {font-size: 18px; line-height: 20px;}
   #competence-list li.with-text {float: left; width: 48%; height: 350px; margin: 18px 2% 0 0;}
   #competence-list li.with-text .competence-text {font-size: 18px; line-height: 20px;}
   #competence-list li.compact {float: left; width: 48%; height: 106px; margin: 18px 2% 0 0;}


   .blog-post-in-grid-image {width: 48%; height: 350px; margin: 18px 2% 0 0;}
   .blog-post-in-grid-small-image {width: 48%; height: 350px; margin: 18px 2% 0 0;}
   .blog-post-in-grid-quote {width: 48%; height: 350px; margin: 18px 2% 0 0;}
   .blog-post-in-grid-quote .text {font-size: 18px; line-height: 20px;}
   .blog-post-in-grid-text {width: 48%; height: 350px; margin: 18px 2% 0 0;}

}

@media screen and (max-width: 800px)
{
   #cases-filter {height: 180px;}

   #cases-view-type {position: absolute; left: 50%; top: 18px; width: 80px; margin-left: -40px;}

   #cases-filter-wrap {position: absolute; left: 50%; top: 54px; vertical-align: middle; width: 200px; margin-left: -100px; text-align: center;}
   #cases-filter-wrap div.title {display: block; margin: 0 0 5px 0;}
   #cases-filter-wrap div.filter {display: block; margin-right: 0; text-align: left;}

   .footer-menu-col {float: none; margin-bottom: 5px;}
   .footer-submenu {display: none;}

   #clients-wrap .clients-column {float: none; width: 90%; margin-left: 10%;}

   .big-text {width: 90%; margin: 0 auto; font-size: 32px; line-height: 36px;}
   .big-quote .quote-text {width: 90%; margin: 0 auto; font-size: 32px; line-height: 36px;}

   #person-wrap {width: 90%; margin: 18px auto 36px ;}
   #person-wrap #person-portrait {float: left; width: 270px; height: 350px;}
   #person-wrap #person-info {float: none; width: auto; margin-left: 324px;}

   #product-right {width: 90%;}
   .product-title {width: 90%;}
   .product-title h1 {font-size: 32px; line-height: 34px;}

   .post-title h1 {font-size: 32px; line-height: 34px;}

   #contacts-page #map-canvas {float: none; display: block; width: 100%; height: 536px;}
   #contacts-page #contacts-text {float: none; display: block; width: 100%; margin: 0 0 18px; text-align: center;}

}


@media screen and (max-width: 640px)
{
   #header { height: auto;}
   #header .site-wrap {overflow: hidden;}
   #top-menu-icon {display: block; position: absolute; right: 50%; top: 18px; margin-right: -14px; width: 28px; height: 28px; background: url('/img/interface/menu-icon.png') center no-repeat;}
   #top-menu {position: relative; display: block; left: 0; top: 0; margin: 60px 0 0; width: 100%; height: auto;}
   #top-menu.folded {height: 0;}
   #top-menu li {float: none; width: 100%; text-align: center;}
   #top-menu li span {padding: 11px 0;}
   #footer-right {display: none;}

   #clients-wrap .clients-half-column {float: none; width: 100%; text-align: center;}

   .big-text {font-size: 24px; line-height: 25px;}
   .big-quote .quote-text {font-size: 24px; line-height: 25px;}

   .two-col-text .text-col {display: block; width: 80%; margin: 0 auto 18px;}
   .two-col-text .text-col:last-of-type {margin-right: auto;}

   .big-quote .quote-full-text-height-wrap div {display: block; width: 80%; margin: 0 auto 18px; padding-bottom: 0;}
   .big-quote .quote-full-text-height-wrap div:last-of-type {margin-right: auto;}


   #person-wrap {width: 90%; margin: 18px auto 36px ;}
   #person-wrap #person-portrait {float: none; margin: 0 auto;}
   #person-wrap #person-info {float: none; margin: 0;}

   #competence-list li {float: none; width: 100%; margin: 18px 0 0 0;}
   #competence-list li.quote {float: none; width: 100%; margin: 18px 0 0 0;}
   #competence-list li.with-text {float: none; width: 100%; margin: 18px 0 0 0;}
   #competence-list li.with-text .competence-text {font-size: 18px; line-height: 20px;}
   #competence-list li.compact {float: none; width: 100%; margin: 18px 0 0 0;}

   .blog-post-in-grid-image {float: none; width: 100%; height: auto; margin: 18px 0 0 0;}
   .blog-post-in-grid-image-img {width: 100%;}
   .blog-post-in-grid-small-image {float: none; width: 100%; height: auto; margin: 18px 0 0 0;}
   .blog-post-in-grid-quote {float: none; width: 100%; margin: 18px 0 0 0;}
   .blog-post-in-grid-text {float: none; width: 100%; margin: 18px 0 0 0; height: auto;}

   .subtype .subtype-text {float: none; width: 90%; margin: 23px auto;}
   .subtype .subtype-text strong {display: block; text-align: center;}
   .subtype .subtype-image {float: none; width: 90%; margin: 23px auto; text-align: center;}
   .subtype.odd .subtype-text {float: none; width: 90%; margin: 23px auto;}
   .subtype.odd .subtype-image {float: none; width: 90%; margin: 23px auto;}

   #contacts-page #map-canvas {height: 336px;}


   .grid-gallery-button {position: absolute; z-index: 200; top: 50%; margin-top: -15px; width: 30px; height: 30px; background: url('/img/interface/sprites.png') no-repeat; opacity: .5;}
   .grid-gallery-button-prev {left: 18px; background-position: 0 -320px;}
   .grid-gallery-button-next {right: 18px; background-position: 0 -360px;}


   .grid-gallery-preview.competence-gallery-big li .competence-title {font-size: 24px; line-height: 25px;}
   .grid-gallery-preview.competence-gallery-big li .competence-text {font-size: 18px; line-height: 20px;}


   .product-price-wrap {margin-left: 0; width: 100%;}
   .product-price {display: block; width: auto; margin: 18px 0 0; background: #f2f2f2; font-size: 20px; color: #232323; padding: 18px;}
   .product-price p {padding-top: 0;}
}

@media  screen and (max-width: 360px)
{
   #header-logo {left: 8px;}
   #top-menu-icon {right: 8px; margin-right: 0;}


   .grid-gallery-button {display: none;}

}