@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&family=Roboto:wght@400;700&display=swap');
/* font-family: 'Charm', cursive;
    font-family: 'Roboto', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap');
/* font-family: 'Dancing Script', cursive; */

html {
    font-size: 62.5%;
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    /*background-image: linear-gradient(rgba(77, 74, 74, 0.7), rgba(77, 74, 74,0.7)), url('../images/bg_page.webp');*/
    /*background-image: linear-gradient(rgba(136, 126, 126, 0.7),rgba(136, 126, 126, 0.7)),url('../images/bg_page.webp');*/
    background-image: url('../images/bg-kaartjes-site.webp');
    background-attachment: fixed;
    background-size: cover;
    /*background-attachment: fixed;*/
    color: #2B2B2B;
}
.sl-caption.pos-bottom {
    font-size: 16px !important;
}
h1 {
    font-family: 'Charm', cursive, sans-serif;
    font-size: 3.6rem;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: bold;
    color: #9a42fb;
}
h2 {
    font-family: 'Charm', cursive, sans-serif;
    font-size: 3rem;
    margin-top: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #9a42fb;
}
h3 {
    font-family: 'Charm', cursive, sans-serif;
    font-size: 2.2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: normal;
}
.menu-mobile {
    display: none;
}

.menu-mobile .mobile_nav {
	width: 100%;
	position: absolute;
	background-color: #f2f2f2;
	color: #333333;
	overflow: scroll;
	z-index: 999;
	padding: 20px 20px 20px 0;
}

.menu-mobile .mobile_nav ul {
	list-style: none;
	margin: 0px;
	padding: 0;
}

.menu-mobile .mobile_nav a {
	display: block;
	color: #333333;
	padding: 5px 0px 5px 10px;
}

.menu-mobile .mobile_nav li {
	padding: 0px 0px 0px 10px;
}

.menu-mobile .mobile_nav li .arrow:before {
	content: "▼";
	display: inline-block;
}

.menu-mobile .mobile_nav li li {
	padding: 0px 0px 0px 20px;
}

.menu-mobile .mobile_nav li li li {
	padding: 0px 0px 0px 30px;
}

.menu-mobile .mobile_nav li.collapsed .arrow:before {
	content: "►";
	display: inline-block;
}

.menu-mobile .mobile_nav li.collapsed ul {
	display: none;
}

.menu-mobile .mobile_nav li:not(.has-children)>a,
.menu-mobile .mobile_nav li.has-children>span>a {
	padding-left: 10px;
}

.menu-mobile .mobile_nav li:not(.has-children):hover,
.menu-mobile .mobile_nav li.has-children>div:hover {
	background: #ccc;
	border-radius: 6px;
}

.menu-mobile .mobile_nav li.has-children>span {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	-ms-justify-content: space-between;
	justify-content: space-between;
}

/*
.menu-mobile .mobile_nav .mobile-nav-row {
	display: flex;
}

.menu-mobile .mobile_nav .mobile-nav-row>a {
	flex-grow: 0;
	flex-shrink: 0;
}

.menu-mobile .mobile_nav .mobile-nav-row>span {
	flex-grow: 1;
	flex-shrink: 1;
}
*/
.menu-mobile .mobile_nav span.arrow {
	font-size: 16px;
	margin: 0 0 0 0.4em;
	text-align: right;
	cursor: pointer;
	flex: 1 1 auto;
	padding-top: 5px;
	padding-right: 5px;
}

.menu-mobile .hamb {
	cursor: pointer;
	background: #f2f2f2;
    padding: 20px 20px;
    display: inline-block;
    display: flex;
    align-items: center;
}

.menu-mobile .hamb-line {
	background: #333333;
	display: inline-block;
	height: 2px;
	position: relative;
	width: 24px;
    display: -ms-flexbox;
    display: flex;
}

.menu-mobile .hamb-line::before,
.menu-mobile .hamb-line::after {
	background: #333333;
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	transition: all 0.2s ease-out;
	width: 100%;
}

.menu-mobile .hamb-line::before {
	top: 5px;
}
.menu-mobile .hamb span.label {
    font-size: 16px;
    line-height: 1;
    padding-left: 10px;
    display: inline-block;
}

.menu-mobile .hamb-line::after {
	top: -5px;
}

.menu-mobile .side-menu {
	display: none;
}

.menu-mobile .side-menu~.mobile_nav {
	display: none;
}

.menu-mobile .side-menu:checked~.mobile_nav {
	display: block;
}

.menu-mobile .side-menu:checked~.hamb .hamb-line {
	background: transparent;
}

.menu-mobile .side-menu:checked~.hamb .hamb-line::before {
	transform: rotate(-45deg);
	top: 0;
}

.menu-mobile .side-menu:checked~.hamb .hamb-line::after {
	transform: rotate(45deg);
	top: 0;
}
.main-content a {
    color: #2D6DA9;
    text-decoration: underline;
}
a.cta {
    background-color: #9a42fb;
    color: #fff;
    text-decoration: navajowhite;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 20px;
    transition: 0.5s all;
}
a.cta:hover{
    background-color: #4b039b;
}
.highlight {
    color: #9a42fb;
}
.main-content ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
.main-content ul li{
    background: url('../images/brush-fill.svg') no-repeat left top;
    padding-left: 25px;
    background-size: auto 15px;
}
.container {
    max-width: 1000px;
    margin: 0px auto;
    position: relative;
    padding-right: 20px;
}
 /*drupal */
 img.align-right {
    margin-left: 10px;
 }
 img.align-left{
    margin-right: 10px;
 }
 div[aria-label=Statusbericht] {
    background-color: #ddd;
    padding: 20px;
    margin-bottom: 20px;
}
 #block-lizzelangelo-primary-local-tasks ul {
    margin: 0;
    padding: 0;
    list-style: none;
 }
 #block-lizzelangelo-primary-local-tasks ul:after {
    display: table;
    content: "";
    clear: both;
 }
 #block-lizzelangelo-primary-local-tasks li {
    margin: 0;
    padding: 0;
    float: left;
    background-image: none;
 }
 #block-lizzelangelo-primary-local-tasks li+li {
    margin-left: 10px;
 }
 #block-lizzelangelo-primary-local-tasks a {
    color: #333;
    text-decoration: none;
    border: 2px solid #333;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 20px;
    display: inline-block;
 }
/* Header */
header.site-header {
    /*background: url('../images/header.png') no-repeat left top;*/
    background-size: cover;
    height: 377px; /*327px;*/
    padding-bottom: 150px;

    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
    header.site-header-mobile {
        display: none;
    }
    header.site-header-bot:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 148px; /*129px;*/
        background: url('../images/header-bot.webp') no-repeat left top;
        background-size: cover;
        z-index: 301;
    }
    header.site-header p {
        margin: 0;
        padding: 0;
    }
    header.site-header-mobile.site-header-other::before {
        content: "";
        display: table;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        z-index: 300;
    }
    header.site-header .opschrift {
        color: #333; /* #b8637a;*/
        /*background-color: rgb(205 216 212 / 80%);*/
        padding: 20px;
        font-weight: bold;
        font-size: 5rem;
        /*box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.75);*/
        font-family: 'Dancing Script', cursive, sans-serif;
        z-index: 305;
        position: relative;
        text-shadow: 0px 2px 2px rgba(255,255,255,0.6);
    }

header.site-header-kaarten {
    background: url('../images/lizzelangelo_kaartjes.webp') no-repeat left top;
    background-size: cover;
    height: 377px; /*327px;*/
    text-align: center;
    padding-top: 100px;
}
    header.site-header-kaarten::before {
        content: "";
        display: table;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.4);
        position: absolute;
        top: 0;
        z-index: 300;
    }
/*
    header.site-header-kaarten:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 148px;
        background: url('../images/header-bot.png') no-repeat left top;
        background-size: cover;
        z-index: 301;
    }
    */

/* footer */
footer.site-footer {
    padding: 20px;
    background-color: #9F88B1; /* #392A46; /* #9a42fb;*/
    color: #fff;
    text-align: center;
}
footer.site-footer a,
footer.site-footer h1,
footer.site-footer h2,
footer.site-footer h3,
footer.site-footer h4 {
    color: #fff;
    text-decoration: none;
}

/* inhoud */
.img_coll_2 {
    display: flex;
    flex-wrap: wrap;
    column-gap: 50px;
    row-gap: 50px;
}
#main-wrapper {
    background-color: #fff;
    display: flex;
    flex-wrap: nowrap;
    padding-top: 50px;
    padding-bottom: 50px;
}
#main-wrapper>.menubar {
    flex: 0 0 250px;
    padding: 0 20px;
    font-size: 15px;
}
#main-wrapper>.main-content {
    flex: 1 1 auto;
    padding-left: 20px;
}
/* menubar */
.menubar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menubar a {
    color: #666;
    padding: 8px 0;
    text-decoration: none;
    display: block;
}
.menubar a.is-active,
.menubar a.in-active-trail {
    color: #9a42fb;
    font-weight: bold; 
}
.menubar li+li {
    border-top: 1px solid #dadada;
}
.menubar li ul  {
    border-top: 1px solid #dadada;
}
.menubar li li {
    padding-left: 20px;
}
.menubar ul ul ul {
    padding-left: 20px;
}
.menubar li li li {
    padding-left: 0px;
}
img {
    max-width: 100%!important;
    height: auto!important;
}
.paragraph--type--inhoud{
    padding-right: 20px;
}
.paragraph--type--overzicht{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    
    row-gap: 25px;
    column-gap: 25px;
}
    .paragraph--type--overzicht a{
        text-align: center;
        text-decoration: none;
        color: #333;
    }
    .paragraph--type--overzicht .foto{
        border-radius: 50%;
        height: 0;
        padding-top: 100%;
        background-position: center;
    }
    .paragraph--type--overzicht .label{
        font-weight: bold;
        display: inline-block;
        margin-top: 10px;
    }
    .paragraph--type--foto-url {
        flex: 0 1 30%;
        max-width: 300px;
        text-align: center;
    }
.paragraph--type--foto-s {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    text-align: center;
    row-gap: 25px;
    column-gap: 25px;
}

.paragraph--type--foto {

}
    .paragraph--type--foto .label{
        font-weight: bold;
        display: inline-block;
        margin-top: 10px;
    }
.img_coll_2>div {
    flex: 0 1 45%;
}
.img_coll_3>div {
    flex: 0 1 30%;
}

.eu-cookie-compliance-secondary-button {
    box-shadow: inset 0 1px 0 0 #ffffff;
    background-color: #ededed;
    color: #000;
    padding: 5px 10px;
    font-weight: bold;
    border-radius: 5px;
    text-shadow: 1px 1px 0 #ffffff;
    float: right;
}

.disagree-button.eu-cookie-compliance-more-button, .eu-cookie-compliance-agree-button, .eu-cookie-compliance-default-button,
 .eu-cookie-compliance-hide-button, .eu-cookie-compliance-more-button-thank-you, .eu-cookie-withdraw-button,
.eu-cookie-compliance-save-preferences-button {
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
}
.disagree-button.eu-cookie-compliance-more-button:hover, .eu-cookie-compliance-agree-button:hover, .eu-cookie-compliance-default-button:hover, 
.eu-cookie-compliance-hide-button:hover, .eu-cookie-compliance-more-button-thank-you:hover, .eu-cookie-withdraw-button:hover {
    background: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    color: #fff;
}
.js-form-item {
    margin: 20px 0;
}
.js-form-item label {
    font-weight: bold;
}
.js-form-item .description {
    font-size: 13px;
}
.form-actions input[type=submit] {
    background-color: #9a42fb;
    color: #fff;
    text-decoration: navajowhite;
    display: inline-block;
    padding: 10px 25px;
    border-radius: 20px;
    transition: 0.5s all;
    border: none;
}
.form-actions input[type=submit]:hover {
    background-color: #4b039b;
}
.highlight_doosjes {
    color: #af544c;
}
.highlight_kaarten {
    color: #521310;
}
.highlight_kaders {
    color: #177011;
}


form.webform-submission-form>.form-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

form.webform-submission-form .form-actions {
    justify-content: center;
}

form.webform-submission-form>.form-wrapper .form-item {
    flex: 0 1 48%;
} 

form.webform-submission-form input[type=text],
form.webform-submission-form input[type=email],
form.webform-submission-form input[type=password],
form.webform-submission-form textarea {
    width: 100%;
    padding: 5px 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
}
form.webform-submission-form .form-required::after {
    content: "*";
    display: inline-block;
    vertical-align: super;
    line-height: 1;
    color: #f00;
}
form.webform-submission-form .js-form-item {
    margin: 10px 0;
}
div[role="alert"] {
    background-color: #ff5f5f;
    padding: 20px 30px;
    color: #fff;
}
.main-content div[role="alert"] ul li { 
    background-image: url('../images/brush-fill-white.svg');
}
.webform-confirmation__message{
    text-align: center;
    background-color: #d2d2d2;
    padding: 20px 30px;
}
@media (max-width: 750px) {
    form.webform-submission-form>.form-wrapper .form-item {
        flex: 0 1 100%;
    } 
}
@media (max-width: 700px) {
    /* Header */
    header.site-header {
        display: none;
    }
    header.site-header-mobile {
        display: block;
    }
    header.site-header-bot {
        min-height: 257px;
        height: auto;
    }
    header.site-header-bot::after {
        height: 89px;
    }    
    header.site-header-schilderen {
        background-image: url('../images/header_zonder.webp')!important;   
    }
    header.site-header .opschrift {
        font-size: 4.5rem;
        text-align: center;
    }
    header.site-header-schilderen .opschrift {
        display: block;
        color: #9a42fb!important; 
    }
    #main-wrapper {
        display: block;
    }
    #main-wrapper {
        flex-wrap: wrap;
    }
    .menubar {
        display: none;
    }
    .main-content{
        flex: 0 1 100%;
    }
    .menu-mobile {
        display: inline-block;
    }
    .main-content {
        margin-top: 20px;
    }
}
@media (max-width: 550px) {
    header.site-header .opschrift {
        font-size: 4rem;
    }
    .paragraph--type--foto-url {
        flex: 0 1 45%;
    }
    .img_coll_3 > div {
        flex: 0 1 45%;
    }
}