/*
 Theme Name:     WebForU
 Theme URI:      http://www.elegantthemes.com
 Description:    WebForU Theme
 Author:         WebForU
 Author URI:     https://webforu.de
 Template:       Divi
 Version:        1.0.0
*/

/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

/* ---------------------------------------
   Table of Contents
--------------------------------------- */

/* 1. Reset and Defaults */
/* 2. Header Styles */
/* 3. Main Content Styles */
/* 4. Footer Styles */
/* 5. Breakpoints */

/* ---------------------------------------
   1. Reset and Defaults
--------------------------------------- */

#main-content{
	overflow:hidden;
}

.animation-main,
.animation-main-img img {
  transition: 300ms all ease-in-out;
}

.animation-main:hover,
.animation-main-img img:hover {
  transform: scale(0.9);
}


.bullet-list-arrow ul,
.bullet-list-check ul {
  list-style-type: none !important;
}

.bullet-list-arrow li,
.bullet-list-check li {
  display: flex;
  padding-bottom: 25px;
}

.bullet-list-arrow ul li:before {
  content: "\24" !important;
  color: #a87637;
  font-family: "ETMODULES" !important;
  margin-right: 10px;
  margin-left: -14px;
  font-size: 1.2em !important;
}

.bullet-list-check ul li:before {
  content: "\e052" !important;
  color: rgba(0,0,0,.2);
  font-family: "ETMODULES" !important;
  margin-right: 10px;
  margin-left: -14px;
  font-size: 1.2em !important;
}

/* ---------------------------------------
   2. Header Styles
--------------------------------------- */

#menu-header {
  align-items: center;
}

.menu_cta {
  -webkit-background-clip: padding-box; 
  background-clip: padding-box; 
  color: #fff;
  padding: 0 !important;
  height: fit-content;
  margin: auto auto auto 25px !important;
  transition: 0.4s all;
  background: orange;
  text-align: center;
}

.menu_cta a {
  color: #fff !important;
  padding: 20px 15px !important;
}

.menu_cta:hover {
  opacity: 0.7;
}

.et-menu a:hover {
  opacity: 1;
}

.et-menu .menu-item a{
  color: rgba(0,0,0,0.8) !important;
  background: #fff;
  border-radius: 5px;
  padding: 12px 17px !important;
  height: auto;
}

.et-menu .menu-item a:hover {
  background: #f5f5f6;
  opacity: 1;
} 

.et_pb_menu .et-menu > li {
  padding-left: 0px;
  padding-right: 0px;
}

.et-menu li {
  display: block;
}

.sub-menu li {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.et-menu li li a {
  padding: 6px 0px;
  width: auto;
  border-radius: 0px !important;
}

.et_mobile_nav_menu:before {
  content: "MENÜ";
  position: absolute;
  right: 35px;
  margin-top: 5px;
  color: rgba(0,0,0,.5);
  font-size: 16px;
}

.et_mobile_menu {
  min-width: 100vw;
  margin-left: -3vw;
}

.et_mobile_menu li a {
  padding: 15px 5%;
}

.first-level a {
  padding: 12px 35px 12px 17px !important;
}

.et_mobile_menu .menu-item-has-children > a {
  font-weight: 400 !important;
}

.et_mobile_menu li li,
.et_pb_menu .et_mobile_menu li ul {
  padding-left: 0%;
}

.et-menu .menu-item-has-children > a:first-child:after {
  right: 13px;
}

.et_mobile_menu .first-level > a {
  background-color: transparent;
  position: relative;
}
.et_mobile_menu .first-level > a:after {
  font-family: "ETmodules";
  content: "\4c";
  font-weight: normal;
  position: absolute;
  font-size: 16px;
  top: 15px !important;
  right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after {
  content: "\4d";
}
.second-level {
  display: none;
}
.reveal-items {
  display: block;
}
.et_mobile_menu {
  margin-top: 10px !important;
}
.second-level a {
  font-weight: 400 !important;
}

.mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d";
}

/* ---------------------------------------
   3. Main Content Styles
--------------------------------------- */

/*place button modules next to each other in the same column*/
.inline-buttons .et_pb_button_module_wrapper {
  display: inline-block;
}

.nf-form-fields-required {
  display: none;
}

.contact nf-fields-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

nf-fields-wrap nf-field:nth-child(n + 1):nth-child(-n + 2) {
  flex: 0 0 calc(50% - 5px);
}

nf-fields-wrap nf-field:nth-child(3) {
  flex-basis: 100%;
}

.contact_button input {
  color: #000 !important;
  transition: 0.4s all;
  background: #ffcc01 !important;
  text-align: center;
  border-radius: 9px !important;
  font-weight: 700;
  font-size: 16px !important;
  padding: 13px 25px !important;
  cursor: pointer;
}

.contact .nf-form-content label {
  font-size: 14px;
}

.contact_field input,
.contact_message textarea {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px !important;
  background: #fff !important;
}

.contact_field input:hover,
.contact_message textarea:hover,
.contact_field input:focus,
.contact_message textarea:focus {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.contact_field label,
.contact_message label {
  color: #000 !important;
}

.contact_field .nf-error.field-wrap .nf-field-element:after {
  border-radius: 0px 8px 8px 0px;
}

.contact_message .nf-error.field-wrap .nf-field-element:after {
  border-radius: 0px 8px 0px 0px;
}

.nf-error-required-error {
  display: none;
}

/* ---------------------------------------
   4. Footer Styles
--------------------------------------- */

.footer-icon .et_pb_icon_wrap {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}

/* ---------------------------------------
   5. Breakpoints
--------------------------------------- */

/* Breakpoints for responsive design */
@media screen and (max-width: 576px) {
  /* Styles for screens smaller than 576px (typical smartphones) */

  .btn-mobile-full .et_pb_button_module_wrapper,
  .btn-mobile-full .et_pb_button {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  /* Styles for screens smaller than 768px (tablets) */
  .menu_cta {
    margin: 20px auto auto auto !important;
  }
  .et_mobile_menu li a {
    text-align: center;
  }
  .first-level a {
    padding: 15px 5% !important;
  }
  .et_pb_menu__wrap {
    margin-right: -8px;
  }
}

@media screen and (max-width: 1024px) {
  /* Styles for screens smaller than 1024px (small desktops) */
}

@media screen and (max-width: 1200px) {
  /* Styles for screens smaller than 1200px (medium to large desktops) */
}

@media screen and (min-width: 981px) {
  .hide-nav-desktop {
	display:none!important;
  }
}