* {
  box-sizing: border-box;
}
body, html {
  height: 100%;
  font-family: "Inconsolata", sans-serif;
}
h5 {
  color: white;
}
p {
  font-size: 0.875em;
  color: white;
}
.mySlides {display:none}
.w3-tag, .fa {cursor:pointer}
.w3-tag {height:15px;width:15px;padding:0;margin-top:6px}
.w3-bar{
opacity: 0.8;
}
/* Set the width of the sidebar to 80px */
.w3-sidebar {width: 80px; background: #ffffff;}
/* Add a left margin to the "page content" that matches the width of the sidebar (80px) */
#main {margin-left: 80px}

.menu {
  display: none;
}

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #000000;
  color: white;
  font-size: 120%;
}

td {
  text-align: center;
}

video {
  max-width: 100%;
  height: auto;
}

/* Remove margins from "page content" on small screens */
@media only screen and (max-width: 600px) {#main {margin-left: 0}}

/* Search */
div.relative {
  position: relative;
  max-width: 600px;
  height: 36px;
  border-radius: 25px;
  width: 100%;
} 
form.ask input[type=search] {
  padding: 10px 68px 10px 25px;
  margin: 0 0 8px 0;
  font-size: 17px;
  border: 3px solid blue;
  border-radius: 25px;
  width: 100%;
  max-width: 600px;
  height: 36px;
  background: #f1f1f1;
}
div.absolute button{
  position: absolute;
  top: 3px;
  right: 0;
  margin-right: 2px;
  padding: 1px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  border-radius: 0 25px 25px 0;
  cursor: pointer;
  width:50px; 
}
form.ask button:hover {
  background: #0b7dda;
}
form.ask after {
  content: "";
  clear: both;
  display: table;
}

/* Responsive */
@media only screen and (max-width: 1400px) {div.relative {margin-left: 370px; width: 100%}}
@media only screen and (max-width: 1300px) {div.relative {margin-left: 340px; width: 560px}}
@media only screen and (max-width: 1200px) {div.relative {margin-left: 300px; width: 520px}}
@media only screen and (max-width: 1100px) {div.relative {margin-left: 250px; width: 490px}}
@media only screen and (max-width: 1000px) {div.relative {margin-left: 240px; width: 470px}}
@media only screen and (max-width: 900px) {div.relative {margin-left: 230px; width: 450px}}
@media only screen and (max-width: 800px) {div.relative {margin-left: 160px; width: 430px}}
@media only screen and (max-width: 700px) {div.relative {margin-left: 120px; width: 350px}}
@media only screen and (max-width: 600px) {div.relative {margin-left: 80px; width: 300px}}
@media only screen and (max-width: 500px) {div.relative {margin-left: 80px; width: 280px}}
@media only screen and (max-width: 400px) {div.relative {margin-left: 80px; width: 260px}}