@charset "UTF-8";
/*
# Copyright (C) Konsoll 2021
# Renewed by Kei Ishizaki
# with respect to Steffen Øie and Robin G. Aaberg

Color Codes:
------------------
White:      #eeeeee
Text White: #d0d0d0
Light Gray: #aeacad
Medium Gray:#8e8c8d
Dark Gray:  #4a4648
Black:      #231c1e
Red:        #ff6347
Light Red:  #fea898
Warning:    #994444
*/


/* Global nav --------------------------------------------- */

/* sticky on homepage */
#nav-global {
  position: sticky;
  top: 0;
  z-index: 110;
  opacity: 0.8;
}
@media screen and (max-width: 480px) { /* no-sticky on mobile */
  #nav-global {
    position: fixed;
    top: -100vh;
    opacity: 0.95;
  }
}


/* Splash --------------------------------------------- */

.splash-button-wrapper{
  position: fixed;
  top: 0;
  opacity: 0.95;
  width: 400px;
  margin: 0 auto;
}

.splash-button{
  width: 200px;
  border: 3px solid #eeeeee;
  margin: 1rem auto 0;
  border-radius: 0.25rem;
  color: #eeeeee;
  font-size: 1.2rem;
  font-weight: 600;
  padding: 0.25rem;
  background: #4a4648;
  text-align: center;
}
.splash-button:hover{
  background: #8e8c8d;
  transition: 0.5s;
}

#splash-message{
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
}

/* Ticket overlay --------------------------------------------- */

#ticketoverlay{
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 100vh;
  opacity: 0.95;
  z-index: 120;
  background-color: #231c1e;
  border-top: solid 1px #4a4648;
  transition: 0.3s;
}

#ticketoverlay-check:checked ~ #ticketoverlay{
  top: 0;
  transition: 0.3s;
}

#ticketoverlay-check{
  display: none;
}

.ticketoverlay-button{
}

.ticketoverlay-boxwrapper{
  max-width: 960px;
  height: 90vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;

  justify-content: space-around;
  align-items: center;
}

.ticketoverlay-box{
  width: 220px;
  border: 2px solid #eeeeee;
  color: #eeeeee;
  text-align: center;
  padding: 1rem;
  border-radius: 5px;
}

.ticketoverlay-eventname{
  font-size: 1.4rem;
  font-weight: 400;
}

.ticketoverlay-text-solout{
  text-decoration-line: line-through;
  text-decoration-color: #ff6347;
  text-decoration-thickness: 0.2rem;
}

.ticketoverlay-eventshortdesc{
  font-size: 1rem;
  font-weight: 400;
}

.ticketoverlay-eventdesc{
  font-size: 0.8rem;
  margin-top: 1rem;
}

.ticketoverlay-buynow{
  margin-top: 1rem;
  font-weight: 400;

}

.ticketoverlay-buynow-soldout{
  color: #ff6347;
}

.ticketoverlay-cancel{
  width: 100%;
  text-align: center;
  font-weight: 400;
}



/* Promo section --------------------------------------------- */

.section-promo {
  max-width: none;
  padding: 0;
  float: left;
}

.promo-full, .promo-half, .promo-third {
  margin-top: 1.5rem;
  float: left;
  color: #eeeeee;
  background-position: center;
  background-size: cover;
  position: relative;
}

.promo-full {
  width: 100%;
  height: 60vw;
  min-height: 30rem;
}

.promo-half {
  width: 50%;
  height: 40vw;
  min-height: 20rem;
}

.promo-third {
  width: 33.33%;
  height: 20vw;
  min-height: 20rem;
}

/* highlight on hover */
.promo-full:hover::after,
.promo-half:hover::after,
.promo-third:hover::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(255, 255, 255, 0.1);
  transition: 0.5s;
}
.promo-full:hover .learn-more,
.promo-half:hover .learn-more,
.promo-third:hover .learn-more {
  background: rgba(255,255,255,0.5);
  width: calc( 100% - 2rem ); /* 100% - left and right margin */
  text-align: center;
  transition: 0.5s;
}

.date-locator {
  top: 1rem;
  right: 1rem;
  opacity: 0.75;
}

.promo-title-locator {
  margin-left: 1rem;
  margin-bottom: 1rem;
  padding-left: 0.5rem;
  min-width: 320px;
  border-left: 0.5rem solid #eeeeee;
  opacity: 0.75;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,0.4));
}

.promo-title-locator h2 {
  line-height: 100%;
  margin-top: 0;
}

.width-minus-1day {
  width: calc(100% - 7.5rem);
}

.width-minus-2days {
  width: calc(100% - 13rem);
}

.promo-full .promo-title {
  font-size: 3rem;
  font-weight: 600;

  margin-bottom: 0.5rem;
}

.promo-half .promo-title {
  font-size: 2rem;
  font-weight: 600;

  margin-bottom: 1rem;
}

.promo-third .promo-title {
  font-size: 1.5rem;
  font-weight: 600;

  margin-bottom: 1rem;
}

.promo-description {
  font-size: 1.1rem;
  font-weight: 400;
}

.date-box {
  width: 4.5rem;
  height: 4.5rem;
  padding: 0.2rem;
}

.hint-box{
  width: 9rem;
  height: 4.5rem;
  padding: 0.2rem;
  vertical-align: middle;
}

.date-month {
  margin-top: 0.05rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
}

.date-day {
  margin-top: 0.3rem;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}

.learn-more {
  position: absolute;
  bottom: 1rem;
  right: 1rem;

  font-size: 1.2rem;
  font-weight: 600;
  opacity: 0.75;
  background: rgba(255,255,255,0.25);
  padding: 0.2rem 1.2rem;
  border-radius: 1rem;
}



.section-news {
  height: 250px;
  background-position: center;
  background-size: cover;
}


@media only screen and  (max-width: 480px){ /* switch to 1-col layout */
  .promo-half, .promo-third { width: 100%; }
}


/* =====  5 PAGE: Front Page  =========================== */
main {
  padding: 0;
}

#section-0 h2 {
  margin-top: 7rem; /* use normal, not smaller gap before the first section */
}

/* -----    5.1 Splash Screen  --------------------------------------------- */
.splash {
  width: 100%;
  max-width: none;
  height: 90vh;
  margin: 0;
  background-color: #231c1e;
}
@media only screen and  (max-width: 480px){
  .splash { height: 80vh; /* avoide browser's UI */ }
}

/* ############### SPLASH GRAPHICS */

.splash .splashGraphics {
  height: 100%;
  width: 100%;
}

.splash .splashGraphics .line {
  position: absolute;
  min-width: 50px;
  height: 10px;
  border-radius: 5px;
  -webkit-transition: 0.5s; /* Safari */
  transition: 0.5s;
}

.splash .splashGraphics .line.red {
  background-color: #ff6347;
}
.splash .splashGraphics .line.gray {
  background-color: #4a4648;
}

@media screen and (max-width: 960px) {
  .splash .splashGraphics .line {
    height: 8px;
    border-radius: 4px;
  }
}

@media screen and (max-width: 480px) {
  .splash .splashGraphics .line {
    height: 6px;
    border-radius: 3px;
  }
}

.splash .splashGraphics #line-01 {
  top: 15%;
  left: -10px;
  width: 45%;
}
.splash:hover .splashGraphics #line-01 {
  left: 4%;
}
.splash .splashGraphics #line-02 {
  top: 18%;
  left: -10px;
  width: 25%;
}
.splash .splashGraphics #line-03 {
  top: 25%;
  left: -10px;
  width: 10%;
}
.splash .splashGraphics #line-04 {
  top: 52%;
  left: 19%;
  width: 10%;
}
.splash .splashGraphics #line-05 {
  top: 52%;
  right: -10px;
  width: 15%;
}
.splash .splashGraphics #line-06 {
  top: 90%;
  right: -10px;
  width: 35%;
}
.splash .splashGraphics #line-07 {
  top: 93%;
  right: 25%;
  width: 15%;
}
.splash:hover .splashGraphics #line-07 {
  right: -10px;
}
.splash .splashGraphics #line-08 {
  top: 72%;
  left: -10px;
  width: 35%;
}
.splash .splashGraphics #line-09 {
  top: 75%;
  left: 15%;
  width: 15%;
}
.splash:hover .splashGraphics #line-09 {
  left: 9%;
}
.splash .splashGraphics #line-10 {
  top: 32%;
  right: -10px;
  width: 23%;
}
.splash .splashGraphics #line-11 {
  top: 29%;
  right: -10px;
  width: 6%;
}
.splash .splashGraphics #line-12 {
  top: 65%;
  right: 20%;
  width: 15%;
}
.splash:hover .splashGraphics #line-12 {
  right: 16%;
}
.splash .splashGraphics #line-13 {
  top: 68%;
  right: 16%;
  width: 10%;
}
.splash:hover .splashGraphics #line-13 {
  right: 18%;
}
.splash .splashGraphics #line-14 {
  top: 84%;
  left: 10%;
  width: 10%;
}
.splash .splashGraphics #line-15 {
  top: 93%;
  left: 30%;
  width: 10%;
}

@media screen and (max-width: 480px) {
  .splash .splashGraphics #line-01 {
    top: 11%;
  }
  .splash .splashGraphics #line-02 {
    top: 14%;
  }
  .splash .splashGraphics #line-03 {
    top: 21%;
  }
  .splash .splashGraphics #line-04 {
    left: 8%;
  }
  .splash .splashGraphics #line-10 {
    top: 18%;
  }
  .splash .splashGraphics #line-11 {
    top: 21%;
  }
}



/* ############### */


.splash .splashContent {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  padding: 4rem 0 0 0;
  color: #eeeeee;
  text-align: center;
}


/* SPLASH -> LOGO */
#logo {
  max-width: 80vw;
  max-height: 20vh;
  width: 500px;
  margin-top: 20vh;
}


/* SPLASH -> TIME AND LOCATION */
.splash .splashContent #timeAndLocation {
  margin: 2rem 0 0 0;
}
.splash .splashContent #timeAndLocation p {
  font-size: 1.25em;
  font-weight: 100;
  margin-bottom: .35em;
  letter-spacing: 0.12em;
}


/* SPLASH -> COUNTDOWN TIMER */
#countdown {
}

#countdown-days .cd-days {
  padding: 0.15rem 1rem;
  margin-right: 0.5rem;
  font-size: 2rem;
  color: #d0d0d0;
  background-color: #4a4648;
  border-radius: 0.2rem;
}

#countdown-time {
  font-size: 2rem;
  color: #eeeeee;
}
#countdown .cd-unit {
  font-size: 1rem;
}



/* SPLASH -> TICKET BUTTON */
.splash .splashContent #ticketButton {
  margin: 2rem 0 0 0;
  display: inline-block;
  border: 2px solid #eeeeee;
  padding: 0.75rem 1rem;
  width: auto;
  color: #eeeeee;
  -webkit-transition: 0.5s; /* Safari */
  transition: 0.5s;
}

.splash .splashContent #ticketButton:hover {
  background-color: #eeeeee;
  color: #231c1e;
  -webkit-transition: 0.5s; /* Safari */
  transition: 0.5s;
}

.splash .splashContent #ticketButton p {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.25rem;
  margin: 0;
  padding: 0;
}

.splash .splashContent #ticketButton:hover p {
  font-weight: 300;
}

@media screen and (max-width: 480px) {
  .splash .splashContent #ticketButton {
    padding: .5rem .75rem;
  }

  .splash .splashContent #ticketButton p {
    font-size: 1.1rem;
  }
}


/* SPLASH -> SOCIAL MEDIA */
.splash .splashContent #socialMediaBox {
  margin: 1.5rem 0 0 0;
}

.splash .splashContent #socialMediaBox a {
  color: #eeeeee;
  opacity: 0.5;
}

.splash .splashContent #socialMediaBox a:hover {
  color: #eeeeee;
  opacity: 1;
}

.splash .splashContent #socialMediaBox i {
  font-size: 1.8em;
  margin: 0 1rem;
}


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

  #logo{
    margin-top: 100px;
  }

  .splash .splashContent #timeAndLocation p {
    font-size: 1em;
    line-height: 1rem;
    font-weight: 100;
    margin-bottom: .25em;
    letter-spacing: 0;
  }
}


/* -----    5.3 Quotes  --------------------------------------------- */
.quotes {
  width: calc(100% - 100px);
  background: url('/content/1-home/quotation.png') no-repeat, url('/content/1-home/quotation-close.png') no-repeat;
  background-position: top left, top right;
  background-size: auto 20%;
}

.quotes .singleQuote {
  width: 100%;
  margin-bottom: 2rem;
  padding: 2rem 7rem 2rem 7rem;
  overflow: hidden;
}

.quotes .singleQuote p {
  font-size: 1rem;
  margin-bottom: 0;
  font-weight: 400;
}

.quotes .singleQuote .quoteText {
  line-height: 1.4rem;
}

.quotes .quoteFooter {
  margin-top: 1rem;
}

.quotes .singleQuote .quoteName {
  font-weight: 400;
  margin-bottom: 0;
}

.quotes .singleQuote .quoteDesc {
  font-size: 0.8rem;
  line-height: 0.8rem;
  margin: 0.25rem 0 0 0 ;
  opacity: 0.5;
}

@media screen and (max-width: 960px) {
  .quotes .singleQuote {
    width: calc(100% - 2rem);
    min-height: 0;
    margin: 1rem 1rem;
    padding: 2rem 1rem;
  }
}


/* -----    5.4 News  --------------------------------------------- */

section.news {
  padding: 4rem 0 0 0;
  overflow: hidden;
}

/* HEADER */
section.news .newsHeader {
  /*text-align: center;*/
}

/* ARTICLES */
section.news article {
  position: relative;
  margin: 0 0 2rem 0;
  background-color: #ffffff;
  overflow: hidden;
}

section.news article {
  position: relative;
  margin: 0 0 2rem 0;
  background-color: #ffffff;
}

section.news article figure {
  position: relative;
  width: 30%;
  margin: 0;
}
section.news article figure img {
  display: block;
  padding: 0;
  margin: 0;
}

section.news article header {
  position: absolute;
  top: 0;
  left: 30%;
  padding: 1rem;
}

section.news article header h3 {
  margin: 0 0 0.5rem 0;
}

section.news article header h3 a {
  color: #231c1e;
  text-decoration: none;
}
section.news article header h3 a:hover {
  text-decoration: none;
}

section.news article header p.article-date {
  font-size: 0.8rem;
  opacity: 0.5;
  margin: 0 0 1rem 0;
}
section.news article header p.article-date i {
  position: relative;
  top: -1px;
  margin: 0 0.25rem 0 0;
}

section.news article div {
  font-size: 0.9rem;
  color: rgba(0, 0, 0, 0.66);
}

@media screen and (max-width: 480px) {
  section.news article figure {
    position: relative;
    width: 100%;
    margin: 0;
  }

  section.news article header {
    position: relative;
    top: 0;
    left: 0;
    padding: 1rem;
  }
}

@media screen and (max-width: 480px) {
  section.news article {
    background-color: transparent;
  }

  section.news article header {
    padding: 1rem 0;
  }

  section.news article header p.article-date {
    margin: 0;
  }
}


/* NEWS ARCHIVE LINK */
section.news .newsArchiveLink {
  position: relative;
  top: -1rem;
  display: block;
  text-align: right;
}

section.news .newsArchiveLink a {
  display: inline;
}

section.news .newsArchiveLink a span {
  color: #231c1e;
  padding: .3rem .5rem;
  border: 2px solid #231c1e;
  background-color: transparent;
  -webkit-transition: 0.33s; /* Safari */
  transition: 0.33s;
}

section.news .newsArchiveLink a span i {
  margin: 0 0 0 0.5rem;
}

section.news .newsArchiveLink a:hover {
  text-decoration: none;
}

section.news .newsArchiveLink a:hover span {
  color: #eeeeee;
  padding: .25rem .5rem;
  background-color: #231c1e
}

@media screen and (max-width: 480px) {
  section.news .newsArchiveLink {
    margin: 0 1rem;
  }
}

.section-link a {
  margin-top: 1rem;
  padding: 0.5rem 2rem;
  display: block;

  color: #d0d0d0;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  background: #4a4648;
  border-radius: 5px;
}
@media screen and (max-width: 480px) {
  .section-link a {
    font-size: 0.75rem;
    padding: 0.75rem 0;
  }
}

/* -----    5.5 Sponsors  --------------------------------------------- */

.partnerContainer,
.sponsorContainer {
  left: 1rem;
  font-size: 0;
  padding: 1rem;
  background: #dddddd;
  border-radius: 20px;
}

.partnerContainer > a div,
.sponsorContainer > a div {
  display: inline-block;
  width: calc(14% - 10px);
  height: 100px;
  margin: 0 1rem 1rem 1rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (max-width: 960px) {
  .partnerContainer > a div,
  .sponsorContainer > a div {
    width: calc(20% - 10px);
  }
}
@media screen and (max-width: 480px) {
  .partnerContainer > a div,
  .sponsorContainer > a div {
    width: calc(25% - 10px);
  }
}
@media screen and (max-width: 480px) {
  .partnerContainer,
  .sponsorContainer {
    margin: 0 0 2rem 0;
    left: 0;
  }
}