/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
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
*/

/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

@media screen and (min-width: 1025px) {
  .hide-on-desktop {
    display: none;
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .hide-on-tablet {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .hide-on-mobile {
    display: none;
  }
}

.menu {
  padding-left: 0;
}



#siteHeader {

  background-color: var(--e-global-color-primary);
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 999;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
}

@media(max-width: 767px) {
  #siteHeader {
    padding: 8px 20px;
  }

  #siteHeader #siteLogo img {
    width: 100px;
  }
}


#siteLogo img {
  transition: 0.3s ease-in-out;
  width: 120px;
}

body.window-scrolled #siteLogo img {
  width: 80px;
}













body.nav-menu-open {
  height: 100vh;
  overflow-y: hidden;
}


.tr-header-navigation-area {
  display: flex;
  align-items: center;
}


/*Trametsch Giftcard Icon and link*/
.tr-giftcard-icon {
  margin-right: 24px;
  width: 48px;
  height: 48px;
  padding: 4px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tr-giftcard-icon a {
display: flex;
}

.tr-giftcard-icon img {
  width: 20px;
}

@media screen and (max-width: 767px){
  .tr-giftcard-icon {
    transform: scale(0.8);
  }
}
  




/* Trametsch Menu Toggle*/
.tr-menutoggle-container {
  z-index: 999999;
}

button.hamburger {
  padding: 0;
}

.hamburger {
  padding: 0;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: white;
  border: 0;
  margin: 0;
  overflow: visible;
  z-index: 99999;
}

.hamburger:hover {
  opacity: 0.7;
}


.hamburger.is-active:hover {
  opacity: 0.7;
}

.hamburger-header .hamburger.is-active .hamburger-inner,
.hamburger-header .hamburger.is-active .hamburger-inner::before,
.hamburger-header .hamburger.is-active .hamburger-inner::after {
  background-color: #fff;
}

.hamburger:hover,
.hamburger:focus {
  background: unset;
  outline: unset;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-header .hamburger-inner,
.hamburger-header .hamburger-inner::before,
.hamburger-header .hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: #fff;
  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;
}


/*
     * Collapse
     */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(-90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/*
     * Collapse Reverse
     */
.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--collapse-r .hamburger-inner::after {
  top: -20px;
  transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear;
}

.hamburger--collapse-r .hamburger-inner::before {
  transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}


.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--collapse-r.is-active .hamburger-inner::after {
  top: 0;
  opacity: 0;
  transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear;
}

.hamburger--collapse-r.is-active .hamburger-inner::before {
  top: 0;
  transform: rotate(90deg);
  transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);
}



/* Trametsch Off Canvas Menu overlay*/

.tr-offcanvas-menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  transition: 0.3s ease-in-out;
  height: 100vh;

  background-color: var(--e-global-color-primary);
}

.nav-menu-open .tr-offcanvas-menu-overlay {
  width: 100vw;
}


/* Trametsch Off Canvas Menu Containter*/


.tr-menu-container {
  width: calc(100vw / 3);
  position: fixed;
  top: 0;
  right: 0;
  transition: 0.3s ease-in-out;
  transform: translateX(100%);
  overflow-y: scroll;
  background-color: var(--e-global-color-primary);
  z-index: 990;
  min-height: 100vh;
}

.nav-menu-open .tr-menu-container {
  transform: translateX(0);
  overflow-y: scroll;
}

.tr-menu-container-inner {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 40px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.tr-menu-containe-custom-logo {
  margin-bottom: 40px;
}

.tr-menu-containe-custom-logo img {
  width: 200px;

}

.tr-menu-container hr {
  color: var(--e-global-color-0480b3d);
  width: 75%;
  text-align: center;
}


.tr-menu-container .tr-menu-container-main-nav ul li {
  list-style: none;
  padding: 20px 0;
  text-align: center;

}

.tr-menu-container .tr-menu-container-main-nav ul li a,
.tr-menu-container-inner .wpml-ls-statics-shortcode_actions ul li a span {
  text-align: center;
  font-family: var(--e-global-typography-b249216-font-family), Sans-serif;
  font-size: var(--e-global-typography-b249216-font-size);
  font-weight: var(--e-global-typography-b249216-font-weight);
  line-height: var(--e-global-typography-b249216-line-height);

  color: var(--e-global-color-17acc85);
}

.tr-menu-container-shortcuts {
  margin-top: 40px;
  display: none;
}


.tr-menu-social-buttons {
  margin-top: 40px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 24px;
}

.tr-menu-social-buttons img {
  width: 24px;
}


.tr-meta-menu-container-main-nav {
  margin-top: 40px;
}


.tr-navigation-container-image {
max-width: 250px;
  margin: 60px auto;

}



.tr-meta-menu-container-main-nav ul li {
  list-style: none;
  text-align: center;
  margin-bottom: 16px;
}

.tr-meta-menu-container-main-nav ul li a {
  color: white;

}


@media(max-width:1024px) {
  .tr-menu-container {
    width: 100vw;

  }

  .tr-menu-container-shortcuts {

    display: flex;
  }
}


/* Trametsch Shortcut Buttons Container*/

.tr-shortcut-buttons-container {
  width: calc(100vw / 3);
  position: fixed;
  top: 0;
  right: calc(100vw / 3);
  transition: 0.3s ease-in-out;
  transform: translateX(200%);
  min-height: 100vh;
  background-color: var(--e-global-color-primary);
  z-index: 989;

}

.tr-shortcut-buttons-container-inner {
  padding: 40px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}


.nav-menu-open .tr-shortcut-buttons-container {
  transform: translateX(0);
}

.tr-shortcut-buttons-container-image {
  width: 75%;
}

.tr-offcanvas-custom-logo {
  width: 40%;
}


.tr-offcanvas-shortcut-menu-container ul li,
.tr-menu-container-shortcuts ul li {
  list-style: none;
  padding: 10px 20px;
  border: 1px solid white;
  border-radius: 1000px;
  text-align: center;
  margin-bottom: 20px;
}

.tr-offcanvas-shortcut-menu-container ul li a,
.tr-menu-container-shortcuts ul li a {
  color: white;
  text-align: center;
}





/* Off Canvas Google Maps Container*/

.tr-off-canvas-maps-container {
  width: calc(100vw / 3);
  position: fixed;
  top: 0;
  right: calc(100vw / 3 * 2);
  transition: 0.3s ease-in-out;
  transform: translateX(300%);
  min-height: 100vh;
  z-index: 988;

}

.tr-off-canvas-maps-container iframe {
  height: 100vh;
  width: 100%;
  filter: saturate(0);
}

.nav-menu-open .tr-off-canvas-maps-container {
  transform: translateX(0);
}






main {
  margin-top: 80px;
}