:root {
  --primary-color: #e30613;
  --secondary-color: #2d4556;
  --tertiary-color: #a3b5c2;
  --quaternary-color: #dbd5d5;
  --span-color: #a3be46;
}
/* Fonts */
body {
  font-size: calc(15px + 0.5vw);
  line-height: calc(22px + 0.7vw);
}
@font-face {
  font-family: "Rubik Regular";
  src: url("/assets/fonts/rubik/Rubik-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik SemiBold";
  src: url("/assets/fonts/rubik/Rubik-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Rubik Bold";
  src: url("/assets/fonts/rubik/Rubik-Bold.ttf") format("truetype");
}
h1,
h2 {
  font-family: Rubik SemiBold;
  font-size: 2.1rem;
  line-height: 2.5rem;
  color: var(--secondary-color);
}
h3 {
  font-family: Rubik SemiBold;
  font-size: 1.4rem;
  line-height: 1.8rem;
  color: var(--secondary-color);
}
p,
li {
  font-family: Rubik Regular;
  font-size: 1.2rem;
  line-height: 1.4em;
  color: var(--secondary-color);
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
p.cs-headline-article {
  font-family: Rubik SemiBold !important;
}
li::marker {
  color: var(--span-color);
}
li.on-green::marker {
  color: var(--secondary-color);
}
a {
  font-family: Rubik Regular;
  font-size: 1.2rem;
  line-height: 1.4em;
  color: var(--primary-color);
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
#btn1 p,
#btn2 p,
#btn3 p {
  font-family: Rubik Regular;
  font-size: 1.2rem;
}
.cs-text-center {
  text-align: center !important;
}
p.cs-h-subline {
  font-family: Rubik SemiBold;
  color: var(--tertiary-color);
  padding-bottom: 10px;
}
.cs_text-color-white > p {
  color: #fff !important;
}
.cs-beitrag-aktuell h1.entry-title {
  font-size: 2.6rem;
}
.cs-beitrag-aktuell h2 {
  font-size: 1.6rem;
  line-height: 1.9rem;
}
/* End Fonts */
/* Flyout Buttons */
#btn1 img {
  width: 25% !important;
  padding-left: 25px;
  padding-right: 0px;
  margin-left: -25px;
}
#btn2 img {
  width: 17% !important;
  padding-left: 4px;
  padding-right: 0px;
  margin-left: -4px;
}
#btn3 img {
  width: 24% !important;
  padding-left: 10px;
  padding-right: 16px;
  margin-left: -12px;
}
#btn1 {
  top: 40%;
  background-color: var(--primary-color);
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#btn2 {
  top: calc(40% + 60px);
  padding-left: 4px;
  background-color: var(--primary-color);
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#btn3 {
  top: calc(40% + 120px);
  padding-left: 4px;
  background-color: var(--primary-color);
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
div.button {
  z-index: 99;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* background-color: #4E5055; */
  color: #fff;
  width: 360px;
  height: 60px;
  position: fixed;
  right: -300px;
  transition: 0.7s ease;
}
div.button p {
  font-family: Rubik Regular;
  font-size: 16px;
  color: #fff;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0;
}
div.button:hover {
  background-color: #4e5055;
  color: #fff;
  position: fixed;
  right: -10px;
  width: 360px;
  height: 60px;
  border-radius: 0px;
}
div.button:active {
  background-color: #2c3e50;
  transition: 0s;
  color: #fff;
}
@media screen and (max-width: 767px) {
  div.button {
    width: 300px;
    height: 50px;
    right: -260px;
  }
  div.button:hover {
    right: -50px;
    width: 300px;
    height: 50px;
    border-radius: 0px;
  }
  #btn1 {
    border-bottom: 0;
  }
  #btn2 {
    top: calc(40% + 55px);
    padding-left: 4px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
    border-bottom: 0;
  }
  #btn3 {
    top: calc(40% + 110px);
    padding-left: 4px;
  }
  #btn1 img {
    width: 25% !important;
    padding-left: 15px;
    padding-right: 16px;
    margin-left: -16px;
  }
  #btn2 img {
    width: 23% !important;
    padding-left: 14px;
    padding-right: 16px;
    margin-left: -16px;
  }
  #btn3 img {
    width: 21% !important;
    padding-left: 10px;
    padding-right: 16px;
    margin-left: -13px;
  }
}
/* End Flyout Buttons */
/* Footer */
.footer-wrapper {
  background-color: var(--tertiary-color);
}
.cs-footer-impressum {
  background: var(--secondary-color);
}
.cs-footer-impressum p {
  font-family: Rubik SemiBold;
  font-size: 0.9rem;
  color: #fff !important;
  text-align: center;
}
.cs-footer-impressum a {
  font-family: Rubik SemiBold;
  font-size: 0.9rem;
  color: #fff !important;
  text-decoration: none;
}
/* End Footer */
/* Header */
.cs-top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* End Header */
/* Menu */
#menu-main {
  font-family: Rubik SemiBold;
}
.et-menu li {
  font-size: 1.1rem !important;
}
.et-menu > li > a {
  color: var(--secondary-color);
}
.cs_main-menu #menu-main > li.current-menu-item > a,
.cs_main-menu #menu-main > li.current-menu-parent > a {
  border-bottom: 2px solid var(--primary-color) !important;
  color: var(--primary-color);
}
/*==== add some spacing around menu items ====*/
.et_pb_menu ul > li > a {
  /* padding: 12px 0 22px 0!important; */
}

/*==== elimitate opacitcy change on hover ====*/
.et_pb_menu ul > li > a:hover {
  opacity: 1 !important;
}
/*==== Start Underline From Center ====*/

.cs-underline-from-center nav ul li a {
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.cs-underline-from-center nav ul li a::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: var(--primary-color);
  height: 2px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
}
.cs-underline-from-center nav ul li a:hover::before {
  left: 0;
  right: 0;
}
/*==== End Underline From Center ====*/
/* End Menu */
/* Kreiszähler */
.cs_kreiszaehler-1 div.percent {
  background: #418e9f;
  border-radius: 50%;
  border: 20px solid #ccdcdf;
}
.cs_kreiszaehler-2 div.percent {
  background: #a3be46;
  border-radius: 50%;
  border: 20px solid #e3e8cc;
}
.cs_kreiszaehler-3 div.percent {
  background: #d8872e;
  border-radius: 50%;
  border: 20px solid #ecdbc6;
}
.cs_kreiszaehler-4 div.percent {
  background: #285395;
  border-radius: 50%;
  border: 20px solid #c5cedb;
}
.cs_kreiszaehler-1 div.percent p,
.cs_kreiszaehler-2 div.percent p,
.cs_kreiszaehler-3 div.percent p,
.cs_kreiszaehler-4 div.percent p {
  font-family: Rubik SemiBold;
  font-size: 3rem;
  color: #fff;
}
.cs_kreiszaehler-1 h3.et_pb_module_header,
.cs_kreiszaehler-2 h3.et_pb_module_header,
.cs_kreiszaehler-3 h3.et_pb_module_header,
.cs_kreiszaehler-4 h3.et_pb_module_header {
  font-family: Rubik SemiBold;
  font-size: 1.2rem;
  color: var(--secondary-color);
}
/* End Kreiszähler */
/* To Top Button */
/* === Default button appearance === */
.et_pb_scroll_top.et-pb-icon {
  right: 30px; /* space from right */
  bottom: 30px; /* space from bottom */
  padding: 8px; /*padding size*/
  border-radius: 30px; /* make the circle */
  background: var(--span-color) /* button color */;
  font-size: 32px; /* icon size */
  transition: all 0.1s ease-in-out; /* add transition */
}
/* === Button Appearance on Mouseover === */
.et_pb_scroll_top.et-pb-icon:hover {
  bottom: 32px /* space from bottom */;
  background: #d8872e /*button hover color*/;
  transition: all 0.1s ease-in-out; /*add transition*/
  box-shadow: 0 10px 15px #162c4e4a; /*box shadow on hover*/
}
/* === Animation tweaks === */
.et_pb_scroll_top.et-visible {
  -webkit-animation: fadeInBottom 1s 1 cubic-bezier(0.5, 0, 0.16, 1);
  -moz-animation: fadeInBottom 2s 1 cubic-bezier(0.5, 0, 0.16, 1);
  -o-animation: fadeInBottom 1s 1 cubic-bezier(0.5, 0, 0.16, 1);
  animation: fadeInBottom 1s 1 cubic-bezier(0.5, 0, 0.16, 1);
}
.et_pb_scroll_top.et-hidden {
  opacity: 0;
  -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
/* End To Top Button */
/* Buttons */
.cs-btn-jump {
  background: var(--span-color);
  font-family: Rubik SemiBold;
  color: #fff;
  width: 100%;
  text-align: center;
  border: none !important;
  padding: 0.4rem 0;
}
.cs-btn-jump:hover {
  background: #d8872e !important;
  border: none !important;
  width: 100%;
  padding: 0.4rem 0 !important;
}
.cs-btn-jump:after {
  display: none !important;
  -webkit-transform: unset;
  transform: unset;
  left: 0;
}
.cs-btn-red {
  background: var(--primary-color);
  font-family: Rubik SemiBold;
  color: #fff;
  text-align: center;
  border: none !important;
  padding: 0.4rem 1rem;
}
.cs-btn-red:hover {
  background: var(--secondary-color) !important;
  border: none !important;
  padding: 0.4rem 1rem !important;
}
.cs-btn-red:after {
  display: none !important;
  -webkit-transform: unset;
  transform: unset;
  left: 0;
}
/* End Buttons */
/* Termine */
.cs_termine-monat p {
  font-family: Rubik SemiBold;
  font-size: 1.2rem;
  background: var(--tertiary-color);
  color: #fff;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.cs-termin-headline {
  font-family: Rubik SemiBold;
}
/* End Termine */
/* Blog Aktuelles */
.cs_blog-aktuell .et_pb_post {
  background: #f7f7f5;
  border: 0px;
  border-radius: 30px;
  padding-left: 30px;
  padding-right: 30px;
}
.cs_blog-aktuell a.more-link {
  background: #2d4556;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 5px;
}
.cs_blog-aktuell .post-content-inner {
  margin-bottom: 20px;
}
.cs-beitrag-aktuell .et_pb_row_0 {
  margin: 0 !important;
  width: 100%;
}
/* End Blog Aktuelles */
/* Karte */
.cs-map {
  color: #fff;
  background: #e30613;
  padding: 0.4rem 1rem;
  border-radius: 5px;
}
/* End Karte */
/* Galerie Carousel */
.swiper-button-prev {
  border-radius: 50%;
}
.swiper-button-next {
  border-radius: 50%;
}
.dica-container .swiper-button-next::before,
.dica-container .swiper-button-prev::before {
  font-weight: 600;
}
/* End Galerie Carousel */
/* Text-Spacer */
ul.cs-dot-spacers {
  max-width: 40em;
  padding: 0;
  overflow-x: hidden;
  list-style: none;
}
ul.cs-dot-spacers li:before {
  float: left;
  width: 0;
  white-space: nowrap;
  content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
}
ul.cs-dot-spacers span:first-child {
  padding-right: 0.33em;
  background: #f7f7f5;
}
ul.cs-dot-spacers span + span {
  float: right;
  padding-left: 0.33em;
  background: #f7f7f5;
}
/* End Text-Spacer */
/* Infoboxen */
.cs-infobox-ags h4.et_pb_module_header span {
  font-family: Rubik SemiBold;
  font-size: 1.3rem;
  color: var(--secondary-color) !important;
}
/* End Infoboxen */
/* Text ueber Bild */
.cs_text-over-image {
  position: absolute;
  top: 12%;
  left: 10%;
  width: 400px;
}
.cs_text-over-image.cs_text-light p {
  font-family: Rubik SemiBold;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}
.cs_text-over-image.cs_text-dark p {
  font-family: Rubik SemiBold;
  font-size: 4rem;
  color: rgba(45, 69, 86, 0.75);
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .cs_text-over-image.cs_text-light p {
    font-size: 1.8rem;
  }
  .cs_text-over-image.cs_text-dark p {
    font-size: 1.8rem;
  }
}
/* End Text ueber Bild */
/* Tabelle */
.cs-tg {
  font-family: Rubik Regular;
  font-size: 1rem;
  line-height: 1.2em;
  color: var(--secondary-color);
  text-align: center;
  rules: all;
}
.cs-tg td,
.cs-tg th {
  text-align: center;
}
.cs-tg .cs-tg-c {
  background: var(--tertiary-color);
}
th.cs-tg-c {
  width: 110px;
}
th.cs-tg-c:nth-child(1) {
  width: 50px;
}
table,
th,
td {
  border: thin solid #2d4556;
}
table {
  border-collapse: collapse;
}
th,
td {
  padding: 6px 2px !important;
}
/* End Tabelle */
/* Formular */
.nf-form-fields-required {
  font-family: Rubik Regular;
  font-size: 0.8rem;
  line-height: 1em;
  color: var(--secondary-color);
}
.nf-form-content label {
  font-family: Rubik Regular;
  font-size: 1rem !important;
  line-height: 1.2em;
  color: var(--secondary-color);
}
.nf-form-content .list-select-wrap .nf-field-element > div,
.nf-form-content input:not([type="button"]),
.nf-form-content textarea {
  background: var(--tertiary-color) !important;
  border: 0 solid var(--tertiary-color) !important;
  border-radius: 5px !important;
  color: var(--secondary-color) !important;
}
.nf-field-element {
  font-family: Rubik Regular;
  font-size: 1rem;
  line-height: 1.2em;
  color: var(--secondary-color);
}
.nf-field-element a {
  font-family: Rubik Regular;
  font-size: 1rem;
  line-height: 1.2em;
  color: var(--primary-color);
}
.nf-field-element a:hover {
  color: var(--secondary-color);
}

/* Element | https://csm-lernen.test.sparkundsparkling.com/kontakt/ */

#nf-field-4 {
  color: #fff !important;
  background: var(--secondary-color) !important;
  padding: 0.1rem 2rem;
  border-radius: 1.8rem !important;
}
/* End Formular */
/* Blog Bild */
.cs-blog-image img {
  height: 565px;
  object-fit: cover;
}
/* End Blog Bild */
/*changing the Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d";
}
/*rotating the Divi Menu icon*/

.mobile_menu_bar:before {
  transition: all 0.4s ease;
  transform: rotate(0deg);
  display: block;
}

/*rotate the Divi Menu icon on click*/

.mobile_nav.opened .mobile_menu_bar::before {
  transition: all 0.4s ease;
  transform: rotate(90deg);
  display: block;
}

/* Remove the top line in the mobile menu*/
.et_mobile_menu {
  border-top: 0;
}

/*making the Divi Menu full width*/
.et_pb_menu .et_mobile_menu {
  min-width: 100vw;
  padding-top: 4% !important;
  margin-left: -4vw;
  padding-bottom: 100vh !important;
}

/*removing the line from the menu items and adding line height*/

.et_mobile_menu li a {
  padding: 10px 10px !important;
  border-bottom: 1px solid var(--secondary-color) !important;
}

/*removing padding of the social media icons*/
.et_mobile_menu li li {
  padding-left: 0% !important;
}

/* Element | https://csm-lernen.test.sparkundsparkling.com/ */

#mobile_menu2 > li:nth-child(odd) > a {
  background: var(--quaternary-color);
}