/* Flippable Card Classes */
.flip {
  perspective: 800px;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  -ms-perspective: 800px;
  position: relative;
}
.flip .card-info.flipped {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
.flip .card-info {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
}
.flip .card-info .face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  z-index: 2;
}
.flip .card-front {
  position: absolute;
  z-index: 1;
  cursor: pointer;
}
.flip .card-back {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  background-color: white;
  cursor: pointer;
}

/* Testimonial box */
.testimonial {
  border-radius: 4px;
  padding: 10px 20px;
  margin: 0 0 50px;
  font-size: 17px;
  position: relative;
  background: #e4e9e9;
  color: #000;
  z-index: 1;
  height: 200px;
  overflow: hidden;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
.testimonial i {
  position: absolute;
  z-index: 99999;
  color: #a94442;
  left: 20px;
  top: 35px;
  font-size: 25px;
}
.testimonial p {
  font-size: 16px;
  padding-top: 45px;
  padding-left: 40px;
  /* padding-right: 20px; */
  padding-bottom: 30px;
  text-align: left;
  color: #3a3a3a;
  font-family: "Open Sans", sans-serif;
  font-style: italic;
}

/* Panel box */
.panel {
  color: black;
  border: 1px solid #e8e8e8;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 2% 4%;
  margin: 0 -4% 40px -4%;
}
.panel-white {
  color: black;
  background: #fff;
  background: linear-gradient(170deg, #f7f7f8 0%, #fff 50%);
  border: 1px solid #e8e8e8;
  box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  padding: 2% 4%;
  margin: 0 -4% 40px -4%;
}
.panel-info {
  padding: 2em;
  margin: 1em 0em;
  background-color: #f5f5f5;
}
.panel-info-icon {
  font-size: 36px;
  color: #0d7773;
}
.panel-info h1 {
  font-style: italic;
  font-size: 20px;
  color: #5a5e5e;
}

.stf-bullet {
  font-size: 16px;
  list-style-image: none;
  list-style: square;
  margin: 0 0 1.2em 2.5em;
  padding: 0;
}
.stf-bullet li {
  padding: 3px 3px;
}
.stf-bullet span {
  color: #0d7773;
}

/* bullet list mit Glyph icons */
.ctn-bullet li {
  display: block;
}
.ctn-bullet li:before {
  content: "\f054";
  font-family: "FontAwesome";
  font-size: 14px;
  float: left;
  margin-left: -17px;
}

.hd-lead {
  padding-bottom: 15px;
  border-bottom: 1px solid #dfdfdf;
}
.hd-lead-2 {
  font-size: 30px;
  padding-left: 15px;
  border-left: 4px solid #f9c74d;
}
.spacer-tiny {
  height: 25px;
}
.spacer-large {
  height: 50px;
}
.spacer-huge {
  height: 75px;
}

.padding-off {
  padding: 0;
  margin: 0;
}

.img-dimm {
  filter: contrast(70%);
}

.quote-lg {
  font-style: italic;
  font-size: 20px;
}
.quote-md {
  font-style: italic;
  font-size: 17px;
  color: #5a5e5e;
}
.quote-sm {
  font-style: italic;
  font-size: 15px;
}
.overlay-darken {
  background-color: rgba(41, 39, 34, 0.55);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.parallax {
  background-attachment: fixed;
}

.margin-top-15 {
  margin-top: 15px;
}
.margin-bottom-40 {
  margin-bottom: 40px;
}