body.tijdschrift            { background-color: #e8e8e8; }

/* GRID AND ARTICLES */
.grid-wrapper				{ display: flex; display: -ms-flex; flex-flow: row wrap; -ms-flex-flow: row wrap; width: CALC(100% - 24px); padding: 0 0 0 0; margin: 0px 12px 0px; }
.grid-article				{ position: relative; background: #FFF; height: 580px; /*min-width: 300px; max-width: 400px; */
                              margin: 0 12px 20px 12px; border: 1px solid #DDD; border-radius: 1px;
                              cursor: pointer;
                              overflow: hidden;
                              display: flex; flex-direction: column;
                              /* width: CALC(16.66% - 26px); */
                              width: CALC(100%)
                            }
.grid-article:hover         {
                              -webkit-box-shadow: 1px 2px 8px 0px rgba(90,86,77,0.23);
                              -moz-box-shadow: 1px 2px 8px 0px rgba(90,86,77,0.23);
                              box-shadow: 1px 2px 8px 0px rgba(90,86,77,0.23);
                            }

.grid-article-data .grid-article-locked   { background: #ab7942; color: #FFF; padding: 5px; width: 22px; height: 22px; text-align: center; }
.grid-article-data .grid-article-unlocked   { background: #edebe7; color: #000; padding: 5px; width: 22px; height: 22px; text-align: center; border-left: 1px solid #CCC; }


/* ARTICLES SIZES IN GRID */

/* @media (min-width: 2000px) { 
	.grid-article	{ width: CALC(16.66% - 26px); } 
}
@media (max-width: 2000px) { 
	.grid-article	{ width: CALC(20% - 26px); } 
} */
@media (min-width: 400px)  { .grid-article	{ width: CALC(100% - 14px); margin: 0 6px 20px 6px; }	}	
@media (min-width: 600px)  { .grid-article	{ width: CALC(100% - 26px); margin: 0 12px 20px 12px; } }
@media (min-width: 768px)  { .grid-article	{ width: CALC(50% - 26px); }  .news-bar {width: CALC(100% - 50px);} }
@media (min-width: 1200px) { .grid-article	{ width: CALC(33% - 26px); }  .news-bar {width: CALC(100% - 62px); margin: 25px 25px 0px;} }
@media (min-width: 1400px) { .grid-article	{ width: CALC(25% - 26px); } }


/* ARTICLE GRID */
.grid-article-figure              { margin-bottom: 0; overflow: hidden; flex-shrink: 0; }
  .grid-article-figure img          { width: 100% }

.grid-article-content             { position: relative; padding: 20px; flex-grow: 1; overflow-y: hidden; }
.grid-article-rubriek             { font-size: 18px; line-height: 24px; }
.grid-article-header1             { font-size: 22px; line-height: 24px; }
.grid-article-header2             { font-size: 20px; line-height: 24px; }
.grid-article-author              { font-size: 16px; line-height: 20px; }
.grid-article-snippet             { font-size: 0.9em; line-height: 1.4rem; }

.grid-article-snippet-gradient    { position: absolute; bottom: 0; left: 0; width: 100%; height:40px; z-index:5; background: rgb(255,255,255); background: linear-gradient(0deg, rgba(255,255,255,1) 27%, rgba(255,255,255,0) 100%); }
.grid-article-metadata            { display: flex; padding: 10px 12px 10px 15px; justify-content: start; font-size: 0.7rem; line-height: 0.8rem; border-top: 1px solid #DDD; color: #666; }
.grid-article-date                { background: url('/images/icon_calendar.png') left center no-repeat; padding-left: 17px; padding-right: 10px; }
.grid-article-readingtime         { background: url('/images/icon_stopwatch.png') left center no-repeat; padding-left: 17px; padding-right: 10px; }
.grid-article-edition             { background: url('/images/icon_note.png') left center no-repeat; padding-left: 17px; padding-right: 10px; flex-grow: 1; }
.grid-article-lock                { color: #ff003b; /* background: url('/images/icon_lock.png') center center no-repeat; */ padding-left: 17px; }
.grid-article-access.abonnee      { font-size: 13px; color: #ff003b; }
.grid-article-access.gratis       { font-size: 13px; color: #1aa34b; }

/* TEST KLEUREN */
/* .grid-article-content             { background-color: rgb(152, 240, 140); }
.grid-article-header1             { background: rgb(253, 154, 42); }
.grid-article-header2             { background: rgb(111, 233, 217);}
.grid-article-snippet             { background: rgb(229, 231, 67); }
.grid-article-metadata            { background: rgb(135, 179, 236); } */