* {
    justify-content: center;
    padding: 0;
    margin: 0;
}

body {
    background-color: #BBD6B8;
    color: #56b17a;
    height: 100%;
}

@font-face {
    font-family: 'margin' ;
    src: url(/httpdocs/font/upheavtt.ttf);
}

.text {
    font-family: 'margin', cursive;
    text-shadow: 0 2px rgba(0, 0, 0, .5);
    font-size: 60px;
    font-weight: normal;
    position: relative;
    text-align: center;
    text-decoration: none;
}

h1 {
    font-family: 'margin', cursive;
    text-shadow: 0 1px rgba(0, 0, 0, .5);
    font-size: 50px;
    font-weight: normal;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #306947;
}

h2 {
    font-family: 'margin', cursive;
    text-shadow: 0 1px rgba(0, 0, 0, .5);
    font-size: 40px;
    font-weight: normal;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

h3 {
    font-family: 'margin', cursive;
    text-shadow: 0 1px rgba(0, 0, 0, .5);
    font-size: 30px;
    font-weight: normal;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #94AF9F;
}

p {
    font-family: 'margin', cursive;
    text-shadow: 0 1px rgba(0, 0, 0, .5);
    font-size: 40px;
    font-weight: normal;
    position: relative;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

span {
    border-right: .05m solid;
    animation: caret 1s steps(1) infinite;
}

i {
    align-items: center;
    padding: 15px;
    text-shadow: 0 1px rgba(0, 0, 0, .5);
}

a {
    text-decoration: none;
    color: #56b17a;
}

img {
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border:4px solid #56b17a;
    border-radius: 20px;
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}

.outer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr) 15fr repeat(2, 1fr);
    grid-template-rows: repeat(3, 500px) 400px 100px repeat(2, 500px) 900px 100px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    }
    
    .index { 
        grid-area: 1 / 2 / 3 / 5; 
        padding: 70px 0;
    }

    .wbi { 
        grid-area: 3 / 3 / 5 / 4;
    }

    .cv { 
        grid-area: 5 / 3 / 6 / 4;  
    }

    .prjct1 { 
        grid-area: 6 / 1 / 7 / 6;  
    }

    .prjct2 { 
        grid-area: 7 / 1 / 8 / 6;  
    }

    .contact { 
        grid-area: 8 / 3 / 9 / 4;  
    }

    .button { 
        grid-area: 9 / 1 / 10 / 6; 
    }

.inner-grid-wbi {
    display: grid;
    grid-template-columns: repeat(5, 20%);
    grid-template-rows: repeat(5, 20%);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

    .bijschrift { 
        grid-area: 2 / 4 / 5 / 6; 
        padding: 15px;
    }

    .koptekst { 
        grid-area: 1 / 2 / 2 / 5; 
    }

.inner-grid-cv {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    grid-template-rows: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

    .cvknop { 
        grid-area: 1 / 2 / 2 / 3;
    }

    .foto { 
        grid-area: 2 / 1 / 5 / 4;    
    }


    .ikfoto {
        max-width: 500px;
        height: auto;
    }

.inner-grid-project {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-top: 200px;
}
                
    .prjfoto { 
        grid-area: 1 / 1 / 2 / 2; 
        margin-top: 25px;
        margin-left: 25px;
        padding: 20px;
    }

     .prjtekst { 
        grid-area: 1 / 2 / 2 / 3;
        margin-top: 25px;
    }

.inner-grid-project2 {
    display: grid;
    grid-template-columns: 35% 65%;
    grid-template-rows: 100%;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.inner-grid-onder {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: repeat(2, 20%) 15% 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-top: 150px;
}
                        
    .contacttop { 
        grid-area: 2 / 1 / 2 / 2; 
        font-size: 25px;
     }

    .kleinkopje { 
        grid-area: 3 / 1 / 3 / 2; 
    }

    .button     { 
        grid-area: 4 / 1 / 4 / 2; 
        max-width: 250px;
        height: auto;
        object-fit: cover;
         margin-left: 40%;
    }
                    
    .icons      { 
        grid-area: 6 / 1 / 5 / 2; 
        text-align: center;
        margin: 25px;
        color: #56b17a;
    }

/* mogelijk tijdelijk */

.slideshow-container {
    position: relative;
}

.wbiSlides {
    display: none;
    padding: 40px;
    text-align: center;
    height: 500px;
    width: 500px;
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px;
    padding: auto;
    color: #285239;
    background-color: #3a785294;
    font-weight:bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    position: absolute;
    right: 0;
    left: 550px;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: #285239;
    color: #80d1a1;
}

.dot-container {
    text-align: center;
    padding: 20px;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color:#AEC2B6;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #562B08;
}

/* nieuwe download button */
.whitebutton {
    margin: 20px auto;
    padding: 20px 0;
    width: 200px;
    border-radius: 0 0 5px 5px;
}

.whitebutton a {
    background: #56b17a;
    color: #285239;
    display: block;
    font-size: 22px;
    font-weight: 550;
    font-family: 'margin',Verdana,sans-serif;
    height: 50px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;
}

.whitebutton a:before {
    content: '\f019';
    font-family: FontAwesome;
    font-weight: normal;
    padding: 5px;
    margin-left: -12px;
    margin-right: 6px;
}

.whitebutton span {
    background: #100;
    color: #306947;
    display: block;
    font-size: 15px;
    font-family: 'margin', Verdana,sans-serif;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 200px;
    z-index: 1;
    text-transform: uppercase;
}

.whitebutton .up {
    background: #56b17a;
    margin: -25px auto;
    opacity: 0;
    border-radius: 0 0 5px 5px;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down {
    margin: -30px auto;
    opacity: 0;
    border-radius: 5px 5px 0 0;
    transform: translate(0,-50px);
    transition: 350ms;
}

.whitebutton .down:before {
    content:'\f14a';
    font-family: FontAwesome;
    font-weight: normal;
    margin-right: 6px;
    color: #aaa;
}

.whitebutton:hover .up {
    opacity: 1;
    transform: translate(0,0);
}

.whitebutton:hover .down {
    opacity: 1;
    transform: translate(0,-90px);
}

.slide-in {
    position: relative;
    left: -100%;
    transition: left 1s;
    background-color:#BBD6B8;
  }
  
  .slide-in.active {
    left: 0;
  }