body {
    background: #f7f7f7;
    overflow-x: hidden;
}

p {

    font-family: 'Montserrat Alternates', sans-serif;
}

h4 {
    font-family: 'Lilita One', cursive;

}

a {
    font-family: 'Montserrat', sans-serif;
}

li {
    font-family: 'Montserrat', sans-serif;
}

.header {
    width: 100%;
    background: #fff;
    height: 119px;
}

.navbar-brand img {
    width: 29%;
    margin-left: -14%;
}

.logo-content {
    position: relative;
    top: -99px;
    left: 55px;
    text-align: left;
}

.logo-content h4 {
    color: #222;
}

.navbar-nav > li > a {
    color: #222;
    font-size: 13px;
    font-weight: 300;
    text-transform: uppercase;
    text-shadow: none;
    line-height: 80px;

    letter-spacing: 0.5px;
    padding: 0 19px;
}

.navbar-nav > li > a:hover {
    /*color: linear-gradient(to right, rgb(0, 180, 219), rgb(0, 131, 176)) !important;*/
    background: none !important;
}

.navbar-nav {
    margin-top: 2%;
    margin-left: 11%;
}

.parallax-window {
    min-height: 350px;
    background: transparent;
    z-index: 1;
}


.home-content {
    margin-top: 4%;
    margin-left: 23%
}


.home-pic {
    margin-left: -8%;
    margin-bottom: 5%;
}

.home-pic img {
    height: 400px;
    width: 900px;
    padding-top: 20px;
}

.fristcon {
    margin-bottom: 11%;
    margin-top: 10%
}

.fristcon h4 {
    font-size: 30px;
    line-height: 2px;
}

.fristcon-1 {
    margin-bottom: 11%;
    margin-top: 5%;
    margin-left: -28%;
}

.fristcon-1 p {
    font-size: 20px;
    margin-top: -1%;
    font-weight: 300;
}

.content {
    margin-left: -4%;
}

.char-1 {
    padding-top: 77px;
}

.char-1 img {
    width: 100%;
}

.char-content {
    padding-top: 77px;
}

char-content-1 {
    padding-top: 77px;
}

.character-2 {
    position: relative;
    left: 32%;
    top: 50%;
}

.read-along {
    margin-top: 2%;
}

.read-image img {
    width: 80%;
}

.cartoon-image img {
    width: 68%;
    margin-left: 20%;
}

.Game-content {
    line-height: 2px;
    margin-top: 20%;
}

.Game-content h4 {
    font-size: 50px;
}

.app-image img {
    width: 85%;
}

.app-content {
    line-height: 2px;
    margin-top: 20%;
}

.app-content h4 {
    font-size: 40px;
}

.appscan-image img {
    width: 85%;
    margin-left: 16%;
    margin-top: 14%;
}

.introduction-image {
    margin-left: 39%;
    margin-top: 4%;
}

.introdcution {
    margin-top: 2%;
    line-height: 36px;
    font-size: 20px;
    text-align: center;
}




.introdcution-list {
    margin-top: 2%;
    line-height: 36px;
    font-size: 30px;
}


.introdcution-list li {
    font-size: 20px;
}

.social-icons {
    margin-left: 45%;
    margin-top: 5%;
}

.social-icons h4 {
    margin-left: 3%;
}

.social-icons ul {
    margin-left: -4%;
    margin-top: 2%;
}

.social-icons ul div {
    display: inline-block;
    list-style: none;
}

.facebook {
    border: 2px solid #3b5998;
    width: 8%;
    padding: 10px;
    margin-right: 28px;
    border-radius: 20px;
}

#fb {
    font-size: 20px;

}

#fb .fab {
    margin-left: 34%;
    color: #3b5998;
}


.twitter {
    border: 2px solid #55acee;
    width: 8%;
    padding: 10px;
    margin-right: 28px;
    border-radius: 20px;
}

#tw {
    font-size: 20px;
}

#tw .fab {
    margin-left: 23%;
    color: #55acee
}

.readpop {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}

.readcontent {
    height: 630px;
    width: 800px;
    position: absolute;
    top: 2%;
    left: 20%;
    background: #fff;
    border-radius: 20px;
}


.signs {
    margin-top: 67%;
}

.signlist li {
    display: inline-block;
    font-size: 24px;
    padding: 0 67px;
}



.redimg {
    position: absolute;
    top: 10%;
}

.redimg img {
    width: 60%;
    margin-left: 20%;
    margin-top: -6%;
}

.close-button {
    position: absolute;
    right: 6%;
    top: 4%;
    font-size: 20px;
}

.sub-but {
    background: #0299E3;
    color: #fff;
    transform: rotate(90deg);
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    position: fixed;
    top: 80%;
}


.subs-box img {
    width: 44%;
    margin-left: 27%;
}

.subs-box h4,
.subs-box input {
    margin-left: 15%;
    color: #fff;
}

.subs-box input {
    width: 65%;
    text-align: center;
}

.subs-box span {
    font-size: 12px;
    color: #fff;
}

.subs-box {
    background: #0299E3;
    height: 270px;
    width: 300px;
    position: fixed;
    top: 55%;
    left: 0%;
    display: none;
    z-index: 1;
}

.btn-submit {
    background: none;
    color: #fff;
    padding: 10px 20px;
    border: 1px solid;
    margin-left: 36%;
    margin-top: 14px;
}

.cartoon-video {
    cursor: pointer;
}

.vid {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
}

iframe {
    position: absolute;
    top: 30%;
    left: 30%;
}

@media (max-width: 1024px) {
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

    .navbar-nav > li {
        float: none;
    }

    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }

    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .collapse {
        overflow: hidden !important;
    }
}


@media only screen and (min-width: 1366px) {
    .mobile-wallpaper {
        display: none
    }

    .land-msg {
        display: none
    }
}

/*media quries*/
/*iphone 6/7/8 potrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    .parallax-window {
        display: none;

    }

    .header {
        width: 100%;
    }

    .mobile-wallpaper img {
        width: 100%;
        height: 156px;
    }

    .navbar-toggle {
        margin: 12% 3%;
    }

    .navbar-toggle span {
        border: 1px solid #232323;
    }

    .logo-content {
        display: none;
    }

    .navbar-brand img {
        width: 61%;
        margin-left: -12%;
        margin-top: -6%;
    }

    .navbar-collapse {
        background: #fff;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .navbar-nav {
        margin-left: -5%;
    }

    .navbar-nav > li > a {
        font-size: 20px;
    }

    .fristcon {
        margin-top: 13%;
        margin-left: -10%;
        margin-bottom: 24%;
    }

    .fristcon-1 {
        text-align: center;
        margin-left: -37%;
    }

    .home-pic img {
        width: 310px;
        height: 200px;
        margin-left: -25%;
    }

    .social-icons {
        margin-left: 34%;
    }

    .facebook {
        width: 26%;
        margin-left: -14%;

    }

    .twitter {
        width: 26%;
    }

    .introduction-image {
        margin-left: 18%;
    }

    .character-2 {
        position: relative;
        left: 1px;
    }

    .char-content {
        padding-top: 23px;
    }

    .read-content {
        padding-top: 29px;
        padding-bottom: 29px;
    }

    .read-image img {
        width: 100%;
    }

    .cartoon-image {
        margin-top: 4%;
    }

    .cartoon-image img {
        width: 100%;
        margin-left: 1%;
    }

    .Game-content {
        padding-bottom: 20px;
    }

    .app-image {
        margin-bottom: -41%;
    }

    .app-content {
        text-align: center;
    }

    .appscan-image {
        margin-left: 2%;
        padding-right: 40px;
    }

    .readcontent {
        height: 600px;
        width: 360px;
        margin-left: -18%;
    }

    .redimg img {
        width: 99%;
        margin-left: 1%;
        margin-top: 1%;
    }

    .signs {
        margin-top: 114%;
    }

    #left-btn {
        position: relative;
        top: 125px;
    }

    #right-btn {
        position: relative;
        top: 27px;
        left: 127px;
    }

    #read-audio {
        position: relative;
        left: -62px;
    }

}

/*iphone 6/7/8 landscpe*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    #land-block {
        display: none;
    }

    .land-msg {
        border: 2px solid #00B4DB;
        padding: 33px 65px;
        width: 50%;
        transform: translate(45%, 130%)
    }
}


/*iphone5/SE*/
@media only screen and (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

    .parallax-window {
        display: none;

    }

    .mobile-wallpaper img {
        width: 100%;
        height: 154px;
    }

    .navbar-toggle {
        margin: 12% 3%;
    }

    .navbar-toggle span {
        border: 1px solid #232323;
    }

    .logo-content {
        display: none;
    }

    .navbar-brand img {
        width: 61%;
        margin-left: -12%;
        margin-top: -6%;
    }

    .navbar-collapse {
        background: #fff;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .navbar-nav {
        margin-left: -5%;
    }

    .navbar-nav > li > a {
        font-size: 20px;
    }

    .fristcon {
        margin-top: 13%;
        margin-left: -19%;
        margin-bottom: 24%;
    }

    .fristcon-1 {
        text-align: center;
        margin-left: -37%;
    }

    .home-pic img {
        width: 310px;
        height: 200px;
        margin-left: -34%;
    }

    .social-icons {
        margin-left: 28%;
    }

    .facebook {
        width: 26%;
        margin-left: -14%;

    }

    .twitter {
        width: 26%;
    }

    .introduction-image {
        margin-left: 18%;
    }

    .character-2 {
        position: relative;
        left: 1px;
    }

    .char-content {
        padding-top: 23px;
    }

    .read-content {
        padding-top: 29px;
        padding-bottom: 29px;
    }

    .read-image img {
        width: 100%;
    }

    .cartoon-image {
        margin-top: 4%;
    }

    .cartoon-image img {
        width: 100%;
        margin-left: 1%;
    }

    .Game-content {
        padding-bottom: 20px;
        margin-left: 20%;
    }

    .app-image {
        margin-bottom: -41%;
    }

    .app-content {
        text-align: center;
    }

    .appscan-image {
        margin-left: 2%;
        padding-right: 40px;
    }

    .readcontent {
        height: 520px;
        width: 306px;
        margin-left: -18%;
    }

    .redimg img {
        width: 99%;
        margin-left: 1%;
        margin-top: 1%;
    }

    .signs {
        margin-top: 114%;
    }

    #left-btn {
        position: relative;
        top: 125px;
        left: -55px;
    }

    #right-btn {
        position: relative;
        top: 27px;
        left: 127px;
    }

    #read-audio {
        position: relative;
        left: -101px;
    }
}


/*iphone 5 landscape*/
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    #land-block {
        display: none;
    }

    .land-msg {
        border: 2px solid #00B4DB;
        padding: 33px 65px;
        width: 50%;
        transform: translate(52%, 84%);
    }
}


/*iphone 6/7/8 plus potrait*/
@media only screen and (max-device-width: 414px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .parallax-window {
        display: none;

    }

    .header {
        width: 100%;
    }

    .mobile-wallpaper img {
        width: 100%;
        height: 156px;
    }

    .navbar-toggle {
        margin: 12% 3%;
    }

    .navbar-toggle span {
        border: 1px solid #232323;
    }

    .logo-content {
        display: none;
    }

    .navbar-brand img {
        width: 61%;
        margin-left: -12%;
        margin-top: -6%;
    }

    .navbar-collapse {
        background: #fff;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .navbar-nav {
        margin-left: -5%;
    }

    .navbar-nav > li > a {
        font-size: 20px;
    }

    .fristcon {
        margin-top: 13%;
        margin-left: -10%;
        margin-bottom: 24%;
    }

    .fristcon-1 {
        text-align: center;
        margin-left: -37%;
    }

    .home-pic img {
        width: 343px;
        height: 217px;
        margin-left: -25%;
    }

    .social-icons {
        margin-left: 34%;
    }

    .facebook {
        width: 26%;
        margin-left: -14%;

    }

    .twitter {
        width: 26%;
    }

    .introduction-image {
        margin-left: 18%;
    }

    .character-2 {
        position: relative;
        left: 1px;
    }

    .char-content {
        padding-top: 23px;
    }

    .read-content {
        padding-top: 29px;
        padding-bottom: 29px;
    }

    .read-image img {
        width: 100%;
    }

    .cartoon-image {
        margin-top: 4%;
    }

    .cartoon-image img {
        width: 100%;
        margin-left: 1%;
    }

    .Game-content {
        padding-bottom: 20px;
    }

    .app-image {
        margin-bottom: -41%;
    }

    .app-content {
        text-align: center;
    }

    .appscan-image {
        margin-left: 2%;
        padding-right: 40px;
    }

    .readcontent {
        height: 632px;
        width: 396px;
        margin-left: -18%;

    }

    .redimg img {
        width: 99%;
        margin-left: 1%;
        margin-top: 1%;
    }

    .signs {
        margin-top: 114%;
    }

    #left-btn {
        position: relative;
        top: 125px;
    }

    #right-btn {
        position: relative;
        top: 27px;
        left: 147px;
    }

    #read-audio {
        position: relative;
        left: -62px;
    }
}


/*iphone 6/7/8 plus*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
    #land-block {
        display: none;
    }

    .land-msg {
        border: 2px solid #00B4DB;
        padding: 33px 78px;
        width: 50%;
        transform: translate(55%, 159%);
    }
}


/*iphone x potrait*/
@media only screen and (max-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .parallax-window {
        display: none;

    }

    .header {
        width: 100%;
    }

    .mobile-wallpaper img {
        width: 100%101;
        height: 156px;
    }

    .navbar-toggle {
        margin: 12% 3%;
    }

    .navbar-toggle span {
        border: 1px solid #232323;
    }

    .logo-content {
        display: none;
    }

    .navbar-brand img {
        width: 61%;
        margin-left: -12%;
        margin-top: -6%;
    }

    .navbar-collapse {
        background: #fff;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .navbar-nav {
        margin-left: -5%;
    }

    .navbar-nav > li > a {
        font-size: 20px;
    }

    .fristcon {
        margin-top: 13%;
        margin-left: -10%;
        margin-bottom: 24%;
    }

    .fristcon-1 {
        text-align: center;
        margin-left: -37%;
    }

    .home-pic img {
        width: 135%;
        height: 217px;
        margin-left: -33%;

    }

    .social-icons {
        margin-left: 34%;
    }

    .facebook {
        width: 26%;
        margin-left: -14%;

    }

    .twitter {
        width: 26%;
    }

    .introduction-image {
        margin-left: 18%;
    }

    .character-2 {
        position: relative;
        left: 1px;
    }

    .char-content {
        padding-top: 23px;
    }

    .read-content {
        padding-top: 29px;
        padding-bottom: 29px;
    }

    .read-image img {
        width: 100%;
    }

    .cartoon-image {
        margin-top: 4%;
    }

    .cartoon-image img {
        width: 100%;
        margin-left: 1%;
    }

    .Game-content {
        padding-bottom: 20px;
    }

    .app-image {
        margin-bottom: -41%;
    }

    .app-content {
        text-align: center;
    }

    .appscan-image {
        margin-left: 2%;
        padding-right: 40px;
    }

    .readcontent {
        height: 632px;
        width: 355px;
        margin-left: -18%;
        margin-top: 16%;
    }

    .redimg img {
        width: 99%;
        margin-left: 1%;
        margin-top: 1%;
    }

    .signs {
        margin-top: 114%;
    }

    #left-btn {
        position: relative;
        top: 143px;
        left: -22px;
    }

    #right-btn {
        position: relative;
        top: 48px;
        left: 147px;
    }

    #read-audio {
        position: relative;
        left: -79px;
    }
}


/*iphone x landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
    #land-block {
        display: none;
    }

    .land-msg {
        border: 2px solid #00B4DB;
        padding: 33px 101px;
        width: 50%;
        transform: translate(50%, 135%);
    }
}


/*ipad potrait*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {

    .mobile-wallpaper {
        display: none;
    }

    .header {
        height: 161px;
    }

    .logo-content {
        position: relative;
        top: -104px;
        left: 102px;
    }


    .navbar-nav > li > a {
        font-size: 20px;
    }

    .navbar-collapse {
        background: #fff;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .nav > li > a {
        font-size: 30px;
    }

    .navbar-toggle {
        margin: 7% 5%;
    }

    .navbar-toggle span {
        border: 1px solid #232323;
    }

    .navbar-brand img {
        width: 44%;
    }

    .fristcon {
        margin-left: 16%;
    }

    .fristcon h4 {
        font-size: 30px;
    }

    .fristcon-1 {
        margin-left: -40%;
        text-align: center;
    }

    .home-pic img {
        width: 100%;
        margin-left: -19%;
    }

    .social-icons {
        margin-left: 35%;
    }

    .social-icons h4 {
        font-size: 30px;
    }

    .facebook {
        width: 26%;
        margin-left: -9%;
    }

    .twitter {
        width: 26%;
    }

    #fb .fab {
        margin-left: 41%;
    }

    #tw .fab {
        margin-left: 41%;
    }

    .nav-justified > li {
        display: block !important;
        width: 100%;
    }

    .char-content {
        font-size: 20px;
    }

    .character-2 {
        position: relative;
        left: 1%;
    }

    .read-content {
        margin-left: 12%;
        margin-bottom: 6%;
    }

    .read-content h4 {
        font-size: 32px;
    }

    .read-image img {
        margin-left: 10%;
    }

    .Game-content {
        margin-bottom: 9%;
        margin-left: 28%;
        margin-top: 4%;
    }

    .app-image {
        margin-bottom: -41%;
    }

    .app-content {
        text-align: center;
    }

    .appscan-image {
        margin-left: 2%;
        padding-right: 40px;
    }

    .readcontent {
        height: 630px;
        width: 98%;
        margin-left: -19%;
        margin-top: 21%;
    }

    #left-btn {
        position: relative;
        top: -17px;
        left: -8px;
    }

    #right-btn {
        position: relative;
        top: -50px;
        left: 524px;
    }

    #read-audio {
        position: relative;
        left: -33px;
    }
}

/*ipad landscape*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {

    .parallax-window {
        width: 100%;
    }

    .mobile-wallpaper {
        display: none;
    }

    .header {
        height: 161px;
    }

    .logo-content {
        position: relative;
        top: -104px;
        left: 102px;
    }


    .navbar-nav > li > a {
        font-size: 20px;
    }

    .navbar-collapse {
        background: #fff;
        position: relative;
        text-align: center;
        z-index: 1;
    }

    .nav > li > a {
        font-size: 30px;
    }

    .navbar-toggle {
        margin: 7% 5%;
    }

    .navbar-toggle span {
        border: 1px solid #232323;
    }

    .navbar-brand img {
        width: 44%;
    }

    .fristcon {
        margin-left: -21%;
    }

    .fristcon h4 {
        font-size: 30px;
    }

    .fristcon-1 {
        margin-left: -102%;
        text-align: center;
    }

    .home-pic img {
        width: 100%;
        margin-left: -179px;
    }

    .social-icons {
        margin-left: 40%;
    }

    .social-icons h4 {
        font-size: 30px;
    }

    .facebook {
        width: 26%;
        margin-left: -9%;
    }

    .twitter {
        width: 26%;
    }

    #fb .fab {
        margin-left: 41%;
    }

    #tw .fab {
        margin-left: 41%;
    }

    .char-content {
        font-size: 20px;
    }

    .character-1 {
        position: relative;
        left: -2%;
    }

    .character-2 {
        position: relative;
        left: 25%;
    }

    .read-content {
        margin-left: 12%;
        margin-bottom: 6%;
    }

    .read-content h4 {
        font-size: 32px;
    }

    .read-image img {
        margin-left: 10%;
    }

    .Game-content {
        margin-bottom: 9%;
        margin-left: 28%;
        margin-top: 30%;
    }

    .app-image {
        margin-bottom: -41%;
    }

    .app-content {
        text-align: center;
    }

    .appscan-image {
        margin-left: 2%;
        padding-right: 40px;
    }

    .readcontent {
        margin: 4% -9%;
    }
}

@media only screen and (min-device-width: 812px) and (max-device-width: 1023px) and (-webkit-min-device-pixel-ratio: 3) {
    .land-msg {
        border: 2px solid #00B4DB;
        padding: 33px 101px;
        width: 50%;
        transform: translate(50%, 135%);
    }

    #land-block {
        display: none;
    }
}