#header, #header:before {
    -ms-pointer-events: none
}

.mb-120 {
    margin-bottom: 120px
}

.fancybox-nav, a {
    text-decoration: none
}

#header, #intro .text .sticker, h1 {
    text-align: center
}

.message-container {
  display: flex;
  flex: 1;
  flex-direction: row;
  position: absolute;
  z-index: 2000;
  background-color: white;
  border: 3px solid orange;
  padding: 15px 10px;
  font-family: sans-serif;
  margin: 10px;
  border-radius: 10px;
  opacity: 0.9;
  align-items: center;
}

@media only screen and (max-width: 768px){
	.message-container {
		flex-direction: column;
	}
}

.message-content {
  flex-direction: column;
  margin-left: 20px;
}

.message-container img {
  width: 500px;
  max-width: 250px;
}

.message-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.message-header h5 {
  font-weight: bold;
  font-size: 1.8em;
  margin-bottom: 10px;
}

.message-header a {
    color: black;
    font-size: 1.8em;
    text-decoration: none;
    cursor: pointer;
}

.message-header a:hover {
  opacity: 0.5;
}

.message-container p {
    margin-bottom: 0;
}

.menu-button {
    z-index: 100;
    width: 50px;
    height: 50px;
    position: fixed;
    background-color: rgba(255, 255, 255, .5);
    left: 0;
    top: 0;
    cursor: pointer
}

.menu-button .bar {
    width: 30px;
    height: 5px;
    background-color: #0077cb;
    position: absolute;
    left: 10px;
    transition: all ease-out .2s;
    top: 12px;
    transform: rotate(0deg)
}

.menu-button .bar-2 {
    top: 21px
}

.menu-button .bar-3 {
    top: 30px
}

.parent-toggle[data-toggle=true] .bar {
    background-color: #81cb00
}

.parent-toggle[data-toggle=true] .bar-2 {
    transform: rotate(-180deg)
}

.parent-toggle[data-toggle=true] .bar-1 {
    transform: rotate(-45deg);
    left: 6px;
    top: 14px;
    width: 25px
}

.parent-toggle[data-toggle=true] .bar-3 {
    transform: rotate(45deg);
    left: 6px;
    top: 28px;
    width: 25px
}

.mobile-nav {
    min-width: 300px;
    position: fixed;
    height: 100%;
    background: #fff;
    z-index: 99;
    left: -300px;
    top: 0;
    font-size: 1.8em;
    line-height: 43px;
    transition: all ease-out .2s
}

.mobile-nav .menu-title {
    margin-left: 60px;
    margin-top: 3px
}

.mobile-nav ul li {
    border-bottom: 1px solid #97b9d2;
    padding-left: 10px;
    width: 100%;
    margin-bottom: 5px
}

.parent-toggle[data-toggle=true] .mobile-nav {
    left: 0
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, q, ruby, s, samp, section, small, span, summary, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block
}

audio, canvas, video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

a:focus {
    outline: dotted thin
}

a:active, a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box
}

pre {
    white-space: pre-wrap
}

q {
    quotes: "\201C""\201D""\2018""\2019"
}

svg:not(:root) {
    overflow: hidden
}

legend {
    border: 0;
    padding: 0
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}

button, input {
    line-height: normal
}

button, select {
    text-transform: none
}

button, html input[type=button], input[type=reset], input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled], html input[disabled] {
    cursor: default
}

input[type=checkbox], input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=search] {
    -webkit-appearance: none
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: 1.4em
}

.table-responsive {
    border: none
}

.table-responsive table th {
    width: 50%;
    font-weight: 700
}

.tabcontent h3 {
    margin-bottom: 10px;
    font-size: 1.6em;
    color: #cb0000
}

.tabcontent h2 {
    font-weight: 700;
    font-size: 2.5em
}

#programma ul#infotabnav {
    width: 100%;
    float: left;
    padding: 0 16%;
}

#programma ul#infotabnav li {
    width: 23.85%;
    float: left;
    text-align: center;
    padding: 10px;
    margin-right: 1px;
    margin-left: 1px;
    cursor: pointer;
    z-index: 5;
    min-width: 100px;
    position: relative;
    border-top: 2px dotted transparent;
    transition: all .3s ease-in
}

#programma ul#infotabnav li:hover {
    border-top: 2px dotted #d6d6d6
}

.tabcontent {
    display: none
}

.tabcontent.active {
    display: block
}

#programma ul#infotabnav li.active {
    background: url(../img/dots.png);
    border-top: 2px dotted transparent
}

.cf:after {
    content: '';
    display: table;
    clear: both
}

@font-face {
    font-family: biedaip;
    src: url(../fonts/bie-daip.eot);
    src: url(../fonts/bie-daip.eot?#iefix) format("embedded-opentype"), url(../fonts/bie-daip.woff) format("woff"), url(../fonts/bie-daip.ttf) format("truetype"), url(../fonts/bie-daip.svg#bie-daip) format("svg");
    font-weight: 400;
    font-style: normal
}

[data-icon]:before {
    content: attr(data-icon)
}

[class*=" icon-"]:before, [class^=icon-]:before, [data-icon]:before {
    font-family: biedaip !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    text-transform: none !important;
    font-size: 14px;
    speak: none;
    line-height: 24px;
    display: inline-block
}

.icon-facebook:before {
    content: "a"
}

.icon-twitter:before {
    content: "b"
}

.icon-youtube:before {
    content: "c"
}

.icon-arrow:before {
    content: "d"
}

.icon-quote:before {
    content: "e"
}

.icon-home:before {
    content: "f"
}

.icon-phone:before {
    content: "g"
}

.icon-mail:before {
    content: "h"
}

.icon-zoom:before {
    content: "i"
}

.icon-question:before {
    content: "j"
}

.fancybox-image, .fancybox-inner, .fancybox-nav, .fancybox-nav span, .fancybox-outer, .fancybox-skin, .fancybox-tmp, .fancybox-wrap, .fancybox-wrap iframe, .fancybox-wrap object {
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    vertical-align: top
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020
}

.fancybox-inner, .fancybox-outer, .fancybox-skin {
    position: relative
}

.fancybox-skin {
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

.fancybox-opened {
    z-index: 8030
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, .5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, .5)
}

.fancybox-inner {
    overflow: hidden
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap
}

.fancybox-iframe, .fancybox-image {
    display: block;
    width: 100%;
    height: 100%
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%
}

#fancybox-loading, .fancybox-close, .fancybox-next span, .fancybox-prev span {
    background-image: url(../img/fancybox/fancybox_sprite.png)
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: .8;
    cursor: pointer;
    z-index: 8060
}

.fancybox-close, .fancybox-nav, .fancybox-nav span {
    z-index: 8040;
    position: absolute;
    cursor: pointer
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url(../img/fancybox/fancybox_loading.gif) center center no-repeat
}

.fancybox-close {
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px
}

.fancybox-nav {
    top: 0;
    width: 40%;
    height: 100%;
    background: url(../img/fancybox/blank.gif);
    -webkit-tap-highlight-color: transparent
}

.fancybox-prev {
    left: 0
}

.fancybox-next {
    right: 0
}

.fancybox-nav span {
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    visibility: hidden
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px
}

.fancybox-nav:hover span {
    visibility: visible
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    visibility: hidden;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important
}

.fancybox-lock, .fancybox-lock body {
    overflow: hidden !important
}

.fancybox-lock {
    width: auto
}

#header, hr {
    width: 100%
}

.fancybox-lock-test {
    overflow-y: hidden !important
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url(../img/fancybox/fancybox_overlay.png)
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll
}

.fancybox-title {
    visibility: hidden;
    font: 400 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050
}

.fancybox-opened .fancybox-title {
    visibility: visible
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: 0 0;
    background: rgba(0, 0, 0, .8);
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: 700;
    line-height: 24px;
    white-space: nowrap
}

hr, img {
    display: block
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff
}

h2, hr {
    margin: 0 0 24px
}

.deelnemer h2 {
	margin-bottom: 5px;
}

.deelnemer .hidden {
	display:none;
}

.fancybox-title-inside-wrap {
    padding-top: 10px
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8)
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
    #fancybox-loading, .fancybox-close, .fancybox-next span, .fancybox-prev span {
        background-image: url(../img/fancybox/fancybox_sprite@2x.png);
        background-size: 44px 152px
    }

    #fancybox-loading div {
        background-image: url(../img/fancybox/fancybox_loading@2x.gif);
        background-size: 24px 24px
    }
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

body {
    color: #333;
    font: 62.5% 'Droid Serif', sans-serif;
    line-height: 24px;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

a {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    color: #0077cb
}

#header:before, #intro .cards .card h2 {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out
}

a:hover {
    color: #cb0000
}

h1 {
    font-size: 3.6em;
    margin: 0 0 96px
}

h2 {
    font-size: 2.2em
}

h3 {
    font-size: 1.4em;
    font-weight: 700
}

img {
    max-width: 100%;
    height: auto
}

address, blockquote, dl, ol, p, ul {
    font-size: 1.4em;
    margin: 0 0 24px
}

address address, address blockquote, address dl, address ol, address p, address ul, blockquote address, blockquote blockquote, blockquote dl, blockquote ol, blockquote p, blockquote ul, dl address, dl blockquote, dl dl, dl ol, dl p, dl ul, ol address, ol blockquote, ol dl, ol ol, ol p, ol ul, p address, p blockquote, p dl, p ol, p p, p ul, ul address, ul blockquote, ul dl, ul ol, ul p, ul ul {
    font-size: 1em
}

hr {
    border: 0;
    height: 0;
    border-bottom: 1px solid #ddd
}

#header {
    pointer-events: none;
    background: url(../img/header.png);
    position: fixed;
    left: 0;
    top: 0;
    height: 96px;
    z-index: 100;
    font-size: 1.8em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    padding: 24px 0
}

#header .inner>* {
    -ms-pointer-events: auto;
    pointer-events: auto
}

#header a {
    color: #fff;
    line-height: 48px
}

#header a:hover {
    opacity: .75
}

#header a.home, #header nav {
    display: inline-block;
    position: relative;
    top: -18px
}

#header nav ul {
    font-size: 1em;
    margin: 0
}

#header nav ul li, #header nav ul li a {
    display: inline-block
}

#header nav ul li:before {
    content: "\00b7";
    color: #fff;
    padding: 0 6px
}

#header:before, #intro .text:after, #intro:after {
    content: ''
}

#header #translate-this {
    border-left: 2px dotted #fff;
    display: inline-block;
    height: 48px !important;
    margin: 0 0 0 24px;
    padding: 0 0 0 24px
}

#header #translate-this .translate-this-button {
    background: url(../img/lang.png) center no-repeat !important;
    width: 59px;
    height: 100%
}

#header:before {
    transition: .2s ease-in-out;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background-image: url(../img/header-dark.png);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block
}

div.ttb-panel .ttb-more, div.ttb-panel>div:last-child {
    display: none
}

#header.darker:before {
    opacity: 1;
    visibility: visible
}

div.ttb-panel {
    position: fixed;
    border: 0
}

div.ttb-panel .ttb-column {
    width: 50%;
    margin: 0
}

div.ttb-panel .ttb-column a {
    padding: 6px;
    border: 0;
    font: 14px 'Droid Serif', sans-serif;
    line-height: 12px
}

div.ttb-panel .ttb-column a:hover {
    background: 0 0;
    color: #0077cb;
    text-decoration: none;
    outline: 0
}

div.ttb-panel>div+div {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    padding: 12px !important
}

#intro .cards, #intro .text {
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    float: left
}

#banner {
    width: 100%;
    min-height: 480px;
    max-height: 720px;
    background: url(../img/banner-02.jpg) center no-repeat;
    background-size: cover;
    position: relative
}

#banner #logo {
    width: 366px;
    height: 231px;
    background: url(../img/biedaiplogo-2026.png);
    background-size: 100%;
    position: absolute;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-indent: -9999px;
    max-width: 80%
}

#intro {
    position: relative;
    z-index: 10;
    margin-top: -72px
}

#intro:after {
    display: table;
    clear: both
}

#intro .text {
    margin-left: 0;
    margin-right: 2.1276595744681%;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    background: #fff;
    padding: 24px 24px 0;
    position: relative
}

#intro .text:after {
    display: table;
    clear: both
}

#intro .text img {
    margin-bottom: 24px
    margin-top: 10px;
}

.sticker {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    bottom: -100px;
    right: 20px;
    width: 150px;
    font-size: 20px;
    padding: 20px;
    background-color: #fff;
    height: 150px;
    padding-left: 27px;
    padding-top: 34px;
    border: 6px solid #0077cb
}

.sticker:hover {
    border-color: #81cb00;
    color: #81cb00;
    text-decoration: none
}

.ticketsticker {
    font-size: 1.6em;
    position: absolute;
    bottom: -95px;
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 50%;
    border: 6px solid;
    padding: 23px 20px;
    text-align: center;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    transform: rotate(-20deg);
    right: 6px
}

.ticketsticker:hover {
    text-decoration: none
}

#intro .cards .card.facebook h2, #intro .text h2 {
    color: #0077cb
}

#intro .text h1 {
    font-size: 2.2em;
    text-align: left;
    margin: 0 0 24px
}

#intro .text ul {
    font-size: 1.6em
}

#intro .text ul li {
    padding: 4px 0 4px 24px;
    position: relative
}

#intro .text ul li:before {
    content: 'd';
    font: 14px biedaip;
    line-height: 24px;
    color: #0077cb;
    position: absolute;
    top: 6px;
    left: 0
}

#intro .text ul li.last {
    margin-top: 24px
}

#intro .text .left {
    width: 50%;
    float: left;
    padding-right: 12px
}

#intro .text .right {
    width: 50%;
    float: left;
    padding-left: 12px
}

#intro .text .right:after {
    content: '';
    display: table;
    clear: both
}

#intro .cards {
    margin-left: 0;
    margin-right: 0;
    -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    background: #fff;
    padding: 24px 24px 0;
    position: relative;
    height: 626px;
    width: 100%
}

#intro .cards .card {
    height: 482px;
    border-bottom: 6px solid;
    position: absolute;
    left: 0;
    padding: 24px;
    background: #fff;
    border-top: 2px solid #f4f4f4;
    width: 100%
}

#intro .cards .card h2 {
    transition: .2s ease-in-out;
    cursor: pointer;
    padding-bottom: 24px;
    border-bottom: 2px dotted #ddd
}

#intro .cards .card.facebook {
    border-bottom-color: #0077cb
}

#intro .cards .card.facebook h2:hover {
    color: #333
}

#intro .cards .card.parking {
    border-bottom-color: #cb0000
}

#intro .cards .card.parking h2 {
    color: #cb0000
}

#intro .cards .card.parking h2:hover {
    color: #333
}

#intro .cards .card.tour {
    border-bottom-color: #81cb00
}

#intro .cards .card.tour h2 {
    color: #81cb00
}

#intro .cards .card.tour h2:hover {
    color: #333
}

#intro .cards .card.first {
    bottom: 0;
    z-index: 3
}

#intro .cards .card.second {
    bottom: 72px;
    z-index: 2
}

#intro .cards .card.third {
    bottom: 144px;
    z-index: 1;
    border-top: 0
}

#intro .traffic-parking {
    clear: both;
    padding-top: 48px
}

#deelnemers {
    background: url(../img/map.png) top no-repeat;
    padding-top: 144px
}

#deelnemers #deelnemerswrapper {
    width: 100%
}

#deelnemers #deelnemerswrapper:after {
    content: '';
    display: table;
    clear: both
}

.deelnemer {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    margin-left: 2.1276595744681%;
    margin-right: 0;
    float: left;
    margin-bottom: 24px;
    position: relative;
  	height: fit-content;
    background: #fff;
    border: 2px solid #ddd;
    padding: 24px;
    width: 100%
}

.deelnemer:nth-child(4n+1) {
    margin-left: 0;
    margin-right: 0;
    float: left;
    clear: left
}

.deelnemer .image {
    position: relative;
    padding-top: 75%;
    background: #333;
    margin: 0 0 24px;
    overflow: hidden
}

.deelnemer .image img {
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%
}

.deelnemer .image.upperhead img {
    top: 85%
}

.deelnemer .image.semi-head img {
    top: 75%
}

.deelnemer .image.middlehead img {
    top: 57%
}

.deelnemer .image.lowerhead img {
    top: 25%
}

.country {
    -ms-pointer-events: none;
    pointer-events: none;
    -webkit-box-shadow: 0 0 6px 6px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 0 6px 6px rgba(0, 0, 0, .5);
    box-shadow: 0 0 6px 6px rgba(0, 0, 0, .5);
    background: right no-repeat rgba(0, 0, 0, .5);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    position: absolute;
    margin: 0;
    color: #fff;
    font-weight: 700;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    background-position: 95% center
}

.nl {
    background-image: url(../img/flags/nl.png)
}

.au {
    background-image: url(../img/flags/au.png)
}

.deelnemer .country.no {
    background-image: url(../img/flags/no.png)
}

.deelnemer .country.be {
    background-image: url(../img/flags/be.png)
}

.deelnemer .country.se {
    background-image: url(../img/flags/se.png)
}

.deelnemer .country.us {
    background-image: url(../img/flags/us.png)
}

.deelnemer .country.fr {
    background-image: url(../img/flags/fr.png)
}

.deelnemer .country.au {
    background-image: url(../img/flags/au.png)
}

.deelnemer .country.pl {
    background-image: url(../img/flags/pl.png)
}

.deelnemer .country.gb {
    background-image: url(../img/flags/gb.png)
}

.de {
    background-image: url(../img/flags/de.png)
}

.deelnemer .country.wa {
    background-image: url(../img/flags/wales.png)
}

.deelnemer .country.fi {
    background-image: url(../img/flags/fi.png)
}

.deelnemer .country.es {
    background-image: url(../img/flags/es.png)
}

.deelnemer .country.sc {
    background-image: url(../img/flags/scotland.png)
}

.deelnemer .country.ca {
    background-image: url(../img/flags/ca.png)
}

.deelnemer .country.ch {
    background-image: url(../img/flags/ch.png)
}

.deelnemer .country.it {
    background-image: url(../img/flags/it.png)
}

.deelnemer .country.ie {
    background-image: url(../img/flags/ie.png)
}

.deelnemer .country.lu {
    background-image: url(../img/flags/lu.png)
}

.deelnemer h2 {
    color: #0077cb
}

.deelnemer .social {
    margin: 0;
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    text-align: center
}

.deelnemer .social li {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    display: inline-block;
    margin: 0 3px;
    position: relative
}

#activiteiten .activiteit h2 {
    margin-top: 20px
}

#activiteiten .activity .block ul, #programma #program-tabs li {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out
}

.deelnemer .social li:nth-child(2) {
    z-index: 1
}

.deelnemer .social li a {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    width: 24px;
    height: 24px;
    display: inline-block
}

.deelnemer .social li a:before {
    font-size: 12px
}

.deelnemer .social li.fac a {
    background: #0077cb
}

.deelnemer .social li.you a {
    background: #c42f2f
}

.deelnemer .social li.twi a {
    background: #17a5c8
}

.deelnemer:hover {
    border-color: #0077cb
}

.deelnemer:hover .social li {
    margin: 0
}

#programma {
    background: #fff;
    border-top: 2px dotted #ddd;
    border-bottom: 2px dotted #ddd;
    padding: 48px 0 24px;
    max-width: none
}

#programma .app {
    text-align: center;
    margin: -72px 0 72px
}

#programma .flyer, #programma .map {
    width: 50%;
    margin-bottom: 48px;
    float: left
}

#programma .app a {
    color: #cb0000;
    text-decoration: underline
}

#programma .app a:hover {
    color: #333
}

#programma .map {
    padding-right: 12px
}

#programma .flyer {
    padding-left: 12px
}

#programma #program-tabs {
    text-align: center;
    font-size: 2em;
    font-weight: 700;
    position: relative
}

#programma #program-tabs:before {
    content: '';
    width: 100%;
    height: 4px;
    background: #000;
    position: absolute;
    top: 22px;
    left: 0
}

#programma #program-tabs.program-1:before {
    background: #81cb00
}

#programma #program-tabs.program-2:before {
    background: #cb0000
}

#programma #program-tabs.program-3:before {
    background: #0077cb
}

#programma #program-tabs li {
    transition: .2s ease-in-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    width: 48px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    margin: 0 -6px;
    position: relative;
    cursor: pointer
}

#programma #program-tabs li:not(:last-child):hover {
    -webkit-transform: scale(1.15);
    -moz-transform: scale(1.15);
    transform: scale(1.15);
    z-index: 2
}

#programma #program-tabs li.green {
    background: #81cb00
}

#programma #program-tabs li.red {
    background: #cb0000;
    z-index: 1
}

#programma #program-tabs li.blue {
    background: #0077cb
}

#programma #program-tabs li:last-child {
    width: 100%;
    margin: 0;
    display: block;
    color: #333;
    font-weight: 400;
    text-transform: lowercase;
    cursor: default
}

#programma .program-page {
    display: none
}

#programma .program-page.active {
    display: block
}

#programma .program-page#program-1 h2 {
    color: #81cb00
}

#programma .program-page#program-2 h2 {
    color: #cb0000
}

#programma .program-page#program-3 h2 {
    color: #0077cb
}

#programma .program {
    margin-bottom: 40px
}

#sponsoren .sponsor-block {
    height: 100px;
    margin-bottom: 10px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all .3s ease-in;
    text-align: center
}

#sponsoren .sponsor-block:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%)
}

#sponsoren .sponsor-block img {
    max-height: 100px;
    max-width: 100%;
    margin: 0 auto
}

#activiteiten .activity {
    width: 31.914893617021%;
    margin-left: 0;
    margin-right: 2.1276595744681%;
    float: left
}

#activiteiten .activity>h2 {
    border-bottom: 2px dotted #ddd;
    padding-bottom: 24px
}

#activiteiten .activity .block {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
    background: center no-repeat;
    background-size: cover;
    position: relative;
    padding-top: 75%;
    border: 6px solid #fff
}

#activiteiten .activity .block ul {
    transition: .2s ease-in-out;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    padding: 24px;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .25)
}

#activiteiten .activity .block ul li {
    line-height: 18px;
    padding: 6px 0
}

#activiteiten .activity:hover ul {
    opacity: .9;
    visibility: visible
}

#activiteiten .activity#activity>h2 {
    color: #81cb00
}

#activiteiten .activity#activity .block {
    background-image: url(../uploads/activiteiten.jpg)
}

#activiteiten .activity#activity .block ul {
    background: #81cb00
}

#activiteiten .activity#workshops>h2 {
    color: #cb0000
}

#activiteiten .activity#workshops .block {
    background-image: url(../uploads/workshops.jpg)
}

#activiteiten .activity#workshops .block ul {
    background: #cb0000
}

#activiteiten .activity#market {
    width: 31.914893617021%;
    margin-left: 0;
    margin-right: 0;
    float: left
}

#activiteiten .activity#market>h2 {
    color: #0077cb
}

#activiteiten .activity#market .block {
    background-image: url(../uploads/maritieme-markt.jpg)
}

#activiteiten .activity#market .block ul {
    background: #0077cb
}

#impressie #impressionwrapper .impression {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 100%;
    margin-left: 2.1276595744681%;
    margin-right: 0;
    float: left;
    margin-bottom: 24px;
    overflow: hidden;
    border: 6px solid transparent;
    background: #fff
}

#impressie #impressionwrapper .impression:after {
    content: '';
    display: table;
    clear: both
}

#impressie #impressionwrapper .impression a {
    display: block;
    height: 0;
    padding-top: 100%;
    position: relative
}

#impressie #impressionwrapper .impression a img {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: auto;
    height: 100%;
    max-width: none;
    position: absolute;
    top: 0;
    left: 50%
}

#impressie #impressionwrapper .impression a:after, #impressie #impressionwrapper .impression a:before {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute
}

#impressie #impressionwrapper .impression a:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    content: '';
    background: rgba(255, 255, 255, .5);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

#impressie #impressionwrapper .impression a:after {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    content: 'i';
    font: 24px biedaip;
    background: #fff;
    width: 48px;
    line-height: 48px;
    color: #cb0000;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -24px 0 0 -24px;
    z-index: 2
}

#impressie #impressionwrapper .impression a:hover:after, #impressie #impressionwrapper .impression a:hover:before {
    opacity: 1;
    visibility: visible
}

#impressie #impressionwrapper .impression a:hover:after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1)
}

#impressie #impressionwrapper .impression a:hover img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%)
}

#impressie #impressionwrapper .impression:nth-child(6n+1) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    float: left
}

#impressie #impressionwrapper .impression:hover {
    border-color: #cb0000;
    background: #red
}

#informatie {
    max-width: none;
    padding: 0
}

#informatie #infotabnav {
    text-align: center;
    font-size: 2.2em;
    margin: 0
}

#informatie #infotabnav li {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    display: inline-block;
    padding: 24px;
    cursor: pointer;
    border-top: 2px solid transparent
}

#contact .left #quoteslider, #sponsors ul li a img {
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out
}

#informatie #infotabnav li:hover {
    border-top: 2px dotted #ddd
}

#informatie #infotabnav li.active {
    background: url(../img/dots.png);
    border-top-color: transparent
}

#contact .left #quotenav, #informatie #infotabcontent {
    border-top: 2px dotted #ddd;
    border-bottom: 2px dotted #ddd
}

#informatie #infotabcontent {
    background: #fff;
    padding: 48px 0 24px
}

#informatie #infotabcontent .tabcontent {
    max-width: 1176px;
    padding: 0 24px;
    margin: auto;
    display: none
}

#informatie #infotabcontent .tabcontent:after {
    content: '';
    display: table;
    clear: both
}

#informatie #infotabcontent .tabcontent .image {
    margin: 0 0 24px
}

#informatie #infotabcontent .tabcontent[data-target=history] .column {
    width: 31.914893617021%;
    margin-left: 0;
    margin-right: 2.1276595744681%;
    float: left
}

#informatie #infotabcontent .tabcontent[data-target=history] .column:last-child {
    width: 31.914893617021%;
    margin-left: 0;
    margin-right: 0;
    float: left
}

#informatie #infotabcontent .tabcontent[data-target=city] .left {
    width: 74.468085106383%;
    margin-left: 0;
    margin-right: 2.1276595744681%;
    float: left
}

#informatie #infotabcontent .tabcontent[data-target=city] .right {
    width: 23.404255319149%;
    margin-left: 0;
    margin-right: 0;
    float: left
}

#informatie #infotabcontent .tabcontent.active {
    display: block
}

#contact .left {
    margin-left: 0;
    margin-right: 2.1276595744681%;
    float: left
}

#contact .left>h2 {
    border-bottom: 2px dotted #ddd;
    padding-bottom: 24px
}

#contact .left #quoteslider {
    transition: .4s ease-in-out
}

#contact .left #quotenav li, #sponsors #js-open-sponsors {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out
}

#contact .left #quoteslider .slides {
    position: relative;
    width: 100%;
    height: 100%
}

#contact .left #quoteslider .slides .top {
    display: table;
    width: 100%;
    margin: 0 0 24px
}

#contact .left #quoteslider .slides .top .image {
    display: table-cell;
    vertical-align: middle;
    width: 96px
}

#contact .left #quoteslider .slides .top .image img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

#contact .left #quoteslider .slides .top .text {
    display: table-cell;
    vertical-align: middle
}

#contact .left #quoteslider .slides .top .text p {
    color: #999;
    margin: 0
}

#contact .left #quoteslider .slides .top .text p strong {
    display: block;
    color: #333
}

#contact .left #quoteslider .slides blockquote {
    font-size: 1.6em
}

#contact .left #quoteslider .slides blockquote:before {
    color: #81cb00;
    float: left;
    margin-right: 12px;
    line-height: 36px;
    font-size: 24px
}

#contact .left #quoteslider .slides blockquote p {
    line-height: 36px;
    font-style: italic
}

#contact .left #quotenav {
    padding: 12px;
    text-align: center
}

#contact .left #quotenav li {
    transition: .2s ease-in-out;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: inline-block;
    background: #ddd;
    width: 12px;
    height: 12px;
    margin: 0 3px
}

#contact .left #quotenav li.active, #contact .left #quotenav li:hover, #contact .right {
    background: #81cb00
}

#contact .center {
    margin-left: 0;
    margin-right: 2.1276595744681%;
    float: left
}

#contact .center>h2 {
    border-bottom: 2px dotted #ddd;
    padding-bottom: 24px;
    margin: 0
}

#contact .center .lid {
    border-bottom: 2px dotted #ddd;
    display: table;
    width: 100%
}

#contact .center .lid .image, #contact .center .lid p {
    padding: 24px 0;
    display: table-cell;
    vertical-align: middle
}

#contact .center .lid .image {
    width: 96px
}

#contact .center .lid .image img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%
}

#contact .center .lid p {
    color: #999;
    margin: 0
}

#contact .center .lid p strong {
    display: block;
    color: #333
}

#contact .right {
    margin-left: 0;
    margin-right: 0;
    float: left;
    color: #fff;
    padding: 24px 24px 0
}

#contact .right address, #contact .right p.mail, #contact .right p.phone {
    padding-left: 36px;
    position: relative
}

#contact .right address:before, #contact .right p.mail:before, #contact .right p.phone:before {
    position: absolute;
    top: 0;
    left: 0
}

#contact .right a {
    color: #fff;
    text-decoration: underline
}

#contact .right p.phone {
    margin: 0
}

#contact .right .social {
    margin: 0 -24px 18px;
    border-top: 2px dotted #fff;
    padding: 24px 24px 0
}

#contact .right .social li {
    margin-bottom: 6px
}

#contact .right .social li a {
    text-decoration: none;
    position: relative;
    padding-left: 36px;
    display: inline-block
}

#contact .right .social li a:hover {
    text-decoration: underline
}

#contact .right .social li a:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    text-align: center;
    color: #81cb00;
    background: #fff
}

#footer, #footer a {
    color: #999
}

.page {
    max-width: 100%;
    margin: auto auto 192px;
    clear: both
}

.page:after {
    content: '';
    display: table;
    clear: both
}

#footer {
    text-align: center;
    clear: both
}

#footer a:hover {
    color: #333
}

#footer .statcounter img {
    opacity: .5;
    margin: 0 auto 6px
}

#footer .small {
    font-size: .9em
}

#highlight {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 18px;
    display: block;
    width: 336px;
    line-height: 48px;
    margin: 0 auto 48px;
    background: #0077cb;
    color: #fff;
    text-align: center
}

#highlight:hover {
    background: #81cb00
}

#sponsors {
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    box-shadow: 0 0 6px rgba(0, 0, 0, .25);
    background: #fff;
    padding: 24px 0 0;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 110
}

#sponsors #js-open-sponsors {
    transition: .2s ease-in-out;
    float: right;
    color: #999;
    border-bottom: 2px dotted #ddd;
    line-height: 36px;
    font-size: 1.4em;
    margin: -8px 0 0 24px;
    font-weight: 700;
    cursor: pointer
}

#sponsors #js-open-sponsors:before {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    content: '?';
    line-height: 36px;
    float: right;
    margin-left: 6px
}

#sponsors #js-open-sponsors:hover {
    color: #333;
    border-color: #333
}

#sponsors #js-open-sponsors.active:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg)
}

#sponsors ul {
    display: table;
    margin: 0
}

#sponsors #others ul:after, #sponsors ul:after {
    content: '';
    display: table;
    clear: both
}

#sponsors ul li {
    float: left;
    margin: 0 24px 24px 0
}

#sponsors ul li a {
    float: left
}

#sponsors ul li a img {
    transition: .4s ease-in-out;
    height: 28px;
    max-width: none;
    width: auto;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%)
}

#sponsors ul li a:hover img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0)
}

#sponsors #others {
    overflow: hidden;
    clear: both
}

#sponsors #others h2 {
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    line-height: .01px;
    margin: 0
}

#sponsors #others ul {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    display: block;
    height: 0;
    overflow: hidden;
    margin: 0;
    width: 100%
}

#sponsors #others ul li {
    -webkit-transition: .4s ease-in-out;
    -moz-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    width: 33.333333333333%;
    float: left;
    line-height: .01px;
    margin: 0
}

#sponsors #others ul li:nth-child(3n+1) {
    clear: left
}

#sponsors.active ul li a img {
    height: 48px
}

#sponsors.active #others h2 {
    line-height: 20px;
    border-top: 2px dotted #ddd;
    padding-top: 24px;
    margin: 24px 0
}

#sponsors.active #others ul {
    margin: 0 0 24px;
    height: auto
}

#sponsors.active #others ul li {
    line-height: 24px
}

.inner {
    max-width: 1176px;
    padding: 0 24px;
    margin: auto
}

.inner:after {
    content: '';
    display: table;
    clear: both
}

.btn {
    background: #999;
    color: #fff;
    font-size: 1.4em;
    font-weight: 700;
    padding: 6px 12px;
    display: inline-block;
    margin: 0 0 24px;
    border: 2px solid #999
}

.btn:before {
    content: 'd';
    font: 14px biedaip;
    line-height: 24px;
    float: right;
    margin-left: 12px
}

.btn:hover {
    background: #fff;
    color: #999
}

.btn.blue {
    background: #0077cb;
    border-color: #0077cb
}

.btn.blue:hover {
    background: #fff;
    color: #0077cb
}

.btn.red {
    background: #cb0000;
    border-color: #cb0000
}

.btn.red:hover {
    background: #fff;
    color: #cb0000
}

.btn.green {
    background: #81cb00;
    border-color: #81cb00
}

.btn.green:hover {
    background: #fff;
    color: #81cb00
}

.no-icon:before {
    display: none
}

[data-title] {
    position: relative
}

[data-title]:after {
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    opacity: 0;
    content: attr(data-title);
    visibility: hidden;
    white-space: nowrap;
    position: absolute;
    bottom: 100%;
    left: 12px;
    background: #000;
    color: #fff;
    line-height: 24px;
    padding: 0 6px;
    z-index: 1000
}

[data-title]:hover:after {
    opacity: 1;
    visibility: visible;
    margin-bottom: 12px
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-button {
    display: none
}

::-webkit-scrollbar-track {
    background: #fff
}

::-webkit-scrollbar-thumb {
    background: #0077cb
}

.intro {
    font-size: 1.4em;
    border-bottom: 2px dotted #ddd;
    margin-bottom: 20px;
    padding-bottom: 24px
}

.de_flag {
    width: 20px;
    height: 20px;
    background: right no-repeat;
    background-image: url(../img/flags/de.png);
    margin: 0;
    display: block;
    margin-left: -5px;
    float: left
}

.gb_flag {
    width: 20px;
    height: 20px;
    background: right no-repeat;
    background-image: url(../img/flags/gb.png);
    margin: 0;
    display: block;
    margin-left: -5px;
    float: left
}

.nl_flag {
    width: 20px;
    height: 20px;
    background: right no-repeat;
    background-image: url(../img/flags/nl.png);
    margin: 0;
    display: block;
    margin-left: -5px;
    float: left
}

@media screen and (max-width: 695px) {
    .de_flag {
        top: 6%
    }
}

@media screen and (max-width: 406px) {
    .de_flag {
        top: 7.5%
    }
}

.center {
    margin-left: 9%;
    margin-right: 9%
}

.activiteit img {
    margin: 0 auto;
    max-height: 400px;
}

.activiteit {
    padding-bottom: 30px;
    float: left
}

.tegroot {
    max-height: 250px;
    overflow: hidden
}


.reveal-modal {
    background: #ffffff;
    margin: 0 auto;
    position: relative;
    z-index: 41;
    top: 25%;
    padding: 30px;
    -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 40%);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.4);
    box-shadow: 0 0 3px rgb(0 0 0 / 40%);
	display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
    justify-content: center;
	width: fit-content;
    border: 2px solid #ddd;
}

#participant-modal {
	display: none;
	right: 50%;
    position: fixed;
    width: 700px;
    height: 820px;
    top: 52%;
    left: 50%;
    margin-top: -400px;
    margin-left: -300px;
    flex: 1;
    max-height: 90vh;
}

#extra-modal {
    right: 50%;
    position: fixed;
    width: 700px;
    height: 820px;
    top: 52%;
    left: 50%;
    margin-top: -400px;
    margin-left: -300px;
    flex: 1;
    max-height: 90vh;
}

#extra-modal .modal-body {
    flex-direction: column;
}

#extra-modal img {
    max-height: 80vh !important;
    margin-left: 15px;
}

#extra-modal h3 {
    margin-top: 10px;
    text-align: center;
}

.modal-header {
    justify-content: space-between;
    align-items: center;
    padding: 0;
	border-bottom: none;
}

.modal-body {
	display: flex;
	padding-top: 0;
	flex: 1;
}

.modal-body .deelnemer {
	display: flex;
    flex: 1;
    flex-direction: column;
	border: none;
}

.modal-body .deelnemer img {
	top: 50% !important;
}

.modal-body .deelnemer .participantDescription .dots{
	display: none;
}


.modal-body .deelnemer .participantDescription .hidden{
	display: block!important;
}

.modal-body .deelnemer .participantDescription .readMore{
	display: none;
}

.modal-body .deelnemer .participantDescription {
	max-height: 20vh;
	overflow-y: scroll;
}

.close-reveal-modal {
    font-size: 50px;
    position: absolute;
    right: -25px;
    top: -20px;
    padding: 10px;
    border: 1px solid #0378cb;
    background-color: white;
    border-radius: 30px;
}


.close-reveal-modal:hover {
	text-decoration: none;
	color: #0378cb;	
}


@media only screen and (max-width: 768px){
	#participant-modal, #extra-modal {
		margin-left: 0;
		margin-right: 0;
		width: 75%;
		height: fit-content;
		top: 60%;
		left: 50%;
		margin-top: -350px;
		margin-left: -150px;
		max-height: 80%;
		padding: 35px 0px;
	}
	
	.modal-body {
		display: flex;
		padding-top: 0;
		flex: 1;
		overflow-y: scroll;
		padding: 0;
		height: 73vh;
	}
	
	.modal-body .deelnemer .social {
		bottom: -12px;
	}
	
	#concert-modal .modal-body {
		flex-direction: column;
	}
	
	#concert-modal .modal-body div {
		max-height: 30vh;
		overflow-y: auto;
	}
	
	
	#concert-modal img {
		height: 300px !important;
		margin-bottom: 10px;
	}
}

#concert-modal {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: fixed;
}