body,html{height:100vh;width:100vw;font-family:'Righteous',cursive}body{overflow-x:hidden}a,button,button:focus{outline:0}.logo{font-size:8em;color:#fff;text-shadow:0 0 5px #000;line-height:1em;position:absolute;top:25%;left:50%;transform:translate(-50%,-25%)}.logo{-webkit-animation:color-change 10s infinite alternate;-moz-animation:color-change 10s infinite alternate;-o-animation:color-change 10s infinite alternate;-ms-animation:color-change 10s infinite alternate;animation:color-change 10s infinite alternate}@-webkit-keyframes color-change{0%{color:#fff}50%{color:#ed266e}100%{color:#dd0772}}@-moz-keyframes color-change{0%{color:#fff}50%{color:#ed266e}100%{color:#dd0772}}@-ms-keyframes color-change{0%{color:#fff}50%{color:#ed266e}100%{color:#dd0772}}@-o-keyframes color-change{0%{color:#fff}50%{color:#ed266e}100%{color:#dd0772}}@keyframes color-change{0%{color:#fff}50%{color:#ed266e}100%{color:#dd0772}}.player{background:#fff;position:absolute;bottom:0;width:100%;left:0;text-align:center;border-top:8px solid #ed266e;padding:15px}.songTitle{border-bottom:4px solid #ed266e}#music{display:none}.song{font-size:1.8em;line-height:1em;display:inline-block!important;top:-9px;position:relative}.song>div{display:inline-block}.buttos{display:inline-block!important}button{background:0;border:0;cursor:pointer}.play:after{content:"";width:40px;height:40px;background-image:url(../images/play.png);display:inline-block;background-size:cover}.pause:after{content:"";width:40px;height:40px;background-image:url(../images/pause.png);display:inline-block;background-size:cover}.vinyl{position:absolute;top:65%;left:50%;width:220px;transform:translate(-50%,-65%)}.v1{height:220px;transition:.4s}.spin{-webkit-animation:spin 4s linear infinite;-moz-animation:spin 4s linear infinite;animation:spin 4s linear infinite}@-moz-keyframes spin{100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{100%{-webkit-transform:rotate(360deg)}}@keyframes spin{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.info ul{display:inline-block;padding:0;margin:0}.info ul li{text-decoration:none;display:inline-block;padding:0 8px!important}.e-mail:before{content:attr(data-user) "\0040" attr(data-website);unicode-bidi:bidi-override}@media(max-width:768px){.logo{font-size:6em}#pButton{margin-bottom:15px}.song{font-size:1.1em}.v1{width:auto}.background{background:url("../images/videobg.jpg") no-repeat top left fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;height:100%}}@media(max-width:468px){.logo{font-size:3.5em}.songTitle{display:inline-block;margin:8px 0}.logo{top:20%;left:50%;transform:translate(-50%,-20%)}.vinyl{position:absolute;top:50%;left:50%;width:150px;height:150px;transform:translate(-50%,-50%)}.vinyl img{width:100%;height:auto}.controls{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center}.controls .buttos,.controls .song{flex:1 1}.controls .info{flex:1 1 100%;width:100%}}@media only screen and (max-width:768px) and (orientation:landscape){.logo,.vinyl{position:relative!important;text-align:center;margin-top:50px}.vinyl{transform:translate(-50%,0)}}.fullscreen-bg video{position:fixed;top:0;left:0;min-width:100%;min-height:100%}.fullscreen-bg{width:100%;position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:0}
/*
.player{position:relative;display:block;bottom:0;margin-top:50px!important;margin-left:-15px;margin-right:-55px!important;width:100vw!important}
*/
.info {
    margin-top: 8px;
}
.info ul li {
    padding: 0px !important;
}
.info li:not(:last-child):after {
    content: "\26AC";
    font-weight: normal !important;
    padding: 0 8px;
  }
  .chat-bubble {
      z-index: 999;
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      right: 50px;
      bottom: 30px;
      background: #ed266e;
      color: #fff;
      width: auto;
      padding: 5px;
      height: 50px;
      border-radius: 5px;
      box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
      cursor: pointer;
  }
  .chat-bubble span{
    font-size: 18px;
    margin-left: 5px;
}
  .chat-sidebar {
    box-shadow: 0px -5px 10px rgba(0,0,0,0.5);
    position: fixed;
    background: #fff;
    height: 100vh;
    right: 0;
    top: 0;
    z-index: 1000;
    padding: 10px;
    width: 100%;
    max-width: 350px;
    transform: translateX(105%);
    animation: hideChat 2.5s;
    transition: .4s;    
  }
  .chat-sidebar.close-chat {
    transform: translateX(105%);
  }
 
  
  .chat-sidebar.open {
    transform: translateX(0);
  }


  iframe {
      width: 100% !important;
      height: calc(100vh - 100px) !important; 
  }

.close-chat {
	text-align: right;
	margin-bottom: 8px;
}

.close-chat span {
  display: inline-block;
  color: #fff;
  background: #ed266e;
  width: 25px;
  text-align: center;
  border-radius: 50%;
  line-height: 25px;
  height: 25px;
  cursor: pointer;
}


  
  @keyframes hideChat {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(105%);
    }
  }

  @media only screen and (max-width:900px) and (orientation:landscape){
    .logo {
        font-size: 4em;
    }
    .vinyl {
        top: 50% !important;
        left: 50% !important;
        position: absolute !important;
        transform: translate(-50%, -50%) !important;
      }
}



  @media only screen and (max-width:450px) and (orientation:landscape){
    .vinyl {
      top: 45% !important;
      left: 50% !important;
      position: absolute !important;
      transform: translate(-50%, -50%) !important;
    }
}

  @media (max-width:1200px) {
    .chat-bubble {
        right: 0px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        border-top-right-radius: 0px;
        box-shadow: none;
    }
  }

  @media (max-width:767px) {
    /* .chat-bubble {
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 20px;
    } */
  }

  .logo {
    z-index: 999;
  }

  @media (max-width:675px) {
    .info li:nth-child(2):after{
        display: none;
    }
    .info li:last-child {
        display: block;
    }
    .chat-bubble{
        font-size: 18px;
    }
    span {
        font-size: 16px;
    }
    .chat-sidebar {
        max-width: 450px;
        width: 100%;
    }
  }