archive/hourglass/client/login/login.css

#loginHeader {
	height: 6vh;
	padding: 2.5vh 0 0 2vh;
	background-color: #222328;
}

#loginBody {
	height: 94vh;
	width: 100%;
	background-color: #222328;
}

#loginFooter {
	width: 100%;
	height: 6vh;
	position: absolute;
	bottom: 0;
}

#loginLogo {
	height: 100%;
	cursor: pointer;
}

#loginTexts {
	color: #FCF0F0;
	width: 45%;
	margin-left: 48%;
	position: absolute;
	top: 23vh;
}

#loginTexts h1 {
	font-size: 7vh;
	font-weight: 300;
	margin: 0;
	padding: 0;
	line-height: 3vh;
}

#loginTexts h2 {
	font-size: 15vh;
}

#loginTexts h5 {
	font-size: 5vh;
	font-weight: 100;
}

#loginDec {
	width: 49vw;
	height: 200vh;

	background-color: rgba(255,255,255,0.1);
	position: absolute;
	top: -46vh;
	right: 5vw;

	-webkit-transform: rotate(150deg);
	-ms-transform: rotate(150deg);
	transform: rotate(150deg);
}

#loginCirc {
	width: 55vh;
	height: 55vh;

	background-color: rgba(255,255,255,0.1);

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;

	position: absolute;
	top: 20vh;
	left: 7vh;
}

#loginMidLogo {
	height: 44vh;

	position: absolute;
	top: 26vh;
	left: 12.5vh;
}

.loginButtons {
	font-size: 3.5vh;
	width: 12vw;
	margin-top: 4vh;
	margin-left: 5vw; 
	padding: 1vh;
	background-color: #27A127;

	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	text-align: center;
	cursor: pointer;

	-webkit-transition: background-color 0.4s ease;
	-moz-transition: background-color 0.4s ease;
	-ms-transition: background-color 0.4s ease;
	transition: background-color 0.4s ease;
}

.loginButtons:hover {
	background-color: #239023;
}

#loginContainer {
    display: flex;
}

#demoButton {
	border: 1px solid #FCF0F0;
	background-color: rgba(0,0,0,0);
    margin-left: 4vw;
}

#demoButton:hover {
	background-color: rgba(255,255,255,0.1);
}

#version {
	font-size: 1.7vh;
	color: #FFF !important;
	margin-right: 1%;

	height: 6vh;
	margin: 0;
	padding-right: 1vw;

	line-height: 6vh;
	display: inline-block;
	float: right;
}

a {
	color: #0099CC;
	text-decoration: none;

	-webkit-transition: color 0.4s ease;  
	-moz-transition: color 0.4s ease; 
	-ms-transition: color 0.4s ease;
	transition: color 0.4s ease;
}

a:hover {
	color: #00BFFF;
}

.github-corner:hover .octo-arm {
	animation:octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
	0%,100% { transform:rotate(0) }
	20%,60% { transform:rotate(-25deg) }
	40%,80% { transform:rotate(10deg) }
}

@media (max-width:500px) {
	.github-corner:hover .octo-arm {
		animation:none
	}
	.github-corner .octo-arm {
		animation:octocat-wave 560ms ease-in-out
	}
}

/* Mobile */

#mLoginCirc {
	width: 87vw;
	height: 87vw;

	background-color: rgba(255,255,255,0.1);

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;

	position: absolute;
	top: 15vw;
	left: 6.5vw;
}

#mLoginMidLogo {
	height: 70vw;

	position: absolute;
	top: 23.5vw;
	left: 15vw;
}

#mLoginTexts {
	color: #FCF0F0;
	width: 100%;
	position: absolute;
	bottom: 9vh;
}

#mLoginTexts h1 {
	width: 90%;
	font-size: 8vw;
	font-weight: 300;
	margin: 0 auto 0 auto;
	padding: 0;
	text-align: center;
}

#mLoginTexts h5 {
	width: 90%;
	margin: 0 auto 0 auto;
	font-size: 5vw;
	font-weight: 100;
	text-align: Center;
}

#mLoginButton {
	font-size: 5vw;
	width: 30vw;
	margin: auto;
	margin-top: 3vh;
	padding: 2vw;

	border: 1px solid #FCF0F0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	text-align: center;
	cursor: pointer;

	-webkit-tap-highlight-color: rgba(255,255,255,0.3);
}

#mVersion {
	font-size: 3vw;
	color: #FFF !important;
	margin-right: 1%;

	height: 6vh;
	margin: 0;
	padding-right: 3vw;

	line-height: 6vh;
	display: inline-block;
	float: right;
}