:root {
  --blue-violet: #7741ff;
  --purple: #987bff;
  --medium-sea-green: #00a97f;
  --dodger-blue: #0083f5;
}

body {
  color: #333;
  font-family: Raleway, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 31px;
}

h2 {
  margin-top: 20px;
  margin-bottom: 29px;
  font-size: 32px;
  font-weight: 700;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
}

p {
  margin-bottom: 10px;
  font-family: Lato, sans-serif;
  font-size: 18px;
  line-height: 32px;
}

a {
  text-decoration: none;
}

.section {
  min-height: 500px;
  padding: 60px 45px;
}

.section.section-grey {
  width: 100vw;
  background-color: #f5f5f5;
}

.section.section-grey.hidden {
  width: 100%;
}

.section.section--hero {
  min-height: 500px;
  background-color: var(--blue-violet);
  flex-direction: column;
  justify-content: center;
  display: flex;
}

.section.section--hero.purple {
  background-color: var(--purple);
}

.section.section--footer {
  min-height: 0;
  background-color: var(--medium-sea-green);
}

.section.section--pricing {
  background-color: #333;
  padding-top: 90px;
  padding-bottom: 90px;
  display: none;
}

.container {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

.container.container-home {
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.brand {
  width: 490px;
  max-height: none;
  max-width: none;
  pointer-events: none;
  margin-top: 45px;
  margin-bottom: -300px;
  margin-left: -65px;
}

.navbar {
  background-color: rgba(0, 0, 0, 0);
  padding-left: 45px;
  padding-right: 45px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.brand-2 {
  width: 100%;
  max-width: 250px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.columns {
  z-index: 1;
  position: relative;
}

.columns.columns--iphone {
  z-index: 0;
  position: absolute;
  top: 171px;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.heading.heading--white {
  color: #fff;
}

.heading.heading--white.heading--white__hero-title {
  margin-top: 0;
  margin-bottom: 15px;
  font-weight: 400;
  line-height: 40px;
}

.paragraph.paragraph--white {
  color: rgba(255, 255, 255, .8);
}

.nav-link {
  color: #fff;
}

.nav-link.w--current {
  color: #fff;
  font-weight: 800;
}

.nav-link.lang {
  border-left: 1px solid rgba(255, 255, 255, .5);
}

.nav-link.demo {
  display: none;
}

.image-2 {
  max-width: 70%;
  margin-top: 60px;
}

.image-3 {
  width: 100%;
  max-width: 80%;
  float: right;
  margin-top: 75px;
  position: relative;
}

.lightbox-link {
  width: 100%;
}

.button {
  min-width: 150px;
  background-color: var(--dodger-blue);
  color: #fff;
  text-align: center;
  border-radius: 3px;
  margin-top: 15px;
  margin-right: 15px;
  padding: 10px 15px;
  font-family: Raleway, sans-serif;
  font-size: 16px;
  line-height: 31px;
}

.button:hover {
  background-color: #0083f5;
}

.button.diap {
  background-color: rgba(0, 0, 0, 0);
  border: 3px solid #3898ec;
  padding-top: 6px;
  padding-bottom: 6px;
}

.button.diap:hover {
  background-color: #3898ec;
}

.button.price {
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgba(255, 255, 255, .25);
}

.button.price.focus {
  border-color: var(--dodger-blue);
  background-color: var(--dodger-blue);
}

.button.demo {
  display: none;
}

.list.list--white {
  color: #fff;
}

.column {
  padding-top: 100px;
}

.pop-up-warpper {
  display: none;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.pop-up-container {
  z-index: 99;
  max-width: 600px;
  background-color: #fff;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  position: fixed;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: 0%;
}

.bg-color {
  z-index: 98;
  background-color: rgba(0, 0, 0, .2);
  position: fixed;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

.close {
  margin-top: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  font-weight: 400;
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: auto;
  left: auto;
  right: 15px;
}

.column-2 {
  padding-top: 45px;
  padding-right: 90px;
}

.div-block {
  background-color: rgba(0, 0, 0, .1);
  border-radius: 30px;
  padding: 30px;
}

.columns-2 {
  border-top: 1px solid rgba(255, 255, 255, .2);
  padding-top: 22px;
  padding-bottom: 12px;
}

.icon {
  color: rgba(255, 255, 255, .5);
  text-align: left;
  font-family: "Fa solid 900", sans-serif;
  font-size: 18px;
}

.icon.linkedi {
  margin-top: 7px;
  font-family: "Fa brands 400", sans-serif;
  font-size: 35px;
  text-decoration: none;
}

.paragraph-2 {
  color: rgba(255, 255, 255, .5);
}

.paragraph-2.sibtitle {
  text-align: right;
  margin-top: 24px;
  font-size: 15px;
}

.paragraph-3 {
  color: #fff;
  margin-top: 7px;
  margin-bottom: 22px;
}

.paragraph-3.business {
  color: var(--dodger-blue);
}

.paragraph-3.corp {
  color: var(--medium-sea-green);
}

.heading-2 {
  color: #fff;
  text-align: center;
}

.columns-3 {
  margin-left: 30px;
  margin-right: 30px;
}

.heading-3 {
  color: #fff;
}

.pilot-title {
  color: #fff;
  margin-top: 0;
  margin-bottom: 30px;
  font-size: 50px;
}

.text-span {
  font-size: 25px;
  line-height: 40px;
}

.heading-4 {
  color: #fff;
  font-size: 80px;
  line-height: 80px;
}

.white {
  color: #fff;
}

.slide._1 {
  background-image: url('../images/screen.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide._2 {
  background-image: url('../images/login.png');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide._4 {
  background-image: url('../images/IMG_7949.PNG');
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide._3 {
  background-image: url('../images/IMG_7948.PNG');
  background-position: 0 0;
  background-size: cover;
}

.slide._5 {
  background-image: url('../images/IMG_7953.png');
  background-position: 0 0;
  background-size: cover;
}

.slide._6 {
  background-image: url('../images/woningscreen.png');
  background-position: 0 0;
  background-size: cover;
}

.slide._7 {
  background-image: url('../images/ruimtesslide.png');
  background-position: 0 0;
  background-size: cover;
}

.slide._8 {
  background-image: url('../images/IMG_7952.PNG');
  background-position: 0 0;
  background-size: contain;
}

.slide.schade-1 {
  background-image: url('../images/Inlogscherm.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.schade-2 {
  background-image: url('../images/Inlogscherm-code.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.schade-3 {
  background-image: url('../images/Formulier.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.schade-4 {
  background-image: url('../images/Onderwerp-selecteren.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.schade-5 {
  background-image: url('../images/Foto-maken.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.schade-6 {
  background-image: url('../images/Foto-maken-1.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.schade-7 {
  background-image: url('../images/Foto-uploaden.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.renovatie-1 {
  background-image: url('../images/Inlogscherm.jpg');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.renovatie-2 {
  background-image: url('../images/Renovatie-updates.png');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.renovatie-3 {
  background-image: url('../images/Renovatie-update-verdiepend-1.png');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slide.renovatie-4 {
  background-image: url('../images/Renovatie-update-verdiepend-2.png');
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.slider {
  width: 346px;
  height: 752px;
  border-radius: 32px;
  margin-top: 110px;
  margin-left: 19px;
  position: absolute;
  top: 0%;
  bottom: auto;
  left: 0%;
  right: auto;
  overflow: hidden;
}

.right-arrow {
  display: none;
}

html.w-mod-js [data-ix="slide-in"] {
  opacity: 0;
  transform: translate(0, 30px);
}

@media screen and (max-width: 991px) {
  .brand {
    max-width: 310px;
    margin-left: -20px;
  }

  .brand-2 {
    width: 100%;
    max-width: 200px;
  }

  .heading.heading--white.heading--white__hero-title {
    font-size: 21px;
    line-height: 30px;
  }

  .column {
    padding-top: 66px;
  }

  .heading-5 {
    font-size: 21px;
    line-height: 30px;
  }

  .slider {
    width: 213px;
    height: 475px;
    border-radius: 22px;
    margin-top: 89px;
    margin-left: 40px;
  }

  .nav-menu {
    display: inline-block;
  }
}

@media screen and (max-width: 767px) {
  .brand-2 {
    max-width: 150px;
  }

  .image-2 {
    margin-bottom: 46px;
  }

  .column-2 {
    padding-right: 0;
  }

  .column-3, .menu-button, .div-block-2 {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .section {
    padding-left: 15px;
    padding-right: 15px;
  }

  .section.section--footer {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .navbar {
    padding-left: 15px;
    padding-right: 15px;
  }

  .paragraph {
    font-size: 16px;
    line-height: 27px;
  }

  .button {
    width: 100%;
  }

  .column {
    padding-top: 45px;
  }

  .lightbox-link-2 {
    width: 100%;
  }
}


@font-face {
  font-family: 'Fa 400';
  src: url('../fonts/fa-regular-400.woff2') format('woff2'), url('../fonts/fa-regular-400.eot') format('embedded-opentype'), url('../fonts/fa-regular-400.woff') format('woff'), url('../fonts/fa-regular-400.ttf') format('truetype'), url('../fonts/fa-regular-400.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fa solid 900';
  src: url('../fonts/fa-solid-900.woff2') format('woff2'), url('../fonts/fa-solid-900.eot') format('embedded-opentype'), url('../fonts/fa-solid-900.woff') format('woff'), url('../fonts/fa-solid-900.ttf') format('truetype'), url('../fonts/fa-solid-900.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fa brands 400';
  src: url('../fonts/fa-brands-400.woff2') format('woff2'), url('../fonts/fa-brands-400.eot') format('embedded-opentype'), url('../fonts/fa-brands-400.woff') format('woff'), url('../fonts/fa-brands-400.ttf') format('truetype'), url('../fonts/fa-brands-400.svg') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}