/** Font face **/
@font-face {
    font-family: 'comicsans';
    src: url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/comicsans.woff') format('woff'), url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/comicsans.eot') format('eot');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FontAwesome';
    src: url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.eot");
    src: url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.woff2") format("woff2"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.woff") format("woff"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.ttf") format("truetype"), url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/fontawesome-webfont.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ADV_CALIBRI';
    src: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.eot);
    src: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.eot) format("embedded-opentype"),
        url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.woff) format("woff"),
        url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/fonts/ADV_CALIBRI_REGULAR.ttf) format("truetype");
}

/** Font face ends **/


body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
    overflow-x: hidden !important;
}

/* Reset CSS */
html {
    line-height: 1.15;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

figcaption,
figure,
main {
    /* 1 */
    display: block;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

pre {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

a {
    background-color: transparent;
    /* 1 */
    -webkit-text-decoration-skip: objects;
    /* 2 */
}

abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

b,
strong {
    font-weight: inherit;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

dfn {
    font-style: italic;
}

mark {
    background-color: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

audio,
video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

img {
    border-style: none;
}

svg:not(:root) {
    overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    /* 1 */
    font-size: 100%;
    /* 1 */
    line-height: 1.15;
    /* 1 */
    margin: 0;
    /* 2 */
}

button,
input {
    /* 1 */
    overflow: visible;
}

button,
select {
    /* 1 */
    text-transform: none;
}

button,
html [type="button"],
/* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

progress {
    display: inline-block;
    /* 1 */
    vertical-align: baseline;
    /* 2 */
}

textarea {
    overflow: auto;
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

details,
/* 1 */
menu {
    display: block;
}

summary {
    display: list-item;
}

canvas {
    display: inline-block !important;
}

template {
    display: none;
}

[hidden] {
    display: none;
}

/* Reset CSS ends */
.md-button.md-default-theme:not([disabled]):hover,
.md-button:not([disabled]):hover {
    background: none;
}

.md-ripple-container {
    display: none;
}

.fontface_ADV_CALIBRI {
    font-family: 'Poppins';
    font-size: 6vw;
    font-weight: bolder;
}

.fontfaceRed_ADV_CALIBRI {
    font-family: 'Poppins';
    font-size: 11vw;
    color: red;
    font-weight: bolder;
}

.cardFadeout {
    opacity: 0;
    transition: opacity 1.25s ease-in-out;
    -moz-transition: opacity 1.25s ease-in-out;
    -webkit-transition: opacity 1.25s ease-in-out;
}

.demotrump {
    height: 70%;
    width: 80%;
    font-size: 6vw;
    max-width: 80%;
    max-height: 70%;
}

.demofontface_ADV_CALIBRI_Red {
    font-family: 'Poppins';
    font-size: 13vw;
    color: red;
    -webkit-text-stroke: 2px black;
}


/** Flash card style **/
.f-card {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 33vh;
    /** can be changed based on requirement **/
    height: 50vh;
    /** can be changed based on requirement **/
    background: #fff;
    max-height: 129.03vw;
    max-width: 100vw;
    margin: auto;
    border-radius: 15px;
}

.mainFlashcard_flip .testcard1_ff {
    /* background: #fff; */
    background-repeat: no-repeat;
    font-size: 26vmin;
    height: 100%;
    width: 100%;
    border: 10px solid #454B7A;
    border-radius: 20px;
    cursor: pointer !important;
    background-color: #444B79;
    color: white;
}
.interactivity div#consonant_pick .book3-click-flip .testcard1_ff {
    cursor: auto !important;
}
.mainFlashcard_flip .flash-card-table .cell-space {
    position: relative;
    width: 27vh;
    height: 35vh;
    max-height: 151.51vw;
    max-width: 100vw;
    margin: 0 auto;
    padding: 0;
}

.f-card.border-blue,
.border-blue {
    border: 3px solid #324B96;
}

.f-card.border-black,
.border-black {
    border: 3px solid #333;
}

.f-card.border-green,
.border-green {
    border: 3px solid #00a150;
}

.f-card.border-green,
.border-red {
    border: 3px solid red;
}

/** Align text vertically middle **/
.align-v-middle {
    margin-top: -21%;
}

.align-v-middle.cap {
    margin-top: -10%;
}

/** Align text vertically middle ends **/
/** Right and wrong tick mark **/
.checked,
.un-checked {
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50%;
    background: #00a150;
}

.un-checked {
    background: red;
}

.checked i,
.un-checked i {
    position: absolute;
    left: 0;
    right: 0;
    display: block;
    margin: 0 auto;
    color: #fff;
}

/** Right and wrong tick mark ends **/
.instruction_text {
    position: relative;
    display: table;
    margin: 10px auto 0;
    text-align: center;
    font-weight: 600;
    /*border-radius: 10px;
    background: #f9b200;
    border: 3px solid #7d701b;*/
    font-family: 'Poppins';
    color: #333;
    cursor: pointer;
}

.instruction_text tooltip {
    position: absolute;
    right: 0;
    bottom: 0;
}

.instruction_text tooltip tip {
    right: 20px;
}

.instruction_text .icon-volume {
    width: 40px;
    height: 34px;
    margin-left: 5px;
    right: 3px;
    bottom: -10px;
}

.icon-volume {
    display: inline-block;
    margin: 0 auto;
    width: 40px;
    height: 34px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/volume-play.png) center center/100% 100% no-repeat;
    vertical-align: middle;
}

.FadeOut.ng-hide {
    opacity: 0;
}

.FadeOut.ng-hide-remove {
    transition: opacity linear 1.75s;
}

.FadeOut.ng-hide-add {
    -webkit-transition-duration: 1s;
    /* Safari */
    -webkit-transition-delay: 0.10s;
    /* Safari */
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0.10s;
}

/** Rating star style **/
.icon-star {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: 0 5px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/icon-star.png) 0 0/100% 100% no-repeat;
}

.text-progress {
    font-size: 8vmin;
    
}

/** Preloader style **/
.preloader-bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: table;
}

.preloader-bg md-progress-circular {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.preloader-bg md-progress-circular svg {
    position: static !important;
}

/* Dashboard back button style */
.dashboard-back {
    position: fixed;
    left: 10px;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #000;
    color: #000;
    padding: 0 15px 0 35px;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    font-family: 'Poppins';
    text-decoration: none;
    bottom: 15px;
    height: 37px;
    line-height: 37px;
}

.dashboard-back:hover {
    background: #ffcc00;
}

.dashboard-back i {
    position: absolute;
    left: 15px;
    top: 8px;
}

/** Word highlights **/
.highlight {
    font-size: 10vw !important;
    -webkit-text-stroke: 3px black !important;
    -webkit-font-smoothing: antialiased;
    transform: scale(1.1);
    font-weight: 400;
    color: red;
}

/* Media query style */
@media(min-width: 2000px) {
    /* .instruction_text {
        width: 1200px;
    } */
}

@media(max-width:1024px) {
    .instruction_text .icon-volume {
        bottom: -14px;
    }
}

@media(max-height: 900px) {
    .instruction_text .icon-volume {
        bottom: -13px;
    }
}

@media(max-height:700px) {
    .instruction_text .icon-volume {
        bottom: -14px;
    }
}

/** header and footer style **/
html.potrait {
    height: 100vh !important;
}

header {
    position: fixed;
    min-height: 80px;
    height: 80px;
    margin: 0;
    padding: 0 15px;
    font-size: 25px;
    background: #ffcc00;
    border-bottom: 0px solid;
    z-index: 1;
    font-family: 'Poppins';
    z-index: 1;
    width: 100%;
    top: 0;
}

header:after {
    content: '';
    display: table;
    clear: both;
}

/* header.appPotrait {
    padding-top: env(safe-area-inset-top, 20px) !important;
} */

.logo-wrap {
  float: left;
    margin: 0 !important;
    background: linear-gradient(111deg, rgba(255,255,255,1) 0, rgba(255,255,255,1) 88%, rgb(25 52 99 / 0%) 88%, rgb(25 52 99 / 2%) 100%);
         margin-left: -40px !important;
    padding-left: 31.5px;
    padding-right: 36.5px;
    height: 80px;
    /* margin-top: -6px !important;
    margin-bottom: -6px !important; */
}

.landscape .logo-wrap {
      display: flex !important;
      align-items: center;
  }


.sommer-logo {
    position: relative;
    float: left;
    width: 67px;
    height: 55px;
    margin: 0 10px 0 0;
    text-indent: -100%;
    font-size: 0;
    background: url(../images/reading.png) 0 0/100% 100% no-repeat;
}

.sommer-logo:after {
    border-right: 1px solid #485d83;
    content: '';
    position: absolute;
    height: 45px;
    right: -10px;
    top: 7px;
}

.phonics-logo {
    float: left;
    position: relative;
    width: 152px;
    height: 55px;
    margin: 0 0 0 10px;
    text-indent: -100%;
    font-size: 0;
    background: url(../images/reading-success.png) 0 0/100% 100% no-repeat;
    background-color: #fff;
}

.phonics-logo:before {
    margin-left: -4px;
    border-left: 1px solid #fae2aa;
    content: '';
    position: absolute;
    height: 45px;
    left: -6px;
    top: 7px;
}

.header-right {
    float: right;
}

header .h-left {
    position: relative;
    float: left;
    padding: 0;
    display: flex;
    align-items: center;
}

header .h-right {
    float: right;
    /* text-transform: uppercase; */
    position: relative;
    width: 450px;
}

header .letters-text {
    float: left;
    width: 50%;
    margin: 10px 0 0;
    padding-right: 10px;
}

.titleWood {
    float: left;
    width: auto;
    padding: 0 20px;
    margin-top: -8px;
    margin-left: 10px;
}

.act-title {
    color: #333;
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin: 5px auto 2px;
    text-align: center;
    font-family: 'Poppins';
    text-transform: uppercase;
}

header .connect-dot-bg {
    height: 75px;
    padding: 0;
    font-size: 12px;
    text-align: center;
    background-size: 100% 100%;
    color: #333333;
    font-weight: 600;
    margin: 0 auto;
    width: 100%;
    position: absolute;
    padding-left: 26%;
    padding-right: 21%;
    top: 0;
    /* right: 0; */
}

header .connect-dot-bg>div {
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    line-height: 24px;
    height: 75px;
}

header .connect-dot-bg span {
    display: table-cell;
    vertical-align: middle;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    margin: 0 auto;
    line-height: 20px;
    font-size: 15px;
    /* to highlight title bar as per client feedback */
    border: none;
    color: #fff;
    box-shadow: none;
}

header .letters-text-wrap {
    margin: 0;
    max-width: 280px;
}

header .letters-text-wrap .align-wrap {
    float: right;
}

header .letters-text-wrap .align-wrap:after {
    content: '';
    display: table;
    clear: both;
}

header .md-button.md-icon-button {
    float: left;
    width: 173px !important;
    height: auto !important;
    margin: 10px 0 0 20px;
}

header .icon-chain {
    position: relative;
    display: table-cell !important;
    width: 195px;
    height: 70px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/roadtrip.png) 0 0/100% 100%;
    text-align: right;
    padding-right: 20px;
}

header .icon-chain .fa {
    font-size: 40px;
    left: 15px;
    position: absolute;
    top: 15px;
}

.lesson-wrap {
    font-size: 17px;
    height: auto;
    line-height: 46px;
    text-align: center;
}

.lesson-wrap ul {
    margin: 0;
    padding: 0;
    margin-top: 10px;
    margin-bottom: -10px;
}

.lesson-wrap ul:after {
    clear: both;
    display: table;
    content: '';
}

.lesson-wrap li {
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    list-style: none;
}

.lesson-wrap li strong {
    display: block;
    padding: 5px 0 5px;
    font-size: 12px;
    line-height: 24px;
    color: #44402d;
}

.title_Color {
    color: #fff !important;
}

.lesson-wrap.title_Color li strong {
    color: #fff !important;
}

.rdmap-wrap.title_Color li a {
    color: #fff !important;
}

.lesson-wrap li span {
    display: block;
    width: 35px;
    height: 35px;
    margin: 7px auto 0;
    text-transform: uppercase;
    color: #000;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 31px;
    border-radius: 0;
    border: 2px solid #fff;
    text-align: center;
    box-shadow: 0 1px 2px #333;
    background: #fff !important;
}

.lesson-wrap li:nth-child(1) span {
    background: #f66b00;
}

.lesson-wrap li:nth-child(2) span {
    background: #f31507;
}

.lesson-wrap li:nth-child(3) span {
    background: #2b3793;
}

.stageCnt {
    display: flex;
    vertical-align: middle;
    position: relative;
    /* margin: 0 auto; */
    padding: 2px 10px 2px 10px;
    text-align: center;
    background: #fff;
    border: none;
    border-radius: 0px;
    overflow-x: auto !important;
    max-width: 154px;
    height: 45px;
    overflow-y: hidden;
}

.stageCnt tooltip {
    float: left;
    width: 32px;
    height: 28px;
    margin: 0 2px 0 0;
    font-size: 12px;
    text-transform: none;
}

.currAct {
    color: #fff;
    background-color: #cba716 !important;
}

tooltip {
    display: inline-block;
    position: relative;
    font-size: 14px;
}

header .rdmap-wrap {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    /* text-transform: uppercase; */
    font-size: 11px;
    font-weight: 600;
    list-style: none;
    z-index: 5;
    height: 80px;
}

header .rdmap-wrap li {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    text-align: center;
}

/*header .rdmap-wrap li.icon-menu-bar:after {
	border-right: 1px solid #d68b52;
	content: '';
	position: absolute;
	height: 35px;
	left: -5px;
	top: 30px;
}*/


header .rdmap-wrap li:last-child {
    padding-right: 5px;
}

header .rdmap-wrap li a {
    display: block;
    padding: 6px 10px;
    color: #333;
    cursor: pointer;
    text-decoration: none;
}

/* header .rdmap-wrap li a i {
	position: relative;
	display: block;
	width: 35px;
	height: 35px;
	margin-top: 5px;
	line-height: 33px;
	border-radius: 50%;
	font-size: 20px;
	color: #333;
	background: #fff;
	border: 2px solid #84751a;
	transition: 0.3s ease-in;
} */
header .rdmap-wrap li a i {
    position: relative;
    width: 32px;
    height: 32px;
    margin-top: 5px;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    background: #2071a1;
    border: none;
    transition: 0.3s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:7px;
    margin-left: auto;
    margin-right: auto;
}

header .rdmap-wrap li a i span.bar {
    position: absolute;
    top: 14px;
    right: 0;
    width: 15px;
    height: 5px;
    background: #fff;
    display: none;
}

header .rdmap-wrap li a:hover i {
    color: #84751a;
    background: #fff;
}

header .rdmap-wrap figure {
    display: inline-block;
    position: relative;
    width: 37px;
    height: 37px;
    margin-right: 20px;
    vertical-align: middle;
    border-radius: 50%;
}

header .rdmap-wrap figure img {
    max-height: 37px;
    border-radius: 50%;
    border: 2px solid #fff;
}

header .rdmap-wrap figure:after {
    content: '';
    position: absolute;
    right: -14px;
    display: block;
    width: 1px;
    height: 60px;
    background: #d68b52;
    top: -12px;
}

/** footer style **/

.content-pagination {
    position: fixed;
    height: 70px;
    /* background:#F39F34; */
    border-top: 0px solid;
    font-family: 'Poppins';
    overflow: hidden;
    width: 100%;
    bottom: 0;
}

/* new header and footer color added(for potrait mode also).*/
.active_level_color_1,
.portrait .header .h-left.active_level_color_1,
.portrait .header .h-right.active_level_color_1 {
    background: #f69a1f !important;
    border-color: #f69a1f !important;
}

.active_level_color_2,
.portrait .header .h-left.active_level_color_2,
.portrait .header .h-right.active_level_color_2 {
    background: #e72426 !important;
    border-color: #e72426 !important;
}

.active_level_color_3,
.portrait .header .h-left.active_level_color_3,
.portrait .header .h-right.active_level_color_3 {
    background: #4a9b44 !important;
    border-color: #58B950 !important;
}

.active_level_color_4,
.portrait .header .h-left.active_level_color_4,
.portrait .header .h-right.active_level_color_4 {
	background: #b14910 !important;
    border-color: #f36212 !important;
}

.active_level_color_5,
.portrait .header .h-left.active_level_color_5,
.portrait .header .h-right.active_level_color_5 {
    background: #216295 !important;
    border-color: #2A7ABA;
}

.active_level_color_6,
.portrait .header .h-left.active_level_color_6,
.portrait .header .h-right.active_level_color_6 {
    background: #803378 !important;
    border-color: #9E3E93 !important;
}

.active_level_color_7,
.portrait .header .h-left.active_level_color_7,
.portrait .header .h-right.active_level_color_7 {
    background: #328f40 !important;
    border-color: #3EAB4E !important;
}

.active_level_color_8,
.portrait .header .h-left.active_level_color_8,
.portrait .header .h-right.active_level_color_8 {
    background: #31528b !important;
    border-color: #3A62A6 !important;
}


.content-pagination li:last-child {
    padding-left: 10px;
}

.content-pagination li.pager-control .md-button {
    min-width: 20px;
    margin: 12px 10px;
}

.content-pagination li.arrow-left1 .icon-prev,
.content-pagination li.arrow-right1 .icon-next {
    width: auto !important;
    height: 38px !important;
    border-radius: 8px;
    border: 2px solid #333;
    background: #fff;
    display: block;
    line-height: 30px;
    transition: 0.2s ease-in;
}

.content-pagination li.arrow-left1 .md-button,
.content-pagination li.arrow-right1 .md-button {
    height: 70px;
}

.content-pagination li.arrow-left1 {
    text-align: right;
}

.content-pagination li i {
    font-size: 22px;
    vertical-align: middle;
    margin: -3px 3px 0;
}

.content-pagination li.pager-control button:nth-child(3) i {
    margin-top: 0;
}

.glow-effect {
    animation: glowanim 0.5s ease-in-out alternate infinite;
    -webkit-animation: glowanim 0.5s ease-in-out alternate infinite;
}

@keyframes glowanim {
    0% {
        background: #f9b200;
    }

    100% {
        background: #cc9201;
    }
}

.content-pagination li.arrow-right1 {
    text-align: left;
}

.content-pagination li.pager-control button.volume-ctrl {
    position: absolute;
    right: 0;
    bottom: -9px;
    width: 68px;
    margin-right: 0;
}

.content-pagination li.pager-control button.volume-ctrl md-icon {
    border-radius: 50%;
    width: 50px !important;
    height: 53px !important;
    transform: scale(0.8);
}

.content-pagination li.pager-control button.volume-ctrl span {
    margin-left: -15px;
}

.content-pagination li md-icon {
    font-weight: 600;
    font-size: 14px;
}

.content-pagination li.pager-control md-icon {
    background: #ffcc00;
}

.content-pagination li.pager-control md-icon.play {
    background: #ffcc00 url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/play.png) right center no-repeat;
}

.content-pagination li.pager-control md-icon.pause {
    background: #ffcc00 url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/pause.png) right center no-repeat;
}

.content-pagination li.pager-control md-icon.replay {
    background: #ffcc00 url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/replay.png) right center no-repeat;
}

.content-pagination li.pager-control md-icon.volume {
    background: #ffffff url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/volume.png) center center no-repeat;
}

.content-pagination li.pager-control md-icon.mute {
    background: #ffcc00 url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/mute.png) center center no-repeat;
}

.content-pagination li.arrow-left1 .md-button:hover .icon-prev,
.content-pagination li.arrow-right1 .md-button:hover .icon-next,
.content-pagination li.pager-control .md-button:hover md-icon.play,
.content-pagination li.pager-control .md-button:hover md-icon.pause,
.content-pagination li.pager-control .md-button:hover md-icon.replay,
.content-pagination li.pager-control .md-button:hover md-icon.volume,
.content-pagination li.pager-control .md-button:hover md-icon.mute {
    background-color: #ffcc00;
}


.content-pagination li.pager-control md-icon i {
    color: #333;
    font-size: 28px;
    line-height: 50px;
}

.content-pagination li.pager-control {
    text-align: center;
}


/** footer style ends **/


/** container style **/

#activityIframe {
    position: absolute;
    visibility: hidden;
}

#indexPage {
    position: relative;
    min-width: 350px;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

.main-wrap {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    top: 0;
    background: #fff;
}

.view-wrapper {
    width: 100%;
    margin: 0 auto;
}

.secContainer {
    position: relative;
    max-width: 100%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.secContainer .container_3>div {
    height: 100%;
    padding: 0;
}

.preroll-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 75vh;
}

.preroll-wrap .preroll-align {
    position: relative;
}

.FadeOut.ng-hide {
    opacity: 0;
}

.FadeOut.ng-hide-remove {
    transition: opacity linear 1.75s;
}

.FadeOut.ng-hide-add {
    -webkit-transition-duration: 1s;
    /* Safari */
    -webkit-transition-delay: 0.10s;
    /* Safari */
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 0.10s;
}

.upperCaseLetter,
.lowerCaseLetter {
    padding-left: 20px;
    font-size: 18vh !important;
}

.lowerCaseLetter {
    text-align: right;
}

.fc-wrap {
    background: #fff;
    border-radius: 25px;
    padding: 10px;
}

.fc-level1 {
    border: 4px solid #23408e;
    border-radius: 20px;
    padding: 2px;
}

.fc-level2 {
    border: 2px solid #23408e;
    border-radius: 15px;
    padding: 10px;
}

.md-sidenav-left {
    z-index: 0;
    width: 330px;
    border: 1px solid #dfdfdf;
    margin: 0px;
}

[ng-include="contentTemplatename"] sequence3 {
    position: relative;
    display: block;
    height: 100%;
    top: 0;
    transform: none;
}

.corrCard {
    border: 6px solid #00a150 !important;
}

.corrCard i,
.wrongCard i {
    position: absolute;
    right: -16px;
    top: -17px;
    width: 30px;
    height: 30px;
    background: #00a150;
    font-size: 23px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}

.wrongCard i {
    color: #fff;
    background: #ff0000;
}

.wrongCard {
    border: 5px solid #ff0000 !important;
}


.complete-msg {
    margin-bottom: -15px;
    font-weight: 600;
    font-size: 3vh;
    position: relative;
    z-index: 5;
    text-shadow: 0 2px 3px #ccc;
}

.text-green {
    padding: 0 25px;
    color: #008000;
    font-size: 22px;
    font-weight: 600;
}

.text-red {
    padding: 0 25px;
    color: #ff0000;
    font-size: 22px;
    font-weight: 600;
}

/* .img_text {
	max-width: 185px;
	max-height: 180px;
} */

.flipbook .img_text {
    width: 100%;
    height: 100%;
}


/*Tb2*/

.text-book2 header {
    background: #f04c27;
}

.text-book2 .content-bottom {
    background: #27b04a;
}

.text-book2 .sommer-logo:after,
.text-book2 header .rdmap-wrap li:first-child:after {
    border-right: 1px solid #ff5d38;
}

.text-book2 .phonics-logo:before,
.text-book2 header .rdmap-wrap li:last-child:before {
    border-left: 1px solid #9c290f;
}

.text-book2 header .rdmap-wrap li.icon-menu-bar:after {
    border-right: 1px solid #fd6948;
}

.text-book2 .stageCnt {
    display: flex;
    width: 235px;
    padding: 2px 2px 8px 2px;
    border: 3px solid #962810;
    overflow: hidden;
    overflow-x: auto;
}

/* .text-book2 .stageCnt::-webkit-scrollbar {
	width: 100px;
	height: 5px;
}

.text-book2 .stageCnt::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.text-book2 .stageCnt::-webkit-scrollbar-thumb {
	background-color: darkgrey;
	outline: 1px solid slategrey;
} */

.text-book2 .stageCnt tooltip {
    white-space: nowrap;
    display: inline-block;
    float: none;
}

.text-book2 header .rdmap-wrap li a i,
.text-book2 .lesson-wrap li span {
    border-color: #fff;
}

.text-book2 header .h-right {
    width: 400px;
}

.text-book2 header .letters-text-wrap {
    max-width: 230px;
}

.text-book2 .content-pagination {
    background: #f04c27;
}

.text-book2 .lesson-wrap li strong,
.text-book2 .act-title,
.text-book2 header .rdmap-wrap li a {
    color: #fff;
}

.text-book2 header .connect-dot-bg span {
    background-color: #fff;
    border: 2px solid #962810;
    text-transform: uppercase;
    border-radius: 8px;
    font-size: 12px;
}

.text-book2 .wrap-space {
    padding: 3% 0;
}

.text-book2 .textStroke {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.2);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.2);
    transition: all 200ms ease-in;
    transform: scale(1.2);
}

.text-book2 .glow-outside {
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.2);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.2);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.2);
    transition: all 200ms ease-in;
    transform: scale(1.2);
}

.text-book2 .green {
    color: green;
}

.text-book2 .complete-msg {
    margin-top: 20px;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 3vh;
    position: relative;
    z-index: 5;
    text-shadow: 0 2px 3px #ccc;
}

.text-book2 .preroll-wrap {
    margin: 0 auto;
}

.text-book2 .drop_child_tb2 {
    border: 7px solid #23408e;
}

.text-book2 .wordHighlight {
    color: red;
    background: none;
}


/* css styles for text book3 begins here */

.text-book3 header {
    background: #27b04a;
}

.text-book3 .content-bottom {
    background: #27b04a;
}

.text-book3 .sommer-logo:after,
.text-book3 header .rdmap-wrap li:first-child:after {
    border-right: 1px solid #199238;
}

.text-book3 .phonics-logo:before,
.text-book3 header .rdmap-wrap li:last-child:before {
    border-left: 1px solid #34d45d;
}

.text-book3 header .rdmap-wrap li.icon-menu-bar:after {
    border-right: 1px solid #199238;
}

.text-book3 .stageCnt {
    border: 3px solid #179638;
}

.text-book3 header .rdmap-wrap li a i,
.text-book3 .lesson-wrap li span {
    border-color: #fff;
}

.text-book3 header .h-right {
    width: 400px;
}

.text-book3 header .letters-text-wrap {
    max-width: 230px;
}

.text-book3 .content-pagination {
    background: #27b04a;
}

.text-book3 .lesson-wrap li strong,
.text-book3 .act-title,
.text-book3 header .rdmap-wrap li a {
    color: #fff;
}

.text-book3 header .connect-dot-bg span {
    background-color: #fff;
    border: 2px solid #179638;
    text-transform: uppercase;
    border-radius: 8px;
    font-size: 12px;
}

.text-book3 .main-wrap {
    margin-bottom: 80px;
}

.text-book3 .pagination-circle {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    bottom: -14px;
    text-align: center;
    z-index: 10;
    background: #fff100;
    padding-top: 4px;
    height: 20px;
}

.text-book3 .pagination-circle button {
    width: 10px;
    height: 12px;
    margin: 0 5px;
    background: #616161;
    border: 0;
    border-radius: 50%;
    text-indent: -8000px;
    transition: 0.3s ease-in;
}

.text-book3 .pagination-circle button.active {
    background: #f66b00;
    transform: scale(1.3);
}

.text-book3 .pagination-circle button.circle_highlight {
    background: #27b04a;
}


/* IE edge 12+ css hacks */

@supports (-ms-ime-align:auto) {
    .demofontface_ADV_CALIBRI_Red {
        text-shadow: -2px -2px 1px #000, 2px -2px 1px #000, -2px 2px 1px #000, 2px 2px 1px #000;
    }

    .ttheader .md-nav-bar {
        margin-top: -38px;
    }

    .course-view md-list .md-button .ic-course {
        height: 22px;
    }
}


/* CSS style for safari */

@media not all and (min-resolution:.001dpcm) {
    @media {
        .lesson-wrap li .sec-num {
            margin-top: 3px;
        }

        .lesson-wrap li .sec-text {
            margin-top: 8px;
            line-height: 13px;
        }
    }
}


/* CSS style for mozilla firefox only **/

@-moz-document url-prefix() {
    .ttheader {
        margin-top: -25px;
    }
}


/* CSS Hack ends */


/* CSS style for IOS device only */

.isIOS2 .secContainer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    padding-bottom: 0;
}

.isIOS2 .secContainer .container_3>div {
    padding: 10px 0
}


/** header and footer responsive **/

@media(max-width: 1350px) {
    header .h-left {
        transform: scale(0.95);
        margin-left: -15px;
        margin-right: -20px;
    }

    header .titleWood {
        margin-left: -10px;
        margin-right: -10px;
    }

    header .connect-dot-bg {
        padding-left: 18%;
    }

    header .rdmap-wrap {
        transform: scale(0.95);
        margin-right: -10px;
    }

    .text-book2 header .h-left {
        margin-left: -15px;
        margin-right: -20px;
    }

    .text-book2 header .h-right {
        width: 52%;
        margin-left: -10px;
        transform: scale(0.95);
    }

    .text-book2 .titleWood {
        margin-right: -10px;
    }

    .text-book2 .icon-arrow {
        width: 120px;
        height: 35px;
    }

    .text-book2 .flipTemp .fontface_ADV_CALIBRI span {
        font-size: 4vw;
    }
}

@media(max-width: 1200px) {
    header .lesson-wrap li {
        padding: 0 5px;
    }

    header .connect-dot-bg>div {
        width: 190px;
    }

    header .h-right {
        width: 450px;
    }

    header .act-title {
        font-size: 13px;
        margin-top: 4px;
    }

    header .md-icon-button {
        width: 153px !important;
    }

    .text-book2 header .h-right {
        width: 340px;
    }
}

@media(max-width:1100px) {
    header {
        padding: 0px;
    }

    header .h-left {
        transform: scale(0.9);
        margin-left: -20px;
        margin-right: -30px;
    }

    header .lesson-wrap li {
        padding: 0 5px;
    }

    header .act-title {
        font-size: 13px;
        margin-top: 7px;
    }

    header .stageCnt tooltip {
        margin-right: 2px;
    }

    header .rdmap-wrap {
        padding: 5px 0;
    }

    header .rdmap-wrap li {
        padding: 0 7px;
    }

    header .rdmap-wrap li a {
        padding: 5px;
    }

    header .rdmap-wrap li:first-child:after,
    header .rdmap-wrap li:last-child:before {
        height: 30px;
        right: 1px;
    }

    .text-book2 header .h-right {
        margin-left: -20px;
        transform: scale(0.9);
    }

    .text-book2 header .letters-text-wrap {
        width: 58%;
        transform: scale(0.9);
        margin-left: -15px;
        margin-right: -15px;
    }

    .text-book2 .stress,
    .text-book2 .completWord,
    .text-book2 .upperLowerCase,
    .text-book2 .alphabet {
        font-size: 10vh;
    }

    .text-book2 .secContainer .stress {
        margin-top: -3%;
    }

    .text-book2 .stageCnt tooltip {
        margin-right: 2px;
    }

    .text-book2 header .rdmap-wrap {
        padding: 5px 0;
    }

    .text-book2 header .rdmap-wrap li {
        padding: 0 7px;
    }

    .text-book2 header .rdmap-wrap li a {
        padding: 0 5px;
    }

    .text-book2 header .rdmap-wrap li:first-child:after,
    .text-book2 header .rdmap-wrap li:last-child:before {
        top: 24px;
    }

    .text-book2 .drag1 img {
        max-width: 130px;
        vertical-align: top;
    }

    .text-book2 .dragged-img {
        max-width: 135px;
    }

    .text-book2 .drop_childAfter {
        bottom: -5px;
    }

    .text-book2 flashcardmixup {
        position: relative;
        margin-top: 0;
    }

    .text-book2 .roadTabHeader .md-nav-bar ul li {
        width: 16%;
    }

    .text-book2 .roadmap-dialog {
        width: 95%;
    }

    .text-book2 .roadTabHeader .md-nav-bar ul li button {
        padding-left: 0;
        padding-right: 0;
    }

    .text-book2 .roadTab button {
        width: 100% !important;
    }

    .text-book2 [ng-controller="roadMapController"] {
        transform: scale(0.9);
        margin-top: -75px;
    }

    .text-book2 .test:first-child {
        height: 55px;
        margin-top: 90px;
    }

    .text-book2 .trumpCard_red {
        width: 170px;
        height: 215px;
    }
}

@media(max-height:700px) {
    .text-book2 flashcardmixup {
        height: 100%;
        top: 50%;
        transform: translateY(-50%);
        display: block;
    }

    .text-book2 .trumpCard_red {
        width: 130px;
        height: 140px;
    }

    .text-book2 .trumpCard_red img {
        max-width: 16vh;
    }

    .text-book2 .instruction_text {
        margin: 15px auto;
    }

    .text-book2 .drag1 img {
        max-width: 115px !important;
        vertical-align: top;
    }

    .text-book2 .dragged-img {
        max-width: 115px;
    }

    .text-book2 .preroll-img {
        max-height: 68vh;
    }

    .text-book3 .preroll-img {
        max-height: 68vh;
    }

    .text-book2 .trumpCard_red {
        max-height: 380px;
        max-width: 90%;
    }

    .text-book2 .Holder_flipcard .image_mix {
        max-width: 80%;
        padding: 3%
    }

    .text-book2 .trumpCard_red {
        width: 130px;
        height: 150px;
    }

    .text-book2 .audio-text i {
        width: 28px;
        height: 25px;
    }

    .text-book2 .complete-msg {
        margin-top: 2px;
        margin-bottom: 15px;
    }

    .text-book2 .instruction_text {
        font-size: 1.3vw;
    }

    .text-book2 .isIOS2 .secContainer .container_3>div {
        padding: 0px;
    }

    .preroll-img {
        max-height: 73vh;
    }
}

@media(min-width: 2000px) {
    .text-book2 .image_mix {
        max-width: 330px;
    }

    .text-book2 .flipTemp .fontface_ADV_CALIBRI span {
        margin-top: 0;
    }

    .text-book2 .instruction_text {
        width: 1200px;
    }

    .text-book2 .drag1 img {
        vertical-align: top;
    }

    .text-book2 .trumpCard_red {
        width: 310px;
        height: 395px;
    }

    .text-book2 .trumpCard_red img {
        max-width: 22vh;
    }
}

@media(max-width:1499px) {
    .text-book2 .trumpCard_red {
        width: 180px;
        height: 210px;
    }

    .text-book2 .audio-text i {
        top: -5px;
    }

    .text-book2 .flipbook.bookTemplate2 .page img.img_text {
        max-width: 75%;
        max-height: 75%;
    }

    .text-book2 .templateImg {
        width: 27vh;
    }

    .text-book2 .preroll-img {
        max-height: 75vh;
    }
}

@media(max-height:730px) {
    .text-book2 .instruction_text {
        font-size: 1.3vw;
    }
}

@media(max-width:1023px) and (orientation: portrait) {

    .portrait .text-book2 .corrCard i,
    .portrait .text-book2 .wrongCard i {
        right: -8px;
        top: -15px;
    }
}

@media(max-width:1024px) {
    .text-book2 .isIOS2 .flipTemp .fontface_ADV_CALIBRI span {
        font-size: 4vh;
    }

    .text-book2 .instruction_text .icon-volume {
        bottom: -14px;
    }

    .text-book2 .drag1 img {
        max-width: 115px;
    }

    .text-book2 .trumpCard_red {
        width: 130px !important;
        height: 140px !important;
    }
}

@media(max-width:850px) {

    .text-book2 .stress,
    .text-book2 .completWord,
    .text-book2 .upperLowerCase,
    .text-book2 .alphabet {
        font-size: 7vh !important;
    }

    .text-book2 .roadTab button {
        font-size: 11px !important;
    }

    .text-book2 .menu-panel-ctrl {
        margin-bottom: 50px;
    }

    .text-book2 .test {
        height: 63px;
    }

    .text-book2 .test:first-child {
        height: 47px;
    }

    .text-book2 .MainCardTemplate.BookWood {
        padding: 0 20px;
    }

    .text-book2 .imgHolder {
        padding: 0;
    }

    .text-book2 .dragged-img {
        top: 44%;
    }

    .text-book2 .drag1 img {
        max-width: 120px;
    }

    .text-book2 .phonicsSoundSection2 {
        height: 100% !important;
        transform: scale(0.9);
        top: 0 !important;
    }

    .text-book2 .demotrump img {
        width: 100% !important;
    }

    .text-book2 .trumpCard_red .img_text {
        width: 100% !important;
    }

    .text-book2 .align-vmiddle {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media(max-width:700px) and (orientation: portrait) {
    .portrait .text-book2#indexPage {
        min-width: 100%;
    }

    .portrait .text-book2 .wordHighlight {
        padding: 0px;
        line-height: 1vh;
    }

    .portrait .text-book2 .instruction_text {
        font-size: 3.5vw;
        padding-top: 3%;
        margin-bottom: 0;
    }

    .portrait .text-book2 .stageCnt {
        width: 190px;
    }

    .portrait .text-book2 .instruction_text .icon-volume {
        bottom: -14px;
        width: 30px;
        height: 24px;
    }

    portrait .text-book2 header .connect-dot-bg span {
        padding: 2px 10px;
    }

    .portrait .text-book2 .preroll-img {
        max-height: 37vh;
    }

    .portrait .text-book2 .complete-msg {
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 2.5vh;
    }
}

@media(max-width:359px) and (orientation: portrait) {
    .portrait .text-book2 .icon-volume1 {
        width: 25px;
        height: 21px;
    }

    .portrait .text-book2 .instruction_text {
        font-size: 2.9vw;
    }

    .portrait .text-book2 .instruction_text .icon-volume {
        width: 31px;
        height: 24px;
    }

    .portrait .text-book2 .preroll-img {
        max-height: 22vh;
    }
    .portrait .content-pagination li.pager-control md-icon.play {
        max-width: 16px;
    }
    
    .portrait .content-pagination li.pager-control md-icon.pause {
        max-width: 16px;
    }
    .portrait .content-pagination li.arrow-left1 .icon-prev,
    .portrait .content-pagination li.arrow-right1 .icon-next {
    width: 30px !important;
    }
}


/*Mobile Portrait Starts */

.portrait header,
.portrait .text-book2 header,
.portrait .text-book3 header {
    height: 150px;
    min-height: 150px;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
}

.portrait header .h-left,
.portrait header .h-right {
    position: relative;
    float: none;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    background: #ffcb06;
    transform: none;
}

.portrait header .h-left h1 {
    float: none;
    margin: 0 auto !important;
    width: 165px;
    padding: 9px 0;
}

.portrait .text-book2 header .h-left,
.portrait .text-book2 header .h-right,
.portrait .text-book3 header .h-left,
.portrait .text-book3 header .h-right {
    position: relative;
    float: none;
    width: 100%;
    height: 50px;
    margin: 0 auto;
    padding: 0;
    transform: none;
    background: #27b04a;
}

.portrait .text-book2 header .h-right,
.portrait .text-book3 header .h-right {
    height: 55px;
    background: #31ca58;
}

.portrait .text-book2 header .h-left {
    background: #f04c27;
}

.portrait .text-book2 header .h-right {
    background: #f96848;
}

.portrait .text-book2 header .connect-dot-bg span,
.portrait .text-book3 header .connect-dot-bg span {
    border: 0;
}

/* .portrait .text-book2 .stageCnt::-webkit-scrollbar {
	height: 2px;
} */

.portrait .sommer-logo,
.portrait .text-book2 .sommer-logo {
    height: 43px;
    width: 36px;
    background-size: 100%;
}

.portrait .phonics-logo,
.portrait .text-book2 .phonics-logo {
    width: 106px;
    height: 35px;
    margin-left: 5px;
    background-size: 100%;
}

.portrait .sommer-logo:after,
.portrait .text-book2 .sommer-logo:after {
    top: 3px;
    right: -5px;
    height: 30px;
}

.portrait .phonics-logo:before,
.portrait .text-book2 .phonics-logo:before {
    left: -6px;
    height: 30px;
    top: 3px;
}

.portrait .icon-home, .portrait .icon-menu {
    position: absolute;
    left: 10px;
    top: 13px;
    width: 32px;
    height: 32px;
    line-height: 24px;
    border-radius: 50%;
    color: #333;
    font-size: 18px;
    background: #1f6f9e;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.portrait .icon-dashboard{
    left: 47px;
}

.portrait .icon-home {
    left: auto;
    right: 10px;
}

.portrait .icon-menu span.bar {
    position: static;
    right: 0;
    top: 10px;
    width: 12px;
    height: 6px;
    background: #fff;
}

.portrait header .h-right {
    height: 55px;
    background: #ffef10;
}

.portrait header .titleWood {
    position: absolute;
    margin: 0;
    padding: 0;
    left: -5px;
    top: 40px;
    transform: scale(0.9);
}

.portrait header .letters-text-wrap {
    width: auto;
    transform: scale(0.9);
    margin: 0;
    position: absolute;
    right: 5px;
    top: -7px;
    left: auto;
    z-index: 99;
}

.portrait .text-book3 header .letters-text-wrap {
    right: 0;
}

.portrait .text-book3 header .letters-text-wrap {
    right: -10px;
}

.portrait .stageCnt {
    margin-top: 0;
    transform: scale(1);
}

.portrait .act-title {
    font-size: 12px;
    margin-bottom: -2px;
}

.portrait header .connect-dot-bg {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: auto;
    float: none;
    display: block;
}

.portrait .text-book2 header .connect-dot-bg {
    margin: 0 auto;
    width: 100%;
}

.portrait header .connect-dot-bg span {
    border: 0;
}

.portrait header .connect-dot-bg>div {
    font-size: 12px;
    padding: 10px 0 0;
    height: auto;
    margin: 0 auto;
    display: block;
    width: auto;
}

.portrait .text-book2 header .connect-dot-bg>div,
.portrait .text-book3 header .connect-dot-bg>div {
    padding-top: 8px;
}

/*.portrait .content-pagination {
	height: 95px;
	padding-top: 10px;
}*/

.portrait .content-pagination li {
    vertical-align: middle;
    margin-right: 5px;
}

.portrait .content-pagination li.arrow-left1 {
    margin-top: 5px;
    margin-right: -20px;
}

.portrait .content-pagination li.arrow-right1 {
    margin: 3px 20px 0 -15px;
}

.portrait .content-pagination li.pager-control md-icon {
    padding: 0;
    border-radius: 50%;
}

.portrait .content-pagination li.pager-control span,
.portrait .content-pagination li.arrow-left1 .md-button,
.portrait .content-pagination li.arrow-right1 .md-button {
    /* 	display: block; */
    font-size: 12px;
    font-weight: 600;
    min-width: 60px;
    margin-top: -5px;
}

.portrait .content-pagination li.pager-control span {
    margin-top: -7px;
}

.portrait .content-pagination li.arrow-left1 .icon-prev,
.portrait .content-pagination li.arrow-right1 .icon-next {
    width: 37px !important;
    height: 37px !important;
    border-radius: 50%;
    line-height: 34px;
    color: #333;
}

.portrait .btn-action {
    position: absolute;
    left: -15px;
    top: 13px;
}

.portrait .content-pagination li.pager-control md-icon.play {
    background-position: center center;
}

.portrait .content-pagination li.pager-control md-icon.pause {
    background: #ffcc00 url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/pause.png) center center no-repeat;
}

.portrait .content-pagination li.pager-control md-icon.replay {
    background: #ffcc00 url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/replay.png) center center no-repeat;
}

.portrait .content-pagination li.pager-control button.volume-ctrl md-icon {
    height: 45px !important;
    width: 45px !important;
}

.portrait .content-pagination li.pager-control button.volume-ctrl {
    width: auto;
    right: -25px;
    bottom: 1px;
}

.portrait .content-pagination li.pager-control button.volume-ctrl span {
    margin-left: 0;
}

.portrait .skipbutton.md-button {
    position: absolute;
    top: auto;
    bottom: -45px;
    left: 20px;
    width: 42px;
    height: 26px;
    min-width: 42px;
    min-height: 26px;
    font-size: 12px;
    line-height: 26px;
}

body.portrait {
    overflow: hidden;
}

.portrait .isIOS2 .secContainer .container_3>div {
    padding: 0;
}

.portrait .preroll-img {
    max-height: 50vh;
    height: auto;
}

.portrait .instruction_text {
    margin: 10px auto 0;
    padding: 0;
    width: 90%;
    font-size: 11px;
    border-radius: 5px;
    border-width: 2px;
}

.portrait .instruction_text .icon-volume {
    bottom: -14px;
    width: 28px !important;
    height: 23px !important;
}

.portrait .text-book3 .pagination-circle button {
    padding: 0;
    width: 8px;
    height: 8px;
    margin: 3px 2px 0;
}

@media(max-width: 1200px) {
    .text-book3 header .h-right {
        width: 340px;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) {
    .portrait .isIOS2 .secContainer {
        position: relative;
    }

    .portrait .text-book3 header .connect-dot-bg span {
        font-size: 11px;
    }

    .portrait .text-book3 .pagination-circle button {
        width: 7px;
        height: 7px;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 877px) and (orientation: portrait) {
    .portrait .isIOS2 .secContainer {
        position: relative;
    }
}

@media only screen and (min-device-width: 464px) and (max-device-height: 736px) and (orientation: portrait) {
    .portrait .isIOS2 .secContainer {
        position: absolute;
    }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .isIOS2 .secContainer {
        position: absolute;
    }

    .portrait .preroll-img {
        max-height: 68vh;
    }

    .portrait .instruction_text {
        font-size: 16px;
    }
}


/*  Mobile landscape header style begins */

.landscape .text-book2 header .h-right,
.landscape .text-book3 header .h-right {
    width: 290px;
}

.landscape .text-book2 .main-wrap,
.landscape .text-book3 .main-wrap {
    margin-bottom: 65px;
}

.landscape .text-book3 .preroll-img {
    max-height: 55vh;
}

.landscape .text-book2 header .connect-dot-bg {
    padding-left: 42%;
    padding-right: 30%;
}

.landscape .act-title {
    margin-top: 9px;
}

/*.landscape .stageCnt {
	margin-top: -2px;
    transform: scale(0.9);
    overflow: scroll !important;
    height: 44px;
    display: flex;
}*/

.landscape .text-book2 .stageCnt {
    width: 180px;
}

.landscape header .letters-text-wrap {
    right: 25px;
}

.landscape .text-book2 header .letters-text-wrap {
    width: auto;
    transform: scale(0.8);
}

.landscape header .rdmap-wrap li {
    padding-left: 0px;
    padding-right: 0px;
}

.landscape .text-book2 header .rdmap-wrap {
    margin-right: 0;
    transform: scale(0.95);
}

.landscape .text-book2 .stageCnt {
    width: 180px;
}

.landscape .isIOS2 .secContainer .container_3>div {
    padding: 0;
}

.landscape .preroll-img,
.landscape .text-book2 .preroll-img,
.landscape .text-book3 .preroll-img {
    max-height: 55vh;
}

.landscape .text-book3 .pagination-circle {
    height: 15px;
    bottom: -10px;
}

.landscape .text-book3 .pagination-circle button {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    padding: 0;
}

/** CSS style for mobile landscape **/

@media only screen and (max-width: 991px) and (orientation:landscape) {
    .landscape header {
        height: 65px !important;
        min-height: 65px;
    }

    .landscape header .h-left {
        margin-left: 0;
        transform: scale(0.95);
      }

    .landscape .sommer-logo {
        width: 45px;
        height: 35px;
    }

    .landscape .phonics-logo {
        width: 92px;
        height: 36px;
    }

    .landscape .sommer-logo:after,
    .landscape .phonics-logo:before {
        top: 5px;
        height: 31px;
        right: -9px;
    }

    .landscape .phonics-logo:before {
        left: -7px;
        right: auto;
    }

    .landscape .titleWood {
        padding: 0;
        margin-top: 0;
    }

    .landscape .lesson-wrap {
        transform: scale(0.8);
        margin: -9px 0 0 0;
    }

    .landscape header .connect-dot-bg {
        padding-left: 23%;
        transform: scale(0.8);
        padding-right: 28%;
        margin-top: -8px;
        display: none !important;
    }

    .landscape .text-book3 header .connect-dot-bg span {
        font-size: 11px;
    }

    .landscape header .connect-dot-bg span {
        padding: 5px;
        font-size: 14px;
    }

    .landscape header .h-right {
        width: 315px;
        transform: scale(0.8);
        margin: -9px -42px 0 0;
    }

    .landscape .content-pagination ul {
        transform: scale(0.8);
    }

    .landscape .content-pagination ul {
        transform: scale(0.8);
    }

    .landscape .content-pagination li.pager-control button.volume-ctrl {
        right: -12%;
        bottom: -4px;
    }

    .landscape .roadmap-dialog {
        transform: scale(0.9);
        margin-top: -10%;
        max-height: 85% !important;
    }

    .landscape .dialogBG {
        height: 245px;
    }
}

/* iphone 6 & 7 landscape style begins */

@media only screen and (min-device-height: 375px) and (max-device-width: 667px) and (orientation: landscape) {
    .landscape .isIOS2 .secContainer {
        position: relative;
    }

    .landscape header .connect-dot-bg {
        padding-left: 44%;
        padding-right: 33%;
    }

    .landscape .roadmap-dialog {
        transform: scale(0.95);
        margin-top: -12%;
    }

    .landscape .dialog-title h2 {
        font-size: 20px;
    }

    .landscape .menuTabHeader li {
        margin-top: -5px;
    }

    .landscape .menuTabHeader li button {
        margin-left: -5px;
    }

    .menuTabHeader li button>span {
        padding-right: 5px;
    }

    .landscape .dialogBG {
        height: 215px;
    }

    .landscape .lgfSidemenuWrap .letsgofishing-hide-for-mobile-port {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* iphone 7 plus landscape style begins */

@media only screen and (min-device-height: 464px) and (max-device-width: 736px) and (orientation: landscape) {
    .landscape .isIOS2 .secContainer {
        position: absolute;
    }
}


/* iphone 6 & 7 landscape style ends */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .isIOS2 .secContainer {
        position: absolute;
    }

    .landscape .text-book3 .pagination-circle {
        bottom: 0;
        height: 17px;
    }

    body.landscape {
        overflow: hidden;
    }

    .landscape .preroll-img,
    .landscape .text-book2 .preroll-img .landscape .text-book3 .preroll-img {
        max-height: 68vh;
    }

    .landscape .img-wrapper {
        margin: 0;
    }
}

blendletters .demotrump {
    height: 70%;
    width: 80%;
    font-size: 6vw;
    max-width: 80%;
    max-height: 70%;
}

.blend-letter-wrap .demotrump img {
    max-width: 100%;
    max-height: 70vh !important;
    height: auto !important;
}

blendletters .trump {
    height: 100%;
    width: 100%;
}

.blend-letter-wrap .demofontface_ADV_CALIBRI_Red {
    font-family: 'Poppins';
    font-size: 17vw;
    color: red;
    -webkit-text-stroke: 2px black;
}

/* Mobile portrait view style */

.portrait .text-book3 .blend-letter-wrap .demotrump img {
    max-height: 70vh !important;
    height: auto !important;
    max-width: 100%;
}

.portrait .text-book3 .blend-letter-wrap .img-cont,
.portrait .text-book3 .blend-letter-wrap .word-cont {
    height: 50%;
    min-height: 50%;
    max-height: 50%;
}

.portrait .text-book3 .blend-letter-wrap .img-cont {
    margin-top: 40px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .text-book3 .blend-letter-wrap .demotrump img {
        max-width: 85%;
        margin-top: 20%;
    }
}

.review-words-wrap {
    position: relative;
}

.review-words-wrap .txtbook-letter {
    display: block;
    font-size: 22vw;
    color: #f00;
    text-align: center;
    font-family: 'ADV_CALIBRI';
}

.review-words-wrap .txtbook-letter.highlight {
    font-size: 22vw !important;
}

.review-words-wrap .txtbook-letter .arrow {
    width: 32vh;
    margin-top: -25%;
    display: block;
    margin: 0 auto;
}

.review-words-wrap .text-zoom {
    transform: scale(1.2);
}

/* Mobile portrait style */
.portrait .review-words-wrap .txtbook-letter .arrow {
    width: 13vh;
}

.pc-word.grey-bg {
    background-color: #eeeeee;
}

.pc-word .blend-word-cont {
    width: 100%;
    height: 80%;
    position: relative;
    margin-top: 15px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook3/images/blend-words-bg.png);
    background-repeat: repeat-x;
    background-size: 100% 60%;
    background-position: 0% 70%;
}

.text-book2 .pc-word .blend-word-cont {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/blend-words-orangebg.png);
}

.pc-word .blend-img-wrap {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
}

.pc-word .blend-img-cont {
    position: absolute;
    width: 98%;
    right: 0;
    max-height: 100%;
    bottom: 0;
    top: 0px;
}

.pc-word .blend-img-cont .blend-img {
    border: 3px solid #474948;
    background-color: #fff;
    max-width: 100%;
    max-height: 100%;
    width: auto;
}

.pc-word .blend-word-cont .letter_1 {
    margin-bottom: -5%;
    font-weight: 600;
    display: inline-block;
    font-weight: 600;
    font-size: 30vmin;
    color: #f00;
    text-align: center;
}

.text-book2 .pc-word .blend-word-cont .letter_1 {
    font-size: 18vmin;
}

.pc-word .blend-word-cont .letter_1 .text-wrap {
    clear: both;
    font-size: 24vmin;
    display: block;
    margin-top: -6%;
}

.pc-word .blend-word-cont .letter_1 .text-wrap.text-right {
    margin-right: 20%;
}

.pc-word .blend-word-cont .letter_space {
    position: relative;
    margin: -1% 0 0;
    font-size: 28vmin;
    color: #f00;
}

.pc-word .blend-word-cont .letter_space:last-child i {
    display: none;
}

.pc-word .blend-word-cont .letter_space .icon-arrow {
    margin-left: 25px;
    margin-right: 25px;
}

.pc-word .blend-word-cont .letter_space.small {
    font-size: 4vw;
}

.pc-word .blend-word-cont .letter_space.small i {
    color: #333;
    font-size: 2.5vw;
}

.pc-word .blend-word-cont .split-text {
    display: inline-block;
    font-size: 20vmin;
    transition: 0.3s ease-in;
}

.pc-word .blend-word-cont .text-zoom {
    transform: scale(1.2);
}

.pc-word .blend-word-cont .arrow1 {
    display: inline-block;
    vertical-align: middle;
    width: 25vh;
    height: 5vh;
    margin: 12% 10px 0;
    background: url(../../app/assets/images/arrow1.png) 0 0/100% 100% no-repeat;
}

.pc-word .text-bottom {
    min-height: 22%;
    display: table;
}

.pc-word .text-bottom .letter,
.pc-word .text-bottom .normalletter {
    display: table-cell;
    vertical-align: middle;
    font-size: 2.5vw;
    overflow: hidden;
    white-space: pre-line;
    text-align: center;
}

.pc-word .text-bottom .wordHighlight {
    background-color: inherit;
    color: #ff0000;
}

/* Mobile portrait view style */

.portrait .pc-word .blend-word-cont .letter_1 .text-wrap {
    margin-top: -11%;
    font-size: 20vmin;
}

.portrait .pc-word .blend-word-cont {
    height: 50%;
    background-size: 100% 60%;
    background-position: 0% 60%;
}

.portrait .pc-word .blend-word-cont .letter_space {
    margin-top: -7%;
}

.portrait .pc-word .blend-word-cont .letter_space .arrow1 {
    width: 55px;
    height: 11px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .pc-word .blend-word-cont .letter_space .arrow1 {
        width: 75px;
        height: 16px;
    }

    .portrait .pc-word .blend-word-cont .letter_space {
        margin-top: -8%;
    }

    .portrait .pc-word .blend-word-cont .letter_1 .text-wrap {
        margin-top: -12%;
    }
}

/* Mobile landscape view style */

.landscape .pc-word .blend-word-cont .letter_1 .text-wrap {
    margin-top: -9%;
    font-size: 20vmin;
}

.landscape .pc-word .blend-word-cont {
    background-size: 100% 70%;
}

.landscape .pc-word .blend-word-cont .letter_space {
    margin-top: -3.5%;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .pc-word .blend-word-cont .letter_space {
        margin-top: -3%;
    }

    .landscape .pc-word .blend-word-cont .letter_1 .text-wrap {
        margin-top: -4.5%;
        font-size: 20vmin;
    }
}

.ebook-reader .ebookControl {
    position: absolute;
    left: 10px;
    top: 10px;
}

.ebook-reader .record-wrap {
    position: fixed;
    right: 250px;
    padding-bottom: 40px;
}

.ebook-reader .btn-record {
    position: fixed;
    margin-right: 20px;
    color: #fff;
    text-transform: uppercase;
    font-family: 'Poppins';
    font-size: 11px;
    right: 230px;
}

.ebook-reader .btn-record button {
    min-width: 25px;
    min-height: 25px;
}

.ebook-reader .btn-record i {
    border: 1px solid #7d7d7d;
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
    position: relative;
    background: #fff;
}

.ebook-reader .btn-record i span {
    background: #717171;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 9px;
    left: 8px;
}

.ebook-reader .playlist {
    position: fixed;
    width: 50px;
    height: 50px;
    visibility: visible !important;
    right: 67px;
    bottom: 0px;
}

.ebook-reader .playlistLabel {
    position: fixed;
    width: 60px;
    height: 50px;
    visibility: visible !important;
    right: 59px;
    bottom: 6px;
    text-transform: uppercase;
    font-family: 'Poppins';
    font-size: 11px;
    text-align: center;
    color: #fff;
    font-weight: bold
}

.ebook-reader .voiceSpeadslider {
    background: transparent;
    top: -29px;
    overflow: hidden;
    padding-right: 16px !important;
    padding-left: 16px !important;
    text-align: center;
}

.ebook-reader .voiceSpeadslider .md-track {
    background: #fff;
    border-radius: 5px;
}

.ebook-reader .voiceSpeadslider md-slider {
    min-width: 90px;
    margin-top: -14px;
}

.ebook-reader .voiceSpeadslider .md-track-fill,
.ebook-reader .voiceSpeadslider .md-sign {
    background-color: #fff !important;
}

.ebook-reader .voiceSpeadslider .md-sign:after {
    border-top-color: #fff !important;
}

.ebook-reader .voiceSpeadslider .md-thumb:after {
    background: #fbb300 !important;
    border: 1px solid #fff;
    left: 0;
}

.ebook-reader .voiceSpeadslider .md-thumb-text {
    color: #000;
}

.ebook-reader .voiceSpeadslider canvas {
    display: none;
}

.ebook-reader .user_icon_title1 {
    color: #fff;
    font-weight: normal;
    font-size: 11px;
    text-align: center;
}

.ebook-reader md-slider .md-sign:after {
    border-radius: none;
    top: 19px;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top-width: 12px !important;
    border-top-style: solid !important;
}

.ebook-reader md-slider .md-track-container {
    width: 100%;
    position: absolute;
    top: 23px;
    height: 7px;
    border-radius: 10px;
}

.ebook-reader md-slider .md-sign .md-thumb-text {
    z-index: 1;
    font-size: 10px;
    font-weight: 700;
}

.ebook-reader md-slider .md-thumb {
    z-index: 1;
    position: absolute;
    left: -10px;
    top: 15px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    left: -3px;
}

.ebook-reader md-slider .md-thumb:after {
    width: 22px;
    height: 22px;
    border-radius: 7px;
}

.ebook-reader md-slider .md-sign {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: absolute;
    left: -4px;
    top: -8px;
    width: 14px;
    height: 14px;
    border-radius: 14px;
    -webkit-transform: scale(0.4) translate3d(0, 67.5px, 0);
    transform: scale(0.4) translate3d(0, 67.5px, 0);
    -webkit-transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
    transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}

.ebook-reader .Page-turn {
    position: fixed;
    right: 145px;
    font-family: 'Poppins';
    font-size: 11px;
    background: transparent;
    overflow: hidden;
}

.ebook-reader .Page-turnTxt {
    display: block;
    margin: 0 auto;
    position: relative;
    margin: 0;
}

.ebook-reader .record-cont {
    position: relative;
}

.ebook-reader .record-cont .btn-opt {
    height: 31px;
    width: 31px;
    min-height: 31px;
    padding: 5px;
    padding-right: 22px;
    line-height: 22px;
    background: #fff;
    text-align: center;
}

.ebook-reader .record-cont .btn-opt:hover {
    background: #fff;
    color: #000;
}

.ebook-reader .btn-next-arrow {
    display: inline-block;
    width: 25px;
    height: 24px;
    background: #fff url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/right-icon.png) 0 0/100% 100% no-repeat;
    cursor: pointer;
    position: fixed;
    right: 246px;
    bottom: 19px;
}

.ebook-reader .deleteicon {
    margin-top: 5px;
    width: 25px;
    height: 24px;
    position: relative;
    background: url(../../../textbook2courseplayer/images/delete-h.png);
    background-size: 100% 100%;
    right: 10px;
    display: inline-block;
    position: absolute;
    top: 4px;
}

.ebook-reader .Page-turn .md-container {
    margin: 0 auto;
}

.ebook-reader .Page-turn md-switch {
    margin: 0px;
}

.ebook-reader md-switch.md-default-theme .md-thumb,
.ebook-reader md-switch .md-thumb {
    background-color: rgb(250, 250, 250) !important;
}

.ebook-reader md-switch.md-default-theme .md-ink-ripple,
.ebook-reader md-switch .md-ink-ripple {
    color: rgb(158, 158, 158) !important;
}

.ebook-reader md-switch.md-default-theme .md-bar,
.ebook-reader md-switch .md-bar {
    background-color: rgb(158, 158, 158) !important;
}

.ebook-reader .content-pagination .record-toggle {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 17%;
    background-color: #f04c27;
    height: 64px;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
    transform: translateX(-100%);
    transform: translateX(-100%);
    transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.ebook-reader .content-pagination .record-toggle.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transform: translateX(0);
    transform: translateX(0);
    transform: translateX(0);
}

.ebook-reader .content-pagination .record-toggle .arw-toggle {
    position: absolute;
    top: 9px;
    right: 0;
    height: 78%;
    border: 0.6px solid #fff;
    cursor: pointer;
}

.ebook-reader .content-pagination .record-toggle .arw-toggle::before {
    content: "\f04b";
    position: absolute;
    right: 0;
    top: 33%;
    font: 17px FontAwesome;
    color: #fff;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ebook-reader .content-pagination .record-toggle ul {
    margin: 8px auto;
}

.ebook-reader .content-pagination .record-toggle .flex-30 ul {
    text-align: left;
    padding-left: 10px;
}

.ebook-reader .content-pagination .record-toggle .flex-70 ul {
    text-align: right;
    padding-right: 3em;
}

.ebook-reader .content-pagination .record-toggle li .md-button {
    border-radius: 8px;
    border: 2px solid #333;
    background: #fff;
    display: block;
    line-height: 28px;
    padding: 3px 15px;
}

.ebook-reader .content-pagination .record-toggle .md-button:hover {
    background-color: #ffcc00;
}

.ebook-reader .content-pagination .record-toggle .md-button md-icon {
    width: auto;
    height: auto;
}

.ebook-reader .content-pagination .record-toggle .md-button span {
    display: block;
    color: #333;
}

.ebook-reader .content-pagination .record-toggle li {
    padding: 0 10px;
}

.ebook-reader .content-pagination .record-toggle li .record-demo {
    background-color: #000;
    width: 220px;
    height: 44px;
    border-radius: 10px;
}

.ebook-reader .content-pagination .record-toggle li .record-book,
.ebook-reader .content-pagination .record-toggle li .record-page {
    background-color: #ffcc00;
}

.ebook-reader .content-pagination .record-toggle li .record-book:hover,
.ebook-reader .content-pagination .record-toggle li .record-page:hover {
    background-color: #fff;
}

.ebook-reader .stopRecording {
    background: #fff !important;
    border: 2px solid red !important;
}

.ebook-reader .stopRecording span {
    color: red !important;
}

.ebook-reader .plblock {
    position: fixed;
    right: 20px;
    bottom: 80px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.ebook-reader .plblock.show {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.ebook-reader .plView {
    width: 386px;
    border-radius: 13px;
    height: 215px;
    min-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    padding: 15px;
    border: 1px solid #aaaaaa;
    -webkit-box-shadow: 0 0 25px -2px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 25px -2px rgba(0, 0, 0, 0.4);
    -o-box-shadow: 0 0 25px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 25px -2px rgba(0, 0, 0, 0.4);
}

.ebook-reader .plView::-webkit-scrollbar {
    width: 0.5em;
    height: 80%;
    padding: 10px 0;
}

.ebook-reader .plView::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 13px;
    padding: 10px 0;
}

.ebook-reader .plView::-webkit-scrollbar-thumb {
    background-color: #666;
    border-radius: 13px;
    padding: 10px 0;
}

.ebook-reader .plView .tab-list a {
    display: inline-block;
    padding: 4px 8px;
    margin-right: 4px;
    color: #3d3d3d;
}

.ebook-reader .plView .icon-list {
    text-align: right;
}

.ebook-reader .plView .icon-list span {
    display: inline-block;
    padding-right: 12px;
    font-size: 19px;
    color: #5e687f;
    text-decoration: none;
    cursor: pointer;
}

.ebook-reader .plView .pl-body .row {
    padding: 5px 0;
    border-top: 1px solid #ccc;
}

.ebook-reader .plView input {
    border: 0;
    font-size: 14px;
    text-transform: capitalize;
    color: #5e687f;
    padding-top: 6px;
    width: 68%;
    float: left;
}

.ebook-reader .plView md-checkbox {
    width: 10%;
    float: left;
    margin: 3px 10px 0 0;
    ;
}

.ebook-reader .plView audio {
    width: 130px;
}

.ebook-reader .plView .icon-list .fa-pencil,
.ebook-reader .plView .icon-list .fa-save {
    font-size: 20px;
    color: #5e687f;
    padding-top: 8px;
    text-align: right;
}

.ebook-reader .plView .icon-list .cancel_field {
    font-size: 16px;
    color: #999;
}


.ebook-reader .recording-block .dialog-title h2 {
    font-size: 20px;
}

.ebook-reader .recording-sec {
    border: 1px solid #e5e5e5;
    padding: 12px 30px;
    margin: 0 10px 10px;
}

.ebook-reader .recording-sec .item-row {
    padding: 0 0 15px;
}

.ebook-reader .recording-sec .item-row h5 {
    font-size: 18px;
    color: #717171;
    text-transform: capitalize;
    font-weight: 600;
    margin-top: 0;
}

.ebook-reader .recording-sec .item-row ul.item-list {
    margin: 0;
    padding: 0;
}

.ebook-reader .recording-sec .item-row ul.item-list li {
    display: inline-block;
    list-style: none;
    width: 24%;
    cursor: pointer;
}

.ebook-reader .recording-sec .item-row ul.item-list li h6 {
    font-size: 16px;
    color: #666666;
    text-transform: capitalize;
    font-weight: 600;
    text-align: center;
}

.ebook-reader .pagination-blk .pagination>li>a {
    padding: 7px 15px;
    font-size: 16px;
    color: #b2b2b2;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ebook-reader .pagination-blk .pagination>li>a span.fa {
    font-weight: 600;
}

.ebook-reader .pagination>li>a:hover,
.ebook-reader .pagination>li>a:focus,
.ebook-reader .pagination>li>span:hover,
.ebook-reader .pagination>li>span:focus {
    color: #fff;
    background-color: #2563a9;
}

.ebook-reader .recording-block .detail-section .item-pic {
    text-align: center
}

.ebook-reader .recording-block .detail-section .table-item h6 {
    font-size: 15px;
    color: #686868;
    text-transform: capitalize;
    font-weight: 600;
}

.ebook-reader .table {
    border: 1px solid #e4e4e4;
}

.ebook-reader .table thead tr th,
.ebook-reader .table tbody tr td {
    padding: 12px 25px;
    color: #9b9b9b;
    font-size: 13px;
}

.ebook-reader .table thead tr th {
    border-bottom: 0;
    font-size: 14px;
    text-transform: capitalize;
}

.ebook-reader .table thead {
    background-color: #f6f6f6;
}

.ebook-reader .dialog-container md-input-container {
    margin: 18px 0 !important;
}

.ebook-reader md-dialog {
    overflow: initial;
}

.ebook-reader .dialog-container .md-button:hover {
    color: #fff;
    background-color: #f04c27 !important;
}

.ebook-reader .dialog-container .md-button.btn-light {
    color: #3d3d3d;
    background-color: #d4d4d4;
}

.ebook-reader .dialog-container .md-button.btn-light:hover {
    background-color: #eee !important;
}

.ebook-reader .menuClose.menuClose-xs {
    top: -10px;
    right: -16px;
    width: 26px;
    min-height: 26px;
    height: 26px;
}

.ebook-reader .menuClose.menuClose-xs:hover {
    background-color: transparent !important;
    color: transparent !important;
}

.ebook-reader.ebook-padding {
    padding-bottom: 1% !important;
}

@media(max-width: 1800px) {
    .ebook-reader .content-pagination .record-toggle {
        right: 25%;
    }

    .ebook-reader .content-pagination .record-toggle li {
        padding: 0 4px;
    }

    .ebook-reader .content-pagination .record-toggle li .md-button {
        padding: 3px 5px;
    }

    .ebook-reader .content-pagination .record-toggle .md-button span {
        font-size: 12px;
    }
}

@media(max-width:1499px) {
    .ebook-reader .showArrow .ebook-arrow {
        right: 81px;
    }

    .ebook-reader .isEbook .ebook-arrow {
        right: 55px;
    }
}

@media(max-width:1100px) {

    .ebook-reader .isEbook header .rdmap-wrap li:first-child:after,
    .ebook-reader .isEbook header .rdmap-wrap li:last-child:before {
        top: 18px;
    }

    .ebook-reader .showArrow .ebook-arrow {
        right: 71px;
    }

    .ebook-reader .isEbook .ebook-arrow {
        right: 46px;
    }
}

@media(max-width:700px) and (orientation: portrait) {
    .portrait .ebook-reader .reader-footer.content-pagination .ebookControl {
        left: 4px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination {
        height: 113px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination select {
        font-size: 11px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .Page-turn {
        right: 2px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .user_icon_title1 {
        font-size: 8px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .voiceSpeadslider {
        top: -32px;
        padding: 0 2px !important;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .voiceSpeadslider md-slider {
        min-width: 50px;
        margin-top: -16px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .btn-record {
        margin-left: 8px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .btn-record i {
        width: 20px;
        height: 20px;
        margin-top: 5px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination ul {
        margin-top: 40px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .playlistLabel {
        left: 14px;
        bottom: 3px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .playlist {
        width: 42px;
        height: 42px;
        left: 20px;
    }
}

@media(max-width:359px) and (orientation: portrait) {
    .portrait .ebook-reader .reader-footer.content-pagination select {
        font-size: 10px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .user_icon_title1 {
        font-size: 8px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .voiceSpeadslider {
        font-size: -33px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .playlistLabel {
        left: 6px;
    }

    .portrait .ebook-reader .reader-footer.content-pagination .playlist {}
}

[ng-include="contentTemplatename"] flashcardsingle {
    display: block;
    top: 50%;
    position: relative;
    transform: translateY(-50%);
}

flashcardsingle {
    height: 100%;
}

flashcardsingle {
    height: 100%;
}

flashcardsingle>div {
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    height: 100%;
}

flashcardsingle .layout-row>.flex-40 {
    max-width: 100%;
}

flashcardsingle .layout-row>.flex-40 .demotrumpCard {
    font-size: 11vw;
}

flashcardsingle .layout-row>.flex-40 .demotrumpCard .level2 {
    height: 100%;
    display: table-cell;
    line-height: inherit;
}

.single-flash-card {
    width: 100%;
    height: 100%;
    padding: 3% 0;
}

.single-flash-card .demotrumpCard {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 48vh;
    height: 70vh;
    background: #fff;
    max-height: 129.03vw;
    max-width: 100vw;
    margin: auto;
    padding: 10px;
    border-radius: 20px;
    font-size: 3.3vw;
    font-weight: 600;
}

.single-flash-card .demotrumpCard .level1 {
    padding: 2px;
    border: 4px solid #324B96;
    border-radius: 15px;
}

.single-flash-card .demotrumpCard .level2 {
    border: 2px solid #324B96;
    border-radius: 10px
}

.single-flash-card .demotrumpCard .level2>span {
    margin-top: -21%;
}

.single-flash-card .demotrumpCard .level2>span.text-cap {
    margin-top: -5%;
}

/* Responsive style */
@media(max-width:700px) {
    .single-flash-card {
        padding: 2% 0;
    }
}

/* Mobile portrait view style */
.portrait .demotrumpCard {
    width: 23vh;
    height: 33vh;
    min-height: 50%;
    padding: 4px;
    border-radius: 10px;
}

.portrait .demotrumpCard .level1 {
    border-width: 2px;
    border-radius: 10px;
}

.portrait .singleFlashCardMixupCnt {
    margin: 0 auto;
    max-width: 80%;
    position: relative;
    height: 90%;
}

.portrait .singleFlashCardMixup {
    height: 190px;
}

.portrait .singleFlashCardMixup .upperCaseLetter,
.portrait .singleFlashCardMixup .lowerCaseLetter {
    font-size: 9vh !important;
}

.portrait .single-flash-card .demotrumpCard {
    width: 24vh;
    height: 33vh;
    min-height: 50%;
    padding: 4px;
    border-radius: 10px;
}

.portrait .single-flash-card .demotrumpCard .level1 {
    border-width: 2px;
    border-radius: 10px;
}

.portrait .single-flash-card .twoflash-card-wrap .level2 {
    font-size: 13vmin;
    border-width: 1px;
    border-radius: 7px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .singleFlashCardMixup {
        height: 450px;
    }

    .portrait .singleFlashCardMixup .upperCaseLetter,
    .portrait .singleFlashCardMixup .lowerCaseLetter {
        font-size: 11vh !important;
    }

    .portrait .single-flash-card .demotrumpCard {
        width: 37vh;
        height: 53vh;
        font-size: 35vmin;
    }
}

/* Mobile landscape view style */
.landscape .singleFlashCardMixup {
    width: 85%;
    height: 70%;
    margin-top: -20px;
}

.landscape .isIOS2 .singleFlashCardMixup {
    margin-top: 2%;
}

.landscape .single-flash-card .demotrumpCard {
    width: 43vh;
    height: 60vh;
    padding: 7px;
    border-radius: 15px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .singleFlashCardMixup {
        height: 55%;
    }
}

flashcardmixup {
    position: relative;
    margin: 0 auto;
}

.singleFlashCardMixupCnt {
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.singleFlashCardMixup .upperCaseLetter,
.singleFlashCardMixup .lowerCaseLetter {
    font-size: 14vh !important;
    font-weight: 600;
}

.singleFlashCardMixup {
    width: 100%;
    height: 70%;
    transform: rotate(-10deg);
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/singlecard.png);
    background-size: 100% 100%;
    border-radius: 14px;
}

.singleFlashCardMixup_copy {
    width: 75%;
}

.singleFlashCardMixup .left_letter,
.singleFlashCardMixup .imageCnt {
    height: 100%;
    font-size: 7em;
    padding: 12px;
}

.singleFlashCardMixup .imageCnt {
    height: 100%;
    font-size: 7em;
    padding: 12px;
}

.singleFlashCardMixup .Holder_flipcard {
    transform: rotate(0deg);
    /* border: 1px solid red; */
    height: 100%;
    width: 90%;
    position: relative;
    top: 0;
    left: 6%;
    margin: 0 auto;
    text-align: center;
}

.singleFlashCardMixup .Holder_flipcard .cardback {
    z-index: 1;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    display: table;
    transform: translateY(-50%);
}

.singleFlashCardMixup .Holder_flipcard .image_mix {
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    max-width: 90%;
    margin: 0;
    padding: 5%;
}

@media not all and (min-resolution:.001dpcm) {
    @media {
        .singleFlashCardMixup {
            margin-top: -50px;
        }
    }
}

/* Responsive style */
@media(min-width: 2000px) {
    .singleFlashCardMixup .Holder_flipcard .image_mix {
        max-width: 330px;
    }
}

@media(max-width:1024px) {
    .isIOS2 .flipTemp .fontface_ADV_CALIBRI span {
        font-size: 4vh;
    }

    .singleFlashCardMixup {
        height: 55%;
    }
}

@media(max-height:700px) {
    .singleFlashCardMixup {
        width: 90%;
        margin-bottom: -10px;
    }

    .singleFlashCardMixup .Holder_flipcard .image_mix {
        max-width: 80%;
        padding: 3%
    }
}

/* Mobile portrait view style */
.portrait .Holder_flipcard .image_mix {
    max-width: 100%;
    padding: 1%;
}

.twoflash-card-wrap {
    height: 100%;
}

.twoflash-card-wrap .level2 {
    font-size: 18vmin;
    font-weight: 600;
    letter-spacing: 20px;
}

[class*='section'].twoflash-cont {
    background: #cfe9f8;
}

.twoflash-card-wrap .demotrumpCard {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 46.5vh;
    height: 66vh;
    background: #fff;
    max-height: 129.03vw;
    max-width: 100vw;
    margin: auto;
    padding: 10px;
    border-radius: 20px;
}

.twoflash-card-wrap .demotrumpCard .level1 {
    padding: 2px;
    border: 4px solid #324B96;
    border-radius: 15px;
}

.twoflash-card-wrap .demotrumpCard .level2 {
    border: 2px solid #324B96;
    border-radius: 10px;
}

.flash-card-cont {
    position: relative;
}

.twoflash-cont {
    width: 100%;
    height: 100%;
    padding: 2% 0 6% 0;
}

.twoflash-cont .demotrumpCard .level2>span {
    margin: -4% 0 0 20px;
}

.twoflash-cont .two-flash-img {
    max-width: 100%;
    width: 100%;
    height: auto;
    padding: 15px;
}

.flash-card-sq1,
.flash-card-sq2 {
    padding: 5% 0;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/flash-card-bg1.png);
    background-repeat: repeat-x;
    background-size: 100% 70%;
    background-position: 0% 50%;
}

.flash-card-sq1a,
.flash-card-sq2a {
    padding: 5% 0;
}

.flash-card-sq1 .FadeOut,
.flash-card-sq1a .FadeOut {
    transition: 0.1s ease-in;
}

.flash-card-sq1 .FadeOut.ng-hide,
.flash-card-sq1a .FadeOut.ng-hide {
    transform: scale(0.8);
}

.flash-card-sq1 .FadeOut.ng-hide-remove,
.flash-card-sq1a .FadeOut.ng-hide-remove {
    opacity: 1;
    transform: scale(1.0);
}

.flash-card-sq1 .FadeOut.ng-hide-add,
.flash-card-sq1a .FadeOut.ng-hide-add {
    opacity: 1;
    transition: 0.1s ease-in all
}

.flash-card-sq2 .level2>span,
.flash-card-sq2 .level2 img,
.flash-card-sq2a .level2>span,
.flash-card-sq2a .level2 img {
    transition: 0.2s ease-in;
}

.flash-card-sq2 .ng-hide-remove,
.flash-card-sq2a .ng-hide-remove {
    transform: scale(0);
    transition: 0.05s ease-in;
}

.flash-card-sq2 .ng-hide-add,
.flash-card-sq2a .ng-hide-add {
    transform: scale(1.0);
    transition: 0.05s ease-in;
}

.flash-card-sq3,
.flash-card-sq4,
.flash-card-sq5 {
    position: relative;
    background: #fff;
    height: 100%;
    min-height: 100%;
    margin: 0 5%;
    /* padding: 2% 0; */
}

.flash-card-sq3 .demotrumpCard,
.flash-card-sq4 .demotrumpCard,
.flash-card-sq5 .demotrumpCard {
    background: none;
}

.flash-card-sq3 .demotrumpCard .level2,
.flash-card-sq4 .demotrumpCard .level2,
.flash-card-sq5 .demotrumpCard .level2 {
    position: absolute;
    left: -5%;
    top: 0;
    font-size: 15vmin;
}

.flash-card-sq3 .two-flash-img,
.flash-card-sq4 .two-flash-img,
.flash-card-sq5 .two-flash-img {
    max-height: 60vh;
    max-width: 100vh;
}

.flash-card-sq3:before,
.flash-card-sq3:after,
.flash-card-sq4:before,
.flash-card-sq4:after,
.flash-card-sq5:before,
.flash-card-sq5:after {
    content: '';
    position: absolute;
    left: -0.5%;
    right: 0;
    top: 0;
    width: 101%;
    height: 20px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/rollover-wrap.png) 0 0/100% 100% no-repeat;
}

.flash-card-sq3:after,
.flash-card-sq4:after,
.flash-card-sq5:after {
    top: auto;
    bottom: 0;
}

.flash-card-sq3 .demotrumpCard .level1,
.flash-card-sq3 .demotrumpCard .level2,
.flash-card-sq4 .demotrumpCard .level1,
.flash-card-sq4 .demotrumpCard .level2,
.flash-card-sq5 .demotrumpCard .level1,
.flash-card-sq5 .demotrumpCard .level2 {
    border: 0;
}

.flash-card-sq3 .demotrumpCard .level1 {
    padding: 2px;
    border-radius: 15px;
}

.board-effect:before,
.board-effect:after {
    content: '';
    position: absolute;
    left: -0.5%;
    right: auto;
    top: -4%;
    bottom: -4%;
    width: 20px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/board-effect-bg.png) 0 0/100% 100% no-repeat;
    z-index: 6;
}

.board-effect:after {
    left: auto;
    right: -0.5%;
}

.board-stand {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    height: 102px;
    max-width: 85%;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.board-stand:before,
.board-stand:after {
    content: '';
    position: absolute;
    left: 0;
    width: 90px;
    height: 100%;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/board-stand.png) 0 0/100% 100% no-repeat;
}

.board-stand:after {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

.mask-vertical {
    position: absolute;
    left: 0;
    right: 0;
    top: 21px;
    width: 100%;
    height: 0;
    background: #fff;
    z-index: 5;
}

.mask-wrap {
    height: 97%;
    transition: 0.4s ease-in;
}

.fade-out-effect {
    opacity: 0;
    transition: opacity linear 1.2s;
}

.mask-vertical:before {
    content: '';
    position: absolute;
    left: -0.5%;
    right: 0;
    bottom: 0;
    width: 101%;
    height: 20px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/rollover-wrap.png) 0 0/100% 100% no-repeat;
    z-index: 5;
}

.sq-animate {
    margin: 0 5%;
    transition: 0.5s ease-in;
}

.flash-card-sq4 .sq-animate1:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 25px;
    background: #fff;
    z-index: 5;
    transition: 0.5s ease-in all;
}

.flash-card-sq4 .sq-animate1.ng-hide-remove:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 90%;
    bottom: 25px;
    background: #fff;
    transition: 0.5s ease-in all;
}

.flash-card-sq4 .sq-animate1.ng-hide-add:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    bottom: 25px;
    background: #fff;
    transition: 0.5s ease-in all
}

.flash-card-sq5 {
    box-shadow: inset 0 0 1px 2px #425049;
}

.board-bottom:after {
    content: '';
    position: absolute;
    bottom: -104px;
    width: 205px;
    height: 93px;
    background: url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/board-stand.png') center center no-repeat;
}

.sq-animate2:before {
    content: '';
    position: absolute;
    display: block;
    background: #fff;
    width: 0;
    height: 95%;
    z-index: 1;
    left: 3px;
    transition: 0.5s ease-in;
}

.sq-animate2.ng-hide-remove:before {
    width: 99%;
    transition: 0.5s ease-in;
}

.sq-animate2.ng-hide-add:before {
    width: 0;
    transition: 0.5s ease-in;
}

/** Responsive style **/
@media(max-width: 1499px) {
    .mask-wrap {
        height: 94.7%;
    }
}

@media(max-width:1024px) {

    .flash-card-sq1a,
    .flash-card-sq2a {
        padding-right: 0;
    }

    .flash-card-sq1a .flex-30,
    .flash-card-sq2a .flex-30 {
        max-width: 40%;
    }

    .flash-card-sq3 .demotrumpCard .level2,
    .flash-card-sq4 .demotrumpCard .level2,
    .flash-card-sq5 .demotrumpCard .level2 {
        left: -10%;
        font-size: 20vmin;
    }

    .flash-card-sq3 .two-flash-img,
    .flash-card-sq4 .two-flash-img,
    .flash-card-sq5 .two-flash-img {
        max-height: 55vh;
    }

    .bookTemplate {
        max-width: 85%;
    }

    /* .flipbook-viewport .container-flip {
        padding: 7% 0;
    } */
}

@media(max-width:700px) {
    .twoflash-cont {
        padding: 2% 0;
    }
}

/* Mobile portrait view style */
.portrait .demotrumpCard {
    width: 23vh;
    height: 33vh;
    min-height: 50%;
    padding: 4px;
    border-radius: 10px;
}

.portrait .demotrumpCard .level1 {
    border-width: 2px;
    border-radius: 10px;
}

.portrait .flash-card-sq3 .demotrumpCard .level2,
.portrait .flash-card-sq4 .demotrumpCard .level2,
.portrait .flash-card-sq5 .demotrumpCard .level2 {
    left: 0;
    font-size: 20vmin;
}

.portrait .twoflash-card-wrap .level2 {
    font-size: 13vmin;
    border-width: 1px;
    border-radius: 7px;
}

.portrait .twoflash-cont .flex-30 {
    max-width: 50%;
}

.portrait .demotrumpCard.twoFlashcardRight img,
.portrait .two-flash-img {
    padding: 5px;
}

.portrait .flash-card-sq3 .two-flash-img,
.portrait .flash-card-sq4 .two-flash-img,
.portrait .flash-card-sq5 .two-flash-img {
    max-height: 25vh;
    width: auto;
}

.portrait .flash-card-sq1,
.portrait .flash-card-sq2 {
    padding-right: 0;
    background-size: 100% 30%;
}

.portrait .flash-card-sq3,
.portrait .flash-card-sq4,
.portrait .flash-card-sq5 {
    height: 80%;
    min-height: 80%;
}

.portrait .mask-vertical {
    top: 18px;
}

.portrait .mask-wrap {
    height: 95.5%;
}

.portrait .flash-card-sq3 .demotrumpCard .level2,
.portrait .flash-card-sq4 .demotrumpCard .level2,
.portrait .flash-card-sq5 .demotrumpCard .level2 {
    font-size: 18vmin;
}

.portrait .flash-card-sq3:before,
.portrait .flash-card-sq3:after,
.portrait .flash-card-sq4:before,
.portrait .flash-card-sq4:after,
.portrait .flash-card-sq5:before,
.portrait .flash-card-sq5:after,
.portrait .mask-vertical:before {
    height: 15px;
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) {
    .portrait .mask-wrap {
        height: 92.7%;
    }

    .portrait .flash-card-sq3:before,
    .portrait .flash-card-sq3:after,
    .portrait .flash-card-sq4:before,
    .portrait .flash-card-sq4:after,
    .portrait .flash-card-sq5:before,
    .portrait .flash-card-sq5:after {
        height: 10px;
        top: -2px;
    }

    .portrait .flash-card-sq3:after,
    .portrait .flash-card-sq4:after,
    .portrait .flash-card-sq5:after {
        top: auto;
        bottom: -2px;
    }

    .portrait .board-effect:before,
    .portrait .board-effect:after {
        width: 10px;
    }

    .portrait .board-stand:before,
    .portrait .board-stand:after {
        width: 65px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .twoflash-card-wrap .level2 {
        font-size: 14vmin;
    }

    .portrait .flash-card-sq3 .two-flash-img,
    .portrait .flash-card-sq4 .two-flash-img,
    .portrait .flash-card-sq5 .two-flash-img {
        max-height: 30vh;
    }
}

/* Mobile landscape view style */
.landscape .flash-card-sq1,
.landscape .flash-card-sq2 {
    padding-right: 0;
}

.landscape .flash-card-sq3 .two-flash-img,
.landscape .flash-card-sq4 .two-flash-img,
.landscape .flash-card-sq5 .two-flash-img {
    max-height: 55vh;
}

.landscape .twoflash-card-wrap .level2 {
    font-size: 14vmin;
}

/** abc game pick css style begins **/

.abcgame_abc-container span,
.abcgame_abc-container div {
    cursor: default;
}

.abcgame_abc-container input[type="button"],
.abcgame_abc-container button {
    background-color: transparent;
}

.abcgame_opcss {
    cursor: pointer;
}

.abcgame_opcssactive {
    opacity: 1;
    border: none;
    cursor: none;
}

.abcgame_opcsstext {
    text-align: center;
    cursor: pointer;
    color: #000 !important;
}

.abcgame_abcpick_section1 {
    width: 100%;
    height: 100%;
    /*float: left;*/
}

.abcgame_abcpick_section2 {
    width: 100%;
    height: 98.5%;
    /*height: 593px;*/
}

.abcgame_abcpick_section2_small {
    width: 100%;
    height: 100%;
}

.abcgame_abcpick_innersection2 {
    margin: 0px 25px;
    padding: 10px;
    height: 92%;
}

.abcgame_abcpick_section3 {
    height: 100%;
}

.abcgame_abcpick_helpicon {
    margin: 0px 13px;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background-color: #ccc;
    font-size: 40px;
    
    text-align: center;
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-left: 48px;
    margin-right: 77px;
}

.abcgame_abc-container {
    width: 100%;
    /* max-width: 1200px; */
    /*height: 600px;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    outline: transparent;
}

.abcgame_abc-container * {
    /*font-family: arialbold !important;*/
    /* font-family: Arial !important;
				font-weight: 600; */
}

.abcgame_abc-containerWrap {
    /* background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpickbg.png); */
    width: 100%;
    background-size: 100% 100%;
    background-image: none !important;
    background: #EECDA3 !important;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #BAEBFB, #FCFDBF, #ffffff) !important;
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #BAEBFB, #FCFDBF, #ffffff) !important;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.abcgame_abc-container_big {
    min-height: 700px;
}

/**
* The cards
*
* Each card plays home to a front and back. I've set them up as squares here
* by using the padding technique, but you may set them up in any dimensions
* you like based on your site design.
*/

.abcgame_abcpick_card {
    position: relative;
    float: left;
    text-align: center;
    width: 98px;
    height: 98px;
    margin-right: 14px;
    margin-bottom: 17px;
}

/* card fronts and backs */

.abcgame_abcpick_card_front,
.abcgame_abcpick_card_frontMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 100%;
    text-align: center;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_flip_card.png);
    background-size: 100% 100%;
}

.abcgame_abcpick_card_back {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    width: 96px;
    height: 98px;
    background-image: none;
    background-size: 100% 100%;
    padding: 5px;
    margin-left: 6px;
    -webkit-border-radius: 14px;
    -o-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    border: 3px solid #2e97e4;
    border-radius: 9px !important;
    box-shadow: #000 1px 2px 16px;
}

.abcgame_abcpick_card_back1 {
    top: 0;
    left: 0;
    width: 95px;
    height: 92px;
    background-color: #e8f3ba;
    margin-left: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    margin-top: 6%;
}

/* Lightbox css*/

.abcgame_abcpick_overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0ms;
    visibility: visible;
    opacity: 1;
    z-index: 16;
}

.alert {
    margin-top: -25px;
}

.greybtn {
    background-color: #e6e5e5;
    font-size: 24px;
    border: none;
    width: 200px;
    height: 40px;
    margin-top: 20px;
    cursor: pointer;
}

.greybtn:hover {
    background-color: #006f2e;
    color: #fff;
}

.txt_align_center {
    text-align: center;
}

.licss {
    list-style-type: disc;
    font-size: 24px;
    line-height: 2em;
    float: none;
}

.abcgame_abcpick_fleft {
    float: left;
    font-size: 19px;
    width: 45%;
    text-align: right;
}

.abcgame_abcpick_fright {
    float: left;
    font-size: 19px;
    width: 45%;
    text-align: left;
    padding-left: 20px;
}

.clr {
    clear: both;
    line-height: 10px;
}

.abcgame_abcpick_card_front,
.abcgame_abcpick_card_back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.abcgame_abcpick_card_front {
    cursor: pointer;
}

.abcgame_abcpick_card_back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

/* card text */

.abcgame_abcpick_card_text {
    display: inline-block;
    position: relative;
    top: 0px;
    bottom: 0;
    margin: auto;
    height: 20px;
    color: #fff;
    font-family: "Roboto Slab", serif;
}

.abcgame_modecss {
    text-align: center;
    font-size: 18px;
    
    color: #0c3f6b;
    width: 100%;
    top: 67%;
    position: absolute;
}

/* click effect */

.abcgame_abcpick_card.effect_click.flipped .abcgame_abcpick_card_front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.abcgame_abcpick_card.effect_click.flipped .abcgame_abcpick_card_back {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.abcgame_abcpick_card.effect_click.flipped .abcgame_abcpick_card_back1 {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.abcgame_abcpick_card.effect_click.opcssactive .abcgame_abcpick_card_back {
    -moz-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-transform: rotateY(0) !important;
    -moz-transform: rotateY(0) !important;
    -ms-transform: rotateY(0) !important;
    transform: rotateY(0) !important;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.abcgame_abcpick_imgbox .abcgame_abcpick_card .effect_click .abcgame_opcssactive .abcgame_abcpick_card_back .abcgame_abcpick_card_text {
    padding: 5px;
}

.abcgame_abcpick_card.effect_click .abcgame_opcssactive .abcgame_abcpick_card_back .abcgame_opcsstext {
    width: 70px;
    padding-top: 5px !important;
}

img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.abcgame_abcpick_box_word {
    font-size: 40px;
    line-height: 52%;
    position: absolute;
    letter-spacing: 4px;
    cursor: default;
    text-align: center;
    display: block;
    width: 91%;
}

.abcgame_box_letter {
    font-size: 50px;
    line-height: 45%;
    position: absolute;
}

.abcgame_abcpick_card_back img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.abcgame_abcpick_timer {
    position: absolute;
    z-index: 2;
    top: 15%;
    left: 14%;
}

.abcgame_abcrow,
.abcgame_abccol {
    height: 600px;
    position: relative;
}

.abcgame_abc-container .abcgame_sidemenu {
    width: 25%;
    float: left;
}

.abcgame_abcpick_floatPlayArea {
    width: 600px;
    height: 660px;
    float: left;
    position: relative;
}

.abcgame_abc-container .abcgame_centerGamePart {
    width: 600px;
    margin: 0 auto;
    position: relative;
    height: 600px;
}

.abcgame_pageSection {
    width: 100%;
    height: 100%;
    /*				position: relative;
				overflow: hidden;*/
}

.abcgame_abcMatchWelcomePage {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_background_layer1.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    bottom: 0;
    background-position-y: top;
}

.abcgame_background_layer2 {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_background_layer2.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 59%;
    position: absolute;
    z-index: 12;
    left: 0px;
    top: 0px;
    background-size: 100% 100%;
}

.abcgame_abcMatchInstructionPage {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_level_background.png);
    background-repeat: no-repeat;
}

.abcgame_abcpick_instructionList div {
    font-size: 19px;
    text-align: center;
    
}

.abcgame_abcpick_levelTitle {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_instruction_title.png);
    font-size: 22px;
    text-align: center;
    width: 362px;
    line-height: 51px;
    color: #fff;
    line-height: 27px;
    height: 60px;
    position: absolute;
    bottom: 84%;
    left: 17%;
    padding-top: 11px;
}

.abcgame_abcpick_instructionList {
    width: 78%;
    margin: 0 auto;
}

.abcgame_abclevelContainer {
    background-repeat: no-repeat;
    height: 85px;
    bottom: 0%;
    position: absolute;
    background-size: 100% 100%;
    z-index: 7;
    margin: 0 auto;
    width: 100%;
    display: flex;
}

.abcgame_abcpick_showlevel {
    width: 100%;
}

.abcgame_abclevelContainer .abcgame_abcpick_levelbtn {
    margin: 10px;
    padding: 5px;
    cursor: pointer;
    border: none;
    color: #474E4F;
    width: 104px;
    font-size: 18px;
    height: 40px;
    background-size: 100% 100%;
}

.abcgame_abcpick_modeContainer {
    margin: 0 auto;
}

.abcgame_abcpick_modedivcss {
    float: left;
    text-align: center;
    font-size: 16px;
    font-family: 'Poppins';
    height: 100%;
    margin: 0px 3px;
}

.abcgame_abcpick_modedivcss div {
    padding: 0 15px;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnEasy {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_easy_button.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnMedium {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_medium_button.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnHard {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_hard_button.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnEasy:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_easy_button_hover.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnMedium:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_medium_button_hover.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnHard:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_hard_button_hover.png);
    background-repeat: no-repeat;
}

.abcgame_abcPlaybtn {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/ABCplay.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    border: none;
}

.abcgame_abcPlaybtn:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/ABCplay_hover.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    border: none;
}

.selectLevel {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_selection.png);
    background-repeat: no-repeat;
    background-position: 1px 6px;
    background-size: 100% 100%;
    /*width: 138px;
height: 76px;*/
}

.abcgame_abcMatchGameplayPage {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_play_board.png);
    background-repeat: no-repeat;
    position: relative;
    background-size: 100% 100%;
    padding-top: 17px;
    background-color: #b2d618;
}

.abcgame_abcpick_gamePlayWrapper {
    /*background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/play_board.png);
background-size: 100% 100%;
background-repeat: no-repeat;*/
    width: 100%;
    height: 100%;
    color: #0c3f6b;
}

.abcgame_abcpick_matchHead {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_matches.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 37%;
    height: 9%;
    position: absolute;
    top: 14px;
    right: 2.2%;
    text-align: center;
    padding: 6px 57px;
}

.abcgame_abcpick_gamePlayInner {
    height: 100%;
    width: 100%;
    padding: 0px 20px;
}

.abcgame_abcpick_gamePlayInnerRow {
    height: 50%;
    padding: 15px 0px;
}

.abcgame_abcpick_gametypeHead {
    font-size: 18px;
    padding-bottom: 10px;
}

.abcgame_abcpick_matchHeadContent {
    font-size: 14px;
    color: #fff;
}

.abcgame_abcpick_matchHeadContent div {
    font-size: 18px;
    line-height: 17px;
}

.abcgame_abcpick_starcount {
    color: #F9CC0B;
    padding-right: 0px;
}

.abcgame_abcpick_logoGroup {
    position: absolute;
    top: 26%;
    width: 100%;
    height: 49%;
    text-align: center;
    z-index: 6;
}

.abcgame_abcpick_logoGroupLeftpanel {
    width: 100%;
}

.abcgame_abcpick_logoGroupLeftpanel img {
    width: 95%;
    height: 90%;
    margin: 0 auto;
    display: inline-block;
    margin-right: 6px;
    margin-top: -9px;
}

.abcgame_abcpick_logoGroupLeftpanel {
    position: relative;
    text-align: center;
}

.abcgame_abcpick_alertSelectLevel {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_alert_window.png);
    background-size: 100% 100%;
    width: 261px;
    height: 91px;
    padding: 26px 25px;
    text-align: center;
    font-size: 21px;
}

.abcgame_abcpick_leftmenuWrapper {
    width: 100%;
    height: 100%;
    position: relative;
}

.abcgame_abcpick_activeEffectInner {
    background-image: none;
    background-size: 100% 100%;
    width: 96px;
    height: 98px;
    animation: abcgame_abcpick_scaleimg .8s;
    animation-fill-mode: forwards;
    border: 3px solid #00e400;
    border-radius: 9px !important;
}

@keyframes abcgame_abcpick_scaleimg {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes abcgame_abcpick_scaleimg {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(1, 1);
        /*transform: rotateZ(8deg);*/
    }
}

@-ms-keyframes abcgame_abcpick_scaleimg {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(1, 1);
        /*transform: rotateZ(8deg);*/
    }
}

@-moz-keyframes abcgame_abcpick_scaleimg {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(1, 1);
    }
}

.abcgame_abcpick_alertSelectLevelOk {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_iclose.png);
    background-size: 100% 100%;
    width: 47px;
    height: 47px;
    border: none;
}

.abcgame_abcpick_alertSelectLevelWrapper {
    width: 80%;
    height: 30%;
    margin-top: 72%;
    margin-left: 27%;
    position: relative;
}

.abcgame_abcpick_alertSelectLevelOverlay {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    transition: opacity 0ms;
    visibility: visible;
    opacity: 1;
    z-index: 2;
}

.abcgame_abcpick_overlayCont {
    background: #bcff48;
    opacity: 0.8;
    width: 100%;
    height: 100%;
    position: absolute;
}

.abcgame_abcpick_leftMenuRow1 {
    width: 100%;
    height: 79px;
    padding: 20px;
    text-align: center;
    padding-bottom: 0;
}

.abcgame_abcpick_leftMenuRow1 .abcgame_abcpickcontrols {
    float: left;
    width: 33%;
}

.abcgame_abcpick_gameResult {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_result_window.png);
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    text-align: center;
    padding-top: 63px;
    padding-left: 39px;
    font-size: 1px;
}

.abcgame_abcpick_gameResultTitle {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_result_title.png);
    background-size: 100% 100%;
    width: 100%;
    height: 55px;
    position: absolute;
    top: -18px;
    left: -1%;
    color: #fff;
    font-size: 17px;
    padding: 12px 75px;
    text-align: center;
}

.abcgame_abcpick_gameResultWrapper {
    width: 50%;
    height: 322px;
    color: #000;
    position: relative;
    float: left;
    margin-top: 29%;
    margin-left: 3%;
}

.abcgame_nextlevel {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_next_level.png);
    background-size: 100% 100%;
    width: 118px;
    height: 40px;
    border: none;
    font-size: 15px;
    background-repeat: no-repeat;
    
}

.abcgame_playagain,
.abcgame_timeup {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_play_again.png);
    background-size: 100% 100%;
    width: 118px;
    height: 40px;
    border: none;
    font-size: 15px;
    background-repeat: no-repeat;
    
}

/*start Css For ABC Match Result Screens*/

#abcMatchMainBody .abcgame_playagain,
#abcMatchMainBody .abcgame_timeup,
#abcMatchMainBody .abcgame_nextlevel {
    background-image: none;
    width: auto !important;
    background-repeat: no-repeat;
    height: auto;
    font-size: 16px;
    box-shadow: 0px 2px 0px 4px rgb(75, 69, 81);
    border-radius: 67px;
    line-height: 26px;
    margin: auto;
    background-color: #fcffc5;
    
    padding: 1px 13px !important;
    height: auto !important;
}

#abcMatchMainBody .abcgame_playagain,
#abcMatchMainBody .abcgame_timeup {
    border: 5px solid #f6006d;
    border-top: 1px solid #f6006d;
}

#abcMatchMainBody .abcgame_nextlevel {
    border: 5px solid #ffba07;
    border-top: 1px solid#ffba07;
}

#abcMatchMainBody div#game_level_complete .abcgame_abcpick_gameResultWrapper {
    width: 53%;
    color: #000;
    position: relative;
    float: left;
    margin-top: 0;
    margin-left: 0;
    height: 100%;
    padding: 0 20px;
}

#abcMatchMainBody .abcgame_abcpick_gameResultWrapper .abcgame_abcpick_resultanim {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_gameResultTitle {
    top: -20px;
    left: 0;
    color: #fff;
    font-size: 17px;
    padding: 12px 75px;
    text-align: center;
    background-size: 100% 100%;
    width: 100%;
    height: 55px;
    line-height: normal;
}

#abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_scoreBtns {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 1px;
    left: auto;
    z-index: 100;
    top: auto;
}

#abcMatchMainBody .abcgame_abcpick_getreadyParentWrap {
    width: 47%;
    float: left;
    font-size: 36px;
    position: relative;
    height: 100%;
}

#abcMatchMainBody .abcgame_abcpick_getreadyWrap {
    height: 100%;
    color: #0c3f6b;
    width: 100%;
    text-align: center;
    margin-top: 0;
}

#abcMatchMainBody .abcgame_abcpick_getreadyWrap .readyWrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
}

#abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_fleft {
    font-size: 16px;
    width: 50%;
    
}

#abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_fright {
    font-size: 17px;
    width: 50%;
    padding-left: 10px;
    
}

#abcMatchMainBody #game_complete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#abcMatchMainBody #game_complete .abcgame_abcpick_eachlevelcongrats {
    position: relative;
    top: auto;
    left: 0;
    background-size: 100% 100%;
    width: 466px;
    height: 211px;
    padding-top: 0;
    right: 0;
    margin: auto;
}

#abcMatchMainBody #game_complete .abcgame_abcpick_gameResultWrapper.abcgame_abcpick_scoreboxeachlevelcongrats {
    width: 100%;
    height: 239px;
    color: #000;
    position: relative;
    float: left;
    text-align: center;
    margin: 0 !important;
}

#abcMatchMainBody #game_complete .abcgame_abcpick_gameResult {
    background-size: 100% 100%;
}

#abcMatchMainBody #game_complete .abcgame_playagain,
#abcMatchMainBody #game_complete .abcgame_nextlevel {
    margin: 0;
}

#abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_scoreBtns {
    bottom: -4px;
    display: flex;
    justify-content: space-evenly;
}

/*End Css For ABC Match Result Screens*/

.abcgame_scoreBtns {
    width: 88%;
    height: auto;
    position: absolute;
    top: 207px;
    left: 3px;
    z-index: 100;
}

.abcgame_leftMenuLevelWindow {
    text-align: center;
    font-size: 19px;
    
    color: #000000;
    width: 100%;
    top: 45%;
    position: absolute;
}

.abcgame_leftMenuLevel {
    width: 100%;
    position: relative;
    margin: 0 auto;
    margin-top: 25px;
}

.abcgame_leftMenuLevelin {
    margin: 0 auto;
    width: 57%;
    position: relative;
}

.abcgame_abcpick_ratingRow .abcgame_startRate {
    display: inline-block;
    margin-bottom: 15px;
    margin: 8px 4px;
}

.abcgame_abcpick_ratingRow {
    width: 96%;
    height: auto;
    margin: 0 auto;
    margin-top: 39px;
}

.abcgame_abcpick_ratingRowcontent {
    text-align: center;
}

.abcgame_startRate img {
    width: 100%;
    height: 100%;
}

.abcgame_helpHome {
    right: 35px;
    position: absolute;
    top: 10px;
    z-index: 15;
}

.abcgame_instructionTitle {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_instruction_title.png);
    background-repeat: no-repeat;
    width: 362px;
    height: 60px;
    background-size: 100% 100%;
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 45px;
    position: absolute;
    bottom: 81%;
    left: 16%;
}

.abcgame_instructions {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_instruction_window.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 170px;
    background-size: 100% 100%;
    padding-top: 9%;
}

.abcgame_instructionOk {
    position: absolute;
    width: 65px;
    height: 40px;
    top: -11%;
    right: -5%;
}

.abcgame_instructionsPageContent {
    position: relative;
    margin: 31% 20px 0 20px;
}

.abcgame_timeup {
    position: absolute;
    top: 45%;
    left: 36%;
    color: #000;
    font-size: 16px;
}

.abcgame_readycount {
    margin-top: 21px;
    font-size: 59px;
    animation: getready 1s;
    animation: abcgame_abcpick_getreadyanim 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 3;
}

.abcgame_readyclass {
    color: #0c3f6b;
    animation: abcpick_getready 1s;
    width: 100%;
    text-align: center;
    margin-top: 5%;
    animation: abcgame_abcpick_getreadyanim 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 3;
    font-size: 80px;
}

@keyframes abcgame_abcpick_getreadyanim {
    0% {
        transform: scale(1, 1);
    }

    70% {
        transform: scale(1.3, 1.3);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes abcgame_abcpick_getreadyanim {
    0% {
        -webkit-transform: scale(1, 1);
    }

    70% {
        -webkit-transform: scale(1.3, 1.3);
    }

    100% {
        -webkit-transform: scale(1, 1);
    }
}

@-ms-keyframes abcgame_abcpick_getreadyanim {
    0% {
        -ms-transform: scale(1, 1);
    }

    70% {
        -ms-transform: scale(1.3, 1.3);
    }

    100% {
        -ms-transform: scale(1, 1);
    }
}

@-moz-keyframes abcgame_abcpick_getreadyanim {
    0% {
        -moz-transform: scale(1, 1);
    }

    70% {
        -moz-transform: scale(1.3, 1.3);
    }

    100% {
        -moz-transform: scale(1, 1);
    }
}

.abcgame_abcpick_getready,
.abcgame_abcpick_go {
    color: #0c3f6b;
    width: 100%;
    text-align: center;
    margin-top: 16%;
    font-size: 74px;
    position: relative;
}

.abcgame_abcpick_go {
    margin-top: 3%;
    animation: abcgame_abcpick_goanim 1.5s;
    animation-fill-mode: forwards;
    font-size: 400px;
    transform: scale(.2, .2);
}

.abcgame_abcpick_goWrap {
    position: absolute;
    z-index: 100;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 100%;
}

.abcgame_abcpick_gotext {
    color: #0c3f6b;
    text-align: center;
    margin: 0 auto;
    animation: abcgame_abcpick_goanim 1.5s;
    animation-fill-mode: forwards;
    font-size: 400px;
    transform: scale(.2, .2);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    line-height: normal;
}

@keyframes abcgame_abcpick_goanim {
    0% {
        transform: scale(.2, .2);
    }

    95% {
        transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        transform: scale(1, 1);
        opacity: 0;
    }
}

@-webkit-keyframes abcgame_abcpick_goanim {
    0% {
        -webkit-transform: scale(.2, .2);
    }

    95% {
        -webkit-transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1, 1);
        opacity: 0;
    }
}

@-ms-keyframes abcgame_abcpick_goanim {
    0% {
        -ms-transform: scale(.2, .2);
    }

    95% {
        -ms-transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        -ms-transform: scale(1, 1);
        opacity: 0;
    }
}

@-moz-keyframes abcgame_abcpick_goanim {
    0% {
        -moz-transform: scale(.2, .2);
    }

    95% {
        -moz-transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        -moz-transform: scale(1, 1);
        opacity: 0;
    }
}

.abcgame_abclevelContainer .abcgame_modebtn {
    margin: 10px;
    padding: 5px;
    cursor: pointer;
    border: none;
    color: #474E4F;
    font-size: 16px;
    height: 40px;
    background-size: 100% 100%;
    width: 133px;
    height: 40px;
    
    padding-top: 0;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnplay {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_play_normal.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnlearn {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_learn_normal.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnplay:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_play_hover.png);
    background-repeat: no-repeat;
}

.abcgame_abclevelContainer .abcgame_abcpick_btnlearn:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_learn_hover.png);
    background-repeat: no-repeat;
}

.abcgame_leveldivcss {
    float: left;
    margin-right: 5%;
    text-align: center;
    margin: 0 auto;
}

.abcgame_leveldivcss div {
    padding: 0 15px;
}

.abcgame_abcpick_wrongEffect {
    -webkit-animation: abcgame_abcpick_wrongscaleimg .2s;
    -moz-animation: abcgame_abcpick_wrongscaleimg .2s;
    -ms-animation: abcgame_abcpick_wrongscaleimg .2s;
    animation: abcgame_abcpick_wrongscaleimg .2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes abcgame_abcpick_wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-webkit-keyframes abcgame_abcpick_wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-ms-keyframes abcgame_abcpick_wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-moz-keyframes abcgame_abcpick_wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

.abcgame_clockWrap {
    width: 143px;
    height: 144px;
    overflow: hidden;
    border-radius: 73px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 20px;
}

#abcgame_abcclock {
    /* position: relative;
				margin: auto;
				height: 236px;
				width: 236px;
				text-align: center;*/
    /* animation-iteration-count: 1;  */
    /* background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abc_clock.png); */
    background-image: url("/modules/phonics/dest/lgftimer_cp_bayatree.png");
    animation-play-state: running;
}

.abcgame_abcpick_regulartimer {
    -webkit-animation: abcgame_abcpick_playc 75s steps(4) infinite, abcpick_playh 18.75s steps(15) infinite;
    -moz-animation: abcgame_abcpick_playc 75s steps(4) infinite, abcpick_playh 18.75s steps(15) infinite;
    -ms-animation: abcgame_abcpick_playc 75s steps(4) infinite, abcpick_playh 18.75s steps(15) infinite;
    animation: abcgame_abcpick_playc 75s steps(4) infinite, abcpick_playh 18.75s steps(15) infinite;
}

.abcgame_abcpick_fasttimer {
    -webkit-animation: abcgame_abcpick_playc 60s steps(4) infinite, abcpick_playh 15s steps(15) infinite;
    -moz-animation: abcgame_abcpick_playc 60s steps(4) infinite, abcpick_playh 15s steps(15) infinite;
    -ms-animation: abcgame_abcpick_playc 60s steps(4) infinite, abcpick_playh 15s steps(15) infinite;
    animation: abcgame_abcpick_playc 60s steps(4) infinite, abcpick_playh 15s steps(15) infinite;
}

.abcgame_abcpick_slowtimer {
    -webkit-animation: abcgame_abcpick_playc 90s steps(4) infinite, abcpick_playh 22.5s steps(15) infinite;
    -moz-animation: abcgame_abcpick_playc 90s steps(4) infinite, abcpick_playh 22.5s steps(15) infinite;
    -ms-animation: abcgame_abcpick_playc 90s steps(4) infinite, abcpick_playh 22.5s steps(15) infinite;
    animation: abcgame_abcpick_playc 90s steps(4) infinite, abcpick_playh 22.5s steps(15) infinite;
}

@-webkit-keyframes abcgame_abcpick_playc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -944px;
    }
}

@-webkit-keyframes abcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3540px;
    }
}

/* background-position-x: -2355px;
    background-position-y: -688px;
*/

@-moz-keyframes abcgame_abcpick_playc {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -944px;
    }
}

@-moz-keyframes abcpick_playh {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -3540px 0px;
    }
}

@keyframes abcgame_abcpick_playc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -944px;
    }
}

@keyframes abcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3540px;
    }
}

.abcgame_abcpick_countdown {
    font-size: 24px;
    text-align: center;
    width: 50%;
    color: #fff;
    position: absolute;
    top: 40%;
    left: 24%
}

#popBalloonCountdownNmbr {
    font-size: 24px;
    text-align: center;
    width: 50%;
    color: #fff;
    margin: 0 auto;
    /*
				position: absolute;
				top: 33.4%;
				left:24%
 */
}

.abcgame_abcpick_butterfly {
    width: 55px;
    height: 48px;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_butterfly.png);
    position: absolute;
    z-index: 7;
    -webkit-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
}

.abcgame_abcpick_butterfly2,
.abcgame_abcpick_butterfly4 {
    width: 50px;
    height: 50px;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_butterfly2.png);
    position: absolute;
    -webkit-animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
    -moz-animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
    -ms-animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
    animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
}

.abcgame_abcpick_butterfly3 {
    width: 55px;
    height: 48px;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_butterfly3.png);
    position: absolute;
    z-index: 7;
    -webkit-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
}

.abcgame_abcpick_butterfly4 {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_butterfly4.png);
}

#abcgame_abcpick_butterfly1 {
    bottom: 28%;
}

#abcgame_abcpick_butterfly2 {
    bottom: 21%;
    left: 10%;
    -webkit-animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
}

#abcgame_abcpick_butterfly3 {
    bottom: 20%;
    left: 22%;
    -webkit-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
}

#abcgame_abcpick_butterfly4 {
    bottom: 29%;
    left: 17%;
    -webkit-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 1s steps(6) infinite;
}

#abcgame_abcpick_butterfly5 {
    top: 16%;
    left: 75%;
}

#abcgame_abcpick_butterfly6 {
    bottom: 16%;
    right: 16%;
    -webkit-animation: abcgame_butter2abcpick_playh 2s steps(8) infinite;
    -moz-animation: abcgame_butter2abcpick_playh 2s steps(8) infinite;
    -ms-animation: abcgame_butter2abcpick_playh 2s steps(8) infinite;
    animation: abcgame_butter2abcpick_playh 2s steps(8) infinite;
}

#abcgame_abcpick_butterfly7 {
    bottom: 19%;
    right: 4%;
    -webkit-animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 2s steps(6) infinite;
}

#abcgame_abcpick_butterfly8 {
    bottom: 28%;
    right: 2%;
    -webkit-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
}

#abcgame_abcpick_butterfly9 {
    bottom: 23%;
    right: 13%;
    -webkit-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    -moz-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    -ms-animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
    animation: abcgame_butterabcpick_playh 3s steps(6) infinite;
}

#abcgame_abcpick_butterfly10 {
    bottom: 51%;
    right: 7%;
    -webkit-animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
    -moz-animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
    -ms-animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
    animation: abcgame_butter2abcpick_playh 1s steps(8) infinite;
}

@keyframes abcgame_butter2abcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -400px;
    }
}

@-webkit-keyframes abcgame_butter2abcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -400px;
    }
}

@-ms-keyframes abcgame_butter2abcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -400px;
    }
}

@-moz-keyframes abcgame_butter2abcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -400px;
    }
}

@-webkit-keyframes abcgame_butterabcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -330px;
    }
}

@-ms-keyframes abcgame_butterabcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -330px;
    }
}

@keyframes abcgame_butterabcpick_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -330px;
    }
}

@-moz-keyframes abcgame_butterabcpick_playh {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -330px 0px;
    }
}

.abcgame_abcpick_modelogo {
    top: 14%;
}

.abcgame_abcpick_getreadyWrap {
    height: 50%;
    color: #0c3f6b;
    width: 100%;
    text-align: center;
    margin-top: 58%;
}

.abcgame_abcpick_getreadyParentWrap {
    width: 47%;
    float: left;
    font-size: 36px;
    position: relative;
}

.abcgame_abcpick_centerScoreboard {
    margin-left: 25%;
}

.abcgame_btnWoTimerbtn button {
    margin-right: 6%;
    width: 136px;
}

.btnWoTimertext {
    font-size: 38px;
    margin-top: 12px;
}

.btnWoTimer {
    position: relative;
    margin-top: 32%;
    left: 6%;
    color: #474E4F;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_hardComplete.png);
    width: 525px;
    height: 169px;
    background-size: 100% 100%;
    text-align: center;
    padding: 15px 30px;
}

.abcgame_btnWoTimerbtn {
    margin-top: 11px;
    margin-left: 27px;
}

.abcgame_abcpick_readytext {
    text-align: center;
}

.abcgame_abcpick_gamePlayInnerRow:first-child {
    padding: 25px 0px;
}

.abcgame_abcpick_wow,
.restartIncompleteAnim {
    position: absolute;
    top: 36%;
    left: 23%;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_level_complete.png);
    width: 311px;
    height: 159px;
    text-align: center;
    font-size: 26px;
    background-size: 100% 100%;
    padding-top: 30px;
}

/*Level Completed*/

.abcgame_abcpick_wow {
    animation: abcpick_animationFrames linear 1s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation: abcpick_animationFrames linear 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -moz-animation: abcpick_animationFrames linear 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 50% 50%;
    -o-animation: abcpick_animationFrames linear 1s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 50% 50%;
    -ms-animation: abcpick_animationFrames linear 1s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 50% 50%;
    animation-fill-mode: both;
}

@keyframes abcpick_animationFrames {
    0% {
        transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
    }

    10% {
        transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    20% {
        transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    30% {
        transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    40% {
        transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    50% {
        transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    60% {
        transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    70% {
        transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    80% {
        transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    90% {
        transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    100% {
        transform: rotate(0deg) scaleX(1.20) scaleY(1.20);
    }
}

@-moz-keyframes abcpick_animationFrames {
    0% {
        -moz-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
    }

    10% {
        -moz-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    20% {
        -moz-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    30% {
        -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    40% {
        -moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    50% {
        -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    60% {
        -moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    70% {
        -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    80% {
        -moz-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    90% {
        -moz-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    100% {
        -moz-transform: rotate(0deg) scaleX(1.20) scaleY(1.20);
    }
}

@-webkit-keyframes abcpick_animationFrames {
    0% {
        -webkit-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
    }

    10% {
        -webkit-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    20% {
        -webkit-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    30% {
        -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    40% {
        -webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    50% {
        -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    60% {
        -webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    70% {
        -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    80% {
        -webkit-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    90% {
        -webkit-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    100% {
        -webkit-transform: rotate(0deg) scaleX(1.20) scaleY(1.20);
    }
}

@-o-keyframes abcpick_animationFrames {
    0% {
        -o-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
    }

    10% {
        -o-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    20% {
        -o-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    30% {
        -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    40% {
        -o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    50% {
        -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    60% {
        -o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    70% {
        -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    80% {
        -o-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    90% {
        -o-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    100% {
        -o-transform: rotate(0deg) scaleX(1.20) scaleY(1.20);
    }
}

@-ms-keyframes abcpick_animationFrames {
    0% {
        -ms-transform: rotate(0deg) scaleX(1.00) scaleY(1.00);
    }

    10% {
        -ms-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    20% {
        -ms-transform: rotate(-3deg) scaleX(0.80) scaleY(0.80);
    }

    30% {
        -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    40% {
        -ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    50% {
        -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    60% {
        -ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    70% {
        -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    80% {
        -ms-transform: rotate(-3deg) scaleX(1.20) scaleY(1.20);
    }

    90% {
        -ms-transform: rotate(3deg) scaleX(1.20) scaleY(1.20);
    }

    100% {
        -ms-transform: rotate(0deg) scaleX(1.20) scaleY(1.20);
    }
}

.abcgame_abcpick_resultanim2 {
    -ms-animation: abcpick_bounce-in 1s ease 1 normal;
    -moz-animation: abcpick_bounce-in 1s ease 1 normal;
    -webkit-animation: abcpick_bounce-in 1s ease 1 normal;
    animation: abcpick_bounce-in 1s ease 1 normal;
}

.abcgame_abcpick_resultanim {
    -ms-animation: abcpick_bounce-in 1s ease 1 normal;
    -moz-animation: abcpick_bounce-in 1s ease 1 normal;
    -webkit-animation: abcpick_bounce-in 1s ease 1 normal;
    animation: abcpick_bounce-in 1s ease 1 normal;
    width: 100%;
    height: 100%;
}

@-ms-keyframes abcpick_bounce-in {
    0% {
        -ms-transform: scale(.3);
    }

    50% {
        -ms-transform: scale(1.0);
    }

    70% {
        -ms-transform: scale(0.9);
    }

    100% {
        -ms-transform: scale(1);
    }
}

@-webkit-keyframes abcpick_bounce-in {
    0% {
        -webkit-transform: scale(.3);
    }

    50% {
        -webkit-transform: scale(1.0);
    }

    70% {
        -webkit-transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes abcpick_bounce-in {
    0% {
        transform: scale(.3);
    }

    50% {
        transform: scale(1.0);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@-moz-keyframes abcpick_bounce-in {
    0% {
        -moz-transform: scale(.3);
    }

    50% {
        -moz-transform: scale(1.0);
    }

    70% {
        -moz-transform: scale(0.9);
    }

    100% {
        -moz-transform: scale(1);
    }
}

.abcgame_abcpick_getready,
.abcgame_instructionsPageContent {
    -moz-animation: abcpick_appear 1s ease 0s 1 normal;
    -ms-animation: abcpick_appear 1s ease 0s 1 normal;
    -webkit-animation: abcpick_appear 1s ease 0s 1 normal;
    animation: abcpick_appear 1s ease 0s 1 normal;
}

@-webkit-keyframes abcpick_appear {
    0% {
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@-ms-keyframes abcpick_appear {
    0% {
        -ms-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -ms-transform: scale3d(1, 1, 1);
    }
}

@-moz-keyframes abcpick_appear {
    0% {
        -moz-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -moz-transform: scale3d(1, 1, 1);
    }
}

@keyframes abcpick_appear {
    0% {
        transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        transform: scale3d(1, 1, 1);
    }
}

.monkeyWrap {
    width: 100%;
    height: 200px;
    position: absolute;
    z-index: 13;
    top: 0px;
}

.monkeytrees {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_background_level1.png);
    width: 600px;
    height: 65px;
    z-index: 4;
    position: absolute;
    display: none;
    background-size: 100% 100%;
}

.abcgame_abcpick_cloud {
    position: absolute;
    z-index: 1;
}

#abcgame_abcpick_cloud1 {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_cloud_big.png);
    background-size: 100% 100%;
    width: 297px;
    height: 85px;
    left: -50px;
    top: 150px;
}

#abcgame_abcpick_cloud2 {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_cloud_small.png);
    background-size: 100% 100%;
    width: 198px;
    height: 57px;
    left: 600px;
    top: 80px;
}

.endCongrats {
    position: absolute;
    font-size: 40px;
}

#endCongratswt {
    top: 12%;
    left: 37px;
}

#endCongratswot {
    top: 50px;
    left: 8.5%;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_congratsBoxw.png);
    background-size: 100% 100%;
    width: 494px;
    height: 158px;
    margin: 0 auto;
    color: #fff;
    padding: 0;
    font-size: 37px;
    text-align: center;
    padding-top: 9px;
}

.abcgame_abcpick_timeremain {
    font-size: 18px;
    color: #0c3f6b;
    text-align: center;
    position: absolute;
    top: 28%;
    width: 100%;
}

#nxtlvl1 {
    font-size: 56px;
}

#nxtlvl2 {
    font-size: 26px;
}

.monkeystatic {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_hanging_monkey.png);
    width: 19%;
    height: 91%;
    background-size: contain;
    position: absolute;
    top: 7px;
    z-index: 3;
    left: 15px;
    background-repeat: no-repeat;
}

.birdstatic {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_toucan.png);
    width: 20%;
    height: 20%;
    position: absolute;
    right: 1px;
    top: 33%;
    z-index: 3;
    background-size: 100% 100%;
}

.abcgame_playagain {
    margin-right: 8px;
}

.congratsScore {
    top: 15%;
}

.restartIncompleteAnim {
    -webkit-animation: restartIncompleteAnimAlert 1s linear;
    -moz-animation: restartIncompleteAnimAlert 1s linear;
    -ms-animation: restartIncompleteAnimAlert 1s linear;
    animation: restartIncompleteAnimAlert 1s linear;
    -ms-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

@-webkit-keyframes restartIncompleteAnimAlert {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    5% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    10% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }

    15% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    20% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }

    25% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    30% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }

    35% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    40% {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }

    45% {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    50% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes restartIncompleteAnimAlert {
    0% {
        -ms-transform: translateX(0);
        transform: translateX(0);
    }

    5% {
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    10% {
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }

    15% {
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    20% {
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }

    25% {
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    30% {
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }

    35% {
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    40% {
        -ms-transform: translateX(5px);
        transform: translateX(5px);
    }

    45% {
        -ms-transform: translateX(-5px);
        transform: translateX(-5px);
    }

    50% {
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.abcgame_abcpick_letterSoundWrap {
    text-align: center;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_Letter.png);
    background-size: 100% 100%;
    width: 54%;
    height: 100px;
    margin: 0 auto;
    padding-left: 6px;
    margin-top: 5%;
}

.letterSound {
    padding: 0px 0px;
    font-size: 30px;
    color: #2b3bc8;
}

.abcgame_abcpick_letterSoundLabel {
    color: #fff;
    font-size: 21px;
    padding-top: 2%;
    margin-bottom: 4%;
}

.abcgame_abcpick_clockbase {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_clock_base.png);
    background-repeat: no-repeat;
    width: 223px;
    height: 293px;
    background-size: 100% 100%;
    position: absolute;
    left: 17%;
    top: 44%;
    z-index: 1;
    transform: scale(.95, .95);
}

.abcgame_abcpick_eachlevelcongrats {
    position: absolute;
    top: 4%;
    left: 11%;
    background-size: 100% 100%;
    width: 466px;
    height: 211px;
    margin: 0 auto;
    padding-top: 19px;
}

.abcgame_abcpick_eachlevelcongratsmedal {
    width: 100%;
    height: 100%;
}

.abcgame_abcpick_eachlevelcongratsmedal img {
    width: 100%;
    height: 100%;
}

.abcgame_abcpick_scoreboxeachlevelcongrats {
    margin-top: 48%;
}

.abcgame_abcpick_starcount2 {
    padding-right: 3px;
}

/*----------------ipad both orient-----------------*/

@media screen and (min-width: 768px) and (max-width: 1024px) {

    .abcgame_abcpick_timer,
    .abcgame_abcpick_clockbase {
        transform: scale(.8, .8);
    }

    .abcgame_abcpick_timer {
        left: -12px;
        top: 16%;
    }

    .abcgame_abcpick_clockbase {
        left: -2%;
        bottom: 13%;
    }

    .abcgame_abcpick_leftMenuRow1 {
        padding: 20px 0 0 13px;
    }

    .abcgame_abcpick_ratingRow .abcgame_startRate {
        margin-bottom: 15px;
        margin: 8px 1px;
        width: 31px;
    }

    .letterSound {
        font-size: 23px;
    }

    .abcgame_abcpick_letterSoundLabel {
        font-size: 17px;
    }

    .abcgame_abcpick_letterSoundWrap {
        width: 68%;
        height: 76px;
        padding-left: 6px;
        margin-top: 16%;
    }

    .tooltip.abcgame_customClass {
        display: none !important;
    }
    /*   Fix SL3-10011: Footer in Android overlaping search 
    .content-pagination {
        z-index: 9999;
    } 
    */
}

/*----------------ipad landscape-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .abcgame_abc-container {
        /*height: 555px !important;*/
    }

    .tooltip.abcgame_customClass {
        display: none !important;
    }

    .abcgame_abcpickoptionalgamelist button,
    .abcgame_smoptionalgamelist button,
    .abcgame_bingooptionalgamelist button {
        top: 60% !important;
    }

    .abcgame_abc-container .abcgame_sidemenu {
        width: 25% !important;
    }

    .abcgame_abcpick_clockbase {
        left: -2%;
        top: 37%;
    }
}

/*----------------ipad portrait-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .abcgame_abc-container .abcgame_sidemenu {
        width: 18% !important;
    }

    .abcgame_abc-container {
        overflow: hidden;
    }

    /*.content-wrap .layout-fill {
		margin-top: 106px;
	}*/
    .abcgame_abcpick_ratingRow .abcgame_startRate {
        width: 31px !important;
    }

    .abcgame_abcpick_ratingRow {
        margin-left: 10px;
    }

    .tooltip.abcgame_customClass {
        display: none !important;
    }

    .abcgame_instructions {
        width: 93%;
        height: 142px;
    }

    .abcgame_abcpick_floatPlayArea,
    .abcgame_sidemenu {
        margin-top: 60px !important;
    }

    .abcgame_soundMatchContainerrow .abcgame_sidemenu {
        margin-top: 0px !important;
    }

    .abcgame_abcpickoptionalgamelist button,
    .abcgame_smoptionalgamelist button,
    .abcgame_bingooptionalgamelist button {
        top: 48% !important;
    }

    .abcgame_abcpickparent .abcgame_centerGamePart {
        height: 618px !important;
    }

    .abcgame_centerGamePart {
        transform: scale(.75, .75) !important;
    }

    .abcgame_abcpickparent .abcgame_sidemenu,
    .abcgame_abcpickparent .abcgame_abcpick_floatPlayArea {
        margin-top: 100px !important;
    }
}

/*----------------tablet 768*600-----------------*/

@media screen and (max-width: 768px) {
    /*
	.abcgame_abcpick_gametypeHead {
		font-size: 15px;
	}
	.abcgame_abcpick_floatPlayArea {
		width: 60% !important;
	}
	.abcgame_abcpickcontrols,
	.abcgame_abcpick_clockbase,
	.abcgame_helpHome {
		transform: scale(.75, .75);
	}
	.abcgame_abcpick_clockbase {
		transform: scale(.65, .65);
	}
	.abcgame_abcpick_timer {
		transform: scale(.65, .65);
		left: -23%;
		top: 7%;
	}
	.abcgame_abc-container {
		width: 768px !important;
	}
	.abcgame_abclevelContainer {
		transform: scale(.8, .8);
	}
	.abcgame_abc-container .abcgame_centerGamePart {
		width: 78%;
		height: 100%;
	}
	.abcgame_abc-container .abcgame_sidemenu {
		width: 20%;
	}
	.letterSound {
		font-size: 20px;
	}
	.abcgame_abcMatchWelcomePage {
		height: 100%;
		width: 100%;
		background-size: 100% 100%;
	}
	.secContainer {
		padding: 0 !important;
	}
	.abcgame_abcpick_logoGroup {
		width: 59%;
		left: 20%;
		top: 28%;
	}
	.abcgame_abcpick_logoGroup img {
		width: 100%;
		height: 100%;
	}
	.abcgame_abcpick_section2 {
		height: 458px;
	}
	.abcgame_abcpick_floatPlayArea {
		width: 59%;
		height: 76%;
		float: left;
		position: relative;
	}
	.abcgame_instructionTitle {
		width: 64%;
		height: 60px;
		font-size: 18px;
	}
	.abcgame_abcpick_card {
		width: 19%;
		height: 68px;
		margin: 0 4px 7px 0;
	}
	.abcgame_abcpick_card_front,
	.abcgame_abcpick_card_frontMask,
	.abcgame_abcpick_card_back1 {
		width: 100%;
		height: 100%;
	}
	.abcgame_abcpick_card_back1 {
		width: 87%;
		padding: 0;
		margin-left: 4px;
		height: 89%;
	}
	.abcgame_abcpick_matchHeadContent div {
		font-size: 12px;
		line-height: 8px;
	}
	.abcgame_abcMatchGameplayPage {
		padding-top: 0px;
		margin-top: 0px;
	}
	.abcgame_abcpick_matchHeadContent {
		margin-top: -3px;
	}
	.abcgame_abcpick_box_word {
		font-size: 35px;
	}
	.abcgame_abcpick_card_back {
		width: 90%;
		height: 92%;
		margin-left: 3px;
	}
	.abcgame_abcpick_gamePlayInnerRow {
		height: 50%;
		padding: 23px 0px;
	}
	.abcgame_abcpick_card_back img {
		width: 91%;
	}
	.abcgame_abcpick_letterSoundWrap {
		width: 79%;
	}
	.abcgame_abcpick_letterSoundLabel {
		font-size: 16px;
		padding-top: 2%;
		margin-bottom: 0%;
	}
	.abcgame_abcpick_letterSoundWrap {
		margin-top: 13%;
		width: 79%;
		height: 61px;
	}
	.abcgame_abcpick_ratingRow .abcgame_startRate {
		margin-bottom: 15px;
		margin: 8px 1px;
		width: 21px;
	}
	.abcgame_abcpick_leftMenuRow1 {
		padding: 10px 0 0 10px;
	}
	.abcgame_abcpick_clockbase {
		left: -19%;
		top: 20%;
	}
	#endCongratswot {
		top: 35px;
		left: 8.5%;
		width: 376px;
		height: 122px;
		font-size: 27px;
		padding-top: 9px;
	}
	.btnWoTimer {
		width: 88%;
		height: 137px;
	}
	.btnWoTimertext {
		font-size: 28px;
		margin-top: 12px;
	}
	.abcgame_btnWoTimerbtn button {
		margin-right: 6%;
		width: 130px;
	}
	.restartIncompleteAnim {
		width: 63%;
		font-size: 23px;
		height: 134px;
		left: 19%;
	}
	.abcgame_abcpick_gameResultTitle {
		height: 55px;
		top: -18px;
		left: -1%;
		font-size: 15px;
		padding: 15px 0 0px 7px;
	}
	.abcgame_abcpick_fright {
		font-size: 15px;
		width: 45%;
		padding-left: 12px;
	}
	.abcgame_abcpick_fleft {
		font-size: 15px;
		width: 46%;
		margin-left: 1px;
	}
	.abcgame_abcpick_gameResult {
		padding-left: 24px;
	}
	.abcgame_abcpick_gameResultWrapper {
		height: 195px;
	}
	.abcgame_scoreBtns {
		top: 171px;
		left: 3px;
	}
	.abcgame_nextlevel {
		width: 110px;
		height: 34px;
		font-size: 14px;
	}
	.abcgame_abcpick_eachlevelcongrats {
		top: 4%;
		left: 11%;
		width: 79%;
		height: 39%;
	}
	.abcgame_playagain {
		height: 33px;
		font-size: 15px;
		width: 108px;
		line-height: 10px;
		padding-bottom: 3px;
	}
	.abcgame_abcpick_logoGroup {
		height: 39%;
	}
	.abcgame_abcpick_go {
		margin-top: 15%;
		font-size: 200px;
	}
	.abcgame_abcpick_gotext {
		font-size: 200px;
		margin-top: 13%;
	}
	.tooltip.abcgame_customClass {
		display: none !important;
	}*/
}

.tooltip.abcgame_customClass .tooltip-inner {
    color: #fff;
    background-color: #423f3f;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.tooltip.abcgame_customClass {
    top: 70px !important;
}

.tooltip.abcgame_customClass .tooltip-arrow {
    /*display: none;*/
}

/*------iphone 6 mobile landscape 667px---------*/
/*

@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
	.tooltip.abcgame_customClass {
		display: none !important;
	}
	.abcgame_abc-container {
		margin-top: 0px;
	}
	.abcgame_abcrow,
	.abcgame_abccol {
		height: 100%;
	}
	.abcgame_abcpickparent {
		height: 397px;
		width: 979px;
	}
	.abcgame_abc-container .abcgame_centerGamePart,
	.abcgame_abcpick_floatPlayArea {
		width: 47%;
	}
	.abcgame_sidemenu {
		width: 26% !important;
	}
	.abcgame_abc-containerWrap {
		height: 100%;
	}
	.abcgame_abc-container .abcgame_centerGamePart {
		width: 47%;
		height: 100%;
	}
	.abcgame_abcpick_logoGroup {
		width: 72%;
		height: 100%;
	}
	.abcgame_helpHome img {
		width: 100%;
		height: 100%;
	}
	.abcgame_abcpick_card_back {
		width: 84%;
		height: 89%;
	}
	.abcgame_helpHome {
		width: 10%;
		height: 12%;
	}
	.monkeystatic {
		width: 19%;
		height: 81%;
	}
	.abcgame_abcpick_logoGroup {
		width: 100%;
		height: 49%;
	}
	.abcgame_abcpick_logoGroup img {
		width: 72%;
		height: 100%;
	}
	.abcgame_abclevelContainer {
		display: flex;
	}
	.abcgame_abcpick_matchHead {
		padding: 2px 57px;
	}
	.abcgame_abcpick_matchHeadContent div {
		font-size: 14px;
		line-height: 7px;
	}
	.abcgame_abcpick_imgbox {
		width: 100%;
		height: 49%;
	}
	.abcgame_abcpick_card {
		width: 20%;
		height: 100%;
	}
	.abcgame_abcpick_card_front,
	.abcgame_abcpick_card_frontMask {
		width: 100%;
		height: 100%;
	}
	.abcgame_abcpick_card_back1 {
		width: 85%;
		height: 84%;
		margin-left: 5px;
	}
	.abcgame_abcMatchGameplayPage {
		margin-top: 3px;
	}
	.abcgame_abcpick_section2 {
		height: 96%;
	}
	.abcgame_abcpick_gametypeHead {
		font-size: 16px;
		padding-bottom: 2px;
	}
	.abcgame_abcpick_card {
		margin: 0;
	}
	.abcgame_abcpick_gamePlayInner {
		padding-bottom: 8px;
	}
	.abcgame_abcpick_gamePlayInnerRow:first-child {
		padding: 18px 0px;
	}
	.abcgame_abcpick_letterSoundWrap {
		width: 53%;
		margin-top: 3%;
	}
	.abcgame_abcpick_ratingRow {
		margin-top: 5%;
	}
	.abcgame_abcpick_box_word {
		font-size: 34px;
		line-height: 71%;
	}
	.abcgame_abcpick_card_back img {
		width: 94%;
	}
	.abcgame_abcpick_go {
		margin-top: 15%;
		font-size: 170px;
	}
	.abcgame_abcpick_gotext {
		font-size: 170px;
		margin-top: 15%;
	}
	.abcgame_abcpick_leftMenuRow1 .abcgame_abcpickcontrols {
		width: 33%;
		height: 73%;
	}
	.abcgame_abcpickcontrols img {
		width: 50%;
	}
	.restartIncompleteAnim {
		position: absolute;
		top: 36%;
		left: 16%;
	}
	.btnWoTimer {
		width: 88%;
		height: 31%;
	}
	.abcgame_btnWoTimerbtn {
		margin-top: 1px;
		margin-left: 22px;
	}
	.abcgame_btnWoTimerbtn button {
		margin-right: 6%;
		width: 41%;
		height: 38px;
		font-size: 16px;
		padding: 0;
		background-position-y: 1px;
	}
	.btnWoTimertext {
		font-size: 28px;
		margin-top: 4px;
		margin-bottom: 5px;
	}
	.abcgame_abcpick_timer,
	.abcgame_abcpick_clockbase {
		transform: scale(.6, 0.6);
	}
	.abcgame_abcpick_timer {
		top: 8%;
		left: 7%;
	}
	.abcgame_abcpick_clockbase {
		left: 10%;
		bottom: 0%;
	}
	.abcgame_abcpick_countdown {
		font-size: 28px;
	}
	.abcgame_abcpick_gameResultTitle {
		width: 100%;
		height: 55px;
		top: -18px;
		left: -1%;
		font-size: 16px;
		padding: 15px 45px;
		padding-left: 55px;
	}
	.abcgame_abcpick_fleft {
		font-size: 16px;
		width: 49%;
		margin-left: -8px;
	}
	.abcgame_abcpick_fright {
		font-size: 16px;
		width: 45%;
		padding-left: 17px;
	}
	.abcgame_abcpick_gameResultWrapper {
		width: 50%;
		height: 43%;
		margin-top: 29%;
		margin-left: 3%;
	}
	.abcgame_scoreBtns {
		top: 89%;
	}
	.abcgame_scoreBtns button {
		width: 50%;
		height: 38px;
	}
	.abcgame_abcpick_eachlevelcongrats {
		top: 1%;
		left: 16%;
		width: 67%;
		height: 39%;
		padding-top: 19px;
	}
	.abcgame_abcpick_scoreboxeachlevelcongrats {
		margin-top: 41% !important;
		margin-left: 25% !important;
	}
	.abcgame_instructions {
		width: 93%;
		height: 30%;
		padding: 4%;
	}
	.abcgame_instructionOk {
		width: 7%;
		height: 29%;
	}
	.abcgame_abcpick_alertSelectLevelOk {
		width: 100%;
		height: 100%;
	}
	.abcgame_instructionTitle {
		width: 56%;
		height: 39%;
		font-size: 17px;
		line-height: 37px;
		bottom: 81%;
		left: 20%;
	}
	.abcgame_abcpick_instructionList div {
		font-size: 17px;
	}
	.tooltip.abcgame_customClass {
		display: none !important;
	}
	.abcgame_abcpick_instructionList {
		margin-top: 4%;
	}
	.abcgame_playagain {
		margin-right: 8px;
		width: 47% !important;
	}
	.abcgame_nextlevel {
		width: 47% !important;
	}
	.abcgame_btnWoTimerbtn button {
		width: 41% !important;
	}
}
*/
/*------iphone 6 mobile landscape 667px ends---------*/
/*------iphone 6 plus mobile landscape 736px---------*/
/*@media only screen and (min-device-width: 464px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
	.abcgame_abcpickparent {
		height: 397px;
		width: 979px;
	}
	.abcgame_abc-container .abcgame_centerGamePart,
	.abcgame_abcpick_floatPlayArea {
		width: 47%;
	}
	.abcgame_sidemenu {
		width: 26% !important;
	}
	.abcgame_abc-containerWrap {
		height: 100%;
	}
	.abcgame_abc-container .abcgame_centerGamePart {
		width: 47%;
		height: 100%;
	}
	.tooltip.abcgame_customClass {
		display: none !important;
	}
}*/
/*------iphone 6 plus mobile landscape 736px ends---------*/
/*----laptop L1 starts-----*/

@media screen and (max-width:1366px) and (min-width:768px) {

    .abcgame_abcrow,
    .abcgame_abccol {
        height: 100% !important;
    }

    .abcgame_abc-container .abcgame_sidemenu {
        width: 24%;
    }

    .abcgame_abcpick_floatPlayArea,
    .abcgame_abc-container .abcgame_centerGamePart {
        width: 622px;
    }

    .abcgame_abcpick_card_front,
    .abcgame_abcpick_card,
    .abcgame_abcpick_card_back1 {
        height: 100%;
    }

    .abcgame_abcpick_imgbox {
        height: 46%;
    }

    .abcgame_abcpick_card_back {
        height: 90%;
    }

    .abcgame_abcpick_emptybox {
        height: 84%;
    }

    .abcgame_abcpick_card_back div {
        width: 100%;
        height: 100%;
    }

    .abcgame_abcpick_imgbox2 {
        height: 41%;
    }

    .abcgame_abcpick_gametypeHead {
        font-size: 15px;
    }

    .abcgame_abcpick_matchHeadContent div {
        line-height: 11px;
        font-size: 13px;
    }
}

/*----laptop L1 ends-----*/
/*-------menu screen starts------*/

.abcgame_abcpickselectmenuwrap {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
}

.abcgame_abcpickselectmenuoverlay {
    opacity: .9;
    background: #EFFBB9;
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid #4B5823;
    border-radius: 10px;
}

.abcgame_abcpicklogo {
    width: 24%;
    height: 100%;
    margin: 0 auto;
    margin-top: 5%;
}

.abcgame_abcpicklogo img {
    width: 100%;
    height: 100%;
}

.abcgame_abcpickselectmenulogowrap {
    width: 100%;
    height: 19%;
    margin-bottom: 6%;
}

.abcgame_abcpickselectmenusequence {
    width: 24%;
    float: left;
    padding: 10px;
    text-align: center;
    font-size: 26px;
    cursor: pointer;
    margin-right: 5%;
    margin-left: 4%;
}

.abcgame_abcpickselectmenuoverallwrap {
    position: absolute;
    width: 100%;
    height: 100%;
}

.abcgame_abcpickselectmenusequence:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_easy_button_hover.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: 0px;
}

.abcgame_abcpickselectmenusequencewrap {
    border: 1px solid #4B5823;
    width: 94%;
    height: 67%;
    margin-left: 3%;
    border-radius: 8px;
    padding-top: 4%;
}

/*-------menu screen ends------*/
/*-------recommended screen starts------*/

.abcgame_smrecommendedgameplay,
.abcgame_abcpickrecommendedbadge {
    height: 12% !important;
}

.abcgame_abcpickrecommendedgamewrap {
    /* position: absolute; */
    height: 100%;
    width: 100%;
    background: #DDFFFF;
    z-index: 50;
    top: 0;
}

.abcgame_abcpickrecommendedgame {
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    position: relative;
    box-shadow: #ccc 1px 2px 8px 2px;
    margin-bottom: 1%;
}

.abcgame_abcpickrecommendedgame img {
    width: 100%;
    margin-top: 0;
    object-fit: cover;
}

.abcgame_abcpickoptionaltitle {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/gameoptional_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 8%;
    width: 41%;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    line-height: 29px;
    color: #fff;
    /* background-position: center;
                position: relative; */
}

/* .abcgame_abcpickoptionaltitle .optionalGameText{
				position:absolute;
				top:41%;
				left:50%;
				transform: translate(-50%,-50%);
				-webkit-transform: translate(-50%,-50%);
				-o-transform: translate(-50%,-50%);
				-ms-transform: translate(-50%,-50%);
				-moz-transform: translate(-50%,-50%);
			} */
/* Optional Games for all games were overlapping with footer when we reduce window height */
.abcgame_abcpickoptionalgamewrap {
    width: 100%;
    height: 24%;
}

.abcgame_abcpickoptionalgametable {
    display: flex;
    width: 100%;
    height: 100%;
}

.abcgame_abcpickoptionalgamerow {
    display: table-row;
}

.abcgame_abcpickoptionalgamelist {
    flex-basis: 100%;
    position: relative;
}

.abcgame_abcpickoptionalgamelist1 {
    flex-basis: 35% !important;
    margin: 0 auto;
}

.abcgame_abcpickoptionalgamelist2 {
    flex-basis: 40% !important;
    margin: 0 auto;
}

.recommendedbadge {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/gamerecommended_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1%;
    width: 33%;
    height: 19%;
    right: 2%;
}

.abcgame_abcpickrecommendedgame button,
.abcgame_abcpickoptionalgamelist button {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/readingoptionalgameplay_button_Text.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.abcgame_abcpickrecommendedgame button {
    width: 26%;
    height: 18%;
    position: absolute;
    bottom: 4%;
    border: navajowhite;
    color: #fff;
    font-size: 22px;
    background-position-y: 12px;
    left: 38%;
}

.abcgame_abcpickoptionalgamelist button {
    width: 49%;
    height: 26%;
    position: absolute;
    border: none;
    top: 68%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background-position-y: 6px;
    left: 25%;
}

.abcgame_optgamethumbnail {
    height: 100%;
    width: 96%;
    margin-left: 2%;
    border: 2px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: #ccc 1px 2px 8px 2px;
}

.abcgame_optgamethumbnail img {
    width: 100%;
    height: 100%;
}

.abcgame_abcpickrecommendedgamefull {
    height: 100%;
}

.abcgame_abcpickrecommendedgameplay {
    height: 12% !important;
}

.abcgame_display {
    display: none;
}

/*------all mobile starts---------*/

@media only screen and (max-width: 767px) {
    .abcgame_abcpickoptionalgamelist1 {
        flex-basis: 30% !important;
    }
    /*   Fix SL3-10011: Footer in Android overlaping search 
    .content-pagination {
        z-index: 9999;
    }
    */
    .tooltip.abcgame_customClass {
        display: none !important;
    }

    .abcgame_abc-container {
        margin-top: 0px;
    }

    .abcgame_abcrow,
    .abcgame_abccol {
        height: 100%;
    }

    .abcgame_abccol {}

    .abcgame_sidemenu {
        width: 25% !important;
    }

    .abcgame_abc-container .abcgame_centerGamePart,
    .abcgame_abcpick_floatPlayArea {
        width: 50% !important;
        height: 100% !important;
    }

    .abcgame_abcpick_floatPlayArea {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .landscape #abcMatchMainBody .abcgame_abc-container .abcgame_abcpick_floatPlayArea {
        width: 100%;
    }

    .abcgame_abc-containerWrap {
        height: 100%;
    }

    .abcgame_abc-container .abcgame_centerGamePart {
        width: 100%;
        height: 100%;
    }

    .abcgame_abcpick_logoGroup {
        width: 72%;
        height: 100%;
    }

    .abcgame_helpHome img {
        width: 100%;
        height: 100%;
    }

    .abcgame_abcpick_card_back {
        width: 84%;
        height: 89%;
        border-radius: 6px;
    }

    .abcgame_helpHome {
        width: 10%;
        height: 12%;
    }

    .abcgame_abcpick_logoGroup {
        width: 100%;
        height: 49%;
    }

    .abcgame_abcpick_logoGroup img {
        width: 72%;
        height: 100%;
    }

    .abcgame_abclevelContainer {
        display: flex;
    }

    .abcgame_abcpick_matchHead {
        padding: 2px 57px;
    }

    .abcgame_abcpick_matchHeadContent div {
        font-size: 14px;
        line-height: 7px;
    }

    .abcgame_abcpick_imgbox {
        width: 100%;
        height: 49%;
    }

    .abcgame_abcpick_card {
        width: 20%;
        height: 100%;
    }

    .abcgame_abcpick_card_front,
    .abcgame_abcpick_card_frontMask {
        width: 100%;
        height: 100%;
    }

    .abcgame_abcpick_card_back1 {
        width: 85%;
        height: 84%;
        margin-left: 5px;
    }

    .abcgame_abcMatchGameplayPage {
        margin-top: 0px;
    }

    .abcgame_abcpick_section2 {
        height: 96%;
    }

    .abcgame_abcpick_gametypeHead {
        font-size: 10px;
        padding-bottom: 2px;
    }

    .abcgame_abcpick_card {
        margin: 0;
    }

    .abcgame_abcpick_gamePlayInner {
        padding-bottom: 8px;
    }

    .abcgame_abcpick_gamePlayInnerRow:first-child {
        padding: 18px 0px;
    }

    .abcgame_abcpick_letterSoundWrap {
        width: 53%;
        margin-top: 3%;
    }

    .abcgame_abcpick_ratingRow {
        margin-top: 5%;
    }

    .abcgame_abcpick_box_word {
        font-size: 23px;
        line-height: 95%;
    }

    .abcgame_abcpick_card_back img {
        width: 94%;
    }

    .abcgame_abcpick_go {
        margin-top: 15%;
        font-size: 170px;
    }

    .abcgame_abcpick_leftMenuRow1 .abcgame_abcpickcontrols {
        width: 33%;
        height: 73%;
    }

    .abcgame_abcpickcontrols img {
        width: 50%;
    }

    .restartIncompleteAnim {
        position: absolute;
        top: 36%;
        left: 16%;
    }

    .btnWoTimer {
        width: 88%;
        height: 31%;
    }

    .abcgame_btnWoTimerbtn {
        margin-top: 1px;
        margin-left: 22px;
    }

    .abcgame_btnWoTimerbtn button {
        margin-right: 6%;
        width: 41%;
        height: 38px;
        font-size: 16px;
        padding: 0;
        background-position-y: 1px;
    }

    .btnWoTimertext {
        font-size: 28px;
        margin-top: 4px;
        margin-bottom: 5px;
    }

    .abcgame_abcpick_timer,
    .abcgame_abcpick_clockbase {
        transform: scale(.6, 0.6);
    }

    .abcgame_abcpick_timer {
        top: 8%;
        left: 7%;
    }

    .abcgame_abcpick_clockbase {
        left: 10%;
        top: 29%;
    }

    .abcgame_abcpick_countdown {
        font-size: 28px;
    }

    .abcgame_abcpick_gameResultTitle {
        width: 100%;
        height: 55px;
        top: -18px;
        left: -1%;
        font-size: 16px;
        padding: 15px 45px;
        padding-left: 55px;
    }

    .abcgame_abcpick_fleft {
        font-size: 16px;
        width: 49%;
        margin-left: -8px;
    }

    .abcgame_abcpick_fright {
        font-size: 16px;
        width: 45%;
        padding-left: 17px;
    }

    .abcgame_abcpick_gameResultWrapper {
        width: 50%;
        height: 43%;
        margin-top: 29%;
        margin-left: 3%;
    }

    .abcgame_scoreBtns {
        top: 89%;
    }

    .abcgame_scoreBtns button {
        width: 50%;
        height: 11%;
    }

    .abcgame_abcpick_eachlevelcongrats {
        top: 1%;
        left: 16%;
        width: 67%;
        height: 39%;
        padding-top: 19px;
    }

    .abcgame_abcpick_scoreboxeachlevelcongrats {
        margin-top: 44% !important;
        margin-left: 25% !important;
    }

    .abcgame_abcpick_alertSelectLevelOk {
        width: 100%;
        height: 100%;
    }

    .tooltip.abcgame_customClass {
        display: none !important;
    }

    .abcgame_abcpick_instructionList {
        margin-top: 4%;
    }

    .abcgame_playagain {
        margin-right: 8px;
        width: 43% !important;
        height: 22px !important;
    }

    .abcgame_nextlevel {
        width: 47% !important;
    }

    .abcgame_btnWoTimerbtn button {
        width: 41% !important;
    }

    .abcgame_abcpickrecommendedgame button {
        width: 26%;
        bottom: 4%;
        color: #fff;
        font-size: 14px;
        background-position-y: 6px;
    }

    .abcgame_abcpickoptionaltitle {
        height: 8%;
        width: 41%;
        font-size: 12px;
        line-height: 23px;
    }

    .abcgame_abcrow {
        justify-content: center !important;
    }

    .abcgame_abclevelContainer .abcgame_modebtn {
        font-size: 10px;
        height: 40px;
        width: 88px;
        height: 32px;
    }

    .abcgame_abclevelContainer .abcgame_abcpick_levelbtn {
        width: 51px;
        font-size: 10px;
        height: 23px;
    }

    .abcgame_abcpick_matchHeadContent,
    .abcgame_abcpick_matchHeadContent div,
    .abcgame_nextlevel,
    .abcgame_playagain {
        font-size: 8px;
    }

    .abcgame_abcpick_matchHead {
        padding: 2px 24px;
    }

    .abcgame_abcpick_getready {
        font-size: 30px;
    }

    .abcgame_btnWoTimerbtn button {
        font-size: 11px;
    }

    .abcgame_abcpick_gameResult {
        padding-top: 38px;
        padding-left: 5px;
    }

    .abcgame_readyclass {
        font-size: 46px;
    }

    .restartIncompleteAnim {
        margin: 0 auto;
    }

    .abcgame_abcpick_alertSelectLevelOverlaysorry {
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
    }

    .abcgame_abcpick_gameResultTitle {
        font-size: 8px;
        width: 70%;
        padding: 0;
        padding-top: 7%;
        left: 14%;
        height: 25%;
        top: -9px;
    }

    .abcgame_abcpickoptionalgamelist button {
        font-size: 9px;
        width: 59%;
        top: 50%;
    }

    .abcgame_abcpickparent.ng-scope {
        width: 100%;
        height: 100%;
    }

    .abcgame_abcrow,
    .abcgame_abccol {
        height: 100%;
    }

    .monkeyWrap {
        width: 100%;
        /* height: 16%; */
    }

    .monkeytrees {
        width: 100%;
        height: 100%;
    }

    .monkeystatic {
        width: 18%;
        height: 170%;
        top: 64%;
        left: 3%;
    }

    .abcgame_abcpick_cloud,
    .abcpickbutterflyparent {
        transform: none;
    }

    .abcgame_abcpick_modedivcss {
        width: 30%;
    }

    .abcgame_abclevelContainer .abcgame_abcpick_levelbtn {
        width: 96%;
    }

    #abcgame_abcpick_cloud1 {
        top: 80px;
    }

    #abcgame_abcpick_cloud2 {
        top: 50px;
    }

    .abcgame_abcpick_rightmenuWrapper,
    .abcgame_abcpick_logoGroupLeftpanel,
    .abcgame_abcpick_logoGroupLeftpanelWrap {
        height: 100%;
    }

    .abcgame_abcpick_rightmenuWrapper {
        height: 30%;
    }

    .abcgame_abcpick_logoGroupLeftpanel {
        width: 76%;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .abcgame_abcpick_letterSoundWrap {
        width: 46%;
        margin-top: 3%;
        text-indent: -4%;
        height: 50%;
    }

    .abcgame_abcpick_letterSoundLabel {
        color: #fff;
        font-size: 10px;
        padding-top: 1%;
        margin-bottom: 0%;
    }

    .letterSound {
        font-size: 11px;
    }

    .abcgame_abcpick_ratingRow {
        width: 100%;
        height: 35%;
    }

    .abcgame_abcpick_ratingRowcontent {
        width: 100%;
        height: 100%;
    }

    .abcgame_abcpick_ratingRow .abcgame_startRate {
        margin: 1%;
        width: 12%;
        height: 80%;
    }

    .abcgame_startRate img {
        width: 100%;
        height: 100%;
    }

    .abcgame_abcpick_timer {
        top: -8%;
        transform: scale(.4, 0.4);
        left: -20%;
    }

    .abcgame_abcpick_clockbase {
        top: 11%;
        transform: scale(.4, 0.4);
        left: -16%;
    }

    .abcgame_abcpick_gamePlayInner {
        padding: 0px 15px;
    }

    .abcgame_abcpick_gamePlayInnerRow:first-child {
        padding: 8% 0px;
    }

    .abcgame_abcpick_gamePlayInnerRow {
        height: 50%;
        padding: 8% 0px;
    }

    .abcgame_abcpick_matchHeadContent {
        font-size: 7px;
    }

    .restartIncompleteAnim {
        width: 60%;
        height: 30%;
        font-size: 11px;
        padding-top: 8%;
        left: 0%;
    }

    .abcgame_abcpick_matchHead {
        top: 3%;
    }

    .abcgame_abcMatchGameplayPage {
        padding-top: 1%;
    }

    .abcgame_abcpick_gameResult {
        padding-left: 12%;
    }

    .abcgame_abcpick_gameResult div {
        font-size: 8px;
    }

    .abcpick_ggo {
        font-size: 21px !important;
    }

    .abcgame_readycount {
        margin-top: 2%;
        font-size: 46px
    }

    .abcgame_nextlevel {
        height: 22px !important;
    }

    .abcgame_abcpick_gotext {
        font-size: 110px;
    }

    .abcgame_abcpick_box_word {
        font-size: 13px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .abcgame_abcpick_modeContainer {
        margin-left: 6%;
    }

    .abcgame_instructionsPageContent {
        height: 100%;
    }

    .abcgame_instructionTitle {
        width: 52%;
        height: 16%;
        font-size: 10px;
        line-height: 30px;
        top: -8%;
        left: 21%;
        padding-left: 1%;
    }

    .abcgame_instructions {
        width: 100%;
        height: 28%;
        padding: 4%;
    }

    .abcgame_instructionOk {
        width: 7%;
        height: 6%;
        top: -3%;
        right: -3%;
    }

    .abcgameabcpick .abcgame_abccol_portrait.abcgame_abcpick_floatPlayArea_portrait.reducesize .txt_align_center.abcgame_instructionOk {
        height: 9%;
        top: -4%;
        right: -3%;
    }

    .abcgame_abcpick_instructionList div {
        font-size: 10px;
        padding-top: 3%;
    }
}

@media only screen and (min-device-width: 768px) {

    .abcgame_abcpick_LL,
    .abcgame_abcpick_RL,
    .abcgame_abcpick_PL {
        display: block;
    }

    .abcgame_abcpick_LP,
    .abcgame_abcpick_RP,
    .abcgame_abcpick_PP {
        display: none;
    }
}

/*mobile landscape starts*/
@media only screen and (max-width: 767px) and (orientation: landscape) {

    .abcgame_abcpick_LP,
    .abcgame_abcpick_RP,
    .abcgame_abcpick_PP {
        display: none !important;
    }

    .abcgame_abcpick_LL,
    .abcgame_abcpick_RL,
    .abcgame_abcpick_PL {
        display: block !important;
    }
}

/*mobile portrait starts*/
@media only screen and (max-width: 767px),
only screen and (max-width: 767px) and (orientation: portrait) {

    .abcgame_abcpick_LP,
    .abcgame_abcpick_RP,
    .abcgame_abcpick_PP {
        display: block;
    }

    .abcgame_sm_LL,
    .abcgame_sm_RL,
    .abcgame_sm_PL {
        display: none;
    }

    .abcgame_abcpick_LL,
    .abcgame_abcpick_RL,
    .abcgame_abcpick_PL {
        display: none;
    }

    .abcgame_abcpick_logoGroupLeftpanelWrap,
    .abcgame_abcpick_logoGroupLeftpanel {
        height: 100%;
    }

    .abcgame_centerGamePart_portrait,
    .abcgame_abcpick_floatPlayArea_portrait {
        width: 66%;
        margin: 0 auto;
        position: relative;
    }

    .abcgame_top {
        padding: 0 15%;
    }

    .abcgame_abcpick_rightmenuWrapperlogo {
        width: 25%;
        float: left;
    }

    .abcgame_abcpick_letterSoundWrap.ng-scope {
        width: 20%;
    }

    .abcgame_abcpick_rightmenuWrapper {
        overflow: auto;
        padding: 1% 0;
        padding-bottom: 0;
    }

    .abcgame_abcpick_logoGroupLeftpanel {
        text-align: center;
        padding: 0;
        margin: 0;
    }

    .abcgame_abcpick_logoGroupLeftpanel img {
        width: 100%;
        height: 88%;
        padding-top: 12%;
    }

    .abcgame_abcpick_letterSoundWrap {
        width: 20%;
        float: left;
        margin-left: 5%;
        height: 33px;
    }

    .abcgame_abcpick_ratingRow .abcgame_startRate {
        margin: 1%;
        width: 14%;
    }

    .abcgame_abcpick_ratingRow {
        width: 33%;
        float: left;
        margin: 0;
    }

    .abcgame_abcpick_section2 {
        height: 100%;
    }

    .abcgame_abcpick_leftmenuWrapper {
        width: 100%;
        overflow: auto;
        position: relative;
    }

    .abcgame_abcpick_portrait_controls {
        width: 30%;
        float: left;
        text-align: center
    }

    .abcgame_abcpick_portrait_timer {
        width: 30%;
        float: left;
        font-size: 10px;
        text-align: center;
    }

    .abcgame_abcpickcontrols {
        width: 64%;
        margin: 0 auto;
    }

    .abcgame_abcpick_countdown_portrait {
        background: #D54327;
        color: #fff;
        width: 37%;
        padding: 2% 0;
        font-size: 12px;
        margin: 0 auto;
        border-radius: 8px;
        margin-bottom: 3%;
    }

    .abcgame_abcpick_mask {
        background-color: #868686;
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: .5;
        z-index: 9;
    }

    .abcgame_abcpick_menubottom {
        position: relative;
        z-index: 11;
        color: #fff;
        padding: 1% 12% 0 14%;
    }

    .abcgame_leftMenuLevelWindow_portrait {
        color: YELLOW;
        font-size: 12px;
    }

    .abcgame_abcpick_matchHeadContent {
        padding-top: 5%;
    }

    .abcgame_abcpick_helpportraitwrap {
        width: 7%;
        float: left;
        position: absolute;
        right: 17%;
        top: 2%;
    }

    .abcgame_abcpick_helpportrait,
    .abcgame_abcpick_helpportrait img {
        width: 100%;
        height: 100%;
    }

    .abcgame_instructionTitle {
        width: 52%;
        height: 11%;
        font-size: 10px;
        line-height: 23px;
        top: -11%;
        left: 21%;
        padding-left: 1%;
    }

    .abcgame_abcpick_instructionList div {
        font-size: 8px;
        padding-top: 5%;
    }

    .abcgame_instructionOk {
        width: 10%;
    }

    .abcgame_helpHome {
        width: 48px;
        height: 53px;
        right: 7%;
    }

    .landscape .abcgame_helpHome {
        right: 5%;
    }

    .abcgame_abc-container {
        margin-top: 0px;
        height: 100% !important;
        display: block;
    }

    .abcgame_abcrow_portrait,
    .abcgame_abcpick_section3_portrait {
        height: 100%;
    }
}

/*mobile portrait ends*/
/*------all mobile ends---------*/
/** abc game pick css style ends **/
/** abc game bingo starts **/

.abcgame_bingorightWrap {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.abcgame_bingoContainer input[type="button"],
.abcgame_bingoContainer button {
    background-color: transparent;
}


/*.abcgame_bingoContainer .secContainer {
	padding: 0 !important;
}*/

.abcgame_bingoContainer input {
    background: none;
}



.abcgame_bingoContainer * {
    outline: transparent;
}

.abcgame_bingoContainer {
    width: 100%;
    height: 100% !important;
    margin: 0 auto;
    /* background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_gamebg.png); */
    background-size: 100% 100%;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: none !important;
    background: #EECDA3 !important;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #C8EFFC 50%, #FCFDBF) !important;
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #C8EFFC 50%, #FCFDBF) !important;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.abcgame_bingoContainerrow {
    /* width: 1366px; */
    height: 600px;
    padding: 0;
    /* margin: 0 auto; */
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.abcgame_bingoAudio {
    display: none;
}

.abcgame_bingoplayarea {
    border: 9px solid #075267;
    background: #075267;
}

.abcgame_bingomaincontainer {
    width: 600px;
    background-size: 100% 100%;
}

.abcgame_bingosidemenu {
    /* width: 28%; */
}

.abcgame_bingomaincontainer,
.abcgame_bingosidemenu {
    float: left;
    position: relative;
    color: #fff;
    /* margin: auto; */
}

.abcgame_bingoinstruction_overlay {
    width: 100%;
    height: 100%;
}

.abcgame_bingoinstruction_popup {
    position: relative;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* .abcgame_bingomainContainerOffset {
	margin-left: 0;
} */

/*css for bingo game*/

.abcgamebingo.ng-scope,
div#abcBingoMainDiv {
    height: 100%;
}

.abcgame_bingocountdown,
.abcgame_bingostar {
    font-size: 50px;
}

.abcgame_bingostar {
    font-size: 50px;
    display: inline-block;
}

.abcgame_bingooverlay0 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0ms;
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.abcgame_bingooverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.abcgame_7);
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.abcgame_bingooverlayblock {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    position: absolute;
}

.abcgame_bingoshowgetready {
    position: absolute;
    color: #fff;
    top: 44%;
    font-size: 40px;
    left: 49%;
}

.abcgame_bingoflipcard {
    width: calc(33.33% - 12px);
    height: calc(33.33% - 12px);
    text-align: center;
    font-size: 66px;
    display: inline-block;
    cursor: pointer !important;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 10px;
    margin-right: 1%;
    margin-top: 5px;
    overflow: hidden;
}

.abcgame_bingoflipcard div {
    border-radius: 10px;
}

.abcgame_bingoflippedfront {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: 0.3s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.3s;
    transform-style: preserve-3d;
    animation: abcgame_bingofronthide 0.1s;
    animation-fill-mode: both;
}

@keyframes abcgame_bingofronthide {
    90% {
        opacity: .5;
    }

    100% {
        opacity: 0;
    }
}

.abcgame_bingoback {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
}

.abcgame_bingoflippedback {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: 0.3s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.3s;
    transform-style: preserve-3d;
    animation: abcgame_bingobackshow 0.3s;
    animation-fill-mode: both;
}

@keyframes abcgame_bingobackshow {
    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

.abcgame_bingofront {
    position: absolute;
    z-index: 2;
    background: #fff;
    width: 100%;
    left: 0;
    height: 100%;
    background: #C9EFFC;
    color: #000;
    
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.abcgame_bingoback img {
    width: 100%;
    height: 100%;
}

.abcgame_bingomatrix {
    border: none;
    background-size: 100% 100%;
    width: 65%;
    height: 100%;
    color: #fff;
    font-size: 26px;
    
    text-indent: 32px;
    background-position-y: 4px;
    background-repeat: no-repeat;
}

.abcgame_bingologo {
    width: 81%;
    height: 69%;
    margin: 0 auto;
    margin-top: 9%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}




.abcgame_bingoi {
    width: 10%;
    height: 10%;
    position: absolute;
    top: 2%;
    right: 2%;
    cursor: pointer !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.abcgame_bingocasetext {
    width: 79%;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 10%;
    text-align: center;
    margin-top: 35%;
    font-size: 37px;
    color: #fff;
    -webkit-animation: abcgame_bounce-in .5s ease 0s 1 normal;
    animation: abcgame_bounce-in .5s ease 0s 1 normal;
}

.abcgame_bingotypewrap {
    margin-top: 3%;
    height: 13%;
}

.abcgame_bingocasebuttons {
    height: 100%;
}

.abcgame_bingocasewrap {
    margin-top: 4%;
    -webkit-animation: abcgame_bounce-in .5s ease 0s 1 normal;
    animation: abcgame_bounce-in .5s ease 0s 1 normal;
}

.abcgame_bingocasebuttons:first-child {
    text-align: right;
}

.abcgame_bingocase {
    width: 65%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 26px;
    
}

.abcgame_bingotype {
    width: 88%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 23px;
    
    background-position-y: 5px;
}

@-webkit-keyframes bounce-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes abcgame_bounce-in {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.0);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.abcgame_lowercaseSelected {
    text-transform: lowercase;
}

.abcgame_uppercaseSelected {
    text-transform: uppercase;
}

.abcgame_bingowrap {
    width: 100%;
    height: 100%;
}

.abcgame_bingo_instruction_content {
    width: 85%;
    height: 46%;
    position: relative;
    background-repeat: no-repeat;
    top: 17%;
    padding-top: 11%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 10%;
    text-align: center;
    background-size: 100% 100%;
    margin: 0 auto;
}

.abcgame_bingo_instruction_header {
    color: #fff;
    font-size: 27px;
    
    position: absolute;
    top: -19px;
    background-repeat: no-repeat;
    width: 45%;
    height: 20%;
    background-size: 100% 100%;
    left: 27%;
    line-height: 50px;
}

.abcgame_bingo_instruction_step {
    font-size: 26px;
    color: #000;
    height: 52%;
    padding-left: 9%;
    padding-right: 7%;
    padding-bottom: 6%;
    cursor: default;
    padding-top: 4%;
    text-align: center;
}

.abcgame_bingo_closeinstruction {
    width: 11%;
    height: 20%;
    background-repeat: no-repeat !important;
    font-size: 36px;
    border: none;
    background-size: 100% 100%;
    position: absolute;
    top: -6%;
    right: -3%;
}

.abcgame_bingo_instruction_content {
    -moz-animation: abcgame_bingoappear 1s ease 0s 1 normal;
    -ms-animation: abcgame_bingoappear 1s ease 0s 1 normal;
    -webkit-animation: abcgame_bingoappear 1s ease 0s 1 normal;
    animation: abcgame_bingoappear 1s ease 0s 1 normal;
}

@-webkit-keyframes bingoappear {
    0% {
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@-ms-keyframes bingoappear {
    0% {
        -ms-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -ms-transform: scale3d(1, 1, 1);
    }
}

@-moz-keyframes bingoappear {
    0% {
        -moz-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -moz-transform: scale3d(1, 1, 1);
    }
}

@keyframes abcgame_bingoappear {
    0% {
        transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        transform: scale3d(1, 1, 1);
    }
}

.abcgame_bingocaseupper {
    color: #727272;
}

.abcgame_bingomaincontainerContent {
    width: 100%;
    height: 100%;
}

.abcgame_bingoTellerWrap {
    margin-top: 18%;
    position: relative;
}

.abcgame_bingoteller {
    background-repeat: no-repeat;
    display: block;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-bottom: 16%;
}

.abcgame_bingorepeattelling {
    width: 93%;
    height: 27%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 17px;
    
    cursor: pointer !important;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-position-y: 6px;
    padding-left: 12%;
}

.abcgame_bingoflipcardwrap {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    position: relative;
}

.abcgame_bingoflipcardcont {
    background: #fff;
    border-radius: 8px;
    padding: 10px 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding-left: 6px;
    padding-top: 4px;
    height: 100%;
}


.abcgame_bingoleflogo {
    /* width: 60%;
	height: 33%; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /* margin: 0 auto; */
    /* margin-top: 9%; */
    /* margin-bottom: 9%; */
}

.abcgame_bingolefcasedetail {
    width: 55%;
    height: 10%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: 4px;
}

.abcgame_bingolefcasedetail div {
    width: 100%;
    text-align: center;
    font-size: 26px;
    padding-top: 5%;
}

.abcgame_bingoControlsWrap {
    width: 87%;
    height: 11%;
    margin-left: 7%;
    margin-top: 9%;
    text-align: center;
}

.abcgame_bingocontrols {
    width: 16%;
    height: 84%;
    cursor: pointer;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 100% 100%;
    margin-right: 7%;
}

.abcgame_bingowrongEffect {
    -webkit-animation: abcgame_wrongscaleimg .2s;
    -moz-animation: abcgame_wrongscaleimg .2s;
    -ms-animation: abcgame_wrongscaleimg .2s;
    animation: abcgame_wrongscaleimg .2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes abcgame_wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-webkit-keyframes wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-ms-keyframes wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-moz-keyframes wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

.abcgame_correctEffectborder {
    border: 5px solid #00B4FF;
}

.abcgame_correctEffect {
    -webkit-animation: abcgame_correctimageEffectanim .5s;
    -moz-animation: abcgame_correctimageEffectanim .5s;
    -ms-animation: abcgame_correctimageEffectanim .5s;
    animation: abcgame_correctimageEffectanim .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes abcgame_correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-moz-keyframes correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-ms-keyframes correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

.abcgame_bingoimage {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.abcgame_bingoimageRL3 {
    width: 96%;
    height: 93%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    margin-left: 9px;
    margin-top: 20px;
}

.abcgame_bingoimageH3 {
    margin-top: 20px;
    width: 600px;
    height: 140px;
}

.abcgame_bingoimageV3 {
    margin-left: 3%;
    margin-top: -4%;
    height: 102%;
    width: 22%;
}

.abcgame_bingoimageRL4 {
    width: 96%;
    height: 93%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    margin-left: 9px;
    margin-top: 12px;
}

.abcgame_bingoflipcard4 {
    width: calc(25% - 12px);
    height: calc(25% - 12px);
    font-size: 58px;
}

.abcgame_bingoimageH4 {
    margin-top: 6px;
    width: 600px;
    height: 140px;
}

.abcgame_bingoimageV4 {
    margin-left: 3%;
    margin-top: 4px;
    height: 94%;
    width: 17%;
}

.abcgame_bingoback4 {
    top: 2px
}

.abcgame_bingoback4 img {
    width: 96%;
    height: 96%;
}

.tooltip .abcgame_bingocustomClass .tooltip-inner {
    color: #fff;
    background-color: #423f3f;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
}

.abcgame_bingocustomClass {
    top: 90px !important;
}

.abcgame_bingocustomClassi {
    top: 65px !important;
    z-index: 7 !important;
}

.abcgame_bingodefaultcursor {
    cursor: default;
}

.abcgame_bingoscoredetailcol {
    width: 50%;
    float: left;
    text-align: center;
    font-size: 22px;
    color: #131111;
}

.gameContainer .abcgame_detailscorebingowrap {
    height: 130px;
}

.abcgame_bingoScoreboard {
    width: 88%;
    height: 57%;
    -webkit-animation: abcgame_bingoscoreboardanim .5s;
    -moz-animation: abcgame_bingoscoreboardanim .5s;
    -ms-animation: abcgame_bingoscoreboardanim .5s;
    animation: abcgame_bingoscoreboardanim .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    top: 5%;
}

@-webkit-keyframes bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

@-moz-keyframes bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

@-ms-keyframes bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

@keyframes abcgame_bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

.abcgame_bingoscoredetailbox {
    height: 100%;
    padding: 17% 4%;
    color: #000;
    padding-top: 4%;
    padding-bottom: 11%;
}

@-webkit-keyframes bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes abcgame_bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.abcgame_bingoscorewordno {
    width: 33%;
    float: left;
    text-align: center;
    height: 51%;
    margin-top: 9%;
}

.abcgame_bingoscorewordnoscore {
    width: 50%;
    float: left;
    text-align: center;
    height: 100%;
}

.abcgame_bingoscoreword {
    font-size: 22px;
    text-align: center;
    
    margin-bottom: 7%;
}

.abcgame_bingoscorenocorrect {
    background: #FFC15C;
}

.abcgame_bingoscorenoincorrect {
    background: #93C958;
}

.abcgame_bingoscorenopercentage {
    background: #4FDBFF;
}

.abcgame_bingoscoreno {
    color: #000;
    
    width: 78%;
    height: 41%;
    margin: 0 auto;
    font-size: 26px;
    text-align: center;
    padding-top: 4%;
    margin-top: 8%;
    border: 2px solid #8168FF;
    border-radius: 29px;
}

.abcgame_bsp {
    font-size: 24px;
}

.abcgame_scoredetailswrapbtn {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    border: none;
    z-index: 111;
    background-position-y: 4px !important;
}

.abcgame_scoredetailsbtnwrap {
    width: 40%;
    height: 29%;
    font-size: 27px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    position: relative;
    clear: both;
}

.abcgame_scoredetailsbtn {
    width: 43%;
    height: 26%;
    background-repeat: no-repeat;
    font-size: 27px;
    border: none;
    text-align: center;
    background-size: 100%100%;
    color: #fff;
    margin: 0 auto;
    display: block;
}

.abcgame_detailscorebingowrap {
    margin-bottom: 3%;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 3%;
    position: relative;
}

.abcgame_detailscorebingo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 111;
    left: 0;
    top: 0;
}

.abcgame_closescorebingo {
    position: absolute;
    top: -3%;
    right: -1%;
    cursor: pointer !important;
    z-index: 111;
    width: 10%;
    height: 17%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.abcgame_bingoscorewordnoscorewrap {
    width: 83%;
    height: 14%;
    margin: 0 auto;
}

.abcgame_wrongbingoans {
    color: #f00;
}

.abcgame_bingooverlayblockblue {
    background: #0F2332;
    position: absolute;
    opacity: 1;
    width: 100%;
    height: 100%;
}

.abcgame_scoredetailbtn {
    position: relative;
    width: 40%;
    height: 100%;
    background-repeat: no-repeat !important;
    top: 0;
    background-size: 100% 100%;
    border: none;
    z-index: 111;
    background-position-y: 4px !important;
}

.abcgame_scoredetailsbtnwrap1 {
    width: 100%;
    height: 29%;
    font-size: 27px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    position: relative;
    clear: both;
}

.abcgame_bingodetail {
    margin-left: 2%;
}

.abcgame_bingoplayagain {
    left: 0;
    margin-left: 1%;
}

.abcgame_splashwrap {
    height: 100%;
    width: 100%;
}


/*----------------ipad both starts-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .abcgame_bingoshortvowel {
        padding: 0 !important;
    }

    .abcgame_scoredetailsbtnwrap1,
    .abcgame_scoredetailsbtnwrap {
        font-size: 18px !important;
    }

    .abcgame_bingoscoredetailcol {
        font-size: 20px !important;
    }

    .gameContainer .abcgame_detailscorebingowrap {
        height: 115px;
    }

    .abcgame_bingo_instruction_header {
        font-size: 23px !important;
    }

    .abcgame_bingo_instruction_step {
        font-size: 19px !important;
    }

    .abcgame_bingo_closeinstruction {
        font-size: 23px !important;
    }

    .abcgame_bingolefcasedetail div {
        font-size: 24px;
    }

    .abcgame_bingotype {
        font-size: 18px !important;
    }

    .abcgame_bingoimageH3 {
        width: 100%;
    }
}


/*----------------ipad both endss-----------------*/


/*----------------ipad landscape starts-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .abcgame_bingoContainerrow {
        width: 100%;
        margin: 0 auto;
        height: 600px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .abcgame_bingomaincontainer {
        width: 80%;
        height: 100%;
    }

    .abcgame_bingomainContainerOffset {
        width: 59%;
        margin-left: 0;
    }

    .abcgame_bingoleflogo {
        height: 22%;
    }

    .abcgame_bingolefcasedetail {
        width: 76%;
        height: 9%;
    }

    .abcgame_bingolefcasedetail div {
        font-size: 18px;
    }

    .abcgame_bingoControlsWrap {
        width: 90%;
        height: 10%;
    }

    .abcgame_bingocontrols {
        width: 30%;
    }

    .abcgame_bingoteller {
        width: 85%;
    }

    .abcgame_bingoTellerWrap {
        /* height: 27%; */
    }

    .abcgame_tooltip {
        display: none !important;
    }

    .abcgame_bingorepeattelling {
        width: 98%;
        height: 24%;
        top: 31%;
        right: 16%;
        font-size: 9px !important;
    }

    .abcgame_bingomatrix,
    .abcgame_bingotype {
        font-size: 15px;
    }
}


/*----------------ipad landscape ends-----------------*/


/*----------------ipad portrait starts--------------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .abcgame_bingomaincontainer {
        width: 60% !important;
        height: 81% !important;
    }

    .abcgame_bingoContainerrow {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100% !important;
        height: 600px !important;
    }

    .abcgame_bingosidemenu {
        width: 19% !important;
        height: 70% !important;
    }

    .abcgame_bingolefcasedetail div {
        font-size: 10px !important;
    }

    .abcgame_bingorepeattelling {
        width: 95% !important;
        height: 26%;
        font-size: 8px !important;
        line-height: 22px !important;
    }

    .abcgame_bingomatrix,
    .abcgame_bingotype {
        font-size: 14px !important;
    }

    .abcgame_bingoleflogo {
        height: 21% !important;
    }

    .abcgame_bingolefcasedetail {
        height: 6% !important;
        line-height: 22px;
    }

    .abcgame_bingocontrols {
        width: 26%;
    }

    .abcgame_bingoControlsWrap {
        height: 9%;
    }

    .abcgame_bingoTellerWrap {
        width: 100%;
        height: 26%;
    }

    .abcgame_bingoteller {
        width: 100%;
        height: 100%;
    }

    .abcgame_tooltip {
        display: none !important;
    }

    .abcgame_bingoContainerrow {
        margin-top: 90px !important;
    }

    .abcgame_bingoselectmenusequence {
        font-size: 17px !important;
    }

    .abcgame_bingoselectmenusequencewrap {
        height: 63% !important;
    }
}


/*@media screen and (max-width: 768px) {
  .abcgame_bingomaincontainer {
    width: 80%;
    height: 96%;
  }
  .abcgame_bingomainContainerOffset {
    margin: 0 auto;
    margin-left: 0;
    width: 600px !important;
    height: 600px !important;
  }
  .abcgame_bingoContainer {
    width: 600px !important;
    height: 600px !important;
  }
  .abcgame_bingoContainerrow {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .abcgame_bingosidemenu {
    width: 19%;
    height: 470px;
  }
  .abcgame_bingoflipcardcont {
    padding-top: 5px;
  }
  .abcgame_bingomaincontainer {
    width: 61%;
    height: 470px;
  }
  .abcgame_bingoleflogo {
    width: 100%;

    height: 26%;
  }
  .abcgame_bingolefcasedetail {
    width: 83%;
    height: 11%;
  }
  .abcgame_bingolefcasedetail div {
    font-size: 14px;
    padding-top: 10%;
  }
  .abcgame_bingocontrols {
    width: 34%;
  }
  .abcgame_bingoControlsWrap {
    width: 87%;
    height: 9%;
  }
  .abcgame_bingofront {
    padding-top: 17%;
  }
  .abcgame_bingoTellerWrap {
    width: 100%;
    height: 37%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 15%;
  }
  .abcgame_bingoteller {
    width: 74%;
    height: 100%;
  }
  .abcgame_bingorepeattelling {
    width: 70%;
    height: 23%;
    top: 31%;
    right: 16%;
    padding: 7% 0% 0 14%;
    font-size: 12px;
  }
  .abcgame_bingoscoreword {
    font-size: 17px;
  }
  .abcgame_bingoscoreno {
    width: 66%;
    height: 51px;
    font-size: 23px;
    padding-top: 8%;
    margin-top: 11%;
  }
  .abcgame_bsp {
    font-size: 20px;
  }
  .abcgame_scoredetailsbtnwrap1,
  .abcgame_bingoscoredetailcol,
  .abcgame_scoredetailsbtnwrap {
    font-size: 18px;
  }
  .abcgame_closescorebingo {
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .abcgame_bingoflipcardcont4 {
    padding-bottom: 17px;
  }
}*/


/*----------------ipad portrait ends--------------------*/


/*------iphone 6 mobile landscape 667px---------*/


/*
@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
	.abcgame_bingoselectmenusequence .abcgame_bingoscorewordnoscorewrap {
		width: 100%;
	}
	.abcgame_bingoscoreword {
		font-size: 13px !important;
	}
	.abcgame_bingoContainerrow {
		width: 100%;
		margin: 0 auto;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 3px !important;
	}
	.abcgame_bingomainContainerOffset {
		margin-left: 0;
	}
	.abcgame_bingomaincontainer {
		width: 47%;
		height: 98% !important;
	}
	.abcgame_bingomatrix {
		font-size: 17px;
	}
	.abcgame_bingotype {
		font-size: 15px;
		text-indent: -4px;
	}
	.abcgame_bingoi {
		width: 9%;
	}
	.abcgame_bingolefcasedetail div {
		font-size: 16px;
		padding-top: 8%;
	}
	.abcgame_bingorepeattelling {
		width: 96%;
		font-size: 12px;
	}
	.abcgame_bingoflipcardcont {
		background: #fff;
		border-radius: 8px;
		width: 99%;
		padding-left: 1%;
		padding-top: 1%;
		height: 100%;
	}
	.abcgame_bingoflipcard4 {
		font-size: 42px;
		height: 23.abcgame_4% !important;
	}
	.abcgame_scoredetailsbtnwrap1,
	.abcgame_scoredetailsbtnwrap,
	.abcgame_bingoscoredetailcol {
		font-size: 17px;
	}
	.abcgame_bingoscoreno {
		font-size: 16px;
	}
	.abcgame_bsp {
		font-size: 14px;
	}
	.abcgame_bingo_instruction_header {
		font-size: 19px;
	}
	.abcgame_bingo_instruction_step {
		font-size: 16px;
	}
	.abcgame_bingo_closeinstruction {
		width: 37%;
		height: 23%;
		font-size: 17px;
		background-size: 100% 100%;
		margin-top: 17px;
	}
	.abcgame_tooltip {
		display: none !important;
	}
	.abcgame_bingoimageH3 {
		width: 100%;
		height: 23%;
	}
	.abcgame_bingoselectmenusequence {
		font-size: 13px !important;
		padding: 8px !important;
	}
	.abcgame_bingoselectmenusequencewrap {
		height: 63% !important;
		padding-top: 2% !important;
	}
	.abcgame_bingologo {
		width: 69%;
	}
	.abcgame_bingofront5 {
		padding-top: 17%;
	}
	.abcgame_bingoflipcard5 {
		width: 18% !important;
		height: 18% !important;
		font-size: 28px !important;
	}
}*/


/*------iphone 6 mobile landscape 667px ends---------*/


/*------iphone 6 mobile portrait 667px---------*/


/*@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: portrait) {
	.abcgame_bingomaincontainer {
		width: 80%;
	}
	.abcgame_bingomainContainerOffset {
		margin-right: 0;
		width: 46%;
	}
	.abcgame_bingoContainerrow {
		width: 980px;
	}
	.abcgame_bingomaincontainer,
	.abcgame_bingosidemenu {
		height: 71%;
	}
	.abcgame_tooltip {
		display: none !important;
	}
	.abcgame_bingoimageH3 {
		width: 100%;
		height: 23%;
	}
}*/


/*------iphone 6 mobile portrait 667px ends---------*/


/*------iphone 6 plus mobile landscape starts---------*/


/*@media only screen and (min-device-width: 464px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
	.abcgame_bingoContainer {
		margin-top: -10px;
	}
	.abcgame_bingoflipcard5 {
		width: 18% !important;
		height: 18% !important;
		font-size: 28px !important;
	}
}*/


/*------iphone 6 plus mobile landscape ends---------*/


/*----laptop L1 starts-----*/

@media screen and (max-width:1366px) and (min-width:768px) {
    .abcgame_bingoContainerrow {
        height: 99%;
        margin-top: -7px;
    }
}


/*----laptop L1 ends-----*/


/*-------mennu screen starts------*/

.abcgame_bingoselectmenuwrap {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
}

.abcgame_bingoselectmenuoverlay {
    opacity: .9;
    background: #075267;
    position: absolute;
    width: 100%;
    height: 100%;
}

#abcgame_bingoselectmenulogo {
    width: 24%;
    margin-top: 5%;
    height: 100%;
}

.abcgame_bingoselectmenulogowrap {
    width: 100%;
    height: 24%;
    margin-bottom: 5%;
}

.abcgame_bingoselectmenusequence {
    width: 24%;
    float: left;
    padding: 10px;
    text-align: center;
    font-size: 21px;
    cursor: pointer;
    margin-right: 5%;
    margin-left: 4%;
}

.abcgame_bingoselectmenuoverallwrap {
    position: absolute;
    width: 100%;
    height: 100%;
}

.abcgame_bingoselectmenusequence:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcgame_bingo/images/abcgame_bingo_letter_name.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: 3px;
}

.abcgame_bingoselectmenusequencewrap {
    border: 1px solid #32928c;
    width: 98%;
    height: 65%;
    margin-left: 1%;
    border-radius: 8px;
    padding-top: 4%;
}


/*-------mennu screen ends------*/



#abcBingoMainDiv .abcgame_bingoflipcard.abcgame_bingoflipcard5 {
    width: calc(20% - 12px);
    height: calc(20% - 12px);
    font-size: 35px;
}

.abcgame_bingoimageV5 {
    margin-left: 1%;
    margin-top: 11px;
    height: 94%;
    width: 17%;
}

.abcgame_bingoimageH5 {
    width: 600px;
    height: 140px;
}

.abcgame_bingoimageLR5 {
    width: 96%;
    height: 93%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    margin-left: 9px;
    margin-top: 30px;
}

@media screen and (max-width:1366px) and (min-width:680px) {
    .abcgame_bingoselectmenusequencewrap {
        height: 63%;
    }

    .abcgame_bingoselectmenusequence {
        font-size: 21px;
    }

    .abcgame_bingorepeattelling {
        height: 31%;
    }
}


/*-------abcbingo recommended screen starts------*/

.abcgame_bingorecommendedgamewrap {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #DDFFFF;
    z-index: 50;
    padding: 7px;
    top: 0;
}

.abcgame_bingorecommendedgame {
    height: 63%;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    position: relative;
    box-shadow: #ccc 1px 2px 8px 2px;
    margin-bottom: 1%;
}

.abcgame_bingorecommendedgame img {
    width: 100%;
}

.abcgame_bingooptionaltitle {
    background-image: url(../../app/assets/images/gameoptional_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 8%;
    width: 41%;
    text-align: center;
    margin: 0 auto;
    font-size: 19px;
    line-height: 34px;
    color: #fff;
}

.abcgame_bingooptionalgamewrap {
    width: 100%;
    height: 28%;
}

.abcgame_bingooptionalgametable {
    display: flex;
    width: 100%;
    height: 100%;
}

.abcgame_bingooptionalgamerow {
    display: table-row;
}

.abcgame_bingooptionalgamelist {
    flex-basis: 100%;
    position: relative;
}

.abcgame_bingorecommendedgame button,
.abcgame_bingooptionalgamelist button {
    background-image: url(../../app/assets/images/optionalgameplay_button_Text.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.abcgame_bingorecommendedgame button {
    width: 26%;
    height: 18%;
    position: absolute;
    bottom: 4%;
    border: navajowhite;
    color: #fff;
    font-size: 25px;
    background-position-y: 12px;
    left: 38%;
}

.abcgame_bingooptionalgamelist button {
    width: 49%;
    height: 26%;
    position: absolute;
    border: none;
    bottom: 4%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background-position-y: 6px;
    left: 27%;
}

.abcgame_optgamethumbnail {
    height: 100%;
    width: 96%;
    margin-left: 2%;
    border: 2px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: #ccc 1px 2px 8px 2px;
}

.abcgame_optgamethumbnail img {
    width: 100%;
    height: 100%;
}

.abcgame_bingorecommendedgamefull {
    height: 100%;
}

.abcgame_bingorecommendedgameplay {
    height: 12%;
}

.abcgame_display {
    display: none;
}

.recommendedbadge {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/gamerecommended_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1%;
    width: 33%;
    height: 19%;
    right: 2%;
}


/*-------abcbingo recommended screen ends------*/


/*abc bingo for all mobiles starts*/

@media only screen and (max-device-width: 767px) {
    .abcgame_bingoselectmenusequence .abcgame_bingoscorewordnoscorewrap {
        width: 100%;
    }

    .abcgame_bingomainContainerOffset {
        margin-left: 0;
    }

    .abcgame_bingomatrix {
        font-size: 11px;
    }

    .abcgame_bingotype {
        font-size: 15px;
        text-indent: -4px;
    }

    .abcgame_bingoi {
        width: 9%;
    }

    .abcgame_bingolefcasedetail div {
        font-size: 16px;
        padding-top: 8%;
    }

    .abcgame_bingorepeattelling {
        width: 83%;
        font-size: 10px;
    }

    .abcgame_bingoflipcardcont {
        background: #fff;
        border-radius: 8px;
        width: 99%;
        padding-left: 1%;
        padding-top: 1%;
        height: 100%;
    }

    .abcgame_bingoflipcard4 {
        font-size: 22px !important;
    }

    .abcgame_scoredetailsbtnwrap1,
    .abcgame_scoredetailsbtnwrap,
    .abcgame_bingoscoredetailcol {
        font-size: 11px;
    }

    .gameContainer .abcgame_detailscorebingowrap {
        height: 60px;
    }

    .abcgame_bingoscoreno {
        font-size: 11px;
    }

    .abcgame_bsp {
        font-size: 11px;
    }

    .abcgame_bingo_instruction_step {
        font-size: 10px;
    }

    .abcgame_bingo_closeinstruction {
        width: 37%;
        height: 23%;
        font-size: 17px;
        background-size: 100% 100%;
        margin-top: 17px;
    }

    .abcgame_tooltip {
        display: none !important;
    }

    .abcgame_bingoimageH3 {
        width: 100%;
        height: 23%;
    }

    .abcgame_bingoselectmenusequence {
        font-size: 13px !important;
        padding: 8px !important;
    }

    .abcgame_bingoselectmenusequencewrap {
        height: 63% !important;
        padding-top: 2% !important;
    }

    .abcgame_bingologo {
        width: 69%;
    }

    .abcgame_bingoflipcard5 {
        font-size: 16px !important;
    }

    .abcgame_bingolefcasedetail {
        width: 31%;
    }

    .abcgame_bingoleflogo {
        height: 44%;
    }

    .abcgame_bingoControlsWrap {
        height: 13%;
    }

    .abcgame_bingoTellerWrap {
        margin-top: 7%;
    }

    .abcgame_bingoteller {
        margin-bottom: 8%;
    }

    .abcgame_bingomatrix {
        text-indent: 20px;
        padding-top: 6%;
        padding-right: 8%;
    }

    .abcgame_bingorepeattelling {
        width: 83%;
        font-size: 7px;
        padding-top: 3%;
    }

    .abcgame_bingo_instruction_header {
        font-size: 11px;
        line-height: 20px;
    }

    .abcgame_bingo_closeinstruction {
        width: 10%;
        height: 20%;
        font-size: 17px;
        margin-top: 4px;
    }
}

.abcgame_bingofront {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.abcgame_bingofront span {
    display: table;
    margin: 0 auto;
}

.abcgame_bingoback img {
    width: 96%;
    height: 96%;
    top: 0;
    position: absolute;
    left: 0;
}

.abcgame_bingoleftparentwrap,
.abcgame_bingoContainerinnerwrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


/*abc bingo for all mobiles ends*/


/*mobile landscape starts*/

@media only screen and (max-device-width: 767px) and (orientation: landscape) {
    .abcgame_bingomaincontainer {
        height: 100% !important;
        width: 47%;
    }

    .abcgame_bingoContainerrow {
        width: 100%;
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}


/*mobile landscape ends*/


/*mobile portrait starts*/

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

    .abcgame_bingoContainer,
    .abcgame_bingoContainerrow {
        height: 100%;
    }

    .abcgame_bingoContainerrow {
        margin: 0 auto;
        width: 100%;
        display: block;
    }

    .abcgame_bingomaincontainer {
        width: 66%;
        float: none;
        clear: both;
        margin: 0 auto;
    }

    .abcgame_bingoContainerrow_portrait .abcgame_bingosidemenu_portrait {
        width: 100%;
    }

    .abcgame_bingoleftparentwrap_portrait {
        overflow: auto;
        padding: 1% 17%;
        padding-bottom: 0;
        position: relative;
    }

    .abcgame_bingoleftparentwrap_portrait .abcgame_bingoleflogo {
        width: 22%;
        margin: 0;
        float: left;
        height: 58px;
    }

    .abcgame_bingoleftparentwrap_portrait .abcgame_bingolefcasedetail {
        width: 26%;
        color: #fff;
        height: 28px;
        float: left;
        margin: 0 18%;
        margin-top: 4%;
    }

    .abcgame_bingoleftparentwrap_portrait .abcgame_bingocontrols .abcgame_bingohelp {
        width: 100%;
    }

    .abcgamebingocontrolwrap .abcgame_bingocontrols {
        width: 100%;
        height: 100%;
    }

    .abcgame_bingoleftparentwrap_portrait .abcgamebingocontrolwrap {
        float: left;
        width: 8%;
        height: 30px;
        position: absolute;
        top: 25%;
        right: 18%;
    }

    .abcgame_bingoTellerWrap {
        width: 70%;
        height: 9%;
        position: relative;
        margin: 0 auto;
        z-index: 10;
        margin-top: 1%;
    }

    .abcgame_bingolefcasedetail div {
        font-size: 11px;
        padding-top: 11%;
    }

    .abcgame_bingo_closeinstruction {
        background-size: 100% 100%;
        height: 20%;
        background-repeat: no-repeat;
    }

    .abcgame_bingorepeattelling {
        width: 100%;
        font-size: 9px;
        padding-top: 0%;
        color: #fff;
        height: 100%;
    }
}


/*mobile portrait ends*/


/** abc game bingo ends **/
/** abc game sound match  starts **/
/*body {
	width: 100%;
	min-height: 100% !important;
	height: 100% !important;
	margin: 0 auto;
	font-family: 'Poppins';
}*/

.abcgame_soundMatchContainer input[type="button"],
.abcgame_soundMatchContainer button {
    background-color: transparent;
}

.SMtimerparent {
    width: 100%;
}

.SMtimeroptions {
    width: 50%;
    float: left;
}

.SMtimeroptions .abcgame_SMwtimer {
    width: 69%;
    margin: 2%;
    padding-top: 2%;
}

.abcgame_secContainer {
    padding: 0 !important;
}

.abcgame_soundMatchContainerwrap {
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.abcgame_soundMatchContainer {
    width: 100%;
    max-width: 1200px;
    height: 615px;
    margin: 0 auto;
    outline: transparent;
}

.abcgame_soundMatchAudio {
    display: none;
}

.abcgame_maincontainer {
    width: 51%;
}

.abcgame_maincontainerContent {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.abcgame_sidemenu {
    width: 24%;
    padding-top: 2%;
}

.abcgame_maincontainer,
.abcgame_sidemenu {
    height: 100%;
    float: left;
    position: relative;
}

.abcgame_soundMatchContainerrow {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.abcgame_smoverlayblock {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .4;
    position: absolute;
}

.abcgame_smoverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.abcgame_mainContainerOffset {
    margin-left: 0;
}

.abcgame_sm_alphabets:last-child,
.abcgame_sm_drop:last-child {
    margin-right: 0;
}

.abcgame_sm_alphabets {
    width: 18%;
    border: 1px solid;
    display: inline-block;
    margin-right: 8px;
    text-align: center;
    font-size: 48px;
    height: 100%;
    background: #fff;
    text-align: center;
    
    border-radius: 3px;
    /*line-height: 83px;*/
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    cursor: default;
}

.abcgame_sm_drop {
    width: 18%;
    border: 1px solid #666666;
    display: inline-block;
    margin-right: 8px;
    text-align: center;
    height: 100%;
    margin-bottom: 4px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    cursor: default;
}

.abcgame_dropimgwrap {
    width: 100%;
    height: 100%;
    position: absolute;
}

.abcgame_sm_drop img {
    width: 100%;
    height: 100%;
}

.abcgame_sm_drag,
.abcgame_imageWrap {
    text-align: center;
    height: 70px;
    display: inline-block;
}

.abcgame_horizontalbottom .abcgame_sm_drag,
.abcgame_horizontalbottom .abcgame_imageWrap {
    text-align: center;
    height: 100%;
    display: inline-block;
    background: #fff;
    border-radius: 6px;
}

.abcgame_horizontalbottom .abcgame_sm_drag:last-child {
    margin-right: 0;
}

.abcgame_imageWrap {
    width: 100%;
    overflow: hidden;
    cursor: auto;
    height: 100%;
}

.abcgame_horizontalbottom .abcgame_sm_drag {
    display: inline-block;
    text-align: center;
    margin-bottom: 9px;
    margin-right: 1.2%;
    width: 15.6%;
    height: 94%;
}

#smdraghb_0 {
    width: 32%;
    height: 255%;
    position: absolute;
    top: -155%;
    z-index: 1;
    border: 7px solid #93A831;
    left: -17px;
}

.abcgame_vertical .abcgame_sm_drag {
    display: inline-block;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 6px;
    margin-right: 2%;
    width: 92%;
    height: 10.9%;
    margin-left: 0px;
}

.abcgame_sm_alphabetswrap {
    width: 100%;
    height: 17%;
    margin-bottom: 10px;
}

.abcgame_vertical {
    position: absolute;
    width: 12%;
    height: 89%;
    top: 15px;
    right: 7px;
    padding-top: 6px;
    z-index: 1;
    background: #93A831;
    padding-left: 6px;
    border-radius: 8px;
}

.abcgame_horizontalbottom {
    position: absolute;
    width: 95%;
    background: #93A831;
    padding-left: 28%;
    z-index: 1;
    padding-right: 3px;
    border-radius: 8px;
    bottom: 1%;
    height: 11.5%;
    padding-top: 5px;
    right: 7px;
    padding-bottom: 2px;
}

.abcgame_horizontaltop {
    position: absolute;
    right: -2%;
    top: 1%;
    width: 50%;
}

.abcgame_horizontaltop .abcgame_sm_drag {
    width: 16%;
}

.abcgame_sm_gameRFTWrap {
    height: 600px;
}

.abcgame_sm_gameLFT {
    padding-left: 1%;
    padding-right: 0;
    width: 86%;
    height: 87%;
    float: left;
    padding-top: 2%;
}

.abcgame_sm_gameRFT {
    padding-left: 0;
    padding-right: 0;
    width: 14%;
    height: 87%;
    float: left;
}

.abcgame_sm_imagedisplay {
    border: 1px solid #ccc;
    height: 176px;
    bottom: 269px;
    position: absolute;
    width: 31%;
    right: 17%;
    top: 19%;
    display: none;
}

.abcgame_sm_drag .abcgame_imageWrap img {
    width: 100%;
    height: 100%;
}

.abcgame_invisible {
    visibility: hidden;
    cursor: auto !important;
}

.abcgame_emptydropbox {
    background-color: #ccc;
    margin-right: 8px;
}

.abcgame_sm_imagedisplay img {
    width: 100%;
    height: 100%;
}

.abcgame_cursorauto {
    cursor: auto !important;
}

.abcgame_smoverlay0 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0ms;
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.abcgame_smshowgetready {
    font-size: 52px;
    text-align: center;
    
    color: #7616E7;
    margin-top: 0;
}

.abcgame_smtest {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 100px;
    left: 0px;
}

.abcgame_SMwtimer {
    border: none;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    padding: 0;
    text-align: center;
    margin: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 57%;
    height: 61px;
    padding-bottom: 14px;
    
}

.abcgame_smlogo {
    width: 60%;
    height: 60%;
    margin: 0 auto;
    background-repeat: no-repeat;
    margin-top: 9%;
    background-size: 100% 100%;
}

.abcgame_sminstructions {
    width: 8%;
    height: 9%;
    position: absolute;
    top: 2%;
    right: 2%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer !important;
}

.abcgame_sm_instruction_content {
    width: 84%;
    height: 88%;
    position: absolute;
    background-repeat: no-repeat;
    left: 8%;
    top: 8%;
    padding-top: 11%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 10%;
    text-align: center;
    background-size: 100% 100%;
}

.abcgame_sm_instruction_content {
    -moz-animation: smappear 1s ease 0s 1 normal;
    -ms-animation: smappear 1s ease 0s 1 normal;
    -webkit-animation: smappear 1s ease 0s 1 normal;
    animation: smappear 1s ease 0s 1 normal;
}

@-webkit-keyframes smappear {
    0% {
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@-ms-keyframes smappear {
    0% {
        -ms-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -ms-transform: scale3d(1, 1, 1);
    }
}

@-moz-keyframes smappear {
    0% {
        -moz-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -moz-transform: scale3d(1, 1, 1);
    }
}

@keyframes smappear {
    0% {
        transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        transform: scale3d(1, 1, 1);
    }
}

.abcgame_sm_instruction_header {
    color: #fff;
    font-size: 21px;
    
    text-align: center;
    margin-bottom: 10%;
    margin-left: 3%;
}

.abcgame_smControlsRightWrap,
.abcgame_smleftsmwrap {
    width: 100%;
    height: 100%;
}

.abcgame_smControlsWrap {
    text-align: center;
    width: 100%;
    height: 12%;
    margin-left: 0%;
    margin-top: 2%;
}

.abcgame_sm_dropboxwrap {
    width: 100%;
    height: 18%;
}

.tooltip.abcgame_smcustomClass .tooltip-inner {
    color: #fff;
    background-color: #423f3f;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.tooltip.abcgame_smcustomClassrt {
    top: 85px !important;
}

.tooltip.abcgame_smcustomClass {
    top: 65px !important;
    z-index: 5 !important;
}

.abcgame_nomargin {
    margin-right: 0px;
}

.abcgame_SMtimermode {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    width: 100%;
    height: 61px;
    background-position-y: 3px;
    background-size: 100% 100%;
    text-align: center;
    background-repeat: no-repeat;
    padding-bottom: 8%;
    
}

.abcgame_SMtimermodewrap {
    float: left;
    width: 23%;
    margin-right: 4%;
    text-align: center;
    height: 50px;
}

.abcgame_SMtimermodewrap:first-child {
    margin-left: 4%;
}

.abcgame_SMtimermodeparent {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 14%;
    display: flex;
    justify-content: center;
}

.abcgame_SMtimerparent {
    margin-top: 14%;
}

.abcgame_sm_closeinstruction {
    width: 7%;
    height: 9%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
}

.abcgame_sm_instruction_step {
    width: 96%;
    height: 68%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 16%;
    padding: 3% 8%;
    text-align: left;
    font-size: 16px;
    cursor: default;
}

.abcgame_sm_closeinstruction {
    width: 10%;
    height: 11%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 6%;
    top: 22%;
    cursor: pointer !important;
}

.abcgame_sm_instruction_step ol li {
    margin-bottom: 7%;
    color: #000;
    font-weight: 600;
    width: 96%;
}

.abcgame_leftsmlogo {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 80%;
    height: 37%;
    margin: 0 auto;
}

.abcgame_smatoe {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
    font-size: 29px;
    margin: 0 auto;
    
    line-height: 62px;
    width: 60%;
    height: 12%;
    margin-top: 12%;
    margin-bottom: 10%;
}

.abcgame_smstarwrap {
    text-align: center;
}

.abcgame_smstar {
    display: inline-block;
    font-size: 50px;
    margin: 3px;
    width: 15%;
    height: 43px;
    clear: both;
}

.abcgame_smstar img {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: block;
}

.abcgame_smgameplayblock {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    visibility: visible;
    z-index: 0;
}

.rightEffect {
    border: 3px solid #00A000;
    cursor: default;
}

.wrongEffect {
    border: 3px solid red;
}

.abcgame_smScoreBg {
    background: #FCEBD6;
    padding: 3%;
    margin: 3%;
    border-radius: 7px;
    height: 94%;
    width: 94%;
    border: 4px solid #C5BDAD;
}

.abcgame_smtimedetails {
    width: 33%;
    float: left;
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin-right: 3%;
    margin: 0 auto;
    
}

.abcgame_smscoredetails {
    background-repeat: no-repeat;
    /*background-image: 100% 100%;*/
    overflow: auto;
    width: 79%;
    margin: 0 auto;
    margin-top: 3%;
    padding: 20px 0;
    position: relative;
    z-index: 1;
    padding-top: 8%;
}

.abcgame_smtimedetailsbox {
    border-radius: 6px;
    text-align: center;
    margin: 0 auto;
    margin-top: 4%;
    color: #fff;
    
    background-repeat: no-repeat;
    height: 80px;
    margin-top: 2%;
    width: 84%;
    text-align: center;
    height: 48px;
    line-height: 36px;
    background-size: 100% 100%;
    font-size: 15px;
}

.abcgame_smplayagain {
    width: 28%;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
}

.abcgame_smplayagainwithtrophy {
    width: 31%;
    margin: 0 auto;
    margin-top: 2%;
    margin-bottom: 3%;
}

.abcgame_smplayagainwithtrophypa {
    width: 28%;
    margin: 0 auto;
    margin-top: 4%;
    margin-bottom: 4%;
}

.abcgame_smplayagainbtn {
    border: none;
    background: transparent;
    width: 100%;
    width: 100%;
    height: 61px;
    font-size: 17px;
    color: #fff;
    
    background-repeat: no-repeat;
    position: relative;
    z-index: 111;
    background-size: 100% 100%;
    padding-bottom: 6%;
}

.abcgame_smplayagainbtn,
.abcgame_smnextlevelbtn {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.abcgame_smplayagainbtn2 {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    background-position-y: 3px;
    font-size: 22px;
    color: #fff;
    
    font-size: 17px;
    padding-bottom: 6%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.abcgame_smshowgetreadycount {
    
    color: #7616E7;
    font-size: 180px;
    margin: 0 auto;
    text-align: center;
    margin-top: 2%;
    padding: 0;
    margin: 0 auto;
    line-height: 93%;
}

.abcgame_sm_feathers {
    width: 120px;
    height: 200px;
    position: absolute;
    z-index: 0;
}

.abcgame_smTimerWrap {
    position: relative;
    background-size: 100% 118%;
    height: 29%;
    background-repeat: no-repeat;
    background-position-y: -30px;
}

.abcgame_smLoseWrap {
    margin-top: 34%;
    position: relative;
    background-size: 100% 100%;
    height: 36%;
    margin-top: 34%;
    -moz-animation: smappear 1s ease 0s 1 normal;
    -ms-animation: smappear 1s ease 0s 1 normal;
    -webkit-animation: smappear 1s ease 0s 1 normal;
    animation: smappear 1s ease 0s 1 normal;
}

.abcgame_smLoseWrap2 {
    margin-top: 25%;
    position: relative;
    background-size: 100% 100%;
    height: 42%;
}

#abcgame_SMwotimer {
    float: right;
}

#abcgame_SMwtimer {
    float: left;
}

.abcgame_smlosetext {
    color: #7616E7;
    font-size: 27px;
    text-align: center;
    
}

.abcgame_smscoredetails2,
.abcgame_smscoredetails_woscore {
    background-repeat: no-repeat;
    overflow: auto;
    width: 79%;
    margin: 0 auto;
    padding: 7% 0;
    position: relative;
    z-index: 1;
    text-align: center;
}

.abcgame_smscoredetailsbgtxt {
    padding: 13% 0 !important;
}

.abcgame_smscoredetails_woscore {
    padding: 18% 0;
}

#sm_feathers3 {
    left: 3%;
    bottom: 7%;
}

#sm_feathers4 {
    right: 3%;
    transform: rotateY(180deg);
    bottom: 7%;
}

.abcgame_smtrophywrap {
    height: 55%;
    clear: both;
}

.abcgame_smtrophy {
    height: 75%;
    width: 42%;
    margin: 0 auto;
}

.abcgame_smtrophy img {
    width: 100%;
    height: 100%;
}

.abcgame_sm_completedmsg {
    color: #7616E7;
    font-size: 22px;
    text-align: center;
    
    /* padding-top: 2%; */
}

.abcgame_smcongrats {
    font-size: 24px;
}

.abcgame_smtimedetailswotimer {
    width: 33%;
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin: 0 auto;
    
}

.abcgame_smplayagainwithtrophynl {
    width: 29%;
}

.abcgame_smnextlevelbtn {
    border: none;
    background: transparent;
    width: 100%;
    height: 61px;
    font-size: 23px;
    color: #fff;
    
    text-align: center;
    cursor: pointer;
    position: relative;
    z-index: 111;
    background-size: 100% 100%;
    font-size: 17px;
    background-repeat: no-repeat;
    padding-bottom: 6%;
}

.abcgame_smplayagainwithtrophy.abcgame_smpa {
    float: left;
    margin-right: 3%;
    margin-left: 18%;
    margin-top: 5.4%;
    height: 61px;
}

.abcgame_smplayagainwithtrophy.abcgame_smnl {
    float: left;
    margin-top: 4%;
}

.abcgame_smplayagainwithtrophy.abcgame_smpa1 {
    float: left;
    margin-right: 3%;
    margin-left: 21%;
    margin-top: 2%;
}

.abcgame_smplayagainwithtrophy.abcgame_smnl1 {
    float: left;
    margin-top: 2%;
}

.abcgame_fastpawrap {
    position: relative;
    height: 11%;
}

.abcgame_fastpa {
    position: absolute;
    background-repeat: no-repeat;
    z-index: 111;
}


.abcgame_smtimeRemainlabel {
    top: 56%;
    color: #ffff00;
    position: relative;
    font-size: 15px;
    
}

.abcgame_smcountdown {
    font-size: 19px;
    position: relative;
    top: 59%;
    color: #000;
    
}

.abcgame_smtimeModelabel {
    position: relative;
    top: 63%;
    font-size: 15px;
    color: #f00;
    
}

.abcgame_smtimeMode {
    position: relative;
    top: 65%;
    font-size: 20px;
    
    color: #000;
}

.abcgame_smsplashwrap {
    width: 100%;
    height: 100%;
}

.abcgame_smclockDialSlow {
    -webkit-animation: abcgame_sm_playc 60s steps(4) infinite, abcgame_sm_playh 30s steps(15) infinite;
    -moz-animation: abcgame_sm_playc 60s steps(4) infinite, abcgame_sm_playh 30s steps(15) infinite;
    -ms-animation: abcgame_sm_playc 60s steps(4) infinite, abcgame_sm_playh 30s steps(15) infinite;
    animation: abcgame_sm_playc 60s steps(4) infinite, abcgame_sm_playh 30s steps(15) infinite;
}

.abcgame_smclockDialRegular {
    -webkit-animation: abcgame_sm_playc 50s steps(4) infinite, abcgame_sm_playh 25s steps(15) infinite;
    -moz-animation: abcgame_sm_playc 50s steps(4) infinite, abcgame_sm_playh 25s steps(15) infinite;
    -ms-animation: abcgame_sm_playc 50s steps(4) infinite, abcgame_sm_playh 25s steps(15) infinite;
    animation: abcgame_sm_playc 50s steps(4) infinite, abcgame_sm_playh 25s steps(15) infinite;
}

.abcgame_smclockDialFast {
    -webkit-animation: abcgame_sm_playc 40s steps(4) infinite, abcgame_sm_playh 10s steps(15) infinite;
    -moz-animation: abcgame_sm_playc 40s steps(4) infinite, abcgame_sm_playh 10s steps(15) infinite;
    -ms-animation: abcgame_sm_playc 40s steps(4) infinite, abcgame_sm_playh 10s steps(15) infinite;
    animation: abcgame_sm_playc 40s steps(4) infinite, abcgame_sm_playh 10s steps(15) infinite;
}

@-webkit-keyframes abcgame_sm_playc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -600px;
    }
}

@-webkit-keyframes abcgame_sm_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2250px;
    }
}

/* @-moz-keyframes abcgame_sm_playc {
     	0% {
     		background-position: 0px 0px;
     	}
     	100% {
     		background-position: 0px -600px;
     	}
     }

     @-moz-keyframes abcgame_sm_playh {
     	0% {
     		background-position: 0px 0px;
     	}
     	100% {
     		background-position: -2250px 0px;
     	}
     }

     @keyframes abcgame_sm_playc {
     	0% {
     		background-position-y: 0px;
     	}
     	100% {
     		background-position-y: -600px;
     	}
     }

     @keyframes abcgame_sm_playh {
     	0% {
     		background-position-x: 0px;
     	}
     	100% {
     		background-position-x: -2250px;
     	}
     }*/

.abcgame_smclockDial {
    width: 150px;
    height: 150px;
    margin-top: 58px;
    margin-left: 39px;
}

.abcgame_switchtimer {
    font-size: 16px;
    width: 106%;
    margin-top: 4%;
}

.abcgame_smgetreadyTimerWrap {
    margin-bottom: 0 !important;
}

/*----laptop L1-----*/

@media screen and (max-width:1366px) and (min-width:768px) {
    .abcgame_smgetreadyTimerWrap {
        margin-bottom: 0 !important;
    }

    .abcgame_smscoredetails2,
    .abcgame_smscoredetails_woscore {
        background-repeat: no-repeat;
        overflow: auto;
        width: 79%;
        margin: 0 auto;
        padding: 7% 0;
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .abcgame_smscoredetails_woscore {
        padding: 16% 0;
    }

    .abcgame_smLoseWrap2 {
        margin-top: 25%;
        position: relative;
        background-size: 100% 100%;
        height: 38%;
    }

    .abcgame_smatoe {
        width: 65%;
        line-height: 71px;
        height: 10%;
    }

    .abcgame_soundMatchContainer {
        max-width: 1200px;
        height: 100%;
    }

    .abcgame_maincontainer {
        width: 51%;
    }

    .abcgame_mainContainerOffset {
        margin-left: 0;
    }

    .abcgame_SMwtimer {
        background-size: 100% 100%;
        font-size: 16px;
        width: 69%;
        height: 63px;
        background-position-y: 0px;
        padding-bottom: 14px;
        
    }

    .abcgame_SMtimermode {
        font-size: 18px;
        height: 61px;
    }

    .abcgame_sidemenu {
        width: 24%;
    }

    .abcgame_smatoe {
        width: 60%;
        height: 12%;
        margin-top: 12%;
        margin-bottom: 10%;
        font-size: 21px;
    }

    .abcgame_leftsmlogo {
        width: 79%;
        height: 37%;
    }

    .abcgame_sm_alphabets {
        width: 18%;
        font-size: 60px;
        height: 100%;
        /*line-height: 83px;*/
    }

    .abcgame_vertical .abcgame_sm_drag {
        margin-bottom: 6px;
        margin-right: 2%;
        width: 92%;
        height: 10.8%;
        margin-left: 0px;
    }

    #smdraghb_0 {
        left: -17px;
    }

    .abcgame_smstar img {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }

    .abcgame_smstar {
        font-size: 50px;
        margin: 3px;
        width: 16%;
        height: 48px;
        clear: both;
    }

    .abcgame_smshowgetreadycount {
        font-size: 250px;
    }

    .abcgame_smtimedetailsbox {
        width: 84%;
        text-align: center;
        height: 48px;
        line-height: 35px;
        background-size: 100% 100%;
        font-size: 16px;
        margin-top: 6%;
    }

    .abcgame_horizontalbottom {
        padding-right: 3px;
    }

    .abcgame_horizontalbottom .abcgame_sm_drag {
        margin-right: 1.2%;
        width: 15.6%;
    }

    .abcgame_smtimedetails {
        font-size: 15px;
    }

    .abcgame_smplayagainbtn {
        width: 100%;
        height: 100%;
        font-size: 19px;
        padding-bottom: 6%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .abcgame_smplayagain {
        width: 36%;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
        height: 13%;
    }

    .abcgame_smshowgetreadycount {
        line-height: 93%;
    }

    .abcgame_sm_instruction_step {
        font-size: 16px;
    }

    .tooltip.abcgame_smcustomClassrt {
        top: 85px !important;
    }

    .tooltip.abcgame_smcustomClass {
        top: 65px !important;
        z-index: 5 !important;
    }

    .abcgame_smnextlevelbtn {
        width: 100%;
        height: 61px;
        font-size: 17px;
        padding-bottom: 6%;
        margin-top: 4%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .abcgame_smplayagainbtn2 {
        font-size: 17px;
        padding-bottom: 6%;
    }

    .abcgame_smplayagainwithtrophy {
        width: 31%;
        margin: 0 auto;
        margin-top: 2%;
        margin-bottom: 3%;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smpa {
        margin-left: 18%;
        height: 61px;
    }

    .abcgame_switchtimer {
        font-size: 16px;
        padding-bottom: 6%
    }

    .abcgame_smplayagainwithtrophy.abcgame_smpa1 {
        margin-left: 17%;
        margin-top: 3%;
        width: 32%;
        height: 65px;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smnl1 {
        margin-top: 2%;
    }

    .abcgame_smclockWrap {
        transform: scale(.8, .8);
    }

    .abcgame_smshowgetreadycount {
        font-size: 180px;
    }
}

/*----laptop L1-----*/
/*----------------ipad both orient starts-----------------*/

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .tooltip {
        display: none !important;
    }

    .abcgame_smlogo {
        width: 80%;
        height: 48%;
        margin: 0 auto;
        background-repeat: no-repeat;
        margin-top: 9%;
        background-size: 100% 100%;
    }

    .abcgame_SMwtimer {
        width: 62%;
        height: 62px;
        font-size: 15px;
    }

    .abcgame_SMtimermode {
        width: 100%;
        height: 62px;
        font-size: 15px;
    }

    .abcgame_soundMatchContainer {
        max-width: 1200px;
        height: 600px;
    }

    .abcgame_maincontainer {
        width: 59%;
    }

    .abcgame_sidemenu {
        width: 20%;
    }

    .abcgame_leftsmlogo {
        width: 93%;
        height: 23%;
    }

    .abcgame_smatoe {
        width: 55%;
        height: 11%;
        font-size: 20px;
        line-height: 59px;
    }

    .abcgame_smstar {
        font-size: 50px;
        margin: 3px;
        width: 16%;
        height: 46px;
        clear: both;
    }

    .abcgame_smControlsWrap {
        height: 6%;
    }

    .abcgame_smcongrats {
        font-size: 25px;
    }

    .abcgame_sm_completedmsg {
        font-size: 23px;
    }

    .abcgame_smshowgetreadycount {
        font-size: 200px;
    }

    .abcgame_smstarwrap {
        height: auto;
        margin-top: 9%;
    }

    .abcgame_smclockWrap {
        transform: scale(.7, .7);
        margin-left: -9px;
    }

    .abcgame_sm_gameLFT {
        height: 70%;
    }

    .abcgame_sm_alphabetswrap {
        height: 21%;
    }

    .abcgame_sm_dropboxwrap {
        height: 50%;
    }

    .abcgame_sm_alphabets {
        width: 18%;
    }

    .abcgame_sm_drop {
        height: 43%;
        width: 18%;
    }

    .abcgame_sm_alphabets {
        height: 100%;
        font-size: 49px;
    }

    #smdraghb_0 {
        left: -16px;
    }

    .abcgame_vertical .abcgame_sm_drag {
        height: 10.8%;
    }

    .abcgame_horizontalbottom .abcgame_sm_drag {
        display: inline-block;
        text-align: center;
        margin-bottom: 9px;
        margin-right: 1.9%;
        width: 15%;
        height: 92%;
    }

    .abcgame_horizontalbottom {
        bottom: 11px;
        width: 95%;
        height: 11%;
        right: 7px;
    }

    .abcgame_smtimedetailsbox {
        width: 100%;
        font-size: 15px;
        height: 62px;
        background-size: 100% 100%;
        line-height: 29px;
    }

    .abcgame_smplayagainbtn2 {
        width: 100%;
        height: 100%;
        font-size: 17px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .abcgame_switchtimer,
    .abcgame_smplayagainbtn2 {
        width: 100%;
        height: 100%;
        font-size: 17px;
    }

    .abcgame_smstar {
        height: 20%;
        width: 15%;
        margin-bottom: 5%;
    }

    .abcgame_smstar img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .tooltip {
        display: none !important;
    }

    .abcgame_SMwtimer {
        font-size: 13px;
        width: 64%;
    }
}

/*----------------ipad both orient ends-----------------*/
/*----------------ipad landscape starts-----------------*/

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .abcgame_soundMatchContainerrow {
        transform: scale(.85, .85);
    }

    .abcgame_smstar {
        width: 15% !important;
        margin: 1px;
    }

    .abcgame_smlogo {
        width: 58%;
    }
}

/*----------------ipad landscape ends-----------------*/
/*----------------ipad potrait starts-----------------*/

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .abcgame_sm_alphabets {
        font-size: 42px;
        /*line-height: 78px;*/
    }

    #smdraghb_0 {
        left: -11px;
    }

    .abcgame_soundMatchContainer {
        height: 475px !important;
    }

    .tooltip {
        display: none !important;
    }

    .abcgame_vertical .abcgame_sm_drag {
        height: 10.5%;
        width: 89%;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smpa {
        margin-left: 15%;
    }

    .abcgame_smplayagainwithtrophy {
        width: 29%;
        margin-bottom: 3%;
    }

    .abcgame_smnextlevelbtn,
    .abcgame_smplayagainbtn {
        height: 100%;
    }

    .abcgame_smControlsWrap {
        height: 7%;
    }

    .abcgame_smplayagainbtn,
    .abcgame_smnextlevelbtn {
        font-size: 19px;
    }

    .abcgame_switchtimer {
        font-size: 17px;
        width: 116%;
    }

    .abcgame_smpa {
        width: 33%;
    }

    .abcgame_smshowgetreadycount {
        font-size: 150px;
    }

    .abcgame_smplayagainbtn2,
    .abcgame_smtimedetails {
        font-size: 18px;
    }

    .abcgame_smtimedetailswotimer {
        font-size: 19px;
    }

    .abcgame_sm_completedmsg {
        font-size: 18px;
    }

    .abcgame_smcongrats {
        font-size: 20px;
    }

    .abcgame_smcountdown {
        font-size: 27px;
    }

    .abcgame_sm_feathers {
        width: 22%;
        height: 100%;
    }

    .abcgame_sm_instruction_header {
        font-size: 23px;
        margin-left: 5%;
    }

    .abcgame_sm_instruction_step {
        padding: 5% 1%;
        padding-right: 4%;
        font-size: 14px !important;
    }

    .tooltip {
        display: none !important;
    }

    .abcgame_vertical {
        height: 87%;
        padding-left: 5px;
    }

    .abcgame_horizontalbottom {
        bottom: 14px;
    }

    .abcgame_smatoe {
        font-size: 16px;
        line-height: 55px;
    }

    .abcgame_smclockWrap {
        transform: scale(.6, .6);
        margin-left: -37px;
    }

    .abcgame_smatoe {
        line-height: 48px;
    }

    .abcgame_smlogo {
        width: 60%;
    }

    .abcgame_smstar {
        width: 13% !important;
    }

    .abcgame_smrepeatletter {
        font-size: 13px !important;
    }

    .abcgame_smcountdown {
        top: 58%;
    }

    .abcgame_smtimeModelabel {
        top: 62%;
    }

    .abcgame_smtimeMode {
        top: 62%;
    }

    .abcgame_smlogo {
        width: 50%;
    }
}

/*----------------ipad potrait ends-----------------*/
/*------iphone 6 mobile landscape 667px starts---------*/
/*
@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
	.tooltip {
		display: none !important;
	}
	.abcgame_smlogo {
		width: 80%;
		height: 48%;
		margin: 0 auto;
		background-repeat: no-repeat;
		margin-top: 9%;
		background-size: 100% 100%;
	}
	.abcgame_maincontainer {
		width: 42%;
	}
	.abcgame_SMtimermode {
		width: 100%;
		height: 50px;
		font-size: 13px;
	}
	.abcgame_soundMatchContainer {
		max-width: 1200px;
		height: 600px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.abcgame_leftsmlogo {
		width: 62%;
		height: 23%;
	}
	.abcgame_smstar {
		font-size: 50px;
		margin: 3px;
		width: 21%;
	}
	.abcgame_smControlsWrap {
		height: 9%;
	}
	.abcgame_smcongrats {
		font-size: 25px;
	}
	.abcgame_sm_completedmsg {
		font-size: 23px;
	}
	.abcgame_smshowgetreadycount {
		font-size: 200px;
	}
	.abcgame_smstarwrap {
		height: auto;
		margin-top: 6%;
	}
	.abcgame_smstar {
		height: 42px;
	}
	.abcgame_smclockWrap {
		transform: scale(.7, .7);
		margin-left: -9px;
	}
	.abcgame_sm_gameLFT {
		height: 70%;
	}
	.abcgame_sm_alphabetswrap {
		height: 21%;
	}
	.abcgame_sm_dropboxwrap {
		height: 50%;
	}
	.abcgame_sm_alphabets {
		width: 18%;
	}
	.abcgame_sm_drop {
		height: 43%;
		width: 18%;
	}
	.abcgame_sm_alphabets {
		height: 100%;
		font-size: 49px;
	}
	#smdraghb_0 {
		left: -16px;
	}
	.abcgame_horizontalbottom .abcgame_sm_drag {
		display: inline-block;
		text-align: center;
		margin-bottom: 9px;
		margin-right: 1.9%;
		width: 15%;
		height: 92%;
	}
	.abcgame_horizontalbottom {
		bottom: 11px;
		width: 95%;
		height: 11%;
		right: 7px;
	}
	.abcgame_smtimedetailsbox {
		width: 100%;
		font-size: 13px;
		height: 50px;
		background-size: 100% 100%;
		line-height: 18px;
	}
	.abcgame_smplayagainbtn2 {
		width: 100%;
		height: 100%;
		font-size: 17px;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.abcgame_switchtimer,
	.abcgame_smplayagainbtn2 {
		width: 100%;
		height: 100%;
		font-size: 13px;
	}
	.abcgame_smstar {
		height: 15%;
		width: 11%;
		margin-bottom: 1%;
	}
	.abcgame_smstar img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.abcgame_soundMatchContainerrow {
		height: 397px;
		width: 979px;
	}
	.abcgame_mainContainerOffset {
		width: 42%;
	}
	.abcgame_SMwtimer {
		width: 75%;
		height: 50px;
		font-size: 13px;
	}
	.abcgame_smlosetext {
		font-size: 22px;
	}
	.abcgame_sm_alphabets {
		height: 100%;
		font-size: 34px;
		line-height: 50px;
	}
	.abcgame_vertical .abcgame_sm_drag {
		margin-left: -2px;
		height: 10.4%;
	}
	.abcgame_vertical {
		top: 10px;
		right: 4px;
	}
	.abcgame_horizontalbottom {
		bottom: 6px;
		right: 4px;
	}
	#smdraghb_0 {
		left: -12px;
	}
	.abcgame_sidemenu {
		width: 26%;
	}
	.abcgame_smatoe {
		width: 38%;
		height: 11%;
		font-size: 16px;
		line-height: 37px;
	}
	.abcgame_sm_instruction_header {
		font-size: 18px;
	}
	.abcgame_sm_instruction_step {
		font-size: 12px;
	}
	.abcgame_sm_instruction_step {
		padding: 4% 1%;
		padding-right: 3%;
	}
	.abcgame_smplayagainwithtrophy {
		width: 28%;
	}
	.abcgame_smplayagainwithtrophy.abcgame_smpa {
		margin-left: 12%;
	}
	.abcgame_sm_feathers {
		width: 21%;
		height: 100%;
	}
	.abcgame_smclockWrap {
		transform: scale(.6, .6);
		margin-left: 3%;
		margin-top: -29%;
	}
	.abcgame_smtimedetails {
		font-size: 13px;
	}
	.abcgame_smplayagainbtn {
		height: 100%;
		font-size: 12px;
	}
	.abcgame_smshowgetready {
		font-size: 27px;
	}
	.abcgame_smshowgetreadycount {
		font-size: 100px;
	}
	.abcgame_smscoredetails {
		padding: 9px 0;
	}
	.abcgame_smnextlevelbtn {
		height: 50px;
		font-size: 11px;
	}
	.abcgame_smtrophy {
		height: 68%;
		width: 35%;
	}
	.abcgame_smcongrats {
		font-size: 16px;
	}
	.abcgame_sm_completedmsg {
		font-size: 14px;
		padding-top: 0%;
	}
	.tooltip {
		display: none !important;
	}
	.abcgame_smtimedetailswotimer {
		font-size: 15px;
	}
	.abcgame_smscoredetails2 {
		padding: 13px 0;
	}
}*/
/*------iphone 6 mobile landscape 667px ends---------*/
/*------iphone 6 plus mobile landscape starts---------*/
/*@media only screen and (min-device-width: 464px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
	.abcgame_soundMatchContainerwrap {
		margin-top: -20px;
		overflow: hidden;
		position: relative;
	}
}*/
/*------iphone 6 plus mobile landscape ends---------*/
/*------Laptop 680 starts---------*/

@media screen and (max-width: 1366px) and (min-width: 768px) {
    .abcgame_vertical .abcgame_sm_drag {
        height: 10.9%;
    }

    .abcgame_sm_alphabets {
        font-size: 39px;
        /*line-height: 78px;*/
    }

    .abcgame_smatoe {
        line-height: 56px;
    }

    .abcgame_smControlsWrap {
        height: 8%;
    }

    .abcgame_SMtimerparent {
        margin-top: 11%;
    }

    .abcgame_smscoredetails2 {
        padding: 7% 0;
    }

    .abcgame_smscoredetails_woscore {
        padding: 14% 0;
    }

    .abcgame_smscoredetails {
        padding-top: 4%;
    }

    .abcgame_smshowgetreadycount {
        font-size: 147px;
    }

    .abcgame_SMtimermodeparent {
        margin-top: 11%;
    }

    .abcgame_sminstructions {
        height: 9.5%;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smpa1 {
        height: 12%;
    }

}

/*------Laptop 680 ends---------*/
/*-------abcsm recommended screen starts------*/

.abcgame_smrecommendedgamewrap {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #DDFFFF;
    z-index: 50;
    padding: 7px;
    top: 0;
}

.abcgame_smrecommendedgame {
    height: 63%;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    position: relative;
    box-shadow: #ccc 1px 2px 8px 2px;
    margin-bottom: 1%;
}

.abcgame_smrecommendedgame img {
    width: 100%;
}

.abcgame_smoptionaltitle {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/gameoptional_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 8%;
    width: 41%;
    text-align: center;
    margin: 0 auto;
    font-size: 19px;
    line-height: 34px;
    color: #fff;
}

.abcgame_smoptionalgamewrap {
    width: 100%;
    height: 28%;
}

.abcgame_smoptionalgametable {
    display: flex;
    width: 100%;
    height: 100%;
}

.abcgame_smoptionalgamerow {
    display: table-row;
}

.abcgame_smoptionalgamelist {
    flex-basis: 100%;
    position: relative;
}

.abcgame_smrecommendedgame button,
.abcgame_smoptionalgamelist button {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/readingoptionalgameplay_button_Text.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.abcgame_smrecommendedgame button {
    width: 26%;
    height: 18%;
    position: absolute;
    bottom: 4%;
    border: navajowhite;
    color: #fff;
    font-size: 25px;
    background-position-y: 12px;
    left: 38%;
}

.abcgame_smoptionalgamelist button {
    width: 49%;
    height: 26%;
    position: absolute;
    border: none;
    bottom: 4%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background-position-y: 6px;
    left: 27%;
}

.abcgame_optgamethumbnail {
    height: 100%;
    width: 96%;
    margin-left: 2%;
    border: 2px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: #ccc 1px 2px 8px 2px;
}

.abcgame_optgamethumbnail img {
    width: 100%;
    height: 100%;
}

.abcgame_smrecommendedgamefull {
    height: 100%;
}

.abcgame_smrecommendedgameplay {
    height: 12%;
}

.abcgame_display {
    display: none;
}

/*-------abcsm recommended screen ends------*/
/*abc sm all mobile starts*/

@media only screen and (max-width: 767px) {
    .abcgame_sminstructions {
        top: 5%;
    }

    .tooltip {
        display: none !important;
    }

    .abcgame_smlogo {
        width: 200px;
        height: 48%;
        margin: 0 auto;
        background-repeat: no-repeat;
        margin-top: 9%;
        background-size: 100% 100%;
        margin-bottom: 4%;
    }

    .abcgame_maincontainer {
        width: 42%;
    }

    .abcgame_SMtimermode {
        width: 100%;
        height: 29px;
        font-size: 10px;
        padding-top: 6%;
        background-position-y: 1px;
    }

    .abcgame_soundMatchContainer {
        max-width: 1200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .abcgame_leftsmlogo {
        width: 47%;
        height: 30%;
    }

    .abcgame_smstar {
        font-size: 50px;
        margin: 3px;
        width: 21%;
    }

    .abcgame_smControlsWrap {
        height: 9%;
    }

    .abcgame_smcongrats {
        font-size: 25px;
    }

    .abcgame_sm_completedmsg {
        font-size: 23px;
    }

    .abcgame_smshowgetreadycount {
        font-size: 200px;
    }

    .abcgame_smstarwrap {
        height: auto;
        margin-top: 6%;
    }

    .abcgame_smstar {
        height: 42px;
    }

    .abcgame_smclockWrap {
        transform: scale(.7, .7);
        margin-left: -9px;
    }

    .abcgame_sm_gameLFT {
        height: 70%;
    }

    .abcgame_sm_alphabetswrap {
        height: 21%;
        margin-bottom: 6px;
    }

    .abcgame_sm_dropboxwrap {
        height: 50%;
    }

    .abcgame_sm_drop {
        height: 43%;
        width: 17%;
        margin-bottom: 2px;
        margin-right: 0px;
    }

    .abcgame_horizontalbottom .abcgame_sm_drag {
        display: inline-block;
        text-align: center;
        margin-right: 1.9%;
        width: 15%;
        height: 92%;
    }

    .abcgame_horizontalbottom {
        bottom: 11px;
        width: 95%;
        height: 11%;
        right: 7px;
    }

    .abcgame_smtimedetailsbox {
        width: 100%;
        font-size: 13px;
        height: 50px;
        background-size: 100% 100%;
        line-height: 18px;
    }

    .abcgame_smplayagainbtn2 {
        width: 100%;
        height: 100%;
        font-size: 17px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .abcgame_switchtimer,
    .abcgame_smplayagainbtn2 {
        width: 100%;
        height: 100%;
        font-size: 13px;
    }

    .abcgame_smstar {
        height: 15%;
        width: 11%;
        margin-bottom: 1%;
    }

    .abcgame_smstar img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .abcgame_soundMatchContainerrow {
        height: 100%;
        width: 100%;
    }

    .abcgame_mainContainerOffset {
        width: 42%;
    }

    .abcgame_SMwtimer {
        width: 84%;
        height: 32px;
        font-size: 10px;
    }

    .abcgame_smlosetext {
        font-size: 14px;
    }

    .abcgame_vertical .abcgame_sm_drag {
        margin-left: 1%;
        height: 9.6%;
        width: 94%;
        margin-bottom: 20%;
    }

    .abcgame_horizontalbottom {
        bottom: 3%;
        right: 4px;
        height: 12%;
        padding-right: .5%;
    }

    .abcgame_horizontalbottom #smdraghb_0 {
        left: -5px;
        border: 3px solid #93A831;
        height: 223%;
        top: -121%;
    }

    .abcgame_sidemenu {
        width: 26%;
    }

    .abcgame_smatoe {
        width: 33%;
        height: 11%;
        font-size: 11px;
        line-height: 22px;
    }

    .abcgame_sm_instruction_header {
        font-size: 9px;
    }

    .abcgame_sm_instruction_step {
        font-size: 8px;
    }

    .abcgame_sm_instruction_step {
        padding: 4% 1%;
        padding-right: 3%;
    }

    .abcgame_smplayagainwithtrophy {
        width: 28%;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smpa {
        margin-left: 12%;
    }

    .abcgame_sm_feathers {
        width: 21%;
        height: 100%;
    }

    .abcgame_smclockWrap {
        transform: scale(.6, .6);
        margin-left: 3%;
        margin-top: -29%;
    }

    .abcgame_smtimedetails {
        font-size: 13px;
    }

    .abcgame_smplayagainbtn {
        height: 100%;
        font-size: 12px;
    }

    .abcgame_smshowgetready {
        font-size: 27px;
    }

    .abcgame_smscoredetails {
        padding: 9px 0;
    }

    .abcgame_smnextlevelbtn {
        height: 50px;
        font-size: 11px;
    }

    .abcgame_smtrophy {
        height: 68%;
        width: 35%;
    }

    .abcgame_smcongrats {
        font-size: 16px;
    }

    .abcgame_sm_completedmsg {
        font-size: 14px;
        padding-top: 0%;
    }

    .tooltip {
        display: none !important;
    }

    .abcgame_smtimedetailswotimer {
        font-size: 15px;
    }

    .abcgame_smscoredetails2 {
        padding: 13px 0;
    }

    .abcgame_smcontrols {
        width: 11%;
    }

    .abcgame_smrepeatletter {
        width: 45%;
        height: 10%;
        font-size: 8px;
        padding-top: 3%;
        margin: 0 auto;
        margin-top: 9%;
        line-height: 11px;
    }

    .abcgame_sm_alphabets {
        width: 17%;
        height: 100%;
        font-size: 11px;
        margin-right: 4px;
    }

    .abcgame_smTimerWrap {
        height: 29%;
        background-position-y: -20px;
    }

    .abcgame_smtimedetails {
        font-size: 8px;
    }

    .abcgame_smtimedetailsbox {
        width: 96%;
        font-size: 8px;
        height: 21px;
    }

    .abcgame_smshowgetreadycount {
        font-size: 70px;
    }

    .abcgame_smclockWrap {
        margin-left: -15%;
        position: relative;
        top: 58%;
        background-image: none !important;
        transform: translateY(-50%) scale(0.3);
    }

    .abcgame_smplayagainbtn,
    .abcgame_smtimedetailswotimer {
        font-size: 9px;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smpa {
        margin-left: 20%;
        height: 30px;
    }

    .abcgame_smnextlevelbtn {
        height: 30px;
        font-size: 8px;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smnl {
        height: 30px;
    }

    .abcgame_smplayagainwithtrophy {
        width: 31%;
    }

    .abcgame_smplayagainbtn2 {
        background-position-y: 1px;
    }

    .abcgame_soundMatchContainerwrap {
        margin-top: 5px;
    }

    .abcgame_soundMatchContainerwrap {
        overflow: hidden;
    }

    .abcgame_vertical {
        padding-top: 1%;
        padding-left: 1%;
        padding-right: .5%;
        top: 4px;
        right: 4px;
    }

    .abcgame_smplayagain {
        width: 31%;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
        height: 11%;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smpa1 {
        height: 11%;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smnl1 .abcgame_smnextlevelbtn {
        height: 100%;
    }

    .abcgame_smplayagainwithtrophy.abcgame_smnl1 {
        height: 11%;
    }

    .abcgame_sm_instruction_step ol li {
        margin-bottom: 4%;
        width: 80%;
    }
}

@media only screen and (min-width: 768px) {

    .abcgame_sm_LL,
    .abcgame_sm_RL,
    .abcgame_sm_PL {
        display: block;
    }

    .abcgame_sm_LP,
    .abcgame_sm_RP,
    .abcgame_sm_PP {
        display: none;
    }
}

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

    .abcgame_sm_LP,
    .abcgame_sm_RP,
    .abcgame_sm_PP {
        display: none;
    }

    .abcgame_sm_LL,
    .abcgame_sm_RL,
    .abcgame_sm_PL {
        display: block;
    }

    .abcgame_soundMatchContainer,
    .abcgame_soundMatchContainerrow,
    .abcgame_maincontainer {
        height: 100% !important;
    }

    .abcgame_mainContainerOffset {
        float: none;
        margin: 0 auto;
    }
}

/*mobile portrait starts*/

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

    .abcgame_sm_LP,
    .abcgame_sm_RP,
    .abcgame_sm_PP {
        display: block;
    }

    .abcgame_sm_LL,
    .abcgame_sm_RL,
    .abcgame_sm_PL {
        display: none;
    }

    .abcgame_mainContainerOffset {
        margin: 0 auto;
        float: none;
    }

    .abcgame_smtop {
        height: 10%;
        width: 100%;
        padding: 0 18%;
        padding-top: 1%;
        padding-bottom: 1%;
    }

    .abcgame_smleftsmwrap.abcgame_sm_LP {
        height: 100%;
        width: 100%;
        position: relative;
    }

    .abcgame_sm_LPlogo {
        width: 17%;
        height: 100%;
        float: left;
    }

    .abcgame_leftsmlogo {
        width: 100%;
        height: 100%;
    }

    .abcgame_sm_Lcontrols {
        width: 13%;
        height: 88%;
        float: left;
        position: absolute;
        right: 0%;
    }

    .abcgame_sm_LP .abcgame_sm_Lsmatoe {
        width: 17%;
        float: left;
        height: 65%;
        margin-left: 26%;
    }

    .abcgame_sm_LP .abcgame_smatoe {
        width: 100%;
        height: 100%;
    }

    .abcgame_maincontainer {
        margin: 0 auto;
        float: none;
    }

    .abcgame_smbottom.ng-scope {
        width: 100%;
        height: auto;
    }

    .abcgame_smControlsRightWrap.abcgame_sm_RPwrap {
        width: 100%;
        height: auto;
    }

    .abcgame_sm_RPwrap .abcgame_smstarwrap {
        width: 30%;
        float: left;
    }

    .abcgame_smstar {
        font-size: 48px;
        width: 11%;
        margin-bottom: 1%;
        height: 34%;
        margin: 0 .5%;
    }

    .abcgame_sm_RP_repeatsound {
        width: 23%;
        float: left;
        margin: 0 6%;
    }

    .abcgame_sm_RP_repeatsound .abcgame_smrepeatletter {
        width: 100%;
        height: 28px;
        padding-top: 9%;
    }

    .abcgame_sm_RP_timer {
        width: 30%;
        float: left;
        text-align: center;
    }

    .abcgame_sm_bottom_RP {
        position: relative;
        z-index: 10;
        padding: 0 8%;
    }

    .abcgame_sm_RP_timer .abcgame_smtimeRemainlabel {
        font-size: 10px;
    }

    .abcgame_sm_RP_timer .abcgame_smcountdown {
        font-size: 14px;
        top: 59%;
        color: #000;
        background: #D0D8A0;
        padding: 2%;
        border-radius: 8px;
        width: 25%;
        margin: 0 auto;
        margin-bottom: 2%;
    }

    .abcgame_sm_RP_timer .abcgame_smtimeModelabel {
        top: 63%;
        font-size: 10px;
    }

    .abcgame_smtimeMode {
        font-size: 11px;
    }

    .abcgame_soundMatchContainerrow {
        display: block;
    }

    .abcgame_sm_RP_controlswrap {
        text-align: center;
        margin-top: 6%;
    }

    .abcgame_sm_RP_controlswrap .abcgame_smcontrols {
        width: 48%;
        height: 34px;
    }

    .abcgame_smtimeMode {
        color: #fff;
    }

    .abcgame_smtimeModelabel {
        color: #ADEB07;
    }

    .abcgame_smtimeRemainlabel {
        margin: 2% 0;
    }
}

/*mobile portrait ends*/
/*abc sm all mobile ends*/
/** abc game sound match ends **/
/** abc game bingo starts **/

.bingorightWrap {
    height: 100%;
}

.bingoContainer input[type="button"],
.bingoContainer button {
    background-color: transparent;
}

.bingowrapparent {
    width: 100%;
    height: 100%;
}

.bingoContainer input {
    background: none;
}

.bingoContainer * {
    outline: transparent;
}

.bingoContainer {
    width: 100%;
    /*height: 600px;*/
    margin: 0 auto;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/bingo/images/bingo_gamebg.png);
    background-size: 100% 100%;
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bingoContainerrow {
    width: 1366px;
    height: 600px;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.bingoAudio {
    display: none;
}

.bingoplayarea {
    border: 9px solid #075267;
    background: #075267;
}

.bingomaincontainer {
    width: 600px;
    background-size: 100% 100%;
}

.bingosidemenu {
    width: 28%;
}

.bingomaincontainer,
.bingosidemenu {
    height: 100%;
    float: left;
    position: relative;
    color: #fff;
}

.bingoinstruction_overlay {
    width: 100%;
    height: 100%;
}

.bingoinstruction_popup {
    position: relative;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.bingomainContainerOffset {
    margin-left: 0;
}

.bingocountdown,
.bingostar {
    font-size: 50px;
}

.bingostar {
    font-size: 50px;
    display: inline-block;
}

.bingooverlay0 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0ms;
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.bingooverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.bingooverlayblock {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    position: absolute;
}

.bingoshowgetready {
    position: absolute;
    color: #fff;
    top: 44%;
    font-size: 40px;
    left: 49%;
}

.bingoflipcard {
    width: 31.7%;
    height: 32.2%;
    text-align: center;
    font-size: 66px;
    display: inline-block;
    cursor: pointer !important;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    border-radius: 10px;
    margin-right: 1%;
    margin-top: 5px;
    overflow: hidden;
}

.bingoflipcard div {
    border-radius: 10px;
}

.bingoflippedfront {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-transition: 0.3s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.3s;
    transform-style: preserve-3d;
    animation: bingofronthide 0.1s;
    animation-fill-mode: both;
}

@keyframes bingofronthide {
    90% {
        opacity: .5;
    }

    100% {
        opacity: 0;
    }
}

.bingoback {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    width: 100%;
    position: absolute;
    top: 0;
    height: 100%;
}

.bingoflippedback {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: 0.3s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 0.3s;
    transform-style: preserve-3d;
    animation: bingobackshow 0.3s;
    animation-fill-mode: both;
}

@keyframes bingobackshow {
    50% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }
}

.bingofront {
    position: absolute;
    z-index: 2;
    background: #fff;
    width: 100%;
    left: 0;
    height: 100%;
    background: #C9EFFC;
    color: #000;
    
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.bingoback img {
    width: 100%;
    height: 100%;
}

.bingomatrix {
    border: none;
    background-size: 100% 100%;
    width: 65%;
    height: 100%;
    color: #fff;
    font-size: 26px;
    
    text-indent: 32px;
    background-position-y: 4px;
    background-repeat: no-repeat;
}

.bingologo {
    width: 81%;
    height: 69%;
    margin: 0 auto;
    margin-top: 9%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.bingohomebuttonswrap {
    margin-top: 4%;
    height: 12%;
}

.bingohomebuttons:first-child {
    text-align: right;
    padding-right: 3%;
}

.bingohomebuttons {
    text-align: left;
    padding-left: 2%;
    height: 100%;
}

.bingoi {
    width: 10%;
    height: 10%;
    position: absolute;
    top: 2%;
    right: 2%;
    cursor: pointer !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.bingocasetext {
    width: 79%;
    height: 70px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 10%;
    text-align: center;
    margin-top: 35%;
    font-size: 37px;
    color: #fff;
    -webkit-animation: bounce-in .5s ease 0s 1 normal;
    animation: bounce-in .5s ease 0s 1 normal;
}

.bingotypewrap {
    margin-top: 3%;
    height: 13%;
}

.bingocasebuttons {
    height: 100%;
}

.bingocasewrap {
    margin-top: 4%;
    -webkit-animation: bounce-in .5s ease 0s 1 normal;
    animation: bounce-in .5s ease 0s 1 normal;
}

.bingocasebuttons:first-child {
    text-align: right;
}

.bingocase {
    width: 65%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 26px;
    
}

.bingotype {
    width: 88%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 100%;
    border: none;
    color: #fff;
    text-align: center;
    font-size: 23px;
    
    background-position-y: 5px;
}

@-webkit-keyframes bounce-in {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
    }

    70% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes bounce-in {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        opacity: 1;
        transform: scale(1.0);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

.lowercaseSelected {
    text-transform: lowercase;
}

.uppercaseSelected {
    text-transform: uppercase;
}

.bingowrap {
    width: 100%;
    height: 100%;
}

.bingo_instruction_content {
    width: 85%;
    height: 46%;
    position: relative;
    background-repeat: no-repeat;
    top: 17%;
    padding-top: 11%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 10%;
    text-align: center;
    background-size: 100% 100%;
    margin: 0 auto;
}

.bingo_instruction_header {
    color: #fff;
    font-size: 27px;
    
    position: absolute;
    top: -19px;
    background-repeat: no-repeat;
    width: 45%;
    height: 20%;
    background-size: 100% 100%;
    left: 27%;
    line-height: 50px;
}

.bingo_instruction_step {
    font-size: 26px;
    color: #000;
    height: 52%;
    padding-left: 9%;
    padding-right: 7%;
    padding-bottom: 6%;
    cursor: default;
    padding-top: 4%;
    text-align: center;
}

.bingo_closeinstruction {
    width: 10%;
    height: 20%;
    background-repeat: no-repeat;
    font-size: 36px;
    border: none;
    background-size: 100% 100%;
    position: absolute;
    top: -6%;
    right: -3%;
}

.bingo_instruction_content {
    -moz-animation: bingoappear 1s ease 0s 1 normal;
    -ms-animation: bingoappear 1s ease 0s 1 normal;
    -webkit-animation: bingoappear 1s ease 0s 1 normal;
    animation: bingoappear 1s ease 0s 1 normal;
}

@-webkit-keyframes bingoappear {
    0% {
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@-ms-keyframes bingoappear {
    0% {
        -ms-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -ms-transform: scale3d(1, 1, 1);
    }
}

@-moz-keyframes bingoappear {
    0% {
        -moz-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -moz-transform: scale3d(1, 1, 1);
    }
}

@keyframes bingoappear {
    0% {
        transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        transform: scale3d(1, 1, 1);
    }
}

.bingocaseupper {
    color: #727272;
}

.bingomaincontainerContent {
    width: 100%;
    height: 100%;
}

.bingoTellerWrap {
    width: 100%;
    height: 43%;
    padding-left: 15%;
    padding-right: 15%;
    margin-top: 18%;
    position: relative;
}

.bingoteller {
    width: 96%;
    height: 87%;
    background-repeat: no-repeat;
    display: block;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-bottom: 16%;
}

.bingorepeattelling {
    width: 93%;
    height: 27%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 17px;
    
    cursor: pointer !important;
    margin: 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    background-position-y: 6px;
    padding-left: 6%;
}

.bingoflipcardwrap {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
    position: relative;
}

.bingoflipcardcont {
    background: #fff;
    border-radius: 8px;
    padding: 10px 0;
    margin: 0 auto;
    width: 100%;
    text-align: center;
    padding-left: 6px;
    padding-top: 4px;
    height: 100%;
}

.bingoflipcardcont4 {
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 12px;
}

.bingoleflogo {
    width: 60%;
    height: 33%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 9%;
    margin-bottom: 9%;
}

.bingolefcasedetail {
    width: 55%;
    height: 10%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: 4px;
}

.bingolefcasedetail div {
    width: 100%;
    text-align: center;
    font-size: 26px;
    padding-top: 5%;
}

.bingoControlsWrap {
    width: 87%;
    height: 11%;
    margin-left: 7%;
    margin-top: 9%;
    text-align: center;
}

.bingocontrols {
    width: 16%;
    height: 84%;
    cursor: pointer;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 100% 100%;
    margin-right: 7%;
}

.bingowrongEffect {
    -webkit-animation: wrongscaleimg .2s;
    -moz-animation: wrongscaleimg .2s;
    -ms-animation: wrongscaleimg .2s;
    animation: wrongscaleimg .2s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-webkit-keyframes wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-ms-keyframes wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

@-moz-keyframes wrongscaleimg {
    0% {
        transform: skewX(9deg);
    }

    10% {
        transform: skewX(-8deg);
    }

    20% {
        transform: skewX(7deg);
    }

    30% {
        transform: skewX(-6deg);
    }

    40% {
        transform: skewX(5deg);
    }

    50% {
        transform: skewX(-4deg);
    }

    60% {
        transform: skewX(3deg);
    }

    70% {
        transform: skewX(-2deg);
    }

    80% {
        transform: skewX(1deg);
    }

    90% {
        transform: skewX(0deg);
    }

    100% {
        transform: skewX(0deg);
    }
}

.correctEffectborder {
    border: 5px solid #00B4FF;
}

.correctEffect {
    -webkit-animation: correctimageEffectanim .5s;
    -moz-animation: correctimageEffectanim .5s;
    -ms-animation: correctimageEffectanim .5s;
    animation: correctimageEffectanim .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-webkit-keyframes correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-moz-keyframes correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

@-ms-keyframes correctimageEffectanim {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.2, 1.2);
    }

    100% {
        transform: scale(1, 1);
    }
}

.bingoimage {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bingoimageRL3 {
    width: 96%;
    height: 93%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    margin-left: 9px;
    margin-top: 20px;
}

.bingoimageH3 {
    margin-top: 20px;
    width: 600px;
    height: 140px;
}

.bingoimageV3 {
    margin-left: 3%;
    margin-top: -4%;
    height: 102%;
    width: 22%;
}

.bingoimageRL4 {
    width: 96%;
    height: 93%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    margin-left: 9px;
    margin-top: 12px;
}

.bingoflipcard4 {
    width: 23.4%;
    height: 23.8%;
    font-size: 58px;
}

.bingoimageH4 {
    margin-top: 6px;
    width: 600px;
    height: 140px;
}

.bingoimageV4 {
    margin-left: 3%;
    margin-top: 4px;
    height: 94%;
    width: 17%;
}

.bingoback4 {
    top: 2px
}

.bingoback4 img {
    width: 96%;
    height: 96%;
}

.tooltip .bingocustomClass .tooltip-inner {
    color: #fff;
    background-color: #423f3f;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.bingocustomClass {
    top: 90px !important;
}

.bingocustomClassi {
    top: 65px !important;
    z-index: 7 !important;
}

.bingodefaultcursor {
    cursor: default;
}

.bingoscoredetailcol {
    width: 50%;
    float: left;
    text-align: center;
    font-size: 22px;
    color: #131111;
}

.bingoScoreboard {
    width: 88%;
    height: 57%;
    -webkit-animation: bingoscoreboardanim .5s;
    -moz-animation: bingoscoreboardanim .5s;
    -ms-animation: bingoscoreboardanim .5s;
    animation: bingoscoreboardanim .5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    top: 5%;
}

@-webkit-keyframes bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

@-moz-keyframes bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

@-ms-keyframes bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

@keyframes bingoscoreboardanim {
    100% {
        margin-top: 11%;
    }
}

.bingoscoredetailbox {
    height: 100%;
    padding: 17% 4%;
    color: #000;
    padding-top: 4%;
    padding-bottom: 11%;
}

@-webkit-keyframes bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes bingofadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.bingoscorewordno {
    width: 33%;
    float: left;
    text-align: center;
    height: 51%;
    margin-top: 9%;
}

.bingoscorewordnoscore {
    width: 50%;
    float: left;
    text-align: center;
    height: 100%;
}

.bingoscoreword {
    font-size: 22px;
    text-align: center;
    
    margin-bottom: 7%;
}

.bingoscorenocorrect {
    background: #FFC15C;
}

.bingoscorenoincorrect {
    background: #93C958;
}

.bingoscorenopercentage {
    background: #4FDBFF;
}

.bingoscoreno {
    color: #000;
    
    width: 78%;
    height: 41%;
    margin: 0 auto;
    font-size: 26px;
    text-align: center;
    padding-top: 4%;
    margin-top: 8%;
    border: 2px solid #8168FF;
    border-radius: 29px;
}

.bsp {
    font-size: 24px;
}

.scoredetailswrapbtn {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    left: 0;
    top: 0;
    background-size: 100% 100%;
    border: none;
    z-index: 111;
    background-position-y: 4px;
}

.scoredetailsbtnwrap {
    width: 40%;
    height: 29%;
    font-size: 27px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    position: relative;
    clear: both;
}

.scoredetailsbtn {
    width: 43%;
    height: 26%;
    background-repeat: no-repeat;
    font-size: 27px;
    border: none;
    text-align: center;
    background-size: 100%100%;
    color: #fff;
    margin: 0 auto;
    display: block;
}

.detailscorebingowrap {
    height: 60%;
    margin-bottom: 3%;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 3%;
    position: relative;
}

.detailscorebingo {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 111;
    left: 0;
    top: 0;
}

.closescorebingo {
    position: absolute;
    top: -3%;
    right: -1%;
    cursor: pointer !important;
    z-index: 111;
    width: 10%;
    height: 17%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.bingoscorewordnoscorewrap {
    width: 83%;
    height: 14%;
    margin: 0 auto;
}

.wrongbingoans {
    color: #f00;
}

.bingooverlayblockblue {
    background: #0F2332;
    position: absolute;
    opacity: 1;
    width: 100%;
    height: 100%;
}

.scoredetailbtn {
    position: relative;
    width: 40%;
    height: 100%;
    background-repeat: no-repeat;
    top: 0;
    background-size: 100% 100%;
    border: none;
    z-index: 111;
    background-position-y: 4px;
}

.scoredetailsbtnwrap1 {
    width: 100%;
    height: 29%;
    font-size: 27px;
    text-align: center;
    color: #fff;
    margin: 0 auto;
    position: relative;
    clear: both;
}

.bingodetail {
    margin-left: 2%;
}

.bingoplayagain {
    left: 0;
    margin-left: 1%;
}

.splashwrap {
    height: 100%;
    width: 100%;
}


/*----------------ipad both starts-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .bingoshortvowel {
        padding: 0 !important;
    }

    .scoredetailsbtnwrap1,
    .scoredetailsbtnwrap {
        font-size: 18px !important;
    }

    .bingoscoreword {
        font-size: 16px !important;
    }

    .bingoscoredetailcol {
        font-size: 20px !important;
    }

    .bingo_instruction_header {
        font-size: 23px !important;
    }

    .bingo_instruction_step {
        font-size: 19px !important;
    }

    .bingo_closeinstruction {
        font-size: 23px !important;
    }

    .bingolefcasedetail div {
        font-size: 24px;
    }

    .bingotype {
        font-size: 18px !important;
    }

    .bingoimageH3 {
        width: 100%;
    }
}


/*----------------ipad both endss-----------------*/


/*----------------ipad landscape starts-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .bingoContainerrow {
        width: 100%;
        margin: 0 auto;
        height: 600px;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .bingomaincontainer {
        width: 80%;
        height: 100%;
    }

    .bingomainContainerOffset {
        width: 59%;
        margin-left: 0;
    }

    .bingoleflogo {
        height: 22%;
    }

    .bingolefcasedetail {
        width: 76%;
        height: 9%;
    }

    .bingolefcasedetail div {
        font-size: 18px;
    }

    .bingoControlsWrap {
        width: 87%;
        height: 10%;
    }

    .bingocontrols {
        width: 30%;
    }

    .bingoteller {
        width: 85%;
    }

    .bingoTellerWrap {
        height: 27%;
    }

    .tooltip {
        display: none !important;
    }

    .bingorepeattelling {
        width: 98%;
        height: 24%;
        top: 31%;
        right: 16%;
        font-size: 9px !important;
    }

    .bingomatrix,
    .bingotype {
        font-size: 15px;
    }

    .bingoflipcard4 {
        height: 23.6% !important;
    }
}


/*----------------ipad landscape ends-----------------*/


/*----------------ipad portrait starts--------------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .bingomaincontainer {
        width: 60% !important;
        height: 81% !important;
    }

    .bingoContainerrow {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100% !important;
        height: 600px !important;
    }

    .bingosidemenu {
        width: 19% !important;
        height: 70% !important;
    }

    .bingolefcasedetail div {
        font-size: 10px !important;
    }

    .bingorepeattelling {
        width: 95% !important;
        height: 26%;
        font-size: 8px !important;
        line-height: 22px !important;
    }

    .bingomatrix,
    .bingotype {
        font-size: 14px !important;
    }

    .bingoleflogo {
        height: 21% !important;
    }

    .bingolefcasedetail {
        height: 6% !important;
        line-height: 22px;
    }

    .bingocontrols {
        width: 26%;
    }

    .bingoControlsWrap {
        height: 9%;
    }

    .bingoTellerWrap {
        width: 100%;
        height: 26%;
    }

    .bingoteller {
        width: 100%;
        height: 100%;
    }

    .tooltip {
        display: none !important;
    }

    .bingoContainerrow {
        margin-top: 90px !important;
    }

    .bingoselectmenusequence {
        font-size: 17px !important;
    }

    .bingoselectmenusequencewrap {
        height: 63% !important;
    }

    .bingoflipcard {
        height: 31.5% !important;
    }

    .bingoflipcard4 {
        height: 23.5% !important;
        width: 23% !important;
        font-size: 48px !important;
    }

    .bingoflipcard5 {
        height: 18% !important;
        width: 17% !important;
    }
}


/*@media screen and (max-width: 768px) {
  .bingomaincontainer {
    width: 80%;
    height: 96%;
  }
  .bingomainContainerOffset {
    margin: 0 auto;
    margin-left: 0;
    width: 600px !important;
    height: 600px !important;
  }
  .bingoContainer {
    width: 600px !important;
    height: 600px !important;
  }
  .bingoContainerrow {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .bingosidemenu {
    width: 19%;
    height: 470px;
  }
  .bingoflipcardcont {
    padding-top: 5px;
  }
  .bingomaincontainer {
    width: 61%;
    height: 470px;
  }
  .bingoleflogo {
    width: 100%;
    height: 26%;
  }
  .bingolefcasedetail {
    width: 83%;
    height: 11%;
  }
  .bingolefcasedetail div {
    font-size: 14px;
    padding-top: 10%;
  }
  .bingocontrols {
    width: 34%;
  }
  .bingoControlsWrap {
    width: 87%;
    height: 9%;
  }
  .bingofront {
    padding-top: 17%;
  }
  .bingoTellerWrap {
    width: 100%;
    height: 37%;
    padding-left: 0%;
    padding-right: 0%;
    margin-top: 15%;
  }
  .bingoteller {
    width: 74%;
    height: 100%;
  }
  .bingorepeattelling {
    width: 70%;
    height: 23%;
    top: 31%;
    right: 16%;
    padding: 7% 0% 0 14%;
    font-size: 12px;
  }
  .bingoscoreword {
    font-size: 17px;
  }
  .bingoscoreno {
    width: 66%;
    height: 51px;
    font-size: 23px;
    padding-top: 8%;
    margin-top: 11%;
  }
  .bsp {
    font-size: 20px;
  }
  .scoredetailsbtnwrap1,
  .bingoscoredetailcol,
  .scoredetailsbtnwrap {
    font-size: 18px;
  }
  .closescorebingo {
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .bingoflipcardcont4 {
    padding-bottom: 17px;
  }
}*/


/*----------------ipad portrait ends--------------------*/


/*------iphone 6 mobile landscape 667px---------*/


/*
@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
	.bingoselectmenusequence .bingoscorewordnoscorewrap {
		width: 100%;
	}
	.bingoscoreword {
		font-size: 13px !important;
	}
	.bingoContainerrow {
		width: 100%;
		margin: 0 auto;
		height: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 3px !important;
	}
	.bingomainContainerOffset {
		margin-left: 0;
	}
	.bingomaincontainer {
		width: 47%;
		height: 98% !important;
	}
	.bingomatrix {
		font-size: 17px;
	}
	.bingotype {
		font-size: 15px;
		text-indent: -4px;
	}
	.bingoi {
		width: 9%;
	}
	.bingolefcasedetail div {
		font-size: 16px;
		padding-top: 8%;
	}
	.bingorepeattelling {
		width: 96%;
		font-size: 12px;
	}
	.bingoflipcardcont {
		background: #fff;
		border-radius: 8px;
		width: 99%;
		padding-left: 1%;
		padding-top: 1%;
		height: 100%;
	}
	.bingoflipcard4 {
		font-size: 42px;
		height: 23.4% !important;
	}
	.scoredetailsbtnwrap1,
	.scoredetailsbtnwrap,
	.bingoscoredetailcol {
		font-size: 17px;
	}
	.bingoscoreno {
		font-size: 16px;
	}
	.bsp {
		font-size: 14px;
	}
	.bingo_instruction_header {
		font-size: 19px;
	}
	.bingo_instruction_step {
		font-size: 16px;
	}
	.bingo_closeinstruction {
		width: 37%;
		height: 23%;
		font-size: 17px;
		background-size: 100% 100%;
		margin-top: 17px;
	}
	.tooltip {
		display: none !important;
	}
	.bingoimageH3 {
		width: 100%;
		height: 23%;
	}
	.bingoselectmenusequence {
		font-size: 13px !important;
		padding: 8px !important;
	}
	.bingoselectmenusequencewrap {
		height: 63% !important;
		padding-top: 2% !important;
	}
	.bingologo {
		width: 69%;
	}
	.bingofront5 {
		padding-top: 17%;
	}
	.bingoflipcard5 {
		width: 18% !important;
		height: 18% !important;
		font-size: 28px !important;
	}
}*/


/*------iphone 6 mobile landscape 667px ends---------*/


/*------iphone 6 mobile portrait 667px---------*/


/*@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: portrait) {
	.bingomaincontainer {
		width: 80%;
	}
	.bingomainContainerOffset {
		margin-right: 0;
		width: 46%;
	}
	.bingoContainerrow {
		width: 980px;
	}
	.bingomaincontainer,
	.bingosidemenu {
		height: 71%;
	}
	.tooltip {
		display: none !important;
	}
	.bingoimageH3 {
		width: 100%;
		height: 23%;
	}
}*/


/*------iphone 6 mobile portrait 667px ends---------*/


/*------iphone 6 plus mobile landscape starts---------*/


/*@media only screen and (min-device-width: 464px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
	.bingoContainer {
		margin-top: -10px;
	}
	.bingoflipcard5 {
		width: 18% !important;
		height: 18% !important;
		font-size: 28px !important;
	}
}*/


/*------iphone 6 plus mobile landscape ends---------*/


/*----laptop L1 starts-----*/

@media screen and (max-width:1366px) and (min-width:768px) {
    .bingoContainerrow {
        height: 99%;
        margin-top: -7px;
    }
}


/*----laptop L1 ends-----*/


/*-------mennu screen starts------*/

.bingoselectmenuwrap {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    top: 0;
}

.bingoselectmenuoverlay {
    opacity: .9;
    background: #075267;
    position: absolute;
    width: 100%;
    height: 100%;
}

#bingoselectmenulogo {
    width: 24%;
    margin-top: 5%;
    height: 100%;
}

.bingoselectmenulogowrap {
    width: 100%;
    height: 24%;
    margin-bottom: 5%;
}

.bingoselectmenusequence {
    width: 24%;
    float: left;
    padding: 10px;
    text-align: center;
    font-size: 21px;
    cursor: pointer;
    margin-right: 5%;
    margin-left: 4%;
}

.bingoselectmenuoverallwrap {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bingoselectmenusequence:hover {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/bingo/images/bingo_letter_name.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position-y: 3px;
}

.bingoselectmenusequencewrap {
    border: 1px solid #32928c;
    width: 98%;
    height: 65%;
    margin-left: 1%;
    border-radius: 8px;
    padding-top: 4%;
}


/*-------mennu screen ends------*/

.bingohomebuttonsaz .bingohomebuttons .bingomatrix {
    width: 100%;
}

.bingoflipcard5 {
    width: 18.4%;
    height: 18.8%;
    font-size: 35px;
}

.bingoimageV5 {
    margin-left: 1%;
    margin-top: 11px;
    height: 94%;
    width: 17%;
}

.bingoimageH5 {
    width: 600px;
    height: 140px;
}

.bingoimageLR5 {
    width: 96%;
    height: 93%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 0px;
    left: 0px;
    margin-left: 9px;
    margin-top: 30px;
}

@media screen and (max-width:1366px) and (min-width:680px) {
    .bingoselectmenusequencewrap {
        height: 63%;
    }

    .bingoselectmenusequence {
        font-size: 21px;
    }

    .bingoflipcard5 {
        height: 18.6%;
    }

    .bingorepeattelling {
        height: 31%;
    }
}


/*-------abcbingo recommended screen starts------*/

.bingorecommendedgamewrap {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #DDFFFF;
    z-index: 50;
    padding: 7px;
    top: 0;
}

.bingorecommendedgame {
    height: 63%;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    position: relative;
    box-shadow: #ccc 1px 2px 8px 2px;
    margin-bottom: 1%;
}

.bingorecommendedgame img {
    width: 100%;
}

.bingooptionaltitle {
    background-image: url(../../app/assets/images/gameoptional_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 8%;
    width: 41%;
    text-align: center;
    margin: 0 auto;
    font-size: 19px;
    line-height: 34px;
    color: #fff;
}

.bingooptionalgamewrap {
    width: 100%;
    height: 28%;
}

.bingooptionalgametable {
    display: flex;
    width: 100%;
    height: 100%;
}

.bingooptionalgamerow {
    display: table-row;
}

.bingooptionalgamelist {
    flex-basis: 100%;
    position: relative;
}

.bingorecommendedgame button,
.bingooptionalgamelist button {
    background-image: url(../../app/assets/images/optionalgameplay_button_Text.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bingorecommendedgame button {
    width: 26%;
    height: 18%;
    position: absolute;
    bottom: 4%;
    border: navajowhite;
    color: #fff;
    font-size: 25px;
    background-position-y: 12px;
    left: 38%;
}

.bingooptionalgamelist button {
    width: 49%;
    height: 26%;
    position: absolute;
    border: none;
    bottom: 4%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background-position-y: 6px;
    left: 27%;
}

.optgamethumbnail {
    height: 100%;
    width: 96%;
    margin-left: 2%;
    border: 2px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: #ccc 1px 2px 8px 2px;
}

.optgamethumbnail img {
    width: 100%;
    height: 100%;
}

.bingorecommendedgamefull {
    height: 100%;
}

.bingorecommendedgameplay {
    height: 12%;
}

.display {
    display: none;
}

.recommendedbadge {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/gamerecommended_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1%;
    width: 33%;
    height: 19%;
    right: 2%;
}


/*-------abcbingo recommended screen ends------*/


/*abc bingo for all mobiles starts*/

@media only screen and (max-device-width: 767px) {
    .bingoselectmenusequence .bingoscorewordnoscorewrap {
        width: 100%;
    }

    .bingoscoreword {
        font-size: 9px;
    }

    .bingomainContainerOffset {
        margin-left: 0;
    }

    .bingomatrix {
        font-size: 11px;
    }

    .bingotype {
        font-size: 15px;
        text-indent: -4px;
    }

    .bingoi {
        width: 9%;
    }

    .bingolefcasedetail div {
        font-size: 16px;
        padding-top: 8%;
    }

    .bingorepeattelling {
        width: 83%;
        font-size: 10px;
    }

    .bingoflipcardcont {
        background: #fff;
        border-radius: 8px;
        width: 99%;
        padding-left: 1%;
        padding-top: 1%;
        height: 100%;
    }

    .bingoflipcard4 {
        font-size: 22px !important;
        height: 22% !important;
        width: 22% !important;
    }

    .scoredetailsbtnwrap1,
    .scoredetailsbtnwrap,
    .bingoscoredetailcol {
        font-size: 11px;
    }

    .bingoscoreno {
        font-size: 11px;
    }

    .bsp {
        font-size: 11px;
    }

    .bingo_instruction_step {
        font-size: 10px;
    }

    .bingo_closeinstruction {
        width: 37%;
        height: 23%;
        font-size: 17px;
        background-size: 100% 100%;
        margin-top: 17px;
    }

    .tooltip {
        display: none !important;
    }

    .bingoimageH3 {
        width: 100%;
        height: 23%;
    }

    .bingoselectmenusequence {
        font-size: 13px !important;
        padding: 8px !important;
    }

    .bingoselectmenusequencewrap {
        height: 63% !important;
        padding-top: 2% !important;
    }

    .bingologo {
        width: 69%;
    }

    .bingoflipcard5 {
        width: 17% !important;
        height: 16.5% !important;
        font-size: 16px !important;
    }

    .bingoflipcard {
        width: 31%;
        height: 31%;
        font-size: 26px;
    }

    .bingolefcasedetail {
        width: 31%;
    }

    .bingoleflogo {
        height: 44%;
    }

    .bingoControlsWrap {
        height: 13%;
    }

    .bingoTellerWrap {
        margin-top: 7%;
    }

    .bingoteller {
        margin-bottom: 8%;
    }

    .bingohomebuttons {
        padding-left: 6%;
    }

    .bingohomebuttons:first-child {
        padding-right: 0;
    }

    .bingomatrix {
        text-indent: 20px;
        padding-top: 6%;
        padding-right: 8%;
    }

    .bingohomebuttonswrap {
        margin-left: 6%;
    }

    .bingohomebuttonswrap1 {
        margin-left: 20%;
    }

    .bingorepeattelling {
        width: 83%;
        font-size: 7px;
        padding-top: 3%;
    }

    .bingo_instruction_header {
        font-size: 11px;
        line-height: 20px;
    }

    .bingo_closeinstruction {
        width: 10%;
        height: 20%;
        font-size: 17px;
        margin-top: 4px;
    }
}

.bingofront {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.bingofront span {
    display: table;
    margin: 0 auto;
}

.bingoback img {
    width: 96%;
    height: 96%;
    top: 0;
    position: absolute;
    left: 0;
}

.bingoleftparentwrap,
.bingoContainerinnerwrap {
    width: 100%;
    height: 100%;
}


/*abc bingo for all mobiles ends*/


/*mobile landscape starts*/

@media only screen and (max-device-width: 767px) and (orientation: landscape) {
    .bingomaincontainer {
        height: 100% !important;
        width: 47%;
    }

    .bingohomebuttonsaz .bingohomebuttons .bingomatrix {
        width: 100%;
        background-size: 100% 100%;
    }

    .bingoContainerrow {
        width: 100%;
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}


/*mobile landscape ends*/


/*mobile portrait starts*/

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

    .bingoContainer,
    .bingoContainerrow {
        height: 100%;
    }

    .bingoContainerrow {
        margin: 0 auto;
        width: 100%;
        display: block;
    }

    .bingomaincontainer {
        width: 66%;
        float: none;
        clear: both;
        margin: 0 auto;
    }

    .bingohomebuttonsaz .bingohomebuttons .bingomatrix,
    .bingomatrix.bingomatrix3 {
        width: 100%;
        background-size: 100% 100%;
        background-position-y: 3px;
        background-repeat: no-repeat;
    }

    .bingoContainerrow_portrait .bingosidemenu_portrait {
        width: 100%;
    }

    .bingoleftparentwrap_portrait {
        overflow: auto;
        padding: 1% 17%;
        padding-bottom: 0;
        position: relative;
    }

    .bingoleftparentwrap_portrait .bingoleflogo {
        width: 22%;
        margin: 0;
        float: left;
        height: 58px;
    }

    .bingoleftparentwrap_portrait .bingolefcasedetail {
        width: 26%;
        color: #fff;
        height: 28px;
        float: left;
        margin: 0 18%;
        margin-top: 4%;
    }

    .bingoleftparentwrap_portrait .bingocontrols .bingohelp {
        width: 100%;
    }

    .bingocontrolwrap .bingocontrols {
        width: 100%;
        height: 100%;
    }

    .bingorepeattelling {
        width: 51%;
        font-size: 9px;
        padding-top: 0%;
        color: #fff;
    }

    .bingoleftparentwrap_portrait .bingocontrolwrap {
        float: left;
        width: 8%;
        height: 30px;
        position: absolute;
        top: 25%;
        right: 18%;
    }

    .bingo_closeinstruction {
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .bingoTellerWrap {
        width: 68%;
        height: 9%;
        position: relative;
        margin: 0 auto;
        z-index: 10;
        margin-top: 1%;
    }

    .bingolefcasedetail div {
        font-size: 11px;
        padding-top: 11%;
    }
}


/*mobile portrait ends*/


/** abc game bingo ends **/
/** Connect the dots css style begins **/

.text-center {
    text-align: center;
}

.home-cursor {
    cursor: pointer;
}

.startgame-connectthedots-innerwrapper canvas {
    margin-top: 2em;
}

.connectthedots-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
   filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7ff1f6', endColorstr='#7db9e8', GradientType=0);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.connectthedots-container:before {
    content: '';
    /* background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connectthedots-full-bg.png) !important; */
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    background-repeat: no-repeat;
    background-position: 0px bottom;
    background-size: 100%;
    /* background-image: none !important;
	background: #EECDA3 !important;   fallback for old browsers
	background: -webkit-linear-gradient(to bottom, #BAEBFB 10%, #FCFDBF 90%) !important;  /* Chrome 10-25, Safari 5.1-6
	background: linear-gradient(to bottom, #BAEBFB 10%, #FCFDBF 90%) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.connectthedots-centerlized-wrapper {
    width: 100%;
    height: 600px;
}

.connectthedots-canvas-container #canvas {
    display: block;
}

.connectthedots-dotsContainer {
    position: absolute;
    top: 1em;
    z-index: 99;
    padding-left: 0px;
    padding-top: 0px;
}

.canvas,
.connectthedots-dotsContainer {
    left: 0em;
    padding-left: 0px;
    padding-top: 0px;
    height: 100%;
}

.connectthedots-dotsContainer {
    height: inherit;
}

.aletter {
    
}

.connectthedots-dotsContainer ul {
    list-style-type: none;
    height: 100%;
    padding: 0;
    margin: 0;
    clear: both;
    overflow: hidden;
    height: 436px;
    width: 600px;
    position: relative;
    top: 10px;
    height: inherit;
}

.connectthedots-dotsContainer ul li {
    font-family: 'Poppins';
    position: absolute;
    z-index: 1;
    display: inline-block;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    font-size: 24px;
    background-color: #799c0d !important;
    cursor: pointer !important;
    text-align: center;
    line-height: 40px;
    color: #000;
    outline: 0;
}

.connectthedots-container a,
.connectthedots-container button,
.connectthedots-container img {
    outline: 0;
}

.connectthedots-dotsContainer ul li:before {
    content: '';
    position: absolute;
    top: -11px;
    left: -12px;
    z-index: 1;
    height: 50px;
    width: 50px;
}

.connectthedots-dotsContainer ul li.reduce-dots-area:before {
    content: '';
    height: 0;
    width: 0;
}

.connectthedots-dotsContainer ul li span {
    position: absolute;
    color: #151515;
    font-size: 1.1em;
}

.connect-the-dots-wrapper {
    /* background:url(../images/connectthedots-full-bg.png) no-repeat; */
    background-size: cover;
    height: 600px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    max-height: 100%;
}

.connectthedots-main-wrapper {
    position: relative;
    margin: auto;
    height: 600px;
    text-align: center;
    max-height: 100%;
    width: 100%;
}

.connectthedots-innerwrapper {
    float: none;
    text-align: center;
    margin: 0px auto;
    overflow: hidden;
    display: inline-block;
    position: relative;
    height: 100%;
    left: 0;
    right: 0;
    width: 600px;
}

.connectthedots-innerwrapper figure {
    margin-top: 0;
}

.connectthedots-score-innerwrapper {
    min-height: 300px;
}

.connectthedots-start-game-container {
    /* background: url(../images/connectthedots-full-bg.png) no-repeat scroll 0 0 / contain; */
    clear: both;
    overflow: hidden;
    margin: 0% auto 0 auto;
    width: 89em;
    position: relative;
}

.connectthedots-start-game-container .connectthedots-sg-left-container,
.connectthedots-start-game-container .sg-right-container {
    float: left;
    height: 100%;
    max-height: 100%;
    min-height: 42.8em;
    vertical-align: top;
    width: 23%;
    padding: 30px;
    position: relative;
    /* background: url(../images/connect-dots-bg-panel.png) no-repeat scroll 0 0 / cover;     */
    /* background-position: right top; */
}

.connectthedots-start-game-container .connectthedots-sg-left-container {
    padding: 0px 30px 30px !important;
}




.connectthedots-game-event-icons ul {
    width: 100%;
    text-align: center;
    padding: 0;
}

.connectthedots-game-event-icons ul li {
    cursor: pointer !important;
    list-style: none;
    margin: 30px 10px 0 10px;
    vertical-align: top;
    position: relative;
    z-index: 111;
}

.connectthedots-left-container,
.connectthedots-right-container {
    position: relative;
    width: 25%;
    height: 100%;
    float: left;
    min-height: 43em;
}

.connectthedots-left-container {
    float: left;
}

.connectthedots-right-container {
    float: right;
}

.connectthedots-main-wrapper .welcome-txt {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connect-dots-btnbg.png) no-repeat;
    position: absolute;
    bottom: 1em;
    color: #ffffff;
    font-size: 1.6em;
    cursor: pointer;
    text-align: center;
    width: auto;
    background-size: cover;
    width: 5.5em;
    height: auto;
    line-height: 1.5em;
    font-family: 'Poppins';
    text-transform: uppercase;
}

.connectthedots-main-wrapper .play-game-btn {
    position: absolute;
    bottom: 38%;
    left: 42.1%;
    z-index: 11;
    background: none;
    border: 0;
    cursor: pointer;
}

.connectthedots-main-wrapper .welcome-slide-btn span {
    position: absolute;
    top: 3px;
    left: 1.6em;
}

.connectthedots-main-wrapper .instruction-btn {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connect-dots-btnbg.png) no-repeat;
    background-size: contain;
    bottom: 9%;
    font-size: 1.8em;
    left: 45%;
    width: 126px;
    height: 53px;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Poppins';
    line-height: 1.5em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    border: none;
}

.connectthedots-main-wrapper .welcome-slide-btn3 {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/connectingdotsplay-button.png) no-repeat;
    bottom: 11% !important;
    font-size: 1.8em;
    left: 56% !important;
    width: 126px;
    height: 53px;
    color: #ffffff;
    cursor: pointer;
    font-family: 'Poppins';
    line-height: 1.5em;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    border: none;
}

.sm-slide-btn {
    width: 30%;
    padding: 8px 20px !important;
}

.connectthedots-main-wrapper .welcome-txt {
    background: none;
    bottom: 2px;
    margin: 0;
    color: #e54e01;
    font-size: 1em;
    /*    left: 50%;*/
    width: 100%;
}

.topCloudContainer {
    -webkit-animation: cloud_two 25s linear infinite;
    -moz-animation: cloud_two 25s linear infinite;
    -o-animation: cloud_two 25s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    margin: 0 auto;
    width: 10em;
}

.topColudImage {
    position: absolute;
    top: 1em;
    left: 9.3em;
}

.welcome-slide-btn {
    left: initial;
    right: 6%;
    bottom: 5%;
    background-size: cover;
    padding: 8px 34px;
    color: #fff;
    border: 0;
}

.instruct-slide-btn {
    bottom: 1.6em !important;
    left: initial !important;
    right: 0.5em;
}

.begin-btn {
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/letsplay-btn.png) no-repeat;
    bottom: 1em !important;
    left: 56% !important;
    padding: 10px 24px;
    right: 0.5em;
    width: 164px;
    text-transform: capitalize !important;
}

.begin-btn:after {
    border-bottom-color: #ff5400 !important;
}

.connectthedots-main-wrapper .begin-btn span {
    background-color: #ff5400 !important;
}

.connectthedots-outputimg-container {
    position: absolute;
    margin: 1em auto 0em auto;
    width: fit-content;
    float: left;
    clear: both;
    overflow: hidden;
    top: -.9em;
    left: 1.8em;
    border: 3px solid #7dcebd;
    height: auto;
}

.connectthedots-outputimg-container-visibility {
    display: none;
}


#ouputImg {
    margin: 0px auto 0px auto;
}

.outputimg img {
    width: 100%;
}

.connectthedots-star-rating {
    clear: both;
    overflow: hidden;
    /* position: relative; */
    top: 5em;
    width: 100%;
    text-align: center;
    left: 0%;
    text-align: left;
    margin: 0 auto;
}

.connectthedots-star-rating ul {
    text-align: center;
    padding: 0;
}

.main-wrap {
    position: relative;
    top: 0px;
}

.main-wrap [role="button"] {
    cursor: default;
    z-index: 999;
}

.connectthedots-play-button-container .next-level-btn {
    font-size: 1.3em;
    cursor: pointer;
    font-family: 'Poppins';
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    border: none;
    padding-bottom: 14px;
    right: 0;
    padding: 0;
    width: 34%;
    height: 2.3em;
    border-radius: 15px;
    line-height: 2.3em;
    color: #004c4a;
    background-color: #ffcc00;
}

.connectthedots-play-button-container .play-again-btn {
    background-color: #df2c5c;
    border-radius: 15px;
    font-size: 1.3em;
    width: 34%;
    height: 2.3em;
    color: #ffffff;
    font-family: 'Poppins';
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
    border: none;
    padding-bottom: 14px;
    cursor: pointer;
    line-height: 2.3em;
    padding: 0;
    margin-right: 2em;
}

.connectthedots-play-button-container.next-level-btn:hover,
.connectthedots-play-button-container .play-again-btn:hover,
.upper-lower-btn li:hover {
    transition: all 0.5s ease;
}

@keyframes aletteranimate {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.5, 1.5, 1.5);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.connectthedots-star-rating ul li {
    background: url('https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/star-deactive.png') no-repeat;
    height: 40px;
    width: 40px;
    display: inline-block;
    margin: 0 1px;
    background-size: contain;
}

.connectthedots-star-rating ul li.active,
.connectthedots-star-rating ul li.activeStar {
    background: url('https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/star.png') no-repeat;
    background-size: contain;
}

.connectthedots-star-rating ul li .fa-star {
    font-size: 30px;
    -webkit-text-stroke-width: .5px;
}

.info-icon {
    position: absolute;
    top: 1.7em;
    right: .8em;
    cursor: pointer !important;
    width: 40px;
}

#connectthedots-overlay,
.game-result-overlay {
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 111;
}

.game-result-overlay {
    cursor: default !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.wrong-selection-wrapper {
    position: absolute;
    top: 13em;
    left: 30.6em;
    color: #fff;
    padding: 7.5% 0;
    z-index: 11;
    width: 26%;
    border-radius: 40px;
    display: none;
}

.connectthedots-game-instruction-wrapper {
    position: absolute;
    top: 35%;
    left: 10%;
    color: #fff;
    padding: 0;
    z-index: 999;
    width: 79%;
    border-radius: 16px !important;
    padding: 30px 5px !important;
    position: relative !important;
    border-width: 7px;
    border-style: solid;
    box-shadow: inset 0px 0px 12px #000;
    border-color: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(#d3ece7, #d3ece7), linear-gradient(#b46437, #8a402f) !important;
}

.connectthedots-start-game-instruction-wrapper {
    left: 27.3em;
    width: 38%;
    padding: 0% 0% 0% 1%;
}

.connectthedots-start-game-instruction-wrapper ul.wrong-select {
    width: 92% !important;
}

.wrong-selection-wrapper ul {
    list-style-type: none;
    text-align: center;
    padding: 0;
    font-size: 1.5em;
}

.wrong-selection-wrapper.active {
    display: block !important;
}

.wrong-selection-wrapper:before {
    content: '';
    position: absolute;
    top: 0;
    background-color: #fd4191;
    opacity: 0.9;
    height: 100%;
    display: block;
    width: 100%;
    left: 0;
    border-top-left-radius: 75px;
    z-index: 11;
    border-bottom-right-radius: 75px;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/wrong-selction.png) no-repeat;
    background-size: contain;
    /* background-position-y: 0px; */
}



.connectthedots-game-instruction-wrapper ul li {
    text-align: center;
    z-index: 11;
    color: #32161d;
    font-family: 'Poppins';
    margin-bottom: 1.2em;
    font-size: 1.4em;
}

.wrong-selection-wrapper ul li {
    position: relative;
    text-align: center;
    z-index: 11;
    color: #fff;
    font-family: 'Poppins';
    margin-bottom: 1.2em;
    font-size: 1.2em;
}

.connectthedots-game-instruction-wrapper ul li:last-child {
    margin: 0;
}

.bg-rotateImage {
    position: absolute;
    left: 0;
    margin: auto;
    right: 0;
    width: 100%;
}

.alphabet-text li {
    margin: 0 0px;
    width: 50px;
    display: inline-block;
}

.connectthedots-game-text {
    position: absolute;
    left: 16.5%;
    margin-top: 11%;
}

.connectthedot-text {
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-animation: scaling 5s ease-in-out infinite alternate;
    animation: scaling 5s ease-in-out infinite alternate;
}

@-webkit-keyframes scaling {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

@keyframes scaling {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(2.0);
    }
}

/* Background for the container */

.view-wrapper {
    margin: 0 !important;
}

.secContainer {
    /* background-color: #2b1842; */
    max-width: 100% !important;
    margin: 0 !important;
}

.connectthedots-game-headline h3 {
    font-family: 'Poppins';
    font-size: 4.5em;
    font-weight: bolder;
    color: #ffffff;
    /* -webkit-text-stroke: 3px #ffffff;  */
    margin: 45px 0 0 -1px;
}

.game-heading span {
    text-align: center;
    border: 2px solid rgba(255, 255, 255, 0.53);
    width: 32px;
    height: 32px;
    line-height: 26px;
}

.game-heading {
    width: 39em;
    top: 13em;
    left: 2.4em;
}

.connectthedots-letter-select-option {
    font-size: 1em;
    padding: 0;
    width: 75%;
    text-align: center;
    list-style-type: none;
    margin-top: 3em;
    position: absolute;
    bottom: 10em;
    left: 5.2em;
    /* z-index: 1; */
}

.connectthedots-letter-select-option li:before {
    content: '';
    position: absolute;
    z-index: -1;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/pink-button.png) no-repeat;
    cursor: pointer !important;
    background-size: COVER;
    height: 100%;
    width: 100%;
    font-family: 'Poppins';
    display: inline-block;
    color: #fff;
    BACKGROUND-POSITION: LEFT TOP;
    LEFT: 0;
    TOP: 0;
    cursor: pointer !important;
    background-size: cover;
    height: 100%;
    width: 100%;
    font-family: 'Poppins';
    display: inline-block;
    color: #fff;
}

.connectthedots-letter-select-option li:hover:before,
.connectthedots-letter-select-option li:focus:before {
    -moz-opacity: 1;
    -khtml-opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    opacity: 1;
}

.connectthedots-letter-select-option li.green-bg:before {
    content: '';
    position: relative;
    z-index: -1;
    background: url(https://d25k2pvzisqrb6.cloudfront.net/assets/connectthedots/images/yellow-button.png) no-repeat;
    background-size: cover;
    margin-left: 0em;
}

.connectthedots-innerwrapper .upper-lower-btn {
    position: absolute;
    bottom: 3em;
}

.upper-lower-btn {
    padding: 0;
    width: 95%;
    text-align: center;
    list-style-type: none;
    position: absolute;
    bottom: 3em;
    left: 1em;
}

.upper-lower-btn li {
    cursor: pointer !important;
    background-size: contain;
    height: 56px;
    width: 160px;
    font-family: 'Poppins';
    font-size: 1.8em;
    display: inline-block;
    color: #151000;
    
    position: relative;
    -webkit-animation-name: scalex;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: scale;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    text-align: center;
    line-height: 61px;
}

@-webkit-keyframes scalex {
    from {
        -webkit-transform: scale(0.9);
    }

    65% {
        -webkit-transform: scale(1.0);
    }

    to {
        -webkit-transform: scale(0.9);
    }
}

@-moz-keyframes scale {
    from {
        -moz-transform: scale(0.9);
    }

    65% {
        -moz-transform: scale(1.0);
    }

    to {
        -moz-transform: scale(0.9);
    }
}

.close-popup {
    width: 100%;
}


/* Connect the dots common css style ends */


/* Connect the dots iPhone portrait css starts */

.connectthedots-show-for-mobile-port {
    display: none;
}

.connectthedots-hide-for-mobile-port {
    display: block;
}

@media (min-width: 320px) and (max-width: 464px) and (orientation: portrait) {
    .connectthedots-show-for-mobile-port {
        display: block;
    }

    .connectthedots-hide-for-mobile-port {
        display: none;
    }

    .connectthedots-game-event-icons ul li {
        height: 26px;
        width: 26px;
    }

    .connectthedots-game-event-icons ul li img {
        width: 100%;
    }

    .portrait .connectthedots-innerwrapper {
        width: 100%;
    }

    .portrait .connectthedots-game-text {
        margin-top: 20%;
        width: 65%;
    }

    .portrait .connectthedots-game-instruction-wrapper {
        width: 90%;
        left: 5%;
    }

    .portrait .connectthedots-instruction-bgimage {
        width: 100%;
    }

    .portrait .connectthedots-mobileport-play-pause {
        width: 42%;
        float: right;
        margin-right: -16px;
    }


    .portrait .connectthedots-star-rating ul li {
        height: 25px;
        width: 25px;
    }

    .portrait .connectthedots-mobileport-star {
        position: initial;
        margin-top: 7%;
    }

    .portrait .connectthedots-game-inner-container {
        height: 100% !important;
    }

    /* Game area */
    .portrait .connectthedots-game-container.connectthedots-start-game-container {
        margin: 0 auto !important;
        width: 100%;
    }

    .portrait .connectthedots-start-game-container .connectthedots-sg-left-container {
        padding-bottom: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .portrait .connectthedots-game-start-logo {
        float: left;
        left: -4% !important;
    }

    .portrait .connectthedots-game-headline {
        text-align: center;
        width: 8em;
        height: 4.4em;
        background-size: contain;
    }

    .portrait .connectthedots-game-headline h3 {
        font-size: 1.8em;
        font-weight: bolder;
        color: #ffffff;
        margin: 16px 0 0 -30px;
    }

    .portrait .connectthedots-sg-left-container .connectthedots-game-headline .connectthedots-star-rating {
        display: block;
    }

    .portrait .connectthedots-dotsContainer ul {
        position: initial;
    }
}

/*remove css for fix heigth issue*/
/*
    .portrait .connectthedots-startgame-innerwrapper {
        transform: scale(.6);
    }*/
/* .connectthedots-start-game-container .sg-right-container { */
/* display: none; */
/* } */
/* } */


/* Connect the dots iphone 6 and 6+ landscape mode css starts */

@media (min-width: 465px) and (max-width: 767px) and (orientation: landscape) {

    .connectthedots-left-container,
    .connectthedots-right-container {
        width: 28%;
    }

    /*.connectthedots-innerwrapper {
        width: 40%;
    }*/
    .connectthedots-game-text {
        margin-top: 15%;
        width: 60%;
        left: 20%;
    }

    .connectthedots-game-instruction-wrapper {
        position: absolute;
        top: 3%;
        left: 8%;
        color: #fff;
    }

    .connectthedots-game-instruction-wrapper img {
        width: 100%;
    }

    .upper-lower-btn {
        bottom: 23em;
        left: 0em;
        width: 100%;
    }

    /*.upper-lower-btn li {
        height: 3.4em;
        width: 36%;
        font-size: 1.2em;
    }*/
    /* Game screen CSS for Iphone device */
    .connectthedots-start-game-container .connectthedots-sg-left-container {
        padding: 0px 10px 10px !important;
        width: 10%;
    }

    .connectthedots-game-headline {
        top: 14%;
    }

    .connectthedots-game-headline h3 {
        font-size: 2.1em;
        margin: 19px 0 0 -1px;
    }

    .connectthedots-start-game-instruction-wrapper {
        left: 16em;
    }

    .connectthedots-container:before {
        top: 0 !important;
    }

    .connect-the-dots-wrapper {
        max-width: 100%;
    }

    .connectthedots-game-headline {
        width: 92%;
        height: 90px;
        top: 6em;
    }

    .connectthedots-game-headline h3.tolowercaseletter {
        font-size: 2.2em;
        margin-top: 30px;
    }

    .connectthedots-startgame-innerwrapper {
        margin-left: 4px;
        margin: 0 auto;
    }

    .connectthedots-game-headline h3.touppercaseletter {
        font-size: 1.8em;
        margin-top: 30px;
    }

    .connectthedots-game-event-icons ul {
        left: 15px;
        position: relative;
        top: 0px;
        z-index: 1;
    }

    .connectthedots-game-event-icons ul li {
        height: 35px;
        width: 35px;
        display: block;
    }

    .connectthedots-game-event-icons ul li img {
        width: 100%;
    }

    .connectthedots-main-wrapper .connectthedots-left-container,
    .connectthedots-main-wrapper .connectthedots-right-container {
        width: 12%;
    }

    .connectthedots-game-inner-container {
        width: 75%;
    }

    .connectthedots-start-game-container .connectthedots-sg-left-container {
        width: 18%;
        padding: 0;
    }

    .connectthedots-start-game-container .sg-right-container {
        width: 5%;
        padding: 0;
        left: -16px;
    }

    .connectthedots-dotsContainer ul {
        width: 100%;
    }

    .connectthedots-start-game-container .sg-connectthedots-left-container {
        padding: 0px 10px 0px !important;
    }

    .connectthedots-game-event-icons ul li {
        margin: 30px 10px 0 0px;
    }

    .connectthedots-start-game-instruction-wrapper {
        left: 20%;
        width: 39%;
    }

    .connectthedots-game-instruction-wrapper {
        top: 15%;
        left: 0%;
        width: 100%;
    }

    .connectthedots-game-instruction-wrapper .connectthedots-instruction-bgimage {
        width: 100%;
    }

    .connectthedots-start-game-container .connectthedots-game-instruction-wrapper {
        top: 25%;
        left: 25%;
        width: 60%;
    }

    .connectthedots-outputimg-container {
        left: 0.6em;
        top: 15px;
    }

    .connectthedots-star-rating {
        width: 125px;
        left: -30px;
    }

    .connectthedots-star-rating ul li {
        height: 28px;
        width: 28px;
    }

    .connectthedots-close-icon-container {
        right: 10px;
    }

    .connectthedots-start-game-container {
        width: 100%;
    }

    .connectthedots-centerlized-wrapper,
    .connectthedots-main-wrapper {
        min-height: 100% !important;
    }


    .connectthedots-main-wrapper .connectthedots-left-container,
    .connectthedots-main-wrapper .connectthedots-right-container {
        width: 25%;
    }

    /* .connectthedots-innerwrapper {
        width: 50% !important;
    }*/
    .bg-rotateImage {
        width: 100%;
        height: 100%;
    }

    .connectthedots-dotsContainer {
        top: -1em;
    }

    .connectthedots-dotsContainer ul {
        position: initial;
    }

    .connectthedots-game-event-icons ul {
        left: 0 !important;
    }

    .connectthedots-game-headline {
        width: 100%;
        height: 94px;
        top: 80px;
    }
}

/* I-pad Potrait Media query start */

/* @media (min-width:768px) and (max-width:980px) {
    .connectthedots-game-start-logo {
      left: -4.4em !important;
      width: 120px;
    }
    .connectthedots-game-headline {
        width: 100%;
        height: 80px;
        left: .2em;
    }
    .connectthedots-game-headline h3 {
        font-size: 1.5em;
        margin-top: 25px;
    }
    .connectthedots-game-headline h3.tolowercaseletter {
        font-size: 1.8em;
        margin-top: 25px;
    }
    .connectthedots-game-headline h3.touppercaseletter {
        font-size: 1.5em;
        margin-top: 25px;
    }
    .game-event-icons ul {
        left: -14px;
        position: relative;
        top: 0px;
    }
    .game-event-icons ul li {
        height: 35px;
        width: 35px;
        display: block;
    }
    .game-event-icons ul li img {
        width: 100%;
    }
    .connectthedots-left-container,
    .connectthedots-right-container {
        width: 11%;
    }

	.connectthedots-start-game-container .connectthedots-sg-left-container {
		width: 18%;
	}
    .connectthedots-innerwrapper {
        width: 100%;
    }
    .connectthedots-start-game-container .sg-connectthedots-left-container,
    .connectthedots-start-game-container .sg-right-container {
        width: 9%;
        padding: 0;
    }
    .connectthedots-start-game-container .sg-connectthedots-left-container {
        padding: 0px 10px 0px !important;
    }
    .connectthedots-game-headline {
        top: 15%;
        left: .8em;
    }
    .game-event-icons ul li {
        margin: 30px 10px 0 0px;
    }
    .connectthedots-start-game-instruction-wrapper {
        left: 12%;
        width: 39%;
    }
    .connectthedots-outputimg-container {
        left: 0.8em;
    }
    .connectthedots-star-rating {
        width: 125px;
        left: -30px;
    }
    .connectthedots-star-rating ul li{
      font-size: 21px;
      -webkit-text-stroke-width: .4px;
  }
      .connectthedots-star-rating ul li {
        height: 28px;
        width: 28px;
    }
	.connectthedots-main-wrapper .connectthedots-game-inner-container {
        transform: scale(0.85) !important;
        -webkit-transform: scale(0.85)!important;
        -moz-transform: scale(0.85)!important;
        -ms-transform: scale(0.85)!important;
        -o-transform: scale(0.85)!important;
         margin: -21px 0 0;
    }
} */
/* I-pad Potrait Media query ends */

/* I-pad Landscape Media query start */

@media (min-width:981px) and (max-width:1024px) {

    .connectthedots-start-game-container .sg-connectthedots-left-container,
    .connectthedots-start-game-container .sg-right-container {
        width: 19%;
    }

    .connectthedots-start-game-instruction-wrapper {
        left: 21.5em;
    }

    .startgame-connectthedots-innerwrapper {
        left: 2.6em;
        margin-left: 14px;
    }

    .connectthedots-outputimg-container {
        margin-top: 0;
        top: 1em;
        left: .7em;
    }

    .upper-lower-btn {
        bottom: 5em;
    }

    .connectthedots-left-container,
    .connectthedots-right-container {
        position: relative;
        width: 21.3%;
    }

    .game-event-icons ul {
        margin-left: -30px;
    }
}


/* I-pad Landscape Media query ends */

/* Connect the dots I-pad landscape mode css start */

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

    .connectthedots-startgame-innerwrapper {
        margin: 0 auto;
    }

    .connectthedots-startgame-innerwrapper {
        margin-top: -55px;
    }

    .connect-the-dots-wrapper {
        height: 100%;
        max-width: 100%;
    }

    .connectthedots-game-event-icons ul li {
        display: block !important;
    }

    .connectthedots-start-game-container .sg-connectthedots-left-container {
        width: 26%;
    }

    .connectthedots-game-inner-container {
        width: 65%;
    }

    .startgame-connectthedots-innerwrapper {
        left: 2.6em;
        margin-left: 14px;
    }

    .connectthedots-outputimg-container {
        margin-top: 0;
        top: 1em;
        left: .7em;
    }

    .upper-lower-btn {
        bottom: 5em;
    }

    .connectthedots-left-container,
    .connectthedots-right-container {
        position: relative;
        width: 20% !important;
    }

    .connectthedots-game-event-icons {
        text-align: center;
        float: left;
    }

    .connectthedots-game-event-icons ul li {
        cursor: pointer !important;
        display: block;
        margin: 30px 10px 0 -10px;
    }

    .connectthedots-dotsContainer ul,
    .connectthedots-start-game-container {
        width: 100%;
    }

    .connectthedots-game-instruction-wrapper {
        left: 10%;
        width: 78%;
    }

    .connectthedots-start-game-instruction-wrapper {
        left: 19.5em;
        width: 46% !important;
    }

    .connectthedots-start-game-container .connectthedots-game-instruction-wrapper {
        width: 48% !important;
        top: 26%;
    }

    .connectthedots-start-game-container {
        width: 100%;
    }

    .connectthedots-star-rating ul li {
        width: 25px;
        height: 25px;
    }

    .connectthedots-game-headline h3 {
        font-size: 2em;
    }

    .connectthedots-game-event-icons ul li {
        display: block;
        width: 100%;
    }
}


/* Connect the dots I-pad landscape mode css ends */


/*  Connect the dots Laptop screen css starts */

@media(max-height:680px) and (max-width:1366px) {

    .connectthedots-centerlized-wrapper,
    .connect-the-dots-wrapper {
        height: 100%;
    }

    .bg-rotateImage {
        height: 100%;
        width: 100%;
    }

    .connectthedots-play-button-container #playagain,
    .connectthedots-play-button-container #nextlvl {
        height: 2em;
        line-height: 2em;
    }
}

@media(max-height:768px) and (max-width:1366px) {

    .connect-the-dots-wrapper,
    .bg-rotateImage {
        height: 100%;
    }
}


/*  Connect the dots Laptop screen css ends */


/*  Connect the dots from desktop mode css starts */

@media (max-width:1025px) {

    .connectthedots-dotsContainer ul,
    .connectthedots-start-game-container {
        /* width: 100% !important; */
    }
}


/*  Connect the dots from desktop mode css ends */


/* Connect the dots I-pad Landscape Media quere */

@media (min-width:768px) and (max-width:1024px) {
    .connectthedots-dotsContainer {
        width: 100% !important;
    }
}

/* lets go fishing game css starts here */

.balloom_imagex {
    height: 100%;
    text-align: center;
}

.balloom_imagex button {
    background-color: transparent;
}

.letsgofishingMainPage {
    margin: 0 auto;
}

.letsgofishingMainBackground {
    width: 100%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: cover;
}

.letsgofishingpage1,
.letsgofishingpage0,
.letsgofishingpage2,
.letsgofishingpage3,
.letsgofishingpage4,
.letsgofishingpage5 {
    width: 100%;
    height: 100%;
    float: left;
    font-family: "Arial" !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.letsgofishingpage1 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.letsgofishingpage0 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.letsgofishingpage2 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.letsgofishingpage3 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.letsgofishingContainer {
    width: 100%;
    height: 100%;
}

.letsgofishingrow {
    padding-left: 0px !important;
    padding-right: 0px !important;
    height: 600px !important;
}

.startletsgofishingrow {
    padding-left: 0px !important;
    padding-right: 0px !important
}

.startletsgofishingrow.lgfp1row {
    height: 100%;
    margin: 0 auto;
    float: none;
}

.letsgofishingContainer .row {
    margin-bottom: 0;
    margin-top: 0;
}

.startlgf_go {
    text-align: center;
    bottom: 13%;
    position: absolute;
    left: 10%;
    margin: 0 auto;
}

h3.lgfcenter {
    text-align: center;
}

h4.lgfcenter {
    text-align: center;
    color: #C2D69A;
}

.lgfpaddinglr30 {
    padding-left: 0px;
    padding-right: 0px;
}

.lgfmainclass {
    /* height: 600px !important; */
}

.lgfbtngamestart {}

.lgfballoom_image {
    text-align: center;
}

.lgfballoom_image img {
    width: auto;
    height: 100%;
}

.lgfballoom_image_pg1 {
    width: 100%;
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/startpgbg.png");
    height: 100%;
    background-size: 100% 100%;
}

.lgfballoom_image_pg1 img {
    width: auto;
    height: 100%;
}

.instruct_lgfballoom_image {
    text-align: center;
}

.instruct_lgfballoom_image img {
    width: auto;
    height: 100%;
}

.gamemode_lgfballoom_image {
    text-align: center;
}

.gamemode_lgfballoom_image img {
    width: auto;
    height: 100%;
}

.lgfguidelineaudio {
    padding: 25px;
}

.lgf_imgdiv {
    float: left;
}

.lgfgameelementcenter {
    text-align: center;
}

.lgfLogoleft {
    width: 100%;
    height: 38%;
}

.result_lgfgameelementcenter {
    text-align: center;
    background-color: #f9bb93;
}

.level_lgfgameelementcenter {
    text-align: center;
    padding: 15px;
}

.lgfgameelementright {
    text-align: right;
}

.lgf_imagecls {
    width: 100%;
    /* height: 200px; */
    height: 170px;
}

.letsgofishingrowborder {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.letsgofishingpage4 .letsgofishingrowborder {
    padding-top: 10px !important;
}

.lgf_gamebtnbg {
    background-color: #C2D69A !important;
}

.lgf_mainpage_center {
    text-align: center;
}

.mainpage_lgfgameelementright {
    text-align: right;
}


/*star rating css starts here */

.lgf_fa-star-o {
    color: #FF7700;
    cursor: default;
}

.lgf_fa-star {
    color: #FFDD00;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FF7700;
    cursor: default;
}

.isReadonly {
    .lgf_fa-star-o {
        color: #000000;
    }

    .lgf_fa-star {
        color: #DCDCDC;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #000000;
    }
}

h4.gamemode {
    margin: 3px;
    float: center;
    text-align: center;
}

.lgf_nocls {
    padding: 1px;
}


/*star rating css End here */

.lgf_gameBadgeDisabled {
    position: absolute;
    top: 70%;
    left: 38%;
}

.lgf_gameBadgeEnabled {
    opacity: 0.0;
}

.lgf_gameDivfull {
    width: 100%;
}


/*Pop the Balloons style Starting here*/

div.lgf_gallery {
    margin: 10px;
    float: left;
    padding-left: 12px;
}

div.lgf_gallery:hover {}

div.lgf_gallery img {
    height: auto;
}

div.lgf_desc {
    padding: 2px;
    text-align: center;
}

div.lgf_divbg {
    background-color: lightblue;
}

.lgf_bgclass_game {
    margin: -10px auto !important;
}

.startlgf_go_pg1 {
    text-align: center;
    bottom: 14%;
    position: absolute;
    /* left: 3%;
    margin: 3px auto; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.lgf_modedivborder {
    height: 66px;
    width: 200px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 10px;
    position: relative;
    margin: 0 auto;
}

.lgf_lvlmsg {
    font-size: 26px;
    
    color: #000000;
    Font-family: "Arial";
    font-style: normal;
    width: 100%;
    text-align: center;
}

.lgf_lvltxt {
    font-size: 33px;
    
    color: #ffffff;
    letter-spacing: 8px;
    font-family: "Arial";
    font-style: normal;
    /* font-variant: common-ligatures small-caps;*/
    position: absolute;
    left: 32%;
    bottom: 12%;
}


/*Pop the Balloons style Ends here*/


/*Pop the Rocket style Starting here*/

div.lgf_rgallery {
    margin: 5px;
    float: left;
    width: 100px;
    padding-left: 12px;
}

div.lgf_rgallery:hover {}

div.lgf_rgallery img {
    height: auto;
}

div.lgf_rdesc {
    padding: 3px;
    text-align: center;
}

div.lgf_rdivbg {
    background-color: lightblue;
}

#lgfgame_div {
    margin: 0 auto;
    float: center;
}


/*Pop the Rocket style Ends here*/


/* timer ends here  */

.lgf_circlecls {
    height: 150px;
    width: 150px;
    border: 10px solid red;
    border-radius: 50%;
    top: 10%;
    left: 10%;
}

#lgf_countdownCircle {
    position: relative;
    margin: auto;
    height: 175px;
    width: 175px;
    text-align: center;
    animation-play-state: running;
    -webkit-animation: lgfplayc 60s steps(4) infinite, lgfplayh 15s steps(15) infinite;
    -moz-animation: lgfplayc 60s steps(4) infinite, lgfplayh 15s steps(15) infinite;
    animation: lgfplayc 60s steps(4) infinite, lgfplayh 15s steps(15) infinite;
    z-index: 1;
    transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
}

.lgf_timeralign {
    margin: 0px auto;
    /* left: -3%; */
    padding: 0px !important;
    transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
}

#lgf_gamelvlintdication {
    color: #000000;
    
    font-size: 22px;
    text-align: center;
    top: 40%;
    position: absolute;
    Width: 100%;
    left: 19px;
}

#abcSoundMatchLvlIntdication {
    color: #000000;
    
    font-size: 22px;
    text-align: center;
    top: 67%;
    position: absolute;
    Width: 100%;
    left: 0px;
}

#gamelvlintdicationPop {
    color: #000000;
    
    font-size: 22px;
    text-align: center;
    /*
    top: 41%;
    position: absolute;
 */
    width: 100%;
    /*     left: 0px; */
}

#lgf_countdownNumber {
    color: #fff;
    
    font-size: 24px;
    text-align: center;
    top: 31.5%;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 32%;
    margin-top: -1px;
    background: #072157;
    max-width: 50%;
}

#abcSoundMatchCountdownNmbr {
    color: #fff;
    
    font-size: 24px;
    text-align: center;
    top: 62%;
    position: absolute;
    width: 100%;
    text-align: center;
    left: 26%;
    margin-top: -1px;
    background: #072157;
    max-width: 50%;
}

#lgf_countdownStartdate {
    display: none;
}

@-webkit-keyframes lgfplayc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -736px;
    }
}

@-webkit-keyframes lgfplayh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2760px;
    }
}

@-moz-keyframes lgfplayc {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -736px;
    }
}

@-moz-keyframes lgfplayh {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -2760px 0px;
    }
}

@keyframes lgfplayc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -736px;
    }
}

@keyframes lgfplayh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2760px;
    }
}

@-webkit-keyframes lgfplayc2 {
    background-position-y: 0px;
}

@-webkit-keyframes lgfplayh2 {
    background-position-x: 0px;
}

@-moz-keyframes lgfplayc2 {
    background-position: 0px 0px;
}

@-moz-keyframes lgfplayh2 {
    background-position: 0px 0px;
}

@keyframes lgfplayc2 {
    background-position-y: 0px;
}

@keyframes lgfplayh2 {
    background-position-x: 0px;
}

#lgf_gamemsglayerdiv2 {
    position: relative;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 1;
}

#lgf_gamemsglayerdiv {
    position: absolute;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 1;
    top: 0px;
    left: 0px;
}

#lgf_gamepauselayerdiv {
    position: relative;
    background-color: #000000;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
}

#lgf_gameToPauseBtn {
    z-index: 1;
}

#lgf_gamemsgdiv,
#lgf_gamemsgdiv2 {
    position: absolute;
    left: 45%;
    top: 45%;
    background-color: #f1f1f1;
    width: 200px;
    padding: 10px;
    color: #000000;
    text-align: center;
    display: none;
}

#lgf_gamemsgdiv3 {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #008000;
    width: 180px;
    padding: 10px;
    color: #ffffff;
    text-align: center;
    display: none;
}

#lgf_gameinsructionmsgdiv2 {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #008000;
    width: 180px;
    padding: 10px;
    color: #ffffff;
    text-align: center;
    display: none;
}


/*Glow effect for the badge image*/

#lgf_badgeimg {
    left: 25px;
    top: 7px;
    position: absolute;
    display: none;
}

.lgf_go2_layerx {
    position: absolute;
    top: 22%;
    left: 6%;
}

.lgf_go3_layerx {
    position: absolute;
    top: 25%;
    left: 3%;
}

.lgf_go4_layerx {
    position: absolute;
    top: 20%;
    left: 3%;
}

.lgf_left_layerx {
    margin-top: 12%;
}

lgfbox:focus {
    outline: none;
}

#lgf_gamebadgeview {
    -webkit-animation: lgfpulsescore 1.5s ease-in-out infinite alternate;
    -moz-animation: lgfpulsescore 1.5s ease-in-out infinite alternate;
    animation: lgfpulsescore 1.5s ease-in-out infinite alternate;
    animation-play-state: paused;
}

@keyframes lgfpulsescore {
    from {
        transform: scale3d(0.5, 0.5, 0.5);
    }

    2% {
        transform: scale3d(1.25, 1.25, 1.25);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}


/*-- ends here--*/

.lgf_gamegobtnimg {
    width: 130px;
    height: 55px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: #000000;
    position: absolute;
    left: 39%;
    top: 88%;
}

.lgf_gamegobtnimghover {
    width: 130px;
    height: 55px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gamegonxtbtnimg {
    width: 125px;
    height: 55px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: #000000;
    position: absolute;
    left: 40%;
    top: 70%;
}

.lgf_gamegonxtbtnimghover {
    width: 125px;
    height: 55px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_instrct ul {
    list-style: none;
    list-style-type: lgf_instrct ul;
}

.lgf_titlex ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lgf_go2 {
    position: absolute;
    top: 75%;
    left: 38%;
}

.lgf_helpinstruction {
    position: absolute;
    top: 2%;
    right: 2.2%;
    z-index: 10;
}

.lgf_go1_layer {
    position: absolute;
    top: 70%;
    /* left: 38%; */
}

.lgf_go2_layer {
    position: absolute;
    top: 2%;
    left: 27%;
}

.lgf_go3_layer {
    position: absolute;
    top: 22%;
    left: 12%;
    width: 456px;
    height: 290px;
}

.lgf_go1_layer {
    position: absolute;
    top: 15%;
    /* left: 5%; */
}

.lgf_go1_layerx {
    position: absolute;
    top: 27%;
    left: 24%;
}

.lgf_go1_layerxx {
    position: absolute;
    top: 27%;
    left: 61%;
}

.lgf_instrct {
    position: absolute;
    top: 15%;
    left: 18%;
    line-height: 2.2;
    text-align: left;
    font-size: 16px;
    
    color: #0f0e31;
}

.lgf_go2_layer1 {}

.lgf_go3_layer1 {
    width: 100%;
    height: 100%;
    position: relative;
}

.lgf_left_img {
    position: absolute;
    top: 6%;
    left: 24%;
}

.lgf_btntxtalign {
    text-align: left;
    display: inline-block;
    margin-left: -8px;
}

.lgf_gameinstructpglayerimg {
    width: 127px;
    height: 48px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgfgameinstructiontext {
    width: 250px;
    height: 60px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 24px;
    position: absolute;
    left: 30%;
    top: 8%;
    
    color: #ad1457;
}

.lgfgamemodetext {
    width: 218px;
    height: 60px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 25px;
    
    color: wheat;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 61px;
}

.lgfgamemodetext_new {
    width: 218px;
    height: 90px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 30px;
    
    color: wheat;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 61px;
}

.lgfgamemodetext_new1 {
    width: 218px;
    height: 60px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 30px;
    
    color: wheat;
    text-align: center;
    margin: 20px auto;
    margin-bottom: 61px;
}

.lgfgamelevel {
    margin: 0 auto;
    position: absolute;
    top: 45%;
    left: 11%;
    text-align: center;
}

.lgfgamelevel_new {
    margin: 0 auto;
    top: 45%;
    left: 7%;
    text-align: center;
}

.lgfgamelevel1 {
    margin: 0 auto;
    position: absolute;
    top: 35%;
    left: 12%;
    text-align: center;
}

.lgf_go3 {
    position: absolute;
    top: 72%;
    left: 43%;
}

.lgf_left_layer {
    padding-top: 5%;
}

.lgf_left_layer_badge {
    position: absolute;
    top: 72%;
    left: 16%;
    margin: 3px auto;
}

.lgfgameplaybtnimg {
    width: 160px;
    height: 58px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: #000000;
}

.lgfgameplaybtnimghover {
    width: 160px;
    height: 58px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgfcountborder {
    width: 90px;
    padding: 11px;
    border: 6px solid #49d2d2;
    border-radius: 29px;
}

.lgfgameplaylvlbtnimg {
    width: 170px;
    height: 70px;
    text-transform: upperCase;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 18px;
    
    color: #ffffff;
    margin: 0px;
}

.lgfgameplaylvlbtnimghover {
    width: 130px;
    height: 39px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_playmodewithtimerbtnimg {
    width: 130px;
    height: 39px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 18px;
    
    color: #000000;
    margin: 0px;
}

.lgf_playmodewithtimerbtnimghover {
    width: 130px;
    height: 39px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

#lgf_playwithout {
    width: 198px;
    height: 68px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 20px;
    
    color: #ffffff;
}

#lgf_playwith {
    width: 195px;
    height: 68px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 20px;
    
    color: #ffffff;
}

.lgf_gamerestartbtnimg {
    width: 66px;
    height: 66px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gamehelpbtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gameHelpbtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gameinstructionbtnimg {
    width: 82px;
    height: 82px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gameinstructionbtnimghover {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gameinstructionbtnimgpg {
    width: 66px;
    height: 66px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gameinstructionbtnimgpghover {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gamepausebtnimg {
    width: 66px;
    height: 66px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gamemutebtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.lgf_gamemutebtnimg_instruct {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    top: 0%;
    left: 35%
}

.lgf_width100 {
    width: 100%;
    text-align: left;
    margin-left: 20px;
}

.lgf_gamelevelmodelftimg {
    width: 176px;
    height: 117px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: white;
    margin: 0px auto !important;
    padding: 6px !important;
    /*font-family: "Arial Bold";
	font-style: oblique;*/
}

.lgf_gamelevelmodefont {
    color: black;
}

.lgf_gamelevelview {
    padding: 20px;
}

#lgf_gameToPauseBtn {
    z-index: 1;
}

#lgf_gamestarsrating {
    width: 100%;
    text-align: center;
}

.lgf_ra-star-o {
    cursor: default;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_outline.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    /*margin-right: 20px;*/
    margin-bottom: 10px;
    transform: scale(.9, .9);
    display: inline-block;
}

.lgf_ra-star {
    cursor: default;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_fill.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
    transform: scale(.9, .9);
    display: inline-block;
}

.lgf_ra_star-half-o {
    cursor: default;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/lgfratingstar_wrong.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    margin-bottom: 10px;
    transform: scale(.9, .9);
    display: inline-block;
}

.lgftheballoonPages {
    width: 100%;
    height: 100%;
    float: left;
    display: block;
}

#lgfmyNav {
    width: 80%;
    left: 10%;
}

.lgf_edgePadding {
    padding-left: 25px;
    padding-right: 25px;
}

.lgfoverlay {
    position: absolute;
    height: 250px;
    z-index: 1;
    background-color: #00c7ff;
    overflow-x: hidden;
    transition: 0.5s;
    top: 39%;
    left: 5%;
    opacity: 0.9;
    border: 2px solid #0f1031;
    border-radius: 25px;
}

.lgfoverlay-content {
    position: relative;
    top: 25%;
    text-align: center;
    margin-top: 30px;
}

.lgfoverlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}

.lgfoverlay a:hover,
.lgfoverlay a:focus {
    color: #ffffff;
}

.lgfoverlay .closebtn {
    position: absolute;
    top: -22px;
    right: 11px;
    font-size: 50px;
}

.lgfoverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.lgf_clockbase {
    width: 345px;
    height: 417px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -19%;
    left: -10%;
    z-index: 0;
}

.lgf_BOverlaycnt {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: .75;
}

.lgf_timeremaining {
    color: #000000;
    
    text-align: center;
    font-size: 16px;
    top: 37%;
    position: absolute;
    right: 24%;
}

.lgf_timermode {
    color: #000000;
    
    text-align: center;
    font-size: 16px;
    top: 45%;
    position: absolute;
    right: 32.5%;
    margin-top: 2px;
}

.lgfBOverlaycont {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 560px;
    height: 272px;
    position: absolute;
    left: 3%;
    top: 21%;
    padding-top: 24px;
    padding-left: 6px;
}

.lgf_BIclose {
    text-decoration: none;
    position: absolute;
    top: 17%;
    right: 10%;
    cursor: default;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-size: 100% 100%;
}

.lgf_instructionheader {
    color: #fff;
    text-align: center;
    
    font-size: 26px;
    text-transform: uppercase;
    margin-top: 0;
}

.lgf_instructstep div {
    margin-bottom: 10px;
    text-align: center;
}

.lgf_instructstep {
    color: #000;
    font-size: 19px;
    padding-top: 45px;
    
}

@media screen and (max-height: 450px) {
    .lgfoverlay a {
        font-size: 20px
    }

    .lgfoverlay .lgf_closebtn {
        position: absolute;
        top: -22px;
        right: 11px;
        font-size: 50px;
    }
}

.lgf_closebtn {
    color: #0f0c31;
    text-decoration: none;
    font-size: 51px;
    z-index: 1;
    position: absolute;
    top: -5%;
    right: -3%;
    cursor: pointer;
}

.lgf_closebtn:hover {
    text-decoration: none;
}

.lgf_gameinstructionboximg {
    width: 80%;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
    border: 2px solid #0056ad;
    padding: 112px 40px;
    background: #fff;
    width: 550px;
    opacity: 0.8;
    color: #013b83;
    border-radius: 25px;
    top: 19%;
    left: 3%;
}

#lgf_gamemsglayerdivins {
    position: absolute;
    text-align: center;
    display: none;
    z-index: 1;
    cursor: default;
    top: 25%;
    left: 3%;
}

.lgf_gameinstructpglayernxtbtnimg1 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-left: 0px;
    padding-bottom: 17px;
}

.lgf_gameinstructpglayernxtbtnimg_new {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    padding-top: 35px;
    padding-left: 0px;
    padding-bottom: 17px;
}

.lgfgameinstructiontext ul {
    list-style: none;
    padding: 0px;
    padding-top: 10px;
    line-height: 26px;
}

.lgfSidemenuWrap,
.lgfcaption {
    width: 100%;
    margin-top: -10px;
}

.lgf_captionright {
    width: 100%;
    margin-left: 5px;
    margin-top: -30px;
}

h1x {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 1s infinite linear;
}

@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }

    to {
        -webkit-filter: hue-rotate(360deg);
    }
}

.lgf_gameinstructpglayernxtbtnimg {
    background-repeat: no-repeat;
    background-image: url(../../app/assets/images/gamebglogo.png);
}

@-webkit-keyframes lgf_playm {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -780px;
    }
}

@-webkit-keyframes lgf_playn {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3900px;
    }
}

@-moz-keyframes lgf_playm {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -780px;
    }
}

@-moz-keyframes lgf_playn {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -3900px;
    }
}

@keyframes lgf_playm {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -780px;
    }
}

@keyframes lgf_playn {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3900px;
    }
}

.lgf_bgclass1 {
    width: 600;
    position: relative;
    z-index: 10;
}

.lgfdivsnowx {
    width: 35px;
    background-image: url(../../app/assets/images/blinking_star.png);
    height: 35px;
    border-radius: 60%;
    position: absolute;
    bottom: 5%;
    -webkit-animation: bounce 2.5s infinite;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, -400px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    40% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    55% {
        -webkit-transform: translate3d(0, -100px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    70% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    85% {
        -webkit-transform: translate3d(0, -40px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translate3d(0, 0px, 0);
    }
}

@keyframes bounce {
    from {
        background-position: 0px 0px;
    }

    to {
        background-position: 0px 0px;
    }
}

.lgf_divsflowerx {
    width: 107px;
    height: 96px;
    background-image: url(../../app/assets/images/blast_decoration1.png);
    -webkit-animation: lgf_play1 .9s steps(8) infinite;
    -moz-animation: lgf_play1 .9s steps(8) infinite;
    -ms-animation: lgf_play1 .9s steps(8) infinite;
    -o-animation: lgf_play1 .9s steps(8) infinite;
    animation: lgf_play1 .9s steps(8) infinite;
}

@keyframes lgf_play1 {
    from {
        background-position: 824px 0px;
    }

    to {
        background-position: 0px;
        824px;
    }
}

.lgfdivsnowx {
    width: 350px;
    background-image: url(../../app/assets/images/gamestars_bsg.png);
    height: 350px;
    position: absolute;
    top: 2%;
    left: 18%;
    animation-delay: 2s;
    -webkit-animation: bounce 20s infinite;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, -400px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    40% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    55% {
        -webkit-transform: translate3d(0, -100px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    70% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    85% {
        -webkit-transform: translate3d(0, -40px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translate3d(0, 0px, 0);
    }
}

@keyframes bounce {
    from {
        background-position: 0px 0px;
    }

    to {
        background-position: 0px 600px;
    }
}


/*
--------------------------------------
*/

.lgfbox {
    width: 420px;
    height: 420px;
    border-radius: 5px;
    /* box-shadow: 0 2px 30px rgba(black, .2);*/
    background: lighten(#f0f4c3, 10%);
    position: relative;
    /*overflow: hidden;*/
    transform: translate3d(0, 0, 0);
}

.lgfwave {
    opacity: .6;
    position: absolute;
    background: #0af;
    width: 420px;
    height: 420px;
    margin-left: -250px;
    margin-top: -250px;
    transform-origin: 50% 48%;
    border-radius: 53%;
    animation: drift 3000ms infinite linear;
    top: 44%;
    left: 72%;
}

.lgfwave.-three {
    animation: drift 5000ms infinite linear;
}

.lgfwave.-two {
    animation: drift 7000ms infinite linear;
    opacity: .1;
    background: yellow;
}

.lgfbox:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .7));
    z-index: 11;
    transform: translate3d(0, 0, 0);
}

.lgf_titlex {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    line-height: 5px;
    text-align: center;
    transform: translate3d(0, 0, 0);
    color: #ad1457;
    font-size: 28px;
    text-indent: 3.3em;
}

@keyframes drift {
    from {
        transform: rotate(0deg);
    }

    from {
        transform: rotate(360deg);
    }
}

.letsgofishingrow {
    height: 100%;
}

.lgfgamelevel1 {
    margin: 0 auto;
    position: absolute;
    top: 35% !important;
    left: 12%;
    text-align: center;
}

.lgf_bgclass1 {
    width: 596px;
    position: absolute;
    height: 100px;
    top: 0px;
}

.lgf_starfall {
    animation: lgf_starjump 1s;
    animation-fill-mode: both;
    width: 15px;
    height: 20px;
    position: absolute;
}

.lgf_starfall img {
    width: 100%;
    height: 100%;
}

@keyframes lgf_starjump {
    0% {
        top: 0px;
        opacity: .3;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: 325px;
    }
}

.lgfSidemenuWrap,
.lgfcaption {}


/* iphone starts bala */


/* Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
    .lgf_gameinstructpglayernxtbtnimg {
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
        width: 100%;
        height: 82%;
        background-size: 100% 100%;
        margin-top: 14%;
    }

    .lgf_bgclass1 {
        margin: 1px auto !important;
        left: 10%;
        Width: 80%;
        top: 0%;
    }

    .lgfballoom_image {
        margin: 100px auto !important;
    }

    #lgf_gamemsglayerdivins {
        top: 34%;
        left: 10%;
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .letsgofishingMainPage {
        width: 980px;
    }

    .lgf_helpinstruction {
        position: absolute;
        top: 17%;
        right: 10%;
        z-index: 10;
    }

    .lgf_gameinstructionbtnimg {
        width: 30px;
        height: 31px;
        margin: 5px;
        background-size: 100% 100%;
    }

    .startlgf_go {
        top: 70%;
        left: 8%;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .lgf_go1_layer {
        top: -3%;
        left: 7.5%;
    }

    .lgfballoom_image_pg1 {
        margin: 100px auto;
    }

    .startlgf_go_pg1 {
        top: 70%;
        left: 7.5%;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .lgf_imagecls {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .lgf_go3_layerx {
        top: 34%;
        left: 10%;
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .lgf_left_layer {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .lgf_bgclass_game {
        margin: -19px !important;
    }

    #lgfgamemsglayerdivins1 {
        top: 34%;
        left: 10%;
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .lgf_go4_layerx {
        top: 34%;
        left: -4%;
    }

    .lgfcaption {
        margin-top: -18px;
        margin-left: 8px;
    }

    .lgf_left_layer {
        margin: -40px;
        margin-left: -30px;
    }

    .lgf_left_layerx {
        margin-top: 5%;
    }

    .lgf_width100 {
        margin-left: -38px;
        margin-top: -17px;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    #lgf_countdownCircle {
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .lgf_clockbase {
        top: -34%;
        left: -27%;
        transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        -webkit-transform: scale(0.85, 0.85);
    }

    .lgf_timeralign {
        margin: 10px auto;
        left: -17%;
    }

    .lgf_captionright {
        margin-top: 0px;
    }

    .lgfmainclass {
        margin-top: 20% !important;
    }

    .lgf_gameinstructpglayernxtbtnimg {
        margin-left: 4px;
    }
}



@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: portrait) {}

/* iphone Ends*/

/* Ipad start bala */

/*----------------ipad both orient-----------------*/
@media screen and (min-width: 768px) and (max-width: 1024px) {}

/*----------------ipad landscape-----------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .letsgofishingMainPage {
        width: 1024px;
    }

    .lgfp1container {
        margin-left: -2.5% !important;
    }

    .lgf_bgclass1 {
        width: 100%;
    }

    .lgfballoom_image img {
        Width: 100%;
    }

    .lgfballoom_image {
        margin: 43px auto !important;
    }

    .lgf_helpinstruction {
        top: 9.5%;
        right: 1%;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    /* .lgf_gameinstructpglayernxtbtnimg {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
        width: 600px !important
    } */

    .lgf_go1_layer {
        position: absolute;
        top: 4%;
        left: -12.5%;
    }

    .startlgf_go {
        top: 80% !important;
        left: 9.5% !important;
    }

    .lgfBOverlaycont {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    #lgf_gamemsglayerdivins {
        top: 32%;
        left: -5% !important;
    }

    .xfact {
        margin-left: -6.5% !important;
    }

    .lgfballoom_image_pg1 {
        margin: 14px auto !important
    }

    .lgfballoom_image_pg1 img {
        width: 100%;
    }

    .lgf_go3_layerx {
        top: 32%;
        left: -5% !important;
    }

    .startlgf_go_pg1 {
        top: 80% !important;
        left: -2% !important;
        width: 98%;
    }

    .lgf_bgclass_game {
        margin-left: 3px !important;
    }

    .lgf_width100 {
        margin: 10%;
        left: -12% !important;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        padding: 10px;
    }

    #lgf_countdownCircle {
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
        margin-left: 13% !important;
    }

    .lgf_clockbase {
        top: -29%;
        left: -19%;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .lgfmainclass {
        /* height: 530px !important; */
        margin-top: 3.8% !important;
    }

    .lgf_captionright {
        width: 100%;
        margin-left: -2% !important;
        margin-top: -40px !important;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .lgf_left_layerx {
        margin-left: 7px;
    }

    .lgf_imagecls {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .lgf_left_layer {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
        margin-left: 7% !important;
    }

    .lgfSidemenuWrap,
    .lgfcaption {
        margin-top: -8% !important;
        margin-left: -10px !important;
        transform: scale(0.95, 0.95);
        -ms-transform: scale(0.95, 0.95);
        -webkit-transform: scale(0.95, 0.95);
    }

    .lgf_go4_layerx {
        top: 32% !important;
        left: -11% !important;
    }

    .lgf_timeralign {
        margin-left: -5.5% !important;
    }

    .lgfp0row .balloom_imagex {}

    .lgfp0row .abcgame_optgamethumbnail {
        height: 80%;
    }

    .lgfp0row .abcgame_abcpickrecommendedgame {
        height: 55%;
    }

    .lgfp0row {
        height: 85%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-top: 4%;
        flex-direction: row;
    }

    .lgfp0row .abcgame_optgamethumbnail {
        height: 100%;
    }

    .lgfp0row .abcgame_abcpickrecommendedgame {
        height: 62%;
    }

    .lgfp1container .lgfp1row {
        height: 97%;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        margin-top: 4%;
        flex-direction: row;
        margin-left: 28%;
        margin-top: -1%;
    }
}

/*----------------ipad portrait-----------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .lgfp0row .abcgame_abcpickrecommendedgamewrap {
        height: 100%;
        width: 88%;
        margin-left: 6%;
    }

    .lgfp0row .abcgame_optgamethumbnail {
        height: 80% !important;
    }

    .lgfp0row .abcgame_abcpickrecommendedgame {
        height: 56%;
    }

    .popgamelevel1 {
        margin: 0 auto;
        position: absolute;
        top: 35% !important;
        left: 12%;
        text-align: center;
    }

    .letsgofishingMainPage {
        width: 100% !important;
    }

    lgfp1row {
        width: 100% !important;
    }

    .lgfp0row {
        margin-top: -10%;
        height: 50%;
    }

    .lgfp0container {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        width: 100% !important;
        margin-top: 10%;
        height: 50%;
    }

    .letsgofishingpage0 {
        margin-top: -15%;
        /* height: 500px;*/
    }

    .lgftheballoonPages {
        height: 600px !important;
    }



    .lgfp1container .startletsgofishingrow {
        height: 81%;
        width: 100%;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        margin-top: 10%;
    }

    . lgfp0container .lgfp1row .lgfp0row {
        height: 50% !important;
    }

    . lgfp0container .lgfp1row {
        width: 66%;
    }

    .lgf_go1_layer {
        top: 1% !important;
        /* left: 12% !important; */
    }

    .lgfp1container {
        margin-top: -7.5% !important;
    }

    /* .lgf_helpinstruction {
        right: 11% !important;
    } */

    .startlgf_go {
        top: 85% !important;
        left: 22.5% !important;
    }

    #lgf_gamemsglayerdivins {
        left: 13.5% !important;
    }

    .lgf_go3_layerx {
        left: 13.5% !important;
    }

    .startlgf_go_pg1 {
        top: 84% !important;
        left: 9.5% !important;
        width: 80%;
    }

    .lgfmainclass {
        width: 100% !important;
        margin-top: 18% !important;
    }

    .lgf_modedivborder {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .lgf_imagecls {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
        margin-left: 14% !important;
    }

    .lgf_width100 {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .lgfSidemenuWrap,
    .lgfcaption {
        margin-top: -19.5% !important;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .lgf_left_layer {
        margin-left: 11% !important;
    }

    .lgf_width100 {
        margin-left: -4px !important;
        margin-top: -9px !important;
        width: 300px !important;
    }

    .lgf_captionright {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        margin-top: -12% !important;
        margin-left: -5% !important;
    }

    .lgf_timeralign {
        left: -2% !important;
        margin-top: 10% !important;
    }

    .lgf_clockbase {
        transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        -webkit-transform: scale(0.85, 0.85);
        top: -32% !important;
        left: -30% !important;
    }

    #lgf_countdownCircle {
        transform: scale(0.65, 0.65);
        -ms-transform: scale(0.65, 0.65);
        -webkit-transform: scale(0.65, 0.65);
        margin-left: 12% !important;
    }

    .lgf_go4_layerx {
        transform: scale(0.6, 0.6);
        -ms-transform: scale(0.6, 0.6);
        -webkit-transform: scale(0.6, 0.6);
        left: 7% !important;
        top: 18% !important;
    }
}

@media only screen and (min-device-width:768px) and (max-device-width:1366px) {
    .startlgf_go {
        top: 83%;
        left: 11.5%;
    }

    #lgf_gamemsglayerdivins {
        top: 32%;
        left: 3%;
    }

    .lgf_go3_layerx {
        top: 32%;
        left: 3.5%;
    }

    .startlgf_go_pg1 {
        top: 83%;
    }

    .lgf_bgclass_game {
        margin: -20px auto !important;
    }

    .lgfSidemenuWrap,
    .lgfcaption {
        width: 96%;
        margin-top: -6px;
    }



    .lgf_go4_layerx {
        top: 32%;
        left: 3.5%;
    }

    .lgf_captionright {
        margin-top: -12px;
        margin-left: 15px;
    }

    .lgfp1container {
        height: 100%;
        margin: 0px;
        display: block;
        margin-top: 15px;
    }

    .lgfp0container {
        height: 100%;
        margin: 0px;
        display: block;
        margin-top: 0px;
    }

    .startletsgofishingrow {
        margin-top: 0px;
        height: 100%;
    }

    .lgfContainerGame {
        margin-top: 18px;
    }

    /*.lgfballoom_image, .lgfballoom_image_pg1 {
		height: 100%;
	}
	.lgfballoom_image img, .lgfballoom_image_pg1 img {
		height: 100%;
		width: 100%;
	}
	.lgfmainclass{
		height: 100% !important;
	}
	.xfact .lgf_bgclass_game{
		margin-top: 0% !important;
	}
	.lgfgame_div canvas, .lgfgame_div {
		height: 100% !important;
	}*/
}

@media(max-height:680px) and (max-width:1366px) {
    .lgfp1container {
        height: 520px !important;
        margin-top: 10px !important;
    }

    .lgf_go1_layer {
        left: 5.5%;
        top: 8% !important;
    }

    .lgf_helpinstruction {
        right: 6%;
        top: 0% !important;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .startletsgofishingrow.lgfp1row {
        margin: 7px auto !important;
        float: none;
    }

    .startletsgofishingrow.lgfpxrow {
        margin: -3px auto !important;
        float: none;
    }

    /* .lgf_gameinstructpglayernxtbtnimg {
        transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        -webkit-transform: scale(0.85, 0.85);
        width: 100% !important;
    } */

    #lgf_gamemsglayerdivins {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        left: 12.5% !important;
    }

    .lgf_go3_layerx {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        left: 12.5% !important;
    }

    .lgf_go4_layerx {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        left: 1.5% !important;
    }

    .startlgf_go {
        top: 83%;
        left: 10.5%;
    }

    .startlgf_go_pg1 {
        top: 83%;
        left: 3.5%;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .lgf_imagecls {
        margin-left: 4% !important;
    }

    .lgfContainerGame {
        margin-top: 3%;
    }

    .lgf_captionright {
        margin-top: -3px !important;
        margin-left: 15px;
    }

    .lgfSidemenuWrap,
    .lgfcaption {
        width: 96%;
        margin-top: -3px !important;
    }
}

#lgfgame_div canvas {}

/*Surya Mobile CSS For LGF */
.letsgofishing-show-for-mobile-port {
    display: none;
}

.letsgofishing-hide-for-mobile-port {
    display: block;
}

.lgfSidemenuWrap .letsgofishing-hide-for-mobile-port {
    padding-left: 61px;
    padding-right: 61px;
}

@media (min-width: 320px) and (max-width: 464px) and (orientation: portrait) {
    .letsgofishing-show-for-mobile-port {
        display: block;
    }

    .letsgofishing-hide-for-mobile-port {
        display: none;
    }

    .letsgofishingMainPage,
    .letsgofishingpage0,
    .letsgofishingContainer.lgfp0container,
    .startletsgofishingrow,
    .ng-scope.layout-align-start-stretch.layout-row.flex {
        height: 100%;
    }

    .startletsgofishingrow.lgfp1row {
        width: 75%;
        height: 84%;
        margin: 2% auto;
    }

    .letsgofishingContainer.lgfp0container {
        position: absolute;
    }

    .letsgofishingpage3 .letsgofishingContainer.lgfp1container {
        position: absolute;
        top: 0;
        height: 100% !important;
    }

    .lgfgameelementcenter.lgf_go1_layer {
        width: 100%;
    }

    .startlgf_go_pg1.pop_gobtn_layer .letsgofishingpage3 .lgfgameelementcenter {
        height: 100%;
        background-repeat: no-repeat;
    }

    .lgfgameelementcenter .lgf_gameinstructpglayernxtbtnimg {
        background-size: contain;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        left: 0;
        top: 5%;
    }

    .startletsgofishingrow .startlgf_go_pg1.pop_gobtn_layer {
        height: 32px !important;
    }

    .startletsgofishingrow .startlgf_go_pg1.pop_gobtn_layer button {
        background-size: contain;
        background-repeat: no-repeat;
        border: 0;
    }

    .letsgofishingpage4 {
        height: 100% !important;
    }

    .letsgofishingpage4 .letsgofishingrowborder {
        height: 100px !important;
        min-height: 100px !important;
    }

    .letsgofishingpage4 .letsgofishingrowborder:nth-of-type(2) {
        transform: scale(.7, .7);
        min-height: 75% !important;
        position: absolute;
        top: 60px;
    }

    .letsgofishingpage4 .letsgofishingrowborder:nth-of-type(3) {
        position: absolute;
        bottom: 20px;
    }

    .letsgofishingpage4 .letsgofishingrowborder:last-child .xfact {
        height: 100%;
    }

    .letsgofishingpage4 .letsgofishingrowborder:last-child .lgf_bgclass_game,
    .letsgofishingpage4 .letsgofishingrowborder:last-child .lgfContainerGame {
        height: 100%;
        ;
    }

    .letsgofishingpage4 .lgfContainerGame {
        padding-left: 8%;
    }

    .letsgofishingpage4 .lgfSidemenuWrap {
        margin-top: 10px;
        height: 100% !important;
    }

    .letsgofishingpage4 .letsgofishingrowborder {
        width: 100%;
    }

    .letsgofishingpage4 .lgf_gameDivfull {
        width: 38%;
        float: left;
    }

    .letsgofishingpage4 .lgf_gameDivfull .lgf_imagecls {
        height: 100%;
    }

    .letsgofishingpage4 .lgf_left_layer {
        width: 30%;
        float: left;
        height: 50px !important;
        margin-top: 3%;
    }

    .letsgofishingpage4 .lgf_modedivborder {
        background-size: contain;
        width: 100%;
        height: 100%;
    }

    .letsgofishingpage4 .lgf_lvltxt {
        left: 30%;
        top: 12% !important;
    }

    .letsgofishingpage4 .lgf_width100 {
        width: 40%;
        float: right;
        margin-top: -50px;
        margin-right: -15px;
    }

    .letsgofishingpage4 .lgfgameelementcenter.lgf_timeralign #lgf_countdownCircle {
        display: none;
    }

    .lgfgameelementcenter.lgf_timeralign {
        background: none !important;
        width: 45%;
        float: right;
        margin-right: -40px;
        margin-top: 20px;
    }

    .letsgofishingpage4 .lgf-right-section .lgf_left_layerx {
        margin-left: 2%;
        width: 40%;
        float: left;
        bottom: -10%;
        position: relative;
        margin-top: 14%;
    }

    .letsgofishingpage4 .lgf-right-section .lgf_width100 {
        float: left;
        width: 20%;
        margin-top: 14%;
    }

    .letsgofishingpage4 .lgf-right-section .lgf_ra-star-o {
        width: 20px;
        height: 20px;
        background-size: contain;
    }

    .letsgofishingpage4 .lgf-right-section .lgf_timeremaining,
    .letsgofishingpage4 .lgf-right-section .lgf_timermode {
        color: #fff;
        
    }

    .letsgofishingpage4 .lgf-right-section .lgf_timermode {
        top: 30% !important;
    }

    .letsgofishingpage4 .lgf-right-section #lgf_gamelvlintdication {
        top: 44% !important;
        font-size: 15px;
        color: #fff;
        left: 0;
    }

    .letsgofishingpage4 .lgf-right-section #lgf_countdownNumber {
        background-color: #f16444;
        color: #fff;
        width: 40%;
        left: 30%;
        margin: 0 auto;
        font-size: 14px;
    }
}

/* All mobile devices for lgf */

/* All mobile devices for lgf */
@media only screen and (max-device-width: 767px) {

    .letsgofishingMainPage,
    .letsgofishingMainBackground {
        width: 100%;
    }

    .letsgofishingMainPage .abcgame_abcpickrecommendedgamewrap {
        height: 100% !important;
        z-index: initial !important;
    }

    .letsgofishingMainPage .abcgame_abcpickrecommendedgame button {
        bottom: 8%;
    }

    .letsgofishingMainPage .abcgame_abcpickoptionalgamelist button:nth-of-type(2) {
        top: 80%;
    }

    .lgfgameelementcenter.lgf_go1_layer,
    .startlgf_go,
    .startlgf_go_pg1 {
        position: absolute;
    }

    .lgf_gameinstructpglayernxtbtnimg {
        background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/gamebglogo.png");
        position: absolute;
        top: 0;
        left: -30px;
    }

    .lgfballoom_image .lgf_bgclass,
    .lgfballoom_image_pg1 .lgf_bgclass {
        width: 100% !important;
        height: 100% !important;
    }

    .lgftheballoonPages {
        min-height: 100% !important;
        max-height: 100% !important;
        height: 90% !important;
    }

    .letsgofishingpage3 .lgfballoom_image_pg1 {
        height: 100% !important;
    }

    .lgfballoom_image {
        margin-top: 0;
    }

    .startlgf_go_pg1.pop_gobtn_layer {
        height: 50px !important;
    }

    .lgf_helpinstruction {
        position: absolute;
        height: 50px;
        width: 50px;
    }

    .lgf_gameinstructionbtnimg {
        background-size: cover;
        height: 100%;
        width: 100%;
        border: 0;
    }

    .startlgf_go_pg1.pop_gobtn_layer {
        height: 50px;
        width: 100%;
        left: 0 !important
    }

    .lgfgamelevel_new,
    .col-sm-4.col-md-4.col-xs-4.lgfgameelementcenter {
        height: 100%;
    }

    #lgf_levelEasy,
    #lgf_levelMedium,
    #lgf_levelHard {
        background-size: cover;
        width: 100%;
        height: 100%;
    }

    .lgfBOverlaycont {
        top: 0 !important;
    }

    .lgf_go3_layerx {
        bottom: 40%;
        position: absolute;
        padding: 10px 10px;
    }

    .lgfBOverlaycont {
        top: 0 !important;
        padding: 10px 10px 10px 20px;
    }

    .lgf_BIclose.lgf_closebtn {
        background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/P_T_B_instructions_close.png);
        background-size: cover;
        height: 50px;
        width: 50px;
        display: inline-block;
        position: absolute;
        right: 0;
        top: 0;
    }

    .lgf_gameDivfull.lgfgameelementcenter.lgfLogoleft img {
        width: 100%;
    }

    .lgf_left_layer {
        height: 100px !important;
    }

    .lgf_modedivborder {
        position: relative !important;
        background-repeat: no-repeat;
    }

    .lgf_lvltxt {
        font-size: 24px;
        
        color: #ffffff;
        letter-spacing: 8px;
        font-family: "Arial";
        font-style: normal;
        /* font-variant: common-ligatures small-caps; */
        position: absolute;
        left: 32%;
        top: 20% !important;
    }

    .lgf_modedivborder,
    .lgf_left_layerx,
    #lgf_gamestarsrating {
        height: 100%;
    }

    #lgfgame_div,
    .lgfgame_div {
        top: 0;
        position: absolute;
    }

    .lgf_gameinstructionbtnimgpg,
    .lgf_gamepausebtnimg,
    .lgf_gamerestartbtnimg {
        background-size: cover;
        height: 50px;
        width: 50px;
        display: inline-block;
        border: 0;
    }

    .col-sm-12.col-md-12.lgfgameelementcenter.lgf_timeralign {
        height: 100%;
    }

    #lgf_countdownCircle {
        height: 175px;
    }

    .col-sm-12.col-md-12.lgfgameelementcenter.lgf_timeralign {
        height: 100%;
    }

    .lgf_clockbase {
        height: 110px;
        text-align: center;
        background-size: 70%;
        background-repeat: no-repeat;
        background-position-y: -70px;
        background-position-x: 30px;
    }

    .lgf_go4_layerx {
        position: absolute;
        top: 20%;
    }

    .col-sm-12.col-md-12.lgfgameelementcenter.lgf_timeralign {
        background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abclgf/image/clockbase.png);
        background-size: contain;
        background-position-y: 60px;
        background-position-x: -10px;
        background-repeat: no-repeat;
    }

    .lgf_clockbase {
        height: 150px;
        text-align: center;
        background-image: none !important;
        top: 10px;
        position: relative;
    }

    .lgf_timeremaining {
        top: 9% !important;
        position: absolute;
        left: 22%
    }

    .lgf_timermode {
        top: 38% !important;
        position: absolute;
        left: 28%;
    }

    #lgf_countdownNumber {
        top: 17% !important;
        position: absolute;
        left: 44%
    }

    #lgf_gamelvlintdication {
        top: 48% !important;
        position: absolute;
        left: 40%
    }

    #lgf_countdownStartdate {
        display: none;
    }

    .lgf_left_layerx {
        margin-left: 15%;
    }

    .lgf_ra-star-o {
        background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_outline.png);
        background-repeat: no-repeat;
        width: 45px;
        height: 45px;
        /* margin-right: 20px; */
        margin-bottom: 10px;
        transform: scale(.9, .9);
        display: inline-block;
    }

    .lgf_ra-star {
        background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_fill.png);
        background-repeat: no-repeat;
        display: inline-block;
        width: 45px;
        height: 45px;
        margin-bottom: 10px;
        transform: scale(.9, .9);
        display: inline-block;
    }
}

/* lets go fishing game css Ends here */

/*Game pop the balloon*/

.center-div {
    /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */
    /*
  Yep!
  */
    transform: translate(0%, 11%);
    /*
  Not even necessary really.
  e.g. Height could be left out!
  */
    width: 50%;
    height: 50%;
}

.balloom_imagex button {
    background-color: transparent;
}

.poptheballoonMainPage {
    max-width: 1200px;
    margin: 0 auto;
}

.poptheballoonMainBackground {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.balloom_imagex {
    text-align: center;
}

.poptheballoonspage0,
.poptheballoonspage1,
.poptheballoonspage2,
.poptheballoonspage3,
.poptheballoonspage4,
.poptheballoonspage5 {
    width: 100%;
    height: 100%;
    float: left;
    font-family: "Arial" !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.poptheballoonspage0 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.poptheballoonspage1 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.poptheballoonspage2 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.poptheballoonspage3 {
    margin: 0px !important;
    background-repeat: no-repeat;
}

.poptheballoonspage4 {}

.popp1container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popp0container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.popp0container {
    /* display: flex;
    flex-direction: column;
    justify-content: center;*/
}

.popp1row,
.popp0row {
    margin: 0 auto;
}

.poptheballoonContainer {
    /*     width: 100%; */
    display: flex;
    align-items: center;
    height: 100%;
}

.poptheballoonrow {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.startpoptheballoonrow {
    padding-left: 0px !important;
    padding-right: 0px !important;
    /*margin:0 auto;*/
}

.poptheballoonContainer .row {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.startshoot_go {
    text-align: center;
    top: 88%;
    position: absolute;
    left: 8%;
    margin: 0 auto;
}

h3.center {
    text-align: center;
}

h4.center {
    text-align: center;
    color: #C2D69A;
}

.paddinglr30 {
    padding-left: 0px;
    padding-right: 0px;
}

.popballoonmainclass {
    /*     height: 600px !important; */
}

.btngamestart {}

.balloom_image {
    text-align: center;
}

.balloom_image img {
    width: auto;
    height: 100%;
}

.balloom_image_pg1 {
    text-align: center;
}

.balloom_image_pg1 img {
    width: auto;
    height: 100%;
}

.instruct_balloom_image {
    text-align: center;
}

.instruct_balloom_image img {
    width: auto;
    height: 100%;
}

.gamemode_balloom_image {
    text-align: center;
}

.gamemode_balloom_image img {
    width: auto;
    height: 100%;
}

.guidelineaudio {
    padding: 25px
}

.shoot_imgdiv {
    float: left;
}

.gameelementcenter {
    text-align: center;
}

.popLogoleft {
    width: 100%;
    height: 38%;
}

.result_gameelementcenter {
    text-align: center;
    background-color: #f9bb93;
}

.level_gameelementcenter {
    text-align: center;
    padding: 15px;
}

.gameelementright {
    text-align: right;
}

.imagecls {
    width: auto;
    height: 200px;
}

.poptheballoonrowborder {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.gamebtnbg {
    background-color: #C2D69A !important;
}

.mainpage_center {
    text-align: center;
}

.mainpage_gameelementright {
    text-align: right;
}


/*star rating css starts here */

.fa-star-o {
    color: #FF7700;
    cursor: default;
}

.fa-star {
    color: #FFDD00;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FF7700;
    cursor: default;
}

.isReadonly {
    .fa-star-o {
        color: #000000;
    }

    .fa-star {
        color: #DCDCDC;
        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: #000000;
    }
}

h4.gamemode {
    margin: 3px;
    float: center;
    text-align: center;
}

.nocls {
    padding: 1px;
}


/*star rating css End here */

.gameBadgeDisabled {
    position: absolute;
    top: 70%;
    left: 38%;
}

.gameBadgeEnabled {
    opacity: 0.0;
}

.gameDivfull {
    width: 100%;
}


/*Pop the Balloons style Starting here*/

div.gallery {
    margin: 10px;
    float: left;
    padding-left: 12px;
}

div.gallery:hover {
    /*border: 1px solid #777;*/
}

div.gallery img {
    height: auto;
}

div.desc {
    padding: 2px;
    text-align: center;
}

div.divbg {
    background-color: lightblue;
}

.bgclass_game {
    margin: -10px auto !important;
}

.startshoot_go_pg1 {
    text-align: center;
    top: 88%;
    position: absolute;
    left: 12%;
    margin: 0 auto;
}

.modedivborder {
    height: 99px;
    width: 209px;
    background-repeat: no-repeat;
    padding-top: 10px;
    position: relative;
    margin: 0 auto;
}

.lvlmsg {
    font-size: 26px;
    
    color: #fff;
    Font-family: "Arial";
    font-style: normal;
    width: 100%;
    text-align: center;
}

.lvltxt {
    font-size: 31px;
    
    color: #fff;
    letter-spacing: 8px;
    font-family: "Arial";
    font-style: normal;
    font-variant: common-ligatures small-caps;
    position: absolute;
    left: 32.5%;
    bottom: 16%;
}


/* bala */


/*Pop the Balloons style Ends here*/


/*Pop the Rocket style Starting here*/

div.rgallery {
    margin: 5px;
    float: left;
    width: 100px;
    padding-left: 12px;
}

div.rgallery:hover {}

div.rgallery img {
    height: auto;
}

div.rdesc {
    padding: 3px;
    text-align: center;
}

div.rdivbg {
    background-color: lightblue;
}

#game_div {
    margin: 0 auto;
}

.circlecls {
    height: 150px;
    width: 150px;
    border: 10px solid red;
    border-radius: 50%;
    top: 10%;
    left: 10%;
}

#countdownCircle {
    position: relative;
    margin: auto;
    height: 245px;
    width: 276px;
    z-index: 2;
    text-align: center;
    animation-play-state: paused;
    -webkit-animation: popthebaloonplayc 60s steps(4) infinite, popthebaloonplayh 15s steps(15) infinite;
    -moz-animation: popthebaloonplayc 60s steps(4) infinite, popthebaloonplayh 15s steps(15) infinite;
    animation: popthebaloonplayc 60s steps(4) infinite, popthebaloonplayh 15s steps(15) infinite;
}

.timeralign {
    margin: 12px auto;
    left: -8%;
}

#gamelvlintdication {
    color: #fff;
    
    font-size: 24px;
    text-align: center;
    font-size: 23px;
    top: 65%;
    position: absolute;
    Width: 100%;
}

#countdownNumber {
    color: #fff;
    
    font-size: 24px;
    text-align: center;
    font-size: 25px;
    top: 31%;
    position: absolute;
    width: 100%;
    text-align: center;
}

#countdownStartdate {
    display: none;
}

@-webkit-keyframes popthebaloonplayc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -980px;
    }
}

@-webkit-keyframes popthebaloonplayh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -4140px;
    }
}

@-moz-keyframes popthebaloonplayc {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -980px;
    }
}

@-moz-keyframes popthebaloonplayh {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -4140px 0px;
    }
}

@keyframes popthebaloonplayc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -980px;
    }
}

@keyframes popthebaloonplayh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -4140px;
    }
}

@-webkit-keyframes popthebaloonplayc2 {
    background-position-y: 0px;
}

@-webkit-keyframes popthebaloonplayh2 {
    background-position-x: 0px;
}

@-moz-keyframes popthebaloonplayc2 {
    background-position: 0px 0px;
}

@-moz-keyframes popthebaloonplayh2 {
    background-position: 0px 0px;
}

@keyframes popthebaloonplayc2 {
    background-position-y: 0px;
}

@keyframes popthebaloonplayh2 {
    background-position-x: 0px;
}

#gamemsglayerdiv2 {
    position: relative;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 1;
}

#gamemsglayerdiv {
    position: absolute;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 1;
    top: 0px;
    left: 0px;
}

#gamepauselayerdiv {
    position: relative;
    background-color: #000000;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
}

#gameToPauseBtn {
    z-index: 1;
}

#gamemsgdiv,
#gamemsgdiv2 {
    position: absolute;
    left: 45%;
    top: 45%;
    background-color: #f1f1f1;
    width: 200px;
    padding: 10px;
    color: #000000;
    text-align: center;
    display: none;
}

#gamemsgdiv3 {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #008000;
    width: 180px;
    padding: 10px;
    color: #ffffff;
    text-align: center;
    display: none;
}

#gameinsructionmsgdiv2 {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #008000;
    width: 180px;
    padding: 10px;
    color: #ffffff;
    text-align: center;
    display: none;
}


/*Glow effect for the badge image*/

#badgeimg {
    left: 25px;
    top: 7px;
    position: absolute;
    display: none;
}

.pop_go2_layerx {
    position: absolute;
    top: 22%;
    left: 6%;
}

.pop_go3_layerx {
    position: absolute;
    top: 30%;
    left: 3%;
}

.pop_go4_layerx {
    position: absolute;
    top: 20%;
    left: 3%;
}

.pop_left_layerx {
    margin-top: 8%;
}

box:focus {
    outline: none;
}

#gamebadgeview {
    -webkit-animation: pulsescore 1.5s ease-in-out infinite alternate;
    -moz-animation: pulsescore 1.5s ease-in-out infinite alternate;
    animation: pulsescore 1.5s ease-in-out infinite alternate;
    animation-play-state: paused;
}

@keyframes pulsescore {
    from {
        transform: scale3d(0.5, 0.5, 0.5);
    }

    2% {
        transform: scale3d(1.25, 1.25, 1.25);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}


/*-- ends here--*/

.gamegobtnimg {
    width: 130px;
    height: 55px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: #000000;
    position: absolute;
    left: 39%;
    top: 88%;
}

.gamegobtnimghover {
    width: 130px;
    height: 55px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gamegonxtbtnimg {
    width: 125px;
    height: 55px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: #000000;
    position: absolute;
    left: 40%;
    top: 70%;
}

.gamegonxtbtnimghover {
    width: 125px;
    height: 55px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.pop_instrct ul {
    list-style: none;
    list-style-type: pop_instrct ul;
}

.titlex ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pop_go2 {
    position: absolute;
    top: 75%;
    left: 38%;
}

.helpinstruction {
    position: absolute;
    top: 1%;
    right: 2%;
    z-index: 10;
}

.pop_go1_layer {
    position: absolute;
    top: 70%;
    left: 38%;
}

.pop_go2_layer {
    position: absolute;
    top: 2%;
    left: 27%;
}

.pop_go3_layer {
    position: absolute;
    top: 22%;
    left: 12%;
    width: 456px;
    height: 290px;
}

.pop_go1_layer {
    position: absolute;
    top: 4%;
    left: 7%;
    width: 100%;
    height: 100%;
}

.pop_go1_layerx {
    position: absolute;
    top: 27%;
    left: 24%;
}

.pop_go1_layerxx {
    position: absolute;
    top: 27%;
    left: 61%;
}

.pop_instrct {
    position: absolute;
    top: 15%;
    left: 18%;
    line-height: 2.2;
    text-align: left;
    font-size: 16px;
    
    color: #0f0e31;
}

.pop_go3_layer1 {
    width: 100%;
    height: 100%;
    position: relative;
}

.pop_left_img {
    position: absolute;
    top: 6%;
    left: 24%;
}

.btntxtalign {
    text-align: left;
    display: inline-block;
    margin-left: -8px;
}



.gameinstructpglayerimg {
    width: 127px;
    height: 48px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.popgameinstructiontext {
    width: 250px;
    height: 60px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 24px;
    position: absolute;
    left: 30%;
    top: 8%;
    
    color: #ad1457;
}

.popgamemodetext {
    width: 218px;
    height: 60px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 25px;
    
    color: wheat;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 61px;
}

.popgamemodetext_new {
    width: 218px;
    height: 90px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 30px;
    
    color: wheat;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 61px;
}

.popgamemodetext_new1 {
    width: 218px;
    height: 60px;
    margin: 0px;
    background: none;
    background-repeat: repeat;
    background-repeat: no-repeat;
    border: none;
    font-size: 30px;
    
    color: wheat;
    text-align: center;
    margin: 20px auto;
    margin-bottom: 61px;
}

.popgamelevel {
    margin: 0 auto;
    position: absolute;
    top: 45%;
    left: 11%;
    text-align: center;
}

.popgamelevel_new {
    margin: 0 auto;
    top: 45%;
    left: 7%;
    text-align: center;
}

.popgamelevel1 {
    margin: 0 auto;
    position: absolute;
    top: 35%;
    left: 12%;
    text-align: center;
}

.pop_go3 {
    position: absolute;
    top: 72%;
    left: 43%;
}


.pop_left_layer_badge {
    position: absolute;
    top: 72%;
    left: 16%;
    margin: 3px auto;
}

.popgameplaybtnimg {
    width: 160px;
    height: 58px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: #000000;
}

.popgameplaybtnimghover {
    width: 160px;
    height: 58px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.countborder {
    width: 90px;
    padding: 11px;
    border: 6px solid #49d2d2;
    border-radius: 29px;
}

.popgameplaylvlbtnimg {
    width: 122px;
    height: 45px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 20px;
    
    color: #ffffff;
    margin: 0px;
    padding-bottom: 10px;
}

.popgameplaylvlbtnimghover {
    width: 122px;
    height: 57px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.playmodewithtimerbtnimg {
    width: 130px;
    height: 39px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 18px;
    
    color: #000000;
    margin: 0px;
}

.playmodewithtimerbtnimghover {
    width: 130px;
    height: 39px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

#playwithout {
    width: 216px;
    height: 63px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 20px;
    
    color: #ffffff;
    padding-bottom: 22px;
}

#playwith {
    width: 212px;
    height: 63px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 20px;
    
    color: #ffffff;
    padding-bottom: 22px;
}

.gamerestartbtnimg {
    width: 52px;
    height: 53px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gamehelpbtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gameHelpbtnimg {
    width: 52px;
    height: 53px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gameinstructionbtnimg {
    width: 65px;
    height: 65px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gameinstructionbtnimghover {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gameinstructionbtnimgpg {
    width: 52px;
    height: 53px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gameinstructionbtnimgpghover {
    width: 52px;
    height: 53px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gamepausebtnimg,
.gameplaybtnimg {
    width: 52px;
    height: 53px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gamemutebtnimg {
    width: 52px;
    height: 53px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
}

.gamemutebtnimg_instruct {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    top: 0%;
    left: 35%
}

.width100 {
    width: 100%;
    text-align: left;
    margin-left: 20px;
}

.gamelevelmodelftimg {
    width: 176px;
    height: 117px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: white;
    margin: 0px auto !important;
    padding: 6px !important;
}

.gamelevelmodefont {
    color: black;
}

.gamelevelview {
    padding: 20px;
}

#gameToPauseBtn {
    z-index: 1;
}

#gamestarsrating {
    width: 100%;
    text-align: center;
}

.ra-star-o {
    cursor: default;
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_outline.png");
    background-repeat: no-repeat;
    width: 56px;
    height: 55px;
    /*margin-right: 20px;*/
    margin-bottom: 10px;
    transform: scale(.95, .95);
    display: inline-block;
}

.ra-star {
    cursor: default;
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcpick/images/abcpick_star_fill.png");
    background-repeat: no-repeat;
    width: 56px;
    height: 55px;
    margin-bottom: 10px;
    transform: scale(.95, .95);
    display: inline-block;
}

.ra_star-half-o {
    cursor: default;
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gameratingstar_outline.png");
    background-repeat: no-repeat;
    width: 56px;
    height: 55px;
    margin-bottom: 10px;
    transform: scale(.95, .95);
    display: inline-block;
}

.poptheballoonPages {
    width: 100%;
    float: left;
    display: block;
    height: 100%;
}

#myNav {
    width: 80%;
    left: 10%;
}

.edgePadding {
    padding-left: 25px;
    padding-right: 25px;
}

.overlay {
    position: absolute;
    height: 250px;
    z-index: 1;
    background-color: #00c7ff;
    overflow-x: hidden;
    transition: 0.5s;
    top: 39%;
    left: 5%;
    opacity: 0.9;
    border: 2px solid #0f1031;
    border-radius: 25px;
}

.overlay-content {
    position: relative;
    top: 25%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
    color: #ffffff;
}

.overlay .closebtn {
    position: absolute;
    top: -22px;
    right: 11px;
    font-size: 50px;
}

.popBOverlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.clockbase {
    width: 209px;
    height: 280px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 80%;
    left: 19%;
}

.popBOverlaycnt {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    position: absolute;
    background: #000;
    opacity: .75;
}

.timeremaining {
    color: #FFF;
    
    text-align: center;
    font-size: 20px;
    top: 20%;
    position: absolute;
    right: 13.5%;
}

.timermode {
    color: #FFF;
    
    text-align: center;
    font-size: 20px;
    top: 54%;
    position: absolute;
    right: 23.5%;
}

.popBOverlaycont {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 560px;
    height: 297px;
    position: absolute;
    left: 3%;
    top: 21%;
    padding-top: 24px;
    padding-left: 6px;
}

.popBIclose {
    text-decoration: none;
    position: absolute;
    top: 17%;
    right: 10%;
    cursor: default;
    background-repeat: no-repeat;
    width: 36px;
    height: 36px;
    background-size: 100% 100%;
}

.instructionheader {
    color: #FFF;
    text-align: center;
    
    font-size: 26px;
    margin-top: -2.5%;
}

.instructstep div {
    margin-bottom: 8px;
    text-align: center;
}

.instructstep {
    color: #000;
    font-size: 18px;
    padding-top: 38px;
    
    margin-top: 7%;
}

@media screen and (max-height: 450px) {
    .overlay a {
        font-size: 20px
    }

    .overlay .closebtn {
        position: absolute;
        top: -22px;
        right: 11px;
        font-size: 50px;
    }
}

.closebtn {
    color: #0f0c31;
    text-decoration: none;
    font-size: 51px;
    z-index: 1;
    position: absolute;
    top: 0%;
    right: 2%;
    cursor: pointer;
}

.closebtn:hover {
    text-decoration: none;
}

.gameinstructionboximg {
    width: 80%;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
    border: 2px solid #0056ad;
    padding: 112px 40px;
    background: #fff;
    width: 550px;
    opacity: 0.8;
    color: #013b83;
    border-radius: 25px;
    top: 19%;
    left: 3%;
}

#gamemsglayerdivins {
    position: absolute;
    text-align: center;
    display: none;
    z-index: 1;
    cursor: default;
    top: 30%;
    left: 3%;
}

.gameinstructpglayernxtbtnimg1 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-left: 0px;
    padding-bottom: 17px;
}

.gameinstructpglayernxtbtnimg_new {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    padding-top: 35px;
    padding-left: 0px;
    padding-bottom: 17px;
}

.shootgameinstructiontext ul {
    list-style: none;
    padding: 0px;
    padding-top: 10px;
    line-height: 26px;
}

.popSidemenuWrap,
.caption {
    width: 98%;
    margin-top: -4px;
}

.captionright {
    width: 100%;
    margin-left: 25px;
    margin-top: 10px;
}

h1x {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 1s infinite linear;
}

@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }

    to {
        -webkit-filter: hue-rotate(360deg);
    }
}

.gameinstructpglayernxtbtnimg {
    background-repeat: no-repeat;
}

@-webkit-keyframes playm {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -780px;
    }
}

@-webkit-keyframes playn {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3900px;
    }
}

@-moz-keyframes playm {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -780px;
    }
}

@-moz-keyframes playn {
    0% {
        background-position: 0px;
    }

    100% {
        background-position: -3900px;
    }
}

@keyframes playm {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -780px;
    }
}

@keyframes playn {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -3900px;
    }
}

.bgclass1 {
    width: 600;
    position: relative
}

.divsnowx {
    width: 35px;
    height: 35px;
    border-radius: 60%;
    position: absolute;
    bottom: 5%;
    -webkit-animation: bounce 2.5s infinite;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, -400px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    40% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    55% {
        -webkit-transform: translate3d(0, -100px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    70% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    85% {
        -webkit-transform: translate3d(0, -40px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translate3d(0, 0px, 0);
    }
}

@keyframes bounce {
    from {
        background-position: 0px 0px;
    }

    to {
        background-position: 0px 0px;
    }
}

.divsflowerx {
    width: 107px;
    height: 96px;
    background-image: url(../../app/assets/images/blast_decoration1.png);
    -webkit-animation: play1 .9s steps(8) infinite;
    -moz-animation: play1 .9s steps(8) infinite;
    -ms-animation: play1 .9s steps(8) infinite;
    -o-animation: play1 .9s steps(8) infinite;
    animation: play1 .9s steps(8) infinite;
}

@keyframes play1 {
    from {
        background-position: 824px 0px;
    }

    to {
        background-position: 0px 824px;
    }
}

.divsnowx {
    width: 350px;
    background-image: url(../../app/assets/images/gamestars_bsg.png);
    height: 350px;
    position: absolute;
    top: 2%;
    left: 18%;
    animation-delay: 2s;
    -webkit-animation: bounce 20s infinite;
}

@-webkit-keyframes bounce {
    0% {
        -webkit-transform: translate3d(0, -400px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    40% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    55% {
        -webkit-transform: translate3d(0, -100px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    70% {
        -webkit-transform: translate3d(0, 0px, 0);
        -webkit-animation-timing-function: ease-out;
    }

    85% {
        -webkit-transform: translate3d(0, -40px, 0);
        -webkit-animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: translate3d(0, 0px, 0);
    }
}

@keyframes bounce {
    from {
        background-position: 0px 0px;
    }

    to {
        background-position: 0px 600px;
    }
}


/*
--------------------------------------
*/

.box {
    width: 420px;
    height: 420px;
    border-radius: 5px;
    background: lighten(#f0f4c3, 10%);
    position: relative;
    transform: translate3d(0, 0, 0);
}

.wave {
    opacity: .6;
    position: absolute;
    background: #0af;
    width: 420px;
    height: 420px;
    margin-left: -250px;
    margin-top: -250px;
    transform-origin: 50% 48%;
    border-radius: 53%;
    animation: drift 3000ms infinite linear;
    top: 44%;
    left: 72%;
}

.wave.-three {
    animation: drift 5000ms infinite linear;
}

.wave.-two {
    animation: drift 7000ms infinite linear;
    opacity: .1;
    background: yellow;
}

.box:after {
    content: '';
    display: block;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .7));
    z-index: 11;
    transform: translate3d(0, 0, 0);
}

.titlex {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
    line-height: 5px;
    text-align: center;
    transform: translate3d(0, 0, 0);
    color: #ad1457;
    font-size: 28px;
    text-indent: 3.3em;
}

@keyframes drift {
    from {
        transform: rotate(0deg);
    }

    from {
        transform: rotate(360deg);
    }
}

.bgclass1 {
    width: 596px;
    position: absolute;
    height: 100px;
    top: 0px;
}

.starfall {
    animation: starjump 2s;
    animation-fill-mode: both;
    width: 28px;
    height: 29px;
    position: absolute;
}

.starfall img {
    width: 100%;
    height: 100%;
}

@keyframes starjump {
    0% {
        top: 0px;
        opacity: .3;
    }

    99% {
        opacity: 1;
        top: 550px;
    }

    100% {
        opacity: 0;
        top: 550px;
    }
}



/* iphone starts bala */


/* Landscape */

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: landscape) {


    .popp1row,
    .popp0row {
        margin-top: 0px !important;
    }

    .startshoot_go {
        left: -1% !important;
        top: 93% !important;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .pop_go1_layer {
        position: absolute;
        left: -3% !important;
        top: -16% !important;
    }

    .helpinstruction {
        top: 4% !important;
        right: 2% !important;
    }

    .popBOverlaycont {
        transform: scale(0.6, 0.6);
        -ms-transform: scale(0.6, 0.6);
        -webkit-transform: scale(0.6, 0.6);
    }

    #gamemsglayerdivins {
        top: 13% !important;
        left: -1% !important;
    }

    .gameinstructionbtnimg {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .balloom_image {
        margin: -14px auto !important;
    }

    .bgclass1 {
        margin: 1px auto !important;
        left: 10%;
        Width: 80%;
        top: 0% !important;
    }

    .startshoot_go_pg1 {
        left: 2.5% !important;
        top: 88% !important;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .pop_go3_layerx {
        top: 13% !important;
        left: -1.5% !important;
    }

    .balloom_image_pg1 {
        margin: -14px auto !important;
    }

    .imagecls {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .pop_left_layer {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    /*.popSidemenuWrap{
		 transform: scale(0.8, 0.8);
	-ms-transform: scale(0.8, 0.8);
	-webkit-transform: scale(0.8, 0.8);
	}*/
    #countdownCircle {
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .poptheballoonspage4 {
        margin: 0px !important;
    }

    .bgclass_game {
        margin: -20px auto !important;
    }

    .modedivborder {
        margin: -63px auto;
        margin-left: 15px !important;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .popSidemenuWrap {
        height: 400px;
        margin-top: -30px;
        margin-left: 10%;
    }

    .pop_left_layerx {
        margin-top: 26% !important;
        margin-left: 4px !important;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    #countdownCircle {
        left: -35px !important
    }

    .clockbase {
        top: 55% !important;
        left: 6% !important;
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .timeralign {
        margin: -30px auto !important;
        left: -33px;
    }

    .width100 {
        margin-left: -20px !important;
    }

    #gameToPauseBtn {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .gameinstructionbtnimgpg {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .gameToResBtn {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .pop_go4_layerx {
        top: 15% !important;
        left: -8.5% !important;
    }

    .captionright {
        margin-left: 12px;
        margin-top: -2px;
    }

    #playwithout {
        font-size: 15px !important;
    }

    #playwith {
        font-size: 15px !important;
    }

    .popballoonmainclass {
        margin-top: 20% !important;
    }

    .balloom_image img,
    .balloom_image_pg1 img {
        margin-top: 6.5%;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: portrait) {}


/* iphone Ends*/


/* Ipad start bala */


/*----------------ipad both orient-----------------*/

@media screen and (min-width: 768px) and (max-width: 1024px) {}


/*----------------ipad landscape-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .balloom_image img {
        Width: 100% !important;
        margin-top: -7% !important;
    }

    .balloom_image {
        margin: 32px auto !important;
    }

    .helpinstruction {
        top: 0% !important;
        right: 2% !important;
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .gameinstructpglayernxtbtnimg {
        transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        -webkit-transform: scale(0.85, 0.85);
    }

    .pop_go1_layer {
        top: -5.5% !important;
        left: -1% !important;
    }

    .popp1container {
        /* margin-top: -8% !important;*/
        transform: scale(1.0, 1.0);
        -ms-transform: scale(1.0, 1.0);
        -webkit-transform: scale(1.0, 1.0);
    }

    .startshoot_go {
        top: 90% !important;
        left: -1.5% !important;
    }

    #playwithout {
        font-size: 17px !important;
    }

    #playwith {
        font-size: 17px !important;
    }

    .popBOverlaycont {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    #gamemsglayerdivins {
        top: 28% !important;
        margin-left: -9.5% !important;
    }

    .balloom_image_pg1 img {
        width: 100% !important;
    }

    .balloom_image_pg1 {
        margin: 0px auto !important;
        margin-top: -4.2% !important;
    }

    .startshoot_go_pg1 {
        top: 92% !important;
        left: 4% !important;
    }

    .pop_go3_layerx {
        top: 28% !important;
        margin-left: -8.5% !important;
    }

    .xfact {
        margin-left: -3% !important;
    }

    .width100 {
        margin-left: -25% !important;
        margin: 10% !important;
        left: -8% !important;
    }

    .pop_go4_layerx {
        top: 27% !important;
        margin-left: -9.5% !important;
    }

    .clockbase {
        left: 8% !important;
        top: 67% !important;
    }

    .imagecls {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .popSidemenuWrap,
    .caption {
        margin-top: -10px !important;
    }

    .timeralign {
        margin: -5px auto !important;
    }

    #countdownCircle {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        left: -36px !important;
    }

    .clockbase {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        left: 7% !important;
        top: 62% !important;
    }

    .popballoonmainclass {
        margin-top: 12.5% !important;
    }

    .captionright {
        margin-left: 31px !important;
        margin-top: -15px !important;
    }

    .popp1row,
    .popp0row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .popp0row {
        height: 88%;
    }

    .popp1row {
        margin-top: 3%;
    }

    .popp0row .abcgame_optgamethumbnail {
        height: 75%;
    }

    .popp0row .abcgame_abcpickrecommendedgame {
        height: 52%;
    }
}


/*----------------ipad portrait-----------------*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .popgamelevel1 {
        margin: 0 auto;
        position: absolute;
        top: 35% !important;
        left: 12%;
        text-align: center;
    }

    .popp1row {
        width: 100% !important;
    }

    .popp1container {
        margin-top: -8% !important;
        transform: scale(0.7, 0.7) !important;
        -ms-transform: scale(0.7, 0.7) !important;
        -webkit-transform: scale(0.7, 0.7) !important;
    }

    .pop_go1_layer {
        left: 16.5% !important;
        top: 1% !important;
    }

    .startshoot_go {
        left: 16.5% !important;
        top: 87% !important;
    }

    .helpinstruction {
        right: 15% !important;
    }

    #playwithout {
        font-size: 17px !important;
    }

    #playwith {
        font-size: 17px !important;
    }

    #gamemsglayerdivins {
        left: 13.5% !important;
    }

    .startshoot_go_pg1 {
        left: 21.5% !important;
    }

    .pop_go3_layerx {
        left: 13.5% !important;
    }

    .popballoonmainclass {
        margin-top: 25% !important;
    }

    .gameinstructpglayernxtbtnimg {
        transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        -webkit-transform: scale(0.85, 0.85);
    }

    .popSidemenuWrap,
    .caption {
        margin-top: -26% !important;
        width: 99% !important;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .captionright {
        margin-left: -2px !important;
        margin-top: -1px !important;
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .width100 {
        margin-left: 0px !important;
        width: 350px !important;
    }

    .timeralign {
        left: -4% !important;
    }

    .clockbase {
        top: 82% !important;
        left: 5% !important;
    }

    #countdownCircle {
        margin-left: -45px !important;
    }

    .pop_left_layerx {
        margin-left: 1% !important;
    }

    .pop_go4_layerx {
        transform: scale(0.65, 0.65);
        -ms-transform: scale(0.65, 0.65);
        -webkit-transform: scale(0.65, 0.65);
        top: 12%;
        left: 2% !important;
    }

    .popp0row {
        height: 510px;
        width: 525px;
    }

    .popp0row .abcgame_optgamethumbnail {
        height: 75%;
    }

    .popp0row .abcgame_abcpickrecommendedgame {
        height: 52%;
    }
}

@media only screen and (min-device-width: 767px) and (max-device-width:1366px) {
    .popp0row {
        margin-top: -35px;
        margin-bottom: -30px;
    }

    .balloom_imagex {
        height: 100% !important;
    }

    .popp1container {
        margin-top: -23px;
        transform: scale(1.0, 1.0);
        -ms-transform: scale(1.0, 1.0);
        -webkit-transform: scale(1.0, 1.0);
    }

    .helpinstruction {
        top: 3%;
        right: 4%;
    }

    .startshoot_go {
        top: 90%;
        left: 7%;
    }

    #gamemsglayerdivins {
        top: 31%;
    }

    .pop_go3_layerx {
        top: 31%;
    }

    .startshoot_go_pg1 {
        left: 10.5%;
        top: 90%;
    }

    .bgclass_game {
        margin: -20px auto !important;
    }

    .popSidemenuWrap,
    .caption {
        width: 96%;
    }

    .popp1row {
        margin-top: 3px;
    }

    .popp0row {
        height: 100%;
        /* margin-top: -17px;
		height: 617px;
		margin-bottom: -15px;
		margin: 0px auto;*/
    }

    .bgclass_game {
        margin: 1px auto !important;
    }

    .popSidemenuWrap,
    .caption {
        width: 98%;
        margin-top: 16px;
    }

    /* --- x ---*/
    /*.popp1container{
		height: 100%;
		margin: 0px;
		display: block;
	}
	.startpoptheballoonrow {
		margin-top: 0px;
		height: 100%;
	}
	.balloom_image, .balloom_image_pg1 {
		height: 100%;
	}
	.balloom_image img, .balloom_image_pg1 img {
		height: 100%;
		width: 100%;
	}
	.popballoonmainclass{
		height: 100% !important;
	}
	.xfact .bgclass_game{
		margin-top: 0% !important;
	}
	.game_div canvas, .game_div {
		height: 100% !important;
		margin-top:-3.5% !important;
	}*/
    /*--- x ---*/
    /*.balloom_image img {
		width: 100%;
		height: 104%;
		margin-top: -7px;
	}
	.balloom_image_pg1 img {
    width: 100%;
    height: 104%;
    margin-top: -7px;
	}*/
}

@media(max-height:680px) and (max-width:1366px) {

    .popp0row {
        /* margin-top: -19px !important;*/
    }

    .popp1container {
        height: 520px !important;
        margin-top: -36px !important;
        margin-left: -1% !important;
    }

    .popp0container {
        height: 542px !important;
        margin-top: -30px !important;
        margin-left: 0.5% !important;
        margin-bottom: -30px !important;
    }

    .popp1row {
        margin-top: -32px;
    }

    .helpinstruction {
        right: 7% !important;
        top: 7%;
    }

    .startshoot_go {
        top: 92%;
    }

    .startshoot_go_pg1 {
        top: 94%;
    }

    #gamemsglayerdivins {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
        left: 8%;
    }

    .pop_left_layer {
        transform: scale(0.85, 0.85);
        -ms-transform: scale(0.85, 0.85);
        -webkit-transform: scale(0.85, 0.85);
        padding-top: 2% !important;
    }

    .pop_left_layerx {
        margin-top: 4%;
    }


    .pop_go3_layerx {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
        left: 7.5%;
    }

    .balloom_image img {
        margin-top: 5.5%;
    }

    .popLogoleft {
        transform: scale(0.95, 0.95);
        -ms-transform: scale(0.95, 0.95);
        -webkit-transform: scale(0.95, 0.95);
        margin-top: -10px !important;
    }

    .captionright {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    .pop_go4_layerx {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
        left: 1.5%;
    }

    .popp0row {
        height: 95% !important;
        margin-top: -28px !important;
    }

    .balloom_image_pg1 img {
        margin-top: 5.8% !important;
    }

    .popSidemenuWrap,
    .caption {
        width: 96%;
        margin-top: 4% !important;
    }

    .bgclass_game {
        margin: 0px auto !important;
    }
}

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

    .popp0container,
    .balloom_imagex,
    div.poptheballoonspage0 div div.startpoptheballoonrow.col-xs-3.col-sm-6.col-md-6.col-lg-6.popp0row {
        height: 100% !important;
    }

    .popp0row {
        margin-top: 0px !important;
    }

    .poptheballoonMainPage,
    .poptheballoonPages {
        height: 100%;
    }
}


/*-------Ends Game pop the balloon------*/


/**********
iPad 3
**********/

.bgclass1 {
    width: 596px;
    position: absolute;
    height: 100px;
    top: 0px;
}

.starfall {
    animation: starjump 2s;
    animation-fill-mode: both;
    width: 28px;
    height: 29px;
    position: absolute;
}

.starfall img {
    width: 100%;
    height: 100%;
}

@keyframes starjump {
    0% {
        top: 0px;
        opacity: .3;
    }

    99% {
        opacity: 1;
        top: 550px;
    }

    100% {
        opacity: 0;
        top: 550px;
    }

    /* 0% {-webkit-transform:translate3d(0, -400px, 0); -webkit-animation-timing-function: ease-in; }
    40% {-webkit-transform:translate3d(0,    0px, 0); -webkit-animation-timing-function: ease-out; }
    55% {-webkit-transform:translate3d(0, -100px, 0); -webkit-animation-timing-function: ease-in; }
    70% {-webkit-transform:translate3d(0,    0px, 0); -webkit-animation-timing-function: ease-out; }
    85% {-webkit-transform:translate3d(0,  -40px, 0); -webkit-animation-timing-function: ease-in; }
   100% {-webkit-transform:translate3d(0,    0px, 0); }*/
}


.show-popthebaloon-for-mobile {
    display: none;
}

.hide-popthebaloon-for-mobile {
    display: block;
}

@media only screen and (min-width: 320px) and (max-width: 464px) and (orientation: portrait) {
    .poptheballonPortraitTop {
        height: 10%;
        float: none;
        width: 100%;
        /*added margin top*/
        margin-top: 15%;
    }

    .poptheballonPortraitCenter {
        height: 50%;
        float: none;
        width: 100%;
    }

    .poptheballonPortraitBottom {
        height: 10%;
        float: none;
        width: 100%;
        position: relative;
        margin-top: 3%;
    }

    .popp0container {
        height: 100% !important;
        margin-left: 0% !important;
        margin-bottom: 0px !important;
    }

    .balloom_imagex {
        transform: scale(0.8, 0.8);
        height: 360px !important;
        text-align: center;
        width: 320px !important;
    }

    .popp0row {
        margin-top: 2% !important;
        width: 86%;
    }

    .popp1container {
        height: 100% !important;
        margin-top: 0px !important;
        margin-left: 0% !important;
    }

    .balloom_image_pg1 {
        transform: scale(0.8, 0.8);
        height: 360px !important;
        text-align: center;
        margin-top: -5% !important;
        /*-14%*/
    }

    .popp1row {
        margin-top: -15% !important;
        width: 100%;
    }

    .pop_go1_layer {
        position: absolute;
        top: -24%;
        left: -12%;
        /*-12%*/
        width: 100%;
        height: 100%;
        transform: scale(0.6, 0.6);
    }

    .helpinstruction {
        right: 1% !important;
        /*1*/
        top: 4%;
        /*7*/
        transform: scale(0.8, 0.8);
    }

    .pop_go3_layerx {
        transform: scale(0.55, 0.55);
        -ms-transform: scale(0.55, 0.55);
        -webkit-transform: scale(0.55, 0.55);
        left: 8.5%;
    }

    .closebtn {
        right: 0% !important;
    }

    .popLogoleft {
        transform: scale(0.3, 0.3);
        -ms-transform: scale(0.3, 0.3);
        -webkit-transform: scale(0.3, 0.3);
        margin-top: -25px !important;
        width: 15%;
        height: 100%;
    }

    .modedivborder {
        transform: scale(0.45, 0.45);
        margin-top: -33%;
        /*-27*/
    }

    .pop_left_layerx {
        transform: scale(0.6, 0.6);
        margin-top: -21%;
        /*-24*/
        float: right;
    }

    .popSidemenuWrap,
    .caption {
        height: 100%;
    }

    .pop_left_layer {
        float: left;
        width: 100%;
        height: 60%;
    }

    .ptbPoratraitStar,
    .ptbPoratraitPlayPause,
    .ptbPoratraitTimer {
        width: 30%;
        float: left;
        height: 100%;
    }

    .ptbPoratraitTimer {
        position: relative;
    }

    .ptbPoratraitStar .ra-star-o {
        width: 20%;
        height: 20px;
        margin-bottom: -5%;
        background-size: 100% 100%;
    }

    .ptbPoratraitStar .ra-star {
        width: 20%;
        height: 20px;
        margin-bottom: -5%;
        background-size: 100% 100%;
    }

    .ptbPoratraitPlayPause {
        float: left;
        width: 18%;
        height: 100%;
        margin: 0 9%;
    }

    .ptbPoratraitPlayPause .gamepausebtnimg {
        transform: scale(.7, .7);
        margin-top: -2%;
    }

    .timeremainingPortrait,
    .timermodePortrait,
    .countdownNumberPortrait,
    .gamelvlintdicationPortrait {
        font-size: 11px;
        position: relative;
    }

    .countdownNumberPortrait {
        color: #ffffff;
    }

    .ptbPoratraitTimer .timeralign {
        margin: 0;
        padding: 0;
    }

    .timermodePortrait,
    .timeremainingPortrait {
        color: #dbd5ff;
    }

    .ptbportraitmask {
        opacity: .5;
        background: #000;
        width: 100%;
        height: 100%;
    }

    .poptheballonPortraitBottomwrap {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 1%;
    }

    .pop_go4_layerx {
        position: absolute;
        top: 40%;
        left: 23%;
        transform: scale(0.4, 0.4);
    }

    .poptheballoonContainer.popballoonmainclass {
        position: absolute;
        top: 0;
    }

    .sm-poptheballoon-left-cantainer {
        min-height: 16% !important;
        height: 16% !important;
        width: 100%;
    }

    .poptheballoonspage4 .popSidemenuWrap {
        height: 100% !important;
    }

    .poptheballoonspage4 .sm-right-container {
        height: 42% !important;
        min-height: 42% !important;
        width: 100%;
        position: absolute;
        bottom: 0;
    }

    .poptheballoonspage4 .poptheballoonrowborder .xfact {
        margin: 0;
    }

    .poptheballoonspage4 .poptheballoonrowborder .xfact,
    .poptheballoonspage4 .poptheballoonrowborder .bgclass_game {
        width: 100%;
    }

    .poptheballoonspage4 .poptheballoonrowborder .bgclass_game #balloonContainerGame {
        height: 100% !important;
        width: 100%;
    }

    .hide-popthebaloon-for-mobile {
        display: none;
    }

    .poptheballoonspage4 .sm-gameContainer {
        height: 42% !important;
        min-height: 42% !important;
    }

    #gamemsglayerdiv {
        height: 100% !important;
    }

    .show-popthebaloon-for-mobile .timermode,
    .show-popthebaloon-for-mobile .timeremaining {
        font-size: 12px;
        position: relative;
    }

    .show-popthebaloon-for-mobile #countdownNumber,
    .show-popthebaloon-for-mobile #gamelvlintdication {
        font-size: 14px;
        position: relative;
    }
}


/*.poptheballoonMainPage {
    width: 100%;
    height: 100%;
    display: flex;
}*/


/*Game pop the balloon ends*/

/** Shoot the rocket css style begins **/

.center-div {
    /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */
    /*
  Yep!
  */
    transform: translate(0%, 11%);
    /*
  Not even necessary really.
  e.g. Height could be left out!
  */
    width: 50%;
    height: 50%;
}

.shootrocketPages {
    width: 100%;
    float: left;
    display: block;
}

.secContainer {
    padding: 0 !important;
}

.shootrocketMainPages {
    width: 1200px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.shoot_imagex {
    height: 600px;
    text-align: center;
}

.shoot_imagex button {
    background-color: transparent;
}

.shoot_gameplaybgimg {
    /*margin:0px;*/
    width: 100%;
    height: 100%;
    background: none;
    background-repeat: repeat-x;
    background-size: 100% 100%;
}

.shootrocketPage0,
.shootrocketPage1,
.shootrocketPage2,
.shootrocketPage3,
.shootrocketPage4,
.shootrocketPage5,
.shootrocketPage6 {
    width: 100%;
    float: left;
    font-family: "Arial" !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.shootrocketPage1 {
    /*margin: 0px !important;	*/
}

.shootrocketPage3 {
    display: none;
    margin: 0px !important;
}

.shootrocketPage4 {
    margin: 0px !important;
}

.shootrocketPage5,
.shootrocketPage6 {
    margin: 0px !important;
}

.shoot_image {
    text-align: center;
}

.shoot_gamesplashimg {
    width: auto;
    height: 100%;
}

.shoot_gamesplashimg2 {
    width: auto;
    height: 100%;
}

.shoot_gamesplashimg3 {
    width: auto;
    height: 100%;
}

.shoot_logo {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 15%;
    left: -2%;
}

.shoot_logo1 {
    width: auto;
    height: 100%;
}

.shoot_logo1inner {
    width: 528px !important;
    height: 312px !important;
}

.shoot_logo1cannon {
    width: 171px !important;
    height: 155px !important;
    left: 16%;
    position: absolute;
    top: -12%;
    /*
	-webkit-animation: playcannon 1s steps(7) infinite;
  -moz-animation: playcannon 1s steps(7) infinite;
  animation: playcannon 1s steps(7) infinite;
  animation-play-state: running;
*/
    background-position-x: 0px;
}

@-webkit-keyframes playcannon {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -1200px;
    }
}

@-moz-keyframes playcannon {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -1200px 0px;
    }
}

@keyframes playcannon {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -1200px;
    }
}

.shoot_logo1rocket {
    width: 136px !important;
    height: 193px !important;
    left: 75%;
    position: absolute;
    top: 18%;
    -webkit-animation: playrocket 1s steps(7) infinite;
    -moz-animation: playrocket 1s steps(7) infinite;
    animation: playrocket 1s steps(7) infinite;
    animation-play-state: running;
}

@-webkit-keyframes playrocket {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -952px;
    }
}

@-moz-keyframes playrocket {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -952px 0px;
    }
}

@keyframes playrocket {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -952px;
    }
}


/*
.shoot_logo1raysdiv {
    width: 600px !important;
    height: 500px !important;
    position: absolute;
    left: 0%;
    top: 0px;
}
*/


/*.shoot_logo1rays {
    width: 600px !important;
    height: 500px !important;
    position: absolute;
    top: 50px;
    left: 0%;
    -webkit-animation: playrays 20s infinite linear;
    -moz-animation: playrays 20s infinite linear;
    animation: playrays 20s infinite linear;
    animation-play-state: running;
}

@-webkit-keyframes playrays {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@-moz-keyframes playrays {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}

@keyframes playrays {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}*/

.shoot_image2 {
    text-align: center;
}

.shoot_go {
    position: absolute;
    top: 80%;
    left: 39%;
}

.shoot_instruct {
    position: absolute;
    top: 1%;
    left: 80%;
}

.shoot_instruct1 {
    position: absolute;
    top: 1%;
    right: 3%;
}

.shoot_gamepage3whiteborder {
    color: #ffffff;
    margin: 0 auto;
    position: absolute;
    top: 60%;
    left: 35%;
    text-align: center;
}

.shootgameinstruction {
    color: #ffffff;
    margin: 0 auto;
    text-align: center;
    
    font-size: 18px;
    text-transform: uppercase;
}

.shootgameinstruction1 {
    top: 6px;
    margin: 0 auto;
    position: absolute;
    left: 138px;
    padding: 12px 0px;
}


}

.shootgameinstructioncomm {
    color: #013b83;
    margin: 0 auto;
    text-align: center;
    
    font-size: 24px;
}

.shootgameinstructiontext {
    color: #013b83;
    margin: 0 auto;
    position: absolute;
    top: 52%;
    left: -3%;
    text-align: center;
    /*border: 2px #ffffff solid;*/

    width: 60%;
    float: left;
    font-size: 16px;
}

.shootgamelevelw {
    margin: 0 auto;
    position: absolute;
    bottom: 15.6%;
    left: 18%;
    text-align: center;
    width: 90%;
    float: left;
}

.shootgamelevel {
    margin: 0 auto;
    position: absolute;
    bottom: 14.6%;
    left: 8%;
    text-align: center;
    width: 85%;
    float: left;
}

.shootgameinstructiontext ul {
    list-style: none;
    padding: 0px;
    padding-top: 18px;
    line-height: 30px;
    width: 65%;
    margin: 7% auto;
    font-size: 20px;
    color: #444;
}

.shootgameinstructiontext ul li:first-child {
    margin-bottom: 16px;
}

.shoot_go2 {
    position: absolute;
    top: 80%;
    left: 39%;
}

.shoot_go3 {
    position: absolute;
    top: 80%;
    left: 44%;
}

.shoot_go4 {
    position: absolute;
    top: 84%;
    left: 39%;
}

.shootrocketContainer {
    width: 100%;
    float: left;
    /*min-height:600px;*/
    height: 100% !important;
}

.shootrocketrow {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

h3.center {
    text-align: center;
    /* border: 2px solid;*/
}

.shoot_btngamego {}

.shoot_imgdiv {
    float: left;
}

.shoot_gameelementcenter {
    text-align: center;
}

.shoot_height200 {
    height: 200px;
}

.shoot_height400 {
    height: 400px;
}

.shoot_padding20 {
    padding: 20px;
}

.shoot_width100 {
    width: 100%;
}

.shoot_curdefault {
    cursor: default;
}

.shootrocketrowborder {
    padding-left: 0px !important;
    padding-right: 0px !important;
    /*border: 1px solid #ddd;*/
    /*min-height:620px;*/
}

.shootrocketrowborderRight {
    height: 600px;
}

.shoot_gamelettertitle {
    position: absolute;
    top: 0px;
    color: #013b83;
    
    font-size: 22px;
    display: none;
}

/*star rating css starts here */
.shoot_gamestarratingprev {
    text-align: center;
}

#shoot_gamestarsrating {
    display: flex;
    list-style: none;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    flex-wrap: wrap;
    margin: auto;
    width: 300px;
}

#shoot_gamestarsrating li:nth-child(5) {}

.shoot_ra-star-o {
    cursor: default;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcstr/images/gameratingstar_outline.png);
    background-repeat: no-repeat;
    width: 55px;
    height: 55px;
}

.shoot_ra-star {
    cursor: default;
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/abcstr/images/gameratingstar_filled.png);
    background-repeat: no-repeat;
    width: 55px;
    height: 55px;
}

/*star rating css End here */
.shoot_gameGreenBg {
    background-color: green;
}

.shoot_gameDivfull {
    width: 100%;
}

#shootContainerGame {
    /*max-width:600px;max-height:600px;*/

    margin: 0 auto;
    /*     display: none; */
}

.shoot_gamelevelview {
    /*display:inline;*/
}

#shoot_gamemsglayerdiv,
#shoot_gamemsglayerdiv2 {
    position: relative;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 1;
}

#shoot_gamemsglayerdivins {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
    cursor: default;
    top: 0;
}

#shoot_gamemsglayerdivins2 {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
    cursor: default;
    top: 0;
}

#shoot_gamemsglayerdivins3 {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 1;
    cursor: default;
    top: 0;
}

#shoot_gamemsglayerdiv6 {
    position: absolute;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 1;
}

#shoot_gamepauselayerdiv {
    position: absolute;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
}

#shoot_gamehelplayerdiv {
    position: absolute;
    background-color: none;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
}

#shoot_gamemsglayerdiv4 {
    position: relative;
    background-color: #d8d8d8;
    width: 100%;
    height: 100%;
    text-align: center;
    display: none;
    z-index: 1;
}

#shoot_game_div {
    margin: 0 auto;
}

.shoot_gamemsgloader {
    position: absolute;
    left: 45%;
    top: 45%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #4CAF50;
    border-bottom: 16px solid #4CAF50;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.shoot_gamerestartbtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

.shoot_gamehelpbtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

.shoot_gamepausebtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

.shoot_gameinstructbtnimgz {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

.shoot_gamegobtnimg {
    width: 127px;
    height: 48px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
}

.shoot_gameinstructionboximg {
    width: 403px;
    margin: 5px;
    background-repeat: no-repeat;
    font-size: 16px;
    
    height: 260px;
    color: #013b83;
    padding-top: 36px;
    position: absolute;
    top: 18%;
    left: 16%;
}

.shootROverlay {
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    position: absolute;
}

.shoot_gameinstructionboximg2 {
    width: auto;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
    border: 2px solid #0056ad;
    padding: 10px 40px;
    background: #fff;
    opacity: 0.8;
    width: 300px;
    color: #013b83;
    border-radius: 25px;
    left: 10%;
}

.shoot_gamegobtnimg {
    width: 127px;
    height: 48px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
}

.shoot_gameinstbtnimg {
    width: 63px;
    height: 63px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
}

.shoot_gamescoreimg {
    width: 140px;
    height: 90px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: white;
    margin: 10px auto;
    padding: 10px;
    background-size: 100%, 100%;
}

.shoot_gamesoundtitleimg {
    width: 107px;
    height: 65px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 14px;
    
    color: white;
    margin: 10px auto;
    padding: 5px;
}

.shoot_gamemissedimg {
    width: 138px;
    height: 100px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: white;
    margin: 10px auto;
    padding: 10px;
}

.shoot_gamelevelmodeimg {
    width: 192px;
    height: 107px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: white;
    margin: 10px auto;
    padding: 10px;
    display: none;
}

.shoot_gamelettermodeimg {
    width: 195px;
    height: 140px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 22px;
    
    color: #fff;
    margin: 0 auto;
    padding: 28px 0 0 7px;
}

.shoot_gameshoottitlebgimg {
    width: 320px;
    height: 175px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 14px;
    
    color: white;
    margin: 10px auto;
    padding: 5px;
    margin-top: -25px;
    transform: scale(0.65, 0.65);
    -ms-transform: scale(0.65, 0.65);
    -webkit-transform: scale(0.65, 0.65);
    /*
	-webkit-animation: playlogoanim 1s steps(7) infinite;
	-moz-animation: playlogoanim 1s steps(7) infinite;
	animation: playlogoanim 1s steps(7) infinite;
	animation-play-state: running;
	*/
}

@-webkit-keyframes playlogoanim {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2100px;
    }
}

@-moz-keyframes playlogoanim {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -2100px 0px;
    }
}

@keyframes playlogoanim {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2100px;
    }
}

.shoot_gamescorefont {
    color: black;
}

.shoot_gamemissedfont {
    color: black;
}

.shoot_timeremaining {
    margin-top: 69px;
    font-size: 18px;
    margin-left: -16px;
}

.shoot_image1 {
    text-align: center;
}

/*bala - targetting chrome*/
.shootSlash {
    font-size: 24px;
    line-height: 28px;
}

.shoot_gamelevelmodefont {
    color: #fff;
    font-size: 30px;
    display: inline-block;
    margin: 0 2px;
}

.shoot_gameplaybtnimg {
    width: 86px;
    height: 86px;
    margin: 0px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
}

.shoot_gameplaybgimgold {
    margin: 0px;
    background: none;
    background-repeat: repeat-x;
}

#shoot_levelwithout {
    width: 155px;
    height: 40px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
}

#shoot_levelwith {
    width: 155px;
    height: 40px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 16px;
    
    color: white;
}

#shoot_leveleasy {
    width: 129px;
    height: 58px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 19px;
    
    color: white;
    padding-top: 0%;
}

#shoot_levelmedium {
    width: 129px;
    height: 58px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 19px;
    
    color: white;
    padding-top: 0%;
    padding-left: -1%;
}

#shoot_levelhard {
    width: 129px;
    height: 58px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    font-size: 19px;
    
    color: white;
    padding-top: 0%;
}

.shoot_gamegobtnimghover {
    width: 127px;
    height: 48px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

.shoot_gameinstructiongobtnimg {
    width: 127px;
    height: 48px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

.shoot_gameinstructiongobtnimghover {
    width: 127px;
    height: 48px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

.shoot_gamemutebtnimg {
    width: 45px;
    height: 45px;
    margin: 5px;
    background: none;
    background-repeat: no-repeat;
    border: none;
    background-size: contain;
}

#shoot_gameToPauseBtn {
    z-index: 1;
}

#shoot_gamemsgdiv,
#shoot_gamemsgdiv2 {
    position: absolute;
    left: 45%;
    top: 25%;
    background-color: #f1f1f1;
    width: 180px;
    padding: 10px;
    color: black;
    /*border: #a6a6a6 1px solid;*/

    text-align: center;
    display: none;
}

#shoot_gamemsgdiv3 {
    position: absolute;
    left: 47%;
    top: 60%;
    background-color: green;
    width: 180px;
    padding: 10px;
    color: white;
    text-align: center;
    display: none;
}

.shoot_closebtn {
    font-size: 35px;
    position: absolute;
    right: -15px;
    top: 10px;
    color: #013b83;
    width: 55px;
    height: 53px;
    transform: scale3d(0.8, 0.8, 0.8);
}

.shoot_closebtn:hover {
    text-decoration: none;
}

#shoot_countdownCircle {
    z-index: 2;
    position: relative;
    margin: auto;
    height: 170px;
    width: 176px;
    text-align: center;
    -webkit-animation: phonicsgameplayv 60s steps(4) infinite, phonicsgameplayh 15s steps(15) infinite;
    -moz-animation: phonicsgameplayv 60s steps(4) infinite, phonicsgameplayh 15s steps(15) infinite;
    animation: phonicsgameplayv 60s steps(4) infinite, phonicsgameplayh 15s steps(15) infinite;
    animation-play-state: running;
}

#shoot_countdownNumber {
    color: #fff;
    display: inline-block;
    
    font-size: 22px;
    position: absolute;
    top: 41%;
    left: -10px;
    text-align: center;
    width: 100%;
}

#shoot_countdownBar {
    background-repeat: no-repeat;
    color: #06287e;
    display: inline-block;
    
    position: absolute;
    width: 350px;
    height: 242px;
    top: 41%;
    left: -12%;
    z-index: 1;
    transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcstr/images/timer_basebottom.png")
}

.shoot_captionRight {
    position: relative;
    height: 100%;
}

#shoot_displaytimerselected {
    /*color: #4c34c6;*/

    background: none;
    background-repeat: no-repeat;
    color: #06287e;
    display: inline-block;
    
    width: 143px;
    height: 56px;
    /*padding-top:10px;*/
}

#shoot_timerselectedType {
    font-size: 17px;
    position: absolute;
    top: 75%;
    width: 100%;
    text-align: center;
    margin-left: -8px;
}

#shoot_countdownStartdate {
    display: none;
}

@-webkit-keyframes phonicsgameplayv {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -680px;
    }
}

@-webkit-keyframes phonicsgameplayh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2640px;
    }
}

@-moz-keyframes phonicsgameplayv {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -680px;
    }
}

@-moz-keyframes phonicsgameplayh {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -2640px 0px;
    }
}

@keyframes phonicsgameplayv {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -680px;
    }
}

@keyframes phonicsgameplayh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -2640px;
    }
}

@-webkit-keyframes phonicsgameplayv2 {
    background-position-y: 0px;
}

@-webkit-keyframes phonicsgameplayh2 {
    background-position-x: 0px;
}

@-moz-keyframes phonicsgameplayv2 {
    background-position: 0px 0px;
}

@-moz-keyframes phonicsgameplayh2 {
    background-position: 0px 0px;
}

@keyframes phonicsgameplayv2 {
    background-position-y: 0px;
}

@keyframes phonicsgameplayh2 {
    background-position-x: 0px;
}

/*
.clock-outer{
fill:none;
}
.hand-hour {
  fill: #06287e;

  transform-origin: 50% 55.91%;
  -webkit-transform-origin: 65% 90.91%;
  -moz-transform-origin: 50% 55.91%;
  -webkit-animation: 20s dialspin infinite linear;
  -moz-animation: 20s dialspin infinite linear;
  animation: 20s dialspin infinite linear;
}

.hand-min {
  -webkit-transform-origin: 50.09% 50%;
  -moz-transform-origin: 50.09% 50%;
  transform-origin: 50.09% 50%;
  -webkit-animation: 2s dialspin infinite linear;
  -moz-animation: 1s dialspin infinite linear;
  animation: 1s dialspin infinite linear;
  animation-play-state:running;

}


@-webkit-keyframes dialspin  {
  0% {-webkit-transform: rotate(0deg)}
  100% { -webkit-transform: rotate(360deg) }
}
@-moz-keyframes dialspin  {
  0% {-moz-transform: rotate(0deg)}
  100% { -moz-transform: rotate(360deg) }
}
@keyframes dialspin  {
  0% {transform: rotate(0deg)}
  100% { transform: rotate(360deg) }
}
*/

/*

#circlesvg {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  transform: rotateY(0deg) rotateZ(-90deg);
}

#shoot_countdownCircle {
  stroke-dasharray: 226px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 4px;
  stroke: green;
  fill: none;
  animation: countdown 61s linear infinite forwards;
  animation-play-state: paused;
}

@keyframes countdown {
  from {
    stroke-dashoffset: 226px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
@keyframes countdown2 {
  from {
    stroke-dashoffset: 226px;
  }
  to {
    stroke-dashoffset: 0px;
  }
}
*/
#shoot_gamescoreviewbox {}

.shoot_gamescoreviewboxanimate {
    -webkit-animation: pulsescore 1.0s ease-in-out;
    -moz-animation: pulsescore 1.0s ease-in-out;
    animation: pulsescore 1.0s ease-in-out;
    animation-play-state: paused;
}

@keyframes pulsescore {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.5, 1.5, 1.5);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

#shoot_gamemissedviewbox {}

.shoot_gamemissedviewboxanimate {
    -webkit-animation: pulsemissed 1.0s ease-in-out;
    -moz-animation: pulsemissed 1.0s ease-in-out;
    animation: pulsemissed 1.0s ease-in-out;
    animation-play-state: paused;
}

@keyframes pulsemissed {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.5, 1.5, 1.5);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.shoot_gameBadgeDisabled {
    display: none;
}

#shoot_gameBadgeDisabledbox {
    -webkit-animation: pulsebadge 1.0s ease-in-out infinite alternate;
    -moz-animation: pulsebadge 1.0s ease-in-out infinite alternate;
    animation: pulsebadge 1.0s ease-in-out infinite alternate;
    animation-play-state: paused;
}

@keyframes pulsebadge {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.5, 1.5, 1.5);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

#shoot_gamescoreviewbox,
#shoot_gamemissedviewbox {
    width: 192px;
    height: 107px;
    background-size: 100% 100%;
}

.shoot_countdownclock {
    transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    top: 39%;
}

.shoot_timermode {
    margin-top: 15%;
    FONT-SIZE: 18px;
    margin-left: -14px;
}

#shoot_timerselectedType {
    color: #fff;
}

#shoot_gamemissedviewbox {
    margin-bottom: 0px;
}

.shoottherocketsContainer {
    height: 100%;
}

.shootpg1contain {
    /*margin-top: 1%;*/
}

.shootROverlayg {
    width: 100%;
    height: 100%;
    opacity: .5;
    background-color: #000;
    position: absolute;
}

.shoot_gameinstructionboximg1 {
    left: 15%;
    width: 403px;
    margin: 5px;
    background-repeat: no-repeat;
    font-size: 16px;
    
    height: 260px;
    color: #013b83;
    padding-top: 36px;
    position: absolute;
    top: 30%;
}

.shootROverlay {
    display: none;
}

/* bala iphone*/

/*@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
	.shootrocketMainPages {
		width: 100%;
	}

	.shoot_logo1raysdiv {
		width: 100% !important;
		height: 100% !important;
	}

	.shoot_image {
		width: 100% !important;
		height: 100% !important;
	}

	.shoot_logo1raysdiv img {
		width: 100% !important;
		height: 100% !important;
	}

	.shoot_image img {
		width: 100% !important;
	}

	.shootrocketPages {
		height: 396px !important;
	}

	.shootrocketPage1,
	.shootrocketPage2,
	.shootrocketPage3,
	.shootrocketPage4,
	.shootrocketPage5,
	.shootrocketPage6,
	.shootrocketContainer,
	.shootrocketrow {
		height: 100%;
	}

	.shoot_logo1raysdiv {
		transform: scale(0.9, 0.9);
		-ms-transform: scale(0.9, 0.9);
		-webkit-transform: scale(0.9, 0.9);
		top: -11% !important;
		left: -4% !important;
	}

	.shoot_logo {
		transform: scale(0.7, 0.7);
		-ms-transform: scale(0.7, 0.7);
		-webkit-transform: scale(0.7, 0.7);
		top: 6% !important;
		left: 1% !important;
	}

	.shootgamelevelw {
		top: 78% !important;
		left: 14.5% !important;
		Width: 100% !important;
	}

	.shootROverlay {
		top: 0px !important;
	}

	.shoot_gameinstructionboximg {
		top: 35% !important;
		left: 4% !important;
	}

	.shoot_image1 {
		width: 100% !important;
		height: 100% !important;
		margin-top: 5px !important;
	}

	.shoot_image1 img {
		width: 100% !important;
	}

	.shootROverlay4 {
		margin-top: 5px !important;
	}

	.shootpg4contain {
		margin-top: -1% !important;
	}

	.shoot_logo4 {
		top: 7% !important;
	}

	.shootgamelevel {
		top: 79% !important;
		left: -0.5% !important;
		width: 95% !important;
	}

	.shoot_logo1 {
		top: -1% !important;
	}

	.lgf_caption_left {
		transform: scale(0.8, 0.8);
		-ms-transform: scale(0.8, 0.8);
		-webkit-transform: scale(0.8, 0.8);
		margin-top: -20% !important;
		margin-left: 20% !important;
	}

	.shoot_logo1cannon {
		top: -16% !important;
		left: 9% !important;
	}

	.shoot_logo1rocket {
		left: 78% !important;
		top: 26% !important;
	}

	.shootrocketrowborder {
		height: 100% !important;
	}

	.shootrborder {
		height: 100% !important;
	}

	.shoot_game_div {
		height: 100% !important;
	}

	.full_height {
		height: 100% !important;
	}

	.shoot_gamestarratingprev {
		margin-left: -13% !important;
	}

	#shootContainerGame {
		margin-top: -16px !important;
		margin-left: 9.5% !important;
	}

	.shoot_pad {
		width: 300px;
		left: -12% !important;
		margin-top: -10px;
		transform: scale(0.8, 0.8);
		-ms-transform: scale(0.8, 0.8);
		-webkit-transform: scale(0.8, 0.8);
	}

	.shoot_captionRight {
		transform: scale(0.65, 0.65);
		-ms-transform: scale(0.65, 0.65);
		-webkit-transform: scale(0.65, 0.65);
		margin-top: -50%!important;
		margin-left: -30px !important;
	}

	.shoot_width100 {
		margin-left: -35% !important;
	}

	.shoot_countdownclock {
		left: -34% !important;
	}

	#shoot_countdownBar {
		top: 84% !important;
		left: 17% !important;
	}

	.shootROverlayg {
		width: 82%;
		Left: 9%;
	}

	.shoot_gameinstructionboximg {
		transform: scale(0.8, 0.8);
		-ms-transform: scale(0.8, 0.8);
		-webkit-transform: scale(0.8, 0.8);
	}

	.shoot_gameinstructionboximg1 {
		transform: scale(0.8, 0.8);
		-ms-transform: scale(0.8, 0.8);
		-webkit-transform: scale(0.8, 0.8);
		margin-left: -7% !important;
	}

	.shootpg6contain1 {
		margin-top: -2px !important;
	}
}*/
@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: portrait) {}

/*----------------ipad both orient-----------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}

/*----------------ipad landscape-----------------*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .shootrocketPage1 {
        width: 1024px !important;
    }

    .shoot_image img {
        Width: 100%;
    }

    .shoot_image {
        /* margin: 32px auto !important;*/
    }

    .shoot_logo1raysdiv {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
        left: -9%;
    }

    .shoot_logo1inner {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .shootrocketPages {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .shoot_gameinstructionboximg {
        left: 7%;
    }

    .shootgamelevelw {
        top: 79% !important;
        left: 15.5% !important;
        width: 100% !important;
    }

    .shoot_image1 img {
        width: 100%;
    }

    /*.shootrocketPage4 {
        width: 1024px !important;
    }*/

    .shoot_logo1cannon {
        top: -10% !important;
        left: 15% !important;
    }

    .shoot_logo1rocket {
        left: 70% !important;
    }

    .shootgamelevel {
        width: 90.5% !important;
        left: 1.5% !important;
        top: 79% !important;
    }

    .shootpg4contain {
        /*display: flex;
		justify-content: center;
		flex-direction: column;*/
        margin-top: -1% !important;
    }

    .shootpg6contain {
        margin-top: 6.5% !important;
    }

    .shootContainerGame {
        width: 100%;
    }

    .lgf_caption_left {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        margin-top: -5%;
    }

    .shoot_captionRight {
        margin-top: -25%;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    /*.shootrocketPage5,
    .shootrocketPage6 {
        width: 1024px !important;
    }*/

    .shoot_gamestarratingprev {
        margin-left: -25px;
    }

    #shoot_countdownBar {
        left: -23% !important;
        margin-top: -4%;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .shoot_pad {
        width: 270px !important;
        margin-left: -11% !important
    }

    .shootpg6contain .shootrocketrowborder,
    .shootpg6contain .full_height,
    .shoot_game_div {
        height: 96.5% !important;
    }

    .shootROverlayg {
        height: 98% !important;
        margin-top: 2% !important;
    }

    .shoot_countdownclock {
        left: -5px;
    }

    .shoot_game_div canvas {
        height: 95% !important;
    }

    #shoot_gamepauselayerdiv {
        height: 96.5% !important;
    }

    .shoot_gameinstructionboximg1 {
        left: 4% !important;
        width: 438px;
        margin: 5px;
        background-repeat: no-repeat;
        font-size: 16px;
        
        height: 168px;
        color: #013b83;
        padding-top: 36px;
        position: absolute;
        top: 39%;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .shootrocketPage0 .abcgame_abcpickrecommendedgamewrap {
        transform: scale(.9, .9);
        margin-left: -17%;
        margin-top: 25%;
    }
}

/* Also make tablet portrait css work for desktop responsive from 768 to 1024...**/
@media only screen and (max-width: 1024px) and (min-width: 768px),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .portrait .shootrocketMainPages {
        width: 100% !important;
    }

    .portrait .shootROverlayg {
        height: 415px;
        width: 415px;
    }

    .portrait .shoot_curdefault {
        width: 100% !important;
    }

    .portrait .shootpg4contain .shoot_imagex {
        height: 600px;
    }

    .portrait .shoot_logo1rocket {
        left: 69% !important;
    }

    .portrait .shoot_logo1cannon {
        left: 23% !important;
        top: -11% !important;
    }

    .portrait .shoot_logo1raysdiv {
        left: 13% !important;
    }

    .portrait .shoot_instruct {
        top: 2% !important;
        left: 80% !important;
    }

    .portrait .shootgamelevelw {
        width: 70% !important;
        left: 25.5% !important;
    }

    .portrait #shoot_gamemsglayerdivins {
        width: 62% !important;
        left: 19% !important;
    }

    .portrait .shootpg4contain {
        Width: 100% !important;
    }

    .portrait .shoot_4curdefault {
        Width: 100% !important;
    }

    .portrait .shootgamelevel {
        width: 70% !important;
        left: 0% !important;
        top: 80% !important;
        right: 0;
    }

    .portrait .shoot_instruct1 {
        top: 2% !important;
        left: 80% !important;
    }

    .portrait #shoot_gamemsglayerdivins3 {
        width: 62% !important;
        left: 19% !important;
    }

    .portrait .shootpg6contain {
        margin-top: 18.5% !important;
    }

    .portrait .lgf_caption_left {
        transform: scale(0.75, 0.75);
        -ms-transform: scale(0.75, 0.75);
        -webkit-transform: scale(0.75, 0.75);
        margin-left: -6% !important;
        margin-top: -3% !important;
    }

    .portrait .shoot_gamestarratingprev {
        margin-left: -30px !important;
    }

    .portrait .shoot_gameshoottitlebgimg {
        margin-top: -28px !important;
        margin-left: -25px;
    }

    .portrait .shoot_pad {
        width: 275px !important;
        margin-left: -28px !important;
    }

    .portrait .lgf_caption_right {
        transform: scale(0.65, 0.65);
        -ms-transform: scale(0.65, 0.65);
        -webkit-transform: scale(0.65, 0.65);
        margin-left: -5% !important;
        margin-top: -2% !important;
    }

    .portrait .shoot_width100ms {
        margin-left: -2% !important;
    }

    .portrait #shoot_countdownBar {
        top: 43% !important;
        left: -30% !important;
        transform: scale(0.7, 0.7);
        -ms-transform: scale(0.7, 0.7);
        -webkit-transform: scale(0.7, 0.7);
    }

    .portrait .shoot_gamescoreimg {
        margin-left: 24px;
    }

    .portrait .shoot_gamemissedimg {
        margin-left: 28px;
    }

    .portrait .shoot_gameinstructionboximg1 {
        left: -2% !important;
        width: 441px;
        margin: 5px;
        background-repeat: no-repeat;
        font-size: 16px;
        
        height: 275px;
        color: #013b83;
        padding-top: 36px;
        position: absolute;
        top: 9%;
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
    }

    .portrait .shoot_closebtn {
        right: 27px;
    }

    .portrait #shoot_countdownCircle {
        margin-left: 24px;
    }

    .portrait .shoot_gamelettermodeimg {
        margin-left: 24px;
    }

    .portrait .shoot_gameinstructionboximg {
        left: 4% !important;
    }

    .portrait .shootROverlay {
        margin-left: -13% !important;
        width: 126% !important;
    }

    .portrait .shootROverlayg {
        margin-top: 1% !important;
        display: none;
    }

    .portrait .shoot_countdownclock {
        left: -3% !important;
    }

    .portrait .shootrocketPage0 .abcgame_abcpickrecommendedgamewrap {
        transform: scale(0.65, 0.65);
        margin-top: 50%;
    }

    .portrait .shoot_image1 {
        transform: scale(0.65, 0.65);
        margin-top: 40%;
    }

    .portrait .shootrocketPage0 .abcgame_optgamethumbnail {
        height: 80%;
    }

    .portrait #shoot_game_div {
        width: 410px;
        height: 415px;
    }

    .portrait .shootpg6contain1 {
        margin-top: 33% !important;
    }

    .portrait .shootrocketPage0 .abcgame_abcpickrecommendedgame img {
        margin-top: -4%;
    }

    .portrait .shootrocketPage0 .shoot_imagex {
        height: 720px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width:1366px) {
    .shoot_image {
        margin-top: 0px;
        height: 100%;
    }

    .shoot_gamesplashimg {
        height: 100%;
        width: 100%;
    }

    .shoot_curdefault {
        height: 100%;
    }

    .shootROverlay {
        top: 0px !important;
    }

    .shoot_image1 {
        margin-top: 0px !important;
        height: 100%;
    }

    .shootgamelevel {
        top: 80%;
        left: 11.5%;
    }

    .shoot_gamesplashimg3 {
        height: 100%;
        width: 100%;
    }

    .shootgamelevelw {
        top: 80%;
        left: 19.5%;
    }

    .shoot_4curdefault {
        height: 100%;
    }

    .shootrocketPage4 {
        height: 100%;
    }

    .shootpg1contain {
        margin-top: 0px;
        height: 100%;
    }

    .shootpg4contain {
        margin-top: 0px;
        height: 100%;
    }

    .shootgamelevel {
        left: 6.5%;
    }

    .shootpg6contain {
        margin-top: -0x;
        height: 100%;
    }

    #shootContainerGame {
        margin-top: 0px;
        height: 100%;
    }

    #shoot_countdownCircle {
        transform: scale(0.9, 0.9);
        -ms-transform: scale(0.9, 0.9);
        -webkit-transform: scale(0.9, 0.9);
    }

    #shoot_countdownBar {
        top: 38%;
        left: -12.5%;
    }

    .shoot_gameplaybgimg .shootrocketPages,
    .shoot_gameplaybgimg .shootrocketPage1 {
        height: 100%;
    }

    .shoot_captionRight {
        margin-top: 12px;
    }

    .lgf_caption_left {
        margin-top: 15px;
    }

    .shootpg6contain1 {
        margin-top: -4px;
    }

    .shootROverlayg {
        height: 100%;
        margin-top: 0%;
    }

    .shootrocketPage6.shoot_gameplaybgimg2 {
        height: 100%;
    }

    .shootpg6contain .shootrocketrowborder,
    .shootpg6contain .full_height,
    .shoot_game_div {
        height: 100%;
    }

    .shoot_game_div canvas {
        height: 100% !important;
    }

    .shootrocketMainPages {
        margin-top: 2px;
    }

    .shoot_imagex {
        height: 617px !important;
        text-align: center;
    }
}

@media(max-height:680px) and (max-width:1366px) {
    .shootpg1contain {
        height: 100% !important;
    }

    .shoot_image,
    .shootrocketrow.shoot_curdefault {
        height: 100% !important;
    }

    .shootpg4contain {
        height: 100% !important;
    }

    .shoot_image1,
    .shootrocketrow.shoot_4curdefault {
        height: 100% !important;
    }

    #shoot_gamemsglayerdivins3 {
        width: 100% !important;
        height: 100% !important;
        margin-left: 0% !important;
        margin-top: 0% !important;
    }

    .shoot_gameinstructionboximg {
        left: 13.5% !important;
    }

    #shoot_countdownBar {
        left: -13%;
    }

    #shoot_gamemsglayerdivins {
        width: 100% !important;
        height: 100% !important;
        margin-left: 0% !important;
        margin-top: 0% !important;
    }

    .shoot_game_div {
        height: 476px !important;
        margin-left: 10% !important;
    }

    .lgf_caption_right {
        transform: scale(0.8, 0.8);
        -ms-transform: scale(0.8, 0.8);
        -webkit-transform: scale(0.8, 0.8);
        margin-top: 0px !important;
    }

    .lgf_caption_left {
        margin-top: 20px !important;
    }

    .shootpg6contain1 {
        margin-top: 0px !important;
    }

    #shoot_gamemsglayerdivins2 {
        width: 88% !important;
        height: 97% !important;
        margin-left: 9.5% !important;
        margin-top: 3% !important;
    }

    .shoot_gameinstructionboximg1 {
        left: 12% !important;
    }

    .shoot_imagex {
        height: 517px !important;
    }

    .shoot_image1 {
        margin-top: -1px !important;
    }

    .shootROverlayg {
        height: 517px !important;
        margin-top: -4% !important;
        width: 520px !important;
        margin-left: 3px !important;
    }
}

/** Shoot the rocket css style ends **/

/* Pre loading UI */
.preloader-bg {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    display: table;
}

.preloader-bg md-progress-circular {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.preloader-bg md-progress-circular svg {
    position: static !important;
}

/** Shoot the rocket css style ends **/

/* Surya ABC Shoot the Rocket Portrait mode CSS */
.str-show-for-mobile-port {
    display: none;
}

.str-hide-for-mobile-port {
    display: block;
}

/* Also make mobile portrait css work for desktop responsive till 767...**/
@media (max-width: 767px),
(min-width: 320px) and (max-width: 464px) and (orientation: portrait) {
    .str-show-for-mobile-port {
        display: block;
    }

    .str-hide-for-mobile-port {
        display: none;
    }

    .portrait .shootrocketMainPages {
        width: 100%;
    }

    .portrait .shootrocketPage4 .shootrocketrow {
        width: 5%;
    }

    .portrait .shootrocketPage4 .shootrocketrow.shoot_4curdefault {
        width: 90%;
    }

    .portrait .shootrocketPage4 .shoot_image1 {
        height: 100%;
        width: 100%;
    }

    .portrait .shootrocketPage4 .shoot_gamesplashimg3 {
        height: 100%;
        width: 100%;
        float: left;
    }

    .portrait .shootrocketPage0 .recommendedbadge {
        width: 30%;
        height: 15%;
        right: 2%;
    }

    .portrait .shootrocketPage4 .shoot_logo1inner {
        width: 56% !important;
        height: 38% !important;
    }

    .portrait .shootrocketPage4 .shootgamelevel {
        bottom: 5.6%;
        left: -7%;
        text-align: center;
        width: 100%;
    }

    .portrait .shootrocketPage4 #shoot_gamemsglayerdivins3 .shoot_gameinstructionboximg {
        width: 100%;
        left: 0;
        background-size: contain;
    }

    .portrait .shootrocketPage4 .shootgameinstructiontext ul {
        width: 75%;
    }

    .portrait .shootrocketPage0 .shoot_imagex {
        height: 479px;
    }

    .portrait .shootrocketPage0 .abcgame_abcpickrecommendedgamewrap {
        height: 85%;
    }

    .portrait .shootrocketPage0 .abcgame_abcpickrecommendedgame {
        height: 68%;
    }

    .portrait .shootrocketPage0 .abcgame_abcpickoptionalgamewrap {
        height: 20%;
    }

    .portrait .shootrocketPage6.shoot_gameplaybgimg2 {
        position: absolute;
        top: 0;
    }

    .portrait .shootrocketPage6 .shootrocketrowborder,
    .portrait .shootrocketPage6 .full_height,
    .portrait .shootrocketPage6 .lgf_caption_left {
        width: 100%;
    }

    .portrait .shootrocketPage6 .shoot_gameshoottitlebgimg {
        background-size: contain;
        width: 150px;
        height: 110px;
        float: left;
        margin-top: -1.2em;
    }

    .portrait .shootrocketPage6 .shoot_gamelettermodeimg {
        background-size: contain;
        padding-top: 16px;
        font-size: 1em;
        height: 64px;
        width: 103px;
        float: left;
    }

    .portrait .shootrocketPage6 .shootSlash {
        font-size: .8em;
    }

    .portrait .shootrocketPage6 .gameletterview.shoot_gamelevelmodefont {
        font-size: 1.2em;
    }

    .portrait .shootrocketPage6 .shoot_gameelementcenter .shoot_width100 {
        width: 20%;
        float: left;
        padding: 0;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .portrait .shootrocketPage6 .shoot_gameelementcenter .shoot_width100 button {
        height: 25px;
        width: 25px;
    }

    .portrait .shootrocketPage6 #shoot_game_div {
        width: 75%;
        margin: 0 auto
    }

    .portrait .shootrocketPage6 #shoot_gamestarsrating .shoot_ra-star-o,
    .portrait .shootrocketPage6 #shoot_gamestarsrating .shoot_ra-star {
        background-size: contain;
        height: 25px;
        width: 25px;
    }

    .portrait .shootrocketPage6 .shootrocketrowborderRight {
        height: 100%;
    }

    .portrait .shootrocketPage6 .shoot_gamestarratingprev {
        width: 42%;
        float: left;
    }

    .portrait .shootrocketPage6 #shoot_gamestarsrating {
        width: 100%;
        margin-top: 20px;
        padding: 0;
    }

    .portrait .shootrocketPage6 .shoot_gameelementcenter.shoot_width100.sm-playpause {
        width: 20%;
        float: left;
    }

    .portrait .shootrocketPage6 .shoot_gameelementcenter.shoot_countdownclock {
        width: 38%;
        padding: 0;
        float: right;
    }

    /* .shootrocketPage6 #shoot_countdownCircle{background: none !important;} */

    .portrait .shootrocketPage6 #shoot_gamescoreviewbox,
    .portrait .shootrocketPage6 #shoot_gamescoreviewbox,
    .portrait .shootrocketPage6 #shoot_gamemissedviewbox {
        display: none;
    }

    .portrait .shootrocketPage6 #shoot_countdownBar {
        width: 126%;
        top: 0;
        background: none !important;
        height: 185px;
    }

    .portrait .shootrocketPage6 #shoot_countdownBar .shoot_timeremaining {
        margin: 0;
    }

    .portrait .shootrocketPage6 #shoot_countdownBar #shoot_countdownNumber {
        font-size: 14px;
        top: 11%;
        left: -10px;
    }

    .portrait .shootrocketPage6 .shoot_timermode {
        margin-top: 12%;
    }

    .portrait .shootrocketPage6 #shoot_timerselectedType {
        top: 30%;
    }

    .portrait .shootrocketPage6 #shoot_timerselectedType {
        top: 36%;
        width: 100%;
        text-align: center;
        margin-left: -8px;
    }

    .portrait .shootrocketPage6 #shoot_gamescoreviewbox {
        line-height: 10px;
        font-size: 14px;
        height: 55px;
        width: 95px;
    }

    .portrait .shootrocketPage6 #shoot_gamescoreviewbox #gamescoreview {
        font-size: 13px;
        position: absolute;
        bottom: 25%;
        left: 45%;
        color: #000;
    }
}

/* Surya ABC Shoot the Rocket Portrait mode CSS */


/* Surya ABC Shoot the Rocket Lanscape mode CSS */
@media (min-width: 465px) and (max-width: 767px) and (orientation: landscape) {
    .shoot_gameplaybgimg {
        background-size: cover;
        width: 100%;
        height: 130%;
    }

    .shoot_logo4 {
        top: 10%;
        position: absolute;
    }

    .shoot_logo4 .shoot_logo1 {
        width: 100%;
    }

    .shoot_logo1 .shoot_logo1inner {
        width: 75%;
        margin-top: 14%;
    }

    .shoot_gamesplashimg3 {
        width: 100%;
    }

    .shoot_logo.shoot_logo4 {
        top: 0%;
        position: absolute;
    }

    .shoot_logo1raysdiv {
        display: none;
    }

    .shoot_logo1inner {
        height: 180px;
        width: 100%;
    }

    .shootgamelevel {
        bottom: 6% !important;
        left: -4.5% !important;
    }

    .shoot_instruct1 {
        position: absolute;
        top: 0;
        right: 0;
    }
}


/*sound match starts*/

soundmatchgame {
    display: block;
    height: 100%;
}

.soundMatchContainer input[type="button"],
.soundMatchContainer button {
    background-color: transparent;
}

.soundMatchContainerwrap {
    height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.soundMatchContainer {
    width: 100%;
    max-width: 1200px;
    height: 615px;
    margin: 0 auto;
}

.soundMatchAudio {
    display: none;
}

.maincontainer {
    width: 51%;
    height: 99%;
    float: left;
    position: relative;
}

.maincontainerContent {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    overflow: hidden;
}

.sidemenu {
    width: 24%;
    padding-top: 2%;
    height: 100%;
    float: left;
    position: relative;
}

.soundMatchContainerrow {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.smoverlayblock {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .4;
    position: absolute;
}

.smoverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.mainContainerOffset {
    margin-left: 0;
}

.sm_alphabets:last-child,
.sm_alphabets5:last-child,
.sm_drop:last-child {
    margin-right: 0;
}

.sm_alphabets {
    width: 20%;
    border: 1px solid;
    display: inline-block;
    text-align: center;
    font-size: 60px;
    height: 100%;
    background: #fff;
    text-align: center;
    
    border-radius: 3px;
    line-height: 83px;
    margin-left: 1%;
    margin-right: 2.5%;
}

.sm_alphabets5 {
    width: 18.5%;
    border: 1px solid;
    display: inline-block;
    text-align: center;
    font-size: 60px;
    height: 100%;
    background: #fff;
    text-align: center;
    
    border-radius: 3px;
    line-height: 83px;
    margin-left: 1%;
    margin-right: 0.5%;
}

.sm_alphabetswrap5 {
    height: 18%;
    margin-bottom: 2%;
}

.sm_drop {
    width: 20%;
    border: 1px solid #666666;
    display: inline-block;
    margin-right: 4px;
    text-align: center;
    height: 100%;
    margin-bottom: 4px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    margin-right: 1.8%;
    margin-left: 1%;
}

.dropimgwrap {
    width: 100%;
    height: 100%;
    position: absolute;
}

.sm_drop img {
    width: 100%;
    height: 100%;
}

.sm_drag,
.imageWrap {
    text-align: center;
    height: 70px;
    display: inline-block;
}

.horizontalbottom .sm_drag,
.horizontalbottom .imageWrap {
    text-align: center;
    height: 100%;
    display: inline-block;
    background: #fff;
    border-radius: 6px;
}

.horizontalbottom .sm_drag:last-child {
    margin-right: 0;
}

.imageWrap {
    width: 100%;
    overflow: hidden;
    cursor: auto;
    height: 100%;
    background: #fff;
    border-radius: 6px;
}

.horizontalbottom .sm_drag {
    display: inline-block;
    text-align: center;
    margin-bottom: 9px;
    margin-right: 1.2%;
    width: 19%;
    height: 94%;
}

#smdraghb_0 {
    width: 29%;
    height: 182%;
    position: absolute;
    top: -81%;
    z-index: 1;
    left: -17px;
    border: 3px solid #93A831;
}

.smdraghb_0 {
    width: 31% !important;
    height: 266% !important;
    top: -166% !important;
}

.vertical .sm_drag {
    display: inline-block;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 7%;
    margin-right: 2%;
    width: 95%;
    height: 14.3%;
    margin-left: 0px;
}

.sm_alphabetswrap {
    width: 100%;
    height: 19%;
    margin-bottom: 10px;
}

.vertical {
    position: absolute;
    width: 14.6%;
    height: 89%;
    top: 15px;
    right: 1.2%;
    padding-top: 3px;
    z-index: 1;
    background: #93A831;
    padding-left: 4px;
    border-radius: 8px;
}

.vertical5 {
    position: absolute;
    width: 11.8%;
    height: 89%;
    top: 15px;
    right: 1.2%;
    padding-top: 3px;
    z-index: 1;
    background: #93A831;
    padding-left: 4px;
    border-radius: 8px;
}

.vertical5 .sm_drag {
    height: 11.4%;
    display: inline-block;
    text-align: center;
    background: #fff;
    border-radius: 6px;
    margin-bottom: -1%;
    margin-right: 2%;
    width: 95%;
    margin-left: 0px;
    overflow: hidden;
}

.horizontalbottom5 {
    position: absolute;
    width: 95%;
    background: #93A831;
    padding-left: 27%;
    z-index: 1;
    padding-right: 3px;
    border-radius: 8px;
    bottom: 1%;
    height: 11%;
    padding-top: 3px;
    right: 7px;
    padding-bottom: 0px;
}

.horizontalbottom5 .sm_drag {
    width: 16%;
    display: inline-block;
    text-align: center;
    margin-bottom: 9px;
    margin-right: .8%;
    height: 94%;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.horizontalbottom5 .sm_drag:last-child {
    margin-right: 0;
}

.horizontalbottom {
    position: absolute;
    width: 95%;
    background: #93A831;
    padding-left: 25%;
    z-index: 1;
    padding-right: 3px;
    border-radius: 8px;
    bottom: 1.8%;
    height: 14%;
    padding-top: 3px;
    right: 7px;
    padding-bottom: 0px;
}

.horizontaltop {
    position: absolute;
    right: -2%;
    top: 1%;
    width: 50%;
}

.horizontaltop .sm_drag {
    width: 16%;
}

.sm_gameRFTWrap {
    height: 600px;
}

.sm_gameLFT {
    padding-left: 1%;
    padding-right: 0;
    width: 86%;
    height: 87%;
    float: left;
    padding-top: 2%;
    position: relative;
}

.sm_gameRFT {
    padding-left: 0;
    padding-right: 0;
    width: 11%;
    height: 87%;
    float: left;
}

.sm_imagedisplay {
    border: 1px solid #ccc;
    height: 176px;
    bottom: 269px;
    position: absolute;
    width: 31%;
    right: 17%;
    top: 19%;
    display: none;
}

.sm_drag .imageWrap img {
    width: 100%;
    height: 100%;
}

.invisible {
    visibility: hidden;
    cursor: auto !important;
}

.sm_drop5 {
    width: 18.2%;
    border: 1px solid #666666;
    display: inline-block;
    margin-right: 4px;
    text-align: center;
    height: 100%;
    margin-bottom: 4px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    margin-right: .1%;
    margin-left: 1%;
}

.sm_drop5 img,
.sm_drag img {
    width: 100%;
    height: 100%;
}

.emptydropbox {
    background-color: #ccc;
    margin-right: .8%;
}

.emptydropbox4 {
    background-color: #ccc;
    margin-right: 2.6%;
}

.sm_imagedisplay img {
    width: 100%;
    height: 100%;
}

.cursorauto {
    cursor: auto !important;
}

.smoverlay0 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0ms;
    visibility: visible;
    opacity: 1;
    z-index: 8;
}

.smshowgetready {
    font-size: 52px;
    text-align: center;
    
    -webkit-text-stroke: 1px #2BC0C4;
    color: #7A2C60;
}

.smtest {
    width: 200px;
    height: 200px;
    position: absolute;
    bottom: 100px;
    left: 0px;
}

.SMwtimer {
    border: none;
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    padding: 0;
    text-align: center;
    margin: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 57%;
    height: 61px;
    padding-bottom: 6px;
    
}

.smlogo {
    width: 65%;
    height: 38%;
    margin: 0 auto;
    background-repeat: no-repeat;
    margin-top: 9%;
    background-size: 100% 100%;
}

.sminstructions {
    width: 10%;
    height: 10%;
    position: absolute;
    top: 2%;
    right: 2%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}

.sm_instruction_content {
    width: 84%;
    height: 88%;
    position: absolute;
    background-repeat: no-repeat;
    left: 8%;
    top: 8%;
    padding-top: 11%;
    padding-left: 8%;
    padding-right: 8%;
    padding-bottom: 10%;
    text-align: center;
    background-size: 100% 100%;
}

.sm_instruction_content {
    -moz-animation: smappear 1s ease 0s 1 normal;
    -ms-animation: smappear 1s ease 0s 1 normal;
    -webkit-animation: smappear 1s ease 0s 1 normal;
    animation: smappear 1s ease 0s 1 normal;
}

@-webkit-keyframes smappear {
    0% {
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -webkit-transform: scale3d(1, 1, 1);
    }
}

@-ms-keyframes smappear {
    0% {
        -ms-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -ms-transform: scale3d(1, 1, 1);
    }
}

@-moz-keyframes smappear {
    0% {
        -moz-transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        -moz-transform: scale3d(1, 1, 1);
    }
}

@keyframes smappear {
    0% {
        transform: scale3d(0.3, 0.3, 0.3);
    }

    60% {
        transform: scale3d(1, 1, 1);
    }
}

.sm_instruction_header {
    color: #fff;
    font-size: 22px;
    
    text-align: center;
    margin-bottom: 9%;
}

.smControlsRightWrap,
.smleftsmwrap {
    width: 100%;
    height: 100%;
    text-align: center;
}

.smControlsWrap {
    text-align: center;
    width: 100%;
    height: 12%;
    margin-left: 0%;
    margin-top: 2%;
}

.sm_dropboxwrap {
    width: 100%;
    height: 18%;
}

.sm_dropboxwrap5 {
    width: 100%;
    height: 16%;
}

.smcontrols {
    width: 23%;
    height: 100%;
    cursor: pointer;
    background-repeat: no-repeat;
    display: inline-block;
    background-size: 100% 100%;
    margin-right: 2%;
}

.tooltip.smcustomClass .tooltip-inner {
    color: #fff;
    background-color: #423f3f;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.tooltip.smcustomClassrt {
    top: 85px !important;
}

.tooltip.smcustomClass {
    top: 65px !important;
    z-index: 5 !important;
}

.smgameplayWrap {
    border: 9px solid #DBC111;
    width: 100%;
    height: 100%;
    position: absolute;
    /*z-index: 1;*/
}

.nomargin {
    margin-right: 0px;
}

.SMtimermode {
    border: none;
    background: transparent;
    color: #fff;
    font-size: 18px;
    width: 100%;
    height: 61px;
    background-position-y: 3px;
    background-size: 100% 100%;
    text-align: center;
    background-repeat: no-repeat;
    padding-bottom: 1%;
    
}

.SMtimermodewrap {
    float: left;
    width: 23%;
    margin-right: 4%;
    text-align: center;
    height: 50px;
}

.SMtimermodewrap:first-child {
    margin-left: 4%;
}

.SMtimermodeparent {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 14%;
    display: flex;
    justify-content: center;
}

.SMtimerparent {
    margin-top: 14%;
}

.sm_closeinstruction {
    width: 7%;
    height: 9%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
}

.sm_instruction_step {
    width: 96%;
    height: 62%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    margin-top: 16%;
    padding: 2% 5%;
    text-align: left;
    font-size: 22px;
    cursor: default;
}

.sm_closeinstruction {
    width: 9%;
    height: 9%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 9%;
    top: 25%;
    cursor: pointer !important;
}

.sm_instruction_step ol li {
    margin-bottom: 7%;
    color: #000;
}

.leftsmlogo {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 80%;
    height: 24%;
    margin: 0 auto;
}

.smatoe {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #912706;
    text-align: center;
    font-size: 22px;
    margin: 0 auto;
    
    width: 96%;
    height: 18%;
    margin-top: 3%;
    margin-bottom: 10%;
    display: inline-flex;
    justify-content: center;
    flex-direction: column;
    padding-top: 5%;
}

.smstarwrap {
    text-align: center;
}

.smstarwrap6 {
    margin-left: 5%;
}

.smstar {
    display: inline-block;
    font-size: 50px;
    margin: 7px;
    width: 15%;
    height: 43px;
    clear: both;
}

.smstar img {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: block;
}

.smgameplayblock {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    visibility: visible;
    opacity: .7;
    z-index: 0;
}

.rightEffect {
    border: 3px solid #00A000;
    cursor: default;
}

.wrongEffect {
    border: 3px solid red;
}

.smScoreBg {
    background: #41E5F0;
    padding: 3%;
    margin: 3%;
    border-radius: 7px;
    height: 94%;
    width: 94%;
    border: 4px solid #286B6E;
}

.smtimedetails {
    width: 33%;
    float: left;
    color: #000;
    font-size: 15px;
    text-align: center;
    margin-right: 3%;
    margin: 0 auto;
    
}

.smscoredetails {
    background: #1BD1DB;
    border: 3px solid #06BEC8;
    border-radius: 6px;
    overflow: auto;
    width: 79%;
    margin: 0 auto;
    margin-top: 6%;
    padding: 20px 0;
    position: relative;
    z-index: 1;
}

.smtimedetailsbox {
    border-radius: 6px;
    text-align: center;
    margin: 0 auto;
    margin-top: 4%;
    color: #fff;
    
    background-repeat: no-repeat;
    height: 80px;
    margin-top: 2%;
    width: 84%;
    text-align: center;
    height: 48px;
    line-height: 43px;
    background-size: 100% 100%;
    font-size: 17px;
}

.smplayagain {
    width: 28%;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
}

.smplayagainwithtrophy {
    width: 31%;
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 3%;
}

.smplayagainwithtrophypa {
    width: 28%;
    margin: 0 auto;
    margin-top: 4%;
    margin-bottom: 4%;
}

.smplayagainbtn {
    border: none;
    background: transparent;
    width: 100%;
    width: 100%;
    height: 61px;
    font-size: 17px;
    color: #8B4006;
    
    background-repeat: no-repeat;
    position: relative;
    z-index: 111;
    background-size: 100% 100%;
    padding-bottom: 6%;
}

.smplayagainbtn,
.smnextlevelbtn {
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.smplayagainbtn2 {
    border: none;
    background: transparent;
    width: 100%;
    height: 100%;
    background-position-y: 3px;
    font-size: 22px;
    color: #8B4006;
    
    font-size: 17px;
    padding-bottom: 6%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.smshowgetreadycount {
    font-size: 180px;
    
    margin: 0 auto;
    text-align: center;
    margin-top: 2%;
    padding: 0;
    margin: 0 auto;
    line-height: 93%;
    -webkit-text-stroke: 2px #2BC0C4;
    color: #7A2C60;
}

.sm_feathers {
    width: 120px;
    height: 200px;
    position: absolute;
    z-index: 0;
}

.smTimerWrap {
    position: relative;
    background-size: 100% 118%;
    height: 27%;
    background-repeat: no-repeat;
    background-position-y: -30px;
}

.smLoseWrap {
    margin-top: 34%;
    position: relative;
    -moz-animation: smappear 1s ease 0s 1 normal;
    -ms-animation: smappear 1s ease 0s 1 normal;
    -webkit-animation: smappear 1s ease 0s 1 normal;
    animation: smappear 1s ease 0s 1 normal;
}

.smLoseWrap2 {
    margin-top: 39%;
    position: relative;
    background-size: 100% 100%;
    height: 24%;
}

#SMwotimer {
    float: right;
}

#SMwtimer {
    float: left;
}

.smlosetext {
    color: #7A2C60;
    font-size: 43px;
    text-align: center;
    
}

.smscoredetails2,
.smscoredetails_woscore {
    background: #1BD1DB;
    border: 3px solid #06BEC8;
    border-radius: 6px;
    overflow: auto;
    width: 79%;
    margin: 0 auto;
    margin-top: 6%;
    padding: 20px 0;
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 8%;
}

.smscoredetails_woscore {
    padding: 18% 0;
}

#sm_feathers3 {
    left: 3%;
    bottom: 7%;
}

#sm_feathers4 {
    right: 3%;
    transform: rotateY(180deg);
    bottom: 7%;
}

.smtrophywrap {
    height: 55%;
    clear: both;
}

.smtrophy {
    height: 75%;
    width: 42%;
    margin: 0 auto;
}

.smtrophy img {
    width: 100%;
    height: 100%;
}

.sm_completedmsg {
    color: #7A2C60;
    font-size: 20px;
    text-align: center;
    
    padding-top: 2%;
}

.smcongrats {
    font-size: 24px;
}

.smtimedetailswotimer {
    width: 33%;
    color: #000;
    font-size: 15px;
    text-align: center;
    margin: 0 auto;
    
}

.smplayagainwithtrophynl {
    width: 29%;
}

.smnextlevelbtn {
    border: none;
    background: transparent;
    width: 100%;
    height: 61px;
    font-size: 23px;
    color: #fff;
    
    text-align: center;
    cursor: pointer;
    position: relative;
    z-index: 111;
    background-size: 100% 100%;
    font-size: 17px;
    background-repeat: no-repeat;
    padding-bottom: 6%;
}

.smplayagainwithtrophy.smpa {
    float: left;
    margin-right: 3%;
    margin-left: 18%;
    margin-top: 5.4%;
    height: 61px;
}

.smplayagainwithtrophy.smnl {
    float: left;
    margin-top: 5%;
}

.smplayagainwithtrophy.smpa1 {
    float: left;
    margin-right: 3%;
    margin-left: 21%;
    margin-top: 0;
}

.smplayagainwithtrophy.smnl1 {
    float: left;
    margin-top: 0;
}

.fastpawrap {
    position: relative;
    height: 11%;
}

.fastpa {
    position: absolute;
    background-repeat: no-repeat;
    z-index: 111;
}

.smclockWrap {
    width: 230px;
    height: 470px;
    margin: 0 auto;
    margin-top: -4%;
    font-size: 18px;
    text-align: center;
    position: relative;
    transform: scale(.85, .85);
}

.smtimeRemainlabel {
    top: 56%;
    position: relative;
    color: #fff;
}

.smcountdown {
    font-size: 30px;
    position: relative;
    top: 56%;
    color: yellow;
    
}

.smtimeModelabel {
    position: relative;
    top: 57%;
    color: #fff;
}

.smtimeMode {
    position: relative;
    top: 60%;
    font-size: 24px;
    color: #fff;
}

.smsplashwrap {
    width: 100%;
    height: 100%;
}

.smaddbottom {
    margin-top: 13% !important;
}

.smclockDialSlow {
    -webkit-animation: sm_playc 60s steps(2) infinite, sm_playh 30s steps(30) infinite;
    -moz-animation: sm_playc 60s steps(2) infinite, sm_playh 30s steps(30) infinite;
    -ms-animation: sm_playc 60s steps(2) infinite, sm_playh 30s steps(30) infinite;
    animation: sm_playc 60s steps(2) infinite, sm_playh 30s steps(30) infinite;
}

.smclockDialRegular {
    -webkit-animation: sm_playc 50s steps(2) infinite, sm_playh 25s steps(30) infinite;
    -moz-animation: sm_playc 50s steps(2) infinite, sm_playh 25s steps(30) infinite;
    -ms-animation: sm_playc 50s steps(2) infinite, sm_playh 25s steps(30) infinite;
    animation: sm_playc 50s steps(2) infinite, sm_playh 25s steps(30) infinite;
}

.smclockDialFast {
    -webkit-animation: sm_playc 40s steps(2) infinite, sm_playh 20s steps(30) infinite;
    -moz-animation: sm_playc 40s steps(2) infinite, sm_playh 20s steps(30) infinite;
    -ms-animation: sm_playc 40s steps(2) infinite, sm_playh 20s steps(30) infinite;
    animation: sm_playc 40s steps(2) infinite, sm_playh 20s steps(30) infinite;
}

@-ms-keyframes sm_playc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -560px;
    }
}

@-ms-keyframes sm_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -6900px;
    }
}

@-webkit-keyframes sm_playc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -560px;
    }
}

@-webkit-keyframes sm_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -6900px;
    }
}

@-moz-keyframes sm_playc {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: 0px -560px;
    }
}

@-moz-keyframes sm_playh {
    0% {
        background-position: 0px 0px;
    }

    100% {
        background-position: -6900px 0px;
    }
}

@keyframes sm_playc {
    0% {
        background-position-y: 0px;
    }

    100% {
        background-position-y: -560px;
    }
}

@keyframes sm_playh {
    0% {
        background-position-x: 0px;
    }

    100% {
        background-position-x: -6900px;
    }
}

.smclockDialWrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 358px;
}

.smclockDial {
    width: 229px;
    height: 276px;
}

.switchtimer {
    font-size: 16px;
    width: 106%;
    margin-top: 4%;
}

.smgetreadyTimerWrap {
    margin-bottom: 0 !important;
}

#sm_feathers1 {
    width: 19%;
    background-repeat: no-repeat;
    height: 108%;
    background-size: 100% 100%;
    left: 2%;
    bottom: 22%;
}

#sm_feathers2 {
    right: 2%;
    transform: rotateY(180deg);
    width: 19%;
    background-repeat: no-repeat;
    height: 108%;
    background-size: 100% 100%;
    bottom: 22%;
}

.smrepeatletter {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 70%;
    height: 10%;
    color: #fff;
    font-size: 18px;
    text-align: center;
    padding-top: 5%;
    margin: 0 auto;
    margin-top: 9%;
    cursor: pointer !important;
}

.smstar5 {
    font-size: 50px;
    width: 15%;
    height: 43px;
    clear: both;
    margin: 5px 0px 0px 27px;
    display: inline-flex;
}

.smstar5 img {
    width: 100%;
    height: 100%;
}

.vertical6 {
    width: 10%;
    height: 89%;
    right: 2.5%;
}

.sm_alphabets6 {
    width: 15.6%;
    margin-right: 1%;
    margin-left: 0%;
    font-size: 30px;
    line-height: 66px;
}

.vertical6 .sm_drag6 {
    background: #fff;
    border-radius: 6px;
    margin-bottom: 0%;
    margin-right: 2%;
    width: 95%;
    height: 9%;
    margin-left: 0px;
    overflow: hidden;
}

.horizontalbottom6 {
    width: 95%;
    padding-left: 28%;
    padding-right: 3px;
    border-radius: 8px;
    bottom: 2.5%;
    height: 9%;
    padding-top: 3px;
    right: 14px;
    padding-bottom: 0px;
}

.horizontalbottom6 .sm_drag6 {
    display: inline-block;
    text-align: center;
    margin-bottom: 9px;
    margin-right: 1.2%;
    width: 13.2%;
    height: 94%;
}

.horizontalbottom6 #smdraghb_0 {
    width: 30%;
    height: 289%;
    position: absolute;
    top: -188%;
    z-index: 1;
    left: -3px;
    border: 3px solid #93A831;
}

.sm_alphabetswrap6 {
    height: 14%;
    margin-bottom: 10px;
    margin-top: 4px;
    margin-left: 1.5%;
}

.sm_dropboxwrap6 {
    width: 100%;
    height: 15%;
    margin-left: 1.5%;
}

.sm_dropboxwrap6 .sm_drop6 {
    width: 15.4%;
    text-align: center;
    height: 100%;
    margin-bottom: 4px;
    position: relative;
    background: #fff;
    border-radius: 3px;
    margin-right: .5%;
    margin-left: 0;
}

.emptydropbox6 {
    background-color: #ccc !important;
    margin-right: 1.2% !important;
}

.smstar6 {
    margin: 3px;
    width: 13%;
    height: 34px;
    float: left;
    margin-bottom: 6%;
}

.smstar6 img {
    width: 100%;
    height: 100%;
}


/*----laptop L1-----*/

@media screen and (max-width:1366px) and (min-width:768px) {
    .sm_completedmsg {
        -webkit-text-stroke: 0px #2BC0C4;
    }

    .smatoe {
        width: 65%;
        height: 10%;
    }

    .soundMatchContainer {
        max-width: 1200px;
        height: 100%;
    }

    .maincontainer {
        width: 51%;
    }

    .mainContainerOffset {
        margin-left: 0;
    }

    .SMwtimer {
        background-size: 100% 100%;
        font-size: 16px;
        width: 57%;
        height: 61px;
    }

    .SMtimermode {
        font-size: 18px;
        height: 61px;
    }

    .sidemenu {
        width: 24%;
    }

    .smatoe {
        width: 96%;
        height: 16%;
        margin-top: 1%;
    }

    .leftsmlogo {
        width: 93%;
        height: 28%;
    }

    .smcontrols {
        width: 23%;
        height: 100%;
    }

    .sm_alphabets {
        width: 20%;
        font-size: 60px;
        height: 100%;
        line-height: 83px;
    }

    .sm_alphabets6 {
        width: 15.6%;
        margin-right: 1%;
        margin-left: 0%;
        font-size: 30px;
        line-height: 66px;
    }

    .vertical .sm_drag {
        margin-bottom: 3px;
        margin-right: 0%;
        width: 95%;
        height: 14%;
        margin-left: 0px;
    }

    .vertica6l .sm_drag6 {
        height: 8%;
        margin-bottom: 1%;
    }

    #smdraghb_0 {
        left: -17px;
    }

    .smstar img,
    .smstar6 img {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        display: block;
    }

    .smstar {
        font-size: 50px;
        margin: 3px;
        width: 15%;
        height: 43px;
        clear: both;
    }

    .smstar6 {
        font-size: 50px;
        margin: 3px;
        width: 13%;
        height: 34px;
        float: left;
        margin-bottom: 6%;
    }

    .smshowgetreadycount {
        font-size: 250px;
    }

    .smtimedetailsbox {
        width: 100%;
        text-align: center;
        height: 60px;
        line-height: 54px;
        background-size: 100% 100%;
        font-size: 20px;
    }

    .smaddbottom {
        margin-top: 13% !important;
    }

    #sm_feathers1,
    #sm_feathers2 {
        width: 19%;
        background-repeat: no-repeat;
        height: 130%;
        background-size: 100% 100%;
    }

    .horizontalbottom {
        padding-right: 3px;
    }

    .horizontalbottom .sm_drag {
        margin-right: 1%;
        width: 19.1%;
    }

    .horizontalbottom .sm_drag6 {
        margin-right: 1.2%;
        width: 13.2%;
    }

    .smgetreadyTimerWrap #sm_feathers1,
    .smgetreadyTimerWrap #sm_feathers2 {
        height: 123%;
        bottom: 9%;
    }

    .smtimedetails {
        font-size: 18px;
    }

    .smplayagainbtn {
        width: 100%;
        height: 61px;
        background-position-y: 3px;
        font-size: 17px;
    }

    .smplayagain {
        width: 28%;
        margin: 0 auto;
        margin-top: 3%;
        margin-bottom: 3%;
    }

    .smshowgetreadycount {
        line-height: 93%;
    }

    .sm_instruction_step {
        font-size: 16px;
    }

    .tooltip.smcustomClassrt {
        top: 85px !important;
    }

    .tooltip.smcustomClass {
        top: 65px !important;
        z-index: 5 !important;
    }

    .smnextlevelbtn {
        width: 100%;
        height: 61px;
        font-size: 17px;
    }

    .smplayagainbtn2 {
        font-size: 17px;
    }

    .smplayagainwithtrophy {
        width: 31%;
        margin: 0 auto;
        margin-top: 2%;
        margin-bottom: 3%;
    }

    .smplayagainwithtrophy.smpa {
        margin-left: 18%;
    }

    .switchtimer {
        font-size: 16px;
    }

    .smplayagainwithtrophy.smpa1 {
        margin-left: 21%;
        margin-top: 2%;
    }

    .smplayagainwithtrophy.smnl1 {
        margin-top: 2%;
    }

    .smclockWrap {
        transform: scale(.65, .65);
        margin-top: -15%;
    }

    .smControlsWrap {
        height: 8%;
    }

    .smshowgetreadycount {
        font-size: 180px;
    }

    .smrepeatletter {
        line-height: 13px;
    }

    .smcontrols {
        width: 16%;
    }
}


/*----laptop L1-----*/


/*----------------ipad both orient starts-----------------*/

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .horizontalbottom6 #smdraghb_0 {
        width: 32% !important;
    }

    .tooltip {
        display: none !important;
    }

    .smlogo {
        width: 80%;
        height: 48%;
        margin: 0 auto;
        background-repeat: no-repeat;
        margin-top: 9%;
        background-size: 100% 100%;
    }

    .SMtimermode {
        width: 100%;
        height: 62px;
        font-size: 15px;
    }

    .soundMatchContainer {
        max-width: 1200px;
        height: 600px;
    }

    .maincontainer {
        width: 59%;
    }

    .sidemenu {
        width: 20%;
    }

    .leftsmlogo {
        width: 93%;
        height: 23%;
    }

    .smatoe {
        width: 96%;
        height: 11%;
        font-size: 1.2vw;
    }

    .smstar {
        font-size: 50px;
        margin: 3px;
        width: 21%;
    }

    .smstar6 {
        font-size: 50px;
        margin: 3px;
        width: 13%;
        height: 28px;
    }

    .smControlsWrap {
        height: 6%;
    }

    .smcongrats {
        font-size: 25px;
    }

    .sm_completedmsg {
        font-size: 23px;
    }

    #sm_feathers1,
    #sm_feathers2 {
        height: 120%;
    }

    .smshowgetreadycount {
        font-size: 200px;
    }

    .smstarwrap {
        height: auto;
        margin-top: 9%;
    }

    .smstar {
        height: 42px;
    }

    .smclockWrap {
        transform: scale(.7, .7);
        margin-left: -9px;
    }

    .sm_gameLFT {
        height: 70%;
    }

    .sm_alphabetswrap {
        height: 19%;
    }

    .sm_dropboxwrap {
        height: 50%;
    }

    .sm_dropboxwrap6 {
        height: 19%;
    }

    .sm_alphabets {
        width: 18%;
        height: 100%;
        font-size: 49px;
    }

    .sm_alphabets6 {
        width: 15.6%;
        margin-right: 1%;
        margin-left: 0%;
    }

    #smdraghb_0 {
        left: -16px;
    }

    .vertical .sm_drag {
        height: 10.8%;
        overflow: hidden;
        margin-bottom: -1%;
    }

    .vertical .sm_drag6 {
        height: 8.8%;
    }

    .vertical6 {
        width: 10%;
    }

    .horizontalbottom .sm_drag {
        display: inline-block;
        text-align: center;
        margin-bottom: 9px;
        margin-right: 1.9%;
        width: 12.6%;
        height: 92%;
    }

    .horizontalbottom {
        bottom: 6px;
        width: 95%;
        height: 14%;
        right: 7px;
    }

    .smtimedetailsbox {
        width: 100%;
        font-size: 17px;
        height: 62px;
        background-size: 100% 100%;
        line-height: 29px;
    }

    .smplayagainbtn2 {
        width: 100%;
        height: 62px;
        font-size: 17px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .switchtimer,
    .smplayagainbtn2 {
        width: 100%;
        height: 62px;
        font-size: 17px;
    }

    .smstar {
        height: 20%;
        width: 20%;
        margin-bottom: 5%;
    }

    .smstar img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .tooltip {
        display: none !important;
    }

    .SMwtimer {
        font-size: 13px;
        width: 64%;
        height: 62px;
    }

    .horizontalbottom6 .sm_drag6 {
        margin-bottom: 9px !important;
        width: 13.2% !important;
        /*	margin-right: 1.3% !important;
        		height: 92% !important;*/
    }

    .horizontalbottom6 {
        bottom: 15px;
        width: 94%;
        height: 9%;
        right: 15px;
        padding-left: 30%;
    }

    .smControlsWrap {
        height: 8%;
    }

    .smrepeatletter {
        height: 10%;
        padding-top: 7%;
    }

    .smlosetext {
        font-size: 23px;
    }

    .sm_drop {
        height: 42%;
        width: 18%;
    }

    .horizontalbottom .sm_drag {
        margin-bottom: 9px;
        margin-right: 1.9%;
        width: 12.6%;
        height: 92%;
        margin-bottom: 9px;
        margin-right: 1.2%;
        width: 19%;
        height: 94%;
    }

    .vertical .sm_drag {
        margin-bottom: 7%;
    }
}


/*----------------ipad both orient ends-----------------*/


/*----------------ipad landscape starts-----------------*/

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    .soundMatchContainerrow {
        transform: scale(.85, .85);
    }

    .smrepeatletter {
        font-size: 15px;
    }

    .smControlsWrap {
        height: 8% !important;
    }

    .smstar6 {
        height: 25px;
    }

    .vertical6 .sm_drag6 {
        margin-bottom: 8%;
        width: 92%;
    }

    .horizontalbottom6 #smdraghb_0 {
        width: 32.5% !important;
    }

    .horizontalbottom6 #smdraghb_0 {
        left: -6px;
    }
}


/*----------------ipad landscape ends-----------------*/


/*----------------ipad potrait starts-----------------*/

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .vertical .sm_drag {
        width: 95% !important;
    }

    .horizontalbottom {
        right: 5px !important;
    }

    .sm_alphabets {
        font-size: 42px;
        line-height: 78px;
    }

    #smdraghb_0 {
        left: -11px;
    }

    .soundMatchContainer {
        height: 475px !important;
    }

    .tooltip {
        display: none !important;
    }

    .vertical .sm_drag {
        height: 10.5%;
        width: 89%;
    }

    .vertical .sm_drag6 {
        height: 10%;
    }

    .smplayagainwithtrophy.smpa {
        margin-left: 15%;
    }

    .smplayagainwithtrophy {
        width: 29%;
        margin-bottom: 3%;
    }

    .smnextlevelbtn,
    .smplayagainbtn,
    .smtimedetailsbox {
        height: 52px;
    }

    .switchtimer {
        font-size: 11px;
        width: 116%;
    }

    .smpa {
        width: 33%;
    }

    .smshowgetreadycount {
        font-size: 150px;
    }

    .smplayagainbtn2,
    .smtimedetails {
        font-size: 11px;
        line-height: 50px;
    }

    .smtimedetailswotimer {
        font-size: 14px;
    }

    .sm_completedmsg {
        font-size: 18px;
        -webkit-text-stroke: 0px #7A2C60;
    }

    .smcongrats {
        font-size: 20px;
    }

    .smcountdown {
        font-size: 27px;
    }

    .sm_feathers {
        width: 22%;
        height: 100%;
        background-size: 100% 100%;
    }

    .sm_instruction_header {
        font-size: 23px;
        margin-left: 5%;
    }

    .sm_instruction_step {
        padding: 5% 1%;
        padding-right: 4%;
        font-size: 14px !important;
    }

    .tooltip {
        display: none !important;
    }

    .vertical {
        height: 87%;
        padding-left: 5px;
    }

    .smatoe {
        font-size: 10px;
    }

    .smclockWrap {
        transform: scale(.6, .6);
        margin-left: -37px;
    }

    .SMwtimer {
        height: 52px;
        font-size: 11px;
    }

    .sm_alphabets6 {
        font-size: 24px !important;
    }

    .smstar6 {
        width: 12%;
        height: 19px;
    }

    .leftsmlogo {
        height: 21%;
    }

    .smControlsWrap {
        height: 7% !important;
    }

    .smrepeatletter {
        font-size: 11px;
        padding-top: 9%;
    }

    .sm_dropboxwrap6 .sm_drop6 {
        width: 15.2%;
    }

    .horizontalbottom6 #smdraghb_0 {
        left: -2px !important;
        width: 34% !important;
    }

    .horizontalbottom6 {
        right: 11px;
        padding-left: 32%;
    }

    .vertical6 .sm_drag6 {
        margin-bottom: 4px;
    }

    .smLoseWrap2 {
        height: 20% !important;
    }

    .smtimedetailsbox {
        line-height: 52px;
    }

    .smTimerWrap {
        height: 15%;
    }

    .smtimedetails {
        line-height: 22px;
    }

    .smplayagainbtn,
    .smnextlevelbtn,
    .smtimedetailsbox {
        font-size: 12px;
    }

    .smplayagain {
        margin-top: 16%;
    }

    .SMtimermode {
        height: 52px;
        font-size: 11px;
    }

    .smplayagainbtn {
        background-position-y: 1px;
    }

    .smshowgetreadycount {
        font-size: 160px !important;
    }

    .smTimerWrapwts {
        height: 22% !important;
    }

    .smaddbottom {
        margin-top: 18% !important;
    }

    .sm_alphabets {
        font-size: 43px;
        line-height: 74px;
    }

    .horizontalbottom6 .sm_drag6 {
        width: 13.3% !important;
        margin-right: 1%;
    }

    .sm_alphabets {
        font-size: 41px !important;
        line-height: 58px !important;
        margin-right: 2.9% !important;
    }

    .smstar {
        width: 17% !important;
    }
}


/*----------------ipad potrait ends-----------------*/


/*------iphone 6 mobile landscape 667px starts---------*/

@media only screen and (min-device-width: 375px) and (max-device-width: 767px) and (orientation: landscape) {
    .smshowgetreadycount {
        font-size: 132px !important;
    }

    .smstar5 {
        width: 10%;
        height: 27px;
        margin: 2px 10px;
    }

    .smcontrols {
        width: 19%;
    }

    .vertical5 {
        width: 11.8%;
        height: 87%;
        top: 8px;
    }

    .sm_drop5 {
        width: 17.5%;
    }

    .emptydropbox {
        margin-right: 1.3%;
    }

    .tooltip {
        display: none !important;
    }

    .smlogo {
        width: 80%;
        height: 48%;
        margin: 0 auto;
        background-repeat: no-repeat;
        margin-top: 9%;
        background-size: 100% 100%;
    }

    .maincontainer {
        width: 42%;
    }

    .SMtimermode {
        width: 100%;
        height: 50px;
        font-size: 13px;
    }

    .soundMatchContainer {
        max-width: 1200px;
        height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .leftsmlogo {
        width: 62%;
        height: 23%;
    }

    .smstar {
        font-size: 50px;
        margin: 3px;
        width: 21%;
    }

    .smControlsWrap {
        height: 9%;
    }

    .smcongrats {
        font-size: 25px;
    }

    .sm_completedmsg {
        font-size: 23px;
    }

    #sm_feathers1,
    #sm_feathers2 {
        height: 120%;
    }

    .smstarwrap {
        height: auto;
        margin-top: 0%;
    }

    .smstar6 {
        width: 10%;
        height: 26px;
    }

    .smstar {
        height: 42px;
    }

    .smclockWrap {
        transform: scale(.7, .7);
        margin-left: -9px;
    }

    .sm_gameLFT {
        height: 70%;
    }

    .sm_alphabetswrap {
        height: 21%;
    }

    .sm_alphabetswrap6 {
        height: 19%;
    }

    .sm_dropboxwrap {
        height: 50%;
    }

    .sm_alphabets {
        width: 18%;
        height: 100%;
        font-size: 49px;
    }

    .sm_drop {
        height: 43%;
        width: 18%;
    }

    .sm_drop6 {
        height: 39%;
        width: 15.6%;
        margin-left: -2px;
        margin-right: 1.6%;
    }

    .sm_alphabets6 {
        width: 15.6%;
        margin-right: 1%;
        margin-left: 0%;
    }

    #smdraghb_0 {
        left: -16px;
    }

    .sm_alphabets5 {
        width: 17%;
        border: 1px solid;
        font-size: 33px;
        height: 100%;
        background: #fff;
        text-align: center;
        
        border-radius: 3px;
        line-height: 35px;
        margin-left: 1%;
        margin-right: 2%;
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
    }

    .sm_alphabetswrap5 {
        width: 100%;
        height: 21%;
        margin-bottom: 10px;
    }

    .sm_dropboxwrap5 {
        width: 100%;
        height: 21%;
    }

    .sm_dropboxwrap5 .sm_drop {
        width: 16.9%;
        border: 1px solid #666666;
        display: inline-block;
        margin-right: 4px;
        text-align: center;
        height: 100%;
        margin-bottom: 4px;
        position: relative;
        background: #fff;
        border-radius: 3px;
        margin-right: 1.8%;
        margin-left: 1%;
    }

    .horizontalbottom .sm_drag {
        display: inline-block;
        text-align: center;
        margin-bottom: 9px;
        margin-right: 1.9%;
        width: 15%;
        height: 92%;
    }

    .horizontalbottom6 .sm_drag6 {
        margin-right: 2.5%;
        width: 12%;
    }

    .horizontalbottom {
        bottom: 11px;
        width: 95%;
        height: 11%;
        right: 7px;
    }

    .horizontalbottom6 {
        height: 10%;
        bottom: 3%;
    }

    .horizontalbottom5 {
        right: 3px;
    }

    .smrepeatletter {
        width: 50%;
        height: 10%;
        font-size: 12px;
        padding-top: 3%;
    }

    .horizontalbottom5 .sm_drag {
        width: 16%;
    }

    .smtimedetailsbox {
        width: 100%;
        font-size: 13px;
        height: 41px;
        background-size: 100% 100%;
        line-height: 35px;
    }

    .smplayagainbtn2 {
        width: 100%;
        height: 62px;
        font-size: 17px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .switchtimer,
    .smplayagainbtn2 {
        width: 100%;
        height: 52px;
        font-size: 13px;
    }

    .smstar {
        height: 15%;
        width: 11%;
        margin-bottom: 1%;
    }

    .smstar img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .soundMatchContainerrow {
        height: 397px;
        width: 979px;
    }

    .mainContainerOffset {
        width: 42%;
    }

    .SMwtimer {
        width: 75%;
        height: 50px;
        font-size: 13px;
    }

    .smlosetext {
        font-size: 22px;
        -webkit-text-stroke: 0px #06BEC8;
    }

    .sm_alphabets {
        height: 100%;
        font-size: 34px;
        line-height: 50px;
    }

    .vertical .sm_drag {
        margin-left: -2px;
        height: 10.4%;
    }

    .vertical .sm_drag6 {
        margin-left: -2px;
        height: 8.4%;
    }

    .vertical {
        top: 10px;
        right: 4px;
    }

    .horizontalbottom {
        bottom: 6px;
        right: 4px;
    }

    #smdraghb_0 {
        left: -12px;
    }

    .sidemenu {
        width: 26%;
    }

    .smatoe {
        width: 96%;
        height: 11%;
        font-size: 16px;
    }

    .sm_instruction_header {
        font-size: 15px;
        margin-top: -3%;
    }

    .sm_instruction_step {
        font-size: 12px;
    }

    .sm_instruction_step {
        padding: 4% 1%;
        padding-right: 3%;
    }

    .smplayagainwithtrophy {
        width: 28%;
    }

    .smplayagainwithtrophy.smpa {
        margin-left: 19%;
    }

    .sm_feathers {
        width: 21%;
        height: 100%;
        background-size: 100% 100%;
    }

    .smclockWrap {
        transform: scale(.5, .5);
        margin-left: 3%;
        margin-top: -38%;
    }

    .smtimedetails {
        font-size: 13px;
    }

    .smplayagainbtn {
        height: 40px;
        font-size: 12px;
    }

    .smshowgetready {
        font-size: 27px;
        -webkit-text-stroke: 0px #2BC0C4;
    }

    .smscoredetails {
        padding: 9px 0;
    }

    .smnextlevelbtn {
        height: 40px;
        font-size: 11px;
        margin-top: 9px
    }

    .smtrophy {
        height: 68%;
        width: 35%;
    }

    .smcongrats {
        font-size: 16px;
    }

    .sm_completedmsg {
        font-size: 14px;
        -webkit-text-stroke: 0px #2BC0C4;
        padding-top: 0%;
    }

    .tooltip {
        display: none !important;
    }

    .smtimedetailswotimer {
        font-size: 15px;
    }

    .smscoredetails2 {
        padding: 13px 0;
    }
}


/*------iphone 6 mobile landscape 667px ends---------*/


/*------iphone 6 plus mobile landscape starts---------*/

@media only screen and (min-device-width: 464px) and (max-device-width: 736px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 3) {
    .soundMatchContainerwrap {
        margin-top: -20px;
    }
}


/*------iphone 6 plus mobile landscape ends---------*/


/*------Laptop 680 starts---------*/

@media screen and (max-width: 1366px) and (min-width: 768px) {
    .horizontalbottom6 #smdraghb_0 {
        left: -9px;
    }

    .vertical .sm_drag {
        height: 14.6%;
    }

    .vertical6 .sm_drag6 {
        height: 9%;
    }

    .sm_alphabets {
        font-size: 52px;
        line-height: 78px;
    }

    .smControlsWrap {
        height: 12%;
    }

    .SMtimerparent {
        margin-top: 11%;
    }

    .smscoredetails2 {
        padding: 5% 0;
    }

    .smscoredetails_woscore {
        padding: 5% 0;
    }

    .smscoredetails {
        padding-top: 4%;
    }

    .smshowgetreadycount {
        font-size: 180px;
    }

    .SMtimermodeparent {
        margin-top: 11%;
    }

    .sminstructions {
        height: 9%;
    }

    .smplayagainwithtrophy.smpa1 {
        height: 12%;
    }

    .sm_alphabets6 {
        font-size: 28px;
        line-height: 67px;
    }
}


/*------Laptop 680 ends---------*/


/*abc sm all mobile starts*/

@media only screen and (max-device-width: 767px) {
    .horizontalbottom6 {
        height: 9%;
    }

    .smshowgetreadycount {
        font-size: 132px !important;
    }

    .smstar5 {
        width: 10%;
        height: 27px;
        margin: 2px 10px;
    }

    .smcontrols {
        width: 15%;
    }

    .vertical5 {
        width: 11.8%;
        height: 87%;
        top: 8px;
    }

    .sm_drop5 {
        width: 17.5%;
    }

    .emptydropbox {
        margin-right: 1.3%;
    }

    .tooltip {
        display: none !important;
    }

    .smlogo {
        width: 80%;
        height: 48%;
        margin: 0 auto;
        background-repeat: no-repeat;
        margin-top: 9%;
        background-size: 100% 100%;
    }

    .maincontainer {
        width: 42%;
    }

    .SMtimermode {
        width: 100%;
        height: 50px;
        font-size: 13px;
    }

    .soundMatchContainer {
        max-width: 1200px;
        height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .leftsmlogo {
        width: 62%;
        height: 23%;
    }

    .smstar {
        font-size: 50px;
        margin: 3px;
        width: 21%;
    }

    .smControlsWrap {
        height: 9%;
    }

    .smcongrats {
        font-size: 25px;
    }

    .sm_completedmsg {
        font-size: 23px;
    }

    #sm_feathers1,
    #sm_feathers2 {
        height: 120%;
    }

    .smstarwrap {
        height: auto;
        margin-top: 0%;
    }

    .sm_gameLFT4 {
        padding-left: 1%;
    }

    .sm_gameLFT6 {
        padding-left: 3%;
    }

    .smstar6 {
        width: 10%;
        height: 26px;
        margin-right: 4px;
        margin-left: 10px;
        margin-bottom: 10px;
    }

    .smstar {
        height: 42px;
    }

    .smclockWrap {
        transform: scale(.7, .7);
        margin-left: -9px;
    }

    .sm_gameLFT {
        height: 70%;
        padding-top: 3%;
    }

    .sm_alphabetswrap {
        height: 21%;
    }

    .sm_alphabetswrap6 {
        height: 19%;
    }

    .sm_dropboxwrap6 {
        height: 18%;
    }

    .sm_alphabets {
        width: 18%;
        height: 100%;
        font-size: 32px;
    }

    .sm_drop {
        height: 43%;
        width: 18%;
    }

    .sm_drop6 {
        height: 39%;
        width: 15.6%;
        margin-left: -2px;
        margin-right: 1.6%;
    }

    .sm_alphabets6 {
        width: 15.6%;
        margin-right: 1%;
        margin-left: 0%;
        font-size: 21px;
    }

    #smdraghb_0 {
        left: -16px;
    }

    .sm_alphabets5 {
        width: 17%;
        border: 1px solid;
        font-size: 33px;
        height: 100%;
        background: #fff;
        text-align: center;
        
        border-radius: 3px;
        line-height: 35px;
        margin-left: 1%;
        margin-right: 2%;
        display: inline-flex;
        justify-content: center;
        flex-direction: column;
    }

    .sm_alphabetswrap5 {
        width: 100%;
        height: 21%;
        margin-bottom: 10px;
    }

    .sm_dropboxwrap5 {
        width: 100%;
        height: 21%;
    }

    .sm_dropboxwrap5 .sm_drop {
        width: 16.9%;
        border: 1px solid #666666;
        display: inline-block;
        margin-right: 4px;
        text-align: center;
        height: 100%;
        margin-bottom: 4px;
        position: relative;
        background: #fff;
        border-radius: 3px;
        margin-right: 1.8%;
        margin-left: 1%;
    }

    .horizontalbottom .sm_drag {
        display: inline-block;
        text-align: center;
        margin-bottom: 9px;
        margin-right: 1%;
        width: 19%;
        height: 92%;
    }

    .horizontalbottom6 .sm_drag6 {
        margin-right: 1.6%;
        width: 12.8%;
    }

    .horizontalbottom {
        bottom: 11px;
        width: 95%;
        height: 11%;
        right: 7px;
    }

    .horizontalbottom5 {
        right: 3px;
    }

    .smrepeatletter {
        width: 50%;
        height: 10%;
        font-size: 12px;
        padding-top: 3%;
    }

    .horizontalbottom5 .sm_drag {
        width: 16%;
    }

    .smtimedetailsbox {
        width: 100%;
        font-size: 13px;
        height: 41px;
        background-size: 100% 100%;
        line-height: 35px;
    }

    .smplayagainbtn2 {
        width: 100%;
        height: 62px;
        font-size: 17px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    .switchtimer,
    .smplayagainbtn2 {
        width: 100%;
        height: 52px;
        font-size: 13px;
    }

    .smstar {
        height: 15%;
        width: 11%;
        margin-bottom: 1%;
    }

    .smstar img {
        width: 100%;
        height: 100%;
        display: block;
    }

    .soundMatchContainerrow {
        height: 397px;
        width: 979px;
    }

    .mainContainerOffset {
        width: 42%;
    }

    .SMwtimer {
        width: 75%;
        height: 50px;
        font-size: 13px;
    }

    .smlosetext {
        font-size: 22px;
        -webkit-text-stroke: 0px #06BEC8;
    }

    .sm_alphabets {
        height: 100%;
        line-height: 50px;
    }

    .sm_alphabets6 {
        font-size: 21px;
    }

    .vertical .sm_drag {
        margin-left: -2px;
        height: 14%;
        overflow: hidden;
        width: 100%;
        margin-bottom: 8%;
    }

    .vertical .sm_drag6 {
        width: 90%;
        margin-left: 0px;
        height: 8.4%;
        margin-bottom: 1%;
    }

    .vertical {
        top: 10px;
        right: 4px;
    }

    .horizontalbottom {
        bottom: 3%;
        right: 4px;
        height: 14%;
        padding-right: 0px;
    }

    #smdraghb_0 {
        left: -12px;
    }

    .sidemenu {
        width: 26%;
    }

    .smatoe {
        height: 12%;
        font-size: 16px;
        padding-top: 2%;
    }

    .starbrk6 {
        width: 83%;
    }

    .starbrk4 {
        width: 66%;
    }

    .sm_instruction_header {
        font-size: 15px;
        margin-top: -3%;
    }

    .sm_instruction_step {
        font-size: 12px;
    }

    .sm_instruction_step {
        padding: 4% 1%;
        padding-right: 3%;
    }

    .smplayagainwithtrophy {
        width: 28%;
    }

    .smplayagainwithtrophy.smpa {
        margin-left: 19%;
    }

    .sm_feathers {
        width: 21%;
        height: 100%;
        background-size: 100% 100%;
    }

    .smclockWrap {
        transform: scale(.5, .5);
        margin-left: 3%;
        margin-top: -38%;
    }

    .smtimedetails {
        font-size: 13px;
    }

    .smplayagainbtn {
        height: 42px;
        font-size: 12px;
    }

    .smshowgetready {
        font-size: 27px;
        -webkit-text-stroke: 0px #2BC0C4;
    }

    .smscoredetails {
        padding: 9px 0;
    }

    .smnextlevelbtn {
        height: 40px;
        font-size: 11px;
        margin-top: 9px
    }

    .smtrophy {
        height: 68%;
        width: 35%;
    }

    .smcongrats {
        font-size: 16px;
    }

    .sm_completedmsg {
        font-size: 14px;
        -webkit-text-stroke: 0px #2BC0C4;
        padding-top: 0%;
    }

    .tooltip {
        display: none !important;
    }

    .smtimedetailswotimer {
        font-size: 15px;
    }

    .smscoredetails2 {
        padding: 13px 0;
    }

    .sm_dropboxwrap6 .sm_drop6 {
        margin-right: .1%;
    }

    .horizontalbottom6 #smdraghb_0 {
        width: 31.5%;
        height: 305%;
        top: -209%;
        left: 0px;
    }

    .vertical6 {
        top: 4%;
        right: 3%;
    }

    .vertical6 .sm_drag6 {
        margin-left: 0px;
        height: 8.4%;
        margin-bottom: 11%;
    }

    .horizontalbottom6 {
        height: 8.8%;
        width: 93%;
        padding-left: 30%;
        left: 4%;
        padding-right: 3px;
    }

    .smplayagainwithtrophy.smnl {
        margin-top: 4%;
    }

    .sm_drop {
        margin-right: 1.3%;
    }

    .emptydropbox4 {
        margin-right: 2.6% !important;
    }
}


/*sound match ends*/


/*-------recommended screen starts------*/

.smrecommendedgameplay,
.tb2gamerecommendedbadge {
    height: 12% !important;
}

.tb2gamerecommendedgamewrap {
    position: absolute;
    height: 100%;
    width: 100%;
    background: #DDFFFF;
    z-index: 50;
    padding: 7px;
    top: 0;
}

.tb2gamerecommendedgame {
    height: 63%;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #fff;
    position: relative;
    box-shadow: #ccc 1px 2px 8px 2px;
    margin-bottom: 1%;
}

.tb2gamerecommendedgame img {
    width: 100%;
}

.tb2gameoptionaltitle {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/gameoptional_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 8%;
    width: 41%;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    line-height: 29px;
    color: #fff;
}

.tb2gameoptionalgamewrap {
    width: 100%;
    height: 28%;
}

.tb2gameoptionalgametable {
    display: flex;
    width: 100%;
    height: 100%;
}

.tb2gameoptionalgamerow {
    display: table-row;
}

.tb2gameoptionalgamelist {
    flex-basis: 100%;
    position: relative;
}

.tb2gameoptionalgamelist1 {
    flex-basis: 35% !important;
    margin: 0 auto;
}

.tb2gameoptionalgamelist2 {
    flex-basis: 40% !important;
    margin: 0 auto;
}

.recommendedbadge {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/gamerecommended_title.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 1%;
    width: 33%;
    height: 19%;
    right: -3px;
}

.tb2gamerecommendedgame button,
.tb2gameoptionalgamelist button {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/readingoptionalgameplay_button_Text.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.tb2gamerecommendedgame button {
    width: 26%;
    height: 18%;
    position: absolute;
    bottom: 4%;
    border: navajowhite;
    color: #fff;
    font-size: 22px;
    background-position-y: 12px;
    left: 38%;
}

.tb2gameoptionalgamelist button {
    width: 49%;
    height: 26%;
    position: absolute;
    border: none;
    top: 68%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    background-position-y: 6px;
    left: 25%;
}

.optgamethumbnail {
    height: 100%;
    width: 96%;
    margin-left: 2%;
    border: 2px solid #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: #ccc 1px 2px 8px 2px;
}

.optgamethumbnail img {
    width: 100%;
    height: 100%;
}

.tb2gamerecommendedgamefull {
    height: 100%;
}

.tb2gamerecommendedgameplay {
    height: 12% !important;
}

.displaynone {
    display: none;
}


/*-------recommended screen ends------*/
interactivequiz {
    display: block;
    position: relative;
    height: 100%;
}

.quiz-wrapper {
    position: relative;
    margin: 0 auto;
    padding: 3% 0 7%;
}

.quiz-img-wrap {
    position: relative;
    border-radius: 15px;
    width: 31vh;
    height: 46vh;
    max-height: 157.57vw;
    max-width: 100vw;
    margin: 0 auto;
    background: #fff;
    border: 7px solid #23408e;
}

.quiz-img-wrap .icon-volume {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.quiz-img-wrap tooltip {
    position: absolute;
    right: 0;
    bottom: 0;
}

.quiz-img-wrap tooltip tip {
    right: 35px;
    margin-top: -15px;
}

interactivequiz .quiz-img {
    max-width: 100%;
    max-height: none;
    width: 100%;
    vertical-align: middle;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 2%;
}

/* quiz style */

.quizClass {
    position: relative;
    width: 23vh;
    height: 30vh;
    max-height: 131.81vw;
    max-width: 100vw;
    margin: 0 auto;
    border: 2px solid #e7a55b;
    border-radius: 10px;
    background: #fff;
}

.quizClass>span {
    font-size: 9vw;
}

.quizClass .currAct {
    top: -16px;
    right: -16px;
    font-size: 16px !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    background: #00a150;
    box-shadow: none;
}

.quiz-letterHolder {
    padding-right: 2%;
}

interactivequiz .quiz-txt {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    margin: -21% 0 0;
}

interactivequiz .quiz-txt-cap {
    margin-top: 25%;
}

/** css hack for mac os **/
.mac-os interactivequiz .quiz-txt {
    margin-top: -4%;
}

/* Responsive style */
@media(max-width: 1499px) {
    interactivequiz .quiz-txt {
        margin-top: -18%;
    }
}

@media(max-width:1100px) {
    .quizClass {
        width: 19vh;
        height: 23vh;
    }

    .quiz-img-wrap {
        width: 24vh;
        height: 34vh;
        border-radius: 10px;
        border-width: 2px;
    }
}

@media(max-height:700px) {
    interactivequiz .quiz-word-img img {
        width: 38vh;
    }
}

/* Mobile portrait view style */
.portrait.max-os .quiz-txt {
    margin-top: -5%;
}

.portrait .quiztextHolder,
.portrait .letterWrapper,
.portrait .imgWrapper {
    height: 50%;
    max-height: 50%;
    min-height: 50%;
}

.portrait .quizimgHolder {
    height: 45%;
    max-height: 45%;
    min-height: 45%;
    margin-top: 5%;
}

.portrait .quiz-img-wrap {
    border-width: 3px;
}

.portrait .letterWrapper {
    height: 40%;
    max-height: 40%;
    min-height: 40%;
}

.portrait .quizClass {
    width: 10vh;
    height: 12vh;
    margin: 0 4px;
}

.portrait .quizClass>span {
    font-size: 11vw;
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) {
    .portrait .quiz-img-wrap {
        height: 30vh;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 878px) and (orientation: portrait) {
    .portrait .quizimgHolder {
        margin-top: 10%;
    }

    .portrait .quizClass {
        width: 9vh;
        height: 11vh;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    portrait .quiz-img-wrap {
        width: 28vh;
    }

    .portrait .quizClass {
        width: 14vh;
        height: 16vh;
    }
}

/* Mobile landscape view style */
.landscape .quiz-img-wrap {
    height: 45vh;
    width: 32vh;
    margin-left: 10%;
}

.landscape .quizClass>span {
    font-size: 6vw;
}

.landscape .quiz-img-wrap .icon-volume {
    position: absolute;
    right: 2px;
    bottom: 2px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .quiz-img-wrap {
        height: 35vh;
        width: 23vh;
    }
}


.carousel-parent .circle_new {
    width: 35px;
    height: 35px;
}

.carousel-3d-container {
    margin: 0 auto;
}

.carousel-3d .slide-3d figure img {
    width: auto;
    max-width: 100%;
}

.carousel-parent .slide-3d.current,
.carousel-parent .slide-3d.completed {
    border: 2px solid #00a150;
}

.carousel-parent .slide-3d figure {
    background: #fff;
}

.carousel-parent .carousel-3d-next,
.carousel-parent .carousel-3d-prev {
    transform: scale(0.5);
}

.carousel-parent .split-text-cont {
    position: absolute;
    top: 65px;
}

.carousel-parent .split-text-wrap {
    margin-right: 35px;
}

.carousel-parent .text-top {
    font-size: 5vmin;
    font-family: 'Poppins', sans-serif;
}

.carousel-parent .text-top tooltip._multiline,
.carousel-parent .carousel-text tooltip._multiline {
    display: inline-block;
}

.carousel-parent .text-top i,
.carousel-parent .carousel-text i {
    position: static;
}


.carousel-parent .carousel-text {
    min-height: 15%;
    font-size: 3vw;
    margin-top: -5%;
    margin-bottom: 15px;
    z-index: 10;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .carousel-parent .circle_new {
        width: 25px;
        height: 25px;
        margin-top: 0;
    }

    .landscape .carousel-3d-controls {
        top: 35%;
    }
}

/* Mobile portrait view style */

.portrait .carousel-3d-container,
.portrait .carousel-3d,
.portrait .carousel-3d .slide-3d {
    height: 210px !important;
}

.portrait .carousel-parent .circle_new {
    width: 25px;
    height: 25px;
}

.portrait .carousel-3d .slide-3d.current {
    width: 210px !important;
    margin-left: -22%;
}

.portrait .carousel-parent .carousel-text {
    font-size: 5vw;
    text-align: center;
}

.portrait .carousel-parent .circle_new {
    width: 25px;
    height: 25px;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation:portrait) {

    .portrait .carousel-3d-container,
    .portrait .carousel-3d,
    .portrait .carousel-3d .slide-3d {
        height: 320px !important;
    }

    .portrait .carousel-3d .slide-3d.current {
        width: 290px !important;
        margin-left: -5%;
    }
}

/* Mobile landscape view style */
.landscape .carousel-parent .circle_new {
    width: 15px;
    height: 15px;
}

.landscape .carousel-parent .click-rating .circle_new {
    width: 25px;
    height: 25px;
}

.landscape .carousel-3d-controls {
    top: 17%;
}

.interactivitycardsound .click-rating {
    position: relative;
    margin-top: 0;
}

.interactivitycardsound .click-rating tooltip {
    position: absolute;
    right: 0;
    top: 0;
}

.interactivitycardsound .click-rating tooltip tip {
    right: 55px;
    margin-top: 40px;
}

.interactivitycardsound .click-rating .icon-volume {
    right: 30px;
    top: -10px;
    margin: 12px 0;
}

.interactivitycardsound .circle_new {
    width: 35px;
    height: 35px;
    margin: 0 5px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/icon-star.png) 0 0/100% 100% no-repeat;
}

.interactivitycardsound .circle_highlight {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/icon-star-highlight.png) 0 0/100% 100% no-repeat;
}

.eight-falsh-card-wrap {
    padding: 0;
}

.interactivitycardsound .click-sound-parent {
    padding: 0 2%;
    height: 100%;
    position: relative;
    padding-bottom: 103px;
}

.interactivitycardsound .click-soundcard-wrap {
    position: relative;
    width: 100%;
    height: 50%;
}

.interactivitycardsound .click-soundcard-wrap .md-padding {
    position: relative;
    margin: 10px 0;
}

.interactivitycardsound .trumpCard_red {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 24vh;
    height: 29vh;
    background: #fff;
    max-height: 129.03vw;
    max-width: 100vw;
    margin: auto;
    padding: 3%;
    background: #fff;
    border: 5px solid #23408e;
    font-size: 6vw;
    font-family: 'Poppins';
    border-radius: 15px;
    outline: 0;
    /*border: 10px solid #D2232A;*/
}

interactivitycardsound .trumpCard_red img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: none;
    max-width: 100%;
    width: 100%;
}

interactivitycardsound .trumpCard_red.disabled {
    opacity: 0.4;
    cursor: default;
}

interactivitycardsound .shake {
    -webkit-animation-name: shakeit;
    animation-name: shakeit;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes shakeit {

    0%,
    100% {
        -webkit-transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(5px);
    }
}

@keyframes shakeit {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(5px);
    }
}

interactivitycardsound .corrCard {
    border: 5px solid #00a150 !important;
}

interactivitycardsound .corrCard i,
interactivitycardsound .wrongCard i {
    position: absolute;
    right: -16px;
    top: -17px;
    width: 30px;
    height: 30px;
    background: #00a150;
    font-size: 23px;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
}

interactivitycardsound .wrongCard i {
    color: #fff;
    background: #ff0000;
}

interactivitycardsound .wrongCard {
    border: 5px solid #ff0000 !important;
}

interactivitycardsound .trumpCard_red.disabled {
    opacity: 0.4;
    cursor: default;
}

/* hack for firefox only */

@-moz-document url-prefix() {
    interactivitycardsound .rating-wrap {
        margin-bottom: -60px;
    }
}

/* Responsive style */

@media(max-width: 1499px) {
    interactivitycardsound .trumpCard_red {
        width: 26vh;
        height: 28vh;
        margin-top: -5px;
    }
}

@media(max-height: 900px) {
    .eight-falsh-card-wrap {
        padding: 0;
    }

    .interactivitycardsound .click-sound-parent {
        padding-top: 0;
    }

    .interactivitycardsound .md-padding {
        padding: 10px;
    }
}

@media(max-height: 700px) {
    .interactivitycardsound .circle_new {
        width: 30px;
        height: 30px;
    }
}

/* Mobile portrait view style */

.portrait interactivitycardsound .corrCard,
.portrait interactivitycardsound .wrongCard {
    border-width: 3px !important;
}

.portrait interactivitycardsound .corrCard i,
.portrait interactivitycardsound .wrongCard i {
    width: 18px;
    height: 18px;
    right: -8px;
    top: -8px;
    line-height: 18px;
    font-size: 14px;
}

.portrait .interactivitycardsound .click-sound-parent {
    width: 245px;
    margin: 0 auto;
    padding-bottom: 85px;
}

.portrait .interactivitycardsound .click-soundcard-wrap {
    height: 100%;
}

.portrait .interactivitycardsound .click-rating {
    margin: 0;
}

.portrait .interactivitycardsound .circle_new {
    width: 25px;
    height: 25px;
}

.portrait .interactivitycardsound .click-rating .icon-volume {
    width: 30px;
    height: 25px;
    top: -12px;
}

.portrait .interactivitycardsound .md-padding {
    padding: 5px 20px;
}

.portrait .interactivitycardsound .trumpCard_red {
    width: 9vh;
    height: 9vh;
    border-width: 3px;
    border-radius: 10px;
}


@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) {
    .portrait .click-soundcard-wrap .md-padding {
        margin: 10px 0;
    }

    .portrait .interactivitycardsound .click-sound-parent {
        width: 215px;
        margin-top: -5px;
    }

    .portrait .interactivitycardsound .trumpCard_red {
        width: 9vh;
    }

    .portrait .interactivitycardsound .circle_new {
        width: 20px;
        height: 20px;
        margin-top: -10px;
    }

    .portrait .interactivitycardsound .click-rating .icon-volume {
        top: 0px;
        margin-top: 2px;
    }

    .portrait .interactivitycardsound .md-padding {
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .portrait .interactivitycardsound .click-soundcard-wrap .md-padding {
        margin: 10px 0;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .interactivitycardsound .trumpCard_red {
        width: 13vh;
        height: 13vh;
    }

    .portrait .interactivitycardsound .click-sound-parent {
        width: 375px;
    }

    .portrait .interactivitycardsound .md-padding {
        padding: 10px 20px;
    }
}

/* Mobile landscape view style */

.landscape .interactivitycardsound .click-rating {
    margin-top: -10px;
}

.landscape .interactivitycardsound .circle_new {
    width: 25px;
    height: 25px;
}

.landscape .click-sound-parent {
    padding-bottom: 80px;
}

.landscape .interactivitycardsound .trumpCard_red {
    width: 17vh;
    height: 19vh;
    margin-top: -15px;
    border-width: 2px;
    border-radius: 10px;
}

.landscape .interactivitycardsound .click-sound-parent {
    padding-bottom: 80px;
}

.landscape .interactivitycardsound .md-padding {
    padding: 7px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .interactivitycardsound .trumpCard_red {
        width: 20vh;
        height: 24vh;
    }

    .landscape .interactivitycardsound .click-sound-parent {
        top: 50%;
        position: relative;
        transform: translateY(-50%);
    }
}

/* Drag and drop style */

.drag-drop-section {
    width: 100%;
    height: 100%;
    padding: 0;
}

.drag-container {
    position: relative;
    width: 100%;
}

.drag-container .btn-droppable {
    position: relative;
    padding: 0;
    margin: 0 auto;
}

.drag-container .btn-draggable {
    position: relative;
    margin: 0 auto;
    font-size: 6vw;
    text-align: center;
    border: 5px solid #333;
    border-radius: 15px;
    cursor: pointer;
    background-color: #fff;
}

.drag-container .btn-draggable .currAct {
    position: absolute;
    top: -16px;
    right: -16px;
    font-size: 16px !important;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    background: #00a150;
    box-shadow: none;
    z-index: 1;
}

.drag-container .drag-drop-next {
    position: absolute;
    top: 45%;
    right: -30px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0;
    background: #cea300;
    text-align: center;
    color: #fff;
}

.drag-container .drag-drop-next i {
    font-size: 19px;
    line-height: 35px;
}

.drag-container .ui-draggable-disabled.ng-not-empty {
    pointer-events: none;
}

.drag-container .ui-draggable-disabled.ng-not-empty img {
    opacity: 0.4;
}

.drag-container .drag1 {
    background: #fff;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}

.drag-container .drop1 {
    /*    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/empty_sec7_dd_white.png);*/

    border-radius: 15px;
}

#dragContainer {
    position: relative;
    padding-top: 0;
    height: 100%;
    display: flex;
}

.drag-container .dragged-img {
    margin: 0 auto;
    position: relative;
    display: block;
    max-height: 100%;
    max-width: 100%;
    width: 80%;
    padding: 3%;
    object-fit: contain;
}

.drag-container .drop_child p {
    position: relative;
    margin: 0% auto 0;
}

.drag-container .rightImg {
    position: absolute;
    width: 3.7vh;
    right: -7%;
    float: right;
    top: -3%;
    border-radius: 17px;
}

.drag-container .drop_After {
    border: 5px solid #00a150 !important;
    transition: border 0.5s;
    cursor: pointer;
}

.drag-container .drag1 img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: none;
    max-width: 100%;
    width: 100%;
    position: relative;
    pointer-events: none;
    padding: 3%;
}

.drag-container .drop_childAfter {
    position: absolute !important;
    top: auto !important;
    bottom: -5px;
    left: 8px;
    transform: none !important;
    /* font-size: 5vh !important; */
    width: 10px;
    margin: 0;
}

.drag-container .fadeI {
    transition: 2.5s !important;
    opacity: 1 !important;
}

.drag-container .fadeO {
    transition: 2.5s !important;
    opacity: 1 !important;
}

.mac-os .drop_child p {
    margin-top: 0;
}

/* css hack for firefox only */
@-moz-document url-prefix() {
    .drag-drop-next {
        margin-top: 260px;
    }

    .drag-drop-next {
        margin-top: 10px;
    }

    .rating-wrap {
        margin-bottom: -60px;
    }

    .ttheader {
        margin-top: -25px;
    }
}

/* css style for IE only */
@supports (-ms-ime-align:auto) {
    .drag-drop-section {
        position: relative;
        top: 38%;
        height: auto;
    }

    .drag-container .drop_child p {
        margin-top: -18%;
    }
}

/* Resonsive style */

@media(max-width: 1100px) {
    .drop_childAfter {
        bottom: -5px;
    }
}

@media(max-height: 900px) {
    #dragContainer {
        padding-top: 0;
    }
}

/* Mobile portrait view style */

.portrait .space-padding {
    margin: 8px 20px 0;
}

.portrait .btn-droppabl {
    width: 11vh;
    height: 11vh;
    border-width: 2px;
    border-radius: 10px;
    font-size: 13vw;
}

.portrait .btn-draggable {
    width: 23vh;
    height: 28vh;
    border-width: 2px;
    border-radius: 10px;
    font-size: 13vw;
}

.portrait.mac-os .drop_child p {
    margin-top: -5%;
}

.portrait .btn-draggable .currAct {
    width: 20px;
    height: 20px;
    font-size: 12px !important;
    line-height: 22px;
    top: -5px;
    right: -10px;
}


.portrait .drop_childAfter {
    bottom: -6px;
    left: 1px;
    font-size: 4vh !important;
    font-weight: 600;
}

.portrait .dragged-img {
    max-width: 75%;
    padding: 3%;
}

/* Mobile landscape view style */

.space-padding {
    margin-top: 15px;
    margin-bottom: 0;
}

/* .landscape .drop_child p {
    font-size: 18vmin;
} */
/* .landscape .drag-container .draggable-wrap .btn-droppable.dropElement .drop_child p {
    font-size: 12vmin;
}   */

/* ipad landscape view style */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {

    .landscape .btn-droppable,
    .landscape .btn-draggable {
        font-size: 8vw;
    }

    .landscape .drop_child p {
        top: 0;
    }
}

.mainFlashcard_flip {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 0;
    border: 0px solid red;
}

.mainFlashcard_flip.flashcard-pickId {
    padding: 0%;
}

.mainFlashcard_flip .flash-card-table {
    width: 100%;
    height: calc(100vh - 264px);
    margin: 0 auto;
    padding: 0;
}

.mainFlashcard_flip.flashcard-pickId .flash-card-table {
    width: 100%;
    height: calc(100vh - 174px);
    margin: 0 auto;
    padding: 0;
}

.mainFlashcard_flip .flash-card-row {
    width: 100%;
}

.flip-divider {
    width: 20%;
    margin: 0 auto;
    text-align: center;
}

.flash-card-table.six-flash-card .flipTemp .fontface_ADV_CALIBRI span {
    font-size: 4vh;
}

.flash-card-table.six-flash-card .cell-space {
    width: 28vh;
    height: 47vh;
    max-height: 167.85vw;
    max-width: 100vw;
}

.six-flash-card .flip-divider {
    width: 16.5%;
}

.mainFlashcard_flip .cell-space .selected {
    border-color: #00a150;
}

.mainFlashcard_flip .cell-space .fa-check {
    position: absolute;
    right: -20px;
    top: -17px;
    visibility: hidden;
    opacity: 0;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: block;
    line-height: 25px;
    text-align: center;
    border-radius: 50%;
    background: #3E41D7;
    color: #fff;
    transition: 0.3s ease-in;
}

.mainFlashcard_flip .cell-space .selected .fa-check {
    visibility: visible;
    opacity: 1;
}

.mainFlashcard_flip .cell-space .selected.cardLetter .fa-check {
    line-height: inherit;
}

.mainFlashcard_flip .cell-space .selected.cardflipback {
    border-color: #23408e;
}

.mainFlashcard_flip .iostestcard1_ff {
    background: #fff;
    border: 10px solid #23408e;
    border-radius: 20px;
    font-size: 26vmin;
    height: 100%;
    width: 100%;
    transition: 2s;
    opacity: 0;
    cursor: pointer !important;
}

.mainFlashcard_flip .iostestcard2_ff {
    background: #fff;
    border: 10px solid #23408e;
    border-radius: 20px;
    font-size: 6vw;
    height: 100%;
    width: 100%;
    transition: 2s;
    opacity: 0;
    cursor: pointer !important;
}

.mainFlashcard_flip .testcard2_ff {
    background: #fff;
    background-repeat: no-repeat;
    font-size: 6vw;
    height: 100%;
    width: 100%;
    border: 10px solid #23408e;
    border-radius: 20px;
    cursor: pointer !important;
}

.mainFlashcard_flip .click-flip-img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
}

.mainFlashcard_flip .cardUp {
    position: absolute;
    margin: 0;
    font-family: 'Poppins';
    outline: 0;
}

.mainFlashcard_flip .cardUp img {
    display: block;
    height: 100%;
    margin: 0 auto;
    max-height: none;
    max-width: 100%;
    padding: 2px;
    width: 100%;
    outline: 0 none;
    position: relative;
    object-fit: contain;
}

.mainFlashcard_flip .cardBottom {
    position: absolute;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.mainFlashcard_flip .flipTemp {
    /* backface-visibility: hidden; */
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

.mainFlashcard_flip .flipTemp .fontface_ADV_CALIBRI {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #b51218;
    border-radius: 0;
}

.mainFlashcard_flip .flipTemp .fontface_ADV_CALIBRI span {
    /* display: block; */
    position: relative;
    font-size: 5.5vh;
    /* margin: -1px auto 0; */
    text-align: center;
    /* top: 50%;
    transform: translateY(-50%); */
}

.mainFlashcard_flip .cardflipfront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.mainFlashcard_flip .cardflipback {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}

.mainFlashcard_flip .fadeI {
    transition: 2.5s !important;
    opacity: 1 !important;
}

.mainFlashcard_flip .fadeO {
    transition: 2.5s !important;
    opacity: 1 !important;
}

.six-flash-card .flip-card-txt {
    margin-top: -26%;
}

.book3-click-flip .audio-text .align-middle {
    display: table-cell;
    vertical-align: middle;
}

.book3-click-flip .audio-text {
    position: relative;
    margin: 0px 0px 4px 0px;
    text-align: center;
    font-size: 2.5vw;
    min-height: 26%;
    display: table;
    font-family: 'Poppins', sans-serif;
}


.book3-click-flip .audio-text i {
    width: 38px;
    height: 33px;
    position: static;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.book3-click-flip .testcard1_ff {
    font-size: 5vw;
}

.book3-click-flip .click-flip-next {
    position: absolute;
    top: 45%;
    right: 10px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 0;
    background: #cea300;
    text-align: center;
    color: #fff;
}

.book3-click-flip .click-flip-next i {
    font-size: 19px;
    line-height: 35px;
}

.book3-click-flip .mainFlashcard_flip {
    padding-top: 1%;
}

.book3-click-flip .cell-space .selected {
    border-color: #707070;
}

.book3-click-flip .fc-imgwrap {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
    padding: 0;
}

.book3-click-flip .fc-imgwrap img {
    top: 0;
    width: auto;
    max-height: 100%;
}


/* Mac OS chrome browser fix **/

.mac-os .flip-card-txt,
.mac-os .six-flash-card .flip-card-txt {
    margin-top: -4%;
}

@media not all and (min-resolution:.001dpcm) {
    @media {
        [ng-controller="interactivescriptcard"] {
            transform: none;
        }

        .cardUp .fontface_ADV_CALIBRI {
            font-size: 2vh;
        }
    }
}

/* CSS style for mozilla firefox only **/

@-moz-document url-prefix() {
    .mainFlashcard_flip .flash-card-table .cell-space {
        display: inline-table;
    }
}

/* css style for IE only */
@supports (-ms-ime-align:auto) {
    .mainFlashcard_flip .flip-card-txt {
        margin-top: -15%;
    }
}

/* Responsive style */

@media(min-width: 2000px) {
    .mainFlashcard_flip .cardUp .fontface_ADV_CALIBRI {
        font-size: 3vh;
    }

    .mainFlashcard_flip .flipTemp .fontface_ADV_CALIBRI span {
        margin-top: 0;
    }
}

@media (max-width: 1499px) {
    .mainFlashcard_flip .flash-card-table .cell-space {
        width: 28vh;
        height: 42vh;
        max-height: 155.55vw;
    }

    .mainFlashcard_flip .flash-card-table.six-flash-card .cell-space {
        width: 27vh;
        height: 38vh;
        max-height: 172.42vw;
    }

    .book3-click-flip .audio-text i {
        top: -5px;
    }
}

@media(max-width: 1400px) {
    .mainFlashcard_flip .flash-card-table .cell-space {
        width: 26vh;
        height: 55vh;
    }
}

@media(max-width: 1350px) {
    .mainFlashcard_flip .flash-card-table .cell-space {
        width: 24vh;
        height: 33vh;
    }

    .mainFlashcard_flip .testcard1_ff,
    .mainFlashcard_flip .iostestcard1_ff {
        font-size: 18vmin;
    }

    .mainFlashcard_flip .flash-card-table.six-flash-card .cell-space {
        width: 20vh;
        height: 30vh;
    }
}

@media(max-width: 1100px) {
    .mainFlashcard_flip .flipTemp .fontface_ADV_CALIBRI span {
        font-size: 4vh;
    }
}

@media(max-width: 1024px) {
    .isIOS2 .mainFlashcard_flip .flipTemp .fontface_ADV_CALIBRI span {
        font-size: 4vh;
    }
}

/* Mobile portrait view style */


.portrait .mainFlashcard_flip .flipTemp .fontface_ADV_CALIBRI {
    border-radius: 0 !important;
}



.portrait.mac-os .mainFlashcard_flip .flip-card-txt {
    margin-top: -5%;
}

.portrait .book3-click-flip .letter,
.portrait .book3-click-flip .normalletter {
    font-size: 5vw;
}

.portrait .book3-click-flip .testcard1_ff,
.portrait .book3-click-flip .iostestcard1_ff {
    font-size: 6vmin;
}


.portrait .book3-click-flip .click-flip-next {
    width: 30px;
    height: 30px;
    right: 0;
}

.portrait .book3-click-flip .click-flip-next i {
    font-size: 17px;
    line-height: 30px;
}

.portrait .book3-click-flip .flash-card-table .cell-space {
    width: 10vh;
    height: 15vh;
}

/* ipad portrait view style */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .mainFlashcard_flip .flash-card-table .cell-space {
        height: 20vh;
    }

    .portrait .mainFlashcard_flip .flash-card-table.six-flash-card .cell-space {
        width: 11vh;
        height: 17vh;
    }

    .portrait .mainFlashcard_flip .cell-space .fa-check {
        font-size: 2vw;
        line-height: 15px;
    }

    .portrait .book3-click-flip .flash-card-table .cell-space {
        width: 14vh;
        height: 20vh;
    }

    .portrait .lgfSidemenuWrap .letsgofishing-hide-for-mobile-port {
        padding-left: 0px;
        padding-right: 0px;
    }
}

/* Mobile landscape view style */

.landscape .testcard1_ff,
.landscape .testcard2_ff,
.landscape .iostestcard1_ff,
.landscape .iostestcard2_ff {
    border-width: 3px;
    border-radius: 10px;
}

.landscape .book3-click-flip .testcard1_ff,
.landscape .book3-click-flip .iostestcard1_ff {
    font-size: 5vmin;
}

.landscape .book3-click-flip .flash-card-table .cell-space {
    width: 29vh;
    height: 40vh;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .cell-space .fa-check {
        padding-top: 7px;
        padding-left: 6px;
    }

    .landscape .book3-click-flip .flash-card-table .cell-space {
        width: 23vh;
        height: 34vh;
    }

    .landscape .book3-click-flip .testcard1_ff,
    .landscape .book3-click-flip .iostestcard1_ff {
        font-size: 7vmin;
    }

    .landscape .book3-click-flip .click-flip-next {
        right: 0;
    }
}

.helperWord .helperWordCls {
    position: relative;
    width: 345px;
    height: 500px;
    margin: 0 auto;
    padding: 3%;
    background: #fff;
    border: 5px solid #23408e;
    font-family: 'Poppins';
    font-weight: bold !important;
    border-radius: 15px;
    outline: 0;
    font-size: 3.3vw;
}

.helperWord .helperWordCls img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0 0 15px 15px;
}

.helperWord .text-red {
    padding: 0 25px;
    color: #ff0000;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.helperWord .interactivePlayagainTxt {
    width: 140px;
    height: 50px;
    border: 3px solid #7d701b;
    border-radius: 10px;
    background: #f9b200;
    margin: 0 auto;
    color: #2b2b2b;
    font-weight: 600;
    font-size: 2.2vh;
    line-height: 41px;
    text-align: center;
    cursor: pointer;
}

@media(min-width: 2000px) {
    .helperWord .helperWordCls {
        width: 330px;
        height: 450px;
    }
}

@media(max-width:1499px) {
    .helperWord .helperWordCls {
        width: 222px;
        height: 360px;
    }
}

@media(max-width:1100px) {
    .helperWord .helperWordCls {
        width: 170px;
        height: 215px;
    }
}

@media(max-width:359px) and (orientation: portrait) {
    .portrait .helperWord .quiz-wrapper .helperWordCls {
        height: 175px;
    }

    .portrait .helperWord .text-red {
        font-size: 14px;
        margin-bottom: 8px;
    }
}

@media(max-width:1023px) and (orientation: portrait) {
    .portrait .helperWord .quiz-wrapper .helperWordCls {
        width: 370px;
        height: 475px;
    }

    .portrait .helperWord .quiz-wrapper {
        display: inline-block;
        overflow-y: auto;
    }

    .portrait .helperWord .quiz-wrapper .layout-fill {
        min-height: auto;
        height: auto;
    }

    .portrait .helperWord .quiz-wrapper .flex-25 {
        max-width: 50%;
        display: inline-block;
    }
}

@media(max-width:700px) and (orientation: portrait) {
    .portrait .helperWord .quiz-wrapper .helperWordCls {
        width: 190px;
        height: 230px;
        font-size: 7.5vw;
    }

    .portrait .helperWord .text-red {
        font-size: 18px;
    }
}

@media(max-height:700px) {
    .helperWord .text-red {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .helperWord .interactivePlayagainTxt {
        width: 105px;
        height: 40px;
        font-size: 2.5vh;
        line-height: 32px;
    }
}

@media(max-height:730px) {
    .helperWord .interactivePlayagainTxt {
        width: 105px;
        height: 40px;
        font-size: 2.5vh;
        line-height: 32px;
    }
}


.chooseActivity .quizbg {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/tb2-quiz.png) center center no-repeat;
    width: 95%;
    height: 95%;
    min-height: 95%;
    padding: 10px;
    position: relative;
    background-size: contain;
}

.chooseActivity .Quiz_tb2 {
    padding: 10px 15px;
    display: inline-block;
    width: 33%;
    height: 200px;
}

.chooseActivity .Quiz_tb2 p {
    margin: 0 auto;
    text-align: center;
    border: 5px solid #333;
    border-radius: 15px;
    font-size: 4vw;
    cursor: default;
    line-height: 155px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 23.5vh;
    height: 27vh;
    background: #fff;
    max-height: 114.89vw;
    max-width: 100vw;
    margin: auto;
    padding: 10px;
}

.chooseActivity .Questioncount {
    background: #eced80;
    padding: 5px 10px;
    position: absolute;
    border-radius: 10px;
    border: 3px solid #fff100;
    color: #333;
    font-size: 2vmin;
    text-align: center;
    display: inline-block;
    top: 9%;
    left: 0;
    right: 0;
    width: 200px;
    margin: 0 auto;
}

.chooseActivity .QuestionCnt {
    width: 100%;
    position: relative;
    padding-bottom: 45px;
    margin-bottom: 0px;
    margin-top: 5%;
    text-align: center;
    display: block;
}

.chooseActivity .QuestionCnt:after {
    content: '';
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/tb2-quiz-question.png) center center no-repeat;
    height: 37px;
    width: 100%;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    background-size: 100% 100%;
}

.chooseActivity .QuestionCnt,
.chooseActivity .options {
    font-size: 4vh;
    color: #fff;
}

.chooseActivity .options {
    width: 60%;
    margin: 0 auto;
}

.chooseActivity .icon-volume1 {
    display: inline-block;
    margin: 0 auto;
    width: 40px;
    height: 34px;
    background: url('https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/volume-play.png') center center/100% 100% no-repeat;
    vertical-align: middle;
}

.chooseActivity .lableQuiz {
    cursor: pointer;
    font-size: 3.5vh;
    font-weight: normal;
    position: relative;
    padding-left: 65px;
    margin-bottom: 15px;
}

.chooseActivity .optionChoice {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    top: 0;
}

.chooseActivity .input-radioQuiz {
    width: 20px;
    height: 20px;
    position: relative;
    top: -5px;
    cursor: pointer;
}

.chooseActivity .controllQuiz {
    bottom: 6%;
    position: absolute;
    transform: scale(0.8);
    width: 500px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.chooseActivity .controllQuiz button {
    outline: 0;
    border: 0;
    margin: 0 25px;
}

.chooseActivity .controllQuiz button md-icon {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 17px;
    text-transform: uppercase;
    width: 80px;
    min-height: 34px;
    color: #282828;
}

.chooseActivity .btnPrev {
    position: relative;
    width: 175px;
    height: 90px;
    text-align: center;
    font-size: 2.5vh;
    color: #fff;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/tb2-previous.png) no-repeat;
    background-size: 100% 100%;
}

.chooseActivity .btnNxt {
    position: relative;
    width: 175px;
    height: 90px;
    text-align: center;
    font-size: 2.5vh;
    color: #fff;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/tb2-next.png) no-repeat;
    background-size: 100% 100%;
}

.chooseActivity .btnChk {
    position: relative;
    width: 150px;
    height: 90px;
    text-align: center;
    font-size: 2.5vh;
    color: #fff;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/tb2-check-answer.png) no-repeat;
    background-size: 100% 100%;
}

.chooseActivity .controllQuiz button md-icon {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 17px;
    text-transform: uppercase;
    width: 80px;
    min-height: 34px;
    color: #282828;
}

.chooseActivity .questionMainsection {
    width: 100%;
    margin: 0 auto;
    padding: 1% 0
}

.chooseActivity .btnQuiz .material-icons {
    min-height: 0px;
}

.chooseActivity .bear-boy {
    right: 12%;
    position: absolute;
    bottom: 3%;
}

.chooseActivity .wrongFnt {
    color: red;
    -webkit-text-stroke: 1px #fff;
    font-size: 40px;
}

.chooseActivity .correctFnt {
    color: #00a150;
    -webkit-text-stroke: 1px #fff;
    font-size: 40px;
}

.chooseActivity .correct1 {
    background: #00a150 !important;
    transition: all 0.2s;
}

.chooseActivity .wrong {
    -webkit-animation: shake .5s linear;
}

.chooseActivity .wrong1 {
    background: red !important;
    -webkit-animation: shake .5s linear;
}

@media(max-width:1023px) and (orientation: portrait) {
    .portrait .chooseActivity .quizbg {
        background: none;
        background-color: #f27370;
        border-radius: 20px;
        padding: 20px;
        margin: 15px;
    }

    .portrait .chooseActivity .quiz-wrapper {
        display: inline-block;
        overflow-y: auto;
    }

    .portrait .chooseActivity .instruction_text {
        font-size: 2.5vw;
    }

    .portrait .chooseActivity .quiz-wrapper .flex-25 {
        max-width: 50%;
        display: inline-block;
    }

    .portrait .chooseActivity .quiz-wrapper .layout-fill {
        min-height: auto;
        height: auto;
    }

    .portrait .chooseActivity .Questioncount {
        width: 50%;
        top: 2%;
    }

    .portrait .chooseActivity .QuestionCnt {
        display: block
    }

    .portrait .chooseActivity .QuestionCnt,
    .portrait .chooseActivity .options {
        font-size: 3.2vh;
    }

    .portrait .chooseActivity .QuestionCnt .options {
        width: 100%
    }

    .portrait .chooseActivity .bear-boy {
        bottom: 0;
        right: 3%;
    }

    .portrait .chooseActivity .templateImg_1 {
        height: 27vh;
    }
}

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

    .portrait .chooseActivity .Questioncount {
        font-size: 3vmin;
    }

    .portrait .chooseActivity .optionChoice {
        width: 36px;
        height: 36px;
        margin-right: 6px;
    }

    .portrait .chooseActivity .optionChoice img {
        width: 32px;
        height: 32px;
    }

    .portrait .chooseActivity .lableQuiz {
        font-size: 3.6vh;
    }

    .portrait .chooseActivity .controllQuiz {
        width: 65%;
    }

    .portrait .chooseActivity .controllQuiz .btnPrev,
    .portrait .chooseActivity .controllQuiz .btnNxt {
        width: 115px;
        height: 70px;
    }

    .portrait .chooseActivity .controllQuiz button {
        margin: 0 10px;
    }

    .portrait .chooseActivity .controllQuiz button md-icon {
        font-size: 11px;
        height: 17px;
    }

    .portrait .chooseActivity .QuestionCnt,
    .chooseActivity .portrait .options {
        font-size: 2.9vh;
    }

    .portrait .chooseActivity .lableQuiz {
        font-size: 2.8vh;
    }

    .portrait .chooseActivity .QuestionCnt {
        padding-bottom: 20px;
    }

    .portrait .chooseActivity .QuestionCnt:after {
        height: 19px;
    }

    .portrait .chooseActivity .corrCard i,
    .portrait .chooseActivity .wrongCard i {
        width: 26px;
        height: 26px;
        font-size: 17px;
        line-height: 25px;
    }

    .portrait .chooseActivity .wrong span,
    .portrait .chooseActivity .correct span {
        font-size: 21px !important;
        padding: 4px 15px !important;
    }

    .portrait .chooseActivity .wrong .wrongFnt,
    .portrait .chooseActivity .correct .correctFnt {
        font-size: 23px;
    }
}

@media(max-width:359px) and (orientation: portrait) {

    .portrait .chooseActivity .controllQuiz .btnPrev,
    .portrait .chooseActivity .controllQuiz .btnNxt {
        width: 85px;
        height: 55px;
    }

    .portrait .chooseActivity .Questioncount {
        padding: 3px 5px;
    }

    .portrait .chooseActivity .lableQuiz {
        margin-bottom: 2px;
    }

    .portrait .chooseActivity .optionChoice img {
        width: 28px;
        height: 28px;
    }

    .portrait .chooseActivity .optionChoice img {
        width: 28px;
        height: 28px;
    }

    .portrait .chooseActivity .wrong .wrongFnt,
    .portrait .chooseActivity .correct .correctFnt {
        font-size: 23px;
    }

    .portrait .chooseActivity .QuestionCnt:after {
        height: 18px;
    }

    .portrait .chooseActivity .optionChoice {
        margin-right: 2px;
    }
}


/* CSS style for mozilla firefox only **/

@-moz-document url-prefix() {
    .chooseActivity .questionMainsection {
        padding: 10% 0;
    }
}

pickwordquiz .quiz-word-img img {
    max-width: 85%;
    margin-bottom: 15px;
    padding: 0;
    border: 5px solid #23408e;
    border-radius: 15px;
}

pickwordquiz .quiz-word-cont {
    width: 100%;
    margin: 0 auto;
}

pickwordquiz .pick-word-instruction {
    position: relative;
    font-size: 1.6vw;
    font-weight: 600;
    display: block;
    margin: 7px 0 15px 20px;
}

pickwordquiz .pick-word-instruction i {
    position: static;
    display: inline-block;
    width: 33px;
    height: 26px;
    vertical-align: middle;
    margin: 0 0 5px 5px;
}

pickwordquiz .quiz-word-list {
    position: relative;
    padding: 0;
    font-size: 1.9vw;
    margin: 2% 0;
    padding: 0 4%;
}

pickwordquiz .dec-num {
    position: absolute;
    left: 0;
    top: 0;
}

pickwordquiz .empty-word {
    position: relative;
    display: inline-block;
    border-bottom: 1px solid black;
    width: 110px;
    height: 36px;
    text-align: center;
}

pickwordquiz .quiz-word-list li {
    position: relative;
    list-style: decimal;
    margin: 6% 0;
    padding: 5px 0;
    font-size: 1.3vw;
}

pickwordquiz .quiz-word-list:first-child {
    margin-top: 0;
}

pickwordquiz .word-end {
    position: relative;
}

pickwordquiz .word-end i {
    position: static;
    display: inline-block;
    width: 33px;
    height: 26px;
    vertical-align: bottom;
    margin: 0 0 8px 5px;
}

pickwordquiz .rating-wrap {
    margin: 10px 0 15px;
}

pickwordquiz .circle_new {
    width: 35px;
    height: 35px;
    margin: 0 5px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/icon-star.png) 0 0/100% 100% no-repeat;
}

pickwordquiz .fillcolor {
    padding: 0 5px;
    color: #27b04a;
    height: 10px;
    width: 110px;
}

pickwordquiz .fillcolor.ui-droppable {
    color: #333;
}

pickwordquiz .quiz-wrap {
    padding-top: 1%;
}

pickwordquiz .fill-words {
    font-size: 1.5vw;
}

pickwordquiz .wordsamplecontent {
    margin-top: 20px;
    font-size: 2vw;
}

pickwordquiz .wordsampletitle {
    color: red;
    font-weight: 60;
}

pickwordquiz .title-draggable {
    position: relative;
    color: red;
    font-size: 1.2vw;
    font-weight: 600;
    padding: 0 10px;
    cursor: pointer;
    width: 100px;
    border: 4px solid #27b04a;
    border-radius: 50px;
    text-align: center;
    margin: 0px 5px;
    background-color: #fff100;
    min-height: 40px;
    line-height: 33px;
}

pickwordquiz .title-draggable.ui-draggable-disabled {
    opacity: 0.4;
}

pickwordquiz .quiz-word-list {
    position: relative;
    padding: 0;
    font-size: 1.9vw;
    margin: 2% 0;
    padding: 0 4%;
}

pickwordquiz .quiz-word-list:first-child {
    margin-top: 0;
}

/* Responsive style */
@media(max-width: 700px) {
    .dec-num {
        top: 7px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape pickwordquiz .word-end i {
        margin-bottom: 0;
    }

    .landscape pickwordquiz .dec-num {
        top: 15px;
    }
}

.templateContainer {
    position: relative;
    height: 100% !important;
    padding: 0 25px;
    font-family: 'Poppins';
}

.letter-sequence {
    position: relative;
    height: 80% !important;
    padding: 0 25px;
}

/* letter sequence image section style */
.letter-sequence .imgHolder {
    position: relative;
    border-radius: 2%;
}

.letter-sequence .img-wrapper {
    border: 8px solid transparent;
    border-radius: 25px;
    transition: 0.3s ease-in;
}

.letter-sequence .img-wrapper.active {
    border: 8px solid #b61414;
}

.letter-sequence .image {
    display: block;
    position: relative;
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
}

/* letter sequence content section style */
.letter-sequence .stress,
.letter-sequence .completWord,
.letter-sequence .upperLowerCase,
.letter-sequence .alphabet {
    position: relative;
    height: 47%;
    width: 100%;
    border-radius: 2%;
    font-size: 10vw;
    color: #000;
    letter-spacing: 3px;
}

.letter-sequence .arrow_sound {
    margin-top: 1vw;
    padding: 1vw;
}

.letter-sequence .stress>span {
    margin-top: -4%;
}

.letter-sequence .icon-arrow {
    display: inline-block;
    width: 147px;
    height: 42px;
    margin-top: -25%;
    vertical-align: middle;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/fa-arrow.png) 0 0/100% 100% no-repeat;
}

.mac-os .letter-sequence .stress>span {
    margin-top: 0;
}

/** CSS style for only IE9 plus **/
@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    .letter-sequence .completWord {
        display: flex !important;
    }

    .letter-sequence .highlight {
        text-shadow: -2px -2px 1px #000, 2px -2px 1px #000, -2px 2px 1px #000, 2px 2px 1px #000;
    }
}

/* IE edge 12+ css hacks */
@supports (-ms-ime-align:auto) {
    .letter-sequence .stress>span {
        margin-top: -12%;
    }

    .letter-sequence .highlight {
        text-shadow: -2px -2px 1px #000, 2px -2px 1px #000, -2px 2px 1px #000, 2px 2px 1px #000;
    }
}

/* CSS style for mozilla firefox only **/
@-moz-document url-prefix() {
    .letter-sequence .highlight {
        text-shadow: -1px -1px 1px #000, 1px -1px 1px #000, -1px 1px 1px #000, 1px 1px 1px #000;
    }

    .letter-sequence .completWord {
        display: grid !important;
    }

    .letter-sequence .stress {
        margin-top: -9%;
    }

    .letter-sequence .stress>span {
        margin-top: 1%;
    }

    .letter-sequence .completWord>span {
        margin-bottom: -10%;
    }
}

/* Responsive style */
@media (max-width: 1499px) {

    .letter-sequence .stress,
    .letter-sequence .completWord,
    .letter-sequence .upperLowerCase,
    .letter-sequence .alphabet,
    .letter-sequence .highlight {
        font-size: 9vw !important;
    }
}

@media (max-width: 1350px) {
    .letter-sequence .icon-arrow {
        width: 120px;
        height: 35px;
    }

    .mainFlashcard_flip .testcard1_ff,
    .mainFlashcard_flip .iostestcard1_ff {
        font-size: 18vmin;
    }
}

@media (max-width: 1100px) {
    .letter-sequence .stress {
        margin-top: -3%;
    }
}

@media (max-height: 700px) {
    .letter-sequence .img-wrapper {
        margin: 8%;
    }

    .letter-sequence .icon-arrow {
        margin-top: -15%;
    }
}

/* Mobile portrait view style */
.portrait .letter-sequence {
    padding: 0 10px;
}

.portrait .letter-sequence .img-wrapper {
    margin: 1% 13%;
    border-width: 3px;
    border-radius: 15px;
}

.portrait .letter-sequence .img-wrapper.active {
    border: 3px solid #b61414;
}

.portrait .imgHolder {
    /*
    min-height: 50%;
    max-height: 50%;
    height: 50%;
 */
}

.portrait .letterHolder {
    min-height: 50%;
    max-height: 50%;
    height: 50%;
}

.portrait .letterHolder .flex-60 {
    position: relative;
}

.portrait .isIOS2 .letter-sequence .stress {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0 auto;
}

.portrait .isIOS2 .letter-sequence .completWord {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
}

.portrait .letter-sequence .image {
    max-width: 65%;
    margin: 0 auto;
    padding: 3%;
}

.portrait .letter-sequence .highlight {
    font-size: 12vw !important;
    -webkit-text-stroke: 2px black !important;
}

.portrait .letter-sequence .stress,
.portrait .letter-sequence .completWord,
.portrait .letter-sequence .upperLowerCase,
.portrait .letter-sequence .alphabet {
    font-size: 12vw !important;
}

.portrait .letter-sequence .icon-arrow {
    width: 70px;
    height: 21px;
    margin-top: -3px;
}

/* Mobile landscape view style */
.landscape .letter-sequence .stress,
.landscape .letter-sequence .completWord,
.landscape .letter-sequence .upperLowerCase,
.landscape .letter-sequence .alphabet,
.landscape .highlight {
    font-size: 8vw !important;
}
.landscape .letter-sequence1.letter-sequence6 .aplha.highlight, 
.landscape .letter-sequence1.letter-sequence6 .alphabet,
.landscape .letter-sequence1.letter-sequence6 .stress .compWord {
    font-size: 5.9vw !important;
}


.landscape .letter-sequence .completWord span {
    margin-bottom: 2%;
}

.landscape .letterHolder .flex-60 {
    position: relative;
}

.landscape .letter-sequence {
    padding-left: 15px;
    padding-right: 15px;
}

.landscape .letter-sequence .stress {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0 auto;
}
.landscape .letter-sequence6 .stress {
    position: static;
}

.landscape .letter-sequence .completWord {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0 auto;
}

.landscape .letter-sequence .img-wrapper {
    margin: 0;
    border-width: 3px;
}

.landscape .letter-sequence .img-wrapper.active {
    border-width: 3px;
    border-radius: 15px;
}

@media only screen and (max-width: 878px) and (orientation:landscape) {
    .landscape .icon-arrow {
        margin-top: -10%;
        height: 30px;
    }

    .landscape .abcgame_abcpickrecommendedgame button {
        bottom: 36%;
    }

    /* .landscape .abcgame_smlogo {
        width: 35%;
        height: 40%;
    } */

    .landscape .abcgame_SMtimermode {
        line-height: 45px;
    }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .isIOS2 .img-wrapper {
        margin: 15%;
    }

    .portrait .isIOS2 .letter-sequence .completWord {
        bottom: 10px;
    }

    .portrait .icon-arrow {
        width: 90px;
        height: 29px;
        margin-top: -10px;
    }

    .portrait .letter-sequence .stress,
    .portrait .letter-sequence .completWord,
    .portrait .letter-sequence .upperLowerCase,
    .portrait .letter-sequence .alphabet {
        font-size: 11vw !important;
    }
}

.bookTemplate {
    position: relative;
}

.bookTemplate .BookWood {
    position: relative;
    width: 100%;
    height: 100%;
}

.book-template-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/bookwood.jpeg) 0 0 / 100% 100%;
}

.bookTemplate {
    max-width: 70%;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}

.bookTemplate .fontfaceRed_ADV_CALIBRI {
    color: #000;
    font-size: 22vmin;
    /* padding-left: 10%; */
    position: relative;
    letter-spacing: 1px;
}

.bookTemplate .demotrump img {
    display: block;
    max-width: 95%;
    padding: 5%;
    margin-left: -20px;
}

.bookTemplate .bookTemplate2 .fontfaceRed_ADV_CALIBRI {
    font-size: 13vw;
    letter-spacing: 10px;
}

.flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.flipbook-viewport .container-flip {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.bookTemplate .page.even {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/page_left.png) transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: left;
    box-shadow: none !important;
}

.bookTemplate .page.odd {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/page_right.png) transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: right;
    box-shadow: none !important;
}

.bookTemplate .duplicate .page.even {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/overlay_page.png) transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none !important;
}

.bookTemplate .duplicate .page.odd {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/overlay_page_right.png) transparent;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: none !important;
}

/* .flipbook-viewport .flipbook {
    width: 100%!important;
    height: 100%!important;
    margin: 0 auto;
} */

.flipbook-viewport .page {
    width: 461px;
    height: 600px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.flipbook .page {
    box-shadow: none;
    border-radius: 10px;
}

.flipbook .page img.img_text {
    max-width: 70%;
    max-height: 70%;
    margin: 0 auto !important;
    /* padding: 0 0 0 70%; */
    display: table;
    position: relative;
    top: 50%;
    transform: translate(0, -52.3%);
}

.bookTemplate2 .flipbook .page img.img_text {
    transform: translate(-2%, -56.3%);
}

/* .bookTemplate2 .flipbook-viewport .page .pageDiv .pageSpan {
    transform: translate(3.5%, -71.3%);
} */

/* .flipbook-viewport .shadow,
.flipbook-viewport.shadow {
    display: none;
} */

.ffstyle {
    font-size: 1.1vw !important;
    padding-left: 12% !important;
    padding-right: 12% !important;
    line-height: 1.5em;
}

.bk-template2.book-template-bg {
    background: #fff;
}

[class*='section'].book-template-bg {
    background: #cfe9f8;
}

.bookTemplate2 .duplicate .page.even {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/overlay_page2.png) top right/95% 93% no-repeat;
}

.bookTemplate2 .duplicate .page.odd {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/overlay_page2_right.png) top left/95% 93% no-repeat;
}

.bookTemplate2 .page.even {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/sc1_page_left.png) 0 0/100% 100% no-repeat;
}

.bookTemplate2 .page.odd {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/sc1_page_right.png) 0 0/100% 100% no-repeat;
}

.bookTemplate4 .duplicate .even {
    /* background: #ebc400 0 0/100% 100% no-repeat; */
}

.bookTemplate4 .duplicate .odd {
    /* background: #abe385 0 0/100% 100% no-repeat; */
}

.bookTemplate4 .even {
    /* background: #ebc400 0 0/100% 100% no-repeat; */
}

.bookTemplate4 .odd {
    /* background: #abe385 0 0/100% 100% no-repeat; */
}

@media not all and (min-resolution:.001dpcm) {
    .bookTemplate .fontfaceRed_ADV_CALIBRI {
        /* font-size: 10vh; */
    }
}

/* Responsive style */

@media(max-width: 1024px) {
    .MainCardTemplate .wrapper-div .bookTemplate {
        max-width: 85%;
    }

    /* .flipbook-viewport .container-flip {
        padding: 7% 0;
    } */
}

@media(max-height: 700px) {
    .flipbook.bookTemplate2 .page img.img_text {
        top: 45%;
        margin-bottom: 0 !important;
    }
}

/* Mobile portrait view style */

.portrait .bookTemplate {
    max-width: 95%;
}

/* .flipbook-viewport .flipbook {
    height: 250px;
    top: 50%;
    transform: translateY(-50%);
} */

.portrait .bookTemplate .fontfaceRed_ADV_CALIBRI {
    /* margin-top: -8px; */
    font-size: 14vw;
}

/* .portrait .flipbook .page img.img_text {
    margin-top: 11%!important;
} */

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) {
    .portrait .flipbook .page img.img_text {
        margin-top: 0 !important;
    }

}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .wrapper-div .bookTemplate .fontfaceRed_ADV_CALIBRI {
        font-size: 16vw;
    }

    /* .wrapper-div .bookTemplate .flipbook-viewport .flipbook {
        width: 583px!important;
        height: 500px!important;
    } */
}

/* Landscape portrait view style */

.landscape .bookTemplate .fontfaceRed_ADV_CALIBRI {
    /* margin-top: 3%; */
    font-size: 13vw;
}


/* remove css to fix turn book issue */
/* .landscape .flipbook .page img.img_text {
    margin-top: -3%!important;
} */

.landscape .bookTemplate {
    max-width: 100%;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .bookTemplate .fontfaceRed_ADV_CALIBRI:not(.textbook1) {
        /* margin-top: -2%; */
        font-size: 12vw;
    }
}

/* Letter with image style */
.letter-with-image {
    position: relative;
}

.letter-with-image .trump {
    height: 100%;
    width: 100%;
}

.letter-with-image .trump .demofontface_ADV_CALIBRI_Red {
    font-size: 11vw;
    line-height: 100%;
    color: red;
    -webkit-text-stroke: 2px black;
}

.letter-with-image .demofontface_ADV_CALIBRI {
    position: relative;
    font-family: 'Poppins';
    font-size: 13vw;
}

.letter-with-image .demotrump {
    height: 100%;
    width: 80%;
    font-size: 6vw;
    max-width: 80%;
    /* max-height: 70%; */
}

.letter-with-image .demotrump img {
    max-width: 100%;
    max-height: none;
    height: 55vh !important;
    object-fit: contain;
}

/* Mobile portrait view style */
.portrait .letter-with-image .trump .demofontface_ADV_CALIBRI_Red {
    font-size: 20vw;
}

/* .portrait .letter-with-image .demofontface_ADV_CALIBRI {
    font-size: 25vw;
} */
.portrait .letter-with-image .demotrump img {
    width: 100% !important;
    height: auto !important;
    max-width: 85%;
    padding: 5%;
}

/* Mobile landscape view style */
.landscape .letter-with-image .trump .demofontface_ADV_CALIBRI_Red {
    font-size: 14vw;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .letter-with-image .demofontface_ADV_CALIBRI {
        letter-spacing: -20px;
    }
    .portrait .templateContainer.letter-sequence.letter-sequence-lesson3 .letter-with-image .demofontface_ADV_CALIBRI {
        letter-spacing: 0;
    }

    .portrait .letter-with-image .demotrump img {
        max-width: 80%;
        padding: 0;
    }
}

/* Menu panel style for desktop view begins */
.roadTabHeader .md-nav-bar {
    height: auto;
}

.md-dialog-container {
    padding: 25px 10px;
}

.roadmap-dialog {
    max-width: 1024px;
    width: 100%;
    overflow: visible;
    font-family: 'Poppins';
}

.text-book1 .dialog-content {
    position: relative;
    border: 3px solid #ffd227;
    border-radius: 3px;
}

.text-book2 .dialog-content {
    position: relative;
    border: 3px solid #f04c27;
    border-radius: 3px;
}

.dialog-position {
    position: relative;
    z-index: 25;
}

.dialog-title {
    position: relative;
    padding: 10px 15px;
    background: #fff;
}

.dialog-title h2 {
    margin: 0;
}

.dialog-title h2,
.list-view-title {
    color: #0875b9;
    text-transform: uppercase;
}

.menu-panel-ctrl {
    height: 80px;
    right: 0;
    margin-bottom: 30px;
}

.rdTab-title {
    display: block;
}

.rdTab-section {
    font-size: 12px;
}

.roadTab button {
    height: 100%;
    width: 175px;
    word-break: break-word;
    text-overflow: ellipsis;
    white-space: normal !important;
}

.Roadcontent {
    position: relative;
    width: 100%;
    height: 500px;
    overflow-y: auto;
    z-index: 5;
}

.actStatus {
    height: 40px;
    width: 61px;
    min-width: 61px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/stage-btn.png);
    background-repeat: no-repeat;
    display: inline-block;
    font-size: 18px;
    font-weight: bolder;
    color: #795548;
    -webkit-text-stroke: black;
    -webkit-text-stroke-width: 0.1px;
    font-family: 'Poppins';
    overflow: visible;
}

.activecartoon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/moving_character.png);
    width: 61px;
    height: 56px;
    position: absolute;
    top: -55px;
    left: -10px;
    /*animation:jump 0.75s ease infinite;*/
}

@keyframes jump {
    0% {
        top: -65px;
    }

    100% {
        top: -55px;
    }
}

.activeReversecartoon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/moving_character.png);
    width: 61px;
    height: 56px;
    position: absolute;
    top: -55px;
    left: 10px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    /*animation:jump 0.75s ease infinite;*/
}

md-dialog {
    max-height: 100% !important;
}

.md-dialog-wrap {
    height: 808px;
    max-width: 90% !important;
}

.test {
    height: 75px;
    max-width: 850px;
    margin: 0px auto;
    position: relative;
    padding-bottom: 40px;
    background-repeat: no-repeat !important;
}

.test:nth-child(even) {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/track2.png) 0 0/100%;
    background-repeat: no-repeat !important;
}

.test:nth-child(even) .actStatus {
    bottom: -29px;
}

.test:nth-child(odd) .actStatus {
    bottom: -29px;
}

.test:first-child .actStatus {
    bottom: 0px;
}

.test:nth-child(even) .actHead {
    bottom: -15px;
}

.test:nth-child(odd) .actHead {
    bottom: -15px;
}

.test:nth-child(odd) .actStatus,
.test:first-child .actHead {
    /*margin-left:100px;*/
    left: 45px;
}

.test:first-child .actHead {
    bottom: 19px;
}

.test:nth-child(odd) {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/track1.png) 0 0/100%;
    background-repeat: no-repeat !important;
}

.test:first-child {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/track_start.png) 0 0/100% !important;
    background-repeat: no-repeat !important;
    height: 55px;
    margin-top: 60px;
    padding-bottom: 0px;
}

.test.lastflip:last-child {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/track_end.png) 0 0/100%;
    background-repeat: no-repeat !important;
    height: 57px;
    padding-bottom: 87px;
}

.test.lastColumn:last-child {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/track_endFlip.png) 0 0/100% !important;
    background-repeat: no-repeat !important;
    height: 57px;
    padding-bottom: 87px;
}

.test.lastColumn:last-child .actHead {
    bottom: -37px;
}

#canvasRoadMap {
    position: absolute;
}

.roadTabHeader .md-nav-bar {
    /*    background-color: #629a32;*/
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/roadbg.png) 0 0/100%;
    border-color: rgb(43, 81, 13);
}

.roadTabHeader .md-nav-bar ul li {
    width: 15%;
    height: 70px;
}

.roadTabHeader .md-nav-bar ul li:last-child {
    width: 18%;
}

.roadTabHeader .md-nav-bar ul li button {
    width: auto;
    color: #2b510d !important;
    font-weight: bolder;
    font-family: 'Poppins';
}

.roadTabHeader .md-nav-bar ul li button:hover {
    color: #fff !important;
}

.roadTabHeader .md-nav-bar ul li button.md-active {
    color: white !important;
}

.roadTabHeader .md-nav-bar md-nav-bar md-nav-ink-bar {
    background: rgb(255, 255, 255) !important;
}

.customHeader[disabled] {
    opacity: 0.4;
}

.customButton[disabled] {
    opacity: 0.4;
    pointer-events: none;
}

.dialogBG {
    background: #fff;
    min-height: 100%;
    height: 545px;
    overflow-y: auto;
    overflow-x: hidden;
}

.roadTabHeader .md-nav-bar md-nav-ink-bar {
    color: rgb(255, 64, 129);
    background: white;
}

.course-view {
    position: relative;
    padding: 10px 0px 10px 10px;
    z-index: 9;
}

.course-view md-list {
    display: inline-block;
    padding: 8px 8px 8px 0;
    vertical-align: top;
    margin: 0;
    width: 33.33%;
}

.course-view md-list .md-button {
    display: block;
    width: 100%;
    margin: 0;
    padding: 3px 0;
    text-align: left;
}

.course-view md-list .md-button span {
    display: block;
    padding: 7px 10px;
    line-height: 20px;
    font-size: 13px;
    border: 2px solid #cccccc;
    border-radius: 5px;
    font-weight: 600;
}

.course-view md-list.icon-lists .md-button span {
    padding-left: 35px;
}

.course-view md-list .md-button:hover span {
    display: block;
    color: #333;
    border: 2px solid #af8d0b;
    background: #ffcb06;
}

.text-book2 .course-view md-list .md-button:hover span {
    color: #fff;
    border: 2px solid #c12906;
    background: #f04c27;
}

.activelink span {
    color: #593C1F !important;
    font-size: 17px !important;
}

.custom-alert {
    width: 50%;
    margin: 0 auto;
    position: absolute;
    z-index: 9999;
}

.custom-alert div {
    display: flex;
    justify-content: center;
}

.cenmsg {
    left: 25%;
}

.spinbg {
    background: #fff;
    position: absolute;
    z-index: 99;
    width: 99%;
    height: 99%;
    opacity: 0.65;
    top: 0px;
}

.rotatespin {
    top: 50%;
}

.rotatespin svg {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
}

.menuHeader {
    width: 100%;
}

.menuTabHeader .md-nav-bar {
    border: none;
}

.menuTabHeader ._md-nav-bar-list {
    display: block;
    margin-top: 10px;
    margin-left: 6px;
}

.custom_icon {
    position: static;
    right: 243px;
    top: 3px;
}

.head-level1 {
    position: absolute;
    top: 76px;
    left: -78px;
    width: 100px;
}

.head-level2 {
    position: relative;
    min-height: 100px;
    padding: 15px;
    border-top: 2px solid #e9e9e9;
    border-bottom: 2px solid #e9e9e9;
    background: #fff;
}

.ic-text {
    display: block;
    text-transform: uppercase;
    line-height: 22px;
    font-weight: 600;
    font-size: 12px;
}

.menuTabHeader {
    display: block;
    margin: 0;
    padding: 0;
}

.menuTabHeader li {
    position: relative;
    margin: 0px 4px 0;
    list-style: none;
}

.menuTabHeader li button {
    width: 54px;
    height: 65px;
    margin-bottom: -06px;
    padding-left: 0;
    color: #fff !important;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Poppins';
    /* border-radius: 50%; */
    border: none ;
    min-width: 66px;
    box-shadow: 0;
    padding: 0px;
}

.menuTabHeader li button>span {
    padding-right: 10px;
}

.menuTabHeader .textbook_1 {
    /* background: #f69a1f!important; */
    background: #f69a1f !important;
    color: #fff !important;
    z-index: 9;
}

.menuTabHeader .textbook_2 {
    /* background: #E94F34!important; */
    background: #e72426 !important;
    color: #fff !important;
    z-index: 8;
}

.menuTabHeader .textbook_3 {
    /* background: #35B14C!important; */
    background: #58b950 !important;
    color: #fff !important;
    z-index: 7;
}

.menuTabHeader .textbook_4 {
    /* background: #F0952D!important; */
    background: #f36212 !important;
    color: #fff !important;
    z-index: 5;
}

.menuTabHeader .textbook_5 {
    /* background: #3170B7!important; */
    background: #2a7aba !important;
    color: #fff !important;
    z-index: 4;
}

.menuTabHeader .textbook_6 {
    /* background: #8B218A!important; */
    background: #9e3e93 !important;
    color: #fff !important;
    z-index: 3;
}

.menuTabHeader .textbook_7 {
    /* background: #238F46!important; */
    background: #3eab4e !important;
    color: #fff !important;
    z-index: 2;
}

.menuTabHeader .textbook_8 {
    /* background: #3B3F81!important; */
    background: #3a62a6 !important;
    color: #fff !important;
    z-index: 1;
}


.menuTabHeader li:hover button[disabled],
.menuTabHeader li button[disabled]:hover,
.menuTabHeader li button[disabled] {
    background: #ccc !important;
    border: 2px solid transparent;
    color: #a2a2a2 !important;
}

.menuTabHeader .md-nav-bar md-nav-bar md-nav-ink-bar {
    background: rgb(255, 255, 255) !important;
}

.menuTabHeader li:nth-child(1) button.md-active {
    border: 2px solid #ffcb06;
}

.menuTabHeader li:nth-child(2) button.md-active {
    border: 2px solid #f04c28;
}

.menuTabHeader li:nth-child(3) button.md-active {
    border: 2px solid #25b04a;
}

.menuTabHeader li:nth-child(4) button.md-active {
    border: 2px solid #0875b9;
}

.menuTabHeader ._md-nav-bar-list li button:after {
    border-right: 3px solid #ffd227;
    content: '';
    position: absolute;
    height: 105px;
    top: 0;
    left: 68px;
    z-index: 6;
}

.menuTabHeader li button.md-active:after {
    border-right: 0;
}

.menuTabHeader md-nav-ink-bar._md-right,
.menuTabHeader md-nav-ink-bar._md-left,
.menuTabHeader .md-nav-bar md-nav-ink-bar {
    background: transparent;
}

.toggleLeft,
.toggleRight {
    background: #ffffff !important;
}

.actToggle {
    color: #665102;
    background: #ffcb06 !important;
}

.customtoggle {
    border: 3px solid #af8d0b;
    border-radius: 8px;
    background: #fff;
    padding: 0;
    text-transform: uppercase;
    font-size: 18px;
    color: #666;
    font-weight: 600;
}

.customtoggle:hover,
.customtoggle:active,
.customtoggle.md-focus:not([disabled]) {
    background-color: #fff !important;
}

.toggleLeft {
    padding: 5px 20px;
    /* position: absolute; */
    float: left;
    border-right: 3px solid #af8d0b;
}

.toggleRight {
    padding: 5px 20px;
    /* position: absolute; */
    float: right;
    border-radius: 0 5px 5px 0;
}

.ttheader {
    position: absolute;
    right: 0;
    margin-top: -13px;
}

.ttheader .md-nav-bar ul li {
    display: inline-block;
    height: 50px;
    padding: 10px;
}

.ttheader .md-nav-bar ul li .md-button {
    min-width: auto;
    padding: 0;
}

.ttheader .md-nav-bar ul li .md-button.md-accent {
    color: #333;
}

.ttheader .md-nav-bar ul li.activefilter .ic-text,
.ttheader .md-nav-bar ul li.activefilter .md-button:hover .ic-text {
    color: #764420 !important;
}

.ttheader .md-nav-bar ul li.removestyle .ic-text,
.ttheader .md-nav-bar ul li.removestyle .md-button:hover .ic-text {
    color: rgba(0, 0, 0, 0.54) !important;
}

.ttheader .md-nav-bar {
    margin-top: -25px;
    border: none !important;
}

.ttheader md-nav-ink-bar {
    display: none !important;
}

.ttheader .md-nav-bar ul li .md-button:hover .course_icon,
.ttheader .md-nav-bar ul li .md-active .course_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/course_icon_hover.png);
    background-color: #ffcb06 !important;
    border: 3px solid #af8d0b;
}

.ttheader .md-nav-bar ul li.activefilter .md-button:hover .ebook_icon,
.ttheader .md-nav-bar ul li.activefilter .ebook_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/ebooks_icon_hover.png);
    background-color: #ffcb06 !important;
    border: 3px solid #af8d0b;
}

.ttheader .md-nav-bar ul li.activefilter .md-button:hover .game_icon,
.ttheader .md-nav-bar ul li.activefilter .game_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/games_icon_hover.png);
    background-color: #ffcb06 !important;
    border: 3px solid #af8d0b;
}

.ttheader .md-nav-bar ul li.activefilter .md-button:hover .video_icon,
.ttheader .md-nav-bar ul li.activefilter .video_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/video_icon.png);
    background-color: #ffcb06 !important;
    border: 3px solid #af8d0b;
}

.custom_icon .ic-text {
    padding-bottom: 5px;
    font-weight: 600;
}

.custom_icon.active .course_icon {
    background-color: #ffcb06 !important;
    border: 3px solid #af8d0b;
    border-radius: 10px;
}

.custom_icon.active .ic-text {
    color: #665102;
}

.head-level2 .active .course_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/course_icon_hover.png);
}

.head-level2 .active .roadmap_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/roadmap_icon_hover.png);
}

.course_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/course_icon_white.png);
    width: 45px;
    height: 35px;
    margin: 0 0 -5px;
    background-position: center center;
    padding: 25px;
    background-color: #f79312;
    border: 2px solid #fff;
    border-radius: 7px;
    margin-bottom: 5px;
}

.ebook_icon {
    display: inline-block;
    vertical-align: middle;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/ebooks_icon.png);
    width: 45px;
    height: 35px;
    background-color: #bbbbbb;
    border: 3px solid #bbbbbb;
    margin-bottom: 5px;
    padding: 25px;
    background-position: center center;
    border-radius: 7px;
}

.game_icon {
    display: inline-block;
    vertical-align: middle;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/game_icon_white.png);
    width: 45px;
    height: 35px;
    background-color: #25b04a;
    border: 2px solid #fff;
    background-position: center center;
    padding: 25px;
    margin-bottom: 5px;
    border-radius: 7px;
}

.video_icon,
.badge_icon,
.song_icon,
.certificate_icon {
    display: inline-block;
    vertical-align: middle;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/video_icon_white.png);
    width: 45px;
    height: 36px;
    background-color: #0875b9;
    border: 2px solid #fff;
    margin-bottom: 5px;
    padding: 25px;
    border-radius: 7px;
    background-position: center center;
}

.badge_icon {
    margin-top: 5px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/badge_icon.png);
    background-color: #8e288b;
    border: 3px solid #8e288b;
}

.certificate_icon {
    margin-top: 5px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/certificate_icon.png);
    background-color: #8e288b;
    border: 3px solid #8e288b;
}

.list_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/list_icon.png);
    width: 25px;
    height: 20px;
}

.roadmap_icon {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/roadmap_icon.png);
    width: 25px;
    height: 20px;
    margin: 3px 0 -5px;
}

.icons {
    width: 24px;
    height: 30px;
    padding: 0px;
    min-width: 24px !important;
    min-height: 20px !important;
}

.course-view md-list .md-button {
    text-transform: inherit
}

.course-view md-list .md-button .ic-video,
.course-view md-list .md-button .ic-games,
.course-view md-list .md-button .ic-ebooks,
.course-view md-list .md-button .ic-course,
.course-view md-list .md-button .ic-badge,
.course-view md-list .md-button .ic-song {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-size: 100%;
}

.course-view md-list .md-button .ic-video,
.course-view md-list .md-button .ic-song,
.course-view md-list .md-button .ic-badge {
    top: 13px;
    left: 7px;
    width: 25px;
    height: 20px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/video_icon_s.png);
}

.course-view md-list .md-button .ic-badge {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/badge_icon_s.png);
}

.course-view md-list .md-button:hover .ic-video,
.course-view md-list .md-button.md-active .ic-video,
.course-view md-list .md-button.disabledList .ic-video,
.course-view md-list .md-button:hover .ic-song,
.course-view md-list .md-button.md-active .ic-song,
.course-view md-list .md-button.disabledList .ic-song {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/video_icon_s_hover.png);
}

.course-view md-list .md-button:hover .ic-badge,
.course-view md-list .md-button.md-active .ic-badge,
.course-view md-list .md-button.disabledList .ic-badge {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/badge_icon_s_hover.png);
}

.course-view md-list .md-button .ic-games {
    top: 11px;
    left: 5px;
    width: 29px;
    height: 21px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/games_icon_s.png);
    background-size: 100%;
}

.course-view md-list .md-button:hover .ic-games,
.course-view md-list .md-button.md-active .ic-games,
.course-view md-list .md-button.disabledList .ic-games {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/games_icon_s_hover.png);
}

.course-view md-list .md-button .ic-ebooks {
    top: 8px;
    left: 5px;
    width: 26px;
    height: 20px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/ebooks_icon.png);
}

.course-view md-list .md-button:hover .ic-ebooks,
.course-view md-list .md-button.md-active .ic-ebooks,
.course-view md-list .md-button.disabledList .ic-ebooks {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/ebooks_icon_white.png);
}

.course-view md-list .md-button .ic-course {
    top: 11px;
    left: 4px;
    width: 29px;
    height: 21px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/course_icon_s.png);
}

.course-view md-list .md-button:hover .ic-course,
.course-view md-list .md-button.md-active .ic-course,
.course-view md-list .md-button.disabledList .ic-course {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/course_icon_s_hover.png);
}

/** Media library css style begins **/
.media-lib {
    padding: 15px;
}

.media-lib:after {
    content: '';
    display: table;
    clear: both;
}

.media-lib .list-view-title {
    display: block;
    margin-bottom: 15px;
}

.ml-left,
.border-wrap {
    border: 1px solid #d9d9d9;
}

.ml-left {
    float: left;
    padding: 0 10px;
    width: 25%;
}

.media-lib-list,
.media-lib ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.media-lib-list li {
    padding: 0;
    border-bottom: 1px solid #eeeeee;
    transition: 0.3s ease-in;
}

.media-lib-list li:last-child {
    border-bottom: 0;
}

.media-lib-list li label {
    padding-top: 13px;
    padding-bottom: 13px;
    transition: 0.3s ease-in;
}

.media-lib-list li label:hover {
    background-color: #f2f2f2;
}

.media-lib-list li label i.check-elem {
    top: 11px;
}

.media-lib-list li button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    margin: 5px 0 5px;
    border: 0;
    text-align: left;
    text-transform: capitalize;
}

.media-lib-list li button.active {
    background-color: #ffcb06;
}

.checkbox label {
    display: block;
    position: relative;
    padding-left: 35px;
    user-select: none;
    cursor: pointer;
}

.checkbox label input {
    position: absolute;
    opacity: 0;
}

.checkbox label .check-elem {
    position: absolute;
    top: -2px;
    left: 0;
    height: 24px;
    width: 24px;
    background-color: #fff;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
}

.checkbox label:hover input~.check-elem {
    background-color: #f2f2f2;
    border: 1px solid #cfcfcf;
}

.checkbox label input:checked~.check-elem {
    border: 1px solid #cfcfcf;
}

.checkbox label input:checked~.label-text {
    color: #0875b9;
}

.checkbox label .check-elem:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox label input:checked~.check-elem:after {
    display: block;
}

.checkbox label .check-elem:after {
    left: 8px;
    top: 4px;
    width: 7px;
    height: 12px;
    border: solid #818181;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/** Radio button style **/
.toggle-radio {
    margin: 0;
    padding: 0;
    list-style: none;
}

.text-book1 .toggle-radio li {
    border: 2px solid #ffcb06;
}

.text-book2 .toggle-radio li {
    border: 2px solid #f04c27;
}

.toggle-radio li {
    position: relative;
    float: left;
    border: 2px solid #ffcb06;
}

.toggle-radio li input[type=radio] {
    position: absolute;
    visibility: hidden;
}

.toggle-radio li label {
    display: block;
    position: relative;
    font-weight: 600;
    font-size: 18px;
    padding: 12px 25px;
    margin: 0 auto;
    z-index: 9;
    cursor: pointer;
    transition: all 0.25s linear;
    text-align: center;
}

.toggle-radio li[disabled] {
    background: #ccc;
    opacity: 0.6;
    color: #8e8e8e;
    cursor: default;
    border: 2px solid transparent;
}

.toggle-radio li[disabled] label {
    cursor: default;
}

.toggle-radio li .check {
    display: block;
    position: absolute;
    border: 2px solid #333;
    border-radius: 100%;
    height: 22px;
    width: 22px;
    top: 30px;
    left: 20px;
    z-index: 5;
    transition: border .25s linear;
}

.toggle-radio li:hover .check {
    border: 3px solid #ccc;
}

.toggle-radio li .check:before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 12px;
    width: 12px;
    top: 5px;
    left: 5px;
    margin: auto;
    transition: background 0.25s linear;
}

.text-book1 input[type=radio]:checked~label {
    background-color: #ffcb06;
}

.text-book2 input[type=radio]:checked~label {
    background-color: #f04c27;
}

/** Radio button style ends **/
.ml-right {
    float: left;
    width: 75%;
}

.split-wrap {
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 47.5%;
    margin: 0 0 15px 15px;
    padding: 15px;
    border: 1px solid #d9d9d9;
}

.recom {
    position: absolute;
    top: -28px;
    left: -1px;
    padding: 5px 30px 5px 15px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #0875b9;
}

.recom:after {
    content: '';
    position: absolute;
    right: -16px;
    top: -14px;
    display: block;
    width: 32px;
    height: 36px;
    background-color: #fff;
    transform: rotate(-38deg);
}

.books-title {
    display: inline-block;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    color: #666666;
}

.view-all {
    float: right;
    color: #0d802c;
    text-decoration: underline;
}

/** Carousal style **/
.carousal-wrap {
    position: relative;
    padding: 20px 0;
}

.carousal-belt {
    overflow-x: scroll;
    white-space: nowrap;
}

.carousal-belt li {
    display: inline-block;
    margin: 0 5px;
    background-color: #aaaaaa;
}

.carousal-belt li:first-child {
    margin-left: 0;
}

.carousal-belt li img {
    border: 2px solid #9d9d9d;
}

.carousal-belt li.selected img {
    border: 2px solid #ffcb06;
}

/** Carousal style ends **/
.selected-books {
    margin-left: 15px;
    padding: 15px;
    border: 1px solid #d9d9d9;
}

.selected-books ul {
    margin-top: 10px;
}

.selected-books li {
    display: inline-block;
    width: 19.5%;
    text-align: center;
}

.selected-books li figure {
    margin-bottom: 5px;
}

.selected-books li>div {
    padding: 5px;
    cursor: pointer;
}

.selected-books li img {
    max-width: 100%;
    border: 1px solid #999;
}

.selected-books li a {
    color: #333;
}

.badges-view {
    padding: 15px;
}

.badges-view .list-view-title {
    display: block;
    margin-bottom: 15px;
}

.badges-view:after {
    content: '';
    display: table;
    clear: both;
}

.badge-list {
    float: left;
    width: 55%;
}

.badge-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.badge-list ul li {
    position: relative;
    display: inline-block;
    width: 32.33%;
    height: 165px;
    margin: 30px 0;
    text-align: center;
    background: url(../../app/assets/images/badge-gray.png) center center no-repeat;
}

.badge-list ul li.selected {
    background: url(../../app/assets/images/badge-yellow.png) center center no-repeat;
}

.badge-list ul li i {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 75px;
}

.badge-list ul li i.badge1 {
    background: url(../../app/assets/images/badge1.png) center center no-repeat;
}

.badge-list ul li i.badge2 {
    background: url(../../app/assets/images/badge2.png) center center no-repeat;
}

.badge-list ul li i.badge3 {
    background: url(../../app/assets/images/badge3.png) center center no-repeat;
}

.badge-list ul li i.badge4 {
    background: url(../../app/assets/images/badge4.png) center center no-repeat;
}

.badge-certificate {
    float: right;
    position: relative;
    width: 45%;
    height: 550px;
    text-align: center;
    background: #d7d7d7;
    border: 2px solid #b7b7b7;
}

.badge-certificate figcaption {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    color: #626262;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
}

.games-view {
    padding: 15px;
}

.games-view .ml-right,
.video-list .ml-right {
    padding: 15px;
    border: 1px solid #d9d9d9;
    text-align: center;
    margin-left: 15px;
    width: 73.4%;
}

.video-list .ml-right {
    padding: 0;
    text-align: left;
}

.games-view .ml-right figure {
    margin-bottom: 20px;
}

.play-game-btn {
    color: #665102;
    border-radius: 4px;
    border: 2px solid #af8d0b;
    background-color: #ffcb06;
    text-transform: uppercase;
    padding: 7px 30px;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s linear;
}

.play-game-btn:hover {
    background: #d8b11e;
}

/** Media library css style ends **/
/** Mobile view accordion style starts **/
.accordion-list {
    margin-top: 20px;
    padding: 0 15px;
}

.accordion-list v-pane-header {
    margin-bottom: 5px;
    padding-left: 10px;
    padding-right: 20px;
    background: #fff;
    border-radius: 5px;
    border: 2px solid #af8d0b;
}

.accordion-list v-pane-header.section-name {
    background: #ffcb06;
}

.accordion-list v-pane-header:before,
.accordion-list v-pane-header:after {
    right: 10px;
    background-color: #333;
}

.accordion-list v-pane.is-expanded>v-pane-header,
.accordion-list v-pane-header {
    border-bottom-color: #af8d0b;
}

.accordion-list v-pane-header h5 {
    font-weight: 600;
    color: #333;
}

.accordion-list v-accordion {
    margin-top: 10px;
    padding-left: 10px;
}

.accordion-list .lesson-name {
    background: #fde99e;
}

.accordion-list .activity-name {
    padding: 10px 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    border: 2px solid #666;
    background: #fff;
    display: block;
    width: 100%;
    text-align: left;
}

.accordion-list .activity-name.activelink {
    background: #fff7db !important;
    color: #333 !important;
}

/** Mobile view accordion style starts **/
.noVisible {
    visibility: hidden;
}

.non-active {
    background: none;
}

.dropactive {
    background-color: #764420 !important;
}

.disabledList span,
.disabledList:hover span {
    color: #333;
    background: #ffcb06;
    border: 2px solid #af8d0b !important;
}

.disabledList[disabled] {
    color: white !important;
}

.selected .ic-text {
    color: #764420;
    border-bottom: 5px solid #764420;
}

.btn-action {
    margin-top: 6px;
    padding: 0;
}

.skipbutton.md-button {
    width: 105px;
    margin: 4px 0 9px 15px;
    color: #000;
    font-family: 'Poppins';
    border: 2px solid #991b1f;
    border-radius: 7px;
    background: #f16721;
    letter-spacing: 1px;
    height: 35px;
    line-height: 35px;
    font-weight: 600;
    font-size: 16px;
}

.skipbutton.md-button:hover {
    background: #c74808;
    color: #fff;
}

.skipbutton.md-button[disabled="disabled"] {
    pointer-events: none;
}

.games-list {
    margin: 0;
    padding: 15px;
}

.games-list li {
    display: inline-block;
    width: 24%;
    text-align: center;
    vertical-align: top;
    padding: 10px 5px;
}

.filterbuttonIcon {
    width: 100%;
    min-height: 100px;
    padding: 0;
    cursor: pointer;
}

.filterbuttonIcon img {
    position: relative;
    max-width: 100%;
    height: auto;
    position: relative;
    margin-bottom: 15px;
}

.filterbuttonIcon i {
    position: absolute;
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-bottom: 19px solid transparent;
    border-left: 25px solid #333;
    left: 45%;
    top: 29px;
    opacity: 0.7;
}

.filterbuttonIcon i span {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 21px solid #fff;
    display: block;
    position: absolute;
    left: -23px;
    top: -15px;
}

.filterbuttonIcon .text-data {
    display: block;
    line-height: 18px;
    font-size: 13px;
    margin: 0 auto;
    white-space: pre-wrap;
    font-weight: 600;
    color: #666;
}

.tbSeparator {
    border-left: 1px solid rgb(197, 197, 197);
    height: 100%;
    width: 0px;
    margin: 0px 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 52px;
    display: table-cell;
    vertical-align: middle;
    background: rgb(241, 241, 241);
}

.md-icon-button.menuClose,
.md-icon-button.menuClose:hover {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/close.png) 0px 0px no-repeat !important;
    background-size: contain;
    position: absolute;
    z-index: 1;
    right: 5px;
    top: 17px;
    width: 18px;
    height: 18px;
    border-radius: 0;
}

.text-book2 .disabledList span,
.text-book2 .disabledList:hover span {
    color: #fff;
    background: #f04c27;
    border: 2px solid #c12906 !important;
}

@media(max-width:1100px) {

    .roadTabHeader .md-nav-bar ul li {
        width: 16%;
    }

    .roadmap-dialog {
        width: 92%;
        margin-left: 7%;
    }

    .roadTabHeader .md-nav-bar ul li button {
        padding-left: 0;
        padding-right: 0;
    }

    .roadTab button {
        width: 100% !important;
    }

    [ng-controller="roadMapController"] {
        transform: scale(0.9);
        margin-top: -75px;
    }

    .test:first-child {
        height: 55px;
        margin-top: 90px;
    }

    .course-view md-list .md-button span {
        font-size: 12px;
    }

}

@media(max-height:700px) {

    .Roadcontent,
    .dialogBG {
        height: 460px;
    }
}

/*Mobile Portrait View*/
.portrait .Roadcontent,
.portrait .dialogBG {
    height: 365px;
}

.portrait .roadmap-dialog {
    width: 100%;
    margin-left: 0;
    margin-top: 10%;
}

.portrait .md-icon-button.menuClose {
    top: 12px;
}

.portrait .head-level1 {
    top: -40px;
    left: 10px;
    right: 0;
    width: 100%;
}

.portrait .menuTabHeader li {
    display: inline-block;
}

.portrait .menuTabHeader li button {
    width: 60px;
    height: 60px;
    min-width: 60px;
    padding: 0 0 10px 0;
    font-size: 19px;
    z-index: 0;
}

.portrait .menuTabHeader li button>span {
    padding-right: 0;
}

.portrait .menuTabHeader li button.md-active {
    z-index: 9;
}

.portrait .dialog-title h2 {
    font-size: 20px;
}

.portrait .toggleLeft,
.portrait .toggleRight {
    width: 50%;
}

.portrait .head-level2 {
    display: block;
    height: 165px;
}

.portrait .customtoggle {
    width: 100%;
    clear: both;
    display: block;
    margin: 0 auto 5px;
}

.portrait .ttheader {
    transform: scale(0.8);
    position: relative;
    margin-top: 25px;
    display: block;
    clear: both;
    margin-left: -45px;
}

.portrait .custom_icon {
    position: absolute;
    bottom: -6px;
    z-index: 9;
    left: -7px;
    top: auto;
    right: auto;
    transform: scale(0.8);
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) {
    .portrait .roadmap-dialog {
        margin-top: 20%;
        margin-bottom: 10%;
    }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
    .portrait .ttheader {
        margin-top: 0;
        margin-left: -40px;
        padding-left: 0;
    }

    .portrait .Roadcontent,
    .portrait .dialogBG {
        height: 545px;
    }

    .portrait .ttheader .md-nav-bar {
        margin-top: -5px;
    }
}

.landscape .dialogBG {
    height: 250px;
}

.landscape .ttheader {
    margin-top: -5px;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
    .landscape .ttheader {
        margin-top: 5px;
    }

    .landscape .dialogBG {
        height: 450px;
    }
}


.vowelsOnTook .align-center {
    width: 100%;
    margin: 0 auto;
}

.vowelsOnTook .bookleft>img {
    width: 70vh;
}

.vowelsOnTook .demotrumpCardOnTook56 {
    width: 28vh;
    height: 42vh;
}

.vowelsOnTook .redCls {
    border: 1px solid red;
    border-radius: 3px;
    padding: 0;
    display: inline-block;
    margin: -2px -2px -2px 0;
}

.vowelsOnTook .helperTitle {
    display: block;
    margin: 0 auto;
    padding: 3px 20px;
    width: 900px;
    text-align: center;
    font-size: 1.3vw;
    border-radius: 10px;
    background: #e1e4f3;
    border: 3px solid #000;
    font-family: 'Poppins', sans-serif;
    color: #333;
    margin-top: -1%;
    margin-bottom: 1%;
}

.vowelsOnTook .blackfont56 {
    font-size: 1.7vw;
}

.vowelsOnTook .bookright {
    font-size: 1.3vw;
    font-family: 'Poppins', sans-serif;
}

.increasedFnt {
    font-size: 18vw;
    color: #6095d4;
    font-weight: normal;
    letter-spacing: 30px;
    -webkit-text-stroke: 0px;
}

.vowelsOnTook .bookright div {
    margin-bottom: 7px;
    font-size: 2vw;
}

@media(max-width:700px) and (orientation: portrait) {
    .portrait .vowelsOnTook .flash-card-cont.mediaCls.layout-row {
        display: inline-block;
        overflow-y: scroll;
    }
}

@media(max-width:1100px) {
    .vowelsOnTook .bookleft>img {
        width: 50vh;
    }
}

@media(max-height:700px) {
    .vowelsOnTook .mediaCls {
        min-height: 95%;
        height: 100%;
    }

    .vowelsOnTook .mediaHeight {
        height: 95% !important;
    }
}

.vowelsActivity .templateImgAt {
    width: 44vh;
    margin: 0 15px;
    transition: all 200ms ease-in;
    transform: scale(1);
}

.vowelsActivity .cardOutside {
    height: 100%;
    border: 2px solid #1b3664;
    padding: 4px;
    border-radius: 11px
}

.vowelsActivity .letter {
    font-size: 2.5vw;
    overflow: hidden;
    white-space: pre-line;
    text-align: center;
}

.vowelsActivity .templateImg_1 {
    max-width: 100%;
    display: block;
    margin: 0 auto;
    width: auto;
}

.vowelsActivity .wordHighlight {
    background-color: inherit;
    color: #ff0000;
}

.vowelsActivity .cardInside {
    height: 100%;
    border: 5px solid #1b3664;
    border-radius: 10px;
}

.vowelsActivity .increasedFnt {
    font-size: 18vw;
    color: #6095d4;
    font-weight: normal;
    letter-spacing: 30px;
    -webkit-text-stroke: 0px;
}

.vowelsActivity .bluefont {
    color: #000;
    font-size: 8vw;
    font-family: 'Poppins';
    
    -webkit-text-stroke: 0 !important;
    letter-spacing: 1vw;
}

.vowelsActivity .templateImgArrow {
    width: 40vh;
    margin-top: 10%;
}

.vowelsActivity .bluefontsmall {
    font-size: 12vw;
    color: #4472c4;
    font-weight: normal;
}

.vowelsActivity .flashcardTxtDiv {
    position: absolute;
    top: 30px;
    height: 20%;
    width: 100%;
    padding: 0 10px;
}

.vowelsActivity .flashcardImgDiv {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 80%;
    width: auto;
    margin: 0 auto;
}

.vowelsActivity .blackfont {
    color: black;
    font-size: 4.3vw;
    font-family: 'Poppins';
    font-weight: normal;
    letter-spacing: 1px;
    display: block;
    margin: 0 auto;
}

.vowelsActivity .letter_1 {
    display: inline-block;
    font-size: 30vmin;
    font-family: 'Poppins';
    color: #f00;
    text-align: center;
}

.vowelsActivity .blend-word-cont {
    height: 62%;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook2/images/blend-words-orangebg.png);
    background-repeat: repeat-x;
    background-size: 100% 63%;
    background-position: 0% 75%;
}

.vowelsActivity .blend-word-cont .letter_1 {
    margin-top: 2.5%;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 18vmin;
}

@media(max-width:700px) and (orientation: portrait) {
    .portrait .vowelsActivity .normalletter {
        font-size: 5.5vw;
    }

    .portrait .vowelsActivity .blend-word-cont {
        height: 30%;
    }

    .portrait .vowelsActivity .blend-word-cont .letter_1 {
        font-size: 10vmin;
    }

    .portrait .vowelsActivity .blackfont {
        font-size: 15vw;
    }

    .portrait .vowelsActivity .increasedFnt {
        font-size: 24vw;
    }

    .portrait .vowelsActivity .flash-card-cont .templateImg_1 {
        height: 27vh;
    }

    .portrait .vowelsActivity .templateImgAt {
        width: 19vh;
    }

    .portrait .vowelsActivity .templateImgArrow {
        width: 13vh;
    }

    .portrait .vowelsActivity .single-flash-card .demotrumpCard {
        width: 28vh;
        height: 45vh;
    }

    .portrait .vowelsActivity .increasedFntWitharrow {
        font-size: 18vw;
    }

    .portrait .vowelsActivity .flash-card-cont .demotrumpCard {
        width: 42.5vh;
        min-height: 45vh;
    }

    .portrait .vowelsActivity .twocardsCls1 .demotrumpCard {
        width: 27.5vh;
        min-height: 45vh;
        height: 40vh;
    }

    .portrait .vowelsActivity .flash-card-cont .demotrumpCardOnTook {
        width: 100%;
        min-height: 45vh;
        height: 40vh;
    }

    .portrait .vowelsActivity .flashcardTxtDiv {
        top: 8px;
    }
}

@media(max-height:700px) {
    .vowelsActivity .bluefontsmallMedia {
        font-size: 9vw;
        color: #4472c4;
        font-weight: normal;
    }

    .vowelsActivity .twoflash-cont,
    .vowelsActivity .single-flash-card {
        padding: 1% 0 0;
    }
}

@media(max-width:1100px) {
    .vowelsActivity .templateImgArrow {
        width: 20vh;
    }
}

@media(max-width:1023px) and (orientation: portrait) {
    .portrait .vowelsActivity .layout-row>.flex-30 {
        max-width: 100%;
    }

    .portrait .vowelsActivity .single-flash-card .demotrumpCard {
        width: 28vh;
        height: 45vh;
    }

    .portrait .vowelsActivity .flash-card-cont .templateImg_1 {
        height: 32vh;
    }

    .portrait .vowelsActivity .increasedFnt {
        letter-spacing: 8px;
    }

    .portrait .vowelsActivity .increasedFntWitharrow {
        font-size: 16vw;
    }

    .portrait .vowelsActivity .bluefont span {
        margin: 2% 0 0 !important;
    }

    .portrait .vowelsActivity .templateImgArrow {
        width: 16vh;
    }

    .portrait .vowelsActivity .blend-word-cont {
        height: 40%;
    }

    .portrait .vowelsActivity .blend-word-cont .letter_1 {
        font-size: 13vmin;
    }
}

@media(max-width:359px) and (orientation: portrait) {
    .portrait .vowelsActivity .blend-word-cont .letter_1 {
        font-size: 8vmin;
    }

    .portrait .vowelsActivity .templateImg_1 {
        height: 20vh;
    }
}

@media(max-width:850px) {
    .vowelsActivity .blend-word-cont .letter_1 {
        font-size: 13.5vmin;
    }

    .vowelsActivity .twoflash-cont,
    .vowelsActivity .single-flash-card {
        padding: 15% 0;
    }
}

@media(max-height: 900px) {
    .vowelsActivity .numberofCards {
        width: 23.5vh;
        height: 47vh;
    }

    .vowelsActivity .numberofccardsImg {
        height: 28vh;
    }
}

/** video player style **/
videoplayer {
    height: 100%;
}

.video-wrapper {
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    position: relative;
}

#customPlayer {
    height: 100%;
    width: 100%;
}

.portrait .video-pl-wrap {
    padding: 0 10px;
}

.source-preview {
    cursor: pointer;
    opacity: 1;
    position: fixed;
    z-index: 100;
    opacity: 1;
    top: 0;
    left: 0;
    transition: none;
    pointer-events: none;
    -webkit-touch-callout: none;
}

.target {
    user-select: none;
    /* supported by Chrome and Opera */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
}

.clicksoundinteractivity .click-rating tooltip {
    position: absolute;
    right: 0;
    top: 0;
}

.clicksoundinteractivity .click-rating tooltip tip {
    right: 55px;
    margin-top: 40px;
}

.clicksoundinteractivity .click-rating .icon-volume {
    right: 30px;
    top: -10px;
    margin: 12px 0;
}

.clicksoundinteractivity .circle_new {
    width: 35px;
    height: 35px;
    margin: 0 5px;
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/icon-star.png) 0 0/100% 100% no-repeat;
}

.clicksoundinteractivity .circle_highlight {
    background: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/icon-star-highlight.png) 0 0/100% 100% no-repeat;
}

.eight-falsh-card-wrap {
    padding: 0;
}

.clicksoundinteractivity .click-sound-parent {
    padding: 0 2%;
    height: 100%;
    position: relative;
    padding-bottom: 15px;
}

.clicksoundinteractivity .click-soundcard-wrap {
    position: relative;
    width: 100%;
    height: 50%;
}

.clicksoundinteractivity .click-soundcard-wrap .md-padding {
    position: relative;
    margin: 10px 0;
    padding: 10px;
}

.clicksoundinteractivity .trumpCard_red {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 26vh;
    height: 28vh;
    margin-top: -5px;
    background: #fff;
    max-height: 129.03vw;
    max-width: 100vw;
    margin: auto;
    padding: 3%;
    background: #fff;
    border: 5px solid #23408e;
    font-size: 6vw;
    font-family: 'Poppins';
    font-weight: bold !important;
    border-radius: 15px;
    outline: 0;
    /*border: 10px solid #D2232A;*/
}


.clicksoundinteractivity .trumpCard_red img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: none;
    max-width: 100%;
    width: 100%;
}

.clicksoundinteractivity img.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.clicksoundinteractivity .shake {
    -webkit-animation-name: shakeit;
    animation-name: shakeit;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.abcgame_soundMatchContainerwrap ul.instructionMenu {
    padding-left: 40px;
}

.parentPLayButton {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}

/* Background Images */
.gamegobtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/startpg.png");
}

.gameinstructionbtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/instructionimg.png");
}

.gamegonxtbtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/nextbtn.png");
}

.gamegonxtbtnimg :hover {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/nextbtn_hover.png");
}

.popgameplaybtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/playbtn.png");
}

.popgameplaybtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/playbtn.png");
}

#countdownCircle {
    background-image: url("/modules/phonics/dest/lgftimer_cp_bayatree.png");
}

.gameHelpbtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/popBHelpimg.png");
}

.popBIclose {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/P_T_B_instructions_close.png");
}

.popBOverlaycont {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/P_T_B_instructions.png");
}

.modedivborder {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/P_T_B_Letter-bx.png");
}

.gameinstructionbtnimgpg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/popBHelpimg.png");
}

#playwith {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/withtimer.png");
}

#playwithout {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/withouttimer_hover.png");
}

#levelEasy {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamemodeeasy.png");
}

#levelEasy :hover {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamemodeeasy_hover.png");
}

#levelMedium {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamemodemedium.png");
}

#levelMedium :hover {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamemodemedium_hover.png");
}

#levelHard {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamemodehard.png");
}

#levelHard :hover {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamemodehard_hover.png");
}

/* .gamepausebtnimg{
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamepause.png");
} */
/* .gameplaybtnimg{
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gameplay.png");
} */
.gamemutebtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamemute.png");
}

#gamebadgeview {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/badge_new.png");
}

.poptheballoonspage2 {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamefullpg.png");
}

.poptheballoonMainBackground {
    background-image: none !important;
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gameinstructpglayernxtbtnimg1 {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/modebgimg.png");
}

.gameinstructpglayernxtbtnimg_new {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/poptheballoons/images/modebgimg.png");
}

.clockbase {
    /* background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/clockbase.png"); */
}

.gameinstructpglayernxtbtnimg {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamebglogo.png");
}

#playwithout {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/withouttimer.png");
}

#playwith {
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/withtimer.png");
}

/* .gamerestartbtnimg{
    background-image: url("https://d25k2pvzisqrb6.cloudfront.net/assets/abcptb/images/gamerestart.png");
} */

.student-signup {
    padding: 40px 25px 0;
    height: 415px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.login-form .greenSuccess {
    color: #16792c;
    background-color: #ddeed7;
    border-color: #c3e6cb;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 11px;
    line-height: 19px;
    margin-bottom: 20px;
    margin-top: 10px;
}

.login-form .redError.alert.alert-info {
    color: #a54341;
    background-color: #f0ddde;
    border-color: #f0ddde;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    padding: 11px;
    line-height: 19px;
    margin-bottom: 20px;
    margin-top: 10px;
}

/* Background Images Ends Here */
#clock_svg {
    fill: white;
    stroke: black;
    stroke-width: 1;
    stroke-linecap: round;
    transform: rotate(-90deg);
    --start-seconds: 0;
}

.clock_svg_marks {
    transform: translate(20px, 20px);
    /* transform: translate(23px, 17px); */
    stroke-width: 0.2;
}

.clock_svg_marks>line:nth-child(1) {
    /* There are 12 marks, so we rotate by 30deg (12 * 30 = 360) */
    transform: rotate(30deg);
}

.clock_svg_marks>line:nth-child(2) {
    transform: rotate(calc(2 * 30deg));
}

.clock_svg_marks>line:nth-child(3) {
    transform: rotate(calc(3 * 30deg));
    stroke-width: 0.5;
}

.clock_svg_marks>line:nth-child(4) {
    transform: rotate(calc(4 * 30deg));
}

.clock_svg_marks>line:nth-child(5) {
    transform: rotate(calc(5 * 30deg));
}

.clock_svg_marks>line:nth-child(6) {
    transform: rotate(calc(6 * 30deg));
    stroke-width: 0.5;
}

.clock_svg_marks>line:nth-child(7) {
    transform: rotate(calc(7 * 30deg));
}

.clock_svg_marks>line:nth-child(8) {
    transform: rotate(calc(8 * 30deg));
}

.clock_svg_marks>line:nth-child(9) {
    transform: rotate(calc(9 * 30deg));
    stroke-width: 0.5;
}

.clock_svg_marks>line:nth-child(10) {
    transform: rotate(calc(10 * 30deg));
}

.clock_svg_marks>line:nth-child(11) {
    transform: rotate(calc(11 * 30deg));
}

.clock_svg_marks>line:nth-child(12) {
    transform: rotate(calc(12 * 30deg));
    stroke-width: 0.5;
}

.clock_svg_seconds {
    /* transform: translate(20px, 20px) rotate(0deg); */
    transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));
    animation: rotateSecondsHand 60s steps(60) infinite;
}

@keyframes rotateSecondsHand {
    from {
        transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));
    }

    to {
        transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg + 360deg));
    }
}

.clock_svg_seconds {
    stroke-width: 0.3;
    stroke: #d00505;
}

.clock_svg_pin {
    stroke: #d00505;
    stroke-width: 0.2;
}

.fa-info.lgf_gameinstructionbtnimgpg {
    background-color: #105fce;
    border: 3px solid #003886;
    color: #f3f8ff;
}

.lgf_gameinstructionbtnimgpg {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.fa-play.lgf_gamepausebtnimg {
    background-color: #f1661c;
    border: 3px solid #a03800;
    color: #fff4ee;
}

.fa-pause.lgf_gamepausebtnimg {
    background-color: #0daf22;
    border: 3px solid #00750f;
    color: #e6ffe9;
}

.lgf_gamepausebtnimg {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.fa-redo-alt.lgf_gamerestartbtnimg {
    background-color: #f11c29;
    color: #fff0f1;
    border: 3px solid #b1000b;
}

.fa-redo-alt.gamerestartbtnimg {
    background-color: #f11c29;
    color: #fff0f1;
    border: 3px solid #b1000b;
}

.gamerestartbtnimg {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.fa-pause.gamepausebtnimg {
    background-color: #f11c29;
    color: #fff0f1;
    border: 3px solid #b1000b;
}

.fa-play.gameplaybtnimg {
    background-color: #0daf22;
    border: 3px solid #00750f;
    color: #e6ffe9;
}

.gamepausebtnimg,
.gameplaybtnimg {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.lgf_gamerestartbtnimg {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.rhs-image-wrap {
    /*
	width: 80%;
    float: left;
    margin-left: 20%;
    margin-top: 51%;
 */
}

.fa-redo-alt.abcgame_bingorefresh {
    background-color: #f11c29;
    color: #fff0f1;
    border: 3px solid #b1000b;
}

.abcgame_bingorefresh {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.fa-info.abcgame_bingohelp {
    background-color: #105fce;
    border: 3px solid #003886;
    color: #f3f8ff;
}

.abcgame_bingohelp {
    width: 47px;
    height: 47px;
    cursor: pointer;
    display: inline-block;
    margin-right: 2%;
    line-height: 42px;
    border-radius: 100%;
    font-size: 17px;
    text-align: center;
    box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.35);
}

.abcgame_abc-container i {
    /* font-family: Font Awesome\ 5 Free !important; */
}

.common-updated-rhs-clock {
    z-index: 2;
    position: relative;
    margin: auto;
    height: 170px;
    width: 176px;
    text-align: center;
    /* -webkit-animation: phonicsgameplayv 60s steps(4) infinite, phonicsgameplayh 15s steps(15) infinite;
    -moz-animation: phonicsgameplayv 60s steps(4) infinite, phonicsgameplayh 15s steps(15) infinite;
    animation: phonicsgameplayv 60s steps(4) infinite, phonicsgameplayh 15s steps(15) infinite; */
    animation-play-state: running;
    transform: scale(0.9, 0.9);
    -ms-transform: scale(0.9, 0.9);
    -webkit-transform: scale(0.9, 0.9);
}

/* Flip Page Leather Book */
/* SL3-6676, use display flex to center content...remove all translate css*/
.page .pageDiv {
    display: flex;
    height: 100%;
    width: 100%;
    text-align: center
}

.page .pageDiv .pageSpan {
    display: table-cell;
    vertical-align: middle;
}

.flipbook-viewport .page .pageDiv .pageSpan {
    /* position: absolute; */
    vertical-align: middle;
    /* top: 50%;
    transform: translate(0%, -56.3%);
    left: 0;
    right: 0; */
    margin: auto;
    display: inline-block;
}

.bookTemplate3 .page .pageDiv .pageSpan {
    /* transform: translate(-6%, -56.3%); */
}

.wrapper-div {
    height: 100%;
    width: 100%;
}

.pointer-events-none {
    pointer-events: none;
}

.clock-btm-clr {
    background: #072157;
}

.cursor-pointer {
    cursor: pointer;
}

letsplaybasketball #lgf_countdownNumber {
    color: #fff;
    
    font-size: 24px;
    text-align: center;
    top: 0px;
    position: relative;
    width: 100%;
    text-align: center;
    left: 25%;
    margin-top: 0px !important;
    background: #072157;
    max-width: 50%;
}

letsplaybasketball #lgf_gamelvlintdication {
    color: #000000;
    
    font-size: 22px;
    text-align: center;
    top: 0%;
    position: relative;
    Width: 100%;
    left: 0px;
}

#abcMatchMainBody #game_complete .abcgame_abcpick_eachlevelcongratsmedal.abcgame_abcpick_resultanim img {
    object-fit: contain;
}

@media (max-width: 1400px) {
    #abcMatchMainBody #game_complete .abcgame_abcpick_eachlevelcongrats {
        height: 151px;
    }
}

@media (max-width: 925px) {

    .landscape #abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_gameResultTitle {
        font-size: 13px;
        padding: 11px 12px;
        height: 45px;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_gameResult {
        height: 139px;
        background-size: 100% 100%;
    }

    #abcMatchMainBody div#game_level_complete .abcgame_abcpick_gameResultWrapper {
        padding: 0 0px 0px 4px;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_fleft {
        font-size: 10px;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_gameResult .abcgame_abcpick_fright {
        font-size: 11px;
    }

    .landscape #abcMatchMainBody .abcgame_playagain,
    .landscape #abcMatchMainBody .abcgame_timeup,
    .landscape #abcMatchMainBody .abcgame_nextlevel {
        font-size: 14px;
        line-height: 20px;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_readytext.abcpick_ggo {
        font-size: 27px;
    }

    .landscape #abcMatchMainBody .abcgame_abcpick_eachlevelcongratsmedal.abcgame_abcpick_resultanim img {
        width: 80%;
        object-fit: contain;
    }

    .landscape #abcMatchMainBody #game_complete .abcgame_abcpick_eachlevelcongrats {
        height: 50%;
    }

    .landscape #abcMatchMainBody #game_complete .abcgame_abcpick_gameResultWrapper.abcgame_abcpick_scoreboxeachlevelcongrats {
        width: 100%;
        height: 160px;
    }

    .landscape #abcMatchMainBody #game_complete .abcgame_abcpick_gameResult {
        height: 119px;
        padding: 12px 0 0 0;
    }

}

.dynamic-layout-letter-sequence {
    -webkit-box-orient: horizontal;
    flex-direction: row;
    width: 100%;
    -webkit-box-direction: normal;
    box-sizing: border-box;
    display: flex;
}
.letter-sequence6 .dynamic-layout-letter-sequence {
    width: 93%;
    margin: auto;
}

#letter-sequence .click-rating .bullets {
    font-size: 100%;
    cursor: default;
}


.portrait #letter-sequence .arrow-right:hover,
.portrait #letter-sequence .arrow-left:hover {
    background-color: transparent;
}

#letter-sequence .arrow-left i:before {
    font: normal normal normal 14px/1 FontAwesome;
    content: '\f048';
    display: block;
    position: relative;
    z-index: 2;
    font-size: 25px;
}

#letter-sequence .arrow i:after {
    height: 35px;
    width: 35px;
    background: #fff;
    border-radius: 50%;
    content: "";
    position: absolute;
    border: 1px dashed #726757;
}

#letter-sequence .arrow-right i:before {
    font: normal normal normal 18px/1 FontAwesome;
    content: '\f051';
    display: block;
    position: relative;
    z-index: 2;
    font-size: 25px;
    text-align: right;
}

#letter-sequence {
    background: transparent;
    width: 100%;
    height: 100%;
}
#lesson_ifr .letter-sequence {
    background: transparent !important;
}

#letter-sequence .click-rating {
    padding-top: 20px;
    padding-bottom: 2%;
    margin-top: 0px !important;
}

#letter-sequence .right_column {
    top: inherit;
}

.wooden-background {
    background: url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/bookwood.jpeg") 0 0 / 100% 100% !important;
}

.white-background {
    background: white !important;
}

.blue-background {
    background: #cfe9f8 !important;
}

#letter-sequence .twoflash-cont:before,
#letter-sequence .sq-animate:after {
    content: '';
    position: absolute;
    left: -0.5%;
    right: 0;
    top: 0;
    width: 101%;
    height: 20px;
    background: url("https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/rollover-wrap.png") 0 0/100% 100% no-repeat;
}

#letter-sequence .sq-animate:after {
    top: auto;
    bottom: 0;
}

#letter-sequence .twoflash-cont {
    padding: 0;
}

.portrait #letter-sequence .img-wrapper {
    margin: auto;
    display: flex;
}

.blue-background .arrow-right:hover,
.blue-background .arrow-left:hover {
    background-color: transparent !important;
}

.portrait .letter-with-image .demotrump img {
    margin-top: 0 !important;
}

.portrait #letter-sequence .img-wrapper,
.portrait #letter-sequence .imgHolder {
    min-height: inherit;
    height: 100%;
    width: 100%;
}

/* .portrait #letter-sequence .letterHolder {
	margin: auto;
} */
.wdth-100 {
    width: 100% !important;
}

.padding0 {
    padding: 0 !important;
}

.letter-sequence-lesson3 .level2 {
    letter-spacing: 0px !important;
}

.letter-sequence-lesson3 .demotrumpCard img {
    border: 0 !important;
}

.zero-opacity-transition {
    transform: scale(0.8);
    transition: 0.1s ease-in;
    opacity: 0;
    transition: 0.1s ease-in;
}

.blast-game-logo-css {
    width: 82% !important;
    height: 55% !important;
}

#flip-crd-main-wrd-span {
    display: block;
    position: relative;
    font-size: 5vh;
    margin: -1px auto 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 1024px) {
    #flip-crd-main-wrd-span {
        font-size: 4vh;
    }
}
.login-form .redError.alert.alert-info.resendActivationDiv{
    padding: 0px !important;
    text-decoration: underline;
}