/* STYLESHEET */

/* FONTS ADDENDUM */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&display=swap');

/* <style> ================================================================================================================== */
/* TYPO */
/* ================================================================================================================== */

html, body { 
    min-height:100%;
    max-width:100%;
    height:100%;
    font-family: 'Fredoka','Open Sans', Arial, sans-serif; 
    font-size: 16px;
    line-height: 1.4em; 
    font-weight: 400;
    color: #333;
    background-color: #FFDE59;
}

@media only screen and (min-width : 768px)
{
    html, body { font-size: 20px; line-height: 1.6em; } 
}

h1 { font-size: 1.8em; margin-top: 0; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
p { margin-bottom: 1.3em; }
.lead { font-size: 1.2em; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
    font-family: "Bree Serif", 'Fredoka','Open Sans', Arial, sans-serif; 
    letter-spacing: 1px;
    font-weight: 400;
    color: #eb5497;
    margin-bottom: 1em;
}

b, strong { font-weight: 800; }

.jumbotron { background-color: white; padding: 35px 35px 25px 35px; }
.jumbotron h1 { margin: 0 0 10px 0; }
.jumbotron p { margin: 0 0 10px 0; }

.nav-pills .nav-link { background-color: #eb5497; color: #ffde59;  }
.nav-pills .nav-item + .nav-item { margin-top: 5px; }
.nav-pills .nav-link.active { background-color: #ffde59; color: #eb5497; }

.card-body p { margin: 0; }
.card-body p + p { margin-top: 10px; }

table { background: white; border-radius: 10px; }
.contactwell  { background: white; border-radius: 10px; padding: 15px 20px 10px; }

/* ================================================================================================================== */
/* BOOTSTRAP OVERWRITES */
/* ================================================================================================================== */

a { color: #bf9e19;}
a:hover, a:focus { color: #7f5e00; }


/*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A
            /*  PRIMARY COLOR OVERWRITES { overwrites bootstrap 3 primary color settings } 
            /*===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A===A*/

            .bs-primary-border { border-color: #ffde59; }
            .bs-primary-background { background-color: #ffde59; }
            .bs-primary-color { color: #ffde59; }

            .text-primary { color: #ffde59; }

            .bg-primary, .bg-brand  {
                color: #000;
                background-color: #ffde59;
            }

            .progress-bar-primary {
                color: #000;
                background-color: #ffde59;
            }

            a.bg-primary:hover,
            a.bg-primary:focus {
                background-color: #bf9e19;
            }

            .btn-primary, .btn-primary:link, .btn-primary:visited {
                color: #000;
                background-color: #ffde59;
                border-color: #f2d14c;
            }

            .btn-primary:focus,
            .btn-primary.focus,
            .btn-primary:hover,
            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                color: #000;
                background-color: #e5c43f;
                border-color: #d9b833;
            }

            .btn-primary:active:hover,
            .btn-primary.active:hover,
            .open > .dropdown-toggle.btn-primary:hover,
            .btn-primary:active:focus,
            .btn-primary.active:focus,
            .open > .dropdown-toggle.btn-primary:focus,
            .btn-primary:active.focus,
            .btn-primary.active.focus,
            .open > .dropdown-toggle.btn-primary.focus {
                color: #FFF;
                background-color: #d9b833;
                border-color: #ccab26;
            }

            .btn-primary:active,
            .btn-primary.active,
            .open > .dropdown-toggle.btn-primary {
                background-image: none;
            }

            .btn-primary.disabled:hover,
            .btn-primary[disabled]:hover,
            fieldset[disabled] .btn-primary:hover,
            .btn-primary.disabled:focus,
            .btn-primary[disabled]:focus,
            fieldset[disabled] .btn-primary:focus,
            .btn-primary.disabled.focus,
            .btn-primary[disabled].focus,
            fieldset[disabled] .btn-primary.focus {
                background-color: #ffde59;
                border-color: #f2d14c;
            }

            .btn-primary:not(:disabled):not(.disabled):active {
                color: #000;
                background-color: #dfbe39;
                border-color: #d9b833;
            }
            
            .btn-primary .badge {
                color: #ffde59;
                background-color: #000;
            }

            .label-primary {
                background-color: #ffde59;
            }

            .label-primary[href]:hover,
            .label-primary[href]:focus {
                background-color: #b2910c;
            }

            .panel-primary {
                border-color: #ffde59;
            }

            .panel-primary > .panel-heading {
                color: #000;
                background-color: #ffde59;
                border-color: #ffde59;
            }

            .panel-primary > .panel-heading + .panel-collapse > .panel-body {
                border-top-color: #ffde59;
            }

            .panel-primary > .panel-heading .badge {
                color: #ffde59;
                background-color: #000;
            }

            .panel-primary > .panel-footer + .panel-collapse > .panel-body {
                border-bottom-color: #ffde59;
            }

            .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
                background-color: #ffde59;
                border-color: #ffde59;
            }

            .pagination>li>a, .pagination>li>span {
                color: #ffde59;
            }
            
            .page-link:hover {
                color: #e5c43f;
            }
            

.center-outer {
    display: table;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
}

.center-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.img-clipped, .img-clipped-1 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850.39 850.39' preserveAspectRatio='none'%3E%3Cpath d='M1.3,378.54C17.97,201.86,168.61-25.47,398.19,2.32c229.57,27.79,601.17,312.09,389.1,684.04C575.23,1058.31-31.77,729.11,1.3,378.54Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 850.39 850.39' preserveAspectRatio='none'%3E%3Cpath d='M1.3,378.54C17.97,201.86,168.61-25.47,398.19,2.32c229.57,27.79,601.17,312.09,389.1,684.04C575.23,1058.31-31.77,729.11,1.3,378.54Z'/%3E%3C/svg%3E");
}

.img-clipped-2 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d='M6.47,287.22C-27.26,156.3,72.53-18.46,268.63,1.58s254.01,251.4,223.86,338.88c-47.06,136.56-394.88,300.6-486.03-53.24Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d='M6.47,287.22C-27.26,156.3,72.53-18.46,268.63,1.58s254.01,251.4,223.86,338.88c-47.06,136.56-394.88,300.6-486.03-53.24Z'/%3E%3C/svg%3E");
}

.img-clipped-3 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d='M260.4,1c366-27,280.3,499.6-38.6,499C-125.5,455.1-28,22.3,260.4,1z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d='M260.4,1c366-27,280.3,499.6-38.6,499C-125.5,455.1-28,22.3,260.4,1z'/%3E%3C/svg%3E");
}

.img-clipped-4 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d='M326.11,1.45c191.4,3.45,218.61,337.28,111.98,448.51S-60.69,498.81,8.03,142.43C39-18.21,227.23-.33,326.11,1.45Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d='M326.11,1.45c191.4,3.45,218.61,337.28,111.98,448.51S-60.69,498.81,8.03,142.43C39-18.21,227.23-.33,326.11,1.45Z'/%3E%3C/svg%3E");
}

.img-clipped-5 {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d='M250.71,1.59c151.36,13.84,263.35,27.72,247.86,230.62-15.49,202.89-121.55,283.11-260.38,265.41C99.36,479.93-27.55,352.53,5.22,230.44,37.99,108.35,63.61-15.51,250.71,1.59Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' preserveAspectRatio='none'%3E%3Cpath d=''/%3E%3C/svg%3E");
}

.form-check-input {
    position: unset;
    display: inline-block;
    margin: 0 5px 0 0;
}

/* ================================================================================================================== */
/* BASIC BUILDING BLOX */
/* ================================================================================================================== */

#prefooter, #header, #content {
    background-color: #fad4e5;
    background-image: url("../img/groovepaper.png");
}

#header {
    padding: 1em 0;
    color: #909090;
}

#header a { color: #909090; }
#header a:hover { color: #000; text-decoration: none; }
#header a:active, #header a:focus { color: #000; text-decoration: none; }

.headerlogo { height: 100px; }

#content {
    padding: 5em 0;
    min-height: 400px;
}

/* ================================================================================================================== */
/* LWM */
/* ================================================================================================================== */

.logowrapper {
    position: fixed;
    top: 20px; 
    width: 60px;
    height: 60px;
    overflow: hidden;
    left: 20px;
    z-index: 15;
    color: white;
    text-align: center;
    margin: 0 1px;
    background-color: #ffde59;
    border-radius: 50%;
}

.logowrapper a {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
}

.logowrapper a img {
    height: 50px;
    padding-top: 5px;
}

.buttonwrapper {
    position: fixed;
    top: 20px; 
    width: 60px;
    height: 60px;
    overflow: hidden;
    right: 20px;
    z-index: 15;
    color: white;
    text-align: center;
    margin: 0 1px;
    background-color: #ffde59;
    border-radius: 50%;
}

.ham {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 400ms;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.line {
  fill:none;
  transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
  stroke: #eb5497;
  stroke-width:5.5;
  stroke-linecap:round;
}

.ham .top {
  stroke-dasharray: 40 172;
}
.ham .middle {
  stroke-dasharray: 40 111;
}
.ham .bottom {
  stroke-dasharray: 40 172;
}
.ham.active .top {
  stroke-dashoffset: -132px;
}
.ham.active .middle {
  stroke-dashoffset: -71px;
}
.ham.active .bottom {
  stroke-dashoffset: -132px;
}

/* The side navigation menu */
#leLWM {
    width: 100%; /*  width - change this with JavaScript */
    height: 100% !important;
    position: fixed; /* Stay in place */
    z-index: 9; /* Stay on top */
    top: 0; /* Stay at the top */
    bottom: 0; /* Stay at the bottom */
    left: 0;
    right: 0;
    padding: 0;
    background-color: white;
    background-position: center center;
    background-color: #fad4e5;
    background-image: url("../img/groovepaper.png");
    overflow-x: hidden; /* Disable horizontal scroll */
    border: 0;
    box-shadow: 0;
    
    transform: translateX(100%);
    transition: transform 0.4s;
}

#leLWM.opened {
    transform: translateX(0);
    transition: transform 0.4s;
}

/* ANIMATED X */
.LWMopen .navbar-toggle.x .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 15% 50%;
    -ms-transform-origin: 15% 50%;
    transform-origin: 15% 50%;
}

.LWMopen .navbar-toggle.x .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}

.LWMopen .navbar-toggle.x .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
}

/* ANIMATED X COLLAPSED */
.LWMclosed .navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.LWMclosed .navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}

.LWMclosed .navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}
/* END ANIMATED X */

.wrap-image {
    background-color: #999;
    background-image: url('../../uploads/editables/menuimage.jpg?v=20251218210215');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.menulogo { height: 150px; }

@media only screen and (min-width : 768px) 
{    
    .wrap-image {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: calc(50% - 40px);
        float: left;
    }
    
    .menulogo { max-width: 50%; max-height: 50%; height: auto; }
    
    .wrap-sidenav {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: calc(50% + 40px);
        float: right;
        padding: 50px;
    }
}

.main-menu {
    padding: 4em 2em;
    margin : 0;
    list-style-type: none;
    color: #eb5497;
    display: flex;
    flex-direction: row;
    height: 100%;
    align-items: center;
    flex-wrap: wrap;
}

.main-menu li {
    margin: 0;
    padding: 0;
    flex: auto;
    width: 100%;
}

.main-menu a {    
    text-decoration: none;  
    padding: 0.5em 0;
    margin: Auto 0;
    display: block;
    font-size: 1.7em;
    font-weight: 400;
    color: #eb5497;
    transition: 0.3s;
    text-align: center;
    height: 100%;
}

@media only screen and (min-width : 768px) 
{
    .main-menu a { text-align: left; }
}

@media only screen and (min-width : 992px) 
{
    .main-menu a { font-size: 1.7em; }
}

@media only screen and (min-width : 1200px) 
{
    .main-menu a { font-size: 2em; }
}

.main-menu li.active a:hover, .main-menu li.active a:focus,
.main-menu a:hover, .main-menu a:focus {    
    color: #eb5497;
    padding-left: 20px;
    transition: 0.3s;
}

.main-menu li.active a {    
    padding-left: 10px;
}

.nav-tabs {
    border-bottom: 3px solid #eb5497;;
}

.nav-tabs > li > a { 
    padding: 10px 15px; 
    display: inline-block;
    background-color: #efefef;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.nav-tabs > li.profile > a, .nav-tabs > li.active > a { 
    background-color: #eb5497;
    color: #ffde59;
}

.nav-tabs > li:hover > a { 
    background-color: #eb5497;
    color: #fff;
    text-decoration: none;
}

/* =================================================================================== */
/* == HOMECONTENT */

#content article { padding: 50px 0; }

article.curved {
    position: relative;
    margin-top: 100px;
    margin-bottom: 100px;
    padding-top: -1px;
}

article.curved .wrapper {
    background-color: #fab7d1;
    padding: 50px 0;
    margin: -1px 0;
}

.guestbook-blokken {
    display: flex;
    margin: 0;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

@media only screen and (min-width : 768px) 
{  
    .guestbook-blokken { margin: 0 -30px; }
}

.guestbook-blok {
    width: 100%;
    position: relative;
    margin: 0;
    padding: 15px;
}

@media only screen and (min-width : 768px) { .guestbook-blok { width: 50%; } }
@media only screen and (min-width : 992px) { .guestbook-blok { width: 33.33%; } }

.guestbook-blok:hover .guestbook-blok-inner {
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,.10);
    transition: all .23s ease-in-out !important;
}

.guestbook-blok-inner {
    position: relative;
    z-index: 5;
    height: 100%;
    background-color: #ffde59;
    padding: 25px;
    border-radius: 15px;
    transition: all .23s ease-in-out !important;
}

.guestbook-blok p { margin: 0; }
.guestbook-blok p.guestbook-title { color: #eb5497; font-weight: 600; font-size: 1.3em; line-height: 1.3em; margin-bottom: 12px; }
.guestbook-blok p.guestbook-descr { font-size: 0.9em; line-height: 1.4em; }

.guestbook-blok a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

/* =================================================================================== */
/* == BIGSEARCH */

.bigsearch { width: 100%; overflow: hidden; margin-bottom: 15px; }
.bigsearch .btn-cancel { float: right; width: calc(15% - 10px); }
.bigsearch .form-group { transition: all 0.3s; }
.bigsearch.active .form-group { width: 85%; float: left; transition: all 0.3s; }
.show-search { display: none; }

.has-feedback { position: relative; }
.has-feedback .form-control { padding-right: 42.5px; }

.form-control-feedback {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    pointer-events: none;
}

/* =================================================================================== */
/* == VIDEO LISTINGS */
.videolist {
    display: flex;
    margin: 0;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: center;
}

.videocontainer {
    width: 100%;
    position: relative;
    margin: 0 0 55px 0;
    padding: 0 15px;
}

a.fancy { position: relative; }
a.fancy .playbutton {
    position: absolute;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    width: 60px;
    height: 60px;
    text-align: center;
    color: #ffde59;
    line-height: 60px;
    font-size: 60px;
}

a.fancy:hover .playbutton {
    color: #eb5497;
}

.blob.categ {
    background-color: #eb5497;
    color: #ffde59;
    padding: 5px 15px;
    border-radius: 30px;
    position: absolute;
    left: 30px;
    bottom: -10px;
    z-index: 5;
    font-size: 20px;
    line-height: 1.2em;
    max-width: calc(100% - 60px);
    text-align: center;
}

.catbuttonlist {
    margin-bottom: 25px;
    padding: 0 15px;
    line-height: 40px;
}

.catbtn {
    background-color: #eb5497;
    color: #ffde59;
    padding: 5px 15px;
    border-radius: 30px;
    z-index: 5;
    font-size: 20px;
    line-height: 1.2em;
    white-space: nowrap;
    margin-bottom: 5px;
}

.catbtn.active {
    background-color: #ffde59;
    color: #eb5497;
}


@media only screen and (min-width : 768px) { .videocontainer { width: 50%; } }
@media only screen and (min-width : 992px) { .videocontainer { width: 33.33%; } }

.embed-responsive-9by16::before{ padding-top: 177.778%; }


/* =================================================================================== */
/* == FOOTER */

#prefooter .wrapper {
    position: relative;
}

#footer {
    padding: 50px 0 0;
    font-size: 0.8em;
    background-color: #FFDE59;
    position: relative;
    margin-top: -1px;
}

.smaller { font-size: 0.9em; }
.footerlogo { width: 80%; display: block; margin: 0 auto; }

@media only screen and (min-width : 768px)
{
    #footer { padding-top: 1em; }
    .footerlogo { width: 100%; z-index: 5; }
}