input[type="radio"] {
    display: none;
}
body {
    margin: 0;
    font-family: Open Sans, sans-serif;
    font-weight: 300;
    text-align: center;
}
a {
    color: #fff;
}
a:hover {
    color: #D43F3A;
}
.board {
    font-size: 1vmin;
    /*outline: 2em solid #F0F0F0;*/
    width: 70em;
    height: 70em;
    position: absolute;
    left: calc(50% - 37em);
    top: calc(50% - 37em);
    overflow: hidden;
    border: 2em solid #F0F0F0;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #888888;
}
.board2 {
    font-size: 1vmin;
    /*outline: 2em solid #F0F0F0;*/
    width: 70em;
    height: 70em;
    position: absolute;
    left: calc(50% - 37em);
    top: calc(50% - 37em);
    overflow: hidden;
    background-size: 100% 100%;
    z-index: -2;
    -webkit-transform: scale(0);
    transform: scale(0);
    border: 2em solid #F0F0F0;
    border-radius: 4px;
    box-shadow: 0px 0px 10px #888888;
}
[class^=peice] {
    position: absolute;
    width: 23.333333333em;
    height: 23.333333333em;
    -webkit-transition: top .5s, left .5s;
    transition: top .5s, left .5s;
}
[class^=peice]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-size: 70em 70em;
    /*border:.5em groove #999;*/
    box-sizing: box-border;
}
.peice-a::after {
    background-position: top left;
}
.peice-b::after {
    background-position: top center;
}
.peice-c::after {
    background-position: top right;
}
.peice-d::after {
    background-position: center left;
}
.peice-e::after {
    background-position: center center;
}
.peice-f::after {
    background-position: center right;
}
.peice-g::after {
    background-position: bottom left;
}
.peice-h::after {
    background-position: bottom center;
}
[class^=peice] label {
    display: block;
    width: 16.5em;
    height: 16.5em;
    position: absolute;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: #787879;
    cursor: pointer;
    cursor: hand;
}
[class^=peice] label:hover {
    background: #e61c41;
    outline: .5em solid #111;
}
[class^=peice] label[for$="up"] {
    top: -6em;
    left: 3.5em;
}
[class^=peice] label[for$="middle"] {
    display: none;
    z-index: 5;
    left: 3.5em;
}
[class^=peice] label[for$="down"] {
    bottom: -6em;
    left: 3.5em;
}
[class^=peice] label[for$="left"] {
    left: -6em;
    top: 3.5em;
}
[class^=peice] label[for$="center"] {
    display: none;
    z-index: 5;
    top: 3.5em;
}
[class^=peice] label[for$="right"] {
    right: -6em;
    top: 3.5em;
}
#a-up:checked ~* [for="a-middle"],
#b-up:checked ~* [for="b-middle"],
#c-up:checked ~* [for="c-middle"],
#d-up:checked ~* [for="d-middle"],
#e-up:checked ~* [for="e-middle"],
#f-up:checked ~* [for="f-middle"],
#g-up:checked ~* [for="g-middle"],
#h-up:checked ~* [for="h-middle"] {
    display: block;
    -webkit-transform: translate(0, 13em) rotate(45deg);
    transform: translate(0, 13em) rotate(45deg);
}
#a-down:checked ~* [for="a-middle"],
#b-down:checked ~* [for="b-middle"],
#c-down:checked ~* [for="c-middle"],
#d-down:checked ~* [for="d-middle"],
#e-down:checked ~* [for="e-middle"],
#f-down:checked ~* [for="f-middle"],
#g-down:checked ~* [for="g-middle"],
#h-down:checked ~* [for="h-middle"] {
    display: block;
    -webkit-transform: translate(0, -6em) rotate(45deg);
    transform: translate(0, -6em) rotate(45deg);
}
#a-left:checked ~* [for="a-center"],
#b-left:checked ~* [for="b-center"],
#c-left:checked ~* [for="c-center"],
#d-left:checked ~* [for="d-center"],
#e-left:checked ~* [for="e-center"],
#f-left:checked ~* [for="f-center"],
#g-left:checked ~* [for="g-center"],
#h-left:checked ~* [for="h-center"] {
    display: block;
    -webkit-transform: translate(13em, 0) rotate(45deg);
    transform: translate(13em, 0) rotate(45deg);
}
#a-right:checked ~* [for="a-center"],
#b-right:checked ~* [for="b-center"],
#c-right:checked ~* [for="c-center"],
#d-right:checked ~* [for="d-center"],
#e-right:checked ~* [for="e-center"],
#f-right:checked ~* [for="f-center"],
#g-right:checked ~* [for="g-center"],
#h-right:checked ~* [for="h-center"] {
    display: block;
    -webkit-transform: translate(-6em, 0) rotate(45deg);
    transform: translate(-6em, 0) rotate(45deg);
}
#a-up:checked ~ * .peice-a,
#b-up:checked ~ * .peice-b,
#c-up:checked ~ * .peice-c,
#d-up:checked ~ * .peice-d,
#e-up:checked ~ * .peice-e,
#f-up:checked ~ * .peice-f,
#g-up:checked ~ * .peice-g,
#h-up:checked ~ * .peice-h {
    top: 0;
}
#a-middle:checked ~ * .peice-a,
#b-middle:checked ~ * .peice-b,
#c-middle:checked ~ * .peice-c,
#d-middle:checked ~ * .peice-d,
#e-middle:checked ~ * .peice-e,
#f-middle:checked ~ * .peice-f,
#g-middle:checked ~ * .peice-g,
#h-middle:checked ~ * .peice-h {
    top: 23.333333333em;
}
#a-down:checked ~ * .peice-a,
#b-down:checked ~ * .peice-b,
#c-down:checked ~ * .peice-c,
#d-down:checked ~ * .peice-d,
#e-down:checked ~ * .peice-e,
#f-down:checked ~ * .peice-f,
#g-down:checked ~ * .peice-g,
#h-down:checked ~ * .peice-h {
    top: 46.666666667em;
}
#a-left:checked ~ * .peice-a,
#b-left:checked ~ * .peice-b,
#c-left:checked ~ * .peice-c,
#d-left:checked ~ * .peice-d,
#e-left:checked ~ * .peice-e,
#f-left:checked ~ * .peice-f,
#g-left:checked ~ * .peice-g,
#h-left:checked ~ * .peice-h {
    left: 0;
}
#a-center:checked ~ * .peice-a,
#b-center:checked ~ * .peice-b,
#c-center:checked ~ * .peice-c,
#d-center:checked ~ * .peice-d,
#e-center:checked ~ * .peice-e,
#f-center:checked ~ * .peice-f,
#g-center:checked ~ * .peice-g,
#h-center:checked ~ * .peice-h {
    left: 23.333333333em;
}
#a-right:checked ~ * .peice-a,
#b-right:checked ~ * .peice-b,
#c-right:checked ~ * .peice-c,
#d-right:checked ~ * .peice-d,
#e-right:checked ~ * .peice-e,
#f-right:checked ~ * .peice-f,
#g-right:checked ~ * .peice-g,
#h-right:checked ~ * .peice-h {
    left: 46.666666667em;
}
.winner {
    color: #fff;
    text-align: center;
    font-size: 16pt;
    z-index: 100;
    width: 100%;
    position: absolute;
    top: calc(50% - 1em);
    background-color: rgba(34, 34, 34, 0.4);
    -webkit-transform: scale(0);
    transform: scale(0);
}
#a-up:checked ~ #a-left:checked ~ #b-up:checked ~ #b-center:checked ~ #c-up:checked ~ #c-right:checked ~ #d-middle:checked ~ #d-left:checked ~ #e-middle:checked ~ #e-center:checked ~ #f-middle:checked ~ #f-right:checked ~ #g-down:checked ~ #g-left:checked ~ #h-down:checked ~ #h-center:checked ~ .winner {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}
#a-up:checked ~ #a-left:checked ~ #b-up:checked ~ #b-center:checked ~ #c-up:checked ~ #c-right:checked ~ #d-middle:checked ~ #d-left:checked ~ #e-middle:checked ~ #e-center:checked ~ #f-middle:checked ~ #f-right:checked ~ #g-down:checked ~ #g-left:checked ~ #h-down:checked ~ #h-center:checked ~ .board {
    display: none;
}
#a-up:checked ~ #a-left:checked ~ #b-up:checked ~ #b-center:checked ~ #c-up:checked ~ #c-right:checked ~ #d-middle:checked ~ #d-left:checked ~ #e-middle:checked ~ #e-center:checked ~ #f-middle:checked ~ #f-right:checked ~ #g-down:checked ~ #g-left:checked ~ #h-down:checked ~ #h-center:checked ~ .board2 {
    -webkit-transform: scale(1);
    transform: scale(1);
}
@-webkit-keyframes winner {
    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(1);
    }
    10%,
    90% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
@keyframes winner {
    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(1);
    }
    10%,
    90% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.selectBG {
    display: inline-block;
    font-size: 2vmin;
    width: 8em;
    text-align: center;
    padding: 1em 0;
    background: #787879;
    color: #fff;
    border: .25em solid #333;
    margin: 2em .25em;
    cursor: pointer;
    cursor: hand;
    border-radius: 4px;
}
footer {
    position: fixed;
    bottom: 0;
    display: block;
    width: 100%;
}
#slika1:checked ~ *[for="slika1"],
#slika2:checked ~ *[for="slika2"],
#slika3:checked ~ *[for="slika3"],
#slika4:checked ~ *[for="slika4"],
#slika5:checked ~ *[for="slika5"],
#slika6:checked ~ *[for="slika6"],
#slika7:checked ~ *[for="slika7"],
#slika8:checked ~ *[for="slika8"] {
    border-bottom-color: #e61c41;
}
#slika1:checked ~ * [class^=peice]::after {
    background-image: url("../slike/slika2.jpg");
}
#slika2:checked ~ * [class^=peice]::after {
    background-image: url("../slike/slika1.jpg");
}
#slika3:checked ~ * [class^=peice]::after {
    background-image: url("../slike/slika3.png");
}
#slika4:checked ~ * [class^=peice]::after {
    background-image: url("../slike/slika4.jpg");
}