/* -- paragraaf 

 * ----------------------------------------------------------------- */
.field--name-field-elementen .paragraph {padding: 4vh 2vw 2vh 2vw;}
.paragraph img {max-width:100%;height: auto;}

.paragraph--type--hoofding-titel {margin: 20px 0;}

/* -- paragraaf einde -- */

/* -- achtergrond kleur 
* ----------------------------------------------------------------- */
.paragraph {
  background-color: rgba(0,0,0,0);
  padding: 1vw;
}
.paragraph.paars {
  background-color: rgba(247, 91, 244, 0.1);
}
.paragraph.groen {
  background-color: rgba(14,160,14, 0.1);
}
.paragraph.blauw {
  background-color: rgba(12, 90, 240, 0.1);
}
.paragraph.oranje {
  background-color: rgba(238, 163, 117, 0.1);
}
.paragraph.grijs {
  background-color: rgba(0, 0, 0, 0.08);
}
.paragraph.paragraph--type--iframe {padding: 0;}

 

/* -- afbeelding + tekst 

 * ----------------------------------------------------------------- */

.paragraph--type--afbeelding-tekst {

  display: grid;

  grid-template-columns: 100%;

  grid-column-gap: 5px;

}

/* Responsive layout */

@media (min-width: 576px) {

	.paragraph--type--afbeelding-tekst {grid-column-gap: 10px;}

	.paragraph--type--afbeelding-tekst.breedte--30 {grid-template-columns: 30% 70%;}	

	.paragraph--type--afbeelding-tekst.breedte--40 {grid-template-columns: 40% 60%;}

	.paragraph--type--afbeelding-tekst.breedte--50 {grid-template-columns: 50% 50%;}

	.paragraph--type--afbeelding-tekst.breedte--60 {grid-template-columns: 60% 40%;}

}

/* -- afbeelding + tekst einde --*/





/* -- tekst + afbeelding 

 * ----------------------------------------------------------------- */

.paragraph--type--tekst-afbeelding {

  display: grid;

  grid-template-columns: 100%;

  grid-column-gap: 5px;

}

/* Responsive layout */

@media (min-width: 576px) {

	.paragraph--type--tekst-afbeelding {grid-column-gap: 10px;}

	.paragraph--type--tekst-afbeelding.breedte--30 {grid-template-columns: 70% 30%;}	

	.paragraph--type--tekst-afbeelding.breedte--40 {grid-template-columns: 60% 40%;}

	.paragraph--type--tekst-afbeelding.breedte--50 {grid-template-columns: 50% 50%;}

	.paragraph--type--tekst-afbeelding.breedte--60 {grid-template-columns: 40% 60%;}

}

/* -- tekst + afbeelding einde -- */





/* -- afbeelding 

 * ----------------------------------------------------------------- */

.paragraph--type--afbeelding{

	margin: auto;

	float: none;

	width:100%;

}

@media (min-width: 576px) {

	.paragraph--type--afbeelding.breedte--100 {width:100%;}

	.paragraph--type--afbeelding.breedte--90 {width:90%;}

	.paragraph--type--afbeelding.breedte--80 {width:80%;}

	.paragraph--type--afbeelding.breedte--70 {width:70%;}

	.paragraph--type--afbeelding.breedte--60 {width:60%;}

	.paragraph--type--afbeelding.breedte--50 {width:50%;}

}

/* -- afbeelding einde -- */





/* -- knoppen 

 * ----------------------------------------------------------------- */

.paragraph--type--link-knop a, 

.paragraph--type--telefoonnummer-knop a,

.paragraph--type--email-knop a {

	width: 100%;

	display: block;

	padding: 20px;

	margin: 50px auto;

	font-size: 120%;

	text-decoration: none;

}



/*breedte*/

@media (min-width: 576px) {

	.paragraph--type--link-knop.breedte--100 a,

	.paragraph--type--email-knop.breedte--100 a,

	.paragraph--type--telefoonnummer-knop.breedte--100 a {width:100%;}

	.paragraph--type--link-knop.breedte--90 a,

	.paragraph--type--email-knop.breedte--90 a,

	.paragraph--type--telefoonnummer-knop.breedte--90 a {width:90%;}

	.paragraph--type--link-knop.breedte--80 a,

	.paragraph--type--email-knop.breedte--80 a,

	.paragraph--type--telefoonnummer-knop.breedte--80 a {width:80%;}

	.paragraph--type--link-knop.breedte--70 a,

	.paragraph--type--email-knop.breedte--70 a,

	.paragraph--type--telefoonnummer-knop.breedte--70 a {width:70%;}

	.paragraph--type--link-knop.breedte--60 a,

	.paragraph--type--email-knop.breedte--60 a,

	.paragraph--type--telefoonnummer-knop.breedte--60 a {width:60%;}

	.paragraph--type--link-knop.breedte--50 a,

	.paragraph--type--email-knop.breedte--50 a,

	.paragraph--type--telefoonnummer-knop.breedte--50 a {width:50%;}

}

/* -- knoppen einde -- */



/* quote 

 * ----------------------------------------------------------------- */

blockquote.quote {
  border-left: 3px solid #276921;
  color: #1a1a1a;
  font-family: 'Aref Ruqaa', serif;
  margin: 1.1em 1em;
  padding: 1em 2em;
  position: relative;
  transition: 0.2s border ease-in-out;
  z-index: 0;
}
blockquote.quote p {
  font-family: 'Aref Ruqaa', serif;
  font-size: 1.25em;
  font-style: italic;
  line-height: 1.8em;  
}
blockquote.quote:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  height: 2em;
  background-color: #fff;
  width: 5px;
  margin-top: -1em;
}
blockquote.quote:after {
  content: '\201C';
  position: absolute;
  top: 50%;
  left: -0.5em;
  color: #276921;
  font: 3em/1em 'PT Sans', sans-serif;
  text-align: center;
  text-indent: -3px;
  width: 1em;
  margin-top: -0.28em;
  transition: 0.2s all ease-in-out, 0.4s transform ease-in-out;
}

blockquote.quote:active:after {
  transform: rotateY(360deg);
}
blockquote.quote footer {
  display: block;
  font-size: 0.75em;
  line-height: 1.8em;
  margin-top: 1em;
}


/* -- quote einde -- */





/* -- Galerie css 

 * ----------------------------------------------------------------- */

.field--name-field-galerie {

  display: flex;

  flex-wrap: wrap;

  padding: 0 4px;

}

/* Create four equal columns that sits next to each other */

.field--name-field-galerie .field__item {

  flex: 25%;

  max-width: 25%;

  padding: 0 4px;

}

.field--name-field-galerie .field__item img {

  vertical-align: middle;
  margin-top: 0;
  margin-bottom: 6px;

}

/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {

  .field--name-field-galerie .field__item {

    flex: 50%;

    max-width: 50%;

  }

}

/* Responsive layout - makes one column-layout */

@media (max-width: 350px) {

  .field--name-field-galerie .field__item {

    flex: 100%;

    max-width: 100%;

  }

}

/* -- Galerie css einde -- */



/* -- tekst op afbeelding css 

 * ----------------------------------------------------------------- */

.paragraph--type--tekst-op-afbeelding {

    position: relative; 

    margin: auto;

	float: none;

	width:100%;

	overflow: hidden;   

}

.paragraph--type--tekst-op-afbeelding .field--type-image {

    margin: 0;

    width: 100%;

}

.paragraph--type--tekst-op-afbeelding .field--type-image img {

	object-fit: cover;

	width: 100%;

	height: 100%;

}

.text-block {

    position: absolute;

    max-width: 80%;

    padding-left: 10px;

    padding-right: 10px;

    font-size: 0.8em;

}

.bg-zwart {background-color: rgba(0,0,0,0.5);color:white;}

.bg-wit {background-color: rgba(255,255,255,0.5);color:black;}

.bg-transparant-wit {background-color: rgba(0,0,0,0);color:white;}

.bg-transparant-zwart {background-color: rgba(0,0,0,0);color:black;}



@media (max-width: 575px) {

  .text-block.center,

  .text-block.top-left,

  .text-block.top-right,

  .text-block.bottom-left,

  .text-block.bottom-right{

    top: 10%;

    left: 10%;

  }

}

@media (min-width: 576px) {

	.text-block {

		max-width: 50%;

		padding-left: 20px;

		padding-right: 20px;

		font-size: 1em;

	}

	.text-block.center {top: 35%;left: 25%;}

	.text-block.top-left {top: 5px;left: 5px;}

	.text-block.top-right {top: 5px;right: 20px;}

	.text-block.bottom-left {bottom: 20px;left: 5px;}

	.text-block.bottom-right {bottom: 20px;right: 20px;}

	.paragraph--type--tekst-op-afbeelding.breedte--100 {width:100%;}

	.paragraph--type--tekst-op-afbeelding.breedte--90 {width:90%;}

	.paragraph--type--tekst-op-afbeelding.breedte--80 {width:80%;}

	.paragraph--type--tekst-op-afbeelding.breedte--70 {width:70%;}

	.paragraph--type--tekst-op-afbeelding.breedte--60 {width:60%;}

	.paragraph--type--tekst-op-afbeelding.breedte--50 {width:50%;}

}



 /* -- tekst op afbeelding einde -- */



 /* opsomming

  * ----------------------------------------------------------------- */

.paragraph--type--opsomming div > ul, .paragraph--type--grid-opsomming div > ul{

  list-style: none;

  padding: 0;

}



.paragraph--type--opsomming div > ul > li, .paragraph--type--grid-opsomming div > ul > li{

  padding-left: 1.8em;

  list-style: none;

  margin-bottom:1em;

  line-height: 0.9;

}

.paragraph--type--opsomming div > ul > li::before, .paragraph--type--grid-opsomming div > ul > li::before {

    font-family: "Font Awesome 5 Free";

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    line-height: 1;

    font-weight: 900;

    -webkit-font-smoothing: antialiased;

    margin-left: -1.3em; /* same as padding-left set on li */

    width: 1.3em; /* same as padding-left set on li */



}

.paragraph--type--opsomming.listtype--check div > ul > li::before, 

.paragraph--type--grid-opsomming.listtype--check div > ul > li::before {

  content: "\f00c"; /* FontAwesome Unicode */  

}

.paragraph--type--opsomming.listtype--star div > ul > li::before,

.paragraph--type--grid-opsomming.listtype--star div > ul > li::before  {

  content: "\f005"; /* FontAwesome Unicode */  

}

.paragraph--type--opsomming.listtype--Array div > ul > li::before,

.paragraph--type--grid-opsomming.listtype--Array div > ul > li::before  {

  content: "\f111"; /* FontAwesome Unicode */ 

  font-size: small;

}





.paragraph--type--opsomming div > ul > li > ul > li,

.paragraph--type--grid-opsomming div > ul > li > ul > li {

  list-style-type: circle;

}



/*uitlijning*/

.paragraph--type--opsomming .field--name-field-tekst{

  display: table;

  width: auto;

  position: relative;

  padding: 20px;

}

.paragraph--type--opsomming.alignment--center .field--name-field-tekst{

  margin: auto;

}

.paragraph--type--opsomming.alignment--right .field--name-field-tekst{

  float: right;

}



  /* -- opsomming einde -- */

 

 

 /* accordion

  * ----------------------------------------------------------------- */

 .panel {

  margin-bottom: 20px;

  background-color: #ffffff;

  border: 1px solid transparent;

  border-radius: 4px;

  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);

}

.panel-body {

  padding: 15px;

}

.panel-heading {

  padding: 10px 15px;

  border-bottom: 1px solid transparent;

  border-top-right-radius: 3px;

  border-top-left-radius: 3px;

}

.panel-heading > .dropdown .dropdown-toggle {

  color: inherit;

}

.panel-title {

  margin-top: 0;

  margin-bottom: 0;

  font-size: 16px;

  color: inherit;

}

.panel-title > a,

.panel-title > small,

.panel-title > .small,

.panel-title > small > a,

.panel-title > .small > a {

  color: inherit;

  font-weight: bold;

}

.panel-title a:hover {

  text-decoration: none;

}



.panel-heading .panel-title a:after {

    /* symbol for "opening" panels */

    font-family: "Font Awesome 5 Free";

    content: "\f107";

    float: right;        /* adjust as needed */

    color: grey;         /* adjust as needed */

}

.panel-heading .panel-title a.collapsed:after {

    /* symbol for "collapsed" panels */

    content: "\f104";    /* adjust as needed, taken from bootstrap.css */

}



.panel-footer {

  padding: 10px 15px;

  background-color: #f5f5f5;

  border-top: 1px solid #dddddd;

  border-bottom-right-radius: 3px;

  border-bottom-left-radius: 3px;

}

.panel > .list-group,

.panel > .panel-collapse > .list-group {

  margin-bottom: 0;

}

.panel > .list-group .list-group-item,

.panel > .panel-collapse > .list-group .list-group-item {

  border-width: 1px 0;

  border-radius: 0;

}

.panel > .list-group:first-child .list-group-item:first-child,

.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {

  border-top: 0;

  border-top-right-radius: 3px;

  border-top-left-radius: 3px;

}

.panel > .list-group:last-child .list-group-item:last-child,

.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {

  border-bottom: 0;

  border-bottom-right-radius: 3px;

  border-bottom-left-radius: 3px;

}

.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {

  border-top-right-radius: 0;

  border-top-left-radius: 0;

}

.panel-heading + .list-group .list-group-item:first-child {

  border-top-width: 0;

}

.list-group + .panel-footer {

  border-top-width: 0;

}

.panel > .table,

.panel > .table-responsive > .table,

.panel > .panel-collapse > .table {

  margin-bottom: 0;

}

.panel > .table caption,

.panel > .table-responsive > .table caption,

.panel > .panel-collapse > .table caption {

  padding-left: 15px;

  padding-right: 15px;

}

.panel > .table:first-child,

.panel > .table-responsive:first-child > .table:first-child {

  border-top-right-radius: 3px;

  border-top-left-radius: 3px;

}

.panel > .table:first-child > thead:first-child > tr:first-child,

.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,

.panel > .table:first-child > tbody:first-child > tr:first-child,

.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;

}

.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,

.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,

.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,

.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,

.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,

.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,

.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,

.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {

  border-top-left-radius: 3px;

}

.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,

.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,

.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,

.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,

.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,

.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,

.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,

.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {

  border-top-right-radius: 3px;

}

.panel > .table:last-child,

.panel > .table-responsive:last-child > .table:last-child {

  border-bottom-right-radius: 3px;

  border-bottom-left-radius: 3px;

}

.panel > .table:last-child > tbody:last-child > tr:last-child,

.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,

.panel > .table:last-child > tfoot:last-child > tr:last-child,

.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {

  border-bottom-left-radius: 3px;

  border-bottom-right-radius: 3px;

}

.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,

.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,

.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,

.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,

.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,

.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,

.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,

.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {

  border-bottom-left-radius: 3px;

}

.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,

.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,

.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,

.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,

.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,

.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,

.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,

.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {

  border-bottom-right-radius: 3px;

}

.panel > .panel-body + .table,

.panel > .panel-body + .table-responsive,

.panel > .table + .panel-body,

.panel > .table-responsive + .panel-body {

  border-top: 1px solid #dddddd;

}

.panel > .table > tbody:first-child > tr:first-child th,

.panel > .table > tbody:first-child > tr:first-child td {

  border-top: 0;

}

.panel > .table-bordered,

.panel > .table-responsive > .table-bordered {

  border: 0;

}

.panel > .table-bordered > thead > tr > th:first-child,

.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,

.panel > .table-bordered > tbody > tr > th:first-child,

.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,

.panel > .table-bordered > tfoot > tr > th:first-child,

.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,

.panel > .table-bordered > thead > tr > td:first-child,

.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,

.panel > .table-bordered > tbody > tr > td:first-child,

.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,

.panel > .table-bordered > tfoot > tr > td:first-child,

.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {

  border-left: 0;

}

.panel > .table-bordered > thead > tr > th:last-child,

.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,

.panel > .table-bordered > tbody > tr > th:last-child,

.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,

.panel > .table-bordered > tfoot > tr > th:last-child,

.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,

.panel > .table-bordered > thead > tr > td:last-child,

.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,

.panel > .table-bordered > tbody > tr > td:last-child,

.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,

.panel > .table-bordered > tfoot > tr > td:last-child,

.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {

  border-right: 0;

}

.panel > .table-bordered > thead > tr:first-child > td,

.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,

.panel > .table-bordered > tbody > tr:first-child > td,

.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,

.panel > .table-bordered > thead > tr:first-child > th,

.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,

.panel > .table-bordered > tbody > tr:first-child > th,

.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {

  border-bottom: 0;

}

.panel > .table-bordered > tbody > tr:last-child > td,

.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,

.panel > .table-bordered > tfoot > tr:last-child > td,

.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,

.panel > .table-bordered > tbody > tr:last-child > th,

.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,

.panel > .table-bordered > tfoot > tr:last-child > th,

.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {

  border-bottom: 0;

}

.panel > .table-responsive {

  border: 0;

  margin-bottom: 0;

}

.panel-group {

  margin-bottom: 20px;

}

.panel-group .panel {

  margin-bottom: 0;

  border-radius: 4px;

}

.panel-group .panel + .panel {

  margin-top: 5px;

}

.panel-group .panel-heading {

  border-bottom: 0;

}

.panel-group .panel-heading + .panel-collapse > .panel-body,

.panel-group .panel-heading + .panel-collapse > .list-group {

  border-top: 1px solid #dddddd;

}

.panel-group .panel-footer {

  border-top: 0;

}

.panel-group .panel-footer + .panel-collapse .panel-body {

  border-bottom: 1px solid #dddddd;

}

.panel-default {

  border-color: #dddddd;

}

.panel-default > .panel-heading {

  color: #333333;

  background-color: #f5f5f5;

  border-color: #dddddd;

}

.panel-default > .panel-heading + .panel-collapse > .panel-body {

  border-top-color: #dddddd;

}

.panel-default > .panel-heading .badge {

  color: #f5f5f5;

  background-color: #333333;

}

.panel-default > .panel-footer + .panel-collapse > .panel-body {

  border-bottom-color: #dddddd;

}

.panel-primary {

  border-color: #337ab7;

}

.panel-primary > .panel-heading {

  color: #ffffff;

  background-color: #337ab7;

  border-color: #337ab7;

}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {

  border-top-color: #337ab7;

}

.panel-primary > .panel-heading .badge {

  color: #337ab7;

  background-color: #ffffff;

}

.panel-primary > .panel-footer + .panel-collapse > .panel-body {

  border-bottom-color: #337ab7;

}

.panel-success {

  border-color: #d6e9c6;

}

.panel-success > .panel-heading {

  color: #3c763d;

  background-color: #dff0d8;

  border-color: #d6e9c6;

}

.panel-success > .panel-heading + .panel-collapse > .panel-body {

  border-top-color: #d6e9c6;

}

.panel-success > .panel-heading .badge {

  color: #dff0d8;

  background-color: #3c763d;

}

.panel-success > .panel-footer + .panel-collapse > .panel-body {

  border-bottom-color: #d6e9c6;

}

.panel-info {

  border-color: #bce8f1;

}

.panel-info > .panel-heading {

  color: #31708f;

  background-color: #d9edf7;

  border-color: #bce8f1;

}

.panel-info > .panel-heading + .panel-collapse > .panel-body {

  border-top-color: #bce8f1;

}

.panel-info > .panel-heading .badge {

  color: #d9edf7;

  background-color: #31708f;

}

.panel-info > .panel-footer + .panel-collapse > .panel-body {

  border-bottom-color: #bce8f1;

}

.panel-warning {

  border-color: #faebcc;

}

.panel-warning > .panel-heading {

  color: #8a6d3b;

  background-color: #fcf8e3;

  border-color: #faebcc;

}

.panel-warning > .panel-heading + .panel-collapse > .panel-body {

  border-top-color: #faebcc;

}

.panel-warning > .panel-heading .badge {

  color: #fcf8e3;

  background-color: #8a6d3b;

}

.panel-warning > .panel-footer + .panel-collapse > .panel-body {

  border-bottom-color: #faebcc;

}

.panel-danger {

  border-color: #ebccd1;

}

.panel-danger > .panel-heading {

  color: #a94442;

  background-color: #f2dede;

  border-color: #ebccd1;

}

.panel-danger > .panel-heading + .panel-collapse > .panel-body {

  border-top-color: #ebccd1;

}

.panel-danger > .panel-heading .badge {

  color: #f2dede;

  background-color: #a94442;

}

.panel-danger > .panel-footer + .panel-collapse > .panel-body {

  border-bottom-color: #ebccd1;

}

.panel-body:before,

.panel-body:after {

  content: " ";

  display: table;

}

.panel-body:after {

  clear: both;

}

/* einde accordion*/



/* grid

 *------------------------------------------------------------------ */

 .paragraph--type--grid .field--name-field-grid {

  display: grid;

  grid-template-columns: 100%;

  grid-column-gap: 5px;

  grid-row-gap: 5px;

}

.field--name-field-grid > .field__item {border: 1px dotted #cccccc9e;padding: 10px;}

.node .paragraph--type--grid .field--name-field-grid .field--type-image, .node .paragraph--type--grid .field--name-field-grid .field--type-image img {margin:0;}

/* Responsive layout */

@media (min-width: 768px) {

  .paragraph--type--grid .field--name-field-grid {grid-column-gap: 10px;grid-row-gap: 10px;}

  .paragraph--type--grid.grid--4 .field--name-field-grid {grid-template-columns: 50% 50%;}

  .paragraph--type--grid.grid--3 .field--name-field-grid {grid-template-columns: 33% 33% 33%;} 

  .paragraph--type--grid.grid--2 .field--name-field-grid {grid-template-columns: 50% 50%;} 

}

@media (min-width: 1024px) {

  .paragraph--type--grid .field--name-field-grid {grid-column-gap: 15px;grid-row-gap: 15px;}

  .paragraph--type--grid.grid--4 .field--name-field-grid {grid-template-columns: 25% 25% 25% 25%;}

}

/* grid onderdelen*/

.video-embed-field-launch-modal {cursor: pointer;position: relative;}

.video-embed-field-launch-modal:after {

  content: "\f04b";

  position: absolute;

  top: 45%;

  left: 45%;

  background-color: rgb(0,0,0,0.5);

  font-family: "Font Awesome 5 Free";

  font-weight: 900;

  color: #fff;

  text-align: center;

  padding: 10px 20px 10px 25px;

  border-radius: 8px;

}

.paragraph--type--grid-afbeelding-tekst .card {border: none;}



.paragraph--type--grid-icon-tekst .field--name-field-fontawsome-icon, 

.paragraph--type--grid-icon-tekst .field--name-field-tekst,

.paragraph--type--grid-icon-tekst .field--name-field-interne-link {

  margin-bottom: 10px;

}

.paragraph--type--grid-icon-tekst .field--name-field-interne-link a {

  background-color: #353131;

  color: #EEECEC;

  text-align: center;

  padding: 10px;

  margin: auto;

  border-radius: 5px;

  text-decoration: none;

}

.paragraph--type--grid-icon-tekst .field--name-field-interne-link a:hover {background-color: #1A1A1A;}





/* -- grid einde -- */


/* -- download knop

 * ----------------------------------------------------------------- */

.paragraph--type--bestand-download-link a.file-download {

margin-left: auto;
margin-right: auto;
display: table;

}

/* -- download knop einde -- */


/* -- geysir 

 * ----------------------------------------------------------------- */

#geysir-modal-form .form-control {width:inherit;}
.geysir-add-type input {width: 65px;height: 65px;}

.field--name-field-grid .field__item ul.geysir-field-paragraph-links {display: none;}

/* -- geysir einde -- */