/*
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: clamp(30px, 8.1632653061vw, 64px);
  
  --heading-1-page: clamp(30px, 8.1632653061vw, 60px);
  
  --heading-2: clamp(28px, 4.7346938776vw, 48px);

  --heading-3: clamp(20px, 3.4285714286vw, 40px);

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

  --heading-5: clamp(18px, 2.2857142857vw, 20px);

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

  
  /* -- Colors -- */
  --dark-blue: #113A56;
  --mid-blue: #0181BC;
  --light-blue: #E2EFFF;
  --light-blue-bg: rgba(226, 239, 255, 0.4);
  

  

  /* NOTE: alle spacings op de website op REM basis!!! 1rem = 16px */
}

/* #pk_flex_content header {
  position: absolute;
  z-index: 999;
  width: 100%;
  transform: translate(0px, 0px);
  background: transparent;
}
 */

html .fl-page-content{
     position: relative;
     z-index: 1;
     background-color: var(--off-white);
     overflow:  clip;
 }
 html body:not(.wp-admin):not(.login) h1 {
     font-size: var(--heading-1);
     line-height: 1.3;
 }
 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;
 }



header.fl-builder-content {
  background: rgba(17, 58, 86, 0) ;
  transition: all 0.5s ease;
  max-height: 90px;    
}

header.fl-builder-content.fl-builder-content-898.fl-theme-builder-header-sticky.fl-theme-builder-header-scrolled {
  padding-top: 0px;
  transform: translate(0px, 0px);
  background: rgba(17, 58, 86, 1) ;
  transition: all 0.5s ease;
  /* max-height: 90px;      */
}

header ul#menu-hoofd-menu li:hover a{
  text-decoration: underline;
}

header ul#menu-hoofd-menu li.header-register {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 20px;
  order: 2;
}

header ul#menu-hoofd-menu li.header-register a {
 color: var(--dark-blue);
 padding: 12px 24px;
 background: var(--light-blue);
 border-radius: 100px;
 font-weight: 500;
 line-height: 1;
}

header ul#menu-hoofd-menu li.header-register a:hover,
header ul#menu-hoofd-menu li.header-register:hover a {
text-decoration: none;
}

header ul#menu-hoofd-menu li.header-register::after {
    content: '';
    display: inline-block; 
    height: 40px; 
    width: 40px;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    background-position: center; 
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.3995 10.3995V0.500041M10.3995 0.500041H0.499959M10.3995 0.500041L0.499959 10.3995' stroke='%23E2EFFF' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    transition: all 0.3s ease;
    background-color: var(--mid-blue);
    border-radius: 100px; 
    transform: rotate(0deg);
}

header ul#menu-hoofd-menu li.header-register:hover::after {
    transform: rotate(45deg);
}


#header_nav_logo .fl-module-photo{
  padding: 0;
}

/* Language Toggle styling */
header ul li.language_selector {
 order: 1;
 text-transform: uppercase;
 cursor: pointer;
}

header ul li.language_selector a.language_selected {
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px; 
  justify-content: center;
}

header ul li.language_selector a.language_selected::after {
    content: '';
display: inline-block; 
height: 16px; 
width: 16px;
background-repeat: no-repeat;
background-size: 16px 16px;
background-position: center; 
background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.8333 7.16667C13.8333 10.8486 10.8486 13.8333 7.16667 13.8333M13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5M13.8333 7.16667H0.5M7.16667 13.8333C3.48477 13.8333 0.5 10.8486 0.5 7.16667M7.16667 13.8333C5.45482 12.0359 4.5 9.64884 4.5 7.16667C4.5 4.68449 5.45482 2.29744 7.16667 0.5M7.16667 13.8333C8.87851 12.0359 9.83333 9.64884 9.83333 7.16667C9.83333 4.68449 8.87851 2.29744 7.16667 0.5M0.5 7.16667C0.5 3.48477 3.48477 0.5 7.16667 0.5' stroke='%23FDFEFF' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
transition: all 0.3s ease;
}

header ul li.language_selector a {
 text-decoration: underline;
 font-size: 16px;
 font-weight: 300;
 line-height: 100%;
 }

header ul li.language_selector div {
max-height: 0;
overflow: hidden;
}

header ul li.language_selector.active div {
overflow: visible;
}

header ul li.language_selector div a {
  background: white;
  border-radius: 40px;
  text-align: center;
  color: var(--dark-blue);
  width: fit-content;
  padding: 10px;
  margin-inline: 20px;
}

header ul li.language_selector div a:hover {
  color: var(--dark-blue);
}



@media screen and (max-width: 977px){
  header ul li.language_selector {
   order: 1;
   text-transform: uppercase;
   cursor: pointer;
   display: flex;
   flex-direction: row;
   justify-content: center;
  }
  
  header ul li.language_selector div {
  max-height: unset;
}

header ul li.language_selector div a{
  margin-inline: 0;
  margin-block: 10px;
  background: transparent;
  color: white;
}


}



@media screen and (max-width: 977px){
 
 header {
 position: sticky; 
 }
 
  header div.fl-row-content-wrap {
    background: var(--dark-blue) !important;
  }
  
  header #main_menu.fl-menu-mobile-clone {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  header #main_menu.fl-menu-mobile-clone div div {
  text-align: center;
  font-size: 18px;
  }
  
}





/** FOOTER **/

#footer a:hover {
  text-decoration: underline;
}

#footer .fl-row-content {
  color: white;
}

@media screen and (max-width: 977px){
  #footer .fl-row-content {
    padding-inline: 20px;
  }
  
}


#footer .fl-row-content-wrap {
border-radius: 10px;
margin: 20px;
background: linear-gradient(148deg, rgba(1, 104, 159, 0.80) 17.82%, rgba(15, 59, 91, 0.80) 53.65%);
  position: relative;
  overflow: hidden;
}

#footer .fl-row-content-wrap .fl-row-content{
  z-index: 2;
}

#footer .fl-row-content-wrap::after {
    content: url("data:image/svg+xml,%3Csvg width='1490' height='893' viewBox='0 0 1490 893' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M109.21 790.932C-120.117 651.108 31.7414 193 378.335 47.5089C724.927 -97.9818 1135.01 124.242 1364.33 264.065C1593.66 403.889 1498.6 635.18 1152.01 780.671C805.414 926.162 338.538 930.754 109.21 790.932Z' fill='url(%23paint0_linear_1018_1101)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_1018_1101' x1='948.839' y1='865.955' x2='748.907' y2='-32.8086' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.0916822' stop-color='%23A4374C'/%3E%3Cstop offset='0.40625' stop-color='%23A04254'/%3E%3Cstop offset='0.645833' stop-color='%23534B6E'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    position: absolute;
    right: -50%;
    bottom: -100%;
    pointer-events: none;
    height: 80%;
    width: auto;
    display: block;
    filter: blur(90px);
    opacity: 1;
    transform: scaleY(-1) rotate(-22deg);
    animation: blob-drift-footer 12s ease-in-out infinite;
  }


#footer .fl-col-group div,
#footer .fl-col-group div div{
  max-width: 100%;
}


#footer .footer_contact_block .fl-col-content {
  background: var(--light-blue);
  border-radius: 10px;
  color: var(--dark-blue);
  padding: 36px 30px;
  /* margin-inline: 20px; */
}

#footer .footer_contact_block .fl-col-content div {
  margin: 0;
}

#footer .footer_contact_block .fl-col-content p {
 font-size: 20px;
 font-style: normal;
 font-weight: 300;
 line-height: 140%;
 margin-bottom: 10px;
}

#footer .footer_contact_block .fl-col-content div a {
  border: none; 
  background: none;
  padding: 0;
}

#footer .footer_contact_block .fl-col-content div a:hover span {
  text-decoration: underline;
}

#footer .footer_contact_block .fl-col-content div a span {
  color: var(--dark-blue);
  font-size: clamp(18px, 3vw, 25px);
  font-style: normal;
  font-weight: 400;
  line-height: 120%; 
}

#footer .lower_footer_menu nav ul li a {
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 300;
  transition: all 0.3s ease;
}

#footer .lower_footer_menu nav ul li a:hover {
  color: white;
  transition: all 0.3s ease;
}

@media screen and (max-width: 767px){
  #footer .fl-row-content-wrap {
  margin: 0px;
}
}

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