@charset "UTF-8";
/*

Theme Name: Carolus Thermen Bad Aachen

Theme URL: https://carolus-thermen.de/

Description: Carolus Thermen Bad Aachen - Thermalbad, Saunawelt, Spa, Kulinarik

Author: DB/M - jm / designbuero-michel.com

Version: 1.1.0

*/
@import url("/wp-content/themes/Carolus_Thermen_Website_Theme_V1.1.0/css/fonts.css");
@import url("/wp-content/themes/Carolus_Thermen_Website_Theme_V1.1.0/css/buttons/mainMenuBtn.css");
@import url("/wp-content/themes/Carolus_Thermen_Website_Theme_V1.1.0/css/buttons/mainPageTopBtn.css");
@import url("/wp-content/themes/Carolus_Thermen_Website_Theme_V1.1.0/css/menus/mainSlideMenus.css");
@import url("/wp-content/themes/Carolus_Thermen_Website_Theme_V1.1.0/css/menus/langMenu.css");
@import url("/wp-content/themes/Carolus_Thermen_Website_Theme_V1.1.0/css/menus/mainPreviewMenus.css");
@import url("/wp-content/themes/Carolus_Thermen_Website_Theme_V1.1.0/css/menus/footerMenus.css");

* {
	--link-color: #ff6969;
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* Animation */

.scale.triggeredCSS3     {
	-webkit-transform : scale(1);
	-moz-transform : scale(1);
	-ms-transform : scale(1);
	-o-transform : scale(1);
	transform : scale(1);
	opacity: 1;
}

.ani{
	-webkit-transform : scale(0.7);
	-moz-transform : scale(0.7);
	-ms-transform : scale(0.7);
	-o-transform : scale(0.7);
	transform : scale(0.7);
	opacity: 0;
	-webkit-transition: all 0.6s;
	-moz-transition: all 0.6s;
	-ms-transition: all 0.6s;
	-o-transition: all 0.6s;
	transition: all 0.6s;
	
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* Parallaxe */

.parallax_scroll{
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* STANDARTS */

*, *::after, *::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


a{
	position: relative;
	width: auto;
 	text-shadow: none;
    text-decoration: none;
}

/*a[href$=".pdf"]::after {
	content: ' (PDF)';
}*/


.center{
	
  display: flex;
  align-items: center;
  justify-content: center;
}
.centerV{
	
  display: flex;
  align-items: center;
}

/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* Img & Video Sizer */


img {
    max-width: 100%;
    height: 100%;
    width: 100%;
    display: block;
    position: 50% 50%;
}

video {
	position: relative;
	
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
	width: auto;
	height: 100%;
  /* Make video to at least 100% wide and tall */
  	min-width: 100%; 
	max-height: 100%;
  
	object-fit: cover;
  	/* Center the video */
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%,-50%);
	object-position: center center;
}

.elastic-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

.elastic-video iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


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

/* Body Elements */

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


body,
html {
    max-width: 100%;
	height: auto;
    min-height: calc(100vh + 0px);
  /* mobile viewport bug fix */
 /*  min-height: -webkit-fill-available;*/
    padding: 0;
    margin: 0 !important;
	
}

.wrap{
	position: relative;
	margin-left:auto;
	margin-right: auto;
}

.logo{
	position: fixed;
	z-index: 101;
	top:0px;
	right: 5vw;
	width: auto;
	height: 5vw;
	display: flex;
  	align-items: center;
  	justify-content:flex-end;
	
	-webkit-transition: all 1.4s ease-in-out;
	-moz-transition: all 1.4s ease-in-out;
	-ms-transition: all 1.4s ease-in-out;
	-o-transition: all 1.4s ease-in-out;
	transition: all 1.4s ease-in-out;
	
}

.down .logo {
	top: -100%;
}

.down .logo.active {
	top: 0%;
}

.logo svg{
	max-width: 100%;
	height: 2.4vw;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

.logo svg .st0{
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}

section {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	max-width: 100%;
	height: auto;

}

#PageBackground{
	margin-left: auto;
	margin-right: auto;
	position: fixed;
	z-index: 0;
	top:0;
	left: 0px;
	width: 100%;
	height: calc(100vh + 0px);
	overflow: hidden;
}


#PageContent{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	min-height: calc(100vh + 0px);
	z-index: 4;
	padding:0;
}


.unloadedPage {
	opacity: 0;
	-webkit-transition: all 1.9s linear;
	-moz-transition: all 1.9s linear;
	-ms-transition: all 1.9s linear;
	-o-transition: all 1.9s linear;
	transition: all 1.9s linear;
	
}

.unloadedPage #SITEHEADER .modulBackground .modulBackgroundMedia{
	opacity: 0;
	z-index: 0 !important;
	-webkit-transition: opacity 2s linear;
	-moz-transition: opacity 2s linear;
	-ms-transition: opacity 2s linear;
	-o-transition: opacity 2s linear;
	transition: opacity 2s linear;
}


.loadedPage #SITEHEADER .modulBackground .modulBackgroundMedia{
	opacity: 1;
	z-index: 0 !important;
	-webkit-transition: opacity 2s linear;
	-moz-transition: opacity 2s linear;
	-ms-transition: opacity 2s linear;
	-o-transition: opacity 2s linear;
	transition: opacity 2s linear;
	
}

.loadedPage {
	opacity: 1;
	-webkit-transition: all 1.9s linear;
	-moz-transition: all 1.9s linear;
	-ms-transition: all 1.9s linear;
	-o-transition: all 1.9s linear;
	transition: all 1.9s linear;
}

#PageHeader{
	
	position: absolute;
	z-index: 1;
	top:0px !important;
	left:0px !important;
	margin: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 0px;
	width: 100%;
	height: calc(100vh + 0px);
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}


footer{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: auto;
}

.screen-reader-only {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	white-space: nowrap;
}


#page-not-found { min-height: 300px; padding-top: 150px; }
#page-not-found h1 { margin-bottom: 1em; }

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

@media screen and (max-width: 956px) {
/* ===================================================================================================================== */
/* ===================================================================================================================== */
/* ===================================================================================================================== */
	
}
@media screen and (max-width: 720px) {
.logo{
	height:12vw;
}


.logo svg{
	height: 7vw;
}

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

}


@media (prefers-reduced-motion: reduce) {
	/* Hier kommt der Code, der Animationen deaktiviert oder reduziert  */
	/* ist hier Nutzen von Selektor * sinnvoll? */
	.ani, .logo {
		-webkit-transition: none!important;
		-moz-transition: none!important;
		-ms-transition: none!important;
		-o-transition: none!important;
		transition: none!important;
	}
}