@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url("http://across.studio/font/Inter/Inter-roman.var.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
  font-named-instance: 'Italic';
  src: url("http://across.studio/font/Inter/Inter-italic.var.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 300;
  font-display: swap;
  src: url("http://across.studio/font/Inter/Inter-Regular.woff2") format("woff2"),
	  url("http://across.studio/font/Inter/Inter-Regular.woff") format("woff"); 
}
::-moz-selection {
	background: #0E4DFB;
	color: #f7f7f7;
}

::selection {
	background: #0E4DFB;
	color: #f7f7f7;
}
::-moz-selection {
	background: #0E4DFB;
	color: #f7f7f7;
}

html {
	scroll-behavior: smooth;
}
div{
	line-height: 0;
}
body{
	background-color: #f7f7f7;
	color: #171717;
	
	font-family: 'Inter var', sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.5; /* 21px */

	
	/*baseline grid*/
/*	background-image: linear-gradient(#ececec 1px, transparent 1px);
    background-size: auto 1.5em;*/
}
a{
	text-decoration: none;
	color: #171717;
}
.glyph{
	font-family: 'Inter', sans-serif;
}

.quote{
	quotes: "“" "”" "‘" "’";
/*	text-indent: -0.6em;*/
}
.quote:before{
	 content: open-quote;
}
.quote:after{
	 content: close-quote;}
.type-hero{
	font-size: 3em;
	line-height: 1.25em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-weight: 300;
}
.type-hero-2{
	font-size: 2.5em;
	line-height: 1.05em;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	font-weight: 300;
}
.type-headline{
	font-size: 2em;
	line-height: 1.31;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	font-weight: 300;
}
.type-headline-2{
	font-size: 2em;
	line-height: 1.31;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
	font-weight: 300;
}
.type-body{
	font-size: 1.50em;
	line-height: 1.50em;
	margin-top: 1em;
	margin-bottom: 1em;
}
.type-small{
	font-size: 1em;
	line-height: 1.50;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	letter-spacing: 0.01em;
	font-weight: 400;
}
.type-big{
	font-size: 4em;
	line-height: 1.13em;
	margin-top: 0.38em;
	margin-bottom: 0.38em;
	letter-spacing: -0.02em;
	font-weight: 300;
}
.side-type{
	font-size: 1em;
	line-height: 1.50;

	letter-spacing: 0.01em;
	font-weight: 400;
}
.side-adj-1{
	margin-top: 1.51em;  /*4.05em*/

}
.side-adj-2{
	margin-top: em;
}
.side-adj-3{
	margin-top: 0.85em;
}
.b{
	border: 1px solid red
}
.mid-grey{
	color: #a5a5a5;
}
.italic{
	font-style: italic;
}
.text-centre{
	text-align: center;
}
.grid-container{
	width: auto;
	display: grid;
	grid-template-columns: 8vw repeat(6, 1fr) 8vw;
	grid-auto-rows: auto;
	grid-gap: 16px 16px;
}
.grid-container-2{
	width: auto;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: auto;
	grid-gap: 88px;
}
.grid-container-3{
	width: auto;
	display: grid;
	grid-template-columns: 8vw repeat(6, 1fr) 8vw;
	grid-auto-rows: auto;
	grid-gap: 16px 0px;
}
.col-1-9{
	grid-column: 1 / 9;
}
.col-2-8{
	grid-column: 2 / 8;
}
.col-2-4{
	grid-column: 2 / 4;
}
.col-4-6{
	grid-column: 4 / 6;
}
.col-6-8{
	grid-column: 6 / 8;
}
.col-2-5{
	grid-column: 2 / 5;
}
.col-5-8{
	grid-column: 5 / 8;
}
.col-2-6{
	grid-column: 2 / 6;
}
.col-4-8{
	grid-column: 4 / 8;
}
.col-3-7{
	grid-column: 3 / 7;
}
.col-3-5{
	grid-column: 3 / 5;
}
.col-5-7{
	grid-column: 5 / 7;
}
.col-5-9{
	grid-column: 5 / 9;
}
.col-1-5{
	grid-column: 1 / 5;
}
.col-3-9{
	grid-column: 3 / 9;
}
.col-1-7{
	grid-column: 1 / 7;
}
.col-3-6{
	grid-column: 3 / 6;
}
.col-4-9 {
	grid-column: 4 / 9;
}
.col-4-7 {
	grid-column: 4 / 7;
}
.col-1-3 {
	grid-column: 1 / 3;
}
.col-3-8 {
	grid-column: 3 / 8;
}

.space-south{
	margin-bottom: 10em;
}
.space-south-half{
	margin-bottom: 5em;
}
.space-south-quarter{
	margin-bottom: 2.5em;
}
.spacer{
	height: 8.8em;
}
.pad-top{
	margin-top: 8.8em;
}
.fullscreen{
	height: 100vh;
}
.vertical-align{
	margin-top: 30vh;
}
.mobile{
	display: none;
}
.web{
	display: inherit;
}
#intro{
	height: 100vh;
}
#reel{
	background-color:  rgb(0, 0, 0);
	height: 100%;
}

/* VIDEO HERO -------------------------------------- */
.video-hero{
    height: 100vh;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#v-hero{
  -o-object-fit: cover;
  object-fit: cover;
  width: 100vw;
  height: 75vh;
}
#process{
	background-color:  rgba(218, 222, 224, 0.4);
}
#about{
/*	background-color: rgba(218, 222, 224, 0.4);*/
}
#rig {
	background-col or:  rgb(23, 23, 23);
}
#contact{
	padding-top: 8em;
	background-color:  rgb(0, 0, 0);
}
#break{
	padding-top: 8em;
}
.shift{
	margin-bottom: -16px;
}
.p-line{
	border-top: 2px solid #171717;
}
.line{
	border-top: 2px solid #171717;
}
.line-gap-1st{
	border-top: 2px solid #171717;
}
.line-gap-1st,
.line-gap-2nd{
	border-bottom: 2px solid #171717;
	padding: 1.75em 0em 1.74em 0em; 
}
.line-contact-1st{
	border-top: 2px solid rgb(247, 247, 247);
}
.line-contact-1st,
.line-contact-2nd{
	border-bottom: 2px solid rgb(247, 247, 247);
	padding: 1.75em 0em 1.74em 0em; 
}
.p-7{
	padding: 1.75em 0em 1.74em 0em; 
}
.rig-pad{
	padding: 8em 0em 8em 0em; 
}
@-webkit-keyframes fade-hero {
	from{
	  	opacity: 0;	
	}
	to{
	  	opacity: 1;	
	}
}
@keyframes fade-hero {
	from{
	  	opacity: 0;	
	}
	to{
	  	opacity: 1;	
	}
}
.hero-hide{
	opacity: 0;
}
.hero-show{

	-webkit-animation-name: fade-hero;
	animation-name: fade-hero;
	-webkit-animation-duration: 1.6s;
	animation-duration: 1.6s;

	-webkit-animation-timing-function: ease-in;

	animation-timing-function: ease-in;
	-webkit-animation-fill-mode:  backwards;
	animation-fill-mode:  backwards;
}

/* INTRO TEXT REVEAL -------------------------------------- */


/* INTRO TEXT REVEAL -------------------------------------- */
@-webkit-keyframes typeAnim {
	
	0%{
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	  	opacity: 0;	
	}
	50%{
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	  	opacity: 0;	
	}
	100%{
		-webkit-transform: translateY(0%) translateX(0%);
		transform: translateY(0%) translateX(0%);
	  	opacity: 1;
	}
}
@keyframes typeAnim {
	
	0%{
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	  	opacity: 0;	
	}
	50%{
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	  	opacity: 0;	
	}
	100%{
		-webkit-transform: translateY(0%) translateX(0%);
		transform: translateY(0%) translateX(0%);
	  	opacity: 1;
	}
}
.type-anim .char{
	overflow: hidden;
	color: transparent;
}
.type-anim .char:after {
	will-change: transform;
	visibility: visible;
	color: #171717;

	-webkit-animation-name: typeAnim;

	animation-name: typeAnim;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-delay: calc( 0.01s * ( var(--char-index)) );
	animation-delay: calc( 0.01s * ( var(--char-index)) );
	-webkit-animation-fill-mode:  backwards;
	animation-fill-mode:  backwards;
	-webkit-animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}
/* ------------------------------------------------------ */

.fixed-header {
	position: fixed;
	width: 100%;
	z-index: 8000;
	top: 0;
	margin-top: 1.5em;
	
}
.logo{
	grid-column: 2 / 4;
}
.menu{
	grid-column: 6 / 8;
	display: grid;
	grid-template-columns: repeat(5, auto);
	text-align: right;
	
}
.type-header{
	font-size: 1.5em;
	line-height: 1.50;
	letter-spacing: 0.01em;
	font-weight: 400;
}
a.link{
	background-image: -webkit-gradient(linear, left top, left bottom, from(currentColor), to(currentColor));
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	padding-bottom: 3px;
	background-size: 0% 2px;
	background-position: 100% 100%;
	-webkit-transition-property: background-size;
	transition-property: background-size;
	-webkit-transition-duration: .25s;
	transition-duration: .25s;
	-webkit-transition-timing-function: cubic-bezier(0,.40,.60,1);
	transition-timing-function: cubic-bezier(0,.40,.60,1);	
}
a.link:hover, a.active{
	background-size: 100% 2px;
	background-position: 0% 100%;
}
.end-section{
	height: 50vh;
	padding-top: 25vh;
}
@-webkit-keyframes revealAnim {
	from{
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	  	opacity: 0;	
	}
	to{
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	  	opacity: 1;	
	}
}
@keyframes revealAnim {
	from{
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	  	opacity: 0;	
	}
	to{
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	  	opacity: 1;	
	}
}
.hide{
	opacity: 0;
}
.show{
	-webkit-animation-name: revealAnim;
	animation-name: revealAnim;
	-webkit-animation-delay: .6s;
	animation-delay: .6s;
	-webkit-animation-duration: 1.2s;
	animation-duration: 1.2s;
	-webkit-animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	-webkit-animation-fill-mode:  backwards;
	animation-fill-mode:  backwards;
}

.tiles{
	overflow: hidden;
	height: 100%;
}
.tiles-container{
	width: 133%;
	height: 100%;
}
.tiles-row{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 22px;
}
.line-hide{
	opacity: 0;
}
.line-show{
	opacity: 1;
	-webkit-transition: opacity .9s ease-out;
	transition: opacity .9s ease-out;	
}
/* LOADING -------------------------------------- */
.display-none{
	display: none;
}
.overflow-hidden{
	overflow: hidden;
}
/* Media Query ------------------------------ */

/* Mobile ------------------------------ */
@media screen and (min-width: 0px) and (max-width: 480px){
	body{
		font-size: 12px;
	}
	.type-hero{
		text-align: center;
	}
	.type-hero-2{
		font-size: 2em;
		line-height: 1.31;
		margin-top: 0.75em;
		margin-bottom: 0.75em;
		text-align: center;
	}
	.mobile{
		display: inherit;
	}
	.web{
		display: none;
	}
	.grid-container{
		grid-template-columns: 12px repeat(2, 1fr) 12px;
		grid-auto-rows: auto;
		grid-gap: 12px 12px;
	}
	.grid-container-2{

		grid-template-columns: 12px repeat(2, 1fr) 12px ;
		grid-auto-rows: auto;
		grid-gap: 12px 12px;
	}
	.grid-container-3{

		grid-template-columns: 12px  repeat(2, 1fr) 12px;
		grid-auto-rows: auto;
		grid-gap: 12px 12px;
	}
	.col-1-9{
		grid-column: 1 / 5;
	}
	.col-2-8{
		grid-column: 2 / 4;
	}
	.col-2-4{
		grid-column: 2 / 4;
	}
	.col-4-6{
		grid-column: 2 / 4;
	}
	.col-6-8{
		grid-column: 2 / 4;
	}
	.col-2-5{
		grid-column: 2 / 3;
	}
	.col-5-8{
		grid-column: 3 / 4;
	}
	.col-2-6{
		grid-column: 2 / 4;
	}
	.col-4-8{
		grid-column: 2 / 4;
	}
	.col-3-7{
		grid-column: 2 / 4;
	}
	.col-3-5{
		grid-column: 2 / 4;
	}
	.col-5-7{
		grid-column: 2 / 4;
	}
	.col-5-9{
		grid-column: 2 / 4;
	}
	.col-1-5{
		grid-column: 2 / 4;
	}
	.col-3-9{
		grid-column: 2 / 4;
	}
	.col-1-7{
		grid-column: 2 / 4;
	}
	.col-3-6{
		grid-column: 2 / 4;
	}
	.col-4-9 {
		grid-column: 2 / 4;
	}
	.col-4-7 {
		grid-column: 2 / 4;
	}
	.col-1-3 {
		grid-column: 2 / 4;
	}
	.col-3-8 {
		grid-column: 2 / 4;
	}
	.space-south{
		margin-bottom: 5em;
	}
	.space-south-half{
		margin-bottom: 2.5em;
	}
	.vertical-align{
		margin-top: 25vh;
	}
	.logo{
		grid-column: 1 / 5;
		text-align: center;
	}
	.menu{
		grid-column: 1 / 5;
		text-align: center;
		margin-top: -8px;
	}
	.type-header{
		font-size: 1.3em;
	}
	.fixed-header {
		margin-top: 12px;
	}
}	
/* Tablet ------------------------------ */
@media screen and (min-width: 481px) and (max-width: 768px){
	body{
		font-size: 16px;
	}
		.type-hero{
		text-align: center;
	}
	.type-hero-2{
		font-size: 2em;
		line-height: 1.31;
		margin-top: 0.75em;
		margin-bottom: 0.75em;
		text-align: center;
	}
	.mobile{
		display: inherit;
	}
	.web{
		display: none;
	}
	.grid-container{
		grid-template-columns: 12px repeat(2, 1fr) 12px;
		grid-auto-rows: auto;
		grid-gap: 12px 12px;
	}
	.col-1-9{
		grid-column: 1 / 5;
	}
	.col-2-8{
		grid-column: 2 / 4;
	}
	.col-2-4{
		grid-column: 2 / 4;
	}
	.col-4-6{
		grid-column: 2 / 4;
	}
	.col-6-8{
		grid-column: 2 / 4;
	}
	.col-2-5{
		grid-column: 2 / 3;
	}
	.col-5-8{
		grid-column: 3 / 4;
	}
	.col-2-6{
		grid-column: 2 / 4;
	}
	.col-4-8{
		grid-column: 2 / 4;
	}
	.col-3-7{
		grid-column: 2 / 4;
	}
	.col-3-5{
		grid-column: 2 / 4;;
	}
	.col-5-7{
		grid-column: 2 / 4;;
	}
	.col-5-9{
		grid-column: 2 / 4;
	}
	.col-1-5{
		grid-column: 2 / 4;
	}
	.col-3-9{
		grid-column: 2 / 4;
	}
	.col-1-7{
		grid-column: 2 / 4;
	}
	.col-3-6{
		grid-column: 2 / 4;
	}
	.col-4-9 {
		grid-column: 2 / 4;
	}
	.col-4-7 {
		grid-column: 2 / 4;
	}
	.col-1-3 {
		grid-column: 2 / 4;
	}
	.col-3-8 {
		grid-column: 2 / 4;
	}
	.space-south{
		margin-bottom: 5em;
	}
	.space-south-half{
		margin-bottom: 2.5em;
	}
	.vertical-align{
		margin-top: 25vh;
	}
	.logo{
		grid-column: 1 / 5;
		text-align: center;
	}
	.menu{
		grid-column: 1 / 5;
		text-align: center;
		margin-top: -8px;
	}
	.type-header{
		font-size: 1.3em;
	}
	.fixed-header {
		margin-top: 12px;
	}
}
/* Desktop ----------------------------- */
@media screen and (min-width: 769px) and (max-width: 1599px){
	body{
		font-size: 16px;
	}
	
}
/* Inbetween --------------------------- */
@media screen and (min-width: 1600px) and (max-width: 1824px){
	body{
		font-size: 18px;
	}
	
}
/* Super-Wide -------------------------- */
@media screen and (min-width: 1825px){
	body{
		font-size: 18px;
	}
	.grid-container{
		grid-template-columns: 18vw repeat(6, 1fr) 18vw;
	}
	.grid-container-3{
		grid-template-columns: 18vw repeat(6, 1fr) 18vw;
	}
	
}
/* Media Query END -------------------------- */