.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}



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

* { 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
****************************************/

html, body { width: 100%; height: 100%; font-family: monospace; }
body { }
canvas { width: 100%; height: 100%; position: absolute; }

body.template { }
.template .template-wrap { }
.template .template-wrap canvas { }

/****************************************
  ==== LOADING
****************************************/

div#loadingBox {
  width: 100%;
  height: 500px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  text-align: center;
}
div#logo{
  background: url('progressLogo.Light.png');
  position: absolute;
  width: 154px;
  height: 130px;
  margin-left: -77px;
  margin-top: -65px;
  left: 50%;
  display: block;

}
#spinner{
   display: none; 
   width: 24px;
   height: 24px;
   position: absolute;
   left: 50%;
   margin-top: 60px;
   margin-left: -61px;
}
div#bgBar {
  position: absolute;
  width: 200px;
  margin-left: -100px;
  margin-top:60px;
  left: 50%;
  height: 16px;
  display: block;
  background-color: transparent;
  border-style: solid;
  border-width: 2px;
  border-radius: 2px;
  border-color: #729ebb;
}
div#progressBar {
  left: 50%;
  position: absolute;
  margin-left: -100px;
  margin-top:62px;
  width: 0px;
  height: 16px;
  background-color: #729ebb;
  border-radius: 2px;
}

p#loadingInfo {
color: #fff;
  letter-spacing: 1px;
  position: absolute;
  width: 100%;
  font-family: "Verdana", sans-serif;
  margin-left: 12px;
  text-align: center;
  font-size: 16px;
  margin-top: 60px;

}

div#androidButtonHolder {
     zoom: 2;
    -moz-transform: scale(2);
    position:absolute;
    left:50%;
    top:25%;
    width:154px;
    height:130px;

    margin-left:-77px; /* -1/2 width */
    margin-top:-65px; /* -1/2 height */
    background: url('progressLogo.Light.png');
}

#redirectinfo{
  background-color:#fff;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #109ba5;
  font-size: 20px;
  font-family: Helvetica;
  text-decoration: none;
}

#redirectcontainer a{
  background-color:#fff;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #109ba5;
  font-size: 20px;
  font-family: Helvetica;
  text-decoration: none;
}

#redirectcontainer{
    top: 50%;
    left: 50%;
    height: auto;
    margin-left: -200px;
	margin-top: -100px;
    width: 400px;
    position: fixed;
    background-color: #fff;
    display: inline-block;
}

#redirectcontainer img{
  margin-top: -200px;
}

#gameContainer{
	background-color: #FFFFFF;
}


/* #host-container{
  /* display: flex;
  position: absolute;
  top: 400px;
  height: 300px;
  z-index: 1; */
  /* position: absolute;
  top: 0px;
  width: 30%;
  left: 35%;
  margin: 0 auto;
  display: flex;
  z-index: 1; */


#host-container video{
  position: relative !important;
}

.host-max
{
    position: absolute;
    top: 0px;
    width: 65%;
    left: 17.5%;
    display: inline;
    z-index: 1;
}

.host-min
{
  position: absolute;
  top: 0px;
  width: 30%;
  left: 35%;
  margin: 0 auto;
  display: flex;
  z-index: 1;
}

#screenshare-container video{
  position: relative !important;
}

.remote-container{
  position: absolute;
  top: 42.5%;
  width: 95%;
  left: 2.5%;
  margin: 0 auto;
  display: flex;
  z-index: 1;
  visibility: hidden;
  height: 20%;
}

.remote-container-large
{
  position: absolute;
  top: 42.5%;
  width: 95%;
  left: 2.5%;
  margin: 0 auto;
  display: flex;
  z-index: 1;
  visibility: hidden;
  height: 40%;
}

.remote-container-bottom
{
  position: absolute;
  top: 65%;
  width: 95%;
  left: 2.5%;
  margin: 0 auto;
  display: flex;
  z-index: 1;
  visibility: hidden;
  height: 20%;
}

.remote-container div
{
  width: 12.5%;
  margin: auto;
}

.remote-container-large div
{
  width: 25%;
  margin: auto;
}

.remote-container-bottom div
{
  width: 12.5%;
  margin: auto;
}


.remote-container video{
  position: relative !important;
}

.remote-container-large video{
  position: relative !important;
}

.remote-container-bottom video{
  position: relative !important;
}


#me{
  position: absolute;
  top: 10%;
  width: 17%;
  height: 17%;
  left: 75%;
  z-index: 2;
}

#me video{
  position: relative !important;
}

#viewers
{
  position: absolute;
  top: 0px;
  z-index: 1;
  color: white;
  margin-top: 10px;
  margin-left: 10px;
}

#buttons
{
  position: absolute;
  top: 95%;
  z-index: 1;
  color: white;
  margin-left: 10px;
}

#googlebuttondiv{
  top: 50%;
  left: 50%;
  height: auto;
  margin-left: -200px;
  margin-top: -100px;
  align-content: center;
  width: 400px;
  position: fixed;
  display: inline-block;
}

#help-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #109ba5;
  font-size: 20px;
  font-family: Helvetica;
  text-decoration: none;
  background-color: rgba(195, 216, 215, 1);
}
#help-footer a
{
color:#ffffff;
text-decoration: none;
font-style: bold;
background-color: rgba(195, 216, 215, 1);
}

.upload-overlay-visible
{
  display: block;
  position:fixed;
  width: 100%;
  height: 100%;
  background-color: #000000A0;
}

.upload-overlay-invisible
{
  display:none;
}