/* Responsive intro logo sizing using viewport units */
#intrologo {
	max-width: min(65vw, 600px) !important;
	max-height: min(65vh, 600px) !important;
	width: auto !important;
	height: auto !important;
}
/* Center and size intro text responsively */
#introtext {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 90% !important;
	max-width: 800px !important;
	text-align: center !important;
}

#introtext h1 {
	font-size: clamp(14px, 6vw, 28px) !important;
	margin-bottom: 20px !important;
}

#introtext p {
	font-size: clamp(10px, 5vw, 33px) !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Blur and  lighten background for intro instructions */
#after_intro {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	/* background-color: rgba(255, 255, 255, 0.7) !important; */
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

/* Blur and lighten background for intro */
#intro {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	z-index: 999 !important;
	background-color: rgba(255, 255, 255, 0.7) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}



.horizontallogo #introtext {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    /* breder gemaakt */
    right: -20%;
}

#intro .text img {
    max-width: 70%;
    border-color: #1773a0;
    border-radius: 8px;
    margin-bottom: 10px;
    border-style: unset;
    border-width: 3px;
    }


@media screen and (min-height: 990px) {
    .horizontallogo #introtext {
        top: 40%;
    }
    .horizontallogo #introstart {
        margin-top: 0px;
        bottom: 22%;
    }
    #intrologo {
        top: 18%;
    }
    #intro_menu {
        top: 55% !important;
        height: 40% !important;
   }
   #intro .text img {
    max-width: 70% !important;
    border-color: #1773a0 !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    border-style: unset !important;
    border-width: 3px !important;
    }
    .horizontallogo #introtext {
        top: 40%;
    }
}

@media screen and (min-width:1030px) {
    #sceneList.item-6,
    #sceneList.item-7,
    #sceneList.item-8,
    #sceneList.item-9,
    #sceneList.item-10,
    #sceneList.item-11,
    #sceneList.item-12,
    #sceneList.item-13,
    #sceneList.item-14 {
        width: 950px;
    }
    #sceneList.item-5 {
        width: 875px;
    }
    #sceneList.item-5 .flickity-prev-next-button {
        display: none;
    }
    #intro .text img {
        max-width: 70% !important;
        border-color: #1773a0 !important;
        border-radius: 8px !important;
        margin-bottom: 10px !important;
        border-style: unset !important;
        border-width: 3px !important;
        }
}

@media screen and (min-height: 440px) and (max-height: 990px) {
    /* .horizontallogo #introtext {
        top: 32%;
    } */
    .horizontallogo #introstart {
        bottom: 15%;
    }
    #intrologo {
        top: 15%;
    }
    #intro .text img {
        max-width: 50% !important;
        border-color: #1773a0 !important;
        border-radius: 8px !important;
        margin-bottom: 0px !important;
        border-style: unset !important;
        border-width: 3px !important;
    }
    /* #intro p {
        font-size: 19px !important;
    } */
    #intro_menu {
        top: 45%;
    }


}

@media screen and (max-height: 440px) {
    .vierkantlogo #introtext {
        top: 10px !important;
    }
    .vierkantlogo #intrologo {
        top: 50%;
        transform: translate(-50%, -50%);
    }
    .horizontallogo #introtext {
        top: 25% !important;
    }
    .horizontallogo #intrologo {
        top: 40%;
        transform: translate(-20%, -0%) !important;
        width: 100%;
    }
    .horizontallogo #introstart {
        bottom: 15%;
    }
    #intro .horizontallogo .text p {
        font-size: 17px;
    }
    #intrologo.started {
        -webkit-transition: opacity 1.2s ease-in-out;
        -moz-transition: opacity 1.2s ease-in-out;
        -ms-transition: opacity 1.2s ease-in-out;
        -o-transition: opacity 1.2s ease-in-out;
        opacity: 0;
    }
    #intro_menu {
        top: 45%;
    }
}

@media screen and (max-height: 660px) and (min-width: 760px) {
    #intro .vierkantlogo img {
        max-width: 34%;
    }
    .vierkantlogo #introtext h1 {
        font-size: 21px;
    }
    .vierkantlogo #introtext p {
        font-size: 16px !important;
    }
    .vierkantlogo #introstart {
        margin-top: 0px !important;
    }
    #intro .horizontallogo img {
        max-width: 60%;
    }
    .horizontallogo #introtext h1 {
        font-size: 21px;
    }
    .horizontallogo #introtext p {
        font-size: 16px;
    }
    .horizontallogo #introstart {
        bottom: 10%;
    }
}

@media screen and (min-height: 490px) and (max-width: 760px) {
    #intro .vierkantlogo img {
        max-width: 60%;
    }
    .vierkantlogo #introtext h1 {
        font-size: 21px;
    }
    .vierkantlogo #introtext p {
        font-size: 16px;
    }
    .horizontallogo #introtext h1 {
        font-size: 21px;
    }
    .horizontallogo #introtext p {
        font-size: 16px;
    }
}

@media screen and (max-height: 660px) and (max-width: 760px) {
    #intro .vierkantlogo img {
        max-width: 34%;
    }
    .vierkantlogo #introtext h1 {
        font-size: 17px;
    }
    .vierkantlogo #introtext p {
        font-size: 14px;
    }
    #intro .horizontallogo img {
        max-width: 40% !important;
    }
    .horizontallogo #introtext h1 {
        font-size: 21px;
    }
    .horizontallogo #introtext p {
        font-size: 16px;
    }
    #intro .horizontallogo .text p {
        font-size: 17px;
    }

}

@media screen and (max-width: 560px) {
    .horizontallogo #introtext h1 {
        font-size: 18px;
    }
    .vierkantlogo #introtext h1 {
        font-size: 18px;
    }
    .horizontallogo #intrologo {
        transform: translate(-50%, -0%) !important;
        width: 70%;
        top: 10%;
    }
}

@media screen and (max-height: 660px) and (min-width: 760px) {
    #intro .horizontallogo img {
        max-width: 60% !important;
    }
    .horizontallogo #introtext {
        top: 37% ;
    }
    .horizontallogo #intrologo {
        transform: translate(-30%, -0%) !important;
        width: 70%;
        top: 10%;
    }
}

@media screen and (max-height: 660px) and (max-width: 760px) {
    #intro .horizontallogo img {
        max-width: 40% !important;
    }
    .horizontallogo #introtext {
        top: 37% !important;
    }
    .horizontallogo #intrologo {
        transform: translate(-50%, -0%) !important;
        width: 70%;
        top: 10%;
    }
}



/* @media screen and (min-height: 490px) and (max-width: 760px) {
    .horizontallogo #introtext p {
        font-size: 18px !important;
    }
} */

#intrologo {
    position: absolute;
    max-width: 600px !important;
    left: 50% !important;
    right: -20% !important;
    transform: translate(-50%, -50%) !important;
}

/* #intro {
    color: #353535 !important;
} */

.control-outer {
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

#intrologo img {
    max-width: 100% !important;
}

.intro_button {
    color: rgb(255 255 255) !important;
    background-color: #1773a0 !important;
}

.intro_button {
    cursor: pointer;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: white;
    font-size: 18px;
    z-index: 28;
    width: 195px;
    padding-top: 15px;
    padding-bottom: 13px;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.6s;
}

.intro_button:hover {
    background-color: #ffffff !important;
    color: #1773a0 !important;
}

@media screen and (min-width: 560px) {
    #introstart {
        max-width: 80%;
    }
    .intro_button {
        margin-left: 15px;
        margin-right: 15px;
        border-radius: 5px;
    }
}

@media screen and (max-width: 560px) {
    #introstart {
        width: 100%;
    }
    .intro_button {
        width: 100%;
    }
}

#introstart {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.toggleScene {
    background-size: 33px 33px !important;
}

#whoami .control-inner {
    padding-bottom: 2% !important;
}

.tooltip-inner {
    display: none !important;
}

.tooltip-arrow {
    display: none !important;
}

.link-hotspot-tooltip {
    top: 5px !important;
}

@media screen and (max-height: 600px) {
    #showmenu {
        margin-left: 0px !important;
    }
}

#showmenu {
    top: 50%;
    position: absolute;
    width: 55px;
    height: 55px;
    margin-left: 15px;
    transform: translateY(-50%);
    display: none !important;
}

/* #introtext p {
    font-size: 22px !important;
} */

.intro_menu .text h2 {
    font-weight: normal !important;
    letter-spacing: 0.7px !important;
}

.control-inner img {
    padding-top: 35px;
    padding-bottom: 25px;
    max-height: 500px;
    max-width: 60% !important;
    display: flex;
}

.landscape .mobile.vertical,
.loading .mobile.horizontal,
.portrait .mobile.horizontal {
    display: none;
}

#intro p {
    font-size: 23px;
    padding-top: 0px;
    text-align: center;
    color: #353535;
}