@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 400;
	src: url(/styles/fonts/FiraSans-Italic.woff2) format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 400;
	src: url(/styles/fonts/FiraSans-Regular.woff2) format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: italic;
	font-weight: 700;
	src: url(/styles/fonts/FiraSans-BoldItalic.woff2) format('woff2');
}
@font-face {
	font-family: 'Fira Sans';
	font-style: normal;
	font-weight: 700;
	src: url(/styles/fonts/FiraSans-Bold.woff2) format('woff2');
}
@font-face {
  font-family: "Dreamscape";
  src: url('/styles/fonts/Dreamscape.woff2') format('woff2');
}
@font-face {
  font-family: "Dreamscape Sans";
  src: url('/styles/fonts/Dreamscape Sans.woff2') format('woff2');
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


body{
	background:#060b11;
	font-family: 'Fira Sans', sans-serif;
	line-height: 1.5;
}

a {
	color: #ddd;
}
a:visited {
	color: #ddd;
}
a:hover {
	cursor: pointer;
}
p{

	color: rgb(220,220,220);
}

.top{
	background-size: cover;
	width: 100%;
	text-align: center;
	background-position: 0 -15.38rem;
	overflow: auto;
	position:relative;
}
.top::before{
	width: 100%;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	content: "";
	background: url(/gfx/frontimages/wf_logo_bg.jpg);
	/*background-size: cover;*/
	background-position: center 64%;
	z-index:-1;
	filter: blur(3px);
}
.logo{
	font-family: Dreamscape;
	text-align: center;
	font-size: 5rem;
	color: #f8f8f8;
	margin-top: 5rem;
	text-shadow: 2px 2px 0 #000;
}


.loginwrap{
	padding: 1rem;
	border-radius: 0.62rem;
	background: rgba(0,0,0,0.6);
	width: 23rem;
	margin: auto;
	border: 0.08rem solid rgba(255,255,255,0.3);

}

.loginwrap input{
	display: block;
	width: 100%;
	padding: 0.23rem;
	background: rgba(0,0,0,0.4);
	text-align: center;
	border: none;
	margin-bottom: 0.62rem;
	color: #f2f2f2;
	font-size: 140%;
}
.loginwrap input:first-of-type{
	border-radius: 0.46rem 0.46rem 0 0 ;
}
.loginwrap input:placeholder{
	color: #f2f2f2;
}

.loginbutton{
	background: rgba(0,153,204,0.8);
	width: 50%;
	font-family: 'Fira Sans', sans-serif;
	font-weight: bold;
	padding: 0.77rem;
	box-sizing: border-box;
	display: inline-block;
	color: #f2f2f2;
	cursor: pointer;
	text-decoration: none;
	border: none;
}
.loginbutton:first-of-type:hover{
	background: rgba(0,153,204,1);
}
.loginbutton:first-of-type{
	border-radius: 0 0 0 0.46rem;
}
.loginbutton:last-of-type{
	border-radius: 0 0 0.46rem 0;
	background: rgba(102,204,102,0.8);
}
.loginbutton:last-of-type:hover{

	background: rgba(102,204,102,1);
}

.top h1{

	color: #f2f2f2;
	font-size: 300%;
	/*margin-top: -3.85rem;*/
	margin-bottom: 3.85rem;
	letter-spacing: 0.15rem;
	text-shadow: 0.08rem 0.15rem #000;
}

.warringfactions{

	padding: 6.15rem 0;
	background: url(/gfx/frontimages/spacetile.jpg) repeat;
	width: 100%;
	color: #f2f2f2;
	text-align: center;
	box-shadow: 0 0 0.77rem 0.15rem #000;
	position: relative;
	z-index:2;
}

.warringfactions h2, .colonies h2, .fleets h2, .space h2, .createaccount h2{
	font-family: "Dreamscape Sans";
	text-shadow: 0.08rem 0.15rem #000;
	font-size: 300%;
	text-align: center;
	letter-spacing: 0.5rem;
	margin-bottom: 1.54rem;
	font-weight: bold;
}
.warringfactions p, .fleets p, .space p{
	font-size: 130%;
	max-width: 76.92rem;
	margin: auto;
	font-weight: 300;
	padding: 1rem;
}


.colonies{

	padding: 6.15rem 0;
	width: 100%;
	color: #f2f2f2;
	text-align: center;
	position:relative;
}
.colonies::before{
	width: 100%;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	content: "";
	background: url(/gfx/frontimages/wf_colony_management.jpg); 
	background-size: cover;
	background-position: 0% 50%;
	z-index:-1;
	filter: blur(0.2rem);
}
.colonies p, .fleets p, .space p{
	font-size: 130%;
	max-width: 76.92rem;
	margin: auto;
	font-weight: 300;
	text-align: left;
	padding: 2.31rem;
	background: rgba(0,0,0,0.75);
	overflow: auto;
	border-radius: 0.62rem;
	border: 0.08rem solid rgba(0,0,0,0.3);
	box-shadow: inset 0 0 0.31rem rgba(0,0,0,0.2);
	text-shadow: 1px 1px rgb(15,15,15);
}

.colonies p img, .fleets p img, .space p img{
	float: left;
	margin-right: 1.54rem;
	overflow: hidden;
	max-width: 30.77rem;
	width: 100%;
}

#resp{

	overflow: hidden;
	max-width: 700px;
	width: 100%;
}
.fleets{

	padding: 6.15rem 0;
	width: 100%;
	color: #f2f2f2;
	text-align: center;
	position:relative;
}
.fleets::before{
	width: 100%;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	content: "";
	background: url(/gfx/backgrounds/ship_fleet_capital_1.jpg);
	background-size: cover;
	background-position: 0% 50%;
	z-index:-1;
	filter: blur(3px);
}

.space{

	padding: 6.15rem 0;
	width: 100%;
	color: #f2f2f2;
	text-align: center;
	position:relative;
}
.space::before{
	width: 100%;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	content: "";
	background: url(/gfx/backgrounds/generic_bg_8.jpg);
	background-size: cover;
	background-position: 0% 50%;
	z-index:-1;
	filter: blur(3px);
}

.createaccount{
	padding: 6.15rem 0;
	width: 100%;
	color: #f2f2f2;
	text-align: center;
	box-shadow: 0 0 0.77rem 0.15rem #000;
	position: relative;
	z-index:2;
	overflow: auto;
}
.colonies::before{
	width: 100%;
	height: 100%;
	position:absolute;
	left:0;
	top:0;
	content: "";
	background: url(/gfx/backgrounds/colony_capital_1.jpg);
	background-size: cover;
	background-position: 0% 50%;
	z-index:-1;
	filter: blur(0.2rem);
}

small{
	font-size: 80%;
}

.createwrap{
	padding: 0.62rem;
	border-radius: 0.62rem;
	background: rgba(0,51,102,0.5);
	max-width: 61.54rem;
	margin: auto;
	overflow: auto;
	border: 0.08rem solid rgba(255,255,255,0.3);
}

.createwrap span{
	width: 100%;
	background: rgba(255,255,255,0.2);
	display: block;
	border-radius: 0.46rem 0.46rem 0 0 ;
	font-weight: bold;
}
.inputwrap{
	background: rgba(0,0,0,0.3);
	border-radius: 0 0 0.46rem 0.46rem;
	margin-bottom: 0.77rem;
}
.createwrap small{
	padding: 0.38rem;
	display: block;
	font-weight: 300;
}

.inputwrap input{
	font-size: 140%;
	padding: 0.23rem;
	background: rgba(0,0,0,0.4);
	text-align: center;
	border: none;
	margin-bottom: 0.62rem;
	color: #f2f2f2;

}
.pickfaction{
	font-size: 80%;
	font-weight: 300;
	cursor: pointer;
	padding: 1.15rem;
	background: rgba(0,0,0,0.3);
	border-bottom: 0.15rem solid rgba(0,0,0,0.5);
	clear: left;
}
.pickfaction img{

	float: left;
	margin-right: 1.54rem;
}
.pickfaction p { text-align: left; }

.pickfaction h4{

	font-size: 150%;
	font-weight: bold;
}
.pickfaction:hover{
	background: rgba(255,255,255,0.1);
}

.facselected{
	background: rgba(255,255,255,0.3);
}
#agreeterms{
	margin: 0.77rem;
}
.loginwrap p{
	color: #f2f2f2;
	font-size: 120%;
}
.gamelink{
  border: 0.05rem solid rgba(0,0,0,.5);
  box-shadow: -2px 2px rgba(50,50,50,0.75) inset, 2px -2px rgba(70,70,70,0.75)inset;
	padding: 0.7rem 1rem;
	transition: box-shadow 0.2s ease-in-out;
	border-radius: 0.2rem;
	margin: 1rem;
	background: linear-gradient(to bottom right, hsl(0,0%,12.156862745098%) 25%, hsl(0,0%,7.156862745098%) 75%);
	display: inline-block;
	color: #ccc;
	text-decoration: none;
}
.gamelink:not([disabled]):hover {
  box-shadow: 0 2px rgba(255,255,255,0.1) inset, 0 -60px rgba(255,255,255,0.1) inset !important;
 cursor: pointer;
   border: 0.05rem solid rgba(0,0,0,.1);
   text-decoration:none;
}
.openc{
	display: none;
}
#cbutton{
	background: rgba(0,153,204,0.8);
	width: 50%;
	font-family: 'Fira Sans', sans-serif;
	font-weight: bold;
	padding: 0.77rem;
	box-sizing: border-box;
	display: inline-block;
	color: #f2f2f2;
	cursor: pointer;
	border-radius: 0.31rem;
	box-shadow: 0.15rem 0.15rem #3FF;
	text-decoration: none;
}


.footer {
	text-align: center;
	padding: 6.15rem;
	color: #f2f2f2;
	margin: auto;
	font-size: 130%;
	max-width: 76.92rem;
	font-weight: 300;
}


@media (max-width: 1024px){

	.top h1{
		color: #f2f2f2;
		font-size: 200%;
		margin-bottom: 3.85rem;
		letter-spacing: 0.075rem;
		text-shadow: 0.08rem 0.15rem #000;
	}
}
@media (max-width: 800px) {

	.top h1{

		color: #f2f2f2;
		font-size: 100%;
		margin-bottom: 3.85rem;
		letter-spacing: 0.075rem;
		text-shadow: 0.08rem 0.15rem #000;
	}
	.colonies p, .fleets p, .space p, .warringfactions p{
		text-align: center !important;
		font-size: 110% !important;
		display: block !important;
	}

	.colonies p img, .fleets p img, .space p img{
		display: block;
		margin: auto;
		text-align: center !important;
		float: none !important;
	}
	
	.logo{
		font-size: 3.5rem;
	}
	
	.loginwrap{
		width: 18rem;
	}
	
	.warringfactions h2, .colonies h2, .fleets h2, .space h2, .createaccount h2{
		font-size: 200%;
	}
	
	.footer {
		padding: 1rem;
		font-size: 100%;
		font-weight: 300;
	}
}

.nowrap {
	white-space: nowrap;
}