.animation_index{
	padding-top:50px;
	padding-bottom:50px;
}
.animation_index .animation_wrapper .hub{
	width:512px;
	height:512px;
	position:relative;
	margin:0 auto;
}

.animation_index .animation_wrapper .hub .hub_title{
	color:#00cccb;
	font-size:30px;
	font-weight: 400;
	position:absolute;
	left:50%;
	top:60%;
	width:250px;
	margin-left:-125px;
	text-align: center;
	z-index:30;
}

.animation_index .animation_wrapper .hub .hub_title img{
	width:77px;
	height:auto;
	margin-left:10px;
	margin-right:-2px;
	margin-bottom: 7px;
}


.animation_index .animation_wrapper .hub .animation_bracket{
	position:absolute;
	z-index:25;
}

/*.language_de .animation_index .animation_wrapper .hub .animation_bracket.bracket_2  .bracket_content_wrapper span,*/
.language_en .animation_index .animation_wrapper .hub .animation_bracket.bracket_2  .bracket_content_wrapper span {
	display: inline;
	height: auto;
}
.language_ru .animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper {
	width: 260px;
	margin-left: -260px;
}
.language_ru .animation_index .animation_wrapper .hub .animation_bracket.bracket_0 .bracket_content_wrapper {
	width: 220px;
	margin-left: -220px;
}
.language_ru .animation_index .animation_wrapper .hub .animation_bracket.bracket_4 .bracket_content_wrapper,
.language_ru .animation_index .animation_wrapper .hub .animation_bracket.bracket_2 .bracket_content_wrapper {
	width: 255px;
}
.language_de .animation_index .animation_wrapper .hub .animation_bracket.bracket_2 .bracket_content_wrapper,
.language_en .animation_index .animation_wrapper .hub .animation_bracket.bracket_2 .bracket_content_wrapper {
	width: 240px;
}
.language_de .animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper .icon_holder,
.language_en .animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper .icon_holder {
	top: -11px;
}
.language_de .animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper,
.language_en .animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper {
	margin-top: -35px;
}
.language_de  .animation_index .animation_wrapper .hub .animation_bracket.bracket_7  .bracket_content_wrapper span,
.language_en  .animation_index .animation_wrapper .hub .animation_bracket.bracket_7  .bracket_content_wrapper span,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_2  .bracket_content_wrapper span{
	display: inline-block;
	height: 41px;
}
.animation_index .animation_wrapper .hub .bracket_bg{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	z-index:10;
}


.animation_index .animation_wrapper .hub .overlay_bg{
	background:url('/media/images/hooverhub/background.png') no-repeat center center;
	position:absolute;
	z-index:20;
	display: block;
	width:100%;
	height:100%;
}


.animation_index .animation_wrapper .hub .bracket_bg.active{
	display:block;
}




.animation_index .animation_wrapper .hub .animation_bracket .bracket_content_wrapper{
	position:relative;
	width:200px;
	height:200px;
}

.animation_index .animation_wrapper .hub .animation_bracket .bracket_content_wrapper .icon_holder,
.animation_index .animation_wrapper .hub .animation_bracket .bracket_content_wrapper .active_icon{
	width:45px;
	height:45px;
	position: absolute;
}

.icon_holder{
	display:block;
}
.icon_holder .active_icon{
	display:none;
}

.animation_index .animation_wrapper .hub .animation_bracket .bracket_content_wrapper span{
	font-size: 13px;
	color:#666666;
	text-transform: uppercase;
	font-family: 'open_sansbold';
	padding-bottom: 5px;
	border-bottom:1px dashed;
}

.animation_index .animation_wrapper .hub .animation_bracket .bracket_content_wrapper p{
	padding-top:10px;
	font-family: 'Open Sans';
	font-weight: 300;
}

.animation_index .animation_wrapper .hub .animation_bracket:hover .active_icon,
.animation_index .animation_wrapper .hub .animation_bracket.active .active_icon{
	display:block;
}

.animation_index .animation_wrapper .hub .animation_bracket.bracket_0{
	width:133px;
	height:158px;
	left:0px;
	top:84px;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_0:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_0.active{
	background:url('/media/images/hooverhub/segment_08.png') no-repeat center center;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_0 .bracket_content_wrapper{
	margin-left:-200px;
	margin-top:-18px;
	text-align: right;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_0 .bracket_content_wrapper .icon_holder{
	right:-45px;
	top:-26px;
}



.animation_index .animation_wrapper .hub .animation_bracket.bracket_1{
	width:118px;
	height:130px;
	left:133px;
	top:0px;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_1:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_1.active{
	background:url('/media/images/hooverhub/segment_04.png') no-repeat center center;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_1 .bracket_content_wrapper{
	margin-left:112px;
	width:210px;
	margin-top:-40px;
	text-align: left;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_1 .bracket_content_wrapper .icon_holder{
	left:-45px;
	top:0px;
}




.animation_index .animation_wrapper .hub .animation_bracket.bracket_2{
	width:245px;
	height:130px;
	right:0px;
	top:0px;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_2:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_2.active{
	background:url('/media/images/hooverhub/segment_06.png') no-repeat center center;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_2 .bracket_content_wrapper{
	width:200px;
	top:18px;
	right:-243px;
	text-align: left;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_2 .bracket_content_wrapper .icon_holder{
	left:-45px;
	top:0px;
}




.animation_index .animation_wrapper .hub .animation_bracket.bracket_3{
	width:128px;
	height:112px;
	right:0px;
	top:130px;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_3:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_3.active{
	background:url('/media/images/hooverhub/segment_11.png') no-repeat center center;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_3 .bracket_content_wrapper{
	width:200px;
	top:61px;
	right:-125px;
	text-align: left;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_3 .bracket_content_wrapper .icon_holder{
	left:-45px;
	top:0px;
}





.animation_index .animation_wrapper .hub .animation_bracket.bracket_4{
	width:128px;
	height:156px;
	right:0px;
	bottom:91px;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_4:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_4.active{
	background:url('/media/images/hooverhub/segment_16.png') no-repeat center center;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_4 .bracket_content_wrapper{
	width:200px;
	top:124px;
	right:-125px;
	text-align: left;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_4 .bracket_content_wrapper .icon_holder{
	left:-45px;
	top:-20px;
}

/*blank one*/
.animation_index .animation_wrapper .hub .animation_bracket.bracket_5{
	width:113px;
	height:75px;
	right:131px;
	bottom:60px;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_5:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_5.active{
	background:url('/media/images/hooverhub/segment_19.png') no-repeat center center;
}
/*end blank one*/

.animation_index .animation_wrapper .hub .animation_bracket.bracket_6{
	width:246px;
	height:75px;
	left:0px;
	bottom:60px;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_6:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_6.active{
	background:url('/media/images/hooverhub/segment_17.png') no-repeat center center;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_6 .bracket_content_wrapper{
	margin-left:-200px;
	margin-top:40px;
	text-align: right;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_6 .bracket_content_wrapper .icon_holder{
	right:-45px;
	top:-26px;
}

.animation_index .animation_wrapper .hub .animation_bracket.bracket_7{
	width:133px;
	height:112px;
	left:0px;
	bottom:135px;

}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_7:hover,
.animation_index .animation_wrapper .hub .animation_bracket.bracket_7.active{
	background:url('/media/images/hooverhub/segment_15.png') no-repeat center center;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper{
	margin-left:-200px;
	margin-top:-18px;
	text-align: right;
}
.animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper .icon_holder{
	right:-45px;
	top:-26px;
}


.animation_index .animation_wrapper .mobile_positioning{
	display:none;
}


@media screen and (max-width:940px){
	.animation_index .animation_wrapper .hub .animation_bracket.bracket_3 .bracket_content_wrapper,
	.animation_index .animation_wrapper .hub .animation_bracket.bracket_2 .bracket_content_wrapper,
	.animation_index .animation_wrapper .hub .animation_bracket.bracket_4 .bracket_content_wrapper
	{
		width:150px !important;
	}
	.animation_index .animation_wrapper .hub .animation_bracket.bracket_7 .bracket_content_wrapper,
	.animation_index .animation_wrapper .hub .animation_bracket.bracket_0 .bracket_content_wrapper,
	.animation_index .animation_wrapper .hub .animation_bracket.bracket_6 .bracket_content_wrapper{
		width:150px !important;
		margin-left:-150px;
	}
}

@media screen and (max-width:830px){
		.hub{
			display:none;
		}

		.animation_index .animation_wrapper .mobile_positioning{
			display:block;
		}

		.animation_index .animation_wrapper .mobile_positioning ul li{
			list-style: none;
			padding-left:55px;
			margin-bottom:30px;
			position:relative;
		}

		.animation_index .animation_wrapper .mobile_positioning ul li span{
			border-bottom: 1px dashed;
			margin-bottom: 10px;
		    color: #666666;
		    font-family: "open_sansbold";
		    font-size: 13px;
		    padding-bottom: 5px;
		    margin-bottom: 5px;
		    display:block;
		    text-transform: uppercase;
		}

		.animation_index .animation_wrapper .mobile_positioning ul li .icon_holder {
		    left: 0px;
		    top: 0px;
		    display:block;
		}
		.animation_index .animation_wrapper .mobile_positioning ul li .icon_holder,
		.animation_index .animation_wrapper .mobile_positioning ul li .active_icon {
		    height: 45px;
		    position: absolute;
		    width: 45px;
		}
}