/* Fonts */
@font-face {
    font-family: 'Noto Serif';
    src: url('../fonts/custom-noto-serif.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Grand Bold';
    src: url('../fonts/custom-grand-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* General */
html, body,
h1, h2, h3, h4, h5, h6,
p, span, a, li,
input, label, button {
    font-family: "Noto Serif" !important;
    color: #242044;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Grand Bold" !important;
}
.text-right {
    text-align: right;
}
.container {
    padding: 0px;
    max-width: 1600px;
}
a.button {
    background-color: #57a746;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
}
a.button.paars {
    background-color: #A69FDE;
    color: #242044;
}
a.button.wit {
    background-color: #ffffff;
    color: #524DA4;
    border: 1px solid #524DA4;
}
a.button.wit.invert {
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: transparent;
}
.clear {
    clear:both;
}
#back-to-top,
#back-to-top .icon {
    background-color: rgba(82, 77, 164, 1);
}

/* Kinderen */
.kind {
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom left;
    width: 600px;
    height: 600px;
}
.kind.kind0 {
    background-image: url(../img/kind0.png);
}
.kind.kind1 {
    background-image: url(../img/kind1.png);
}
.kind.kind2 {
    background-image: url(../img/kind2.png);
    background-position: top;
}
.kind.kind3 {
    background-image: url(../img/kind3.png);
    width: 900px;
}
.kind.kind4 {
    background-image: url(../img/kind4.png);
    background-position: top;
}
.kind.kind5 {
    background-image: url(../img/kind5.png);
}
.kind.kind6 {
    background-image: url(../img/kind6.png);
}
.kind.kind7 {
    background-image: url(../img/kind7.png);
}
.kind.kind8 {
    background-image: url(../img/kind8.png);
}
.kind.kind9 {
    background-image: url(../img/kind9.png);
}
.kind.kind10 {
    background-image: url(../img/kind10.png);
}
.kind.kind11 {
    background-image: url(../img/kind11.png);
}
.kind.kind12 {
    background-image: url(../img/kind12.png);
}

/* Owl */
.owl-theme .owl-controls {
    color: #ffffff;
    width: 100%;
    position: relative;
    z-index: 99999999999;;
}
.owl-theme .owl-controls .owl-buttons {
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    text-align: left;
}
.owl-theme .owl-controls .owl-buttons .owl-prev,
.owl-theme .owl-controls .owl-buttons .owl-next {
    height: 44px;
    width: 58px;
    display: inline-block;
    opacity: 1;
    background: url(../img/arrow.png) no-repeat;
    background-size: 100% auto;
    padding: 0px;
    margin: 0px;
    text-indent: -9999px;
    overflow: hidden;
    margin-left: 10px;
    margin-top: 10px;
    float: none;
    position: relative;
    left: auto;
    right: auto;
}
.owl-theme .owl-controls .owl-buttons .owl-prev {
    background-image: url(../img/arrow-left.png);
}
.owl-theme .owl-controls .owl-pagination {
    text-align: left;
    margin-top: 20px;
    display: block;
    float: left;
}
.owl-theme .owl-controls .owl-page span {
    border-color: #a69fde;
    background-color: transparent;
}
.owl-theme .owl-controls .owl-page.active span {
    border-color: #a69fde;
    background-color: #a69fde;
    width: 20px;
    border-radius: 15px;
}
.owl-carousel {
    height: 400px;
}
.owl-carousel .owl-wrapper-outer {
    height: 400px;
}
.owl-carousel .owl-item .item {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    border-radius: 15px;
}
.owl-carousel .owl-item .item img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center; 
    display: block;
}
.owl-carousel.gradientControls .owl-controls {
    background: linear-gradient(180deg, rgba(86, 80, 171, 0.00) 44.98%, rgba(86, 80, 171, 0.90) 74.87%, rgba(15, 27, 64, 0.90) 100%);
    color: #ffffff;
    height: 400px;
    width: 100%;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    margin-top: -400px;
}
.owl-carousel.gradientControls .owl-controls .owl-buttons {
    padding-top: 282px;
}
.owl-carousel.gradientControls .owl-controls .owl-buttons .owl-prev,
.owl-carousel.gradientControls .owl-controls .owl-buttons .owl-next {
    display: block;
    margin-left: 10px;
    margin-top: 10px;
    float: none;
    position: relative;
    left: auto;
    right: auto;
}

/* Tabel */
.table {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.table .row {
    display: flex;
    border-bottom: 1px solid rgba(200, 199, 211, 1);
    margin-left: 0px;
    margin-right: 0px;
}
.table .cell {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    line-height: 30px;
}
.table .cell:first-child {
    text-align: left;
    padding-left: 20px;
}
.table .header {
    font-weight: bold;
    font-size: 18px;
    line-height: 28px;
    font-family:"Grand Bold";
    color:rgba(166, 159, 222, 1);
}

/* Dropdown button */
.btn-dropdown {
    position: relative;
    display: inline-block;
}
a.button.dropdown {
    border: none;
    background-image: url(../img/dropdown.png);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 12px auto;
    padding-right: 40px;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 180px;
    border-radius: 8px;
    overflow: hidden;
    z-index: 1;
    margin-top: 5px;
    background: #edecf8;
    border-radius: 5px;
    padding: 5px 10px;
}
.dropdown-content a {
    font-family: "Noto Serif" !important;
    font-weight: normal;
    font-size: 14px;
    line-height: 40px !important;
    color:rgba(82, 77, 164, 1);
    display: block;
    border-bottom: 1px solid #d3cfef;
    padding-left:0px !important;
    min-height: 40px;
    position: relative;
}
.dropdown-content a:last-child {
    border-bottom: 0px;
}
.dropdown-content a:hover {
    font-weight: bold;
    background: #edecf8;
    border-bottom: 1px solid rgba(82, 77, 164, 1);
}
.btn-dropdown:hover .dropdown-content {
    display: block;
}

/* Navbar-announcement */
#navbar-announcement {
    background-color: #fbcf09;
    line-height: 48px;
    color: #6864ad;
    font-size: 14px;
}
#navbar-announcement a {
    color: #6864ad;
    text-decoration: underline;
}
#navbar-announcement span.hl {
    font-family: "Grand Bold" !important;
    font-size: 20px;
    text-transform: uppercase;
    margin-right: 20px;
    color: #6864ad;
}

/* Navbar-info */
#navbar-info {
    background-color: #e6e4e7;
    line-height: 48px;
    font-size: 12px;
}
#navbar-info a {
    color: #242044;
    text-decoration: underline;
}
#navbar-info .vertical-divider {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

/* Navbar */
.navbar {
    min-height: 120px;
    position: relative;
    box-shadow: none;
    margin-bottom: 0px;
}
.navbar-nav > li > span,
.navbar-nav > li > a {
    text-transform: none;
    font-size: 16px;
    font-weight: normal;
    margin-top: 30px;
}
.dropdown > ul.dropdown-menu {
    margin-top: -10px !important;
}
.navbar-nav li.kinderfeestje div {
    background-color: #57a746;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 10px;
    margin-top: -10px;
}
.dropdown > ul.dropdown-menu {
    background: #edecf8;
    border-radius: 5px;
    padding: 5px 10px;
}
.dropdown > ul.dropdown-menu li {
    background: #edecf8;
    border-bottom: 1px solid #d3cfef;
}
.dropdown > ul.dropdown-menu li:last-child {
    border-bottom: none;
}
.dropdown > ul.dropdown-menu li a {
    font-family: "Noto Serif" !important;
    font-weight: normal;
    font-size: 14px;
    line-height: 24px;
    color:rgba(82, 77, 164, 1);
}
.dropdown > ul.dropdown-menu li a:hover {
    font-weight: bold;
    background: #edecf8;
    border-bottom: 1px solid rgba(82, 77, 164, 1);
}

/* Hero */
#hero .container {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#hero.hero-home .container {
    background-image:url(../img/kinderrijck-hero-home.jpg);
}
#hero .container .overlay {
    position: relative;
    background: url(../img/hero-overlay.png) repeat;
    min-height: 745px;
    width: 100%;
}
#hero .container .overlay h1 {
    font-family: "Grand Bold" !important;
    font-size: 72px;
    color: #ffffff;
    text-transform: uppercase;
    display: block;
    position: relative;
    max-width: 380px;
    left: 75px;
    top: 400px;
    background: url(../img/vector1.png) no-repeat bottom left;
    background-size: 100% auto;
    padding-left: 25px;
    padding-bottom: 30px;
}
#hero .container .overlay .button {
    position: relative;
    left: 100px;
    top: 420px;
    cursor: pointer;
}

/* USP */
#usp {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
#usp .container {
    border-bottom: 1px solid rgba(211, 207, 239, 1);
    padding-bottom: 15px;
}
#usp span {
    line-height: 60px;
    display: inline-block;
    font-family: "Grand Bold" !important;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    color: #524da4;
    background: url(../img/check.png) no-repeat left;
    background-size: 32px;
    background-position: left 12px;
    padding-left: 42px;
    padding-right: 32px;
}

/* Waarom */
.lichtpaars .top {
    background:url(../img/vector-lichtpaars-top.png) no-repeat;
    background-size: 100% 89px;
    height: 89px;
    width: 100%;
}
.lichtpaars .content {
    background-color: #edecf8;
    padding-top: 50px;
    padding-bottom: 50px;
}
.lichtpaars .bottom {
    background:url(../img/vector-lichtpaars-bottom.png) no-repeat;
    background-size: 100% 89px;
    height: 89px;
    width: 100%;
}
#waarom h2 {
    color: #524DA4;
    font-size: 72px;
    background: url(../img/vector3.png) no-repeat;
    background-position: 200px bottom;
    background-size: 400px auto;
    padding-bottom: 20px;
}
#waarom .blok {
    margin-bottom: 100px;
    padding-right: 100px;
}
#waarom h3 {
    color: #524DA4;
    font-size: 28px;
}
.waarom {
    border-radius: 15px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    margin: auto;
}
#waarom1 {
    background-image: url(../img/kinderrijck-waarom-1.png);
    width: 449.62px;
    height: 300px;
    transform: rotate(3.191deg);
    margin-left: 100px;
    margin-top: 50px;
    z-index:9998;
}
#waarom2 {
    background-image: url(../img/kinderrijck-waarom-2.png);
    width: 449.62px;
    height: 447.396px;
    transform: rotate(-8.274deg);
    margin-top: -80px;
    margin-left: 180px;
    z-index:9999;
}
#waarom3 {
    background-image: url(../img/kinderrijck-waarom-3.png);
    width: 534.792px;
    height: 272.912px;
    transform: rotate(6.852deg);
    z-index:9998;
}
#waarom4 {
    background-image: url(../img/kinderrijck-waarom-4.png);
    width: 319.412px;
    height: 419.486px;
    transform: rotate(-6.696deg);
    z-index:9999;
}

/* EtenDrinkenFeestje */
#etenDrinkenFeestje {
    margin-top: -70px;
    padding-bottom: 80px;
}
#etenDrinkenFeestje .draak1 {
    background:url(../img/kinderrijck-draak1.png) no-repeat center top;
    background-size: auto 80px;
}
#etenDrinkenFeestje .draak2 {
    background:url(../img/kinderrijck-draak2.png) no-repeat center top;
    background-size: auto 80px;
}
#etenDrinkenFeestje .inner {
    margin-top: 90px;
    padding-left: 150px;
    padding-right: 150px;
}
#etenDrinkenFeestje h2 {
    color: #524DA4;
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 54px; 
}
#etenDrinkenFeestje .draak1 h2 {
    background:url(../img/vector4.png) no-repeat;
    background-position: center bottom;
    background-size: 150px auto;
}
#etenDrinkenFeestje .draak2 h2 {
    background:url(../img/vector5.png) no-repeat;
    background-position: center top;
    background-size: 200px auto;
}
#etenDrinkenFeestje .draak1 .inner {
    border-right: 1px solid #D3CFEF;
}
#etenDrinkenFeestje .button {
    display: inline-block;
    width: 100%;
    margin-top: 20px;
}

/* Reviews */
#reviews .top {
    width:100%;
    height: 50px;
    background: url(../img/kinderrijck-hero-review-top.png) no-repeat center;
    background-size: cover;
    position: relative;
    z-index: 105;
}
#reviews .content {
    width: 100%;
    height: 600px;
    background: url(../img/kinderrijck-hero-review.png) no-repeat center;
    background-size: cover;
    margin-top: -50px;
    position: relative;
    z-index: 100;
}
#reviews .stars {
    margin-bottom: 20px;
    padding-left: 15px;
    background: url(../img/vector7.png) no-repeat;
    background-size: auto 100%;
    background-position: left center;
    width: 100%;
    height: 45px;
    padding-top: 13px;
}
#reviews .star {
    background:url(../img/star.png) no-repeat;
    background-size: 100% auto;
    width: 19px;
    height: 19px;
    display: inline-block;
}
#reviews .review-quote {
    color: #ffffff;
    font-size: 20px;
    line-height: 34px;
}
#reviews .review-author {
    color: #ffffff;
    font-size: 12px;
    line-height: 18px;
    margin-top: 20px;
}
#reviews .inner {
    background: linear-gradient(270deg, rgba(86, 80, 171, 0.00) 38.32%, rgba(86, 80, 171, 0.90) 71.39%, rgba(15, 27, 64, 0.90) 99.19%);
    width: 100%;
    height: 100%;
    position:relative;
}
#reviews .bottom {
    width:100%;
    height: 50px;
    background: url(../img/kinderrijck-hero-review-bottom.png) no-repeat center;
    background-size: cover;
    margin-top: -50px;;
    position: relative;
    z-index: 105;
}
#owlReviews {
    margin-top: 100px;
    height: auto;
}
#owlReviews .owl-wrapper-outer {
    height: auto;
}

/* Belevenissen */
#belevenissen .intro h2 {
    font-family: "Grand Bold" !important;
    font-size: 72px;
    color: rgba(82, 77, 164, 1);
    text-transform: uppercase;
    display: block;
    position: relative;
    background: url(../img/vector2.png) no-repeat bottom center;
    background-size: 70% auto;
    padding-bottom: 15px;
}
#belevenissen .intro p {
    padding-top: 30px;
    padding-bottom: 30px;
}
.card {
    height: 450px;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    margin-bottom: 25px;
    transition: transform 0.3s ease;
}
.card.speeltuin {
    background-image:url(../img/card-speeltuin.png);
}
.card.vr {
    background-image:url(../img/card-vr.png);
}
.card.lasershoot {
    background-image:url(../img/card-lasershoot.png);
}
.card.escaperoom {
    background-image:url(../img/card-escaperoom.png);
}
.card.escapewandeling {
    background-image:url(../img/card-escapewandeling.png);
}
.card.gellyball {
    background-image:url(../img/card-gellyball.png);
}
.card.escaperoomkids {
    background-image:url(../img/card-escaperoomkids.png);
}
.card.kinderfeestje {
    background-image:url(../img/card-kinderfeestje.png);
}
.card.ontbijt {
    background-image:url(../img/card-ontbijt.png);
}
.card.brunch {
    background-image:url(../img/card-brunch.png);
}
.card:hover {
    transform: rotate(2deg);
}
.card .inner {
    background: linear-gradient(180deg, rgba(86, 80, 171, 0) 44.98%, rgba(86, 80, 171, 0.9) 74.87%, rgba(15, 27, 64, 0.9) 100%);
    height: 100%;
    border-radius: 15px;
    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* tekst onderaan */
    height: 100%;
}
.card .inner h3 {
    color: #ffffff;
    font-size: 28px;
    line-height: 34px;
}
.card .inner p.bold {
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    line-height: 24px;
}
.card .inner p.price {
    color: #ffffff;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
}
.card .inner .arrow {
    height: 25px;
    width: 100px;
    background:url(../img/arrow.png) no-repeat;
    background-size: auto 25px;
}

/* WieWeZijn */
#wieWeZijn {
    margin-bottom: 150px;
    margin-top: 50px;
}
#wieWeZijn .inner * {
    padding-left: 20px;
}
#wieWeZijn h2 {
    background:url(../img/vector6.png) no-repeat;
    background-size: 150px auto;
    color: #524DA4;
    font-size: 72px;
    font-style: normal;
    font-weight: 400;
    line-height: 80px; 
}

/* Hero small */
#herosmall .container {
    background: url(../img/kinderrijck-herosmall1.png) no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
    min-height: 400px;
    position: relative;
    margin-top: 20px;
}
#herosmall .ooverlay {
    border-radius: 15px;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 50px;
    min-height: 400px;

    background: linear-gradient(0deg, rgba(53, 49, 104, 0.6), rgba(53, 49, 104, 0.6)),
linear-gradient(270deg, rgba(86, 80, 171, 0) 38.32%, rgba(86, 80, 171, 0.7) 71.39%, rgba(15, 27, 64, 0.7) 99.19%);

}
#herosmall h1 {
    color: #ffffff;
    background:url(../img/vector8.png) no-repeat;
    background-size: 600px auto;
    background-position: 180px top;
}
#herosmall p {
    color: #ffffff;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Zomaar */
#zomaar {
    margin-top: 40px;
}
#zomaar h2 {
    color: #524DA4;
    font-size: 40px;
    line-height: 54px;
    background: url(../img/vector9.png) no-repeat;
    background-size: 420px;
    background-position: left 43px;
    margin-bottom: 30px;
}
#zomaar .blok {
    background-color: #edecf8;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 20px;
}
#zomaar .blok h3 {
    color: #524DA4;
    font-size: 24px;
    line-height: 32px;
    margin-top: 0px;
}
#zomaar .blok p {
    margin-bottom: 0px;
}
#zomaar .blok.donker {
    background-color: #524da4;
}
#zomaar .blok.donker h3 {
    color: #a69fde;
}
#zomaar .blok.donker p {
    color: #ffffff;
    margin-bottom: 30px;
}
#zomaar .kind {
    margin-top: -450px;
}

/* Attracties */
#attracties {
    margin-top: -100px;
}
#attracties .top {
    background: url(../img/kinderrijck-attracties-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#attracties .bottom {
    background: url(../img/kinderrijck-attracties-bottom.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#attracties .content {
    background: #edecf8;
    padding-top: 50px;
    padding-bottom: 100px;
    padding-left: 50px;
    padding-right: 50px;
}
#attracties h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 300px auto;
    background-position: center;
    line-height: 150px;
}
#attracties .attractie {
    margin-bottom: 30px;
}
#attracties .attractie h3 {
    color: #524da4;
    font-size: 28px;
    line-height: 34px;
}
#attracties .attractie .image {
    border-radius: 15px;
    height: 250px;
    background-size: cover;
    background-position: center;
}
#attracties .attractie.klimvulkaan .image {
    background-image:url(../img/attracties-klimvulkaan.png);
}
#attracties .attractie.trampolines .image {
    background-image:url(../img/attracties-trampolines.png);
}
#attracties .attractie.klimkooi .image {
    background-image:url(../img/attracties-klimkooi.png);
}
#attracties .attractie.peuterrijck .image {
    background-image:url(../img/attracties-peuterrijck.png);
}
#attracties .attractie.touwenparcours .image {
    background-image:url(../img/attracties-touwenparcours.png);
}
#attracties .attractie.klimmuur .image {
    background-image:url(../img/attracties-klimmuur.png);
}
#attracties .attractie.swingride .image {
    background-image:url(../img/attracties-swingride.png);
}
#attracties .attractie.droptower .image {
    background-image:url(../img/attracties-droptower.png);
}
#attracties .button {
    margin-top: 80px;
    display: inline-block;
}

/* Album */
#album .top {
    background: url(../img/kinderrijck-album-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#album .bottom {
    background: url(../img/kinderrijck-album-bottom.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#album .content {
    background: #edecf8;
    padding-bottom: 100px;
    padding-left: 50px;
    padding-right: 50px;
}
#album h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 350px auto;
    background-position: left 50px;
    padding-bottom: 40px;
}
#album p {
    margin-top: 50px;
}
#album .owl-controls .owl-buttons {
    float: right;
}
#owlAlbum {
    margin-top: 100px;
    height: auto;
}
#owlAlbum .owl-wrapper-outer {
    height: auto;
}
.grid {
    width:100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}
.grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}
.grid .div1 { grid-area: 1 / 1 / 3 / 3; }
.grid .div2 { grid-area: 1 / 3 / 2 / 4; }
.grid .div3 { grid-area: 1 / 4 / 2 / 5; }
.grid .div4 { grid-area: 2 / 3 / 4 / 4; }
.grid .div5 { grid-area: 3 / 1 / 4 / 2; }
.grid .div6 { grid-area: 3 / 2 / 4 / 3; }
.grid .div7 { grid-area: 2 / 4 / 4 / 5; }

/* Toegang */
#toegang .top {
    background: url(../img/kinderrijck-toegang-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#toegang .bottom {
    background: url(../img/kinderrijck-toegang-bottom.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#toegang .content {
    background: #edecf8;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}
#toegang h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 350px auto;
    background-position: left 50px;
    padding-bottom: 40px;
}
#toegang p {
    margin-top: 50px;
}
.toegang {
    width: 25px;
    height: 25px;
    background-size: 100%;
    background-position: center;
    display: inline-block;
}
.toegang.yes {
    background-image: url(../img/toegang-2.png);
}
.toegang.no {
    background-image: url(../img/toegang-0.png);
}
.toegang.parent {
    background-image: url(../img/toegang-1.png);
}

/* FAQ */
#faq {
    margin-top: 40px;
    margin-bottom: 60px;
}
#faq h2 {
    color: #524da4;
    padding-bottom: 20px;
}
.questions {
    margin-top: 20px;
}
.questions .item {
    border: 1px solid #efeef9;
    border-radius: 20px;
    margin-bottom: 20px;
    padding: 20px;
}
.questions .item .question {
    font-weight: bold;
    background: url(../img/question-closed.png) no-repeat;
    background-position: right top;
    background-size: 11px auto;
    cursor: default;
}
.questions .item .answer {
    margin-top: 20px;
    display: none;
}
.questions .item.open .question {
    background-image:url(../img/question-open.png);
}

/* Plekje */
#plekje .top {
    background: url(../img/kinderrijck-plekje-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#plekje .content {
    background: #edecf8;
    padding-left: 50px;
    padding-right: 50px;
}
#plekje h2 {
    color: #524da4;
    padding-bottom: 20px;
    font-size: 40px;
    margin-top: 70px;
}
#plekje p {
    margin-bottom: 20px;
}
#plekje .kind {
    height: 400px;
}

/* Ontdek */
#ontdek .top {
    background: url(../img/kinderrijck-ontdek-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#ontdek .bottom {
    background: url(../img/kinderrijck-ontdek-bottom.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#ontdek .content {
    background: #edecf8;
    padding-top: 50px;
    padding-bottom: 100px;
    padding-left: 50px;
    padding-right: 50px;
}
#ontdek h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 300px auto;
    background-position: bottom center;
    margin-bottom: 60px;
}
#ontdek h3 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 150px auto;
    background-position: center left;
    line-height: 100px;
    margin-bottom: 0px;
    margin-top: 0px;
}
#ontdek #info .contentbox {
    padding: 30px;
}
#ontdek #info .button {
    margin-top: 20px;
    display: inline-block;
}
#ontdek #info.multi .contentbox {
    background: #ffffff;
}
#ontdek #info.multi .contentbox > .item {
    display: none;
}
#ontdek #info.multi .contentbox > .item.active {
    display: block;
}
#ontdek #info.multi .menubar {
    background: transparent;
    display: block;
}
#ontdek #info.multi .menubar .item {
    background: #d3cfef;
    display: inline-block;
    padding: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-right: 10px;
    font-family: 'Grand Bold';
    font-size: 18px;
    color: rgba(166, 159, 222, 1);
}
#ontdek #info.multi .menubar .item.active {
    background: #ffffff;
}

/* Prijzen */
#prijzen .top {
    background: url(../img/kinderrijck-prijzen-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#prijzen .bottom {
    background: url(../img/kinderrijck-prijzen-bottom.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#prijzen .content {
    background: #edecf8;
    padding-top: 50px;
    padding-bottom: 100px;
    padding-left: 50px;
    padding-right: 50px;
}
#prijzen h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 500px auto;
    background-position: bottom center;
    margin-bottom: 40px;
    padding-bottom: 35px;
}
#prijzen h3 {
    color: #524da4;
    font-size: 40px;
}
#prijzen h4 {
    color: rgba(166, 159, 222, 1);
    font-size: 18px;
}
#prijslijst {
    margin-top: 40px;
}
#prijslijst .blok {
    background: #ffffff;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 15px;
}
#prijslijst .item {
    background:url(../img/prijzen-arrow.png) no-repeat right center;
    background-size: 15px auto;
}
#prijslijst .uitleg .item {
    background: none;
    display: none;
}
#prijslijst .uitleg .item.active {
    display: block;
}
#prijslijst .prijzen {
    padding: 0px;
}
#prijslijst .prijzen .item {
    padding: 20px;
    border-radius: 15px;
    background-position: right 40px center;
}
#prijslijst .arrangementen .item {
    padding: 20px;
    border-radius: 15px;
    background-position: right 20px center;
    background-color: #d3cfef;
    margin-top: 15px;
    color: rgba(166, 159, 222, 1);
    font-size: 18px;
    font-family: "Grand Bold" !important;
}
#prijslijst .prijzen .item.active,
#prijslijst .arrangementen .item.active {
    background-color: #524da4;
    background-image: url(../img/prijzen-arrow-active.png);
    color: #ffffff;
}
#prijslijst .prijzen .item.active h3,
#prijslijst .arrangementen .item.active h3 {
    color: #ffffff;
}

/* Prijzen2 */
#prijzen2 h2 {
    color: #524da4;
    font-size: 60px;
    background: url(../img/vector5.png) no-repeat;
    background-size: 350px 80px;
    background-position: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    padding-top: 15px;
}
#prijzen2 h3 {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 40px;
}
#prijzen2 h4 {
    color: #a69fde;
    font-size: 24px;
}
#prijzen2 .reserveer {
    background: #524da4;
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 20px;
    border-radius: 20px;
}
#prijzen2 .reserveer a {
    display: inline-block;
}

/* Prijzen2 */
#hetmenu h2 {
    color: #524da4;
    background: url(../img/vector9.png) no-repeat;
    background-size: 640px 70px;
    background-position: left 55px;
    margin-bottom: 40px;
    padding-bottom: 20px;
    padding-top: 15px;
}
#hetmenu .blok {
    border-bottom: 1px solid rgba(200, 199, 211, 1);
    padding: 30px 10px;
}
#hetmenu .blok.title {
    margin-top: 30px;
    font-family: "Grand Bold" !important;
    color: #A69FDE;
    font-size: 20px;
}
#hetmenu .kind {
    margin-top: -400px;
}

/* Zondagsbrunch */
#zondagsbrunch {
    margin-top: -100px;
}
#zondagsbrunch .top {
    background: url(../img/kinderrijck-zondagsbrunch-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#zondagsbrunch .bottom {
    background: url(../img/kinderrijck-zondagsbrunch-bottom.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#zondagsbrunch .content {
    background: #edecf8;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 50px;
    padding-right: 50px;
}
#zondagsbrunch h2 {
    color: #524da4;
    background: url(../img/vector9.png) no-repeat;
    background-size: 300px auto;
    background-position: left top;
    font-size: 40px;
    line-height: 54px;
}
#zondagsbrunch a {
    margin-top: 20px;
    display: inline-block;
}



/* Voorbeeldmenu */
#voorbeeldmenu {
    margin-top: 0px;
}
#voorbeeldmenu .content {
    padding-left: 100px;
    padding-right: 100px;
}
#voorbeeldmenu h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 300px auto;
    background-position: center;
    font-size: 40px;
    line-height: 104px;
}
#voorbeeldmenu .formule {
    height: auto;
}
#voorbeeldmenu .draak {
    background:url(../img/kinderrijck-draak3.png) no-repeat;
    background-size: auto 160px;
    background-position: right 50px top;
    padding-top: 160px;
}
#voorbeeldmenu .draak .formule {
    background: #edecf8;
}
#voorbeeldmenu .formule h4 {
    color: #ffffff;
}
#voorbeeldmenu .formule.paars {
    margin-top: 80px;
}
#voorbeeldmenu .formule a {
    display: inline-block;
}

/* Praktische info */
#praktischeinfo .content {
    padding-left: 100px;
    padding-right: 100px;
}
#praktischeinfo h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 500px auto;
    background-position: bottom center;
    margin-bottom: 40px;
    padding-bottom: 35px;
}
#praktischeinfo h3 {
    color: rgba(166, 159, 222, 1);
    font-size: 28px;
}
#praktischeinfo h4 {
    color: rgba(166, 159, 222, 1);
    font-size: 18px;
}
#praktischeinfo #prijslijst .prijzen .item {
    background-color: #edecf8;
}
#praktischeinfo #prijslijst .prijzen .item.active {
    background-color: #524da4;
}
#praktischeinfo .blok.uitleg {
    background-color: #edecf8;
}
#praktischeinfo .blok.uitleg p {
    border-top: 1px solid #cfced8;
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 0px;
}
#praktischeinfo .blok.uitleg p:nth-child(2) {
    border-top: none;
}

/* Meer info */
#meerinfo {
    margin-top: 0px;
}
#meerinfo .content {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    padding-bottom: 50px;
}
#meerinfo h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 300px auto;
    background-position: left bottom;
    font-size: 40px;
    line-height: 54px;
    margin-bottom: 40px;
}
#meerinfo .checks {
    background: #edecf8;
    border-radius: 15px;
}
#meerinfo .checks .check {
    background: url(../img/check2.png) no-repeat;
    background-position: left top 20px;
    background-size: 20px;
    display: block;
    padding: 20px 30px;
    border-bottom: 1px solid #cfced8;
}
#meerinfo .checks .check:last-child {
    border-bottom: 0px;
}

/* Onvergetelijk */
#onvergetelijk {
    margin-top: 0px;
}
#onvergetelijk .content {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    padding-bottom: 50px;
}
#onvergetelijk h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: 300px auto;
    background-position: center bottom;
    font-size: 40px;
    line-height: 54px;
    margin-bottom: 40px;
}
#onvergetelijk .cell {
    text-align: right;
}
#onvergetelijk .cell.cell4 {
    flex: 4;
    text-align: left;
    font-family: "Grand Bold" !important;
    font-size: 24px;
    color: rgba(166, 159, 222, 1);
}

/* Linksrechts */
#linksrechts {
    margin-top: 0px;
}
#linksrechts.paars .top {
    background: url(../img/kinderrijck-formules-top.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#linksrechts.paars .bottom {
    background: url(../img/kinderrijck-formules-bottom.png) no-repeat;
    background-size: 100% 100px;
    height:100px;
    width: 100%;
}
#linksrechts.paars .content {    
    background-color: #edecf8;
}
#linksrechts .content {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 50px;
    padding-bottom: 50px;
}
#linksrechts h3 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: auto 60px;
    background-position: left bottom;
    font-size: 40px;
    line-height: 60px;
    margin-bottom: 40px;
}
#linksrechts a {
    display: inline-block;
    margin-top: 20px;
}
#linksrechts .inner {
    margin-bottom: 60px;
}
#linksrechts .col-md-5 {
    padding: 0px;
    border-radius: 15px;
}
#linksrechts .col-md-7 {
    padding-left: 50px;
    padding-right: 50px;
}
#linksrechts .gradient {
    border-radius: 15px;
    overflow: hidden;
}
#linksrechts .gradient img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center; 
    display: block;
    border-radius: 15px;
}
#linksrechts .gradient::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(86, 80, 171, 0) 44.98%, rgba(86, 80, 171, 0.9) 74.87%, rgba(15, 27, 64, 0.9) 100%);
    border-radius: 15px;
}

/* Paarslinksrechts */
#paarslinksrechts {
    margin-top: 0px;
}
#paarslinksrechts .content {
    padding-left: 50px;
    padding-right: 50px;
}
#paarslinksrechts .inner {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#paarslinksrechts .col-md-6 {
    display: flex;
    flex-direction: column;
}
#paarslinksrechts .col-md-6 > div {    
    background-color: #edecf8;
    padding: 20px;
    border-radius: 15px;
    height: 100%;
}
#paarslinksrechts h2 {
    color: #524da4;
    background: url(../img/vector10.png) no-repeat;
    background-size: auto 60px;
    background-position: center;
    font-size: 40px;
    line-height: 60px;
    margin-bottom: 60px;
    margin-top: 60px;
}
#paarslinksrechts h3 {
    color: #524da4;
    font-size: 32px;
    line-height: 40px;
    margin-bottom: 20px;
}
#paarslinksrechts h4 {
    color: rgba(166, 159, 222, 1);
    font-size: 18px;
    line-height: 28px;
    margin-top: 20px;
    margin-bottom: 10px;
}
#paarslinksrechts a {
    display: inline-block;
}
#paarslinksrechts .paars > div {
    background-color: #524da4;
}
#paarslinksrechts .paars h3 {
    color: #edecf8;
}
#paarslinksrechts .paars p,
#paarslinksrechts .paars li {
    color: #ffffff;
}
#paarslinksrechts .image {
    text-align: center;
}
#paarslinksrechts .image img {
    height: 300px;
    width: 100%;
    object-fit: cover; 
    object-position: center; 
    display: block;
    rotate: 2deg;
    border-radius: 15px;
}

/* Footer */
.footer-widgets,
.footer-copyright {
    background-color: #524da4;
    color: #ffffff;
    font-size:16px;
    line-height: 24px;
}
.footer-widgets h2 {
    color: #ffffff;
    font-size: 40px;
    line-height: 54px;
    width: 60%;
    margin-top: 0px;
}
.footer-widgets h3 {
    font-size: 20px;
    line-height: 30px;
    color: rgba(166, 159, 222, 1);
}
.footer-widgets p {
    color: #ffffff;
}
.footer-widgets a {
    color: #ffffff;
    display: block;
}
.footer-widgets a.button {
    margin-top: 10px;
}
.footer-widgets {
    padding-bottom: 50px;
}
.footer-copyright,
.footer-copyright a {
    color: rgba(166, 159, 222, 1);
    font-size: 12px;
    line-height: 18px;
}
.footer-copyright a {
    padding-left: 20px;
    display: inline-block;
}
.footer-copyright a.social-media {
    width: 30px;
    height: 30px;
    background-size: 20px;
    background-position: center bottom;
    background-repeat: no-repeat;
    margin-bottom: -6px;
}
.footer-copyright a.social-media.facebook {
    background-image:url(../img/social-facebook.png);
    margin-left: 20px;
}
.footer-copyright a.social-media.instagram {
    background-image:url(../img/social-instagram.png);
}
.footer-copyright a.social-media.youtube {
    background-image:url(../img/social-youtube.png);
}
.footer-copyright a.social-media.linkedin {
    background-image:url(../img/social-linkedin.png);
}
.footer-copyright a.social-media.tiktok {
    background-image:url(../img/social-tiktok.png);
}
#footer-logo {
    background: url(../img/footer.png) no-repeat;
    background-size: 100% auto;
    background-position: bottom right;
    width: 90%;
    padding-top: 400px;
    position: absolute;
    right:0px;
    bottom:0px;
    margin-bottom: -47px;
}
#footer form {
    padding-right: 20px;
    font-size: 16px;
    padding-bottom: 50px;
}
#footer form p {
    font-size: 16px;
}
#footer form input[type="text"] {
    background: #524da4;
    border: 1px solid #ffffff;
    border-radius: 5px;
    color: #ffffff;
    text-transform: none;
    font-weight: normal;
    font-size: 16px;
    font-family: "Noto Serif" !important;
    padding: 5px;
    width: 100%;
    margin-bottom: 10px;
}
#footer form input[type="text"]::placeholder {
    color: #ffffff;
    text-transform: none;
    font-weight: normal;
    font-size: 16px;
    font-family: "Noto Serif" !important;
}
#footer form label {
    font-family: "Noto Serif" !important;
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
    color: #ffffff;
}
#footer form label a {
    display: inline;
    text-decoration: underline;
}
#footer form .button {
    background-color: #a69fde;
    color: #242044;
    width: auto;
    display: inline-block;
}












@media (max-width: 992px) {
    h1, h2, h3, h4 {
        background-image: none !important;
        margin-top: 0px !important;
    }
    #etenDrinkenFeestje .inner {
        padding-top: 75px;
    }
    #etenDrinkenFeestje .draak1 .inner {
        border-right: 0px;
    }
    #etenDrinkenFeestje .btn-dropdown {
        width: 100%;
    }
    #owlReviews .stars {        
        margin-top: 100px;
    }
    #reviews .content {
        margin-top: -149px;
    }
    .card.lasershoot {
        transform: none;
    }
    #usp span {
        display: block;
        text-align: left;
        width: 60%;
        margin-left:20%;
        position:relative;
    }
    #navbar-announcement {
        line-height: 24px;
        padding: 10px;
    }
    #navbar-info {
        line-height: 24px;
        padding: 10px;
    }
    #navbar-info .container > div {
        text-align: center;
    }
    #footer-logo {
        display: none;
    }
    #waarom .blok {
        margin-bottom: 20px;
    }
    .icon-bar {
        background-color: #524da4 !important;
    }
    .navbar-small .navbar-toggle {
        margin-top: 45px;
    }
    .navbar-default .navbar-collapse {
        margin-top: 15px;
        background-color: #524da4;
        color:#ffffff;
        position: relative;
        z-index: 9999999999;
    }
    .navbar-nav > li > span.dropdown-toggle,
    .navbar-nav > li.to-section > a {
        font-family: "Grand Bold" !important;
        font-size: 24px;
        color:rgba(166, 159, 222, 1);
        margin-top: 10px;
    }
    .navbar-nav > li.open > span.dropdown-toggle {
        color: #ffffff;
        margin-top: 10px;
    }
    .navbar-default ul.nav li {
        border-bottom: 1px solid #a69fde;
    }
    .dropdown > ul.dropdown-menu li {
        background-color: transparent;
    }
    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: #ffffff;
        padding-left: 0px;
        text-transform: none;
    }
    .navbar-nav .open .dropdown-menu {
        padding-left: 0px;
    }
    .formules > .col-md-4 {
        width: 100%;
    }
    #voorbeeldmenu .content {
        padding-left: 0px;
        padding-right: 0px;
    }
    #voorbeeldmenu .col-md-6 {
        width: 100%;
    }
    #voorbeeldmenu .formule.paars {
        margin-top: 0px;
    }
    #praktischeinfo .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    #linksrechts .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    #linksrechts .col-md-7 {
        padding: 0px;
        margin-bottom: 20px;
    }
    #linksrechts .col-md-5 {
        margin-bottom: 20px;
    }
    #paarslinksrechts .col-md-6 {
        display: block;
        width: 100%;
        margin-bottom: 20px;
    }
    #paarslinksrechts .inner {
        margin-bottom: 0px;
    }
    #paarslinksrechts .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    #onvergetelijk .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    #meerinfo .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    #formules .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    #zondagsbrunch .content {
        padding-left: 10px;
        padding-right: 10px;
    }
}










@media (max-width: 770px) {
    #hero .container .overlay h1 {
        max-width: 100%;
        font-size: 60px;
        left: 10px;
    }
    #hero .container .overlay .button {
        left: 10px;
    }
    #usp span {
        margin-left: 5%;
        width: 90%;
    }
    #waarom .blok {
        padding-right: 0px;
    }
    #zomaar .kind {
        margin-top: 0px;
        width: 100%;
        background-size: 80% auto;
        background-position: center bottom;
    }
    #ontdek .menubar {
        width: 100%;
    }
    #ontdek .menubar .item {
        display: block !important;
        margin-right: 0px !important;
        width: 100% !important;
        border-radius: 0px !important;
    }
    #ontdek #info.multi .menubar .item.active {
        background: #524DA4;
        color: #ffffff;
    }
    #ontdek #info .button {
        margin-bottom: 20px;
    }
    #plekje .content {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
    }
    #plekje .content .col-md-6 {
        padding-top: 50px;
    }
    #plekje .content .col-md-5 {
        height: 400px;
        margin-top: -430px;
    }
    .footer-widgets h3 {
        margin-top: 20px !important;
    }
}



@media (max-width: 600px) {
    .ooverlay {
        padding: 20px 10px !important;
    }
    h1 {
        font-size: 28px !important;
    }
    h2 {
        font-size: 24px !important;
        line-height: 28px !important;
        text-align: center;
        margin-top: 0px !important;
        padding-bottom: 10px !important;
    }
    h3 {
        font-size: 20px !important;
        line-height: 24px !important;
    }
    .buttons a.button {
        display: block;
        width: 100%;
        margin-bottom: 15px;;
    }
    #etenDrinkenFeestje .inner {
        padding-left: 20px;
        padding-right: 20px;
    }
    #waarom1,
    #waarom2,
    #waarom3,
    #waarom4 {
        width: 80%;
        margin: auto;
    }
    #waarom1 {
        height: 200px;
    }
    #waarom2 {
        height: 335px;
    }
    #waarom3 {
        height: 335px;
    }
    #waarom4 {
        height: 185px;
    }
    .card {
        height: 350px;
    }
    .kind {
        width: 400px;
        height: 400px;
        margin-top: 0px !important;
    }
    #owlAlbum {
        margin-top: 20px;
    }
    #album p {
        margin-top: 20px;
    }
    #album .content {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 40px;
    }
    .album .grid {
        grid-column-gap: 5px !important;
        grid-row-gap: 5px !important;
    }
    #toegang .content {
        padding-left: 10px;
        padding-right: 10px;
    }
    #toegang .row.header .cell:first-child {
        align-items: flex-end; 
    }
    #toegang .row.header .cell:not(:first-child) {
        font-size: 14px;
        line-height: 16px;
        writing-mode: vertical-rl; /* of vertical-lr */
        text-orientation: upright;
        letter-spacing: -4px;
        align-items: flex-end; 
    }
    #toegang .row .cell:first-child {
        flex: 3;
    }
    #ontdek .content {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
    }
    #ontdek .contentbox {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    #ontdek h3 {
        margin-bottom: 10px;
    }
    #prijzen .content {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
    }
    #prijslijst .col-md-4,
    #prijslijst .col-md-8 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .owl-carousel {
        margin-bottom: 30px;
    }
    #attracties .content {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 30px;
    }
    #attracties .button {
        margin-top: 30px;
    }
}