/*
Theme Name:     Neve Child for Beutler Kinesiologie
Theme URI:      https://themeisle.com/themes/neve/
Author:         Walter Hodel, hodu.ch
Author URI:     https://www.hodu.ch
Description:    Neve is a super fast, easily customizable, multi-purpose theme. It’s perfect for blogs, small business, startups, agencies, firms, e-commerce shops (WooCommerce storefront) as well as personal portfolio sites and most types of projects. A fully AMP optimized and responsive theme, Neve will load in mere seconds and adapt perfectly on any viewing device. While it is lightweight and has a minimalist design, the theme is highly extendable, it has a highly SEO optimized code, resulting in top rankings in Google search results. Neve works perfectly with Gutenberg and the most popular page builders (Elementor, Brizy, Beaver Builder, Visual Composer, SiteOrigin, Divi). Neve is also WooCommerce ready, responsive, RTL & translation ready. Look no further. Neve is the perfect theme for you!
Template:     	neve
Version:        1.0.0
License:        GNU General Public License v2 or later
Text Domain:    neve
Tags: blog, custom-logo, e-commerce, rtl-language-support, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, flexible-header, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, accessibility-ready, wide-blocks, block-styles, footer-widgets, portfolio, left-sidebar, right-sidebar
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

:root {
  --bs-font-sans-serif: "cronos-pro", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --grau: #a9b9b7;
  --leichtgrau: #f1f3f3;
  --gold: #e1d89f;
  --weinrot: #cb7d92;
  --braun: #6b6903;
  --violet: #726773;
  --schwarz: #474f57;
  --leichtgold: #faf8f0;
  --orange:  #ffdbaa;
  --dunkelgrau: #acadaf;
  --hellblau: #fdeae0;
}

/* -- hodu.ch - auf Wolke clippen: ich habs nicht auf die ID gemacht, sondern einfach als Klasse definiert */
.nav_cloud {
  position: absolute;
  -webkit-clip-path: url(#myClip);
	clip-path: url(#myClip);

  margin-left: -10px;
  text-align: center;
}

.nav {
  border-radius: 100%;
  width:  100%;
  height: 100%;
  /* margin-left: 26px; */
  text-align: center;
}

.nav-ul {
 display:flex;
 flex-direction:column;
 align-items: center;
 flex-wrap:wrap;
 margin-right:calc(var(--spacing)/ 2 * -1);
 margin-left:calc(var(--spacing)/ 2 * -1)
}

.nv-nav-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  min-width: 160px;
}

.nav-ul li>a {
 display:flex;
 align-items:center;
 min-height:var(--height);
 min-width:var(--height);
 color:var(--color);
 position:relative
}

.d-inline-block {
    display: inline-block !important;
}


.bg-dark {
    background: transparent !important;
}

.bg-dark.open {
    background: var(--hellblau) !important;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

/* -- hodu.ch - Darstellung Hamburger - Button */
.hamburger {
  border-radius: 50%;
  width: 80px;
  height: 80px;  
  padding: 10px 10px;
  padding-top: 15px;
  
  /*
  position: relative;
  display: inherit;
  left: 50%;
  cursor: pointer;
  -webkit-transition: background-color 500ms linear;
  -ms-transition: background-color 500ms linear;
  transition: background-color 500ms linear;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin-bottom: -25px; */
  overflow: visible; }
  .hamburger:hover {
	background-color: var(--hellblau);
    opacity: 0.8; }
  .hamburger.is-active:hover {
	background-color: var(--hellblau);
    opacity: 0.8; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: var(--hellblau); }
	
.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }
	
.hamburger.is-active {
  background: var(--hellblau);
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
  background-color: var(--braun);
}

	
/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

.bg-orange {
  background-color: var(--hellblau);
}