body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.col {
    width: 50%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.red {
    background-color: red;
}

.orange {
    background-color: #c0392b;
}

.yellow {
    background-color: #f1c40f;
}

.green {
    background-color: #2ecc71;
}

.blue {
    background-color:#3498db;
}

.purple {
    background-color: #9b59b6;
}



.waffle-list {
    list-style: none outside none;
    padding: 1em;
    position: relative;
    width: 30em;
    color:#fff;
}

.waffle-list li {
    cursor: default;
    padding: 1em;
    margin-bottom: 1em;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.waffle-list li:hover {
    cursor: pointer;
}