@font-face {
    font-family: 'Bariol-Bold';
    font-style: normal;
    font-weight: normal;
    src:  url('Bariol-Bold.woff') format('woff');
}


@font-face {
    font-family: 'Bariol-Regular';
    font-style: normal;
    font-weight: normal;
    src:  url('Bariol-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Bariol-Light';
    font-style: normal;
    font-weight: normal;
    src:  url('Bariol-Light.woff') format('woff');
}

@font-face {
    font-family: 'Bariol-Light-Italic';
    font-style: normal;
    font-weight: normal;
    src:  url('BariolLight-Italic.woff') format('woff');
}

body
{
    background-color: #1d1d1b;
}

#wrapper {
    position:absolute;
    
    color:#000000;
    padding:0px;
    margin:0px;
    overflow: hidden;
    width:1920px;
    height:1080px;
}

#klikplaat_container
{
    z-index:200;
    float:left;
    width:1920px;
    height:1080px;
        
    position:absolute;float:left;
    background:url('../svg_assets/home_16bij9temp.png?v=1') no-repeat center top;
    background-size: 1920px 1080px;
}


.hotspot
{
    cursor:pointer;
}

#close-btn
{
     cursor:pointer;
}

#popup
{

    position:absolute;
    left:270px;
    top:90px;
    width:1440px;
    height:900px;
    z-index:500;

}

#popup_back
{
    position:absolute;
    top:0px;
    width:100%;
    height:100%;

}

#popup_content
{
    position:absolute;
    top:160px;
    width:92%;
    /*padding-top:140px;*/
    /*background-color:#cccccc;
    opacity:0.5;*/
    margin-left:5%;
    margin-right:3%;


}

#popup_content p
{
    width:95%;
    margin:0px;
    padding:0px;
    padding-bottom:20px;
    font-family:'Bariol-Regular';
    font-weight:normal;
    font-size:32px;
}

#popup_content td
{

    padding-bottom:40px;
    font-family:'Bariol-Regular';
    font-weight:normal;
    font-size:32px;
}

#popup_content p.full
{
    width:90%;
    margin:0px;
    padding:0px;
    padding-bottom:20px;
    font-family:'Bariol-Regular';
    font-weight:normal;

    font-size:32px;
}

#popup_content a.button
{
    background-color: #000000;
    color:#ffffff;
    font-family:'Bariol-Regular';
    font-weight:normal;
    font-size:32px;
    text-decoration:none;
    padding:10px;

    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    cursor:pointer;
    margin-right: 10px;

}

#popup_content a.button_active
{
    background-color:#ee3b94;
}

#popup_video
{

    position:absolute;
    left:270px;
    top:90px;
    width:1440px;
    height:900px;
    z-index:500;

}

#videoclose-btn
{
     cursor:pointer;
}

#popup_video_content
{
     position:absolute;
    top:160px;
    width:90%;
    height:90%;

}


#geschiedenis_beeldverhaal_nav, #verdriet_en_herr_delen_beeldverhaal_nav
{
    font-family:'Bariol-Bold';
    font-weight:normal;

    font-size:40px;
   margin-top:-4%;
    margin-bottom:1%;
}


h2
{
    margin:0px;
    
    margin-bottom:10px;
    font-size:32px;
}
#geschiedenis_beeldverhaal
{
    width:38%;
    float:left;
}


h2.geschiedenis_beeldverhaal
{
    margin:0px;
    background-color:#ffed00;
    display:inline-block;
    
    margin-bottom:10px;
    font-size:32px;
    width:100%;
}

#kennisquiz_score, #rituelenquiz_score
{
    font-family:'Bariol-Bold';
    font-weight:normal;

}

.accent
{
    font-family:'Bariol-Bold';
    font-weight:normal;
}

a
{
    color:#000000;
}

table
{
    max-width: 80%;
}

table.colofon
{
    max-width:100%;
    width:100%;
}

table.colofon tr.colofon_head td
{
     font-family:'Bariol-Bold' !important;
     margin:5px !important;
     border-bottom-width: 2px;
     border-bottom-color: #000000;
     border-bottom-style: solid;
     
}

table.colofon td 
{
    width:18%;
    vertical-align: top;
     padding:5px !important;
   
}

a.colofon_button
{
    background-color: #ffed00;
    color:#000000;
    font-family:'Bariol-Regular';
    font-weight:normal;
    font-size:26px;
    text-decoration:none;
    padding:10px;
    display:inline-block;
    margin-bottom:10px;
    width:90%;

    -webkit-box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.75);
    box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.75);
    cursor:pointer;
   

}

#kennisquiz_tbl tr
{
    padding-top:5px;
}