.home-button, .logo { text-indent: -9999pt } .swiper-container-vertical>.swiper-wrapper { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column } .swiper-wrapper { z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; transform-style: preserve-3d } .swiper-slide, .swiper-wrapper { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; height: 100% } .swiper-container-multirow>.swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-fles-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap } .swiper-container-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto } .swiper-slide { transform-style: preserve-3d; -ms-flex: 0 0 auto; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; position: relative } .swiper-wp8-horizontal { touch-action: pan-y } .swiper-wp8-vertical { touch-action: pan-x } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,"); left: 10px; 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,") } .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,") } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,"); right: 10px; left: auto } .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,") } .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,") } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10 } .swiper-pagination.swiper-pagination-hidden { opacity: 0 } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2 } .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-vertical>.swiper-pagination { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) } .swiper-container-vertical>.swiper-pagination .swiper-pagination-bullet { margin: 5px 0; display: block } .swiper-container-horizontal>.swiper-pagination { bottom: 10px; left: 0; width: 100% } .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin: 0 5px } .swiper-container-3d { -webkit-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) } .swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .swiper-container-fade .swiper-slide { pointer-events: none } .swiper-container-fade .swiper-slide-active { pointer-events: auto } .swiper-container-cube { overflow: visible } .swiper-container-cube .swiper-slide { pointer-events: none; visibility: hidden; -webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100% } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0 } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next+.swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px) } .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { z-index: 0 } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, .1) } .swiper-container-horizontal>.swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98% } .swiper-container-vertical>.swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98% } .fa-ul>li, .swiper-container, .swiper-wrapper { position: relative } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, .5); border-radius: 10px; left: 0; top: 0 } .swiper-scrollbar-cursor-drag { cursor: move } .swiper-container { margin: 0 auto; overflow: hidden; direction: ltr; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; z-index: 1 } .swiper-wrapper { width: 100%; -moz-transition-property: -moz-transform, left, top; -moz-transition-duration: 0s; -moz-transform: translate3d(0, 0, 0); -moz-transition-timing-function: ease; -o-transition-property: -o-transform, left, top; -o-transition-duration: 0s; -o-transition-timing-function: ease; -o-transform: translate(0, 0); -ms-transition-property: -ms-transform, left, top; -ms-transition-duration: 0s; -ms-transform: translate3d(0, 0, 0); -ms-transition-timing-function: ease; -webkit-transition-property: -webkit-transform, left, top; transition-property: transform, left, top; -webkit-transition-duration: 0s; transition-duration: 0s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition-timing-function: ease; transition-timing-function: ease; box-sizing: content-box } .swiper-slide, .swiper-wrapper { -webkit-box-sizing: content-box } .swiper-free-mode>.swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto } .swiper-slide { float: left; box-sizing: content-box } .swiper-wp8-horizontal { -ms-touch-action: pan-y } .swiper-wp8-vertical { -ms-touch-action: pan-x } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline } html { line-height: 1 } ol, ul { list-style: none } table { border-collapse: collapse; border-spacing: 0 } caption, td, th { text-align: left; font-weight: 400; vertical-align: middle } .fa-fw, .fa-li { text-align: center } blockquote, q { quotes: none } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none } a img { border: none } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block } .fa, .fa-stack { display: inline-block } /*! * Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ @font-face { font-family: FontAwesome; src: url(./fonts/fontawesome-webfont.eot?v=4.3.0); src: url(./fonts/fontawesome-webfont.eot?#iefix&v=4.3.0) format("embedded-opentype"), url(./fonts/fontawesome-webfont.woff2?v=4.3.0) format("woff2"), url(./fonts/fontawesome-webfont.woff?v=4.3.0) format("woff"), url(./fonts/fontawesome-webfont.ttf?v=4.3.0) format("truetype"), url(./fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular) format("svg"); font-weight: 400; font-style: normal } .fa { font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0) } .fa-lg { font-size: 1.33333em; line-height: .75em; vertical-align: -15% } .fa-2x { font-size: 2em } .fa-3x { font-size: 3em } .fa-4x { font-size: 4em } .fa-5x { font-size: 5em } .fa-fw { width: 1.28571em } .fa-ul { padding-left: 0; margin-left: 2.14286em; list-style-type: none } .fa-li { position: absolute; left: -2.14286em; width: 2.14286em; top: .14286em } .fa-li.fa-lg { left: -1.85714em } .fa-border { padding: .2em .25em .15em; border: .08em solid #eee; border-radius: .1em } .pull-right { float: right } .pull-left { float: left } .fa.pull-left { margin-right: .3em } .fa.pull-right { margin-left: .3em } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8) } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg) } } .fa-rotate-90 { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg) } .fa-rotate-180 { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .fa-rotate-270 { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg) } .fa-flip-horizontal { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0); -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1) } .fa-flip-vertical { filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=2); -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1) } :root .fa-flip-horizontal, :root .fa-flip-vertical, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-rotate-90 { -webkit-filter: none; filter: none } .fa-stack { position: relative; width: 2em; height: 2em; line-height: 2em; vertical-align: middle } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center } .fa-stack-1x { line-height: inherit } .fa-stack-2x { font-size: 2em } .fa-inverse { color: #fff } .fa-glass:before { content: "" } .fa-music:before { content: "" } .fa-search:before { content: "" } .fa-envelope-o:before { content: "" } .fa-heart:before { content: "" } .fa-star:before { content: "" } .fa-star-o:before { content: "" } .fa-user:before { content: "" } .fa-film:before { content: "" } .fa-th-large:before { content: "" } .fa-th:before { content: "" } .fa-th-list:before { content: "" } .fa-check:before { content: "" } .fa-close:before, .fa-remove:before, .fa-times:before { content: "" } .fa-search-plus:before { content: "" } .fa-search-minus:before { content: "" } .fa-power-off:before { content: "" } .fa-signal:before { content: "" } .fa-cog:before, .fa-gear:before { content: "" } .fa-trash-o:before { content: "" } .fa-home:before { content: "" } .fa-file-o:before { content: "" } .fa-clock-o:before { content: "" } .fa-road:before { content: "" } .fa-download:before { content: "" } .fa-arrow-circle-o-down:before { content: "" } .fa-arrow-circle-o-up:before { content: "" } .fa-inbox:before { content: "" } .fa-play-circle-o:before { content: "" } .fa-repeat:before, .fa-rotate-right:before { content: "" } .fa-refresh:before { content: "" } .fa-list-alt:before { content: "" } .fa-lock:before { content: "" } .fa-flag:before { content: "" } .fa-headphones:before { content: "" } .fa-volume-off:before { content: "" } .fa-volume-down:before { content: "" } .fa-volume-up:before { content: "" } .fa-qrcode:before { content: "" } .fa-barcode:before { content: "" } .fa-tag:before { content: "" } .fa-tags:before { content: "" } .fa-book:before { content: "" } .fa-bookmark:before { content: "" } .fa-print:before { content: "" } .fa-camera:before { content: "" } .fa-font:before { content: "" } .fa-bold:before { content: "" } .fa-italic:before { content: "" } .fa-text-height:before { content: "" } .fa-text-width:before { content: "" } .fa-align-left:before { content: "" } .fa-align-center:before { content: "" } .fa-align-right:before { content: "" } .fa-align-justify:before { content: "" } .fa-list:before { content: "" } .fa-dedent:before, .fa-outdent:before { content: "" } .fa-indent:before { content: "" } .fa-video-camera:before { content: "" } .fa-image:before, .fa-photo:before, .fa-picture-o:before { content: "" } .fa-pencil:before { content: "" } .fa-map-marker:before { content: "" } .fa-adjust:before { content: "" } .fa-tint:before { content: "" } .fa-edit:before, .fa-pencil-square-o:before { content: "" } .fa-share-square-o:before { content: "" } .fa-check-square-o:before { content: "" } .fa-arrows:before { content: "" } .fa-step-backward:before { content: "" } .fa-fast-backward:before { content: "" } .fa-backward:before { content: "" } .fa-play:before { content: "" } .fa-pause:before { content: "" } .fa-stop:before { content: "" } .fa-forward:before { content: "" } .fa-fast-forward:before { content: "" } .fa-step-forward:before { content: "" } .fa-eject:before { content: "" } .fa-chevron-left:before { content: "" } .fa-chevron-right:before { content: "" } .fa-plus-circle:before { content: "" } .fa-minus-circle:before { content: "" } .fa-times-circle:before { content: "" } .fa-check-circle:before { content: "" } .fa-question-circle:before { content: "" } .fa-info-circle:before { content: "" } .fa-crosshairs:before { content: "" } .fa-times-circle-o:before { content: "" } .fa-check-circle-o:before { content: "" } .fa-ban:before { content: "" } .fa-arrow-left:before { content: "" } .fa-arrow-right:before { content: "" } .fa-arrow-up:before { content: "" } .fa-arrow-down:before { content: "" } .fa-mail-forward:before, .fa-share:before { content: "" } .fa-expand:before { content: "" } .fa-compress:before { content: "" } .fa-plus:before { content: "" } .fa-minus:before { content: "" } .fa-asterisk:before { content: "" } .fa-exclamation-circle:before { content: "" } .fa-gift:before { content: "" } .fa-leaf:before { content: "" } .fa-fire:before { content: "" } .fa-eye:before { content: "" } .fa-eye-slash:before { content: "" } .fa-exclamation-triangle:before, .fa-warning:before { content: "" } .fa-plane:before { content: "" } .fa-calendar:before { content: "" } .fa-random:before { content: "" } .fa-comment:before { content: "" } .fa-magnet:before { content: "" } .fa-chevron-up:before { content: "" } .fa-chevron-down:before { content: "" } .fa-retweet:before { content: "" } .fa-shopping-cart:before { content: "" } .fa-folder:before { content: "" } .fa-folder-open:before { content: "" } .fa-arrows-v:before { content: "" } .fa-arrows-h:before { content: "" } .fa-bar-chart-o:before, .fa-bar-chart:before { content: "" } .fa-twitter-square:before { content: "" } .fa-facebook-square:before { content: "" } .fa-camera-retro:before { content: "" } .fa-key:before { content: "" } .fa-cogs:before, .fa-gears:before { content: "" } .fa-comments:before { content: "" } .fa-thumbs-o-up:before { content: "" } .fa-thumbs-o-down:before { content: "" } .fa-star-half:before { content: "" } .fa-heart-o:before { content: "" } .fa-sign-out:before { content: "" } .fa-linkedin-square:before { content: "" } .fa-thumb-tack:before { content: "" } .fa-external-link:before { content: "" } .fa-sign-in:before { content: "" } .fa-trophy:before { content: "" } .fa-github-square:before { content: "" } .fa-upload:before { content: "" } .fa-lemon-o:before { content: "" } .fa-phone:before { content: "" } .fa-square-o:before { content: "" } .fa-bookmark-o:before { content: "" } .fa-phone-square:before { content: "" } .fa-twitter:before { content: "" } .fa-facebook-f:before, .fa-facebook:before { content: "" } .fa-github:before { content: "" } .fa-unlock:before { content: "" } .fa-credit-card:before { content: "" } .fa-rss:before { content: "" } .fa-hdd-o:before { content: "" } .fa-bullhorn:before { content: "" } .fa-bell:before { content: "" } .fa-certificate:before { content: "" } .fa-hand-o-right:before { content: "" } .fa-hand-o-left:before { content: "" } .fa-hand-o-up:before { content: "" } .fa-hand-o-down:before { content: "" } .fa-arrow-circle-left:before { content: "" } .fa-arrow-circle-right:before { content: "" } .fa-arrow-circle-up:before { content: "" } .fa-arrow-circle-down:before { content: "" } .fa-globe:before { content: "" } .fa-wrench:before { content: "" } .fa-tasks:before { content: "" } .fa-filter:before { content: "" } .fa-briefcase:before { content: "" } .fa-arrows-alt:before { content: "" } .fa-group:before, .fa-users:before { content: "" } .fa-chain:before, .fa-link:before { content: "" } .fa-cloud:before { content: "" } .fa-flask:before { content: "" } .fa-cut:before, .fa-scissors:before { content: "" } .fa-copy:before, .fa-files-o:before { content: "" } .fa-paperclip:before { content: "" } .fa-floppy-o:before, .fa-save:before { content: "" } .fa-square:before { content: "" } .fa-bars:before, .fa-navicon:before, .fa-reorder:before { content: "" } .fa-list-ul:before { content: "" } .fa-list-ol:before { content: "" } .fa-strikethrough:before { content: "" } .fa-underline:before { content: "" } .fa-table:before { content: "" } .fa-magic:before { content: "" } .fa-truck:before { content: "" } .fa-pinterest:before { content: "" } .fa-pinterest-square:before { content: "" } .fa-google-plus-square:before { content: "" } .fa-google-plus:before { content: "" } .fa-money:before { content: "" } .fa-caret-down:before { content: "" } .fa-caret-up:before { content: "" } .fa-caret-left:before { content: "" } .fa-caret-right:before { content: "" } .fa-columns:before { content: "" } .fa-sort:before, .fa-unsorted:before { content: "" } .fa-sort-desc:before, .fa-sort-down:before { content: "" } .fa-sort-asc:before, .fa-sort-up:before { content: "" } .fa-envelope:before { content: "" } .fa-linkedin:before { content: "" } .fa-rotate-left:before, .fa-undo:before { content: "" } .fa-gavel:before, .fa-legal:before { content: "" } .fa-dashboard:before, .fa-tachometer:before { content: "" } .fa-comment-o:before { content: "" } .fa-comments-o:before { content: "" } .fa-bolt:before, .fa-flash:before { content: "" } .fa-sitemap:before { content: "" } .fa-umbrella:before { content: "" } .fa-clipboard:before, .fa-paste:before { content: "" } .fa-lightbulb-o:before { content: "" } .fa-exchange:before { content: "" } .fa-cloud-download:before { content: "" } .fa-cloud-upload:before { content: "" } .fa-user-md:before { content: "" } .fa-stethoscope:before { content: "" } .fa-suitcase:before { content: "" } .fa-bell-o:before { content: "" } .fa-coffee:before { content: "" } .fa-cutlery:before { content: "" } .fa-file-text-o:before { content: "" } .fa-building-o:before { content: "" } .fa-hospital-o:before { content: "" } .fa-ambulance:before { content: "" } .fa-medkit:before { content: "" } .fa-fighter-jet:before { content: "" } .fa-beer:before { content: "" } .fa-h-square:before { content: "" } .fa-plus-square:before { content: "" } .fa-angle-double-left:before { content: "" } .fa-angle-double-right:before { content: "" } .fa-angle-double-up:before { content: "" } .fa-angle-double-down:before { content: "" } .fa-angle-left:before { content: "" } .fa-angle-right:before { content: "" } .fa-angle-up:before { content: "" } .fa-angle-down:before { content: "" } .fa-desktop:before { content: "" } .fa-laptop:before { content: "" } .fa-tablet:before { content: "" } .fa-mobile-phone:before, .fa-mobile:before { content: "" } .fa-circle-o:before { content: "" } .fa-quote-left:before { content: "" } .fa-quote-right:before { content: "" } .fa-spinner:before { content: "" } .fa-circle:before { content: "" } .fa-mail-reply:before, .fa-reply:before { content: "" } .fa-github-alt:before { content: "" } .fa-folder-o:before { content: "" } .fa-folder-open-o:before { content: "" } .fa-smile-o:before { content: "" } .fa-frown-o:before { content: "" } .fa-meh-o:before { content: "" } .fa-gamepad:before { content: "" } .fa-keyboard-o:before { content: "" } .fa-flag-o:before { content: "" } .fa-flag-checkered:before { content: "" } .fa-terminal:before { content: "" } .fa-code:before { content: "" } .fa-mail-reply-all:before, .fa-reply-all:before { content: "" } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: "" } .fa-location-arrow:before { content: "" } .fa-crop:before { content: "" } .fa-code-fork:before { content: "" } .fa-chain-broken:before, .fa-unlink:before { content: "" } .fa-question:before { content: "" } .fa-info:before { content: "" } .fa-exclamation:before { content: "" } .fa-superscript:before { content: "" } .fa-subscript:before { content: "" } .fa-eraser:before { content: "" } .fa-puzzle-piece:before { content: "" } .fa-microphone:before { content: "" } .fa-microphone-slash:before { content: "" } .fa-shield:before { content: "" } .fa-calendar-o:before { content: "" } .fa-fire-extinguisher:before { content: "" } .fa-rocket:before { content: "" } .fa-maxcdn:before { content: "" } .fa-chevron-circle-left:before { content: "" } .fa-chevron-circle-right:before { content: "" } .fa-chevron-circle-up:before { content: "" } .fa-chevron-circle-down:before { content: "" } .fa-html5:before { content: "" } .fa-css3:before { content: "" } .fa-anchor:before { content: "" } .fa-unlock-alt:before { content: "" } .fa-bullseye:before { content: "" } .fa-ellipsis-h:before { content: "" } .fa-ellipsis-v:before { content: "" } .fa-rss-square:before { content: "" } .fa-play-circle:before { content: "" } .fa-ticket:before { content: "" } .fa-minus-square:before { content: "" } .fa-minus-square-o:before { content: "" } .fa-level-up:before { content: "" } .fa-level-down:before { content: "" } .fa-check-square:before { content: "" } .fa-pencil-square:before { content: "" } .fa-external-link-square:before { content: "" } .fa-share-square:before { content: "" } .fa-compass:before { content: "" } .fa-caret-square-o-down:before, .fa-toggle-down:before { content: "" } .fa-caret-square-o-up:before, .fa-toggle-up:before { content: "" } .fa-caret-square-o-right:before, .fa-toggle-right:before { content: "" } .fa-eur:before, .fa-euro:before { content: "" } .fa-gbp:before { content: "" } .fa-dollar:before, .fa-usd:before { content: "" } .fa-inr:before, .fa-rupee:before { content: "" } .fa-cny:before, .fa-jpy:before, .fa-rmb:before, .fa-yen:before { content: "" } .fa-rouble:before, .fa-rub:before, .fa-ruble:before { content: "" } .fa-krw:before, .fa-won:before { content: "" } .fa-bitcoin:before, .fa-btc:before { content: "" } .fa-file:before { content: "" } .fa-file-text:before { content: "" } .fa-sort-alpha-asc:before { content: "" } .fa-sort-alpha-desc:before { content: "" } .fa-sort-amount-asc:before { content: "" } .fa-sort-amount-desc:before { content: "" } .fa-sort-numeric-asc:before { content: "" } .fa-sort-numeric-desc:before { content: "" } .fa-thumbs-up:before { content: "" } .fa-thumbs-down:before { content: "" } .fa-youtube-square:before { content: "" } .fa-youtube:before { content: "" } .fa-xing:before { content: "" } .fa-xing-square:before { content: "" } .fa-youtube-play:before { content: "" } .fa-dropbox:before { content: "" } .fa-stack-overflow:before { content: "" } .fa-instagram:before { content: "" } .fa-flickr:before { content: "" } .fa-adn:before { content: "" } .fa-bitbucket:before { content: "" } .fa-bitbucket-square:before { content: "" } .fa-tumblr:before { content: "" } .fa-tumblr-square:before { content: "" } .fa-long-arrow-down:before { content: "" } .fa-long-arrow-up:before { content: "" } .fa-long-arrow-left:before { content: "" } .fa-long-arrow-right:before { content: "" } .fa-apple:before { content: "" } .fa-windows:before { content: "" } .fa-android:before { content: "" } .fa-linux:before { content: "" } .fa-dribbble:before { content: "" } .fa-skype:before { content: "" } .fa-foursquare:before { content: "" } .fa-trello:before { content: "" } .fa-female:before { content: "" } .fa-male:before { content: "" } .fa-gittip:before, .fa-gratipay:before { content: "" } .fa-sun-o:before { content: "" } .fa-moon-o:before { content: "" } .fa-archive:before { content: "" } .fa-bug:before { content: "" } .fa-vk:before { content: "" } .fa-weibo:before { content: "" } .fa-renren:before { content: "" } .fa-pagelines:before { content: "" } .fa-stack-exchange:before { content: "" } .fa-arrow-circle-o-right:before { content: "" } .fa-arrow-circle-o-left:before { content: "" } .fa-caret-square-o-left:before, .fa-toggle-left:before { content: "" } .fa-dot-circle-o:before { content: "" } .fa-wheelchair:before { content: "" } .fa-vimeo-square:before { content: "" } .fa-try:before, .fa-turkish-lira:before { content: "" } .fa-plus-square-o:before { content: "" } .fa-space-shuttle:before { content: "" } .fa-slack:before { content: "" } .fa-envelope-square:before { content: "" } .fa-wordpress:before { content: "" } .fa-openid:before { content: "" } .fa-bank:before, .fa-institution:before, .fa-university:before { content: "" } .fa-graduation-cap:before, .fa-mortar-board:before { content: "" } .fa-yahoo:before { content: "" } .fa-google:before { content: "" } .fa-reddit:before { content: "" } .fa-reddit-square:before { content: "" } .fa-stumbleupon-circle:before { content: "" } .fa-stumbleupon:before { content: "" } .fa-delicious:before { content: "" } .fa-digg:before { content: "" } .fa-pied-piper:before { content: "" } .fa-pied-piper-alt:before { content: "" } .fa-drupal:before { content: "" } .fa-joomla:before { content: "" } .fa-language:before { content: "" } .fa-fax:before { content: "" } .fa-building:before { content: "" } .fa-child:before { content: "" } .fa-paw:before { content: "" } .fa-spoon:before { content: "" } .fa-cube:before { content: "" } .fa-cubes:before { content: "" } .fa-behance:before { content: "" } .fa-behance-square:before { content: "" } .fa-steam:before { content: "" } .fa-steam-square:before { content: "" } .fa-recycle:before { content: "" } .fa-automobile:before, .fa-car:before { content: "" } .fa-cab:before, .fa-taxi:before { content: "" } .fa-tree:before { content: "" } .fa-spotify:before { content: "" } .fa-deviantart:before { content: "" } .fa-soundcloud:before { content: "" } .fa-database:before { content: "" } .fa-file-pdf-o:before { content: "" } .fa-file-word-o:before { content: "" } .fa-file-excel-o:before { content: "" } .fa-file-powerpoint-o:before { content: "" } .fa-file-image-o:before, .fa-file-photo-o:before, .fa-file-picture-o:before { content: "" } .fa-file-archive-o:before, .fa-file-zip-o:before { content: "" } .fa-file-audio-o:before, .fa-file-sound-o:before { content: "" } .fa-file-movie-o:before, .fa-file-video-o:before { content: "" } .fa-file-code-o:before { content: "" } .fa-vine:before { content: "" } .fa-codepen:before { content: "" } .fa-jsfiddle:before { content: "" } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-ring:before, .fa-life-saver:before, .fa-support:before { content: "" } .fa-circle-o-notch:before { content: "" } .fa-ra:before, .fa-rebel:before { content: "" } .fa-empire:before, .fa-ge:before { content: "" } .fa-git-square:before { content: "" } .fa-git:before { content: "" } .fa-hacker-news:before { content: "" } .fa-tencent-weibo:before { content: "" } .fa-qq:before { content: "" } .fa-wechat:before, .fa-weixin:before { content: "" } .fa-paper-plane:before, .fa-send:before { content: "" } .fa-paper-plane-o:before, .fa-send-o:before { content: "" } .fa-history:before { content: "" } .fa-circle-thin:before, .fa-genderless:before { content: "" } .fa-header:before { content: "" } .fa-paragraph:before { content: "" } .fa-sliders:before { content: "" } .fa-share-alt:before { content: "" } .fa-share-alt-square:before { content: "" } .fa-bomb:before { content: "" } .fa-futbol-o:before, .fa-soccer-ball-o:before { content: "" } .fa-tty:before { content: "" } .fa-binoculars:before { content: "" } .fa-plug:before { content: "" } .fa-slideshare:before { content: "" } .fa-twitch:before { content: "" } .fa-yelp:before { content: "" } .fa-newspaper-o:before { content: "" } .fa-wifi:before { content: "" } .fa-calculator:before { content: "" } .fa-paypal:before { content: "" } .fa-google-wallet:before { content: "" } .fa-cc-visa:before { content: "" } .fa-cc-mastercard:before { content: "" } .fa-cc-discover:before { content: "" } .fa-cc-amex:before { content: "" } .fa-cc-paypal:before { content: "" } .fa-cc-stripe:before { content: "" } .fa-bell-slash:before { content: "" } .fa-bell-slash-o:before { content: "" } .fa-trash:before { content: "" } .fa-copyright:before { content: "" } .fa-at:before { content: "" } .fa-eyedropper:before { content: "" } .fa-paint-brush:before { content: "" } .fa-birthday-cake:before { content: "" } .fa-area-chart:before { content: "" } .fa-pie-chart:before { content: "" } .fa-line-chart:before { content: "" } .fa-lastfm:before { content: "" } .fa-lastfm-square:before { content: "" } .fa-toggle-off:before { content: "" } .fa-toggle-on:before { content: "" } .fa-bicycle:before { content: "" } .fa-bus:before { content: "" } .fa-ioxhost:before { content: "" } .fa-angellist:before { content: "" } .fa-cc:before { content: "" } .fa-ils:before, .fa-shekel:before, .fa-sheqel:before { content: "" } .fa-meanpath:before { content: "" } .fa-buysellads:before { content: "" } .fa-connectdevelop:before { content: "" } .fa-dashcube:before { content: "" } .fa-forumbee:before { content: "" } .fa-leanpub:before { content: "" } .fa-sellsy:before { content: "" } .fa-shirtsinbulk:before { content: "" } .fa-simplybuilt:before { content: "" } .fa-skyatlas:before { content: "" } .fa-cart-plus:before { content: "" } .fa-cart-arrow-down:before { content: "" } .fa-diamond:before { content: "" } .fa-ship:before { content: "" } .fa-user-secret:before { content: "" } .fa-motorcycle:before { content: "" } .fa-street-view:before { content: "" } .fa-heartbeat:before { content: "" } .fa-venus:before { content: "" } .fa-mars:before { content: "" } .fa-mercury:before { content: "" } .fa-transgender:before { content: "" } .fa-transgender-alt:before { content: "" } .fa-venus-double:before { content: "" } .fa-mars-double:before { content: "" } .fa-venus-mars:before { content: "" } .fa-mars-stroke:before { content: "" } .fa-mars-stroke-v:before { content: "" } .fa-mars-stroke-h:before { content: "" } .fa-neuter:before { content: "" } .fa-facebook-official:before { content: "" } .fa-pinterest-p:before { content: "" } .fa-whatsapp:before { content: "" } .fa-server:before { content: "" } .fa-user-plus:before { content: "" } .fa-user-times:before { content: "" } .fa-bed:before, .fa-hotel:before { content: "" } .fa-viacoin:before { content: "" } .fa-train:before { content: "" } .fa-subway:before { content: "" } .fa-medium:before { content: "" } @font-face { font-family: GothamBold; src: url(./fonts/gotham/gothabold.eot); src: url(./fonts/gotham/gothabold.eot?#iefix) format("embedded-opentype"), url(./fonts/gotham/gothabold.woff2) format("woff2"), url(./fonts/gotham/gothabold.woff) format("woff"), url(./fonts/gotham/gothabold.ttf) format("truetype"), url(./fonts/gotham/gothabold.svg#GothamBold) format("svg"); font-weight: 400; font-style: normal } @font-face { font-family: GothamBook; src: url(./fonts/gotham/gothabook.eot); src: url(./fonts/gotham/gothabook.eot?#iefix) format("embedded-opentype"), url(./fonts/gotham/gothabook.woff2) format("woff2"), url(./fonts/gotham/gothabook.woff) format("woff"), url(./fonts/gotham/gothabook.ttf) format("truetype"), url(./fonts/gotham/gothabook.svg#GothamBook) format("svg"); font-weight: 400; font-style: normal } @font-face { font-family: GothamMedium; src: url(./fonts/gotham/gothamedium.eot); src: url(./fonts/gotham/gothamedium.eot?#iefix) format("embedded-opentype"), url(./fonts/gotham/gothamedium.woff2) format("woff2"), url(./fonts/gotham/gothamedium.woff) format("woff"), url(./fonts/gotham/gothamedium.ttf) format("truetype"), url(./fonts/gotham/gothamedium.svg#GothamMedium) format("svg"); font-weight: 400; font-style: normal } @font-face { font-family: GothamLight; src: url(./fonts/gotham/gothalight.eot); src: url(./fonts/gotham/gothalight.eot?#iefix) format("embedded-opentype"), url(./fonts/gotham/gothalight.woff2) format("woff2"), url(./fonts/gotham/gothalight.woff) format("woff"), url(./fonts/gotham/gothalight.ttf) format("truetype"), url(./fonts/gotham/gothalight.svg#GothamLight) format("svg"); font-weight: 400; font-style: normal } * { box-sizing: border-box } *, .left-nav-menu .news-slide { -webkit-box-sizing: border-box } a { text-decoration: none } .clearfix:after, .clearfix:before, .project-list .gallery:after, .project-list .gallery:before, .project-list:after, .project-list:before, .view-by:after, .view-by:before, .view-filter:after, .view-filter:before, .wrapper:after, .wrapper:before { content: '.'; display: block; height: 0; font-size: 0; visibility: hidden } .collapser:after, .menu-toggler:after { text-align: center; color: #fff; content: '\f0c9' } .clearfix:after, .project-list .gallery:after, .project-list:after, .view-by:after, .view-filter:after, .wrapper:after { clear: both } body, html { height: 100%; font-size: 9px; font-family: Arial; font-weight: 700 } .wrapper { width: 100%; min-height: 100%; padding-left: 369px } .sticky-wrapper { float: left; width: 295px; margin-left: -295px } .menu-toggler { display: none; width: 69px; height: 69px; background: #00589b; position: fixed; left: 0; top: 0; z-index: 120; cursor: pointer } .menu-toggler:after { display: block; width: 69px; height: 69px; line-height: 69px; font: normal normal normal 35px/69px FontAwesome } .collapser { display: none; position: absolute; right: 69px; top: 52px; width: 37px; height: 37px; cursor: pointer; z-index: 160 } .collapser:after { display: block; width: 37px; height: 37px; line-height: 37px; font: normal normal normal 32px/37px FontAwesome } nav.left-nav { float: left; width: 369px; left: 0; min-height: 100%; background-color: #00589b; padding: 53px 69px 81px; position: absolute; z-index: 140; user-select: none } .main-slider, nav.left-nav { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none } nav.left-nav .search-expand { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; z-index: 190; display: none } nav.left-nav .search-expand .expanded-content { width: 100%; height: 100%; padding: 84px 69px 0; background-color: #4d4d4d; position: relative; left: 0; top: 0 } nav.left-nav .search-expand .expanded-content .expander { width: 100%; height: 43px; position: absolute; left: 0; top: 0; border-top: 1px solid #074c7e; border-bottom: 1px solid #414141; background-color: #00589b; cursor: pointer } nav.left-nav .search-expand .expanded-content .expander i { color: #fff; font-size: 2.5em; display: block; width: 24px; height: 26px; line-height: 26px; position: absolute; left: 50%; top: 50%; margin: -13px 0 0 -12px; text-align: center } nav.left-nav .search-expand .expanded-content .expander:after, nav.left-nav .search-expand .expanded-content .expander:before { content: ''; display: block; width: 100%; height: 1px; position: absolute; left: 0 } nav.left-nav .search-expand .expanded-content .expander:before { top: 0; background-color: #0061ac } nav.left-nav .search-expand .expanded-content .expander:after { bottom: 0; background-color: #0062ad } nav.left-nav .search-expand .expanded-content form { width: 100% } nav.left-nav .search-expand .expanded-content form .form-section { width: 100%; margin-bottom: 25px } nav.left-nav .search-expand .expanded-content form .form-section label { display: block; font-size: 1.8em; font-family: GothamBook; color: #999; margin-bottom: 3px } nav.left-nav .search-expand .expanded-content form .form-section .form-filter { width: 100%; position: relative } nav.left-nav .search-expand .expanded-content form .form-section .form-filter i { position: absolute; right: 16px; top: 50%; color: #4d4d4d; font-size: 3em; width: 11px; height: 30px; line-height: 30px; margin-top: -15px } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .select-box { width: 100% } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .select-box select { width: 100%; height: 60px; line-height: 40px; padding: 10px 18px; border: 0; outline: 0; background-color: #363636; font-size: 1.8em; font-family: GothamBook; color: #666; -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); -webkit-user-select: none } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .option-list { display: none; position: absolute; max-height: 226px; left: 0; top: 100%; z-index: 80; width: 100%; background-color: #363636; overflow: auto; border: 1px solid grey; border-top: 0 } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .option-list ul { width: 100%; padding: 0 } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .option-list ul li { padding: 8px 15px; display: block; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.6em; font-family: GothamBook; line-height: 20px; color: #666; margin-top: 2px } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .option-list ul li:first-child { margin-top: 0 } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .option-list ul li:hover { background-color: grey; color: #fff } nav.left-nav .search-expand .expanded-content form .form-section .form-filter.top .option-list { top: auto; bottom: 100%; border-top: 1px solid grey; border-bottom: 0 } nav.left-nav .search-expand .expanded-content form .form-section input { width: 100%; height: 60px; line-height: 40px; padding: 10px 43px 10px 18px; border: 0; outline: 0; background-color: #363636; font-size: 1.8em; font-family: GothamBook; color: #666 } nav.left-nav .search-expand .expanded-content form .form-section input:-moz-placeholder { color: #666 } nav.left-nav .search-expand .expanded-content form .form-section input::-moz-placeholder { color: #666 } nav.left-nav .search-expand .expanded-content form .form-section input:-ms-input-placeholder { color: #666 } nav.left-nav .search-expand .expanded-content form .form-section input::-webkit-input-placeholder { color: #666 } nav.left-nav .search-expand .expanded-content form .form-section.active input { color: #fff; background-color: grey } nav.left-nav .search-expand .expanded-content form .form-section.active input:-moz-placeholder { color: #fff } nav.left-nav .search-expand .expanded-content form .form-section.active input::-moz-placeholder { color: #fff } nav.left-nav .search-expand .expanded-content form .form-section.active input:-ms-input-placeholder { color: #fff } nav.left-nav .search-expand .expanded-content form .form-section.active input::-webkit-input-placeholder { color: #fff } nav.left-nav .search-expand .expanded-content form .form-section.active i { color: #ccc } nav.left-nav .search-expand .expanded-content form .form-section.active .option-list { display: block } .logo { display: block; width: 193px; height: 35px; background: url(./img/metalyapi_logo.png) no-repeat; position: relative; z-index: 160 } .home-button { display: block; width: 36px; height: 37px; background: url(./img/home-button.png) no-repeat; position: absolute; right: 69px; top: 52px; z-index: 160 } .quick-search { width: 100%; height: 67px; border: 1px solid #1975bb; margin-top: 40px; position: relative; z-index: 160 } .quick-search input[name='q'] { -webkit-appearance: none; display: block; width: 100%; height: 100%; line-height: 65px; border: 0; font-size: 2.8em; color: #fff; background-color: transparent; padding: 0 15px; outline: 0 } .quick-search input[name='q']:-moz-placeholder { color: #0c7ed4 } .quick-search input[name='q']::-moz-placeholder { color: #0c7ed4 } .quick-search input[name='q']:-ms-input-placeholder { color: #0c7ed4 } .quick-search input[name='q']::-webkit-input-placeholder { color: #0c7ed4 } .quick-search input[name='q'] .active, .quick-search input[name='q']:focus { background-color: #096cb7 } .quick-search input[name='q'] .active:-moz-placeholder, .quick-search input[name='q']:focus:-moz-placeholder { color: #fff } .quick-search input[name='q'] .active::-moz-placeholder, .quick-search input[name='q']:focus::-moz-placeholder { color: #fff } .quick-search input[name='q'] .active:-ms-input-placeholder, .quick-search input[name='q']:focus:-ms-input-placeholder { color: #fff } .quick-search input[name='q'] .active::-webkit-input-placeholder, .quick-search input[name='q']:focus::-webkit-input-placeholder { color: #fff } .left-nav-menu { width: 100%; margin-top: 35px } .left-nav-menu ul.menu { width: 100% } .left-nav-menu ul.menu>li { width: 100%; padding: 10px 0 } .left-nav-menu ul.menu>li:first-child { padding-top: 0 } .left-nav-menu ul.menu>li>.separate { height: 1px; line-height: 1; font-size: 0; overflow: hidden; margin: 8px 0; padding: 0; background-color: #1975bb } .left-nav-menu ul.menu>li>a { display: block; font-size: 2.4em; color: #9ec3df; font-family: GothamBook } .left-nav-menu ul.menu>li>a:hover { color: #fff } .left-nav-menu .news-slide { width: 100%; margin-top: 24px; box-sizing: border-box; position: relative } .left-nav-menu .news-slide .news-sld-wrap { width: 100%; overflow: hidden } .left-nav-menu .news-slide .next, .left-nav-menu .news-slide .prev { width: 18px; height: 34px; font-size: 4em; text-align: center; line-height: 34px; cursor: pointer; color: #1882d4; background: url(./img/sld-arrow.png) no-repeat } .left-nav-menu .news-slide .prev { position: absolute; left: -43px; top: 50%; margin-top: -17px; background-position: 0 0 } .left-nav-menu .news-slide .prev:hover { background-position: 0 -34px } .left-nav-menu .news-slide .next { position: absolute; right: -43px; top: 50%; margin-top: -17px; background-position: 0 -68px } .left-nav-menu .news-slide .next:hover { background-position: 0 -102px } .left-nav-menu .news-slide ul { width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box } .left-nav-menu .news-slide ul li { display: block; min-height: 80px; position: relative; padding: 0 0 20px 93px; -webkit-box-sizing: border-box; box-sizing: border-box } .left-nav-menu .news-slide ul li img { display: block; width: 80px; height: 80px; border: 1px solid #1a86d9; position: absolute; left: 0; top: 0 } .left-nav-menu .news-slide ul li h3 { max-height: 60px; overflow: hidden; font-size: 2em; color: #4db2ff; line-height: 20px; font-family: GothamBook; position: relative; top: -2px } .left-nav-menu .news-slide ul li a { font-family: GothamBook; font-size: 1.6em; color: #9ec3df; position: absolute; left: 93px; bottom: 0 } .left-nav-menu .news-slide ul li a:hover { color: #fff } .social { position: absolute; left: 69px; bottom: 45px } .social a { display: inline-block; color: #1975bb; font-size: 3.6em; line-height: 38px; margin-right: 18px } .scaled .location, .world-map { display: none } .social a:hover { color: #fff } .content { float: left; width: 100%; min-height: 100% } .content.white-map { background: url(./img/white-map-bg.jpg) center center no-repeat #fff; background-size: cover } .content.fixed { height: 100%; position: fixed; left: 0; top: 0; z-index: 10; padding-left: 369px } .map-stage, .world-map { width: 100%; height: 100%; position: absolute; top: 0 } .map-stage { right: 0; z-index: 400; background: #d9d9d9 } .location span.bottom i, .location span.top i { right: 50% } .world-map { left: 0; overflow: hidden; background: url(./img/world-map.png) center center no-repeat #414141; background-size: 100% 100% } .world-map img { width: 100%; position: relative; z-index: 10 } .scaled .location.active { display: block } .location { position: absolute; z-index: 30; width: 8px; height: 8px; border-radius: 10px; left: 54.502%; top: 52.314%; background-color: #00589b } .location span { display: none; font-size: 1.6em; font-family: GothamBook; font-weight: 700; color: #343436; position: absolute; cursor: default } .location span.bottom { bottom: -45px; left: 50% } .location span.top { top: -45px; left: 50% } .location span.left { top: 50%; right: 100%; margin-top: -19px } .location span.left i { left: -7px } .location span.right { top: 50%; left: 100%; margin-top: -19px } .location span.right i { right: -7px } .location span i { display: inline-block; position: relative; padding: 0 12px; line-height: 38px; text-align: center; background-color: #e5e6f1; white-space: nowrap; cursor: default } .location.active { border-color: #d41515; background-color: #d41515; border-width: 2px } .location.active span { display: inline-block!important } .control-div { position: absolute; cursor: pointer; display: block; top: 145px; z-index: 300; width: 15px; height: 27px; background-image: url(/Themes/Metalyapi/Styles/img/proj-gateway-arrow-small.png); background-repeat: no-repeat; background-size: contain; background-color: #00589b; -webkit-transition: all .6s; transition: all .6s } .main-slider, .main-slider .visual-slide { width: 100%; height: 100%; position: relative } .control-div.open { left: 68px; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg) } .control-div.closed { left: 0; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } .main-slider { padding: 69px; user-select: none } .main-slider .visual-slide { z-index: 40 } .main-slider .visual-slide:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNjAwNTgyIiB5MT0iMS4wNzA0MjgiIHgyPSIwLjM5OTQxOCIgeTI9Ii0wLjA3MDQyOCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk2OTY5NiIgc3RvcC1vcGFjaXR5PSIwLjQiLz48c3RvcCBvZmZzZXQ9IjMwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-size: 100%; background-image: -webkit-linear-gradient(100deg, rgba(150, 150, 150, .4) 0, rgba(255, 255, 255, 0) 30%); background-image: linear-gradient(-10deg, rgba(150, 150, 150, .4) 0, rgba(255, 255, 255, 0) 30%) } .main-slider .visual-slide .pager { width: auto; height: 25px; display: block; position: absolute; right: 80px; bottom: 20px; z-index: 120 } .main-slider .visual-slide .pager li { float: left; width: 25px; height: 17px; border: 3px solid #fff; margin: 4px 18px 4px 0; cursor: pointer; text-indent: -99999pt } .main-slider .visual-slide .pager li.active { margin: 0 18px 0 0; height: 25px; background-color: #fff; cursor: default } .main-slider .visual-slide .pager li.all { border: 0; margin: 0; text-indent: 0; font-size: 2.2em; line-height: 25px; font-weight: 700; color: #fff; font-family: GothamBold } .main-slider .visual-slide .pager li.all a { color: #fff } .main-slider .visual-slide .project-sld { position: relative } .main-slider .visual-slide .project-sld .project-img { display: none } .main-slider .visual-slide .project-sld .project-map { width: 100%; height: 136px; position: absolute; left: 0; top: 63px; z-index: 20 } .main-slider .visual-slide .project-sld .project-map .map { width: 100%; height: 136px; overflow: hidden; position: absolute; left: 0; top: 0; z-index: 20 } .main-slider .visual-slide .project-sld .project-map .desc { position: relative; z-index: 40; max-width: 65%; display: inline-block; line-height: 52px; padding: 16px 28px; background-color: #fff; cursor: default; font-size: 4.2em; font-family: GothamLight; letter-spacing: -2px; color: #00589b } .primaryAction, .project-info .project-name, .sub-title, .tabs ul li a { letter-spacing: 0.5px; word-spacing: -1px } .filter .ribbon ul li, .filter h3 { font-family: Arial } .main-slider .visual-slide .project-sld .project-gateway { height: auto; width: auto; max-width: 60%; line-height: 35px; padding: 0 82px 0 33px; background-color: #00589b; text-align: center; display: inline-block; color: #fff; font-size: 4.8em; position: absolute; right: 0; top: 280px; z-index: 40 } .main-slider .visual-slide .project-sld .project-gateway:after { content: ''; display: block; width: 25px; height: 44px; position: absolute; right: 32px; top: 50%; margin-top: -22px; background: url(./img/proj-gateway-arrow.png) no-repeat } .filter { position: absolute; width: 100%; height: 69px; background: #fff; padding: 0 65px } .filter h3 { height: 26px; line-height: 26px; text-align: center; font-size: 1.2em; color: #00589b } .filter.bottom:after, .filter.bottom:before, .filter.left:after, .filter.left:before, .filter.right:after, .filter.right:before, .filter.top:after, .filter.top:before { display: block; content: ''; width: 15%; height: 69px; position: absolute; z-index: 20 } .filter.left, .filter.right { width: 69px; overflow: hidden; z-index: 60; top: 0; padding: 27px 0 } .filter.left:after, .filter.left:before, .filter.right:after, .filter.right:before { width: 69px; height: 15% } .filter.left h3, .filter.right h3 { position: absolute; left: 100%; top: 0; transform-origin: 0 0; transform: rotate(90deg) } .filter.left .ribbon ul li div, .filter.left h3, .filter.right .ribbon ul li div, .filter.right h3 { -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg) } .filter.left .ribbon, .filter.right .ribbon { width: 38px; height: 100% } .filter.left .ribbon .indicator, .filter.right .ribbon .indicator { width: 38px; height: 120px; left: 0; top: 50%; margin-top: -60px } .filter.left .ribbon .indicator span.next, .filter.left .ribbon .indicator span.prev, .filter.right .ribbon .indicator span.next, .filter.right .ribbon .indicator span.prev { background: url(./img/slider-custom-arrow-vertical.png) 0 center no-repeat; display: block; content: ''; width: 38px; height: 12px; position: absolute; left: 50%; z-index: 80; margin-left: -19px } .filter.left .ribbon .indicator span.prev, .filter.right .ribbon .indicator span.prev { top: -24px; background-position: -114px 0 } .filter.left .ribbon .indicator span.next, .filter.right .ribbon .indicator span.next { bottom: -24px; background-position: -40px 0 } .filter.left .ribbon ul, .filter.right .ribbon ul { display: block } .filter.left .ribbon ul li, .filter.right .ribbon ul li { display: block; width: auto; position: relative; padding: 15px 0 } .filter.left .ribbon ul li div, .filter.right .ribbon ul li div { padding: 0 18px; position: absolute; left: 100%; top: 15px; white-space: nowrap; transform-origin: 0 0; transform: rotate(90deg) } .filter.left { left: 0; padding-left: 5px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg) } .filter.left:before { left: 0; top: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-size: 100%; background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to top, rgba(255, 255, 255, 0), #fff) } .filter.left:after { left: 0; bottom: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-size: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff) } .filter.right { right: 0; padding-left: 5px } .filter.right:before { left: 0; top: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-size: 100%; background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(bottom, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to top, rgba(255, 255, 255, 0), #fff) } .filter.right:after { left: 0; bottom: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-size: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff) } .filter.bottom, .filter.top { left: 0; z-index: 40; padding: 0 69px } .filter.bottom .ribbon .indicator, .filter.top .ribbon .indicator { width: 120px; height: 38px; left: 50%; top: 0; margin-left: -60px } .filter.bottom .ribbon .indicator span.next, .filter.bottom .ribbon .indicator span.prev, .filter.top .ribbon .indicator span.next, .filter.top .ribbon .indicator span.prev { background: url(./img/slider-custom-arrow.png) 0 center no-repeat; display: block; content: ''; width: 12px; height: 38px; position: absolute; top: -1px; z-index: 80 } .filter .ribbon, .filter.bottom .ribbon ul li div, .filter.top .ribbon ul li div { position: relative } .filter .ribbon ul:after, .news-gallery ul:after, .tabs ul:after { content: ""; clear: both } .filter.bottom:after, .filter.bottom:before, .filter.top:after, .filter.top:before { top: 0; background-size: 100% } .filter.bottom .ribbon .indicator span.prev, .filter.top .ribbon .indicator span.prev { left: -24px; background-position: 0 0 } .filter.bottom .ribbon .indicator span.next, .filter.top .ribbon .indicator span.next { right: -24px; background-position: 0 -76px } .filter.bottom .ribbon ul li, .filter.top .ribbon ul li { padding: 0 15px } .filter.top { top: 0 } .filter.top:before { left: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #fff) } .filter.top:after { right: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff) } .filter.bottom { bottom: -5px } .filter.bottom:before { left: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuNSIgeDI9IjAuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-image: -webkit-gradient(linear, right top, left top, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #fff) } .filter.bottom:after { right: 0; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA=); background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #fff); background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #fff) } .filter .ribbon { width: 100%; overflow: hidden; background-color: #DDF0FF } .filter .ribbon .indicator { position: absolute; z-index: 120; border: 1px solid #00589b; background-color: rgba(0, 255, 255, .09) } .filter .ribbon .indicator.red-border { border-color: red } .filter .ribbon ul { width: 100% } .filter .ribbon ul:after { display: table } .filter .ribbon ul li div span, .filter .ribbon ul li:first-child div span.prev, .filter .ribbon ul li:last-child div span.next { display: none } .filter .ribbon ul li { -webkit-box-sizing: content-box; box-sizing: content-box; position: relative; z-index: 20; float: left; width: auto; height: 38px; line-height: 36px; color: #666; cursor: pointer; font-size: 1.8em } .filter .ribbon ul li div { padding: 1px 18px; height: 38px; text-align: center } .filter .ribbon ul li.slick-center, .filter .ribbon ul li.swiper-slide-active { z-index: 40 } .filter .ribbon ul li.slick-center div, .filter .ribbon ul li.swiper-slide-active div { color: #333 } .project-info { width: 100%; height: 100%; position: relative } .project-info .control-div { top: 104px } .project-info .control-div.open { left: 1px } .project-info .control-div.closed { left: 0 } .project-info .map-stage.scaled { width: 232.5px; height: 170px; right: 79px; top: 155px } .project-info .world-map { display: block } .project-info .project-name { max-width: 50%; position: absolute; left: 0; top: 126px; height: 80px; padding: 0 60px 0 69px; line-height: 80px; color: #fff; background-color: #00589b; text-align: center; font-size: 4.2em; font-family: GothamLight } .project-info .summary-info { padding: 20px 25px 20px 69px; position: absolute; left: 0; top: 226px; background-color: #fff; background-color: rgba(255, 255, 255, .82); z-index: 80 } .project-info .summary-info h2 { font-family: Arial; font-size: 2.8em; font-weight: 700; color: #00589b } .project-info .summary-info .info-line { color: #4c4c4c; line-height: 20px; min-height: 20px; padding-left: 155px; position: relative; margin: 10px 0 0; font-family: Arial; font-size: 1.6em; font-weight: 500 } .project-info2 .summary-info2 .info-line2 { color: #4c4c4c; line-height: 20px; min-height: 20px; padding-left: 252px; position: relative; margin: 10px 0 0; font-family: Arial; font-size: 1.6em; font-weight: 500 } .project-info2 .summary-info2 .info-line2 span2 { position: absolute; left: 0; top: 0; display: block; min-width: 155px; font-size: 1.4em; color: #999 } .project-info .summary-info .info-line span { position: absolute; left: 0; top: 0; display: block; min-width: 155px; font-size: 1.4em; color: #999 } .project-info .gallery-thumb { position: absolute; left: 0; bottom: 0; height: 10%; width: 100%; white-space: nowrap; text-align: center; background-color: rgba(240, 248, 255, .52) } .project-info .gallery-thumb .galleryscrl { height: 100%; overflow: hidden; overflow-x: scroll; white-space: nowrap; text-align: center } .project-info .gallery-thumb img { cursor: pointer; height: 100%; float: none } .project-info .gallery-thumb img:last-child { margin-right: 0 } .project-info .gallery-thumb img.active { filter: alpha(Opacity=30); opacity: .3; cursor: default } .project-info .project-img { width: 100%; height: 100% } .project-info .project-img .p-img { display: none } .news-list { width: 25%; background-color: #e6e6e6; position: absolute; right: 0; top: 133px; z-index: 80 } .news-gallery, .news-gallery ul, .news-list ul, .news-list ul li { width: 100% } .news-list ul li { display: block; background-color: #e6e6e6 } .news-list ul li.active, .news-list ul li:hover { background-color: #d9d9d9 } .news-list ul li a { display: block; width: 100%; padding: 18px 25px; font-size: 1.9em; font-family: GothamBook; color: #666; line-height: 23px } .news-files a, .nws-detail p { font-family: GothamBook; line-height: 24px } .news-list ul li.active a { color: #1a1a1a } .nws-detail { margin: 0; max-width: 100%; font-weight: 400 } .nws-detail a { color: #00589b } .nws-detail a:hover { text-decoration: underline } .nws-detail p { color: #333; margin-bottom: 24px; font-size: 1.8em } .news-gallery { margin-top: 40px } .news-gallery ul:after { display: table } .news-gallery ul li { float: left; margin: 0 14px 14px 0 } .news-gallery ul li a { display: block; width: 214px; height: 155px } .news-gallery ul li a img { display: block } .news-gallery ul li a:hover { filter: alpha(Opacity=60); opacity: .6 } .news-files { width: 100%; margin: 0 } .news-files a { display: inline-block; margin: 0 10px 0 0; color: #00589b; font-size: 2em; padding: 8px 0 } .news-files a.pdf { padding-left: 50px; background: url(./img/pdf-ico.png) left top no-repeat } .news-files a:hover { text-decoration: underline } .sub-content { width: 100%; min-height: 100%; padding: 69px; position: relative; overflow: hidden } .sub-content .headline { position: absolute!important; left: 69px; top: 69px; width: 100%; height: 183px } .sub-content .headline .headline-wrap { width: 100%; height: 183px; padding: 0 138px 0 0 } .sub-content .headline .headline-wrap .headline-content { width: 100%; height: 183px } .sub-content .headline .sub-headline { display: none } .sub-title { letter-spacing: 0.5px; display: inline-block; width: auto; max-width: 75%; margin: 59px 0 40px -69px; background-color: #00589b; background-color: rgba(0, 88, 155, .82); font-size: 4.4em; line-height: 45px; color: #fff; padding: 20px 20px 20px 69px } .tabs, .tabs ul { width: 100% } .content.fixed .sub-title { position: absolute; left: 0; top: 128px; margin: 0; letter-spacing: 0.5px; } .tabs { margin-top: -23px; position: relative; z-index: 60 } .tabs ul:after { display: table } .tabs ul li { float: left; margin-right: 2px } .tabs ul li a { position: relative; float: left; width: auto; line-height: 27px; padding: 9px 18px; background-color: #e6e6e6; text-align: center; font-size: 1.9em; font-family: GothamBook; color: #262626 } .tabs ul li a:hover, .tabs ul li.active a { background-color: #00589b; color: #fff } .tabs ul li a i { display: block; font-size: .8em; text-align: center; line-height: 18px } .tabs ul li.active a { padding-bottom: 18px; margin-top: -9px } .tabs ul li.active a:after { content: ''; display: block; width: 0; height: 0; border-width: 0 10px 10px; border-color: transparent transparent #fff; border-style: solid; position: absolute; left: 50%; bottom: 0; margin-left: -10px } .tab-content { margin-top: 50px; font-weight: 400 } .tab-content>div { width: 100%; display: none; position: relative } .tab-content>div.with-img { padding-right: 0 } .tab-content>div.with-img img.sub-img { float: right; right: 0; top: 0; max-width: 25%; width: 100% } .tab-content>div.active { display: block } .tab-content>div a { color: #00589b } .tab-content>div a:hover { text-decoration: underline } .tab-content>div p { color: #333; line-height: 24px; margin-bottom: 24px; font-family: GothamBook; font-size: 1.8em } .contact-map { width: 100%; height: 386px; background-color: #ececec } .contact-address, .contact-phone, .h-info { margin-top: 24px; margin-bottom: -5px; color: #4c4c4c; font-size: 1.6em; font-family: GothamBook; line-height: 22px } .project-list .list ul li, .view-by .view-by-label, .view-filter .label-order, .view-filter .order-filters ul li div { font-family: Arial } .contact-address a, .contact-phone a, .h-info a { color: #00589b } .contact-address span, .contact-phone span, .h-info span { color: #999; display: inline-block; min-width: 40px } .view-by ul { float: left; width: auto; height: 71px } .view-by ul li { float: left; width: 71px; height: 71px; margin: 0 20px 0 0 } .view-by ul li div { width: 71px; height: 71px; cursor: pointer; background: url(./img/view-sprite.png) left top no-repeat #e6e6e6 } .view-by ul li.active div, .view-by ul li:hover div { background-color: #4d4d4d } .view-by ul li.v1 div { background-position: 0 0 } .view-by ul li.v1.active div, .view-by ul li.v1:hover div { background-position: 0 -71px } .view-by ul li.v2 div { background-position: 0 -142px } .view-by ul li.v2.active div, .view-by ul li.v2:hover div { background-position: 0 -213px } .view-by ul li.v3 div { background-position: 0 -284px } .view-by ul li.v3.active div, .view-by ul li.v3:hover div { background-position: 0 -355px } .view-by .view-by-label { display: inline-block; font-size: 1.3em; line-height: 19px; color: #a6a6a6; margin: 26px 0 0 } .view-by .view-by-label b { font-weight: 700; color: #000 } .view-filter { margin-top: 30px } .view-filter .label-order { margin: 60px 0 0; width: 100%; font-size: 1.4em; color: #a6a6a6 } .view-filter .order-filters { width: 100%; margin: 0 } .view-filter .order-filters ul { float: left } .view-filter .order-filters ul li { float: left; margin: 0 40px 0 0 } .view-filter .order-filters ul li div { font-size: 1.6em; color: #4d4d4d; cursor: pointer } .view-filter .order-filters ul li:hover div { color: #00589b } .view-filter .order-filters ul li.active div { color: #00589b; font-weight: 700; cursor: default } img.grayscale { filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%) } img.grayscale.disabled { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0) } .project-list { width: 100%; margin: 26px 0 0 } .project-list .gallery, .project-list .list { display: none } .project-list .gallery.active, .project-list .list.active { display: block } .project-list .gallery { white-space: nowrap; overflow: auto } .project-list .gallery .col { width: 520px; margin: 0 20px 0 0; display: inline-block; vertical-align: top } .project-list .gallery .col .item { display: block; width: 520px; height: 210px; margin: 0 0 20px; position: relative } .project-list .gallery .col .item .pimage { max-width: 520px; max-height: 210px; height: 100%; width: auto } .project-list .gallery .col .item .title { display: none; position: absolute; left: -10px; top: 23px; color: #00589b; font-size: 1.8em; line-height: 3px; background-color: #fff; padding: 12px; -webkit-transition: all .6s ease; -webkit-backface-visibility: hidden } .project-list .gallery .col .item .title>span { display: block; position: absolute; top: 100%; left: 0; padding: 4px 12px; background-color: #fff; line-height: 16px; font-size: .8em; font-color: #00589b } .project-list .gallery .col .item .title>span i { font-style: italic; font-size: .7em; color: #b2b2b2 } .project-list .gallery .col .item img { filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%); -webkit-transition: all .6s ease; transition: all .6s ease; -webkit-backface-visibility: hidden } .project-list .gallery .col .item.twice img { float: right } .project-list .gallery .col .item.twice img:first-child { float: left; max-width: 100% } .project-list .gallery .col .item:hover .title { display: block } .project-list .gallery .col .item:hover img { filter: url("data:image/svg+xml;utf8,#grayscale"); -webkit-filter: grayscale(0) } .project-list .list { width: 100%; padding-left: 0 } .project-list .list ul { width: 100% } .project-list .list ul li { display: block; width: 100%; margin-top: 1px } .project-list .list ul li:first-child { margin-top: 0 } .project-list .list ul li>span { font-size: 1em; display: block; line-height: 22px; padding: 5px 8px; cursor: pointer } .project-list .list ul li.active>span { background-color: #00589b; color: #fff } .project-list .list ul li .infos { display: none; width: 100%; background-color: #fff } .project-list .list ul li .infos>div { padding: 5px 5px 5px 140px; display: table; vertical-align: middle; position: relative; margin: 1px 0 0; min-height: 30px; line-height: 20px } .project-list .list ul li .infos>div:first-child { margin-top: 0 } .project-list .list ul li .infos>div span { width: 130px; background-color: #00589b; position: absolute; left: 0; padding: 5px 0 5px 8px; top: 50%; margin-top: -15px; display: inline-block } #imagelightbox { cursor: pointer; position: fixed; z-index: 10000; -ms-touch-action: none; touch-action: none; -webkit-box-shadow: 0 0 3.125em rgba(0, 0, 0, .75); box-shadow: 0 0 3.125em rgba(0, 0, 0, .75) } #imagelightbox-loading, #imagelightbox-loading div { border-radius: 50% } #imagelightbox-loading { width: 2.5em; height: 2.5em; background-color: #444; background-color: rgba(0, 0, 0, .5); position: fixed; z-index: 10003; top: 50%; left: 50%; padding: .625em; margin: -1.25em 0 0 -1.25em; -webkit-box-shadow: 0 0 2.5em rgba(0, 0, 0, .75); box-shadow: 0 0 2.5em rgba(0, 0, 0, .75) } #imagelightbox-loading div { width: 1.25em; height: 1.25em; background-color: #fff; -webkit-animation: imagelightbox-loading .5s ease infinite; animation: imagelightbox-loading .5s ease infinite } @-webkit-keyframes imagelightbox-loading { from, to { opacity: .5; -webkit-transform: scale(.75) } 50% { opacity: 1; -webkit-transform: scale(1) } } @keyframes imagelightbox-loading { from, to { opacity: .5; -webkit-transform: scale(.75); transform: scale(.75) } 50% { opacity: 1; -webkit-transform: scale(1); transform: scale(1) } } #imagelightbox-overlay { background-color: #fff; background-color: rgba(0, 88, 155, .9); position: fixed; z-index: 9998; top: 0; right: 0; bottom: 0; left: 0 } #imagelightbox-close { width: 2.5em; height: 2.5em; text-align: left; background-color: #666; border-radius: 50%; position: fixed; z-index: 10002; top: 2.5em; right: 2.5em; -webkit-transition: color .3s ease; transition: color .3s ease } #imagelightbox-close:focus, #imagelightbox-close:hover { background-color: #111 } #imagelightbox-close:after, #imagelightbox-close:before { width: 2px; background-color: #fff; content: ''; position: absolute; top: 20%; bottom: 20%; left: 50%; margin-left: -1px } #imagelightbox-close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); -ms-transform: rotate(45deg) } #imagelightbox-close:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -ms-transform: rotate(-45deg) } #imagelightbox-caption { text-align: center; color: #fff; background-color: rgba(0, 0, 0, .5); position: fixed; z-index: 10001; left: 0; right: 0; bottom: 0; padding: .625em; font-family: GothamBook } #imagelightbox-nav { background-color: #444; background-color: rgba(0, 0, 0, .5); border-radius: 20px; position: fixed; z-index: 10001; left: 50%; bottom: 3.75em; padding: .313em; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%) } #imagelightbox-nav button { width: 1em; height: 1em; background-color: transparent; border: 1px solid #fff; border-radius: 50%; display: inline-block; margin: 0 .313em } #imagelightbox-nav button.active { background-color: #fff } .imagelightbox-arrow { width: 3.75em; height: 7.5em; background-color: #444; background-color: rgba(0, 0, 0, .5); vertical-align: middle; display: none; position: fixed; z-index: 10001; top: 50%; margin-top: -3.75em; border: 0 } .imagelightbox-arrow:focus, .imagelightbox-arrow:hover { background-color: #666; background-color: rgba(0, 0, 0, .75) } .imagelightbox-arrow:active { background-color: #111 } .imagelightbox-arrow-left { left: 2.5em } .imagelightbox-arrow-right { right: 2.5em } .imagelightbox-arrow:before { width: 0; height: 0; border: 1em solid transparent; content: ''; display: inline-block; margin-bottom: -.125em } .imagelightbox-arrow-left:before { border-left: none; border-right-color: #fff; margin-left: -.313em } .imagelightbox-arrow-right:before { border-right: none; border-left-color: #fff; margin-right: -.313em } #imagelightbox-caption, #imagelightbox-close, #imagelightbox-loading, #imagelightbox-nav, #imagelightbox-overlay, .imagelightbox-arrow { -webkit-animation: fade-in .25s linear; animation: fade-in .25s linear } @-webkit-keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @media only screen and (max-width: 41.25em) { #container { width: 100% } #imagelightbox-close { top: 1.25em; right: 1.25em } #imagelightbox-nav { bottom: 1.25em } .imagelightbox-arrow { width: 2.5em; height: 3.75em; margin-top: -2.75em } .imagelightbox-arrow-left { left: 1.25em } .imagelightbox-arrow-right { right: 1.25em } } @media only screen and (max-width: 20em) { .imagelightbox-arrow-left { left: 0 } .imagelightbox-arrow-right { right: 0 } } @media screen and (min-width: 2401px) { .wrapper, .wrapper .content.fixed { padding-left: 369px } .wrapper nav.left-nav { width: 369px!important } } @media screen and (max-width: 2400px) { .wrapper, .wrapper .content.fixed { padding-left: 295px } .wrapper nav.left-nav { width: 295px!important } .logo { width: 170px; height: 31px; background: url(./img/metalyapi_logo-small.png) left top no-repeat; margin-top: 0 } .collapser { top: 31px; right: 25px } .left-nav-menu { margin-top: 25px } .left-nav-menu ul.menu>li { padding: 6px 0 } .left-nav-menu ul.menu>li>a { font-size: 1.7em } .left-nav-menu .news-slide ul li h3 { font-size: 1.5em } .left-nav-menu .news-slide ul li a { font-size: 1.4em } .left-nav-menu .news-slide .next { right: -29px } .left-nav-menu .news-slide .prev { left: -29px } nav.left-nav { padding: 35px 40px 81px } nav.left-nav .search-expand .expanded-content { padding: 84px 40px 0 } nav.left-nav .search-expand .expanded-content form .form-section { margin-bottom: 10px } nav.left-nav .search-expand .expanded-content form .form-section label { font-size: 1.5em } nav.left-nav .search-expand .expanded-content form .form-section .form-filter input { height: 44px; padding: 10px 43px 10px 18px; line-height: 24px; font-size: 1.5em } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .select-box { width: 100% } nav.left-nav .search-expand .expanded-content form .form-section .form-filter .select-box select { width: 100%; height: 44px; line-height: 24px; border: 0; outline: 0; background-color: #363636; font-size: 1.5em; font-family: GothamBook; color: #666; -webkit-appearance: button; -webkit-border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1); -webkit-user-select: none } .quick-search { margin-top: 30px; height: 52px } .quick-search input[name='q'] { height: 50px; line-height: 50px; font-size: 2.2em; padding: 0 10px } .social { left: 40px } .filter h3 { font-size: 1.1em } .filter .ribbon ul li { font-size: 1.5em } .filter .ribbon ul li div { padding: 1px 12px } .main-slider .visual-slide .project-sld .project-map .desc { font-size: 2.5em; line-height: 25px; padding: 13px 25px } .main-slider .visual-slide .project-sld .project-gateway { font-size: 2.3em; height: auto; width: auto; max-width: 60%; line-height: 35px; padding: 0 55px 0 20px } .main-slider .visual-slide .project-sld .project-gateway:after { width: 15px; height: 26px; background: url(./img/proj-gateway-arrow-small.png) no-repeat; margin-top: -13px; right: 25px } .sub-content { padding: 20px } .sub-content .headline { left: 20px; top: 20px } .sub-content .headline .headline-wrap { padding: 0 40px 0 0 } .content.fixed .sub-title { top: 96px } .project-info .summary-info { padding: 15px 20px; top: 200px } .project-info .summary-info h2 { font-size: 2.2em } .project-info .summary-info .info-line { font-size: 1.4em } .project-info .map-stage.scaled { right: 60px } .sub-title { padding: 10px 20px; margin: 76px 0 25px -20px; font-size: 2.5em; line-height: 25px; font-weight: 400 } .tab-content { margin-top: 25px; font-weight: 400 } .nws-detail p, .tab-content>div p { font-size: 1.5em; line-height: 20px; margin-bottom: 20px } .contact-address, .contact-phone, .h-info { font-size: 1.5em; line-height: 20px; margin-top: 20px } .tabs { margin-top: 5px } .tabs ul li a { letter-spacing: 0.5px; font-size: 1.6em; line-height: 22px; padding: 8px 14px } .tabs ul li a i { font-size: .8em; line-height: 16px } .tabs ul li.active a { margin-top: -10px } } .label, .primaryAction { font-family: Gotham } @media screen and (max-width: 1200px) { .wrapper, .wrapper .content.fixed { padding-left: 0 } .wrapper .nws-detail p, .wrapper .tab-content>div p { font-size: 1.4em; line-height: 20px; margin-bottom: 20px } .collapser, .menu-toggler { display: block } .wrapper nav.left-nav { left: -295px; width: 295px; z-index: 180; position: fixed; top: 0 } .wrapper .news-list ul li a { font-size: 1.5em; padding: 10px 20px } .wrapper .sub-title { font-size: 3em; line-height: 36px; padding-left: 20px; margin-left: -20px } .wrapper .contact-address, .wrapper .contact-phone, .wrapper .h-info { font-size: 1.4em; line-height: 20px; margin-top: 20px } .wrapper .sub-content { padding: 20px } .wrapper .sub-content .headline { left: 20px; top: 20px } .wrapper .sub-content .headline .headline-wrap { padding-right: 40px } } @media screen and (max-width: 992px) { .tab-content>div.with-img { padding-right: 0 } .tab-content>div.with-img img.sub-img { position: static; display: block; max-width: 100%; margin-bottom: 20px } .wrapper .sub-title { max-width: 100%; font-size: 2.2em; line-height: 28px } .nws-detail { max-width: 100% } .news-list { position: static; width: 100%; margin-top: 20px } .main-slider .visual-slide .project-sld .project-gateway { top: 0; font-size: 1.5em; height: auto; line-height: 25px } .main-slider .visual-slide .project-sld .project-gateway:after { width: 11px; height: 20px; margin-top: -11px; background-size: contain } .main-slider .visual-slide .project-sld .project-map .desc { opacity: 0 } .main-slider .visual-slide .pager li { width: 15px; height: 15px } .main-slider .visual-slide .pager li.active { height: 15px; margin: 4px 18px 4px 0 } .main-slider .visual-slide .pager li.all { font-size: 1.2em; line-height: 25px } .map-stage { display: none } .project-info .summary-info .gallery-thumb { background: rgba(255, 255, 255, .8) } .left-nav-menu { margin-top: 15px } .left-nav-menu ul.menu>li { padding: 4px 0 } .left-nav-menu ul.menu>li>a { font-size: 1.5em } } @media screen and (max-width: 768px) { .main-slider .visual-slide .pager { opacity: 0 } } .primaryAction { background-color: #00589b; color: #fff; display: inline-block; font-size: 1.4em; line-height: 1.4em; padding: .7em; border: 0 } .label { font-size: 12px } .widget-search-form { float: none } #search-results h2 { color: grey; font-size: 14px; padding-bottom: 1.5em } .search-results li { padding-bottom: 2em } .search-results h1 a { color: #00589b; font-size: 20px; font-family: GothamBook; padding-bottom: .5em; display: block } .search-results .metadata, .search-results article p:last-child { display: none } .pager li, .search-results p { font-size: 16px; font-family: GothamBook } .search-results p { color: #4c4c4c } .pager li { line-height: 32px; color: #777; padding: 0 .5em; border: 2px solid #999; max-width: 32px; text-align: center } .project-list .list ul li>span { border: 0; background-color: #f5f5f5; color: #00589b; margin-bottom: 4px } .project-list .list ul li>span a { display: none; color: #fff; font-size: 13px; background-color: #066cb9; line-height: 22px; padding: 0 1em; float: right } .project-list .list ul li.active>span a { display: block } .project-list .list ul li .infos { overflow: hidden; padding-bottom: 30px } .project-list .list ul li .infos>div { font-size: 14px; width: auto; color: #333 } .project-list .list ul li .infos>div span { font-size: 12px; color: #b2b2b2; background: 0 0 } .infos .images img { max-height: 94px; padding-right: 15px } .legal { font-size: 11px; font-family: GothamBook; position: absolute; bottom: 10px; color: #9ec3d7; } .legal:hover { color: #fff; }