/*--------------------------------------------------------------
# General / Primary Content
--------------------------------------------------------------*/

* {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

body {
  background-color: #000;
	font-family: "Roboto", sans-serif;
	font-weight:300;
  min-height: 100vh;
}

.container {
  flex: 1 0 auto;
}

a {
	color: #09c;
	text-decoration: none;
	transition: all 0.3s;
	font-weight:400;
}

	a:hover {
		color: #0cf;
		text-decoration: none;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: "Roboto", sans-serif;
	text-transform:uppercase;
}

.nobreak {
	white-space:nowrap;
}

.login {
	width:1400px;
	left: 50%;
	transform: translateX(-50%);
	padding:10px;
	position:fixed;
	z-index:9999;
	color:#ccc;
	font-size:18px;
	text-align:right;
}

@media (max-width: 1400px) {
	.login {
		width:100%;
	}
}

#splash {
	height: 100vh;
	width: 100%;
	background: url("../img/bg/nebula-splash.jpg") center center;
	background-size: cover;
	position: absolute;
	padding: 0;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: pulse 23s;
	animation: pulse 23s;
	-webkit-animation-direction: forwards;
	animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

@keyframes pulse {
	0%, 5% {
		filter: grayscale(70%);
	}
	5.2% {
		filter: grayscale(10%);
	}
	8%, 10% {
		filter: grayscale(70%);
	}
	50% {
		filter: grayscale(10%);
	}
	100% {
		filter: grayscale(70%);
	}
}

@keyframes gradualpulse {
	0% {
		filter: grayscale(70%);
	}
	50% {
		filter: grayscale(10%);
	}
	100% {
		filter: grayscale(70%);
	}
}

#splash-zone {
	position:absolute;
	height:300px;
	width:300px;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo-text {
		position:absolute;
		height:60px;
		width:495px;
		top: 340px;
		left: 50%;
		transform: translate(-50%, 0%);
}

@media (max-width: 768px) {
	#splash-zone {
		position:absolute;
		height:210px;
		width:210px;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.logo-text {
		height:42px;
		width:347px;
		top: 238px;
	}
}

#splash-s {
	position:absolute;
	height:100%;
	width:100%;
	background: url("../img/splash/splash-s.png");
	background-size: cover;
	padding: 0;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: gradualpulse 20s;
	animation: gradualpulse 20s;
	-webkit-animation-direction: forwards;
	animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

#splash-u {
	position:absolute;
	height:100%;
	width:100%;
	background: url("../img/splash/splash-u.png");
	background-size: cover;
	padding: 0;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: gradualpulse 10s;
	animation: gradualpulse 10s;
	-webkit-animation-direction: forwards;
	animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

#splash-dot {
	position:absolute;
	height:100%;
	width:100%;
	background: url("../img/splash/splash-dot.png");
	background-size: cover;
	padding: 0;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: gradualpulse 15s;
	animation: gradualpulse 15s;
	-webkit-animation-direction: forwards;
	animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

#splash-un {
	position:absolute;
		height:100%;
		width:100%;
	background: url("../img/splash/logo-text-un.png");
	background-size: cover;
	padding: 0;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: gradualpulse 5s;
	animation: gradualpulse 5s;
	-webkit-animation-direction: forwards;
	animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}

#splash-daunted {
	position:absolute;
		height:100%;
		width:100%;
	background: url("../img/splash/logo-text-daunted.png");
	background-size: cover;
	padding: 0;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: gradualpulse 25s;
	animation: gradualpulse 25s;
	-webkit-animation-direction: forwards;
	animation-direction: normal;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-out;
	animation-timing-function: ease-out;
}