/* Font */

body {font-family: "Quicksand", Helvetica, Arial, Sans-Serif;}
h1, h2, .h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
  font-family: "Roboto", Helvetica, Arial, Sans-Serif;
}

/* Kleuren */
h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,

.art-menu li a .t:hover,
.art-menu li a.active .t,

.art-menu ul li a.active,
.art-menu ul li a.active:before,

/* Overige */
blockquote p,


/* Links */
a, a:link, a:visited, a.visited, a:hover, a.hover,
a:link,
a:visited, a.visited,
a:hover, a.hover,

/* Inputs */
input[type="radio"]:checked::before,
input[type="checkbox"]:checked::before,



/* Responsive */
.resMenublokinhoud .resMenuItem.active > a,
.resMenubloktitel,

/* Faq */
.faqHolder.actief .titel a

{color: #3684a3;}


/* Backgrounds */
a.knop,
.button, a.button, button,
.blader_tabel1_s,
.slideshowNav .activeSlide,
.meldingHouder .melding .knoppen a.bevestigen,
.cookieMelding .inhoud .sluiten,

.art-menu li a .t.action {background-color: rgba(196, 199, 200, .7);}


/* Knoppen color */
a.knop,
.button, a.button, button,
.art-menu li a .t.action {color: #3684a3; padding:13px 18px;}


/* Donkerder / hovers */
a.knop:hover,
a.button:hover, button:hover {background-color:#3684a3; color:#fff;}

/* Footer */
.pageFooterKnoppenHolder {background: #3684a3;}
.pageFooterHolder {background: #6f7173;}
.pageFooterHolder a {color: #FFF;}


/* Tansparantie */
.liquid-slide-sjabloon .inhoud {background: rgba(255, 255, 255, 0.9);}
.liquid-slide-sjabloon .inhoud h2 {color: #3684a3;}
.liquid-slide-sjabloon .inhoud .omschrijving {color: #303030;}

ul.vinkjes {margin: 0 0 1em 0; padding: 0; list-style: none;}
ul.vinkjes {margin: 20px 0px 24px 20px;}
ul.vinkjes li::before {content: "\f00c"; font-family: "Font Awesome 5 Pro"; font-weight: bold; color: #20b100; margin-right: 10px; position: absolute; left: 0;}
ul.vinkjes li::before {position: absolute; left: 0;}
ul.vinkjes li {padding: 0; padding-left: 34px; position: relative;}

table.FCK2kol.checklist ul                      {padding:0; padding-left:1em; list-style: none; margin-top:0;}
table.FCK2kol.checklist ul li                   {cursor:pointer;  list-style: none; position: relative; padding: 7px 5px 7px 30px; line-height: 1.35em; border-bottom: 1px solid #eee;}
table.FCK2kol.checklist ul li:hover             {color:#000;}
table.FCK2kol.checklist ul li:before            {font-family: "Font Awesome 5 Pro"; color:#ccc; content:"\f0c8"; margin-right:10px; font-size:16px; display:inline-block; position: absolute; left:0px; transition: all .3s ease}
table.FCK2kol.checklist ul li:hover:before      {color:#3684a3;}
table.FCK2kol.checklist ul li.checked:before    {color:#3684a3; content:"\f14a";}


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

  .blok {display: block;}
  .blok .links, .blok .rechts {display: block; flex: unset; width: 100%;}
  .blok .rechts .inhoud {padding: 20px;}
}


a.knop.whatsapp {background-color:#25d043; color:#fff;}
a.knop.whatsapp::before {font-family:"Font Awesome 5 Brands"; content:"\f232"; margin-right:10px;}

.art-menu li a .t {font-weight: bold; font-size:16px; color:#999;}
.art-menu li a .t.action::before {content: "\f095"; margin-right:10px;}



/* Gastenboek ------------- */
.gbBericht              {padding: 30px; box-sizing: border-box; background: #fff; border: 1px solid #eee; margin: 0 0 10px; float: left; width: 30%; margin-right: 3%; border-radius: 5px; margin-bottom: 3%; box-shadow: 0 3px 15px rgba(0,0,0,.05); transition: all .3s ease;}
.gbBericht:hover        {box-shadow: 0 3px 20px rgba(0,0,0,.15);}
.gbBericht:nth-of-type(3n+1) {clear: both;}
.gbBericht .gbHeader    {margin: 0 0 5px; padding: 0 0 5px; font-size: 14px;}
.gbBericht .gbEmail     {display: none;}
.gbBericht .gbNaam      {font-weight: bold; font-size: 17px;}
.gbBericht .gbdatum     {display: block; font-size: 13px; color:#999; font-weight: normal;}
.gbBericht .gbdatum span                    {display: inline-block;}
.gbBericht .gbdatum span::after             {content: "-"; margin: 0 3px;} 
.gbBericht .gbdatum span:last-child::after  {display: none;}

.gb_aanmelden           {position: relative; padding:30px; width:100%;}
.gb_aanmelden h2        {margin-top:0;}
.gbBreedteKol1          {padding-right:30px;}
#gb_naam, #gb_email, .gb_message2 {width:100%;}
.gb_message2            {height:100px;}

#gb_A                   {text-align: center;}
#gb_A, #gb_B            {position:relative; transition: all .3s ease; overflow:hidden;}
#gb_B .sluiten          {display: none;}
#gbHolder               {max-height:0; background:#f5f5f5; transition: all .3s ease; position:relative; display:block; overflow:hidden; margin:20px auto 40px; border-radius: 5px; text-align: left; max-width:700px;}

/* Rating */
.gbRating             {float:right; line-height: 1;}
.gbRating .ratingStar label {color: #edd821; cursor: default; text-shadow: 0px 1px 0px #b7a614;}
.gbRating .ratingStar label::before {top: 0;}

.rate1 .star2 label::before, .rate1 .star3 label::before, .rate1 .star4 label::before, .rate1 .star5 label::before,
.rate2 .star3 label::before, .rate2 .star4 label::before, .rate2 .star5 label::before,
.rate3 .star4 label::before, .rate3 .star5 label::before,
.rate4 .star5 label::before           {top: 0px; color: #bbb; text-shadow: 0px 1px 0px #8a8a8a;}

.rating                 {overflow:hidden; display:inline-block; height:20px; direction:rtl; position:relative;}
.ratingInput            {display:none;}

.ratingStar {position: relative; display: inline-block; vertical-align: top; transition: all .3s ease; font-size: 16px;}
.ratingStar label {cursor: pointer; display: inline-block; transition: .3s all ease; position: relative;}
.ratingStar label::before {content: attr(data-star); font-family: "Font Awesome 5 Pro"; left: 0; top: -20px; position: absolute; transition: .3s all ease; color: #edd821; text-shadow: 0px 1px 0px #b7a614; line-height: inherit;}

.rating:hover .ratingStar:hover label,
.rating:hover .ratingStar:hover ~ .ratingStar label,
.ratingInput:checked ~ .ratingStar label               {padding-top: 20px;}

.rating:hover .ratingStar:hover label::before,
.rating:hover .ratingStar:hover ~ .ratingStar label::before,
.ratingInput:checked ~ .ratingStar label::before               {top: 0;}
/* Einde Rating */
/* Einde Gastenboek */