/* -------------------------------------------------- STYLE RESET -------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	box-sizing: border-box;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	text-decoration: none;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

@font-face {
  font-family: 'ClashGrotesk-Variable';
  src: url('../fonts/ClashGrotesk-Variable.woff2') format('woff2'),
       url('../fonts/ClashGrotesk-Variable.woff') format('woff'),
       url('../fonts/ClashGrotesk-Variable.ttf') format('truetype');
       font-weight: 200 700;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'ClashGrotesk-Extralight';
  src: url('../fonts/ClashGrotesk-Extralight.woff2') format('woff2'),
       url('../fonts/ClashGrotesk-Extralight.woff') format('woff'),
       url('../fonts/ClashGrotesk-Extralight.ttf') format('truetype');
       font-weight: 200;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'ClashGrotesk-Light';
  src: url('../fonts/ClashGrotesk-Light.woff2') format('woff2'),
       url('../fonts/ClashGrotesk-Light.woff') format('woff'),
       url('../fonts/ClashGrotesk-Light.ttf') format('truetype');
       font-weight: 300;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'ClashGrotesk-Regular';
  src: url('../fonts/ClashGrotesk-Regular.woff2') format('woff2'),
       url('../fonts/ClashGrotesk-Regular.woff') format('woff'),
       url('../fonts/ClashGrotesk-Regular.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'ClashGrotesk-Medium';
  src: url('../fonts/ClashGrotesk-Medium.woff2') format('woff2'),
       url('../fonts/ClashGrotesk-Medium.woff') format('woff'),
       url('../fonts/ClashGrotesk-Medium.ttf') format('truetype');
       font-weight: 500;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'ClashGrotesk-Semibold';
  src: url('../fonts/ClashGrotesk-Semibold.woff2') format('woff2'),
       url('../fonts/ClashGrotesk-Semibold.woff') format('woff'),
       url('../fonts/ClashGrotesk-Semibold.ttf') format('truetype');
       font-weight: 600;
       font-display: swap;
       font-style: normal;
}


@font-face {
  font-family: 'ClashGrotesk-Bold';
  src: url('../fonts/ClashGrotesk-Bold.woff2') format('woff2'),
       url('../fonts/ClashGrotesk-Bold.woff') format('woff'),
       url('../fonts/ClashGrotesk-Bold.ttf') format('truetype');
       font-weight: 700;
       font-display: swap;
       font-style: normal;
}

body{
	background:	#000;
}

.wrapper{
	width:1020px;
	height: auto;
	margin: 0 auto;
}

/* -------------------------------------------------- HEADER -------------------------------------------------- */

.topheader{
	padding:0 50px;
    background:#000;
    height:70px;
	position:fixed;
	width:100%;
	z-index:100000;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.legacy-link{
	font-family: 'ClashGrotesk-Bold';
	font-style: normal;
	font-size: 14px;
	line-height: 16px;
	letter-spacing: 0.05em;
	color: #FFFFFF;
	display: flex;
}

.legacy-link img{
	margin:0 0 0 5px;
}

/* -------------------------------------------------- top -------------------------------------------------- */

#top{
	width:100%;
	height: 100vh;
	background: url("../images/background-image.png") no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 75px;
}

.main-title{
	font-family: 'ClashGrotesk-Semibold';
	font-style: normal;
	font-size: 48px;
	line-height: 57px;
	color: #FFFFFF;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------- our journey -------------------------------------------------- */

#our-journey{
	width:100%;
	height: auto;
	overflow: hidden;
	background:#000;
	padding: 0 0 150px;
}

.wrapper-large{
	width:1140px;
	margin: 0 auto;
	overflow: hidden;
	position:relative;
}

.wrapper-large .wrapper-small{
	width:863px;
}

.subtitle{
	font-family: 'ClashGrotesk-Semibold';
	font-style: normal;
	font-size: 48px;
	line-height: 65px;
	color: #FFFFFF;
	margin: 75px 0;
}

.journey-section{
	margin: 0 0 80px;
}

.journey-date-wrapper{
	display:flex;
	align-items: center;
}

.vertical-line{
	position:absolute;
	left:0;
	width:2px;
	height: 874px;
	background: #4C4C4C;
	top:22px;
}

.line{
	width:40px;
	height: 2px;
	background:#4C4C4C;
	margin: 0 20px 0 -60px;
}

.journey-date{
	font-family: 'Hanken Grotesk', sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 36px;
	line-height: 43px;
	letter-spacing: -0.04em;
	color: #FFFFFF; 
	margin: 0;
	padding: 0;
}

.journey-date-special{
	font-size: 48px !important;
	line-height: 58px !important;
}

.journey-title{
	font-family: 'Hanken Grotesk', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	color: #FFFFFF;
	margin: 0;
	padding: 0;
}

.journey-link{
	color: #8686FF;
	text-decoration: underline;
}

.wrapper-smallest{
	width:481px;
}

.steam-title{
	font-family: 'ClashGrotesk-Semibold';
	font-size: 48px;
	line-height: 57px;
	letter-spacing: -0.01em;
	color: #FFFFFF;
	margin: 0 0 30px;
}

.button{
	background: #5FAD22;
	padding: 15px 30px;
	font-family: 'ClashGrotesk-Semibold';
	font-size: 14px;
	line-height: 14px;
	letter-spacing: 0.06em;
	color: #FFFFFF;
	display: inline-block;
}

.button span{
	display: flex;
}

/* -------------------------------------------------- coming-soon -------------------------------------------------- */

#coming-soon{
	width:100%;
	height: auto;
	overflow: hidden;
	background:#fff;
	padding: 100px 0;
}

.coming-title{
	font-family: 'ClashGrotesk-Semibold';
	font-size: 48px;
	line-height: 65px;
	color: #000000;
	margin: 0 0 30px;
	width:624px;
}

.coming-p{
	font-family: 'Hanken Grotesk', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 36px;
	color: #242528;
	margin: 0 0 30px;
}

.coming-soon-wrapper{
	width:640px;
}

.logos{
	display:flex;
	align-items: center;
	margin: 0 0 50px;
	opacity: 0.4;
}

.logos img{
	margin: 0 25px 0 0;
}

.full-image{
	width:100%;
}

#footer{
	width:100%;
	display: flex;
	justify-content: space-between;
	padding: 50px;
	background: #000000;
}

.footer-title{
	font-family: 'Hanken Grotesk', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 26px;
	color: #5E6062;
	margin: 0 0 20px;
}

.footer-p{
	font-family: 'Hanken Grotesk', sans-serif;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 14px;
	letter-spacing: 0.02em;
	color: #FFFFFF;
	margin: 0 0 100px;
	display: block;
}

.logo-footer{
	margin: 0 0 40px;
}

.copyright{
	font-family: 'Hanken Grotesk', sans-serif;
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	line-height: 23px;
	letter-spacing: 0.01em;
	color: #FFFFFF;
	opacity: 0.7;
}

/* -------------------------------------------------- 1250 -------------------------------------------------- */

@media (max-width:1100px){
	.wrapper {
		width: 700px;
	}
	
	.main-title {
		font-size: 32px;
		line-height: 46px;
	}
	
	.wrapper-large {
		width: 760px;
	}
	
	.wrapper-large .wrapper-small {
		width: 650px;
	}
	
	.vertical-line {
		height: 1018px;
	}
}

@media (max-width:775px){
	.wrapper {
		width: 300px;
	}
	
	.main-title {
		font-size: 32px;
		line-height: 46px;
	}
	
	.wrapper-large {
		width: 300px;
	}
	
	.wrapper-large .wrapper-small {
		width: 300px;
	}
	
	.main-title {
		font-size: 27px;
		line-height: 36px;
	}
	
	.topheader {
		padding: 0 20px;
		height: 50px;
	}
	
	.legacy-link {
		font-size: 12px;
	}
	
	.vertical-line {
		display: none;
	}
	
	.line {
		display: none;
	}
	
	.journey-title {
		font-size: 18px;
		line-height: 32px;
	}
	
	.wrapper-smallest {
		width: 300px;
	}
	
	.steam-title {
		font-size: 28px;
		line-height: 38px;
	}
	
	.button {
		padding: 15px 15px;
		font-size: 10px;
		line-height: 15px;
	}
	
	.coming-soon-wrapper {
		width: 300px;
	}
	
	.coming-title {
		font-size: 28px;
		line-height: 38px;
		width: 100%;
	}
	
	.logos {
		display: block;
	}
	
	.logos img {
		margin: 0 0 20px 0;
		display: block;
	}
	
	.coming-p {
		font-size: 18px;
		line-height: 30px;
	}
	
	.footer-right{
		display: none;
	}
}