/* MAIN CSS */ article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: arial, tahoma, verdana, sans-serif;} a { text-decoration: none;cursor: pointer; } a img {border: none;} a:hover, a:active, a:focus { outline: 0;} abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } p{margin: 3px 0px;} q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } ul, ol { margin: 1em 0; padding: 0 0 0 40px; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } label { cursor: pointer; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:valid, textarea:valid { } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; } td { vertical-align: top; } /* SWIPER CSS */ .swiper-slide,.swiper-wrapper{width:100%;height:100%;position:relative} .swiper-container{margin:0 auto;position:relative;overflow:hidden;z-index:1} .swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column} .swiper-wrapper{z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box} .swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate(0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap} .swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto} .swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0} .swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto} .swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height} .swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000} .swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y} .swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x} .swiper-button-next,.swiper-button-prev{position:absolute;bottom:0;width:11px;height:25px;z-index:10;cursor:pointer;-moz-background-size:11px 25px;-webkit-background-size:11px 25px;background-size:11px 25px;background-position:center;background-repeat:no-repeat} .swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none;display:none} .swiper-button-prev,.swiper-container-rtl .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffa800'%2F%3E%3C%2Fsvg%3E");left:0;right:auto} .swiper-button-prev.swiper-button-black,.swiper-container-rtl .swiper-button-next.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")} .swiper-button-prev.swiper-button-white,.swiper-container-rtl .swiper-button-next.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")} .swiper-button-next,.swiper-container-rtl .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffa800'%2F%3E%3C%2Fsvg%3E");right:auto;left:825px} .swiper-button-next.swiper-button-black,.swiper-container-rtl .swiper-button-prev.swiper-button-black{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E")} .swiper-button-next.swiper-button-white,.swiper-container-rtl .swiper-button-prev.swiper-button-white{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E")} .swiper-pagination{position:absolute;text-align:center;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10} .swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2} button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none} .swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer} .swiper-pagination-white .swiper-pagination-bullet{background:#fff} .swiper-pagination-bullet-active{opacity:1;background:#007aff} .swiper-pagination-white .swiper-pagination-bullet-active{background:#fff} .swiper-pagination-black .swiper-pagination-bullet-active{background:#000} .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px} .swiper-pagination-progress{background:rgba(0,0,0,.25);position:absolute} .swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top} .swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0} .swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,.5)} .swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff} .swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000} .swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out} .swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity} .swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none} .swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto} .swiper-scrollbar{position:relative;-ms-touch-action:none;background:rgba(255,255,255,.3)} .swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:0;bottom:40px;z-index:50;height:2px;width:836px} .swiper-scrollbar-drag {height: 100%;width: 100%;position: relative;background: #fea939;left: 0;top: 0;} /* COMMON STYLES ----------------------------------------------------*/ * {vertical-align: baseline;font-family: arial, tahoma, sans-serif;-webkit-font-smoothing: antialiased;margin: 0;padding: 0;} html {height: 100%;} body {margin: 0;padding: 0;width: 100%;min-width: 1200px;min-height: 100%;background: #fff;} body:not(.hide) * {visibility: visible;} img {border: none;} label {cursor: default;} #body_mask {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 2000;background: rgba(0,0,0,.7);} .content {height: 100%;width: 1200px;margin: 0 auto;position: relative;z-index: 2;clear: both;} .ease {-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;-ms-transition: all .2s ease;transition: all .2s ease;} .ease2 {-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;} .ease3 {-webkit-transition: all .7s ease;-moz-transition: all .7s ease;-o-transition: all .7s ease;-ms-transition: all .7s ease;transition: all .7s ease;} .ease4 {-webkit-transition: all 1.2s ease;-moz-transition: all 1.2s ease;-o-transition: all 1.2s ease;-ms-transition: all 1.2s ease;transition: all 1.2s ease;} .ease4_2 {-webkit-transition: all 2.4s ease;-moz-transition: all 2.4s ease;-o-transition: all 2.4s ease;-ms-transition: all 2.4s ease;transition: all 2.4s ease;} .ease5s {-webkit-transition: all 5s linear;-moz-transition: all 5s linear;-o-transition: all 5s linear;-ms-transition: all 5s linear;transition: all 5s linear;} .ease_start {-webkit-transition: all 3.5s linear;-moz-transition: all 3.5s linear;-o-transition: all 3.5s linear;-ms-transition: all 3.5s linear;transition: all 3.5s linear;} .clear:after {width: 100%;height: 0px;display: block;content: "";clear: both;visibility: hidden;} /* HEADER BLOCK ----------------------------------------------------*/ header {width: 100%;height: 65px;position: fixed;z-index: 1000;top: 0;left: 0;background: #181a1b;} .tLogo {width: 115px;height: 38px;position: absolute;top: 50%;left: 0;margin-top: -19px;background: url('../images/svg/logo.svg') 0 0 no-repeat;background-size: contain;} .tLogo:hover {opacity: .8;} .tMenu {width: 47px;height: 100%;position: absolute;top: 0;right: -10px;cursor: pointer;} .tMenu span {width: 27px;height: 2px;display: block;position: absolute;left: 10px;background: #ffa800;} .tMenu span:nth-child(1) {top: 23px;} .tMenu span:nth-child(2), .tMenu span:nth-child(3) {top: 31px;} .tMenu span:nth-child(4) {top: 39px;} .tMenu:not(.open):hover span:nth-child(1) {top: 21px;} .tMenu:not(.open):hover span:nth-child(4) {top: 41px;} .tMenu.open span:nth-child(1), .tMenu.open span:nth-child(4) {width: 2px;top: 31px;left: 50%;margin-left: -1px;} .tMenu.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);} .tMenu.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);} .tSocials {height: 100%;position: absolute;top: 0;right: 74px;} .tSocials a {width: 34px;height: 34px;display: block;float: right;margin: 15px 0 0;} .tSocials a span {width: 22px;height: 22px;display: block;margin: 6px;} .tSocials a span svg path {color: #626262;fill: currentColor;} .tSocials a:hover span svg path {color: #ffa800;fill: currentColor;} .tLangs {height: 100%;position: absolute;top: 0;right: 185px;} .tLangs a, .tLangs span {height: 22px;float: right;display: block;margin-top: 20px;padding: 0 6px;font: 900 14px/22px Roboto;color: #676767;text-transform: uppercase;} .tLangs span {cursor: default;} .tLangs a.current, .tLangs span.current, .tLangs a:hover {color: #ffa800;} .dk_arrow {height: 100%;position: absolute;left: 0;top: 0;} .dk_arrow.top {-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);transform: rotate(-90deg);} .dk_arrow path {fill: currentColor;} /* Navigation */ .site_navigation {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: -1;opacity: 0;background: rgba(24,26,27,.95);} .site_navigation .navigation_wrap {width: 600px;position: relative;left: 50%;top: 90px;margin-left: -300px;float: left;} .site_navigation .n_logo {width: 220px;height: 70px;position: absolute;top: 50%;left: 0;margin-top: -35px;background: url('../images/svg/logo.svg') 0 0 no-repeat;background-size: contain;} .site_navigation .navigation {width: 220px;float: right;position: relative;} .site_navigation .navigation:after {width: 2px;height: 0;position: absolute;top: 0;left: -80px;background: #ffa800;content: "";-webkit-transition: all 1.7s linear;-moz-transition: all 1.7s linear;-o-transition: all 1.7s linear;-ms-transition: all 1.7s linear;transition: all 1.7s linear;} .site_navigation .navigation .nav_item {display: block;float: left;clear: both;cursor: pointer;font: 400 18px Roboto;color: #707070;} .site_navigation .navigation .nav_item_wrp {position: relative;top: -25px;opacity: 0;margin: 0 0 17px;float: left;clear: both;} .site_navigation .navigation .nav_item_wrp:nth-of-type(1) {top: 0;} .site_navigation .navigation .nav_item_wrp:last-child {margin-bottom: 0;} .site_navigation .navigation a.current, .site_navigation .navigation .nav_item:hover {color: #ffa800;} body.show_navigation .site_navigation {z-index: 999;opacity: 1;} body.show_navigation .site_navigation:not(.hide) .navigation:after {height: 100%;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(1) {opacity: 1;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(2) {top: 0;opacity: 1;-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(3) {top: 0;opacity: 1;-webkit-transition-delay: .9s;-moz-transition-delay: .9s;transition-delay: .9s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(4) {top: 0;opacity: 1;-webkit-transition-delay: 1.1s;-moz-transition-delay: 1.1s;transition-delay: 1.1s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(5) {top: 0;opacity: 1;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(6) {top: 0;opacity: 1;-webkit-transition-delay: 1.5s;-moz-transition-delay: 1.5s;transition-delay: 1.5s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(7) {top: 0;opacity: 1;-webkit-transition-delay: 1.7s;-moz-transition-delay: 1.7s;transition-delay: 1.7s;} body.show_navigation .site_navigation:not(.hide) .navigation .nav_item_wrp:nth-of-type(8) {top: 0;opacity: 1;-webkit-transition-delay: 1.9s;-moz-transition-delay: 1.9s;transition-delay: 1.9s;} .site_navigation.hide {opacity: 0 !important;} .site_navigation.hide .navigation:after {height: 0 !important;-webkit-transition-delay: 0s !important;-moz-transition-delay: 0s !important;transition-delay: 0s !important;-webkit-transition: all 0s linear !important;-moz-transition: all 0s linear !important;-o-transition: all 0s linear !important;-ms-transition: all 0s linear !important;transition: all 0s linear !important;} .site_navigation.hide .navigation .nav_item_wrp {-webkit-transition-delay: 0s !important;-moz-transition-delay: 0s !important;transition-delay: 0s !important;-webkit-transition: all 0s ease !important;-moz-transition: all 0s ease !important;-o-transition: all 0s ease !important;-ms-transition: all 0s ease !important;transition: all 0s ease !important;} /* MAIN CONTENT BLOCK ----------------------------------------------------*/ .main_content_block {width: 100%;position: relative;z-index: 1;} .viewbox {width: 100%;position: relative;clear: both;background: #fff;overflow: hidden;} .viewbox[data-view="1"] {min-height: 760px;} .viewbox[data-view="2"] {height: 940px;background: #f1f0f0;} .viewbox[data-view="3"] {/*height: 320px;*/height: 60px;} .viewbox[data-view="3"] > * {display: none;} .viewbox[data-view="4"] {min-height: 950px;background: #191a1b;} .viewbox h1 {width: 100%;height: 90px;margin: 120px 0 0;text-transform: uppercase;position: relative;} .viewbox h1.hide {opacity: 0;} .viewbox h1 > span:nth-child(1) {height: 90px;font: 900 40px/90px Roboto;color: #676767;display: block;float: left;} .viewbox h1 > span:nth-child(2) {height: 90px;margin: 0 0 0 30px;position: relative;font: 900 80px/90px Roboto;color: #f0f1f4;display: block;float: left;} .viewbox h1 > span:nth-child(2):before {width: 0;height: 4px;position: absolute;top: 50%;left: -14px;background: #ffa800;margin-top: -2px;content: '';-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;} .viewbox h1.anim > span:nth-child(2):before {width: calc(100% - 10px);} body.needStart .viewbox h1.anim > span:nth-child(2):before {width: 0;} body.needStart .viewbox h1 {top: -60px;opacity: 0;} body.needStart.startView .viewbox h1 {top: 0;opacity: 1;} body.needStart.startView .viewbox h1.hide {opacity: 0;} body.needStart.startView .viewbox h1.anim > span:nth-child(2):before {width: calc(100% - 10px);} .p_content {width: calc(100% - 355px);padding: 0 0 0 355px;position: absolute;top: 110px;left: 0;z-index: 10;} .dArrow {width: 78px;height: 78px;position: absolute;top: 130px;left: 145px;} .dArrow svg path {fill: none;stroke: #f0f1f4;stroke-dasharray: 240px;stroke-dashoffset: -240px;} .p_content.hide {opacity: 0;z-index: 1;} .about_description {position: relative;opacity: 1;} .p_content p {display: block;margin: 0;padding: 0;margin: 20px 0 0;font: 700 20px/120% Roboto;color: #fafafa;background: #fafafa;} body.needStart.startView .p_content p {color: #676767;background: #fff;-webkit-transition-delay: .4s;-moz-transition-delay: .4s;transition-delay: .4s;} .skills_box {width: 100%;clear: both;margin: 55px 0;position: relative;} .skills_box label {display: block;font: 900 60px Roboto;color: #e1e2e7;text-transform: uppercase;opacity: .3;} body.needStart.startView .skills_box label {opacity: 1;-webkit-transition-delay: .8s;-moz-transition-delay: .8s;transition-delay: .8s;} .skills_list {width: 100%;height: 135px;clear: both;margin: 50px 0 0;position: relative;} .skill_item {width: 170px;height: 135px;float: left;margin: 0 61px 0 0;position: relative;left: 40px;opacity: 0;} .skill_item:last-child {margin-right: 0;} .skill_item .s_title {width: 60%;display: block;font: 700 20px/110% Roboto;color: #ffa800;position: relative;z-index: 2;} .skill_item .s_percentage {display: block;font: 900 50px Roboto;color: #f0f1f4;text-align: right;position: absolute;top: -30px;right: 0;z-index: 1;} .skill_item .s_icon {width: 74px;height: 74px;position: absolute;bottom: 0;left: 0;background-size: contain;background-position: left top;background-repeat: no-repeat;} .skill_item:nth-child(1) {width: 180px;} .skill_item:nth-child(2) {width: 175px;} .skill_item:nth-child(3), .skill_item:nth-child(4) {width: 150px;} body.needStart.startView .skill_item:nth-of-type(1) {left: 0;opacity: 1;-webkit-transition-delay: .8s;-moz-transition-delay: .8s;transition-delay: .8s;} body.needStart.startView .skill_item:nth-of-type(2) {left: 0;opacity: 1;-webkit-transition-delay: 1s;-moz-transition-delay: 1s;transition-delay: 1s;} body.needStart.startView .skill_item:nth-of-type(3) {left: 0;opacity: 1;-webkit-transition-delay: 1.2s;-moz-transition-delay: 1.2s;transition-delay: 1.2s;} body.needStart.startView .skill_item:nth-of-type(4) {left: 0;opacity: 1;-webkit-transition-delay: 1.4s;-moz-transition-delay: 1.4s;transition-delay: 1.4s;} .facts_box {width: calc(100% - 355px);padding: 0 0 0 355px;position: absolute;top: 130px;left: 0;z-index: 10;} .facts_box.hide {opacity: 0;z-index: 1;} .fact_item {width: 250px;height: 205px;float: right;margin: 0 0 42px 42px;position: relative;cursor: default;} .fact_item:nth-of-type(3n) {margin-left: 0;} .fact_item .fact_back {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: #f0f1f4;overflow: hidden;z-index: 1;} .fact_item .fact_back > div {position: absolute;} .fact_item[data-anim="1"] .fact_back > div {width: 400px;height: 400px;background: #fca903;top: -400px;left: 400px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);} .fact_item[data-anim="2"] .fact_back > div {width: 400px;height: 400px;background: #fca903;top: 50%;right: 400px;margin-top: -200px;-webkit-transform: rotate(-47deg);-moz-transform: rotate(-47deg);transform: rotate(-47deg);} .fact_item[data-anim="3"] .fact_back > div {width: 400px;height: 400px;background: #fca903;top: 400px;left: -400px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);} .fact_item[data-anim="4"] .fact_back > div, .fact_item[data-anim="5"] .fact_back > div, .fact_item[data-anim="6"] .fact_back > div {width: 400px;height: 400px;top: 50%;left: 50%;margin: -200px 0 0 -200px;} .fact_item[data-anim="4"] .fact_back > div:before {width: 0px;height: 100%;position: absolute;top: 0;left: 50%;content: "";background: #fca903;-webkit-transform: rotate(-51deg);-moz-transform: rotate(-51deg);transform: rotate(-51deg);-webkit-transition: all .9s ease;-moz-transition: all .9s ease;-o-transition: all .9s ease;-ms-transition: all .9s ease;transition: all .9s ease;} .fact_item[data-anim="4"] .fact_back > div:after {width: 0px;height: 100%;position: absolute;top: 0;left: 50%;content: "";background: #fca903;-webkit-transform: rotate(51deg);-moz-transform: rotate(51deg);transform: rotate(51deg);-webkit-transition: all .9s ease;-moz-transition: all .9s ease;-o-transition: all .9s ease;-ms-transition: all .9s ease;transition: all .9s ease;} .fact_item[data-anim="5"] .fact_back > div:before {width: 0px;height: 0;position: absolute;top: 50%;left: 50%;content: "";background: #fca903;-webkit-transition: all .9s ease;-moz-transition: all .9s ease;-o-transition: all .9s ease;-ms-transition: all .9s ease;transition: all .9s ease;} .fact_item[data-anim="6"] .fact_back > div:before {width: 20px;height: 100%;position: absolute;top: 100%;left: 90px;content: "";background: #fca903;-webkit-transition: all .9s ease;-moz-transition: all .9s ease;-o-transition: all .9s ease;-ms-transition: all .9s ease;transition: all .9s ease;} .fact_item[data-anim="6"] .fact_back > div:after {width: 30px;height: 100%;position: absolute;top: -100%;right: 120px;content: "";background: #fca903;-webkit-transition: all .9s ease;-moz-transition: all .9s ease;-o-transition: all .9s ease;-ms-transition: all .9s ease;transition: all .9s ease;} .fact_item .fact_info {width: calc(100% - 70px);height: calc(100% - 60px);position: absolute;top: 0;left: 0;z-index: 2;padding: 35px 35px 25px;} .fact_item .fact_info > div {width: 100%;height: 40px;position: relative;} .fact_item .fact_info > div svg {height: 100%;width: auto;} .fact_item .fact_info > div svg path:not(.stroke), .fact_item .fact_info > div svg rect:not(.stroke), .fact_item .fact_info > div svg line:not(.stroke), .fact_item .fact_info > div svg polyline:not(.stroke) {color: #a6a8ae;fill: currentColor;stroke: none;} .fact_item .fact_info > div svg path.stroke, .fact_item .fact_info > div svg rect.stroke, .fact_item .fact_info > div svg line.stroke, .fact_item .fact_info > div svg polyline.stroke {color: #a6a8ae;fill: none;stroke: currentColor;} .fact_item .fact_info > span {display: block;width: 100%;padding: 15px 0 0;font: 400 36px/100% Roboto;color: #a6a8ae;} .fact_item .fact_info > label {display: block;width: 100%;padding: 20px 0 0;font: 400 15px/100% Roboto;color: #a6a8ae;} .fact_item[data-anim="1"]:hover .fact_back > div {top: 50%;left: 50%;margin: -200px 0 0 -200px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);} .fact_item[data-anim="2"]:hover .fact_back > div {right: -100px;} .fact_item[data-anim="3"]:hover .fact_back > div {left: -100px;top: -100px;} .fact_item[data-anim="4"]:hover .fact_back > div:before, .fact_item[data-anim="4"]:hover .fact_back > div:after {width: 100%;margin-left: -200px;} .fact_item[data-anim="5"]:hover .fact_back > div:before {width: 100%;height: 100%;margin: -200px 0 0 -200px;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);transform: rotate(180deg);} .fact_item[data-anim="6"]:hover .fact_back > div:before, .fact_item[data-anim="6"]:hover .fact_back > div:after {top: 0;width: 70%;} .fact_item:hover .fact_info > span, .fact_item:hover .fact_info > label {color: #fff;} .fact_item:hover .fact_info > div svg path:not(.stroke), .fact_item:hover .fact_info > div svg rect:not(.stroke), .fact_item:hover .fact_info > div svg line:not(.stroke), .fact_item:hover .fact_info > div svg polyline:not(.stroke) {color: #fff;fill: currentColor;stroke: none;} .fact_item:hover .fact_info > div svg path.stroke, .fact_item:hover .fact_info > div svg rect.stroke, .fact_item:hover .fact_info > div svg line.stroke, .fact_item:hover .fact_info > div svg polyline.stroke {color: #fff;fill: none;stroke: currentColor;} .info_switcher {width: 200px;height: 40px;display: block;position: absolute;top: 25px;right: 0;overflow: hidden;cursor: pointer;} .info_switcher span {display: block;width: 100%;height: 20px;position: absolute;left: 0;text-align: right;font: 400 20px/90% Roboto;color: #c1c2c9;} .info_switcher.active span:first-child {top: -30px;opacity: 0;} .info_switcher.active span:last-child {top: 10px;opacity: 1;} .info_switcher:not(.active) span:first-child {top: 10px;opacity: 1;} .info_switcher:not(.active) span:last-child {top: 30px;opacity: 0;} .info_switcher:hover span {color: #fca903;} .best_projects {width: 100%;height: 100%;position: relative;} .best_proj_slide {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;opacity: 0;} .best_proj_slide.active {z-index: 5;opacity: 1;} .best_proj_slide:before {width: 100%;height: 300px;position: absolute;bottom: 0;left: 0;z-index: 2;content: "";background: #f1f0f0;} .best_proj_slide:after {width: 0;height: 2px;position: absolute;top: 0;left: 0;background: #ffa800;z-index: 10;content: "";-webkit-transition: all 8s linear;-moz-transition: all 8s linear;-o-transition: all 8s linear;-ms-transition: all 8s linear;transition: all 8s linear;} .proj_back {width: 100%;height: 740px;position: absolute;top: 0;left: 0;z-index: 1;overflow: hidden;background: #f0f0f0;} .proj_back:before {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;background: #181a1b;content: "";-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;} .proj_back > div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;background-position: center;background-size: cover;background-repeat: no-repeat;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);transform: scale(1.1);} .best_proj_slide.active:after {width: 100%;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .proj_content {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 5;} .best_proj_slide[data-slide="1"] .proj_content .proj_title {width: 780px;height: 230px;position: absolute;top: 40px;left: 50%;margin-left: -430px;z-index: 1;} .best_proj_slide[data-slide="2"] .proj_content .proj_title {width: 460px;height: 75px;position: absolute;top: 150px;left: 50%;margin-left: -280px;z-index: 1;} .best_proj_slide[data-slide="3"] .proj_content .proj_title {width: 370px;height: 210px;position: absolute;top: 40px;right: 50%;margin-right: -530px;z-index: 1;} .best_proj_slide[data-slide="1"] .proj_content .proj_title > div {width: 780px;height: 780px;position: absolute;top: -273px;left: 0;background: url('../images/svg/mguide_logo.svg') 0 0 no-repeat;} .best_proj_slide[data-slide="2"] .proj_content .proj_title > div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url('../images/svg/tbg_logo.svg') 0 0 no-repeat;} .best_proj_slide[data-slide="3"] .proj_content .proj_title > div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url('../images/svg/spielberg_logo.svg') 0 0 no-repeat;} .best_proj_slide[data-slide="1"]:after {background: #fc3b67;} .best_proj_slide[data-slide="2"]:after {background: #ffbe64;} .best_proj_slide[data-slide="3"]:after {background: #2cbcff;} .project_link {width: 156px;height: 44px;display: block;position: absolute;bottom: 25px;left: 50%;margin-left: -79px;opacity: 0;z-index: 100;background: none;border: 1px solid #f1f0f0;overflow: hidden;} .project_link span {width: 100%;height: 20px;display: block;position: absolute;top: 12px;left: 0;font: 700 16px/20px Roboto;color: #ffa800;text-align: center;} .project_link span:last-child {margin-top: 35px;opacity: 0;} .project_link:hover span:first-child {margin-top: -35px;opacity: 0;} .project_link:hover span:last-child {margin-top: 0;opacity: 1;} .best_proj_slide[data-slide="1"] .project_link:hover {background: #fc3b67;} .best_proj_slide[data-slide="2"] .project_link:hover {background: #ffbe64;} .best_proj_slide[data-slide="3"] .project_link:hover {background: #2cbcff;} .best_proj_slide[data-slide="1"] .project_link {border-color: #fc3b67;} .best_proj_slide[data-slide="1"] .project_link span {color: #fc3b67;} .best_proj_slide[data-slide="2"] .project_link {border-color: #ffbe64;} .best_proj_slide[data-slide="2"] .project_link span {color: #ffbe64;} .best_proj_slide[data-slide="3"] .project_link {border-color: #2cbcff;} .best_proj_slide[data-slide="3"] .project_link span {color: #2cbcff;} .project_link:hover span {color: #f1f0f0 !important;} .best_proj_slide.active .project_link {opacity: 1;bottom: 40px;} .best_proj_slide[data-slide="1"] .project_link, .best_proj_slide[data-slide="3"] .project_link {margin-left: -187px;} .best_proj_slide[data-slide="2"] .project_link {margin-left: 31px;} .project_link.all {opacity: 1;position: relative;bottom: auto;margin-top: 40px;border-color: #ffa800;} .project_link.all:hover {background: #ffa800;} .project_link.all:hover span {color: #fff;} .macbook_vidget {width: 980px;height: 566px;position: absolute;top: 255px;left: 50%;z-index: 1;opacity: 0;} .best_proj_slide[data-slide="1"] .macbook_vidget, .best_proj_slide[data-slide="3"] .macbook_vidget {margin-left: -550px;} .best_proj_slide[data-slide="2"] .macbook_vidget {margin-left: -340px;} .macbook_vidget .macB {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;background: url('../images/macbook_vidget.png') 0 0 no-repeat;background-size: contain;} .macbook_vidget .macB_cont_wrap {width: 736px;height: 460px;position: absolute;top: 41px;left: 121px;overflow: hidden;z-index: 2;} .macbook_vidget .macB_content {width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;} .macbook_vidget .macB_content > div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;} .phone_vidget {width: 251px;height: 514px;position: absolute;opacity: 0;z-index: 3;} .best_proj_slide[data-slide="1"] .phone_vidget {top: 350px;right: 50%;margin-right: -560px;} .best_proj_slide[data-slide="2"] .phone_vidget {top: 350px;left: 50%;margin-left: -620px;} .phone_vidget.white {background: url('../images/phone_white.png') 0 0 no-repeat;} .phone_vidget:not(.white) {background: url('../images/phone_gray.png') 0 0 no-repeat;} .phone_vidget .phone_view {width: 219px;height: 388px;position: absolute;top: 62px;left: 16px;overflow: hidden;opacity: 0;} .phone_vidget .phone_view .phone_scroll {width: 178px;height: 271px;position: absolute;top: 70px;left: 20px;background-repeat: no-repeat;background-position: 0 0;background-size: 100% auto;} .best_proj_slide[data-slide="2"] .phone_vidget .phone_view {opacity: 1;} .best_proj_slide[data-slide="2"] .phone_vidget .phone_view .phone_scroll {width: 100%;height: 100%;top: 0;left: 0;opacity: 0;} .best_proj_slide[data-slide="2"] .phone_vidget .phone_view .phone_scroll > div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;} .spielberg_dino {width: 575px;height: 595px;position: absolute;top: 280px;right: 50%;margin-right: -790px;z-index: 3;opacity: 0;background: url('../images/dino.png') 0 0 no-repeat;} /* slide #1 animations */ .best_proj_slide.active[data-slide="1"] .proj_back > div {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} .best_proj_slide.active[data-slide="1"] .proj_back:before {opacity: 0;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .best_proj_slide.active[data-slide="1"] .proj_content .proj_title {margin-left: -390px;} .best_proj_slide.active[data-slide="1"] .macbook_vidget {margin-left: -600px;opacity: 1;-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} .best_proj_slide.active[data-slide="1"] .macbook_vidget .macB_content {opacity: 1;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} .best_proj_slide.active[data-slide="1"] .macbook_vidget .macB_cont_wrap.hide {opacity: 0;} .best_proj_slide.active[data-slide="1"] .phone_vidget {margin-right: -600px;opacity: 1;-webkit-transition-delay: .9s;-moz-transition-delay: .9s;transition-delay: .9s;} .best_proj_slide.active[data-slide="1"] .phone_vidget .phone_view {opacity: 1;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} .best_proj_slide.active[data-slide="1"] .phone_vidget .phone_view .phone_scroll {background-position: 0 bottom;-webkit-transition-delay: 1.7s;-moz-transition-delay: 1.7s;transition-delay: 1.7s;} /* slide #2 animations */ .best_proj_slide.active[data-slide="2"] .proj_back > div {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} .best_proj_slide.active[data-slide="2"] .proj_back:before {opacity: 0;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .best_proj_slide.active[data-slide="2"] .proj_content .proj_title {margin-left: -230px;} .best_proj_slide.active[data-slide="2"] .macbook_vidget {margin-left: -380px;opacity: 1;-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} .best_proj_slide.active[data-slide="2"] .macbook_vidget .macB_content {opacity: 1;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} .best_proj_slide.active[data-slide="2"] .macbook_vidget .macB_content > div {background-position: 0 bottom;-webkit-transition-delay: 1.7s;-moz-transition-delay: 1.7s;transition-delay: 1.7s;} .best_proj_slide.active[data-slide="2"] .phone_vidget {margin-left: -590px;opacity: 1;-webkit-transition-delay: .9s;-moz-transition-delay: .9s;transition-delay: .9s;} .best_proj_slide.active[data-slide="2"] .phone_vidget .phone_scroll {opacity: 1;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} .best_proj_slide.active[data-slide="2"] .phone_vidget .phone_view.hide {opacity: 0;} /* slide #3 animations */ .best_proj_slide.active[data-slide="3"] .proj_back > div {-webkit-transform: scale(1);-moz-transform: scale(1);transform: scale(1);-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} .best_proj_slide.active[data-slide="3"] .proj_back:before {opacity: 0;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .best_proj_slide.active[data-slide="3"] .proj_content .proj_title {margin-right: -600px;} .best_proj_slide.active[data-slide="3"] .macbook_vidget {margin-left: -600px;opacity: 1;-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} .best_proj_slide.active[data-slide="3"] .macbook_vidget .macB_content {opacity: 1;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} .best_proj_slide.active[data-slide="3"] .macbook_vidget .macB_content > div {background-position: 0 bottom;-webkit-transition-delay: 2s;-moz-transition-delay: 2s;transition-delay: 2s;} .best_proj_slide.active[data-slide="3"] .spielberg_dino {opacity: 1;margin-right: -765px;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} .commercial {width: 570px;height: 96px;display: block;position: absolute;top: 112px;right: 50%;margin-right: -260px;background: #ffa800;padding-right: 90px;} .commercial span:first-child {width: 100%;display: block;text-align: center;font: 900 26px/110% Roboto;color: #fff;text-transform: uppercase;position: relative;top: 19px;} .commercial span:last-child {width: 370px;height: 280px;display: block;position: absolute;top: -90px;right: -285px;background: url('../images/commercial_card.png') center no-repeat;background-size: contain;} .commercial:hover span:last-child {-webkit-transform: rotate(3deg);-moz-transform: rotate(3deg);transform: rotate(3deg);} .slogan {width: 225px;position: absolute;top: 260px;left: 50%;margin-left: -480px;z-index: 100;} .slogan p {margin: 0;padding: 0;font: 700 30px/120% Roboto;color: #fff;float: left;clear: both;white-space: nowrap;position: relative;} .slogan p:nth-of-type(1) {} .slogan p > span {color: #fea939;} .slogan p > span:nth-of-type(1) {position: relative;z-index: 2;} .slogan p > span:nth-of-type(2) {position: absolute;top: 0;left: 0;z-index: 1;opacity: .9;} .slogan > span {display: block;clear: both;padding: 15px 0 0;font: 400 20px/100% Roboto;color: #fea939;text-align: right;} .back_title {width: 500px;height: 520px;position: absolute;top: 155px;left: 50%;margin-left: -600px;z-index: 1;display: block;font: 900 164px/80% Roboto;color: #222324;text-transform: uppercase;} .back_title > span {display: block;clear: both;position: relative;left: 50px;opacity: 0;} [data-view="4"].start .back_title > span:nth-of-type(1) {left: 0;opacity: 1;} [data-view="4"].start .back_title > span:nth-of-type(2) {left: 0;opacity: 1;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} [data-view="4"].start .back_title > span:nth-of-type(3) {left: 0;opacity: 1;-webkit-transition-delay: 1.2s;-moz-transition-delay: 1.2s;transition-delay: 1.2s;} [data-view="4"].start .back_title > span:nth-of-type(4) {left: 0;opacity: 1;-webkit-transition-delay: 1.9s;-moz-transition-delay: 1.9s;transition-delay: 1.9s;} .portfolio_viewport {width: calc(50% + 236px);height: 650px;position: absolute;top: 200px;right: 0;z-index: 5;} #portfolioGrid {width: 100%;height: 100%;} #portfolioGrid .swiper-slide {height: 100%;position: relative;} #portfolioGrid .swiper-slide .project_preview {width: 100%;height: calc(100% - 40px);display: block;margin-top: 40px;position: relative;background-color: rgba(255,255,255,.05);} #portfolioGrid .swiper-slide .project_preview > div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;background-position: center;background-size: cover;background-repeat: no-repeat;} #portfolioGrid .swiper-slide .project_preview > div:before {width: 100%;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;background: rgba(0,0,0,.8);content: "";-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;} #portfolioGrid .swiper-slide .project_preview .project_chapter {width: 100%;height: 40px;display: block;position: absolute;top: -40px;left: 0;z-index: 1;text-indent: 40px;font: 400 20px/40px Roboto;color: #74787c;opacity: 0;} #portfolioGrid .swiper-slide .project_preview .project_title {width: 100%;display: block;position: absolute;top: calc(100% - 20px);left: 0;z-index: 1;font: 900 24px/110% Roboto;color: #fff;padding-top: 10px;opacity: 0;} #portfolioGrid.hover .swiper-slide .project_preview > div:before {opacity: 1;} #portfolioGrid .swiper-slide .project_preview:hover > div:before {opacity: 0;} #portfolioGrid .swiper-slide .project_preview:hover .project_chapter {text-indent: 0;opacity: 1;} #portfolioGrid .swiper-slide .project_preview:hover .project_title {top: 100%;opacity: 1;} #portfolioScrollbar, #portfolioPrev, #portfolioNext {opacity: 0;} [data-view="4"].showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(1), [data-view="4"].showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(2), [data-view="4"].showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(3), [data-view="4"].showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(4) {opacity: 0;left: 50px;} [data-view="4"].start.showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(1) {left: 0;opacity: 1;-webkit-transition-delay: 2s;-moz-transition-delay: 2s;transition-delay: 2s;} [data-view="4"].start.showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(2) {left: 0;opacity: 1;-webkit-transition-delay: 2.5s;-moz-transition-delay: 2.5s;transition-delay: 2.5s;} [data-view="4"].start.showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(3) {left: 0;opacity: 1;-webkit-transition-delay: 3s;-moz-transition-delay: 3s;transition-delay: 3s;} [data-view="4"].start.showSlds:not(.rapid) #portfolioGrid .swiper-slide:nth-of-type(4) {left: 0;opacity: 1;-webkit-transition-delay: 3.5s;-moz-transition-delay: 3.5s;transition-delay: 3.5s;} [data-view="4"].showNav #portfolioScrollbar, [data-view="4"].showNav #portfolioPrev, [data-view="4"].showNav #portfolioNext {opacity: 1;} [data-view="4"].rapid #portfolioGrid .swiper-slide {opacity: 0;left: 0;} [data-view="4"].start.rapid #portfolioGrid .swiper-slide:nth-of-type(1), [data-view="4"].start.rapid #portfolioGrid .swiper-slide:nth-of-type(2), [data-view="4"].start.rapid #portfolioGrid .swiper-slide:nth-of-type(3), [data-view="4"].start.rapid #portfolioGrid .swiper-slide:nth-of-type(4) {opacity: 1;-webkit-transition-delay: 0s;-moz-transition-delay: 0s;transition-delay: 0s;} footer {width: 100%;height: 420px;position: relative;background: #2a2a2a;z-index: 100;} .f_content_wrapper {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 2;} .f_leftSide {width: 50%;height: 100%;position: absolute;top: 0;left: 0;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;} .f_rightSide {width: 50%;height: 100%;position: absolute;top: 0;right: 0;} .fLogo {width: 220px;height: 75px;position: relative;display: block;left: 50%;margin: 160px 0 0 -110px;clear: both;background: url('../images/svg/logo.svg') 0 0 no-repeat;background-size: contain;-webkit-transform-origin: center;-moz-transform-origin: center;transform-origin: center;} .fLogo:hover {-webkit-transform: rotateY(-25deg) translateZ(1em);-moz-transform: rotateY(-25deg) translateZ(1em);transform: rotateY(-25deg) translateZ(1em);} .copyright {width: 100%;margin: 0;padding: 5px 0 0;display: block;text-align: center;font: 700 12px Roboto;color: #535353;} .contacts_box {width: 310px;height: calc(100% - 20px);position: relative;float: left;margin-top: 20px;} .contacts_box .contact_item {float: left;clear: both;margin: 25px 0 0;position: relative;} .contacts_box .contact_item label {display: block;cursor: default;padding: 0 0 20px;font: 400 18px/100% Roboto;color: #a2a2a2;text-transform: uppercase;} .contacts_box .contact_item p {display: block;padding: 0;margin: 5px 0 0;font: 400 18px/100% Roboto;color: #707070;} .contacts_box .contact_item .show_map {position: absolute;bottom: 2px;right: 0;text-align: right;font: 400 16px/100% Roboto;color: #ffa800;cursor: pointer;} .contacts_box .contact_item .show_map:hover {color: #a2a2a2;} .f_nav {width: 260px;height: calc(100% - 42px);margin: 42px 0 0 20px;float: left;position: relative;} .f_nav a, .f_nav span {display: block;float: left;clear: both;cursor: pointer;margin: 0 0 17px;font: 400 18px Roboto;color: #707070;} .f_nav a:hover, .f_nav a.current, .f_nav span:hover, .f_nav span.current {color: #ffa800;} .we_on_map, .feedback {width: 100%;height: 100%;position: absolute;top: 0;left: 0;overflow: hidden;z-index: 1;opacity: 0;} .we_on_map .mapOn {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: url('../images/gmap.jpg') center no-repeat;} .map_info {width: 460px;height: 100%;position: absolute;top: 0;left: -230px;opacity: 0;background: rgba(0,0,0,.85);} .info_pic {width: 100%;height: 230px;position: absolute;top: 0;left: 0;z-index: 1;background-position: center;background-size: cover;background-repeat: no-repeat;} .c_logo {width: 180px;height: 60px;position: absolute;top: 205px;left: 50%;margin-left: -90px;z-index: 2;background: url('../images/svg/logo.svg') center no-repeat;background-size: contain;} .w_hours {width: 100%;position: absolute;top: 290px;left: 0;text-align: center;} .w_hours label {cursor: default;display: block;padding: 0 0 22px;font: 900 16px/100% Roboto;color: #ffa800;text-transform: uppercase;} .w_hours p {cursor: default;display: block;padding: 0;margin: 0;font: 700 14px/110% Roboto;color: #fff;} .w_hours p.dark {color: #5e5e5e;} .slideTop {width: 80px;position: relative;left: 50%;margin: 0 0 30px -55px;height: 30px;display: block;cursor: pointer;padding-left: 30px;font: 400 16px/30px Roboto;} .slideTop span {width: 30px;height: 20px;display: block;position: absolute;top: 5px;left: 0;} .slideTop:hover {color: #ffa800;} .feedback {background: #2a2a2a;} .feedback fieldset {width: calc(50% - 20px);float: left;margin-top: 90px;} .feedback fieldset:nth-child(even) {float: right;} .feedback fieldset:nth-of-type(3) {width: 100%;margin-top: 60px;} .feedback fieldset input {width: 100%;height: 30px;border: none;outline: none;background: none;border-bottom: 1px solid #707070;font: 400 16px Roboto;color: #707070;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;} .feedback fieldset input[data-ext="true"] {color: #ffa800;border-color: #ffa800;opacity: .8;} .feedback fieldset input:focus {color: #ffa800;border-color: #ffa800;} .feedback fieldset textarea {width: 100%;height: 26px;border: none;outline: none;resize: none;background: none;border-bottom: 1px solid #707070;font: 400 16px Roboto;color: #707070;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;} .feedback fieldset textarea[data-ext="true"] {color: #ffa800;border-color: #ffa800;opacity: .8;} .feedback fieldset textarea:focus {height: 100px;color: #ffa800;border-color: #ffa800;} .feedback fieldset textarea.error, .feedback fieldset input.error {color: #fc2c03;border-color: #fc2c03;} .feedback .send_feedback {width: 180px;height: 44px;border: 1px solid #ffa800;position: absolute;bottom: 50px;left: 50%;margin-left: -91px;cursor: pointer;overflow: hidden;background: none;} .feedback .send_feedback span {width: 100%;height: 20px;display: block;position: absolute;top: 12px;left: 0;font: 700 16px/20px Roboto;color: #ffa800;text-align: center;text-transform: uppercase;} .feedback .send_feedback span:last-child {margin-top: 35px;opacity: 0;} .feedback .send_feedback:hover span:first-child {margin-top: -35px;opacity: 0;} .feedback .send_feedback:hover span:last-child {margin-top: 0;opacity: 1;} .feedback .send_feedback:hover {background: #ffa800;} .feedback .send_feedback:hover span {color: #181a1b;} .message_box {width: 350px;min-height: 40px;padding: 15px 20px;display: table;background: #101011;position: fixed;z-index: 50000;right: 0;bottom: -200px;opacity: 0;} .message_box.show {bottom: 0;opacity: 1;} .message_box > div {display: table-cell;vertical-align: middle;height: 100%;} .message_box > div > p {font: 400 14px/120% Roboto;color: #fff;} .closePopup {width: 40px;height: 40px;position: absolute;top: 0;right: 50%;margin-right: -600px;cursor: pointer;z-index: 1;opacity: 0;;background: #181a1b;} .closePopup:before {width: 20px;height: 2px;position: absolute;top: 50%;margin-top: -1px;left: 10px;background: #ffa800;content: "";-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);} .closePopup:after {width: 20px;height: 2px;position: absolute;top: 50%;margin-top: -1px;left: 10px;background: #ffa800;content: "";-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);transform: rotate(-45deg);} [data-popup="true"].active {opacity: 1;z-index: 3;} [data-popup="true"].active .map_info {left: 0;opacity: 1;-webkit-transition-delay: .4s;-moz-transition-delay: .4s;transition-delay: .4s;} [data-popup="true"].active ~ .f_content_wrapper {opacity: 0;z-index: 1;} [data-popup="true"].active ~ .closePopup {z-index: 10;opacity: 1;} .pageLoading {width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 10000;background: #181a1b;} .pageLoading.out {opacity: 0;} #loadingBack {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;opacity: 1;overflow: hidden;} #loadingBack svg#triangulat_back {width: 1920px;height: 1080px;position: absolute;bottom: 0;left: 50%;margin-left: -960px;} #loadingBack svg#triangulat_back path.effect {color: #262829;fill: currentColor !important;} #loadingBack svg#triangulat_back path.active {color: #ffa800;fill: currentColor !important;} .mainSlogan {width: 850px;height: 180px;display: block;padding: 0;margin: 0;position: absolute;top: 190px;left: 50%;margin-left: -425px;z-index: 5;font: 900 100px/90% Roboto;color: #fff;text-transform: uppercase;} .mainSlogan > span:nth-of-type(1) {font: 900 100px/90% Roboto;color: #373737;position: absolute;top: -50px;left: 0;z-index: 2;opacity: 0;} .mainSlogan > span:nth-of-type(2) {font: 900 100px/90% Roboto;color: #ffa800;position: absolute;top: 50%;left: -60px;z-index: 2;opacity: 0;} .mainSlogan > span:nth-of-type(2) > span {font: 900 100px/90% Roboto;position: absolute;top: 0;left: 100%;margin-left: -40px;opacity: 0;} .mainSlogan div {position: absolute;position: absolute;top: 50%;left: 380px;z-index: 1;opacity: 0;} .mainSlogan div > span {font: 900 100px/90% Roboto;color: #fff;text-transform: uppercase;position: absolute;top: 0;left: 0;opacity: 0;} .mainSlogan div > span > span:first-child {font: 900 100px/90% Roboto;position: absolute;top: 0;left: 0;z-index: 2;} .mainSlogan div > span > span:last-child {font: 900 100px/90% Roboto;position: absolute;top: 0;left: 0;z-index: 1;opacity: .8;} .mainSlogan[data-active="2"] div > span:nth-of-type(1), .mainSlogan[data-active="3"] div > span:nth-of-type(1) {margin-top: -30px;opacity: 0;} .mainSlogan[data-active="3"] div > span:nth-of-type(2) {margin-top: 30px;opacity: 0;} .mainSlogan[data-active="1"] div > span:nth-of-type(1), .mainSlogan[data-active="2"] div > span:nth-of-type(2), .mainSlogan[data-active="3"] div > span:nth-of-type(3) {margin-top: 0;opacity: 1;} .mainSlogan.start > span:nth-of-type(1) {top: 0;opacity: 1;} .mainSlogan.start > span:nth-of-type(2) {left: 0;opacity: 1;-webkit-transition-delay: .4s;-moz-transition-delay: .4s;transition-delay: .4s;} .mainSlogan.start > span:nth-of-type(2) > span {margin-left: 20px;opacity: 1;-webkit-transition-delay: .6s;-moz-transition-delay: .6s;transition-delay: .6s;} .mainSlogan.start div {opacity: 1;-webkit-transition-delay: .8s;-moz-transition-delay: .8s;transition-delay: .8s;} .mainSlogan.start[data-active="1"] div > span:nth-of-type(1) > span:last-child {opacity: 0;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);transform: scale(1.1);-webkit-transition-delay: 1s;-moz-transition-delay: 1s;transition-delay: 1s;} .mainSlogan.start[data-active="2"] div > span:nth-of-type(2) > span:last-child {opacity: 0;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);transform: scale(1.1);-webkit-transition-delay: .4s;-moz-transition-delay: .4s;transition-delay: .4s;} .mainSlogan.start[data-active="3"] div > span:nth-of-type(3) > span:last-child {opacity: 0;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);transform: scale(1.1);-webkit-transition-delay: .4s;-moz-transition-delay: .4s;transition-delay: .4s;} .loading_hint {width: 100%;height: 20px;position: absolute;bottom: 160px;left: 0;z-index: 100;text-align: center;font: 400 13px/20px Roboto;color: #fff;} .loading_hint span {font: 400 13px/20px Roboto;color: #ffa800;} #loadingBack svg#triangulation {width: 135px;height: 120px;position: absolute;bottom: 187px;left: 50%;margin-left: -71px;z-index: 100;-webkit-perspective: 120px;-moz-perspective: 120px;perspective: 120px;} #loadingBack svg#triangulation g#left_triangle {-webkit-transform: rotate(-119deg);-moz-transform: rotate(-119deg);transform: rotate(-119deg);-webkit-transform-origin: 33px 100px;-moz-transform-origin: 33px 100px;transform-origin: 33px 100px;} #loadingBack svg#triangulation g#right_triangle {-webkit-transform: rotate(119deg);-moz-transform: rotate(119deg);transform: rotate(119deg);-webkit-transform-origin: 101px 100px;-moz-transform-origin: 101px 100px;transform-origin: 101px 100px;} #loadingBack svg#triangulation path[data-transform="1"], #loadingBack svg#triangulation path[data-transform="2"], #loadingBack svg#triangulation path[data-transform="3"] {-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);-webkit-transform-origin: center bottom;-moz-transform-origin: center bottom;transform-origin: center bottom;} #loadingBack svg#triangulation path[data-main-triangle="true"] {stroke-dasharray: 420;stroke-dashoffset: 420;} #loadingBack svg#triangulation.start path[data-main-triangle="true"] {stroke-dashoffset: 0;} #loadingBack svg#triangulation.start.end path[data-main-triangle="true"] {stroke-opacity: 0;-webkit-transition: all .5s linear;-moz-transition: all .5s linear;-o-transition: all .5s linear;-ms-transition: all .5s linear;transition: all .5s linear;} #loadingBack svg#triangulation.start.end path[data-transform="1"], #loadingBack svg#triangulation.start.end path[data-transform="2"], #loadingBack svg#triangulation.start.end path[data-transform="3"] {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);transform: rotateX(0deg);} .loading_triangle {width: 0;height: 0;position: absolute;bottom: 100px;left: 50%;margin-left: -100px;z-index: 1000;border-style: solid;border-width: 0 100px 100px 100px;border-color: transparent transparent #007bff transparent;} .viewbox[data-view="1"].start .dArrow svg path, body.startAnimPort .dArrow svg path {stroke-dashoffset: 0;-webkit-transition-delay: .6s;-moz-transition-delay: .6s;transition-delay: .6s;} /* Portfolio Category page */ .portfolio_catBox {width: 100%;min-height: 460px;padding: 65px 0 0;position: relative;color: #676767;} .backTitle {position: absolute;top: 0;left: 50%;margin-left: -600px;opacity: 0;z-index: 1;font: 900 140px/90% Roboto;color: #f6f7fa;white-space: nowrap;} body.startAnimPort .backTitle {top: 50px;opacity: 1;} .next_chapter, .prev_chapter {position: absolute;top: 120px;right: 50%;display: block;padding-right: 25px;z-index: 5;margin-right: -600px;font: 700 20px/100% Roboto;color: rgba(103,103,103,.6);} .prev_chapter {font: 400 18px/100% Roboto;} .prev_chapter strong {font: 700 20px/100% Roboto;} .next_chapter span, .prev_chapter span {width: 11px;height: 20px;position: absolute;top: 50%;margin-top: -8px;right: 0;display: block;} .prev_chapter span {-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);transform: rotate(-180deg);} .next_chapter:hover, .prev_chapter:hover {color: #ffa800 !important;} .portfolio_item {width: 100%;height: 560px;position: relative;display: block;margin: 0 0 80px;} .portfolio_item:first-child {margin-top: 140px;} .portfolio_item .p_item_left {width: 330px;height: 100%;float: left;} .portfolio_item .p_item_title {width: 100%;height: 120px;position: relative;margin-top: 90px;} .portfolio_item .p_item_title span {font: 900 150px/90% Roboto;color: #f0f1f4;text-transform: uppercase;position: absolute;top: 0;left: -3px;z-index: 1;} .portfolio_item .p_item_title h2, .portfolio_item .p_item_title .empty_title {position: relative;top: calc(50% - 10px);display: block;z-index: 2;opacity: 0;font: 900 30px/120% Roboto;color: #676767;text-transform: uppercase;} .portfolio_item .p_item_title h2:after {width: 0;height: 2px;position: absolute;top: 17px;right: 0;background: #ffa800;content: "";-webkit-transition: all .7s ease;-moz-transition: all .7s ease;-o-transition: all .7s ease;-ms-transition: all .7s ease;transition: all .7s ease;} .portfolio_item .p_item_left p {display: block;padding: 0;margin: 40px 0 0;font: 700 16px/120% Roboto;color: #676767;text-align: left;position: relative;top: 30px;opacity: 0;} .portfolio_item .project_link.all {opacity: 0;top: 20px;} .p_item_right {width: 720px;height: 480px;position: absolute;top: 80px;right: 0;} .p_item_right .p_item_ph {width: 320px;height: 100%;position: absolute;opacity: 0;z-index: 2;background-size: cover;background-position: center;background-repeat: no-repeat;background-color: #f0f0f0;} .p_item_right .p_item_ph.center {width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;background-size: cover;background-position: center;background-repeat: no-repeat;} .p_item_right .p_item_ph.center:after {width: 100%;height: 100%;position: absolute;top: 0;left: 0;background: rgba(0,0,0,.1);content: "";-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;} .p_item_right .p_item_ph.left {left: -80px;top: -100px;} .p_item_right .p_item_ph.right {right: 80px;top: -60px;} .chapter_description {width: 100%;max-height: 0;position: relative;margin: 132px 0 90px;overflow: hidden;padding: 0;background: #f6f7fa;} .chapter_description article {padding-left: 400px;} .chapter_description article h1 {display: block;font: 900 16px/120% Roboto;color: #eff0f2;background: #eff0f2;text-transform: uppercase;padding: 0 0 5px;text-indent: 100px;} .chapter_description article h2 {display: block;font: 900 14px/120% Roboto;color: #eff0f2;background: #eff0f2;text-transform: uppercase;padding: 20px 0 0;margin-bottom: -10px;} .chapter_description article p {display: block;font: 400 16px/120% Roboto;color: #eff0f2;margin: 15px 0 0;background: #eff0f2;} .chapter_description .dArrow {top: 50%;margin-top: -39px;opacity: .3;} .chapter_description .dArrow svg path {stroke: #c6cbd8;} .scrlDown {width: 64px;height: 64px;position: relative;top: -40px;left: 50%;margin-left: -32px;opacity: 0;cursor: pointer;} .scrlDown path, .scrlDown circle {color: #ffa800;fill: currentColor;} .scrlDown path.path1 {-webkit-animation: arrow 2s infinite -1s;-moz-animation: arrow 2s infinite -1s;-o-animation: arrow 2s infinite -1s;animation: arrow 2s infinite -1s;} .scrlDown path.path2 {-webkit-animation: arrow 2s infinite -.5s;-moz-animation: arrow 2s infinite -.5s;-o-animation: arrow 2s infinite -.5s;animation: arrow 2s infinite -.5s;} .scrlDown:hover path, .scrlDown:hover circle {color: #a4a4a4;fill: currentColor;} body.startAnimPort .chapter_description {max-height: 700px;padding: 40px 0;-webkit-transition-delay: .6s;-moz-transition-delay: .6s;transition-delay: .6s;} body.startAnimPort .chapter_description article h1 {background: #f6f7fa;color: #b7bbc7;text-indent: 0;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} body.startAnimPort .chapter_description article p, body.startAnimPort .chapter_description article h2 {background: #f6f7fa;color: #b7bbc7;-webkit-transition-delay: 1.3s;-moz-transition-delay: 1.3s;transition-delay: 1.3s;} body.startAnimPort .scrlDown {opacity: 1;-webkit-transition-delay: 1.5s;-moz-transition-delay: 1.5s;transition-delay: 1.5s;} .portfolio_item.cap .p_item_title .empty_title {background: rgba(0,0,0,.1);height: 36px;opacity: .7;} .portfolio_item.cap .p_item_left p {background: rgba(0,0,0,.1);height: 76px;opacity: 1;top: -20px;} .portfolio_item.cap .p_item_right .p_item_ph {opacity: 1;} .portfolio_item.cap .p_item_right .p_item_ph.left, .portfolio_item.cap .p_item_right .p_item_ph.right {top: -80px;} body.startAnimPort .contBX.show .p_item_right .p_item_ph.center {opacity: 1;} body.startAnimPort .contBX.show .p_item_right .p_item_ph.center:after {background: rgba(0,0,0,.6);} body.startAnimPort .contBX.show .p_item_right .p_item_ph.left {opacity: 1;top: -80px;-webkit-transition-delay: .3s;-moz-transition-delay: .3s;transition-delay: .3s;} body.startAnimPort .contBX.show .p_item_right .p_item_ph.right {opacity: 1;top: -80px;-webkit-transition-delay: .3s;-moz-transition-delay: .3s;transition-delay: .3s;} body.startAnimPort .contBX.show .p_item_title h2 {opacity: 1;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} body.startAnimPort .contBX.show .p_item_title h2:after {width: 115px;-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} body.startAnimPort .contBX.show:not(.noDelay) .project_link.all {-webkit-transition-delay: .9s;-moz-transition-delay: .9s;transition-delay: .9s;} body.startAnimPort .contBX.show .p_item_left p, body.startAnimPort .contBX.show .project_link.all {top: 0;opacity: 1;} /* Portfolio Project Details page */ .project_info {width: 100%;position: relative;margin: 160px 0 0;} .project_header {width: 100%;position: relative;margin: 50px 0;clear: both;} .content_bx {width: 100%;clear: both;} .content_bx.lft {width: calc(50% - 85px);float: left;clear: none;} .content_bx.rgt {width: 50%;float: right;clear: none;} .content_bx.cnt {width: 50%;float: left;clear: none;position: relative;left: 25%;} .content_bx .top_spacer {width: 100%;height: 90px;} .content_bx .top_spacer h1 {text-transform: uppercase;text-indent: -60px;} .content_bx .top_spacer .h_wrp {position: relative;left: -100px;opacity: .1;} .content_bx > h1, .content_bx > h2 {display: block;font: 900 26px/110% Roboto;text-transform: uppercase;position: relative;} .content_bx h2:before {width: 31px;height: 19px;position: absolute;top: -30px;left: 0;background: url('../images/svg/titleLine_icon.svg') 0 0 no-repeat;background-size: contain;content: "";} .content_bx p {display: block;font: 700 16px/120% Roboto;text-align: left;opacity: 0;} .content_bx label {display: block;float: left;font: 900 30px/120% Roboto;color: #ffa800;position: relative;left: -20px;opacity: 0;text-transform: uppercase;} .content_bx label:after {width: 0px;height: 2px;position: absolute;top: 50%;left: 100%;margin: -1px 0 0 15px;background: #ffa800;content: "";-webkit-transition: all .7s ease;-moz-transition: all .7s ease;-o-transition: all .7s ease;-ms-transition: all .7s ease;transition: all .7s ease;} .content_bx .launch_project {width: 156px;height: 44px;padding-right: 52px;display: block;opacity: 0;overflow: hidden;margin: 4px 0 0;float: right;border: 1px solid #ffa800;position: relative;} .content_bx .launch_project:before {width: 51px;height: 44px;position: absolute;top: 0;right: 0;z-index: 1;border-left: 1px solid #ffa800;content: "";-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;} .content_bx .launch_project em {width: 21px;height: 16px;position: absolute;top: 50%;right: 15px;display: block;z-index: 2;margin: -8px 0 0;} .content_bx .launch_project em svg path {color: #ffa800;fill: currentColor;} .content_bx .launch_project span {width: calc(100% - 52px);height: 20px;display: block;position: absolute;top: 12px;left: 0;font: 700 14px/20px Roboto;color: #ffa800;text-align: center;} .content_bx .launch_project span:nth-of-type(2) {margin-top: 35px;opacity: 0;} .content_bx .launch_project:hover span:first-child {margin-top: -35px;opacity: 0;} .content_bx .launch_project:hover span:nth-of-type(2) {margin-top: 0;opacity: 1;} .content_bx .launch_project:hover:before {background: #ffa800;} .content_bx .launch_project:hover em svg path {color: #fff;fill: currentColor;} .content_bx ul {display: block;clear: both;padding: 0;margin: 0;list-style: none;position: relative;top: 30px;opacity: 0;} .content_bx ul li {font: 700 18px/100% Roboto;padding: 2px 0;} .project_content {width: 100%;position: relative;clear: both;} .project_content_section {width: 100%;position: relative;top: 60px;opacity: 0;} .section_img {width: 100%;height: 770px;background-position: center;background-size: cover;background-repeat: no-repeat;} .section_descr {width: 100%;min-height: 36px;clear: both;} .section_descr .content_bx {padding: 65px 0;} .next_projectBox {width: 100%;clear: both;overflow: hidden;height: 0px;position: relative;} .next_projectBox .next_project {width: 100%;height: 470px;position: absolute;bottom: 0;left: 0;display: block;background-position: center;background-size: cover;background-repeat: no-repeat;} .next_projectBox .next_project:after {width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;background: rgba(0,0,0,.7);content: "";-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;} .next_projectBox .next_project .next_label {width: 280px;position: absolute;top: 160px;left: 50%;opacity: 0;margin-left: -140px;z-index: 2;text-align: center;font: 700 18px/100% Roboto;color: #ffa800;} .next_projectBox .next_project .next_label:before {width: 31px;height: 19px;position: absolute;top: -30px;left: 50%;margin-left: -15px;background: url('../images/svg/titleLine_icon.svg') 0 0 no-repeat;background-size: contain;content: "";} .next_projectBox .next_project h3 {width: 100%;display: block;position: absolute;z-index: 2;top: 220px;left: 0;opacity: 0;text-align: center;font: 400 60px/110% Roboto;color: #fff;text-transform: uppercase;} .next_projectBox .next_project:hover:after {background: rgba(0,0,0,.8);} .project_header.show .content_bx label {left: 0;opacity: 1;} .project_header.show .content_bx label:after {width: 115px;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .project_header.show .content_bx ul {top: 0;opacity: 1;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .project_header.show .content_bx .top_spacer .h_wrp {left: 0;opacity: 1;} .project_header.show .content_bx .top_spacer h1 {text-indent: 0;-webkit-transition-delay: .3s;-moz-transition-delay: .3s;transition-delay: .3s;} .project_header.show .content_bx p {opacity: 1;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .project_header.show .content_bx .launch_project {opacity: 1;-webkit-transition-delay: .9s;-moz-transition-delay: .9s;transition-delay: .9s;} .project_content_section.show {top: 0;opacity: 1;} .project_content_section.show p {opacity: 1;} .project_content_section.show[data-box="2"] {-webkit-transition-delay: .9s;-moz-transition-delay: .9s;transition-delay: .9s;} .next_projectBox.show {height: 470px;} .next_projectBox.show .next_project .next_label {top: 200px;opacity: 1;-webkit-transition-delay: .5s;-moz-transition-delay: .5s;transition-delay: .5s;} .next_projectBox.show .next_project h3 {top: 250px;opacity: 1;-webkit-transition-delay: .7s;-moz-transition-delay: .7s;transition-delay: .7s;} @-webkit-keyframes arrow {0% {opacity: 0;} 40% {opacity: 1;} 80% {opacity: 0;} 100% {opacity: 0;}} @-moz-keyframes arrow {0% {opacity: 0;} 40% {opacity: 1;} 80% {opacity: 0;} 100% {opacity: 0;}} @-o-keyframes arrow {0% {opacity: 0;} 40% {opacity: 1;} 80% {opacity: 0;} 100% {opacity: 0;}} @keyframes arrow {0% {opacity: 0;} 40% {opacity: 1;} 80% {opacity: 0;} 100% {opacity: 0;}} @media screen and (max-height: 740px) { #loadingBack svg#triangulation {bottom: 67px;} .loading_hint {bottom: 40px;} } @media screen and (min-width: 430px) { body {min-width: 100%;} .content {width: calc(100% - 20px);} .backTitle {font-size: 70px;white-space: pre-wrap;left: 10px;margin-left: 0;} .content_bx .top_spacer h1 {font-size: 20px;} .content_bx .launch_project {width: 114px;height: 36px;float: left;clear: both;margin: 15px 0;padding-right: 41px;} .content_bx .launch_project:before {width: 40px;height: 36px;} .content_bx .launch_project span {width: calc(100% - 41px);top: 9px;} .content_bx .launch_project em {right: 10px;} .section_img {height: 260px;} .section_descr .content_bx {padding: 35px 0;} .content_bx > h1, .content_bx > h2 {font-size: 20px;} .next_projectBox .next_project {height: 230px;} .next_projectBox .next_project h3 {font-size: 40px;} .next_projectBox .next_project .next_label {font-size: 16px;} .f_nav {display: none;position: absolute;z-index: -1;} .next_chapter, .prev_chapter {right: 10px;margin-right: 0;font-size: 16px;} .next_chapter strong, .prev_chapter strong {font-size: 18px;} .fLogo {width: 160px;left: 0;margin-left: 0;} .f_leftSide {width: 160px;} .f_rightSide {width: 40%;} .contacts_box .contact_item label {padding: 0 0 15px;font-size: 16px;} .contacts_box .contact_item p {font-size: 16px;} .contacts_box {width: auto;} .contacts_box .contact_item .show_map {display: none;} .site_navigation .navigation_wrap {width: 90%;left: 0;margin-left: 0;} .closePopup {right: 0;margin-right: 0;} .main_content_block {overflow: hidden;} .site_navigation .n_logo {display: none;} .portfolio_item {height: auto;} .portfolio_item:first-child {margin-top: 90px;} .portfolio_item .p_item_left {width: 100%;height: auto;} .portfolio_item .p_item_title {height: 82px;margin-top: 20px;} .portfolio_item .p_item_title h2 {font-size: 28px;} .portfolio_item .p_item_title h2:after {display: none;} .portfolio_item .project_link.all {position: absolute;left: calc(100% - 156px);margin: 0;} .portfolio_item .p_item_title span {font-size: 100px;} .portfolio_item .p_item_right {width: 100%;height: 300px;position: relative;top: 0;float: left;margin-top: 90px;} .p_item_right .p_item_ph {width: 170px;} .p_item_right .p_item_ph.left {left: 0;} .p_item_right .p_item_ph.right {right: 0;} .p_item_right .p_item_ph.center {width: calc(100% - 20px);left: 10px;} .chapter_description {margin-top: 57px;} .chapter_description article {padding: 0;} .chapter_description article h1, .chapter_description article p {font-size: 18px;} .dArrow, .chapter_description .dArrow {display: none;} .next_chapter {top: 85px;} .mainSlogan {width: 400px;height: 130px;left: 50%;margin-left: -200px;top: 100px;font-size: 54px;} .mainSlogan div {left: 0;top: 100%;} .mainSlogan > span:nth-of-type(1), .mainSlogan > span:nth-of-type(2), .mainSlogan > span:nth-of-type(2) > span, .mainSlogan div > span, .mainSlogan div > span > span:first-child, .mainSlogan div > span > span:last-child {font-size: 54px;} .viewbox h1 > span:nth-child(1) {font-size: 34px;} .viewbox h1 > span:nth-child(2) {font-size: 76px;margin: 0;top: -30px;clear: both;} .viewbox h1 > span:nth-child(2):before {left: 0;} .p_content, .facts_box {width: 100%;padding: 50px 0 0;} .p_content p {font-size: 18px;} .viewbox[data-view="1"] {min-height: 1200px;} .skills_list {width: 430px;left: 50%;margin-left: -195px;} .skill_item {margin: 0 0 50px;} .skill_item:nth-child(2), .skill_item:nth-child(3), .skill_item:nth-child(4) {width: 180px;} .skill_item:nth-child(even) {margin-left: 40px;} .skill_item:nth-of-type(3n) {clear: both;} .fact_item {width: calc(50% - 15px);margin: 0 0 30px;} .fact_item:nth-child(odd) {float: left;} .fact_item .fact_info {width: calc(100% - 30px);height: calc(100% - 30px);padding: 15px;} .viewbox[data-view="2"] {height: 420px;} .macbook_vidget {width: 410px;top: 110px;} .best_proj_slide:before {height: 160px;} .proj_back {height: calc(100% - 160px);} .best_proj_slide[data-slide="1"] .proj_content .proj_title {width: 400px;height: 100px;left: 50%;margin: 0 0 0 -200px;} .best_proj_slide[data-slide="1"] .proj_content .proj_title > div {width: 60%;top: -110px;background-position: left 0;} .best_proj_slide[data-slide="2"] .proj_content .proj_title {width: calc(100% - 20px);height: 40px;left: 10px;margin: 0;top: 55px;} .best_proj_slide[data-slide="2"] .proj_content .proj_title > div {background-position: center 0;} .best_proj_slide[data-slide="3"] .proj_content .proj_title {height: 60px;right: 10px;margin-right: 0;top: 20px;} .best_proj_slide[data-slide="3"] .proj_content .proj_title > div {background-position: right 0;} .spielberg_dino {display: none;} .macbook_vidget .macB_cont_wrap {width: 300px;height: 188px;left: 55px;top: 18px;} .best_proj_slide[data-slide="1"] .project_link, .best_proj_slide[data-slide="2"] .project_link, .best_proj_slide[data-slide="3"] .project_link {bottom: 15px;left: 50%;margin-left: -79px;} .phone_vidget {display: none;} .viewbox[data-view="4"] {min-height: 720px;} .portfolio_viewport {width: 400px;height: 370px;top: 230px;right: 50%;margin-right: -200px;} #portfolioGrid .swiper-slide {width: 188px;} #portfolioGrid .swiper-slide .project_preview .project_title {font-size: 18px;} .swiper-container {height: calc(100% - 70px);padding-bottom: 70px;} .swiper-container-horizontal > .swiper-scrollbar {bottom: 35px;width: 100%;left: 0;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: calc(100% - 41px);} .swiper-button-next, .swiper-container-rtl .swiper-button-prev {left: calc(100% - 11px);} .back_title {width: 100%;top: 10px;left: 8px;margin-left: 0;font-size: 90px;} .slogan {width: 282px;top: 50px;left: 40px;margin: 0;} .commercial {width: calc(100% - 20px);padding: 0 10px;right: 0;margin: 0;top: 140px;} .commercial span:first-child {font-size: 22px;top: 22px;} .commercial span:last-child {width: 200px;height: 130px;right: 50%;margin-right: -100px;top: -110px;} .project_header.show .content_bx label:after {width: 65px;} .next_projectBox.show {height: 230px;} .next_projectBox.show .next_project .next_label {top: 60px;} .next_projectBox.show .next_project h3 {top: 110px;} body.startAnimPort .contBX.show .p_item_right .p_item_ph.left {top: -50px;} body.startAnimPort .contBX.show .p_item_right .p_item_ph.right {top: -50px;} .best_proj_slide.active[data-slide="1"] .macbook_vidget, .best_proj_slide.active[data-slide="2"] .macbook_vidget, .best_proj_slide.active[data-slide="3"] .macbook_vidget {margin: 0 0 0 -205px;} .best_proj_slide.active[data-slide="1"] .proj_content .proj_title {margin-left: -200px;} .best_proj_slide.active[data-slide="2"] .proj_content .proj_title {margin-left: 0;} .best_proj_slide.active[data-slide="3"] .proj_content .proj_title {margin-right: 0;} body.startAnimPort .contBX.show .project_link.all {top: 45px;} body.startAnimPort .contBX.show .p_item_left p {top: -20px;} } @media screen and (min-width: 500px) { .portfolio_item .p_item_right {height: 340px;} .p_item_right .p_item_ph {width: 200px;} } @media screen and (min-width: 600px) { .content {width: calc(100% - 60px);} .section_img {height: 340px;} .backTitle {left: 30px;} .next_chapter, .prev_chapter {right: 30px;} .p_item_right .p_item_ph {width: 230px;} .p_item_right .p_item_ph.center {width: calc(100% - 40px);left: 20px;} .mainSlogan {height: 140px;} .mainSlogan, .mainSlogan > span:nth-of-type(1), .mainSlogan > span:nth-of-type(2), .mainSlogan > span:nth-of-type(2) > span, .mainSlogan div > span, .mainSlogan div > span > span:first-child, .mainSlogan div > span > span:last-child {font-size: 60px;} .viewbox[data-view="2"] {height: 520px;} .macbook_vidget {width: 490px;top: 130px;} .macbook_vidget .macB_cont_wrap {width: 360px;height: 225px;left: 65px;top: 23px;} .best_proj_slide[data-slide="1"] .project_link, .best_proj_slide[data-slide="2"] .project_link, .best_proj_slide[data-slide="3"] .project_link {bottom: 25px;} .viewbox[data-view="4"] {min-height: 800px;} .portfolio_viewport {width: 540px;height: 440px;margin-right: -270px;} body.startAnimPort .contBX.show .p_item_right .p_item_ph.right {top: -50px;} .best_proj_slide.active[data-slide="1"] .macbook_vidget, .best_proj_slide.active[data-slide="2"] .macbook_vidget, .best_proj_slide.active[data-slide="3"] .macbook_vidget {margin: 0 0 0 -245px;} } @media screen and (min-width: 660px) { .site_navigation .n_logo {display: block;} .site_navigation .navigation_wrap {width: 600px;left: 50%;margin-left: -300px;} .portfolio_item .p_item_title {height: 105px;margin-top: 40px;} .portfolio_item .p_item_title h2 {font-size: 30px;} .portfolio_item .p_item_title span {font-size: 120px;} .portfolio_item .p_item_right {height: 390px;} .p_item_right .p_item_ph {width: 250px;} .mainSlogan {height: 150px;} .mainSlogan, .mainSlogan > span:nth-of-type(1), .mainSlogan > span:nth-of-type(2), .mainSlogan > span:nth-of-type(2) > span, .mainSlogan div > span, .mainSlogan div > span > span:first-child, .mainSlogan div > span > span:last-child {font-size: 70px;} body.startAnimPort .contBX.show .project_link.all {top: 75px;} } @media screen and (min-width: 700px) { .facts_box {width: 550px;left: 50%;margin-left: -275px;} .fact_item {width: 250px;margin: 0 0 50px;} .fact_item .fact_info {width: calc(100% - 50px);height: calc(100% - 50px);padding: 30px 25px 20px;} .p_item_right .p_item_ph {width: 270px;} } @media screen and (min-width: 750px) { .section_img {height: 420px;} .next_projectBox .next_project {height: 350px;} .next_projectBox .next_project h3 {font-size: 50px;} .f_leftSide {width: 190px;} .fLogo {width: 190px;} .backTitle {white-space: nowrap;font-size: 80px;} .portfolio_item .p_item_right {height: 410px;} .p_item_right .p_item_ph {width: 290px;} .p_item_right .p_item_ph.right {right: calc(100% - 650px);} .p_item_right .p_item_ph.center {width: calc(100% - 20px);} .chapter_description {margin-top: 68px;} .next_chapter {top: 92px;} .mainSlogan {width: 730px;height: 160px;margin-left: -365px;top: 150px;font-size: 70px;} .mainSlogan div {left: 270px;top: 50%;} .viewbox[data-view="4"] {min-height: 830px;} .portfolio_viewport {height: 480px;} .next_projectBox.show {height: 350px;} .next_projectBox.show .next_project .next_label {top: 100px;} .next_projectBox.show .next_project h3 {top: 170px;} } @media screen and (min-width: 820px) { .portfolio_item .p_item_right {height: 430px;margin-top: 100px;} .p_item_right .p_item_ph {width: 300px;} .p_item_right .p_item_ph.right {right: calc(100% - 680px);} .commercial {width: calc(100% - 220px);padding: 0 90px 0 0;right: 130px;margin: 0;top: 140px;} .commercial span:last-child {width: 240px;height: 160px;right: -120px;margin-right: 0;top: -25px;} } @media screen and (min-width: 880px) { .content_bx .launch_project {float: right;clear: none;margin: 4px 0 0;} .content_bx.lft {width: calc(50% - 55px);} .section_img {height: 550px;} .content_bx > h1, .content_bx > h2 {font-size: 24px;} .next_projectBox .next_project {height: 410px;} .next_projectBox .next_project h3 {font-size: 60px;} .next_projectBox .next_project .next_label {font-size: 18px;} .f_rightSide {width: 60%;} .f_nav {display: block;position: relative;z-index: 5;width: 200px;margin-left: 50px;} .f_leftSide {width: 220px;} .fLogo {width: 220px;} .backTitle {font-size: 94px;} .portfolio_item .p_item_right {width: 720px;height: 430px;margin-top: 120px;right: auto;left: 50%;margin-left: -360px;} .p_item_right .p_item_ph {width: 320px;} .p_item_right .p_item_ph.left {left: -50px;} .p_item_right .p_item_ph.right {right: 50px;} .portfolio_item .project_link.all {position: relative;left: 0;} .chapter_description {margin-top: 82px;} .next_chapter {top: 100px;} .mainSlogan {width: 810px;height: 170px;margin-left: -405px;} .mainSlogan, .mainSlogan > span:nth-of-type(1), .mainSlogan > span:nth-of-type(2), .mainSlogan > span:nth-of-type(2) > span, .mainSlogan div > span, .mainSlogan div > span > span:first-child, .mainSlogan div > span > span:last-child {font-size: 80px;} .mainSlogan div {left: 310px;} .viewbox[data-view="1"] {min-height: 1100px;} .back_title {font-size: 120px;} .viewbox h1 > span:nth-child(2) {font-size: 80px;margin: 0 0 0 30px;top: 0;clear: none;} .viewbox h1 > span:nth-child(2):before {left: -14px;} .slogan {width: 540px;top: 50px;left: 50%;margin: 0 0 0 -270px;} .slogan > span {text-align: left;text-indent: 180px;} .next_projectBox.show {height: 410px;} .next_projectBox.show .next_project .next_label {top: 140px;} .next_projectBox.show .next_project h3 {top: 220px;} body.startAnimPort .contBX.show .project_link.all {top: 10px;} } @media screen and (min-width: 980px) { .content_bx.lft {width: calc(50% - 85px);} .f_rightSide {width: 55%;} .content_bx > h1, .content_bx > h2 {font-size: 26px;} .section_descr .content_bx {padding: 45px 0;} .backTitle {font-size: 106px;} .portfolio_item .p_item_title {height: 115px;} .portfolio_item .p_item_title span {font-size: 134px;} .portfolio_item .p_item_right {height: 480px;margin-top: 150px;} .p_item_right .p_item_ph.left {left: -80px;} .p_item_right .p_item_ph.right {right: 80px;} .chapter_description {margin-top: 94px;} .next_chapter {top: 108px;} .viewbox[data-view="2"] {height: 660px;} .macbook_vidget {width: 630px;top: 180px;} .best_proj_slide.active[data-slide="1"] .macbook_vidget, .best_proj_slide.active[data-slide="2"] .macbook_vidget, .best_proj_slide.active[data-slide="3"] .macbook_vidget {margin-left: -315px;} .macbook_vidget .macB_cont_wrap {width: 465px;height: 291px;left: 82px;top: 27px;} .best_proj_slide[data-slide="1"] .proj_content .proj_title {width: 500px;height: 140px;margin-left: -250px;} .best_proj_slide[data-slide="2"] .proj_content .proj_title {height: 55px;top: 100px;} .best_proj_slide[data-slide="3"] .proj_content .proj_title {height: 100px;} .skills_list {width: 884px;margin-left: -442px;} .skill_item:nth-of-type(3n) {clear: none;} .skill_item:nth-child(even), .skill_item:nth-child(odd) {margin-left: 40px;} .viewbox[data-view="1"] {min-height: 900px;} .facts_box {width: 840px;margin-left: -420px;} .fact_item:nth-child(odd) {float: right;} .fact_item {margin: 0 0 42px 42px;} .viewbox[data-view="4"] {min-height: 980px;} .portfolio_viewport {width: 900px;height: 650px;margin-right: -450px;} body.startAnimPort .contBX.show .p_item_right .p_item_ph.left, body.startAnimPort .contBX.show .p_item_right .p_item_ph.right {top: -80px;} } @media screen and (min-width: 1080px) { .backTitle {font-size: 118px;} .content_bx .top_spacer h1 {font-size: 24px;} .f_rightSide {width: 50%;} .section_img {height: 600px;} .chapter_description {margin-top: 108px;} .next_chapter {top: 115px;} .mainSlogan {width: 910px;height: 180px;margin-left: -455px;} .mainSlogan, .mainSlogan > span:nth-of-type(1), .mainSlogan > span:nth-of-type(2), .mainSlogan > span:nth-of-type(2) > span, .mainSlogan div > span, .mainSlogan div > span > span:first-child, .mainSlogan div > span > span:last-child {font-size: 90px;} .mainSlogan div {left: 340px;} .commercial span:last-child {width: 290px;height: 220px;top: -60px;} .project_header.show .content_bx label:after {width: 115px;} } @media screen and (min-width: 1180px) { .backTitle {font-size: 130px;} .content_bx .top_spacer h1 {font-size: 26px;} .f_rightSide {width: 50%;} .section_img {height: 650px;} .viewbox[data-view="1"] {min-height: 820px;} .p_content, .facts_box {width: calc(100% - 250px);padding: 0 0 0 250px;margin-left: 0;left: 0;} .dArrow {display: block;left: 75px;} .chapter_description .dArrow {display: none;} .chapter_description {margin-top: 120px;} .next_chapter {top: 120px;} .project_header.show .content_bx label:after {width: 115px;} } @media screen and (min-width: 1230px) { .section_img {height: 710px;} .portfolio_item {height: 560px;} .portfolio_item .p_item_left {width: 330px;height: 100%;} .portfolio_item .p_item_title {height: 120px;margin-top: 90px;} .portfolio_item .p_item_title span {font-size: 150px;} .portfolio_item .p_item_right {position: absolute;top: 80px;float: none;margin-top: 0;left: auto;margin-left: 0;right: 0;} .chapter_description article {padding-left: calc(100% - 800px);} .chapter_description article h1, .chapter_description article p {font-size: 16px;} .chapter_description .dArrow {display: block;} } @media screen and (min-width: 1280px) { body {min-width: 1200px;} .content {width: 1200px;} .backTitle {font-size: 140px;white-space: nowrap;left: 50%;margin-left: -600px;} .section_img {height: 770px;} .content_bx .launch_project {width: 156px;height: 44px;float: right;clear: none;margin: 4px 0 0;padding-right: 52px;} .content_bx .launch_project:before {width: 51px;height: 44px;} .content_bx .launch_project span {width: calc(100% - 52px);top: 12px;} .content_bx .launch_project em {right: 15px;} .section_descr .content_bx {padding: 65px 0;} .next_projectBox .next_project {height: 470px;} .next_chapter, .prev_chapter {right: 50%;margin-right: -600px;font-size: 18px;} .next_chapter strong, .prev_chapter strong {font-size: 20px;} .fLogo {width: 220px;left: 50%;margin-left: -110px;} .f_leftSide {width: 50%;} .contacts_box .contact_item label {padding: 0 0 20px;font-size: 18px;} .contacts_box .contact_item p {font-size: 18px;} .contacts_box {width: 310px;} .contacts_box .contact_item .show_map {display: block;} .site_navigation .navigation_wrap {width: 600px;left: 50%;margin-left: -300px;} .closePopup {right: 50%;margin-right: -600px;} .main_content_block {overflow: visible;} .mainSlogan, .mainSlogan > span:nth-of-type(1), .mainSlogan > span:nth-of-type(2), .mainSlogan > span:nth-of-type(2) > span, .mainSlogan div > span, .mainSlogan div > span > span:first-child, .mainSlogan div > span > span:last-child {font-size: 100px;} .mainSlogan div {left: 380px;} .p_content, .facts_box {width: calc(100% - 355px);padding: 0 0 0 355px;} .dArrow {left: 145px;} .viewbox[data-view="2"] {height: 940px;} .macbook_vidget {width: 980px;top: 255px;} .best_proj_slide:before {height: 300px;} .proj_back {height: 740px;} .best_proj_slide[data-slide="1"] .proj_content .proj_title {width: 780px;height: 230px;margin: 0 0 0 -430px;} .best_proj_slide[data-slide="1"] .proj_content .proj_title > div {width: 780px;top: -273px;background-position: 0 0;} .best_proj_slide[data-slide="2"] .proj_content .proj_title {width: 460px;height: 75px;left: 50%;margin: 0 0 0 -280px;top: 150px;} .best_proj_slide[data-slide="2"] .proj_content .proj_title > div {background-position: 0 0;} .best_proj_slide[data-slide="3"] .proj_content .proj_title {height: 210px;right: 50%;margin-right: -530px;top: 40px;} .best_proj_slide[data-slide="3"] .proj_content .proj_title > div {background-position: 0 0;} .spielberg_dino, .phone_vidget {display: block;} .macbook_vidget .macB_cont_wrap {width: 736px;height: 460px;left: 121px;top: 41px;} .best_proj_slide[data-slide="1"] .project_link, .best_proj_slide[data-slide="3"] .project_link {margin-left: -187px;} .best_proj_slide[data-slide="2"] .project_link {margin-left: 31px;} .viewbox[data-view="4"] {min-height: 950px;} #portfolioGrid .swiper-slide .project_preview .project_title {font-size: 24px;} .swiper-container {height: 100%;padding-bottom: 0;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 794px;} .swiper-button-next, .swiper-container-rtl .swiper-button-prev {left: 825px;} .back_title {width: 500px;top: 155px;left: 50%;margin-left: -600px;font-size: 164px;} .slogan {width: 225px;top: 260px;left: 50%;right: auto;margin-left: -520px;} .slogan > span {text-indent: 0px;text-align: right;} #portfolioGrid .swiper-slide .project_preview {height: 480px;} .portfolio_viewport {width: 900px;height: 650px;top: 200px;margin-right: 0;right: 0;} .swiper-container-horizontal > .swiper-scrollbar {width: 835px;bottom: 40px;} .commercial {width: 570px;top: 112px;right: 50%;margin-right: -260px;padding-right: 90px;} .commercial span:first-child {font-size: 26px;top: 19px;} .commercial span:last-child {width: 370px;height: 280px;top: -90px;right: -285px;} .chapter_description {margin-top: 130px;} .chapter_description article {padding-left: 400px;} .next_projectBox.show {height: 470px;} .next_projectBox.show .next_project .next_label {top: 200px;} .next_projectBox.show .next_project h3 {top: 250px;} .portfolio_item:first-child {margin-top: 140px;} .best_proj_slide.active[data-slide="1"] .macbook_vidget, .best_proj_slide.active[data-slide="3"] .macbook_vidget {margin-left: -600px;} .best_proj_slide.active[data-slide="2"] .macbook_vidget {margin-left: -380px;} .best_proj_slide.active[data-slide="1"] .proj_content .proj_title {margin-left: -390px;} .best_proj_slide.active[data-slide="2"] .proj_content .proj_title {margin-left: -230px;} .best_proj_slide.active[data-slide="3"] .proj_content .proj_title {margin-right: -600px;} [data-view="3"].start .commercial {padding-left: calc((100% - 660px) / 2);} } @media screen and (min-width: 1600px) { .portfolio_viewport {width: 1000px;} .slogan {margin-left: -460px;} } @media screen and (min-width: 1700px) { .portfolio_viewport {width: 1180px;} .slogan {margin-left: -570px;} } @media screen and (min-width: 1890px) { .portfolio_viewport {width: 1180px;height: 650px;top: 200px;margin-right: 0;right: 0;} .swiper-container-horizontal > .swiper-scrollbar {bottom: 40px;width: 836px;left: 0;} .slogan {margin-left: -490px;} }