.fanpage { display: flex; flex-wrap: wrap; gap: var(--gap);  }

.fanpage { width: 100%; margin: 0px auto var(--gap) auto; padding: var(--gap) var(--gap) 0px var(--gap); }
.fanpage .left .section { padding-top: var(--gap); }
.fanpage .left .section h2 { margin-bottom: var(--gap); }

.fanpage .right .section { padding: var(--gap); border-radius: var(--border-radius); margin-bottom: var(--gap); background-color: #FFFFFF; overflow: hidden; }
.fanpage .right .section h1 { margin-bottom: var(--gap); }
.fanpage .right .section h2 { margin-bottom: var(--gap); }
.fanpage .right .section p { margin-bottom: var(--gap); }
.fanpage .right .section :last-child { margin-bottom: 0px; }

.fanpage .selections { display: flex; flex-wrap: wrap; gap: var(--gap); margin-bottom: var(--gap); }
.fanpage .selections .selection { cursor: pointer; text-transform: uppercase; display: block; background-color: #cdcbce; color: #FFFFFF; text-align: center; padding: var(--inner-gap); border-radius: var(--inner-border-radius); font-weight: 600; }
.fanpage .selections .selection.selection-active,
.fanpage .selections a { text-transform: uppercase; display: block; background-color: #7e43b7; color: #FFFFFF; text-align: center; padding: var(--inner-gap); border-radius: var(--inner-border-radius); }
.fanpage .selections .selection:hover,
.fanpage .selections a:hover { display: block; background-color: #fdc500; color: #1a1a1a; }


.fanpage .menu-account-container { }
.fanpage .menu-account-container ul { list-style: none; padding: 0px; margin: 0px; display: flex; flex-wrap: wrap; gap: var(--inner-gap); }
.fanpage .menu-account-container ul li { flex-basis: 100%; }
.fanpage .menu-account-container ul li a { padding: 6px 9px; }
.fanpage .menu-account-container ul li.current-menu-item a,
.fanpage .menu-account-container ul li a:hover { background-color: #fdc500; border-radius: 6px; overflow: hidden; }
.fanpage .menu-account-container ul li:last-child { padding-top: var(--gap); }

.fanpage .form-control { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap); margin-bottom: var(--inner-gap); }
.fanpage .form-control label {}
.fanpage .form-control div.control {}
.fanpage .form-control div.control input { width: 100%; background-color: #e4e4e4; }
.fanpage .form-control div.control input { height: min-content; display: block; width: 100%; outline: none; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; line-height: 20px; border: 0px; padding: var(--inner-gap); border-radius: var(--inner-gap); }
.fanpage .form-control div.control input::placeholder { color: #8c8c8a; font-weight: 500; }

.fanpage .form-submit { display: flex; justify-content: start; margin-top: var(--gap); }
.fanpage .form-submit button { display: block; line-height: 24px; cursor: pointer; border: 0px; background-color: #86bb47; color: #FFFFFF; text-align: center; padding: calc(var(--inner-gap) / 2) var(--inner-gap) ; border-radius: var(--inner-border-radius); }
.fanpage .form-submit button:hover { background-color: #1a1a1a; }

.fanpage .meldingen { display: flex;  gap: var(--inner-gap); flex-direction: column; margin-bottom: var(--gap); }
.fanpage .meldingen .melding { display: flex; flex-wrap: wrap; gap: var(--inner-gap); }
.fanpage .meldingen .melding .melding-datum { flex-basis: 100px; }
.fanpage .meldingen .melding .melding-info { flex-basis: calc(100% - var(--gap) - 100px); }
.fanpage .meldingen .melding .melding-info p { margin-bottom: 0px; }
.fanpage .meldingen .melding.melding-hide { display: none; }

.checkboxcss { display: flex; flex-wrap: wrap; margin-bottom: var(--gap); }
.checkboxcss .switch { position: relative; display: inline-block; width: 48px; height: 24px; }
.checkboxcss .switch input { opacity: 0; width: 0; height: 0; }
.checkboxcss .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; border-radius: 12px; }
.checkboxcss .slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; border-radius: 12px; }
.checkboxcss input:checked + .slider { background-color: #86bb47; }
.checkboxcss input:focus + .slider { box-shadow: 0 0 1px #86bb47; }
.checkboxcss input:checked + .slider:before { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); }
.checkboxcss .text { flex-basis: calc(100% - var(--gap) - 48px); cursor: pointer; padding-left: 12px; }

.message.message-success { color: #86bb47; }

@media (max-width: 767px) {
	
	.fanpage .selections .selection,
	.fanpage .selections a { flex-basis: 100%; }
	
	.fanpage .form-control label { flex-basis: 100%; }
	.fanpage .form-control .control { flex-basis: 100%; }
	
}

@media (min-width: 768px) {
	
	.fanpage .left { flex-basis: 240px; }
	.fanpage .right { flex-basis: calc(100% - var(--gap) - 240px); }
	
	.fanpage .form-control label { flex-basis: 120px; }
	.fanpage .form-control .control { flex-basis: calc(100% - var(--gap) - 120px); }

}

@media (min-width: 768px) and (max-width: 991px) {
	
	.fanpage { width: 750px; }
	.fanpage .selections .selection,
	.fanpage .selections a { flex-basis: calc((100% - (var(--gap) * 1)) / 2);  }

}


@media (max-width: 991px) {
	
	.fanpage .left { display: none; }
	
}


@media (min-width: 992px) and (max-width: 1199px) {
	
	.fanpage { width: 970px; }
	.fanpage .selections .selection,
	.fanpage .selections a { flex-basis: calc((100% - (var(--gap) * 2)) / 3);  }

}

@media (min-width: 1200px) {
	
	.fanpage { width: 1170px; }
	.fanpage .selections .selection,
	.fanpage .selections a { flex-basis: calc((100% - (var(--gap) * 3)) / 4);  }

}

.fanpage {  }
.fanpage a[href="#festivals-account-more"] { display: inline-block; margin-top: var(--gap); }
.fanpage .festivals-account-more { display: none; margin-top: var(--gap); }
.fanpage .festivals-account-more { border-top: 1px dotted #e4e4e4; padding-top: var(--gap); }