/* 
Theme Name: Crisisdienst Platform
Theme URI: https://github.com/elementor/hello-theme-child/
Description: -
Author: CC Websolutions
Author URI: https://cc-websolutions.nl/
Template: hello-elementor
Version: 2.0.0
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 */

.elementor-button:hover {
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3)!important;
}

/***
* Shrinking Sticky header, Elementor Container edition
* class: .sticky-header
* This will only work with the Elementor container section
* the header uses additional 3 classes to gain higher CSS specificity and to avoid adding !important
*/
header.sticky-header.e-container.elementor-element {
	--header-height: 100px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */
	--min-height: var(--header-height);
	--transition: min-height var(--transition-timing);
}
header.sticky-header.e-container.elementor-element.elementor-sticky--effects {
	--min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

	/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
	/*--logo-height: 150px;*/ /* This should be the original logo height _before_ being shrunk */
    --logo-width: 100px;
    --transition-timing:0.3s;
	--logo-shrink-to: 0.80; /* Shrinks logo to 80%, values: 0.10 to 1.00, where 1.00, as in 100%, won't shrink the logo */
    width: var(--logo-width);
	transition: width var(--transition-timing);
	box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
	width: calc(var(--logo-width) * var(--logo-shrink-to));
}
header.sticky-header .logo .elementor-icon svg {
	height: auto;
}


/***
* Shrinking Sticky header, Elementor Container edition
* class: .sticky-header
* This will only work with the Elementor container section
* the header uses additional 3 classes to gain higher CSS specificity and to avoid adding !important
*/
header.sticky-header.e-container.elementor-element {
	--header-height: 100px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	--min-height: var(--header-height);
	--transition: background-color var(--transition-timing),
					backdrop-filter var(--transition-timing),
					box-shadow var(--transition-timing),
					min-height var(--transition-timing);
}
header.sticky-header.e-container.elementor-element.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
	--min-height: calc( var(--header-height) * var(--shrink-header-to) );
	
	
}




.elementor-nav-menu--main .elementor-nav-menu a {
	font-weight:500!important;
	transition: .1s!important;
} 
.elementor-nav-menu--main .elementor-nav-menu a:hover{
	/*font-weight:600!important;*/
	transition: .1s!important;
	text-shadow: 0.6px 0 0 #154a8f;
}



header.sticky-header {
	height:75px;
} 

.elementor-nav-menu > .menu-item-has-children > a > .sub-arrow {
	color:#154A8F!important;
}


/* scroll to top */

/* CSS */
.scroll-to-top-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #e2007a;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  z-index: 1000;
  opacity: 0;
  outline: none; 
}

.scroll-to-top-button:focus {
  outline: none;  
}

.scroll-to-top-button.visible {
  display: flex;
  opacity: 1;
}

.scroll-to-top-button:hover {
  background: #c5006a;
  transform: translateY(-3px);
  box-shadow: 2px 4px 12px 0px rgba(0, 0, 0, 0.4);
}

.scroll-to-top-button:active {
  transform: translateY(-1px);
}

/* custom-accordeon */

.custom-accordeon.elementor-widget-n-accordion summary.e-n-accordion-item-title {
    justify-content: space-between;
}

.custom-accordeon p:last-child {
	margin-bottom:0px;
}

/* Responsive */
@media (max-width: 768px) {
  .scroll-to-top-button {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
}

@media (min-width: 576px) { }

@media (min-width: 768px) { 
	header.sticky-header {
	height:125px;
}  
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
	/*--logo-height: 150px;*/ /* This should be the original logo height _before_ being shrunk */
    --logo-width: 150px;
}

}

@media (min-width: 992px) { 

 }

 @media (min-width: 1025px) { 

	.radial-header-bg img {
		display:block;
	}
	.elementor-nav-menu > .menu-item-has-children > a > .sub-arrow {
		display:none!important;
	}

	.elementor-nav-menu--main .elementor-nav-menu ul ul li a {
		padding-top:7px!important;
		padding-bottom:7px!important; 
	}  
	
	.elementor-nav-menu--main .elementor-nav-menu ul ul {
		padding-top:8px!important; 
		padding-bottom:8px!important; 
	}
 }

@media (min-width: 1200px) { }

@media (min-width: 1400px) { }