/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}
/* 2. Remove default margin */
* {
  margin: 0;
}
/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}
/* 6. Improve media defaults */
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
/* 7. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}
/* 8. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
/*
  10. Create a root stacking context
*/
#root, #__next {
  isolation: isolate;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn-animation {
  animation: 1.5s fadeIn;
  animation-fill-mode: both;
}


@font-face {
    font-family: 'akzidenz-grotesk_bqregular';
    src: url('akzidenzgrotesk-regular-webfont.woff2') format('woff2'),
         url('akzidenzgrotesk-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body { background: #181818;  }

.container { padding: 25px; }

*, button, input { color: #FFF; font-family: 'akzidenz-grotesk_bqregular', sans-serif; font-weight: normal; }
h1, h2, h3, p { color: #FFF; line-height: 130%; font-size: 28px; }
p { margin-top: -5px; margin-bottom: 1.5rem; }

@media screen and (max-width: 699px) {
	header { background: #181818;
background: linear-gradient(180deg,rgba(24, 24, 24, 1) 0%, rgba(0, 0, 0, 0) 100%); }
	
	.container .half.right { padding-top: 50px; }
	
}

@media screen and (min-width: 700px) {
	
	.container { padding: 50px; }
	
	.container .half { width: 50%; }
	.container .half.right { margin-left: 50%; position: relative; }
}

header { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; }
header svg { height: 16px; width: auto;  }



.intro { background: #181818; height: 60vh; box-sizing: border-box; position: relative; z-index: 9; }

@media screen and (min-width: 700px) {
	
	header svg { height: 22px; width: auto;  }
	.intro { height: 65vh; }
}

.intro .half.right { height: calc(65vh - 100px); }
h1 { position: absolute; bottom: 50px; margin: 0;  }
h1 span { display: block; }

@media screen and (min-width: 700px) {
	h1 { bottom: 0; }	
}

.video { background: black; height: 100vh; width: 100%; position: sticky; bottom: 0; }
.video span.mute-icon { position: absolute; bottom: 25px; left: 25px; cursor: pointer; opacity: 1; transition: opacity 0.2s ease-in-out; }

.video video.muted ~ span.mute-icon {opacity: 0.5; }

.video span.mute-icon:hover { opacity: 1 !important; }

.video video.muted ~ span.mute-icon .mute { display: none; }
.video video.muted ~ span.mute-icon .unmute { display: block; }
.video video ~ span.mute-icon .mute { display: block; }
.video video ~ span.mute-icon .unmute { display: none; }

.main-content { background: #181818; min-height: 100vh; position: relative; }
.main-content .container .half.right { position: unset; }
.main-content .enquiry-form { position: absolute; bottom: 50px; box-sizing: border-box; margin-right: 25px; }

@media screen and (min-width: 700px) {
	
	.video span.mute-icon { position: absolute; bottom: 50px; left: 50px; cursor: pointer; }
	
	.main-content .enquiry-form { margin-right: 50px; }	
}
.enquiry-form { border: 1px solid #343434; width:calc(100% - 50px); }

.enquiry-form p { font-size: 20px; }
.enquiry-form p.alternative { font-size: 16px;     border-top: 1px solid #343434; padding-top: 1rem; margin-top: -.75rem; margin-bottom: 0.5rem; }

.enquiry-form .altcontact { font-size: 14px; margin-left: 8px; opacity: 0.6;  text-decoration: underline; cursor: pointer; }

.enquiry-form button { background: #242424; border: none; outline: none; padding: 10px 15px; font-size: 14px; text-transform: none; transition: background 0.2s ease-in-out; cursor: pointer; display: inline-flex; border-radius: 2px; }

.enquiry-form button.next svg { margin-left: 4px; position: relative; top: 2px;  }
.enquiry-form button.bigger { padding: 12px 15px 8px; }
.enquiry-form button.bigger svg { margin-right: 4px; margin-left: -2px;  position: relative; top: -2px;  }

.enquiry-form button.user-contact { font-size: 16px; margin-top: -.75rem; margin-bottom: 2rem; }

.enquiry-form button:hover { background: #343434; }

.enquiry-form label { font-size: 12px; color: #fff; opacity: 0.8; display: inline-flex; flex-direction: column; width: 49%; margin-bottom: 8px; }
.enquiry-form label input { background: #242424; border: 1px solid #343434; border-radius: 2px; padding: 8px; display: block; font-size: 16px; margin-top: 4px; }


.enquiry-form .step { padding: 25px; display: none; }
.enquiry-form.step-1 .step.step-1 { display: block; }
.enquiry-form.step-2 .step.step-2 { display: block; }
.enquiry-form.step-3 .step.step-3 { display: block; }
.enquiry-form.step-4 .step.step-4 { display: block; }

@media screen and (min-width: 700px) {
	
	.enquiry-form { border: 1px solid #343434; width:calc(50% - 50px); }
}