/* Common styles of menus */

.dl-menuwrapper
{
	width: 100%;
/*	height: 100%; */
/*	max-width: 300px */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 80px;
	left: 0;
	margin: auto;
	perspective: 1000px;
	perspective-origin: 50% 200%;
	overflow-x: hidden;
}

.dl-menuwrapper a
{
	color: var(--root_color_dark); /* dziedzicza po tym wszystkie a nizszych poziomow */
	display: inline-block;
	display: block;
	position: relative;
	padding: 13px 20px 13px 20px;
	word-break: break-word;
	line-height: 1.375;
	border-radius: 12px;
}

.dl-menuwrapper ul
{
	display: block;
	list-style: none;
	transform-style: preserve-3d;
}

.dl-menuwrapper li
{
	position: relative;
}

.dl-menuwrapper li.menu-item:not(.dl-subview):not(.dl-subviewopen)
{
	padding: 0 var(--global_padding) 0 var(--global_padding);
}

.dl-menuwrapper li.menu-item:not(.dl-subview):not(.dl-subviewopen):last-of-type
{
	padding-bottom: 40px;
}

.dl-menuwrapper li.dl-start
{
	height: var(--global_header_height);
/*	background: #ffffff; */
/*	border-bottom: 2px solid #eaeaea; */
	margin: 0 0 30px 0;
	margin-bottom: 0;
	margin-left: var(--global_padding);
}

.dl-menuwrapper li.dl-start > div
{
	margin: 0 72px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	margin-right: var(--global_padding);
}

.dl-menuwrapper li.dl-start > div span
{
	display: block;
}

.dl-menuwrapper li.dl-start > div .logo
{
	min-width: 126px;
	height: 25px;
	min-width: 164px;
	height: 34px;
	position: relative;
/*	margin-left: var(--global_padding); */
}

.dl-menuwrapper li.dl-start > div .logo::after
{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	height: 100%;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='500px' height='107.488px' viewBox='0 0 500 107.488' enable-background='new 0 0 500 107.488' xml:space='preserve'%3e%3cpolygon fill='%23F2460A' points='205.939,36.146 191.982,36.146 176.294,56.677 166.683,56.677 166.683,9.777 154.958,9.777 154.958,96.501 166.683,96.501 166.683,67.924 174.989,67.924 192.815,96.501 206.532,96.501 185.788,62.75 '/%3e%3crect x='208.881' y='9.777' fill='%23F2460A' width='11.725' height='86.724'/%3e%3crect x='230.906' y='36.146' fill='%23F2460A' width='11.725' height='60.354'/%3e%3cpath fill='%23F2460A' d='M236.769,9.09c-4.914,0-8.567,3.631-8.567,8.567c0,4.936,3.63,8.544,8.567,8.544s8.544-3.75,8.544-8.544 C245.313,12.863,241.681,9.09,236.769,9.09z'/%3e%3cpolygon fill='%23F2460A' points='305.098,36.146 291.143,36.146 275.431,56.677 265.842,56.677 265.842,9.777 254.117,9.777 254.117,96.501 265.842,96.501 265.842,67.924 274.15,67.924 291.973,96.501 305.691,96.501 284.924,62.75 '/%3e%3cpath fill='%23F2460A' d='M375.304,35.102c-10.324,0-16.282,5.387-19.344,9.375c-3.987-5.625-10.538-9.375-18.63-9.375 c-7.266,0-13.601,3.394-16.4,8.663v-7.618h-11.725v60.354h11.725v-35.86c0-8.57,5.623-14.526,13.718-14.526 c8.093,0,13.598,5.504,13.598,14.526v35.86h11.725v-35.86c0-8.57,5.744-14.526,13.837-14.526c8.094,0,13.6,5.504,13.6,14.526v35.86 h11.725V57.815c0-12.651-9.85-22.737-23.781-22.737L375.304,35.102z'/%3e%3cpath fill='%23F2460A' d='M429.558,35.102c-14.286,0-21.787,8.782-24.493,16.281l9.257,4.678c1.518-4.464,5.862-10.421,15.118-10.421 s14.882,6.573,14.882,12.294v0.714l-17.824,1.161c-13.6,0.948-20.982,8.57-20.982,19.107c0,10.538,8.783,18.749,20.862,18.749 c7.737,0,14.764-3.275,17.921-8.095v6.907h11.604V58.383c0-11.486-9.256-23.329-26.367-23.329L429.558,35.102z M444.558,72.245 c0,7.855-6.336,15.118-16.994,15.118c-5.862,0-10.324-3.273-10.324-8.662c0-5.742,4.344-8.663,10.088-9.02l17.23-1.164v3.751V72.245 z'/%3e%3cpath fill='%23F2460A' d='M472.112,9.09c-4.911,0-8.542,3.631-8.542,8.567c0,4.936,3.631,8.544,8.542,8.544 c4.915,0,8.545-3.75,8.545-8.544C480.656,12.863,477.027,9.09,472.112,9.09z'/%3e%3crect x='466.249' y='36.146' fill='%23F2460A' width='11.725' height='60.354'/%3e%3crect x='488.276' y='9.777' fill='%23F2460A' width='11.725' height='86.724'/%3e%3cpath fill='%23F2460A' d='M0,62.894V87.79c0,10.895,8.83,19.698,19.699,19.698h75.568c1.734,0,3.419-0.236,5.032-0.663L0,32.112 v30.806V62.894z'/%3e%3cpath fill='%23F2460A' d='M0,32.112h114.991c-63.275,27.861-18.419,70.822-14.668,74.713c8.449-2.229,14.691-9.897,14.691-19.035 V32.112C86.51,10.704,72.246,0,57.863,0S29.004,10.704,0,32.112z'/%3e%3c/svg%3e");
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: contain;
}

.dl-menuwrapper li.dl-start > div .menu
{
	text-align: center;
	padding: 0 20px 0 20px;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	display: none;
}

.dl-menuwrapper li.dl-back
{
	height:  var(--global_header_height);
/*	background-color: var(--root_color_white); */
/*	border-bottom: 2px solid #eaeaea; */
	margin: 0 0 30px 0;
	margin-bottom: 0;
	margin-left: var(--global_padding);
	cursor: pointer;
}

.dl-menuwrapper li.dl-back > div
{
/*	margin: 0 72px 0 0; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.dl-menuwrapper li.dl-back > div .arrow
{
	min-width: 29px;
	height: 29px;
	cursor: pointer;
/*	background-color: #e2e3e2; */
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dl-menuwrapper li.dl-back > div .arrow::after
{
	content: '';
	display: block;
	width: 29px;
	height: 20px;
/*	transform: rotate(45deg); */
	margin-left: 6px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='29' height='20' viewBox='0 0 29 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M25.4141 10.5001L3.75586 10.5001' stroke='black' stroke-width='2'/%3e%3cpath d='M10.7344 17.4778L3.75677 10.5002L10.7344 3.52257' stroke='black' stroke-width='2'/%3e%3c/svg%3e");
}

.dl-menuwrapper li.dl-back > div .name
{
	text-align: left;
	padding: 0 20px 0 10px;
	width: 100%;
	font-size: var(--global_font_size_p_small);
	font-weight: 500;
	word-break: break-word;
}

.dl-menuwrapper > .sub-menu > li > a /* dla skaczacego znaczku eco */
{
	display: inline-flex;
	align-items: center;
}

.dl-menuwrapper li.products_category a
{
	display: inline-flex;
	align-items: center;
}

.dl-menuwrapper ul.sub-menu li.menu-item-object-produkt_post a.is_see_all
{
	display: none;
}
 
.dl-menuwrapper ul.sub-menu li.menu-item-object-produkt_post:nth-of-type(2) a.is_see_all
{
	display: inline-flex;
	width: 100%;
	font-family: Arial, Helvetica, sans-serif;
	margin-bottom: 20px;
}

.dl-menuwrapper li.menu-item-has-children > a
{
	width: 100% !important;
	display: flex;
	padding-right: 50px;
	position: relative;
}

.dl-menuwrapper li.menu-item-has-children > a::after
{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 20px;
	width: 9px;
	height: 9px;
	border-top: 2px solid #171716;
	border-right: 2px solid #171716;
	margin: -3px 0 0 0;
	transform: rotate(45deg);
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dl-menuwrapper li.menu-item-has-children:hover > a::after
{
/*	border-top: 2px solid #fd5900;
	border-right: 2px solid #fd5900; */
}

.dl-menuwrapper li a:not(.logo):hover
{
	background-color: #f6f0e7;
}

.dl-menuwrapper li a span /* eco */
{
	order: 1;
	align-self: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
/*	font-size: 18px; */
	color: #1e8d2d;
/*	color: #24b33b; */
	display: inline-block;
	margin: 0 0 0 6px;
/*	margin: 0 0 0 6px; */
}

.dl-menuwrapper .dl-menu
{
	position: absolute;
	width: 100%;
/*	opacity: 0; */
/*	visibility: hidden; */
	pointer-events: none;
	transform: translate(0, 0);
	backface-visibility: hidden;
}

.dl-menuwrapper .dl-menu.dl-menu-toggle
{
	transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.dl-menuwrapper .dl-menu.dl-menuopen
{
/*	opacity: 1; */
/*	visibility: visible; */
	pointer-events: auto;
	transform: translate(0, 0);
}

/* Hide the inner submenus */
.dl-menuwrapper li .sub-menu
{
	display: none;
}

.no-touch .dl-menuwrapper li a:hover
{
/*	color: #fd5900; */
}

/* 
When a submenu is openend, we will hide all li siblings.
For that we give a class to the parent menu called "dl-subview".
We also hide the submenu link. 
The opened submenu will get the class "dl-subviewopen".
All this is done for any sub-level being entered.
*/
.dl-menu.dl-subview li,
.dl-menu.dl-subview li.dl-subviewopen > a,
.dl-menu.dl-subview li.dl-subview > a
{
	display: none;
}

.dl-menu.dl-subview li.dl-subview,
.dl-menu.dl-subview li.dl-subview .sub-menu,
.dl-menu.dl-subview li.dl-subviewopen,
.dl-menu.dl-subview li.dl-subviewopen > .sub-menu,
.dl-menu.dl-subview li.dl-subviewopen > .sub-menu > li
{
	display: block;
}

/* Dynamically added submenu outside of the menu context */
.dl-menuwrapper > .sub-menu
{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

/* Animation classes for moving out and in */

.dl-menu.dl-animate-out-1 {
	animation: MenuAnimOut1 0.4s;
}

.dl-menu.dl-animate-out-2 {
	animation: MenuAnimOut2 0.3s ease-in-out;
}

.dl-menu.dl-animate-out-3 {
	animation: MenuAnimOut3 0.4s ease;
}

.dl-menu.dl-animate-out-4 {
	animation: MenuAnimOut4 0.4s ease;
}

.dl-menu.dl-animate-out-5 {
	animation: MenuAnimOut5 0.4s ease;
}

@keyframes MenuAnimOut1 {
	0% { }
	50% {
		transform: translateZ(-250px) rotateY(30deg);
	}
	75% {
		transform: translateZ(-372.5px) rotateY(15deg);
		opacity: .5;
	}
	100% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
}

@keyframes MenuAnimOut2 {
	0% { }
	100% {
		transform: translateX(-100%);
		opacity: 0;
	}
}

@keyframes MenuAnimOut3 {
	0% { }
	100% {
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut4 {
	0% { }
	100% {
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes MenuAnimOut5 {
	0% { }
	100% {
		transform: translateY(40%);
		opacity: 0;
	}
}

.dl-menu.dl-animate-in-1 {
	animation: MenuAnimIn1 0.3s;
}

.dl-menu.dl-animate-in-2 {
	animation: MenuAnimIn2 0.3s ease-in-out;
}

.dl-menu.dl-animate-in-3 {
	animation: MenuAnimIn3 0.4s ease;
}

.dl-menu.dl-animate-in-4 {
	animation: MenuAnimIn4 0.4s ease;
}

.dl-menu.dl-animate-in-5 {
	animation: MenuAnimIn5 0.4s ease;
}

@keyframes MenuAnimIn1 {
	0% {
		transform: translateZ(-500px) rotateY(0deg);
		opacity: 0;
	}
	20% {
		transform: translateZ(-250px) rotateY(30deg);
		opacity: 0.5;
	}
	100% {
		transform: translateZ(0px) rotateY(0deg);
		opacity: 1;
	}
}

@keyframes MenuAnimIn2 {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn3 {
	0% {
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn4 {
	0% {
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes MenuAnimIn5 {
	0% {
		transform: translateY(40%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .sub-menu.dl-animate-in-1 {
	animation: SubMenuAnimIn1 0.4s ease;
}

.dl-menuwrapper > .sub-menu.dl-animate-in-2 {
	animation: SubMenuAnimIn2 0.3s ease-in-out;
}

.dl-menuwrapper > .sub-menu.dl-animate-in-3 {
	animation: SubMenuAnimIn3 0.4s ease;
}

.dl-menuwrapper > .sub-menu.dl-animate-in-4 {
	animation: SubMenuAnimIn4 0.4s ease;
}

.dl-menuwrapper > .sub-menu.dl-animate-in-5 {
	animation: SubMenuAnimIn5 0.4s ease;
}

@keyframes SubMenuAnimIn1 {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn2 {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn3 {
	0% {
		transform: translateZ(-300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn4 {
	0% {
		transform: translateZ(300px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0px);
		opacity: 1;
	}
}

@keyframes SubMenuAnimIn5 {
	0% {
		transform: translateZ(-200px);
		opacity: 0;
	}
	100% {
		transform: translateZ(0);
		opacity: 1;
	}
}

.dl-menuwrapper > .sub-menu.dl-animate-out-1 {
	animation: SubMenuAnimOut1 0.4s ease;
}

.dl-menuwrapper > .sub-menu.dl-animate-out-2 {
	animation: SubMenuAnimOut2 0.3s ease-in-out;
}

.dl-menuwrapper > .sub-menu.dl-animate-out-3 {
	animation: SubMenuAnimOut3 0.4s ease;
}

.dl-menuwrapper > .sub-menu.dl-animate-out-4 {
	animation: SubMenuAnimOut4 0.4s ease;
}

.dl-menuwrapper > .sub-menu.dl-animate-out-5 {
	animation: SubMenuAnimOut5 0.4s ease;
}

@keyframes SubMenuAnimOut1 {
	0% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(50%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut2 {
	0% {
		transform: translateX(0%);
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut3 {
	0% {
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		transform: translateZ(-300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut4 {
	0% {
		transform: translateZ(0px);
		opacity: 1;
	}
	100% {
		transform: translateZ(300px);
		opacity: 0;
	}
}

@keyframes SubMenuAnimOut5 {
	0% {
		transform: translateZ(0);
		opacity: 1;
	}
	100% {
		transform: translateZ(-200px);
		opacity: 0;
	}
}

/* No JS Fallback */
.no-js .dl-menuwrapper .dl-menu {
	position: relative;
	opacity: 1;
	transform: none;
}

.no-js .dl-menuwrapper li .sub-menu {
	display: block;
}

.no-js .dl-menuwrapper li.dl-back {
	display: none;
}

.no-js .dl-menuwrapper li > a:not(:only-child) {
	background: rgba(0,0,0,0.1);
}

.no-js .dl-menuwrapper li > a:not(:only-child):after {
	content: '';
}

@media screen and (max-width: 800px)
{
	.dl-menuwrapper li.menu-item:not(.dl-subview):not(.dl-subviewopen)
	{
	/*	padding: 10px 20px 10px 20px; */
	}
}

@media screen and (max-width: 480px)
{
	.dl-menuwrapper li.menu-item:not(.dl-subview):not(.dl-subviewopen)
	{
	/*	padding: 10px 15px 10px 15px; */
	}
}