html {
  font-family: 'Lato', sans-serif;
  font-size: 16px;
}

html, body {
  height: 100%;
  position: relative;
}

b {
  font-weight: bold;
}

ul {
  margin-left: 2em;
  margin-bottom: 1em;
}

ul > li {
  margin-bottom: .2em;
  list-style-type: disc;

}

.u-txt-black {
  color: #1d2129;
}

.fnt-bold {
  font-weight: bold;
}

.mb-s {
  margin-bottom: .1em;
}

.mr-s {
  margin-right: .1em;
}

.mb-m {
  margin-bottom: .5em;
}

.mr-m {
  margin-right: .5em;
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

.ib {
  display: inline-block;
}

.header {
  position: absolute;
  top:0;
  width: 100%;
  vertical-align: middle;
}

.header.sticky {
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 5;
  box-shadow: -1px 2px 10px 0px #ccc;
}

.main-footer {
  position: absolute; 
  bottom: 0;
  text-align: center;
  width: 100%; 
}

.footer-nav > a {
  padding: 1em;
  text-decoration: none;
  color: #1d2129;
}

.main-title {
  position: absolute;
  top: 30%;
  width: 100%;
}

.main-title .main-title-heading {
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}

.main-title-heading > span {
  display: inline-block;
  padding-bottom: .15em;
  border-bottom: .05em solid #1d2129;
}

.main-title .main-title-subheading {
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  margin-top: .5em;
  opacity: .65;
}

.main-background {
  position: relative;
  background-image: url('../img/bg1.jpg');
  min-height: 100%;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.about-me-background {
  position: relative;
  background-image: url('../img/about-me.jpg');
  height: 400px;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #ccc;
}

.room-background {
  position: relative;
  background-image: url('../img/room.jpg');
  height: 500px;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ccc;
}

.room2-background {
  position: relative;
  background-image: url('../img/room2.jpg');
  height: 250px;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ccc;
}

.deals-background {
  position: relative;
  background-image: url('../img/deals.jpg');
  height: 450px;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ccc;
}

.kontakt-background {
  position: relative;
  background-image: url('../img/kontakt.jpg');
  height: 450px;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ccc;
}

.footer-background {
  position: relative;
  background-image: url('../img/kontakt.jpg');
  height: 450px;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #ccc;
}


.navigation {
  font-size: 1.25em;
  text-transform: capitalize;
  margin-right: 1.5em;
  text-align: right;
}

.navigation-title {
  font-size: 1.5em;
  text-transform: uppercase;
  font-weight: bold;
  margin: 1em 0 1em 1.5em;
  outline: none;
  text-decoration: none;
  color: #737475;
}


.navigation .nav-link {
  display: inline-block;
  margin: 0 0.25em;
  color: #737475;
  cursor: pointer;
  padding: 1em 0;
  border-top: .2em solid rgba(0,0,0,0);
  border-bottom: .2em solid rgba(0,0,0,0);
  transition: 0.3s ease;
  text-decoration: none;
  outline: none;
}

.sticky .navigation .nav-link {
  padding: .5em 0;
}

.navigation .nav-link:hover{
  opacity: 1;
  color: #1d2129;
  border-top: .2em solid  #1d2129;
  border-bottom: .2em solid #1d2129;
  padding: .2em 0;
}

.content {
  max-width: 1024px;
  margin: 0 auto;
  padding: 3em;
  text-align: center;
}

.content-header {
  font-size: 1.5em;
  text-transform: uppercase;
  margin-top: 1em;
  opacity: .65;
  display: inline-block;
  margin-bottom: 2em;
  border-bottom: .1em solid black;
  border-top: .1em solid black;
  padding: .2em 0;
}

.content-subheader {
  font-size: 1.2em;
  text-transform: uppercase;
  margin-top: 1em;
  opacity: .65;
  display: inline-block;
  margin-bottom: .5em;
  padding: .2em 0;
  font-weight: bold;
}

.content-body {
  text-align: left;
  line-height: 1.25em;
  margin-bottom: 1em;
}

.content-body p {
  margin-bottom: .75em;
}

.quote {
  margin: 1em 0;
}

.quote p {
  font-weight: bold;
  font-style: italic;
  padding: .5em 1em;
}

.resume-link {
  margin-top: 1em;
  display: block;
}

.course-info {
  width: 100%;
  margin-top: 2em;
}

.course-info tr {
  border-bottom: .02em solid #ccc;
}

.course-info tr:first-child {
  border-top: .02em solid #ccc;
}

.course-info tr td {
  padding: 0.5em 0;
}

.course-info tr:nth-child(odd) {
  background: #f1f1f1;
}

.course-info tr td:first-child {
  font-weight: bold;
  width: 30%;
  text-align: center;
  vertical-align: middle;
}

.flex {
  display: flex
}

.flex.flex-all > div {
  flex: 1 1; 
}

.flex.flex-space-between {
  justify-content: space-between; 
}

.footer {
  border-top: .1em solid rgba(0,0,0, .65);
  padding: 1em;
}

.footer > a {
  color: #1d2129;
  text-decoration: none;
}

.impressum-navigation-header {
  border-bottom: .1em solid #1d2129;
}

.impressum-navigation-header.sticky { 
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: white;
}

.sticky .navigation-title {
  margin: .5em 0 .5em 1.5em;
}


@media only screen and (max-width: 600px) {
  html {
    font-size: 14px;
  }
}
