/* Root variables */

:root {
	--menu-bg: rgb(57, 64, 72, 0.9); /* menu background */
}

.alert {
	display: none;
}

/** Custom fonts */
/*****************/

@font-face {
  font-family: "changa-one";
  src:
    local("changa-one"),
    url("../fonts/ChangaOne-Regular.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "cubanoregular";
  src:
    local("cubanoregular"),
    url("../fonts/Cubano-Regular.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "museo500";
  src:
    local("museo500"),
    url("../fonts/Museo500-Regular.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

/* change font-family and color */

h1, h2, h3, h4, h5, h6 { 
	font-weight: bold; 
	line-height: 120%; 
	margin: 20px 0 10px 0; 
	font-family: 'changa-one', 'cubanoregular', 'Open Sans', sans-serif; 
	color: #ebedf2;
	letter-spacing: 2px;
}

body,
.pf-main,
.pf-main .cbp-panel,
.pf-main .cbp-l-grid-masonry-projects-title,
.pf-main .cbp-l-caption-body a {
	font-family: 'museo500', 'Open Sans', sans-serif !important;	
}


/** menu */
/*********/

/*hide logo*/
.pf-menu .c-layout-header .c-navbar .c-navbar-wrapper .c-brand .c-logo {
	display: none;
}

/* don't show navbar before scrolling */
.pf-menu {
	display: none;
}

.c-page-on-scroll .pf-menu {
	display: initial;
}

.pf-menu,
.c-layout-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 75px;
	width: inherit;
	z-index: 1000;
}

.c-page-on-scroll .c-layout-header.c-layout-header-3.c-layout-header-3-custom-menu .c-navbar .c-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before,
.c-page-on-scroll .c-layout-header.c-layout-header-3.c-layout-header-3-custom-menu .c-navbar .c-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before,
.c-page-on-scroll .c-layout-header.c-layout-header-3.c-layout-header-3-custom-menu .c-navbar .c-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before,
.c-page-on-scroll .c-layout-header.c-layout-header-3.c-layout-header-3-custom-menu .c-navbar .c-mega-menu > .nav.navbar-nav > li.c-active > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before 
{
	top: 24px;
}

.pf-menu .c-hor-nav-toggler {
	background-color: var(--menu-bg);
}

.pf-menu button.c-hor-nav-toggler {
	color: var(--menu-bg);
}

.c-mega-menu-dark-mobile li {
	padding-left: 20px;
}

.c-navbar .container {
	width: inherit;
}

.pf-logo .img-responsive  {
	max-width:50%;
}

/** General layout */

/* screen readers only */
.block-voorstellingen-muziek .cbp-l-grid-masonry-projects-title {
	border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/*******************/

.pf-main > div {
	padding: 50px 0px 30px 0px;
	text-align: center;
	margin-left: -15px;
	margin-right: -15px;
}

.pf-main > div {
	padding-left: 5px;
	padding-right: 5px;
}


.message {
	font-size: 20px;
}

.pf-titel h3 {
	font-size: 35px;
	text-transform: initial;
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
}

.pf-namen .pf-namen-lijst {
	margin-left: auto;
	margin-right: auto;
	text-align: justify;
}

.pf-namen-lijst div {
	display: inline;
}


/* laatste bullet van namenlijst verbergen */
.pf-namen-lijst .naam-voornaam:last-of-type .views-field-nothing:last-of-type {
	display: none;
}

/** pop-ups */
/************/

.inline *,
.ensemble-rij h2 {
	display: inline;
}

.ensemble-rij p {
	margin-bottom: 0px;
}

.persoon-naam,
.views-label-field-instrument,
.views-label-field-deelnemers,
.views-label-field-repliek,
.voorstelling-title
 {
	font-size: 100%;
	font-weight: 900;
}	

.inline.categorie h2,
.instrument-per-deelnemer h2 {
	margin-right: 9px;
}

.field__label,
.categorie h2,
.uitvoering-per-deelnemer h2,
.instrument-per-deelnemer h2,
.uitvoering-per-voorstelling h2,
.deelnemers-per-voorstelling h2,
.ensembles-per-voorstelling h2,
.informatie-per-voorstelling h2,
.field--name-field-vraag .field--name-field-vraag,
.ensemble-naam,
.locatie-title
 {
	font-family: 'museo500', 'Open Sans', sans-serif;
	letter-spacing: 0px;
	font-size: 100%;
	font-weight: 900;
	color: #921913;
	margin-bottom: 0px;
}

.ensemble-title {
	margin-top: 20px;
}

.uitvoering-rij h2,
.voorstelling-rij h2,
.ensemble-rij h2,
#block-jango-sub-content h2:first-of-type span:first-of-type { 
	display: none;
}

.views-field-field-instrument,
.views-field-field-instrument ul {
	display: inline;
	padding-left: 0px;
}

.views-field-field-instrument li  {
	list-style-type: none;
	display: inline;
}

.views-field-field-instrument li:first-child::before  {
	content: " — ";
}

.views-field-field-instrument li:not(:first-child)::before  {
	content: ", ";
}

#block-jango-sub-content {
	margin-bottom: 15px;
}

.ensemble-title div,
.dirigent h2,
.ensemble-data h2 {
	display: inline;
}

.dirigent h2 {
	color: #5c6873;
	font-weight: 300;
}

.dirigent-name,
.field--name-field-dirigent,
h2.ensemble-data-title {
	font-weight: 900;
	color: #5c6873;
}

.ensemble-data-row .field__item {
	display: inline;
}

.ensemble-data-row .field__item,
.ensemble-data-row p {
	padding-left: 10px;
}

.uitvoering-rij .field--name-field-voorstelling>.field__item, 
.voorstelling-rij .field--name-field-voorstelling>.field__item, 
.uitvoering-per-voorstelling,
.uitvoering-per-voorstelling .voorstelling-rij,
.deelnemers-per-voorstelling,
.ensembles-per-voorstelling,
.informatie-per-voorstelling {
	margin-bottom: 8px;
}

.locatie-info {
	margin-top: 10px;
}

.instrument-per-deelnemer h2 {
	display: inline-block;
}

/* footer */

.footer {
	padding-top: 25px;
	padding-bottom: 25px;
	background-color: var(--menu-bg);
	text-align: center;
}

/** MEDIA QUERIES */
/******************/
/*
X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap
*/

.pf-header-image img {
	width: 80%;
}

.pf-namen-lijst {
	width: 85%;
}

/* two-column layout */

.persoon-1-column,
.persoon-1-column img,
.uitvoering-1-column,
.locatie-1-column,
.locatie-1-column .field__items,
.locatie-title,
.locatie-2-column,
.locatie-info {
	display: block;
	margin-bottom: 15px;
}

.persoon-naam {
	margin-bottom: 15px;
}

.persoon-2-column,
.uitvoering-2-column,
.locatie-2-column {
	display: none;
	margin-bottom: 15px;
}

.layout--twocol-section--33-67>div {
	display: inline-block;
}

.layout--twocol-section--33-67 .layout__region--first {
	width: 33%;
}

.layout--twocol-section--33-67 .layout__region--second {
	width: 67%;
	float: right;
	padding-left: 15px;
}


/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {
	
	
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.persoon-2-column,
	.uitvoering-2-column,
	.locatie-2-column {
		display: block;
	}
	.persoon-1-column,
	.uitvoering-1-column,
	.locatie-1-column {
		display: none;
	}
	
	/* Show if edited in the layout builder! */
	.layout-builder .persoon-1-column,
	.layout-builder .uitvoering-1-column,
	.layout-builder .locatie-1-column {
		display: initial;
	}
	
	.locatie-kaart {
		width: 376px;
		height: 250px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 

	.pf-header-image img {
		max-width: 60%;
	}
	
	.pf-namen-lijst {
		width: 70%;
	}
	
	.c-page-on-scroll .c-layout-header.c-layout-header-3 {
		background-color: var(--menu-bg);
	}
	
	.c-layout-header .c-navbar .c-mega-menu.c-pull-right {
		float: none;
	}
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 

}

/* to override components of the django-theme */
@media (max-width: 991px) {
    .c-layout-header.c-layout-header-dark-mobile .c-brand > .c-hor-nav-toggler {
        position: relative;
        top: -1px;
        display: inline-block;
        background-color: var(--menu-bg);
        padding: 5px 8px 6px 8px;
    }
	
	.c-layout-header.c-layout-header-dark-mobile,
	.c-layout-header .c-navbar .c-mega-menu.c-mega-menu-dark-mobile,
	.c-layout-header.c-layout-header-dark-mobile .c-brand > .c-hor-nav-toggler {
        background: var(--menu-bg);
    }
}

/**********************************************************************/
/* Point final 25																								 */
/**********************************************************************/

.pf25 {
	/* color variables */
	--ul: #e9f3f4; /* ultralight */
	--ll: #b4d5d9; /* lightest */
	--l: #cf9da0; /* light */
	--mm: #DDE6E7; /* medium */
	--m: #3b9024; /* middle */
	--d: #012908; /* dark */
	/*end variables */
	
	background-color: #e9f3f4;
	
	h1, h2, h3, h4, h5, h6 {
		color: #012908;
	}

	.pf-header {
		/*background-color: #012908;*/
		background-color: #012908;
	}
	
	.c-theme-nav li.c-active {
		color: #e9f3f4;
	}		
	
	.pf-titel h3 {
		color: #012908;
	}
	
	.pf-kalender-muziek {
		background-color: #DDE6E7;
	}
	
	.pf-namen {
		background-color: #012908;
		color: #e9f3f4;
	}

	.pf-titel-naam h3,
	.pf-titel-finalist h3, 
	.pf-finalisten .cbp-l-grid-masonry-projects-title {
		color: #b4d5d9;
	}
	
	.pf-finalisten .cbp-l-grid-masonry-projects-title:hover {
		color: #b4d5d9;
		cursor: pointer;
	}
	
	.pf-finalisten .cbp-caption {
		border: 8px solid #e9f3f4;
	}
	
	.pf-finalisten {
		background-color: #3b9024;
		color: #e9f3f4;
	}
	
	/* menu-colors */
	
	.c-theme-nav li.c-active > a:not(.btn) {
		color: #3b9024 !important;
	}
	
	.c-layout-header.c-layout-header-dark-mobile .c-brand > .c-hor-nav-toggler > .c-line {
        background: #e9f3f4;
    }
	
	 .c-layout-header.c-layout-header-dark-mobile .c-brand > .c-search-toggler > i,
	.c-layout-header.c-layout-header-dark-mobile .c-quick-search > .form-control,
	.c-layout-header.c-layout-header-dark-mobile .c-quick-search > span	 {
		color: #e9f3f4;
	}
	
	.c-layout-header.c-layout-header-dark-mobile.c-mega-menu-shown .c-hor-nav-toggler {
		background: #e9f3f4;
	}
	
	.footer,
	.footer a {
		color: #e9f3f4;
	}
	
	.footer a {
		text-decoration: underline dotted;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}