*,
*:after,
*:before {
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  /*-moz-osx-font-smoothing: grayscale;*/
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: local('Raleway Thin'), local('Raleway-Thin'), url(https://fonts.gstatic.com/s/raleway/v14/1Ptsg8zYS_SKggPNwE44TYFv.ttf) format('truetype');
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  /*background-color: #40424c;*/
  font-family: 'Raleway', sans-serif;
  text-align: center;
}
.table{
  display: table;
  width:100%;
  height: 100vh;
}
.table-cell{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 100vh;
}
.container {
  width: 100%;
  margin: 0 auto;
  padding:20px;
}
.container img {
  max-width: 400px;
}
p.track {
  text-transform: uppercase;
  color: #FFF;
}
p.track span {
  color: #999;
}
button {
  background-color: rgba(0,0,0, 0.5);
  border: 1px solid #01ffff;
  border-radius: 0%;
  color: #01ffff;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.2s ease 0;
  transition: all 0.2s ease 0;
}
button[data-am-button^="large"] {
  width: 60px;
  height: 60px;
  margin: 0 5px;
}
button[data-am-button^="large"] i {
  font-size: 25px;
}
button[data-am-button^="small"] {
  width: 40px;
  height: 40px;
}
button[data-am-button^="small"] i {
  font-size: 14px;
}
button:hover {
  color: #fff;
  border-color: #999;
  cursor: pointer;
}

button:hover:disabled {
  background-color: rgba(0,0,0, 0.5);
  border: 1px solid #01ffff;
  border-radius: 0%;
  color: #01ffff;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.2s ease 0;
  transition: all 0.2s ease 0;
}



button:focus {
  outline: none;
}
#progress-bar {
  width: 100%;
  background-color: #ae7935;
  height: 5px;
  position: relative;
  margin: 1em 0;
}
#progress-bar #progress {
  background-color: #999;
  height: 5px;
  position: absolute;
  left: 0;
  -webkit-transition: width 2.5s linear 0;
  transition: width 2.5s linear 0;
}
footer {
  position: fixed;
  width: 100%;
  bottom: 15px;
  text-align: center;
  color: #999;
  font-size: 12px;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer a:hover {
  color: #FFF;
}
.divider{
  display: none;
}
@media (max-width : 900px){
.container img {
  max-width: 90%;
}
#info{
  font-size:14px;
}
.divider{
  display: block;
}
}



li{
    display: block;
    display: none;
    list-style-type: none;
    padding: 10px;
    font-size: 20px;
    color: #000;
    font-weight: 600;
    max-width: 900px;
    margin: 0 auto;
   }
  .countdown{
    margin-bottom:25px;
  }
  body{
    background: transparent url('brushed.jpg') no-repeat;
    background-repeat:no-repeat;
    background-size:cover !important;
    color:#000;
    font-family: 'LCDM2L';
    letter-spacing: 3px;
    font-size:20px;
  }
  #progress-bar{
    background-color: #202020;
    display: none;
  }
  .container img {
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
  }
  h1{
    margin-bottom:0px;
  }
  .cdPlayer{
    min-height: 250px;
  }
  @media (min-width : 900px){
    .cdPlayer{
      position: relative;
      max-width:1024px;
      margin:0 auto;
      text-align: left;
      border:1px solid #404040;
      padding:20px;
      /*background: rgba(255,255,255, .4);*/
    }
    .cdPlayer h1{
      margin: 15px 0 5px 0;
    }
    .cdPlayer h2{
      font-size:22px;
      margin: 15px 0;
    }
    .cdPlayer h3{
      font-size:18px;
      margin: 15px 0;
    }
    .cdPlayer .countdown{
      position:  absolute;
      top: 30px;
      right: 30px;
      font-size: 40px;
    }
    .fa1.fa-volume-off{
      border-radius: 50%;
      border:1px solid #ff0000;
      width: 30px;
      height: 30px;
      background:#ff0000;
      color:#fff;
    }
    .fa.fa-ban.fa-stack-2x{
      margin-top: 10px;
    }
  }
  @font-face {
    font-family: 'LCDM2L';
    src: url('./fonts/LCDM2L.eot');
    src: local('fonts/LCDM2L'), url('./fonts/LCDM2L.woff') format('woff'), url('./fonts/LCDM2L.ttf') format('truetype');
  }

  @media (max-width : 900px){
    button:hover {
      color: #01ffff;
      border: 1px solid #01ffff;
      cursor: pointer;
    }
    button:active {
      color: #fff;
      border: 1px solid #fff;
      cursor: pointer;
    }
    .toggle {
      top: 30px;
    }
  }
  body.night {
    background: #00151f;
    color: #01ffff;
  }
  .transparent .toggle-item:before, .transparent .toggle-item:after {
    content: '';
    position: absolute;
  }
  body{
    /*background: #fff;*/
    margin:0;
    padding:0;
  }
  .transparent {
    position: absolute;
    bottom: 15px;
    right: 25px;
  }
  .transparent .toggle-item {
    width: 40px;
    background: #00151f;
    height: 20px;
    display: inline-block;
    border-radius: 50px;
    position: relative;
    transition: all .3s ease;
    cursor: pointer;
  }
  .transparent .toggle-item:before {
    display: block;
    transition: all .2s ease;
    width: 12px;
    height: 12px;
    top: 1px;
    left: 2px;
    border-radius: 2em;
    border: 2px solid #fff;
    transition: .3s ease;
    background: #fff;
  }


  .transparent .toggle-item {
    background: #00151f;
    border: 3px solid #c0c0c0;
    height: 20px;
  }
  .transparent .toggle-item:before {
    border: 3px solid #fff;
    width: 12px;
    height: 12px;
    top: 1px;
    left: 2px;
    background: #fff;
  }

  .transparent .toggle-item.night {
    background: #fff;
    border: 3px solid #00151f;
    height: 20px;
  }
  .transparent .toggle-item.night:before {
    border: 3px solid #00151f;
    background: #00151f;
    width: 12px;
    height:12px;
    top: 1px;
    left: 2px;

    transform: translateX(18px);
  }

  .night .flickering-1 {
    animation: flickering-1 6s infinite;
  }
  .night .flickering-2 {
    animation: flickering-2 6s;
  }
  .night .flickering-3 {
    animation: flickering-3 5s;
  }
  .night .flickering-4 {
    animation: flickering-4 5s;
  }

  @keyframes flickering-1 {
    0% { opacity: 1 !important; }
    52% { opacity: 1 !important; }
    55% { opacity: 0 !important; }
    56% { opacity: 1 !important; }
    100% { opacity: 1 !important; }
  }
  @keyframes flickering-2 {
    0% { opacity: 1; }
    62% { opacity: 1; }
    65% { opacity: 0; }
    66% { opacity: 1; }
    69% { opacity: 0; }
    70% { opacity: 1; }
    73% { opacity: 0; }
    74% { opacity: 1; }
    100% { opacity: 1; }
  }
  @keyframes flickering-3 {
    0% { color: #333333; }
    10% { color: #333333; }
    13% { color: #01ffff; }
    14% { color: #333333; }
    15% { color: #01ffff; }
    23% { color: #333333; }
    24% { color: #01ffff; }
    25% { color: #333333; }
    27% { color: #01ffff; }
    100% { color: #01ffff; }
    }
  @keyframes flickering-4 {
    0% { color: #333333;
    border: 1px solid #333333; }
    10% { color: #333333;
    border: 1px solid #333333; }

    13% { color: #01ffff;
    border: 1px solid #01ffff; }
    14% { color: #333333;
    border: 1px solid #333333; }
    15% { color: #01ffff;
    border: 1px solid #01ffff; }
    23% { color: #333333;
    border: 1px solid #333333; }
    24% { color: #01ffff;
    border: 1px solid #01ffff; }
    25% { color: #333333;
    border: 1px solid #333333; }
    27% { color: #01ffff;
    border: 1px solid #01ffff; }
    100% { color: #01ffff;
    border: 1px solid #01ffff; }
  }



  .range-slider {
    position: relative;
    width: 145px;
    /*float: left;*/
    margin: 20px 0 0 0;
  }
  
  .range-slider .input-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 145px;
    height: 5px;
    border-radius: 5px;
    background:#666668;
    outline: none;
  }
  .night .range-slider .input-range {
     background:#333;
  }
  
  .range-slider .input-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #01ffff;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
  }
  
  .range-slider .input-range::-webkit-slider-thumb:hover {
    background: #01ffff;
  }
  
  .range-slider .input-range:active::-webkit-slider-thumb {
    background: #01ffff;
  }
  
  .range-slider .input-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: #01ffff;
    cursor: pointer;
    -webkit-transition: background .15s ease-in-out;
    transition: background .15s ease-in-out;
  }
  
  .range-slider .input-range::-moz-range-thumb:hover {
    background: #01ffff;
  }
  
  .range-slider .input-range:active::-moz-range-thumb {
    background: #01ffff;
  }
  
  .range-slider .range-value {
    display: inline-block;
    position: relative;
    width: 83px;
    color: #fff;
    font-size: 23px;
    line-height: 32px;
    text-align: center;
    border-radius: 3px;
    background: #01ffff;
    padding: 5px 10px;
    margin-left: 7px;
  }
  
  .range-slider .range-value:after {
    position: absolute;
    top: 38px;
    left: 40px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-right: 7px solid #01ffff;
    border-bottom: 7px solid transparent;
    content: '';
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  
  ::-moz-range-track {
    background-color: rgba(0,0,0, 0.5);
    border: 0;
  }
  
  input::-moz-focus-inner {
    border: 0;
  }
  
  .range-slider{
    width:100%;
    text-align: left;
  }
  .italo{
    display:none;
  }
  
  @media (max-width : 899px){
  .range-slider{
    width:100%;
    text-align: center;
  }
  .italo{
    display:none;
  }
  }
  .hiddenDiv{
    display: none;
  }
  #timer{
    cursor:pointer;
  }
  button:disabled {
              opacity: 0.5;
              cursor: not-allowed;
  }