/****************************************
  ==== RESETS
****************************************/

html, body, div, canvas {
  margin: 0;
  padding: 0;
}

::-moz-selection {
  color: #333;
  text-shadow: none;
}

::selection {
  color: #333;
  text-shadow: none;
}

.clear:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clear {
  display: inline-table;
  clear: both;
}

/* Hides from IE-mac \*/

* html .clear {
  height: 1%;
}

.clear {
  display: block;
}

/* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/

* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
}

body.template {}

.template .template-wrap {}

.template .template-wrap canvas {}

div#loadingBox {
  width: 100%;
  height: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}

div#bgBar {
  position: absolute;
  width: 200px;
  margin-left: -100px;
  left: 50%;
  height: 5px;
  display: block;
  background-color: black;
}

div#progressBar {
  left: 50%;
  position: absolute;
  margin-left: -100px;
  width: 0px;
  height: 5px;
  background-color: #5FF3FF;
  border-radius: 2px;
}

div#bgBar {
  border-radius: 5px;
}

p#loadingInfo {
  color: white;
  letter-spacing: 1px;
  position: absolute;
  width: 100%;
  font-family: 'Exo 2', sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  margin-top: 40px;
}

.download {
  margin-right: 20%;
  margin-left: 6%;
  height: 256px;
  width: 256px;
  background: url('download.png');
}

.download:hover {
  background: url('download_hoover.png');
}

.webGl {
  margin-left: 6%;
  height: 256px;
  width: 350px;
  background: url('webgl.png');
}

.webGl:hover {
  background: url('webgl_hoover.png');
}

#selector {
  /*padding: 10%;*/
  margin: auto;
  padding-top: 10vh;
  width: 100%;
  text-align: center;
}

.linkText {
  color: #3D3D3D;
  font-size: 22;
  display: block;
  font-family: 'Exo 2', sans-serif;
}

.logo {}

.logo_container {
  width: 100%;
  text-align: center;
  margin-top: 10%;
  margin-top: 10vh;
}

div.item {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  width: 50%;
}

/* unvisited link */

a:link {
  color: #3D3D3D;
  text-decoration: none;
}

/* visited link */

a:visited {
  color: #3D3D3D;
  text-decoration: none;
}

/* mouse over link */

a:hover {
  color: #3D3D3D;
  text-decoration: none;
}

/* selected link */

a:active {
  color: #3D3D3D;
  text-decoration: none;
}