/* tekst */
.graphic_kop {
    font-family: 'ArnhemProBold', Georgia, serif;
    font-size: 25px;
    color: #4393ab;
}

.graphic_intro {
    font-family: 'ProximaNovaRegular', Helvetica, sans-serif;
    font-size: 19px;
}

.graphic_tussenkop {
    font-family: 'ProximaNovaBold', Helvetica, sans-serif;
    font-size: 19px;
}

.graphic_bold {
    font-family: 'ProximaNovaBold', Helvetica, sans-serif;
    font-size: 17px;
}

.graphic_tekst {
    font-family: 'ProximaNovaRegular', Helvetica, sans-serif;
    font-size: 17px;
}

.graphic_credit {
    font-size: 14px;
    line-height: 17px;
    text-align: right;
    float:right;
}

/* divs */
.graphic_wrapper {
    float:left;
    width:100%;
    margin-bottom: 20px;
    margin-top:20px;
}

.graphic_container {
    width:100%;
    max-width:460px; 
    float:none;
    margin:auto;
}

.graphic_container_bartjens {
    width:100%;
    max-width:340px; 
    float:none;
    margin:auto;
}

.graphic_container_groot {
    width:100%;
    max-width:700px; 
    float:none;
    margin:auto;
}

.graphic_container_klein {
    width:100%;
    max-width:460px; 
    float:none;
    margin:auto;
    display:none;
}

.graphic {
    width:100%;
}

/* scroller */
.graphic_scroller_wrapper {
    position: relative;
    overflow: hidden;
    height:460px;
    width:100%;
    margin-top:20px;
    border-top:1px solid #d4c7ba;

    /* Prevent native touch events on Windows */
    -ms-touch-action: none;

    /* Prevent the callout on tap-hold and text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Prevent text resize on orientation change, useful for web-apps */
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
}

.graphic_scroller {
    position: absolute;
    scrollbar-face-color: #4393ab;
    margin-bottom: 20px;
    padding-bottom:17px;

    /* Prevent elements to be highlighted on tap */
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    /* Put the scroller into the HW Compositing layer right from the start */
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

.graphic_schaduw {
    width:100%;
    height:460px;
    position:absolute;
    top:0;
    right:0;
    -webkit-box-shadow: -15px 0px 15px -10px rgba(0,0,0,.3) inset;
    -moz-box-shadow: -15px 0px 15px -10px rgba(0,0,0,.3) inset;
    box-shadow: -15px 0px 15px -10px rgba(0,0,0,.3) inset;
}

.graphic_scrollbalk {
    width:100%;
    height:10px;
    background-color:rgba(102,118,125,.3);
    border-top:2px solid #ffeadb;
    margin-bottom: 20px;
}

.graphic_scrollthumb {
    width:40px;
    height:10px;
    border-radius:50px;
    background-color:#66767D;
}

/* kerncijfers */
.kerncijfer_wrapper {
    width: 100%;
    max-width:350px;
    float:right;
    padding: 10px;
    margin: 10px;
    background-color: rgba(0,0,0,.1);
    overflow: auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

.kerncijfer_tabel {
    width: 100%;
    margin: 10px 0px 10px 0px;
    border:none;
    font-size: 17px;
    line-height: 1.2em;
}

.kerncijfer_tabel td {
    border-bottom: 1px dotted #000;
    text-align: right;
}

.kerncijfer_tabel .links_uitgelijnd {
    text-align: left; !important
}


/* loader */
.graphic_loader {
    border: 3px solid rgba(0,0,0,.1); 
    border-top: 3px solid #756d67;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
    margin: 10px auto 10px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* media queries */
@media all and (max-width: 700px) {
    .kerncijfer_wrapper {
        float: none;
        margin: 10px auto 10px auto;
    }
}

@media all and (max-width: 640px) {
    .graphic_container {
        max-width:350px; 
    }
    
    .graphic_container_bartjens {
        max-width:280px; 
    }
}

@media all and (max-width: 460px) {
    .center_graphic {
        background-size:530px;
    }
}

            

            
            

        
            