/* RESPONSIVE STYLES
--------------------------------------------------*/

.arrows {
    position                :   absolute;
    top                     :   40%;
    right                   :   20px;
    font-size               :   90px;
    opacity                 :   0.80;
    z-index                 :   9999;
    color                   :   #F9A605;
    margin-top              :   -25px;
}

.arrows i {
	text-shadow: 1px 1px 5px rgba(0,0,0,0.60);
}

.arrows:hover {
    cursor                  :   pointer;
    opacity                 :   0.95;
}

.arrows.arrow-l {
    right                   :   auto;
    left                    :   20px;
    display                 :   none;
}

@media (max-width: 1700px) {
	
    .remodal {
        max-width:  80%!important;
    }
    
    .db-pie-charts {
        padding             :   25px 5px 20px 5px!important;
    }
    
    .db-pie-charts span {
        font-size           :   13px;
        line-height         :   18px;
    }
    
    /*.db-pie-charts .banner {
        font-size           :   8px;
        line-height         :   20px;
    }*/
    
    .matrix .block .inside .icon {
        max-width           :   40px!important;
        max-height          :   40px;
    }
    
    .matrix .block .inside {
        font-size           :   22px;
    }
	
}

@media (max-width: 1600px) {
	
    .remodal {
        max-width: 80%!important;
    }
	
	.left-nav a {
		font-size           :   17px;
		line-height         :   45px;
	}
	
	.gamification .gblocks .gtitle {
		font-size: 15px;
	}
    
}

@media (max-width: 1500px) {
	
    .remodal {
        max-width: 85%!important;
    }
	
	.left-nav a {
		font-size           :   16px;
		line-height         :   40px;
	}
    
    .bar-label {
        font-size           :   13px;
        line-height         :   28px;
    }
    
    .bar-total {
        font-size           :   28px;
    }
    
    .matrix .block .inside .icon {
        max-width           :   35px!important;
        max-height          :   35px;
    }
    
    .matrix .block .inside {
        font-size           :   20px;
    }
    
    .matrix .block .inside span {
        line-height         :   17px;
    }
	
}

@media (max-width: 1400px) {
	
	.left-nav a {
		font-size           :   15px;
		line-height         :   35px;
	}
	
	.gamification .box-ui-inner-items .main-text {
		font-size: 20px!important;
	}
	
	.gamification .box-ui-inner-item {
		height: 120px!important;
		top: 80px!important;
	}
	
	.gamification .box-ui-inner-item:hover .item-hover-text {
		top: -80px;
	}
	
	.gamification .gblocks {
		width: 25%;
	}
	
}

@media (max-width: 1300px) {
	
	.subut {
		width: 50%!important;
		max-width: 50%!important;
	}
	
}

@media (max-width: 1200px) {
	
    .remodal {
        max-width: 90%!important;
    }
    
    .dashboard-header span {
        display             :   none;
    }
	
	.diplomas .certs .cert {
		width: 25%;
	}

	.diplomas .certs.accreditations .cert {
		width: 16.66%;
	}
	
	.gamification .box-ui-inner-items .main-text {
		font-size: 18px!important;
	}
	
	.gamification .box-ui-inner-item {
		height: 140px!important;
		top: 60px!important;
	}
	
	.gamification .box-ui-inner-item:hover .item-hover-text {
		top: -40px;
	}
	
	.gamification .gblocks {
		width: 33.33%;
	}
	
}
 
/* Portrait tablet to landscape and desktop */
@media (max-width: 991px) {
    
    .listing-wrapper .testimonials {
        width: 50%!important;
        max-width: 50%!important;
        float: left!important;
        clear: none!important;
    }
    
    .cartmain, .cartbar {
        width: 100%!important;
        max-width: 100%!important;
        clear: both;
        float: left;
    }
    
    .cartbar {
        float: right;
        height: auto;
        display: block;
        overflow: hidden;
    }
	
	.remodal-wrapper {
		max-height: 99%;
		box-sizing: border-box;
	}
    
    .coursemodal {
        overflow: visible;
    }
    
    .coursemodal .splash {
        padding: 0px;
        position: relative;
    }
    
    .coursemodal .splash .simplebar-wrapper {
        margin: 0px!important;
    }
    
    .coursemodal .splash .simplebar-content {
        padding: 0px!important;
    }
    
    .coursemodal .splash .simplebar-offset {
        right: 0px!important;
        bottom: 0px!important;
    }
    
    .page-template-template-online-courses header, .single-online header {
        height: 270px;
    }
    
    .page-template-template-online-courses.logged-in header, .single-online.logged-in header {
        height: 250px;
    }
    
    .remodal-wrapper {
        padding: 0;
    }
    
    .points-total h1 {
        font-size: 30px;
        line-height: 40px;
    }
    
    .lnav, .lcon {
        width: 100%!important;
        max-width: 100%!important;
        clear: both;
        padding: 10px!important;
        height: auto;
		max-height: 100%;
        box-sizing: border-box!important;
    }
	
	.lnav {
		min-height: 0!important;
        height: auto!important;
	}
    
    .lnav .overlays {
    }
	
	.tab-content { 
		height: 100%!important;
	}
	
	.lcon {
		min-height: 0!important;
		height: 100%;
	}
    
    /*.lnav img, .lnav .nextprev, .lnav .bar-charts {
        display: none!important;
    }*/
    
    .remodal {
        max-width: 100%!important;
        width: 100%;
        height: 100%!important;
        min-height: 100%!important;
    }
    
    .coursemodal {
        padding: 0px;
    }
    
    .col-sm-10.full {
        width: 100%!important;
        max-width: 100%!important;
        overflow: hidden!important;
        display: block!important;
    }
    
    .tab-pane {
        overflow: visible!important;
        position: relative!important;
        height: auto;
    }
    
    .navbar-light .navbar-toggler {
        position: absolute;
        right: 10px;
        top: 60px;
        z-index: 9999;
    }
    
    .menu-first-menu-container, .menu-main-menu-container {
        width: 100%;
        padding-bottom: 0px;
        text-align: center;
    }
    
    .menu-second-menu-container, .menu-second-menu-sv-container {
        width: 100%;
        padding-bottom: 0px;
        margin-left: 0;
        text-align: center;
    }
    
    #menu-second-menu, #menu-second-menu-sv {
        text-align: center !important;
        float: none;
        padding: 0;
        margin: 0;
    }
    
    .left-nav {
        display: none!important;
    }
    
    /*.dashboard-header .buts:last-child {
        position: absolute;
        left: 10px;
    }*/
	
    #mobile {
        display: block!important;
        width: 100%;
        background: #000!important;
        color: #FFF;
        padding: 5px;
        height: 40px;
        border: none;
        z-index: 99999;
        position: relative;
        border-bottom: 1px solid #FFF;
    }
    
    .navbar-toggler {
        padding: 0px 6px;
        font-size: 19px;
        line-height: 0.1;
        background: 0 0;
        border: 1px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-radius: 0.25rem;
        cursor: pointer;
    }
    
    .collapse.show {
        z-index: 9998;
        width: 100%;
    }
    
    .navbar-expand-lg {
        padding: 0;
        margin-top: -120px;
    }
    
    .page-template-template-online-courses .navbar-expand-lg {
        margin-top: 0;
    }
    
    .nav-link {
        padding-top: 15px;
    }
    
    .login-form {
        width               :   65%;
    }
    
    .cplans {
        width               :   50%;
        max-width           :   50%;
    }
    
    .bbtn {
        top: 55px;
        font-size: 20px;
    }
    
    .bbtn.ddate {
        top: 55px;
    }
    
    .mailchimp {
        top: 70px;
    }
    
    .closebutton {
        top                 :   19px!important;
        right               :   18px!important;
    }

    .remodal #favorite {
        top                 :   16px;
        right               :   55px;
    }
	
	.lnav img {
		max-width: 15%;
		display: none;
	}
	
	.lnav .nextprev {
		bottom              :   auto;
		position            :   relative!important;
		margin-top: 10px!important;
	}
	
	.lnav .nextprev .nav {
		padding: 0!important;
	}
	
	.lnav .nextprev .nav.nav-next {
		padding: 0!important;
	}
	
	.lnav .nextprev a {
		margin: 0!important;	
	}
	
	.lnav .bar-charts {
		position            :   relative!important;
		bottom              :   auto;
		z-index             :   999999;
		width: 100%!important;
	}
    
    .lnav h3 {
        max-width: 90%;
        margin: 0px auto!important;
        padding: 5px 0 20px 0;
        border-top: 0px solid #FFF;
    }
    
    .third, .threequarters {
        width: 100%!important;
        clear: both!important;
        display: block;
        float: none;
        box-sizing: border-box;
    }
    
    .media .fields {
        width: 100%!important;
        min-width: 100%!important;
        clear: both!important;
        position: relative!important;
        float: none!important;
        display: block!important;
    }
    
    #videos {
        width: 100%!important;
        max-width: 100%!important;
    }
    
    .exercises .name {
        height: auto;
    }
    
    .exercises .name span::after {
        content: '';
        right: 0px;
        top: 0;
        display: none;
        width:0px;
        height: 0px;
        border: 0px solid #6C7C8E;
        border-right: 0px solid #FFF;
        border-bottom-color: #6C7C8E;
    }
    
    .exercises .name span {
        height: auto;
        width: 100%;
        left: 0;
        top: 0;
        display: block;
    }

	.sr_video #srreturn {
		position: absolute;
		left: 0;
		top: auto;
		bottom: -35px;
	}
	
	.tab-pane {
		padding-right: 0;	
	}	

	.launch_body {
		padding: 15px 60px;
	}

	.launch_body .countdowns {
		padding: 0 100px;
	}
	
	.diplomas .certs .cert {
		width: 33.33%;
	}

	.diplomas .certs.accreditations .cert {
		width: 25%;
	}
	
	.cc-sections {
		width: 25%!important;	
		float: left;
		clear: none;
	}
	
	.custom-menu .cc-inner .cc-sections h5 {
		font-size: 16px;
		line-height: 16px;
	}
	
	.gamification .box-ui-box-row {
		display: block;
		justify-content: none;
	}
	
	.gamification .style_1, .gamification .style_2 {
		width: 25%!important;
		display: block!important;
		float: left;
	}
	
	.gamification .gblocks {
		width: 50%;
	}
       
}
 
/* Landscape phone to portrait tablet */

@media(min-width:768px) {
    
    .nav-tabs {
        display: flex;
    }
    
    .card {
        border: none;
    }

    .card .card-header {
        display:none;
    }  

    .card .collapse{
        display:block;
    }
    
}

@media (max-width: 767px) {
	
	.matrix.matrix-courses {
		margin-right: 0!important;
		width: 100%;
	}

	.dashboard-header span.mobbuts {
		/*float    :   none;
		display  :   block;
		width: 100%;
		clear: both;
		padding: 0;
		margin: 5px 0;
		height: auto;
		overflow: visible;
		text-align: center;*/
	}
	
	.dashboard-header span.mobbuts .buts {
		position    :   relative;
		float    :   none;
		display: inline-block;
		cursor   :   pointer;
		padding  :   5px 10px;
		font-size   :   17px;
		line-height :   15px;
	}
    
    .dashboard-header span.mobbuts #socsearch {
        display: none;
    }
    
    body.logged-in .dashboard-header span.mobbuts #socsearch {
        display: inline;
    }
	
	.dashboard-header span.mobbuts .buts a {
		position    :   absolute;
        margin:-22px 0 0 10px!important;
        width: 75px;
        z-index: 999;
	}
	
	.dashboard-header span.mobbuts .vdivide {
		display: inline-block;
		width: 2px;
		float: none;
		background: #465768;
		height: 100%;
		position: relative;
		margin: 0 10px;
		height: 35px;
	}
	
	.nomobbuts {
		display: none!important;
	}

	.alert-oc.alert-oc-new .finner i {
		display: inline;
	}
	
	.vdivide {
		height: 34px;
	}
	
	.ghead {
		font-size: 16px;
	}
	
	.gamification .box-ui-box-row {
		display: block;
		justify-content: none;
	}
	
	.gamification .style_1, .gamification .style_2 {
		width: 33.33%!important;
		display: block!important;
		float: left;
	}
	
	.gamification .gblocks {
		width: 100%;
	}
	
	.gamification .gblocks .gtitle {
		font-size: 15px;
	}
	
	.gamesection {
		padding: 0!important;
		margin: 0!important;
		width: 100%!important;
		max-width: 100%!important;
	}
	
	.cc-sections {
		width: 100%!important;	
		max-width: 100%!important;
		padding: 20px 0!important;
	}
	
	.custom-menu .cc-inner .cc-sections.cc-dividers {
		padding: 10px 0!important;
		border: 0!important;
	}
	
	.custom-menu .cc-inner .cc-sections h5 {
		font-size: 16px;
		line-height: 16px;
	}

	.launch_body {
		padding: 15px 20px;
	}

	.launch_body .countdowns {
		padding: 0 30px;
	}
	
	#splash h1 {
		font-size: 25px!important;
		line-height: 28px!important;
	}
	
	.lnav img {
		max-width: 20%;
	}
    
    .arrows {
        top                     :   30%;
        right                   :   10px;
        font-size               :   60px;
    }
    
    .arrows.arrow-l {
        left                    :   10px;
    }
    
    .vc_col-sm-8, .vc_col-sm-4 {
        width               :   100%!important;
        clear               :   both!important;
    }
    
    .snapshot .charts {
        width               :   33.33%!important;
    }
    
    .login-form {
        width               :   75%;
    }
    
    /*.tab-pane {
        display: block !important;
        opacity: 1;
    }*/
    
    .tab-content>.tab-pane {
        min-height          :   20px;
        padding             :   5px;
    }
    
    .cplans {
        width               :   100%;
        max-width           :   100%;
    }

    .buts {
        padding             :   0 15px 0 0;
    }

    .sbut {
        float: left!important;
    }
    
    #ocsearch {
        width: 180px;
    }
        
    .bbtn {
        position: relative;
        right: auto;
        top: auto;
        z-index: 9999;
        font-size: 26px;
        text-align: center;
        width:  100%;
    }
    
    .bbtn.ddate {
        top: auto;
    }
    
    .mailchimp {
        position: relative;
        right: auto;
        top: auto;
        z-index: 9999;
        text-align: center;
        padding: 10px 0;
        width:  100%;
    }
    
    .arrow_wrapper {
        right: 0!important;
        width: 100%;
        max-height: 90%!important;
        margin: 0;
    }
    
    .arrow_box {
        width: 100%;
    }
	
	.pfblocks {
		top: 60px;
		height: 83px;
		width: 83px;
		padding: 5px;
		font-size: 11px;
	}
	
	.pfblocks .pfinner span {
		line-height: 67px;
	}
	
	.pfblocks .pfinner {
		border: 3px solid #DDAC42;
	}
	
	.pfblocks.pfdiploma {
		right: 86px;
	}
	
	.pfblocks.pfquiz {
		right: 172px;
	}
    
    .testimonials-wrapper .elementor-widget-container {
        padding: 0!important;
    }
	
}

@media (max-width: 600px) {	
    
    .yesmobile {
        display: block;
    }
    
    span.yesmobile {
        display: inline;
    }
    
    .cartmain {
        padding: 5px 5px 15px 0!important;
    }
    
    .dcode {
        float: right;
        margin-right: 0px;
    }
    
    .oc_cart .citems-new {
        padding: 0 0 0 0;
    }
    
    .oc_cart .citems-new .items {
        padding: 20px 20px 20px 20px!important;
        background: rgba(255,255,255,0.8);
    }
    
    .oc_cart .citems-new .cologo {
        display: none;
    }

    .oc_cart .citems-title {
        padding: 10px 10px 10px 10px;
        font-size: 16px;
    }
    
    #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content {
        padding-left: 80px!important;   
    }
    
    body.logged-in #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content {
        padding-left: 0px!important;   
    }
    
    .gm-style .gm-style-iw-c {
        max-width: 350px!important;   
    }
    
    .jpu-testimonials .title h3 {
        font-size: 14px!important;
    }
    
    .jpu-testimonials .fields {
        width: 50%!important;
        float: left!important;
    }
    
    .inbox .subjects {
        width: 15%!important;
        float: left!important;
        height: auto;
        display: block;
        overflow: hidden;
    }
    
    .inbox .subjects .subject {
        padding: 5px!important;
        text-align: center;
    }
    
    .inbox .subjects .subject img {
        float: none;
        margin: 0;
        border-radius: 50%;
        width: 30px;
        height: 30px;
    }
    
    .inbox .messages {
        width: 85%!important;
        float: left!important;
        padding-top: 10px!important;
    }
    
    .nomobile {
        display: none;
    }
    
    .oc_cart .itemline {
        padding-left: 5px!important;
    }
    
    .citems img {
        width: auto;
        max-width: 100px;
        height: auto;
    }
    
	.alignright, .alignleft {
		width: 100%;
		height: auto;
	}
	
	.ghead {
		font-size: 16px;
		line-height: 18px;
		padding-right: 40px!important;
	}
	
	.gamification .box-ui-inner-item {
		height: 160px!important;
		top: 60px!important;
	}
	
	.gamification .box-ui-box-row {
		display: block;
		justify-content: none;
	}
	
	.gamification .style_1, .gamification .style_2 {
		width: 100%!important;
		display: block!important;
		float: left;
		height: 270px;
	}
    
    .navbar-light .navbar-toggler {
        top: 60px;
    }
    
    .page-template-template-online-courses .navbar-light .navbar-toggler {
        position: absolute;
        right: 10px;
        top: 80px;
        z-index: 9999;
    }
    
    .page-template-template-online-courses .mlogo {
        display             :   none;
    }
    
    .page-template-template-online-courses .logo img {
        display             :   block;
    }
	
	.diplomas .certs .cert {
		width: 50%;
	}

	.diplomas .certs.accreditations .cert {
		width: 33.33%;
	}

    .sbut {
        float: left!important;
		width: 100!important;
		margin: 5px 0 0 0!important;
    }
	
}

@media (max-width: 480px) {
    
    .listing-wrapper {
        padding: 0;
    }
    
    .listing-wrapper h3 {
        padding: 0 15px;
        font-size: 17px!important;
    }
    
    .listing-wrapper .testimonials {
        width: 100%!important;
        max-width: 100%!important;
        float: none!important;
        clear: both!important;
    }
	
	#splash h1 {
		font-size: 20px!important;
		line-height: 23px!important;
		margin: 10px 0;
	}
    
    .login-form {
        width               :   100%;
    }
    
    #ocsearch {
        width: 100px;
    }
	
	.pfblocks {
		top: 70px;
		height: 73px;
		width: 73px;
		padding: 5px;
		font-size: 11px;
	}
	
	.pfblocks .pfinner span {
		line-height: 57px;
	}
	
	.pfblocks .pfinner {
		border: 3px solid #DDAC42;
	}
	
	.pfblocks.pfdiploma {
		right: 76px;
	}
	
	.pfblocks.pfquiz {
		right: 152px;
	}
	
	.diplomas .certs .cert {
		width: 100%;
	}

	.diplomas .certs.accreditations .cert {
		width: 50%;
	}
	
}

@media (max-width: 400px) {
	
}