/* DUTCH CSS Document of project pages*/
@font-face {
  font-family: 'Slate W01';
  font-style: normal;
  font-weight: normal;
  src: local("Slate W01"), url("https://robintepe.nl/assets/slatew01/000ce4b4252ddad9fae589f5dab448b5.woff") format("woff");
}
@font-face {
  font-family: 'Slate W01 Medium';
  font-style: normal;
  font-weight: normal;
  src: local("Slate W01 Medium"), url("https://robintepe.nl/assets/slatew01/1fef7d1af7889bee6c72b76d49ca53c3.woff") format("woff");
}
@font-face {
  font-family: 'Slate W01 Bold';
  font-style: normal;
  font-weight: normal;
  src: local("Slate W01 Bold"), url("https://robintepe.nl/assets/slatew01/b81bb83abecd8eb743a1c7f9183d3047.woff") format("woff");
}
body, html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: "Slate W01", "Open Sans Regular", "SF UI Text Regular", Helvetica, Arial, sans-serif;
  vertical-align: baseline;
}

.site {
  max-width: 1186px;
  margin: 0 auto;
  padding: 30px 30px 0px;
}

h1 {
  font-family: "Slate W01 Bold", "Open Sans Bold Bold", "SF UI Text Bold", Helvetica, Arial, sans-serif;
  font-size: 60px;
  font-weight: 600;
  margin-bottom: 0;
  color: #3C424F;
}

h2 {
  font-family: "Slate W01 Bold", "Open Sans Bold Bold", "SF UI Text Bold", Helvetica, Arial, sans-serif;
  font-size: 30px;
  font-weight: 400;
  margin: 0;
  color: #3C424F;
}

h3 {
  font-family: "Slate W01 Medium", "Open Sans Regular", "SF UI Text Medium", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 10px;
  line-height: 1.3em;
  color: #3C424F;
}

h4 {
  font-family: "Slate W01 Medium", "Open Sans Regular", "SF UI Text Medium", Helvetica, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.3em;
  margin: 30px 0 0 0;
  color: #616875;
}

p, li, td {
  font-size: 20px;
  font-weight: 200;
  margin-bottom: 5px;
  line-height: 1.3em;
  color: #616875;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
}
table th, table td {
  text-align: left;
  padding: 8px;
}
table tr:nth-child(even) {
  background-color: #EDF0FA;
}

@media screen and (max-width: 484px) {
  table {
    display: none;
  }

  .mobileNoView p {
    color: #EE2B2B;
    font-family: "Slate W01 Medium", "Open Sans Regular", "SF UI Text Medium", Helvetica, Arial, sans-serif;
  }
}
@media screen and (min-width: 485px) {
  .mobileNoView {
    display: none;
  }
}
@media screen and (max-width: 900px) {
  h1 {
    font-size: 50px;
  }

  h2 {
    font-size: 30px !important;
  }

  h3 {
    font-size: 23px;
  }
}
@media screen and (max-width: 750px) {
  h1 {
    font-size: 40px;
  }

  h3 {
    font-size: 20px;
  }
}
@media screen and (max-width: 630px) {
  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em !important;
  }

  h3 {
    font-size: 1.2em;
  }
}
@media screen and (max-width: 550px) {
  h1 {
    font-size: 1.8em;
  }
}
@media screen and (max-width: 450px) {
  h1 {
    font-size: 1.6em;
  }

  .site {
    padding: 30px 5%;
  }
}
button {
  height: 50px;
  padding: 0px 20px;
  margin: 15px 20px 0px 0px;
  font-family: "Slate W01 Bold", "Open Sans Bold Bold", "SF UI Text Bold", Helvetica, Arial, sans-serif;
  font-size: 20px;
  border-radius: 50px;
  transition: 0.3s;
  cursor: pointer;
}

@media screen and (max-width: 550px) {
  button {
    width: 100%;
    margin-right: 0px;
  }
}
.btn-cta {
  color: #FFFFFF;
  background-color: #2EAFF0;
  border: none;
}
.btn-cta:hover {
  color: #F8F8F8;
  background-color: #0782BF;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn-sa {
  color: #616875;
  background-color: #FFF;
  border: 3px solid #616875;
}
.btn-sa:hover {
  color: #FFFFFF;
  background-color: #616875;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.header a, .header h2 {
  text-decoration: none;
  color: #616875;
  transition: 0.3s;
}
.header #name {
  font-size: 40px;
}
.header #name:hover {
  color: #2EAFF0;
}
@media screen and (max-width: 900px) {
  .header #name {
    font-size: 30px;
  }
}
@media screen and (max-width: 630px) {
  .header #name {
    font-size: 1.5em;
  }
}
.header .lang {
  position: relative;
  float: right;
  margin: -24px 30px 0px 0px;
}
.header .lang a {
  transition: 0.3s;
  font-size: 20px;
}
.header .lang a:hover {
  color: #2EAFF0;
}
.header .btn-sa {
  position: relative;
  float: right;
  margin: -40px 0px 0px;
  width: auto;
}

.intro {
  padding-top: 20vh;
  height: 60vh;
}
.intro h3 {
  color: #616875;
  margin-top: 10px;
}

@media screen and (max-width: 450px) {
  .header .lang {
    display: none;
  }

  .intro {
    height: 40vh;
  }
}
.wrapper {
  display: flex;
  justify-content: space-between;
}
.wrapper a:link, .wrapper :visited {
  color: #2EAFF0;
  text-decoration: none;
  transition: 0.3s;
}
.wrapper a:link:hover, .wrapper :visited:hover {
  color: #0782BF;
}
.wrapper .sidebar {
  width: 20%;
  height: 100%;
  min-height: 200px;
  overflow: auto;
  position: -webkit-sticky;
  position: sticky;
  top: 5%;
  padding: 3%;
  border-radius: 15px;
  background: #F5F5F5;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(97, 104, 117, 0.6);
  -moz-box-shadow: 0px 0px 15px 0px rgba(97, 104, 117, 0.6);
  box-shadow: 0px 0px 15px 0px rgba(97, 104, 117, 0.6);
}
.wrapper .sidebar span {
  color: #616875;
}
.wrapper .sidebar hr {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.wrapper .sidebar h4 {
  font-size: 1em;
  color: #3C424F;
  margin: 0;
  text-decoration: none;
}
.wrapper .sidebar .cc img {
  padding: 5px;
  width: 30px;
  height: auto;
}
.wrapper .sidebar .text {
  color: #616875;
  font-family: "Slate W01 Bold", "Open Sans Bold Bold", "SF UI Text Bold", Helvetica, Arial, sans-serif;
  font-size: 0.8em;
}
.wrapper .main {
  width: 70%;
  display: flex;
  flex-direction: column;
}
.wrapper .main > h3:first-of-type {
  margin-top: 0;
}
.wrapper .main .flexbox {
  display: flex;
  flex-wrap: nowrap;
}
.wrapper .main .flexbox > a {
  width: 50%;
  margin: 10px;
}
.wrapper .main h3 {
  font-size: 28px !important;
  font-weight: 600;
}
.wrapper .main p {
  margin: 0;
  padding-bottom: 20px !important;
}
.wrapper .main img, .wrapper .main video {
  opacity: 1;
}
.wrapper .main img {
  padding-bottom: 20px;
  cursor: zoom-in;
  width: 100%;
  transition: opacity 0.3s;
}
.wrapper .main img[data-src] {
  opacity: 0;
}
.wrapper .main .testimonials {
  text-align: center;
  margin: 50px 0px;
}
.wrapper .main .testimonials .testimonial {
  text-align: left;
  position: relative;
  display: inline-block;
  max-width: 300px;
  padding: 30px;
  margin: 16px;
  border-radius: 15px;
  background: #F5F5F5;
  -webkit-box-shadow: 0px 0px 15px 0px rgba(97, 104, 117, 0.6);
  -moz-box-shadow: 0px 0px 15px 0px rgba(97, 104, 117, 0.6);
  box-shadow: 0px 0px 15px 0px rgba(97, 104, 117, 0.6);
}
.wrapper .main .testimonials .testimonial p {
  margin-top: 0;
}
.wrapper .main .testimonials .testimonial .person .name a {
  color: #3C424F;
}
.wrapper .main .testimonials .testimonial .person .function {
  color: #A2A6B1;
}

@media screen and (max-width: 920px) {
  .site {
    padding: 0;
  }
  .site .top {
    padding: 30px 5%;
  }
  .site .wrapper {
    display: inline-block;
    justify-content: none;
  }
  .site .wrapper .sidebar {
    padding: 3% 5%;
    width: 90%;
    border-radius: 0;
    position: relative;
    box-shadow: none;
  }
  .site .wrapper .sidebar h4, .site .wrapper .sidebar hr {
    display: none;
  }
  .site .wrapper .sidebar .cc {
    margin-top: 20px;
  }
  .site .wrapper .main {
    width: 100%;
  }
  .site .wrapper .main > h3:first-of-type {
    margin-top: 25px;
  }
  .site .wrapper .main a {
    width: 100%;
  }
  .site .wrapper .main table {
    margin: 0% 5%;
  }
  .site .wrapper .main h2, .site .wrapper .main h3, .site .wrapper .main h4 {
    padding-top: 20px;
  }
  .site .wrapper .main p {
    padding-bottom: 20px;
  }
  .site .wrapper .main .flexbox, .site .wrapper .main .note, .site .wrapper .main .mobilePadding, .site .wrapper .main h2, .site .wrapper .main h3, .site .wrapper .main h4, .site .wrapper .main p, .site .wrapper .main b, .site .wrapper .main i, .site .wrapper .main li {
    width: 90%;
    padding: 0% 5%;
  }
}
@media screen and (max-width: 374px) {
  .main iframe {
    height: 0;
    width: 0;
  }
}
.b-lazy {
  -webkit-transition: opacity 500ms ease-in-out;
  -moz-transition: opacity 500ms ease-in-out;
  -o-transition: opacity 500ms ease-in-out;
  transition: opacity 500ms ease-in-out;
  max-width: 100%;
  opacity: 0;
}
.b-lazy .b-loaded {
  opacity: 1;
}

.navBar {
  padding: 15px;
  bottom: calc(0px + env(safe-area-inset-bottom));
  position: -webkit-sticky;
  position: sticky;
  text-align: center;
  -webkit-box-shadow: 0px 15px 25px -15px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 15px 25px -15px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 15px 25px -15px rgba(0, 0, 0, 0.05);
}
.navBar .projectNav button {
  margin: 0;
  width: auto;
  position: static !important;
}
.navBar .projectNav #left {
  float: left;
  width: 50px;
  height: 50px;
  padding-left: 14px;
}
.navBar .projectNav #right {
  float: right;
  width: 50px;
  height: 50px;
  padding-left: 17px;
}

.moreProjects {
  text-align: center;
  padding: 16px;
}
.moreProjects .content {
  position: relative;
  display: inline-block;
  max-width: 300px;
  min-height: 454px;
  padding: 30px;
  margin: 16px;
  border-radius: 16px;
  background-color: #EDF0FA;
}
.moreProjects .content img {
  width: 100%;
  height: 230px;
  transition: 0.3s;
  opacity: 1;
}
.moreProjects .content img:hover {
  opacity: 0.7;
  cursor: pointer;
}
.moreProjects .content .description {
  margin-top: 32px;
  text-align: left;
  float: left;
}
.moreProjects button {
  display: block;
  margin: 0 auto;
  width: auto;
}
.moreProjects a:link {
  text-decoration: none;
  display: flex;
  justify-content: space-around;
}
@media screen and (max-width: 1245px) {
  .moreProjects .removeResponsive {
    display: none !important;
  }
}

@media screen and (max-width: 720px) {
  .content {
    min-height: 0 !important;
    padding: 20px !important;
    margin: 16px 0px !important;
  }
  .content .btn-sa {
    position: relative !important;
    bottom: 0px !important;
    width: 100%;
    margin-top: 15px;
  }

  button {
    font-size: 17px;
  }
}
.contact {
  background-color: #3C424F;
  text-align: center;
  padding: 60px 20px;
  margin-top: 30px;
}
.contact h2 {
  font-family: "Slate W01 Bold", "Open Sans Bold Bold", "SF UI Text Bold", Helvetica, Arial, sans-serif !important;
  font-size: 2.5em;
  color: #FFFFFF;
}
.contact .contactText {
  font-family: "Slate W01 Medium", "Open Sans Regular", "SF UI Text Medium", Helvetica, Arial, sans-serif;
}
.contact .contactText p, .contact .contactText span {
  color: #FFFFFF;
  margin: 0;
  margin-top: 30px;
}
.contact .contactText a {
  color: #2EAFF0;
  transition: 0.3s;
  text-decoration: none;
}
.contact .contactText a:hover {
  color: #0782BF;
}

footer {
  display: grid;
  grid-template-columns: auto auto;
  width: 96%;
  padding: 6px 2% 17px;
  font-size: 0.8rem;
  background-color: #616875;
  box-shadow: inset 0 0 10px #333;
}
footer .businessCredentials {
  text-align: right;
}
footer .businessCredentials p {
  font-size: 16px;
  color: #A2A6B1 !important;
}
footer .footerCopyright {
  text-align: left;
}
footer .footerCopyright p {
  font-size: 16px;
  color: #A2A6B1 !important;
}
footer .footerCopyright a, footer .footerCopyright span {
  color: #A2A6B1;
  transition: 0.3s;
  text-decoration: underline;
}
footer .footerCopyright a:hover {
  color: #EDF0FA !important;
}

@media screen and (max-width: 670px) {
  footer {
    display: inline-block;
    padding-bottom: env(safe-area-inset-bottom);
  }
  footer .footerNav, footer .footerCopyright, footer .businessCredentials {
    text-align: center;
    line-height: 0;
  }
}