/*
Theme Name: The Pageking Framework
Theme URI: https://www.pageking.nl
Version: 2.0
Description: Framework of the kings
Author: Pageking - Full swing digital agency
Author URI: https://www.pageking.nl
template: bb-theme
*/

:root {
	--Identity-Blue-1: #0D2075;
	--Identity-Blue-2: #3742FA;
	--Identity-Sky: #F5FCFF;
	--Identity-Highlight: #E1F5FF;

	--Psylaris-Care: #2392BA;
	--Psylaris-Relax: #AE2D6D;
	--Products-Remote: #CFA13F;

	--text-font: "articulat-cf", "Helvetica", "Arial", sans-serif;
	--text-color: var(--Identity-Blue-1);
	--heading-font: "neue-haas-grotesk-display", "Helvetica", "Arial", sans-serif;

	--button-bg-1: var(--Identity-Blue-2);
	--button-bg-1-hover: var(--Identity-Blue-1);
	--button-color-1: #ffffff;
	--button-color-1-hover: #ffffff;

	--button-color-2: var(--Identity-Blue-1);
	--button-color-2-hover: var(--Identity-Blue-1);

	--radius-normal: 16px;
	--radius-large: 32px;
}

@media screen and (max-width: 767px) {
	:root {
		--radius-normal: 10px;
		--radius-large: 10px;
	}
}

/* Add your custom styles here... */ 
.fl-animated.fl-fade-up {
	animation: fl-fade-up 1s ease;
	-webkit-animation: fl-fade-up 1s ease;
}
@-webkit-keyframes fl-fade-up {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fl-fade-up {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 30px, 0);
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

body .fl-page {
	font-family: var(--text-font);
	color: var(--text-color);
}
body h1, body h2, body h3, body h4, body h5, body h6 {
	margin-bottom: 1.5rem;
}
body h1, body h2, body h3, body h4, body h5, body h6,
body h1 .heading_text, body h2 .heading_text, body h3 .heading_text,
body h4 .heading_text, body h5 .heading_text, body h6 .heading_text {
	font-family: var(--heading-font);
	font-weight: 600;
	color: var(--text-color);
}
body h1, body h1 .heading_text {
	font-weight: 700;
}

#pk_flex_content .text_wrapper ul {
	padding-left: 0; list-style-type: none;
}
#pk_flex_content .text_wrapper ul li {
	padding-left: 1.75em; position: relative;
}
#pk_flex_content .text_wrapper ul li::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M17.1654 5L7.9987 14.1667L3.83203 10' stroke='%230D2075' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	position: absolute; left: 0; top: 0; z-index: 1; translate: 0 0.1em;
}

html body .fl-page dialog {
	border-radius: var(--radius-normal);
}
html body .fl-page dialog > .close-dialog {
	background-color: var(--Identity-Highlight); border-radius: 100%;
	padding: 0.5rem; width: auto; height: auto; right: 0.5rem; top: 0.5rem;
	transition: all 0.1s ease-in-out;
}
html body .fl-page dialog > .close-dialog:hover {
	background-color: var(--Identity-Blue-2);
}
html body .fl-page dialog > .close-dialog:hover svg path {
	stroke: #ffffff;
}

video {
	vertical-align: middle;
}


body .fl-page .gform_required_legend,
body .fl-page .gform_wrapper form .gfield--type-name legend {
	display: none;
}

body .fl-page .gform_wrapper .gfield--input-type-text, body .fl-page .gform_wrapper .gfield--type-email, body .fl-page .gform_wrapper .gfield--type-textarea, body .fl-page .gform_wrapper .gfield--type-website, body .fl-page .gform_wrapper .ginput_container--name > span {
	position: relative;
}
body .fl-page .gform_wrapper .gfield:not(.gfield--type-submit) input {
	line-height: 1 !important; min-height: 0 !important;
}
body .fl-page .gform_wrapper .gfield input, 
body .fl-page .gform_wrapper .gfield--type-textarea textarea{
	padding: 0.75rem 1rem; background-color: transparent; border: 1px solid rgba(13, 32, 117, 0.25);
	border-radius: 5px;
}
body .fl-page .gform_wrapper .gfield input::placeholder, 
body .fl-page .gform_wrapper .gfield--type-textarea textarea::placeholder {
	opacity: 0;
}
body .fl-page .gform_wrapper .gfield--input-type-text label, body .fl-page .gform_wrapper .gfield--type-email label, body .fl-page .gform_wrapper .gfield--type-textarea label,
body .fl-page .gform_wrapper .ginput_container--name label, body .fl-page .gform_wrapper .gfield--type-website label {
	position: absolute;
	left: 0.75rem;
	top: calc(1em + (0.75rem / 2));
	translate: 0 -50%; 
	padding-inline: 0.5rem;
	pointer-events: none;
	background: var(--Identity-Sky);
	color: var(--text-color); opacity: 0.5;
	transform-origin: center left;
	transition: scale 100ms ease-in-out, top 100ms ease-in-out, translate 100ms ease-in-out;
	margin: 0;
	font-weight: 400;
	font-size: 1rem;
	z-index: 1;
}
body .fl-page dialog .gform_wrapper .gfield--input-type-text label,
body .fl-page dialog .gform_wrapper .gfield--type-email label,
body .fl-page dialog .gform_wrapper .gfield--type-textarea label,
body .fl-page dialog .gform_wrapper .ginput_container--name label,
body .fl-page dialog .gform_wrapper .gfield--type-website label {
	background-color: #ffffff;
}
body .fl-page .gform_wrapper .gfield--input-type-text:has(input:is(:active, :focus)) .gfield_label, 
body .fl-page .gform_wrapper .gfield--type-email:has(input:is(:active, :focus)) .gfield_label, 
body .fl-page .gform_wrapper .gfield--type-website:has(input:is(:active, :focus)) label, 
body .fl-page .gform_wrapper .gfield--type-textarea:has(textarea:is(:active, :focus)) .gfield_label, 
body .fl-page .gform_wrapper .ginput_container--name span:has(input:is(:active, :focus)) label {
	top: 0;
	opacity: 1;
	scale: .875;
	font-weight: 700;
}
body .fl-page .gform_wrapper .gfield:not(:has(input:placeholder-shown)):not(:has(textarea:placeholder-shown)) .gfield_label {
	top: 0;
	opacity: 1;
	scale: .875;
}
body .fl-page .gform_wrapper.gravity-theme .gfield_required {
	color: var(--text-color);
}
body .fl-page .gform_wrapper form input[type="submit"] {
	background-color: var(--button-bg-1); color: var(--button-color-1);
	padding: 10px 24px; font-size: 16px; font-family: var(--heading-font);
	border-radius: 100px; width: fit-content; font-weight: 600;
	text-align: center; text-decoration: none; line-height: 1.5;
	transition: all 0.1s ease-in-out;
}
body .fl-page .gform_wrapper form input[type="submit"]:hover {
	background-color: var(--button-bg-1-hover); color: var(--button-color-1-hover);
}


.fl-animated.fl-fade-down {
	animation: fl-fade-down 1s ease;
	-webkit-animation: fl-fade-down 1s ease;
}
@-webkit-keyframes fl-fade-down {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fl-fade-down {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
button.cc-revoke.cc-bottom:active,
#cmplz-manage-consent .cmplz-manage-consent:active{
    top: unset !important;
    bottom: 0px !important;
    position: fixed !important;
}

/* ALTIJD ANIMATIE OP KNOPPEN */
a.fl-button {
    transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;
}
.fl-col-small {
    max-width: 100%;
}

/* ALS ER MAAR 1 ALINEA IS, GEEN MARGIN GEVEN */
.fl-rich-text >:only-child {
    margin: 0;
}
.fl-rich-text >:first-child {
	margin-top: 0;
}
.fl-rich-text >:last-child, .text-wrapper > *:last-child, p:last-child {
	margin-bottom: 0;
}
.fl-rich-text > p {
	margin-bottom: 1em;
}
.fl-rich-text h1, .fl-rich-text h2, .fl-rich-text h3,
.fl-rich-text h4, .fl-rich-text h5, .fl-rich-text h6 {
	margin-top: 1em;
	margin-bottom: 0.75em;
}
.fl-rich-text > blockquote {
	margin-block: 1em;
	font-size: 1.5em; padding: 0.5em 0 0.5em 1em;
}
.fl-rich-text > ul,
.fl-rich-text > ol {
	padding-left: 1em; margin-bottom: 1em;
}

/*LIST STYLE UL OL*/
.site-inner ul li, .site-inner ol li{
    list-style-position: inside;
}

.site-inner ul li{
    list-style-type: disc;
}

.site-inner ol li{
    list-style-type: decimal;
}

/*VERWIJDERD OMLIJNING POSTGRID*/
.fl-post-grid-post {
    border: 0px solid #e6e6e6;
}

/* video player lightbox */
.fl-button-lightbox-wrap .mfp-content{
    background: transparent !important;
}
.mfp-iframe{
    border: 0px !Important;
}
div.mfp-wrap .mfp-content button.mfp-close{
    background: transparent !important;
    color: white !important;
    font-size: 39px !important;
    margin-top: -30px !important;
    margin-right: -20px !important;
}

.accordion .accordion-content {
    max-height: 0; overflow: hidden; transition: all 0.3s ease-in-out;
}

/************************/
/**** CSS PER RIJ/ID ****/
/************************/



/************************/
/* MEDIA QUERIES DESKTOP*/
/************************/
@media screen and (min-width: 993px){
    .pp-content-posts-inner:not(.owl-carousel) .pp-content-post{ 
        width: 31.9% !important;
    }
	.fl-rich-text > blockquote {
		max-width: 75%;
	}
}

/************************/
/* MEDIA QUERIES TABLET */
/************************/
@media screen and (max-width: 992px) {
    
}

/************************/
/* MEDIA QUERIES MOBILE */
/************************/
@media screen and (max-width: 767px) {
    
    .fl-col-small:not(.fl-col-small-full-width) {
        max-width: 100%;
    }
    
    .owl-carousel.owl-loaded{
        overflow: hidden!important;
    }
    
    div.mfp-wrap .mfp-content button.mfp-close{
        background: transparent !important;
        color: white !important;
        font-size: 39px !important;
        margin-top: -40px !important;
        margin-right: 10px !important;
    }
    
}