/* IE11 */

 @media all and (-ms-high-contrast:none) {
     *::-ms-backdrop, #sujet #title { left: calc(50% - 585px); } 
}


#sujet {
	display: flex;
	position: relative;
	justify-content: center;
	z-index: 10;
}

 #sujet .eichen-baum {
	 width: 1215px;
	 margin: 0px auto;
	 position: absolute;
	 top: 0;
	 height: 100%;
 }

 #sujet .eichen-baum img {
	 right: 0;
	 position: absolute;
	 top: 0;
	 height: 100%;
 }

/* text typing */
.animated-text {
	text-align: left;
	font-family: 'brandon_grotesqueblack', Arial, sans-serif;
	color: #e10e22;
}

.adult .animated-text, .adult_ch .animated-text{
	color: #702283;
}


.animated-text span {
	overflow: hidden;
	width: 0;
	display: block;
  	font-size: 40px;
  	line-height: 1.2em;
  	text-transform: uppercase;
  	line-height: 0.8em;
  	letter-spacing: 5px; 
 }

 
 /*
.animated-text span.at-1 { animation: typing 1s forwards; animation-delay: 2s; font-size: 117px;  }
.animated-text span.at-2 { animation: typing 1s forwards; animation-delay: 3s; font-size: 132px; }
.animated-text span.at-3 { animation: typing 1.5s forwards; animation-delay: 4.5s; font-size: 44px; line-height: 1em; letter-spacing: 0px;}
.animated-text span.at-4 { animation: typing 1.5s forwards; animation-delay: 6s; font-size: 56px;  line-height: 1em; letter-spacing: 0px; }
*/
.animated-text span.at-1 { animation: typing 0.5s forwards; animation-delay: 2s; font-size: 117px;  }
.animated-text span.at-2 { animation: typing 0.5s forwards; animation-delay: 2.5s; font-size: 132px; }
.animated-text span.at-3 { animation: typing 1s forwards; animation-delay: 3.5s; font-size: 44px; line-height: 1em; letter-spacing: 0px;}
.animated-text span.at-4 { animation: typing 1s forwards; animation-delay: 4.5s; font-size: 56px; line-height: 1em; letter-spacing: 0px; }

 .animated-text span.at-1.fr { font-size: 103px; line-height: 1em; letter-spacing: 0.005em }
 .animated-text span.at-2.fr { font-size: 62px; line-height: 1em; letter-spacing: 0.004em; }
 .animated-text span.at-3.fr { font-size: 89px; line-height: 1em; letter-spacing: 1px;}
 .animated-text span.at-4.fr { font-size: 46px;  line-height: 1.2em; letter-spacing: 0.039em; }
 .animated-text span.at-5.fr { animation: typing 1s forwards; animation-delay: 5.5s; font-size: 60px;  line-height: 1em; letter-spacing: 0.007em; }

 .animated-text span.at-1.it { font-size: 68px; line-height: 1em; letter-spacing: 0.008em }
 .animated-text span.at-2.it { font-size: 97px; line-height: 1em; letter-spacing: 0.006em; }
 .animated-text span.at-3.it { font-size: 75px; line-height: 1em; letter-spacing: 0.011em;}
 .animated-text span.at-4.it { font-size: 42px;  line-height: 1.2em; letter-spacing: 0.03em; }

 .animated-text span.at-10 { overflow: unset; /* animation: typing 0.5s forwards; animation-delay: 2s; */ font-size: 50px; line-height: 0.8em; letter-spacing: 0.005em }
 .animated-text span.at-11 { overflow: unset; /*animation: typing 0.5s forwards; animation-delay: 2.5s; */ font-size: 50px; line-height: 1em; letter-spacing: 0.015em; }
 .animated-text span.at-12 { overflow: unset; /*animation: typing 1s forwards; animation-delay: 3.5s; */ font-size: 74px; line-height: 0.85em; letter-spacing: 1px; }
 .animated-text span.at-13 { overflow: unset; /*animation: typing 1s forwards; animation-delay: 4.5s; */ font-size: 81px; line-height: 0.8em; letter-spacing: 0.039em; }
 .animated-text span.at-14 { overflow: unset; /*animation: typing 1s forwards; animation-delay: 5.5s; */ font-size: 37px; line-height: 1em; letter-spacing: 0.007em; }

 #sujet .eichen-baum.junior img {
	/* opacity: 0;
	 animation: fadeIn 3s forwards;
	 animation-delay: 1.5s;*/
 }


 .sub .animated-text span {
	animation: none;
	overflow: visible;
}

 @-webkit-keyframes fadeinout {
	 0% { opacity: 0; }
	 50% { opacity: 1; }
	 95% { opacity: 1; }     /* 3s + 2s = 5s: noch sichtbar */
	 100% { opacity: 0; }
 }
 @keyframes fadeinout {
	 0% { opacity: 0; }
	 50% { opacity: 1; }
	 95% { opacity: 1; }     /* 3s + 2s = 5s: noch sichtbar */
	 100% { opacity: 0; }
 }

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}


#sujet .products a {
	 display: block;
	 position: relative;
}
 
 #sujet .products img.btn {
	position: absolute;
    bottom: -23px;
    right: -45px;
 }

#sujet #title .title-img {
    display: flex;
    align-items: center;
    justify-content: end;
    width: 26%;
	/*border: 1px solid red;*/
}

 #sujet #title .title-img.eichen {
	 width: 26.2%;
 }

 #sujet #title .title-img.eichen .animated-text {
	 margin-top: -10px;
 }


#sujet #title .title-slogan {
	margin-bottom: 0;
	width: 40%;
	animation: none;
	/*border: 1px solid blue;*/
}

#sujet.sub #title .title-slogan {
	margin-top: 8%;
}

#sujet #title .title-slogan h2 {
   opacity: 0;
    display: inline-block;
    animation: bounceIn 2s forwards;
    animation-delay: 4s;
    margin-bottom: 40px;
    font-size: 50px;
    text-shadow: 0 0 10px #702283;
    font-family: "brandon_grotesquebold", Arial, sans-serif;
} 


#sujet #title .title-img div {
	width: 100%;
	animation: inherit;
	
	/*animation: bounceIn 2s forwards;
	opacity: 0;
	animation-delay: 2s;*/
}

#sujet #title .title-img img {
    margin: 5px 0;
}

#sujet #title .title-img img:last-child {
    margin-left: 4%;
    margin-right: 4%;

}
#sujet.main {
	margin-bottom: 0;
}

#sujet #title {
	background: url(/fileadmin/template/images/all/animation/tantills-junior-junge.jpg) no-repeat bottom right 23%;
	background-size: auto 100%;
	position: absolute;
	top: 0;
}
#sujet #title.adult, #sujet #title.adult_ch {
	background-image: url(/fileadmin/template/images/all/animation/tantills-adult-blackcurrent.jpg);
}
 #sujet #title.adult.adult-trans {
	 background-image: url(/fileadmin/template/images/all/animation/tantills-adult-small.png);
	 background-position: bottom right 34%;
 }

 #sujet #title.junior.junior-trans {
	 background-image: url(/fileadmin/template/images/all/animation/tantills-junior-small.png);
	 background-position: bottom right 34%;
 }

 #sujet #title.adult.adult-trans .products img,  #sujet #title.junior.junior-trans .products img {
	 max-width: 90%;
 }

#sujet #title .products {
    opacity: 0;
    display: inline-block;
    animation: bounceInLeft 2s forwards;
    animation-delay: 0.5s;
    max-width: 100%;
	 /* animation-delay: 7s; */
}


#button { display: none;}


#sujet #title .title-img div {
	/*width: 100%;
	animation: bounceIn 2s forwards;
	opacity: 0;
	animation-delay: 2s;*/
}

#sujet.sub #title .title-slogan h2,
#sujet.sub #title .title-img div,
#sujet.sub #title .products,
#sujet.sub #button  {
    animation: none;
    opacity: 1;
} 

#sujet {
    background: rgb(245,183,186);
    animation: coloring 0.5s forwards;
    animation-delay: 8s;
 }

#sujet.tree {
	animation-delay: 4.5s;
}

 #sujet.adult_bg {
	  background-color: rgb(236,188,225);
	  animation: none;
 }
 
 #sujet.sub {
	  background: rgb(236,188,225);
	  animation: inherit; 
 }
 
@keyframes coloring {
  from { background: rgb(245,183,186); }
  to { /*background: rgb(255,232,118); */ background: rgb(236,188,225); }
}


#sujet #title.junior, #sujet .eichen-baum.junior {
	/*animation: fadeOut 0.5s forwards;
	animation-delay: 8s;*/
	animation: bounceOutLeft 0.5s forwards;
	animation-delay: 7.5s;
}

 #sujet.tree #title.junior, #sujet.tree .eichen-baum.junior {
	 animation-delay: 4s;
 }

 #sujet #title.junior.adult_ch {
	 animation: none;
 }

/*
#sujet #title.junior .title-cnt {
	animation: fadeOutComplete 0.1s forwards;
	animation-delay: 9s;
}*/

#sujet #title.adult, #sujet .eichen-baum.adult {
	opacity: 0;
	/*animation: fadeIn 1s forwards;
	animation-delay: 8.5s;*/
	animation: bounceInLeft 1s forwards;
	animation-delay: 8s;
}

 #sujet.tree #title.adult, #sujet.tree .eichen-baum.adult {
	 animation-delay: 4.5s;
 }

#sujet.sub  #title.adult { 
	opacity: 1;
	animation: inherit;
}




@media (max-width: 767px) {
	#sujet.main #title .title-cnt.title-slogan { width: 35%; padding-left: 20px;}

	#sujet #title.adult.adult-trans {
		background-position: bottom right 39%;
	}
	/*#sujet.home { margin-bottom: 0 !important;}*/
	
	.animated-text span.at-1 { font-size: 9.6vw; }
	.animated-text span.at-2 { font-size: 11vw; }
	.animated-text span.at-3 { font-size: 3.75vw; }
	.animated-text span.at-4 { font-size: 4.7vw; }

	.animated-text span.at-1.fr { font-size: 8.38vw; }
	.animated-text span.at-2.fr { font-size: 5.1vw; }
	.animated-text span.at-3.fr { font-size: 7.2vw; }
	.animated-text span.at-4.fr { font-size: 3.78vw; }
	.animated-text span.at-5.fr { font-size: 4.93vw; }

	.animated-text span.at-1.it { font-size: 5.58vw; }
	.animated-text span.at-2.it { font-size: 7.95vw; }
	.animated-text span.at-3.it { font-size: 6.16vw; }
	.animated-text span.at-4.it { font-size: 3.45vw; }

	.animated-text span.at-10 { font-size: 50px; font-size: 3.8vw; font-size: 28px; }
	.animated-text span.at-11 { font-size: 50px; font-size: 3.8vw; font-size: 28px; }
	.animated-text span.at-12 { font-size: 74px; font-size: 5.624vw; font-size: 41px; }
	.animated-text span.at-13 { font-size: 81px; font-size: 6.156vw; font-size: 45px; }
	.animated-text span.at-14 { font-size: 37px; font-size: 2.812vw; font-size: 21px; }

	.animated-text span { letter-spacing: 3px; }

	#sujet .eichen-baum { max-width: 100%; }

	#sujet #title .title-img.eichen .animated-text{ margin-top: -4px; }
	
	#sujet .products img.btn {
	    position: absolute;
	    bottom: -7%;
	    right: -11%;
	    max-width: 55% !important;
	}
	/*
	#sujet.sub #title {
		position: inherit;
		left: 0px;
	}*/

	#sujet #title {
		/*background-image: url(/fileadmin/template/images/all/sujet/header-mobile-landscape.png);
		background-position-x: center;*/
		padding-top: 5%;
		padding-bottom: 5%;
		padding-top: 0;
		padding-bottom: 0;
		background-position: bottom right 36%;
		background-size: auto 90%;

	}
	
	
	#sujet.main #button { 
		display: block; 
		margin-top: 0;
		left: 0;
		bottom: -30%;
		max-width: 35%;
	}
	
	#sujet.main #button .button_1 {
		margin-left: 20px;
	}
	
	/*#sujet.sub #title .products { display: none; }*/
	
	
	
	#sujet.main #title .title-cnt:last-child {
	    width: 30%;
	    width: 25%;
	    margin-right: 20px;

	}

	 #sujet.main #title .title-cnt.eichen:last-child {
		  width: 162px;
	 }
	
	#sujet.main {
		margin-bottom: 50px;
		height: 275px !important;		 

	}
	
	#sujet.sub #title .title-cnt.title-slogan {
		padding-left: 20px;
	}
	
	#sujet.sub #title .title-cnt.title-slogan h2 {
		font-size: 28px;
		margin-bottom: 20px;
	}
	
	#sujet.sub #button .button_1 a {
		display: block;
	}
	
	#sujet.main #button .button_1 a img {
		max-width: 100%;
		
	}
	
	#sujet.sub #title .title-slogan {
		margin-top: 0;
	}
	/*
	#sujet #title .title-img div, #sujet #title .title-slogan h2, #sujet #title .products, #button { animation: none; opacity: 1;}
	
	*/
}

@media (max-width: 650px) {	
	#sujet.sub #title .title-cnt.title-slogan h2 {
		font-size: 25px;
	}
	#sujet.main #button {
    	bottom: -20%;
	}
}

@media (max-width: 600px) {	
	#sujet.main { height: 220px !important; }
	#sujet #title {
	    background-position: bottom right 40%;
	}
	#sujet.main #title .title-cnt.eichen:last-child {
		width: 125px;
	}


	#sujet #title.adult.adult-trans {
		background-position: bottom right 39%;
	}
	.animated-text span.at-10 { font-size: 22px; }
	.animated-text span.at-11 { font-size: 22px; }
	.animated-text span.at-12 { font-size: 32px; }
	.animated-text span.at-13 { font-size: 36px; }
	.animated-text span.at-14 { font-size: 17px; }

}

@media (max-width: 570px) {	
	#sujet.sub #title .title-cnt.title-slogan h2 {
		font-size: 22px;
	}
	#sujet.sub #title .title-cnt.title-slogan {
		padding-left: 15px;
	}
}

@media (max-width: 500px) {	
	#sujet.main .header-height {
		max-width: 90%;
	}

	#sujet.sub #title .title-cnt.title-slogan h2 {
		font-size: 20px;
	}
	
	#sujet.main #button {
    	bottom: -24%;
	}
	
	#sujet.main #title .products {
    	position: absolute;
		bottom: -17%;
		max-width: 42%;
		right: 13px;
	}
/*}

@media (max-width: 420px) {	*/
	
	#sujet.main { height: auto !important;}


	#sujet.tree {
		/*height: 250px !important;*/
		max-height: 220px;
	}

	#sujet.tree .eichen-baum { right: -45px; }

	#sujet.tree #title.adult-trans .title-cnt:last-child.eichen,
	#sujet.tree #title.junior-trans .title-cnt:last-child.eichen {
		width: 100px !important;
	}

	#sujet.tree #title.adult-trans .title-cnt.title-slogan h2,
	#sujet.tree #title.junior-trans .title-cnt.title-slogan h2 {
		left: 13px;
		text-align: left !important;
	}

	#sujet.tree #title.adult-trans .products,
	#sujet.tree #title.junior-trans products {
		left: 13px;
	}


 	#sujet.main #button .button_1 {
		margin-left: 20px;
	}

	.animated-text span.at-1 { font-size: 10.2vw; }
	.animated-text span.at-2 { font-size: 11.8vw; }
	.animated-text span.at-3 { font-size: 4.05vw; }
	.animated-text span.at-4 { font-size: 5.1vw; }

	.animated-text span.at-1 { font-size: 9.6vw; }
	.animated-text span.at-2 { font-size: 11vw; }
	.animated-text span.at-3 { font-size: 3.75vw; }
	.animated-text span.at-4 { font-size: 4.7vw; }

	.animated-text span.at-1.fr { font-size: 8.38vw; }
	.animated-text span.at-2.fr { font-size: 5.1vw; }
	.animated-text span.at-3.fr { font-size: 7.2vw; }
	.animated-text span.at-4.fr { font-size: 3.78vw; }
	.animated-text span.at-5.fr { font-size: 4.93vw; }

	.animated-text span.at-1.it { font-size: 5.58vw; }
	.animated-text span.at-2.it { font-size: 7.95vw; }
	.animated-text span.at-3.it { font-size: 6.16vw; }
	.animated-text span.at-4.it { font-size: 3.45vw; }
	
	/*#sujet.main #button {
		max-width: 100%;
	}
	#sujet.main #button .button_1 {
		max-width: 65%;
		text-align: center;
		margin: 0px auto;
	}*/
	#sujet.main {
    	margin-bottom: 15%;
	}
	
	
	#sujet.sub #title .title-cnt.title-slogan h2 {
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		font-size: 33px;
		margin-bottom: 0;
		padding-top: 6%;
	}


	#sujet #title {
		background-position-x: left;
		/*padding-top: 35%;
		padding-bottom: 20%;*/
		display: flex !important;
		background-size: auto 90%;
	}
	
	#sujet.sub #title {
		background-size: auto 75%;
	}
	
	#sujet.main #button .button_1 {
		max-width: 100%;
	}
	
	#sujet.main #button {
    	margin-left: 0;
    	right: auto;
    	margin-top: 0;
    	 bottom: -22%;
		 max-width: 50%;
	}
	
	#sujet #title .title-img {
    	justify-content: flex-end;
    }
    
    #sujet.main #title .title-cnt {
	    width: 50% !important
    }
    
    #sujet.main #title .title-cnt:last-child {
    	width: 32% !important;
    	margin: 0 0 15% 0;
    	margin: 0;
    }
    
    #sujet.main #title .title-cnt img {
    	max-width: 100%;
	}
	
	#sujet #title .title-img div {
    	animation: inherit;
		animation-delay: 0s;
	}
	/*
	#sujet.sub {
    	margin-right: 20px;
	}*/
}


@media (max-width: 350px) {
	#sujet.sub #title .title-cnt.title-slogan h2  {
		font-size: 20px;
	}
 	#sujet.tree #title.adult-trans, #sujet.tree #title.junior-trans {
		background-position: bottom left;
	}
	 #sujet.tree #title.adult-trans .products, #sujet.tree #title.junior-trans .products{
		 bottom: -21%;
	 }

}

 @media (max-width: 315px) {
	 #sujet.tree .eichen-baum { right: -16%; }
	 #sujet.tree #title.adult-trans .title-cnt:last-child.eichen,
	 #sujet.tree #title.junior-trans .title-cnt:last-child.eichen {
 		width: 30% !important;
	 }

	 .animated-text span.at-10 { font-size: 7vw; }
	 .animated-text span.at-11 { font-size: 7vw; }
	 .animated-text span.at-12 { font-size: 10.18vw; }
	 .animated-text span.at-13 { font-size: 11.45vw; }
	 .animated-text span.at-14 { font-size: 5.41vw; }
 }