@font-face {
    font-family: "Mantra";
    src: url("/fonts/Mantra-Alt.ttf");
}



@font-face {
    font-family: "Surt";
    src: url("/fonts/Surt-Regular.woff");

}

@keyframes textchange {
    0% {
        content: "treeee(house)";
        z-index: 15;
    }

    100% {
        content: "house(treeee)";
        z-index: 15;
    }
}

@-webkit-keyframes textchang {
    0% {
        content: "treeee(house)";
        z-index: 15;
    }

    100% {
        content: "house(treeee)";
        z-index: 15;
    }


}

/*.main-title:before {
    content: 'treeee(house)';
    font-family: Mantra, sans-serif;
    color: blue;
    font-size: 5em;
    left: 0;
    animation-name: textchange;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    -webkit-animation-name: textchang;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-play-state : running;
    z-index: 11;

} incase css-content becomes standard also delete html since:before */

.main-title {

    font-family: Mantra, sans-serif;
    color: blue;
    font-size: 5em;
    left: 0;

    z-index: 11;

}


.main-title,
.button-wrap {
    position: fixed;
    margin: 0.5rem;
    top: 0;
    z-index: 20;


}

.button-wrap {
    right: 0;

}

.about-button,
.schedule-button,
.play-button,
#enter-button {
    border-color: blue;
    border-style: solid;
    border-width: 3px;
    text-align: center;
    display: inline-block;
    padding: 0 0.5rem;
    border-radius: 2rem;
    font-size: 2em;
    color: red;
    font-family: Surt, sans-serif;
    z-index: 10;
    cursor: pointer;
    transition: 0.3s;
}



html,
body {
    margin: 0 !important;
    padding: 0 !important;

}


a {
    text-decoration: none;
    color: inherit;
}


#change-title {
    position: fixed;
    bottom: 0;
    left: 50%;
    font-size: 2em;
    color: blue;
    font-family: sans-serif;
    transform: translateX(-50%);
    margin: 0.5rem;
}



#mySVG {
    z-index: -1;
    width: 100vw;
    height: 100vh;
    transition: 0.3s;
    position: fixed;
    top: 0;
    left: 0;
}





.schedule {
    padding-top: 3em;

    position: fixed;
    width: 0;
    right: 0;
    background: yellow;
    height: 100%;
    text-align: right;
    opacity: 1;
    overflow-x: hidden;


    transition: 0.3s;
    display: block;
    z-index: 10;
}



.event1 {
    font-family: Surt, sans-serif;
    margin: 0.5rem 0.5rem 2rem;
    display: block;
    overflow: hidden;
    white-space: nowrap;

}

#shape7,
#shape1,
#shape2,
#shape3,
#shape4 {
    fill: red;
    color: white;
    transition: 2.5s, color 0s, fill 0s;

}


#shape13,
#shape23,
#shape33,
#shape43 {
    fill: red;
    color: white;
    transition: 3s, color 0s, fill 0s;

}

#shape11,
#shape21,
#shape31,
#shape41,
#shape71{
    fill: blue;
    color: yellow;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s;
}

#shape11:hover,
#shape21:hover,
#shape31:hover,
#shape41:hover,
#shape71:hover{
    fill: red;
    color: white;
}

#shape7:hover,
#shape1:hover,
#shape2:hover,
#shape3:hover,
#shape4:hover,
#filll:hover {
    fill: blue;
    color: yellow;
}

#shape13:hover,
#shape23:hover,
#shape33:hover,
#shape43:hover,
#filll:hover {
    fill: blue;
    color: yellow;
}

#background2, #background5 {
    
    height: 0;
    width: 100vw;
    position: fixed;
    left: 0;
    bottom: 0;
    transition: 2s;
    transform: rotate(180deg);
    z-index: -12;

}
#background2{background: pink;}

.filll {
    fill: currentColor;
}


.event-title {
    font-size: 2em;
    display: block;
    overflow: hidden;
}




audio {
    display: block;
}

#background {
    display: block;
    background: yellow;
    opacity: 0;
    transition: 0.5s;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
}

#about {
    visibility: hidden;
    opacity: 0;
    height: 0;
    transform: translate3d(0, -50%, 0);
    font-size: 3em;
    font-family: Mantra;
    color: blue;
    width: 70%;
    margin: auto;
    position: relative;
    top: 15%;
    white-space: wrap;
    overflow: hidden;

    transition: visibility 0s, opacity 3s, transform 3s;



}

#host {

    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transform: translate3d(0, 100%, 0);
    font-size: 3em;
    font-family: Mantra;
    color: blue;
    width: 70%;
    margin: auto;
    position: relative;
    top: 50%;

    white-space: wrap;
    transition: visibility 0s, opacity 3s, transform 3s;

}

#dreaming, #understanding {
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transform: translate3d(0, 100%, 0);
    font-size: 2.5em;
    font-family: Mantra;
    color: blue;
    width: 70%;
    margin: auto;
    position: relative;
    top: 15%;
    text-align: center;

    white-space: wrap;
    transition: visibility 0s, opacity 3s, transform 3s;

}

#invasion,
#workshops {
    visibility: hidden;
    opacity: 0;
    transform: translate3d(-50%, 0, 0);
    font-size: 3em;
    font-family: Mantra;
    color: blue;
    width: 70%;
    margin: auto;
    position: relative;
    top: 15%;
    white-space: wrap;
    height: 0;
    overflow: hidden;
    transition: visibility 0s, opacity 3s, transform 3s;
}

.content {
    width: 100vw;
    height: 0;
    overflow: hidden;
    opacity: 0;
}

#myAudio {
    opacity: 0;
    transition: opacity 0.3s;
}

#mySVGlogo {
    z-index: 20;
    position: fixed;
    width: 20vh;
    height: 20vh;
    right: 0;
    bottom: 0;
}

#background3{
    display: block;
    
    opacity: 1;
    transition: 2s;
    width: 0;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -10;
}
#background5 {background: lightpink;}
#background3 {background: lightblue;}


#background4 {
    background: orange;
    height: 0;
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    transition: 2s;

    z-index: -9;

}

.tooltip {
    position: relative;
    display: inline-block;
    color: white;
}

.tooltip:hover {
    font-style: italic;
}

.tooltip .tooltiptext {
    visibility: hidden;



    text-align: center;



    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}



.audio-player {
    border: 2px solid blue;
    width: 97%;
    padding: 0.3em
}



progress[value] {
    appearance: none;
    background-color: white;
    color: blue;
    height: 5px;
    width: 100%;
    margin: 0;


}

progress[value]::-webkit-progress-bar {
    background-color: red;
    border-radius: 50px;
    color: blue;
}

progress::-webkit-progress-value {
    background-color: blue;
}


#time {
    float: left;
}

#totaltime {
    float: right;
}

#time,
#totaltime {
    display: inline-block;
    margin: 15px 0 0;
}





.banner-image {
    height: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    z-index: 0;
    font-size: 0;
}


#container {
    width: 100vw;
    height: 30vh;
    transform: translate(-15%, 0);
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    z-index: 0;
    cursor: ew-resize;
    font-size: 1;
}

::-webkit-scrollbar {
    display: none;
}

.linetitle {
    font-family: "Surt", sans-serif;

    font-size: 3.1rem;
}

.subtext {
    font-family: "Mantra", sans-serif;

    font-size: 3rem;

}

.title {
    font-family: "Surt", sans-serif;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 0.3rem;
    text-underline-offset: 2px;
    font-size: 4rem;
}


.text {
    font-family: "Mantra", sans-serif;

    font-size: 4rem;

}

.subtitle {
    font-family: "Matra", sans-serif;

    font-size: 4rem;

}

.bottom-video {
    margin-top: 1rem;
    width: 100vw;
    transform: translate(-15%, 0);
    overflow: hidden;
    vertical-align: bottom;
    display: block;
}

source {
    overflow: hidden;
    width: 100vw;
}

.subsubtitle {
    font-family: "Mantra", sans-serif;

    font-size: 4rem;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 0.3rem;
    text-underline-offset: 2px;

}

.interviewtitle {
    font-size: 2rem;

}



.schedule-link {
    font-size: 1.3rem;
    text-decoration: underline;
    display: inline-block;
    cursor: pointer;
    margin-left: 0.5rem;
    color: black;
}

.scheudle-link:hover {
    font-style: italic
}

.schedule-text {
    font-size: 1.3rem;
    margin: 0.5rem 0;
}



.eventlast {
    font-family: Surt, sans-serif;
    margin: 0.5rem 0.5rem 4rem;
    display: block;
    overflow: hidden;
    white-space: nowrap;
}

.smalltext {
    font-size: 1.5rem;
}

.phone {
    display: none;
    width: 100vw;
    height: 100vw;
    z-index: 50;
    text-align: center;
    position: fixed;
    top: 0;

    font-family: Mantra, sans-serif;
    font-size: 2rem;
    color: blue;


}



.sorry {
    position: fixed;
    top: 50%;
    transform: translate(0, -50%);
    padding: 2rem;


}

#prevideo,
#prevideo1 {

    min-width: 100vw;
    font-size: 0;
    min-height: 100vh;
    opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
    vertical-align: bottom;
    display: block;
    transition: opacity 1s, display 2s;
    background: white;
}

#prevideo1 {
    opacity: 0;
}

#enter-button {
    top: 50%;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
}

#enter-button:hover,
.about-button:hover,
.schedule-button:hover {
    border-width: 5px;
}

@media only screen and (max-width: 600px) {
    .phone {
        display: block;
    }



    .button-wrap,
    .main-title,
    #prevideo,
    #prevideo1,
    #enter-button,
    #prevideo,
    #content,
    #mySVG {
        display: none;
    }



}

.past {
    display: inline-block;
}

#main-title {
    cursor: pointer;
}