/*** CSS Creative Doctype ***/
/** Januari 2016 **/
html, body {
  height: 100%;
  width: 100%;
}
body{
  font-family: 'oswaldlight';
  font-size: 16px;
  line-height: 23px;
  color: #fff;

}

h2{
  font-family: 'oswalddemibold';
  font-size: 25px;
  text-transform: uppercase;
}

h3{
    font-size: 18px;
      font-family: 'oswalddemibold';
}

.no-gutter{
	margin-right: 0;
  margin-left: 0;
}

.no-gutter-col{
	padding-right:0;
  padding-left:0;
}

.clear{
  clear:both;
}

.absolute{
  position: absolute !important;
}

.indexhigh{
  z-index: 999;
}

.indexlow{
  z-index:500;
}

/**navigatie**/
.navbar{
  background-color:#000;
  border-bottom:0;
}

.navbar-default .navbar-nav > li > a{
  font-family: 'oswaldmedium';
  font-size: 18px;
  color: #fff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a.active
{
  color: #fff;
}

.navbar-header{
  padding-top:10px;
}

  .logo{
    width:150px;
    height: auto;
    padding-bottom:10px;
    margin-left: 10px;
  }

/** content**/
/*triangles*/
.toptriangle.black.right{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 400px 500px;
  background-color: transparent !important;
  border-color: transparent transparent #000000 transparent;
  float:right;
  position: relative;
}

.toptriangle.trianglesmall.black.right{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 60px 60px;
  background-color: transparent !important;
  border-color: transparent transparent #000000 transparent;
  float:right;
  margin-top: -70px;
}

.toptriangle.orange.left{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 400px 0 0 500px;
  background-color: transparent !important;
  border-color: transparent transparent transparent #ff5500;
  float:left;
  position: relative;
}


.bottomtriangle.black.left{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 400px 500px 0 0;
  background-color: transparent !important;
  float:left;
  position: relative;
  border-color: #000000 transparent transparent transparent;
}

.bottomtriangle.orange.right{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 500px 400px 0 ;
  background-color: transparent !important;
  float:right;
  position: relative;
  border-color: transparent #ff5500 transparent transparent;
}



.contentblack{
  background-color: #000;
  padding: 50px 0;
}

.contentorange{
  background-color: #ff5500;
  padding: 50px 0;
}

.contentorange a{
  color: #fff;
}

#pgnav{font-size:18px;}

/* blok1*/
#home{
  background: url(../images/m-blok1.jpg);
  background-position: center bottom;
  position: relative;
  padding: 100px 0;
  z-index:0;
  width:100%;
  height:450px;
}

#wie{
  height: auto;
  margin: 0 auto;
  position:relative;
  padding: 200px 0 0 0;
  z-index:999;
  margin-top:-200px;
}

#eventsimage{
  background: url(../images/m-events.jpg);
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
  z-index:0;
  width: 100%;
  height:450px;
}

#events{
  height: auto;
  margin: 0 auto;
  position:relative;
  padding: 200px 0 0 0;
  z-index:999;
  margin-top:-250px;
}


#beurzenimage{
  background: url(../images/m-beurzen.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
  z-index:0;
  width: 100%;
  height:450px;
}

#beurzen{
  height: auto;
  margin: 0 auto;
  position:relative;
  padding: 200px 0 0 0;
  z-index:999;
  margin-top:-250px;
}

#backlineimage{
  background: url(../images/m-backline.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
  z-index:0;
  width: 100%;
  height:450px;
}


#backline{
  height: auto;
  margin: 0 auto;
  position:relative;
  padding: 200px 0 0 0;
  z-index:999;
  margin-top:-250px;
}

#noodimage{
  background: url(../images/m-noodvoorzieningen.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center bottom;
  position: relative;
  z-index:0;
  width: 100%;
    height:450px;
}


#nood{
  height: auto;
  margin: 0 auto;
  position:relative;
  padding: 200px 0 0 0;
  z-index:999;
  margin-top:-250px;
}

#contactimage{
  background: url(../images/m-maps.png);
  background-size:cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  z-index:0;
  width: 100%;
  height:450px;
}


#contact{
  height: auto;
  margin: 0 auto;
  position:relative;
  padding: 200px 0 0 0;
  z-index:999;
  margin-top:-300px;
}

#footer{
  height: auto;
  margin: 0 auto;
  position:relative;
  z-index:999;
  background-color: #000;
  padding: 10px;
  text-align: right;
  font-size: 12px;
}

#footer a{
  color: #fff;
}

.socials{
  margin-top:20px;
}

.socials .fa{
  color: #000;
  margin-right: 10px;
}

.socials .fa:hover{
  color: #fff;
}


/* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

      .navbar-default .navbar-nav > li > a{  font-size: 12px;}
      .navbar-nav{margin-top: 13px;}

      #wie, #events, #beurzen, #backline, #nood, #contact{ padding: 200px 0;  margin-top:-650px;}
      #eventsimage, #beurzenimage, #backlineimage, #noodimage, #contactimage{height: 100%; background-size:cover;}
      #wieispgrental, #eventsenfestivals, #beurzenencongressen, #backlineservice, #noodvoorzieningen{padding: 50px 0;}
      #home{height:100%; background: url(../images/blok1.jpg) fixed; background-size:cover;}
      #wie{ margin-top:-600px;}
      #eventsimage{background: url(../images/events.jpg) fixed; background-size:cover;}
      #beurzenimage{background: url(../images/beurzen.jpg) fixed; background-size:cover;}
      #backlineimage{background: url(../images/backline.jpg) fixed;background-size:cover;}
      #noodimage{background: url(../images/noodvoorzieningen.jpg) fixed;  background-size:cover;}
      #contactimage{background: url(../images/maps.png) fixed;  background-size:cover;}
      #contact{margin-top:-550px;}

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
      .logo{width:200px; margin-left:0;}
      .navbar-default .navbar-nav > li > a:hover,
      .navbar-default .navbar-nav > li > a.active  {    border-bottom: 5px solid #ff5400;}
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        .navbar-default .navbar-nav > li > a{  font-size: 25px;}

    }