@import url('https://fonts.googleapis.com/css?family=Lato');

html {
  background: transparent url(../img/background/rainbow-flowers-field_pc.jpg);
  background-size: 100%;
  font-family: 'Lato';
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.8);
}

#boxPlacement-main {
  display: none;
}

/* icon's <i> */
@font-face {
  font-family: 'Dropdown';
  src: url("themes/font-awesome-4.7.0/fonts/FontAwesome.otf");
  src: url("themes/font-awesome-4.7.0/fonts/fontawesome-webfont.eot") format('embedded-opentype'),
  url("themes/font-awesome-4.7.0/fonts/fontawesome-webfont.woff2") format('woff'),
  url("themes/font-awesome-4.7.0/fonts/fontawesome-webfont.woff") format('woff'),
  url("themes/font-awesome-4.7.0/fonts/fontawesome-webfont.ttf") format('truetype'),
  url("themes/font-awesome-4.7.0/fonts/fontawesome-webfont.svg") format('svg');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}

i.iconDd {
  font-family: 'Dropdown';
  font-style: normal;
  width: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: block;
  cursor: pointer;
}

i.iconDd.dropdown:before {
  content: "\f0d7";
}

i.iconClose {
  font-family: 'Dropdown';
  font-style: normal;
  font-weight: bold;
  font-size: 35px;
  cursor: pointer;
  position: relative;
  left: 4px;
}

i.iconClose:before {
  content: "\00d7";
}

@font-face {
  font-family: 'Icons';
  src: url("themes/default/assets/fonts/icons.eot");
  src: url("themes/default/assets/fonts/icons.eot?#iefix") format('embedded-opentype'), url("themes/default/assets/fonts/icons.woff2") format('woff'), url("themes/default/assets/fonts/icons.woff") format('woff'), url("themes/default/assets/fonts/icons.ttf") format('truetype'), url("themes/default/assets/fonts/icons.svg#icons") format('svg');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
}

i.icon {
  flex-direction: row;
  font-family: 'Icons';
  font-style: normal;
  display: flex;
  width: 15px;
  align-items: center;
  justify-content: center;
}

i.icon:before {
  background: none !important;
}

i.icon.arrow-up:before {
  content: '\f062';
}

i.icon.contact:before {
  content: '\f0e0';
}

i.icon.legal:before {
  content: '\f0e3';
}

i.icon.about-us:before {
  content: '\f0eb';
}

i.icon.Facebook:before {
  content: '\f09a';
}

i.icon.LinkedIn:before {
  content: '\f0e1';
}

/* icon's </i> */

button:focus, select:focus, form:focus, option:focus, textarea:focus, input:focus {
  outline: 0;
}

select {
  cursor: pointer;
}

/*-------------
---<CONTENT>---
-------------*/
.position_content {
  position: absolute;
  /* top: 240px; */
  top: 190px;
  left: 0;
  width: 100%;
}

/* Health-page */
.figuur_space {
  display: flex;
  flex-direction: row;
  margin-left: 5%;
}

.uitleg_bedrijf {
  width: 95%;
}

.tablet_logo {
  display: none;
}

.tablet_logo img {
  width: 25%;
  position: relative;
  left: 65%;
}

.uitleg_figuur {
  margin: 20px 0 0 20px;
}

/*
  versions
*/
#mobile_version {
  display: none;
}

@media screen and (min-width: 2501px) {
  .position_content {
    font-size: 120% !important;
    top: 350px;
  }
}

@media screen and (max-width: 2500px) and (min-width: 2251px) {
  .position_content {
    font-size: 110% !important;
    top: 350px;
  }
}

@media screen and (max-width: 2250px) and (min-width: 2001px) {
  .position_content {
    font-size: 100% !important;
    top: 350px;
  }
}

@media screen and (max-width: 1400px) and (min-width: 1081px) {
  .position_content {
    top: 222.5px;
  }
}

@media screen and (max-width: 1080px) {
  .tablet_logo {
    display: block;
    margin-top: 5%;
  }
}

@media screen and (max-width: 1080px) and (min-width: 805px) {
  i.iconDd {
    width: 7.5px;
    top: 9px;
  }

  .position_content {
    font-size: 80% !important;
    top: 82px;
  }
}

@media screen and (max-width: 804px) and (min-width: 701px) {
  i.iconDd {
    width: 5px;
    top: 9px;
  }

  .position_content {
    top: 72px;
    font-size: 70% !important;
  }

  .heightTablet {
    height: 200px;
  }

  .tablet_logo {
    margin-top: 2.5%;
  }
}

@media screen and (max-width: 1080px) {
  i.iconClose {
    left: -4px;
    top: -2px;
    font-size: 32px;
  }
}

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

  html {
    background: transparent url(../img/background/rainbow-flowers-field_mobile.jpg);
    background-size: 100%;
  }

  body {
    margin: 0;

  }

  i.icon {
    color: rgba(0, 0, 0, 0.6);
  }

  i.iconDd {
    top: 9px;
  }

  /*
    versions
  */
  #desktop_version {
    display: none;
  }

  #mobile_version {
    display: block;
  }

  .mobile_boxShadow {
    position: absolute;
    top: 0;
    left: 0;

    width: calc(0%);

    opacity: 0;
    transition: opacity, width 0.25s;

    background: rgba(39, 41, 43, 0.35);
  }

  .boxShadow_opacity {
    opacity: 1;
  }

  .boxShadow_width {
    width: calc(100%);
  }

  .mobile_toggle {
    position: absolute;
    top: 0;
    left: 0;

    transition: width 0.5s;
    width: calc(0%);

    background: rgba(255, 255, 255, 0.8);

    border: 0;
  }

  .menu_width {
    width: calc(75%);
  }

  .mobile_close {
    width: 10%;
    float: right;
  }

  #mobile_close {
    width: 100%;
    margin: 50% 0 0 -50%;
  }

  .mobile_logo {
    width: auto;
    height: auto;
    margin: 10%;
    text-align: center;
  }

  #mobile_logo {
    width: 60%;
    margin: 0 0 0 1%;
  }

  .mobile_menu_items {
    width: calc(0%);
    margin: 10%;
  }

  .items_width {
    width: calc(77.5%);
    background: #fff;
    border-radius: 20px;
  }

  .mobile_links {
    text-decoration: none;
    text-align: center;
    display: none;

    background: #fff;
    color: rgb(98, 97, 97);

    line-height: 1.5;
    height: 40px;

    font-size: 170%;
  }
}

/* ja ik vind css ook niet bepaald je van het... maar ja he */
/* the white logo */
.divWhiteLogoPc {
  display: flex;
  justify-content: flex-end;
  margin-top: 180px;
  margin-right: 25px;
}

.imgWhiteLogoPc {
  content: url("../img/official_logo_white.png");
  max-width: 100%;
  height: 100px;
}

@media screen and (max-width: 1080px) {
  .divWhiteLogoPc {
    margin-top: 210px;
    margin-right: 35px;
  }

  .imgWhiteLogoPc {
    height: 100px;
  }
}

@media screen and (max-width: 800px) {
  .divWhiteLogoPc {
    margin-top: 215px;
    margin-right: 30px;

  }

  .imgWhiteLogoPc {
    height: 100px;
  }
}