html * { -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; box-sizing:border-box; text-rendering:optimizeLegibility; }
*, *:before, *:after {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html { scroll-behavior:smooth; }
body { font-family:-apple-system, system-ui, BlinkMacSystemFont, "Roboto", sans-serif; font-optical-sizing:auto; font-weight:400; font-style:normal; color:#666; font-size:16px; line-height:1.42em; position:relative; background:#060016; }
section { width:100%; height:100vh; }
/* Typography */
h2 { font-family:-apple-system-ui-serif, ui-serif, "Tinos", serif; font-weight:400; font-size:30px; line-height:1.3em; }
h4 { font-size:1.67em; font-weight:400; line-height:1.3em; color:#FFF; margin-bottom:14px; }
/* Header */
.header { position:fixed; top:0; left:0; width:100%; z-index:9999999; /*background:rgba(6,0,22,0);*/ transition:background 1s ease; }
/*.header.hasScrolled { background:rgba(6,0,22,0.5); backdrop-filter:blur(3px); }*/
.header .content { width:100%; padding:20px 50px; max-width:initial; }
.header .logo { font-family:"webfire"; text-decoration:none; font-size:54px; padding:10px; line-height:1.3em; text-align:center;
background:rgb(22,150,255); background-size:100%; background-repeat:repeat;
background-image:linear-gradient(90deg, rgba(22,150,255,1) 0%, rgba(154,9,249,1) 50%, rgba(250,83,129,1) 100%);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-moz-background-clip:text;
-moz-text-fill-color:transparent;
}
.header .nav { float:right; margin-top:15px; }
.header .nav a { color:#FFF; font-size:22px; font-weight:600; display:inline-block; margin-left:10px; padding:10px 15px; border-radius:6px; text-decoration:none; transition:background 0.3s ease; }
.header .nav a:hover { background:#19142A; }
.header .back-home { float:right; display:inline-block; margin-top:20px; }
.header .back-home img { height:20px; }
/* Mobile menu icon */
.mobile-menu-icon { display:none; position:absolute; top:28px; right:20px; width:26px; height:26px; transform:rotate(0deg); transition:.5s ease-in-out; cursor:pointer; }
.mobile-menu-icon span { display:block; position:absolute; height:2px; width:100%; background:#FFF; border-radius:5px; opacity:1;
left:0; transform:rotate(0deg); transition:.25s ease-in-out; }
.mobile-menu-icon span:nth-child(1){ top:0px; transform-origin:left center; }
.mobile-menu-icon span:nth-child(2){ top:8px; transform-origin:left center; }
.mobile-menu-icon span:nth-child(3){ top:16px; transform-origin:left center; }
.mobile-menu-icon.open span:nth-child(1){ transform:rotate(45deg); top:-2px; left:4px; }
.mobile-menu-icon.open span:nth-child(2){ width:0%; opacity:0; }
.mobile-menu-icon.open span:nth-child(3){ transform:rotate(-45deg); top:16px; left:4px; }
/* Mobile menu */
.mainmenu-overlay { position:fixed; top:0; left:0; height:100vh; width:100%; background:#060016; z-index:9999998; padding:50px 0; overflow-y:auto; display:none; text-align:center; }
.mainmenu-overlay .outer { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; }
/* .mainmenu-overlay .outer { display:table; height:100%; width:100%; }
.mainmenu-overlay .inner { display:table-cell; height:100%; width:100%; vertical-align:middle; } */
.mainmenu-overlay .inner { width:100%; }
.mainmenu-overlay .inner a { color:#FFF; font-size:26px; text-decoration:none; display:inline-block; margin:15px 0; }
/* .mainmenu-overlay .mainmenu { font-size:38px; line-height:1em; letter-spacing:-0.7px; font-family:'begumsemibold'; font-weight:normal; color:#00d4ff; }
.mainmenu-overlay .mainmenu a { display:inline-block; border-bottom:none; margin-bottom:20px; }
.mainmenu-overlay .mainmenu a:hover { color:#00d4ff; opacity:0.5; }
.mainmenu-overlay .mobile-submenu { margin-top:-10px; display:none; }
.mainmenu-overlay .mobile-submenu a { display:inline-block; margin-right:20px; font-size:18px; line-height:1.2em; letter-spacing:-0.4px; font-family:'begumsemibold'; font-weight:normal; color:#817E7A; }
.mainmenu-overlay .mainmenuimg { display:none; } */
/* Areas/Sections */
.hero-area, .portfolio-area, .our-expertise-area, .brands-area, .quotes-area, .ways-of-working-area, .stages-area { height:auto; min-height:1200px; }
.herointro-area { height:auto; min-height:2000px; }
/* Hero */
#hero { position:relative; }
.hero-bg-overlay { position:fixed; background:#060016; top:0; left:0; height:100%; width:100%; opacity:0; }
.hero-bg-overlay2 { position:fixed; background:#060016; top:0; left:0; height:100%; width:100%; opacity:1; }
#scene { position:fixed; top:0; left:0; height:100%; width:100%; overflow:hidden; }
.touchdevice .hero-bg-overlay, .touchdevice .hero-bg-overlay2, .touchdevice #scene { display:none!important; }
#scene div { width:100%; height:100%; opacity:1; transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0); transform-style:preserve-3d; backface-visibility:hidden; position:absolute; display:block; left:0; top:0; }
#scene div img { width:100%; height:100%; object-fit:contain; }
.touchdevice #hero { background:url('../imgs/hero-bg.webp') center center no-repeat; background-size:100% auto; }
#hero .container { position:relative; z-index:9; max-width:730px; padding:0 15px; height:100%; display:flex; align-items:center; margin:0 auto; }
#hero .container .wrapper { width:100%; text-align:center; }
#hero .container .wrapper h1 { font-family:"Inter"; font-weight:600; font-size:70px; line-height:1.3em; background:rgb(22,150,255); background-image:linear-gradient(90deg, rgba(22,150,255,1) 0%, rgba(154,9,249,1) 50%, rgba(250,83,129,1) 100%); background-size:100%; background-repeat:repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; text-align:center; opacity:0; position:relative; top:50px; text-shadow:0 0 2vw rgba(255,255,255,0.1); }
/* Hero Intro */
#heroIntro .container { max-width:800px; height:100%; display:flex; align-items:center; margin:0 auto; }
/* Portfolio */
#portfolio { display:flex; align-items:center; justify-content:center; }
#portfolio .container { max-width:1200px; margin:0 auto; }
#portfolio .slider-overflow { width:100%; overflow:hidden; }
#portfolio .swiper { overflow:initial; width:100%; margin-top:130px; padding-bottom:70px; }
#portfolio .swiper-slide { width:285px; transition:width 0.5s ease-in-out, opacity 0.1s ease-in-out; color:inherit; text-decoration:none; display:block; opacity:0.8; }
#portfolio .swiper-slide a { display:block; position:relative; top:0; left:0; height:100%; width:100%; color:inherit; text-decoration:none; }
#portfolio .swiper-slide.on { opacity:0.3; }
#portfolio .swiper-slide:hover { width:420px; opacity:1!important; }
#portfolio .swiper-slide .image-area { width:100%; border-radius:12px; background:#000; height:380px; background-size:cover; background-position:center center; background-repeat:none; overflow:hidden; }
#portfolio .title-area { margin-top:30px; font-size:18px; line-height:1.3em; height:60px; }
#portfolio .title-area strong { color:#FFF; font-weight:400; opacity:0; transition:opacity 0.01s ease-in-out; }
#portfolio .title-area span { opacity:0; transition:opacity 0.01s ease-in-out; }
#portfolio .swiper-slide:hover .title-area strong { opacity:1; transition-duration:400ms; }
#portfolio .swiper-slide:hover .title-area span { transition-delay:0.3s; transition-duration:500ms; opacity:1; }
#portfolio .swiper-button-prev::after, #portfolio .swiper-rtl .swiper-button-next::after, #portfolio .swiper-button-next::after, #portfolio .swiper-rtl .swiper-button-prev::after { content:""; }
#portfolio .swiper-button-prev { background:url('../imgs/icon-prev.svg') center center no-repeat; height:41px; width:41px; top:initial; bottom:0; left:0; }
#portfolio .swiper-button-next { background:url('../imgs/icon-next.svg') center center no-repeat; height:41px; width:41px; top:initial; bottom:0px; left:70px; }
.touchdevice #portfolio .swiper-slide { opacity:1; }
.touchdevice #portfolio .swiper-slide:hover { width:285px; }
.touchdevice #portfolio .title-area { position:absolute; bottom:0; left:0; width:100%; padding:14px; /*background:rgba(0,0,0,0.5);*/ height:auto; min-height:105px; color:#FFF; }
.touchdevice #portfolio .title-area strong { opacity:1; font-weight:500; }
.touchdevice #portfolio .title-area span { opacity:1; color:#DDD; font-size:18px; line-height:1.3em; }
/* Brands */
#brands .container { max-width:1600px; height:100%; display:flex; align-items:center; margin:0 auto; text-align:center; }
#brands .container .wrapper { width:100%; padding:0 40px; }
.logo-list { width:100%; display:flex; flex-wrap:wrap; margin-top:20vh; }
.logo-list .col { overflow:hidden; flex-grow:1; padding:30px 40px; height:120px; text-align:center; }
.logo-list .col .logo-area { position:relative; height:100%; width:100%; }
.logo-list .col .bbox { position:absolute; height:100%; width:100%; }
.logo-list .col img { max-height:100%; max-width:100%; height:100%; display:block; position:absolute; left:50%; top:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
/* Gradient titles */
.at2 { position:relative; text-align:center; }
.at2 .grad { position:absolute; top:0; left:0; width:100%; background:rgb(22,150,255); background-image:linear-gradient(90deg, rgba(22,150,255,1) 0%, rgba(154,9,249,1) 50%, rgba(250,83,129,1) 100%); background-size:100%; background-repeat:repeat; background-clip:text; width:100%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; }
.at2 .parts { position:relative; display:inline-block; color:transparent; white-space:nowrap; }
.at2 .parts span { position:absolute; width:100%; height:100%; color:#555; right:0; overflow:hidden; text-align:right; white-space:nowrap; }
.at2 .parts span span { position:absolute; right:0; top:0; width:auto!important; white-space: nowrap; }
/* Contact page */
#contact { position:relative; padding-top:10vh; }
#contact .container { position:relative; text-align: center; }
#svg-plane { position:absolute; width:60%; bottom:calc(90% - 250px); }
#contact .email-link {
font-family: "Inter";
font-weight: 600;
color: #FFF;
font-size: 2.78em;
letter-spacing: -0.05em;
line-height: 1.3em;
margin-top: 20vh;
position: relative;
width: auto;
display: inline-block;
padding-bottom: 5px;
}
#contact .email-link .line {
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 3px;
background: rgb(22,150,255);
background-image: linear-gradient(90deg, rgba(22,150,255,1) 0%, rgba(154,9,249,1) 50%, rgba(250,83,129,1) 100%);
background-size: 100%;
background-repeat: repeat;
}
#contact .email-link a {
color: inherit;
text-decoration: none;
padding:10px 15px; border-radius:6px; transition:background 0.3s ease; }
#contact .email-link a:hover { background:#19142A; }
#contact .telephone {
font-family: "Inter";
font-weight: 600;
color: #FFF;
font-size: 1.67em;
letter-spacing: -0.05em;
line-height: 1.3em;
margin-top: 50px;
}
#contact .telephone a {
color: #666;
text-decoration: none;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
/* margin-top:200px; */
padding: 10px 30px 60px 30px;
width: 100%;
overflow: hidden;
}
.footer .row {
display: flex;
flex-flow: row;
}
.footer .column-4 {
padding: 20px 80px;
width: 100%;
margin: 10px;
}
.footer .column-4:first-of-type {
padding-left:40px;
}
.footer-heading {
font-size: 21px;
line-height: 1.3em;
margin-bottom: 6px;
color: #fff;
font-weight: 400;
margin-block-start: 1.33em;
}
.footer .column-4:last-of-type {
padding-right:40px;
}
.footer a {
color: inherit;
text-decoration: underline;
}
.footer a:hover {
color: #fff;
}
.footer .logo {
font-family: "webfire";
font-size: 2.5em;
margin-top: 36px;
margin-bottom: 17px;
color:#FFF;
}
.footer h4 {
margin-bottom: 6px;
}
.footer .social {
margin-top: 14px;
}
.footer .social a {
display: inline-block;
margin-right:5px;
}
.footer .newsletter {
margin-top:14px;
border-bottom:1px solid #666;
}
.footer .newsletter .input {
display:inline-block;
border:none;
background:none;
color:#FFF;
width:calc(100% - 24px);
padding:5px 0;
}
.footer .newsletter .submit {
display:inline-block;
height:20px;
width:24px;
padding:0;
background: url('../imgs/icon-submit.svg') center right no-repeat;
border:none;
cursor: pointer;
text-indent: -9999px;
}
::placeholder { color:#666; opacity:1; }
::-ms-input-placeholder { color:#666; }
#quotes .content { max-width:780px; width:100%; margin:auto; }
#quotes h2 { background:rgb(36,64,242); background-image:linear-gradient(90deg, rgba(36,64,242,1) 0%, rgba(0,241,255,1) 100%); background-size:100%; background-repeat:repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; text-align:center; font-style:italic; }
#quotes .swiper { width:100%; }
#quotes .swiper-slide { font-size:18px; color:#fff; -webkit-box-sizing:border-box; box-sizing:border-box; padding:100px 60px 100px 60px; }
#quotes .parallax-bg { position:absolute; left:0; top:0; text-align:center; width:100%; }
#quotes .parallax-bg img { width:40px; }
#quotes .swiper-slide .subtitle { font-size:21px; }
#quotes .swiper-slide .text { font-size:14px; max-width:400px; line-height:1.3; }
#quotes .line { width:90%; max-width:370px; background:#19142B; height:1px; margin:60px auto 30px auto; }
#quotes .title { font-size:22px; line-height:1.3em; color:#666; text-align:center; font-weight:600; letter-spacing:-0.03em; margin-bottom:30px; }
#quotes .logoarea { text-align:center; height:70px; width:150px; margin:auto; /*display:flex; align-items:center; justify-content:center;*/ }
#quotes .logoarea img { max-height:100%; max-width:100%; }
#quotes .swiper-button-prev::after, #quotes .swiper-rtl .swiper-button-next::after, #quotes .swiper-button-next::after, #quotes .swiper-rtl .swiper-button-prev::after { content:""; }
#quotes .swiper-button-prev { background:url('../imgs/icon-prev.svg') center center no-repeat; height:41px; width:41px; top:initial; bottom:0px; left:calc(50% - 61px); }
#quotes .swiper-button-next { background:url('../imgs/icon-next.svg') center center no-repeat; height:41px; width:41px; top:initial; bottom:0px; left:calc(50% + 10px); }
#our-expertise { display:flex; align-items:center; justify-content:center; }
#our-expertise .content { width:100%; max-width:1800px; display:flex; flex-wrap:wrap; position:relative; margin:auto; padding:0 40px 0 20px; }
#our-expertise .content.mobile { display:none; }
#our-expertise .content .left-col { width:364px; padding-right:44px; font-size:22px; }
#our-expertise .content .left-col .title { color:#FFF; padding:15px 15px; }
#our-expertise .content .left-col .button { display:block; margin:5px 0; padding:10px 15px; border-radius:6px; cursor:pointer; }
#our-expertise .content .left-col .button:hover, #our-expertise .content .left-col .button.selected { background: /*rgba(255, 255, 255, 0.11);*/#19142A; }
#our-expertise .content .left-col .button span { display:block; width:100%; transition:all 0.5s ease; background:#666; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; }
#our-expertise .content .left-col .button:hover span, #our-expertise .content .left-col .button.selected span { background:#CCC; background-size:100%; background-repeat:repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; }
#our-expertise .content .left-col .button.selected span { background-image:linear-gradient(90deg, rgba(22,150,255,1) 0%, rgba(154,9,249,1) 50%, rgba(250,83,129,1) 100%); }
#our-expertise .content .middle-col { width:50%; font-size:16px; line-height:1.3em; padding-right:24px; }
#our-expertise .content .middle-col strong { font-weight:400; color:#FFF; }
#our-expertise .content img, #our-expertise .content .video-areas { position:absolute; top:101%; left:0; width:100%; transition:top 0.3s ease-in-out; }
#our-expertise .content .video-areas video { width:100%; height:auto; }
#our-expertise .content .selected { top:0%; }
#our-expertise .content .selected.finished { top:-130%; }
#our-expertise .content .right-col { width:calc(50% - 364px); }
#our-expertise .content .image { margin-bottom:24px; position:relative; border-radius:12px; overflow:hidden; aspect-ratio:1.5; }
#our-expertise .content .main-image { aspect-ratio:16/9; }
#our-expertise .content .video-areas { aspect-ratio:16/9; background-color: #19142A; }
#our-expertise .content .text { margin-top:40px; position:relative; }
#our-expertise .content .text p { margin-top:0; }
#our-expertise .content .text div { position:absolute; top:0; left:0; width:100%; padding-right:20%; display:none; }
#our-expertise .content .text div.selected { display:block; }
#our-expertise .content .text div.cms { position:relative; }
#our-expertise { width:100%; overflow-x:hidden; }
#our-expertise .mobmenubounce1 { margin-top:40px; }
#our-expertise .mobmenubounce1 .swiper-slide { width:auto; margin-right:5px; }
#our-expertise .mobmenubounce1 .swiper-slide .bounce-button { display:inline-block; border-radius:6px; padding:6px 10px; font-size:18px; color:#666; letter-spacing:-0.05px; font-weight:500; }
#our-expertise .mobmenubounce1 .swiper-slide .bounce-button.selected { background:#19142A; }
#our-expertise .mobmenubounce1 .swiper-slide .bounce-button.selected span { background:rgb(22,150,255); background-image:linear-gradient(90deg, rgba(22,150,255,1) 0%, rgba(154,9,249,1) 90%, rgba(250,83,129,1) 150%); background-size:100%; background-repeat:repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; -moz-background-clip:text; -moz-text-fill-color:transparent; }
#our-expertise .exp-mobile { display:none; }
#our-expertise .expm1 { display:block; }
.expertise-title {
font-size: 1.67em;
line-height: 1.3em;
font-weight: 400;
color: #fff;
margin-bottom: 14px;
margin-block-start: 1.33em;
}
/* Ways of Working */
#ways-of-working-new { position:relative; padding-top:200px; }
#ways-of-working-new .delayed-section { position: absolute; width:450px; }
#ways-of-working-new .delayed-section .inner-container { will-change:transform; }
#ways-of-working-new .delayed-section .imgborder { border-radius:12px; overflow:hidden; }
#ways-of-working-new .delayed-section .imgborder img { width:100%; }
#ways-of-working-new .delayed-section img { max-width:100%; will-change:transform; }
#ways-of-working-new #del0 { top:150px; left:0; width:100%; }
#ways-of-working-new #del1 { top:300px; left:15vw; padding:20px; }
#ways-of-working-new #del2 { top:340px; left:calc(15vw + 465px); }
#ways-of-working-new #del3 { top:600px; right:15vw; padding:20px; }
#ways-of-working-new #del4 { top:640px; right:calc(15vw + 465px); text-align:right; }
/* Stages */
.stages-area { margin-bottom:40vh; }
#stages-new { position:relative; padding-top:200px; }
#stages-new .delayed-section { position: absolute; width:450px; }
#stages-new .delayed-section .inner-container { will-change:transform; }
#stages-new .delayed-section .imgborder { border-radius:12px; overflow:hidden; }
#stages-new .delayed-section .imgborder img { width:100%; }
#stages-new .delayed-section img { max-width:100%; will-change:transform; }
#stages-new #sdel0 { top:150px; left:0; width:100%; }
#stages-new #sdel1 { top:300px; left:15vw; padding:20px; }
#stages-new #sdel2 { top:300px; left:calc(15vw + 465px); }
#stages-new #sdel3 { width:340px; top:600px; right:calc(5vw + 360px); padding:15px; }
#stages-new #sdel4 { width:340px; top:570px; right:5vw; }
#stages-new #sdel5 { width:275px; top:750px; left:5vw; padding:10px; }
#stages-new #sdel6 { width:340px; top:730px; left:calc(5vw + 305px); }
@media (max-height:900px){
.header .logo { font-size:48px; line-height:1.3em; }
.header .nav a { font-size:18px; line-height:1.3em; }
h2 { font-size:25px; line-height:1.3em; }
h4 { font-size:21px; line-height:1.3em;}
.footer-heading {font-size:21px; line-height:1.3em;}
.expertise-title {font-size:21px; line-height:1.3em;}
#hero .container { max-width:600px; }
#hero .container .wrapper h1 { font-size:60px; line-height:1.3em; }
#portfolio .swiper { margin-top:80px; }
#portfolio .swiper-slide { width:245px; }
#portfolio .swiper-slide:hover { width:360px; }
#portfolio .swiper-slide .image-area { height:300px; }
#portfolio .title-area { font-size:17px; line-height:1.3em; margin-top:20px; }
.touchdevice #portfolio .swiper-slide:hover { width:245px; }
.touchdevice #portfolio .title-area { padding:14px; min-height:95px; }
.touchdevice #portfolio .title-area strong { font-weight:500; }
.touchdevice #portfolio .title-area span { font-size:15px; line-height:1.3em; }
#our-expertise .content .main-image { aspect-ratio:16/9; }
#our-expertise .content .main-image .selected.finished { top:-130%; }
#our-expertise .content .left-col { font-size:18px; }
#our-expertise .content .left-col .button { padding:5px 15px; }
#our-expertise .content { width:100%; max-width:1500px; }
#our-expertise .content .text div { padding-right:50px; }
#our-expertise .content .middle-col { font-size:16px; line-height:1.3em; }
.logo-list { margin-top:15vh; }
#quotes .swiper-slide { padding:60px 60px 80px 60px; }
#quotes .line { margin:40px auto 30px auto; }
#quotes .title { font-size:20px; line-height:1.3em; }
#quotes .logoarea { height:100px; }
#ways-of-working .label-mask { max-width:260px; }
#ways-of-working .star { width:200px; height:200px; }
#stages .overlaycontainer, #ways-of-working .overlaycontainer { top:10vh; }
#svg-plane { bottom: calc(90% - 212px); }
#contact .email-link { font-size:2.18em; letter-spacing:-0.03em; line-height:1.3em; }
#contact .telephone { font-size:1.47em; letter-spacing:-0.03em; line-height:1.3em;}
.footer { padding:10px 30px 0px 30px }
.footer .logo { font-size:32px; }
}
@media (max-width:1500px){
/* Stages */
.stages-area { min-height:1400px; }
#stages-new .delayed-section { width:450px; }
#stages-new #sdel0 { top:150px; left:0; width:100%; }
#stages-new #sdel1 { width:450px; top:300px; left:15vw; }
#stages-new #sdel2 { width:450px; top:310px; left:calc(15vw + 485px); }
#stages-new #sdel3 { width:450px; top:600px; right:15vw; }
#stages-new #sdel4 { width:450px; top:610px; left:initial; right:calc(15vw + 485px); text-align:right; }
#stages-new #sdel5 { width:450px; top:900px; left:15vw; }
#stages-new #sdel6 { width:450px; top:910px; left:calc(15vw + 485px); }
.footer .column-4 { padding-right:20px;}
}
@media (max-width:1100px){
.header .content { padding:20px 30px; }
.header .logo { font-size:48px; line-height:1.3em; }
.header .nav a { font-size:18px; line-height:1.3em; }
#hero .container { max-width:500px; }
#hero .container .wrapper h1 { font-size:50px; line-height:1.3em; }
h2 { font-size:25px; line-height:1.3em; }
h4 { font-size:21px; line-height:1.3em;}
.footer-heading {font-size:21px; line-height:1.3em;}
.expertise-title {font-size:21px; line-height:1.3em;}
#heroIntro .container { padding:0 60px; }
#portfolio .container { padding:0 60px; }
#portfolio .swiper { margin-top:80px; }
#portfolio .swiper-slide { width:245px; }
#portfolio .swiper-slide:hover { width:360px; }
#portfolio .swiper-slide .image-area { height:300px; }
#portfolio .title-area { font-size:17px; line-height:1.3em; margin-top:20px; }
.touchdevice #portfolio .swiper-slide:hover { width:245px; }
.touchdevice #portfolio .title-area { padding:14px; min-height:95px; }
.touchdevice #portfolio .title-area strong { font-weight:500; }
.touchdevice #portfolio .title-area span { font-size:15px; line-height:1.3em; }
#our-expertise .content .left-col { font-size:18px; width:285px; }
#our-expertise .content .right-col { display:none; }
#our-expertise .content .left-col .button { padding:5px 15px; }
#our-expertise .content { width:100%; max-width:1500px; }
#our-expertise .content .text div { padding-right:50px; }
#our-expertise .content .middle-col { font-size:18px; line-height:1.3em; width:calc(100% - 285px); }
.logo-list { margin-top:15vh; flex-wrap:wrap; }
.logo-list::after { content:""; flex-basis:100%; }
.logo-list .col:nth-child(n + 4) { order:2; }
.logo-list .col .logo-area { max-width:200px; margin:auto; }
#quotes .swiper-slide { padding:60px 60px 80px 60px; }
#quotes .line { margin:40px auto 30px auto; }
#quotes .title { font-size:20px; line-height:1.3em; }
#quotes .logoarea { height:100px; }
#ways-of-working-new .delayed-section { width:380px; }
#ways-of-working-new #del1 { top:300px; left:5vw; padding:0; }
#ways-of-working-new #del2 { top:320px; left:calc(5vw + 410px); width:330px; }
#ways-of-working-new #del3 { top:600px; right:5vw; padding:0; }
#ways-of-working-new #del4 { top:620px; right:calc(5vw + 410px); text-align:right; width:330px; }
.stages-area { min-height:1400px; }
#stages-new .delayed-section { width:380px; }
#stages-new #sdel1 { width:380px; top:300px; left:5vw; padding:0; }
#stages-new #sdel2 { width:330px; top:290px; left:calc(5vw + 410px); }
#stages-new #sdel3 { width:380px; top:600px; right:5vw; padding:0; }
#stages-new #sdel4 { width:330px; top:590px; left:initial; right:calc(5vw + 410px); text-align:right; }
#stages-new #sdel5 { width:380px; top:900px; left:5vw; padding:0; }
#stages-new #sdel6 { width:330px; top:890px; left:calc(5vw + 410px); }
/* #ways-of-working .label-mask { max-width:260px; }
#ways-of-working .star { width:200px; height:200px; }
#ways-of-working .panel .inner { max-width:400px; } */
/* #stages .overlaycontainer, #ways-of-working .overlaycontainer { top:20vh; }
#stages .panel .inner { display:block; max-width:500px; }
#stages .panel .img-area { width:240px; margin:auto; }
#stages .panel .img-area.right { width:240px; margin:auto; }
#stages .txt-area, #stages .txt-area.right { padding:0 40px; text-align:center; } */
.footer { font-size:14px; line-height:1.3em; }
.footer .column-4 { padding:0 10px; }
.footer .column-4:first-of-type { padding-left:0; }
.footer .column-4:last-of-type { padding-right:0; }
.footer h4.logo { font-size:32px; }
.footer .social img { width:32px; }
}
/* Medium */
@media (max-width:768px){
/*
* iPad mini 6th Gen
*/
h2 { font-size:23px; line-height:1.3em; }
.header { background:rgba(6,0,22,0.2); backdrop-filter:blur(4px); }
.header .content { width:100%; padding:10px 20px; }
.header .logo { font-size:44px; padding:8px; line-height:1.3em; }
.header .nav { float:right; margin-top:15px; display:none; }
.header .nav a { font-size:18px; margin-left:20px; }
.mobile-menu-icon { display:block; }
.touchdevice #hero { background-size:120% auto; }
#hero .container { padding:0 60px; }
#hero .container .wrapper h1 { font-size:40px; line-height:1.3em; }
.touchdevice #hero { background:url('../imgs/hero-mobile-bg.webp') center center no-repeat; background-size:100% auto; }
#heroIntro .container { padding:0 25px; }
.logo-list { margin-top:40px; }
.logo-list .col {flex: 50%; }
.logo-list .col:nth-child(n + 4) { order:initial; }
.logo-list .col .logo-area { max-width:200px; margin:auto; }
#portfolio .swiper { padding-bottom:70px; margin-top:60px; }
#portfolio .container { padding:0 15px; }
#portfolio .swiper-button-next { left:52px; }
.quotes-area { min-height:auto; }
#quotes { height:auto; min-height:auto; }
#quotes .swiper-button-next { left:calc(50% + 3px); }
#quotes .swiper-button-prev { left: calc(50% - 54px); }
/* #ways-of-working-new .delayed-section { width:100%; padding:15px; }
#ways-of-working-new #del1 { top:300px; left:0; }
#ways-of-working-new #del2 { top:320px; left:calc(5vw + 410px); width:330px; }
#ways-of-working-new #del3 { top:600px; right:5vw; }
#ways-of-working-new #del4 { top:620px; right:calc(5vw + 410px); text-align:right; width:330px; } */
/* Ways of Working */
#ways-of-working-new { position:relative; height:auto; /*padding:400px 0;*/ }
#ways-of-working-new .delayed-section { position:relative; width:100%; padding:0 15px; }
#ways-of-working-new .delayed-section .inner-container { will-change:transform; }
#ways-of-working-new .delayed-section .imgborder { border-radius:12px; overflow:hidden; }
#ways-of-working-new .delayed-section .imgborder img { width:100%; }
#ways-of-working-new .delayed-section img { max-width:100%; will-change:transform; }
#ways-of-working-new #del0 { top:initial; left:0; width:100%; padding-bottom:50px; }
#ways-of-working-new #del1 { top:initial; left:0; width:100%; }
#ways-of-working-new #del2 { top:initial; left:0; width:100%; }
#ways-of-working-new #del3 { top:initial; left:0; width:100%; }
#ways-of-working-new #del4 { top:initial; left:0; width:100%; text-align:left; }
#stages-new { position:relative; height:auto; /*padding:400px 0;*/ }
.stages-area { min-height:1400px; }
#stages-new .delayed-section { position:relative; width:100%; padding:0 15px; }
#stages-new .delayed-section .inner-container { will-change:transform; }
#stages-new .delayed-section .imgborder { border-radius:12px; overflow:hidden; }
#stages-new .delayed-section .imgborder img { width:100%; }
#stages-new .delayed-section img { max-width:100%; will-change:transform; }
#stages-new #sdel0 { top:initial; left:0; width:100%; padding-bottom:50px; }
#stages-new #sdel1 { width:100%; top:initial; left:0; }
#stages-new #sdel2 { width:100%; top:initial; left:0; }
#stages-new #sdel3 { width:100%; top:initial; left:0; }
#stages-new #sdel4 { width:100%; top:initial; left:0; text-align:left; }
#stages-new #sdel5 { width:100%; top:initial; left:0; }
#stages-new #sdel6 { width:100%; top:initial; left:0; }
.footer .nl-col { display:none; }
}
/* Small */
@media (max-width:576px){
/*
* iPhone 13 Pro Max
* iPhone 13 Mini
* iPhone SE
*/
h2 { font-size:20px; line-height:1.3em; margin:0 40px; }
/* Areas/Sections */
.hero-area, .herointro-area, .portfolio-area, .our-expertise-area, .brands-area, .quotes-area, .ways-of-working-area, .stages-area { height:auto; min-height:900px; }
.header .content { width:100%; padding:10px 15px; }
.header .logo { font-size:34px; padding:8px; line-height:1.3em; }
.header .nav { float:right; margin-top:10px; }
.header .nav a { font-size:16px; margin-left:15px; }
.mobile-menu-icon { top:22px; }
.header .back-home { margin-top:8px; }
#hero .container .wrapper h1 { font-size:34px; line-height:1.3em; }
#heroIntro .container { padding:0 16px; }
/* Brands */
#brands .container .wrapper { padding:0 15px; }
/* Quotes */
.quotes-area { min-height:auto; }
/* #quotes .logoarea { display:none; } */
#quotes .logoarea { height:40px; }
#quotes .title { font-size:16px; margin-bottom:20px; }
#quotes .line { margin:20px auto 20px auto; width:80%; }
#quotes .swiper-slide { padding:40px 30px 50px 30px; }
#quotes .parallax-bg img { width:30px; }
#quotes h2 { margin:0 20px; }
/* Our Expertise */
#our-expertise { height:auto; padding:30vh 0; }
#our-expertise .content .left-col { display:none; }
#our-expertise .content .right-col { display:none; }
#our-expertise .content.large { width:100%; max-width:1500px; padding:0 15px; display:none; }
#our-expertise .content.mobile { display:block; width:100%; max-width:1500px; padding:0 15px; }
#our-expertise .content .text div { padding-right:50px; }
#our-expertise .content .middle-col { font-size:16px; line-height:1.3em; width:calc(100%); }
#our-expertise .content.mobile img, #our-expertise .content.mobile .video-areas { position:relative; top:0; }
#our-expertise .content.mobile .img-area { border-radius:14px; overflow:hidden; margin:14px 0; }
#our-expertise .content.mobile strong { font-weight:400; color:#FFF; }
#our-expertise .content.mobile .sub-title { font-size:18px; font-weight:500; color:#FFF; margin-top:40px; }
#our-expertise .content.mobile .text-area { padding-right:20px; font-size:14px; line-height:1.3em; }
#our-expertise .content.mobile .video-areas { border-radius:14px; overflow:hidden; margin:14px 0; }
#our-expertise .content.mobile .video-areas video { width:100%; height:auto; }
#contact { height:calc(100vh - 100px); }
#contact .email-link { font-size:24px; letter-spacing:0; }
#contact .telephone { font-size:22px; letter-spacing:0; margin-top:20px; }
#svg-plane { width:100%; left:-36%; bottom: calc(90% - 150px); }
.footer { padding-left:10px; padding-right:10px; padding-bottom:20px; }
.footer .row { display:block; }
.footer .row .column-4 { display:inline-block; width:43%; padding:0; }
.footer .row .column-4.contact-col, .footer .row .column-4.nl-col { display:none; }
.footer .row .column-4.co-col h4, .footer .row .column-4.co-col .nl-text { display:none; }
.footer .row .column-4.co-col { text-align:right; position:relative; top:-36px; }
/* //.footer .co-col { width:100%; } */
}
/* Small */
@media (max-width:476px){
#contact { height:calc(100vh - 50px); }
}
/* Extra small */
@media (max-width:372px){
/*
* iPod touch
*/
}