@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

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

.header {
    display: table;
    width: 100%;
    height: 70%;
    padding: 0;
    text-align: center;
    color: #000;
    background: url(../img/bureau-brenda-header.jpg) bottom center no-repeat #FFF;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    -webkit-transition: background-color 700ms linear;
    -moz-transition: background-color 700ms linear;
    -o-transition: background-color 700ms linear;
    -ms-transition: background-color 700ms linear;
    transition: background-color 700ms linear
}

#overlay {
    background-color: #000;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    color: #FFF
}

.header .header-body {
    display: table-cell;
    vertical-align: middle
}

.branding {
    border: 5px solid #FFF;
    margin: 0 auto;
    padding: 10px 5px;
    width: 210px
}

h1 {
    font-family: Roboto, sans-serif;
    font-weight: 700;
    font-size: 40px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    color: #FFF
}

@media (min-width: 768px) {
    .header {
        height: 100%;
        padding: 0
    }

    .header .header-body {
        display: table-cell;
        vertical-align: bottom
    }

    .branding {
        float: right;
        margin: 0 50px 50px 0
    }

    #overlay {
        display: none
    }

    #scrollto {
        padding-bottom: 175px
    }
}

#about .photo {
    height: 500px;
    background: url(../img/bureau-brenda-portret.jpg) 50% 20% no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover
}

#about .content {
    height: 100%;
    display: table
}

#contact .content {
    margin-top: 0;
    height: 300px;
    display: table
}

.content {
    background-color: #f2d723;
    color: #30383e
}

.content .text {
    display: table-cell;
    vertical-align: middle
}

.content .text p {
    padding: 25px 15px;
    font-family: Roboto, sans-serif;
    font-size: 22px;
    line-height: 46px
}

.content .text p a {
    color: #30383e;
    border-bottom: 2px solid #30383e
}

.content .text p a:focus, .content .text p a:hover {
    text-decoration: none
}

@media (min-width: 768px) {
    #about .content, #about .photo {
        height: 535px
    }

    #contact .content {
        margin-top: 50px
    }

    .content .text p {
        width: 90%;
        margin: auto;
        padding: 50px 0;
        line-height: 46px
    }
}

@media (min-width: 1224px) {
    #about .content, #about .photo {
        height: 700px
    }

    #contact .content {
        height: 400px
    }

    .content .text p {
        font-size: 28px;
        width: 80%;
        line-height: 62px
    }
}

#footer {
    background-color: #F2F2F2
}

#footer .text {
    padding: 25px;
    height: 125px;
    display: table
}

#footer .text p {
    display: table-cell;
    vertical-align: middle;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    color: #999;
    font-size: 20px;
    text-align: right
}

#footer ul.footer {
    display: table-cell;
    vertical-align: middle;
    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
    font-size: 20px;
    margin: 0;
    padding: 0
}

#footer ul.footer li {
    list-style-type: none;
    padding-right: 30px;
    line-height: 50px
}

#footer .left {
    text-align: left;
    color: #999
}

#footer .right {
    text-align: left;
    color: #BBB
}

#footer a {
    color: #999;
    border-bottom: 2px solid #999
}

#footer a:focus, #footer a:hover {
    text-decoration: none
}

@media (min-width: 768px) {
    #footer ul.footer {
        font-size: 16px
    }

    #footer ul.footer li {
        display: inline
    }

    #footer .right {
        text-align: right
    }

    #footer .right ul.footer li {
        padding-right: 0;
        padding-left: 30px
    }

    .footer-wrapper {
        padding: 0 25px
    }
}

@media (min-width: 1224px) {
    #footer ul.footer {
        font-size: 20px
    }
}

#twitter {
    padding: 50px 0 25px 0;
    text-align: center;
}

#twitter li {
    list-style-type: none;
    text-align: left;
    font-family: Roboto, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 60px;
    color: #000
}

#twitter li a {
    color: #000;
    border-bottom: 2px solid #000;
}

#twitter li a:hover {
    text-decoration: none;
}

#twitter li .interact {
    display: none;
}

.feed {
    text-align: center;
    width: 100%;
    height: auto;
    padding: 0
}

.item {
    padding: 0
}

.carousel-indicators {
    bottom: -50px
}

.carousel-inner {
    margin-bottom: 50px
}

.carousel-indicators li {
    background-color: #efefef
}

.carousel-indicators .active {
    background-color: #f2d723
}

@media (min-width: 768px) {
    .carousel-inner, .feed {
        height: auto
    }

    .item {
        padding-top: 50px
    }
}

@media (min-width: 1224px) {
    .carousel-inner, .feed {
        height: auto
    }

    .item {
        padding-top: 50px
    }
}

.fa {
    color: #CCC;
    margin-right: 25px;
    padding: 20px 25px !important
}

i {
    border-color: #CCC !important;
    border-radius: 0 !important
}

blockquote.twitter-tweet {
    text-align: left
}

blockquote.twitter-tweet p {
    font-family: Roboto, sans-serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 48px;
    color: #000
}

blockquote.twitter-tweet a {
    font-weight: 400;
    text-decoration: none;
    border-bottom: 2px solid #000;
    color: #000
}

blockquote.twitter-tweet a:focus, blockquote.twitter-tweet a:hover {
    text-decoration: none
}

.author {
    line-height: 40px;
    color: #999
}

@media (min-width: 1224px) {
    blockquote.twitter-tweet p {
        font-size: 28px;
        line-height: 58px
    }
}

blockquote.twitter-tweet .author a {
    color: #999;
    border-bottom: 0
}

::-moz-selection {
    color: #000;
    background: #f2d723
}

::selection {
    color: #000;
    background: #f2d723
}

.followmebutton {
    text-align: right;
    height: 100%
}

.twitterbutton {
    font-family: Roboto, sans-serif;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    border: 2px solid #999;
    padding: 6px 10px 5px;
    width: 90px
}

#followme a {
    color: #999
}

#followme a:hover {
    text-decoration: none
}

#followme {
    float: right;
    margin: 25px 0 0
}

@media (min-width: 768px) {
    #followme {
        float: right;
        margin: 0 50px 0 0
    }
}

.pace {
    -webkit-pointer-events: none;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.pace-inactive {
    display: none
}

.pace .pace-progress {
    background: #fff;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
    display: none
}

.pace .pace-progress-inner {
    display: block;
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #fff, 0 0 5px #fff;
    opacity: 1;
    -webkit-transform: rotate(3deg) translate(0, -4px);
    -moz-transform: rotate(3deg) translate(0, -4px);
    -ms-transform: rotate(3deg) translate(0, -4px);
    -o-transform: rotate(3deg) translate(0, -4px);
    transform: rotate(3deg) translate(0, -4px)
}

.pace .pace-activity {
    display: block;
    position: fixed;
    z-index: 2000;
    top: 15px;
    right: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 10px;
    -webkit-animation: pace-spinner 400ms linear infinite;
    -moz-animation: pace-spinner 400ms linear infinite;
    -ms-animation: pace-spinner 400ms linear infinite;
    -o-animation: pace-spinner 400ms linear infinite;
    animation: pace-spinner 400ms linear infinite
}

@-webkit-keyframes pace-spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-moz-keyframes pace-spinner {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-o-keyframes pace-spinner {
    0% {
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-ms-keyframes pace-spinner {
    0% {
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes pace-spinner {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}

.bg-light{background:#fafafa}
.no-margin{margin:0}
.m-t{margin-top:10px}
.m-t-5{margin-top:5px}
pre.code-sample{white-space:pre-wrap;background:#f7f7f9;padding:15px;border:1px solid #e1e1e8}