@font-face {
    font-family: 'UbuntuTitling Bold';
    src: url('../fonts/UbuntuTitling-Bold-webfont.eot');
    src: url('../fonts/UbuntuTitling-Bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/UbuntuTitling-Bold-webfont.woff') format('woff'),
        url('../fonts/UbuntuTitling-Bold-webfont.ttf') format('truetype'),
        url('../fonts/UbuntuTitling-Bold-webfont.svg') format('svg');
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.4em;
    color: black;
    background-color: white;
}

.navbar {
    background-color: rgb(255,153,0);
    background-color: rgba(255,153,0, .9);
    color: white;
    border: none;
    font-family: "UbuntuTitling Bold";
    font-size: 1.5em;
    z-index: 9999;
    border-radius: 0px;
}

.navbar-default .navbar-nav > li > a {
    color: white;
}

.navbar-default .navbar-nav > .active > a {
    background-color: rgb(254,241,204);
    color: rgb(190, 22, 34);
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    background-color: rgb(255,153,0);
}

.navbar a:hover, .nav>li>a:focus, .nav>li>a:hover,  {
    -moz-box-shadow:    inset 0 0 2px rgb(190, 22, 34);
    -webkit-box-shadow: inset 0 0 2px rgb(190, 22, 34);
    box-shadow:         inset 0 0 2px rgb(190, 22, 34);
}

.navbar-default .navbar-toggle:hover {
    background-color: #FEF1CC;
}

.navbar-default .navbar-nav>li>a.nav-icon {
    padding-top: 12px;
    padding-bottom: 12px;
}

.affix {
    top: 0;
    width: 100%;
    margin-top:10px;
}

.affix + .container-fluid {
    padding-top: 70px;
}

#qos-logo {
    height: 64px;
    margin-top: -8px;
    margin-bottom: -8px;
    padding-right: 5%;
}

h1 {
    text-align: center;
    width: 100%;
    font-family: "UbuntuTitling Bold";
    color: rgb(255,153,0);
    color: rgb(190, 22, 34);
    color: white;
    font-size: 8vw;
    padding-top: 5vh;
}

.ondertitel {
    text-align: center;
    width: 100%;
    font-family: "UbuntuTitling Bold";
    color: rgb(255,153,0);
    font-size: 4vw;
}

h2 {
    text-align: center;
    width: 100%;
    font-family: "UbuntuTitling Bold";
    color: rgb(255, 153, 0);
    color: rgb(190, 22, 34);
    font-size: 2.4em;
    padding-top: 5vh;
    padding-bottom: 5vh;
}

h3 {
    text-align: center;
    width: 100%;
    font-family: "UbuntuTitling Bold";
    color: rgb(255, 153, 0);
    color: rgb(190, 22, 34);
    font-size: 1.5em;
}

a {
    color: #000000;
}

.img-responsive {
    width: 100%;
}

.highlights {
    padding-top: 5em;
    font-family: "UbuntuTitling Bold";
    color: rgb(190, 22, 34);
}

.glyphicon-ok {
    color: green;
}

.quote-author-img {
    width: 40%;
    max-width: 200px;
    margin: auto;
    margin-top: -3em;
}

.quote-author-img img {
    border: solid 1px #000000;
    text-align: center;
}

blockquote {
    background-color: #ffffff;
    border: solid 1px #000000;
    margin-top: 10vh;
}

blockquote p {
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 0.8em;
    font-style: italic;
}

blockquote p::before {
    content: "\201C";
    color: rgb(190, 22, 34);
    font-size: 3em;
    line-height: 0.7em;
    font-weight: 800;
}

blockquote footer {
    font-size: 0.7em;
}

.well {
    background-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.9);
    border: solid 1px rgb(255, 153, 0);
}

.img-portret {
    max-width: 320px;
}

.clientlogo {
    height: 32px;
    width: auto;
    max-width: 100%;
}

.opleidingen img {
    height: 40px;
    margin: 5%;
}

.logobox {
    background-color: #ffffff;
    height: auto;
}

h3.projectclient {
    font-size: 1.2em;
    text-align: left;
    margin: 0;
}

.projectrol {
    font-family: "UbuntuTitling Bold";
    font-size: 1em;
}

.download {
    background-color: rgb(255, 153, 0);
    -moz-box-shadow:    inset 0 0 2px rgb(190, 22, 34);
    -webkit-box-shadow: inset 0 0 2px rgb(190, 22, 34);
    box-shadow:         inset 0 0 2px rgb(190, 22, 34);
    text-align: center;
    font-family: "UbuntuTitling Bold";
    font-size: 1.5em;
}

.contact-blok {
    background-image: url("../img/portret.jpg");
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: right;
    padding-right: 30%;
}

.contact-blok .glyphicon {
    font-size: 2em;
}

/* --------------- scroll muis --------------------------- */

#scrollmuis {
    margin-left: 50%;
}

#muis {
    height: 30px;
    width: 22px;
    border-radius: 10px;
    transform: none;
    -webkit-transform: none;
    -ms-transform: none;
    border: 2px solid white;
    text-align: center;
}

#wiel {
    height: 5px;
    width: 2px;
    display: block;
    margin: 7px auto;
    background: white;
    position: relative;
    -webkit-animation: mouse-wheel 1.2s ease infinite;
    -moz-animation: mouse-wheel 1.2s ease infinite;
    animation: mouse-wheel 1.2s ease infinite;
}

#scrollmuis span {
    display: block;
    width: 11px;
    height: 11px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);

    border-right: 3px solid white;
    border-bottom: 3px solid white;

    margin: 5px 0 -5px 6px;
}

#pijl1, #pijl2, #pijl3 {
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
    -webkit-animation-direction: alternate;
}

#pijl1 {
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    animation-delay: .1s;
}

#pijl2 {
    -webkit-animation-delay: .2s;
    -moz-animation-delay: .2s;
    animation-delay: .2s;
}

#pijl3 {
    -webkit-animation-delay: .3s;
    -moz-animation-delay: .3s;
    animation-delay: .3s;
}

@-webkit-keyframes mouse-wheel
{
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(6px);
        -ms-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@-moz-keyframes mouse-wheel
{
    0% { top: 1px; }
    50% { top: 2px; }
    100% { top: 3px;}
}
@-webkit-keyframes mouse-scroll {

    0%   { opacity: 0;}
    50%  { opacity: .5;}
    100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}
@keyframes mouse-scroll {

    0%   { opacity: 0; }
    50%  { opacity: .5; }
    100% { opacity: 1; }
}

/* --------------------- secties --------------------------------------------- */

.sectie {
    /* min-height: 80vh; */
    padding-bottom: 5vh;
}

#header {
    background-image: url("../img/csp10546354_768.jpg");
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    text-align: center;
}

#header div img {
    margin: auto;
    padding-top: 5vh;
    width: 50vw;
}

#testmanager {
    background-color: #ffffff;
}

#klanten {
    background-color: rgb(253, 214, 102);
    background-image: url("../img/tweed.png");
    background-repeat: repeat;
}

#qos {
    background-color: #ffffff;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-repeat: no-repeat;
}

#projecten {
    background-color: rgb(253, 214, 102);
    background-image: url("../img/tweed.png");
    background-repeat: repeat
}

#ervaring {
    background-color: #FEF1CC;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-repeat: no-repeat;
}

#contact {
    background-color: rgb(253, 214, 102);
    background-image: url("../img/tweed.png");
    background-repeat: repeat
}

/* --------------- responsive ---------------------------------------------------------------- */


@media (min-height: 480px) {
    /* phone portrait */
    #header {
        background-image: url("../img/csp10546354_768p.jpg");
    }
}

@media (min-width: 768px) {
    /* tablet portrait */
    #header {
        background-image: url("../img/csp10546354_992.jpg");
    }

    #qos {
        background-image: url("../img/csp17199919p.jpg");
    }
}

@media (min-width: 992px) {
    /* tablet landscape */
    #header {
        background-image: url("../img/csp10546354_1200.jpg");
    }

    #qos {
        background-image: url("../img/canstockphoto17199919.jpg");
    }

    #ervaring {
        background-image: url("../img/csp22856863_1200.jpg");
    }
}

@media (min-width: 1200px) {
    /* PC */
    #header {
        background-attachment: fixed;
        background-image: url("../img/canstockphoto10546354.jpg");
        height: 105vh;
    }

    h1 {
        padding-top: 0;
        margin-top: 0;
    }

    #qos {
        background-attachment: fixed;
        background-image: url("../img/canstockphoto17199919.jpg");
    }

    #ervaring {
        background-attachment: fixed;
        background-image: url("../img/csp22856863_1920.jpg");
    }
}

@media
    only screen and (min-width: 992px) and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-width: 992px) and (   min--moz-device-pixel-ratio: 1.5),
    only screen and (min-width: 992px) and (     -o-min-device-pixel-ratio: 3/2),
    only screen and (min-width: 992px) and (        min-device-pixel-ratio: 1.5),
    only screen and (min-width: 992px) and (min-resolution: 192dpi),
    only screen and (min-width: 1920px)
{
    /* Scherm met Retina (== dubbele pixels) of meer dan HD */

    #ervaring {
        background-attachment: fixed;
        background-image: url("../img/canstockphoto22856863.jpg");
    }
}