listitem
{
  height:70px;
  width:calc(100% - 4px);

  border: 1px solid rgba(50,50,50,0);
  border-radius: 6px;

  margin-left: 2px;
  margin-right: 2px;

  transition: all 0.25s ease;
  -webkit-user-select: none;
  user-select: none;

  cursor: pointer;
  display: block;
}






listitem:hover{
  border: 1px solid rgba(50,50,50,0.7);
}


listitem:active
{
  border: 1px solid rgba(50,50,50,0.7);
  background-color: rgba(30,30,30,0.5);
}

listitem[active=true]
{
  border: 1px solid rgba(50,50,50,0.5);
  background-color: rgba(30,30,30,0.3);
}

listitem .text h3
{
  margin-top:-0.5px;
  font-size: 17px;
  margin-bottom: 0px;
}

listitem .text h4
{
  margin: 0;
  margin-left: 1px;
  margin-top: -3px;
  font-size: 10px;
  color:rgba(255,255,255,0.7);
}



listitem .text
{
  display: inline-block;
  vertical-align: middle;
  padding-top:22.5px;
  font-family: "SFProRegular";
  font-size: 18px;
  margin: 0;
  margin-left: 15px;
  width: calc(100% - 130px);
  height: calc(70px - 20px);
}


listitem .option
{
  display: inline-block;
  vertical-align: middle;
  margin:0;
  width:auto;
  height:20px;
  padding: 10px;
  margin-right:0;
  text-align: right;
}


listitem .thumbnail
{
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  border-radius: 4px;
  margin:5px;
  margin-top:3px;
  margin-right: 0;
  height:60px;
  width:60px;

  background: url(/res/image/bundle/film.png) center center no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
}

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

@keyframes startup_title
{
	0% {
    opacity:0;
	}
  100% {
    opacity:1;
	}
}


@-webkit-keyframes nwios_menuitem_startup
{
  0%{
    transform: scale(0.8);
    opacity: 0;
  }
  100%
  {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes nwios_menuitem_startup
{
  0%{
    transform: scale(0.8);
    opacity: 0;
  }
  100%
  {
    transform: scale(1);
    opacity: 1;
  }
}



listitem:not([notani]),imageDescription,card
{
  opacity: 0;
  animation-name: nwios_menuitem_startup;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;

  -webkit-animation-name: nwios_menuitem_startup;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode:forwards;
  animation-fill-mode:forwards;
}


listitem:nth-of-type(0),imageDescription:nth-of-type(0),card:nth-of-type(0)
{
  -webkit-animation-delay: 0;
  animation-delay: 0;
}
listitem:nth-of-type(1),imageDescription:nth-of-type(1),card:nth-of-type(1)
{
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms;
}
listitem:nth-of-type(2),imageDescription:nth-of-type(2),card:nth-of-type(2)
{
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms;
}
listitem:nth-of-type(3),imageDescription:nth-of-type(3),card:nth-of-type(3)
{
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms;
}
listitem:nth-of-type(4),imageDescription:nth-of-type(4),card:nth-of-type(4)
{
  -webkit-animation-delay: 400ms;
  animation-delay: 400ms;
}
listitem:nth-of-type(5),imageDescription:nth-of-type(5),card:nth-of-type(5)
{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
}
listitem:nth-of-type(6),imageDescription:nth-of-type(6),card:nth-of-type(6)
{
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
}
listitem:nth-of-type(10n+7),imageDescription:nth-of-type(10n+7),card:nth-of-type(10n+7)
{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
}
listitem:nth-of-type(8),imageDescription:nth-of-type(8),card:nth-of-type(8)
{
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
}
listitem:nth-of-type(9),imageDescription:nth-of-type(9),card:nth-of-type(9)
{
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
}
listitem:nth-of-type(10),imageDescription:nth-of-type(10),card:nth-of-type(10)
{
  -webkit-animation-delay: 1000ms;
  animation-delay: 1000ms;
}
listitem:nth-of-type(11),imageDescription:nth-of-type(11),card:nth-of-type(11)
{
  -webkit-animation-delay: 1100ms;
  animation-delay: 1100ms;
}
listitem:nth-of-type(12),imageDescription:nth-of-type(12),card:nth-of-type(12)
{
  -webkit-animation-delay: 1200ms;
  animation-delay: 1200ms;
}
listitem:nth-of-type(13),imageDescription:nth-of-type(13),card:nth-of-type(13)
{
  -webkit-animation-delay: 1300ms;
  animation-delay: 1300ms;
}
listitem:nth-of-type(14),imageDescription:nth-of-type(14),card:nth-of-type(14)
{
  -webkit-animation-delay: 1400ms;
  animation-delay: 1400ms;
}
listitem:nth-of-type(15),imageDescription:nth-of-type(15),card:nth-of-type(15)
{
  -webkit-animation-delay: 1500ms;
  animation-delay: 1500ms;
}
listitem:nth-of-type(16),imageDescription:nth-of-type(16),card:nth-of-type(16)
{
  -webkit-animation-delay: 1600ms;
  animation-delay: 1600ms;
}
listitem:nth-of-type(17),imageDescription:nth-of-type(17),card:nth-of-type(17)
{
  -webkit-animation-delay: 1700ms;
  animation-delay: 1700ms;
}
listitem:nth-of-type(18),imageDescription:nth-of-type(18),card:nth-of-type(18)
{
  -webkit-animation-delay: 1800ms;
  animation-delay: 1800ms;
}
listitem:nth-of-type(19),imageDescription:nth-of-type(19),card:nth-of-type(19)
{
  -webkit-animation-delay: 1900ms;
  animation-delay: 1900ms;
}
listitem:nth-of-type(20),imageDescription:nth-of-type(20),card:nth-of-type(20)
{
  -webkit-animation-delay: 2000ms;
  animation-delay: 2000ms;
}
listitem:nth-of-type(21),imageDescription:nth-of-type(21),card:nth-of-type(21)
{
  -webkit-animation-delay: 2100ms;
  animation-delay: 2100ms;
}



listitem.bgimg .text
{
  margin-left: 40px;
  padding-top: 15px;
  width:calc(100% - 90px);
}

listitem.bgimg .option
{
  margin-top:28px;
}

listitem.bgimg .text h4{
  margin-top: 3px;
  font-size: 11px;
  color:rgba(255,255,255,0.35);
}
listitem.bgimg .text h3{
  font-size:19px;
  color:rgb(255,255,255);
}
listitem.bgimg{
  position: relative;
  border:1px solid rgba(122,122,122,0.3);
  background: transparent;
  height:100px;
  width:calc(100% - 40px);
  margin-left: 19px;
  margin-right: 19px;
  border-radius: 13px;
  overflow: hidden;
  margin-top: 25px;
  margin-bottom: 25px;
}

listitem.bgimg img.thumbnail{
  object-fit: cover;
  border: none;
  background:none;
}

listitem.bgimg .thumbnail
{
  z-index:-1;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  margin: 0;
  padding:0;
  height:100%;
  opacity: 0.7;
  transition: 0.25s ease transform;
}


listitem.bgimg:active{
  transform: scale(0.98) !important;
}

/*listitem.bgimg:not([notani])
{
  opacity: 0;
  animation-name: startup_title;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease;

  -webkit-animation-name: startup_title;
  -webkit-animation-duration: 0.7s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode:forwards;
}*/