@charset "UTF-8";
/* mixin */
/* variables */
/* $kreT:rgba(242, 238, 233, .7); */
/* $kreT:rgba(255, 255, 255, .9);  */
/* Fonts */
/* wo ist meine css? */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1.2em;
  line-height: 1.6;
  background: white;
  overflow-x: hidden;
}

.page {
  background-image: url(../images/fondoglas1.png);
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  margin: 0;
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
}

/* go to the top */
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 400;
  font-size: 1em;
  border: none;
  outline: none;
  background-color: rgba(204, 204, 204, 0.7);
  color: white;
  cursor: pointer;
  padding: 0.5em 0.9em;
  border-radius: 50%;
  transition: all 300ms;
}

#myBtn:hover {
  background-color: rgba(204, 204, 204, 0.9);
  transform: scale(1.1);
}

/* .......h1...... */
h1 {
  font-family: "La Belle Aurore", cursive;
  font-size: 2.2rem;
  padding-top: 1em;
  margin: 0;
  margin-left: 10%;
  transition: all 300ms;
}
h1:hover {
  transform: scale(1.1);
}
h1 .j {
  color: #cf3d37;
}

/* .......menu......... */
label {
  position: static;
}
label .menu {
  position: absolute;
  z-index: 200;
  right: 1.2em;
  top: 1.5em;
  width: 50px;
  height: 50px;
  background: #f2eee9;
  border-radius: 50% 50% 50% 50%;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 0 0 #f2eee9, 0 0 0 0 #f2eee9;
  cursor: pointer;
}
label .hamburger {
  position: absolute;
  top: 24px;
  right: 10px;
  width: 30px;
  height: 2px;
  background: #000;
  display: block;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}
label .hamburger:after, label .hamburger:before {
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}
label .hamburger:before {
  top: -10px;
}
label .hamburger:after {
  bottom: -10px;
}

label input {
  display: none;
}

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #f2eee9, 0 0 0 100vh #f2eee9;
  border-radius: 0;
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

label input:checked + .menu .hamburger:after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  bottom: 0;
}

label input:checked + .menu .hamburger:before {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 0;
}

label input:checked + .menu + nav {
  opacity: 1;
  /* ++++++ */
  /* z-index: 300; */
  /*  visibility: visible; */
}

label nav {
  /* cambiar+++++ */
  z-index: 300;
  /* z-index: -1; */
  position: absolute;
  top: 40%;
  left: 50%;
  font-family: "Roboto Condensed", sans-serif;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  /* visibility: hidden; */
  -webkit-transition: 0.5s 0s ease-in-out;
  transition: 0.5s 0s ease-in-out;
}

label .menuRight {
  margin-left: 2em;
}

label .menuLeft,
label p {
  font-weight: bold;
}

label a {
  margin-bottom: 1em;
  display: block;
  color: #000;
  text-decoration: underline 0.15em rgba(0, 0, 0, 0);
  /* border-bottom: 3px solid variables.$schwT;  */
  transition: all 500ms;
}

label a:hover {
  text-decoration-color: black;
  /* border-bottom: 3px solid variables.$schw;  */
}

/* .....Slide..... */
.mySlides {
  display: none;
  width: 100%;
}

.slide {
  max-width: 100%;
  margin-top: 0;
}

/* Introduction */
.introS {
  background-color: #f2eee9;
  width: 90%;
  margin: 1.5em auto;
  padding: 1.5em;
}

.intro1,
h2 {
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
}

.intro2 {
  display: inline-block;
  text-align: justify;
}

/* instagram */
.instagS {
  width: 90%;
  margin: 1.5em auto;
}
.instagS h2 {
  margin-left: 1.5em;
}

.instagram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7em, 1fr));
  gap: 0.5em;
  transition: all 0.5s;
}
.instagram a:hover {
  opacity: 0.7;
}
.instagram span {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 0.2em 0.7em;
}
.instagram i {
  color: rgba(255, 255, 255, 0.7);
  font-size: 2em;
}

.insta {
  width: 99%;
  height: 10em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.5em;
}

.insta1 {
  background-image: url(../images/inst1.jpg);
}

.insta2 {
  background-image: url(../images/inst2.jpg);
}

.insta3 {
  background-image: url(../images/inst3.jpg);
}

.insta4 {
  background-image: url(../images/inst4.jpg);
}

.insta5 {
  background-image: url(../images/inst5.jpg);
  display: none;
}

.insta6 {
  background-image: url(../images/inst6.png);
  display: none;
}

.insta7 {
  background-image: url(../images/inst7.png);
  display: none;
}

.insta8 {
  background-image: url(../images/inst8.png);
  display: none;
}

.insta9 {
  background-image: url(../images/inst9.png);
  display: none;
}

.insta10 {
  background-image: url(../images/inst10.png);
  display: none;
}

.insta11 {
  background-image: url(../images/inst11.png);
  display: none;
}

.insta12 {
  background-image: url(../images/inst12.png);
  display: none;
}

.insta13 {
  background-image: url(../images/inst13.png);
  display: none;
}

.insta14 {
  background-image: url(../images/inst14.png);
  display: none;
}

.insta15 {
  background-image: url(../images/inst15.png);
  display: none;
}

.insta16 {
  background-image: url(../images/inst16.png);
  display: none;
}

/* footer */
.flex1 {
  width: 90%;
  margin: 1.5em auto;
  margin-bottom: 0;
}

.newsletter label {
  font-size: 0.8em;
  font-weight: bold;
  margin: 0 0 0.5em 0.8em;
}

.newsletter input {
  width: 100%;
  font-size: 0.8em;
  font-weight: bold;
  margin-bottom: 0.5em;
  border: none;
  background-color: #f2eee9;
  padding: 0.5em;
}

.newsletter button {
  font-size: 0.8em;
  border: none;
  color: white;
  background-color: black;
  padding: 0.5em;
  font-weight: bold;
  transition: all 300ms;
}
.newsletter button:hover {
  opacity: 0.5;
  cursor: pointer;
}

.newsletter form {
  width: 90%;
  margin: 0 auto;
}

.fotoUnten {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.info {
  margin-left: 3em;
  background-color: #f2eee9;
  width: 70%;
  padding: 20px;
  text-align: center;
  box-shadow: 10px 10px 10px #bbbaba;
  transform: rotate(-15deg);
  font-weight: bold;
}

.info:hover {
  transform: scale(1.3);
}

.fotoUnten img {
  width: 40%;
  margin: 1em 3em 0;
}

.black {
  background-color: black;
  padding-top: 1em;
  padding-bottom: 1em;
}

.blackInn {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}
.blackInn .impressum {
  font-weight: bold;
}
.blackInn .copyright {
  font-size: 0.7em;
}

.icons a i {
  margin-right: 0.5em;
}

.icons a i:hover,
.impressum:hover {
  transform: scale(1.3);
}

/* breadcrumbs */
.breadcrumb {
  width: 90%;
  margin: 1.5em auto;
  font-family: "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 0;
}

ul.breadcrumb {
  padding: 0.5em 1em 0.5em 0;
  list-style: none;
  /* background-color: variables.$kre; */
}

ul.breadcrumb li {
  display: inline;
  color: #bbbbbb;
  font-weight: bold;
}

ul.breadcrumb li + li:before {
  padding: 0.5em;
  color: black;
  content: "/ ";
}

ul.breadcrumb li a {
  color: black;
  text-decoration: none;
  /*    text-decoration: underline 0.15em variables.$schwT; */
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  transition: all 300ms;
}

ul.breadcrumb li a:hover {
  color: #bbbbbb;
  /* text-decoration-color: variables.$schw; */
  border-bottom: 3px solid black;
}

/* h2 */
.h2Kunst {
  width: 90%;
  margin: 0 auto;
  margin-bottom: 1.5em;
  font-size: 1.5em;
}

/* slide */
.slideK {
  max-width: 90%;
}

/* Galerie */
/* .row {
    display: flex;
    flex-wrap: wrap;
    padding: 40px;

} */
.row {
  width: 90%;
  margin: 1.5em auto;
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 100%;
  max-width: 100%;
  padding: 0 0.3em;
}

.image {
  margin-top: 0.6em;
  vertical-align: middle;
  width: 100%;
  display: block;
}

/* .container {
    position: relative;

} */
/* 
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: variables.$kreT;
} */
/* .container:hover .overlay {
    opacity: 1;
} */
.text {
  color: #1d1d1d;
  font-size: 0.9em;
  font-weight: 300;
  position: absolute;
  top: 40%;
  left: 2%;
  text-align: center;
}

.imageU {
  margin-top: 0.6em;
  vertical-align: middle;
  width: 100%;
  display: block;
  cursor: zoom-in;
}

.m-modal {
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  font-weight: bold;
}

.noline::before {
  display: none;
}

.rowCard {
  width: 90%;
  margin: 1.5em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  flex: 100%;
  max-width: 100%;
  padding: 0 0.3em;
  margin-bottom: 1.5em;
}

.headCard {
  width: 100%;
  height: 12em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.headCard:hover {
  opacity: 0.7;
  cursor: pointer;
}

.imgCard1 {
  background-image: url(../images/card/IMG_2550.JPG);
}

.imgCard2 {
  background-image: url(../images/card/IMG_2552.JPG);
}

.imgCard3 {
  background-image: url(../images/card/P1080296.JPG);
}

.imgCard4 {
  background-image: url(../images/card/IMG_4215.JPG);
}

.imgCard5 {
  background-image: url(../images/card/IMG_2297.JPG);
}

.imgCard6 {
  background-image: url(../images/card/P1070620.JPG);
}

.imgCard7 {
  background-image: url(../images/card/IMG_3766.JPG);
}

.bodyCard {
  background-color: #f2eee9;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 15em;
}

.datum {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: bold;
  color: #aaaaaa;
}

.event {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: bold;
  color: black;
  margin-bottom: 1.8em;
  text-decoration: underline 0.15em rgba(0, 0, 0, 0);
  transition: all 300ms;
}

.mehr {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: bold;
  color: black;
  text-decoration: underline 0.15em rgba(0, 0, 0, 0);
  transition: all 300ms;
}

.event:hover,
.mehr:hover {
  text-decoration: underline 0.15em black;
}

/* pastCard scss */
.card1 {
  width: 90%;
  margin: 1.5em auto;
  max-width: 100%;
}

.headCard1 {
  width: 100%;
  height: 12em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.event1 {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  text-transform: uppercase;
  font-weight: bold;
  color: black;
  margin-bottom: 1.8em;
}

.bodyCard1 {
  background-color: #f2eee9;
  padding: 1.5em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.textCard {
  text-align: justify;
}

.imgCard11 {
  background-image: url(../images/card/IMG_3662.JPG);
}

.page1 {
  scroll-behavior: smooth;
  background-color: white;
}

.sectionKont {
  width: 90%;
  margin: 1.5em auto;
}

.daten {
  padding: 1em 1em 1em 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tit1 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  margin-bottom: 1em;
}

.tit2 {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 1em;
}

.tit3 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  margin-top: 1em;
}

.bla {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
}

iframe {
  width: 100%;
  height: 100vw;
  border: 0;
}

hr {
  width: 90%;
  margin: 0 auto;
}

/*  .page1 {

    scroll-behavior: smooth;
    background-color: variables.$wei;

} */
.sectionAkt {
  width: 90%;
  margin: 1.5em auto;
}

.sectionAkt0 {
  width: 90%;
  margin: 1.5em auto 0;
  display: flex;
  flex-direction: column-reverse;
}

.ohneMarginUnten {
  margin-bottom: 0;
}

.ohneMarginOben {
  margin-top: 0;
}

.mOben {
  margin-top: 10em;
}

.datenAkt {
  padding: 1.5em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #f2eee9;
}

.titAkt {
  font-family: "Roboto Condensed", sans-serif;
  color: #aaaaaa;
  font-weight: bold;
  font-size: 0.8em;
  margin-bottom: 1em;
}

.blaAkt {
  font-family: "Roboto", sans-serif;
  font-size: 1em;
  text-align: justify;
  margin-top: 1em;
}

.imgAkt {
  object-fit: cover;
  width: 100%;
  border: 0;
}

@media screen and (min-width: 440px) {
  .insta5,
.insta6 {
    display: flex;
  }

  .info {
    width: 70%;
  }
}
@media screen and (min-width: 576px) {
  h1 {
    /*  transform: translateX(-50%); */
    font-size: 3rem;
    transition: all 0.5s;
  }

  label .menu {
    right: 4em;
    top: 2.7em;
  }

  /* _kunst, past */
  .column,
.card {
    flex: 50%;
    max-width: 50%;
  }

  /* kontakt */
  .daten {
    flex-direction: row;
    align-items: center;
  }

  iframe {
    height: 19em;
  }

  /* aktuelles */
}
@media screen and (min-width: 590px) {
  .insta7,
.insta8 {
    display: flex;
  }
}
@media screen and (min-width: 740px) {
  .insta9,
.insta10 {
    display: flex;
  }
}
@media screen and (min-width: 768px) {
  label nav {
    top: 40%;
  }

  .flexMenu {
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
  }
  .flexMenu .menuLeft,
.flexMenu .menuRight {
    margin-left: 1em;
    margin-right: 1em;
  }
  .flexMenu .marB {
    margin-top: 1em;
  }

  .hr {
    background-color: #ddd;
    width: 0.2em;
    height: 12em;
  }

  .flex1 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .newsletter {
    width: 120%;
  }

  .info {
    width: 90%;
    margin-left: 4em;
  }

  .fotoUnten {
    justify-content: center;
  }
  .fotoUnten img {
    width: 30%;
  }

  /* unikate */
  .modal-content {
    width: 90%;
  }

  .card {
    flex: 33%;
    max-width: 33%;
  }

  /* past, pastCard */
  .card1 {
    display: flex;
  }

  .headCard1 {
    width: 50%;
    height: inherit;
  }

  .bodyCard1 {
    width: 50%;
  }

  /* kontakt */
  .sectionKont {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .daten {
    width: 40%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  iframe {
    width: 60%;
  }

  /* aktuelles */
  .sectionAkt {
    display: flex;
  }

  .sectionAkt0 {
    flex-direction: row;
  }

  .imgAkt,
.datenAkt {
    width: 50%;
  }
}
@media screen and (min-width: 890px) {
  .insta11,
.insta12 {
    display: flex;
  }
}
@media screen and (min-width: 992px) {
  label .menu {
    right: 7em;
  }
}
@media screen and (min-width: 1040px) {
  .insta13,
.insta14 {
    display: flex;
  }

  .newsletter {
    width: 50vw;
  }

  .info {
    margin-left: 5em;
  }

  /* pastcard */
  .card1 {
    width: 52em;
  }

  /* kontakt */
  .sectionKont {
    width: 52em;
    margin: 1.5em auto;
  }

  /* aktuelles */
  .sectionAkt,
.sectionAkt0 {
    width: 52em;
  }
}
@media screen and (min-width: 1190px) {
  .insta15,
.insta16 {
    display: flex;
  }

  .info {
    margin-left: 7em;
  }

  /* _kunst */
  .column,
.card {
    flex: 25%;
    max-width: 25%;
  }

  /* past */
  .card {
    flex: 100%;
    max-width: 17em;
    padding: 0 0.3em;
    margin-bottom: 1.5em;
  }
}
@media screen and (min-width: 1340px) {
  .instagram {
    width: 90%;
    margin: 0 auto;
  }

  .info {
    margin-left: 9em;
  }

  /* pastcard */
}
@media screen and (min-width: 1400px) {
  label .menu {
    right: 9em;
  }

  .info {
    margin-left: 11em;
  }
}
@media screen and (min-width: 1400px) and (min-width: 1489px) {
  .slide {
    width: 90%;
    margin: 0 auto;
  }

  .instagram {
    width: 80%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1671px) {
  .instagram {
    width: 70%;
    margin: 0 auto;
  }
}

/*# sourceMappingURL=main.css.map */