/* ================================
          -- Generals--
================================ */   

body,
html {
    background: #676767;
    letter-spacing: 1px;
}

.columns {
    padding-right: 1.875em;
    padding-left: 1.875em;
}
 

.column-custom {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    float: left;
}

.inner-container {
    padding-top: 95px;
    background: #fff url('http://www.wittevogelbouw.nl/wp-content/uploads/2014/12/vogel.png') no-repeat !important;
    background-size: 50% !important;
    background-position: center center !important;
}

.button {
    background: #4088d4;
    width: 300px;
    height: 50px;
    border-bottom-right-radius: 10px;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    -webkit-box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
    padding-top: 16px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 100;
}

.button:hover { 
    background: #414141;
}

@media only screen and (max-width: 60.063em) {
    
    .inner-container {
        padding-top: 1.875em;
    }
    
}

/* ================================
          -- Headers --
================================ */  

h1, h2, h3, h4, h5, h6, p {
    font-weight: 100 !important;
    letter-spacing: 1px;
} 

@media only screen and (max-width: 40.063em) {

    h1, h2, h3, h4, h5, h6, p {
        font-weight: 300 !important;
    }
    
} 


/* ================================
          -- Sections --
================================ */     

section#footer {
    background: #414141;
    height: 200px;
}

/* ================================
    -- Main section shadows --
================================ */ 

.c-wrapper {
    background: #fff;
    position: relative;
    padding-bottom: 1.875em;
}

.c-wrapper:before {
    box-shadow: -15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    left: -15px;
    position: absolute;
    top: 0;
    width: 15px;
}

.c-wrapper:after {
    box-shadow: 15px 0 15px -15px inset;
    content: " ";
    height: 100%;
    position: absolute;
    right: -15px;
    width: 15px;
    top: 0;
}

@media only screen and (max-width: 76em) {

    .c-wrapper:before,
    .c-wrapper:after {
        display: none;
    }
    
}

/* ================================
        -- Sectie: Slider --
================================ */ 

section#slider {
    padding: 1.875em;
    position: relative;
}

.slider-caption {
    position: absolute;
    bottom: 50px;
    right: 50px;
    border: 2px solid #fff;
    border-radius: 10px;
    background: rgba(1,1,1,0.3);
    padding: 10px;
}

.slider-caption h3 {
    color: #fff;
    font-weight: 100;
}

@media only screen and (max-width: 60.063em) {

    section#slider {
        padding: 0px 0px 0px 0px;
    }
    
    .slider-caption {
        position: absolute;
        bottom: auto;
        right: 0;
        left: 0;
        top: 10px;
        border: none;
        border-radius: 0px;
    }
    
    .slider-caption h3 {
        color: #fff;
        font-weight: 300;
    }
    
}

/* ================================
    -- Homepage diensten --
================================ */

section#diensten {
    background: #f5f5f5;
    border-top: 1px solid #6c6c6c;
    border-bottom: 1px solid #6c6c6c;
    padding: 1.875em 0.925em 1.875em 0.925em;
}

section#diensten {
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.dienst {
    width: 100%;
    padding-right: 10px;
}

.dienst-naam {
    background: #414141;
    width: 100%;
    height: 50px;
    border-bottom-right-radius: 10px;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    -webkit-box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    margin-bottom: 15px;
}

.project-naam {
    background: #414141;
    width: 100%;
    height: 50px;
    border-bottom-right-radius: 10px;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    -moz-transition: all .2s ease;
    box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    -webkit-box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    margin-bottom: 15px;
    color: #fff;
    text-align: center;
    padding-top: 16px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 100;
}

.dienst:hover .dienst-naam,
.dienst:hover .project-naam,
.dienst-naam:hover,
.project-naam:hover {
    background: #4088d4;
}

.dienst-naam p,
.dienst-naam a {
    color: #fff;
    text-align: center;
    padding-top: 16px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

p.dubbel {
    padding-top: 5px;
}

.dienst-afbeelding img {
    width: 100%;
    max-height: 107px;
}

@media only screen and (max-width: 40.063em) {

    .dienst-afbeelding {
        display: none;
    }
    
    p.dubbel {
        padding-top: 16px;
    }
    
    .dienst-naam {
        border-radius: 0px;
        margin-bottom: 1px;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    
    .article-thumb img {
        width: 100%;
    }
}

@media only screen and (min-width: 40.064em) and (max-width: 70.063em) {

    .article-thumb img { 
        height: 150px !important;
        width: 100%;
    }
    
}

/* ================================
    -- Sectie: Homepage Content --
================================ */

section#content {
    padding-top: 1.875em !important;
}

/* --- Contact --- */

.homepage-contact {
    border: 1px solid #6c6c6c;  
    padding: 1.875em;
    border-radius: 4px;
}

.contact-header-logo {
    padding-bottom: 0.925em;
    border-bottom: 1px solid #1d1d1d;
}

.contact-introductie {
    padding-top: 0.925em;
}

.gform_wrapper input[type="text"],
.gform_wrapper textarea {
    background: #fff;
    width: 100% !important;
    border-radius: 3px;
    box-shadow: 0 2px 2px 0 rgba(1,1,1,0.1);
    -webkit-box-shadow: 0 2px 2px 0 rgba(1,1,1,0.1);
    padding-left: 10px !important;
}

.gform_wrapper input[type="submit"] {
    background: #4088d4;
    width: 100%;
    border-bottom-right-radius: 10px; 
     box-shadow: 0 2px 3px 0 rgba(1,1,1,0.1);
    -webkit-box-shadow: 0 3px 2px 0 rgba(1,1,1,0.1);
    font-family: inherit;
    font-weight: 100;
}

.gform_wrapper input:hover[type="submit"] {
    background: #414141;
}

.gform_footer.top_label {
    padding: 0px !important;
}

/* ================================
         -- Top header --
================================ */

section#header {
    background: #414141; 
    height: 74px;
    border-top: 4px solid #1d1d1b;
}

.logo {
    position: absolute;
    top: 0;
    z-index: 1;
    background: #1d1d1b;
    border-bottom-right-radius: 20px;
    box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    -webkit-box-shadow: 0 3px 2px 0 rgba(1,1,1,0.3);
    width: 200px;
}

.logo img {
    padding: 15px;
}

ul#menu-menu li a {
    font-family: inherit;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 12px;
}

ul#menu-menu li#menu-item-89,
ul#menu-menu li#menu-item-91 { 
    max-width: 180px;
    text-align: center;
}

ul#menu-menu li#menu-item-89 a,
ul#menu-menu li#menu-item-91 a { 
    line-height: 22px;
}

ul#menu-footer-menu li.divider {
    display: none;
    }

.top-bar,
.top-bar-section ul li>a {
    background: #414141 !important;
}

.top-bar.expanded .title-area {
    background: #1d1d1b;
}

.top-bar-section ul li>a:hover {
    color: #999 !important;
}

.top-bar-container {
    margin-bottom: 0px;
}

li.name {
    display: none;
}

li.divider {
    border-right: 0px !important;
}

li.divider:before {
    width: 10px;
    height: 10px;
    content: url('../assets/img/images/nav-divider.png');
    position: absolute;
}

@media screen and (max-width: 40.063em) {
    
    li.name {   
        display: block;
    }

    .top-bar,
    .top-bar-section ul li>a {
        background: #1d1d1b !important;
    }
    
    ul#menu-menu li#menu-item-89,
    ul#menu-menu li#menu-item-91{ 
        max-width: 100%;
        text-align: left;
    }
    
    section#header {
        height: 50px;
        background: #1d1d1b;
    }
    
    .responsive-logo {
        display: none;
    }
    
    .logo {
        display: none;
    }
    
}

@media screen and (min-width: 40.064em) and (max-width: 60.063em) {


    .logo {
        display: none;
    }
    
    .logo img {
        height: 90px;
        width: auto;
        padding: 5px;
    }
    
    section#header {
        height: 139px;
        background: #1d1d1b;
    }

    ul#menu-menu,
    .top-bar, .top-bar-section ul li>a {
        background: #1d1d1b !important;
    }
    
    li.divider {
        border-right: 0px !important;;
    }
    
    ul#menu-menu li#menu-item-89,
    ul#menu-menu li#menu-item-91 { 
        max-width: 100%;
        text-align: center;
    }

    ul#menu-menu li#menu-item-89 a,
    ul#menu-menu li#menu-item-91 a { 
        line-height: 45px;
    }
    
}

@media screen and (max-width: 60.063em) { 

    li.divider {
        display: none;
    }
    
}

@media only screen and (min-width: 60.063em) and (max-width: 64em) {

    .hoofdmenu {
        padding-left: 200px;
    }
    
}
    

@media only screen and (min-width: 60.063em) {

    .top-bar {
        padding-top: 12px;
    }
    
    .responsive-logo {
        display: none;
    }
    
}

/* ================================
          -- Footer --
================================ */   

footer.row {
    margin-top: 0px;
}

ul#menu-footer-menu {
    list-style: none;
}

ul#menu-footer-menu li {
    float: left;
    padding-right: 90px;
}

ul#menu-footer-menu li a {
    color: #a0a0a0;
    font-family: inherit;
    font-weight: 100;
    font-size: 14px;
}

ul#menu-footer-menu li a:hover {
    color: #fff;
}

.copyright {
    color: #a0a0a0;
    font-family: inherit;
    font-weight: 100;
    font-size: 14px;
    text-align: right;
    position: relative;
    top: 25px;
}

.social-media {
    position: absolute;
    top: 20px;
}

@media only screen and (max-width: 40.063em) {

    ul#menu-footer-menu li {
        float: none;
    }
    
    ul#menu-footer-menu {
        margin-left: 0px;
        padding-top: 20px;
    }
        
}

@media only screen and (max-width: 60.063em) {

    .copyright {
        text-align: left;
        padding-left: 50px;
    }
    
}

/* ================================
    -- Archief pagina's --
================================ */

.project-wrap {
}

.archive article.post {
    width: 33%;
    float: left;
}


@media only screen and (max-width: 40.063em) {

    .archive article.post {
        width: 100%;
    }
    
    .archive .article-thumb img {
        height: auto;
    }
    
}

@media only screen and (max-width: 60.063em) {

    .archive .article-thumb img {
        height: auto;
    }
    
}

@media only screen and (min-width: 70.063em) {

    .archive .article-thumb img {
        height: 150px;
    }
    
}

/* ================================
    -- Project innerpage --
================================ */

.project-inner-image img {
    width: 98.5%; 
    padding-top: 1.875em;
}

.project-inner-titel {
    padding-top: 0.925em;
}
    
.project-inner-thumbs img {
    width: 123px;
}

.visible-img img {
    width: auto;
}

.project-inner-thumbs li {
    margin-right: 5px;
    margin-top: 5px;
    height: 123px;
}

@media only screen and (max-width: 40.063em) {

    .project-inner-image img {
        width: 100%;
    }
    
    .project-inner-thumbs img {
        width: 54px;
    }
    
    .visible-img img {
        width: auto;
    }
    
    .project-inner-thumbs li {
        height: 54px;
    }
    
}

/* ================================
    -- Contact pagina --
================================ */

#map {
    height: 400px;
    width: 100%;
}