:root{
	--beeld: #ffd3ae;
	--socials: #abd3ed;
	--websites: #b9dedb;
	--events: #ffd5d1;
    --branding: #beccf3;

    --beeld-300: #FFD3AE;
    --beeld-700: #EB622D;
    --socials-300: #ABD3ED;
    --socials-700: #006FBB;
    --websites-300: #B9DEDB;
    --websites-700: #008F8B;
    --events-300: #FFD5D1;
    --events-700: #EA3757;
    --branding-300: #BECCF3;
    --branding-700: #4F57A3;

    --menu-300: var(--socials-300);
    --menu-700: var(--socials-700);
}

/** Utility classes **/

.fs-800 {
    font-size: clamp(1.75rem, 1.315rem + 2.174vi, 3rem); /* 28px - 48px, min.vw 320px, max.vw 1240px */
}

.fs-500 {
    font-size: clamp(1.25rem, 1.076rem + 0.87vi, 1.75rem); /* 20px - 28px, min.vw 320px, max.vw 1240px */
}

.fs-300 {
    font-size: clamp(1.125rem, 0.995rem + 0.652vi, 1.5rem); /* 18px - 24px, min.vw 320px, max.vw 400px */
}

.fs-200 {
    font-size: 1rem;
}

.fw-900 {
    font-weight: 900;
}

.fw-500 {
    font-weight: 500;
}

.fw-300 {
    font-weight: 300;
}

.text-center {
    text-align: center;
}

.relative {
    position: relative;
}

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.absolute {
    position: absolute;
}

.top-5 {
    top: 5px;
}   

.right-5 {
    right: 5px;
}

.right-20 {
    right: 20px;
}

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

.justify-center {
    justify-content: center;
}

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

.flex-wrap {
    flex-wrap: wrap;
}

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

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.h-full {
    height: 100%;
}

.w-full {
    width: 100%;
}

.max-w-700 {
    max-width: 700px;
}

.rounded-sm {
    border-radius: 2px;
}

.bg-white {
    background-color: #fff;
}

.text-white {
    color: #fff;
}

.text-black {
    color: #222;
}

.text-menu-300 {
    color: var(--menu-300);
}

.text-menu-700 {
    color: var(--menu-700);
}

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

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

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

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

.mt-1 {
    margin-top: 4px;
}

.mt-4 {
    margin-top: 1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mr-5 {
    margin-right: 1.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-8 {
    gap: 2rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-16 {
    gap: 4rem;
}

.absolute {
    position: absolute;
}

.top-20 {
    top: 20px;
}

.left-20 {
    left: 20px;
}

.hover-underline:hover {
    text-decoration: underline;
}


.rMenuVisible {
    display: block!important;
    transform: translateX(0px)!important;
}
.rContactVisible {
    transform: translateX(0px)!important;
    display: flex!important;
}

.rw-menu_services {
    position: fixed;
    top: 0px;
    left: calc(50% - 540px);
    width: 80%;
	max-width: 1080px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row;
	z-index:99999;
    transition: all 500ms cubic-bezier(1.000, -0.070, 0.000, 1.030); /* custom */

    transition-timing-function: cubic-bezier(1.000, -0.070, 0.000, 1.030); /* custom */
}
a.rw-menu_item {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
	cursor: pointer;
	transform-style: preserve-3d;
}
a.rw-menu_item > *{
	font-family: 'Montserrat', sans-serif;	
	float:left;
	width: auto;
}
.tippy-box[data-theme~='tomato'] > .tippy-content,
.tippy-content{
	font-family: 'Montserrat', sans-serif;	
	font-weight: 700;
}
a.rw-menu_item > h1 {
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    padding: 15px 7px;
	padding-bottom: 3px;
	float:left;
	background-color: rgba(0,0,0,0);
	z-index:9;
	transform: translateZ(10px);
	transform-style: preserve-3d;
}
a.rw-menu_item > h1:before {
    background-color: #808080;
    position: absolute;
    left: 0px;
    top: 13px;
    width: 100%;
    height: 32px;
    content: "";
    z-index: -1;
	transform: translateZ(-30px);
	transform-style: preserve-3d;
}
a.rw-menu_item > h2{
	font-size: 15px;
	font-weight: 400;
	color: black;
}
.rw_logo {
    position: fixed;
    left: 20px;
    top: 20px;
    width: 145px;
    height: 130px;
    cursor: pointer;
    z-index: 999999999999999999;
    transform-style: preserve-3d;
}
.rw_logo > *{
	position:absolute;
	left: 0px;
	top: 0px;
	width: inherit;
	height: inherit;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;		
	transform-style: preserve-3d;
	-webkit-animation: fadein 1s forwards; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1s forwards; /* Firefox < 16 */
    -ms-animation: fadein 1s forwards; /* Internet Explorer */
    -o-animation: fadein 1s forwards; /* Opera < 12.1 */
    animation: fadein 1s forwards;
	opacity: 0;
}
.rw_logo > .rw-logo_laag3{
	background-image: url("/wp-content/uploads/2025/01/rwlogo_L3.svg");
	transform: translateZ(15px);
}
.rw_logo > .rw-logo_laag2{
	background-image: url("/wp-content/uploads/2025/01/rwlogo_L2.svg");
	transform: translateZ(15px);
}
.rw_logo > .rw-logo_laag1 {
    background-image: url("/wp-content/uploads/2025/01/rwlogo_L1.svg");
    transform: translateZ(-15px);
    z-index: 9999999999;
}

.rw-toolbar {
    position: fixed;
    right: 20px;
    top: 20px;
    width: 50px;
	z-index: 999999;
}
.rw-t_item {
    width: 50px;
    height: 50px;
    overflow: hidden;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	cursor: pointer;
}

.rw-t_item > img { 
	width: 50%;
	transform-style: preserve-3d;
	transform: translateZ(100px);
}
.et_pb_section_0{
	margin-top: -1px;
}
.et_pb_section_0 > * {
    padding-top: 80px!important;
	box-sizing: border-box;
}
.rw-menu_services > .rd-branding > h1:before{
	background-color: var(--branding);
}
.rw-menu_services > .rd-socials > h1:before{
	background-color: var(--socials);
}
.rw-menu_services > .rd-beeld > h1:before{
	background-color: var(--beeld);
}
.rw-menu_services > .rd-websites > h1:before{
	background-color: var(--websites);
}
.rw-menu_services > .rd-events > h1:before{
	background-color: var(--events);
}

#wpadminbar {
    z-index: 100001000!important;
}
.rw-logo_{
	display: none!important;
}
.rw-logo_1{
	display: block!important;
}
.rw-toolbar.rw_tb_black {
    width: 60px;
    background-color: #0009!important;
    padding: 5px;
}

.rw-toolbar.rw_tb_black > div > img {
	filter: invert(1)!important;
}
.rw-t_item:hover{
	background-color: #ec622c!important;
	border-radius: 5px;
}
.rw-t_item:hover > img{
	filter: invert(1);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.rw-contact_overlay,
.rw_m_menu {
    position: fixed;
    z-index: 9999999999999999!important;
    right: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    background-color: var(--socials);
	box-sizing: border-box;
	padding: 30px;
}
.rw_m_menu > .menu-ruw-menu-container {
    height: 100%;
    width: 500px;
    margin-left: calc(50% - 250px);
	box-sizing: border-box;
}
.rw_m_menu > .menu-ruw-menu-container > ul {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.rw_m_menu > .menu-ruw-menu-container > ul > li {
    margin: 5px;
	box-sizing: border-box;
	float:left;
	margin-bottom: 50px;
	text-align:center;
}
/* .rw-contact_overlay > .rw_contact_overlay_inner > h1,
.rw_m_menu > .menu-ruw-menu-container > ul > li > a > a.rw_menu_dot,
.rw_m_menu > .menu-ruw-menu-container > ul > li > a{
	font-size: 60px;
	float:left;
	font-family: 'Montserrat', sans-serif;	
	font-weight: 900;
	color: white!important;
	position:Relative;
}
.rw_m_menu > .menu-ruw-menu-container > ul > li > a > .rw_menu_dot,
.rw_menu_dot
{
	color: #ec622c!important;
} */
.rw-contact_overlay > .rw_contact_overlay_inner > h1,
.rw_m_menu > .menu-ruw-menu-container > ul > li > a > a.rw_menu_dot,
.rw_m_menu > .menu-ruw-menu-container > ul > li > a{
	font-size: 60px;
	float:left;
	font-family: 'Montserrat', sans-serif;	
	font-weight: 900;
	color: white!important;
	position:Relative;
}
.rw_m_menu > .menu-ruw-menu-container > ul > li > a > .rw_menu_dot,
.rw_menu_dot
{
	color: #ec622c!important;
}
.rw_m_menu > .menu-ruw-menu-container > ul > li > a > h5 {
	font-family: 'Montserrat', sans-serif;	
    font-size: 16px;
	font-weight: 700;
    margin-top: 14px;
	color: black!important;
	
}
.rw_wit > a > h2{
	color: white;
}
.rw_m_menu,.rw-contact_overlay{
	display: none;
	transform: translatex(100vw);
}
.rw_contact_overlay_inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    width: 100%;
}
.rw-contact_overlay {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.rw-contact_overlay.rContactVisible {
    display: flex!important;
}
.rw_closeBtn{
    background-image: url("/wp-content/uploads/2022/09/close.svg");
    width: 35px;
    height: 35px;
    background-size: contain;
    position:fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
}
.rw_closeBtn:hover{
    transform: scale(1.5,1.5);
    transition: all 300ms cubic-bezier(0.300, 0.885, 0.315, 0.925); /* custom */
    transition-timing-function: cubic-bezier(0.300, 0.885, 0.315, 0.925); /* custom */
}
.rw_closeBtn:active{
    transform: scale(1.7,1.7);
    transition: all 300ms cubic-bezier(0.300, 0.885, 0.315, 0.925); /* custom */
    transition-timing-function: cubic-bezier(0.300, 0.885, 0.315, 0.925); /* custom */
}
.rw_contactform {
    display: flex;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 6px;
    padding: 25px;
    width: 500px;
    border-radius: 6px;
    box-shadow: 5px 5px 10px #72c2ce, -5px -5px 10px #7aceda;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
.rw_contactform > *{
    text-align:center;
    width: 100%;
}
.rw_contactform > h3,
.rw_contactform > h5{
    font-family: 'Montserrat', sans-serif;	
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 800;
}
.rw_contactform > h5{
    font-weight: 400;
    letter-spacing: 0px;
}
.rw_contact_overlay_inner > h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 42px!important;
}

.rw_formField {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px;
    margin-top: 10px;
}
.rw_formField > *{
    font-family: 'Montserrat', sans-serif;	
    padding: 13px!important;
    background-color: #F5F5F5!important;
    border: 1px solid #F5F5F5!important;
    border-radius: 0px!important;
    resize: none;
    width: 100%;
}
.rw_primary_action{
    background-color: #ec622c!important;
    border: 1px solid #ec622c!important;
    color: white!important;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.rwsp1{
    grid-column: span 1!important;
}
.rwsp2{
    grid-column: span 2!important;
}
div.rw_contact_details {
    font-size: 13px;
    letter-spacing: 0px;
    line-height: 17px;
    text-align:center!important;
    width: 100%;
    margin-top: 10px;
    color: grey;
}
.rw_hero_pose{
    position: fixed;
    width: 33%;
    height: 50%;
    bottom: 0px;
    left: 0px;
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url("/wp-content/uploads/2022/05/Vrijstaand-Maikel.png");
}

.rw_logo_transparent{
    position: fixed;
    width: 200px;
    height: 190px;
    z-index: -1;
    bottom: 40px;
    right: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image:url("/wp-content/uploads/2025/05/logo_buro_ruw_wit.svg");
    opacity: 0.5;
}
@media only screen and (max-width: 1440px) {
	.rw-menu_services{
		width: 800px;
		left: calc(50% - 400px);
	}
}
@media only screen and (max-width: 1100px) {
	.rw-menu_services{
		width: 500px;
		left: calc(50% - 250px);
	}
	a.rw-menu_item > h2 {
    	font-size: 12px;
	}
	a.rw-menu_item > h1 {
    	font-size: 19px;
	}
	a.rw-menu_item > h1:before {
    	top: 21px;
    	height: 7px;
	}
}
@media only screen and (max-width: 830px) {
	.rw-menu_services{
		width: 400px;
		left: calc(50% - 200px);
	}
	a.rw-menu_item > h2 {
		font-size: 9px;
	}
	a.rw-menu_item > h1 {
    	font-size: 16px;
		font-weight: 900;
	}
	a.rw-menu_item > h1:before {
    	top: 21px;
    	height: 7px;
	}
	.rw_logo {
    	position: fixed;
   		width: 90px;
    	height: 77px;
	}
    .rw_hero_pose , .rw_logo_transparent{
        display: none!important;
    }
}
@media only screen and (max-width: 500px) {
	.rw-menu_services{
		display: none;
	}
	.rw-m-hide
	{
		display: none;
	}
	.rw_logo {
	    position: fixed;
	    width: 68px;
	    height: 58px;
	    top: 7px;
	    left: 7px;
	}
	.rw-toolbar {
    	top: 5px;
    	right: 5px;
    	width: 40px;
	}
	#et-boc > .rw-t_item{
		width: 30px!important;
		height: 30px!important;
	}
    .rw-contact_overlay > .rw_contact_overlay_inner > h1, .rw_m_menu > .menu-ruw-menu-container > ul > li > a > a.rw_menu_dot, .rw_m_menu > .menu-ruw-menu-container > ul > li > a{
        font-size: 40px;
    }
    .rw_m_menu > .menu-ruw-menu-container > ul > li > a > h5{
        font-size: 14px;
    }
    .rw_contactform{
        width: 100%;
    }
    .rw-logo_laag1,.rw-logo_laag2,.rw-logo_laag3{
        background-image: url("/wp-content/uploads/2025/01/BURO-RUW-logo.png")!important;
    }
    .rw-contact_overlay, .rw_m_menu{
        padding: 10px!important;
    }
    .rw-toolbar.rw_tb_black{
        background-color: rgba(0,0,0,0)!important;
    }
    .rw-toolbar > *{
        display: none!important;
    }
    .rw-toolbar > div:nth-child(1)
    {
        display: flex!important;
    }
}



.tippy-box[data-theme="buroruw_tippy"]{
    background-color: #ec622c!important;
    padding: 10px;
    border-radius: 10px!important;
}
.tippy-box[data-theme="buroruw_tippy"] > .tippy-arrow::before {
    color: #ec622c!important;
}
*::selection {
    color: white!important;
    background: #ec622c!important;
}
button.rw_primary_action:disabled {
    background-color: #d6d6d6!important;
    border-color: #808080!important;
    color: #a5a5a5!important;
}
img.confirmed {
    width: 230px;
    margin-top: 20px;
    margin-bottom: -25px;
}


/* Mobile menu */
#menu-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
    padding: 0;
    border: none;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    padding: 20px;
    pointer-events: none;
}

#menu-dialog::backdrop {
    opacity: 0;
    pointer-events: none;
}

@media only screen and (min-width: 768px) {
    #menu-dialog {
        background-color: var(--menu-300);
    }
}

@media only screen and (max-width: 768px) {
    #menu-dialog {
        background-color: var(--menu-700);
    }
}

#menu-dialog[open] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#menu-dialog[open]::backdrop {
    opacity: 1;
    pointer-events: auto;
}

#menu-dialog.closing {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
}

#menu-dialog.closing::backdrop {
    opacity: 0;
    pointer-events: none;
}

@media only screen and (max-width: 768px) {
    #desktop-menu-dialog {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    #mobile-menu-dialog {
        display: none !important;
    }
}

#mobile-menu-dialog {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#mobile-menu-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

#mobile-menu-content-wrapper > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#menu-dialog[open] #mobile-menu-content-wrapper > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0ms;
}

#menu-dialog[open] #mobile-menu-content-wrapper > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 50ms;
}

#menu-dialog[open] #mobile-menu-content-wrapper > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 150ms;
}

#menu-dialog[open] #mobile-menu-content-wrapper > *:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 250ms;
}

#mobile-menu-dialog-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: auto;
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#menu-dialog[open] #mobile-menu-dialog-footer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 300ms;
}

#mobile-menu-dialog-header {
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
}

.menu-close-button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.15s ease;
}

.menu-list-wrapper {
    padding: 10px 25px;
}

#menu_logo {
    max-width: 60%;
    margin-top: -5px;
}

.menu-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media only screen and (max-width: 768px) {
    .menu-button {
        width: fit-content;
        padding: 10px 25px;
        background-color: var(--menu-300);
        border-radius: 2px;
        text-align: center;
        text-decoration: none;
        color: var(--menu-700);
        font-weight: 900;
        font-size: 20px;
        opacity: 0;
        transition: opacity 0.35s ease, transform 0.35s ease;
        
        &:active {
            transform: scale(0.97);
        }
    }
}

@media only screen and (min-width: 768px) {
    .menu-button {
        width: fit-content;
        padding: 10px 25px;
        background-color: var(--menu-700);
        border-radius: 2px;
        text-align: center;
        text-decoration: none;
        color: white;
        font-weight: 900;
        font-size: 20px;
        opacity: 0;
        transition: 0.3s all !important;

        &:hover {
            opacity: 0.75 !important;
        }

        &:active {
            transform: scale(0.97);
        }
    }
}

#menu-dialog[open] .menu-button {
    opacity: 1;
}

#menu-dialog[open] .menu-button:nth-child(1) {
    transition-delay: 100ms;
}

#menu-dialog[open] .menu-button:nth-child(2) {
    transition-delay: 150ms;
}

#menu-dialog[open] .menu-button:nth-child(3) {
    transition-delay: 200ms;
}

#menu-dialog[open] .menu-button:nth-child(4) {
    transition-delay: 250ms;
}

#menu-dialog[open] .menu-button:nth-child(5) {
    transition-delay: 300ms;
}

.menu-button-small {
    &:active {
        transform: scale(0.97);
    }
}

@media only screen and (max-width: 768px) {
    #menu-dialog .menu-svg-fill {
        fill: var(--menu-300);
    }
}

@media only screen and (min-width: 768px) {
    #menu-dialog .menu-svg-fill {
        fill: var(--menu-700);
    }
}

#mobile-menu-dialog-footer path.menu-svg-fill {
	opacity: 0;
}

#desktop-menu-logo path {
	opacity: 0;
}

#menu-dialog[open] #mobile-menu-dialog-footer path {
	animation: logoPathFadeIn 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


@keyframes logoPathFadeIn {
    0% {
        opacity: 0 !important;
    }
    100% {
        opacity: 1 !important;
    }
}

@media only screen and (min-width: 768px) {
    #desktop-menu-content > * {
        /* opacity: 0; */
        transform: translateY(40px) scale(0.95);
        transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #menu-dialog[open] #desktop-menu-content > *:nth-child(1) {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 100ms;
    }

    #menu-dialog[open] #desktop-menu-content > *:nth-child(2) {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 200ms;
    }

    #menu-dialog[open] #desktop-menu-content > *:nth-child(3) {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 300ms;
    }

    #menu-dialog[open] #desktop-menu-content > *:nth-child(4) {
        opacity: 1;
        transform: translateY(0) scale(1);
        transition-delay: 400ms;
    }

    #desktop-menu-logo {
        opacity: 0;
        transform: scale(0.9);
        transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #menu-dialog[open] #desktop-menu-logo {
        opacity: 1;
        transform: scale(1);
        transition-delay: 50ms;
    }

    #desktop-menu-content .menu-button {
        transform: scale(0.8);
        transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #menu-dialog[open] #desktop-menu-content .menu-button {
        transform: scale(1);
    }

    #menu-dialog[open] #desktop-menu-content .menu-button:nth-child(1) {
        transition-delay: 500ms;
    }

    #menu-dialog[open] #desktop-menu-content .menu-button:nth-child(2) {
        transition-delay: 550ms;
    }

    #menu-dialog[open] #desktop-menu-content .menu-button:nth-child(3) {
        transition-delay: 600ms;
    }

    #menu-dialog[open] #desktop-menu-content .menu-button:nth-child(4) {
        transition-delay: 650ms;
    }

    #menu-dialog[open] #desktop-menu-content .menu-button:nth-child(5) {
        transition-delay: 700ms;
    }

    #desktop-menu-content a.fs-800 {
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    #desktop-menu-content a.fs-800:hover {
        transform: scale(1.05);
    }

}

/* function displayMenuDialog contactformulier */

#desktop-menu-contact-form {
    display: none;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#menu-dialog.show-contact-form #desktop-menu-contact-form {
    opacity: 1;
}

#menu-dialog.show-contact-form #desktop-menu-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#nf-field-177_1, #nf-field-177, #nf-field-178_1, #nf-field-178, #nf-field-179_1, #nf-field-179, #nf-field-180_1, #nf-field-180 {
    padding: 20px 20px 15px 20px !important;
    border: 0px solid #DDDDDD;
    border-radius: 0px;
    font-size: 18px;
}

#nf-field-177_1, #nf-field-177, #nf-field-178_1, #nf-field-178, #nf-field-179_1, #nf-field-179 {
    margin-bottom: 8px;
}

@media only screen and (min-width: 600px) {
    #nf-field-177_1, #nf-field-177 {
        max-width: 95%;
    }
}

#nf-form-title-23_1, #nf-form-title-23, .nf-form-fields-required, label[for="nf-field-177_1"], label[for="nf-field-177"], label[for="nf-field-178_1"], label[for="nf-field-178"], label[for="nf-field-179_1"], label[for="nf-field-179"], label[for="nf-field-180_1"], label[for="nf-field-180"] {
    display: none;
}

#nf-form-23_1-cont, #nf-form-23-cont {
    width: 100%;
}

/* Submit button */
#nf-field-181_1, #nf-field-181 {
    cursor: pointer;
    background-color: var(--menu-700) !important;
    color: #fff;
    font-size: clamp(1.25rem, 0.436rem + 1.695vi, 1.75rem) /* 20px - 28px, min.vw 768px, max.vw 1240px */;
    padding: 0px 20px 0px 20px;
    font-weight: 600;
    border: 0px solid var(--clr-orange);
    width: 100%;
    border-radius: 0px;
    border: 0px solid var(--menu-700);
}

/* Contact Dialog */
#contact-dialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    margin: 0;
    padding: 15px;
    border: none;
    z-index: 9999;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    background-color: var(--menu-300);
}

#contact-dialog::backdrop {
    opacity: 0;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#contact-dialog[open] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#contact-dialog[open]::backdrop {
    opacity: 1;
    pointer-events: auto;
}

#contact-dialog.closing {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
    pointer-events: none;
}

#contact-dialog.closing::backdrop {
    opacity: 0;
    pointer-events: none;
}

#contact-dialog #contact-dialog-content {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#contact-dialog[open] #contact-dialog-content {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 100ms;
}

#contact-dialog.closing #contact-dialog-content {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}