/* ------------------------------------------------------------------------------ */
/* ------------------------------------------------------------ 6.0/00 - 11-10-2022
/* colors   -> #EE741D | rgba(238,116,29) | hsla(25,86%,53%) */
/* ------------------------------------------------------------------------------ */
/* link     -> https://codepen.io/josetxu/pen/wvpEEyr */
/* info     -> image2details */
/* ------------------------------------------------------------------------------ */
/* 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 - 11-10-22 */
/* RESET COUNTER -> SEE design.css */
/* IMAGE2DETAILS */

:root {
	--tst: all 0.5s ease 0s;
}

body {
/*  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, serif; */
  background-color: #d9d9d9;
  background-image: linear-gradient(314deg, #d9d9d9 0%, #efefef 74%);
}

.container {
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
}

.gallery {
  margin:0;
  padding:0;
  counter-reset:Element; /* reset must be here */
}

.gallery li {
  position:relative;
  top:0;
  right:0;
  left:0;
  bottom:0;
  width: calc(25vw - 7em); /* min 2.5em */ 
  height: calc(50vh - 7vh); /* min 3em -> problem bottom no much height */
  /*box-sizing: border-box;*/
  margin: 2em 0 0 2em;
  transition:var(--tst);
  float:left;
  list-style:none;
  box-shadow: #0004 0px 0.0625em 0.0625em, #0004 0px 0.125em 0.5em, #ffffff1a 0px 0px 0px 1px inset;
}

.gallery li:hover {
  transform:scale(1.35);
  z-index:333;
  transition:var(--tst);
  box-shadow: #0000004d 0px 1.9vmin 3.8vmin, #0004 0 1.5vmin 1.2vmin;
}

.gallery li:nth-child(1):hover {transform-origin: 0 0;}
.gallery li:nth-child(2):hover, .gallery li:nth-child(3):hover {transform-origin: 50% 0;}
.gallery li:nth-child(4):hover {transform-origin: 100% 0;}
.gallery li:nth-child(5):hover {transform-origin: 0 100%;}
.gallery li:nth-child(6):hover, .gallery li:nth-child(7):hover {transform-origin: 50% 100%;}
.gallery li:nth-child(8):hover {transform-origin: 100% 100%;}

/* IMAGES 500x500 */
.image {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 512px;
  max-height: 512px;  
  margin: auto;  
  border: 0.15em solid #fff;
  /*box-sizing: border-box;*/
  border-radius: 0.15em;
  background-size: cover !important;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ffffff;
  overflow: hidden;

}

.gallery li:nth-child(1) .image {background-image: url('../content/image-01-1280.webp');background-position: center 10%;}
.gallery li:nth-child(2) .image {background-image: url('../content/image-02-1280.webp');background-position: right 40%;}
.gallery li:nth-child(3) .image {background-image: url('../content/image-03-1280.webp');background-position: 70% 25%;}
.gallery li:nth-child(4) .image {background-image: url('../content/image-04-1280.webp');background-position: center 20%;}
.gallery li:nth-child(5) .image {background-image: url('../content/image-05-1280.webp');}
.gallery li:nth-child(6) .image {background-image: url('../content/image-06-1280.jpg');background-position: right 75%;}
.gallery li:nth-child(7) .image {background-image: url('../content/image-07-1280.jpg');background-position: right 20%;}
.gallery li:nth-child(8) .image {background-image: url('../content/image-08-1280.jpg');background-position: center 10%;}

.info { 
  --dark: #333;
  position: absolute;
  bottom: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  text-align: center;
  background: #fff8;
  padding: 15px;
  padding-top: 90px;
  left: calc(-100% - 3px);
  box-sizing: border-box;
  transition: var(--tst);
}

.info:hover {
  left:0;
  transition:var(--tst);
}
/* PLUS-ICON */
.info:before { 
  content:''; /* "\271A"; */
  position:absolute;
  top:20px;
  left:100%;
  width:50px;
  height:50px;
  padding: 15px;
  line-height: 22px;
  font-size: 25px;
  font-family: none;
  text-align: center;
  background: rgb(255,255,255,.4); /*radial-gradient(#fff0 15px, #fff8 16px); */
  /*box-sizing: border-box;*/
  /*border-radius: 0 2em 2em 0;*/
  color: #fff;
}

.info:after {
  --dot: conic-gradient(from 0deg at 0% 100%, var(--dark) 0 25%, #fff0 0 100%);
  content:'Informationen';
  position: absolute;
  top:20px;
  left:3%;
  width: 100%;
  height: 50px;
  padding: 15px 15px 15px 63px;
  border-radius: 0;
  line-height: 22px;
  font-size: 18px;
  text-align: left;
  background: var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), var(--dot), #fff8;
  /*box-sizing: border-box;*/
  mix-blend-mode: color-burn;
  background-repeat: no-repeat;
  background-size: 4px 4px, 4px 4px, 4px 4px, 15px 2px, 15px 2px, 15px 2px;
  background-position: 26px 16px, 26px 23px, 26px 30px, 32px 17px, 32px 24px, 32px 31px;
  color: var(--dark);
}

/* the hover-marker and text */
.info span {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0.25em 0 0.25em 0;
  padding: 0.55em 0.5em 0.55em 4em;
  border-radius: 4px;
  /*box-sizing: border-box;*/
  font-size: 1rem;
  text-align: left;
  /*text-transform: uppercase;*/
  mix-blend-mode: color-burn;
  color: var(--dark);
}

.info span:hover {
  mix-blend-mode:luminosity;
  background: #fff8;
  filter:invert(1);
}

.info span:before, .info span:after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  height:100%;
  max-width:2em;
  background: #fff8;
}


/*climber
.info span:nth-child(1):before {
  background: radial-gradient(circle at 50% 50%, var(--dark) 2px , #fff0 3px 150%);
  width: 7px;
  height: 6px;
  border-radius: 100% 100% 100% 40%;
  left: 16px;
  top: 2px;
  border: 3px solid var(--dark);
  border-top-color: #fff0;
  background-repeat: no-repeat;
  transform: rotate(29deg);
}

.info span:nth-child(1):after {
  background: linear-gradient(180deg, var(--dark) 1px , #fff0 1px 150%);
  width: 4px;
  height: 7px;
  border-radius: 100% 50% 100% 0%;
  left: 15px;
  top: 13px;
  border: 3px solid var(--dark);
  border-bottom-color: #fff0;
  background-repeat: no-repeat;
  transform: rotate(-1deg);
}
*/

/*photo
.info span:nth-child(2):before {
  background: radial-gradient(circle at 50% 42%, var(--dark) 2px, #fff0 3px 4px, var(--dark) 5px 100%);
  width: 20px;
  height: 13px;
  left: 11px;
  top: 8px;
  border-radius: 2px;
}

.info span:nth-child(2):after {
  border: 10px solid #fff0;
  border-width: 0px 2px 4px 2px;
  border-bottom-color: var(--dark);
  width: 10px;
  background: #fff0;
  height: 0px;
  left: 14px;
  top: 5px;
}
*/

/*crag
.info span:nth-child(3):before {
  border: 10px solid #fff0;
  height: 0;
  border-bottom-color: var(--dark);
  border-width: 0 6px 10px 6px;
  left: 12px;
  top: 10px;
  background: #fff0;
}

.info span:nth-child(3):after {
  border: 10px solid #fff0;
  height: 0;
  border-bottom-color: var(--dark);
  border-width: 0 6px 15px 6px;
  left: 18px;
  top: 5px;
  background: #fff0;
}
*/
/*zone
.info span:nth-child(4):before {
  width: 16px;
  height: 16px;
  border-radius: 100%;
  left: 13px;
  top: 3px;
  background: radial-gradient(circle at 50% 50%, var(--dark) 2px, #fff0 3px 4px, var(--dark) 5px 100%);
}

.info span:nth-child(4):after {
  border: 10px solid #fff0;
  height: 0;
  border-top-color: var(--dark);
  border-width: 8px 6px 0 6px;
  left: 15px;
  top: 16px;
  background: #fff0;
}
*/
/*date
.info span:nth-child(5):before {
  border: 2px solid var(--dark);
  width: 17px;
  height: 11px;
  border-top-width: 4px;
  left: 11px;
  top: 5px;
  background: repeating-conic-gradient(from 0deg at 40% 60%, var(--dark) 0 25% , #fff0 0 100%);
  background-size: 5px 5px;
  background-position: 0.25px -4px;
  border-radius: 2px;
}
*/
/*route
.info span:nth-child(6):before {
  width: 22px;
  height: 22px;
  left: 11px;
  top: 3px;
  background: 
    radial-gradient(circle at 60% 50%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 37% 70%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 52% 64%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 45% 42%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 49% 25%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 61% 15%, var(--dark) 1px, #fff0 2px 100%), 
    radial-gradient(circle at 18% 84%, #fff0 1px, var(--dark) 2px 3px, #fff0 4px 100%),
    radial-gradient(circle at 85% 16%, #fff0 1px, var(--dark) 2px 3px, #fff0 4px 100%);
}
*/
/*** MEDIA QUERIES ***/
@media only screen and (max-width:1023px) {
  .gallery li {
    width: calc(33vw - 2.5em);
  }
  .gallery li:nth-child(3) {
    display: none;
  }
  .gallery li:nth-child(7) {
    display: none;
  }
}

@media only screen and (max-width:767px) {
  .gallery li {
    width: calc(50vw - 1.5em);
    height: calc(33.75vh - 1.5em);
    margin: 1em 0 0 1em;
  }
  .info {padding: 10px;}
  .info:after {display: none;}
  .info span {font-size: 10px;}
  
  .gallery li:nth-child(2):hover {
	  transform-origin: 100% 0;
	}
	.gallery li:nth-child(4):hover {
	  transform-origin: 0 50%;
	}
	.gallery li:nth-child(5):hover {
	  transform-origin: 100% 50%;
	}
	.gallery li:nth-child(6):hover {
	  transform-origin: 0 100%;
	}
}

@media only screen and (max-width:767px) and (orientation:landscape) {
  .gallery li {
    width: calc(33.75vw - 1.5em);
    height: calc(50vh - 1.5em);
    margin: 1em 0 0 1em;
  }
  .info span {padding: 0.4em 0.5em 0.4em 4em;}
}

@media only screen and (max-width:1024px) {
  .info:after {font-size: 15px;}
}

@media only screen and (max-width:540px) {
  .info:after {font-size: 15px;}
}

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