@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

* {
   font-family: 'Noto Sans TC', sans-serif;
}


body {

    margin:0;

    min-width: 375px;
    margin : 0 auto;
}

div.header{
  min-height: 330px;
  background-image: url("../images/top_banner.jpg"); /* The image used */
  background-position: left top; /* top left corner */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */

}



div.header div{
  max-width: 1440px;
  margin: 0 auto;
}

div.moovlogo{
  width: 90%;
  margin: 0 auto;
  padding-top: 15px;
  position: fixed;
  padding-left: 5%;
  padding-right: 5%;
  z-index: 99;
  padding-bottom: 15px;
}

div.moovlogo img{
  width: 30%;
  height: auto;
  max-width: 200px;
}

div.moovlogo img.sublogo{
  position: relative;
  float: right;
  display: none;
  max-width: 180px;
  height: auto;
  z-index: 99;
  width: 23%;
}

div.mainlogo{
  width: 40%;
  margin: 0 auto;
  min-width: 228px;
}

div.mainlogo img{
  width: 100%;
  height: auto;
}

div.headdescription{
  width: 91.7%;
  font-size: 15px;
  color: black;
  font-weight: normal;

}

div.seperator{
  width: 100%;
  height: 2px;
  background-color: #878787;


}

div.spacing{
  width: 100%;
  height: 18px;
}

/* Style the top navigation bar */
div.navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    height: 68px;
     align-items: center;
}

/* Style the navigation bar links */
div.navbar a.active {
    color: #252525;
    text-decoration: none;
    text-align: center;
}

/* Change color on hover */
div.navbar a.active:hover {
    color: #f69581;
}

div.navbar a {
    color: #898989;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
}

div.content_bg{
  background-position: left top; /* top left corner */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

div.content_bg.deactive{
  display: none;
}

h1{
  width: 90%;
  margin: 0 auto;
  font-size: 18px;
  color: #FFFFFF;
  text-align: center;
}


div.content{
 display: flex;
 width: 100%;
 flex-direction: column;
 align-items: center;
}


div.contentspacing{
width: 100%;
height: 218px;
display: block;
}

div.contentLRspacing{
  display: none;
}

div.textcontent{
  width: 91.7%;
  color: #FFFFFF;
  font-size: 15px;
  order:0;
}

div.mobilerowspacing{
  width: 100%;
  height: 16px;
  display: block;;
}

div.contentfooter{
  width: 90%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFFFFF;
  font-size: 12px;
  padding: 7px;
  order:0;
}

div.songplaypannel{
  width: 92%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  align-items: flex-start;
  order:0;
}

div.songplaypannel .playpannel{
  width: 49%;
}

div.songplaypannel .playpannel div.top{
  width: 100%;
  height: auto;
  margin-bottom: 10px;
  position: relative;
}


div.songplaypannel .playpannel div.top img{
  width: 100%;
  height: auto;
}

div.songplaypannel .playpannel div.top a{
  position: absolute;
    right: 0px;
    bottom: 0px;
    opacity: 0.4;
    width: 100%;
    height: 100%;
}

div.songplaypannel .playpannel div.top a:hover{
  opacity: 1.0;
}

div.songplaypannel .playpannel div.top.deactive a{
display:none;
}

div.songplaypannel .playpannel div.top .playbutton{

  width: 35px;
  height: 35px;
  position: absolute;
  right:10px;
  bottom:10px;
}

div.songplaypannel .playpannel .mv{
  width: 100%;
  vertical-align: middle;
  color: #FFFFFF;
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.5);
  float: left;
}

div.songplaypannel .playpannel .mv p{
  display: inline-block;
  margin: 0;
}

div.songplaypannel .playpannel .mv p::before{
  margin: 0;
  margin-left: 10px;
  float:left;
  margin-top: 5px;
  margin-bottom: 5px;
  content: "立即睇MV";
}

div.songplaypannel .playpannel .mv.deactive p::before{
  content: "MV Coming Soon";
}

div.songplaypannel .playpannel .mv a{
  float: right;
  margin-right: 20px;
  margin-top: 9px;
  opacity: 0.4;
}

div.songplaypannel .playpannel .mv.deactive a{
  display: none;
}

div.songplaypannel .playpannel .mv a:hover{
  opacity: 1.0;
}

div.songplaypannel .playpannel .mv a img{
  width: 16px;
  height: 16px;
}

div.songplaypannel .artistpannel{
  background-color: rgba(0, 0, 0, 0.5);
  width: 49%;
}

div.songplaypannel .artistpannel .top{
  position: relative;
  margin-top: 16px;

}

div.songplaypannel .artistpannel .top img{
  width: 50px;
  height: 50px;
   border-radius: 50%;
   display: inline-block;
   vertical-align: middle;
   margin-left: 5px;
}

div.songplaypannel .artistpannel .top p{
  color: #a1a1a1;
  font-size: 12px;
  width: 90%;
  vertical-align: middle;
  margin: 0 auto;
}

div.songplaypannel .artistpannel p.comment{
  color: #FFFFFF;
  font-size: 14px;
  margin: 0;
  margin: 0 auto;
  width: 90%;
  margin-top: 10px;
  margin-bottom: 20px;
}

div.nextdiv{
  width: 100%;
  height: 65px;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

div.nextdiv img{
  cursor: pointer;
  height: 100%;
  width: auto;
}



p.comingsoon{
  font-weight: bold;
  font-size: 18px;
  color: #FFFFFF;
  text-align: center;
  line-height: 50px;
  margin: 0;
}

p.comingsoon:nth-child(odd) {
    background: #636363;
}

p.comingsoon:nth-child(even) {
    background: #898989;
}


div.footer{
  background-color: #cccccc;
  width: 100%;

}

div.footer img{
  width: 100%;
  height: auto;
  max-width: 1440px;
  margin: 0 auto;
  display: block;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  body {

  }

  div.header{
    min-height: 446px;
  }

  div.headdescription{
    width: 43.9%;
    font-size: 18px;
  }

  p.comingsoon{
    font-size: 18px;
    line-height: 46px;
  }

  div.navbar a {
      font-size: 13px;
  }
  div.navbar{
      height: 65px;
  }

  h1{
    width: 46%;
    font-size: 18px;
        line-height: 65px;
  }

  div.content{
    flex-direction: row;
    justify-content:space-around;
  }

  div.contentspacing{
    display: none;
  }

  div.contentLRspacing{
    display: block;
    width: 8%;
    height: 100%;
  }

  div.mobilerowspacing{
    display: none;
  }
  div.textcontent{
width: 43.9%;
    order : 2;
    align-self:flex-start;
    flex-shrink:0;
  }
  div.contentfooter{
    width: 17%;
    order : 1;
    background-color: rgba(0, 0, 0, 0);
    align-self:flex-end;
    flex-shrink:0;
  }


  div.songplaypannel{
    width: 17%;
    order: 3;
    flex-direction: column;
    align-self:flex-start;
    flex-shrink:0;
  }

  div.songplaypannel .playpannel{
    width: 100%;
  }

  div.songplaypannel .artistpannel
  {
    margin-top: 10px;
    width: 100%;
  }

  /* artistpannel */

}

/* Extra large devices (large laptops and desktops, 1440px and up) */
@media only screen and (min-width: 1440px) {
  body {

  }

  div.header{
    min-height: 446px;
  }

  div.headdescription{
    width: 38.2%;
    font-size: 20px;
  }



  p.comingsoon{
    font-size: 30px;
    line-height: 84px;
  }

  div.navbar a {

      font-size: 20px;
  }

  div.navbar{
      height: 65px;
  }

  h1{
    width: 40%;
    font-size: 30px;
        line-height: 130px;
  }

  div.content{
    flex-direction: row;
    /* max-width: 1440px; */
    margin: 0 auto;
  }

  div.contentspacing{
    display: none;
  }

  div.contentLRspacing{
    display: block;
    width: 8%;
    height: 100%;
  }

  div.mobilerowspacing{
    display: none;
  }

  div.textcontent{
    width: 38.2%;
    font-size: 20px;
  }

}