@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;600&display=swap');
@import url('https://kit-pro.fontawesome.com/releases/v5.12.1/css/pro.min.css');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif !important;
    overflow-x: hidden;
}

/* HEADER  */
header {
    position: relative;
    height: 100vh;
    width: 100%;            
}

header section {
    position: absolute;
    width: calc(100vw - 0.9%);
    height: 100vh;
}

header section .container {
    position: relative;
    height: 100vh;
}

header .logo {
    position: absolute;
    right: 15px;
    top: 10rem;
    z-index: 5;
}

header .logo img {
    width: 250px;
}

header .content {
    position: absolute;
    transform: translate(0, -50%); 
    top: 50%;
    left: auto;
    /*width: 500px; */
    color: #707070;
    z-index: 5;
}

header canvas {
    position: absolute;
    /* z-index: 1; */
}

header a {
    color: #008f39 !important;
}

header h1 {
    font-weight: 600;
    font-size: 2.5rem;
    text-decoration: underline;
    display:block;
    word-wrap:break-word;
}

header h3 {
    font-weight: 400;
    font-size: 1.5rem;
    width: 500px;
    padding: 1.25rem 0;
    line-height: 2.5rem;
}

header span {
    position: absolute;
    bottom: 20px;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 5;
    animation-name: arrowdown;
    animation-timing-function: ease;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

header span a {
    color: #707070 !important;
}

header span a:hover {
    color: #008f39 !important;
    text-decoration: none;
}

header span a.fas.fa-chevron-down{
    font-size: 2.5rem;
}

@keyframes arrowdown {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-25px); }
    100% { transform: translateY(0); }
}

/* MAIN */
main {
    position: relative;
    background-color: #00030B;
    color: white;
    height: 340px; 
}

main .herocontent {
    position: absolute;
    transform: translate(0%, -50%);
    top: 50%;
    /* width: 35%; */
    /* max-width: 700px; */

    width: 40%;
    max-width: 800px;
}

main .herobg {
    position: absolute;
    top: 0;
    right: 0;
    height: 340px;
    /* width: calc(100% - 60vw); */
    width: calc(100% - 65vw);
    background-image: url(../img/aandeslag.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

main h3 {
    /* font-size: 1.5625rem; */
    font-size: 1.3125rem;
    font-weight: 600;
}

main p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 2rem;
    padding: 1rem 0;
}
main .btn {
    padding: 15px 30px;
}

/* FOOTER */
footer .contact {
    position: relative;            
    padding: 50px 0 80px;
}

footer .contact .social {
    position: absolute;
}

footer .contact .infomation {
    position: absolute;
    right: 0;
    padding: 5px 0;
}

footer a {
    color: #008f39 !important;
}

footer .contact span {
    font-size: 2rem;
    padding: 0 0.25rem;
	color: #008f39;
}




/* RESPONSIVE */
/* Custom */
@media (max-width: 1600px) and (min-width: 1030px) {
    main .herocontent {
        width: 50%;
    }
}

/* Monitor */
@media screen and (max-width: 1024px) {
    header .logo img {
        width: 200px;
    }

    main .herocontent {
        /* width: 50%; */
        width: 55%;
    }

    main p {
        padding: 0.5rem 0;
    }
}

/* Monitor */
@media screen and (max-width: 992px) {
    main h3 {
        font-size: 1.3125rem
    }
    header .logo {
        text-align: center;
        width: 100%;
        right: 0px;
    }

    main .herocontent  {
        width: initial;
        position: initial;
        transform: initial;
        top: initial;
        padding: 4rem 0;
    }

    main {
        height: initial;
    }

    main .herobg {
        position: initial;
        top: initial;
        right: initial;
        height: 340px;
        width: 100%;
    }

    footer .contact {
        padding: 50px 0 50px;
        text-align: center;
    }

    footer .contact .social {
        position: initial;
    }

    footer .contact .infomation {
        position: initial;
        right: initial;
        padding: 20px 0;
    }
}

/* iPAD */
@media screen and (max-width: 767px) {
    header .content {
        text-align: center;
        transform: translate(-50%, -50%);
        left: 50%;
        width: 80%;
    }

    main .herocontent {
        text-align: center;
    }
}

/* iPXr */
@media screen and (max-width: 420px) {
    header h1 {
        font-size: 1.3125rem;
    }

    header h3 {
        font-size: 1rem;
        line-height: 2rem;
    }

    header .logo {
        top: 5rem;
    }

    header .logo img {
        width: 150px;
    }
    .content h3{
        width: 100%;
    }

    main .herobg {
        height: 0px;
    }
} 

/* iP5 or lower */
@media screen and (max-width: 350px) {
    header span {
        left: 45%;
    }
}