:root {--black-color: #000;--gold-color: #ffd700;}
body {font-family: 'Source Sans Pro', sans-serif;letter-spacing: 1px;line-height: 1.8;}
p, li {font-size: 1.2em;letter-spacing: 1px;line-height: 1.8;}
h3, .h3 {font-size: 1.5em;}
h4, .h4 {font-size: 1.3em;}
ul.list {list-style: disc inside;}
.right-text {text-align: right}
.overflow-y-hidden {overflow-y: hidden;}
.color-gold {color: var(--gold-color);}

/* Header */
.header-bg {background-color: var(--primary-color);}
.main-scroll-menu ul li a {font-size: 1.3em;text-shadow: 1px 1px 10px rgba(0,0,0,.2);}
header.fixed {
    position: fixed;
    top: 0;
    background-color: var(--primary-color);
    width: 100%;
    z-index: 9999;
    box-shadow: 1px 1px 10px rgba(0,0,0,.3);
}
header.fixed .header-bg {padding: 1em !important;}

/* Sections */
section#intro {
    background-color: var(--body-bg-color);
    /*background-image: url('https://salon-evenanders.nl/wp-content/uploads/2022/05/linda-2-transparant.webp');*/
    /*background-position: right bottom;*/
    /*background-size: 25%;*/
    /*background-repeat: no-repeat;*/
}
section#over-mij,
section#gedicht {
    background-image: url('https://salon-evenanders.nl/wp-content/uploads/2022/05/black-gold-glitter-jpg.webp');
    background-size: 50%;
    background-repeat: repeat no-repeat;
}
.svg-section {
    width: 100%;
    min-height: 100vh;
    height:100%;
    overflow: hidden;
    margin: 0;
    position: relative;
    background-color: var(--secondary-color);
}
.svg-section.green,
.svg-section.black {background-color: var(--primary-color);color: var(--extra-color);text-shadow: 1px 1px 5px rgba(0,0,0,.4);}
.svg-section.black {background-color: var(--black-color);}
.svg-section svg {width: 100%;display: block;}
.svg-section .title {
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 2.5em;
    text-shadow: 1px 1px 10px rgba(255,255,255,.2);
}
.svg-section.white .title {color: var(--primary-color);}
.svg-section.green .title {color: var(--secondary-color);}
.svg-section.black .title,
.svg-section.black h3 {color: var(--gold-color);}

.service {
    margin: .5em;
    width: calc(100% - 1em);
    background-color: var(--primary-color);
    border: .15em solid var(--primary-color);
    color: var(--secondary-color);
    text-align: center;
    padding: 1.5em;
    transition: .3s;
    border-radius: .25em;
}
.service:hover,
.service.active {background-color: var(--secondary-color);color: var(--primary-color);}
.service:hover {cursor: pointer;}
.service i {font-size: 2.5em;padding-bottom: .5em;}
.service p {margin-bottom: 0;padding-bottom: 0;font-size: 1.2em;}
.service-content {display: none;}
.service-content.active {display: block;}

/* Form */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
    padding: .5em;
    font-size: 1em;
    border: .05em solid rgba(0,0,0,0.2);
    width: 100%;
    border-radius: .25em;
    margin-bottom: .5em;
}
.wpcf7 textarea {font-size: 1.3em;}

.btn,
.wpcf7 input[type="submit"] {
    padding: 1em 1.4em;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border-radius: .25em;
    border: .1em solid var(--primary-color);
    transition: .3s;
    font-size: 1em;
}
.btn:hover,
.wpcf7 input[type="submit"]:hover {
    transition: .3s;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    cursor: pointer;
}

/* Responsive menu fix */
#toggle-menu {display: none;}
@media screen and (max-width: 820px) {
    #toggle-menu {display: block;}
    #header-evenanders,
    #header-evenanders .header-bg {position: initial;}
    .mobile-menu {background-color: var(--primary-color);}
    #menu-block {text-align: left;}
    #menu-main-menu.mobile-menu ul li a {float: left !important;}
}

/* Responsive */
@media screen and (max-width: 820px) {
    .btn {display: block;text-align: center;margin: 0 0 .5em 0 !important;}
    .p-md-x-md {padding: 0 1em;}
    header.fixed .header-bg {padding: 2em !important;}
    .fullwidth-sm {width: 100%; height: auto;}
}