:root {

    --color-1: #003b5c;
    --drhendgen-gold: #89734c;

}

@font-face {
    font-family: Chaparral;
    src: url("/fonts/chaparall/Chaparral_Pro_Italic.ttf");
}

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

body,h1,h2,h3,h4,h5,h6,a,.h0, .h1,.h2,.ambroise{
    font-family: Ambroise;
}

.carousel-control-prev-icon{
  width: 9rem;
}

/* if the screen is wider than 500px set the font size to 80px */
@media screen and (min-width: 500px) {
  .h0 {
    font-size: 70px;
    line-height: 80px;
  }
}
/*if the screen size is less than 499px set the font size to 80px */
@media screen and (max-width: 499px) {
  .h0 {
    font-size: 35px;
    line-height: 40px;
  }
}

.h0{
  text-align: right;
  vertical-align: top;
}
.h2{
  font-size: 40px;
  line-height: 30px;
  text-align: left;
  vertical-align: top;
}

.background-dr-hendgen-gold{
  background: var(--drhendgen-gold);
}

p,div {
    font-family: Chaparral;
    text-align: justify;
    /* font-style: italic; */
}

body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
  hyphens: auto;
}

.nav-burger{
  background: white;
  color: var(--drhendgen-gold);
}


.test{
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
}

.jf-background-company-color{
  background: var(--color-1);
}


.company-logo {
    max-width: 450px;
    width: 100%;
    border: 2px solid var(--drhendgen-gold);
    background: white;
    opacity: 0.85;
    padding: 35px;
}


.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

.jf-background-white{
  background: white;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}

.rotation-wrapper-outer {
  display: table;
  background: red;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
  background: orange;
}

.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(90deg) translate(0, -100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  /* */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

.green-border{
  border: 4px solid green;
  border-radius: 3px;
}

.red-border{
  border: 4px solid red;
  border-radius: 3px;
}

.jf-image-container{
    width: calc(100% - 3vw);
    height: calc(100% - 6vw);
    margin-top:      6vw;
    margin-bottom:   3vw;
    margin-left:     auto;
    margin-right:    auto;
    background-size:    cover;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
    position: relative;
}

.jf-background-image-1{
  /* background-image: url("/images/frontend/Jonas_Terrasse.jpg"); */
  /* background-image: url("/images/frontend/Jonas_Isis_1.png");*/
  background-image: url("/images/frontend/Jonas_Keller_Mail.png");
}

.jf-background-image-2{
  background-image: url("/images/frontend/Freimuth_28_Luftbild_sw_klein.jpg");
}

.jf-text-content{
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: rgba(255,255,255,0.6);
}

.xx::after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0.7);
}