/* BASIC CSS
------------------------------------------------------ */
@font-face {
    font-family: 'cocogooseregular';
    src: url('webfont/cocogoose-webfont.eot');
    src: url('webfont/cocogoose-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont/cocogoose-webfont.woff2') format('woff2'),
         url('webfont/cocogoose-webfont.woff') format('woff'),
         url('webfont/cocogoose-webfont.ttf') format('truetype'),
         url('webfont/cocogoose-webfont.svg#cocogooseregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	padding:0;
	height:100%;
}

:root {
	/* Change colors here to affect the whole site */
    --color1:#0D9430; /* Groen */
    --color2:#004A99; /* Blue */
    --color3:#ffffff; /* White */
	--color4:#e6e6e6; /* grey */	
}

/* PRE-PAGE
------------------------------------------------------ */
#prepage {
	height:100vh;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
 	align-items: center;
  	justify-content: center;	
}

#prepage svg {
	 height:10em;
	 fill:var(--color3);	
}


/* VARIOUS CSS
------------------------------------------------------ */
p {
	font-family: "basic-sans", sans-serif;
	font-size:1.25em;
	color: var(--color2);
}

a {
	text-decoration:none;
	color: var(--color1);
}

a:link {
	text-decoration:underline;
}

a:hover {
	text-decoration:none;
}

h1 {
	font-family: 'cocogooseregular', sans-serif;
	font-size:4em;
	letter-spacing: 0.1em;
	color: var(--color3);
	text-transform: uppercase;
}

h2 {
	font-family: "basic-sans", sans-serif;
	font-size:1.75em;
	letter-spacing: 0.1em;
	color: var(--color3);
}

h3 {
	font-family: "basic-sans", sans-serif;
	font-size:1.35em;
	letter-spacing: 0.1em;
	color: var(--color3);
	line-height: 1.25em;
}

.landcode {
	font-family: "basic-sans", sans-serif;
	font-size:0.3em;
	letter-spacing: 0.1em;
	color: var(--color3);
	text-transform: lowercase;
}

.subtitle {
	font-family: 'cocogooseregular', sans-serif;
	font-size:2em;
	letter-spacing: 0.1em;
	color: var(--color3);
	text-transform: uppercase;
}

.underline {
	border-bottom:0.2em dotted var(--color3);
	padding-bottom:0.2em;
}

/* Ticketblock in eventpagina */

#ticket svg {
	height:5em;
	fill: var(--color3);
}

#ticket p {
	margin-top:1em;
}


#ticket p > a {
	text-decoration: none;
	color: var(--color3);
	position: relative;
}

#ticket p > a:hover {
	color: var(--color3);
}

#ticket p > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--color3);
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

#ticket p > a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

#ticket svg:hover {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: bounceIn;
}

/* Dropdown */

.control {
	margin-bottom:3em;
 }
 
.control:last-child {
	margin-bottom:0;
 }
 
#button-wrapper {
	width:auto;
	border:0.3em dotted var(--color3);
	text-align:left;
	padding: 1.5em;
	cursor: pointer;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: row nowrap;
 	align-items: center;
  	justify-content: center;
 }

.button-wrapper-noclick {
	cursor: inherit !important;
 }

#button-wrapper div {
	flex-grow:1;
	font-family: 'cocogooseregular', sans-serif;
	font-size:2em;
	letter-spacing: 0.1em;
	color: var(--color3);
	text-transform: uppercase;
	position:relative;
	display:block;
	z-index:-1;
 }
 
#button-wrapper div:nth-child(even) {
	text-align:right;
 }
 
#button-wrapper svg {
	height:1.5em;
	fill: var(--color3);
 }
 
.dropdown {
	display: none;
	padding:1em 2em 2em 2em;
	border:0.3em dotted var(--color3);
	border-top:none;
	margin-top:0.4em;
 }

.dropdown-permanent-open { 
	display: block;
	padding:1em 2em 2em 2em;
	border:0.3em dotted var(--color3);
	border-top:none;
	margin-top:0.4em;
 }

.dropdown a {}

.dropdown.is-open {
  display: block;
}

/* Divider */

#divider {
	border-top:0.3em solid var(--color3);
	border-bottom:0.3em solid var(--color3);
	background-image: url(../img/div_1.svg);
	background-repeat: repeat-x-y;
	background-size: 45px 16px;
	background-position: center;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: column wrap;
	
 	align-items: center;
  	justify-content: center;
}

#divider_news {
	border-top:0.3em solid var(--color3);
	border-bottom:0.3em solid var(--color3);
	background-image: url(../img/div_2.svg);
	background-repeat: repeat-x-y;
	background-size: 45px 16px;
	background-position: center;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: column wrap;
	
 	align-items: center;
  	justify-content: center;
}

#divider-title {
	display: inline-block; 
	background-color: #fff;
	margin: 6em 2em;
	text-align: center;
}

#divider-title h1 {  
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
	
	padding: 0.3em 0.65em;
}

#divider-nav {
	margin: -3em 1em 3em 1em;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: row wrap;
 	align-items: center;
  	justify-content: space-around;
}

#divider-nav div {
	background-color: #fff;
	margin: 0 1em;
	text-align: center;
}


#divider-nav div h1 {  
	-webkit-background-clip: text;
    background-clip: text;
    color: transparent;
	
	font-size: 2em;
	padding: 0.3em 0.65em;
}

#divider-nav div a {  
	text-decoration: none;
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse2;
}

#divider-nav div a:hover h1 {  
	text-decoration: none;
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse2;
}

#divider.empty {
	height:5em;
	border: none;
}	

/* ANIMATIONS
------------------------------------------------------ */

.gradient {
	background: linear-gradient(275deg, #0D9430, #004a99);
	background-size: 400% 400%;
	
	-webkit-animation: AnimationName 5s ease infinite;
	-moz-animation: AnimationName 5s ease infinite;
	animation: AnimationName 5s ease infinite;
}

@-webkit-keyframes AnimationName {0%{background-position:0% 70%} 50%{background-position:100% 30%} 100%{background-position:0% 70%}}
@-moz-keyframes AnimationName {0%{background-position:0% 70%} 50%{background-position:100% 30%} 100%{background-position:0% 70%}}
@keyframes AnimationName {0%{background-position:0% 70%} 50%{background-position:100% 30%} 100%{background-position:0% 70%}}

.fade-in {
  opacity:0;  /* make things invisible upon start */
  -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:1s;
  -moz-animation-duration:1s;
  animation-duration:1s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

@keyframes pulse {
from { transform: scale3d(1, 1, 1);}
50% { transform: scale3d(1.05, 1.05, 1.05);}
to {transform: scale3d(1, 1, 1); }
}

@keyframes pulse2 {
from { transform: scale3d(1, 1, 1);}
50% { transform: scale3d(1.05, 1.05, 1.05);}
to {transform: scale3d(1, 1, 1); }
}

.pulse2  {
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse2;
}

@keyframes bounceIn {
from, 20%, 40%, 60%, 80%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
0% {opacity: 0;transform: scale3d(.3, .3, .3);}
20% {transform: scale3d(1.1, 1.1, 1.1);}
40% {transform: scale3d(.9, .9, .9);}
60% {opacity: 1;transform: scale3d(1.03, 1.03, 1.03);}
80% {transform: scale3d(.97, .97, .97);}
to {opacity: 1;transform: scale3d(1, 1, 1);}
}

.bounce {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: bounceIn;
}

@keyframes flash { from, 50%, to {opacity: 1;}
25%, 75% {opacity: 0;}}

/* NAVIGATION
------------------------------------------------------ */

#nav-top {
    position: fixed; 
	z-index: 98; 
	top: 0;
    left: 0;
	width:100%;
	height:5em;
	border-bottom:0.3em solid var(--color3);
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: row wrap;
 	align-items: center;
  	justify-content: center;
}	

#nav-top .button-overlay {
    flex-grow: 1;
	width: 0;
	text-align: left;
	padding-left: 1em;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
 	align-items: center;
  	justify-content: flex-start;
}

#nav-top .button-overlay p {
	display:inline-block;
}

#nav-top .button-overlay p.lang {
	border:1px solid var(--color3);
	font-size:0.75em;
	margin-right:1.5em;
	padding:0.3em;
}

#nav-top .button-overlay p.lang a {
	color: var(--color3);
	text-decoration:none;
}

#nav-top .logo {
    flex-grow: 1;
	width: 0;
	text-align: center;
}

#nav-top .social {
    flex-grow: 1;
	width: 0;
	text-align: right;
	padding-right: 2em;
}

#nav-top div p {
	font-family: "basic-sans", sans-serif;
	font-size:1.75em;
	letter-spacing: 0.1em;
	color: var(--color3);
	cursor:pointer;
}

#nav-top div svg {
    height: 3em;
	fill: var(--color3);
}

#nav-top div a:hover svg {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
}

#nav-top .social svg {
    padding-left:1em;
}

/* NAVIGATION - OVERLAY
------------------------------------------------------ */

#nav-overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 98;
    top: 0;
    left: 0;
    overflow-y:scroll;
    transition: 0.5s;
}

#nav-overlay #nav-overlay-wrapper {
	width:100%;
	height:5em;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: row wrap;
 	align-items: center;
  	justify-content: center;
}

#nav-overlay #nav-overlay-wrapper .button-overlay {
    flex-grow: 1;
	width: 0;
	text-align: left;
	padding-left: 1em;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
 	align-items: center;
  	justify-content: flex-start;
}

#nav-overlay #nav-overlay-wrapper .button-overlay p {
	display:inline-block;
}

#nav-overlay #nav-overlay-wrapper .button-overlay p.lang {
	border:1px solid var(--color3);
	font-size:0.75em;
	margin-right:1.5em;
	padding:0.3em;
}

#nav-overlay #nav-overlay-wrapper p.lang a {
	color: var(--color3);
	text-decoration:none;
}

#nav-overlay #nav-overlay-wrapper .logo {
    flex-grow: 1;
	width: 0;
	text-align: center;
}

#nav-overlay #nav-overlay-wrapper .social {
    flex-grow: 1;
	width: 0;
	text-align: right;
	padding-right: 2em;
}

#nav-overlay #nav-overlay-wrapper div svg {
    height: 3em;
	fill: var(--color3);
}

#nav-overlay #nav-overlay-wrapper .social svg {
    padding-left:1em;
}

#nav-overlay div p {
	font-family: "basic-sans", sans-serif;
	font-size:1.75em;
	letter-spacing: 0.1em;
	color: var(--color3);
}

#nav-overlay div p a {
	color: var(--color3);
	text-decoration: none;
}

#nav-overlay #nav-overlay-wrapper div a:hover svg {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
}

#nav-overlay #nav-overlay-items {
	padding:2em;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: row wrap;
	align-items: stretch;
}

#nav-overlay #nav-overlay-items div {
	flex-grow:1;
	width:40%;
	border:0.3em solid var(--color3);
	padding: 1em;
	margin-right: 2em;
	margin-top: 2em;
	text-align: center;
}

#nav-overlay #nav-overlay-items div:nth-child(even), #nav-overlay #nav-overlay-items div:last-child  {
	margin-right: 0;
}

#nav-overlay-items  h1 {
	font-family: 'cocogooseregular', sans-serif;
	font-size:1.5em;
	letter-spacing: 0.3em;
	color: var(--color3);
	text-transform: uppercase;
}

#nav-overlay-items ul {
	font-family: "basic-sans", sans-serif;
	font-size:1.1em;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	color: var(--color3);
	margin-top: 0.5em;
}

#nav-overlay-items h1 > a, #nav-overlay-items  ul li > a {
	text-decoration: none;
	color: var(--color3);
	position: relative;
}

#nav-overlay-items h1 > a:hover, #nav-overlay-items ul li > a:hover {
	color: var(--color3);
}

#nav-overlay-items h1 > a:before, #nav-overlay-items ul li > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--color3);
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

#nav-overlay-items h1 > a:hover:before, #nav-overlay-items ul li > a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

#nav-overlay-sponsors, #nav-overlay-sponsors a {
	text-align: center;
	text-decoration: none;
}

#nav-overlay-sponsors .mission {
	text-align: center;
	text-decoration: none;
	font-family: "basic-sans", sans-serif;
	font-size:1em;
	color: var(--color3);
}
 
#nav-overlay-sponsors .mission a, #nav-overlay-sponsors .mission a:active {
	text-decoration: underline;
}

#nav-overlay-sponsors .mission a:hover {
	text-decoration: none;
}


#nav-overlay-sponsors, #nav-overlay-social {
	padding:0 2em;
	margin-bottom: 2em;
}

#nav-overlay-social {
	display: none;
}

#nav-overlay-sponsors svg {
	height:2em;
	margin: 1em 1em;
	fill: var(--color3);
}

#nav-overlay-sponsors svg.ing {
	height:3em;
	margin-bottom:8px;
}

#nav-overlay-sponsors svg.maes, #nav-overlay-sponsors svg.cola {
	height:1.5em;
	margin-top:8px;
}

#nav-overlay-social svg {
	height:3em;
	margin-right: 1em;
	fill: var(--color3);
}

#nav-overlay-sponsors a:hover svg, #nav-overlay-social a:hover svg  {
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
}

.navtop {
	margin-top:5em; /* Hoogte van de navigatie */
}


/* SLIDESHOW
------------------------------------------------------ */

.slide {
	flex-grow:1;
	
	position: relative;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
	
}

.slide li {
	-webkit-backface-visibility: hidden;
	display: none;
	position: absolute; 
	top: 0; 
	left: 0;
	
	height:100%;
	width:100%;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-flow: column wrap;
	align-items: center;
  	justify-content: center;	
}

.slide li #slide-content {
	display:block;
	margin:2em; /* Zorgt ervoor inhoud slide de schermrand niet raakt */
	border:0.75em solid var(--color3);
	padding: 3em;
}

.slide li #slide-content h2 {
	border-top:0.35em solid var(--color3); 
	padding: 1.5em 1.5em 0 0;
	display:inline-block;
	margin-top:1.5em;
}

.slide li a {text-decoration:none !important;}
.slide li a:hover #slide-content  {
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
}


/* HOME
------------------------------------------------------ */

#home {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: column wrap  !important;
	flex-flow: column wrap  !important;

	align-content:flex-start;
	width:100%;
	height:100vh;
}

#home article {
	flex-grow:2;
	width:100%;
	height:0;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	
	border-right:none;
	border-bottom:0.3em solid var(--color3);
}

#home.side {
	height:19em;
}

#home side {
	flex-grow:1;
	width:100%;
	height:0;

	margin-top:0; /* Hoogte van de navigatie niet meer nodig */
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap  !important;
	flex-flow: row wrap !important;
}

#home side #side-item {
	flex-grow:1;
	width:0;
	height:100%;

	border-bottom:none;
	/*border-right:0.3em solid var(--color3);*/
	
	position: relative;
}

	
#home side #side-item:last-child {
	border-right:none;
}	
	

/* Side item ticket */

#home side #side-item .side-ticket {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/ticket_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item .side-ticket.en {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/ticket_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-ticketinfo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/ticket_info_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-ticketinfo.en {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/ticket_info_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-camping {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/camping_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-camping.en {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/camping_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-nachtbus {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/nachtbus_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-nachtbus.en {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/nachtbus_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-programma {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/programma_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-programma.en {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/programma_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-nieuwsbrief {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/nieuwsbrief_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-nachtbus.en {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/nachtbus_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-wedstrijd {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/wedstrijd_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item #side-wedstrijd.en {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right:0;
	width: auto;
	height:auto;
	
	background-image: url(../img/wedstrijd_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#home side #side-item .side-ticket:hover, #home side #side-item #side-ticket:hover, #home side #side-item #side-ticketinfo:hover, #home side #side-item #side-camping:hover,#home side #side-item #side-programma:hover, #home side #side-item #side-nachtbus:hover, #home side #side-item #side-nieuwsbrief:hover {
	cursor: pointer;
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse2;
	text-decoration: none;
}

#home side #side-item:last-child {
	border-bottom:none;
}


/* NEWSLETTER
------------------------------------------------------ */
#newsletter {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
    
	justify-content: center;
    align-items: center;
}

#newsletter .form {
	width:50%;
	margin-top: 3em;
}

#newsletter h2.titel {
	font-size: 4em;
	margin-bottom: 0.5em;
}

#newsletter h3 {
	font-size:1.25em;
	margin-top: 0.5em;
	margin-bottom: -1em;
	background: none;
	background-image: none;
	background-color: transparent;
	border:none;
}

#newsletter #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error
{
	background: none !important;
	background-color: none !important;
}

#newsletter .formbutton {
	background-color: transparent;
	border:0.3em solid var(--color3);
	padding: 1em;
	color:var(--color3);
	margin-left: 0;
	cursor: pointer;
	font-family: "basic-sans", sans-serif;
	font-size:1.25em;
	letter-spacing: 0.1em;
}

#newsletter .formbutton:hover {
	border:0.3em dotted var(--color3);
}


/* DETAIL
------------------------------------------------------ */

#detail-image {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	align-content:flex-start;

	width:100%;
	height:75vh;
}

#detail-image article {
	flex-grow:1;
	width:0;
	height:75vh;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	
	margin-top:5em; /* Hoogte van de navigatie */
	border-bottom:0.3em solid var(--color3);
}

#detail {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	
	margin:10em 0 5em 0;
	width:100%;
}

#detail article {
	flex-grow:2;
	width:0;
}

#detail p {
	font-family: font_normal, sans-serif;
	font-size:1.1em;
	letter-spacing: 0.1em;
	color: var(--color3);
	line-height:2em;
	text-align:justify;
}

#detail p a, #detail p a:link, #detail p a:hover {
	color: var(--color3);
}


#detail nav, #detail side {
	flex-grow:1;
	width:0;
	padding:0 2em;
}

#detail side {
	margin-top:1em;
} 

#detail side > div {
	margin-left:2.5em;
}


#detail side > div div {
	border-bottom:0.3em dotted var(--color3);
	padding:1em;
}

/* indien tickets hier staan onderstaande niet gebruiken */
#detail side > div div:first-child {
	/*padding-top:1em;*/
	/* border-top:0.3em dotted var(--color3); */
}

#detail side #solo {
	padding-top:1em;
	border-top:0.3em dotted var(--color3);
}

#detail side #ticket {
	margin-top:-2em;
}

#detail side #ticket > div {
	border: none;
}
/* Close Tickets */

#detail side #side-item > a {
	text-decoration: none;
	color: var(--color3);
	position: relative;
}

#detail side #side-item > a:hover {
	color: var(--color3);
}

#detail side #side-item > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: 0;
	left: 0;
	background-color: var(--color3);
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

#detail side #side-item > a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}


#detail h1 {
	display:none;
}

#detail ul {
	font-family: "basic-sans", sans-serif;
	font-size:1.1em;
	letter-spacing: 0.1em;
	color: var(--color3);
	line-height:3.75em;
}

#detail ul li {
	display:block;
}

#detail ul li a {
	padding:0.5em;
	border:0.3em solid var(--color3);
	color: var(--color3);
	text-decoration:none;
}

#detail ul li a:hover {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-name: bounceIn;
}

#detail ul li a.active {
	animation: none;
	border:0.3em dotted var(--color3);
}

#detail article .video-container {
	margin-top:3.5em;
	border:1em solid var(--color3);
	
	position:relative;
	padding-bottom:56.25%;
	height:0;
	overflow:hidden;
}

#detail article .video-container iframe, #detail article .video-container object, #detail article .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/* INFO
------------------------------------------------------ */

#info {
	margin:10em 2em 5em 2em;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;

}

#info nav {
	flex-grow:1;
	width:0;
}

#info article {
	flex-grow:3;
	width:0;
	margin-left:2em;
}

#info h1 {
	display:none;
}

#info #title h1 {
	display:inherit;
}

#info #info-wrapper {
	margin-top:4em;
}

#info #info-wrapper.flex {
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

#info #info-item.flex {
	flex-grow:1;
	width:38.5%;
	margin-bottom:1em;
}


#info #info-item.flex:nth-child(even) {
	margin-left:1em;
}

#info #info-item.flex:last-child {
	max-width: 40%;
}

#info ul {
	font-family: "basic-sans", sans-serif;
	font-size:1.1em;
	letter-spacing: 0.1em;
	color: var(--color3);
	line-height:3.75em;
}

#info ul li a {
	padding:0.5em;
	border:0.3em solid var(--color3);
	color: var(--color3);
	text-decoration:none;
}

#info ul li a:hover {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-name: bounceIn;
}

#info ul li a.active {
	border:0.3em dotted var(--color3);	
}

#info #info-item {
	border:0.3em dotted var(--color3);
	padding:2em;
}

#info p {
	font-family: font_normal, sans-serif;
	font-size:1.1em;
	letter-spacing: 0.1em;
	color: var(--color3);
	line-height:2em;
	text-align:left;
}

#info p a {
	color: var(--color3);
}

#info #auto li {
	font-family: font_normal, sans-serif;
	font-size:1.1em;
	letter-spacing: 0.1em;
	color: var(--color3);
	line-height:2em;
	margin-bottom:1em;
}

#info #auto li a {
	border:none;
	text-decoration: underline;
	padding: 0;
}

#info #auto li a:hover {
	border:none;
	text-decoration: none;
}

/* Koop ticket button */

#eventbrite-widget-modal-trigger-53683296184.eventbrite-button {
	width:auto;
	border:0.2em solid var(--color3);
	background-color:transparent;
	text-align:left;
	padding: 1em;
	display: inline-block;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	flex-flow: row nowrap;
 	align-items: center;
  	justify-content: center;
	
	font-family: 'cocogooseregular', sans-serif;
	font-size:2.25em;
	letter-spacing: 0.1em;
	color: var(--color3);
	text-transform: uppercase;
	text-align: center;
	
	cursor: pointer;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-name: bounceIn;
	text-decoration: none;
 }

#eventbrite-widget-modal-trigger-53683296184.eventbrite-button:hover {	
	border:0.2em dotted var(--color3);
 }
#eventbrite-widget-modal-trigger-53683296184.eventbrite-button:focus {outline:0;}

/* Ticket types */

#info #info-item.ticket {
	flex-grow:1;
	width:30%;
	margin-bottom:1em;
	text-align:center;
	position:relative;
}

#info #info-item.ticket:nth-child(even) {
	margin-left:1em;
	margin-right:0;
}

#info #info-item.ticket:last-child {
	margin-right:0;
}

#info #info-item.ticket h1, #info #info-order h1 {
	display:inherit;
}

#info #info-item.ticket h2, #info #info-order h2 {
	font-family: 'cocogooseregular', sans-serif;
	font-size:1.5em;
	letter-spacing: 0.3em;
	color: var(--color3);
	text-transform: uppercase;
	margin:0.5em 0;
}

#info #info-item.ticket h3, #info #info-order H3 {
	font-family: 'cocogooseregular', sans-serif;
	font-size:1.2em;
	letter-spacing: 0.2em;
	color: var(--color3);
	text-transform: uppercase;
	margin:0.5em 0;
	line-height:1.2em;
	text-align:center;
}

#info #info-item.ticket p, #info #info-order p {
	text-align:center;
	font-size:0.9em;
	padding:1em;
}

#info #info-item.ticket a {
	display:none;
}

#info #info-item.ticket svg {
	height:3em;
	fill: var(--color3);
	padding-bottom:1em;
}

#info #info-item.ticket:hover {
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
	text-decoration:none;
}

#info #info-item.ticket:hover p, #info #info-item.ticket:hover h3, #info #info-item.ticket:hover h2, #info #info-item.ticket:hover h1, #info #info-item.ticket:hover svg {
	display:none;
}


#info #info-item.ticket:hover a {
	display:block;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	width:100%;
	height:100%;
	z-index:100;
	
	cursor: pointer;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	align-items: center;
    justify-content: center;
	text-decoration:none;
}

#info #info-item.ticket:hover a h3, #info #info-item.ticket:hover a h2, #info #info-item.ticket:hover a h1, #info #info-item.ticket:hover a p {
	display:inherit;
}

#info #info-order {
	height:13em;
	width:100%;
	background-image: url(../img/ticket_long_nl.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border:0.3em solid var(--color3);
}

#info #info-order.en {
	height:13em;
	width:100%;
	background-image: url(../img/ticket_long_en.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border:0.3em solid var(--color3);
}

#info #info-order:hover {
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
	text-decoration:none;
	cursor: pointer;
}

#info p.info-ticket {
	margin-top:1.5em;
	font-size: 0.75em;
}

#float {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

#float p:nth-child(odd) {
	flex-grow:2;
	width:0;
	padding-right: 2em;
}

#float p:nth-child(even) {
	flex-grow:1;
	width:0;
}

#float p img {
	width:100%;
}


/* NIEUWS
------------------------------------------------------ */

#nieuws {
	margin:0;
}

#nieuws_wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

#nieuws_wrapper article:nth-child(4n+4) {
	border-right:none;
}

#nieuws_wrapper article:last-child {
	border-right:none;
}

#nieuws_wrapper article {
	flex-grow:1;
	width:24%;
	height:20em;
	border-right:0.3em solid var(--color3);
	border-bottom:0.3em solid var(--color3);
	
	position: relative;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
}


#nieuws_wrapper figure {
	-webkit-backface-visibility: hidden;
	display: none;
	position: absolute; 
	top: 0; 
	left: 0;
	
	height:100%;
	width:100%;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-flow: column wrap;
	align-items: center;
  	justify-content: center;	
}

#nieuws_wrapper figure figcaption {
	display:block;
	margin:2em; /* Zorgt ervoor inhoud beeld de schermrand niet raakt */
	border:0.5em solid var(--color3);
	padding: 1.5em;
}

#nieuws_wrapper figure figcaption h1 {
	font-size: 1.75em;
}

#nieuws_wrapper figure figcaption h2 {
	font-size: 1em;
	border-top:0.2em solid var(--color3); 
	padding: 1em 1.5em 0 0;
	display:inline-block;
	margin-top:1em;
}

#nieuws_wrapper figure a {text-decoration:none !important;}
#nieuws_wrapper figure a:hover figcaption {
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
}


/* PROGRAM
------------------------------------------------------ */

#program {
	margin:0;
}

#program_wrapper {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}

#program_wrapper article:nth-child(3n+3) {
	border-right:none;
}

#program_wrapper article {
	flex-grow:1;
	width:33%;
	height:20em; /* MOET 20 WORDEN VANAF 2 BANDS, 40 bij 1 BAND */
	border-right:0.3em solid var(--color3); 
	border-bottom:0.3em solid var(--color3);
	
	position: relative;
	list-style: none;
	overflow: hidden;
	padding: 0;
	margin: 0;
}


#program_wrapper figure {
	-webkit-backface-visibility: hidden;
	display: none;
	position: absolute; 
	top: 0; 
	left: 0;
	
	height:100%;
	width:100%;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;

	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	flex-flow: column wrap;
	align-items: center;
  	justify-content: center;	
}

#program_wrapper figure figcaption {
	display:block;
	margin:2em; /* Zorgt ervoor inhoud beeld de schermrand niet raakt */
	border:0.5em solid var(--color3);
	padding: 1.5em;
}

#program_wrapper figure figcaption h1 {
	font-size: 2em;
}

#program_wrapper figure figcaption h2 {
	border-top:0.35em solid var(--color3); 
	padding: 1.5em 1.5em 0 0;
	display:inline-block;
	margin-top:1.5em;
}

#program_wrapper figure a {text-decoration:none !important;}
#program_wrapper figure a:hover figcaption {
	animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-name: pulse;
}

/* OFFSTAGE
------------------------------------------------------ */

.logo_food {
	width:155px;
	float: right;
	padding-left:2em;
}