body {
background:url(bg.jpg) repeat #000; 
font:18px/22px 'PT Serif', "lucida sans unicode", "lucida grande", helvetica, arial, verdana, sans-serif;
color:#fff;
margin:0;
padding:0;
}

header {
margin:20px auto 0;
width:900px;
height:534px;
text-align:center;
position:relative;
}

header a img { 
border:0;
background:none;
margin:0;
padding:0;
border-radius:5px 10px;
transition:border-radius 0.5s ease;
}

header a img:hover {
border-radius:40px;
}

.title {
position: absolute;
top:45%;
left:50%;
transform: translate(-50%, -50%);
color:#fff;
text-shadow:0 2px 2px #0d131b;
font:45px  'Playfair Display', "Open Sans Condensed", georgia, 'times new roman', serif;
font-weight:850;
font-style:italic;
}

nav {
margin:0 auto 38px;
}

nav ul { 
margin:0;
text-align:center;
}

nav ul li {
display:inline;
list-style-type:none;
margin:0;
padding:0;
border-left:3px solid #acd1e3;
}

nav ul li:first-child { border-left:0; }

nav ul li a {
font:25px/10px  'Playfair Display', "Open Sans Condensed", georgia, 'times new roman', serif;
font-weight:850;
font-style:italic;
color:#fff;
text-decoration:none;
padding:10px;
text-shadow:0 2px 2px #335fae;
transition:color 0.5s ease;
}

nav ul li a:hover { color:#acd1e3; }

section {
margin:20px auto 20px;
padding:20px 20px 5px;
width:860px;
border-radius:40px;
background:rgba(0,0,0,0.4);
text-align:left;
}

h1 {
margin:0 0 -10px;
font: 30px 'Old Standard TT', "Open Sans Condensed", 'lucida sans unicode', arial, sans-serif;
color:#fff;
font-weight:700;
text-transform:lowercase;
text-shadow:0 2px 2px #666;
}

h2, h4 {
margin:0 0 -10px;
font: 25px 'Old Standard TT', "Open Sans Condensed", 'lucida sans unicode', arial, sans-serif;
color:#fff;
text-transform:lowercase;
text-shadow:0 2px 2px #666;
}

blockquote + h2 { margin-top:20px; }

h3 {
margin:-10px 0 -5px;
font: 20px 'Old Standard TT', "Open Sans Condensed", 'lucida sans unicode', arial, sans-serif;
color:#fff;
text-align:center;
text-transform:lowercase;
clear:both;
text-shadow:0 2px 2px #666;
}

a { color:#aa2b31; font-weight:bold; cursor:crosshair; transition:color 0.5s ease; }
a:hover { color:#c03d34; }


b, strong { font-family:'Playfair Display', 'lucida sans unicode', arial, sans-serif; color:#4096e7; font-weight:700; }
i, em { font-family:'Playfair Display', 'lucida sans unicode', arial, sans-serif; color:#4096e7; font-weight:700; }
.center { text-align:center; }
p.right { text-align:right; line-height:15px; padding-bottom:0; clear:both; }
small { font-size:14px; line-height:18px; }
span { color:#aa2b31; font-weight:700; font-family:'Playfair Display', 'lucida sans unicode', arial, sans-serif; }
p.clear { clear:both; }


blockquote {
border-left:5px solid #4096e7;
margin:20px 10px 0px;
}
blockquote p { margin:0px !important; padding:0px 5px; }
blockquote:hover { border-color:#aa2b31; }

blockquote span:nth-of-type(odd) { color:#4096e7; }


img, a img { border:1px solid #4096e7; padding:5px; margin-right:6px; background:#4096e7; transition:border 0.5s ease, background 0.5s ease; }
img:hover { border-color:#b4473c; background:#b4473c; }
img.right { float:right; margin:0 0 5px 8px; }
img.left { float:left; margin:0 5px 5px 0; }


span.site {
font: 24px PrintBoldRegular, 'lucida sans unicode', arial, sans-serif;
color:#624555;
text-transform:uppercase;
}


ul li { list-style-type:square; }
ol.arrange, blockquote.tl { font-size:16px; line-height:20px; }


input, textarea {
background:rgba(0,0,0,.5);
padding:2px;
border:3px solid #4096e7;
font:18px/24px 'PT Serif', "trebuchet ms", tahoma, verdana, arial, sans-serif;
color:#fff;
margin:5px 0px;
}

option, select { 
padding:2px;
border:3px solid #4096e7;
font:18px/24px 'PT Serif', "trebuchet ms", tahoma, verdana, arial, sans-serif;
color:#fff;
margin:5px 0px;
background:rgba(0,0,0,.5);
}

input:focus, textarea:focus, select:focus { border-color:#b4473c; }

option { 
border-width:0px;
background:#000;
}

.help {
cursor:help;
}

code {
font-family:"Ubuntu Mono", "courier new", monospace;
}

.fan {
display:block;
width:33%;
float:left;
height:120px;
background:URL(paragrade.png) center left no-repeat;
}

.fan p {
padding-left:120px;
}

.fan strong {
color:#ccc;
}

.paragon {
background:url("paragon.png") center left no-repeat;
}

.renegade {
background:url("renegade.png") center left no-repeat;
}

/* responsive */

@media (min-width:800px) and (max-width:1200px) {
    
    
}

@media (min-width:1000px) and (max-width:1200px) {
    

}

@media (min-width:1200px) and (max-width:1400px) {


}

@media (min-width:1400px) {



}