body {
    padding-top: 0;
    font-family: 'Montserrat', sans-serif;
}

.fadein {
    position: relative;
}
.fadein img {
    position: relative;
    left: 0;
    top: 0;
}

.green {
    color:#037819;
}

a {
    color:#444;
}

a:hover {
    color:#037819;
    text-decoration:none;
}

a:focus {
    outline: none; 
}

a:active,a:focus {
    text-decoration:none;
}

hr {
    width: 50px;
    border: solid 2px #037819;
    padding: 0;
    margin-top: 0;
    margin-bottom: 40px;
}

.title {
    margin-top: 130px;
    margin-bottom: 15px;
    text-align: center;
}

.margin-bottom {
    margin-bottom: 65px;
}

@media (max-width:767px) {
 
    body {
        padding-top: 0px;
    }

    .margin-bottom-xs {
        margin-bottom: 65px;
    }

    hr {
        margin-bottom: 65px;
    }

    .title {
        margin-top: 65px;
    }
}

/* BUTTON
   ================================================== */
.btn {
    border: solid #DDDDDD 1px ;
    border-radius: 0px;
    margin:0;
    margin-bottom:20px;
    margin-top:10px;
    text-transform:uppercase;
    border-radius:4px;
    -webkit-transition: background-color .22s ease-out;
    -moz-transition: background-color .22s ease-out;
    -o-transition: background-color .22s ease-out;
    transition: background-color .22s ease-out;
}

.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.open .dropdown-toggle.btn {
    text-decoration: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    outline:0px !important;
}

/* BUTTON DEFAULT */
.btn-default {
    color: #FFF;
    background-color: #037819;
    border-color: #037819;
}

.btn-default:hover {
    color: #FFF;
    background-color: #049a1f;
    border-color: #049a1f;
}

.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    color: #FFF;
    background-color:#037819;
    border-color: #037819;
}

/* PAGINATION-PAGER
   ================================================== */
.col-pagination {
    margin-top:40px;
}

.pagination .active span{
    background-color:#037819;
    border-color:#EEEEEE;
}

.pagination .active span:hover {
    background-color:#037819;
    border-color:#EEEEEE;
}
.pagination li a, .pager li a {
    -webkit-transition: background-color .22s ease-out;
    -moz-transition: background-color .22s ease-out;
    -o-transition: background-color .22s ease-out;
    transition: background-color .22s ease-out;
}
.pagination li a {
    color:#037819;
    border-color:#EEEEEE;
}

.pagination li a:hover {
    color:#FFF;
    background-color:#037819;
    border-color:#EEEEEE;
}

/* NAVBAR
   ================================================== */
.navbar-default {
    background-color: rgba(255,255,255,.86);
    border: 0;
    /*box-shadow*/
    -webkit-box-shadow: 0 4px 0 0 rgba(0,0,0,0.08);
    -moz-box-shadow: 0 4px 0 0 rgba(0,0,0,0.08);
    box-shadow: 0 4px 0 0 rgba(0,0,0,0.08);
    min-height: 100px;
    /*transition*/
    -webkit-transition: height .22s ease-out;
    -moz-transition: height .22s ease-out;
    -o-transition: height .22s ease-out;
    transition: height .22s ease-out;
}

.navbar-default.tiny {
    min-height: 56px;
}

.navbar-brand {
    margin-top: 0;
    padding-top: 0;
}

.navbar-brand img {
    width: 160px;
    margin-top: 18px;
    /*transition*/
    -webkit-transition: all .22s ease-out;
    -moz-transition: all .22s ease-out;
    -o-transition: all .22s ease-out;
    transition: all .22s ease-out;
}

.navbar.tiny .navbar-brand img {
    width: 108px;
    margin-top: 6px;
}

.navbar.navbar-default .navbar-nav>li>a {
    padding-top: 36px;
    padding-bottom: 54px;
    font-size: 15px;
    text-transform: uppercase;
    color: #22313F;
    /*transition*/
    -webkit-transition: padding .22s ease-out;
    -moz-transition: padding .22s ease-out;
    -o-transition: padding .22s ease-out;
    transition: padding .22s ease-out;
}

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

.navbar.tiny .navbar-nav>li>a {
    padding-top: 18px;
    padding-bottom: 18px;
}

.navbar.navbar-default .navbar-nav>li>a:hover {
    color: #037819;
    /*transition*/
    -webkit-transition: all .13s ease-out;
    -moz-transition: all .13s ease-out;
    -o-transition: all .13s ease-out;
    transition: all .13s ease-out;
}

.navbar.navbar-default .navbar-nav>li.active>a:hover {
    color: #ffffff;
    /*transition*/
    -webkit-transition: all .13s ease-out;
    -moz-transition: all .13s ease-out;
    -o-transition: all .13s ease-out;
    transition: all .13s ease-out;
}

.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus{
    background-color: #037819;
    color: #ffffff;
}

/*.navbar-nav li a .contact:hover {
    -webkit-transition: background-color .13s ease-out;
    -moz-transition: background-color .13s ease-out;
    -o-transition: background-color .13s ease-out;
    transition: background-color .13s ease-out;
    background-color:#049a1f;
}*/


@media (max-width:767px) {
 
    .navbar-default {
        min-height: 50px;
    }

    .navbar-default.tiny {
        min-height: 50px;
    }

    .navbar.navbar-default .navbar-nav>li>a {
        padding-top: 8px;
        padding-bottom: 8px;
        text-align: center;
    }

    .navbar.tiny .navbar-nav>li>a {
        padding-top: 8px;
        padding-bottom: 8px;
        text-align: center;
    }

    .navbar-nav li a .contact {
        padding: 3px 10px;
    }


    .navbar-brand img {
        width: 86px;
        margin-top: 4px;
    }

    .navbar.tiny .navbar-brand img {
        width: 86px;
        margin-top: 4px;
    }

    .navbar-default .navbar-toggle {
        background-color: #037819;
        border-color: #037819;
    }

    .navbar-default .navbar-toggle:hover,
    .navbar-default .navbar-toggle:active,
    .navbar-default .navbar-toggle:focus {
        background-color: #ffffff;
    }

    .navbar-default .navbar-toggle .icon-bar {
        background-color: white;
    }

    .navbar-default .navbar-toggle:hover .icon-bar,
    .navbar-default .navbar-toggle:active .icon-bar,
    .navbar-default .navbar-toggle:focus .icon-bar {
        background-color: #22313F;
    }
}

/* INTRO
   ================================================== */
.bg-intro {
    color: #FFF;
    background-image: url('../img/DSC_6947.JPG');
    background-repeat: no-repeat;
    background-position: top;
    /*background-size*/
    -moz-background-size: cover;
    background-size: cover;
}

.bg-intro .row {
    padding-top: 350px;
    padding-bottom: 50px;
}

.layer-intro {
    background-color:rgb(34,49,63);
    /* IE 8 OPACITY */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    background-color: rgba(34,49,63,.0);
}

.bg-intro h1 {
    position:relative;
    top:0px;
    font-size: 46px;
    max-width: 700px;
    margin: 0 auto;
    text-transform: uppercase;
    line-height: 66px;
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

/* ANIMATION */
@-webkit-keyframes bounceInUp {
    0% {
        opacity: 0;
        top:1000px;
    }

    60% {
        opacity: 1;
        top:-30px;
    }

    80% {
        top:10px;
    }

    100% {
        top:0px;
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        top:1000px;
    }

    60% {
        opacity: 1;
        top:-30px;
    }

    80% {
        top:10px;
    }

    100% {
        top:0px;
    }
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #35404C;
    margin: 0 auto;
}

@media (max-width:767px) { 

    .bg-intro h1 {
        font-size: 26px;
        line-height: 32px;
    }

    .bg-intro .row {
        padding-top: 105px;
        padding-bottom: 65px;
    }
}

/* PORTFOLIO
   ================================================== */
.bg-portfolio p {
    color: #777;
    font-size: 16px;
    line-height: 28px;
}

.row-portfolio {
    margin-bottom: 138px;
}

.wrapper-portfolio {
    border-radius:10px;
    margin: 0 auto;
    position: relative;
    display: block;
    background-color: #34495E;
    max-width: 320px;
    /*box-shadow*/
    -webkit-box-shadow: 0px 6px 0 0 rgba(0,0,0,0.08);
    -moz-box-shadow: 0px 6px 0 0 rgba(0,0,0,0.08);
    box-shadow: 0px 6px 0 0 rgba(0,0,0,0.08);
}

.wrapper-portfolio .img-responsive {
    border-radius:10px;
    /*transition*/
    -webkit-transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    transition: opacity .1s linear;
}

.wrapper-portfolio:hover .img-responsive {
    /* IE 8 OPACITY*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    opacity: 0.06;
}

.wrapper-portfolio:hover .category {
    visibility: visible;
    top: 50%;
}

.category {
    visibility: hidden;
    position: absolute;
    top: 140%;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    margin: 0 auto;
    color: #FFF;
    line-height: 0;
    font-size: 20px;
    /*transition*/
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

/* samenstelling
   ================================================== */
.bg-samenstelling {
    background-color: rgba(228, 235, 241, 1);
    padding-top: 130px;
    padding-bottom: 130px;
}

.bg-samenstelling h2 {
    margin-top: 0;
}

.bg-samenstelling p {
    padding-right: 40px;
    color: #777;
    font-size: 16px;
    line-height: 28px;
    margin-top: 14px;
}

.bg-samenstelling h4 {
    color: #777;
}

.progress {
    background-color: #e7e7e7;
    border-radius: 4px;
}

.progress-bar {
    background-color: #34495E;
}

@media (max-width:767px) {
    .bg-samenstelling p {
        padding-right: 0px;
    }
}

/* bezetting
   ================================================== */
.bg-bezetting {
    padding-top: 130px;
    padding-bottom: 130px;
}

.bg-bezetting h2 {
    margin-top: 0;
}

.bg-bezetting p {
    padding-right: 40px;
    color: #777;
    font-size: 16px;
    line-height: 28px;
    margin-top: 14px;
}

.bg-bezetting h4 {
    color: #777;
}

.progress {
    background-color: #e7e7e7;
    border-radius: 4px;
}

.progress-bar {
    background-color: #34495E;
}

@media (max-width:767px) {
    .bg-bezetting p {
        padding-right: 0px;
    }
}

/* repertoire
   ================================================== */
.bg-repertoire {
    background-color: rgba(228, 235, 241, 1);
    padding-top: 0;
    padding-bottom: 130px;
}

.bg-repertoire h3 {
    margin-top: 0;
    color: #777;
    font-size: 20px;
}

.bg-repertoire p {
    color: #777;
}

.bg-repertoire .row .fa {
    width: 40px;
    text-align: center;
    color: #037819;
}

.bg-repertoire .row .fa-mobile {
    font-size: 80px;
    padding-top: 0;
}

@media (max-width:767px) {

    .bg-repertoire h3, .bg-repertoire p {
        padding-left: 12px;
    }

    .bg-repertoire .row .fa {
        width: 40px;
        text-align: center;
        padding-top: 0px;
        font-size: 44px;
    }

    .bg-repertoire .row .fa-mobile {
        font-size: 80px;
        padding-top: 0px;
    }
}

/* impressie
   ================================================== */
.bg-impressie {
    padding-top: 130px;
    padding-bottom: 130px;
}

.bg-impressie h2 {
    margin-top: 0;
}

.bg-impressie p {
    padding-right: 40px;
    color: #777;
    font-size: 16px;
    line-height: 28px;
    margin-top: 14px;
}

.bg-impressie h4 {
    color: #777;
}

.bg-impressie .service-box {
    margin-bottom: 25px;
}

.bg-impressie a:hover .zoom-icon {
    visibility: visible;
    opacity: 1;
}

.bg-impressie a span.zoom-icon{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 5px;
    display: block;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    cursor: pointer;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.bg-impressie a span.zoom-icon:before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    margin: -18px 0 0 -18px;
    width: 36px;
    height: 36px;
    background: url(../img/magnify-alt.png) 50% 50% no-repeat;
    content: "";
}

.progress {
    background-color: #e7e7e7;
    border-radius: 4px;
}

.progress-bar {
    background-color: #34495E;
}

@media (max-width:767px) {
    .bg-impressie p {
        padding-right: 0px;
    }
}

/* CONTACT
   ================================================== */
.bg-contact {
    background-color: #037819;
    color: #FFF;
    padding-top: 32px;
    padding-bottom: 32px;
}

.bg-contact .glyphicon-envelope {
    margin-right: 10px;
    position: relative;
    top: 2px;
}

.bg-contact .mail {
    color: #FFF;
    text-decoration: none;
    font-size: 18px;
    padding: 12px 30px;
    border: solid 2px #FFF;
    border-radius: 4px;
    margin-bottom: 15px;
    display: inline-block;
    width: 70%;
}

.bg-contact h3 {
    display: inline-block;
}

.bg-contact .mail:hover {
    background-color: #FFF;
    color: #037819;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

@media (max-width:767px) {
 
    .bg-contact h3 {
        display: block;
        margin: 0;
        margin-bottom: 32px;
    }
}

/* FOOTER
   ================================================== */
.bg-footer {
    background-color: #22313F;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 60px;
    border-top: 20px solid #405a74;
}

.bg-footer .fa {
    color: #405A74;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    border: solid 4px #405A74;
    font-size: 50px;
    text-align: center;
    padding-top: 12px;
    margin-right: 20px;
    text-decoration: none;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

.bg-footer .fa:hover {
    background-color: #405A74;
    color: #22313F;
}

@media (max-width:767px) {

    .bg-footer {
        border-width: 6px;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .bg-footer .fa {
        width: 50px;
        height: 50px;
        border: solid 2px #3a536b;
        font-size: 30px;
        padding-top: 8px;
        margin-right: 10px;
    }
}

/* FOOTER BOTTOM
   ================================================== */
.bg-footer-bottom {
    background-color: #162029;
    padding-top: 32px;
    padding-bottom: 32px;
}

.bg-footer-bottom p {
    margin: 0;
    padding: 0;
    color: #3a536b;
    font-size: 15px;
}

.bg-footer-bottom ul {
    padding: 0;
    margin: 0;
    font-size: 15px;
}

.bg-footer-bottom ul li a {
    color:#3a536b;
}

.bg-footer-bottom ul li a:hover {
    color:#037819;
    text-decoration: none;
    
}
.bg-footer-bottom .border-right {
    border-right: 1px solid #3a536b;
    padding-right: 12px;
}

@media (max-width:767px) {

    .bg-footer-bottom .copyright {
        text-align: center;
        margin-bottom: 16px;
    }

    .bg-footer-bottom ul {
        text-align: center;
        float: none !important;
    }
}

/* BLOG
   ================================================== */
.title-blog {
    margin-top:30px;
    /*transition*/
    -webkit-transition: all .22s ease-out;
    -moz-transition: all .22s ease-out;
    -o-transition: all .22s ease-out;
    transition: all .22s ease-out;
}

.navbar.tiny .title-blog {
    margin-top:12px;
    margin-bottom:0px;
}

.bg-intro-blog {
    min-height:590px;
    background-image: url(../img/bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    /*background-size*/
    -moz-background-size: cover;
    background-size: cover;
}

.layer-intro-blog {
    min-height:590px;
    background-color:rgb(34,49,63);
    /* IE 8 OPACITY */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    background-color: rgba(34,49,63,.9);
}

.wrapper-blog{
    background-color:#FFF;
    position:relative;
    top:-300px;
    padding:50px 65px;
    -webkit-box-shadow: 0px 4px 0px 4px rgba(51,51,51,0.04);
    -moz-box-shadow: 0px 4px 0px 4px rgba(51,51,51,0.04);
    box-shadow: 0px 4px 0px 4px rgba(51,51,51,0.04);
    margin-bottom:-150px;
}

.wrapper-disqus{
    margin-top:80px;
}

.wrapper-blog hr {
    width:100%;
    border:0px;
    border-bottom:solid 1px #EEEEEE;
    margin-top:40px;
    margin-bottom:60px;
}

.wrapper-blog .row {
    margin-bottom:20px;
}

.wrapper-blog .img-featured {
    border-radius:2px;
}


.wrapper-blog .img-featured {
    margin-bottom:20px;
}

.wrapper-blog a .img-featured {
    /*transition*/
    -webkit-transition: opacity .22s ease-out;
    -moz-transition: opactiy .22s ease-out;
    -o-transition: opacity .22s ease-out;
    transition: opacity .22s ease-out;
}

.wrapper-blog a .img-featured:hover {
    opacity:0.9;
}

/* BLOG TYPOGRAPHY
   ================================================== */
.wrapper-blog h1, .wrapper-blog h2, .wrapper-blog h3, .wrapper-blog h4, .wrapper-blog h5, .wrapper-blog h6 {
    margin-top:20px;
    margin-bottom:10px;
}

.wrapper-blog p, .wrapper-blog ul, .wrapper-blog ol{
    font-family: 'Titillium Web', sans-serif;
    font-size:18px;
    line-height:28px;
    font-weight:300;
    color:#666;
    -webkit-font-smoothing: antialiased;
}
.wrapper-blog p {
    margin-top:0px;
}
.wrapper-blog .author {
    margin-bottom:20px;
}
.wrapper-blog ul, .wrapper-blog ol, .wrapper-blog img {
    margin-top:20px;
    margin-bottom:10px;
}
.wrapper-blog .title-post {
    margin-top:0px;
    margin-bottom:20px;
    text-transform: uppercase;
    color:#444;
    -webkit-transition: color .22s ease-out;
    -moz-transition: color .22s ease-out;
    -o-transition: color .22s ease-out;
    transition: color .22s ease-out;
}

.wrapper-blog a .title-post:hover {
    color:#037819;
}

/* BLOG-POST-GALLERY */
.wrapper-thumbnail {
    border-radius:4px;
    position: relative;
    display: block;
    background-color: #34495E;
    margin-bottom:20px;
    max-width:350px;
}

.wrapper-thumbnail img {
    border-radius:4px;
    /*transition*/
    -webkit-transition: opacity .22s ease-out;
    -moz-transition: opacity .22s ease-out;
    -o-transition: opacity .22s ease-out;
    transition: opacity .22s ease-out;
}

.wrapper-thumbnail:hover img {
    /* IE 8 OPACITY*/
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
    opacity: 0.4;
}

.wrapper-thumbnail:hover .fa-search{
    visibility:visible;
}

.fa-search {
    visibility:hidden;
    position:absolute;
    top:0px;
    color:white;
    line-height:0px;
    top:50%;
    left:0px;
    right:0px;
    text-align:center;
}

@media (max-width:767px) {
.title-blog {
    margin-top:12px;
    /*transition*/
    -webkit-transition: all .22s ease-out;
    -moz-transition: all .22s ease-out;
    -o-transition: all .22s ease-out;
    transition: all .22s ease-out;
    font-size:24px;
}

.navbar.tiny .title-blog {
    margin-top:12px;
    margin-bottom:0px;
}

.row-blog {
    padding:10px;
}

.wrapper-blog{
    top:-60px;
    padding:30px 20px;
    margin-bottom:0px;
}

.wrapper-blog .row {
    margin-bottom:0px;
}

.navbar-brand-blog {
    margin-left:-15px;
}

.wrapper-blog h1, .wrapper-blog h2, .wrapper-blog h3, .wrapper-blog h4, .wrapper-blog h5, .wrapper-blog h6 {
    margin-top:40px;
    margin-bottom:10px;
}

.bg-intro-blog, .layer-intro-blog {
    min-height:160px;
}

.wrapper-blog .title-post {
    font-size:22px;
}

.wrapper-blog .author {
    font-size:15px;
}

}