/*------------- Dinámica puzzle ----------------*/
.dinamic_puzzle > div:nth-child(1) {
  height: 20%;
}

.dinamic_puzzle>div:nth-child(2) {
  height: 80%;
}

.dinamic_puzzle input[type="radio"] {
  display: none;
}

.dinamic_puzzle button{
  background-color: var(--additional-color);
  color: white;
  transition: all .2s ease-in-out;
}

.dinamic_puzzle .board {
  font-size: 1vmin;
  outline: 1vmin solid var(--base-color);
  width: 60em;
  height: 60em;
  position: relative;
  left: 50%;
  transform: translate(-50%);
  overflow: hidden;
  margin: 2vmin 0;
}

.dinamic_puzzle [class^=peice] {
  position: absolute;
  width: 20em;
  height: 20em;
  transition: top .5s, left .5s;
}

.dinamic_puzzle [class^=peice]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background-size: 60em 60em;
  border-radius: 2em;
  border: .5em groove #999;
  box-sizing: box-border;
}

.dinamic_puzzle .dinamic_puzzle .peice-a::after {
  background-position: top left;
}

.dinamic_puzzle .peice-b::after {
  background-position: top center;
}

.dinamic_puzzle .peice-c::after {
  background-position: top right;
}

.dinamic_puzzle .peice-d::after {
  background-position: center left;
}

.dinamic_puzzle .peice-e::after {
  background-position: center center;
}

.dinamic_puzzle .peice-f::after {
  background-position: center right;
}

.dinamic_puzzle .peice-g::after {
  background-position: bottom left;
}

.dinamic_puzzle .peice-h::after {
  background-position: bottom center;
}

.dinamic_puzzle [class^=peice] label {
  display: block;
  width: 13em;
  height: 13em;
  position: absolute;
  transform: rotate(45deg);
  background: var(--additional-color);
}

.dinamic_puzzle [class^=peice] label:hover {
  outline: 1vmin solid var(--second-additional-color);
}

.dinamic_puzzle [class^=peice] label[for$="up"] {
  top: -6em;
  left: 3.5em;
}

.dinamic_puzzle [class^=peice] label[for$="middle"] {
  display: none;
  z-index: 5;
  left: 3.5em;
}

.dinamic_puzzle [class^=peice] label[for$="down"] {
  bottom: -6em;
  left: 3.5em;
}

.dinamic_puzzle [class^=peice] label[for$="left"] {
  left: -6em;
  top: 3.5em;
}

.dinamic_puzzle [class^=peice] label[for$="center"] {
  display: none;
  z-index: 5;
  top: 3.5em;
}

.dinamic_puzzle [class^=peice] label[for$="right"] {
  right: -6em;
  top: 3.5em;
}

.dinamic_puzzle #a-up:checked~* [for="a-middle"],
.dinamic_puzzle #b-up:checked~* [for="b-middle"],
.dinamic_puzzle #c-up:checked~* [for="c-middle"],
.dinamic_puzzle #d-up:checked~* [for="d-middle"],
.dinamic_puzzle #e-up:checked~* [for="e-middle"],
.dinamic_puzzle #f-up:checked~* [for="f-middle"],
.dinamic_puzzle #g-up:checked~* [for="g-middle"],
.dinamic_puzzle #h-up:checked~* [for="h-middle"] {
  display: block;
  transform: translate(0, 13em) rotate(45deg);
}

.dinamic_puzzle #a-down:checked~* [for="a-middle"],
.dinamic_puzzle #b-down:checked~* [for="b-middle"],
.dinamic_puzzle #c-down:checked~* [for="c-middle"],
.dinamic_puzzle #d-down:checked~* [for="d-middle"],
.dinamic_puzzle #e-down:checked~* [for="e-middle"],
.dinamic_puzzle #f-down:checked~* [for="f-middle"],
.dinamic_puzzle #g-down:checked~* [for="g-middle"],
.dinamic_puzzle #h-down:checked~* [for="h-middle"] {
  display: block;
  transform: translate(0, -6em) rotate(45deg);
}

.dinamic_puzzle #a-left:checked~* [for="a-center"],
.dinamic_puzzle #b-left:checked~* [for="b-center"],
.dinamic_puzzle #c-left:checked~* [for="c-center"],
.dinamic_puzzle #d-left:checked~* [for="d-center"],
.dinamic_puzzle #e-left:checked~* [for="e-center"],
.dinamic_puzzle #f-left:checked~* [for="f-center"],
.dinamic_puzzle #g-left:checked~* [for="g-center"],
.dinamic_puzzle #h-left:checked~* [for="h-center"] {
  display: block;
  transform: translate(13em, 0) rotate(45deg);
}

.dinamic_puzzle #a-right:checked~* [for="a-center"],
.dinamic_puzzle #b-right:checked~* [for="b-center"],
.dinamic_puzzle #c-right:checked~* [for="c-center"],
.dinamic_puzzle #d-right:checked~* [for="d-center"],
.dinamic_puzzle #e-right:checked~* [for="e-center"],
.dinamic_puzzle #f-right:checked~* [for="f-center"],
.dinamic_puzzle #g-right:checked~* [for="g-center"],
.dinamic_puzzle #h-right:checked~* [for="h-center"] {
  display: block;
  transform: translate(-6em, 0) rotate(45deg);
}

.dinamic_puzzle #a-up:checked~* .peice-a,
.dinamic_puzzle #b-up:checked~* .peice-b,
.dinamic_puzzle #c-up:checked~* .peice-c,
.dinamic_puzzle #d-up:checked~* .peice-d,
.dinamic_puzzle #e-up:checked~* .peice-e,
.dinamic_puzzle #f-up:checked~* .peice-f,
.dinamic_puzzle #g-up:checked~* .peice-g,
.dinamic_puzzle #h-up:checked~* .peice-h {
  top: 0;
}

.dinamic_puzzle #a-middle:checked~* .peice-a,
.dinamic_puzzle #b-middle:checked~* .peice-b,
.dinamic_puzzle #c-middle:checked~* .peice-c,
.dinamic_puzzle #d-middle:checked~* .peice-d,
.dinamic_puzzle #e-middle:checked~* .peice-e,
.dinamic_puzzle #f-middle:checked~* .peice-f,
.dinamic_puzzle #g-middle:checked~* .peice-g,
.dinamic_puzzle #h-middle:checked~* .peice-h {
  top: 20em;
}

.dinamic_puzzle #a-down:checked~* .peice-a,
.dinamic_puzzle #b-down:checked~* .peice-b,
.dinamic_puzzle #c-down:checked~* .peice-c,
.dinamic_puzzle #d-down:checked~* .peice-d,
.dinamic_puzzle #e-down:checked~* .peice-e,
.dinamic_puzzle #f-down:checked~* .peice-f,
.dinamic_puzzle #g-down:checked~* .peice-g,
.dinamic_puzzle #h-down:checked~* .peice-h {
  top: 40em;
}

.dinamic_puzzle #a-left:checked~* .peice-a,
.dinamic_puzzle #b-left:checked~* .peice-b,
.dinamic_puzzle #c-left:checked~* .peice-c,
.dinamic_puzzle #d-left:checked~* .peice-d,
.dinamic_puzzle #e-left:checked~* .peice-e,
.dinamic_puzzle #f-left:checked~* .peice-f,
.dinamic_puzzle #g-left:checked~* .peice-g,
.dinamic_puzzle #h-left:checked~* .peice-h {
  left: 0;
}

.dinamic_puzzle #a-center:checked~* .peice-a,
.dinamic_puzzle #b-center:checked~* .peice-b,
.dinamic_puzzle #c-center:checked~* .peice-c,
.dinamic_puzzle #d-center:checked~* .peice-d,
.dinamic_puzzle #e-center:checked~* .peice-e,
.dinamic_puzzle #f-center:checked~* .peice-f,
.dinamic_puzzle #g-center:checked~* .peice-g,
.dinamic_puzzle #h-center:checked~* .peice-h {
  left: 20em;
}

.dinamic_puzzle #a-right:checked~* .peice-a,
.dinamic_puzzle #b-right:checked~* .peice-b,
.dinamic_puzzle #c-right:checked~* .peice-c,
.dinamic_puzzle #d-right:checked~* .peice-d,
.dinamic_puzzle #e-right:checked~* .peice-e,
.dinamic_puzzle #f-right:checked~* .peice-f,
.dinamic_puzzle #g-right:checked~* .peice-g,
.dinamic_puzzle #h-right:checked~* .peice-h {
  left: 40em;
}

.dinamic_puzzle .selectBG {
  display: inline-block;
  font-family: arial;
  font-size: 2vmin;
  width: 8em;
  text-align: center;
  padding: 1em 0;
  background-color: var(--additional-color);
  color: var(--title-color);
  margin: 2em .25em;
}

.dinamic_puzzle #puzzle1:checked~*[for="puzzle1"],
.dinamic_puzzle #puzzle2:checked~*[for="puzzle2"],
.dinamic_puzzle #puzzle3:checked~*[for="puzzle3"] {
  background-color: var(--second-additional-color);
}

.dinamic_puzzle + .original_work{
  background: rgba(100, 100, 100, 0.6);
  position: fixed;
  display: none;
  z-index: 5000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

.dinamic_puzzle + .original_work > img{
  max-width: 50%;
}