/*
 * Place your custom styles here.
 */

 /* general */
.text-primary {color:#555555;}

a {
    color: #ab8fff; // primary color
}

a:focus, a:hover {
    color: #9f80ff; // darker primary color
}

.nopadding {
   padding: 0px !important;
   margin: 0 !important;
}

.fullwidth {
	width: 100%;
}
img.fullwidth {
	background:white;
	border-right:2px solid black;
}

.field--name-field-fotozelf img { /* more specific selector here? or do we want this across the whole site? */
	-webkit-filter: contrast(115%) brightness(105%) sepia(20%) saturate(110%) grayscale(100%); /* Chrome, Safari, Opera */
	filter: contrast(115%) brightness(105%) sepia(20%) saturate(110%) grayscale(100%); /* mooiere zwart-wit filter */
}
img:hover {
	-webkit-filter: none; /* Chrome, Safari, Opera */
	filter: none;
}

.img4to3 { /* img4to3 scales image to fit a 4 by 3 container */
	height: 0;
	padding-bottom: 75%;
	position: relative;
	overflow: hidden;
}
.img4to3 img {
	display: inline-block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
        position: absolute;
        left: 50%; /* This sets left top corner of the image to the center of the block... */
        top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
        -webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
}

.dont-break-out { /* taken from css-tricks.com */
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever
	word-break: break-all;
	Instead use this non-standard one: */
	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

h2.imgtitle a {
	color:white;
}

h5.imgtitle a {
	color:white;
}

.title h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: bold;
}

.title a {
  color: #333;
}

.author a {
  color: #333;
  font-weight: bold;
}

.author a {
  /*font-weight: bold;*/
}

.textaligncenter {
	text-align: center;
}

/* branding + navbar */
.navbar {
	background-color: black;
	padding: 0;
	border: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.navbarli {
	font-weight: bold;
}

.navbarul {
	width:100%;
}

.navbar-default .navbar-nav > li > a {
	color: white;
}

.navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #ab8fff;
}

.medianav {
	position: absolute;
	bottom: 0;
	right: 0;
}
#block-taalkeuze ul {
    margin: 0px;
}

@media all and (max-width: 768px) {
    .medianav {
        position: relative;
    }
}

.region-branding {
    margin-right: -1px;
}

/*.page-header {
	background: rgba(0, 0, 0, 1);
	transform: skewX(-12deg);
	margin-left: 30%;
	margin-right: 30%;
	padding-top: 1px;
	padding-bottom: 0px;
}

.page-header h2 {
	margin-top: 10px;
	transform: skewX(12deg);
	vertical-align: bottom;
	color: white;
}*/

/* Hero box */
.image {
   position: relative;
   width: 100%; /* for IE 6 */
}

.imgtitle {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding:10px;
   margin:0px;
}

.image div img {
	transition: all .15s;
}

img {
	filter: contrast(115%) brightness(105%) sepia(20%) saturate(110%) grayscale(100%); /* Mooiere Zwart-Wit Filter */
	-webkit-filter: contrast(115%) brightness(105%) sepia(20%) saturate(110%) grayscale(100%);
}

.image-zoom {
	transform: scale(1.1);
}

.fivepadding {
   padding: 5px !important;
   margin: 0 !important;
}

h2 span {
	color: white;
	letter-spacing: -1px;
	background: rgb(0, 0, 0); /* fallback color */
	/*background: rgba(0, 0, 0, 0.7);*/
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 15%, rgba(0,0,0,0.7) 15%, rgba(0,0,0,0.7) 89%, rgba(0,0,0,0) 89%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0.7) 15%,rgba(0,0,0,0.7) 89%,rgba(0,0,0,0) 89%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0.7) 15%,rgba(0,0,0,0.7) 89%,rgba(0,0,0,0) 89%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
	padding-left: 4px;
	padding-right: 4px;
	padding-top: 4px;
	box-decoration-break: clone;
}

h4 a {
	color: white;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.7);
	padding-left: 4px;
	display: block;
	border-left: 3px solid #ab8fff;/*rgba(255, 255, 255, 0.4);*/
}

h4 a:hover {
	color: #ab8fff;
}

/* LatestEditionArticles */
h5 span {
	color: white;
	letter-spacing: -1px;
	background: rgb(0, 0, 0); /* fallback color */
	background: rgba(0, 0, 0, 0.6);
}

/* Frontpage content */
ul.nomarkup {
	list-style-type: none;
	padding: 0;
}

div.teaserartikel {
	padding: 5px;
}
div.teaserartikel img {
	padding: 5px;
}

div.paddingbottom {
	padding-bottom:10px;
}

.footer-container > * {
	color:white;
}

.hidden {
	visibility: hidden;
}

#block-currentsponsors-2 {
    padding-top: 20px;
}

/* Pagination */

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    color: #9f80ff;
}

.pagination>li>a, .pagination>li>span {
	color: #ab8fff;
}


.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #ab8fff;
    border-color: #ab8fff;
    color: white;
}



/* Artikel */

.field--name-field-inleiding p {
    padding-top: 1em;
    font-family: “Open Sans”, “Segoe UI”, Arial, sans-serif;
    font-size: 1em;
    font-weight: 600;
}
.field--name-field-inleiding p:first-child:first-letter {
    font-family: Georgia, Helvetica, Serif;
    font-size: 3em;
    line-height: 0.8em;
    font-weight: normal;
    float: left;
    padding-right: 0.1em;
    color: #ab8fff;
    margin-top: 0.1em;
}
.field--name-field-inhoud p {
    font-family: Georgia;
}
.field--name-field-inhoud h3 {
    font-family: Rubrik, Arial, sans-serif;
    font-weight: normal;
    font-size: 1.4em;
    color: #ab8fff;
}
h1.page-header span {
    font-family: Rubrik, Arial, sans-serif;
    font-weight: normal;
    font-size: 34px;
}

.mainpic img {
    -webkit-filter: none; /* Chrome, Safari, Opera */
    filter: none;
}
.field--name-field-ondertitel p {
    font-family: Rubrik, Arial, sans-serif;
    font-size: 1.6em;
    color: #686766;
}

.view-redactielid-mijn-artikels {
display: inline;
position: absolute;
margin-top: 30%;
margin-left: 52%;
z-index: 10;
}
.kopartikels {
margin-bottom: 15px;
}

.workbench-moderation-entity-moderation-form{
  display: none;
}




//.views-field-field-dwarsnr {
  position: absolute;
  margin-top: 34.5em;
  text-align: right;
  width: 94%;
}//
.js-quickedit-page-title {
    border-bottom: none;
}
.page-header {
    border-bottom: none;
}
.comment-forbidden {
    visibility: hidden;
}
//h1.page-header span, .js-quickedit-page-title .page-header span {
    font-family: Rubik, Arial, sans-serif !important;
}//
.field--name-field-ondertitel p {
    //font-family: Rubik, Arial, sans-serif !important;//
    font-size: 1em;
    color: #686766;
    margin-top: -0.8em;
    margin-bottom: 0.7em
}
.field--name-field-ondertitel {
   /*font-family: Rubik, Arial, sans-serif !important;*/
   font-size: 1.6em;
   color: #686766;
   margin-top: -0.8em;
   margin-bottom: 0.7em;
}
.field--name-field-ondertitel p {
  font-size: inherit !important; /*correctie, want stond als 1.6em in 
extern stylesheet, maar verkeerd want er zijn ondertitels met 'p' en zonder 
'p'*/
}
​ .mainpic {
    margin-top: -0.7em;
}
.field--name-field-inleiding {
	text-align: justify;
	width: 94.5%;
        font-size: 1.05em;
        margin-bottom: 3em;
        line-height: 1.5em;
}
.field--name-field-inleiding p:first-child::first-letter {
	padding-right: 0.15em!important;
	padding-bottom: -0.03em!important;
}
.field--name-field-inhoud {
	text-align: justify;
	width: 94.5%;
        font-size: 1.05em;
        line-height: 1.7em;
}
.field--name-field-inhoud blockquote {
	font-style: italic;
	text-align: left;
	margin-left: 2.5em;
}
*/// .field--name-field-inhoud blockquote:before { *///
	content: "\201C";
 	font-family: Georgia, serif;
 	font-size: 60px;
	font-weight: bold;
	color: #999;
	position: relative;
        margin-left: -0.7em;
}
.field--name-field-inhoud img {
	filter: none;
}
.field--name-field-inhoud li {
	font-family: Georgia;
}
.rtecenter {
	text-align: center;
}
.floatleft {
	float: left;
	margin-right: 3%;
}
.floatright {
	float: right;
	margin-left: 3%;
}
.interviewee {
	font-weight: bold;
	margin-right: 1%;
	font-variant: small-caps;
	letter-spacing: 0.1em;
}
.kleinkapitaal {
	font-variant: small-caps;
}
​ .field--name-field-tags .field--label {
	margin: 4px;
	visible: hidden;
}
​ ​ .field--items.field--item {
  float: left;
  margin-right: 0.3em !important;
}
​ ​ .field--name-field-tags .field--item:first-of-type {
	float: left;
	margin-left: 0%;
}
.field--name-field-tags .field--item {
	float: left;
	margin-top: 4em;
	margin-left: 3.5%;
	padding: 2px 0px 2px 0px;
	border-style: solid;
	border-width: 3px 0px 3px 0px;
	border-color: #ab8fff;
}
​ .field--name-field-tags .field--item a {
	font-weight: bold;
	text-align: center;
}
​ .field--name-field-tags .field--item a:hover {
	color: #fff;
	background-color: #ab8fff;
	text-decoration: none;
	padding: 4px 0px 4px 0px;
	font-weight: bold;
	transition: color .2s ease;
}
​ .field--name-field-tags {
	margin-bottom: 15%;
}
figcaption {
	font-size: 0.8em;
}
​ .kantquote {
 font-size: 1.3em;
 width: 40%;
 font-family: Georgia;
 line-height: 1.4em;
}
.kantquote:before {
 content:"\201C";
}
.kantquote:after {
 content:"\201D";
}
.kantquote:nth-child(even) {
 float: left;
 margin: 1em 1.5em 1em -3em;
 text-align: right;
}
.kantquote:nth-child(odd) {
 float: right;
 margin: 1em 0em 1em 1.5em;
 text-align: left;
}
​ span.infocardlink {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /*stippellijn onder de te verklaren 
tekst*/
}
span.infocardtext {
 visibility: hidden;
 position: absolute;
 max-width: 40%;
 background-color: #555;
 color: #fff;
 text-align: center;
 padding: 0.2em 0.5em 0.2em 0.5em;
 border-radius: 0.4em;
 z-index: 1;
 margin-left: 1em;
}
span.infocardtext::after {
 content: "";
 position: absolute;
 top: 50%;
 right: 100%;
 margin-top: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: transparent #555 transparent transparent;
}
span.infocardlink:hover + span.infocardtext {
 visibility: visible;
}
​ ------------------------------------------------------------ 
------------------------------------------------------------ ​ .js-comment {
       margin-bottom: 3em;
}
.indented {
       margin-left: 5%;
}