@charset "UTF-8";

/*
::-webkit-scrollbar {
	display: none;		/* needed for MS edge */
/*}*/

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

@font-face{
	src: url("../f/Roboto-Thin.ttf");
	font-family: roboto-thin;
	font-weight: 100;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
    src: url("../f/Roboto-ThinItalic.ttf");
    font-family: roboto-thinitalic;
    font-weight: 100;
    font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-Light.ttf");
	font-family: roboto-light;
	font-weight: 300;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-LightItalic.ttf");
	font-family: roboto-lightitalic;
	font-weight: 300;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-Regular.ttf");
	font-family: roboto-regular;
	font-weight: 400;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-Italic.ttf");
	font-family: roboto-regularitalic;
	font-weight: 400;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-Medium.ttf");
	font-family: roboto-medium;
	font-weight: 500;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-MediumItalic.ttf");
	font-family: roboto-mediumitalic;
	font-weight: 500;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-Bold.ttf");
	font-family: roboto-bold;
	font-weight: 700;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-BoldItalic.ttf");
	font-family: roboto-bolditalic;
	font-weight: 700;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-Black.ttf");
	font-family: roboto-black;
	font-weight: 900;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/Roboto-BlackItalic.ttf");
	font-family: roboto-blackitalic;
	font-weight: 900;
	font-style: normal;
    font-stretch: normal;
}

@font-face{
	src: url("../f/RobotoCondensed-Light.ttf");
	font-family: robotocondensed-light;
	font-weight: 300;
	font-style: normal;
    font-stretch: condensed;
}

@font-face{
	src: url("../f/RobotoCondensed-LightItalic.ttf");
	font-family: robotocondensed-lightitalic;
	font-weight: 300;
	font-style: normal;
    font-stretch: condensed;
}

@font-face{
	src: url("../f/RobotoCondensed-Regular.ttf");
	font-family: robotocondensed-regular;
	font-weight: 400;
	font-style: normal;
    font-stretch: condensed;
}

@font-face{
	src: url("../f/RobotoCondensed-Italic.ttf");
	font-family: robotocondensed-regularitalic;
	font-weight: 400;
	font-style: normal;
    font-stretch: condensed;
}

@font-face{
	src: url("../f/RobotoCondensed-Bold.ttf");
	font-family: robotocondensed-bold;
	font-weight: 700;
	font-style: normal;
    font-stretch: condensed;
}

@font-face{
	src: url("../f/RobotoCondensed-BoldItalic.ttf");
	font-family: robotocondensed-bolditalic;
	font-weight: 700;
	font-style: normal;
    font-stretch: condensed;
}

html{
	font-size: 16px;
}

body{
    font-family: roboto-regular, "sans-serif";
    font-size: 1em;
    background-color: #FE6200; /* FE5900 #FE6C00; #FF8000*/ 
	color: #000000;
}

a:link
{
	color: #ffffff;
	text-decoration: none;
}

a:visited
{
	color: #ffffff;
	text-decoration: none;
}

a:hover
{
	color: #000000;
	text-decoration: none;
}

a:active
{
	color: #000000;
	text-decoration: none;
}

.hover-box {
  position: relative;
  display: inline-block;
}

.hover-box .text {
	display: none;
}

.hover-box:hover .text {
  display: block;
}

#dun
{
font-family: roboto-thin;
}

#duncursief
{
font-family: roboto-thinitalic;
}

#licht
{
font-family: roboto-light;
}

#lichtcursief
{
font-family: roboto-lightitalic;
}

#normaal
{
font-family: roboto-regular;
}

#normaalcursief
{
font-family: roboto-regularitalic;
}

#mediaal
{
font-family: roboto-medium;
}

#mediaalcursief
{
font-family: roboto-mediumitalic;
}

#dik
{
font-family: roboto-bold;
}

#dikcursief
{
font-family: roboto-bolditalic;
}

#vet
{
font-family: roboto-black;
}

#vetcursief
{
font-family: roboto-blackitalic;
}

#smallicht
{
font-family: robotocondensed-light;
}

#smallichtcursief
{
font-family: robotocondensed-lightitalic;
}

#smalnormaal
{
font-family: robotocondensed-regular;
}

#smalnormaalcursief
{
font-family: robotocondensed-regularitalic;
}

#smaldik
{
font-family: robotocondensed-bold;
}

#smaldikcursief
{
font-family: robotocondensed-bolditalic;
}

.imagesize{
	width: 100%;
	height: inherit;
}

.imagesize2{
	width: 85%;
	height: inherit;
}

.imagepreviewsize{
	width: 25%;
	height: inherit;
}

.blurbhead{
	line-height: 29px;
	font-size: 2em;
    font-family: roboto-black;
}
.rightblurphead{
	line-height: 29px;
	    font-size: 2em;
    font-family: roboto-black;
}

.subheader{
	font-family: roboto-black;
}

@media only screen and (max-width: 20000px) {

.blurbhead{
	line-height: 29px;
	font-size: 2em;
    font-family: roboto-black;
}
.rightblurphead{
	line-height: 29px;
	    font-size: 2em;
    font-family: roboto-black;
}

#logo {
    position: fixed;
    left: 64px;
    bottom: 64px;
    height: 120px;
    width: 348px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
	color: #ffffff;
}

#nummer0 {
    position: fixed;
    left: 300px;
    bottom: 554px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer1 {
    position: fixed;
    left: 124px;
    bottom: 434px;
	height: 120px;
	width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer2 {
    position: fixed;
    left: 212px;
    bottom: 434px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer3 {
    position: fixed;
    left: 300px;
    bottom: 434px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer4 {
    position: fixed;
    left: 124px;
    bottom: 314px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer5 {
    position: fixed;
    left: 212px;
    bottom: 314px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer6 {
    position: fixed;
    left: 300px;
    bottom: 314px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer7 {
    position: fixed;
    left: 124px;
    bottom: 194px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer8 {
    position: fixed;
    left: 212px;
    bottom: 194px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer9 {
    position: fixed;
    left: 300px;
    bottom: 194px;
	height: 120px;
    width: 88px;
    z-index: 63;
    font-size: 8em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#tekst {
    position: fixed;
    left: -25px;
    bottom: 677px;
	height: 40px;
    width: 400px;
    z-index: 63;
    font-size: 2em;
    font-family: roboto-black;
	text-align: right;
	margin: auto;
}

#mainblurb {
	position: absolute;
	left: 520px;
	right: 64px;
	bottom: 64px;
	top: 64px;
	z-index: 31;
	font-size: 1em;
	font-family: roboto-regular;
	text-align: left;
	vertical-align: bottom;
	line-height: 20px;
	/* column-count: 1; <-- breaks scrolling in FF */
	column-gap: 8px;
	overflow: auto; /* Use auto instead of hidden */
	scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent; /* For Firefox */
}

#mainblurptiles {
	position: absolute;
	left: 520px;
	right: 64px;
	bottom: 64px;
	top: 64px;
	z-index: 31;
	font-size: 1em;
	font-family: roboto-regular;
	text-align: left;
	line-height: 20px;
	column-gap: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent; /* For Firefox */
    -ms-overflow-style: scrollbar; /* For Internet Explorer and Edge */
}

#mainblurptiles::-webkit-scrollbar {
    width: 6px; /* adjust as needed */
}

#mainblurptiles:hover {
   /* overflow-y: auto; /* show the scrollbar on hover */
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* For Firefox */
}

#mainblurptiles:hover::-webkit-scrollbar-thumb {
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* Change color when scrollbar is shown */
}

#mainblurptiles::-webkit-scrollbar-thumb {
    background-color: transparent; /* Initial transparent color */
}

#mainblurptiles::-webkit-scrollbar-track {
    background-color: none;
}

} /* einde media max width 10.000 */

@media only screen and (max-width: 1600px) {

.blurbhead{
	line-height: 29px;
	font-size: 1.5em;
    font-family: roboto-black;
}
.rightblurphead{
	line-height: 29px;
	font-size: 1.5em;
    font-family: roboto-black;
}


#logo {
    position: fixed;
    left: 44px;
    bottom: -14px;
    height: 46;
    width: 174px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
	color: #ffffff;
}


#nummer0 {
    position: fixed;
    left: 165px;
    bottom: 280px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer1 {
    position: fixed;
    left: 79px;    
    bottom: 218px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer2 {
    position: fixed;
    left: 122px;
    bottom: 218px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer3 {
    position: fixed;
    left: 165px;
    bottom: 218px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer4 {
    position: fixed;
    left: 79px;    
    bottom: 156px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer5 {
    position: fixed;
    left: 122px;
    bottom: 156px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer6 {
    position: fixed;
    left: 165px;
    bottom: 156px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer7 {
    position: fixed;
    left: 79px;    
    bottom: 94px;
	height: 76px;
    width: 38px;   
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer8 {
    position: fixed;
    left: 122px;
    bottom: 94px;
    width: 38px; 
	height: 76px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#nummer9 {
    position: fixed;
    left: 165px;
    bottom: 94px;
	height: 76px;
    width: 38px;
    z-index: 63;
    font-size: 4em;
    font-family: roboto-black;
	text-align: center;
	margin: auto;
}

#tekst {
    position: fixed;
    left: -180px;
    bottom: 366px;
	height: 40px;
    width: 400px;
    z-index: 63;
    font-size: 1.5em;
    font-family: roboto-black;
	text-align: right;
	margin: auto;
}

#mainblurb {
	position: absolute;
	left: 285px;
	right: 44px;
	bottom: 44px;
	top: 44px;
	z-index: 31;
	font-size: 1em;
	font-family: roboto-regular;
	text-align: left;
	line-height: 20px;
	column-gap: 8px;
	overflow: hidden; /* Use auto instead of hidden */
	scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent; /* For Firefox */
	}

#mainblurptiles {
	position: absolute;
	left: 285px;
	right: 44px;
	bottom: 44px;
	top: 44px;
	z-index: 31;
	font-size: 1em;
	font-family: roboto-regular;
	text-align: left;
	line-height: 20px;
	column-gap: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent; /* For Firefox */
    -ms-overflow-style: scrollbar; /* For Internet Explorer and Edge */
}

#mainblurptiles::-webkit-scrollbar {
    width: 6px; /* adjust as needed */
}

#mainblurptiles:hover {
   /* overflow-y: auto; /* show the scrollbar on hover */
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* For Firefox */
}

#mainblurptiles:hover::-webkit-scrollbar-thumb {
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* Change color when scrollbar is shown */
}

#mainblurptiles::-webkit-scrollbar-thumb {
    background-color: transparent; /* Initial transparent color */
}

#mainblurptiles::-webkit-scrollbar-track {
    background-color: none;
}

} /* einde media max width */

#more {display: none;}

#leftblurb {
	position: absolute;
	left: 0px;
	width: 48%;
	bottom: 0px;
	top: 0px;
	z-index: 31;
	font-size: 1em;
	font-family: roboto-regular;
	text-align: left;
	line-height: 20px;
	column-gap: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent; /* For Firefox */
    -ms-overflow-style: scrollbar; /* For Internet Explorer and Edge */
}

#leftblurb::-webkit-scrollbar {
    width: 6px; /* adjust as needed */
}

#leftblurb:hover {
   /* overflow-y: auto; /* show the scrollbar on hover */
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* For Firefox */
}

#leftblurb:hover::-webkit-scrollbar-thumb {
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* Change color when scrollbar is shown */
}

#leftblurb::-webkit-scrollbar-thumb {
    background-color: transparent; /* Initial transparent color */
}

#leftblurb::-webkit-scrollbar-track {
    background-color: none;
}

#rightblurb {
	position: absolute;
	right: 0px;
	width: 48%;
	bottom: 0px;
	padding-top: 10px; /* om te compenseren voor de blurphead in leftblurp: nu is de tekst op zelfde hoogte */
	top: 0px;  
	z-index: 31;
	font-size: 1em;
	font-family: roboto-regular;
	text-align: left;
	line-height: 20px;
	column-gap: 8px;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent;  /* For Firefox */
    -ms-overflow-style: scrollbar; /* For Internet Explorer and Edge */
}

#rightblurb::-webkit-scrollbar {
    width: 6px; /* adjust as needed */
}

#rightblurb:hover {
    /*overflow-y: auto; /* show the scrollbar on hover */
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* For Firefox */
}

#rightblurb:hover::-webkit-scrollbar-thumb {
    scrollbar-color: rgba(128, 128, 128, 0.5) transparent; /* Change color when scrollbar is shown */
}

#rightblurb::-webkit-scrollbar-thumb {
    background-color: transparent; /* Initial transparent color */
}

#rightblurb::-webkit-scrollbar-track {
    background-color: none;
}