/*
 Theme Name:   Mario Team (Divi Child)
 Description:  Schlankes Divi-Child-Theme für mario-team.de. Ersetzt das Child-Theme "Avanti" und enthält nur die Styles, die die Seite tatsächlich nutzt.
 Author:       Bit & Bytes
 Template:     Divi
 Version:      1.0.0
 Text Domain:  mario-team-child
*/

/* =========================================================
   ALLGEMEIN
   ========================================================= */
.et_pb_column { z-index: 1 !important; }

#main-content,
#page-container { overflow: hidden !important; }

.et-l--header .et_builder_inner_content { z-index: 999999; }
.et-l--footer .et_builder_inner_content { z-index: 999999 !important; }

@media (min-width: 981px) and (max-width: 1400px) {
  .custom_row_width,
  .custom_row_width .et_pb_row { width: 95% !important; }
}

@media (min-width: 981px) and (max-width: 1200px) {
  .et_pb_section .et_pb_row { width: 95% !important; }
}
@media (min-width: 1201px) and (max-width: 1450px) {
  .et_pb_section .et_pb_row { width: 90% !important; }
}

/* Spalten-Reihenfolge Header (mobil) */
@media (max-width: 980px) {
  .columnContainer { flex-direction: column; }
  .leftColumn   { order: 1; }
  .middleColumn { order: 3; }
  .rightColumn  { order: 2; }
}

/* =========================================================
   HEADER & MENÜ
   ========================================================= */
.custom_menu.et_pb_menu .et-menu > li {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 15px;
}
@media (min-width: 981px) and (max-width: 1150px) {
  .custom_menu.et_pb_menu .et-menu > li {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

.custom_menu .et_mobile_nav_menu   { margin: 0 auto; }
.custom_menu_v1 .et_mobile_nav_menu { margin: 0 !important; }

/* Dropdown */
.custom_menu ul.sub-menu { padding: 3px 0 !important; }
.custom_menu ul.sub-menu li a {
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  letter-spacing: 0;
  font-size: 17px !important;
  text-transform: none !important;
  font-weight: 400 !important;
}
.custom_menu ul.sub-menu li:last-child a { border-bottom: 0; }
.custom_menu .fa-angle-right { padding-right: 7px; }

@media (min-width: 981px) {
  .custom_menu ul.sub-menu,
  .et-db #et-boc .et-l .custom_menu ul.sub-menu {
    background-image: linear-gradient(90deg, #c1282a 0%, #d1651a 100%);
  }
  .custom_menu ul.sub-menu::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 4rem;
    width: 0;
    height: 0;
    margin-left: -18px;
    border: 12px solid transparent;
    border-bottom-color: #c1282a !important;
    pointer-events: none;
  }
  .et_dropdown_animation_slide.et_pb_fullwidth_menu ul li:hover > ul,
  .et_dropdown_animation_slide.et_pb_menu ul li:hover > ul,
  .et-db #et-boc .et-l .et_dropdown_animation_slide.et_pb_menu ul li:hover > ul {
    animation: fadeBottom .4s ease-in-out;
  }
  .custom_menu ul.sub-menu li,
  .et-db #et-boc .et-l .custom_menu ul.sub-menu li {
    padding-left: 25px;
    padding-right: 25px;
  }
  .custom_menu .nav li ul,
  .et-db #et-boc .et-l .custom_menu .nav li ul {
    width: 275px;
    border-radius: 5px;
  }
  .custom_menu .et-menu li li a,
  .et-db #et-boc .et-l .custom_menu .et-menu li li a {
    padding: 10px 0;
    width: 225px;
  }
}

.custom_menu ul li ul li ul.sub-menu,
.et-db #et-boc .et-l .custom_menu ul li ul li ul.sub-menu { top: -6px; left: 275px; }
.custom_menu ul li ul li ul.sub-menu::after { display: none; }
.et-menu li li.menu-item-has-children > a:first-child::after { right: 0; top: 10px; }
.nav li.et-reverse-direction-nav li ul { left: auto !important; right: 260px; }

/* Menü-Badge */
.menu-badge {
  position: relative;
  top: -11px;
  margin-left: 2px;
  padding: 3px 4px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  color: #fff;
  background-color: #c73d24;
}
ul li ul.sub-menu .menu-badge {
  position: absolute;
  top: 14px;
  right: 0;
  padding: 2px 6px 0;
  line-height: 2em;
  font-weight: bold;
  color: #000;
  background-color: #fff;
}

/* =========================================================
   AUFKLAPPBARES MOBILES MENÜ
   ========================================================= */
ul.et_mobile_menu > li.menu-item-has-children,
ul.et_mobile_menu > li.page_item_has_children,
ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu > li.menu-item-has-children .sub-menu li.menu-item-has-children {
  position: relative;
}

.et_mobile_menu .menu-item-has-children > a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children > a {
  background-color: transparent;
  font-weight: 600 !important;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle-icon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  width: 44px;
  height: 100%;
  max-height: 44px;
  padding: 0 !important;
  border: none;
  background-color: transparent;
  text-align: center;
  opacity: 1;
}

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle-icon::after {
  position: relative;
  top: 10px;
  padding: 3px;
  border-radius: 50%;
  font-family: "ETModules";
  content: "\33";
  color: #da181f;
  background: #f1f1f1;
}
ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > .mobile-toggle-icon::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.mobile-toggle-open > .mobile-toggle-icon::after {
  content: "\32";
}

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
  display: none !important;
  visibility: hidden !important;
}
ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
  display: block !important;
  visibility: visible !important;
}

/* =========================================================
   STARTSEITE: HEADER, CTA, KEN-BURNS
   ========================================================= */
.kenburns_header .et_parallax_bg {
  animation: kenburns-header 25s ease both;
}
@keyframes kenburns-header {
  0%   { transform: scale(1) translateY(0);       transform-origin: 50% 16%; }
  100% { transform: scale(1.25) translateY(-50px); transform-origin: center center; }
}

@media (min-width: 981px) and (max-width: 1500px) {
  .et_pb_section.custom_header_desktop .et_pb_row { padding-left: 0 !important; padding-right: 0 !important; }
  .h1_home h1 { font-size: 50px !important; }
  .home_header_column_1 { padding-top: 25px !important; }
}

@media (max-width: 980px) {
  .cta_under_header .et_pb_blurb_container { display: block !important; padding-left: 0 !important; }
}
@media (min-width: 981px) and (max-width: 1270px) {
  .cta_under_header { font-size: 28px !important; }
  .cta_under_header h4 { padding-bottom: 0 !important; }
  .cta_under_header_phone h4 { font-size: 24px !important; }
}

/* Bild-Zoom bei Hover (Klasse "et-zoom-in") */
.et-zoom-in,
.et-zoom-in a { overflow: hidden; }
.et-zoom-in.et_pb_image img,
.et-zoom-in .et_pb_image_wrap img,
.et-zoom-in a img { transition: 1s; }
.et-zoom-in.et_pb_image:hover img,
.et-zoom-in .et_pb_image_wrap:hover img,
.et-zoom-in a:hover img { transform: scale(1.1); }

/* =========================================================
   LEISTUNGEN: FLIPBOX
   ========================================================= */
.mh_flipbox_2 .mh_flip_active_top,
.mh_flipbox_2 .mh_flip_active_bottom {
  transform-origin: 50% 0%;
  transform: perspective(500px) rotateX(0deg);
  transition: .3s linear .1s;
}
.mh_flipbox_2 .mh_flip_active_bottom { transform-origin: center bottom; }
.mh_flipbox_2:hover .mh_flip_active_top    { transform: perspective(500px) rotateX(-90deg); transition: .3s linear; }
.mh_flipbox_2:hover .mh_flip_active_bottom { transform: perspective(500px) rotateX(90deg);  transition: .3s linear; }

.mh_flipbox_2 .et_pb_button_module_wrapper {
  position: absolute !important;
  top: 50%;
  left: 50%;
  width: 100%;
  opacity: 0;
  transform: translateX(-50%) translateY(-200px);
  transition: .4s;
}
.mh_flipbox_2:hover .et_pb_button_module_wrapper {
  opacity: 1;
  transform: translateX(-50%) translateY(-50%);
}
.mh_flipbox_2 .mh_flip_divider { transition: .2s; }
.mh_flipbox_2:hover .mh_flip_divider { opacity: 0; }

/* =========================================================
   KUNDENSTIMMEN
   ========================================================= */
.blurb_review .et_pb_blurb_container { width: 100%; }
.blurb_review .et_pb_image_wrap img { position: absolute; top: -40px; }

@media (min-width: 981px) {
  .review_section .et_pb_column .review_quote { transition: .2s; }
  .review_section .et_pb_column:hover .review_quote { transform: scale(1.1); }
}
@media (min-width: 981px) and (max-width: 1200px) {
  .blurb_review .et_pb_image_wrap img { left: -70px; }
  .blurb_review .et_pb_blurb_container { display: block; }
  .review_section .et_pb_column { padding: 20px !important; }
}
@media (max-width: 980px) {
  .review_section .et_pb_column { margin-bottom: 75px; }
}
@media (max-width: 479px) {
  .blurb_review .et_pb_image_wrap img { top: -50px; left: -30px; }
}

/* =========================================================
   KONTAKT-BEREICH UNTEN
   ========================================================= */
@media (min-width: 981px) and (max-width: 1500px) {
  .contact_bottom_first_column  { padding-left: 50px !important; }
  .contact_bottom_second_column { padding-right: 50px !important; }
}
@media (min-width: 1501px) and (max-width: 1700px) {
  .contact_bottom_first_column  { padding-left: 150px !important; }
  .contact_bottom_second_column { padding-right: 150px !important; }
}

/* =========================================================
   SLIDE-IN (Footer-Template)
   Nur nötig, solange das Slide-in im Theme Builder existiert.
   ========================================================= */
.slide_in_2_section {
  position: fixed !important;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  transform: translateY(120%);
  transition: .4s ease-in-out, width .2s ease-in-out, top .4s ease-in-out !important;
}
.show_form_2 { transform: translateY(-15px); }
.hide_label_and_slide_in_2 { transform: scale(0) !important; }
.hide_label_slide_in_v4 { transform: scale(0); }
.slide-in-v4-column { width: 100% !important; }
.slide-in-blurb-phone .et_pb_blurb_container { padding-left: 0 !important; }
.slide-in-blurb-phone .et_pb_blurb_description { margin-left: -10px; }

@media (max-width: 980px) {
  .slide_in_column_1 { width: 80% !important; margin-bottom: 0; }
  .show_form_2 { transform: translateY(0); }
  .slide_in_2_section { width: 100%; }
}
@media (min-width: 981px) and (max-width: 1400px) {
  .slide_in_row.et_pb_row { width: 100% !important; }
}
.et-tb .slide_in_2_section {
  position: fixed !important;
  top: unset !important;
  right: 0 !important;
  bottom: 0 !important;
  left: unset !important;
  transform: translateY(-100px) !important;
}
.et-fb .slide_in_2_section { display: none; }