@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
@import "https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,600i,800";


/* ---TEXT DECORATION--- */

body {
    font-size: 16px;
    line-height: ;
    font-family: Montserrat;
    margin: 0;
    padding: 0;
   /* --- background-image: url(../images/achtergrond.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 20% ;
    min-height: 120%;--- */
      z-index: 1;
}


.achtergrond {
   
    margin: 0;
    padding: 0;
    background-image: url(../images/achtergrond.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 20% ;
    min-height: 120%;
   
}

.home {
   
    background-image: url(../images/achtergrond-home.jpg);
    background-repeat: repeat-x;
}

#klanten
{
   border: 1px solid#f00;
    margin: 100px 0px!important;
   

}

h3.klanten {
   border: 1px solid#f00;
    margin: 100px 0px!important;
   

}

h1 {
    font-size: 40px;
    font-weight: 800;
    text-transform: uppercase;
}

h2 {
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
}

h3 {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
}

h4 {
    font-size: 34px;
    font-weight: 800;
    text-transform: uppercase;
}

h5 {
    font-size: 22px;
    font-weight: 600;
}


h6 {
    font-size: 30px;
    font-weight: 600;
    margin-top: 0em;
   margin-bottom: 0em;
}

h7{
    font-size: 30px;
    font-weight: 600;
   margin-top: 5em;
   margin-bottom: 5em;
}


p {
    font-size: 18px;
    font-weight: medium;
    line-height: 30px;
    margin-bottom: 20px;
}

label {
    font-size: 18px;
    font-weight: medium;
    line-height: 30px;
}

.lead {
    margin-bottom: 0px;
}

footer a {
    text-decoration: none;
    color: white;
    
}

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

.bold {
    font-weight: 800;
}

#ref {
    color: #FD8627;
    text-decoration: underline;
}

#ref:hover {
    color: #FD8627;
    font-weight: bold;
    cursor:pointer;
}

a {
  cursor:pointer;
}

.cursor-pointer{
  cursor: pointer;
}

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}


#logo {
    padding-bottom: 8px;
}

.navbar-brand
{
    padding-bottom: 15px;
}

#contact {
    border-radius: 5px;
    background-color: #FD8627;
    padding-left: 1.5em;
    padding-right: 1.5em;
}


/* ---HEADER--- */

#button {
    background-color: #FD8627;
    border: 0;
    font-weight: 600;
}

/* main */
.container {
    margin: auto;
    
}

nav ul,
form ul,
footer ul,
.unlist {
    list-style: none;
}

.listed {
    list-style: square;
    font-weight: 400;
    margin-left: none;
    margin-top: 25px;
}

.listed li {
    font-size: 18px;
    font-weight: medium;
    line-height:
}

.grid {
    background: white;
    border: 1px solid #D3CBC6;
    text-align: center;
    border-radius: 8px;
    text-transform: uppercase;
    padding: 30px;
    margin: 0px 0px 30px 0px;
}

.grid2 {
    background: white;
    border: 1px solid #D3CBC6;
    text-align: center;
    border-radius: 8px;
    text-transform: uppercase;
    padding: 30px 30px;
    margin: 0px 0px 30px 0px;
}

.grid3 {
    background: white;
    border: 1px solid #D3CBC6;
    text-align: center;
    border-radius: 8px;
    text-transform: uppercase;
    padding: 43px 30px;
    margin: 0px 0px 30px 0px;
}


.col-lg-4.col-sm-6.container.img-thumbnail.row-eq-height
{
    border: 0px;
}

/* ---FOOTER--- */




#CallToAction {
    background: white;
    text-align: center;
    display: block !important;
    border: 1px solid grey;
    border-radius: 8px;
    padding: 1em;
    padding-top: 2em;
    margin: 0 5px;

}

footer {
    background: #343A40;
    background-image: url(../images/footer.png);
    background-repeat: no-repeat;
    background-position: top right;
    color: white;
    font-size: 15px;
    text-align: left;
    min-height: 200px;
    margin-bottom: -1.5em;
    padding-top: 1.2em;
    padding-bottom: 0.3em;
}


.copy {
    margin-top: 1em;
    font-size: .9em;
    text-align: center;
}



#bck2 {
    margin-bottom: 120px;
}

.dot {
    height: 10px;
    width: 10px;
    background-color: grey;
    border-radius: 50%;
    display: inline-block;
}

.clients {
    text-align: left;
}


/* ---WELKOM--- */



.HeaderWelkom {
    margin-top: 280px;
    margin-bottom: 70px; 
}

.HeaderWelkom h1 {
   font-size: 48px; 
     margin-bottom; 40px;
}

.HeaderWelkom h6 {
   font-size: 37px; 
   padding-top: 10px;
}

/* ---WIE--- */

.orange {
    color: #FD8627;
}

#wie {
    margin-bottom: 12em;
}

#kris {
    margin-bottom: 1em;
}

#KrisText {
    max-width: 350px;
}

.HeaderWie {
    margin-top: 120px;
    margin-bottom: 100px;
}


.img-fluid
{
   width: 80%;
}

/* Navbar*/

.navbar
{
    position: fixed;
    width: 100%;
    z-index: 1000;
}

nav ul li a {
    font-weight: 600;
    margin-right: 25px;
    text-transform: uppercase;
    cursor: pointer!important; 
}


.navbar-nav li
{
    
    font-weight: 600;
    font-size: 15px;
    margin-left: 0px 0px 0px 15px;
}


li.notactive
{
margin-left: 2px;
    font-weight: 600;
    font-size: 15px;
}

li#active
{
margin-left: 2px;
    font-weight: 600;
    font-size: 15px;
}


li#active a
{
color:#fB8627;
padding: 20px 10px;
}

li#contactbutton a
{
background-color:#fB8627;
color: white;
padding: 10px 12px;
border-radius: 8px;  
}

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

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


li.notactive a
{
    color:white;
  padding: 20px 10px;
}

li.notactive a:hover
{
    color: #d1d0cf;
    text-decoration: none;
    cursor: pointer;
}



/* ---WAAROM---*/



.card .card-header {
    background-color: white;
    
}

.card .card-header button {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 28px;
    color: black;
    width: 100%;
    text-align: left;
}


i {
   
    margin-top: 5px;
}

.card-header .fa {
  transition: .3s transform ease-in-out;
}
.card-header .collapsed .fa {
  transform: rotate(90deg);
}


.card-body {
    padding-left: 35px;
    padding-right: 35px;
}


.HeaderWaarom {
    margin-top: 120px;
    margin-bottom: 80px;
}

#QuoteName {
    font-weight: 600;
    font-style: italic;
}




/* ---HOE---*/

.HeaderHoe {
    margin-top: 120px;
   
}

/* ---DIENSTEN--- */
    
.HeaderDiensten {
    margin-top: 120px;
    margin-bottom: 115px;
}



/* ---PORTOFOLIO--- */

.HeaderPortofolio {
    margin-top: 120px;
    margin-bottom: 90px;
}


#picture:hover {
    opacity: 1;
}


.gallery-container

 {margin: 0px;
   padding:0px;
}
/* ---CONTACT--- */

.HeaderContact {
    margin-top: 280px;
    margin-bottom: 120px;
    
}
.offerte {
    margin-top: 120px!important;
    margin-bottom: 10px!important;
}


p.knopcontact a
{
   padding: 15px;
    background-color: #FD8627;
    font-weight: 600;
  color: #fff;
    border-radius: 10px;
}

p.knopcontact a:hover
{
   text-decoration: none;

}

.asteriskField{color: red;}

.input-group
{
    margin-bottom: 15px;
    
}

form
{
  margin-bottom: 40px;
}



input {
  width: 100%;
     padding: 12px 20px;
       border: 1px solid grey;
    border-radius: 4px;
}

textarea {
  border: 1px solid grey;
  width: 100%;
     padding: 12px 20px;
    border-radius: 4px;
    height: 180px;
}


input[type=button], input[type=submit], input[type=reset] {
  background-color: #FB8627;
  border: none;
    width: 300px;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 16px 2px;
  cursor: pointer;
    font-weight: bold;
}


p.lead a
{
   color: black;
}


/* Media Query */

@media screen and (max-width: 320px) {
    
    /* ---WAAROM--- */
    
    p {
        font-size; 11px;
    text-align: left:
}
    
    .card .card-header button {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 18px;
    color: black;
}
    
   .HeaderHoe {
    margin-top: 80px;
} 
    
    
     .img-fluid
{
   width: 100%;
}
    
   #wieMain.row {
    text-align: left!important:
        border: 1px solid#ff0;
}
    
    
.HeaderWelkom {
    margin-top: 100px!important;
    margin-bottom: 40px!important; 
}
    
    
    .HeaderContact {
    margin-top: 100px!important;
    margin-bottom: -40px; 
}
  

.HeaderWelkom h1 {
   font-size: 34px!important; 
}

.HeaderWelkom h6 {
   font-size: 20px!important; 
    margin-top: 20px;
}
    
      .achtergrond {
   
    margin: 0;
    padding: 0;
    background-image: url(../images/achtergrond.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 35% ;
    min-height: 120%;
   
}  
    
    
}
   

@media screen and (min-width: 570px) and (max-width: 780px) {


.grid2 {
   
    padding: 43px 30px!important;
   
} 

    }
@media screen and (max-width: 420px) {
    
    .grid2 {
   
    padding: 43px 30px!important;
   
} 
  
    /* ---
    body {
    
    background-image: url(../images/achtergrond.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 35% ;
    min-height: 120%;
}
    --- */
    
    
    .achtergrond {
   
    margin: 0;
    padding: 0;
    background-image: url(../images/achtergrond.png);
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 35% ;
    min-height: 120%;
   
}
    
    .mainfooter {
        text-align: center;
        min-height: px;
        margin-bottom: -1.5em;
    }
    

 
    /*
    .responsive {
        font-size: 140%;
    }
*/
    
  .img-fluid
{
   width: 100%;
}

    .copy {
        margin-bottom: 0;
        padding-bottom: 20px;
    }
    
    h1 {
        font-size: 32px;
        font-weight: 800;
        text-transform: uppercase;
    }

    h3 {
        font-size: 20px;
        font-weight: 800;
        text-transform: uppercase;
    }
    
    h4 {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
}
    
        h6 {
    font-size:22px;
  
    
}
    
    #contact {
    border-radius: 5px;
    background-color: #FD8627;
    padding-right: 5px;
    width: 25%;
    padding-left: 5px;
}
    
    
    /* ---WIE--- */
    
    
    
    #kris {
        margin-bottom: 2em;
    }
    
    .Header {
        margin-top: 1em;
        margin-bottom: 2.5em;
        
    }
    
    /* ---WAAROM--- */
    
.card {
    background-color: white;
    
}
    
.HeaderWaarom {
     margin-top: 100px;
}
    
    /* ---HOE--- */
    
.HeaderHoe {
    margin-top: 100px;

}

    /* ---DIENSTEN--- */ 
    
.HeaderDiensten {
    margin-top: 20px;
}
    
    
    /* ---CONTACT--- */ 
    
#Info {
    text-align: left;
}

}

@media screen and (max-width: 990px) {
  
    

.HeaderWelkom {
    margin-top: 140px;
    margin-bottom: -40px; 
}
    
    
.HeaderContact {
    margin-top: 140px;
    margin-bottom: 120px;
    
}

.HeaderWelkom h1 {
   font-size: 38px; 
}

.HeaderWelkom h6 {
   font-size: 22px; 
    margin-top: 20px;
}

    .mainfooter {
        text-align: center;
        margin-bottom: -2em;
    }

    #bck2 {
      
    }

    .copy {
        margin-bottom: 0;
        padding-bottom: 20px;
    }
    
    .nav-item {
        padding-left: 05em;
        margin-top: 1em;
    }
    
    
    .navbar-nav{

      padding-bottom: 20px;
}
 
#contactbutton a
{
  margin-bottom: 1em;

}
    
    li#contactbutton
{
  margin-top: 1.8em!important;
  margin-bottom: 1.0em!important;
}
    .navbar-nav li
{
    padding-left: 0.4em;
        margin-top: 1em;
}
    
    #contact {
    border-radius: 5px;
    background-color: #FD8627;
    padding-right: 5px;
    width: 85px;
    padding-left: 5px;
}
    
    /* wie */ 
    
   .wieHeader {
        margin-top: 3em;
        margin-bottom: 2.5em;
        font-size: 20px;
        font-weight: 800;
        text-transform: uppercase;
    }

 
}