.r24_loader {
width: 80px;
aspect-ratio: 2;
--c:linear-gradient(#F9B66E 25%,#76C8D4 0 50%,#F8C4BC 0 75%,#B7C0DA 0);
background: var(--c), var(--c), var(--c), var(--c);
background-size: 26% 400%;
background-position: calc(0*100%/3) 100%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,calc(3*100%/3) 100%;
background-repeat: no-repeat;
animation: l10 2s infinite; 
}
@keyframes l10 {
0%     {background-position: calc(0*100%/3) calc(3*100%/3),calc(1*100%/3) calc(3*100%/3),calc(2*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3)}
8.33%  {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(3*100%/3),calc(2*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3)}
16.67% {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(3*100%/3),calc(3*100%/3) calc(3*100%/3)}
25%    {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(3*100%/3)}
30%,
33.33% {background-position: calc(0*100%/3) calc(2*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(2*100%/3)}
41.67% {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(2*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(2*100%/3)}
50%    {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(2*100%/3),calc(3*100%/3) calc(2*100%/3)}
58.33% {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(2*100%/3)}
63%,
66.67% {background-position: calc(0*100%/3) calc(1*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(1*100%/3)}
75%    {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(1*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(1*100%/3)}
83.33% {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(0*100%/3),calc(2*100%/3) calc(1*100%/3),calc(3*100%/3) calc(1*100%/3)}
91.67% {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(0*100%/3),calc(2*100%/3) calc(0*100%/3),calc(3*100%/3) calc(1*100%/3)}
97%,
100%   {background-position: calc(0*100%/3) calc(0*100%/3),calc(1*100%/3) calc(0*100%/3),calc(2*100%/3) calc(0*100%/3),calc(3*100%/3) calc(0*100%/3)}
}
.rw24_overlay
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.8);
z-index: 1000000;
display: flex;
justify-content: center;
align-items: center;
}
.rw24_modal
{
background-color: white;
border-radius: 3px;
width: 1200px;
height: 600px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0px;
}
.rw24_img {
background-size: cover;
background-position: center;
position:relative;
}
.rs24_content {
padding: 20px;
background-color: #f5f5f5;
}
a.rs24_cta {
padding: 10px;
background-color: #ec622c;
color: white;
font-weight: 800;
margin-top: 20px;
float: left;
}
.rs24_content > h2 {
font-weight: 800;
color: black;
font-size: 36px;
}
.rs24_content > h5 {
font-weight: 800;
color: #ec622c;
font-size: 18px;
}
.rw24_nav {
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.5);
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M12%2C23%20C5.92486775%2C23%201%2C18.0751322%201%2C12%20C1%2C5.92486775%205.92486775%2C1%2012%2C1%20C18.0751322%2C1%2023%2C5.92486775%2023%2C12%20C23%2C18.0751322%2018.0751322%2C23%2012%2C23%20Z%20M12%2C21%20C16.9705627%2C21%2021%2C16.9705627%2021%2C12%20C21%2C7.02943725%2016.9705627%2C3%2012%2C3%20C7.02943725%2C3%203%2C7.02943725%203%2C12%20C3%2C16.9705627%207.02943725%2C21%2012%2C21%20Z%20M9.20710678%2C14%20C9.07449854%2C14%208.94732158%2C13.9473216%208.85355339%2C13.8535534%20C8.65829124%2C13.6582912%208.65829124%2C13.3417088%208.85355339%2C13.1464466%20L11.6464466%2C10.3535534%20C11.8417088%2C10.1582912%2012.1582912%2C10.1582912%2012.3535534%2C10.3535534%20L15.1464466%2C13.1464466%20C15.2402148%2C13.2402148%2015.2928932%2C13.3673918%2015.2928932%2C13.5%20C15.2928932%2C13.7761424%2015.0690356%2C14%2014.7928932%2C14%20L9.20710678%2C14%20Z%22%20transform%3D%22rotate(90%2012%2012)%22%2F%3E%0A%3C%2Fsvg%3E%0A');
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
}
.rw24_prev {
left: 0;
}
.rw24_next {
right: 0;
}
.r24_dots {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
}
.r24_dot {
width: 10px;
height: 10px;
background-color: white;
border-radius: 50%;
margin: 5px;
cursor: pointer;
}
.r24_dot_active {
background-color: #ec622c;
}
@media only screen and (min-width: 1200px) {
.rw24_modal {
width: 1200px;
height: 600px;
}
}
@media only screen and (max-width: 1200px) {
.rw24_modal {
width: 900px;
height: 450px;
}
}
@media only screen and (max-width: 900px) {
.rw24_modal {
width: calc(100% - 110px);
height: calc(100% - 110px);
grid-template-columns: 1fr 1fr;
}
.rs24_content > h2{
font-size: 24px;
}
.rs24_content > *{
font-size: 15px;
padding: 0px;
}
}
@media only screen and (max-width: 600px) {
.rw24_modal {
width: calc(100vw - 8px);
height: calc(100vh - 80px);
grid-template-columns: 1fr;
grid-template-rows: 250px 1fr;
overflow: scroll;
}
}
.rs24_close {
width: 38px;
height: 38px;
background-image: url('data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2052.3%20(67297)%20-%20http%3A%2F%2Fwww.bohemiancoding.com%2Fsketch%20--%3E%0A%20%20%20%20%3Ctitle%3Ejollycons-%5Bcategory%5D%2Ficons%2Fsvg%2Ficon-ui-1-close%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22icons%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icons---export%22%20transform%3D%22translate(-124.000000%2C%20-58.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22row-1%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%20fill%3D%22%23000000%22%20fill-rule%3D%22nonzero%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22icon---2%22%20transform%3D%22translate(64.000000%2C%200.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M12%2C13.4142136%20L4.70710678%2C20.7071068%20C4.31658249%2C21.0976311%203.68341751%2C21.0976311%203.29289322%2C20.7071068%20C2.90236893%2C20.3165825%202.90236893%2C19.6834175%203.29289322%2C19.2928932%20L10.5857864%2C12%20L3.29289322%2C4.70710678%20C2.90236893%2C4.31658249%202.90236893%2C3.68341751%203.29289322%2C3.29289322%20C3.68341751%2C2.90236893%204.31658249%2C2.90236893%204.70710678%2C3.29289322%20L12%2C10.5857864%20L19.2928932%2C3.29289322%20C19.6834175%2C2.90236893%2020.3165825%2C2.90236893%2020.7071068%2C3.29289322%20C21.0976311%2C3.68341751%2021.0976311%2C4.31658249%2020.7071068%2C4.70710678%20L13.4142136%2C12%20L20.7071068%2C19.2928932%20C21.0976311%2C19.6834175%2021.0976311%2C20.3165825%2020.7071068%2C20.7071068%20C20.3165825%2C21.0976311%2019.6834175%2C21.0976311%2019.2928932%2C20.7071068%20L12%2C13.4142136%20Z%22%20id%3D%22close%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22slices%22%20transform%3D%22translate(60.000000%2C%2058.000000)%22%3E%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E');
background-size: 30px;
position: absolute;
left: 10px;
background-size: 23px;
background-position: center;
top: 10px;
background-color: #f72e2e;
background-repeat: no-repeat;
border-radius: 30px;
} .ruw24c_carroussel {
width: 100%;
max-width: 100%;
}
.ruw24c_carroussel_card {
padding: 15px;
position: relative;
cursor: pointer;
}
.ruw24c_carroussel_card_inner {
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
padding-top: 100%;
position: relative;
border-radius: 2px;
overflow: hidden;
transition: transform 0.3s ease;
}
.ruw24c_carroussel_card:hover .ruw24c_carroussel_card_inner {
transform: scale(1.05);
}
.ruw24c_carroussel_card_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: color-mix(in srgb, var(--overlay-color, #000000) 90%, transparent);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 2;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
}
.ruw24c_carroussel_card:hover .ruw24c_carroussel_card_overlay {
opacity: 1;
}
.ruw24c_carroussel_card_title {
color: white;
font-size: clamp(1.5rem, 1.169rem + 1.395vw, 2.25rem); font-weight: 900;
text-align: center;
padding: 20px;
line-height: 1.2;
}
.card_blur {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
filter: blur(20px);
z-index: -1;
opacity: 0.3;
}
.et_pb_row.ruw24c_fullWithSection {
width: 100vw;
margin: 0;
}
.et_pb_column.ruw24c_fullWithColumn {
width: 100%;
width: 100vw;
}
.et_pb_row.ruw24c_fullWithSection,
.et_pb_column.ruw24c_fullWithColumn,
.et_pb_module.et_pb_code,
.et_pb_code_inner,
.ruw24c_carroussel.slick-initialized.slick-slider,
.slick-list.draggable {
overflow: visible;
}
.ruw24c_carroussel_prev,
.ruw24c_carroussel_next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: rgba(0,0,0,.5);
cursor: pointer;
z-index: 100;
right: 0px;
}
.ruw24c_carroussel_prev {
left: 0;
right: unset;
}:root{
--beeld: #FEE9C0;
--socials: #abd3ed;
--websites: #b9dedb;
--events: #ffd5d1;
--branding: #beccf3;
--strategie: #FDD3AF;
--beeld-300: #FEE9C0;
--beeld-700: #F0AE00;
--socials-300: #ABD3ED;
--socials-700: #006FBB;
--websites-300: #BADEDC;
--websites-700: #008F8B;
--events-300: #FAD2D0;
--events-700: #E73957;
--branding-300: #ABD3EC;
--branding-700: #046FB5;
--strategie-300: #FDD3AF;
--strategie-700: #EE693A;
--menu-300: var(--socials-300);
--menu-700: var(--socials-700);
} .fs-800 {
font-size: clamp(1.75rem, 1.315rem + 2.174vi, 3rem); }
.fs-500 {
font-size: clamp(1.25rem, 1.076rem + 0.87vi, 1.75rem); }
.fs-300 {
font-size: clamp(1.125rem, 0.995rem + 0.652vi, 1.5rem); }
.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); transition-timing-function: cubic-bezier(1.000, -0.070, 0.000, 1.030); }
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; -moz-animation: fadein 1s forwards; -ms-animation: fadein 1s forwards; -o-animation: fadein 1s forwards; animation: fadein 1s forwards;
opacity: 0;
}
.rw_logo > .rw-logo_laag3{
background-image: url(//buroruw.nl/wp-content/uploads/2025/01/rwlogo_L3.svg);
transform: translateZ(15px);
}
.rw_logo > .rw-logo_laag2{
background-image: url(//buroruw.nl/wp-content/uploads/2025/01/rwlogo_L2.svg);
transform: translateZ(15px);
}
.rw_logo > .rw-logo_laag1 {
background-image: url(//buroruw.nl/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-strategie > h1:before{
background-color: var(--strategie);
}
.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; }
} @-moz-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
} @-webkit-keyframes fadein {
from { opacity: 0; }
to   { opacity: 1; }
} @-ms-keyframes fadein {
from { opacity: 0; }
to   { opacity: 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_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(//buroruw.nl/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); transition-timing-function: cubic-bezier(0.300, 0.885, 0.315, 0.925); }
.rw_closeBtn:active{
transform: scale(1.7,1.7);
transition: all 300ms cubic-bezier(0.300, 0.885, 0.315, 0.925); transition-timing-function: cubic-bezier(0.300, 0.885, 0.315, 0.925); }
.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(//buroruw.nl/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(//buroruw.nl/wp-content/uploads/2025/05/logo_buro_ruw_wit.svg);
opacity: 0.5;
}
@media only screen and (max-width: 1440px) {
.rw-menu_services{
width: 1000px;
left: calc(50% - 460px);
}
}
@media only screen and (max-width: 1200px) {
.rw-menu_services{
width: 700px;
left: calc(50% - 350px);
}
a.rw-menu_item > h2 {
font-size: 12px;
}
a.rw-menu_item > h1 {
font-size: 19px;
}
a.rw-menu_item > h1:before {
top: 17px;
height: 15px;
}
}
@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(//buroruw.nl/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;
} #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 > * { 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);
}
} #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%;
} #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) ;
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 {
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;
}:root{ --grey-800: #222222;
} .team-fader-container {
width: 100%;
border-radius: 4px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
position: relative;
}
.team-fader-grid {
display: grid;
grid-template-columns: 1fr 450px;
grid-template-rows: 1fr;
gap: 2rem;
align-items: center;
}
.team-fader-content {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 2rem;
}
.team-fader-functie {
font-size: 1.125rem;
font-weight: 900;
letter-spacing: 0.05em;
color: var(--grey-800);
font-weight: 900;
}
.team-fader-naam {
font-size: 2.25rem;
font-weight: 900;
line-height: 1.2;
margin: 0;
}
.team-fader-content-text {
font-size: 1.125rem;
line-height: 1.75;
color: var(--grey-800);
margin: 0;
font-weight: 300;
}
.team-fader-buttons {
display: flex;
flex-direction: row;
gap: 1rem;
margin-top: 1rem;
}
.team-fader-button {
line-height: 1.8em;
border-radius: 2px;
padding: 10px 20px;
}
.team-fader-button-primary {
font-weight: 900;
background-color: var(--beeld-700);
color: #FFFFFF;
}
.team-fader-button-secondary {
font-weight: 500;
background-color: #FFFFFF;
color: var(--grey-800);
}
.team-fader-image-wrapper {
height: 100%;
width: 100%;
border-radius: 4px;
}
.team-fader-image {
position: absolute;
right: 0;
bottom: 0;
height: 120%;
}
@media only screen and (max-width: 1300px) {
.team-fader-image {
height: 110%;
}
}
@media only screen and (max-width: 1100px) {
.team-fader-grid {
grid-template-columns: 1fr;
grid-template-rows: auto auto;
gap: 1rem;
}
.team-fader-content {
padding: 1.5rem;
}
.team-fader-image-wrapper {
height: 700px;
width: 100%;
display: flex;
justify-content: center;
}
.team-fader-image {
position: relative;
height: 100%;
width: 70%;
object-fit: cover;
object-position: center;
border-radius: 4px;
}
.team-fader-buttons {
flex-direction: column;
gap: 0.5rem;
}
.team-fader-button {
text-align: center;
}
}
@media only screen and (max-width: 980px) {
.team-fader-image {
width: 70%;
border-radius: 0px;
}
.team-fader-container {
border-radius: 0px;
}
}
@media only screen and (max-width: 750px) {
.team-fader-image-wrapper {
height: 800px;
}
.team-fader-image {
width: 100%;
}
}
@media only screen and (max-width: 480px) {
.team-fader-content {
padding: 1rem;
}
.team-fader-image-wrapper {
height: 500px;
}
}
.team-fader-dots-wrapper {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 20px;
}
.team-fader-dot {
width: 12px;
height: 12px;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.team-fader-dot:hover {
opacity: 0.8;
} input#nf-field-68, input#nf-field-69, input#nf-field-70, select#nf-field-71 {
padding-left: 50px;
background-repeat: no-repeat;
background-position: 16px 47%;
border: 1px solid #EEEEEE;
background-color: #EEEEEE;
}
input#nf-field-68 {
background-image: url(//buroruw.nl/wp-content/uploads/2025/09/form-naam-icon.png);
}
input#nf-field-69 {
background-image: url(//buroruw.nl/wp-content/uploads/2025/09/form-mail-icon.png);
}
input#nf-field-70 {
background-image: url(//buroruw.nl/wp-content/uploads/2025/09/form-telefoon-icon.png);
}
select#nf-field-71 {
background-image: url(//buroruw.nl/wp-content/uploads/2025/09/form-bier-icon.png);
} div#mep_0 > div > div > mediaelementwrapper > video {
height: 100% !important;
object-fit: cover;
}
div#mep_0 {
height: 100% !important;
}.rw_team_overzicht {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.rw_team_overzicht > .teamlid {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
}
.rw_graphic {
float: left;
box-sizing: border-box;
position:relative;
transform-style: preserve-3d;
}
.rs_portrait {
max-width: 220px;
height: 224px;
display: flex;
justify-content: center;
align-items: flex-end;
z-index: 999;
transform-style: preserve-3d;
transform: translateZ(0px) translateY(0px);
}
.rs_portrait > img{
z-index: 999;
}
.rw_bg {
position: absolute;
bottom: 0px;
width: 100%;
padding-top: 95%;
z-index: -1;
transform-style: preserve-3d;
transform: translateZ(-20px)
}
.rw_gradient {
position: absolute;
z-index: 0;
width: 100%;
height: 190px;
bottom: 0px;
z-index: 0;
background-image: radial-gradient(rgba(255,255,255,0.2) , rgba(255,255,255,0.0));
transform-style: preserve-3d;
transform: translateZ(-21px)
}
.teamlid{
margin-top: 40px !important;
}
.teamlid > * {
font-family: 'Montserrat', sans-serif;
float: left;
width: auto;
}
.teamlid > h3 {
font-weight: 700;
font-size: 18px;
margin-top: 15px;
padding-bottom: 3px;
}
.teamlid > h5 {
font-weight: 400;
font-size: 15px;
}
.teamlid > a {
font-weight: 700;
color: #ec622c;
}
@media only screen and (max-width: 1100px) {
.rw_team_overzicht {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media only screen and (max-width: 700px) {
.rw_team_overzicht {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
@media only screen and (max-width: 400px) {
.rw_team_overzicht {
display: grid;
grid-template-columns: 1fr;
}
}