/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (max-width: 1200px) { }

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
    .logo-heading-wrapper h3{
        font-size: 22px;
    }

    #navbar{
        margin-top: 15px;
    }

    #navbar .nav-item a{
        font-size: 14px;
    }
}

/* Large devices (large desktops, 1200px and up) */
@media (max-width: 767px) {
    .container{
        width: 100%;
    }

    .logo-heading-wrapper h3{
        font-size: 23px;
    }

    .btn-group, .btn-group-vertical{
        display: block;
    }

    .videoLessons .btn-group button{
        width: 100%;
    }

    .btn-group-vertical button{
        margin-bottom: 2px;
        text-align: center;
    }

    .videoLesson{
        height: 230px;
    }

    .videoLessons .videoLesson videogular vg-scrub-bar .container, [videogular] vg-scrub-bar .container{
        padding: 10px;
        top: 16px;
    }

    .videoLesson videogular vg-time-display, [videogular] vg-time-display{
        padding: 0;
        font-size: 13px;
        width: 36px;
    }

    .videoLesson videogular vg-overlay-play .overlayPlayContainer div, [videogular] vg-overlay-play .overlayPlayContainer div{
        position: absolute;
        left: 0;
        right: 0;
        top: 20%;
    }

    #respond input[type='text'],
    #respond input[type='email']{
        width: 100% !important;
    }

    .navbar-toggle.collapse, #navbar.navbar-collapse.collapse.show{
        display: block;
    }

    #navbar.navbar-collapse.collapse{
        display: none;
    }
}