/* -----------------start reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; font-weight: normal;  }

/* ----------------end reset */

body { background-color: black;}

.speakers {
    position:absolute;
    width:100%;
    opacity:0.5;
    
}

.static {
    position:absolute;
    width:100%;
    opacity:1;
   mix-blend-mode:overlay;

}

/* Popup container - can be anything you want */
.popup {
  position: absolute;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    z-index: 200;
    color:white;
    margin-left: 20%;
    margin-top:30%;
    width:12%;
    padding: 11px 10px;
    
        font-size:15px;
}
.popup:hover {
    opacity:0.4;
    
}

/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 200%;
  background-color:black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 200;
  bottom: 125%;
  left: 80%;
  margin-left: 10px;
    font-size:16px;
    
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top:100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

h2 {
   color:white;
    font-size:17px;
    font-kerning: 20%;
    font-family: monospace;
}



.hidden {
    position:absolute;
    padding-top:5%;
    margin-left:47.5%;
    z-index: 200;
    
    
}
.hidden:hover {
    opacity:0.5;
}
.home {
    
    position:absolute;
    padding-top:41%;
    margin-left:83%;
    z-index: 200;
}
.home:hover {
    opacity:0.5;
}
.left {
    
    position:absolute;
    padding-top:41%;
    margin-left:3%;
    z-index: 200;
}
.left:hover{
    opacity:0.5;
}

.home {
    
    position:absolute;
    padding-top:40%;
    margin-left:88%;
    z-index: 200;
}
.home:hover{
    opacity:0.5;
}

.triup {
    position:absolute;
    padding-top:1%;
    margin-left:48%;
    z-index: 200;
    height:10%;
    
}
.trileft{position:absolute;
    height:5%;
    padding-top:1%;
    margin-left:50%;
z-index: 200;
}

.triright { position:absolute;
    height:5%;
    padding-top:1%;
    margin-left:3%;
    z-index: 200;
}

.tridown { position:absolute;
    height:1%;
    padding-top:10%;
    margin-left:38%;
    z-index: 200;
}