/* embedded fonts */
h1 {
    font-family: "Anton", sans-serif;
    font-size: calc(55px + 2vw);
    line-height: 100%;
}

h3 {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: calc(21px + 2vw);
    font-weight: 500;
    color: #2E282A;
}


/* Intro Video Design */

.intro-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: black;
    overflow: hidden;
    display: none;
}

#after-intro {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.after-intro-wrapper {
    padding: 5%;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 70%;
    margin: auto;
    text-align: center;
}

#geschichte-button, #ruinen-button {
    border-radius: 0px;
    border: 4px solid #fff;
    font-family: "Anton", "Calibri", sans-serif;
    font-size: calc(10px + 1vw);
    color: #fff;
    background: transparent;
    min-width: calc(100px + 2vw);
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 1.5em;

    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 12px;
    padding-right: 12px;


    position: relative;
    transition: color 0.5s linear;
    overflow: hidden;

    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 2%;
    margin-top: 2%;
}

#geschichte-button::before, #ruinen-button::before {
    content: "";
    position: absolute;
    left: 0;
    right: -51px;
    top: 0;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #fff;
    transform: translateX(-100%);
    transition: transform 0.5s linear;
    z-index: -1;
}

#geschichte-button:hover::before, #ruinen-button:hover::before {
    transform: translateX(0);
}

#geschichte-button:hover, #ruinen-button:hover {
    color: #1e1e1e;
}

#geschichte-button:focus,#geschichte-button:active, #ruinen-button:focus,#ruinen-button:active {
   outline: none !important;
   box-shadow: none;
} /* gets rid of the blue glow after clicking button */

.pre-intro {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: #1e1e1e;
    overflow: hidden;
    display: none;
}

.hinweis-wrapper {
    margin: auto;
    padding: 10px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.hinweis {
    font-family:"PT Sans", "Calibri", sans-serif;
    font-size: 20px;
    color: white;
    text-align: center;
    margin: 0px;
    padding: 0px;
}

#sound-an {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: 53px;
    margin: 0px;
    margin-bottom: -21px;
    padding: 0px;
}

#intro-video {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    min-width: 100%;
    min-height: 100%;
}

.hide-scrollbar {
    overflow: hidden;
}

.intro-video-controls {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20px;
}

.skip-intro-button, .zrk-button {
    font-family: "PT Sans", "Calibri", sans-serif;
    padding: 0 6px 0 6px;
    margin: 20px;
    margin-right: 2%;
    margin-left: 7px;
    border: none;
    color: #fff;
    text-transform: none!important;
    cursor: pointer;
    font-size: 19px;
    backface-visibility: hidden;
    display: inline-block;
    position: relative;
    float: right;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.1, 1) 0.75s, all 0.5s cubic-bezier(0.4, 0, 0.1, 1) 0.75s;
    transform: translate3d(0, 0, 0);
    text-decoration: none;
}

.skip-intro-button:after, .zrk-button:after {
    display: block;
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 3px;
    background-color: #fff;
    bottom: -2px;
    left: 0;
    backface-visibility: hidden;
    pointer-events: none;
    animation: vuelta 0.42s cubic-bezier(0.42, 0, 0, 1) forwards;
}

.skip-intro-button:hover:after, .zrk-button:hover:after {
  animation: ida 0.42s cubic-bezier(0.42, 0, 0, 1)
}

.zrk-button {
    float: left;
    margin-left: 2%;
    margin-right: 7px;
}

.volume-button {
  cursor: pointer;
  display: inline-block;
  position: relative;
  float: right;
  width: 24px;
  padding-top: 0px;
  margin: 20px;
  margin-left: 5px;
  margin-top: 23px;
}

.fa-volume-off, .fa-volume-up {
    font-size: 19px;
    border: none;
    color: #fff;
}


/* Basic Settings (BG, Color ...) */
body {
    background-color: #f6f5f3;
    color: #2E282A;
    font-family: "PT Sans", "Calibri", sans-serif;
    height: 100%;
    font-size: 17px;
    overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Scroll Optimization */

div:target {
  padding-top: 73px;
  margin-top: -73px;
}

/* Get rid of default Link style */

.no-style:hover, .no-style:visited {
    text-decoration: none;
    color: #333;
}

/* Header */
.header {
    margin-bottom: 5vh;
}

.header-text {
    float: left;
    margin-top: 9vw;
    position: relative;
    left:10vw;
}

.header-title {
    color: #ca3e42;
    opacity: 0;
    position: relative;
    left: 150px;
}

.header-subtitle {
    position: relative;
    bottom: 21px;
    right: 7vw;
    opacity: 0;
}

.lead {
    font-family: "PT Sans", "Calibri", sans-serif;
    font-size: 20px;
    font-weight: 500;
    max-width: 300px;
    padding-right: 5px;
    padding-bottom: 5px;
    position: relative;
    top: 30px;
    opacity: 0;
    background-color: rgba(246,245,243, 0.3);
}

.header-image {
    max-height: 92vh;
    float: right;
    margin-top: 1vh;
    position: relative;
    right: 10vw;
    z-index: -1;
}

#header-button {
    opacity: 0;
    position: relative;
    top: 70px;
}

.btn-action {
    border-radius: 0px;
    border: 4px solid #2E282A;
    font-family: "Anton", "Calibri", sans-serif;
    font-size: calc(10px + 0.5vw);
    color: #2E282A;
    background: transparent;
    min-width: calc(100px + 2vw);
    letter-spacing: 0.2em;
    text-align: center;
    line-height: 1.5em;

    padding-top: 8px;
    padding-bottom: 7px;

    position: relative;
    transition: color 0.5s linear;
    overflow: hidden;
}

.btn-action::before {
    content: "";
    position: absolute;
    left: 0;
    right: -51px;
    top: 0;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #2E282A;
    transform: translateX(-100%);
    transition: transform 0.5s linear;
    z-index: -1;
}

.btn-action:hover::before {
    transform: translateX(0);
}

.btn-action:hover {
    color: #ffffff;
}

.btn-action:focus,.btn-action:active {
   outline: none !important;
   box-shadow: none;
} /* gets rid of the blue glow after clicking button */

/* Responsive Header */
@media only screen and (max-width: 1500px) {
    .header-text {
        left: 5vw;
    }
    .header-image {
        right: 5vw;
    }
}

@media only screen and (max-width: 1200px) {
    .header-text {
        left: 3vw;
    }
    .header-image {
        right: 3vw;
    }
}

@media only screen and (max-width: 992px) {
    .header-text {
        margin-top: 5vh;
        left: 10vw;
    }
    .header-image {
        margin-top: -5vh;
    }
}


/* Navbar */
.navbar-design {
    background-color: #f6f5f3;
    font-family: "Lato", "Calibri", sans-serif;
    font-size: calc(12px + 0.5vw);
}

/* Main Menu */
.main-menu {
    margin-bottom: 15vh;
}


.intro-text {
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 15px;
    margin-left: 2vw;
    margin-top: 20px;
    border-left: 2px solid #ca3e42;
    font-size: 0.9em;
}

.comment {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: 2em;
    transform: rotate(-13deg);
    float: right;
    position: relative;
    bottom: 20px;
}


/* Timeline */

.timeline {
    margin-left: 0.7vw;
    height: 93vh;
    position: fixed;
    z-index: 1;
}

.timeline-dots {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 70vh;
    margin-top: 15px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    border-right: 3px dotted #2E282A;
}

.dot {
    height: 20px;
    width: 20px;
    background-color: #2E282A;
    border-radius: 50%;
    position: relative;
    left: 11px;
    cursor: pointer;
    border: 4px solid #f6f5f3;
    box-shadow: 0 0 0 0px #f6f5f3;
}

.p1 {
    box-shadow: 0 0 0 2.5px #CA3E42;
    background-color: #CA3E42;
} /* first dot is automatically red at the beginning */

/* Tooltip Style */

.tooltip-inner {
    background: #2E282A;
    border-radius: 0%;
    font-family: "Anton", "Calibri", sans-serif;
    font-size: calc(10px + 0.5vw);
    letter-spacing: 0.2em;
    line-height: 1.5em;
    text-align: right;
    opacity: 1;
}

.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #2E282A;
}

.tooltip {
    margin-left: 8px;
}


/* Timeline Headers */

.timeline-header {
    font-size: calc(110px + 6vw);
    color: #ca3e42;
    letter-spacing: 3;
    margin-top: 5px;
}

.timeline-subtitle {
    position: relative;
    bottom: calc(30px + 1vw);
    left: 20%;
    font-size: calc(53px + 1vw);
    margin-bottom: -4.5%;
}

#long-ts { left: 20%;}
@media only screen and (max-width: 768px) { #long-ts { left: 9%;}}


@media only screen and (max-width: 900px) { .timeline-subtitle {left: 10%;}}
@media only screen and (max-width: 767px) { .timeline-subtitle {left: 20%;}}

@media only screen and (min-width: 768px) { #tito {max-height: 77vh;}}

.tito-wrapper, .jz1-wrapper {
    position: relative;
    top: 50%;
    left: -15%;
    transform: translateY(-50%);
}

@media only screen and (max-width: 992px) { .tito-wrapper, .jz1-wrapper {left: 0%;}}


/* Comment Design */
.tito-comment {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: calc(21px + 1vw);
    position: relative;
    bottom: 25px;
    left: 9%;
    margin: 0px;
    padding: 0px;
}

.speisekarte-comment {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: calc(21px + 1vw);
    position: relative;
    left: 9%;
    margin: 0px;
    padding: 0px;
}
@media only screen and (max-width: 1519px) {.speisekarte-comment {margin: 0px 15%;}}

.ernest-comment {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: calc(21px + 1vw);
    position: relative;
    left: 11%;
    top: 6rem;
    margin: 0px;
    padding: 0px;
}

.paul-comment {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: calc(21px + 1vw);
    position: relative;
    bottom: 35px;
    left: 60%;
    margin: 0px;
    padding: 0px;
}

/* Timeline 1968 */

.image-description {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: calc(16px + 1vw);
    text-align: right;
    line-height: 1.2;
    margin-top: 4vw;
}


.haludovo-map-fader img:first-child {
    position: absolute;
    top: 0;
    left: 1;
}

.haludovo-map-fader img:last-child {
    position: absolute;
    top: 0;
    left: 2;
    opacity: 0;
}

.placeholder {
    opacity: 0;
}

.history-vid {
    border: calc(0.7vw + 0.7vh) solid #ffffff;
    box-shadow: 5px 5px 11px 0px rgba(188,187,187,0.53);
}

/* Timeline 1971 */

.image-description-02 {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: calc(16px + 1vw);
    text-align: right;
    line-height: 1.2;
    margin-top: 2vw;
}

.cards-wrapper {
    margin-left: 1%;
    position: relative;
    margin-top: 15px;
    margin-bottom: 15px;
}

.cards {
  margin: 0 10px;
  text-align: center;
}
.cards:after {
  content: ' ';
  display: table;
  clear: both;
}

.card {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: absolute;
    top: 0;
    width: 90%;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    z-index: 2;
}
@media only screen and (min-width: 1200px) { .card{width: 70%;}}

.postcard-spacer {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    top: 0;
    width: 90%;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    z-index: 0;
    visibility: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 1199px) { .postcard-spacer {margin-bottom: 20%;}}


.card-selected {
  /*border: 5px solid rgba(255,0,0,0.25);*/
  z-index: 3;
}

.card-unselected {
  /*border: 5px solid rgba(0,0,255,0.25);*/
  z-index: 1;
}

@keyframes rotate-out {
  0% {
    transform-origin: 100% 50%;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 500px -25px 0;
    transform: rotate(5deg) translateX(110%);
  }
}

@keyframes rotate-in {
  0% {
    transform-origin: 500px -25px 0;
    transform: rotate(5deg) translateX(110%);
  }
  100% {
    transform-origin: 100% 50%;
    transform: rotate(0deg);
  }
}

@keyframes fade-out-and-in {
  0%   { opacity: 1; }
  45%  { opacity: 0; }
  55%  { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes rotate-out {
  0% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: 500px -25px 0;
    -webkit-transform: rotate(5deg) translateX(110%);
  }
}

@-webkit-keyframes rotate-in {
  0% {
    -webkit-transform-origin: 500px -25px 0;
    -webkit-transform: rotate(5deg) translateX(110%);
  }
  100% {
    -webkit-transform-origin: 100% 50%;
    -webkit-transform: rotate(0deg);
  }
}

@-webkit-keyframes fade-out-and-in {
  0%   { opacity: 1; }
  45%  { opacity: 0; }
  55%  { opacity: 0; }
  100% { opacity: 1; }
}

/* Do The Shuffle! */
.doTheShuffle .card.card-selected {
  animation: rotate-out 1s;
  -webkit-animation: rotate-out 1s;
}
.doTheShuffle .details {
  animation: fade-out-and-in 2s;
  -webkit-animation: fade-out-and-in 2s;
}
.doTheShuffle .card.card-unselected {
  animation: rotate-in 1s;
  -webkit-animation: rotate-in 1s;
}

.c1 {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

.c2 {
    transform: rotate(-1.5deg);
    -webkit-transform: rotate(-1.5deg);
}

.c3 {
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
}

.c4 {
    transform: rotate(0.25deg);
    -webkit-transform: rotate(0.25deg);
}

.c5 {
    transform: rotate(1.5deg);
    -webkit-transform: rotate(1.5deg);
}

.c6 {
    transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
}





/* Flipbook */

    /* helpers */

    .t {
        display: table;
        width: 100%;
        height: 100%;
    }

    .tc {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .rel {
        position: relative;
    }

    /* flipbook */

    .book {
        margin: 0 0;
        width: 90%;
        height: 90%;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .book .page {
        height: 100%;
    }

    .book .page img {
        max-width: 100%;
        height: 100%;
    }


/* Quote Design */

.quote {
    font-family: 'Vollkorn', serif;
    position: relative;
    left: 33px;
    font-size: 19px;
    margin: 1.5rem 0 2rem;
    padding-right: 40px;
}
.fa-quote-left {
    position: relative;
    margin-right: -19px;
    left: -31px;
    font-size: 20px;
}

.quote-bold {
    font-weight: 700;
}

.quote-info {
    font-family: "PT Sans", "Calibri", sans-serif;
    font-style: italic;
    font-size: 14px;
    color: #7f7b7c;
    text-align: center;
}

@media only screen and (min-width: 1500px) {
    .audio-zubehoer-wrapper {
        position: relative;
        left: -11%;
        top: -21%;
        margin-bottom: -27%;
    }
}

.audio-button-container {
    position: absolute;
    bottom: 30%;
    left: 5%;
    z-index: 1;
}

.audio-button-container-02 {
    position: relative;
    left: -5%;
    margin-top: -15%;
    z-index: 1;
}



/* Audio Player Design */

html {
	height: 100%;
}

.slide__audio {
	position: relative;
	background: #ca3e42;
    border-radius: 50%;
	width: 100px;
}

.audio__controls {
	height: 100px;
	width: 100px;
	position: relative;
}

.slide__audio .slide__audio-player {
	display: none;
}

.play-pause {
	position: absolute;
	left: 50px;
	top: 50px;
	z-index: 3;
	width: 50px;
	background: transparent !important;
	height: 50px;
	cursor: pointer;
	transform: translate(-50%, -50%);
	border: 0;
	padding: 0;
	margin: 0;
	&:focus {
		outline: none;
	}
}

.play-pause:focus {
    outline-color: #ca3e42;
}

.play-pause::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    border-style: hidden;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZdJREFUeNrs29FNQjEYBlAgDuAIuAFugBvgBrABTiBOgE4AGzgCbCAbwAayAbZJb0KMT77wt/ecpO/39qP9CqGDAQAAAAAAAAAAAAAA8A+Xy2WWxr2ZiBPILo1jGlOzESeQzmcaY7MSJ5DsO42lmYkTSOcrjYkZihNIZ630YwVyKaU/M1txAunsWir9UQPvkI/GuVtWPsoxVsjv0p9aIXHkE9iu5tIfNbrI8neWXPpzgcSRV8imttJvOZDr0j/WUvp9CKTzWsMPln0KJBuX0t9ELf2+BdKZl21sKZBYpb8upT8RSMBv+hG2MYFclX4JZioQBPKHtzQeh8Ph/pYPcSeHQQ7gJQVxsEJu61yCeIoSRp9XyLaEcY72YH0L5JTG4tY9YcsqpZ2CeIgcRl9WyL6sipNj7+1Le1FK+1TLQ7cayHsaeXva1vbgrW1Zh3J62tf6Aq0EkrenjxTEqvYXaSGQqkq75Q7JATzXVtpV8mfregJxHSFIIC7sBArElbYggbj0GSgQ16IBAAAAAAAAAAAAACCsHwEGACfr+SLf7BaJAAAAAElFTkSuQmCC');
	background-size: 150%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}


.playing .play-pause::after {
	content: none;
}

.playing .play-pause::before {
	opacity: 1;
}

.equalizer {
	height: 100px;
	width: 50px;
	transform: rotate(180deg);
	left: 25px;
	top: 10px;
	position: absolute;
	transform-origin: center;
	opacity: 0;
}

.playing .equalizer {
	opacity: 1;
}

.equalizer-group {
	width: 100%;
	height: 100%;
	display: block;
	transform-origin: center;
}

.bar {
	fill: white;
	width: 5px;
	animation: equalize 1.25s steps(25, end) 0s infinite;
	transform-origin: center;
	position: relative;
	margin-top: -50px;
}

.bar:nth-child(1) {
	animation-duration: 1.9s;
	transform: translate(5px, 50%);
}

.bar:nth-child(2) {
	animation-duration: 2s;
	transform: translate(25%, 50%);
}

.bar:nth-child(3) {
	animation-duration: 2.3s;
	transform: translate(50%, 50%);
}

.bar:nth-child(4) {
	animation-duration: 2.4s;
	transform: translate(75%, 50%);
}

.bar:nth-child(5) {
	animation-duration: 2.1s;
	transform: translate(95%, 50%);
}

@keyframes equalize {
	0% {
		height: 10px;
		margin-top: -10px;
	}
	4% {
		height: 5px;
		margin-top: -5px;
	}
	8% {
		height: 40px;
		margin-top: -40px;
	}
	12% {
		height: 30px;
		margin-top: -30px;
	}
	16% {
		height: 20px;
		margin-top: -20px;
	}
	20% {
		height: 30px;
		margin-top: -30px;
	}
	24% {
		height: 40px;
		margin-top: -40px;
	}
	28% {
		height: 10px;
		margin-top: -10px;
	}
	32% {
		height: 40px;
		margin-top: -40px;
	}
	36% {
		height: 10px;
		margin-top: -10px;
	}
	40% {
		height: 20px;
		margin-top: -20px;
	}
	44% {
		height: 40px;
		margin-top: -40px;
	}
	48% {
		height: 15px;
		margin-top: -15px;
	}
	52% {
		height: 30px;
		margin-top: -30px;
	}
	56% {
		height: 10px;
		margin-top: -10px;
	}
	60% {
		height: 30px;
		margin-top: -30px;
	}
	64% {
		height: 35px;
		margin-top: -35px;
	}
	68% {
		height: 15px;
		margin-top: -15px;
	}
	72% {
		height: 5px;
		margin-top: -5px;
	}
	76% {
		height: 45px;
		margin-top: -45px;
	}
	80% {
		height: 25px;
		margin-top: -25px;
	}
	84% {
		height: 5px;
		margin-top: -5px;
	}
	88% {
		height: 50px;
		margin-top: -50px;
	}
	92% {
		height: 30px;
		margin-top: -30px;
	}
	96% {
		height: 50px;
		margin-top: -50px;
	}
	100% {
		height: 25px;
		margin-top: -25px;
	}
}


/* More Info Button */

.more-info, .next-topic {
    text-transform: none!important;
    cursor: pointer;
    letter-spacing: 1px;
    font-size: 19px;
    font-weight: 600;
    backface-visibility: hidden;
    display: inline-block;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.1, 1) 0.75s, all 0.5s cubic-bezier(0.4, 0, 0.1, 1) 0.75s;
    transform: translate3d(0, 0, 0);
    text-decoration: none;
    color: #333;
}

.more-info:after, .next-topic:after {
    display: block;
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 3px;
    background-color: #333;
    bottom: -2px;
    left: 0;
    backface-visibility: hidden;
    pointer-events: none;
    animation: vuelta 0.42s cubic-bezier(0.42, 0, 0, 1) forwards;
}

.more-info:hover:after, .next-topic:hover:after {
  animation: ida 0.42s cubic-bezier(0.42, 0, 0, 1)
}

@keyframes ida {
	0% { transform: scaleX(0); transform-origin: left;}
	100% { transform: scaleX(1); transform-origin: left;}
}

@keyframes vuelta {
	0% { transform: scaleX(1); transform-origin: right;}
	100% { transform: scaleX(0); transform-origin: right;}
}


/* ruinen.html Styling */

.bg-container {
    position: relative;
    overflow: hidden;
    height: 60vw;
    background-image:url(../images/ruinen-bg-image.png); background-size: cover;
}

.ruinen-body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.zu-klein-meldung {
    display: none;
}

.ruinen-titel {
    font-family: "Anton", sans-serif;
    font-size: calc(20px + 4vw);
    color: #ca3e42;
    line-height: 110%;
    margin-left: 4%;
    margin-top: 2%;
    max-width: 30vw;
}

.ruinen-untertitel {
    position: relative;
    bottom: calc(15px + 0.9vw);
    left: 4%;
    font-size: calc(25px + 2vw);
    margin-left: 3%;
    max-width: 20vw;
}

#hotspot-frage {
    margin-left: 4%;
    font-size: calc(16px + 1vw);
    font-weight: 600;
    max-width: 30vw;
    line-height: 110%;
    transition: all 0.5s ease;
}
#hotspot-info {
    margin-left: 4%;
    font-size: calc(16px + 1vw);
    font-weight: 400;
    max-width: 30vw;
    margin-top: 0px;
    line-height: 110%;
    transition: all 0.5s ease;
}
@media only screen and (max-width: 1150px) {
    .ruinen-untertitel {margin-bottom: -1%;}
    #hotspot-info {margin-top: -0.5%;}
}

@media only screen and (max-width: 720px) {
    #hotspot-info {margin-top: -1.5%;}
}

@media only screen and (max-width: 639px) {
    .zu-klein-meldung {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10000;
        width: 100%;
        height: 100%;
        background-color: #1e1e1e;
        overflow: hidden;
        display: block;
    }
}

.hotspot-button {
    color: white;
    background-color: #ca3e42;
    display: block;
    width: 1.5vw;
    min-width: 20px;
    height: 1.5vw;
    min-height: 20px;
    border-radius: 50%;
    cursor: pointer;
}

.hotspot-button:hover {
    animation: fadein .5s;
    animation: pulse 1.5s infinite;
}

#b1 {
    position: absolute;
    left: 73.3%;
    top: 33.3%;
    transform: translate(-50%, -50%);
}
#b2 {
    position: absolute;
    left: 70.2%;
    top: 42.2%;
    transform: translate(-50%, -50%);
}
#b3 {
    position: absolute;
    left: 70.2%;
    top: 51.6%;
    transform: translate(-50%, -50%);
}
#b4 {
    position: absolute;
    left: 61.4%;
    top: 65.5%;
    transform: translate(-50%, -50%);
}
#b5 {
    position: absolute;
    left: 59.4%;
    top: 47.3%;
    transform: translate(-50%, -50%);
}
#b6 {
    position: absolute;
    left: 82%;
    top: 42.5%;
    transform: translate(-50%, -50%);
}
#b7 {
    position: absolute;
    left: 83.94%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#b8 {
    position: absolute;
    left: 88%;
    top: 63.3%;
    transform: translate(-50%, -50%);
}
#b9 {
    position: absolute;
    left: 89.85%;
    top: 40.8%;
    transform: translate(-50%, -50%)
}
#b10 {
    position: absolute;
    left: 57.66%;
    top: 26.7%;
    transform: translate(-50%, -50%);
}
#b11 {
    position: absolute;
    left: 43.2%;
    top: 39.3%;
    transform: translate(-50%, -50%);
}

#b12 {
    position: absolute;
    left: 52.7%;
    top: 38.15%;
    transform: translate(-50%, -50%);
}

#b13 {
    position: absolute;
    left: 61.39%;
    top: 60.65%;
    transform: translate(-50%, -50%);
}

@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pulse {
  from { box-shadow: 0 0 0 0px rgba(211, 47, 47); }
  to { box-shadow: 0 0 0 15px rgba(0, 0, 0, 0); }
}

.pre-explore {
    position: fixed;
    top: -100%;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #f6f5f3;
    overflow: hidden;
    display: none;
}

.hidden {
    display: none;
}



/* About Page Design */

.about-header {
    font-size: calc(11rem * 1vw);
}

.about-st {
    position: relative;
    left: 4%;
    bottom: 5%;
    margin-bottom: -5%;
    font-size: calc(50px + 1vw);
}



/* Ruinen Subpages */

.fix {
    position: fixed;
    top: calc(70px + 4%);
    left: 4%;
}

.zrk-zu-ruinen {
    position: fixed;
    bottom: 2%;
    left: 4%;
}

.ruinen-subpage-titel {
    font-family: "Anton", sans-serif;
    font-size: calc(20px + 4vw);
    color: #ca3e42;
    line-height: 110%;
    max-width: 30vw;
    hyphens: manual;
}

.ruinen-galerie {
    float: right;
    margin-top: 2%;
    max-width: 65vw;
}

.ruinen-foto {
    /*box-shadow: 5px 5px 20px 3px rgba(0,0,0,0.3);*/
    padding: 7px 7px;
    max-width: 100%;
}


.ruinen-plan {
    width: 25vw;
}

@media only screen and (max-width: 1000px) {
    .ruinen-plan {
        display: none;
    }
}

.danke {
    font-family: "Northwell", "Sue Ellen Francisco", sans-serif;
    font-size: 60px;
    font-weight: 500;
    color: #2E282A;
    margin-bottom: -2px;
}

@media only screen and (max-width: 767px) {
    .danke-big-screen {
        display: none;
    }
}

.ruins-vid {
    max-width: 100%;
    padding-bottom: 1px !important;
}