/* 
Theme Name: Sandra Tobler Theme
Theme URI: https://github.com/elementor/hello-theme/
Description: Theme für die Website von Sandra Tobler
Author: RJ-Web
Author URI: https://elementor.com/
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
*/

span, p, button {
    padding-block-end: 0px!important;
    margin-block-end: 0px!important;
}



html {
    scrollbar-width: thin;
    scrollbar-color: #6C826B #F1DBCD;
}

/*body.page-id-2334 {
    overflow-y: hidden;
}*/

body.scrollbar {
    overflow-x: hidden;
    overflow-y: visible;
}

body {
    overflow-x: hidden;
    overflow-y: visible;
}

.text-border-bl p {
    padding-left: 20px;
}

.about-img {
    padding-block-start: 0px!important;
}

.mobile-menu .elementor-icon-box-icon {
    display: flex!important;
    align-items: center;
}


.text-border-bl p::before {
    content: "-";
    position: absolute;
    height: 100%;
    left: 0;
}

.pointer-none {
    pointer-events: none;
}

.pointer-all {
    pointer-events: all;
}

#hamburger div {
    transition: 0.5s ease-in-out;
}

#hamburger.hamburger-active > div:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
    transform-origin: 50% 50%;
}

#hamburger.hamburger-active > div:nth-child(2) {
    opacity: 0;
}

#hamburger.hamburger-active > div:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
    transform-origin: 50% 50%;
}

.nav-icons-container {
    pointer-events: none;
}

.nav-icons {
    transform: translateX(calc(100% - 70px));
    pointer-events: all;
}

.nav-icons:hover, .nav-icons:active,
.nav-icons.nav-active  {
    transform: translateX(0);
}

.nav-icons div.elementor-widget-icon-box {
    padding: 15px 20px;
    border-radius: 30px 0 0 30px;
    width: 100%;
    transition: 0.3s ease-in-out;
}

.nav-icons div.elementor-icon-box-content span.elementor-icon-box-title {
    opacity: 0;
    transition: 0.3s ease-in-out;
    position: relative;
    top: 3px;
}

.nav-icons:hover div.elementor-icon-box-content span.elementor-icon-box-title,
.navIcons:nth-child(1).navIconsActive + .nav-icons{
    opacity: 1;
}


body .elementor-element .nav-icons:hover > div.elementor-icon-box-content span.elementor-icon-box-title {
    color: var(--e-global-color-accent);
}

body .elementor-element .nav-icons:hover > div.elementor-widget-icon-box svg,
body .elementor-element .nav-icons.navIconsActive > div.elementor-widget-icon-box svg  {
    fill: var(--e-global-color-accent);
}

.nav-icons:hover > div.elementor-widget-icon-box,
.nav-icons.navIconsActive > div.elementor-widget-icon-box {
    background: var(--e-global-color-text);
}

.nav-icons .elementor-icon-box-icon svg,
body main .elementor-657  .nav-icons .elementor-icon-box-title {
    transition: 0.3s ease-in-out;
}

.nav-icons:hover .elementor-icon-box-icon svg,
.nav-icons.nav-active .elementor-icon-box-icon svg {
    fill: var(--e-global-color-accent);
}

.button-container h5 {
    transition: 0.2s ease-in-out;
    padding: 0;
}

#about .elementor-sticky--active {
    padding-top: 5%;
}

.button-container:hover h5{
    padding: 0 0 20px 20px;
}

.content-section {
    padding: 2vw 0 0 0;
}

.angebot-tabs .e-n-tabs-heading {
    background-color: var(--e-global-color-a0fda2e);
    padding: 20px calc(5vw - 5px);
}

#kontakt .elementor-icon svg {
    max-height: 100px;
}

.section-start {
    margin-top: 10vh;
}

body.page-id-657 .section-start{
    margin-top: 0vh;
}

.section-title {
    margin-bottom: 10px;
}

.section-title h2{
    width: auto;
}

#about .elementor-icon-list-item:hover a svg {
    fill: var(--e-global-color-a0fda2e);
}

#about .elementor-icon-list-item:hover a span {
    color: var(--e-global-color-a0fda2e);
}

.section-title h2:after {
  content: "";
  position: absolute;
  top: calc(55px + 1vw);
  height: 5px;
  background: white;
  width: 170px;
  left: 0;
}

.section-title.ul-black h2:after {
    background: black;
}

.e-off-canvas p {
    margin-block-end: 0;
}

.home-background {
    animation: backgroundTransition 1s 0.7s ease forwards;
    width: 70%;
    background-position: top right;
}

@keyframes backgroundTransition {
    from {
        width: 70%;
        background-position: top right;
    }

    to {
        width: 40%;
        background-position: top right;
    }
}