tour-intro {
    display: block;
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; 
    width: 100%; height: 100%; 
    border-width: 2rem 0 2rem 0!important;
    background-color: var(--color-cream-opaque);
    backdrop-filter: blur(10px);
    pointer-events: all;
    padding: 4rem;
    /* padding-bottom: 10rem; */
    text-align: center;
    opacity: 0;
    position: none;
    transform: translate(-50%,-50%) scaleY(1);
    transition: opacity calc(var(--transition-duration) * 3);
    z-index: 2;
}

tour-intro .bg {
    position: absolute;
    box-sizing: border-box;
    left: 50%; top: 50%; 
    width: 100%; height: 100%; 
    transform: translate(-50%,-50%);
    background-image: url(images/intro_bg.jpg);
    background-size: cover;
}

tour-intro.visible {
    opacity: 1;
    /* transform: translate(-50%,-50%) scale(1); */
    transition: opacity calc(var(--transition-duration) * 3);
}

tour-intro.black {
    background-color: rgba(0,0,0,0.87);
    transition: opacity calc(var(--transition-duration) * 3), background-color calc(var(--transition-duration) * 3);

}


tour-intro h2 {
    width: 100%;
    text-align: center;
    font-family: 'Playfair Display Regular', Arial, Helvetica, sans-serif;
    font-size: 6.0rem;
    font-weight: lighter;
    color: #000000;
    letter-spacing: 2%;
    margin: 0; padding: 0;
    margin-bottom: 2rem;
}

tour-intro p {
    width: 85%;
    max-width: 80rem;
    text-align: center;
    font-family: National;
    font-size: 1.6rem;
    color: #000000;
    letter-spacing: 2%;
    margin: 0 auto; 
    padding: 0;
    margin-bottom: 8rem;
}

tour-intro span {
    width: 85%;
    max-width: 80rem;
    text-align: center;
    font-family: National;
    font-size: 1.6rem;
    color: #000000;
    letter-spacing: 2%;
    margin: 2rem auto; 
    padding: 0;
    opacity: 0.5;
    margin-bottom: 2rem;
}

main.intro div[data-ui="logo"] {
    transform: translateY(50vh) scale(2);
}