/*css van de body en html, voor onderandere de width en height van de pagina*/
body, html {font-family: 'Open Sans', sans-serif;text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;color: #666;width: 100% !important;height: 1651px;}
.nav-item:nth-of-type(1) a{color: #6aaf08!important;}

/* media querys voor mobiele optimalisatie */
@media only screen and (max-width: 430px) {
    #nav-logo{top: 1.5%;}
    body, html {width: 100%!important;max-width: 430px!important;height: 2500px;}  #header{width: 100%!important;position: fixed!important;}
    .mobile-header{transition: 1s;background-color: rgb(66, 66, 66)!important;height: 80px !important;z-index: 100;top: 0!important;margin-top: 0!important;margin-left: 0!important;left: 0!important;}  #sticky{width: 100%!important;}
    .omhoog{display: none!important;position: absolute!important;}
    .i {display: none!important;}
    .fotos-about{width: 80%!important;height: 700px!important;left: 10%!important;top: 1500px!important;}
    .knop{top: 70% !important; margin-left: -9.6% !important}
    .knop button{width: 100%!important;height: 63%!important;}
    .foto1{float: initial!important;margin-left: 10%!important;}
    .foto2{top: 300px!important;margin-top: 140px;float: initial!important;margin-left: 10%!important;}
    .footer{top: 1600px!important;width: 100%!important;}
    .tekst{position: absolute!important;width: 90%!important;left: 5%!important;margin-left: 0!important;height: 400px;}
    .tekst h1{text-align: center; width: 100%; font-size: 50px!important;left: 0!important;margin-left: 0!important;}
    .tekstje{width: 95%!important; position: absolute!important;left: 2.5%!important;margin-left: 0!important;top: 55%!important;}
    .tekst-bij-foto1{margin-left: 13.2% !important}
    .tekst-bij-foto2{margin-left: 13.2% !important}
    .about-info{width: 90%!important;height: 500px;top: 130%!important;left: 5%!important;text-align: center}
    .services{top: 167.5% !important;}
    .tekst-bij-fotos{left: 10%!important; width: 250px!important;top: 215%!important;text-align: center;}
    .verhaal-bij-fotos{left: 10%!important; width: 250px!important;top: 220% !important;text-align: center;}
    .verhaal-bij-foto1{position: absolute!important;left: 13.2% !important;}
    .tekst-bij-foto2{position: absolute!important;top: 390px!important;left: 0;}
    .verhaal-bij-foto2{position: absolute!important;top: 397px!important;left: 13.2% !important;}
    .streep{top: 120%!important;left: 50%!important;margin-left: -35px!important;}
    .about-tekst{width: 90%!important;height: 130px!important;left: 5%!important;}
    .links{width: 80%!important;text-align: center!important;margin-left: 10%}
    .rechts{margin-top: 3%!important;width: 80%!important;margin-left: 10%;text-align: center!important;}
    .sidenav {display: block!important;height: 100%;width: 0;position: fixed;top: 80px!important;right: 0;background-color: rgba(17, 17, 17, 0.71);overflow-x: hidden;transition: 0.5s;padding-top: 60px;z-index: 10000;}
    .sidenav a{color: #6aaf08!important;
        margin-left: 33% !important; text-align: center;}  .sidenav .closebtn {display: block!important;position: absolute;top: -20px!important;left: -30%;font-size: 60px;margin-left: 50px;z-index: 10000;}
    .sidenav a:nth-of-type(3){position: absolute;margin-top: 20px!important;}.sidenav a:nth-of-type(2){position: absolute;margin-top: 10px!important;}.sidenav a:nth-of-type(4){position: absolute;margin-top: 30px!important;}.sidenav a:nth-of-type(5){position: absolute;margin-top: 40px!important;}.sidenav a:nth-of-type(6){position: absolute;margin-top:50px!important;}
    #main {position: absolute;display: block!important;transition: margin-left .5s;width: 80px;height: 80px;top: 0;margin-top: 0;margin-right: 0;right: 0;background: #6aaf08!important;}#main i{border: none;font-size: 30px;margin-left: 10px;}
    .kleur{color: rgb(0, 0, 0);}#nav-menu {display: none;width: 1px!important;right: 0!important;margin-right: 0!important;}#main1{display: block!important;}
}

@media only screen and (max-width: 1685px) and (min-width: 1235px){
    body{height: 2000px!important;}
    .footer{top: 1101px!important;}
    .fotos-about{top: 170%!important;left: 50% !important;margin-left: -267.5px;}
    .tekst-bij-fotos{top: 199.7% !important;left: 50% !important;margin-left: -267.5px;}
    .verhaal-bij-fotos{top: 206.7% !important;left: 50%!important;margin-left: -267.5px;}
    .about-tekst{margin-left: -250px!important;left: 50% !important;}
    .streep{left: 50% !important;margin-left: -35px!important;}
    .about-info{margin-left: -265px!important;left: 50% !important;}
    .services{left: 50% !important;margin-left: -104.95px!important;}
    .up{display: none}
    .omhoog{display: none!important;}
}
@media only screen and (min-width: 1686px) {.omhoog{display: block;}body, html {width: 100% !important;}}

@media only screen and (max-width: 1234px) and (min-width: 430px) {.up{display: none}.omhoog{display: none!important;}body, html {width: 100% !important;}.sidenav {display: block!important;height: 100%;width: 0;position: fixed;top: 80px!important;right: 0;background-color: rgba(17, 17, 17, 0.71);overflow-x: hidden;transition: 0.5s;padding-top: 60px;z-index: 10000;}
    .sidenav a{color: #6aaf08!important;margin-left: 33% !important;text-align: center;}  .sidenav .closebtn {display: block!important;position: absolute;top: -20px!important;left: -30%;font-size: 60px;margin-left: 50px;z-index: 10000;}
    #main {position: absolute;display: block!important;transition: margin-left .5s;width: 80px;height: 80px;top: 0;margin-top: 0;margin-right: 0;right: 0;background: #6aaf08!important;}#main i{border: none;font-size: 30px;margin-left: 10px}
    .kleur{color: rgb(0, 0, 0);}#nav-menu {display: none;width: 1px!important;left: 0!important;margin-left: 0!important;}#main1{display: block!important;}
    .tekst{height: 180px!important;width: 766px!important;margin-left: -383px!important;}
    .tekst h1{}
    body{height: 2000px!important;}
    .footer{top: 1101px!important;}
    .fotos-about{top: 170%!important;left: 50% !important;margin-left: -267.5px;}
    .tekst-bij-fotos{top: 199.7% !important;left: 50% !important;margin-left: -267.5px;}
    .verhaal-bij-fotos{top: 206.7% !important;left: 50%!important;margin-left: -267.5px;}
    .about-tekst{margin-left: -250px!important;left: 50% !important;}
    .streep{left: 50% !important;margin-left: -35px!important;}
    .about-info{margin-left: -265px!important;left: 50% !important;}
    .services{left: 50% !important;margin-left: -104.95px!important;}
    .up{display: none}
    .omhoog{display: none!important;}
    .sidenav a:nth-of-type(3){position: absolute;margin-top: 20px!important;}.sidenav a:nth-of-type(2){position: absolute;margin-top: 10px!important;}.sidenav a:nth-of-type(4){position: absolute;margin-top: 30px!important;}.sidenav a:nth-of-type(5){position: absolute;margin-top: 40px!important;}.sidenav a:nth-of-type(6){position: absolute;margin-top:50px!important;}

}
@media only screen and (max-width: 768px) and (min-width: 430px){
    .tekst{width: 80% !important;margin-left: 0!important;left: 10% !important; top: 25% !important;}

}

/*de relative voor alle objecten die hier inzitten met position absolute*/
.relative {position: relative;}

/*sticky om de header en andere object om alles op zijn plaats te houden*/
#sticky {position: relative;top: 0;width: 100%;z-index: 0;}

/*de header*/
#header {position: fixed;text-decoration: none;width: 100%;height: 91px;z-index: 100;}

/*de footer*/
.footer {position: relative;top: 752px;width: 100%;height: 181px;background-color: rgb(66, 66, 66)!important;}

/*credits in de footer*/
.credits {position: absolute;top: 80%;left: 50%;width: 300px;margin-left: -150px;text-align: center;}
.credits h1 {color: #898989;font-size: 14px;text-align: center;}
.credits h1 a {color: #b4b4b4;}

/*padding op de hele header met scrollen*/
.scrollheader {transition: 1s;background-color: rgb(66, 66, 66)!important;height: 80px !important;z-index: 100;}
.nav-normaal {transition: 1s;background-color: transparent!important;height: 91px !important;z-index: 100}

/*padding op header tekst met scrollen*/
.nav-omhoog {transition: 1s;padding-top: 1%!important;}
.nav-omlaag {transition: 1s;padding-top: 2.5%!important;}

/*achtergrond en filter over achtergrond onder de header op home pagina*/
.background {width: 100%;height: 800px;}
.background-kleur {position: absolute;top: 0;width: 100%;height: 800px;background-color: rgba(0, 0, 0, 0.3);}

/*css van de tekst die groot en zichtbaar direct op de homepagina te zien is*/
.tekst {position: absolute;width: 800px;left: 50%;margin-left: -400px;top: 33%;text-align: center;color: white;z-index: 10;}
.tekst h1 {font-size: 67px;}
.tekstje {position: absolute;width: 640px;left: 50%;margin-left: -320px;top: 45%;color: white;z-index: 10;}
.tekstje h1 {font-size: 24px;word-break: normal;width: 100%;text-align: center;}

/*alles voor de knop om naar beneden te scrollen naar de about pagina(tekst aanpasbaar in plate)*/
.knop {position: absolute;left: 50%;margin-left: -5%;top: 58%;width: 20%;height: 10%;z-index: 10;min-width: 20%;min-height: 10%;}
.knop button {width: 40%;height: 57%;border-radius: 8px;background-color: #6aaf08;color: white;border: none}

.knop button:hover {transition: 0.3s;background-color: #589e08;}
.knop button:focus {outline:none!important;box-shadow: none!important;}

/*alles voor de opmaak van de header, zie #header voor de parent div*/
#nav-logo {position: fixed;left: 15.3%;padding-top: 1.1%;font-size: 23px;font-weight: 600;color: #eee;z-index: 1;}
#nav-menu {position: fixed;left: 45%;}
#nav-tekst {list-style-type: none;margin: 0;padding-top: 2.5%;overflow: hidden;}
#nav-tekst li {float: left;}
#nav-tekst li a {text-decoration: none;font-size: 16px;color: #eee;display: block;padding: 24px;}
#nav-tekst li a:hover {transition: 0.1s;color: #6aaf08;}

/* alles voor de tekst in het about gedeelte*/
.streep{position: absolute;top: 120%;background: #6aaf08;width: 70px;height: 3px;left: 21%;}
.about-info {position: absolute;width: 530px;height: 250px;left: 20.9%;top: 125%;}
.about-info h6 {line-height: 24px;font-size: 15px;}

/*alles voor de services knop bij de about pagina*/
.services {position: absolute;top: 151%;left: 20.9%;}
.services-knop {border-radius: 8px;background-color: #6aaf08;color: white;border: none;width: 209.9px;height: 52px;outline: none;}
.services-knop:hover {transition: 0.3s;background-color: #589e08;}
.services button:focus {outline:none!important;box-shadow: none!important;}

/* fotos in het midden van de home page, ookwel de about page*/
.fotos-about {position: absolute;top: 112%;left: 55%;width: 535px;height: 250px;}
.foto1 {width: 250px;height: 250px;float: left;background-repeat: no-repeat;}
.foto2 {width: 250px;height: 250px;float: right;background-repeat: no-repeat;}

/* tekst onder de fotos bij about gedeelte(aanpasbaar in plate)*/
.tekst-bij-fotos {position: absolute;top: 141.70%;left: 55%;width: 535px;height: 40px;}
.tekst-bij-foto1 {width: 250px;height: 40px;float: left;}
.tekst-bij-foto1 h1{font-size: 23px!important;color: #000000;}
.tekst-bij-foto2 {width: 250px;height: 40px;float: right;}
.tekst-bij-foto2 h1{font-size: 23px!important;color: #000000;}

/* verhaal gedeelte van de about page(onder do fotos, en aanpasbaar in plate)*/
.verhaal-bij-fotos{position: absolute;top: 148.70%;left: 55%; width: 535px;height: 35px;}
.verhaal-bij-foto1{width: 250px;height: 35px;float: left;}
.verhaal-bij-foto1 h1{font-size: 15px!important;color: #575757;}
.verhaal-bij-foto2{width: 250px;height: 35px;float: right;}
.verhaal-bij-foto2 h1{font-size: 15px!important;color: #575757;}

/* knop om in 1x omhoog te scrollen, staat in de footer*/
.omhoog {display: block;position: relative;height: 80px;width: 80px;border: none;border-radius: 100%;top: 60px;left: 92%;}
.omhoog:hover {background-color: rgb(185, 185, 185);}
.omhoog:focus{outline: none!important;}
i {margin-top: 12px;border: solid #575757;border-width: 0 4px 4px 0;display: inline-block;padding: 8px;}
.up {transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}

/* social media links in footer, links aanpasbaar in plate*/
.fa {padding-top: 13px;font-size: 30px;width: 50px;height: 50px;text-align: center;text-decoration: none;margin: 5px 2px;}
.fa:hover {opacity: 0.7;outline: none;text-decoration: none;background: #7bc008;color: #ffffff;transition: 0.7s;}
.fa:focus{outline: none;}
.fa-facebook {background: #555555;border-radius: 100%;width: 40px;height: 40px;color: #6aaf08;font-family: 'Font Awsome 5 Free';}
.fa-twitter {background: #555555;border-radius: 100%;width: 40px;height: 40px;color: #6aaf08;}
.fa-google {background: #555555;border-radius: 100%;width: 40px;height: 40px;color: #6aaf08;}
.social-media {position: absolute;margin-left: -130px;margin-top: 30px;left: 50%;}
.social-media a {margin: 20px;}
/* voor het mobile menu */
.main {display: none;}  .sidenav .closebtn {display: none;text-decoration: none!important;}  .sidenav {display: none;}  #header button {background: none;border: none;}  #main1{display: none;}