@charset "UTF-8";
/*!
	Theme Name: Märchenlandtherme Breuna
	Theme URI: http://www.hbundb.de
	Description: Märchenlandtherme Breuna Theme
	Version: 1.0.0
	Author: Andreas Hedderich (a.hedderich@hbb-werbung.de) */
@import 'https://fonts.googleapis.com/css?family=Indie+Flower|Kalam';
* {
  box-sizing: border-box; }

a img {
  outline: none;
  border: none; }

html, body {
  font-family: 'Roboto';
  font-weight: 400; }

h1,
h2,
h3 {
  font-weight: normal;
  font-size: 1.3em;
  letter-spacing: 0.10em; }

h1 {
  font-size: 30px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: 'Kalam';
  line-height: 1.5; }

h2,
h3 {
  font-family: 'Kalam';
  font-weight: 500; }

html, body {
  background-color: #ffffff;
  font-size: 16px;
  line-height: 1.5em;
  margin: 0;
  padding: 0; }
  @media only screen and (max-width: 890px) {
    html, body {
      padding-top: 0; } }

.body-wrapper {
  padding-top: 9.4em; }
  @media only screen and (max-width: 890px) {
    .body-wrapper {
      padding-top: 0; } }

.wrapper {
  width: 1200px;
  margin: 0 auto;
  position: relative;
  display: block; }
  @media only screen and (max-width: 890px) {
    .wrapper {
      width: 100%; } }
  @media only screen and (min-width: 891px) and (max-width: 1199px) {
    .wrapper {
      width: 100%; } }

.header {
  background: url("img/header_red.png") no-repeat;
  background-size: 100%;
  position: absolute;
  width: 100%;
  z-index: 2; }
  @media only screen and (max-width: 890px) {
    .header {
      height: 150px; } }
  @media only screen and (min-width: 891px) and (max-width: 1199px) {
    .header {
      height: 280px; } }
  .header .wrapper {
    height: 100%; }

@media only screen and (min-width: 891px) and (max-width: 1199px) {
  #logo-main-link img {
    width: auto;
    height: 95%; } }

@media only screen and (max-width: 890px) {
  #logo-main-link img {
    padding: 0.6em 15%;
    height: 100%;
    width: auto; } }

#logo-side:active, #logo-side:focus {
  outline: none; }

#logo-side img {
  width: 94%;
  height: auto;
  margin: 1em 3%; }

.mobilenav ul {
  padding-left: 0; }
  .mobilenav ul li {
    list-style: none;
    padding-left: 1.3em; }
    .mobilenav ul li.current-page-ancestor, .mobilenav ul li.current-menu-item {
      background: rgba(170, 170, 170, 0.1);
      border-left: 2px solid #720E10; }
    .mobilenav ul li a {
      color: #000000;
      text-decoration: none;
      display: block; }
    .mobilenav ul li.current-menu-item > a {
      font-weight: bold; }
    .mobilenav ul li .sub-menu {
      display: none; }
      .mobilenav ul li .sub-menu .sub-menu li a {
        font-size: 0.9em; }
    .mobilenav ul li.current-page-ancestor > .sub-menu,
    .mobilenav ul li.current-menu-item > .sub-menu {
      display: block; }
      .mobilenav ul li.current-page-ancestor > .sub-menu .current-menu-item,
      .mobilenav ul li.current-page-ancestor > .sub-menu .current-page-ancestor,
      .mobilenav ul li.current-menu-item > .sub-menu .current-menu-item,
      .mobilenav ul li.current-menu-item > .sub-menu .current-page-ancestor {
        border-left: none;
        background: none; }

nav.main {
  text-align: left;
  clear: both;
  background: #393185; }
  nav.main:after {
    content: ' ';
    position: absolute;
    background: url("img/shadow.png") no-repeat;
    width: 100%;
    height: 2em;
    left: 0;
    background-size: 100% 100%; }
  nav.main div.menu {
    padding: 0;
    display: inline-block; }
    @media only screen and (max-width: 890px) {
      nav.main div.menu {
        display: none; } }
    @media only screen and (min-width: 891px) and (max-width: 1199px) {
      nav.main div.menu {
        padding-left: 8px; } }
  nav.main paper-icon-button {
    display: none; }
    @media only screen and (max-width: 890px) {
      nav.main paper-icon-button {
        display: block;
        background: #720E10;
        color: #ffffff;
        float: left;
        height: 78px;
        width: 70px;
        position: absolute;
        top: -39px;
        z-index: 2;
        border-radius: 0 10px 10px 0; } }
  nav.main ul {
    margin: 0;
    padding: 0; }
    nav.main ul li {
      display: inline-block;
      position: relative;
      padding: 0 0.5em; }
      nav.main ul li a {
        text-align: center;
        color: #FFFFFF;
        text-decoration: none;
        padding: 1em;
        display: block;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 1em;
        transition: all 0.4s;
        border-bottom: 1px solid rgba(114, 14, 16, 0);
        transform: translateY(1px); }
        nav.main ul li a:hover {
          border-bottom: 1px solid #FECC00; }
        @media only screen and (min-width: 891px) and (max-width: 1199px) {
          nav.main ul li a {
            padding: 0.6em; } }
      @media only screen and (min-width: 891px) and (max-width: 1199px) {
        nav.main ul li {
          padding: 0; } }
      nav.main ul li.current-menu-item, nav.main ul li.current-menu-ancestor {
        color: white;
        font-weight: 700; }
        @media only screen and (min-width: 891px) and (max-width: 1199px) {
          nav.main ul li.current-menu-item ul, nav.main ul li.current-menu-ancestor ul {
            width: auto;
            opacity: 1;
            visibility: visible;
            pointer-events: initial;
            white-space: nowrap; }
            nav.main ul li.current-menu-item ul li, nav.main ul li.current-menu-ancestor ul li {
              display: inline-block; } }
        nav.main ul li.current-menu-item > a, nav.main ul li.current-menu-ancestor > a {
          font-weight: 700; }
      nav.main ul li ul {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        transition: all 0.3s;
        border: #e7eaed 1px solid;
        background: #f8f8f8;
        left: 0;
        z-index: 999;
        border-bottom: none;
        width: 230px;
        pointer-events: none; }
        nav.main ul li ul li {
          display: block; }
          nav.main ul li ul li a {
            display: block;
            text-align: left;
            color: #435061; }
            nav.main ul li ul li a:hover {
              background: #f8f8f8;
              color: #720E10; }
          nav.main ul li ul li.current-menu-item a {
            background: #f8f8f8;
            color: #720E10; }
      nav.main ul li:hover ul {
        opacity: 1;
        visibility: visible;
        pointer-events: initial; }
  nav.main .social-media {
    position: absolute;
    left: 0;
    top: 1em; }
    nav.main .social-media iron-icon {
      fill: rgba(255, 255, 255, 0.8); }

#post-404 {
  min-height: 500px;
  padding: 2em 0 2em; }
  @media only screen and (max-width: 890px) {
    #post-404 {
      min-height: 0; } }

.headimage {
  clear: both;
  height: 585px;
  background: center center;
  background-size: cover;
  overflow: hidden;
  position: relative; }
  @media only screen and (max-width: 890px) {
    .headimage {
      margin-top: 0;
      height: 150px; } }
  @media only screen and (min-width: 891px) and (max-width: 1199px) {
    .headimage {
      height: 280px; } }

.headimage-placeholder {
  background: url("img/header.jpg") no-repeat center center;
  background-size: cover;
  position: relative;
  height: 585px; }
  @media only screen and (max-width: 890px) {
    .headimage-placeholder {
      margin-top: 0;
      height: 150px; } }
  @media only screen and (min-width: 891px) and (max-width: 1199px) {
    .headimage-placeholder {
      height: 280px; } }

#main-content {
  clear: both;
  background: url("img/background.jpg");
  min-height: 450px;
  /* VS composer resets */ }
  #main-content .main-page {
    z-index: 500;
    padding: 2em;
    /*margin-top: -4em*/
    position: relative;
    /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3)*/
    color: #435061; }
    @media only screen and (max-width: 890px) {
      #main-content .main-page {
        text-align: justify; } }
  #main-content a {
    color: #720E10;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s; }
    #main-content a:hover {
      color: #cd191d; }
  #main-content h1 {
    color: #720E10;
    text-align: left; }
    @media only screen and (max-width: 890px) {
      #main-content h1 {
        font-size: 1.5em; } }
  #main-content h2 {
    color: #720E10;
    font-size: 1.5em;
    text-align: left; }
    @media only screen and (max-width: 890px) {
      #main-content h2 {
        font-size: 1.2em; } }
  #main-content h3 {
    color: #720E10;
    font-size: 1.1em;
    text-transform: uppercase;
    text-align: left; }
  #main-content ul {
    padding-left: 1.6em; }
    #main-content ul li {
      list-style: none;
      position: relative; }
      #main-content ul li:before {
        content: ' ';
        position: absolute;
        background: #720E10;
        width: 0.5em;
        height: 0.5em;
        left: -1.4em;
        top: 0.4em; }
  #main-content .vc_parallax .vc_parallax-inner {
    background-attachment: fixed; }
  #main-content .wpb_button,
  #main-content .wpb_content_element,
  #main-content .wpb_row,
  #main-content ul.wpb_thumbnails-fluid > li {
    margin-bottom: 1em; }
  #main-content .vc_grid.vc_row .vc_grid-item .vc_btn, #main-content .vc_grid.vc_row .vc_grid-item .vc_icon_element, #main-content .vc_grid.vc_row .vc_grid-item .wpb_content_element {
    background-color: #720E10; }
  #main-content .vc_gitem-animated-block .vc_gitem-zone {
    background-color: #222 !important; }
  #main-content .vc_separator.vc_sep_border_width_2 .vc_sep_holder .vc_sep_line {
    border-top-width: 0; }
  #main-content th {
    font-weight: 400; }
  #main-content td {
    padding-right: 15px; }
  #main-content article.post {
    padding: 2em 2em 10em 2em; }
    #main-content article.post span.date {
      display: none; }

.newsbox {
  position: relative; }
  .newsbox .image:before {
    content: ' ';
    position: absolute;
    background: url("img/shadow.png") no-repeat;
    width: 100%;
    height: 1em;
    left: 0;
    background-size: 100% 100%;
    top: -1em;
    transform: rotate(180deg); }
  .newsbox .image:after {
    content: ' ';
    position: absolute;
    background: url("img/shadow.png") no-repeat;
    width: 100%;
    height: 1em;
    left: 0;
    background-size: 100% 100%;
    bottom: -1em; }
  .newsbox .image {
    padding-left: 15px; }

.layout {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex; }

.layout.horizontal {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  flex-direction: row;
  -ms-flex-direction: row; }

.newsboxes {
  overflow: hidden; }
  .newsboxes .navigation {
    text-align: center;
    padding-top: 1em; }
    .newsboxes .navigation svg .circle {
      visibility: hidden; }
    .newsboxes .navigation svg.active .circle {
      visibility: visible; }
  .newsboxes .slider {
    transition: all 300ms;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row; }
  .newsboxes .newsbox {
    position: relative;
    padding-top: 1em;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 0 100%;
    -moz-flex: 1 0 100%;
    -ms-flex: 1 0 100%;
    flex: 1 0 100%; }
    .newsboxes .newsbox .navleft,
    .newsboxes .newsbox .navright {
      width: 2em; }
    .newsboxes .newsbox .image {
      position: relative;
      display: block;
      line-height: 0;
      z-index: 2;
      background-size: cover;
      background-position: center center;
      height: 115px;
      margin: 0 1%; }
      .newsboxes .newsbox .image:before {
        content: ' ';
        position: absolute;
        background: url("img/shadow.png") no-repeat;
        width: 100%;
        height: 1em;
        left: 0;
        background-size: 100% 100%;
        top: -1em;
        transform: rotate(180deg); }
      .newsboxes .newsbox .image:after {
        content: ' ';
        position: absolute;
        background: url("img/shadow.png") no-repeat;
        width: 100%;
        height: 1em;
        left: 0;
        background-size: 100% 100%;
        bottom: -1em; }
    .newsboxes .newsbox .newsboxbackground {
      background-color: white;
      padding: 0.5em 1.5em 1.5em 1.5em;
      position: relative;
      flex: 1; }
      .newsboxes .newsbox .newsboxbackground:after {
        content: ' ';
        position: absolute;
        width: 25px;
        height: 25px;
        left: -1px;
        bottom: -1px;
        border-bottom: 2px solid #393185;
        border-left: 2px solid #393185; }

#main-content .postgrids {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }
  #main-content .postgrids .postgrid {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 1 1 320px;
    -moz-flex: 1 1 320px;
    -ms-flex: 1 1 320px;
    flex: 1 1 320px;
    position: relative;
    max-width: 100%;
    width: 328px;
    display: inline-block;
    margin: 0 1em 2em 0; }
    #main-content .postgrids .postgrid:before {
      content: ' ';
      position: absolute;
      background: url("img/shadow.png") no-repeat;
      width: 100%;
      height: 1em;
      left: 0;
      background-size: 100% 100%;
      top: -1em;
      transform: rotate(180deg); }
    #main-content .postgrids .postgrid:after {
      content: ' ';
      position: absolute;
      background: url("img/shadow.png") no-repeat;
      width: 100%;
      height: 1em;
      left: 0;
      background-size: 100% 100%;
      bottom: -1em; }
    #main-content .postgrids .postgrid a {
      position: absolute;
      bottom: 0em;
      left: 0em;
      color: white;
      padding-left: 18px;
      padding-top: 5px;
      height: 35px;
      width: 100%;
      background: #393185; }
      #main-content .postgrids .postgrid a:hover {
        color: #cd191d; }
    #main-content .postgrids .postgrid .imgpostgrid {
      position: relative;
      display: block;
      line-height: 0;
      background-size: cover;
      background-position: center center;
      height: 260px; }
      #main-content .postgrids .postgrid .imgpostgrid img {
        width: 100%;
        height: auto; }

.infobox p {
  margin-top: 0px; }

.footer {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.8);
  padding: 4em;
  background: #393185; }
  .footer:before {
    content: ' ';
    position: absolute;
    background: url("img/footer_yellow.png") no-repeat;
    width: 100%;
    height: 11em;
    left: 0;
    top: -11em; }
  .footer:after {
    content: ' ';
    position: absolute;
    background: url("img/shadow.png") no-repeat;
    width: 100%;
    height: 2em;
    left: 0;
    background-size: 100% 100%;
    top: 0; }
  @media only screen and (max-width: 890px) {
    .footer {
      padding: 0; } }
  .footer h3 {
    font-size: 1.5em;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
    padding-bottom: 0;
    color: #ffffff;
    font-style: italic;
    position: relative; }
    .footer h3:after {
      content: ' ';
      position: absolute;
      height: 1px;
      width: 2.5em;
      background: #FECC00;
      left: 0;
      bottom: -6px; }
  .footer a {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.3s; }
    .footer a:hover {
      color: #cd191d; }
  .footer ul.menu {
    list-style: none;
    padding-left: 0;
    margin: 0; }
  .footer > .wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex; }
    .footer > .wrapper > div {
      padding-left: 3em; }
      .footer > .wrapper > div:first-child {
        padding-left: 0; }
    .footer > .wrapper > div.widget_text {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      -webkit-flex: 1;
      -moz-flex: 1;
      -ms-flex: 1;
      flex: 1; }
    @media only screen and (max-width: 890px) {
      .footer > .wrapper {
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
        -webkit-box-direction: normal;
        -moz-box-direction: normal;
        box-direction: normal;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        flex-direction: column;
        -ms-flex-direction: column;
        padding: 0 2em; }
        .footer > .wrapper > div {
          padding: 2em 0; } }