/* Global */

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: Merriweather Sans, "Trebuchet MS", Helvetica, sans-serif;
    font-size: 11pt;
    background-color: #ddd;
    background:url('../img/bg.png') repeat;
}

/*Layout*/

#wrapper {
    width:100%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 7px #bbb;
}

header {
    overflow: hidden;
    background-color: #eee;
}

header img {
    float: left;
    margin: 3.5% 3%;
    width:96%;
    max-width:550px;
}

header a:focus img {
    border: 1px dashed #708090;
}

main {
    clear: both;
    margin: 3% 4%;
    overflow:hidden;
    display:block;
}

main:focus {
    outline:none;
}

#upper {
    margin: 0 auto;
    max-width:98%;
    overflow:hidden;
}

#lower {
    margin: 0 auto;
    overflow:hidden;
    max-width:99%;
}

#lower section {
    background-color: #fff;
    vertical-align: top;
}

.content {
    margin: 0 4%;
}

footer {
    background-color: #eee;
    clear: both;
    padding: 2em;
    margin-top: 2em;
    text-align: center;
    font-size:.7em;
}

.foto figcaption {
    font-size:.9em;
    color:#555;
}

/*Opmaak*/

.icon {
    display:none;
    visibility: hidden;
}

p {
    line-height: 1.65em;
    font-size: 1em;
    color:#222;
}

main p {
    margin: 1em 0 0 0;
}
    
strong {
    font-weight:700;
    color: #2B784B;
}

blockquote {
    font-family: Merriweather, Georgia, serif;
    font-weight:400;
    font-style: italic;
    font-size:1em;
    text-indent:.7em;
    line-height: 1.5em;
    overflow:hidden;
    background: #f8f8f8;
    border-left: 4px solid #ccc;
    margin: .5em 3%;
    padding: 0.5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 2em;
    line-height: 0.1em;
    margin-right: 0.12em;
    vertical-align: -0.5em;
}

blockquote p {
    display: inline;
}

.auteur {
    font-size:.7em;
    font-style:normal;
    float:right;
    display:block;
    margin: 10px 5px 3px 0;
}

h1 {
    font-size:1.5em;
    font-family: Merriweather, Georgia, serif;
    font-weight: 600;
    color: #2B784B;
    margin: 1.15em 0 .7em 0;
}

h2 {
    color: #2B784B;
    margin: 1.35em 0 .1em 0;
    font-weight: 400;
    font-size:1.2em;
}

main li {
    line-height: 1.65em;
    list-style: none;
    margin-left:6px;
}

main li:before {
    content:"-";
	position:relative;
	left: -6px;
}

main a {
    color: #2B784B;
}

main a:hover, main a:focus {
    text-decoration: none;
}

.actie {
    display:block;
    margin:.5em 0 1.2em 0;
    padding:.2em;
    max-width: 345px;
    text-decoration: none;
    font-size: 1.5em;
    text-align:center;
    color: #2B784B;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius:10px;
    transition: background-color .30s, border-color .30s;
}

.actie:hover, .actie:focus {
    background-color: #ccc;
    border-color: #bbb;
}

.h-card {
    margin-bottom:1em;
}

.h-card p {
    margin:0;
    display: block;
}

.small strong, .small a{
    display: block;
    margin:0 !important;
}

.small p {
    margin-bottom:1em;
}

#skip-nav {
    position: absolute;
    left: -999em;
    color:#2B784B;
    font-size:1.2em;
}

#skip-nav:focus {
    position:relative;
    left: 10px;
    margin: 0 auto;
    display:block;
}

footer a {
    color: #2B784B;
}

footer a:hover, footer a:focus{
    text-decoration: none;
}

/* Navigation  */

nav {
    clear: both; 
}

nav ul {
    list-style-type: none; 
}

nav a {
    width:100%;
    display:block;
    padding: 10px 0 10px 20px;
    text-decoration: none;
    font-size:1.5em;
    color: #2B784B;
    background-color: #eee;
    border-bottom: 1px solid #999;
    transition: background-color .30s;
}

nav a:hover, nav a:focus {
    background-color: #ccc;
}

nav a.actief {
    background-color: #2B784B;
    color:#eee;
}

nav a.actief:focus {
    background-color: #365844;
}

/* RESPONSIVE
De mediaqueries zijn gebaseerd op Bootstrap: http://stackoverflow.com/questions/18814930/what-are-the-common-media-queries-when-building-responsive-site
*/

img {
    max-width: 100%;
}

/*Landscape phone to portrait tablet*/
@media (min-width: 30em) {
    .caption {
        line-height: 1.6em;
    }
    blockquote {
        font-size:1.1em;
        margin:1.3em inherit;
    }
    blockquote:before {
        font-size:3em;
    }
    .auteur {
        font-size:.8em;
    }
}

/* #3- Portrait tablet to landscape and desktop */
@media (min-width: 48em) {
    nav a {
        float: left;
        width: 20%;
        padding: 0;
        padding-top:10px;
        text-align: center;
        border-bottom: none;
        height:40px;
        font-size:1.2em;
    }
    nav ul {
        border-top: 8px solid #2B784B;
    }
    .home h1 {
        margin-bottom:.3em;
        margin-left:120px;
    }
    .home  p {
        margin-left:120px;
    }
    .home ul {
        margin-left:120px;
    }
    .home a {
        margin-left:120px;
    }
    .foto {
        float:right;
        margin:1.5em;
        margin-top:0;
        max-width:50%;
    }
    .icon {
        display:block;
        visibility:visible;
        float:left;
        opacity: .25;
        background-image:url('../img/sprites.png');
        background-size:80px 184px;
        width:80px;
        height:61px;
    }
    .caption {
        line-height: 1.7em;
    }
    blockquote {
        font-size:1.1em;
        margin:1.3em inherit;
    }
    blockquote:before {
        font-size:3em;
    }
    .auteur {
        font-size:.8em;
    }
}

/* #3- Regular sized laptops */
@media (min-width: 61.25em) {
    #lower section {
        width: 25%;
        float: left;
        margin: 4.16666666%;
    }
    .contact #lower section {
        width: auto !important;
        margin: 0;
        margin-right: 10% !important;
    }
    nav a {
        font-size:1.5em;
    }
    .home h1 {
        margin-left: 0;
        margin-bottom: .5em;
    }
    .home p {
        margin-left:0;
    }
    .home ul {
        margin-left:0;
    }
    .home a {
        margin:0;
    }
    .actie {
        font-size:1.15em;
        margin-left:0;
        margin-top:1.5em;
        text-decoration: underline;
        display:inline;
        border:none;
        background-color: #fff;
    }
    .actie:hover, .actie:focus{
        text-decoration: none;
        background-color: #fff;
    }
    .icon {
        background-size:93px 213px;
        margin-bottom: 35px;
        float:none;
        width:93px;
        height:71px;
    }
    blockquote {
        font-size:1.2em;
        margin:1.5em inherit;
    }
}

/* #1- Large desktop */
@media (min-width: 75em) {
    #wrapper {
        width:100%;
        max-width: 1050px;
    }
}

/*! responsive-nav.js 1.0.32 by @viljamis 
http://responsive-nav.com/ */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
    background: url('../img/menu.png') no-repeat;
    background-position: 98% 10px; 
    height:27px;
    width:100%;
    display:block;
    float:right;
    overflow:hidden;
    padding:2%;
    margin-bottom: .8em;
    text-decoration: none;
    font-size:1.5em;
    color:#2B784B;
    font-family:Merriweather Sans;
    border-top: 8px solid #2B784B;
    
}

@media screen and (min-width: 48em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}