@font-face {
    font-family: 'LithosProBlack';
    src: url('fonts/lithospro-black.eot');
    src: url('fonts/lithospro-black.eot') format('embedded-opentype'),
         url('fonts/lithospro-black.woff') format('woff'),
         url('fonts/lithospro-black.ttf') format('truetype'),
         url('fonts/lithospro-black.svg#LithosProBlack') format('svg');
}
@font-face {
    font-family: 'LithosProRegular';
    src: url('fonts/lithospro-regular.eot');
    src: url('fonts/lithospro-regular.eot') format('embedded-opentype'),
         url('fonts/lithospro-regular.woff') format('woff'),
         url('fonts/lithospro-regular.ttf') format('truetype'),
         url('fonts/lithospro-regular.svg#LithosProRegular') format('svg');
}

html, body {height: 100%; width:100%}

html{padding:0px; margin:0px}
body{ background-image:url(../images/background_gradient.gif); background-attachment:fixed; background-size:cover; margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:34px}

h1, h2, h3, h4{font-family:LithosProBlack, Arial, Helvetica, sans-serif; font-weight:normal; color:#774919; text-shadow:1px 1px 3px #9f6b35}
h1{text-align:center; font-size:1em}
h2{font-size:0.8em}

a{text-decoration:none; color:#774919}
a:hover{color:#8a551e}

#wrap {min-height: 100%;}

#container{width:900px; margin:0px auto; position:relative; z-index:10; overflow:visible; padding:10px 0 417px 0;}
#content p{font-size:0.5em}
.graphic{font-size:0.5em}

#logo, #tree{margin:0px auto; display:block}
#logo{position:relative; width:500px}
#logo img{width:500px}

#nav{font-size:24px; padding:0px; margin:20px auto; list-style:none; font-family:LithosProBlack; text-align:center; width:780px}
#nav li{ display:inline-block; padding:3px 14px}
#nav a{color:#774919; text-shadow:1px 1px 3px #b37e47}
#nav a:hover{color:#987038}

#vine1{position:absolute; left:-100px; top:0px; background-image:url(../images/vines_left.gif); width:109px; height:242px}
#vine2{position:absolute; right:-100px; top:0px; background-image:url(../images/vines_left.gif); width:109px; height:242px}

#footer{background-image:url(../images/bottom_cast_and_tree.gif); background-position:center; height:417px; position:relative; min-width:900px; margin-top:-417px}

#rocksl, #rocksr{position:absolute}
#rocksl{width:254px; height:348px; left:0px; bottom:0px; background-image:url(../images/background_rocks_left.png); z-index:10}
#rocksr{width:247px; height:446px;right:0px; bottom:0px; background-image:url(../images/background_rocks_right.png)}
#copyright{font-family:Arial, sans-serif; color:#663300; font-size:0.3em; position:absolute; top:385px; text-align:center; width:100%}

#cast{list-style:none; padding:0px; margin:0px auto; width:800px}
#cast li{padding:0px; margin:0px}

#ringcontainer{width:650px; margin:0 auto}

.moviesList{ display:flex; justify-content: space-between; flex-wrap: wrap}
.moviesList > div{text-align:center; width:100%; max-width: 48%; margin-bottom: 30px}
.moviesList > div h2{height:50px}

.vidwrap{width:100%; padding-bottom: 67%; background: #000; position: relative;box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.15);}
.vidwrap iframe{position: absolute; left:0px; top:0px; width:100%; height: 100%}


.dangle{background-image:url(../images/vine3.png); background-repeat:no-repeat; position:absolute; left:0px; top:0px; width:100px; height:400px}

#hp{width:480px; height:420px; background-image:url(../images/bamboo-frame.png); margin:0 auto; position:relative}
#hp .moviesList{position:absolute; top:25px; left:25px;}
#hp .moviesList li{position:absolute; left:0px; top:0px; display:none}
#hp .moviesList li iframe{width:340px; height:280px}
#hp .moviesList li h2{height:auto; padding:15px 0 5px; margin:0px; color:#f8f1dc; text-shadow:0px 0px 8px #000; font-size:22px}
#hp .dangle:first-child{left:0px; top:10px}
#hp .dangle:nth-child(2){left:371px; top:10px}

#ringtones{ position:absolute; right:-20px; top:330px}
#books{ position:absolute; left:-60px; top:260px}

.charactersList{list-style:none; padding:0px; margin:0px; font-family:LithosProRegular}
.charactersList li{float:left; margin:0px 10px 50px 0px; text-align:center;}
.charactersList img{width:290px}
.charactersList h2{font-size:0.9em; padding:0px; margin:0px; }
.charactersList p{padding:0px; margin:0px; font-size:0.6em; display:block; height:40px}

@media (max-width: 900px) {
	#vine1, #vine2{display:none}
}
@media (max-width: 500px) {
	#wrap{width:100%}
	body{background-image:url(../images/bottom_cast_and_tree.gif);
	background-repeat:no-repeat; 
	background-position:center bottom;
	background-size:500px;
	background-color:#fce497}
	#footer, #rocksl, #rocksr, #vine1, #vine2, #books, #ringtones, .dangle{display:none}
	#container{width:100%; padding:0px}
	#content{padding:0px 10px 55px 10px}
	#logo{width:300px; padding:10px 0}
	#logo img{width:300px}
	#nav{width:100%; position:relative; font-size:0.6em; left:0px; position:relative;}
	#copyright{left:-50px}
	#cast li img{width:420px}
	#ringcontainer{width:90%}
	#rings1, #rings2{float:none !important; clear:both; width:400px; margin:0px auto}
	.charactersList li{ margin-left:0px; padding:0px}
	.moviesList li h2{height:auto}
	.moviesList li{float:none; margin:0px; padding:0px; width:100%}
	.moviesList iframe{width:300px; height:230px; margin:0px; padding:0px}
	#hp{width:320px; height:240px; background-size:320px 240px; margin:0 auto; position:relative}
	#hp .moviesList li h2{font-size:14px; width:220px;  margin-left:26px; padding:5px 0}
	#hp .moviesList li iframe{width:200px; height:160px; margin-left:35px}

}