.vocab-audio-btn {

    position: absolute;
    bottom: 3px;
    right: 3px;
    width: 16px;
    height: 17px;
    overflow: hidden;
    border-width: 0;
    background: transparent url('../images/vocab-audio-btn-sheet.gif') 0 0 no-repeat;
}

    .vocab-audio-btn:hover {

        background-position: 0 -17px;
    }

.vocab-zone-holder {

    height: 23px;
    margin: 12px 0;
}

.vocab-b {

    overflow: auto;
}

    .vocab-b .vocab-area {

        display: block;
        width: 130px;
        height: 34px;
    }

    .vocab-grid {

        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .vocab-button {

        position: absolute;
        bottom: 5px;
        right: 5px;
    }

    .vocab-holder {

        width: 119px;
        height: 69px;
        background-color: #cccccc;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .vocab-item-container {

        position: relative;
    }

    .vocab-label {

        position: absolute;
        top: 10px;
        left: 0;
        width: 57px;
        color: #ffffff;
        z-index: 9;
        text-align: center;
    }
    .vocab-spain-1 {

        width: 124px;
    }

        .vocab-spain-1 .vocab-holder {

            height: 124px;
        }

    .vocab-items {

        padding: 10px 50px;
        text-align: center;
    }

        .vocab-b .vocab-items {

            position: relative;
            width: 610px;
            float: left;
            padding: 10px;
        }

        .spain-vocabulario1 .vocab-items {

            padding: 0 50px 20px;
            text-align: center;
        }

        .vocab-item {

            display: inline-block;
            width: 119px;
            height: 69px;
            margin: 10px;
        }

            .vocab-b .vocab-item {

                position: relative;
                width: 130px;
                height: auto;
            }

            .spain-vocabulario1 .vocab-item {

                width: 57px;
                margin: 10px 20px;
            }

            .vocab-b .vocab-image {

                width: 126px;
                height: 109px;
                border: 3px solid #999999;
                -webkit-border-radius: 7px;
                -moz-border-radius: 7px;
                border-radius: 7px;
                background-size: 132px 115px;
            }

                .vocab-b.vocab-puertorico1 .vocab-image {

                    background-size: auto auto;
                }

            .vocab-b .vocab-drop {

                width: 130px;
                height: 23px;
                background-color: #ffffff;
                border: 1px solid #cccccc;
                margin-top: 5px;
            }

                .vocab-b .vocab-item-answered .vocab-drop {

                    border-color: #ff6600;
                }

    .vocab-title {

        display: block;
        text-align: left;
        padding: 5px 30px 5px 5px;
    }

    .vocab-zones {

        padding: 30px 40px;
    }

        .vocab-b .vocab-zones {

            width: 145px;
            float: right;
            padding: 20px;
        }

        .spain-vocabulario1 .vocab-zones {

            padding: 20px 20px 0;
            text-align: center;
        }




        .mexico-vocabulario .vocab-c .vocab-main {

            position: relative;
            width: 100%;
        }

        .mexico-vocabulario .vocab-c .vocab-zones {

            float: none;
            width: auto;
        }

            .mexico-vocabulario .vocab-b.vocab-c .vocab-zones .vocab-area {

                display: inline-block;
                margin: 10px;
            }

    .vocab-zone {

        position: relative;
        display: inline-block;

        background-color: #ffffff;
        border: 3px solid #999999;
        margin: 10px 10px 15px 10px;
        padding: 3px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
        font-size: 11px;
        z-index: 10;
        vertical-align: top;
    }

        .vocab-zone:hover {

            border-color: #0099ff;
        }

        .vocab-b .vocab-zone {

            display: block;
            width: 130px;
            margin: 0;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            cursor: auto;
        }

        .vocab-drop .vocab-zone {

            text-align: left;
            background-color: transparent;
        }




        .vocab-zone-end {

            margin-right: 115px;
        }

        .vocab-zone-template-right:after {

            position: absolute;
            content: "";
            border-bottom: 2px solid black;
            top: 0;
            left: 50%;
            width: 149px;
            height: 50%;
            z-index: -1;
        }

        .vocab-zone-template-top-right:after {

            position: absolute;
            content: "";
            border: 2px solid black;
            top: -15px;
            left: 50%;
            width: 149px;
            height: 50%;
            z-index: -1;
        }

        .vocab-zone-template-left:before {

            position: absolute;
            content: "";
            border-bottom: 2px dotted black;
            top: 50%;
            left: -23px;
            width: 20px;
        }

        .vocab-zone-template-top-left:before {

            position: absolute;
            content: "";
            border-top: 2px dotted black;
            border-right: 2px dotted black;
            border-left: 2px dotted black;
            top: -23px;
            left: -240px;
            width: 308px;
            height: 18px;
        }

        .vocab-zone-template-bottom-right:after {

            position: absolute;
            content: "";
            border-right: 2px solid black;
            top: 55%;
            left: 0;
            width: 138px;
            height: 60%;
            z-index: -1;
        }

.vocab-mobile {

    display: none;
}

    .vocab-mobile-list {

        width: 100px;
        height: 20px;
    }

    .vocab-mobile-badge {

        position: absolute;
        top: -10px;
        left: -10px;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        background-color: #ffffff;
        border: 3px solid #0099ff;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        font-size: 13px;
        font-weight: bold;
    }
    .vocab-mobile-cover {

        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 100;
    }


    .vocab-b .vocab-item-active .vocab-image,
    .vocab-zone-active {

        border-color: #0099ff;
    }

    .vocab-b .vocab-item-answered .vocab-image,
    .vocab-zone-answered {

        border-color: #ff6600;
    }

.vocab-c {


}

    .vocab-c .vocab-mobile-container {

        display: none;
        text-align: center;
        padding: 20px;
    }

    .vocab-c .vocab-mobile-window {

        position: relative;
        display: inline-block;
        margin: 7px;
        padding: 3px;
        border: 3px solid #999999;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        background-color: #ffffff;
        text-align: left;
    }

        .vocab-c .vocab-mobile-window .vocab-audio-btn {

            display: none;
        }

            .vocab-c .vocab-mobile-window.vocab-item-answered {

                border-color: #ff6600;
            }
            .vocab-c .vocab-mobile-window.vocab-item-answered .vocab-audio-btn {

                display: block;
            }

        .vocab-c .vocab-mobile-window-image {

            position: relative;
            width: 200px;
            height: 100px;
            overflow: hidden;
            background-color: #333333;
        }

        .vocab-c .vocab-mobile-window img {

            position: absolute;
        }

    .vocab-mobile-window[data-uid="i6AgazTMwUc"] img { left: -175px; top: 0; }
    .vocab-mobile-window[data-uid="PtGOs9-Ylkc"] img { left: -40px; top: -100px; }
    .vocab-mobile-window[data-uid="ETmVa79WRUc"] img { transform: scale(2.8); left: -260px; top: -150px; }
    .vocab-mobile-window[data-uid="3z7wyV0PVEA"] img { transform: scale(4); left: -370px; top: -215px; }
    .vocab-mobile-window[data-uid="EIlnE9j33UQ"] img { transform: scale(1.5) rotate(85deg); left: -1px; top: -255px; }
    .vocab-mobile-window[data-uid="aNMP3eAku0w"] img { transform: scale(1.5) rotate(85deg); left: 30px; top: -185px; }
    .vocab-mobile-window[data-uid="QK0xXtOHykA"] img { transform: scale(1.5) rotate(85deg); left: -25px; top: -115px; }
    .vocab-mobile-window[data-uid="mueb9tVEHEc"] img { transform: scale(1.5); left: -130px; top: -400px; }
    .vocab-mobile-window[data-uid="oLr4kH7wRUg"] img { left: -115px; top: -385px; }

    .vocab-mobile-window[data-uid="TwDL6r6VkU4"] img { left: -215px; top: -10px; }
    .vocab-mobile-window[data-uid="TnsE6zbF7EE"] img { left: -175px; top: -10px; }
        .vocab-mobile-window[data-uid="TnsE6zbF7EE"]:before {

            display: block;
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyMDBweCIKCSBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMjAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8yIj4KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTE2LjMyMSw1OC4zNTggMTEwLjg5NCw0OS45OTQgMTA4Ljg2OCw1My45NjUgNDkuODk0LDIzLjg4OCA0OS40NCwyNC43NzkgMTA4LjQxNCw1NC44NTUgCgkJMTA2LjM2Myw1OC44NzcgCSIvPgo8L2c+Cjwvc3ZnPg==");
            content: "";
            width: 200px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
        }
    .vocab-mobile-window[data-uid="9tK-59bOaEw"] img { left: -225px; top: -95px; }
    .vocab-mobile-window[data-uid="ucbxUB8YS0s"] img { left: -125px; top: -225px; }
    .vocab-mobile-window[data-uid="97lZaoCZ00M"] img { left: 20px; top: -300px; }
    .vocab-mobile-window[data-uid="fwUOu2f_qkA"] img { left: -250px; top: -10px; }
        .vocab-mobile-window[data-uid="fwUOu2f_qkA"]:before {

            display: block;
            background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyMDBweCIKCSBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMjAwIDEwMCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjAwIDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnIGlkPSJMYXllcl8yIj4KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTAwLjMyMSw0Mi40MSAxMDUuNjg4LDM0Ljg4MyAxMDcuNjg5LDM4LjQ1NiAxNjUuOTkxLDExLjM4OCAxNjYuNDM5LDEyLjE5IDEwOC4xMzksMzkuMjU4IAoJCTExMC4xNjYsNDIuODc3IAkiLz4KPC9nPgo8L3N2Zz4=");
            content: "";
            width: 200px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9;
        }
    .vocab-mobile-window[data-uid="zjlTFIqjik4"] img { left: -320px; top: -95px; }
    .vocab-mobile-window[data-uid="lsHqF3Pi904"] img { left: -220px; top: -155px; }
    .vocab-mobile-window[data-uid="QyQ5rRV3E0Q"] img { left: -240px; top: -230px; }

    .vocab-c .vocab-main {

        position: absolute;
    }

    .vocab-c .vocab-main-image {

        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .vocab-c svg {

        position: relative;
        z-index: 2;
    }


    .vocab-main-image.vocab-d  {

        left: 193px;
    }


    .vocab-b.vocab-puertorico1 .vocab-items {

        height: 500px;
        background-repeat: no-repeat;
        width: 630px;
    }

    .vocab-b.vocab-puertorico1 .vocab-zones {

        margin: 12px 1px 12px 0;
        padding: 0;
    }

    .vocab-b .vocab-puertorico1-room {

        position: absolute;
        z-index: 100;
        margin: 0;
        height: 160px;
        overflow: visible;
    }

        .vocab-b .vocab-puertorico1-room .vocab-image {

            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border-width: 0;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }

        .vocab-b.vocab-puertorico1 .vocab-item-active:before {

            position: absolute;
            content: "";
            display: block;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255,255,255,0.3);
        }

        .vocab-b.vocab-puertorico1 .vocab-drop {

            position: absolute;
            margin: 0;
            border: 2px solid #000000;
            background: #ffffff url('../images/arrow-up.gif') 92px 1px no-repeat;
            z-index: 100;
        }

            .vocab-b.vocab-puertorico1 .vocab-item.vocab-item-answered .vocab-drop {

                border-color: #ff6600;
            }

        .vocab-b.vocab-puertorico1 .vocab-item-mobile {

            display: none;
        }

        .vocab-b.vocab-puertorico1 .vocab-item {

            display: none;
            position: absolute;
            margin: 0;
        }

        .vocab-b.vocab-puertorico1 .vocab-image {

            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            border-width: 0;
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
        }

        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="SeghkpExiU0"] { display: block; left: 0; top: 232px; width: 99px; height: 149px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="Cr0vqwnj0k4"] { display: block; left: 310px; top: 338px; width: 39px; height: 127px;  }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="nS2AeN9_wkU"] { display: block; left: 531px; top: 183px; width: 138px; height: 125px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="ydmQUFjq9EU"] { display: block; left: 362px; top: 339px; width: 307px; height: 125px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="d4zZXH2lqE0"] { display: block; left: 355px; top: 33px; width: 165px; height: 119px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="5wU5yq6K7Uo"] { display: block; left: 98px; top: 33px; width: 194px; height: 119px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="yUe0H-9vZEw"] { display: block; left: 98px; top: 339px; width: 202px; height: 124px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="vuWRD88WS0w"] { display: block; left: 305px; top: 183px; width: 214px; height: 124px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="I32l75qJLU4"] { display: block; left: 99px; top: 183px; width: 144px; height: 124px; }

        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="5wU5yq6K7Uo"] .vocab-drop { top: -30px; left: 15px; background-image: url('../images/arrow-down.gif'); }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="I32l75qJLU4"] .vocab-drop { top: -30px; left: 5px; background-image: url('../images/arrow-down.gif'); }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="yUe0H-9vZEw"] .vocab-drop { top: -30px; left: 0px; background-image: url('../images/arrow-down.gif'); }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="ydmQUFjq9EU"] .vocab-drop { right: 5px; }
        .vocab-b.vocab-puertorico1 .vocab-item[data-uid="Cr0vqwnj0k4"] .vocab-drop { left: -80px; }


@media all and (max-width: 845px){

    .vocab-zones {

        padding: 30px 10px;
    }

    .vocab-zone-end {

        margin-right: 25px;
    }

    .vocab-c .vocab-mobile-container {

        display: block;
    }

    .vocab-c .vocab-area {

        margin: 0;
    }

    .mexico-vocabulario .vocab-c .vocab-main,
    .vocab-c .vocab-zones,
    .vocab-c .vocab-main {


        position: absolute;
        background-color: red;
        width: 840px;
        height: 415px;
        top: 0;
        left: 0;
        z-index: -1;
        visibility: hidden;
    }

    .vocab-b .vocab-items {

        width: auto;
        float: none;
        padding: 10px;
    }

    .vocab-b .vocab-zones {

        float: none;
        width: auto;
    }

    .vocab-b .vocab-area {

        display: inline-block;
        width: auto;
        height: auto;
        vertical-align: top;
        margin: 5px;
    }

    /* Puerto Rico 1 */

    .vocab-b.vocab-puertorico1 .vocab-zone.vocab-puertorico1-hidden {

        display: block;
    }

    .vocab-b.vocab-puertorico1 .vocab-zones {

        display: none;
    }

    .vocab-b.vocab-puertorico1 .vocab-zone {

        background-color: transparent;
    }

    .vocab-b.vocab-puertorico1 .vocab-mobile {

        display: block;
    }

    .vocab-b.vocab-puertorico1 .vocab-mobile-list {

        height: 20px;
        width: 160px;
    }

    .vocab-b.vocab-puertorico1 .vocab-image {

        background-color: #333333;
        background-position: center top;
        max-height: 118px;
    }

    .vocab-b.vocab-puertorico1 .vocab-items {

        background-image: none !important;
        text-align: center;
        width: 100%;
        height: auto;
        margin: 30px 0;
        padding: 0;
    }

    .vocab-b.vocab-puertorico1 .vocab-item-mobile {

        display: block;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        background-color: #ffffff;
    }

        .vocab-b.vocab-puertorico1 .vocab-item-mobile .vocab-audio-btn {

            display: none;
        }

        .vocab-b.vocab-puertorico1 .vocab-item.vocab-item-answered .vocab-audio-btn {

            display: block;
        }

    .vocab-b.vocab-puertorico1 .vocab-item {

        position: relative;
        display: inline-block !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 200px !important;
        height: 150px !important;
        margin: 10px;
        overflow: hidden;
        background-color: #ffffff;
        border: 3px solid #999999;
        padding: 3px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

        .vocab-b.vocab-puertorico1 .vocab-item.vocab-item-answered {

            border-color: #ff6600;
        }

    .vocab-b.vocab-puertorico1 .vocab-drop {

        display: none;
    }

    .vocab-b.vocab-puertorico1 .vocab-item[data-uid="ydmQUFjq9EU"] .vocab-image { background-position: right top; }
}

@media all and (max-width: 700px){

    .vocab-zone-template-left:before,
    .vocab-zone-template-right:after,
    .vocab-zone-template-top-left:before,
    .vocab-zone-template-top-right:after,
    .vocab-zone-template-bottom-right:after {

        display: none;
    }

    .vocab-mobile {

        display: block;
    }

    .vocab-items {

        padding: 10px;
        text-align: center;
    }

    .vocab-item {

        position: relative;
    }

    .vocab-zones {

        text-align: center;
        padding: 10px;
    }

    .vocab-zone {

        margin: 5px;
    }

    .spain-vocabulario1 .vocab-holder,
    .spain-vocabulario1 .vocab-items,
    .spain-vocabulario1 .vocab-item-container {

        display: none;
    }

    .vocab-b .vocab-zone {

        cursor: default;
        position: relative;
        top: auto;
        left: auto;
    }
}