#puzz-app-container {
    position: relative;
    width: 350px;
    height: 660px;
    display: inline-block;
    background-image: url("images/phone.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
#puzz-start-screen, #puzz-profile-screen, #puzz-check-screen, #puzz-done-screen {
    position: absolute;
    top: 18%;
    left: 50%;
    margin-left: -43%;
    height: 64%;
    width: 84%;
    border-style: solid;
    visibility:hidden;
    background-color: white;
}

.state_start #puzz-start-screen {
    visibility:visible;
}

.state_profile #puzz-profile-screen {
    visibility:visible;
}

.state_check #puzz-check-screen {
    visibility:visible;
}

.state_done #puzz-done-screen {
    visibility:visible;
}

#puzz .check {
    transition: color 0s, font-weight 0s;
    color: gray;
    font-weight: normal;
}

#puzz .mismatch .check {
    transition: color 0.5s, font-weight 0.5s;
    transition-delay: 0.5s;
    color: red;
    font-weight: bold;
}

#puzz .match .check {
    transition: color 0.5s, font-weight 0.5s;
    color: green;
    font-weight: bold;
}

#puzz .match .check-1 {
    transition-delay: 1.0s;
}

#puzz .match .check-2 {
    transition-delay: 1.5s;
}

#puzz .match .check-3 {
    transition-delay: 2.0s;
}

#puzz .match .check-4 {
    transition-delay: 2.5s;
}

#puzz .match .check-5 {
    transition-delay: 3.0s;
}

#puzz .check-final {
    transition: color 0s, font-weight 0s, visibility 0s;
    visibility: hidden;
    display: block;
}

#puzz .match .check-final {
    transition: color 0s, font-weight 0s, visibility 0s;
    transition-delay: 3.5s;
    visibility: visible;
}

#puzz .mismatch .check-final {
    transition: color 0s, font-weight 0s, visibility 0s;
    transition-delay: 1s;
    visibility: visible;
}

#puzz-headshot {
    display: block;
    width: 200px;
    height: 200px;
    margin: auto;
    padding: 5px 5px 5px 5px;
    background-image:url("images/match.png");
    background-position: 5px 5px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
}

#puzz-headshot.profile-1 { background-image:url("images/profile-1.jpg");}
#puzz-headshot.profile-2 { background-image:url("images/profile-2.jpg");}
#puzz-headshot.profile-3 { background-image:url("images/profile-3.jpg");}
#puzz-headshot.profile-4 { background-image:url("images/profile-4.jpg");}
#puzz-headshot.profile-5 { background-image:url("images/profile-5.jpg");}
#puzz-headshot.profile-6 { background-image:url("images/profile-6.jpg");}
#puzz-headshot.profile-7 { background-image:url("images/profile-7.jpg");}
#puzz-headshot.profile-8 { background-image:url("images/profile-8.jpg");}
#puzz-headshot.profile-9 { background-image:url("images/profile-9.jpg");}
#puzz-headshot.profile-10 { background-image:url("images/profile-10.jpg");}
#puzz-headshot.profile-11 { background-image:url("images/profile-11.jpg");}
#puzz-headshot.profile-12 { background-image:url("images/profile-12.jpg");}
#puzz-headshot.profile-13 { background-image:url("images/profile-13.jpg");}

#puzz .message {
    display: block;
    text-align: center;
    padding: 5px 5px 5px 5px;
    margin: auto;
    clear: both;
}

#puzz .screen {
    align-items: center;
    justify-content: center;
}

#puzz .bottom {
    display: block;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 10px);
    margin-left:5px;
    margin-right: 5px;
}

#puzz .bottom .left {
    position: absolute;
    left: 5px;
    bottom: 5px;
}

#puzz .bottom .center{
    position: absolute;
    left: 50%;
    margin-left: -75px;
    width: 150px;
    bottom: 5px;
}

#puzz .bottom .right {
    position: absolute;
    right: 5px;
    bottom: 5px;
}

#puzz .puzz-check-list {
    float: left;
}
#puzz-check-graphic {
    position: relative;
    float: right;
    width: 100px;
    height: 100px;
    background-image: url("images/match.png");
    background-size: 100px 100px;
    margin: 10px 4px 0px 0px;
}

#puzz .done {
    width: 250px;
    height: 250px;
    background-image: url("images/match.png");
    background-position: 0px 0px;
    background-size: 250px 250px;
    background-repeat: no-repeat;
    }