@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
.clearfix:after,
dl:after
{
    display: block;
    clear: both; 

    content: '';
}

.ellipsis
{
    /* 2 */
    overflow: hidden; 

    white-space: nowrap;
    /* 1 */
    text-overflow: ellipsis;
}

.df-row
{
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media (min-width: 480px)
{
    .df-row.df-rr-ph
    {
            flex-direction: row-reverse; 

        -ms-flex-direction: row-reverse;
    }
}
@media (min-width: 480px)
{
    .df-row.df-aic-ph
    {
        -ms-flex-align: center;
        align-items: center;
    }
}
@media (min-width: 768px)
{
    .df-row.df-rr-sm
    {
            flex-direction: row-reverse; 

        -ms-flex-direction: row-reverse;
    }
}
@media (min-width: 768px)
{
    .df-row.df-aic-sm
    {
        -ms-flex-align: center;
        align-items: center;
    }
}
@media (min-width: 1024px)
{
    .df-row.df-rr-md
    {
            flex-direction: row-reverse; 

        -ms-flex-direction: row-reverse;
    }
}
@media (min-width: 1024px)
{
    .df-row.df-aic-md
    {
        -ms-flex-align: center;
        align-items: center;
    }
}
@media (min-width: 1300px)
{
    .df-row.df-rr-xl
    {
            flex-direction: row-reverse; 

        -ms-flex-direction: row-reverse;
    }
}
@media (min-width: 1300px)
{
    .df-row.df-aic-xl
    {
        -ms-flex-align: center;
        align-items: center;
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-1
    {
        max-width: calc(100% / 12 * 1); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 1);
            flex: 1 0 calc(100% / 12 * 1);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-2
    {
        max-width: calc(100% / 12 * 2); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 2);
            flex: 1 0 calc(100% / 12 * 2);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-3
    {
        max-width: calc(100% / 12 * 3); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 3);
            flex: 1 0 calc(100% / 12 * 3);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-4
    {
        max-width: calc(100% / 12 * 4); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 4);
            flex: 1 0 calc(100% / 12 * 4);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-5
    {
        max-width: calc(100% / 12 * 5); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 5);
            flex: 1 0 calc(100% / 12 * 5);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-6
    {
        max-width: calc(100% / 12 * 6); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 6);
            flex: 1 0 calc(100% / 12 * 6);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-7
    {
        max-width: calc(100% / 12 * 7); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 7);
            flex: 1 0 calc(100% / 12 * 7);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-8
    {
        max-width: calc(100% / 12 * 8); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 8);
            flex: 1 0 calc(100% / 12 * 8);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-9
    {
        max-width: calc(100% / 12 * 9); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 9);
            flex: 1 0 calc(100% / 12 * 9);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-10
    {
        max-width: calc(100% / 12 * 10); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 10);
            flex: 1 0 calc(100% / 12 * 10);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-11
    {
        max-width: calc(100% / 12 * 11); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 11);
            flex: 1 0 calc(100% / 12 * 11);
    }
}
@media (min-width: 480px)
{
    .df-row .col-ph-12
    {
        max-width: calc(100% / 12 * 12); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 12);
            flex: 1 0 calc(100% / 12 * 12);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-0
    {
        margin-left: calc(100% / 12 * 0);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-1
    {
        margin-left: calc(100% / 12 * 1);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-2
    {
        margin-left: calc(100% / 12 * 2);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-3
    {
        margin-left: calc(100% / 12 * 3);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-4
    {
        margin-left: calc(100% / 12 * 4);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-5
    {
        margin-left: calc(100% / 12 * 5);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-6
    {
        margin-left: calc(100% / 12 * 6);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-7
    {
        margin-left: calc(100% / 12 * 7);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-8
    {
        margin-left: calc(100% / 12 * 8);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-9
    {
        margin-left: calc(100% / 12 * 9);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-10
    {
        margin-left: calc(100% / 12 * 10);
    }
}
@media (min-width: 480px)
{
    .df-row .col-offset-ph-11
    {
        margin-left: calc(100% / 12 * 11);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-1
    {
        max-width: calc(100% / 12 * 1); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 1);
            flex: 1 0 calc(100% / 12 * 1);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-2
    {
        max-width: calc(100% / 12 * 2); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 2);
            flex: 1 0 calc(100% / 12 * 2);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-3
    {
        max-width: calc(100% / 12 * 3); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 3);
            flex: 1 0 calc(100% / 12 * 3);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-4
    {
        max-width: calc(100% / 12 * 4); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 4);
            flex: 1 0 calc(100% / 12 * 4);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-5
    {
        max-width: calc(100% / 12 * 5); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 5);
            flex: 1 0 calc(100% / 12 * 5);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-6
    {
        max-width: calc(100% / 12 * 6); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 6);
            flex: 1 0 calc(100% / 12 * 6);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-7
    {
        max-width: calc(100% / 12 * 7); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 7);
            flex: 1 0 calc(100% / 12 * 7);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-8
    {
        max-width: calc(100% / 12 * 8); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 8);
            flex: 1 0 calc(100% / 12 * 8);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-9
    {
        max-width: calc(100% / 12 * 9); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 9);
            flex: 1 0 calc(100% / 12 * 9);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-10
    {
        max-width: calc(100% / 12 * 10); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 10);
            flex: 1 0 calc(100% / 12 * 10);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-11
    {
        max-width: calc(100% / 12 * 11); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 11);
            flex: 1 0 calc(100% / 12 * 11);
    }
}
@media (min-width: 768px)
{
    .df-row .col-sm-12
    {
        max-width: calc(100% / 12 * 12); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 12);
            flex: 1 0 calc(100% / 12 * 12);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-0
    {
        margin-left: calc(100% / 12 * 0);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-1
    {
        margin-left: calc(100% / 12 * 1);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-2
    {
        margin-left: calc(100% / 12 * 2);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-3
    {
        margin-left: calc(100% / 12 * 3);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-4
    {
        margin-left: calc(100% / 12 * 4);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-5
    {
        margin-left: calc(100% / 12 * 5);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-6
    {
        margin-left: calc(100% / 12 * 6);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-7
    {
        margin-left: calc(100% / 12 * 7);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-8
    {
        margin-left: calc(100% / 12 * 8);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-9
    {
        margin-left: calc(100% / 12 * 9);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-10
    {
        margin-left: calc(100% / 12 * 10);
    }
}
@media (min-width: 768px)
{
    .df-row .col-offset-sm-11
    {
        margin-left: calc(100% / 12 * 11);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-1
    {
        max-width: calc(100% / 12 * 1); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 1);
            flex: 1 0 calc(100% / 12 * 1);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-2
    {
        max-width: calc(100% / 12 * 2); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 2);
            flex: 1 0 calc(100% / 12 * 2);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-3
    {
        max-width: calc(100% / 12 * 3); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 3);
            flex: 1 0 calc(100% / 12 * 3);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-4
    {
        max-width: calc(100% / 12 * 4); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 4);
            flex: 1 0 calc(100% / 12 * 4);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-5
    {
        max-width: calc(100% / 12 * 5); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 5);
            flex: 1 0 calc(100% / 12 * 5);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-6
    {
        max-width: calc(100% / 12 * 6); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 6);
            flex: 1 0 calc(100% / 12 * 6);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-7
    {
        max-width: calc(100% / 12 * 7); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 7);
            flex: 1 0 calc(100% / 12 * 7);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-8
    {
        max-width: calc(100% / 12 * 8); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 8);
            flex: 1 0 calc(100% / 12 * 8);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-9
    {
        max-width: calc(100% / 12 * 9); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 9);
            flex: 1 0 calc(100% / 12 * 9);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-10
    {
        max-width: calc(100% / 12 * 10); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 10);
            flex: 1 0 calc(100% / 12 * 10);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-11
    {
        max-width: calc(100% / 12 * 11); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 11);
            flex: 1 0 calc(100% / 12 * 11);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-md-12
    {
        max-width: calc(100% / 12 * 12); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 12);
            flex: 1 0 calc(100% / 12 * 12);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-0
    {
        margin-left: calc(100% / 12 * 0);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-1
    {
        margin-left: calc(100% / 12 * 1);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-2
    {
        margin-left: calc(100% / 12 * 2);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-3
    {
        margin-left: calc(100% / 12 * 3);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-4
    {
        margin-left: calc(100% / 12 * 4);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-5
    {
        margin-left: calc(100% / 12 * 5);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-6
    {
        margin-left: calc(100% / 12 * 6);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-7
    {
        margin-left: calc(100% / 12 * 7);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-8
    {
        margin-left: calc(100% / 12 * 8);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-9
    {
        margin-left: calc(100% / 12 * 9);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-10
    {
        margin-left: calc(100% / 12 * 10);
    }
}
@media (min-width: 1024px)
{
    .df-row .col-offset-md-11
    {
        margin-left: calc(100% / 12 * 11);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-1
    {
        max-width: calc(100% / 12 * 1); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 1);
            flex: 1 0 calc(100% / 12 * 1);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-2
    {
        max-width: calc(100% / 12 * 2); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 2);
            flex: 1 0 calc(100% / 12 * 2);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-3
    {
        max-width: calc(100% / 12 * 3); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 3);
            flex: 1 0 calc(100% / 12 * 3);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-4
    {
        max-width: calc(100% / 12 * 4); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 4);
            flex: 1 0 calc(100% / 12 * 4);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-5
    {
        max-width: calc(100% / 12 * 5); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 5);
            flex: 1 0 calc(100% / 12 * 5);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-6
    {
        max-width: calc(100% / 12 * 6); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 6);
            flex: 1 0 calc(100% / 12 * 6);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-7
    {
        max-width: calc(100% / 12 * 7); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 7);
            flex: 1 0 calc(100% / 12 * 7);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-8
    {
        max-width: calc(100% / 12 * 8); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 8);
            flex: 1 0 calc(100% / 12 * 8);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-9
    {
        max-width: calc(100% / 12 * 9); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 9);
            flex: 1 0 calc(100% / 12 * 9);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-10
    {
        max-width: calc(100% / 12 * 10); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 10);
            flex: 1 0 calc(100% / 12 * 10);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-11
    {
        max-width: calc(100% / 12 * 11); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 11);
            flex: 1 0 calc(100% / 12 * 11);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-xl-12
    {
        max-width: calc(100% / 12 * 12); 

        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        -ms-flex: 1 0 calc(100% / 12 * 12);
            flex: 1 0 calc(100% / 12 * 12);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-0
    {
        margin-left: calc(100% / 12 * 0);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-1
    {
        margin-left: calc(100% / 12 * 1);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-2
    {
        margin-left: calc(100% / 12 * 2);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-3
    {
        margin-left: calc(100% / 12 * 3);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-4
    {
        margin-left: calc(100% / 12 * 4);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-5
    {
        margin-left: calc(100% / 12 * 5);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-6
    {
        margin-left: calc(100% / 12 * 6);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-7
    {
        margin-left: calc(100% / 12 * 7);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-8
    {
        margin-left: calc(100% / 12 * 8);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-9
    {
        margin-left: calc(100% / 12 * 9);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-10
    {
        margin-left: calc(100% / 12 * 10);
    }
}
@media (min-width: 1300px)
{
    .df-row .col-offset-xl-11
    {
        margin-left: calc(100% / 12 * 11);
    }
}
@media (min-width: 768px)
{
    .df-row
    {
        margin: 0 -15px;
    }
}

[class^='col']
{
    max-width: 100%;
    padding: 0 0 10px; 

    -ms-flex: 1 0 100%;
        flex: 1 0 100%;
}
@media (min-width: 768px)
{
    [class^='col']
    {
        padding: 0 15px 10px;
    }
}

html
{
    box-sizing: border-box;
}

*,
*:before,
*:after
{
    box-sizing: inherit;
}

*
{
    max-height: 1000000px;
}

main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
{
    display: block;
}

body
{
    font: 16px/1.2 'Open Sans', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;

    min-width: 320px;
    margin: 0; 

    color: #000;
    background: #fff;

    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px)
{
    body
    {
        font-size: 16px;
        line-height: 1.2;
    }
}

img
{
    max-width: 100%;
    height: auto;

    vertical-align: top;
}

.gm-style img
{
    max-width: none;
}

@media (max-width: 1023px)
{
    iframe
    {
        width: 100%;
    }
}

.resize-active *
{
    transition: none !important;
}

ul,
ol,
dl,
p,
h1,
h2,
h3,
h4,
h5,
h6,
address,
form,
table,
blockquote,
applet,
embed,
object,
iframe,
frameset
{
    margin: 0 0 20px;
}

blockquote
{
    margin-left: 0; 
    padding-left: 10px;

    border-left: 4px solid #e5e5e5;
}

table
{
    border-collapse: collapse;
}

th,
td {
    padding: 3px;
    text-align: left;
    vertical-align: top;
    /*border: 1px solid #e5e5e5; aangepast*/
}

th
{
    text-align: center;
    vertical-align: middle;
}

ul,
ol
{
    padding-left: 20px;
}

ul ul,
ul ol,
ol ul,
ol ol
{
    margin: 0; 
    padding-left: 20px;
}

ul
{
    list-style-type: disc;
}

dl dt
{
    font-weight: bold; 

    float: left;
    clear: left;

    padding-right: .3em;
}

dl dd
{
    overflow: hidden;
}

pre
{
    overflow: auto; 

    max-width: 100%;
}

form,
fieldset
{
    margin: 0;
    padding: 0;

    border-style: none;
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='search'],
input[type='password'],
input[type='url'],
textarea
{
    font-family: 'Open Sans', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 18px;

    box-sizing: border-box;
    height: 40px;
    padding: 2px 7px;

    transition: all .3s ease;

    border: 1px solid #aaa;
    -webkit-border-radius: 0;
            border-radius: 4px;
    background-color: #fff; 

    -webkit-appearance: none;
}
input[type='text']:not(textarea),
input[type='tel']:not(textarea),
input[type='email']:not(textarea),
input[type='search']:not(textarea),
input[type='password']:not(textarea),
input[type='url']:not(textarea),
textarea:not(textarea)
{
    height: 40px;
}
input[type='text']:focus,
input[type='tel']:focus,
input[type='email']:focus,
input[type='search']:focus,
input[type='password']:focus,
input[type='url']:focus,
textarea:focus
{
    border-color: #000;
    border-color: #1cb0bf; 
    outline: none;
}
input[type='text']::-webkit-input-placeholder,
input[type='tel']::-webkit-input-placeholder,
input[type='email']::-webkit-input-placeholder,
input[type='search']::-webkit-input-placeholder,
input[type='password']::-webkit-input-placeholder,
input[type='url']::-webkit-input-placeholder,
textarea::-webkit-input-placeholder
{
    color: #e5e5e5;
}
input[type='text']::-moz-placeholder,
input[type='tel']::-moz-placeholder,
input[type='email']::-moz-placeholder,
input[type='search']::-moz-placeholder,
input[type='password']::-moz-placeholder,
input[type='url']::-moz-placeholder,
textarea::-moz-placeholder
{
    opacity: 1;
    color: #e5e5e5;
}
input[type='text']:-moz-placeholder,
input[type='tel']:-moz-placeholder,
input[type='email']:-moz-placeholder,
input[type='search']:-moz-placeholder,
input[type='password']:-moz-placeholder,
input[type='url']:-moz-placeholder,
textarea:-moz-placeholder
{
    color: #e5e5e5;
}
input[type='text']:-ms-input-placeholder,
input[type='tel']:-ms-input-placeholder,
input[type='email']:-ms-input-placeholder,
input[type='search']:-ms-input-placeholder,
input[type='password']:-ms-input-placeholder,
input[type='url']:-ms-input-placeholder,
textarea:-ms-input-placeholder
{
    color: #e5e5e5;
}
input[type='text'].placeholder,
input[type='tel'].placeholder,
input[type='email'].placeholder,
input[type='search'].placeholder,
input[type='password'].placeholder,
input[type='url'].placeholder,
textarea.placeholder
{
    color: #e5e5e5;
}
input[type='text'].input-error,
input[type='tel'].input-error,
input[type='email'].input-error,
input[type='search'].input-error,
input[type='password'].input-error,
input[type='url'].input-error,
textarea.input-error
{
    border-color: #e30613;
}

input[type='search']::-webkit-search-cancel-button
{
    -webkit-appearance: none;
}

textarea
{
    overflow: auto; 

    resize: vertical;
    vertical-align: top;
}

button,
input[type='button'],
input[type='reset'],
input[type='file'],
input[type='submit']
{
    font-size: 16px;
    line-height: 18px;

    height: 40px;
    padding: 2px 7px;

    cursor: pointer;
    transition: background .3s ease-in-out;

    color: #000;
    border: 1px solid transparent;
    -webkit-border-radius: 0;
            border-radius: 4px;
    outline: none;
    background: #e5e5e5; 

    -webkit-appearance: none;
}
button:hover,
input[type='button']:hover,
input[type='reset']:hover,
input[type='file']:hover,
input[type='submit']:hover
{
    color: #fff; 
    background: #000;
}

h1,
.h1
{
    font-size: 20px;
}

h2,
.h2
{
    font-size: 16px;
}

h3,
.h3
{
    font-size: 15px;
}

h4,
.h4
{
    font-size: 14px;
}

h5,
.h5
{
    font-size: 14px;
}

h6,
.h6
{
    font-size: 14px;
}

@media (min-width: 768px)
{
    h1,
    .h1
    {
        font-size: 40px;
    }
    h2,
    .h2
    {
        font-size: 30px;
    }
    h3,
    .h3
    {
        font-size: 23px;
    }
    h4,
    .h4
    {
        font-size: 20px;
    }
    h5,
    .h5
    {
        font-size: 18px;
    }
    h6,
    .h6
    {
        font-size: 16px;
    }
}

@media (min-width: 1024px)
{
    h1,
    .h1
    {
        font-size: 40px;
    }
    h2,
    .h2
    {
        font-size: 30px;
    }
    h3,
    .h3
    {
        font-size: 23px;
    }
    h4,
    .h4
    {
        font-size: 20px;
    }
    h5,
    .h5
    {
        font-size: 18px;
    }
    h6,
    .h6
    {
        font-size: 16px;
    }
}

@media (min-width: 1300px)
{
    h1,
    .h1
    {
        font-size: 40px;
    }
    h2,
    .h2
    {
        font-size: 30px;
    }
    h3,
    .h3
    {
        font-size: 23px;
    }
    h4,
    .h4
    {
        font-size: 20px;
    }
    h5,
    .h5
    {
        font-size: 18px;
    }
    h6,
    .h6
    {
        font-size: 16px;
    }
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
.h
{
    font-family: 'Open Sans', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif;
    font-weight: bold;

    margin: 0 0 10px; 

    color: #000;
}
@media (min-width: 768px)
{
    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6,
    .h
    {
        margin-bottom: 20px;
    }
}

p
{
    margin: 0 0 20px;
}

a
{
    transition: all .3s ease;
    text-decoration: none; 

    color: #1cb0bf;
}
a:hover,
a:focus
{
    text-decoration: none; 

    color: #000;
}

a[href*='mailto:']
{
    word-wrap: break-word;
}

@font-face
{
    font-family: 'icomoon';
    font-weight: normal;
    font-style: normal;

    src: url('./fonts/icomoon.eot?gn41zw');
    src: url('./fonts/icomoon.eot?gn41zw#iefix') format('embedded-opentype'), url('./fonts/icomoon.ttf?gn41zw') format('truetype'), url('./fonts/icomoon.woff?gn41zw') format('woff'), url('./fonts/icomoon.svg?gn41zw#icomoon') format('svg');
    font-display: block;
}

[class^='icon-'],
[class*=' icon-']
{
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;

    text-transform: none;

    speak: never;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-user:before
{
    content: '\e901';
}

.icon-right-quote:before
{
    content: '\e900';
}

.btn
{
    font-family: 'Open Sans', 'Arial', 'Helvetica Neue', 'Helvetica', sans-serif; 
    font-size: 16px;
    font-weight: 600;
    line-height: 18px;
    line-height: 1;

    display: inline-block;

    padding: 9px 22px;

    transition: background .3s ease-in-out, color .3s ease-in-out;
    text-align: center;
    vertical-align: top;

    border: 1px solid transparent;
    border-radius: 4px;
}
.btn.btn-default
{
    color: #000;
    border-color: #000; 
    background: #e5e5e5;
}
.btn.btn-default:hover
{
    color: #fff; 
    background: #000;
}
.btn.btn-primary
{
    color: #fff;
    border-color: #1cb0bf; 
    background: #1cb0bf;
}
.btn.btn-primary:hover
{
    color: #fff; 
    background: #1cb0bf;
}
.btn.btn-primary:hover
{
    border-color: #2ed0e0; 
    background-color: #2ed0e0;
}
.btn.btn-danger
{
    color: #fff; 
    background-color: #f8ae22;
}
.btn.btn-danger:hover
{
    color: #fff;
    background-color: #f9be4e;
    box-shadow: 0 0 5px #f8ae22;
}
.btn.btn-outline-primary
{
    color: #1cb0bf;
    border: 1px solid #1cb0bf;
    background-color: #fff;
}
.btn.btn-outline-primary:hover
{
    color: #fff; 
    background-color: #1cb0bf;
}
.btn.btn-disable
{
    pointer-events: none;

    color: #b5b5b5;
    border-color: #b5b5b5;
}
.btn.btn-disable:hover
{
    color: #b5b5b5; 
    background-color: transparent;
}

.btn-group
{
    display: -ms-flexbox;
    display: flex;
}

.btn-wrap
{
    display: -ms-flexbox;
    display: flex;

    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.section-test-content
{
    position: relative;

    min-height: 100vh;
}
@media (min-width: 768px)
{
    .section-test-content
    {
        display: -ms-flexbox;
        display: flex;
    }
}
.section-test-content .nav-opener {
    position: absolute;
    z-index: 15;
    top: 15px;
    right: auto;
    left: 15px;

    display: block;
    width: 2rem;
    height: 20px;
    border-top: 4px solid #1cb0bf;
    border-bottom: 12px double #1cb0bf;
}

.nav-active .section-test-content .nav-opener {
    border-color: #fff;
}

.section-test-content .nav-opener span {
    display: none;
}

@media (min-width: 768px) {
    .section-test-content .nav-opener
    {
        display: none;
    }
}

@media (min-width: 768px)
{
    .test-header
    {
        display: -ms-flexbox;
        display: flex;
            flex-direction: column; 

        width: 19.6%;
        min-width: 282px;
        padding: 24px 0;

        box-shadow: 0 1px 26px rgba(0, 0, 0, .2);

        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-direction: column;
    }
}

@media (max-width: 767px)
{
    .test-header
    {
        position: absolute;
        z-index: 10;
        top: 0;
        bottom: 0;
        left: 0;

        display: -ms-flexbox;
        display: flex;
        visibility: hidden;
            flex-direction: column; 

        width: 100%;
        max-width: 280px;
        padding-top: 52px;
        padding-bottom: 25px;

        transition: all .3s ease;
        transform: scalex(0);
        transform-origin: left;

        opacity: 0;

        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-direction: column;
    }
}

@media (max-width: 767px)
{
    .nav-active .test-header
    {
        visibility: visible;

        transform: scaleY(1); 

        opacity: 1;
    }
}

.test-header .logo
{
    max-width: 211px;
    margin: 0 auto 50px;
}
@media (min-width: 1024px)
{
    .test-header .logo
    {
        margin: 0 auto 99px;
    }
}

.test-header .copyright {
    font-size: 13px;
    font-weight: 300;
    width: 100%;
    margin-top: auto;
    padding-left: 40px;
    color: #fff;
    background-color: #1cb0bf;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.test-header .copyright a
{
    color: #fff;
}
.test-header .copyright a:hover
{
    color: #e5e5e5;
}

.test-header .test-nav
{
    background-color: #1cb0bf;
    width: 100%;
    padding: 0 5px;
}

.test-body
{
    padding-bottom: 35px;

    color: #282728;
}
@media (min-width: 768px)
{
    .test-body
    {
        width: 100%;
        max-width: 80%; 
        padding-bottom: 45px;
    }
}

.test-tile
{
    font-weight: 400;
}

.test-menu
{
    font-size: 17px;
    font-weight: 300;

    margin: 0;
    padding: 0;

    list-style: none;

    color: #fff; 
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.test-menu li
{
    line-height: 1.15;

    padding: 18px 37px;

    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.test-menu li.active
{
    font-weight: 700;
}
.test-menu a
{
    color: #fff;
}
.test-menu a:hover
{
    color: #0c4a50;
}



.subheader
{
    margin-bottom: 32px; 
    padding: 25px;

    text-align: right;

    border-bottom: 1px solid #e5e5e5;
}
@media (min-width: 1024px)
{
    .subheader
    {
        padding: 27px 60px 22px;
    }
}
.subheader a
{
    font-size: 15px;
    font-weight: 300;

    display: -ms-flexbox;
    display: flex;

    width: -webkit-max-content;
    width:         max-content;
    margin-left: auto; 

    color: #000;

    -ms-flex-align: center;
    align-items: center;
}
.subheader a img
{
    width: 24px;
    height: 24px; 
    margin-right: 13px;
}
.subheader a:hover
{
    color: #1cb0bf;
}

.steps-wrapper
{
    max-width: 863px; 
    padding-bottom: 25px;
}
@media (min-width: 1024px)
{
    .steps-wrapper
    {
        padding: 0 0 62px 68px;
    }
}

.steps-list
{
    display: -ms-flexbox;
    display: flex;

    margin: 0 0 9px;
    padding: 0;

    list-style: none;

    letter-spacing: -.03em;
}
.steps-list li
{
    width: 100%;
    max-width: 14.28%;
    height: 5px; 
    margin-right: 3px;
}
.steps-list li:last-child
{
    margin-right: 0;
}
.steps-list li.active
{
    background-color: #f8ae22;
}
.steps-list li.active ~ li
{
    background-color: #dcdcdc;
}

.steps-statistic
{
    font-size: 15px;
    font-weight: 300;
    line-height: 1;

    max-width: 791px; 

    text-align: right;
}

.test-content {
    max-width: 867px;
    padding-left: 10px;
}
@media (min-width: 768px)
{
    .test-content
    {
        padding-left: 20px;
    }
}
@media (min-width: 1024px)
{
    .test-content
    {
        padding-left: 67px;
    }
}
.test-content .text
{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.67;

    margin-bottom: 48px;
    padding-top: 2px;
    padding-right: 43px; 
    padding-left: 7px;
}
.test-content .btn-wrapper
{
    text-align: right;
}
.test-content .btn-wrapper .btn
{
    min-width: 164px;
}

.title-wrapper
{
    margin-bottom: 51px;
    padding-left: 6px;
}

.test-title
{
    font-size: 22px;
    font-weight: 400; 

    color: #000;
}
.test-title span
{
    display: inline-block;

    margin-right: 10px;
}

@media (min-width: 768px)
{
    .content-wrapper
    {
        display: -ms-flexbox;
        display: flex;

        -ms-flex-align: start;
        align-items: flex-start;
    }
}

.tooltip-wrap
{
    width: 100%; 
    max-width: 61px;
}
@media (min-width: 768px)
{
    .tooltip-wrap
    {
        margin-bottom: 0;
        margin-left: 0;
    }
}

.custom-tooltip
{
    font-size: 14px;
    font-weight: 500;

    width: 100%;
    width: auto;
    padding: 0 15px;

    color: #1cb0bf;
    border-radius: 3px; 
    background-color: #fff;
    box-shadow: 0 0 11px rgba(0, 0, 0, .15);
}
@media (min-width: 768px)
{
    .custom-tooltip::before
    {
        position: absolute;
        top: -13px;
        left: 50%;

        width: 25px;
        height: 25px;

        content: '';
        transform: translateX(-50%) rotate(45deg);

        background-color: #fff;
        box-shadow: 0 0 11px rgba(0, 0, 0, .15);
        box-shadow: 0 0 11px rgba(0, 0, 0, .15);
    }
}
.custom-tooltip div
{
    position: relative;
    z-index: 15; 

    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 35px;

    background-color: #fff;

    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
@media (min-width: 768px)
{
    .custom-tooltip div
    {
        height: 55px;
        padding-left: 0;
    }
}

.title-wrapper
{
    margin-bottom: 30px;
}

.tooltip-wrap
{
    width: 100%; 
    padding: 2px 3px;
}

.form-body
{
    position: relative;

    margin-bottom: 25px; 
    padding: 15px 10px;
}

.form-group
{
    display: -ms-flexbox;
    display: flex;

    margin: 0 0 15px;
    margin-bottom: 15px;
    padding: 0 10px;

    border-radius: 4px; 

    -ms-flex-align: start;
    align-items: start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media (min-width: 768px)
{
    .form-group
    {
        -ms-flex-align: center;
        align-items: center;
    }
}
@media (min-width: 1024px)
{
    .form-group
    {
        margin-bottom: 0;
    }
}
.form-group label
{
    font-size: 16px;
    font-weight: 400;

    display: -ms-flexbox;
    display: flex;

    margin-bottom: 15px; 

    -ms-flex-align: center;
    align-items: center;
}
@media (min-width: 1024px)
{
    .form-group label
    {
        margin-bottom: 0;
    }
}
.form-group p + input
{
    margin-right: 0; 
    margin-left: 0;
}
.form-group input
{
    width: 100%;
    margin: 0 10px;
}
@media (min-width: 1024px)
{
    .form-group input
    {
        max-width: 133px;
    }
}
@media (min-width: 1300px)
{
    .form-group input
    {
        max-width: 193px;
        margin-right: 25px;
        margin-left: 18px;
    }
}
.form-group .title
{
    width: 100%;
}
.form-group .text-with-link
{
    display: -ms-flexbox;
    display: flex;

    width: 100%;

    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media (min-width: 1024px)
{
    .form-group .text-with-link
    {
        padding: 0 31px 0 15px; 

        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }
}
.form-group .text-with-link .btn
{
    font-size: 16px; 
    font-weight: 400;

    margin: 10px 5px;
    padding: 11px 30px;
}
@media (min-width: 1024px)
{
    .form-group .text-with-link .btn
    {
        margin: 0 5px; 
        padding: 11px 62px;
    }
}
@media (min-width: 1300px)
{
    .form-group .text-with-link .btn
    {
        margin-left: 21px;
    }
}
@media (min-width: 1024px)
{
    .form-group .text-with-link a
    {
        font-size: 24px;
    }
}

.start-wrapper
{
    padding-left: 15px;
}
.start-wrapper .btn-danger
{
    min-width: 165px;
}

.form-question
{
    width: 100%;
}
.form-question .form-group label
{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media (min-width: 1024px)
{
    .form-question .form-group label
    {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }
}
.form-question .form-body
{
    transition: all .3s ease;
}
.form-question .form-body:hover
{
    box-shadow: 0 0 7px rgba(0, 0, 0, .2);
}
@media (max-width: 1023px)
{
    .form-question input
    {
        margin-top: 10px;
    }
}
.form-question .form-group.group-question
{
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.form-question .form-group.group-question .tooltip-wrap
{
    margin-bottom: 15px;
}
@media (min-width: 768px)
{
    .form-question .form-group.group-question .tooltip-wrap
    {
        margin-bottom: 0;
    }
}
.form-question .form-group.group-value .title-wrap
{
    width: 100%;
}
@media (min-width: 1024px)
{
    .form-question .text-wrap
    {
        display: -ms-flexbox;
        display: flex;

        -ms-flex-align: start;
        align-items: start;
    }
}
.form-question .text
{
    margin-bottom: 0;
    padding-right: 0;
}

.form-questionnaire .form-body
{
    padding-right: 0; 
    padding-left: 0;
}

.form-questionnaire .title
{
    font-size: 16px; 

    display: -ms-flexbox;
    display: flex;

    width: 100%;

    -ms-flex-align: center;
    align-items: center;
}

.form-questionnaire .form-group
{
    width: 100%;
    margin: 0 0 25px;

    transition: all .3s ease;

    background-color: #fafafa;

    -ms-flex-align: start;
    align-items: flex-start;
}
.form-questionnaire .form-group:hover
{
    box-shadow: 0 0 7px rgba(0, 0, 0, .2);
}
.form-questionnaire .form-group .title-wrap
{
    width: 100%;
}
.form-questionnaire .form-group .question
{
    font-weight: 400; 

    display: inline-block;

    min-width: 85px;
}

.form-questionnaire .subtitle
{
    font-weight: 400; 

    width: 100%;
}

.form-questionnaire .btn-wrapper
{
    width: 100%; 
    padding-right: 0;

    text-align: right;
}

.form-questionnaire .form-col
{
    padding: 15px; 

    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}
@media (min-width: 1024px)
{
    .form-questionnaire .form-col
    {
        padding: 47px 24px;
    }
}

.form-compact-test .title
{
    font-size: 16px;

    display: -ms-flexbox;
    display: flex;

    width: 100%;
    margin-bottom: 11px; 

    -ms-flex-align: center;
    align-items: center;
}

.form-compact-test .form-group
{
    width: 100%; 
    margin-bottom: 25px;

    background-color: #fafafa;
    box-shadow: 0 0 7px rgba(0, 0, 0, .2);
}
.form-compact-test .form-group .title-wrap
{
    width: 100%;
}
.form-compact-test .form-group .question
{
    font-weight: 400; 

    display: inline-block;

    min-width: 85px;
}

.form-compact-test .subtitle
{
    font-weight: 400;

    width: 100%;
    margin-bottom: 13px;
}

.form-compact-test .tooltip-wrap
{
    max-width: 34px;
    margin-left: 11px;
}
.form-compact-test .tooltip-wrap img
{
    width: 100%;
}

.form-compact-test .btn-wrapper
{
    width: 100%; 
    padding-right: 0;

    text-align: center;
}

.form-compact-test .form-col
{
    padding: 15px;
}
@media (min-width: 1024px)
{
    .form-compact-test .form-col
    {
        padding: 47px 24px;
    }
}

.form-compact-test .btn + .btn
{
    margin-left: 15px;
}

.form-compact-test .form-body
{
    padding-right: 0; 
    padding-left: 0;
}

.form-col
{
    display: -ms-flexbox;
    display: flex;

    -ms-flex-align: start;
    align-items: start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media (min-width: 1024px)
{
    .form-col
    {
        padding: 21px 33px;
    }
}
.form-col h6
{
    margin-bottom: 17px;
}
.form-col .title-wrap
{
    width: 100%;
}

.letter-list
{
    padding-left: 55px;

    list-style-type: none; /*aangepast*/
}
.letter-list li
{
    margin-bottom: 16px;
    padding-top: 2px; 
    padding-left: 17px;
}
.letter-list li:last-child
{
    margin-bottom: 0;
}
.letter-list label
{
    position: relative;

    display: -ms-flexbox;
    display: flex;

    cursor: pointer;
}
.letter-list label:hover span:before
{
    border-color: #1cb0bf;
}
.letter-list label span
{
    position: relative;

    display: inline-block;

    padding-top: 2px;
}
.letter-list label span:before
{
    position: absolute;
    top: 0;
    left: -72px;

    width: 24px;
    height: 24px;

    content: '';
    transition: all .3s ease;

    border: 1px solid #aaa; 
    border-radius: 3px;
}
.letter-list label input[type='radio']
{
    position: absolute;

    visibility: hidden; 

    opacity: 0;
}
.letter-list label input[type='radio']:checked + span::before
{
    background-color: #1cb0bf;
}
.letter-list label .input-error + span::before
{
    border-color: #e30613;
}

.radio-list
{
    margin: 0;
    padding: 0;

    list-style: none;
}
.radio-list li
{
    margin-bottom: 16px;
}
.radio-list li:last-child
{
    margin-bottom: 0;
}
.radio-list .input-error + span::before
{
    border-color: #e30613;
}
.radio-list label
{
    position: relative;

    display: -ms-flexbox;
    display: flex;

    cursor: pointer;
}
.radio-list label:hover span:before
{
    border-color: #1cb0bf;
}
.radio-list label span
{
    position: relative;

    display: inline-block;

    padding-top: 2px; 
    padding-left: 42px;
}
.radio-list label span:before
{
    position: absolute;
    top: -1px;
    left: 0;

    width: 24px;
    height: 24px;

    content: '';
    transition: all .3s ease;

    border: 1px solid #aaa; 
    border-radius: 3px;
}
.radio-list label input[type='radio']
{
    position: absolute;

    visibility: hidden; 

    opacity: 0;
}
.radio-list label input[type='radio']:checked + span::before
{
    background-color: #1cb0bf;
}

.radio-wrap
{
    display: -ms-flexbox;
    display: flex;
        flex-direction: column; 

    -ms-flex-direction: column;
}
@media (min-width: 1024px)
{
    .radio-wrap
    {
            flex-direction: row; 

        -ms-flex-direction: row;
    }
}
.radio-wrap .radio-list
{
    display: -ms-flexbox;
    display: flex;

    padding: 0 29px 0 18px;

    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media (min-width: 768px)
{
    .radio-wrap .radio-list
    {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }
}
@media (max-width: 1023px)
{
    .radio-wrap .radio-list
    {
        padding: 10px 0;
    }
}
.radio-wrap .radio-list li
{
    margin-right: 12px;
    margin-bottom: 0;
}
.radio-wrap .radio-list li:last-child
{
    margin-right: 0;
}
.radio-wrap .radio-list label span
{
    padding-left: 33px;
}

.error-message
{
    font-size: 14px;
    font-weight: 400;

    position: absolute;
    top: 100%;
    left: 0;

    display: none;

    padding-top: 10px; 

    color: #e30613;
}

.form-error
{
    position: relative;
}
.form-error .error-message
{
    display: block;
}

/*toegevoegd*/
#info {
    position: absolute;
    display: none;
    width: 510px;
    background-color: #ececec;
    border: solid 2px #1cb0bf;
    border-top-width: 8px;
    z-index: 100;
    padding: 8px;
    margin-top: 20px;
}
span.info {
    background: url(images/info.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.text-white {
    color: #fff;
}

#voetnoot {
    position: absolute;
    display: none;
    width: 300px;
    background-color: #ececec;
    border: solid 2px #1cb0bf;
    border-top-width: 8px;
    z-index: 100;
    padding: 8px;
}

span.voetnoot {
    background: url(images/comment.png) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.printknoprechts {
    float: right;
}

.content .tabel2 table .titel, tr.titel {
    background-color: #1cb0bf;
    color: #fff;
    font-weight: bold;
}

.tabel2 .midden .textbox {
    width: 100%;
}

.content .buttonintitelklas {
    float: right;
    padding-right: 181px;
}

.content .klasoverzichtrechts {
    float: left;
    width: 150px;
    margin-left: 30px;
}

.content .klasoverzichtrechts .box {
    width: 148px;
    border: 1px solid #1cb0bf;
    background-color: #dedfde;
    padding: 3px;
    margin-bottom: 10px;
}

input.datum_dagmaand {
    width: 45px;
}

input.datum_jaar {
    width: 79px;
}

tr.pager table {
    margin: auto;
}

.test-menu .title {
    font-weight: bold;
}


/*print*/
@media print {
    .nav-opener, .test-header {
        display: none;
    }
}