.tshirt img, .welcome img { max-width: 100% } 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; vertical-align: baseline } .loader1, .loader2 { border: 3px solid #fff } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:after, blockquote:before, q:after, q:before { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 } .container { margin: 0 auto } .clear { clear: both } .fleft { float: left!important } .fright { float: right!important } .clearfix:after { content: " "; visibility: hidden; display: block; height: 0; clear: both } @font-face { font-family: Roboto; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/0eC6fl06luXEYWpBSJvXCBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F } @font-face { font-family: Roboto; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Fl4y0QdOxyyTHEGMXX8kcRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 } @font-face { font-family: Roboto; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/-L14Jk06m6pUHB-5mXQQnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+1F00-1FFF } @font-face { font-family: Roboto; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/I3S1wsgSg9YCurV6PUkTORJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0370-03FF } @font-face { font-family: Roboto; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/NYDWBdD4gIq26G5XYbHsFBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB } @font-face { font-family: Roboto; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: Roboto; font-style: normal; font-weight: 300; src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215 } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116 } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+1F00-1FFF } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0370-03FF } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF } @font-face { font-family: Roboto; font-style: normal; font-weight: 400; src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215 } .loaded .loader-wrapper { visibility: hidden; opacity: 0; transition: all .3s linear 0s } .loader-wrapper { position: fixed; width: 100%; height: 100%; background: #000; top: 0; left: 0; z-index: 999999 } body.loaded { overflow: auto } .loader1 { border: 3px solid #fff; border-top: 3px solid #000; border-bottom: 3px solid #000; border-radius: 50%; width: 150px; height: 150px; animation: spin 5s linear infinite; position:absolute; left:50%; top:50%; margin:-75px 0 0 -75px; } .loader2 { border: 3px solid #fff; border-top: 3px solid #000; border-bottom: 3px solid #000; border-radius: 50%; width: 90px; height: 90px; animation: spin 5s linear infinite reverse; position:absolute; left:50%; top:50%; margin:-45px 0 0 -45px; /transform:scale(2) } .loader3 { border: 3px solid #fff; border-top: 3px solid #ccc; border-bottom: 3px solid #000; border-radius: 50%; width: 120px; height: 120px; animation: spin2 10s linear infinite ; position:absolute; left:50%; top:50%; margin:-60px 0 0 -60px; /transform:scale(2); /opacity:.3; /filter:blur(2px) } .loader-text { position: absolute; left: 0; top: 70%; text-align: center; width: 100%; /opacity: 0; animation: blink 3s linear infinite; color:#fff } .loader-bdwkator{ width:60px; position:absolute; left:50%; top:50%; margin:-30px 0 0 -30px; } .loader-bdwkator svg{ animation: bdwkator 7s linear infinite ; fill:#fff } @keyframes spin { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(720deg) scale(1.3); /opacity:.5; border-bottom: 3px solid #339966; border-top: 3px solid #cc6633; /filter:blur(3px) } 100% { transform: rotate(1440deg) scale(1); } } @keyframes spin2 { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(720deg) scale(1.3); /opacity:.5; border-bottom: 3px solid #339999; border-top: 3px solid #cc3366; /filter:blur(3px) } 100% { transform: rotate(1440deg) scale(1); } } @keyframes blink { 0%, 100% { opacity: .2 } 50% { opacity: 1 } } @keyframes bdwkator { 0% { fill:#fff } 25% { fill:#339966 } 50% { fill:#cc3366 } 75% { fill:#cccc33 } 100% { fill:#fff } } .email { /margin-left: 30px } .socials-footer { margin-top: 15px } .socials-footer a { display: inline-block!important } a i.fa-facebook { color: #43609c } a i.fa-linkedin { color: #0177b5 } a i.fa-instagram { color: #c92584 } a i.fa-google-plus { color: #dc4e42 } .tshirt img { display: block } .tshirt { position: relative; width: 50%; float: left } .tshirt .second-img { /display: none; position: absolute; top: 0; left: 0; opacity: 0; transition: .3s ease-in-out all } .tshirt:hover .second-img { opacity: 1 } .visible-xs { display: none!important } .portfolio.clients .box { margin-bottom: 40px!important } section.welcome .text-center { text-align: center!important } .error404, a.social, section.welcome { text-align: center } .portfolio-new-list img { /max-width: 100% } .portfolio-image { /overflow: hidden; /max-height: 300px; /text-align: center } .portfolio-image img { /max-height: 300px; /width: auto!important; /margin: 0 auto } body { line-height: 1; font-size: 12px; color: #1b1b1b; /font-family: "Open Sans"; font-family: Roboto, Arial, Tahoma; font-weight: 300; overflow: hidden } .pagewidth { /width: 1100px; / max-width: 1200px; margin: 0 auto; padding: 0 2% } footer .pagewidth { padding: 0 1% } .error404 { padding: 5% 17% } .error404 h1 { border-bottom: 1px #f8f8f8 solid; padding: 30px 0 10px; margin-bottom: 30px } .error404 p { line-height: 1.3; font-size: 16pt } .error404 h2 { font-size: 18pt; margin-top: 30px; padding-top: 10px; border-top: 1px #f8f8f8 solid } .error404 img.cats { width: 100% } a, a:visited { text-decoration: none; color: #1b1b1b } .trajan, h1, h2.header { font-style: normal!important; color: #000!important } :hover, a:hover, a:hover * { transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s } .logo, header.header { transition: .5s linear 0s } h1, h2.header { font-size: 26pt!important; font-family: trajan-sans-pro, sans-serif!important } h2, h3 { font-size: 10pt; font-family: trajan-sans-pro } .trajan { font-family: trajan-sans-pro!important; font-size: 26pt!important } p { margin: 5px 0 } header.header { border-top: 3px #000 solid; /border-bottom: 2px #000 solid; /box-shadow: 0 0 5px #000; position: fixed; z-index: 1000; width: 100%; top: 0 } header.header section.container { /position: relative } .logo { padding: 25px 0 0; float: left } .logo a { display: block } .logo a img { transition: .5s ease all; max-width: 200px } .hamburger { position: absolute; top: 25px; right: 25px; width: 30px; height: 30px; cursor: pointer; z-index: 999 } .hamburger::before { width: 0; height: 0; /background: #000; /content: ""; position: absolute; top: -25px; right: -25px; border-style: solid; border-width: 0 120px 120px 0; border-color: transparent #fff transparent transparent; z-index: -1 } .hamburger-inner { height: 2px; background: #000; margin-bottom: 5px; transition: .5s ease-in-out } .hamburger.opened .hamburger-inner, .hamburger.opened:hover .hamburger-inner, .menu-container { background: #fff } .hamburger:not(.opened):hover .hamburger-inner { /background: #fff } .hamburger.opened { /transform: rotate(-720deg); transition: 1.5s ease-in-out } .hamburger.opened .hamburger-inner:nth-child(2) { opacity: 0; transition: .3s ease-in-out } .hamburger.opened .hamburger-inner:nth-child(1) { transform: rotate(-45deg); margin-top: 12px; transition: .3s ease-in-out } .hamburger.opened .hamburger-inner:nth-child(3) { transform: rotate(45deg); margin-top: -13px; transition: .3s ease-in-out } .menu-container { width: 15%; height: 100%; position: fixed; top: 0; right: -100%; padding: 40px; transition: 2s ease-in-out; box-shadow: 0 0 35px #666 } .menu-container.opened { right: 0; transition: 1s ease-in-out } .menu-container2 { width: 230px; height: 60%; min-height: 600px; visibility: hidden; overflow: hidden; position: fixed; right: 0; top: 0 } .menu-container2.opened { visibility: visible } .menu-container2 .menu-bg { content: ""; width: 200%; height: 100%; background: #000; transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, 0deg); transform-origin: 0 100%; backface-visibility: hidden; transition: .5s all cubic-bezier(.86, 0, .07, 0); transition-delay: .5s; position: absolute } .menu-container2 .menu-bg2, .menu-container2 .menu-bg3 { width: 200%; height: 200%; backface-visibility: hidden; position: absolute; bottom: 0; content: ""; background: #000 } .menu-container2 .menu-bg2 { transform: translate3d(50%, 0, 0) rotate3d(0, 0, 1, 0deg); transform-origin: 0 100%; transition: .5s all cubic-bezier(.86, 0, .07, 0); transition-delay: .5s } .menu-container2 .menu-bg3 { transform: translate3d(0, 0, 0) rotate3d(0, 0, 0, 0deg); transform-origin: 0 100%; transition: .5s all cubic-bezier(.86, 0, .07, 0); transition-delay: .5s } .menu-container2.opened .menu-bg { transform: translate3d(0, -100%, 0) rotate3d(0, 0, 1, 45deg); transform-origin: 0 100%; transition-delay: 0s } .menu-container2.opened .menu-bg2 { transform: translate3d(50%, 0, 0) rotate3d(0, 0, 1, -45deg); transform-origin: 0 100%; transition-delay: 0s } .menu-container2 nav { /position: absolute; margin: 20px 0 0 40px; /left: 40px } .menu-container2 ul li { float: none; padding: 10px 0; transform: translate(150px, 0); opacity: 0; transition: .5s all cubic-bezier(.86, 0, .07, 0) } .menu-container2.opened ul li { transform: translate(0, 0); transition: .5s all cubic-bezier(.1, 0, .07, 0); opacity: 1 } .menu-container2 ul li:nth-child(1) { transition-delay: .4s } .menu-container2 ul li:nth-child(2) { transition-delay: .35s } .menu-container2 ul li:nth-child(3) { transition-delay: .3s } .menu-container2 ul li:nth-child(4) { transition-delay: .25s } .menu-container2 ul li:nth-child(5) { transition-delay: .2s } .menu-container2 ul li:nth-child(6) { transition-delay: .15s } .menu-container2 ul li:nth-child(7) { transition-delay: .1s } .menu-container2 ul li a, .menu-container2 ul li a:hover, .menu-container2 ul:hover li a, header.header .languages { transition: .5s all cubic-bezier(.1, 0, .07, 1) } .menu-container ul li { float: none; padding: 10px 0; /text-align: center } .menu-container2 ul li a { color: #fff; font-size: 11pt; font-family: trajan-sans-pro, sans-serif; position: relative } header.header .contact li a, header.header .contact li span { color: #999; font-family: trajan-sans-pro, sans-serif } .menu-container2 ul:hover li a { opacity: .6 } .menu-container2 ul li a:hover { opacity: 1 } .menu-container2 .languages { visibility: hidden } header.header .languages { position: fixed; top: 30px; right: 70px; transition-delay: 1s } header.header .languages.opened { margin-right: 170px; transition: .3s all cubic-bezier(.1, 0, .07, 1) } header.header .languages li { display: inline-block; float: none; margin-right: 15px; font-family: trajan-sans-pro, sans-serif } header.header .languages li a { position: relative } .menu-container2 ul li a::before, header.header .languages li a::before { height: 2px; width: 0; content: ""; position: absolute; bottom: -3px; right: 0; background: #000; transition: 1s all cubic-bezier(.1, 0, .07, 1) } .menu-container2 ul li a::before { background: #fff } .menu-container2 nav ul li a:hover::before, .menu-container2 nav ul li.selected a::before, header.header .languages li a:hover::before { width: 100%; transition: .7s all cubic-bezier(.1, 0, .07, 1) } header.header .languages li.we-do { margin-right: 50px; letter-spacing: .3em; transition: .3s all cubic-bezier(.1, 0, .07, 1); /cursor: pointer; opacity: 1 } header.header .languages li.we-do:hover { letter-spacing: .6em; transition: .6s all cubic-bezier(.1, 0, .07, 1) } .sticky, .sticky *, .submenu { transition: all .3s linear 0s } header.header .contact { /position: absolute; /bottom: 230px; margin: 20px 0 0 30px } header.header .contact li { display: inline-block; vertical-align: middle } header.header .contact li a { display: block; padding: 5px; margin: 0 5px } header.header .contact li img { width: 20px } header.header .contact li a:hover { display: block; /padding: 10px } header.header .contact li a.phone { font-size: 16px; background: #f8f8f8; border-radius: 16px; color: #666 } a.social { border-radius: 100%; /background: #eee; /border: 1px #ccc solid; display: block; width: 18px; height: 18px; padding: 5px!important } a.social i { vertical-align: middle; font-size: 15px; margin-top: 1px } .contact_form a.social i { font-size: 30px } header.header .contact a:hover { / background: #eee; /color: #1b1b1b } nav.top { margin: 23px 0 0; float: right; clear: right } nav.top li { /display: inline-block; vertical-align: top; float: left } nav.top li:nth-child(even) { /border-top: 5px #f8f8f8 solid } nav.top li>a { display: block; padding: 10px 20px; text-transform: uppercase; color: #666; font-size: 12pt; font-family: trajan-sans-pro, sans-serif; font-style: normal; font-weight: 300; -webkit-backface-visibility: visible } nav.top li.selected>a, nav.top li>a:hover { background: #000; color: #fff } .box img, .box:hover .box_image>img, .welcome_text .welcome_oldtimes { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden } nav.top li.selected { /border-top: 5px rgba(255, 102, 153, .5) solid } .sticky, .sticky * { -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s } header.header.sticky { transition: .5s linear 0s; background: rgba(255, 255, 255, .8); box-shadow: 0 0 30px #999 } header.header.sticky:hover { background: rgba(255, 255, 255, 1) } header.sticky .logo, header.subpage .logo { padding: 10px 0 } header.sticky .logo img { /height: 40px } header.sticky nav.top { /margin-top: 16px } header.sticky .contact { /display: none; / position: absolute; /right: 0; /top: 200px; /background: rgba(0, 0, 0, .7); /font-size: 7pt } header.sticky .contact li { /display: block; /background: rgba(255, 255, 255, 1); /margin-bottom: 1px } header .contact li .sticky { /display: none!important } header.sticky .contact li .sticky { /display: block!important; /color: #ccc; /padding: 5px; /border-radius: 100% } header.sticky .contact .regular { /display: none } header.sticky a.social { /padding: 5px!important; /border-radius: 0 } header.sticky .contact li a { /font-family: "trajan-sans-pro", sans-serif } header.sticky .contact li a:hover { / background: #000 } .menu_responsive_trigger { display: none; padding: 10px; font-family: trajan-sans-pro, sans-serif; font-size: 22pt; cursor: pointer } .menu_responsive_trigger img { vertical-align: middle; padding-right: 15px } .submenu { display: none; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s } .boadwalk_welcome img, section#slider_main img { display: block; width: 100% } nav.top ul.submenu li a { font-size: 10pt; border-bottom: 1px #f2f2f2 solid } nav.top ul.submenu li a.selected { background: #f2f2f2!important } nav.top ul.submenu li { float: none } .column, img.icon { float: left } nav.top ul.submenu li a:hover { background: #f2f2f2; color: #000 } .columns { /width: 60%; /margin: 0 auto; padding: 1% } .column { padding: 1% 2%; border-right: 1px #fff solid } .column:hover { background: #000; box-shadow: 0 0 5px #ccc } .column:hover a { color: #fff!important } .column.five { width: 15% } .column.last { border-right: none } section#slider_main { z-index: 1; position: relative; overflow: hidden; /max-height: 450px } img.shadow { max-height: 30px } .boadwalk_welcome img { border-bottom: 2px #fff solid; box-shadow: 0 0 5px #ccc } .boadwalk_welcome { margin-top: 40px; overflow: hidden } .boadwalk_welcome.top { margin-top: 74px } .boadwalk_welcome.top img { box-shadow: none; border-top: none } .boadwalk_welcome.bottom { box-shadow: 0 0 5px #ccc; border-top: 2px #fff solid; overflow: hidden; margin-top: 0 } section.welcome { padding: 20px } section.welcome.pagewidth { padding: 20px 2%; font-size: 0 } section.welcome h1, section.welcome h2.header { padding: 15px 0 0; /border-bottom: 1px #ccc solid; display: inline-block; font-style: normal } section.welcome h2.bigger { font-family: trajan-sans-pro, sans-serif; font-size: 18pt } section.welcome h2 { /font-style: italic; color: #99; padding: 15px 0; font-family: Roboto; font-size: 14pt } section.welcome h2 span { font-size: 14pt; display: block; padding: 15px 0 0 } section.welcome p { text-align: center!important; font-size: 14pt; line-height: 1.5; color: #666; padding: 20px 0 10px } .boadwalk_welcome.portfolio_details h1, .boadwalk_welcome.portfolio_details h2, .laptop_buttons, .logos, .logos-full, .project_images, .project_tags, .welcome_row, section.portfolio { text-align: center } .project_description li { padding: 15px 0; border-bottom: 1px #f2f2f2 solid; font-size: 14pt; line-height: 1.5; color: #666 } .project_description li:last-child { border-bottom: none } .welcome_text { /padding: 20px 8%; position: relative; max-width: 1200px } .welcome_text img { width: 100%; max-width: 1100px } .welcome_textbox { position: absolute; top: 0; left: 0; /width: 100%; max-width: 1100px; padding: 14% 20% } .welcome_textbox h2 { font-size: 20pt; line-height: 1.1 } .welcome_textbox p { font-size: 16pt; color: #666; line-height: 1.3; padding: 5px 0 } .laptop_buttons { margin-top: 20px } a.button { padding: 15px 25px 17px; background: #000; display: inline-block; color: #fff; font-size: 12pt; margin: 0 5px; border-radius: 5px; vertical-align: bottom; font-family: trajan-sans-pro, sans-serif; transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s } .box, .welcome_box { vertical-align: top; box-shadow: 0 0 5px #ccc } a.button:hover { margin: 0 20px; transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1) } @keyframes spinAround { from { transform: rotate(0) } to { transform: rotate(360deg) } } .welcome_row { background: url(/gfx/bg_grey.jpg) fixed #ddd; z-index: 2; padding: 70px 2% } .welcome_row.offer-details-row { padding-bottom: 30px } .welcome_row.offer-details-row .box { margin-bottom: 40px } .welcome_box a { display: block; background: #fff } .welcome_box.black a { background: #000 } .welcome_box { margin: 15px; position: relative; width: 20%; display: inline-block; /text-align: left; /max-height: 360px; /min-width: 700px; z-index: 100 } .welcome_box .box_shadow { position: absolute; left: 0; bottom: -25px; width: 100%; z-index: -1 } .welcome_box img { /float: left; width: 100% } .welcome_box.inverted img { /float: right } .welcome_box_info { /float: left; /width: 30%; padding: 25px 20px 0; min-height: 200px } .welcome_box.inverted .welcome_box_info { float: left } .welcome_box h3 { line-height: 1.2; font-weight: 300; text-transform: uppercase; font-size: 16pt; color: #000 } .welcome_box h3.folio { font-size: 30pt } .welcome_box.black h3 { color: #fff } .welcome_box .short_description { padding: 10px 0; color: #666; font-size: 13pt; line-height: 1.3 } .welcome_box .short_description span { display: block; margin-top: 10px; font-size: 10pt } section.portfolio { margin: 40px 0 0; background: url(/gfx/bg_grey.jpg) fixed #ddd; letter-spacing: 0; word-spacing: 0; padding: 70px 2% 30px } section.portfolio.clients { /background: #fff } section.portfolio.clients .box { /box-shadow: none } .project_images .gallery_thumb { display: inline-block; width: 30%; min-height: 300px; /width: 400px; overflow: hidden; margin: 1%; border: 2px solid #fff; position: relative } .project_images .gallery_thumb img { position: absolute; width: auto; left: -50%; min-height: 400px } .project_images .gallery_thumb:hover { /transform: scale(1.1); box-shadow: 0 0 5px #ccc } .project_images .project_sprite { position: fixed; right: -25%; top: 208px; max-width: 20%; background: rgba(0, 0, 0, .8); color: #fff; z-index: 999; padding: 15px; line-height: 1.3!important; border-right: 2px #fff solid } .project_sprite h2 { margin-bottom: 20px; font-size: 20pt; line-height: 1.1 } .project_sprite a { color: #fff; display: block; padding: 10px } .project_sprite a:hover { color: #666 } .project_images:hover>.project_sprite { right: 44px; transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s } .box, .box-sprite { transition: .3s ease-in-out all } .boadwalk_welcome.portfolio_details { margin-top: 150px } .logos { background: #f8f8f8 } .logos img { max-width: 9%; margin: 0 10px; opacity: .4 } .logos-full img { max-width: 13%; margin: 0 10px } .box { position: relative; display: inline-block; width: 31%; margin: 0 1%; z-index: 2 } .box a, .box h2 span, .box h3, .box img { display: block } .box a.cta { margin-bottom: 30px; font-size: 11pt } .box img { width: 100% } .box h2 { /font-family: "bebas-neue", sans-serif; font-size: 16pt; padding: 20px 10px 0 } .box h2 span { font-size: 14pt } .box h3 { font-size: 13pt; font-family: Roboto; margin-top: 10px; color: #999 } .box a:hover h2, .box a:hover h3, .box.black h2 { color: #fff } .portfolio .box { margin-bottom: 40px } .box_info { background: #fff } .box.black .box_info, .offer-details-row .box:hover .box_image, .welcome_row .box:hover .box_image { background: #000 } .portfolio-list .box_info h2 { padding: 25px 10px 5px; font-size: 14pt } .portfolio-list .box_info p.short_description span { display: block; margin-top: 10px; font-size: 9pt } .box_shadow { position: absolute; bottom: -13px; left: 0; z-index: -1; width: 100%; height: 15px } .box_image { position: relative; overflow: hidden } .box-sprite { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0 } .offer-details-row .box:hover .box-sprite, .welcome_row .box:hover .box-sprite { opacity: 1; transition: 1s ease-in-out all } .box-sprite img { max-height: 280px; filter: none!important; width: auto } .offer-details-row .box:hover .box_image>img, .welcome_row .box:hover .box_image>img { opacity: .3; transition: .3s ease-in-out all } .box_image_sprite { position: absolute; left: 0; top: -500px; background: rgba(0, 0, 0, .6); width: 100%; height: 100% } .box_image_sprite img { width: auto; position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; opacity: 0 } .welcomebox .box_image_sprite img { margin: -30px 0 0 -200px } .box a:hover .box_info { background: #000 } .box.black a:hover .box_info { background: #fff } .box.black a:hover h2 { color: #1b1b1b } .box.black a:hover .short_description { color: #666 } .box a:hover .box_image_sprite { /top: 0; background: rgba(0, 0, 0, .6) } .box:hover .box_image_sprite img { opacity: 1 } .box img { filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); transition: transform 20s ease-out 0s!important; -moz-transition: -moz-transform 20s ease-out 0s!important; -webkit-transition: -webkit-transform 20s ease-out 0s!important; -o-transition: -o-transform 20s ease-out 0s!important; -ms-transition: -ms-transform 20s ease-out 0s!important } .box:hover .box_image>img { filter: none; -webkit-filter: grayscale(0); transform: scale(1.5) rotate(-15deg); -webkit-transform: scale(1.5) rotate(-15deg); -moz-transform: scale(1.5) rotate(-15deg); -o-transform: scale(1.5) rotate(-15deg); -ms-transform: scale(1.5) rotate(-15deg); transition: transform 70s ease-out 0s!important; -moz-transition: -moz-transform 70s ease-out 0s!important; -webkit-transition: -webkit-transform 70s ease-out 0s!important; -o-transition: -o-transform 70s ease-out 0s!important; -ms-transition: -ms-transform 70s ease-out 0s!important } .box.portfoliobox .box_image { background: #000 } .box.portfoliobox:hover .box_image>img { transform: scale(1.3) rotate(-20deg); -webkit-transform: scale(1.3) rotate(-20deg); -moz-transform: scale(1.3) rotate(-20deg); -o-transform: scale(1.3) rotate(-20deg); -ms-transform: scale(1.3) rotate(-20deg) } .portfolio .box .box_image img { filter: none; -webkit-filter: grayscale(0) } .portfolio .box:hover .box_image img { /filter: url("data:image/svg+xml;utf8,#grayscale"); /filter: gray; /-webkit-filter: grayscale(1) } .client_name, .short_description { color: #999; padding: 0 20px 20px; line-height: 1.3 } .black .client_name, .black .short_description { color: #ddd } .project { padding: 20px } .project_description { text-align: center; color: #666; padding: 20px 80px; font-size: 16pt } .project_description p { margin: 15px 0 } .project_tags { /position: fixed; padding: 10px 15px } .project_tags:hover { background: #f8f8f8 } .project_tags h3 { font-family: bebas-neue, sans-serif; font-size: 16pt; color: #f8f8f8 } .menu_text_pages h3, .overlay_content h3, .overlay_content h4 { font-family: trajan-sans-pro, sans-serif } .project_tags a { display: inline-block; padding: 15px 15px 15px 50px; color: #fff; background: url(/gfx/tick.png) 10px 50% no-repeat rgba(0, 0, 0, .6); border-radius: 10px } .project_tags a:hover { background-color: rgba(0, 0, 0, 1) } .project_images { background: #f2f2f2; position: relative } .project_images.white { background: #fff } .project_images img { width: 100%; max-width: 100%; display: block; margin: 0 auto } .tags_list { padding: 30px 30px 20px } .tag { display: inline-block; padding: 15px 25px; background: #f2f2f2 } .tag:hover { background: #000; color: #fff } .menu_text_pages { width: 27%; padding: 0 0 10px; margin-top: 20px; text-align: left } .menu_text_pages h3, .menu_text_pages ul li a { padding: 15px 10px; border-bottom: 1px #f2f2f2 solid } .menu_text_pages h3 { font-size: 16pt } .menu_text_pages ul li a { font-size: 12pt; display: block } .menu_text_pages ul li:last-child a { border-bottom: none } .menu_text_pages ul li a.selected, .menu_text_pages ul li a:hover { background: #f2f2f2 } .text_description { font-size: 16pt; line-height: 1.3; color: #666; padding: 20px 20px 10px } .text_description img { width: 100%; display: block } .text_description p, .text_description ul { padding: 7px 0; text-align: left!important; font-size: 13pt!important } .text_description li { color: #999; /list-style-type: circle; /margin: 10px 0; border-bottom: 1px #f2f2f2 solid; padding: 15px 0; font-size: 13pt; transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s } .text_description li:hover { color: #666 } .text_description li:last-child { border-bottom: none } .text_description.text_page { width: 66%; border-left: 1px #f2f2f2 solid; padding: 0 35px 20px; margin-top: 25px } .overlay_trigger:active .overlay { display: block } #overlay { top: -100% } #overlay:target { top: 0; transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .95); z-index: 9999; color: #fff } .overlay_content { width: 50%; height: 100%; margin: 5% auto; text-align: center } .overlay_content h3 { font-size: 4em; margin-bottom: 1% } .overlay_content h4 { font-size: 3em; margin-bottom: 5% } .overlay_content a { color: #fff; display: block; font-size: 16pt; padding: 10px } .overlay_content a:hover { color: #666 } .overlay_close { position: absolute; right: 5%; top: 5% } .contact_form h3 { font-size: 16pt; margin: 20px 0; line-height: 1.2 } .contact_form h3 span { font-size: 12pt; display: block } section.welcome .contact_form p { text-align: center; font-size: 14pt; / margin: 15px 0 } .contact_form form { width: 70%; margin: 30px auto } .contact_form input[type=text], textarea { display: block; width: 100%; padding: 15px 2%; margin: 1%; border: 1px solid #ddd; font-family: Roboto; font-size: 12pt; font-weight: 300; color: #666 } .contact_form input[type=submit], .footer-column h6, a.email, footer .welcome p strong, section.welcome .success h2 { font-family: trajan-sans-pro, sans-serif } .contact_form input[type=text]:focus, .contact_form input[type=text]:hover, textarea:focus, textarea:hover { background: #f2f2f2 } .contact_form input[type=submit] { padding: 10px 15px; font-size: 26pt; font-style: normal; color: #fff; border: none; background: #000; cursor: pointer; display: block; margin: 10px auto 0 } .testimonial-text, em { font-style: italic } .contact_form input.number, .contact_form input.result, .operation { display: inline-block; vertical-align: middle } .contact_form input[type=submit]:hover { background: #666 } .contact_form input.number { width: 20px; text-align: center } .contact_form input.result { width: 220px } .large_logo { width: 80%; margin: 0 auto; display: block } span.error { color: red; display: block; padding: 10px } .success { color: #fff; background: rgba(0, 0, 0, .8); position: fixed; left: 0; top: 0; width: 100%; height: 100% } .success .success_inner { padding: 10% 30% } .success:active { display: none } section.welcome .success h2 { font-size: 36pt; color: #fff; line-height: 1.3 } .socials a { display: inline-block; font-size: 22pt; color: #ccc; margin: 0 10px; transition: .3s all; width: 50px; height: 50px; border-radius: 100% } .socials { margin: 30px 0 10px } .socials a i { padding-top: 10px } .socials a:hover { color: #000; /border: 1px #000 solid; /transform: rotate(-360deg); transition: .5s ease-in-out all; opacity: .7 } footer { background: #000; color: #fff; / text-align: center; background-size: 100%; padding: 30px 0 20px } footer img { width: 150px } footer .welcome p { color: #fff; font-size: 10pt; text-align: left } footer .welcome p a { color: #fff; /font-size: 7pt } footer .welcome p strong { color: #fff; margin-bottom: 5px; display: block } .adr { padding-bottom: 5px; display: block } .footer-column h6 { margin-bottom: 15px; font-size: 10pt } .footer-column a { color: #ccc } .footer-column a:hover { color: #fff } .footer-column li { padding-bottom: 10px } .scroll_up { position: fixed; bottom: 0; right: 0; background: rgba(0, 0, 0, .7); padding: 10px; cursor: pointer; display: none; z-index: 999 } .scroll_up:hover { background: rgba(0, 0, 0, 1) } .scroll_up img { width: 24px } .welcome_text .welcome_oldtimes { float: right; width: 50%; filter: url("data:image/svg+xml;utf8,#grayscale"); filter: gray; -webkit-filter: grayscale(1); -o-filter: grayscale(1) } .welcome_oldtimes:hover { filter: none; -webkit-filter: grayscale(0) } .welcome_textbox_oldtimes { float: left; width: 50%; font-size: 16pt; margin-top: 4% } .welcome_textbox_oldtimes h2 { font-size: 20pt; line-height: 1.2; margin-bottom: 20px } .welcome_textbox_oldtimes p { line-height: 1.3; margin: 10px 0; color: #666 } .welcome_textbox_oldtimes p.smaller, section.welcome p.smaller { font-size: 10pt!important; color: #999 } .welcome_text img.smoke { width: 100px; position: absolute; right: 24%; top: -10px; opacity: 0; transition: all 2s ease-out 0s } .welcome_text:hover img.smoke { opacity: 1; transition: all 2s ease-out 0s } .cookies { position: fixed; bottom: 0; background: rgba(255, 255, 255, .85); width: 100%; padding: 10px 0; box-shadow: 0 0 5px #ccc; z-index: 888 } .cookies img { position: absolute; bottom: 0 } .cookies p { float: right; width: 65%; line-height: 1.3 } .cookies span { display: block; float: right; padding: 10px; background: #000; color: #fff; margin-left: 50px; cursor: pointer; margin-top: 5px } .cookies span:hover { background: #fff; color: #000 } .team_row { text-align: center; padding: 70px 2%; background: url(/gfx/bg_grey.jpg) fixed #ddd; margin-top: 30px } .team_row .box { margin-bottom: 40px } .box.king { /width: 30% } .box.team { /width: 20% } .team_image { width: 25%; margin: 50px auto 0 } .team_image img { width: 100%; border-radius: 100% } ::selection { background: #ccc; color: #fff } ::-moz-selection { background: #ccc; color: #fff } .car, .street { background-repeat: no-repeat; background-position: center; height: 800px } .street { background-image: url(/../gfx/street.jpg); background-size: cover; overflow: hidden; border-bottom: 2px #fff solid; box-shadow: 0 0 5px #ccc } .car { background-size: contain; margin: 0 auto; background-image: url(/../gfx/car.png), url(/../gfx/car-shadow.png) } a.button.folio, ul.offer-list { margin-top: 30px } .car-go { background-image: url(/../gfx/car.gif), url(/../gfx/car-shadow.png) } .car-stop { background-image: url(/../gfx/car.png), url(/../gfx/car-shadow.png) } .car-vibe { -webkit-animation: car-vibe .3s infinite ease-in-out; animation: car-vibe .3s infinite ease-in-out; -moz-animation: car-vibe .3s infinite ease-in-out; -o-animation: car-vibe .3s infinite ease-in-out } ul.offer-list { width: 114%; margin-left: -7%; margin-bottom: 30px } ul.offer-list li { display: inline-block; width: 18%; vertical-align: top } ul.offer-list li a { padding: 20px; line-height: 1.3; color: #666; font-size: 12pt; /border-bottom: 1px #f5f5f5 solid; display: block } ul.offer-list li img { padding-bottom: 15px; transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -webkit-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s; max-width: 100% } ul.offer-list li h3 { font-family: Roboto; font-size: 12pt } ul.offer-list li:last-child a { border-bottom: none } ul.offer-list li a:hover { color: #000 } ul.offer-list li:hover img { opacity: .7 } ul.offer-list.outsourcing { padding: 70px 0 } span.number { display: block; border-bottom: 2px #f5f5f5 solid; width: 20px; margin: 0 auto 7px; padding-bottom: 7px; font-family: trajan-sans-pro, sans-serif!important } .theme-background-color { background: #000!important } .logos-small { /padding: 30px 0 0 } .logos-small img { max-width: 12.5%; float: left } .contact-us { padding-top: 60px!important; padding-bottom: 50px!important } .contact-us h4{ font-size:18pt; font-family: trajan-sans-pro, sans-serif!important } .contact-us-legs{ position:relative; padding-bottom:0!important; margin-bottom:-70px; overflow:hidden } img.legs{ max-width:100%; position:absolute; top:0; left:50%; margin-left:-50%; z-index:-1 } .welcomebox .box_info { /min-height: 155px } .client_name, .short_description { font-size: 13pt; padding-top: 15px; margin: 0 } .text_description.case p { font-size: 13pt!important } .text_description.case .col-50 p { text-align: left!important } .text_description.case h3 { font-family: trajan-sans-pro, sans-serif; color: #000!important; font-size: 20pt; margin-bottom: 20px } .case img { width: auto; display: inline-block; filter: none } .case .portfolio-new-list .box { margin-bottom: 40px } .case .portfolio-new-list img { display: block } #case-gallery { margin-top: 50px; padding-bottom: 20px } #case-gallery h3 { margin-bottom: 50px } .col-20, .col-25, .col-33 { margin: 0 1%; /float: left; display: inline-block; vertical-align: top } .col-20 { width: 17% } .col-25 { width: 23% } .col-33 { width: 31% } .col-50 { width: 48%; /float: left; display: inline-block; vertical-align: top } span.no, span.no:before { width: 100px; height: 100px } .case-section { border-top: 1px #f8f8f8 solid; margin-top: 50px; padding-top: 50px } .case-section ul li { font-size: 11pt } .stats p { text-align: center!important } span.no { display: block; font-size: 34pt; text-align: center; z-index: 1; position: relative; margin: 25px auto; line-height: 100px } .start-offer h2, a.face { display: inline-block } .testimonial .author span, .testimonial .download a { font-size: 9pt } span.no:after, span.no:before { position: absolute; content: ""; z-index: -1; border-radius: 100%; transition: .5s ease-in-out all } span.no:before { border: 3px solid #f2f2f2; /margin: -50px 0 0 -25px; left: 0 } span.no:after { width: 120px; height: 120px; border: 1px solid #f8f8f8; left: -8px; top: -8px } span.no:hover:after { transform: scale(.7); background: #f8f8f8; transition: .5s ease-in-out all } span.no:hover:before { transform: scale(1.1); border-color: #f8f8f8; transition: .2s ease-in-out all } .testimonial .author { text-align: right!important } .testimonial img { max-width: 100px; border-radius: 100%; margin: 50px auto 0 } .start-offer h3, .want { margin-bottom: 50px } .want p { text-align: center!important } .want h3 { font-size: 28pt!important; color: #000 } .start-offer h2 { font-size: 26pt!important; font-family: trajan-sans-pro, sans-serif!important; margin-top: 40px; border-bottom: 1px solid #ccc; padding: 10px 0 } .start-offer.part2 h2 { margin-top: 0 } .start-offer h3 { font-size: 14pt!important; font-family: Roboto, sans-serif!important; padding: 15px 0 } .start-offer h4 { font-size: 16pt; font-family: trajan-sans-pro, sans-serif } .start-offer p.first { padding: 0 15%; line-height: 1.5 } .start-offer .box p { font-size: 13pt!important; padding: 20px 15px 10px; color: #999 } .start-offer div img { transition: .9s ease-in-out all } .start-offer div:hover>img { /transform: rotateY(180deg); /transition: .5s ease-in-out all } .start-offer .box { background: #fff; /padding-bottom: 30px; z-index: 10; position: relative } .start-offer .box h4 { margin-top: 30px } .start-offer .box a { font-size: 11pt; margin-top: 10px } .start-offer.part2 { background: url(/gfx/bg_grey.jpg) fixed #ddd; padding-top: 70px!important; padding-bottom: 70px!important; margin-top: 30px } .start-offer .box .box_shadow { bottom: -15px } .box:hover { box-shadow: 0 0 15px #666 } .foot { text-align: center } .foot img { display: block; margin: 0 auto; max-width: 100% } .offer-text { padding-bottom: 70px } .offer-text .col-33 p { margin-top: 25px } .offer-details { margin-top: 70px } .offer-details h5 { font-size: 13pt } .offer-details img:hover { /transform: rotateY(-180deg); opacity: .7 } .text_description .fa { margin-right: 15px; color: #B3E5FC; transition: .9s ease-in-out all } .text_description li:hover .fa { color: #666; transform: rotate(-360deg); transition: .5s ease-in-out all } a.mail { /color: #666 } a.mail:hover { /color: #000 } .cta, a.cta { display: inline-block; background: #000; color: #fff; font-family: trajan-sans-pro; padding: 10px 15px; transition: .5s ease-in-out all; font-size: 11pt; cursor:pointer } .cta:hover, a.cta:hover { background: #333; padding: 10px 35px; transition: .2s ease-in-out all; cursor: poniter } .cta.welcome, a.cta.welcome { margin: 50px auto; font-size: 14pt } .text_description .apply { text-align: center!important } .text_description p.clause { font-size: 10pt!important } .welcome-text { padding-top: 60px; text-align: center } #about.welcome-text{ padding-top: 90px; } .welcome-text h1 { /border-bottom: 1px #ccc solid; display: inline-block; /padding-bottom: 15px } .welcome-text h2 { font-family: Roboto; font-size: 14pt; color: #000; padding: 15px 0 0; margin-bottom: 50px } .welcome-text p { font-size: 14pt; color: #666; line-height: 1.5; margin-bottom: 15px; padding: 0 15% } .welcome-text a.cta, .welcome-text .cta { margin: 30px 5px 0; font-size: 11pt; border: 1px solid #000 } .cta2, .welcome-text a.cta2, a.cta2 { background: #fff; border: 1px solid #000; color: #000!important } .welcome a.cta2 { margin-top: 20px } .cta2:hover, .welcome a.cta2:hover { background: #fff; cursor: pointer } .welcome-text a.cta3 { background: #fff; color: #000!important; border-color: transparent; margin: -15px 0 30px } .beach, .city, .city2 { background-size: cover; background-repeat: no-repeat; height: 800px; overflow: hidden } .welcome-text img { display: block; margin: 30px auto 0; max-width: 100% } @-webkit-keyframes car-vibe { from, to { -webkit-transform: translate(0) } 65% { -webkit-transform: translate(1px, 1px) } } @-moz-keyframes car-vibe { from, to { -moz-transform: translate(0) } 65% { -moz-transform: translate(1px, 1px) } } @-o-keyframes car-vibe { from, to { -o-transform: translate(0) } 65% { -o-transform: translate(1px, 1px) } } @keyframes car-vibe { from, to { transform: translate(0) } 65% { transform: translate(1px, 1px) } } .beach { background-image: url(/../gfx/beach.jpg); background-position: center; position: relative; border-bottom: 2px #fff solid; box-shadow: 0 0 5px #ccc } .absolute, .shark { position: absolute } .shark { width: auto!important; display: block; border-bottom: none!important; margin-top: 80px } .shark-left { -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1) } .shark-right { -moz-transform: scaleX(-1)!important; -o-transform: scaleX(-1)!important; -webkit-transform: scaleX(-1)!important; transform: scaleX(-1)!important } .city { background-image: url(/../gfx/city.jpg); border-bottom: 2px #fff solid } .baloon, .dino, .fire { max-height: 800px; border-bottom: none!important } .city2 { background-image: url(/../gfx/city2.png); width: 100%; z-index: 200; left: 0 } .baloon, .dino, .fire, .scene img { width: auto!important } .baloon { z-index: 300; -webkit-animation: baloon 5s infinite ease-in-out; animation: baloon 5s infinite ease-in-out; -moz-animation: baloon 5s infinite ease-in-out; -o-animation: baloon 5s infinite ease-in-out } .dino { z-index: 100 } .fire { z-index: 99 } .relative { position: relative } .scene3{ -moz-user-select: none; overflow:hidden; margin:0 auto; margin-top:50px; max-width:1600px } .scene3 img{ background:transparent; -moz-user-select: none; margin:0!important } .scene3 img::-moz-selection{ background:transparent } .scene3 img:active{ /background:black; } @-webkit-keyframes baloon { from, to { -webkit-transform: rotate(0) } 65% { -webkit-transform: rotate(2deg) } } @keyframes baloon { from, to { transform: rotate(0) } 65% { transform: rotate(2deg) } } @-o-keyframes baloon { from, to { -o-transform: rotate(0) } 65% { -o-transform: rotate(2deg) } } @-moz-keyframes baloon { from, to { -moz-transform: rotate(0) } 65% { -moz-transform: rotate(2deg) } } .dino-left { -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1) } .dino-right { -moz-transform: scaleX(-1)!important; -o-transform: scaleX(-1)!important; -webkit-transform: scaleX(-1)!important; transform: scaleX(-1)!important } .dino-chill { -webkit-animation: dino-chill 3s infinite ease-in-out; animation: dino-chill 3s infinite ease-in-out; -moz-animation: dino-chill 3s infinite ease-in-out; -o-animation: dino-chill 3s infinite ease-in-out } @-webkit-keyframes dino-chill { from, to { -webkit-transform: translateY(0) } 65% { -webkit-transform: translateY(15px) } } @-moz-keyframes dino-chill { from, to { -moz-transform: translateY(0) } 65% { -moz-transform: translateY(15px) } } @-o-keyframes dino-chill { from, to { -o-transform: translateY(0) } 65% { -o-transform: translateY(15px) } } @keyframes dino-chill { from, to { transform: translateY(0) } 65% { transform: translateY(15px) } } .scene img { max-width: 100%; border: none } .scene div { width: 100%!important } .scene { margin: 0 auto; padding: 0; width: 800px; overflow: hidden } .scene.fullwidth { width: 100%; height: 800px } img.main-bg { width: 120%!important; max-width: none!important } .o1 { margin: 0 0 0 86% } .o2 { margin: 7% 0 0 25% } .o3 { margin: 6% 0 0 80% } .o4 { margin: 9% 0 0 78% } .o5 { margin: 2% 0 0 10%; width: 800px } .b1, .b2, .b3 { width: 200%; left: -30%; position: absolute } .o6 { margin: 14% 0 0 82% } .b1 { background: url(/images/new/background-3.png) repeat-x; height: 300px; bottom: 100px } .b2 { background: url(/images/new/bydynki2.png) repeat-x; height: 480px; bottom: -20px } .b3 { background: url(/images/new/bydynki.png) repeat-x; height: 500px; bottom: -100px } .layer, body, html { height: 100% } .layer { width: 100%; position: absolute } .scene button { left: 10%; top: 260px; width: 80%; position: absolute } .fill { bottom: 5%; left: 5%; position: absolute; right: 5%; top: 5% } .expand-width { width: 100% } .border { border: 2px dashed #0fa } .aspect { opacity: .2 } .scene2 { max-width: 1200px; margin: 0 auto; overflow: hidden } .welcome-text.rwd-show { padding-top: 0 } .rwd-alt { display: none!important } #offer-details, .offer-text h3 { font-size: 20pt; margin-top: 50px } .offer-text h3 { margin: 30px 0 } .offer-box { max-width: 900px; margin: 50px auto } .offer-box li { border: 1px solid #ccc; margin-bottom: 30px; padding: 0 15px 15px } .offer-box li:hover{ background:#f8f8f8 } .offer-box li img{ transition:.5s ease all; max-width:350px } .offer-box li:hover img{ transform:scale(0.8); transition:1s ease all } .offer-box .icon { font-size: 30pt; padding: 30px 0 } .offer-box h3 { font-size: 16pt; margin-bottom: 30px; margin-top: 0 } .offer-box p { padding: 0 30px 30px } .scroll-more { display: block; width: 20px; height: 30px; position: absolute; bottom: 60px; left: 50%; margin-left: -15px; animation: scroll-me 2s infinite ease-in-out; opacity: 0; border: 2px solid #fff; border-radius: 10px; cursor: pointer } .scroll-more .roller { display: block; width: 2px; height: 6px; background: #fff; left: 50%; top: 5px; margin-left: -1px; position: relative } .scroll-more .text { color: #fff; position: absolute; top: -25px; left: 50%; display: block; margin-left: -50px; width: 100px; text-align: center } .container-about { background: url(/images/background.jpg) repeat-x fixed; background-size: cover; border-bottom: 2px #fff solid; overflow: hidden; position: relative; height: 100%; -webkit-overflow-scrolling: touch; box-sizing: content-box } .top-about { margin: 0!important; height: 100%; overflow: visible!important } .top-about img.shadow { border-bottom: none; /margin-top: 40px } .top-about-alternate { display: none } .scene.scene-about { width: 48%; height: auto; overflow: visible; /margin-bottom: -35px; position: absolute; bottom: 0; left: 50%; margin-left: -24% } .about-welcome { position: absolute; left: 5%; bottom: 15%; width: 36%; /background: #fff; padding: 20px; /box-shadow: 0 0 30px #999; /display: none } .about-welcome h3 { font-size: 60pt; margin-bottom: 10px; line-height: 1 } .about-welcome p { line-height: 1.5; font-size: 11pt } .scene img.left-arm { animation: left-arm 3s infinite ease-in-out } .scene img.right-arm { animation: right-arm 3s infinite ease-in-out } .scene img.left-fore-arm { animation: right-arm 5s infinite ease-in-out } .scene img.right-fore-arm { animation: left-arm 5s infinite ease-in-out } .scene img.chest { animation: chest 8s infinite ease-in-out } .scene img.left-leg, .scene img.right-leg { animation: legs 5s infinite ease-in-out } .scene img.plane1 { animation: plane1 25s infinite linear; /filter: blur(1px); margin-left: -300px } .scene img.plane2 { animation: plane2 35s infinite linear; /filter: blur(1px); margin-left: 300px } .scene img.balon1 { animation: balon1 45s infinite ease-in-out; /filter: blur(1px); margin-left: -650px; margin-top: 180px } .scene img.balon2 { animation: balon2 45s infinite ease-in-out; /filter: blur(1px); margin-left: 550px; margin-top: -150px } @keyframes left-arm { from, to { transform: translate(0, 0) } 65% { transform: translate(15px, 15px) } } @keyframes right-arm { from, to { transform: translate(0, 0) } 65% { transform: translate(-15px, 15px) } } @keyframes chest { from, to { transform: translate(0, 0) } 65% { transform: translate(0, 45px) } } @keyframes legs { from, to { transform: translate(0, 0) } 65% { transform: translate(0, 15px) } } @keyframes plane1 { from { transform: translate(0, 0); opacity: 0 } 5% { transform: translate(50px, 0); opacity: .8 } 50% { transform: translate(800px, 35px) } to { transform: translate(2000px, -15px) } } @keyframes plane2 { from { transform: translate(0, 0); opacity: 0 } 5% { transform: translate(-50px, 0); opacity: .7 } 50% { transform: translate(-800px, 35px) } to { transform: translate(-2000px, -15px) } } @keyframes balon1 { from, to { transform: translate(0, 0) } 25% { transform: translate(-50px, 0) } 50% { transform: translate(50px, -35px) } } @keyframes balon2 { from, to { transform: translate(0, 0) } 25% { transform: translate(50px, 0) } 50% { transform: translate(-50px, 35px) } } @keyframes scroll-me { from { transform: translate(0, 0) } 75% { transform: translate(0, 25px); opacity: 1 } to { transform: translate(0, 25px); opacity: 0 } } .text-page { max-width: 1360px; margin: 0 auto } .text-page p { font-size: 16pt!important; line-height: 1.5!important } .text-page h3 { font-size: 18pt; color: #000; margin: 30px 0 20px } .price-page ul.price-all li{ padding:10px 0; font-size:16px; color:#666 } .columns-container{ margin:60px 0 60px } .columns { display:inline-block; width: 22%; padding: 8px; vertical-align:top; box-sizing: border-box; } .columns img{ max-width:200px } /* Style the list */ .price { list-style-type: none; /border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } /* Add shadows on hover */ .price { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.1) } .price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.3); /background:#eee } .premium .price:hover{ box-shadow: 0 8px 12px 0 rgba(0,0,0,0.3) } .premium .price{ box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) } /* Pricing header */ .price .header { background-color: #000; color: white; border-color:#000; border-bottom:none!important } .standard .price .header,.columns.standard .button{ background:#80CBC4 } .landing .price .header,.columns.landing .button{ background:#FF8A65 } .shop .price .header,.columns.shop .button{ background:#AED581 } .price .header h3{ font-size: 20px; padding:15px 0; margin:0 } .price .header h3 span{ display:block; font-size:16px; margin-top:10px } /* List items */ .price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } /* Grey list item */ .price .grey { background-color: #eee; font-size: 20px; } /* The "Sign Up" button */ .columns .button { background-color: #000; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } .more-trigger span{ padding:10px; width:20px; height:20px; border:2px #ccc solid; color:#000; display:inline-block; /font-family: trajan-sans-pro; font-size:26px; border-radius:100%; cursor:pointer; line-height:18px; opacity:.4; transition:.3s ease all } .more-trigger span:hover{ opacity:1 } .price-more{ /display:none } @media only screen and (max-width: 1024px) { .columns { width: 48%; margin-bottom:30px } } @media only screen and (max-width: 600px) { .columns { width: 100%; } } @media only screen and (min-width:1921px) { .scene.scene-about{ width:900px; margin-left:-450px; left:50% } .scene3{ width:1600px; margin-left:-800px; left:50% } img.legs{ width:1920px; margin-left:-960px; left:50% } } @media only screen and (max-width:1440px) { .scene img.balon1 { margin-left: -500px } } @media only screen and (min-width:700px) and (max-width:1360px) { .box { /width: 27%; /min-width: 350px; max-height: none } .box_shadow { /bottom: -2% } .box h2 { font-size: 16pt } } @media only screen and (max-width:1152px) { .welcome_text .welcome_oldtimes { float: none; width: 80%; margin: 0 auto; display: block } .welcome_textbox_oldtimes { float: none; width: 80%; margin: 0 auto; background: #f2f2f2; padding: 3% } .box { width: 31%; /min-width: 350px; max-height: none; /margin-bottom: 30px } .cookies img, .menu_text_pages, .welcome_text:hover img.smoke { display: none } .scene.scene-about { width: 58%; margin-left: -29% } .welcomebox .box_image_sprite img { width: 80%; margin: -10% 0 0 -40% } .text_description.text_page { border: none; width: 100%; padding: 0 } .cookies p { width: 80%; float: left } .logo a { display: inline } img.legs{ max-width:120%; margin-left:-60% } } @media only screen and (max-width:1100px) { .box { width: 47% } .box:not(:last-of-type) { margin-bottom: 30px } } @media only screen and (min-width:1025px) { nav.top { display: block!important } } @media only screen and (max-width:1024px) { .col-20 { width: 21% } .logo, .logo img { width: 70% } .welcome_text img.smoke { right: 43% } .logo { float: left!important; /padding: 0 } .menu_responsive_trigger { display: block; padding-top: 28px; float: right } nav.top { margin-top: 0; display: none; clear: both } .submenu, nav.top ul li { display: block } nav.top ul li { text-align: left } nav.top ul.submenu li a { padding-left: 30px } nav.top ul li a { border-bottom: 1px #f2f2f2 solid } .start-offer p.first, .welcome-text p { padding: 0 5% } header.header, header.header.sticky { position: fixed } .menu_responsive_trigger { padding: 12px 0 0 } .menu_responsive_trigger img { padding: 0 } header.sticky .logo { /padding: 15px 0 } .boadwalk_welcome.top { /margin-top: 60px } .container-about { /background-size: 130% } .scene.scene-about { width: 56%; margin-left: -28% } .scene img.balon1 { margin-left: -380px; margin-top: 100px } .scene img.balon2 { margin-left: 380px } #about.welcome-text{ padding-top:60px } } @media only screen and (min-width:500px) and (max-width:699px) { .box { width: 80% } } @media only screen and (max-width:800px) { ul.offer-list li { width: 28% } .scene.scene-about { width: 94%; margin-left: -47% } .scene img.balon1, .scene img.balon2, .scene img.plane1, .scene img.plane2 { visibility: hidden } header.header .languages.opened li.we-do { opacity: 0; transition-delay: 0s!important } header.header .languages li.we-do { transition-delay: 1s } .scene2 { display: none } .rwd-alt { display: block!important } img.legs{ display:none } .contact-us-legs{ margin-bottom:0; min-height:unset!important } #foot img.visible-xs{ display:block!important } .visible-xs { display: block!important } .hidden-xs { display: none!important } } @media only screen and (max-width:768px) { .scene.scene-about { width: 100%; margin-left: -50% } header.header .languages li.we-do { letter-spacing: 0 } .col-20 { width: 30% } .col-33 { width: 45% } .project_description { padding: 20px 15px } footer { text-align: center } footer h6 { margin-top: 15px } .scene img { animation: none!important } } @media only screen and (max-width:600px) { .hamburger, .languages, header.header.sticky .languages, header.sticky .hamburger { transition: .5s ease all!important } .logo a img { max-width: 170px } .boadwalk_welcome.top { margin-top: 67px } header.sticky .hamburger { top: 17px } header.header.sticky .languages { top: 20px } header.header .languages li.we-do { display: none } header.sticky .logo { padding: 7px 0 } header.sticky .logo a img { max-width: 150px } ul.offer-list li { width: 48% } .col-20 { width: 45% } .logos-full img { max-width: 20% } } @media only screen and (max-width:580px) { .scene.scene-about { width: 100%; margin-left: -50% } } @media only screen and (max-width:480px) { .logo { padding-top: 15px } header.header .languages.opened li { opacity: 0; transition-delay: 0s } header.header .languages li { opacity: 1; transition-delay: 1s } ul.offer-list li { width: 98% } } @media only screen and (max-width:750px) { img.laptop { display: none } .welcome_textbox { position: relative; padding: 20px; text-align: center } .welcome_text .welcome_oldtimes { /display: none } .welcome_text img.smoke { display: none!important } .welcome_textbox_oldtimes { margin-bottom: 30px } .box { width: 70%; /min-width: 350px; max-height: none } .contact_form form { width: 90% } .contact_form input[type=text], textarea { margin: 10px 0 } footer .fleft, footer .fright { float: none!important } footer .welcome p { text-align: center; padding-top: 10px } .cookies span { float: none; text-align: center; margin-left:0 } .cookies p { width: 100%; text-align: center } } @media only screen and (max-width:650px) { .pagewidth { /padding: 0 } .boadwalk_welcome.bottom, .boadwalk_welcome.top { /display: none } header .contact { /display: none; /border-bottom: 1px #f2f2f2 solid; /font-size: 7pt } header .logo img, header.sticky .logo img { height: auto } .scroll_up { /display: none!important } nav.top li>a { font-size: 10pt } .welcome_row { padding: 70px 15px } section.welcome.pagewidth { padding: 20px 15px } .box { width: 98% } .welcome_textbox_oldtimes h2 { font-size: 16pt } .start-offer h2, .start-offer h4, .welcome-text h1, section.welcome h1, section.welcome h2.header { font-size: 18pt!important } .start-offer h3, section.welcome h2 { /font-size: 11pt } .box h2 { font-size: 14pt } .welcome-text p { font-size: 12pt } a.cta { width: 80% } a.cta:hover { padding: 10px 15px } .box a.cta { width: auto } .col-33 { width: 80% } .col-20, .col-50, .team_image { width: 98% } .text_description { padding: 20px 0 15px } .text_description.case h3 { font-size: 16pt!important } .box-sprite img { max-height: 220px } } @media only screen and (max-width:499px) { .box img, .box img.box_shadow { /display: none } } @media only screen and (max-width:399px) { .box-sprite img { max-height: 170px } .client_name, .short_description, .welcome_textbox_oldtimes p { font-size: 13pt } header.header .contact li span.regular { display: none } header .contact li .sticky { display: block!important } header .logo img, header.sticky .logo img { /width: 190px } .menu_responsive_trigger { /padding-top: 23px } section.welcome h1, section.welcome h2.header { font-size: 16pt!important } section.welcome p { font-size: 13pt!important } footer section.welcome p { font-size: 11pt!important } .logos-full img { max-width: 40% } } @media screen and (max-width:1024px) and (min-height:1300px) { .scene.scene-about { width: 200%; margin-left: -44% } } @media only screen and (max-width:415px) { .scene.scene-about { width: 120%; margin-left: -60% } }