/* RESET */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

body { 
  line-height: 1.5; 
}

table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

a img { border: none; }


/* STYLE */

html, body { 
	font-family: 'Roboto Mono', monospace;
	font-size: 12px;
	color: #fff;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

body {
	display: table;
	background-color: #21776c;
}

#particles {
	background-color: #21776c;
	background-image: url('');
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -999;
}

#particles canvas{
	display: block;	
	width: 100%;
	height: 100%;
	z-index: -999;
}

#wrapper {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

#logo {
	padding: 0 50px;
}

#logo img {
	max-width: 1200px;
    width: 100%;
}


#content {
	max-width: 800px;
    width: 100%;
    margin: 0 auto;
    /*color: rgb(94, 165, 155);*/
    color: rgba(255, 255, 255, 0.8);
}

#content h1 {
	margin-bottom: 20px;
	font-size: 28px;
	font-weight: 300;
}

#content h2 {
	margin-bottom: 80px;
	font-weight: 200;
	font-size: 22px;
	color: rgba(255, 255, 255, 0.7);
}

#content .link a {
	font-weight: 200;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}


@media only screen and (max-width: 1500px) {

	#logo {
		padding: 0 60px;
	}

	#logo img {
		max-width: 1000px;
	}

	#content h1 {
		font-size: 24px;
	}

	#content h2 {
		font-size: 20px;
		margin-bottom: 60px;
	}

	#content .link a {
		font-size: 18px;
	}

}


@media only screen and (max-width: 1000px) {

	#logo {
		padding: 0 20px;
	}

	#logo img {
		max-width: 800px;
	}

	#content h1 {
		font-size: 20px;
	}

	#content h2 {
		font-size: 18px;
		margin-bottom: 40px;
	}

	#content .link a {
		font-size: 16px;
	}

}


@media only screen and (max-width: 720px) {

	#logo {
		padding: 0 20px;
	}

	#logo img {
		max-width: 600px;
	}

	#content h1 {
		font-size: 14px;
	}

	#content h2 {
		font-size: 12px;
		margin-bottom: 30px;
	}

	#content .link a {
		font-size: 11px;
	}

}