/*
Theme Name: Architectenbureau Goedehuizen
Description: HTML Responsive
Version: 1.0
*/

 /*
===============================================================
FONT FACE
===============================================================
*/
 @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');

 /*
===============================================================
GLOBAL
===============================================================
*/
 body {
     font-family: 'PT Sans';
     color: #323e4a;
 }

 a {
     outline: 0 !important;
     color: #323e4a;
 }

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

 .nopadding {
     padding: 0px;
 }

 .positionrelative {
     position: relative;
 }


 .form-control,
 .btn {
     border-radius: 0px;
 }


 /*
===============================================================
HEADER
===============================================================
*/

 #header {
     padding: 40px 0px 20px;
     border-top: 8px solid #00a670;

 }

 #header .topmenu ul {
     padding: 0;
     margin: 10px 15px 0 0;
     list-style: none;
 }

 #header .topmenu ul li {
     float: left;
 }

 #header .topmenu ul li a {
     color: #4e5560;
     font-size: 15px;
     padding: 10px 50px 10px 0;
 }

 #header .topmenu ul li a:hover {
     color: #00a670;
     text-decoration: none;
 }


 #header .logo {
     float: right;
 }




 /*
===============================================================
NAVBAR
===============================================================
*/

 @media screen and (min-width: 769px) {


     .navbar {
         margin: 0;
         border: 0 none;
         border-radius: 0;
         padding-top: 20px;
         background-color: #ffffff;
         font-size: 15px;
         padding-top: 85px;
     }

     .navbar-default .navbar-nav>li>a {
         color: #4e5560;
         margin-right: 15px;
         margin-left: 15px;
     }

     .navbar-default .navbar-nav>li:first-child {
         margin-left: -30px;
     }

     .navbar-default .navbar-nav>li>a:hover {
         color: #00a670;
     }

     .navbar-collapse {
         padding-left: 0px;
     }

 }

 /*
===============================================================
BANNER
===============================================================
*/
 #banner {
     margin: 25px 0;
 }

 .carousel-control.left {
     background-image: none;
 }

 .carousel-control .glyphicon-chevron-left,
 .carousel-control .icon-prev {
     margin-left: -55px;
     text-shadow: none;
 }

 .carousel-control.right {
     background-image: none;
 }

 .carousel-control .glyphicon-chevron-right,
 .carousel-control .icon-next {
     margin-right: -55px;
     text-shadow: none;
 }

 /*
===============================================================
HOME
===============================================================
*/
.volg-ons {
    margin-top: 56px;
}
.volg-ons ul {
    list-style: none;
    padding-left: 0;
}
.volg-ons ul li {
    margin-bottom: 5px;
}
.volg-ons ul li a {
    padding: 5px 0;
}
.volg-ons a.facebook:hover {
    color: #3b5998;
}
.volg-ons a.instagram:hover {
    color: #d60048;
}
.volg-ons a.linkedin:hover {
    color: #006699;
}
.volg-ons a i {
    margin-right: 10px;
    font-size: 2.25em;
    display: inline-block;
    vertical-align: middle;
}

 /*
===============================================================
PROJECTEN
===============================================================
*/

 #projecten .container {
     margin-top: 25px;
     margin-bottom: 50px;
 }

 #projecten .blok {
     width: 285px;
     height: 285px;
     font-size: 16px;
     float: left;
 }

 #projecten .titelblok {
     background-color: #00a670;
 }

 #projecten .blauw {
     background-color: #323e4a;
 }

 #projecten .titelblok h2,
 #projecten .titelblok h2 a {
     color: #ffffff;
     padding-left: 15px;
     font-size: 23px;
 }

 figure {
     position: relative;
     display: inline-block;
 }

 figcaption {
     display: none;
     position: absolute;
     left: 0;
     bottom: 5px;
     right: 0;
 }

 figure:hover img {
     opacity: .4;
 }

 figure:hover figcaption {
     display: block;
 }

 #projecten h3 {
     font-size: 17px;
     font-weight: bold;
     padding-left: 13px;
 }

 #projecten .desc {
     padding-left: 13px;
     font-size: 14px;
 }




 /*
===============================================================
HOME
===============================================================
*/

 .nieuws ul {
     padding-left: 18px;
 }

 /*
===============================================================
CONTANT
===============================================================
*/

 /* anti spam */
 .mailaddress {
     display: none;
 }


 ul.nav li.dropdown:hover>ul.dropdown-menu {
     display: block;
 }

 /*
===============================================================
TEAM (INFO)
===============================================================
*/
 .image-zoom-wrapper * {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 .image-zoom {
     position: relative;
     margin: 0 auto;
     overflow: hidden;
     width: 100%;
     max-width: 200px;
     padding: 0;
     background: rgb(0, 0, 0);
     margin-bottom:30px;
 }

 .image-zoom img {
     max-width: 100%;
     transform: scale(1);
     -moz-transition: all 0.3s;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     opacity: 1;
 }

 .image-zoom .overlay {
     z-index: 3;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     transition: all 0.3s;
     padding: 10px 15px;
     /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
     background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
     /* FF3.6-15 */
     background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
     /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
     /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0);
     /* IE6-9 */


 }

 .image-zoom .overlay p {
     color: #fff;
     margin: 0;
     padding: 0;
     font-size: 120%;
     letter-spacing: 0.02em;

 }

 .image-zoom .overlay p em {
     font-size: 85%;
     letter-spacing: 0;
 }

 .image-zoom:hover img,
 .image-zoom:hover .overlay {
     -moz-transform: scale(1.2);
     -webkit-transform: scale(1.2);
     transform: scale(1.2);
     -ms-transform: scale(1.2);
     -o-transform: scale(1.2);
     opacity: 0.75;
 }

 .image-zoom:hover .overlay {
     opacity: 0;
 }
 
/*----------------------------------------*/
/*             DROPDOWN MENU              */
/*----------------------------------------*/

.dropdown-menu {
    padding: 0;
    border: none;
    border-left: 2px solid #00a670;

}
.custom-dropdown:hover .dropdown-menu {
    display: block;
}
.dropdown-menu li {
    min-width: 173px;
}
.dropdown-menu li a {
    border: 1px solid #f4f4f4;
    border-left: none;
    padding: 5px 15px;
    height: 100%;
}
.dropdown-menu li a:active {
    background: #00a670; 
}

/*----------------------------------------*/
/*             Banner Buttons             */
/*----------------------------------------*/

.banner-button-list {
    position: absolute;
    list-style: none;
    display: flex;
    padding: 0;
    margin-top: -115px;
}

.banner-button-list li {
    background: #f5f5f5;
    margin-right: 20px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
.banner-button-list li a {
    padding: 6px 20px;
    display: block;
    color: #00a670;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

/*----------------------------------------*/
/*            Info Introductie            */
/*----------------------------------------*/

.info-introductie {
    margin-bottom: 80px;
}

/*----------------------------------------*/
/*             Info Diesnten              */
/*----------------------------------------*/

.info-flex {
    display: flex;
    justify-content: space-between;
}
.info-diensten {
    margin-bottom: 80px;
}
.info-diensten h3 {
    margin: 0 0 30px 0;
}
.info-diensten ul {
    list-style: none;
    padding: 0;
}
.info-diensten ul li {
    position: relative;
    width: 210px;
    padding: 20px 20px 10px 20px;
    background: #f5f5f5;
}
.info-diensten ul li::after{
    position: absolute;
    display: block;
    height: 60px;
    width: 42px;
    background-image: url("../images/GDH_icon_pijl-groot.png");
    background-repeat: no-repeat;
    background-size: cover;
    content: '';
    top: calc(50% - 30px);
    left: 97%;
    z-index: 10;
}
.info-diensten ul li:last-child::after {
    display: none;
}
.info-diensten > ul > li > img {
    display: block;
    margin: 0 auto;
    height: 65px;
    width: 65px;
    border: 1px solid #00a771;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.info-diensten li h3 {
    text-align: center;
    font-size: 1.35em;
    color: #00a771;
    font-weight: bold;
    height: 25px;
    margin-top: 5px;
}
.info-diensten li p {
    font-weight: 500;
}
.info-diensten .info-diensten-puntjes {
    display: flex;
}
.info-diensten .info-diensten-puntjes img {
    height: 10px;
    margin: 5px 5px 0 0;
}

/*----------------------------------------*/
/*            Info Werkwijzen             */
/*----------------------------------------*/

.info-werkwijze-wrapper-top {
    position: relative;
    background: #f5f5f5;
    max-height: 250px;
}
.info-werkwijze-wrapper-bottom {
    border-bottom: 1px solid #f5f5f5;
}
.info-werkwijze {
    width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}
.info-werkwijze h3 {
    padding-top: 40px;
    margin-top: 0px;
}
.info-werkwijze-greentext {
    color: #00a771;
    text-align: right;
    width: 580px;
    margin-top: 10px;
    margin-left: 240px;
    margin-bottom: 45px;
}
.info-werkwijze-wrapper-bottom {
    width: 1170px;
    margin: 0 auto 40px auto;
}
.info-werkwijze-img {
    margin-left: 130px;
}

/*----------------------------------------*/
/*             Info Archicad              */
/*----------------------------------------*/

.info-archicad {
    margin-bottom: 55px;
}
.info-archicad h3 {
    margin-top: 0;
}
.info-archicad-text {
    max-width: 700px;
    margin-left: 340px;
}

/*----------------------------------------*/
/*             Info Strategie             */
/*----------------------------------------*/

.info-strategie {
    background: #f5f5f5;
    padding: 35px 45px;
    margin-bottom: 35px;
}
.info-strategie-text {
    width: 630px;
}
.info-strategie-greentext {
    border-bottom: 1px solid #00a670;
    border-top: 1px solid #00a670;
    color: #00a670;
    margin-left: 35px;
    padding: 25px;
    text-align: center;
    font-weight: 500;
    font-size: 1.6em;
    width: 375px;
    font-style: italic;
}

.header-bar .logo-wrapper {
    margin: auto 0;
}

@media (min-width:769px) {
    .header-bar {
        display: flex;
    }
    
    .header-bar .col-md-6:not(:last-child) {
        width: 100%;
    }
}

@media (max-width: 1199px) {
    /* Diensten */
    .info-diensten {
        margin: 0 auto 80px auto;
        width: 700px;
    }
    .info-diensten ul {
        flex-wrap: wrap;
        justify-content: initial;
    }
    .info-diensten ul li {
        margin: 0 11.25px 22.5px 11.25px;
    }
    .info-diensten ul li:nth-child(3)::after {
        display: none;
    }
    /* Werkwijze */
    .info-werkwijze {
        width: 970px;
    }
    .info-werkwijze-greentext {
        margin-left: 0;
    }
    .info-werkwijze-wrapper-bottom {
        width: 970px;
    }
    .info-werkwijze h3 {
        padding-top: 20px;
    }
    .info-werkwijze-img {
        margin-left: 20px;
    }
}

@media (max-width: 991px){
    /* Werkwijze */
    .info-werkwijze {
        width: 720px;
    }
    .info-werkwijze-wrapper-top {
        max-height: 100%;
    }
    .info-werkwijze-wrapper-bottom {
        width: 720px;
    }
    /* Team */
    .info-team .row {
        display: flex;
        justify-content: space-evenly;
    }
}

@media (max-width: 768px) {
    .footer-list {
        flex-direction: column;
    }
    .footer-list__item {
        width: 100%!important;
    }
    /* banner button list */
    .banner-button-list {
        display: none;
    }
    /* Diensten */
    .info-diensten {
        width: 500px;
    }
    .info-diensten ul li::after {
        left: calc(97% + 3px);
    }
    .info-diensten ul li:nth-child(3)::after {
        display: block;
    }
    .info-diensten ul li:nth-child(even)::after {
        display: none;
    }
    .info-diensten ul {
        justify-content: space-evenly;
    }
    /* werkwijze */
    .info-werkwijze-img {
        display: none;
    }
    .info-werkwijze-wrapper-bottom,
    .info-werkwijze {
        width: auto;
    }
    .info-werkwijze {
        padding: 0 60px;
    }
    .info-werkwijze-greentext {
        width: auto;
    }
    /* archicad */
    .info-archicad-text {
        margin-left: 0;
        padding: 0 45px;
    }
    /* nav */
    .navbar-nav {
        margin: 0;
    }
    .navbar-nav .custom-dropdown > a {
        pointer-events: none;
    }
    .dropdown-menu {
        border-left: none;
    }
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
    .navbar-collapse {
        padding: 0;
    }
    .navbar-nav .custom-dropdown .dropdown-menu {
        position: initial;
        float: initial;
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
        -webkit-transition: max-height 0.5s ease-out;
        -moz-transition: max-height 0.5s ease-out;
        -ms-transition: max-height 0.5s ease-out;
        -o-transition: max-height 0.5s ease-out;
}
    .navbar-nav .custom-dropdown .toggle {
        max-height: 700px;
        transition: max-height 0.5s ease-in;
        -webkit-transition: max-height 0.5s ease-in;
        -moz-transition: max-height 0.5s ease-in;
        -ms-transition: max-height 0.5s ease-in;
        -o-transition: max-height 0.5s ease-in;
}
}

@media (max-width: 580px) {
    /* Diensten */
    .info-diensten {
        width: 300px;
    }
    .info-diensten ul li:not(:last-child)::after {
        display: block!important;
        top: 94%;
        left: calc(50% - 21px);
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
    /* Introductie */
    .info-introductie > .info-flex {
        display: block;
    }
}

@media (max-width: 425px) {
    .info-werkwijze {
        padding: 0 15px;
    }
    .info-archicad-text {
        padding: 0;
    }
    /* Team */
    .info-team .row {
        display: block;
    }
}

/* hide first list item of the project menu */
@media (min-width: 769px) {
    .hide-first-link > ul > li:first-child {
        display: none;
    }
}

.footer-list {
    display: flex;
}

.footer-list .footer-list__item:not(:last-child) {
    margin-right: 3rem;
}

.footer-list .footer-list__item.contact {
    width: 22.5%;
}

.footer-list .footer-list__item.over-ons {
    width: 32.5%;
}

.footer-list .footer-list__item.volg-ons {
    margin-top: 56px;
    width: 15%;
}

.footer-list .footer-list__item.zelfbouw-kavels {
    width: 30%;
    position: relative;
}

.footer-list .footer-list__item.zelfbouw-kavels img {
    width: 100%;
}