/* ----- banner_slider css ----- */

.landscape-slider {
    display: block;
}

.portrait-slider {
    display: none !important;
}

.contain-slider {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.slider-leftbtn {
    margin: 120% auto;
    margin-left: -40%;
}

.slider-rightbtn {
    margin: 120% auto;
    margin-right: -40%;
}

.img-slider>div>img {
    width: 100%;
}

.glyphicon-menu-down {
    display: none !important;
    margin-top: 20px;
    font-size: 30px;
    color: #fff;
    text-shadow: 0px 3px 5px rgba(50, 50, 50, 1);
}


/* ----- /banner_slider css ----- */


/* ----- our_products css ----- */

.product-header {
    margin: 40px auto;
    padding-top: 10px;
    font-weight: bold;
}

.product-pog {
    background: url("../images/pog-banner.png") no-repeat center;
    border-right: 1px solid #fff;
    background-size: cover;
}

.product-pog .age-group {
    position: absolute;
    left: -25px;
    top: -5px;
}

.product-pmc .age-group {
    position: absolute;
    left: -13px;
    top: -11px;
}

.product-pmc {
    background: url("../images/pmc-banner.png") no-repeat center;
    border-left: 1px solid #fff;
    background-size: cover;
}

.product-pog,
.product-pmc {
    color: white;
    font-family: 'Rubik-Regular';
    height: 470px;
    padding: 100px 100px;
    font-size: 18px !important;
    line-height: 30px;
}

.product-pog>a,
.product-pmc>a {
    color: white !important;
    text-decoration: underline;
}

.product-pog>a:hover,
.product-pmc>a:hover {
    color: white;
    text-decoration: none;
}

.pog-landscape,
.pmc-landscape {
    display: block;
}

.pog-portrait,
.pmc-portrait {
    display: none !important;
}

.modal {
    overflow-y: scroll !important;
}

#POGModal>.modal-dialog,
#PMCModal>.modal-dialog {
    width: auto;
    margin: 50px 50px;
}

#POGModal .modal-content,
#PMCModal .modal-content {
    background: #261758;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    border: none;
}

#POGModal .modal-header,
#PMCModal .modal-header {
    background: #f2f2f2;
    padding: 0px;
    border: none;
}

.close-btn {
    position: absolute;
    top: 18px;
    right: 14px;
}

#POGModal .modal-body,
#PMCModal .modal-body {
    text-align: center;
    padding: 20px 10px;
    color: #fff;
    font-family: 'Rubik-light';
}

.pog-body a,
.pmc-body a {
    color: #fff;
    text-decoration: underline;
}

#POGModal .modal-body a:hover,
#PMCModal .modal-body a:hover {
    color: white;
    text-decoration: none;
}

.play-store:hover {
    opacity: 0.7;
}

.POGModal,
.PMCModal {
    padding: 0px !important;
}


/* ----- /our_products css ----- */


/* ----- kids-banner css ----- */

.kids-header {
    margin: 40px auto;
    padding-top: 10px;
    font-weight: bold;
}

.kids-banner {
    background: url(../images/footer-banner.jpg) no-repeat center;
    background-size: cover;
}

.banner-content {
    font-family: 'Rubik-Regular';
    text-align: center;
    margin-top: 250px;
    padding: 0px 25px 20px 25px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.75);
    font-weight: bold
}

.banner-content>p {
    margin-right: 200px;
    margin-left: 200px;
}

.believe-list {
    font-family: 'Rubik-Regular';
    padding: 20px;
    float: left;
    color: #fff;
    height: 280px;
}

.believe-list img {
    margin: 20px auto;
}


/* ----- /kids-banner css ----- */


/* ----- page_footer css ----- */

.page-footer {
    background-color: #2d2e33;
}

.page-footer a {
    margin: 20px 24px;
}

.page-footer .contact {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.social-media {
    color: #fff;
    padding: 110px 20px 80px 20px;
    text-align: center;
}

.fa {
    color: #2d2e33;
    background: white;
    padding: 10px;
    font-size: 25px;
    width: 45px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 50%;
}

.fa:hover {
    text-decoration: none;
}

.fa-facebook:hover {
    background: #3B5998;
    color: white;
}

.fa-twitter:hover {
    background: #55ACEE;
    color: white;
}

.fa-linkedin:hover {
    background: #007bb5;
    color: white;
}


/* ----- /page_footer css ----- */


/* ----- mobile_view css ----- */

@media only screen and (max-width: 425px) and (orientation:portrait) {
    .landscape-slider {
        display: none !important;
    }
    .portrait-slider {
        display: block!important;
    }
    .pog-landscape,
    .pmc-landscape {
        display: none !important;
    }
    .pog-portrait,
    .pmc-portrait {
        display: block !important;
    }
    .slider-leftbtn,
    .slider-rightbtn {
        display: none;
    }
    .glyphicon-menu-down {
        display: block !important;
        animation: bounce 2s infinite;
    }
}

@media only screen and (max-width: 425px) {
    /* ----- product css ----- */
    .product-header {
        margin: 40px auto;
        padding-top: 0px;
    }
    .product-pog,
    .product-pmc {
        font-size: 16px;
        padding: 60px 20px;
        background-size: cover;
    }
    .product-pog {
        border-bottom: 1px solid #fff;
        border-right: none;
    }
    .product-pmc {
        border-top: 1px solid #fff;
        border-left: none;
    }
    #POGModal>.modal-dialog,
    #PMCModal>.modal-dialog {
        width: auto;
        margin: 10px 10px;
    }
    #POGModal .modal-body a,
    #PMCModal .modal-body a {
        font-size: 18px;
    }
    /* ----- product css ----- */
    .believe-list {
        height: 100% !important;
    }
    .page-footer a {
        margin: 10px 10px;
    }
    .banner-content {
        font-weight: normal;
        padding: 0px 15px 10px 15px;
    }
}


/* ----- /mobile_view css ----- */


/* ----- tab_view css ----- */

@media only screen and (max-width: 768px) {
    .product-pog,
    .product-pmc {
        padding: 100px 20px;
        background-size: cover;
    }
    .believe-list {
        height: 270px;
    }
    
}


/* ----- /tab_view css ----- */

@media only screen and (max-width: 1024px) {
    .believe-list {
        height: 290px;
    }
    .banner-content>p {
        margin-right: 0px;
        margin-left: 0px;
    }
}