html, body { width: 100%; height: 100%; margin: 0;}

@font-face {
  font-family: "Purista";
  src: url("/fonts/Purista-Medium.woff") format("woff");
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("ttf");
}



@media only screen and (min-width: 600px) {
  .hide-on-desktop {
    display: none !important;
  }
}

@media only screen and (max-width: 600px) {
  .hide-on-mobile {
    display: none !important;
  }
}

body {
  font-family: "Inter";
  font-size: 17px;
}


#linkstyle a{
  color: black;
}
#linkstyle a:link {
  text-decoration: none;
}
#linkstyle a:visited {
  text-decoration: none;
}
#linkstyle a:hover {
  text-decoration: non;
  color: white;
}
#linkstyle a:active {
  text-decoration: none;
}

.aboutLink a{
  color: black;
}
.aboutLink a:link {
  text-decoration: none;
}
.aboutLink a:visited {
  text-decoration: none;
}
.aboutLink a:hover {
  text-decoration: non;
  color: white;
}
.aboutLink a:active {
  text-decoration: none;
}


span {
  font-family: Purista;
  font-size: 15px;
}

span:hover {
  color: white;
}

#absoluto {
  position: fixed;
  height: 150px;
  background-color: purple;
  z-index: 1;
}


.halloBlue {
  height: 150px;
  background-color: #194cf5;}

.halloPeach {
  height: 150px;
  background-color: #ffb6a1;
}

.halloBlue p {
  bottom: 0;
  position: absolute;
}

.halloPeach .aboutLink {
    bottom: 0;
    position: absolute;
}

.header {
  width: 100%;
  z-index: 3;
  position: fixed;
}

.row {
  box-sizing: border-box;
  margin: auto;
}

.content {
  z-index: 2;
}

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 32px;
}

.blue {
  height: 32px;
  background-color: #194cf5;
  color: black;
}

.peach {
  height: 32px;
  background-color: #ffb6a1;
  color: black;
}

#endL {
  height: 78px;
  background-color: #194cf5;
}

#endR {
  height: 78px;
  background-color: #ffb6a1;
  
}

.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: white;
}

#textR {
  text-align: right;
  padding-top: 3.5px;
  /* color: black; */
  /* text-decoration-color: black; */
}

#textR:hover {
color: white;
}

#textL {
  padding-top: 3.5px;
}


.aboutText {
  text-align: left;
  padding-top: 1.5px;
  color: black;
  line-height: 20px;
}

.aboutText {
  text-align: left;
  padding-top: 1.5px;
  color: black;
  line-height: 20px;
}


p {
  margin-top: 0px;
  margin-bottom: 0.30rem;
}

.col-xs-6 {
  width: 50%;
}
.col-xs-4 {
  width: 50%;
}

.col-xs-9 {
  width: 90%;
}
.col-xs-1 {
  width: 10%;
}

.suede {
  background-color: #f7c5fc;
}
.lila{
  background-color: #b270fb;
}
.acru {
  background-color: #cfc7a6;
}
.turquize{
  background-color: #075911;
}
.lavendel{
  background-color: #34543b;
}
.sun {
  background-color: #f6fc7e;
}
.schimmel{
  background-color: #02e38d;
}
.bordeau{
  background-color: #61462e;
}
.geel{
  background-color: #f6fcc0;
}
.paars{
  background-color: #6f20c9;
}
.leger{
  background-color: #d2ff73;
}
.lime{
  background-color: #81fcb0;
}
.pink{
  background-color: #ff4fe5;
}
.grijs{
  background-color: #c2c2c2;
}
.ocean{
  background-color: #c4c3fa;
}
.sky{
  background-color: #ccf8fc;
}
.oranje{
  background-color: #d64727;
}
.anders{
  background-color: #8c968a;

}
.rood{
  background-color: #1a1270;
}

.projectImage{
  visibility: inherit;
  object-fit: cover;
  box-sizing: border-box;
  width: 100%;

}
.noPadding{
  padding:  0px;
}
.blokContent .my-btn{
  position: absolute;

}

.mobile-btn {
  font-family: Purista;
}

.mobile-btn a:link {
  text-decoration: none;
}

.mobile-btn a:visited {
  text-decoration: none;
}

.mobile-btn a:hover {
  text-decoration: non;
  color: white;
}

.mobile-btn a:active {
  text-decoration: none;
  color: white;
}




#next_btn {
  text-align: right;

  bottom: 0px;
  right: 10px;
  cursor: url("next.png"), auto;
  z-index: 3;
}

#prev_btn {
  text-align: left;
  cursor: url("prev.png"), auto;
  bottom: 0px;
  left: 10px; /*your button position*/
}
.my-btn {
  font-size: 100%;
  font-family: Purista;
  border: 0;
  padding: 0;
  top: 50px;
  bottom: 0px;
  width: 50%;
  opacity: 0; /* Standard compliant browsers */
    -moz-opacity: 0; /* Firefox and Mozilla browsers */
     -webkit-opacity: 0; /* WebKit browser e.g. Safari */
     filter: alpha(opacity=0); /* For IE8 and earlier */
     /* background: rgba(0, 0, 0, 0); */
     zoom: 0;  /* Fix for IE7 */
}

#mobile-prev {
  font-family: Purista;
  text-decoration: none;
  padding: 8px 16px;
  position: absolute;
  top: 88%;
  font-size: 15px;
  left: 0;
}


#mobile-nxt {
  font-family: Purista;
  text-decoration: none;
  padding: 8px 16px;
  position: absolute;
  top: 88%;
  font-size: 15px;
  right: 0; 
}




.blok:hover  .blokContent{
  visibility: visible;
}

.blokContent{
  visibility: hidden;
}

.plaatjesInfo {
  padding-top: 5px;
  padding-left: 14px;
  text-align: left;

}