.word-cat-wrapper {
    /*overflow: hidden;*/

    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin-bottom: 2em;
}

.word-cat-title {
    text-align: center;
    font-size: 1.4em !important;
}

.word-cat-wrapper h2 {
    text-align: center;
    margin: 0 0 2px;
}

.word-cat-wrapper .col-sm-4 {
    padding-left: 5px;
    padding-right: 5px;
}

.word-cat-overlay-word-wrapper {
    position: absolute;
    width: 100%;
    left: 50%;
    max-width: 40em;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.word-cat-word {
    font-size: 1.5em;
    cursor: pointer;
    background: #73c2f3;
    text-shadow: -1px 1px 1px rgba(0,0,0,0.2);
    color: white;
    display: inline-block;
    border-radius: 2px;
    /*text-align: center;*/
    padding: 0 0.1em;
    margin: 0.1em;
    box-shadow: 0 1px 3px rgba(60, 60, 60, 0.3);
    touch-action: manipulation;
    min-width: 5em;
}

.word-cat-correct {
    background-color: #b0de9d !important;
    border-radius: 2px;
    font-size: 1.2em;
    pointer-events: none;
    position: relative;
}

.word-cat-red-blink {
    animation-duration: 0.5s;
    animation-name: redBlink;
    animation-iteration-count: 1;
    -webkit-animation: redBlink 0.5s 1;
}

@keyframes redBlink {
    0% {
        background-color: red;
    }
    100% {
        /*Original color, auto, initial or inherit did not have consistent behavior between devices*/
        background-color: #73c2f3;
    }
}
@-webkit-keyframes redBlink {
    0% {
        background-color: red;
    }
    100% {
        /*Original color, auto, initial or inherit did not have consistent behavior between devices*/
        background-color: #73c2f3;
    }
}

/*.word-cat-overlay-showing {*/
    /*display: block;*/
    /*background-color: rgba(255, 255, 255, 0.70);*/
/*}*/

.word-cat-selection-area{

    display: flex;
    flex-direction: column;
    justify-content: center;

    position: relative;
    cursor: pointer;
    border: 1px solid rgb(150, 150, 150);
    box-shadow: inset 0 0 6px rgb(186, 186, 186);
    border-radius: 100%;
    text-align: center;
    padding: 1em;
    max-height: 16em;
    max-width: 16em;
    margin: 0 auto;

    /*width: 18vw;*/
    /*height: 100%;*/
}

.word-cat-selection-area-image {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    max-height: 4.5em;
    border-radius: 100% !important;
}

.word-cat-blue-circle {
    border: 2px solid rgb(151, 213, 249)
}

.word-cat-tip {
    position: relative;
    color: #bcbcbc;
}

.word-cat-area-selected {

}

/*.word-cat-selection-area:after {*/
    /*content: "";*/
    /*display: block;*/
    /*padding-bottom: 100%;*/
/*}*/

.wc-col-xs-6, .wc-col-xs-12, .wc-col-xxs-6 .wc-col-xxs-12 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

@media only screen and (max-width: 767px) {

    .wc-col-xs-6 {
        width: 48%;
        float: left;
        margin-bottom: 7px;
    }

    .wc-col-xs-12 {
        width: 100%;
        float: left;
    }

    .word-cat-wrapper {
        /*margin-top: 2em;*/ /*Prevent words from disappearing when appearing at the top*/
        margin-bottom: 4em;
    }

    .word-cat-word {
        min-width: 3em;
    }

    /*.word-cat-overlay {*/

        /*top: 0;*/
        /*left: 0;*/
        /*margin-left: 0;*/
        /*height: 100%;*/
        /*width: 100%;*/
    /*}*/

    .word-cat-selection-area {

        max-height: 12em;
        max-width: 13.5em;
    }
}

@media only screen and (max-width : 544px) {

    .wc-col-xxs-12 {
        width: 100%;
        float: left;
    }

    .wc-col-xxs-6 {
        width: 47%;
        float: left;
        margin:1px;
    }


}