html, body {
	background-color: #EEE;
	font-family: 'Rubik', sans-serif;	
	color: #474740;
	padding: 0;
	margin: 0 !important;
	height:100%;
}
	
html {
	overflow-y: hidden;
}

img#logo {
	max-height: 75%;
	max-width: 80%;
	width: 400px;
	visibility: hidden;
}

img#logo {
	animation: fadein 1s linear .8s 1 forwards;
}

#logocontainer {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@keyframes fadein {
	from {
		opacity: .01;
		visibility: visible;
	}
	to {
		opacity: .99;
		visibility: visible;
	}
}

#links {
    bottom: 100px;
    left: 0;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    letter-spacing: 8px;
    z-index: 1;
    text-align: center;
}

#homepage {
	display: flex;
	flex-direction: column;
}

#links {
	margin: auto 1em 100px;
	position: static;
}

#links a {
	margin-right: 50px;
	cursor: pointer;
	color: #474740;
	text-decoration: none;
	font-size: 14px;
}


#links a:last-child {
	margin-right: 0px;
}



.close {
    /*text-align: right;*/
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
}

.close img { width: 20px; }

.text-center { text-align: center; }

#homepage {

	background-image: url('../img/nautiq-bg.jpg');
	background-size: cover;
	background-position: center center;
	height: 97.5vh;	

}

#introduction {
    background: #B70026;
    padding: 5vh 0;
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	top: 97.5vh;
	transition: all	0.5s ease-in-out;
	height: calc( 50vh - 10vh );
	
	/*
	position: absolute;
	top: 96vh;
	z-index: 2;
	left: 0;
	right: 0;
	
	*/
}

#introduction .content {
	/*width: 50vw; */
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1em;
	line-height: 1.48;
	color: white;
	text-align: center;
}

#introduction .content p {
	font-weight: 300;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.5px;
}

#introduction.visible {
	top: 50vh;
}

#logocontainer {
	height: 47.5vh;
	margin-bottom: 3em;
	min-height: 250px;
}

.vcenter {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.content h1 { margin-top: 0; font-weight: 400; letter-spacing: 8px; font-size: 18px; }

#loginscreen {
    background: white none repeat scroll 0 0;
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 500px;
    left: 50%;
	padding: 50px;
	box-shadow: 0px 10px 10px rgba(0,0,0,0.2);
	height: 250px;
	display: none;
	transform: translate(-50%, -50%);
}
#loginscreen input {
	border: 0;
	border-bottom: 1px dotted black;
	text-align: center;
	font-size: 16px;
	width: /*220px;*/ 41%;
	margin-top: 100px;
	border-radius: 0;
}


#closelogin { 
	width: 20px;
	position: absolute;
	right: 50px;
	cursor: pointer;
	z-index: 3;
}
#namefield { margin-right: 50px !important; }

.icon { width: 40px; margin-top: 50px; cursor: pointer; transition: all	0.25s ease-in-out; }


.errormsg {
    opacity: 0;
    transition: all	0.25s ease-in-out;
    color: #B70026;
}
.errormsg.visible {
    opacity: 1;
}


@media only screen and (max-width: 600px) {
    
    #links { bottom: 50px; }
    
    #links a { display: block; margin-right: 0; margin-bottom: 20px; }
    
    a#about {
    	display: none !important;
	}
	
	html,
	body {
		height: unset;
		overflow-y: auto !important;
	}
    
    
    #introduction { 
	    height: auto;
	    position: static;
	    /*top: 85vh;*/
	    /*top: 85vh;*/
	}
    #introduction .content {
	   margin: 0 auto;
	   position: static;
    	width: 80vw;
    }
    
    #introduction h1 { display: none !important; }
    
    #introduction .content.vcenter {
	    transform: none;
    }
    /*
    #introduction.visible {
    	top: 0vh;
    	height: 100vh;
	}*/
	
	#loginscreen {
		top:0;
		bottom: 0;
		left: 0;
		right: 0;
		transform: none;
		width: 80vw;
		height: 100%;
		padding: 10vw;
	}
	
	#closelogin { right: 10vw; }
	
	#loginscreen input { 
		margin-right: 0;
		width: 75vw;	
	}
	
	.close img { display: none !important; }


    
}