@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,700,900&display=swap');

*{
  margin: 0px;
  padding: 0px;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

a{
  transition: .15s;
}

li{
  transition: .15s;
}

body{
  background-color: rgba(26, 27, 34, 1);
  font-family: 'Rubik', sans-serif;
}

  header{
    position: fixed;
      top: 0px;
      right: 0px;
      left: 0px;
    height: 60px;
    padding: 20px 50px;
    z-index: 500;
    background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,1));
  }
  
    header > figure{
      width: 200px;
      height: 60px;
      float: left;
      margin-block-start: 0!important;
      margin-block-end: 0!important;
      margin-inline-start: 0!important;
      margin-inline-end: 0!important;
    }
    
      header > figure > a > img{
        margin: 18px 0px;
        border: 0px;
        height: 25px;
        filter: invert(1);
      }
    
    header > nav{
      width: calc(100% - 200px);
      height: 60px;
      float: left;
    }
  
      header > nav > ul{
        margin: 0px;
        padding: 0px;
        list-style-type: none;
      }
    
        header > nav > ul li{
          color: #fff;
          font-size: 14px;
          float: left;
          height: 60px;
          text-align: center;
          vertical-align: middle;
          line-height: 60px;
          padding: 0px 20px;
        }
      
          header > nav > ul li.lessSpace{
            padding: 0px 5px;
          }
        
          header > nav > ul li.noSpace{
            padding: 0px 5px;
          }
        
          header > nav > ul li:hover:not(.btn-register):hover:not(.userProfile):not(.btn-addMusic):hover:not(.fullScreen){
            color: #00FF84;
            cursor: pointer;
            border-bottom: 1px solid #00FF84;
          }
        
        header > nav > ul li.adj-right{
          float: right;
        }
          
          header > nav > ul li.fullScreen:hover{
            cursor: pointer;
            color: #00FF84;
          }
          
          header > nav > ul li.userProfile a img{
            margin-top: 12px;
            width: 37.5px;
            height: 37.5px;
            border-radius: 50%;
            border: 0px;
          }
            
            header > nav > ul li.userProfile a:hover img{
              cursor: pointer;
              filter: brightness(150%);
            }
          
          header > nav > ul li.adj-right{
            float: right;
          }
        
          header > nav > ul li.btn-register a{
            color: #1A1B22;
            padding: 10px 15px;
            border-radius: 25px;
            background-color: #00FF84;
            text-decoration: none;
          }
    
          header > nav > ul li.btn-addMusic a{
            color: #1A1B22;
            padding: 10px 15px;
            border-radius: 25px;
            background-color: #00FF84;
            text-decoration: none;
          }
  
  div#curtains{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: #1A1B22;
  }
  
    div#curtains img{
      position: fixed;
      top: calc(50% - 16px);
      left: calc(50% - 16px);
      z-index: 101;
    }
  
  footer{
    width: 100%;
    border-top: 1px solid #21222B;
    padding: 50px 0px;
  }
  
    footer > div.inner{
      width: 1040px;
      margin: 0 auto;
    }
  
    footer > div.inner > section{
      width: 25%;
      float: left;
    }
    
      footer > div.inner > section > img{
      height: 22px;
      filter: invert(1);
    }
    
      footer > div.inner > section.legalinfo{
        width: 100%;
        color: #666;
        font-size: 14px;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 20px;
      }
    
      footer > div.inner > section h1{
        color: #fff;
        font-size: 18px;
        margin-bottom: 10px;
      }
      
      footer > div.inner > section ul{
        list-style-type: none;
      }
      
        footer > div.inner > section ul li{
          margin-bottom: 5px;
        }
        
          footer > div.inner > section ul li a{
            color: #eee;
            font-size: 14px;
            text-decoration: none;
          }
          
            footer > div.inner > section ul li a:hover{
              color: #fff;
              text-decoration: line-through;
            }
        
      footer > div.inner > section ul.social{
        list-style-type: none;
        position: relative;
        top: 110px;
      }
      
        footer > div.inner > section ul.social li{
          float: left;
          margin: 0px 10px 0px 0px;
        }
        
          footer > div.inner > section ul.social li a{
            color: #ccc;
            font-size: 30px;
          }
          
            footer > div.inner > section ul.social li a:hover{
              color: #fff;
            }
        
      footer > div.inner > section.customerservice{
        margin-top: 0px;
      }
      
        footer > div.inner > section.customerservice h1{
          color: #fff;
          font-size: 18px;
          margin-bottom: 30px;
        }
        
        footer > div.inner > section.customerservice h2{
          color: #fff!important;
          font-size: 24px;
          margin: 0px 0px 5px 0px;
        }
        
          footer > div.inner > section.customerservice h2 i{
            margin-right: 10px;
          }
          
          footer > div.inner > section.customerservice p{
            color: #888;
            font-size: 13px;
            margin-bottom: 20px;
          }
        
          footer > div.inner > section.customerservice p i{
            margin-right: 5px;
          }
          
            footer > div.inner > section.customerservice p i.status-online{
              color: #01AE5E;
            }
            
            footer > div.inner > section.customerservice p i.status-offline{
              color: #CF0022;
            }