.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;
}:root{
--beeld: #ffd3ae;
--socials: #abd3ed;
--websites: #b9dedb;
--events: #ffd5d1;
--branding: #beccf3;
}
.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(//v2.buroruw.nl/wp-content/uploads/2025/01/rwlogo_L3.svg);
transform: translateZ(15px);
}
.rw_logo > .rw-logo_laag2{
background-image: url(//v2.buroruw.nl/wp-content/uploads/2025/01/rwlogo_L2.svg);
transform: translateZ(15px);
}
.rw_logo > .rw-logo_laag1 {
background-image: url(//v2.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-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(//v2.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(//v2.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(//v2.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: 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(//v2.buroruw.nl/wp-content/uploads/2022/09/ruw-logo-all.svg)!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;
}:root{
--beeld-300: #FFD3AE;
--beeld-700: #EB622D;
--dienst-300: #FFD3AE;
--dienst-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;
--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(//v2.buroruw.nl/wp-content/uploads/2025/09/form-naam-icon.png);
}
input#nf-field-69 {
background-image: url(//v2.buroruw.nl/wp-content/uploads/2025/09/form-mail-icon.png);
}
input#nf-field-70 {
background-image: url(//v2.buroruw.nl/wp-content/uploads/2025/09/form-telefoon-icon.png);
}
select#nf-field-71 {
background-image: url(//v2.buroruw.nl/wp-content/uploads/2025/09/form-bier-icon.png);
}.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;
}
}