/**
* Home
*/

#characters {
    /* outerWidth = 1176px */
    position: relative;

    height: 665px;
    max-width: 1228px;

    margin: 0 auto;
    text-align: center;
}

#glow {
    position: absolute;
    top: -40%;
    left: -50%;

    width: 200%;
    height: 195%;

    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

#cloud {
    position: absolute;

    width: 26.7%; /* width: 338px; */
    height: 33.2%; /* height: 221px; */

    left: 6%; /* left: 76px; */
    top: 1.8%; /* top: 8px; */

    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;

    z-index: 5;
    transition: .1s all ease-in-out;
}

#cloud:hover {
    transform: scale(1.2);
}

.character {
    position: absolute;
    transition: .1s all ease-in-out;
}

.character-glow {
    display: none;
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;

    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;

    z-index: 4;
}

.character-image {
    position: absolute;
    width: 100%;
    height: 100%;

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.character:hover {
    transform: scale(1.2);
}

.character-image:hover + .character-glow {
    display: block;
}

#princess {
    /* width: 23.9%; /* width: 281px; */
    /* height: 77.5%; /* height: 512px; */

    width: 25.7%; /* width: 325px; */
    height: 81.8%; /* height: 544px; */

    /* left: 13.7%; /* left: 116px; */
    /* top: 13%; /* top: 84px; */

    left: 73.1%; /* left: 924px; */
    top: 13.2%; /* top: 88px; */

    z-index: 16;
}

#princess .character-image {
    z-index: 16;
}

#princess .character-glow {
    z-index: 15;
}

#princess:hover {
    z-index: 20;
}



#true {
    /* width: 20.2%; /* width: 237px; */
    /* height: 84%; /* height: 555px; */

    width: 24.8%; /* width: 314px; */
    height: 78.9%; /* height: 525px; */


    /* left: 40.6%; /* left: 432px; */
    /* top: 14%; /* top: 91px; */

    left: 35.6%; /* left: 450px; */
    top: 21.1%; /* top: 140px; */

    z-index: 20;
}

#true .character-image {
    z-index: 20;
}

#true .character-glow {
    z-index: 19;
}

#true:hover {
    z-index: 20;
}


#king {
    /* width: 14.5%;/* width: 170px;*/
    /* height: 25.9%; /* height: 171px; */

    width: 13.7%;/* width: 173px;*/
    height: 28.1%; /* height: 187px; */

    /* left: 59.6%; /* left: 655px; */
    /* top: 2%; /* top: 11px; */

    left: 60.9%; /* left: 770px; */
    top: 8.7%; /* top: 58px; */

    z-index: 16;
}

#king .character-image {
    z-index: 16;
}

#king .character-glow {
    z-index: 15;
}

#king:hover {
    z-index: 20;
}


#bartleby {
    /* width: 17.8%; /* width: 209px; */
    /* height: 40.3%; /* height: 266px; */

    width: 22.5%; /* width: 284px; */
    height: 50.8%; /* height: 338px; */

    /* left: 57%; /* left: 624px; */
    /* top: 52%; /* top: 345px; */

    left: 56.6%; /* left: 716px; */
    top: 45.1%; /* top: 300px; */

    z-index: 18;
}

#bartleby .character-image {
    z-index: 18;
}

#bartleby .character-glow {
    z-index: 17;
}

#bartleby:hover {
    z-index: 20;
}

#zee {
    /* width: 18.4%; /* width: 216px; */
    /* height: 66%; /*height: 436px;*/

    width: 19.9%; /* width: 252px; */
    height: 72.5%; /*height: 482px;*/


    /* left: 69.7%; /* left: 774px; */
    /* top: 21%; /* top: 136px; */

    left: 15.4%; /* left: 195px; */
    top: 23.2%; /* top: 154px; */

    z-index: 16;
}

#zee .character-image {
    z-index: 16;
}

#zee .character-glow {
    z-index: 15;
}

#zee:hover {
    z-index: 20;
}

.wish {
    width: 21.9%; /* width: 277px; */
    height: 39.4%; /* height: 262px; */
}

#wish-tl {
    /* left: 27.7%;/* left: 350px; */
    /* top: 3.9%;/* top: 26px; */
    left: 36.7%;
    top: 17.9%;

    width: 4.9%;
    height: 10.4%;

    z-index: 30;
}

#wish-tl div {
    width: 400%;
    height: 400%;
    left: -150%;
    top: -150%;

    pointer-events: none;
}

#wish-bl {
    left: 2.4%;/* left: 30px; */
    top: 54.4%;/* top: 362px; */
}

#wish-tc {
    left: 43%;/* left: 544px; */
    top: -13.8%;/* top: -92px; */
}

#wish-bc {
    /*width: 6.3%;/* height: 80px; */
    /*height: 12%;/* height: 80px; */

    /*left: 48.6%;/* left: 614px; */
    /*top: 67.7%;/* top: 450px; */

    left: 57.6%;
    top: 80.7%;
    width: 4.9%;
    height: 10.4%;

    z-index: 30;
}

#wish-bc div {
    width: 400%;
    height: 400%;
    left: -150%;
    top: -150%;

    pointer-events: none;
}

#wish-tr {
    /*left: 83.7%;/* left: 1058px; */
    /*top: 6%;/* top: 40px; */

    left: 92.7%;
    top: 20%;

    width: 4.9%;
    height: 10.4%;

    z-index: 30;
}

#wish-tr div {
    width: 400%;
    height: 400%;
    left: -150%;
    top: -150%;

    pointer-events: none;
}

@media (hover: none) {
    .character:hover {
        transform: scale(1);
    }
}