/* xaside kan er later nog uit */

body{background-color:white;margin:0;font-size:18px;font-family:Avenir, AvenirNext-Regular, Segoe UI, Segoe, Calibri Light, Geneva, Century Gothic, Open Sans, sans-serif-light, sans-serif;text-rendering:optimizeLegibility;
	font-weight:100;line-height:1.5em;
	-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust: none;}
*{box-sizing:border-box;margin:0;padding:0}

/* header */
header{width:100%;height:auto;position:relative;margin:auto;overflow:hidden;}
#title{display:block;position:absolute;color:white;width:100%;height:100%;text-align:center;padding:30px;text-shadow:0 0 100px black;}

h1, h2{max-width:786px;max-width:75%;line-height:normal;margin:auto;position:relative;}
@media screen and (min-width:1536px) { h1, h2{max-width:1280px;} }
h1{font-size:76px;font-size:11vw;font-weight:500;top:22%;line-height:12vw;}
h2{font-weight:100;font-style:normal;font-size:4vw;bottom:-65%;top:28%;}
p{orphans: 2;}

.shadow{text-shadow:0px 0px 5px black}
.radial{background:-webkit-radial-gradient(center, ellipse, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%);background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 100%);}

#top{padding:16px 30px;width:100%;max-width:1536px;position:absolute;top:0;color:white;margin:auto;left:0;right:0;font-size:1.1em;text-align:center;text-shadow:0px 0px 30px black}
#top a{background:none;float:left;text-decoration:none;font-style:italic;font-weight:100;letter-spacing:2px}
#top a strong{font-style:normal;font-size:1.2em;line-height:1.2em;text-shadow:0px 0px 30px black;
	background-image:linear-gradient(to bottom,rgba(255,255,255,0) 49%,rgba(255,255,255,1) 49%);background-size:2px 2px;background-repeat:repeat-x;background-position:0 1.1em;}
#top em{text-align:right;float:right;}

.meta{clear:both;width:100%;max-width:1024px;padding:0 30px 10px 30px;margin:auto;font-size:15px;line-height:50px;margin-top:-40px;position:relative;text-align:center}
.meta.left{text-align:left;}
.meta time{padding-left:10px;font-style:italic;}

/* sections en col(s) */
section, .max, .cols{width:100%;max-width:1024px;margin:auto;clear:both;position:relative;}
.nomax{max-width:none}
section {padding:30px 0;}
section.wrap{padding:0}
.col {padding:15px 15px 15px 30px;}
.cols{padding: 15px 30px;}
.col.flr{padding:15px 30px 15px 15px;}
aside,section>figure img,section>a>figure img, figure.col, figure.col.flr {padding-top:0;padding-bottom:0;margin:15px 0;}
section>figure.col img, section>a>figure.col img{margin:0}
.wrap .cols{padding:30px}
.gallery{margin-top:-15px;}
figure.col{padding-right:15px}
figure.col.flr{padding-right:30px;padding-left:15px;}
.col.flr{float:right}
.cols, .col aside p{-webkit-columns:2;-moz-columns:2;columns:2;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;position:relative;max-width:1024px;}
.cols h4, .cols h3{column-span:all;-webkit-column-span:all;}
.col{width:50%;float:left;}

/* images */
figcaption{display:none}
img{width:100%;height:auto;float:none}
header img{float:none;display:block;margin-bottom:-9.5%;margin-bottom:0;max-width:1536px;margin:auto}

/* tekst en headings */
ul{margin-left:1.2em;list-style-type:square;}
p,ul,ol{ margin-bottom:1em;-webkit-column-break-inside:avoid;page-break-inside:avoid;/* Firefox */ break-inside:avoid;/* IE 10+ */ display:inline-block;float:left;/* Safari */}
h3{line-height:50px;text-align:center;font-size:1.5em;font-weight:900;margin:auto;clear:both;margin-bottom:0px}
h3 a{background:none;text-shadow:none;cursor:alias}
body{counter-reset:item;}
h3::before{counter-increment:item;content:"" counter(item) ".";font-weight:100;font-size:0.9em;padding-right:10px;color:rgba(0,0,0,0.4);}
h4{font-size:1em}
em{font-style:Italic;font-weight:100}
.tar{text-align:right}
.intro strong{font-weight:100}

/* links */
a{color:inherit;text-decoration:none;
	background-image:linear-gradient(to bottom,rgba(0,0,0,0) 49%,rgba(0,0,0,.6) 49%);
	background-repeat:repeat-x;background-size:2px 2px;background-position:0 1.1em;
	text-shadow:2px 0 white,2px 0 white,-2px 0 white;}
header a, .wrap a, footer a{
 	background-image:linear-gradient(to bottom,rgba(255,255,255,0) 49%,rgba(255,255,255,.6) 49%);text-shadow:none;
 }

/* aside */
aside{width:50%;max-width:512px;float:left;margin:0;font-size:0.8em;line-height:1.5em;}
aside p, aside h4{width:50%;max-width:256px;float:left;padding-left:20px;padding-right:20px}
aside img{width:50%;max-width:256px;display:block;float:left;margin:0;margin-bottom:15px;}
aside.col {width:50%;margin-left:0;padding: 15px}

.clr{clear:both}
aside.imgs a figure img{padding:0px 15px;}
aside.imgs a:last-child figure img{margin-left:-15px}
aside.flr{float:right;}
aside.flr img{float:right}
aside.flr p, aside.flr h4{padding-left:15px;padding-right:25px;text-align:right}

/* gallery */
.gallery{width:100%;max-width:1024px;overflow:hidden;margin:auto;padding:7px 22px;}
.gallery img{height:auto;float:left;padding:8px;}
.gallery img, aside.imgs img{background:white !important}
img.p100{width:100% !important;}
img.p25{width:25% !important;}
img.p50{width:50% !important;}
img.p66{width:66.66666% !important;}
img.p33{width:33.33333% !important;}

/* video */
.video {display:block;position:relative;clear:both;margin-bottom:15px}
.video a{display: block;width:100%;height:100%;}
.video img{float:none !important;width:100%;height:auto;max-width:100%;margin-bottom:0}
.video a::after {content:" "; clear:both; display:block;
background-image: url(/graph/play-white.svg); background-size: 102px 102px; background-position: center;background-repeat: no-repeat; width: 100%; height: 100%; position: absolute; z-index: 50;left:0;top:0;}


/* reference */
.reference {display:none;position:absolute;left:50%;margin-left:512px;padding-left:30px;width:220px;font-size:0.8em;line-height:1.5em;margin-top:50%;}
.reference.top{margin-top:30px}
.reference.bottom{margin-top:100%}
.reference.left{padding-right:30px;padding-left:0;margin-left:-732px;text-align:right}
.reference img{display:block;margin:10px 0}

/* share */
#share{font-size:0.8em;clear:both;width:100%;max-width:1024px;margin:auto;text-align:right;padding:50px 30px 15px 30px;min-height:92px}
#share div{float:left}
#share, #share a{color:gray}
#share a{background:none;text-decoration:underline;}

/* footer */
.wrap, footer{margin:0;height:auto;width:100%;background:maroon;color:white;max-width:none;clear:both}
footer{padding:30px 0;font-size:0.8em;line-height:1.4em;}
footer p{display:block;margin-bottom:0.5em}
footer::after {content:" ";clear:both;display:block;}
#infooter{width:100%;max-width:1024px;margin:auto}
#infooter div{width:50%;float:left;padding:5px 30px}
#infooter p{width:90%}
#infooter a{white-space:nowrap;}
#infooter h4, #tags h4{clear: left;}
#tags p{width:100%}







      aside.fullcol{padding: 15px 30px;padding-right:15px;margin-left:0;margin-right:0}
      aside.fullcol2{padding:15px 30px;padding-left:15px}
      aside.fullcol img, aside.fullcol p, aside.fullcol  h4{width:100%;max-width:1000px;float:none;padding:0}

      .fullwrap{margin:15px 0;clear: both}
      @media screen and (min-width: 1025px) {
         .fullwrap{width:100vw;left:calc( (1024px - 100vw) / 2);position:relative;}
         html,body{overflow-x:hidden}
       }

      .fitwrap{max-width:1024px;width:100%;padding:15px 30px;}
      .fitwrap::after {content:" ";clear:both;display:block;}
      @media screen and (max-width: 736px){
          .fitwrap{padding:15px 0; }
          .m-hide{display:none}
      }

       .w20p{padding-bottom:0 !important;}
       .w80p{width:100%;padding-top:0 !important}
      @media screen and (min-width: 1024px) {
         .w20p {width: 20% !important;clear:both;text-align:right}
         .w80p{width:80%}
      }

      .pt0{padding-top:0 !important}
      .pb0{padding-bottom:0 !important}
	  .pr0{padding-right:0 !important}
      .pr30{padding-right:30px}
      .pt30{padding-top:30px}
      .mt30{margin-top:30px}
      .mt20 {margin-top:20px}
      .pt20 {padding-top:20px}
      .pb30 {padding-bottom:30px}
       @media screen and (min-width: 640px) {
         .mb15{margin-bottom:15px}
      }


#taal{position:absolute;width:170px;overflow:hidden;text-align:center; right: -65px;top:50%;margin-top:-20px;height:40px;text-decoration:none;line-height:40px;padding:0 15px;background:rgba(0,0,0,0.7);color:white !important;font-size:16px;transform: rotate(90deg);-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);  -ms-transform: rotate(90deg);z-index:400;display:none;white-space:nowrap}



/* MEDIA */
@media screen and (max-width:961px) {
	body{font-size:18px;}
	aside:not(.fullcol):not(.keep), aside.flr:not(.fullcol) {float:none;clear:both;margin:auto;padding-top:15px;width:80%}
	aside.col{clear:none;}
    xaside.col img{width:256px}
    aside.col.fullcol img{width:100%}
	xaside.col p, xaside.col h4{clear:both;width:90%;max-width:512px;padding-left:0}
	aside.fullcol{padding-left: 15px;padding-right: 15px;}
	aside.imgs{width:90%;text-align:center;}
	aside.imgs img{max-width:50%;display:inline-block;}
	#infooter a{white-space:normal;}
	.medium-cols, .medium-cols.flr{width:100%;padding-left:30px;padding-bottom:0;-webkit-columns:2;-moz-columns:2;columns:2;-webkit-column-gap:30px;-moz-column-gap:30px;column-gap:30px;position:relative;max-width:1024px;}
}
@media screen and (max-width:667px) {
	#top{font-size:0.9em}
	.col{width:100%;}
	.cols, .medium-cols,  .medium-cols.flr{-webkit-columns:1;-moz-columns:1;columns:1;}
	.cols, .col, .col.flr, .col.fullcol, .col.fullcol2 {padding: 15px 30px;float:none}
	aside.fullcol,aside.flr,aside.keep{float:none;clear:both;margin:auto;padding-top:15px;width:80%}

	xaside.col img, aside.col.fullcol img{width:256px}
	.intro .cols{padding-bottom:30px}
	figure.col{padding-left:30px !important;padding-right:30px !important}
	aside.col{width:100%;float:none;clear:both;margin:auto !important;padding-top:30px;}
	aside.col p, aside.col h4{clear:none;width:50%;padding-left:20px}
	


	#infooter div{width:100%;}
	#share {text-align:center;min-height:119px}
	#share div{float:none}
}


@media screen and (min-width:512px) and (max-width:667px)  {
	aside.col  {padding:15px 0 !important;clear:none;}
	aside.fullcol img, aside.fullcol p, aside.fullcol h4{float:left;padding-right:15px;padding-left:5px;background:none !important}
	aside.noimg{clear:both;padding: 15px 30px !important}
	aside.noimg.fullcol h4,aside.noimg.fullcol p{float:none;width:100%;margin:auto !important}
}

@media screen and (min-width: 668px) and (max-width: 961px) {
          .cols.medium-col{width:50%;-webkit-columns:1;-moz-columns:1;columns:1;float:left}
          .medium-pt20{padding-top:20px !important}
}

@media screen and (max-width:512px) {
	#top em{display:none}
	figure.col{padding-left:0 !important;padding-right:0 !important}
	
	aside, aside.col{float:none;width:70%;width:85%;margin:auto !important;padding-top:0;}
	aside p, aside h4, aside.col p, aside.col h4, aside.flr p, aside.flr h4{width:100%;padding:0;text-align:center;clear:none;max-width:none;line-height:inherit !important}
	aside img, aside.flr img{float:none;width:256px;margin:auto;margin-bottom:15px}
	aside h4{line-height:40px;}

	.meta{margin-top:-40px !important}
}
@media screen and (min-width:1280px) {
	body{font-size:19px}
	aside{margin-left:-100px;}
	aside.flr{margin-left:0;margin-right:-100px}
	aside:not(.keep) p, aside:not(.keep) h4{width:326px;}
    aside.col p, aside.col h4{width:50%}
    aside.fullcol p, aside.fullcol h4{width:100%}
	figure.col img{width:512px}
	figure.col{padding:0;margin-left:-15px}
	figure.col.flr{margin-left:0}
	aside.imgs{width:55%;max-width:none}
	aside.imgs img{padding:0;margin-left:15px}
	#share{padding-right:0}
}
@media screen and (min-width:1480px) {
	h1{font-size:170px}
	h2{font-size:62px}
	.reference {display:block}
	#top{font-size:1.2em}
}

@media print {
	div,aside{clear:both !important;width:100% !important}
	p,figure,img,ul,blockquote,aside,header {page-break-inside: avoid;}
}


/* HOME */
.item{display:block;position:relative;width:301px;height: 250px !important;color:white;text-align:center;overflow: hidden;float:left;margin:15px;font-size:36px;line-height: 23px; display:block;background:gray;text-shadow:none}
.item img{height:180px;}

.item.large{width:100%;max-width:964px;font-size:72px;float:none;height: 350px !important;margin:auto}
.item.large em{padding:0 22px;font-size: 24px;display:table}
.item.large em i{font-style: normal;display: table-cell;vertical-align: middle;height: 100%;}
.item.large span.img{height:280px;width:100%;display:block;background-repeat: no-repeat;background-position: center;background-size: cover;}
.item.large div{height:280px;padding:10px 40px}

.item div{position: absolute;height:180px;top:0px;left:0;padding:10px;width:100%;line-height:normal;
background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 150%);color:white;display: table;}
.item.nobg div{background:none}

.item div>strong{display: table-cell; width:100%;height:100%;text-shadow: 0 0 10px rgba(0,0,0,0.5);vertical-align: middle; text-align: center;font-weight:500}
.item div>strong>span, .item.ad strong span{background-image:linear-gradient(to bottom,rgba(255,255,255,0) 49%,rgba(255,255,255,1) 49%);background-repeat:repeat-x;background-size:2px 2px;background-position:0 1.14em;}

.item.plus1 strong{font-size:1.1em}
.item.plus2 strong{font-size:1.2em}
.item.min1  strong{font-size:0.9em}
.item.min2  strong{font-size:0.8em}

.item.zwart strong span{background:black;text-shadow:none;padding:0 10px}

.item.photography{background:#ffe300;color:#233141;}

.item em{display: block;width:100%;height:70px;padding:10px 25px 13px 25px;background:none; position: absolute;bottom:0;left:0;font-style: normal;font-size:18px;}

.item.krap em{padding-left:10px;padding-right:10px;font-size:16px}

.item time{position: absolute;top:0;right:0;padding:7px 11px;font-size:14px;width:100%;text-align:right;text-shadow:0 0 10px black;color:white}

.item.ad {font-size:20px;background:gray;}
.item.ad p {line-height:30px;padding:30px;margin:0;width: 100%;}
.item.ad strong{display:block;font-weight:500;}
.item.ad strong span{background-position:0 21px;}
.item.ad.even{display:none} .item.ad.odd{display:block}

#itemwrap{width:100%;max-width:994px;padding:15px 0;margin:auto;position: relative;}

#home header{color:black;width:100%;max-width:1024px;padding:30px;position: relative;}
#home header h1, #home header h2 {font-size: 1.1em;display:inline;top:0}
#home header h1{letter-spacing: 1px; font-weight: bold; font-size: 1.2em; line-height: 1.2em; padding-right:8px;
}
#home header nav{float: right;}
#home nav a:before{content:" | ";background:white}
#home nav a:first-child:before{display:none}
#home #taal{display:block;text-shadow:none;top: 262px;background:black}

#home header a, #home.filtered header h1 a, #uplink a{text-decoration: none;color:inherit;text-decoration:none; background-image:linear-gradient(to bottom,rgba(0,0,0,0) 49%,rgba(0,0,0,.6) 49%); background-repeat:repeat-x;background-size:2px 2px;background-position:0 1.1em; text-shadow:2px 0 white,2px 0 white,-2px 0 white;}
#home header h1 a{background:none}

#itemwrap h4{clear: both;width:100%;max-width:1024px;margin:0;margin:auto;padding-top:40px;text-align:center;font-size: 24px}
#itemwrap h4 a{font-weight:100;font-size:0.8em}
.filtered #itemwrap h4{padding-top:0px;padding-bottom:20px;}

#home hr{visibility: hidden;clear:both;margin-bottom:30px}
#home footer{background:#005c69;margin-top:15px}
#home footer strong{display:inline-block;width:80px}

#home #tags{font-size:0.85em;opacity:0.8;text-align:center;width:90%;max-width:768px;margin:auto}
#home #tags p a:after{content:" | " ;padding:0 5px;background:white;color:gray}
#home #tags p a:last-child:after{display:none}

#uplink{clear: both;max-width:1024px;text-align:right;margin:auto;padding-right:30px;margin-top:15px;opacity: 0.8}


@media screen and (min-width: 1280px) {
  #home #itemwrap, #home header, #home .item.large, #home #uplink, #home footer>div{left:-75px;position: relative;}
  #home #tags{position:absolute;left:calc(50% + 435px);top:340px;display:block;width:120px;}
  #home.filtered #tags{top:165px}
  #home #tags a{float:left;clear: both;background-position: 0 1.3em}
  #home #tags{padding:0;display:block;text-align:left}
  #home #tags a:after{display:none}
  #home #tagslink{display:none}
  #itemwrap{min-height:800px}
}

@media screen and (max-width: 1000px) {
  #home #itemwrap{max-width:662px;}
  #home header{font-size: 0.9em}
  .item.ad.even{display:block}  .item.ad.odd{display:none}
}

@media screen and (max-width: 767px) {
    #home header h2{display:none !important}
}
@media screen and (max-width: 1080px) {
   #home #taal{display:none !important}
}

@media screen and (max-width: 661px) {
  #home #itemwrap{max-width:331px}
  #home .item.large{font-size:56px;}
     .item.ad.even{display:none}  .item.ad.odd{display:none}
}

/* POSTERSALE */
footer {margin-bottom:98px}
#sale {position:absolute;margin-top:-98px;text-align:center;width:100%;padding:20px;color:gray;font-size:90%;min-height:92px}
#sale p{display:block;float:none;margin-bottom:10px}
#sale a{background:none;text-shadow:none;font-weight:normal;border:1px solid gray;padding: 3px 8px 1px 8px;display:inline-block;border-radius:5px;letter-spacing:1px}
#sale span{font-size:90%}
@media screen and (min-width:460px) {
	#sale em{display:block}
}
@media screen and (min-width:1000px) {
	#sale p{display:inline-block;margin-bottom:0}
	#sale a{top:-11px;position: relative;margin-left:20px;}
}