/*The container*/
.showpony{
	background-color:#000;
	overflow:hidden;
	position:relative;
}

/*Default CSS for a created Showpony window (only used when one isn't specified in the CSS)*/
.showpony-default{
	width:640px;
	height:480px;
	margin:auto;
}

/*Loading Setup*/
.showpony-loading::after{
	content:" ";
	display:block;
	position:absolute;
	border:inset white .5em;
	border-radius:100%;
	top:50%;
	left:50%;
	width:4em;
	height:4em;
	box-sizing:border-box;
	pointer-events:none;
	animation:spin 3s linear infinite .5s;
	visibility:hidden;
}

/*Automatic loading with these, and disable animations*/
.showpony-loading,.showpony-loading *
,.showpony-paused .showpony-content, .showpony-paused  .showpony-content *{
	animation-play-state:paused !important; /*Disables general animations and text animations, so we freeze while loading*/
}

@keyframes spin{
	0%{
		visibility:visible;
		transform:translate(-2em,-2em) rotate(0deg);
	}
	100%{
		visibility:visible;
		transform:translate(-2em,-2em) rotate(360deg);
	}
}

.showpony-cover{
	z-index:2;
	position:absolute;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:50%;
	cursor:pointer;
	display:flex;
	font-size:3em;
	justify-content:center;
	align-items:center;
	color:white;
}

.showpony-cover>p{
	background-color:rgba(0,0,0,0.5);
	box-sizing:border-box;
	padding:1em;
	transition:transform .25s;
	transform:scale(1);
	text-align:center;
}

.showpony-cover>p:hover{
	transform:scale(1.1);
}

.showpony-overlay-text{
	position:absolute;
	width:100%;
	height:100%;
	pointer-events:none;
	
	font-family:monospace;
	font-size:2.5em;
	margin:0;
	padding:.25em;
}

.showpony-overlay{
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:85%;
	color:#fff;
	z-index:1;
	opacity:0;
	cursor:none;
	transition:opacity .2s,background-color .1s;
	background-color:rgba(0,0,0,.25);
	
	-ms-user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	user-select:none;
}

.showpony-info-media{
	height:1em;
	width:1em;
	background-size:contain;
	display:inline-block;
}

.showpony-info-text{
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' version='1'%3E%3Cpath d='M5-11a5 5 0 0 0-5 5 5 5 0 0 0 5 5 5 5 0 0 0 5-2L5-6l5-2a5 5 0 0 0-5-3z' fill='%23fff'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M8 11v10M5 12v7M2 14v3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M8 8H2M8 5H2M8 2H2'/%3E%3C/g%3E%3C/svg%3E");
}

.showpony-info-image{
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10mm' height='10mm' viewBox='0 0 10 10'%3E%3Cpath d='M5.4191 0A5 5 0 0 0 .4189 5.0003 5 5 0 0 0 5.419 10a5 5 0 0 0 4.162-2.2345l-4.162-2.7652L9.5806 2.235A5 5 0 0 0 5.4191 0z' fill='%23fff'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.865'%3E%3Cpath d='M8.469 10.796v9.7637M5 12.1544v7.0468M1.531 14.0647v3.2263'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.865'%3E%3Cpath d='M8.181-13.447H1.819M8.181-16.9161H1.819M8.181-20.3851H1.819'/%3E%3C/g%3E%3C/svg%3E");
}

.showpony-info-audio{
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10mm' height='10mm' viewBox='0 0 10 10'%3E%3Cpath d='M5.4191-10.5833A5 5 0 0 0 .4189-5.583 5 5 0 0 0 5.419-.5834a5 5 0 0 0 4.162-2.2345L5.4191-5.583l4.1615-2.7652a5 5 0 0 0-4.1615-2.235z' fill='%23fff'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.865'%3E%3Cpath d='M8.469.1182v9.7636M5 1.4766v7.0468M1.531 3.3869V6.613'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.865'%3E%3Cpath d='M8.181-13.1701H1.819M8.181-16.6391H1.819M8.181-20.1081H1.819'/%3E%3C/g%3E%3C/svg%3E");
}

.showpony-info-video{
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10mm' height='10mm' viewBox='0 0 10 10'%3E%3Cpath d='M5.4191-10.5833A5 5 0 0 0 .4189-5.583 5 5 0 0 0 5.419-.5834a5 5 0 0 0 4.162-2.2345L5.4191-5.583l4.1615-2.7652a5 5 0 0 0-4.1615-2.235z' fill='%23fff'/%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.865'%3E%3Cpath d='M8.469 11.4574v9.7637M5 12.8159v7.0468M1.531 14.7262v3.2262'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.865'%3E%3Cpath d='M8.181-13.1701H1.819M8.181-16.6391H1.819M8.181-20.1081H1.819'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cpath d='M4.8028 5.1972V0H10v5.1972z'/%3E%3Cpath d='M2.4024 2.4004v5.1971h5.1971v-1.863H4.2654v-3.334z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal' color='%23000' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/%3E%3Cpath d='M0 4.8028V10h5.1971V8.135H1.865V4.803z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal' color='%23000' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/%3E%3C/g%3E%3C/svg%3E");
}

.showpony-info-multimedia{
	  background-image:url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8' standalone='no'?%3E%3C!-- Created with Inkscape (http://www.inkscape.org/) --%3E%3Csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' width='10mm' height='10mm' viewBox='0 0 10 10' version='1.1' id='svg8' inkscape:version='0.92.1 r15371' sodipodi:docname='multimedia.svg'%3E%3Cdefs id='defs2' /%3E%3Csodipodi:namedview id='base' pagecolor='%23ffffff' bordercolor='%23666666' borderopacity='1.0' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:zoom='7.9195959' inkscape:cx='29.034539' inkscape:cy='5.9473585' inkscape:document-units='mm' inkscape:current-layer='layer1' showgrid='false' inkscape:window-width='1920' inkscape:window-height='1001' inkscape:window-x='-9' inkscape:window-y='-9' inkscape:window-maximized='1' inkscape:pagecheckerboard='true' inkscape:snap-page='true' inkscape:snap-bbox='true' inkscape:bbox-nodes='true' inkscape:snap-bbox-midpoints='false' inkscape:snap-center='true' inkscape:snap-global='true' inkscape:snap-midpoints='true' /%3E%3Cmetadata id='metadata5'%3E%3Crdf:RDF%3E%3Ccc:Work rdf:about=''%3E%3Cdc:format%3Eimage/svg+xml%3C/dc:format%3E%3Cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage' /%3E%3Cdc:title%3E%3C/dc:title%3E%3C/cc:Work%3E%3C/rdf:RDF%3E%3C/metadata%3E%3Cg inkscape:label='Layer 1' inkscape:groupmode='layer' id='layer1' transform='translate(0,-287)'%3E%3Cpath style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:83.99999805, 6.99999983;stroke-dashoffset:261.92126465;stroke-opacity:1' d='m 5.419096,276.41671 a 4.9999931,4.9999931 0 0 0 -5.0002116,5.00021 4.9999931,4.9999931 0 0 0 5.0002116,4.9997 4.9999931,4.9999931 0 0 0 4.1620196,-2.23449 l -4.1620196,-2.76521 4.1615029,-2.7652 A 4.9999931,4.9999931 0 0 0 5.419096,276.41671 Z' id='path4487' inkscape:connector-curvature='0' /%3E%3Cg id='g4573' transform='translate(0,0.66146073)'%3E%3Cpath inkscape:connector-curvature='0' id='path4495' d='m 8.4690118,297.79598 v 9.76369' style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3Cpath inkscape:connector-curvature='0' id='path4497' d='m 5.0000001,299.15441 v 7.04683' style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3Cpath inkscape:connector-curvature='0' id='path4499' d='m 1.5309882,301.06469 v 3.22627' style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3C/g%3E%3Cg id='g4568' transform='translate(0,-21.639137)'%3E%3Cpath inkscape:connector-curvature='0' id='path4495-4' d='M 8.1809522,295.46901 H 1.8190478' style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3Cpath inkscape:connector-curvature='0' id='path4495-4-1' d='M 8.1809523,292 H 1.8190477' style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3Cpath inkscape:connector-curvature='0' id='path4495-4-0' d='M 8.1809523,288.53099 H 1.8190477' style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3C/g%3E%3Cg id='g4719' transform='translate(0,23.319317)'%3E%3Cpath inkscape:connector-curvature='0' id='rect4577' d='M 4.8028302,292.19717 V 287 H 10 v 5.19717 z' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1.86500001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:261.92126465;stroke-opacity:1' /%3E%3Cpath inkscape:connector-curvature='0' id='rect4577-6' d='m 2.4024373,289.40036 v 5.1971 H 7.599536 v -1.86294 H 4.2653727 v -3.33416 z' style='color:%23000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000000;solid-opacity:1;vector-effect:none;fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:261.92126465;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' /%3E%3Cpath inkscape:connector-curvature='0' id='rect4577-6-2' d='m 0,291.8028 v 5.1971 h 5.1970987 v -1.86501 H 1.8650024 v -3.33209 z' style='color:%23000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000000;solid-opacity:1;vector-effect:none;fill:%23ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:261.92126465;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' /%3E%3C/g%3E%3Cpath style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' d='M 9.9999996,296.06749 H -1.2701e-8' id='path4495-0' inkscape:connector-curvature='0' /%3E%3Cg id='g4753' transform='translate(4.8550615,0.229717)'%3E%3Cpath inkscape:connector-curvature='0' id='path4499-2' d='m 2.5724693,294.36896 v -3.22627' style='fill:none;stroke:%23ffffff;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1' /%3E%3Cpath id='path4748' d='M 5.1449385,289.57248 A 2.5724692,2.5724692 0 0 1 2.5724692,292.14495 2.5724692,2.5724692 0 0 1 0,289.57248 a 2.5724692,2.5724692 0 0 1 2.5724692,-2.57247 2.5724692,2.5724692 0 0 1 2.5724693,2.57247 z' style='opacity:1;fill:%23ffffff;fill-opacity:1;stroke:none;stroke-width:1.86500001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:261.92126465;stroke-opacity:1' inkscape:connector-curvature='0' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

}

.showpony-overlay:hover
,.showpony-paused .showpony-overlay{
	opacity:1;
	cursor:auto;
}

@media (hover:none), -moz-touch-enabled{
	.showpony:not(.showpony-paused) .showpony-overlay:hover{
		opacity:0;
		cursor:initial;
	}
	
	.showpony:not(.showpony-paused) .showpony-overlay:hover button
	,.showpony:not(.showpony-paused) .showpony-overlay:hover select{
		pointer-events:none;
	}
}

.showpony-paused .showpony-overlay{
	background-color:rgba(0,0,0,.5);
	bottom:0;
}

.showpony-overlay button{
	border:none;
	width:3rem;
	height:3rem;
	pointer-events:auto;
	cursor:pointer;
	background-size:cover;
	background-color:rgba(0,0,0,0);
	transition:opacity .1s;
}

.showpony-overlay-buffer{
	width:100%;
	top:3.25em;
	height:.25em;
	position:absolute;
	pointer-events:none;
	opacity:.5;
	background-color:black;
}

/*Menu scrub bar*/
.showpony-progress{
	position:absolute;
	top:2.825em;
	transform:translate(-.25em,0);
	
	border:solid white .5em;
	background-color:#fff;
	border-radius:100%;
	transform:translate(-.5em,0);
	box-sizing:border-box;
	pointer-events:none;
	
	pointer-events:none;
}

.showpony-fullscreen-button{
	background-position:0% 10%;
	float:right;
}

button.showpony-account-button{
	background-position:0% 100%;
	float:left;
	
	font-size:1em;
	width:9rem;
	font-weight:bold;
	background-size:33%;
	background-position-x:100%;
	background-repeat:no-repeat;
	background-color:rgba(256,256,256,.75);
	overflow-wrap:break-word;
}

.showpony-captions-button{
	background-position:0% 20%;
	background-color:black;
	float:right;
	border:none;
	width:5rem;
	height:3rem;
	pointer-events:auto;
	cursor:pointer;
	background-size:cover;
	background-color:none;
	transition:opacity .1s;
	color:white;
}

.showpony-captions-button option{
	color:white;
}

.showpony-overlay button:hover{
	opacity:.75;
}

.showpony-content{
	width:100%;
	height:100%;
	position:absolute;
	
	-ms-user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	user-select:none;
	
	color:white;
	z-index:0;
}

.showpony-block{
	left:0;
	top:0;
	width:100%;
	height:100%;
	cursor:pointer;
	object-fit:contain;
}

/*Logo display*/
.showpony-logo{
	position:absolute;
	bottom:0;
	left:0;
	stroke:currentColor;
	
	display:none;
}

.showpony-paused .showpony-logo{
	display:block;
}

.showpony-overlay button, .showpony-overlay a{
	pointer-events:auto;
}

.showpony-overlay a{
	color:#fff;
}

.showpony-overlay svg{
	fill:currentColor;
	height:2em;
	margin:.25em;
}

/*Credits display*/
.showpony-credits{
	position:absolute;
	bottom:0;
	right:0;
	font-size:.75em;
	padding:.5em;
	pointer-events:none;
	text-align:right;
	
	display:none;
}

.showpony-paused .showpony-credits{
	display:block;
}


/*Fullscreen display*/
:-webkit-full-screen{
	width:100%;
	height:100%;
}

:-webkit-full-screen:focus{
	outline:none;
}

/*If fullscreen isn't supported, this is applied to the element*/
.showpony-fullscreen-alt{
	position:fixed !important;
	top:0;
	left:0;
	right:0;
	bottom:0;
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}

/*Control goes on html to prevent scrolling*/
.showpony-fullscreen-control{
	overflow:hidden;
}

.showpony-fullscreen-alt:focus{
	outline:none;
}

/*Subtitles*/
.showpony-captions-options{
	color:white;
	display:flex;
	flex-direction:column;
}

.showpony-captions-option{
	color:white;
}

.showpony-subtitles{
	position:absolute;
	width:100%;
	height:100%;
	pointer-events:none;
}

.showpony-sub{
	position:absolute;
	background-color:rgba(0,0,0,0.64);
	color:white;
	overflow:auto;
	box-sizing:border-box;
	margin:0;
	padding:.5em;
	font-size:1.5em;
	pointer-events:auto;
	
	left:10%;
	width:80%;
	top:70%;
	height:20%;
}

/***TEXT***/
.showpony-page-turn{
	overflow:auto;
	height:100%;
	width:100%;
	padding:1em;
	box-sizing:border-box;
	background-color:white;
	color:black;
	word-break:break-word;
}

.showpony-page-turn img{
	width:40em;
	max-width:100%;
	display:block;
	margin:auto;
	margin-bottom:10em;
}

.showpony-page-prev:hover
,.showpony-page-next:hover{
	opacity:.7;
}
	
.showpony-page-prev
,.showpony-page-next{
	position:relative;
	height:14em;
	max-height:40%;
	width:100%;
	left:0;
	opacity:.1;
	transition:opacity .2s;
	pointer-events:auto;
	cursor:pointer;
	margin:auto;
	display:block;
	border:none;
	margin:0;
}

.showpony-page-prev{
	background:linear-gradient(black,white);
}

.showpony-page-next{
	background:linear-gradient(white,black);
}

/***MULTIMEDIA***/

/*Objects*/

/*.showpony-button{
	width:10em;
	max-width:100%;
	display:block;
	text-align:left;
	margin:auto;
}*/

.showpony-textbox{
	width:100%;
	background-color:rgba(0,0,0,.8);
	box-sizing:border-box;
	color:#fff;
	font-family:Arial;
	z-index:10;
	position:absolute;
	bottom:0;
	padding:1em;
	height:4em;
	max-height:100%;
	overflow:auto;
	opacity:1;
	
	user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	-moz-user-select:none;
	font-size:2em;
	
	word-wrap:break-word;
	word-break:normal;
	break-word:normal;
	overflow-wrap:break-word;
	white-space:nowrap;
}

.showpony-textbox input{
	pointer-events:auto;
	font-size:1em;
	padding:0;
	border:none;
	padding:.25em;
	background-color:#fff;
}

.showpony-textbox input[type="button"]
,.showpony-textbox input[type="submit"]{
	cursor:pointer;
	background-color:#e9e9e9;
}

.showpony-textbox input[type="button"]:hover
,.showpony-textbox input[type="submit"]:hover{
	background-color:#bcbcbc;
}

.showpony-textbox input[type="button"]{
	cursor:pointer;
	background-color:#e9e9e9;
	margin:.25em;
}

.showpony-name{
	background-color:#000;
	padding:.4em;
	left:0;
	position:absolute;
	z-index:11;
	bottom:4em;
	font-size:2em;
	font-family:Arial;
	font-weight:bold;
}

.showpony-background{
	width:100%;
	height:100%;
	z-index:0;
	position:absolute; /*The background flickers when switching between parts if the background is the same with this on. If we run into problems later on with background positioning, we may need to turn this back on.*/
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	
	pointer-events:none; /*Sometimes backgrounds are in front of scrollable elements. We need to not let that mess things up.*/
}

.showpony-character{
	width:100%;
	height:90%;
	bottom:0%;
	left:0%;
	position:absolute;
	z-index:5;
	
	pointer-events:none; /*Sometimes characters are in front of scrollable elements. We need to not let that mess things up.*/
}

.showpony-character-image{
	background-position:50% -20%;
	background-repeat:no-repeat;
	background-size:contain;
	opacity:1;
}
.showpony-character div{
	width:100%;
	height:100%;
	position:absolute;
}

.showpony-continue{
	color:white;
	position:absolute;
	right:0;
	bottom:0;
	z-index:11;
	margin:1.75em 2em;
	width:3em;
	height:3em;
	pointer-events:none;
	visibility:hidden;
	animation:arrow-point 1s ease infinite alternate 3s;
	background-size:contain;
	background-repeat:no-repeat;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 10 10'%3E%3Cg fill='%23fff'%3E%3Cpath d='M.35 3.14h3.27v3.71H.35z'/%3E%3Cpath d='M2.23.7L9.65 5 2.23 9.3z'/%3E%3C/g%3E%3C/svg%3E");
	filter:drop-shadow(0 0 1px #000);
}

@keyframes arrow-point{
	0%{
		transform:translate(0em,0);
		visibility:visible;
	}
	100%{
		transform:translate(-.5em,0);
		visibility:visible;
	}
}

/*Text*/
.showpony-char-container{
	visibility:hidden;
	font-size:1em;
	color:inherit;
	font-weight:inherit;
	font-style:inherit;
}

.showpony-char{
	position:absolute;
	display:inline-block;
}

.showpony-char-anim{
	position:relative;
	display:inline-block;
}

.showpony-char-placeholder{
	visibility:hidden;
}

.showpony-char-container>.showpony-char{
	animation:kn-display 1s linear;
	animation-fill-mode:forwards;
}

@keyframes kn-display{
	0% {visibility:visible;}
	100% {visibility:visible;}
}

.showpony-char-shout>.showpony-char{
	animation:kn-shout .1s linear forwards;
}

@keyframes kn-shout{
	0% {visibility:visible;transform:scale(2);}
	100% {visibility:visible;transform:scale(1);}
}

.showpony-char-fade>.showpony-char{
	animation:kn-fade .1s linear forwards;
}

@keyframes kn-fade{
	0% {visibility:visible;opacity:0;}
	100% {visibility:visible;opacity:1;}
}

.showpony-char-blur>.showpony-char{
	animation:kn-blur 1s linear forwards;
}

@keyframes kn-blur {
  0% {
	  visibility:visible;
	opacity:0;
	filter:blur(.5em);
  }
  to {
	  visibility:visible;
	opacity:1;
	filter:blur(0em);
  }
}

.showpony-char-sing .showpony-char-anim{
	animation:kn-sing 1.5s ease-in-out infinite;
}

@keyframes kn-sing{
	0%{transform:translate(0,-.2em);}
	50%{transform:translate(0,.2em);}
	100%{transform:translate(0,-.2em);}
}

.showpony-char-shake .showpony-char-anim{
	animation:kn-shake .2s linear infinite;
}

@keyframes kn-shake{
	0%{transform:translate(.05em,.125em);} 
	25%{transform:translate(-.05em,-.125em);}
	50%{transform:translate(-.05em,.125em);} 
	75%{transform:translate(.05em,-.125em);} 
	100%{transform:translate(.05em,.125em);}
}

.showpony-kn-choice{
	text-align:left;
	display:block;
	background:none;
	color:white;
	width:100%;
	cursor:pointer;
	font-size:1em;
	transition:all .1s;
}

.kn-choice:hover{
	background-color:#fff;
	color:#000;
}

/***EDITOR***/

.showpony-editor-ui{
	visibility:hidden;
	
	background-color:rgba(0,0,0,.5);
	position:absolute;
	bottom:0;
	width:100%;
	z-index:5;
	
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}

.showpony-editor .showpony-editor-ui{
	visibility:visible;
	/*height:10%;*/
}

/*
.showpony-editor .showpony-content{
	height:80%;
	top:0;
}*/

.showpony-editor-icon{
	width:1em;
	height:1em;
}

.showpony-editor-ui>input{
	padding-left:1.75em;
}

.showpony-editor-ui>*{
	color:white;
	font-size:1.25em;
	
	background-color:rgba(0,0,0,0);
	border:1px solid white;
	
	background-size:1.25em;
	background-repeat:no-repeat;
	box-sizing:border-box;
}

.showpony-editor-ui>input:hover
,.showpony-editor-ui>label:hover{
	background-color:rgba(0,0,0,.25);
}

.showpony-editor-ui>input:hover
,.showpony-editor-ui>label:hover{
	background-color:rgba(0,0,0,1);
}

.showpony-editor-date{
	background-position:.25em 40%;
	flex-grow:3;
	width:20%;
}

.showpony-editor-name{
	background-position:.25em 50%;
	flex-grow:1;
	width:20%;
}

.showpony-upload-file{
	background-position:50% 60%;
}

.showpony-editor-ui>label
,.showpony-editor-ui>button{
	cursor:pointer;
	width:2.5em;
	min-height:1.25em;
}

.showpony-delete-file{
	background-position:50% 70%;
	background-color:rgba(255,0,0,.5);
}

.showpony-new-file{
	background-position:50% 80%;
	background-color:rgba(0,255,0,.5);
}

.showpony-logout{
	background-position:50% 90%;
}

/*SVG file*/
.showpony-button{
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='110' preserveAspectRatio='none'%3E%3Cg transform='translate(0 -28.956)'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.002' d='M2.695 39.85H.893v8.213h1.802m4.61 0h1.802v-8.212H7.305'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M9.107 38.067v-8.213H.894v8.213h3.767V35.38'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M6.13 33.907a1.47 1.47 0 0 1-1.47 1.47 1.47 1.47 0 0 1-1.47-1.47 1.47 1.47 0 0 1 1.47-1.47 1.47 1.47 0 0 1 1.47 1.47z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' d='M2.608 54.617s-1.37-1.17-1-1.938c.367-.768 1.94-2.844 1.904-.97l-.033 1.772s.434 3.742-1.102 3.475c-1.102-.768-.434-1.837-.434-1.837.768-.668 2.339-.902 2.472-1.637.134-.735.768-3.274.935-1.837.167 1.437.167 4.209.468 3.408.301-.802.835-3.742 1.203-3.074.367.668-.2 3.976.301 3.474.501-.501 1.136-2.907 1.136-2.907'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M.893 89.85h5.22l2.994 3.107v5.106H.893z'/%3E%3Cpath fill='none' stroke='%23fff' d='M9.107 93.181L6.112 89.85'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.002' d='M6.112 89.85l2.995 3.331H6.112z'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='.803' d='M.637 83.017l7.174-2.52 1.552 4.398-7.174 2.52z'/%3E%3Cpath fill='%23fff' d='M1.232 84.284l6.91-2.428.645 1.829-6.91 2.427z'/%3E%3Cellipse cx='5' cy='73.956' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' rx='4.219' ry='4.219'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M4.045 72.642L5 73.956l1.472-2.303'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.002' d='M.893 112.581h8.213v2.75H.893z'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.002' d='M6.375 109.85v8.213h-2.75v-8.213zM.893 102.581h8.213v2.75H.893z'/%3E%3Cpath fill='%23fff' d='M3.161 60.724A2.938 2.938 0 0 0 .224 63.66 2.938 2.938 0 0 0 3.16 66.6 2.938 2.938 0 0 0 6.1 63.66a2.938 2.938 0 0 0-2.938-2.937zm-.875 2a.938.938 0 0 1 .938.937.938.938 0 0 1-.938.938.938.938 0 0 1-.937-.938.938.938 0 0 1 .937-.937z'/%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.002' d='M6.67 63.042a.938.938 0 0 1-.682.43v.808H9.35v-.843a.938.938 0 0 1-.514-.395h-.291a.938.938 0 0 1-.791.437.938.938 0 0 1-.793-.437H6.67zM.893 119.849v8.214h8.214v-8.214H.893zm6.443 3.351a1.724 1.724 0 0 1 1.725 1.725 1.724 1.724 0 0 1-1.725 1.722 1.724 1.724 0 0 1-1.723-1.722 1.724 1.724 0 0 1 1.723-1.725z'/%3E%3Cg fill='%23fff'%3E%3Cpath d='M4.384 137.929a1.35 1.35 0 0 1-1.797.646 1.35 1.35 0 0 1-.646-1.797 1.35 1.35 0 0 1 1.796-.646 1.35 1.35 0 0 1 .647 1.797zM7.973 132.418c-.53 1.124-2.836 3.659-3.96 3.13-1.125-.53-.641-3.923-.112-5.047a2.25 2.25 0 1 1 4.072 1.917z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}