/* FONTS */
@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-regular.woff);
    font-weight: 400;
}

@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-italic.woff);
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-medium.woff);
    font-weight: 500;
}

@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-mediumitalic.woff);
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-bold.woff);
    font-weight: 700;
}

@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-bolditalic.woff);
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-light.woff);
    font-weight: 300;
}

@font-face {
    font-family: default-font;
    src: url(../woff/subset-barlow-lightitalic.woff);
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: icon-font;
    src: url(../woff/icon-font.woff);
    font-weight: 400;
}

/* MAIN */
:root{
	--orange: #ff3300;
	--dark-grey: #1c1e1f;
	--mid-grey: #252a2f;
	--light-grey: #f4f4f4;
} 

html {
	font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
	-webkit-font-smoothing: antialiased;
	font-family: default-font, sans-serif;
	font-size: 1.8rem;
	line-height: 1.5em;
	background-color: var(--dark-grey);
	background-image: url(../jpg/gradient-bg.jpg);
	background-size: 100% auto;
    background-repeat: no-repeat;
	color: #ffffff;
    --link-color: var(--orange);
    --button-color: var(--orange);
    --button-hover-color: #ffffff;
    --button-text-color: #ffffff;
    --button-text-hover-color: var(--orange);
}

/* WHITE */
.white{
    background-color: #ffffff;
    color: var(--dark-grey);
    --link-color: #ff3300;
    --button-color: var(--orange);
    --button-hover-color: var(--dark-grey);
    --button-text-color: #ffffff;
    --button-text-hover-color: #ffffff;
}

/* LIGHT GREY */
.light-grey{
    background-color: var(--light-grey);
    color: var(--dark-grey);
    --link-color: #ff3300;
    --button-color: var(--orange);
    --button-hover-color: var(--dark-grey);
    --button-text-color: #ffffff;
    --button-text-hover-color: #ffffff;
}

/* GREY */
.grey{
	background-color: var(--mid-grey);
	color: #ffffff;
    --link-color: var(--orange);
    --button-color: var(--orange);
    --button-hover-color: #ffffff;
    --button-text-color: #ffffff;
    --button-text-hover-color: var(--orange);
}

/* DARK */
.dark-grey{
	background-color: var(--dark-grey);
	color: #ffffff;
    --link-color: var(--orange);
    --button-color: var(--orange);
    --button-hover-color: #ffffff;
    --button-text-color: #ffffff;
    --button-text-hover-color: var(--orange);
}

/* ORANGE */
.orange{
    background-color: var(--orange);
    color: #ffffff;
    --link-color: var(--dark-grey);
    --button-color: var(--dark-grey);
    --button-hover-color: #ffffff;
    --button-text-color: #ffffff;
    --button-text-hover-color: var(--orange);
}

/* GRADIENT */
.gradient{
	background-color: var(--dark-grey);
	background-image: url(../jpg/gradient-bg.jpg);
	background-size: cover;
	background-position: top center;
	background-attachment: fixed;
	color: #ffffff;
    --link-color: var(--orange);
    --button-color: var(--orange);
    --button-hover-color: #ffffff;
    --button-text-color: #ffffff;
    --button-text-hover-color: var(--orange);
}

/* GENERAL */
p {
	margin: 2rem 0;
}

p.large{
    font-size: 3rem;
    line-height: 1.2em;
	font-weight: 500;
}

blockquote{
	margin: 2rem 0;
    font-size: 3rem;
    line-height: 1.2em;
	font-weight: 500;
}

ul,
ol{
    margin: 2rem 0;
    padding-left: 2rem;
}

li{
	margin: 1rem 0;
}

li::marker {
  color: var(--link-color);
}

hr {
	margin: 3rem 0;
	background-color: currentColor;
	height: 0.1rem;
	border: 0;
}

table{
    width: 100%;
	margin: 3rem 0;
	border-collapse: collapse;
    border-spacing: 0;
}

table td{
	border: 0.1rem solid currentColor;
	padding: 0.5rem;
}

a {
	color: var(--link-color);
    font-weight: 500;
	text-decoration: none;
    outline: 0;
	cursor: pointer;
}

a:hover,
a:focus{
	text-decoration: underline;
}

img,
svg,
video{
	max-width: 100%;
	height: auto;
    vertical-align: top;
}

h1, h2, h3, h4, h5{
	margin: 3rem 0 2rem 0;
}

h1,
.h1{
    font-weight: 500;
	font-size: 8rem;
	line-height: 1em;
}

h2,
.h2{
    font-weight: 500;
	font-size: 6rem;
	line-height: 1em;
}

h3,
.h3{
    font-weight: 500;
	font-size: 4rem;
	line-height: 1em;
}

h4,
.h4{
    font-weight: 500;
	font-size: 3rem;
	line-height: 1.2em;
}

h5,
.h5{
    font-weight: 500;
	font-size: 2.5rem;
	line-height: 1.2em;
}

@media screen and (max-width: 90em) {
    p.large{
        font-size: 2.5rem;
        line-height: 1.2em;
    }
    blockquote{
        font-size: 2.5rem;
        line-height: 1.2em;
    }
    h1,
    .h1{
        font-size: 5rem;
        line-height: 1em;
    }
    h2,
    .h2{
        font-size: 4rem;
        line-height: 1em;
    }
    h3,
    .h3{
        font-size: 3rem;
        line-height: 1.2em;
    }
    h4,
    .h4{
        font-size: 2.5rem;
        line-height: 1.2em;
    }
    h5,
    .h5{
        font-size: 2rem;
        line-height: 1.2em;
    }
}

/* SOLID BUTTON */
.solid-button{
	display: inline-flex; justify-content: center; align-items: center;
	max-width: 100%;
    margin: 0;
	padding: 1.7rem 2.7rem;
	box-sizing: border-box;
	border-radius: 1.6em;
	border: 0;
    outline: 0;
	text-align: center;
	font-family: default-font, sans-serif;
    font-weight: 500;
	font-size: 1.6rem;
	line-height: 2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
	color: var(--button-text-color);
	background-color:var(--button-color);
	cursor:pointer;
}

.solid-button::after{
    content: ">";
    margin-left: 0.5rem;
}

.solid-button:hover,
.solid-button:focus{
	color: var(--button-text-hover-color);
	background-color:var(--button-hover-color);
    text-decoration: none;
}

.solid-button:disabled,
.solid-button.disabled{
    color: #989ea0;
    background-color: #f4f4f4;
	cursor: default;
}

.solid-button .icon-font{
    margin-right: 0.5rem;
}

/* TRANSPARENT BUTTON */
.transparent-button{
	display: inline-flex; justify-content: center; align-items: center;
	max-width: 100%;
    margin: 0;
	padding: 1.5rem 2.5rem;
	box-sizing: border-box;
	border-radius: 1.6em;
	border: 0.2rem solid currentColor;
    outline: 0;
	text-align: center;
	font-family: default-font, sans-serif;
    font-weight: 500;
	font-size: 1.6rem;
    line-height: 2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
	color: var(--link-color);
	background-color: transparent;
	cursor:pointer;
}

.transparent-button::after{
    content: ">";
    margin-left: 0.5rem;
}

.transparent-button:hover,
.transparent-button:focus{
    color: currentColor;
    text-decoration: none;
}

.transparent-button:disabled,
.transparent-button.disabled{
    color: #f4f4f4;
	cursor: default;
}

.transparent-button .icon-font{
    margin-right: 0.5rem;
}

/* ARROW LINK */
.arrow-link{
    font-size: 1.6rem;
    line-height: 2rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15em;
}

.arrow-link:hover,
.arrow-link:focus{
    color: var(--hover-color);
    text-decoration: none;
}
.arrow-link.disabled{
	color: #989ea0;
	cursor: default;
}

.arrow-link::after{
    content: ">";
    margin-left: 0.5rem;
}

/* ICON FONT */
.icon-font{
    font-family: icon-font;
    font-weight: 400;
}

/* WORDPRESS */
img.aligncenter{
    display: block;
    margin: 2rem auto;
}

img.alignleft{
    display: block;
    margin: 2rem auto 2rem 0;
}

img.alignright{
    display: block;
    margin: 2rem 0 2rem auto;
}

figure.wp-caption{
    display: flex; flex-wrap: wrap;
	max-width: 100%;
}

figure.wp-caption.aligncenter{
    justify-content: center;
    margin: 2rem auto;
    text-align: center;
}

figure.wp-caption.alignleft{
    justify-content: flex-start;
    margin: 2rem auto 2rem 0;
    text-align: left;
}

figure.wp-caption.alignright{
    justify-content: flex-end;
    margin: 2rem 0 2rem auto;
    text-align: right;
}

figure.wp-caption figcaption{
    width: 0;
    flex-basis: 100%;
	margin-top: 1rem;
	font-style: normal;
}

/* RECAPTCHA BADGE */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* BLOCK */
.block{
	max-width: 165rem;
	margin: clamp(5rem, 7.5vw, 12.5rem) auto;
    padding: 0 clamp(2rem, 5vw, 10rem);
}

/* VIDEO PLAYER */
.video-player{
    margin: 3rem 0;
    --plyr-color-main: var(--orange);
	--plyr-video-control-color-hover: var(--plyr-color-main);
	--plyr-video-control-background-hover: transparent;
    --plyr-tab-focus-color: transparent;
}

.video-player .plyr .plyr__control--overlaid{
	--plyr-control-icon-size: 3rem;
    --plyr-control-spacing: 1.5rem;
	--plyr-video-control-background: rgba(18, 19, 22, 0.75);
	--plyr-video-control-background-hover: rgba(18, 19, 22, 0.75);
    opacity: 1;
}

.video-player .plyr .plyr__control{
	outline: 0;
}

.video-player .plyr input[type=range]:focus-visible{
    --plyr-range-thumb-background: var(--plyr-color-main);
}

/* SKETCHFAB */
.sketchfab{
    margin: 3rem 0;
    position: relative;
}

.sketchfab:before{
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.sketchfab iframe{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
	border: 0;
}

/* CONTENT SLIDER */
.content-slider > .inner{
	padding: 0 5rem;
	position: relative; z-index: 0;
}

.content-slider .slider{
    flex-grow: 1;
    overflow-x: auto;
    overflow-y: hidden;
}

.content-slider .swiper-container{
    overflow: hidden;
}

.content-slider .slides{
    display: flex;
}

.content-slider .slide{
    height: auto;
    flex-shrink: 0;
    box-sizing: border-box;
}

.content-slider .nav-button{
	position: absolute; top: 0; bottom: 0;
	height: 1em;
    padding: 1rem;
	margin: auto;
	text-align: center;
    font-size: 3rem;
	line-height: 1em;
    outline: 0;
    color: var(--link-color);
    cursor: pointer;
}

.content-slider .nav-button:hover,
.content-slider .nav-button:focus{
    text-decoration: none;
    color: var(--hover-color);
}

.content-slider .nav-button.prev{
	left: 0;
}

.content-slider .nav-button.next{
	right: 0;
}

.content-slider .nav-button.swiper-button-disabled{
    visibility: hidden;
}

/* COOKIE BANNER */
#cookie-banner{
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 3;
	box-shadow: 0 0 1rem rgba(0,0,0,0.5);
}

#cookie-banner .columns{
    display: flow-root;
    margin: 2rem auto;
}

#cookie-banner .columns > .inner{
    display: flex; align-items: center;
    flex-grow: 1;
    margin: -1rem;
}

#cookie-banner .column{
    margin: -1rem 0;
}

#cookie-banner .column > .inner{
    margin: 2rem 0;
    padding: 0 1rem;
}

#cookie-banner .content{
	width: 100%;
}

#cookie-banner .content > .inner{
    max-width: 80rem;
}

@media screen and (max-width: 60em) {
	#cookie-banner .columns > .inner{
        flex-wrap: wrap;
    }
}

/* HEADER */
#header{
	height: 8rem;
}

#header .navbar{
	display: flow-root;
    position: relative; z-index: 1;
	transition: background-color 0.3s, box-shadow 0.3s;
}

#header .navbar.stuck{
    position: fixed; top: 0; left: 0; right: 0;
	background-color: var(--dark-grey);
    box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.25);
}

#header .columns {
	display: flow-root;
	margin: 0 auto;
}

#header .columns > .inner{
	margin: 0 -1.5rem;
	height: 12rem;
    display: flex; align-items: center;	
}

#header .column{
	margin: 0 1.5rem;
	flex-shrink: 0;
}

#header .logo{
	flex-grow: 1;
	flex-shrink: 1;
}

#header .logo a:hover,
#header .logo a:focus{
    filter:  brightness(0) invert(1);
}

#header .logo img{
	display: block;
}

#header .menu button{
    width: 1em;
    height:1em;
	box-sizing: content-box;
	margin: -1rem;
	padding: 1rem;
    text-align: center;
    font-size: 4rem;
	line-height: 1em;
    background-color: transparent;
    border: 0;
    outline: 0;
    color: #ffffff;
    cursor: pointer;
}

#header .menu button:hover,
#header .menu button:focus{
    color: var(--link-color);
}

@media screen and (max-width: 90em) {
	#header{
		height: 8rem;
	}
	#header .columns > .inner{
		height: 10rem;
	}
}

@media screen and (max-width: 45em) {
	#header .demo,
	#header .login{
		display: none;
	}
}

/* MAIN MENU */
#main-menu{
    position: fixed; top: 0; bottom:0; left:0; right:0; z-index: 1;
    visibility: hidden;
    transition: background-color 0.4s, visibility 0s 0.4s;
}

#main-menu.open{
    visibility: inherit;
    background-color: rgba(0, 0, 0, 0.5);
    transition: background-color 0.4s;
}

#main-menu .focus-area{
    position: fixed; top: 0; bottom: 0; left: 100%;
	width: 70rem;
    max-width: 100%;
    overflow-y: auto;
    transition: transform 0.4s;
}

#main-menu.open .focus-area{
    transform: translateX(-100%);
}

#main-menu .main-menu{
	display: flow-root;
    margin: 5rem 0;
}

#main-menu .main-menu .menu{
    list-style: none;
    margin: -0.5rem 0;
    padding: 0;
}

#main-menu .main-menu li{
    margin: 0;
    padding: 0;
	overflow: hidden;
    transition: height 0.3s;
}

#main-menu .main-menu a{
    display: inline-flex; align-items: center;
	padding: 0.5rem 0;
	color: currentColor;
	font-weight: 500;
	line-height: 1.2em;
}

#main-menu .main-menu a .icon-font{
    display: none;
}

#main-menu .main-menu .menu-item-has-children > a .icon-font{
    display: block;
    margin-left: 0.5em;
}

#main-menu .main-menu a:hover,
#main-menu .main-menu a:focus{
    text-decoration: none;
    color: var(--link-color);
}

#main-menu .main-menu .sub-menu{
    list-style: none;
    margin: 0;
    padding-left: 2.5rem;
    height: 0;
    visibility: hidden;
    transition: visibility 0s 0.3s;
}

#main-menu .main-menu li.open > .sub-menu{
    height: auto;
    visibility: inherit;
    transition: none;
}

#main-menu .social{
    margin: 5rem 0;
}

#main-menu .social ul{
    display: flex; flex-wrap: wrap;
    list-style: none;
    margin: 0.05rem;
    padding: 0;
}

#main-menu .social li{
    margin: -0.05rem;
    padding: 0;
}

#main-menu .social a{
    display: block;
    width: 1em;
    height: 1em;
	margin: 0;
	padding: 0.5em;
    font-size: 2.5rem;
    line-height: 1em;
    text-align: center;
    border: 0.1rem solid currentColor;
    color: currentColor;
}

#main-menu .social a:hover,
#main-menu .social a:focus{
    color: var(--link-color);
    position: relative;
    text-decoration: none;
}

#main-menu .close-button{
    position: absolute; top: 2rem; right: 2rem; z-index: 1;
	width: 1em;
	height: 1em;
	margin: -1rem;
	padding: 1rem;
	box-sizing: content-box;
    text-align: center;
    font-size: 3rem;
    line-height: 1em;
    background-color: transparent;
    border: 0;
    outline: 0;
    color: currentColor;
    cursor: pointer;
}

#main-menu .close-button:hover,
#main-menu .close-button:focus{
    color: var(--link-color);
}

@media screen and (max-width: 30em) {
    #main-menu > .focus-area{
        width: 100%;
    }
}

/* HOME */
#home .hero{
    display: flex;
}

#home .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#home .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,0.3);
}

#home .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home .hero .overlay{
    width: 100%;
    z-index: 0;
    align-self: center;
}

#home .hero .overlay .content{
    max-width: 60rem;
}

/* CLIENTS */
#clients{
	text-align: center;
}

#clients .content-slider{
    margin: 3rem 0;
}

#clients .slider > .inner{
	margin-left: -5rem;
}

#clients .slide{
    width: 20%;
	padding-left: 5rem;
}

#clients .slide .logo{
    position: relative;
}

#clients .slide .logo::before{
    content: "";
    display: block;
    padding-bottom: 50%;
}

#clients .slide .logo img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

@media screen and (max-width: 60em) {
    #clients .slide{
        width: 33.33%;
    }
}

@media screen and (max-width: 30em) {
    #clients .slide{
        width: 100%;
    }
}

/* INDUSTRIES */
#industries{
    display: flow-root;
	text-align: center;
}

#industries .columns{
    display: flex;
    margin: 5rem 0;
    text-align: center;
}

#industries .columns > .inner{
    flex-grow: 1;
    display: flex; justify-content: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#industries .column{
    width: 25%;
    margin: -0.5rem 0;
    opacity: 0;
    transform: scale(0.9);
	position: relative;
}

#industries .active .column{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#industries .column > .inner{
    max-width: 30rem;
    margin: 3rem auto;
    padding: 0 2rem;
}

#industries .column .icon{
    position: relative;
    max-width: 6rem;
    margin: 3rem auto;
}

#industries .column .icon::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

#industries .column .icon img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

#industries .column a{
	color: inherit;
}

#industries .column a:hover,
#industries .column a:focus{
	text-decoration: none;
	color: var(--link-color);
}

#industries .column a::before{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

@media screen and (max-width: 45em) {
    #industries .column{
        width: 33.33%;
    }
}

@media screen and (max-width: 30em) {
    #industries .column{
        width: 50%;
    }
}

/* PRICING */
#pricing{
    display: flow-root;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
}

#pricing .columns{
    display: flow-root;
}

#pricing .columns > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#pricing .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#pricing .image img{
    opacity: 0;
    transform: scale(0.9);
}

#pricing .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#pricing .content{
    width: 50%;
    max-width: 70rem;
    margin: -1.5rem 0;
}

#pricing .image > .inner,
#pricing .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#pricing .check{
	display: flex; align-items: center; gap: 2rem;
	margin: 3rem 0;
}

#pricing .check .icon-font{
    font-size: 5rem;
    line-height: 1em;
}

#pricing .check .right{
	margin: -3rem 0;
}

#pricing .check .right > .inner{
	margin: 3rem 0;
}

#pricing .links > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1rem;
}

#pricing .link{
    padding: 1rem;
}

@media screen and (max-width: 60em) {
    #pricing .content{
        width: 100%;
        max-width: none;
    }
}

@media screen and (max-width: 30em) {
    #pricing .check{
        flex-direction: column;
    }
}

/* TRAINING */
#training{
    display: flow-root;
    text-align: center;
}

#training .header{
    max-width: 80rem;
    margin: 5rem auto;
}

#training .columns{
    display: flow-root;
    margin: 5rem auto;
}

#training .columns > .inner{
    display: flex; justify-content: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#training .column{
    width: 20%;
    margin: -0.5rem 0;
    opacity: 0;
    transform: scale(0.9);
}

#training .active .column{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#training .column > .inner{
    max-width: 25rem;
    margin: 3rem auto;
    padding: 0 2rem;
}

#training .column .icon{
    position: relative;
    max-width: 6rem;
    margin: 3rem auto;
}

#training .column .icon::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

#training .column .icon img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

#training .column .title{
	display: block;
	margin: 1rem 0;
}

#training .video{
    opacity: 0;
    transform: scale(0.9);
}

#training .video.active{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

@media screen and (max-width: 45em) {
    #training .column{
        width: 33.33%;
    }
}

@media screen and (max-width: 30em) {
    #training .column{
        width: 50%;
    }
}

/* OFF THE SHELF CONTENT */
#off-the-shelf-content .header{
    max-width: 70rem;
}

#off-the-shelf-content article{
    display: flow-root;
    margin: 5rem 0;
}

#off-the-shelf-content article > .inner{
    display: flex; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#off-the-shelf-content article:nth-of-type(odd) > .inner{
    flex-direction: row-reverse;
}

#off-the-shelf-content article .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#off-the-shelf-content article .image img{
    opacity: 0;
    transform: scale(0.9);
}

#off-the-shelf-content article .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#off-the-shelf-content article .content{
    width: 50%;
    max-width: 50rem;
    margin: -1.5rem 0;
    box-sizing: border-box;
    position: relative;
}

#off-the-shelf-content article:nth-of-type(odd) .content{
    padding-right: 2rem;
}

#off-the-shelf-content article:nth-of-type(even) .content{
    padding-left: 2rem;
}

#off-the-shelf-content article .content::after{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0;
    width: 0; 
    height: 0;
    margin: auto;
    border-top: 1.5rem solid transparent;
    border-bottom: 1.5rem solid transparent;
}

#off-the-shelf-content article:nth-of-type(odd) .content::after{
    right: 0;
    border-left: 2rem solid var(--orange);
}

#off-the-shelf-content article:nth-of-type(even) .content::after{
    left: 0;
    border-right: 2rem solid var(--orange);
}

#off-the-shelf-content article .image > .inner,
#off-the-shelf-content article .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#off-the-shelf-content article .image img{
    margin: -5rem 0;
}

@media screen and (max-width: 60em) {
    #off-the-shelf-content article .content{
        width: 100%;
        max-width: none;
    }
    #off-the-shelf-content article .content::after{
        display: none;
    }
    #off-the-shelf-content article .image img{
        margin: 0;
    }
}

/* COMMUNITY */
#community{
    display: flow-root;
}

#community .columns{
    display: flow-root;
}

#community .columns > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#community .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#community .image img{
    opacity: 0;
    transform: scale(0.9);
}

#community .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#community .content{
    width: 50%;
    max-width: 70rem;
    margin: -1.5rem 0;
}

#community .image > .inner,
#community .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#community .links{
    display: flow-root;
}

#community .links > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1rem;
}

#community .link{
    padding: 1rem;
}

#community .social{
	display: flow-root;
	margin: 3rem 0;
}

#community .social ul{
    display: flex; flex-wrap: wrap;
    list-style: none;
    margin: 0.05rem;
    padding: 0;
}

#community .social li{
    margin: -0.05rem;
    padding: 0;
}

#community .social a{
    display: block;
    width: 1em;
    height: 1em;
	margin: 0;
	padding: 0.5em;
    font-size: 2.5rem;
    line-height: 1em;
    text-align: center;
    border: 0.1rem solid currentColor;
}

#community .social a:hover,
#community .social a:focus{
    color: currentColor;
    position: relative;
    text-decoration: none;
}

@media screen and (max-width: 60em) {
    #community .content{
        width: 100%;
        max-width: none;
    }
}

/* FLOW */
#flow .hero{
    display: flow-root;
}

#flow .hero > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#flow .hero .image{
    flex-grow: 1;
	align-self: center;
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#flow .hero .image > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#flow .hero .image img{
    opacity: 0;
    transform: scale(0.9);
}

#flow .hero .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#flow .hero .content{
    width: 50%;
    max-width: 60rem;
	margin: -1.5rem 0;
}

#flow .hero .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #flow .hero .content{
        width: 100%;
        max-width: none;
    }
}

/* FLOW FEATURES */
#flow-features article{
	margin: 5rem 0;
}

#flow-features article:nth-of-type(odd){
    display: flow-root;
    border-radius: 1.5rem;
    background-color: var(--mid-grey);
}

#flow-features article .columns{
	display: flow-root;
}

#flow-features article .columns > .inner{
	display: flex; align-items: center; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#flow-features article:nth-of-type(even) .columns > .inner{
	flex-direction: row-reverse;
}

#flow-features article .image{
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#flow-features article .image > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#flow-features article .image img{
	border: 0.1rem solid rgba(255,255,255,0.1);
	box-shadow: 0 0 2rem rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.9);
}

#flow-features article .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#flow-features article .content{
    width: 50%;
	margin: -1.5rem 0;
}

#flow-features article .content > .inner{
	max-width: 65rem;
	margin: 3rem auto;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #flow-features article .image,
	#flow-features article .content{
        width: 100%;
    }
	#flow-features article .content > .inner{
		max-width: none;
	}
}

/* UNITY */
#unity{
    display: flex; flex-direction: row-reverse; flex-wrap: wrap;
	max-width: none;
	padding: 0;
}

#unity .image{
    width: 50%;
	flex-grow: 1;
    position: relative;
    overflow: hidden;
}

#unity .image::before{
	content: "";
	display: block;
	padding-bottom: 66.66%;
}

#unity .image img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateX(25%);
    opacity: 0;
}

#unity .image.active img{
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.4s, opacity 0.4s;
}

#unity .content{
	align-self: center;
    width: 50%;
	max-width: 75rem;
}

#unity .content > .block{
	max-width: 50rem;
}

@media screen and (max-width: 60em) {
    #unity .content{
        width: 100%;
		max-width: none;
    }
	#unity .content > .block{
		max-width: none;
	}
}

/* FLOW SUPPORT */
#flow-support{
	max-width: 80rem;
}

/* PORTAL */
#portal .hero{
    display: flow-root;
}

#portal .hero > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#portal .hero .image{
    flex-grow: 1;
	align-self: center;
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#portal .hero .image > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#portal .hero .image img{
    opacity: 0;
    transform: scale(0.9);
}

#portal .hero .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#portal .hero .content{
    width: 50%;
    max-width: 60rem;
	margin: -1.5rem 0;
}

#portal .hero .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #portal .hero .content{
        width: 100%;
        max-width: none;
    }
}

/* PORTAL FEATURES */
#portal-features article{
	margin: 5rem 0;
}

#portal-features article:nth-of-type(odd){
    display: flow-root;
    border-radius: 1.5rem;
    background-color: var(--mid-grey);
	
}

#portal-features article .columns{
	display: flow-root;
}

#portal-features article .columns > .inner{
	display: flex; align-items: center; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#portal-features article:nth-of-type(even) .columns > .inner{
	flex-direction: row-reverse;
}

#portal-features article .image{
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#portal-features article .image > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#portal-features article .image img{
	border: 0.1rem solid rgba(255,255,255,0.1);
	box-shadow: 0 0 2rem rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.9);
}

#portal-features article .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#portal-features article .content{
    width: 50%;
	margin: -1.5rem 0;
}

#portal-features article .content > .inner{
	max-width: 65rem;
	margin: 3rem auto;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #portal-features article .image,
	#portal-features article .content{
        width: 100%;
    }
	#portal-features article .content > .inner{
		max-width: none;
	}
}

/* MARKETPLACE */
#marketplace .hero{
    display: flow-root;
}

#marketplace .hero > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#marketplace .hero .image{
    flex-grow: 1;
	align-self: center;
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#marketplace .hero .image > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#marketplace .hero .image img{
    opacity: 0;
    transform: scale(0.9);
}

#marketplace .hero .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#marketplace .hero .content{
    width: 50%;
    max-width: 60rem;
	margin: -1.5rem 0;
}

#marketplace .hero .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #marketplace .hero .content{
        width: 100%;
        max-width: none;
    }
}

/* HEADSETS */
#headsets{
	display: flow-root;
}

#headsets > .inner{
    display: flex; align-items: center; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#headsets .image{
    width: 50%;
	flex-grow: 1;
	margin: -1.5rem 0;
	text-align: center;
}

#headsets .image > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#headsets .image img{
    opacity: 0;
    transform: scale(0.9);
}

#headsets .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#headsets .content{
    width: 50%;
	max-width: 60rem;
	margin: -1.5rem 0;
}

#headsets .content > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #headsets .content{
        width: 100%;
		max-width: none;
    }
}

/* SAMPLE COURSE */
#sample-course .header{
	text-align: center;
}

#sample-course .columns{
	display: flow-root;
	max-width: 110rem;
    margin: 5rem auto;
}

#sample-course .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#sample-course .column{
	width: 50%;
    padding: 1.5rem;
	box-sizing: border-box;
    opacity: 0;
    transform: translateY(5rem);
}

#sample-course .active .column{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#sample-course .download{
	height: 100%;
    border-radius: 1.5rem;
	position: relative;
	overflow: hidden;
}

#sample-course .download .image{
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#sample-course .download .image::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,0.3);
    background-image: url("../svg/reflection.svg");
	background-size: cover;
	background-position: center;
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
}

#sample-course .download .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#sample-course .download .content{
	position: relative;
    max-width: 45rem;
    margin: 3rem auto;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #sample-course .column{
        width: 100%;
    }
    #sample-course .download .content{
        max-width: none;
    }
}

/* APPLICATION EXAMPLES */
#application-examples .hero{
    display: flex;
}

#application-examples .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#application-examples .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,0.3);
}


#application-examples .hero .background video{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#application-examples .hero .overlay{
    width: 100%;
    z-index: 0;
    align-self: flex-end;
}

#application-examples .hero .overlay .content{
    max-width: 60rem;
}

#application-examples article{
	display: flow-root;
}

#application-examples article > .inner{
	display: flex; flex-wrap: wrap;
	margin: -1.5rem;
}

#application-examples article .video{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#application-examples article .video > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#application-examples article .video video{
	width: 100%;
    opacity: 0;
    transform: scale(0.9);
}

#application-examples article .video.active video{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#application-examples article .content{
    width: 50%;
    max-width: 50rem;
    margin: -1.5rem 0;
    box-sizing: border-box;
    position: relative;
}

#application-examples article .content > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#application-examples article .icon{
    position: relative;
    max-width: 6rem;
}

#application-examples article .icon::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

#application-examples article .icon img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

@media screen and (max-width: 60em) {
	#application-examples article .content{
		width: 100%;
		max-width: none;
	}
}

/* CHAT */
#chat{
	display: flow-root;
	max-width: 90rem;
}

#chat .box{
    display: flex; flex-direction: row-reverse; flex-wrap: wrap;
	margin: 3rem 0;
	padding: 2rem;
	border-radius: 12rem;
	background-image: linear-gradient(0deg, #2a2e33, #3e4247 30rem);
	box-shadow: 0 0 2rem rgba(0,0,0,0.3);
	position: relative;
}

#chat .content{
	align-self: center;
	width: 50%;
	flex-grow: 1;
	padding-left: 10rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

#chat .content > .inner{
	margin: 3rem 0;
}

#chat .image{
	width: 50%;
	max-width: 40rem;
	border-radius: 10rem;
	position: relative;
	overflow: hidden;
}

#chat .image::before{
	content: "";
	display: block;
	padding-bottom: 50%;
}

#chat .image img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media screen and (max-width: 60em) {
	#chat .box{
		border-radius: 5rem;
	}
	#chat .image{
		width: 100%;
		max-width: none;
		border-radius: 3rem;
	}
	#chat .content{
		padding: 0;
	}
}

/* BLOG */
#blog .header{
	text-align: center;
}

#blog .header form{
    display: flex;
    border-bottom: 0.1rem solid var(--link-color);
    max-width: 60rem;
    margin: 5rem auto;
}

#blog .header form input{
    flex-grow: 1;
    width: 0;
    margin: 0;
    padding: 1rem 0;
    font-size: inherit;
    line-height: inherit;
    text-overflow: ellipsis;
    border: 0;
    outline: 0;
    color: var(--link-color);
    background-color: transparent;
}

#blog .header form input:focus{
    color: currentColor;
}

#blog .header form input::placeholder{
    color: currentColor;
}

#blog .header form button{
    margin: 0;
    padding: 1rem 0;
    font-size: inherit;
    line-height: inherit;
    border: 0;
    outline: 0;
    color: var(--link-color);
    background-color: transparent;
    cursor: pointer;
}

#blog .header form button:hover,
#blog .header form button:focus{
    color: currentColor;
}

#blog .header .categories{
    margin: 3rem 0;
}

#blog .header .categories ul{
    display: flex; justify-content: center; flex-wrap: wrap;
    list-style: none;
    margin: -1rem;
    padding: 0;
}

#blog .header .categories li{
    margin: 0;
    padding: 0;
}

#blog .header .categories li.current{
    color: var(--link-color);	
}

#blog .header .categories a{
    display: block;
    padding: 1rem;
	font-weight: 400;
    color: currentColor;
}

#blog .header .categories a:hover,
#blog .header .categories a:focus{
    color: var(--link-color);
    text-decoration: none;
}

#blog .header .categories a .number{
    color: var(--link-color);
}

#blog.loading .archive{
	opacity: 0.5;
	pointer-events: none;
}

#blog .archive .page{
    display: flow-root;
    margin: 3rem 0;
}

#blog .archive .columns{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#blog .archive .column{
    width: 33.33%;
	padding: 1.5rem;
	box-sizing: border-box;
}

#blog article{
    height: 100%;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
	overflow: hidden;
	position: relative;
}

#blog article .image{
    position: relative;
	overflow: hidden;
}

#blog article .image::before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#blog article .image::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	background-image: url("../svg/icon.svg");
	background-position: bottom 2rem left 2rem;
	background-repeat: no-repeat;
}

#blog article .image img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: transform 0.4s;
}

#blog article:hover .image img,
#blog article:focus-within .image img{
	transform: scale(1.1);
}

#blog article .content{
    margin: 3rem 0;
	padding: 0 2rem;
}

#blog article a{
	color: currentColor;
}

#blog article a:hover,
#blog article a:focus{
	text-decoration: none;
	color: var(--link-color);
}

#blog article a::before{
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#blog article .date{
	color: #989ea0;
}

#blog .archive .more{
	text-align: center;
}

@media screen and (max-width: 75em) {
    #blog .archive .column{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #blog .archive .column{
        width: 100%;
    }
}

/* POST */
#post .hero{
    display: flex;
}

#post .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#post .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-image: linear-gradient(rgba(0,0,0,0.3) 75%, var(--dark-grey));
}

#post .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#post .hero .overlay{
    align-self: flex-end;
    width: 100%;
	z-index: 0;
}

#post .hero .columns{
    display: flow-root;
}

#post .hero .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#post .hero .column{
    width: 50%;
    margin: -1.5rem 0;
}

#post .hero .column > .inner{
    margin: 3rem auto;
    padding: 0 2rem;
}

#post .back{
	text-align: center;
}

@media screen and (max-width: 60em) {
	#post .hero .column{
		width: 100%;
	}
}

/* CONTENT */
#content .row:not(.transparent){
	display: flow-root;
}

#content .single-column-content.center{
	max-width: 100rem;
	text-align: center;
}

#content .two-column-content{
	display: flow-root;
}

#content .two-column-content > .inner{
	display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#content .two-column-content.centered > .inner{
	align-items: center;
}

#content .two-column-content .column{
	width: 50%;
	margin: -0.5rem 0;
}

#content .two-column-content .column > .inner{
	max-width: 75rem;
	margin: 3rem 0;
	padding: 0 2rem;
}

#content .three-column-content{
	display: flow-root;
}

#content .three-column-content > .inner{
	display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#content .three-column-content.centered > .inner{
	align-items: center;
}

#content .three-column-content .column{
	width: 33.33%;
	margin: -0.5rem 0;
}

#content .three-column-content .column > .inner{
	max-width: 45rem;
	margin: 3rem 0;
	padding: 0 2rem;
}

#content .media-content .box{
	display: flow-root;
    border-radius: 1.5rem;
}

#content .media-content .columns{
	display: flow-root;
}

#content .media-content .columns > .inner{
	display: flex; flex-wrap: wrap;
	margin: -1.5rem;
}

#content .media-content .columns > .inner.reverse{
	flex-direction: row-reverse;
}

#content .media-content .columns > .inner.center{
	align-items: center;
}

#content .media-content .media{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#content .media-content .media > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
    opacity: 0;
    transform: scale(0.9);
}

#content .media-content .media.active > .inner{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#content .media-content .content{
    width: 50%;
    margin: -1.5rem 0;
}

#content .media-content .content.narrow{
    max-width: 50rem;
}

#content .media-content .content > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#content .image-content{
	display: flex; flex-wrap: wrap;
}

#content .image-content.reverse{
	flex-direction: row-reverse;
}

#content .image-content .image{
	width: 50%;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

#content .image-content .image img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#content .image-content .content{
	width: 50%;
	align-self: center;
}

#content .image-content .content .block {
    max-width: 70rem;
}

#content .image-behind-content{
    display: flex;
}

#content .image-behind-content .background{
    width: 100%;
    min-height: 100vh;
    margin-right: -50%;
    overflow: hidden;
    position: relative;
}

#content .image-behind-content.reverse .background{
	 margin-right: -100%;
}

#content .image-behind-content .background img{
	position: absolute; top:  0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#content .image-behind-content .overlay{
    width: 50%;
	z-index: 0;
    display: flex; flex-direction: column; justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
}

#content .item-columns{
    display: flow-root;
	text-align: center;
}

#content .item-columns > .inner{
    display: flex; justify-content: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#content .item-columns .column{
	width: 33.33%;
    margin: -0.5rem 0;
    opacity: 0;
    transform: scale(0.9);
}

#content .item-columns.four-columns .column{
	width: 25%;
}

#content .item-columns.five-columns .column{
	width: 20%;
}

#content .item-columns.active .column{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#content .item-columns .column > .inner{
    margin: 3rem auto;
    padding: 0 2rem;
}

#content .item-columns .column > .inner.narrow{
    max-width: 30rem;
}

#content .item-slider{
	overflow: hidden;
	max-width: none;
	padding: 0;
}

#content .item-slider > .block{
	margin: auto;
}

#content .item-slider .swiper-slide{
	width: 85%;
	max-width: 42rem;
    height: auto;
    flex-shrink: 0;
	padding: 0 1.5rem;
    box-sizing: border-box;
}

#content .item-slider .item{
	display: flow-root;
	height: 100%;
    border-radius: 1.5rem;
	outline: 0;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
}

#content .item-slider .item > .inner{
	max-width: 32rem;
	margin: 3rem auto;
	padding: 0 2rem;
}

#content .content-items{
	display: flow-root;
}

#content .content-items > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#content .content-items .left{
    width: 33.33%;
    margin: -1.5rem 0;
}

#content .content-items .right{
    width: 66.66%;
    margin: -1.5rem 0;
}

#content .content-items .left > .inner,
#content .content-items .right > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#content .content-items .columns{
    display: flow-root;
}

#content .content-items .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#content .content-items .column{
    width: 50%;
    margin: -1.5rem 0;
}

#content .content-items .column > .inner{
	margin: 3rem auto;
	padding: 0 2rem;
}

#content .content-items .item{
	border-top: 0.1rem solid currentColor;
	padding-left: 8rem;
	position: relative;
}

#content .content-items .item > .inner{
	margin: 3rem 0;
}

#content .content-items .item .icon{
	position: absolute; top: 0; left: 0;
    width: 6rem;
	margin: 3rem 0;
}

#content .content-items .item .icon::before{
	content: "";
	display: block;
	padding-bottom: 100%;
}

#content .content-items .item .icon img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}

#content .sketchfab-model{
    display: flex; flex-wrap: wrap; flex-direction: row-reverse;
	position: relative; z-index: 0;
}

#content .sketchfab-model .sketchfab{
    width: 100%;
	max-height: 100vh;
    margin: 0 -100% 0 0;
}

#content .sketchfab-model .overlay{
    width: 100%;
}

#content .sketchfab-model .overlay .content{
    max-width: 50rem;
    position: relative; z-index: 1;
}

#content .image-marquee .slide{
	display: flow-root;
	height: 100vh;
}

#content .image-marquee .slide > .inner{
	width: 100%;
	height: 100vh;
	position: sticky; top: 0;
    margin: -100vh 0;
	overflow: hidden;
}

#content .image-marquee .slide:first-of-type > .inner{
    margin-top: 0;
}

#content .image-marquee .slide:last-of-type > .inner{
    margin-bottom: 0;
}

#content .image-marquee .image{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#content .image-marquee .image img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#content .scroll-list{
	display: flow-root;
}

#content .scroll-list .columns{
    display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#content .scroll-list .left{
	align-self: flex-end;
	position: sticky; bottom: 0;
    width: 33.33%;
	max-width: 50rem;
	margin: -0.5rem 0;
	text-align: right;
}

#content .scroll-list .left > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#content .scroll-list .right{
	align-self: center;
    width: 66.66%;
    flex-grow: 1;
    margin: -0.5rem 0;
}

#content .scroll-list .right > .inner{
    margin: 3rem 0;
	padding: 0 2rem;
}

#content .scroll-list .items{
	display: flex; align-items: flex-start;
}

#content .scroll-list .items .marker{
	position: sticky; top: 50%;
	width: 10rem;
	flex-shrink: 0;
	height: 0.1rem;
	margin: 0.5em 4rem 0.5em 0;
	background-color: var(--orange);
}

#content .scroll-list .items ul{
    list-style: none;
    margin: -2.5rem 0;
    padding: 0;
}

#content .scroll-list .items li{
    margin: 0;
    padding: 2.5rem 0;
	opacity: 0.2;
}

#content .scroll-list .items li.active{
    opacity: 1;
}

#content .faq{
    overflow: hidden;
    transition: height 0.2s;
}

#content .faq button{
    display: inline-flex; align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-family: default-font;
    text-align: left;
	color: currentColor;
    background-color: transparent;
    cursor: pointer;
}

#content .faq button:hover,
#content .faq button:focus{
	color: var(--link-color);
}

#content .faq button span{
    color: var(--link-color);
    margin-left: 0.5rem;
}

#content .faq .answer{
    height: 0;
    margin-bottom: -2rem;
    visibility: hidden;
    transition: visibility 0s 0.2s;
}

#content .faq.open .answer{
    height: auto;
    visibility: inherit;
    transition: none;
}

#content .faq .answer > .inner{
    margin: 2rem 0;
}

@media screen and (max-width: 75em) {
    #content .content-items .left,
    #content .content-items .right{
        width: 100%;
    }
    #content .sketchfab-model .sketchfab{
        margin-right: 0;
    }
    #content .sketchfab-model .overlay .content{
        max-width: none;
    }
}

@media screen and (max-width: 60em){
	#content .two-column-content .column{
		width: 100%;
	}
	#content .two-column-content .column > .inner{
		max-width: none;
	}
	#content .three-column-content .column{
		width: 100%;
	}
	#content .three-column-content .column > .inner{
		max-width: none;
	}
	#content .media-content .content{
		width: 100%;
	}
	#content .media-content .content.narrow{
		max-width: none;
	}
	#content .image-content .image,
	#content .image-content .content{
		width: 100%;
	}
	#content .image-content .content > .block{
		max-width: none;
	}
	#content .image-behind-content .background{
		margin-right: -100%;
	}
    #content .image-behind-content .overlay{
        width: 100%;
    }
	#content .item-columns.five-columns .column{
		width: 33.33%;
	}
    #content .content-items .column{
        width: 100%;
    }
    #content .scroll-list .left{
        width: 100%;
        max-width: none;
		text-align: left;
    }
    #content .scroll-list .items::before{
        display: none;
    }
}

@media screen and (max-width: 45em){
	#content .item-columns .column,
	#content .item-columns.four-columns .column,
	#content .item-columns.five-columns .column{
		width: 50%;
	}
}

@media screen and (max-width: 30em){
	#content .item-columns .column,
	#content .item-columns.four-columns .column,
	#content .item-columns.five-columns .column{
		width: 100%;
	}
    #content .content-items .item{
        padding-left: 0;
    }
    #content .content-items .item .icon{
        position: relative;
    }
}

/* HARDWARE */
#hardware{
	display: flow-root;
}

#hardware .content{
    max-width: 100rem;
    text-align: center;
}

#hardware .image img{
	width: 100%;
}

/* PLANS */
#plans .plans .header{
	max-width: 80rem;
}

#plans .services{
	display: flow-root;
}

#plans .services ul{
	display: flex; justify-content: space-between; align-items: flex-end;
	max-width: 130rem;
	list-style: none;
	margin: -2rem;
	margin-bottom: -0.5rem;
	padding: 0;
}

#plans .services li{
	margin: 0;
	padding: 0.5rem 2rem;
}

#plans .services a{
	display: block;
	padding: 1.5rem 0;
    font-size: 1.6rem;
    line-height: 2rem;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15em;
	border-bottom: 0.1rem solid currentColor;
}

#plans .services a:hover,
#plans .services a:focus,
#plans .services a.active{
	text-decoration: none;
	color: currentColor;
}

#plans .service{
	outline: 0;
}

#plans.loading .service{
	opacity: 0.5;
	pointer-events: none;
}

#plans .xr-content-creation-tools .content{
	max-width: 80rem;
}

#plans .xr-content-creation-tools .plans{
	display: flow-root;
    margin: 5rem 0;
}

#plans .xr-content-creation-tools .plans > .inner{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: -2.5rem -1.5rem;
}

#plans .xr-content-creation-tools article{
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    margin: 2.5rem 1.5rem;
    padding: 3.5rem 5rem;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
}

#plans .xr-content-creation-tools article .row{
    margin: -1.5rem 0;
}

#plans .xr-content-creation-tools article .row > .inner{
    margin: 3rem auto;
}

#plans .xr-content-creation-tools article .features{
    margin: 2rem 0;
}

#plans .xr-content-creation-tools article .features ul{
    list-style: none;
    margin: -1rem 0;
    padding: 0;
}

#plans .xr-content-creation-tools article .features li{
    display: flex; align-items: center;
    margin: 0;
    padding: 1rem 0;
}

#plans .xr-content-creation-tools article .features li:not(:first-of-type){
    border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
}

#plans .xr-content-creation-tools article .features .icon-font{
    margin-right: 1rem;
}

#plans .bespoke-xr-content-creation .content{
	max-width: 80rem;
}

#plans .bespoke-xr-content-creation .columns{
	display: flow-root;
	margin: 5rem 0;
}

#plans .bespoke-xr-content-creation .columns > .inner{
	display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#plans .bespoke-xr-content-creation .column{
	width: 50%;
	margin: -2.5rem 0;
}

#plans .bespoke-xr-content-creation .column > .inner{
	max-width: 75rem;
	margin: 5rem 0;
	padding: 0 2rem;
}

#plans .off-the-shelf-content .content{
	max-width: 80rem;
}

#plans .off-the-shelf-content .applications{
	display: flow-root;
    margin: 5rem 0;
}

#plans .off-the-shelf-content .applications > .inner{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: -2.5rem -1.5rem;
}

#plans .off-the-shelf-content article{
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    margin: 2.5rem 1.5rem;
    padding: 3.5rem 5rem;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
}

#plans .off-the-shelf-content article .row{
    margin: -1.5rem 0;
}

#plans .off-the-shelf-content article .row > .inner{
    margin: 3rem auto;
}

#plans .off-the-shelf-content article .features{
    margin: 2rem 0;
}

#plans .off-the-shelf-content article .features ul{
    list-style: none;
    margin: -1rem 0;
    padding: 0;
}

#plans .off-the-shelf-content article .features li{
    display: flex; align-items: center;
    margin: 0;
    padding: 1rem 0;
}

#plans .off-the-shelf-content article .features li:not(:first-of-type){
    border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
}

#plans .off-the-shelf-content article .features .icon-font{
    margin-right: 1rem;
}

#plans .luminous-xr-workshop .content{
	max-width: 80rem;
}

#plans .luminous-xr-workshop .columns{
	display: flow-root;
	margin: 5rem 0;
}

#plans .luminous-xr-workshop .columns > .inner{
	display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#plans .luminous-xr-workshop .column{
	width: 50%;
	margin: -2.5rem 0;
}

#plans .luminous-xr-workshop .column > .inner{
	max-width: 75rem;
	margin: 5rem 0;
	padding: 0 2rem;
}

#plans .luminous-xr-workshop .box{
	display: flow-root;
	margin: 5rem 0;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
}

#plans .luminous-xr-workshop .box > .inner{
	margin: 5rem 0;
	padding: 0 5rem;
}

#plans .luminous-xr-workshop .features{
    margin: 2rem 0;
}

#plans .luminous-xr-workshop .features ul{
    list-style: none;
    margin: -1rem 0;
    padding: 0;
}

#plans .luminous-xr-workshop .features li{
    display: flex; align-items: center;
    margin: 0;
    padding: 1rem 0;
}

#plans .luminous-xr-workshop .features li:not(:first-of-type){
    border-top: 0.1rem solid rgba(255, 255, 255, 0.2);
}

#plans .luminous-xr-workshop .features .icon-font{
    margin-right: 1rem;
}

@media screen and (max-width: 60em) {
    #plans .services ul{
        flex-direction: column;
		align-items: flex-start;
    }
    #plans .xr-content-creation-tools .plans > .inner{
        grid-template-columns: 1fr;
    }
	#plans .xr-content-creation-tools article{
    	padding: 1.5rem 2rem;
	}
	#plans .bespoke-xr-content-creation .columns,
	#plans .bespoke-xr-content-creation .columns > .inner,
	#plans .bespoke-xr-content-creation .column,
	#plans .bespoke-xr-content-creation .column > .inner{
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	#plans .off-the-shelf-content .applications > .inner{
        grid-template-columns: 1fr;
    }
	#plans .off-the-shelf-content article{
    	padding: 1.5rem 2rem;
	}
	#plans .luminous-xr-workshop .columns,
	#plans .luminous-xr-workshop .columns > .inner,
	#plans .luminous-xr-workshop .column,
	#plans .luminous-xr-workshop .column > .inner{
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}
	#plans .luminous-xr-workshop .box > .inner{
		margin: 3rem 0;
		padding: 0 2rem;
	}
}

/* SCENARIOS */
#scenarios .header{
	max-width: 80rem;
}

#scenarios .box{
	display: flow-root;
	margin: 5rem 0;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
}

#scenarios .box > .inner{
	margin: 5rem 0;
	padding: 0 5rem;
}

#scenarios table{
	width: auto;
	margin: -1rem -1rem 0 -1rem;
}

#scenarios thead{
    font-weight: 500;
	font-size: 2.5rem;
	line-height: 1.2em;
}

#scenarios th{
	width: 33.33%;
	text-align: left;
	font-weight: 400;
}

#scenarios th *{
	margin: 0;
}

#scenarios td{
	text-align: center;
}

#scenarios tr > *{
	padding: 1rem;
	border: 0.1rem solid rgba(255,255,255,0.2);
}

#scenarios thead tr > *{
	padding-top: 0;
	border-top: 0;
}

#scenarios tr > *:first-child{
	padding-left: 0;
	border-left: 0;
}

#scenarios tr > *:last-child{
	padding-right: 0;
	border-right: 0;
}

#scenarios .not-included{
	opacity: 0;
}

#scenarios .feature{
	display: inline-block;
	position: relative;
}

#scenarios .more-info{
	display: inline;
}

#scenarios .more-info button{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
    font-size: inherit;
    line-height: inherit;
	background-color: transparent;
	color: var(--link-color);
	cursor: pointer;
}

#scenarios .more-info button:hover,
#scenarios .more-info button:focus{
	color: currentColor;
}

#scenarios .more-info button::before{
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#scenarios .more-info .popup{
	position: absolute; bottom: 100%; left: 0;
	width: 20rem;
	outline: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s, visibility 0s 0.2s;
}

#scenarios .more-info.active .popup{
	visibility: inherit;
	opacity: 1;
	transition: opacity 0.2s;
}

#scenarios .more-info .popup > .inner{
	padding: 1rem;
	border-radius: 1rem;
	background-color: #3e4247;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
	text-align: center;
}

#scenarios .more-info .popup::after{
	content: "";
	display: block;
	width: 0; 
	height: 0;
	margin: auto;
	border-left: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-top: 1rem solid #3e4247;
}

@media screen and (max-width: 60em) {
	#scenarios .box > .inner{
		margin: 3rem 0;
		padding: 0 2rem;
	}
	#scenarios thead{
		font-size: 1.8rem;
		line-height: 1.5em;
	}
}

/* CASE STUDIES */
#case-studies .header{
	text-align: center;
}

#case-studies .archive .page{
    display: flow-root;
    margin: 3rem 0;
}

#case-studies .archive .columns{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#case-studies .archive .column{
    width: 33.33%;
	padding: 1.5rem;
	box-sizing: border-box;
}

#case-studies .case-study{
    height: 100%;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
	overflow: hidden;
	position: relative;
}

#case-studies .case-study .image{
    position: relative;
}

#case-studies .case-study .image::before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#case-studies .case-study .image::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	background-image: url("../svg/icon.svg");
	background-position: bottom 2rem left 2rem;
	background-repeat: no-repeat;
}

#case-studies .case-study .image img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: transform 0.4s;
}

#case-studies .case-study:hover .image img,
#case-studies .case-study:focus-within .image img{
	transform: scale(1.1);
}

#case-studies .case-study .content{
    margin: 3rem 0;
	padding: 0 2rem;
}

#case-studies .case-study a{
	color: currentColor;
}

#case-studies .case-study a:hover,
#case-studies .case-study a:focus{
	text-decoration: none;
	color: var(--link-color);
}

#case-studies .case-study a::before{
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#case-studies .archive .more{
	text-align: center;
}

@media screen and (max-width: 75em) {
    #case-studies .archive .column{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #case-studies .archive .column{
        width: 100%;
    }
}


/* CASE STUDY */
#case-study .hero{
    display: flex;
}

#case-study .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#case-study .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-image: linear-gradient(rgba(0,0,0,0.3) 75%, var(--dark-grey));
}

#case-study .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#case-study .hero .overlay{
    align-self: flex-end;
    width: 100%;
	z-index: 0;
}

#case-study .hero .columns{
    display: flow-root;
}

#case-study .hero .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#case-study .hero .column{
    width: 50%;
    margin: -1.5rem 0;
}

#case-study .hero .column > .inner{
    margin: 3rem auto;
    padding: 0 2rem;
}

#case-study .back{
	text-align: center;
}

@media screen and (max-width: 60em) {
	#case-study .hero .column{
		width: 100%;
	}
}

/* SERVICE */
#service .hero{
    display: flow-root;
}

#service .hero > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#service .hero .image{
    flex-grow: 1;
	align-self: center;
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#service .hero .image > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#service .hero .image img{
    opacity: 0;
    transform: scale(0.9);
}

#service .hero .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#service .hero .content{
    width: 50%;
    max-width: 60rem;
	margin: -1.5rem 0;
}

#service .hero .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#service .about .box{
    display: flow-root;
    border-radius: 1.5rem;
}

#service .about .columns{
	display: flow-root;
}

#service .about .columns > .inner{
	display: flex; align-items: center; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#service .about .image{
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#service .about .image > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#service .about .image img{
	border: 0.1rem solid rgba(255,255,255,0.1);
	box-shadow: 0 0 2rem rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.9);
}

#service .about .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#service .about .content{
    width: 50%;
	margin: -1.5rem 0;
}

#service .about .content > .inner{
	max-width: 65rem;
	margin: 3rem auto;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #service .hero .content{
        width: 100%;
        max-width: none;
    }
    #service .about .image,
	#service .about .content{
        width: 100%;
    }
	#service .about .content > .inner{
		max-width: none;
	}
}

/* SERVICE INFO */
#service-info .row{
	margin: 5rem 0;
}

#service-info .row:nth-of-type(odd){
    display: flow-root;
    border-radius: 1.5rem;
    background-color: var(--mid-grey);
}

#service-info .row .columns{
	display: flow-root;
}

#service-info .row .columns > .inner{
	display: flex; align-items: center; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#service-info .row:nth-of-type(even) .columns > .inner{
	flex-direction: row-reverse;
}

#service-info .row .image{
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#service-info .row .image > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#service-info .row .image img{
	border: 0.1rem solid rgba(255,255,255,0.1);
	box-shadow: 0 0 2rem rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.9);
}

#service-info .row .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#service-info .row .content{
    width: 50%;
	margin: -1.5rem 0;
}

#service-info .row .content > .inner{
	max-width: 65rem;
	margin: 3rem auto;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #service-info .row .image,
	#service-info .row .content{
        width: 100%;
    }
	#service-info .row .content > .inner{
		max-width: none;
	}
}

/* BESPOKE CONTENT */
#bespoke-content .hero{
    display: flow-root;
}

#bespoke-content .hero > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#bespoke-content .hero .image{
    flex-grow: 1;
	align-self: center;
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#bespoke-content .hero .image > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#bespoke-content .hero .image img{
    opacity: 0;
    transform: scale(0.9);
}

#bespoke-content .hero .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#bespoke-content .hero .content{
    width: 50%;
    max-width: 60rem;
	margin: -1.5rem 0;
}

#bespoke-content .hero .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #bespoke-content .hero .content{
        width: 100%;
        max-width: none;
    }
}

/* TESTIMONIAL */
#testimonial{
	display: flow-root;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
	text-align: center;
}

#testimonial > .block{
	max-width: 120rem;
}

#testimonial .logo{
	max-width: 30rem;
	margin: 3rem auto;
}

#testimonial blockqoute{
	margin: 3rem 0;
}

/* BESPOKE CONTENT PROCESS */
#bespoke-content-process{
	overflow: hidden;
}

#bespoke-content-process .header{
	margin: 5rem 0;
}

#bespoke-content-process .header > .inner{
	max-width: 80rem;
}

/* CONTENT SLIDER */
#bespoke-content-process .slider{
    overflow-x: auto;
    overflow-y: hidden;
	margin: 5rem -1.5rem;
}

#bespoke-content-process .slider.swiper-container{
	overflow: visible;
}

#bespoke-content-process .slides{
    display: flex;
}

#bespoke-content-process .slide{
	width: 85%;
	max-width: 42rem;
    height: auto;
    flex-shrink: 0;
	padding: 0 1.5rem;
    box-sizing: border-box;
}

#bespoke-content-process .step{
	display: flow-root;
	height: 100%;
    border-radius: 1.5rem;
	outline: 0;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
}

#bespoke-content-process .step > .inner{
	max-width: 32rem;
	margin: 3rem auto;
	padding: 0 2rem;
}

#bespoke-content-process .step .number{
	color: var(--link-color);
}

#bespoke-content-process .step .icon{
	position: relative;
}

#bespoke-content-process .step .icon::before{
	content: "";
	display: block;
	padding-bottom: 100%;
}

#bespoke-content-process .step .icon img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* BESPOKE CONTENT PORTAL */
#bespoke-content-portal{
    display: flow-root;
}

#bespoke-content-portal .columns{
    display: flow-root;
}

#bespoke-content-portal .columns > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#bespoke-content-portal .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#bespoke-content-portal .image img{
    opacity: 0;
    transform: scale(0.9);
}

#bespoke-content-portal .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#bespoke-content-portal .content{
    width: 50%;
    max-width: 70rem;
    margin: -1.5rem 0;
}

#bespoke-content-portal .image > .inner,
#bespoke-content-portal .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #bespoke-content-portal .content{
        width: 100%;
        max-width: none;
    }
}

/* ENVISIONING WORKSHOP */
#envisioning-workshop{
    display: flow-root;
}

#envisioning-workshop > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#envisioning-workshop .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#envisioning-workshop .image img{
    opacity: 0;
    transform: scale(0.9);
}

#envisioning-workshop .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#envisioning-workshop .content{
    width: 50%;
    max-width: 70rem;
    margin: -1.5rem 0;
}

#envisioning-workshop .image > .inner,
#envisioning-workshop .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #envisioning-workshop .content{
        width: 100%;
        max-width: none;
    }
}

/* LATEST POSTS */
#latest-posts .header{
	max-width: 50rem;
}

#latest-posts .columns{
	display: flow-root;
	margin: 5rem 0;
}

#latest-posts .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#latest-posts .column{
    width: 33.33%;
	padding: 1.5rem;
	box-sizing: border-box;
}

#latest-posts article{
    height: 100%;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
	overflow: hidden;
	position: relative;
}

#latest-posts article .image{
    position: relative;
	overflow: hidden;
}

#latest-posts article .image::before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#latest-posts article .image::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	background-image: url("../svg/icon.svg");
	background-position: bottom 2rem left 2rem;
	background-repeat: no-repeat;
}

#latest-posts article .image img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: transform 0.4s;
}

#latest-posts article:hover .image img,
#latest-posts article:focus-within .image img{
	transform: scale(1.1);
}

#latest-posts article .content{
    margin: 3rem 0;
	padding: 0 2rem;
}

#latest-posts article a{
	color: currentColor;
}

#latest-posts article a:hover,
#latest-posts article a:focus{
	text-decoration: none;
	color: var(--link-color);
}

#latest-posts article a::before{
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#latest-posts article .date{
	color: #989ea0;
}

@media screen and (max-width: 75em) {
    #latest-posts .column{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #latest-posts .column{
        width: 100%;
    }
}

/* ENQUIRE */
#enquire{
	display: flow-root;
    text-align: center;
}

#enquire form{
    max-width: 100rem;
    margin: 5rem auto;
}

#enquire .columns{
	display: flow-root;
    margin: 5rem 0;
}

#enquire .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#enquire .column{
    width: 50%;
    flex-grow: 1;
}

#enquire .column > .inner{
    padding: 1.5rem;
}

#enquire .field{
    display: flex; align-items: flex-start;
    border-bottom: 0.1rem solid currentColor;
	padding: 0;
    text-align: left;
    cursor: text;
}

#enquire .field:focus-within{
    border-color: var(--link-color);
}

#enquire .label{
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: right;
    font-weight: 700;
}

#enquire .input{
	display: block;
    width: 0;
    flex-grow: 1;
	margin: 0;
    padding: 0.5rem 0;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
}

#enquire .submit{
    margin: 3rem 0;
}

@media screen and (max-width: 45em) {
    #enquire .column{
        width: 100%;
    }
}

/* ASSET MODELLING */
#asset-modelling{
    display: flow-root;
    background-image: linear-gradient(to top, #3e4247, #2a2e33 50rem);
}

#asset-modelling .columns{
	display: flow-root;
}

#asset-modelling .columns > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#asset-modelling .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#asset-modelling .image img{
    opacity: 0;
    transform: scale(0.9);
}

#asset-modelling .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#asset-modelling .content{
    width: 50%;
    max-width: 70rem;
    margin: -1.5rem 0;
}

#asset-modelling .image > .inner,
#asset-modelling .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #asset-modelling .content{
        width: 100%;
        max-width: none;
    }
}

/* ASSET PACKS */
#asset-packs{
	display: flex;
}

#asset-packs .background{
	width: 100%;
	margin-right: -100%;
}

#asset-packs .image-marquee .slide{
	display: flow-root;
	height: 100vh;
}

#asset-packs .image-marquee .slide > .inner{
	width: 100%;
	height: 100vh;
	position: sticky; top: 0;
    margin: -100vh 0;
	overflow: hidden;
}

#asset-packs .image-marquee .slide:first-of-type > .inner{
    margin-top: 0;
}

#asset-packs .image-marquee .slide:last-of-type > .inner{
    margin-bottom: 0;
}

#asset-packs .image-marquee .image{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#asset-packs .image-marquee .image img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#asset-packs .overlay{
	align-self: flex-end;
	position: sticky; bottom: 0; z-index: 0;
	width: 100%;
    background-image: linear-gradient(transparent, var(--dark-grey));
}

#asset-packs .overlay .content{
	max-width: 65rem;
}

/* WHAT IS A DIGITAL TWIN */
#what-is-a-digital-twin{
    display: flow-root;
    background-image: linear-gradient(to top, #3e4247, #2a2e33 50rem);
}

#what-is-a-digital-twin .columns{
	display: flow-root;
}

#what-is-a-digital-twin .columns > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#what-is-a-digital-twin .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#what-is-a-digital-twin .image img{
    opacity: 0;
    transform: scale(0.9);
}

#what-is-a-digital-twin .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#what-is-a-digital-twin .content{
    width: 50%;
    max-width: 70rem;
    margin: -1.5rem 0;
}

#what-is-a-digital-twin .image > .inner,
#what-is-a-digital-twin .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #what-is-a-digital-twin .content{
        width: 100%;
        max-width: none;
    }
}

/* DIGITAL TWIN PROCESS */
#digital-twin-process .header{
	max-width: 65rem;
}

#digital-twin-process .stages{
    margin: 5rem 0;
}

#digital-twin-process .stages > .inner{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: -1.5rem;
}

#digital-twin-process .stage{
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    margin: 1.5rem;
    padding: 1.5rem 2rem;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
    opacity: 0;
    transform: translateY(5rem);
}

#digital-twin-process .stages.active .stage{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#digital-twin-process .stage .row{
    margin: -1.5rem 0;
}

#digital-twin-process .stage .row > .inner{
    max-width: 45rem;
    margin: 3rem auto;
}

#digital-twin-process .stage .image{
	text-align: center;
}

@media screen and (max-width: 60em) {
    #digital-twin-process .stages > .inner{
        grid-template-columns: 1fr;
    }
    #digital-twin-process .stage .row > .inner{
        max-width: none;
    }
}

/* DIGITAL TWIN BENEFITS */
#digital-twin-benefits{
    display: flow-root;
}

#digital-twin-benefits > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#digital-twin-benefits .image{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#digital-twin-benefits .image img{
    opacity: 0;
    transform: scale(0.9);
}

#digital-twin-benefits .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#digital-twin-benefits .content{
    width: 50%;
    max-width: 70rem;
    margin: -1.5rem 0;
}

#digital-twin-benefits .image > .inner,
#digital-twin-benefits .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #digital-twin-benefits .content{
        width: 100%;
        max-width: none;
    }
}

/* LASER SCANNING */
#laser-scanning .hero{
    display: flex;
}

#laser-scanning .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#laser-scanning .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,0.3);
}

#laser-scanning .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#laser-scanning .hero .overlay{
    width: 100%;
    z-index: 0;
    align-self: center;
}

#laser-scanning .hero .overlay .content{
    max-width: 60rem;
}

/* ABOUT LASER SCANNING */
#about-laser-scanning{
	position: relative; z-index: 0;
}

#about-laser-scanning .header{
    max-width: 100rem;
    text-align: center;
}
#about-laser-scanning .columns{
	display: flow-root;
}

#about-laser-scanning .columns > .inner{
	display: flex; flex-wrap: wrap;
	margin: -1.5rem;
}

#about-laser-scanning .video{
    width: 50%;
    flex-grow: 1;
    margin: -1.5rem 0;
    text-align: center;
}

#about-laser-scanning .video > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#about-laser-scanning .video .video-player{
    opacity: 0;
    transform: scale(0.9);
}

#about-laser-scanning .video.active .video-player{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#about-laser-scanning .content{
    width: 50%;
    max-width: 50rem;
    margin: -1.5rem 0;
    box-sizing: border-box;
    position: relative;
}

#about-laser-scanning .content > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
	#about-laser-scanning .content{
		width: 100%;
		max-width: none;
	}
}

/* DIGITAL TWIN ADVANTAGES */
#digital-twin-advantages{
	display: flow-root;
}

#digital-twin-advantages .columns{
    display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#digital-twin-advantages .left{
	align-self: flex-end;
	position: sticky; bottom: 0;
    width: 33.33%;
    max-width: 40rem;
	margin: -0.5rem 0;
}

#digital-twin-advantages .left > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#digital-twin-advantages .right{
	align-self: center;
    width: 66.66%;
    flex-grow: 1;
    margin: -0.5rem 0;
}

#digital-twin-advantages .right > .inner{
    margin: 3rem 0;
	padding: 0 2rem;
}

#digital-twin-advantages .advantages{
	display: flex; align-items: flex-start;
}

#digital-twin-advantages .advantages .marker{
	position: sticky; top: 50%;
	width: 10rem;
	flex-shrink: 0;
	height: 0.1rem;
	margin: 0.5em 4rem 0.5em 0;
	background-color: var(--orange);
}

#digital-twin-advantages .advantages ul{
    list-style: none;
    margin: -2.5rem 0;
    padding: 0;
}

#digital-twin-advantages .advantages li{
    margin: 0;
    padding: 2.5rem 0;
	opacity: 0.2;
}

#digital-twin-advantages .advantages li.active{
    opacity: 1;
}

@media screen and (max-width: 60em) {
    #digital-twin-advantages .left{
        width: 100%;
        max-width: none;
    }
    #digital-twin-advantages .advantages .marker{
        display: none;
    }
}

/* DATA CAPTURE */
#data-capture{
	display: flow-root;
}

#data-capture .columns{
	display: flow-root;
}

#data-capture .columns > .inner{
    flex-grow: 1;
    display: flex; flex-wrap: wrap; align-items: center;
    margin: -1.5rem -2rem;
}

#data-capture .image{
    width: 50%;
    margin: -1.5rem 0;
    text-align: center;
}

#data-capture .image img{
    opacity: 0;
    transform: scale(0.9);
}

#data-capture .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#data-capture .content{
    width: 50%;
    margin: -1.5rem 0;
}

#data-capture .image > .inner,
#data-capture .content > .inner{
    margin: 3rem auto;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #data-capture .image,
    #data-capture .content{
        width: 100%;
    }
}

/* CLOUD PLATFORM */
#cloud-platform{
    display: flex;
	position: relative; z-index: 0;
}

#cloud-platform .header{
    position: sticky; top: 0; z-index: 1;
    width: 100%;
    height: 100vh;
    margin-right: -100%;
}

#cloud-platform .header > .inner{
	display: flow-root;
	background-image: linear-gradient(var(--dark-grey), transparent);
}

#cloud-platform .header .content{
    max-width: 100rem;
    text-align: center;
}

#cloud-platform .cloud-platform{
    width: 100%;
    margin-right: -100%;
}

#cloud-platform .columns{
	margin: auto;
}

#cloud-platform .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: 0 -2rem;
}

#cloud-platform .left{
    display: flex; align-items: center;
    position: sticky; top: 0;
	width: 40%;
    max-width: 50rem;
    height: 100vh;
}

#cloud-platform .left .content{
    margin: 3rem 0;
    padding: 0 2rem;
}

#cloud-platform .right{
    width: 60%;
    flex-grow: 1;
	margin: auto;
}

#cloud-platform .item{
    display: flex; align-items: center;
    max-width: 80rem;
    height: 100vh;
	margin: auto;
}

#cloud-platform .item > .inner{
	flex-grow: 1;
	display: flex;
}	

#cloud-platform .item .number{
	line-height: 1em;
	width: 2em;
	flex-shrink: 0;
	text-align: center;
	color: var(--link-color);
	border-right: 0.3rem solid var(--link-color);
}

#cloud-platform .item .content{
	margin: -3rem 0;
}

#cloud-platform .item .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#cloud-platform .item .icon{
	max-width: 6rem;
	position: relative;
}

#cloud-platform .item .icon::before{
	content: "";
	display: block;
	padding-bottom: 100%;
}

#cloud-platform .item .icon img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#cloud-platform .footer{
    align-self: flex-end;
    display: flex; align-items: flex-end;
    position: sticky; bottom: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
}

#cloud-platform .footer > .inner{
	width: 100%;
	background-image: linear-gradient(transparent, var(--dark-grey));
}

#cloud-platform .footer .content{
    max-width: 100rem;
    text-align: center;
}

@media screen and (max-width: 60em) {
    #cloud-platform{
        display: flow-root;
    }
    #cloud-platform .header{
        position: static;
        height: auto;
        margin-right: 0;
    }
    #cloud-platform .columns{
		display: block;
        margin-right: 0;
    }
    #cloud-platform .columns > .inner{
        display: block;
    }
	#cloud-platform .left{
        display: block;
		position: static;
        width: 100%;
		max-width: none;
		height: auto;
	}
    #cloud-platform .right{
        width: 100%;
		max-width: none;
    }
    #cloud-platform .item{
        display: block;
		height: auto;
		margin: 5rem 0;
    }
    #cloud-platform .footer{
        display: block;
        position: static;
        height: auto;
    }
}

/* LASER SCANNING PORTAL */
#laser-scanning-portal{
	display: flow-root;
}

#laser-scanning-portal .columns{
	display: flow-root;
}

#laser-scanning-portal .columns > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#laser-scanning-portal .image{
    flex-grow: 1;
    width: 50%;
    margin: -1.5rem 0;
}

#laser-scanning-portal .content{
    width: 50%;
    max-width: 60rem;
    margin: -1.5rem 0;
}

#laser-scanning-portal .image > .inner,
#laser-scanning-portal .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;;
}

#laser-scanning-portal .image img{
    opacity: 0;
    transform: scale(0.9);
}

#laser-scanning-portal .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

@media screen and (max-width: 60em) {
    #laser-scanning-portal .content{
        width: 100%;
        max-width: none;
    }
}

/* TRAINING OVERVIEW */
#training-overview{
    text-align: center;
}

#training-overview .header{
    max-width: 90rem;
    margin: auto;
}

#training-overview .columns{
    display: flow-root;
	max-width: 120rem;
	margin: 5rem auto;
}

#training-overview .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#training-overview .column{
    width: 50%;
    padding: 1.5rem;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0.9);
}

#training-overview .active .column{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#training-overview .column > .inner{
    display: flex; flex-direction: column;
    height: 100%;
}

#training-overview  .column .image{
    position: relative;
}

#training-overview  .column .image::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

#training-overview  .column .image img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#training-overview  .column .content{
    flex-grow: 1;
    padding-top: 50%;
    margin-top: -50%;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
	overflow: hidden;
}

#training-overview  .column .content > .inner{
    max-width: 40rem;
    margin: 3rem auto;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #training-overview .column{
        width: 100%;
    }
}

/* TRAINING PLATFORM */
#training-platform{
	display: flow-root;
}

#training-platform .platform{
    display: flow-root;
}

#training-platform .platform > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#training-platform .left{
    width: 33.33%;
    margin: -1.5rem 0;
}

#training-platform .right{
    width: 66.66%;
    margin: -1.5rem 0;
}

#training-platform .left > .inner,
#training-platform .right > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#training-platform .columns{
    display: flow-root;
}

#training-platform .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#training-platform .column{
    width: 50%;
    margin: -1.5rem 0;
}

#training-platform .column > .inner{
	margin: 3rem auto;
	padding: 0 2rem;
}

#training-platform .feature{
	border-top: 0.1rem solid currentColor;
	padding-left: 8rem;
	position: relative;
}

#training-platform .feature > .inner{
	margin: 3rem 0;
}

#training-platform .feature .icon{
	position: absolute; top: 0; left: 0;
    width: 6rem;
	margin: 3rem 0;
}

#training-platform .feature .icon::before{
	content: "";
	display: block;
	padding-bottom: 100%;
}

#training-platform .feature .icon img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 75em) {
    #training-platform .left,
    #training-platform .right{
        width: 100%;
    }
}

@media screen and (max-width: 45em) {
    #training-platform .column{
        width: 100%;
    }
}

@media screen and (max-width: 30em) {
    #training-platform .feature{
        padding-left: 0;
    }
    #training-platform .feature .icon{
        position: relative;
    }
}

/* REMOTE COLLABORATION */
#remote-collaboration{
    display: flex;
}

#remote-collaboration .background{
    width: 100%;
    min-height: 100vh;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#remote-collaboration .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,0.3);
}

#remote-collaboration .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#remote-collaboration .overlay{
    width: 100%;
	z-index: 0;
}

#remote-collaboration .overlay .content{
    max-width: 60rem;
}

/* TRAINING APPLICATIONS */
#training-applications{
	display: flow-root;
}

#training-applications .columns{
    display: flex; flex-wrap: wrap;
	margin: -2.5rem -2rem;
}

#training-applications .left{
	align-self: flex-end;
	position: sticky; bottom: 0;
    width: 33.33%;
    max-width: 40rem;
	margin: -0.5rem 0;
}

#training-applications .left > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#training-applications .right{
	align-self: center;
    width: 66.66%;
    flex-grow: 1;
    margin: -0.5rem 0;
}

#training-applications .right > .inner{
    margin: 3rem 0;
	padding: 0 2rem;
}

#training-applications .applications{
	display: flex; align-items: flex-start;
}

#training-applications .applications .marker{
	position: sticky; top: 50%;
	width: 10rem;
	flex-shrink: 0;
	height: 0.1rem;
	margin: 0.5em 4rem 0.5em 0;
	background-color: var(--orange);
}

#training-applications .applications ul{
    list-style: none;
    margin: -2.5rem 0;
    padding: 0;
}

#training-applications .applications li{
    margin: 0;
    padding: 2.5rem 0;
	opacity: 0.2;
}

#training-applications .applications li.active{
    opacity: 1;
}

@media screen and (max-width: 60em) {
    #training-applications .left{
        width: 100%;
        max-width: none;
    }
    #training-applications .applications .marker{
        display: none;
    }
}

/* TRAINING STATISTICS */
#training-statistics{
    display: flow-root;
    text-align: center;
}

#training-statistics .columns{
    display: flex;
}

#training-statistics .columns > .inner{
    flex-grow: 1;
    display: flex; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#training-statistics .column{
    width: 33.33%;
    margin: -0.5rem 0;
    opacity: 0;
    transform: scale(0.9);
}

#training-statistics .active .column{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#training-statistics .column > .inner{
    max-width: 30rem;
    margin: 3rem auto;
    padding: 0 2rem;;
}

#training-statistics .column .icon{
    position: relative;
    max-width: 6rem;
    margin: 3rem auto;
}

#training-statistics .column .icon::before{
    content: "";
    display: block;
    padding-bottom: 100%;
}

#training-statistics .column .icon img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

@media screen and (max-width: 45em) {
    #training-statistics .column{
        width: 100%;
    }
}

/* TRAINING 3D */
#training-3d{
    display: flex; flex-wrap: wrap; flex-direction: row-reverse;
	position: relative; z-index: 0;
}

#training-3d .sketchfab{
    width: 100%;
	max-height: 100vh;
    margin: 0 -100% 0 0;
}

#training-3d .overlay{
    width: 100%;
}

#training-3d .overlay .content{
    max-width: 50rem;
    position: relative; z-index: 1;
}

@media screen and (max-width: 75em) {
    #training-3d .sketchfab{
        margin-right: 0;
    }
    #training-3d .overlay .content{
        max-width: none;
    }
}

/* TRAINING PORTAL */
#training-portal{
	display: flow-root;
}

#training-portal .columns{
	display: flow-root;
}

#training-portal .columns > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#training-portal .image{
    flex-grow: 1;
    width: 50%;
    margin: -1.5rem 0;
}

#training-portal .content{
    width: 50%;
    max-width: 60rem;
    margin: -1.5rem 0;
}

#training-portal .image > .inner,
#training-portal .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;;
}

#training-portal .image img{
    opacity: 0;
    transform: scale(0.9);
}

#training-portal .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

@media screen and (max-width: 60em) {
    #training-portal .content{
        width: 100%;
        max-width: none;
    }
}

/* TRAINING DEPLOYMENT */
#training-deployment{
    display: flex; flex-wrap: wrap;
	max-width: none;
	padding: 0;
}

#training-deployment .image{
    width: 50%;
    position: relative;
    overflow: hidden;
}

#training-deployment .image::before{
	content: "";
	display: block;
	padding-bottom: 66.66%;
}

#training-deployment .image img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateX(-25%);
    opacity: 0;
}

#training-deployment .image.active img{
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.4s, opacity 0.4s;
}

#training-deployment .content{
	align-self: center;
    width: 50%;
}

#training-deployment .content > .block{
	max-width: 75rem;
}

@media screen and (max-width: 60em) {
	#training-deployment .image,
    #training-deployment .content{
        width: 100%;
    }
	#training-deployment .content > .block{
		max-width: none;
	}
}

/* XR ADVANTAGES */
#xr-advantages .header{
    max-width: 120rem;
    text-align: center;
}

#xr-advantages .box{
    display: flow-root;
    border-radius: 1.5rem;
    background-color: var(--mid-grey);
}

#xr-advantages .columns{
	display: flow-root;
}

#xr-advantages .columns > .inner{
	display: flex; flex-direction: row-reverse; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#xr-advantages .image{
	align-self: center;
    width: 50%;
	flex-grow: 1;
	margin: -1.5rem 0;
    text-align: center;
}

#xr-advantages .image > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#xr-advantages .image img{
	border: 0.1rem solid rgba(255,255,255,0.1);
	box-shadow: 0 0 2rem rgba(0,0,0,0.3);
    opacity: 0;
    transform: scale(0.9);
}

#xr-advantages .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#xr-advantages .content{
    width: 50%;
	max-width: 60rem;
	margin: -1.5rem 0;
}

#xr-advantages .content > .inner{
	margin: 3rem auto;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
	#xr-advantages .content{
        width: 100%;
		max-width: none;
    }
}

/* XR APPLICATIONS */
#xr-applications{
	position: relative; z-index: 0;
}

#xr-applications .item{
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}

#xr-applications .item .image{
    width: 50%;
    flex-grow: 1;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

#xr-applications .item .image img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#xr-applications .item .content{
    display: flex; flex-direction: column; justify-content: center;
    position: sticky;
    top: 0;
    min-width: 33.33%;
    width: 70rem;
    max-width: 50%;
    height: 100vh;
    margin: -100vh 0;
}

#xr-applications .item:first-of-type  .content{
    margin-top: 0;
}

#xr-applications .item:last-of-type  .content{
    margin-bottom: 0;
}

@media screen and (max-width: 60em) {
    #xr-applications .item .image{
        width: 100%;
    }
    #xr-applications .item .content{
		justify-content: flex-end;
        width: 100%;
        max-width: none;
        margin-right: -100%;
    }
	#xr-applications .item .content > .inner{
		background-image: linear-gradient(rgba(28, 30, 31, 0), #1c1e1f);
	}
}

/* COMPANY */
#company .header{
	text-align: center;
}

#company .box{
    display: flow-root;
    border-radius: 1.5rem;
}

#company .columns{
	display: flow-root;
	margin: 5rem 0;
}

#company .columns > .inner{
	display: flex; flex-wrap: wrap;
	margin: -1.5rem -2rem;
}

#company .column{
    width: 50%;
	margin: -1.5rem 0;
}

#company .column > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

@media screen and (max-width: 60em) {
    #company .column{
        width: 100%;
    }
}

/* MISSION */
#mission .content{
	max-width: 70rem;
}

#mission .image-marquee .slide{
	display: flow-root;
	height: 100vh;
}

#mission .image-marquee .slide > .inner{
	width: 100%;
	height: 100vh;
	position: sticky; top: 0;
    margin: -100vh 0;
	overflow: hidden;
}

#mission .image-marquee .slide:first-of-type > .inner{
    margin-top: 0;
}

#mission .image-marquee .slide:last-of-type > .inner{
    margin-bottom: 0;
}

#mission .image-marquee .image{
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#mission .image-marquee .image img{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* VISION */
#vision{
    display: flex; align-items: center; flex-wrap: wrap;
    overflow: hidden;
}

#vision .image{
    width: 50%;
	text-align: right;
}

#vision .image img{
    transform: translateX(25%);
    opacity: 0;
}

#vision .image.active img{
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.4s, opacity 0.4s;
}

#vision .content{
    width: 50%;
}

#vision .content > .block{
	max-width: 70rem;
}

@media screen and (max-width: 60em) {
    #vision .image,
    #vision .content{
        width: 100%;
    }
}

/* NEWS */
#news .header{
	text-align: center;
}

#news .archive .page{
    display: flow-root;
    margin: 3rem 0;
}

#news .archive .columns{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem;
}

#news .archive .column{
    width: 33.33%;
	padding: 1.5rem;
	box-sizing: border-box;
}

#news .article{
    height: 100%;
    border-radius: 1.5rem;
    background-image: linear-gradient(#3e4247, #2a2e33 50rem);
    box-shadow: inset 0 0.1rem rgba(255, 255, 255, 0.2);
	overflow: hidden;
	position: relative;
}

#news .article .image{
    position: relative;
}

#news .article .image::before{
	content: "";
	display: block;
	padding-bottom: 60%;
}

#news .article .image::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	background-image: url("../svg/icon.svg");
	background-position: bottom 2rem left 2rem;
	background-repeat: no-repeat;
}

#news .article .image img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: transform 0.4s;
}

#news .article:hover .image img,
#news .article:focus-within .image img{
	transform: scale(1.1);
}

#news .article .content{
    margin: 3rem 0;
	padding: 0 2rem;
}

#news .article a{
	color: currentColor;
}

#news .article a:hover,
#news .article a:focus{
	text-decoration: none;
	color: var(--link-color);
}

#news .article a::before{
	content: "";
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#news .article .date{
	color: #989ea0;
}

#news .archive .more{
	text-align: center;
}

@media screen and (max-width: 75em) {
    #news .archive .column{
        width: 50%;
    }
}

@media screen and (max-width: 45em) {
    #news .archive .column{
        width: 100%;
    }
}

/* ARTICLE */
#article .hero{
    display: flex;
}

#article .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#article .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-image: linear-gradient(rgba(0,0,0,0.3) 75%, var(--dark-grey));
}

#article .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#article .hero .overlay{
    align-self: flex-end;
    width: 100%;
	z-index: 0;
}

#article .hero .columns{
    display: flow-root;
}

#article .hero .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#article .hero .column{
    width: 50%;
    margin: -1.5rem 0;
}

#article .hero .column > .inner{
    margin: 3rem auto;
    padding: 0 2rem;
}

#article .hero .date {
    color: #989ea0;
}

#article .back{
	text-align: center;
}

@media screen and (max-width: 60em) {
	#article .hero .column{
		width: 100%;
	}
}

/* TEAM */
#team .hero{
    display: flex;
}

#team .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#team .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-color: rgba(0,0,0,0.3);
}

#team .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#team .hero .overlay{
    width: 100%;
    z-index: 0;
    align-self: center;
}

#team .hero .overlay .content{
    max-width: 40rem;
}

#team .team{
	display: flex; flex-wrap: wrap;
}

#team .team .column{
	width: 25%;
    opacity: 0;
    transform: scale(0.9);
}

#team .team.active .column{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#team .team .header{
	display: flex; align-items: center;
	height: 100%;
}

#team .team .header .content{
	margin: 3rem 0;
	padding-right: 2rem;
}

#team article{
	display: flex;
	height: 100%;
	outline: 0;
}

#team article .background{
    width: 100%;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#team article .background::before{
	content: "";
	display: block;
	padding-bottom: 100%;
}

#team article .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	background-color: var(--orange);
	mix-blend-mode: soft-light;
	opacity: 0;
	transition: 0.4s opacity;
}

#team article:hover .background::after,
#team article:focus .background::after{
	opacity: 1;
}

#team article .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#team article .overlay{
	display: flex; align-items: flex-end;
    width: 100%;
	z-index: 0;
	background-image: url("../svg/icon.svg");
	background-position: bottom 2rem right 2rem;
	background-repeat: no-repeat;
	opacity: 0;
	transition: 0.4s opacity;
}

#team article:hover .overlay,
#team article:focus .overlay{
	opacity: 1;
}

#team article .overlay .content{
	margin: 3rem auto;
	padding: 0 7rem 0 2rem;
}

#team article .name{
	margin: 1rem 0;
}

#team article .links{
	display: flow-root;
	margin: 2rem 0;
}

#team article .links > .inner{
    display: flex; flex-wrap: wrap;
    list-style: none;
    margin: 0.05rem;
    padding: 0;
}

#team article .links a{
    display: block;
    width: 1em;
    height: 1em;
    margin: -0.05rem;
	padding: 0.5em;
    font-size: 2.5rem;
    line-height: 1em;
    text-align: center;
    border: 0.1rem solid currentColor;
    color: currentColor;
}

#team article .links a:hover,
#team article .links a:focus{
    color: var(--link-color);
    position: relative;
    text-decoration: none;
}

@media screen and (max-width: 90em) {
	#team .team .column{
		width: 33.33%;
	}
}

@media screen and (max-width: 75em) {
	#team .team .column{
		width: 50%;
	}
}

@media screen and (max-width: 45em) {
	#team .team .column{
		width: 100%;
	}
	#team .team .header .content{
		padding-right: 0;
	}
}

/* JOIN US */
#join-us{
    display: flow-root;
	background-image: linear-gradient(to top, #3e4247, #2a2e33 50rem);
}

#join-us .columns{
    display: flow-root;
}

#join-us .columns > .inner{
    display: flex; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#join-us .content{
    width: 50%;
    max-width: 75rem;
	margin:-1.5rem 0;
}

#join-us .content > .inner{
	margin: 3rem 0;
    padding: 0 2rem;
}

#join-us .image{
	align-self: flex-end;
    width: 50%;
    flex-grow: 1;
    text-align: center;
	margin-bottom: clamp(-12.5rem, -7.5vw, -5rem);
}

#join-us .image > .inner{
	margin: 1.5rem 0;
    padding: 0 2rem;
	overflow: hidden;
}

#join-us .image img{
    opacity: 0;
    transform: translateY(5rem);
}

#join-us .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

@media screen and (max-width: 60em) {
    #join-us .content{
        width: 100%;
        max-width: none;
    }
}

/* CONTACT */
#contact .header{
    text-align: center;
}

#contact .box{
    display: flow-root;
    border-radius: 1.5rem;
}

#contact .offices{
	display: flow-root;
}

#contact .offices > .inner{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: -3rem -2rem;
}

#contact article{
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    padding: 1.5rem 2rem;
    border-radius: 1.5rem;
	position: relative;
    opacity: 0;
    transform: translateY(5rem);
}

#contact article:not(:first-of-type)::before{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0;
	width: 0.1rem;
	margin: 3rem 0;
	background-color: currentColor;
}

#contact .offices.active article{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#contact article .row{
    margin: -1.5rem 0;
}

#contact article .row > .inner{
    max-width: 40rem;
    margin: 3rem auto;
}

#contact article .map{
	text-align: center;
}

@media screen and (max-width: 45em) {
	#contact .offices > .inner{
		grid-template-columns: 1fr;
	}
	#contact article:not(:first-of-type)::before{
		bottom: auto; right: 0;
		width: auto;
		height: 0.1rem;
		margin: 0 2rem;
	}
	#contact article .row > .inner{
		max-width: none;
	}
}

/* CAREERS */
#careers .hero{
    display: flex;
}

#careers .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#careers .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-image: linear-gradient(rgba(0,0,0,0.3) 75%, var(--dark-grey));
}

#careers .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#careers .hero .overlay{
    align-self: flex-end;
    width: 100%;
	z-index: 0;
}

#careers .hero .columns{
    display: flow-root;
}

#careers .hero .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#careers .hero .column{
    width: 50%;
    margin: -1.5rem 0;
}

#careers .hero .column > .inner{
    margin: 3rem auto;
    padding: 0 2rem;
}

@media screen and (max-width: 60em) {
	#careers .hero .column{
		width: 100%;
	}
}

/* VACANCIES */
#vacancies .columns{
    display: flow-root;
}

#vacancies .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#vacancies .column{
    width: 50%;
    margin: -0.5rem 0;
}

#vacancies .column > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#vacancies .heading .number{
    color: var(--link-color);
}

#vacancies article{
    border-bottom: 0.1rem solid currentColor;
    position: relative;
}

#vacancies article > .inner{
    margin: 3rem 0;
}

#vacancies article a::before{
    content: "";
    display: block;
    position: absolute; top: 0; bottom: 0; left: 0; right: 0;
}

#vacancies article .location,
#vacancies article .contract{
    display: flex; align-items: center;
	margin: 1rem 0;
}

#vacancies article .location .icon-font,
#vacancies article .contract .icon-font{
	width: 1rem;
	text-align: center;
    margin-right: 1rem;
}

@media screen and (max-width: 60em) {
    #vacancies .column{
        width: 100%;
    }
}

/* CAREER */
#career .header{
    max-width: 80rem;
    text-align: center;
}

#career .header .date{
	color: #989ea0;
}

/* JOB DESCRIPTION */
#job-description .box{
    display: flow-root;
    border-radius: 1.5rem;
    background-color: #252a2f;
}

#job-description .columns{
    display: flow-root;
}

#job-description .columns > .inner{
    display: flex; justify-content: space-evenly; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#job-description .column{
    width: 50%;
    margin: -1.5rem 0;
}

#job-description .column > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#job-description .footer{
	max-width: 100rem;
}

@media screen and (max-width: 75em) {
	#job-description .column{
		width: 100%;
	}
}

/* UPLOAD CV */
#upload-cv{
    display: flow-root;
	text-align: center;
}

#upload-cv > .block{
    max-width: 80rem;
}

#upload-cv .columns{
	display: flow-root;
    margin: 5rem 0;
}

#upload-cv .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1rem;
}

#upload-cv .column{
    width: 50%;
	flex-grow: 1;
}

#upload-cv .column > .inner{
    padding: 1rem;
}

#upload-cv .field{
    display: flex; align-items: flex-start;
    border-bottom: 0.1rem solid currentColor;
	padding: 0;
    text-align: left;
    cursor: text;
}

#upload-cv .field:focus-within{
    border-color: var(--link-color);
}

#upload-cv .label{
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: right;
    font-weight: 700;
}

#upload-cv .input{
	display: block;
    width: 0;
    flex-grow: 1;
	margin: 0;
    padding: 0.5rem 0;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
}

#upload-cv .upload .input {
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#upload-cv .upload input {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

#upload-cv .submit{
    margin: 3rem 0;
}

@media screen and (max-width: 45em) {
    #upload-cv .column{
        width: 100%;
    }
}

/* DOWNLOAD */
#download .hero{
    display: flow-root;
}

#download .hero > .inner{
    display: flex; flex-direction: row-reverse; align-items: center; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#download .hero .image{
    flex-grow: 1;
	align-self: center;
    width: 50%;
	margin: -1.5rem 0;
    text-align: center;
}

#download .hero .image > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#download .hero .image img{
    opacity: 0;
    transform: scale(0.9);
}

#download .hero .image.active img{
    opacity: 1;
    transform: none;
    transition: transform 0.4s, opacity 0.4s;
}

#download .hero .content{
    width: 50%;
    max-width: 60rem;
	margin: -1.5rem 0;
}

#download .hero .content > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#download form{
    max-width: 80rem;
    text-align: center;
}

#download form .columns{
	display: flow-root;
    margin: 5rem 0;
}

#download form .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1rem;
}

#download form .column{
    width: 50%;
    flex-grow: 1;
}

#download form .column > .inner{
    padding: 1rem;
}

#download form .field{
    display: flex; align-items: flex-start;
    border-bottom: 0.1rem solid currentColor;
	padding: 0;
    text-align: left;
    cursor: text;
}

#download form .field:focus-within{
    border-color: var(--link-color);
}

#download form .field .label{
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: right;
    font-weight: 700;
}

#download form .field .input{
	display: block;
    width: 0;
    flex-grow: 1;
	margin: 0;
    padding: 0.5rem 0;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
}

#download form .checkbox{
	display: flex; align-items: center; justify-content: center;
}

#download form .checkbox .box{
	display: block;
	padding: 0.5rem;
	margin-right: 1rem;
	border: 0.1rem solid currentColor;
	position: relative;
}

#download form .checkbox .box:hover,
#download form .checkbox .box:focus-within{
    border-color: var(--link-color);
}

#download form .checkbox input{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
}

#download form .checkbox .check{
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	opacity: 0;
}

#download form .checkbox input:checked + .check{
	opacity: 1;
}

#download form .checkbox .label{ 
    text-align: left;
    font-weight: 700;
}

#download form .submit{
    margin: 3rem 0;
}

@media screen and (max-width: 60em) {
    #download .hero .content{
        width: 100%;
        max-width: none;
    }
}

@media screen and (max-width: 45em) {
    #download form .column{
        width: 100%;
    }
}

/* BOOK A DEMO */
#book-a-demo{
	display: flow-root;
}

#book-a-demo > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1rem;
}

#book-a-demo .left,
#book-a-demo .right{
    width: 50%;
	margin: -0.5rem 0;
}

#book-a-demo .left > .inner{
	margin: 3rem 0;
	padding: 0 2rem;
}

#book-a-demo .right > .inner{
	max-width: 60rem;
	margin: 3rem auto;
	padding: 0 2rem;
}

#book-a-demo form .columns {
    display: flow-root;
    margin: 5rem 0;
}

#book-a-demo form .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1rem;
}

#book-a-demo form .column{
    width: 50%;
    padding: 1rem;
    flex-grow: 1;
	box-sizing: border-box;
	text-align: left;
}

#book-a-demo form .column.wide{
    width: 100%;
}

#book-a-demo form .field{
    display: flex; align-items: flex-start;
    border-bottom: 0.1rem solid currentColor;
	padding: 0;
}

#book-a-demo form .field:focus-within{
    border-color: var(--link-color);
}

#book-a-demo form .field .label{
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: right;
    font-weight: 700;
}

#book-a-demo form .input{
	display: block;
    width: 0;
    flex-grow: 1;
	margin: 0;
    padding: 0.5rem 0;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
}

#book-a-demo form .select{
    width: 0;
    flex-grow: 1;
	position: relative;
}

#book-a-demo form .select select{
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
    padding: 0.5rem 1em 0.5rem 0;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
	cursor: pointer;
}

#book-a-demo form .select option{
	background-color: #ffffff;
    color: var(--dark-grey);
}

#book-a-demo form .select .icon-font{
	display: block;
	position: absolute; top: 0; bottom: 0; right: 0;
	height: 1em;
	line-height: 1em;
	margin: auto;
	pointer-events: none;
}

#book-a-demo form .checkbox{
	display: flex; align-items: center;
}

#book-a-demo form .checkbox .box{
	display: block;
	padding: 0.5rem;
	margin-right: 1rem;
	border: 0.1rem solid currentColor;
	position: relative;
}

#book-a-demo form .checkbox .box:hover,
#book-a-demo form .checkbox .box:focus-within{
    border-color: var(--link-color);
}

#book-a-demo form .checkbox input{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
}

#book-a-demo form .checkbox .check{
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	opacity: 0;
}

#book-a-demo form .checkbox input:checked + .check{
	opacity: 1;
}

#book-a-demo form .checkbox .label{ 
    text-align: left;
    font-weight: 700;
}

#book-a-demo form .submit{
    margin: 3rem 0;
}

@media screen and (max-width: 75em) {
    #book-a-demo .left,
	#book-a-demo .right{
		width: 100%;
    }
	#book-a-demo .right > .inner{
		max-width: none;
	}
}

@media screen and (max-width: 45em) {
    #book-a-demo form .column{
        width: 100%;
    }
}

/* SIGN UP */
#sign-up{
    max-width: 80rem;
    text-align: center;
}

#sign-up form .columns{
	display: flow-root;
    margin: 5rem 0;
}

#sign-up form .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1rem;
}

#sign-up form .column{
    width: 50%;
    flex-grow: 1;
}

#sign-up form .column > .inner{
    padding: 1rem;
}

#sign-up form .field{
    display: flex; align-items: flex-start;
    border-bottom: 0.1rem solid currentColor;
	padding: 0;
    text-align: left;
    cursor: text;
}

#sign-up form .field:focus-within{
    border-color: var(--link-color);
}

#sign-up form .label{
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: right;
    font-weight: 700;
}

#sign-up form .input{
	display: block;
    width: 0;
    flex-grow: 1;
	margin: 0;
    padding: 0.5rem 0;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
}

#sign-up form .submit{
    margin: 3rem 0;
}

@media screen and (max-width: 45em) {
    #sign-up form .column{
        width: 100%;
    }
}

/* LANDING PAGE */
#landing-page .hero{
    display: flex;
}

#landing-page .hero .background{
    width: 100%;
    min-height: 100vh;
	min-height: 100svh;
    margin-top: -8rem;
    margin-right: -100%;
    position: relative;
    overflow: hidden;
}

#landing-page .hero .background::after{
	content: "";
	display: block;
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    background-image: linear-gradient(rgba(0,0,0,0.3) 75%, var(--dark-grey));
}

#landing-page .hero .background img{
	position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#landing-page .hero .overlay{
    align-self: center;
    width: 100%;
	z-index: 0;
}

#landing-page .hero .columns{
    display: flow-root;
}

#landing-page .hero .columns > .inner{
    display: flex; flex-wrap: wrap;
    margin: -1.5rem -2rem;
}

#landing-page .hero .column{
    width: 50%;
    margin: -1.5rem 0;
}

#landing-page .hero .column > .inner{
	max-width: 60rem;
    margin: 3rem 0;
    padding: 0 2rem;
}

#landing-page .hero form .field{
    display: flex; align-items: flex-start;
    border-bottom: 0.1rem solid currentColor;
	margin: 2rem 0;
	padding: 0;
    text-align: left;
    cursor: text;
}

#landing-page .hero form .field:focus-within{
    border-color: var(--link-color);
}

#landing-page .hero form .field .label{
    display: block;
    padding: 0.5rem 0.5rem 0.5rem 0;
    text-align: right;
    font-weight: 700;
}

#landing-page .hero form .field .input{
	display: block;
    width: 0;
    flex-grow: 1;
	margin: 0;
    padding: 0.5rem 0;
	border-radius: 0;
	border: 0;
	outline: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	background-color: transparent;
	color: inherit;
}

#landing-page .hero form .checkbox{
	display: flex; align-items: center;
}

#landing-page .hero form .checkbox .box{
	display: block;
	padding: 0.5rem;
	margin-right: 1rem;
	border: 0.1rem solid currentColor;
	position: relative;
}

#landing-page .hero form .checkbox .box:hover,
#landing-page .hero form .checkbox .box:focus-within{
    border-color: var(--link-color);
}

#landing-page .hero form .checkbox input{
	position: absolute; top: 0; left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
}

#landing-page .hero form .checkbox .check{
	display: block;
	width: 1em;
	height: 1em;
	line-height: 1em;
	text-align: center;
	opacity: 0;
}

#landing-page .hero form .checkbox input:checked + .check{
	opacity: 1;
}

#landing-page .hero form .checkbox .label{ 
    font-weight: 700;
}

@media screen and (max-width: 60em) {
	#landing-page .hero .column{
		width: 100%;
	}
	#landing-page .hero .column > .inner{
		max-width: none;
	}
}

/* PARTNERS */
#partners{
	text-align: center;
}

#partners .content-slider{
    margin: 3rem 0;
}

#partners .slider > .inner{
	margin-left: -5rem;
}

#partners .slide{
    width: 20%;
	padding-left: 5rem;
}

#partners .slide .logo{
	max-width: 15rem;
	margin: auto;
    position: relative;
}

#partners .slide .logo::before{
    content: "";
    display: block;
    padding-bottom: 50%;
}

#partners .slide .logo img{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

@media screen and (max-width: 60em) {
    #partners .slide{
        width: 33.33%;
    }
}

@media screen and (max-width: 30em) {
    #partners .slide{
        width: 100%;
    }
}

/* FOOTER */
#footer .social ul{
    display: flex; justify-content: center; flex-wrap: wrap;
    list-style: none;
    margin: 0.05rem;
    padding: 0;
}

#footer .social li{
    margin: -0.05rem;
    padding: 0;
}

#footer .social a{
    display: block;
    width: 1em;
    height: 1em;
	margin: 0;
	padding: 0.5em;
    font-size: 2.5rem;
    line-height: 1em;
    text-align: center;
    border: 0.1rem solid currentColor;
    color: currentColor;
}

#footer .social a:hover,
#footer .social a:focus{
    color: var(--link-color);
    position: relative;
    text-decoration: none;
}

#footer .box{
    display: flow-root;
    margin: 5rem 0;
    border-radius: 1.5rem;
    background-color: #252a2f;
}

#footer .box .columns{
    display: flex;
}

#footer .box .columns > .inner{
    flex-grow: 1;
    display: flex; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#footer .box .office{
	width: 33.33%;
    max-width: 30rem;
    margin: -0.5rem 0;
}

#footer .box .accreditations{
	flex-grow: 1;
    margin: -0.5rem 0;
    text-align: right;
}

#footer .box .office > .inner,
#footer .box .accreditations > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#footer .box .accreditations .logos{
	display: flex; flex-direction: column; align-items: flex-end;
	margin: -1.5rem;
}

#footer .box .accreditations .logos a:hover,
#footer .box .accreditations .logos a:focus{
	opacity: 0.5;
}

#footer .box .accreditations .logos img{
	padding: 1.5rem;
	box-sizing: border-box;
}

#footer .legal{
    display: flex;
}

#footer .legal > .inner{
    flex-grow: 1;
    display: flex; align-items: center; flex-wrap: wrap;
    margin: -2.5rem -2rem;
}

#footer .legal .left{
    width: 50%;
    flex-grow: 1;
    margin: -0.5rem 0;
}

#footer .legal .right{
    width: 50%;
    max-width: 20rem;
    margin: -0.5rem 0;
}

#footer .legal .left > .inner,
#footer .legal .right > .inner{
    margin: 3rem 0;
    padding: 0 2rem;
}

#footer .legal .hyper:hover,
#footer .legal .hyper:focus{
    filter: brightness(0) invert(1);
}

@media screen and (max-width: 60em) {
    #footer .box .office{
        width: 100%;
		max-width: none;
    }
}

@media screen and (max-width: 45em) {
    #footer .legal .left,
    #footer .legal .right{
        width: 100%;
        max-width: none;
    }
}