body, html {
  	height: 100%;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
    text-decoration: none;
    box-sizing: border-box;
}

.main-menu {
    display: block;
    position: relative;
    background: #fff;
}

.container-menu {
    width: 100%;
    margin: 0 auto;
}

.main-menu:before,.main-menu:after{
    display: table;
    line-height: 0;
    content: "";
}


.core-menu {
    text-align: right;
    font: .9vw/1.2vw 'Montserrat', sans-serif;
    text-transform: uppercase; 
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    padding: 40px 20px 40px 40px;
}

.logo   {
    float: left;
    width: 25%;
    height: 80px;
    margin: 0 0 0 40px;
    display: flex;
    align-items: center;
}

.logo img   {
    width: 100%;
}

.logo a {
    line-height: 0;
}

.logoSm   {
    float: left;
    width: 90%;
    height: 80px;
    margin: 0 0 0 0;
    display: flex;
    align-items: center;
}

.logoSm img   {
    width: 100%;
}

.logo a:link, a:visited, a:hover, a:active {
    color: #000;
    text-decoration: none;
}

.core-menu li {
    list-style: none;
    display: inline-block;
    cursor: pointer;
}

.core-menu li a {
    display: inline-block;
    padding-right: 2.5vw;
    color: #000;
    letter-spacing: 2.5px;
}

.core-menu li a:hover {
   color: #959595;
    text-decoration: none;
}

li span.toggle {
    padding-left: 5px;
}

.toggle:before {
    content: "\f107";
    font: 1vw/1vw FontAwesome;
}

.dropdown {
    position: absolute;
    width: 400px;
    background: #fff;
    text-align: left;
    display: none;
    padding-bottom: 30px;
}

.dropdown li {
    display: block;
    padding: 40px 40px 10px 40px;
}

.dropdown li a:link, a:visited, a:active {
    color: #000;
    text-decoration: none;
}

.dropdown li a:hover {
    color: #959595;
    text-decoration: none;
}

.toggle2:before {
    content: "\f105";
    font: 3.5vw/2vw FontAwesome;
}

.hamburger-menu {
    display: none;
    font: 3.5vw/2vw 'Montserrat', sans-serif;
    text-transform: uppercase;
}

.hamburger-menu a:link, a:visited, a:hover, a:active  {
    color: #000;
    text-decoration: none;
}

.homepic    {
    width: 100%;
    height: calc(100vh - (40px + 39px + 1vw));
    background: url('images/homepic.jpg') right center;
    background-size: cover;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 40px;
}

.hometitle  {
    text-align: left;
}

.homepic h1 {
    //font: 2.5vw/3vw 'Montserrat', sans-serif;
    font: 3.5vw/4vw 'Source Sans Pro', sans-serif;
    color: #fff;
    //text-transform: uppercase;
    letter-spacing: 1px;
    //text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}

.headerpicAbout  {
    width: 100%;
    height: 400px;
    background: url(images/over_mij.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerpicStress  {
    width: 100%;
    height: 400px;
    background: url(images/about.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerpicStress2  {
    width: 100%;
    height: 400px;
    background: url(images/aanbod_particulieren.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerpicBedrijven  {
    width: 100%;
    height: 400px;
    background: url(images/aanbod_bedrijven.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerpicPraktisch  {
    width: 100%;
    height: 400px;
    background: url(images/praktisch.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerpicContact  {
    width: 100%;
    height: 400px;
    background: url(images/contact.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerpicBegeleiding  {
    width: 100%;
    height: 400px;
    background: url(images/begeleiding.jpg) center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}


h2  {
    font: 18px/54px 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: left;
}

h3  {
    font: 15px/35px 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #1ab2a6;
}

h4  {
    font: 60px/60px 'Montserrat', sans-serif;
    color: #fff;
}

h5  {
    font: 28px/35px 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #ae5940;
}

h6  {
    font: 14px/19px 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #000;
}

strong  {
     color: #477774;
}

.contentwrap    {
    margin: 60px 15% 80px 15%;
    font: 14px/21px 'Montserrat', sans-serif;
    text-align: justify;
    overflow: auto;
}

.contentwrap ul {
    list-style: none;
    text-align: left;
    margin-left: 17px; 
}

.contentwrap ul li::before  {
    margin-left: 17px;
    content: "\2022";
    color: #1ab2a6;
    font-weight: bold;
    display: inline-block; 
    width: 16px;
    margin-left: -17px;
}

.contentwrap ul li ul {
    margin-left: 37px; 
}

.contentwrap ul li ul li::before  {
    margin-left: -17px;
}

.profilepic {
    width: 100%;
    margin: 10px 0 30px 0;
    text-align: left;
}

.profilepic img {
    width: 70%;
    border-radius: 40px;
}

.gegevens   {
    display: none;
}

article {
    float: left;
    width: 55%;
    margin: 0 0 0 10%;
}

.mainArticle {
    width: 70%;
    margin-left: 12%;
}

.mainArticle a:link, a:visited, a:hover, a:active {
    text-decoration: underline;
    color: #000;
}

a.telef:link, a.telef:visited, a.telef:active {
    text-decoration: none;
    color: #000;
}

a.telef:hover {
    text-decoration: none;
    color: #1ab2a6;
}

a.tit:link, a.tit:visited, a.tit:active {
    font: 15px/35px 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #1ab2a6;
    text-decoration: none;
    color: #1ab2a6;
}

a.tit:hover {
    text-decoration: none;
    color: #1ab2a6;
}



.contactwrap    {
    margin: 60px 20% 80px 20%;
    font: 14px/21px 'Montserrat', sans-serif;
    text-align: justify;
    overflow: auto;
}

.contactLeft    {
    float: left;
    width: 50%;
    text-align: left;
    padding-right: 20px;
}

.contactRight    {
    float: left;
    width: 50%;
}

.contactForm    {
    width: 50%;
}

input[type=text] {
    width: 100%;
    padding: 8px;
    margin: 3px 0;
    border: 2px solid #3c6772;
    border-radius: 5px;
}

input[type=text]:focus, textarea:focus {
    background-color: #dfedf1;
}

textarea {
    width: 100%;
    height: 120px;
    padding: 10px;
    margin: 3px 0;
    border: 2px solid #3c6772;
    border-radius: 5px;
}

input[type=button], input[type=submit] {
    border: 2px solid #3c6772;
    border-radius: 5px;
    background-color: #fff;
    padding: 16px 34px;
    margin: 2px 0;
    cursor: pointer;  
    color: #1ab2a6;
    font: 14px/14px 'Montserrat', sans-serif;
}

input[type="submit"]    { 
    -webkit-appearance: none; 
}

input[type=button]:hover, input[type=submit]:hover {
    background-color: #e1edef;
    color: #000;
}

.submit {
    border: 2px solid #3c6772;
    border-radius: 5px;
    background-color: #fff;
    padding: 16px 34px;
    margin: 2px 0;
    cursor: pointer;  
    color: #1ab2a6;
    font: 14px/14px 'Montserrat', sans-serif;
}

form    {
    margin-bottom: 50px;
}

form h3 {
    font: 15px/18px 'Montserrat', sans-serif;
    color: #1ab2a6;
}


.sitelink   {
    display: block; 
    width: 100%;
    height: 500px;
    //border: solid 1px red;
}




@media (max-width: 1100px) {
    .contentwrap    {
        margin: 60px 5% 80px 5%;
    }
    
    .contactwrap    {
        margin: 60px 10% 80px 10%;
    }

}






@media (max-width: 950px) {
    
    .homepic    {
            background: url('images/homepic_sm.jpg') center center;
            background-size: cover;
            height: calc(100vh - 100px);
            overflow: hidden;
            justify-content: left;
             padding-left: 30px;
    }
    
    .homepic h1 {
            //font: 5.3vw/6vw 'Montserrat', sans-serif;
            font: 6vw/6.5vw 'Source Sans Pro', sans-serif;
    }
    
    .main-menu {
            height: 100px;
        
    }

    .container-menu {
            width: 100%;
    }

    .navigation {
            float: left;
            display: block;
            width: 100%;
            padding: 12px 0 0 0;
    }
    
    .logo   {
            display: none;
    }
    
    h2  {
        letter-spacing: .5px;
    }
    
    h4  {
        font: 30px/40px 'Montserrat', sans-serif;
        color: #fff;
        text-align: center;
    }
    
    h5  {
        font: 20px/24px 'Montserrat', sans-serif;
        font-weight: 500;
        letter-spacing: 1px;
    }
    
    .sitelink   {
        display: block; 
        width: 100%;
        height: 300px;
        //border: solid 1px red;//border: solid 1px red;
    }
    
    .core-menu {
            float: right;
            width: 100%;
            background: rgba(255, 255, 255, .7);
            margin: auto;
            display: none;
            text-align: center;
            padding: 0 0 0 0;
            font: 4vw/2vw 'Montserrat', sans-serif;
    }
    
    .toggle:before {
            font: 3vw/2vw FontAwesome;
    }

    .core-menu li {
            width: 100%;
            display: block;
    }

    .core-menu li a{
            display: block;
            margin: auto;
            padding: 30px 20px 20px 20px;
    }

    .hamburger-menu {
            display: block;
            text-align: left;
            font: 22px/80px 'Montserrat', sans-serif;
            padding: 0 60px 0 30px;
            float: none;
            width: 100%;
            font-weight: 400;
    }

    .burger-1, .burger-2, .burger-3 {
            display: block;
            position: absolute;
            width: 20px;
            height: 3px;
            border-radius: 30px;
            right: 0;
            margin-right: 25px;
            background: #000;
            -webkit-transition: .2s ease;
            -ms-transition: .2s ease;
            -moz-transition: .2s ease;
            -o-transition: .2s ease;
            transition: .2s ease;
            cursor: pointer;
    }

    .burger-1 {
            top: 40px;
    }

    .burger-2 {
            top: 48px;
    }

    .burger-3 {
            top: 56px;
    }

    .burger-1.open, .burger-2.open, .burger-3.open {
            -webkit-transition: .2s ease;
            -ms-transition: .2s ease;
            -moz-transition: .2s ease;
            -o-transition: .2s ease;
            transition: .2s ease;
            transform-origin: 50% 50%;
    }

    .burger-1.open {
            top: 50px;
            width: 23px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -o-transform: rotate(45deg);
    }

    .burger-2.open {
            opacity: 0;
    }

    .burger-3.open {
            top: 50px;
            width: 23px;
            transform: rotate(-45deg);
    }

    .dropdown {
            width: 100%;
            text-align: center;
            position: relative;
            background: rgba(206, 206, 206, 0.5);
            padding-bottom: 0;
            color: #000;
    }

    .dropdown li   {
            padding: 0;
            margin: 0;
            font: 3vw/2vw 'Montserrat', sans-serif;
            font-weight: 200;
    }
    
    .dropdown li a  {
            font: 4vw/2vw 'Montserrat', sans-serif;
            color: #000;
    }
    
    .headerpicAbout  {
        height: 200px;
        background: url(images/over_mij.jpg) top top;
    }
    
    .headerpicStress  {
        height: 200px;
        background: url(images/about.jpg) top top;
    }
    
    .headerpicStress2  {
        height: 200px;
        background: url(images/aanbod_particulieren.jpg) top top;
    }
    
     .headerpicBedrijven {
        height: 200px;
        background: url(images/aanbod_bedrijven.jpg) top top;
    }
    
    .headerpicPraktisch  {
        height: 200px;
        background: url(images/praktisch.jpg) top top;
    }
    
    .headerpicContact  {
        height: 200px;
        background: url(images/contact.jpg) center center;
        background-size: cover;
    }
    
    .headerpicBegeleiding  {
        height: 200px;
        background: url(images/begeleiding.jpg) center center;
        background-size: cover;
    }
    
    .contentwrap    {
        width: 100%;
        margin: 30px 0 60px 0;
    }
    
    .contactwrap    {
        width: 100%;
        margin: 30px 0 60px 0;
        padding: 0 20px 0 20px;
    }
    
    .contactLeft    {
        float: left;
        width: 80%;
        text-align: left;
        padding-right: 20px;
    }

    .contactRight    {
        float: left;
        width: 80%;
    }
    
    .profilepic {
        margin: 0 0 20px 0;
        text-align: left;
    }

    .profilepic img {
        width: 80%;
        border-radius: 20px;
    }
    
    article {
        width: 100%;
        padding: 0 20px 0 20px;
        margin: 0;
    }
    
    .mainArticle {
        width: 100%;
        padding: 0 20px 0 20px;
        margin: 0;
    }
    
    .gegevens   {
        display: block;
        text-align: left;
    }

}