/* VIEWPORT <= 1000PX
========================================== */
@media screen and (max-width: 1000px) {
	.short-newsitems {column-count: 3;}
}

/* VIEWPORT <= 900PX
========================================== */
@media screen and (max-width: 900px) {
    .recepies-index {flex-basis:100%!important;}
    .short-recepy {flex-basis:100px!important;}
    .short-recepy h2 {display:none;}
    .short-recepy > .image {flex-basis:100px;min-width:100px;height:100px!important;background-size:100% 100%;}
    .short-recepy:hover .image {background-size:115% 115%;margin:0!important;}

	#header-wrapper:has(.open) {position:fixed;left:0;}	
	#nav-trigger {
		display:flex;flex-flow:column;align-items:center;
		width:30px;height:30px;
		position:absolute;z-index:2;
		top:1rem;right:1rem;
		font-size:var(--font8);}	
	#nav-trigger:after{content:"MENU";font-size:var(--font-1);margin-top:2rem;color:var(--darkRose);}
	#nav {position:absolute;top:var(--headerH);left:var(--negMarginW);
		background-color:var(--purple);	
		padding:3rem 6rem 3rem 3rem;
		margin-left:-150vw;
	  transition:margin-left .5s linear 0s;}
	.open+#nav {
		box-shadow:var(--boxShadow);
		margin-left:0;
		}
	#nav li.level1 {margin-bottom:1em;}
	#nav li.level2 {margin:1rem 0;}
	#nav a {font-size:var(--font1);font-weight:var(--fontBold);color:var(--darkRose);text-decoration:none;}
	#nav li > div {margin-left:2rem;}	
    #myprofile .myprofile {align-items:flex-start;margin-top:1rem;}
    #myprofile .myprofile li {margin-left:0;}
	
  .footer {flex-flow:column;align-items:center;text-align: center;}
	.footer .contactdata {justify-content: center;}

	.blends-wrapper:has(.blend-wrapper) {display:flex;flex-flow:row wrap;align-items: flex-start;}
	.blends-wrapper > .editwrapper {position:absolute;}
	.blends {flex-basis:var(--minW);flex-grow:1;}
	.blends-wrapper:has(.blend-wrapper) .short-blend h2, 
	.blends-wrapper:has(.blend-wrapper) .short-blend .ingredients {display:none;}
	.blend-wrapper {flex-basis:var(--minW);flex-grow:100; }	

	.paragraph-wrapper.hasimage > .image {flex-basis:80%;}
	.paragraph-wrapper:nth-child(even) > .image {order:0;}
}


/* VIEWPORT <= 800PX
========================================== */
@media screen and (max-width: 800px) {
	.multiple-gift-wrapper {
		position:relative;top:0;left:0;
		max-width:calc(100% - 2em);
	}
	.short-newsitems {column-count: 2;}
}


/* VIEWPORT <= 600PX
========================================== */
@media screen and (max-width:600px) {
	.paragraph-wrapper.usp td {font-size:95%!important;}

}

/* VIEWPORT <= 480PX
========================================== */
@media screen and (max-width: 480px) {
	.multiple-gift-wrapper {
		flex-flow:column;
	}
	.multiple-gift-wrapper .image {flex-basis:200px;width:200px;}
	.short-newsitems {column-count: 1;}
}


/* VIEWPORT > 800PX
========================================== */
@media screen and (min-width: 801px) {
	#nav {flex-grow:1;display:flex;flex-flow:row wrap;align-items:flex-end;}
	#nav > .menus {flex-grow:1;display:flex;}
	#nav a {font-size:var(--font0);}
	#nav > .menu {display:flex;flex-flow:row wrap;justify-content:flex-start;}
	#nav {pointer-events:none;margin-top:.5em}
	#nav {pointer-events:auto;}
	#nav li {list-style:none;}
	#nav ul.level1 {display:flex;flex-flow:row wrap;margin:0 -6px;}
	#nav li.level1 {margin:.5rem .75rem 0;position:relative;line-height: 1;}
	#nav .myprofile li.level1 {margin-right:0;}
	#nav a {display:block;text-decoration:none;font-size:var(--font0);}
	#nav a.level1 {text-align:center;}
	#nav li:hover {
		text-decoration:underline;
		text-underline-offset:.5em;
		text-decoration-thickness:.5em;
		text-decoration-color: var(--darkRose);}
	#nav li.level1 > div.submenu {
		background-color:var(--rose);box-shadow:var(--boxShadow);
		position:absolute;max-height:0;overflow:hidden;z-index:2;font-size:0px;
		transition:max-height .25s linear .75s, padding .25s linear .75s, font-size .125s linear .75s;}
	#nav li:hover > div.submenu {
		max-height:500px;padding:2em 3rem 1rem;
		font-size:var(--font1);
		transition:max-height .25s linear 0s, padding .25s linear 0s, font-size .25s linear 0s;}
	#nav li.level2 {margin:0 0 1.5rem;}
	#nav li.level2 a {white-space:nowrap;font-size:var(--font-1);}
	#myprofile li.level1 {margin-top:1rem}

}