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

 Theme Name:   Pooldartcentre Den Helder | Pool | Biljart | Snooker | Lasergame | Karaokerooms | Dart | Spelletjes | Bar
 Theme URI:    https://pooldartcentre.nl
 Description:  Customized divi theme by Netfire
 Author:       Netfire
 Author URI:   https://netfire.nl/
 Template:     Divi
 Version:      1.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/*********************************
* Variables */
:root{
    --donkerblauw: #17254d;
    --hoverblauw: #1e3064;
    --lichtblauw: #2f4b9a;
    --roze: #c5218c;
    --oranje: #f39200;
    --hoveroranje: #f99f18;
    --oranjebg: #fbd296;
}

/********************************
* Logo mobile */
@media only screen and (max-width:980px) {
	.et_menu_container #logo,
	.et_menu_container .logo_container {
		width: 90% !important;
		max-width: 350px !important;
    }
}
/********************************
* Logo mobile */
.et_menu_container #logo{
    width: 90% !important;
		max-width: 300px !important;
    max-height: 100% !important;
}

/*********************************
 * Text selection */
::-moz-selection {  color: #1d1d1b;background-color:var(--oranje);}
::selection {       color: #1d1d1b;background-color:var(--oranje);}

/*********************************
* youtube icon header */
.et-social-youtube a.icon:before { content: '\e0a3'; }

/*********************************
 * Credits */
.netfire{
    display: block;
    width: 20px;/*30*/
    height: 30px;/*45*/
    background: url(https://netfire.nl/images/logo_netfire_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}


/********************************
 * Footer heading */
.et_pb_gutters3.et_pb_footer_columns3 .footer-widget .fwidget{
  margin-bottom:20px !important;
}
@media (max-width: 767px) {
    #footer-widgets .footer-widget .et_pb_widget{
        float:none;
        margin-bottom:20px !important;
    }
}

/********************************
 * Footer table */
#main-footer .footer-widget:first-child table{table-layout: initial;}
#main-footer .footer-widget:first-child table td{border:0;padding:0;}

/********************************
 * Footer vacature */
#main-footer .footer-widget:nth-child(2){
  margin-top:-30px;
  background-color: #fff;
  padding: 30px;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.2));
  border-radius: 12px;
  color: var(--donkerblauw);
}
#main-footer .footer-widget:nth-child(2):hover{
  background-color: rgba(255,255,255,.95);
}
#main-footer .footer-widget:nth-child(2) h2{
  color:var(--donkerblauw);
  font-weight:bold;
}
#main-footer .footer-widget:nth-child(2) a {  
  color:var(--donkerblauw);
  font-weight:bold;
}



/********************************
 * Top header */

  #top-header, #top-header .container{
    z-index:3;
  }
  /* Basis: vaste oranje header, met eigen stacking context */
  .et_fixed_nav #page-container #top-header,
  .et_secondary_nav_enabled #page-container #top-header {
    background-color: #f39200;
    isolation: isolate;         /* houdt glow binnen de balk */
    overflow: hidden;           /* snij glow netjes af aan randen */
  }

  /* Neon sweep (kleurband) – bovenop de oranje basis */
  .et_fixed_nav #page-container #top-header::before,
  .et_secondary_nav_enabled #page-container #top-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;                 /* standaard uit: dan zie je alleen oranje */
    background-size: 300% 100%;
    background-position: 0% 0%;
    animation: neonSweep 24s ease-in-out infinite;
    z-index: 1;                 /* onder de header-content */
  }

  /* Neon glow/bloom – zelfde sweep, maar zacht en geblurd */
  .et_fixed_nav #page-container #top-header::after,
  .et_secondary_nav_enabled #page-container #top-header::after {
    content: "";
    position: absolute;
    inset: -4px 0;             /* iets groter voor mooie ‘bleed’ */
    pointer-events: none;
    opacity: 0;                 /* standaard uit */
    filter: blur(12px);
    background-size: 300% 100%;
    background-position: 0% 0%;
    mix-blend-mode: screen;     /* laat kleuren ‘lichten’ op het oranje */
    animation: neonBloom 24s ease-in-out infinite;
    z-index: 2;
  }

  /* --- Animaties: vaste oranje → neonfase (schuiven) → terug naar oranje --- */
  @keyframes neonSweep {
  0%, 10% { opacity: 0; background-position: 0% 0%; } /* volledig oranje */

  /* NEON 1: groen */
  15%, 27% {
    opacity: 1;
    background-image: linear-gradient(30deg, #f39200 0%, #25ff73 40%, #00c244 55%, #0b6b1f 100%);
    background-position: 0% 0%;
  }
  27%, 30% { background-position: 100% 0%; }

  /* NEON 2: blauw/cyaan */
  30%, 42% {
    opacity: 1;
    background-image: linear-gradient(30deg, #0b6b1f 0%, #54d4ff 40%, #1aaaff 55%, #0a2a73 100%);
    background-position: 0% 0%;
  }
  42%, 45% { background-position: 100% 0%; }

  /* NEON 3: paars */
  45%, 57% {
    opacity: 1;
    background-image: linear-gradient(30deg, #0a2a73 0%, #b07aff 40%, #8b4dff 55%, #3a1673 100%);
    background-position: 0% 0%;
  }
  57%, 60% { background-position: 100% 0%; }

  /* NEON 4: magenta/roze */
  60%, 72% {
    opacity: 1;
    background-image: linear-gradient(30deg, #3a1673 0%, #ff66c7 40%, #ff33a8 55%, #7a0f4e 100%);
    background-position: 0% 0%;
  }
  72%, 75% { background-position: 100% 0%; }

  /* NEON 5: oranje (neon) → perfecte brug terug naar basis */
  75%, 87% {
    opacity: 1;
    background-image: linear-gradient(30deg, #7a2e00 0%, #ffd27a 40%, #ff8a00 55%, #7a2e00 100%);
    background-position: 0% 0%;
  }
  87%, 90% { background-position: 100% 0%; }

  /* terug naar volledig oranje */
  90%, 100% { opacity: 0; background-position: 0% 0%; }
}

@keyframes neonBloom {
  0%, 15% { opacity: 0; background-position: 0% 0%; }

  /* Groen glow */
  15%, 27% {
    opacity: .8;
    background-image: linear-gradient(30deg, #f39200 0%, #25ff73 40%, #00c244 55%, #0b6b1f 100%);
    background-position: 0% 0%;
  }
  27%, 30% { background-position: 100% 0%; }

  /* Blauw/cyaan glow */
  30%, 42% {
    opacity: .8;
    background-image: linear-gradient(30deg, #0b6b1f 0%, #54d4ff 40%, #1aaaff 55%, #0a2a73 100%);
    background-position: 0% 0%;
  }
  42%, 45% { background-position: 100% 0%; }

  /* Paars glow */
  45%, 57% {
    opacity: .8;
    background-image: linear-gradient(30deg, #0a2a73 0%, #b07aff 40%, #8b4dff 55%, #3a1673 100%);
    background-position: 0% 0%;
  }
  57%, 60% { background-position: 100% 0%; }

  /* Magenta/roze glow */
  60%, 72% {
    opacity: .8;
    background-image: linear-gradient(30deg, #3a1673 0%,  #ff66c7 40%, #ff33a8 55%, #7a0f4e 100%);
    background-position: 0% 0%;
  }
  72%, 75% { background-position: 100% 0%; }

  /* Neon-oranje glow (matcht de band) */
  75%, 87% {
    opacity: .8;
    background-image: linear-gradient(30deg, #7a2e00 0%, #ffd27a 40%, #ff8a00 55%, #7a2e00 100%);
    background-position: 0% 0%;
  }
  87%, 90% { background-position: 100% 0%; }

  90%, 100% { opacity: 0; background-position: 0% 0%; }
}

  /* Performance en toegankelijkheid */
  .et_fixed_nav #page-container #top-header::before,
  .et_fixed_nav #page-container #top-header::after,
  .et_secondary_nav_enabled #page-container #top-header::before,
  .et_secondary_nav_enabled #page-container #top-header::after {
    will-change: background-position, opacity;
  }

  @media (prefers-reduced-motion: reduce) {
    .et_fixed_nav #page-container #top-header::before,
    .et_fixed_nav #page-container #top-header::after,
    .et_secondary_nav_enabled #page-container #top-header::before,
    .et_secondary_nav_enabled #page-container #top-header::after {
      animation: none;
      opacity: 0;
    }
  }


/********************************
 * NF box */

.nf_box_center{
  display:flex;
  align-items:center;
  justify-content:center;
}


.nf_box{
    border-radius: 12px;
    background-color: #fff;
    padding: 30px;
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));
    border-radius: 12px;
    color: var(--donkerblauw);    
}

@media screen and (min-width: 980px) {
  .nf_box_margin{
      margin-top: -30px;
  }
} 

.nf_box_primary{
    border-radius: 12px;
    border:1px solid var(--oranje);            
    padding: 30px;
    background-color:var(--oranjebg);
}

.et_pb_text_inner table{border-radius:12px; overflow:hidden;filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.1));}
.et_pb_text_inner table tbody{background-color:#fff;}

.et_pb_text_inner table thead,
.et_pb_text_inner table tfoot{  background-color:var(--hoverblauw);  }
.et_pb_text_inner table thead th,
.et_pb_text_inner table tfoot th{ color:#fff;}




/***********************
 *  Transparent menu home op de slider */

body.home #page-container {
    padding-top: 0px !important;
    margin-top: 20px !important;
}
body.home #main-header:not(.et-fixed-header){    background-color:transparent ;}
body.home .logo_container{                    display:none;}
body.home .et-fixed-header .logo_container{  display:block;}
.et_mobile_menu{
    border-top-color:var(--matzwart);
}




body.home #page-container{
  overflow-x:hidden;
}


#main-footer li.current_page_item a{
  background-color:#fff;
  color:#010101 !important;
}



/* activiteiten v2*/
.nf_col_activiteiten{
  position: relative;
  display: block;
  margin-bottom: 30px;
}
.nf_col_activiteiten:hover .nf_blurb_activiteit{
    margin-top: -95px;
}
.nf_col_activiteiten .nf_img_activiteit{
  position: relative;
  display: block;
  overflow: hidden;
  background:var(--oranje);
  aspect-ratio:19/12;
  
    border-radius: 12px;
}
.nf_col_activiteiten .nf_img_activiteit .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  transform: scale(1.1) translateX(4%);
  transition: all 0.4s;
}
.nf_col_activiteiten:hover .nf_img_activiteit .et_pb_image_wrap img {
  opacity: .4;
  transform: scale(1.15) translateY(-8%);
}

.nf_blurb_activiteit{
  margin-top: -90px;
  transition: all 500ms ease;  
}
.nf_blurb_activiteit .et_pb_blurb_content{  
    position: relative;
    display: block;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 1;
    filter: drop-shadow(0 5px 10px #ddd);
    
}
.nf_col_activiteiten:hover .nf_blurb_activiteit .et_pb_blurb_content{
  filter: drop-shadow(0px 10px 60px rgba(0, 0, 0, 0.07));
}



.nf_blurb_activiteit .et_pb_blurb_content .et_pb_main_blurb_image {
    position: absolute;
    bottom: -10px;
    right: 10px;
    height: 35px;
    width: 35px;    
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 2;    
}
.nf_col_activiteiten:hover .et_pb_blurb_content .et_pb_main_blurb_image {
  right:5px;
}
.nf_blurb_activiteit .et_pb_blurb_content .et_pb_main_blurb_image .et_pb_image_wrap .et-pb-icon{
  font-size:40px;
  position: relative;
  display: inline-block;
  transition: all 250ms linear;
  color: var(--oranje);
}
.nf_col_activiteiten:hover .nf_blurb_activiteit .et_pb_blurb_content .et_pb_main_blurb_image  .et_pb_image_wrap .et-pb-icon{
  color: var(--hoveroranje);
}


.nf_blurb_activiteit .et_pb_blurb_content .et_pb_blurb_container {
    position: relative;
    display: block;
    background-color: #ffffff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    padding: 50px 50px 20px 20px;
    clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    z-index: 1;
    box-shadow: 4px 4px 2px -10px rgba(0, 0, 0, 1);
}

.nf_blurb_activiteit .et_pb_blurb_content .et_pb_blurb_container .et_pb_blurb_description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nf_col_activiteiten .nf_blurb_activiteit .et_pb_blurb_content .et_pb_blurb_container .et_pb_module_header,
.nf_col_activiteiten:hover .nf_blurb_activiteit .et_pb_blurb_content .et_pb_blurb_container .et_pb_module_header {
  color: var(--oranje);
}










/*********************************
* youtube icon header 
* Whatsapp icon header */
.et-social-youtube a.icon:before { content: '\e0a3'; }
.et-social-whatsapp a.icon:before { content: '\e065'; }

#et-info{float:none;}
#top-header .et-social-icons{float:right;}
#top-header .nf_wrapper_netfire_nl{display:none !important;opacity:0;}




.footer-widget a.et-social-icon{
    font-family: ETmodules !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 0 0;
    direction: ltr;
}

.footer-widget a.et-social-icon span{
  margin-left:10px;
  font-family:"Open Sans", Arial, sans-serif;
  display:inline-block;
}
.footer-widget  a.et-social-youtube.icon:before { content: '\e0a3'; }
.footer-widget  a.et-social-whatsapp.icon:before { content: '\e065'; }
.footer-widget  a.et-social-facebook.icon:before { content: "\e093";}

.footer-widget .et-social-icons{  
  float:none;
  list-style:none;
}
.footer-widget .et-social-icons li{
  display:block;
  margin:0;
}
.footer-widget .et-social-icons li:before{ display:none;}

/*********************************
 * Credits */
.netfire{
    display: block;
    width: 20px;/*30*/
    height: 30px;/*45*/
    background: url(https://netfire.nl/images/logo_netfire_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
}


/* Menu */
#top-menu li.current_page_item>a,
#menu-footer-menu .current_page_item a{
  color:var(--donkerblauw) !important;
  background-color: #fff;
  border-radius: 12px;
  padding: 6px 12px !important;
  margin: 0;
}

@media only screen and (min-width: 981px){
  .et-fixed-header #top-menu li.current-menu-ancestor>a{ color:var(--oranje)!important;}
  .et-fixed-header #top-menu li.current_page_item>a{
    color:var(--donkerblauw) !important;  
  }
}


/*********************************
 * Slider arrows */
.et-pb-arrow-next, .et-pb-arrow-prev,
.et-pb-arrow-next, .et-pb-arrow-next{
  color:var(--rood);
}
.et-pb-controllers a,
.et-pb-controllers .et-pb-active-control{
  background-color:var(--rood);
}



/*********************************
 * Footer menu */
#menu-hoofdmenu .current_page_item a{
  color:#fff !important;
}




.nf_date{
    position: absolute;
    margin: -62px 0 0 calc(100% - 130px);
    background-color:#f9f9f9;
    border-bottom:1px solid #ddd;
    
    /* width: 130px; */    
    background-color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;    
    font-size: 11px;
    padding: 3px 6px;
    z-index:-1;
}

/*********************************
 * Border button wrapper */

 .nf_image img,
 .nf_block_wrapper img{
    width:100%;
    height:auto;   
    border-radius:12px;
  }    

























/* ===== NF Mobile menu ======*/
  
.et_mobile_menu li li{padding-left: 5% !important;}
.et_pb_menu .et_mobile_menu li ul{padding-left: 10px !important;}

.et_pb_module .et_mobile_menu .menu-item-has-children.clickable, .et_pb_module .et_mobile_menu .menu-item-has-children>a {
	position:relative
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable>span.parent_icon:after, 
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable)>a:after {
  font-family:ETmodules;
  text-align:center;
  speak:none;
  font-weight:400;
  font-variant:normal;
  text-transform:none;
  color:var(--color-1);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}
.et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable)>a:after {
  position:absolute;
  top:13px;
  right:10px;
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable>span.parent_icon {
  display:grid;
  align-items:center;
  position:absolute;
  width:50px;
  height:50px;
  background:rgba(0, 0, 0, 0);
  right:0;
  top:0;
  z-index:9
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable>span.parent_icon:after, .et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable)>a:after {
  content:"\4c"
}
.et_pb_module .et_mobile_menu .menu-item-has-children.clickable.visible>span.parent_icon:after, .et_pb_module .et_mobile_menu .menu-item-has-children:not(.clickable).visible>a:after {
  content:"\4b"
}
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu>ul.sub-menu, .et-db #et-boc .et-l .et_pb_menu .et_mobile_menu>ul.sub-menu, .et_pb_module .et_mobile_menu ul.sub-menu {
  display:none!important;
	visibility:hidden!important
}
.et-db #et-boc .et-l .et_pb_fullwidth_menu .et_mobile_menu .visible>ul.sub-menu, .et-db #et-boc .et-l .et_pb_menu .et_mobile_menu .visible>ul.sub-menu, .et_pb_module .et_mobile_menu .visible>ul.sub-menu {
	display:block!important;
	visibility:visible!important
}
.mobile_nav.closed .et_mobile_menu {
  -webkit-transform:translateX(-100%);
  -moz-transform:translateX(-100%);
  -ms-transform:translateX(-100%);
  -o-transform:translateX(-100%);
  transform:translateX(-100%);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transition:-webkit-transform .4s 0s;
  -moz-transition:-moz-transform .4s 0s;
  transition:transform .4s 0s
}
.mobile_nav.opened .et_mobile_menu {
  -webkit-transform:translateX(100%);
  -moz-transform:translateX(100%);
  -ms-transform:translateX(100%);
  -o-transform:translateX(100%);
  transform:translateX(100%);
  -webkit-overflow-scrolling:touch;
  -webkit-transition:-webkit-transform .4s 0s;
  -moz-transition:-moz-transform .4s 0s;
  transition:transform .4s 0s
}
.et_mobile_menu {
  width:288px !important;
	min-height:100vh;
	height:100%;
	display:block!important;
	padding-top:40px !important;
	padding-bottom:100px !important;
	position:absolute;
	z-index:9998;
	overflow:scroll;
	border-top:none;
	padding-right:0;
	top:0px !important;
	left:-100% !important;
	position:fixed
}
.et_mobile_menu {
	width:320px;
	margin-left:calc(100% - 340px);
	border-top: 0px solid #fff;
	font-weight: normal;
}
.et_mobile_menu .menu-item-has-children > a:hover, .et_mobile_menu .menu-item-has-children > a {
	background-color: transparent;
	font-weight:normal;
}
.et_pb_menu ul li.current-menu-item a:hover, .et_pb_menu ul li.current-menu-item a {
	color:var(--color-1);
}
.mobile_nav.opened .mobile_menu_bar::before {
  content:"\4d";
}
.mobile_nav.opened:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .8);
}