/*----------drone template css---------*/

.Drone-template {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook5/images/Section1/drone-with-cloud.png), url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook5/images/Section1/drone-with-cloud.png), url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook5/images/Section1/drone-bg.jpg);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: 0% 0%, 100% 5%, 0 100%;
    background-size: 260px, 300px, cover;
    animation: 300s para infinite linear;
    position: relative;
}

.Drone-ContentBox {
    height: calc(100% - 160px);
}

.Drone-img-wrap {
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 70%;
    margin: auto;
}

.Drone-template .sentenceSpan {
    background-color: transparent;
    margin: 0;
}

#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-right-animation,
#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-left-animation,
#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-left-carousel,
#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-right-carousel,
#calenderFlipCardMainDiv .ancient-scroll-wrapper.ancientscrollCarousel .arrow.arrow-right,
#calenderFlipCardMainDiv .ancient-scroll-wrapper.ancientscrollCarousel .arrow.arrow-left {
    height: 100%;
}

.Drone-template .container-fluid {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
    padding: 0;
    overflow-x: hidden;
    flex-wrap: nowrap;
}

.Drone-img {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook5/images/Section1/Drone-banner.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    margin: 50px auto 0 auto;
    position: relative;
    height: calc(100% - 100px);
    display: flex;
    transform: rotateZ(-11deg);
}

.Drone-img .Drone-fan {
    position: absolute;
    bottom: 99%;
    left: 50%;
    transform: translateX(-50%);
    width: 30%;
}

.contentBox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.contentWord {
    position: relative;
}

.contentWord span:before,
.contentWord span:after {
    position: absolute;
    content: '';
    background-color: #ff931e;
    height: 400px;
    width: 3px;
    bottom: 100%;
    left: 90px;
}

.contentWord span:after {
    right: 90px;
    left: auto;
}

/*css only for ios https://stackoverflow.com/a/47818418/1331003 
SL3-7524, height of threads in text container causing issues in animation on iPhone*/
@supports (-webkit-touch-callout: none) {

    .contentWord span:before,
    .contentWord span:after {
        height: 200px;
    }
}

.contentWord span {
    text-align: center;
    position: relative;
    font-weight: bold;
    font-size: 5vw;
    background-color: #ff931e;
    color: #1d2bee;
    padding: 10px;
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    max-width: 448px;
}

/* bold in all the templates */
.Drone1 .align-middle {
    background-color: rgba(229, 243, 255, 0.85);
}

.row.contentBox.Drone-ContentBox {
    z-index: 9;
}

.Drone1 .audio-text span.wordHighlight {
    color: #1d2bee;
}

.audio-text span.wordHighlight {
    background-color: transparent;
}

.Drone-template .swing {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}

.Drone-template .slideInDown {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

.Drone-template .col-md-12 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.abcgame_background_layer2,
.monkeyWrap,
.birdstatic,
#abcgame_abcpick_cloud1,
#abcgame_abcpick_cloud2 {
    display: none;
}

.abcgame_abcpick_section2_small.abcgame_abcMatchWelcomePage.ng-scope {
    background-image: url(https://d25k2pvzisqrb6.cloudfront.net/assets/recommendedgames/images/optionalabcabcpick.png) !important;
    position: relative;
    border-radius: 8px;
    border: 2px solid #fff;
    /* box-shadow: #ccc 1px 2px 8px 2px; */
}

/*----------end drone template css ----------*/

/*----------blackboard template css ---------*/

#calenderFlipCardMainDiv.blackboard-template {
    background-image: none;
    background-size: 100% 100%;
    min-height: 100%;
    height: 100%;
    justify-content: center;
    background-color: #d1d1d1;
}

#calenderFlipCardMainDiv.blackboard-template .contentBox {
    height: auto;
    flex: 1;
    max-height: 80%;
}

#calenderFlipCardMainDiv.blackboard-template .templatebox .template-word p,
#calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p {
    font-size: 4vw !important;
}

#calenderFlipCardMainDiv.blackboard-template .templatebox {
    width: 80%;
    border-style: solid;
    border-color: #9a602e;
    border-width: 20px;
    border-image: url(../../../reading/css/images/frame-border.jpg) 5 round;
    background-color: #d7d7d9;
    background-image: linear-gradient(140deg, #d0d0d0 0%, #f1f1f1 50%, #e0e0e0 75%);
    height: 100%;
    justify-content: space-around;
    padding: 10px 0 20px 0;
    margin: auto;
    position: relative;
    flex-wrap: nowrap;
    flex-direction: column;
}

#calenderFlipCardMainDiv.blackboard-template .templatebox .template-word p span.blacktxt {
    color: black;
}

#calenderFlipCardMainDiv.blackboard-template .row.wow {
    background-color: #fff;
    margin-top: 10px;
}

#calenderFlipCardMainDiv.blackboard-template .templatebox .template-word {
    margin: 0;
}

#calenderFlipCardMainDiv.blackboard-template .template-img {
    padding: 0;
    width: 100%;
}

#calenderFlipCardMainDiv.blackboard-template .right-btns-grp {
    transform: scale(0.85);
    bottom: auto;
    top: auto;
    right: 0;
    z-index: 999;
}

#calenderFlipCardMainDiv.blackboard-template .templatebox .template-row {
    /* height: auto !important; */
    flex: 1;
    flex-wrap: nowrap;
    flex-direction: row;
    /* max-height: 63%; */
}

#calenderFlipCardMainDiv.blackboard-template .templatebox .template-row.textFirst {
    flex-direction: row-reverse;
}

#calenderFlipCardMainDiv.blackboard-template .templatebox::after {
    content: "";
    background: #fff;
    height: 18px;
    width: 60px;
    bottom: 0;
    right: 9%;
    border-radius: 25px;
    display: block;
    position: absolute;
}

/* end */


/* common css for other templates  slider / spaceship / menuboard */

.common .contentBox {
    height: calc(100% - 55px);
    width: 100%;
    margin: auto;
}

.common .contentarea {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.common .contentarea .templeteouter {
    width: 100%;
    height: 100%;
}

.common .contentarea .templatebox {
    background-position: center;
    overflow: visible;
    max-height: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: auto;
}

@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0
    }

    to {
        left: 0;
        opacity: 1
    }
}

.common .contentarea .templeteouter .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
}


.common .contentarea .templatebox .template-img {
    width: 75%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 7px;
    margin-left: auto;
    margin-right: auto;
}

.common .contentarea .templatebox .template-img img {
    object-fit: contain;
    width: auto !important;
    height: 100%;
    max-width: 70%;
}

.common .responsive {
    height: 100%;
}

.common .contentarea .templatebox .template-word {
    width: 100%;
    height: 79%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.common .contentarea .templatebox .template-word p,
.common .contentarea .templatebox .template-word p.text-black span.firstTxt {
    font-size: 4vw;
    /* reduced font size a little as for tb7,8 words are large*/
    color: #4c8f19;
    font-weight: bold;
}

.common .contentarea .templatebox .template-word p.secondWord,
.common .contentarea .templatebox .template-word p.text-black span.firstTxt {
    color: black;
}

.common .contentarea .templatebox .template-word p span {
    display: block;
}

/*----------end blackboard css----------*/

/*----------slider interactivity css----------*/

#calenderFlipCardMainDiv.slider-template {
    background-image: none !important;
    height: 100%;
    min-height: 100%;
    background-size: 100% 100%;
}

#calenderFlipCardMainDiv.slider-template .template-img,
#calenderFlipCardMainDiv.spaceship-template .template-img {
    width: 100%;
    padding: 0;
}

#calenderFlipCardMainDiv.slider-template .click-rating {
    margin: 5px 0 !important;
}

#calenderFlipCardMainDiv.slider-template span.sentenceSpan {
    color: #000 !important;
}

/* #calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-word p{
    font-size: 4vw !important;
} */

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox {
    padding: 0.5% 0px 0.5%;
    background: rgb(255 255 255 / 16%);
    border-radius: 30px;
    border: 2px solid #000;
    max-height: 95% !important;
    animation: animateright 4s;
    animation-duration: 2000ms;
    width: 80% !important;
    height: 100%;
    flex-direction: column;
}

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-row {
    /* height: auto !important; */
    flex: 1;
    flex-wrap: nowrap;
    flex-direction: row;
    /* max-height: 70%; */
}

/*In TB1 show text image in reverse order */
#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-row.textFirst {
    flex-direction: row-reverse;
}

#calenderFlipCardMainDiv.slider-template .contentBox {
    height: calc(100% - 55px);
}

@keyframes animateright {
    from {
        right: -300px;
        opacity: 0
    }

    to {
        right: 0;
        opacity: 1
    }
}

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .audio-text span.wordHighlight,
#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-word p {
    color: #1d2bee !important;
}

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-word {
    flex-wrap: wrap;
}

/* #calenderFlipCardMainDiv.slider-template img {
    width: auto !important;
    max-width: 60%;
    height: 100% !important;
    object-fit: contain;
    border: none !important;
} */

#calenderFlipCardMainDiv.slider-template .template-img img,
#calenderFlipCardMainDiv.spaceship-template .template-img img {
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    /* border: none !important; */
}

/* #calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-word img {
    width: 100%;
    padding: 0 15%;
} */

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .audio-text {
    background: transparent;
    color: #fff;
}

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .audio-text.row.activityWithoutsentence {
    display: none;
}

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .audio-text .align-middle,
#calenderFlipCardMainDiv.common .contentarea .templatebox .audio-text .align-middle {
    width: 100%;
}

#calenderFlipCardMainDiv.slider-template .contentarea .templatebox .audio-text .align-middle {
    width: 100%;
    height: auto !important;
}

/*----------end slider template css----------*/

#calenderFlipCardMainDiv .template-img img {
    max-height: 100%;
    max-width: 100%;
    width: auto !important;
    height: auto !important;
}

/* flipbook template css  */

#flipping_leatherbook.flip-book2 #flipbook-viewport .img_text {
    /* border: none !important; */
    max-width: 66% !important;
    max-height: 100% !important;
    width: auto !important;
}

#flipping_leatherbook.flip-book2 .audio-text.stringBottom.zoomIn {
    background-color: #fff;
   padding: 6px 3px 6px;
}

#flipping_leatherbook.flip-book2 #flipbook-viewport .pageSpan {
    color: #0f0f0f !important;
    letter-spacing: 0;
}




#flipping_leatherbook.flip-book2 #flipbook-viewport .pageSpan .wordHighlight {
    color: #1c2af2 !important;
    letter-spacing: 0;
}

#flipping_leatherbook.flip-book2 #flipbook-viewport .audio-text .sentenceSpan {
    transform: none !important;
    max-width: 75%;
    margin-top: 0;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile {
    display: none !important;
}

#flipping_leatherbook.flip-book2 .bookTemplate4 .odd,
#flipping_leatherbook.flip-book2 .bookTemplate4 .even {
    align-items: center;
    justify-content: center;
    height: calc(100% - 100px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

@keyframes animatebottom {
    from {
        bottom: -300px;
        opacity: 0
    }

    to {
        bottom: 0;
        opacity: 1
    }
}

#flipbook-viewport .stringBottom span {
    color: black;
    background-color: transparent;
}

#flipbook-viewport .stringBottom .wordHighlight {
    color: #1c2af2 !important;
    background-color: transparent;
}

.bookTemplate4 .bookTemplate {
    height: 100%;
    max-width: 100%;
}

.bookTemplate4 .page {
    display: flex;
    background: linear-gradient(to left, #abe385 50%, #ebc400 50%);
}

.bookTemplate4 .duplicate {
    background-color: white;
}

.bookTemplate4 .odd,
.bookTemplate4 .even {
    width: 50%;
    height: 100%;
    padding: 10px;
    display: flex;
}

.bookTemplate4 .bookTemplate {
    height: 100% !important;
}

.bookTemplate4 .flipbook-viewport .container-flip {
    width: 100%;
}

#flipping_leatherbook.flip-book2 {
    background: linear-gradient(to left, #abe385 50%, #ebc400 50%);
}

.landscape #flipping_leatherbook .bookTemplate4#flipbook-viewport #flipbook_interactivity {
    transform: none;
}

.landscape .bookTemplate4#flipbook-viewport #flipbook_interactivity {
    transform: none;
}

.interactivity #flipping_leatherbook .bookTemplate4 .audio-text {
    position: absolute;
    bottom: 0;
}

.portrait .interactivity #flipping_leatherbook .bookTemplate4 .audio-text .align-middle{
    height: auto !important;
}

#flipping_leatherbook.flip-book2 .click-rating {
    flex: 0 1 35px;
}

#flipping_leatherbook.flip-book2 #flipbook-viewport.bookTemplate4 .bookTemplate {
    height: 100% !important;
    flex: 1 1 auto;
    /*SL3-7214, somehow max-height is not getting reverted when we exit from fullscreen
    ... this may need to change for mobile, tabs */
    max-height: calc(100% - 60px);
}

.bookTemplate4 .flipbook .page img.img_text {
    transform: none;
    top: 0;
}

/* end flipbook template css  */

/* spaceship template css */

#calenderFlipCardMainDiv.spaceship-template {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/bg.jpg);
    background-size: cover;
    position: relative;
    overflow: hidden;
    animation: none;
}

#calenderFlipCardMainDiv.spaceship-template .container-fluid {
    height: 100%;
    width: 100%;
    padding: 0px;
}

#calenderFlipCardMainDiv.spaceship-template .audio-text {
    background: transparent;
}

#calenderFlipCardMainDiv.spaceship-template .contentBox {
    padding: 0px !important;
    height: calc(100% - 55px);
}

#calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox {
    background: none;
    width: 100%;
    padding: 0px;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

#calenderFlipCardMainDiv.spaceship-template .responsive {
    height: 100%;
}

#calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
    height: 100%;
    width: 90%;
    overflow: hidden;
    max-height: 87%;
    margin-left: auto;
    margin-right: 0;
    border-radius: 5px;
    padding: 0px;
}

/* removed some css for spaceship template SL3-9146  */
#calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img img {
    height: 100% !important;
    max-height: 450px;
}

/* end */

#calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p {
    color: #cc9500;
}

#calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row {
    margin-left: auto;
    margin-right: auto;
    height: calc(100% - 23%);
}

#calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row.textFirst {
    flex-direction: row-reverse;
}

#calenderFlipCardMainDiv.spaceship-template .spaceshp {
    position: fixed;
    bottom: 20vh;
    left: 8%;
    right: 0;
    margin: 0 auto;
    width: 15%;
    height: 260px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/space-shipanimate.png);
    background-size: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(750px);
}

@keyframes launch {
    from {
        transform: translateY(750px);
        opacity: 0;
    }

    to {
        perspective: 500px;
        transform: translateY(0px);
        opacity: 1;
    }
}

#calenderFlipCardMainDiv.spaceship-template .click-rating .bullets.fa-circle {
    color: #fff;
}



#calenderFlipCardMainDiv.spaceship-template .bottomlight_clouds {
    position: absolute;
    bottom: 0;
    right: -30vw;
    width: 85vw;
    height: 25vh;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/right-clouds.png);
    background-size: 100vw 25vh;
}

#calenderFlipCardMainDiv.spaceship-template .bottomheading_clouds {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/heading-bootm.png);
    background-size: 117vw 40vh;
    height: 37vh;
    background-color: transparent;
    position: absolute;
    bottom: 0px;
    right: 0;
    left: 0px;
    width: 100%;
    background-repeat: no-repeat;
}

#calenderFlipCardMainDiv.spaceship-template .align-middle {
    background-color: transparent;
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1
    }
}

#calenderFlipCardMainDiv.spaceship-template .align-middle .sentenceSpan {
    background: transparent;
    border-radius: 0;
}


/* end spaceship template css  */

/* envelope template css  */

#calenderFlipCardMainDiv.envelope-template {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/envelope-bg.jpg);
    background-size: cover;
    height: 100% !important;
    min-height: 100%;
    max-height: 100%;
    overflow-y: auto;
}

#calenderFlipCardMainDiv.envelope-template .contentBox {
    min-height: auto;
    padding: 0px;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox {
    width: 100%;
    background: transparent;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    padding: 0;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templeteouter .template-row {
    flex: 1;
}

/*In TB1 show text image in reverse order */
#calenderFlipCardMainDiv.envelope-template .contentarea .templeteouter .template-row.template-row.textFirst {
    flex-direction: row-reverse;
}

#calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
    margin-left: auto;
    margin-right: auto;
    /* height: calc(100% - 94px); */
}



#calenderFlipCardMainDiv.envelope-template .envelope_Height {
    height: 100%;
}

.envelope-back {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/envelope-back.png);
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    padding: 0px;
    position: absolute;
    z-index: 9;
}

.envelope-front {
    content: '';
    position: absolute;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/envelope-front.png);
    width: 100%;
    background-size: contain;
    height: 100%;
    background-repeat: no-repeat;
    background-position: top;
    overflow: hidden;
    z-index: 999;
}

.envelope-template .contentarea .templatebox .template-img {
    height: 100%;
    margin: auto;
    overflow: hidden;
    z-index: 9;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap {
    object-fit: contain;
    /* width: 40% !important; */
    height: 100%;
    padding: 1%;
    background-color: transparent;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.envelope-wrap {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap img {
    height: 70%;
    width: auto !important;
    max-width: 100%;
    object-position: top;
    max-height: 350px;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
    width: 80%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(93 138 40 / 95%);
    padding: 7px;
    border-radius: 20px;
    margin-left: auto;
    margin-right: auto;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word p .txt {
    color: #FFFF00;
    background-color: transparent;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .align-middle span.wordHighlight {
    color: #0f0f0f;
    background-color: transparent;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word span.wordHighlight {
    color: #0f0f0f;
    background-color: transparent;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .align-middle span {
    color: #fff;
    background-color: transparent;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .align-middle {
    background: #044d97a8;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    height: auto !important;
    min-height: 65px;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom .align-middle {
    height: auto !important;
    min-height: 51px;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .align-middle p {
    color: #fff !important;
}

/* end */

/* css for menubaord template */
.menuboard-template .contentarea .templatebox .template-word p {
    font-size: 4vw;
}

#calenderFlipCardMainDiv.menuboard-template svg {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

.menuboard-template .contentarea .templatebox .stringBottom span.sentenceSpan {
    max-width: 65%;
}

#calenderFlipCardMainDiv.menuboard-template {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/menuboard-bg.jpg);
    background-size: cover;
    height: 100% !important;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
}

#calenderFlipCardMainDiv.menuboard-template .contentBox {
    padding: 0px;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox {
    height: 100%;
    min-height: auto;
    max-height: 100%;
    justify-content: center;
    background: transparent;
    background-image: none;
    padding: 0;
    width: 100%;
    /* added css  for 3 line sentence in menuboard */
    overflow: visible;
    flex-wrap: nowrap;
    flex-direction: column;
    /* end */
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row {
    width: 100%;
}

/*In TB1 show text image in reverse order */
#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row.textFirst {
    flex-direction: row-reverse;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 {
    flex: 0 0 57%;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile_bg {
    flex: 0 0 42%;
}



#calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img,
#calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-word {
    background-size: auto 100%;
    background-position: bottom center;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    height: 100%;
    margin-bottom: -42px;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/left-menu-board.png);
    background-position: center;
    justify-content: center;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-word {
    /* background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/menuboard-butterfly.gif); */
    background-position: center;
    position: absolute;
    justify-content: center;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .butterfly {
    position: absolute;
    left: 1%;
    top: 1%;
    height: 60px;
    width: 60px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/menuboard-butterfly.gif);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    transform: rotate(10deg);
    display: none;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .bird {
    position: absolute;
    left: 18%;
    top: -2px;
    height: 55px;
    width: 55px;
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook1/images/menuboard-bird.png);
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    animation: rotation 3s infinite linear;
}

@keyframes rotation {
    0% {
        -webkit-transform: rotate(0deg);
    }

    10% {
        -webkit-transform: rotate(-10deg);
    }

    20% {
        -webkit-transform: rotate(-20deg);
    }

    30% {
        -webkit-transform: rotate(-30deg);
    }

    40% {
        -webkit-transform: rotate(-40deg);
    }

    50% {
        -webkit-transform: rotate(-50deg);
    }

    60% {
        -webkit-transform: rotate(-40deg);
    }

    70% {
        -webkit-transform: rotate(-30deg);
    }

    80% {
        -webkit-transform: rotate(-20deg);
    }

    90% {
        -webkit-transform: rotate(-10deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
    }
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
    width: auto !important;
    height: 45%;
    object-fit: contain;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom {
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    background: #e82429;
    border: 2px solid #fff;
    width: 100%;
    flex-wrap: nowrap;
    min-height: auto;
    ;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom .arrow_top {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #e82429;
    margin: -17px auto auto auto;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom p {
    color: #fff !important;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom span {
    color: #fff !important;
    background-color: transparent;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom span.wordHighlight {
    color: #ffd31c !important;
    font-weight: bold;
}

#calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom .align-middle {
    width: 100%;
}

/* end */

/* css for ancient template */

.Drone-template.ancient-template {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook5/images/Section1/ancient-bg.jpg);
    background-size: cover;
}

.ancient-scroll-wrapper {
    display: flex;
    height: calc(100% - 109px);
    position: relative;
    align-items: center;
    width: 90%;
    margin: auto;
    max-width: 1140px;
    margin-top: -40px;
    /*maximum size for content untilised as per height.. increasting width will increase gap in text and image */
}

.ancient-noSentence .ancient-scroll-wrapper {
    height: 90% !important;
}

/* added css for full screeen slider merging issue  */
.landscape .contentfull .ancient-scroll-wrapper {
    height: calc(100% - 135px);
    margin-top: 10px;
}

/* end */

#calenderFlipCardMainDiv.Drone-template .arrow.arrow-left.ancientArrow {
    width: auto !important;
    left: 0 !important;
    z-index: 99;
}


#calenderFlipCardMainDiv.Drone-template .arrow.arrow-right.ancientArrow {
    right: 0 !important;
    width: auto !important;
}

.ancient-template .audio-text span.wordHighlight {
    color: #1d2bee;
    background-color: transparent;
}

.ancient-template .audio-text .align-middle {
    position: static;
}

.ancient-template .contentBox {
    width: 100%;
    margin: auto;
    align-content: center;
    height: 68% !important;
    background-color: #dcad6a;
    background: linear-gradient(180deg, rgba(220, 173, 106, 1) 0%, rgba(250, 224, 188, 1) 23%, rgba(250, 224, 188, 1) 75%, rgba(220, 173, 106, 1) 100%);
    overflow: hidden;
}

.ancient-template .contentBox .ancientImageContainer {
    display: flex;
    justify-content: center;
    max-height: 100%;
    overflow: hidden;
    align-items: center;
    flex-direction: column;
}

.ancient-template .ancientWrapper .contentWord {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ancient-template .contentBox .ancientImageContainer img {
    width: auto;
    object-fit: contain;
    max-height: calc(100% - 10px) !important;
    margin: 5px !important;
    max-width: 100%;
    max-height: 100%;
    /* flex:  1; */
}

.ancient-template .contentBox .col-md-3 span {
    /* used col-md-3 as need this only on desktop */
    justify-content: flex-start;
}

/* .ancient-template .contentBox .col-sm-12.contentWord{
    max-height:60px;
} */


.ancient-template .carousel .slider-wrapper {
    width: 100% !important;
}

.Drone-template.ancient-template .arrow.arrow-right,
.Drone-template.ancient-template .arrow.arrow-left {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook5/images/Section1/ancient-scroller.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    width: 100px;
}

.Drone-template.ancient-template .arrow.arrow-right {
    background-image: url(https://d2bc0dj7y9gvhz.cloudfront.net/phonicadventure/textbook5/images/Section1/ancient-scroller-right.png);
    right: -35px !important;
}

.Drone-template.ancient-template .arrow.arrow-left {
    left: -35px !important;
}

.Drone-template .droneContent {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.Drone-template .droneContent.textFirst {
    flex-direction: row-reverse;
}

.ancient-template .contentWord span {
    background-color: transparent;
    padding: 0 !important;
    max-width: none;
    width: 100%;
    color: #1928f2;
    font-size: 3.5vw;
    /* similar to words to know template words font size */
    font-weight: bold;
    margin: 0px;
    justify-content: center;
}

/* .ancient-template .arrow-right i:before {
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-left: 23px solid;
    border-left-color: #ff0000 !important;
}

.ancient-template .arrow-left i:before {
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 23px solid;
    border-right-color: #ff0000 !important;
}

.ancient-template .arrow i {
    background: none;
} */

#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-right-animation:hover,
#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-left-animation:hover,
#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-left-carousel:hover,
#calenderFlipCardMainDiv .ancient-scroll-wrapper .arrow.ancient-right-carousel:hover {
    background-color: transparent;
}

.ancient-template .audio-text {
    position: relative;
}

.ancient-template .audio-text .align-middle {
    position: static;
    background: #fff;
}

.ancient-template .audio-text img {
    position: absolute;
    bottom: 93%;
    width: 110px;
    right: 25%;
}

.ancient-template .audio-text p {
    margin: 0;
}

.ancient-template .audio-text p span {
    font-weight: bold;
    color: #1928f2;
}

.landscape .ancient-template .contentWord span:before,
.landscape .ancient-template .contentWord span:after {
    display: none;
    visibility: hidden;
}

.ancient-template #contentDiv {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.ancient-template #contentDiv.textFirst {
    flex-direction: row-reverse;
}

/* animation for ancient scroll */

.ancient-left-animation {
    animation: leftancientscroll 2.5s ease-out forwards;
}

@keyframes leftancientscroll {
    0% {
        left: 45%;
    }

    100% {
        left: 0;
    }
}

.ancient-right-animation {
    animation: rightancientscroll 2.5s ease-out forwards;
}

@keyframes rightancientscroll {
    0% {
        right: 45%;
    }

    100% {
        right: 0;
    }
}

.ancient-content-animation {
    animation: contentancientscroll 2.5s ease-out forwards;
}

@keyframes contentancientscroll {
    0% {
        width: 2%;
    }

    100% {
        width: 95%;
    }
}

.ancient-img-animation {
    animation: imgancientscroll 2.5s ease-out forwards;
}

@keyframes imgancientscroll {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.ancient-span-animation {
    animation: spanancientscroll 2.5s ease-out forwards;
}

@keyframes spanancientscroll {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* end */

/*----------@media library responsive css----------*/

@media (min-width:1601px) {
    #calenderFlipCardMainDiv.spaceship-template .align-middle .sentenceSpan {
        max-width: 80% !important;
    }

    #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap img {
        max-height: 450px;
    }


    #calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
        /* height: calc(100% - 150px); */
    }

    #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row {
        height: calc(100% - 130px);
    }

    #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap {
        object-fit: contain;
        /* width: 50% !important; */
    }

    .ancient-scroll-wrapper {
        height: calc(100% - 130px);
    }

    #calenderFlipCardMainDiv.slider-template img {
        max-height: 100%;
    }

    div#textDrone.contentWord span {
        max-width: 636px;
    }

    .Drone-img-wrap {
        max-width: 500px;
    }

    .Drone-img {
        width: 99%;
    }

    #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
        width: auto !important;
        height: 60%;
    }
}

@media (max-width:1441px) {
    .Drone-img {
        width: 100%;
    }
}

@media (max-width:1400px) {

    #calenderFlipCardMainDiv.slider-template img {
        max-height: 100%;
    }
}

/* ---------css for ipad pro--------- */

@media (max-width:1367px) {
    .portrait .ancient-scroll-wrapper {
        height: calc(100% - 270px);
        margin-top: 0;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .col-sm-6.col-md-6:first-child {
        height: 50%;
    }

    #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 {
        flex: 0 0 50%;
    }

    #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile_bg {
        flex: 0 0 37%;
    }

    .landscape .Drone-img-wrap {
        max-width: 299px;
        max-height: 60%;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
        width: auto !important;
    }

    #calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row {
        height: calc(100% - 27%);
    }

    #calenderFlipCardMainDiv .contentBox {
        height: calc(100% - 55px);
    }

    .landscape #calenderFlipCardMainDiv .Drone-ContentBox {
        height: calc(100% - 128px);
    }


    #calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
        /* height: calc(100% - 90px); */
    }

    /* #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row {
        width: 75%;
    } */

    #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap {
        /* width: 57% !important; */
        padding: 1%;
    }

    #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap img {
        max-height: 70%;
    }

    #calenderFlipCardMainDiv.envelope-template .contentBox {
        height: calc(100% - 55px);
    }
}

@media (max-width:1367px) and (min-width: 992px) and (orientation:landscape) {
    .landscape #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap {
        /* width: 35% !important; */
        padding: 1%;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row {
        width: 80%;
    }

    .landscape .Drone-ContentBox svg {
        left: 41px;
    }
}

@media (max-width:1200px) {
    .portrait .Drone-img {
        width: 80%;
    }

    .portrait .contentWord span {
        margin: 0 auto;
        width: 80%;
        font-size: 8vw;
        padding: 25px 10px;
        max-width: none;
    }

    .portrait .Drone-template .col-md-12 {
        width: 100%;
        animation-name: slideInLeft !important;
        height: 70%;
    }

    .portrait .Drone-template .col-md-12.contentWord {
        height: 30%;
        width: 100%;
    }

    .portrait .Drone-img-wrap {
        max-width: 620px;
    }

    .landscape .Drone-template .col-md-12 {
        width: 50%;
        z-index: 9;
    }

    .portrait .contentWord span:before,
    .portrait .contentWord span:after {
        display: none;
    }

    .portrait .contentWord.slideInDown {
        animation-name: none;
    }

    .portrait .contentBox {
        height: 80%;
    }

    .stringBottom {
        font-size: 20px;
    }

    .portrait .ancient-template #contentDiv {
        width: 90%;
    }

    .portrait .ancient-template #contentDiv {
        flex-direction: column;
        justify-content: space-around;
    }

    .portrait .ancient-template #contentDiv.textFirst {
        flex-direction: column-reverse;
    }

    .portrait .ancient-template .contentBox .ancientImageContainer {
        max-height: 70%;
        min-height: 70%;
        /* display:block !important; causes image align issue, so comment this css */
    }

    .portrait .ancient-template .contentBox .ancientImageContainer.ancientImageContainertwoWords {
        max-height: 60%;
        min-height: 60%;
    }

    .portrait .ancient-template .contentBox .col-lg-4 span {
        justify-content: center;
    }
    #flipping_leatherbook.flip-book2 .audio-text.stringBottom.zoomIn {
            padding: 4px 3px 8px;
        }
}

@media (min-width:992px) and (max-width:1024px) {

    /* added css only fob tb1 flipbook2(page flip) for ipad pro and ipad 2021  */
    .portrait .bookTemplate4 .textFirst .singlePageDiv.enlargeImgDivReq.page {
        background: linear-gradient(to top, #ebc400 65%, #abe385 35%) !important;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .textFirst .even {
        height: 35% !important;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .textFirst .odd {
        height: 65% !important;
    }

    /* end */

    .landscape .menuboard-template .contentarea .templatebox .template-word p {
        font-size: 4vw;
    }

    /* end  */
    .Drone-template {
        background-size: 130px, 100px, cover;
    }

    .contentBox {
        align-content: space-evenly;
    }

    .landscape .Drone-img {
        width: 100%;
        margin: 0px auto 0 auto;
    }

    .stringBottom {
        padding: 14px 0;
    }

    .landscape .contentWord span {
        font-size: 4.5vw;
        padding: 5px 26px;
    }

    .landscape .contentWord span:before,
    .landscape .contentWord span:after {
        width: 2px;
        left: 60px;
    }

    .landscape .contentWord span:after {
        right: 60px;
        left: auto;
    }

    /* css for slider-template */
    .landscape #calenderFlipCardMainDiv.slider-template .contentarea .templatebox {
        width: 90% !important;
    }

    .landscape #calenderFlipCardMainDiv.slider-template .contentarea .templatebox span.sentenceSpan {
        max-width: 80%;
    }

    .landscape #calenderFlipCardMainDiv.slider-template .right-btns-grp {
        position: static;
    }

    /* end */

    /* common css for other templates responsiveness on portrait */
    .portrait .common .contentBox {
        padding: 20px 0;
    }

    .portrait .common .contentarea .templatebox {
        width: 80%;
        padding: 6% 2%;
    }

    .portrait .common .contentarea .templatebox .template-word {
        margin: 15px 0;
    }

    .portrait .common .contentarea .templatebox .template-img {
        width: 100%;
    }

    .landscape .common .contentBox {
        padding: 20px 0;
    }

    .landscape .common .contentarea .templatebox {
        width: 80%;
        padding: 2%;
    }

    .landscape .common .contentarea .templatebox .template-img img {
        width: 90%;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
        width: auto !important;
        height: 40%;
        object-fit: contain;
        max-width: 100%;
    }

    .landscape .common .contentarea .templatebox .template-word {
        margin: 15px 0;
    }

    /* end */

    /* flipbook template css */
    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .odd,
    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .even {
        width: 100%;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .even {
        height: 60% !important;
        display: flex;
    }

    .portrait .bookTemplate4 .page,
    .portrait #flipping_leatherbook.flip-book2 {
        display: flex;
        background: linear-gradient(to bottom, #abe385 60%, #ebc400 30%);
        /* SL3-11757 iPad Pro 12 : Phonics : Page Flip : Colors of the sections are mixed up with each other. */
    }

    .portrait .bookTemplate4 .enlargeImgDivReq.page {
        display: flex;
        background: linear-gradient(to bottom, #abe385 35%, #ebc400 35%);
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .odd {
        height: 30% !important;
    }

    .portrait .flip-book2 .leather-book-page {
        display: flex;
    }

    .portrait .flip-book2 .bookTemplate4 .page {
        flex-direction: column;
    }

    .portrait .flip-book2 #flipbook-viewport .bookTemplate {
        max-width: 100%;
    }

    /* .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport .img_text {
        border: none !important;
    } */

    .landscape #flipping_leatherbook.flip-book2 #flipbook-viewport .bookTemplate {
        max-width: 100%
    }

    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4 .odd,
    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4 .even {
        height: calc(100% - 55px) !important;
    }

    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4#flipbook-viewport #flipbook_interactivity,
    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4#flipbook-viewport #flipbook_interactivity .flipbook,
    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4#flipbook-viewport #flipbook_interactivity .flipbook .page-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* end  */

    /* css dor ipad slider template  */
    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templatebox {
        max-height: 95% !important;
        height: 95%;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templeteouter .template-row {
        height: calc(100% - 30%);
    }

    /* end */
    /* space ship template css */
    .portrait #calenderFlipCardMainDiv.spaceship-template {
        background-size: cover !important;
        height: 100%;
        flex-wrap: initial;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
        width: 70%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox {
        padding: 8% 0;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row {
        flex-direction: column;
        flex-wrap: initial;
        height: calc(100% - 20%);
    }

    /*In TB1 show text image in reverse order */
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentBox {
        height: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .container-fluid {
        height: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .spaceshp {
        left: 5% !important;
        margin-left: 0 !important;
        bottom: 28%;
        background-size: 50%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomlight_clouds,
    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomheading_clouds {
        width: 100%;
        background-size: cover;
        right: 0;
        background-position: bottom center;
        background-repeat: no-repeat;
        height: 50vh !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
        width: 70%;
        margin: auto;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .responsive {
        width: 100%;
    }

    .portrait #spaceshipdiv .right-btns-grp {
        bottom: 25px;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word {
        margin: 1% 0 10px !important;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .spaceshp {
        bottom: 17vh !important;
        left: 23%;
        background-size: 30%;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .bottomlight_clouds,
    .landscape #calenderFlipCardMainDiv.spaceship-template .bottomheading_clouds {
        width: 100%;
        background-size: auto 35vh;
        right: 0;
        background-position: bottom center;
        background-repeat: no-repeat;
        height: 30vh !important;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
        width: 85%;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox {
        height: 100%;
    }

    .landscape #spaceshipdiv .right-btns-grp {
        bottom: 50px;
    }

    /* end */
    /* css for envelope css */
    .portrait #calenderFlipCardMainDiv.envelope-template .template-row .template-img {
        width: 100%;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
        border-radius: 8px;
    }

    /* end */
    /* menuboard template css  */
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img,
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-word {
        margin: 7px 0;
        /* padding: 7% 3% 20% 3%;
        height: 33vh; */
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .bird,
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .butterfly {
        width: 75px;
        height: 75px;
        top: 0px;
        left: 25%;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
        width: 30% !important;
        padding: 0px;
    }


    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox {
        padding: 0px;
        width: 100%;
    }

    /* .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row {
        height: auto;
    } */
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .bird,
    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .butterfly {
        top: -3px;
        left: 25px;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom {
        padding: 15px 7px !important;
        margin-bottom: 0px;
        max-width: 100%;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox {
        padding: 0px;
        width: 100%;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row {
        width: 80%;
    }

    /* end */
}

@media (max-width:1040px) {

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word,
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p:first-child,
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p,
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p span {
        color: #fff !important;
        text-shadow: 2px 2px 2px #000;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row.textFirst {
        flex-direction: column !important;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .textFirst p,
    .portrait #calenderFlipCardMainDiv.menuboard-template .textFirst span {
        height: 100% !important;
    }

    .portrait .fa-check-circle:after {
        display: none !important;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .col-sm-6.col-md-6,
    .portrait #calenderFlipCardMainDiv.envelope-template .col-sm-6.col-md-6 {
        width: 100%;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile_bg {
        padding-top: 10% !important;
        max-height: 20% !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word>p {
        color: #000 !important;
        text-shadow: none !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-row.textFirst .template-word>p {
        color: #fff !important;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile_bg .template-word {
        padding: 10px;
        max-height: none;
        background: #f1f1f2;
        width: 67%;
        min-height: auto;
    }

    /* only for tb1 */
    .portrait #root .textFirst .template-word {
        padding: 25px !important;
    }

    /* end */

    .portrait .Drone-template .droneContent {
        display: flex;
        width: 100%;
        height: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .portrait .Drone-template .droneContent.textFirst {
        flex-direction: column-reverse;
    }

    /* css added for menuboard new changes */
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile_bg svg {
        visibility: hidden;
    }

    .portrait #calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
        /* height: calc(100% - 176px); */
        justify-content: space-evenly;
    }

    .portrait #calenderFlipCardMainDiv.blackboard-template .contentarea .templeteouter .template-row {
        height: auto !important;
        justify-content: space-evenly;
        flex: 1;
        flex-direction: column;
    }

    .portrait #calenderFlipCardMainDiv.blackboard-template .contentarea .templeteouter .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait .interactivity .blackboard-template .audio-text .align-middle {
        height: auto !important;
    }

    .portrait #calenderFlipCardMainDiv.Drone1 .Drone-ContentBox {
        height: calc(100% - 30%);
        flex: 1;
    }

    #calenderFlipCardMainDiv .contentBox {
        height: calc(100% - 58px);
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentBox {
        height: calc(100% - 50px);
    }

    /* .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom .align-middle {
        height: 90px !important;
    } */

    .portrait .menuboard-template .contentarea .templatebox .col-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        max-height: 50%;
    }

    .landscape #calenderFlipCardMainDiv .Drone-ContentBox {
        height: calc(100% - 123px) !important;
    }

    .landscape body:has(.headerfull) #calenderFlipCardMainDiv.slider-template .contentBox {
        height: calc(100% - 100px) !important;
        margin-top: 0 !important;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templeteouter .template-row {
        height: calc(100% - 165px);
        flex-direction: column;
    }

    /*In TB1 show text image in reverse order */
    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templeteouter .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.slider-template.common .responsive {
        width: 100%;
        height: 65%;
    }
}

@media (max-width:991px) {
    /* Added for all carousel style activities word font size increase for lower end device for portrait */

    .portrait #calenderFlipCardMainDiv .contentarea .templatebox .template-word p span.txt,
    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .odd .pageDiv .pageSpan>span,
    .portrait #calenderFlipCardMainDiv .templatebox .template-word p,
    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .odd .pageDiv .pageSpan .wordCardDiv {
        font-size: 8vw !important;
        line-height: 90%;
    }

    .portrait.ancient-scroll-wrapper {
        width: 80%;
    }


    /* End */

    /* added css only fob tb1 flipbook2(page flip) for iphone pixel and ipad mini */
    .portrait .bookTemplate4 .textFirst .singlePageDiv.enlargeImgDivReq.page {
        background: linear-gradient(to top, #abe385 70%, #ebc400 30%) !important;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .textFirst .even {
        height: 30% !important;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .textFirst .odd {
        height: 70% !important;
    }

    /* end */

    /* Added CSS For SpaceShip Template Single Word Merging on Lower Height Devices */
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
        width: 75%;
        max-height: 95%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .responsive {
        max-height: 80% !important;
    }

    /* End */
    /* added css for SL3-9362*/
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img img {
        height: auto !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word>p {
        color: #000 !important;
    }

    /*In TB1 show text image in reverse order */
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-row.textFirst .template-word>p {
        color: #fff !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word p:first-child {
        text-shadow: none !important;
    }

    /* END */

    /* blackboard css for responsiveness */
    .landscape #calenderFlipCardMainDiv.blackboard-template .template-img {
        padding: 5px 0;
    }

    #calenderFlipCardMainDiv.blackboard-template .row.wow {
        margin-top: 0;
    }

    .landscape #calenderFlipCardMainDiv .contentarea .templeteouter .template-row .responsive {
        align-self: center !important;
    }

    #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .align-middle,
    #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom .align-middle {
        min-height: 45px;
    }

    .landscape #calenderFlipCardMainDiv.blackboard-template .templatebox {
        border-width: 10px;
        padding: 0px 0 10px 0;
    }

    .landscape #calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
        /* height: calc(100% - 65px); */
    }

    .landscape #calenderFlipCardMainDiv.blackboard-template .templatebox::after {
        height: 10px;
        width: 35px;
    }

    .landscape #calenderFlipCardMainDiv.blackboard-template .contentarea .templeteouter .template-row {
        /* height: calc(100% - 80px); */
    }

    .landscape #calenderFlipCardMainDiv.blackboard-template .templatebox .template-word p {
        font-size: 4vw;
    }

    /* end */

    /* css added for menuboard new changes */
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile_bg svg {
        visibility: hidden;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6.mobile_bg {
        padding-top: 10% !important;
        max-height: 23% !important;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom span.sentenceSpan {
        max-width: 60%;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .bottomheading_clouds {
        background-size: 100% 100% !important;
        height: 60% !important;
    }

    /* end */

    .Drone-template {
        background-size: 130px, 100px, cover;
    }

    */

    /* css for flipbook 2 template portrait view */
    .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport .audio-text .sentenceSpan {
        max-width: 58% !important;
    }

    /* end */

    .landscape #calenderFlipCardMainDiv.envelope-template .col-sm-6.col-md-6,
    .landscape #calenderFlipCardMainDiv.envelope-template .col-sm-6.col-md-6 {
        width: 50%;
    }

    .contentBox {
        align-content: space-evenly;
    }

    .portrait #calenderFlipCardMainDiv .Drone-ContentBox {
        height: calc(100% - 145px);
    }

    .portrait .Drone-img {
        margin: 20px auto 0 auto;
        height: calc(100% - 40px);
    }

    .portrait .interactivity #calenderFlipCardMainDiv.Drone-template .audio-text {
        margin: auto;
    }

    .landscape .Drone-img {
        width: 55%;
        margin: 0px auto 0 auto;
        height: 100%;
    }

    .landscape .Drone-img-wrap {
        max-width: 180px;
        max-height: 85%;
    }

    .stringBottom {
        padding: 14px 0;
    }

    .landscape .contentWord span {
        font-size: 4.5vw;
        padding: 5px 26px;
    }

    .landscape .ancient-template .contentBox .col-lg-4 span {
        justify-content: center;
    }

    .landscape .contentWord span:before,
    .landscape .contentWord span:after {
        width: 2px;
        left: 60px;
    }

    .landscape .contentWord span:after {
        right: 60px;
        left: auto;
    }

    /* css for common responsive on portrait */
    .portrait #calenderFlipCardMainDiv.common {
        height: 100%;
    }

    .portrait .common .contentBox {
        padding: 20px 0;
    }

    .portrait .common .contentarea .templeteouter .template-row {
        flex-direction: column;
        flex-wrap: initial;
    }

    /*In TB1 show text image in reverse order */
    .portrait .common .contentarea .templeteouter .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.common .container-fluid {
        justify-content: flex-start;
        height: 100%;
    }

    .portrait .common .responsive {
        width: 100%;
        height: 65%;
    }

    .portrait .common .contentarea .templatebox .template-img {
        width: 100%;
        height: 100%;
    }

    .portrait .common .contentarea .templatebox .col-6 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .landscape .common .contentBox {
        padding: 0;
    }

    .landscape .common .click-rating {
        margin: 8px 0 !important;
    }

    /* changed css for iphone 7 issue  */
    .landscape .common .contentarea .templatebox {
        width: 75%;
        height: 95%;
        padding: 1% 1.3%;
    }

    /* end */

    .landscape .common .contentarea .templatebox .template-img img {
        width: 90%;
    }

    .landscape .common .contentarea .templatebox .template-word {
        margin: 15px 0;
    }

    .landscape .envelope-template .contentarea .templatebox .template-img {
        height: 100%;
    }

    /* end */
    /* css for slider template */


    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templeteouter .template-row {
        height: calc(100% - 165px);
        flex-direction: column;
    }

    /*In TB1 show text image in reverse order */
    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templeteouter .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .contentBox {
        padding: 0 10px;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templeteouter {
        width: 100%;
        height: 100%;
        padding-bottom: 1%;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templatebox {
        width: 85% !important;
        margin: auto;
        max-height: 100% !important;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .arrow i {
        margin: auto;
    }

    /* slider template sentence collaspe issue on portrait device */
    .portrait #calenderFlipCardMainDiv.slider-template .contentBox .sentenceSpan {
        max-width: 50%;
    }

    /* end */

    .portrait #calenderFlipCardMainDiv.slider-template img {
        max-height: 90%;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-word p span.txt {
        margin-bottom: 25px;
    }

    .landscape #calenderFlipCardMainDiv.slider-template .contentBox {
        height: calc(100% - 50px) !important;
    }

    .landscape #calenderFlipCardMainDiv.slider-template .click-flip-next-nav {
        right: -5px;
    }

    .landscape #calenderFlipCardMainDiv.slider-template .contentarea .templatebox {
        border-radius: 20px;
        max-height: 95% !important;
        width: 80% !important;
    }

    /* end */

    /* flipbook template css */
    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .odd,
    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .even {
        width: 100%;
    }

    .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport .even img {
        max-width: 75% !important;
        border-width: 1.5px !important;
    }

    .landscape #flipping_leatherbook.flip-book2 #flipbook-viewport .img_text {
        height: auto !important;
        width: auto !important;
    }


    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .even {
        height: 55% !important;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .odd {
        height: auto !important;
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .audio-text .align-middle {
        height: auto !important;
    }

    .portrait .interactivity #flipping_leatherbook .bookTemplate4 .audio-text {
        position: static;
        max-height: 140px;
    }

    .portrait .interactivity #flipping_leatherbook .bookTemplate4 .audio-text.visibilityHidden {
        min-height: 0;
    }

    .portrait .bookTemplate4 .page,
    .portrait #flipping_leatherbook.flip-book2 {
        display: flex;
        background: linear-gradient(to bottom, #ebc400 55%, #abe385 45%);
    }

    .portrait #flipping_leatherbook.flip-book2 .odd .pageDiv {
        font-size: 6vw;
    }

    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .odd .pageDiv {
        font-size: 6vw;
    }

    .portrait .flip-book2 .leather-book-page {
        display: flex;
    }

    .portrait .flip-book2 .bookTemplate4 .page {
        flex-direction: column;
    }

    .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport.bookTemplate4 .textFirst.bookTemplate {
        max-height: calc(100% - 60px) !important;
    }

    .portrait .flip-book2 #flipbook-viewport .bookTemplate {
        max-width: 100%;
        max-height: calc(90% - 60px) !important;
    }

    .landscape #flipping_leatherbook.flip-book2 #flipbook-viewport .bookTemplate {
        max-width: 100%
    }

    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4 .odd,
    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4 .even {
        height: calc(100% - 70px) !important;
    }

    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4 .audio-text .align-middle {
        height: auto !important;
        min-height: 35px;
    }

    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4#flipbook-viewport #flipbook_interactivity,
    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4#flipbook-viewport #flipbook_interactivity .flipbook,
    .landscape #flipping_leatherbook.flip-book2 .bookTemplate4#flipbook-viewport #flipbook_interactivity .flipbook .page-wrapper {
        width: 100%;
        max-width: 100%;
    }

    /* end  */

    /* space ship template css */
    .portrait #calenderFlipCardMainDiv.spaceship-template {
        background-size: cover !important;
        height: 100%;
        flex-wrap: initial;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .responsive {
        height: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox {
        padding: 0 0 10px 0;
        align-items: flex-start;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
        width: 85%;
        margin: auto !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row {
        flex-direction: column;
        flex-wrap: initial;
        align-items: flex-start;
        justify-content: center;
        /*Surface Pro 4 : 912*1368 : Portrait : Phonics : Spaceship : Word is shown outside the clouds. */
    }

    /*In TB1 show text image in reverse order */
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentBox {
        height: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .container-fluid {
        height: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .spaceshp {
        left: 5% !important;
        margin-left: 0 !important;
        bottom: 31vh;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomlight_clouds,
    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomheading_clouds {
        width: 100%;
        background-size: auto 55vh;
        right: 0;
        background-position: bottom center;
        background-repeat: no-repeat;
        height: 55vh !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .responsive {
        width: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word {
        margin: 1% 0 10px !important;
    }

    .portrait .portraitFullWidth {
        width: 100%;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .spaceshp {
        bottom: 25vh;
        background-size: 20%;
        height: 25vh;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox {
        height: 100%;
    }

    .landscape #spaceshipdiv .right-btns-grp {
        bottom: 15px;
        transform: scale(0.75);
    }

    /* end */
    /* css for envelope css */
    .portrait #calenderFlipCardMainDiv.envelope-template .contentarea .templeteouter .template-row {
        margin: 0;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .contentarea .templeteouter .template-row.template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
        width: 100%;
        max-width: 70%;
        height: auto;
        border-radius: 8px;
    }

    .landscape #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .stringBottom {
        padding: 8px;
    }

    .landscape #calenderFlipCardMainDiv .contentBox {
        height: calc(100% - 47px);
    }

    .landscape #calenderFlipCardMainDiv .Drone-ContentBox {
        height: calc(100% - 99px);
    }

    .landscape #calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
        /* height: calc(100% - 95px); */
    }

    /* .landscape #calenderFlipCardMainDiv.slider-template .contentarea .templeteouter .template-row {
        height: calc(100% - 70px);
    } */
    .landscape #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
        max-height: 90%;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row {
        height: calc(100% - 77px);
    }

    .landscape #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap {
        /* width: 46% !important; */
        padding: 1%;
    }

    .landscape #calenderFlipCardMainDiv.envelope-template .template-row .template-img {
        width: 100%;
    }

    .landscape #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
        padding: 5px;
        border-radius: 8px;
    }

    .landscape #calenderFlipCardMainDiv.envelope-template .contentarea .templeteouter .template-row {
        margin: 0;
    }

    /* end */
    /* menuboard template css  */
    /* .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img,
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-word {
        min-height: 31vh;
        max-height: 31vh;
        margin: 7px 0;
        padding: 7% 3% 15% 3%;
    } */

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .bird,
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .butterfly {
        width: 40px;
        height: 40px;
        top: -8px;
        left: 35px;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
        width: auto !important;
        padding: 0 !important;
        max-width: 100%;
        max-height: 125px;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom {
        position: relative;
        max-width: 100%;
        /* flex: 1 1 100%; */
        padding: 10px;
        margin-bottom: 0px;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox {
        padding: 0px;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img,
    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-word {
        /* max-height: 100%;
        height: auto; */
        min-height: 152px;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .bird,
    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .butterfly {
        width: 22px;
        height: 22px;
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
        width: auto !important;
        height: 50% !important;
        /* object-fit: cover;
        max-width: 75px; */
    }

    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom {
        padding: 3px 7px !important;
        margin-bottom: 0px;
        max-width: 100%;
        flex: 1 1 100%;
    }


    .landscape #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox {
        padding: 0px;
    }

    .landscape .ancient-scroll-wrapper {
        height: calc(100% - 80px);
        width: 70%;
        margin-top: -30px;
    }

    .Drone-template.ancient-template .arrow.arrow-right,
    .Drone-template.ancient-template .arrow.arrow-left {
        width: 50px;
    }

    .Drone-template.ancient-template .arrow.arrow-left {
        left: -15px !important;
    }

    .Drone-template.ancient-template .arrow.arrow-right {
        right: -15px !important;
    }

    .ancient-template .audio-text img {
        bottom: 94%;
        width: 50px;
    }

    .portrait .Drone-img-wrap {
        max-width: 380px;
    }

    /* end */
}

@media (min-width:991px) and (max-height:570px) {

    .landscape #calenderFlipCardMainDiv.spaceship-template,
    .landscape #calenderFlipCardMainDiv.common {
        /* min-height: 430px; */
        overflow-y: auto;
    }

    .landscape #calenderFlipCardMainDiv.spaceship-template .container-fluid .spaceshp {
        bottom: 4vh !important;
        position: absolute;
    }
}

@media (max-width:767px) {

    /* moved to 767 from 991 as it was affecting ipad and surface too */
    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox span.sentenceSpan,
    .portrait #flipping_leatherbook.flip-book2 .audio-text.stringBottom span.sentenceSpan {
        font-size: 14px !important;
        max-width: 60% !important;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .contentarea .templatebox .template-word {
        flex-wrap: nowrap;
    }

    /* common solution for bottom sentence string height issue  */
    .portrait #calenderFlipCardMainDiv.common .audio-text.zoomIn .align-middle {
        min-height: 85px;
        height: auto !important;
    }

    .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport .audio-text .sentenceSpan {
        max-width: 59%;
    }

    /* end */
    /* balckboard design change for portrait */
    .portrait #calenderFlipCardMainDiv.blackboard-template .templatebox .common .contentarea .templatebox {
        border-width: 10px;
    }

    .portrait #calenderFlipCardMainDiv.blackboard-template .templatebox::after {
        height: 12px;
        width: 40px;
    }

    .portrait #calenderFlipCardMainDiv.blackboard-template .templatebox {
        border-width: 10px;
    }

    /* end */

    /* done some changes for iphone pixel portrait view  */
    .portrait div#calenderFlipCardMainDiv.Drone1 {
        height: 100% !important;
    }

    .portrait .Drone-template .container-fluid {
        height: 100%;
    }

    /* end  */
    .landscape .Drone-img {
        width: 55%;
        margin: 0px auto 0 auto;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .mobileWidth {
        width: 100%;
    }

    /* css for common temmplates for responsive on portrait */
    .portrait .common .contentBox {
        padding: 0 0 10px;
        height: 100%;
    }

    .portrait .Drone1 .Drone-ContentBox .contentWord span {
        padding: 1.5% 5%;
    }

    .portrait #calenderFlipCardMainDiv.slider-template .sentenceSpan {
        max-width: 60%;
    }

    .portrait .common .contentarea .templeteouter .template-row {
        flex-direction: column;
        flex-wrap: initial;
    }

    /*In TB1 show text image in reverse order */
    .portrait .common .contentarea .templeteouter .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row.textFirst {
        flex-direction: column-reverse;
    }

    .portrait .common .contentarea .templatebox {
        width: 75%;
        padding: 0 2% 5% 2%;
    }

    .portrait .common .contentarea .templatebox .col-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 85% !important;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 {
        flex: 0 0 100% !important;
        max-height: 73%;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentBox {
        height: calc(100% - 35px);
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img {
        height: 45vh;
        width: 70% !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-img img {
        height: auto !important;
        max-height: inherit !important;
        object-fit: contain !important;
        max-width: 100%;
    }

    .portrait .interactivity #calenderFlipCardMainDiv.spaceship-template .audio-text {
        margin: 0 !important;
    }

    /* end */
    /* space ship template css */
    .portrait #calenderFlipCardMainDiv.spaceship-template {
        background-size: cover !important;
        height: 100%;
        flex-wrap: initial;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templeteouter .template-row {
        flex-direction: column;
        flex-wrap: initial;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentBox {
        height: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .container-fluid {
        height: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .spaceshp {
        left: 5% !important;
        margin-left: 5% !important;
        bottom: 26vh;
        background-size: 32px;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomlight_clouds,
    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomheading_clouds {
        width: 100%;
        background-size: cover;
        right: 0;
        background-position: bottom center;
        background-repeat: no-repeat;
        height: 55vh !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomlight_clouds {
        background-size: auto 30vh;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .responsive {
        width: 100%;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .contentarea .templatebox .template-word {
        margin: 30px 0 05px;
    }

    /* end */
    /* css for envelope css */
    .portrait #calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
        /* height: calc(100% - 100px); */
    }

    .portrait .envelope-template .contentarea .templatebox .template-img {
        height: 24vh !important;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .contentBox {
        height: calc(100% - 43px);
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-img .envelope-wrap {
        width: 100% !important;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .contentarea .templatebox .template-word {
        width: 90%;
        height: auto;
        border-radius: 8px;
    }

    .portrait #calenderFlipCardMainDiv.envelope-template .col-sm-6.col-md-6.envelope_Height {
        height: auto;
    }

    /* end */
    /* menuboard template css  */
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img,
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-word {
        max-height: none !important;
        padding: 10px;
        margin: 7px 0;
        width: 60%;
        min-height: auto !important;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .bird,
    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .template-row .col-6 .butterfly {
        width: 40px;
        height: 40px;
        top: 0px;
        left: 35px;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-img img {
        width: auto !important;
        padding: 0 !important;
        height: 50% !important;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox .stringBottom {
        position: relative;
        max-width: 100%;
        /* flex: 1 1 100%; */
        padding: 0;
        margin: 0;
        font-size: 15px;
    }

    .portrait #calenderFlipCardMainDiv.menuboard-template .contentarea .templatebox {
        padding: 0px;
    }

    /* end */
}

@media (max-width:480px) {
    .portrait .Drone-img-wrap {
        max-width: 228px;
    }

    .portrait div#calenderFlipCardMainDiv.ancient-template {
        height: 100%;
    }
}

.spaceshipAnimation {
    animation: animateleft 1s;
    /* animation-duration: 2000ms; */
}

.spaceshiprocket {
    animation: launch 1s ease-out forwards;
    /* animation-delay: 200ms; */
}

.envelopAnimation {
    animation: launch 2s ease-out forwards;
}

/* iPhone X ----------- */

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
    .landscape #calenderFlipCardMainDiv.envelope-template .template-row .template-img {
        width: 83%;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
    .portrait .Drone-template .container-fluid {
        height: 80vh;
    }

    .portrait .Drone-img {
        margin: 10px auto 0 auto;
        height: calc(100% - 122px);
    }

    .portrait .Drone-img {
        width: 85%;
    }
}

/* iPhone 11 ----------- */
@media only screen and (device-width: 414px) and (device-height: 896px) and (orientation: landscape) {
    .landscape .Drone-img .Drone-fan {
        bottom: 97%;
    }

    .landscape .Drone-img {
        width: 60%;
    }

    .portrait .Drone-img .Drone-fan {
        bottom: 89%;
    }
}

/* Envelope Animation */

.envelope-new-animation {
    animation: envanimate 1s ease-out forwards;
}

@keyframes envanimate {
    0% {
        bottom: -100%;
        z-index: 99;
    }

    50% {
        bottom: 0;
        z-index: 1000;
    }

    100% {
        bottom: 0;
        z-index: 1000;
    }
}

.envelope-image-animation {
    animation: envimganimate 1s ease-out forwards;
}

@keyframes envimganimate {
    0% {
        max-height: 450px;
        /* height: 70%; */
        /*removed height as image was taking full height of parent div*/
        max-width: 100%;
        object-position: top;
        transform: scale(0.1);
    }

    50% {
        max-height: 450px;
        /* height: 70%; */
        /*removed height as image was taking full height of parent div*/
        max-width: 100%;
        object-position: top;
        transform: scale(0.5);
    }

    100% {
        max-height: 100%;
        /* height: 100%; */
        /*removed height as image was taking full height of parent div*/
        max-width: 100%;
        object-position: center;
        transform: scale(1);
    }
}

.envelope-template .template-img {
    position: relative;
}

.envelope-template .arrow i {
    z-index: 2099;
}


/* Menuboard  word font size for different size screens */

#calenderFlipCardMainDiv.menuboard-template .contentarea .templeteouter .templatebox .template-word {
    padding: 0;
    margin: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-56%);
    /* due to uneven shape of menuboard*/
}

@media (max-width:991px) and (orientation:landscape) {

    /* changed the css for https://bayatree.atlassian.net/browse/SL3-7571  */
    .common.menuboard-template .contentarea .templatebox .template-word p {
        font-size: 16px !important;
    }

    #calenderFlipCardMainDiv.blackboard-template .templatebox .template-row.textFirst {
        overflow: hidden;
    }

    /* end */

    /* .landscape #calenderFlipCardMainDiv .contentarea .templeteouter .template-row{
        max-height: 67% !important;
    } */
        .landscape #flipping_leatherbook.flip-book2 .right-btns-grp{
        right: 40px;
    }
}

@media (max-width: 1300px) {

    .portrait #calenderFlipCardMainDiv.common .contentarea .templatebox span.sentenceSpan,
    .portrait #flipping_leatherbook.flip-book2 .audio-text.stringBottom span.sentenceSpan,
    .portrait .ancient-template .audio-text {
        font-size: 28px;
    }
}

@media (max-width: 1023px) {

    .portrait #calenderFlipCardMainDiv.common .contentarea .templatebox span.sentenceSpan,
    .portrait #flipping_leatherbook.flip-book2 .audio-text.stringBottom span.sentenceSpan,
    .portrait .ancient-template .audio-text {
        font-size: 22px;
    }

    .landscape #calenderFlipCardMainDiv.blackboard-template .templatebox .template-row {
        /* max-height:53% !important; */
    }
}

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

    .portrait .flip-book2 #flipbook-viewport .bookTemplate {
        max-height: 100% !important;
    }  
    
    .portrait #flipping_leatherbook.flip-book2 .bookTemplate4 .even{
        height: 50% !important;
    }

    .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport .even img{
        max-height: 75% !important;
    }

    .portrait #calenderFlipCardMainDiv.common .contentarea .templatebox span.sentenceSpan,
    .portrait #flipping_leatherbook.flip-book2 .audio-text.stringBottom span.sentenceSpan,
    .portrait .ancient-template .audio-text {
        font-size: 15px;
    }

    .portrait #flipping_leatherbook.flip-book2 #flipbook-viewport .img_text {
        max-height: 67% !important;
    }

    .portrait .interactivity .blackboard-template .audio-text .align-middle .sentenceSpan {
        max-width: 77%;
        margin-left: 10px;
        margin-right: auto;
    }

    .portrait .Drone-template .col-md-12.contentWord {
        width: 80%;
    }
    .portrait #flipping_leatherbook.flip-book2 .right-btns-grp{
        right: 35px;
    }
    .portrait #flipping_leatherbook.flip-book2 .audio-text.stringBottom span.sentenceSpan{
        max-width:51% !important;
    }
}

.menuboardContainer {
    height: 100%;
}

.menuboardParent.layout-fill {
    overflow: visible;
}

.menuboardParent svg .menuboardImgStroke {
    filter: drop-shadow(0px 0px 2px #000);
}

.menuboard-template .click-rating {
    margin-bottom: 0 !important;
}

/* Drone template svg */
.Drone-ContentBox svg {
    transform: rotateZ(-9deg);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 75%;
    max-height: 97%;
    margin: auto;
}

.Drone-ContentBox svg .droneImgStroke {
    filter: drop-shadow(0 0 4px #000);
}

/* to make right word of flipbook 2 larger on devices */
/* commented css causing the same consistance  */
.flip-book2 .bookTemplate4 .pageSpan {
    font-size: 5vw !important;
}

/* end  */
#calenderFlipCardMainDiv .contentarea .templeteouter .template-row {
    overflow: auto;
}

#calenderFlipCardMainDiv.envelope-template .contentarea .templeteouter .template-row.template-row.textFirst {
    overflow: visible;
}

#calenderFlipCardMainDiv .contentarea .templeteouter .template-row .responsive {
    align-self: stretch;
}

#calenderFlipCardMainDiv.blackboard-template .contentarea .templeteouter .template-row .responsive {
    align-self: center;
}

/* to remove background animation from envelope template */
#calenderFlipCardMainDiv.Drone-template.envelope-template {
    animation: none !important;
}

/* to balance UI of spaceship for TB1 in portrait mode */
@media all and (orientation:portrait) {

    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomlight_clouds.textFirstBottomClouds,
    .portrait #calenderFlipCardMainDiv.spaceship-template .bottomheading_clouds.textFirstBottomClouds {
        height: 25vh !important;
        background-size: auto 25vh !important;
    }

    .portrait #spaceshipdiv .textFirst .portraitFullWidth .template-word p span {
        font-size: 40px !important;
    }

    .portrait #calenderFlipCardMainDiv.spaceship-template .spaceshp.textFirstspaceRocket {
        bottom: 8vh !important;
    }
}

#calenderFlipCardMainDiv.Drone-template .arrow.arrow-right.ancientArrow {
    z-index: 9;
}

#TbIntroPopupWindow {
    width: 100%;
}