:root {
 
    
	--c1: #ff9f51;
	--c2: #5179ff;
	--c3: #254a91;
	--c4: #517aac;
	--c5: #3a9c95;
	--c6: #5a6a85;
	--c7: #6b7a8a;
	--c8: #6e7580;
	--c1a: #ff9f516b;
	
	--c_offwhite: #e6e6e6;

	--c_cata: var(--c1); 	/*#ff9f51; */
	--c_catb: var(--c6); 	/* #5a6a85; */

	--c_background1: #0d0d0f; 	/* general backgrounds #0d0d0f*/
	--c_background2: rgba(42 45 66 / 66%); /* #2a2d42; 	 pods 1  #2a2d42 */
	--c_background3: #9599B4; /* #d8cfbf; sponsor */

	--c_aurora1: rgba(80, 255, 180, 0.065);
	--c_aurora2: rgba(160, 120, 255, 0.15);
	--c_aurora3: rgba(80, 200, 255, 0.15);
 


	--fontheader: Playfair Display;
	--fontbody: montserrat;

}


.uk-card-primary.uk-card-body, .uk-card-primary>:not([class*=uk-card-media]), .uk-card-secondary.uk-card-body, .uk-card-secondary>:not([class*=uk-card-media]), .uk-light, .uk-offcanvas-bar, .uk-overlay-primary, .uk-section-primary:not(.uk-preserve-color), .uk-section-secondary:not(.uk-preserve-color), .uk-tile-primary:not(.uk-preserve-color), .uk-tile-secondary:not(.uk-preserve-color) {color: rgba(255,255,255,.9)}

.uk-card-primary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-primary.uk-card-body .uk-table-striped>tr:nth-of-type(odd), .uk-card-primary>:not([class*=uk-card-media]) .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-primary>:not([class*=uk-card-media]) .uk-table-striped>tr:nth-of-type(odd), .uk-card-secondary.uk-card-body .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-secondary.uk-card-body .uk-table-striped>tr:nth-of-type(odd), .uk-card-secondary>:not([class*=uk-card-media]) .uk-table-striped tbody tr:nth-of-type(odd), .uk-card-secondary>:not([class*=uk-card-media]) .uk-table-striped>tr:nth-of-type(odd), .uk-light .uk-table-striped tbody tr:nth-of-type(odd), .uk-light .uk-table-striped>tr:nth-of-type(odd), .uk-offcanvas-bar .uk-table-striped tbody tr:nth-of-type(odd), .uk-offcanvas-bar .uk-table-striped>tr:nth-of-type(odd), .uk-overlay-primary .uk-table-striped tbody tr:nth-of-type(odd), .uk-overlay-primary .uk-table-striped>tr:nth-of-type(odd), .uk-section-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-section-primary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd), .uk-section-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-section-secondary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd), .uk-tile-primary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-tile-primary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd), .uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped tbody tr:nth-of-type(odd), .uk-tile-secondary:not(.uk-preserve-color) .uk-table-striped>tr:nth-of-type(odd) {var(--c_background2)}

/* General styles -----------------------------------------     */
body {
	background-color: var(--c_background1);
	font-family: var(--fontbody) !important;
}

 main {
    padding-bottom: 70px;

    background:

        /* --- Original cluster --- */

        /* Green glow */
        radial-gradient(circle at 30% 420px,
            var(--c_aurora1) 0px,
            var(--c_aurora1) 60px,
            transparent 420px),

        /* Purple glow */
        radial-gradient(circle at 60% 620px,
            var(--c_aurora2) 0px,
            var(--c_aurora2) 60px,
            transparent 420px),

        /* Blue glow */
        radial-gradient(circle at 45% 970px,
            var(--c_aurora3) 0px,
            var(--c_aurora3) 60px,
            transparent 420px),


        /* --- Deep scroll cluster --- */

          /* Green glow */
        radial-gradient(circle at 30% 1220px,
            var(--c_aurora1) 0px,
            var(--c_aurora1) 60px,
            transparent 420px),

        /* Purple glow */
        radial-gradient(circle at 60% 1820px,
            var(--c_aurora2) 0px,
            var(--c_aurora2) 60px,
            transparent 420px),

        /* Blue glow */
        radial-gradient(circle at 45% 2170px,
            var(--c_aurora3) 0px,
            var(--c_aurora3) 60px,
            transparent 420px);

    background-blend-mode: screen;
    background-repeat: no-repeat;
}

/*  html elements -----------*/

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fontheader) !important;
}

a,
li {
	font-family: var(--fontbody) !important;
}

h1 {
	font-weight: 800 !important;
 
	font-size: 2.5rem;
}

h2 {
	font-weight: 800 !important;
}

h3 {
	font-weight: 800 !important;
}



a:link:not(header a), a:visited:not(header a) {
	color: var(--c2);
	font-weight: 700;
}
 

th {
	color: black;
}

em {
	color: black;
}

table {
	margin-bottom: 1.5em;
}

  .uk-container, .uk-container-large { max-width: 1600px;  }
  
 nav .uk-container { max-width: none; }

.frontpage_gradient1 {
	width: 20%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent);
	pointer-events: none;
	z-index: 1;
}

.frontpage_gradient2 {
	width: 100%;
	height: 500px;
	background: linear-gradient(to top, var(--c_background1), transparent);
	pointer-events: none;
	z-index: 2;
}
.hero-gradient-page {
	width: 100%;
	height: clamp(300px,50vw,600px);
	background: linear-gradient(to top, var(--c_background1), transparent);
	pointer-events: none;
	z-index: 2;
}



/* SCHEDULE*/ 
.schedule {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.day-title {
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 600;
  /*border-bottom: 4px solid var(--c1a);*/
  padding-bottom: 4px;
}

.event {
  display: grid;
  grid-template-columns: 160px 1fr 300px;
  gap: 1rem;
  padding: 10px;
  margin-bottom: 1rem;
  background: var(--c_background2);
  
  
}

.event:last-child {
  border-bottom: none;
  
}

.time {
  font-weight: 600;
}

.location {
  color: rgba(255,255,255,0.6);
}

/* Mobilvenlig version */
@media (max-width: 700px) {
  .event {
    grid-template-columns: 1fr;
  }
}




/* -----  navigation  ---------------------*/
.uk-navbar-dropdown {
	background-color: var(--c_background2);
}

.uk-navbar-dropdown li a {
	color: rgb(214, 214, 214);
}

.uk-navbar-dropdown li a:hover {
	font-weight: bolder;
	color: white;
}

.uk-navbar-transparent {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
}

.uk-navbar-nav>li>a {
	color: white;
	text-transform: capitalize;
	font-size: 1em;
}

.uk-navbar-dropdown-nav>li.uk-active>a {
    color: var(--c1);
	font-weight: 600; 
}

.uk-offcanvas-bar {
	background-color: #2a2d42;
}

.uk-offcanvas-bar li a:hover {
	font-weight: 700;
}

.uk-offcanvas-bar>ul>li.uk-open>a {
	color: var(--c1);
	font-weight: 600;
}

.uk-offcanvas-bar li.uk-active a {
	font-weight: 700;
}

/* ----  END navigation ----------- */

/* ---  Cards  ------------  */
.card-1-content {
	background: rgba(0, 0, 0, 0.7); 
}

.card-1-content h3 {
	margin-bottom: 2px;
}

.card-1-content div {
	color: var(--c1);
}

.card-1 .uk-link-text {
	font-weight: 600;
}

.card-1-heading {font-weight:800; font-size: 24px; font-family:  var(--fontheader); margin-bottom:0px; color: white !important;}

.card-2 {
	background-color: var(--c_background2);

}

.card-2.cat-a {
	border-left: 20px solid var(--c_cata);

}

.card-2.cat-b {
	border-left: 20px solid var(--c_catb);
}

.card-2-badge {
	position: absolute;
	writing-mode: vertical-lr;
	text-orientation: sideways;
	transform: translateY(-50%) rotate(180deg);
	left: -20px;
	top: 50%;
	font-size: 14px;
	font-weight: 400;
}

.cat-a .card-2-badge {
	color: black;
}

/* ENd cards ------------------------------------------------------*/



.shadow_svg {
	-webkit-filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 1));
	filter: drop-shadow(3px 3px 8px rgba(0, 0, 0, 1));
	/* Similar syntax to box-shadow */
}

dt {
	color: white !important;
	font-weight: 700 !important;
	margin-bottom: 5px;
}

.yt-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.yt-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.participant-modal td {
	padding-right: 15px;
	vertical-align: top;
	padding-bottom: 15px;
}

.participant-modal td p {
	margin: 0;
}

/* program list */
.programme-list a:link {
	text-decoration: none;
	font-weight: normal;
}

.programme-item-title {
	font-weight: bold;
	font-size: 20px;
}

.programme-item-title span {
	margin-bottom: 10px;
}

.programme-event-title {
	font-weight: bold;
	font-size: 20px;
}

.programme-event-title br {
	display: none;
}

/*badges*/
.category-badge-a,
.category-badge-b,
.category-badge-c {
	margin-top: -4px;
	padding: 12px;
	font-size: 14px;
	font-weight: 600;
}

.category-badge-a {
	color: white;
	background: #f7a700;
}

.category-badge-b {
	color: white;
	background: black;
}

.category-badge-c {
	color: white;
	background: black;
}

/* new badges -------------------------------- */
.category-a-badge {
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 10px;
	font-size: 12px;
	font-weight: 600;
	color: black;
	background: var(--c_cata);
	border-radius: 12px;
}

.category-b-badge {
	padding: 5px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 10px;
	font-size: 12px;
	font-weight: 600;
	color: white;
	background: var(--c_catb);
	border-radius: 12px;
}




/* program event */
.programme_event_table {
	margin-top: 30px;
}

.programme_event_table table {
	border-collapse: collapse;
	width: 100%;
}

.programme_event_table td:first-child {
	font-weight: bold;
	width: 70px;
	padding: 12px;
}

.programme_event_table tr:nth-child(odd) {
	background-color: #c6dbde;
}

.programme_event_table tr:nth-child(even) {
	background-color: #dceaec;
}

/*  Burger --------------------------------------------------------------------------------------------------------------------------------------   */

.burger {
	width: 38px;
	height: 30px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	position: relative;
	z-index: 1000;
	transform: scale(0.8, 0.8);
}

.burger span {
	display: block;
	height: 5px;
	background: rgb(201, 201, 201);
	border-radius: 2px;
	position: relative;
}

/* Sortbartop og sortbarbottom - start usynlige */
.burger span span {
	opacity: 0;
	background: black;
	width: 22px;
	height: 8px;
	position: absolute;
	top: -5px;
	/*transition: opacity 0.3s ease;*/
}

/* --- Burger to X animations --- */

@keyframes topbar-to-x {
	0% {
		transform: translateX(0) rotate(0) scaleX(1);
		height: 5px;
	}



	21% {
		transform: translateY(0) rotate(0) scaleX(1);
		transform: translateX(0) rotate(0) scaleX(1);
		height: 9px;
	}

	27% {
		transform: translateX(-2px) rotate(0) scaleX(0.9);
		height: 9px;
	}

	90% {
		transform: translateX(0) rotate(0) scaleX(1);
		height: 9px;
	}

	100% {
		transform: translateY(12px) rotate(45deg) scaleX(1.1);
		height: 6px;
	}
}

@keyframes midbar-to-x {
	0% {
		transform: translateX(0) rotate(0) scaleX(1);
		height: 5px;
		opacity: 1;
	}



	24% {
		background: rgb(255, 255, 255);
		transform: translateX(-2px) rotate(0) scaleX(0.9);
		height: 9px;
		opacity: 1;
	}

	78% {
		transform: translateX(0) rotate(0) scaleX(1);
		opacity: 1;
		height: 9px;
	}

	100% {
		opacity: 0;
		transform: scaleX(1) rotate(180deg);
		height: 6px;
	}
}

@keyframes bottombar-to-x {
	0% {
		transform: translateY(0) rotate(0) scaleX(1);
		height: 5px;
	}



	21% {
		background: rgb(255, 255, 255);
		transform: translateX(-2px) rotate(0) scaleX(0.9);
		height: 9px;
	}

	90% {
		transform: translateY(0) rotate(0) scaleX(1);
		height: 9px;
	}

	100% {
		transform: translateY(-12px) rotate(-45deg) scaleX(1.1);
		height: 6px;
	}
}

@keyframes sortbartop-to-x {
	0% {
		transform: translateX(0) rotate(0) scaleX(1);

	}

	10% {
		opacity: 1;
	}

	92% {
		transform: translateX(0) rotate(0) scaleX(1);
		opacity: 1;
	}

	100% {
		transform: translateX(40px) rotate(0) scaleX(1);
		opacity: 0;
	}
}

@keyframes sortbarbottom-to-x {
	0% {
		transform: translateX(0) rotate(0) scaleX(1);

	}

	10% {
		opacity: 1;
	}

	90% {
		transform: translateX(0) rotate(0) scaleX(1);
		opacity: 1;
	}

	100% {
		transform: translateX(-40px) rotate(-180) scaleX(1);
		opacity: 0;
	}
}

/* --- X to Burger animations --- */

@keyframes topbar-to-burger {
	0% {
		transform: translateY(12px) rotate(45deg) scaleX(1.1);
		height: 6px;
	}

	0% {
		transform: translateX(0) rotate(0) scaleX(1);
		height: 5px;
	}

	100% {
		transform: translateX(0) rotate(0) scaleX(1);
		height: 5px;
	}
}

@keyframes midbar-to-burger {
	0% {
		opacity: 0;
		transform: scaleX(1) rotate(180deg);
		height: 6px;
	}

	10% {
		opacity: 1;
		transform: translateX(0) rotate(0) scaleX(1);
		height: 5px;
	}

	100% {
		opacity: 1;
		transform: translateX(0) rotate(0) scaleX(1);
		height: 5px;
	}
}

@keyframes bottombar-to-burger {
	0% {
		transform: translateY(-12px) rotate(-45deg) scaleX(1.1);
		height: 6px;
	}

	10% {
		transform: translateY(0) rotate(0) scaleX(1);
		height: 5px;
	}

	100% {
		transform: translateY(0) rotate(0) scaleX(1);
		height: 5px;
	}
}

@keyframes sortbartop-to-burger {
	0% {
		transform: translateX(40px) rotate(0) scaleX(1);
		opacity: 0;
	}

	90% {
		transform: translateX(0) rotate(0) scaleX(1);
		opacity: 0;
	}

	100% {
		transform: translateX(0) rotate(0) scaleX(1);
		opacity: 0;
	}
}

@keyframes sortbarbottom-to-burger {
	0% {
		transform: translateX(-40px) rotate(0) scaleX(1);
		opacity: 0;
	}

	90% {
		transform: translateX(0) rotate(0) scaleX(1);
		opacity: 0;
	}

	100% {
		transform: translateX(0) rotate(0) scaleX(1);
		opacity: 0;
	}
}

/* --- Animation classes --- */

/* Burger → X */
.burger.to-x span:nth-child(1) {
	animation: topbar-to-x 2s forwards;
	animation-delay: 0.2s
}

.burger.to-x span:nth-child(2) {
	animation: midbar-to-x 2s forwards;
	animation-delay: 0.2s
}

.burger.to-x span:nth-child(3) {
	animation: bottombar-to-x 2s forwards;
	animation-delay: 0.2s
}

.burger.to-x span:nth-child(2) span {

	animation: sortbartop-to-x 1.8s forwards;
	animation-delay: 0.2s
}

.burger.to-x span:nth-child(3) span {

	animation: sortbarbottom-to-x 1.8s forwards;
	animation-delay: 0.2s
}

/* X → Burger - animation paused som default */
.burger.to-burger span:nth-child(1),
.burger.to-burger span:nth-child(2),
.burger.to-burger span:nth-child(3),
.burger.to-burger span:nth-child(2) span,
.burger.to-burger span:nth-child(3) span {
	animation-play-state: paused;
}

/* X → Burger - animation running når .animate tilføjes */
.burger.to-burger.animate span:nth-child(1) {
	animation: topbar-to-burger 2s forwards;
	animation-play-state: running;
}

.burger.to-burger.animate span:nth-child(2) {
	animation: midbar-to-burger 6s forwards;
	animation-play-state: running;
}

.burger.to-burger.animate span:nth-child(3) {
	animation: bottombar-to-burger 2s forwards;
	animation-play-state: running;
}

.burger.to-burger.animate span:nth-child(2) span {
	opacity: 1;
	animation: sortbartop-to-burger 1.2s forwards;
	animation-play-state: running;
}

.burger.to-burger.animate span:nth-child(3) span {
	opacity: 1;
	animation: sortbarbottom-to-burger 1.5s forwards;
	animation-play-state: running;
}