
html, body {
	margin:0; padding: 0;
}

body {
	background-position:center;
	background-repeat: repeat;
	background-image:url(images/background_seamless.jpg);
	color:black;
	font-size:1.5vmax;
	line-height: 150%;
}

b {
	font-size:2vmax;
}

h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 2em;
}

h2 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 1.5em;
	font-weight: 1000;
	text-align: center;
	color: #ee3695;
}

.h2Text {
	margin-top: 0.5em;
	text-align: center;
}

img { border:none; margin:0; padding:0; line-height:0; }

div, img, ul, li, p, span, a {
	box-sizing: border-box;
	font-family: 'Kardia-Fit';
}

ul {
	margin:0;
	padding:1vh 0 0 3vh;
}

#main {
	position: relative;
	top:0;
	width:95vw;
	max-width: 1000px;
	margin:0 auto 4vh auto;
	text-align: center;
	background-color:#FFFFFF77;
	border-bottom-left-radius: 2vmin;
	border-bottom-right-radius: 2vmin;
	-webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.3);
	box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.3);
}

#language {
	text-align: right;
	padding-right:2%;
	font-size: 1.2vmax;
	cursor: pointer;
}

#language span {
	text-decoration: none;
	color:#333333;
}

#language span:hover {
	text-decoration: underline;
}

#media {
	width:100%;
	text-align: center;
}

video {
	width:100%;
}

#description {
	padding:3vmin 6vmin;
}

#about {
	padding-right:30%;
	text-align:left;
	background-repeat: no-repeat;
	background-size: 28% auto;
	background-image:url(images/BayWatch.png);
	background-position:right center;
}

.invitation-text {
	font-size: 1.2em;
}

.download-link {
	color:black;
}

#downloads {
	background-color:#FFFFFF88;
	padding:4vmin
}

#downloads a {
	display:inline-block;
	height:8vh;
	background-repeat: no-repeat;
	background-size:contain;
	background-position: center;
}

#android-download {
	background-image:url(images/googlestore.png);
	width:25vw;
	margin-right:3vw;
	max-width: 200px;
}

#ios-download {
	background-image:url(images/applestore.png);
	width:27vw;
	margin-left:3vw;
	max-width: 220px;
}

#trailer {
	position:relative;
	text-align:left;
	padding: 3vmin 6vmin;
}

#trailer-video {
	background-color:gainsboro;
	margin-top:1vh;
}

#trailer-video video {
	width:100%;
}

#screenshots {
	position:relative;
	text-align:left;
	padding: 3vmin 6vmin;
}

#screenshots img {
	width:100%;
	margin-bottom:1vh;
}

#footer {
	background-color:#FFFFFF77;
	border-bottom-left-radius: 2vmin;
	border-bottom-right-radius: 2vmin;
	font-size:1vmax;
	color:#888888;
}

#footer a, #footer a:visited, #footer a:active {
	text-decoration: none;
	color:#333333;
}

#footer a:hover {
	text-decoration: underline;
}

#wip-badge {
	position:fixed;
	bottom:7vh;
	right:0;
	background-color:red;
	color:white;
	padding:1vmin 2vmin;
	text-align:right;
}

body.de .en {
	display:none;
}

body.en .de {
	display:none;
}

#particles {
	position:absolute;
	top:0;
	width:100%;
	overflow:hidden;
}

.particle {
	position:absolute;
	width: 100px;
	height:100px;
	background-blend-mode: multiply;
	background-image: url(images/particle.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position-x: -100px;
	background-position-y: center;
	transform-origin: 50% 50%;
	transform:translate(100px, 400px) rotate(120deg);
}

@media screen and (min-width: 1000px) {
	body {
		font-size:1.5vmin;
	}
	b {
		font-size:2vmin;
	}

	#footer {
		font-size:1vmin;
	}
	#language {
		font-size:1.2vmin;
	}
}

@media (orientation: portrait) {
	#about {
		background:none;
		padding-right:0;
	}

	#features {
		background:none;
		padding-left:0;
	}
}

@font-face {
	font-family: 'Kardia-Fit';
	src: url('fonts/Kardia-Fit.woff') format('woff'),
		url('fonts/Kardia-Fit.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
