@import url("https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Open+Sans:wght@300;400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
.white { color: #FFFFFF; }

.black { color: #111111; }

.primary { color: #8FBE00; }

.secondary { color: #00A8C6; }

.tertiary { color: #EFEFEF; }

.background-white { background-color: #FFFFFF; }

.background-white-beige { background-color: #FFFBF7; }

.background-black { background-color: #111111; }

.background-primary { background-color: #8FBE00; }

.background-secondary { background-color: #00A8C6; }

.background-tertiary { background-color: #EFEFEF; }

.background-white-beige { background-color: #FFFBF7; }

.background-light-blue { background-color: #6ECDD9; }

.background-light-green { background-color: #d8f1b2; }

.background-logo { background-color: #8FBE00; }

.border__nav--bottom { border-bottom: 0.5rem solid #8FBE00; }

.border__button { border: 2px solid #111111; }

.border__input { border: 1px solid #8FBE00; }

h1 { font-size: 3rem; font-weight: 400; letter-spacing: -1px; line-height: 1.1; color: #EFEFEF; }

@media screen and (min-width: 48em) { h1 { font-size: 5rem; } }

h2 { font-size: 1.75rem; font-weight: 400; color: #8FBE00; margin: 0; }

h3 { font-size: 1.5rem; font-weight: 400; color: #8FBE00; }

h4, h5 { line-height: 1.6; color: #8FBE00; }

p { font-weight: 300; line-height: 1.6; margin-bottom: 0; }

button { font-size: 1.5rem; font-weight: 700; }

figcaption { font-size: 1.2rem; font-weight: 400; text-align: center; color: #8FBE00; }

blockquote { font-size: 2.2rem; font-weight: 300; font-style: italic; }

address { font-style: normal; }

a { color: #8FBE00; }

main ul { list-style: none; padding-inline-start: 1rem; }

main ul li { display: flex; flex-direction: row; line-height: 1.8rem; padding-bottom: .75rem; }

main ul li::before { content: "\2022"; color: #8FBE00; font-weight: bold; margin-right: .5rem; margin-left: -1rem; }

main ul li > * { justify-content: space-between; margin-top: 0; }

.no-bullets::before { content: unset; }

fieldset { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 2em; background-color: #EFEFEF; border: none; }

label { margin-bottom: .2em; }

label.required:after { content: " *"; }

input, textarea { width: 93%; font-size: 1em; min-height: 2.5rem; margin-bottom: 1em; padding: .25rem .75rem; border: none; border-radius: 0; font-family: inherit; }

input[type=date], textarea[type=date] { -webkit-appearance: none; background-color: #FFFFFF; color: #111111; text-align: left; }

input[type=date]:invalid::-webkit-datetime-edit, textarea[type=date]:invalid::-webkit-datetime-edit { color: #757575; }

textarea { padding-top: 1rem; }

@media screen and (max-width: 767px) { form { margin-right: -2rem; margin-left: -2rem; } }

form section { display: flex; flex-direction: row; }

form p { display: flex; flex-direction: row; align-items: center; }

form p:last-child { padding-left: 1em; }

form p input { margin: 0; width: 1.5rem; }

form p label { padding-left: .5em; }

button { width: 100%; font-family: "Amatic SC", "Open Sans", Verdana, Helvetica, sans-serif; text-transform: uppercase; padding: 0.5em; text-align: center; border: none; border-radius: 1.5rem; text-decoration: none; cursor: pointer; }

@media screen and (min-width: 48em) { button { width: 14rem; } }

button:hover { background-color: #cccccc; }

button:hover a { color: white; }

button.background-primary:hover { background-color: #698b00; }

button.background-primary:hover a { color: #FFFFFF; }

button a { text-decoration: none; color: #111111; }

a.button__covid { display: block; position: fixed; top: 80vh; left: -3rem; z-index: 9999; padding: 1rem 2rem; transform: rotate(90deg); text-decoration: none; color: #FFFFFF; background-color: #111111; border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1); }

a.button__covid:hover { background-color: #2b2b2b; }

.contact_overlay { display: block; position: fixed; top: 20vh; right: 0; z-index: 9999; }

.contact_overlay__buttons { position: relative; font-size: 1.8rem; background-color: #111111; color: #FFFFFF; border-radius: 1.6rem 0 0 1.6rem; box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1); transition: left 0.2s ease-out; left: calc(100% - 3rem); }

.contact_overlay__buttons:hover { left: 0; }

.contact_overlay__buttons a { display: flex; align-items: center; padding: .6rem; text-decoration: none; color: #FFFFFF; background-color: #111111; border-radius: 1.5rem 0 0 1.5rem; }

.contact_overlay__buttons a:hover { background-color: #2b2b2b; border-radius: 0; }

.contact_overlay__buttons a:hover:first-child { border-radius: 1.5rem 0 0 0; }

.contact_overlay__buttons a:hover:last-child { border-radius: 0 0 0 1.5rem; }

.contact_overlay__buttons a i { display: inline-block; padding-right: .3rem; width: 2.5rem; text-align: center; }

.contact_overlay__buttons a span { font-size: 16px; }

.contact_methods { display: flex; flex-direction: column; }

.contact_methods .contact_method { display: flex; align-items: center; flex-direction: row; }

.contact_methods .contact_method i { padding: 0.5rem; font-size: 1.2rem; }

.contact_methods .contact_method span { padding: 0.5rem; }

.grid { display: grid; grid-template-columns: 100%; }

.grid .col { padding: 2rem; }

@media screen and (min-width: 72em) { .grid.col-2 { grid-template-columns: 50% 50%; } }

@media screen and (min-width: 48em) { .grid.col-3 { grid-template-columns: 50% 50%; } }

@media screen and (min-width: 72em) { .grid.col-3 { grid-template-columns: 1fr 1fr 1fr; } }

@media screen and (min-width: 48em) { .grid.col-1-2 { grid-template-columns: 26% 1fr; } }

@media screen and (min-width: 48em) { .grid.col-2-1 { grid-template-columns: 2fr 1fr; } }

.grid.col-4 { grid-grap: 1rem; grid-template-columns: 100%; }

@media screen and (min-width: 48em) { .grid.col-4 { grid-template-columns: 50% 50%; } }

@media screen and (min-width: 72em) { .grid.col-4 { grid-template-columns: 25% 25% 25% 25%; } }

.logo { position: relative; bottom: -8px; height: 60px; }

@media screen and (min-width: 48em) { .logo { height: 88px; } }

.image__header--background { background-image: url("/assets/images/home/headerfoto-Schuytse-Tandartsen-Arnhem-tiny.jpg"); background-position: center center; background-size: cover; overflow: hidden; }

.image--background { background-position: center center; background-size: cover; height: 200px; }

.image--index { position: absolute; top: 5rem; right: -12rem; height: 44rem; }

.image--usp { width: auto; height: 12rem; }

@media screen and (min-width: 48em) { .image--usp { height: 18rem !important; } }

figure.usp { -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); justify-content: flex-start; align-items: center; margin: 0; margin-right: 1rem; }

figure.usp picture { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 18rem; max-height: 18rem; }

@media screen and (min-width: 48em) { figure.usp picture { width: 18rem; } }

figure.usp figcaption { width: auto; color: #111111; text-align: left; }

figure.usp figcaption h5 { font-size: 18px; font-weight: 400; }

figure.usp figcaption p { display: flex; flex: 1; font-size: 14px; }

svg path { position: relative; top: -1rem; z-index: 99; stroke: none; }

svg path.grey { fill: #EFEFEF; }

svg path.white { fill: #FFFFFF; }

.flex { display: flex; flex-direction: column; justify-content: flex-start; }

@media screen and (min-width: 48em) { .flex { flex-direction: row; flex-wrap: nowrap; } }

.flex-row { display: flex; flex-direction: row; }

.flex-column { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }

.flex-column-xs { display: flex; flex-direction: column; }

@media screen and (min-width: 48em) { .flex-column-xs { flex-direction: row; } }

.flex-center { display: flex; justify-content: center; align-items: center; }

.flex-start { display: flex; justify-content: flex-start; }

.flex-end { display: flex; justify-content: flex-end; }

.space-between { justify-content: space-between; }

.space-around { justify-content: space-around; }

.flex-grow { flex-grow: 1; }

.align-items-center { display: flex; align-items: center; }

.align-items-start { display: flex; align-items: start; }

.align-self-start { align-self: flex-start; }

.truncate { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

.relative { position: relative; }

.absolute { position: absolute; }

.fixed { position: fixed; }

.top-0 { top: 0; }

.top-header-height { top: 55px; }

@media screen and (min-width: 48em) { .top-header-height { top: 12px; } }

.z-index-9 { z-index: 9; }

.z-index-99 { z-index: 99; }

.z-index-999 { z-index: 999; }

.z-index-9999 { z-index: 9999; }

.z-index-99999 { z-index: 99999; }

.hidden { display: none; }

.block { display: block; }

.w-100 { width: 100%; }

.w-75 { width: 100%; }

@media screen and (min-width: 72em) { .w-75 { width: 75%; } }

.w-50 { width: 100%; }

@media screen and (min-width: 72em) { .w-50 { width: 50%; } }

.h-100 { width: 100%; }

@media screen and (min-width: 48em) { .h-100 { width: auto; height: 100%; } }

.h-50 { height: 50%; }

.vh-100 { min-height: 100vh; }

.m-0 { margin: 0 !important; }

@media screen and (max-width: 767px) { .m-0-xs { margin: 0 !important; } }

.m-1 { margin: .5rem !important; }

@media screen and (min-width: 48em) { .m-1 { margin: 1rem !important; } }

.m-2 { margin: 1rem !important; }

@media screen and (min-width: 48em) { .m-2 { margin: 2rem !important; } }

.m-3 { margin: 1.5rem !important; }

@media screen and (min-width: 48em) { .m-3 { margin: 3rem !important; } }

.m-4 { margin: 2rem !important; }

@media screen and (min-width: 48em) { .m-4 { margin: 4rem !important; } }

.m-5 { margin: 2.5rem !important; }

@media screen and (min-width: 48em) { .m-5 { margin: 3rem !important; } }

.m-6 { margin: 3rem !important; }

@media screen and (min-width: 48em) { .m-6 { margin: 6rem !important; } }

@media screen and (max-width: 767px) { .m-top-1-xs { margin-top: 1rem !important; } }

.m-top-2 { margin-top: 2rem !important; }

@media screen and (max-width: 767px) { .m-top-2-xs { margin-top: 2rem !important; } }

.m-left-1 { margin-left: 0 !important; }

@media screen and (min-width: 48em) { .m-left-1 { margin-left: 1rem !important; } }

@media screen and (max-width: 767px) { .m-left-1-xs { margin-left: 1rem !important; } }

.m-bottom-3 { margin-bottom: 1.5rem !important; }

@media screen and (min-width: 48em) { .m-bottom-3 { margin-bottom: 3rem !important; } }

.m-auto { margin: auto; }

.p-1 { padding: .5rem !important; }

@media screen and (min-width: 48em) { .p-1 { padding: 1rem !important; } }

.p-2 { padding: 1rem !important; }

@media screen and (min-width: 48em) { .p-2 { padding: 2rem !important; } }

.p-3 { padding: 1rem 3rem !important; }

@media screen and (min-width: 48em) { .p-3 { padding: 3rem !important; } }

@media screen and (max-width: 767px) { .p-3-xs { padding: 1rem 3rem !important; } }

.p-4 { padding: 3rem !important; }

@media screen and (min-width: 48em) { .p-4 { padding: 4rem !important; } }

.p-5 { padding: 2.5rem !important; }

@media screen and (min-width: 48em) { .p-5 { padding: 5rem !important; } }

.p-6 { padding: 3rem !important; }

@media screen and (min-width: 48em) { .p-6 { padding: 6rem !important; } }

.p-0 { padding: 0 !important; }

@media screen and (max-width: 767px) { .p-0-xs { padding: 0 !important; } }

.p-top-0 { padding-top: 0 !important; }

.p-top-1 { padding-top: 1rem !important; }

.p-top-2 { padding-top: 2rem !important; }

.p-top-3 { padding-top: 1rem !important; }

@media screen and (min-width: 48em) { .p-top-3 { padding-top: 3rem !important; } }

.p-top-4 { padding-top: 4rem !important; }

.p-right-0 { padding-right: 0 !important; }

@media screen and (min-width: 48em) { .p-right-0-md { padding-right: 0rem !important; } }

.p-right-1 { padding-right: 1rem !important; }

.p-right-2 { padding-right: 2rem !important; }

.p-right-3 { padding-right: 3rem !important; }

.p-right-4 { padding-right: 4rem !important; }

.p-bottom-0 { padding-bottom: 0 !important; }

@media screen and (min-width: 48em) { .p-bottom-0-md { padding-bottom: 0 !important; } }

.p-bottom-1 { padding-bottom: 1rem !important; }

.p-bottom-2 { padding-bottom: 2rem !important; }

.p-bottom-3 { padding-bottom: 3rem !important; }

.p-bottom-4 { padding-bottom: 4rem !important; }

.p-left-0 { padding-left: 0 !important; }

@media screen and (min-width: 48em) { .p-left-0-md { padding-left: 0rem !important; } }

.p-left-1 { padding-left: 1rem !important; }

.p-left-2 { padding-left: 2rem !important; }

.p-left-3 { padding-left: 3rem !important; }

.p-left-4 { padding-left: 4rem !important; }

.logobar { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1rem; }

.logobar .logobar--logo img { height: 50px; padding: 1rem; }

.logobar .logobar--social a { height: 86px; display: flex; flex-direction: row; align-items: center; color: #19227d; text-decoration: none; }

.logobar .logobar--social a img { width: 35px; padding: 1rem; }

.logobar .logobar--social a span { font-weight: bold; font-size: 0.9rem; }

@media screen and (min-width: 780px) { .logobar { flex-direction: row; justify-content: space-around; } }

table { border-collapse: collapse; margin: 25px 0; font-size: 0.9em; font-family: sans-serif; min-width: 200px; }

table thead tr { background-color: #00A8C6; color: #ffffff; text-align: left; }

table th, table td { padding: 12px 15px; }

table th:first-of-type { width: 10%; }

table th:last-of-type { width: 15%; }

table tbody tr { border-bottom: 1px solid #dddddd; }

table tbody tr:nth-of-type(even) { background-color: #f3f3f3; }

table tbody tr:last-of-type { border-bottom: 2px solid #6ECDD9; }

.side_navigation { height: 100%; background-color: #d8f1b2; }

.side_navigation ul { display: flex; flex-direction: column; flex-wrap: nowrap; padding: 2rem; padding-left: 4rem; height: 100%; }

.side_navigation ul li { color: #111111; padding: .25rem 0; }

.side_navigation ul li::before { content: none; }

.side_navigation ul li a { color: #111111; text-decoration: none; padding: .25rem .5rem; }

.side_navigation ul li a:hover, .side_navigation ul li a:active { font-weight: bolder; }

header { position: sticky; top: 0; z-index: 999; display: flex; justify-content: space-between; align-items: center; width: 100vw; border-bottom: 0.5rem solid #8FBE00; flex-wrap: wrap; background-color: #FFFFFF; }

@media screen and (min-width: 721px) { .hamburger-icon { display: none !important; visibility: hidden; } }

@media screen and (min-width: 721px) and (max-width: 890px) { header { flex-direction: column; justify-content: center; } }

header .nav-logo { display: block; height: 75px; padding-left: 15px; padding-right: 15px; position: relative; width: 91px; }

header .nav-logo img { position: absolute; bottom: -3px; height: 100%; }

@media screen and (max-width: 720px) { #hamburger { display: block; position: relative; top: 5px; padding-right: 50px; z-index: 1; -webkit-user-select: none; user-select: none; /* --- Hamburger icon: --- */ } #hamburger a { text-decoration: none; color: #111111; transition: color 0.3s ease; } #hamburger a:hover { font-weight: bolder; } #hamburger nav.navbar { left: 83px; position: absolute; width: 100vw; height: 100vh; margin: -100px 0 0 0; padding: 50px; padding-top: 125px; /* background-image: url(/assets/images/logo/2000-logo-groen.png); background-size: 100%; background-repeat: no-repeat; background-position: 27vw; */ background-color: #d8f1b2; transform-origin: center left; transform: translate(0, 0); transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1); } #hamburger nav.navbar ul { list-style-type: none; -webkit-font-smoothing: antialiased; } #hamburger nav.navbar ul li { padding: 10px 0; font-size: 22px; } #hamburger nav.navbar ul li .children { display: none; visibility: hidden; } #hamburger > input:checked ~ nav.navbar { transform: translate(-100vw, 0); } #hamburger input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } #hamburger span.hamburger-icon { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #8FBE00; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease; } #hamburger span:first-child { transform-origin: 0% 0%; } #hamburger span:nth-last-child(2) { transform-origin: 0% 100%; } #hamburger input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #111111; } #hamburger input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #hamburger input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } }

@media screen and (min-width: 721px) { nav.navbar { position: relative; background-color: #FFFFFF; letter-spacing: 0; line-height: 1.2; z-index: 9999; height: 75px; } nav.navbar a[href=''] { color: #848484 !important; cursor: default; } nav.navbar ul { display: flex; height: 100%; flex-direction: row; flex-wrap: nowrap; align-items: center; margin: 0; list-style: none; padding-right: 2rem; } nav.navbar ul li.top { color: #111111; position: relative; padding: 2rem 1rem; } nav.navbar ul li.top ul.children { display: none; flex-direction: column; padding: 0; font-size: 14px; line-height: 1.3; align-items: flex-start; } nav.navbar ul li.top:hover ul.children { display: flex; position: absolute; top: 55px; left: 0; z-index: 99; padding-top: 1.5rem; } nav.navbar ul li.top:hover > a, nav.navbar ul li.top:hover > a:visited { color: #8FBE00; } nav.navbar ul li.top a, nav.navbar ul li.top a:visited { color: #111111; text-decoration: none; } nav.navbar ul li.top.active > a, nav.navbar ul li.top.active li.child.active { font-weight: bolder; } nav.navbar ul li.top li.child { padding: .5rem 1rem; width: 200px; background-color: #d8f1b2; } nav.navbar ul li.top li.child:hover { font-weight: bolder; } }

html { font-size: 16px; min-height: 100vh; height: 100%; overflow-x: hidden; }

body { font-family: "Roboto", Verdana, Helvetica, Arial, sans-serif; font-weight: 300; background-color: #FFFFFF; color: #111111; margin: 0; height: 100%; }

footer { position: relative; bottom: 0; }

footer ul { list-style: none; }

/*# sourceMappingURL=styles.css.map */