*{
	box-sizing: border-box;
}
html{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
body{
	font-family: Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: url('rainbow.jpg') #000 no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}

#video{
	background-color: #000;
	position: fixed;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -100;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	background-size: cover;
}

#mainContainer{
	width: 100%;
	height: 100%;
}

#info{
	color: #fff;
}

#smsinfo{
	font-size: 4vmin;
	font-weight: bold;
	color: #fff;
	padding-top: 1.5vmin;
	text-shadow: 0 0 8px #000000, 0 0 8px #000000, 0 0 8px #000000;
}
#smsinfo img{
	height: 5vmin;
	vertical-align: top;
}
#smsinfo strong{
	color: #6ebbff;
}

#infoArea{
	grid-column-start: 4;
	grid-column-end: 4;
	grid-row-start: 6;
	grid-row-end: span 7;
	padding-top: 4vh;
	text-align: center;
}

#infoArea h1{
	font-weight: normal;
	color: #ddd;
	padding-left:  2vw;
	margin:  1vmin;
	font-size: 5vmin;
	text-shadow: 0 0 4px #000000;
}

#infoArea #logo{
	width: 30%;
	opacity: 0.8;
}

#flipcontainer {
	perspective: 1000px;
	grid-area: votes;
}

.flip {
	transform: rotateY(180deg);
}

#flipper {
	transition: 1s;
	transition-delay: 1s;
	transform-style: preserve-3d;
	transition-timing-function: ease;
	position: absolute;
	inset:  0 0 0 0;
	padding:  2vmin;
}
@-moz-document url-prefix() {
	#flipper {
		backface-visibility: hidden;
	}
}

#flipper > *{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

#countdown {
	z-index: 2;
}

#hiddenBoard {
	opacity: 0;
}
#mainContainer{
	opacity: 1;
}

#scoreboard {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
	position: absolute;
	inset:  0 0 0 0;
}

#countdown{
	font-size: 10em;
	font-weight: bold;
	color: #fff;
	text-align: center;
	width: 100%;
	padding: 4vmin;
}

#visibleBoard{
	position: fixed;
	inset: 0 0 0 0;
	width: 100%;
	height: 100%;
}
#visibleBoard > *{
	transition: 1s;
	transition-timing-function: ease;
}

#hiddenBoard, #infoOverlay{
	padding: 1vmin;
	display: grid;
	grid-auto-flow: column;
	grid-column-gap: 2vmin;
 	grid-row-gap: 1vmin;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(7, minmax(0, 1fr));
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.country{
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	background-color: rgba(0,0,0,0.5);
	box-shadow: 0 0 16px rgba(0,0,0,0.5);
	border: 1px solid rgba(255, 255, 255, 0.2);
	padding: 0;
	border-radius: 8px;
	font-size: 1.2em;
	color: #fff;
	vertical-align: middle;
	font-weight: bold;
	position: relative;
	text-shadow: 0 0 0.1rem #000, 0 0 0.2rem #000, 0 0 0.3rem #000, 0 0 0.4rem #000;

	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto 25%;
	grid-template-areas: "titel score";

	overflow: hidden;
}

#visibleBoard .country{
	position: fixed;
}

.country .cnr{
	grid-area: id;
	background: #000;
	color: #fff;
	width: 2vmin;
	height: 1.6vmin;
	font-size: 1.5vmin;
	border-bottom-right-radius: 2vmin;
	text-align: center;
	font-family: monospace;
}

.country .land{
	font-size: 2.5vmin;
	padding-right: 1vmin;
	font-weight: normal;
}

.country .bg{
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: 49%;
    background-position: 104% 50%;

	/*background-size: 100%;
	background-position: 50% 50%;*/
	background-repeat: no-repeat;
	z-index: -1;
	opacity: 0.5;
	filter: blur(0.2vmin);
}

.country > img{
	grid-area: billede;
	width: 100%;
	aspect-ratio:  1 / 1;
}
.country .navn{
	grid-area: artist;
	padding: 2vmin;
	color: #ffa;
	font-size: 2vmin;
	font-weight: normal;
}
.country .titel{
	grid-area: titel;
	padding: 0.5vmin;
	
}
.country .titel .songArtist{
	font-size: 2.3vmin;
	color: #aaf;
}
.country .titel .songTitle{
	font-size: 3vmin;
}

.country .score{
	grid-area: score;
	text-align: right;
	line-height: 200%;
	padding: 0.5vmin;
	padding-top: 26%;
	border-top-right-radius: 1vmin;
	border-bottom-right-radius: 1vmin;
	color: #ff0;
	font-size: 3.5vmin;
	font-family: monospace;
}



.box{
	border-radius: 1vmin;
	margin: 4vmin auto;
	background: rgba(255,255,255,0.8);
	padding: 4vmin;
	min-width: 300px;
	width: 40%;
}

.box h1{
	font-size: 1.5em;
	margin: 0;
}
.box input[type=submit]{
	width: 100%;
	font-size: 1.3em;
}
.box input[type=text],.box input[type=password]{
	width: 100%;
	font-size: 1.3em;
}

.box table{
	width: 100%;
}

.box tr:nth-child(even){background: rgba(245, 245, 254, 0.8);}
.box tr:nth-child(odd){background: rgba(238, 238, 255, 0.6);}

ul{
	padding-left: 1em;
}

.voterTable{
	border: 1px solid #aaa;
	border-radius: 8px;
}

ul li{
	padding: 4px 0px;
}

.voterTable th{
	text-align: left;
}
.voterTable td{
	padding: 16px 8px;
}