/* ------------------------------------------------------------------------------
*
*  # Labels component
*
*  Overrides for labels bootstrap component
*
*  Version: 1.1
*  Latest update: Oct 20, 2015
*
* ---------------------------------------------------------------------------- */
.label {
  display: inline-block;
  font-weight: 500;
  padding: 1px 4px 0px 4px;
  line-height: 1.5384616;
  border: 1px solid transparent;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.1px;
  border-radius: 2px;
}
.btn .label {
  top: 0;
}
.list-group-item.active > .label,
.nav-pills > .active > a > .label,
.nav-tabs-solid > .active > a > .label,
.nav-tabs[class*=bg-] > li > a > .label {
  color: #333333;
  background-color: #fff;
  border-color: #fff;
}
@media (min-width: 769px) {
  .list-group-item > .label {
    float: right;
  }
  .list-group-item > .label + .label {
    margin-right: 7px;
  }
}
.label > .caret,
.badge > .caret {
  margin-top: -2px;
}
.open .label.dropdown-toggle,
.open .badge.dropdown-toggle {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.label[href]:hover,
.badge[href]:hover,
.label[href]:focus,
.badge[href]:focus {
  opacity: 0.85;
  filter: alpha(opacity=85);
}
.label-default {
  border-color: #999999;
}
.label-default[href]:hover,
.label-default[href]:focus {
  background-color: #999999;
}
.label-primary {
  border-color: #2196F3;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #2196F3;
}
.label-success {
  border-color: #4CAF50;
}
.label-success[href]:hover,
.label-success[href]:focus {
  background-color: #4CAF50;
}
.label-info {
  border-color: #00BCD4;
}
.label-info[href]:hover,
.label-info[href]:focus {
  background-color: #00BCD4;
}
.label-warning {
  border-color: #000000;
  background-color: #FF5722;
  color: #FFFFFF;
  font-weight: bold;
}
.label-warning[href]:hover,
.label-warning[href]:focus {
  background-color: #FF5722;
}
.label-danger {
  border-color: #F44336;
}
.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #F44336;
}
.label-striped {
  background-color: #f5f5f5;
  color: #333333;
  border-left-width: 2px;
  padding: 5px 10px;
}
.label-striped.label-striped-right {
  border-left-width: 1px;
  border-right-width: 2px;
}
.label-striped,
.label-striped.label-icon {
  border-radius: 0;
}
.label-striped[href]:hover,
.label-striped[href]:focus {
  color: #333333;
  background-color: #eeeeee;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.label-flat {
  background-color: transparent;
  border-width: 2px;
  border-radius: 0;
}
.label-flat[href]:hover,
.label-flat[href]:focus {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.label-icon {
  padding: 7px;
  border-radius: 2px;
}
.label-icon > i {
  top: 0;
}
.label-icon.label-flat {
  padding: 6px;
}
.label-icon-xlg {
  padding: 10px;
}
.label-icon-xlg.label-flat {
  padding: 9px;
}
.label-icon-lg {
  padding: 9px;
}
.label-icon-lg.label-flat {
  padding: 8px;
}
.label-icon-sm {
  padding: 6px;
}
.label-icon-sm.label-flat {
  padding: 5px;
}
.label-icon-xs {
  padding: 5px;
}
.label-icon-xs.label-flat {
  padding: 4px;
}
.label-rounded {
  border-radius: 100px;
}
.label-rounded:not(.label-icon) {
  padding-left: 7px;
  padding-right: 7px;
}
.label-roundless {
  border-radius: 0;
}
.label-block {
  display: block;
}
.form-control + .label-block {
  margin-top: 7px;
}
.label-block.text-left {
  text-align: left;
  margin-right: 0;
}
.label-block.text-right {
  text-align: right;
  margin-left: 0;
}


/* ------------------------------------------------------------------------------
*
*  # Dropdown Nav Menu
* ---------------------------------------------------------------------------- */

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #200a04;
}

li {
  float: left;
  border-right: 1px solid #bbb;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}


/* ------------------------------------------------------------------------------
*
*  # Hero component
*
*  Hero top image
*
* ---------------------------------------------------------------------------- */
/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/basketball.png");
/* Set a specific height */
height: 12%;
width:  100%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 4;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}

/* ------------------------------------------------------------------------------
*
*  # General Stuff
* ---------------------------------------------------------------------------- */
@import url(https://fonts.googleapis.com/css?family=Arimo:400,400italic,700,700italic);

.greeting {
padding: 10px;
}

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
  font-size:16px;
  font-family: 'Arimo', sans-serif;
}
@media(max-width:60em){body,html{font-size: 80%;} ul{line-height:200%;}}