@import url('https://fonts.googleapis.com/css?family=Mountains+of+Christmas:400,700');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Abel');
@import url('https://fonts.googleapis.com/css?family=Anton');

html, body {
	height: 100%;
}

#snow{
	background: none;
	background-image: url('/julekalender/images/snow1.png'), url('/julekalender/images/snow2.png'), url('/julekalender/images/snow3.png');
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index:1;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}

@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}

@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}


@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

.laageWrap
{
	width:100%; 
	position:absolute; 
	z-index:98; 
	top:15%;
}

.laageContainer
{
	position:relative;
	text-align:center;
	width:100%;
	max-width:1090px; /*1000px before*/
	margin-left:auto;
  	margin-right:auto;
}

.textWrap
{
	width:100%; 
	position:absolute; 
	z-index:98; 
	top:130%;
}

.textContainer
{
	position:relative;
	text-align:left;
	width:100%;
	max-width:600px;
	margin-left:auto;
  	margin-right:auto;
	font-family: 'Abel', sans-serif; 
	font-size:14pt; 
	line-height:1.2;
	background-color:rgba(255, 255, 255, 0.89);
	padding:20px;
}

.greenButton
{
	display:inline-block;
	position:relative;
	width: 167px;
	height: 33px;
	margin:15px;
	cursor:pointer;
	background-image: url(../images/bg_knap.png);
	font-family: 'Anton', sans-serif; 
	font-size:14pt;
	text-align:center;
	padding-top:10px;
 }

.laage
{
	display:inline-block;
	position:relative;
	border: 1px solid #000000;
	width: 100px;
	height: 100px;
	margin:15px;
	cursor:pointer;
 }
 
 .laage:hover
{
	border: 1px solid #ffffff;
 }
 
 .laageContent:hover
{
	background: #ffffff;
	color:#000000;
	font-weight:700;
	opacity: 0.9;
 }
 
 .laageContent{
	width:98px;
	height:98px;
	border: 1px dashed #ffffff;
	display:table-cell;
	vertical-align:middle;
	font-family:'Mountains of Christmas';
	font-size:4em;
	font-weight:700;
	color:#ffffff;
	background-color: rgba(255, 255, 255, .2);
	text-align:center;
	-webkit-text-stroke-width: 1px;
   	-webkit-text-stroke-color: black;
}
 
a{ color:#ffffff;
-webkit-text-stroke: 1px black;
text-decoration:none;
height:100%;
opacity: 1.0;}

.laageContainer:after{content:""; display:table}

#mobileLaage {
	background-color:#d6514c;
	background: -webkit-linear-gradient(left top, #f8817f, #ca3c36);
	background: -o-linear-gradient(bottom right, #f8817f, #ca3c36);
	background: -moz-linear-gradient(bottom right, #f8817f, #ca3c36);
	background: linear-gradient(to bottom right, #f8817f, #ca3c36);
	width: 80vw;
    height: 80vw;
	display:flex;
	flex-flow: column nowrap;
	align-items: center;
	justify-content: center;
	text-align:center;
	z-index:2;
}

#mobileDiv {
	width:100%;
	height:100%;
	background:url(/julekalender/julekalender_2021_mobile.jpg) no-repeat center top;
	background-size:100%;
	display:none;
	align-items: center;
	justify-content: center;
	z-index:0;
}
 
@media (max-device-width:820px) and (max-device-height:1000px)
{	
	#mobileDiv {
		display:flex !important;
	}
	
	#mainContainer {
		display:none;
	}
}

@media (max-width: 600px)
{	
	#mobileDiv {
		display:flex !important;
	}
	
	#mainContainer {
		display:none;
	}
}

@media (max-device-height:500px)
{
	#mobileLaage {
		width: 80vh;
		height: 80vh;
		margin-top: 10vh;
	}
}