/*
Theme Name: BuehneinHirnsberg - Theme
Author: Z10NewMedia
Author URI: https://www.z10newmedia.de/
Description: Theme for Page
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style
Version: 1.1
Requires at least: 6.0
Tested up to: no
 */

 * {margin: 0; padding: 0;}

 body {
  font-family: 'Roboto', sans-serif;
  color: #271f16;
  font-size: 16px;
}

a {color: #271f16; transition: all .6s;}
a:hover {color: #319152; transition: all .6s;}
.small {font-size: .7em;}

ul {
  list-style-type: none;
}

p {
  margin: 1em 0;
}

header{
  background: rgb(255,46,36);
  background: linear-gradient(166deg, rgba(49,145,82,1) 0%, rgba(1,88,33,1) 100%);
  height: 26vh;
  text-align: center;
  color: #ffffff;
margin-bottom: 1em;}

header img {width: 90vw; margin: 6vh auto;}

.headcontainer {width: 96vw; margin: auto; text-align: left; position: relative;}
.toggle-bars {
  display: none;
  font-size: 2em;
  color: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
}
.headernav {display: flex; width: 60%; position: absolute; top: 45px; right: 0; flex-direction: row-reverse;}
.headernav .menu-item a {
  display: block;
  color: #ffffff;
  text-align: right;
  padding: .4em 0 0 2.5em;
  font-weight: bold;
  font-style: italic;
  text-decoration: none;
}
.headernav .menu-item a:hover {
  color: #ffffff80;
}
.headersocials {
  position: absolute;
  top: 10px;
  right: 0;
  width: 25vw;
  height: 20px;
}
header a .fa-brands {
  display: block;
  color: #ffffff;
  float: right;
  font-size: 2.3em;
  margin: 0 0 0 .4em;
  transition: all .5s ease;
}
header a:hover .fa-brands {
  color: #ffffff80;
}


.copy {position: absolute; bottom: 5vh; width: 100%;}
.contentwrapper {text-align: center; margin: 2em; min-height: 46vh;}
.displaynone {display: none;}

footer{
  background: #fff;
  min-height: 27vh;
  text-align: center; 
  color: #47473f;
  position: relative;}

footer a {
  background-color: rgb(1, 88, 33);
  color: #fff;
  padding: 1px 2px;
  text-decoration: none;
  font-size: 0.9em;}

.footcontainer {position: relative; padding: 3vh 0 0 0; z-index: 3;}

.footcontainer ul {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: column;
  width: max-content;
  margin: 0 auto;
  padding: 0;
  }
.footcontainer .menu .menu-item {
  display: block;
  flex: 0 1 auto;
  list-style-type: none;
  margin: 2px;
  }

.carousel-wrap {
  margin: 0 auto;
  padding: 0;
  width: 100%;
  position: relative;
  height: 46vh;
}

.owl-carousel .item {
position: relative;
z-index: 100; 
-webkit-backface-visibility: hidden; 
backface-visibility: hidden; 
height: 46vh;
color: #ffffff;
}

.blackwrapper {background-color: rgba(0, 0, 0, 0); width: inherit; height: inherit; transition: all .6s;}
.itemtext {position: absolute; bottom: 0; left: 0; width: 100%; transition: all .6s; text-transform: uppercase; margin: 0 0 0 5px;}
.itemtext h2 {font-size: 1.4em; margin: 0 5px 0 0; background-color: rgba(0, 0, 0, .3); width: fit-content;}
.itemtext h4 {font-size: 1.0em; margin: 0 5px 0 0; background-color: rgba(0, 0, 0, .3); width: fit-content;}
.itemtext h3 {font-size: 1.3em; margin: 0 5px 5px 0; padding: 0; background-color: rgba(0, 0, 0, .25); width: fit-content;}

.item:hover .itemtext {transition: all .6s; margin: 0 0 35px 10px;}
.item:hover .blackwrapper {background-color: rgba(0, 0, 0, .50); transition: all .6s;}

.owl-nav > button {
margin-top: -25px;
width: 50px;
position: absolute;
top: 50%;
color: #cdcbcd;
background-color: rgba(255, 255, 255, .25) !important;
}

.owl-nav i {
font-size: 50px;
}

.owl-nav .owl-prev {
left: 0px;
}

.owl-nav .owl-next {
right: 0px;
}

.owl-dots {display: none;}

.green {color: #d4e19a;}


@media screen and (min-width:520px) {
header img {height: 12vh; width: auto;}
.kreis {top: 5vh; right: 0vh;}
.itemtext h2 {font-size: 1.4em;}
.itemtext h4 {font-size: 1.2em;}
.itemtext h3 {font-size: 1.6em;}
}

@media only screen and (max-width: 768px) {
.container {overflow: hidden;}
.toggle-bars {display: block;}
  .toggle-bars {
    display: block;
    position: absolute;
    top: 4px;
    cursor: pointer;
  }
.menu-hauptnavi-container {
    position: absolute;
    top: 20vh;
    left: 100vw;
    width: 95vw;
    height: auto;
    padding: 2em 0;
    z-index: 100;
    background: rgba(3, 109, 47, 0.8);
    border: 1px solid rgba(255, 255, 255);
    transition: all ease-in-out .5s;
  }
   .headernav {
    display: flex;
    width: 96vw;
    position: relative;
    top: 0;
    right: 0;
    flex-direction: column-reverse;
  }
   .headernav .menu-item a {
    text-align: center;
    padding: .3em 0;
    margin: .1em 0;
    font-size: 1.2em;
  }
   .menuraus {
    left: 0;
  }
  .headersocials {display: none;}
}

@media screen and (min-width:768px) {
header img {height: 14vh; margin: 6vh auto;}
.headcontainer {width: 96vw;}
.headersocials {top: 9vh;}
.headernav {top:1vh;}
.itemtext h2 {font-size: 1.3em;}
.itemtext h4 {font-size: 1.0em;}
.itemtext h3 {font-size: 1.3em;}
.footcontainer ul {flex-direction: row;}
.menu-item span { display: inline-block; }
.menu-item-15 span { display: none; }
.footcontainer {padding: 12vh 0 2vh 0; line-height: 1.5em;}
}

@media screen and (min-width:1024px) {
header img {height: 10vh; margin: 8vh auto;}
.headcontainer {width: 96vw;}
.headersocials {top: 9vh;}
.headernav {top:14vh;}
.itemtext h2 {font-size: 1.6em;}
.itemtext h4 {font-size: 1.0em;}
.itemtext h3 {font-size: 1.4em;}
}

@media screen and (min-width:1200px) {
header img {height: 12vh; margin: 7vh auto;}
.headcontainer {width: 80vw;}
.headersocials {top: 9vh;}
.headernav {top:14vh;}
.itemtext h2 {font-size: 1.6em;}
.itemtext h4 {font-size: 1.2em;}
.itemtext h3 {font-size: 1.8em;}
}