/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 17-10-2022
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/Kseso/pen/YqPLWy */
/* info     -> menu-21-greedy */
/* ------------------------------------------------------------------------------ */
/* ROOT and VARIBLES */
:root {
	--hover-bgr:hsla(210,100%,56%,1);
    
    /* cards */
    --card-front-col: rgba(0,0,0,.6); /* black, gray OR client-color */
    --card-front-bgr: #fff;
    --card-back-col: #fff;
    --card-back-bgr: #EE741D;
    --card-ibox-hgt: 14rem;         /* min-height of the card - depends of the text card-back - def 14rem */
    --card-body-bdr: 1px solid rgba(0,0,0,.05);     /* border - def 1px */
    /* grid-area */
    --grid-area-gap: 1rem;          /* gap between flipboxes - def 1rem | min .3rem - check used shadow */
    --grid-area-pad: 1rem;          /* padding - check card-border-radius - def 1rem | min .3rem */
    --grid-area-bgr: none;          /* background - def none */
    --grid-area-bdr: 0px solid rgba(0,0,0,.25);     /* border - def 0px  */
    --grid-area-rad: 0rem;          /* border-radius - def 0rem */
    /* counter - card-front */ 
    --count-color: rgb(255,255,255,1);  /* color of the counter - must be the same as card-back-background AND no transparent */
    --count-size: 2.2rem;                 /* counter size - def 4rem */
    --count-pos-top:1.4rem;                  /* counter position top - def 1rem */
    /*--count-pos-right:1rem;             /* counter position right - def 1.2rem */
    --count-pos-left:1rem;       /* counter position left - NOT IN USE */
    /*--count-pos-bottom: -70%;     /* counter position bottom - NOT IN USE */ 
    --count-width: 1px;             /* counter stroke - def 1px | max 3px */
    /* animation */
    --time-flip: 0.8s;              /* def 0.8s */
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 16-10-22 */
/* RESET COUNTER -> SEE design.css */
/* MENU21-GREEDY */

html {
	box-szing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	background: #fafafa;
	padding: 0 2rem 2rem;
	color: #223;
}

nav {
	font-size: .8rem;
	box-shadow: 0 1px 2px rgba(19, 51, 61, 0.5);
	margin: 0 0 3rem;
	padding: 0 0 0 1em;
	height: 75px; /* Menu height */
	overflow: hidden; /* Don't show anything outside the nav */
}

nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	max-height: 150px; /* Menu height x 2 */
	position: relative; /* Position the menu button relative to this item */
	text-align: center;
}

nav li {
	display: inline-block;
}
nav li:hover {
}

nav a {
	background-color: #FFF;
	display: block;
	padding: 0 1em;
	color: #444;
	font-weight: 700;
	letter-spacing: 2px;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 75px; /* Menu height */
	height: 75px; /* Menu height */
}
nav a:hover {
	background: var(--card-back-bgr);
  color: #fff;
}

nav li:last-child { /* The menu button */
	position: absolute; /* Move the menu button out of flow */
	right: 0;
	bottom: 81px; /* Move upwards, the same distance as the menu height */
	background: #fff;
	box-shadow: -.2rem 0 .5rem rgba(0,0,0,.7), -.4rem 0 .5rem rgba(0,0,0,.3);
	padding: 0 1em;
}

nav li:nth-last-child(2) { /* The close button */
	display: none;
}

#menu:target {
	height: auto;
	padding: 0;
	overflow: visible;
	box-shadow: 0 0;
}

#menu:target ul {
	max-height: 10vh;
	height: auto;
	text-align: left;
}

#menu:target li {
	display: block;
}
#menu:target a {
	background:#ccc;
	color: #fff;
	display: block;
	height: 3rem;
	line-height: 3rem;
	transition: .4s
}

#menu:target a:hover {
	background: var(--card-back-bgr);
	color: #fff;
	text-indent: 2rem;
}

#menu:target li:last-child {
	display: none;
}

#menu:target li:nth-last-child(2) {
	background: #fff;
	position: absolute;
	top: 0;
	right: -2px;
	margin: 0;
}
#menu:target li:nth-last-child(2) a {
	background: inherit;
	color: #ccc;
}
#menu:target ~ * {
	display: none;
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 21-08-22 */
/* css-counter postion background */
/* https://stackoverflow.com/questions/43514987/css-increasing-number-as-background-images-for-css */	
.box-counter::before { 
	position:absolute;
  display:flex;
	top:var(--count-pos-top,1.2rem);
  /*right:var(--count-pos-right);*/
  /*bottom:var(--count-pos-bottom);*/
  left:var(--count-pos-left);
	justify-content:center;
  align-items:center;
  counter-increment:Element 1;
	content:counter(Element) '';
	font-size:var(--count-size); 
	font: 800 Arial;
	  -webkit-text-fill-color:transparent; /* works FF, Chrome and Edge */
	  -webkit-text-stroke:var(--count-width,1px);
	  -webkit-font-smoothing:antialiased;
	color:var(--count-color); /* must be the same color als card-back background */
    opacity:1;
	/*z-index:999;*/
	}
/* shadow */
/*
.shadow, .flex-item {
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}
*/	
/* ------------------------------------------------------------------------------ */
/* END */	
/* ------------------------------------------------------------------------------ */