body {
  padding:          0px;
  margin:           0px;
  background-color: #000000;
  color:            #FFFFFF;
  font-family:      'Quicksand', arial, helvetica;
  font-size:        20px;
   background-image: url('../images/background_repeating.jpg');
  background-position:  center center;
  background-size:  40%;
}

.size_transitions {
  -moz-transition:    width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 0.4s;
  -ms-transition:     width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 0.4s;
  -webkit-transition: width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 0.4s;
  transition:         width 0.4s, height 0.4s, line-height 0.4s, padding 0.4s, font 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 img {
  max-height: 75px; 
}

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 img,
body.narrow_screen section#page_header .site_logo img {
  max-height:       50px; 
  margin-bottom:    -10px;
}

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

section#page_header.sticky nav.top_menu,
body.narrow_screen section#page_header nav.top_menu {
  background-color: #000000;
  border:           1px solid #c0e5f8;
  border-top:       none;
}

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

* {
  box-sizing: border-box;
}


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

nav.top_menu {
  font-family:      'Shadows Into Light', cursive;
  font-size:        inherit;
  border-radius: 0 0 30px 30px;
  border:           1px solid transparent;
}

nav.top_menu a {
  color:            #ffffff;
  display:          inline-block;
  float:            left;
  font-weight:      bold;
  line-height:      2;
  padding:          10px 22px;
  text-decoration:  none;
}

#topnav a:hover {
  background-color:      #c0e5f8;
}

.page_section {
  padding:          10px 0px;
  position:         relative;
  /*box-shadow:       0px 7px 7px 0px rgba(0,0,0,0.5);*/
  z-index:          10;
 /*
 background-color: #000000; 
 background-image: url('../images/background_repeating.jpg');
  background-position:  center center;
  background-size:  40%;*/
  max-width:            1200px;
  margin:               auto;
}

.page_section h1 {
  margin:           0px;
  
}

/*.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;
  box-shadow:           none;
  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:             1px solid #c0e5f8;
  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;
}

.bg_cover {
  background-color: rgba(0, 0, 0, 0.25);
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index:              10;
}

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

.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: contain;
    cursor: pointer;
    display: none;
    height: 25px;
    position: absolute;
    right: 35px;
    top: 12px;
    width: 25px;
}

@media (max-width: 960px) {
	#navigatie_button_responsive {
	    display: block;
	}
	
	#topnav {
	    background-color: #000000;
	    border-radius: 0 0 30px 30px;
	    float: none;
	    margin-right: 0;
	    padding: 0;
	    position: absolute;
	    right: 35px;
	    top: 50px;
	    /*transition: max-height 0.5s ease-in-out 0s;*/
	    z-index: 100;
	    box-shadow: 	0 1px 6px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      max-height: 280px;
	}
  
  #topnav a {
    display:    block;
    float:      none;
    color:      #c0e5f8;
    font-size:  24px;
    padding-left:  25px !important;
    padding-right:  25px !important;
  }
  
  #topnav a:hover {
    color:      #000000;
  }
  
  #topnav.responsive_hidden {
    max-height: 0;
	}
}