/* http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html */
.photo {
    background-attachment: fixed;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: auto 200vh;
    background-color: white;

    height: auto;
    overflow:auto;
    position: relative;
    z-index: 0;
    padding: 10px;
}

.photo.p_welkom_zacht .textbox {
    width: 600px;
    max-width: 90%;
    margin: 350 auto;
    font-style: italic;
}
.photo.p_welkom_zacht .textbox span { width: 100%; display: block;}
.photo.p_welkom_zacht .textbox span.txtleft { text-align: left; }
.photo.p_welkom_zacht .textbox span.txtright { text-align: right; }

.photo .xboxes {
    width: 80%;
    margin: 250 auto;
    padding: 0px;
    height: auto;
    overflow: auto;
    display: inline-block;
    xbackground: pink;
}
.photo .xbox {
    border: 0px solid #fff;
    border-radius: 30px;
    width: 80%;
    margin: 10px;
    padding: 20px;
    height: auto;
    overflow: auto;
    display: inline-block;
    background-size: cover;
    color: white;
}
.photo .xbox h3 { color: white; }
.photo .xbox a { color: white; font-style: italic; display: block; float: right; }

/* Search pictures on color: https://labs.tineye.com/multicolr/ */

.page_index      header {background-image: url(../img/bg/top_index.jpg);}
.page_massages   header {background-image: url(../img/bg/top_massages.jpg);}
.page_steven     header {background-image: url(../img/bg/top_steven.jpg);}
.page_nieuws     header {background-image: url(../img/bg/top_nieuws.jpg);}
.page_contact    header {background-image: url(../img/bg/top_contact.jpg);}

.page_corona     header {background-image: url(../img/bg/corona.jpg);}
.page_huidhonger header {background-image: url(../img/bg/huidhonger-7285.jpg);}
.page_privacy    header {background-image: url(../img/bg/privacy.jpg);}
.page_akkoord    header {background-image: url(../img/bg/privacy.jpg); height: 25%;}
.page_gasten     header {background-image: url(../img/bg/gasten.jpg);}
.page_protocol   header {background-image: url(../img/bg/protocol.jpg); }

.page_admin      header {background-image: url(background.jpg); height: 25%;}

.page_doneereenbon header {background-image: url(../img/bg/top_doneereenbon.jpg);}
.photo.p_doneereenbon     {background-image: url(../img/bg/p_doneereenbon.jpg);}

.photo.p_welkom_zacht         { background-image: url(../img/bg/1_blauw/welkom_zacht.jpg); }
.photo.p_welkom_boxes         { background-image: url(../img/bg/1_blauw/welkom_boxes.jpg); }

.photo .xbox.blauw  { background-image: url(../img/bg/1_blauw/c1-clouds.jpg); float: left; }
.photo .xbox.groen  { background-image: url(../img/bg/1_blauw/c2-waterdrop.jpg); float: right; }
.photo .xbox.geel   { background-image: url(../img/bg/1_blauw/c3-chrysanthemum.jpg); float: left; }
.photo .xbox.rood   { background-image: url(../img/bg/1_blauw/c4-strawberry.jpg); float: right; }
.photo .xbox.marine { background-image: url(../img/bg/1_blauw/c5-stars.jpg); margin: auto auto; }

.photo.p_massages_zacht       { background-image: url(../img/bg/2_groen/massage_zacht.jpg); }
.photo.p_massages_ontspan     { background-image: url(../img/bg/2_groen/massage_ontspan.jpg); }
.photo.p_massages_pulse       { background-image: url(../img/bg/2_groen/massage_pulse.jpg); }
.photo.p_massages_shamballa   { background-image: url(../img/bg/2_groen/massage_shamballa.jpg); }

.photo.p_massages_eerste      { background-image: url(../img/bg/2_groen/massage_eerste.jpg); }
.photo.p_massages_drie        { background-image: url(../img/bg/2_groen/massage_drie.jpg); }
.photo.p_massages_maatwerk    { background-image: url(../img/bg/2_groen/massage_maatwerk.jpg); }
.photo.p_massages_filosofie   { background-image: url(../img/bg/2_groen/massage_filosofie.jpg); }

.photo.p_massages_oprecht     { background-image: url(../img/bg/2_groen/massage_oprecht.jpg); }
.photo.p_massages_lichamelijk { background-image: url(../img/bg/2_groen/massage_lichamelijk.jpg); }
.photo.p_massages_mentaal     { background-image: url(../img/bg/2_groen/massage_mentaal.jpg); }
.photo.p_massages_medicijn    { background-image: url(../img/bg/2_groen/massage_medicijn.jpg); }

.photo.p_steven_welkom        { background-image: url(../img/bg/3_geel/steven_welkom.jpg); background-color: pink;}
.photo.p_steven_motivatie     { background-image: url(../img/bg/3_geel/steven_motivatie.jpg); background-color: yellow;}
.photo.p_steven_vertrouwen    { background-image: url(../img/bg/3_geel/steven_vertrouwen.jpg); }

.photo.p_nieuws_nieuws        { background-image: url(../img/bg/4_rood/nieuws_nieuws.jpg); }
.photo.p_nieuws_reviews       { background-image: url(../img/bg/4_rood/nieuws_reviews.jpg); }
.photo.p_nieuws_nieuwsbrieven { background-image: url(../img/bg/4_rood/nieuws_nieuwsbrieven.jpg); }

.photo.p_contact_contact      { background-image: url(../img/bg/5_marine/contact_contact.jpg); }
.photo.p_contact_tarieven     { background-image: url(../img/bg/5_marine/contact_tarieven.jpg); }
.photo.p_contact_locatie      { background-image: url(../img/bg/5_marine/contact_locatie.jpg); }
.photo.p_contact_faq          { background-image: url(../img/bg/5_marine/contact_faq.jpg); }

.photo.p_protocol_inleiding   { background-image: url(../img/bg/x_purple/protocol_drops1.jpg); }
.photo.p_protocol_principes   { background-image: url(../img/bg/x_purple/protocol_flower1.jpg); }
.photo.p_protocol_regels      { background-image: url(../img/bg/x_purple/protocol_flowers1.jpg); }
.photo.p_protocol_links       { background-image: url(../img/bg/x_purple/protocol_drops2.jpg); }

.photo.p_gasten               { background-image: url(../img/bg/p_gasten.jpg); }
.photo.p_corona               { background-image: url(../img/bg/coronavirus.jpg); }
.photo.p_akkoord,
.photo.p_huidhonger,
.photo.p_dailyfooter,
.photo.p_privacy,
.photo.p_white                { background-image: url(../img/bg/background.jpg); background-repeat: repeat-y;}

.photo.footer,
.photo.trajectfooter { background: white; }

.photo .textbox {
    background-color: rgba(255,255,255,0.8);
    border: 0px solid #fff;
    border-radius: 30px;
    width: 40%;
    margin: 300 50;
    padding: 20px;
    height: auto;
    overflow: auto;
    display: block;
}
.photo .textbox.fullwidth {
    width: 90%;
    display: block;
    margin: 250 auto;
}
.textbox#dailyfooter {
    margin: 20 auto;
    background: none;
}

.photo .textbox,
.photo .xbox {
    text-align: left;
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    text-transform: none;
    line-height: 1.6;
    letter-spacing: normal;
}
.photo .subtitle {
    display: inline-block;
    padding: 10px;
    padding-top: 100px;
}
.photo .subtitle h1 {
    font-size: 38px;
    margin-top: -1em;
}
.photo .subtitle ul {
    padding: 0px;
    color: white;
    font-size: 1.2em;
}

               .subtitle li a {color: var(--intensie-misc);}
.page_index    .subtitle li a {color: var(--intensie-blauw);}
.page_massages .subtitle li a {color: var(--intensie-groen);}
.page_steven   .subtitle li a {color: var(--intensie-geel);}
.page_nieuws   .subtitle li a {color: var(--intensie-rood);}
.page_contact  .subtitle li a {color: var(--intensie-marine);}

.photo #footer {
    text-align: left;
}

.photo #trajectfooter {
    width: 80%;
    margin: 50px;
    font-size: 1.4em;
}
.photo #trajectfooter a {
    border: 2px solid #000;
    border-radius: 30px;
    padding: 10pt;
}

.fullblok {
    width: 90%;
    display: block;
    overflow: hidden;
    margin: 5px auto;
    background: #eee;
    padding: 10px; /* 20px 20px 20px 20px;*/ /* TRBL */
    border-radius: 10px;

    color: #333;
    text-align: left;

    box-shadow: 1px 1px 1px #999,
                2px 2px 1px #999,
                3px 3px 1px #999;
    transition-duration: .3s;
}

@media screen and (max-width:420px){
    .photo .subtitle {
        padding-top: 10px;
    }
    .photo .subtitle h1 {
        font-size: 38px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .photo.p_welkom_zacht .textbox {
        margin: 150 auto;
    }
    .photo.p_welkom_zacht .textbox span { line-height: 1em; margin: 5px 0px;}

    .photo .textbox,
    .photo .textbox.fullwidth {
        width: 100%;
        box-sizing: border-box;
        margin: 150 auto;
    }

}