.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%
}
}