@CHARSET "UTF-8";

body {
	position: relative;
	margin: 0;
	padding: 0;
	/* background: #d4d4d4; */
	/* background: url('/img/bg.png') no-repeat center; */
	background: #a89df0;
}

.logo {
	width: 32em;
	margin: 1em auto;
	padding: 1em;
	text-align: center;
	font-size: 18pt;
	color: #349dff;
	background: rgba(032,032,032,0.95);
	border-style: none;
	border-radius: 25px;
	-webkit-transition: 0.5s;
	   -moz-transition: 0.5s;
	        transition: 0.5s;
}

.logo:hover {
	/* There ain't nothin' yet */
}

.navbar {
	display: block;
	background: #222;
	padding: 0.5em;
	border-bottom: 2px solid #000;
}

.header {
	display: block;
	font-family: "Open Sans", "Helvetica", sans-serif, serif;
	color: #28a04f;
	font-size: 52pt;
	text-decoration: none;
	/* text-shadow: 0.05em 0.05em rgba(000,000,000,0.5); */
	display: none;
}

.separator {
	font-size: 52pt;
	color: #000;
}

.navbar-site-nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: #222;
}

.navbar-site-nav li {
	float: left;
}

/*
.navbar-site-nav li a svg rect:hover {
	fill: rgb(255,128,128);
}
*/

.navbar-navlink {
	display: block;
	position: relative;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
	font-family: "Open Sans", "Helvetica", sans-serif, serif;
	color: #bbb;
	font-size: 22pt;
	text-transform: uppercase;
	text-decoration: none;
	background: transparent;
	/*
	-webkit-transition: 0.2s;
	   -moz-transition: 0.2s;
	        transition: 0.2s;
	*/
}

.navbar-navlink:hover {
	color: #444;
}

.navbar-navlink[href="/"]:hover {
	background: #8f8;
}

.navbar-navlink[href="/videos"]:hover {
	background: #f88;
}

.navbar-navlink[href="/about"]:hover {
	background: #88f;
}

.navbar-navlink[href="/contact"]:hover {
	background: #f8f;
}

.navbar-navlink[href="/media"]:hover {
	background: #ff8;
}

.navbar-navlink:active {
	top: 1px;
}

.footer {
	/* display: block; */
    display: none;
	position: absolute;
	bottom: 0;
	padding: 0.5em;
	background: #222;
}

.footer p {
	color: #bbb;
}

.square2circle {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background: #8ff;
	border-style: none;
	border-radius: 50%;
	-webkit-transition: 1s;
	   -moz-transition: 1s;
	        transition: 1s;
}

.square2circle:hover {
	background: #ff8;
	border-radius: 0;
}

.circle2square {
	width: 100px;
	height: 100px;
	margin: 0 auto;
	background: #f8f;
	border-style: none;
	border-radius: 50%;
	-webkit-transition: 1s;
	   -moz-transition: 1s;
	        transition: 1s;
}

.circle2square:hover {
	background: #8f8;
	border-radius: 0;
}

@media screen and (max-width: 779px) {
	.logo { display: none; }
	.navbar-site-nav li {}
}