/* 
Theme Name: KlickImpuls
Theme URI: https://github.com/elementor/hello-theme/
Description: KlickImpuls Theme based on Hello Elementor Parent Theme
Author: RAABAUKE | Markus Raab
Author URI: https://raabauke.at
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


/**********************/ 
/* MR: CSS Grid for better responsive design */
/**********************/ 

/* MR: Responsive Grid applicable for all container that contain several items in columns next to each other*/
.autogrid, .autogrid > .e-con-inner, .autogrid-iconbox, .autogrid-iconbox > .e-con-inner {
    display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}


/**********************/ 
/* MR: CSS Flexbox for better responsive design */
/**********************/ 

/* MR: Flex Card */
.flexcard {
  display: flex;
  flex-wrap: wrap;
}

.flexcard > * {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 280px;
}



/**********************/ 
/* MR: Predesign custom button classes */
/**********************/ 

/* MR: All buttons / Rework overwritten / quick solution */
.elementor-button {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
	border-radius: 4px 4px 4px 4px;
	font-weight: 600;
    line-height: 1.5em;
    letter-spacing: 3px;
	background-color: var(--e-global-color-f6c9224 );
	border-color: transparent;
	color: white;
}

.elementor-button:hover {
	background-color: var(--e-global-color-f6c9224 );
    border-color: var(--e-global-color-text );
	color: white;
}

/* MR: Outline Button - Redesign Buttons dirty solution */
.btn-outline .elementor-button {
	background-color: var(--e-global-color-f6c9224 ) !important;
	border-color: transparent !important;
}

.btn-outline .elementor-button:hover {
	background-color: var(--e-global-color-f6c9224 ) !important;
    border-color: var(--e-global-color-text ) !important;
}

/* MR: Dark Button - Redesign Buttons dirty solution */
.btn-dark .elementor-button {
	background-color: var(--e-global-color-f6c9224 ) !important;
	border-color: transparent !important;
}

.btn-dark .elementor-button:hover {
	background-color: var(--e-global-color-f6c9224 ) !important;
    border-color: var(--e-global-color-text ) !important;
}


/* MR: Color Button - Redesign Buttons dirty solution */
.btn-color .elementor-button {
	background-color: var(--e-global-color-f6c9224 ) !important;
	border-color: transparent !important;
}

.btn-color .elementor-button:hover {
	background-color: var(--e-global-color-f6c9224 ) !important;
    border-color: var(--e-global-color-text ) !important;
}




/**********************/ 
/* MR: Elementor text cusomization */
/**********************/ 

/* MR: Link Color white and underline - add the class .linkcolor-white to any textelement and all links will get the color white instead of the default blue color. This is applicable for text on dark background*/
.linkcolor-white a {
    color: white;
    text-decoration: underline;
}



/**********************/ 
/* MR: Show/hide Logos in different colors depending on sticky state */
/**********************/ 
.elementor-sticky--effects .logowhite {
    display: none !important;
}

.logocolor {
    display: none;
}

.elementor-sticky--effects .logocolor {
    display: inline-block !important;
}




/**********************/ 
/* MR: Menu customization */
/**********************/ 

/* MR: Hide menu items in desktop view */
@media only screen and (min-width: 1350px) {
.hidedesktop {
    display: none !important;
}
}

/* MR: Highlight menu item (currently only shown in desktop) */
li.highlightmenudesktop.menu-item {
    background-color: #ed2d97;
    border-radius: 4px;
	border-color: #ed2d97;
	border-width: 2px;
	border-style: solid;
}
li.highlightmenudesktop.menu-item:hover {
    /*background-color: #306A90;*/
	border-color: var(--e-global-color-text) !important;
}
li.highlightmenudesktop.menu-item a {
    color: white !important;
	font-weight: 500 !important;
}


/* MR: Highlight menu item (currently only shown in mobile). Usage of Max Mega menu */
li.highlightmenu {
    background-color: #ed2d97 !important;
    border-radius: 8px !important;
	margin-top: 15px !important;
}


.highlightmenu a.mega-menu-link {
    color: white !important;
	background-color: var( --e-global-color-f4daa58 ) !important;
	border-radius: 8px !important;
}




/**********************/ 
/* MR: Gutenberg Classes */
/**********************/ 


/* MR: CTA Group in Gutenberg */
.gutenberg-cta {
    padding: 50px 20px;
    margin: 50px 0px;
}

/* MR: CTA Group Button Mobile */
@media only screen and (max-width: 766px) {
	.gutenberg-cta .is-style-outline {
		font-size: small !important;
	}
	
	.gutenberg-cta p {
		font-size: 1.5rem !important;
	}
}



/**********************/ 
/* MR: Avoid line breaks for long URLs, specifically useful for data privacy page on mobile screen*/
/**********************/ 
.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}