@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Book.eot?#iefix') format('embedded-opentype');
    src: url('fonts/Gotham-Book.woff') format('woff'), url('fonts/Gotham-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LemonmilkBold';
    src: url('fonts/LEMONMILK-Bold.eot') format('embedded-opentype');
    src: url('fonts/LEMONMILK-Bold.woff') format('woff'), url('fonts/LEMONMILK-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'LemonmilkRegular';
    src: url('fonts/LEMONMILK-Regular.eot') format('embedded-opentype');
    src: url('fonts/LEMONMILK-Regular.woff') format('woff'), url('fonts/LEMONMILK-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --- VARS */

:root {
    --color-roze: #f597e9;
	--color-paars: #6b26ff;
	--color-groen: #d3f95c;
	--color-grijs: #f0ede1;
}

html{font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
body{background-color: #000000; background: url("/assets/images/home-01.png") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

body.home01{background-image: url("/assets/images/home-01.png");}
body.back01{background-image: url("/assets/images/back-01.png");}
body.back02{background-image: url("/assets/images/back-02.png");}
body.back03{background-image: url("/assets/images/back-03.png");}

h1{padding:0.5rem 1rem 0.5rem 2rem; background-color: var(--color-roze);}
header {min-height: 6rem;}
.text a {color: var(--color-paars);}

a.button{text-decoration: none;}
.button{background-color: var(--color-paars); padding:1rem 2rem; margin-bottom: 2rem; border-radius:1rem; -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); color:#ffffff; font-family: "LemonmilkBold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
span.button-container {width: 100%; text-align: center; display: block;}

.logo-mbo{background: url("/assets/images/logo-mbo-college-poort.png") no-repeat; background-size: contain; height:4rem; position: absolute; top:0px; left:10%; width:8rem; z-index:10;}
.logo-fleva{background: url("/assets/images/logo-fleva.png") no-repeat; background-size: contain; position: absolute; right:2rem; z-index:10; aspect-ratio:980/1667; height: 10rem; top: 4rem;}

body.home01 .logo-mbo {left: 10%; height: 6rem; width: 12rem; top: 1rem;}
body.home01 .logo-fleva {top: 1rem;}
body.home01 main .heading {position: fixed; width: 100%; top: 1rem; height: 6rem;}
body.home01 main .heading h1 {background-color: #ffffff; width: calc(60% - 12rem); margin-left: auto; margin-right: auto; font-family: "LemonmilkBold", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; height:100%;text-align:center; font-size: 1.5rem; padding-top:1rem;}
body.home01 main .text{background-color: rgba(255,255,255,0.4); width: calc(60% - 12rem); margin-left: auto; margin-right: auto; text-align:center; font-size: 1.5rem; padding:1rem; margin-bottom: 2rem;}
body.home01 main .text.home-ondertitel {background-color: #ffffff; width: calc(60% - 12rem); margin-left: auto; margin-right: auto; text-align:center; font-family: "LemonmilkRegular", Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: 1rem; padding-bottom:2rem; margin-bottom: calc(35vh - 6rem);}
body.home01 main .text p{margin-top:0px;}

body.vervolg{background-image: url("/assets/images/back-03.png");}
body.vervolg main {max-width: 80%; margin-left: auto; margin-right: auto;}
body.vervolg main .text{padding:1rem 2rem; background-color:#ffffff;}

footer {position: fixed; bottom: 0px; width:100%;}
.footer-menu-item {font-size: 0.75rem;  position: absolute; right: 1rem; bottom: 1rem; color: var(--color-paars); text-decoration: none; background-color:rgba(255,255,255,0.3); padding:0.2rem 0.5rem; display: inline-block; width:100%;  width: max-content; border-radius:0.125rem;}

ul.sitemap {background-color: #ffffff; padding: 1rem 2rem;}
ul.sitemap a {text-decoration: none; color: var(--color-paars);}

@media screen and (max-width: 1024px){
	body.home01 .logo-mbo {left: 5%; height: 6rem; width: 12rem;}
	body.home01 main .heading h1, body.home01 main .text.home-ondertitel, body.home01 main .text {width: calc(65% - 12rem);}
}

@media screen and (max-width: 800px){
	body.home01 main .heading {position: relative; top: 0px;}
	body.home01 main .heading h1 {width: 90%; margin-top: 1rem; font-size:1.25rem; padding:1rem 1rem;}
	body.home01 main .text.home-ondertitel{width: 90%; padding-top:0px; font-size:0.8rem;}
	body.home01 main .text{width:80%;}	
	footer {position: relative;}
	.footer-menu-item {bottom: -1rem;}	
}

@media screen and (max-width: 667px){
	.logo-fleva{height: 4rem; top: 1rem;}
	body.home01 .logo-mbo {top: 0px;}
	body.home01 .logo-fleva {top: 1rem;}
	body.home01{background: url(/assets/images/home-01.png) no-repeat 10% 0px fixed; -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
	body.home01 .logo-mbo {height: 4rem; width: 8rem;}
	header {min-height: 4rem;}
	body.home01 main .text.home-ondertitel{padding-bottom:1rem;}
}