@keyframes slideUp20{from{bottom:-10px;opacity:0;display:none}
to{bottom:0;opacity:1;display:block}
}
@keyframes slideUp40{from{bottom:-40px;opacity:0;display:none}
to{bottom:0;opacity:1;display:block}
}

@-webkit-keyframes pulse {
	0% { -webkit-transform: scale(1); transform: scale(1); }
	50% { -webkit-transform: scale(1.6); transform: scale(1.6);	}
	100% { -webkit-transform: scale(1);	transform: scale(1); }
}


nav.menu div.logo,
aside div.logo{ display: -ms-flexbox; display: flex; background-color: var(--primary); width: 270px; height: 100px; -ms-flex-align: center!important; align-items: center!important; position: absolute; top: 0; left: 0; }

nav.menu div.logo > a,
aside div.logo > a{ display: block; width: 100%; text-align: center; }

nav.menu div.logo > a > img,
aside div.logo > a > img{ height: 100px; width: auto; }

aside div.payoff-logo{ width: 270px; height: 100px; -ms-flex-align: center!important; align-items: center!important; position: absolute; top: 100px; left: 0; padding: 15px 30px; text-align: center; }
aside div.payoff-logo img { width: 160px; height: 100%; max-width: 100%; max-height: 100%; }


header div.container{ position: absolute; z-index: 2; right: 0; width: 630px; max-width: 100%; }
header div.container > div.row{ height: 100px; } /*samme højde som logo*/



ul.burger { z-index: 3; cursor: pointer; padding: 22px 16px 0 15px; width: 60px; height: 60px; display: block; background: rgba(255,255,255,.7); border-radius: 50%; clip-path: circle(50%); /*transition: all 1s ease;*/ }
header.sticky ul.burger { background: var(--primary); }
header.sticky ul.burger li { background: #fff; }

header.sticky div.language,
header.sticky div.tickets,
header.open div.tickets,
header.sticky div.search{ display: none; }

header a.arrow{ background: url(arrow-right-white.svg) center right no-repeat; background-size: 16px 14px; font-family: 'Volte Regular'; }
header div.col-auto.search svg{ position: relative; top: -2px; cursor: pointer; }

header div.col-auto.search span.icon{ display: block; width: 30px; height: 30px; background: url(search.svg) center center no-repeat; background-size: contain; cursor: pointer; position: relative; top: -2px; }

header div.icons{ margin-top: 20px; }
header div.icons::before{ content: ""; display: block; width: 60px; height: 1px; background-color: #4d6e95; margin-bottom: 50px; }
header a.icon{ display: flex; }
header a.icon svg{ width: 24px; height: 24px; fill: #fff; position: relative; top: -3px; margin-right: 10px; }
header a.icon + a.icon{ margin-top: 20px; }

header #openhours{ display: none; }

header.search #openhours,
header.open #openhours{ display: block; padding-left: 70px; }

header div.language > a + a{ margin-left: 15px; }

ul.burger li{ display: block; height: 2px; background: var(--primary);  margin: 0; padding: 0; border-radius: 0; }
ul.burger li:nth-child(2){ margin: 5px 0; }

header ul.burger.open{ background: url(white-x.svg) center center no-repeat; background-size: 30px 30px; position: relative; top: -2px; }
ul.burger.open li{ display: none; }

/*
ul.burger.open li:nth-child(1){ -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.3s ease; position: relative; top: 7px; }
ul.burger.open li:nth-child(2){ display: none; } 
ul.burger.open li:nth-child(3){ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all 0.3s ease; position: relative; top: 5px; }	
*/

header.search ul.burger li:nth-child(1){ -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.3s ease; position: relative; top: 7px; }
header.search ul.burger li:nth-child(2){ display: none; } 
header.search ul.burger li:nth-child(3){ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all 0.3s ease; position: relative; top: 5px; }	

header.search nav.menu{ z-index: 4; }

nav.menu{
    padding: 70px; position: absolute; top: 60px; right: 0; z-index: 3; color: #fff;
    height: 100vh; padding-top: 100px;
    display: none;
}

nav.menu div.search-wrapper{ display: none; }
nav.menu div.search-wrapper form { position: relative; /*background: rgba(255,255,255,0.05);*/ padding: 0 20px; border: 1px solid #4d6e95; }

nav.menu div.search-wrapper form input{ background-color: unset; border: unset; font-size: 20px; padding: 0; height: 60px; padding-top: 3px; }
nav.menu div.search-wrapper form svg{ position: absolute; right: 31px; top: calc(50% - 10px); }

nav.menu div.search-wrapper form ::-webkit-input-placeholder { color: #fff; opacity: 0.6; }
nav.menu div.search-wrapper form ::-moz-placeholder { color: #fff; opacity: 0.6; }
nav.menu div.search-wrapper form :-ms-input-placeholder { color: #fff; opacity: 0.6; }
nav.menu div.search-wrapper form :-moz-placeholder { color: #fff; opacity: 0.6; }

header nav.menu div.search-wrapper div.search-result > label{ font-size: 12px; line-height: 15px; padding-bottom: 10px; display: block; margin-top: 30px; border-bottom: 1px solid #4d6e95; margin-bottom: 3px; }
header nav.menu div.search-wrapper div.search-result ul li{ border-top: 1px solid #4d6e95; border-bottom: 1px solid #4d6e95; padding: 15px 0 20px 0; }
header nav.menu div.search-wrapper div.search-result ul li + li{ margin-top: 3px; }

header nav.menu div.search-wrapper div.search-result ul li a{ text-transform: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
header nav.menu div.search-wrapper div.search-result ul + div.link{ margin-top: 30px; }

header nav.menu div.search-wrapper div.search-result ul{ height: calc(100vh - 360px); overflow-y: auto; }

header.search nav.menu div.search-wrapper{ display: block; }
header.search span.x { position: fixed; top: 18px; right: 14px; z-index: 3; width: 60px; height: 60px; background-size: 30px 30px; background-position: center center; }

header.search div.language,
html body header.search div.search,
header.search div.tickets,
html body header.search ul.burger,
header.search div.menu-wrapper{ display: none!important; }

header div.language div.selector{  }
header div.language div.selector ul{ display: none; }

header.language div.tickets,
header.language div.menu-wrapper{ display: none!important; }

header.search nav.menu{ display: block; max-width: 630px; width: 100%; }
header.open nav.menu{ display: block; width: 630px; max-width: 100%; }

header.open div.language,
header.open div.search{ display: block; }
header.open div.search{ padding-right: 0; }

header.language::after,
header.search::after,
header.open::after{ content: ""; display: block; width: 630px; max-width: 100%; height: 100vh; position: absolute; top: 0; right: 0; background-color: var(--primary); }

header div.language div.selector svg{ cursor: pointer; position: relative; top: -2px; }
header.language div.language div.selector > ul { display: block; position: absolute; border-left: 1px solid #fff; padding-left: 15px; margin-top: 1rem; margin-left: -12px; }
header.language div.language div.selector > ul li + li{ margin-top: 1rem; }
header.language > div.container{ z-index: 4; }
header.language ul.burger.open{ display: block!important; }

nav.menu div#openhours{ position: absolute; top: 38px; left: 70px; }

header nav.menu div.menu-wrapper { max-height: calc(100vh - 250px); overflow-y: auto; }

header nav.menu div.menu-wrapper  > ul > li{ z-index: 2; }
header nav.menu div.menu-wrapper > ul > li > span{ display: inline-block; cursor: pointer; font-family: 'Volte Semibold'; font-size: 26px; margin-bottom: 20px; opacity: 1; }

header nav.menu div.menu-wrapper > ul > li.True span{ opacity: 1; }
header.open nav.menu div.menu-wrapper  > ul > li:not(.True) > span{ /*animation: slideUp20 .3s forwards cubic-bezier(0.25,0.1,0.25,1); animation-delay:.2s; */ }

header nav.menu div.menu-wrapper > ul > li ul{ border-left: 2px solid #fff; padding-left: 15px; margin-left: 5px; line-height: 1; display: none; margin-bottom: 35px; }

header nav.menu div.menu-wrapper > ul > li ul > li{  }
header nav.menu div.menu-wrapper   > ul > li.True ul{ display: block; }
/*header nav.menu > ul > li.True ul > li{ animation: slideUp20 .3s forwards cubic-bezier(0.25,0.1,0.25,1); animation-delay:.2s;}*/
header nav.menu div.menu-wrapper > ul > li ul > li + li{ margin-top: 20px; }

header nav.menu div.menu-wrapper > ul > li > span,
header nav.menu div.menu-wrapper ul li a{ cursor: pointer; display: inline-block; position: relative; }

header nav.menu div.links{ margin-top: 30px; }
header nav.menu div.links a{ margin-bottom: 25px; }

ul.submenu ul{ border-left: 1px solid #000; padding-left: 15px; margin-left: 5px; margin-top: 15px; }
ul.submenu  ul > li + li { margin-top: 5px; }

ul.submenu  ul > li a{ display: block; padding: 7px 24px 3px 10px; position: relative; }
ul.submenu  ul > li > a:not(.True)::after{ content: ""; display: block; width: 16px; height: 14px; background: url(arrow-right.svg); background-size: contain; position: absolute; top: calc(50% - 7px); right: 10px; opacity: .05; transition: .2s; }
ul.submenu  ul > li a:hover::after{ opacity: 1; }

ul.submenu  ul > li a.True{ background: rgba(0,52,102,0.05); }

header div.icons{ display: none; }

header.search + aside.icons,
header.open + aside.icons{ z-index: 6; bottom: 0; display: block; position: fixed; width: 100%; left: 50%; transform: translateX(-50%); }

header.search + aside.icons div.wrapper,
header.open + aside.icons div.wrapper{ display: flex; position: fixed; z-index: 6; bottom: 0; right: 0; color: #fff; width: 630px; max-width: 100%; background-color: var(--primary); text-align: center; padding: 10px 0; }

header.search + aside.icons > div.wrapper a.icon,
header.open + aside.icons > div.wrapper a.icon{ margin: 0 10px; font-size: 14px; /*text-transform: uppercase;*/ flex-grow: 1; }

header.search + aside.icons > div.wrapper a.icon svg,
header.open + aside.icons > div.wrapper a.icon svg { width: 24px; height: 24px; fill: #221f20; margin-bottom: 5px; }
header.open + aside.icons > div.wrapper a.icon img{ margin-bottom: 5px; }

header div.dd label{ background: none; border: none; line-height: 30px; }
header div.dd ul{ padding: 0; }
header div.dd > ul{ border: 1px solid #fff; }
header div.dd > ul li{ padding: 0; }
header div.dd > ul li a{ display: block; padding: 0 15px; }
header div.dd > ul li:hover a{ background-color: var(--primary); color: #fff; }
    

@media (min-width: 1200px){
    /*
    nav.menu ul > li.open div.menu-overlay{
        content: ""; display: block; width: calc(100vw - 326px); height: 100vh; position: fixed; top: 0; right: 0; background: rgba(0, 41, 95, 0.8); z-index: -1;
    }
    */
}

@media (min-width: 576px){
    nav.menu div.logo{ display: none!important; }
}

@media (max-width: 1199px){
    aside nav.menu ul li span,
    aside nav.menu ul li a{ font-size: 22px; line-height: 28px!important; letter-spacing: 0; }
}

@media (max-width: 767px){

    header div.container,
    header.open nav.menu { width: 100%; }

    header { top: 43px; }
    
    header div.tickets,
    header #openhours{ display: none!important; }

    div.panel div.buy-ticket a.arrow{ background-position: left center!important; padding-right: unset; padding-left: 30px; }

}



@media (max-width: 575px){

    aside div.logo,
    aside div.payoff-logo{ zoom: .6; }
    
    header ul.burger{ padding: 15px 10px 0 10px; width: 42px; height: 42px; }
    ul.burger li:nth-child(2) { margin: 3px 0; }

    header div.container > div.row { height: 60px; }

    header ul.burger.open{ width: 30px; padding: 0; }
    header div.container-fluid > div.row { height: 60px; }
    header div.tickets.da{ display: none; }

    header nav.menu div.menu-wrapper{ max-height: calc(100vh - 194px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
    header nav.menu div.menu-wrapper div.icons{ position: fixed; }

    form div.search-result-wrapper ul + div.link { margin-top: 0; }

    nav.menu div#openhours { top: 22px; left: 30px; font-size: 12px; }
    header.open + aside.icons{ display: block; }
    header.open + aside.icons > a.icon{ width: unset; }
    header.open + aside.icons > a.icon{ margin: 0 10px; font-size: 10px; text-transform: uppercase; }

    header div.language,
    header div.search{ padding-right: 0; }

    header nav.menu { padding: 40px 30px 30px 30px; }
  
    header.search #openhours,
    header.open #openhours { padding-left: 30px; }

    nav.menu div.logo { position: absolute; top: -100px; left: 0; zoom: .6; }
    
    header.search span.x{ top: -2px; right: -1px; }
  

}