main {
    height: 100%;
}

main>span {
    position: absolute;
    -o-transition: all 1s ease, background-color 2s ease-in-out;
    -moz-transition: all 1s ease, background-color 2s ease-in-out;
    -webkit-transition: all 1s ease, background-color 2s ease-in-out;
    transition: all 1s ease, background-color 2s ease-in-out;
    z-index: 1;
}

main .corner {
    display: inline-block;
    width: 50%;
    height: 50%;
    /* min-width, min-height ? */
}

main .highlight {
    background: rgba(240,240,240,0.1);
    display: inline-block;
    width: 60%;
    height: 60%;
    left: 0%;
    top: 0%;
    z-index: 11;
    pointer-events: none;
}

main>#highlight1 {
    background: hsla(57,100%,60%,0.1);
    -o-transition: all 1.4s ease;
    -moz-transition: all 1.4s ease;
    -webkit-transition: all 1.4s ease;
    transition: all 1.4s ease;
}

main>#highlight2 {
    background: hsla(177,100%,50%,0.1);
    -o-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

main>#highlight3 {
    background: hsla(297,100%,75%,0.1);
    -o-transition: all 2.8s ease-in;
    -moz-transition: all 2.8s ease-in;
    -webkit-transition: all 2.8s ease-in;
    transition: all 2.8s ease-in;
}

main .bottom.corner {
    top: 50%;
}

main .right.corner {
    left: 50%;
}

main .corner:hover {
    z-index: 10;
    width: 60%;
    height: 60%;
}

main .bottom.corner:hover {
    top: 40%;
}

main .right.corner:hover {
    left: 40%;
}

main .bottom.highlight {
    top: 40%;
}

main .right.highlight {
    left: 40%;
}

main .corner .icon {
    display: inline-block;
    position: absolute;
    width: 100px;
    height: 100px;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
/*    background: gray; */
}


main .corner:hover .icon {
    width: 180px;
    height: 180px;
    margin-top: -90px;
    margin-left: -90px;
}

main .left.corner:hover .icon {
    left: 40%;
}

main .right.corner:hover .icon {
    left: 60%;
}

main svg.icon>* {
    fill: rgba(100,100,100,0.3);
    stroke: #555;
    stroke-width: 2px;
    -o-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
}

main svg.icon>*:first-child {
    stroke-width: 2.5px;
}

main .corner:hover svg.icon>* {
    fill: white;
    stroke: black;
}

/* probably different colors for certain corners */

main .spiel {
    display: table;
    position: absolute;
    top: 50%;
    width: 10em;
    height: 10em;
    margin-top: -5em;
    text-align: center;
    color: #666;
    background: rgba(0,0,0,0.3);
    border: 2px ridge rgba(100,100,100,0.3);
    opacity: 0;
    -o-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    text-decoration: none;
}

main :hover .spiel {
    opacity: 1;
    color: #ccc;
}

main .left .spiel {
    right: 2em;
}

main .right .spiel {
    left: 2em;
}

main .spiel span {
    display: table-cell;
    vertical-align: middle;
}


main .middle {
    display: inline-block;
    width: 250px;
    height: 303px;
    left: 50%;
    top: 50%;
    margin-left: -130px; /* center on face (image is slightly off-center) */
    margin-top: -152px;

    z-index: 5;
    opacity: 0.5;

    background: rgba(100,100,100,0.5);
}

main .middle:hover {
    width: 300px;
    height: 450px;
    margin-left: -150px;
    margin-top: -225px;
    width: 319px;
    height: 386px;
    margin-left: -159px;
    margin-top: -193px;
    opacity: 1;
    z-index: 12;
}

main .middle img, main .middle canvas {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

main .middle canvas {
    opacity: 0.3;
}


/* background color: ticks 1 (default), 4, 7, 10 (range is 1-12) */
main.splash1 .top.left.corner,
main.splash4 .top.right.corner,
main.splash7 .bottom.right.corner,
main.splash10 .bottom.left.corner {
    background: hsl(200,60%,70%);
}

main.splash1 .top.right.corner,
main.splash4 .bottom.right.corner,
main.splash7 .bottom.left.corner,
main.splash10 .top.left.corner {
    background: hsl(290,60%,70%);
}

main.splash1 .bottom.right.corner,
main.splash4 .bottom.left.corner,
main.splash7 .top.left.corner,
main.splash10 .top.right.corner {
    background: hsl(20,60%,70%);
}

main.splash1 .bottom.left.corner,
main.splash4 .top.left.corner,
main.splash7 .top.right.corner,
main.splash10 .bottom.right.corner {
    background: hsl(110,60%,70%);
}

/* background color: ticks 2, 5, 8, 11 (range is 1-12) */
main.splash2 .top.left.corner,
main.splash5 .top.right.corner,
main.splash8 .bottom.right.corner,
main.splash11 .bottom.left.corner {
    background: hsl(230,60%,70%);
}

main.splash2 .top.right.corner,
main.splash5 .bottom.right.corner,
main.splash8 .bottom.left.corner,
main.splash11 .top.left.corner {
    background: hsl(320,60%,70%);
}

main.splash2 .bottom.right.corner,
main.splash5 .bottom.left.corner,
main.splash8 .top.left.corner,
main.splash11 .top.right.corner {
    background: hsl(50,60%,70%);
}

main.splash2 .bottom.left.corner,
main.splash5 .top.left.corner,
main.splash8 .top.right.corner,
main.splash11 .bottom.right.corner {
    background: hsl(140,60%,70%);
}

/* background color: ticks 3, 6, 9, 12 (range is 1-12) */
main.splash3 .top.left.corner,
main.splash6 .top.right.corner,
main.splash9 .bottom.right.corner,
main.splash12 .bottom.left.corner {
    background: hsl(260,60%,70%);
}

main.splash3 .top.right.corner,
main.splash6 .bottom.right.corner,
main.splash9 .bottom.left.corner,
main.splash12 .top.left.corner {
    background: hsl(350,60%,70%);
}

main.splash3 .bottom.right.corner,
main.splash6 .bottom.left.corner,
main.splash9 .top.left.corner,
main.splash12 .top.right.corner {
    background: hsl(80,60%,70%);
}

main.splash3 .bottom.left.corner,
main.splash6 .top.left.corner,
main.splash9 .top.right.corner,
main.splash12 .bottom.right.corner {
    background: hsl(170,60%,70%);
}