@font-face {
    font-family: 'Domkirke-Buet';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/Domkirke-Buet.woff) format('woff');
}
@font-face {
    font-family: 'Domkirke-Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/Domkirke-Display.woff) format('woff');
}
@font-face {
    font-family: 'Domkirke-Spids';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/Domkirke-Spids.woff) format('woff');
}

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*{ margin: 0; outline: none; -webkit-text-size-adjust: none; }

:root {
    font-family: "Poppins", sans-serif; font-weight: 400; font-style: normal; font-size: 16px; line-height: 1.5; color: var(--primary);
    --headerfont: 'Domkirke-Display';
    --bs-gutter-x: 8px;
}

.bg-brand{ background-color: var(--brand); color: #fff; }
.bg-primary{ background-color: var(--primary); color: #fff; }
.bg-secondary{ background-color: var(--secondary); color: var(--primary); }

input[type=submit].bg-brand{ background-color: var(--brand); color: #fff; }

article, section { padding-top: 32px; padding-bottom: 32px; }
header, article, section, footer { padding-right: calc(var(--bs-gutter-x)* 1); padding-left: calc(var(--bs-gutter-x)* 1); }

section.teasers,
footer{ --bs-gutter-y: 16px; }

html { -webkit-font-smoothing: antialiased; }
html{ height: 100% !important; }

body{ overflow-x: hidden; }

main { display: block; width: 1920px; max-width: 100%; margin: 0 auto; background-color: #fff; min-height: 100vh; overflow: hidden;
    -webkit-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 100px 0px rgba(0,0,0,0.1);
    padding-top: 220px;
}

img, svg, iframe, picture{ vertical-align: middle; }

img,video{ border: 1px solid var(--primary); }

section.hero img,
div.venue img{ border: none; }

.flex{ display: flex; }

.object-fit-cover{ position: absolute; inset: 0; width: 100%!important; height: 100%!important; object-fit: cover; }
.object-fit-contain{ position: absolute; inset: 0; width: 100%!important; height: 100%!important; object-fit: contain; }

hr { border: none; height: 1px; width: 1760px; max-width: 100%; margin: 0 auto; background-color: var(--primary); }

main > hr{ max-width: calc(100% - 32px); }

ul{ list-style-type: none; margin: 0; padding: 0; }
ul li{ background: none; padding: 0; position: relative; }

figure,
div.image{ position: relative; }

figure img,
div.image img{ max-width: 100%; height: auto; }

article,section{ position: relative; z-index: 2; }
section.calendar{ z-index: 3; min-height: 665px; }

p:empty{ display: block; min-height: 1rem; margin-top: 0!important; }

.h5{ font-family: var(--headerfont); font-weight: normal; font-size: 20px; line-height: 1.2; }
.h3, .h3-mobile{ font-family: var(--headerfont); font-weight: normal; font-size: 30px; line-height: 1; }
.h4, .h4-mobile{ font-family: var(--headerfont); font-weight: normal; font-size: 24px; line-height: 1.222222; }
h2, .h2, .h2-mobile{ font-family: var(--headerfont); font-weight: normal; font-size: 36px; line-height: 1; margin: 0; }
h1{ font-family: var(--headerfont); font-weight: normal; font-size: 50px; line-height: 0.9; margin: 0; }

section.hero.banner h1 + *,
article :is(h1,h2) + *{ margin-top: 1rem; }

a{ display: inline-block; position: relative; text-decoration: none; color: inherit; }
.underline { border-bottom: 1px solid; border-color: var(--primary); line-height: 1.2; display: inline-block;  }

div.text ul > li > a::after,
div.text p > a:not([target=_blank])::after{ content: ""; height: 1px; background-color: var(--primary); display: block; width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: .2s; z-index: -1; }

.bg-brand div.text p > a:not([target=_blank])::after{ background-color: #fff; }

div.text div:not(.arrow) > a::after{ content: ""; height: 1px; background-color: var(--primary); display: block; width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); transition: .2s; z-index: -1; }

small{ font-size: 12px; font-weight: 500; }
a.label{ font-size: 12px; font-weight: 500; }

input[type=submit],
button{ border: none; font-family: inherit; }

div.button{ display: inline-block; position: relative; }

div.arrow > a::after{ content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 28px; background: url(ArrowRight.svg) no-repeat; background-size: contain!important; margin-left: 5px; position: relative; transition: all 0.3s ease-in-out; }

.bg-brand div.arrow > a::after,
.bg-primary div.arrow > a::after{ background: url(ArrowRight-white.svg) no-repeat; }

input[type=submit], button, span.button, div.button > a{ white-space: nowrap; font-size: 16px; display: inline-block; position: relative; border: unset; background-color: var(--primary); color: #fff; padding: 0 16px; line-height: 50px; cursor: pointer; transition: all 0.3s ease-in-out; font-weight: 500; }
input[type=submit]:hover, button:hover, span.button:hover, div.button > a:hover{ background-color: var(--primary); color: #fff; }

.bg-brand button,
.bg-brand div.button > a,
.bg-primary button,
.bg-primary div.button > a{ background-color: #fff; color: var(--primary); }

.bg-brand div.button.arrow > a::after,
.bg-primary div.button.arrow > a::after{ background: url(ArrowRight.svg) no-repeat; background-size: contain; top: -2px; }

.outline{ background-color: unset; border: 1px solid; border-color: currentColor; color: currentColor; }

div.button.arrow > a::after{ background: url(ArrowRight-white.svg) no-repeat; background-size: contain; top: -2px; }

div.button.arrow.bg-primary > a::after{ background: url(ArrowRight-white.svg) no-repeat; background-size: contain; }

div.arrow{ display: inline-block; position: relative; }

.small{ font-size: 12px; font-weight: 500; } 
div.arrow.small > a::after{ width: 18px; height: 18px;  }

div.big{ font-size: 16px; font-weight: 500; } 

div.giant{ font-size: 20px; font-weight: 500; } 
div.arrow.giant > a::after{ width: 36px; height: 36px;  }

/*div.text .arrow::after{ background: url(ArrowRight-color1.svg) no-repeat; background-size: contain; }*/

:is(section,article) a[target="_blank"]::after{ content: ""; display: inline-block; width: 24px; height: 24px; background: url(ArrowLineUpRight.svg) no-repeat; background-size: contain; margin-left: 4px; position: relative; vertical-align: middle; }
:is(.bg-brand,.bg-primary) a[target="_blank"]::after{ background: url(ArrowLineUpRight-white.svg) no-repeat; background-size: contain; }

:is(.bg-brand,.bg-primary) div.text > svg path { fill: #fff; }
:is(.bg-brand,.bg-primary) div.text > svg line { stroke: #fff; }

div.container.Breadcrumb{ position: relative; z-index: 2; }
ol.BreadcrumbList{ display: block; padding: 20px 0 0 0; margin: 0; list-style-type: none; font-size: 12px; opacity: 0.9; }
ol.BreadcrumbList li { display: inline-block; margin: 0 3px 0 0; padding: 0; }
ol.BreadcrumbList li:not(:first-child):before { content:">";  display: inline-block; margin-right: 4px; position: relative; top: 0; }
ol.BreadcrumbList li a{ color: inherit;  }

header.fixed{ position: fixed; z-index: 15!important; width: 100%; }
header.headroom { margin-top: 71px; }

header nav{ display: none; text-align: left; }
header nav > svg { display: none; }


header div.panel a.button.h5{ background-color: var(--brand); color: #fff; transition: all .5s ease-in-out; position: relative; z-index: 3; }

header div.context-menu label { line-height: 1; padding: 34px 0 12px 0; border: none; padding-left: 0; }
header div.context-menu label::after{ display: inline-block; position: relative; margin-left: 7px; right: unset; top: 3px; }
header div.context-menu label em{ display: none; }
header a.logo { margin-top: 24px; }

header a.language{ font-size: 12px; font-weight: 500; margin: 0 10px; display: inline-block; position: relative; top: 20px; cursor: pointer; }

header div.container-fluid > div.row { border-bottom: 1px solid var(--primary); margin: 0; }
header div.container-fluid > div.row > div { padding: 0; }

header div.panel > div:first-child{ flex: 1 0 0%; }
header div.panel > div{ border-right: 1px solid var(--primary); height: 70px; }
header div.panel > div:last-child{ border-right: unset; }
header div.panel a.button{ display: flex; align-items: end; justify-content: center; font-size: 24px; padding: 0 19px; height: 70px; padding-top: 5px; }

header div.panel > div.col{ display: none; }

header div.panel form { position: relative; }
header div.panel form svg{ position: absolute; pointer-events: none; left: 20px; top: calc(50% - 13px); }
header div.panel form input{ height: 70px; border: unset; padding: 0 32px 0 60px; }

header nav ul.menu li a{ vertical-align: middle; line-height: 36px; }
header nav ul.menu li span.haschild{ cursor: pointer; }
header nav ul.menu li span.haschild::after{ content: "+"; display: inline-block; width: 15px; text-align: center; line-height: 1; margin-left: 7px; position: relative; top: -3px; }
header nav ul.menu li.open > span::after{ content: "-"; }

header nav ul.menu li span.haschild.True{ transform: rotate(45deg); }
header nav ul.menu li span.haschild.True + ul{ display: block; margin: 1rem 0 2rem 0; }

header svg.burger{ cursor: pointer; margin-top: 24px; }

/*
ul.burger { cursor: pointer; padding: 0; width: 28px; height: 18px; display: inline-block; position: relative; vertical-align: middle; }
ul.burger li{ display: block; width: 100%; height: 3px; background-color: #fff; margin: 0; padding: 0; border-radius: 2px; position: absolute; transition: all 0.3s ease; }
ul.burger li:nth-child(1){ top: 0; }
ul.burger li:nth-child(2){ top: 50%; transform: translateY(-50%); }
ul.burger li:nth-child(3){ bottom: 0; }

ul.burger { cursor: pointer; padding: 0; width: 28px; height: 18px; display: inline-block; position: relative; vertical-align: middle; }
ul.burger li{ display: block; width: 100%; height: 3px; background-color: #fff; margin: 0; padding: 0; border-radius: 2px; position: absolute; transition: all 0.3s ease; }
ul.burger li:nth-child(1){ top: 0; }
ul.burger li:nth-child(2){ top: 50%; transform: translateY(-50%); }
ul.burger li:nth-child(3){ bottom: 0; }

body[data-menu=open] ul.burger li:nth-child(1){ -webkit-transform: rotate(45deg); transform: rotate(45deg); top: calc(50% - 1px); }
body[data-menu=open] ul.burger li:nth-child(2){ display: none; } 
body[data-menu=open] ul.burger li:nth-child(3){ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); bottom: calc(50% - 1px); }	  

*/

section.hero.banner div.media-wrapper { position: relative; padding-top: 109.62%; }
section.hero.banner div.media-wrapper * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

section.hero.banner div.media-wrapper :is(img,video){ border: unset; }

section.hero.banner div.text{ position: relative; z-index: 2; width: 86.297376%; max-width: 833px; padding: 24px 16px; display: inline-block; }

/*
section.hero.banner div.text.bg-brand{  color: #fff; }
section.hero.banner div.text.bg-primary{ color: #fff; }
*/

section.hero.banner div.media-wrapper + div.text{ margin-top: -80px; }
section.hero.banner div.media-wrapper + div.text.rightpos{ left: unset; right: 48px; }

section.hero.banner div.text a.arrow::after{ width: 28px; height: 28px; }
section.hero.banner img{ width: 100%; }

article.text-only div.text{ max-width: 940px; }
article.text-only div.text > h2 { white-space: pre-line; }

article, section { padding-top: 16px; padding-bottom: 16px; }

.pt-none{ padding-top: 0; }
.pt-small{ padding-top: 8px; }
.pt-medium{ padding-top: 16px; }
.pt-large{ padding-top: 32px; }
.pt-xlarge{ padding-top: 64px; }

.pb-none{ padding-bottom: 0; }
.pb-small{ padding-bottom: 8px; }
.pb-medium{ padding-bottom: 16px; }
.pb-large{ padding-bottom: 32px; }
.pb-xlarge{ padding-bottom: 64px; }

header { position: absolute; width: 100%; max-width: 1920px; top: 0; z-index: 10; left: 50%; transform: translate(-50%,0); background-color: #fff; }
header.headroom { will-change: transform; transition: transform 400ms ease; position: fixed; }
header.headroom--pinned { transform: translate(-50%,0); }
header.headroom--unpinned { transform: translate(-50%,-100%); }
header.headroom--not-top.headroom--pinned { z-index: 10; }

header.headroom div.container-fluid > div.row{ height: 149px; background-color: #fff; }

header nav div.content.search{ display: none; padding: 0; }



header div.opening-hours{ font-size: 10px; line-height: 24px; margin-top: 7px; }
header div.opening-hours > div::before{ content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
header div.opening-hours div.open::before{ background-color: #68D562; }
header div.opening-hours div.closed::before{ background-color: #E6003C; }

article.image-over-text div.media-wrapper{ padding-top: 54.7159%; }
article.image-over-text div.event{ width: 1196px; max-width: 100%; }
article.image-over-text div.text{ padding: 42px 32px 16px 0; border-right: 1px solid var(--primary); }
article.image-over-text div.text *{ max-width: 925px; }
article.image-over-text div.text div.h3{ max-width: 720px; }
article.image-over-text div.text h2 + div.h3{ margin-top: 24px; }
article.image-over-text div.text :is(h2,.h3) + *{ margin-top: 40px; }

article.image-over-text div.infobox{ border-right: 1px solid var(--primary); border-bottom: 1px solid var(--primary); padding: 16px 16px 32px 0; font-size: 18px; width: 100%;  }

/*
padding-left: 16px;
margin-left: -16px; 
width: 283px;
*/

article.image-over-text div.infobox small{ display: block; font-weight: 700; }
article.image-over-text div.infobox div + div{ margin-top: 14px; }
article.image-over-text div.infobox div.button.arrow a{ background-color: var(--primary); }


div.media-wrapper div.labels{ position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 10px; line-height: 22px; font-weight: 500;  }
div.media-wrapper div.labels label{ display: inline-block; padding: 0 4px; background-color: #fff; margin-bottom: 2px; }

/*wibergis*/
div.media-wrapper div.labels label.tagcolor-2{ background-color: #0F4191; color: #fff; }

/*skovgaard*/
div.media-wrapper div.labels label.tagcolor-3{ background-color: #F08C8F; color: #fff; }

/*viborg domkirke*/
div.media-wrapper div.labels label.tagcolor-4{ background-color: #0BE3BC; color: #fff; }

/*domkirke*/
div.media-wrapper div.labels label.tagcolor-10,
div.media-wrapper div.labels label.tagcolor-11{ background-color: #460019; color: #fff; }

section.form > div.container { max-width: 855px; margin: 0; }


div.umbraco-forms-form fieldset{ border: unset; padding: 0; }
div.umbraco-forms-form legend.umbraco-forms-legend,
div.umbraco-forms-form div.umbraco-forms-field span.help-block,

div.umbraco-forms-form div.radio-list{ margin-bottom: 32px; }
div.umbraco-forms-form div.radio > label { font-size: 14px; font-weight: normal; }
div.umbraco-forms-form label.umbraco-forms-label{ font-size: 14px; line-height: 1.4; font-weight: 500; display: block; }
div.umbraco-forms-form label.umbraco-forms-label{ font-size: 16px; }

div.umbraco-forms-form div.umbraco-forms-hidden{ display: none!important; }

div.umbraco-forms-form div.umbraco-forms-field.mandatory span.umbraco-forms-indicator{ color: #e6003c; }
div.umbraco-forms-form div.umbraco-forms-field-wrapper span[role="alert"]{ font-size: 10px; line-height: 1.4; font-weight: 500; color: #e6003c; display: none!important; }
div.umbraco-forms-form div.umbraco-forms-field{ margin-bottom: 32px; }
div.umbraco-forms-form div.umbraco-forms-page > div.h4 { margin-bottom: 40px; }
div.umbraco-forms-form div.umbraco-forms-page input.btn{ font-family: "Poppins", sans-serif; font-size: 16px; line-height: 50px; border: unset; }
div.umbraco-forms-form div.umbraco-forms-page input.btn.prev{ background: url(ArrowLeft.svg) center left no-repeat; background-position-x: 10px; border: 1px solid var(--primary); color: var(--primary); padding: 0 16px 0 50px; font-weight: 500; }
div.umbraco-forms-form div.umbraco-forms-page input.btn.next{ background: url(ArrowRight-white.svg) center right no-repeat; background-position-x: calc(100% - 10px); background-color: var(--primary); color: #fff; padding: 0 50px 0 16px; font-weight: 400; }
div.umbraco-forms-form div.umbraco-forms-hidden{ display: none!important; }
div.umbraco-forms-form div.checkbox-list label{ font-size: 18px; font-weight: 700; line-height: 1.5; }
div.umbraco-forms-form div.checkbox-list .checkbox input + label:before{ top: 2px; }
div.umbraco-forms-form div.checkbox-list .checkbox input:checked + label:after{ top: 5px; }

div.umbraco-forms-form div.page-caption{ font-weight: 500; text-transform: uppercase; font-size: 14px; margin-bottom: 2rem; opacity: 0.6; }

.cursor {
    --size: 110px;
    height: var( --size );
    width: var( --size );
    pointer-events: none;
    position: fixed;
    transform: translate( -50%, -50% );
    z-index: 9999999999;
    mix-blend-mode: difference; /* Delete this line if you dont want the circle to invert */

}

.cursor .dot{
    width: 100%; height: 100%;
    transform: scale(.2);
    position: absolute;
    background: #ffffff; /* This defines the color of the cursor */
    transition: all 0.3s;
    transition-timing-function: ease-out;    
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
}
  
.cursor.active { mix-blend-mode: unset; }
.cursor.active .dot{ transform: scale(1); background-color: var(--secondary); font-size: 12px; font-weight: 500; }
.cursor.active .dot.play { font-size: 24px; }

@media (min-width: 1920px){

    header, article, section, footer{ padding-left: 64px; padding-right: 64px; }

    section.events div.item.hastitle:first-child{ padding-left: 0; }

}

@media (min-width: 1800px){

    article.image-over-text div.wrapper{ float: right; }
    article.image-over-text div.infobox{
        position: fixed;
        top: 272px;
        padding-left: 16px;
        width: 280px;
        display: inline-block;
        margin-left: 34px;
    }
}

@media (min-width: 1200px){

    main{ padding-top: 238px; }

    header div.container-fluid > div.row { align-items: center; }

    header svg.burger{ display: none; }
    header nav{ display: block; }
    header nav ul.menu{ display: flex; justify-content: end; align-items: center; gap: 30px; }
    header nav ul.menu li.open{ position: static; }


    header nav ul.menu > li > a{ 
        background: linear-gradient(transparent,currentColor);
        background-position: 0 100%;
        background-repeat: no-repeat;
        background-size: 0% 2px;
        transition: .3s ease-in;
        white-space: nowrap;
     }
    
     header nav ul.menu > li > a:hover{ 
        background-size: 100% 2px;
        animation:hoverunderline .8s cubic-bezier(1,.84,.44,1)
    }    

    header nav ul.menu li div.mega-menu{ position: fixed; top: 167px; left: 0; width: 100%; z-index: -1; transform: translateY(-300%); transition: all .5s ease-in-out; padding: 0 32px; }
    header nav ul.menu li.open div.mega-menu{ transform: translateY(0); }

    header.headroom--unpinned nav ul.menu li.open div.mega-menu{ transform: translateY(-300%)!important; }

    header nav ul.menu li div.mega-menu > div.wrapper{  background-color: var(--brand); color: #fff; padding: 54px 64px; max-width: 1760px; margin: 0 auto; }


    header div.mega-menu > div.wrapper { -webkit-columns: 3; -moz-columns: 3; columns: 3; }
    header div.mega-menu > div.wrapper a{ margin: 10px 0; line-height: 1; position: relative; }
    header div.mega-menu > div.wrapper a.selected::after{ width: 100%; }

    header div.mega-menu > div.wrapper a::after{ content: ""; display: block; width: 0%; height: 1px; border-bottom: 1px solid currentColor; position: absolute; top: 100%; }
        
    header nav div.policies,
    header nav div.SoMe{ display: none!important; }

}

@media (min-width: 992px){

    header nav form{ display: none; }
    
    header div.context-menu label { width: 260px; }

    section.hero.banner div.media-wrapper { padding-top: 54.7159%; }
    section.hero.banner div.media-wrapper + div.text{ position: absolute; bottom: 32px; left: 48px; margin-top: 0; }
    section.hero.banner div.media-wrapper + div.text h1 + p{ margin: 5px 0; }

    section.hero.banner div.alignright div.media-wrapper + div.text{ left: unset; right: 48px; }

    header nav div.content.search{ display: none!important; }
    header nav div.menu-wrapper{ display: block!important; }
    

}

@media (min-width: 768px){

    :root {
        font-size: 20px;
        --bs-gutter-x: 16px;
    }

    section.teasers,
    footer{ --bs-gutter-y: 32px; }

    h1{ font-size: 100px; line-height: 0.9; text-wrap: balance; }
    h2, .h2{ font-size: 64px; line-height: 0.90625; }
    .h3{ font-size: 48px!important; line-height: 1!important; }
    .h4{ font-size: 36px!important; line-height: 1.222222!important; }
    .h5{ font-size: 28px; line-height: 1.285714; }    
    
    article, section { padding-top: 32px; padding-bottom: 32px; }

    header div.context-menu label { line-height: 65px; padding: 5px 0 0 0; }

    header.headroom div.container-fluid > div.row{ height: 167px; }
    header svg.burger{ cursor: pointer; margin-top: 32px; }

    header a.logo { margin: 32px 0; }
    header div.panel div.col{ display: block; }
    header div.panel a.button{ width: 241px; font-size: 28px; align-items: center; }


    header div.panel > div:first-child { flex: unset; }
    header div.context-menu label em{ font-style: normal; display: inline; }
    header div.context-menu label { width: 220px; }
    header div.context-menu label::after{ top: 0; }

    .pt-small{ padding-top: 16px; }
    .pt-medium{ padding-top: 32px; }
    .pt-large{ padding-top: 64px; }
    .pt-xlarge{ padding-top: 128px; }
    
    .pb-small{ padding-bottom: 16px; }
    .pb-medium{ padding-bottom: 32px; }
    .pb-large{ padding-bottom: 64px; }
    .pb-xlarge{ padding-bottom: 128px; }

    div.media-wrapper div.labels{ top: 16px; left: 16px; }

}

@media (min-width: 576px){


}