/*---------------------------------------------------------------------------------

 Theme Name:   Netzhelfer theme
 Theme URI:    https://netzhelfer.de
 Description:  NETZhelfer 
 Author:       NETZhelfer GmbH – Ihre Internetagentur aus Esslingen
 Author URI:   https://netzhelfer.de
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/

/*prevent horizontal scroll on mobile*/
@media all and (max-width: 980px) {
	html,
	body {
		overflow-x: hidden;
	}
	body {
		position: relative
	}
}




@media only screen and (min-width: 981px) {
	.nav li ul {
		width: fit-content;
		display: flex;
		flex-direction: column;
	}
	.nav li li {
		white-space: nowrap;
	}
	.nav li li a {
		width: auto !important;
	}
}



.uppercase { 
text-transform:uppercase!important;
}


.gradient-overlay:before {
    content: "";
    position: absolute;
    z-index: 1;
    background: inherit;
    top: 0;
    bottom: 0;
    width: 100%;
}


/* CSS for hiding elements on mobile */
    @media only screen and (max-width: 767px) {
      .mobile-hide {
        display: none;
      }
		
    }


@media (max-width:980px) {
	.reverse-columns-mobile {
		display: flex;
		flex-direction: column-reverse;
	}
}

.scale:hover {
    transform: scale(1.01);
    transition: all .2s ease-in-out;
}



@media all and (min-width: 981px) {
   .kontakt a {
       color: #FF6A10!important; /* Change button text color here */
	   color: #fff!important; /* Change button text color here */
    /*background-color: #26353D!important; *//* Change button background color here */
     background: linear-gradient(90deg, rgba(255,106,16,1) 0%, rgba(255,221,17,1) 100%);
    font-size: 14px!important; /* Change text size here */
    border-radius: 30px!important; /* Set this to 0px if you want a square CTA button */
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    text-align: center;
    line-height: 9px;
    font-weight: 600;
    padding: 18px 16px!important;
    text-transform: uppercase;
    display: block;
    padding-left: 32px!important;
    padding-right: 32px!important;
    border: 2px solid #fff;
	   opacity: 1!important;
	   box-shadow: 6px 6px 18px 0px rgba(0, 0, 0, 0.3);
   }
   .kontakt a:hover {
      opacity: 1!important;
        color: #ffffff!important; /* Change hover button text color here */
        /*background-color: #FF6A10!important; *//* Change hover button background color here */
	       background: linear-gradient(29deg, #ff9c00, #fc0 55%, #fd1);
        
	   border: 2px solid #fff;
   }
	 .kontakt a:active {
        color: #ffffff!important; /* Change hover button text color here */
 
   }
}


/* Fix the padding in the primary menu to accomodate the button */
.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-top: 0px;
    padding-bottom: 0px;
}
 
/* Make sure that the alignment in the menu is correct */
.et_pb_menu .et_pb_menu__menu>nav>ul>li {
    align-items: center;
}



/* Fix the padding in the primary menu to accomodate the button */
.et_pb_menu--with-logo .et_pb_menu__menu>nav>ul>li>a {
    padding-top: 0px;
    padding-bottom: 0px;
	color:#000;
}
 
/* Make sure that the alignment in the menu is correct */
.et_pb_menu .et_pb_menu__menu>nav>ul>li {
    align-items: center;
}

.bigger-text { 
font-size:22px;
}



/*NEST */

/*background image gradient color*/
.b-parallax-background-image-gradient .et_parallax_bg:before {
content:"";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: -webkit-gradient(linear, left top, right bottom, from(rgba(0, 0, 0, 0.30)), to(rgba(0, 0, 0, 0.50)));
background-image: -webkit-linear-gradient(left top, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.30));
background-image: -moz-linear-gradient(left top, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.30));
background-image: -o-linear-gradient(left top, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.30));
background-image: -ms-linear-gradient(left top, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.30));
background-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.30));
}


/*background image position*/
.b-parallax-background-image-position .et_parallax_bg {
background-position: bottom;




}

.et-menu .nav li a { 
font-weight:bold;
}




/* DIVI ENGINE KEN BURNS */
 .de-ken-burns .et_parallax_bg {
     -webkit-animation: summersaleburns 10s ease-out both; /* You can change the duration by changing the 30s here */
     animation: summersaleburns 10s ease-out both; /* You can change the duration by changing the 30s here */
     animation-iteration-count: infinite; /* This makes the effect loop forever */
}

/* Divi Engine Ken Burns Animation Keyframes */
@-webkit-keyframes summersaleburns {
     0% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 74% 74%;
         transform-origin: 74% 74%;
    }
     50% {
         -webkit-transform: scale(1.25) translate(-20px, 15px);
         transform: scale(1.25) translate(-20px, 15px);
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
    }
     100% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 74% 74%;
         transform-origin: 74% 74%;
    }
}

@keyframes summersaleburns {
     0% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 74% 74%;
         transform-origin: 74% 74%;
    }
     50% {
         -webkit-transform: scale(1.25) translate(-20px, 15px);
         transform: scale(1.05) translate(-0px, 15px);
         -webkit-transform-origin: right bottom;
         transform-origin: right bottom;
    }
     100% {
         -webkit-transform: scale(1) translate(0, 0);
         transform: scale(1) translate(0, 0);
         -webkit-transform-origin: 74% 74%;
         transform-origin: 74% 74%;
    }
}

.cta-button { 
color: #ff6a10; /* Change hover button text color here */
color: #ff6a10 !important;
    border-color: #ff6a10;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    background-color: RGBA(255, 255, 255, 0);
}


.cta-button:hover { 
color: #ffffff!important; /* Change hover button text color here */
        /*background-color: #FF6A10!important; *//* Change hover button background color here */
	       background: linear-gradient(29deg, #ff9c00, #fc0 55%, #fd1);
        
	  border: 2px solid #fff!important;
}







/*MOBILE MENU CSS */



/* X icon in expanded mobile menu */
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}
/* Remove the top line in the mobile menu*/
.et_mobile_menu {
border-top:0;
}
/* Center-align moble menu items */
.et_mobile_menu li {
text-align:center !important;
}
  
.et_mobile_menu li li, .et_mobile_menu li ul {
padding-left:0 !important;
}
/* Make mobile menu fullwidth */
.et_mobile_menu {
min-width: 100vw;
margin-left: -10vw;
}

/* Remove the animation to avoid delay */
.mobile_nav.opened .et_mobile_menu {
display:block !important;
}


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: 13px;
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: 15px;
width: 230%;
margin-left: -65%;
}


.et_mobile_menu li a {

    padding: 8px 5%;

}

/*END MOBILE MENU CSS */

.et_mobile_menu li a {
    border-bottom: 0px solid rgba(0,0,0,.00);
    color: #000;
    padding: 10px 5%;
    display: block;
}