/*
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(50px, 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 -- */
  --tech-green: #9EFF00;
  --circuit-blue: #003A51;
  --charcoal: #2F3034;
  
  --bright-orange: #FF5A00;

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


/************************/
/* Mouse effect ball */
/************************/

body {
  cursor: none;
}

#ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bright-orange);
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: rgba(0, 0, 0, 0.7) 0px 0px 30px 5px;
}


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