@charset "utf-8";

@font-face {
    font-family: 'd-din';
    src: url('../font/d-din-italic-webfont.woff2') format('woff2'),
         url('../font/d-din-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic, oblique;
}

@font-face {
    font-family: 'd-din';
    src: url('../font/d-din-bold-webfont.woff2') format('woff2'),
         url('../font/d-din-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'd-din';
    src: url('../font/d-din-webfont.woff2') format('woff2'),
         url('../../font/d-din-webfont.woff') format('woff');
     font-weight: normal;
  	font-style: normal;
}
/* ------------------------- -------------------------*/ 
@font-face {
    font-family: 'd-dinexp';
    src: url('../font/d-dinexp-italic-webfont.woff2') format('woff2'),
         url('../font/d-dinexp-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic, oblique;
}

@font-face {
    font-family: 'd-dinexp';
    src: url('../font/d-dinexp-bold-webfont.woff2') format('woff2'),
         url('../font/d-dinexp-bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'd-dinexp';
    src: url('../font/d-dinexp-webfont.woff2') format('woff2'),
         url('../font/d-dinexp-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* ------------------------- -------------------------*/ 
@font-face {
    font-family: 'd-dincon';
    src: url('../font/d-dincondensed-webfont.woff2') format('woff2'),
         url('../font/d-dincondensed-webfont.woff') format('woff');
		font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'd-dincon';
    src: url('../font/d-dincondensed-bold-webfont.woff2') format('woff2'),
         url('../font/d-dincondensed-bold-webfont.woff') format('woff');
		font-weight: bold;
    font-style: normal;
}
/* ------------------------- -------------------------*/ 
html, body {
	font-family: 'd-din', sans-serif;
	font-weight: normal;
  font-style: normal;
	height: 100%;
}
	
.full-height-trick,  .view {
	height: 350px;
	
  }
@media(min-width:768px) {
	.full-height-trick,  .view {
			height: 400px;
			
		}
	}

@media(min-width:992px) {
	.full-height-trick,  .view {
			height: 600px;
			
		}
	}


  .full-width-trick {
	  width: 100%;
  }
  p, a {
	  font-family: 'd-din', sans-serif;
  }
h1, h2, h3, h4, h5, h6 {
	font-family: 'd-dincon', sans-serif;
}
h1 {
	color: #BE4E49;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.5em;
}
.lead {
	font-family: 'd-dinexp', sans-serif;
	font-weight: bold;
	color:rgba(110,3,10,1.00) ;
}
.sponsorbedrag {
	font-family: 'd-dincon', sans-serif;
	font-weight: bold;
	color:rgba(128,22,89,1.00) ;
	font-size: 1.2em;
	
}
.speeldata {
	font-family: 'd-dinexp', sans-serif;
	font-weight: bold;
	color: rgba(50,112,137,1.00);
}
.h3spacer{
	height: 41px;
	width:100%;
}
  .nav-logo {
	  display:none;
  }
  .top-nav-collapse .nav-logo {
	  display:block;
  }
 /* ------------------------- Background Image -------------------------*/ 

  html::before {
  content: ' ';
  display: block;
  background-color:#000000;
  background-image: url(../images/BGlarge.jpg);
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10; 
}
@media only screen and (max-width: 1024px) and (orientation:landscape) {
	html::before {
		background-image: url(../images/BGmedium.jpg);
	}
}
@media (orientation: portrait) {
	html::before {
		background-image: url(../images/BGportrait.jpg);
	}
}

 
 /* ------------------------- Adaptive titletext -------------------------*/ 
.noarhuuslogocontainer{
	position:relative;
	height:auto;
}

.noarhuustitle {
	top: 65px;
	margin-left:  auto;
	margin-right: auto;
	position: relative!important;
}
.noarhuussubtitle {
	top: 65px;
	position: relative!important;
	color:#FFFFFF;
}


.homealign-items {
  -webkit-box-align: end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
  margin-top:65px;
}
@media (orientation: portrait) {
	.titletext h1 {
	  font-size: 8vw;
	  text-align:center;
	}
	.titletext h5 {
	  font-size: 3vw;
	  text-align:center;
	}
	.homealign-items {
	  -webkit-box-align: start !important;
	  -ms-flex-align: start !important;
	  align-items: flex-start !important;
	  margin-top:65px;
}
}

.noarhuuslogocontainer{
}

.btn-outline-basecolor {
  border: 2px solid #4A4A4A !important;
  background-color: transparent !important;
  color: #4A4A4A !important; }
  .btn-outline-basecolor:hover, .btn-outline-white:focus, .btn-outline-white:active, .btn-outline-white:active:focus, .btn-outline-white.active {
    border-color: #000000 !important;
    background-color: transparent !important;
    color: #000000 !important; }
  .btn-outline-basecolor:not([disabled]):not(.disabled):active, .btn-outline-basecolor:not([disabled]):not(.disabled).active,
  .show > .btn-outline-basecolor.dropdown-toggle {
    background-color: transparent !important;
    border-color: #000000 !important; }

.btn-outline-white {
  border: 2px solid #FFFFFF !important;
  background-color: transparent !important;
  color: #FFFFFF !important; }
  .btn-outline-basecolor:hover, .btn-outline-white:focus, .btn-outline-white:active, .btn-outline-white:active:focus, .btn-outline-white.active {
    border-color: #000000 !important;
    background-color: transparent !important;
    color: #000000 !important; }
  .btn-outline-basecolor:not([disabled]):not(.disabled):active, .btn-outline-basecolor:not([disabled]):not(.disabled).active,
  .show > .btn-outline-basecolor.dropdown-toggle {
    background-color: transparent !important;
    border-color: #000000 !important; }

.img-btn {
	margin:0px!important;
	padding: 0px!important;
	border:none!important;
	box-shadow: none!important;
}
.voorstelling-img-container {
	background-color: rgba(0,0,0,1.00);
}
.img-btn:hover .voorstelling-img{
	opacity:0.9 ;
}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@media(max-width:767px) {
	
}
/* Small devices (tablets, 768px and up) */
@media(min-width:768px) {
	
	}

/* Medium devices (desktops, 992px and up) */
@media(min-width:992px) {
		.noarhuuslogocontainer{
		margin-top: 30px;
		}
	}

/* Large devices (large desktops, 1200px and up) */
@media(min-width:1200px) {
	.noarhuuslogocontainer{
		margin-top: 50px;
		}

	}



.navbar-collapse.collapse.show, .navbar-collapse.collapsing {
	 
	  
  }
  /* ------------------------- container -------------------------*/ 	
  .dark-bg {
	background-color: rgba(0,0,0,0.75);	  
  }
  .darkcolor-bg {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5b6d80+0,364a6b+100 */
	background: #5b6d80; /* Old browsers */
	background: -moz-radial-gradient(center, ellipse cover, #5b6d80 0%, #364a6b 100%); /* FF3.6-15 */
	background: -webkit-radial-gradient(center, ellipse cover, #5b6d80 0%,#364a6b 100%); /* Chrome10-25,Safari5.1-6 */
	background: radial-gradient(ellipse at center, #5b6d80 0%,#364a6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b6d80', endColorstr='#364a6b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	
  }
  .white-bg {
	background-color: #FFFFFF; /* Old browsers */
	background-color: rgba(255,255,255,1.00); 
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  }
  .black-bg {
	background-color: rgba(0,0,0,1.00);	  
  }

  /* ------------------------- voorstelling -------------------------*/ 	
  .voorstelling-container {
	postion: relative;
	background-color: rgba(255,255,255,0.90);
	border-radius: 5px;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	overflow-x: hidden;
  }
	.voorstelling-container p {
		font-size: .9rem;
	}
	.voorstelling-header {
	background-color: rgba(255,255,255,0.50);
	max-width: 80%;
	position: absolute;
	top: 0px;
	left: 15px;
	border-radius: 5px;		
	}

	.voorstelling-header h3 {
	font-family: 'd-dinexp', sans-serif;
	color: #252121;
	padding: 0px;
	margin: 0px;
	font-size: 1.4rem;
	}

.aankondiging-kerk {
	font-size: .9rem;
}
  
	.voorstelling-container h4 {
		font-family: 'd-dincon', sans-serif;
		font-size: 1.5rem;
		color: #FFFFFF;
		padding: 0px;
		margin: 0px;
	}
  .voorstelling-img {
		
		
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		
  }
	
  .voorstelling-title {
		position: absolute;
		width:auto;
		top: 0px;
		background-color: rgba(255,255,255,0.75);
		border-top-left-radius: 5px;
		border-bottom-right-radius: 5px;
	
  }
  .voorstelling-title h3 {
		font-size: 2vw;
		text-align: center;
		padding: 0px;
		margin: 0px;
		font-weight: bold;
		font-variant: small-caps;
  }
  
  .table-borderless > tbody > tr > td,
.table-borderless > tbody > tr > th,
.table-borderless > tfoot > tr > td,
.table-borderless > tfoot > tr > th,
.table-borderless > thead > tr > td,
.table-borderless > thead > tr > th {
   border: none;
	padding-top: 1px;
	padding-bottom:1px;
}
  @media (orientation: portrait) {
	  .voorstelling-title h3 {
	  font-size: 4vw;
	  text-align:center;
	  padding:0px;
	  margin:0px;
  	}
  }
  /* Large devices (large desktops, 1200px and up) */
@media(min-width:1200px) {
	 .voorstelling-title h3 {
		font-size: 1.5vw;
	 }
	}
  .voorstelling-description {
	   z-index:20;
	   
  }
.summary {
	min-height: 100px;
	
}
 /* ------------------------- playlist -------------------------*/ 	
 #playlist-container,
#gezocht-1-container,
#gezocht-2-container,
#gezocht-3-container
{
    position: fixed; /* Sit on top of the page content */
		padding: 0px;
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.90); /* Black background with opacity */
    z-index: 1100; /* Specify a stack order in case you're using a different order for other elements */
	overflow-y: scroll;
    /*cursor: pointer;  Add a pointer on hover */
}
.playlistbox {
	margin-top: 100px;
	padding: 15px;
	min-height: 100%;
	
	overflow: auto;
	background-color: rgba(255,255,255,1.00);
	border-radius: 5px;
	z-index: 1101;
}
.speellijsttable a:link, .speellijsttable a:visited, .speellijsttable a:active, .speellijsttable a {
	color: #425979;
	font-weight: bold;
}
.speellijsttable a:hover {
	color: #29374B;
}
.speellijstplaats {
	font-weight: bold;	
}
.speellijstdate {
	font-weight: bold;	
}

.plaats {
	font-family: 'd-dincon', sans-serif;
	font-size: 1.1rem;
	font-weight: bold
}
.locatie {
	font-weight: normal;
	font-size: 1.2rem;
	font-style: italic;
}
.datum {
	font-weight: bold;
	
}
.titel {
	font-family: 'd-dincon', sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	color: #BE4E49;
}
.maker {
	font-style: italic;
	font-size: .8rem;
}
 /* -------------------------table rolverdeling -------------------------*/
.rolverdeling {
	margin-left: auto;
	margin-right: auto;
}
.table-rolverdeling {
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
}
.td-rol {
	text-align: right;
	padding-right: 1rem;
	font-weight: bold;
}
.td-rol-single {
	text-align: center;
	padding-right: 0px;
	font-weight: bold;
}
.td-naam {
	text-align: left;
	padding-right: 1rem;
	
}
.td-empty {
	height:1rem;
}
.rolverdeling p {
	font-size: 0.9rem;
}
 /* -------------------------media -------------------------*/ 
  @media (max-width: 740px) {
    .header {
      height: 100vh;
    }
  }

  .top-nav-collapse {
    background-color: rgba(0,0,0,0.75) !important;
  }

  .navbar:not(.top-nav-collapse) {
   background-color: rgba(0,0,0,0.75) !important;
  }
   .navbar:not(.top-nav-collapse) .navbar-brand{
	   color: rgba(0,0,0,0.75) !important;
   }

  @media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) {
	background-color: rgba(0,0,0,0.75);
    }
  }
.bgcolorwhite {
	background-color: #FFFFFF;
}
.bgcolor1 {
	background-color: #b8c600;
}
.bgcolor2 {
	background-color: #e6d201;
}
.bgcolor3 {
	background-color: #fbca01;
}
.bgcolor4 {
	background-color: #e87e0e;
}
.bgcolor5 {
	background-color: #b7487b;
}
.bgcolor6 {
	background-color: #875697;
}
.bgcolor7 {
	background-color: #898cc1;
}
.bgcolor8 {
	background-color: #00a2e0;
}
.bgcolor9 {
	background-color: #5eb7c5;
}
.bgcolor10 {
	background-color: #27a5a2;
}
.textcolor1 {
	color: #b8c600;
}
.textcolor2 {
	color: #e6d201;
}
.textcolor3 {
	color: #fbca01;
}
.textcolor4 {
	color: #e87e0e;
}
.textcolor5 {
	color: #b7487b;
}
.textcolor6 {
	color: #875697;
}
.textcolor7 {
	color: #898cc1;
}
.textcolor8 {
	color: #00a2e0;
}
.textcolor9 {
	color: #5eb7c5;
}
.textcolor10 {
	color: #27a5a2;
	
}

  .hr-light {
    border-top: 3px solid #fff;
    width: 80px;
  }
  
  .jarallax {
    min-height: auto;
  }
#html5-watermark {
	display:none !important;
}
.google-maps {
        position: relative;
        padding-bottom: 40%; 
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }