body { background:#ccc; font-size:1.8vh; font-weight:400; }
.container { width:1170px; margin-left:auto !important; margin-right:auto !important; }
@media (max-width: 719px) { body { font-size:2.2vh; .container { width:94vw; margin-left:auto !important; margin-right:auto !important; }  } }
p { font-weight:400; }
header { position:absolute; z-index:90; display:flex; justify-content:flex-start; align-items:center; width:100vw; height:10vh;  }
@media (max-width: 1400px) { header { height:11vh;  } }
.socials { display:flex; align-items:center; width:fit-content; height:fit-content; margin-left:auto; margin-right:6vw; margin-top:10vh; }
.socials a { position:relative; display:inline-block; margin:0 1vw 0 0; }
.socials a img { width:1.25vw; height:1.25vw; }
.nav-but { width:fit-content; height:50%; margin:9vh 5vw 0 0; cursor:pointer; }
.nav-but img { width:auto; height:100%; }
.nav { position:fixed; z-index:95; width:100vw; height:100vh; left:110vw; background:#ddd; transition:.4s; overflow:hidden; }
.nav-opened { left:0; }
.nav-menu { --bg:#ccc; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; width:100%; height:100%; padding:22vh 3vw; background:var(--bg); transition:.3s ease; }
.nav-menu a { display:inline-block; width:50%; font-size:150%; font-weight:300; color:#333; text-shadow: 2px 4px 6px rgba(0,0,0,.25); padding:0 0 1.5rem 0; transition:.35s ease; }
.nav-menu a:hover { color:#00a0e3; }
.nav-info { position:absolute; width:50%; left:50%; z-index:2; }
.nav-info-stab { position:absolute; width:80%; bottom:5vh; text-align:right; }
.nav-info-stab h1 { font-size:220%; font-weight:600; color:#21a2e2; padding:0; margin:0 0 1rem 0; text-align:right; }
.nav-info-stab a { font-size:140%; font-weight:300; color:#333; margin:0 0 .5rem 0; }
.nav-close { position:absolute; z-index:3; top:4vh; right:9vw; width:fit-content; height:fit-content; font-size:250%; font-weight:600; color:#666; cursor:pointer; transition:.4s; }
.nav-close:hover { color:#b30000; }

.sub-cont { position:relative; width:100vw; height:100vh; margin:0; padding:0; color:#777; }
#main { position:relative; width:100vw; height:100vh; overflow:hidden; }
#main .logo { position:absolute; z-index:6; top:5vh; left:3vw; width:150px; height:fit-content; opacity:1; }
#main .logo img { width:100%; height:auto; }
#main video { width:100vw; height:auto; }
#main .mask { position:absolute; z-index:99; display:flex; justify-content:center; align-items:center; width:100vw; height:100vh; background:#fff; transition:.5s; }
#main .mask img { width:25vw; height:auto; }
.mask-gone { opacity:0; }
.banner-motto { position:absolute; z-index:2; bottom:30vh; left:15vw; }
.banner-motto .banner-motto-header { font-size:500%; font-weight:300; color:#fff; line-height:90%; }
.banner-motto .banner-motto-header strong { font-weight:600; }
.banner-motto .banner-motto-text { font-size:200%; color:#fff; margin:3vh 0 0 0; font-weight:300; }
.line { position:absolute; transition:.6s; }
.line1 { width:3px; height:0; background:#00a0e3; z-index:4; top:0; left:14%; }
.line2 { width:0; height:3px; background:#888; z-index:3; top:16%; left:0; }
.line3 { width:3px; height:0; background:#b3b3b3; z-index:2; top:0; right:14%;  }
.line4 { width:0; height:3px; background:#b3b3b3; z-index:1; bottom:16%; left:0; }
.line-gow { width:100%; }
.line-goh { height:100%; }
.banner img { opacity:0; transition:opacity .6s; }
.open-opacity { opacity:1 !important; }
#about { display:flex; justify-content:flex-start; align-items:center; height:auto; padding:10vh 5vw; margin:0 0 -5vh 0; border:0; background:linear-gradient(0deg,rgba(140, 140, 140, 1) 30%, rgba(205, 205, 205, 1) 100%);  }
.about-box { flex:1; display:flex; justify-content:flex-start; align-items:center; flex-direction:column; padding:5vh 0 0 0; height:40vh; text-align:center; }
.about-box:nth-child(1){ background:#dadada; color:#363636; }
.about-box:nth-child(2){ background:#444; color:#fff; }
.about-box:nth-child(3){ background:#aaa; color:#363636; }
.about-box-head { margin:0 2vw 3vh 2vw; font-weight:600; font-size:160%; }
.about-box:nth-child(3) > .about-box-text { line-height:120%; }
.about-box:nth-child(3) > .about-box-text span { color:#777; }
.about-box-text { font-size:130%; line-height:150%; font-weight:400; }
#whatdo { display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; }
#whatdo h2 { font-size:400%; font-weight:300; margin:5vh 0 0 20vw; padding:0; }
#whatdo h3 { font-size:300%; font-weight:900; margin:10vh 0 5vh 5vw; padding:0; }
#whatdo section { display:flex; justify-content:flex-start; width:80%; padding:5vh 5vw 0 15%; margin:0; }
#whatdo section u { position:absolute; z-index:2; left:0; width:80%; height:3px; background:#00a0e3; margin:7vh 0 0 0; }
#whatdo section div { width:50%; }
#whatdo section div h4 { width:100%; padding:0; font-size:300%; text-align:center; margin:0 0 2vh 0; }
#whatdo section div span { display:block; width:90%; margin:1.5vh auto 0 auto; font-size:150%; text-align:center; }
#whatdo .sub-logo { position:absolute; z-index:2; left:1vw; top:2vh; width:250px; height:auto; display:none; }
#howdo { display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; }
#howdo h2 { font-size:400%; font-weight:300; margin:5vh 0 0 20vw; padding:0; }
#howdo h3 { font-size:300%; font-weight:900; margin:10vh 0 5vh 5vw; padding:0; }
#howdo section { display:flex; justify-content:flex-start; width:90%; padding:5vh 5vw 0 5vw; margin:0; }
#howdo section u { position:absolute; z-index:2; left:0; width:90%; height:3px; background:#00a0e3; margin:7vh 0 0 0; }
#howdo section div { flex:1 }
#howdo section div h4 { width:100%; padding:0; font-size:300%; text-align:center; margin:0 0 2vh 0; }
#howdo section div span { display:block; width:90%; margin:2vh auto 0 auto; font-size:140%; text-align:center; }
#howdo .sub-logo { position:absolute; z-index:2; left:1vw; top:2vh; width:250px; height:auto; display:none; }

.page-projects { position:relative; height:auto; padding:10vh 0; background:linear-gradient(24deg,rgba(44, 44, 44, 1) 50%, rgba(18, 18, 18, 1) 100%); }
.projects-cont {  width:100vw; height:80vh; overflow:hidden; }
.page-projects h2 { font-size:300%; font-weight:400; margin:5vh 0 0 16.5vw; color:#fff; }
.video-cont { width:100vw; height:80vh; }
.video-cont-stab { position:relative; z-index:1; width:100vw; height:80vh; overflow:hidden; }
.video-cont-stab video { position:absolute; z-index:2; width:100%; height:100%; }
.squares { position:absolute; z-index:1; width:40vh; height:40vh; background:#ccc; display:none; }
.squares:nth-child(odd) { top:6vh; left:14vh; }
.squares:nth-child(even) { bottom:4vh; right:14vh; }
.projects-explain { position:absolute; z-index:3; align-items:center; width:40%; bottom:7vh; left:16vh; padding:2rem; background:rgba(222,222,222,.85); }
.projects-explain img { float:right; width:120px; margin:0 0 0 2vw; }
.projects-explain h4 { font-size:3vh; color:#363636; }
.projects-explain h5 { font-size:2.3vh; color:#363636; margin:.3rem 0 .6rem 0; }
.projects-cont > .slick-prev { left:6vw !important; }
.projects-cont > .slick-next { right:6vw !important; }
.slick-prev:before, .slick-next:before { color:#fff !important; }

#brands { display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; height:auto; background:linear-gradient(0deg,rgba(205, 205, 205, 1) 40%, rgba(140, 140, 140, 1) 100%);  }
#brands h2 { font-size:300%; font-weight:300; margin:5vh 0 0 10vw; padding:0; color:#444;  }
#brands h2 span { font-size:70%; font-weight:900; margin:0 0 0 .5vw; padding:0 0 0 1vw; color:#444; border-left: 1px solid #666; }
#brands section { display:flex; justify-content:flex-start; flex-wrap:wrap; padding:0; margin:5vh 5vw 10vh 10vw; }
#brands section figure { width:8vw; height:11vh; border:1px solid #aaa; filter: grayscale(100%); transition:.4s; }
#brands section figure:hover { filter: grayscale(0); }
#brands .sub-logo { position:absolute; z-index:2; left:1vw; top:2vh; width:250px; height:auto; display:none; }
#brands-public { display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:column; height:auto; padding:0 0 15vh 0;  background:linear-gradient(0deg,rgba(140, 140, 140, 1) 40%, rgba(205, 205, 205, 1) 100%); margin:0 0 -5vh 0; }
#brands-public h2 { font-size:300%; font-weight:300; margin:5vh 0 0 25%; padding:0; color:#444; }
#brands-public h2 span { font-size:70%; font-weight:900; margin:0 0 0 .5vw; padding:0 0 0 1vw; color:#444; border-left: 1px solid #666; }
#brands-public section { display:flex; justify-content:flex-start; flex-wrap:wrap; width:50%; padding:0; margin:5vh 25% 0 25%; }
#brands-public section figure { width:9.8vw; height:11vh; border:1px solid #aaa; filter: grayscale(100%); transition:.4s; }
#brands-public section figure:hover { filter: grayscale(0); }
#brands-public .sub-logo { position:absolute; z-index:2; left:1vw; top:2vh; width:250px; height:auto; display:none; }

.page-contact { color:#fff; margin:0; height:auto !important; font-size:100%; padding-bottom:10vh; background:linear-gradient(24deg,rgba(44, 44, 44, 1) 50%, rgba(18, 18, 18, 1) 100%); text-align:center; }
.contact-locations { display:flex; justify-content:space-between; width:60vw; flex-wrap:wrap; margin:3vh auto 0 auto; }
.contact-locations .location { width:48%; text-shadow: 2px 4px 6px rgba(0,0,0,.25); line-height:140%; margin:6vh auto 0 auto; }
.contact-locations .location strong { display:inline-block; margin:0 0 1rem 0;  }
.contact-phone { display:flex; justify-content:center; align-items:center; width:100%; margin:3vh auto 3vh auto; }
.contact-phone img { width:16px; height:auto; margin:0 .6vw 0 0; }
.contact-email { display:flex; justify-content:center; align-items:center; width:100%; margin:3vh auto; }
.contact-email img { width:16px; height:auto; margin:0 1vw 0 0; }
.contact-phone a { color:#fff; text-decoration:none; text-shadow: 2px 4px 6px rgba(0,0,0,.25); }
.contact-phone a:hover { color:#aaa; }
.contact-map { width:100%; text-align:center; }
.contact-map a { display:flex; justify-content:center; align-items:center; width:250px; height:40px; margin:auto; background:#fff; border:0; color:#363636; font-size:110%; font-weight:600; cursor:pointer; transition:0.4s;  }
.contact-map a:hover { background:#aaa; }
.tursab { width:100px; height: auto; margin:2vh auto; }
.copyright { margin:0 auto 0 auto; font-size:90%; text-align:center;  }


@media (max-width: 719px) {
    .nav-but { margin:0 4vw; }
    .socials { margin-right:2vw; margin-top:2vh; }
    .socials a { margin:0 6vw 0 0; }
    .socials a img { width:4vw; height:4vw; }
    .nav-menu a { width:80%; font-size:120%; padding:0 0 1.5rem 0; }
    .nav-info-stab { width:90%;  }
    .nav-info-stab h1 { font-size:180%; margin:0 0 1rem 0; text-align:right; }
    .nav-info-stab a { font-size:120%; margin:0 0 .5rem 0; }
    #main .logo { position:absolute; z-index:6; top:2vh; left:3vw; width:30vw; height:fit-content; opacity:1; }
    #main video { width:auto; height:100vh; margin-left:-100vw; }
    #main .mask img { width:50vw; height:auto; }
    .banner-motto { width:60vw; bottom:35vh; left:20vw; }
    .banner-motto .banner-motto-header { font-size:250%; }
    .banner-motto .banner-motto-text { font-size:100%; margin:3vh 0 0 0; }
    #about { flex-direction:column; align-items:center; height:auto; padding:10vh 5vw; }
    .about-box { flex:none; width:100%; padding:4vh 0; height:auto; }
    .about-box-head { margin:0 2vw 3vh 2vw; font-weight:600; font-size:120%; }
    .about-box:nth-child(3) > .about-box-text { line-height:100%; }
    .about-box:nth-child(3) > .about-box-text span { color:#777; }
    .about-box-text { font-size:100%; line-height:150%; font-weight:400; }
    .sub-logo { width:40vw !important; }
    #whatdo { height:auto; }
    #whatdo h2 { font-size:200%; margin:14vh 0 0 6vw; }
    #whatdo h3 { font-size:180%; margin:0 0 3vh 14vw; }
    #whatdo section { width:100%; padding:0; margin:0; flex-wrap:wrap; }
    #whatdo section u { display:none; }
    #whatdo section div { width:100%; margin-bottom:5vh; }
    #whatdo section div h4 { width:100%; font-size:200%; text-align:center; margin:0 0 2vh 0; }
    #whatdo section div span { font-size:120%; margin:1.5vh auto 0 auto; }
    #howdo { height:auto; }
    #howdo h2 { font-size:200%; margin:14vh 0 0 6vw; }
    #howdo h3 { font-size:180%; margin:0 0 3vh 14vw; }
    #howdo section { width:100%; padding:0; margin:0; flex-wrap:wrap; }
    #howdo section u { display:none; }
    #howdo section div { width:100%; margin-bottom:5vh; flex:unset; }
    #howdo section div h4 { width:100%; font-size:200%; text-align:center; margin:0 0 2vh 0; }
    #howdo section div span { font-size:110%; margin:1.8vh auto 0 auto; }
    .page-projects { height:70vh; position:relative; padding:0 0 10vh 0; }
    .page-projects h2 { position:absolute; z-index:1; font-size:250%; top:0; right:3vw;  }
    .projects-cont { width:100vw; height:60vh; }
    .video-cont { height:60vh; }
    .video-cont-stab { height:60vh; }
    .video-cont-stab video { position:absolute; z-index:2; width:100%; height:100%; }
    .squares { display:none; }
    .projects-explain { width:100%; bottom:unset; left:0; margin-top:40vh; padding:1.5vh 1vw; }
    .projects-explain img { width:25vw; margin:-3vh 0 0 0; }
    .projects-explain h4 { font-size:100%; }
    .projects-explain h5 { font-size:90%; margin:.3rem 0 .6rem 0; }
    .projects-cont > .slick-prev { left:10px !important; width:40px !important; height:40px !important; }
    .projects-cont > .slick-next { right:10px !important; width:40px !important; height:40px !important; }
    .slick-prev:before, .slick-next:before { font-size:40px !important; }
    #brands { height:auto; }
    #brands h2 { font-size:200%; margin:14vh 0 0 6vw; }
    #brands h3 { font-size:180%; margin:0 0 3vh 14vw; }
    #brands section { margin:5vh 1% 5vh 1%; }
    #brands section figure { width:32.5vw; height:11vh; }
    #brands-public { height:auto; }
    #brands-public h2 { font-size:200%; margin:14vh 0 0 6vw; }
    #brands-public h3 { font-size:180%; margin:0 0 3vh 14vw; }
    #brands-public section { width:100%; margin:5vh 1% 5vh 1%; }
    #brands-public section figure { width:32.5vw; height:11vh; background-size:auto 100% !important; }
    #brands-public section figure:last-child { display:none; }
    .contact-locations { width:100%; flex-wrap:wrap; margin:3vh auto 0 auto; }
    .contact-locations .location { width:96vw; margin:6vh 3vw 0 3vw;  }
    .contact-locations .location:nth-child(2) { margin-bottom:3vh; }
}