/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 11-mrt-2018, 18:16:03
    Author     : lando
*/
/*hier wat code voor dwingen van landscape weergave op mobiel*/

/*
#container { display:block; }
@media only screen and (orientation:portrait){

  #container {

    height: 100vw;

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    transform: rotate(90deg);

  }

}

@media only screen and (orientation:landscape){

  #container {

     -webkit-transform: rotate(0deg);

     -moz-transform: rotate(0deg);

     -o-transform: rotate(0deg);

     -ms-transform: rotate(0deg);

     transform: rotate(0deg);

  }

}*/

#warning-message { display: none; }

@media only screen and (orientation:portrait){

    #wrapper { display:none; }

    #warning-message { display:block; }

}

@media only screen and (orientation:landscape){

    #warning-message { display:none; }
    
    #vraagText{
        font-size: 14px;
        line-height: 18px;
    }

}

/*=======================================*/
#testweergave{
    opacity:100%;
    /*background-color: #fefefe;*/
}

#vraag_boven{
    background-color: #efefef;
}
#vraag_onder{
    background-color: #efefef;
}
.info{
    color: #157fcc;
    font-family: helvetica,arial,verdana,sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 16px;
}
#info_test{
    margin-top: 20px;
    /*position:relative;*/
    /*float:right;*/
    /*display:block;*/
    /*width:200px;*/
}
#testelementen{
    top:50px;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.centreer{
    margin-left: auto;
    margin-right: auto;
}

.pull-right{
    float:right;
}

#navigatie{
    border: 1px solid #296084;
    border-radius:8px 8px 8px 8px;
    margin-top: 30px;
    opacity: 0.8;
    /*filter: alpha(opacity=40);  For IE8 and earlier */    
}
#bladeren{
    /*float:right;*/
    /*margin-left:20px;
    margin-top:20px;*/
    /*border-style:solid;
    border-width:1px;
    border-color:#A8D4FF;
    width:125px;
    height:85px;*/
}
#bladeren_tekst{
    width:85px;
}
#opslaan_tekst{
    width:85px;
}
#naar_volgende_tekst{
    width:120px;
    padding-top: 10px;
}
#div_extr_naar_volgende{
    padding-top: 15px;
    width: 55px;
    padding-bottom: 20px;
}

#knop_test_opslaan{
    margin-right: 10px;
    /*margin-top: 5px;
    width: 55px;*/
}

#voor_achter{
    display:inline;
    margin: 0px;
}
.test_tijd{
    font-size: 16px;
}

.type_vraag{
    margin-top: 15px;
    margin-bottom:15px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 24px;
    color: #5DA5D9;
}


#oefen_items_tekst{
    margin:15px;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 24px; 
    line-height: 28px;
}

.blokantwoorden{
    font-size: 16px;
    background-color: #f3f3f3;
    margin-bottom:10px;
    padding-bottom: 20px;
    padding-left: 15px;
}
#antwoorden_alternatieven{
    margin-top: 0px;
}
.test_antw{
    font-size: 16px;
}
/*
*############################################################################
*/
.cijferreeksen{
    font-size: 28px;
    padding-left: 45px;
    padding-right: 45px;
    padding-bottom: 10px;
    padding-top:15px;
    position: relative;
    background: rgba(120,97,75, 0.05);
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    border-radius:8px 8px 8px 8px;
}
.cijferreeksen .item{
    padding-left: 15px;
    padding-right: 15px;
}

/*
*############################################################################
*/
.balkelement{
    text-align: center;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px 4px 4px 4px;    
}
/*
///////////////////////////////////////////////////////////////////////////
*/

.vraag_tekst{
    margin-top: 1px;
}
.vraag_tekst p{
    /*font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;*/
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding-left:10px;
    padding-right:10px;
    padding-top:0px;
    color: darkmagenta;
    margin:0px;
}

.antwoord_tekst{
    /*margin-top: 1px;*/
}

.antwoord_tekst p{
    /*font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;*/
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    padding-left:10px;
    padding-right:10px;
    padding-top:0px;
    color: darkmagenta;
    margin:0px;
    position: relative;
    top: 35%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#antw1{
    padding-right:10px;
}
#antw4{
    padding-left:18px;
}

.vraag_plaatjes li{
    list-style-type: none;
    position: relative;
    float:left;
}
.vraag_plaatjes li div{
    display: block;
    position: relative; 
    text-decoration: none;
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 18px;
}
.vraag_vraag_plaatjes{
    padding:8px;
    line-height: 25px;
}
#pre_load_images{
    position: absolute;
    left:-800px;
    top: -300px;
}
/*=======================mb_vraag*/
.mb_vraag{
    line-height: 22px;
}

/*===========================breuken*/
.breuk{
    display:inline-block;
    position:relative;
    top:18px;
    font-size: 0.8em;
    border-collapse: collapse;
    /*border-spacing: 1em 0.5em;*/
}
.breuk tr{
    padding:1px;
    margin:1px;
    /*height:12px;*/
}
.breuk tr td{
    padding:0px;
}
.breukstreep{
    font-size: 0.4em;
}
.breukantwoord{
    display: inline-block;
    position:relative;
    top:-5px;
    font-size: 1em;
    font-weight: bolder;
    border-collapse: collapse;
    left: 20px;
    color: darkmagenta;
}
/*=================================machten*/
.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
#aanmeldingsform{
    /*float: left;
    //width: 40%;
    height: 40%;*/
}

/*================================ nieuw voor sjamaan*/
.testCard{
    border-top: 0px;
    background-color: #EFEFEF;
}
.rondje{    
    box-sizing: content-box;    
    width: 35px;
    height: 35px; 
    border: 5px solid #8c8c8c;
    border-radius: 35px;
}
.klein{
    width: 20px;
    height: 20px;    
    border-radius: 20px;
}
.mb_boven{
    color:#CC0A2E;
}
.mb_onder{
    color:#1951bb;
}
/* een mooie button op basis van <a> element*/
.button .fa {
    float: left;
    font-size: 14px;
    line-height: 20px;
    margin: -1px 8px 0 -4px;
    vertical-align: top;
}


#curveUpColorVragenlijst path{
    fill: #EFEFEF;
    stroke: #EFEFEF;
}

#introTest{
    padding:40px;

}
.vraag_tekst p{
    font-size: 18px;
}

.floatRechts{
    float:left;
}



@media only screen and (min-width: 880px) {
    .floatRechts{
        width:50%;
        float:right;
    }
}

@media screen and (max-width: 52.25em) {
    .floatRechts{
        width:50%;
        /*float:left;*/
    }
    .vraag_tekst p{
        font-size: 10px;
    }
    .rondje{
        width:20px;
        height:20px;
    }
    .klein{
        width: 15px;
        height: 15px;
    }
}