@import url("variables.css");

/******************************************************
* SWAZOOM FRONT-END STYLES
*
* Author: SowiesoDigital - https://sowiesodigital.nl/
*
*******************************************************/



/**********************
* GLOBAL
***********************/

::-moz-selection {
	background: rgba(0, 0, 0, 0.1);
}

::selection {
	background: rgba(0, 0, 0, 0.1);
}

body {
	font-family: var(--font-family-main);
}

body.menu-open {
  overflow: hidden;
}

body,
p {
	color: var(--black);
	font-size: var(--font-size-base);
	font-weight: 400;
	line-height: 175%;
	letter-spacing: 0%;
	vertical-align: middle;
}

body.h1 {
	position: relative;
	margin-top: -30px;
}

body h1:first-child {
	position: relative;
	top: 10px;
}

a {
	color: var(--link-color);
	font-weight: var(--text-bold);
	text-decoration: underline;
}
a:hover,
a:active {
	color: var(--link-hover-color);
}

hr {
	border-top: 1px solid #ccc;
	margin-top: 0px;
}

svg {
	width: 100%;
}

.zindex9999 {
    z-index:9999;
}

.cursorpointer {
    cursor:pointer;
}

.overflowhidden {
	overflow: hidden;
}

#content ul {
	list-style: none;
}

#content ul li::before {
	content: "\2022";
	color: var(--green);
	font-weight: bold;
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

#content ul.gform_fields  li::before, #content ul.pagination  li::before {
	content: "" !important;
}

.mt-5 {
	margin-top: 2rem!important;
}

.mt-6 {
	margin-top: 2.5rem!important;
}

.mt-7 {
	margin-top: 3rem!important;
}

.mt-8 {
	margin-top: 3.5rem!important;
}

.mt-9 {
	margin-top: 4rem!important;
}

.mt-10 {
	margin-top: 4.5rem!important;
}

.mb-5 {
	margin-bottom: 2rem!important;
}

.mb-6 {
	margin-bottom: 2.5rem!important;
}

.mb-7 {
	margin-bottom: 3rem!important;
}

.mb-8 {
	margin-bottom: 3.5rem!important;
}

.mb-9 {
	margin-bottom: 4rem!important;
}

.mb-10 {
	margin-bottom: 4.5rem!important;
}

.nobr {
	white-space: nowrap;
}

.wp-block-image img {
	margin-top: 25px;
	border-radius: 10px;
}

@media (max-width: 767px) {
	.wp-block-image img {
		width: 100% !important;
	}

	.wp-block-image figure {
		float: none !important;
		margin: 0 !important;
	}

}

/* breadcrumbs */
#breadcrumbs {
	padding-bottom: 20px;
	font-size: 15px;
}

#breadcrumbs A {
	color: #000;
}


/**********************
* FORMS
***********************/
input[type="text"] {
	outline: 0;
}

input,
input:focus {
	outline: 0 !important;
	box-shadow: none !important;
}


/**********************
* CONTENT
***********************/

.entry-content img {
	border-radius: 10px;
}

.wp-block-image .aligncenter {
	margin-left: auto !important;
	margin-right: auto !important;
}

.wp-block-image .aligncenter>figcaption {
	line-height: 150%;
}

figure.aligncenter {
	text-align: center;
}



/**********************
* WOBBLE
***********************/

.btn-wobble {
	cursor: pointer;
	transform: scale(1);
	transition: transform 0.15s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.btn-wobble.btn-wk-opac {
	transition: transform 0.15s ease-in-out, opacity 0.2s ease-in-out;
}

.btn-wobble:hover,
.btn-wobble:focus {
	transform: scale(1.09);
}

/**********************
* LAYOUT
***********************/

.wrapper {
	padding: 0;
	min-height: 400px;
}

#content {
	line-height: 165%;
}


/**********************
* ACF MAP
***********************/

.acf-map {
	width: 100%;
	height: 400px;
	margin: 20px 0;
}


/* fixes potential theme css conflict */
.acf-map img {
	max-width: inherit !important;
}


/**********************
* HERO
***********************/

.hero {
    background-size:cover;
    position:relative;
	min-height: 360px;
	height: 30vw;
	max-height: 400px;
}

.heroinner {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}

.heroinner img {
    display:block;
    width:100%;
}

.hero-strip {
	position: relative;
	left: 0;
	width: 100%;
	height: 21px;
	overflow: hidden;
	margin-top: 32px;
	margin-bottom: -6px;
	background-size: 151%;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.hero-strip {
		margin-bottom: -1px;
		background-size: 102%;
	}
}

/**********************
* INTRO
***********************/

.homepage_intro {
	color: #000;
	border: 1px;
}

@media (min-width:775px) {
	body h1:first-child {
		top: -5px;
		position: relative;
	}

}

.homepage_intro p {
	margin: 0 auto .25rem auto;
}

body.swazoomwelzijn .homepage_intro {
	background-color: var(--green);
}

body.swazoomwelzijn .homepage_intro p {
	color: #fff !important;
}

body.swazoomwelzijn .homepage_intro h1 {
	color: yellow;
}


/* ------------------*/



/**********************
* TABLEPRESS
***********************/

.tablepress thead th {
	background-color: #fff !important;
}

.tablepress tbody tr td,
.tablepress thead th {
	border-right: 1px solid red;
}

.tablepress tbody tr td:last-child,
.tablepress thead th:last-child {
	border-right: 0;
}

.tablepress tbody .even td {
	background-color: green !important;
}

.tablepress tbody .odd td {
	background-color: lightgreen !important;
}



/**********************
* FLY OUT
***********************/

.bs4wp-cta-flyout #cff {
  padding:20px;
}
.bs4wp-cta-flyout .em-pagination {
	margin-left: 30%;
	/* display: none; */
}

.bs4wp-cta-flyout {
	position: fixed;
	left: auto;
	right: -340px;
	top: 100px;
	width: 275px;
	z-index: 900;
	font-size: 14px;
	overflow: visible;
}

.bs4wp-cta-flyout .eventful-today {
	width: 22px !important;
	height: 22px !important;
	padding: 3px !important;
}



.bs4wp-cta-flyout .fbinner {
    width:100%;
    height:100vh;
    background-color:var(--blue-4);
}

.bs4wp-cta-flyout .fbinner2 {
    background-color: var(--blue);
    color: var(--white);
    cursor: pointer;
}

.bs4wp-cta-flyout .fbinner2 h4 {
    font-size:22px;
    padding:15px 0;
    margin:0;
}

.bs4wp-cta-flyout .instagram-block .fbinner2 {
    background-color: var(--red);
}
.bs4wp-cta-flyout .instagram-block #sb_instagram {
    padding: 1rem;
}

.bs4wp-cta-flyout .instagram-block .fbinner {
	background-color: var(--red-4);
}


.bs4wp-cta-flyout .actinner {
    background-color: var(--green);
    color: var(--white);
    cursor: pointer;
}

.bs4wp-cta-flyout .actinner h4 {
    font-size:22px;
    padding:15px 0;
    margin:0    

}

.bs4wp-cta-flyout .actinner2 {
    height:100vh;
    overflow:auto; 

    background-color:#d5cdde; 

}

@media (min-width: 1000px) {
	.bs4wp-cta-flyout {
		top: 165px;
	}

	body.swazoomwelzijn .bs4wp-cta-flyout {
		top: 190px;
	}

}

.bs4wp-cta-flyout>div {
	display: block;
	padding: 25px 10px 25px 0px;
	transition: background-color 0.2s ease-in-out, left 0.2s ease-in-out;
	position: relative;
	left: -64px;
	line-height: 110%;
}

.bs4wp-cta-flyout strong {
	display: block;
}
.em-pagination strong{
	display:inline;
}

.bs4wp-cta-flyout a {
	display: inline-block;
	text-decoration: none !important;
	color: #3f3f3f !important;
}

.bs4wp-cta-flyout>div:first-child {
	margin-bottom: 15px;
}

.bs4wp-cta-flyout>div:last-child>a {
	display: inline-block;
	margin: 8px 0 0 0;
}

.bs4wp-cta-flyout>div:last-child>a>i {
	width: 26px;
}

.bs4wp-cta-flyout>div>div {
	text-align: center;
	position: absolute;
	border-radius: 10px 0 0 10px;
	width: 60px;
	top: 0;
	left: 0;
	bottom: 0;
	cursor: default;
}

.bs4wp-cta-flyout>div>div>i {
	font-size: 36px;
}

.bs4wp-cta-flyout>div>div>p {
	font-size: 12px;
	font-weight: 500;
	margin: 5px 0 0 0;
	line-height: 110%;
}

.bs4wp-cta-flyout .open {
	left: -340px;
}

.bs4wp-cta-flyout .em-calendar {
	font-size: 18px;
	margin: 30px;
}

.bs4wp-cta-flyout .cta-header i.fa-calendar-alt {
	border-radius: 10px 0 0 10px;
	background-color: var(--green);
	width: 55px;
	position: absolute;
	right: 60px;
	padding: 10px;
	color: var(--white);
}

.bs4wp-cta-flyout .cta-header i.fa-facebook-f,
.bs4wp-cta-flyout .cta-header i.fa-instagram {
	position: absolute;
	right: 60px;
	width: 55px;
	padding: 10px;
	border-radius: 10px 0 0 10px;
	color: var(--white);
	cursor: pointer;
}
.bs4wp-cta-flyout .cta-header i.fa-facebook-f {
	background-color: var(--blue);
}
.bs4wp-cta-flyout .cta-header i.fa-instagram {
	background-color: var(--red);
}

/**********************
* VIDEO
***********************/



.swvideo {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.27198%;
}

.swvideo iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/**********************
* CALDENDAR WIDGET
***********************/



.widget {
	background-color: rgba(255, 255, 255, 0.9);
}

.widget-title {
	color: #5f2878;
	background-color: #cdd339;
	margin: 0 0 21px;
	padding: 10.5px 21px;
}

.widget ul {
	padding-right: 21px;
}

.widget_em_calendar {
	padding-bottom: 21px;
}

.em-calendar {
	margin: 0 auto;
}

.em-calendar {
	font-size: 24px;
}

div.em-calendar-wrapper {
	position: relative;
}

table.em-calendar td.eventful a,
table.em-calendar td.eventful-today a {
	color: #000;
}
table.em-calendar td.eventful-pre a {
	text-decoration: none;
}
table.em-calendar td.eventful-post a {
	text-decoration: none;
}

.widget_recent_entries {
	padding-bottom: 21px;
}

.sfsi_wicons {
	padding-top: 9px;
}



/**********************
* EVENT MANAGER 
***********************/



html[lang="nl-NL"] button.em-search-submit.loading:before {
	content: "Zoeken ";
}

html[lang="en-US"] button.em-search-submit.loading:before {
	content: "Search ";
}

.ui-widget-header {
	color: #000 !important;
}

.css-events-list table.events-table {
	border-spacing: 10.5px;
	border-collapse: separate;
}

.css-events-list table.events-table th.event-time,
.css-events-list table.events-table th.event-description {
	font-size: 10px;
	line-height: 20px;
}

.css-events-list table.events-table th.event-time {
	width: 42px;
}

.css-events-list table.events-table td {
	padding: 0 10.5px;
	line-height: 100%;
}

.date {
	box-sizing: border-box;
	width: 42px;
	height: 42px;
	background-color: #cdd339;
	text-transform: uppercase;
	color: #5f2878;
	font-size: 10px;
	line-height: 21px;
	text-align: center;
}

.date::first-line {
	font-size: 18px;
	font-weight: bold;
}



/**********************
* SHARE ICON
***********************/



#sfsi_holder {
	height: 30px !important;
}

.sfsi_plus_wicons {
	margin-bottom: 0px !important;
	position: relative;
	padding-top: 0px !important;
	height: auto !important;
}

a.sficn {
	top: -2px !important;
}

.sfsiplus_norm_row {
	text-align: right !important;
}

.sfsi_plus_widget {
	float: right;
	width: 94px;
	text-align: right;
	min-height: auto;
}

.sfsi_plus_wDiv {
	width: 91px !important;
}



/* social media ad remove footer */

.sfsiplus_footerLnk {
	display: none;
}




/**********************
* SEARCH FORM
***********************/



#container_zoeken .input-group>.input-group-append>.btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

#container_zoeken input.form-control {
	outline: 0;
	box-shadow: none;
}

#container_zoeken input.form-control:focus {
	outline: 0;
	box-shadow: none;
}

#container_zoeken {
	width: 100%;
	padding-top: 9px;
	padding-left: 0px;
}

body.swazoomwelzijn #container_zoeken {
	padding-top: 10px;
}

.fa-search:before {
	content: "\f002";
}



/**********************
* SEARCH
***********************/



#search-wrapper form {
	width: 40%;
	margin: 0 auto;
}

#search-wrapper #searchform input {
	display: block;
	font-size: 25px;
}

#search-wrapper .btn {
	display: none;
}

#search-wrapper h3 {
	padding: 15px 0 0 0;
}

nav ul.pagination {
	margin-top: 20px;
	padding: 15px;
}

.page-link {
	position: relative;
	display: block;
	padding: 7px 0 0 0;
	text-align: center;
	width: 40px;
	height: 40px;
	margin-right: 6px;
	border-radius: 37px;
	color: #53f;
	background-color: #fff;
	border: 1px solid #dee2e6;
}

.page-item:first-child .page-link {
	margin-left: 0;
	border-radius: 37px;
}

.page-item:last-child .page-link {
	margin-left: 0;
	border-radius: 37px;
}

.page-item.active .page-link {
	border: 0;
	color: var(--white);
	background-color: var(--green);
}

.bswp-pagbtns .btn {
	position: relative;
	display: inline-block;
	min-width: auto !important;
	padding: 2px 16px 0 16px;
	font-size: 22px;
	font-weight: 700;
	color: var(--black);
	letter-spacing: 1px;
	text-decoration: none;
	border-radius: 22px;
	margin: 0;
	background-color: var(--green);
	border-color: var(--green);
}
.bswp-pagbtns .btn:hover,
.bswp-pagbtns .btn:focus {
	background-color: var(--green-2);
	border-color: var(--green-2);
}

.bswp-pagbtns .btn i {
	color: var(--white);
	margin: 0;
}

.page-link.dots {
	color: var(--green);
}

.bswp-pagbtns .btn.disabled, 
.bswp-pagbtns .btn:disabled {
	background-color: var(--light-gray);
	border-color: var(--light-gray);
	color: var(--medium-gray);
}



/**********************
* SWAZOOM WERLZIJN SPECIFIC EXCEPTIONS
***********************/

/* logo smaller */

@media (max-width: 991px) {
	body.swazoomkinderopvang #main-menu li.menu-item a {
		font-size: 15px;
	}

}

body.swazoomwelzijn #main-menu li.menu-item a {
	font-size: 13px;
}

body.swazoomwelzijn #main-menu li.menu-item a {
	font-size: 13px;
}

@media (min-width:1100px) {
	body.swazoomwelzijn #main-menu li.menu-item a {
		font-size: 15px;
	}

	body.swazoomwelzijn #container_zoeken {
		padding-top: 12px !important;
	}

}

@media (min-width:1200px) {
	body.swazoomwelzijn #main-menu li.menu-item a {
		font-size: 17px;
	}

	body.swazoomwelzijn #container_zoeken {
		padding-top: 15px !important;
	}

}

body.swazoomwelzijn .headernav .btnsearch {
	color: var(--green);
	background-color: var(--light-gray) !important;
	/* width: 24px !important; */

	padding: 5px 17px;
	margin: 4px 0 0 0;
	/* width: 24px !important; */

	font-size: 18px !important;
	border-radius: 18px !important;
}

body.swazoomwelzijn .headernav #searchform input {
	display: none;
}

@media (max-width: 991px) {
	.mainmenucontainer {
		width: 100%;
		max-width: none;
	}

}



/* ------------------------------  */





/**********************
* ACTIVITEITENPAGINA
***********************/


.em-wrapper {
	background-color: green !important;
}

.em-search-submit {
	background: none !important;
}

div.css-search div.em-search-advanced label > span {
    display: block;
    float: none; 

    min-width: 100px;   

}



.em-date-input-loc.em-date-start.hasDatepicker {

  margin-bottom: 10px;  

}



body.page-parent .wrapper .css-events-list .date {
	background-color: var(--green) !important;
}

div.css-search div.em-search-text {
	margin: 0px;
	padding-left: 0px;
	background: none !important;
}

div.css-search {
	background: #e3e3e3;
	border: 0;
	border-radius: 0px;
	padding: 25px;
}

div.css-search input,
div.css-search select {
	padding: 5px;
	border: 0;
}

div.css-search div.em-search-main .em-search-submit {
	position: absolute;
	top: 25px;
	right: 17px;
	box-shadow: none;
	border-radius: 0;
	display: inline-block;
	border: 0;
	font-weight: bold;
	padding: 9px 10px;
	text-decoration: none;
	background-color: var(--green) !important;
	text-shadow: 1px 1px 0px #c7c5c7;
	line-height: 16px;
}

div.css-search input,
div.css-search select,
div.css-search option,
div.css-search div,
div.css-search span,
div.css-search button {
	font-size: 16px;
}
ul.page-numbers  {
  list-style-type: none !important;
 padding:0;
 margin: 0 auto;
}

ul.page-numbers li::before {
  content: "" !important;  
}
ul.page-numbers li {
  float:left;
}

/* Instagram plugin */
#sb_instagram .sbi_follow_btn a {
	font-weight: 400 !important;
	background: var(--red) !important;
}
#sb_instagram #sbi_load .sbi_load_btn {
	color: var(--white) !important;
	background: var(--black) !important;
}