.interstateblack {
  font-family: "Interstate Black";
  font-style: normal;
  font-weight: normal;
}

.interstatebold {
  font-family: Interstate;
  font-style: normal;
  font-weight: bold;
}


.smoothfont {-webkit-font-smoothing:antialiased;-moz-font-smoothing:grayscale;-moz-osx-font-smoothing:grayscale}
.noselect {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:moz-none;-ms-user-select:none;user-select:none}
.clear {clear:both}

BODY,HTML {height:100%}

BODY {margin:0;font-size:16px;font-weight:400;font-family:'Verdana',sans-serif}
BODY.aanbod {background-image:url(/media/bg/aanbod.png)}
BODY.contact {background-image:url(/media/bg/contact.png)}
BODY.detail {background-image:url(/media/bg/detail.png)}
BODY.home {background-image:url(/media/bg/home.png)}

NAV {font-family:"Interstate",sans-serif;position:relative;line-height:30px;background-color:#fff;height:50px;font-size:15px;text-transform:uppercase;font-weight:700;max-width:1130px;margin:auto;padding:0 5px}

NAV UL {display:block;margin:0;padding:0 0 0 25px;margin:auto;background-color:#80d4f6}
NAV LI {display:inline-block;margin:0;padding:0;position:relative}
NAV UL A {color:#fff;text-decoration:none;display:block;padding:0 10px}
NAV UL LI.active>A {color:#fff}
NAV UL LI:hover {background-color:#703e8f}
NAV UL UL {display:none;position:absolute;background-color:rgba(32,32,32,0.6);white-space:nowrap;font-size:0.95em}
NAV UL UL LI {display:block;line-height:2.5em}
NAV UL UL LI:hover {background-color:rgba(0,0,0,0.4)}
NAV UL UL UL {left:100%;top:0}
NAV LI:hover > UL {display:block}
NAV > UL > LI {background-color:#21b0e7;margin:10px 0 10px 10px}
NAV > UL > LI.active {background-color:#703e8f}

LABEL.menuicon {display:none}
INPUT#menuicon {display:none}

DIV.main {padding-bottom:40px;min-height:inherit;box-sizing:border-box;position:relative;padding-top:0;width:auto}

ARTICLE {max-width:1140px;margin:0 auto;box-sizing:border-box;border:5px solid #fff;border-top:0 none;background-color:#80d4f6;padding:0;font-size:14px}
.home ARTICLE {background-color:#703e8f}
.contact ARTICLE {background-color:#703e8f}
.detail ARTICLE {background-color:#703e8f}
ARTICLE DIV.columns {-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px}
ARTICLE H1 {margin:0;font-family:'Interstate Black',Interstate,sans-serif;font-weight:400;color:#703e8f;text-transform:uppercase;background-color:#fff;padding:5px 35px}
ARTICLE H2 {margin:0 0 10px;font-family:'Interstate Black',Interstate,sans-serif;font-weight:400;color:#703e8f;text-transform:uppercase;font-size:1.4em}
ARTICLE P {margin:0;padding-bottom:1em;line-height:1.4em;text-align: justify}
ARTICLE A {color:#8e841c;text-decoration:none}
ARTICLE A:hover {color:#c6b928}
ARTICLE DIV.columns > P {break-inside:avoid-column;-webkit-column-break-inside:avoid}

DIV.header {font-family:"Interstate",sans-serif;max-width:1060px;margin:auto;padding:40px 40px 20px;background-color:#fff}
DIV.header .logo {display:block}
DIV.header .decoratie {float:right;clear:right;display:block;margin-top:11px}
DIV.header > DIV {float:right;margin-top:12px;text-transform:uppercase}
DIV.header > DIV > A {color:#703e8f;text-decoration:none;font-weight:700;line-height:1em;font-size:15px}
DIV.header > DIV > A:hover {color:#80d4f6}

ARTICLE A {color:#703e8f;text-decoration:none}
ARTICLE A:hover {color:#21b0e7}
ARTICLE STRONG {color:#703e8f}

ARTICLE .body {background:#fff;padding:10px;margin:20px 35px;color:#703e8f}

DIV.map {width:60%;height:0;padding-bottom:34%;margin:0 0 10px 40px}
DIV.map IFRAME {width:100%;height:100%}
IMG.foto {width:60%;display:block;height:auto;float:right;clear:right;margin:0 0 0 40px}

.body>.aanbod {margin:-10px}
.aanbod .item {margin:0;position:relative;border-bottom:20px solid #80d4f6;background:#fff;overflow:hidden}
.aanbod .item:last-child {border-bottom:0 none}
.aanbod .item > A {position:absolute;top:0;left:0;right:0;bottom:0;margin:-20px;padding:20px;z-index:1}
.aanbod .item .img {width:300px;height:200px;overflow:hidden;background-size:cover;background-position:center center;float:left;border-right:20px solid #80d4f6;}
.aanbod .item .kenmerken {float:left;padding:5px 10px;position:relative}
.aanbod .item LABEL {margin-right:5px;color:#21b0e7}
.aanbod .item LABEL:after {content:':'}
.aanbod .item H2 {clear:left;margin:0;color:#21b0e7}
.aanbod .item H3 {font-family:'Interstate Black',Interstate,sans-serif;font-weight:400;clear:left;margin:0;color:#703e8f;text-transform:uppercase}
.aanbod .item H4 {font-family:'Interstate Black',Interstate,sans-serif;font-weight:400;clear:left;margin:0;color:#703e8f;font-size:1.5em}
.aanbod .item {clear:both}
.aanbod .item .leesgoed {font-family:'Interstate',sans-serif;font-weight:700;text-transform:uppercase;position:absolute;display:block;height:auto;bottom:0px;right:0;left:0;background-color:#21b0e7;color:#fff;padding:5px 10px;left:320px;margin:0;width:auto}
.aanbod .item:hover .leesgoed {background-color:#703e8f}
.aanbod .item .leesgoed:after {content:'';width:0;height:0;border:6px solid transparent;border-left-color:#fff;position:absolute;margin:2px 0 0 10px}

.aanbod.home {margin:0px}
.aanbod.home {width:50%;float:right;margin-left:40px;font-size:0.8em}
.aanbod.home .item {border:20px solid #80d4f6}
.aanbod.home .item {border-width:10px;margin-bottom:10px}
.aanbod.home .item .img {width:200px;height:133px;border-right:10px solid #80d4f6}
.aanbod.home .item .leesgoed {left:210px}

ARTICLE.detail > DIV {padding:0 35px 0 35px}
ARTICLE.detail .pictures {float:right;width:49%;margin-top:20px;background:#fff}
ARTICLE.detail .pictures UL {display:table;margin:0;padding:0;width:100%;height:100px;border-spacing:10px}
ARTICLE.detail .pictures LI {display:table-cell;margin:0;padding:0;background-position:center center;background-size:cover;position:relative}
ARTICLE.detail .pictures LI>SPAN {position:absolute;cursor:pointer;width:100%;height:100%}
ARTICLE.detail .pictures LI>SPAN:hover {background-color:rgba(128,212,246,0.4)}
ARTICLE.detail .pictures LI.active>SPAN {background-color:rgba(128,212,246,0.8)}
ARTICLE.detail .pictures>DIV {padding:0 10px 10px}
ARTICLE.detail .pictures IMG {width:100%;display:block}
ARTICLE.detail .body {float:left;width:49%;margin-right:0;margin-left:0;box-sizing:border-box}
ARTICLE.detail H2 {color:#21b0e7;margin:0}
ARTICLE.detail H3 {font-family:'Interstate Black',Interstate,sans-serif;font-weight:400;color:#703e8f;text-transform:uppercase;margin:0 0 1em}
ARTICLE.detail H1 {margin:0}
ARTICLE.detail LABEL {margin-right:5px;color:#703e8f}
ARTICLE.detail LABEL:after {content:':'}
ARTICLE.detail H4 {font-family:'Interstate Black',Interstate,sans-serif;font-weight:400;text-transform:uppercase;clear:left;margin:0.3em 0;color:#21b0e7;font-size:1.5em}
ARTICLE.detail H4 SPAN {color:#703e8f}

.button {display:block;background-color:#21b0e7;color:#fff;font-family:"Interstate";font-weight:700;text-transform:uppercase;padding:5px 10px;margin-bottom:10px}
.button:last-child {margin-bottom:0}
.button:after {content:'';width:0;height:0;border:6px solid transparent;border-left-color:#fff;position:absolute;margin:2px 0 0 10px}
.button:hover {background-color:#703e8f;color:#fff}
BUTTON.button {border:0 none;font-family:inherit;font-size:inherit}

TABLE.aanmelden {border-spacing:0;border-collapse:collapse;max-width:700px}
TABLE.aanmelden H3 {font-size:1em;color:#703e8f;margin-bottom:0}
TABLE.aanmelden SELECT,
TABLE.aanmelden INPUT {width:100%;box-sizing:border-box;border:1px solid #ccc;padding:2px 5px;margin:1px 0;font-family:inherit;font-size:inherit;outline:none;background:none}
TABLE.aanmelden SELECT:focus,
TABLE.aanmelden INPUT:focus {background-color:#f3f3f3}
TABLE.aanmelden TR.error TD:first-child {color:#c00;font-weight:bold}
TABLE.aanmelden TR.error SELECT,
TABLE.aanmelden TR.error INPUT {background-color:#fcc;border-color:#933}
TABLE.aanmelden TD {width:500px}
TABLE.aanmelden TD:first-child {width:10px}

DIV.error {border:1px solid #933;background-color:#fdd;display:block;padding:10px;margin-bottom:10px;border-radius:3px;color:#600}
UL.success {border:1px solid #393;background-color:#dfd;display:block;padding:10px;margin-bottom:10px;border-radius:3px;color:#060}
UL.success LI {margin:0;padding:0;display:block}

@media screen and (max-width: 950px) {
    NAV {font-size:14px}
    NAV > UL > LI {margin-left:0}
    NAV > UL > LI:first-child {margin-left:10px}
    NAV UL A {padding:0 5px}
}
@media screen and (max-width: 750px) {
 	LABEL.menuicon {display:block;padding:7px;position:absolute;z-index:101;right:0}
	LABEL.menuicon SPAN {display:block;width:24px;height:4px;background-color:#703e8f;border-radius:2px;margin:4px;transition:all .4s}

    HEADER {position:fixed;z-index:1000;background:#fff;height:50px;left:0;right:0;top:0;box-shadow:rgba(0,0,0,0.5) 0 0 5px}
    DIV.header {padding:4px 10px 3px}
    DIV.header .decoratie {display:none}
    DIV.header > DIV {display:none}
    DIV.header .logo {height:43px}
	DIV.main {position:absolute;width:100%;margin-left:0;transition:all .4s;padding-top:90px;right:0;padding-bottom:100px}
	
	DIV.map {float:none !important;width:100%;margin:0 0 10px;padding-bottom:50%}
	IMG.foto {width:40%;margin:0 0 5px 5px}
    
    NAV {height:auto}
    NAV UL {padding-left:0;position:fixed;top:50px;bottom:0;width:200px;right:-205px;transition:all .4s;box-shadow:rgba(0,0,0,0.5) 0 4px 5px} 
    NAV UL > LI {display:block}
    NAV > UL > LI {margin-left:10px}

	INPUT#menuicon:checked ~ HEADER NAV UL {display:block;right:0}
	INPUT#menuicon:checked ~ DIV.main {right:200px}
    INPUT#menuicon:checked ~ HEADER LABEL.menuicon SPAN:first-child {transform:rotate(45deg);margin-top:12px}
    INPUT#menuicon:checked ~ HEADER LABEL.menuicon SPAN:nth-child(2) {opacity:0}
    INPUT#menuicon:checked ~ HEADER LABEL.menuicon SPAN:last-child {transform:rotate(-45deg);margin-top:-16px}
    
    .button {font-size:0.9em}

    ARTICLE H1 {padding:5px 10px;font-size:1em}
    ARTICLE {border:0 none;padding-bottom:1px}
    ARTICLE .body {padding:5px;margin:5px}
    .aanbod.home {width:auto;float:none;margin-left:0}
    .aanbod.home:after {content:'';display:block;clear:both}
    .aanbod .item {border-width:15px;border-color:#fff;font-size:0.8em}
    .aanbod.home .item {border-width:5px;font-size:0.8em}
    .aanbod.home .item:nth-of-type(3) {display:none}
    .aanbod.home .item:nth-of-type(4) {display:none}
    .aanbod.home .item .img {width:30%;height:0;padding-bottom:17%;border-right-width:5px;box-sizing:border-box}
    .aanbod .item .img {width:33%;height:110px;border-right-width:0px}
    .aanbod.home .button:last-child {display:none}
    .aanbod.home .kenmerken > DIV {display:none}
    .aanbod .item .kenmerken {padding:3px 5px;line-height:1.3em;white-space:normal;width:66%;box-sizing:border-box}
    .aanbod .item .leesgoed {clear:both;position:relative;left:0}
    .aanbod.home .item .leesgoed {left:30%;position:absolute}
    .aanbod .item .leesgoed {padding:2px 5px}
    .aanbod .item .leesgoed:after {border-width:4px}
    
    ARTICLE.detail > DIV {padding:0 5px 4px}
    ARTICLE.detail .pictures,
    ARTICLE.detail .body {float:none;width:auto;margin-top:5px}
    ARTICLE.detail .pictures UL {border-spacing:5px;height:60px}
    ARTICLE.detail .pictures>DIV {padding:0 5px 5px}
}