@import "reset.css";

html, body {
    font-size: 16px;
}
body, input, textarea, button {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}


/** GENERAL **/
body {
    background: #fff;
}
section {
    clear: both;
}
header, footer, main {
    display: block;
    position: relative;
}
header>div, footer>div, section>div {
    padding: 2.5em 4.5em;
    max-width: 900px;
    margin: 0 auto;
}

table {/*
    width: 100%;*/
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}
td {
    vertical-align: top;
    width: 1%; /* makes them evenly spaced thanks to table-layout: fixed on the table */
}
a {
    text-decoration: none;
    color: #369;
}
main a:hover, address a:hover {
    text-decoration: underline;
}


/** HEADER **/
header {
    position: fixed;
    width: 100%;
    z-index: 9;
    background: #111; /*#d5a31a;*/
}
.HomePage header {
    background: transparent;
}
header>div {
    padding-top: 0;
    padding-bottom: 0;
    /*background: #fff;
    height: 86px; /* because its contents are floating */
}
header nav {
    float: right;
    display: table;
    padding: 1.3rem 0;
}
header nav li {
    float: left;
    display: table-row;
    margin-left: 1em;
    text-align: center;
}
header nav a, .logo {
    padding: 0 .4em;
    height: 2.6rem;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    font-weight: 600;
    text-transform: lowercase;
}
.logo {
    padding: 1.3rem 0;
    line-height: 2.6rem;
}
.logo>img {
    vertical-align: middle;
    height: 2.5rem;
}
header nav a:hover, header nav a:active, header nav a.current, header nav a.section {
    border-bottom: 1px solid #fff;
}

header .icon-edit {
    position: absolute;
    left: 50%;
    top: 0;
    font-size: 2rem;
    color: #aaa;
    visibility: hidden;
}
header:hover .icon-edit {
    visibility: visible;
}

.show-menu {
    display: none;
    float: right;
    line-height: 5.4rem;
    color: #fff;
    font-size: 2rem;
}
.show-menu:after {
    font-family: FontAwesome;
    content: "\f0c9";
}

/* Floating menu */
.floating_menu .logo > img, .floating_menu header nav a {
    transition: height .7s;
}
.floating_menu .logo, .floating_menu header nav {
    transition: padding .7s;
}
.floating_menu header {
    transition: background .7s;
}
.floating_menu .show-menu {
    transition: line-height .7s, font-size .7s;
}
@media all and (min-width: 481px) {
    /*.floating_menu header {
        background: rgba(80, 57, 0, 0.8)
    }
    .HomePage*/.floating_menu header {
        background: rgba(0, 0, 0, .8);
    }
    /*.floating_menu .logo > img,*/ .floating_menu header nav a {
        height: 2rem;
    }
    .floating_menu .logo {
        padding: 0.3rem 0;
    }
    .floating_menu header nav {
        padding: 0.6rem 0;
    }
    .floating_menu .show-menu {
        line-height: 3rem;
        font-size: 1.5rem;
    }
}
/* make room for the floating menu */
main>section:first-child>div {
    padding-top: 9rem;
}
.LayoutPage main>section:first-child>div {
    padding-top: 2.5em;
}

/* side menu */
aside {
    float: right;
    margin: -5rem 0 1rem 2rem;
    padding: 3em 2em 1em;
    background: #3b72a9;
}
aside li {
    color: #1a334b;
}
aside a {
    color: #fff;
}
aside ul ul {
    font-size: .9em;
}
aside a.current {
    font-weight: bold;
}
aside li.current {
    color: #fff;
}


/** FOOTER **/
footer {
    background: #111;
    color: #fff;
    padding-bottom: 1em;
    box-shadow: 0 10em 0 0 #111;
    min-height: 10.1rem;
}
footer>div {
    padding: 3em 4.5em;
}

footer h4 {
    font-size: 1.2rem;
    margin-bottom: .2em;
}
footer h4>a {
    color: #fff
}
footer ul, footer p, footer th, footer td {
    font-size: .8rem;
}
footer ul {
    margin-left: 0;
}
footer table {
    width: 100%;
}
footer td {
    padding-right: .8em;
}
footer a {
    color: #bbb;
    margin-right: 1em;
}
footer a:hover {
    color: #fff;
}
footer .talk-to-us {
    white-space: nowrap;
}
footer .talk-to-us a {
    font-weight: 600;
}
.social {
    margin-top: 1.2rem;
}
footer .talk-to-us a[class^=icon] {
    font-weight: 400;
    font-size: 1.3em;
    margin-right: .1em;
    padding: 0 .3em;
}
.co2 {
    background: url(/img/leaf.png) no-repeat center left;
    padding-left: 15px;
    min-height: 16px;
}


/** MAIN **/
main {
    min-height: 70vh;
}
.Page main {
    background: #eee;
}
.Page section>div {
    background: #fff;
    padding-bottom: 4rem;
}
h1, h2, h3, h4 {
    font-family: Dosis, 'Open Sans', sans-serif;
}
h1 {
    font-size: 2.5rem;
    font-weight: 300;
    margin-bottom: .4em;
}
h2 {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: .6em;
}
h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: .3em;
}
h4 {
    font-size: 1.2rem;
    font-weight: 300;
}
h2+h4 {
    margin: -.8em 0 0;
}
p, section ul {
    margin-bottom: .8em;
}
p {
    min-height: 1em;
}
th {
    text-align: left;
}
em {
	font-style: italic;
}
section ul {
    overflow: hidden;
    margin-left: 0;
}
section ul>li {
    margin-left: -.2em;
    padding-left: 1em;
}
section ul>li:before {
    content: '▪';
    margin-right: .4em;
    margin-left: -.8em;
    float: left;
}
section.orange {
    background-color: #f38620;
    color: #fff;
}
blockquote {
    background: #f8e4af;
    border-radius: 1.5em;
    clear: right;
    float: right;
    margin-left: 1.5em;
    min-width: 20em;
    padding: 0.8em 1.3em 0.2em;
    width: 40%;
    box-sizing: border-box;
}
blockquote:before {
    font-family: FontAwesome;
    content: '\f05a';
    color: #fff;
    font-size: 3em;
    float: left;
    position: relative;
    top: -.2rem;
    left: -.4rem;
}
blockquote>p {
    margin-left: 3.2em;
}
.quote {
	max-width: 23.5rem;
	background: #f8e4af;
	padding: .8em 1.3em;
	border-radius: 1em;
	float: left;
	margin-right: 1rem;

}
@media screen and (max-width: 800px) {
	.quote {
		max-width: initial;
		float: none;
	}
}
.intro {
	clear: left;
}

/* Image styles */
img.leftAlone {
    display: block;
    margin-bottom: 1rem;
}
img.left, img.right {
    max-width: 40%;
    height: auto;
}
img.left {
    float: left;
    margin-right: 1rem;
    margin-bottom: .2rem;
}
img.right {
    float: right;
    margin-left: 1rem;
    margin-bottom: .2rem;
}

/** HomePage **/
.HomePage h1 {
    text-align: center;
    margin-bottom: 1em;
}
.HomePage h2 {
    font-size: 1.4rem;
}
.HomePage section>div>table {
    border-collapse: separate;
    border-spacing: 2rem;
    width: auto;
    margin-left: -2rem;
    margin-right: -2rem;
}
.HomePage section>div>table p {
    font-weight: 300;
    font-size: .9rem;
}
.HomePage section>div>:first-child {
    margin-top: 2vw;
}
.HomePage section>div>:last-child {
    margin-bottom: 2vw;
}


/** Home > Header **/
.home_header {
    background: #178296 url(/img/bg-toolbox.jpg) no-repeat center / cover;
    color: #fff;
    min-height: 60vh;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
main>section.home_header>div {
    padding-top: 4em;
}
.home_header h1 {
    font-size: 3.8rem;
    font-weight: 600;
    margin-top: 10vh !important;
    margin-bottom: .1em;
}
.home_header h2 {
    font-size: 1.6rem;
    font-weight: 300
}
.home_header img {
    max-width: 100%;
    height: auto;
}
@media all and (min-width: 1000px) {
    .home_header h1 {
        font-size: 5.3rem;
    }
    .home_header h2 {
        font-size: 2.3rem;
    }
}

/** Home > Intro **/
.home_intro td {
    background-color: #ecb82a;
    padding: 1.5em 1.8em;
}
.home_intro td:first-child {
    background-color: #7ca6d1;
}
.home_intro td a {
    color: #fff;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
}


/** Highlight **/
.home_highlight {
    background: #b21919;
    color: #fff;
}
.home_highlight h2 {margin:0}
.home_highlight>div {
    padding-top: 2em;
    padding-bottom: 2em;
    text-align: center;
}


/** Doe het zelf **/
.home_doehetzelf {
    background: #90b3d8 url(/img/bg-doehetzelf.jpg) no-repeat center / cover;
}
.home_doehetzelf td {
    background: #0067d1;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    padding: 1em 1.2em;
}

.home_highlight a, .home_doehetzelf a {
    color: #fff;
}


/** Cursussen **/
.home_courses {
    background: #e6b533 url(/img/bg-courses.jpg) no-repeat center / cover;
}
.home_courses .button {
    padding: 1.3em 2.5em;
}



button, .button, input.action {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    background: #d31e1e;
    border-radius: .2em;
    border: none;
    line-height: 1.5;
    padding: .5em 1.5em;
    display: inline-block;
}
input.action {
    width: 100%;
    max-width: 100%;
    padding: 1em 1.5em;
    background: #246;
}


/** Responsive Stuff **/
@media screen and (max-width: 1200px) {
    header > div, footer > div, section > div {
        padding-left: 2.5em;
        padding-right: 2.5em;
    }
    nav a {
        padding: 0;
    }
}
@media screen and (max-width: 920px) {
    footer h4 {
        margin-top: 1rem;
    }
}

@media screen and (max-width: 800px) {
    header nav ul, header nav li, header nav a {
        min-height: 0;
        display: block;
    }
    header nav {
        clear: both;
        display: none;
        width: 100%;
        background: rgba(0,0,0,.7);
    }
    header nav li {
        float: none;
        margin: 0;
        padding: 0 1em;
    }
    header nav a {
        line-height: 2.2;
    }
    header nav a.current {
        border: 0;
        background: rgba(255,255,255,.1);
    }
    .show-menu {
        display: inline-block;
    }

    table, tbody, tr, td {
        display: block;
        width: auto;
    }
    .HomePage section > div > table {
        margin: 1rem 0 0;
    }
    td {
        margin-bottom: 1em;
    }
    .home_doehetzelf tr, footer tr {
        text-align: center;
    }
    .home_doehetzelf td, footer td {
        box-sizing: border-box;
        display: inline-block;
        min-height: 5em;
        width: 30%;
        margin: 0 1% 1em;
    }
    footer td {
        text-align: left;
    }
}

@media screen and (max-width: 640px) {
    header > div, footer > div, section > div {
        padding-left: 1em;
        padding-right: 1em;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 2rem;
    }

    footer table, footer tbody, footer tr, footer td {
        min-height: 0;
    }
    footer td {
        margin: 1rem 2rem;
        width: auto;
    }
    footer ul, footer p, footer th, footer td {
        font-size: 1rem;
        text-align: center;
    }
    footer h4 {
        font-size: 1.5rem;
    }
    footer img {
        width: 100%;
        max-width: 220px;
        height: auto;
        margin-bottom: 1rem;
    }
    footer a {
        margin: 0;
    }
    footer .talk-to-us {
        white-space: normal;
    }
    footer .talk-to-us a {
        white-space: nowrap;
    }
}

@media screen and (max-width: 480px) {
    input, textarea {width: 100%}

    .home_doehetzelf td {
        display: block;
        min-height: 0;
        width: auto;
        margin: .5em 0;
    }
}

@media screen and (max-width: 400px) {
    header .active {display:none}
}