body {
  max-width:100% ;
  margin: auto;
  font-family: 'MaisonMono-Regular';
  overflow-x: hidden;
}

@font-face {
  font-family: 'MaisonMono-Regular';
  src:
  url('/fonts/MaisonMono-Regular.woff2') format('woff2'), 
  url('/fonts/MaisonMono-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MaisonMono-Demi';
  src:
  url('/fonts/MaisonMono-Demi.woff2') format('woff2'), 
  url('/fonts/MaisonMono-Demi.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

container-fluid {max-width: 100%; display: block;}


/* Colors left margin font links */

.white {
  color: white;
}

.black {
  color: #000;
}

.blue {
  color: #192D42;
}

.p-left {
  padding-left: 50px;
}

.m-left {
  margin-left: 50px;
}

.maisonmono-regular {
  font-family: 'MaisonMono-Regular';
}

.maisonmono-demi {
  font-family: 'MaisonMono-Demi';
}

.bold-font {
  font-weight: bold;
}

a:hover {
  color:  #FF3C00 ;
  text-decoration: none;
}

a:active {
  color: #29D0FC;
}

li {
  list-style-type: none;
}

/* navigation bar and logo*/

.top-bar {
  background-color: #EEEEEE;
  max-width: 100%;
  margin: auto;
}

.logo-top {
  margin-top: 25px;
  height: 60px;
}

.logo-bottom {
  margin-bottom: 25px;
  height: 40px;
  
}

.top-menu  {
  background-color:#EEEEEE;
  font-size: 22px;
  font-weight: 500;
  max-width: 100%;
  padding-left: 35px;
}


/* carousel pc */

.carousel-item {
  background-color: #192D42;
  max-height: 100%;
}

.carousel-item img {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}


.carousel-indicators li, .carousel-indicators li.active {
  margin: 0px 5px !important;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.carousel1-heading {
  text-align: left;
  top: 30px;
  left: 50px;
  font-size: 5.208vw;
  line-height: 6.250vw;
  color: #FFD8C0;
  width: 60%;
}


.carousel1-text {
  text-align: left;
  bottom: 25px;
  left: 50px;
  max-width: 34.553vw;
  font-size: 1.611vw;
}


.carousel2-text {
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translateY(-50%);
  bottom: initial;
  left: 50px;
  right: 50px ;
  color: #192D42;
  font-size: 3.928vw;
}

.carousel3-text {
  text-align: left;
  left: 50px;
  top: 2vw;
  /* transform: translateY(-1%); */
  bottom: initial;
  font-size: 6.529vw;
  word-spacing: 30px;
  line-height: 6.529vw;
}

.carousel4-text {
  top: 20%;
  transform: translateY(-20%);
  bottom: initial;
  font-size: 2.083vw;
  left: 15%;
  word-spacing: 1.042vw;
}

.carousel4-text-bottom {
  bottom: 20%;
  transform: translateY(-20%);
  top: initial;
  font-size: 2.083vw;
  left: 18%;
  word-spacing: 1.042vw;
}

.specialise, .protocols {
  background-color: #FF3C00;
  border: 1px solid #FF3C00;
}

.protocols {
  font-size: 1.611vw;
}

.security {
  background-color: #192D42;
  border: 1px solid #192D42;
  font-size: 1.611vw;
}


/*We help you boxes*/

.box-we-help-you .heading {
  font-size: 5.208vw;
  font-weight: bold;
  line-height: 4.167vw;
  word-spacing: 1.042vw;
  color: #002941;
  background-color: #EEEEEE;
  padding:35px 0px 0px 60px ;
}

.we-help-you-boxes {
  width: 100%;
  color: #002941;
  background-color: #EEEEEE;
}

.we-help-you-box-text {
  padding:25px 50px 20px 50px ;
  font-size: 1.563vw;
  line-height: normal;
}

.we-help-you-box-pic {
  max-width: 35%;
}

 

/* Boxes with question marks, squares and survey*/

.questions-text, .squares-text, .survey-text, .survey-button-text {
  position: relative;
  background-color: #29D0FC;
  height: 0;
  padding-top: 28.13%;
}

.squares-text, .survey-text {
  background-color: #FF3C00;
}

.questions-text p, .squares-text p, .survey-text p {
  font-size: 3.125vw;
  position:  absolute;
   top: 25%;
   transform: translateY(-25%);
   left: 50px;
   bottom: 0;
   right: 50px;
}

.questions-pic, .squares-pic {
  position: relative ;
  background-color:#192D42 ;
  padding-top: 28.13%;
  align-items: center;
}

.squares-pic {
  background-color: #EEEEEE;
}

.question-square-pic {
  position: absolute;
  max-height: 80%;
  max-width: 80%;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  object-fit: scale-down;
}

.survey-heading {
  position: absolute;
  top: 50px;
  text-align: left;
  right: 50px;
  font-size: 7.208vw;
  line-height: 7.550vw;
  color: #FFD8C0;
  height: 100%;
}

.survey-landing-pc {
  position: relative;
  background-color: #192D42;
}

.survey-text p {
  font-size: 2.125vw;
}

.survey-bold-icon {
  position: relative;
  object-fit: contain;
  background-size: cover;
  width: 50%;
  height: 50%;
}

.survey-icon {
  position: relative;
  object-fit: contain;
  max-width: 70%;
  height: 70%;
  background-size: cover;
}

.survey-heading-mobile {
  position: unset;
  background-color: #192D42;
  
  color: #FFD8C0;
  font-size: 9.766vw !important;
  line-height: 11.417vw !important;
  padding: 20px 35px 20px 35px;
  
}

.survey-pic-mobile {
  background-color: #192D42;
}

.survey-button-text p, .survey-button-text a {
  font-size: 3.125vw;
  position:  absolute;
   top: 25%;
   transform: translateY(-25%);
   left: 50px;
   bottom: 0;
   right: 50px;
   color: #192D42;
   text-align: center;
   line-height: normal;
}

.survey-button-text a {
  position: absolute;
  top: 80%;
}

.survey-button-text {
  background-color: #EEEEEE;
}



/*Get in touch box*/

.box-get-in-touch {
  background: #192D42;
  max-height: 100%;
}

.box-get-in-touch-picture {
  text-align: center;
  max-height: 618px;
}

.box-get-in-touch-heading {
  padding: 30px 60px 60px 50px;
  word-spacing: 30px;
  color: #FFD8C0;
  line-height: 110px;
  font-size: 100px;
}

.box-get-in-touch-heading-mobile {
  padding: 50px 60px 60px 50px;
  word-spacing: 30px;
  color: #FFD8C0;
  line-height: 90px;
  font-size: 500%;
}

.box-get-in-touch-text {
font-size: 1.146vw;
padding: 0px 90px 0px 60px;
}

.smiles-pic {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

/*Box with the contact us form and side description*/

.contact-us {
  background-color: #E9E9E9;
}

.contact-us-text {
  margin: 50px 0px 0px 20px;
}

.contact-us-text p {
  padding-right: 50px;
  font-size: 1.146vw;
}

.contact-us-form {
  margin-top: 50px;
  margin-bottom: 30px;
  margin-right: 40px;
}

.contact-us-form label {
  font-weight: bold;
  font-size: 14px;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #000;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  height: 42px;
}

input[type=submit] {
  background-color: #192D42;
  color: white;
  height: 42px;
  padding: 10px 20px 38px 20px;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

input[type=submit]:hover {
  background-color:  #FF3C00;
}

input[type=submit]:active {
  background-color: #29D0FC;
}


/* Footer of the page*/

.page-footer {
  background-color: #192D42;
  height: 100%;
  font-size: 18px;
}

.menu-footer {
  padding-left: 50px;
}

.page-footer h5 {
  margin-bottom: 30px;
  font-size: 18px;
}

.page-footer li {
  line-height: 18px;
}

.footer-list {
  margin: 40px 0px 12px 0px;
}

.kvk {
  margin-bottom:30px;
  font-weight: normal;
}

.disclaimer {
  margin-left: 65px;
}

.disclaimer a {
  padding-left: 20px;
}

/* Font Sizes*/


/*Survey button*/



.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #192D42;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 2.579vw;
  padding: 1.563vw;
  width: 20.583vw;
  cursor: pointer;
  margin: 5px;
  
}



.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover {
  background-color: #FF3C00;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}


.button:active{
background-color: #29D0FC !important;
}




















/* mobile non displays*/

.questions-squares-mobile, .survey-boxes-mobile, .survey-landing-mobile, .nav-tablet, .we-help-you-boxes-tablet, .help-you-mobile, .big-footer-tablet, .page-footer-mobile, .contact-us-mobile, .box-get-in-touch-mobile, .we-help-you-boxes-mobile, .questions-services-mobile, .mobile-slider, .nav-mobile {
  display: none;
}

/* mobile */



/*---Media Queries --*/


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

  .questions-squares-pc, .survey-boxes-pc, .survey-landing-pc, .nav-tablet, .we-help-you-boxes-tablet, .help-you-pc, .box-get-in-touch-pc, .we-help-you-boxes-pc, .contact-us-pc, .questions-services-pc, .page-footer, .nav-pc, .big-slider {
    display: none !important;
  }

  .questions-squares-mobile, .survey-boxes-mobile, .survey-landing-mobile, .carousel4-mobile, .help-you-mobile, .box-get-in-touch-mobile, .we-help-you-boxes-mobile, .contact-us-mobile, .questions-services-mobile, .mobile-slider, .nav-mobile {
    display: block !important;
  }
  
  /*Carousel*/


  .carousel1-mobile {
    background-color: #192D42;
    padding: 0px 30px 0px 30px;
    font-size: 23px;
    }

  .carousel1-mobile-heading {
    color: #FFD8C0;
    font-size: 9.766vw;
    line-height: 10.417vw;
    padding: 20px 0px 120px 0px;
  }

  .carousel1-mobile-text {
    font-size: 2.865vw;
    padding-bottom: 30px;
    margin: 0;
  }

  .carousel2-mobile, .carousel3-mobile {
    position: relative;
    background-color: #29D0FC;
    height: 0;
    padding-top: 56.25%;
  }

  .carousel3-mobile {
    background-image: url(img/carousel3_2X.png);
    background-size: cover;
  }

  .carousel-securebydesign-mobile {
    background-size: cover;
    height: 100%;
    width: 100%;
    object-fit: contain;
  }

  .carousel3-mobile p, .carousel2-mobile p {
    position:  absolute;
    top: 50%;
    left: 50px;
    bottom: initial;
    right: 50px;
    transform: translateY(-50%);
    font-size: 7.110vw;
    word-spacing: 2.604vw;
    line-height: 7.261vw;
  }

  .carousel2-mobile p {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 3.906vw;
    color: #192D42;
  }

  .obscurity-mobile {
    position: relative;
    background-image: url(img/carousel_4_obscurity_2X.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-color:#192D42;
    width: max-content;
    height: 0;
    padding-top: 56.25%;
  }

  .obscurity-mobile-text-top, .obscurity-mobile-text-bottom {
    position:  absolute;
    top: 25%;
    transform: translateY(-25%);
    bottom: initial;
    font-size: 3.083vw;
    left: 35%;
    word-spacing: 1.042vw;
    color: white;
    font-weight: bold;
  }

  .obscurity-mobile .obscurity-mobile-text-top {
    text-align: center;
    align-content: center;
    right: 30%;
  }

  .obscurity-mobile-text-bottom {
    top: initial;
    bottom: 25%;
    transform: translateY(-25%);
    left: 35%;
  }

  .carousel4-text-bottom {
    bottom: 15%;
    transform: translateY(-15%);
    top: initial;
  }


  .protocols {
    line-height: 3.506vw;
    font-size: 4.555vw;
  }

  .box-we-help-you .heading {
    line-height: 70px;
  }


  /*Box with questions, squares and survey*/

  .questions-text, .squares-text, .survey-text, .survey-button-text {
    padding-top: 56.25%;
  }
  
  .questions-text p, .squares-text p {
    font-size:7.813vw;
    line-height: 7.813vw;
  }

  .survey-text p {
    font-size:4.813vw;
    line-height: 7.813vw;
  }

  .survey-button-text p {
    font-size:7.813vw;
    line-height: 9.513vw;
  }

  .survey-button-text a {
    top: 85%;
  }

  .questions-pic, .squares-pic {
    padding-top: 56.25%;
  }

  .button {
    font-size: 4.779vw;
  padding: 2.263vw;
  width: 37.583vw;
  }
  

  /*Footer*/
  .page-footer-mobile {
    background-color: #192D42;
    height: 430px;
    display: block;
    width: 100%;
  }
  
  .page-footer-mobile h5 {
    color:white;
    margin-bottom: 30px;
  }
  
  .page-footer-mobile li {
    line-height: 18px;
  }
  
  .footer-list-mobile {
    margin-bottom: 5px;
   text-align: left;
  }
  
  .disclaimer-mobile{
    margin: 0px 0px 5px 50px;
  }
}


/* Tablet*/
@media screen and (max-width:1365px) { 
  
  .big-footer, .nav-pc, .we-help-you-boxes-pc, .we-help-you-boxes-mobile {
    display: none;
  }

  .nav-tablet, .big-footer-tablet, .we-help-you-boxes-tablet {
    display: block;
  }

  .top-menu {
    font-size: 20px;
  }

  /* Carousel*/

  .carousel1-heading {
    font-size: 4.762vw;
    line-height: 4.796vw ;
    top: 0;
    left: 50px;
  }

  .carousel1-text {
    width: 400px;
    font-size: 1.560vw;
    padding-top: 50px;
  }

  .carousel2-text {
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    margin: auto;
    font-size: 3.901vw;
    line-height: normal;
    width: 80%;
  }

  .carousel3-text {
    font-size:5.852vw;
    word-spacing: 1.560vw;
  }

 .protocols {
   line-height: 1px;
   font-size: 1.611vw;
 }

 /*We help you box*/

 .box-we-help-you .heading {
   font-size: 70px;
 }

 .we-help-you-box-text {
   font-size: 25px ;
 }

/* Get in touch*/

  .box-get-in-touch-heading {
    font-size:80px;
    line-height: 65px;
    word-spacing: normal;
  }

  .box-get-in-touch-text, .contact-us-text p {
    font-size: 18px;
    line-height: 25px;
    }

  .smiles-pic {
    width: 80%;
    height: 80%;
    object-fit: scale-down;
  }

  /* Footer*/
  .page-footer, .page-footer h5 {
    font-size: 18px;
  }

 }


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}


/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/