@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap');

:root {
    --aqua: #318186;
    --darkyellow: #f0a31b;
    --purple: #661d58;
    --darkblue: #1a1f3b;
    --grey: #b8cacd;
    --lightgrey: #dfe4e4;
    --blue: #008ab9;   
}

.offerte-phone, .offerte-mail{
    float: left;
    clear: left;
    margin: 0 0 10px 0;
}

.offerte-phone a, .offerte-mail a {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 25px;
    color:#000;
    text-decoration: none;
    line-height: 2.7;
}

.option-icon{
    float: left;
    border: none;
    outline: none;
    padding-top: 55px;
    transition: 0.3s;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    border-radius: 15px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center 10px;
    border: 1px solid var(--grey);
    width: 80px;
    height: 80px;
    margin: 0 10px 0 0;
    color: #000;
    text-align: center;
    font-size: 12px;
    line-height: 1;
}

.offerte-phone .option-icon{
    content:"";
    background-image: url(../img/icon-whatsapp.svg); 
}

.offerte-mail .option-icon{
    content:"";
    background-image: url(../img/icon-mail.svg);
}

.homepage .showcase {
    margin-top:50px;
}

.showcase .mod-articlesnews{
    width: 103%;
    float: left;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -1.5%; 
}

.showcase .mod-articlesnews__item{
    width: 22%;
    float: left;
    margin: 0 1.5% 3%;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid var(--lightgrey);
    position: relative;
}

.showcase .field-value img,
.project-legend img {
    width: 50px;
    margin: auto;
    float: none;
    transition: all .3s ease;
    border-radius: 6px !important;
    overflow: hidden;
    -webkit-box-shadow: 0px 6px 12px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 6px 12px -5px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 6px 12px -5px rgba(0, 0, 0, 0.75);
}


.showcase .newsflash-image img {
    width: 100% !important;
    float: left;
    height: auto;
    transition: all .3s ease;
}

.showcase .newsflash-image img:hover {
    transform: scale(1.1);
}

.showcase h3 {
    font-size: 20px;
    margin: 0;
    font-family: 'Bree Serif', serif;
    width: 100%;
    text-align: center;
    float: left;
}

.showcase {
    width: 100%;
    float: left;
    text-align: center;
}

.showcase ul.fields-container {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.showcase span.field-value.project-logo {
    display: block;
    margin: 40px 0 10px;
}

.showcase h3 a {
    text-decoration: none;
    color:#000;
}

 .tags {
    width: 100%;
    float: left;
    padding: 0;
    margin: 10px 0 30px;
}

 .tags li {
    display: inline-block;
    font-size: 14px;
    font-family: 'Bree Serif', serif;
    width: auto !important;
    float: none !important;
    margin: 0 5px 5px 0 !important;
}

 .tags li:before {
    content: "";
    width: 12px;
    height: 12px;
    background: var(--aqua);
    border-radius: 4px;
    display: inline-block;
    margin: -1px 5px;
}

.showcase .extra-titel {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

a.projectlink {
    float: left;
    width: 100%;
    overflow: hidden;
    text-align: center;
    margin: 0 auto;
}

figure.newsflash-image {
    margin: 0;
    float: left;
    width: 100%;
}

.posttext {
    float: left;
    width: 100%;
    margin-top: 40px;
}

.inbegrepen {
    color: #fff;
    float: left;
    clear: left;
    font-family: 'Bree Serif', serif;
    padding: 5px 15px 8px 15px;
    border-radius: 50px;
    font-size: 14px;
}

.options-table {
    margin-bottom: 30px; 
    width: 100%;
    float: left;
}

i[class^=table-icon]::before {
    float: left;
}

.bundel.website .inbegrepen {
    background-color: var(--aqua);
}

.bundel.webshop .inbegrepen {
    background-color: var(--darkyellow);
}

.bundel.webpage .inbegrepen {
    background-color: var(--purple);
}

.bundel.website .meerprijs {
    background-color: var(--grey);
    color: #fff;
    float: left;
    font-family: 'Bree Serif', serif;
    padding: 5px 15px 8px 15px;
    border-radius: 50px;
    font-size: 14px;
}

h3:empty {
    display: none; 
}

.flipvisual .wrapper-visitekaartje>div {
    width: calc(100% / 2 - 60px);
    padding: 40px 30px;
    float: left;
    background-color: var(--lightgrey);
    border-radius: 5px;
    
    margin: 30px;
}

.vkaart {
    transform: scale(1) rotateY(720deg);
}

.vkaart img {
    width: 100%;
    height: auto;
}

.flipvisual .front::before {
    content: "";
    position: absolute;
    left: 16%;
    bottom: -1px;
    width: 100%;
    height: 100%;
    background-image: url(../img/flipvisuals/element-logoplaceholder.svg);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 300px;
    z-index: 9;
}

.flipvisual h3 {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 30px;
    line-height: 1;
    float: left !important;
    clear: both;
    margin: 10px 0 0 0;
    color: #fff;
    width: 100%;
    text-align: left;
}

.flipvisual .flip-wrapper {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 100%;
    max-width: 200px;
}

.flipvisual .vkaart.rond .front {
    border-radius: 30px;
}

.flipvisual .flip-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    border-radius: 30px;
}

.flipvisual .flip-cover:not(.bundel .flipvisual .flip-cover)::before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 500px;
    background-image: url(../img/flipvisuals/shade-blue.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: 850px;
    z-index: 99;
    bottom: 0;
}

.flipvisual .vkaart.liggend {
    width: 100%;
    height: 400px;
    margin: auto;
}

body.offset .row1,
.project-item .row1 {
    margin-top: 100px;
}

.visual .card {
    -webkit-box-shadow: 0px 12px 20px -3px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 0px 12px 20px -3px rgba(0, 0, 0, 0.47);
    box-shadow: 0px 12px 20px -3px rgba(0, 0, 0, 0.47);
    background: #fff;
    border-radius: 30px;
    width: 300px;
    margin: auto;
}

.visual:not(.bundel .visual, .visual.clear) {
    margin-top: -52px;
}

.bundel .front {
    padding: 40px 0 0 50px;
}


.pres-background::before {
    content: "";
    width: 100%;
    height: 130px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.pres-background::after {
    content: "";
    width: 100%;
    height: 130px;
    background-image: url(../img/boog.svg);
    background-repeat: no-repeat;
    background-position: bottom center;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 2;
}

.row1.pres .pres-background::before {
    display: none;
}

.row1.pres .pres-wrapper {
    padding: 50px 0 0 0;
}

img.long {
    width: 100% !important;
}

.project-item .item-page {
    width: 100% !important;
    padding: 0 !important;
}

.project-item .item-page img:nth-child(odd) {
    float: left;
}

.project-item .item-page img:nth-child(even) {
    float: right;
}

.project-item .item-page img:not(.project-legend .field-value img) {
    width: calc(100% / 2 - .5px);
    height: auto;
    border-bottom: 0.5px solid #fff;
}

.project-tags {
    font-size: 0px;
    padding: 20px 0 0 0;
}

.project-legend>* {
    float: left;
    clear: left;
}

.project-legend h3 {
    margin: 0;
}

.project-legend .page-header {
    margin-top: 20px;
}

.project-legend .tags li {
    float: left;
    list-style: none;
}

.project-legend .tags {
    padding: 0;
    margin: 0 0 20px;
}

body.bundel .bfClearfix:not(.bfPage-m.bfClearfix) {
    padding: 20px;
    color: #fff;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
}

body.bundel .nonform-control {
    width: 100%;
}

body.bundel .nonform-control::after {
    content: "Ja";
    font-weight: bold;
}

body.bundel button#bfSubmitButton {
    background: var(--darkyellow);
    color: #fff;
    border: 0px;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

body.bundel button#bfSubmitButton {
    background: var(--darkyellow);
}

body.bundeldealer button#bfSubmitButton,
body.pakketwebshop button#bfSubmitButton {
    background: var(--darkblue);
}

body.bundel .bfClearfix input {
    border-radius: 5px;
    border: 0px;
    padding: 10px;
    margin: 10px 5px 5px 0;
}

body.bundel .bfClearfix {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

body.bundel .bfClearfix.row {
    padding: 0 !important;
}

body.bundel .form-label {
    width: 150px;
}

body.bundel h3 {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 30px;
    line-height: 1;
    margin: 10px 0;
    width: 100%;
}

p.aanschafkop {
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    line-height: 1;
    color: #fff;
    margin-bottom: 10px;
    font-family: 'Bree Serif', serif;
    z-index: 1;
    position: relative;
}

p.aanschafuitnodiging {
    font-size: 14px;
    margin: 20px 0;
    color: #fff;
    z-index: 1;
    position: relative;
}

p.aanschafnummer {
    font-family: 'Bree Serif', serif;
    font-size: 30px;
    margin: 0;
    line-height: 1.2;
    z-index: 1;
    position: relative;
    background-color: var(--darkyellow);
    border-radius: 50px;
    float: left;
    padding: 5px 15px 10px;
    color: #fff;
}

.bundel.webshop p.aanschafnummer {
    background-color: var(--aqua);
}

div#toform {
    width: 100%;
    float: left;
    z-index: 9;
    position: relative;
    padding: 20px;
}

div#toform .wrapper {
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 40px;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

.bundel.webpage div#toform .wrapper {
    background-image: url(../img/coffee2.jpg);
}

.bundel.webshop div#toform .wrapper,
.bundel.website div#toform .wrapper {
    background-image: url(../img/coffee.jpg);
}


div#toform .wrapper::after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-color: var(--darkblue);
    opacity: .3;
}

.bundel-prijs span {
    font-size: 40px;
    font-family: 'Bree Serif', serif;
    float: left;
    margin: 10px 0;
    color: #fff;
    padding: 5px 15px 9px 15px;
    border-radius: 50px;
    line-height: 1;
}

.bundel.website .bundel-prijs span {
    background: var(--aqua);
}

.bundel.webpage .bundel-prijs span {
    background: var(--purple);
}

.bundel.webshop .bundel-prijs span {
    background: var(--darkyellow);
}

.pakketwebsite .bundel-prijs span {
    background: var(--aqua);
}

.pakketwebshop .bundel-prijs span {
    background: var(--darkyellow);
}

.content ul.fields-container {
    margin: 0;
    padding: 0;
}

.extra-titel {
    list-style: none;
}

.visual img {
    width: 100%;
    height: auto;
}

.user-txt.strippen .user-container {
    width: 100%;
}

.content-bottom {
    width: 100%;
    float: left;
}

.bundel .visual img {
    width: auto;
    height: 120%;
}

.strip {
    width: 150px;
    height: 150px;
    display: inline-block;
    background-image: url(../img/striptocard.svg);
    background-size: 60px;
    background-repeat: no-repeat;
    background-position: center top 5px;
    padding: 70px 20px 20px;
    border-radius: 10px;
    border: 1px solid var(--lightgrey);
    margin: 10px;
    transition: all .3s ease;
}

.pricetag {
    font-family: 'Bree Serif', serif !important;
    font-weight: normal;
    font-size: 40px;
    line-height: .8;
}

.strip-container a {
    text-decoration: none;
    color: #000;
}

.pr50 .pricetag {
    color: var(--darkyellow);
}

.pr150 .pricetag {
    color: var(--aqua);
}

.pr250 .pricetag {
    color: var(--purple);
}

.minutes {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 2;
}

.strip-container {
    width: 100%;
    float: left;
    display: table;
    text-align: center;
    margin-bottom: 20px;
}

.strip:hover {
    transform: scale(1.2);
}

.row1.pres {
    margin-top: 50px;
}

a.closemenu {
    display: none;
}

.header.no-card.container-parallax {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.togglemenu {
    background-image: url(../img/menu-open.svg);
    background-color: rgb(255, 255, 255);
    background-size: 25px;
    font-size: 0px;
    width: 30px;
    height: 30px;
    float: right;
    background-repeat: no-repeat;
    background-position: center right;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    margin: 10px 0;
    display: none;
}

.menu-popup {
    background-color: var(--darkblue);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 21;
    display: none;
}

.navigation-desktop.card.call {
    float: left;
}

.call a {
    font-size: 22px !important;
    font-family: 'Bree Serif', serif !important;
    margin: 0 !important;
    width: 100%;
    padding: 16px 0;
    float: left;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

header:empty {
    display: none;
}

.anchorlink {
    background: var(--darkyellow);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: bold;
    padding: 5px 15px;
    display: inline-block;
    border-radius: 50px;
    margin: 0 0 20px 0;
}

.scoren .anchorlink {
    background: var(--darkyellow);
}

.scoren .pres-content ul li,
.creatief .pres-content ul li,
.beeld .pres-content ul li {
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center left;
    list-style: none;
    padding: 0 0 0 40px;
}

.web-brainstorm {
    background-image: url(../img/sessies.svg);
}

.web-fo {
    background-image: url(../img/fo.svg);
}

.web-go {
    background-image: url(../img/go.svg);
}

.web-ux {
    background-image: url(../img/ux.svg);
}

.web-story {
    background-image: url(../img/storytelling.svg);
}

.web-in {
    background-image: url(../img/identiteit.svg);
}

.web-dev {
    background-image: url(../img/ontwikkeling.svg);
}

.web-host {
    background-image: url(../img/host.svg);
}

.web-druk {
    background-image: url(../img/drukwerk.svg);
}

.web-her {
    background-image: url(../img/herontwerp.svg);
}

.web-data {
    background-image: url(../img/data.svg);
}

.web-edu {
    background-image: url(../img/edu.svg);
}

.web-con {
    background-image: url(../img/con.svg);
}

.web-ref {
    background-image: url(../img/ref.svg);
}

.web-check {
    background-image: url(../img/icon-check-white.svg);
}

.anchor.right .anchorlink {
    float: left;
}

.anchor.right .card-body {
    width: 50%;
    float: right;
    padding-left: 50px;
}

.anchor.right {
    width: 100% !important;
    float: left;
}

.presentation .anchorlink {
    margin: 0;
}

.product-list li {
    padding: 5px 0 5px 40px;
    background-repeat: no-repeat;
    background-position: left -5px top -1px;
    background-size: 32px;
    line-height: 1.5;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 15px !important;
    background-color: rgb(255 255 255 / 0%) !important;
    list-style: none;
}

.service-list li {
    background-image: url(../img/icon-check-purple.svg);
}

.Blogger .service-list li {
    background-image: url(../img/icon-check-aqua.svg);
}

.Dealer .service-list li {
    background-image: url(../img/icon-check-yellow.svg);
}

.product-list li.icon-website {
    background-image: url(../img/tab-website-active.svg);
}

.product-list li.icon-webshop {
    background-image: url(../img/tab-webshop-active.svg);
}

.product-list li.icon-webpage {
    background-image: url(../img/tab-webpage-active.svg);
}

.product-list li.icon-cms {
    background-image: url(../img/tab-cms-active.svg);
}

.product-list li.icon-logo {
    background-image: url(../img/icon-logos-wit.svg);
}

.product-list li.icon-ads {
    background-image: url(../img/tab-ads-active.svg);
}

.product-list li.icon-print {
    background-image: url(../img/icon-print-wit.svg);
}

.product-list li.icon-brand {
    background-image: url(../img/tab-branding-active.svg);
}

.product-list li.icon-card {
    background-image: url(../img/tab-card-active.svg);
}

.product-list li.icon-check {
    background-image: url(../img/icon-check-white.svg);
}

.strips .product-list li.icon-card {
    background-image: url(../img/icon-card.svg);
}

ul.product-list {
    margin: 0 0 50px 10px;
    padding: 0;
    min-height: 50px;
}

.bundeltitel {
    padding: 70px 0 0 0;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fff;
    width: 60px;
    height: 100px;
    border-radius: 8px;
    text-align: left;
    transition: all .3s ease;
    font-size: 26px;
    font-family: 'Bree Serif', serif;  
}

.bundeltxt {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 18px;
    color: #fff;
    padding: 10px 0 20px;
}

body.bundel .bundeltitel {
    transform: scale(1);
}

.Starter .bundeltitel {
    background-image: url(../img/bi-website.svg);
}

.Blogger .bundeltitel {
    background-image: url(../img/bi-webpage.svg);
}

.Dealer .bundeltitel {
    background-image: url(../img/bi-webshop.svg);
}

.bundels li:not(li.product-list)::after {
    background-position: bottom right;
    background-size: 130%;
}

body.bundel .bundels li:not(ul.product-list li) {
    width: 100%;
    margin: 0;
}

body.bundel .bundels li:not(li.product-list)::after {
    background-size: 80%;
}

li.Starter .wrapper::after {
    background-image: url(../img/bundel-website.png);
}

li.Dealer .wrapper::after {
    background-image: url(../img/bundel-webshop.png);
}

li.Blogger .wrapper::after {
    background-image: url(../img/bundel-bundel.png);
}


li:hover .bundeltitel:not(body.bundel li:hover .bundeltitel) {
    transform: scale(1);
}

.bundels li .wrapper {
    line-height: unset !important;
    background-color: var(--darkblue);
    overflow: hidden;
    border-radius: 30px;
    width: 100%;
    position: relative;
    top: 0;
    padding: 30px 40px 0 40px;
    height: 100%;
    transition: top .5s ease;
}

.bundelprijs {
    font-family: 'Bree Serif', serif;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom left;
    width: 300px;
    float: left;
    height: 150px;
    font-size: 40px;
    color: #fff;
    padding: 85px 30px 0 30px;
    position: absolute;
    bottom: -1px;
    left: 50%;
    margin-left: -150px;
    text-align: center;
}

.Starter .bundelprijs {
    background-image: url(../img/logo-placeholder-aqua.svg);
}

.Blogger .bundelprijs {
    background-image: url(../img/logo-placeholder-purple.svg);
}

.Dealer .bundelprijs {
    background-image: url(../img/logo-placeholder-yellow.svg);
}

.twv {
    font-family: 'Bree Serif', serif;
    width: 200px;
    float: left;
    height: 75px;
    font-size: 16px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -100px;
    text-align: center;
}

body.bundel .bundelprijs,
body.bundel .twv {
    z-index: 9;
}

.bundels ul:not(ul.product-list, ul.usp) {
    width: 100%;
    float: left;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bundels li:not(ul.product-list li, .usp li) {
    width: calc(100% / 3);
    float: left;
    padding: 20px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    border-radius: 30px;
    transition: top .5s ease;
    cursor: pointer;
    top: 0;
}

.usp li {
    font-family: 'Bree Serif', serif;
    font-size: 16px;
    border: 1px solid var(--grey);
    padding: 10px 20px 10px 45px !important;
    margin: 5px 2.5px;
    list-style: none;
    border-radius: 50px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center left 10px;
}

ul.usp {
    width: 100%;
    float: left;
    padding: 0; 
}

li.ontwerp {
    background-image: url(../img/usp-design.svg);
}
li.uitbreidbaar {
    background-image: url(../img/usp-uitbreidbaar.svg);
}
li.doorontwikkeling {
    background-image: url(../img/usp-dooront.svg);
}
li.functies {
    background-image: url(../img/usp-functies.svg);
}
li.ervaring {
    background-image: url(../img/usp-ervaring.svg);
}
li.creeer {
    background-image: url(../img/usp-creeer.svg);
}
li.hosting {
    background-image: url(../img/usp-hosting.svg);
}
li.seov {
    background-image: url(../img/usp-seo.svg);
}

.content-side .bundels.combi {
    margin: 0;
    width: 400px;
}

.bundels a {
    width: 100%;
    position: relative;
    z-index: 2;
    text-decoration: none;
    padding-bottom: 70px;
    display: block;
    height: 100%;
}

.bundels.combi {
    width: 80%;
    margin: auto;
    display: table;
}

p.soon {
    background: var(--lightgrey);
    padding: 20px;
    border-radius: 10px;
    font-weight: bold;
}

.bundels.webpakketten {
    width: 540px;
    margin: auto;
    display: table;
}

.bundels li .wrapper:after {
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    position: absolute;
    height: 100%;
    z-index: 1;
    opacity: .3;
    background-position: center top;
    background-size: cover;
}

.bundels li:hover .wrapper:not(body.bundel .bundels li:hover .wrapper) {
    top: -30px;
}

.bundels li:hover .wrapper:not(body.bundel .bundels li:hover .wrapper) {
    -webkit-box-shadow: 0px 5px 19px -2px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0px 5px 19px -2px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 5px 19px -2px rgba(0, 0, 0, 0.40);
}

.user-container {
    width: 100%;
    margin: auto;
    text-align: center;
}

.diensten a {
    text-align: center;
    width: 100%;
}

.diensten {
    width: 100%;
    float: left;
    margin-bottom: 90px;
}

.diensten ul {
    width: calc(100% + 40px);
    float: left;
    padding: 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: -20px;
}

.diensten ul li {
    float: left;
    padding: 0 0 0 30px;
    width: calc(100% / 4 - 40px);
    padding: 20px;
    margin: 20px;
    list-style: none;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    border: 1px solid var(--lightgrey);
    border-radius: 10px;
}

.diensten h3,
.diensten h3 a {
    width: 100%;
    float: left;
    margin: 0;
    color: #000;
    font-size: 20px;
    text-decoration: none;
    text-align: center;
}

.diensten [class^="icon-"] {
    width: 90px;
    height: 90px;
    margin: auto;
}

.service-icon {
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

a.more {
    color: #fff;
    padding: 10px 20px 15px 20px;
    font-size: 20px;
    text-decoration: none;
    border-radius: 300px;
    transition: all .3s;
    background: #000;
    text-transform: lowercase;
    line-height: 1;
    width: auto !important;
    display: inline-block;
    font-family: 'Bree Serif', serif;
}

a.more:hover {
    transform: scale(1.1);
}

.icon-gv {
    background-image: url(../img/icon-grafisch.svg);
}

.icon-iv {
    background-image: url(../img/icon-internet.svg);
}

.icon-bp {
    background-image: url(../img/icon-beeldproductie.svg);
}

.icon-service {
    background-image: url(../img/icon-service.svg);
}

p,
.item-page li:not(.tags li),
.single_view li {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 2;
}

body {
    margin: 0;
    padding: 0;
    background: #282828;
    min-width: 320px;
    width: 100%;
}

.main-container {
    width: 1920px;
    margin: auto;
    background: #fff;
    display: grid;
    position: relative;
    z-index: 1;
}

header {
    width: 100%;
    height: 1100px;
    position: relative;
    background: var(--darkblue);
    overflow-y: hidden;
}

.nav-container {
    width: 1920px;
    padding: 25px 7%;
    position: fixed;
    top: 0;
    z-index: 20;
    margin: auto;
    visibility: visible;
    opacity: 1;
    background: #fff;
    height: 150px;
    -webkit-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.54);
    -moz-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.54);
    box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.54);
}

.nav-container::before {
    top: -60px;
}

.menu-exit {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 50%;
    margin-right: -15px;
    top: 60px;
    background-image: url(../img/menu-close.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 9;
}

.logo-wrapper {
    transition: all .3s ease;
    float: left;
}

.scrolled .logo-wrapper {
    transform: scale(.8);
}

nav.navigation.no-card.menu-social {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.logo {
    width: 250px;
    height: 60px;
    background-image: url(../img/logo-visualfield-compact.svg), linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top left;
    transition: all .3s ease;
    float: left;
    margin-left: -25px;
}

nav.navigation-desktop {
    float: left;
    clear: left;
}

nav.navigation-desktop ul {
    padding: 0;
    margin: 20px 0;
    float: left;
}

nav.navigation-desktop ul ul::after {
    content: "";
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    margin-top: -30px;
    z-index: -1;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.24);
}

nav.navigation-desktop ul ul {
    position: absolute;
    width: 300px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
    padding: 40px 50px 80px 50px;
    transition: all .3s ease-out;
    opacity: 0;
    visibility: hidden;
    margin: -50px 0 0 0;
}

li.deeper ul {
    display: none;
}

li.deeper.active ul {
    display: block;
}

nav.navigation-desktop li:hover>ul {
    opacity: 1;
    visibility: visible;
    padding: 130px 50px 80px 50px;
}

nav.navigation-desktop ul ul::before {
    content: "";
    width: 1px;
    background-color: var(--grey);
    position: absolute;
    margin: 55px 0 0 14px;
    z-index: 0;
    left: 50px;
}

nav.navigation-desktop ul ul.items7::before {
    height: 140px;
}

nav.navigation-desktop ul ul.items6::before {
    height: 115px;
}

nav.navigation-desktop ul ul.items5::before {
    height: 85px;
}

nav.navigation-desktop ul ul.items7::after {
    height: 280px;
}

nav.navigation-desktop ul ul.items6::after {
    height: 255px;
}

nav.navigation-desktop ul ul.items5::after {
    height: 230px;
}

nav.navigation-desktop ul ul li {
    float: left;
    clear: left;
    margin: 5px 0;
}

li.level-2:not(li.level-2:first-child) {
    padding-left: 10px;
}

li.level-2 a::before {
    content: "";
    width: 5px;
    height: 5px;
    background-color: #fff;
    float: left;
    border-radius: 50%;
    border: 2px solid var(--grey);
    margin: 3px 10px 0 0;
    z-index: 1;
    position: relative;
    transition: all .3s ease;
}

li.level-2 a.mPS2id-highlight::before {
    border: 2px solid #000;
}

li.level-2:hover a::after {
    content: "";
    background-image: url(../img/icon-point.svg);
    position: absolute;
    width: 25px;
    top: -5pxpx;
    height: 25px;
    background-color: #fff;
    z-index: 1;
    margin: -5px 0 0 -28px;
    left: 0;
}

span.mod-menu__heading.nav-header {
    color: #000;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0;
    float: left;
}

nav.navigation-desktop li.active>a::before {
    content: "";
    width: 60px;
    height: 60px;
    background-image: url(../img/menu-indicator.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    border-radius: 4px;
    transition: all .3s ease-out;
    margin-top: 0 5px 0 0;
    position: absolute;
    margin-top: 15px;
    z-index: -1;
    opacity: .6;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

nav.navigation-desktop li.deeper.active>a::after {
    content: "";
    transition: all .3s ease-out;
    margin: 0 5px 2px 7px;
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

nav.navigation-desktop a {
    color: #000;
    font-size: 15px;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    line-height: 1.1;
    position: relative;
    z-index: 1;
}

nav.navigation-desktop .active>a {
    font-weight: bold;
}

.nav-container.open nav.navigation-desktop {
    opacity: 1;
}

nav.navigation-desktop li {
    float: left;
    list-style: none;
}

li.level-1.active {
    padding: 0 0 50px 0;
}

.seperator {
    float: left;
    margin: 0 20px;
    width: 1px;
    background: var(--grey);
    height: 20px;
}

.menu-social ul {
    text-align: center;
    padding: 0;
    margin: 25px 0;
}

.wrapper-parallax,
header {
    height: 900px;
    max-height: 1060px;
}

.wrapper-parallax {
    float: left;
    overflow: hidden;
    width: 100%;
    position: relative;
}

@-webkit-keyframes txt {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    40% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes txt {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    40% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-o-keyframes txt {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    40% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes txt {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    40% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.verbluffen {
    opacity: 0;
    animation-name: txt;
    animation-duration: .5s;
    animation-delay: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    color: #fff;
    font-weight: normal;
    font-size: 100px;
    line-height: 1;
    text-align: right;
    margin: 50px 0;
    text-shadow: 4px 8px 8px rgba(0, 0, 0, 0.36);
    font-family: 'Bree Serif', serif !important;
}

img.aqua {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    margin-left: 0;
}

img.purple {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -180px;
    margin-left: 0;
}

#parallax-bg1,
#parallax-bg2,
#parallax-bg3 {
    width: 100%;
    height: 1060px;
    position: absolute;
    top: 0;
    left: 0;
}

#parallax-bg1 {
    z-index: 1;
}

#parallax-bg2 {
    z-index: 3;
}

#parallax-bg3 {
    z-index: 2;
}

img.profilepic1 {
    width: 100%;
    float: left;
}



@keyframes aqua {
    0% {
        opacity: 0;
        bottom: -100px;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        bottom: 0;
        transform: scale(1);
    }
}

.aqua {
    opacity: 0;
    animation-name: aqua;
    animation-duration: .5s;
    animation-delay: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    width: 100%;
    height: 1060px;
}



@keyframes purple {
    0% {
        opacity: 0;
        bottom: -280px;
        transform: scale(1.2);
    }

    100% {
        opacity: 1;
        bottom: -180;
        transform: scale(1);
    }
}

.purple {
    opacity: 0;
    animation-name: purple;
    animation-duration: .5s;
    animation-delay: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    width: 100%;
    height: 1060px;
}

.wrapper-bg2 {
    width: 650px;
    float: right;
    margin: 200px;
}

@-webkit-keyframes profile {
    0% {
        opacity: 0;
        margin-top: 400px;
    }

    100% {
        opacity: 1;
        margin-top: 50px;
    }
}

@-moz-keyframes profile {
    0% {
        opacity: 0;
        margin-top: 400px;
    }

    100% {
        opacity: 1;
        margin-top: 50px;
    }
}

@-o-keyframes profile {
    0% {
        opacity: 0;
        margin-top: 400px;
    }

    100% {
        opacity: 1;
        margin-top: 50px;
    }
}

@keyframes profile {
    0% {
        opacity: 0;
        transform: scale(.8);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.wrapper-bg3 {
    opacity: 0;
    animation-name: profile;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    width: 1920px;
    height: 650px;
    margin-left: -1200px;
    margin-top: 100px;
    left: 50%;
    position: relative;
}

@-webkit-keyframes logo {
    0% {
        opacity: 0;
        margin-top: 200px;
    }

    50% {
        opacity: 1;
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        margin-top: 30px;
    }
}

@-moz-keyframes logo {
    0% {
        opacity: 0;
        margin-top: 200px;
    }

    50% {
        opacity: 1;
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        margin-top: 30px;
    }
}

@-o-keyframes logo {
    0% {
        opacity: 0;
        margin-top: 200px;
    }

    50% {
        opacity: 1;
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        margin-top: 30px;
    }
}

@keyframes logo {
    0% {
        opacity: 0;
        margin-top: 200px;
    }

    50% {
        opacity: 1;
        margin-top: 0px;
    }

    100% {
        opacity: 1;
        margin-top: 30px;
    }
}

img.logovf {
    width: 40%;
    margin: auto;
    display: block;
    opacity: 0;
    animation-name: logo;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

.logo-placeholder {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 9;
    width: calc(216px * 2.3);
    height: calc(71px * 2.3);
    transform: translate(-50%, 0);
}

@-webkit-keyframes logoplaceholder {
    0% {
        transform: scale(1, 0);
        bottom: -1px;
    }

    50% {
        transform: scale(1, 1.5);
        bottom: -1px;
    }

    99% {
        transform: scale(1, 1);
        bottom: -1px;
    }

    100% {
        transform: scale(1, 1);
        bottom: 0px;
    }
}

@-moz-keyframes logoplaceholder {
    0% {
        transform: scale(1, 0);
        bottom: -1px;
    }

    50% {
        transform: scale(1, 1.5);
        bottom: -1px;
    }

    99% {
        transform: scale(1, 1);
        bottom: -1px;
    }

    100% {
        transform: scale(1, 1);
        bottom: 0px;
    }
}

@-o-keyframes logoplaceholder {
    0% {
        transform: scale(1, 0);
        bottom: -1px;
    }

    50% {
        transform: scale(1, 1.5);
        bottom: -1px;
    }

    99% {
        transform: scale(1, 1);
        bottom: -1px;
    }

    100% {
        transform: scale(1, 1);
        bottom: 0px;
    }
}

@keyframes logoplaceholder {
    0% {
        transform: scale(1, 0);
        bottom: -1px;
    }

    50% {
        transform: scale(1, 1.5);
        bottom: -1px;
    }

    99% {
        transform: scale(1, 1);
        bottom: -1px;
    }

    100% {
        transform: scale(1, 1);
        bottom: 0px;
    }
}

.logo-bg {
    position: absolute;
    bottom: 0;
    width: 500px;
    height: calc(71px * 2.3);
    background-image: url(../img/logo-placeholder.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    animation-name: logoplaceholder;
    animation-duration: .5s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
    z-index: 9;
    left: 50%;
    transform: scale(1, 0);
    transform-origin: 50% 100%;
    margin-left: -250px;
    margin-bottom: -1px;
}

@-webkit-keyframes call {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    50% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-moz-keyframes call {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    50% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-o-keyframes call {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    50% {
        opacity: 1;
        transform: scale(.8);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes call {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.project-logo .detail_data {
    padding: 30px 0 10px;
}

.single_view.left,
.com-content-article {
    float: left;
    width: 50%;
    padding-right: 50px;
    margin-bottom: 0px;
}

.single_view.right {
    float: right;
    width: 50%;
    padding-left: 50px;
    text-align: left;
}

div[class^="row"]>.right,
.content-side {
    float: right;
    width: 50%;
}

.single_view .com-content-article {
    clear: left;
    float: left;
}

.right h3.newstitle,
.right h3 {
    float: right;
}

.single_view ul,
.single_view ol {
    margin: 0;
    padding: 0;
    float: left;
}

h1,
h2 {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 40px;
    line-height: 1;
    margin: 0;
}

h3,
.offset h2 {
    font-size: 22px;
    position: relative;
    font-family: 'Roboto';
    font-weight: 500;
    width: 300px;
    line-height: 1.3;
    margin: 20px 0 0;
}

p.warning {
    font-size: 20px;
    display: inline-block;
    margin: 10px 0 0 0;
    font-weight: bold;
    line-height: 1.2;
}

p.subwarning {
    font-size: 14px;
    margin: 10px 0 20px;
}

.content-seperator {
    margin: 20px 0;
    float: left;
    width: 100%;
}

p.parhead {
    font-family: 'Roboto', sans-serif;
    line-height: 1.1;
    margin: 0;
    font-size: 20px;
    font-weight: bold;
}

h4:not(.footer h4) {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 30px;
    line-height: 1;
    margin: 20px 0 10px;
    display: inline-block;
    border-radius: 50px;
    padding: 0;
}

.bundel.website .clr {
    color: var(--aqua);
}

.bundel.webshop .clr {
    color: var(--darkyellow);
}

.bundel.combi .clr {
    color: var(--purple);
}

ul#content li {
    list-style: none;
}

ul#content {
    border: 1px solid var(--lightgrey);
    border-radius: 15px;
    padding: 30px;
    position: relative;
    margin: 30px 0 10px;
    display: inline-block;
    width: 100%;
}

ul#content span {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 20px;
    position: absolute;
    background: #fff;
    top: -25px;
    left: 30px;
    padding: 10px;
}

ul#content.functies li {
    width: calc(100% / 2);
    float: left;
}

ul#content.biglist li {
    width: 100%;
    float: left;
    padding: 20px 10px;
}

ul#content.biglist li i[class^="table-icon"] {
    float: left;
    width: 80px;
    height: 80px;
    background-color: var(--grey);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;
    border-radius: 15px;
    position: relative;
}

ul#content.biglist.logofamily li i[class^="table-icon"] {
    background-color: #fff;
    border: 1px solid var(--aqua);
}


ul#content.biglist li.active i::before {
    content: "";
    width: 40px;
    height: 40px;
    background-image: url(../img/icon-check-aqua.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    right: -15px;
    top: -15px;
    position: absolute;
}

hr {
    margin: 50px 0px;
}

ul.content-list li {
    list-style: none;
    padding-left: 40px;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: top left;
    color: #fff;
    line-height: 2.2;
}

ul.content-list {
    padding: 0;
    margin: 0;
}

li.design {
    background-image: url(../img/go.svg);
}

li.uiux {
    background-image: url(../img/ux.svg);
}

li.impbrand {
    background-image: url(../img/identiteit.svg);
}

li.freeservice {
    background-image: url(../img/tab-bedrijfsite-active.svg);
}

li.host {
    background-image: url(../img/host.svg);
}

li.feedback {
    background-image: url(../img/tab-forum-active.svg);
}

li.afterpay {
    background-image: url(../img/tab-donatiesite-active.svg);
}

li.print {
    background-image: url(../img/tab-visitekaartje-active.svg);
}


ul#content li p {
    margin: 0;
    float: left;
    width: calc(100% - 90px);
}

h5 {
    width: 100%;
    float: left;
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 18px;
    margin: 20px 0 10px 0;
    border-bottom: 1px dashed var(--grey);
    padding-bottom: 10px;
}

.bundel.webpage h5 {
    color: var(--purple);
}

.bundel.website h5 {
    color: var(--aqua);
}

.bundel.webshop h5 {
    color: var(--darkyellow);
}

ul#content.benodigdheden li p {
    width: calc(100% - 30px);
}

.table-icon-viewpage {
    background-image: url(../img/viewpage.svg);
}

.table-icon-onepageview {
    background-image: url(../img/onepage.svg);
}

.table-icon-viewblog {
    background-image: url(../img/viewblog.svg);
}

.table-icon-viewshop {
    background-image: url(../img/viewshop.svg);
}

.table-icon-card3d {
    background-image: url(../img/3d.svg);
}

.table-icon-cardcorner {
    background-image: url(../img/hoeken.svg);
}

.table-icon-cardpaper {
    background-image: url(../img/paper.svg);
}

.table-icon-cardglossy {
    background-image: url(../img/glossy.svg);
}

.table-icon-logocoop {
    background-image: url(../img/logocoop.jpg);
}

.table-icon-logonegatief {
    background-image: url(../img/logonegative.jpg);
}

.table-icon-logostempel {
    background-image: url(../img/logostamp.jpg);
}

.table-icon-logoicoon {
    background-image: url(../img/logoicon.jpg);
}


.com-content-article__body {
    float: left;
    width: 100%;
}

.single_view p {
    clear: left;
    float: left;
}

div[class^="row"],
.content,
.content-add {
    padding: 150px 15% 100px 15%;
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.user2.card.presentation.voordelen {
    width: 100%;
    height: auto;
    float: left;
}

div[class^="row"]:empty,
.content:empty {
    padding: 0;
}

.content-add {
    padding: 0px;
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.pres-background {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url(../img/bg-boog-3.svg);
    background-repeat: no-repeat;
    background-size: 1800px;
    background-position: bottom -30px center;
}

.scoren .pres-background {
    background-color: var(--purple);
}

.creatief .pres-background {
    background-color: var(--aqua);
}

.voordelen .pres-background {
    background-color: var(--purple);
}

.beeld .pres-background {
    background-color: var(--purple);
}

.werkwijze .pres-background {
    background-color: var(--aqua);
}

div#communiceermetbeeld {
    background: var(--darkyellow);
}

.pres {
    overflow: hidden;
    height: 700px;
}

.pres.prestop {
    height: 800px;
}

.row1.pres::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: all .3s ease;
    animation-name: header-fade;
    animation-delay: .5s;
    animation-duration: 1s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@-webkit-keyframes header-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes header-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-o-keyframes header-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes header-fade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.pres-background img {
    width: 100%;
    height: 100%;
    float: left;
}

.bg0 img {
    height: auto;
    width: 110%;
}

.pres-background>div {
    position: absolute;
}

.bg0 {
    opacity: 0.1;
    width: 50%;
    z-index: -2;
    height: 100%;
}

.bg1 {
    width: 50%;
    height: 100%;
    right: 0;
    bottom: 0;
}

.bg1 img {
    display: none;
}

.werkwijze .bg1 {
    background-color: var(--purple);
}

.voordelen .bg1 {
    background-color: var(--darkyellow);
}

.creatief .bg1 {
    background-color: var(--aqua);
}

.scoren .bg1 {
    background-color: var(--darkyellow);
}

.beeld .bg1 {
    background-color: var(--purple);
}


.bg2 {
    width: 1300px;
    left: 50%;
    margin-left: -650px;
    z-index: 2;
}

.bg3 {
    width: 50%;
    height: 100%;
    background: var(--purple);
    right: 0;
    z-index: -1;
}

.werkwijze .bg3 {
    background: var(--aqua);
}

.pres-wrapper {
    padding: 100px 0 0 0;
    width: 100%;
    float: left;
}

.pres-wrapper>* {
    float: right;
    clear: right;
}

.pres-content {
    position: absolute;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 1.8;
    color: #fff;
    margin-top: 50px;
}

.pres-content ul,
.pres-content ol {
    margin: 0;
    padding: 0;
}

.img-title {
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    font-size: 70px;
    line-height: 1;
    color: #fff;
    width: 400px;
    margin: 10px 0;
    text-align: right;
}

.pres-wrapper h3 {
    text-align: right;
}

.voordelen .pres-content ul li {
    list-style: none;
    background-image: url(../img/icon-check-aqua.svg), linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    padding: 0 0 0 35px;
}

ul.strippenkaart-list li {
    list-style: none;
    background-image: url(../img/icon-check.svg), linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px;
    padding: 0 0 0 30px;
    line-height: 2;
}

.footer ul {
    width: 100%;
    display: table;
    text-align: center;
    margin: 50px 0;
    padding: 0;
}

.footer li {
    list-style: none;
    display: inline-block;
    float: none;
    margin: 0 10px;
}

.footer h4 {
    float: right;
    margin: 0;
    font-family: 'Bree Serif', serif;
    font-weight: normal;
    color: #fff;
    font-size: 40px;
    line-height: 1;
}

.footer h3 {
    float: right;
    width: 200px;
    margin: 20px 0;
    font-family: roboto;
    font-weight: normal;
    color: #fff;
    font-size: 20px;
    line-height: 1.2;
}

.footer a {
    color: #000;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    padding: 5px 0 5px 35px;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px;
    float: left;
}

a.whatsapp {
    font-size: 20px;
    background-image: url(../img/icon-whatsapp.svg), linear-gradient(transparent, transparent);
    font-family: 'Bree Serif', serif;
    line-height: .6;
    padding: 10px 0 10px 35px;
}

a.mail {
    background-image: url(../img/icon-mail.svg), linear-gradient(transparent, transparent);
}

a.facebook {
    background-image: url(../img/icon-facebook.svg), linear-gradient(transparent, transparent);
}

a.instagram {
    background-image: url(../img/icon-instagram.svg), linear-gradient(transparent, transparent);
}

.ft-content {
    position: relative;
    z-index: 4;
    width: 300px;
    padding-top: 20px;
    float: left;
    left: 50%;
    margin-left: -450px;
    margin-top: 210px;
}

.ft-wrapper {
    float: left;
    width: 100%;
    position: relative;
}

.ft-background {
    background-image: url(../img/footer-bg.svg);
    background-color: var(--darkblue);
    background-repeat: no-repeat;
    background-size: 1920px;
    background-position: bottom -90px right -200px;
    position: absolute;
    width: 100%;
    height: 500px;
    margin-top: 100px;
}

.ft-background>* {
    position: absolute;
}

.ft-background::before {
    content: "";
    width: calc(100% + 100px);
    height: 200px;
    background-color: #fff;
    position: absolute;
    top: -120px;
    left: -90px;
    z-index: 3;
}

img.ft-bg1 {
    position: absolute;
    width: 1300px;
    z-index: 3;
    top: -100px;
    left: 50%;
    margin-left: -450px;
}

img.ft-bg2 {
    position: absolute;
    width: 800px;
    z-index: 2;
    right: 30%;
    top: -20px;
    transform: rotate(35deg);
}

img.ft-bg3 {
    position: absolute;
    width: 800px;
    z-index: 1;
    right: 10%;
    top: 0;
}

.ft-nav {
    width: 100%;
    height: 140px;
    bottom: 0;
    position: absolute;
    background: #fff;
    z-index: 4;
}

.container-popup {
    width: 1920px;
    margin: auto;
    height: 100%;
    position: relative;
}

@keyframes overlay {
    0% {
        opacity: 0;
        z-index: 0;
    }

    1% {
        opacity: 0;
        z-index: 9;
    }

    50% {
        opacity: 1;
        z-index: 9;
    }

    100% {
        opacity: 1;
        z-index: 9;
    }
}

@keyframes overlay-out {
    0% {
        opacity: 1;
        z-index: 9;
    }

    1% {
        opacity: 1;
        z-index: 9;
    }

    50% {
        opacity: 0;
        z-index: 9;
    }

    100% {
        opacity: 0;
        z-index: 0;
    }
}

.wrapper-popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    opacity: 0;
    left: 0;
}

.wrapper-popup.firstrun {
    opacity: 0 !Important;
    animation: unset !important;
}

@keyframes popup {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes popup-out {
    0% {
        opacity: 1;

    }

    100% {
        opacity: 0;

    }
}

.wrapper-popup.active .popup,
.wrapper-popup .popup {
    width: 100%;
    height: 100%;
}

.wrapper-popup.active {
    animation: overlay 0.5s forwards;
    background-color: rgb(52 70 73 / 90%);
}

.wrapper-popup {
    animation: overlay-out 0.5s forwards;
    background-color: rgb(52 70 73 / 90%);
}

.wrapper-popup.active .popup {
    position: absolute;
    text-align: center;
    animation: popup 1s forwards;
    opacity: 1;
}

.wrapper-popup .popup {
    position: absolute;
    text-align: center;
    animation: popup-out 1s forwards;
    opacity: 0;
}

.popup iframe {
    width: 100%;
    height: 100%;
    border: 0px;
    overflow-x: hidden;
    border-radius: 5px;
}

a.close {
    position: absolute;
    left: -50px;
    top: 10px;
    opacity: 0;
    background-image: url(../img/close-cross.svg), linear-gradient(transparent, transparent);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 35px;
    color: #000;
    text-decoration: none;
    padding: 20px;
    cursor: pointer;
    font-size: 0;
    text-transform: lowercase;
    transition: all .3s;
    font-weight: bold;
    animation-name: closebut;
    animation-duration: .5s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}

@keyframes closebut {
    0% {
        left: -50px;
        opacity: 0;
    }

    100% {
        left: 10px;
        opacity: 1;
    }
}

footer.footer {
    width: 100%;
    height: 600px;
    float: left;
    overflow: hidden;
    position: relative;
}

img.ft-logo {
    width: 500px;
    left: 50%;
    z-index: 4;
    transform: translate(-50%, 130px);
}


div#clientlogos {
    width: 100%;
    float: left;
}

div#clientlogos {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 30px;
}

img.clientlogo {
    display: inline-block;
    padding: 0px 0px 40px 0;
    vertical-align: center;
    width: 16%;
}

ol {
    list-style: none;
    counter-reset: counter;
    padding: 0;
    margin: 0;
}

ol li {
    counter-increment: counter;
    clear: left;
    float: left;
    font-weight: bold;
    margin: 2px 0;
}

ol li::before {
    content: counter(counter);
    color: #fff;
    font-weight: normal;
    background: var(--aqua);
    border-radius: 50px;
    padding: 6px;
    margin-right: 10px;
    float: left;
    font-family: 'Bree Serif', serif;
    width: 15px;
    height: 15px;
    font-size: 18px;
    text-align: center;
    line-height: .7;
}

.pres-content ol li {
    font-weight: normal;
}

.pres-content ol li::before {
    background: var(--purple);
}

.options-table.left {
    width: 100%;
    float: left;
}

i[class^="table-icon"] {
    float: left;
    margin: 0 10px 0 0;
    width: 15px;
    height: 15px;
}

.options-table p {
    float: left;
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
    width: calc(100% - 25px);
}

.options-table ul {
    padding: 0;
    margin: 0;
    float: left;
    width: 100%;
}

.options-table li {
    padding: 10px 0;
    float: left;
    position: relative;
    list-style: none;
    width: 100%;
}

.accordion-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.22);
}

.accordion-header {
    color: #000;
}

.accordion-item .accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.accordion-item .accordion-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.accordion-item .accordion-item .accordion-header {
    background: #f1f1f1;
    color: #353535;
}

.accordion-item .accordion-item .accordion-header {
    background: #f1f1f1;
    color: #353535;
}

.accordion-body {
    color: #353535;
}

.mp-level .mp-level {
    background: #33353a;
}

.mp-level .mp-level .mp-level {
    background: #424449;
}

.box-help::before {
    background: #171F2B;
}

.accordion-header {
    background-image: url(../img/icon-logo.svg);
}

.module-icon#webshop {
    background-image: url(../img/icon-catalogus-black.svg);
}

.tab {
    overflow: hidden;
    float: left;
    width: 100%;
}

.tab div {
    float: left;
    border: none;
    outline: none;
    padding-top: 55px;
    transition: 0.3s;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    border-radius: 15px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center 10px;
    border: 1px solid var(--grey);
    width: 80px;
    height: 80px;
    margin: 0 10px 10px 0;
    color: #000;
    text-align: center;
    font-size: 12px;
}

.tabcontent {
    display: none;
    animation: fadeEffect 1s;
    overflow: hidden;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.tab div.tab-website {
    background-image: url(../img/tab-website.svg);
}

.tab div.tab-branding {
    background-image: url(../img/tab-branding.svg);
}

.tab div.tab-brand {
    background-image: url(../img/tab-brand.svg);
}

.tab div.tab-logo {
    background-image: url(../img/tab-logo.svg);
}

.tab div.tab-letter {
    background-image: url(../img/tab-letter.svg);
}

.tab div.tab-cms {
    background-image: url(../img/tab-cms.svg);
}

.tab div.tab-webshop {
    background-image: url(../img/tab-webshop.svg);
}

.tab div.tab-webpage {
    background-image: url(../img/tab-webpage.svg);
}

.tab div.tab-portfolio {
    background-image: url(../img/tab-portfolio.svg);
}

.tab div.tab-intranet {
    background-image: url(../img/tab-intranet.svg);
}

.tab div.tab-responsive {
    background-image: url(../img/tab-responsive.svg);
}

.tab div.tab-bedrijfsite {
    background-image: url(../img/tab-bedrijfsite.svg);
}

.tab div.tab-forum {
    background-image: url(../img/tab-forum.svg);
}

.tab div.tab-donatiesite {
    background-image: url(../img/tab-donatiesite.svg);
}

.tab div.tab-design {
    background-image: url(../img/tab-design.svg);
}

.tab div.tab-project {
    background-image: url(../img/tab-project.svg);
}

.tab div.tab-nieuws {
    background-image: url(../img/tab-nieuws.svg);
}

.tab div.tab-blog {
    background-image: url(../img/tab-blog.svg);
}

.tab div.active.tab-website {
    background-image: url(../img/tab-website-active.svg);
}

.tab div.active.tab-webshop {
    background-image: url(../img/tab-webshop-active.svg);
}

.tab div.active.tab-portfolio {
    background-image: url(../img/tab-portfolio-active.svg);
}

.tab div.active.tab-bedrijfsite {
    background-image: url(../img/tab-bedrijfsite-active.svg);
}

.tab div.active.tab-forum {
    background-image: url(../img/tab-forum-active.svg);
}

.tab div.active.tab-donatiesite {
    background-image: url(../img/tab-donatiesite-active.svg);
}

.tab div.active.tab-project {
    background-image: url(../img/tab-project-active.svg);
}

.tab div.active.tab-nieuws {
    background-image: url(../img/tab-nieuws-active.svg);
}

.tab div.active.tab-blog {
    background-image: url(../img/tab-blog-active.svg);
}

.tab div.tab-visitekaartje {
    background-image: url(../img/tab-visitekaartje.svg);
}

.tab div.tab-briefpapier {
    background-image: url(../img/tab-briefpapier.svg);
}

.tab div.tab-folder {
    background-image: url(../img/tab-folder.svg);
}

.tab div.tab-flyer {
    background-image: url(../img/tab-flyer.svg);
}

.tab div.tab-brochure {
    background-image: url(../img/tab-brochure.svg);
}

.tab div.tab-banner {
    background-image: url(../img/tab-banner.svg);
}

.tab div.tab-reclamebord {
    background-image: url(../img/tab-reclamebord.svg);
}

.tab div.tab-belettering {
    background-image: url(../img/tab-belettering.svg);
}

.tab div.active.tab-visitekaartje {
    background-image: url(../img/tab-visitekaartje-active.svg);
}

.tab div.active.tab-briefpapier {
    background-image: url(../img/tab-briefpapier-active.svg);
}

.tab div.active.tab-folder {
    background-image: url(../img/tab-folder-active.svg);
}

.tab div.active.tab-flyer {
    background-image: url(../img/tab-flyer-active.svg);
}

.tab div.active.tab-brochure {
    background-image: url(../img/tab-brochure-active.svg);
}

.tab div.active.tab-banner {
    background-image: url(../img/tab-banner-active.svg);
}

.tab div.active.tab-reclamebord {
    background-image: url(../img/tab-reclamebord-active.svg);
}

.tab div.active.tab-belettering {
    background-image: url(../img/tab-belettering-active.svg);
}

.tab div.tab-grafiek {
    background-image: url(../img/tab-grafiek.svg);
}

.tab div.tab-illustratie {
    background-image: url(../img/tab-illustratie.svg);
}

.tab div.tab-kaart {
    background-image: url(../img/tab-kaart.svg);
}

.tab div.tab-webbanner {
    background-image: url(../img/tab-webbanner.svg);
}

.tab div.tab-advertentie {
    background-image: url(../img/tab-advertentie.svg);
}

.tab div.tab-animatie {
    background-image: url(../img/tab-animatie.svg);
}

.tab div.active.tab-grafiek {
    background-image: url(../img/tab-grafiek-active.svg);
}

.tab div.active.tab-illustratie {
    background-image: url(../img/tab-illustratie-active.svg);
}

.tab div.active.tab-kaart {
    background-image: url(../img/tab-kaart-active.svg);
}

.tab div.active.tab-webbanner {
    background-image: url(../img/tab-webbanner-active.svg);
}

.tab div.active.tab-advertentie {
    background-image: url(../img/tab-advertentie-active.svg);
}

.tab div.active.tab-animatie {
    background-image: url(../img/tab-animatie-active.svg);
}

.accordion {
    font-size: 1rem;
    width: 100%;
    margin: 0 auto;
    border-radius: 5px;
    float: left;
}

.accordion li {
    list-style: none;
}

.accordion ul {
    padding: 0px;
    margin: 0;
}

.accordion-header {
    padding: 15px 0 15px 40px;
    cursor: pointer;
    font-size: 18px;
    transition: all .3s;
    background-size: 25px;
    background-repeat: no-repeat;
    background-position: center left;
    font-family: 'Bree Serif', serif;
}

.accordion-header:hover {
    position: relative;
    z-index: 5;
}

.accordion-body {
    display: none;
    float: left;
    width: 100%;
}

.accordion-content {
    padding: 20px;
    float: left;
    width: 100%;
}

.accordion-item.active:last-child .accordion-header {
    border-radius: none;
}

.accordion-item>.accordion-header:after {
    content: "";
    float: right;
    position: relative;
    top: 8px;
    transition: .3s all;
    transform: rotate(0deg);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #000;
}

.accordion-item.active>.accordion-header:after {
    transform: rotate(-180deg);
}

.accordion-item {
    float: left;
    clear: left;
    width: 100%;
}

.accordion p {
    float: left;
    width: calc(100% - 25px);
    margin: 0;
}

.accordion li.pro {
    padding: 10px 40px 10px 0;
}

.accordion li.basis {
    padding: 10px 50px 10px 0;
}

.accordion li.plus {
    padding: 10px 40px 10px 0;
}

@media screen and (max-width: 1920px) {

    .main-container,
    .container-popup {
        width: 100%;
        min-width: 320px;
    }
}

@media screen and (max-width: 1680px) {
    .wrapper-bg3 {
        width: 1400px;
        margin-left: -1000px;
    }

    .bundels.combi {
        width: 100%;
        margin: auto;
    }

    .flipvisual img {
        width: 670px;
        height: auto;
    }

    .bg2 {
        width: 1200px;
        margin-left: -600px;
    }

    .wrapper-bg2 {
        width: 500px;
        margin: 150px 10%;
    }

    header h2 {
        font-size: 16px;
    }

    a.number-inner {
        font-size: 30px;
    }

    .verbluffen {
        font-size: 60px;
        margin: 100px 0;
    }

    .nav-container {
        padding: 25px 10%;
    }

    .non-homepage header {
        margin-bottom: 120px;
    }

    nav.navigation-desktop a {
        font-size: 14px;
    }

    .showcase h3 {
        font-size: 18px;
    }

    .wrapper-parallax,
    header {
        height: 650px;
    }

    img.aqua {
        bottom: 100px;
    }

    img.purple {
        bottom: -70px;
    }

    @keyframes aqua {
        0% {
            opacity: 0;
            bottom: 0px;
            transform: scale(1.2);
        }

        100% {
            opacity: 1;
            bottom: 100;
            transform: scale(1);
        }
    }

    .number-inner {
        font-size: 20px;
    }

    @-webkit-keyframes header-txt {
        0% {
            opacity: 0;
            margin-top: 250px;
        }

        100% {
            opacity: 1;
            margin-top: 200px;
        }
    }

    @-moz-keyframes header-txt {
        0% {
            opacity: 0;
            margin-top: 250px;
        }

        100% {
            opacity: 1;
            margin-top: 200px;
        }
    }

    @-o-keyframes header-txt {
        0% {
            opacity: 0;
            margin-top: 250px;
        }

        100% {
            opacity: 1;
            margin-top: 200px;
        }
    }

    @keyframes header-txt {
        0% {
            opacity: 0;
            margin-top: 250px;
        }

        100% {
            opacity: 1;
            margin-top: 200px;
        }
    }

    div[class^="row"],
    .content {
        padding: 150px 10% 50px 10%;
    }
}

@media screen and (max-width: 1279px) {


    body.bundel .bundels li:not(li.product-list)::after {
        background-size: 100%;
    }

    .bg2 {
        width: 1100px;
        margin-left: -560px;
    }

    .diensten {
        margin-bottom: 20px;
    }

    .pres-content {
        font-size: 16px;
    }

    .showcase .mod-articlesnews__item {
        width: 30.3%;
    }

    .diensten [class^="icon-"] {
        width: 55px;
        height: 55px;
    }

    .diensten h3,
    .diensten h3 a {
        font-size: 16px;
    }

    p,
    .newsintro,
    .item-page li {
        line-height: 1.8;
    }

    .pres {
        height: 800px;
    }

    .img-title {
        font-size: 55px;
        width: 300px;
    }

    .pres-wrapper h3 {
        font-size: 18px;
    }

    h3,
    .offset h2 {
        font-size: 18px;
    }

    nav.navigation-desktop a {
        font-size: 12px;
    }

    .call a {
        font-size: 20px !important;
        padding: 0;
    }

    .logo {
        width: 200px;
    }

    nav.navigation-desktop ul {
        margin: 0;
    }

    .nav-container {
        height: 130px;
    }

    .diensten ul {
        width: calc(100% + 20px);
        margin-left: -10px;
    }

    .diensten ul li {
        width: calc(100% / 4 - 20px);
        margin: 10px;
    }

    .pres {
        height: 750px;
    }

    .bg2 {
        bottom: 0;
    }

    .flipvisual .flip-wrapper {
        max-width: 160px;
    }

    ul#content.functies li {
        width: 100%;
    }

}

@media screen and (max-width: 1024px) {
    .bundels li:hover {
        top: 0px;
        -webkit-box-shadow: 0px 5px 19px -2px rgba(0, 0, 0, 0);
        -moz-box-shadow: 0px 5px 19px -2px rgba(0, 0, 0, 0);
        box-shadow: 0px 5px 19px -2px rgba(0, 0, 0, 0);
    }

    .flipvisual h3 {
        font-size: 25px;
    }

    img.purple {
        bottom: -30px;
    }

    .project-item .item-page img:not(.project-legend .field-value img) {
        width: calc(100%);
    }
}

@media screen and (max-width: 1023px) {

    .visual:not(.bundel .visual, .visual.clear) {
        margin-top: 20px;
    }

    .bundels li:not(ul.product-list li, .usp li),
    div#toform {
        width: 100%;
        padding: 20px;
    }

    .flipvisual .front::after {
        background-size: 100%;
    }

    div[class^="row"],
    .content {
        padding: 100px 10% 50px 10%;
    }

    .visual {
        margin-top: 20px;
    }

    .flipvisual img,
    .content-side .bundels.combi {
        width: 100%;
    }

    .anchor.right .card-body {
        width: 100%;
        float: left;
        padding-left: 0px;
    }

    .bundels li:not(ul.product-list li, .usp li) {
        width: calc(100% / 2);
    }

    img.profilepic1 {
        margin-top: -80px;
    }

    nav.navigation-desktop ul ul::before {
        left: 0px;
    }

    .content-wrapper:not(.homepage .content-wrapper) {
        margin-top: 0px;
    }

    ul.mod-menu.mod-menu_dropdown-metismenu.metismenu.mod-list.desktop {
        width: 100%;
        margin: 0;
    }

    .togglemenu {
        display: block;
    }

    .bundels li:hover {
        top: 0px;
    }

    img.clientlogo {
        width: 25%;
    }

    .showcase .mod-articlesnews__item {
        width: 47%;
    }

    .options-table.left {
        width: 100%;
        padding: 0;
    }

    .diensten ul li {
        width: calc(100% / 2 - 20px);
    }

    nav.navigation-desktop {
        background-color: #fff;
        position: fixed;
        padding: 20px 50px;
        border-radius: 10px;
        -webkit-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.54);
        -moz-box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.54);
        box-shadow: 0px 0px 13px -1px rgba(0, 0, 0, 0.54);
        z-index: 22;
        top: 0%;
        left: 50%;
        width: 350px;
        margin-left: -175px;
        transition: all .5s ease;
        opacity: 0;
        visibility: hidden;
    }

    nav.navigation-desktop::before {
        content: "";
        width: 150px;
        height: 50px;
        position: relative;
        background-image: url(../img/logo-visualfield-compact.svg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        display: block;
        margin: 20px 0;
    }

    nav.navigation-desktop.open {
        top: 5%;
        opacity: 1;
        visibility: visible;
    }

    nav.navigation-desktop ul ul {
        position: relative;
        margin: 0;
        padding: 0 0 0 20px;
        opacity: 1;
        visibility: visible;
        float: left;
        clear: left;
    }

    nav.navigation-desktop li:hover>ul {
        padding: 0px;
    }

    nav.navigation-desktop li {
        clear: left;
    }

    li.level-1.active {
        padding: 0;
    }

    .navigation-desktop li.level-1::before {
        content: "";
        width: 10px;
        height: 10px;
        border: 2px solid #b2bdbf;
        float: left;
        border-radius: 3px;
        margin: 8px;
    }

    .navigation-desktop li.level-1.active::before {
        border: 2px solid #000;
    }

    .verbluffen {
        margin: 40px 0;
    }

    .call a {
        font-size: 22px !important;
        padding: 20px 0;
    }

    nav.navigation-desktop a {
        float: left;
    }

    li.level-2:hover a::after,
    .seperator,
    span.mod-menu__heading.nav-header,
    nav.navigation-desktop li.deeper.active>a::after,
    nav.navigation-desktop ul ul::after {
        display: none;
    }

    .navigation-desktop.card.call {
        width: 100%;
    }

    nav.navigation-desktop .level-1>a {
        font-size: 14px;
        padding: 7px 0;
    }

    .nav-container {
        width: 100%;
        height: 70px;
        padding: 10px 10%;
    }

    .logo-wrapper {
        transform: scale(.8);
    }

    .menu-popup {
        display: block;
        opacity: 0;
        visibility: hidden;
        transition: all .5s ease;
    }

    .menu-popup.open {
        opacity: .9;
        visibility: visible;
    }

    nav.navigation-desktop ul ul::before {
        margin: 10px 0 0 34px;
    }

    nav.navigation-desktop ul ul.items5::before {
        height: 70px;
    }

    nav.navigation-desktop ul ul.items6::before {
        height: 100px;
    }

    nav.navigation-desktop ul ul.items7::before {
        height: 120px;
    }

    .navigation-desktop .call {
        display: block;
    }

    nav.navigation-desktop ul ul {
        visibility: unset !important;
    }

    img.ft-logo {
        width: 400px;
        transform: translate(-50%, 175px);
    }

    .ft-content {
        position: relative;
        z-index: 4;
        width: 300px;
        padding-top: 0px;
        float: left;
        transform: scale(.6);
        left: 50%;
        margin-left: -300px;
    }

    img.ft-bg1 {
        position: absolute;
        width: 1300px;
        z-index: 3;
        top: -180px;
        left: 50%;
        margin-left: -550px;
        transform: scale(.5);
    }

    .footer ul {
        margin: 20px 0;
        transform: scale(.8);
    }

    a.closemenu {
        display: block;
        position: absolute !important;
        width: 30px;
        height: 30px;
        padding: 15px;
        top: 15px;
        right: 15px;
        background-image: url(../img/close-cross-black.svg);
        background-position: center;
        background-size: 30px;
    }

    div[class^="row"]>.right,
    .content-side {
        width: 100%;
        padding-left: 0;
    }

    .single_view.left,
    .com-content-article {
        width: 100%;
        padding-right: 0;
    }

    body.offset .row1,
    .project-item .row1 {
        margin-top: 50px;
    }

    nav.navigation-desktop li.active>a::before {
        display: none;
    }

}

@media screen and (max-width: 768px) {
    .ft-content {
        left: 50%;
        margin-left: -300px;
    }

    .flipvisual .front::after {
        background-image: url(../img/flipvisuals/element-bow-mobile.svg);
        bottom: 0px;
    }

}

@media screen and (max-width: 767px) {

    .flipvisual img {
        width: auto;
        height: 100%;
    }

    .pres-background::before {
        height: 80px;
    }

    .pres-wrapper {
        padding: 50px 0 0 0;
    }

    .row1.pres .pres-wrapper {
        padding: 0;
    }

    div#weescreatief,
    div#gaonlinescoren,
    div#communiceermetbeeld {
        float: left;
    }

    .pres-content {
        position: relative;
        float: left;
        clear: left;
    }

    .bundels.webpakketten {
        width: 270px;
        margin: 20px auto 0;
    }

    .img-title {
        font-size: 30px;
        float: left;
        text-align: left;
        clear: left;
        width: 70%;
    }

    .verbluffen {
        font-size: 45px;
    }

    .wrapper-bg2 {
        width: 100%;
        padding: 60px 10%;
        margin: 0;
    }

    .wrapper-bg3 {
        width: 1000px;
        margin-left: -600px;
        margin-top: 200px;
    }

    img.aqua {
        bottom: 250px;
    }

    img.purple {
        bottom: 180px;
    }

    h3,
    .offset h2 {
        font-size: 16px;
        width: 250px;
    }

    h2.before_title,
    .single_view h2,
    h1 {
        font-size: 30px;
    }

    body.bundel h3 {
        font-size: 20px;
    }

    .pres-content {
        margin-top: 20px;
    }

    .bg1 img {
        display: block;
    }

    .bg1 {
        width: 140%;
        left: 0;
        bottom: -200px;
        background-color: rgb(255 255 255 / 0%) !important;
    }

    .voordelen .anchorlink,
    .werkwijze .anchorlink {
        background: var(--darkyellow);
        float: left;
    }

    .bg2 {
        margin-left: -250px;
        width: 900px;
    }

    .werkwijze .bg2 {
        margin-left: -300px;
        width: 900px;
    }

    .creatief .bg2 {
        margin-left: -400px;
    }

    .scoren .bg2 {
        margin-left: -350px;
    }

    .beeld .bg2 {
        margin-left: -400px;
    }

    .bg0 {
        width: 100%;
    }

    .row1.pres {
        height: 690px;
    }

    img.clientlogo {
        width: 40%;
    }

    .single_view .extra_titel {
        font-size: 16px;
        width: 100%;
    }

    .diensten h3,
    .diensten h3 a {
        font-size: 12px;
    }

    .showcase .mod-articlesnews__item{
        width: 100%;
        margin: 0 1.5% 10%;
    }

    .number-inner {
        font-size: 16px;
    }

    div#parallax-bg2a {
        left: -500px;
    }

    #parallax-bg2::before {
        background-size: 1000px;
        background-position: top right;
    }

    #parallax-bg2 {
        left: 0px;
    }

    @-webkit-keyframes header-txt {
        0% {
            opacity: 0;
            margin-top: 200px;
        }

        100% {
            opacity: 1;
            margin-top: 150px;
        }
    }

    @-moz-keyframes header-txt {
        0% {
            opacity: 0;
            margin-top: 200px;
        }

        100% {
            opacity: 1;
            margin-top: 150px;
        }
    }

    @-o-keyframes header-txt {
        0% {
            opacity: 0;
            margin-top: 200px;
        }

        100% {
            opacity: 1;
            margin-top: 150px;
        }
    }

    @keyframes header-txt {
        0% {
            opacity: 0; 
            margin-top: 200px;
        }

        100% {
            opacity: 1;
            margin-top: 150px;
        }
    }

    .verbluffen {
        margin: 50px 0 20px;
    }

    ul#content.starterweergave li p {
        width: calc(100% - 60px);
        float: left;
    }

    ul#content.starterweergave li i[class^="table-icon"] {
        width: 50px;
        height: 50px;
    }

    img.profilepic1 {
        margin-top: 0;
    }
}

@media screen and (max-width: 500px) {

    .content-side .bundels.combi,
    .content-side .bundels.webpakketten {
        width: 100%;
    }

    .visual .card {
        width: 100%;
    }

    .bundels li:not(ul.product-list li, .usp li) {
        width: 100%;
        padding: 20px 0;
    }

    li.Blogger::after,
    li.Webshop::after,
    li.Starter::after {
        background-size: 110%;
    }

    li.Dealer::after {
        background-size: 120%;
    }

    li.Website::after {
        background-size: 100%;
    }

    .before_title {
        margin: 0 0 10px 0;
    }

    nav.navigation-desktop {
        width: 80%;
        left: 10%;
        margin-left: 0;
    }

    .ft-content {
        left: 0;
        margin-left: -20px;
    }

    .scoren .pres-content ul li,
    .creatief .pres-content ul li,
    .beeld .pres-content ul li {
        background-size: 30px;
        padding: 3px 0 3px 40px;
    }

    .strip {
        margin: -25px;
        transform: scale(.6);
    }

    .flipvisual .front::before {
        background-size: 150px;
    }

}

@media screen and (max-width: 400px) {}