/*   
Theme Name: Hakkebakke2020
Description: theme based on The HTML5 Reset Theme
Author: Mads Find
Author URI: http://madsfind.dk
Version: 2
*/

/*Reset */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* THEME
-------------------------------------------------------------------------------*/

img#wpstats{width:0px;height:0px;overflow:hidden; position: absolute;}

A {text-decoration: none;}
H1, H2, H3, H4, H5 {font-weight: normal;}
H1, H2, H3, H4, H5 {margin: 1em 0 .5em 0;}
H5 {font-size: 1.1em;}
H4 {font-size: 1.2em;}
H3 {font-size: 1.4em;}
H2 {font-size: 1.6em;}
H1 {font-size: 1.8em;}
P {line-height: 1.5em;}
p.has-medium-font-size {
	font-size: 1.2em;
}
HTML {
	scroll-behavior: smooth;
}

BODY {
	margin: 0 auto;
	background: #F7F2E9;
	font-family: dinpro;
	color: #363630;
	text-align: center;
	}

.edit A, .edit {
	font-size: .75em;
	display: inline-block;
	color: #ccc;
	border-radius:.5em;
	padding: .25em .5em;
	text-transform: uppercase;
	transition: all .5s linear;
	}
	.edit:hover {
		color: #fff;
		background: #222;
	}
	
HEADER#header {
	display: table;
	height: 8rem;
	width: 100%;
	margin: 0;
	padding: 0;
	background: url("gfx/Bagermester.png") left bottom no-repeat, url("gfx/Bedstemor.png") right bottom no-repeat, url( "gfx/Klatremus.png") left top no-repeat,  url("gfx/MikkelRaev.png") right top no-repeat;
 	background-size: 23%;
	transition: height .2s ease-in-out;
	position: relative;
	z-index: 2;
	}
	HEADER#header:before, HEADER#header:after  {
		display: table-cell;
		width: 20%;
		content: ' ';	
		}


@media only screen and (min-width: 251px) {
	HEADER#header {height: 11.5rem;}
}
@media only screen and (min-width: 351px) {
	HEADER#header {height: 14rem;}
}
@media only screen and (min-width: 451px) {
	HEADER#header {height: 15rem;}
}
@media only screen and (min-width: 515px) {
	HEADER#header { height: 18rem; }
}
@media only screen and (min-width: 615px) {
	HEADER#header { height: 23rem; }
}
@media only screen and (min-width: 801px) {
	HEADER#header {	height: 29rem;	}
}
@media only screen and (min-width: 901px) {
	HEADER#header {	height: 32rem;	}
}
@media only screen and (min-width: 1001px) {
	HEADER#header {	height: 41rem;}
	HEADER#header:before, HEADER#header:after  {
	width: 22%;
	}
}
@media only screen and (min-width: 1201px) {
	HEADER#header {background-size: 300px;	}
}
HEADER#header H1 {
	display: table-cell;
	background: url("gfx/Hakkebakkeskoven.png") center center no-repeat;
	background-size: contain;
	width: 60%;
	position: relative;
	z-index: 1;
	}
@media only screen and (min-width: 1411px) {
	HEADER#header H1 { background-size: 800px; }
	}


#header H1 A, H5.agegroup, HEADER BLOCKQUOTE  {
	display: block;
	position: absolute;
	top: -3px;
	left: 0;
	color: #F7F2E9;
	font-size: 1px;
	line-height: 1px;
	text-align: left;
	}

#reviews {
	display: block;
	text-align: center;
	max-width: 60%;
	margin: 0 auto;
	padding: 0;
}
#reviews LI {
	list-style-type: none;
	text-align: center;
	font-size: 1.75rem;
	color: #F48256;
	display: inline-block;
	margin: 0 1rem;
}
#reviews LI SPAN {
	display: block;
	font-size:  .5rem;
	color: #3F6B3D;
	text-transform: uppercase;
}
A.tickets {
	display: inline-block;
	font-family: Gin-Round;
	color: #F7F2E9;
	background: #F48256;
	margin: 3em auto 1em auto;
	font-size: 1.4em;
	padding: .25em .5em;
}

BODY>SECTION>H1 {
	font-size: 2.5em;
	padding: 2em 0 1em 0;
	margin: 0;
	font-family: Gin-Round;
	}

#copy {
	max-width: 800px;
	margin:  0 auto;
	padding: 1rem;
	font-size: 1.3em;
	text-align: center;
	}
	#copy .wp-block-video {
		max-width: 550px;
		margin: 5rem auto 2rem auto;
		}

#moed-dyrene {
	background: #3F6B3D;
	background-position: center center;
	background-size: cover;
	color: #F7F2E9;
	}
	.videos {
		max-width: 800px;
		margin: 0 auto;
		padding: 1rem;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		}
		.videos FIGURE {
			width: 100%;
			overflow: hidden;
			padding-bottom: 2rem;
			}
		.videos A {
			color: #F7F2E9;
			line-height: 2rem;
			}
			.videos FIGURE IMG{
				display: block;
				width: 100%;
				height: auto;
				}

@media only screen and (min-width: 401px) {
	#moed-dyrene .videos FIGURE {width: 48%; margin: 0 1%; }
}

@media only screen and (min-width: 701px) {
	#moed-dyrene .videos FIGURE {width: 31.3333%;}
}


#program H1 {
	color: #3F6B3D
	}
.spillested {
	max-width: 612px;
	margin: 0 auto;
	text-transform: uppercase;
	}
.spillested HEADER {
	padding: 3rem 0 2rem 0;
	}
	.spillested HEADER TIME {
		font-size: 1.5rem;
		font-weight: 800;
		color: #D85308;
		}
	.spillested HEADER H1, .spillested HEADER H1 SMALL {
		font-size: 1.5rem;
		font-weight: 800;
		margin:0;
		}
	.spillested HEADER H1 SMALL {
		font-weight: 400;	
		}
	.spillested HEADER ADDRESS A {
		display: inline-block;
		font-style: normal;
		font-size: .75rem;
		color: #333;
		margin: 0 .5rem;
		position: relative;
		}
		

.spillested>.day {
	text-align: left;
	background-image: linear-gradient(rgba(247,242,233,1) , rgba(227,222,213,1));
	position: relative;
	padding-top: .25rem;
	}
	.spillested>.day::before {
		position: absolute;
		top: 0;
		width: 100%;
		content: '';
		display: block;
		height: .25rem;
		background: linear-gradient(90deg, rgba(247,242,233,1) 0%, rgba(255,255,255,.5) 50%, rgba(247,242,233,1) 100%);
		}
@media only screen and (min-width: 401px) {
	.spillested>.day {
		display: grid;
		grid-template: 'date gigs';
		grid-template-columns: 25% 75%;
		}
	}
	.day H3 {
		font-size: .75rem;
		grid-area: date;
		place-self: start;
		margin: 0;
		padding: 1rem;
		}
		.day H3 .date {font-size: 1rem; font-weight: bold;}
	.day .gig {
		border-top: .1rem solid rgba(150,150,150,.25); 
		grid-area: gigs;
		grid-row: auto;
		display: flex;
		justify-content: space-between;
		position: relative;
		}
	.day .gig:first-of-type {border-top: none;}
		.gig>* {
			
			padding: 1rem;
			}
		.gig>STRONG /*ekstra*/ {
			position: absolute;
			left: -.25rem;
			top: -.25rem;
			font-size: .7rem;
			background: #D7C026;
			padding: .25rem;
			letter-spacing: .075rem;
			transform: rotate(-9deg);
			}
		.gig>SPAN.faa_billetter,.gig.udsolgt .ticket  {
			font-size: .7rem;
			font-weight: 800;
			padding: .25rem;
			margin: .9rem;
			letter-spacing: .075rem;
			transform: rotate(-7deg);
			}
		.gig>SPAN.faa_billetter {background: #98B594;}
		.gig.udsolgt .ticket  {
			font-size: 1em;
			background: #ccc;
			}

		.gig A.ticket {	
			background: #D85308;
			color: #F7F2E9;
			font-weight: 600;
			padding: .35rem;
			padding-right: 1.5rem;
			margin: .65rem;
			align-self: flex-end;
			position: relative;
			}
		.gig A.ticket:after {
			content: '';
			position: absolute;
			right: .65rem;
			top: .65rem;
			height: .5rem;
			width: .5rem;
			transform: rotate(45deg);
			display: block;
			border: .15rem solid #F7F2E9;
			border-width: .15rem .15rem 0 0;
			}

#footer {
	background: #3F6B3D;
	color: #F7F2E9;
	line-height: 2em;
	padding: 2rem 0;
	text-align: center;
	margin: 6rem 0 0 0;
	}