/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .course .cards-list {
        width: 100% !important;
    }

    .pr-xs-0 {
        padding-right: 0 !important;
    }

    .pl-xs-3 {
        padding-left: 25px;
    }

    h3.header-title {
        margin-top: 20px;
    }

    .header {
        position: relative;
    }

    .navbar-collapse {
        position: absolute;
        background-color: rgb(255, 255, 255);
        top: 65px;
        z-index: 10;
        width: 100%;
        left: 0;
    }

    .header {
        padding: 6px 15px !important;
    }

    .manage-courses-page h3 {
        font-weight: normal;
    }

    .course .user-options {
        padding-left: 0;
    }

    .course .container .header .stylish-input-group .form-control {
        width: 150px;
        margin-left: 45px;
    }

    .course .container .jumbotron.header .stylish-input-group .form-control {
        width: 215px;
        margin-left: 0;
    }

    .dropdown-menu {
        left: -110px;
        top: 50px;
    }

    .dropdown-menu.manage {
        left: 0;
    }

    .course-info {
        overflow-x: auto;
    }

    .container section.main-section {
        padding-left: 15px;
        padding-right: 15px;
        padding-top: 20px;
        min-height: 400px;
    }

    .course .center-carousel .carousel-item {
        min-height: initial !important;
        height: initial !important;
    }

    .filters-form .col-xs-12 h1 {
        padding-left: 10px;
    }

    footer.footer .bottom,
    footer.footer .menu {
        padding-left: 20px;
        padding-right: 20px;
    }

    ol.breadcrumb {
        margin-bottom: 20px;
    }

    .course .carousel-card-list {
        width: 100% !important;
    }
    .course .courses-list .card-item {
        margin-left: 25% !important;
    }

    .course .cards-list.carousel-card-list .card-item {
        width: initial;
        padding-top: 0;
        margin: auto !important;
    }
    .card-item .title-wrapper,
    .card-item .image-wrapper-container,
    .card-item .options {
        margin-left: auto;
        margin-right: auto;
    }

    .course .cards-list .slick-prev {
        left: -15px;
    }

    .course .cards-list .slick-next {
        right: -15px;
    }

    .modal-dialog.request-pay .modal-content .modal-body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .modal-dialog.request-pay h3 {
        font-size: 35px;
    }

    .modal-dialog.request-pay .modal-content {
        padding: 10px;
    }

    .course .btn.enroll-btn {
        margin-bottom: 30px;
    }

    .course .center-carousel .carousel-item video {
        height: 250px;
    }

    .course-options.big-block {
        width: initial;
    }

    ul.list-inline.course-options.text-center.big-block {
        padding: initial;
        margin-left: initial;
        margin-top: initial;
        height: 100px;
    }

    .course-options.big-block {
        height: auto;
    }

    ul.list-inline.course-options.text-center.big-block li i {
        position: absolute;
        left: -20px;
        top: 10px;
    }

    .move-right {
        left: 40px;
    }

    ul.list-inline.course-options.text-center.big-block li .border-right {
        padding-left: 20px;
    }

    .course .course-options li p,
    .course .course-options li label {
        text-align: left;
    }

    ul.list-inline.course-options.text-center.big-block li {
        top: 0;
        width: 130px;
    }

    .form-group.sort,
    .form-control.starts-select {
        width: 100%;
    }
}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

    .course .courses-list div.card-item:first-child,
    .course .courses-list div.card-item:nth-of-type(4n+5) {
        padding-top: 0;
        margin: 0;
        width: 194px !important;
        max-width: 194px !important;
    }

    .course .container .header .stylish-input-group .form-control {
        width: 206px;
    }

    .course .container .jumbotron.header .stylish-input-group .form-control {
        width: 215px;
        margin-left: 0;
    }

    .course-info {
        overflow-x: auto;
    }

    .course .cards-list.carousel-card-list .card-item {
        max-height: 400px;
        width: 194px !important;
        max-width: 194px !important;
        padding: 0;
        margin: 0 21px;
    }

    .modal-dialog.request-pay,
    .md-dialog.select-seats {
        min-width: 745px;
        max-height: 389px;
    }
}

/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
    .course .courses-list div.card-item:first-child,
    .course .courses-list div.card-item:nth-of-type(4n+5) {
        padding-top: 0;
        margin: 0;
        width: 194px !important;
        max-width: 194px !important;
    }

    .modal-dialog.forgot-password,
    .modal-dialog.sign-up {
        min-width: 760px;
    }

    .modal-dialog.crop-image {
        min-width: 70vw;
    }

    h2.you-may {
        margin-left: 100px;
    }

    .course .cards-list.carousel-card-list .card-item {
        max-height: 400px;
        width: 194px !important;
        max-width: 194px !important;
        padding: 0;
        margin: 0 21px;
    }

    .modal-dialog.request-pay {
        min-width: 745px;
        max-height: 650px;
    }
}
@media screen and (max-width: 1199px) and (min-width: 992px) {
	.container {
	    width: 100%;
	}
}


@media (min-width: 576px) {
    .container {
        max-width: initial;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}


@media (max-width: 768px) {
    .md-dialog-fullscreen {
        max-width: 100% !important;
        max-height: 100vh !important;
        overflow: auto !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
    }
}

/* Checkout dialog */
.md-dialog-fullscreen.select-seats {
    z-index: 1001 !important;
}


.row:before, .row:after {
    display: inline-block;
}

.checkout-user-modal {
    z-index: 1001 !important;
}

.popper-dropdown .menu-list.collapse {
    display: initial;
}

.dropdown-menu.show .menus-div .menu-list {
    display: block !important;
}