
.body {
    background-color: #111;
    overflow-x: hidden;
}

.screen {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    color: aqua;
    text-align: center;
    font-family:sans-serif;
}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-webkit-slider-thumb {
    width: 200px;
    height: 230px;
    -webkit-appearance: none;
    background: transparent;
    z-index: -150;
}

.sliderRange {
    -webkit-appearance: none;   
    -moz-appearance: none;
    color: transparent;
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 150;
}
.sliderThumb {
    position: absolute;
    width: 200px;
    height: 230px;
    top: 0px;
    border-radius: 90px;
    border: 4px solid #aaa;
    box-shadow: 3px 3px 3px #111;
    z-index: 0;
}

.sliderContainer {
    width: 100%;
    margin-top: 75px;
    margin-bottom: 75px;
    position: relative;
}

.sliderTrack {
    position: absolute;
    height: 30px;
    border: 2px solid #999;
    border-radius: 20px;
    z-index: -50;
}

.hero {
    height: 50px;
    /*visibility: hidden;
    */
}

.footer {
    height: 50px;
    /*visibility: hidden;
    */
}

.header {
    height: 50px;
    visibility: hidden;
}

.meshMsg {
    text-align: left;
   /* visibility: hidden;
*/
}

.connectButton {
    height: 200px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 60px;
    border: 4px solid #aaa;
    box-shadow: 3px 3px 3px #111;
    background-color: #262;
    font-family: sans-serif;
    font-size: 30px;
    
}

.buttonText {
    color: #fff;
    margin-top: 48px;
}


/* ==========================================================
 * Loading Bars
 * =========================================================*/
.loading{
     width:100px;
     height:100px;
     margin:30px auto;
     position:relative;
}

.loading.bar div{
     width: 10px;
     height: 30px;
     background: black;
     position: absolute;
     top: 35px;
     left: 45px;
     opacity:0.05;
     -webkit-animation: fadeit 1.1s linear infinite;
     -moz-animation: fadeit 1.1s linear infinite;
     animation: fadeit 1.1s linear infinite;
}

.loading.bar div:nth-child(1){
     -webkit-transform: rotate(0deg) translate(0, -30px);
     -moz-transform: rotate(0deg) translate(0, -30px);
     transform: rotate(0deg) translate(0, -30px); 

     -webkit-animation-delay:0.39s;
     -moz-animation-delay:0.39s;
     animation-delay:0.39s;
} 

.loading.bar div:nth-child(2){
     -webkit-transform: rotate(45deg) translate(0, -30px);
     -moz-transform: rotate(45deg) translate(0, -30px);
     transform: rotate(45deg) translate(0, -30px); 

     -webkit-animation-delay:0.52s;
     -moz-animation-delay:0.52s;
     animation-delay:0.52s;
} 

.loading.bar div:nth-child(3){
     -webkit-transform: rotate(90deg) translate(0, -30px);
     -moz-transform: rotate(90deg) translate(0, -30px);
     transform: rotate(90deg) translate(0, -30px); 

     -webkit-animation-delay:0.65s;
     -moz-animation-delay:0.65s;
     animation-delay:0.65s;
} 

.loading.bar div:nth-child(4){
     -webkit-transform: rotate(135deg) translate(0, -30px);
     -moz-transform: rotate(135deg) translate(0, -30px);
     transform: rotate(135deg) translate(0, -30px); 

     -webkit-animation-delay:0.78s;
     -moz-animation-delay:0.78s;
     animation-delay:0.78s;
} 

.loading.bar div:nth-child(5){
     -webkit-transform: rotate(180deg) translate(0, -30px);
     -moz-transform: rotate(180deg) translate(0, -30px);
     transform: rotate(180deg) translate(0, -30px); 

     -webkit-animation-delay:0.91s;
     -moz-animation-delay:0.91s;
     animation-delay:0.91s;
} 

.loading.bar div:nth-child(6){
     -webkit-transform: rotate(225deg) translate(0, -30px);
     -moz-transform: rotate(225deg) translate(0, -30px);
     transform: rotate(225deg) translate(0, -30px); 

     -webkit-animation-delay:1.04s;
     -moz-animation-delay:1.04s;
     animation-delay:1.04s;
} 

.loading.bar div:nth-child(7){
     -webkit-transform: rotate(270deg) translate(0, -30px);
     -moz-transform: rotate(270deg) translate(0, -30px);
     transform: rotate(270deg) translate(0, -30px); 

     -webkit-animation-delay:1.17s;
     -moz-animation-delay:1.17s;
     animation-delay:1.17s;
} 

.loading.bar div:nth-child(8){
     -webkit-transform: rotate(315deg) translate(0, -30px);
     -moz-transform: rotate(315deg) translate(0, -30px);
     transform: rotate(315deg) translate(0, -30px); 

     -webkit-animation-delay:1.3s;
     -moz-animation-delay:1.3s;
     animation-delay:1.3s;
}

@-webkit-keyframes fadeit{
     0%{
          opacity:1;
     }
     100%{
          opacity:0;
     }
}
@-moz-keyframes fadeit{
     0%{
          opacity:1;
     }
     100%{
          opacity:0;
     }
}
@keyframes fadeit{
     0%{
          opacity:1;
     }
     100%{
          opacity:0;
     }
}