/*Typografie*/
.Header h1 {
    display: block;
    border: 15px solid #FFF;
    border-bottom: 2px;
    text-align: left;
    line-height:50px;
    margin: 0px;
    padding:0px;
    float: left;    
}
.Header p {
    display: block;
    float: left;
    height: 20px;
    color: #333;
    text-align: left;
    border-left: 15px solid #FFF;
    margin: 0px;
}
.Header img {
    border: 15px solid #FFF;
    display: block;
    float: left;
}
.Torso img {
  width: 100%;
  height: auto;
  display: block;
}


body {
  font-family: "Courier New", Courier, monospace;
}

h1, h2, h3, h4, h5, h6, .MainNav li a {
  font-family: Helvetica, Arial, sans-serif;
}
/*Navigatie*/

ul.MainNav,
ul.MainNav li,
ul.MainNav li a {
    display: block;
    float: left;
    padding: 0px; 
}

ul.MainNav li a {
    border: 2px solid #fff;
    background-color: #FFF;
    color: #e91010;
    font-size: 20px;
    padding: 5px;
    line-height: 20px;
    padding-bottom: 2px;
    margin-bottom: 2px;
    text-decoration: none;
}

ul.MainNav li a:hover {
    color: #FFF;
    background: #E91010;
}

/*Algemeen*/
.Margin,
.Container,
.EenVijfde,
.TweeVijfde,    
.DrieVijfde,
.VierVijfde,
.VijfVijfde,
.EenDerde,
.TweeDerde,
.DrieDerde,
.Helft {
    Display: block;
    float:left;
    background-color: #FFF;
    margin: 0px;
}
.Margin {
    margin: 0% 1%;
    width:98%;
}
.Header,
.Torso,
.Footer {
    width: 100%;
    float: left;
}
/* Standaard stijlen voor alle schermen (mobile-first) */
body {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  width: 100%;
}
.ThumbnailLink {
    margin-bottom: 10px;
    display: block;
    float: left;
}
/* Tablets (portrait en landscape) */
@media only screen and (min-width: 600px) {
  /* Aanpassingen voor tablets */
    body {
        font-size: 18px;
    }
    .Header {
        border-bottom: 10px solid #E91010;
    }
    .Torso {
        border-top: 10px solid #FFF;
        border-bottom: 10px solid #FFF;
    }
    .Footer {
        border-top: 10px solid #E91010;
    }
    .Container {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .EenVijfde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .TweeVijfde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }.
    .DrieVijfde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .VierVijfde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .VijfVijfde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }  
    .EenDerde {
        width:50%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .TweeDerde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .DrieDerde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }  
    .Header h1 {
        padding-right:150px;
    }
}

/* Laptops en kleine desktops */
@media only screen and (min-width: 992px) {
  /* Aanpassingen voor grotere schermen */
  body {
    font-size: 20px;
  }
    .Container {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .EenVijfde {
        width:20%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .TweeVijfde {
        width:40%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .DrieVijfde {
        width:60%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .VierVijfde {
        width:80%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .VijfVijfde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .EenDerde {
        width:33%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .TweeDerde {
        width:66%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .DrieDerde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    }  
    .Header h1, .Header p {
        padding-right:155px;
    }
    ul.MainNav,
    ul.MainNav li,
    ul.MainNav li a{
        width: 100%; 
    }
    ul.MainNav li a {
        border: 2px solid #fff;
        background-color: #FFF;
        color: #e91010;
        font-size: 20px;
        padding: 15px 20px;
        line-height: 20px;
        margin-bottom: 10px;
        text-decoration: none;
    }
    #home ul.MainNav li a#homeButton,
    #portfolio ul.MainNav li a#portfolioButton,
    #artistStatment ul.MainNav li a#artistStatementButton,
    #info ul.MainNav li a#infoButton,
    #blog ul.MainNav li a#blogButton,
    #winkel ul.MainNav li a#winkelButton {
        background-color: #e91010;
        color: #fff;
    }
}
/* Grote desktops */
@media only screen and (min-width: 1500px) {
  /* Aanpassingen voor zeer grote schermen */
  body {
    max-width: 100%;
  }
    .Container {
        max-width:1500px;
        margin: 0 auto;
        padding: 0px;
        border: 0px solid #FFF; 
        float: none;
    }
    .EenVijfde {	
        width:300px;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .TweeVijfde {
        width:600px;
        padding: 0px;
        border: 0px solid #FFF;
    }.
    .DrieVijfde {
        width:900px;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .VierVijfde {
        width:1200px;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .VijfVijfde {
        width:1500px;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .EenDerde {
        width:33%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .TweeDerde {
        width:66%;
        padding: 0px;
        border: 0px solid #FFF;
    }
    .DrieDerde {
        width:100%;
        padding: 0px;
        border: 0px solid #FFF;
    } 
    .Header h1, .Header p {
        padding-right:155px;
    }
    ul.MainNav,
    ul.MainNav li,
    ul.MainNav li a{
        width: 100%; 
    } 
    #home ul.MainNav li a#homeButton,
    #portfolio ul.MainNav li a#portfolioButton,
    #artistStatment ul.MainNav li a#artistStatementButton,
    #info ul.MainNav li a#infoButton,
    #blog ul.MainNav li a#blogButton,
    #winkel ul.MainNav li a#winkelButton {
        background-color: #e91010;
        color: #fff;
    }
}