html, body {
    height: 100%;
}

body {
    background-color: rgb(24,67,110);
    background-image: url('../img/skybg.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
}

.maincontainer {
	margin:auto;
	width: 100%;
}

img.logo {
	margin-top: 16px;
	width: 60%;
}

p.welcome {
	color: #fff;
	font-size: 120%;
	text-shadow: 2px 2px 8px #000;
}

.qrcode {
	margin-top: 32px;
}

#qrcode {
	margin:auto;
	width:202px;
	height:202px;
	border-color:#ffffff;
	border-style: solid;
    border-width: 5px;
}

@media screen and (orientation:landscape)
{
	img.logo {
		width:50%;
	}
	.qrcode {
		float:right;
		width:50%;
	}
}

.indicatorarrow {
	position: absolute;
	top: -50px;
	right: 0px;
	width: 100px;
	height: 100px;
	overflow: hidden;
	box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5);
	animation: blinker 1s linear infinite;
	z-index: 100;
}

.indicatorarrow:after {
	content: "";
	position: absolute;
	width: 50px;
	height: 50px;
	background: #fff;
	transform: rotate(45deg); /* Prefixes... */
	top: 75px;
	left: 25px;
	box-shadow: -1px -1px 10px -2px #000;
}

@keyframes blinker {  
	50% { opacity: 0; }
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
	display: none !important;
}