/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 18-09-22 */
/* file     -> grid2v6-hgr.css */
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/mor10/pen/rzGqzr */
/* info     -> grid2v6-hgr */
/* ------------------------------------------------------------------------------ */
/* 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: red;            /* color of the counter - must be the same as card-back-background AND no transparent */
    --count-size: 2.4rem;             /* counter size - def 4rem */
    --count-pos-top:0;        /* counte rposition top - def 1rem */
    --count-pos-right: 0;        /* counter position right - def 1.2rem */
    --count-pos-bottom: 0;     /* counter position bottom - NOT IN USE */ 
    --count-pos-left: 96%;       /* counter position left - NOT IN USE */
    --count-width: 1px;             /* counter stroke - def 1px | max 3px */
    /* animation */
    --time-flip: 0.8s;              /* def 0.8s */
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 18-09-22 */
/* GRID2V6-SGE */
/* RESET COUNTER -> SEE design.css */

/* TYPO */
figure    	{margin:0;padding:0;}

h1, h2, h3  {margin:0;padding:1rem 0;text-align:center;font-weight:300;}
p           {margin:0;padding:1rem 0;}

b, strong 	{font-weight:bold;}
em, i     	{font-style:italic;}
a		   	{text-decoration:none;color:inherit;}

img         {display:block;border:0;width:100%;height:auto;aspect-ratio:16/9;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 19-09-22 */
/* SECTION */
.logo, .site-title    {text-align:center;}
.logo                 {margin-top: .3rem;font-size: 2rem;}
.site-title           {margin-top: 1rem;margin-bottom: 1rem;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 19-09-22 */
/* SPLASH SECTION */
.splash {
	padding-bottom: 2rem;
	background: #FFF6E5;
	}
.splash-content {
	padding: 1.5rem;
	}

@media screen and (min-width: 600px) {
	.splash-text {
		columns: 2;
		column-gap: 2em;
	}
	.splash-text p {
		padding-top: 0;
	}
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 19-09-22 */
/* BUCKETS SECTION */
.buckets      {padding: 2rem 1rem 1rem;background: #ccc}
.buckets ul   {margin:0;padding:0;}
.buckets li   {margin-bottom: 1rem;list-style-type:none;background: white;}
.bucket       {padding: 1.5rem;}
/* MORE SECTION */
.more         {padding: 2em;}
.more-content {padding: 1.5em;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 18-09-22 */
/* TWIN SECTION */
.sidebar      {padding: 2rem 0;background: hsl(0,0%,90%);}
/* left */
.iboxes {
	margin: 0 2rem;
	background: #2185C5;
	color: white;
	}
/* right */
.iboxes:last-of-type 
	{
	background: orange;
	}

.iboxes .ibox 		{margin:0 0 1rem 0;}
.iboxes .ibox-title {padding:.4rem;border:1px solid #ccc;border-width:0 0 1px 0;}
.iboxes .ibox p 	{padding: 1rem;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 18-09-22 */
/* article -> image -> with shadow its better to add margin/padding */
.main-area figure {position:relative;margin:0;padding:0;overflow:hidden;border:1px solid rgb(0,0,0,.1);}

/* box-shadow */
/* link		-> https://codepen.io/argyleink/pen/PoZLdJp */
/* update	-> 20-08-2021 */
/*.main-area figure {box-shadow:0 4px 16px 0 rgb(0,0,0,.4);}*/
/*.main-area figure {box-shadow: 0 1rem 2rem hsl(0 0% 0% / 20%);}*/
.main-area figure {box-shadow: 0 2.2rem 2rem -2rem hsl(200 50% 20% / 40%);}

/* image add info */
/* link -> https://codepen.io/kriztiank/pen/zejgLm */
.main-area figure figcaption {position:absolute;display:flex;/*justify-content:center;*/align-items:center;
  width:100%;
  height:2.4rem;
  padding:0 0 0 1rem;
  font-size:1.2rem;
  text-align:left;
  border:1px solid rgba(255,255,255,.8);
  border-width:1px 0 0 0;
  background:rgba(204,204,204,.8);
  color:#111;
  transition:.4s;
  cursor:default;
  }
.main-area figure:hover figcaption {margin-top:-2.4rem;} /* must be the same value as above */
/* for image copyright only */
.main-area figcaption .img-copyright {position:absolute;right:0;bottom:.2rem;padding:0 1.6rem 0 0;font-size:.8rem;}


/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 09-09-22 */
/* link -> https://codepen.io/michellebarker/pen/poVvabe */
/* IMAGES */
/* images for ibox AND abox */
.img2fit {
		position:relative;
		width:100%;
		overflow:hidden;
		}

.img2fit .img2ibox {
	aspect-ratio: 16/9;
	}
.img2fit img {
	width:100%;
	overflow:visible;
	object-fit:cover;
	transition:all .8s;
	transform:scale(1);
	}
.img2fit:hover img {
	transform:scale(1.1);
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 19-09-22 */
/* VIDEO */
/* info	-> margin botto -xrem due to figure !!! */
video {width:100%;margin:0 0 -.35rem 0;overflow:visible;object-fit:cover;aspect-ratio:16/9;border:0px solid red;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 18-09-22 */
/* COLOPHON SECTION */
.colophon {
	padding: 2rem;
	background: hsl(0, 0%, 10%);
	color: white;
	text-align: center;
}
.colophon a         {color: white;}
.colophon a:hover,
.colophon a:focus   {border-bottom: 1px solid white;}

/* flex to create a three-bucket layout */
@media screen and (min-width: 700px) {
	@supports (display:flex) {
		.buckets ul   {display:flex;justify-content:space-around;}
		.buckets li   {width: 48%;}
	}
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 19-09-22 */
/* SITE */
/* basic responsive layout for all browsers */
.site {max-width:50rem;margin: 0 auto;}

/* grid layout for modern browsers */
@supports (grid-area: auto) {
	@media screen and (min-width: 50em) {
		.site       	{display:grid;grid-template-columns: 33% auto;max-width:none;		}
		.header-area   	{grid-column: 1/3;border:1px solid red;}
		.main-area  	{grid-column: 2/3;padding: 2rem 0;}
		.sidebar    	{grid-column: 1/2;grid-row: 2/4;}
		.colophon   	{grid-column: 1/3;}
	  }
	@media screen and (min-width: 65em) {
		.site       	{grid-template-columns: 20% auto 20%;gap: 1rem;}
		.header-area   	{grid-column: 1/4;border: 1px solid #ddd;}
		.sidebar    	{display:inherit;grid-template-columns:inherit;grid-column: 1/4;grid-row: 2/3;}
		.iboxes:last-of-type {grid-column: 3/4;}
		.main-area  	{grid-row: 2;padding: 2rem 0;z-index:1;}
		.colophon   	{grid-column: 1/4;}
	}
}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 21-08-22 */
/* css-counter postion background */
/* https://stackoverflow.com/questions/43514987/css-increasing-number-as-background-images-for-css */	
.card-counter::before { 
	position:absolute;
    display:flex;
	  top:var(--count-pos-top,1.2rem);*/
  	right:var(--count-pos-right,-1.2rem);
  	bottom:var(--count-pos-bottom,0.6rem);
    left:var(--count-pos-left,1.2rem);
	justify-content:center;
    align-items:center;
    counter-increment:Element 1;
	content:counter(Element) '';
	font-size:var(--count-size,4rem); 
	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,#EE741D); /* 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 */	
/* ------------------------------------------------------------------------------ */