:root{
	--radius:20px;
	--gray6: #F2F2F2;
	--gray5: #E0E0E0;
    --gray4: #BDBDBD;
	--gray3: #828282;
    --gray2: #4F4F4F;
	--gray1: #333333;
	--braun: #520000;
	--braun1:#603314;
}

.burger-menu, .menu1_m, .menucat-mobil{display: none;}

.menu1{
	display: flex;
	align-items: center;
	gap: 10px 12px;
}

.menu1 a{
	border-right: 1px solid var(--gray4);
	padding-right: 11px;
	color: var(--braun);
	font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.menu1 a:last-child{
	border-right: 0px;
}

#menu1_v{
	position: relative;
	z-index: 99;
	list-style: none;
	margin: 0; padding: 0;
}

#menu1_v li{
	position: relative;
	display: flex;
	align-items: center;
	font-size:15px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--braun1);
	border-radius: 15px;
	padding: 10px 20px;
    min-width: 280px;
    height: 50px;
    font-weight: 600;
    cursor: text;
}

#menu1_v li::before{
	position: relative;
	content: '\2630';
	width: 30px; height: 100%;
	display: flex;
	align-items: center;
}

/*#menu1_v li a{
	width: 100%;
	font-size:16px;
	text-transform: uppercase;
	color: #fff;
	display: flex;
	align-items: center;
	text-decoration: none;
	white-space: nowrap;
	background-color: var(--braun);
	border-radius: var(--radius);
	padding: 10px 20px;
    min-width: 270px;
    height: 50px;
    font-weight: 600;
}*/

.menu1_down{
	position: absolute;
	top: 0; bottom: 0;
	margin: auto;
	right: 20px;
	height: 100%;
	display: flex;
	align-items: center;
}

.menu1_down img{
	width: 12px;
	object-fit: contain;
	filter: invert(100%);
}

.vspl-menu {
    display: none;
	position:absolute;
	top:50px; left: 0px;
	border-radius: 0 0 15px 15px;
	 margin: 0; padding: 0;
	list-style: none;
	background-color: var(--braun1);
	color: #fff;
	width: 100%;
}

#menu1_v li:hover .vspl-menu{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	-webkit-transform-origin: 50% 0 0;
            transform-origin: 50% 0 0;
    	-webkit-animation: push-in-down 0.3s;
            animation: push-in-down 0.3s;
    	-webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
}
 
@keyframes push-in-down{
	0% {transform: rotateX(-90deg); opacity: 0;}
	100% {transform: none;}
}

@-webkit-keyframes push-in-down{
    0% {-webkit-transform: rotateX(-90deg); opacity: 0;}
    100% {-webkit-transform: none;}
}

.vspl{
	display: flex;
	align-items: center;
	width: 100%;
	gap: 10px;
	color: #fff;
	padding: 18px 20px;
	text-decoration: none;
	text-transform: none;
    font-size: 16px;
    transition: 0.2s;
}

.vspl:hover{
	background-color: #fff;
	color: var(--braun);
}

.vspl img{
	object-fit: contain;
	width: 24px; height: 24px;
	filter: invert(100%);
}

.vspl:hover img{
	filter: invert(0%);
}

@media only screen and (max-width: 1100px){

	.menu1_m, .menucat-mobil{ display: inline; }
	.menu1, .menu1-vspl ul{display: none;}

	.main-catalog details{
		position: relative;
		right: auto; height: auto;
		padding: 0;
		z-index: 100; 
		padding: 16px 20px;
		border: 2px solid var(--gray5);
		width: 100%;
		border-radius: 5px;
		margin-bottom: 20px;
	}

	.main-catalog summary{
		display: flex;
		align-items: center;
		gap: 8px;
		color: rgb(48,48,48);
		font-weight: 600;
		font-size: 14px;
	}

	.main-catalog summary img{
		width: 18px; height: 18px;
		object-fit: contain;
	}

	 details .filtr{
	 	margin-top: 20px;
	 }

	#mobile-menu-all, #mobile-menucat-all {
		position:fixed; 
		top:0px; left:0px; right: 0;
		width:100%; height:70px; 
		z-index: 200; 
		margin: auto;
		padding: 0 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	#mobile-menucat-all{
		position: relative;
		right: auto; height: auto;
		padding: 0;
		background: none;
		height:50px; 
		border-bottom: 1px solid var(--gray5);
		padding-bottom: 10px;
		margin-bottom: 10px;
		z-index: 100; 
	}

	.mobile-menu-burger-all, .mobile-menucat-burger-all{
		display: flex;
		align-items: center;
		gap: 10px;
		color: rgb(48,48,48);
		font-weight: 600;
		font-size: 14px;
	}

	.mobile-menu-burger-all a, .mobile-menucat-burger-all a{
		color: rgb(48,48,48);
	}

	.burger-menu, .burger-menucat{
		position: relative; 
		cursor: pointer; 
		width:25px; height: 70px;
		display: flex;
		align-items: center;
	}

	.burger::before, .burgercat::before{top: 8px; left: 0}
	.burger::after,  .burgercat::after{bottom: 8px; left: 0}

	.burger, .burgercat,
	.burger::after, .burger::before, 
	.burgercat::after, .burgercat::before{
		content: ""; 
		position: absolute; 
		background: #000;  
		width: 25px; height: 2px;
		transition: all .3s ease-in-out; 
		-webkit-transition: all .3s ease-in-out;
		border-radius: 30px;
	}

	.burger-menu.menu-on .burger::after, 
	.burgercat-menu.menucat-on .burgercat::after{
		transform: rotate(-45deg); 
		-webkit-transform: rotate(-45deg); 
		bottom: 0px;
	}

	.burger-menu.menu-on .burger::before,
	.burgercat-menu.menucat-on .burgercat::before{ 
		transform: rotate(45deg); 
		-webkit-transform: rotate(45deg); 
		top: 0px;
	}

	.burger-menu.menu-on .burger,
	.burgercat-menu.menucat-on .burgercat{
		background: rgba(0,0,0,0);
	}

	body.menu-opened, 
	body.menucat-opened {overflow: hidden;}

	.menu-opened #mobile-menu-open, 
	.menucat-opened #mobile-menucat-open{
		transform: translate3d(0, 0, 0);
		 -webkit-animation-name: fadeIn;
	  animation-name: fadeIn;
	  -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	  }
	  @-webkit-keyframes fadeIn {
	  0% {opacity: 0;}
	  100% {opacity: 1;}
	  }
	  @keyframes fadeIn {
	  0% {opacity: 0;}
	  100% {opacity: 1;}
	  } 

	#mobile-menu-open, 
	#mobile-menucat-open {
		position: fixed;   
		top: 70px; left: 0px; bottom:0;
		transform: translate3d(-140%, 0, 0); 
		transition: transform .5s ease; 
		z-index: 200; 
		width: 380px; 
		overflow-y:scroll;
		display: flex;
		flex-direction: column;
		background: #fff;
	}

	#mobile-menucat-open{
		top: 0; bottom: auto;
	}

	.mobile-menu {
		margin: 0; padding: 0px;
		list-style: none;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
	}

	.mobile-menu li{
		border-bottom: 1px solid var(--gray5);
		width: 100%;
	}

	.mobile-menu li a{
		width: 100%;
		text-decoration:none; 
		font-size:14px;
		font-weight: 600;
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 5px 20px;
		color: rgb(48,48,48);
		gap: 10px;
	}

	.mobile-menu li:hover a, .mobile-menu #active{
		color: var(--braun1);
	}

	.mobile-menu li img{
		object-fit: contain;
		width: 18px; height: 18px;
	}

	.mobile-contact-all{
		padding-top: 30px;
		padding-left: 20px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px 0;
	}

	.mobile-contact-all hr{
		background: #dddddd;
		width: 100%; height: 1px;
		border: none;
	}


	.mobile-contact-all a{
		text-decoration: none;
		color: #000!important;
	}

	.mobile-contact{
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.mobile-contact-phone{	
		font-weight: 600;
		font-size: 20px;
	}

	.mobile-contact-social img,
	.mobile-contact-phone img{
		object-fit: contain;
		width:30px; height:30px;
	}

	.phone_m{
		font-size: 16px;
	}

	.logo_m{
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.logo_m img{
		width: auto; height: auto;
		object-fit: contain;
		max-width: 80px;
		max-height: 60px;
	}

	.logo-korzinaopt-all img{
		max-width: 100px!important;
	}

	.phone_m{
		text-align: right;
	}

	.logo_m a, .phone_m a{
		text-decoration: none;
	}

	.mobile-menu-social{
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.mobile-menu-social img{
		object-fit: contain;
		width: 35px; height: 35px;
	}

	#mobile-menu-all .search-link{
		width: 100%;
		box-shadow: 0 1px 9px rgba(0, 0, 0, 0.17);
		min-height: 70px;
		border: none;
		padding: 0px 20px;
		border-radius: 0;
		border-top: 1px solid var(--gray5);
		flex: 0;
	}

	#mobile-menu-all .search-link input{
		background: none;
		min-height: 70px;
		border: none;
		font-weight: 600;
		font-size: 14px;
	}

	#mobile-menu-all .search-img{
		background: none;
		border-radius: 0;
	}

	#mobile-menu-all .search-img img{
		filter: invert(0%);
		opacity: 0.7;
		width: 18px; height: 18px;
	}

	.menu-opis{
		display: grid;
		grid-template-columns: 50% 50%;
		align-items: center;
	}

	.menu-opisa{
		background-color: var(--gray6);
		cursor: pointer;
		color:var(--gray3);
		font-size: 13px;
		font-weight: 600;
		text-transform: uppercase;
		transition: 0.3s;
		min-height: 55px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 2px solid transparent;
	}

	.menu-opisa:hover, .menu-opisaactive{
		background-color: var(--gray5);
		border-bottom: 2px solid var(--braun1);
		color:var(--gray2);
	}

	.menu-podrobno span{
		display: none;
	}

}

@media only screen and (max-width: 599px){

	#mobile-menu-open {
		width: 100%;
	}

}

@media only screen and (max-width: 499px){

	.logo_m img{
		max-width: 60px;
	}

}

@media only screen and (max-width: 399px){

	.mobile-menu-burger-all, .mobile-menucat-burger-all{
		font-size: 12px;
	}

}