body {
font-size: 15px;
line-height: 28px;
color: #616161;
}  
html {
--scrollbarBG: #000000;
--thumbBG: #ae8e53;
}
body::-webkit-scrollbar {
width: 11px;
}
body {
scrollbar-width: thin;
scrollbar-color: var(--thumbBG) var(--scrollbarBG);
}
body::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
background-color: var(--thumbBG) ;
border: 3px solid var(--scrollbarBG);
}
#wrapper {
overflow: hidden;
}
.container {
max-width: 1200px !important;
padding-left: 30px;
padding-right: 30px;
}
a {
text-decoration: none !important;
color: #a59881;
}
b,
strong {
font-weight: 700;
}
img {
max-width: 100%;
height: auto;
}
p {
margin: 0;
}
p + p {
margin-top: 25px;
}
p + h1,
p + h2,
p + h3 {
margin-top: 40px;
}
#wrapper > main#main {
margin-top: -80px;
margin-bottom: -80px;
}
.nav-links a,
a.lion-cta {
border: none;
text-shadow: -1px -1px 0 rgba(26, 26, 26, 0.6);
outline: none;
position: relative;
display: inline-block;
color: #ececec;
font-weight: 400;
font-size: 14px;
text-align: center;
padding: 9px 15px;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
overflow: hidden;
border-radius: 100px;
border-radius: 0;
background-color: #222222;
}
.heroes a.lion-cta {
font-weight: 600;
}
a.lion-cta {
width: 190px;
transition: all 0.2s ease-in-out;
}
a.lion-cta.lion-cta-2 {
background: #eabf5d;
color: #222222;
}
a.lion-cta.lion-cta-2:before {
background: rgba(255, 255, 255, 0.2);
}
a.lion-cta.lion-cta-2:after {
background: rgba(255, 255, 255, 0.2);
}
a.lion-cta:before,
a.lion-cta.lion-cta-2:before {
content: none !important;
}
.nav-links > div {
text-align: center;
}
.nav-links a {
padding: 14px 30px;
}
main#main {
padding-top: 200px;
padding-bottom: 200px;
position: relative;
background: #ffffff;
background-position: center calc(100% - 80px);
background-repeat: no-repeat;
background-size: 100%;
}
nav#mobileMenu {
display: block;
background: #111111;
position: fixed;
z-index: 95;
padding-top: 132px;
width: 100%;
top: 0;
left: 0;
transition: all 0.2s ease-in-out;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-100%);
}
body.menu-is-active nav#mobileMenu {
opacity: 1;
visibility: visible;
pointer-events: unset;
transform: translateY(0);
}
header#header.active + nav#mobileMenu {
padding-top: 80px;
}
nav#mobileMenu ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-direction: column;
align-items: center;
justify-content: center;
}
nav#mobileMenu ul li {
width: 100%;
text-align: center;
}
nav#mobileMenu ul li a {
padding: 20px 0;
display: block;
color: #ececec;
width: 100%;
text-transform: uppercase;
font-weight: 700;
}
span#triggerMenu {
display: none;
margin-left: auto;
position: relative;
width: 40px;
height: 24px;
}
span#triggerMenu span {
position: absolute;
width: 40px;
height: 4px;
transition-property: transform;
border-radius: 4px;
background-color: #ececec;
top: auto;
bottom: 0;
transition-delay: .13s;
transition-timing-function: cubic-bezier(.55,.055,.675,.19);
transition-duration: .13s;
}
span#triggerMenu span:after, span#triggerMenu span:before {
display: block;
content: "";
}
span#triggerMenu span, span#triggerMenu span:after, span#triggerMenu span:before {
position: absolute;
width: 40px;
height: 4px;
transition-timing-function: ease;
transition-duration: .15s;
transition-property: transform;
border-radius: 4px;
background-color: #ececec;
}
span#triggerMenu span:before {
top: -10px;
transition: top .12s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19);
}
span#triggerMenu span:after {
top: -20px;
transition: top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity .1s linear;
bottom: -10px;
}
span#triggerMenu.is-active span {
transition-delay: .22s;
transition-timing-function: cubic-bezier(.215,.61,.355,1);
transform: translate3d(0,-10px,0) rotate(-45deg);
}
span#triggerMenu.is-active span:before {
top: 0;
transition: top .1s cubic-bezier(.33333,0,.66667,.33333) .16s,transform .13s cubic-bezier(.215,.61,.355,1) .25s;
transform: rotate(
-90deg
);
}
span#triggerMenu.is-active span:after {
top: 0;
transition: top .2s cubic-bezier(.33333,0,.66667,.33333),opacity .1s linear .22s;
opacity: 0;
}
body {
color: #000000;
background: #ffffff;
}
a, a:hover, a:focus, a:active {
color: #333333;
}
@media only screen and (max-width: 767px) {
body {
font-size: 16px;
}
h2, .h2 {
font-size: 1.5rem;
}
a.lion-cta {
width: 190px;
padding: 9px 15px;
letter-spacing: 1px;
}
#forestillinger {
padding-top: 70px;
padding-bottom: 70px;
}
#forestillinger .container > p {
font-size: 15px;
margin-bottom: 30px;
text-align: center;
}
}
@media only screen and (max-width: 600px) {
body {
font-size: 14px;
}
main#main {
padding-top: 140px;
padding-bottom: 140px;
}
}
@media only screen and (max-width: 440px) {	
.copyright .container > *:nth-child(1) {
display: block !important;
}
.copyright p,
.copyright nav ul li a {
font-size: 12px;
}	
}
@media only screen and (max-width: 360px) {
.copyright nav ul li a {
margin-left: 12px;
}
}
.some-wrapper a svg {
fill: #ffffff;
}
#wrapper {
overflow: hidden;
display: flex;
min-height: 100vh;
flex-direction: column;
}
div#content {
flex: 1 0 auto;
display: flex;
flex-direction: column;
}
main#main {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
h1 {
text-align: center;
text-transform: uppercase;
position: relative;
padding-bottom: 20px;
margin-bottom: 20px;
}
body .page { margin-top: 50px;
}
#main {
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 1;
background-size: 100%;
}
#showLogo img {
width: 270px;
}
.wp-block-image figcaption {
font-weight: 300;
color: white;
}
table {
width: 80%;
background: #000000c7;
border: 1px solid #ae8c3e;
margin-bottom: 100px;
}
table svg {
fill: white;
}
tr:first-child {
border-bottom: 1px solid #ae8c3e;
}
td {
padding: 25px;
}
tr > td:nth-child(n + 2) {
text-align: center;
}
.blocks-gallery-item figure {
border: 1px solid #fff;
}
.copyright {
background: #000000;
padding-top: 70px;
padding-bottom: 20px;
margin: 0;
}
.copyright p {
font-size: 11px;
line-height: 1.2;
}
.copyright strong {
font-weight: 700 !important;
}
.modal {
will-change: visibility, opacity;
display: flex;
align-items: center;
justify-content: center;
position: fixed !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
z-index: 1000;
visibility: hidden;
opacity: 0;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition-delay: $modal-delay;
}
.modal--active {
visibility: visible;
opacity: 1;
}
.modal--align-top {
align-items: flex-start;
}
.modal__bg {
background: rgba(0, 0, 0, 0.6);
}
.modal__dialog {
max-width: 600px;
margin: 0 30px;
width: 100%;
}
.modal__content {
will-change: transform, opacity;
position: relative !important;
padding: 50px;
font-size: 15px;
background: #213c77;
box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25);
opacity: 0;
transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
height: 100%;
max-height: calc(100vh - 30px);
overflow-y: auto;
}
.modal__content--active {
opacity: 1;
}
main#main .modal__content p + p {
margin-top: 20px;
}
.modal__close {
z-index: 1100;
cursor: pointer;
position: absolute !important;
top: 10px;
right: 10px;
}
.modal__close svg {
width: 24px;
fill: #fff;
pointer-events: none;
vertical-align: top;
}
.modal__trigger {
position: absolute !important;
display: inline-block;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.modal__trigger--active {
z-index: 100;
}
body #content .modal__content h2 {
font-size: 22px;
text-align: left;
font-weight: 700;
position: relative;
padding-bottom: 14px;
margin-bottom: 20px;
}
body #content .modal__content h2:before,
body #content .modal__content h2:after {
position: absolute;
content: "";
bottom: 0;
left: 0;
margin: auto;
background: #ae8c3e;
}
body #content .modal__content h2:before {
max-width: 130px;
height: 1px;
width: 100%;
}
body #content .modal__content h2:after {
height: 3px;
bottom: -1px;
width: 50px;
}
body #content .modal__content h3 {
font-size: 16px;
text-align: left;
}
body #content .modal__content p {
text-align: justify;
}
.imgContainer p.read_more {
margin: 0;
position: absolute;
pointer-events: none;
z-index: 1;
bottom: 0;
left: 0;
right: 0;
color: white;
font-weight: 700;
text-transform: uppercase;
font-size: 13px;
padding-bottom: 20px;
padding-right: 30px;
text-align: right;
transform: translateY(20px);
opacity: 0;
visibility: hidden;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.imgContainer p.read_more {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.imgContainer p.read_more:before {
background: linear-gradient(0deg, #1f3c77, transparent);
height: 100px;
width: 100%;
content: "";
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
#modal__temp {
will-change: transform, opacity;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #213c77;
-webkit-transform: none;
transform: none;
opacity: 1;
transition: opacity 0.1s ease-out,
-webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.1s ease-out,
transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
transition: opacity 0.1s ease-out,
transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
-webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__trigger--active #modal__temp {
left: -8px;
right: 8px;
}
.main-nav {
display: none;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
text-align: center;
opacity: 0;
z-index: 100;
visibility: hidden;
transition: all 0.375s;
}
.main-nav.is-open {
opacity: 1;
visibility: visible;
} .main-nav::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -15px;
background: rgba(14, 23, 47, 0.9);
transform-origin: 0 0;
transform: skew(-14deg) translateX(-120%);
transition: all 0.275s 0.1s;
}
nav#main-nav span.offset {
height: 1400px;
width: 300px;
transform: translateX(46.7%) skew(-14deg);
position: absolute;
top: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
.main-nav.is-open::before {
transform: skew(-14deg) translateX(0);
} .main-nav ul {
display: inline-flex;
flex-direction: column;
height: 93%; align-items: flex-end;
justify-content: center;
transform: translateX(-18%) skew(-16deg);
margin-top: 40px;
}
.main-nav li {
display: block;
margin: 0.5rem 0;
text-align: right;
transform: skew(16deg);
} .main-nav a {
opacity: 0;
transform: translateY(-10px);
}
.main-nav.is-open a {
opacity: 1;
transform: translateY(0);
}
.main-nav li:nth-child(1) a {
transition: all 275ms 175ms;
}
.main-nav li:nth-child(2) a {
transition: all 275ms 225ms;
}
.main-nav li:nth-child(3) a {
transition: all 275ms 275ms;
}
.main-nav li:nth-child(4) a {
transition: all 275ms 325ms;
}
.main-nav li:nth-child(5) a {
transition: all 275ms 375ms;
}
.main-nav li:nth-child(6) a {
transition: all 275ms 425ms;
}
.main-nav li:nth-child(7) a {
transition: all 275ms 475ms;
} .main-nav ul,
.main-nav li {
list-style: none;
padding: 0;
}
.main-nav a:not(.logo) {
display: block;
padding: 7px 0;
color: #ffffff;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
position: relative;
}
.main-nav a.logo {
position: absolute;
max-width: 240px;
left: 30px;
top: 20px;
}
.main-nav li.current-menu-item a:before {
width: 70px;
height: 1px;
content: "";
position: absolute;
bottom: 0;
right: 0;
background: #ae8c3e;
}
.main-nav li.current-menu-item a:after {
width: 30px;
height: 3px;
content: "";
position: absolute;
bottom: -1px;
right: 0;
background: #ae8c3e;
}
.copyright a.footerbrand {
display: inline-flex;
position: absolute;
z-index: 1;
background-color: black;
background-image: url(//lionmusicals.dk/frost/wp-content/uploads/dark_wall.png);
border-radius: 100%;
padding: 10px;
border: 1px solid #ae8c3e;
box-shadow: 0 10px 20px rgb(0 0 0 / 30%);
top: -30px;
left: calc(50% - 40px);
max-width: 80px;
height: 80px;
opacity: 1;
align-items: center;
justify-content: center;
}
.copyright a.footerbrand img {
width: 100%;
height: 100%;
}
header#header a.mobileTickets {
position: absolute;
left: 30px;
display: none;
}
header#header a.mobileTickets svg {
fill: #ffffff;
width: 30px;
left: 0;
right: 0;
margin: auto;
display: block;
}
.ticketStatus {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0 20px;
font-size: 13px;
}
.ticketStatus > span,
.statusIcon {
width: 14px;
height: 14px;
background: black;
margin-left: 20px;
margin-right: 10px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
}
.ticketStatus > span.available {
margin-left: 0;
}
.statusIcon {
position: absolute;
margin: 0;
top: 0;
right: 0;
width: 10px;
height: 100%;
border-radius: 0 5px 5px 0;
}
.ticketStatus > span:after,
.statusIcon:after {
content: "";
position: absolute;
top: 1px;
left: 1px;
width: calc(100% - 2px);
height: calc(100% - 2px);
opacity: 0.4;
border-radius: 2px;
background: linear-gradient(180deg, white, transparent);
}
.ticketStatus > span.available,
.statusIcon.tickets {
background: #069649;
}
.ticketStatus > span.fewLeft,
.statusIcon.fewtickets {
background: #eec85c;
}
.ticketStatus > span.unavailable,
.statusIcon.udsolgt {
background: #f13838;
}
.billet.udsolgt > .action > .standardTicket,
a.vip.vip-trigger.VipUdsolgt {
background: #f13838 !important;
color: white !important;
cursor: default;
pointer-events: none;
}
.billet.few > .action > .standardTicket {
background: #eec85c !important;
color: #000 !important;
text-shadow: unset !important;
}
.standard-packages-row {
width: 100%;
margin-top: 20px;
margin-bottom: 0;
}
.standard-packages-row .standard-ticket {
background: rgba(0, 0, 0, 0.5);
text-align: center;
position: relative;
border: 2px solid #ae8c3e;
border-radius: 5px;
overflow: hidden;
}
.standard-packages-row .standard-ticket p {
margin: 0 !important;
}
.standard-packages-row .standard-ticket .standard-ticket-header {
background: #ae8c3e;
padding: 6px 0;
}
.standard-packages-row .standard-ticket .standard-ticket-header h5 {
font-size: 14px;
font-weight: 300;
margin: 0;
}
.standard-packages-row .standard-ticket .standard-ticket-content {
padding: 10px 0;
display: flex;
flex-direction: column;
align-items: center;
}
.standard-packages-row .standard-ticket .standard-ticket-content hr {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
margin: 10px 0;
width: 100%;
}
.standard-packages-row .standard-ticket .standard-ticket-content .period {
text-transform: uppercase;
font-size: 12px;
}
.standard-packages-row .standard-ticket .standard-ticket-content p.offerprice {
font-weight: 700;
font-size: 22px;
line-height: 1.2;
padding-top: 2px;
}
.standard-packages-row .standard-ticket .standard-ticket-content p.normalprice {
position: relative;
font-size: 14px;
}
.standard-packages-row
.standard-ticket
.standard-ticket-content
p.normalprice:before {
content: "";
position: absolute;
width: 110%;
height: 2px;
background: #ae8c3e;
transform: rotate(6deg) translate(-1px, 10px);
}
.standard-packages-row .standard-ticket .standard-ticket-footer {
background: rgba(255, 255, 255, 0.2);
border-top: 1px solid rgba(255, 255, 255, 0.2);
line-height: 1.1;
padding: 10px 0;
}
.standard-packages-row .standard-ticket .standard-ticket-footer p:first-child {
font-size: 12px;
text-transform: uppercase;
}
.standard-packages-row .standard-ticket .standard-ticket-footer p:last-child {
font-size: 26px;
font-weight: 700;
}
body.activeVipModal {
overflow: hidden;
}
#modal-vip {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease-in-out;
}
.activeVipModal #modal-vip {
opacity: 1;
visibility: visible;
}
#modal-vip .vip-wrap {
width: 100%;
max-width: 1160px;
padding: 0 30px;
}
#modal-vip .vip-wrap .vip-content {
background: #010f2e;
padding: 40px;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
position: relative;
border-radius: 5px;
box-shadow: 0 0 150px rgba(68, 201, 255, 0.3);
}
#modal-vip .vip-wrap .close-vip {
position: absolute;
top: 0px;
right: 0px;
width: 70px;
height: 70px;
display: block;
z-index: 1;
padding: 10px;
}
#modal-vip .vip-wrap .close-vip svg {
width: 100%;
height: 100%;
fill: #ffffff;
}
#modal-vip .vip-wrap .vip-content h2 {
font-size: 30px;
}
#modal-vip .vip-wrap .vip-content .vip-packages {
margin-left: 0;
margin-right: 0;
}
#modal-vip .vip-wrap .vip-content .vip-packages > div {
padding-left: 0;
padding-right: 0;
}
body #modal-vip .vip-wrap .vip-content .vip-packages .vip-ticket {
flex-direction: row;
padding: 40px 40px 60px;
}
body
#modal-vip
.vip-wrap
.vip-content
.vip-packages
.vip-ticket
div:last-child {
min-width: 230px;
margin-left: 40px;
text-align: center;
}
@media only screen and (max-width: 800px) {
body #modal-vip .vip-wrap .vip-content .vip-packages .vip-ticket {
flex-direction: column;
}
body
#modal-vip
.vip-wrap
.vip-content
.vip-packages
.vip-ticket
div:last-child {
margin-left: 0;
}
}
@media only screen and (max-width: 500px) {
#modal-vip .vip-wrap .vip-content {
padding: 20px;
}
#modal-vip .vip-wrap {
padding: 0 15px;
}
#modal-vip .vip-wrap .vip-content h2 {
font-size: 20px;
}
#modal-vip .vip-wrap .vip-content .close-vip {
top: 10px;
right: 10px;
width: 35px;
height: 35px;
}
#modal-vip .vip-wrap .vip-content {
max-height: calc(100vh - 30px);
}
body #modal-vip .vip-wrap .vip-content .vip-packages .vip-ticket {
padding: 20px 20px 60px;
}
body
#modal-vip
.vip-wrap
.vip-content
.vip-packages
.vip-ticket
p.price:before {
width: 250px;
left: 0;
right: 0;
margin: auto;
}
body #modal-vip .vip-wrap .vip-content .vip-packages .vip-ticket p.price {
left: 0;
right: 0;
margin: auto !important;
text-align: center;
}
}
@media only screen and (max-width: 1170px) {
.open-main-nav,
.main-nav,
header#header a.mobileTickets {
display: block;
}
.topnav .textlink {
display: none;
}
}
@media only screen and (max-width: 600px) {
.topnav .container {
flex-direction: column;
justify-content: center !important;
}
.topnav .container > .text-right {
order: 1;
margin-top: 5px;
margin-bottom: 10px;
}
.topnav .container > #presents {
order: 2;
}
.topnav {
padding: 7px 0;
}
.topnav .container {
justify-content: center !important;
}
}
@media only screen and (max-width: 500px) {
.container {
padding-left: 15px;
padding-right: 15px;
}
.topnav .container #presents {
font-size: 10px;
}
header#header a.mobileTickets svg {
width: 24px;
}
.burger-text {
font-size: 9px;
}
.main-nav a.logo {
max-width: 170px;
left: 15px;
}
.open-main-nav {
padding-top: 14px;
}
button#burger.is-open {
top: 16px;
right: 8px;
}
.burger {
width: 23px;
height: 2px;
}
.burger:before {
transform: translateY(-12px) skew(-10deg);
}
.burger:after {
transform: translateY(-8px) translateX(-2px) skew(-20deg);
}
.main-nav a:not(.logo) {
padding: 6px 0;
font-size: 1em;
}
.main-nav li.current-menu-item a:before {
width: 50px;
}
.main-nav li.current-menu-item a:after {
width: 16px;
}
.modal__trigger--active #modal__temp {
left: 0;
right: 0;
}
.modal__dialog {
margin: 15px;
}
.modal__content {
padding: 30px;
font-size: 13px;
}
body #content .modal__content h2 {
font-size: 19px;
}
body #content .modal__content h2:before {
max-width: 90px;
}
body #content .modal__content h2:after {
width: 30px;
}
.modal__close svg {
width: 40px;
}
}
@media only screen and (max-width: 400px) {
.topnav .container {
padding: 0 10px;
}
.topnav {
padding: 5px 0;
}
.topnav .container .ctaTicket {
font-size: 10px;
padding: 5px 20px;
}
.topnav .container #presents {
font-size: 8px;
letter-spacing: 1px;
text-align: center;
}
.copyright p {
font-size: 11px;
}
header#header a.mobileTickets {
left: 15px;
}
.open-main-nav {
right: 9px;
}
}
@media only screen and (max-width: 360px) {
.modal__content {
padding: 30px 15px;
}
}