/*
Theme Name: Blumenfreude
Description: Wiesbaden
Author: doubleplus
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


/* -----------------------------------------

             *****    **  ******
            **   **   **    **
            **        **    **
            **  ***   **    **
             *****    **    **

          CSS NUR ÜBER GIT ÄNDERN!

   -----------------------------------------  */

h1 {
    font-size: calc(32px + (64 - 32) * ((100vw - 300px) / (2556 - 300)));
    line-height: 1.1em;
}

h2 {
    font-size: calc(22px + (44 - 22) * ((100vw - 300px) / (2556 - 300)));
    line-height: 1.1em;
}

h3 {
    font-size: calc(21px + (42 - 21) * ((100vw - 300px) / (2556 - 300)));
    line-height: 1.1em;
}

h4 {
    font-size: calc(20px + (32 - 20) * ((100vw - 300px) / (2556 - 300)));
    line-height: 1.1em;
}

h5 {
    font-size: calc(12px + (24 - 12) * ((100vw - 300px) / (2556 - 300)));
    line-height: 1.1em;
}

h6 {
    font-size: calc(11px + (22 - 11) * ((100vw - 300px) / (2556 - 300)));
    line-height: 1.1em;
}

.banner h3 {
    font-size: calc(20px + (28 - 20) * ((100vw - 300px) / (2556 - 300)));
    line-height: 1.1em;
}



/* Helper Classes */

.icon-ColAccent_01 {
    filter: invert(40%) sepia(76%) saturate(236%) hue-rotate(291deg) brightness(88%) contrast(94%);
}

/* END OF Helper Classes */

/* Headline FX */

.headlineFX {
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 100px;
}

.headlineFX h1,
.headlineFX h2,
.headlineFX h3 {
    font-size: 7vw;
    line-height: 8vw;
    letter-spacing: 0.5vw;
    font-weight: 900;
    margin: 0;
    color: black;
    text-transform: uppercase;
}


.headlineFX .headlineEnv {
    position: relative;
    top: 0;
    left: 0;
    background-color: white;
    mix-blend-mode: screen;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.headlineFX.autoHeight .headlineEnv {
    position: initial;
    padding: 20px 0 0 0;
}

.headlineFX .imageEnv {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -160px;
    left: 0;
    z-index: 1;
}

.header-bottom {
	border-top: #5bc96c 4px solid;
}

.header-bottom .menu-item .nav-top-link:before {
	background-color: #fff;
	height: 6px;
	top: -7px;
}

.headlineFX .imageEnv video {
    position: relative;
    width: 100%;
}

/* Text Block */

.button_color2 {
	background-color: #525759 !important;
}

.logoDeko {
	position: absolute;
	bottom: -150px;
	right: 50px;
}

.hlGlow h1, .hlGlow h2, .hlGlow h3 {
	color:#fff;
	font-size: 6vw;
	position: relative;
  	z-index: 1;
	margin: 40px 0;
}

.hlGlow h1:after, .hlGlow h2:after, .hlGlow h3:after {
	content: "Willkomen im Frühling";
	filter: blur(8px);
background-size: 200%;
	background: rgb(214,21,78,1);
	background: linear-gradient(213deg, rgba(255,255,255,1) 0%, rgba(214,21,78,1) 18%, rgba(255,255,255,1) 34%, rgba(249,178,51,1) 50%, rgba(255,255,255,1) 66%, rgba(91,201,108,1) 84%, rgba(255,255,255,1) 100%); 
	color: transparent;
	background-clip: text;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	z-index: -1;
	animation: glowIt 8s linear infinite;
}

@keyframes glowIt {
	  0% {
       background-position: 400% 0;
     }

     100% {
       background-position: 0 0;
     }
}



/*
   .hlGlow h1:before, .hlGlow h2:before, .hlGlow h3:before {
     content: "Willkomen im Frühling";
     background: linear-gradient(90deg,
         #ff2400,
         #e81d1d,
         #e8b71d,
         #e3e81d,
         #1de840,
         #1ddde8,
         #2b1de8,
         #dd00f3,
         #dd00f3,

         #ff2400,
         #e81d1d,
         #e8b71d,
         #e3e81d,
         #1de840,
         #1ddde8,
         #2b1de8,
         #dd00f3,
         #dd00f3);
     position: absolute;
     top: -2px;
     left: -2px;
     background-size: 200%;
     z-index: -1;
     filter: blur(5px);
     width: calc(100% + 4px);
     height: calc(50% + 4px);
     animation: glowing 20s linear infinite;
     transition: opacity 0.3s ease-in-out;
     border-top-right-radius: 10px;
     border-top-left-radius: 10px;
   }

   .hlGlow h1:after, .hlGlow h2:after, .hlGlow h3:after {
     content: "Willkomen im Frühling";
     background: linear-gradient(90deg,
         #dd00f3,
         #dd00f3,
         #2b1de8,
         #1ddde8,
         #1de840,
         #e3e81d,
         #e8b71d,
         #e81d1d,
         #ff2400,

         #dd00f3,
         #dd00f3,
         #2b1de8,
         #1ddde8,
         #1de840,
         #e3e81d,
         #e8b71d,
         #e81d1d,
         #ff2400);
     position: absolute;
     top: calc(50% - 2px);
     left: -2px;
     background-size: 200%;
     z-index: -1;
     filter: blur(5px);
     width: calc(100% + 4px);
     height: calc(50% + 4px);
     animation: glowing-reverse 20s linear infinite;
     transition: opacity 0.3s ease-in-out;
     border-bottom-left-radius: 10px;
     border-bottom-right-radius: 10px;
   }

   @keyframes glowing {
     0% {
       background-position: 0 0;
     }

     100% {
       background-position: 400% 0;
     }
   }

   @keyframes glowing-reverse {
     0% {
       background-position: 400% 0;
     }

     100% {
       background-position: 0 0;
     }
   }
*/

@media only screen and (min-width: 550px) {

    .bf_TxtBlock_h {
        min-height: 100px;
    }

    .bf_TxtBlock_txt {
        min-height: 250px;
    }
}

@media only screen and (min-width: 550px) and (max-width: 850px) {

    .bf_TxtBlock_h {
        min-height: 70px;
    }

    .bf_TxtBlock_txt {
        min-height: 200px;
    }
}

/* END OF Text Block */

/* END OF Headline FX */

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}