@font-face {
  font-family: "SurogatComprStdLt";
  font-style: normal;
  font-weight: normal;
  src: local("SurogatComprStdLt"), url("https://static.nrc.nl/vorm/_includes/_fonts/SurogatComprStd-Lt.woff") format("woff");
}
body {
  overflow: initial !important;
}

.has-no-nmt-layout-sidebar .article-outer-container .article-container {
  max-width: 748px;
}

.scrolly {
  position: relative;
  margin-bottom: 5%;
  padding-bottom: 2%;
}
.scrolly .sticky {
  width: calc(100% - 10px);
  position: sticky;
  z-index: -1;
  top: calc(50% - 300px);
  margin-top: 10px;
}
@media (min-width: 480px) {
  .scrolly .sticky {
    top: calc(50% - 280px);
  }
}
.scrolly .sticky h2 {
  padding: 2% 0 1% 0;
  font-family: "LFT Etica", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial", sans-serif;
}
.scrolly .hidden {
  opacity: 0;
}
.scrolly .image {
  position: absolute;
  width: 100%;
}
.scrolly .stickytxt {
  position: absolute;
  margin: 0;
  font-family: "LFT Etica", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial", sans-serif;
  font-weight: 600;
  color: #fff;
}
@media (min-width: 480px) {
  .scrolly .stickytxt {
    font-size: 80%;
  }
}

.scrollsteps {
  position: relative;
  max-width: 75%;
  margin: 0 auto;
  padding: 0 12px !important;
  background: url(background);
  pointer-events: none;
}
@media (min-width: 480px) {
  .scrollsteps {
    max-width: 95%;
  }
}
.scrollsteps .groot {
  display: inline;
  font-size: 175%;
  font-weight: 600;
}
@media (min-width: 480px) {
  .scrollsteps .groot {
    font-size: 150%;
  }
}
@media (min-width: 480px) {
  .scrollsteps .inline {
    display: inline;
  }
}
.scrollsteps p {
  padding: 2% 3% 3% 3%;
  border: solid 1px #454545;
  color: #040404 !important;
  font-family: "LFT Etica", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial", sans-serif;
  line-height: 1.5em;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 480px) {
  .scrollsteps p {
    margin-top: -33px;
    font-size: 90%;
    line-height: 1.3em;
  }
}
.scrollsteps p.leeg {
  border: none;
  background-color: rgba(255, 255, 255, 0);
}
.scrollsteps p.middel {
  margin-left: 10%;
  margin-right: 10%;
}
.scrollsteps p.middel-toren {
  margin-left: 20%;
  margin-right: 20%;
  background-color: rgba(188, 187, 183, 0.95);
}

.step > div {
  padding: 2% 3% 3% 3%;
  border: solid 1px #454545;
  color: #040404 !important;
  font-family: "LFT Etica", "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "Arial", sans-serif;
  line-height: 1.5em;
  font-weight: 400;
  background-color: rgba(255, 255, 255, 0.9);
}
@media (min-width: 480px) {
  .step > div {
    margin-top: -33px;
    font-size: 90%;
    line-height: 1.3em;
  }
}

.placeholder {
  position: relative;
  width: 100%;
  opacity: 0;
}

.microstep {
  margin-bottom: 15vh;
}

.smallstep {
  margin-bottom: 40vh;
}
.smallstep p {
  display: block !important;
}

.mediumstep {
  margin-bottom: 65vh;
}

.bigstep {
  margin-bottom: 90vh;
}

.laststep {
  margin-bottom: 100vh;
}

.hidden {
  opacity: 0;
}

.show {
  opacity: 1;
}

.showtransition {
  opacity: 1;
  -webkit-transition: opacity 2s; /* Safari prior 6.1 */
  transition: opacity 2s;
}

.slowtransition {
  opacity: 1;
  -webkit-transition: opacity 4s; /* Safari prior 6.1 */
  transition: opacity 4s;
}

.hidetransition {
  opacity: 0;
  -webkit-transition: opacity 2s; /* Safari prior 6.1 */
  transition: opacity 2s;
}

/*
p.etica {
	font-family: "LFT Etica", sans-serif;
}
.bold {
  font-weight:600;
}
.redbold {
  font-weight:600;
  color:#d30910;
}

.halfwidth {
	width: 50%;
	margin: 0 auto;

	@media (min-width: $mobileLandscape) {
		width: 100%;
	}
}

.dot {
	height: 15px;
	width: 15px;
	background-color: #d30910;
	border-radius: 50%;
	display: inline-block;
	margin-left: -19px;
}

.fotoblok , 
.graphicwrapper {
	position: relative;
}

.bold {
	font-weight: 600;
}

.redbold {
	font-weight: 600;
	color: #d30910;
}

// polyfill voor CSS position:sticky (IE)
.sticky:before,
.sticky:after {
	content: '';
	display: table;
}

.bigscreen { 
	display: block; 
}

.smallscreen {
	display: none;
	visibility: hidden;
}

@media screen and (max-width:500px) {
	.bigscreen { 
		display: none !important; 
	}
	.smallscreen { 
		display: block; 
		visibility: visible; 
	}
}

@media (min-width: $mobileLandscape) {
	.juxtatxt {
		max-width: 95%;
	}	
}

*/