@charset "UTF-8";

/* Dit is de custom CSS voor de website van het Scoutinglandgoed. Basis is de Scouting Nederland TC4 template */

/* Extra font - Londrina Solid */

@import url("https://fonts.googleapis.com/css2?family=Londrina+Solid&display=swap");

/* Aangepaste kleuren */
/* J4 scoutingtc4 styling 
	 * 20220622 - eerste aangepaste J4 versie
     * 20231220 - aanpassing kleuren naar SLZ huisstijl
	 *
	 * Groen #00A551  --> #64B366 rgb(100,179,102)
	 * Blauw #0066B2  --> #00447D rgb(0,68,125)
	 * Rood #E1071A   --> #D84027 rgb(216,64,39)
	 * Geel #FCDD17   --> ongewijzigd
	 * Oranje #F2940A --> #F89B1C rgb(248,155,28)
	 * Paars #921C7F  --> #973F8B rgb(151,63,139)

	 * In plaats van grass-*.png wordt onderaan de pagina de skyline-*.png getoond
*/

/* HOOFDKLEUR - DEFAULT GROEN --------------------- */
.text-success, 
h1,
#tc4-nav .navbar-nav .nav-link:hover,
#tc4-nav .navbar-nav .active > .nav-link,
#tc4-nav .navbar-nav .nav-link.active,
#tc4-featured h3,
#tc4-featured ul.links li a,
.buttonlink {
	color: #64B366!important;
}

.bg-success {
	background-color: #64B366!important;
}
#tc4-divider {
	border-top: 4px dotted #64B366!important;	
}
.bottom-b .no-card {
	border: 3px solid #64B366!important;
}
.showcase-skyline::before {
	/* background-image: url(../images/skyline-groen.png);  --> geen bewegende rand bij showcase-module (alle kleuren) */
	background-image: none !important;
}
.footer-grass {
	background-image: url(../images/skyline-groen.png); /* skyline in plaats van gras */
}
a.search:hover i,
a.phone:hover i,
a.contact:hover i,
#tc4-nav .navbar-toggler:hover i {
	color: #64B366;
}
.mblauw .bottom-a .no-card {
	background: rgba(100,179,102,0.2);		
}

/* Hoofdkleur blauw ----- */
.mblauw .text-success, 
.mblauw h1,
.mblauw #tc4-nav .navbar-nav .nav-link:hover,
.mblauw #tc4-nav .navbar-nav .active > .nav-link,
.mblauw #tc4-nav .navbar-nav .nav-link.active,
.mblauw #tc4-featured h3,
.mblauw #tc4-featured ul.links li a,
.mblauw .buttonlink {
	color: #00447D!important;
}

.mblauw .bg-success {
	background-color: #00447D!important;
}
.mblauw #tc4-divider {
	border-top: 4px dotted #00447D!important;	
}
.mblauw .bottom-b .no-card {
	border: 3px solid #00447D!important;
}
.mblauw .showcase-skyline::before {
	/* background-image: url(../images/skyline-blauw.png); */
	background-image: none !important;
}
.mblauw .footer-grass {
	background-image: url(../images/skyline-blauw.png);
}
.mblauw a.search:hover i,
.mblauw a.phone:hover i,
.mblauw a.contact:hover i,
.mblauw #tc4-nav .navbar-toggler:hover i {
	color: #00447D;
}
.mblauw .bottom-a .no-card {
	background: rgba(0,68,125,0.2);		
}

/* Hoofdkleur rood ----- */
.mrood .text-success, 
.mrood h1,
.mrood #tc4-nav .navbar-nav .nav-link:hover,
.mrood #tc4-nav .navbar-nav .active > .nav-link,
.mrood #tc4-nav .navbar-nav .nav-link.active,
.mrood #tc4-featured h3,
.mrood #tc4-featured ul.links li a,
.mrood .buttonlink {
	color: #D84027!important;
}
.mrood .bg-success {
	background-color: #D84027!important;
}
.mrood #tc4-divider {
	border-top: 4px dotted #D84027!important;	
}
.mrood .bottom-b .no-card {
	border: 3px solid #D84027!important;
}
.mrood .showcase-skyline::before {
	/* background-image: url(../images/skyline-rood.png); */
	background-image: none !important;
}
.mrood .footer-grass {
	background-image: url(../images/skyline-rood.png);
}
.mrood a.search:hover i,
.mrood a.phone:hover i,
.mrood a.contact:hover i,
.mrood #tc4-nav .navbar-toggler:hover i {
	color: #D84027;
}
.mrood .bottom-a .no-card {
	background: rgba(216,64,39,0.2);		
}

/* Hoofdkleur geel ----- */
.mgeel .text-success, 
.mgeel h1,
.mgeel #tc4-nav .navbar-nav .nav-link:hover,
.mgeel #tc4-nav .navbar-nav .active > .nav-link,
.mgeel #tc4-nav .navbar-nav .nav-link.active,
.mgeel #tc4-featured h3,
.mgeel #tc4-featured ul.links li a,
.mgeel .buttonlink {
	color: #FCDD17!important;
}
.mgeel .bg-success,
.mgeel .text-light,
.mgeel #tc4-footer a, .mgeel #tc4-footer.text-light {
	color: #333!important;
}
.mgeel .bg-success {
	background-color: #FCDD17!important;
}
.mgeel #tc4-divider {
	border-top: 4px dotted #FCDD17!important;	
}
.mgeel .bottom-b .no-card {
	border: 3px solid #FCDD17!important;
}
.mgeel .showcase-skyline::before {
	/* background-image: url(../images/skyline-geel.png); */
	background-image: none !important;
}
.mgeel .footer-grass {
	background-image: url(../images/skyline-geel.png);
}
.mgeel a.search:hover i,
.mgeel a.phone:hover i,
.mgeel a.contact:hover i,
.mgeel #tc4-nav .navbar-toggler:hover i {
	color: #FCDD17;
}
.mgeel .bottom-a .no-card {
	background: rgba(252,221,23,0.2);		
}

/* Hoofdkleur oranje ----- */
.moranje .text-success, 
.moranje h1,
.moranje #tc4-nav .navbar-nav .nav-link:hover,
.moranje #tc4-nav .navbar-nav .active > .nav-link,
.moranje #tc4-nav .navbar-nav .nav-link.active,
.moranje #tc4-featured h3,
.moranje #tc4-featured ul.links li a,
.moranje .buttonlink {
	color: #F89B1C!important;
}
.moranje .bg-success {
	background-color: #F89B1C!important;
}
.moranje #tc4-divider {
	border-top: 4px dotted #F89B1C!important;	
}
.moranje .bottom-b .no-card {
	border: 3px solid #F89B1C!important;
}
.moranje .showcase-skyline::before {
	/* background-image: url(../images/skyline-oranje.png); */
	background-image: none !important;
}
.moranje .footer-grass {
	background-image: url(../images/skyline-oranje.png);
}
.moranje a.search:hover i,
.moranje a.phone:hover i,
.moranje a.contact:hover i,
.moranje #tc4-nav .navbar-toggler:hover i {
	color: #F89B1C;
}
.moranje .bottom-a .no-card {
	background: rgba(248,155,28,0.2);		
}

/* Hoofdkleur paars ----- */
.mpaars .text-success, 
.mpaars h1,
.mpaars #tc4-nav .navbar-nav .nav-link:hover,
.mpaars #tc4-nav .navbar-nav .active > .nav-link,
.mpaars #tc4-nav .navbar-nav .nav-link.active,
.mpaars #tc4-featured h3,
.mpaars #tc4-featured ul.links li a,
.mpaars .buttonlink {
	color: #973F8B!important;
}
.mpaars .bg-success {
	background-color: #973F8B!important;
}
.mpaars #tc4-divider {
	border-top: 4px dotted #973F8B!important;	
}
.mpaars .bottom-b .no-card {
	border: 3px solid #973F8B!important;
}
.mpaars .showcase-skyline::before {
	/* background-image: url(../images/skyline-paars.png); */
	background-image: none !important;
}
.mpaars .footer-grass {
	background-image: url(../images/skyline-paars.png);
}
.mpaars a.search:hover i,
.mpaars a.phone:hover i,
.mpaars a.contact:hover i,
.mpaars #tc4-nav .navbar-toggler:hover i {
	color: #973F8B;
}
.mpaars .bottom-a .no-card {
	background: rgba(151,63,139,0.2);		
}

/* STEUNKLEUR - DEFAULT BLAUW --------------------- */
.text-primary,
.text-secondary,
a,
a.text-success:focus, .sgeel a.text-success:hover,
#tc4-featured ul.links li a:hover  {
	color: #00447D!important;
}
.bg-primary {
	background-color: #00447D!important;
}
.btn-primary.disabled,
#searchForm .btn,
.btn-primary:hover,
.btn-primary {
	background-color: #00447D!important;
	border-color: #00447D!important;
	color: #FFF!important;
}
.btn-secondary:hover,
.btn-secondary {
	color: #FFF!important;
}
#tc4-nav .navbar-toggler i {
	color: #00447D;
}
a.text-danger {color:#ec1c24!important;} /* header message blijft rood! */


/* Steunkleur geel ----- */
.sgeel .text-primary,
.sgeel .text-secondary,
.sgeel a,
.sgeel a.text-success:focus, .sgeel a.text-success:hover,
.sgeel #tc4-featured ul.links li a:hover  {
	color: #999!important;
}
.sgeel .bg-primary {
	background-color: #FCDD17!important;
}
.sgeel .btn-primary.disabled,
.sgeel #searchForm .btn,
.sgeel .btn-primary:hover,
.sgeel .btn-primary {
	background-color: #FCDD17!important;
	border-color: #FCDD17!important;
	color: #555!important;
}
.sgeel .btn-secondary:hover,
.sgeel .btn-secondary {
	color: #fff!important;
}
.sgeel #tc4-nav .navbar-toggler i {
	color: #FCDD17;
}
.sgeel a.text-danger {color:#ec1c24!important;} /* header message blijft rood! */

/* Steunkleur groen ----- */
.sgroen .text-primary,
.sgroen .text-secondary,
.sgroen a,
.sgroen a.text-success:focus, .sgroen a.text-success:hover,
.sgroen #tc4-featured ul.links li a:hover  {
	color: #64B366!important;
}
.sgroen .bg-primary {
	background-color: #64B366!important;
}
.sgroen .btn-primary.disabled,
.sgroen #searchForm .btn,
.sgroen .btn-primary:hover,
.sgroen .btn-primary {
	background-color: #64B366!important;
	border-color: #64B366!important;
	color: #FFF!important;
}
.sgroen .btn-secondary:hover,
.sgroen .btn-secondary {
	color: #fff!important;
}
.sgroen #tc4-nav .navbar-toggler i {
	color: #64B366;
}
.sgroen a.text-danger {color:#ec1c24!important;} /* header message blijft rood! */

/* Steunkleur rood ----- */
.srood .text-primary,
.srood .text-secondary,
.srood a,
.srood a.text-success:focus, .srood a.text-success:hover,
.srood #tc4-featured ul.links li a:hover  {
	color: #D84027!important;
}
.srood .bg-primary {
	background-color: #D84027!important;
}
.srood .btn-primary.disabled,
.srood #searchForm .btn,
.srood .btn-primary:hover,
.srood .btn-primary {
	background-color: #D84027!important;
	border-color: #D84027!important;
	color: #FFF!important;
}
.srood .btn-secondary:hover,
.srood .btn-secondary {
	color: #fff!important;
}
.srood #tc4-nav .navbar-toggler i {
	color: #D84027;
}
.srood a.text-danger {color:#ec1c24!important;} /* header message blijft rood! */

/* Steunkleur oranje ----- */
.soranje .text-primary,
.soranje .text-secondary,
.soranje a,
.soranje a.text-success:focus, .soranje a.text-success:hover,
.soranje #tc4-featured ul.links li a:hover  {
	color: #F89B1C!important;
}
.soranje .bg-primary {
	background-color: #F89B1C!important;
}
.soranje .btn-primary.disabled,
.soranje #searchForm .btn,
.soranje .btn-primary:hover,
.soranje .btn-primary {
	background-color: #F89B1C!important;
	border-color: #F89B1C!important;
	color: #FFF!important;
}
.soranje .btn-secondary:hover,
.soranje .btn-secondary {
	color: #fff!important;
}
.soranje #tc4-nav .navbar-toggler i {
	color: #F89B1C;
}
.soranje a.text-danger {color:#ec1c24!important;} /* header message blijft oranje! */

/* Steunkleur paars ----- */
.spaars .text-primary,
.spaars .text-secondary,
.spaars a,
.spaars a.text-success:focus, .spaars a.text-success:hover,
.spaars #tc4-featured ul.links li a:hover  {
	color: #973F8B!important;
}
.spaars .bg-primary {
	background-color: #973F8B!important;
}
.spaars .btn-primary.disabled,
.spaars #searchForm .btn,
.spaars .btn-primary:hover,
.spaars .btn-primary {
	background-color: #973F8B!important;
	border-color: #973F8B!important;
	color: #FFF!important;
}
.spaars .btn-secondary:hover,
.spaars .btn-secondary {
	color: #fff!important;
}
.spaars #tc4-nav .navbar-toggler i {
	color: #973F8B;
}
.spaars a.text-danger {color:#ec1c24!important;} /* header message blijft rood! */

/* ****************************************************************** */
/* Logo */
/* ****************************************************************** */

#tc4-logo .navbar-brand .eigenlogo {
    top: 15px;
    max-height: 200px;
  }
  
  #tc4-logo .navbar-brand .eigenlogo.slz-hidden {
    top: -23px;
    max-height: 70px;
    transition: max-height 0.7s linear;
  }
  
  #tc4-logo .navbar-brand .eigenlogo.slz-visible {
    top: -23px;
    max-height: 200px;
    transition: max-height 0.7s linear;
  }
  
  @media only screen and (max-width: 991px) {
    #tc4-logo .navbar-brand .eigenlogo.small-logo {
      max-height: 50px;
    }
  }

/* ****************************************************************** */
/* Overige opmaak
/* ****************************************************************** */

  /* H1 t/m H3 in Londrina font */
  h1, .h1, h2, .h2, h3, .h3 {
    font-family: 'Londrina Solid',sans-serif !important;
  }

  /* Titel in de header andere fontsize en schaduw */
@media only screen and (max-width: 415px) {
    .fotoslide h2 {
        font-size: 1.25em;
        text-shadow: 0 3px 0 #000;
    }
}
@media only screen and (min-width: 416px and max-width: 576px) {
    .fotoslide h2 {
        font-size: 2em;
        text-shadow: 0 3px 0 #000;
    }
}
@media only screen and (min-width: 576px) {
    .fotoslide h2 {
        font-size: 4em;
        text-shadow: 0 3px 0 #000;
    }
}

/* Correctie voor de breamcrumbs; ze lijnen niet goed uit. */
.breadcrumb-item {
    margin: 0px 0;
}

/* Nieuwsartikelen titel wel link, geen decoration */
.news h3 a:link {
    color: #fff !important;
    text-decoration: none !important;
}
  
.news h3 a:visited {
    color: #fff !important;
    text-decoration: none !important;
}
  
.news h3 a:hover {
    text-decoration: underline !important;
}
  
/* featured-modules de knoppen uitlijnen */
#tc4-featured .featurednews p {
	min-height: 150px;
}

  /* Bulletpoints staan buiten de tekstuitlijning, zodat een tweede regel binnen dezelfde bullet beter uitlijnt */
ul li { 
	list-style-position: outside; 
}