@import url('https://fonts.googleapis.com/css?family=IM+Fell+English:400|Lato:400,400i&subset=latin&display=swap')

a:focus, a:hover {
  color: #e5a544;
}

.inputlist, .inputtext {
  height: 30px;
  width: 250px; 
}

/*
*
*/

html {
  box-sizing: border-box;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding: 0;
}

.container-fluid {
  max-width: 500px;
  /* background-color: white; */
  /* background-color: #5290b4; */
  /* background-color: rgba(116, 204, 255, 0.5); */
  /* background-color: rgba(255, 255, 255, 0.5); */
  background-color: rgba(0, 0, 0, 0.50);
  color: #868e96;
  padding: 75px;
}

.container {
  padding: 75px 15px;
  /* background-color: white; */
  background-color: rgba(0, 0, 0, 0.50);
  color: #ffffff;    
}

/*
a {
  width: 100%;
}
*/

h1 {
  color: #dedad6;
}

#mainNav {
  border-color: rgba(34, 34, 34, 0.05);
  background-color: #77AEC7;
  font-family: 'IM Fell English', 'Lato', Arial, sans-serif;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
}

#mainNav .navbar-brand {
  font-weight: 700;
  text-transform: uppercase;
  color: #e5a544;
  font-family: 'IM Fell English', 'Lato', Arial, sans-serif;
}

#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
  color: #e5a544;
}

#mainNav .navbar-toggle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: #222222;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus,
#mainNav .navbar-nav > li.nav-item > a.nav-link {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link:hover {
  color: #e5a544;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active,
#mainNav .navbar-nav > li.nav-item > a.nav-link.active {
  color: #e5a544 !important;
  background-color: transparent;
}

#mainNav .navbar-nav > li.nav-item > a.nav-link:focus.active:hover,
#mainNav .navbar-nav > li.nav-item > a.nav-link.active:hover {
  background-color: transparent;
}

@media (min-width: 992px) {
  #mainNav {
      border-color: rgba(255, 255, 255, 0.3);
  }

  #mainNav .navbar-brand {
      color: rgba(255, 255, 255, 0.7);
  }

  #mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover {
      color: white;
  }

  #mainNav .navbar-nav > li.nav-item > a.nav-link,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus {
      color: rgba(255, 255, 255, 0.7);
  }

  #mainNav .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav .navbar-nav > li.nav-item > a.nav-link:focus:hover {
      color: white;
  }

  #mainNav.navbar-shrink {
      border-color: rgba(34, 34, 34, 0.05);
      background-color: white;
  }

  #mainNav.navbar-shrink .navbar-brand {
      font-size: 16px;
      color: #e5a544;
  }

  #mainNav.navbar-shrink .navbar-brand:focus, #mainNav.navbar-shrink .navbar-brand:hover {
      color: #e5a544;
  }

  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus {
      color: #222222;
  }

  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:hover,
  #mainNav.navbar-shrink .navbar-nav > li.nav-item > a.nav-link:focus:hover {
      color: #e5a544;
  }
}