@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

#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;}
}

#contentTop {
	width:100%; 
	max-width:700px;
	text-align:center; 
	justify-content:center; 
	align-items:center;
	z-index:2;
	font-family: 'Lato', sans-serif;
	margin:20px;
}

h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
	font-size: 25px;
	line-height:1.4;
	color:#630f0d;
	padding:0px;
	margin:0px;
	}
	
h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	font-size: 25px;
	color:#630f0d;
	}

a { color:#630f0d;}

p {
 	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	font-size: 14px;
	color:#272c17;
	line-height:23px;
	}

.headlinelille {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	font-size: 26px;
	color:#630f0d;
	}

.overskrift {
 	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size: 15px;
	color:#630f0d;
	line-height:18px;
	}
	
.info {
 	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size: 12px;
	color:#272c17;
	line-height:16px;
	}

.sponsorSignupText  {
 	font-family: 'Open Sans', sans-serif;
	font-weight:500;
	font-size: 11px;
	color:#2d3d3c;
	font-style:italic;
	}

.svarmulighed {
 	font-family: 'Open Sans', sans-serif;
	font-weight:600;
	font-size: 13px;
	color:#2d3d3c;
	line-height:18px;
	}

.formLaageFeldt {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size: 12px;
	color:#2d3d3c;
	width:275px;
	border:none;
	padding-left:5px;
	background:none;
	background-color:#ffffff;
	margin-left: 2px;
	}
	
.mobileFeldt {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	font-size: 14px;
	color:#2d3d3c;
	width:100%;
	border:none;
	padding:2%;
	}

#mobileDiv {
	width:100%;
	/* height:100%; */
	background:url(/_images/1400x2560_baggrund_julekalender_2024.gif) no-repeat center top;
	background-size: cover;
	display:none;
	vertical-align:top;
	justify-content: center;
	z-index:0;
}
	
@media (max-device-width:820px) and (max-device-height:1000px)
{	
	#mobileDiv {
		display:flex !important;
	}
	
	#mainContainer {
		display:none;
	}
	a {
		color:#01303b !important;
	}
}

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

	.autocomplete-container {
		width: 100% !important;
		max-width: unset !important;
	}
}

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

.autocomplete-container {
    /* relative position for at de absolut positionerede forslag får korrekt placering.*/
    position: relative;
    width: calc(100% - 10px);
    max-width: 30em;
}

.autocomplete-container input {
    /* Både input og forslag får samme bredde som omkringliggende DIV */
    width: 100%;
    box-sizing: border-box;
}

.dawa-autocomplete-suggestions {
    margin: 0.3em 0 0 0;
    padding: 0;
    text-align: left;
    border-radius: 0.3125em;
    background: #fcfcfc;
    box-shadow: 0 0.0625em 0.15625em rgba(0,0,0,.15);
    position: absolute;
    left: 0;
    right: 0;
    z-index: 9999;
    overflow-y: auto;
    box-sizing: border-box;
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion {
    margin: 0;
    list-style: none;
    cursor: pointer;
    padding: 0.4em 0.6em;
    color: #333;
    border: 0.0625em solid #ddd;
    border-bottom-width: 0;
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    border-bottom-width: 0.0625em;
}

.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion.dawa-selected,
.dawa-autocomplete-suggestions .dawa-autocomplete-suggestion:hover {
    background: #f0f0f0;
}

.rules-dialog {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0, 0, 0, .5);
  	transition: all ease 500ms;
	z-index: 1;
	opacity: 0;
	display: flex;
	justify-content: center;
}

.rules-dialog.open {
	opacity: 1;
	z-index: 10;
}

.rules-dialog .panel {
	background-color: #eee;
	padding: 20px;
	flex: 1 1 auto;
	max-width: 900px;
	display: flex;
	position: relative;
}

.rules-dialog .content {
	background-color: white;
	flex: 1 1 auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.rules-dialog .panel .close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 4px solid lightgray;
	border-radius: 50%;
	cursor: pointer;
}