html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0; vertical-align: baseline;
box-sizing: border-box;
} article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul { padding-left: 30px;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body{
font-family: var(--secondary-font-family);
font-size: 16px;
line-height: 140%;
color: var(--black);
} button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
} button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
} [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} [type="search"] {
-webkit-appearance: textfield; outline-offset: -2px; } h1, h2, h3, h4, h5, h6{
font-family: var(--main-font-family);
color: var(--primary-color);
line-height: 140%;
}
p, a {
font-size: 1em;
line-height: 140%;
margin: 1rem 0 1rem;
}
h1{
font-size: 1.5em;
margin: 1.5rem 0 1.5rem;
}
h2{
font-size: 1.5em;
margin: 1.25rem 0 1.25rem;
}
h3{
font-size: 1.5em;
margin: 1rem 0 1rem;
}
h4{
font-size: 1.35em;
margin: 1rem 0 1rem;
}
h5{
font-size: 1.2em;
margin: 1rem 0 1rem;
}
h6{
font-size: 1.1em;
margin: 1rem 0 1rem;
} .font-light {
font-weight: 300;
}
.font-regular {
font-weight: 400;
}
.font-heavy {
font-weight: 700;
} .left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.justify {
text-align: justify;
} html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
left: 0;
top: 0;
scroll-behavior: smooth;
} .container {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.row {
position: relative;
width: 100%;
}
.row [class^="col"] {
float: left;
margin: 0.5rem 2%;
min-height: 0.125rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
width: 96%;
}
.col-1-sm {
width: 4.33%;
}
.col-2-sm {
width: 12.66%;
}
.col-3-sm {
width: 21%;
}
.col-4-sm {
width: 29.33%;
}
.col-5-sm {
width: 37.66%;
}
.col-6-sm {
width: 46%;
}
.col-7-sm {
width: 54.33%;
}
.col-8-sm {
width: 62.66%;
}
.col-9-sm {
width: 71%;
}
.col-10-sm {
width: 79.33%;
}
.col-11-sm {
width: 87.66%;
}
.col-12-sm {
width: 96%;
}
.row::after {
content: "";
display: table;
clear: both;
}
.hidden-sm {
display: none;
}
.margin-large{
margin: 2em 0;
}
.padding-large{
padding: 2em 0;
}
.container .padding-large{
padding: 1.5em 1em;
}
@media only screen and (min-width: 33.75em) { .container {
width: 95%;
}
.container-small{
width: 95%;
}
.container-x-small{
width: 95%;
}
}
@media only screen and (min-width: 45em) { .col-1 {
width: 4.33%;
}
.col-2 {
width: 12.66%;
}
.col-3 {
width: 21%;
}
.col-4 {
width: 29.33%;
}
.col-5 {
width: 37.66%;
}
.col-6 {
width: 46%;
}
.col-7 {
width: 54.33%;
}
.col-8 {
width: 62.66%;
}
.col-9 {
width: 71%;
}
.col-10 {
width: 79.33%;
}
.col-11 {
width: 87.66%;
}
.col-12 {
width: 96%;
}
.hidden-sm {
display: block;
}
h1{
font-size: 2.5em;
margin: 1.5rem 0 1.5rem;
}
h2{
font-size: 2em;
margin: 1.25rem 0 1.25rem;
}
h3{
font-size: 1.5em;
margin: 1rem 0 1rem;
}
h4{
font-size: 1.25em;
margin: 1rem 0 1rem;
}
h5{
font-size: 1em;
margin: 1rem 0 1rem;
}
h6{
font-size: 1em;
margin: 1rem 0 1rem;
}
}
@media only screen and (min-width: 60em) { .container {
width: 95%;
max-width: 86.25rem;
}
.container-small {
width: 95%;
max-width: 75rem;
}
.container-x-small{
width: 95%;
max-width: 70rem;
}
.margin-large{
margin: 4em 0;
}
.padding-large{
padding: 4em 0;
}
.container .padding-large{
padding: 3.25em 1em;
}
} :root { --primary-color: #012C5A;
--secondary-color: #BBDF0A;
--accent: #0074C4;
--tertiary: #F3F3F3;
--black: #333;
--white: #fff;
--grey-100: #F5F5F7;
--grey-200: #EBEBF0;
--grey-300: #B9B9BE;
--grey-400: #A5A5AA;
--grey-500: #919196;
--grey-600: #78787D;
--grey-700: #646469;
--grey-800: #4B4B50;
--grey-900: #37373C;
--mid-grey: #A6A7A6;
--light-grey: #666;
--light: #f9f9f9; --main-font-family: 'Inter', sans-serif;
--secondary-font-family: 'Inter', sans-serif; --shadow-circle: 0px 28px 69px -18px rgba(0,0,0,0.75);
--shadow-box: 0px 4px 8px 0px rgba(58,49,49,0.08),
0px 8px 16px 0px rgba(58,49,49,0.08),
0px 32px 64px 0px rgba(58,49,49,0.08);
}  .button-holder{
position: relative;
margin: 1em 0;
}
.button-holder a{
display: inline-block;
}
.button{
padding: 0.75em 1.9em;
border-radius: 0.25em;
transition: all .2s ease-in-out,color .2s ease-in-out;
text-decoration: none;
}
.button-span-right span {
margin-left: .75em;
}
.button-span-left span {
margin-right: .75em;
}
.button-green {
background: var(--secondary-color);
color: var(--primary-color);
font-weight: bold;
border: 1px solid var(--secondary-color);
}
.button-green:hover {
background: var(--primary-color);
color: var(--secondary-color);
border: 1px solid var(--secondary-color);
} img{
max-width: 100%;
object-fit: cover;
} img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.hide-mobile{
display: none;
}
.main-menu-holder.hide-mobile ul {
list-style: none;
text-align: right;
}
.main-menu-holder.hide-mobile ul li {
display: inline;
padding: .5em .8em;
position: relative;
}
.main-menu-holder.hide-mobile ul li a{
color: var(--accent);
text-decoration: none;
font-weight: bold;
}
.f-text-holder p {
font-size: 10px;
}
ul.sub-menu {
width: 270px;
position: absolute;
left: 0;
background: var(--primary-color);
padding: 1em;
}
.main-menu-holder ul li ul.sub-menu li {
text-align: left;
display: block;
margin-left: 0;
}
.main-menu-holder ul li ul.sub-menu li:hover a{
text-decoration: underline;
}
.main-menu-holder.hide-mobile ul li:has(.sub-menu):hover {
background: var(--primary-color);
} .main-menu-holder ul li ul.sub-menu a{
color: var(--secondary-color);
font-weight: 400;
}
.main-menu-holder.hide-mobile ul li:hover a{
color: var(--secondary-color);
}
.main-menu-holder.hide-mobile ul li ul.sub-menu {
display: none;
visibility: hidden;
opacity: 0;
transition: all .2s;
z-index: 100;
}
section.header-section .row {
display: flex;
align-items: center;
}
.main-menu-holder.hide-mobile ul li:hover .sub-menu {
display: block;
visibility: visible;
opacity: 1;
}
section.bottom-footer {
background: var(--light);
}
section.bottom-footer a{
color: unset;
text-decoration: none;
}
section.footer-section {
padding: 4.5em 0;
background: var(--tertiary);
}
h5.footer-title {
color: var(--accent);
}
.footer-contact-holder a {
color: unset;
text-decoration: none;
}
.footer-contact-holder p {
margin-left: 25px;
position: relative;
}
.footer-contact-holder span {
position: absolute;
left: -25px;
}
.footer-last-row-holder p {
margin-bottom: 30px;
}
.menu-hoofdmenu-container ul {
padding: 0;
list-style: none;
}
.menu-hoofdmenu-container li {
margin-bottom: 10px;
}
.menu-hoofdmenu-container li a{
color: unset;
text-decoration: none;
}
.footer-section a:hover{
color: var(--secondary-color);
}
.main-menu-holder.hide-mobile ul li:last-child {
padding-right: 0;
}
img.home-hero-image {
width: 100%;
height: 500px;
object-fit: cover;
}
.home-hero-content-holder {
width: 650px;
text-align: center;
position: absolute;
color: #fff;
max-width: 95%;
}
section.image-left img, section.image-right img {
height: auto;
}
.home-hero{
display: flex;
align-items: center;
justify-content: center;
max-width: 1920px;
margin: auto;
}
section.hero-diensten {
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.home-hero .container{
width: 100%;
text-align: center;
position: absolute;
color: #fff;
}
.home-hero-content-holder h1{
color: #fff;
}
.home-hero-content-holder a{
display: inline-block;
margin-top: 2em;
}
.home-hero-content-holder p {
margin-bottom: 43px;
max-width: 60ch;
margin: auto;
}
.home-hero .col-12{
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
.home-diensten-card {
box-shadow: 0px 4px 40px rgba(51, 51, 51, 0.08);
padding: 2em;
background: #fff;
}
.home-diensten-card h3 {
margin-top: 0;
}
.home-diensten-card a {
color: var(--accent);
font-weight: bold;
text-decoration: none;
}
.hero-diensten{
position: relative;
}
section.footer-cta {
max-width: 1920px;
margin: auto;
}
section.footer-cta .col-6 {
margin-bottom: 0;
}
.image-holder img {
height: auto;
}
section.footer-cta img {
margin-bottom: -5px;
}
section.header-section {
background: vaR(--light);
}
.contact-form-holder h2 {
margin-top: 40px;
}
p#breadcrumbs {
font-weight: bold;
}
p#breadcrumbs a {
text-decoration: none;
font-weight: 400;
color: var(--grey-700);
}
section.contact-content {
margin-bottom: 4em;
}
.contact-form-holder input , .contact-form-holder textarea{
padding: 10px !important;
border-radius: 5px;
border: 1px solid var(--mid-grey);
}
input#gform_submit_button_1 {
cursor: pointer;
border: none;
padding: 1em 2em !important;
font-size: 1em !important;
color: var(--primary-color);
font-weight: bold;
background: var(--secondary-color);
}
section#cd-google-map {
width: 100%;
height: 550px; }
.contact-info-data-card {
width: 450px;
max-width: 100%;
padding: 2em;
background: var(--primary-color);
color: #fff;
margin: auto;
margin-top: -10em;
font-size: 18px;
}
.contact-info-data-card span {
vertical-align: middle;
margin-right: 10px;
}
section.contact-content .col-6 {
margin-top: 0;
}
.contact-info-data-card a, .contact-info-data-card h3{
color: #fff;
text-decoration: none;
}
section.hero-other-pages .col-6 {
margin-top: 0;
}
.hero-other-pages-contact-holder a {
color: var(--accent);
font-weight: bold;
text-decoration: none;
margin-right: 15px;
}
.hero-other-pages-contact-holder a:hover, .hero-other-pages-contact-holder a:hover svg path, .home-diensten-card a:hover svg path, .home-diensten-card a:hover{
color: var(--secondary-color);
stroke: var(--secondary-color);
}
.home-diensten-card a span {
vertical-align: middle;
margin-left: 5px;
}
.hero-other-pages-contact-holder a span{
margin-left: 5px;
vertical-align: middle;
}
.hero-cta-holder {
display: inline-block;
padding: 1em;
background: var(--primary-color);
color: #fff;
}
.hero-cta-holder h3 {
color: #fff;
}
.hero-cta-holder p {
margin-bottom: 30px;
}
img.bg-image-half-img {
display: block;
}
.bg-image-half-content {
padding: 1em;
background: var(--light);
}
.hero-other-pages-contact-holder li{
position: relative;
margin-bottom: 20px;
list-style: none;
}
.hero-other-pages-contact-holder li:first-letter{
text-transform: capitalize;
}
.hero-other-pages-contact-holder li:before {
content: url(https://www.synhome.be/wp-content/themes/synhome/img/list-house.svg);
position: absolute;
left: -30px;
}
.content-ful-bg {
padding: 2em;
background: #ffffffc4; }
section.bg-image-full .row {
background-repeat: no-repeat;
}
section.bg-image-full .row {
background-repeat: no-repeat;
background-size: calc(100% - 4%);
background-position: center;
}
section.team-section {
background: var(--primary-color);
}
section.team-section.margin-large.padding-large h2 {
color: #fff;
text-align: center;
margin-bottom: 2em;
}
section.team-section .row {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.team-item {
text-align: center;
color: #fff;
}
.team-item h4 {
color: var(--secondary-color);
}
.categorie-item h2 {
color: var(--accent);
font-size: 2.5em;
}
.sub-button {
color: var(--accent);
text-decoration: none;
margin: 20px 0;
display: inline-block;
font-weight: 600;
margin-top: 0;
}
.categorie-item h5 {
font-size: 24px;
}
.categorie-item:nth-child(odd) {
background: var(--light);
}
.categorie-item:nth-child(even) {
padding: 0;
}
.mede-sat-menu-holder {
margin-top: 2em;
}
li#menu-item-3853:hover a {
color: #fff;
}
li#menu-item-3853:hover .sub-menu li:hover a {
color: var(--secondary-color);
}
p#breadcrumbs {
margin-top: 4em;
}
.page-id-80 .flex-center:not(.footer-cta .flex-center) {
align-items: flex-start;
}
ul.sub-menu li:after {
content: '\203A';
padding-left: 10px;
text-decoration: none;
color: #fff;
}
.logo-mobile-holder img {
width: 157px;
margin-top: 7px;
margin-left: 25px;
} @media screen and (min-width: 48em){ .hide-mobile{
display: block;
}
.content-ful-bg {
padding: 4em;
background: #ffffffc4;
margin-top: 4em;
margin-bottom: 4em;
}
.footer-cta-content-holder {
padding: 0 1.5em;
}
.hero-cta-holder {
padding: 2em;
}
section.footer-cta img {
margin-bottom: -6px;
margin-top: -3em;
}
.bg-image-half-content {
padding: 3em;
background: var(--light);
}
section.footer-cta {
max-width: 1920px;
margin: auto;
margin-top: 7em;
}
section.footer-cta {
background: rgb(1,44,90);
background: linear-gradient(90deg, rgba(1,44,90,1) 0%, rgba(1,44,90,1) 80%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%);
color: #fff;
}
.hero-cta-holder {
margin-right: 0;
margin-left: auto;
right: 0;
float: right;
margin-top: -150px;
z-index: 1;
position: relative;
}
section.footer-cta h3 {
color: #fff;
font-size: 40px;
width: 80%;
}
}
@media screen and (min-width: 960px){
.copyright-holder {
display: flex;
justify-content: space-between;
}
.bg-image-half-content {
padding: 5em;
background: var(--light);
}
section.bg-image-half.margin-large .col-7 {
position: absolute;
right: 0;
top: 50px;
}
img.bg-image-half-img {
display: block;
height: 500px;
width: 50%;
}
section.bg-image-half{
margin-bottom: calc(4em + 70px);
}
.hero-cta-holder {
padding: 3em;
}
.hero-other-pages-contact-holder {
width: 90%;
}
.contact-form-holder {
width: 85%;
}
.footer-cta-content-holder {
padding: 0 3em;
}
.hero-diensten {
position: relative;
margin-bottom: 9em;
}
.hero-diensten-bg {
position: absolute;
width: 100%;
height: 75%;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(1,44,90,1) 50%, rgba(1,44,90,1) 100%);
}
.image-left-content-holder {
padding: 0 2em;
}
section.hero-diensten .container .row {
margin-bottom: -5em;
padding-top: 5em;
}
}
.hide-mobile{
display: none;
}
@media screen and (min-width: 64.06em){ .hide-desktop{
display: none;
}
.hide-mobile{
display: block;
}
.flex-center{
display: flex;
align-items: center;
flex-wrap: wrap;
}
.hero-other-pages-contact-holder {
width: 80%;
}
}
@media screen and (min-width: 86.31em){ }
@media screen and (min-width: 100.06em){ }  
@media screen and (max-width:768px){
img.bg-image-half-img {
display: block;
max-width: 96%;
margin: auto;
}
.hero-cta-holder {
display: none;
}
section.bg-image-half.margin-large .row {
display: flex;
flex-wrap: wrap;
flex-direction: column-reverse;
}
section.bg-image-full .row {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.footer-cta-content-holder {
padding: .1em 1em 0px;
background: var(--primary-color);
color: #fff;
}
.footer-cta-content-holder h3{
color: #fff;
}
.hero-other-pages-ctas a {
display: block;
}
.bg-image-full .row {
width: 96%;
margin: auto;
}
}
.page-id-80 .hero-cta-holder {
display: none;
}
@media screen and (min-width: 768px) and (max-width: 960px){
img.bg-image-half-img {
display: block;
height: auto;
width: 100%;
}
.content-ful-bg {
padding: 1em;
background: #ffffffc4;
margin-top: 4em;
margin-bottom: 4em;
}
section.bg-image-half.margin-large .col-7{
position: relative;
right: 0;
bottom: 30px;
width: 100%;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
.page-id-16 .hero-cta-holder{
display: none;
}
@media screen and (min-width: 1024px) and (max-width: 1280px){
.main-menu-holder.hide-mobile ul li {
display: inline;
padding: .5em .4em;
position: relative;
font-size: 14px;
}
}
img.mobile-menu-icon {
width: 50px;
}
.mobile-menu-holder.hide-desktop {
text-align: right;
}
img.close-menu-icon {
width: 30px;
fill: red;
}
.mobile-menu {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
z-index: 100;
display: none;
}
img.close-menu-icon {
position: absolute;
right: 30px;
top: 30px;
z-index: 101;
}
ul#menu-mobile-menu {
padding: 0;
margin-top: 4em;
text-align: center;
list-style: none;
}
ul#menu-mobile-menu li {
margin-bottom: 1em;
font-size: 1.5em;
font-weight: bold;
}
ul#menu-mobile-menu a {
text-decoration: none;
color: var(--primary-color);
}
p#breadcrumbs a {
margin-right: 0;
}