@font-face {
  font-family: Orator;
  src: url("fonts/OratorStd.otf") format("opentype");
}

/* GLOBAL STYLES
-------------------------------------------------- */

/* Padding below the footer and lighter body text */

body {
  padding-top: 110px;
  color: #5a5a5a;
  font-family: "Cantarell", sans-serif;
  background-color: #faedf2;
}

main.whiteBackground {
  background-color: white;
}

h1,
h2,
h3,
h4,
.navbar {
  font-family: Orator, Arial, sans-serif;
}

a {
  text-decoration: none !important;
  color: #5a5a5a !important;
}

.navbar {
  padding: 0 !important;
  background-color: #32363F !important;
  height: 110px;
}

@media (max-width: 766px) {
  .navbar {
    flex-direction: row !important;
    padding: 10px !important;
  }
  .navbar-expand-md .navbar-nav .icon .nav-link {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .indexNav .navHeader {
    margin-right: 50%;
    transform: translateX(82px);
  }
}

.navbar-expand-md .navbar-nav .icon .nav-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

@media (min-width: 992px) {
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

#navbarCollapse {
  width: 100%;
  background-color: #bec1c3;
}

.navHeader {
  padding: 10px;
}

.navbar a {
  font-size: 12px;
  color: #1e2b49 !important;
}

.navbar a.icon {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}

.imprint {
  padding-top: 20px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.carousel .logo {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9;
  text-align: center;
  margin: 20px 0;
}

/* Carousel base class */

.carousel {
  position: relative;
  margin-bottom: 5px;
}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */

.carousel-item {
  height: 32rem;
  background-color: #777;
}

.carousel-item>img {
  position: absolute;
  top: 0;
  left: 0;
  height: 32rem;
}

.carousel{
  width:100vw;
}
.carousel-item img{
  object-fit:cover;
  width:100vw;
}

img.flipX {
  transform: scaleX(-1);
}

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}

.category h2 {
  margin: 0;
}

.firstDoubleRow {
  position: relative;
  height: 33vh;
  margin-bottom: 5px;
  min-height: 200px;
}

.secondRow {
  height: 320px;
  margin-bottom: 5px;
}

.thirdRow {
  color: white;
  height: 380px;
  margin-bottom: 5px;
}

.firstDoubleRow div,
.secondRow div {
  background-size: cover;
}

.linkAnimation {
  transition: transform .5s;
  /* Animation */
}

.linkAnimation:hover {
  transform: scale(1.05);
}

.wildText a {
  color: white !important;
}

@media (max-width: 1000px) {
  .firstDoubleRow {
    height: 20vh;
    min-height: 440px;
  }
}

.weddingText {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
}

.weddingHero {
  background-image: url("img/HL_Kategoriebild_Startseite_final.jpg");
  position: relative;
  background-position: center;
}

.wildHero {
  color: white;
  position: relative;
  background-image: url("img/WL_Kategoriebild_Startseite_final.jpg");
  background-position: center;
}

.wildText {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
}

.favsHero {
  position: relative;
  background-image: url("img/LL_Kategoriebild_Startseite.jpg");
}

.favsText {
  width: 100%;
  text-align: center;
  padding: 20px;
}

.flexWrap {
  height: 100%;
}

.burningHero {
  background-size: cover;
  background-position-y: center;
  position: relative;
  background-image: url("img/burning_ring_Startseite.jpg");
  padding: 20px;
  background-color: white;
}

.burningHero a {
  color: white !important;
}

.burningText1 {
  position: absolute;
  right: 0;
  top: 0;
  max-width: 40%;
  padding: 20px;
}

.burningText2 {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 40%;
  padding: 20px;
}

.burningText a {
  color: white;
}

.burningText h2 img.mobile {
  display: none;
}

@media (max-width: 767px) {
  .burningText a {
    color: #32363F !important;
  }

}

.burningText p,
.burningText p {
  font-size: 12px;
}

.diamondWrap {
  position: absolute;
  z-index: 999;
  left: 50%;
  transform: translate(-20px, -20px);
}

.diamondWrap.signet {
  transform: translate(-20px, -15px);
}

.diamond {
  background-image: url(img/schmetterling-goldloeckchen.svg);
  height: 40px;
  width: 40px;
}

.footer {
  text-align: left;
  height: 200px;
  background-color: #faedf2;
  padding: 20px;
}

.footer h2 {
  color: #32363F;
  font-size: 14px;
  font-weight: bold;
}

.footer a {
  color: #32363F;
  font-size: 12px;
  font-weight: bold;
}

.footer p {
  margin-bottom: 0px;
}

@media (max-width: 767px) {
  h2 {
    font-size: 26px;
  }
  .carousel-item {
    height: 12rem;
  }
  .carousel-item>img {
    height: 12rem;
  }
  .carousel .logo img {
    height: 50px;
  }
  .diamond {}
  .firstDoubleRow {
    height: 310px;
    font-size: 12px;
  }
  .secondRow {
    height: 160px;
    font-size: 12px;
  }
  .thirdRow {
    height: unset;
  }
  .burningHero {
    padding-top: calc(100vw * 0.396 + 20px);
    background-position-y: top;
    background-size: 100vw;
    background-repeat: no-repeat;
    color: #32363F;
  }
  .burningText h2 img {
    display: none;
  }
  .burningText h2 img.mobile {
    display: inline;
  }
  .burningText a {
    color: #32363F;
  }
  .footer {
    height: unset;
  }
  .footer h2 {
    margin-top: 20px;
  }
}

/* ========================================= */

/* Hochzeitsglöckchen */

/* ========================================= */

.hlTitle {
  /* background-image: url(img/Hochzeitsgloeckchen-titel.jpg); */
}

.subSiteHero.hlTitle {
  background-size: 30vw;
}

.subSiteHero h3 {
  font-size: 22px;
}

.subSiteHero {
  background-color: white;
  background-position: center;
  background-repeat: no-repeat;
  padding: 30px 0;
  font-size: 12px;
  min-height: 50vh;
  overflow: hidden;
}

.headingDivider {
  width: 100%;
  text-align: center;
  background-color: #faedf2;
  padding: 30px 0;
}

@media (min-width: 768px) {
  .burningText h2 {
    margin-top: 20px;
  }
}

.lineWrapper {
  position: absolute;
}

.diagonalLine {
  position: absolute;
}

.leftText .lineWrapper {
  top: 26px;
  height: 50px;
  width: 80%;
  margin-left: 20%;
}

.leftText .lineWrapper img {
  position: absolute;
  height: 120px;
  left: 97%;
  top: -130px;
}

.leftText .horizontalLine {
  border-top: 1px solid black;
  width: 100%;
}

.leftText .diagonalLine {
  margin-left: 100%;
  margin-top: -50px;
  height: 50px;
  width: 50px;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #aaa, rgba(0, 0, 0, 0) calc(50% + 1px));
}

.rightText .lineWrapper {
  top: 26px;
  height: 50px;
  width: 50%;
}

.rightText .lineWrapper img {
  display: block;
  position: absolute;
  height: 140px;
  left: -262px;
  top: 80px;
}

.rightText .horizontalLine {
  border-top: 1px solid black;
}

.rightText .diagonalLine {
  margin-left: -70px;
  height: 80px;
  width: 70px;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) calc(50% - 1px), #aaa, rgba(0, 0, 0, 0) calc(50% + 1px));
}

/* Alternative image for small screens */

.smImg {
  text-align: center;
  margin-top: 30px;
}

.smImg img {
  width: 60%;
  max-width: 200px;
}

@media (min-width: 768px) {
  .smImg {
    display: none;
  }

  .hlTitle .leftText {
    margin-top: 200px;
  }

}

@media (max-width: 767px) {
  .lineWrapper {
    display: none;
  }
}

/* ========================================= */

/* Wildlöckchen */

/* ========================================= */

.wlTitle {
  /* background-image: url(img/granit_hintergrund.jpg); */
  background-color: white;
  background-size: cover;
  color: black;
}

.wlTitle img {
  width: 100%;
  margin-bottom: 30px;
  max-width: 640px;
}

.wlTitle .text {
  position: relative;
  z-index: 9;
  text-align: justify;
  max-width: 640px;
}
.wlTitle .bgImage {
  position: absolute;
}
.wlTitle img.line {
  position: absolute;
}
.charivari {
  /* background-image: url(img/titelbild_WL_charivari_final.jpg);
background-repeat: no-repeat;
background-size: 370px;
background-position-y: 20px; */
}
.charivari .contentWrap {
  position: relative;
}
.charivari .text {
  position: relative;
  z-index: 9;
}
.charivari .bgImage {
  z-index: 1;
  width: 400px;
  top: 110%;
}
.charivari img.line {
  transform: rotate(180deg);
  top: 100%;
  left: 210px;
}
.herHim {
  /* background-image: url(img/titelbild_WL_schmuck_final.jpg);
background-repeat: no-repeat; */
}
.herHim .text {
  max-width: 300px;
}
.herHim .text.him {
  margin-top: 360px;
  margin-left: 90px;
}
.herHim .bgImage {
  z-index: 1;
  width: 400px;
  top: -10px;
  left: -10px;
}
.herHim .her img.line {
  transform: rotate(180deg) scaleX(-1);
  top: 100%;
  left: 30px;
}
.herHim .him img.line {
  transform: scaleX(-1);
  top: -120px;
  left: 160px;
}
.collection {
  /* background-image: url(img/titelbild_WL_sammlung_final.jpg);
background-repeat: no-repeat;
background-size: 370px;
background-position-y: 20px; */
  padding-top: 470px;
}
.collection img.line {
  top: -150px;
  left: 20px;
}
.collection .bgImage {
  z-index: 1;
  width: 400px;
  top: -10px;
}

@media (max-width: 991px) {
  .wlTitle {
    text-align: center;
  }

  .wlTitle .line {
    display: none;
  }

  .wlTitle .bgImage {
    max-height: 50vh;
    margin-bottom: 20px;
  }

  .wlTitle img {
    margin-bottom: 30px;
  }

  .wlTitle .text {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================= */

/* Lieblingslöckchen */

/* ========================================= */

.llTitle {
  text-align: center;
  padding-top: 0;
}

.llTitle .text {
  padding: 0 20px;
  text-align: justify;
}

.llTitle img {
  width: 100%;
  margin-bottom: 30px;
}

.llTitle h3 {
  text-align: center;
}

@media (min-width: 768px) {
  .llTitle .text {
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
  }
}

/* ========================================= */

/* Manufaktur */

/* ========================================= */

.manufakturHeader img,
.manufakturDetails img {
  width: 100%;
}

.manufakturDetails h2 {
  font-size: 24px;
}

.manufakturSignet .signet {
  text-align: center;
}

.manufakturSignet {
  border-top: 10px solid #faedf2;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 767px) {
  .manufakturSignet .signet {
    margin-bottom: 60px;
  }
  .manufakturDetails .reversed {
    flex-direction: column-reverse !important;
  }
}

/* ========================================= */

/* Menu */

/* ========================================= */

.menuMarkerWrap a {
  color: white !important;
}

.menuMarkerWrap {
  position: relative;
}

.menuMarker {
  display: block;
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-20px);
}

@media (max-width: 1050px) {
  .menuMarker {
    display: none;
  }
}

/* Kontakt */

.contact {
  background-color: white;
}

.contact p {
  font-size: 12px;
}

.contact a {
  text-decoration: underline !important;
}

#contactform {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 60px;
}

.contact input, .contact textarea {
  border-color: #faedf2;
  border-radius: 0;
}

.contact label {
  font-family: Orator, Arial, sans-serif;
}

.contact button {
  font-family: Orator, Arial, sans-serif;
  background-color: #faedf2;
  border-radius: 0;
  padding: 10px 20px;
}

.contact .alert {
  display: none;
}