.hide-from-desktop { display: none; }

html { font-size: 16px; }

body                { background-color:#000000; }
#features-list li   { background-color:#000000; }
body                { color:#B6B8BE; }
#fact-sheet a       { color:#B6B8BE; }
#fact-sheet a:hover { color:#FFFFFF; }
b                   { color:#FFFFFF; }

main {
  padding-top: 5vh;
  padding-left: 5vw;
  padding-right: 5vw;
}
h1 {
  font-weight: normal;
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Banner */
header {
  width: 80%;
  height: 200px;
margin-left: 10%;
}

header img  {
  width: 100%; /* takes the 100 % width of its container (.box div)*/
  height: 100%; /* takes the 100 % height of its container (.box div)*/
  max-height: 290px;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}


/* Fact Sheet */
.fact-sheet-section {
  padding: 1rem;
}
.fact-sheet-section-contents {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

/* Description */
section.description {
  line-height: 2rem;
}

/* Features */
#features-list {
  display: flex;
  flex-direction: column;
}
#features-list li {
  display: block;
  line-height: 2rem;
  border-top: 1px solid #AAAAAA;
  border-bottom: 1px solid #AAAAAA;

  /* fake border-collapse */
  margin-bottom: -1px;
}

/* Sections Container */
#sections-container section {
  padding-top: 0;
  padding-bottom: 10vh;
}

/* Screenshots */
section.screenshots .download-link:hover { color: #F5BB4B; }
#screenshots-container   { text-align: center; }
#screenshots-container img {
  width: 100%;
  height: 100%;
}

/* Videos */
.video-container          { position: relative; }
.video-container-contents { position: absolute; }
.video-container-contents-border {padding-bottom: 0.20vw;}
.video-container-contents        {top:0.20vw;left:0.20vw;right:0.20vw;}
.video-container-contents-border {
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}
.video-container:hover .video-container-contents-border {
  transform: scale(1.01);
  -webkit-transform: scale(1.01);
}
.video-container       .video-container-contents-border { background-color:#B6B8BE; }
.video-container:hover .video-container-contents-border { background-color:#F5BB4B; }
.video-container:hover .video-container-contents-border { border: 0.10vw solid #F5BB4B; }
.video-container-contents iframe {
  width: 100%;
  height: 100%;
}

/* Logo */
section.logo div {
  text-align: left;
}
section.logo a { background:none;border-color:#F5BB4B; }
section.logo img {
  width: 100%;
  height: 100%;
}