/*

	Copyright by Gummy Bear Studios

*/

/* html, body { height: 100%;  } */
body
{
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.container
{
	width: 100%;
	height: 100%;
	padding: 0;
	font-size: 12px;
	vertical-align: middle;
}

.inner
{
	position:absolute;
	color:#fff;
	top:50%;
	left:50%;
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translate(-50%,-50%);

margin-left:auto;
margin-right:auto;

	max-width:1024px;
	min-width: 320px;
	transform: translate(-50%,-50%);
}

.inner3
{
	width: 80%;
	max-width:800px;
	min-width:320px;
	margin-left:auto;
	margin-right:auto;
	padding: 0;
	position: relative;
	font: 18px/20px Verdana, Tahoma, Arial, sans-serif;
}


.inner2
{
	width: 80%;
	max-width:800px;
	min-width:320px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	top: 50px;
	font: 18px/20px Verdana, Tahoma, Arial, sans-serif;
}


.clear
{
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

#logo
{
	width: 100%;
	display: block;
	border: 0px;
	padding: 0px;
	margin: 0px;
}

.sel
{
	font-weight: bold;
	border-bottom: 1px dashed #f30e50;
}

.uns
{
	font-weight: bold;
	color: #404040;
}


.menu
{
	text-align:justify;
	width:100%;
	font: 22px/26px Verdana, Tahoma, Arial, sans-serif;
}
.menu * {display: inline;}
.menu span
{
	display: inline-block;
	width: 100%;
}

.centered
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
	display: block;
	text-align: center;
}

#hx
{
	width: 50%;
	position:relative;
}

#hx:hover
{
/*	background-color: #f30e50;*/
	background-color: #F5F5F5;
}

/*
#hx a:hover
{
	color: #FFFFFF;
}
*/

.justified
{
	text-align: justify;
}

.hcolored h1,h2,h3,h4
{
	color:#f30e50;
}

.rounded
{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-o-border-radius:10px;
	-khtml-border-radius:10px;
	border-radius:10px;
	padding: 14px;
}

.lightGray
{
	background-color: #F9F9F9;
}

.largerFont
{
	font-size: 110%;
}

.half
{
	width: 50%;
}

.subt
{
	color:#808080;text-align:right;width:100%;
	font: 14px/16px Verdana, Tahoma, Arial, sans-serif;
}

.btm
{
	flex: 0 0 20px;/*or just height:50px;*/
	margin-top: auto;
	margin-bottom:0px;
	height: 20px;
	width: 100%;
/* 
	position: fixed;
 */
	text-align: center;
	color: #a0a0a0;
/* 	background-color: #ffffff; */
	vertical-align:bottom;
/* 	font: 14px/16px Verdana, Tahoma, Arial, sans-serif; */
	font: 12px/14px Verdana, Tahoma, Arial, sans-serif;
}

.btm2
{
	margin-left: auto;
	margin-right: auto;
	height: 30px;
	width: 100%;
	text-align: center;
	color: #a0a0a0;
	vertical-align:bottom;
	font: 14px/16px Verdana, Tahoma, Arial, sans-serif;
}


.sp0{margin-top:0px;display:inline-block;}
.sp1{margin-top:40px;display:inline-block;}

.le {width:50%;text-align:right;margin:0px;padding:0px;float:left;}
.ri {width:50%;margin:0px;padding:0px;float:left;}

.inp
{
	width:300px;
}

.inp1 {width: 200px; display: inline;}

.it
{
	border: 1px solid #808080;
	font: 22px/26px Verdana, Tahoma, Arial, sans-serif;
}

.it:hover, .it:focus
{
	border: 1px solid #f30e50;
}

.itb
{
	font-weight: bold;
}

.itb:hover
{
	color: #f30e50;
}

.par
{
	text-align: justify;
}


textarea {width:100%;}

#works
{
	width:100%;
}

.wi
{
	width:25%;
	margin: 0px;
	float: left;
}

.wi:hover
{
	background-color: #EEEEEE;
}

.wi0
{
	margin: 10px;
}

.wi1
{
	width: 100%;
	margin-top: 0px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	font: 12px/14px Verdana, Tahoma, Arial, sans-serif;
}

.wi0 img {width:100%;}


.wi0 div
{
	background-color: #cccccc;
	position: relative;
	display: none;
	height:100px;
}

.wi0 a:hover + div
{
	display: block;
}


.space
{
	display:inline-block;
	width: 100%;
	height: 40px;
	text-align: center;
	font: 12px/14px Verdana, Tahoma, Arial, sans-serif;
}

a:link {color:#000000;text-decoration:none;}
a:visited {color:#000000;text-decoration:none;}
a:hover {color:#f30e50;text-decoration:none;}
a:active {color:#000000;text-decoration:none;}


p.par a:link {color:#f30e50;text-decoration:none;}
p.par a:visited {color:#f30e50;text-decoration:none;}
p.par a:hover {color:#f30e50;text-decoration:none;}
p.par a:active {color:#f30e50;text-decoration:none;}


@media all and (max-width: 800px)
{
	.uns, .sel
	{
		font-weight: bold;
		font-size: 16px;
	}

	#hx
	{
		width:80%;
		font-size: 16px;
	}
}

@media all and (max-width: 640px)
{
	.uns, .sel
	{
		font-weight: bold;
		font-size: 14px;
	}

	.par
	{
		font-size: 16px;
	}
}