html { width:100%; background:black url('img/bg.jpg') no-repeat fixed center; background-size:cover; overflow-y:scroll; font-size:13px; }

* { margin: 0; padding: 0; }

body { width:auto; font:1em 'Open Sans', sans-serif; letter-spacing:0.04em; color:#aaf; }


h1, h2, h3, h4, h5, h6 { color:#ccf; letter-spacing:0.05em; padding:0.25em 0; }

p { padding:0.5em; line-height:1.6em; }

a { outline:none; text-decoration:none; color:#dde; }

a:hover { color:#ffffff; }

ul { padding:0.5em 1em; line-height:2em; }

hr { margin:1em 0; border-color:#333; }

img { border:0; }

strong { color:#ccf; letter-spacing:0.05em; }

.grey { color:#888; font-size:90%; }
.red { color:red; }

.i { font-style:italic; }

.clr { clear:both; }

/* Paypal */
select { padding:0 0.25em; }

/* Header */

header img { width:100%; padding:2em 0; }

nav { text-align:right; margin:-3em 3em 0.5em 0; }
 
nav a {
 color:#aaf;
 text-decoration:none;
 font-size:1em;
 display:inline-block;
 padding:0 0.8em;
}

nav a.url, nav a:hover { color:#fff; }


/* Main Content */

#main { background:transparent url('img/transparent.png') repeat; margin:0 2%; border:1px solid #000; overflow:hidden; } 

/*#content { text-align:left; padding:40px 60px; margin:0; }*/
#content { text-align:left; padding:4em; margin:0; }

/* Sidebar & Panels */
#sidebar { float:right; width:230px; margin:25px 25px 0 40px; }

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-container a { margin:2% 3%; }

.vbox, .hbox, .panel { color:#aaf; background:#1d1d1d; border:1px solid #000; }

.vbox { padding:20px 25px; margin-bottom:25px; }

.vbox p, .panel p { line-height:2em; }

.hbox { width:16em; text-align:center; padding:1.5vw; }

.panel { padding:2em; margin:3em 1em; text-align:center; }

.vbox:hover, .hbox:hover { background:#282838; }

.tbox { flex-basis:25em; align-self:center; }

.ppdiv { width:16em; padding-bottom:2em;}

 iframe.audio { width:300px; height:300px; padding:5px; }
 iframe.video { width:450px; height:300px; padding:5px; }

#footer { font-size:0.8em; padding: 1em 4%; clear:both; }
#footer span { display:inline; }

#top { position: fixed; bottom: 2em; right: 1.5em; z-index: 1; display: none; }


.fr { float:right; }

.pr { float:right; font-size:2.6em; margin:0 30px 0 -30px; }

.left { float:left; text-align:center; width:auto; margin-right:10px; }

.right { float:right; color:#4af; text-align:center; width:auto; margin-left:10px; }

.center { display:block; text-align:center; }


/* Forms */

input, textarea { font:1em 'Open Sans', sans-serif; letter-spacing:0.04em; }

.error { color:#f22; padding-left:1em; }

#form_div { margin:auto; max-width:900px; padding:1em 3em; background-color: rgba(64,64,64,0.1); }

#form_div textarea { resize: vertical; }

#form_div input, #form_div textarea { color:white; background-color:transparent; outline:none; border:none; border-bottom:1px solid white; width: 100%; padding:1em 0; margin:0.5em; }

#form_div input[type=submit] {
	cursor: pointer;
    background:rgba(255,255,255,.1);
	border:none;
    color: white;
    text-decoration: none;
    padding: 1em 2em;
	width:10em;
	transition:background .5s;
}

#form_div input[type=submit]:hover { background:rgba(255,255,255,.25); }


/* OLD Forms */
.error { color:red; }

legend { padding:0.3em; margin:0 1em; }

fieldset { margin:0 15px; }

#form { max-width:42em; border:1px solid #99a; padding:1em; }

#form textarea { border:1px solid #aaf; padding:2px; margin:8px; }

#form input { padding:1px; margin:6px; }

#form textarea:focus { border:1px solid #c0c0c0; outline:2px solid #aaf; }


@media screen and (max-width: 4000px) { body {font-size:20px;} }
@media screen and (max-width: 2560px) { body {font-size:16px;} }
@media screen and (max-width: 1920px) { body {font-size:13px;} }
@media screen and (max-width: 1600px) { body {font-size:12px;} }
@media screen and (max-width: 1280px) { body {font-size:10px;} }

@media screen and (max-width: 800px){ #sidebar {display:none;} .ppdiv { padding-bottom:3em;} }

@media screen and (max-width: 650px) { body {font-size:9px;} .fr {float: none;} nav {text-align:center; margin:-2em 0 0.5em 0;} #footer span {display:block; text-align:center;} }

@media screen and (max-width: 450px){ iframe.video {width:300px; height:200px;} }
@media screen and (max-width: 320px){ iframe.audio { width:280px; height:280px; } iframe.video {width:280px; height:180px;} }
@media screen and (max-width: 280px){ body {font-size:8px;} iframe.audio { width:250px; height:250px; padding:0; } iframe.video {width:250px; height:150px; padding:0 5px; } }