body {
    height: 100%;
    width: 100%;
}

a {
    background-color: transparent;
}

#fade-container {
    opacity: 1;
    transition: 2s opacity;
}

#fade-container.fade-out {
        opacity: 0;
        transition: none;
    }

.title {
    margin-top: 150px;
    padding-bottom: 80px;   /* debug Stef: previous: 150px */
}

.subtitle {
    padding-top: 40px;
}

header {
    /*background-image: url('#');
    background-size: cover;
    background-repeat: repeat;
    background-position: center center;
    background-attachment: fixed; 
    background-color: rgba(253, 253, 253, 1);
    background: linear-gradient(0deg,#fff,#f6f8fd 20%) !important; */
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8fd+0,ffffff+20,ffffff+100 */
    background: #f6f8fd !important; /* Old browsers */
    background: -moz-linear-gradient(top, #f6f8fd 0%, #ffffff 20%, #ffffff 100%) !important; /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f6f8fd 0%,#ffffff 20%,#ffffff 100%) !important; /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f6f8fd 0%,#ffffff 20%,#ffffff 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8fd', endColorstr='#ffffff',GradientType=0 ) !important; /* IE6-9 */
    /*height: 1000px;*/
    font-family: "Roboto";
    color: rgb(40,40,40);
}




.navbar-default {
    /*border-bottom: #fefefe;
    border-bottom: 2px solid transparent;*/
    font-weight: 300;
    font-size: 16px;
    line-height: 1.8;
    color: #fff; /* IE8 proofing */
    color: rgba(255,255,255,.90);
    background-color: transparent;
    border-color: transparent;
}
.navbar-default .navbar-nav > .active > a:hover {
    background-color: transparent !important;
}

@media (max-width: 767px) {  /* max-width must be the same as in the bootstrap.css */
    .nav > li {
        background-color: rgba(255,255,255,.95) !important; /* make left drop down not too transparant white to create layer on top of page-text */
    }
}

.spacer-top {
    height: 50px;
}

.spacer-contact {
    height: 200px;
}

.spacer-bottom {
    height: 100px;
}

.lead {
    font-size: 16px;
}


    .header-content {
        max-width: 600px;
    }

    .container, .container-fluid, .footer-container {
        max-width: 1020px;
    }

    .footer-container {
        width: 1170px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    .narrow {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    .navbar {
        min-height: 65px !important;
    }

    .navbar-brand.navbar-link {
        color: #fff; /* IE8 proofing */
        color: rgba(255,255,255,.95);
        /*border-bottom: 2px solid transparent;*/
    }

    .navbar-default .navbar-nav > li > a {
        /*color:#fafafa;*/
        color: rgb(40,40,40); /* IE8 proofing */
        color: rgba(40,40,40,.95);
        /*border-bottom: 2px solid transparent;*/
    }

    .navbar-default .navbar-nav > .active > a {
        background-color: transparent;
    }


    .navbar-default .navbar-nav > li.active > a {
        color: #60a1ff;
    }

    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
        /*color: #000;
    background-color: #fafafa;*/
        color: #60a1ff;
        /*border-bottom-color: #fff;*/
    }