.calc{
  position: relative;
} 
.choose button{
    list-style: none;
    width: 60px;
    height: 40px;
    -webkit-transition: all 500ms ease-out;
    -moz-transition: all 500ms ease-out;
    -o-transition: all 500ms ease-out;
    transition: all 500ms ease-out;
    cursor: pointer;
    background-color: transparent;
    border: none;
}
.choose button:hover{
    background-color: #24a777;
}
.choose img{
    display: block;
}
.choose{
    width: 60px;
    margin-right: 22px;
}
.choose,
.hands{
    float: left;
}
#me,
#pc{
    width: 140px;
    height: 66px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 20px;
    display: inline-block;
}
#me.petra{
    background-image: url('petra_me.png');
}
#me.psalidi{
    background-image: url('psalidi_me.png');
}
#me.xarti{
    background-image: url('xarti_me.png');
}
#pc{
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    position: relative;
    right: -40px;
    top: -40px;
    transform: rotate(20deg);
}
#pc.petra,
#pc.psalidi,
#pc.xarti{
    right: 0;
    top: 0;
    transform: rotate(0);
}
#pc.petra{
    background-image: url('petra_pc.png');
}
#pc.psalidi{
    background-image: url('psalidi_pc.png');
}
#pc.xarti{
    background-image: url('xarti_pc.png');
}
.kadran{
    max-width: 450px;
    margin: 0 auto;
    position: relative;
}
#message{
    position: absolute;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    height: 20px;
    font-size: 18px;
    top: 20px;
}
#message::before{
    width: 200px;
    height: 20px;
    text-align: center;
    display: block;
    color: #333;
}
.youwin #message,
.youdraw #message,
.youlose #message{
    top: -15px;
    font-size: 11px;
    font-weight: bold;
}
.youstart #message::before{
    content: "Είσαι έτοιμος?";
}
.youwin #message::before{
    content: "Κερδίζεις :)";
    color: #24a777;
}
.youdraw #message::before{
    content: "Ισοπαλία...";
    color: #47a3da;
}
.youlose #message::before{
    content: "Χάνεις :(";
    color: #cc3232;
}
.topc{
    width: 59px;
    height: 80px;
    background-image: url('pc_face.png');
    background-repeat: no-repeat;
    background-position: center;
    float: right;
    margin-right: 5px;
    margin-top: 15px;
}
.youwin .topc{
    background-position: center bottom;
}
.youdraw .topc{
    background-position: center center;
}
.youlose .topc{
    background-position: center top;
}
.kadran::after{
    content: " ";
    display: block;
    clear: both;
}
.score{
    text-align: center;
    display: block;
}
.botbuts{
    margin: 0 auto;
    max-width: 450px;
}
.score li{
    list-style: none;
    margin-right: 5px;
    display: inline-block;
}
.score li:last-of-type{
    margin-right: 0;
}
.score li::after{
    content: " ";
    display: block;
    clear: both;
}
.score li h3,
.score li div{
    float: left;
    text-align: left;
    font-size: 16px;
    color: #333;
}
.score li h3{
    margin-right: 2px;
}

@media all and (max-width: 500px){
    .choose{
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .hands{
        float: none;
        width: 285px;
        margin: 0 auto;
    }
    .topc{
        position: absolute;
        bottom: 30px;
        right: 0;
        margin: 0;
    }
    .youwin #message,
    .youdraw #message,
    .youlose #message{
        font-size: 17px;
        top: 140px;
    }
    .score li {
        margin-right: 4px;
        margin-bottom: 5px;
    }
    .score li h3, .score li div{
        font-size: 14px;
    }
    #me, #pc{
        margin-top: 0;
    }
    .kadran{
        height: 220px;
    }
}