/* CSS by studio-frey.com */ /* Reset Styles ***********************/ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q demo blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;} table {border-collapse: collapse; border-spacing: 0;} strong {font-weight: bold;} em {font-style: italic;} img {border: 0px; vertical-align: bottom;} img title {visibility:hidden !important;} video {border: 0px; vertical-align: bottom;} video title {visibility:hidden !important;} /* start general styles */ html { overflow-y: scroll; } .mobile {display:none !important;} .onlyphone {display:none !important;} .onlyphone-portrait {display:none !important;} body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-text-size-adjust:none; height: auto; color:#000; font-family:'SuisseIntl-Light',Arial,sans-serif; font-variant-ligatures: none; cursor: url(../data/files/cursorpoint-3.png), auto; } a:hover {cursor: url(../data/files/cursorpoint-13.png), auto !important;} /* start sitebuild styles */ html,body { height:100%; } p {font-size:18px; line-height:28px; letter-spacing:0.5px; margin-top:22px; color:#000;} h1 {font-family:'SuisseIntl-Light',Arial,sans-serif; color:#ff675d; font-size:39px; line-height:52px; letter-spacing:2px;} h2 {font-family:'SuisseIntl-Light',Arial,sans-serif; color:#000; font-size:32px; line-height:44px; letter-spacing:0.5px;} h3 {font-family:'SuisseIntl-Light',Arial,sans-serif; font-size:28px; line-height:38px; letter-spacing:0.8px; color:#000;} .trans {-webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} .trans:hover {-webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} /* end general styles */ /* start link styles */ a:link, a:visited { font-style:normal; text-decoration:none; color:#000; text-underline-position: under; text-decoration-thickness: 1px; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; } a:hover { text-decoration:underline; text-underline-position: under; text-decoration-thickness: 1px; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; } /* end link styles */ .loading-window-start {position:fixed; width:100%; background:#fff; left:0; right:0; top:0; bottom:0; z-index:199;} .loading-window-start img {width:100%;} .loading-window {position:fixed; width:100%; background:#FFF; left:0; right:0; top:0; bottom:0; z-index:89;} .contentlimiter-logo {max-width:1400px; margin:auto; padding:0 100px; position:relative; z-index:99;} .block-mainlogo {position:relative; box-sizing:border-box; width:200px; margin:70px 0 50px; padding:0px; z-index:99;} .block-mainlogo img {width:100%;} /* navigation burger*/ .contentlimiter-navi {position:fixed; top:0; z-index:99; width:100%; max-width:1420px; left:50%; transform: translateX(-50%); padding:0 0px;} .navi-icon-intro {position:absolute; box-sizing:border-box; z-index:101; right:20px; top:60px; width:70px; height:68px; background:url(../data/files/sf-navi-intro.png) no-repeat; background-size:100%;} .navi-icon {position:absolute; box-sizing:border-box; z-index:99; cursor: url(../data/files/cursorpoint-13.png), auto !important; right:20px; top:60px; width:70px; height:68px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%; color:#ff675d; font-size:14px; line-height:14px; letter-spacing:0.4px; padding:27px 0 0 13px;} .navi-icon-letter {float:left; padding:0; -webkit-transition:all 0.3s ease 0s; transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s;} .navi-icon:hover .navi-icon-1 {margin-top:-3px;} .navi-icon:hover .navi-icon-2 {margin-top:3px;} .navi-icon:hover .navi-icon-3 {margin-top:-3px;} .navi-icon:hover .navi-icon-4 {margin-top:3px;} .navi-icon:hover .navi-icon-5 {margin-top:-3px;} /* navigation overlay */ .navigationbackground {position:fixed; width:100%; left:0; right:0; top:0; bottom:0; height:100vh; display:none; z-index:30;} .navigationwrapper { position:fixed; width:55%; right:-55%; top:0px; height:100vh; z-index:99; box-sizing:border-box; padding:0px; /* background:url(../data/files/nav-bg.png); background-size:cover; */ background: linear-gradient(319deg, #e98378, #ece3d5, #e98378); background-size: 200% 200%; animation: navBG2 10s ease infinite; } @keyframes navBG2 { 0%{background-size: 400% 400%; background-position:50% 50%;} 50%{background-size: 200% 200%; background-position:100% 100%;} 100%{background-size: 400% 400%; background-position:50% 50%;} } .navigationwrapper-show {right:0;} .navigation-trans {transition:all 0.4s ease-out 0.1s;} .navigation-show {display:none;} .navigation {position:relative; box-sizing:border-box; padding:22vh 0 0 17%; z-index:6; background:none !important;} .navigation span {font-size:12px; line-height:12px; letter-spacing:0.3px;} .navigation a {display:inline-block; text-decoration:none; position:relative; color:#000; margin:26px 0 0; font-size:50px; line-height:50px;} .navigation a.active:after {width: 100%;} .navigation a:after { content: ""; position: absolute; bottom: 0; left: 0px; height: 0; width: 0; border-bottom: 1px solid #000; transition: width 0.3s ease; } .navigation a:hover:after { width: 100%; } .navigation-bottom {position:relative; box-sizing:border-box; padding:10vh 0 0 17%; z-index:6; background:none !important;} .navigation-bottom span {font-size:12px; line-height:12px; letter-spacing:0.3px; display:block; padding-bottom:28px;} .navigation-bottom-text {position:absolute; box-sizing:border-box; left:17%; bottom:5vh; z-index:6; background:none !important;} .navigation-bottom-text p {font-size:16px; line-height:22px;} .navigation-bottom-text p a {display:inline-block; text-decoration:none; position:relative;} .navigation-bottom-text p a:after { content: ""; position: absolute; bottom: 0; left: 0px; height: 0; width: 100%; border-bottom: 1px solid #000; transition: width 0.3s ease; } .navigation-bottom-text p a:hover:after { width: 0%; } .socialwrapper {box-sizing:border-box;} .socialwrapper img {width:40px; margin:0 50px 0 0px;} .socialwrapper-footer img {width:40px; margin:0 0px 0 50px !important;} .socialwrapper img:hover {transform:scale(1.20);} /* end overlay */ .block-footer {position:relative; box-sizing:border-box; width:100%; padding:190px 0 50px; background:#FFF;} .block-footer p, .block-footer a {font-size: 14px; line-height:22px; color:#000; padding:0 0 20px; margin:0; font-family:'SuisseIntl-Light',Arial,sans-serif;} .block-footer-left1 {width:200px; float:left; padding:0px 0 0;} .block-footer-left3 {float:right; text-align:right; padding:0px 0 0; font-size:24px; color:#ff675d; letter-spacing:1px;} .block-subfooter {width:100%; margin:50px 0 0; color:#A6ABA7; font-size:14px; line-height:28px; letter-spacing:0.6px;} .block-subfooter a {color:#A6ABA7; font-size:14px; line-height:20px;} .block-subfooter-left {width:50%; float:left;} .block-subfooter-right {width:50%; float:left; text-align:right;} .block-subfooter-right a {text-decoration:none; position:relative;} .block-subfooter-right a:after { content: ""; position: absolute; bottom: 19px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #A6ABA7; transition: width 0.3s ease; } .block-subfooter-right a:hover:after { width: 100%; } /* Newsletter Form */ fieldset {margin:0px 0 50px 0; border:0; padding:0; width:500px;} fieldset input {border:none; border-radius: 0; -webkit-appearance: none; width:200px; border-bottom:1px solid #ff675d; background:none; margin:0px 0 0px 30px; padding:0 40px 0 0px; font-size:16px; color:#ff675d; font-family:'SuisseIntl-Light',Arial,sans-serif;} .btn {background:none; cursor: url(../data/files/cursorpoint-13.png), auto !important; border:none; display:inline-block; width:35px; height:20px; background:url(../data/files/icon-arrow-right3.png) no-repeat; background-size:100%; margin:0px 0 0 -37px; padding:0px 0 0px;} .btn:hover {} #response {color:#f30; font-size:14px; line-height:28px; display:block;} #contentcontainer {position:relative; z-index:5; padding:0px 0 0; text-align:left; overflow-y:visible; overflow-x:hidden; min-height:500px;} .contentlimiter {max-width:1400px; margin:auto; padding:0 110px; position:relative; z-index:6;} .contentlimiter1 {max-width:1200px; margin:auto; padding:0 110px; position:relative; z-index:6;} .contentlimiter2 {max-width:1000px; margin:auto; padding:0 35px; position:relative; z-index:6;} .block404 {font-size:30px; line-height:40px; padding:100px 0;} .contentlimiter-intro {max-width:1600px; margin:auto; padding:0 0px; position:relative; z-index:6;} .block-intro {box-sizing:border-box; margin:40px 0 90px 56%; width: 44%; padding:0px 0 0px; z-index:20; position:relative;} .block-intro img, .block-intro video {width: 100%;} .heading-wrapper {position: absolute; top: 0; padding: 5% 0 0; width: 100%;} .block1b {width:38%;} .block1 {box-sizing:border-box; margin:110px 0 90px; padding:0px 0 0px; z-index:20; position:relative; max-width:900px; overflow:hidden;} .block1 {font-family:'SuisseIntl-Light',Arial,sans-serif; letter-spacing:1px; color:#000; font-size:36px; line-height:50px;} .block1 h1 {color:#000; font-size:42px; line-height:58px;} .block1 a {color:#ff675d; position:relative; text-decoration:none !important; display:inline-block; line-height:46px;} .block1-over {position:absolute; top:0; left:0;} .block1-over h1 {color:transparent; font-size:42px; line-height:58px; display:inline; background-image: linear-gradient(to left, #ff675d, #ff675d 50%, transparent 50%, transparent); background-position: 100% 0; background-size: 200% 100%; transition: all .25s ease-in; animation:textMaskOut 1.3s cubic-bezier(0,0,0,1) 1.6s both;} .block1-over h1 a {color:transparent;} .block2 {box-sizing:border-box; margin:70px auto 100px; padding:0px; z-index:20; position:relative; max-width:60%; text-align:center;} .block3 {box-sizing:border-box; margin:100px 0 100px; padding:0px; z-index:20; position:relative; max-width:60%;} .block3 h3 {font-size:24px; line-height:24px; padding:50px 0 10px;} /* new 2021 */ .block-showreel-wrapper {width:100%; z-index:10; overflow:hidden; background:none; position:relative; margin:0 0 140px;} .block-showreel {} .block-showreel img {width:100%; } .block-showreel video {width:102%; margin:0 -1% 0px -1% !important;} .block-studiopreview {box-sizing:border-box; margin:0px 0 200px; padding:120px 120px; z-index:20; position:relative; background:#CCC4B8;} .block-studiopreview-left {box-sizing:border-box; width:57%; float:left;} .block-studiopreview-left img, .block-studiopreview-left video {width:100%;} .block-studiopreview-right {box-sizing:border-box; width:43%; float:left; padding:30px 0 0 80px;} .block-studiopreview-right p {color:#ff675d; font-size:26px; line-height:36px;} .block-studiopreview-right p a {font-size:17px; color:#FF6559; letter-spacing:0.5px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:50px; padding:0 80px 0 0; margin:10px -80px 0 0;} .block-studiopreview-right p a:hover {text-decoration:none; padding:0 90px 0 0px;} /* end new 2021*/ /* PROJECT PREVIEW DESKTOP NEW 2023 */ .project-preview-wrapper-desktop-left {margin:-230px 0% 0px; width: 42%; float: left;} .project-preview-wrapper-desktop-right {margin:120px 0% 0px 16%; width: 42%; float: left;} .project-preview-box-desktop {width:100%; margin:0% 0% 20%;} .project-preview-imagewrapper-wrapper {box-sizing: border-box; padding: 70px 70px; background: #ff0000;} .project-preview-wrapper{margin:120px 0% 0px;} .project-preview-box {float:left;} .project-preview-box-portrait {width:40%; margin:1.5% 0% 1%;} .project-preview-box-panorama {width:50%; margin:9.0% 0% 1%;} .project-preview-box-spacer {width:10%; height:100px;} .project-preview-imagewrapper {width:100%; z-index:10; overflow:hidden; background:#ff675d; margin-bottom:0px; position:relative;} .project-preview-imagewrapper:hover {transform: scale(0.97);} .project-preview-image {} .project-preview-image img {width:100%; } .project-preview-image video {width:100%; margin:0 0 -3px !important;} .project-preview-imagewrapper:hover img {transform: scale(1.06);} .project-preview-box h2 {padding:14px 0 0; font-size:22px; line-height:30px;} .project-preview-box {text-decoration:none !important;} .project-preview-box a:hover {text-decoration:none !important;} .project-preview-box h2:hover {} .project-preview-keyword {color:#FF6559; margin-top: 40px;} .project-preview-more {margin:120px 0 150px; text-align:center;} .project-preview-more a {font-size:24px; color:#FF6559; letter-spacing:1px; display:inline-block; position:relative; text-decoration:none;} .project-preview-more a:after { content: ""; position: absolute; bottom: -3px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #FF6559; transition: width 0.3s ease; } .project-preview-more a:hover:after { width: 100%; } .project-filter-wrapper {margin:70px 0 0px; position:relative; height:68px;} .project-filter {margin:0 0 0 110px; display:none;} .project-filter-box {height:18px;} .project-filter-title {position:absolute; left:0; top:0; font-size: 15px; line-height:20px; text-decoration:underline; color:#FF6559; letter-spacing:0.3px; cursor: url(../data/files/cursorpoint-13.png), auto !important;} /* Start Isotope*/ .button {display:inline; margin:0 26px 0 0 !important; padding:0; background:none; border: none; border-bottom:none; color: #000; font-family:'SuisseIntl-Light',Arial,sans-serif; font-size: 15px; line-height:20px; letter-spacing:0.3px; cursor: pointer;} .button:hover {border-bottom:1px solid #FF6559;} .button:active, .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} .button-group {font-size: 15px; text-align:left; padding:0 0 15px 0;} .button-group:after {content: ''; display: block; clear: both;} .button-group .button {color:#FF6559 !important; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .button-group .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} /* End Isotope*/ .project-overview-wrapper{margin:100px -2.5% 100px -2.5% !important;} .project-overview-box {width:28.31%; margin:1.5% 2.5% 5%; float:left;} .project-overview-imagewrapper {width:100%; height:100%; position:relative; padding-top:75%; z-index:10; overflow:hidden; background:#ff675d; margin-bottom:40px;} .project-overview-imagewrapper:hover {transform: scale(0.97);} .project-overview-image {position:absolute; top:0%; left:0; bottom:0; width:100%;} .project-overview-image img {width:100%;} .project-overview-image video {width:114%; margin-left:-7%;} .project-overview-imagewrapper:hover img {transform: scale(1.06);} .project-overview-box h2 {padding:14px 0 0; font-size:20px; line-height:28px;} .project-overview-box {text-decoration:none !important;} .project-overview-box a:hover {text-decoration:none !important;} .project-overview-box h2:hover {} .project-overview-keyword {color:#FF6559; font-size:14px;} .project-overview-box-arrow {position:absolute; right:0; bottom:10px; width:40px;} .project-overview-box-arrow img {width:100%;} .project-overview-box:hover .project-overview-box-arrow {right:0px;} /* PROJECT INDEX */ .project-index-background-wrapper {box-sizing:border-box; margin:0 auto 0; padding:100px 0 10px; z-index:20; position:relative; background:#FFF;} .project-index-title{margin:80px 0% 50px 0% !important; font-size:23px; line-height:23px; font-family:'SuisseIntl-Light',Arial,sans-serif;} .project-index-header{margin:30px 0% 20px 0% !important; color:#FF6559; font-size:15px; line-height:15px; font-family:'SuisseIntl-Light',Arial,sans-serif;} .project-index-wrapper{margin:0 0% 100px 0% !important; position:relative; z-index:6; font-size:19px; line-height:23px; font-family:'SuisseIntl-Regular',Arial,sans-serif;} .project-index-wrapper:after { content: ''; display: block; clear: both; } .project-index-box-wrapper {width:100%; margin:0; padding:0; clear: both;} .project-index-box {width:100%; margin:5px 0 4px; z-index:3 !important; position:relative;} .project-index-box:hover {color:#FF6559; z-index:60 !important;} .project-index-boxbox {float:left;} .project-index-box1 {width:30%;} .project-index-box2 {width:30%;} .project-index-box3 {width:30%;} .project-index-box4 {width:10%; text-align:right;} /* Pointer Image */ .venues-item { } .venues-img { z-index:199 !important; position: absolute; top: 0px; left: 0; width: 500px; height: 750px; background-size: 100% auto; background-repeat:no-repeat; background-image: url("/img/venue-1.jpg"); } .venues-img-wrap { z-index:199 !important; width: 500px; position: fixed; top: 44%; left: 16%; transform:translate(-50%,-50%); overflow-x: hidden; pointer-events: none; visibility: hidden; padding-bottom: 750px; z-index:150 !important; } /* BILD OVER POINTER .venues-img-wrap { z-index:5 !important; width: 500px; position: fixed; top: 25%; left: 0%; transform:translate(-50%,-50%); overflow-x: hidden; pointer-events: none; visibility: hidden; padding-bottom: 750px; z-index:5 !important; } */ /* End Pointer Image*/ /* END INDEX */ .img-ratio-portrait {margin-top:-20%;} .img-ratio-landscape {height:100%; width:auto !important;} .project-detail-topwrapper {box-sizing:border-box; margin:0 auto 0; padding:100px 0 220px; z-index:20; position:relative;} .project-detail-toptitle {box-sizing:border-box; width:50%; margin-right:50%; padding:0px 100px 40px 0px; text-align:left;} .project-detail-toptitle2 {box-sizing:border-box; width:100%; padding:0px 100px 40px 0px; text-align:left;} .project-detail-toptitle h1,.project-detail-toptitle2 h1 {font-size:55px; line-height:66px; font-family:'SuisseIntl-Light',Arial,sans-serif;} .project-detail-topleft {box-sizing:border-box; width:50%; float:left; padding:0px 140px 0 0px; text-align:left;} .project-detail-topleft-readmore {cursor: url(../data/files/cursorpoint-13.png), auto !important; color:#FF6559; margin:30px 0 0; position:relative; display:inline-block;} .project-detail-topleft-readmore:after { content: ""; position: absolute; bottom: -3px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #FF6559; transition: width 0.3s ease; } .project-detail-topleft-readmore:hover:after { width: 100%; } .project-detail-topright {box-sizing:border-box; width:50%; float:left; padding:20px 0 0 30px;} .project-detail-topright img, .project-detail-topright video {width:100%; padding:0 0 25px;} .project-detail-topright2 {box-sizing:border-box; width:37%; margin-left:13%; float:left; padding:20px 0 0 30px;} .project-detail-topright2 img, .project-detail-topright2 video {width:100%; padding:0 0 25px;} .project-detail-topright p, .project-detail-topright2 p {max-width:400px; padding:0 0 0 3px;} .project-detail-dynamic-wrapper {padding:0 80px; margin:-8% 0 0;} .project-detail-dynamic-wrapper img {width:100%;} .project-detail-dynamic-wrapper video {width:100%;} .project-detail-dynamic-width1 {max-width:1600px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width2 {max-width:1300px; margin:8% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width3 {max-width:1000px; margin:8% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width33 {max-width:1000px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 {max-width:700px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 p {font-size:26px; line-height:34px; letter-spacing:1px; margin:0; padding:0;} .project-detail-dynamic-frame {box-sizing:border-box; padding:0px 0; text-align:center;} .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-frame2 {box-sizing:border-box; padding:0px 0; text-align:center; position:relative;} .project-detail-dynamic-frame2 img {display:block; position:absolute; left:50%; margin-left:-30%; top:100%; margin-top:-120% !important; width:auto !important; max-width:60%;} .img-ratio2-landscape {padding:250px 0px;} .img-ratio2-portrait {padding:200px 0;} .project-detail-dynamic-width3 .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-width3 .img-ratio2-portrait {padding:125px 0;} .project-detail-dynamic-halfleft {width:50%; float:left;} .project-detail-dynamic-halfright {width:45%; float:left; margin-left:5%;} .project-detail-dynamic-halfleft2 {width:50%;} .project-detail-dynamic-halfright2 {width:50%; position:absolute; left:50%; top:0;} .project-detail-dynamic-halfright2 img {width:100%; margin-top:-5%;} .project-detail-dynamic-halfright-text {padding:40px 0 0; width:65%; min-width:400px;} .project-detail-dynamic-halfright-text p {font-size:18px; line-height:28px; letter-spacing:0.5px;} .project-detail-dynamic-imagedesc {padding:10px 0 0;} .project-detail-dynamic-imagedesc p {padding:0; margin:0;} .project-detail-dynamic-imagedesc p a {text-decoration:none; position:relative;} .project-detail-dynamic-imagedesc p a:after { content: ""; position: absolute; bottom: -3px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #FF6559; transition: width 0.3s ease; } .project-detail-dynamic-imagedesc p a:hover:after { width: 100%; } /* Dynamic Carousel*/ .main-carousel5 {padding:0px 0 0px;} .block-carousel5 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell5; padding:0 0 0px; } .block-carousel5 img {width:100%; margin:0 0 0 0%;} .project-detail-imgwrapper {margin:0 -1.2% 0px;} .project-detail-imgbox {margin:1.2% 1.2%; float:left;} .project-detail-imgbox img {width:100%;} .project-detail-imgbox video {width:100%;} .project-detail-imgbox-overlay {position:absolute; box-sizing:border-box; top:0%; width:100%; bottom:0; text-align:center; background:#FFF; opacity:0; z-index:11;} .project-detail-imgbox-overlay:hover {opacity:0.4; transition-delay:0.1s;} .project-detail-imgbox-overlay h1 {font-size:38px; font-family:'SuisseIntl-Light',Arial,sans-serif; padding:30% 0 0;} .project-detail-imgbox1 {width:22.55%;} .project-detail-imgbox2 {width:47.55%;} .project-detail-imgbox3 {width:97.55%;} .project-detail-imgbox4 {width:30.88%;} .project-detail-bottom-photography {box-sizing:border-box; margin:0 auto 0; padding:20px 0 60px; z-index:20; position:relative; text-align:center;} .project-detail-back {box-sizing:border-box; margin:0 auto 0; padding:120px 0 200px; z-index:20; position:relative; text-align:center;} .project-detail-back a {font-size:20px; line-height:20px; letter-spacing:1px; text-decoration:none; color:#FF6559; display:inline-block; position:relative;} .project-detail-back a:after { content: ""; position: absolute; bottom: -5px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #FF6559; transition: width 0.3s ease; } .project-detail-back a:hover:after { width: 100%; } .project-detail-nextouterwrapper a:hover {text-decoration:none !important;} .project-detail-nextwrapper {box-sizing:border-box; margin:0 auto 200px; padding:120px 180px 160px; z-index:20; position:relative; background:#B4C6CD;} .project-detail-nextwrapper:hover .project-detail-nexttitle img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nextwrapper:hover .project-detail-nexttitle2 img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nexttitle {box-sizing:border-box; width:50%; margin-right:50%; padding:0px 100px 60px 0px; text-align:left; font-size:55px; line-height:70px; color:#FF6559;} .project-detail-nexttitle2 {box-sizing:border-box; position:absolute; width:50%; left:0; padding:0px 100px 60px 180px; text-align:left; font-size:55px; line-height:70px; color:#FF6559;} .project-detail-nexttitle img, .project-detail-nexttitle2 img {width:50px; display:block; padding:40px 0 0; -webkit-animation: bounceLeft 2s infinite; animation: bounceLeft 2s infinite;} .project-detail-nextleft {position:absolute; left:180px; bottom:160px;} .project-detail-nextleft span p {color:#FF6559; font-size:16px;} .project-detail-nextleft h3 {letter-spacing:1.5px; padding:10px 0 0;} .project-detail-nextright {box-sizing:border-box; width:100%; padding:0px 0 0 51%; margin:-80px 0 0 0;} .project-detail-nextright img, .project-detail-nextright video {width:100%;} .project-detail-nextright2 {box-sizing:border-box; width:100%; padding:16px 0 0 60%;} .project-detail-nextright2 img, .project-detail-nextright2 video {width:100%;} .project-detail-nextright p {max-width:400px; padding:0 0 0 3px;} /* ARROW BOUNCE */ /* right bounce */ @-webkit-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(-10px); transform: translateX(-10px);} 60% {-webkit-transform: translateX(-5px); transform: translateX(-5px);}} @-moz-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(-10px);} 60% {transform: translateX(-5px);}} @keyframes bounceRight {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(-10px); transform: translateX(-10px);} 60% {-ms-transform: translateX(-5px); transform: translateX(-5px);}} /* /right bounce */ /* left bounce */ @-webkit-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(10px); transform: translateX(10px);} 60% {-webkit-transform: translateX(5px); transform: translateX(5px);}} @-moz-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(10px);} 60% {transform: translateX(5px);}} @keyframes bounceLeft {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(10px); transform: translateX(10px);} 60% {-ms-transform: translateX(5px); transform: translateX(5px);}} /* left bounce */ /* down bounce */ @-webkit-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0);} 40% {-webkit-transform: translateY(-10px); transform: translateY(-10px);} 60% {-webkit-transform: translateY(-5px); transform: translateY(-5px);}} @-moz-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);}} @keyframes bounceDown {0%, 20%, 50%, 80%,100% {-ms-transform: translateY(0); transform: translateY(0);} 40% {-ms-transform: translateY(-10px); transform: translateY(-10px);} 60% {-ms-transform: translateY(-5px); transform: translateY(-5px);}} /* /down bounce */ /* SERVICES */ .services-circle-wrapper {box-sizing:border-box; height:470px; margin:200px auto 150px; z-index:20; position:relative;} .services-circle {width:420px; height:420px; text-align:center; box-sizing:border-box; border-radius:50%;} .services-circle1 {position:absolute; left:31%; top:0px; background: linear-gradient(319deg, #FF6559, #ece3d5, #FF6559); background-size: 200% 200%; animation: navBGcircle 14s ease infinite, servCircle3 2.2s ease 1; } .services-circle2 {position:absolute; left:48%; top:-100px; background:rgba(255, 101, 89,0.88); width:420px; height:420px; z-index:999; animation: servCircle2 2.4s ease 1;} @keyframes servCircle2 { 0%{transform:scale(0);} 70%{transform:scale(0);} 90%{transform:scale(1.05);} 100%{transform:scale(1);} } @keyframes servCircle3 { 0%{transform:scale(0);} 70%{transform:scale(0);} 90%{transform:scale(1.05);} 100%{transform:scale(1);} } /*.services-circle2 {position:absolute; left:48%; top:-120px; background:#FF6559; width:2000px; height:2000px;}*/ @keyframes navBGcircle { 0%{background-size: 400% 400%; background-position:50% 50%;} 50%{background-size: 200% 200%; background-position:100% 100%;} 100%{background-size: 400% 400%; background-position:50% 50%;} } /* DROP DOWNS */ .services-dropdown-top {border-top:1px solid #FF6559; padding:50px 0 50px; text-align:left; position:relative;} .services-dropdown-top h1 {cursor: url(../data/files/cursorpoint-13.png), auto !important; box-sizing:border-box; padding-right:50px;} .services-dropdown {display:none;} .services-dropdown-righttext {box-sizing:border-box; width:40%; float:right; padding:40px 0 0 0px;} .services-dropdown-righttext-item-wrapper {margin:70px 0 0;} .services-dropdown-righttext-item {margin:20px 0; font-size:26px; font-family:'SuisseIntl-Light',Arial,sans-serif; color:#FF6559;} .services-dropdownicon {position:absolute; right:0; top:80px; width:40px;} .services-dropdownicon img {width:100%; transform:rotate(90deg);} .services-dropdownicon-open img {transform:rotate(270deg);} .services-dropdownicon-open .services-iconhover {opacity:1;} .services-iconhover {position:absolute; width:100%; left:0; top:0; opacity:0;} .services-iconhover {opacity:1;} .services-dropdown-bottomline {border-top:1px solid #FF6559; height:32px; position:relative;} /* service units */ .services-unit-topblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:100px 0 100px; z-index:20; position:relative;} .services-unit-topblock-left {box-sizing:border-box; width:60%; float:left; padding:0px 0 0; text-align:left;} .services-unit-topblock-right {box-sizing:border-box; width:40%; float:left; padding:70px 0 0 50px;} .services-unit-topblock-right p a {color:#FF6559; text-decoration:underline;} .services-unit-topblock-right p a:hover {color:#FF6559; text-decoration:none;} .services-unit-listblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:20px 0 20px; z-index:20; position:relative;} .services-unit-listblock-left {box-sizing:border-box; width:60%; float:left; padding:0px 100px 0 0px; text-align:left;} .services-unit-listblock-left img, .services-unit-listblock-left video {width:100%;} .services-unit-listblock-left-imagewrapper {background:#FF6559;} /* TEST */ .carousel-cell-service {width: 100%;} .service-button { width:auto; display:block; cursor: url(../data/files/cursorpoint-13.png), auto !important; color:#FF6559; font-size:26px; margin:5px 0; position:relative; font-family:'SuisseIntl-Light',Arial,sans-serif; padding: 0px; border:none; border-radius: 0px; background:none; } .service-button:focus {outline: none;} .service-button:after { background: none repeat scroll 0 0 transparent; bottom: 0px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .service-button:hover:after {width: 100%; left: 0;} .service-button.is-selected:after { background: none repeat scroll 0 0 transparent; bottom: 0px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 100%;} /* TEST */ .services-unit-listblock-left-box-active {display:inherit;} .services-unit-listblock-left-box-passiv {display:none;} .services-unit-listblock-right {box-sizing:border-box; width:40%; float:left; padding:120px 0 0 50px;} .services-unit-listblock-right p {color:#FF6559; margin:0 0 40px;} .services-view-projects {padding:120px 0 0px; text-align:center;} .services-view-projects a {font-size:24px; color:#FF6559; letter-spacing:1px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:50px; padding:0 80px 0 0; margin-right:-80px;} .services-view-projects a:hover {text-decoration:none; padding:0 90px 0 10px;} .services-unit-process {box-sizing:border-box; margin:0 auto 0; padding:160px 0 200px; z-index:20; position:relative;} .services-unit-process h2 {font-size:40px; line-height:40px; letter-spacing:1px;} .services-unit-process-wrapper {margin:30px 0 0;} .services-unit-process-box {box-sizing:border-box; float:left; width:33.3%; padding:0 80px 0 0; margin:100px 0 0; position:relative;} .services-unit-process-box h2 {font-size:20px; line-height:20px;} .services-unit-process-box p {margin:18px 0 0; max-width:260px;} .services-unit-process-box-top {color:#FF6559; font-size:18px; letter-spacing:3.9px; float:left;} .services-unit-process-box-topline2 {width:85%; height:1px; margin:7px 0 40px 15%;} .services-unit-process-box-topicon {position:absolute; left:-17px; top:-20px; width:60px; height:59px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%; transform:scale(0);} .services-unit-process-box-topicon-show1 {transform:scale(1); -webkit-transition:all 1s ease 2.40s; transition:all 1s ease 2.40s;} .services-unit-process-box-topicon-show2 {transform:scale(1); -webkit-transition:all 1s ease 2.95s; transition:all 1s ease 2.95s;} .services-unit-process-box-topline3 {width:0%; height:1px; background:#FF6559; margin:7px 0 40px 15%;} .services-unit-process-box-topline3-show1 {width:85%; -webkit-transition:all 1s ease 0.2s; transition:all 1s ease 0.2s;} .services-unit-process-box-topline3-show2 {width:85%; -webkit-transition:all 1s ease 0.75s; transition:all 1s ease 0.75s;} .services-unit-process-box-topline3-show3 {width:85%; -webkit-transition:all 1s ease 1.3s; transition:all 1s ease 1.3s;} .services-unit-process-box-topline3-show4 {width:85%; -webkit-transition:all 1s ease 1.85s; transition:all 1s ease 1.85s;} /* .services-unit-process-box-topline3-show5 {width:85%; -webkit-transition:all 1s ease 2.40s; transition:all 1s ease 2.40s;} */ .services-unit-process-box-topline3-show11 {width:85%; -webkit-transition:all 1s ease 0.2s; transition:all 1s ease 0.2s;} .services-unit-process-box-topline3-show12 {width:85%; -webkit-transition:all 1s ease 0.75s; transition:all 1s ease 0.75s;} .services-unit-process-box-topline3-show13 {width:85%; -webkit-transition:all 1s ease 1.3s; transition:all 1s ease 1.3s;} .services-unit-process-box-topline3-show14 {width:85%; -webkit-transition:all 1s ease 1.85s; transition:all 1s ease 1.85s;} .services-unit-process-box-topline3-show15 {width:85%; -webkit-transition:all 1s ease 2.40s; transition:all 1s ease 2.40s;} .services-clients {box-sizing:border-box; margin:0 auto 0; padding:120px 0 200px; z-index:20; position:relative; text-align:center; background:#dad0c4;} .services-clients img {width:100%; padding:0px 0px 0px;} .services-clients p {font-size:28px; line-height:38px; color:#FF6559;} .services-clients-logos {padding:90px 0 0;} .main-carousel3 {padding:0px 0 0px;} .block-carousel3 { width: 170px; height: auto; box-sizing:border-box; padding:0px; margin:0 80px 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0px 0px; } .services-testimonials-wrapper {background:#f0f0ef;} .services-testimonials {box-sizing:border-box; margin:0 auto 0; padding:160px 0 160px; z-index:20; position:relative; text-align:center; max-width:500px;} .services-testimonials img {width:16px; padding:70px 0 40px;} .services-testimonials span p {font-size:18px; line-height:18px;} .services-testimonials p {font-size:28px; line-height:38px;} .services-testimonials-byline {padding: 60px 0 0; font-size:18px; line-height:18px; letter-spacing:0.5px; color:#FF6559;} .main-carousel2 {padding:0px 0 0px;} .block-carousel2 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 80px; } .services-bottom {box-sizing:border-box; margin:0 auto 0; padding:180px 0 10px; z-index:20; position:relative; text-align:center; background:#FFF;} .services-bottom p {font-size:38px; line-height:38px; letter-spacing:0.8px;} .services-bottom p a {font-size:24px; line-height:20px; color:#FF6559; margin-top:30px; display:inline-block; text-decoration:none !important; position:relative;} .services-bottom p a:after { content: ""; position: absolute; bottom: -4px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #FF6559; transition: width 0.3s ease; } .services-bottom p a:hover:after { width: 100%; } .shop-bottom {box-sizing:border-box; margin:0 auto 0; padding:0px 0 140px; z-index:20; position:relative; text-align:center;} .shop-bottom p a {font-size:24px; line-height:20px; color:#FF6559; margin-top:30px; display:inline-block; text-decoration:none !important; position:relative;} .shop-bottom p a:after { content: ""; position: absolute; bottom: -4px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #FF6559; transition: width 0.3s ease; } .shop-bottom p a:hover:after { width: 100%; } .about-topimage {position:relative; box-sizing:border-box; margin:100px 0px 0; background:#ff675d;} .about-topimage img {width:100%;} .about-topclaim {position:relative; box-sizing:border-box; margin:120px 0px 0; max-width:700px;} .about-teamlink {padding:60px 0 0px;} .about-teamlink a {font-size:20px; color:#FF6559; letter-spacing:1px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:40px; padding:0 80px 0 0; margin-right:-80px;} .about-teamlink a:hover {text-decoration:none; padding:0 90px 0 10px;} .about-insights {box-sizing:border-box; margin:0 auto 0; padding:40px 0 0px; z-index:20; position:relative;} .about-insights-box {width:50%; float:left;} .about-insights-box p {margin:10px 0 0; font-size:16px;} .about-insights-box img {width:100%;} .about-insights-box1 {width:65%; margin:0;} .about-insights-box2 {width:80%; margin:10% 0 0 20%;} .about-insights-box3 {width:65%; margin:50% 0 0 0%;} .about-insights-box4 {width:65%; margin:5% 0 0 0;} .about-insights-box-special {width:100%; height:100px; margin:0% 0 0 0;} .about-insights-box5 {width:80%; margin:-25% 0 0 20%;} .about-portrait-wrapper {box-sizing:border-box; margin:0 auto 0; padding:140px 0 140px; z-index:20; position:relative;} .about-portrait-left {box-sizing:border-box; width:45%; margin-right:5%; float:left; padding:0px 0 0; text-align:left; background:#ff675d;} .about-portrait-left img, .about-portrait-left video {width:100%;} .about-portrait-right {box-sizing:border-box; width:45%; margin-left:5%; float:left; padding:300px 0 0px;} .about-portrait-keyword {color:#FF6559; padding:0 0 12px; font-size:16px;} .about-portrait-right h2 {padding:0 0 30px;} .about-values-wrapper {box-sizing:border-box; margin:0 auto 0; padding:60px 0 80px; z-index:20; position:relative;} .about-values-left {box-sizing:border-box; width:45%; margin-right:5%; float:left; padding:0px 0 0; text-align:left;} .about-values-left h2 {font-size:32px; line-height:32px; letter-spacing:1px;} .about-values-right {box-sizing:border-box; width:50%; float:left; padding:0px 0 0px; position:relative;} .press-about-values-right {padding:0px 0 150px;} .about-values-right-box {box-sizing:border-box; width:50%; float:left; padding:0px 0 50px 50px; position:relative;} .about-values-right-box h3 {color:#FF6559; font-size:18px; line-height:28px; letter-spacing:1.5px; margin-bottom:-10px;} .about-values-right-boxnumber {position:absolute; left:0; top:0; color:#FF6559; font-size:18px; line-height:28px; letter-spacing:1.5px;} .about-portrait-quote {box-sizing:border-box; margin:0 auto 0; padding:10px 0 80px; z-index:20; position:relative; text-align:center; max-width:500px;} .about-portrait-quote img {width:16px; padding:70px 0;} .about-bottom-quote {box-sizing:border-box; margin:0 0 0 50%; padding:80px 0 180px; z-index:20; position:relative; text-align:bottom; width:50%;} .about-bottom-quote p {font-size:28px; line-height:38px; letter-spacing:0.8px;} .about-bottom-quote p a {font-size:20px; line-height:20px; color:#FF6559; display:inline-block; text-decoration:none !important; padding:10px 80px 8px 0px; margin:10px 0 10px; background:url(../data/files/icon-arrow-right3.png) right center no-repeat; background-size:40px;} .about-bottom-quote p a:hover {padding:10px 90px 8px 0px;} /* PRESS */ .press-index-header{margin:7px 0% 20px 0% !important; box-sizing: border-box; color:#FF6559; font-size:18px; line-height:18px; font-family:'SuisseIntl-Light',Arial,sans-serif; letter-spacing: 1.5px;} .press-index-box-wrapper {width:100%; margin:0 0 0; clear: both;} .press-index-box {width:100%; margin:12px 0 11px; z-index:3 !important; position:relative;} .press-index-box:hover {color:#FF6559; z-index:60 !important;} .press-index-boxbox {float:left;} .press-index-box1 {width:55%; padding: 0 0 0 50px; box-sizing: border-box;} .press-index-box2 {width:37%;} .press-index-box4 {width:8%; text-align:right;} .about-slider {box-sizing:border-box; margin:0 auto 0; padding:40px 0 140px; z-index:20; position:relative; text-align:center;} /* Carousel */ .main-carousel {padding:0px 0 0px;} .block-carousel { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 80px; } .block-carousel-wrapper {box-sizing:border-box; padding:10px; position:relative;} .block-carousel-wrapper:hover {background:none;} .block-carousel img {width:60%; margin:0 0 0 40%;} .block-carousel img:hover {opacity:0.6; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .block-carousel-text {position:absolute; width:300px; left:0; bottom:220px; text-align:left;} .block-carousel p {color:#FF6559; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} /* position dots in carousel */ .flickity-page-dots { bottom: 0px; margin-bottom:50px !important; margin-left:20% !important; } /* white circles */ .flickity-page-dots .dot { width: 8px !important; height: 8px !important; opacity: 1; background: transparent !important; border:1px solid #333; margin:0 5px !important; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background:#333 !important; } /* no circle */ .flickity-button, .flickity-button:hover { background: transparent !important; } /* big previous & next buttons */ .flickity-prev-next-button { width: 60px !important; height: 60px !important; } /* icon color */ .flickity-button-icon { fill: #FF6559 !important; } /* position outside */ .flickity-prev-next-button.previous { left: -7% !important; } .flickity-prev-next-button.next { right: -7% !important; } .block-insta {box-sizing:border-box; margin:0px auto 0px; padding:120px 0px 100px; z-index:0; position:relative; text-align:center; background:#fff;} .block-insta p a {color:#FF6559; text-decoration:none; display:inline-block; position:relative;} .block-insta p a:after { content: ""; position: absolute; bottom: 0px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #ff675d; transition: width 0.3s ease; } .block-insta p a:hover:after { width: 99%; } .block-insta img {width:100%; padding:30px 0 0;} #instafeed {margin:70px 0 0 0; background:none; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} #instafeed:hover a{opacity:.5} #instafeed a{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:calc(100%/5);-ms-flex-preferred-size:calc(100%/5);flex-basis:calc(100%/5);line-height:0;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;} #instafeed a:hover{opacity:1} #instafeed img{width:100%; padding:25px; display:block; box-sizing:border-box;} .contact-top-wrapper {box-sizing:border-box; margin:0 auto 0; padding:80px 0 80px; z-index:20; position:relative;} .contact-top-wrapper p {font-size:28px; line-height:38px; letter-spacing:0.5px;} .contact-top-left {box-sizing:border-box; width:35%; margin:0 5% 0 10%; float:left; padding:0px 0 0; text-align:left;} .contact-top-right {box-sizing:border-box; width:50%; margin-left:0%; float:left; padding:110px 0 0px;} .contact-top-keyword {color:#FF6559; font-size:16px; line-height:0px; letter-spacing:0.5px;} .contact-top-wrapper p a {display:inline-block; text-decoration:none; position:relative;} .contact-top-wrapper p a:after { content: ""; position: absolute; bottom: 0; left: 0px; height: 0; width: 0; border-bottom: 1px solid #000; transition: width 0.3s ease; } .contact-top-wrapper p a:hover:after { width: 100%; } .contact-team-background {position:fixed; width:100%; left:0; right:0; top:0; bottom:0; z-index:0; opacity:1; display:none;} .contact-team-background-over {opacity:1;} .team-overview-wrapper{margin:30px -3% 100px -3% !important;} .team-overview-box {width:27.3%; margin:0% 3% 7%; float:left;} .team-overview-imagewrapper {width:100%; position:relative; padding-top:100%; z-index:10; overflow:hidden; border-radius:50%; background:none;} .team-overview-imagewrapper:hover .team-overview-image-overlay {opacity:1;} .team-overview-image {position:absolute; top:0%; width:100%;} .team-overview-image img {width:100%;} .team-overview-image img:hover {transform:scale(1.05);} .team-overview-image-overlay {position:absolute; top:0%; left:0; width:100%; height:100%; background:none; z-index:50; text-align:center; padding-top:48%; font-size:28px; line-height:18px; letter-spacing:1px; color:#FF6559; opacity:0;} .team-overview-textwrapper {padding:35px 0px 0; font-size:17px; line-height:17px; letter-spacing:0.3px; text-align:center; color:#000;} .team-overview-box h2 {font-size:21px; line-height:28px; padding:0px 0 6px; font-family:'SuisseIntl-Regular',Arial,sans-serif;} .team-overview-textwrapper a {display:inline-block; font-size:13px; padding:13px 0 0; position:relative; text-decoration:none;} .team-overview-textwrapper a:after { content: ""; position: absolute; bottom: -1px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #000; transition: width 0.3s ease; } .team-overview-textwrapper a:hover:after { width: 100%; } /* Invitation Form */ .formwrapper {box-sizing:border-box; max-width:750px; margin:60px auto 60px; padding: 0 0 0 5px;} .formwrapper input[type=text] {border:none; border-bottom:1px solid #000; background:none; margin:5px 0% 6px 0; padding:8px; font-size:16px; color:#000; font-family:'SuisseIntl-Light',Arial,sans-serif; width:100%;} .formwrapper input:focus {outline: none;} .formwrapper input.text, .formwrapper input[type="text"], .formwrapper input[type="button"], .formwrapper input[type="submit"], .input-checkbox { -webkit-appearance: none; border-radius: 0; } .invitebtn {display:block; cursor: url(../data/files/cursorpoint-13.png), auto !important; background:none; border:1px solid #000; margin:45px 0 20px; padding:10px 20px 10px 20px; font-size:16px; font-family:'SuisseIntl-Light',Arial,sans-serif; color:#000;} .invitebtn:hover {background:#000; color:#fff;} .invitation-topimg {width:100%; max-width: 750px; margin:50px auto 0;} .invitation-topimg img {width:100%;} .block4 {box-sizing:border-box; margin:100px auto 100px; padding:0 0 0 5px; z-index:20; position:relative; max-width: 750px;} .block4b p {font-size: 12px; line-height: 16px;} .greenfont {} .redfont {} .styled-select select { background: transparent; width: 100%; padding:14px 5px 10px; font-size:16px; color:#000; font-family:'SuisseIntl-Light',Arial,sans-serif; line-height: 1; border:none; border-bottom:1px solid #000; border-radius: 0; -webkit-appearance: none; margin:0 0 0 0; text-align:left; } .styled-select { width: 102%; overflow: hidden; /* background: url(../data/files/down_arrow_select.png) no-repeat right;*/ border-right:none; } img.desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url(../data/files/desaturate.svg#greyscale); filter: gray; -webkit-filter: grayscale(1); } /* --Mobile */ #mobile {display:none;} /* --Clearfix */ .cf:before, .cf:after {content:""; display:table;} .cf:after {clear:both;} .cf {zoom:1;} .clear {clear:both;} /* Media Queries ***********************/ @media screen and (max-width: 1300px) { p {font-size:18px; line-height:28px; letter-spacing:0.5px; margin-top:22px; color:#000;} h1 {font-size:39px; line-height:52px; letter-spacing:2px;} h2 {ffont-size:32px; line-height:44px; letter-spacing:0.5px;} h3 {font-size:28px; line-height:38px; letter-spacing:0.8px; color:#000;} .contentlimiter-logo {max-width:1400px; margin:auto; padding:0 100px; position:relative; z-index:99;} .block-mainlogo {position:relative; box-sizing:border-box; width:200px; margin:70px 0 50px; padding:0px; z-index:99;} /* navigation burger*/ .navi-icon {position:absolute; box-sizing:border-box; z-index:99; cursor: url(../data/files/cursorpoint-13.png), auto !important; right:20px; top:60px; width:70px; height:68px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%; color:#ff675d; font-size:14px; line-height:14px; letter-spacing:0.4px; padding:27px 0 0 13px;} .navi-icon-letter {float:left; padding:0;} .navi-icon:hover .navi-icon-1 {margin-top:-3px;} .navi-icon:hover .navi-icon-2 {margin-top:3px;} .navi-icon:hover .navi-icon-3 {margin-top:-3px;} .navi-icon:hover .navi-icon-4 {margin-top:3px;} .navi-icon:hover .navi-icon-5 {margin-top:-3px;} /* navigation overlay */ .navigationwrapper { position:fixed; width:55%; top:0px; height:100vh; z-index:99; box-sizing:border-box; padding:0px; background-size: 200% 200%; } .navigation {position:relative; box-sizing:border-box; padding:14vh 0 0 17%; z-index:6; background:none !important;} .navigation span {font-size:12px; line-height:12px; letter-spacing:0.3px;} .navigation a {display:inline-block; text-decoration:none; position:relative; color:#000; margin:26px 0 0; font-size:40px; line-height:40px;} .navigation-bottom {position:relative; box-sizing:border-box; padding:10vh 0 0 17%; z-index:6; background:none !important;} .navigation-bottom span {font-size:12px; line-height:12px; letter-spacing:0.3px; display:block; padding-bottom:28px;} .navigation-bottom-text {position:absolute; box-sizing:border-box; left:17%; bottom:5vh; z-index:6; background:none !important;} .navigation-bottom-text p {font-size:16px; line-height:22px;} .socialwrapper img {width:40px; margin:0 50px 0 0px;} .socialwrapper-footer img {width:40px; margin:0 0px 0 50px !important;} /* end overlay */ #contentcontainer {position:relative; z-index:5; padding:0px 0 0; text-align:left; overflow:hidden; min-height:500px;} .contentlimiter {max-width:1400px; margin:auto; padding:0 100px; position:relative; z-index:6;} .contentlimiter1 {max-width:1200px; margin:auto; padding:0 100px; position:relative; z-index:6;} .contentlimiter2 {max-width:1000px; margin:auto; padding:0 130px; position:relative; z-index:6;} .block404 {font-size:30px; line-height:40px; padding:100px 0;} .block1 {box-sizing:border-box; margin:0px 0; padding:110px 0 90px; z-index:20; position:relative;} .block1 {letter-spacing:1px; font-size:34px; line-height:48px;} .block2 {box-sizing:border-box; margin:70px auto 100px; padding:0px; z-index:20; position:relative; max-width:60%; text-align:center;} .block3 {box-sizing:border-box; margin:100px 0 100px; padding:0px; z-index:20; position:relative; max-width:60%;} .block3 h3 {font-size:24px; line-height:24px; padding:50px 0 10px;} .block-studiopreview {box-sizing:border-box; margin:0px 0 180px; padding:70px 70px; z-index:20; position:relative; background:#CCC4B8;} .block-studiopreview-left {box-sizing:border-box; width:57%; float:left;} .block-studiopreview-left img, .block-studiopreview-left video {width:100%;} .block-studiopreview-right {box-sizing:border-box; width:43%; float:left; padding:20px 0 0 50px;} .block-studiopreview-right p {color:#ff675d; font-size:22px; line-height:30px;} .block-studiopreview-right p a {font-size:17px; color:#FF6559; letter-spacing:0.5px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:50px; padding:0 80px 0 0; margin:10px -80px 0 0;} .block-studiopreview-right p a:hover {text-decoration:none; padding:0 90px 0 0px;} /* PROJECT PREVIEW DESKTOP NEW 2023 */ .project-preview-wrapper-desktop-left {margin:-180px 0% 0px; width: 42%; float: left;} .project-preview-wrapper-desktop-right {margin:120px 0% 0px 16%; width: 42%; float: left;} .project-preview-box-desktop {width:100%; margin:0% 0% 20%;} .project-preview-imagewrapper-wrapper {box-sizing: border-box; padding: 50px 50px; background: #ff0000;} .block1b {width:45%;} .project-preview-wrapper{margin:20px 0% 0px;} .project-preview-box {float:left;} .project-preview-box-portrait {width:40%; margin:1.5% 0% 1%;} .project-preview-box-panorama {width:50%; margin:9.0% 0% 1%;} .project-preview-box-spacer {width:10%; height:100px;} .project-preview-imagewrapper {width:100%; z-index:10; overflow:hidden; background:#ff675d; margin-bottom:0px; position:relative;} .project-preview-imagewrapper:hover {transform: scale(0.97);} .project-preview-image {} .project-preview-image img {width:100%; } .project-preview-imagewrapper:hover img {transform: scale(1.06);} .project-preview-box h2 {padding:14px 0 0; font-size:22px; line-height:30px;} .project-preview-box {text-decoration:none !important;} .project-preview-box a:hover {text-decoration:none !important;} .project-preview-box h2:hover {} .project-preview-keyword {color:#FF6559;} .project-preview-more {padding:70px 0 40px; text-align:center;} .project-preview-more a {font-size:24px;} .project-filter-wrapper {margin:60px 0 30px; position:relative; height:68px;} .project-filter {margin:0 0 0 110px; display:none;} .project-filter-box {height:18px;} .project-filter-title {position:absolute; left:0; top:0; font-size: 15px; line-height:20px; text-decoration:underline; color:#FF6559; letter-spacing:0.3px; cursor: url(../data/files/cursorpoint-13.png), auto !important;} /* Start Isotope*/ .button {display:inline; margin:0 26px 0 0 !important; padding:0; background:none; border: none; border-bottom:none; color: #000; font-family:'SuisseIntl-Light',Arial,sans-serif; font-size: 15px; line-height:20px; letter-spacing:0.3px; cursor: pointer;} .button:hover {border-bottom:1px solid #FF6559;} .button:active, .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} .button-group {font-size: 15px; text-align:left; padding:0 0 15px 0;} .button-group:after {content: ''; display: block; clear: both;} .button-group .button {color:#FF6559 !important; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} .button-group .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} /* End Isotope*/ .project-overview-wrapper{margin:70px -2.5% 100px -2.5% !important;} .project-overview-box {width:28.31%; margin:1.5% 2.5% 5%; float:left;} .project-overview-imagewrapper {width:100%; height:100%; position:relative; padding-top:75%; z-index:10; overflow:hidden; background:#ff675d; margin-bottom:40px;} .project-overview-imagewrapper:hover {transform: scale(0.97);} .project-overview-image {position:absolute; top:0%; left:0; bottom:0; width:100%;} .project-overview-image img {width:100%;} .project-overview-imagewrapper:hover img {transform: scale(1.06);} .project-overview-box h2 {padding:14px 0 0; font-size:22px; line-height:30px;} .project-overview-box {text-decoration:none !important;} .project-overview-box a:hover {text-decoration:none !important;} .project-overview-box h2:hover {} .project-overview-keyword {color:#FF6559;} .project-overview-box-arrow {position:absolute; right:0; bottom:10px; width:40px;} .project-overview-box-arrow img {width:100%;} /* PROJECT INDEX */ .project-index-background-wrapper {padding:100px 0 10px; z-index:20; } .project-index-title{margin:80px 0% 50px 0% !important; font-size:23px; line-height:23px;} .project-index-header{margin:30px 0% 20px 0% !important; color:#FF6559; font-size:15px; line-height:15px;} .project-index-wrapper{margin:0 0% 100px 0% !important; position:relative; z-index:6; font-size:19px; line-height:23px;} .project-index-box {margin:5px 0 4px;} .project-index-box1 {width:30%;} .project-index-box2 {width:30%;} .project-index-box3 {width:30%;} .project-index-box4 {width:10%; text-align:right;} .venues-img { z-index:99 !important; position: absolute; top: 0px; left: 0; width: 500px; height: 750px; background-size: 100% auto; background-repeat:no-repeat; background-image: url("/img/venue-1.jpg"); } .venues-img-wrap { z-index:99 !important; width: 500px; position: fixed; top: 52%; left: 20%; transform:translate(-50%,-50%); overflow-x: hidden; pointer-events: none; visibility: hidden; padding-bottom: 750px; z-index:5 !important; } /* END INDEX */ .img-ratio-portrait {margin-top:-20%;} .img-ratio-landscape {height:100%; width:auto !important;} .project-detail-topwrapper {box-sizing:border-box; margin:0 auto 0; padding:100px 0 220px; z-index:20; position:relative;} .project-detail-toptitle {box-sizing:border-box; width:50%; margin-right:50%; padding:0px 100px 40px 0px; text-align:left;} .project-detail-toptitle2 {box-sizing:border-box; width:100%; padding:0px 100px 40px 0px; text-align:left;} .project-detail-toptitle h1,.project-detail-toptitle2 h1 {font-size:60px; line-height:80px;} .project-detail-topleft {box-sizing:border-box; width:50%; float:left; padding:0px 140px 0 0px; text-align:left;} .project-detail-topleft-readmore {cursor: url(../data/files/cursorpoint-13.png), auto !important; color:#FF6559; margin:30px 0 0;} .project-detail-topright {box-sizing:border-box; width:50%; float:left; padding:20px 0 0 30px;} .project-detail-topright img, .project-detail-topright video {width:100%; padding:0 0 25px;} .project-detail-topright2 {box-sizing:border-box; width:37%; margin-left:13%; float:left; padding:20px 0 0 30px;} .project-detail-topright2 img, .project-detail-topright2 video {width:100%; padding:0 0 25px;} .project-detail-topright p, .project-detail-topright2 p {max-width:400px; padding:0 0 0 3px;} .project-detail-dynamic-wrapper {padding:0 80px; margin:-8% 0 0;} .project-detail-dynamic-wrapper img {width:100%;} .project-detail-dynamic-width1 {width:100%; max-width:1600px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width2 {width:90%; max-width:1300px; margin:8% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width3 {width:80%; max-width:1000px; margin:8% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width33 {width:80%; max-width:1000px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 {width:50%; max-width:700px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 p {font-size:26px; line-height:34px; letter-spacing:1px; margin:0; padding:0;} .project-detail-dynamic-frame {box-sizing:border-box; padding:0px 0; text-align:center;} .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-frame2 {box-sizing:border-box; padding:0px 0; text-align:center; position:relative;} .project-detail-dynamic-frame2 img {display:block; position:absolute; left:50%; margin-left:-30%; top:100%; margin-top:-120% !important; width:auto !important; max-width:60%;} .img-ratio2-landscape {padding:250px 0px;} .img-ratio2-portrait {padding:200px 0;} .project-detail-dynamic-width3 .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-width3 .img-ratio2-portrait {padding:125px 0;} .project-detail-dynamic-halfleft {width:50%; float:left;} .project-detail-dynamic-halfright {width:45%; float:left; margin-left:5%;} .project-detail-dynamic-halfleft2 {width:50%;} .project-detail-dynamic-halfright2 {width:50%; position:absolute; left:50%; top:0;} .project-detail-dynamic-halfright2 img {width:100%; margin-top:-5%;} .project-detail-dynamic-halfright-text {padding:40px 0 0; width:65%; min-width:400px;} .project-detail-dynamic-imagedesc {padding:10px 0 0;} .project-detail-dynamic-imagedesc p {padding:0; margin:0;} /* Dynamic Carousel*/ .main-carousel5 {padding:0px 0 0px;} .block-carousel5 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell5; padding:0 0 0px; } .block-carousel5 img {width:100%; margin:0 0 0 0%;} .project-detail-imgwrapper {margin:0 -1.2% 0px;} .project-detail-imgbox {margin:1.2% 1.2%; float:left;} .project-detail-imgbox img {width:100%;} .project-detail-imgbox video {width:100%;} .project-detail-imgbox-overlay {position:absolute; box-sizing:border-box; top:0%; width:100%; bottom:0; text-align:center; background:#FFF; opacity:0; z-index:11;} .project-detail-imgbox-overlay:hover {opacity:0.4; transition-delay:0.1s;} .project-detail-imgbox-overlay h1 {font-size:38px; font-family:'SuisseIntl-Light',Arial,sans-serif; padding:30% 0 0;} .project-detail-imgbox1 {width:22.55%;} .project-detail-imgbox2 {width:47.55%;} .project-detail-imgbox3 {width:97.55%;} .project-detail-imgbox4 {width:30.88%;} .project-detail-bottom-photography {box-sizing:border-box; margin:0 auto 0; padding:20px 0 60px; z-index:20; position:relative; text-align:center;} .project-detail-back {box-sizing:border-box; margin:0 auto 0; padding:120px 0 200px; z-index:20; position:relative; text-align:center;} .project-detail-back a {font-size:20px; line-height:20px;} .project-detail-nextouterwrapper a:hover {text-decoration:none !important;} .project-detail-nextwrapper {box-sizing:border-box; margin:0 auto 200px; padding:80px 100px 100px; z-index:20; position:relative; background:#B4C6CD;} .project-detail-nextwrapper:hover .project-detail-nexttitle img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nextwrapper:hover .project-detail-nexttitle2 img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nexttitle {box-sizing:border-box; width:50%; margin-right:50%; padding:0px 100px 20px 0px; text-align:left;} .project-detail-nexttitle2 {box-sizing:border-box; position:absolute; width:50%; left:0; padding:0px 100px 20px 180px; text-align:left; } .project-detail-nexttitle img, .project-detail-nexttitle2 img {width:50px; display:block; padding:40px 0 0; -webkit-animation: bounceLeft 2s infinite; animation: bounceLeft 2s infinite;} .project-detail-nextleft {position:absolute; left:100px; bottom:100px;} .project-detail-nextleft span p {color:#FF6559;} .project-detail-nextleft h3 {letter-spacing:1.5px; padding:10px 0 0;} .project-detail-nextright {box-sizing:border-box; width:100%; padding:0px 0 0 51%; margin:-80px 0 0 0;} .project-detail-nextright img, .project-detail-nextright video {width:100%;} .project-detail-nextright2 {box-sizing:border-box; width:100%; padding:16px 0 0 60%;} .project-detail-nextright2 img, .project-detail-nextright2 video {width:100%;} .project-detail-nextright p {max-width:400px; padding:0 0 0 3px;} /* ARROW BOUNCE */ /* right bounce */ @-webkit-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(-10px); transform: translateX(-10px);} 60% {-webkit-transform: translateX(-5px); transform: translateX(-5px);}} @-moz-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(-10px);} 60% {transform: translateX(-5px);}} @keyframes bounceRight {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(-10px); transform: translateX(-10px);} 60% {-ms-transform: translateX(-5px); transform: translateX(-5px);}} /* /right bounce */ /* left bounce */ @-webkit-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(10px); transform: translateX(10px);} 60% {-webkit-transform: translateX(5px); transform: translateX(5px);}} @-moz-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(10px);} 60% {transform: translateX(5px);}} @keyframes bounceLeft {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(10px); transform: translateX(10px);} 60% {-ms-transform: translateX(5px); transform: translateX(5px);}} /* left bounce */ /* down bounce */ @-webkit-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0);} 40% {-webkit-transform: translateY(-10px); transform: translateY(-10px);} 60% {-webkit-transform: translateY(-5px); transform: translateY(-5px);}} @-moz-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);}} @keyframes bounceDown {0%, 20%, 50%, 80%,100% {-ms-transform: translateY(0); transform: translateY(0);} 40% {-ms-transform: translateY(-10px); transform: translateY(-10px);} 60% {-ms-transform: translateY(-5px); transform: translateY(-5px);}} /* /down bounce */ /* SERVICES */ .services-circle-wrapper {height:470px; margin:140px auto 120px;} .services-circle {width:420px; height:420px; } .services-circle1 {left:31%; top:0px; } .services-circle2 {left:48%; top:-100px; width:420px; height:420px;} /* service units */ .services-unit-topblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:140px 0 140px; z-index:20; position:relative;} .services-unit-topblock-left {box-sizing:border-box; width:60%; float:left; padding:0px 0 0; text-align:left;} .services-unit-topblock-right {box-sizing:border-box; width:40%; float:left; padding:70px 0 0 50px;} .services-unit-listblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:20px 0 20px; z-index:20; position:relative;} .services-unit-listblock-left {box-sizing:border-box; width:60%; float:left; padding:0px 100px 0 0px; text-align:left;} .services-unit-listblock-left img, .services-unit-listblock-left video {width:100%;} .services-unit-listblock-left-box-active {display:inherit;} .services-unit-listblock-left-box-passiv {display:none;} .services-unit-listblock-right {box-sizing:border-box; width:40%; float:left; padding:200px 0 0 50px;} .services-unit-listblock-right p {color:#FF6559; margin:0 0 40px;} .services-unit-listblock-right-box {color:#FF6559; font-size:28px; margin:10px 0; position:relative; width:auto; display:inline-block; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .services-unit-listblock-right-box:after {background: none repeat scroll 0 0 transparent; bottom: -1px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .services-unit-listblock-right-box:hover:after {width: 100%; left: 0;} .services-unit-listblock-right-box-active:after {background: none repeat scroll 0 0 transparent; bottom: -1px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 100%;} .services-unit-process {box-sizing:border-box; margin:0 auto 0; padding:160px 0 200px; z-index:20; position:relative;} .services-unit-process h2 {font-size:46px; line-height:46px; letter-spacing:1px;} .services-unit-process-wrapper {margin:30px 0 0;} .services-unit-process-box {box-sizing:border-box; float:left; width:33.3%; padding:0 80px 0 0; margin:100px 0 0; position:relative;} .services-unit-process-box h2 {font-size:28px; line-height:28px;} .services-unit-process-box p {margin:12px 0 0; max-width:260px;} .services-unit-process-box-top {color:#FF6559; font-size:18px; letter-spacing:3.9px; float:left;} .services-unit-process-box-topline {width:85%; height:1px; background:#FF6559; margin:7px 0 40px 15%;} .services-unit-process-box-topline2 {width:85%; height:1px; margin:7px 0 40px 15%;} .services-unit-process-box-topicon {position:absolute; left:-17px; top:-20px; width:60px; height:59px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%;} .services-clients {box-sizing:border-box; margin:0 auto 0; padding:160px 0 200px; z-index:20; position:relative; text-align:center; background:#dad0c4;} .services-clients img {width:100%; padding:0px 0px 0px;} .services-clients p {font-size:28px; line-height:38px; color:#FF6559;} .services-clients-logos {padding:90px 0 0;} .main-carousel3 {padding:0px 0 0px;} .block-carousel3 { width: 170px; height: auto; box-sizing:border-box; padding:0px; margin:0 80px 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0px 0px; } .services-testimonials-wrapper {background:#f0f0ef;} .services-testimonials {box-sizing:border-box; margin:0 auto 0; padding:160px 0 160px; z-index:20; position:relative; text-align:center; max-width:500px;} .services-testimonials img {width:16px; padding:70px 0 40px;} .services-testimonials p {font-size:28px; line-height:38px;} .services-testimonials-byline {padding: 60px 0 0; font-size:18px; line-height:18px; letter-spacing:0.5px; color:#FF6559;} .main-carousel2 {padding:0px 0 0px;} .block-carousel2 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 80px; } .about-topimage {position:relative; box-sizing:border-box; margin:100px 0px 0;} .about-topimage img {width:100%;} .about-topclaim {position:relative; box-sizing:border-box; margin:120px 0px 0; max-width:700px;} .about-portrait-wrapper {box-sizing:border-box; margin:0 auto 0; padding:140px 0 140px; z-index:20; position:relative;} .about-portrait-left {box-sizing:border-box; width:45%; margin-right:5%; float:left; padding:0px 0 0; text-align:left;} .about-portrait-left img, .about-portrait-left video {width:100%;} .about-portrait-right {box-sizing:border-box; width:45%; margin-left:5%; float:left; padding:300px 0 0px;} .about-portrait-keyword {color:#FF6559; padding:0 0 20px;} .about-portrait-right h2 {padding:0 0 30px;} .about-values-wrapper {box-sizing:border-box; margin:0 auto 0; padding:60px 0 80px; z-index:20; position:relative;} .about-values-left {box-sizing:border-box; width:45%; margin-right:5%; float:left; padding:0px 0 0; text-align:left;} .about-values-left h3 {font-size:32px; line-height:32px; letter-spacing:1px;} .about-values-right {box-sizing:border-box; width:50%; float:left; padding:0px 0 0px; position:relative;} .about-values-right-box {box-sizing:border-box; width:50%; float:left; padding:0px 0 50px 50px; position:relative;} .about-values-right-box h3 {color:#FF6559; font-size:18px; line-height:28px; letter-spacing:1.5px; margin-bottom:-10px;} .about-values-right-boxnumber {position:absolute; left:0; top:0; color:#FF6559; font-size:18px; line-height:28px; letter-spacing:1.5px;} .about-portrait-quote {box-sizing:border-box; margin:0 auto 0; padding:10px 0 80px; z-index:20; position:relative; text-align:center; max-width:500px;} .about-portrait-quote img {width:16px; padding:70px 0;} .about-bottom-quote {box-sizing:border-box; margin:0 0 0 50%; padding:80px 0 180px; z-index:20; position:relative; text-align:bottom; width:50%;} .about-bottom-quote p {font-size:28px; line-height:38px; letter-spacing:0.8px;} .about-bottom-quote p a {font-size:20px; line-height:20px; color:#FF6559; display:inline-block; text-decoration:none !important; padding:10px 80px 8px 0px; margin:10px 0 10px; background:url(../data/files/icon-arrow-right3.png) right center no-repeat; background-size:40px;} .about-bottom-quote p a:hover {padding:10px 90px 8px 0px;} .about-slider {box-sizing:border-box; margin:0 auto 0; padding:40px 0 140px; z-index:20; position:relative; text-align:center;} /* Carousel */ .main-carousel {padding:0px 0 0px;} .block-carousel { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 80px; } .block-carousel-wrapper {box-sizing:border-box; padding:10px; position:relative;} .block-carousel-wrapper:hover {background:none;} .block-carousel img {width:60%; margin:0 0 0 40%;} .block-carousel img:hover {opacity:0.6; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .block-carousel-text {position:absolute; width:300px; left:0; bottom:220px; text-align:left;} .block-carousel p {color:#FF6559; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} /* position dots in carousel */ .flickity-page-dots { bottom: 0px; margin-bottom:50px !important; margin-left:20% !important; } /* white circles */ .flickity-page-dots .dot { width: 8px !important; height: 8px !important; opacity: 1; background: transparent !important; border:1px solid #333; margin:0 5px !important; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background:#333 !important; } /* no circle */ .flickity-button, .flickity-button:hover { background: transparent !important; } /* big previous & next buttons */ .flickity-prev-next-button { width: 60px !important; height: 60px !important; } /* icon color */ .flickity-button-icon { fill: #FF6559 !important; } /* position outside */ .flickity-prev-next-button.previous { left: -7% !important; } .flickity-prev-next-button.next { right: -7% !important; } .block-insta {box-sizing:border-box; margin:0px auto 0px; padding:120px 0px 160px; z-index:20; position:relative; text-align:center; background:#f0f0ef;} .block-insta p a {font-size:20px; line-height:20px; color:#FF6559; text-decoration:none; display:inline-block; position:relative;} .block-insta p a:after { content: ""; position: absolute; bottom: -5px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #ff675d; transition: width 0.3s ease; } .block-insta p a:hover:after { width: 99%; } .block-insta img {width:100%; padding:30px 0 0;} #instafeed {margin:70px 0 0 0; background:none; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} #instafeed:hover a{opacity:.5} #instafeed a{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:calc(100%/5);-ms-flex-preferred-size:calc(100%/5);flex-basis:calc(100%/5);line-height:0;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;} #instafeed a:hover{opacity:1} #instafeed img{width:100%; padding:25px; display:block; box-sizing:border-box;} .contact-top-wrapper {box-sizing:border-box; margin:0 auto 0; padding:140px 0 140px; z-index:20; position:relative;} .contact-top-wrapper p {font-size:36px; line-height:56px; letter-spacing:0.8px;} .contact-top-left {box-sizing:border-box; width:35%; margin:0 5% 0 10%; float:left; padding:0px 0 0; text-align:left;} .contact-top-right {box-sizing:border-box; width:50%; margin-left:0%; float:left; padding:150px 0 0px;} .contact-top-keyword {color:#FF6559; font-size:18px; line-height:28px; letter-spacing:0.5px;} .contact-top-wrapper p a {display:inline-block; text-decoration:none; position:relative;} .contact-top-wrapper p a:after { content: ""; position: absolute; bottom: 0; left: 0px; height: 0; width: 0; border-bottom: 1px solid #000; transition: width 0.3s ease; } .contact-top-wrapper p a:hover:after { width: 100%; } .team-overview-wrapper{margin:80px -3% 100px -3% !important;} .team-overview-box {width:27.3%; margin:0% 3% 7%; float:left;} .team-overview-imagewrapper {width:100%; position:relative; padding-top:100%; z-index:10; overflow:hidden; border-radius:50%; } .team-overview-imagewrapper:hover .team-overview-image-overlay {opacity:1;} .team-overview-image {position:absolute; top:0%; width:100%;} .team-overview-image img {width:100%;} .team-overview-image img:hover {transform:scale(1.05);} .team-overview-image-overlay {position:absolute; top:0%; left:0; width:100%; height:100%; z-index:50; text-align:center; padding-top:48%; font-size:18px; line-height:18px; letter-spacing:1px; color:#FFF; opacity:0;} .team-overview-textwrapper {padding:20px 0px 0; font-size:17px; line-height:17px; letter-spacing:0.3px;} .team-overview-box h2 {font-size:21px; line-height:28px; padding:0px 0 6px;} .team-overview-textwrapper a {font-size:13px; padding:13px 0 0;} } @media screen and (max-width: 1100px) { p {font-size:16px; line-height:25px; letter-spacing:0.4px; margin-top:20px; color:#000;} h1 {font-size:32px; line-height:42px; letter-spacing:1px;} h2 {ffont-size:28px; line-height:40px; letter-spacing:0.5px;} h3 {font-size:26px; line-height:35px; letter-spacing:0.5px; color:#000;} .contentlimiter-logo {max-width:1400px; margin:auto; padding:0 60px; position:relative; z-index:99;} .block-mainlogo {position:relative; box-sizing:border-box; width:170px; margin:60px 0 50px; padding:0px; z-index:99;} /* navigation burger*/ .navi-icon {position:absolute; box-sizing:border-box; z-index:99; cursor: url(../data/files/cursorpoint-13.png), auto !important; right:20px; top:40px; width:62px; height:60px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%; color:#ff675d; font-size:14px; line-height:14px; letter-spacing:0.4px; padding:23px 0 0 9px;} .navi-icon-letter {float:left; padding:0;} .navi-icon:hover .navi-icon-1 {margin-top:-3px;} .navi-icon:hover .navi-icon-2 {margin-top:3px;} .navi-icon:hover .navi-icon-3 {margin-top:-3px;} .navi-icon:hover .navi-icon-4 {margin-top:3px;} .navi-icon:hover .navi-icon-5 {margin-top:-3px;} /* navigation overlay */ .navigationwrapper { position:fixed; width:55%; top:0px; height:100vh; z-index:99; box-sizing:border-box; padding:0px; background-size: 200% 200%; } .navigationwrapper-show {right:0;} .navigation {position:relative; box-sizing:border-box; padding:14vh 0 0 17%; z-index:6; background:none !important;} .navigation span {font-size:12px; line-height:12px; letter-spacing:0.3px;} .navigation a {display:inline-block; text-decoration:none; position:relative; color:#000; margin:26px 0 0; font-size:40px; line-height:40px;} .navigation-bottom {position:relative; box-sizing:border-box; padding:10vh 0 0 17%; z-index:6; background:none !important;} .navigation-bottom span {font-size:12px; line-height:12px; letter-spacing:0.3px; display:block; padding-bottom:28px;} .navigation-bottom-text {position:absolute; box-sizing:border-box; left:17%; bottom:5vh; z-index:6; background:none !important;} .navigation-bottom-text p {font-size:16px; line-height:22px;} .socialwrapper img {width:40px; margin:0 50px 0 0px;} .socialwrapper-footer img {width:40px; margin:0 0px 0 50px !important;} /* end overlay */ #contentcontainer {position:relative; z-index:5; padding:0px 0 0; text-align:left; overflow:hidden; min-height:500px;} .contentlimiter {max-width:1400px; margin:auto; padding:0 60px; position:relative; z-index:6;} .contentlimiter1 {max-width:1200px; margin:auto; padding:0 60px; position:relative; z-index:6;} .contentlimiter2 {max-width:1000px; margin:auto; padding:0 100px; position:relative; z-index:6;} .block404 {font-size:30px; line-height:40px; padding:100px 0;} .block1 {box-sizing:border-box; margin:0px 0; padding:90px 0 90px; z-index:20; position:relative; font-size:28px; line-height: 38px;} .block2 {box-sizing:border-box; margin:70px auto 100px; padding:0px; z-index:20; position:relative; max-width:60%; text-align:center;} .block3 {box-sizing:border-box; margin:50px 0 100px; padding:0px; z-index:20; position:relative; max-width:60%;} .block3 h3 {font-size:24px; line-height:24px; padding:50px 0 10px;} /* PROJECT PREVIEW DESKTOP NEW 2023 */ .project-preview-wrapper-desktop-left {margin:-180px 0% 0px; width: 42%; float: left;} .project-preview-wrapper-desktop-right {margin:80px 0% 0px 15%; width: 42%; float: left;} .project-preview-box-desktop {width:100%; margin:0% 0% 20%;} .project-preview-imagewrapper-wrapper {box-sizing: border-box; padding: 40px 40px; background: #ff0000;} .block1b {width:45%;} .project-preview-wrapper{margin:20px 0% 0px;} .project-preview-box {float:left;} .project-preview-box-portrait {width:40%; margin:1.5% 0% 1%;} .project-preview-box-panorama {width:50%; margin:9.0% 0% 1%;} .project-preview-box-spacer {width:10%; height:100px;} .project-preview-imagewrapper {width:100%; z-index:10; overflow:hidden; background:#ff675d; margin-bottom:0px; position:relative;} .project-preview-imagewrapper:hover {transform: scale(0.97);} .project-preview-image {} .project-preview-image img {width:100%; } .project-preview-image-frame {padding: 40px 40px;} .project-preview-imagewrapper:hover img {transform: scale(1.06);} .project-preview-box h2 {padding:14px 0 0; font-size:22px; line-height:30px;} .project-preview-box {text-decoration:none !important;} .project-preview-box a:hover {text-decoration:none !important;} .project-preview-box h2:hover {} .project-preview-keyword {color:#FF6559; margin-top: 30px;} .project-preview-more {padding:40px 0 50px; margin-top: 0; text-align:center;} .project-preview-more a {font-size:20px;} .project-filter-wrapper {margin:40px 0 10px; position:relative; height:68px;} .project-filter {margin:0 0 0 110px; display:none;} .project-filter-box {height:18px;} .project-filter-title {position:absolute; left:0; top:0; font-size: 15px; line-height:20px; text-decoration:underline; color:#FF6559; letter-spacing:0.3px; cursor: url(../data/files/cursorpoint-13.png), auto !important;} /* Start Isotope*/ .button {display:inline; margin:0 26px 0 0 !important; padding:0; background:none; border: none; border-bottom:none; color: #000; font-family:'SuisseIntl-Light',Arial,sans-serif; font-size: 15px; line-height:20px; letter-spacing:0.3px; cursor: pointer;} .button:hover {border-bottom:1px solid #FF6559;} .button:active, .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} .button-group {font-size: 15px; text-align:left; padding:0 0 15px 0;} .button-group:after {content: ''; display: block; clear: both;} .button-group .button {color:#FF6559 !important; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} .button-group .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} /* End Isotope*/ .project-overview-wrapper{margin:50px -2.5% 100px -2.5% !important;} .project-overview-box {width:28.31%; margin:1.5% 2.5% 5%; float:left;} .project-overview-imagewrapper {width:100%; height:100%; position:relative; padding-top:75%; z-index:10; overflow:hidden; background:#ff675d; margin-bottom:20px;} .project-overview-imagewrapper:hover {transform: scale(0.97);} .project-overview-image {position:absolute; top:0%; left:0; bottom:0; width:100%;} .project-overview-image img {width:100%;} .project-overview-imagewrapper:hover img {transform: scale(1.06);} .project-overview-box h2 {padding:14px 0 0; font-size:20px; line-height:27px;} .project-overview-box {text-decoration:none !important;} .project-overview-box a:hover {text-decoration:none !important;} .project-overview-box h2:hover {} .project-overview-keyword {color:#FF6559; font-size:16px;} .project-overview-box-arrow {position:absolute; right:0; bottom:10px; width:40px;} .project-overview-box-arrow img {width:100%;} /* PROJECT INDEX */ .project-index-background-wrapper {padding:30px 0 10px; z-index:20; } .project-index-title{margin:50px 0% 50px 0% !important; font-size:21px; line-height:21px;} .project-index-header{margin:10px 0% 20px 0% !important; color:#FF6559; font-size:15px; line-height:15px;} .project-index-wrapper{margin:0 0% 60px 0% !important; position:relative; z-index:6; font-size:18px; line-height:21px;} .project-index-box {margin:5px 0 4px;} .project-index-box1 {width:45%;} .project-index-box2 {width:0%; display:none;} .project-index-box3 {width:40%;} .project-index-box4 {width:15%; text-align:right;} .venues-img { z-index:5 !important; position: absolute; top: 0px; left: 0; width: 500px; height: 750px; background-size: 100% auto; background-repeat:no-repeat; background-image: url("/img/venue-1.jpg"); } .venues-img-wrap { z-index:5 !important; width: 500px; position: fixed; top: 52%; left: 20%; transform:translate(-50%,-50%); overflow-x: hidden; pointer-events: none; visibility: hidden; padding-bottom: 750px; z-index:5 !important; } /* END INDEX */ .img-ratio-portrait {margin-top:-20%;} .img-ratio-landscape {height:100%; width:auto !important;} .project-detail-topwrapper {box-sizing:border-box; margin:0 auto 0; padding:100px 0 220px; z-index:20; position:relative;} .project-detail-toptitle {box-sizing:border-box; width:50%; margin-right:50%; padding:0px 100px 20px 0px; text-align:left;} .project-detail-toptitle2 {box-sizing:border-box; width:100%; padding:0px 100px 20px 0px; text-align:left;} .project-detail-toptitle h1,.project-detail-toptitle2 h1 {font-size:36px; line-height:46px;} .project-detail-topleft {box-sizing:border-box; width:50%; float:left; padding:0px 140px 0 0px; text-align:left;} .project-detail-topleft-readmore {cursor: url(../data/files/cursorpoint-13.png), auto !important; color:#FF6559; margin:30px 0 0;} .project-detail-topright {box-sizing:border-box; width:50%; float:left; padding:20px 0 0 30px;} .project-detail-topright img, .project-detail-topright video {width:100%; padding:0 0 25px;} .project-detail-topright2 {box-sizing:border-box; width:37%; margin-left:13%; float:left; padding:20px 0 0 30px;} .project-detail-topright2 img, .project-detail-topright2 video {width:100%; padding:0 0 25px;} .project-detail-topright p, .project-detail-topright2 p {max-width:400px; padding:0 0 0 3px;} .project-detail-dynamic-wrapper {padding:0 80px; margin:-8% 0 0;} .project-detail-dynamic-wrapper img {width:100%;} .project-detail-dynamic-width1 {max-width:1600px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width2 {max-width:1300px; margin:8% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width3 {max-width:1000px; margin:8% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width33 {max-width:1000px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 {max-width:700px; margin:8% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 p {font-size:26px; line-height:34px; letter-spacing:1px; margin:0; padding:0;} .project-detail-dynamic-frame {box-sizing:border-box; padding:0px 0; text-align:center;} .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-frame2 {box-sizing:border-box; padding:0px 0; text-align:center; position:relative;} .project-detail-dynamic-frame2 img {display:block; position:absolute; left:50%; margin-left:-30%; top:100%; margin-top:-120% !important; width:auto !important; max-width:60%;} .img-ratio2-landscape {padding:250px 0px;} .img-ratio2-portrait {padding:200px 0;} .project-detail-dynamic-width3 .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-width3 .img-ratio2-portrait {padding:125px 0;} .project-detail-dynamic-halfleft {width:50%; float:left;} .project-detail-dynamic-halfright {width:45%; float:left; margin-left:5%;} .project-detail-dynamic-halfleft2 {width:50%;} .project-detail-dynamic-halfright2 {width:50%; position:absolute; left:50%; top:0;} .project-detail-dynamic-halfright2 img {width:100%; margin-top:-5%;} .project-detail-dynamic-halfright-text {padding:40px 0 0; width:65%; min-width:400px;} .project-detail-dynamic-imagedesc {padding:10px 0 0;} .project-detail-dynamic-imagedesc p {padding:0; margin:0;} /* Dynamic Carousel*/ .main-carousel5 {padding:0px 0 0px;} .block-carousel5 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell5; padding:0 0 0px; } .block-carousel5 img {width:100%; margin:0 0 0 0%;} .project-detail-imgwrapper {margin:0 -1.2% 0px;} .project-detail-imgbox {margin:1.2% 1.2%; float:left;} .project-detail-imgbox img {width:100%;} .project-detail-imgbox video {width:100%;} .project-detail-imgbox-overlay {position:absolute; box-sizing:border-box; top:0%; width:100%; bottom:0; text-align:center; background:#FFF; opacity:0; z-index:11;} .project-detail-imgbox-overlay:hover {opacity:0.4; transition-delay:0.1s;} .project-detail-imgbox-overlay h1 {font-size:38px; font-family:'SuisseIntl-Light',Arial,sans-serif; padding:30% 0 0;} .project-detail-imgbox1 {width:22.55%;} .project-detail-imgbox2 {width:47.55%;} .project-detail-imgbox3 {width:97.55%;} .project-detail-imgbox4 {width:30.88%;} .project-detail-bottom-photography {box-sizing:border-box; margin:0 auto 0; padding:20px 0 60px; z-index:20; position:relative; text-align:center;} .project-detail-back {box-sizing:border-box; margin:0 auto 0; padding:90px 0 140px; z-index:20; position:relative; text-align:center;} .project-detail-nextouterwrapper a:hover {text-decoration:none !important;} .project-detail-nextwrapper {box-sizing:border-box; margin:0 auto 200px; padding:60px 70px 70px; z-index:20; position:relative; background:#B4C6CD;} .project-detail-nextwrapper:hover .project-detail-nexttitle img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nextwrapper:hover .project-detail-nexttitle2 img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nexttitle {box-sizing:border-box; width:50%; margin-right:50%; padding:0px 100px 20px 0px; text-align:left; font-size:36px; line-height:46px; color:#FF6559;} .project-detail-nexttitle2 {box-sizing:border-box; position:absolute; width:50%; left:0; padding:0px 100px 20px 180px; text-align:left; font-size:36px; line-height:46px; color:#FF6559;} .project-detail-nexttitle img, .project-detail-nexttitle2 img {width:50px; display:block; padding:40px 0 0; -webkit-animation: bounceLeft 2s infinite; animation: bounceLeft 2s infinite;} .project-detail-nextleft {position:absolute; left:70px; bottom:70px;} .project-detail-nextleft span p {color:#FF6559;} .project-detail-nextleft h3 {letter-spacing:1.5px; padding:10px 0 0;} .project-detail-nextright {box-sizing:border-box; width:100%; padding:0px 0 0 51%; margin:-80px 0 0 0;} .project-detail-nextright img, .project-detail-nextright video {width:100%;} .project-detail-nextright2 {box-sizing:border-box; width:100%; padding:16px 0 0 60%;} .project-detail-nextright2 img, .project-detail-nextright2 video {width:100%;} .project-detail-nextright p {max-width:400px; padding:0 0 0 3px;} /* ARROW BOUNCE */ /* right bounce */ @-webkit-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(-10px); transform: translateX(-10px);} 60% {-webkit-transform: translateX(-5px); transform: translateX(-5px);}} @-moz-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(-10px);} 60% {transform: translateX(-5px);}} @keyframes bounceRight {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(-10px); transform: translateX(-10px);} 60% {-ms-transform: translateX(-5px); transform: translateX(-5px);}} /* /right bounce */ /* left bounce */ @-webkit-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(10px); transform: translateX(10px);} 60% {-webkit-transform: translateX(5px); transform: translateX(5px);}} @-moz-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(10px);} 60% {transform: translateX(5px);}} @keyframes bounceLeft {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(10px); transform: translateX(10px);} 60% {-ms-transform: translateX(5px); transform: translateX(5px);}} /* left bounce */ /* down bounce */ @-webkit-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0);} 40% {-webkit-transform: translateY(-10px); transform: translateY(-10px);} 60% {-webkit-transform: translateY(-5px); transform: translateY(-5px);}} @-moz-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);}} @keyframes bounceDown {0%, 20%, 50%, 80%,100% {-ms-transform: translateY(0); transform: translateY(0);} 40% {-ms-transform: translateY(-10px); transform: translateY(-10px);} 60% {-ms-transform: translateY(-5px); transform: translateY(-5px);}} /* /down bounce */ /* SERVICES */ .services-circle-wrapper {height:370px; margin:120px 0 120px -10%;} .services-circle {width:320px; height:320px; } .services-circle1 {left:31%; top:0px; } .services-circle2 {left:48%; top:-100px; width:320px; height:320px;} /* DROPBOWN RIGHT */ .services-dropdown-righttext {box-sizing:border-box; width:60%; float:right; padding:40px 0 0 0px;} .services-dropdown-righttext-item-wrapper {margin:70px 0 0;} .services-dropdown-righttext-item {margin:20px 0; font-size:22px; font-family:'SuisseIntl-Light',Arial,sans-serif; color:#FF6559;} /* service units */ .services-unit-topblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:140px 0 140px; z-index:20; position:relative;} .services-unit-topblock-left {box-sizing:border-box; width:50%; float:left; padding:0px 0 0; text-align:left;} .services-unit-topblock-right {box-sizing:border-box; width:50%; float:left; padding:50px 0 0 50px;} .services-unit-listblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:20px 0 20px; z-index:20; position:relative;} .services-unit-listblock-left {box-sizing:border-box; width:60%; float:left; padding:0px 100px 0 0px; text-align:left;} .services-unit-listblock-left img, .services-unit-listblock-left video {width:100%;} .services-unit-listblock-left-box-active {display:inherit;} .services-unit-listblock-left-box-passiv {display:none;} .services-unit-listblock-right {box-sizing:border-box; width:40%; float:left; padding:160px 0 0 50px;} .services-unit-listblock-right p {color:#FF6559; margin:0 0 20px;} .services-unit-listblock-right-box {color:#FF6559; font-size:24px; margin:8px 0; position:relative; width:auto; display:inline-block; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .services-unit-listblock-right-box:after {background: none repeat scroll 0 0 transparent; bottom: -1px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .services-unit-listblock-right-box:hover:after {width: 100%; left: 0;} .services-unit-listblock-right-box-active:after {background: none repeat scroll 0 0 transparent; bottom: -1px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 100%;} .services-unit-process {box-sizing:border-box; margin:0 auto 0; padding:160px 0 200px; z-index:20; position:relative;} .services-unit-process h2 {font-size:46px; line-height:46px; letter-spacing:1px;} .services-unit-process-wrapper {margin:30px 0 0;} .services-unit-process-box {box-sizing:border-box; float:left; width:33.3%; padding:0 80px 0 0; margin:100px 0 0; position:relative;} .services-unit-process-box h2 {font-size:22px; line-height:22px;} .services-unit-process-box p {margin:12px 0 0; max-width:260px;} .services-unit-process-box-top {color:#FF6559; font-size:16px; letter-spacing:3.9px; float:left;} .services-unit-process-box-topline {width:85%; height:1px; background:#FF6559; margin:7px 0 40px 15%;} .services-unit-process-box-topline2 {width:85%; height:1px; margin:7px 0 40px 15%;} .services-unit-process-box-topicon {position:absolute; left:-13px; top:-17px; width:52px; height:51px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%;} .services-clients {box-sizing:border-box; margin:0 auto 0; padding:100px 0 120px; z-index:20; position:relative; text-align:center; background:#dad0c4;} .services-clients img {width:100%; padding:0px 0px 0px;} .services-clients p {font-size:22px; line-height:38px; color:#FF6559;} .services-clients-logos {padding:50px 0 0;} .main-carousel3 {padding:0px 0 0px;} .block-carousel3 { width: 140px; height: auto; box-sizing:border-box; padding:0px; margin:0 40px 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0px 0px; } .services-testimonials-wrapper {background:#f0f0ef;} .services-testimonials {box-sizing:border-box; margin:0 auto 0; padding:120px 0 120px; z-index:20; position:relative; text-align:center; max-width:500px;} .services-testimonials img {width:13px; padding:40px 0 30px;} .services-testimonials p {font-size:22px; line-height:31px;} .services-testimonials-byline {padding: 40px 0 0; font-size:18px; line-height:18px; letter-spacing:0.5px; color:#FF6559;} .main-carousel2 {padding:0px 0 0px;} .block-carousel2 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 80px; } .about-topimage {position:relative; box-sizing:border-box; margin:80px 0px 0;} .about-topimage img {width:100%;} .about-topclaim {position:relative; box-sizing:border-box; margin:100px 0px 0; max-width:700px;} .about-portrait-wrapper {box-sizing:border-box; margin:0 auto 0; padding:140px 0 140px; z-index:20; position:relative;} .about-portrait-left {box-sizing:border-box; width:45%; margin-right:5%; float:left; padding:0px 0 0; text-align:left;} .about-portrait-left img, .about-portrait-left video {width:100%;} .about-portrait-right {box-sizing:border-box; width:45%; margin-left:5%; float:left; padding:220px 0 0px;} .about-portrait-keyword {color:#FF6559; padding:0 0 20px;} .about-portrait-right h2 {padding:0 0 20px;} .about-values-wrapper {box-sizing:border-box; margin:0 auto 0; padding:60px 0 80px; z-index:20; position:relative;} .about-values-left {box-sizing:border-box; width:45%; margin-right:5%; float:left; padding:0px 0 0; text-align:left;} .about-values-left h2 {font-size:32px; line-height:42px; letter-spacing:2px;} .about-values-right {box-sizing:border-box; width:50%; float:left; padding:0px 0 0px; position:relative;} .about-values-right-box {box-sizing:border-box; width:50%; float:left; padding:0px 0 50px 50px; position:relative;} .about-values-right-box h3 {color:#FF6559; font-size:18px; line-height:28px; letter-spacing:1.5px; margin-bottom:-10px;} .about-values-right-boxnumber {position:absolute; left:0; top:0; color:#FF6559; font-size:18px; line-height:28px; letter-spacing:1.5px;} .about-portrait-quote {box-sizing:border-box; margin:0 auto 0; padding:10px 0 80px; z-index:20; position:relative; text-align:center; max-width:500px;} .about-portrait-quote img {width:16px; padding:70px 0;} .about-bottom-quote {box-sizing:border-box; margin:0 0 0 50%; padding:0px 0 100px; z-index:20; position:relative; text-align:bottom; width:50%;} .about-bottom-quote p {font-size:24px; line-height:33px; letter-spacing:0.8px;} .about-bottom-quote p a {font-size:18px; line-height:20px; color:#FF6559; display:inline-block; text-decoration:none !important; padding:10px 80px 8px 0px; margin:10px 0 10px; background:url(../data/files/icon-arrow-right3.png) right center no-repeat; background-size:40px;} .about-bottom-quote p a:hover {padding:10px 90px 8px 0px;} .about-slider {box-sizing:border-box; margin:0 auto 0; padding:40px 0 100px; z-index:20; position:relative; text-align:center;} /* Carousel */ .main-carousel {padding:0px 0 0px;} .block-carousel { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 50px; } .block-carousel-wrapper {box-sizing:border-box; padding:10px; position:relative;} .block-carousel-wrapper:hover {background:none;} .block-carousel img {width:60%; margin:0 0 0 40%;} .block-carousel img:hover {opacity:0.6; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .block-carousel-text {position:absolute; width:300px; left:0; bottom:160px; text-align:left;} .block-carousel p {color:#FF6559; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} /* position dots in carousel */ .flickity-page-dots { bottom: 0px; margin-bottom:50px !important; margin-left:20% !important; } /* white circles */ .flickity-page-dots .dot { width: 8px !important; height: 8px !important; opacity: 1; background: transparent !important; border:1px solid #333; margin:0 5px !important; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background:#333 !important; } /* no circle */ .flickity-button, .flickity-button:hover { background: transparent !important; } /* big previous & next buttons */ .flickity-prev-next-button { width: 60px !important; height: 60px !important; } /* icon color */ .flickity-button-icon { fill: #FF6559 !important; } /* position outside */ .flickity-prev-next-button.previous { left: -7% !important; } .flickity-prev-next-button.next { right: -7% !important; } .block-insta {box-sizing:border-box; margin:0px auto 0px; padding:100px 0px 130px; z-index:20; position:relative; text-align:center; background:#f0f0ef;} .block-insta p a {font-size:18px; line-height:18px; color:#FF6559; text-decoration:none; display:inline-block; position:relative;} .block-insta p a:after { content: ""; position: absolute; bottom: -5px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #ff675d; transition: width 0.3s ease; } .block-insta p a:hover:after { width: 99%; } .block-insta img {width:100%; padding:30px 0 0;} #instafeed {margin:50px 0 0 0; background:none; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} #instafeed:hover a{opacity:.5} #instafeed a{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:calc(100%/5);-ms-flex-preferred-size:calc(100%/5);flex-basis:calc(100%/5);line-height:0;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;} #instafeed a:hover{opacity:1} #instafeed img{width:100%; padding:25px; display:block; box-sizing:border-box;} .contact-top-wrapper {box-sizing:border-box; margin:0 auto 0; padding:70px 0 140px; z-index:20; position:relative;} .contact-top-wrapper p {font-size:30px; line-height:42px; letter-spacing:0.4px;} .contact-top-left {box-sizing:border-box; width:35%; margin:0 5% 0 10%; float:left; padding:0px 0 0; text-align:left;} .contact-top-right {box-sizing:border-box; width:50%; margin-left:0%; float:left; padding:120px 0 0px;} .contact-top-keyword {color:#FF6559; font-size:16px; line-height:24px; letter-spacing:0.3px;} .contact-top-wrapper p a {display:inline-block; text-decoration:none; position:relative;} .contact-top-wrapper p a:after { content: ""; position: absolute; bottom: 0; left: 0px; height: 0; width: 0; border-bottom: 1px solid #000; transition: width 0.3s ease; } .contact-top-wrapper p a:hover:after { width: 100%; } .team-overview-wrapper{margin:50px -3% 70px -3% !important;} .team-overview-box {width:27.3%; margin:0% 3% 7%; float:left;} .team-overview-imagewrapper {width:100%; position:relative; padding-top:100%; z-index:10; overflow:hidden; border-radius:50%;} .team-overview-imagewrapper:hover .team-overview-image-overlay {opacity:1;} .team-overview-image {position:absolute; top:0%; width:100%;} .team-overview-image img {width:100%;} .team-overview-image img:hover {transform:scale(1.05);} .team-overview-image-overlay {position:absolute; top:0%; left:0; width:100%; height:100%; z-index:50; text-align:center; padding-top:48%; font-size:18px; line-height:18px; letter-spacing:1px; color:#FFF; opacity:0;} .team-overview-textwrapper {padding:20px 0px 0; font-size:17px; line-height:17px; letter-spacing:0.3px;} .team-overview-box h2 {font-size:21px; line-height:28px; padding:0px 0 6px;} .team-overview-textwrapper a {font-size:13px; padding:13px 0 0;} } @media screen and (max-width: 900px) { .desktop {display:none !important;} .mobile {display:inherit !important;} p {font-size:16px; line-height:25px; letter-spacing:0.4px; margin-top:20px; color:#000;} h1 {font-size:26px; line-height:36px; letter-spacing:1px;} h2 {ffont-size:28px; line-height:40px; letter-spacing:0.5px;} h3 {font-size:22px; line-height:32px; letter-spacing:0.5px; color:#000;} .contentlimiter-logo {max-width:1400px; margin:auto; padding:0 60px; position:relative; z-index:99;} .block-mainlogo {position:relative; box-sizing:border-box; width:170px; margin:60px 0 50px; padding:0px; z-index:99;} /* navigation burger*/ .navi-icon {position:absolute; box-sizing:border-box; z-index:99; cursor: url(../data/files/cursorpoint-13.png), auto !important; right:20px; top:40px; width:62px; height:60px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%; color:#ff675d; font-size:14px; line-height:14px; letter-spacing:0.4px; padding:23px 0 0 9px;} .navi-icon-letter {float:left; padding:0;} .navi-icon:hover .navi-icon-1 {margin-top:-3px;} .navi-icon:hover .navi-icon-2 {margin-top:3px;} .navi-icon:hover .navi-icon-3 {margin-top:-3px;} .navi-icon:hover .navi-icon-4 {margin-top:3px;} .navi-icon:hover .navi-icon-5 {margin-top:-3px;} /* navigation burger*/ .navi-icon {position:absolute; box-sizing:border-box; z-index:99; cursor: url(../data/files/cursorpoint-13.png), auto !important; right:20px; top:40px; width:62px; height:60px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%; color:#ff675d; font-size:14px; line-height:14px; letter-spacing:0.4px; padding:23px 0 0 9px;} .navi-icon-letter {float:left; padding:0;} .navi-icon:hover .navi-icon-1 {margin-top:-3px;} .navi-icon:hover .navi-icon-2 {margin-top:3px;} .navi-icon:hover .navi-icon-3 {margin-top:-3px;} .navi-icon:hover .navi-icon-4 {margin-top:3px;} .navi-icon:hover .navi-icon-5 {margin-top:-3px;} /* navigation overlay */ .navigationwrapper { position:fixed; width:100%; right:-100%; top:0px; height:100vh; z-index:99; box-sizing:border-box; padding:0px; background-size: 200% 200%; } .navigationwrapper-show {right:0;} .navigation {position:relative; box-sizing:border-box; padding:14vh 0 0 60px; z-index:6; background:none !important;} .navigation span {font-size:12px; line-height:12px; letter-spacing:0.3px;} .navigation a {display:inline-block; text-decoration:none; position:relative; color:#000; margin:20px 0 0; font-size:30px; line-height:30px;} .navigation-bottom {position:relative; box-sizing:border-box; padding:10vh 0 0 60px; z-index:6; background:none !important;} .navigation-bottom span {font-size:12px; line-height:12px; letter-spacing:0.3px; display:block; padding-bottom:28px;} .navigation-bottom-text {position:absolute; box-sizing:border-box; left:60px; bottom:5vh; z-index:6; background:none !important;} .navigation-bottom-text p {font-size:16px; line-height:22px;} .socialwrapper img {width:40px; margin:0 30px 0 0px;} .socialwrapper-footer img {width:40px; margin:0 0px 0 30px !important;} /* end overlay */ .block-footer {position:relative; box-sizing:border-box; width:100%; padding:60px 0 30px; background:#FFF;} .block-footer-left1 {width:100%; float:left;} .block-footer-left2 {width:200px; float:left; padding:20px 0 0;} .block-footer-left3 {float:right; text-align:right; padding:60px 0 0; font-size:20px; letter-spacing:1px;} #contentcontainer {position:relative; z-index:5; padding:0px 0 0; text-align:left; overflow:hidden; min-height:500px;} .contentlimiter {max-width:1400px; margin:auto; padding:0 60px; position:relative; z-index:6;} .contentlimiter1 {max-width:1200px; margin:auto; padding:0 60px; position:relative; z-index:6;} .contentlimiter2 {max-width:1000px; margin:auto; padding:0 100px; position:relative; z-index:6;} .block404 {font-size:30px; line-height:40px; padding:100px 0;} .block1 {box-sizing:border-box; margin:0px 0; padding:70px 0 70px; z-index:20; position:relative; font-size:24px; line-height:34px;} .block2 {box-sizing:border-box; margin:70px auto 100px; padding:0px; z-index:20; position:relative; max-width:60%; text-align:center;} .block3 {box-sizing:border-box; margin:50px 0 100px; padding:0px; z-index:20; position:relative; max-width:60%;} .block3 h3 {font-size:24px; line-height:24px; padding:50px 0 10px;} .block-studiopreview {box-sizing:border-box; margin:0px 0 120px; padding:50px 50px; z-index:20; position:relative; background:#CCC4B8;} .block-studiopreview-left {box-sizing:border-box; width:57%; float:left;} .block-studiopreview-left img, .block-studiopreview-left video {width:100%;} .block-studiopreview-right {box-sizing:border-box; width:43%; float:left; padding:0px 0 0 40px;} .block-studiopreview-right p {color:#ff675d; font-size:18px; line-height:25px;} .block-studiopreview-right p a {font-size:16px; color:#FF6559; letter-spacing:0.3px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:50px; padding:0 80px 0 0; margin:10px -80px 0 0;} .block-studiopreview-right p a:hover {text-decoration:none; padding:0 90px 0 0px;} /* PROJECT PREVIEW DESKTOP NEW 2023 */ .project-preview-wrapper-desktop-left {margin:-180px 0% 0px; width: 42%; float: left;} .project-preview-wrapper-desktop-right {margin:40px 0% 0px 15%; width: 42%; float: left;} .project-preview-box-desktop {width:100%; margin:0% 0% 20%;} .project-preview-imagewrapper-wrapper {box-sizing: border-box; padding: 30px 30px; background: #ff0000;} .block1b {width:45%;} .project-preview-wrapper{margin:20px 0% 0px;} .project-preview-box {float:left;} .project-preview-box-portrait {width:40%; margin:1.5% 0% 1%;} .project-preview-box-panorama {width:50%; margin:9.0% 0% 1%;} .project-preview-box-spacer {width:10%; height:100px;} .project-preview-imagewrapper {width:100%; z-index:10; overflow:hidden; margin-bottom:0px; position:relative;} .project-preview-imagewrapper:hover {transform: scale(0.97);} .project-preview-image {} .project-preview-image img {width:100%; } .project-preview-imagewrapper:hover img {transform: scale(1.06);} .project-preview-box h2 {padding:14px 0 0; font-size:18px; line-height:26px;} .project-preview-box {text-decoration:none !important;} .project-preview-box a:hover {text-decoration:none !important;} .project-preview-box h2:hover {} .project-preview-keyword {color:#FF6559; font-size:15px; margin-top: 20px;} .project-preview-more {padding:50px 0 40px; text-align:center;} .project-preview-more a {font-size:18px;} .project-filter-wrapper {margin:70px 0 10px; position:relative; height:68px;} .project-filter {margin:0 0 0 110px; display:none;} .project-filter-box {height:18px;} .project-filter-title {position:absolute; left:0; top:0; font-size: 15px; line-height:20px; text-decoration:underline; color:#FF6559; letter-spacing:0.3px; cursor: url(../data/files/cursorpoint-13.png), auto !important;} /* Start Isotope*/ .button {display:inline; margin:0 26px 0 0 !important; padding:0; background:none; border: none; border-bottom:none; color: #000; font-family:'SuisseIntl-Light',Arial,sans-serif; font-size: 15px; line-height:20px; letter-spacing:0.3px; cursor: pointer;} .button:hover {border-bottom:1px solid #FF6559;} .button:active, .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} .button-group {font-size: 15px; text-align:left; padding:0 0 15px 0;} .button-group:after {content: ''; display: block; clear: both;} .button-group .button {color:#FF6559 !important; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} .button-group .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} /* End Isotope*/ .project-overview-wrapper{margin:50px -2.5% 100px -2.5% !important;} .project-overview-box {width:45%; margin:1.5% 2.5% 5%; float:left;} .project-overview-imagewrapper {width:100%; height:100%; position:relative; padding-top:75%; z-index:10; overflow:hidden; margin-bottom:20px;} .project-overview-imagewrapper:hover {transform: scale(0.97);} .project-overview-image {position:absolute; top:0%; left:0; bottom:0; width:100%;} .project-overview-image img {width:100%;} .project-overview-imagewrapper:hover img {transform: scale(1.06);} .project-overview-box h2 {padding:14px 0 0; font-size:18px; line-height:26px;} .project-overview-box {text-decoration:none !important;} .project-overview-box a:hover {text-decoration:none !important;} .project-overview-box h2:hover {} .project-overview-keyword {color:#FF6559; font-size:15px;} .project-overview-box-arrow {position:absolute; right:0; bottom:10px; width:40px;} .project-overview-box-arrow img {width:100%;} /* PROJECT INDEX */ .project-index-background-wrapper {padding:30px 0 10px; z-index:20; } .project-index-title{margin:50px 0% 50px 0% !important; font-size:21px; line-height:21px;} .project-index-header{margin:10px 0% 20px 0% !important; color:#FF6559; font-size:15px; line-height:15px;} .project-index-wrapper{margin:0 0% 60px 0% !important; position:relative; z-index:6; font-size:18px; line-height:21px;} .project-index-box {margin:5px 0 4px;} .project-index-box1 {width:85%;} .project-index-box2 {width:0%; display:none;} .project-index-box3 {width:0%; display:none;} .project-index-box4 {width:15%; text-align:right;} .venues-img { z-index:5 !important; position: absolute; top: 0px; left: 0; width: 500px; height: 750px; background-size: 100% auto; background-repeat:no-repeat; background-image: url("/img/venue-1.jpg"); } .venues-img-wrap { z-index:5 !important; width: 500px; position: fixed; top: 52%; left: 20%; transform:translate(-50%,-50%); overflow-x: hidden; pointer-events: none; visibility: hidden; padding-bottom: 750px; z-index:5 !important; } /* END INDEX */ .img-ratio-portrait {margin-top:-20%;} .img-ratio-landscape {height:100%; width:auto !important;} .project-detail-topwrapper {box-sizing:border-box; margin:0 auto 0; padding:80px 0 120px; z-index:20; position:relative;} .project-detail-toptitle {box-sizing:border-box; width:100%; margin-right:0%; padding:0px 100px 20px 0px; text-align:left;} .project-detail-toptitle2 {box-sizing:border-box; width:100%; padding:0px 100px 20px 0px; text-align:left;} .project-detail-toptitle h1,.project-detail-toptitle2 h1 {font-size:46px; line-height:56px;} .project-detail-topleft {box-sizing:border-box; width:100%; float:left; padding:0px 0px 0 0px; text-align:left;} .project-detail-topleft img {width:70%; margin:50px auto 70px;} .project-detail-topleft video {width:100%; margin:50px auto 70px;} .project-detail-topleft p {max-width:500px;} .project-detail-topleft-readmore {cursor: url(../data/files/cursorpoint-13.png), auto !important; color:#FF6559; margin:30px 0 0;} .project-detail-topright {box-sizing:border-box; width:50%; margin-left:50%; float:left; padding:40px 0 0 0px;} .project-detail-topright img, .project-detail-topright video {width:100%; padding:0 0 25px;} .project-detail-topright2 {box-sizing:border-box; width:50%; margin-left:50%; float:left; padding:40px 0 0 0px;} .project-detail-topright2 img, .project-detail-topright2 video {width:100%; padding:0 0 25px;} .project-detail-topright p, .project-detail-topright2 p {max-width:400px; padding:0 0 0 3px;} .project-detail-dynamic-wrapper {padding:0 40px; margin:-8% 0 0;} .project-detail-dynamic-wrapper img {width:100%;} .project-detail-dynamic-width1 {width: 100%; max-width:1600px; margin:10% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width2 {width: 90%; max-width:1300px; margin:10% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width3 {width: 80%; max-width:1000px; margin:10% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width33 {width: 80%; max-width:1000px; margin:10% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 {width: 60%; max-width:700px; margin:10% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 p {font-size:26px; line-height:34px; letter-spacing:1px; margin:0 0 0px 10% !important; padding:10px 0 20px !important;} .project-detail-dynamic-frame {box-sizing:border-box; padding:0px 0; text-align:center;} .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-frame2 {box-sizing:border-box; padding:0px 0; text-align:center; position:relative;} .project-detail-dynamic-frame2 img {display:block; position:absolute; left:50%; margin-left:-30%; top:100%; margin-top:-120% !important; width:auto !important; max-width:60%;} .img-ratio2-landscape {padding:250px 0px;} .img-ratio2-portrait {padding:200px 0;} .project-detail-dynamic-width3 .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-width3 .img-ratio2-portrait {padding:125px 0;} .project-detail-dynamic-halfleft {width:100%; float:left;} .project-detail-dynamic-halfright {width:80%; float:left; margin-left:10%; padding:80px 0 0;} .project-detail-dynamic-halfleft2 {width:100%;} .project-detail-dynamic-halfright2 {width:100%; position:relative; left:0%; top:0;} .project-detail-dynamic-halfright2 img {width:100%; margin-top:-5%;} .project-detail-dynamic-halfright-text {padding:20px 0 0; width:80%; min-width:200px;} .project-detail-dynamic-imagedesc {padding:10px 0 0;} .project-detail-dynamic-imagedesc p {padding:0 0 0 10px; margin:0; width:80%;} /* Dynamic Carousel*/ .main-carousel5 {padding:0px 0 0px;} .block-carousel5 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell5; padding:0 0 0px; } .block-carousel5 img {width:100%; margin:0 0 0 0%;} .project-detail-imgwrapper {margin:0 -1.2% 0px;} .project-detail-imgbox {margin:1.2% 1.2%; float:left;} .project-detail-imgbox img {width:100%;} .project-detail-imgbox video {width:100%;} .project-detail-imgbox-overlay {position:absolute; box-sizing:border-box; top:0%; width:100%; bottom:0; text-align:center; background:#FFF; opacity:0; z-index:11;} .project-detail-imgbox-overlay:hover {opacity:0.4; transition-delay:0.1s;} .project-detail-imgbox-overlay h1 {font-size:38px; font-family:'SuisseIntl-Light',Arial,sans-serif; padding:30% 0 0;} .project-detail-imgbox1 {width:47.55%;} .project-detail-imgbox2 {width:47.55%;} .project-detail-imgbox3 {width:97.55%;} .project-detail-imgbox4 {width:47.55%;} .project-detail-bottom-photography {box-sizing:border-box; margin:0 auto 0; padding:20px 0 60px; z-index:20; position:relative; text-align:center;} .project-detail-back {box-sizing:border-box; margin:0 auto 0; padding:90px 0 140px; z-index:20; position:relative; text-align:center;} .project-detail-nextouterwrapper a:hover {text-decoration:none !important;} .project-detail-nextwrapper {box-sizing:border-box; margin:0 auto 100px; padding:50px 50px 50px; z-index:20; position:relative; background:#B4C6CD;} .project-detail-nextwrapper:hover .project-detail-nexttitle img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nextwrapper:hover .project-detail-nexttitle2 img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nexttitle {box-sizing:border-box; position:static; width:60%; margin-right:0%; padding:0px 100px 20px 0px; text-align:left; font-size:36px; line-height:46px; color:#FF6559;} .project-detail-nexttitle2 {box-sizing:border-box; position:static; width:60%; left:auto; margin-right:0%; padding:0px 100px 20px 0px; text-align:left; font-size:36px; line-height:46px; color:#FF6559;} .project-detail-nexttitle img, .project-detail-nexttitle2 img {width:50px; display:block; position:absolute; right:50px; top:20px; padding:40px 0 0; -webkit-animation: bounceLeft 2s infinite; animation: bounceLeft 2s infinite;} .project-detail-nextleft {position:relative; left:0px; bottom:0px; padding:0px 0 0;} .project-detail-nextleft span p {color:#FF6559; font-size:15px;} .project-detail-nextleft h3 {letter-spacing:1px; padding:0px 0 0;} .project-detail-nextright {box-sizing:border-box; width:100%; padding:0px 0 0 0%; margin:40px 0 0 0;} .project-detail-nextright img, .project-detail-nextright video {width:100%;} .project-detail-nextright2 {box-sizing:border-box; width:50%; padding:0px 0 0 0%; margin:40px auto 0;} .project-detail-nextright2 img, .project-detail-nextright2 video {width:100%;} .project-detail-nextright p {max-width:400px; padding:0 0 0 3px;} /* ARROW BOUNCE */ /* right bounce */ @-webkit-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(-10px); transform: translateX(-10px);} 60% {-webkit-transform: translateX(-5px); transform: translateX(-5px);}} @-moz-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(-10px);} 60% {transform: translateX(-5px);}} @keyframes bounceRight {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(-10px); transform: translateX(-10px);} 60% {-ms-transform: translateX(-5px); transform: translateX(-5px);}} /* /right bounce */ /* left bounce */ @-webkit-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(10px); transform: translateX(10px);} 60% {-webkit-transform: translateX(5px); transform: translateX(5px);}} @-moz-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(10px);} 60% {transform: translateX(5px);}} @keyframes bounceLeft {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(10px); transform: translateX(10px);} 60% {-ms-transform: translateX(5px); transform: translateX(5px);}} /* left bounce */ /* down bounce */ @-webkit-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0);} 40% {-webkit-transform: translateY(-10px); transform: translateY(-10px);} 60% {-webkit-transform: translateY(-5px); transform: translateY(-5px);}} @-moz-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);}} @keyframes bounceDown {0%, 20%, 50%, 80%,100% {-ms-transform: translateY(0); transform: translateY(0);} 40% {-ms-transform: translateY(-10px); transform: translateY(-10px);} 60% {-ms-transform: translateY(-5px); transform: translateY(-5px);}} /* /down bounce */ /* SERVICES */ .services-circle-wrapper {height:200px; margin:120px 0 120px -25%;} .services-circle {width:200px; height:200px; } .services-circle1 {left:31%; top:-30px; } .services-circle2 {left:48%; top:-100px; width:200px; height:200px;} /* service units */ .services-unit-topblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:140px 0 140px; z-index:20; position:relative;} .services-unit-topblock-left {box-sizing:border-box; width:70%; float:left; padding:0px 0 0; text-align:left;} .services-unit-topblock-right {box-sizing:border-box; width:50%; margin-left:50%; float:left; padding:30px 0 0 0px;} .services-unit-listblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:20px 0 20px; z-index:20; position:relative;} .services-unit-listblock-left {box-sizing:border-box; width:50%; float:left; padding:0px 50px 0 0px; text-align:left;} .services-unit-listblock-left img, .services-unit-listblock-left video {width:100%;} .services-unit-listblock-left-box-active {display:inherit;} .services-unit-listblock-left-box-passiv {display:none;} .services-unit-listblock-right {box-sizing:border-box; width:50%; float:left; padding:80px 0 0 0px;} .services-unit-listblock-right p {color:#FF6559; margin:0 0 20px;} .services-unit-listblock-right-box {color:#FF6559; font-size:20px; margin:6px 0; position:relative; width:auto; display:inline-block; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .services-unit-listblock-right-box:after {background: none repeat scroll 0 0 transparent; bottom: -3px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0;} .services-unit-listblock-right-box:hover:after {width: 100%; left: 0;} .services-unit-listblock-right-box-active:after {background: none repeat scroll 0 0 transparent; bottom: -3px; content: ""; display: block; height: 1px; left: 0%; position: absolute; background: #FF6559; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 100%;} .services-unit-process {box-sizing:border-box; margin:0 auto 0; padding:100px 0 120px; z-index:20; position:relative;} .services-unit-process h2 {font-size:32px; line-height:32px; letter-spacing:0.5px;} .services-unit-process-wrapper {margin:30px 0 0;} .services-unit-process-box {box-sizing:border-box; float:left; width:33.3%; padding:0 50px 0 0; margin:60px 0 0; position:relative;} .services-unit-process-box h2 {font-size:18px; line-height:18px;} .services-unit-process-box p {margin:12px 0 0; max-width:260px;} .services-unit-process-box-top {color:#FF6559; font-size:16px; letter-spacing:1.9px; float:left;} .services-unit-process-box-topline {width:85%; height:1px; background:#FF6559; margin:7px 0 40px 15%;} .services-unit-process-box-topline2 {width:85%; height:1px; margin:7px 0 40px 15%;} .services-unit-process-box-topicon {position:absolute; left:-13px; top:-17px; width:52px; height:51px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%;} .services-clients {box-sizing:border-box; margin:0 auto 0; padding:100px 0 120px; z-index:20; position:relative; text-align:center; background:#dad0c4;} .services-clients img {width:100%; padding:0px 0px 0px;} .services-clients p {font-size:22px; line-height:38px; color:#FF6559;} .services-clients-logos {padding:50px 0 0;} .main-carousel3 {padding:0px 0 0px;} .block-carousel3 { width: 140px; height: auto; box-sizing:border-box; padding:0px; margin:0 40px 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0px 0px; } .services-testimonials-wrapper {background:#f0f0ef;} .services-testimonials {box-sizing:border-box; margin:0 auto 0; padding:120px 0 120px; z-index:20; position:relative; text-align:center; max-width:500px;} .services-testimonials img {width:13px; padding:40px 0 30px;} .services-testimonials p {font-size:22px; line-height:31px;} .services-testimonials-byline {padding: 40px 0 0; font-size:18px; line-height:18px; letter-spacing:0.5px; color:#FF6559;} .main-carousel2 {padding:0px 0 0px;} .block-carousel2 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 80px; } .services-bottom {box-sizing:border-box; margin:0 auto 0; padding:100px 0 10px; z-index:20; position:relative; text-align:center; background:#FFF;} .services-bottom p {font-size:26px; line-height:26px;} .about-topimage {position:relative; box-sizing:border-box; margin:80px 0px 0;} .about-topimage img {width:100%;} .about-topclaim {position:relative; box-sizing:border-box; margin:70px 0px 0; max-width:500px;} .about-teamlink {padding:40px 0 0px;} .about-teamlink a {font-size:18px; color:#FF6559; letter-spacing:1px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:50px; padding:0 80px 0 0; margin-right:-80px;} .about-teamlink a:hover {text-decoration:none; padding:0 90px 0 10px;} .about-portrait-wrapper {box-sizing:border-box; margin:0 auto 0; padding:100px 0 100px; z-index:20; position:relative;} .about-portrait-left {box-sizing:border-box; width:45%; margin-right:5%; float:left; padding:0px 0 0; text-align:left;} .about-portrait-left img, .about-portrait-left video {width:100%;} .about-portrait-right {box-sizing:border-box; width:48%; margin-left:2%; float:left; padding:80px 0 0px;} .about-portrait-keyword {color:#FF6559; padding:0 0 20px;} .about-portrait-right h2 {padding:0 0 20px;} .about-values-wrapper {box-sizing:border-box; margin:0 auto 0; padding:60px 0 50px; z-index:20; position:relative;} .about-values-left {box-sizing:border-box; width:45%; margin-right:0%; float:left; padding:0px 0 0; text-align:left;} .about-values-left h2 {font-size:32px; line-height:42px; letter-spacing:2px;} .about-values-right {box-sizing:border-box; width:55%; float:left; padding:0px 0 0px; position:relative;} .about-values-right-box {box-sizing:border-box; width:50%; float:left; padding:0px 0 40px 40px; position:relative;} .about-values-right-box h3 {color:#FF6559; font-size:18px; line-height:28px; letter-spacing:0.8px; margin-bottom:-10px;} .about-values-right-boxnumber {position:absolute; left:0; top:0; color:#FF6559; font-size:18px; line-height:28px; letter-spacing:1.5px;} .about-portrait-quote {box-sizing:border-box; margin:0 auto 0; padding:10px 0 80px; z-index:20; position:relative; text-align:center; max-width:500px;} .about-portrait-quote img {width:16px; padding:70px 0;} .about-bottom-quote {box-sizing:border-box; margin:0 0 0 50%; padding:0px 0 100px; z-index:20; position:relative; text-align:bottom; width:50%;} .about-bottom-quote p {font-size:22px; line-height:32px; letter-spacing:0.5;} .about-bottom-quote p a {font-size:18px; line-height:20px; color:#FF6559; display:inline-block; text-decoration:none !important; padding:10px 80px 8px 0px; margin:10px 0 10px; background:url(../data/files/icon-arrow-right3.png) right center no-repeat; background-size:40px;} .about-bottom-quote p a:hover {padding:10px 90px 8px 0px;} .about-slider {box-sizing:border-box; margin:0 auto 0; padding:40px 0 100px; z-index:20; position:relative; text-align:center;} /* Carousel */ .main-carousel {padding:0px 0 0px;} .block-carousel { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 50px; } .block-carousel-wrapper {box-sizing:border-box; padding:10px; position:relative;} .block-carousel-wrapper:hover {background:none;} .block-carousel img {width:80%; margin:0 10% 0 10%;} .block-carousel img:hover {opacity:0.6; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .block-carousel-text {position:relative; margin:20px 10% 0; width:80%; left:0; bottom:10px; text-align:left;} .block-carousel p {color:#FF6559; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} /* position dots in carousel */ .flickity-page-dots { bottom: 0px; margin-bottom:50px !important; margin-left:auto !important; } /* white circles */ .flickity-page-dots .dot { width: 8px !important; height: 8px !important; opacity: 1; background: transparent !important; border:1px solid #333; margin:0 5px !important; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background:#333 !important; } /* no circle */ .flickity-button, .flickity-button:hover { background: transparent !important; } /* big previous & next buttons */ .flickity-prev-next-button { width: 60px !important; height: 60px !important; } /* icon color */ .flickity-button-icon { fill: #FF6559 !important; } /* position outside */ .flickity-prev-next-button.previous { left: -7% !important; } .flickity-prev-next-button.next { right: -7% !important; } .block-insta {box-sizing:border-box; margin:0px auto 0px; padding:100px 0px 130px; z-index:20; position:relative; text-align:center; background:#f0f0ef;} .block-insta p a {font-size:18px; line-height:18px; color:#FF6559; text-decoration:none; display:inline-block; position:relative;} .block-insta p a:after { content: ""; position: absolute; bottom: -5px; left: 0px; height: 0; width: 0; border-bottom: 1px solid #ff675d; transition: width 0.3s ease; } .block-insta p a:hover:after { width: 99%; } .block-insta img {width:100%; padding:30px 0 0;} #instafeed {margin:50px 0 0 0; background:none; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} #instafeed:hover a{opacity:.5} #instafeed a{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:calc(100%/3);-ms-flex-preferred-size:calc(100%/3);flex-basis:calc(100%/3);line-height:0;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;} #instafeed a:hover{opacity:1} #instafeed img{width:100%; padding:25px; display:block; box-sizing:border-box;} .contact-top-wrapper {box-sizing:border-box; margin:0 auto 0; padding:70px 0 100px; z-index:20; position:relative;} .contact-top-wrapper p {font-size:22px; line-height:32px; letter-spacing:0.4px;} .contact-top-left {box-sizing:border-box; width:40%; margin:0 5% 0 5%; float:left; padding:0px 0 0; text-align:left;} .contact-top-right {box-sizing:border-box; width:50%; margin-left:0%; float:left; padding:100px 0 0px;} .contact-top-keyword {color:#FF6559; font-size:16px; line-height:24px; letter-spacing:0.3px;} .contact-top-wrapper p a {display:inline-block; text-decoration:none; position:relative;} .contact-top-wrapper p a:after { content: ""; position: absolute; bottom: 0; left: 0px; height: 0; width: 0; border-bottom: 1px solid #000; transition: width 0.3s ease; } .contact-top-wrapper p a:hover:after { width: 100%; } .team-overview-wrapper{margin:50px -3% 70px -3% !important;} .team-overview-box {width:44%; margin:0% 3% 9%; float:left;} .team-overview-imagewrapper {width:100%; position:relative; padding-top:100%; z-index:10; overflow:hidden; border-radius:50%;} .team-overview-imagewrapper:hover .team-overview-image-overlay {opacity:1;} .team-overview-image {position:absolute; top:0%; width:100%;} .team-overview-image img {width:100%;} .team-overview-image img:hover {transform:scale(1.05);} .team-overview-image-overlay {position:absolute; top:0%; left:0; width:100%; height:100%; z-index:50; text-align:center; padding-top:48%; font-size:18px; line-height:18px; letter-spacing:1px; color:#FFF; opacity:0;} .team-overview-textwrapper {padding:20px 0px 0; font-size:16px; line-height:16px; letter-spacing:0.3px;} .team-overview-box h2 {font-size:19px; line-height:25px; padding:0px 0 6px;} .team-overview-textwrapper a {font-size:13px; padding:13px 0 0;} } @media screen and (max-width: 680px) { .nophone {display:none !important;} .onlyphone {display:inherit !important;} p {font-size:16px; line-height:23px; letter-spacing:0.4px; margin-top:20px; color:#000;} h1 {font-size:22px; line-height:29px; letter-spacing:0.4px;} h2 {ffont-size:28px; line-height:40px; letter-spacing:0.3px;} h3 {font-size:20px; line-height:28px; letter-spacing:0.3px; color:#000;} .contentlimiter-logo {max-width:1400px; margin:auto; padding:0 30px; position:relative; z-index:99;} .block-mainlogo {position:relative; box-sizing:border-box; width:130px; margin:40px 0 50px; padding:0px; z-index:99;} /* navigation burger*/ .navi-icon {position:absolute; box-sizing:border-box; z-index:99; cursor: url(../data/files/cursorpoint-13.png), auto !important; right:20px; top:30px; width:52px; height:51px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%; color:#ff675d; font-size:12px; line-height:14px; letter-spacing:0.4px; padding:19px 0 0 7px;} .navi-icon-letter {float:left; padding:0;} .navi-icon:hover .navi-icon-1 {margin-top:-3px;} .navi-icon:hover .navi-icon-2 {margin-top:3px;} .navi-icon:hover .navi-icon-3 {margin-top:-3px;} .navi-icon:hover .navi-icon-4 {margin-top:3px;} .navi-icon:hover .navi-icon-5 {margin-top:-3px;} /* navigation overlay */ .navigationwrapper { position:fixed; width:100%; right:-100%; top:0px; height:100vh; z-index:99; box-sizing:border-box; padding:0px; background-size: 200% 200%; } .navigationwrapper-show {right:0;} .navigation {position:relative; box-sizing:border-box; padding:13vh 0 0 30px; z-index:6; background:none !important;} .navigation span {font-size:12px; line-height:12px; letter-spacing:0.3px;} .navigation a {display:inline-block; text-decoration:none; position:relative; color:#000; margin:20px 0 0; font-size:30px; line-height:30px;} .navigation a:hover:after {width: 0%;} .navigation-bottom {position:relative; box-sizing:border-box; padding:10vh 0 0 30px; z-index:6; background:none !important;} .navigation-bottom span {font-size:12px; line-height:12px; letter-spacing:0.3px; display:block; padding-bottom:28px;} .navigation-bottom-text {position:relative; box-sizing:border-box; left:auto; bottom:auto; padding:8vh 0 0 30px; z-index:6; background:none !important;} .navigation-bottom-text p {font-size:14px; line-height:20px;} .socialwrapper img {width:40px; margin:0 30px 0 0px;} .socialwrapper-footer img {width:35px; margin:0 30px 0 0px !important;} /* end overlay */ .block-footer {position:relative; box-sizing:border-box; width:100%; padding:40px 0px 20px; background:#FFF;} .block-footer-mobile {width:100%; margin:auto;} .block-footer-left1 {width:100%; float:left;} .block-footer-left2 {width:100%; float:left; padding:40px 0 30px 0px; box-sizing:border-box;} .block-footer-left3 {float:left; text-align:left; padding:40px 0 0; font-size:16px; color:#ff675d; letter-spacing:0.5px;} .block-subfooter {width:100%; margin:60px 0 0; font-size:12px; letter-spacing:0.1px;} .block-subfooter a {font-size:12px; } .block-subfooter-left {width:100%; float:left;} .block-subfooter-right {width:100%; float:left; text-align:left; padding-top:0px;} /* Newsletter Form */ fieldset {margin:0px 0 50px 0; border:0; padding:0; width:200px;} fieldset input {border:none; width:200px; border-bottom:1px solid #ff675d; background:none; margin:20px 0 0px 0px; padding:0 40px 0 0px; font-size:16px; color:#ff675d; font-family:'SuisseIntl-Light',Arial,sans-serif;} .btn {background:none; cursor: url(../data/files/cursorpoint-13.png), auto !important; border:none; display:inline-block; width:35px; height:20px; background:url(../data/files/icon-arrow-right3.png) no-repeat; background-size:100%; margin:0px 0 0 -37px; padding:0px 0 0px;} .btn:hover {} #response {color:#f30;} #contentcontainer {position:relative; z-index:5; padding:0px 0 0; text-align:left; overflow:hidden; min-height:500px;} .contentlimiter {max-width:1400px; margin:auto; padding:0 30px; position:relative; z-index:6;} .contentlimiter1 {max-width:1200px; margin:auto; padding:0 30px; position:relative; z-index:6;} .contentlimiter2 {max-width:1000px; margin:auto; padding:0 30px; position:relative; z-index:6;} .block404 {font-size:30px; line-height:40px; padding:100px 0;} .block1 {box-sizing:border-box; margin:0px 0; padding:30px 0 40px; z-index:20; position:relative; font-size:22px; line-height:30px; letter-spacing:0.3px;} .block1 a {line-height:26px;} .block1 h1 {font-size:22px; line-height:30px; letter-spacing:0.3px;} .block2 {box-sizing:border-box; margin:70px auto 100px; padding:0px; z-index:20; position:relative; max-width:60%; text-align:center;} .block3 {box-sizing:border-box; margin:30px 0 100px; padding:0px; z-index:20; position:relative; max-width:100%;} .block3 h3 {font-size:20px; line-height:20px; padding:30px 0 10px;} .block4 {box-sizing:border-box; margin:50px auto 50px; padding:0 0 0 5px; z-index:20; position:relative; max-width: 750px;} .formwrapper {margin:60px auto 60px; padding: 0 0 0 0px;} .block-showreel-wrapper {margin:0 0 100px;} .block-studiopreview {box-sizing:border-box; margin:0px 0 80px; padding:30px 30px; z-index:20; position:relative; background:#CCC4B8;} .block-studiopreview-left {box-sizing:border-box; width:100%; float:left;} .block-studiopreview-left img, .block-studiopreview-left video {width:100%;} .block-studiopreview-right {box-sizing:border-box; width:100%; float:left; padding:5px 0 0 0px;} .block-studiopreview-right p {color:#ff675d; font-size:17px; line-height:23px;} .block-studiopreview-right p a {font-size:16px; color:#FF6559; letter-spacing:0.1px; font-family:'SuisseIntl-Light',Arial,sans-serif; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:35px; padding:0 60px 0 0; margin:10px -60px 0 0;} .block-studiopreview-right p a:hover {text-decoration:none; padding:0 70px 0 0px;} /* PROJECT PREVIEW DESKTOP NEW 2023 */ .project-preview-imagewrapper-wrapper {box-sizing: border-box; padding: 30px 30px; background: #ff0000;} .project-preview-wrapper{margin:20px 0% 0px;} .project-preview-box {float:left; margin-bottom: 15%;} .project-preview-box-portrait {width:70%; margin:12% 0% 2%;} .project-preview-box-panorama {width:70%; margin:12% 0% 2%;} .project-preview-box-spacer {width:30%; height:100px;} .project-preview-imagewrapper {width:100%; z-index:10; overflow:hidden; margin-bottom:0px; position:relative;} .project-preview-imagewrapper:hover {transform: scale(0.97);} .project-preview-image {} .project-preview-image img {width:100%;} .project-preview-image video {width:101%;} .project-preview-image-frame {box-sizing: border-box; padding: 20px 20px;} .project-preview-imagewrapper:hover img {transform: scale(1.06);} .project-preview-box h2 {padding:6px 0 0; font-size:18px; line-height:23px;} .project-preview-box {text-decoration:none !important;} .project-preview-box a:hover {text-decoration:none !important;} .project-preview-box h2:hover {} .project-preview-keyword {color:#FF6559; font-size:12px; margin-top: 15px;} .project-preview-more {padding:10px 0 0px; margin:10px auto 130px; text-align:center;} .project-preview-more a {font-size:18px;} .project-preview-more a:after {width:100%;} .project-filter-wrapper {margin:20px 0 10px; position:relative; height:78px;} .project-filter {margin:0 0 0 70px; display:none;} .project-filter-box {height:18px;} .project-filter-title {position:absolute; left:0; top:0; font-size: 14px; line-height:20px; text-decoration:underline; color:#FF6559; letter-spacing:0.3px; cursor: url(../data/files/cursorpoint-13.png), auto !important;} /* Start Isotope*/ .button {display:inline; margin:0 14px 0 0 !important; padding:0; background:none; border: none; border-bottom:none; color: #000; font-family:'SuisseIntl-Light',Arial,sans-serif; font-size: 14px; line-height:24px; letter-spacing:0.3px; cursor: pointer;} .button:hover {border-bottom:1px solid #FF6559;} .button:active, .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} .button-group {font-size: 14px; text-align:left; padding:0 0 10px 0;} .button-group:after {content: ''; display: block; clear: both;} .button-group .button {color:#FF6559 !important; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} .button-group .button.is-checked {border-bottom:1px solid #FF6559; outline:none;} /* End Isotope*/ .project-overview-wrapper{margin:50px -2.5% 60px -2.5% !important;} .project-overview-box {width:95%; margin:1.5% 2.5% 9%; float:left;} .project-overview-imagewrapper {width:100%; height:100%; position:relative; padding-top:72%; z-index:10; overflow:hidden; margin-bottom:10px;} .project-overview-imagewrapper:hover {transform: scale(0.97);} .project-overview-image {position:absolute; top:0%; left:0; bottom:0; width:100%; text-align:center;} .project-overview-image img {width:100%;} .project-overview-imagewrapper:hover img {transform: scale(1.06);} .project-overview-box h2 {padding:6px 0 0; font-size:18px; line-height:23px;} .project-overview-box {text-decoration:none !important;} .project-overview-box a:hover {text-decoration:none !important;} .project-overview-box h2:hover {} .project-overview-keyword {color:#FF6559; font-size:13px;} .project-overview-box-arrow {position:absolute; right:5px; bottom:10px; width:40px;} .project-overview-box-arrow img {width:100%;} /* PROJECT INDEX */ .project-index-background-wrapper {padding:10px 0 10px; z-index:20; background:#fbfafb;} .project-index-title{margin:40px 0% 30px 0% !important; font-size:21px; line-height:21px;} .project-index-header{margin:10px 0% 20px 0% !important; color:#FF6559; font-size:15px; line-height:15px;} .project-index-wrapper{margin:0 0% 80px 0% !important; position:relative; z-index:6; font-size:17px; line-height:20px;} .project-index-box {margin:5px 0 4px;} .project-index-box1 {width:85%;} .project-index-box2 {width:0%; display:none;} .project-index-box3 {width:0%; display:none;} .project-index-box4 {width:15%; text-align:right;} .venues-img { z-index:5 !important; position: absolute; top: 0px; left: 0; width: 0px; height: 0px; background-size: 100% auto; background-repeat:no-repeat; background-image: url("/img/venue-1.jpg"); } .venues-img-wrap { z-index:5 !important; width: 500px; position: fixed; top: 52%; left: 20%; transform:translate(-50%,-50%); overflow-x: hidden; pointer-events: none; visibility: hidden; padding-bottom: 750px; z-index:5 !important; } /* END INDEX */ .img-ratio-portrait {margin-top:-20%;} .img-ratio-landscape {height:101%; width:auto !important; } .project-detail-topwrapper {box-sizing:border-box; margin:0 auto 0; padding:50px 0 60px; z-index:20; position:relative;} .project-detail-toptitle {box-sizing:border-box; width:100%; margin-right:0%; padding:0px 60px 20px 0px; text-align:left;} .project-detail-toptitle2 {box-sizing:border-box; width:100%; padding:0px 60px 20px 0px; text-align:left;} .project-detail-toptitle h1,.project-detail-toptitle2 h1 {font-size:28px; line-height:37px;} .project-detail-topleft {box-sizing:border-box; width:100%; float:left; padding:0px 0px 0 0px; text-align:left;} .project-detail-topleft img {width:100%; margin:20px auto 40px;} .project-detail-topleft2 img {width:90%; margin:20px auto 40px;} .project-detail-topleft video {width:100%; margin:20px auto 40px;} .project-detail-topleft p {max-width:500px;} .project-detail-topleft-readmore {cursor: url(../data/files/cursorpoint-13.png), auto !important; color:#FF6559; margin:30px 0 0; font-size:14px;} .project-detail-topleft-readmore:after {width: 100%;} .project-detail-topright {box-sizing:border-box; width:60%; margin-left:40%; float:left; padding:40px 0 0 0px;} .project-detail-topright img, .project-detail-topright video {width:100%; padding:0 0 25px;} .project-detail-topright2 {box-sizing:border-box; width:60%; margin-left:40%; float:left; padding:40px 0 0 0px;} .project-detail-topright2 img, .project-detail-topright2 video {width:100%; padding:0 0 25px;} .project-detail-topright p, .project-detail-topright2 p {max-width:400px; padding:0 0 0 3px;} .project-detail-dynamic-wrapper {padding:0 0px; margin:-8% 0 0;} .project-detail-dynamic-wrapper img {width:100%;} .project-detail-dynamic-width1 {width: 100%; max-width:1600px; margin:10% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width2 {width: 90%; max-width:1300px; margin:10% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width3 {width: 90%; max-width:1000px; margin:10% auto; padding:0 0px; position:relative; z-index:6; overflow:hidden;} .project-detail-dynamic-width33 {width: 90%; max-width:1000px; margin:10% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 {width: 70%; max-width:700px; margin:10% auto; padding:0 0px; position:relative; z-index:6;} .project-detail-dynamic-width4 p {font-size:18px; line-height:24px; letter-spacing:1px; margin:0 0 0px 0% !important; padding:0px 0 10px !important;} .project-detail-dynamic-frame {box-sizing:border-box; padding:0px 0; text-align:center;} .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-frame2 {box-sizing:border-box; padding:0px 0; text-align:center; position:relative;} .project-detail-dynamic-frame2 img {display:block; position:absolute; left:50%; margin-left:-30%; top:100%; margin-top:-120% !important; width:auto !important; max-width:60%;} .img-ratio2-landscape {padding:70px 0px;} .img-ratio2-portrait {padding:50px 0;} .project-detail-dynamic-width3 .project-detail-dynamic-frame img {max-height:500px; width:auto !important; max-width:80%;} .project-detail-dynamic-width3 .img-ratio2-portrait {padding:125px 0;} .project-detail-dynamic-halfleft {width:100%; float:left;} .project-detail-dynamic-halfright {width:80%; float:left; margin-left:10%; padding:80px 0 0;} .project-detail-dynamic-halfleft2 {width:100%;} .project-detail-dynamic-halfright2 {width:100%; position:relative; left:0%; top:0;} .project-detail-dynamic-halfright2 img {width:100%; margin-top:-5%;} .project-detail-dynamic-halfright-text {padding:0px 0 0; width:80%; min-width:200px;} .project-detail-dynamic-halfright-text p {font-size:16px; line-height:22px; letter-spacing:0.3px;} .project-detail-dynamic-imagedesc {padding:10px 0 0;} .project-detail-dynamic-imagedesc p {padding:0 0 0 0px; margin:0; width:100%;} /* Dynamic Carousel*/ .main-carousel5 {padding:0px 0 0px;} .block-carousel5 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell5; padding:0 0 0px; } .block-carousel5 img {width:100%; margin:0 0 0 0%;} .project-detail-imgwrapper {margin:0 -1.2% 0px;} .project-detail-imgbox {margin:1.2% 1.2%; float:left;} .project-detail-imgbox img {width:100%;} .project-detail-imgbox video {width:100%;} .project-detail-imgbox-overlay {position:absolute; box-sizing:border-box; top:0%; width:100%; bottom:0; text-align:center; background:#FFF; opacity:0; z-index:11;} .project-detail-imgbox-overlay:hover {opacity:0.4; transition-delay:0.1s;} .project-detail-imgbox-overlay h1 {font-size:38px; font-family:'SuisseIntl-Light',Arial,sans-serif; padding:30% 0 0;} .project-detail-imgbox1 {width:47.51%;} .project-detail-imgbox2 {width:47.51%;} .project-detail-imgbox3 {width:97.55%;} .project-detail-imgbox4 {width:47.51%;} .project-detail-bottom-photography {box-sizing:border-box; margin:0 auto 0; padding:20px 50px 60px; z-index:20; position:relative; text-align:center;} .project-detail-back {box-sizing:border-box; margin:0 auto 0; padding:50px 0 100px; z-index:20; position:relative; text-align:center;} .project-detail-back a {font-size:16px; line-height:16px; letter-spacing:0.5px;} .project-detail-back a:after {width: 100%;} .project-detail-nextouterwrapper a:hover {text-decoration:none !important;} .project-detail-nextwrapper {box-sizing:border-box; margin:0 auto 100px; padding:30px 30px 30px; z-index:20; position:relative; background:#B4C6CD;} .project-detail-nextwrapper:hover .project-detail-nexttitle img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nextwrapper:hover .project-detail-nexttitle2 img {padding:40px 0 0 20px; animation:none; -webkit-animation:none;} .project-detail-nexttitle {box-sizing:border-box; position:static; width:60%; margin-right:0%; padding:0px 100px 20px 0px; text-align:left; font-size:26px; line-height:36px; color:#FF6559;} .project-detail-nexttitle2 {box-sizing:border-box; position:static; width:60%; left:auto; margin-right:0%; padding:0px 100px 20px 0px; text-align:left; font-size:26px; line-height:36px; color:#FF6559;} .project-detail-nexttitle img, .project-detail-nexttitle2 img {width:40px; display:block; position:absolute; right:30px; top:0px; padding:40px 0 0; -webkit-animation: bounceLeft 2s infinite; animation: bounceLeft 2s infinite;} .project-detail-nextleft {position:relative; left:0px; bottom:0px; padding:0px 0 0;} .project-detail-nextleft span p {color:#FF6559; font-size:15px;} .project-detail-nextleft h3 {letter-spacing:1px; padding:0px 0 0;} .project-detail-nextright {box-sizing:border-box; width:100%; padding:0px 0 0 0%; margin:20px 0 0 0;} .project-detail-nextright img, .project-detail-nextright video {width:100%;} .project-detail-nextright2 {box-sizing:border-box; width:50%; padding:0px 0 0 0%; margin:20px auto 0;} .project-detail-nextright2 img, .project-detail-nextright2 video {width:100%;} .project-detail-nextright p {max-width:400px; padding:0 0 0 3px;} /* ARROW BOUNCE */ /* right bounce */ @-webkit-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(-10px); transform: translateX(-10px);} 60% {-webkit-transform: translateX(-5px); transform: translateX(-5px);}} @-moz-keyframes bounceRight {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(-10px);} 60% {transform: translateX(-5px);}} @keyframes bounceRight {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(-10px); transform: translateX(-10px);} 60% {-ms-transform: translateX(-5px); transform: translateX(-5px);}} /* /right bounce */ /* left bounce */ @-webkit-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateX(0); transform: translateX(0);} 40% {-webkit-transform: translateX(10px); transform: translateX(10px);} 60% {-webkit-transform: translateX(5px); transform: translateX(5px);}} @-moz-keyframes bounceLeft {0%, 20%, 50%, 80%, 100% {transform: translateX(0);} 40% {transform: translateX(10px);} 60% {transform: translateX(5px);}} @keyframes bounceLeft {0%, 20%, 50%, 80%,100% {-ms-transform: translateX(0); transform: translateX(0);} 40% {-ms-transform: translateX(10px); transform: translateX(10px);} 60% {-ms-transform: translateX(5px); transform: translateX(5px);}} /* left bounce */ /* down bounce */ @-webkit-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0); transform: translateY(0);} 40% {-webkit-transform: translateY(-10px); transform: translateY(-10px);} 60% {-webkit-transform: translateY(-5px); transform: translateY(-5px);}} @-moz-keyframes bounceDown {0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-10px);} 60% {transform: translateY(-5px);}} @keyframes bounceDown {0%, 20%, 50%, 80%,100% {-ms-transform: translateY(0); transform: translateY(0);} 40% {-ms-transform: translateY(-10px); transform: translateY(-10px);} 60% {-ms-transform: translateY(-5px); transform: translateY(-5px);}} /* /down bounce */ /* SERVICES */ /* DROPBOWN RIGHT */ .services-dropdown-righttext {box-sizing:border-box; width:100%; float:right; padding:40px 0 0 0px;} .services-dropdown-righttext-item-wrapper {margin:40px 0 0;} .services-dropdown-righttext-item {margin:15px 0; font-size:19px; font-family:'SuisseIntl-Light',Arial,sans-serif; color:#FF6559;} /* service units */ .services-unit-topblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:70px 0 70px; z-index:20; position:relative;} .services-unit-topblock-left {box-sizing:border-box; width:100%; float:left; padding:0px 0 0; text-align:left;} .services-unit-topblock-right {box-sizing:border-box; width:90%; margin-left:10%; float:left; padding:10px 20px 0 0px;} .services-unit-listblock-wrapper {box-sizing:border-box; margin:0 auto 0; padding:0px 0 20px; z-index:20; position:relative;} .services-unit-listblock-left {box-sizing:border-box; width:60%; float:left; padding:0px 0px 0 0px; text-align:left;} .services-unit-listblock-left img, .services-unit-listblock-left video {width:100%;} .services-unit-listblock-right {box-sizing:border-box; width:90%; margin-left:10%; float:left; padding:0px 0 0 0px;} .service-button { width:auto; display:block; color:#FF6559; font-size:22px; text-align:left; margin:5px 0; padding: 0px; border:none; border-radius: 0px; background:none; } .services-view-projects {padding:60px 0px 0px 26px; text-align:left; margin-left:10%;} .services-view-projects a {font-size:20px; color:#FF6559; letter-spacing:1px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:35px; padding:0 60px 0 0; margin-right:-60px;} .services-view-projects a:hover {text-decoration:none; padding:0 70px 0 10px;} .services-unit-process {box-sizing:border-box; margin:0 auto 0; padding:100px 0 40px; z-index:20; position:relative;} .services-unit-process h2 {font-size:24px; line-height:24px; letter-spacing:0.3px;} .services-unit-process-wrapper {margin:10px 0 0;} .services-unit-process-box {box-sizing:border-box; float:left; width:90%; padding:0 30px 0 0; margin:60px 0 0 10%; position:relative;} .services-unit-process-box h2 {font-size:18px; line-height:18px;} .services-unit-process-box p {margin:12px 0 0; max-width:none;} .services-unit-process-box-top {color:#FF6559; font-size:15px; letter-spacing:1.0px; float:left;} .services-unit-process-box-topline2 {width:85%; height:1px; margin:7px 0 40px 15%;} .services-unit-process-box-topline3 {height:1px; background:#FF6559; margin:7px 0 30px 10%;} .services-unit-process-box-topicon {position:absolute; left:-10px; top:-14px; width:42px; height:41px; background:url(../data/files/sf-navi-icon.png) no-repeat; background-size:100%;} .services-clients {box-sizing:border-box; margin:0 auto 0; padding:30px 0 60px; z-index:20; position:relative; text-align:center; background:#dad0c4;} .services-clients img {width:100%; padding:0px 0px 0px;} .services-clients p {font-size:18px; line-height:18px; color:#FF6559;} .services-clients-logos {padding:30px 0 0;} .main-carousel3 {padding:0px 0 0px;} .block-carousel3 { width: 90px; height: auto; box-sizing:border-box; padding:0px; margin:0 10px 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0px 0px; } .services-testimonials-wrapper {background:#f0f0ef;} .services-testimonials {box-sizing:border-box; margin:0 auto 0; padding:60px 0 60px; z-index:20; position:relative; text-align:center; max-width:500px;} .services-testimonials img {width:13px; padding:20px 0 15px;} .services-testimonials p {font-size:16px; line-height:23px;} .services-testimonials-byline {padding: 30px 0 0; font-size:15px; line-height:20px; letter-spacing:0.2px; color:#FF6559;} .main-carousel2 {padding:0px 0 0px;} .block-carousel2 { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 80px; } .services-bottom {box-sizing:border-box; margin:0 auto 0; padding:80px 0 50px; z-index:20; position:relative; text-align:center; background:#FFF;} .services-bottom p {font-size:22px; line-height:26px; letter-spacing:0.5px;} .services-bottom p a {font-size:18px; line-height:18px; margin:10px 0 0;} .services-bottom p a:after {width:100%;} .shop-bottom {box-sizing:border-box; margin:0 auto 0; padding:0px 0 90px; z-index:20; position:relative; text-align:center;} .shop-bottom p a {font-size:18px; line-height:18px; margin:10px 0 0;} .shop-bottom p a:after {width:100%;} .about-topimage {position:relative; box-sizing:border-box; margin:40px 0px 0;} .about-topimage img {width:100%;} .about-topclaim {position:relative; box-sizing:border-box; margin:30px 0px 0; max-width:500px;} .about-teamlink {padding:30px 0 0px;} .about-teamlink a {font-size:15px; color:#FF6559; letter-spacing:0.5px; display:inline-block; background:url(../data/files/icon-arrow-right3.png) no-repeat right center; background-size:40px; padding:0 60px 0 0; margin-right:-60px;} .about-teamlink a:hover {text-decoration:none; padding:0 70px 0 10px;} .about-insights {box-sizing:border-box; margin:0 auto 0; padding:40px 0 0px; z-index:20; position:relative;} .about-insights-box {width:100%; float:left;} .about-insights-box p {margin:5px 0 0; font-size:14px;} .about-insights-box img {width:100%;} .about-insights-box1 {width:65%; margin:0;} .about-insights-box2 {width:80%; margin:10% 0 0 20%;} .about-insights-box3 {width:65%; margin:10% 0 0 0%;} .about-insights-box4 {width:65%; margin:10% 0 0 30%;} .about-insights-box-special {width:100%; height:100px; margin:0% 0 0 0;} .about-insights-box5 {width:80%; margin:-15% 0 0 0%;} .about-portrait-wrapper {box-sizing:border-box; margin:0 auto 0; padding:70px 0 100px; z-index:20; position:relative;} .about-portrait-left {box-sizing:border-box; width:80%; margin-right:auto; margin-left:10%; float:left; padding:0px 0 0; text-align:left;} .about-portrait-left img, .about-portrait-left video {width:100%;} .about-portrait-right {box-sizing:border-box; width:80%; margin-left:11%; float:left; padding:40px 0 0px;} .about-portrait-keyword {color:#FF6559; padding:0 0 10px; font-size:14px;} .about-portrait-right h2 {padding:0 0 0px; font-size:22px; line-height:22px;} .about-values-wrapper {box-sizing:border-box; margin:0 auto 0; padding:10px 0 20px; z-index:20; position:relative;} .about-values-left {box-sizing:border-box; width:100%; margin-right:0%; float:left; padding:0px 0 0; text-align:left;} .about-values-left h3 {font-size:22px; line-height:32px; letter-spacing:0.5px;} .about-values-right {box-sizing:border-box; width:100%; float:left; padding:40px 0 0px; position:relative;} .press-about-values-right {padding-bottom: 50px;} .about-values-right-box {box-sizing:border-box; width:90%; margin-left:0%; float:left; padding:0px 0 40px 40px; position:relative;} .about-values-right-box h3 {color:#FF6559; font-size:16px; line-height:22px; letter-spacing:0.8px; margin-bottom:-10px;} .about-values-right-boxnumber {position:absolute; left:0; top:-2px; color:#FF6559; font-size:16px; line-height:26px; letter-spacing:1.5px;} .about-portrait-quote {box-sizing:border-box; margin:0 auto 0; padding:10px 0 80px; z-index:20; position:relative; text-align:center; max-width:500px;} .about-portrait-quote img {width:16px; padding:70px 0;} /* PRESS */ .press-index-header{margin:7px 0% 20px 0% !important; box-sizing: border-box; color:#FF6559; font-size:14px; line-height:14px; font-family:'SuisseIntl-Light',Arial,sans-serif; letter-spacing: 0.5px;} .press-index-box-wrapper {width:100%; margin:0 0 0; clear: both;} .press-index-box {width:100%; margin:9px 0 8px; z-index:3 !important; position:relative;} .press-index-box:hover {color:#FF6559; z-index:60 !important;} .press-index-boxbox {float:left;} .press-index-box1 {width:50%; padding: 0 0 0 0px; box-sizing: border-box;} .press-index-box2 {width:40%;} .press-index-box4 {width:10%; text-align:right;} .about-bottom-quote {box-sizing:border-box; margin:0 0 0 15%; padding:0px 0 70px; z-index:20; position:relative; text-align:bottom; width:85%;} .about-bottom-quote p {font-size:20px; line-height:28px; letter-spacing:0.3;} .about-bottom-quote p a {font-size:16px; line-height:16px; color:#FF6559; display:inline-block; text-decoration:none !important; padding:10px 60px 8px 0px; margin:0px 0 10px; background:url(../data/files/icon-arrow-right3.png) right center no-repeat; background-size:35px;} .about-bottom-quote p a:hover {padding:10px 70px 8px 0px;} .about-slider {box-sizing:border-box; margin:0 auto 0; padding:20px 0 50px; z-index:20; position:relative; text-align:center;} /* Carousel */ .main-carousel {padding:0px 0 0px;} .block-carousel { width: 100%; height: auto; box-sizing:border-box; padding:0px; margin:0 0.5% 0; border-radius: 5px; counter-increment: carousel-cell; padding:0 0 50px; } .block-carousel-wrapper {box-sizing:border-box; padding:10px; position:relative;} .block-carousel-wrapper:hover {background:none;} .block-carousel img {width:100%; margin:0 0% 0 0%;} .block-carousel img:hover {opacity:0.6; cursor: url(../data/files/cursorpoint-13.png), auto !important;} .block-carousel-text {position:relative; margin:20px 2% 0; width:90%; left:0; bottom:10px; text-align:left;} .block-carousel p {color:#FF6559; -webkit-transition:all 0.4s ease 0s; transition:all 0.4s ease 0s; -moz-transition:all 0.4s ease 0s; -o-transition:all 0.4s ease 0s; -ms-transition:all 0.4s ease 0s;} /* position dots in carousel */ .flickity-page-dots { bottom: 0px; margin-bottom:60px !important; margin-left:auto !important; } /* white circles */ .flickity-page-dots .dot { width: 8px !important; height: 8px !important; opacity: 1; background: transparent !important; border:1px solid #333; margin:0 5px !important; } /* fill-in selected dot */ .flickity-page-dots .dot.is-selected { background:#333 !important; } /* no circle */ .flickity-button, .flickity-button:hover { background: transparent !important; } /* big previous & next buttons */ .flickity-prev-next-button { width: 60px !important; height: 60px !important; } /* icon color */ .flickity-button-icon { fill: #FF6559 !important; } /* position outside */ .flickity-prev-next-button.previous { left: -7% !important; } .flickity-prev-next-button.next { right: -7% !important; } .block-insta {box-sizing:border-box; margin:0px auto 0px; padding:60px 0px 80px; z-index:20; position:relative; text-align:center; background:#f0f0ef;} .block-insta p {margin:8px;} .block-insta p a {font-size:16px; line-height:16px; color:#FF6559; text-decoration:none; display:inline-block; position:relative; margin:0 !important; padding:0;} .block-insta p a:after { content: ""; position: absolute; bottom: -2px; left: 0px; height: 0; width: 100%; border-bottom: 1px solid #ff675d; transition: width 0.3s ease; } .block-insta p a:hover:after { width: 99%; } .block-insta img {width:100%; padding:30px 0 0;} #instafeed {margin:50px 0 0 0; background:none; display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;} #instafeed:hover a{opacity:.5} #instafeed a{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-basis:calc(100%/3);-ms-flex-preferred-size:calc(100%/3);flex-basis:calc(100%/3);line-height:0;-webkit-transition:opacity .2s ease-in-out;transition:opacity .2s ease-in-out;} #instafeed a:hover{opacity:1} #instafeed img{width:100%; padding:10px; display:block; box-sizing:border-box;} .contact-top-wrapper {box-sizing:border-box; margin:0 auto 0; padding:50px 0 70px; z-index:20; position:relative;} .contact-top-wrapper p {font-size:20px; line-height:27px; letter-spacing:0.4px;} .contact-top-left {box-sizing:border-box; width:90%; margin:0 0 0 10%; float:left; padding:0px 0 0; text-align:left;} .contact-top-right {box-sizing:border-box; width:80%; margin-left:20%; float:left; padding:40px 0 0px;} .contact-top-keyword {color:#FF6559; font-size:15px; line-height:15px; letter-spacing:0.3px;} .contact-top-wrapper p a {display:inline-block; text-decoration:none; position:relative;} .contact-top-wrapper p a:after { content: ""; position: absolute; bottom: 0; left: 0px; height: 0; width: 0; border-bottom: 1px solid #000; transition: width 0.3s ease; } .contact-top-wrapper p a:hover:after { width: 100%; } .team-overview-wrapper{margin:0px -3% 70px -3% !important;} .team-overview-box {width:70%; margin:0% 15% 12%; float:left;} .team-overview-imagewrapper {width:100%; position:relative; padding-top:100%; z-index:10; overflow:hidden; border-radius:50%;} .team-overview-imagewrapper:hover .team-overview-image-overlay {opacity:1;} .team-overview-image {position:absolute; top:0%; width:100%;} .team-overview-image img {width:100%;} .team-overview-image img:hover {transform:scale(1.05);} .team-overview-image-overlay {position:absolute; top:0%; left:0; width:100%; height:100%; z-index:50; text-align:center; padding-top:46%; font-size:17px; line-height:18px; color:#FF6559; letter-spacing:1px; opacity:0;} .team-overview-textwrapper {padding:20px 0px 0; font-size:16px; line-height:16px; letter-spacing:0.3px;} .team-overview-box h2 {font-size:19px; line-height:25px; padding:0px 0 6px;} .team-overview-textwrapper a {font-size:13px; padding:13px 0 0;} }