@import url('https://fonts.cdnfonts.com/css/junction');
* {margin:0; padding:0; box-sizing: border-box; font-feature-settings: "kern"; font-feature-settings: "lnum";}
img {max-width:100%;}

/* Colours */
:root {
  --coolblack: #1c252e;
  --sharpred: #fa3e6a;
  --freshpurple: #aa7ef7;
  --coolmint: #4ecc9e;
  --iceblue: #00beff;
  --white: #ffffff;
}

.lines-top {background:transparent no-repeat top center; background-size:1440px; color:var(--white);}
html {background:var(--coolblack);}
body {font-family:'Junction', Arial, sans-serif; font-size:100%; min-height:100vh; margin:0 auto; position:relative;}
.lines-bottom {background: no-repeat bottom left; display:block; position:absolute; bottom:180px; right:0; width:254px; height:422px; z-index:-1}
.lines-bottom-hide {display:none;}
@media screen and (max-width: 960px) {
  body {font-size:80%;}
}
@media screen and (max-width: 840px) {
.lines-top {background-position: calc(50% + 95px) calc(0% - 5px)}
}
@media screen and (max-width: 480px) {
  body {font-size:65%;}
}
img {max-width:100%;}
.content-box {width: 100%;}

hr {border:none; border-top-width:1px; border-top-style: solid; height:0; margin:40px;}
hr.sharpred {border-top-color:var(--sharpred)}
hr.freshpurple {border-top-color:var(--freshpurple)}
hr.coolmint {border-top-color:var(--coolmint)}
hr.iceblue {border-top-color:var(--iceblue)}
hr.white {border-top-color:var(--white)}

/* Typography */
p {font-size:1.8em; line-height:1.45; padding-bottom:0.9em;}
p a,footer a {color:var(--white); text-decoration-thickness: 2px; text-underline-offset: .15em; text-decoration-color: var(--sharpred); transition: all .2s ease-in-out;}
p a:hover,footer a:hover {text-decoration-color: var(--white);}
.arrow {background:url('images/arrow.png') no-repeat 96% center / 7px; background:url('images/arrow.svg') no-repeat 96% center / 7px; padding-right:34px; transition: all .2s ease-in-out;}
.arrow:hover {background:url('images/arrow.png') no-repeat 98% center / 7px; background:url('images/arrow.svg') no-repeat 98% center / 7px;}
h1,h2,h3,h4,h5 {font-weight:normal;}
h1 {font-size:5.4em; line-height:1.15; margin-bottom:0.9em;}
h2 {font-size:3.2em; line-height:1.15; margin-bottom:0.9em;}
.contact {color:var(--sharpred);}
.showcase {color:var(--iceblue);}
.headline {font-size:4em; line-height:1.15; margin-bottom:0.9em; display:block;}
.content-contact span {font-size:3.5em; display:block; margin-bottom:0.9em;}
@media screen and (max-width: 720px) {
.content-contact span {font-size:260%;}
}
.content-contact span a {color:var(--white); text-decoration-thickness: 4px; text-underline-offset: .15em; text-decoration-color: var(--sharpred); transition: all .2s ease-in-out;}
.content-contact span a:hover {text-decoration-color: var(--white);}

/* Header and menu */
#header {top:0; width:100%; padding:40px; margin-bottom:40px}
#header-logo {display:block; background: url('images/logo.png') no-repeat center center; background: url('images/logo.svg') no-repeat center center; height:60px; width:378px; margin:0 auto;}
#menu-toggle,#menu-toggle-close,#menu-back {font-size:23px; line-height:26px; height:60px; width:60px; padding:20px;  display:inline-block; box-sizing:border-box; float:left; position:fixed;}
#menu-toggle {background:var(--white) url('images/menu.png') center center no-repeat; background:var(--white) url('images/menu.svg') center center no-repeat; background-size:30px; z-index:200;}
#menu-toggle-close {top:40px; left:40px; position:absolute; background:var(--white) url('images/close.png') no-repeat center center; background:var(--white) url('images/close.svg') no-repeat center center; background-size:30px;}
#menu-back {top:40px; left:120px; position:fixed; background:var(--white) url('images/back.png') center center no-repeat; background:var(--white) url('images/back.svg') center center no-repeat; background-size:30px;}
@media screen and (max-width: 840px) {
    #header {padding:50px 40px;}
    #header-logo {height:30px; width:252px;}
    #menu-toggle,#menu-toggle-close {height:30px; width:30px; background-size:12px; padding:10px;}
    #menu-toggle-close {top:50px;}
    #menu-back {top:50px; right:40px; left:initial; height:30px; width:30px; background-size:12px; padding:10px;}
}
.menu-overlay {height:0; width:100%; position:fixed; z-index:201; left:0; top:0; background:var(--sharpred); overflow-x:hidden; transition: 0.2s;}
.menu-overlay-content {position: relative; top: 160px; left:40px; width: calc(100% - 80px); font-size:3em;}
.menu-overlay-content ul {list-style-type:none;}
.menu-overlay-content ul li {margin-bottom:1em;}
.menu-overlay-content a {color:var(--white); text-decoration:none;}
.header-social {height:1.1em; margin-right:0.2em; margin-top:0.05em;}

/* Section */

section {padding:0 40px;}
section img {margin:0 }
.index-about {padding-bottom: 20px !important;}
.content-text,.content-image-full {box-sizing: border-box; width:100%;}
.content-text-left {padding:0 35.7% 0 40px;}
.content-text-right {padding:0 40px 0 35.7%;}
.content-image-full {margin:0.9em 0 2.4em; display:block;}
.content-embed {margin:20px 0 40px;}
.content-embed div {border:10px solid var(--white)}
@media screen and (min-width: 720px) {
.content-embed {padding:0 15%;}
}
.contact-form-section {background:var(--white); padding:60px 40px; color:var(--coolblack); margin:4em 40px 0; font-size: 70%;}
.clients {border:1px solid var(--sharpred); border-left:0; border-right:0; padding-top:40px; margin-bottom:40px;}
@media screen and (max-width: 620px) {
.content-text-left,.content-text-right {padding:0 40px;}
}
.gap {margin-top:12px;}
.contact-insert {padding-top:4.7em; border-top:1px solid var(--sharpred); margin-top:40px;}

/* Index */

.index-hero {top:0; left:0; height:calc(90vh - 80px); width:100vw; display:block; position:absolute; z-index:-1; background-size:cover; background-repeat:no-repeat; background-position:center center; border-bottom:1px solid var(--sharpred);}
.index-hero video {width: 100%; height:100%;  position:absolute;  object-fit:cover;  z-index:0;}
.index-hero-text {min-height:calc(90vh - 180px - 80px); padding-right:40%; margin-bottom:40px; text-shadow: 0 0 50px var(--coolblack)}
.index-hero-text span {font-size:4.4em; line-height:1.15; margin-bottom:1em; display:block;}
@media screen and (max-width:1024px) {
.index-hero-text span {font-size:4em;}
}
@media screen and (max-width: 840px) {
.index-hero-text {min-height:calc(90vh - 210px); margin-top:-40px; padding-right:40px;}
}
.client-list {list-style-type:none; width:100%; font-size:0; margin:-40px 0 -20px;}
.client-list li {display:inline-block; background-size:contain; padding-top:calc(100% / 6 - 34px); width:calc(100% / 6 - 34px); margin-bottom:40px; position:relative; background-position:center center; background-repeat:no-repeat;}
.client-list li:nth-of-type(4n+2),.client-list li:nth-of-type(4n+3),.client-list li:nth-of-type(4n+4),.client-list li:nth-of-type(4n+5),.client-list li:nth-of-type(4n+6) {margin-left:40px;}
@media screen and (max-width: 860px) {
.client-list li:nth-of-type(odd),.client-list li:nth-of-type(even) {width:calc(100% / 2 - 23px); padding-top:calc(100% / 2 - 40px);}
.client-list li:nth-of-type(odd) {margin:0 0 40px 0;}
.client-list li:nth-of-type(even) {margin:0 0 40px 40px;}
}

/* Showcase */

.showcase-list {list-style-type:none; width:100%;}
.showcase-list li {display:inline-block; background:var(--coolblack); background-size:cover; padding-top:calc(56.25% / 3 - 17px); width:calc(100% / 3 - 30px); margin-bottom:40px; position:relative; background-position-y:center;}
.showcase-text {position:absolute; background:rgba(28, 37, 46, 0.8); color:var(--white); font-size:1.8em; line-height:1.15; top:0; left:0; right:0; bottom:0; padding:20px; opacity:0; -webkit-transition: 0.2s all ease-in-out; -moz-transition: 0.2s all ease-in-out; -o-transition: 0.2s all ease-in-out; transition: 0.2s all ease-in-out;}
.showcase-list li:hover .showcase-text {opacity:100;}
.showcase-list a:nth-of-type(3n + 2) li {margin:0 40px 40px;}
.showcase-hero {height:calc(100vh - 140px); background-size:cover; background-position:center center; margin-bottom:40px;}
@media screen and (max-width: 720px) {
.showcase-hero {padding-top:56.25%; height:initial;}
}
.showcase-page-image-duo,.showcase-page-image-trio {list-style-type:none; width:100%;}
.showcase-page-image-duo li {display:inline-block; background:var(--iceblue); background-size:cover; width:calc(100% / 2 - 23px); margin-bottom:40px; padding-top:calc(56.25% / 2 - 17px); background-position: center;}
.showcase-page-image-duo li:nth-of-type(even) {margin:0 0 40px 40px;}
.showcase-page-image-trio li {display:inline-block; background:var(--iceblue); background-size:cover; width:calc(100% / 3 - 30px); margin-bottom:40px; padding-top:calc(56.25% / 3 - 17px); background-position-y:center;}
.showcase-page-image-trio li:nth-of-type(3n + 2) {margin:0 40px 40px;}
@media screen and (max-width: 1024px) {
.showcase-list li,.showcase-page-image-trio li {width:calc(100% / 2 - 30px); margin-bottom:40px; padding-top:calc(56.25% / 2 - 17px)}
.showcase-list a:nth-of-type(odd) li {margin:0 0 40px 0;}
.showcase-list a:nth-of-type(even) li,.showcase-page-image-trio li:nth-of-type(even) {margin:0 0 40px 40px;}
}
@media screen and (max-width: 720px) {
.showcase-list a:nth-of-type(odd) li,.showcase-list a:nth-of-type(even) li {margin:0 0 40px 0; width:100%; padding-top:calc(56.25%)}
.showcase-page-image-duo li {width:100%; margin-bottom:40px; padding-top:calc(56.25% - 17px)}
.showcase-page-image-duo li:nth-of-type(even) {margin:0 0 40px 0;}
.showcase-page-image-trio li {width:100%; margin-bottom:40px; padding-top:calc(56.25% - 17px)}
.showcase-list a:nth-of-type(3n + 2) li,.showcase-page-image-trio li:nth-of-type(3n + 2) {margin:0 0 40px;}
}
.long-image {max-height:calc(100vh - 140px); width:auto; display:block; margin:20px auto;}

/* Contact form */

.contact-form-jump {height:1px; width:1px; display:block;}
#contact-form {font-size:3em;}
#contact-form label::after {content:'\00a0'}
#contact-form input,#contact-form select {background:none; border:0; font-size:100%; border-bottom:3px solid var(--coolblack); font-family:'Junction', sans-serif; color:var(--coolblack); line-height: 130%; margin-right:0.2em; border-radius:0}
#contact-form select {-webkit-appearance:none; -moz-appearance:none; appearance:none; background:var(--white) url('images/dropdown.png') no-repeat right center / 30px; background:var(--white) url('images/dropdown.svg') no-repeat right center / 30px; padding-right:40px}
#contact-form textarea {background:none; border:0; border-bottom:3px solid var(--coolblack); font-family:'Junction', sans-serif; color:var(--coolblack); line-height: 130%;; display:block; font-size:100%; width:100%; margin-top:0.2em; padding:0 10px 10px;}
#contact-form select,#contact-form input,#contact-form textarea {max-width:calc(100% - 1em);}
#contact-form .form-group {margin-bottom:1em;}
#contact-form .required label::after {content:'\002A'; color:var(--sharpred); margin-left:0.25em;}
.required-explain {float:right; color:var(--sharpred); font-size:60%;}
#contact-form .form-group:last-of-type {margin-bottom:0;}
#contact-form button {font-size:100%; border:none; font-family:'Junction', sans-serif; color:var(--sharpred); padding:10px 40px 10px 0; background:url('images/send.png') no-repeat 96% center / 12px; background:url('images/send.svg') no-repeat 96% center / 12px; padding-right:40px; transition: all .2s ease-in-out;}
#contact-form button:hover {background:url('images/send.png') no-repeat 100% center / 12px; background:url('images/send.svg') no-repeat 100% center / 12px;}
#error_message {margin-top: 3em; margin-bottom: -2em;}
#error_message span {font-size:3em; display:block; margin-bottom:0.4em;}
#error_message span img {margin-right:0.3em; height:0.6em; margin-bottom:0.1em;}

     ::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     :-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     input::placeholder {
         color: transparent;
    }
     textarea::-webkit-input-placeholder {
        /* WebKit browsers */
         color: transparent;
    }
     textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
         color: transparent;
    }
     textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
         color: transparent;
    }
     textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
         color: transparent;
    }
     textarea::placeholder {
         color: transparent;
    }

/* Footer */

footer {border-top:1px solid var(--sharpred); margin-top:3em; padding:40px;}
.footer-column {padding:0 20px 0 0; display:inline-block; vertical-align:top;}
.footer-column:nth-of-type(odd) {width:calc(100% / 3 * 1 + 15px)}
.footer-column:nth-of-type(even) {width:calc(100% / 3 * 2 - 20px)}
footer span {display:block; margin-bottom:1em; font-size:1.2em; line-height:1.4em}
.footer-social {height:1.1em; margin-left:0.25em;}
.footer-symbol {height:80px; margin-bottom:1em;}
@media screen and (max-width: 960px) {
.footer-column,.footer-column:nth-of-type(odd),.footer-column:nth-of-type(even) {width:100%;}
.footer-column:nth-of-type(odd) {margin-bottom:1em;}
}