.categoryWrapper{
    float:left;
    position:relative;
    margin-right:2%;
}

.categoryWrapper .upperPart{
    width:100%;
    padding-top:100%;
    position: relative;
}

.categoryWrapper .upperPart img{
    width:100%;
    top:0;
    left:0;
    position: absolute;
}

.dropField{
    margin-top:20px;
    height:102px!important;/*sonst snapt es nicht*/ 
    background: rgba(0,0,0,0);
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
    padding:0;
    box-sizing:border-box;
}

.dropField.ui-state-highlight{
    border-color:#999c9f;
}

.dropField.wrong{
    background: rgba(236,77,20,0.5);
}

.dropField.correct{
    background: rgba(178,194,16,0.5);
}

.stickyNoteContainment li{
    margin-bottom:10px;
}

.stickyNote{
    margin:0;
    padding:5px 2%;
    width:22%;
    height:100px;
    box-sizing:border-box;
    font-size:1.2em;
    cursor: -webkit-grab; 
    cursor: -moz-grab;
}

.stickyNote.ui-draggable-dragging{
    z-index:9999;
}  

.answerContainer{
    border:2px dashed #ccc;
    box-sizing:border-box;
    height:260px;
    background: rgba(0,0,0,0);
    -webkit-transition: background .3s ease;
    transition: background .3s ease;
}

.stickyNote:after{
    position:absolute;
    line-height:20px;
    width:20px;
    top:2px;
    right:2px;
    font-family: 'learn2fly';
    font-size: 10px;
    border-radius:100%;
    color:rgb(255,255,255);
    text-align:center;
}

.stickyNote.correct:after{
    content: "\e60f";
    background-color: #B2C210;

}

.hint{
    position:relative;
    width:80%;
    margin:0 auto;
    opacity:0;
    left:0;
    top:20px;
}

.hint .hintText{
    width:100%;
    float:none;
    text-align:center;
}

.step1{
    opacity:1;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
}