html {
	overflow-y: scroll;
}

body {
	font-family: 'Playfair Display', sans-serif!important;
	font-weight: 400;
	font-style: normal;
}




body.video .tekst {
	color: #fff!important;
	background-color:#000!important
}

body.video .tekst h1 {
	border-bottom: 1px solid #fff;
}


body.pics .tekst {
	color: #fff!important;
	background-color:#999!important
}

body.pics .tekst h1 {
	border-bottom: 1px solid #fff;
}





body.muziek,
body.partners,
body.video,
.zwart {
	background-color: #000!important
}

.grijs {
	background-color: #999!important
}

.wit {
	background-color: #fff!important;
	color:#000!important;
}



a {
	color:#444;
}

a:hover {
	color:#000;
	text-decoration: none;
}


.logoonpage {
	height:100px; margin-bottom: 2em;
}
.logoinnav {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}


.nav {
	position: fixed;
	z-index:10000;
	background: transparent;
	min-height: 100%;
	height: 100%;
	width: 120px;
}

.nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}


.nav ul li a {
	display: block;
	padding: 1em 28px;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
	color: #fff;
}

.agendaul,
.audioul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
.agendaul li,
.audioul li {
	border-bottom: 1px solid #000;
	margin-bottom: 1em;
	padding-bottom: 1em;
}
.picsul li {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}
.agendaul h1 {
	border: none!important;
	margin-top: 0.4em!important;
	margin-bottom: 0.4em!important;
	padding-bottom: 0!important;
	font-size: 1.6em!important;
}

.agendaul li span {
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	font-size: 0.85em
}
.picsul li {
	width: 33%;
	float: left;
}
.picsul li a {
	display: inline-block;
	margin-left: 0.4em;
	margin-right: 0.4em;
	margin-bottom: 0.8em
}





.nav ul li a:hover,
.nav ul li.actief a{
	display: block;
	background-color: #fff;
	color: #000;
}

.nav ul li.last a {
	display: inline-block;
	padding:0;
	border-bottom: none;
	border-right: none;
	color:rgba(255,255,255,0.5)!important;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif;
	display: none;
}

.nav ul li.last {
	display: none;
}

.nav ul li.glinav {
	border-bottom: none;
	border-right: none;
}


.nav ul li.last a:hover,
.nav ul li.last a.actief {
	color:rgba(255,255,255,0.8)!important;
	background:none!important;
}

.nav ul li.glinav a:hover,
.nav ul li.glinav a.actief {
	color:#000!important;
	background:none!important;
}


.nav ul li.last div {
	padding: 1em 28px;
	color:rgba(255,255,255,0.5);
}

.nav ul li.last div:last-child {
	padding: 0em 28px;
	color:rgba(255,255,255,0.5);
}




hr {
	background-color: #838363
}


body .nav ul li.logo a {
	border-right: none!important;
	border-bottom: none!important;
	pointer-events: none;
}
body .nav ul li.glinav a {
	border-right: none!important;
	border-bottom: none!important;
}


.nav ul li.last {
	border-right: none!important;
	min-height: 100%;
	height: 100%;
}

.nav ul li.glinav {
	border-right: none!important;
}



body.muziek .nav ul li.adriaan a {
	color: #838363;
	text-decoration: none;
}





.nav ul li.logo img {
	width: 120px;
	opacity: 1
}

.nav ul li.logo img:hover {
	opacity: 0
}





.nav ul li.newsnav:hover,
.nav ul li.partnersnav:hover {
	padding-right:0px;
 }
 
 



body.bio .nav ul li.logo img,
body .nav ul li.logo img {
	width: 120px;
	height: 100px;
	opacity: 0;
}



.nav ul li.adriaan h2,
.nav ul li.toretenore h2,
.nav ul li.newsnav h2,
.nav ul li.partnersnav h2,
.nav ul li.bionav h2,
.nav ul li.agendanav h2,
.nav ul li.audionav h2,
.nav ul li.videonav h2,
.nav ul li.picsnav h2,
.nav ul li.medianav h2,
.nav ul li.disconav h2 {
	font-size: 19px
}


body.projectadriaan2022 .imageholder {
	background: url(_img/IMG_7631.html) no-repeat;
	background-size: cover;
	background-position: center top;
}
body.projectadriaan2022.steun .imageholder {
	background: url(_img/adriaan2.html) no-repeat;
	background-size: cover;
	background-position: center top;
}

body.toretenore .imageholder {
	background: url(_img/toretenore.html) no-repeat;
	background-size: cover;
	background-position: center top;	
}

body.dionysos .imageholder {
	background: url(_img/x_VDE3471-2.html) no-repeat;
	background-size: cover;
	background-position: center top;	
}



button {
	background: none;
	border: 1px solid #838363;
	border-radius: 10px;
	color: #838363;
	padding: 2px 10px 4px 10px; 
}

.arrows button {
	background: none;
	border: none!important;
	border-radius: 0!important;
	color:rgba(0,0,0,0)!important;
	padding: 0!important; 
}






img.max300 {
	max-width: 300px;
	width: 100%;
}

.tekst {
	padding: 4em 3em 3em 3em;
}

.tekst h1 {
	font-size: 2em;
	font-weight: 500;
	margin-bottom: 0.8em;
	border-bottom: 1px solid #000;
	padding-bottom: 0.8em
}

.tekst h2 {
	font-size: 1.5em;
	font-weight: 300;
	margin-bottom: 0.8em;
}

.tekst h3 {
	font-size: 1.4em;
	font-weight: 400;
}

.tekst p {
	font-size: 0.946em;
	font-weight: 300
}

.formules  {
	margin-top: 2em;
	padding-left: 1.5em;
	padding-right: 1.5em;
	font-size: 0.8em;
	margin-bottom: 2em;
}

	

.slide-in-left {
	-webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/* ----------------------------------------------
	* Generated by Animista on 2020-9-26 11:38:59
	* Licensed under FreeBSD License.
	* See http://animista.net/license for more info. 
	* w: http://animista.net, t: @cssanimista
	* ---------------------------------------------- */

/**
	* ----------------------------------------
	* animation slide-in-left
	* ----------------------------------------
	*/
@-webkit-keyframes slide-in-left {
		0% {
				-webkit-transform: translateX(-1000px);
												transform: translateX(-1000px);
				opacity: 0;
		}
		100% {
				-webkit-transform: translateX(0);
												transform: translateX(0);
				opacity: 1;
		}
}
@keyframes slide-in-left {
		0% {
				-webkit-transform: translateX(-1000px);
												transform: translateX(-1000px);
				opacity: 0;
		}
		100% {
				-webkit-transform: translateX(0);
												transform: translateX(0);
				opacity: 1;
		}
}













.imageholder2 {
	padding: 0!important;
}



body.muziek .imageholder2 {
	padding: 0!important;
}


.slideshow .slides {
	display: grid;
}
 
.slideshow .slide {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	transition: opacity 0.4s;
}
 
.slideshow .slide.is-active {
	opacity: 1;
}

.cover {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 106vh;
}

ul.slides,
ul.slides li {
	padding: 0!important;
	margin: 0!important;
	margin-top: -2em!important;
}




.slideshow {
	cursor: none;
}
 
.slideshow .arrows {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
 
.slideshow .arrows .arrow {
	position: relative;
	width: 50%;
	cursor: inherit;
	visibility: hidden;
	overflow: inherit;
}
 
.slideshow .arrows .is-visible {
	visibility: visible;
}

.slideshow .arrows .is-visible {
	background: none;
	border: none!important;
	border-radius: 0!important;
	color:rgba(0,0,0,0)!important;
	padding: 0!important; 
}




 
.slideshow .arrows span {
	position: absolute;
	width: 44px;
	height: 44px;
	background-size: 44px 44px;
	mix-blend-mode: difference;
	filter: invert(1);
}
 
.slideshow .arrow-prev span {
	background-image: url(_img/slider-prev-arrow2.svg);
}

.slideshow .arrow-next span {
	background-image: url(_img/slider-next-arrow2.svg);
}


.slideshow button {
	background: none;
	border: none;
	border-radius: 10px;
	color: #838363;
	padding: 2px 10px 4px 10px; 
}

.slideshow button {
	background: none;
	border: none!important;
	border-radius: 0!important;
	color:rgba(0,0,0,0)!important;
	padding: 0!important; 
}


.ambassadeur {
	border: 1px solid #838363;
	padding: 10px;
	color:#838363;
}

.cite {
	font-size: 0.8em;
	font-style: italic
}


.newslist {
	padding: 0;
	margin: 0;
	list-style: none;
	color: #838363;
}

.newslist li {
	color: #838363;
}	

.newslist li a {
	color: #838363;
	display: block;
	border-bottom: 1px dotted #838363;
	margin-bottom: 1em;
	padding-bottom: 1em
}

.newslist li a:hover {
	color:#444
}


.mediasubnav {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.mediasubnav li a {
	padding-left: 3em!important;
	border-bottom: 1px solid #999!important
}

.mediasubnav li a:hover {
	background-color: #999!important;
	color:#fff!important;
}



/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
.divider {
	display: none;
}

.dionysosnowli a {
	border-right: none!important;
	border-top: none!important;
}


/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	.divider,
	.xxxxdionysosnowli {
		display: none!important;
	}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	.divider,
	.xxxxdionysosnowli {
		display: none!important;
	}
}

/* Small Devices, Tablets */
@media only screen and (max-width :801px) {
	.logo {
		width: 100%;
		text-align: center;
		padding: 1em;
		border-bottom:none;
		border-right: none;
		color: #fff;
	}	

	.steunen {
		display: none!important	
	}
	
	
	.logo img {
		width: 270px!important;
		opacity: 1!important;
	}
	.logo img:hover {
		width: 270px!important;
	}
	
	.dionysosnowli {
		display: block!important;
	}
	
	.divider {
		display: block;
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
	.fixed-top {
		position: relative;
		top: auto;
	}
	
	.cover {
		height: 82vh;
	}
		
	.nav {
		position: absolute;
		bottom: 20vh;
		z-index:10000000;
		min-height: auto;
		height: auto;
		width: 100%;
		border-bottom: none!important;
		background: transparent;
	}
		
	.nav ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		width: 100%;
	}
				
	.nav ul li {
		display: block;
		width: 100%;
		color: #444!important
	}
	
	.nav ul li a {
		display: inline-block;
		padding: 0px;
		border-bottom: none;
		border-right: none;
		color: #444!important
	}
		
	.nav ul li.last {
		border-right: none;
		min-height: 100%;
		height: 10px;
		display: none!important;
	}
	
	.nav ul li.last div {
		padding: 0;
		color:rgba(255,255,255,0.5);
		display: none!important;
	}
	
	.mediasubnav li a {
		padding-left: 0!important;
		border-bottom: none!important
	}

	.imageholder {
		height: 80vh!important;
	}
	
	.tekst {
		padding: 2em 1em;
	}
	
	span {
		border-bottom:none;
		width: 100%;
		display: block;
		text-align: center;
		background-color: #fff;
		color: #444!important
	}
	
	span a {
		color:#444!important;
		font-size: 1em!important;
		display: block;
		width: 100%;
		text-decoration: none!important
	}
	
	span h2 {
		color:#444!important;
		font-size: 1.2em!important;
	}	
	
	span li {
		border-right: none;
		border-bottom: 1px solid #000;
		padding: 0.6em 0.4em 0.4em 0.4em;
		color: #000!important
	}
	
	span li br {
		display: none;
	}
	
	.nav ul span li:hover,
	.nav ul span li.actief,
	.nav ul span li.actief a,
	.nav ul span li.actief h2 {
		background-color: #838363;
		color: #fff!important;
	}
	
	.nav ul span li.actief {
		border-bottom: 1px solid #fff
	}
	
	.nav ul span li h2,
	.nav ul span li a h2,
	body.dionysos .nav ul li.toretenore a h2,
	body.nieuws .nav ul li.toretenore a h2,
	body.partners .nav ul li.toretenore a h2, {
		color: #444!important
	}
	
	
	.nav ul span li:hover h2,
	body.dionysos .nav ul li.toretenore:hover a h2,
	body.nieuws .nav ul li.toretenore:hover a h2,
	body.partners .nav ul li.toretenore:hover a h2 {
		background-color: #838363;
		color: #fff!important;
	}

	.mediasubnav li a {
		padding-left: 0;
		border-bottom: none!important
	}
	
	.imageholder,
	.imageholder2 {
		border-right: none!important;
	}
	
	.lang {
		position: absolute;
		top: 20px;
		right: 30px;
		z-index: 100000;
		color:rgba(255,255,225,0.5);
	}
	
	.lang a {
		color:rgba(255,255,225,0.5)!important;
	}
	.lang a.actief,
	.lang a:hover {
		color:rgba(255,255,225,0.7)!important;
		text-decoration: none;
	}
	
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	.nav {
		bottom: 8vh;
	}
	.mediasubnav li a {
		padding-left: 0!important;
		border-bottom: none!important
	}
	.imageholder {
		height: 70vh!important;
	}
	.tekst {
		padding-top: 7em;
	}
	
}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	.nav {
		bottom: 15vh;
	}
	.mediasubnav li a {
		padding-left: 0!important;
		border-bottom: none!important
	}
	.imageholder {
		height: 70vh!important;
	}
	.tekst {
		padding-top: 7em;
	}
}


.bank {
	padding: 10px;
	border:1px solid #838363;
}



.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
	margin-bottom: 1.7em
}

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






/* Custom, iPhone Retina */ 
@media only screen and (max-width : 320px) {
	.sysd {
		position: static!;
		left: 20px;
		bottom:20px;
		font-size:10px;
		color:rgba(0,0,0,0.6)!important;
		text-decoration: none;
	}
	.sysd:hover {
		color:rgba(0,0,0,1)!important;
		text-decoration: none;
	}

}

.sysd {
	position: absolute;
	z-index: 10000;
	left: 20px;
	bottom:20px;
	font-size:10px;
	color:rgba(255,255,255,0.6)!important;
	text-decoration: none;
}

.sysd:hover {
	color:rgba(255,255,255,0.85)!important;
	text-decoration: none;
}



.partners {
	margin-bottom: 2em;
}

.partners img {
	height: 50px; 
	margin-right: 10px;
	margin-bottom: 10px;
}








.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



.gliangelilogo {
	height: 30px;
}



.anchor::before { 
	display: block; 
	content: " "; 
	margin-top: -50px; 
	height: 50px; 
	visibility: hidden; 
	pointer-events: none;
}






#myProgress {
	width: 100%;
	background-color: #838363;
	cursor: pointer;
	border-radius: 10px;
}

#myBar {
	width: 0%;
	height: 5px;
	background-color: #3f3f2e;
	border-radius: 0px;
}

.logo {
	fill: red;
}

.btn-action {
	cursor: pointer;
	padding-top: 10px;
	width: 30px;
}

.btn-ctn,
.infos-ctn {
	display: flex;
	align-items: center;
	justify-content: center;
}
.infos-ctn {
	padding-top: 20px;
}

.btn-ctn > div {
	padding: 5px;
	margin-top: 18px;
	margin-bottom: 18px;
}

.infos-ctn > div {
	margin-bottom: 8px;
	color: #000;
}

.first-btn {
	margin-left: 3px;
}

.duration {
	margin-left: 10px;
}

.title {
	margin-left: 10px;
	width: 100%;
	text-align: center;
}

.player-ctn {
	width: 100%;
	padding: 10px;
	background-color: #fff;
	margin: auto;
	margin-top: 100px;
}

.playlist-track-ctn {
	display: flex;
	background-color: #ececea;
	margin-top: 3px;
	cursor: pointer;
}
.playlist-track-ctn:last-child {
	/*border: 1px solid #ffc266; */
}

.playlist-track-ctn > div {
	margin: 10px;
}
.playlist-info-track {
	width: 80%;
}
.playlist-info-track,
.playlist-duration {
	padding-top: 7px;
	padding-bottom: 7px;
	color: #000;
	font-size: 14px;
	pointer-events: none;
}
.playlist-ctn {
	padding-bottom: 20px;
}
.active-track {
	background: #000;
	color: #fff !important;
	font-weight: normal;
}

.active-track > .playlist-info-track,
.active-track > .playlist-duration,
.active-track > .playlist-btn-play {
	color: #fff !important;
}

.playlist-btn-play {
	pointer-events: none;
	padding-top: 5px;
	padding-bottom: 5px;
}
.fa {
	color: #666;
	font-size: 16px;
}


@import url(../code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.pic {
	position: relative;
	overflow: hidden;
	width: 100%;
	background: #fff;
	text-align: center;
}
.pic * {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}
.pic img {
	max-width: 100%;
	vertical-align: top;
	margin-left: 0.4em;
	margin-right: 0.4em;
	margin-bottom: 0.4em
}
.pic i {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	font-size: 20px;
	color: #999;
	width: 40px;
	height: 40px;
	line-height: 40px;
	background: #ffffff;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	-webkit-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);
	transition: all 300ms 0ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
.pic a {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	position: absolute;
}

.pic.orange {
	background-color: #d67118;
}
.pic.orange i {
	color: #bf6516;
}
.pic:hover img,
.pic.hover img {
	opacity: 0.3;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
.pic:hover i,
.pic.hover i {
	-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
	transition: all 300ms 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.interartists {
	margin-top: 1em;
	margin-bottom: 1em;
	width: 150px;
}