/* CSS3 document */
/*-general-*/
@media only screen and (min-width:335px){
html *,body * {padding:0;margin:0;}
body {font-family:geneva,arial,sans-serif;font-size:0.97em;color:#444;text-align:left;margin:0;padding:0;line-height:1.35em;}

/*-accessibility:screenreaders;'hidden'-*/
.access {position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);}

/*--basis lay-out links, menu, etc.-*/
body i {font-style:normal;font-weight:normal;margin:0 2px; white-space:nowrap;word-spacing:-0.5px;}
h2, h2 i{font-weight:bold;}
h2 {margin-left:18px; font-size:1.1em;margin-bottom:17px;font-size:1.1em;}
h3, h3 i {font-size:1.0em;font-weight:normal;font-style: oblique;}
body i.first, h2 i, h3 i, h4 i, nav a i {margin:0 3px 0 0;}

/*--basis lay-out main, (menu) main+sub links--*/
body nav a{border:none;font-weight:normal;font-style:normal;font-size: 0.65em;color:#444;text-decoration:none;}
body a i {font-style:normal;font-weight:normal;}
body a:hover,body nav a:hover, a:hover i {text-decoration:underline;font-style:italic;color:#222;}
body section a:hover {color:#222;}
main a, #footer a {clear:both;font-weight:normal; font-size:1em;font-style:normal;font-variant:normal; color:#444;padding:0 0.4em 0 0.2em; text-decoration:none; text-decoration: underline;}
main a i, #footer a i {font-style:normal;font-weight:normal; font-size:1em;}
.tiles a {text-decoration:none;}
.item p a {text-decoration:underline;}
nav{position:relative;max-width:1200px;margin:1.5em auto;z-index:100;font-size:1.1em;}
nav li {font-size: 1.1em;}
#menu li{list-style:none;z-index:101;margin-right:1.7%;}
                /*  toggle pt1 */
nav ul {margin-top:1em;}
body:not(:target) #menu li{height:0; line-height:0; overflow:hidden;-webkit-transition:height 0.20s;-moz-transition:height 0.20s;-o-transition:height 0.20s;transition:height 0.20s;}
/*!*/ body:not(:target) #menu:target{z-index:101; position:relative; clear:both; float:right; width:50%; margin-top:-2em;}
body:not(:target) #menu:target li{height:1em; line-height:1em;padding:10px 0 10px 0;overflow:visible; -webkit-transition:height 0.20s; -moz-transition:height 0.20s;-o-transition:height 0.20s;transition:height 0.20s;}
body:not(:target) #menu li.here {font-size:0.875em;text-decoration:underline;}
body:not(:target) #menu li.here a, body:not(:target) #menu li.here {font-size: 0.875em;}
body:not(:target) #menu li.here a,body:not(:target) #menu li.here i{font-style:italic;}
body:not(:target) #menu:target .back{height:0;line-height:0;padding:0;}
body:not(:target) #menu:target .back a{background-color:transparent;border:none;height:auto;/*essentieel!!*/ position:absolute;/*essentieel!!*/top:-101em;bottom:-101em;left:0;right:0;text-indent:-999em; z-index:-1;}
              /* end toggle pt1 */

header {border-bottom:1px solid #ddd;position:fixed;top:0; width:100%;background-image:url(../images/transp.png);background-position:left top;z-index:100;}
header div {position:relative;max-width:1200px;margin:0 auto;}
hr {clear:both;width:100%;border:0;border-top:1px solid #ddd;}

/*--title,logo--*/
a#logo{position:relative;float:left;margin:0.3em 0 30px 12px;z-index:101;}
body a#logo:hover {border:none;opacity:0.8;}
h1{background-image:url(../images/logo-label.png);z-index:100; background-repeat:no-repeat; display:inline-block;}

/* - content (sections) - */
main {position:relative; clear:both; margin:0 auto 0 auto; /*max-width:1200px;*/padding-bottom:30px;}
main.header-space {margin-top:140px;}
section {padding-left:4px;margin: 0 auto;}
.text-tile {position:relative;float:left;outline:1px solid #ddd;}
.text-tile h3 {margin:0em 0 12px 0;}
.text-tile p {margin-bottom:0.5em;}
.text-tile p i {padding:0 0.3em 0 0.3em;}
.text-tile p i.first {padding-left:0em;}
.text-tile a {padding-right:0.2em;}
.continue {position:relative;padding:25px 25px 0 25px;}
.continue {font-size:0.8em;}

/*!!*/span.num {/*color:#ddd;*/font-size:0.7em;}

/* (tiles->) .item */
.item {outline:1px solid #ddd;;display:inline-block;text-align:left; padding:2em 2em 1em 2em;}
.item h4 {width:100%; text-align:center; font-size:0.9em; font-weight:normal; color:#444; margin:0.5em 0 0 0;}
.item p {font-size:0.9em;text-align:center;}
a.item:hover h4 {color:#222;}
body a.item:hover h4,body a.item:hover h4 i {font-style:italic;}
.item img {max-width:100%;height:auto;}
.item img {overflow:hidden;}
a.item:hover img {opacity: 0.8;}
a.item:hover {outline:1px solid #ddd;}

/* -- index-/kunstprojectpg. -- */
.kp a.item, .contact a.item {text-decoration:none;}
.kp a.item h4, .contact a.item h4 {text-decoration:underline;}
.kp a.item:hover, .contact a.item:hover{text-decoration:underline !important;}

/* -- tassenpg. -- */
.bags {display:block;text-align:center;}
.bags div.item h3 {margin-bottom:12px;}
.bags div.item p:nth-child(-n+3) {margin-bottom:8px;}
.bags .item h4 {text-decoration:underline;}
.bags .item:first-child p {text-align:left;}

/* -- tassenpg. + nrs pg. -- */
.bags div.p-title, .nrs div.p-title{display:block;max-width:900px;margin:0 auto 0 auto;}
.bags div.p-title h2, .nrs .p-title h2 {float:left;}
.bags .tiles, .nrs .tiles {clear:both;}
.bags div.item p, .nrs div.item p {font-size:0.95em;}
.bags div.item h3, .nrs div.item h3 {font-size:0.95em;}
.bags .item, .nrs .item {margin:15px;}

/* -- nrs pg. -- */
.nrs {display:block;text-align:center;}
.nrs .item {padding:30px 30px 15px 30px;margin:20px 20px 20px 0;}
.nrs div.item h3 {margin-top:47px;margin-right:18px;margin-bottom:48px;margin-left:5px;}
.nrs .tiles img {width:125px; }
.nrs .item h4 {text-decoration:underline;}

/*    #### LIGHTBOX ####    */
.lb-loader, .lightbox{text-align:center;line-height:0;}
body:after{content:url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png);display:none;}
.lb-dataContainer:after,.lb-outerContainer:after{content:"";clear:both;}
body.lb-disable-scrolling{overflow:hidden;}
.lightboxOverlay{position:absolute;top:0;left:0;z-index:999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none;}
.lightbox{position:absolute;left:0;width:100%;z-index:1000;}
.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:4px;border:none !important;}
.lightbox a img{border:none;}
.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;background-color:#fff;}
.lb-loader,.lb-nav{position:absolute;left:0;}
.lb-outerContainer:after{display:table;}
.lb-loader{top:43%;height:25%;width:100%;}
.lb-cancel{display:block;width:32px;height:32px;margin:0 auto 0 auto;background:url(../images/loading.gif) no-repeat;}
.lb-nav{top:0;height:100%;width:100%;z-index:10;}
.lb-container>.nav{left:0;}
.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);}
.lb-next,.lb-prev{height:100%;cursor:pointer;display:block;}
.lb-nav a.lb-prev{width:50%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s;}
.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1;}
.lb-nav a.lb-next{width:50%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1;}
.lb-dataContainer{margin:0 auto;padding-top:0 !important;width:100%;-moz-border-radius-bottom-left:4px;-webkit-border-bottom-left-radius:4px;border-bottom-left-radius:4px;-moz-border-radius-bottom-right:4px;-webkit-border-bottom-right-radius:4px;border-bottom-right-radius:4px;}
.lb-dataContainer:after{display:block;}
.lb-data{margin-top:.75em;padding:0 .5em;}
.lb-data p, .lb-data i {line-height:1.5em;color:#ccc;}
.lb-data i {margin-left:0; padding-left:0; font-size:1.1em;}
.lb-data .lb-details{float:left;text-align:left;}
.lb-data .lb-number{display:block;clear:left;margin-top:1.2em;padding-bottom:0 !important;font-size:12px;color:#999;}
.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;}
.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1;}

/* - footer - */
footer {position:relative; clear:both;  max-width:900px/*1200px*/; margin:0 auto 0 auto;}
footer p {padding: 1em 2% 1em 2%;font-size:0.8em;}
footer a, footer a i {color:#444; }
footer a:hover, footer a:hover i {color:#222;}
} /*end general (screens)*/

/* ------------------------------------- other screens -------------------------------------------------------- */
@media only screen and (min-width:200px){
h1{background-size:90%;width:174px; height:80px;}
.nrs .p-title h2, .bags .p-title h2 {margin-left:23px;}
              /* toggle dl2-pt1 */
nav a.menu-link{float:right;margin-right:24%;font-size:0.65em;margin-top:8px;}
body:not(:target) ul#menu:target li{float:right;width:110%;}
body:not(:target) ul#menu:target :first-child {margin-top:0.4em;}
body:not(:target) #menu:target a {font-size:0.75em;}
body:not(:target) #menu:target .here  {font-size:1em;}
              /* end toggle dl2-pt1 */
img, p{max-width:100%;}
.narrow {max-width:400px;}
/*bottom*/.text-tile {padding:25px 18px 18px 18px;}
.kp .text-tile, .kp .item {float:none; margin:0 0 35px 0;}
.kp .text-tile, .contact .text-tile {max-width:335px;}
/**/.kp .item, .contact .item {outline:1px solid #ddd;max-width:335px;padding:28px;}
.continue {max-width:335px;}
.contact .text-tile, .contact .item {float:none; margin:0 0 35px 0;}
}

@media only screen and (min-width:400px) {
h1{background-size:100%;}
nav a.menu-link{margin-right:24%;}
body:not(:target) ul#menu:target li{width:72%;margin-top:0em;}
body:not(:target) #menu:target {width:50%;}
.nrs .p-title h2, .bags .p-title h2 {margin-left:25px;}
}

@media only screen and (min-width:500px){
 body:not(:target) #menu:target {width:50%;margin-top:-2em;}
}

@media only screen and (min-width:611px){
.bags div.item {width:500px;}
}

@media (min-width:650px) {
a#logo {display:inline-block; transform:rotate(0) scale(1.1);margin-right:2em;height:80px;}
.nrs .p-title h2, .bags .p-title h2 {margin-left:19px;}
  /* toggle dl2-pt2 */
nav{margin-top:1.4em;}
.menu-link {display:none;}
body nav {padding-top:0;margin-top:0;}
#menu {margin-left:9em;}
#menu  {display:block;-webkit-column-count:2;-moz-column-count:2;column-count:2;columns:2; width:65%;column-gap:4em;z-index:101;}
body:not(:target) #menu li a {display:block;/*!!*/ }
body:not(:target) #menu li {display:inline; border:none; margin:0;}
body:not(:target) #menu li.lang, body:not(:target) #menu li.back  {padding-right:0;}
body:not(:target) #menu li a {line-height:1em; margin-bottom:0.6em;width:11em;}
body:not(:target) #menu .back {display:none;}
} /* einde toggle dl2 */

@media only screen and (min-width:750px){
.kp div:nth-child(2n) {margin: 0 0 35px 0px;}
.kp div:nth-child(5) {margin: 0 0 35px 0px;}
.kp .item{margin:0 0 35px 0;}
}

@media only screen and (min-width:780px){
#menu  {-webkit-column-count:3;-moz-column-count:3;column-count:3;columns:3; width:70%;column-gap:45px;margin-top:1.8em;}
}

@media only screen and (min-width:850px){
main.narrow {max-width:900px;}
main.nrs {max-width:1050px;}
main.bags {max-width:1220px;}
.kp .text-tile {float:left;padding:25px 18px 18px 18px !important;}
.kp .text-tile:nth-child(2n+1) {float:right;}
.kp .text-tile:nth-child(4) {float:left;clear:both;}
.kp .item:nth-child(3) {float:right;clear:inherit;margin-top:45px;}
.kp .item:nth-child(6) {float:left;}
.contact .text-tile:nth-child(2) {float:left;}
.contact div, .contact a {margin-bottom: 35px;}
.contact .item:nth-child(3) {clear:none;float:right;}
.contact .text-tile:nth-child(4) {clear:both;float:right;}
.contact .item:nth-child(5) {float:left;}
.continue {display: none;}
}

@media only screen and (min-width:900px){
header div, footer {max-width:900px;}
#menu  {-webkit-column-count:6;-moz-column-count:6;column-count:6;columns:6;max-width:700px;column-gap:45px;padding-left:0;margin-top:2.1em;}
body:not(:target) #menu li a {width:5.5em;}
nav li{clear:none;}
}

@media only screen and (min-width:904px){
.bags div.item h3 {margin-top:15px;}
.bags div.item p:nth-child(4) {margin-bottom:22px;}
}
