#top-ribbon  { display:none; }
#bar-poweredby { display:none; }
body {
  background: black;
}

/* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: sticky;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 40px;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: none;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

li {
  float: center;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #f3d80e;
}
</style>
</head>
<body>


<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>

<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
</ul>


/* kaskade */

.sluzby .thumbnail {

  background-color:rgba(41,44,47,0.2);                       /* barva pozadí */



  border:1px solid #292C2F;                        /* tloušťka ohraničení, styl čáry, barva ohraničení */

  border-radius:3px;                               /* oblé rohy, hodnota 0px znaméná ostré rohy */

}

.sluzby .thumbnail .caption {color:#eeeef0;}      /* barva textu */

.sluzby .thumbnail .caption h2{color:#eeeef0;}    /* barva nadpisu */

.img-rounded

.sluzby .thumbnail .caption .btn-primary {

  color:#eeeef0;                                    /* barva textu */

  background-color:rgba(41,44,47,0.2);                         /* barva pozadí */

  border:0px solid #eeeef0;                         /* barva ohraničení */

}



.sluzby .thumbnail .caption .btn-primary:hover {

  color:#eeeef0;                                    /* barva písma při najetí myši na tlačítko */

  background-color:rgba(41,44,47,0.2);                         /* barva pozadí po najetí myši na tlačítko */

  border:1px solid #eeeef0;                         /* barva ohraničení po najetí myši na tlačítko */

}

.thumbnail { background-color: transparent;} 

.form-horizontal {background-color: rgba(41,44,47,0.2);}

/*fotogalerie*/
.item-photo .thumbnail {
  border-radius:6px; /*oblé rohy*/
  background-color:transparent; /*pozadí průhledné, nebo lze zadat barvu*/
  border: 0px dotted #f3d80e; /*tloušťka, styl(solid, dotted...) a barva čáry*/
}


.img-thumbnail {background:transparent} /*průhledné pozadí, nebo lze zadat barvu, pozadí samotného náhledového obrázku*/

#content {
  margin: 0 auto 10px;        /* hodnotu 170px může být potřeba změnit v závislosti na výšce patičky */
}
#box-custom-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0;
  margin: 0 auto 50px;         /* 50px je výška prvku bar-poweredby */
}
#bar-poweredby {              /* jde o prvek s inPage nadpisem, který se nachází pod patičkou */
  position: absolute;
  right: 0;
  bottom: 0px;
  left: 0;
}

/*----------// konec patičky vždy dole ------------*/ 




h1, h2, h3, h4, h5, h6 { font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; }

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
