body{
	font-family:'Griffy-Regular', sans-serif;
	font-size:large;
	font-weight: bold
}
body, html {
  height: 100%;
  color: #FFFF00;
  letter-spacing: 3px;
}

#showInfoMsg{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
    padding: 20px;
    text-align: center;
    z-index: 9999;
    max-height: 100vh;
    max-width: 100vw;
}
.infoDataL {
	max-width: 50%;
	display: inline-block;
	min-width: 50%;
	vertical-align: top;
}
.infoData {
	display: inline-block;
}
.infoDataLbl {
	text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    position: relative;
    margin: 9px 0;
    font-family: 'Griffy-Regular', sans-serif !important;
    color: inherit;
	letter-spacing: 3px;
}
.content {
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-left: 7vw;
    padding-right: 7vw;
}
.statcomment{
    float: right;
}
.stathight{
    margin-bottom: 10px;
}
.page {
    position: relative;
    top: -20px;
    opacity: 0;
    -webkit-animation: fadePageIn 12s ease-out forwards 1;
    -moz-animation: fadePageIn 12s ease-out forwards 1;
    -o-animation: fadePageIn 12s ease-out forwards 1;
    -ms-animation: fadePageIn 12s ease-out forwards 1;
    animation: fadePageIn 12s ease-out forwards 1;
}
/*=======================================================*/
.sPageUp{
    position: fixed;
    right: 10px;
    width: 70px;
    height: 80px;
    background: url('/assets/themes/ghosthouse/images/skel-hand-arrow-up.png');
 	background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
    cursor: pointer;
    z-index: 1000;
}

body.mobile-view > .sPageUp,
body.mobile-view > .sPageDown{
	opacity: 30%;
	margin-right: 20px;
    width: 65px;
    height: 70px;
}
.sPageUp:hover {
    position: fixed;
    right: 10px;
    width: 70px;
    height: 80px;
    background: url('/assets/themes/ghosthouse/images/skel-hand-arrow-up-red.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
	opacity: 100%;
}
.sPageDown {
    position: fixed;
    right: 10px;
    width: 70px;
    height: 80px;
    background: url('/assets/themes/ghosthouse/images/skel-hand-arrow-down.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}
.sPageDown:hover {
    position: fixed;
    right: 10px;
    width: 70px;
    height: 80px;
    background: url('/assets/themes/ghosthouse/images/skel-hand-arrow-down-red.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
	opacity: 100%;
}

.sPageUp {
    top: 50%;
    transform: translateY(-120%);
}

.sPageDown {
    top: 50%;
    transform: translateY(20%);
}

/*=======================================================*/

#myNavbar {
    position: fixed;
    top: 0px;
    left: 0px;
    height: 50px;
}
.statsHeight{
  height: 10px !important;
}
.statsHeight i{
  padding-top: 10px !important;
}
.bottom-5px{
	margin-bottom: 5px;
}

.ptbg {/*=======================================================*/
/* Pfeile für die Navigation */
.prevPage, .nextPage {
    position: absolute;
    bottom: 20px;         /* Positionierung am unteren Rand */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.prevPage {
    left: 10px; /* Linker Pfeil */
}

.nextPage {
    right: 10px; /* Rechter Pfeil */
}

/* Hover-Effekt für die Pfeile */
.prevPage:hover, .nextPage:hover {
    opacity: 1;
}

    -webkit-box-shadow: 60px 60px 60px;
    -moz-box-shadow: 60px 60px 60px #8a3ab9;
    box-shadow: 60px 60px 60px #8a3ab9;
    filter: alpha(opacity=80);
    opacity: 0.8;
    -webkit-transform-style: flat;
    -moz-transform-style: flat;
    -o-transform-style: flat;
    -ms-transform-style: flat;
    transform-style: flat;
    -webkit-transform: scale(0.6) translate(0%, -50%);
    -moz-transform: scale(0.6) translate(0%, -50%);
    -o-transform: scale(0.6) translate(0%, -50%);
    -ms-transform: scale(0.6) translate(0%, -50%);
    transform: scale(0.6) translate(0%, -50%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    z-index: 0;
}
.hqdrone {
  transform: perspective(800px) rotateY(25deg) scale(0.9) rotateX(10deg);
  filter: blur(2px);
  opacity: 0.5;
  transition: 0.6s ease all;
  border-radius: 2rem;
  background: #000;

  &:hover {
    transform: perspective(800px) rotateY(-15deg) translateY(-50px)
      rotateX(10deg) scale(1);
    filter: blur(0);
    opacity: 1;
  }
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
}

 .bgimg-4 {
  background-attachment: scoll;
}
.bgimg-1, .bgimg-2, .bgimg-3{
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.wrapper {
	position:fixed;
	width:100%;
	min-height:100% !important;
	overflow: hidden;
	z-index: -99999;
}
#showStat {
    margin-right: 15vw;
	cursor: pointer;
}
#showStat:hover {
    color: red;
}
canvas:not(#timelineChart){
  position: fixed;
  top: 0vh;
  left: 0vw;
  min-width: 100vw;
  min-height: 100vh;
  z-index: -1;
  overflow:hidden;
  opacity: 0.75;
}
div#ghnhStat.mobile-portrait {
    transform: rotate(0deg);
    min-width: 100vw;
    min-height: auto;
    position: fixed;
    top: 0;
    left: 0;
}
div#ghnhStat span#statClose {
    top: 0vh !important;
    max-width: 6vh;
    max-height: 8vw;
    right: 15px;
}
div#ghnhStat.mobile-portrait span#statClose {
    top: 0vh !important;
    max-width: 6vh;
    max-height: 8vw;
    right: 15px;
}
#timelineChart {
	position: fixed;
	top: 0vh;
	left: 0vw;
	max-width: 100% !important;
	height: auto !important;
}
.mobile {
  display:none !important;
}
.desktop {
  opacity:0.75;
}
.canvas-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#stoneVideo {
position:fixed;
	/*object-fit: contain;*/
	/*       object-fit: fill; */
	object-fit: cover;
	width:100%;
	height:100%;
}
	
video::-webkit-media-controls {
    display:none !important;
  }
/* First image (Logo. Full height) 
*/
.menu-head-logo {
	background: url('/assets/themes/ghosthouse/images/logo.png');
	background-repeat: no-repeat;
	background-position:left top;
	background-size: auto 80px;
	min-height:80px;
}
p#menu-titel {
    font-size: x-large;
    padding-left: 4vw;
    line-height: 4vh;
}
i#search-icon {
    padding-left: 3.4vw;
    font-size: x-large;
}
.bgmenusidebar {
	background: url('/assets/themes/ghosthouse/images/pergament-bg.png');
	background-repeat: repeat-y;
	background-position:right top;
	background-size: 100% 100%;
}
/* First image (Portfolio) */
.bgimg-1 {
    background: url(/assets/themes/ghosthouse/images/parallax2.png);
    min-height: 100vh;
    z-index: -5;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
.bgimg-2 {
	/*background: url('/assets/themes/ghosthouse/images/parallax1.jpg');*/
	min-height: 100vh;
}
/* ============================================================================================================================*/

.evActiveEvents {
	animation: ghostOneHover 5.5s infinite;
}
.evFutureEvents {
	animation: ghostTwoHover 6.0s infinite;
}
.evPreviousEvents {
	animation: ghostThreeHover 6.5s infinite;
}
#evCatList {

}
.evActiveEvents, .evFutureEvents, .evPreviousEvents {
    display: flex;
    align-items: center;
    height: auto;
    width: 89vw;
    margin: 30px 0 0 0;
    border-radius: 20px;
}
.evActiveEvents {
    background: rgba(0, 255, 0, 0.4);
}
.evFutureEvents {
    background: rgba(159, 0, 255, 0.4);
}
.evPreviousEvents {
    background: rgba(255, 0, 0, 0.4);
}
/* Container für das Icon + Text */
.evIcon-Container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    min-width: 60px;
    height: 100%;
    text-align: center;
    margin: 0 2px 0 2px;
}

/* Icons innerhalb des Containers */
.evIcon i {
    font-size: xxx-large; /* Icon-Größe */
}

/* Text direkt unter dem Icon */
.evIconTxt {
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px;
}

/* Spiegelung für zukünftige Events */
.evFutureEvents .fa-clock-rotate-left {
    transform: scaleX(-1); /* Horizontal spiegeln */
}

/* evCalendar */
.evContainer {
    min-height: 112px;
    background-color: #00000069;
    padding: 10px;
    min-width: 280px;
    float: left;
    border-radius: 15px;
    border: 1px solid white;
}
.evDateBox-Container {
    float: left;
    margin: 5px 0 0 0;
}
.evDateBox {
    background-color: #c0504d;
    width: 60px;
    height: 60px;
    border: 2px solid #000;
    border-radius: 10px;
    z-index: 1;
    margin: -6px 0 0 0;
}
.evDateBox h1 {
    color: #fff;
    font-size: small !important;
    text-align: center;
    padding: 0px 0px 0px 0px;
    margin-top: 2px;
}
.evDayBox {
    background-color: #fff;
    width: 60px;
    height: 50px;
    border: 2px solid #000;
    border-radius: 10px;
    margin: -24px 0px 0px 0px;
    z-index: 2;
    color: black;
    text-align: center;
}
div.evDayBox h2 {
    font-size: smaller;
}
div.evDayBox h3 {
    font-size: xx-small;
    margin-top: -10px;
}
.evPromo-title {
    float: left;
    padding: 0px 0px 0px 5px;
    margin: -5px 0 0 0;
}
.evPromo-title h1 {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0;
    padding: 5px 0px 0px 0px;
}
.evPromo-title h2 {
    font-size: small;
    padding: 0px 0px 0px 0px;
    line-height: 0;
}
.evPromo-title h3 {
    font-size: 16px;
    margin: 0;
    padding: 0px 0px 0px 0px;
}
.evPromo-title p {
    font-size: 14px;
    padding: 0px 0px 0px 0px;
    margin: 0;
}
.ghost1{
	animation: ghostHoverS1 4.5s infinite ease-in-out 2s;
}
.ghost2{
	animation: ghostHoverS2 5s infinite ease-in-out 2s;
}
.ghost3{
	animation: ghostHoverS3 5.5s infinite ease-in-out 2s;
}
@keyframes ghostOneHover {
  from {-webkit-transform: translateY(10px);}
  50% {-webkit-transform: translateY(0);}
  to {-webkit-transform: translateY(10px);}
}

@keyframes ghostTwoHover {
  from {-webkit-transform: translateY(10px);}
  50% {-webkit-transform: translateY(0);}
  to {-webkit-transform: translateY(10px);}
}

@keyframes ghostThreeHover {
  from {-webkit-transform: translateY(10px);}
  50% {-webkit-transform: translateY(0);}
  to {-webkit-transform: translateY(10px);}
}
/* Keyframes für sanfte Bewegung */
@keyframes ghostHoverS1 {
    0%, 100% { transform: translateY(10px) }
    50% { transform: translateY(0) }
}

@keyframes ghostHoverS2 {
    0%, 100% { transform: translateY(10px); }
    50% { transform: translateY(0); }
}

@keyframes ghostHoverS3 {
    0%, 100% { transform: translateY(10px); }
    50% { transform: translateY(0); }
}
@media screen and ((max-width: 400px) or (max-height: 400px)) {
	#evFloatingBox {
		position: fixed;
		top: 10%;
		left: 0;
		color: white;
		border-radius: 10px;
		transition: opacity 0.3s ease-in-out;
		animation: ghostOneHover 7s infinite;
		opacity: 0;
		height: 85vh;
		width: 95vw;
	}
	#evCatList {

	}
	h1 {
        font-size: 15px !important;
		font-weight: bold;
	}
	/* Container für das Icon + Text */
	.evIcon-Container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 60px;
		min-width: 60px;
		height: 100%;
		text-align: center;
		margin: 10px 2px 0 2px;
	}
	/* Icons innerhalb des Containers */
	.evIcon i {
		font-size: xx-large; /* Icon-Größe */
	}

	/* Text direkt unter dem Icon */
	.evIconTxt {
		font-size: 10px;
		font-weight: bold;
		margin-top: 5px;
	}
}
/* ============================================================================================================================*/
/*Halloween Countedown*/
.daysUntilHalloween {
    position: absolute;
    background-color: #00000096;
    border-radius: 0 0  10px  10px;
    width: 320px;
    top: 0px;
    height: 45px;
	padding-top: 6px;
    float: left;
    font-size: 14px;
    font-weight: bold;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: #00ff00;
    text-shadow: 2px 2px 4px #000000;
    font-family: 'Creepster', cursive;
    animation: spooky 3s infinite alternate;
}

@keyframes spooky {
  0% {
    text-shadow: 2px 2px 4px #000000;
  }
  100% {
    text-shadow: 0px 0px 10px #7af73b, 0px 0px 20px #7af73b, 0px 0px 30px #7af73b, 0px 0px 40px #7af73b;
  }
}
@media only screen and (max-width: 400px) and (orientation: portrait){
  #timer.daysUntilHalloween {
	  width: 220px;
	  transform: translateX(-90%);
  }
}

/* ============================================================================================================================*/
/* Info Box*/
table.evStatInfo {
    width: 320px;
}
td.evStatInfoLbl {
    width: 270px;
    text-align: right;
    margin-right: 5px;
    height: 40px;
    color: white;
    text-wrap-mode: nowrap;
	font-size: 14px;
}
td.evStatData {
    width: 100px;
    margin: 0 5px;
    height: 40px;
    text-align: right;
	font-size: 14px;
}

/*  Events display */
#evFloatingBox {
    position: fixed;
    top: 10%;
    left: 0;
    color: white;
    border-radius: 10px;
    transition: opacity 0.3s ease-in-out;
    animation: ghostOneHover 7s infinite;
    opacity: 0;
    height: 85vh;
    width: 95vw;
    margin-left: 3.5vw;
}
.evListContainer {
	max-width: 790px;
	height: 380px;
	padding: 0px 0;
	position: relative;
	width: 85vw;
}

.calendar-container {
    float: left;
    position: relative;
    margin: 0px auto;
    height: 100%;
    background: rgba(159, 0, 255, 0.4);
    font: 13px Helvetica, Arial, san-serif;
    display: inline-block;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}
/*  Calendar wrapper */
.calendar-container:after{
    clear:both;
}
.calendar {
    display: table;
}
.events-container {
	float: left;
	margin-left: 10px;
	overflow-y: auto;
	overflow-x: hidden;
}
.events-container:after{
    clear:both;
}
.event-card {
    padding: 10px 0;
    width: 350px;
    height: 110px;
    margin: 12px auto;
    display: block;
    background: rgba(159, 0, 255, 0.4);
    border-left: 10px solid #02ff0299;
    border-radius: 3px;
    box-shadow: 3px 8px 16px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -moz-box-shadow: 3px 8px 16px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    -webkit-box-shadow: 3px 8px 16px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.event-stat, .event-titel, .event-mode, .event-time, .event-entry, .event-cancelled {
    display: inline-block;
    padding: 0 10px;
    font-size: large;
}
.event-time, .event-mode {
    color: #ffd600;
    text-align: right;
    font-size: 14px;
    margin: 15px 0 15px 0;
}
.event-entry i {
	transform: rotate(140deg);
}
.event-titel {
    padding-right: 0;
    text-align: left;
    width: 100%;
}
.event-cancelled {
    color: #FF1744;
    text-align: right;
}


/* Calendar Header */
.year-header {
    background-color: #0000007d;
    font-family: Helvetica;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    height: 40px;
    text-align: center;
    position: relative;
    color: #fff;
    border-top-left-radius: 3px;
}
.year-header span { 
    display:inline-block; 
    font-size: 20px;
    line-height:40px; 
}
.left-button, .right-button { 
    cursor: pointer;
    width:28px; 
    text-align:center; 
    position:absolute; 
} 
.left-button { 
    left:0; 
    -webkit-border-top-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    border-top-left-radius: 5px; 
} 
.right-button { 
    right:0; 
    top:0; 
    -webkit-border-top-right-radius: 5px; 
    -moz-border-radius-topright: 5px; 
    border-top-right-radius: 5px; 
} 
.left-button:hover,
.right-button:hover { 
    background: black;
}


/* Days/months tables */
.days-table, .dates-table, .months-table { 
    border-collapse:separate; 
    text-align: center;
	margin: 0 auto;
} 
.day {
    height: 26px;
    width: 26px;
    padding: 0px 7px;
    line-height: 26px;
    border: 2px solid transparent;
    text-transform: uppercase;
    font-size: 12px;
    color: #ffffff;
    font-weight: bold;
}
.month {
	cursor: default;
	height: 26px;
	width: 26px;
	padding: 0 2px;
	padding-top: 10px;
	line-height: 26px;
	text-transform: uppercase;
	font-size: 14px;
	color: #ffffff;
	transition: all 250ms;
	font-weight: bold;
}
.active-month {
    font-weight: bold;
    font-size: 26px !important;
    color: black !important;
    text-shadow: 0 1px 4px RGBA(255, 50, 120, .8);
    text-decoration: none !important;
}
.month:hover {
    color: #FF1744;
    text-shadow: 0 1px 4px RGBA(255, 50, 120, .8);
}

/*  Dates table */
.table-date {
	cursor: default;
	color: #80ff00;
	height: 26px;
	width: 26px;
	font-size: 15px;
	padding: 6px 9px 6px 9px;
	line-height: 26px;
	text-align: center;
	border-radius: 50%;
	border: 2px solid transparent;
	transition: all 250ms;
	font-weight: bold;
}
.table-date.nil {
	height: 35px;
}
.table-date:not(.nil):hover { 
    border-color: #FF1744;
    box-shadow: 0 2px 6px RGBA(255, 50, 120, .9);
}
.event-date {
    border-color:#52A0FD;
    box-shadow: 0 2px 8px RGBA(130, 180, 255, .9);
}
.active-date {
	background: url('/assets/themes/ghosthouse/images/fire-pumpkin.gif') #ff000094;
	box-shadow: 0 2px 20px RGBA(255, 50, 120, .9);
	color: black;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: -13px;
	background-position-x: -2px;
}
.active-date span{
   font-weight: bold;
   margin-bottom: -24px;
}
.event-date.active-date {
	box-shadow: 0 2px 8px RGBA(80, 255, 0, 0.9);
	background: url('/assets/themes/ghosthouse/images/fire-pumpkin.gif') #44ff005e;
	background-size: cover;
	background-repeat: no-repeat;
	background-position-y: -13px;
	background-position-x: -2px;
}
.mActiv {
    color: #00ff64;
    font-weight: bolder;
    font-size: 14px;
    text-decoration: underline;
}
/* Tablets and smaller */
@media only screen and (max-width: 780px) {
	.evListContainer {
		max-width: 790px;
		height: 320px;
		padding: 0px 0;
		position: relative;
		width: 95vw;
	}
	.events-container {
		float: left;
		height: 100%;
		margin: 0 auto;
		padding: 0;
		display: block;
		left: 0;
		border-radius: 3px;
		position: relative;
		overflow-y: auto;
		overflow-x: hidden;
	}

    .calendar-container {
        float: left;
        padding: 0;
        margin: 0 auto;
        margin-right: 0;
        display: block;
        left: 0;
        border-radius: 3px;
        box-shadow: 3px 8px 16px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        -moz-box-shadow: 3px 8px 16px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
        -webkit-box-shadow: 3px 8px 16px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    }
    .events-container, .year-header, .calendar-container {
        width: 316px;
    }
    .months-table {
        display: block;
        margin: 0 auto;
        width: 320px;
    }
    .event-card {
        width: 300px;
		height: 100px;
  		margin: 6px auto;
    }
    .day {
        padding: 0 4px;
    }
	.month {
		display: inline-block;
		padding: 10px 0px;
		font-size: 10px;
	}
	.active-month {
		font-size: 20px;
	}
	.table-date.nil {
		height: 20px;
		width: 20px;
	}
	.table-date {
		width: 20px;
		height: 20px;
		line-height: 15px;
		padding: 8px 6px 8px 6px;
	}
	.event-titel, .event-entry, .event-stat, .event-cancelled {
		font-size: 14px;
	}
	.event-mode, .event-time {
		font-size: 10.5px;
	}
}

/* Small phone screens */
@media only screen and (max-width: 400px) {	
	.evListContainer {
		max-width: 320px;
		height: 320px;
		padding: 0px 0;
		position: relative;
		width: 95vw;
	}
    .events-container, .year-header, .calendar-container {
        width: 320px;
    }
	.events-container {
		float: left;
		height: 70%;
		margin: 0 auto;
		padding: 0;
		display: block;
		left: 0;
		border-radius: 3px;
		position: relative;
		overflow-y: auto;
		overflow-x: hidden;
	}
    .months-table {
        display: block;
        margin: 0 auto;
        width: 320px;
    }
    .event-card {
        width: 300px;
		height: 100px;
  		margin: 6px auto;
    }
    .day {
        padding: 0 4px;
    }
	.month {
		display: inline-block;
		padding: 10px 0px;
		font-size: 12px;
	}
	.active-month {
		font-size: 20px;
	}
	.table-date.nil {
		height: 26px;
		width: 20px;
	}
	.table-date {
		width: 20px;
		height: 20px;
		line-height: 15px;
		padding: 5px 4px 5px 4px;
	}
	.event-titel, .event-entry, .event-stat, .event-cancelled {
		font-size: 14px;
	}
	.event-mode, .event-time {
		font-size: 10.5px;
	}
} 
/* ============================================================================================================================*/
/* Third image (Contact) */
.bgimg-3 {
	background: url("/assets/themes/ghosthouse/images/wood-bg-rotated-wtb.png");
	min-height: 100vh;
	background-size: 99vw 90%;
	background-repeat: no-repeat;
	background-position: center center;
}
.content-head{
	display:block;
	width: 100%;	
}
.show-highlighting{ 
	background-color: #ff006f;
}
.show-pointer{
	cursor:pointer;
	text-decoration:underline;
	font-weight:bolder;
}
.modal-80{
	min-width: 80vw;
    min-height: 80vh;
}
.vcard-content {
    max-height: 95vh;
}
.vcard {
    display: block;
    border: 0px solid black;
    max-width: 39vw;
    max-height: 62vh;
    width: 39vw;
    height: 62vh;
    float: left;
    min-width: 290px;
    margin: 5px;
    overflow-y: hidden;
    word-wrap: break-word;
    overflow-x: hidden;
	cursor:pointer;
}

.vcard-modal {
    border: 0px solid black;
    max-width: 80vw;
    max-height: 80vh;
    width: 80vw;
    height: 70vh;
    min-width: 290px;
    word-wrap: break-word;
    padding-left: 5vw;
	padding-right: 5vw;
}
.vcard-modal-bg {
    background: url(/assets/themes/ghosthouse/images/wood-bg-rotated-wtb.png);
    min-width: 80vw;
    min-height: 85vh;
    background-size: 80vw 94%;
    background-repeat: no-repeat;
    background-position: center center;
    padding-top: 5vh;
}

.vcard-modal .vcardTitel h2{
  font-size: 25px;
}

.vcardTitel {
	width: 100%;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	color:#FFFF00;
}

.vcard-modal .vcardImg {
    float: left;
    margin: 3px 12px 3px 0px;
    border: 0px solid #000000;
    width: 25vw;
    min-width: 280px;
	
}
.vQRImg{
    float: left;
    width: 25%;
    height:25%;
    min-width: 100px;
    min-height: auto;
    margin-right: 10px;
    margin-top: 10px;
}
.vQRTxt{
    font-size: x-small;
    color: #FFFFFF;
}
.vcardImg {
    float: left;
    margin: 3px 12px 3px 0px;
    border: 0px solid #000000;
    width: 17vw;
    min-width: 280px;
}

.vcard-modal .vcardImg img {
    width: 23vw;
    height: auto;
    min-width: 240px;
}

.vcardImg img {
    width: 15vw;
    height: auto;
    min-width: 240px;
}

.vcardIcons {
    position: relative;
    float: left;
    top: 5px;
    right: 0;
    height: 100px;
    display: block;
	color:#FFFF00;
}

.vcardIcons a {
  display: block;
  padding: 5px;
}

.vcard-modal .vcardText {
	font-size: 18px;
}

.vcardText {
    margin-left: 10px;
    word-wrap: normal;
	font-size: 14px;
	color: #FFFFFF;
}

/* ============================================================================================================================*/

/* Third image (Contact) */
.bgimg-4 {
  min-height: 100vh;
  opacity:0.9;
}
/* ============================================================================================================================*/
#FormBG {
    background: url('/assets/themes/ghosthouse/images/pergament-bg180grad.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 50px;
    color: black;
    background-position: center;
}
#FormPic {
    margin-top: 16px;
}
#Mode {
    max-width: 360px;
    margin: 0 auto;
}
#myTicketWizardStart,
#myTicketFields_Age,
#myTicketFields_Owner,
#myTicketFields_Event,
#myTicketFields_Adult,
#myTicketFields_Kids,
#myTicketFields_PWQR,
#myTicketFields_MSG{
    padding-left: 50px;
}
#Ticket_IDC {
    max-width: 120px;
    min-width: 120px;
}
#Ticket_IDA {
    margin-left: 6px;
}
#Ticket_IDA ,
#Ticket_IDT {
    max-width: 90px;
    min-width: 90px;
}
#TicketID{
    margin: 0 auto;
    max-width: 420px;
}
#TicketIDExplain {
    background-position-x: 10px;
    background-image: url('/assets/themes/ghosthouse/images/Ticket-ID-explain.png');
    height: 100px;
    background-repeat: no-repeat;
    background-size: 360px 100px;
}
#myTPW {
    margin: 0 auto !important;
    max-width: 300px;
    min-width: 300px;
}
.myTicket{
    max-height: 60vh;
    max-width: 85vw;
}
.myTicketCode{/*=======================================================*/
/* Pfeile für die Navigation */
.prevPage, .nextPage {
    position: absolute;
    bottom: 20px;         /* Positionierung am unteren Rand */
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.prevPage {
    left: 10px; /* Linker Pfeil */
}

.nextPage {
    right: 10px; /* Rechter Pfeil */
}

/* Hover-Effekt für die Pfeile */
.prevPage:hover, .nextPage:hover {
    opacity: 1;
}

    display: block;
    width: 200px;
    height: 200px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 0%);
}

.lblTPwd{
    text-align: right;
    margin-top: 1.2vh;
}
#tpw,
#TPwd {
	font-family: monospace;
	font-size: x-large;
}
#adult, #kids {
   max-with: 25% !important;
}

input[type="text"][name="FirstName"]:valid,
input[type="text"][name="LastName"]:valid,
input[type="text"][name="Phone"]:valid,
input[type="number"][name="adult"]:valid,
input[type="number"][name="kids"]:valid,
input[type="text"][name^="AFName"]:valid,
input[type="text"][name^="KFName"]:valid,
input[type="email"][name="Email"]:valid,
input[type="text"][name="TPwd"]:valid,
input[type="text"][name="tpw"]:valid,
textarea[name="Message"]:valid,
input[type="text"][name="FirstName"].valid,
input[type="text"][name="LastName"].valid,
input[type="text"][name="Phone"].valid,
input[type="number"][name="adult"].valid,
input[type="number"][name="kids"].valid,
input[type="text"][name^="AFName"].valid,
input[type="text"][name^="KFName"].valid,
input[type="email"][name="Email"].valid,
input[type="text"][name="TPwd"].valid,
input[type="text"][name="tpw"].valid,
textarea[name="Message"].valid
{
  background-color: #c3e6cb !important;
}

.input-text:hover,
.input-text:focus,
.textbox:hover,
.textbox:focus{
	background-color: #ffffff;
}

.input-text{
    background-color: #f1c0c0;
    min-width: 95%;
    letter-spacing: 3px;
}
.textbox-smaller{
    max-width: 45vw;
    min-width: 45vw;
    max-height: 20vh;
    min-height: 20vh;
    overflow-x: hidden;
    overflow-y:auto;
    background-color: #f1c0c0;
    letter-spacing: 3px;
}
.textbox{
    max-width: 53.8vw;
    min-width: 53.8vw;
    max-height: 20vh;
    min-height: 20vh;
    overflow-x: hidden;
    overflow-y:auto;
    background-color: #f1c0c0;
    letter-spacing: 3px;
}
/* ============================================================================================================================*/

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 68px;
  height: 30px;
  margin: 5px;
}
.lbl {
	margin-top: 1vh;
}
.fields {
  min-height:10vh;
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e72020;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  left: 4px;
  bottom: 4px;
  background-image: url('/assets/themes/ghosthouse/images/pumpkin-mini.png');
 background-size: 30px 30px;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #00FF00;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-image: url('/assets/themes/ghosthouse/images/fire-pumpkin.gif');
 background-size: 30px 30px;
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* ============================================================================================================================*/
#select-container {
  height: 30px;
  position: relative;
  width: 100%;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

#event {
  border: 1px solid #00b456;
  border-radius: 20px;
  background: linear-gradient(to bottom, #2c0047 0%, #2c0047 100%);
  color: #FFF;
  cursor: pointer;
  height: 100%;
  outline: none;
  padding: 0 0 0 20px;
  width: 100%;
}
#event option {
  background: #2c0047;
  color: #ffffff;
}
#event option:nth-child(2) {
  background: #2c0047;
}
#event option:nth-child(3) {
  background: #2c0047;
}
#event option:nth-child(4) {
  background: #2c0047;
}
#event option:nth-child(5) {
  background: #2c0047;
}
#event option:nth-child(6) {
  background: #2c0047;
}

/* ============================================================================================================================*/
#loading-center-absolute {
    position: absolute;
    left: 50vw;
    top: 50vh;
    height: 70vh;
    width: 40vw;
    transform: translate(-50%,-50%);
}
#loading-center-absolute #flyingSkeleton {
    position: absolute;
    top: 21%;
    left: 50%;
    transform: translate(-52%, 30%);
}
#loading{
    background: -webkit-linear-gradient(to top, #6e0270 0%, #2c0047 80%);
    background: -moz-linear-gradient(to top, #6e0270 0%, #2c0047 80%);
    background: -ms-linear-gradient(to top, #6e0270 0%, #2c0047 80%);
    background: -o-linear-gradient(top, #6e0270 0%, #2c0047 80%);
    background: linear-gradient(to top, #6e0270 0%, #2c0047 80%);
    height: 100%;
    width: 100%;
    position: fixed;
    margin-top: 0;
    top: 0;
	left: 0;
    z-index: 9999;
}
#loader {
    position: fixed;
    bottom: 5vh;
    left: 10%;
    width: 80%;
    height: 5px;
    background-color: #ddd;
    z-index: 9999;
}

#loader-progress {
	width: 0%;
	height: 100%;
background-color: #00bcd4;
}

#loader-img {
}
.loaded {
	display: none;
}
/* ============================================================================================================================*/
#skipIntro{
    position: absolute;
	border-radius: 15px;
    top: 52%;
    left: 49%;
	font-size: 16px;
	min-height:30px;
	min-width:100px;
    transform: translate(-50%, 20%);
	margin-top: 5vh;
}
#skipIntro a{
    position: absolute;
	border-radius: 10px;
    left: 50%;
	top:50%;
	width: 100%;
	text-align:center;
	vertical-align:bottom;
	height:30px;
    transform: translate(-50%, -35%);
}
.opacity{
	opacity: 0;
}
.onhoverFadein {   
    background:red;
    opacity: 0;
    -webkit-transition: opacity 1s ease-in-out;
       -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
         -o-transition: opacity 1s ease-in-out;
            transition: opacity 1s ease-in-out;
}

.onhoverFadein:hover {
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 1;

}
#playControl:hover,
#skipIntro:hover{
	cursor:pointer;
	color: #FFFFFF;
	background-color: rgba(255,0,0,0.75);
	box-shadow: #FFF 0px 0px 15px, #FFF 0px 0px 20px, #FFF 0px 0px 35px, #FF2D95 0px 0px 45px, #FF2D95 0px 0px 50px, #FF2D95 0px 0px 60px, #FF2D95 0px 0px 70px, #FF2D95 0px 0px 85px;
}
#playControl {
    position: absolute;
	border-radius: 50px;
    left: 49%;
    top: 45%;
    height: 100px;
    width: 100px;
    transform: translate(-50%,-50%);
}
#enter{
	height: 100px;
	width: 100px;		
	}
.absCenter{
	top: 25%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25%;
    margin: auto;
    color: white;
    font-weight: bolder;
}

#Intro{    
	background-color:black;
    height: 100%;
    width: 100%;
    position: fixed;
    margin-top: 0;
    top: 0;
	left: 0;
    z-index: 9998;
}
#shadowVideo{
	position:absolute;
    left: 49%;
    top: 45%;
	top:0px;
	min-height: 100vh;
	width:auto;
    transform: translate(-50%,0%);
	object-fit: fill;
}
#loading-center {
    width: 100%;
    height: 100%;
    position: relative;
}
/* ============================================================================================================================*/
.img-fluid {
    max-width: 100%;
    height: auto;
	margin-left: 0.1vw !important;
	animation: ghostOneHover 2.5s infinite;
}
.myImgSliderSmall {
	vertical-align:middle !important;
}
.myImgSliderSmall img{
	max-width:18vw !important;
	height:auto;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  max-width: 120px;
	width:12vw;
  height: 74% !important;
  user-select: none;
}
.SkelArrow {
	max-width: 100px;
	width:10vw;
	height: 50px;
}
/* Position the "next button" to the right */
.next, .prev,
.next img, .prev img{
  position: absolute;
  top: 50%;
  transform: translateY(-57%);
}
.next,
.next img{
  right: 0px;
}
.prev,
.prev img{
  left: 0px;
}
/* On hover, add a black background color with a little bit see-through */
.next img:hover {
	
}
.prev:hover {
	
}

.my-slider {
    position: relative;
    min-width: 70vw;
    min-height: 50vh;
    background-image: url('/assets/themes/ghosthouse/images/wood-board-wh.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
.slider-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.wb-wh-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/assets/themes/ghosthouse/images/wood-board-wh-overlay.png');
	background-repeat: no-repeat;
	background-size: contain;
    background-position: center center; /* calc(50% + 50px);*/
	z-index:1000;
}
.reaper-frontal{
    background-image: url(/assets/themes/ghosthouse/images/reaper-frontal-724x1174.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 50vh;
}

.reaper-bg::after {
    background-image: url('/assets/themes/ghosthouse/images/spiderweb-topl.png'), url('/assets/themes/ghosthouse/images/spiderweb-topr.png');
    background-repeat: no-repeat;
    background-position: left top, right top;
    background-size: 35vh;
    position: relative;
    z-index: 5;
}

.reaper-bg{
    content: "";
    background-image: url('/assets/themes/ghosthouse/images/reaper-frontal-bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 150% auto;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: -1;
}

.sliderCaption{
  position: absolute; /* Positionierung relativ zum Container */
  bottom: -5vh; /* Setze den Abstand zum oberen Rand auf 50% der Höhe des Containers */
  left: 50%; /* Setze den Abstand zum linken Rand auf 50% der Breite des Containers */
  transform: translate(-50%, 0%); /* Zentriere das Bild sowohl horizontal als auch vertikal */
  width:auto;
}

.my-slider .slider-item .slider-img{
	position: absolute;
    top: 49%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    max-height: 50%;
    max-width: 50%;
}

.lskellhand-left {
  position: absolute;
  top: 0;
  background: transparent url('/assets/themes/ghosthouse/images/lskell-hand.png') no-repeat scroll 0% 100%; /* Hintergrundbild des Overlay-Bildes */
  width:100%;
  min-height:120%;
  left: 0; /* Abstand des Overlay-Bildes von der linken Seite */
    z-index: 9998;
}
.rskellhand-right {
  position: absolute;
  top: 0;
  width:100%;
  min-height:120%;
  background: transparent url('/assets/themes/ghosthouse/images/rskell-hand.png') no-repeat scroll 100% 100%; /* Hintergrundbild des Overlay-Bildes */
  left: 0; /* Abstand des Overlay-Bildes von der rechten Seite */
    z-index: 9998;
}


/* ============================================================================================================================*/
@keyframes ghosting {
  0% {
    opacity:0;
  }
  45% {
	  opacity:1;
  }
  50% {
	  opacity:1;
  }
  55% {
	  opacity:1;
  }
  100% {
	  opacity:0;
  }
}
#modalStatDisplay {
    background-image: url('/assets/themes/ghosthouse/images/parallax2-iphone-landscape.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#modalDisplay{
	background-image: url("/assets/themes/ghosthouse/images/stonewall.png");
	background-size: 100%;
	background-position: fixed;
}
.headline-events {
	color: #FFFFFF;
	text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
	animation: ghosting 15s infinite;
	font-size: 30px;
	margin-bottom: 3vh;
}
.rowResImgGrid{
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	padding-left: 6vw;
	padding-right: 2vw;
}

.colResImgGrid{
	-ms-flex: 22.5%; /* IE10 */
	flex: 22.5%;
	max-width: 22.5%;
}

.colResImgGrid img{
	vertical-align: middle;
	width: 100%;
	-webkit-box-shadow: 0px 0px 20px 20px #18b417; 
	box-shadow: 0px 0px 20px 20px #18b417;
}
.zoom-out {
  transform: scale(0.5) translateZ(50%);
}
.colResImgGrid img:hover{
	opacity:0.75;
	-webkit-box-shadow: 0px 0px 20px 20px #00FF00; 
	box-shadow: 0px 0px 20px 20px #00FF00;
}
.fixed-colResImgGrid {
  position: fixed;
  top: 25vh;
  right: 5vw;
  bottom: 64px;
  max-width: 10%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  box-sizing: border-box;
}

.fixed-colResImgGrid a{
	display: block;
	width: 100%;
	/*		Top  Right   Bottom    Left*/
	margin: 15px 5px    15px       5px;
	cursor:pointer;
	min-width: 30px;
	height: 30px;
	color:white;
	font-weight: bolder;
}

.selpage{
	border-radius:50%;
	background-color:#18b417 !important;
	-webkit-box-shadow: 0px 0px 10px 10px #18b417; 
	box-shadow: 0px 0px 10px 10px #18b417;	
	color:#000000;
	font-weight: bolder;
}
.SkelArrow{
	max-width:100%;
	height:auto;
	border:none;
}
.fixed-colResImgGrid a:hover{
	border-radius:50%;
	background-color:#FF00FF;
	-webkit-box-shadow: 0px 0px 10px 10px #18b417; 
	box-shadow: 0px 0px 10px 10px #18b417;
}


.collage {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.collage img {
  width: calc(25% - 10px);
  height:auto;
  margin-bottom: 20px;
}
/* ============================================================================================================================*/
.box-shadow-white{
	border-radius:2%;
	-webkit-box-shadow: 5px 5px 50px 20px #FFFFFF; 
	box-shadow: 5px 5px 50px 20px #FFFFFF;
}
.box-shadow-green{
	border-radius:2%;
	-webkit-box-shadow: 0px 0px 50px 50px #18b417; 
	box-shadow: 0px 0px 50px 50px #18b417;
}
.spiderweb-topr {
  background-image: url("/assets/themes/ghosthouse/images/spiderweb-topl.png");
  background-repeat: no-repeat;
  background-position:right top;
  background-size: 35vh;
}
.spiderweb-top {
	background-image: url("/assets/themes/ghosthouse/images/spiderweb-topl.png"),url("/assets/themes/ghosthouse/images/spiderweb-topr2.png"),url("/assets/themes/ghosthouse/images/fox-background-with-Moon.png"),url("/assets/themes/ghosthouse/images/skull.gif");
	background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;
	background-position:left top, right top, left bottom,right bottom;
	background-size: 35vh,40vh, 30vh, 50vh;
}
.spiderweb-magenta {
  background-image: url("/assets/themes/ghosthouse/images/web-magenta.png");
}
.spiderweb-grey {
  background-image: url("/assets/themes/ghosthouse/images/web-grey.png");
}
/* ============================================================================================================================*/

.pergament {
	display: grid;
	grid-assets/themesate-columns: 100px 1fr 100px;
	grid-assets/themesate-rows: 100px 1fr 100px;
	margin-right: 0;
	margin-left: 0;
}

.pergament > div {
  border: 0px solid black;
}

.top {
  grid-row: 1;
  grid-column: 2;
  height: 101px;
}
.bg-top {
	background-image: url("/assets/themes/ghosthouse/images/pergament-top.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: bottom center !important;
}

.bottom {
  grid-row: 3;
  grid-column: 2;
  height: 101px;
}
.bg-bottom {
	background-image: url("/assets/themes/ghosthouse/images/pergament-bottom.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: top center !important;
}

.left {
  grid-row: 2;
  grid-column: 1;
  width: 101px;
}
.bg-left {
	background-image: url("/assets/themes/ghosthouse/images/pergament-left.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: center right !important;
}

.right {
  grid-row: 2;
  grid-column: 3;
  width: 101px;
}
.bg-right {
	background-image: url("/assets/themes/ghosthouse/images/pergament-right.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: center left !important;
}

.center {
	grid-row: 2;
	grid-column: 2;
	min-height: 80vh;
}
.bg-center {
	padding-left: 5vw;
	padding-right: 5vw;
	padding-top: 15vh;
	padding-bottom: 15vh;
	background-image: url("/assets/themes/ghosthouse/images/pergament-rolle-bg.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: bottom left !important;
}

.top.left {
  grid-row: 1;
  grid-column: 1;
}
.bg-tl {
	background-image: url("/assets/themes/ghosthouse/images/pergament-top-left.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: bottom right !important;
}

.top.right {
  grid-row: 1;
  grid-column: 3;
}
.bg-tr {
	background-image: url("/assets/themes/ghosthouse/images/pergament-top-right.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: bottom left !important;
}

.bottom.left {
  grid-row: 3;
  grid-column: 1;
}
.bg-bl {
	background-image: url("/assets/themes/ghosthouse/images/pergament-bottom-left.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: top right !important;
}

.bottom.right {
  grid-row: 3;
  grid-column: 3;
}
.bg-br {
	background-image: url("/assets/themes/ghosthouse/images/pergament-bottom-right.png");
	background-repeat: no-repeat;
	background-size: 100% 100% !important;
	background-position: top left !important;
}

/* ============================================================================================================================*/
  
.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}
/*======== sound system controller ============*/

/* SOUND BUTTON CSS */
#jingle_bell{
    position: relative;
}
.sound_toggle_btn, .volume_toggle_btn {
    display: inline-block;
    cursor: pointer;
    padding-right: 20px;
    margin-top: 1vh;
}
.snd-switch {
    padding: 4px 8px;
    position: absolute;
    top: 2px;
    right: 8vw;
    z-index: 2000;
    border-radius: 5px;
}

.sound_toggle_btn span , .volume_toggle_btn span{
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    font-size: 14px;
    color: #2c0047;
    background: #f7ea66;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.17);

}
.sound_toggle_btn span:hover,.volume_toggle_btn span:hover  {
    box-shadow: 0px 0px 40px 4px rgba(249, 220, 4, .2);
    -webkit-box-shadow: 0px 0px 40px 4px rgba(249, 220, 4, .2);
    -moz-box-shadow: 0px 0px 40px 4px rgba(249, 220, 4, .2);
    -o-box-shadow: 0px 0px 40px 4px rgba(249, 220, 4, .2);
}

/*======== Media control ============*/

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .colResImgGrid {
    -ms-flex: 40%;
    flex: 40%;
    max-width: 40%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .colResImgGrid {
    -ms-flex: 90%;
    flex: 90%;
    max-width: 90%;
  }
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 400px) {
    body {
        font-family: 'Griffy-Regular', sans-serif;
        font-size: larger;
        font-weight: bold;
    }
    .w3-large {
        font-size: 11px !important;
    }
    #loading-center-absolute {
    	position: absolute;
    	left: 50vw;
    	top: 50vh;
    	height: 25vh;
    	width: 50vw;
    	transform: translate(-50%,-50%);
    }
    #loader {
    	position: fixed;
    	bottom: -10vh;
    	left: 0;
    	width: 100%;
    	height: 5px;
    	background-color: #ddd;
    	z-index: 9999;
    }
    
    .colResImgGrid {
        -ms-flex: 80%;
        flex: 80%;
        max-width: 80%;
    }
    .fixed-colResImgGrid {
    	position: fixed;
    	top: 25vh;
    	right: 0vw;
    	bottom: 64px;
    	max-width: 20vw;
    	overflow-y: auto;
    	overflow-x: hidden;
    	padding: 20px;
    	box-sizing: border-box;
    }
    .my-slider {
    	position: relative;
    	min-width: 70vw;
    	min-height: 25vh;
    	background-image: url(/assets/themes/ghosthouse/images/wood-board-wh.png);
    	background-repeat: no-repeat;
    	background-size: contain;
    	background-position: center center;
    }

    .my-slider .slider-item .slider-img {
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -60%);
    	max-height: 60%;
    	max-width: 50%;
    }
	.vcard-modal {
		border: 0px solid black;
		max-width: 80vw;
		max-height: 90vh;
		width: 80vw;
		height: 85vh;
		min-width: 290px;
		word-wrap: break-word;
		padding-left: 5vw;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.vcard-modal-bg {
		background: url(/assets/themes/ghosthouse/images/wood-bg-rotated-wtb.png);
		min-width: 80vw;
		min-height: 85vh;
		background-size: 95vw 92vh;
		background-repeat: no-repeat;
		background-position: center center;
		padding-top: 4vh;
		padding-bottom: 5vh;
	}
    #FormPic {
        display: none !important;
    }
    #FormBG {
        padding: 10px;
    }
    #Mode {
        max-width: 360px;
        margin: 0 auto;
    }
    #myTicketWizardStart,
    #myTicketFields_Age,
    #myTicketFields_Owner,
    #myTicketFields_Event,
    #myTicketFields_Adult,
    #myTicketFields_Kids,
    #myTicketFields_PWQR,
    #myTicketFields_MSG {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .w3-large {
        font-size: 14px !important;
    }  
    h1 {
        font-size: 26px;
    }
    #Ticket_IDC {
        max-width: 90px;
        min-width: 90px;
    }
    #Ticket_IDA {
        margin-left: 6px;
    }
    #Ticket_IDA ,
    #Ticket_IDT {
        max-width: 70px;
        min-width: 70px;
    }
    #TicketID{
        margin: 0 auto;
        max-width: 360px;
    }
    #TicketIDExplain {
        background-position-x: 10px;
        background-image: url('/assets/themes/ghosthouse/images/Ticket-ID-explain.png');
        height: 100px;
        background-repeat: no-repeat;
        background-size: 280px 100px;
    }
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
    .wrapper {
    	background-image: url("/assets/themes/ghosthouse/images/stonewall.png");
    	background-size: 100%
    }
    #stoneVideo {
    	position: fixed;
    	/* object-fit: contain; */
    	/* object-fit: fill; */
    	object-fit: cover;
    	width: 100%;
    	height:auto !important;
    }
    
    .spiderweb-topr {
    	background-image: url("/assets/themes/ghosthouse/images/spiderweb-topl.png");
    	background-repeat: no-repeat;
    	background-position:right top;
    	background-size: 25vh;
    }
    .spiderweb-topl {
    	-moz-transform: scaleX(-1);
    	-o-transform: scaleX(-1);
    	-webkit-transform: scaleX(-1);
    	transform: scaleX(-1);
    	filter: FlipH;
    	-ms-filter: "FlipH";
    	background-image: url("/assets/themes/ghosthouse/images/spiderweb-topl.png");
    	background-repeat: no-repeat;
    	background-position:right top;
    	background-size: 25vh;
    }
    .textbox {
        max-width: 98%;
        min-width: 98%;
    }
    #FormPic {
        display: none !important;
    }
    #FormBG {
        padding: 10px;
    }
    #myTicketWizardStart,
    #myTicketFields_Age,
    #myTicketFields_Owner,
    #myTicketFields_Event,
    #myTicketFields_Adult,
    #myTicketFields_Kids,
    #myTicketFields_PWQR,
    #myTicketFields_MSG {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .w3-large {
        font-size: 14px !important;
    }  
    h1 {
        font-size: 26px;
    }
}

@media screen and (max-width: 768px) and (orientation: landscape) {
	#loading-center-absolute {
		position: absolute;
		left: 49%;
		top: 15%;
		height: 180px;
		width: 470px;
		transform: translate(-50%,-50%);
	}
	#loader {
	    position: fixed;
	    bottom: -50vh;
	    left: 10%;
	    width: 80%;
	    height: 5px;
	    background-color: #ddd;
	    z-index: 9999;
	}
	body {
	    font-family: 'Griffy-Regular', sans-serif;
	    font-size: larger;
	    font-weight: bold;
	}
	h1 {
	    font-size: 20px;
	}
	.snd-switch {
	    top: 10px;
	}
	.content {
	    padding-top: 0vh;
	    padding-bottom: 0vh;
	    padding-left: 7vw;
	    padding-right: 7vw;
	}
	.w3-third {
	    width: 100%;
	}
	.w3-large {
	    font-size: 10px !important;
	}
	.w3-xlarge {
	    font-size: 20px !important;
	}
	.w3-padding-64 {
	    padding-top: 45px !important;
	    padding-bottom: 45px !important;
	}
	.w3-padding-32 {
	    padding-top: 0px !important;
	    padding-bottom: 0px !important;
	}
	.w3-section, .w3-code {
	    margin-top: 0px !important;
	    margin-bottom: 0px !important;
	}
	#adult,#kids{
	    max-width:30% !important;
	}
	.input-text:not(#adult,#kids) {
	    background-color: #f1c0c0;
	    min-width: 95%;
	}
	.switch {
	    width: 40px;
	    height: 20px;
	}
	.slider:before {
	    height: 20px;
	    width: 20px;
	    background-size: 20px 20px;
	}
	input:checked + .slider:before {
	    -webkit-transform: translateX(13px);
	    -ms-transform: translateX(13px);
	    transform: translateX(13px);
	    background-size: 30px 30px;
	}
	.vQRImg {
	    float: left;
	    width: 25%;
	    height: 25%;
	    min-width: 14px;
	    min-height: auto;
	    margin-right: 5px;
	    margin-top: 5px;
	}
}
/* Turn off parallax scrolling for tablets and phones 
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scoll;
    min-height: 100vh;
  }
}*/
/*
@media all and (-webkit-min-device-pixel-ratio : 1.5) {
	.bgimg-2 { background-size: 100vw; }
}*/

video::-webkit-media-controls {
    display:none !important;
  }
}
/* Turn off parallax scrolling IOS iphones */
@supports (-webkit-overflow-scrolling: touch) { 

} 
@media only screen and (device-width: 375px) and (device-height: 667px) and (orientation: portrait){
	.bgimg-1 { 
		background: url("/assets/themes/ghosthouse/images/parallax2-iphone-portrait.png");
		  /* Set a specific height */
		  min-height: 100vh; 

	}

}
@media only screen and (max-width: 667px) and (max-height: 375px) and (orientation: landscape){
	.bgimg-1 { 
		background: url("/assets/themes/ghosthouse/images/parallax2-iphone-landscape.png");
		  /* Set a specific height */
		  min-height: 100vh; 

	}
}
@media only screen and (min-width: 768px) {
	.bgimg-1 {
		background-position:center;
		background-image: url("/assets/themes/ghosthouse/images/parallax2-desktop.png");
		background-repeat: no-repeat;
		background-attachment:fixed;
		background-size:cover;
		min-height: 100vh !important;
		z-index:-5;
		vertical-align
	}

	.my-slider .slider-item .slider-img {
		position: absolute;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: auto;
		max-height: 70%;
		max-width: 50%;
	}
}