@import url('https://fonts.googleapis.com/css?family=Lato|Rubik');

html {
    scroll-behavior:smooth
}

body, .pure-g [class *= "pure-u"] {
    font-family: 'Lato', 'Avenir', sans-serif;
}

h1, h2, h3, h4, h5, h6, nav, #nav, .title {
    font-family: 'Rubik', 'Helvetica', sans-serif;
    text-transform: uppercase;
}

    
html, body {
    height: 100%;
}

body {
	font-size: 18px;
    font-weight: 400;
    
    color: #d73728;
    background-color: rgb(253, 232, 223); /* roze */
    background-color: rgb(255, 248, 245); /* lichter roze */
}

body.single-event {
    background-color: #461a51;
    color: white;
    font-weight: 300;
}

body.page-agenda {
    background-color: #461a51; /* paars */
}




.pure-g > div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.l-box {
    padding: 0 1em;
}


.clear {
	clear: both;
}


img {
/*    width: 100%;  dit is toch niet handig? */
    height: auto;
    max-width: 100%;
}

p {
    margin: 0 0 1em 0;
    padding: 0;
    line-height: 1.7em;
}

a {
    color: #d73728;
    font-weight: 700;
    text-decoration: none;
}

p a:hover {
    border-bottom: 2px solid #d73728;
}

a.back:hover {
    border: none!important;
    color: #d73728!important;
}

a.more-link {
    display: table-cell; /*block;*/
    margin: 1em 0 0 0;
}


/*Basic structure*/
#wrapper {
    position: relative;
}

.home #wrapper {
    background-color: #461a51;
}










/*Header*/
#header {
    background-color: #d73728;
}

#header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 19.7vw;
    z-index: 100;
}

#header h1 {
	white-space: nowrap;
    margin: 0;
    padding: 0;
    display: none;
}

#header .container {
    width: 100%;
    max-width: 1280px;

    display: flex;
    overflow: hidden;
	margin: 0 auto;
    align-items: center;
    justify-content: space-between;
}

    #header #brand {
        flex-shrink: 0;
    }
    
    #header #hamburger {
        flex-shrink: 0;
        flex-basis: 21vw;
    }

        #brand img {
            margin: 0;
            height: 19.5vw;
            width: auto;
            display: block;
            min-height: 50px
        }

    
    #nav, .nav {
        flex-basis: auto;
        display: flex;
        flex-direction: column-reverse;
        text-align: right;
        width: 100%;
        margin-right: 45px;
        display: none;
    }

    #submenu ul {
        padding-right: 20px;
    }
    
    
    #nav ul, .nav ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	
    }

    #nav li, .nav li {
        display: inline-block;
        vertical-align: middle;
        margin: 0;
        padding: 0;
        margin-left: .7em;
    }

    #nav a, .nav a {
        display: inline;
        white-space: nowrap;
        padding: 0;
        margin: 0;
        text-decoration: none;
	    color: white;
    }

    .home #nav a, .home .nav a {
        text-shadow: 0px 0px 15px #000000;
    }

    #nav .sub-nav a {
        font-size: .8em;
        color: white!important;
    }


    #nav a:hover, 
/*    #nav li:hover > a,*/
    #nav .current-page-item > a, 
    #nav .current_page_item > a, 

    #nav .current-menu-item > a,
    #nav .current_menu_item > a,

    #nav .current-page-ancestor > a, 

    #nav .current-page-parent > a, 
    #nav .current_page_parent > a, 

    #nav .current-post-parent > a, 
    #nav .current_post_parent > a, 

    #nav .current-menu-parent > a,
    #nav .current_menu_parent > a 
    { 
        border-bottom: 2px solid rgb(255, 255, 255);
    }
        
    #nav .sub-menu li, #nav .sub-menu a {
        border: none!important;
    }

    /*sub menu*/
    #nav ul.sub-menu {
        display: none;
        z-index: 10000;
        position: absolute;
        padding: 0;
        margin: 0;
        
        margin-left: -17px;
        margin-top: 0px;
        padding-top: 2px;
    }

    #nav .sub-menu li, #nav .sub-menu a {
    	text-align: left;
    }

    #nav li:hover > .sub-menu {
    	display: block;
    }

    /*geen sub sub :) */
    .sub-menu .sub-menu {
    	display: none;
    }

    #nav .sub-menu li {
        display: block;
        font-size: .85em;
        margin-left: 0;
        background-color: rgb(215, 54, 39);
        padding: .5em 0;
    }

    #nav .sub-menu a {
        padding: 0em 1em;
        display: block;
        line-height: 30px;
    }
    
    #nav .sub-menu a:hover {
        border: none!important;
        background-color: rgba(255,255,255,.4);
    }


    





/*Main styling*/
h1,
h2,
h3,
h4,
h5,
h6,
.nav a {
}

a  {
    font-weight: 700;
}

h1 {
    margin: .67em 0 .25em 0;
}

h2 {
    font-size: 1.7em;
    margin: 1em 0 .67em 0;
}

















/* Basic WordPress Blog Styles */
.entry-content img {
	margin: 0 0 1.5em 0;
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
  margin-right: 1.5em;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
  margin-left: 1.5em;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption {
	text-align: center;
	margin-bottom: 1.5em;
}
.wp-caption img {
	border: 0 none;
	margin: 0;
	padding: 0;
}
.wp-caption p.wp-caption-text {
	margin: 0;
}
.wp-smiley { 
	max-height: 1em;
	margin:0 !important;
}
.gallery dl {
	margin: 0;
}
.gallery-caption {
	margin:-1.5em 0 0 0;
}


blockquote.left {
	float: left;
	margin-left: 0;
	margin-right: 20px;
	text-align: right;
	width: 33%;
}
blockquote.right {
	float: right;
	margin-left: 20px;
	margin-right: 0;
	text-align: left;
	width: 33%;
}



/*remove margin under Google maps frame:*/
iframe {
    display: block!important;
}









/*Mobile nav*/
#responsive_nav {
    position: absolute;
    top: calc(21vw - 6px);
    z-index: 999;
    width: 100%;
    overflow: hidden;
    display: none;
    background-color: rgb(215, 55, 40);
    border-top: 2px solid rgb(72, 44, 78);
}

@media (min-width: 767px) {
	#responsive_nav {
	    top: 50px;
	}

	.home #responsive_nav {
	    top: 90px;
	}

}



#responsive_nav.open {
	height: auto;
}

#responsive_nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#responsive_nav li {
	padding: 0;
	display: block;
}

#responsive_nav li a {
    display: block;
    text-decoration: none;
    font-size: 1em;
    color: white;
    font-weight: 400!important;
    padding: .6em 1em;
    border-bottom: 2px solid rgb(72, 44, 78);
    padding-left: 28px;
}

#responsive_nav .sub-menu a::before {
    content: "–  ";
}




/*https://codepen.io/designcouch/pen/Atyop*/
/*https://codepen.io/designcouch/pen/Atyop*/
#hamburger {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#hamburger .square-box {
    position: relative;
    width: 50%;
    min-width: 50px;
    margin: 0 auto;
}

#hamburger .square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

#hamburger .square-content {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
}

#hamburger span {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    display: block;
    height: 3px;
    background-color: white;
    
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#hamburger span:nth-of-type(2) {
    top: 50%;
}

#hamburger span:nth-of-type(3) {
    top: 80%
}

#hamburger.open span:nth-child(1) {
  top: 50%;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#hamburger.open span:nth-child(2) {
  opacity: 0;
  left: +20vw;
}

#hamburger.open span:nth-child(3) {
  top: 50%;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}




.flex-container {
    display: flex;
    justify-content: center;    
    align-content: stretch;
}

.flex-item {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0;    
}
















/*Forms*/

/*voor reserveren oa:*/

input, textarea, select {
    color: #461a51;
    border: none;
    width: 100%;
	padding: .5em;
	margin: .5em 0;
	box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
}

input[type="submit"], button[type="submit"], #reserveren .em.pixelbones.input input[type=submit], .em.pixelbones .input button.button-primary {
    color: rgb(255, 255, 255)!important;
    width: 70%;
    border: none!important;
    display: block;
    box-sizing: border-box;
    background-color: rgb(232, 109, 38)!important;

    border-radius: 5px;
    padding: .7em 2em;
    font-weight: 200;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;    
    border: none;
    display: block;
    margin: 1em auto;
/*    width: 60%;*/
    max-width: 300px;
    text-align: center;
    cursor: pointer;
}

.em.pixelbones.input button {
	background-color: white!important;
    border: none!important;
}


.em.pixelbones.input button.button-primary:hover,
input[type="submit"]:hover, 
button[type="submit"]:hover, 
#reserveren .em.pixelbones.input input[type=submit]:hover, 
.em.pixelbones .input button.button-primary:hover
{
	background-color: #461a51!important;
}

.slideOpen .slideOpen input[type="submit"] {
    background-color: #461a51;
}


label {
    display: inline-block;
    width: 100%;
    text-align: left;
}

#reserveren label {
    display: initial;
}


input[type="radio"], input[type="checkbox"] {
    width: auto!important;
	margin-right: 5px!important;
}

form i {
    margin: 0 -15px;
}


.em-warning {
    background: rgb(230, 103, 21);
    color: rgb(255, 255, 255);
    padding: 1em;
}



div.wpcf7-validation-errors, .em-booking-message {
    border: none!important;
    background-color: rgb(255, 211, 207);
    padding: 1em 1em .1em 1em;
    color: rgb(215, 55, 40);
    margin: 2em 0em;
}

.em-booking-message-success {
    background-color: rgb(50, 165, 55);
    padding: 1em;
    color: rgb(255, 255, 255);
}

div.wpcf7-mail-sent-ok {
    border: none!important;
	background-color: #2bb34f;
}



div.wpcf7-response-output {
    margin: 0px!important;
    padding: 1em!important;
    color: #fff;
}

img.ajax-loader {
    width: auto!important;
    height: auto!important;
}


.wpcf7 form.sent .wpcf7-response-output {
	border-color: #46b450; /* Green */
	background-color: #46b450;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	border-color: #dc3232; /* Red */
	background-color: #dc3232;
}

.wpcf7 form.spam .wpcf7-response-output {
	border-color: #f56e28; /* Orange */
	background-color: #f56e28; /* Orange */
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #ff3200;
    background-color: #ff3200;
}



.css-event-form label {
	color: #d73728;
}

.css-event-form form i {
	margin: 0;
}





.hidden {
    display: none;
}



.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
}





/*Vertical align and center*/
.vertical { 
    display: table; 
    width: 100%;
    height: 100%;
}

.vertical-item { 
    display: table-cell!important; 
    text-align: center; 
    vertical-align: middle;
}





/*Main*/
#main {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
/*    overflow: auto; is die nodig? bij breedte 840 krijg je overflow opzij... */
/*    display: flex; is die nodig?*/
    min-height: calc(100vh - 80px - 268px);
	width: 100%;
}

.home #main {
    min-height: 1px;
}

.home div#main {
    display: block;
    position: relative;
    max-width: 100%;
    background-color: #461a51;
}


    #content, #nieuws {
    	width: 100%;
        padding: 2em 0 1em 0;
    }
    
    .home #content, .home #nieuws {
        background-color: rgb(255, 248, 245);
    }





/* Agenda */
.home .front_wrapper {
    padding-top: 5vw;    
}
    
#agenda {
    background-color: #461a51;
    color: white;
}


/* agenda pagina */
@media (min-width: 769px) {


    #nav {
        font-size: .85em;
    }
    
    .page-agenda #agenda > .container {
        display: flex;
        flex-wrap: wrap;
    }
	
    #agenda #buttons, #button_spacer {
        flex-basis: 100%;
    }
    
    .page-agenda #agenda #lijst { 
        flex-basis: 50%;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    .page-agenda #agenda ul {
        margin: 0!important;
    }
    
    .page-agenda #agenda #kaart {
        flex-basis: 50%;
        display: block;
        overflow: hidden;
    }

    .page-agenda #agenda #lijst, .page-agenda #agenda #kaart_container, .page-agenda #agenda #kaart {
        height: calc(100vh - 72px - 0px);
    }
    
    .page-agenda .kaart_wrapper {
        margin: 0!important;
    }
    
    #kaart_toggle {
        display: none!important;
    }
        
}



#agenda ul, 
#nieuws ul {
    padding: 0;
    list-style-type: none;
}

#agenda li, #nieuws .flex-container {
    margin: 0;
    justify-content: flex-start;
    overflow: hidden;
}

#agenda li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.08);
}

#agenda .flex-item:nth-of-type(1), 
#nieuws .flex-item:nth-of-type(1) {
    flex-basis: 70px;
    min-height: 70px;
}

#agenda .flex-item, 
#nieuws .flex-item 
{
     -webkit-box-flex: 0;
    -ms-flex-positive: 0;
            flex-grow: 0;
    
    -ms-flex-negative: 1;
          flex-shrink: 1;
}

#agenda .flex-container .flex-item:first-of-type,
#nieuws .flex-container .flex-item:first-of-type
{
    -ms-flex-negative: 0;
          flex-shrink: 0;
          flex-shrink: 0;
}

#agenda #lijst span {
    font-size: .6em;
    text-align: center;
    display: block;
    margin-top: .5em;
    
    display: none;
}


.flex-item .date {
    font-weight: 200;
    text-transform: uppercase;
}

.title {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

#agenda .title a {
    color: rgb(255, 255, 255);
    font-size: 1.4em;
    font-weight: 300;
    text-transform: uppercase;
}

#agenda a {
    color: white;
    font-weight: 300;
}
#agenda a:hover {
    border-color: white!important;
}

#agenda a:after {
    content: ', ';
}

#agenda a:last-of-type:after {
    content: '';
}

#agenda .thumb, #nieuws .thumb {
    height: 70px;
    width: 70px;
    background: rgb(255, 255, 255);
}


#agenda #kaart {
    display: none;
    overflow: visible;
}

.single-event a {
    color: rgb(255, 160, 95);
}







/*Agenda details*/
.agenda_details .meta {
    margin-top: 1em;
}

.agenda_details .meta span {
    display: block;
    margin-bottom: .5em;
    font-weight: 200;
}

.agenda_details .meta h2 {
    margin: .5em 0 .5em 0;
}

.agenda_details a {
    font-weight: 300;
}

.meta strong {
    font-weight: 700;
}

.Dansen .bands,
.Dansen .instructie,
.Dansen .sessie,
.Balmuziek .bands,
.Balmuziek .instructie,
.Balmuziek .sessie
{
    display: none!important;
}

.Bal .docenten,
.Sociales .docenten,
.Overig .docenten {
    display: none!important;
}

.em-location-map-container {
    width: 100%!important;
}


.em-map-balloon {
    color: rgb(0, 0, 0);
}

.bands a:after {
    content: ', ';
}

.bands a:last-of-type:after {
    content: '';
}


.docenten a:after {
    content: ', ';
}

.docenten a:last-of-type:after {
    content: '';
}

.em-booking-form-section-details .em-login-trigger {
	display: none;
}


.em.em-event-booking-form .em-login .em-login-actions {
    display: inherit!important;
}

.em.em-event-booking-form .em-login .em-login-actions .em-login-meta {
    padding-left: 0px;
}

.em.pixelbones a {
    color: rgb(255, 160, 95)!important;
}

.em-login {
    padding: 1em!important;
    background-color: #982318;
}

.em {
	--text-color-normal: white!important;
}


/* Reserveren */
#reserveren h3 {
    font-size: 1.17em!important;
	margin-bottom: 0px!important;
}

.em-booking-section-title {
    display: none;
}


#em-booking, .em-booking-login {
    margin-top: 2em;
}

div.em-booking-login {
    padding: 1em;
    margin: 0;
    border-left: none;
}

#em-booking table {
    width: 100%;
    text-align: left;
    margin: 1em 0;
}

#em-booking a {
    color: rgb(255, 182, 117);
}

.em-booking-section {
    padding: 0!important;
}

#reserveren .em.pixelbones {
	color: white!important;
}



/*Reserveringen pagina*/

/*Hide event manager link: */
#em-wrapper > p {
    display: none;
}

#em-wrapper #agenda {
    margin: 0 -1.5em;
}

#em-wrapper ul {
    list-style: none;
    padding: 0;
    margin: 0 -1.5em;
}

#em-wrapper li {
    padding: .3em 1.5em;
}

#em-wrapper .table-wrap li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.9);
}


#em-wrapper a.button {
    display: inline-block;
    width: auto;
    padding: .4em 1em;
}


#em-location-reset a {
    text-decoration: underline!important;
    font-weight: 800!important;
    color: #ff1a09!important;
}


.em-location-data th {
    text-align: left;
    padding-right: 1em;
}

#em-location-data table.em-location-data {
    width: 100%;
}










/*Kaart*/

#kaart {
    background-color: #461a51;
    color: white;
    overflow: auto;
}

#kaart a {
    color: rgb(255, 255, 255);
}

#kaart .lineup a:after {
    content: ', ';
}

#kaart .lineup a:last-of-type:after {
    content: '';
}















/*Nieuws overicht*/
.post-type-archive-nieuws #main {
    max-width: 100%!important;
}
#nieuws > .wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0!important;
}

.width_wrap {
    max-width: 800px;
    margin: 0 auto!important;
    padding: 0 1em;
    
}

article {
    padding: .1em 0em;
    
}


article:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.9);
}

#nieuws .title a {
    font-size: 1.4em;
    font-weight: 300;
    text-transform: uppercase;
}

#nieuws li:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.9);
}

/*Nieuwspagina*/

.navigatie > div {
    background-color: rgb(222, 54, 28);
    margin-bottom: 1em;
    color: rgb(255, 255, 255);
}

.navigatie span {
    padding: .5em;
    display: block;
}

.navigatie a {
    color: rgb(255, 232, 223);
}

#nieuws a.back {
    color: rgb(72, 45, 78);
}







/*Archief*/

#archief {
    margin-top: 1em;
}

    #archief ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
	
    }

    #archief li {
        margin: 0;
        padding: .5em 1em;
        margin: 0 -1.5em;
        display: flex;
        align-items: center;
        justify-content: left;
    }
    
    #archief li:nth-child(odd) {
        background-color: rgba(255, 255, 255, 0.08);
    }
    
    
    #archief span {
        font-size: .8em;
    }
    
    #archief span.date {
        flex-shrink: 0;
        margin-right: .5em;
        font-size: .7em;
    }
    
    #archief a.link {
        color: rgb(255, 248, 245);
        border-bottom: 1px solid rgb(255, 248, 245);
    }
    
    .archive #archief a.link { /* bands en docenten */
        color: rgb(215, 55, 40);
        border-bottom: 1px solid rgb(215, 55, 40);
    }
    
    #archief span.program {
        margin-left: .5em;
    }

    #archief .program a:after {
        content: ', ';
    }

    #archief .program a:last-of-type:after {
        content: '';
    }

    


    /* Archeif plugin: */
    
    #em-wrapper .events-table a:after {
        content: ', ';
    }

    #em-wrapper .events-table a:last-of-type:after {
        content: '';
    }




/*Subscribe*/
#subscribe {
    text-align: center;
    margin: 1em 0;
    color: rgb(255, 255, 255);
}

a.button {
    border-radius: 5px;
    background-color: rgb(215, 55, 40);
    color: rgb(255, 255, 255);
    padding: .7em 3em;
    font-weight: 200;
    font-size: 18px;
    font-family: 'Rubik', sans-serif;
    border: none;
    display: block;
    margin: 1em auto;
    width: 60%;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
}


a.button:hover {
    background-color: rgb(227, 103, 26);
}

a.back {
    color: rgb(255, 255, 255);
    font-weight: 200;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;    
    border: none;
    display: block;
    margin: 1em 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}



#footer {
    background-color: #461a51;
    color: white;
    overflow: auto;
    padding: 1em 0 0 0;
}

    #footer .container {
        padding: 0!important;
        margin: 0 1.5em;
    }

    #footer .flex-container {
        display: flex;
        justify-content: center;
        align-content: stretch;
        width: 100%;
        max-width: 880px;
        margin: 0 auto;
    }

    #footer .flex-item {
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        
        
        flex-basis: 33%;
        font-size: 14px;
    }


    #footer .middle img {
        width: 40px;
        border-radius: 30px;
        margin-right: 10px;
    }

    #footer .middle a {
        border: none!important;
    }
    
    #footer_art {
        background-color: #461a51;
        width: 100%;
    }
    
    #footer_art img {
        width: 100%;
        display: block;
    }

    #footer p a {
        color: white!important;
        border-bottom: 1px solid white;
    }
    
    #footer p a:hover {
        color: rgb(215, 55, 40)!important;
        border-bottom: 1px solid rgb(215, 55, 40);
    }
    
    #footer h3 {
        font-size: 1.5em;
    }


    .copy {
        text-align: center;
        color: white;
        font-size: .7em;
        margin: 0 auto;
        padding: 1em 0;
    }
    
    .copy a {
        color: white!important;
        font-weight: 100;
    }
    
    @media (max-width: 768px) {
	    #footer .flex-container {
	        display: block;
            text-align: center;
            margin-bottom: 1em;
        }
        
        #footer .flex-item {
            margin-bottom: 3em;
        }
    }
    
    
/*arrow*/
.arrow {
    background: transparent url('../images/pijl.png') no-repeat center center;
    background-size: contain;
    margin: 0 auto;
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 5vw;
    right: 50%;
    margin-right: -25px;
    cursor: pointer;
    z-index: 99999;
    
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;    
}

.arrow:hover {
    margin-bottom: -10px;
}

.arrow a {
    width: 50px;
    height: 50px;
    display: block;
}


/*jumbo*/
.jumbo {
    background: url('../images/sfeer3.jpg') no-repeat center center;
    background-size: cover;
    height: 45vw;
    width: 100%;
    position: relative;
    z-index: 100;
    margin: 0;
    display: table;
}

.jumbo h3 {
    font-size: 5vw;
    width: 100%;
    color: rgb(255, 255, 255);
    margin: 0 auto;
    text-transform: none;
    font-family: 'Lato', 'Avenir';
}

@media (max-width: 768px) {
	.jumbo h3,
    .arrow {
	    display: none;
	}
}

.jumbo .button {
    width: auto;
    display: inline-block;
}

.jumbo .bottom {
    background: url('../images/divider5_w.png') no-repeat bottom center;
    height: 11vw;
    background-size: contain;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
}

.jumbo .button span {
    
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    -o-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.jumbo .button:hover span {
    margin-left: 10px;
}




/*dividers*/
.divider * {
    display: none;
}

.divider.agenda {
    background: url('../images/divider-bruin.png');
    height: 15vw;
    width: 100%;
    background-size: cover;
    margin-bottom: -6vw;
    position: relative;
    z-index: 100;
}


.home.divider.golf {
    background: #461a51 url('../images/stippellijntje.png') no-repeat center center;
    background-size: contain!important;
    height: 4vw!important;
    width: 100%;
    position: relative;
}

.divider.nieuws {
    background: url('../images/divider-nieuws.png') no-repeat;
    height: 15vw;
    width: 100%;
    background-size: cover;
    margin-bottom: -1em;
    margin-top: -.7em;
    position: relative;
    z-index: 100;
    background-color: rgb(255, 248, 245);
}

.divider.footer {
    background: url('../images/divider-footer.png');
    height: 15vw;
    width: 100%;
    background-size: cover;
    position: relative;
    z-index: 100;
    display: none;
    background-color: rgb(255, 248, 245);
}

.home .divider.footer {
    display: block;
}


/* Bij een event: */
.agenda_details .width {
    position: relative;
}


.divider.thumb_voor, .divider.thumb_na {
    background: url('../images/agenda_item_boven_gevuld.png') no-repeat top center;
    background-size: contain;
    height: 16vw;
    width: 100%;
    position: absolute;
    z-index: 100;
    margin-top: 0;
    top: -10px;
}

.divider.thumb_na {
    background: url('../images/agenda_item_onder_gevuld.png') no-repeat bottom center;
    background-size: contain;
    margin-bottom: 0;
    
    bottom: -16px;
    top: inherit;
}

@media (min-width: 850px) {
    .divider.thumb_na {

    }
}


.divider h3 {
    font-size: 4vw;
    color: rgb(255, 255, 255);
    width: 50%;
    margin: 0 auto;
    text-transform: none;
    font-family: 'Lato', 'Avenir';
}



#main .container, 
#agenda .container, 
#nieuws .container, 
#footer .container,
#kaart .container
{
    padding: 0 1.5em;
    position: relative;
    overflow: auto;
}

#content .fullwidth,
#nieuws .fullwidth,
#agenda ul, 
#nieuws ul,
#kaart .kaart_wrapper,
.width
{
    margin: 0 -1.5em;
}


.width img {
    width: 100%;
}


#agenda li, 
#nieuws .flex-container {
    padding: .75em .5em;
}

#agenda .flex-item:nth-of-type(1), 
#nieuws .flex-item:nth-of-type(1) {
    margin-right: .5em;
}



@media (min-width: 414px) {
    
    #agenda li, 
    #nieuws .flex-container {
        padding: .75em 1em;
    }
    
    #agenda .flex-item:nth-of-type(1), 
    #nieuws .flex-item:nth-of-type(1) {
        margin-right: 1em;
    }
}











/*Kleuren: */

.thumb.Bal {
    border: 4px solid rgb(222, 54, 28);
    background: rgb(222, 54, 28) url('https://www.balfolk.nl/wp-content/plugins/wenkunst/images/bal.png') no-repeat center center!important;
    background-size: cover!important;
}


.thumb.Sociales {
    border: 4px solid rgb(255, 157, 0);
    background: rgb(255, 157, 0) url('https://www.balfolk.nl/wp-content/plugins/wenkunst/images/sociales.png') no-repeat center center!important;
    background-size: cover!important;
}

.thumb.Dansen {
    border: 4px solid rgb(127, 127, 30);
    background: rgb(127, 127, 30) url('https://www.balfolk.nl/wp-content/plugins/wenkunst/images/dansen.png') no-repeat center center!important;
    background-size: cover!important;
}

.thumb.Balmuziek {
    border: 4px solid rgb(43, 109, 100);
    background: rgb(43, 109, 100) url('https://www.balfolk.nl/wp-content/plugins/wenkunst/images/balmuziek.png') no-repeat center center!important;
    background-size: cover!important;
}

.thumb.Overig {
    border: 4px solid rgb(227, 103, 26);
    background: rgb(227, 103, 26) url('https://www.balfolk.nl/wp-content/plugins/wenkunst/images/overig.png') no-repeat center center!important;
    background-size: cover!important;
}


.Bal .meta em {
    color: rgb(222, 54, 28);
}

.Sociales .meta em {
    color: rgb(255, 157, 0);
}

.Dansen .meta em {
    color: rgb(127, 127, 30);
}

.Balmuziek .meta em {
    color: rgb(43, 109, 100);
}

.Overig .meta em {
    color: rgb(227, 103, 26);
}


#archief li.Bal {
    border-right: 7px solid rgb(222, 54, 28);
}

#archief li.Sociales {
    border-right: 7px solid rgb(255, 157, 0);
}

#archief li.Dansen {
    border-right: 7px solid rgb(127, 127, 30);
}

#archief li.Balmuziek {
    border-right: 7px solid rgb(43, 109, 100);
}

#archief li.Overig {
    border-right: 7px solid rgb(227, 103, 26);
}







.home #kaart h2 {
    text-align: center;
}

.kaart_wrapper {
    position: relative;
}

#kaart_container {
    height: 500px; 
}

#agenda #kaart_container {
    height: calc(100vh - 72px); 
}

#kaart_container * {
    color: black!important;
}


/*Filter op de kaart: */
#kaart #buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background-color: #461a51;
    padding: .5em 0;
}

#buttons input[type=checkbox] {
    display:none;
}

/*#buttons input[type=checkbox] + label {*/
#buttons label {
    height: 48px;
    width: 48px;
    display:inline-block;
    padding: 0 0 0 0px;
    cursor: pointer;
    background-size: contain;
    opacity: .5;
    margin: 0 5px;
    background-repeat: no-repeat;
    background-position: center;
}

#buttons input[type=checkbox]:checked + label {
    height: 48px;
    width: 48px;
    display:inline-block;
    padding: 0 0 0 0px;
    opacity: 1;
}

#buttons .kaart {
    opacity: 1!important;
}




/*Filter bij de agenda: */
#agenda #buttons {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    background-color: #461a51;
    padding: .5em 0;
    z-index: 99;
}

#agenda #buttons.fixed {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: .5em 0;
}

#buttons #info_toggle, #info_toggle_frame {
    display: none;
}

@media (max-width: 768px) {
    #buttons label#info_toggle {
        display: inline-block!important;
        font-size: 1.4em;
        text-align: center;
        width: 35px;
        line-height: 48px;
    }
	
    #info_toggle .up,
    #info_toggle.open .down {
        display: none;
    }
    
    #info_toggle.open .up {
        display: inherit;
    }
    
    #info_toggle_frame.open {
    }
    
    #info_toggle_frame.fixed {
        position: fixed;
        top: 60px;
        left: 0px;
        right: 0px;
        overflow: hidden;
    }
    
    
    #agenda #buttons {
        width: auto!important;
        padding: .3em 0;
        margin: 0 -1em;
    }
    
    #info_toggle_frame {
        position: absolute;
        background-color: #461a51;
        left: 0;
        right: 0;
        padding: 1em;
        box-shadow: 0px 0px 20px 0px #000000c7;
        z-index: 10;
    }
    
    #agenda #info_toggle_frame #buttons {
        width: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }
    
    #agenda #info_toggle_frame li {
        background-size: 40px;
        background-repeat: no-repeat;
        padding: .5em 0 .5em 3em;
        margin: .5em 0;
        background-color: transparent;
    }
    
    #agenda #info_toggle_frame ul {
        margin: 0;
    }
    
    
}



/*SlideOpen*/
.slideOpen {
    background-color: rgb(215, 55, 40);
    border-radius: 5px;
    padding: .7em 1em;
    font-weight: 200;
    font-size: 14px;
    font-family: 'Rubik', sans-serif;
    border: none;
    display: block;
    margin: 1em auto;
    width: 100%;
    cursor: pointer;
    max-width: 500px;
    box-sizing: border-box;
}

.slideOpen .slideOpen {
    width: 100%!important;
    background-color: rgb(232, 109, 38);
}

.em-booking-login a {
    color: #461a51!important;
    border-bottom: 2px solid #461a51;
}

.slideOpen h3 {
    text-align: center;
    margin: 0;
    color: white;
}

.slideOpen > h3::after {
    content: "â–¼";
    float: right;
}

.slideOpen.open > h3::after {
    content: "â–²";
}

.slideOpen .inside {
    margin-top: 1em;
    display: none;
    position: relative;
}

#reserveren td {
    padding-right: 1em;
}


#reserveren .payment_methods li {
    margin-bottom: 1em;
}

ul.payment_methods {
    padding: 0;
}

#reserveren table.total {
    font-size: 1.2em;
}

input.privacy + label, .payment_methods label {
    display: inline;
}




/* Responsive */
.desktop {
    display: none!important;
}





/* Header */
@media (min-width: 767px) {
    

    /* uitgebreide dividers alleen op desktop */
    .divider * {
        display: block;
    }
    
    
    .divider .top {
        background: url('../images/divider4_w.png') no-repeat;
        height: 11vw;
        background-size: contain;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
    }
    
    .divider .bottom {
        background: url('../images/divider5_w.png') no-repeat bottom center;
        height: 11vw;
        background-size: contain;
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
    }
    
    .agenda .top {
        background-image: url('../images/divider2_w.png');
    }
    
    .agenda .bottom {
        background-image: url('../images/divider3_w.png');
    }
    
    
    

    .divider.nieuws {
        background: url('../images/sfeer1.jpg') no-repeat;
    }

    .divider.agenda {
        background: url('../images/sfeer2.jpg') no-repeat;
    }
    
    .divider.front {
        background: url('../images/sfeer3.jpg') no-repeat;
        background-position: center;
    }
    


    .home .divider {
        background-position: center;
        height: 45vw!important;
        margin: 0;
        display: table;
        background-size: cover!important;
    }



    .wrapper {
        max-width: 800px;
        margin: 0 auto!important;
        width: calc(100vw - 3em);
    }
    
        
    .divider.footer {
        background: url('../images/divider6_w.png') no-repeat top center;
        background-size: contain;
        height: 10vw!important;
    }
    
    
    

    /*    Language switcher*/
    li.wpml-ls-current-language:before {
        content: "| ";
        color: rgb(255, 255, 255);
        margin-right: 10px;
    }


    li.menu-item-has-children:after {
        content: "â–¼";
        color: rgb(255, 255, 255);
        font-size: 0.5em;
        position: absolute;
        top: 6px;
        margin-left: 4px;
    }

    .home li.menu-item-has-children:after {
        top: 1px;
    }

    #nav .wpml-ls-current-language ul.sub-menu {
        padding: 0;
        margin: 0;
        margin-left: 1px;
        margin-top: -20px;
        padding-top: 0px;
    }

    #nav .wpml-ls-current-language .sub-menu li {
        font-size: 1em!important;
    }


    #submenu {
        border-bottom: 2px solid rgb(255, 255, 255);
        background-color: rgb(255, 106, 33);
    }

        #submenu ul {
            max-width: 1280px;
            margin: 0 auto;
            padding-bottom: 5px;
        }




    
    
    
    .mobile {
        display: none!important;
    }
    
    .desktop {
        display: inherit!important;
    }
    
    #header {
        background-color: rgb(215, 55, 40);
        border-bottom: 2px solid rgb(255, 255, 255);
    }
    
    .home #header {
        background: rgb(215, 55, 40) url('../images/header.png') no-repeat scroll top center;
        background-size: cover;
    }
    
        #header #brand {
            flex-shrink: 1;
            flex-basis: inherit;
        }
    
        #header #brand img {
            max-width: inherit;
            width: auto;

            height: 30px;
            margin: 10px 0px 10px 20px;
            min-height: auto;
        }

        .home #header #brand img {
            height: 50px;
            margin: 20px 0px 20px 20px;
            min-height: 50px;
        }



        #header #brand img.desktop {
            display: block!important;
        }
    
    
}


/*Hamburger break*/
@media (min-width: 1000px) {
    #nav, #submenu {
        display: block;
        margin: 0;
    }

        #nav .main-nav, #submenu {
            margin-right: 20px;
        }

        #nav ul li {
            line-height: 60px;
        }

        .home #nav ul li {
            line-height: 80px;
        }
    
        .menu-item-has-children {
            margin-right: 10px!important;
        }

    #hamburger {
        display: none;
    }
    
}

@media (min-width: 1050px) {
    #nav {
        font-size: 1em;
    }
    
	
}


@media (min-width: 500px) {
	#header #hamburger {
	    flex-basis: 100px;
	}
}


@media (min-width: 1010px) {
    
    .front_wrapper {
        display: flex;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        background-color: #461a51;
    }
    
        .front_wrapper > div {
            flex-basis: 50%;
        }

        .front_wrapper h2 {
            text-align: left!important;
        }
    
        .front_wrapper .container {
            margin: 0 2em;
        }
    
        #kaart_container {
            height: 623px;
        }
    
        .divider.golf {
            display: none;
        }
    
}




@media (min-width: 1270px) {
    #header #brand img {
        margin: 20px 0px 20px 50px;
    }
    
    .home #header #brand img {
        margin: 10px 0px 10px 50px;
    }

    #nav .main-nav {
/*        margin-right: 50px;*/
    }
	
    #nav li {
        margin-left: 1em;
    }
}




/* qTip */
.qtip-tipsy {
    background: rgb(215, 55, 40)!important;
    color: white!important;
    font-family: inherit!important;
    margin-top: 3px;
    font-size: 16px!important;
    line-height: 16px!important;
}

.qtip-tipsy .qtip-content {
    text-align: center;
}