@font-face {
   font-display: block;
   font-style: normal;
   font-weight: 400;
   font-family: CustomSChevron;
   src: url(/2025/assets/CustomSChevron.woff2) format('woff2');
}

/* abel-regular - latin */
@font-face {
   font-display: block;
   font-family: 'Abel';
   font-style: normal;
   font-weight: 400;
   src: url('/2025/assets/Abel-Regular.woff2') format('woff2');
}
 

:root {
   --spurple: #d873ff;
   --sdarkpurple:rgb(121, 115, 193, 0.8);
   --sgreen: #78ff88;
   --sdarkgreen: #19372a91;
   --sblue: #4120ff;
   --sorange: #ffbe79;
   --spink: #ffddec;
   --sred: #a41c43;
   --sblorange: #ee6408;
 }
 
.var{
   color: var();
}


/***kirbystyles***/
.grid {
   --columns: 12;
   --gutter: 3rem;
   display: grid;
   grid-gap: var(--gutter);
   grid-template-columns: 1fr;
 }
 .grid > .column {
   margin-bottom: var(--gutter);
 }
 
 .autogrid {
   --gutter: 3rem;
   --min: 10rem;
   display: grid;
   grid-gap: var(--gutter);
   grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
   grid-auto-flow: dense;
 }

 @media screen and (min-width: 960px) {

   .grid {
     grid-template-columns: repeat(12, 1fr);
   }
   .grid > .column {
     grid-column: span var(--columns);
   }

}

figure{
   margin: 0;
}
 
figcaption{color: white;}



 /***/
 #actartblack p, #actartblack a, #actartblack hr, #actartblack h1, #actartblack h2, #actartblack h3{color: black!important;}
.black h1, .black h2, .black h3, .black p, .black figcaption{color: black!important;}

/*******************bigframes********************************************************/

html, body{
   margin: 0;
}

.site{
   position: relative;
   width: 100%;
}

#main{
margin: 2rem auto 0;
}

.scrolltop{
   scroll-padding-top: 6rem!important;
}

.layoutwithimg figcaption{color: black;}

/*****background animation****************************************rgb(22, 24, 106)**************/

#sn{
   background: #1d1d1b;
   background: linear-gradient(-180deg, rgb(219, 72, 4) 10%,var(--spurple) 45%,  #15c7ff 100%);
   background-repeat: no-repeat;
   background-size: 100% 500%;
   background-position: 0% 0%;
   animation: starrynight 40s ease 0s infinite;
}

@keyframes starrynight{
0% {background-position: 0% 0%;}
25% {background-position: 0% 25%;}
50% {background-position: 0% 50%;}
75% {background-position: 0% 25%;}
100% {background-position: 0% 0%;}
}

.actsartistsbg{
   background: linear-gradient(-180deg, #fff 0%, #fff 10%, rgb(245, 245, 245) 80%, #000 100%);
}

.bgpurple{background: linear-gradient(-180deg, rgba(0, 0, 0, 0) 0%, rgba(179, 151, 251, 0.2) 20%, rgba(206, 83, 255, 0.5) 80%, rgba(0, 0, 0, 0) 100%);
}

#prog{
   background: linear-gradient(-180deg, #fff 0%, rgb(228, 228, 228) 5%, rgb(228, 228, 228) 30%, #000 100%);
}

/*******************svgs*******************************************************************************************/
.bgspwaves{
   background-image: url('/2025/assets/images/spwaves.svg');
   background-repeat: no-repeat;
   background-size: 60%;
}
.bgsterrrn{
   background-image: url('/2025/assets/images/sterrrn.svg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position-x: center;
   background-position-y: 500px;
   background-size: 60%;
}

.bgnorthernlight, .bgnorthernlight2{
   background-image: url('/2025/assets/images/northernlight.svg');
   background-repeat: no-repeat;
   background-size: cover;
   background-position-x: center;
   background-size: 90%;  
}

.bgwhs, .bgwhs2{
   background-image: url('/2025/assets/images/whs.svg');
   background-repeat: no-repeat;
   background-position-x: right;
   background-position-y: 100%;
   background-size: 50%;  
}

.bgwhs2{
   background-position-x: 56%;
   background-position-y: 60%;
   background-size: 100%;}

.white{fill: white; color: white!important;}
.purple{fill:var(--sblorange) !important; color: var(--sblorange)!important;}
.black, .blacka{fill: black; color: black!important;}
.red{color: var(--sred);}
.orange {color: var(--sorange);}
.blue{color: var(--sblue);}
.green{color:var(--sgreen);}

.bgnorthernlight2{background-position-y:-800px;}

.awwo{width: 30px; height: 30px;}
#buttonstorage{position: fixed; bottom: 10px; right: 20px; height: 60px; width: 60px; z-index: 15;}
#myBtn{width: 50px; height: 50px; border-radius: 25px; border: none; background-color: #78FF88; cursor:pointer;}

.fifty{width: 50%!important;}
.thirty{width: 30%!important;}

#mepp{width: 70%; margin-left: 15%;}
#Festivalkarte{margin: 0 auto;}

/*****typo************************************************************/

.mobilebr{display: none;}

p, ul li, a{
   font: 1.2rem 'Abel', sans-serif;
   color:white;
}

a{
   font-weight: bold;
   text-decoration: none;
}
a:hover, a:visited:hover, .blacka:hover, .blacka:visited:hover{color: var(--sblorange)!important;}
.blacka:visited, #completelineup a:visited{color: #000!important;}
a:visited{color: #fff;}
#mainnav a:visited, #completelineup a:visited:hover{color:  var(--sblorange)!important;}
#mainnav a:visited:hover{color: #fff!important;}



h1, h2, h3, h4, h5{
   font-family: 'Karantina', 'Archivo Narrow', sans-serif;
   color: white;
   letter-spacing: 0.8pt;
}

h1{
   font-size: 1.8rem;
   text-transform: uppercase;
}

h2{font-size: 1.8rem;
   font-weight: normal;

}

h3{font: lighter 1.6rem 'Karantina', 'Archivo Narrow', sans-serif; letter-spacing: 1pt;}

.title{
   font: normal 3.5rem 'Karantina', 'CustomSChevron', sans-serif;
   letter-spacing: 1.1pt;
   color: white;
   margin-bottom: 1rem;
   
   /*background: #000000d6;
   width: max-content;
   padding: 0 1rem;
   transform: skew(10deg);
   margin-left: -10px;*/
}


/*
footer .title{margin: 0 auto; background: var(--sdarkpurple);}

.bgnorthernlight2 .title{
   background: white;
}

#location .title{background: var(--sdarkgreen);}*/

.subtitle{
   font: lighter 2.4rem 'Karantina', 'Archivo Narrow', sans-serif;
   letter-spacing: 0.8pt;
   color: white;
   text-indent: 10px;
   margin: 0;
}


p, .fliesstext, .text p{
   font: normal 1.2rem 'Abel', sans-serif;
   color: white;
   margin-left: 10px;
   margin-right: 10px;
}

.tinytype, .tinytype a{
   font: normal 0.7rem 'Abel', sans-serif!important;
   color: white;
}

.inline{display: inline;}

.impgrid{
   display: grid;
   grid-template-columns: repeat(6, 15%);
   text-align: left;
   justify-content: space-between;
}

.imp1{
   grid-row: 1;
   grid-column: 1/3;
   justify-self: center;
}

.imp2{
   grid-row: 1;
   grid-column: 3/5;
   justify-self: center;
}

.imp3{
   grid-row: 1;
   grid-column: 5/7;
   justify-self: center;
}

.flex2 h3{align-self: center;}

#impdsgvo h3{margin-top: 2em;}

.mr{margin-right: 2rem;}
.mrs{margin-right: 0rem; font: 1.2rem Abel, sans-serif;}
.mb{margin-bottom: 1rem;}
.mb3{margin-bottom: 3rem!important;}
.mt08{margin-top: 0.8rem!important;}
.mt{margin-top: 3rem!important;}
.mt2{margin-top: 2rem!important;}
.mt3{margin-top: 3rem!important;}
.ml{margin-left: 10px;}
.nmt{margin-top: 0!important;}
.nml{margin-left: 0!important;}
.nmb{margin-bottom: 0!important;}
.m2to1{margin-top: 2rem;}


.photocredit, .img-caption{
   margin-top: 0.1rem;
   font: 0.8rem 'Abel', sans-serif;
}

.mobr{display: none;}

.center{text-align: center;}
.vmid{vertical-align: middle;}

.underline{text-decoration: underline;}

.alertbox{
   background-color: black;
   padding: 3rem 1rem 1rem;
}
.alertbox h1{display: inline; margin: 1rem;}
.alert{
   font: 1.4rem/2rem 'Abel', 'sans-serif';
   color:white;
}

.station{
  font: normal 2.5rem 'Karantina', 'Archivo Narrow', sans-serif; letter-spacing: 5pt;
  color:rgb(164, 255, 177);
}


.text li {
   padding-left: 1rem;
 }
 
li{
   list-style-image: url('/2025/assets/images/spark.svg');
 }

.languages li.active a{color:var(--sblorange)!important;}
.languages li a{font: normal 1.6rem/2.4rem 'Karantina', 'Archivo Narrow', sans-serif!important;}

.languagesm li a{font: normal 1.6rem 'Karantina', 'Archivo Narrow', sans-serif!important;}

/*****************************landing*************************************/

#landing{
   height: auto;
   position: relative;
   overflow: hidden;
}

.h11{ 
   font: bolder 5rem/4rem 'Karantina', sans-serif;
   color: var(--sblorange);
   margin: 0;
}

.h22{
   font: normal 3.5rem 'Karantina', sans-serif; 
   color: #fff; 
   letter-spacing: 1.5pt;
  /*** text-shadow: -0.75px 0 #d873ff, 0 0.75px #d873ff, 0.75px 0 #d873ff, 0 -0.75px #d873ff;***/

}

.h31{
   font: lighter 3.5rem/0.5rem 'Karantina', sans-serif; 
   color: black; 
   transform: skew(-10deg);
margin: 0.5rem;}

#textup{
   position: absolute;
   float: left;
   width: auto;
   transform: rotate(270deg) translate(-20px, -100px);
   animation: wobble 10s ease infinite;}

   @keyframes wobble{
      0%{top: 230px;}
      50%{top:255px;}
      100%{top: 230px;}
   }

.whitebox{
   background-color: white;
   padding: 5px 50px 5px 5px;
   display: flex;
   align-items: center;}

.logopbox{
   margin: 1rem 0 0 33%;
   padding: 0;
   width: 40%;
   height: auto;
   position: relative;
   top: -10px;

}

.logotitle{
   margin: 3rem auto 0 -12%;
   font: normal 1.5rem 'Abel', sans-serif;
   text-transform: uppercase;
   color: white;
   text-align: center;
}


/**********************grids***********************************/
.grid3{display: grid; grid-template-columns: 32% 32% 32%; grid-template-rows: auto auto auto; column-gap: 2%; row-gap: 1rem; margin: 1em 10px 0;}
.grid4{display: grid; grid-template-columns: 24% 24% 24% 22%; grid-template-rows: auto auto auto; column-gap: 1rem; row-gap: 1rem; margin-left: 10px;}
.gimg{max-width: 100%;}
.g4{width: 150px; align-self: end;}

.gr1, .gr2, .gr3, .gr4{max-width: 100%;}

.gr1{grid-column: 1/5; grid-row: 1;}
.gr2{grid-column: 2/3; grid-row: 2;}
.gr3{grid-column: 3/4; grid-row: 2;}
.gr4{grid-column: 1/5; grid-row: 3;}

.aligncenter .column {align-content: center!important;}

/*************************general layoutboxes*********************************/

.text1{
margin: 0 auto;
padding: 0 5%;
}

.text2{
   padding: 0 0 0 5%;
   overflow-x: auto;
}

.spacer20{height: 20px;}
.spacer40{height: 40px;}
.spacer50{   height: 50px;}
.spacer80{height: 80px;}
.spacer100{   height: 100px;}
.spacer120{height: 120px;}
.spacer150{   height: 150px;}
.spacer200{   height: 200px;}
.spacer300{   height: 300px;}

.flex1, .flex2{margin: 1.5rem 10px 1.5rem; display: flex; gap: 25px;}
.flex1{align-items: center;}
.flex2{justify-content: center;}
.flex3{margin: 2rem 10px 0; display: flex; gap: 15px; }
.flex4{margin: 0 10px; display: flex; gap: 20px;}

.flex5{display: flex; gap: 1rem; justify-content: end; align-items: center;}
.flex6{display: flex; gap: 1rem; justify-content: end;}

.w200{max-width: 20%; max-height: 100%; align-self: center;}
.w300{max-width: 30%; max-height: 100%; align-self: center;}
.w1{width: 100%;}

.sponsors{align-items: center; justify-content: center;}

#scrolloverSP, #scrolloveraaa, #scrolloverprog, #scrollovergrrrls, #scrolloverGRRRLSKV, #sopfog, #sopcamp{
   position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

#scrolloverSP{background-image: url(/2025/assets/images/sterrrnLenaBalochweb.jpg);}
#scrolloveraaa{background-image: url(/2025/assets/images/none.jpg);}
#scrolloverPROG{background-image: url(/2025/assets/images/none.svg); background-position-y: 80%;}
#scrollovergrrrls{background-image: url(/2025/assets/images/grrrlsbg.jpg);}
#scrolloverGRRRLSKV{background-image: url(/2025/assets/images/grrrlskv.jpg);}
#sopfog{background-image: url(/2025/assets/images/Grrrls-Kulturverein_2018_konzeRRRt_SUb_Mala-Herba_New-Fries.jpg); background-repeat: repeat-y;}
#sopcamp{background-image: url(/2025/assets/images/camp1_LeutgebEntertainmentGmbH.jpg);}

.adresse{
   display: grid;
   grid-template-columns: 30% auto;
   column-gap: 20px;
}

hr{margin: 2rem 0;
border: 0;
height: 1px;
background: linear-gradient(to right, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);}

.flexxx{display: flex;} /****simple flex no responsive change****/
.flexvtoh{display: flex; flex-direction:column;} /****simple flex changes from vertical to horizontal****/
.flexhtov{display: flex;}


/****boooofs********************************************************************************************************/
.boofgrid{display:grid; grid-template-columns: 49% 49%; grid-auto-flow: row;}
.boofbox{border: 15px var(--sdarkpurple) outset; padding: 0 1rem; background-color:#36589765;}
.booflogo{
   max-height: 100px;
   flex-shrink: 0;
}
.flexboof{
   display: flex;
   margin: 1.5rem 10px 1.5rem 2rem;
   gap: 25px;
}

.flexboof p{margin-left: 0;}

/****FOG********************************************************************************************************/

.fold {
	padding: 0 10px;
	width: 100%;
	height: auto;

   position: relative;
   top: -8%;
   opacity: 0;

	transition: all 0.15s ease-in;
}

.unfolder { display: none; }

.toggle-label {
	display: block;
   color: white;
	cursor: pointer;
	font-size: 11px;
	border-radius: 5px;
	padding: 5px;
}
.unfold-icon, .fold-icon {
  color: #d873ff;
  width: 60px;
  display: inline-block;
}
.unfolder ~ .fold {
  display: none;
}
.unfolder ~ label .fold-icon {
  display: none;
}

.unfolder:checked ~ .fold {
  display: block;
  margin-top: 2rem;
}
.unfolder:checked ~ label .fold-icon {
  display: inline-block;
}
.unfolder:checked ~ label .unfold-icon {
  display: none;
}

.animfold {
   overflow: hidden;
   height: 0px;
   margin-top: 1rem;
}

.unfolder:checked ~ .animfold {
   height: auto;
 }

 .unfolder:checked ~ .animfold .fold {
   top: 0;
   opacity: 1;
 }

.foggrid{
   display: grid;
   grid-template-columns: 20% 54% 20%;
   grid-template-rows: auto auto auto;
   column-gap: 3%;
}

.fogg0{grid-column: 2/4;}
.fogg1{grid-column: 1/2;}
.fogg2{grid-column: 2/3;}
.fogg3{grid-column: 3/4;}


.fogblu{
   background: linear-gradient(rgba(57, 51, 129, 0) 0%, rgba(57, 51, 129, 0.4) 5%, rgba(57, 51, 129, 0.4) 90%, rgba(57, 51, 129, 0) 95%);}
.flexa{display: flex; justify-content: flex-end;}
.fifty{width: 30%;}
.fogimg{width: 100%;}
.foglogo{max-width: 100%;}
.flexcol{display: flex; flex-direction: column;  gap: 10px;}
.fogtitle{font: normal 3rem 'Karantina', sans-serif; letter-spacing: 1pt;}
.fogsubtitle{font: lighter 2.4rem 'Karantina', sans-serif; letter-spacing: 1pt; margin-left: 1rem;}
.mw300{max-width: 300px!important;}
.mw400{max-width: 400px!important;}

.column img{max-width: 100%;}

.mapmarkersvg{
   width: 40px;
   display: inline;
}
/****footer********************************************************************************************************/

#footer{
   margin: 0 auto;
   text-align: center;
   padding-bottom: 3rem;   
   position: relative;
   }

.smallsterrrnlogo{
   width: 300px;
   margin: 0 auto;
}

.logobox{
   margin: 0 auto;
   padding: 0;
   width: 100px;
   height: 100px;
}

.blinkgrrrls{fill: white!important;}
.blinkgrrrls:hover{fill: var(--sblorange)!important;}


#footer a:hover{color: #d873ff; }
.mnv{display: none;}

#flex1{
   display: flex;
   flex-direction: column;
   width: 80%;
   align-items: center;
   margin: 0 auto;
}

.stern{
   opacity: 20%;
   margin: 0 auto;
   width: 100%;
}

.flogo{
   width: 120px;
   margin: 10px;
}

/*******************************header************/

header{
   width: 100%;
}

.news{
position: absolute;
right: 0;
margin-right: 20px;
z-index: 1;
}

.stripe{
   width: auto;
   margin: 20px 0 0 30px;
   display: flex;
   justify-content: space-between;
   align-content: center;
   position: fixed;
   z-index: 2;
   background-color: black;
   opacity: 100%;
   box-shadow: 2px 2px 5px var(--sblorange);
}

.navi{
   padding-right: 1rem;
   display: flex;
   justify-content: right;
}

#mainnav{
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   list-style: none;
   min-width: 150px;
   margin: 0.8em 0;
}

#mainnav li{
   display:block;
  width:auto;
  float:right;
  margin-left:15px;
  border-left:0px solid #fff;
   text-align: center;
   background-color: transparent;
}

#mainnav li a{
   text-decoration: none;
   color: #fff;
   font: lighter 2.2rem 'Karantina', sans-serif;
   letter-spacing: 1pt;
   text-transform: uppercase;
}

#mainnav li:hover a{
   color: var(--sblorange);
}

.deco h2{font-size: 2rem; margin: 0; color: white; display: inline-block;}

.dropdown-content:first-child{padding-top:0.5rem;}

.dropdown-content{
   display: none;
   position: absolute;
   background-color: #000000;
   z-index: 5;
   padding-top: 3px;
}

.dropdown:hover .dropdown-content{
   display: block;
}

.dropdown-content a{
   display: block;
   width: 200px;
   padding: 5px 0;
   font: lighter 2rem 'Karantina', sans-serif !important;
   background-color: rgb(0, 0, 0);
}

.dropdown-content a:hover{
   background-color: var(--sblorange);
   color: white!important;
}

#branding{
   padding-left: 0rem;
   color: white;
   overflow-y: scroll!important;
}

#bra{
   font: small-caps normal 1.5rem Karantina, sans-serif;
   margin: 0.8rem 0 0 0;
   display: none;
}

#branding a{
   text-decoration: none;
   color: #fff;
}

#branding a:hover{
   color:  var(--sblorange);
}

#mobilemenubutton{
   display:none;
}

.topnav #myLinks {
   display: none;
   height: 100vh;
}
 
#myLgrid{
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: repeat(15, auto);
   column-gap: 10px;
   padding-top: 1rem;
   padding-bottom: 4em;
   min-width: 300px;
   align-content: center;
}

#myMgrid{
   display: grid;
   grid-template-columns: auto auto;
   grid-auto-flow: row;
   column-gap: 10px;
   padding-top: 1rem;
   padding-bottom: 4em;
   min-width: 300px;
   align-content: center;
}

.linklist{
   display: flex;
   flex-direction: column;
   margin-top: 0.9rem;
}

.h3link{
   font: 1.8rem/1.5rem 'Karantina', sans-serif!important;
   letter-spacing: 1.1pt!important;
   margin-top: 0.8rem;
   padding-left: 1rem;
}

 #myLgrid a, #myMgrid a{
   color: white;
   padding-bottom: 0.5rem;
   font: lighter 1.5rem 'Karantina', sans-serif;
   letter-spacing: 1pt;
   text-transform: uppercase;
}

 a.smoll{
   font: normal 0.8rem clearsans, sans-serif!important;}

#myLinks a:hover{
      color: var(--sblorange);
  }

  .i11, .i21, .i31, .i41, .i51{margin-top: 0.8rem;}

  .i10,.i20,.i30,.i40,.i50{
      padding-left: 1.0rem;
      align-self: stretch;
      margin-top: 0.8rem;
  }

 
 .i10{
    grid-column: 1;
    grid-row: 1;
    padding-top: 0!important;
 }
 .i20{
   grid-column: 1;
   grid-row: 3;
}
.i30{
   grid-column: 1;
   grid-row: 6;
}
.i40{
   grid-column: 1;
   grid-row: 12;
}
.i50{
   grid-column: 1;
   grid-row: 17;
}


 .i11{
    grid-column: 2;
    grid-row: 1;
 }
 .i12{
    grid-column: 2;
    grid-row: 2; 
 }

 .i21{
    grid-column: 2;
    grid-row: 3;
 }
 .i22{
    grid-column: 2;
    grid-row: 4;
 }
 .i23{
    grid-column: 2;
    grid-row: 5;
 }
 .i31{
    grid-column: 2;
    grid-row: 6;
 }
 .i32{
    grid-column: 2;
    grid-row: 7;
 }
 .i33{
    grid-column: 2;
    grid-row: 8;
 }
 .i34{
    grid-column: 2;
    grid-row: 9;
 }
 .i35{
    grid-column: 2;
    grid-row: 10;
 }
 .i36{
   grid-column: 2;
   grid-row: 11;
 }
 .i41{
    grid-column: 2;
    grid-row: 12;
 }
 .i42{
    grid-column: 2;
    grid-row: 13;
 }
 .i43{
    grid-column: 2;
    grid-row: 14;
 }
.i44{
    grid-column: 2;
    grid-row: 15;
 }
.i45{
   grid-column: 2;
   grid-row: 16;
}

 .i51{
    grid-column: 2;
    grid-row: 17;
 }
 .i52{
    grid-column: 2;
    grid-row: 18;
 }
 .i53{
    grid-column: 2;
    grid-row: 19;
 }
 .i54{
    grid-column: 2;
    grid-row: 20;
 }
 .i55{
    grid-column: 2;
    grid-row: 21;
 }
 .i56{
   grid-column: 2;
   grid-row: 22;
 }

 .languagesm{
   list-style: none;
   display: flex;
   margin: 1rem 0 0 0;
   justify-content: center;
   padding-left: 0;
}
 .languagesm li{
   list-style-image: none;
   display: inline-block;
   padding: 0 2rem;
 }


/*************************************completelineup*************/
.categorytag{font: lighter 2.4rem/2.4rem Karantina, sans-serif; letter-spacing: 1pt; display: inline;}
.tagh{font: normal 1.6rem/2.4rem Abel, sans-serif;  color: black; text-transform: uppercase; margin-right: 1.5rem;}
#completelineup p{display: inline;  margin-right: 10px; font: normal 1.6rem/2.4rem Abel, sans-serif;}


/*******************************************************************ACTSARTISTS******************************************************/

.updatebox{display: flex; align-content: center; justify-content: center;}
.sterneinser{width: 60px; align-self: center;}

.callp{background: linear-gradient(var(--sblorange) 0%, #ffffff 5%, #fff 80%, rgba(255, 255, 255, 0) 95%);}

.skewww{background-color: #fff; transform: skew(-10deg); margin-left: -16px;}
.skewww h1{color: #000; font: bold 4rem Karantina, 'Archivo Narrow', sans-serif; padding: 1rem; margin: 0;}

.category{ color: #000; font: bold 3.5rem Karantina, 'Archivo Narrow', sans-serif; padding: 1rem; margin:0; }
.categorybox{
   transform: skew(10deg); margin-left: -16px;
}

.aaatitle{font: 5rem Karantina, 'Archivo Narrow', sans-serif; transform: skew(10deg); margin-bottom: 1rem;}
.artisttitle{font-size: 5rem; margin: 0; font-weight: normal; transform: skew(10deg); margin-bottom: 1rem; padding-right: 0.5rem; letter-spacing: 3pt; color: black;}
.arttitle{font: 3rem Karantina, 'Archivo Narrow', sans-serif; transform: skew(10deg); margin: 0 0 1rem 0.5rem;}
.artsubtitle, .artistsubtitle{color: black; margin-left: 10px;}
.artistp{margin: 0; color: black!important;}

.musiker, .musik, .musikhr{background: linear-gradient(90deg, var(--sblorange) 0%, rgba(255,255,255,0) 100%);}
.sprecher, .diskurshr{background: linear-gradient(90deg, #78ff88 0%, rgba(255,255,255,0) 100%);}
.performer, .performancehr{background: linear-gradient(90deg, #4120ff 0%, rgba(255,255,255,0) 100%);}
.workshopper, .workshophr{background: linear-gradient(90deg, #ffddec 0%, rgba(255,255,255,0) 100%);}
.installer, .installationhr{background: linear-gradient(90deg, #ffbe79 0%, rgba(255,255,255,0) 100%);}

.musikhr, .diskurshr, .workshophr,.performancehr, .installationhr{
   margin: 2rem 0;
   border: 0;
   height: 5px;
}

.M8{padding: 1rem; margin: 0 0 1rem 1rem; background-color: #000;}
.M8 h2{margin-top: 0;}

.marker img{width: 120px;}
.marker{
align-self: end;
margin-bottom: 1rem;
}

.end{justify-self: end;}

.mubo {background-image:url("/2025/assets/images/musik.svg");}
.dibo{background-image: url("/2025/assets/images/diskurs.svg");}
.pebo{background-image: url("/2025/assets/images/performance.svg");}
.wobo{background-image: url("/2025/assets/images/workshop.svg");}
.inbo{background-image: url("/2025/assets/images/installation.svg");}

.authorimg{
   width: 300px;
}

.smbox{
   background-color:#3333CC;
}

.actlogo{width: 300px;}

.main-stage{
   background-image: url("/2025/assets/images/markermain.svg");
   background-repeat: no-repeat;
   height: 250px;
   width: 100px;
}
.mond{
   background-image: url("/2025/assets/images/markermond.svg");
   background-repeat: no-repeat;
   height: 250px;
   width: 100px;
}

.artistpic{max-width: 500px;}

.darken{mix-blend-mode: darken;}

/**************************************************************TABLESES**********************************************************************************************/
table{
   color:black;
   font: normal 1.2rem Abel, sans-serif;
   width: 100%;
}
table a{font: lighter 1.2rem Abel, sans-serif; color: black;}
table a:visited{color: black;}
table a:hovr{color: white;}
table hr{margin: 0.5rem 0;}
th{font: normal 2rem Karantina, sans-serif; letter-spacing: 0.5pt;}
tr{vertical-align: top;}
th, td{   border-bottom: solid 1px white; border-right: solid 1px white; padding: 0rem 0.6rem;}

th a{letter-spacing: 0;}
td{padding: 0.2rem;}

td p{margin: 0.4rem 0; color: black;}

.legende{display: flex;}
.legende h2{padding: 1rem; color: black; border: 1pt solid white; font-weight: bold;}

.standerl{background: linear-gradient(90deg, #ffe601 0%, rgba(255, 255, 255, 0.7) 100%);}
.workshoper1{background: linear-gradient(90deg, #ffddecb3 0%, rgba(255, 255, 255, 0.7) 100%);}
.diskurser1{background: linear-gradient(90deg, #78ff88cb 0%, rgba(255, 255, 255, 0.7) 100%);}
.performanceer1{background: linear-gradient(90deg, #4120ff88 0%, rgba(255, 255, 255, 0.7) 100%);}
.musiker1{background: linear-gradient(90deg, #d873ff 0%, rgba(255, 255, 255, 0.7) 100%);}
.installationer1{background: linear-gradient(90deg, #ffbe79 0%, rgba(255, 255, 255, 0.7) 100%);}

.ttm{width: 40px;}

.two{width: 2;}
.fourteen{width: 14%;}
.fortytwo{width: 42%;}
.twalf{width:12.25%;}
.fortynine{width: 49%;}

#tag1, #tag2{overflow-x:scroll!important;}

.ttr2 th{
   font-size: 1.2rem;
   text-transform: uppercase;
   text-wrap:wrap;
}

.proglist th, .proglist td, .proglist tr{
   border: none;
   vertical-align: middle;
   padding: 0.1rem 0 0.1rem 0rem;
}

.proglist tr:nth-child(even) {background-color: var(--sdarkpurple);}

/********************PDF STYLINGS*************************/

.stander2{background: #ffeb78;}
.workshoper2{background: #ffaaaa;}
.diskurser2{background: #a6ffe9cb;}
.performanceer2{background: #a8c6ff;}
.musiker2{background: #e4b3f8;}
.installationer2{background:#ffd5a8;}


.foggiprog p, .foggiprog span{font-size: 1rem;}

.boofgrid2{display:grid; grid-template-columns: 33% 33% 33%; grid-auto-flow: row; margin: 0 auto;}
.booflogo{
   max-height: 100px;
   flex-shrink: 0;
}
.flexboof{
   display: flex;
   margin: 1.5rem 10px 1.5rem 2rem;
   gap: 25px;
}

.flexboof p{margin-left: 0;}

.boofbox2{border: 2px var(--sdarkpurple) outset; padding: 0 1rem;}
.flexboof2{margin: 0;}

#pdfmepp{
   width: 700px;
   position: relative;

}

.pdftime{
   font: 1rem Abel, sans-serif;
}

.pdftitle{width: 100%;}
.pdftitle svg{height: 100px;}

.pdftable{margin-bottom: 3rem;
   border-collapse: collapse;
}
.pdftable th, .pdftable td{border: 1px solid black;}

.pdftable p, .pdftable a{font-size: 1rem;}
.pdftable hr{margin: 0;}

.pdftable tbody tr:nth-child(4n+1){background-color: #e1d8ff;}

.pdfproglist tr{
   background-color: white!important;
}

.pdfgrid{
   position: relative;
   width: 97%;
   background-color: white;
   display: grid;
   grid-template-columns: 32% 32% 32%;
   grid-template-rows: repeat(7, 100px);
   grid-auto-flow: column;
   gap: 0rem;
   border: 10px solid white;
   margin-top: -3rem;
}
.pdfgrid div{ border-left: 1pt solid black;}
.pdfgrid p{
   font-size: 1rem;
}
.pdfgrid h3{font-size: 1.4rem;}

.pdfflex{
   display: flex;
}

/******************** media queries **********************************************************************************************************************************/
/******************** media queries **********************************************************************************************************************************/
/******************** media queries **********************************************************************************************************************************/

@media screen and (max-width: 1460px){
   .h11{font-size: 3rem; line-height: 2.5rem;}
   .h22{font-size: 3rem;}
   .h31{font-size: 3rem;}
   .logotitle{font-size: 1.3em;}
}

@media screen and (max-width: 1125px){
   .bgnorthernlight2{background-position-y:-200px;}
   .mbr{display: inline;}
   .stripe{width: 100%; margin: 0; top: 0; left: 0;}

   .logotitle{font-size: 1.2rem;}
   .logopbox{top: 1rem;}
   .flex1{
      flex-direction: column;
      align-items: center;
      margin-left: 0;
   }

   .foggrid{
      grid-template-rows: auto auto;
      row-gap: 1rem;
      margin-top: 1rem;
   }
   .fogg1{grid-column: 1/2;}
   .fogg2, .fogg0{grid-column: 2/4;}
   .fogg3{grid-column: 2/3; grid-row: 2/3;}



   .fogimgvert{width: 80%; padding: 0 10%;}
   .fogsubtitle{margin-left: 60px; display: block;}
   

   .lesswidth{width: 35%;}
   .foglogo{max-height: none;}

   .m10{margin: 0 10px!important;}

   .flex3{gap: 5px;}
   .item{width:50%;}
   .w300,.w200{max-width: 50%;}
   .w200{align-self: flex-start;}
   h2{font-size: 1.5rem;}
      
   .category{font-size: 3rem;}
   .skewww h1{font-size: 3.2rem; padding: 1rem; margin: 0;}
   .artisttitle{font-size: 3.5rem; margin: 1rem 0;}
   .artistsubtitle{margin-top: 0;}

   .M8{margin: 0.8rem; padding: 0.8rem; height: auto;}

   .marker img{width: 100px;}

   #mepp{width: 90%; margin-left: 5%;}


   .logopbox{width: 60%; margin-left: 23%}
}

@media screen and (max-width: 930px){

   .flex5{display: flex; gap: 1rem; justify-content: end; align-items: center; flex-direction: column;}
   .flex6{display: flex; gap: 1rem 0; justify-content: end;}


.bgwhs{
      background-image: url(../images/whs.svg);
      background-repeat: no-repeat;
      background-size: cover;
      background-position-x: right;
      background-position-y: center;
      background-size: 80%;  
}
.bgnorthernlight2{background-position-y:-100px;}

.h11{font-size: 2rem; line-height: 1.5rem;}
.h22{font-size: 1.7rem; text-align: center;}
.h31{font-size: 1.8rem; line-height: 2rem;}
.logotitle{font-size: 1rem;}
.whitebox{width: 100%; justify-content: center;}


#demo{font-size: 1.6rem;}

.mbr{display:none;}

.flexbox, .flex2{
   flex-direction: column;
}

.flex2{align-items: center; gap:0;}

   .col1{
       gap: 15px 15px;
       min-width: 40%;
   }

   .imp1{
      grid-row: 1;
      grid-column: 1/4;
      justify-self: left;
   }
   
   .imp2{
      grid-row: 2;
      grid-column: 1/7;
      margin: 1em 0;
      }
   
   .imp3{
      grid-row: 1;
      grid-column: 4/7;
   }

   .grid4{grid-template-columns: 48% 48%; gap:0.5rem;}
   .g1{grid-row: 1; grid-column: 1;}
   .g2{grid-row: 1; grid-column: 2;}
   .g3{grid-row: 2; grid-column: 1;}
   .g4{grid-row: 2; grid-column: 2;}

   .gr1{grid-column: 1/3; grid-row: 1;}
   .gr2{grid-column: 1/2; grid-row: 2;}
   .gr3{grid-column: 2/3; grid-row: 2;}
   .gr4{grid-column: 1/3; grid-row: 3;}

   .foggrid{
      display: grid;
      grid-template-columns: 20% 54% 20%;
      grid-template-rows: auto auto auto;
      margin: 1rem 0;
   }
   .fogg1{grid-column: 2/3; justify-self: center;}
   .fogg2, .fogg0{grid-column: 1/4; grid-row: 2/3; justify-self: center;}
   .fogg3{grid-column: 2/3; grid-row: 3/4; justify-self: center; }

   .fogtitle{font-size: 2.6rem;}
   .fogsubtitle{font-size: 2rem;}


   .marker img{width: 80px;}

   .skewww{margin-left: 0;}
   .skewww h1{font-size: 2.8rem;}
   .categorybox{margin-left: 0;}
   .category{font-size: 2.5rem; padding: 0.5rem;}
   .artisttitle{font-size: 3.0rem;}

   .M8{padding: 0.8rem; margin: 0.4rem 0 1rem 0;}

   .arttitle{font:2rem Karantina, sans-serif;}

   .m2to1{margin-top: 1rem;}
   .flexvtoh{flex-direction: row;}
   .flexhtov{flex-direction: column;}
   .dubbel{grid-column: 1/5!important; grid-row: 3/4;}
   .fifty{width: 75%!important;}

   .awwo{width: 20px; height: 20px;}
   #buttonstorage{position: fixed; bottom: 10px; right: 0px; height: 60px; width: 60px; z-index: 15;}
   #myBtn{width: 40px; height: 40px; border-radius: 20px; border: none; background-color: #78FF88;; cursor:pointer;}

}

   @media screen and (max-width: 670px){
   .artistpic{width: 100%;}

   .news{margin: 0 1rem 0;
   left: 0;}
   .news p{margin-left: 0!important;}
   .bgnorthernlight{background-position-y: 150px;}
   .bgwhs2{
      background-position-y: 40%;
      background-size: 240%;
   }
   .bgnorthernlight2{background-position-y:-50px;}

   .mobilebr{display: inline;}

   #textup{transform: none;  position: relative; animation: none; top: 0rem; width: 100%;}
   .logopbox{width: 80%; margin-left: 12%;}
   .alertbox{padding: 0.8rem;}

   .title, .aaatitle{font-size: 2.2em; margin-top: 0.5rem;}
   .subtitle{font-size: 1.8rem; text-indent: 0;}
   p, a, .fliesstext, .fliesstext a, .text p, ul li, #actartblack p, #actartblack a{font-size: 1rem;}
   .whitebox{padding: 8px 0; gap: 10px;}
   .h31{margin: 0;}
   #demo{font-size: 1.3rem;}

   .leitsatz{font-size: 1.4rem;}
   #fulldiamond{width: 1.2rem;}


   #main{width: 100%;}
   .site{margin-top:56px;}
   .flex1{flex-direction: column; margin: 0; align-items: flex-start;}


   .w300, .w200{max-width: 90%; margin-top: 1.5rem;}

   hr{margin: 1rem 0;}

   .unfold-icon, .fold-icon{width: 30px;}
   .fogtitle{font-size: 1.7rem;}
   .fogsubtitle{font-size: 1.6rem; margin-left: 30px;}
   .fogtitlelong{font-size: 1.6rem;}
   .mobr{display: inline;}
   .foggrid{
      grid-template-columns: 10% 74% 10%;
   }

   .fogg3{grid-column: 1/4; grid-row: 3/4; justify-self: center;}
   .fogimgvert{width: 100%; padding: 0;}

   .flexcol{width: 100%;}
   .lesswidth{width: 60%;}

   .spacer200{height: 150px;}
   .mr{margin-right: 0;}

   #branding{width: 100%;}
   #bra{
      margin: 0.5rem 0 0.5rem 1rem;
      font-size: 1.8rem;
      letter-spacing: 1pt;
      display: inline-block;
   } 

   .news{z-index: 1;}

   #mobilemenubutton{
      display: block;
      position: absolute;
      top: 8px;
      right: 9px;
      width: 25px;
      height: 25px;
      padding: 3px 9px;
   }

   .bar{
   background-color: #fff;
   height: 5px;
   width: 25px;
   margin-bottom: 5px;
   border-radius: 2px;
   }

   #mobilemenubutton:hover .bar{
      background-color: #d873ff;
   }

   .navi{display: none;}

   .banner{margin:0;}

   h1{font-size: 1.7rem;}

   .categorytag{font: lighter 1.8rem/2.0rem Karantina, sans-serif; letter-spacing: 1pt; display: inline;  margin-left: 0;}
   .tagh{font: normal 1.2rem/2.0rem Abel, sans-serif;  color: black; text-transform: uppercase; margin-right: 1rem;}
   #completelineup p{display: inline; margin-right: 10px; font: normal 1.2rem/2.0rem Abel, sans-serif;}

   .marker{display:none;}

   #mepp{width: 100%; margin-left: 0;}

   .boofgrid{display:grid; grid-template-columns: 100%; grid-auto-flow: row;}
   .boofbox>.flex1{flex-direction: row;}


   .mrs{
      font: 1rem Abel, sans-serif;
   }

   .flexboof{
      flex-direction: column;
      margin-left: 0;
      align-items: center;
   }
  
   .alertbox h1{margin: 1rem 1rem 1rem 0;}

}


/*****animationstrip snippet************/

.rotating-text {
   color: white;

  p {
   font: normal 3.5rem/3.5rem 'Karantina', 'CustomSChevron', sans-serif;
    margin: 0 0 3.5rem 10px;
    

    .word {
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: absolute;
      display: flex;
      opacity: 0;

      .letter {
        transform-origin: center center 25px;

        &.out {
          transform: rotateX(90deg);
          transition: 0.5s cubic-bezier(0.6, 0, 0.7, 0.2);
        }
        &.in {
          transition: 0.58s ease;
        }
        &.behind {
          transform: rotateX(-90deg);
        }
      }
    }
  }
}

.mpurple{background: -webkit-linear-gradient(180deg, #eeeeee00, var(--sblorange));}
.mgreen{background: -webkit-linear-gradient(180deg, #eeeeee00, var(--sgreen));}
.mblue{background: -webkit-linear-gradient(180deg, #eeeeee00, var(--sblue));}
.morange{background: -webkit-linear-gradient(180deg, #eeeeee00, var(--sorange));}
.mpink{background: -webkit-linear-gradient(180deg, #eeeeee00, var(--spink));}

@media screen and (max-width: 670px){
   .word{width:80%;}
   .rotating-text p{
      margin: 0 0 1rem 10px;
      font: normal 2rem/2rem 'Karantina', 'CustomSChevron', sans-serif;
   }
}