@font-face {
    font-family: 'annoregular';
    src: url('../../../fonts/anno-webfont.woff2') format('woff2'),
         url('../../../fonts/anno-webfont.woff') format('woff'),
         url('../../../fonts/anno.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'athitibold';
    src: url('../../../fonts/athiti-bold-webfont.woff2') format('woff2'),
         url('../../../fonts/athiti-bold-webfont.woff') format('woff'),
         url('../../../fonts/athiti-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'athitilight';
    src: url('../../../fonts/athiti-light-webfont.woff2') format('woff2'),
         url('../../../fonts/athiti-light-webfont.woff') format('woff'),
         url('../../../fonts/athiti-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'athitiregular';
    src: url('../../../fonts/athiti-regular-webfont.woff2') format('woff2'),
         url('../../../fonts/athiti-regular-webfont.woff') format('woff'),
         url('../../../fonts/athiti-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'annoregular';
    src: url('../../../fonts/anno-webfont.woff2') format('woff2'),
         url('../../../fonts/anno-webfont.woff') format('woff'),
         url('../../../fonts/anno.otf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'athitibold';
    src: url('../../../fonts/athiti-bold-webfont.woff2') format('woff2'),
         url('../../../fonts/athiti-bold-webfont.woff') format('woff'),
         url('../../../fonts/athiti-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'athitilight';
    src: url('../../../fonts/athiti-light-webfont.woff2') format('woff2'),
         url('../../../fonts/athiti-light-webfont.woff') format('woff'),
         url('../../../fonts/athiti-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'athitiregular';
    src: url('../../../fonts/athiti-regular-webfont.woff2') format('woff2'),
         url('../../../fonts/athiti-regular-webfont.woff') format('woff'),
         url('../../../fonts/athiti-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* --------------------------------------------------------------------------------------- */
:root {
	--standaardlettergrootte: 18px;
	--standaardregelhoogte: 24px;
	--kopkleur: #15297D;
	--tekstkleur: #15297D;
	--accentachtergrondkleur1: #BC9C46;
	--accentachtergrondkleur2: #15297D;
	--accentkleur: #ffffff;
	--menuletter: 'annoregular', sans-serif;
	--kopletter: 'annoregular', sans-serif;
	--labelletter: 'annoregular', sans-serif;
	--tekstletter: 'athitiregular', sans-serif;
	--koptekstletter: 'athitibold', sans-serif;
	--kaartcats: 'athitiregular', sans-serif;
	--kaartcatskleur: #152F88;
	--buttonbg: #15297D;
	--buttonletter: 'athitiregular', sans-serif;
	--slideralt: 'athitiregular', sans-serif;
	--bs-light-rgb: #fff!important; /* overrule BS var */
	--themabezetting: #B4A689;
	--themajodenvervolging: #17A250;
	--themaverzet: #BDCB3F;
	--themabevrijding: #EB64A2;
	--themanasleep: #E4C5D9;
}

body {
	font-size: var(--standaardlettergrootte);
	line-height: var(--standaardregelhoogte);
	color: var(--tekstkleur);
}

#sp-header.full-header {
  padding-left: 0px!important;
  padding-right: 0px!important;
  box-shadow: none;
  background: none;
}

#sp-logo {
	padding-left: 0px!important;
}
#menu-right .sp-module:first-child {
  border-right: none;
}

#sp-menu {
	padding-right: 0;
}
#sp-menu div.sp-column.d-flex {
	display: block!important;
}

#sp-menu .social-wrap {
  display: none!important;
}

a#offcanvas-toggler {
	display: none!important;
}
.burger-icon {
	display: none;
}

.stipdoormod img, .annologosvgmaat img {
	width: 150px;
	height: 82px;
}

.logout {
	text-align: center;
}

/* --------------------------------------------------------------------------------------- GEBRUIKERSACCOUNT */
.gebruikersaccount #sp-main-body {
	padding: 100px 50px;
	max-width: 1280px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------------------- */
/*
	logo en header	was	240px
					nu	160px
*/

.startpagina #sp-main-body {
	padding: 100px 0;
	/*top: 0px;*/
	top: -260px;				/* -340 */
	position: relative;
}


.startpagina .logo-image							 { content: url("../../../images/design/anno-woii-logo-wit.svg"); }
.startpagina #mod-custom118 img.mapiconuser			 { content: url("../../../images/icons/user-solid-white.svg"); }
.startpagina #mod-custom118 img.mapiconmarker		 { content: url("../../../images/icons/mapmarker-white.svg"); }
.startpagina #mod-custom118 img.mapiconhome			 { content: url("../../../images/icons/home-solid-white.svg"); }
.startpagina #mod-custom118 img.mapiconsearch		 { content: url("../../../images/icons/search-white.svg"); }

.mapiconuser {
	width: 40px;
	height: 40px;
	margin-right: 10px!important;
}	
.mapiconmarker {
	width: 40px;
	height: 40px;
	margin-right: 20px;
}
.mapiconsearch {
	width: 40px;
	height: 40px;
	margin-right: 20px;
}
.mapiconhome {
	width: 40px;
	height: 40px;
	margin-right: 20px;
}
/* mapicon wel altijd zichtbaar ivm terug schakeling streetview naar onze kaart */
/*.startkaart .mapiconmarker {display: none;} */

/*.gmnoprint {
	display: none;
}


/* --------------------------------------------------------------------------------------- */
.stipheader, .stipintro, .stipslider, .stipopdracht, .stipleestip, .stipmeer, .stipdoor {
	/* classes voor de verschillende sectie van een stippagina */
}

h1, h2, h3, h4, .h1, .h2, .h3, .h4	{ font-family: var(--kopletter); }
h5, h6, .h5, .h6					{ font-family: var(--koptekstletter); }	

h1, .h1 { font-size: 45px; color: var(--kopkleur); }	/* blauwe kop in witte vlak */
h2, .h2 { font-size: 45px; /*word-spacing: 100vw*/;	} 		/* witte kop in beige vlak */
h3, .h3 { font-size: 45px; } 							/* witte kop in blauwe vlak */
h4, .h4 { font-size: 45px; }							/* blauwe kop in witte vlak */
h5, .h5 { font-size: var(--standaardlettergrootte); }
h6, .h6 { font-size: var(--standaardlettergrootte); }

p,
div.sppb-addon-text,
div.sppb-addon-content {
	color: var(--tekstkleur);
	font-family: var(--tekstletter);
	line-height: var(--standaardregelhoogte);
}

.stipheader .sppb-addon-content p a,
.stipheader .sppb-addon-content ul a,
.stipheader .sppb-addon-content ol a {
	color: var(--tekstkleur);
	text-decoration: underline;
}
.stipheader .sppb-addon-content p a:hover,
.stipheader .sppb-addon-content ul a:hover,
.stipheader .sppb-addon-content ol a:hover {
	color: var(--accentachtergrondkleur1);
	text-decoration: none;
}

.stipintro {
	background: var(--accentachtergrondkleur1);
}
.stipintro h3.sppb-addon-title,
.stipintro .sppb-addon-content p {
	color: var(--accentkleur);	
}

.stipintro .sppb-addon-content p,
.stipintro .sppb-addon-content ul,
.stipintro .sppb-addon-content ol {
	color: var(--accentkleur);
}
.stipintro .sppb-addon-content p a,
.stipintro .sppb-addon-content ul a,
.stipintro .sppb-addon-content ol a {
	color: var(--accentkleur);
	text-decoration: underline;
}
.stipintro .sppb-addon-content p a:hover,
.stipintro .sppb-addon-content ul a:hover,
.stipintro .sppb-addon-content ol a:hover {
	color: var(--tekstkleur);
	text-decoration: none;
}


.stipopdracht {
	background: var(--accentachtergrondkleur2);
}
.stipopdracht h3.sppb-addon-title,
.stipopdracht .sppb-addon-content p,
.stipopdracht .sppb-addon-content ul,
.stipopdracht .sppb-addon-content ol {
	color: var(--accentkleur);
}
.stipopdracht .sppb-addon-content p a,
.stipopdracht .sppb-addon-content ul a,
.stipopdracht .sppb-addon-content ol a {
	color: var(--accentkleur);
	text-decoration: underline;
}
.stipopdracht .sppb-addon-content p a:hover,
.stipopdracht .sppb-addon-content ul a:hover,
.stipopdracht .sppb-addon-content ol a:hover {
	color: var(--accentachtergrondkleur1);
	text-decoration: none;
}



h4.sppb-addon-title {
	color: var(--kopkleur);	
}


/* --------------------------------------------------------------------------------------- *//* STIP PAGE HEADER */
.stipheader div.sppb-addon-single-image div.sppb-addon-content	{ text-align: right; }
.stipheader img													{ max-height: 600px; }
	

/* --------------------------------------------------------------------------------------- *//* LOCATION PAGE */
.annobuttons a {
	font-family: var(--buttonletter)!important;
}
.downloadbutton a {
	background-color: #ffffff!important;
	color: #000000!important;							/* was var(--tekstkleur) */
	border-radius: 25px!important;
	padding: 10px 20px!important;						/* was 6px 20px */
	margin-bottom: 10px;
	font-family: var(--buttonletter)!important;
	font-size: 17px!important;
	font-weight: bold;
}

.downloadbutton a:hover {
	color: var(--tekstkleur)!important;
}


/* --------------------------------------------------------------------------------------- *//* IMAGE SLIDER */
.sppb-carousel-extended-item img {
	object-fit: contain;
}

.sppb-carousel-extended-content-wrap {
	position: absolute;
	display: inline-flex;
	top: 450px;
	background-color: #ffffff;
	padding: 0;
}

.sppb-carousel-extended-description {
	color: #000;
	font-family: var(--slideralt);
	color: var(--tekstkleur);
	font-size: var(--standaardlettergrootte);
}

.sppb-carousel-extended-nav-control .nav-control {
	color: var(--tekstkleur)!important;
}

a.sp-scroll-up .fa, a.sp-scroll-up .fas {
	font-size: 28px;
	padding-top: 3px;
}
.logout span.icon-arrow-left.icon-white {
	font-size: 20px;
	padding-right: 10px;
}

.fa-download {
	font-size: 20px;
	margin-left: 10px;
}

.sppb-carousel-extended-dots ul li span {
	background: var(--tekstkleur);
}

.sppb-carousel-extended-item.active a { /* deactivate link around image in slider */
	pointer-events: none;
	cursor: default;
	text-decoration: none;
	color: black;
}

/* --------------------------------------------------------------------------------------- *//* LEESTIP ETC */
/* EIGEN MODULE VOOR ANNO DEURMAT */
.stipdoormod div.sppb-row-container:first-of-type {
	padding-right: 0px;
	padding-left: 0px;
}


.stipleestip img	{ max-height: 240px; }

.stipleestip a,
.stipmeer a,
.stipdoor a, 
.stipdoormod a {
	color: var(--tekstkleur);
	text-decoration: underline;
}

.stipleestip a:hover,
.stipmeer a:hover,
.stipdoor a:hover,
.stipdoormod a:hover {
	color: var(--accentachtergrondkleur1);
	text-decoration: none;
}

/* --------------------------------------------------------------------------------------- *//* INLOGPAGINA */
.handleidingthema1 a, .handleidingthema2 a, .handleidingthema3 a, .handleidingthema4 a, .handleidingthema5 a {
	color: #ffffff!important;							/* was var(--tekstkleur) */
	border-radius: 25px!important;
	padding: 10px 20px!important;						/* was 6px 20px */
	margin-bottom: 10px;
	font-family: var(--buttonletter)!important;
	font-size: 17px!important;
	font-weight: bold;
}


.handleidingthema1 a	{ background-color: var(--themabezetting)!important; }
.handleidingthema2 a	{ background-color: var(--themajodenvervolging)!important; }
.handleidingthema3 a	{ background-color: var(--themaverzet)!important; }
.handleidingthema4 a	{ background-color: var(--themabevrijding)!important; }
.handleidingthema5 a	{ background-color: var(--themanasleep)!important; }

.handleidingthema1 a:hover, .handleidingthema2 a:hover, .handleidingthema3 a:hover, .handleidingthema4 a:hover, .handleidingthema5 a:hover {
	background-color: var(--accentachtergrondkleur2)!important;
}


/* --------------------------------------------------------------------------------------- *//* STIPPENOVERZICHT */
.kolomstipbezetting			{ width: 40px;}
.kolomstipjodenvervolging	{ width: 40px;}
.kolomstipverzet			{ width: 40px;}
.kolomstipbevrijding		{ width: 40px;}


#tabelbezetting	a			{ color: var(--themabezetting) }
#tabeljodenvervolging a		{ color: var(--themajodenvervolging) }
#tabelverzet a				{ color: var(--themaverzet) }
#tabelbevrijding a			{ color: var(--themabevrijding) }

#tabelbezetting	a:hover, #tabeljodenvervolging a:hover, #tabelverzet a:hover, #tabelbevrijding a:hover	{ color: var(--accentachtergrondkleur2) }

.woiizoektocht .finder {
	padding: 0px 100px;
}


/* --------------------------------------------------------------------------------------- *//* FOOTER */
#sp-footer2 p {
	color: #a2a2a2;

}


/* --------------------------------------------------------------------------------------- *//* MOBIEL MENU */ 
@media only screen and (max-width: 800px) {

	.logo-image {
		height: 60px!important;
	}

	joomla-tab[view="accordion"] joomla-tab-element {
		padding: 0px!important;
	}
	
	.woiizoektocht .finder {
		padding: 0px 20px;
	}
}