/*colors*/
/*Zwart #181717 / rgb(24, 23, 23)*/


body{
    margin: auto;
    font-family: 'Raleway', sans-serif;
    background-color: #181717;
}
.all-container{
    height: 100%;
    width: 100%;
    display: flex;
    background-color: #181717;
}
CSS
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],

.input{
-webkit-appearance: none;
  border-radius: 0;
}

/*--------------------Styling & Main container--------------------*/
.styling-container{
    height: 100%;
    width: 140px;
}
#styling-img{
    height: 700px;
}

.main-container{
    width: 100%;
    /* border-left: solid 3px; */
}

/*--------------------Navigatie--------------------*/
.nav-top-container{
    background-color: #181717;
    height: 70px;

}
.nav-top-container nav{
    position: fixed;
    background-color: #181717;
    width: 100%;
    opacity: 0.9;
    height: 70px;
    z-index: 1;
    /* border-bottom: solid 3px; */

}
.nav-top ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-left: 20px;
}
.nav-top li{
    margin-left: 60px;
    margin-top: 25px;
}
.nav-top a{
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-size: 14px;
}

.nav-top a:hover{
    text-decoration: underline;
}
#navActive{
    text-decoration: underline;
}
#navDLogo{
 width: 60px;
 position: fixed;
 top: 5px;
 right: 5px;
 z-index: 2;

}



/*--------------------Banner--------------------*/
.banner-top-container{
    height: 530px;

}
#banner-img{
    width: 100%;
    height: 100%;
    opacity: 0.4
}

#banner-text1{
    position: absolute;
    top: 190px;
    left: 290px;
/*    text-shadow: 2px 1px;*/
    color: white;
    font-size: 30px;
}
#banner-text2{
    position: absolute;
    top: 250px;
    left: 400px;
/*    text-shadow: 2px 1px;*/
    color: white;
    font-size: 40px;
}

#dLogo{
    position:relative;
    top: -15%;
    left: 74%;
    width: 150px
}

/*--------------------Mid--------------------*/
.mid-container{
    height: 400px;
    background-color: #333;
    padding: 40px;
}
.mid-txt{
    margin-top: 0;
    color: white;
    text-align: center;
}
#mid-link{
    text-align: center;
    margin-top: 50px;
    text-decoration: underline;
}
#mid-link a{
    color: #a6a6a6;
}
/*#mid-title{
    margin-top: 20px;
}*/
/*--------------------Slider--------------------*/
.slider{
    max-height: 700px;
    display: flex;
    transition: 0.1s ease-in-out;
    /* transition-duration: 1.5s; */
    /* padding-bottom: 60px !important; */
    position: relative;
    overflow: hidden;
}
.sliderArrowL{
    position: absolute;
    top: 250px;
    left: 30px;
}
.sliderArrowR{
    position: absolute;
    top: 250px;
    right: 30px;
}
.slider-linkerfoto{
    width: 65%;
}
.slider-rechterfoto{
    width: 35%;
}
#sliderF1, #sliderF2{
    padding: 10px;
    image-orientation: from-image;
}
.sliderHomeTxt{
    position: absolute;
    background-color: white;
    opacity: 0.8;
}
/* @media(min-width:600px){

    .subfooter-left, .subfooter-right{
        margin-top: 20px;
    }
} */
@media(max-width:1200px){
    .slider{
        max-height: 600px;
    }
}
@media(max-width:1000px){
    .slider{
        max-height: 400px;
    }
}
@media(max-width: 400px){
    .slider{
        max-height: 300px !important;
    }
}
@media(max-width:600px){
    .slider-linkerfoto{
        width: 100%;
    }
    .slider-rechterfoto{
        display: none;
    }
    #sliderF1, #sliderF2{
        padding: 0px;
    }
    .sliderArrowL{
        left: 10px;
        top: 200px;
    }
    .sliderArrowR{
        right: 40px;
        top: 200px;
    }
    .slider{
        max-height: 500px;
    }
    #span2{
        display: none;
    }
}
@media(max-width:800px){
    .sliderArrowL, .sliderArrowR{
        top: 125px;
    }
}

/* .slider-containerw{
    height: 600px;
    background-image: url(Images/slider/w1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left;
    display: flex;
    transition: 0.1s ease-in-out;
    transition-duration: 0.5s;
    padding-bottom: 60px !important;
} */

/* .slider-containerh div{
    width: 49%;
    text-align: center;
    margin: auto;
} */
/* .slider-containerw div{
    width: 49%;
    text-align: center;
    margin: auto;
} */
#sliderHText{
    padding: 0px 10px;
    font-size: 14px;
}
/* #sliderWText{
    position: absolute;
    right: 20px;
    margin: 5px;
    font-size: 14px;
    color: white;
} */
/* #slider-arrowL{
    margin-right: 80%;
}
#slider-arrowR{
    margin-left: 80%;
} */
.fa-arrow-circle-left{
    font-size: 50px;


}
.fa-arrow-circle-right{
    font-size: 50px;
}
.fas{
    color: #333;
    border: solid white 2px;
    border-radius: 50%;
}


/*--------------------Subfooter--------------------*/
.subfooter-container{
    height: 100px;
    background-color: #333;
    display: flex;
    padding: 40px;
    text-align: center;
    color: white;
}
.subfooterBorder{
    border-top: solid 2px #181717;
}
.subfooter-left{
    width: 49%;
}
.subfooter-right{
    width: 49%;
}
.subfooter-right a{
    color: white;
}

/*--------------------footer--------------------*/
.footer-container{
    background-color: #181717;
    height: 50px;
    color: white;
    text-align: center;
    padding: 10px;
}
/*--------------------Banner--------------------*/
.banner-text{
    position: relative;
    top: 0px;
}

/*--------------------GALERIJ--------------------*/

.galerij-container-1{
    height: 100%;
    background-color: #333;
}

/*--------------------WERKWIJZE--------------------*/
/*--------------------Top--------------------*/
.werkwijze-top-container{
    height: 300px;
    background-color: #333;
    /* display: flex; */
    text-align: center;
}
/* .werkwijze-top-left{
    width: 39%;
    padding: 60px 0px 0px 60px;
}
.werkwijze-top-right{
    width: 69%;
    padding: 40px;
} */
#dimphyImg{
    height: 250px;
    border: solid white;
}
#dimphyImg2{
    height: 250px;
    border: solid white;
}
.werkwijze-mid-container{
    background-color: #333;
    height: 500px;
}
.werkwijze-mid-container h2{
    color: white;
    text-align: center;
    margin: 0px 0px 20px 0px;
}
.werkwijze-mid-container p{
    color: white;
    line-height: 30px;
    margin: auto;
    max-width: 75%;
    text-align: center;
}

/* #werkwijzeDLogo{
  height: 60px;
  position: absolute;
  top: 340px;
  left: 420px;
} */
/*--------------------Mid--------------------*/
/* .werkwijze-mid-container{
    height: 450px;
    background-color: #181717;
    display: flex;
    text-align: center;
}
.werkwijze-mid-left{
    width: 49%;
}
.werkwijze-mid-right{
    width: 49%;
}
#werkwijzeMidTitle{
    text-align: center;
    color: white;
}
.werkwijze-mid-container div h3{
    margin: 0px;
    color: white;
    font-size: 16px;
    line-height: 22px;
} */
/* .logos{
    height:100px;
} */
/*--------------------PROJECTEN--------------------*/
.projecten-container{
    text-align: center;
    background-color: #333;
}
.projecten-main{
    display: flex;
}
.projecten-left, .projecten-right{
    width: 49%;
}
#projectenTitle{
    color: white;
    position: absolute;
    top: 200px;
    left: 16%;
    font-size: 50px;
}
.projecten-container h3{
    color: white;
}
#projectenBanner{
    height: auto;
    width: 100%;
    opacity: 0.4;
    max-height: 600px;
}



/*--------------------CONTACT--------------------*/
/*--------------------Top--------------------*/
.contact-top-container{
    height: 700px;
    background-color: #181717;
    display: flex;
}
.contact-top-left{
    width: 49%;
    color: white;
    padding-left: 60px;
    padding-top: 50px;
}
.contact-top-right{
    width: 49%;
    padding: 40px;
}
#contactMaps{
margin-top: 10%;
}
#formButton{
    width: 210px;
    background-color: #333;
    color: white;
    padding: 20px;
    margin-top: 20px;
    text-transform: uppercase;
    border: solid white 1px;
}
#formButton:hover{
    text-decoration: underline;
}
.formInput{
    height: 25px;
    width: 200px;
    margin-bottom: 15px;
}
input:focus, textarea:focus, select:focus{
        outline: none;
    }

#inputVraag{
    width: 400px;
    height: 60px;
}

/*--------------------Mobile--------------------*/
.mobileNav{
    display: none;
    background-color: #181717;
    height: 240px;
}
#hamburger{
    position: fixed;
    color: white;
    z-index: 2;
    font-size: 40px;
    padding: 12px;
    display: none;
}
.nav-mobile{
    list-style-type: none;
}
.nav-mobile li{
    margin-top: 20px;
}
.nav-mobile ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;

}

.nav-mobile a{
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
}
.mid-container-mobile{
    background-color: #181717;
    padding: 40px;
    height: 650px;
    margin-top: 30px;
}

/*--------------------Media--------------------*/
@media (max-width: 1100px){
    .contact-top-right{
        display: none;
    }
    .werkwijze-top-right p{
        line-height: 20px;
    }
}
@media (max-width: 1000px){
    
    .styling-container{
        display: none;
    }
    .werkwijze-mid-container{
        height: 900px;
    }
    /* .werkwijze-top-left{
        display: none;
    }
    .werkwijze-top-right{
        width: 100%;
        text-align: center;
    } */
    /* .slider-containerw{
        height: 400px;
    } */
    .slider-containerh{
        height: 400px;
    }
    #banner-text1{
        left: 130px;
    }
    #banner-text2{
        left: 340px;
    }
}
@media (max-width: 800px){
    #banner-text1{
        left: 80px;
    }
    #banner-text2{
        left: 150px;
    }
    .nav-top li{
        margin-left: 40px;
    }
}
@media (max-width: 700px){
.logos{
    height: 60px;
    margin: 3px;
}
}
@media (max-width: 600px){
    /* #projectenBanner{
        display: none;
    } */
    #projectenTitle{
        position: unset;
        margin: 0px;
        padding: 25px;
        font-size: 40px;
    }
    .banner-top-container{
        display: none;
    }
    .nav-top ul{
        display: none;
    }
    /* .nav-top-container{
        border-bottom: solid 3px;
    } */
    #hamburger{
        display: block;
    }
    #slider-arrowR{
        margin-left: 75%;
    }

	.subfooter-container{
		height:60px;
		font-size:14px;
	}
    .mid-container{
        display: none;
    }
    #dimphyImg2{
        display: none;
    }
    .projecten-container h3{
        font-size: 14px;
    }
}
@media (min-width: 600px){
    .mobileNav{
        display: none !important;
    }
    .mid-container-mobile{
      display: none !important;
    }
    

}
@media (max-width: 500px){
    .werkwijze-mid-container{
        height: 1400px;
    }
    #inputVraag{
        width: 200px;
    }
	/* .werkwijze-top-right p{
		font-size:13px;
    } */
    #slider-arrowL{
        margin-right: 60%;
    }
}
@media (max-width: 400px){
    #slider-arrowR{
        margin-left: 65%;
    }
    #slider-arrowL{
        margin-right: 55%;
    }
    /* .werkwijze-top-right p{
        line-height: 25px;
    } */
    #dimphyImg{
        width: 98%;
    }
}