@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('/css/inter-400.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('/css/inter-700.woff2') format('woff2');
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url('/css/inter-800.woff2') format('woff2');
}

@font-face {
	font-family: 'b';
	font-style: normal;
	font-weight: 400;
	src: url('/css/b.woff2') format('woff2');
}

* {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	list-style: none;
	box-sizing: border-box;
	border-collapse: inherit;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-rendering: optimizeSpeed;
	text-rendering: optimizeSpeed;
}

:root {
	--main-color: #ece5db;
	--color-offwhite: #ece5db;
	--color-purple: #0a062b;
	--color-black: #000000;
	--color-cyan: #40aeaf;
	--color-pink: #f10075;
	--color-graypurple: #65637f;
	--color-lightblue: #e9f2f7;
	--glow-color: hsl(186 100% 69%);
	--font-default: 1.2em;
	--borderradius: 0.4em;
	
	--title-size: calc(var(--title-value) * 1.5);
	--title-value: 8vw;
}

svg {
	overflow-clip-margin: content-box;
	overflow: clip;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	2overflow: overlay;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	2overflow-x: hidden;
	box-sizing: border-box;
	background-color: var(--color-purple);
	font-family: Inter, Arial;
	2transform-style: preserve-3d;
	
	color: var(--color-offwhite);
	background: var(--color-purple);
}

img,
video {
	width: 100%;
	height: 100%;
	display: block;
	user-select: none;
	object-fit: cover;
}

/* Texts */
a {
	text-decoration: none;
}

.item a {
	color: var(--color-offwhite);
	font-weight: bold;
	transition: color 0.4s ease;
}

.item a:hover {
	color: var(--color-cyan);
	transition: all 0s ease;
}

.text-purple {
	color: var(--color-purple);
}

h1 {
	font-size: 10vw;
	line-height: 1;
	letter-spacing: -.025em;
	font-weight: 700;
	font-display:swap;
}

h2 {
	font-family: roughbattle;
	font-weight: normal;
	font-size: 60px;
	margin-top: -8px;
}

.font-roughbattle {
	font-family: roughbattle;
}

.font-small {
	font-size: 0.8rem;
}

.font-bold {
	font-weight: bold;
}

.font-opacity-30 {
	opacity: 0.3;
}

.align-right {
	text-align: right;
}

.align-center {
	text-align: center;
}

.text-center {
	text-align: center;
}


.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

/* Logo */

.logo {
	position: absolute;
	top: 40px;
	left: 50px;
	z-index: 4;
	fill: var(--color-offwhite);
}

.logo-animated-gradient {
	2width:600px;
	min-height:400px;
	margin:0 auto;
	margin-bottom:-150px;
    fill: #ffffff;
	-webkit-mask: url(/img/logo.svg);
    mask: url(/img/logo.svg);
	mask-position: center;
	mask-size: auto 400px;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: auto 400px;
	-webkit-mask-repeat: no-repeat;
	z-index:0;
}
.logo-animated-gradient {
    background: linear-gradient(0deg, var(--color-cyan), var(--color-cyan), var(--color-pink), rgb(123, 31, 162), var(--main-color), var(--main-color));
    background-size: 2000% 2000%;
    animation: animation-gradient 26s linear infinite;
}
@keyframes animation-gradient {
    0%{background-position:50% 0%}
    50%{background-position:50% 100%}
    100%{background-position:50% 0%}
}

/* Layout blocks */

.bg-content {
	background: url('/img/bg-content.png') var(--color-purple) repeat center top;
}

.header-home {
	position: relative;
	height: 100vh;
	display: flex;
	align-items: center;
	color: var(--color-offwhite);
	z-index: 4;
}

.header-home .background {
	position: absolute;
	inset: 0;
}

.header-home .tagline-services {
	z-index:1;
	position:relative;
	padding-top:20px;
	font-family: "b";
	font-size: 1.45em;
	text-transform:uppercase;
}

.header-home .tagline {
	position: relative;
	text-align: center;
	margin: auto;
	min-width:650px;
}

.2header-home .tagline a {
	color: var(--color-offwhite);
	text-decoration: none;
}

.header-home .tagline-icons {
	position: relative;
	margin-top: 30px;
}

.header-home .mask {
	position: absolute;
	inset: 0;
	mask-image: url(/img/header-mask.png);
	-webkit-mask-image: url(/img/header-mask.png);
	mask-position: bottom;
	-webkit-mask-position: bottom;
	mask-size: cover;
	-webkit-mask-size: cover;
}

.header-home .video {
	position: absolute;
	inset: 0;
	-webkit-mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.2) 100%);
}

.header-home .waves {
	position: absolute;
	display: none;
	left: 0;
	z-index: 1;
	mix-blend-mode: color-dodge;
}

.header-alternative{
	font-size:3vw;
	font-weight:bold;
	text-align:center;
	
    background-color: var(--color-offwhite);
	color: var(--color-purple);
    border-radius: 0.1em;
	padding:0.1em 0.3em;
	max-width: 11em;
    
	
}

.header-hire {
	position: relative;
	top: -10px;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-6deg);
}

.bubble {
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	transition: 2.4s ease-out;
}

.bubble a, .bubble-bg {
	padding: 0.4em 0.8em;
	border-radius: var(--borderradius);
	background-color: var(--color-offwhite);
	color: var(--color-purple);
}

.bubble a:hover {
	background-color: var(--color-purple);
	color: var(--color-offwhite);
}


.page-home {}

/* Content */
.content {
	z-index: 2;
	transform: translateZ(-900px) scale(1);
}

.content .title {
	transform: rotate(-2deg);
	display: inline-block;
	transition: 2.4s ease-out;

}

.content .title:hover {
	transform: rotate(-3deg);
	-webkit-text-stroke: 1px #d6f4f4;
	2text-shadow: 0 0 5px var(--color-cyan),
		0 0 25px var(--color-cyan),
		0 0 50px var(--color-cyan),
		0 0 100px var(--color-cyan);
	text-shadow: 0 0 5px var(--color-cyan),
		0 0 50px var(--color-cyan),
		0 0 100px var(--color-cyan);
	2background-color: #fff;
	color: #fff;
	animation: shake 7.5s cubic-bezier(.25, .46, .45, .94) infinite;
}

.content .title-fix {
	margin-bottom: 20px;
}

.content .url {
	text-decoration: none;
	color: var(--color-cyan);
	transition: .4s ease-out;
}

.content .url:hover {
	text-decoration: none;
	color: var(--color-offwhite);
}

.content .url svg {
	position: relative;
	top: 8px;
	left: 2px;
	transition: .2s ease-out;
}

.content .url:hover svg {
	left: 6px;
}

.content-margin {
	margin: 0 5.33333vw;
}

.content-tagline {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	background-color: var(--color-cyan);
	padding: 4px 10px;
	margin-left: -12px;
	margin-right: -12px;
}

.content-tagline-phone {
	position: absolute;
	top: 150px;
	left: 50%;
	display: inline-block;
	transform: rotate(-2deg);
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	background-color: var(--color-pink);
	padding: 4px 10px;
}

.content-end-card {
	width: 100%;
	transform: rotate(-2deg);
	padding-top: 200px;
	padding-bottom: 200px;
}

.photo {
	position: absolute;
	padding: 0;
	width: 40%;
}

.photo.align-left img,
.photo.align-right img {
	margin-left: auto;
	margin-right: auto;
}

.photo.align-right {
	top: 0;
	right: 0;
}

.photo-size-small {
	max-width: 160px;
	margin-top: 30px;
	position: relative;
}

.photo-size-medium {
	max-width: 260px;
	position: relative;
}

.photo-size-large {
	max-width: 360px;
	position: relative;
}

.video-size-medium {
	width: 360px;
	height: 360px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-top: -60px;
}

.content-photos img {
	display: block;
	object-fit: cover;
	clip-path: circle(46%);
	transition: clip-path .2s cubic-bezier(.25, .46, .45, .94), -webkit-clip-path .2s cubic-bezier(.25, .46, .45, .94);
}

.content-photos-set1 img,
.content-photos-set2 img {
	position: absolute;
	max-height: auto;
}

.photo-mask, .photo-mask-nohover {
	object-fit: cover;
	clip-path: circle(45%);
	2transition: clip-path .2s cubic-bezier(.25, .46, .45, .94), -webkit-clip-path .2s cubic-bezier(.25, .46, .45, .94);
}

.photo-mask:hover {
	object-fit: cover;
	transform: rotate(3deg);
	clip-path: circle(49%);
}

.team-photo-border:hover {
	transform: scale(1.1) rotate(3deg);
}

.team-photo-border .photo-mask:hover {
	clip-path: circle(45%);
}

.team-photo-border {
	border: 1px var(--color-offwhite) solid;
	object-fit: cover;
	clip-path: circle(45%);
	background-color: var(--color-offwhite);
	padding:4px;
}

.team-wrap {
	line-height:28px;
	margin-top:20px;
}

.team-details {
	font-size: small;
	text-transform: uppercase;
	color: var(--color-graypurple);
}

.footer {
	color: var(--color-graypurple);
}

.footer a {
	color: var(--color-graypurple);
	font-weight: bold;
	transition: color 0.4s ease;
}

.footer a:hover {
	color: var(--color-cyan);
	transition: all 0s ease;
}

.content-section-padding {
	padding-top:100px;
	padding-bottom:100px;
}

.content-bg-lightblue {
	background-color: var(--color-lightblue);
	color:var(--color-purple);
}

.content-quote {
	background-color: var(--color-lightblue);
	text-align: center;
	font-size: 10vh;
	line-height: 1.1em;
	color:var(--color-purple);
	padding:12% 10%;
	font-weight:500;
	letter-spacing: -.03em;
}

.content-grid-team {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-row-gap: 4rem;
	grid-column-gap: 1rem;
	list-style: none;
}

.content-grid-services {
	2grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-columns: 1fr 3fr;
	grid-row-gap: 4rem;
	grid-column-gap: 1rem;
	list-style: none;
}

/* Content media grid */
.content-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-template-rows: 1fr;
    gap: 0px;
}
.content-media-grid .media-item {
  2background: grey;
  display: flex;
  position:relative;
  cursor: pointer;
}
.content-media-grid .media-item:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  padding-bottom: calc(9/16 * 100%);
}

.content-grid-partners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 50px;
	grid-row-gap: 60px;	
}

.content-grid-partners svg{
	transition: fill  0.4s ease;
}

.content-grid-partners svg:hover { 
	fill: var(--color-cyan);
	transition: fill 0s ease;
}


.content-media-grid .item {
	2background-color:#565656;
}

.content-media-grid-tagline {
	top:20px;
	left:20px;
	transform: rotate(-6deg);
	transform-origin: top right;
	text-transform:uppercase;
	z-index:2;
}

#item-background-video {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover;
  z-index: 0;
}

.video-overlay-play {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
	
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" alt="Play video"><circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="%23ece5db"/><polygon points="70, 55 70, 145 145, 100" fill="%23ece5db "/></svg>');
	background-size:20%;
	background-position:center center;
	background-repeat: no-repeat;
	padding: 10px calc(50% - 50px);
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.95;
    transition: opacity 150ms;
	pointer-events: none;
	
	z-index:2;
}

/* Forms */
.form-general {
	text-align: left;
	font-family: "Roboto", sans-serif;
}

.form-general label {
	display: inline-block;
	padding: 6px 0;
	margin-left: 6px;
}

.form-input {
	border: none;
	border-radius: 0;
	2background: var(--color-graypurple);
	background: none;
	border-bottom: 1px solid var(--color-graypurple);
	color: var(--color-offwhite);
	font-size: var(--font-default);
}

input,
textarea {
	padding: 16px;
	width: 98%;
	font-family: "Roboto", sans-serif;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	box-sizing: border-box;
}

input:focus,
textarea:focus {
	border-color: var(--color-cyan);
	border-radius: 3px;
	outline: 0;
	box-shadow: 0 0 0 0.2rem var(--color-cyan);
}

.input-button {
	width: 98%;
	margin-top: 10px;
	padding: 12px;
	font-family: "Roboto", sans-serif;
	font-size: var(--font-default);
	background-color: var(--color-offwhite);
	color: var(--color-purple);
	text-align: center;
	border-radius: var(--borderradius);
	transition: all 0s ease;
}

.input-button:active,
.input-button:focus {
	background-color: var(--color-cyan);
	color: var(--color-offwhite);
}

.floating-label-group {
	position: relative;
	margin-top: 15px;
	margin-bottom: 25px;
}

.floating-label {
	font-size: var(--font-default);
	color: #cccccc;
	position: absolute;
	pointer-events: none;
	top: 9px;
	left: 12px;
	transition: all 0.1s ease;
}

input:focus~.floating-label,
input:not(:focus):valid~.floating-label,
textarea:focus~.floating-label,
textarea:not(:focus):valid~.floating-label {
	top: -11px;
	left: 0px;
	font-size: small;
	text-transform: uppercase;
	background: var(--color-purple);
	color: var(--color-graypurple);
	border-radius: 3px;
	padding: 2px 8px;
	opacity: 1;
}

/* General effects */
.general-effect {
	transition: .4s ease-out;
}

.general-effect:hover {
	color: var(--color-cyan);
	transition: .4s ease-out;
}

/* Lists */
ul {
	margin: 10px 26px;
}

li {
	padding-inline-start: 0.45em;
	2list-style: "→" outside none;
	list-style: square outside none;
}

/* Flex grid */
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	2background: #fff;
	max-width: 1280px;
}

.item {
	width: 100%;
	min-height: 100px;
	padding-top: 100px;
	padding-bottom: 100px;
	2height: 100px;
	z-index: 4;
	margin-bottom: 2%;
	position: relative;

}

.content-margin-left {
	2margin-left: 500px;
	margin-left: auto;
	width: 60%;
}

.content-margin-right {
	2margin-right: 500px;
	width: 60%;
}

.2item:nth-child(3n) {
	width: 100%;
}

/* Hero & Splash */
.a-background {
	position: fixed;
	min-height: 100vh;
	inset: 0;
	background: radial-gradient(50% 155% at 70% 55%, #0b0730 0%, #05021d 100%);
	visibility: hidden;
}

.a-renderer {
	width: 100%;
}

.a-components {
	z-index: 4;
}

.a-scroll {
	background: var(--color-black);
}

.a-transition {
	position: absolute;
	2top: 770px;
	left: 0;
	width: 100%;
	2height: 100vh;
	2height: 707px;
	z-index: 5;
	transform: translateZ(0px) scale(1);
	2background: url(img/header-transition.png) no-repeat left bottom;

	top: 65vh;
	height: 1071px;
	background: url(img/header-transition8.png) no-repeat center bottom;
}

.footer-transition {
	position: absolute;
	left: 0;
	top: -400px;
	width: 100%;
	height: 501px;
	background: url(img/header-transition8.png) no-repeat center top;
}

.footer-bg {
	width: 100%;
	height: 900px;
	background: url(/img/footer-bg.png) no-repeat bottom center;
	z-index: 1;
	2transform: scale(0.5);
}

.circle-small {
	height: 300px;
	width: 300px;
	margin-top: 15px;
}

.circle-large {
	height: 510px;
	width: 510px;
}

.photo-circle-dash {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	pointer-events: none
}

.photo-circle-dash circle {
	stroke: var(--color-cyan);
	stroke-dasharray: 2.5 11;
	animation: 100s linear infinite;
	-webkit-transform-origin: center;
	transform-origin: center;
	animation-name: rotate-clockwise;
}

/* General helpers */
.absolute {
	position: absolute;
}
.relative {
	position: relative;
}
.flex {
	display: flex;
}
.grid {
	display: grid;
}
.block {
	display: block;
}
.justify-center {
    justify-content: center;

}
.items-center {
    align-items: center;
}
.h-48 {
    height: 12rem;
}
.w-48 {
    width: 12rem;
}

/* Animations */

@keyframes rotate-clockwise {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(1turn);
		transform: rotate(1turn)
	}
}

.animation-shake {
	animation: shake 7.5s cubic-bezier(.25, .46, .45, .94) infinite;
}

@keyframes shake {
	0% {
		transform: translate(1px, 1px) rotate(0deg);
	}

	10% {
		transform: translate(-1px, 2px) rotate(-1deg);
	}

	20% {
		transform: translate(1px, 2px) rotate(0deg);
	}

	30% {
		transform: translate(3px, 2px) rotate(0deg);
	}

	40% {
		transform: translate(1px, -1px) rotate(2deg);
	}

	50% {
		transform: translate(-1px, -2px) rotate(-1deg);
	}

	60% {
		transform: translate(-3px, 1px) rotate(0deg);
	}

	70% {
		transform: translate(3px, 1px) rotate(-3deg);
	}

	80% {
		transform: translate(-1px, -1px) rotate(1deg);
	}

	90% {
		transform: translate(-3px, 0px) rotate(1deg);
	}

	100% {
		transform: translate(1px, 1px) rotate(0deg);
	}
}

.animation-opacitypulse {
	animation: opacitypulse 12s infinite ease-in-out;
	animation-delay: 3s;
}

@keyframes opacitypulse {
	0% {
		opacity: 0.3;
	}

	20% {
		opacity: 0.9;
	}

	40%,
	100% {
		opacity: 0.3;
	}
}

.animation-appear {
	transform-box: fill-box;
	transform-origin: center;
	animation: appear linear both;
	animation-timeline: view(block);
	animation-range: cover 5% contain 22%;
}

@keyframes appear {
	0% {
		scale: 0;
	}

	60% {
		scale: 1;
	}
}


/* Media sizes */

@media (max-width: 868px) {
	1h1 {
		font-size: 2.50rem;
	}

	h2 {
		font-size: 50px;
	}

	body,
	html {
		overflow-x: hidden;
	}
	
	.logo-animated-gradient {
		min-height:200px;
		margin-bottom:-100px;
		mask-size: auto 200px;
		-webkit-mask-size: auto 200px;
	}
	
	.header-home .tagline-services {
		font-size: 0.85em;
	}

	.a-scroll {
		will-change: transform;
	}

	.a-transition {
		top: 470px;
	}

	.header-home .waves {
		bottom: -12.5vw;
		width: 100%;
		height: 21.80556vw;
	}

	.header-home .content {
		margin: 0 11.80556vw;
	}

	.content {
		hyphens: auto;
	}

	.content-margin-left {
		width: 100%;
		margin-left: 0;
	}

	.content-margin-right {
		width: 100%;
		margin-right: 0;
	}
	
	.content-media-grid {
		display:block;
	}
	
	.content-grid-services {
		display:block;
	}
	
	.content-quote {
		font-size:4em;
		padding:70% 10%;
	}
	
	.header-home .tagline {
		min-width:100%;
	}

	.header-home .tagline-icon-location {
		top: 0;
		left: 5px;
	}

	.header-home .tagline-icon-contact {
		top: 30px;
		left: 36px;
	}
	
	.header-alternative{
		font-size:7vw;
	}

	.photo {
		position: relative;
		display: block;
		width: 100%;
		padding: 0;
		padding-bottom: 40px;
		margin-top: 30px;
	}

	.photo img {
		height: auto;
		margin: 0 auto;
	}

	.photo video {
		margin: 0 auto;
	}

	.photo.align-left {
		top: 0;
		left: 0;
	}

	.photo.align-right {
		top: 0;
		right: 0;
	}

	.video-size-medium {
		margin: 0 auto;
	}

	.content-end-card h2 {
		2font-size: 30px;
	}

	.circle-small {
		margin-top: -20px;
	}

	.circle-large {
		display: none;
	}
}

@media (max-width: 468px) {
	h2 {
		font-size: 40px;
	}

	.photo-size-large {
		max-width: 300px;
	}

	.video-size-medium {
		width: 300px;
		height: 300px;
	}
}

/* Fix for transition */
@media (max-height: 900px) {
	.a-transition {
		top: 40vh;
	}
}

@media (max-height: 400px) {
	.a-transition {
		top: 20vh;
	}
}