/*------------------------------------------------------------------------------
-- Top-Bar
------------------------------------------------------------------------------*/
.nav-bar {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: #2c3840;
  height: 75px;
  margin-bottom: 75px;
}

.nav-bar .nav-bar-logo {
  padding: 1.8rem;
}

.nav-bar li {
  background: #2c3840;
}

.nav-bar a {
  color: #fefefe;
  transition: color 0.2s ease-in;
}

.nav-bar a:hover {
  color: #a8b8c3;
}

@media screen and (max-width: 39.9375em) {
  .nav-bar {
    height: 53.57143px;
  }
}

.nav-bar .offcanvas-trigger {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1.6rem;
  color: #fefefe;
  text-transform: uppercase;
  background-color: #566d7c;
  transition: background-color 0.2s ease-in;
  cursor: pointer;
}

.nav-bar .offcanvas-trigger .offcanvas-trigger-text {
  margin-right: 0.25rem;
  margin-top: 0.25rem;
}

.nav-bar .offcanvas-trigger:hover {
  background-color: #6b879a;
}

@media screen and (max-width: 39.9375em) {
  .nav-bar .offcanvas-trigger {
    padding: 0.9rem;
  }
}

.multilevel-offcanvas {
  background: #222b31;
  padding: 20px;
  color: #fefefe;
}

.multilevel-offcanvas > .menu {
  margin-bottom: 1rem;
}

.multilevel-offcanvas .menu a {
  color: rgba(254, 254, 254, 0.6);
  padding-top: 7px;
  padding-bottom: 7px;
  transition: color 0.2s ease-in;
}

.multilevel-offcanvas .menu a:hover {
  color: #fefefe;
}

.multilevel-offcanvas .fa {
  color: #fefefe;
}

.multilevel-offcanvas .is-accordion-submenu-parent > a::after {
  border-color: rgba(254, 254, 254, 0.6) transparent transparent;
}

.multilevel-offcanvas .social-links {
  margin-left: 20px;
}

.multilevel-offcanvas .social-links li {
  margin-right: 5px;
}

.multilevel-offcanvas .social-links a:hover .fa {
  color: #bebebe;
  transition: color .2s ease-in;
}

.multilevel-offcanvas .social-links .fa {
  font-size: 2.2rem;
}

.body-info {
  text-align: center;
  color: #2c3840;
}

.body-info .button {
  margin: 1rem 0;
  padding: 0.85em 2em;
}

.is-open + .off-canvas-content .hamburger .line:nth-child(1),
.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
  width: 12px;
}

.is-open + .off-canvas-content .hamburger .line:nth-child(1) {
  -webkit-transform: translateX(-5px) rotate(-45deg);
      -ms-transform: translateX(-5px) rotate(-45deg);
          transform: translateX(-5px) rotate(-45deg);
}

.is-open + .off-canvas-content .hamburger .line:nth-child(3) {
  -webkit-transform: translateX(-5px) rotate(45deg);
      -ms-transform: translateX(-5px) rotate(45deg);
          transform: translateX(-5px) rotate(45deg);
}

.hamburger .line {
  width: 20px;
  height: 2px;
  background-color: #fefefe;
  display: block;
  margin: 3px auto;
  transition: all 0.3s ease-in-out;
}

.hamburger .line:last-child {
  margin-bottom: 0;
}

.nav-bar-left {
  margin-left: 0.5em;
}
/*------------------------------------------------------------------------------
-- Parallax-Hintergrundbilder
------------------------------------------------------------------------------*/
* {
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  margin: 0;
  font: 400 15px/1.8 "Lato", sans-serif;
  color: #777;
}

.parallax {
  position: relative;
  background-attachment: fixed;
  background-position: center 0 !important;
  background-repeat: no-repeat;
  background-size: cover;
  /**
   * Default height
   */
  height: 100%;
}

.caption {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;

  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;

  height: 100%;
}

.caption .border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

h3 {
  letter-spacing: 5px;
  text-transform: uppercase;
  font: 20px "Lato", sans-serif;
  color: #111111;
  text-align:center;
}

.text {
  color: #777777;
  background-color: #ffffff;
  text-align: center;
  padding: 50px 80px;
  text-align: justify;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .parallax {
    background-attachment: scroll;
  }
}

/*------------------------------------------------------------------------------
-- Homepage
------------------------------------------------------------------------------*/

.nav-bar {
    margin-bottom: 0;
}

.title {
  position: relative;
  height: 97vh;
  background: url("../img/index_trachtenumzug.jpg") no-repeat scroll center center / cover transparent;
}

.title p {
  padding-top: 2vh;
  color: black;
  line-height: 1;
  font-weight: normal;
  font-family: 'Dancing Script';
}

.title p span {
  font-size: 1.5em;
}

.title p.titel_1 {
				font-size: 3.5em;
		}

/*----------------------------------------------------------------------------*/

.ueber_uns {
  background: none repeat scroll 0% 0% #FFF;
  padding: 1em 0px;
  font-size: 1.3em;
  font-family: 'Dancing Script';
  color: black;
}

a.grey {
  margin:2em;
		background-color: dimgray;
		border-color: dimgray;
}

a.grey:hover, a.grey:focus, a.grey:visited, a.grey:focus {
  background-color: grey;
}

/*----------------------------------------------------------------------------*/

article.kerweredd {
  background: none repeat scroll 0% 0% slategray;
  padding: 4em 0px;
  font-size: 1.3em;
  font-family: 'Dancing Script';
  color: white;
}

a.black {
  margin:2em;
		background-color: black;
		border-color: black;
  font-family: 'Dancing Script';
}

a.black:hover, a.black:focus, a.black:visited, a.black:focus {
  background-color: #000111;
  font-family: 'Dancing Script';
}

/*----------------------------------------------------------------------------*/

.auftritte {
  font-family: 'Dancing Script';
  color: black;
}

/*----------------------------------------------------------------------------*/

.kontakt {
  padding-top: 3em;
  font-family: 'Dancing Script';
  background-color: silver;
}

a.kontaktbutton {
		background-color: black;
		border-color: black;
}

a.kontaktbutton:hover, a.kontaktbutton:focus, a.kontaktbutton:visited, a.kontaktbutton:focus {
  background-color: black;
  color: white;
}

.kontaktbutton {
		display: inline-block;
		padding: 1rem 6rem 1.0625rem;
		font-size: 2rem;
		color: #FFF;
}

/*----------------------------------------------------------------------------*/

.about_us_bottom {
  margin-top: 12em;
}

.bg-grey {
  background-color: lightgrey;
}

/*----------------------------------------------------------------------------*/

.footer-up {
  font-size: 1.2rem;
  color: black;
}


/*------------------------------------------------------------------------------
-- Small screens
------------------------------------------------------------------------------*/
@media only screen {

 .ueber_uns p.ueb_uns_1 {
				font-size: 1.1em;
		}

		.ueber_uns p.ueb_uns_2 {
				font-size: 1.4em;
		}

  .title p.titel_1 {
				font-size: 2.5em;
		}

  .kerweredd p.redd_1 {
				font-size: 1.4em;
		}

		.kerweredd p.redd_2 {
				font-size: 1.1em;
		}

  .auftritte p.heading_auf {
				font-size: 0.5em;
		}

  .kontakt p.git_1 {
				font-size: 2em;
		}

		.kontakt p.git_2 {
				font-size: 1.5em;
		}

		.kontakt p.git_3 {
				font-size: 1.0em;
		}

  .footer {
    font-size: 0.8em;
  }

}

@media only screen and (max-width: 40em) {

 .ueber_uns p.ueb_uns_1 {
				font-size: 1.2em;
		}

		.ueber_uns p.ueb_uns_2 {
				font-size: 1.6em;
		}

  .title p.titel_1 {
				font-size: 2.5em;
		}

  .kerweredd p.redd_1 {
				font-size: 1.7em;
		}

		.kerweredd p.redd_2 {
				font-size: 1.2em;
		}

  .auftritte p.heading_auf {
				font-size: 2.8em;
		}

  .kontakt p.git_2 {
				font-size: 1.5em;
		}

		.kontakt p.git_3 {
				font-size: 1.0em;
		}

  .footer {
    font-size: 0.8em;
  }


}

/*------------------------------------------------------------------------------
-- Medium screens
------------------------------------------------------------------------------*/
@media only screen and (min-width: 40.063em) {

 .ueber_uns p.ueb_uns_1 {
				font-size: 1.4em;
		}

		.ueber_uns p.ueb_uns_2 {
				font-size: 2.0em;
		}

  .title p.titel_1 {
				font-size: 3.5em;
		}

  .kerweredd p.redd_1 {
				font-size: 2.2em;
		}

		.kerweredd p.redd_2 {
				font-size: 1.7em;
		}

  .auftritte p.heading_auf {
				font-size: 3.9em;
		}

  .kontakt p.git_1 {
				font-size: 2em;
		}

  .kontakt p.git_2 {
				font-size: 1.5em;
		}

		.kontakt p.git_3 {
				font-size: 1.0em;
		}

  .footer {
    font-size: 1em;
  }

}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {

 .ueber_uns p.ueb_uns_1 {
				font-size: 1.4em;
		}

		.ueber_uns p.ueb_uns_2 {
				font-size: 2.0em;
		}

  .title p.titel_1 {
				font-size: 3.5em;
		}

  .kerweredd p.redd_1 {
				font-size: 2.2em;
		}

		.kerweredd p.redd_2 {
				font-size: 1.7em;
		}

  .auftritte p.heading_auf {
				font-size: 3.9em;
		}

  .kontakt p.git_1 {
				font-size: 3em;
		}

		.kontakt p.git_2 {
				font-size: 1.9em;
		}

		.kontakt p.git_3 {
				font-size: 1.2em;
		}

  .footer {
    font-size: 1em;
  }

}

/*------------------------------------------------------------------------------
-- Large screens
------------------------------------------------------------------------------*/

@media only screen and (min-width: 64.063em) {

 .ueber_uns p.ueb_uns_1 {
				font-size: 1.8em;
		}

		.ueber_uns p.ueb_uns_2 {
				font-size: 2.5em;
		}

  .title p.titel_1 {
				font-size: 4.5em;
		}

  .kerweredd p.redd_1 {
				font-size: 3.0em;
		}

		.kerweredd p.redd_2 {
				font-size: 2.1em;
		}

  .auftritte p.heading_auf {
				font-size: 3.9em;
		}

  .auftritte p.subheading_auf {
				font-size: 2.0em;
		}

  .auftritte p.auf {
				font-size: 1.3em;
		}

  .kontakt p.git_1 {
				font-size: 3em;
		}

		.kontakt p.git_2 {
				font-size: 1.9em;
		}

		.kontakt p.git_3 {
				font-size: 1.2em;
		}

  .footer {
    font-size: 1em;
  }

}

@media only screen and (min-width: 64.063em) and (max-width: 90em) {

 .ueber_uns p.ueb_uns_1 {
				font-size: 1.8em;
		}

		.ueber_uns p.ueb_uns_2 {
				font-size: 2.5em;
		}

  .title p.titel_1 {
				font-size: 4.5em;
		}

  .kerweredd p.redd_1 {
				font-size: 3.0em;
		}

		.kerweredd p.redd_2 {
				font-size: 2.1em;
		}

  .auftritte p.heading_auf {
				font-size: 3.9em;
		}

  .auftritte p.subheading_auf {
				font-size: 2.0em;
		}

  .auftritte p.auf {
				font-size: 1.3em;
		}

  .kontakt p.git_1 {
				font-size: 4em;
		}

		.kontakt p.git_2 {
				font-size: 2.9em;
		}

		.kontakt p.git_3 {
				font-size: 1.6em;
		}

  .footer {
    font-size: 1em;
  }

}