/* 16 px = 1 em */

* {
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

li {
	list-style-type: none;
}

body, span, h1, h2, h3, h4, h5, h6, p, a, img {
	border: none;
	padding: 0;
	margin: 0;
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p, a {
	font-family: 'Roboto', sans-serif;
}

h1 {
	text-align: center;
	font-weight: 100;
	font-size: 1.5em;
    text-transform: normal;
	color: white;
}

h2 {
	text-align: center;
	font-weight: 400;
	font-size: 5em;
	text-transform: normal;
	margin-bottom: 1vh;
	/*letter-spacing: -0.025em;*/
	color: rgba(232, 108, 36, 1);
}

h3 {
	text-align: center;
	font-weight: 300;
	font-size: 0.75em;
	text-transform: uppercase;
	color: white;
	opacity: 0.75;
}

.logoPic {
	width: 20vw;
	height: auto;
	margin-top: 10vh;
	margin-left: 40vw;
}

.content {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

.relevantContent {
	width: 60vw;
	height: auto;
	position: absolute;
	margin-left: 20vw;
	margin-top: 27.5vh;
}

.text1 {
	width: 15vw;
	height: auto;
}

.text2 {
	width: 15vw;
	height: auto;
	margin-left: 7.5vw;
}

.text3 {
	width: 15vw;
	height: auto;
	margin-left: 7.5vw;
}

.svgLine {
	width: 60vw;
	height: 0.4vh;
	margin-top: 15vh;
}

.clockContent {
	width: 50vw;
	height: 35vh;
	position: absolute;
	margin-left: 25vw;
}

.clockSpacing {
	width: 100%;
	height: auto;
	margin: auto;
}

.clockPos {
	width: 12.5vw;
	height: auto;
}

.clock {
	margin-top: -1vh;
}

.floatLeft {
	float: left;
}

.floatRight {
	float: right;
}

.floatCenter {
	margin: auto;
	text-align: center;
}

.absolute {
	position: absolute;
}

.displayBlock {
	display: block;
}

.displayNone {
	display: none !important
}

.clearFix:after {
	display: table;
	clear: both;
	content: " ";
}

.grid50 {
	width: 50vw;
}

.grid25 {
	width: 25vw;
}

@media only screen and (orientation: portrait) and (max-width: 64em) {
	h1 {
		font-size: 1em;
		font-weight: 300;
	}

	h2 {
		font-size: 2em;
	}

	h3 {
		font-size: 0.25em;
	}

	.logoPic {
		width: 50vw;
		height: auto;
		margin-top: 5vh;
		margin-left: 25vw;
	}

	.relevantContent {
		width: 90vw;
		margin-left: 5vw;
		margin-top: 20vh;
	}

	.text1 {
		width: 70vw;
		margin-left: 10vw;
	}

	.text2 {
		width: 70vw;
		margin-left: 10vw;
		margin-top: 7.5vh;
	}

	.text3 {
		width: 70vw;
		margin-left: 10vw;
		margin-top: 7.5vh;
	}

	.svgLine {
		width: 90vw;
		height: 0.5vh;
		margin-top: 10vh;
	}

	.clockContent {
		width: 90vw;
		height: 20vh;
		margin-left: 5vw;
	}

	.clockPos {
		width: 22.5vw;
	}

	.background {
		white-space: nowrap;
	}

	body:before {
		content: "";
		display: block;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: -10;
		background: url(assets/backgroundPicture/backgroundBlur.jpg) no-repeat center center;
		-webkit-background-size: auto 100vh;
		-moz-background-size: auto 100vh;
		-o-background-size: auto 100vh;
		background-size: auto 100vh;
		-webkit-transition: all 0.5s ease-in;
		-o-transition: all 0.5s ease-in;
		transition: all 0.5s ease-in;
		-webkit-filter: grayscale(100%) brightness(100%);
	    filter: grayscale(100%) brightness(100%);
	}

	div.backgroundPic2 {
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url(assets/helpPicture/grid.png) repeat center center;
		-webkit-background-size: 30%;
		-moz-background-size: 30%;
		-o-background-size: 30%;
		background-size: 30%;
		opacity: 0.5;
	}
}

@media only screen and (orientation: landscape) and (min-width: 0em) {
	div.backgroundPic1 {
		width: 104vw;
		height: 104vh;
		position: absolute;
		margin: -2vh -4vh -4vh -2vh;
		background-image: url(assets/backgroundPicture/background.jpg);
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-position: 50% 75%;
		background-size: cover;
		-webkit-transition: all 0.5s ease-in;
		-o-transition: all 0.5s ease-in;
		transition: all 0.5s ease-in;
		-webkit-filter: grayscale(100%) brightness(100%) blur(0.6vh);
	    filter: grayscale(100%) brightness(100%) blur(0.6vh);
	}

	div.backgroundPic2 {
		width: 100%;
		height: 100%;
		position: absolute;
		background-image: url(assets/helpPicture/grid.png);
		background-repeat: repeat;
		background-attachment: scroll;
		background-position: center;
		background-size: 12%;
		overflow: hidden;
		opacity: 0.5;
	}

	.background {
		width: 100vw;
		height: 100vh;
		position: absolute;
		overflow: hidden;
	}
}