:root {
    --dark-mode-background: #212121;
}

#content {
    min-height: 100%;
    margin-bottom: -50px;
}

.push {
    height: 100px;
}

.footer {
    background: #455a64;
    color: white;
    line-height: 50px;
    padding: 0 20px;
  
    font-align: center;
  
    padding-bottom:2px;
    
    z-index: 58;
}

.imprint_link_footer {
    margin-top: -40px;
    letter-spacing: 0.45em;
    
    cursor: pointer;
}

.copyright_link_footer {
    margin-top: 5px;
    letter-spacing: 1px;
}

html {
	overflow-x: hidden;
}

info {
	display: none;
}

#map {
    height: 500px;
}


a {
	text-decoration: none;
	color: #9c27b0;
}

#post-background {
	width: 101%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-top: -50px;

    display: flex;
    justify-content: center;
    align-items: center;
}

#post-background center {
	position: relative;
	top: 50%;
	transform: translateY(-50%); 
}

.ql-video {
	height: 600 !important;
}

#posttitle {
    margin-top: 55px;

	color: white; 
	font-size: 2.5em;
    width: 100%;
    
	text-align: center;
	font-weight: bold;

	text-shadow: 1px 2px 3px #666;
}

.post-content {
	margin-left: auto;
	margin-right: auto;
	width: 60%;
}

h2.website-disabled{
    font-size: 2.5em;
}

p.website-disabled{
    font-size: 1.8em;
}

.introduceSlider-divider {
    margin-top: -86px;

    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);

    min-width: 925px;
}

.introduceSlider-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 86px;
}

.introduceSlider-divider .shape-fill {
    fill: #fff;
}

#gallery-page {
    position: fixed;
    min-height: 100%;
    width: 100%;
    height: 100%;
    
    left: 100%;
    
    background-color: white;
    z-index: 58;
}

#paypal_payment_blocker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    
    background-color: rgb(0,0,0,0.7);
    z-index: 2147483646;
}

.underline > .statement-link-underline:before { 
    visibility: visible !important; 
    -webkit-transform: scaleX(1) !important; 
    transform: scaleX(1) !important;
}

.fluidMedia video {
    position: absolute;
    z-index: 0;
    background: url(mel.jpg) no-repeat;
    background-size: 100% 100%;
	top: 0;
	right: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

/* editing the material design a bit */
.md-fab  {
	border-radius: 50% !important;
}

.md-button {
	border-radius: 8px !important;
}

md-grid-tile {
	border-radius: 18px !important;
}

md-grid-tile-footer {
	border-radius: 18px !important;
}

md-dialog {
	border-radius: 18px !important;
}

/* payment and basket **/
@keyframes pulse {
    0% {
        opacity: 1;
    }
    
    50% {
        opacity: 0.3;
    }
    
    100% {
        opacity: 1;
    }
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-2px, 0, 0) rotate(-5deg);
    }
    
    20%, 80% {
        transform: translate3d(4px, 0, 0) rotate(10deg);
    }
    
    30%, 50%, 70% {
        transform: translate3d(-6px, 0, 0) rotate(-15deg);
    }
    
    40%, 60% {
        transform: translate3d(6px, 0, 0) rotate(15deg);
    }
}

.shakeclass {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    opacity: 1;
}

.pulseclass {
	animation: pulse 0.8s cubic-bezier(.36,.07,.19,.97) infinite;
}

#payment-privacy-statement-link > .statement-link-underline {
    position: relative;
    color: #000;
    text-decoration: none;
}

#payment-privacy-statement-link > .statement-link-underline:hover {
    color: #000;
}

#payment-privacy-statement-link > .statement-link-underline:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #9c27b0; /* #ff8300 */
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s cubic-bezier(1,.08,.58,1.01) 0s;
    transition: all 0.3s cubic-bezier(1,.08,.58,1.01) 0s;
}

/* loading screen div */
#ui_loading {
    height: 100%;
    width: 100%;

    top: 0;
    left: 0;

    position: fixed;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: #212121;
    z-index: 1000;

    transition: opacity .5s;
}

#ui_loading img {
    margin-bottom: 64px;

    height: 100px;
    animation: ui_loading_anim 1s infinite;
}

@keyframes ui_loading_anim {
    0% {transform: rotate(0);}
    100% {transform: rotate(-360deg);}
}

/**#loadingscreen {
    top:0;
    position: fixed;
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: white;
    z-index: 1000;
    
    transition: opacity 0.5s;
}**/

/**@keyframes ldio-wk028yp1aqs {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(180deg) }
    100% { transform: rotate(360deg) }
}

.ldio-wk028yp1aqs div {
    position: absolute;
    animation: ldio-wk028yp1aqs 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #a04b93;
    transform-origin: 80px 82px;
}

.loadingio-spinner-eclipse-ae021gvy7ps {
    padding-bottom: 60px;

    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background: none;

    transform: scale(0.8);
}

.ldio-wk028yp1aqs {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
}

.ldio-wk028yp1aqs div { box-sizing: content-box; }**/

@media (prefers-color-scheme: dark) {
    #loadingscreen {
        background-color: #222;
    }

    .ldio-wk028yp1aqs div {
        box-shadow: 0 4px 0 0 #6a3161;
    }
}

/* website disabled div */
#website-disabled {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: black;
    z-index: 100;
    transition: opacity 0.5s;
}

/** gallery */
.grid-image-tile {
	background-position: center;
	background-size: cover;
}

.grid-image-tile, md-grid-tile-footer div, .next-button-left, .next-button-right {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	
	cursor: pointer;
}

.md-dialog-content-img {
	box-shadow: 0 7px 8px -4px rgba(0,0,0,.2), 0 13px 19px 2px rgba(0,0,0,.14), 0 5px 24px 4px rgba(0,0,0,.12);
}

.booking-dialog-save-data, .booking2-p3, .booking2-p2, .booking-p3, .booking-p2, .booking-p1, #payment-privacy-statement-link {-webkit-transition: all .4s cubic-bezier(.25,.8,.25,1); transition: all .4s cubic-bezier(.25,.8,.25,1);  -webkit-transition-property: height, opacity, filter; transition-property: height, opacity, filter; }

/* banners */
#sup_yoga__include_banner {
    height: 0px;
    width: 100vw;
    background-color: black;
    transition: height 0.5s;
}

#sup_yoga__include_banner_content_div {
    width:100vw;
    display:table-cell;
    vertical-align:middle;
    font-size: 1em;
}

#sup_yoga__include_banner .inner-content-div {
	margin-left: 20%;
    margin-right: 20%;
    padding-top: 30px;
    padding-bottom: 30px;
}

#sup_yoga__include_banner_title {
    
    font-size:1.5em;
    color:white;
}

/* used when a md-list-item is greyed out */
md-list-item.old {
    opacity: 0.4;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
    md-icon { color: white !important; }
    .whiteindarkmode, p, li {color: #d3d3d3 !important; }
    h2, h3, h4, .md-grid-text, md-dialog { color: white !important; }

    body, #backgroundcolor-div, #content-under-slider, md-dialog, md-sidenav, .md-subheader, .push, md-content, md-bottom-sheet, .push { background-color: var(--dark-mode-background) !important; }
    md-bottom-sheet { border-top-color: #101010 !important; }
    .svg-img { filter: invert() !important; }

    .time-tr:nth-child(2n) { background-color: #242424 !important; }

    md-backdrop { background-color: rgb(210,210,210) !important; }

    .introduceSlider-divider .shape-fill { fill: var(--dark-mode-background); }
    .introduceSlider, .introduceSlider .slide { background-color: var(--dark-mode-background) !important; }
}