/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/*if you just want to adjust the size of the stage and the thumbnails, you can do so by editing the following lines: */
.pika-thumbs li {width: 180px; height:135px;}
.pika-thumbs-custom li {width: 140px; height:152px;}
.pika-stage {height: 610px; width: 812px;}
.pika-stage-custom {height: 610px; width: 470px;}
#pikame {width: 180px;}

body {
	font-family: 'Cinzel', serif;
	text-align: center;
	margin: 0px;
}

a {
	color: black;
	text-decoration: none;
}

.pikachoose {width: 1025px; margin: 0px; position: relative; text-align: left;}
.pikachoose-custom {width: 683px; margin: 0px; position: relative; text-align: left;}
.pika-stage {position: relative; top: 0px; left: 0px;}
	
#banner-transparency-wrap {position: absolute; width: 100%; margin-top: .9%;}
#banner-transparency {position: relative; margin-left: auto; margin-right: auto; height: 63px; width: 630px; background: white; z-index: 3; border-radius: 32px; opacity: .8;}

#bannertest {position: relative; margin-top: 1%; z-index: 4; right: 0px;}
#mvldbanner {position: relative; margin-top: 2.7%;}

#container {position: absolute; top: 50%; left: 50%; margin-top: -296px; margin-left: -504px; width: 1000px; height: 620px;}
#shifted-container {position: absolute; top: 50%; left: 50%; margin-top: -286px; margin-left: -490px; width: 1000px; height: 620px;}
#custom-container {position: absolute; top: 50%; left: 50%; margin-top: -286px; margin-left: -325px; width: 706px; height: 620px; overflow: hidden;}

.cast-container {
	display: flex;
	display: -webkit-flex;
	flex-direction: column;
	-webkit-flex-direction: column;
	align-items: center;
    -webkit-align-items: center;
	justify-content: center;
    -webkit-justify-content: center;
}

.names-container {
	margin-bottom: 30px;
}

.name-and-email {
	display: flex;
	display: -webkit-flex;
	flex-direction: row;
	-webkit-flex-direction: row;
	justify-content: space-between;
    -webkit-justify-content: space-between;
	width: 500px;
	margin-top: 18px;
	font-size: 21.5px;
}

#footer-wrap {width: 100%; position: fixed; z-index: 3; bottom: 1.3%; left: 0; padding-top: 14px; padding-bottom: 10px;}
#footer {
	display: flex; 
	display: -webkit-flex;
	margin-left: auto; 
	margin-right: auto; 
	background: none; 
	width: 892px; 
	justify-content: space-around; 
	-webkit-justify-content: space-around;
	flex-wrap: nowrap;
	-webkit-flex-wrap: nowrap;
}

#footer a {height: 31px;}

#footer-transparency-wrap {width: 100%; position: fixed; z-index: 2; bottom: 1.3%; left: 0; padding-top: 14px; padding-bottom: 10px;}
#footer-transparency {position: relative; margin-left: auto; margin-right: auto; height: 39px; width: 894px; background: white; border-radius: 20px; opacity: .8;}

#ethoswords{margin-top: 0px;}
#feather {margin-top: 17px;}

@media screen and (max-height: 980px) {
	#bwzia {
		display: none;
	}
}

#bwzia {width: 114px; height: 114px; margin-bottom: 28px;}

#mvl {margin-top: 20px; width: 475px; height: 362px; border-radius: 10px;}
#color-logo {margin-top: 89px;}

#contact-info-container {
	display: flex;
	display: -webkit-flex;
	justify-content: space-around; 
	-webkit-justify-content: space-around;
	width: 100%;
	font-size: 24px;
	margin-top: 188px;
	position: relative;
}

#instagram {height: 52px; margin-top: 28px; opacity: 1;}

#phone {height: 20px;}
#email {height: 20px;}
#address {height: 20px;}

#bottom-space-holder {margin-top: 62px;}

#splash {top: 0px; left: 0px; width: 100%; position: fixed; top: 15%; z-index: 1;}

/*if you change the padding on pika-stage you must adjust the top left of this to match!*/
	.pika-stage .main-image {position: absolute;}
	.pika-stage .pika-aniwrap {position: absolute;}
	.pika-stage img {position: absolute;}

.pika-imgnav a {position: absolute; display: block;}
	.pika-imgnav a.up {background: url(graphics/up.png) no-repeat 50%; height: 5%; width: 19px; top: 263px; right: -250px;}
	.pika-imgnav a.down {background: url(graphics/down.png) no-repeat 50%; height: 5%; width: 19px; top: 320px; right: -250px;}

.pika-imgnav-custom a {position: absolute; display: block;}
	.pika-imgnav-custom a.up {background: url(graphics/up.png) no-repeat 50%; height: 5%; width: 19px; top: 263px; right: -11px;}
	.pika-imgnav-custom a.down {background: url(graphics/down.png) no-repeat 50%; height: 5%; width: 19px; top: 320px; right: -11px;}
	
.pika-thumbs {overflow: hidden; width:180px; position: absolute;}
	.pika-thumbs li .clip {position: relative; height: 100%; overflow: hidden;}

.pika-thumbs-custom {overflow: hidden; width:140px; position: absolute;}
	.pika-thumbs-custom li .clip {position: relative; height: 100%; overflow: hidden;}

/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika {position: absolute; top: 0px; right: 9px;}
.jcarousel-skin-pika .jcarousel-container-vertical { width: 180px; height: 610px; overflow: hidden;}
.jcarousel-skin-pika .jcarousel-clip-vertical { width: 180px; height: 610px; overflow: hidden;}
.jcarousel-skin-pika .jcarousel-item-vertical { margin-bottom: 25px;}