/* cmsms stylesheet: oorspronkelijke custom modified: Tuesday, February 17, 2026 3:52:03 PM */
/* Large logo area */
      #top-section {
        background: #fff;
        text-align: center;
        padding: 30px 0; /* adjust height as needed */
      }

      #top-section img {
        max-width: 250px;
        height: auto;
      }

      /* Normal header state */
      .main-nav {
        position: relative;
        width: 100%;
        transition: all 0.3s ease;
	background: #ff9900;
	background-image: url("https://www.oorspronkelijkelevenskunst.be/custom/img/fond_menu.jpg");
      }

      /* Sticky state applied by JS */
      .main-nav.sticky {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 999;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      }
/* ------------------------------------
   ROTATION
------------------------------------ */
@-webkit-keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating {
  -webkit-animation: rotating 25s linear infinite;
  animation: rotating 25s linear infinite;
  display: inline-block;
}

/* ------------------------------------
   OVERLAY LAYOUT
------------------------------------ */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #ff9900;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  transition: background 1.2s ease;
  z-index: 10;
  pointer-events: all;
  overflow: hidden;
}

/* image wrapper so movement is in page space */
.rotating-wrapper {
  transition: transform 1.2s ease, opacity 1s ease;
}

/* the image itself */
.rotating-wrapper img {
  width: 256px;
  cursor: pointer;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

/* text */
#overlay p {
  font-size: 1.2rem;
  margin-top: 20px;
  opacity: 1;
  transition: opacity 0.8s ease;
}

/* ------------------------------------
   FADE-OUT ANIMATIONS
------------------------------------ */
#overlay.fade-out {
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
}

/* move + fade image wrapper (not the image itself) */
#overlay.fade-out .rotating-wrapper {
  transform: translateY(-30vh) scale(0.8);
  opacity: 0;
}

/* text fades out */
#overlay.fade-out p {
  opacity: 0;
}

/* ------------------------------------
   MAIN CONTENT FADE-IN
------------------------------------ */
#homepagecontainer {
  opacity: 0;
  transition: opacity 1.4s ease;
}
#homepagecontainer.visible {
  opacity: 1;
}

/* ------------------------------------
   TOP NAV COLORS
------------------------------------ */
#top-section {
  background: #ff9900;
}

/* ======================================
   SCROLL BLOCKING + iOS FIXES
====================================== */

/* Desktop + mobiele scroll blokkeren */
html.no-scroll,
body.no-scroll {
  /*overflow: hidden !important;*/
  height: 100vh !important;
  touch-action: none !important;
  /*overscroll-behavior: none !important;*/
}

/* Voor templates die eigen scrollcontainer gebruiken */
#homepagecontainer.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}

/* iOS flicker fix (Safari) */
body.no-scroll {
  position: fixed !important;
  width: 100% !important;
  -webkit-overflow-scrolling: none !important;
}

/* Voorkomt rubberband effect in overlay */
#overlay {
  /*overscroll-behavior: none !important;*/
  touch-action: none !important;
}

/*main nav layout changes*/
.inner-nav ul {
	font-size:14px;
}

/*FONT STYLE FOR MAIN MENU ITEMS*/
.inner-nav ul li a{
	color: #a92335;
	font-family: Open Sans, Dosis, Verdana, arial, sans-serif;
	font-weight: 800;
	transition: 0.3s;
}

.inner-nav ul li a.active{
    color: #000;
}

/*FULL BACKGROUND FOR REGULAR MENU PARTIAL BACKGROUND FOR MOBILE MENU - IMG BACKROUND ONLY APPLIES TO REGULAR MENU */
.mn-sub {
	background-color:#FFF1D3 !important;
	/*background-image: url('https://www.oorspronkelijkelevenskunst.be/custom/img/fond_orange.jpg');*/
}


/*REST OF BACKGROUND FOR MOBILE MENU*/
.mobile-on .desktop-nav ul {
	background-color: #FFE5AE; /*fallback for if image below doesn't work*/
	background-image: url('https://www.oorspronkelijkelevenskunst.be/custom/img/fond_menu.jpg');
}

/*REGULAR AND MOBILE MENU TEXT COLOR FOR NON MAIN MENU ITEMS*/
.inner-nav ul li .mn-sub li a{
	color:#775a1b !important;
	font-weight: 500;
	font-size: 15px;
	transition: 0.3s;
}

/*HOVER VOOR ALL MENUS*/
.mn-sub li a:hover, .inner-nav ul li .mn-sub li a:hover, .mn-sub li a.active {
	color: #775a1b !important;
	background-color:#FFE5AE;
}

/*MAIN MENU ITEM COLOURS FOR MOBILE MENU*/
.mobile-on .desktop-nav ul li a {
	color:#a92335;
}

.mn-group-title:hover {background-color:yellow !important;}

/*HOVER MAIN MENU ITEMS FOR MOBILE MENU*/
.mobile-on .desktop-nav ul li a:hover, .mobile-on .desktop-nav ul li a.active {
    background: #FFE5AE;
    color: black;
}

.mobile-nav:hover,
.mobile-nav.active{
    background: transparent;
	/*background-color:purple;*/
    color: black;
}

/*main content layout*/
#main {
	background-image: url('https://www.oorspronkelijkelevenskunst.be/custom/img/fond_rose2.jpg');
}

#main.bg_geel_afbeelding {
	background-image: url('https://www.oorspronkelijkelevenskunst.be/custom/img/fond_jaune.jpg');
}

#main.bg_oranje_afbeelding {
	background-image: url('https://www.oorspronkelijkelevenskunst.be/custom/img/fond_orange.jpg');
}
#main.bg_roze_afbeelding {
	background-image: url('https://www.oorspronkelijkelevenskunst.be/custom/img/fond_rose2.jpg');
}

#main.bg_geel_kleur {
	background-image: none;
	background-color:#ffff99;
}

.page-section {padding:30px 0;}

h1 {
	text-align: center;
    font-weight: bold;
    font-size: 25pt;
    color: #a92335;
    font-family: 'Comic Sans MS', Verdana, Arial, Sans-Serif;
}

.yellownormal {
	font-weight:bold;
	color: #e99435;
}

.yellowlight {
	color: #e99435;
}

.yellowquote {
	font-size: 16px;
	font-style: italic;
	font-weight:bold;
	color: #e99435;
}

.rednormal {
	font-weight:bold;
	color: #a92335;
}

.redlight {
	color: #a92335;
}