/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 21-08-22 */
/* file     -> simplebox.css */
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/vincesamoy/pen/EymxOx */
/* info     -> simplebox with auto-counter as background slide-hover-effect */
/* ------------------------------------------------------------------------------ */
/* 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: #fff;         /* color of the counter - must be the same as card-back-background AND no transparent */
    --count-size: 4rem;             /* counter size - def 4rem */
    --count-pos-top: 1.2rem;         /* counte rposition top - def 1rem */
    --count-pos-right: 2rem;      /* counter position right - def 1.2rem */
    --count-pos-bottom: 0.6rem;     /* counter position bottom - NOT IN USE */ 
    --count-width: 2px;             /* counter stroke - def 1px | max 3px */
    /* animation */
    --time-flip: 0.8s;              /* def 0.8s */
	}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 21-08-22 */
/* CARDS */
.cards {
    display:grid;
    }

.icon-white {
	color:#fff;
    }

/* flex container */
.flex-container {
	display:flex;
    -webkit-flex-flow:row wrap;
    position:relative;
    gap: 1rem;
    counter-reset:Element; /* reset must be here */
    color: #fff;
	justify-content:space-around;
    list-style:none;
    }
.flex-item {
    position:relative;
    width:256px;
	height:256px;
	/*padding:0;*/
    
    }
.flex-item-inner {
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
    width:99%;
    height:250px;
	margin:0;
	padding:0;
    }
.flex-container a {
    position:relative;
    display:block;
    height:100%;
	color: #fff;
	}

.flex-container .flex-item:focus a::after,
.flex-container .flex-item:hover a::after {
	opacity:1;
	/*-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);*/
	transform:translate3d(0,0,0);
    }

.flex-container .flex-item .tile-primary-content,
.flex-container .flex-item .tile-secondary-content {
	position:absolute;
    top:0;
    right:0;
    bottom:0;
	left:0;
    padding:24px;
	overflow:hidden;
    }
.flex-container .flex-item .tile-primary-content {
	display:flex;
	flex-direction:column;
    }

.flex-container .flex-item .tile-primary-content i.tile-icon {
	display: block;
	margin: 10px auto 20px auto;
    text-align: center;
}
.flex-container .flex-item .tile-primary-content h4 {
	font-size: 18px;
	font-weight: normal;
	margin: 10px 0;
}
.flex-container .flex-item .tile-primary-content p.detail {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 10px 0;
}
.flex-container .flex-item .tile-primary-content p.link {
	align-self: flex-end;
	/*-webkit-align-self: flex-end;*/ 
	margin: auto 0 0 0;
    }

.line-ani {
    margin: .5rem 0;
    border: 1px solid rgba(255,255,255,1);
    border-width: 0 0 1px 0;
    }

.flex-container .flex-item:focus .tile-primary-content h4,
.flex-container .flex-item:hover .tile-primary-content h4,
.flex-container .flex-item:focus .tile-primary-content p.detail,
.flex-container .flex-item:hover .tile-primary-content p.detail,
.flex-container .flex-item:focus .tile-primary-content p.link,
.flex-container .flex-item:hover .tile-primary-content p.link {
	/*-moz-transform: translate3d(150%, 0, 0);
	-webkit-transform: translate3d(150%, 0, 0);*/
	transform: translate3d(150%, 0, 0);
	/*-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);*/
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
}
.flex-container .flex-item .tile-primary-content h4,
.flex-container .flex-item .tile-primary-content p.detail,
.flex-container .flex-item .tile-primary-content p.link {
	/*-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);*/
	transform: translate3d(0, 0, 0);
	/*-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition-delay: 150ms;*/
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
}
.flex-container .flex-item .tile-secondary-content {
	opacity: 0;
	/*-moz-transition: opacity 250ms ease-out;
	-o-transition: opacity 250ms ease-out;
	-webkit-transition: opacity 250ms ease-out;*/
	transition: opacity 250ms ease-out;
}
.flex-container .flex-item .tile-secondary-content p {
	color: #000;
    font-size: .8rem;
	opacity: 1;
	/*-moz-transform: translate3d(-150%, 0, 0);
	-webkit-transform: translate3d(-150%, 0, 0);*/
	transform: translate3d(-150%, 0, 0);
	/*-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);*/
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1);
    }
.flex-container .flex-item:focus .tile-secondary-content p,
.flex-container .flex-item:hover .tile-secondary-content p {
	/*-moz-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);*/
	transform: translate3d(0, 0, 0);
	/*-moz-transition: -moz-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-o-transition: -o-transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
	-webkit-transition: -webkit-transform 300ms cubic-bezier(0, 0, 0.4, 1);
	-webkit-transition-delay: 150ms;*/
	transition: transform 300ms cubic-bezier(0, 0, 0.4, 1) 150ms;
    }

.flex-container .flex-item .tile-secondary-content p {
	color: #fff;
    }
.flex-container .flex-item .tile-secondary-content p.title {
	font-size:18px;
	margin-top:90px;
    }

.flex-container .flex-item:focus h4,
.flex-container .flex-item:focus p.detail,
.flex-container .flex-item:focus p.link,
.flex-container .flex-item:focus .tile-secondary-content,
.flex-container .flex-item:hover h4,
.flex-container .flex-item:hover p.detail,
.flex-container .flex-item:hover p.link,
.flex-container .flex-item:hover .tile-secondary-content {
	opacity:1;
    }

.flex-container .flex-item.bg-violet .tile-primary-content  {background: #702082;}
.flex-container .flex-item.bg-magenta .tile-primary-content {background: #c110a0;}
.flex-container .flex-item.bg-blue .tile-primary-content    {background: #00a0d2;}
.flex-container .flex-item.bg-green .tile-primary-content   {background: #00c389;}
.flex-container .flex-item.bg-dblue .tile-primary-content   {background: #0074D9;}
.flex-container .flex-item.bg-teal .tile-primary-content    {background: #39CCCC;}
.flex-container .flex-item.bg-aqua .tile-primary-content    {background: #7FDBFF;}
.flex-container .flex-item.bg-orange .tile-primary-content  {background: #FF851B;}
.flex-container .flex-item.bg-red .tile-primary-content     {background: #FF4136;}

/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 21-08-22 */
/* css-counter postion background */
/* https://stackoverflow.com/questions/43514987/css-increasing-number-as-background-images-for-css */	
.flex-item::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);*/
	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 */	
/* ------------------------------------------------------------------------------ */