@font-face {
	font-family: 'Univers 45 Light';
	src: url('../font/Univers_45_Light.ttf') format('truetype');
}
@font-face {
	font-family: 'Univers 65 Bold';
	src: url('../font/Univers_65_Bold.ttf') format('truetype');
}

* {
	font-family: 'Univers 45 Light';
	font-size: 1rem;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top: 120px;
}

html, body {
	color: #45494c;
	margin: 0;
	padding: 0;
	width: 100%;
}

a {
  color: #989fa5;
  text-decoration: underline;
}
a.hover {
  color: #3f5760;
}

.font-15-rem {
  font-size: 1.5rem;
}
.h1-universe-bold {
	font-family: 'Univers 65 Bold';
	font-size: 2.5rem;
}
.h2-universe-bold {
	font-family: 'Univers 65 Bold';
	font-size: 2rem;
}
.h3-universe-bold {
	font-family: 'Univers 65 Bold';
	font-size: 1.75rem;
}
.h4-universe-bold {
	font-family: 'Univers 65 Bold';
	font-size: 1.25rem;
}
.universe-bold {
	font-family: 'Univers 65 Bold';
}

/* Header, Logo, Navigation */
header {
  width: 100%;
}
nav {
  position: fixed;
  width: 100%;
  line-height: 60px;
}
nav ul {
  line-height: 60px;
  list-style: none;
  background: rgba(0, 0, 0, 0);
  overflow: hidden;
  color: #fff;
  padding: 0;
  text-align: right;
  margin: 0;
  padding-right: 40px;
  transition: 1s;
}
nav.black ul {
  background: #000;
}
nav ul li {
  display: inline-block;
  padding: 16px 40px;
}
nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}
.logo {
  line-height: 60px;
  position: fixed;
  float: left;
  margin: 16px 0;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 2px;
}
.menu-icon {
  line-height: 60px;
  width: 100%;
  background: #2b3a43;
  text-align: right;
  box-sizing: border-box;
  padding: 15px 24px;
  cursor: pointer;
  color: #fff;
  display: none;
}
.solid {
  background-color: #fff;
  transition: background-color 1s ease 0s;
  box-shadow: 0 0 4px grey;
}
.solidtext {
  color: #747f87;
}

.collapse-hover:hover .collapse {display: block;}

/* Jumbotron */
.jumbotron {
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  border-radius: 0;
}


/* Navigation links */
.leftsidenav {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.leftsidenav li {
  padding: 4px 0;
}
.leftsidenav li a {
  color: #989fa5;
  text-decoration: none;
}
.leftsidenav li a:hover {
  color: #3f5760;
  text-decoration: none;
}
.leftsidenavaktiv {
  border-right: 1px solid #ccb56b;
}
.leftsidenav li a.aktiv {
  color:#ccb56b;
}





@media(max-width: 786px) {
  .logo {
    position: fixed;
    top: 0;
    margin-top: 16px;
  }

  nav {
    background: #2b3a43;
  }

  nav ul {
    max-height: 0px;
    background: #2b3a43;
  }
  nav.black ul {
    background: #2b3a43;
  }
  .showing {
    max-height: 34em;
  }
  nav ul li {
    box-sizing: border-box;
    width: 100%;
    padding: 24px;
    text-align: center;
  }
  .menu-icon {
    display: block;
  }
}



/* Planung */
.planung {background: #f4f5f6;}
.planung-mt {margin-top: 150px !important;}
.btn-rounded {border-radius: 25px !important;}
.btn-outline-warning{color:#2b3a43;border-color:#ccb56b;text-decoration:none;}
.btn-outline-warning:hover{color:#fff;background-color:#ccb56b;border-color:#ccb56b}
.btn-outline-warning.focus,
.btn-outline-warning:focus{box-shadow:0 0 0 0 rgba(255,193,7,.5)}
.btn-outline-warning.disabled,
.btn-outline-warning:disabled{color:#ccb56b;background-color:transparent}
.btn-outline-warning:not(:disabled):not(.disabled).active,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.show>.btn-outline-warning.dropdown-toggle{color:#212529;background-color:#ccb56b;border-color:#ccb56b}
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(255,193,7,.5)}



/* Overlay Menü */
.overlay-menu {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(16,57,89); /* Black fallback color */
  background-color: rgba(16,57,89, 0.95); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-menu-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay-menu a {
  padding: 5px;
  text-decoration: none;
  font-size: 30px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay-menu a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay-menu .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}