/*styles*/
@-ms-viewport { width: device-width; }

/*box modal = border-box*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }

html { font: 100%/1.5em Helvetica, Arial, sans-serif; min-height: 100%; position: relative;  }
body { font-size: 0.875em; /* 14 / 16 */ line-height: 1.5em; color: #313131; }
/*clearfix hack*/
.clearfix:after, .container:after { content: ''; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; clear: both; }
.clearfix, .container { zoom: 1; } /*voor ie*/





/*responssive design: fluid images*/
img { max-width: 100%; height: auto; }

.row { float: left; clear: both; width: 100%; }
/*centreer het spul*/
.container { width: 1024px; margin: 0 auto; } /* hier is de totale breedte */


.container .columns { float: left; padding-right: 1em; padding-left: 1em; }

/* responssive design: Fluid lay-out grid*/
  .container .columns.one { width: 8.333333%; }
  .container .columns.two { width: 16.666666% }
  .container .columns.three { width: 24.999999%; }
  .container .columns.four { width: 33.3333333%; }
  .container .columns.five { width: 41.666666%; } 
  .container .columns.six { width: 50%; }
  .container .columns.seven { width: 58.999999%; }
  .container .columns.eight { width: 66.666666%; }
  .container .columns.nine { width: 74.999999%; }
  .container .columns.ten { width: 83.333333%; }
  .container .columns.eleven { width: 91.666666%; }
  .container .columns.twelve { width: 100%; }

/* responssive design: media queries*/

/*lay-out kleiner dan 750px: alle collumns worden 50% */
@media only screen and (max-width: 750px) { 
    .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, 
    .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, 
    .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve { 
    width: 50%; }
    .container { width: 100%;} 
	background: #999;
} /*einde @media query */

@media only screen and (max-width: 450px) { 
    /*lay-out kleiner dan 450px */
    .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, 
    .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, 
    .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve { 
    width: 100%; }
    .container { width: 100%;} 
	background: #999;

}/*einde @media query */






/*website vormgeving*/
.logo{
  background: red;
  height: 100px;
}