:root {
  --main-color: "green";
  --green: #2c9650;
  --darkgreen: #305e3e;
  --brown: #77442c;
  --darkbrown: rgb(24, 10, 4);
  --grey: #cecece;
  --light-grey: #f7f7f7;
  --header-font: "Permanent Marker", cursive;
  --h1-font: "Permanent Marker", cursive;
  --url-font: "Indie Flower", cursive;
  --main-font: "Open Sans", sans-serif;
  --navi-font: "PT Sans Narrow", sans-serif;
  --navi-color: #000;
  --navi-hover: #2c9650;
  --navi-bg: rgba(255, 255, 255, 0.85);
  --bggradient: linear-gradient(to bottom, var(--green), var(--darkgreen));
  --footerradient: linear-gradient(to bottom, var(--brown), var(--darkbrown));
  --white: #fff;
  --black: #000;
  --footer-bg: var(--footerradient);
  --link-color: var(--darkgreen);
  --link-hover-color: var(--green);
}

/* pt-sans-narrow-regular - latin */
@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("../fonts/pt-sans-narrow-v17-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/pt-sans-narrow-v17-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* pt-sans-narrow-700 - latin */
@font-face {
  font-family: "PT Sans Narrow";
  font-style: normal;
  font-weight: 700;
  src:
    local(""),
    url("../fonts/pt-sans-narrow-v17-latin-700.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/pt-sans-narrow-v17-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* indie-flower-regular - latin */
@font-face {
  font-family: "Indie Flower";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("../fonts/indie-flower-v17-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/indie-flower-v17-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* permanent-marker-regular - latin */
@font-face {
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("../fonts/permanent-marker-v16-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/permanent-marker-v16-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src:
    local(""),
    url("../fonts/open-sans-v34-latin-regular.woff2") format("woff2"),
    /* Chrome 26+, Opera 23+, Firefox 39+ */
      url("../fonts/open-sans-v34-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

#toTopBtn {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Fixed/sticky position */
  bottom: 20px;
  /* Place the button at the bottom of the page */
  right: 30px;
  /* Place the button 30px from the right */
  z-index: 99;
  /* Make sure it does not overlap */
  border: none;
  /* Remove borders */
  outline: none;
  /* Remove outline */
  background-color: var(--green);
  /* Set a background color */
  color: var(--white);
  /* Text color */
  cursor: pointer;
  /* Add a mouse pointer on hover */
  padding: 8px;
  /* Some padding */
  border-radius: 2px;
  /* Rounded corners */
  font-size: 1.2rem;
  /* Increase font size */
  font-weight: bolder;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  opacity: 0.7;
}

#toTopBtn:hover {
  background-color: var(--brown);
  /* Add a dark-grey background on hover */
}

a,
a:hover {
  text-decoration: none;
}

header {
  background: url(../img/background/21.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 90vmin;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
  -o-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
  -ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
  -moz-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
}

.navbar-default {
  background-color: var(--navi-bg);
  padding: 0;
  font-family: var(--navi-font);
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  font-weight: 700;
  border-bottom: 5px solid var(--brown);
  box-shadow: 5px 5px 20px black;
  cursor: crosshair !important;
}

.dropdown-item {
  font-family: var(--navi-font);
  font-size: 0.8rem;
  letter-spacing: 0.2px;
  font-weight: 700;
  text-transform: none !important;
  cursor: crosshair !important;
  background: var(--navi-bg);
  z-index: 999;
}

.dropdown-item:active {
  background: var(--brown);
}

nav ul li {
  padding: 2vmin 3vmin;
  transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
  /* Safari */
  cursor: crosshair !important;
  z-index: 999;
}

.nav-item a {
  color: var(--navi-color);
  text-transform: uppercase;
  cursor: crosshair !important;
  z-index: 999;
}

nav ul li:hover {
  background-color: var(--navi-hover);
  cursor: crosshair !important;
}

.navbar-brand {
  text-transform: uppercase;
  color: var(--navi-color);
  padding: 0px 0px 0px 3vmin;
  font-weight: 100;
  font-size: 1.8rem;
  transition: color 0.7s;
  -webkit-transition: color 0.7s;
}

.navbar-brand:hover {
  color: var(--navi-hover);
}

.navbar-toggler i {
  color: var(--green);
}

/** end of navigation **/

.header {
  color: var(--white);
  z-index: 1;
}

.header h1 {
  font-family: var(--header-font);
  font-size: 3.7rem;
  text-shadow: 2px 4px 5px black;
}

.header h4 {
  font-family: var(--url-font);
  font-weight: 500;
}

.logoshadow {
  filter: drop-shadow(20px 10px 30px var(--black));
}

.logoresponsive {
  width: 50%;
}

/** main starts here **/
main {
  font-family: var(--main-font) !important;
}

main a:link,
main a:visited {
  color: var(--link-color);
}

main a:hover {
  color: var(--link-hover-color);
}

/** sections start here **/

section {
  width: 100%;
  padding: 1vmin;
  margin-bottom: 8vmin;
  /* overflow-x: hidden; */
}

section h1 {
  font-family: var(--h1-font);
  color: var(--green);
  font-size: 3.8rem;
  text-shadow: 2px 4px 4px black;
}

.cover {
  width: 100%;
  height: 40vmin;
}

/** welcome section starts here **/

/** countdown **/

.numbers .rect {
  position: relative;
  z-index: 1;
  background: var(--bggradient);
  color: var(--white);
  text-transform: uppercase;
  width: 12rem;
  height: 9rem;
  padding-top: 3vmin;
  margin: 2rem;
  border-radius: 0.5em;
  box-shadow: 2px 2px 12px black;
}

.numbers .rect h1 {
  color: var(--white);
}

/** footer starts here **/
footer {
  background: var(--footer-bg);
  color: var(--white);
  min-height: 20vmin;
  padding: 5vmin;
  border-top: 3px solid var(--green);
  color: var(--white);
}

footer a {
  color: var(--white);
}

footer a:hover {
  color: var(--black);
}

footer .elab {
  transition: filter 0.5s;
  -webkit-transition: filter 0.5s;
}

footer .elab:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/** news section starts here **/

#news .card {
  width: 100%;
  min-height: 70vmin !important;
  padding-bottom: 4vmin;
}

#news .card-body h5 {
  font-size: 1.2rem;
  margin-top: -10px;
}

#news .card-img-top {
  height: auto;
  transition: transform 0.5s;
}

#news .card-img-top:hover {
  transform: scale(1.1, 1.1);
}

#news .card-body {
  min-height: 38vmin;
  overflow: hidden;
}

#news .card-body p {
  font-size: 0.86rem;
}

.news-date {
  color: var(--white);
  font-weight: bold;
  font-size: 0.87rem;
  position: absolute;
  top: 2vmin;
  left: 2vmin;
  padding: 0.5rem;
  background: var(--green);
}

.news-wrap {
  background: var(--green);
  height: 4px;
  width: 100%;
}

#news .card .btn-default,
#news .button-archive,
#newsdetail .btn-default {
  background: var(--green);
  color: var(--white);
  border-radius: 0 !important;
  border-bottom: 2px solid var(--darkgreen);
  box-shadow: 1px 1px 3px black;
}

#news .card button a,
#newsdetail button a {
  color: var(--white);
}

#news .card button a:hover,
#newsdetail button a:hover,
#news .button-archive:hover {
  color: var(--black);
}

/** vorstand section starts here **/

#vorstand .card {
  transition: background-color 0.75s;
  -webkit-transition: background-color 0.75s;
}

#vorstand .card .card-img-top {
  width: 100%;
  height: auto;
  border-bottom: 5px solid var(--darkgreen);
}

#vorstand .card:hover {
  background-color: rgb(245, 245, 245);
}

#vorstand h3 {
  font-family: var(--navi-font);
  text-transform: uppercase;
}

#vorstand .smaller {
  /** fuer Hallenwart **/
  width: 56% !important;
}

/** join section stars here **/

#join .list-group-item {
  font-size: 1rem;
}

#join .list-group-item:hover,
#join .list-group-item a:hover {
  background-color: var(--green);
  color: var(--white);
}

/** majesty section starts here **/

#majesty a:link {
  font-weight: bold !important;
}

#majesty th {
  font-size: 1.2rem;
}

/** gallery section starts here **/

#gallery .card-body {
  height: auto;
}

#gallery ul {
  padding: 0;
}

#gallery .list-group li {
  list-style-type: none;
}

#gallery .list-group-item::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  content: "\f078  ";
}

#gallery .list-group-item {
  font-size: 2rem !important;
}

.listitem {
  padding: 1.4vmin;
  font-size: 1.2rem;
}

#gallery .list-group-item {
  font-size: 1.4rem;
  transition: background-color 0.5s;
  -webkit-transition: background-color 0.5s;
}

#gallery .list-group-item:hover {
  background-color: var(--green);
}

#gallery .list-group-item a:hover {
  color: var(--white);
}

#gallery .listitem {
  list-style-type: disc;
}

/** hall section stars here **/

#hall img {
  box-shadow: 2px 2px 13px rgba(0, 0, 0, 0.45);
}

#hall img:hover {
  border: 1px solid black !important;
  transition: all 0.5s;
  box-shadow: 2px 2px 13px rgba(104, 61, 6, 1);
}

/** calendar section starts here **/

#calendar .calendar {
  padding: 20px;
  background-color: var(--green);
  color: var(--white);
}

#calendar .calendartable th {
  text-align: center;
  font-weight: bolder;
  color: var(--white);
}

#calendar table td {
  text-align: center;
  height: 3rem;
}

#calendar .today {
  background-color: var(--white);
  color: #000;
}

#calendar .other-month {
  color: var(--grey);
  font-style: italic;
}

#calendar th {
  text-align: center;
  font-size: 1.1rem;
  background-color: var(--darkgreen);
  color: var(--white);
  font-weight: bold;
}

#calendar table tr,
#calendar table td,
#calendar table th {
  border: 0px solid white !important;
  font-weight: bold;
}

#calendar .icon {
  color: var(--white);
  transition: color 0.4s;
  -webkit-transition: color 0.4s;
}

#calendar .icon:hover {
  color: var(--darkgreen);
}

#calendar .booked {
  background-color: darkgreen;
  padding: 10px;
}

#calendar .booked-hall {
  background-color: rgb(117, 117, 117);
  padding: 10px;
}

#calendar .booked-dininghall {
  background-color: rgb(24, 168, 173);
  padding: 10px;
}

/** contact section starts here **/

#contact button {
  background: var(--green);
  color: var(--white);
  border-radius: 0 !important;
  border-bottom: 2px solid var(--darkgreen);
  box-shadow: 1px 1px 3px black;
  letter-spacing: 0.7px;
}

#contact button:hover {
  color: var(--black);
}

/** links section starts here **/

#links .list-group-item {
  font-size: 1rem !important;
}

#links .list-group-item:hover,
#links .list-group-item a:hover {
  background-color: var(--green);
  color: var(--white);
}

/** archive section (also newsarchive) starts here **/

#archive .list-group-item {
  font-size: 1.2rem !important;
}

#archive .list-group-item:hover,
#archive .list-group-item a:hover {
  background-color: var(--green);
  color: var(--white);
}

#archive img {
  box-shadow: 2px 2px 12px black;
}

#archive .pagination .page-link {
  color: var(--white);
  background-color: var(--darkgreen);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#archive .page-link:hover {
  color: black;
  text-decoration: underline;
  font-weight: bold;
}

/** events section starts here **/

#events span {
  display: block;
  text-align: center;
}

#events .date {
  background-color: var(--green);
  color: var(--white);
  padding: 1vmin;
  font-size: 1.3rem;
  font-weight: bolder;
}

#events .info {
  font-weight: bold;
  margin-left: 10px;
}

#events .info2 {
  font-weight: normal;
}