/* GP DESKTOP NAVI */
@media (min-width: 1024px) {
	.navigation-branding img {
		max-height: 80px;
	}
}

/* HOME HEADER MOBILE */
@media (max-width: 1024px) {
	.home .main-navigation {
		background-color: transparent;
	}

	.home .main-navigation.slideout-navigation {
		background-color: var(--contrast);
	}
}

/* OFF CANVAS */
#generate-slideout-menu {
  overflow-x: hidden;
}

@media (min-width: 768px) {
	body {
		--gp-slideout-width: 50vw;
	}
}

@media (max-width: 767px) {
	body {
		--gp-slideout-width: 75vw;
	}
}

/* Slideout Icon */
.menu-bar-item.slideout-toggle svg {
	font-size: 4em;
	padding: .1em;
	transform: translatey(.5rem);
	fill: var(--contrast);
	background-color: var(--base-3);
}

.home .main-navigation:not(.navigation-stick) .menu-bar-item.slideout-toggle svg {
	fill: var(--base-3);
	background-color: var(--contrast);
}

@media (min-width: 1024px) {
	.slideout-overlay {
		background-color: rgba(0, 0, 0, 0.95);
		background-image: url(/wp-content/uploads/Logo-Bild-Horsemotors-wht-web.svg);
		background-repeat: no-repeat;
		background-position: 17% 50%;
		background-size: 25%;
		#width: calc(100% - var(--gp-slideout-width));
		left: -50%;
		transition: visibility 0.2s ease 0s, opacity 0.2s ease 0s, left .57s ease 0s;
	}

	.offside-js--is-open .slideout-overlay {
		left: 0;
	}

}

.main-navigation.slideout-navigation {
	display: flex;
	justify-content: center;
	align-items: center;
}

.slideout-navigation.main-navigation .main-nav ul li a {
    font-size: clamp(1.625rem, -1.375rem + 6.25vw, 2.625rem);
}

.slideout-navigation.main-navigation .main-nav ul ul li a {
    font-size: clamp(1.3125rem, 0.5625rem + 1.5625vw, 1.5625rem);
}
	
.slideout-navigation button.slideout-exit {
	width: 5.2rem;
	position: fixed;
	font-size: 2.6rem;
	top: .5rem;
	left: .5rem;
}

@media (max-width: 767px) {
	.slideout-navigation button.slideout-exit {
		width: auto;
		font-size: 1.6rem;
		left: auto;
		right: 0rem;
	}
}

@media (pointer: fine) {
    .main-navigation.slideout-navigation.is-open ul li {
        transition: padding-left .35s ease-in-out;
    }

    .main-navigation.slideout-navigation.is-open ul li:hover {
        padding-left: 15px;
    }

    .main-navigation.slideout-navigation.is-open ul ul li:hover {
        padding-left: 0px;
    }
}

/* SUBE MENU */
#generate-slideout-menu.main-navigation .main-nav ul ul {
	box-shadow: none;
	border-left: 1px solid;
	margin-left: 20px;
}

.main-navigation.slideout-navigation.is-open ul ul li a {
	padding: 8px 0px 8px 20px;
}

#generate-slideout-menu.main-navigation ul ul.toggled-on {
	margin-bottom: 1em;
}

/* SLIDEOUT ANIMATION */
.slideout-navigation .main-navigation .main-nav>ul {
	margin-left: 50%;
	width: 100%;
	max-width: 445px;
	transform: translatex(-50%);
}

.main-navigation.slideout-navigation.is-open ul li {
	animation: slideoutItems .5s 0s ease-in-out backwards;
}

.main-navigation.slideout-navigation.is-open ul ul li {
	margin-left: 0;
	transform: translatex(0);
	animation: none;
}

@media (max-width: 1024px) {
	.main-navigation.slideout-navigation.is-open ul li {
		transform: translatex(0);
	}
}

.slideout-navigation.is-open .slideout-menu li:nth-child(2) {
	animation-delay: .03s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(3) {
	animation-delay: .06s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(4) {
	animation-delay: .09s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(5) {
	animation-delay: .12s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(6) {
	animation-delay: .15s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(7) {
	animation-delay: .18s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(8) {
	animation-delay: .21s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(9) {
	animation-delay: .24s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(10) {
	animation-delay: .27s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(11) {
	animation-delay: .3s;
}

.slideout-navigation.is-open .slideout-menu li:nth-child(12) {
	animation-delay: .33s;
}

@keyframes slideoutItems {
	from {
		opacity: 0;
		transform: translatex(calc(50% + 60px));
	}
}

/* SUB MENU ANIMATION */
#generate-slideout-menu.main-navigation .main-nav ul ul {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.75s ease-in-out;
  height: unset;
}

#generate-slideout-menu.main-navigation ul ul.toggled-on {
  max-height: 1000px;
}

/* NAVI LOGO */
.navigation-branding img, .site-logo.mobile-header-logo img {
    filter: invert(1);
}