@font-face {
	font-family: "cryptdrive_font";
	src: url("../fonts/cd.ttf") format("truetype");
}

@font-face {
	font-family: 'freakycms_font';
	src: url("../fonts/fr.ttf") format("truetype");
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

* {
	box-sizing: border-box;
	line-height: 1.428571429;
}
body {
	background-color:black;
	margin:0px;
}

@media (orientation: portrait) {
	#landingpage-header {
		position:relative;
		height:100vh;
		width:100vw;
		z-index: 20;
		background-color: rgba(0,0,0,0.2);
	}

	#logo-text {
		top:calc(52vmin + (100vh - 100vw) / 2);
		height:100vh;
		font-family: cryptdrive_font, Helvetica;
		font-size: 11vmin;
		font-weight: 100;
		color:white;

		position: absolute;
		width:100vw;
		text-align: center;
		z-index:10;
		margin-top:0px;
	}

	#logo-short {
		top:calc(60vmin + (100vh - 100vw) / 2);
		height:100vh;
		font-family: cryptdrive_font, Helvetica;
		font-weight: 100;
		color:rgb(150,150,150);

		position: fixed;
		z-index:30;
	}
}

@media (orientation: landscape) {
	#landingpage-header {
		position:relative;
		width:100vw;
		height:100vh;
		z-index: 20;
		background-color: rgba(0,0,0,0.2);
	}

	#logo-text {
		top:42vmin;
		height:100vh;
		font-family: cryptdrive_font, Helvetica;
		font-size: 11vmin;
		font-weight: 100;
		color:white;

		position: absolute;
		width:100vw;
		text-align: center;
		z-index:10;
		margin-top:0px;
	}

	#logo-short {
		top:60vmin;
		height:100vh;
		font-family: cryptdrive_font, Helvetica;
		font-weight: 100;
		color:rgb(150,150,150);

		position: fixed;
		z-index:30;
	}
}

#logo-text-crypt {
	letter-spacing: 3.7vmin;
}

#logo-text-space {
	letter-spacing: 2.3vmin;
}

@media (orientation: portrait) {
	#landingpage-image-box {
		position:fixed;
		margin-top:calc(((100vh - 100vw) / 2) + 20vmin);
		width:80vmin;
		height:80vmin;
		margin-left:calc((100vw - 80vmin) / 2);
		z-index: -10;
		overflow: hidden;
		background-color:black;
	}
}

@media (orientation: landscape) {
	#landingpage-image-box {
		position:fixed;
		margin-top:calc((100vh - 80vmin) / 2);
		width:80vmin;
		height:80vmin;
		margin-left:calc((100vw - 80vmin) / 2);
		z-index: -10;
		background-color:black;
		overflow: hidden;
	}
}

#landingpage-image-space-station {
	position: absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	z-index: 0;

}

#landingpage-image-satellite {
	position: absolute;
	top:10px;
	left:0px;
	width:100%;
	height:100%;
	z-index: -10;
}

#landingpage-image-earth {
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index: -20;
}

#logo-short-inline-1 {
	font-family: cryptdrive_font, Helvetica;
	font-size: 10vmin;
	font-weight: 100;
	color:rgb(255,255,255);
	top:-1.4vmin;
	position: absolute;
	z-index:30;
}

#landingpage-arrow {
	position:absolute;
	text-align:center;
	width:100vw;
	top:93vh;
	z-index:100;
}

#landingpage-arrow:hover {
	cursor:pointer;
}

#landingpage-arrow > img {
	width:5vmin;
	height:5vmin;
}

#landingpage-background-black {
	background-color:rgba(0,0,0,1);
	/*-webkit-backdrop-filter: blur(5px);*/
	color:white;
	padding-bottom:20px;
	z-index:50;
	position:relative;
}

@media (min-width: 769px) {

	#landingpage-header {
		margin-bottom: 8vmin;
	}

	#navbar {
		position:absolute;
		width:100vw;
		height:8vmin;
		background-color:rgb(0, 0, 0);
		margin:0px;
		padding:0px;
		overflow:hidden;
		z-index: 100;
		top:-8vmin;
		border-style: solid;
		border-width: 0px;
		border-top-width: 0.5vmin;
		border-top-color: rgb(150, 150, 150);
	}

	#navbarFixed {
		position:fixed;
		width:100vw;
		height:8vmin;
		background-color:rgb(50, 50, 50);
		margin:0px;
		padding:0px;
		overflow:hidden;
		z-index: 100;
		top:0px;
		transform: translateY(-100%);
		border-style: solid;
		border-width: 0px;
		border-top-width: 0.5vmin;
		border-top-color: rgb(50, 50, 50);
	}

	#navbarFixed.cryptspacenavbar-fixed {
		transform: translateY(0%);
	}

	#logo-short-c {
		position: absolute;
		width: 7.5vmin;
		height: 7.5vmin;
		text-align: center;
		margin-left: calc((100vw - 11.25vmin) / 2);
		z-index: 1;
		font-size: 7.5vmin;
	}

	#logo-short-s {
		position: absolute;
		width: 7.5vmin;
		height: 7.5vmin;
		margin-left: calc((100vw - 3.75vmin) / 2);
		text-align: center;
		z-index: 1;
		color:rgb(50,50,50);
		font-size: 7.5vmin;
	}

	#logo-short-lock {
		position: absolute;
		height:5.5vmin;
		width:3.75vmin;
		background-color:rgb(255, 255, 255);
		z-index: 0;
		margin-left: calc(100vw / 2);
		margin-top: 2.4vmin;
		text-align: center;
		border-top-right-radius: 1vmin;
		border-bottom-right-radius: 1vmin;
		border-top-left-radius: 1vmin;
		border-bottom-left-radius: 1vmin;
	}

	#product-section-1 {
		height:calc(100vh - 8vmin);
		background-color:#6E7F91;
		position:relative;
	}

	#product-section-2 {
	  height:calc(100vh - 8vmin);
		background-color:#8FBC8F;
		position:relative;
	}

	#lead-cryptdrive-box {
		position: absolute;
		background-color:white;
		width:43vmin;
		height:8.5vmin;
		/*padding-left:2vmin;*/
		text-align: center;
		overflow: hidden;
		right:50.5vw;
		top:10vmin;
		border-top-right-radius: 1vmin;
		border-bottom-right-radius: 1vmin;
		border-top-left-radius: 1vmin;
		border-bottom-left-radius: 1vmin;
	}

	#lead-freaky-box {
		position: absolute;
		background-color:white;
		width:43vmin;
		height:8.5vmin;
		/*padding-left:2vmin;*/
		text-align: center;
		overflow: hidden;
		right:50.5vw;
		top:10vmin;
		border-top-right-radius: 1vmin;
		border-bottom-right-radius: 1vmin;
		border-top-left-radius: 1vmin;
		border-bottom-left-radius: 1vmin;
	}

	#cryptdrive-text {
		position: absolute;
		width:41vmin;
		padding-left:1.5vmin;
		padding-right:1.5vmin;
		padding-top:1.5vmin;
		right:calc(50.5vw + 1vmin);
		top:18.5vmin;
		font-size:2.5vmin;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
		background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255, 0.036) 50%, rgba(255,255,255,0.0) 100%);
		border-bottom-right-radius: 0.3vmin;
		border-bottom-left-radius: 0.3vmin;
	}

	#freaky-text {
		position: absolute;
		width:41vmin;
		padding-left:1.5vmin;
		padding-right:1.5vmin;
		padding-top:1.5vmin;
		right:calc(50.5vw + 1vmin);
		top:18.5vmin;
		font-size:2.5vmin;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
		background: linear-gradient(to bottom, rgba(255,255,255,0.2) 0%, rgba(255,255,255, 0.036) 50%, rgba(255,255,255,0.0) 100%);
		border-bottom-right-radius: 0.3vmin;
		border-bottom-left-radius: 0.3vmin;
	}

	#cryptdrive-link-box {
		position:relative;
		height:8vmin;
		left:-1.5vmin;
	}

	#freaky-link-box {
		position:relative;
		height:8vmin;
		left:-1.5vmin;
	}

	#cryptdrive-link {
		position:absolute;
		font-size:2.5vmin;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
		background-color:white;
		bottom:0px;
		width:41vmin;
		height:4vmin;
		padding:0.2vmin 0.5vmin 0.2vmin 0.5vmin;
		border-top-right-radius: 0.3vmin;
		border-bottom-right-radius: 0.3vmin;
		border-top-left-radius: 0.3vmin;
		border-bottom-left-radius: 0.3vmin;
		text-align: center;
		transition: all 0.3s;
		overflow:hidden;
		color:#6495ed;
		text-decoration: none;
	}

	#freaky-link {
		position:absolute;
		font-size:2.5vmin;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
		background-color:white;
		bottom:0px;
		width:41vmin;
		padding:0.2vmin 0.5vmin 0.2vmin 0.5vmin;
		border-top-right-radius: 0.3vmin;
		border-bottom-right-radius: 0.3vmin;
		border-top-left-radius: 0.3vmin;
		border-bottom-left-radius: 0.3vmin;
		text-align: center;
		transition: all 0.3s;
		overflow:hidden;
		color:#8FBC8F;
		text-decoration: none;
	}

	#cryptdrive-link:hover {
		background-color:rgba(255, 255, 255, 0.7);
	}

	#freaky-link:hover {
		background-color:rgba(255, 255, 255, 0.7);
	}

	#cryptdrive-image-mobile {
		display:none;
	}

	#freaky-image-mobile {
		display:none;
	}

	.demoPictureTop {
		position:relative;
		width:40vw;
		height:24.2vw;
		margin-top:calc(((100vh - 8vmin) - (2 * 24.2vw)) / 3);
		margin-bottom:calc(((100vh - 8vmin) - (2 * 24.2vw)) / 6);
	}

	.demoPictureBottom {
		position:relative;
		width:40vw;
		height:24.2vw;
		margin-top:calc(((100vh - 8vmin) - (2 * 24.2vw)) / 6);
		margin-bottom:calc(((100vh - 8vmin) - (2 * 24.2vw)) / 3);
	}

	#lead-cryptdrive {
		position:relative;
		height:8vmin;
		margin:0px;
		margin-left:-0.9vmin;
		top:0.5vmin;
	}

	#lead-freaky {
		position:relative;
		font-family: freakycms_font;
		color:#8FBC8F;
		font-size:6vmin;
		margin:0px;
		margin-left:1vmin;
		top:0vmin;
	}
}

@media (min-width: 769px) and (max-width: 1440px) {
	#cryptdrive-image {
		position: absolute;
		width:40vw;
		left:calc(55vw);
		top:0vmin;
		height:calc(100vh - 8vmin);
		overflow:hidden;
		background-color:rgba(255, 255, 255, 0.2);

		background-image: url("../img/webp/frame-crypt.webp");
		background-repeat: no-repeat;
		background-position: 55vw calc(((100vh - 8vmin - 50.125vw) / 2) + 8vmin);
		background-size: 40vw 50.125vw;
		background-attachment: fixed;
	}

	#freaky-image {
		position: absolute;
		width:40vw;
		left:calc(55vw);
		top:0vmin;
		height:calc(100vh - 8vmin);
		overflow:hidden;
		background-color:rgba(255, 255, 255, 0.2);

		background-image: url("../img/webp/frame-freaky.webp");
		background-repeat: no-repeat;
		background-position: 55vw calc(((100vh - 8vmin - 50.125vw) / 2) + 8vmin);
		background-size: 40vw 50.125vw;
		background-attachment: fixed;
	}
}

@media (min-width: 1441px) {
	#cryptdrive-image {
		position: absolute;
		width:576px;
		left:calc(55vw);
		top:0vmin;
		height:calc(100vh - 8vmin);
		overflow:hidden;
		background-color:rgba(255, 255, 255, 0.2);

		background-image: url("../img/webp/frame-crypt.webp");
		background-repeat: no-repeat;
		background-position: 55vw calc(((100vh - 8vmin - 721px) / 2) + 8vmin);
		background-size: 576px 721px;
		background-attachment: fixed;
	}

	#freaky-image {
		position: absolute;
		width:576px;
		left:calc(55vw);
		top:0vmin;
		height:calc(100vh - 8vmin);
		overflow:hidden;
		background-color:rgba(255, 255, 255, 0.2);

		background-image: url("../img/webp/frame-freaky.webp");
		background-repeat: no-repeat;
		background-position: 55vw calc(((100vh - 8vmin - 721px) / 2) + 8vmin);
		background-size: 576px 721px;
		background-attachment: fixed;
	}
}

.no-webp #cryptdrive-image {
	background-image: url("../img/frame-crypt.png");
}

.no-webp #freaky-image {
	background-image: url("../img/frame-freaky.png");
}

@media (max-width: 768px) {

	#landingpage-header {
		margin-bottom: 10.5vmin;
	}

	#navbar {
		position:absolute;
		width:100vw;
		height:10.5vmin;
		background-color:rgb(0, 0, 0);
		margin:0px;
		padding:0px;
		overflow:hidden;
		z-index: 100;
		top:-10.5vmin;
		border-style: solid;
		border-width: 0px;
		border-top-width: 0.5vmin;
		border-top-color: white;
	}

	#navbarFixed {
		position:fixed;
		width:100vw;
		height:10.5vmin;
		background-color:rgb(50, 50, 50);
		margin:0px;
		padding:0px;
		overflow:hidden;
		z-index: 100;
		top:0px;
		transform: translateY(-100%);
		border-style: solid;
		border-width: 0px;
		border-top-width: 0.5vmin;
		border-top-color: rgb(50, 50, 50);
	}

	#navbarFixed.cryptspacenavbar-fixed {
		transform: translateY(0%);
	}

	#logo-short-c {
		position: absolute;
		width: 10vmin;
		height: 10vmin;
		text-align: center;
		margin-left: calc((100vw - 15vmin) / 2);
		z-index: 1;
		font-size: 10vmin;
	}

	#logo-short-s {
		position: absolute;
		width: 10vmin;
		height: 10vmin;
		margin-left: calc((100vw - 5vmin) / 2);
		text-align: center;
		z-index: 1;
		color:rgb(50,50,50);
		font-size: 10vmin;
	}

	#logo-short-lock {
		position: absolute;
		height:7.3vmin;
		width:5vmin;
		background-color:rgb(255, 255, 255);
		z-index: 0;
		margin-left: calc(100vw / 2);
		margin-top: 3.2vmin;
		text-align: center;
		border-top-right-radius: 1vmin;
		border-bottom-right-radius: 1vmin;
		border-top-left-radius: 1vmin;
		border-bottom-left-radius: 1vmin;
	}

	#product-section-1 {
		min-height:calc(100vh - 10.5vmin);
		background-color:#6E7F91;
		position:relative;
	}

	#product-section-2 {
		min-height:calc(100vh - 10.5vmin);
		background-color:#8FBC8F;
		position:relative;
	}

	#lead-cryptdrive-box {
		position: absolute;
		background-color:white;
		width:100vw;
		height:15vmin;
		padding-left:2vmin;
		overflow: hidden;
	}

	#lead-freaky-box {
		position: absolute;
		background-color:white;
		width:100vw;
		height:15vmin;
		padding:0px;
		padding-left:2vmin;
		overflow: hidden;
	}

	#cryptdrive-text {
		position: relative;
		width:75vw;
		font-size:5vmin;
		top:20vmin;
		left:10vw;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
	}

	#freaky-text {
		position: relative;
		width:75vw;
		font-size:5vmin;
		top:20vmin;
		left:10vw;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
	}

	#cryptdrive-link-box {
		position:relative;
		height:10vmin;
		width:70vw;
		left:5vw;
		margin-top:2vmin;
	}

	#freaky-link-box {
		position:relative;
		height:10vmin;
		width:70vw;
		left:5vw;
		margin-top:2vmin;
	}

	#cryptdrive-link {
		position:absolute;
		font-size:5vmin;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
		background-color:white;
		bottom:0px;
		width:100%;
		padding:0.2vmin;
		border-top-left-radius: 0.5vmin;
		border-bottom-left-radius: 0.5vmin;
		border-top-right-radius: 0.5vmin;
		border-bottom-right-radius: 0.5vmin;
		text-align:center;
		color:#6495ed;
		text-decoration: none;
	}

	#freaky-link {
		position:absolute;
		font-size:5vmin;
		font-family: 'Open Sans', sans-serif;
		font-weight:300;
		background-color:white;
		bottom:0px;
		width:100%;
		padding:0.2vmin;
		border-top-left-radius: 0.5vmin;
		border-bottom-left-radius: 0.5vmin;
		border-top-right-radius: 0.5vmin;
		border-bottom-right-radius: 0.5vmin;
		text-align:center;
		color:#8FBC8F;
		text-decoration: none;
	}

	#cryptdrive-link:hover {
		background-color:rgba(255, 255, 255, 0.7);
	}

	#freaky-link:hover {
		background-color:rgba(255, 255, 255, 0.7);
	}

	#cryptdrive-image {
		display:none;
	}

	#freaky-image {
		display:none;
	}

	#cryptdrive-image-mobile {
		position:relative;
		width:100vw;
		top:22vmin;
		padding-bottom:24vmin;
	}

	#freaky-image-mobile {
		position:relative;
		width:100vw;
		top:22vmin;
		padding-bottom:24vmin;
	}

	.demoPictureTop-mobile {
		position:relative;
		width:90vw;
		left:5vw;
		margin-top:2vw;
		margin-bottom:1vw;
	}

	.demoPictureBottom-mobile {
		position:relative;
		width:90vw;
		left:5vw;
		margin-top:1vw;
		margin-bottom:2vw;
	}

	#lead-cryptdrive {
		/*position:relative;
		font-family: cryptdrive_font, Helvetica;
		color:#608A9E;
		font-size:10vmin;
		margin:0px;
		top:0.8vmin;*/
		position:relative;
		height:12vmin;
		margin:0px;
		top:2vmin;
	}

	#lead-freaky {
		position:relative;
		font-family: freakycms_font;
		color:#8FBC8F;
		font-size:10vmin;
		margin:0px;
		top:0vmin;
	}

	.lead {
		text-align: center;
	}
}

#cryptdrive-link:hover {
    text-decoration: none;
}

#freaky-link:hover {
    text-decoration: none;
}

footer {
	text-align:center;
	margin-top:20px;
	color:white;
	font-family: cryptdrive_font, Helvetica;
}

.footer_links {
	letter-spacing: 5px;
	font-size: 20px;
}

footer p {
	color:white;
	text-decoration: none;
	font-family: 'Open Sans', sans-serif;
}

#hidden-lead-cryptdrive {
	/*font-size: 0px;*/
}