* {
    margin: 0;
    padding: 0;
}

body {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: rgb(86,221,98);
    font-family: sans-serif;
    color: #fff;
    border-color: #aaa;
    transition: background 0.5s;
}

.srContainer {
    position: fixed;
    left: 10px;
    bottom: 70px;
    text-align: left;
    color: #fff;
    text-shadow: 0 0 3px #000;
    font-size: 12px;
    font-style: italic;
    z-index: 998;
}
.sr-alert {
    opacity: 0;
    transition: opacity 0.5s;
    position: relative;
    display: block;
}
.srMenuContainer {
    position: fixed;
    z-index: 999;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    align-content: center;
    width: 100vw;
}
.srMenu .srButton {
    padding: 10px;
    border: 1px solid #fff;
    border-radius: 6px;
    flex-grow: 0;
    display: flex;
    justify-content: center;
    margin: 10px;
    background: none;
    color: #fff;
}

.showContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.avatarContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
}

.GUIcontainer {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 998;
    min-height: 40px;
    min-width: 100px;
    max-width: calc(100vw - 40px);
    pointer-events: none;
    z-index: 49;
}
.GUIcontainer.presenterGUI {
    bottom: 0;
    left: 0;
    padding: 20px;
    padding-bottom: 15px;
    padding-top: 8px;
    width: calc(100vw - 40px);
    background: rgba(50, 50, 50, 0.7);
}

.GUI {
    pointer-events: all;
    position: relative;
    border-radius: 6px;
    background: none;
    border: 1px solid #fff;
    font-size: 14px;
    padding: 11px;
    color: #fff;
    margin-right: 20px;
    float: left;
    margin-top: 5px;
    font-style: italic;
    box-shadow: 0 0 3px rgba(0,0,0,0.5), inset 0 0 3px rgba(0,0,0,0.5);
    text-shadow: 0 0 3px rgba(0,0,0,0.75);
}

.GUI.placeholder {
    border: none;
    width: 0;
    margin-right: 0;
    padding: 0;
    box-shadow: none;
    text-shadow: none;
}
.GUI .containerGUI {
    position: absolute;
    bottom: 10px;
    left: 0;
    padding: 0;
    max-height: 250px;
    overflow-y: scroll;
}
button.customClass {
    border: none;
    background: none;
    font-size: 14px;
    padding: 11px;
    color: #fff;
    font-style: italic;
    text-shadow: 0 0 3px rgba(0,0,0,0.75);
    cursor: pointer;
    padding-left: 36px;
    padding-right: 20px;
    position: relative;
    display: block;
}
button.customClass.active {
    font-weight: bold;
}
button.customClass::before {
    content: "◻︎";
    position: absolute;
    left: 12px;
    top: 9px;
    font-style: normal;
}
button.customClass.active::before {
    content: "◼︎";
}

.GUI .subbutton {
    margin-top: -11px;
    display: inline-block;
    float: left;
    padding-top: 10px;
    text-align: center;
    line-height: 16px;
    width: 40px;
    height: 38px;
    box-sizing: border-box;
    border-left: 1px solid #fff;
}
.GUI .copySubbutton {
    margin-left: 10px;
}
.GUI .copySubbutton:before {
    position: absolute;
    content: "link copied";
    width: 100px;
    left: 0;
    bottom: calc(100% + 10px);
    text-align: center;
    color: #fff;
    opacity: 0;
    visibility: hidden;
}

.GUI .copySubbutton.animate:before {
    animation: copied 3s ease;
}

@keyframes copied {
    0% {
        opacity: 0;
        visibility: visible;
        bottom: calc(100% + 0px);
    }
    20% {
        bottom: calc(100% + 10px);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    99% {
        visibility: visible;
        opacity: 0;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

.GUI .twitterSubbutton {
    margin-right: -11px;
    background-image: url("static/twitter.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.disconectGUI {
    margin: 0;
    padding: 0;
    z-index: 999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: none;
    font-size: 16px;
    text-align: center;
    width: 80vw;
    text-shadow: 0 0 3px rgb(0,0,0,0.7);
    transition: opacity 0.3s;
    pointer-events: all;
}

.GUI.disconectGUI.inactive {
    pointer-events: none;
    opacity: 0;
    display: unset;
    width: unset;
}

.inviteGUI {
    overflow: hidden;
    height: 40px;
    box-sizing: border-box;
}

.presenterChat {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 400px;
    height: 450px;
    max-height: 100vh;
    background: rgba(50, 50, 50, 0.7);
    z-index: 49;
    display: none;
    flex-direction: column;
    padding: 8px;
    padding-bottom: 70px;
    padding-left: 25px;
    box-sizing: border-box;
    overflow: scroll;
}
.presenterChat.visible {
    display: flex;
}
.presenterChat .messageContainer {
    height: calc(100% - 55px);
    padding-bottom: 20px;
}
.presenterChat.visible ~ .GUIcontainer.presenterGUI {
    width: calc(100vw - 440px);
}
@media only screen and (max-width: 1000px) {
    .presenterChat.visible ~ .GUIcontainer.presenterGUI {
        display: none;
    }
    .presenterChat.visible {
        width: 100vw;
    }
}

@media only screen and (max-width: 100vh) {
    .presenterChat.visible ~ .GUIcontainer.presenterGUI {
        display: none;
    }
    .presenterChat.visible {
        width: 100vw;
    }
}

.presenterChat .chatboxControlls {
    height: 45px;
    background: none;
    border-top: none;
}
.presenterChat .chatboxInput::placeholder {
    color: rgba(255,255,255,0.7);
    opacity: 1; /* Firefox */
}

.presenterChat .chatboxInput:-ms-input-placeholder {
    color: rgba(255,255,255,0.7);
}

.presenterChat .chatboxInput::-ms-input-placeholder {
    color: rgba(255,255,255,0.7);
}


.presenterChat .chatboxInput {
    bottom: 15px;
    border-radius: 6px;
    border: 1px solid #fff;
    font-size: 14px;
    padding: 11px;
    color: #fff;
    font-style: italic;
    box-shadow: 0 0 3px rgba(0,0,0,0.5), inset 0 0 3px rgba(0,0,0,0.5);
    text-shadow: 0 0 3px rgba(0,0,0,0.75);
    background: none;
    height: unset;
}
.presenterChat .chatboxButton {
    bottom: 15px;
    border-radius: 6px;
    border: 1px solid #fff;
    font-size: 14px;
    padding: 11px;
    color: #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.5), inset 0 0 3px rgba(0,0,0,0.5);
    text-shadow: 0 0 3px rgba(0,0,0,0.75);
    background: none;
    height: 40px;
}
.presenterChatMessage {
    color: #fff;
    margin-top: 5px;
}
.presenterChat .headerMessage {
    margin-top: 25px;
    text-align: center;
    color: #aaa;
    font-size: 12px;
}
.presenterChat .closeButton {
    border: 0;
    background: 0;
    outline: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
}
.chatGUI.highlight::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 12px);
    right: -8px;
    width: 20px;
    height: 20px;
    background: #f00;
    border-radius: 50%;
}


.popUp.about {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(85, 221, 96, 1);
}

.popUp.about.hidden {
    visibility: hidden;
}

.popUp.about p, .popUp.about a {
    font-size: 16px;
    color: #fff;
}

.popUp.about input.navigation {
    font-style: normal;
    border-radius: 6px;
    background: none;
    border: 1px solid #fff;
    color: #fff;
    font-size: 22px;
    font-family: sans-serif;
    font-weight: 300;
    position: fixed;
    height: 30px;
    width: 100px;
    bottom: 20px;
    font-size: 100px;
    line-height: 0;
    font-size: 40px;
    left: 20px;
    cursor: pointer;
}

.popUp.about p {
    max-width: 800px;
    max-height: 100vh;
    overflow: scroll;
    position: absolute;
    left: 0;
    right: 0;
    top: 150px;
    margin: auto;
    font-style: italic;
}

input.URL, .inviteGUI span {
    font-style: italic;
    color: #fff;
    font-size: 16px;
    float: left;
}

.buttonGUI {
    cursor: pointer;
}
.buttonGUI.disabled {
    cursor: not-allowed;
    color: rgba(255,255,255,0.5);
}

.selectGUI {
    cursor: pointer;
}

.roundGUI {
    cursor: pointer;
    width: 40px;
    padding: 0;
    padding-top: 7px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.streamGUI, .adminGUI, .recordingGUI, .openRoomGUI {
    padding-left: 35px;
}

.GUI span {
    cursor: pointer;
}

.GUI span:hover {
    color: #000;
}

.GUI.inactive {
    opacity: 0;
    width: 0;
    padding: 0 !important;
    margin: 0;
    border: none;
    display: none;
}

.GUI .indicator {
    position: absolute;
    top: 14px;
    left: 15px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}
.GUI .indicator.connecting {
    animation: connectingPulse 2s linear infinite;
    border: 1px solid #888;
}
.GUI .indicator.live {
    animation: livePulse 2s linear infinite;
}
.GUI .indicator.off {
    border: 1px solid #888;
    background: #ddd;
}
.GUI .indicator.micIcon {
    width: 20px;
    height: 20px;
    top: 9px;
    left: 9px;
    background-image: url(static/mic_icon.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;

}

.GUI .indicator.micIcon.active {
    animation: liveShadow 2s linear infinite;
}

@keyframes liveShadow {
    0% { box-shadow: 0 0 5px 1px #888; }
    50% { box-shadow: 0 0 5px 0px #ddd; }
    100% { box-shadow: 0 0 5px 1px #888; }}

@keyframes connectingPulse {
    0% { background: #aaa }
    50% { background: #eee; }
    100% { background: #aaa; }
}

@keyframes livePulse {
    0% {
        background: rgb(255,0,0);
        border: 1px solid #f00;
    }
    49% {
        background: rgb(255,0,0);
        border: 1px solid #f00;
    }
    50% {
        background: rgb(255,255,255);
        border: 1px solid #888;
    }
    99% {
        background: rgb(255,255,255);
        border: 1px solid #888;
    }
    100% {
        background: rgb(255,0,0);
        border: 1px solid #f00;
    }
}

.GUI.settingsGUI {
    font-size: 32px;
    line-height: 14px;
    font-style: normal;
}

.GUI.infoGUI {
    font-size: 24px;
    line-height: 14px;
    font-style: normal;
}

.popUp {
    left: calc(50vw - 250px);
    top: calc(50vh - 75px);
    position: fixed;
    width: 500px;
    height: 200px;
    z-index: 900;
    text-align: center;
}

.popUp.high, .popUp.private {
    top: calc(50vh - 160px);
}

.popUp.private {
    left: 5vw;
    top: 15vh;
    height: calc(100% - 15vh);
    width: 90vw;
    overflow-y: scroll;
}
.popUp.private form {
    width: 500px;
    margin-left: calc(50% - 250px);
}
.popUp p.privateText {
    color: #fff;
    font-size: 60px;
    font-style: italic;
    margin-bottom: 20px;

}
.popUp .username, .popUp .password, .popUp .enterButton {
    margin-top: 5px;
    width: 300px;
    font-size: 20px;
    border: 1px solid #fff;
    border-radius: 6px;
    background: none;
    padding: 10px;
    padding-left: 20px;
    color: #fff;
    font-style: italic;
}
.popUp button {
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-style: italic;
    color: inherit;
}

.popUp *::placeholder {
    color: #fff;
    opacity: 0.5;
}

.popUp *:-ms-input-placeholder {
    color: #fff;
    opacity: 0.5;
}

.popUp *::-ms-input-placeholder {
    color: #fff;
    opacity: 0.5;
}
.popUp .enterButton.disabled, .popUp .enterButton.unloaded {
    cursor: not-allowed;
    background: #eee;
    color: #aaa;
}

.popUp .terms, .popUp .accessibilityOption {
    padding: 5px;
    color: white;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-style: italic;
}
.popUp .accessibilityOption {
    padding: 0;
}
.popUp .terms.advanced {
    margin-top: -10px;
    margin-bottom: 10px;
    color: #bbb;
}

.popUp .terms a {
    color: inherit;
}

.popUp label {
    padding: 5px;
    color: #fff;
}

.popUp.presenterButtons {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 300px;
    height: auto;
    margin: auto;
    box-sizing: border-box;
    max-height: 100vh;
    overflow-y: scroll;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    flex-direction: column;
}
.popUp.presenterButtons::before {
    content: "";
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}
.popUp.presenterButtons h2 {
    font-weight: normal;
    font-style: italic;
    margin-bottom: 10px;
    color: #fff;
}
.popUp.presenterButtons p {
    font-style: italic;
    margin-top: 30px;
    font-size: 14px;
}
.popUp.presenterButtons p span.link, .popUp.presenterButtons p button.link {
    text-decoration: underline;
    cursor: pointer;
    display: inline;
    border: none;
    padding: 0;
    color: #bbb;
}
.popUp.presenterButtons p.reportContent {
    margin-top: 0;
}

.popUp.presenterButtons::after {
    content: "✕";
    color: #fff;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 20px;
    cursor: pointer;
    font-size: 25px;
}
.popUp.presenterButtons.inactive {
    display: none;
}

.popUp.presenterButtons select, .popUp.presenterButtons button {
    background: none;
    border-radius: 5px;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px;
    width: 300px;
    font-style: italic;
    margin-top: 5px;
}
.popUp.presenterButtons button {
    cursor: pointer;
    width: auto;
    margin: 4px;
    font-size: 14px;
    margin-top: 10px;
    text-decoration: none;
    padding: 12px;
}
.popUp.presenterButtons .block {
    display: block;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 20px;
    margin-bottom: -10px;
}

.popUp.presenterButtons .hidden {
    display: none;
}
.popUp.presenterButtons .inlinePresenterPass {
    width: 300px;
    font-size: 20px;
    border: 1px solid #fff;
    border-radius: 6px;
    background: none;
    padding: 10px;
    padding-left: 20px;
    color: #fff;
    font-style: italic;
}

input.terms {
    margin-left: 5px;
}

.popUp p {
    color: #bbb;
    font-size: 12px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 4px;
}
.popUp p.entryText {
    color: #fff;
    font-size: 14px;
    font-style: italic;
}
.popUp .enterButton {
    width: 250px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
}
.popUp .setPresenterButton, .popUp .openCmsButton {
    position: absolute;
    left: calc(-50vw + 270px);
    bottom: calc(-50vh + 145px);
    padding: 0;
    text-align: left;
    font-size: 14px;
    color: #eee;
    cursor: pointer;
    background: none;
    border: none;
    font-style: italic;
}

.popUp .openCmsButton {
    left: unset;
    right: calc(-50vw + 270px);
    text-align: right;
}
.popUp.high .setPresenterButton, .popUp.private .setPresenterButton {
    position: fixed;
    left: 20px;
    bottom: 20px;
}

.popUp .setPresenterButton.disabled {
    display: none;
}

.popUp .accessibilityButton {
    position: absolute;
    right: calc(-50vw + 270px);
    bottom: calc(-50vh + 145px);
    padding: 0;
    text-align: right;
    font-size: 14px;
    color: #eee;
    cursor: pointer;
    background: none;
    border: none;
    font-style: italic;
}
.popUp.high .accessibilityButton, .popUp.private .accessibilityButton {
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.popUp .accessibilityButton.disabled {
    display: none;
}
.popUp .accessibilityOptions.hidden {
    display: none;
}

.advancedOptions.hidden {
    visibility: hidden;
}
.advancedOptions {
    visibility: visible;
}

.advancedOptions p {
    color: #fff;
    font-size: 12px;
    font-style: italic;
}

.domainContainer, .matomoContainer {
    width: 300px;
    height: 100px;
    overflow-y: scroll;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
}

.domainContainer .domain, .matomoContainer .domain {
    text-align: left;
    padding: 5px;
    font-size: 14px;
}

.matomoContainer {
    height: 40px;
}

.fade {
    background: rgba(0,0,0,0.5);
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    transition: background 0.4s;
    z-index: 50;
}

.fade.fullWindow {
    opacity: 1;
    transition: opacity 0.3s;
}
.fade.fullWindow .fullWindow {
    left: calc(50vw - 200px);
    top: calc(50vh - 75px);
    position: fixed;
    width: 400px;
    z-index: 900;
    text-align: center;
    background: #eee;
    border-radius: 20px;
    border: 1px solid #999;
    box-sizing: border-box;
    padding-top: 30px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #000;
    font-size: 18px;
}
.fade.fullWindow .fullWindow input {
    width: 50%;
    float: left;
    margin-left: 25%;
    margin-bottom: 10px;
    margin-top: 20px;
    font-size: 20px;
    height: 35px;
    border: 1px solid #999;
    border-radius: 17.5px;
    background: #fff;
    box-sizing: border-box;
}

.hohInterface {
    position: relative;
    bottom: 0px;
    left: calc(100% + 20px);
    width: 300px;
    height: 400px;
    max-height: calc(100vh - 40px);
    background: rgba(0,0,0,0.3);
    border: 1px solid #fff;
    border-radius: 6px;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
    pointer-events: all;
}
.hohInterface.global {
    position: fixed;
    right: 20px;
    top: 20px;
    bottom: unset;
    left: unset;
    z-index: 999;
}
.hohInterface.transition {
    transition: bottom linear 200ms, left linear 200ms, right linear 200ms;
}
.hohInterface textarea, .hohInterface .hohInput.fake {
    -webkit-appearance: none;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    color: #fff;
    background: none;
    padding: 10px;
    font-size: 18px;
    font-style: italic;
    font-family: sans-serif;
    resize: none;
    border-radius: 0 0 6px 6px;
    border: none;
    border-top: 1px solid #aaa;
}
.hohInterface .hohInput.fake {
    box-sizing: border-box;
}

.hohInterface textarea.mobile {
    position: fixed;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.hohInterface textarea:focus {
    border-top: 1px solid #fff;
    background: rgba(0,0,0,0.2);
    outline: none;
    font-size: 18px;
}
.hohInterface .messageContainer {
    height: calc(100% - 60px);
    color: #fff;
}
.hohInterface .messageContainer .chatMessage.centered {
    margin-left: -17px;
    text-align: center;
    font-style: italic;
    color: #bbb;
    text-shadow: 0 0 3px #000;
}
article {
    position: absolute;
    background: #fff;
    border-width: 2px;
    border-style: solid;
    border-color: inherit;
    z-index: 5;
    transition: opacity 0.5s;
}
article.hidden {
    visibility: hidden;
    opacity: 0;
}
article.text {
    padding-left: 10px;
}

article.borderless {
    background: rgba(0,0,0,0);
    border-style: hidden;
}
article.borderless.text {
    padding-left: 0px;
}


article h1 {
    text-align: left;
    margin-bottom: 5px;
    margin-top: 10px;
    font-size: 22px;
}

article h2 {
    text-align: left;
    padding-bottom: 10px;
    margin-bottom: 5px;
    margin-top: -5px;
    font-size: 20px;
    font-weight: normal;
}
article p {
    text-align: left;
    padding-bottom: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 16px;
    font-weight: normal;
}
article a, article .info a {
    color: inherit;
}

article .info {
    padding-top: 8px;
    width: 110%;
    margin-left: -5%;
    height: 90px;
}

article .info h1, article .info h2, article .info p {
    padding-left: 4.55%;
    padding-right: 4.55%;
}

article.slideshow .info {
    position: absolute;
    top: 100%;
}

article .info p {
    opacity: 0;
    padding-top: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    box-sizing: border-box;
    pointer-events: none;
    padding-bottom: 4.55%;
/*    max-height: 180px;*/
/*    overflow-y: scroll;*/
    padding-bottom: 30px;
}

article .info:hover p, article[data-sr-active=true] .info p{
    opacity: 1;
    pointer-events: inherit;
}

article div.iframe {
    overflow: hidden;
    border: inherit;
    border-width: 0;
}

article a {
}

article .mouseBlocker {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

article .chatMessage {
    color: #000;
}

article img {
    max-width: 100%;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

article .room {
    position: absolute;
    top: -150px;
    left: -150px;
    border-radius: 30px;
    background: rgba(0,0,0,0);
    border: inherit;
    border-width: 1px;
    border-style: dashed;
    width: calc(100% + 300px);
    height: calc(100% + 300px);
    transition: border-color 0.3s;
    z-index: -10;
}
article.talking .room {
    border-color: rgba(0,0,0,0);
}
article .room.responsive {
    width: calc(100% + 30vw);
    height: calc(100% + 30vw);
    top: -15vw;
    left: -15vw;
}
article .room.roundRoom {
    border-radius: 50%;
    overflow: hidden;
}
article.puzzle .room {
    top: -200px;
    left: -200px;
    width: calc(100% + 400px);
    height: calc(100% + 400px);
}

article.quiz .room {
    visibility: visible;
}

article .room:before {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    content: "";
    background: rgba(0,0,0,0);
    transition: all 0.3s;
}

article.talking .room:before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.2);
    border-radius: 30px;
}

article.dynamicFrame .searchbar {
    position: absolute;
    top: calc(100% + 10px);
    width: 100%;
    height: 30px;
}
article.dynamicFrame .searchbar .searchbarfeild {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    color: #333;
    border-radius: 15px;
    font-size: 14px;
    border: none;
    padding-left: 30px;
    padding-right: 10px;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
article.dynamicFrame .searchbar .clearIframeUrl {
    position: absolute;
    z-index: 1;
    border: none;
    background: none;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
    cursor: pointer;
}

.map {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.5s;
    overflow: hidden;
    padding: 1px;
}

.map.hidden {
    opacity: 0;
}

.map.hidden .mapIcon {
    pointer-events: none;
}

.mapIcon {
    position: absolute;
    background: #fff;
    border: 1px solid #aaa;
    pointer-events: all;
    font-size: 11px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
/*    word-break: break-all;*/
    hyphens: auto;
    color: #000;
    box-sizing: border-box;
}

.tourInterface {
    position: fixed;
    width: 600px;
    height: 350px;
    background: #fff;
    border-radius: 20px;
    padding: 10px;
    left: calc(50vw - 300px);
    top: calc(50vh - 200px);
    z-index: 51;
    text-align: center;
    padding-top: 50px;
    overflow: scroll;
    color: #000;
}

.tourInterface .recButton {
    width: 50%;
    margin-left: calc(25% - 5px);
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 20px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    cursor: pointer;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
    background-position: center;
    background-size: cover;
}

.slide.activeSlide {
    opacity: 1;
}

.slideshowGUI {
    position: absolute;
    top: calc(100% + 10px);
    z-index: 10;
}
.slideshowGUI span {
    padding: 10px;
    cursor: pointer;
}

.chatbox {
    border: 2px solid #999;
    background: #fff;
}

.messageContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    flex-direction: column;
    padding: 8px;
    padding-bottom: 0px;
    padding-left: 25px;
    box-sizing: border-box;
    overflow: scroll;
}

.chatboxControlls {
    position: absolute;
    width: 100%;
    height: 40px;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: #eee;
    border-top: 1px solid #999;
}

.chatboxInput {
    position: absolute;
    left: 5px;
    bottom: 5px;
    height: 30px;
    width: calc(100% - 50px);
    border-radius: 15px;
    border: 1px solid #999;
    background: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

.chatboxButton {
    -webkit-appearance: none;
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 30px;
    height: 30px;
    background: #fff;
    border: 1px solid #999;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    color: #333;
    padding-left: 3px;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 0px;
}

.chatboxButton .icon {
    position: absolute;
    top: -4px;
    left: 5px;
    pointer-events: none;
}

.chatMessage {
    font-size: 13px;
    padding-bottom: 10px;
    position: relative;
}

.chatMessage .delete {
    position: absolute;
    top: 0;
    right: 0;
    text-shadow: 0 0 3px #fff;
    cursor: pointer;
}

.avatarHeader {
    position: absolute;
    left: -20px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 6px;
}

span.username {
    font-weight: bold;
}

article.screenshare {
    background: none;
    border-style: dashed;
    text-align: center;
}

article.screenshare.active {
    background: none;
    border-style: solid;
}

article.screenshare .label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
    font-style: italic;
    position: absolute;
    z-index: -1;
}

article.screenshare div.screenshare {
    height: auto !important;
    min-height: 100%;
    border: inherit;
    box-sizing: border-box;
}

.screenshareGUI {
    cursor: pointer;
    text-align: center;
    left: 0;
    top: 10px;
    z-index: 20;
    padding: 11px;
}

video.screenshare {
    object-fit: contain;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    min-height: 100%;
}

article.shape, .mapIcon.shape {
    border: none;
}

article.shape.circle, .mapIcon.shape.circle {
    border-radius: 50%;
}

article.portal, .mapIcon.portal {
    background: radial-gradient(#000, #555);
    transition: margin 1s ease, padding 1s ease, background 1s ease-out, width 1s ease, height 1s ease;
    cursor: pointer;
    z-index: unset;
}
article.portal:before {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(#000, #555);
}
article.portal:after {
    content: "";
    width: 100%;
    height: 100%;
    z-index: 10;
    top: 0;
    left: 0;
    position: absolute;
    border-radius: 50%;
}

article.puzzle {
    background-color: transparent !important;
    z-index: 5;
}
article.puzzle .segment {
    float: left;
    border: inherit;
    border-width: 0px;
    box-sizing: border-box;
    z-index: 5;
    visibility: hidden;
}
article.puzzle .segment.visible {
    border: none;
    visibility: visible;
}
article.puzzle .button {
    position: absolute;
    width: 200px;
    height: 32px;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 17px;
    top: calc(100% + 10px);
    left: 0;
    z-index: 10;
    text-align: center;
    padding-top: 7px;
    box-sizing: border-box;
    cursor: pointer;
    color: #000;
}
.pice {
    position: absolute;
    box-sizing: content-box;
    background: red;
    transform: translate(-50%,-50%);
    transition: left 0.2s linear, top 0.2s linear;
    z-index: 5;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    border: inherit;
    border-style: solid;
    border-width: 0;
}
/*
.pice:before {
    position: absolute;
    content: "";
    width: 200%;
    height: 100%;
    background: inherit;
    background-origin: content-box;
    padding-left: 50%;
    box-sizing: border-box;
    right: -50%;
    top: 0;
    padding-top: 0;
    border-radius: 50%;
}
*/
article.puzzle .frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.boundry {
    position: absolute;
    margin-left: -200px;
    margin-top: -200px;
    width: 100%;
    height: 100%;
    padding: 200px;
    box-sizing: content-box;
    border: inherit;
    border-style: dashed;
    border-width: 0px;
    overflow: hidden;
    transition: background 0.4s, border-radius 0.4s, border 0.4s;
    border-radius: 30px;
}

article.quiz {
    visibility: hidden;
    z-index: auto;
}
article.quiz .option {
    visibility: visible;
    position: absolute;
    height: 100%;
    max-width: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #fff;
    z-index: 2;
    transition: background 0.5s ease, margin 0.5s ease, padding 0.5s ease;
}
article.quiz .option.a {
    background: #f00;
    left: 0;
}
article.quiz .option.b {
    background: #00f;
    right: 0;
}
article.quiz .option.correct {
    background: #0f0;
    padding: 20px;
    margin: -20px;
}
article.quiz .option:before {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 100%;
    height: 100%;
    content: "";
    padding: 3px;
    border: none;
    border-radius: 50%;
    transition: opacity 0.5s ease;
    border: 3px dotted #0f0;
    opacity: 0;
}
article.quiz .option.correct:before {
    opacity: 1;
}
article.quiz .option.wrong {
    background: #aaa;
}

article.quiz .questionContainer {
    visibility: visible;
    position: absolute;
    bottom: 100%;
    text-align: center;
    width: 100%;
    z-index: 5;
}
article.quiz .questionContainer.hidden {
    visibility: hidden;
}
article.quiz .questionContainer h1 {
    visibility: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}
article.quiz .questionContainer.hidden h1 {
    visibility: visible;
}
article.quiz .question {
    font-size: 22px;
    margin-bottom: 12px;
}
article.quiz .answer {
    font-size: 18px;
    margin-bottom: 8px;
}
article.quiz .button {
    position: absolute;
    visibility: visible;
    width: 70px;
    height: 70px;
    border: inherit;
    border-width: 1px;
    border-radius: 50%;
    left: calc(50% - 35px);
    top: calc(50% - 35px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    z-index: 5;
    background: rgba(255,255,255,0.2);
}
article.quiz .button.large {
    font-size: 24px;
}
article.quiz .button.disabled {
    cursor: not-allowed;
}
article.quiz .button.start {
    cursor: pointer;
}
article.quiz .quizScores {
    position: absolute;
    height: 200px;
    width: 350px;
    position: absolute;
    top: calc(50% - 100px);
    left: calc(50% - 175px);
    background: #fff;
    border: 1px solid #aaa;
    border-radius: 5px;
    visibility: visible;
    z-index: 5;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 40px;
    color: #000;
}
article.quiz .quizScores p {
    text-align: center;
    color: #000;
}
article.quiz .quizScores p.score {
    margin-top: 5px;
}
article.quiz .quizScores p.name {
    padding: 0;
    margin: 0;
    font-size: 18px;
}
article.quiz .quizScores p.myScore {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

article.quiz div.score {
    visibility: visible;
    width: 100%;
    position: absolute;
    top: 100%;
    text-align: center;
    z-index: 5;
}

.mapIcon.quiz {
    background: none;
    border: none;
}

article input.volumeSlider {
    -webkit-appearance: none;
    background: transparent;

    position: absolute;
    bottom: 0;
    left: -15px;

    width: 120px;
    height: 0;

    transform-origin: bottom left;
    transform: rotate(270deg);

    border: inherit;
    border-width: 3px;
    border-radius: 3px;

}

article input.volumeSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
}

article input.volumeSlider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
}

article input.volumeSlider::-ms-thumb {
    width: 16px;
    height: 16px;
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 50%;
    box-sizing: border-box;
    cursor: pointer;
}

article input.volumeSlider:focus {
    outline: none;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

article input.volumeSlider::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

.openMic {
    border-radius: 100%;
    border-style: dashed;
    background-color: rgba(255,255,255,0.1);
    background-image: url(static/mic_icon_trans.png);
    background-size: 100px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.5s, opacity 0.5s;
}
.mapIcon.openMic {
    background-size: 20px;
}
.openMic.inactive {
    transform: scale(0.1);
    opacity: 0;
}
.openMic.temp {
    width: 300px;
    height: 300px;
    margin-left: -150px;
    margin-top: -150px;
    transition: left 0.1s linear, top 0.1s linear, opacity 0.3s ease, width 0.3s ease, height 0.3s ease, margin 0.3s ease, transform 0.5s ease;
    transform-origin: center;
    box-sizing: border-box;
}
.openMic.temp.inactive {
    transform: scale(0);
}
.openMic.unplaced {
    opacity: 1;
    animation: unplacedMic 0.5s ease-in-out infinite alternate;
}
.openMic.placed {
    opacity: 0;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    margin-top: -5px;
}
.openMic.unplaced:before {
    content: "Click anywhere to activate";
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    text-align: center;
    opacity: 1;
}


@keyframes unplacedMic {
    0% {
        transform: scale(0.9);
    } 100% {
        transform: scale(1);
    }
}

.bgimg {
    position: absolute;
    display: block;
    width: auto;
    height: auto;
}
.tree {
    left: 1744px;
    top: 1168px;
}
.swing {
    left: 5488px;
    top: 672px;
}
.shrub {
    left: 7440px;
    top: 2512px;
}
.rocks {
    left: 4544px;
    top: 5056px;
}
.seesaw {
    left: 3696px;
    top: 6512px;
}
.pond {
    left: 6800px;
    top: 7648px;
}
.well {
    left: 1536px;
    top: 6064px;
}

.email {
    left: 9700px;
    top: 20px;
}

.no_touch {
    pointer-events: none;
}

.cc.container {
    position: fixed;
    bottom: 70px;
    width: 90vw;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 1200px;
    height: auto;
    max-height: 100px;
    overflow: hidden;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    z-index: 999;
}
.cc.container .scroll {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100px;
    overflow-y: scroll;
}
.cc.container.hidden {
    display: none;
}
.cc.box {
    display: block;
    margin: 5px;
    transition: opacity 0.5s;
    font-size: 20px;
}
.cc.currentBox {
    color: #aaa;
    margin: 0;
}
.cc.currentBox.active {
    margin: 5px;
}
.cc.currentBox .text {
    opacity: 0.8;
}
.cc.container button {
    background: none;
    border: none;
    color: #fff;
    position: absolute;
    width: 22px;
    height: 22px;
    top: 0;
    right: 0;
    cursor: pointer;
}


.festivalUserContainer {
    border-radius: 20px;
    border: none !important;
}
.festivalUserContainer div.iframe {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.festivalUserContainer .videoContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    align-items: stretch;
    isolation: isolate;
}
.festivalUserContainer .svgMaskContainer {
    flex: 1;
    width: 100%;
    height: auto;
}
.festivalUserContainer video {
    object-fit: cover;
    transform: scale(-1,1);
    flex: 1;
    width: 100%;
    height: auto;
}
.festivalUserContainer .svgMaskContainer video {
    height: 100%;
}