.animation_canvas{
	max-height: 450px;
	height:450px;
}

.animation_wrapper{
	width:100%;
	height:100%;
	display:block;
	position:relative;
}

.animation_wrapper .animation_image{
	max-height:450px;
	max-width:100%;
	width:auto;
	position: absolute;
	display:none;
	height:auto;
}

.animation_wrapper .animation_image.active{
	display:block;
}

.animation_wrapper .animation_image.displaying_inside.showme{
	display:block;
}

.animation_wrapper .hoover_grid_wrapper{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
}

.animation_wrapper .hoover_grid{
	z-index:20;
	width:10%;
	height:30px;
	display:block;
	float:left;
	/*border:1px solid black;*/
	cursor:default;
}

.animation_wrapper .hoover_grid.hovertstyle{
	cursor: pointer;
}

.animation_canvas .desctiption_column{
	padding-top:50px;
}

.animation_canvas .toggle_description{
	text-decoration: none;
	font-size:18px;
	color: #00cccb;
	padding-right: 35px;
	background:rgba(0, 0, 0, 0) url("/media/images/arrow_down_green.png") no-repeat scroll right center;
}

.animation_canvas .toggle_description:hover{
	text-decoration: underline;
	color:#00cccb;
}

.animation_canvas .toggle_description.active{
	text-decoration: underline;
	background:rgba(0, 0, 0, 0) url("/media/images/arrow_up_green.png") no-repeat scroll right center;
}

.animation_canvas .inside_wrapper{
	margin-top:20px
}

@media screen and (max-width:768px){
	.animation_wraapper,
	.animation_canvas,
	.animation_canvas .container{
		padding-left:0px;
		padding-right: 0px;
	}

	.animation_wrapper .animation_image{
		max-height:450px;
		width:100%;
		height:auto;
	}
}

@media screen and (max-width:691px){
	.animation_wrapper .animation_image{
		max-height:410px;
	}

	.animation_wrapper .hoover_grid{
		height:27px;
	}
	.animation_canvas{
		height:410px;
	}
}
@media screen and (max-width:614px){
	.animation_wrapper .animation_image{
		max-height:360px;
	}

	.animation_wrapper .hoover_grid{
		height:24px;
	}
	.animation_canvas{
		height:360px;
	}
}
@media screen and (max-width:576px){
	.animation_wrapper .animation_image{
		max-height:330px;
	}

	.animation_wrapper .hoover_grid{
		height:22px;
	}
		.animation_canvas{
		height:330px;
	}
}
@media screen and (max-width:537px){
	.animation_wrapper .animation_image{
		max-height:315px;
	}

	.animation_wrapper .hoover_grid{
		height:21px;
	}
		.animation_canvas{
		height:315px;
	}
}
@media screen and (max-width:499px){
	.animation_wrapper .animation_image{
		max-height:300px;
	}

	.animation_wrapper .hoover_grid{
		height:20px;
	}
		.animation_canvas{
		height:300px;
	}
}
@media screen and (max-width:460px){
	.animation_wrapper .animation_image{
		max-height:270px;
	}

	.animation_wrapper .hoover_grid{
		height:18px;
	}
		.animation_canvas{
		height:270px;
	}
}
@media screen and (max-width:422px){
	.animation_wrapper .animation_image{
		max-height:255px;
	}
	.animation_wrapper .hoover_grid{
		height:17px;
	}
		.animation_canvas{
		height:255px;
	}
}
@media screen and (max-width:384px){
	.animation_wrapper .animation_image{
		max-height:225px;
	}

	.animation_wrapper .hoover_grid{
		height:15px;
	}
		.animation_canvas{
		height:225px;
	}
}
@media screen and (max-width:345px){
	.animation_wrapper .animation_image{
		max-height:210px;
	}

	.animation_wrapper .hoover_grid{
		height:14px;
	}
		.animation_canvas{
		height:210px;
	}
}
@media screen and (max-width:307px){
	.animation_wrapper .animation_image{
		max-height:195px;
	}

	.animation_wrapper .hoover_grid{
		height:13px;
	}
		.animation_canvas{
		height:195px;
	}
}













