@charset "UTF-8";

.tx-animation {
	margin: 50px 0;
	overflow: hidden;
}

.tx-animation  > li:before {
	content: '' !important;
}

.animationWrapper {
	position: relative;
	float: left; 
	left: 50%; 
	margin: 0; 
	width: 180%;
}

.animationImage {
	display: block;
	position: relative;
	float: right;
	right: 50%;
	width: 100%;
	height: auto;
	padding: 30px 0;
	background-position: -100px 60%;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: 0 12px 10px -12px rgba(0,0,0,.75) inset;
	overflow: hidden;
}

.animationContent  {
	width: 55%; 
	margin: 0 auto; 
}

h2.animationHeadline {
	font-size: 300%;
	font-weight: 100;
	margin: 0 0 20px;
}

#pageContent .animationContent ul{
	padding-left:2em;
}
#pageContent .animationContent ul li{
	padding-left:0;
	text-indent:0;
}
#pageContent .animationContent ul li:before{
	text-indent: -1.6em;
	display:inline-block;
	margin-right:0;
}
#pageContent .animationImage.layout1 h2.animationHeadline,
#pageContent .animationImage.layout1 .animationBodyText{
	color:#fff;
	text-shadow: 1px 1px 1px #000000;
}
#pageContent .animationImage.layout2 h2.animationHeadline,
#pageContent .animationImage.layout2 .animationBodyText{
	color:#000;
	text-shadow: 1px 1px 1px #FFFFFF;
}
#pageContent .animationImage.layout3 h2.animationHeadline,
#pageContent .animationImage.layout3 .animationBodyText{
	color:rgb(231,1,1);
	text-shadow: 1px 1px 1px #000000;
}


#pageContent .animationImage .animationContent.bgLayout1{
	background-color:transparent;
}
#pageContent .animationImage .animationContent.bgLayout2{
	background-color:rgba(255,255,255,.6);
	padding:.5em;
}
#pageContent .animationImage .animationContent.bgLayout3{
	background-color:rgba(0,0,0,.6);
	padding:.5em;
}
#pageContent .animationImage .animationContent.bgLayout4{
	background-color:rgba(231,1,1,.6);
	padding:.5em;
}

div.animationBodyText {
	font-size: 120%;
}

.word,
.char {
	display: inline-block; 
}

.clearAnimationWrapper {
	clear: both;
}


@media only screen and (min-width: 650px) {
	.tx-animation {
		margin: 0;
	}

	.animationWrapper {
		width: 1440px;
	}

	.animationImage {
		min-height: 436px;
	}

	.animationContent  {
		width: 920px;
	}

	h2.animationHeadline {
		font-size: 2.8rem;
	}

	div.animationBodyText {
		font-size: 1.2rem;
	}
	
	#content .tx-animation ul.okBig li {
		padding: 6px 0 2px 18px;
		text-indent: -43px;
	}
	
	.tx-animation .fceButton a {
		font-size: 100%;
	}
}