CSS help with inserting Hype into an existing page

Responsive Flexible Layouts
1

This is more CSS related then Hype but I hope someone can help me out here as my CSS is limited at best.

I have a functioning webpage with in it currently an old flexible image slider called ‘ninja-slider’. It’s nice, works well but limited in what I could do with it.

My idea was to replace that ‘ninja-slider’ with a flexible Hype animation. :grin:
After a some trail & error I managed to largely mirror the effects and transitions from the slider into a Hype document and made it flexible too.

Problem is that when I insert the Hype code into my existing document the class it’s in collapses immediately and the Hype animation doesn’t show.

I’ve tried giving that class (topbox) a height and then my Hype document shows up but then the class is no longer flexible on the Y-axis. :grimacing:
Anyone know how I can tell that class or the Hype document it has to be 567px heigh and be flexible responding to browser window width/height?

.topbox{
 max-width:100%; 
height:auto; 
padding:0;
margin:0;
border:1px solid #444;
box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.7), 0px 0px 0px 1px rgba(0, 0, 0, 0.4) inset;
}

<div id="intro_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;">
		<script type="text/javascript" charset="utf-8" src="intro/intro.hyperesources/intro_hype_generated_script.js?72641"></script>
	</div>
3

Here's a nice script from @h_classen to solve this: