body {
  padding:          0px;
  margin:           0px;
  background-color: #480082;
  color:            #FFFFFF;
  font-family:      'Muli', arial, helvetica;
  font-size:        20px;
}
p:last-child {
  margin-bottom:0;
}

.purple {
  font-weight: bold;
  color: #480082;
}

.yellow {
  font-weight: bold;
  color: #ffdd00;
}

.color_transitions {
  -moz-transition:    background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
  -ms-transition:     background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
  -webkit-transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
  transition:         background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
}

.size_transitions {
  -moz-transition:    width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 0.4s, transform 0.4s, top 0.4s, left 0.4s ;
  -ms-transition:     width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 0.4s, transform 0.4s, top 0.4s, left 0.4s ;
  -webkit-transition: width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 0.4s, transform 0.4s, top 0.4s, left 0.4s ;
  transition:         width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 0.4s, transform 0.4s, top 0.4s, left 0.4s ;
}

.bg_transitions {
	transition:       background 0.4s;
}

.page_section.bg {
  -moz-transition:    background-position 0s;
  -ms-transition:     background-position 0s;
  -webkit-transition: background-position 0s;
  transition:         background-position 0s;
}

.site_logo {
  padding: 5px;
  height: 55px;
  position: relative;
  transform: translate(0,23px) scale(1,0);
}

.site_logo img {
  max-width: 100%;
  max-height: 100%;
}

.inline_logo img {
  max-width: 35%;
  max-height: 100%;
}

.inline_logo {
  text-align: center;
}

section#page_header {
	width:			100%;
	padding:	  0px !important;
	z-index:		1000 !important;
  position:     fixed !important;
  max-width:    none;
  font-size:    29px;
}

.page_section.first {
  padding-top:              100px !important;
  border-top:               none !important;
  border-top-left-radius:   0 !important;
  border-top-right-radius:  0 !important;
}

section#page_header.sticky,
body.narrow_screen section#page_header {
  /*box-shadow: 	0 1px 6px rgba(0, 0, 0, 0.3);*/
  padding:            0;
  /*font-size:          24px;*/
}

section#page_header.sticky .columns_full,
body.narrow_screen section#page_header .columns_full {
  padding-top:      0px;
  padding-bottom:   0px;
  overflow:     hidden;
}

section#page_header.sticky .site_logo {
  transform: translate(0,0) scale(1,1);
  left: 10px;
}
body.narrow_screen section#page_header .site_logo  {
  display: none;
}

section#page_header.sticky nav.top_menu a {
  padding:          0px 15px;
  line-height:      2.3;
  height:           55px;
  font-size:          24px;
  color:            #480082;
}
body.narrow_screen section#page_header nav.top_menu a {
  padding: 15px 15px;
  font-size: 24px;
  line-height: normal;
  color: #FFFFFF;
}

section#page_header.sticky nav.top_menu a:hover {
  color:            #FFFF00;
  text-shadow:    1px 1px 2px #000000;
}

section#page_header.sticky nav.top_menu,
body.narrow_screen section#page_header nav.top_menu {
  background-color: #FFFFFF;
  border-bottom:    1px solid #480082;
  box-shadow:         7px 7px 7px 0px rgba(0,0,0,0.5);

}

a,
a:visited {
  color:            #480082;
}

* {
  box-sizing: border-box;
}


section:after {
  clear:            both;
  content:          "";
  display:          block;
}

nav.top_menu {
  font-family:      'Muli', cursive;
  font-size:        inherit;
  border:           1px solid transparent;
  background-image: none;

  background-color: #00000000;
  border-bottom:    1px solid #48008200;
  box-shadow:         7px 7px 7px 0px rgba(0,0,0,0);
}

nav.top_menu a {
  color:            #ffff00;
  display:          inline-block;
  font-weight:      bold;
  line-height:      2;
  padding:          10px 22px;
  text-decoration:  none;
}
#topnav {
  display:          flex;
  justify-content: center;
  flex-grow:        1;
}
#topnav a:hover {
  color: #FFFFFF;
  /* text-shadow: 2px 2px #000000; */
}

.page_section {
  display:          flex; /*to prevent the nasty margin at bottom without having to set fontsize to 0 */
  padding:          10px 0px;
  position:         relative;
  /*box-shadow:       0px 7px 7px 0px rgba(0,0,0,0.5);*/
  z-index:          10;
  margin:               auto;
  margin-bottom:    40px;

  min-height:     200px;
}

.page_section h1, .page_section h2, .page_section h3 {
  margin:           0px;
  font-family:      'Muli', cursive;
  font-weight:      bold;
  color:          #480082;
  margin-bottom:  15px;
}

/*.page_section.bg:before {
  display:          block;
  content:          "";
  height:           100%;
  width:            100px;
  left:             0px;
  position:         absolute;
  top:              0px;
  background:       -webkit-linear-gradient(left, rgba(0,0,0,1) , rgba(0,0,0,0)); 
  background:       -o-linear-gradient(left, rgba(0,0,0,1) , rgba(0,0,0,0));
  background:       -moz-linear-gradient(left, rgba(0,0,0,1) , rgba(0,0,0,0)); 
  background:       linear-gradient(left, rgba(0,0,0,1) , rgba(0,0,0,0)); 
}*/
.page_section.bg {
  background-size:      cover;
  z-index:              5;
  background-color:   rgba(0, 0, 0, 0.5);
  box-shadow:         7px 7px 7px 0px rgba(0,0,0,0.5) inset;
  border-width:       1px;
  border-color:       #480082;
  border-style:       solid none solid none;
  /* border-radius:      30px; */
  overflow:           hidden;
}
/*.page_section.bg:after {
  display:          block;
  content:          "";
  height:           100%;
  width:            100px;
  right:            0px;
  position:         absolute;
  top:              0px;
  background:       -webkit-linear-gradient(right, rgba(0,0,0,1) , rgba(0,0,0,0)); 
  background:       -o-linear-gradient(right, rgba(0,0,0,1) , rgba(0,0,0,0)); 
  background:       -moz-linear-gradient(right, rgba(0,0,0,1) , rgba(0,0,0,0)); 
  background:       linear-gradient(right, rgba(0,0,0,1) , rgba(0,0,0,0)); 
}*/

.page_section .content_width {
  position:             relative;
  z-index:              20;
}

.floating_block {
  background-color: #FFFFFF;
  border: 2px solid #480082;
  box-shadow: 5px 5px 12px -4px #000000;
  border-radius: 15px;
  color: #000000;
}

.bg_cover {
  background-color: rgba(0, 0, 0, 0.25);
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index:              10;
}
.img_credits {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 10px;
  color: #FFFFFF;
  z-index: 100;
  font-style: italic;
}

.img_credits a,
.img_credits a:visited {
  color:  #FFFFFF;
}

div.content_width {
  max-width:  960px;
  margin:     auto; 
  display:    flex;
  flex-wrap:  wrap;
}

.stemdemo {
  min-height:       150px;
  background-color: rgba(255,255,255,0.2);
  padding:          15px;
  border-radius:    4px;  
}

.stemdemo h2 {
  font-size:        20px;
  margin:           0px;
  padding:          0 0 10px 0;
}

.audio_player {
  margin-top:       15px
}

.audio_player audio {
  width:            100%;
  /*height:           100%;*/
  margin-bottom:    -5px;
}

#navigatie_button_responsive {
  background-image: url(../images/menu_button_responsive.png);
  background-repeat: no-repeat;
  background-size: 40px 40px;
  cursor: pointer;
  height: 60px;
  position: absolute;
  right: 12px;
  top: 12px;
  width: 60px;
  padding: 10px;
  display: none;
  background-color: rgba(0,0,0,.5);
  background-position: center;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.photobar {
  display:  flex;
  flex-wrap: wrap;
  justify-content: center;
}

.photobar .photo {
  width: 270px;
  height: 158px;
  display: flex;
  margin: 12px;
  background-color: #331111;
  /* border: 1px solid #480082; */
  box-shadow: 0px 0px 20px #480082; /* not 68px */
  border-radius: 20px;
  cursor: pointer;
  transition: box-shadow 0.2s ease-in-out, width 0.5s ease-in-out, height 0.5s ease-in-out, left 0.5s ease-in-out, top 0.5s ease-in-out;
  background-size: cover;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 14px 18px;
}

.photo .title {
  font-family:    'Muli', cursive;
  font-size:      25px;
  color:          #FFFFFF;
  text-shadow:    1px 1px 2px #000000;

}
.photo .subtitle {
  font-size:      15px;
  font-weight:    bold;
  color:          #FFFFFF;
  text-shadow:    1px 1px 2px #000000;
}

.photo.viewing {
  position: absolute;
  box-shadow: 0px 0px 100px #480082; /* not 68px */
}

.photobar .photo:hover {
  box-shadow: 0px 0px 68px #FFFFFF;
}

.profile_polaroid {
  perspective: 1000px;
}

.profile_polaroid svg {
  transform: rotateY(25deg) rotateZ(-5deg);
  box-shadow: -20px 10px 20px rgba(0,0,0,0.5);
  margin: 30px 10px 30px 10px;
  max-width:100%;
}

.profile_text {

}

.home_and_logo {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}
.home_and_logo .logo {
  padding-top: 80px;
}
.home_and_logo .logo img {
  max-width: 400px;
}

#home_grid {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

#home_grid .row {
  display: flex;
  flex-direction: row;
  font-weight: bold;
}

#home_grid .row .source {
  width:  50%;
  color:  #FFFFFF;
}

#home_grid .row .target {
  color: #ffff00;
}

@media (max-width: 960px) {
	#navigatie_button_responsive {
	    display: block;
	}
	
	#topnav {
    background-color: rgba(0,0,0,0.5);
    border-radius: 10px 0 10px 10px;
    margin-right: 0;
    padding: 0;
    position: absolute;
    top: 72px;
    right: 12px;
    transition: transform 0.5s ease-in-out 0s;
    z-index: 100;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    flex-direction: column;
    transform-origin: top;
    display: flex;
    flex-direction: column;
	}
  
  #topnav a {
    display:    block;
    font-size:  24px;
    padding-left:  25px !important;
    padding-right:  25px !important;
  }
  
  #topnav a:hover {
    color:      #000000;
  }
  
  #topnav.responsive_hidden {
    transform: scaleY(0);
	}
}