@media (max-width: 767px) {
	.starting-third-grp .pad-left-50{
        padding-left: 0;
    }
    .story-video {
        margin-bottom: 20px;
    }
    .top-nav{
        background-color: rgb(13,31,66);
    }
    .starting-third-grp .pad-left-30{
        padding-left: 0;
    }
    .text-indent-box{
        display: inline-block;
        width: calc(100% - 50px);
    }
    .blue-number{
        float: left;
    }
    .video-section-main h1 {
        font-size: 36px;
        text-align: center;
        margin-top: 25vmin;
    }
    .top-nav li.space {
        display: none
    }
    .logout-wrapper{
        border-bottom: 0 none;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 61px;
    }
    /*        .top-nav{
                position: absolute;
            }*/
    .story-video .vidyard_player> span{
        width: 100% !important;
/*        height: 166px !important;*/
    }
    .story-video .vidyard_player{
        display: block;
    }
    
    .top-nav li a {
        color: #fff;
        display: block;
        text-shadow: 0 -1px 3px rgba(0,0,0,0.75);
        padding: 12px;
        line-height:26px;
        font-size: 18px;
    }
    .top-nav li:not(:last-of-type) a {
        /*		border-bottom: 1px solid #000;*/
        -moz-box-shadow: 1px 1px rgba(255,255,255,0.1);
        -webkit-box-shadow: 1px 1px rgba(255,255,255,0.1);
        box-shadow: 1px 1px rgba(255,255,255,0.1)
    }
    .top-nav ul li.drop-down-parent > .drop-down {
        background: transparent;
        box-shadow: none;
        border: 0
    }
    .top-nav ul li.drop-down-parent > .drop-down:after {
        display: none
    }
    .top-nav .navbar-brand {
        width: 255px;
        padding-top: 0;
        padding-bottom: 8px;
    }
    .top-nav .navbar-toggle{float: right; margin-top: 20px;}
    .top-banner {
        display: block;
        height: 180px;
    }

    .top-banner.faq-page, .top-banner.faq-page.short-banner {
        min-height: 180px;
        max-height: 220px;
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
            background-attachment: inherit;
    }
    .big-view {
        line-height: 40px
    }
    .top-banner.faq-page .page-heading {
        /*margin-top: 10%;
        margin-bottom: 10%;*/
        font-size: 26px;
        text-transform: uppercase;
        margin-top: 32px;
    }

    .top-banner .page-heading {
        /*margin-top: 50%; */               
        font-size: 40px;
        text-transform: uppercase;

    }
    .top-banner.slider-col .carousel-inner .item .carousel-caption {
        top: 32%;
        width: auto;
        left: 15px;
        right: 15px;
    }

    .top-banner.slider-col .carousel-inner .item .carousel-caption h3 {
        font-size: 30px
    }
    .top-banner.slider-col .carousel-inner .item .carousel-caption h3 strong {
        font-size: 30px
    }
    .top-banner.slider-col {
    height: calc(100vh - 167px);
}
    .top-banner.slider-col .carousel-inner .item .carousel-caption p {
        font-size: 16px;
        margin-bottom: 40px;
        width: 100%;
    }
    .services .flex-view [class*="area-"] {
        width: 100%;
        height: auto;
    }
    .services .flex-view .area-color {
        height: 380px;
    }
    .services .flex-view.pages [class*="area-"] h2 {
        font-size: 30px;
        line-height: 36px
    }
    .center-heading h4 {
        font-size: 30px
    }
    .center-heading h5 {
        font-size: 18px
    }
    .about-section .flex-view .about-img {
        width: 100%;
        min-height: 400px
    }
    .about-section .flex-view .about-content {
        margin-left: 0;
        width: 100%
    }
    .footer {
        text-align: center;
        padding-bottom: 10px;
    }
    .footer .row .footer-text{font-size: 10px;}
    .footer img {
        margin-top: 10px;
        margin-bottom: 0px; 
        width:200px;
    }
    .page-wrapper {
        padding-bottom: 147px;
        padding-top: 68px;
    }
    .flex-row .marginbottom80{
        margin-bottom: 30px;
    }
    footer .float-right{text-align:center;}

    .login-area .login-form {
        margin-top: 20px;
        margin-bottom: 100px;
    }
    .login-area .login-form .form-content {
        padding-top: 50px
    }
    .login-area .login-form .form-content h2 {
        font-size: 48px
    }
    .login-area .login-form .form-value {
        padding-left: 15px;
        padding-right: 15px
    }
    .login-area .login-form .form-value .btn-wrap {
        padding-bottom: 50px
    }
    /*================================sample-lesson page=======================*/
    .inner-banner .page-heading{
        font-size:24px;
        margin-bottom:36px;
    }
    .lesson-section .blockquote-col{
        padding:0;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .video-section iframe{
        height:164px;

    }
    .lession-content {
        padding-top: 20px;
    }
    .inner-heading{
        font-size:24px;
    }
    .blockquote-col2{
        font-size: 20px;
        line-height: 24px;
        padding: 10px 0px;
    }
    .list-content{
        padding: 20px 0px 20px 16px;
    }
    .list-content li{
        font-weight: 600;
        font-size: 15px;
        color: #636363;
        position: relative;
        margin-bottom: 8px;
    }
    .text-wrapper img{
        width:100%;
        max-width: 55px;
    }
    .top-banner.slider-col  .fa-chevron-left:before{
        display:none;
    }
    .top-banner.slider-col  .fa-chevron-right:before {
        display:none;
    }
    .l-sec{
        width:67px;
        font-size:10px;
        padding-top:0px;
        float:none;
        padding-left:0px;
        padding-top:0px;
    }
    .r-sec{
        width:120px;
        font-size:10px;
        padding-top:0px;
        float:none;
        text-overflow: ellipsis;
        padding-right:0px;

        /* Required for text-overflow to do anything */
        white-space: nowrap;
        overflow: hidden;

    }
    /*
    .faq-page {
     background-size: auto 100%;
     height: 320px;
     }
    */
    /*============================lesson-page===============================*/
    .lesson_heading{font-size:25px;}
    .lesson_background_text{margin-bottom:30px;display: inline-block;}
    .pad-15{padding:0px 15px;}
    .lesson_nav_box{padding-bottom:40px;}
    .group-banner-page{height:100%;}
    .staff-page{padding-bottom: 19px;padding-top: 5px;}
    .staff-page .sub-heading{font-size: 33px;font-weight: 600;line-height: 26px;}
    .staff-page span.sub-title{font-size: 19px;line-height: 19px;}
    .staff-content .flex-view.pages [class*="area-"]{width:100%;}
    .staff-content .flex-view.pages [class*="area-"]:nth-child(3n){margin-right:20px;}
    .padding-l-0 {padding-left:15px;}
    .padding-l-30{padding-left:0px;}

    .m-b-10{
        margin-bottom:10px;
    }
    .panel-heading span.drop-bg {
        margin-top: 4px;
    }
    #about-head .inner-heading{font-size:23px}
    .services .flex-view .area-color .content-slider .carousel-indicators{padding: 5px 2px 4px 0;}

    .line-col{margin-bottom: 49px;margin-top: 0;}
    .pagination a, .pagination .current{font-size: 14px; padding: 8px 10px;}
    .pagination{width:300px;    left: calc(50% - 150px) !important;}
    /*.line-col .pagination{top: -11px;}*/
    .panel-default > .panel-heading{padding:10px 15px}
    .about-section{height:auto;}
    .top-banner.slider-col .control-wrap{display:none;}
    .bread-crum-section {
        padding-bottom: 0;
    }
    .paggination-wrapper li a{font-size: 14px;font-weight: 800;margin-bottom: 20px;padding: 0 0;}
    .paggination-wrapper li{
        display: inline-flex;

    }
    .paggination-wrapper.navbar-nav{
        margin:0px;

    }
    .lesson_box {

        padding-top: 0;

    }
    .navbar-nav{margin-top:0px;margin-bottom:0px;}
    .younger-kamper-age-section .flex-view.pages [class*="area-"]{margin-right:0px;}
/*    .staff-content .flex-view.pages [class*="area-"]:nth-child(3n){margin-right:0px;}*/
    .younger-kamper-age-section .flex-view.pages [class*="area-"]:nth-child(3n){margin-right:0px;}
    /*=================================menubar================================*/
    /*header */
    .navbar-default .navbar-nav > li:hover {
        background: none !important;
    }
    .drop-down-parent .drop-down {

        border-top: none;
    }
    .navbar-default .navbar-nav > li {
        border-bottom: 1px dotted #ffffff;
        margin-bottom: 10px;
        margin-right: 0;
    }
    .navbar-default .navbar-nav > li a {

        padding-left: 15px !important;
    }
    .nav-section .container {
        padding: 0;
    }
    .drop-down-parent .fa.fa-angle-down, .drop-down-parent .fa.fa-angle-up {
        position: absolute;
        right: 15px;
        top: 0;
    }
    .drop-down-parent.active-arrow .fa.fa-angle-down {
        display: none;
    }
    .drop-down-parent .fa.fa-angle-down {
        display: block;
    }
    .drop-down-parent.active-arrow .fa.fa-angle-up {
        display: block;
    }
    .drop-down-parent .drop-down {
        position: static;
        opacity: 1;
        background: none;
        display: none;
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
        width: 100%;
        transition: initial !important;
    }
    .drop-down-parent .drop-down li a {
        color: rgba(255, 255, 255, 0.5);
        padding-left: 35px !important;
        transition: all 0.6s ease 0s;
        -webkit-transition: all 0.6s ease;
        -moz-transition: all 0.6s ease;
        -ms-transition: all 0.6s ease;
        -o-transition: all 0.6s ease;
        transition: all 0.6s ease;

    }
    .drop-down-parent .drop-down li a:hover {
        color: #7c4199;
    }
    .drop-down > li:first-child {
        border-top: none;
    }

    .navbar-default .navbar-toggle {
        position: absolute;
        right: -14px;
        top: 0px;
        margin-right: 30px;
        border-color: #7bc144;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    .navbar-default .navbar-toggle .icon-bar {
        background-color: #7bc144;
    }

    .navbar-nav .open .dropdown-menu > li > a{
        line-height: 26px;
/*        padding-bottom: 0 !important;
        padding-top: 0 !important;*/
    }
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
        background-color: #7c4199;
        border-color: #fff;
    }
    .navbar-default .navbar-toggle:focus .icon-bar, .navbar-default .navbar-toggle:hover .icon-bar {
        background-color: #fff;
    }
    .navbar-nav > li + li::before{
        display:none;
    }
    .drop-down-parent:hover .drop-down{margin-top:0px;}
    .nav .open>a, .nav .open>a:hover, .nav .open>a:focus{border-color:none; outline: 0px;}
    .drop-down-parent a{
        position: relative;
    }
    .drop-down-parent a.active-class:before{
        content:"\f107";
        position: absolute;
        display: block;
        width:30px;
        height:30px;
        font-size:30px;
        right:0px;
        top:14px;
        font-family:FontAwesome;
    }   
    .drop-down-parent.active-arrow a.active-class:before{
        content:"\f106";
    }       
    .god-ifo-slider .carousel-inner {
        width: 100%;
    }

    .slider-left-text,
    .slider-right-text {
        text-align: center; 
        padding: 5px 0;
    }
    .god-ifo-slider  .carousel {
        width: 90%;
        margin: 0 auto;
    }
    .ssba.ssba-wrap > div {
        text-align: center !important;
    }
    .nav>li.logout-link {
        display: block;
    }
    .nav.nav-tabs.logout-wrapper {
        display: none;
    }
    
    .navbar-right {
        margin-right: -15px;
    }
    .area-k1 > div,
    .area-k2 > div,
    .area-staff > div{
        width: 100%;
    }
    .staff-content .flex-view.pages.blue-flex [class*="area-"]{
        width: 90%;
        margin: 4px;
    }
    .services .flex-view.pages [class*="area-"]{
        padding-bottom: 70px;
    }
    .audio-sec .bg-thumbnl{
        height: auto;
    }
    .video-sound, .video-sound-off{
        display: none !important;
    }
    .video-section-main .more{
        display: none;
    }
    .video-section-main{
        background-repeat: no-repeat;
        background-position: top;
        background-size: cover;
        height: auto;
    }
    .btn-to-group{
        display: none;
    }
    .top-banner.slider-col .carousel-inner .item {
        height: calc(100vh - 166px);
    }
    .top-banner.slider-col {
        max-height: none;
        min-height: 314px;
    }
    .more{
        display: none;
    }
    .groups-area{
        height: auto;
    }
.flex-view.select-topic [class*="area-"]{
        min-height: 270px;
        height: auto;
    }
    .main-heading h4{
        font-size: 20px;
    }
    .video-middle-wrapper {
        margin: 0;
        padding: 0;
        width: 100%;
    }
    .lesson-title{
        font-size: 30px;
    }
    .footer-slider .left-link , .footer-slider .right-link {
        text-align: center;
    }
    .footer-slider .left-link a, .footer-slider .right-link a{
        padding: 0;
    }
    .footer-slider .center-image img{
        width: 50%;
    }
    .load-more-wrapper{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .lesson-img-part p img{
        width: 100%;
    }
    .login-area .login-form{
        margin-top: 90px;
        margin-bottom: 20px;
    }
    .video-player p img {
        width: 100%;
        height: auto;
    }
    .playstore-btn{
        margin-top: 10px;
    }
    .innerContainer {
    position: relative; 
    display: block;
    width: 100% !important;
    height: 0;
    padding: 56.25% 0 0 0; /* This should reflect your video aspect ratio */
    
    /* Use the following 2 lines if you wish to make your player align centrally */
    
    max-width: 640px; /* This should be the width of your player */
    margin: auto;
}
.outerContainer {
    max-height: 360px; /* Set this to the height of your player */
}
.vidyard_player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 640px;   /* These should be the dimensions of your player */
    max-height: 360px;
}
.vidyard_player > span {
    width: 100% !important;
    height: 100% !important;
    margin: 0 auto !important;
}
.about-joe-wht-pic{
        float: left;
        margin-right: 15px;
        width: 100%;
        text-align: center;

    }
}
@media screen and (min-width: 768px) {
    .desktop-img-hide{
        background: transparent !important;
    }
    .desktop-img-hide video{
        display: block;
    }
}