/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 320px) {
	body {
		/* font-size: .8rem; */
	}

    .portrait .discussion-board-title {
        font-size: 1.25rem;
    }

    .d-xs-none {
        display: none !important;
    }

    .d-xs-block {
        display: block !important;
    }

    .countdown-block {
        font-size: 80%;
    }
}

@media (max-width: 575.98px) {

}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    #search-block {
        position: fixed;
        top: -64px;
        left: 0;
        right: 0;
        height: 64px;
        z-index: 1050;
        background-color: #fff;
    }

    #search-block.show {
        -webkit-animation: search-block-slide-down .5s forwards;
        animation: search-block-slide-down .5s forwards;
    }

    #search-block.hide {
        -webkit-animation: search-block-slide-up .5s forwards;
        animation: search-block-slide-up .5s forwards;
    }

    @-webkit-keyframes search-block-slide-down {
        0% { top: -64px; }
        100% { top: 0px; }
    }

    @keyframes search-block-slide-down {
        0% { top: -64px; }
        100% { top: 0px; }
    }

    @-webkit-keyframes search-block-slide-up {
        0% { top: 0px; }
        100% { top: -64px; }
    }

    @keyframes search-block-slide-up {
        0% { top: 0px; }
        100% { top: -64px; }
    }

    .sidebar-menu-items .sidebar-menu-link {
    	padding: .25rem 1.25rem;
    }

    .owl-item {
        /* margin-right: 15px; */
    }

    .portrait .topics-title {
        font-size: 1rem;
    }

    .topics-title-block-landscape .topics-title {
        font-size: .9rem;
    }

    .exam-main-block #exam-description-block .container-xl {
        padding: 0;
    }

    #exam-score-history-block {
        width: 100%;
    }

    #exam-score-categories-block {
        width: 100%;
    }

    .card-exam-description {
        border-radius: 1.5rem 1.5rem 0 0 !important;
    }

    #exam-description-start-block {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
        z-index: 1;
    }

    #documents-block {
        padding: 20px 30px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
	#sidebar-block {
        top: 0;
        z-index: 1060;
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }

    #sidebar-block.initial-compress {
	    transform: translateX(-100%);
	    -webkit-transform: translateX(-100%);
	}

    @-webkit-keyframes sidebar-slide-left-to-right {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(0%); }
    }

    @keyframes sidebar-slide-left-to-right {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(0%); }
    }

    @-webkit-keyframes sidebar-slide-right-to-left {
    	0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }

    @keyframes sidebar-slide-right-to-left {
    	0% { transform: translateX(0%); }
        100% { transform: translateX(-100%); }
    }

    .modal-backdrop {
        /* z-index: 1050; */
    }

    .owl-item {
        opacity: 1;
        visibility: visible;
    }

    #login-page .right-block, #register-page .right-block {
        width: 100%;
    }

    #sale-block {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        padding: 0;
    }

    #sale-block .card {
    	border-radius: 0;
    }

    .c-if-cover-content {
        padding: 1rem 0;
    }

    .c-if-cover-content-course-title {
        font-size: 1.5rem;
    }

    .c-if-cover-content-course-detail {
        color: #6c757d;
    }

    .c-if-cover-content-button-block button {
        color: rgba(0, 0, 0, .9);
    }

    .c-if-cover-content-button-block button:hover {
        color: rgba(0, 0, 0, 1);
    }

    .image-preview-block, .file-preview-block {
        /* width: 50%; */
    }

    #exam-questions-footer-block {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background-color: #fff;
        box-shadow: 0 1rem 3rem rgba(0,0,0,.175)!important;
        margin-bottom: 0 !important;
        padding: 1.5rem!important;
    }

    /* #exam-description-footer-block {
        background: linear-gradient(0deg, rgba(0,0,0,.7)0%, rgba(0,0,0,0) 100%) !important;
        box-shadow: none !important;
    } */
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .courses-includes-block .courses-includes-items {
        font-size: .8rem;
    }

    .card-content-subject {
        line-height: unset !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

}

@media (max-width: 1919.98px) {
    .owl-nav button.owl-prev {
        left: -1rem;
    }

    .owl-nav button.owl-next {
        right: -1rem;
    }
}

/* Extra large devices (large desktops) */
/* No media query since the extra-large breakpoint has no upper bound on its width */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .border-sm-left {
        border-left: 1px solid #dee2e6!important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	#header-block, #footer-block .footer-content-block, #classroom-header-block {
	    padding: 12px 17px;
	}

    #sidebar-block {
        padding: 1rem 0;
    }

    .sidebar-menu-items .sidebar-menu-link {
    	padding: .25rem 2rem;
    }

    .main-block {
        padding: 30px 15px;
    }

    #courses-continue-studying-block img {
        border-radius: .5rem 0 0 .5rem;
    }

    .card-thumbnail .progress {
        border-radius: 0 0 0 .5rem;
    }

    .owl-nav button.owl-prev {
        left: -1.5rem;
    }

    .owl-nav button.owl-next {
        right: -1.5rem;
    }

    .portrait #classroom-detail-block {
        padding: 1rem;
    }

    .landscape .classroom-main-block {
        width: 65% !important;
    }

    .landscape #interactive-block {
        width: 35% !important;
    }

    .rounded-md-top-xl {
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
    }

    .rounded-md-bottom-xl {
        border-bottom-left-radius: .5rem;
        border-bottom-right-radius: .5rem;
    }

    #exam-score-history-block {
        width: 480px;
    }

    #exam-score-categories-block {
        width: 480px;
    }

    .card-course-pattern-1 .card {
        -ms-flex-direction: row!important;
        flex-direction: row!important;
    }

    .card-course-pattern-1 .card .card-thumbnail {
        width: 60%;
    }

    .card-course-pattern-1 .card .card-content {
        width: 40%;
    }

    .card-course-pattern-1 .card .card-thumbnail img {
        border-radius: .5rem 0 0 .5rem;
    }

    #documents-block {
        padding: 30px 45px;
    }

    .f-md-1rem {
        font-size: 1rem !important;
    }

    .display-md-3 {
        font-size: 4.5rem;
        font-weight: 300;
        line-height: 1.2;
    }

    #exam-description-nav-block {
        position: fixed;
        height: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    #exam-description-nav-block .exam-description-nav-items {
        position: relative;
        width: 100px;
    }

    #exam-description-nav-block .exam-description-nav-items:first-child {
        margin-left: -100px;
        padding-right: 15px;
    }

    #exam-description-nav-block .exam-description-nav-items:last-child {
        margin-right: -100px;
        padding-left: 15px;
    }

    .w-md-auto {
        width: auto !important;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .main-block, #footer-block {
        margin-left: 80px;
        transition: margin-left .5s;
    }

	.main-block.sb-expand, #footer-block.sb-expand {
        margin-left: 240px;
        transition: margin-left .5s;
		/*  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);  */
	    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #e48410 100%);
    }

    #sidebar-block {
        top: 64px;
        z-index: 1041;
    }

    .modal-backdrop {
        z-index: 1041;
    }

    #sidebar-block.initial-compress {
        width: 80px;
    }

    .border-lg-left {
        border-left: 1px solid #dee2e6!important;
    }

	@-webkit-keyframes sidebar-slide-left-to-right {
	    0% { width: 80px; }
	    100% { width: 240px; }
	}

	@keyframes sidebar-slide-left-to-right {
	    0% { width: 80px; }
	    100% { width: 240px; }
	}

	@-webkit-keyframes sidebar-slide-right-to-left {
		0% { width: 240px; }
	    100% { width: 80px; }
	}

	@keyframes sidebar-slide-right-to-left {
		0% { width: 240px; }
	    100% { width: 80px; }
	}

	#sidebar-block .sidebar-menu-title, #sidebar-block .sidebar-menu-arrow {
		opacity: 1;
        /* height: auto; */
        /* display: inline-block; */
		transition: opacity .5s .2s;
	}

	#sidebar-block.compress .sidebar-menu-title, #sidebar-block.compress .sidebar-menu-arrow, #sidebar-block.initial-compress .sidebar-menu-title, #sidebar-block.initial-compress .sidebar-menu-arrow {
		opacity: 0;
        /* height: 0 !important; */
        transition: opacity .2s;
	}

	#sidebar-block.compress .sidebar-menu-link i:first-child {
		/* text-align: center; */
	}

    #orders-details-block {
        width: 25% !important;
    }

    body.desktop .sub-menu {
        top: 64px;
        left: -200px;
        z-index: 1040;
        width: 200px;
    }

    body.desktop .sub-menu.sb-expand {
        left: -200px;
    }

    body.desktop .sub-menu.show {
        -webkit-animation: sub-menu-left-to-right .5s forwards;
        animation: sub-menu-left-to-right .5s forwards;
    }

    body.desktop .sub-menu.sb-expand.show {
        -webkit-animation: sub-menu-left-to-right-sb-expand .5s forwards;
        animation: sub-menu-left-to-right-sb-expand .5s forwards;
    }

    body.desktop .sub-menu.hide {
        -webkit-animation: sub-menu-right-to-left 1s forwards;
        animation: sub-menu-right-to-left 1s forwards;
    }

    body.desktop .sub-menu.sb-expand.hide {
        -webkit-animation: sub-menu-right-to-left-sb-expand 1s forwards;
        animation: sub-menu-right-to-left-sb-expand 1s forwards;
    }

    @-webkit-keyframes sub-menu-left-to-right {
        0% { left: -200px; }
        100% { left: 80px; }
    }

    @keyframes sub-menu-left-to-right {
        0% { left: -200px; }
        100% { left: 80px; }
    }

    @-webkit-keyframes sub-menu-right-to-left {
        0% { left: 80px; }
        100% { left: -200px; }
    }

    @keyframes sub-menu-right-to-left {
        0% { left: 80px; }
        100% { left: -200px; }
    }

    @-webkit-keyframes sub-menu-left-to-right-sb-expand {
        0% { left: -200px; }
        100% { left: 240px; }
    }

    @keyframes sub-menu-left-to-right-sb-expand {
        0% { left: -200px; }
        100% { left: 240px; }
    }

    @-webkit-keyframes sub-menu-right-to-left-sb-expand {
        0% { left: 240px; }
        100% { left: -200px; }
    }

    @keyframes sub-menu-right-to-left-sb-expand {
        0% { left: 240px; }
        100% { left: -200px; }
    }

    body.mobile-tablet .owl-item {
        opacity: 1;
        visibility: visible;
    }

    body.desktop .owl-item {
        opacity: 0;
        visibility: hidden;
    }

    #login-page .left-block, #register-page .left-block {
        width: 50%;
    }

    #login-page .right-block, #register-page .right-block {
        width: 50%;
    }

    .c-if-cover-content {
        position: absolute;
        width: 50%;
        bottom: 0;
        left: 0;
        padding: 3rem;
    }

    .c-if-cover-content-course-title, .c-if-cover-content-course-instructor {
        color: #fff;
    }

    .c-if-cover-content-course-detail {
        color: rgba(255, 255, 255, .7);
    }

    .c-if-cover-content-button-block button {
        color: rgba(255, 255, 255, .9);
    }

    .c-if-cover-content-button-block button:hover {
        color: rgba(255, 255, 255, 1);
    }

    #sale-block {
        position: absolute;
        z-index: 1030;
        right: 5%;
        top: 2.5%;
        /* transition: left .5s, top .1s, bottom .1s; */
        transition: left .5s;
    }

    .sale-block-animate {
        transition: left .5s, top .2s !important;
    }

    .landscape .classroom-main-block {
        /* padding: 1.5rem !important; */
    }

    .mode-create .image-preview-block, .mode-create .file-preview-block {
        /* width: 50%; */
    }

    .mode-comment .image-preview-block, .mode-comment .file-preview-block {
        /* width: 25%; */
    }

    .card-course-pattern-1 .card .card-thumbnail {
        width: 50%;
    }

    .card-course-pattern-1 .card .card-content {
        width: 50%;
    }

    .sb-expand .card-course-pattern-1 .card .card-thumbnail {
        width: 60%;
    }

    .sb-expand .card-course-pattern-1 .card .card-content {
        width: 40%;
    }

    .card-exam-description {
        border-radius: 1.5rem !important;
    }

    #exam-description-nav-block .exam-description-nav-items {
        position: relative;
        width: 140px;
    }

    #exam-description-nav-block .exam-description-nav-items:first-child {
        margin-left: -140px;
        padding-right: 30px;
    }

    #exam-description-nav-block .exam-description-nav-items:last-child {
        margin-right: -140px;
        padding-left: 30px;
    }

    .w-lg-auto {
        width: auto !important;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #login-page .left-block, #register-page .left-block {
        width: 60%;
    }

    #login-page .right-block, #register-page .right-block {
        width: 40%;
    }

    .courses-includes-block .courses-includes-items {
        font-size: .9rem;
    }

    .landscape .classroom-main-block {
        /* padding: 1.5rem 3rem !important; */
        width: 75% !important;
    }

    .landscape #interactive-block {
        width: 25% !important;
    }

    /* .card-course-pattern-1 {
        width: 75%;
    } */

    .card-course-pattern-1 .card .card-thumbnail {
        width: 35%;
    }

    .card-course-pattern-1 .card .card-content {
        width: 65%;
    }

    .sb-expand .card-course-pattern-1 .card .card-thumbnail {
        width: 40%;
    }

    .sb-expand .card-course-pattern-1 .card .card-content {
        width: 60%;
    }

    .card-content-subject {
        line-height: unset !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

    #exam-description-nav-block .exam-description-nav-items {
        position: relative;
        width: 180px;
    }

    #exam-description-nav-block .exam-description-nav-items:first-child {
        margin-left: -180px;
        padding-right: 30px;
    }

    #exam-description-nav-block .exam-description-nav-items:last-child {
        margin-right: -180px;
        padding-left: 30px;
    }
}

@media (min-width: 1920px) {
    .owl-nav button.owl-prev {
        left: -4.5rem;
    }

    .owl-nav button.owl-next {
        right: -4.5rem;
    }

    .owl-item {
        opacity: 0;
        visibility: hidden;
    }
}