#cards {
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
}

.card {
    width: 280px;
    min-height: 410px;
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    transform: translateZ(0);
}

.card-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.card-wrap figure {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.chrome .card-wrap figure,
.firefox .card-wrap figure {
    -webkit-transform: translateZ(.1px);
    transform: translateZ(.1px);
}

.card-wrap figure.card-back,
.card.back .card-wrap {
    transform: rotateY(179.9deg);
}

figure.card-back .vocab-card__phrase {
    height: 158px;
    overflow: hidden;
}

.card .info {
    background: #eee;
    border: 1px solid #bbb;
    border-radius: 11px/10px;
    width: 20px;
    height: 16px;
    line-height: 13px;
    text-align: center;
    position: absolute;
    top: 8px;
    right: 9px;
    z-index: 30;
    cursor: pointer;
}

.card-image {
    text-align: center;
    font-size: .0001px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 50px;
    left: 0;
}

.card-image:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.card-image * {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.card-header {
    background: #fff;
    height: 50px;
    color: #4d4d4d;
    line-height: 48px;
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    cursor: pointer;
}

.card-back .card-header {
    background: #fff;
    color: #069;
    border-bottom: 1px solid #afafaf;
}

.card-header + .card-image {
    top: 60px;
    bottom: 7px;
}


.card-play {
    width: 32px;
    height: 30px;
    position: absolute;
    top: 14px;
    right: 10px;
}

.card-play svg {
    fill: #000;
    width: 32px;
    height: 30px;
    cursor: pointer;
}

.card-known-word-btn {
    background: #060;
    border: 2px solid rgba(255, 255, 255, .92);
    border-radius: 8px;
    color: #fff;
    font: bold 19px/50px Arial, Helvetica;
    width: 140px;
    height: 50px;
    text-align: center;
    position: absolute;
    top: 36%;
    left: 50%;
    margin-left: -72px;
    cursor: pointer;
    display: none;
}

.card.ready:hover .card-known-word-btn {
    display: block;
}

.card.known .card-known-word-btn {
    display: none !important;
}

#cards.learning.pronoun .card-known-word-btn {
    top: 42%;
}

#cards .card-main {
    transition: left .5s;
    left: -1800px;
    -webkit-transform: translateZ(.1px);
    transform: translateZ(.1px);
}

#cards .choice-A {
    transition: left .5s;
    left: 3200px;
}

#cards .choice-A:hover .card-wrap,
#cards .choice-A.active .card-wrap {
    box-shadow: 0 0 2px #a40;
    border-color: #0c0;
    cursor: pointer;
}

#cards .choice-A .card-image {
    bottom: 7px;
}

#cards .choice-A .card-back {
    background-size: 8% 12%;
    background: #eee repeating-linear-gradient(120deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px),
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 1px, transparent 1px, transparent 60px),
    linear-gradient(60deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1)),
    linear-gradient(120deg, rgba(0, 0, 0, .1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .1) 75%, rgba(0, 0, 0, .1)) 7px 12px;
}

#cards .choice-A.active .card-wrap {
    cursor: auto;
}

#cards .choice-A.active-wrong .card-wrap {
    box-shadow: 0 0 2px #555;
    border-color: #555;
    cursor: auto;
}

.card-main.stage-type-B:not(.stage-level-2) .card-footer {
    background: #fff;
    color: #069;
    -webkit-transform: translateZ(.1px);
    transform: translateZ(.1px);
}

#cards .choice-B {
    -webkit-perspective: 800px;
    perspective: 800px;
    position: absolute;
    transition: left .5s;
    left: 3200px;
}

#cards .choice-B .choice-wrap {
    background: #ccc;
    border: 1px solid #999;
    color: #000;
    font-size: 30px;
    line-height: 48px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#cards .choice-B figure {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#cards .choice-B .choice-back {
    background: #777;
    -webkit-transform: rotateX(179.9deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

#cards .choice-B:hover .choice-wrap,
#cards .choice-B.active .choice-wrap {
    border-color: #0c0;
}

#cards .choice-B.active .choice-wrap,
#cards .choice-B.active-wrong .choice-wrap {
    cursor: auto;
}

#cards .choice-B.active-wrong .choice-wrap {
    border-color: #999;
}

.card-main.stage-type-pronoun:not(.stage-level-2) .card-footer {
    background: #fff;
    color: #069;
    -webkit-transform: translateZ(.1px);
    transform: translateZ(.1px);
}

#cards .choice-pronoun {
    -webkit-perspective: 800px;
    perspective: 800px;
    position: absolute;
    transition: left .5s;
    left: 3200px;
}

#cards .choice-pronoun .choice-wrap {
    background: #ccc;
    border: 1px solid #999;
    color: #000;
    font-size: 30px;
    line-height: 48px;
    text-align: center;
    text-transform: uppercase;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#cards .choice-pronoun figure {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#cards .choice-pronoun .choice-back {
    background: #777;
    -webkit-transform: rotateX(179.9deg);
    -moz-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}

#cards .choice-pronoun:hover .choice-wrap,
#cards .choice-pronoun.active .choice-wrap {
    border-color: #0c0;
}

#cards .choice-pronoun.active .choice-wrap,
#cards .choice-pronoun.active-wrong .choice-wrap {
    cursor: auto;
}

#cards .choice-pronoun.active-wrong .choice-wrap {
    border-color: #999;
}

#card-next-btn {
    background: #fafafa;
    border: 1px solid #ccc;
    height: 34px;
    padding: 1px 7px;
    font-size: 17px;
    position: absolute;
    top: 240px;
    left: 50%;
    margin-left: 164px;
}

#card-training-btn {
    background: #0C6;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 17px;
    color: #fff;
    height: 34px;
    padding: 0 6px;
    position: absolute;
    top: 240px;
    left: 50%;
    margin-left: 180px;
}

/* Information Video */
.cards-info-video {
    background: #fff;
    height: 230px;
    position: absolute;
    top: 50px;
    right: 5px;
    left: 5px;
    z-index: 50;
}

.cards-info-video video {
    width: 100%;
    visibility: hidden;
}

.cards-info-video .preloader {
    font: bold 16px/190px serif;
    text-align: center;
}

.cards-info-video.ready video {
    visibility: visible;
}

.cards-info-video.ready .preloader {
    display: none;
}

/* Video Quiz */
.modal-style-3 {
    background: #fff;
    opacity: .7;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 180;
}

.popup-style-3::after {
    content: "";
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    bottom: -60px;
}


#video-quiz-answers {
    padding: 0;
    margin: 0;
}

#video-quiz-answers .answer {
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 9px 8px 12px;
    width: 232px;
    text-align: center;
    list-style: none;
    margin: 7px 0 15px;
    cursor: pointer;
}

#video-quiz-answers .answer:hover {
    border-color: #aaa;
}

#video-quiz-answers .answer.correct {
    background: #0e0;
}

#video-quiz-answers .answer.wrong {
    text-decoration: line-through;
}

.gecko .card-wrap {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.ready:hover .card-known-word-btn {
    display: block;
}

.known:hover .card-known-word-btn1 {
    display: block;
}

.ready1 .card-known-word-btn {
    display: block;
}

.element-overlay {
    position: absolute;
    z-index: 9999;
}

.info {
    display: none !important;
}

.my-cards {
    float: left;
    width: 290px;
    min-height: 440px;
    margin-left: 10px;
}

.my-cards-known {
    float: left;
    width: 280px;
    height: 330px;
}

.my-cards-ready {
    float: left;
    width: 280px;
    height: 330px;
}

.my-cards-known .part-0, .my-cards-known .part-1, .my-cards-known .part-2, .my-cards-known .part-3, .my-cards-known .part-4 {
    background: url(/wp-content/themes/english/extensions/cards4beginners/img/p5.png) no-repeat;
}

.preloader1 {
    background: url(/wp-content/themes/english/assets/images/preloader-18x18-grey.gif);
    width: 18px;
    height: 18px;
    margin: auto;
    display: none;
}

.preloader1.active {
    display: block;
}

.card-known-word-btn {
    background: #00a9ef;
    color: #fff !important;
    font-size: 11px;
    border-radius: 3px;
    position: absolute;
    cursor: pointer;
    width: 50px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    top: 5px;
    left: 50%;
    margin-left: -25px;
}

.card-outer {
    position: relative;
}

.card-outer .pick-videos_c {
    position: absolute;
    top: 3px;
    left: 75px;
    color: #4594D1;
    z-index: 99;
}

.card-outer .pick-videos_c .pick-video {
    display: inline-block;
    border: 1px solid transparent;
}

.card-outer .pick-videos_c .pick-video:hover {
    border: 1px dashed #d3d3d3;
}

.card-known-word-btn1 {
    border: none;
    font-weight: normal;
}

.my-cards-ready {
    font-family: helioslightregular, serif;
}

.card-phrase-act {
    text-align: center;
    margin: 45px 10px 10px;
    width: 230px;
    font-size: 15px;
}

.card-phrase-en {
    margin-bottom: 10px;
}

.card-phrase-en-extra {
    font-size: 13px;
    margin: 10px;
}

.card-video {
    height: 170px;
    background: black;
}

.vocab-card__video.no-videos,
.video_wrap.no-videos {
    text-align: center;
    background: #e2e2e2;
    display: table;
    width: 100%;
}

.no-videos .no-video-text {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.no-videos #video {
    background: none !important;
}

.vocab-card__video.no-videos:before {
    background: none;
}

.video-wrap .no-video-text {
    display: none;
}

.video-wrap.no-videos .no-video-text {
    display: block;
}