/*
 * Custom CSS
 */

@font-face {
	font-family: 'Adrianna Rg';
	src: url('../font/Adrianna-Regular.woff2') format('woff2'),
		url('../font/Adrianna-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'Adrianna Rg';
    src: url('../font/Adrianna-Bold.woff2') format('woff2'),
        url('../font/Adrianna-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
	font-family: 'AzoSans';
	src: url('../font/azo-sans.woff2') format('woff2'),
		url('../font/azo-sans.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
    font-family: 'AzoSansUberW01';
    src: url('../font/AzoSansUberW01-Regular.woff2') format('woff2'),
        url('../font/AzoSansUberW01-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
	font-size:16px;
	line-height:26px;
}

body {
	font-family: 'Adrianna Rg';
	color:#545454;
}

a {
	color:#55509d;
	transition: 0.3s;
}

a:hover {
	color:#168F95;
}

h1, h2, h3, h4, h5 {
	font-family: 'AzoSans';
	font-weight: normal;
	font-style: normal;
}


h4, h5 {
    text-transform: uppercase;
    font-size: 1rem;
}
h5 {
    font-size: 0.8rem;
}


img, .bodycontent img {
    max-width:100%;
    height:auto;
    
}

.btn-primary {
    background-color:#118f94;
    border:none;
    border-radius:0;
}
.btn-primary:hover {
    background-color:#55509d;
}

.bg {
	background-color:#ebf6f6;
	background-image: url('https://picsum.photos/1200/300');
	background-size: cover;
	background-position:center center;
}

.bg-solid {
	background-color:#ebf6f6;
}

.bg-solid-paars {
	background-color:#e9e7f4;
}
.bg-solid-lightgreen {
	background-color:#f5f9f9;
}

img.logo {
	margin-top:20px;
	height:70px;
	max-width:60vw;
}

.fullscreen-menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(176, 218, 220, 0.95);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1050;
}

.fullscreen-menu .head {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.fullscreen-menu .head img.logo {
	margin-top:30px;
}

.fullscreen-menu .head #close-menu {
	color:#118f94;
	font-size:45px;
}
.fullscreen-menu .head #close-menu .toggler-text {
	color:#118f94;
}


.fullscreen-menu.active {
	display: flex;
}
.fullscreen-menu a {
	color: white;
	font-size: 2rem;
	text-decoration: none;
	margin: 1rem;
}

.fullscreen-menu #menukeuzes {
	align-items: center;
}
.fullscreen-menu #menukeuzes a {
	color:#118f94;
	text-transform:uppercase;
	display:block;
	font-size: 1.1rem;
	line-height: 1.2em;
}





nav .navbar-toggler {
	color:#56509D;
}

.topright {
	position:absolute;
	right:0;
	top:0;
	width:10vw;
	z-index:-1;
}
.bottomleft {
	position:absolute;
	left:0;
	bottom:0;
	width:20vw;
	z-index:1;
}

/* Custom styles for the toggler button */
.custom-toggler {
	background: none;
	border: none; /* Remove border */
	border-radius: 5px; /* Rounded corners */
	padding: 10px 15px;
	color: #55509d;
	padding:0;
}

.custom-toggler-icon {
	display: block;
	width: 1.5em;
	height: 1.5em;
	background-color: white; /* Icon color */
	border-radius: 3px; /* Rounded corners for the icon */
	margin: 0 auto; /* Center icon */
}

.toggler-text {
	display:block;
	font-size: 0.85rem;
	line-height: 0.75em;
	color: #55509d;
	margin-top: 0;
	text-align: center; /* Center text below the icon */
	text-transform: uppercase;
}
.custom-toggler .icon-bar {
	display:block;
	background-color: #55509d;
	width: 100%;
	height: 6px;
	margin-bottom:5px;
}


#quote {
	font-family: 'Adrianna Rg';
	font-weight: bold;
	color:#55509d;
	font-size:20px;
	line-height:23px;
	position:relative;
	max-width:25vw;
}

#quote span {
	display:block;
	font-family: 'Adrianna Rg';
	font-weight: normal;
	color:#3da4a8;
	font-size:14px;
}

#quote:before{
	font-family: FontAwesome;
	font-weight: normal;
	content:'\f10d';
	color:#55509d;
	font-size:24px;
	position:absolute;
	top:-5px;
	left:-27px;
}
#quote:after {
	font-family: FontAwesome;
	font-weight: normal;
	content:'\f10e';
	color:#55509d;
	font-size:24px;
	position:absolute;
	bottom:5px;
	right:-15px;
}


a.knop {
	border:4px #118f94 solid;
	padding:55px 25px;
	text-align:center;
	display:block;
	font-family: 'AzoSans';
	font-weight: normal;
	font-style: normal;
	color:#118f94;
	font-size:1.3rem;
	text-decoration:none;
	position:relative;
}
a.knop:hover {
	border:4px #118f94 solid;
	background-color:#118f94;
	color:#ffffff;
	text-decoration:none;
}

a.knop:before {
	content: "\2b";  /* this is your text. You can also use UTF-8 character codes as I do here */
	font-family: FontAwesome;
	position:absolute;
	bottom:-2px;
	right:-2px;
	height:24px;
	width:24px;
	line-height:24px;
	text-align:center;
	font-size:18px;
	color:#ffffff;
	background-color:#118f94;
}
.blocklink {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


#laatstenieuws {
	min-height:40vh;
	position:relative;
	
}
#laatstenieuws span {
	position:absolute;
	bottom:10px;
	left:10px;
	background-color:#118f94;
	color:#ffffff;
	padding:15px 10px;
	line-height:24px;
	font-size:18px;
    max-width: 80%;
	
}
#laatstenieuws span:after {
	content: "\f054";  /* this is your text. You can also use UTF-8 character codes as I do here */
	font-family: FontAwesome;
	height:24px;
	width:24px;
	color:#ffffff;
	margin-left:10px;
}

#nieuwsoverzicht {
	position:relative;
}
#nieuwsoverzicht a {
	font-family: 'AzoSans';
	font-weight: normal;
	font-style: normal;
	color:#545454;
	font-size:1.2rem;
	text-decoration:none;
}
#nieuwsoverzicht a:hover {
	background-color: rgba(176, 218, 220, 0.5);
}
#nieuwsoverzicht a img{
	height:40px;
	width:40px;
	margin-right:15px;
}

#nieuwsoverzicht a#more-news {
	position:absolute;
	bottom:0;
	right:10px;
	color:#56509D;
	font-size:1rem;
	text-transform:uppercase;
}
#nieuwsoverzicht a#more-news:after {
	content: "\2b";
	font-family: FontAwesome;
	color:#56509D;
	margin-left:3px;
	padding:4px;
}

#nieuwsoverzicht a#more-news:hover {
	background:none;
	color: #545454;
}
#nieuwsoverzicht a#more-news:hover:after {
	color:#545454;

	color:#ffffff;
	background-color:#118f94;
}



#laatsteagenda {
	min-height:40vh;
	position:relative;
	
}
#laatsteagenda div {
	position:absolute;
	bottom:10px;
	left:0px;
	color:#ffffff;
	line-height:24px;
	font-size:20px;
	font-family: 'AzoSansUberW01';
	text-shadow: 2px 2px 14px #000000;
	
}
#laatsteagenda div:after {
	content: "\f054";  /* this is your text. You can also use UTF-8 character codes as I do here */
	font-family: FontAwesome;
	height:24px;
	width:24px;
	color:#ffffff;
	margin-left:10px;
}
#laatsteagenda div>span {
	font-family: 'AzoSans';
	font-weight: normal;
	font-style: normal;
	background-color:#55509d;
	color:#ffffff;
	font-size:22px;
	line-height:22px;
	display:inline-block;
	text-align:center;
	padding:4px 3px;
	min-width:42px;
}
#laatsteagenda div>span>span {
	color:#ffffff;
	font-size:10px;
	line-height:14px;
	display:block;
	text-transform:uppercase;
	text-align:center;
}

#agenda {
	position:relative;
}
#agenda a {
	font-family: 'AzoSans';
	font-weight: normal;
	font-style: normal;
	color:#545454;
	font-size:1.2rem;
	text-decoration:none;
}
#agenda a:hover {
	background-color: rgba(176, 218, 220, 0.5);
}

#agenda a>span {
	background-color:#55509d;
	color:#ffffff;
	font-size:22px;
	line-height:22px;
	display:block;
	text-align:center;
	padding:4px 3px;
	min-width:42px;
}
#agenda a span>span {
	color:#ffffff;
	font-size:10px;
	line-height:14px;
	display:block;
	text-transform:uppercase;
	text-align:center;
}


#agenda a#more-agenda {
	position:absolute;
	bottom:0;
	right:10px;
	color:#56509D;
	font-size:1rem;
	text-transform:uppercase;
}
#agenda a#more-agenda:after {
	content: "\2b";
	font-family: FontAwesome;
	color:#56509D;
	margin-left:3px;
	padding:4px;
}

#agenda a#more-agenda:hover {
	background:none;
	color: #545454;
}
#agenda a#more-agenda:hover:after {
	color:#545454;
	color:#ffffff;
	background-color:#118f94;
}


#stelling h2 {
	color:#55509d;
}

#stelling .stelling {
  list-style-type: none;
	margin:0;
  padding: 0;
}

#stelling .stelling li {
  position: relative;
  display:block;
}

#stelling .stelling label,
#stelling .stelling input {
  display: block;
}

#stelling .stelling input[type="radio"] {
  opacity: 0.01;
  z-index: 100;
}

#stelling .stelling input[type="radio"]:checked+label,
.Checked+label {
	border:2px #118f94 solid;
	background-color:#118f94;
	color:#ffffff;
	text-decoration:none;
}
#stelling .stelling input[type="checkbox"] {
  opacity: 0.01;
  z-index: 100;
}

#stelling .stelling input[type="checkbox"]:checked+label,
.Checked+label {
	border:2px #118f94 solid;
	background-color:#118f94;
	color:#ffffff;
	text-decoration:none;
}

#stelling .stelling label {
	cursor: pointer;
	z-index: 90;
	border:2px #118f94 solid;
	padding:10px 10px;
	display:block;
	font-family: 'AzoSans';
	font-weight: normal;
	font-style: normal;
	color:#118f94;
	font-size:1.1rem;
	text-decoration:none;
	position:relative;
}


#stelling .stelling label:hover {
	border:2px #55509d solid;
	background-color:#55509d;
	color:#ffffff;
}

.bodycontent h3 {
	text-transform:uppercase;
	font-size:1.1rem;
}

.bodycontent .img {
	position:relative;
}
.bodycontent .img:after {
	content: url(../images/bottomleft2.svg);
	display: block;
	width: 40%;
	max-width:25vw;
	position:absolute;
	bottom:-9px;
	left:-2px;
}

.lead {
	color:#55509d;
	font-size:1.1em;
}

#footer {
	color:#118f94;
	font-size:0.9rem;
}
#footer a {
	color:#118f94;
	text-decoration:none;
}
#footer a:hover{
	color:#55509D;
	text-decoration:none;
}


/*////////////////////////////////////
ZIJMENU
////////////////////////////////////*/
#zijmenu .nav-item{
	border-bottom: 1px solid #168F95;
}
#zijmenu .nav-item:first-of-type{
	border-top: 1px solid #168F95;
}
#zijmenu .nav-item.active .nav-link{
    font-weight: 600;   
}
#zijmenu a {
    color:#56509D;
}
#zijmenu a:hover {
    color:#168F95;
}


@media only screen and (min-width : 768px) {

    .fullscreen-menu #menukeuzes a {
    	font-size: 1.5rem;
    	line-height: 2em;
    }
    
}