/* General styles */
* 
    { padding: 0; margin: 0; -webkit-font-smoothing: antialiased; }
html, 
body 
    { height: 100%; font-family: 'Open Sans', Arial, sans-serif; }
body
    { }
a 
    { text-decoration: none; color: #000; }
a.button 
    { border-radius: 5px; background: rgba(1,99,50,1) !important; color: #fff !important; padding: 7px 10px !important; font-weight: 600; font-size: 14px !important; font-weight: 400 !important; margin: 5px 15px; text-decoration: none; transition: all .3s; }
    a.button:hover
        { background: rgba(1,99,50,.8) !important; transition: all .3s; }
h1 
    { float: left; font-size: 18px; font-weight: 600; padding: 10px 15px; }
    h1:before 
        { content: ' '; float: left; display: block; background: no-repeat center url(../img/bsr_small.png); height: 25px; width: 25px; margin-right: 10px; }
        @media screen and (max-width: 480px) {
            h1:before 
                { content: none; }
        }
    h1 a 
        { color: #fff; transition: .3s color; }
h2 
    { text-indent: -9999px; }
h3 
    { padding: 40px 30px 40px 30px; color: rgba(1, 99, 50, 1); font-family: "Arvo", serif; font-size: 28px; font-weight: 600; padding-top: 125px; max-width: 1180px; margin: 0 auto; }
h4 
    { padding: 30px 10px 15px 10px; color: rgba(1, 99, 50, .8); font-family: "Arvo", serif; font-size: 16px; font-weight: 600; }
h5 
    { padding: 0 10px 0 10px; color: rgba(1, 99, 50, .6); font-family: "Arvo", serif; font-size: 14px; font-weight: 400 }
    h5 a
        { font-weight: 600 }
p 
    { padding: 0 10px 20px 10px; font-size: 15px; line-height: 140%; }
    p.item
        { color: rgba(1, 99, 50, 1); font-family: "Arvo", serif; padding: 25px 15px 15px 10px; transition: all 1s; }
ul 
    { padding: 0 10px 20px 10px; margin-left: 30px; font-size: 15px; line-height: 140%; }
li 
    { margin: 0 0 5px 10px; }
.text 
    { background: rgba(255,255,255,.8); padding: 15px 10px 0px 10px; margin: 5px; overflow: hidden;}
.text.contact 
    { margin-left: 50px; }
.section p.question
    { color: rgba(1, 99, 50, 1); font-family: "Arvo", serif; padding-bottom: 10px; }
.topic
    { color: rgba(1, 99, 50, .6); font-weight: 600 }
.bsr
    { color: rgba(1, 99, 50, .6) }
.important
    { background: rgba(198, 207, 60, .2); }
.caption
    { text-align: center; font-size: 12px; font-style: italic; padding-top: 0; margin-top: 5px; }
.name 
    { font-size: 18px; font-weight: 600; }
    .name:before 
        { content: ' '; float: left; display: block; background: no-repeat center url(../img/bsr_small.png); height: 25px; width: 25px; margin-right: 10px; }
.emph
    { font-style: italic; }

/* Section layout */ 
.section 
    { min-height: 100%; padding: 0 10px; overflow: auto; }
    .section a
        { color: #fff; background: rgba(1,99,50,1); transition: all .3s; border-radius: 5px; font-weight: 600; transition: all .3s; padding: 0 2px; }
        .section a:hover
            { transition: all .3s; background: rgba(1, 99, 50, .8); color: #fff; }
        .section a.underline
            { border-bottom: 2px solid rgba(1, 99, 50, .6); }
.row 
    { clear: left; overflow: hidden; }
.push-single
    { padding-left: 0; transition: all 1s; }
.column-single, .column-double, .column-triple
    { margin: 0; float: left; overflow: hidden; transition: all 1s; }
    .column-single 
        { width: 50%;  }
    .column-double
        { width: 100% }
        .column-double 
            { -moz-column-count: 2; -moz-column-gap: 0; -webkit-column-count: 2; -webkit-column-gap: 0; }
@media screen and (max-width: 980px) {
    .column-single, .column-double, .column-triple
        { margin: 10px 0; float: left; border-radius: 5px; overflow: hidden; transition: all 1s; }
    .column-single 
        { width: 100%  }
    .column-double
        { width: 100% }
        .column-double 
            { -moz-column-count: 1; -moz-column-gap: 0; -webkit-column-count: 1; -webkit-column-gap: 0; }
}

/* Navigation layout */
#navigation 
    { position: fixed; top: 0; left: 0; right: 0; background: none; padding: 10px; z-index: 200; transition: .3s background; }
    #navigation.white 
        { background: #fff; background: rgba(255,255,255,.98); box-shadow: 0 1px 0 rgba(0,0,0,.2); transition: .3s background; }
        #navigation.white h1 a 
            { color: #000; transition: .3s color; }
        #navigation.white .menu ul li a 
            { color: #000; transition: all .3s; }
            #navigation.white .menu ul li a:hover 
                { color: rgba(0,0,0,.6); transition: all .3s; }

/* Menu */
#menu-button
    { float: right; z-index: 200; padding: 10px 12px; font-size: 14px; display: none; }
.menu
    { float: right; z-index: 200; }
    .menu ul
        { padding: 0 10px 0 0; margin: 0; }
    .menu ul li 
        { float: left; list-style: none; top: 0; left: 0; margin: 0; padding: 0; }
        .menu ul li a 
            { display: block; padding: 2px 0px; margin: 10px 12px; color: #fff; font-size: 14px; font-weight: 400; transition: all .3s; }
            .menu ul li a:hover
                { color: rgba(255, 255, 255, .8); transition: all .3s; }   
            .menu ul li a.button 
                { padding: 6px 10px; margin: 5px 5px 5px 15px; }
        .menu ul li a.selected
            { color: rgba(1, 99, 50, 1) !important; transition: all .3s; border-bottom: 4px solid rgba(1, 99, 50, 1); margin: 8px 12px; }
            .menu ul li a.selected:hover
                { color: rgba(1, 99, 50, .6) !important; transition: all .3s; border-bottom: 4px solid rgba(1, 99, 50, .6); }
    @media screen and (max-width: 940px) {
        #menu-button
            { display: block; }
        .menu, #navigation.white .menu
            { position: absolute; top: 50px; right: 10px; clear: both; margin: 5px 15px; padding: 5px 10px; z-index: 200; width: 250px; background: rgba(0,0,0,.9); border-radius: 5px;}
            .menu.hide
                { display: none; }
            .menu ul 
                { padding: 0; margin: 0; }
            .menu ul li, #navigation.white .menu ul li
                { float: none; list-style: none; display: block; }
                .menu ul li a, #navigation.white .menu ul li a  
                    { display: block; padding: 8px 10px; border-radius: 5px; margin: 10px 2px; color: #fff !important; font-size: 14px; font-weight: 400; transition: all .3s; }
                    .menu ul li a:hover, #navigation.white .menu ul li a:hover  
                        { color: #fff !important; background: rgba(255, 255, 255, .1); transition: all .3s; }
                .menu ul li a.button
                    { padding: 6px 10px !important; margin: 10px 2px !important; font-size: 16px !important; }
                .menu ul li a.selected, #navigation.white .menu ul li a.selected
                    { color: #fff !important; background: rgba(255, 255, 255, .2); transition: all .3s; border-bottom: none; }
                    .menu ul li a.selected:hover, #navigation.white .menu ul li a.selected:hover
                        { color: #fff !important; background: rgba(255, 255, 255, .3); transition: all .3s; border-bottom: none; }
    }

/* Special style overrides per section */
#header-background
    { background: #000 url(../img/bsr_header.jpg) center no-repeat; background-size: cover; position: fixed; width: 100%; top: 0; z-index: -50; height: 100%; padding: 0; margin: 0; }
#header 
    {  }
    #header .section-container 
        { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; background: url(../img/bsr_big.png) center no-repeat; transition: opacity 1s; }
        @media screen and (max-width: 810px) {
            #header .section-container
                { background-size: contain; }
        }
        #header .section-container.hide 
            { opacity: 0; transition: opacity 1s; }
    #header #scroll-down 
        { background: url(../img/scrolldown.png) bottom no-repeat; position: absolute; text-align: center; bottom: 0; margin: 15px 0; padding: 0 0 50px 0; width: 100%; left: 0; color: rgba(255,255,255,0); font-size: 12px; font-family: "Arvo", serif; text-decoration: none; transition: all 1s; }
        #header #scroll-down:hover 
            { color: rgba(255,255,255,1); transition: all .3s; }
        #header #scroll-down.hide 
            { bottom: -30px; opacity: 0; transition: all .3s; }
#welkom
    { }
#welkom.section p, 
#welkom.section ul
    { font-size: 17px; }
#footer p 
    { padding: 20px; text-align: center; font-size: 12px; color: #fff; background: #000; }
#content 
    { background: #fff url(../img/bsr_back.png) center top repeat-y; z-index: 100; min-height: 100%; padding-bottom: 50px; overflow: auto; }

/* Images */
#photo-gerda
    { display: block; width: 360px; height: 460px; background: url(../img/gerda.jpg) center no-repeat; margin: 0 auto; }
#photo-opleiding
    { display: block; width: 450px; height: 355px; background: url(../img/opleiding.png) center no-repeat; margin: 0 auto; }
#photo-praktijk1
    { display: block; width: 355px; height: 450px; background: url(../img/praktijk1.png) center no-repeat; margin: 0 auto; }
#photo-praktijk2
    { display: block; width: 450px; height: 355px; background: url(../img/praktijk2.png) center no-repeat; margin: 0 auto; }
#photo-academy
    { display: block; width: 460px; height: 180px; background: url(../img/academy.png) center no-repeat; margin: 0 auto; }
#photo-gailewald
    { display: block; width: 195px; height: 265px; background: url(../img/gailewald.png) center no-repeat; margin: 0 auto; }
#photo-body
    { margin-bottom: 20px; position: relative; font-size: 14px; display: block; width: 600px; height: 640px; background: url(../img/body.png) center no-repeat; background-size: contain; margin: 50px auto 50px auto; }
    #photo-body .oorzaak-indicator
        { position: absolute; background: rgba(255,255,255,.6); padding: 2px 4px; border-radius: 10px; transition: all .3s; cursor: default; }
    #photo-body .oorzaak-indicator:hover
        { background: rgba(255,255,255,1); transition: all .3s; }

.box
    { background: rgba(255,255,255,.7); padding: 20px; max-width: 1200px; margin: 0 auto; border-radius: 5px; }