/*
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
*/

/* Add your custom styles here... */
.fl-page {
  overflow: clip;
}

.otgs-development-site-front-end {
  display: none;
}

:root {
  /* Headings */
  --heading-1-large: clamp(64px, 9.8vw, 120px);
  --heading-1: clamp(54px, 8.1632653061vw, 100px);

  --heading-2: clamp(38px, 4.7346938776vw, 58px);

  --heading-3: clamp(32px, 3.4285714286vw, 42px);

  --heading-4: clamp(28px, 2.9387755102vw, 36px);

  --heading-5: clamp(22px, 2.2857142857vw, 28px);

  /* Text Variables */
  --body-xl: 22px;
  --body-l: 20px;
  --body-m: 18px;
  --body-s: 16px;
  --body-xs: 14px;

  /* Text Weights */
  --weight-regular: 400;
  --weight-bold: 500;

  /* -- Primary Colors -- */

  /* -- Secondary Colors -- */
  --turquoise-light: #cde1b0;
  --turquoise-medium: #6bbe98;
  --turquoise-dark: #1a6d75;

  --blue-light: #acc6fa;
  --blue-medium: #6a9fd3;
  --blue-dark: #2c678e;

  --purple-light: #b9acd1;
  --purple-medium: #825699;
  --purple-dark: #5d286f;

  --orange-light: #e8a166;
  --orange-medium: #df7a2e;
  --orange-dark: #d85839;

  /* -- Neutrals -- */
  --pure-white: #ffffff;
  --off-white: #f8f7f5;
  --beige: #eae8e3;
  --light-gray: #ededed;

  --pure-black: #000000;
  --off-black: #1f212b;
  --dark-gray: #585a5f;
  --mid-gray: #8c8c90;

  /* NOTE: alle spacings op de website op REM basis!!! 1rem = 16px */
}
html .fl-page-content {
  position: relative;
  overflow: clip;
}
/* html body:not(.wp-admin):not(.login) h1 {
  font-size: var(--heading-1);
  line-height: 1;
}
html body:not(.wp-admin) h2 {
  font-size: var(--heading-2);
  line-height: 1.2;
}
html body:not(.wp-admin) h3 {
  font-size: var(--heading-3);
  line-height: 1.2;
}
html body:not(.wp-admin) h4 {
  font-size: var(--heading-4);
  line-height: 1.2;
}
html body:not(.wp-admin) h5 {
  font-size: var(--heading-5);
  line-height: 1.2;
} */

/* DIALOG */
html body dialog {
  border-radius: 1rem;
  text-align: left;
}
html body dialog > .dialog-wrapper {
  position: relative;
}

html body dialog > .dialog-wrapper h3 {
  margin-bottom: 0.7em;
}

html body dialog > .dialog-wrapper .close-button {
  position: absolute;
  top: 0;
  right: 0;
}

/*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;
}

/* 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;
}

.user_popup .close-button {
  display: flex;
  align-items: center;
  gap: 1rem;
  top: 3.5rem;
  right: 3.5rem;
  background-color: transparent;
  border: none;
  border-radius: unset;
  color: var(--charcoal);
  font-size: var(--body-m);
  padding: 0;
  z-index: 1;
}

/************************/
/* MEDIA QUERIES DESKTOP*/
/************************/
@media screen and (min-width: 993px) {
}

/************************/
/* 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%;
  }

  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;
  }
}