:root { --kleur-rood: #420119;
--kleur-donker-rood: #24000d;
--kleur-goud: #b77231;
--kleur-goud-hover: #d78f4c;
--kleur-tekst: #333;
--kleur-grijs: #eee;
--kleur-donker-grijs: #bbb;
--kleur-licht-back: #f7f0ea;
--primary-font: "Playfair Display", serif;
--secondary-font: "Raleway", sans-serif;
}
::selection {
background-color: rgba(0, 0, 0, 0);
} * {
font-family: var(--secondary-font);
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: var(--kleur-tekst);
}
.headerNavMenuMobile,
.tableSingleServiceMobiel,
.headerNavMobileSwitch {
display: none !important;
}
.customize-support header {
position: fixed;
left: 0;
top: 32px;
width: 100%;
}
body {
background-color: var(--kleur-licht-back);
}
header {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 99997;
transition: 0.3s;
}
main {
margin-top: 162px;
}
img {
vertical-align: middle;
max-width: 100%;
}
h1,
h2,
h3 {
font-family: var(--primary-font);
margin-bottom: 10px;
cursor: default;
}
h5 {
cursor: default;
}
.heroTitel h2 {
font-size: 3em;
text-transform: uppercase;
color: var(--kleur-goud) !important;
}
.hOpvallend {
font-size: 3.6em;
line-height: 1em;
color: var(--kleur-rood);
margin-bottom: 50px;
}
.hVersterkt {
font-size: 2em;
line-height: 1em;
color: var(--kleur-tekst);
margin-bottom: 20px;
}
a {
text-decoration: none;
font-weight: 700;
cursor: pointer !important;
}
p {
margin-bottom: 26px;
line-height: 1.8em;
cursor: default;
}
ul {
margin: 0 0 30px 30px;
}
li {
cursor: default;
line-height: 1.5em;
}
td {
cursor: default;
}
.tekstDik {
font-weight: 700;
color: var(--kleur-rood);
}
.fullWidthContainer {
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 50px 0;
}
.backgroundGrey {
background-color: #eee;
}
.normalContainer {
width: 100%;
max-width: 980px;
padding: 20px;
}
.backLight {
background-color: var(--kleur-licht-back);
} .dividerFull {
padding-bottom: 0;
}
.diamondContainer {
position: relative;
width: 70px;
height: 40px;
}
@keyframes animDiamond {
0% {
left: -55px;
}
40% {
left: 80px;
}
100% {
left: 80px;
}
}
.diamondDivider {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: auto;
}
.diamondGlare {
position: absolute;
top: -20px;
left: -55px;
height: 85px;
width: 30px;
background: rgb(247, 240, 234);
background: linear-gradient(90deg, rgba(247, 240, 234, 0) 0%, rgba(247, 240, 234, 0.7) 40%, rgba(247, 240, 234, 0.7) 60%, rgba(247, 240, 234, 0) 100%);
transform: rotate(40deg);
animation: animDiamond 8s 1s ease-out infinite;
} .flexColumn {
flex-direction: column;
justify-content: space-around;
}
.kolomContainer {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.kolom {
padding: 0 40px;
}
.kolom:first-child {
padding-left: 0;
}
.kolom:last-child {
padding-right: 0;
}
.kolom33 {
width: 33%;
}
.kolom35 {
width: 35%;
}
.kolom45 {
width: 45%;
}
.kolom50 {
width: 50%;
}
.kolom55 {
width: 55%;
}
.kolom65 {
width: 65%;
}
.buttonGoud {
display: block;
background-color: var(--kleur-goud);
color: #fff;
padding: 10px 20px;
min-width: 160px;
max-width: 220px;
text-align: center;
font-weight: 400;
font-size: 1.2em;
border-radius: 3px;
margin: 40px 0;
border: 0 !important;
transition: 0.3s;
}
.buttonGoud:hover {
background-color: var(--kleur-goud-hover);
transition: 0.3s;
}
.buttonRood {
display: block;
background-color: var(--kleur-rood);
color: #fff;
transition: 0.3s;
padding: 10px 20px;
min-width: 160px;
max-width: 220px;
text-align: center;
font-weight: 400;
font-size: 1.2em;
margin: 40px 0;
}
.headingContainer {
justify-content: space-around;
}
.headingContainer .hOpvallend {
margin-bottom: 0;
}
.textCenter p,
.textCenter h1,
.textCenter h2 {
text-align: center;
}
.buttonCenter {
margin: 20px auto;
}
.fotoCenter {
display: block;
margin: 0 auto 20px auto;
}
.paddingTop50 {
padding-top: 50px !important;
}
.paddingBottom50 {
padding-bottom: 50px !important;
}
.noPadding {
padding: 0 !important;
}
.noTopPadding {
padding-top: 0 !important;
} .topInfoFullWidth {
background-color: var(--kleur-goud);
height: 32px;
padding: 0;
}
.topInfoContainer {
display: flex;
justify-content: space-between;
max-width: 1800px;
padding: 5px 20px;
}
.topInfoContactContainer {
padding-top: 2px;
min-width: 420px;
}
.topInfoContainer a,
.topInfoFullWidth p {
color: #fff;
font-size: 0.9em;
margin-bottom: 0;
transition: 0.3s;
font-weight: 400;
}
.topInfoPhone::before {
content: "";
background-image: url(https://www.khloe-consultancy.com/wp-content/themes/Khloe-Consultancy-Theme/img/phone.svg);
background-position: center left;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 1px;
width: 12px;
height: 15px;
}
.topInfoPhone {
padding-left: 20px;
position: relative;
margin-right: 40px;
transition: 0.3s;
}
.topInfoPhone:hover {
color: var(--kleur-donker-rood);
transition: 0.3s;
}
.topInfoMail::before {
content: "";
background-image: url(https://www.khloe-consultancy.com/wp-content/themes/Khloe-Consultancy-Theme/img/mail.svg);
background-position: center left;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 2px;
width: 18px;
height: 12px;
}
.topInfoMail {
padding-left: 26px;
position: relative;
transition: 0.3s;
}
.topInfoMail:hover {
color: var(--kleur-donker-rood);
transition: 0.3s;
}
.topInfoClose {
top: -32px;
transition: 0.3s;
} .navFullWidth {
background-color: var(--kleur-donker-rood);
box-shadow: 0px 2px 15px -5px #333;
padding: 0;
}
.navFullWidth h2 {
color: var(--kleur-grijs);
transition: 0.3s;
}
.logoContainer,
.headerContainer {
display: flex;
justify-content: space-between;
max-width: 1800px;
position: relative;
}
.logoContainer img {
width: 120px;
height: auto;
margin-right: 20px;
}
.headerNavMenuDesktop {
display: flex !important;
align-items: center;
}
.headerNavMenuDesktop .menu-hoofdmenu-container .menu {
display: flex;
list-style-type: none;
margin: 10px 0 0 0 !important;
}
.headerNavMenuDesktop .menu-hoofdmenu-container .menu li {
padding: 0 20px;
}
.headerNavMenuDesktop .menu-hoofdmenu-container .menu li a {
color: var(--kleur-grijs);
padding-bottom: 33px;
transition: 0.3s;
font-weight: 400;
}
.headerNavMenuDesktop .menu-hoofdmenu-container .menu li a:hover {
color: var(--kleur-goud);
transition: 0.3s;
}
.headerNavMenuDesktop .menu-item {
position: relative;
}
.headerNavMenuDesktop .menu-hoofdmenu-container .sub-menu {
position: absolute;
top: 50px;
left: 0;
list-style-type: none;
z-index: 999;
opacity: 0;
pointer-events: none;
margin: 0 !important;
transition: 0.3s;
}
.headerNavMenuDesktop .menu-item:hover > .sub-menu {
opacity: 1;
pointer-events: auto;
transition: 0.3;
}
.headerNavMenuDesktop .sub-menu li a {
background-color: rgba(36, 0, 13, 0.8);
color: var(--kleur-grijs);
transition: 0.3s;
display: block;
width: 200px;
padding: 10px 20px !important;
}
.headerNavMenuDesktop #menu-item-208 a {
background-color: var(--kleur-goud);
padding: 10px 20px;
border-radius: 3px;
transition: 0.3s;
}
.headerNavMenuDesktop #menu-item-208 a:hover {
background-color: var(--kleur-goud-hover);
color: #fff;
transition: 0.3s;
} .heroHeaderContainer {
min-height: 450px;
background-color: #ccc;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
.heroHeaderContainer {
align-items: flex-end;
padding-bottom: 100px;
}
.heroHeaderContainer .normalContainer h1 {
color: #fff;
font-size: 3em;
}
.heroNameContainer {
position: absolute;
bottom: 0;
width: 100%;
background-color: var(--kleur-donker-rood);
display: flex;
justify-content: center;
padding: 10px 0;
}
.heroName1 {
color: var(--kleur-grijs);
font-size: 1.2em;
}
.heroName2 {
color: #555;
font-size: 1.2em;
}
.heroNameContainer p {
color: var(--kleur-grijs);
margin: 0 10px;
} .pagePayOffFull {
padding: 0;
}
.pagePayOffFull .normalContainer {
padding: 0 20px;
}
.pagePayOffFull h1,
.pagePayOffFull h2 {
text-align: center;
color: var(--kleur-goud);
font-size: 3em;
} .homeTitelFull {
text-align: center;
}
.homeTitelFull h1 {
display: inline;
color: var(--kleur-rood);
text-shadow: 0 2px 7px #aaa;
font-size: 2.6em;
}
.titelHeaderGrijs {
display: inline;
color: var(--kleur-donker-grijs);
text-shadow: 0 2px 7px #ccc;
font-size: 2em;
}
.homeTitelFull span {
color: var(--kleur-tekst);
font-size: 1.6em;
margin: 0 10px;
}
.homeButtonContainer {
margin: 40px auto 0 auto;
width: 360px;
display: flex;
justify-content: space-between;
}
.homeButtonContainer a {
background-color: var(--kleur-goud);
color: #fff;
font-weight: 400;
transition: 0.3s;
padding: 10px 20px;
width: 160px;
border-radius: 3px;
text-align: center;
font-size: 1.2em;
}
.homeButtonContainer a:hover {
background-color: var(--kleur-goud-hover);
transition: 0.3s;
} .homeCompSliderFull {
min-height: 450px;
background-color: #ccc;
position: relative;
}
.homeSliderContainer {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background-color: var(--kleur-grijs);
display: flex;
overflow: hidden;
}
.homeSliderContainer a {
width: 100%;
}
.homeSlide {
width: 100%;
height: 450px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
transition: 0.3s;
}
.homeSlide:hover {
filter: brightness(110%);
transition: 0.3s;
} .homeReviewSliderFull {
min-height: 150px;
background-color: var(--kleur-donker-rood);
} .homeOpsomming {
list-style-type: none;
padding-left: 5px;
}
.homeOpsomming li {
line-height: 2em;
color: var(--kleur-donker-rood);
} .companionContainerFull {
background-color: var(--kleur-donker-rood);
margin-top: 50px;
}
.companionContainer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.companionBlock {
width: 100%;
max-width: 270px;
height: auto;
text-align: center;
margin: 10px;
}
.companionBlockImageContainer {
position: relative;
overflow: hidden;
}
.companionInternationaalBanner {
position: absolute;
width: 300px;
bottom: 62px;
left: -62px;
padding: 10px 20px;
transform: rotate(45deg);
background-color: var(--kleur-goud);
display: flex;
justify-content: space-around;
align-items: center;
}
.companionInternationaalBanner p {
color: #fff;
margin: 0;
}
.companionBlockInfo {
position: absolute;
bottom: -100%;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(183, 114, 49, 0.8);
display: block;
justify-content: space-around;
align-items: center;
transition: 0.3s;
}
.companionBlockInfo h2 {
font-size: 2em;
cursor: pointer !important;
}
.companionBlockInfo table {
margin: 30px auto;
}
.companionBlockInfo table tr td:first-child {
width: 100px;
}
.companionBlockInfo table tr td {
padding: 10px 0;
text-align: left;
color: #fff;
font-weight: 400;
cursor: pointer !important;
}
.companionBlockImageContainer:hover > .companionBlockInfo {
bottom: 0;
transition: 0.3s;
}
.companionBlockNaam {
margin-top: 20px;
color: #fff;
}
.companionBlockLeeftijd {
color: #fff;
}  .singleCompanionHeroFull {
height: 600px;
background-color: var(--kleur-donker-rood);
}
.singleCompanionHeroLeft,
.singleCompanionHeroRight {
width: 50%;
}
.singleCompanionHeroLeft {
height: 600px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.singleCompanionHeroRight {
display: flex;
justify-content: space-around;
align-items: center;
}
.singleInfoHeader {
color: var(--kleur-goud);
font-family: var(--primary-font);
font-size: 2em;
margin-bottom: 0;
}
.singleInfoNaam {
color: #fff;
font-size: 3em;
}
.singleInfoLeeftijd {
color: var(--kleur-grijs);
}
.singleInfoTable td {
min-width: 100px;
color: var(--kleur-grijs);
} .homeReviewSliderFull {
text-align: center;
}
.singleCompanionReviewFull {
background-color: var(--kleur-goud);
text-align: center;
}
.homeReviewSliderFull .normalContainer,
.singleCompanionReviewFull .normalContainer {
padding: 0 20px;
}
.ervaringSliderContainer h3 {
color: #fff;
font-size: 1.2em;
}
.ervaringSliderContainer p {
color: #fff;
margin-bottom: 0;
}
.ervaringSliderContainer span {
color: #fff;
font-size: 0.6em;
font-weight: 400;
text-transform: uppercase;
}
.ervaringSliderContainer {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.ervaringSlide {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100px;
position: absolute;
top: 100px;
pointer-events: none;
opacity: 0;
transition: 0.6s;
}
.ervaringSlideOpen {
opacity: 1;
top: 0;
transition: 0.3s;
} .singleCompanionOmschrijvingFull p {
text-align: center;
}
.singleCompanionOmschrijvingFull a {
margin: 0 auto;
}
.singleOmschrijvingLetter {
font-size: 4em;
font-family: var(--primary-font);
color: var(--kleur-goud);
}
.singleOmschrijvingButtonsContainer {
display: block;
margin: 0 auto;
text-align: center;
}
.singleOmschrijvingButtonsContainer .buttonGoud {
margin: 0 20px;
line-height: 1em;
display: inline-block;
width: 220px;
} .singleOmschrijvingVragenContainer {
position: relative;
overflow: hidden;
transition: 0.3s;
}
.singleOmschrijvingVragenContainerOpen {
padding: 75px 0;
display: block;
}
.singleOmschrijvingVragenSlider {
padding: 40px 85px;
position: relative;
}
.vragenSlide {
position: absolute;
padding: 0 85px;
top: 80px;
left: 0;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.vragenSlideOpen {
top: 40px;
opacity: 1;
pointer-events: auto;
transition: 0.3s;
}
.vragenSlide h2 {
text-align: center;
}
.vragenSlide p {
margin-bottom: 0;
}
.vragenArrowLeft {
position: absolute;
top: calc(50% - 26px);
left: 0;
padding: 20px 30px;
transform: scale(0.6);
background-color: rgba(0, 0, 0, 0.3);
transition: 0.3s;
}
.vragenArrowLeft:hover {
cursor: pointer;
transform: scale(0.7);
transition: 0.3s;
}
.vragenArrowRight {
position: absolute;
top: calc(50% - 26px);
right: 0;
padding: 20px 30px;
transform: scale(0.6);
background-color: rgba(0, 0, 0, 0.3);
transition: 0.3s;
}
.vragenArrowRight:hover {
cursor: pointer;
transform: scale(0.7);
transition: 0.3s;
} .singleCompanionSliderFull {
height: 600px;
background-color: var(--kleur-donker-rood);
}
.singleSliderContainerFront {
width: 100%;
height: 450px;
position: relative;
padding: 0;
margin: 0 20px;
overflow: hidden;
}
.singleSliderContainerInhoud {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
transition: 0.5s ease-out;
}
.singleArrowLeft {
position: absolute;
top: 45%;
left: 0;
padding: 20px 30px;
transform: scale(0.6);
background-color: rgba(0, 0, 0, 0.3);
transition: 0.3s;
}
.singleArrowLeft:hover {
cursor: pointer;
transform: scale(0.7);
transition: 0.3s;
}
.singleArrowRight {
position: absolute;
top: 45%;
right: 0;
padding: 20px 30px;
transform: scale(0.6);
background-color: rgba(0, 0, 0, 0.3);
transition: 0.3s;
}
.singleArrowRight:hover {
cursor: pointer;
transform: scale(0.7);
transition: 0.3s;
}
.arrowDisabled {
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.sliderFoto:first-child {
margin-left: 0;
}
.sliderFoto {
display: flex;
margin: 0 20px;
align-self: center;
max-width: 100%;
height: 450px;
transition: 0.3s;
}
.sliderFoto:last-child {
margin-right: 0;
} .singleCompanionVragenFull {
background-color: var(--kleur-goud);
}
.gridCompanionContainer {
width: 100%;
margin-right: 20px;
height: auto;
display: grid;
grid-template-columns: 45% 55%;
grid-template-rows: auto auto;
grid-gap: 20px;
grid-template-areas:
"vragenlijstGrid serviceLijstGrid"
"vragenlijstGrid tarievenLijstGrid"
"ratingGrid ratingGrid"
"beschikbaarGrid beschikbaarGrid";
}
.singleBeschikbaarheidContainer,
.singleRatingContainer,
.singleServiceContainer,
.singleTarievenContainer,
.singleVragenContainer {
background-color: var(--kleur-licht-back);
padding: 20px;
position: relative;
}
.singleVragenContainer {
grid-area: vragenlijstGrid;
}
.singleServiceContainer {
grid-area: serviceLijstGrid;
}
.singleTarievenContainer {
grid-area: tarievenLijstGrid;
}
.singleRatingContainer {
grid-area: ratingGrid;
}
.singleBeschikbaarheidContainer {
grid-area: beschikbaarGrid;
}
.singleBeschikbaarheidDezeWeek {
margin-bottom: 40px;
}
.vragenLijstNaam {
color: var(--kleur-donker-rood);
font-size: 2.6em;
line-height: 1.5em;
font-family: var(--primary-font);
display: block;
border-bottom: 1px solid var(--kleur-donker-rood);
margin-bottom: 10px;
}
.tableSingleVragenlijst {
width: 100%;
}
.tableSingleVragenlijst tr td {
padding: 5px 0;
font-size: 0.9em;
}
.tableSingleVragenlijst tr td:first-child {
width: 120px;
}
.singleServiceContainer h2 {
color: var(--kleur-donker-rood);
font-size: 2.6em;
line-height: 1.5em;
font-family: var(--primary-font);
display: block;
border-bottom: 1px solid var(--kleur-donker-rood);
margin-bottom: 10px;
}
.tableSingleService {
width: 100%;
}
.tableSingleService tr td {
padding: 5px 0;
font-size: 0.9em;
width: 50%;
}
.imageServiceDiamond {
width: 20px;
height: 20px;
margin-right: 4px;
}
.serviceLegenda {
position: absolute;
top: 13px;
right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.serviceContainer {
display: flex;
flex-direction: row;
margin-bottom: 3px;
}
.serviceContainer img {
width: 20px;
height: 20px;
margin-right: 10px;
}
.serviceContainer p {
font-size: 10px;
margin-bottom: 0;
} .singleTarievenContainer h2 {
color: var(--kleur-donker-rood);
font-size: 2.6em;
line-height: 1.5em;
font-family: var(--primary-font);
display: block;
border-bottom: 1px solid var(--kleur-donker-rood);
margin-bottom: 10px;
}
.tarievenVerzamelContainer {
display: flex;
}
.tarievenKolom {
width: 50%;
}
.tarievenContainer {
margin-bottom: 20px;
}
.tarievenContainer p {
font-size: 0.9em;
font-weight: 700;
margin-bottom: 0;
}
.tarievenContainer table td:first-child {
width: 150px;
}
.tarievenContainer table td {
font-size: 0.9em;
}
.singleTarievenBoekContainer {
display: flex;
margin-bottom: 10px;
}
.tarievenSterTekst {
font-size: 0.8em;
}
.tarievenSter {
font-family: var(--primary-font);
}
.singleTarievenBoekContainer a {
display: block;
width: 50%;
text-align: center;
background-color: var(--kleur-donker-rood);
color: #fff;
padding: 10px;
font-weight: 400;
}
.singleTarievenBoekContainer a:first-child {
background-color: var(--kleur-rood);
}  .singleRatingContainer table {
width: 100%;
}
.singleRatingContainer table img {
width: 20px;
height: 20px;
display: block;
margin: 0 auto;
}
.singleRatingContainer table th {
text-align: center;
}
.singleRatingContainer table tr {
border: 1px solid #ccc;
} .ratingBarBaseContainer {
width: 100%;
height: 30px;
position: relative;
background-color: var(--kleur-licht-back);
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
}
.ratingBar {
position: absolute;
left: 0;
top: 0;
height: 30px;
border-radius: 5px;
background-color: var(--kleur-donker-rood);
transition: 0.5s;
}
.ratingDiamond {
position: absolute;
left: 10px;
top: 5px;
width: 20px;
height: 20px;
}
.ratingTitle {
position: absolute;
font-weight: 700;
font-size: 1em;
color: #fff;
top: 2px;
left: 40px;
margin: 0;
}
.rating20 {
width: 20%;
}
.rating40 {
width: 40%;
}
.rating60 {
width: 60%;
}
.rating80 {
width: 80%;
}
.rating100 {
width: 100%;
} .quoteContainer {
max-width: 800px;
}
.quoteContainer p {
font-family: var(--primary-font);
font-size: 2.5em;
color: var(--kleur-donker-rood);
text-align: center;
} .paginaServiceContainer h2 {
font-size: 2em;
color: var(--kleur-donker-rood);
}
.serviceDividerFull {
min-height: 300px;
background-color: var(--kleur-grijs);
}
.serviceDividerContainer {
display: flex;
justify-content: space-around;
align-items: center;
margin: 40px 0;
}
.serviceDivider {
width: 60%;
height: 1px;
background-color: var(--kleur-rood);
}
.naamServiceLijstIntro {
margin-bottom: 5px;
}
.naamServiceLijst {
margin-left: 124px;
}
.pageSEOBlok h2 {
text-align: center;
color: var(--kleur-goud);
font-size: 3em;
} .prijzenSectieFull {
background-color: var(--kleur-donker-rood);
}
.prijzenContainer {
max-width: 600px;
background-color: var(--kleur-licht-back);
}
.prijzenContainer h2 {
color: var(--kleur-donker-rood);
font-size: 2.6em;
line-height: 1.5em;
font-family: var(--primary-font);
display: block;
border-bottom: 1px solid var(--kleur-donker-rood);
margin-bottom: 26px;
}
.backgroundBetaalwijze {
background-size: auto;
background-position: -30% center;
background-repeat: no-repeat;
}
.backgroundGreyOpacity {
background-color: rgba(247, 240, 234, 0.9);
}
.betaalWijzeKop {
font-weight: 700;
margin-bottom: 0;
}
.travelZoneFull {
background-color: var(--kleur-donker-rood);
}
.travelZoneFull strong,
.travelZoneFull p {
color: var(--kleur-grijs);
}
.travelZoneFull h2 {
color: var(--kleur-grijs);
font-size: 2.6em;
line-height: 1.5em;
font-family: var(--primary-font);
display: block;
border-bottom: 1px solid var(--kleur-grijs);
margin-bottom: 26px;
} .boekenTelefoonnummer {
font-size: 2.2em;
line-height: 1.5em;
color: var(--kleur-goud);
text-align: center;
}
.boekNuContainer {
max-width: 800px;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.boekNuContainer h2 {
color: var(--kleur-donker-rood);
font-size: 2.6em;
line-height: 1.5em;
font-family: var(--primary-font);
border-bottom: 1px solid var(--kleur-donker-rood);
text-align: center;
margin-bottom: 26px;
}
.caldera-grid .row {
margin: 0 !important;
}
.fullWidthBackroundLeft {
background-position: left center;
background-size: contain;
background-repeat: no-repeat;
padding: 0;
}
.fullWidthBackroundLeft .normalContainer {
padding: 0;
}
.fullWidthBackroundLeft .normalContainer .kolom65 {
padding: 50px 20px;
background-color: rgba(247, 240, 234, 0.8);
}
.buttonDisabled {
pointer-events: none;
background-color: #bbb;
} .overOnsIntroTekst {
margin-left: 100px;
}
.overOnsFoto {
float: left;
margin: 10px 20px 20px 0;
} .clientLevelsContainerFull {
padding: 0;
}
.clientLevelsContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.clientContainer {
position: relative;
min-height: 300px;
background-image: url(https://www.khloe-consultancy.com/wp-content/themes/Khloe-Consultancy-Theme/img/clientBack2.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
width: 19% !important;
overflow: hidden;
transition: 0.3s;
}
.clientContainer .clientBackGround {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: brightness(90%);
}
.bronzeOverlay,
.clientBronze .clientBackGround {
background: rgb(205, 127, 50);
background: linear-gradient(180deg, rgba(205, 127, 50, 0.8) 0%, rgba(135, 79, 25, 0.8) 40%, rgba(119, 68, 19, 0.8) 100%);
}
.silverOverlay,
.clientSilver .clientBackGround {
background: rgb(218, 218, 218);
background: linear-gradient(180deg, rgba(218, 218, 218, 0.8) 0%, rgba(164, 164, 164, 0.8) 40%, rgba(164, 164, 164, 0.8) 100%);
}
.goldOverlay,
.clientGold .clientBackGround {
background: rgb(255, 215, 0);
background: linear-gradient(180deg, rgba(255, 215, 0, 0.8) 0%, rgba(215, 184, 14, 0.8) 40%, rgba(215, 184, 14, 0.8) 100%);
}
.platinumOverlay,
.clientPlatinum .clientBackGround {
background: rgb(164, 161, 162);
background: linear-gradient(180deg, rgba(164, 161, 162, 0.8) 0%, rgba(102, 94, 97, 0.8) 40%, rgba(102, 94, 97, 0.8) 100%);
}
.diamondOverlay,
.clientDiamond .clientBackGround {
background: rgb(186, 236, 252);
background: linear-gradient(180deg, rgba(186, 236, 252, 0.8) 0%, rgba(103, 201, 219, 0.8) 40%, rgba(103, 201, 219, 0.8) 100%);
}
.clientInhoud {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 440px;
z-index: 999;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
transition: 0.3s;
}
.clientImageContainer {
padding-top: 50px;
}
.clientImageContainer img {
width: 120px;
height: 80px;
}
.clientTextContainer p {
text-align: center;
margin-bottom: 0;
color: #fff;
}
.clientHeaderUp {
text-align: center;
text-transform: uppercase;
font-size: 0.8em;
}
.clientHeaderMetal {
font-family: var(--primary-font);
font-size: 1.7em;
line-height: 0.6em;
margin-bottom: 5px !important;
transition: 0.3s;
}
.clientContainer:hover {
cursor: pointer;
transition: 0.3s;
}
.clientContainer:hover > .clientInhoud {
top: -150px;
transform: 0.3s;
}
.clientHidden {
margin: 20px;
padding-top: 10px;
border-top: 1px solid #fff;
}
.clientHidden p {
color: #fff;
margin-bottom: 0;
text-align: center;
}
.clientReadMore {
display: block;
background-color: rgba(255, 255, 255, 0.3);
color: #fff;
padding: 5px 10px;
text-align: center;
margin: 10px auto;
font-weight: 400;
text-transform: uppercase;
font-size: 12px;
width: 85px;
transition: 0.3s;
}
.clientReadMore:hover {
background-color: rgba(255, 255, 255, 0.6);
transition: 0.3s;
}
.clientUitlegBadgeContainer {
position: relative;
min-height: 300px;
background-image: url(https://www.khloe-consultancy.com/wp-content/themes/Khloe-Consultancy-Theme/img/clientBack2.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
margin-bottom: 20px;
box-shadow: 0px 2px 50px -20px #999;
overflow: hidden;
}
.clientUitlegBadgeColorOverlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
filter: brightness(90%);
}
.clientUitlegBadgeInhoudContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
}
.clientUitlegBadgeInhoudContainer img {
width: 160px;
height: auto;
margin-bottom: 20px;
}
.clientBadgeUp {
text-align: center;
text-transform: uppercase;
font-size: 0.8em;
}
.clientBadgeMetal {
font-family: var(--primary-font);
font-size: 2.7em;
line-height: 0.8em;
margin-bottom: 5px !important;
transition: 0.3s;
}
.clientBadgeGlareContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.clientBadgeGlare1 {
position: absolute;
width: 200px;
height: 600px;
transform: rotate(20deg);
background: rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
left: -280px;
top: -100px;
}
@keyframes animClientLevelGlare {
0% {
left: -280px;
}
100% {
left: 600px;
}
}
.bronzeBadgeGlare {
animation: animClientLevelGlare 4s 5s infinite;
}
.silverBadgeGlare {
animation: animClientLevelGlare 3s 7s infinite;
}
.goldBadgeGlare {
animation: animClientLevelGlare 5s 3s infinite;
}
.platinumBadgeGlare {
animation: animClientLevelGlare 4s 7s infinite;
}
.diamondBadgeGlare {
animation: animClientLevelGlare 3s 8s infinite;
} .clientUitlegBadgeContainer p {
text-align: center;
margin-bottom: 0;
color: #fff;
} .clientGlareContainer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.clientGlare1 {
position: absolute;
width: 200px;
height: 600px;
transform: rotate(20deg);
background: rgb(255, 255, 255);
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
left: -180px;
top: -100px;
}
.clientContainer:hover > .clientGlareContainer .clientGlare1 {
left: 250px;
transition: ease-in 0.9s;
}
.clientUitlegContainer ul li {
text-transform: uppercase;
font-size: 0.8em;
line-height: 2em;
} .contactFull {
background-color: var(--kleur-donker-rood);
flex-direction: column;
margin-top: 50px;
}
.contactFull p {
color: var(--kleur-grijs);
}
.contactIntroFull {
padding-bottom: 0;
}
.contactIntroFull p {
margin-bottom: 0;
}
.contactTelefoon {
font-size: 2.5em;
color: var(--kleur-goud);
text-align: center;
}
.contactTelefoonOnderschrift {
text-align: center;
font-size: 0.9em;
margin-bottom: 50px;
}
.contactInfo h3 {
font-size: 1.5em;
} .werkenBijOnsFull {
display: flex;
min-height: 400px;
padding: 0;
}
.werkenFeatureKolom {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 120px 40px 0 40px;
min-height: 400px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.werkenFeatureOverlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
padding: 120px 40px 0 40px;
text-align: center;
}
.werkenFeatureKolom h2 {
color: var(--kleur-grijs);
}
.werkenFeatureKolom p {
color: var(--kleur-grijs);
text-align: center;
}
.featureDiamond {
width: 100px;
height: 50px;
}
.werkenWebshopKortingFull {
min-height: 400px;
padding: 0;
}
.werkenWebshopKortingFull .kolom {
min-height: 400px;
}
.werkenWebshopKortingFull .kolom35 {
display: flex;
justify-content: space-around;
background-color: var(--kleur-licht-back);
align-items: center;
}
.werkenKortingInhoudContainer {
max-width: 360px;
padding: 20px;
}
.werkenWebshopKortingFull .kolom65 {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.werkenWieFull {
background-color: var(--kleur-donker-rood);
}
.werkenWieFull h2,
.werkenWieFull p,
.werkenWieFull em {
color: var(--kleur-grijs);
}
.solliciteerFullContainer {
padding: 0;
background-color: var(--kleur-donker-rood);
}
.solliciteerFullContainer h2 {
text-align: center;
color: var(--kleur-grijs);
font-size: 3em;
}
.solliciteerFullContainer h3 {
text-align: center;
color: var(--kleur-grijs);
font-size: 2em;
}
.solliciteerFullContainer a,
.solliciteerFullContainer li,
.solliciteerFullContainer p {
color: var(--kleur-grijs);
}
.caldera-grid .form-control {
border-radius: 4px !important;
}
.buttonSolicitatie {
display: block;
background-color: var(--kleur-goud);
color: #fff;
padding: 8px 20px 7px 20px;
width: 100%;
text-align: center;
font-weight: 400;
font-size: 1.2em;
border-radius: 3px;
margin: 40px 0;
border: 0;
transition: 0.3s;
}
.buttonSolicitatie:hover {
background-color: var(--kleur-goud-hover);
transition: 0.3s;
}  .fullWidthLogin {
background-color: var(--kleur-donker-rood);
width: 100%;
height: 100%;
min-height: 100vh;
}
.loginContainer {
width: 100%;
max-width: 600px;
background-color: #701335;
min-height: 400px;
display: flex;
border-radius: 5px;
box-shadow: 0px 13px 100px -80px #000;
margin: 20px;
overflow: hidden;
}
.loginInhoud,
.loginBack {
width: 50%;
}
.loginInhoud {
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.loginBack {
background-image: url(https://www.khloe-consultancy.com/wp-content/themes/Khloe-Consultancy-Theme/img/loginBack.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.loginInhoud form p:first-child {
display: none;
}
.loginInhoud form input[type="password"] {
background-color: rgba(255, 255, 255, 0.6);
border: 0;
border-radius: 10px;
font-size: 1.5em;
padding: 10px;
max-width: 200px;
}
.loginInhoud form input[type="submit"] {
background-color: var(--kleur-goud);
border: 0;
padding: 5px 20px;
display: block;
margin: 20px auto;
color: #fff;
text-transform: uppercase;
text-align: center;
font-weight: 400;
font-size: 1.2em;
border-radius: 3px;
transition: 0.3s;
}
.loginInhoud form input[type="submit"]:hover {
background-color: var(--kleur-goud-hover);
cursor: pointer;
transition: 0.3s;
}
.loginInhoud img {
display: block;
width: 50px;
height: 50px;
margin-bottom: 20px;
}
.loginInhoud h2 {
margin: 20px auto;
color: #fff;
} .clientHeaderTekst {
text-shadow: 0 0 30px #000;
}
.levelContainer {
display: flex;
flex-direction: column;
align-items: center;
}
.levelContainer h3 {
margin-bottom: 20px;
}
.personalLevelContainer {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
}
.personalLevelContainer svg {
transform: rotate(-90deg);
}
.levelCircleCounter {
stroke-dasharray: 880;
stroke-dashoffset: 880;
transition: 1s;
}
.personalLevelInfoContainer {
width: 300px;
height: 300px;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.personalLevelInfoContainer img {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
.personalLevelInfoContainer p {
color: #fff;
margin-bottom: 0;
font-size: 1.6em;
}
.personalLevelPoints {
font-size: 2.5em !important;
line-height: 1em;
}
.tableLastDates {
width: 400px;
margin-bottom: 100px;
}
.tableLastDates tr td {
width: 50%;
padding: 5px 0;
}
.clientNumberReviews {
font-size: 2.5em;
color: var(--kleur-goud);
}
.nextLevelContainer {
margin-top: 40px;
}
.clientNextLevelHeading {
text-align: center;
}
.clientTilesContainer {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
.tileContainer {
width: 148px;
height: 200px;
background-color: var(--kleur-donker-grijs);
padding: 10px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border-radius: 5px;
box-shadow: 0 2px 25px -10px #ddd;
margin: 20px;
transition: 0.3s;
}
.tileContainer img {
width: 50px;
height: 50px;
}
.tileTitle,
.tilePoints {
text-transform: uppercase;
font-size: 0.8em;
font-weight: 700;
margin-bottom: 0;
}
@keyframes animTiles {
0% {
background-color: var(--kleur-grijs);
transform: scale(1);
}
50% {
background-color: var(--kleur-rood);
transform: scale(1.2);
}
100% {
background-color: var(--kleur-donker-rood);
transform: scale(1);
}
}
.tileUnlockedStyle {
animation: animTiles 0.5s forwards;
transition: 0.3s;
}
.tileUnlockedStyle .tileTitle,
.tileUnlockedStyle .tilePoints {
color: #fff;
}
.hiddenTileLogic {
display: none;
} .nieuwsbriefFull {
background-color: var(--kleur-goud);
padding: 30px 0;
}
.nieuwsbriefFull .flexColumn {
align-items: center;
}
.nieuwsbriefFull h3 {
color: #fff;
font-size: 1.5em;
margin-bottom: 20px;
text-align: center;
}
.CF5fa29700b6647 .row {
display: flex;
}
.CF5fa29700b6647 .row .single {
display: flex;
margin: 0 auto;
width: 100%;
max-width: 525px;
}
.CF5fa29700b6647 .formInputText {
padding: 0;
border-top: 2px solid var(--kleur-rood);
border-bottom: 2px solid var(--kleur-rood);
border-left: 2px solid var(--kleur-rood);
border-right: none;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
min-width: 400px;
}
.CF5fa29700b6647 .formInputText input {
border-top-right-radius: 0px !important;
border-bottom-right-radius: 0px !important;
height: 35px !important;
border: none;
}
.CF5fa29700b6647 .formInputButton {
padding: 8px 20px;
background-color: var(--kleur-rood);
border: 2px solid var(--kleur-rood);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
cursor: pointer;
font-size: 1em;
}
.formInputText::placeholder {
color: var(--kleur-rood);
} .blogOverzichtFull {
background-color: var(--kleur-donker-rood);
margin-top: 50px;
}
.blogOverzichtContainer {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.blogOverzichtContainer a {
margin: 10px;
}
.blogItemContainer {
max-width: 270px;
min-height: 400px;
background-color: var(--kleur-grijs);
position: relative;
border-radius: 3px;
padding-bottom: 40px;
overflow: hidden;
transition: 0.3s;
}
.blogItemContainer:hover {
background-color: #fff;
transform: scale(1.02);
transition: 0.3s;
}
.blogItemContainer:hover > h2 {
color: var(--kleur-goud);
transition: 0.3s;
}
.blogItemContainer img {
align-self: center;
width: 100%;
height: auto;
}
.metaData {
position: absolute;
top: 120px;
right: 0;
background-color: var(--kleur-goud);
padding: 5px;
color: #fff;
text-transform: uppercase;
font-size: 12px;
}
.blogItemContainer h2 {
padding: 10px 20px;
font-size: 1.4em;
cursor: pointer;
transition: 0.3s;
}
.blogImageK {
position: absolute;
bottom: 10px;
left: calc(50% - 20px);
width: 40px !important;
height: 40px !important;
}
.singleBlogPageFull h1 {
font-size: 2.2em;
} .blogSingleImage {
margin-bottom: 20px;
display: block;
margin: 0 auto;
}
.singleMetaData {
display: block;
margin: 0 auto;
}
.singleBlogContainer {
margin-bottom: 50px;
max-width: 800px;
}
.singleBlogContainer img {
height: auto;
}
.singleBlogContainer h1,
.singleBlogContainer img {
margin-bottom: 20px;
}
blockquote p {
font-size: 1.3em;
color: var(--kleur-goud);
font-style: italic;
max-width: 70%;
text-align: center;
margin: 20px auto;
}
.buttonBlogSingle {
display: block;
margin: 40px auto;
max-width: 300px;
} .mediaArtikel {
cursor: zoom-in;
}
.mediaArtikelCenter img {
display: block;
margin: 0 auto;
}
.mediaLightBoxBack {
position: fixed;
z-index: 99998;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 100px 20px;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
overflow: scroll;
justify-content: space-around;
align-items: flex-start;
transition: 0.3s;
}
.mediaBackClosed {
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.mediaLightBoxBack img {
width: 100%;
max-width: 1200px;
height: auto;
}
.mediaArtikelLightBox {
cursor: zoom-out;
} .companionSchema {
width: 100%;
border-collapse: collapse;
}
.companionSchema th {
background-color: var(--kleur-donker-rood);
color: #fff;
padding: 10px;
}
.companionSchemaTitleMobiel {
display: none;
}
.companionSchemaTitleDesktop {
display: block;
color: #fff;
}
.companionSchema th:first-child {
text-align: left;
}
.companionSchema td {
text-align: center;
padding: 5px 10px;
background-color: var(--kleur-donker-grijs);
width: 10%;
}
.aanvraagFont {
font-size: 12px;
font-weight: 700;
}
.companionSchema td:first-child {
text-align: left;
background-color: var(--kleur-goud);
width: 30%;
}
.companionSchema td:first-child a {
color: var(--kleur-grijs);
transition: 0.3s;
}
.companionSchema td:first-child a:hover {
color: var(--kleur-donker-rood);
transition: 0.3s;
}
.companionSchema tr {
transition: 0.3s;
}
.companionSchema tr:hover {
filter: brightness(1.1);
transition: 0.3s;
}
.tabelBeschikbaar {
background-color: #2fb14e !important;
}  .bekendContainer h2 {
font-size: 1.5em;
margin-bottom: 40px;
text-align: center;
}
.bekendImageContainer {
display: flex;
width: 100%;
justify-content: space-between;
} .footerBackground {
background-color: var(--kleur-donker-rood);
padding: 10px 0;
} .footerNavContainer {
width: 100%;
}
.menu-footermenu-container .menu {
list-style-type: none;
display: flex;
justify-content: space-between;
margin: 0 !important;
}
.menu-footermenu-container .menu li a {
font-weight: 400;
color: var(--kleur-grijs);
transition: 0.3s;
}
.menu-footermenu-container .menu li a:hover {
color: var(--kleur-goud);
transition: 0.3s;
} .footerLogoKolom {
padding: 20px;
}
.footerLogoKolom h3 {
color: var(--kleur-grijs);
font-size: 2em;
}
.footerLogoKolom h4 {
color: var(--kleur-grijs);
cursor: default;
} .footerSocialKolom {
display: flex;
margin-top: 10px;
}
.footerSocialKolom img {
width: 30px;
height: 30px;
margin: 0 10px;
} .copyContainerFull {
background-color: #000;
padding: 0;
}
.copyContainer {
display: flex;
justify-content: space-between;
}
.copyContainer p {
color: var(--kleur-grijs);
font-size: 0.8em;
margin-bottom: 0;
}
.copyContainer a {
font-weight: 400;
color: var(--kleur-grijs);
font-size: 0.8em;
transition: 0.3s;
}
.copyContainer a:hover {
color: var(--kleur-goud);
transition: 0.3s;
}
.copyContainer a:first-child {
margin-right: 20px;
} .copyWarningBack {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
filter: grayscale(1);
pointer-events: auto;
z-index: 99999;
transition: 0.3s;
}
.copyClosed {
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.copyWarningContainer {
background-color: var(--kleur-donker-rood);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 5px 170px -20px #000;
}
.copyWarningContainer h3 {
text-align: center;
color: #fff;
}
.copyWarningContainer p {
color: var(--kleur-grijs);
}
.closeCopyWarning {
background-color: var(--kleur-grijs);
color: var(--kleur-donker-rood) !important;
display: block;
margin: 0 auto;
max-width: 80px;
padding: 5px 20px;
border-radius: 3px;
text-align: center;
text-transform: uppercase;
font-weight: 700;
font-size: 0.8em;
cursor: pointer;
transition: 0.3s;
}
.closeCopyWarning:hover {
background-color: #fff;
color: #000;
transform: scale(0.9);
transition: 0.3s;
} .popupBackground {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
filter: grayscale(1);
pointer-events: auto;
z-index: 99999;
transition: 0.3s;
}
.popupClosed {
opacity: 0;
pointer-events: none;
transition: 0.3s;
}
.popupContainer {
background-color: var(--kleur-donker-rood);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 5px 170px -20px #000;
max-width: 600px;
}
.popupContainer h3 {
text-align: center;
color: #fff;
}
.popupContainer p {
color: var(--kleur-grijs);
}
.popupContainer a {
display: block;
width: 100%;
padding: 15px;
text-align: center;
border-radius: 5px;
text-transform: uppercase;
color: var(--kleur-tekst);
background-color: var(--kleur-licht-back);
} .faqItem {
margin-bottom: 40px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
}
.faqQuestionContainer {
display: flex;
justify-content: space-between;
align-items: center;
}
.faqQuestionContainer h3 {
margin-bottom: 0;
}
.faqExpand {
font-size: 40px;
line-height: 30px;
font-weight: 700;
text-align: center;
width: 30px;
min-width: 30px !important;
height: 30px;
background-color: var(--kleur-rood);
color: #fff;
border-radius: 15px;
margin-bottom: 0;
cursor: pointer;
padding-left: 1px;
transition: 0.3s;
}
.faqExpand:hover {
background-color: var(--kleur-goud);
transition: 0.3s;
}
.faqOpen {
background-color: var(--kleur-goud);
transition: 0.3s;
}
.faqAnswerContainer {
height: 0;
overflow: hidden;
transition: 0.3s;
}
.faqAnswerContainer p {
margin-bottom: 0;
} .blogContainer404 {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.blogContainer404 a .blogItemContainer {
max-width: 250px;
margin: 0 10px 40px 10px;
box-shadow: 0 0 25px -10px #888;
} .landingsPageFAQitemsContainer {
margin: 40px 0;
}
.singleBlogContainer h2 {
font-family: var(--primary-font) !important;
font-size: 1.6em;
line-height: 1em;
text-align: left;
color: var(--kleur-tekst);
margin-bottom: 20px;
}
.singleBlogContainer h2 b {
font-family: var(--primary-font) !important;
} .instaFeedFull {
padding-top: 0;
overflow: hidden;
}
.instaInleidingFullWidth {
padding-bottom: 0;
}
.instaInleidingFullWidth h3 {
font-size: 1.5em;
margin-bottom: 20px;
text-align: center;
}
.instaFeedFull .sb_instagram_header,
.instaFeedFull #sbi_load {
display: none !important;
} .whatsAppButton {
position: fixed;
right: -10px;
bottom: 20px;
width: 60px;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #25d366;
border-radius: 10px 0 0 10px;
transition: 0.3s;
}
.whatsAppButton:hover {
right: 0;
transition: 0.3s;
}
.whatsAppButton img {
transform: translateX(-5px);
width: 30px;
height: auto;
} .toTopButton {
position: fixed;
right: -60px;
bottom: 80px;
width: 60px;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: var(--kleur-rood);
border-radius: 10px 0 0 10px;
transition: 0.3s;
}
.toTopButton img {
transform: translateX(-5px) rotate(-90deg);
width: 15px;
height: auto;
}
.toTopButton:hover {
right: 0;
transition: 0.3s;
}
.toTopButtonOpen {
right: -10px;
transition: 0.3s;
}  .navFullWidth,
.prijzenSectieFull,
.singleCompanionSliderFull,
.footerBackground,
.travelZoneFull,
.werkenWieFull,
.homeReviewSliderFull {
background: -moz-linear-gradient(top, rgba(66, 1, 25, 1) 0%, rgba(36, 0, 13, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(66, 1, 25, 1)), color-stop(100%, rgba(36, 0, 13, 1)));
background: -webkit-linear-gradient(top, rgba(66, 1, 25, 1) 0%, rgba(36, 0, 13, 1) 100%);
background: -o-linear-gradient(top, rgba(66, 1, 25, 1) 0%, rgba(36, 0, 13, 1) 100%);
background: -ms-linear-gradient(top, rgba(66, 1, 25, 1) 0%, rgba(36, 0, 13, 1) 100%);
background: linear-gradient(to bottom, rgba(66, 1, 25, 1) 0%, rgba(36, 0, 13, 1) 100%);
}  @media only screen and (max-width: 1400px) { .homeSliderContainer a:first-child {
display: none;
}
} @media only screen and (max-width: 980px) { main {
margin-top: 152px;
}
.headerNavMenuDesktop {
display: none !important;
}
.headerNavMenuMobile {
display: flex !important;
} .headerNavMobileSwitch {
display: block !important;
position: absolute;
width: 40px;
height: 30px;
top: 25px;
right: 25px;
cursor: pointer;
overflow: hidden;
z-index: 999;
transition: 0.3s;
}
.navMobileButtonOpen {
position: fixed;
right: 15px;
}
.bar {
position: absolute;
left: 0;
width: 40px;
height: 6px;
background-color: var(--kleur-grijs);
border-radius: 4px;
transition: 0.3s;
}
.bar1 {
top: 0;
opacity: 1;
}
.bar2 {
top: 12px;
opacity: 1;
}
.bar3 {
top: 24px;
opacity: 1;
}
.bar4 {
top: 12px;
opacity: 0;
transform: rotate(45deg) scale(0.1);
}
.bar5 {
top: 12px;
opacity: 0;
transform: rotate(-45deg) scale(0.1);
}
.navMobileButtonOpen .bar1 {
top: 0;
left: 50px;
opacity: 0;
}
.navMobileButtonOpen .bar2 {
top: 12px;
left: -40px;
opacity: 0;
width: 20px;
}
.navMobileButtonOpen .bar3 {
top: 24px;
left: 50px;
opacity: 0;
}
.navMobileButtonOpen .bar4 {
opacity: 1;
top: 12px;
left: 0px;
transform: rotate(-45deg) scale(1);
}
.navMobileButtonOpen .bar5 {
opacity: 1;
left: 0px;
top: 12px;
transform: rotate(45deg) scale(1);
}
.headerContainer {
padding: 10px;
}
.headerNavMenuMobile {
opacity: 0;
pointer-events: none;
position: fixed;
top: 0;
left: -100%;
width: 100%;
height: 100%;
padding-top: 20px;
justify-content: space-around;
background-color: var(--kleur-donker-rood);
transition: 0.3s;
}
.navMobileOpen {
left: 0;
opacity: 1;
pointer-events: auto;
transition: 0.3s;
}
.headerNavMenuMobile .menu-mobiel-hoofdmenu-container {
width: 100%;
}
.headerNavMenuMobile .menu-mobiel-hoofdmenu-container .menu {
flex-direction: column;
list-style-type: none;
}
.headerNavMenuMobile .menu-mobiel-hoofdmenu-container .menu li {
line-height: 2.5em;
}
.headerNavMenuMobile .menu-mobiel-hoofdmenu-container .menu li a {
font-size: 1.2em;
color: var(--kleur-licht-back);
font-weight: 700;
display: block;
padding: 0;
}
.headerNavMenuMobile .menu-mobiel-hoofdmenu-container .sub-menu {
position: static;
opacity: 1;
pointer-events: auto;
margin-bottom: 20px !important;
}
.headerNavMenuMobile .sub-menu .menu-item {
}
.headerNavMenuMobile .sub-menu li a {
width: 100%;
background-color: transparent;
padding: 0 !important;
font-weight: 400 !important;
margin-bottom: 4px;
}
.headerNavMenuMobile #menu-item-208 {
background-color: var(--kleur-goud);
margin: 0 20px;
}
.headerNavMenuMobile #menu-item-208 a {
padding: 0;
border-radius: 0;
}
.headerNavMenuMobile #menu-item-208 a:hover {
background-color: var(--kleur-goud);
}
.headerNavMenuMobile .trp-language-switcher-container { } .kolom {
padding: 10px;
}
.topInfoClose {
top: -32px;
}
.topInfoContainer {
justify-content: center;
}
.topInfoContactContainer {
padding-top: 0;
}
.topInfoContainer p:first-child {
display: none;
}
.homeTitelFull h1,
.titelHeaderGrijs {
display: block;
}
.homeTitelContainer span {
display: none;
}
.ervaringSliderContainer {
height: 130px;
}
.companionContainer {
justify-content: center;
}
.companionBlock {
max-width: 250px;
}
.companionBlockInfo table {
margin: 30px 0 30px 30px;
}
.companionBlockInfo table tr td {
font-size: 0.8em;
}
.singleCompanionHeroFull {
flex-direction: column;
height: 750px;
}
.singleCompanionHeroLeft {
width: 100%;
min-height: 400px;
}
.singleCompanionHeroRight {
width: 100%;
min-height: 350px;
}
.gridCompanionContainer {
grid-template-areas:
"vragenlijstGrid vragenlijstGrid"
"serviceLijstGrid serviceLijstGrid"
"tarievenLijstGrid tarievenLijstGrid"
"ratingGrid ratingGrid"
"beschikbaarGrid beschikbaarGrid";
}
.pagePayOffFull h1,
.pagePayOffFull h2 {
font-size: 2em;
}
.fullWidthBackroundLeft {
background-position: center;
background-size: cover;
}
.backgroundBetaalwijze {
background-position: center right;
background-size: cover;
}
.backgroundGreyOpacity {
padding: 20px !important;
}
.prijzenSectieFull .prijzenContainer {
margin: 20px;
}
.overOnsIntroTekst {
margin: 0;
text-align: center;
}
.clientLevelsContainerFull {
flex-wrap: wrap;
}
.clientLevelsContainer {
justify-content: center;
}
.clientContainer {
min-width: 175px;
margin: 20px;
}
.blogOverzichtContainer {
justify-content: center;
}
.blogItemContainer {
max-width: 250px;
}
.blogItemContainer h2 {
font-size: 1.2em;
}
.metaData {
top: 134px;
}
.contactTelefoon {
font-size: 2em;
}
.quoteContainer p {
font-size: 2em;
}
.companionSchemaTitleDesktop {
font-size: 0.7em;
}
.singleOmschrijvingButtonsContainer {
display: flex;
flex-direction: column;
align-items: center;
}
.singleOmschrijvingButtonsContainer .buttonGoud {
margin-bottom: 40px;
}
} @media only screen and (max-width: 750px) { .werkenBijOnsFull {
flex-direction: column;
}
.werkenFeatureKolom {
width: 100%;
}
.kolomContainer {
flex-direction: column;
}
.kolom35,
.kolom40,
.kolom50,
.kolom65 {
width: 100%;
padding: 0;
}
.homeSliderContainer a:last-child {
display: none;
}
} @media only screen and (max-width: 600px) { .tableSingleService {
display: none;
}
.tableSingleServiceMobiel {
display: block !important;
}
.tableSingleServiceMobiel tr td {
padding: 5px 0;
font-size: 0.9em;
width: 100%;
}
.singleServiceHeader {
margin-top: 30px;
} .vragenArrowLeft {
left: -30px;
transform: scale(0.4);
}
.vragenArrowRight {
right: -30px;
transform: scale(0.4);
}
.vragenArrowLeft:hover {
left: -30px;
transform: scale(0.4);
}
.vragenArrowRight:hover {
right: -30px;
transform: scale(0.4);
}
.singleOmschrijvingVragenSlider,
.vragenSlide {
padding: 40px 45px;
} main {
margin-top: 182px;
}
.topInfoFullWidth {
height: 72px;
}
.topInfoClose {
top: -72px;
}
.topInfoContactContainer {
display: flex;
flex-direction: column;
min-width: 300px;
}
.topInfoPhone {
margin: 10px 0;
}
.topInfoContainer a,
.topInfoFullWidth p {
margin-bottom: 10px;
}
.homeButtonContainer {
flex-direction: column;
width: 300px;
}
.homeButtonContainer a {
width: 220px;
display: block;
margin: 0 auto 20px auto;
}
.ervaringSliderContainer {
height: 195px;
}
.formInschrijfNieuws {
flex-direction: column;
}
.formInschrijfNieuws .formInputText {
border: 2px solid var(--kleur-rood);
margin-bottom: 20px;
min-width: 0;
}
.buttonGoud {
margin: 0 auto;
}
.bekendImageContainer {
flex-direction: column;
align-items: center;
}
.bekendImageContainer a {
margin-bottom: 20px;
}
.footerNavContainer {
display: none;
}
.footerLogoKolom h3 {
font-size: 1.6em;
text-align: center;
}
.footerSocialKolom {
width: 100%;
padding: 20px;
display: flex;
justify-content: center;
}
.copyContainer {
flex-direction: column;
}
.heroHeaderContainer .normalContainer h1 {
font-size: 2em;
}
.heroNameContainer {
display: flex;
flex-direction: column;
}
.heroName1,
.heroName2 {
text-align: center;
}
.heroNameContainer p {
display: none;
}
.singleOmschrijvingButtonsContainer .buttonGoud {
margin: 20px;
}
.singleTarievenContainer h2,
.singleServiceContainer h2,
.vragenLijstNaam {
font-size: 1.6em;
}
.tarievenVerzamelContainer {
flex-direction: column;
}
.tarievenKolom {
width: 100%;
}
table {
width: 100%;
}
.singleTarievenBoekContainer {
flex-direction: column;
}
.singleTarievenBoekContainer a {
width: 100%;
}
.singleTarievenBoekContainer a:first-child {
margin-bottom: 20px;
}
.tarievenContainer table td:last-child {
text-align: right;
}
.quoteContainer p {
font-size: 1.6em;
}
.travelZoneFull .kolomContainer .kolom:first-child {
margin-bottom: 20px;
}
.travelZoneFull .headingContainer h2 {
margin-bottom: 0;
}
.overOnsFoto {
float: none;
display: block;
margin: 0 auto 20px auto;
} .companionContainerFull {
background-color: var(--kleur-goud);
padding: 0;
}
.companionContainer {
display: grid;
grid-template-columns: 50% 50%;
padding: 0;
}
.companionContainer a {
border: 1px solid #fff !important;
}
.companionBlock {
max-width: none;
margin: 0;
}
.companionBlockImage {
position: relative;
}
.companionInternationaalBanner {
padding: 5px 10px;
bottom: 42px;
left: -84px;
}
.companionInternationaalBanner p {
font-size: 12px;
}
.companionBlockInfo {
position: relative;
padding: 10px;
bottom: 0;
}
.companionBlockInfo table {
margin: 0;
}
.companionBlockInfo table tr td:first-child {
width: 75px;
}
.companionBlockInfo table tr td {
padding: 0;
}
.companionBlockNaam,
.companionBlockLeeftijd {
display: none;
}
.companionBlockInfo h2 {
display: block !important;
margin-top: 0;
} .companionSchemaTitleDesktop {
display: none;
}
.companionSchemaTitleMobiel {
display: block;
color: #fff;
} .CF5fa29700b6647 .row {
max-width: 300px !important;
margin: 0 auto !important;
}
.CF5fa29700b6647 .row .single {
max-width: 300px;
}
.CF5fa29700b6647 .formInputText {
min-width: 0;
max-width: 175px;
}
.CF5fa29700b6647 .formInputButton {
padding: 8px 10px;
} .werkenWebshopKortingFull {
flex-direction: column;
}
.boekenTelefoonnummer {
font-size: 1.8em;
}
.tableLastDates {
width: 300px;
}
.clientNumberReviews {
font-size: 5em;
line-height: 1.2em;
text-align: center;
}
.clientTilesContainer {
justify-content: center;
}
.tileContainer {
width: 120px;
}
.fullWidthLogin {
justify-content: flex-start;
align-items: flex-start;
padding: 0;
}
.loginContainer {
flex-direction: column;
}
.loginInhoud,
.loginBack {
width: 100%;
min-height: 200px;
} .popupContainer {
height: 80%;
overflow: scroll;
}
}