/*   
Theme Name: Dominicus
Author: De Zagerij ontwerpbureau
Template: esteem
Version: 1.0
*/

/* Apply basic typography styles */
@import url('../esteem/style.css');
@import url('responsive.css');
@import url('fullcalendar.css');

/* Import font */
@import url('font/stylesheet.css');
@import url('stylefonts.css');



/* algemene aanpassingen */
#page {
	background: #cec7f6;
}

.home .site-header {
	border-bottom: 0;
}

#logo {
	width: 100vw;
	height: 150px;
	background: #cec7f6;
	position: fixed;
	left: 50%;
	-ms-transform: translateX(-50%);
  	transform: translateX(-50%);
  	z-index: 3;
}

.logo {
	content: url(images/Dominicus-logo.svg);
  	position: fixed;
  	width: 200px;
  	left: 50%;
  	-ms-transform: translateX(-50%);
  	transform: translateX(-50%);
  	top: 20px;
}

#main {
  padding-top: 25px;
  margin-bottom: 20px;
}

#primary,
#secondary {
	position: relative;
	z-index: 2;
	padding-top: 150px;
}

.single-post #primary {
	  left:17.18%;
	}

#symbool {
	display:block;
	margin-left: auto;
	margin-right: auto;
	width: 30px;
	padding-bottom: 10px;
}

#site-generator,
.widget-wrap {
	position: relative;
	z-index: 2;
}

a#scroll-up {
	z-index: 9999 !important;
	right: 60px; !important;
	color: #fff;
}

.wp-block-columns.fotokolom {
    margin-bottom: 0 !important;
}

.aangepaste-tabel tr>td:nth-child(1) { 
	width: 35%;
}

/* cirkels in achtergrond */
#top {
	position: fixed;
	right: 60px;
	top: 0vw;
	z-index: 4;
}

#bottom {
	position: fixed;
	bottom: 10px;
  	left: 50%;
  	-ms-transform: translateX(-50%);
  	transform: translateX(-50%);
}

#left {
	position: fixed;
	left: -12vw;
  	top: 151px;
}

#top { 
	width: 12vw;
    height: 12vw;
    border-radius: 0 0 0 12vw;
     -moz-border-radius: 0 0 012vw;
    -webkit-border-radius: 0 0 0 12vw; 
}

#bottom,
#left { 
	width: 24vw;
    height: 24vw;
    border-radius: 12vw;
    -moz-border-radius: 12vw;
    -webkit-border-radius: 12vw; 
}

#top { 
   border: 3vw #c5bdf5;
   border-style: none none solid solid;
}

#bottom,
#left { 
   border: 3vw solid #c5bdf5;
}

.home #top { 
   border: 3vw #ee2361;
   border-style: none none solid solid;
}

.home #bottom,
.home #left { 
   border: 3vw solid #ee2361;
}


/* typografie */
body,
button,
input,
select,
textarea {
	color: #2c2185;
	font-family: 'metropolisregular', sans-serif;
	font-size: 16px;
	line-height: 24px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'metropolisbold', sans-serif;
}

h1, h3, h5, h6 {
	color: #2c2185;
}

h1 {
	font-size: 30px;
	line-height: 38px;
	text-align: center;
}

h2 {
	font-size: 20px;
	line-height: 30px;
	color: #ee2b61;
	padding-bottom: 10px;
}

h3 {
	font-size: 22px;
	line-height: 30px;
}

h4 {
	font-size: 16px;
	padding-bottom: 5px;
	color: #ee2b61;
	text-transform: uppercase;
}

.intro {
	color: #fff;
	font-family: 'metropolismedium', sans-serif;
	font-size: 22px;
	line-height: 30px;
	margin-bottom: 50px;
	text-align: center;
}

#primary a {
	text-decoration: underline;
	color: #2c2185;
}

#primary a:hover {
	color: #ee2b61;
}

.pijl:before {
	content: "\e901";
	font-family: 'icomoon';
	padding-right: 10px;
	font-size: 14px;
}

.pijlterug:before {
	content: "\e904";
	font-family: 'icomoon';
	padding-right: 10px;
	font-size: 14px;
}

strong {
	font-family: 'metropolismedium', sans-serif;
}

.home hr {
  	background-color: #cec7f6;
}

hr.wp-block-separator {
  	background-color: #2c2185;
}

.wp-block-image figcaption {
	font-family: 'metropolisitalic', sans-serif;
  	color: #2c2185;
  	line-height: 16px;
}

/* zijbalk navigatie */
.hamburger {
	position: fixed;
  	z-index: 4;
  	top: 0;
  	right: 0;
  	padding: 25px 8px;
  	background-color: #2c2185;
 	height: 100%;
  	color: #ffffff;
  	font-size: 50px;
  	display: block;
}

.menu {
	font-size: 15px;
	line-height: 40px;
}

.sidenav {
  	height: 100%;
  	width: 0;
  	position: fixed;
  	z-index: 5;
  	top: 0;
  	right: 0;
  	background-color: #2c2185;
  	overflow-x: hidden;
  	transition: 0.5s;
  	padding-top: 95px;
}

.sidenav a {
 	padding: 8px 8px 8px 20px;
 	font-size: 18px;
  	line-height: 18px;
  	color: #fff !important;
  	display: block;
  	transition: 0.3s;
}

.sidenav a:hover {
  	color: #ee2361 !important;
}

.sidenav .closebtn {
  	position: absolute;
  	top: 0;
  	right: 0;
  	padding: 30px 10px;
  	font-size: 42px;
}

.sub-menu li > ul {
	margin-left: 1.0em;
}

.sub-menu li {
	border-bottom: 1px solid #2c2185;
}

.menu-item {
	border-bottom: 1px solid #c5bdf5;
}

/* Dropdown naast items met submenu */
.menu-item-has-children > a:after {
	content: "\e900";
	font-family: 'icomoon';
   	position: absolute;
	right: 10px;
	font-size: 14px;
}

/* actief menu */
.sidenav li.current_page_item > a, .sidenav li.current-menu-ancestor > a {
    color: #ee2361 !important;
}

.current-menu-item > a {
    color: #ee2361 !important;
}

/* submenu standaard ingeklapt */
.sub-menu {
    min-width: 100%; /* Set width of the dropdown */
    display: none;
    position: relative;
    left: 0;
}

/* zoeken in menu */
.zoeken {
  margin: 10px 20px !important;
}

/* serie */
.single-serie figcaption,
.wp-block-table figcaption {
	font-family: 'metropolisitalic', sans-serif;
	color: #2c2185;
	line-height: 16px;
}

/* Uitgelicht op homepage */
.home .entry-content .wp-block-query ul {
  	list-style: none;
}

.home .entry-content .wp-block-query ul, .page .entry-content .wp-block-query ol {
  	margin: 0;
}

.home .post {
  	border-bottom: 0 !important;
  	margin-bottom: 0 !important;
 	padding-bottom: 0 !important;
}

.home .wp-block-post-date {
	font-style: italic;
}

.home .wp-block-post-excerpt__more-link {
	background-color: #ee2b61;
  	padding: 5px 10px;
  	border-radius: 5px;
  	color: #ffffff !important;
  	text-decoration: none !important;
}

.home .wp-block-post-excerpt__more-link:hover {
  	color: #2c2185 !important;
}

.home .lijst li {
  margin: 0 !important;
  list-style: none;
}

.home .lijst li {
	border-bottom: 1px solid #2c2185;
	padding: 10px;
}

.home .lijst h4 {
	border-bottom: 1px solid #2c2185;
}

.home .lijst li:hover {
	background: #cec7f6;
}

.home .lijst a {
	text-decoration: none !important;
}

.home .wp-block-latest-posts__post-title {
	font-family: 'metropolismedium', sans-serif;
}

.home .eo-events img {
	padding-bottom: 15px;
}

/* seriesoverzicht pagina */
.page-template-seriesoverzicht .page .entry-content ul {
	list-style: none !important;
	margin-left: 0 !important;
}

.serie .gb-button-text {
	text-decoration: none !important;
	color: #fff !important ;
}

.serie .gb-button-text:hover {
	color: #2c2185 !important;
}

.paginering .gb-button-text {
	text-decoration: none !important;
}

h2.gb-headline-text::first-line {
	font-size: 20px;
	color: #2c2185;
}

h2.gb-headline  {
	margin-bottom: 0 !important;
}

h2.gb-headline a {
	text-decoration: none !important;
}

.gb-headline-text::first-line {
	font-size: 15px;
	font-family: 'metropolisbold', sans-serif;
}

.single-serie #primary {
	width: 100% !important;
}

.single-serie h1 {
	text-align: left;
}

/* kerkdienst kijken */
.kdgm-responsive-player {
 	position: relative;
 	padding-bottom: 56.25%; /* 75% voor 4:3 video */
 	height: 0;
 	overflow: hidden;
 }
 
 .kdgm-responsive-player iframe {
 	position: absolute;
 	top:0;
 	left: 0;
 	width: 100%;
 	height: 100%;
 }

 iframe {
 	max-width: 100%
 }
 
#playList ol.recordings {
	background: red !important;
	padding-top: 50px !important;
}

 /* accordion */
.c-accordion__title:hover,
.wp-block-pb-accordion-item.c-accordion__item.js-accordion-item.is-read.is-open .c-accordion__title {
	background: #c5bdf5;
}

.c-accordion__content {
	padding: 20px 20px 10px 20px;
	background:rgba(255, 255, 255, 0.9);
}

.c-accordion__title {
	text-align: center;
	border-top: 1px solid #2c2185;
	padding: 10px 0;
	color: #2c2185;
}

.c-accordion__title:after {
	padding-right: 10px;
	color: #2c2185;
}

.accordion-groep {
	border-bottom: 1px solid #2c2185;
}

/* slider */
.fotoslider .c-accordion__content {
	padding: 0;
}

.block-slider .blockslider-navigation-wrapper .blockslider-prev-btn,
.block-slider .blockslider-navigation-wrapper .blockslider-next-btn {
	background-color: rgb(206, 199, 246, 0.0) !important;
}

.block-slider .blockslider-navigation-wrapper .blockslider-prev-btn path,
.block-slider .blockslider-navigation-wrapper .blockslider-next-btn path {
  fill: #cec7f6 !important;
}

.home .wp-block-image {
	margin: 0;
}

/* nieuwsoverzicht & zoekresultaten */
.search #primary h3 a,
.blog #primary h3 a {
	text-decoration: none !important;
}

.search #primary h3 a:hover,
.blog #primary h3 a:hover {
	color: #ee2b61 !important;
}

.search .entry-header,
.blog .entry-header {
  padding-bottom: 0;
}

.search .entry-content,
.blog .entry-content {
  padding-top: 0 !important;
}

.search .readmore-wrap,
.blog .readmore-wrap {
  background-color: #ee2b61;
  padding: 5px 10px;
  border-radius: 5px;
}

.search .readmore-wrap a,
.blog .readmore-wrap a {
	text-decoration: none !important;
	color: #ffffff !important;
}

.search .readmore-wrap a:hover,
.blog .readmore-wrap a:hover {
	color: #2c2185 !important;
}

.search #content .page,
.search #content .post,
.search #content .serie,
.search #content .event,
.blog #content .post {
  padding-bottom: 25px;
  margin-bottom: 50px;
  border-bottom: 1px solid #2c2185;
}

.blog .meta,
.single .meta {
	font-style: italic;
}

.blog h1,
.search h1 {
	padding-bottom: 30px !important;
}

/* nieuwspaginas */
.single-post h1 {
	text-align: left;
}

.single-post .entry-content {
	padding-top: 10px;
}

.single-post .wp-block-image {
	padding-bottom: 10px;
}

.previous a, 
.next a {
	border: 0 !important;
	border-radius:0;
 	padding: 0;
 	text-decoration: none !important;
}

.previous a:hover, 
.next a:hover {
	background: none !important;
}

/* agenda & evenementen */
.home .eo-events {
	list-style: none !important;
	margin-left: 0 !important;
}

.home .agenda .eo-events li {
	border-bottom: 1px solid #2c2185;
	padding: 10px;
}

.home .agenda .eo-events li:first-child {
	border-top: 1px solid #2c2185;
	padding: 10px;
}

.home .agenda .eo-events li:hover {
	background: #cec7f6;
}

.home .agenda .eo-events a,
.home .agenda .eo-events a:hover,
.home .agenda .eo-events a:visited,
.home .agenda .eo-events a:active,
.wp-block-button__link,
.home .verder a {
	color: #2c2185;
	text-decoration: none !important;
}

.home .eo-events .button a,
.widget .eo-events .button a,
.wp-block-button__link,
.home .verder a {
	background-color: #ee2b61;
  	padding: 5px 10px;
  	border-radius: 5px;
  	color: #ffffff !important;
}

.home .eo-events .button a:hover,
.widget .eo-events .button a:hover,
.wp-block-button__link:hover,
.home .verder a:hover {
  	color: #2c2185 !important;
}

.event .kop {
	display: none; /* geen paginatitel op homepage */
}

.event .entry-content {
  padding-top: 0;
}

.event h1,
.single-event h1 {
	text-align: left;
	padding-bottom: 10px;
}

.event hr {
	background-color: #2c2185;
}

.widget ul li a::before {
  	display: none;
}

.widget ul li a {
  	color: #2c2185;
}

.widget ul li {
  	line-height: 24px !important;
  	margin: 0 !important;
}

.widget > ul > li {
  	border-bottom: 1px solid #2c2185 !important;
}

.widget > ul > li:first-child {
  	border-top: 1px solid #2c2185 !important;
}

.widget .eo-events li {
  padding: 10px 5px;
}

.widget .eo-events li:hover {
  background: #c5bdf5;
}

.widget h4 {
	padding-bottom: 0;
	line-height: 20px;
}

.widget {
  	margin: 0;
}

.eo-events .type:before {
  	content: "\e905";
	font-family: 'icomoon';
	padding-right: 3px;
	font-size: 14px;
	color: #ee2b61;
}

.eo-event-cat-extern .type:before {
  	color: #2c2185;
}

.type-d:before {
  	content: "\e905";
	font-family: 'icomoon';
	padding-right: 3px;
	font-size: 14px;
	color: #ee2b61;
}

.type-e:before {
  	content: "\e905";
	font-family: 'icomoon';
	padding-right: 3px;
	font-size: 14px;
	color: #2c2185;
}

.type-d,
.type-e {
  padding-bottom: 0px !important;
}

/* aanmelden nieuwsbrief */
input[type="submit"] {
	font-size: 16px;;
	border-radius: 5px;
}

input[type="submit"]:hover {
	background-color: #2c2185;
}

/* footer */
#colophon {
	border-top: 0 !important;
	background: #2c2185;
	color: #fff;
}

#site-generator {
  	border-top: 0;
  	color: #fff;
  	font-size: 14px;
  	text-align: center;
}

#site-generator a,
#colophon a {
  	text-decoration: underline;
  	color: #fff !important;
}

#site-generator a:hover,
#colophon a:hover {
   	color: #fff !important;
}