/* EXTERNE FONTS */

/* GEHOSTE FONTS */
@font-face {
    font-family: 'ChopinScript';
    src: url('/fonts/chopinscript-webfont.eot');
    src: url('/fonts/chopinscript-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/chopinscript-webfont.woff') format('woff'),
         url('/fonts/chopinscript-webfont.ttf') format('truetype'),
         url('/fonts/chopinscript-webfont.svg#ChopinScript') format('svg');
    font-weight: normal;
    font-style: normal;

}
@charset "UTF-8";

*
{
  box-sizing: border-box; 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}


html,
body {
 margin:0;
 padding:0;
 height:100%;
 overflow-y:hidden;
 font-family: 'Open Sans', sans-serif;
 background:#100d08;
}

header
{
  height: 130px;
  width: 100%;
  background-color:#fff;
  position: fixed;
  top:0;
  left:0;
  z-index: 20;
}

#logo
{
  width:350px;
  position: absolute;
  top:50%;
  left:50%;
  margin-left:-175px;
  -webkit-transform: translateY(-50%); 
  -ms-transform: translateY(-50%); 
  transform: translateY(-50%); 
}

#container
{
  height: 100%;
  padding-top:130px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

#sidebar
{
  position: relative;
  padding:50px 20px;
  background: rgba(74,74,74,0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#554a4a4a, endColorstr=#554a4a4a);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#554a4a4a, endColorstr=#554a4a4a)";
  width: 300px;
  height: 100%;
}

#sidebar ul
{
  padding:0;
  margin:50px 0 100px 0;
}

#sidebar ul li
{
  display: inline-block;
  width: 32%;
  text-align: center;
  color:#fff;
  font-size: 1.5em;
}

#sidebar ul li:hover
{
  border-bottom:1px solid #fff;
}

#content
{
  position: relative;
}

#content p
{
  color:#fff;
  line-height: 1.5em;
  font-size: 0.9em;
}

#line
{
  width: 100%;
  height: 1px;
  background-color: #fff;
}

#button
{
  position: relative;
  margin-top:50px;
  height: 200px;
  width: 260px;
}

#knopcontainer
{
  height: 100%;
  width: 100%;
  position: relative;
}

#knop
{
  position: relative;
  top:50%;
  -webkit-transform: translateY(-50%); 
  -ms-transform: translateY(-50%); 
  transform: translateY(-50%); 
}
#knop a
{
  display: block;
  color: #fff;
  font-size: 1.5em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding:50px 0px;
}

@media screen and (max-width: 500px) {

  #logo
  {
    width: 100%;
    position: absolute;
    left: 0;
    margin-left: 0;
  }

  #logo > *
  {
    width: 80%;
    margin-left:10%;
  }

  #button, #line, #content
  {
    display: none;
  }

  #sidebar
  {
    padding:0;
    width: 100%;
  }

  #sidebar ul
  {
    margin:0;
    display: block;
    position: absolute;
    bottom:20px;
    width: 100%;
  }

}