@charset "UTF-8";
/*
 :::  Reset
-------------------------------------------------- */
html {
  box-sizing: border-box;
  overflow-y: -moz-scrollbars-vertical;
  overflow-y: scroll; }

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  box-sizing: inherit;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
      text-size-adjust: 100%; }

article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, subhead, summary {
  display: block; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*-------------------------------------------------- */
/*
 :::  Variables
-------------------------------------------------- */
/*
 :::  mixins and functions
-------------------------------------------------- */
/*
 :::  Basics
-------------------------------------------------- */
::-moz-selection {
  background: #DAFF00;
  color: #000;
  text-shadow: none; }
::selection {
  background: #DAFF00;
  color: #000;
  text-shadow: none; }

::-moz-selection {
  background: #DAFF00;
  color: #000;
  text-shadow: none; }

body,
input,
select,
button,
textarea {
  -webkit-text-size-adjust: 100%; }

body,
input,
select,
button,
textarea {
  font-family: "Roboto Slab", Helvetica, Arial, serif;
  font-size: 1rem;
  line-height: 1.3333333;
  font-weight: 400;
  color: #000; }

body {
  background-color: #CBCBCB;
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px), -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px), -webkit-linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px), -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-image: linear-gradient(rgba(255, 255, 255, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: 50% -1px; }

h1, h2, h3 {
  color: #fff; }

strong {
  font-weight: 700; }

em {
  font-style: italic; }

hr {
  display: block;
  border-top: 1px solid #DAFF00; }

img {
  border: none;
  vertical-align: middle; }

a {
  color: #DAFF00;
  text-decoration: none; }
  a:focus, a:hover, a:active {
    text-decoration: underline; }

/*
 :::  Wrapping
-------------------------------------------------- */
header,
main.single,
footer {
  padding: 0 5.6339%;
  margin-bottom: 1.5rem; }
  @media only screen and (min-width: 48em) {
    header,
    main.single,
    footer {
      padding: 0 2.81695%;
      margin-left: auto;
      margin-right: auto; } }
  @media only screen and (min-width: 62.5em) {
    header,
    main.single,
    footer {
      max-width: 1000px;
      padding-left: 20px;
      padding-right: 20px; } }

/*
 :::  Header
-------------------------------------------------- */
header {
  padding-top: 5.6339%;
  text-align: center; }
  @media only screen and (min-width: 48em) {
    header {
      padding-top: 2rem; } }

h1 {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  font-size: 3.2rem;
  margin-top: .5em; }
  @media only screen and (min-width: 28.125em) {
    h1 {
      margin-top: 0; } }
  @media only screen and (min-width: 48em) {
    h1 {
      font-size: 4.2rem; } }
  h1 a {
    color: #fff;
    text-decoration: none; }
    h1 a:focus, h1 a:hover, h1 a:active {
      text-decoration: none;
      color: #DAFF00; }
  h1 small {
    color: #DAFF00; }

h2 {
  color: #000;
  font-size: 1.1rem; }
  @media only screen and (min-width: 40em) {
    h2 {
      font-size: 1.3em; } }

.explain-explain {
  color: #DAFF00;
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.6); }

.boxes {
  font-size: .9rem;
  text-align: left;
  padding-top: .5rem;
  line-height: 1.5; }
  .boxes article {
    border-radius: .6rem;
    background: rgba(255, 255, 255, 0.4);
    margin: .5rem 0;
    padding: .8rem; }
    .boxes article h2 {
      line-height: 1;
      font-size: 1.4rem;
      margin: 0 0 .3rem 0; }
    .boxes article a {
      color: #000;
      border-bottom: #DAFF00 solid 3px; }
      .boxes article a:focus, .boxes article a:hover, .boxes article a:active {
        text-decoration: none;
        border-bottom-color: #556270; }
  .boxes .right {
    text-align: right;
    color: rgba(0, 0, 0, 0.5);
    font-size: .9rem; }
  @media only screen and (min-width: 43.75em) {
    .boxes {
      display: table;
      table-layout: fixed;
      width: 100%;
      border-spacing: .5rem; }
      .boxes article {
        display: table-cell; } }

/*
 :::  Main
-------------------------------------------------- */
main h2 {
  background: #DAFF00;
  font-size: 1.5rem;
  display: inline;
  padding: 0 .1em;
  line-height: 1.5; }

main subhead {
  float: right;
  clear: both;
  background: rgba(255, 255, 255, 0.4);
  padding: .35em .5em;
  border-radius: 1rem;
  white-space: nowrap;
  margin-top: .1em; }

.legal {
  text-align: center;
  line-height: 1.8; }

.meta {
  text-align: left; }
  .meta ul {
    padding-top: .2rem;
    padding-bottom: .2rem;
    display: inline-block; }
  .meta li {
    font-weight: 700;
    display: inline-block;
    padding-right: .3em; }
    .meta li:after {
      content: ", ";
      color: #000; }
    .meta li:last-child:after {
      content: ""; }
  .meta a {
    color: #000;
    text-decoration: underline; }
    .meta a:focus, .meta a:hover, .meta a:active {
      color: #DAFF00; }

.desc {
  clear: both;
  margin: 1rem 0 2rem; }

.features {
  overflow: hidden;
  background: #CBCBCB;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); }
  @media only screen and (min-width: 41.875em) {
    .features {
      padding: 1rem; } }
  .features dl {
    font-size: .875rem;
    border-left: .5rem solid #ccc;
    overflow: hidden; }
    .features dl.technical {
      border-left-color: #556270; }
      .features dl.technical dt:first-child, .features dl.technical dd:nth-child(2) {
        border: none; }
    .features dl.embed {
      border-left-color: #4ECDC4; }
    .features dl.userfeatures {
      border-left-color: #C7F464; }
    .features dl.streaming {
      border-left-color: #FF6B6B; }
    .features dl.others {
      border-left-color: #C44D58; }
    .features dl dt, .features dl dd {
      padding: .4em .8rem;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      width: 50%;
      line-height: 1.2; }
    .features dl dt {
      float: left;
      clear: both;
      font-weight: 700; }
    .features dl dd {
      float: left; }
  @media only screen and (min-width: 41.875em) {
    .features {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
          -ms-flex-align: start;
              align-items: flex-start; }
      .features dl {
        width: 48%;
        max-width: none; }
      .features dl:nth-child(1) {
        -webkit-box-ordinal-group: 2;
        -webkit-order: 1;
            -ms-flex-order: 1;
                order: 1; }
      .features dl:nth-child(2) {
        -webkit-box-ordinal-group: 4;
        -webkit-order: 3;
            -ms-flex-order: 3;
                order: 3; }
      .features dl:nth-child(3) {
        -webkit-box-ordinal-group: 3;
        -webkit-order: 2;
            -ms-flex-order: 2;
                order: 2; }
      .features dl:nth-child(4) {
        -webkit-box-ordinal-group: 5;
        -webkit-order: 4;
            -ms-flex-order: 4;
                order: 4; }
      .features dl.userfeatures dt:first-child, .features dl.userfeatures dd:nth-child(2) {
        border: none; }
      .features dl.embed, .features dl.streaming {
        margin-top: .5rem; } }

.player-embed {
  margin-top: 2rem;
  box-sizing: content-box;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto; }

.player-embed.responsive {
  max-width: 100%;
  /*
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	iframe, object, embed {
		position: absolute; 
		top: 0; left: 0; 
		width: 100%; 
		height: 100%;
	}
*/ }

/*
 :::  Nav
-------------------------------------------------- */
.burger {
  height: 2.2rem;
  width: 3.3rem;
  background: rgba(0, 0, 0, 0.25);
  padding: .2em .3em;
  border-radius: .3em;
  font-size: 17.5px;
  -webkit-transition: all .2s;
          transition: all .2s; }
  .burger.open {
    position: fixed;
    z-index: 1;
    right: .5rem;
    top: .5rem; }
  .burger:focus, .burger:hover, .burger:active {
    background: rgba(0, 0, 0, 0.5); }
  .burger img {
    width: 100%;
    height: auto; }

:target {
  width: 260px; }
  :target .open {
    right: 159px;
    opacity: 0; }
  @media only screen and (min-width: 48em) {
    :target {
      width: 400px; }
      :target .open {
        right: 299px; } }

nav {
  position: fixed;
  top: 0;
  right: -2rem;
  bottom: 0;
  width: 0;
  background: rgba(85, 85, 85, 0.85);
  padding: 3rem 1rem;
  -webkit-transition: width 0.2s ease-out;
          transition: width 0.2s ease-out;
  z-index: 10000;
  font-size: 1.125rem;
  border-bottom: 1px solid white; }
  nav .burger.close {
    position: absolute;
    left: 1rem;
    top: .5rem;
    z-index: 2; }
  nav li {
    border-top: 1px solid white; }
    nav li:last-child {
      border-bottom: 1px solid white; }
    nav li a {
      padding: .4rem .4rem;
      display: block; }
      nav li a:focus, nav li a:hover, nav li a:active {
        text-decoration: none;
        color: #000;
        background-color: #DAFF00; }

/*
 :::  Table
-------------------------------------------------- */
.tablescroller {
  background: #CBCBCB;
  width: 100%;
  overflow-x: auto;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  padding: 2rem 1rem;
  margin-bottom: 2rem; }

table {
  width: 100%;
  border-collapse: separate;
  overflow: hidden; }

td, th {
  text-align: center;
  font-size: .875rem;
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  padding: .4rem 0;
  min-width: 2em;
  cursor: default; }
  td:first-child, th:first-child {
    border-left: 0; }
    td:first-child a, th:first-child a {
      color: #000;
      background-color: #DAFF00;
      padding: 0 .33em; }
      td:first-child a:focus, td:first-child a:hover, td:first-child a:active, th:first-child a:focus, th:first-child a:hover, th:first-child a:active {
        color: #DAFF00;
        background: #000;
        text-decoration: none; }
  td:last-child, th:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.6); }

thead th {
  height: 10em;
  line-height: 1;
  white-space: nowrap;
  vertical-align: bottom;
  text-align: center;
  position: relative;
  z-index: 1;
  border-top: 4px solid #CBCBCB; }
  thead th.technical {
    border-top-color: #556270; }
  thead th.embed {
    border-top-color: #4ECDC4; }
  thead th.userfeatures {
    border-top-color: #C7F464; }
  thead th.streaming {
    border-top-color: #FF6B6B; }
  thead th.others {
    border-top-color: #C44D58; }
  thead th:first-child {
    border-top: none; }
  thead th span {
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 0;
    display: block;
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: 0;
        -ms-transform-origin: 0;
            transform-origin: 0;
    text-align: left;
    width: 10em; }

thead th:hover:after {
  background: rgba(255, 255, 255, 0.3);
  content: '';
  height: 5000px;
  left: 0;
  position: absolute;
  top: -2500px;
  width: 100%;
  z-index: -1 !important; }

thead th:first-child:after {
  display: none; }

tbody tr th:first-child {
  padding-left: .4em;
  padding-right: .4em;
  white-space: nowrap;
  vertical-align: middle; }
  tbody tr th:first-child .sucksless {
    display: inline-block;
    overflow: hidden;
    width: 1.6em;
    height: 1.6em;
    vertical-align: middle;
    text-indent: -1000px;
    position: relative;
    left: 2px;
    top: -2px;
    background: url(img/star.svg) 50% 50% no-repeat;
    background-size: 100%; }

tbody th {
  text-align: left;
  white-space: inherit;
  min-width: 10em; }

tbody tr:hover {
  background: rgba(255, 255, 255, 0.3); }

tbody td {
  position: relative;
  z-index: 1;
  padding-left: .2rem;
  padding-right: .2rem; }

tbody .yes, tbody .no, tbody .incomplete {
  text-align: center;
  position: relative; }
  tbody .yes span:after, tbody .no span:after, tbody .incomplete span:after {
    position: relative;
    z-index: 3 !important;
    background: blue; }

.yes span {
  display: none; }

.yes:before {
  text-align: center;
  display: inline-block;
  content: "✔";
  background: #090;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0 0 .1rem;
  color: #fff;
  border-radius: 100%;
  margin: 0 .3em; }

.no span {
  display: none; }

.no:before {
  text-align: center;
  color: #888;
  display: inline-block;
  content: "–";
  width: 1.1rem;
  height: 1.1rem;
  padding: 0 0 .1rem;
  margin: 0 .3em; }

.no.hosting:before {
  display: none; }

.incomplete {
  color: #c60; }

/*
 :::  Footer
-------------------------------------------------- */
footer {
  text-align: center;
  font-size: 1.3rem;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }
/*# sourceMappingURL=screen.css.map */