/* /// MOBILE Screen Resize ///
╭━━━━━━━━━━━━━╮
┃━━━●━══━━━━━┃
┃███████┃
┃███████┃
┃███████┃
┃███████┃
┃███████┃
┃███████┃
┃━━━━━ ○ ━━━━━┃
╰━━━━━━━━━━━━━╯

find specific devices here:
viewportsizer.com/devices
www.mydevice.io/#compare-devices
stackoverflow.com/questions/23841812/how-to-calculate-device-pixel-ratio

calculate:
actual screen size / (PPI / 150 or 132 - best variable) = X
1920 / (261 / 150) = X
*/


/*
.mobile-orientation {display: none}
@media only screen and (orientation:portrait) {
	.mobile-orientation {display: block}
	.mobile-orientation.hide {display: none}
	.mobile-fullscreen-close {top: 0; right: 0}
	@media only screen and (min-width: 640px) {
		 avoid targeting on Tablets 
	}
}
@media only screen and (orientation:landscape) {
	.mobile-orientation {display: none}
	.mobile-fullscreen-close {bottom: 0; right: 0}
}
*/
@media only screen and (max-width: 2400px) {
}
@media only screen and (max-width: 2100px) {
	.bg-layer-container .bg-layer-shading {width: 50%;}
}
/* ASUS Laptop */
@media only screen and (max-width: 1920px) {
	
}
@media only screen and (max-width: 1800px) {
	.slide-indicator-wrap {bottom: 34px}
}
@media only screen and (max-width: 1500px) {

}
/* iPad Pro 12.9 - 1366x1024 */
@media only screen and (max-width: 1366px) {
	.bg-layer-container .bg-layer-shading {width: 85%;}
	.slide-indicator-wrap {bottom: 28px}
}
/* Samsung Galaxy Tab A8 - 1280x800 */
@media only screen and (max-width: 1280px) {
	.com-overlay-popup .com-popup-animation.width-1280 {top: 24px; width: 98%} /*course player specific*/
}
/* iPad Air 2020 - 1180x820 */
@media only screen and (max-width: 1180px) {
	.slide-indicator-wrap {bottom: 24px}
}
/* iPad 9.7 2017 - 1024x768 */
@media only screen and (max-width: 1024px) {
	.course-box-shader-wrap {padding-left: 0; padding-right: 0;}
	.content-width {width: 100%}
	.content-width-smaller {width: 100%}
}
@media only screen and (max-width: 900px) {
	.content-course-width {width: 760px}
}
@media only screen and (max-width: 870px) {
	.com-overlay-popup .com-popup-animation.width-864 {width: 98%}
}
@media only screen and (max-width: 800px) {
	.content-course-width {width: 100%}
	.com-overlay-popup .com-popup-animation.width-764 {width: 98%}
	.com-content .course-holder-wrap {margin-top: -10px}
	.course-box-shader-wrap, .emulate-course-box-shader-wrap {padding-left: 0px; padding-right: 0px;}
	.com-cookie-notification .com-cookie-content-width {width: 100%}
	header.user-is-guest .ee-nav .menu-logo.eku.legacy {width: 76px; margin-top: 11px;}
	.menu-logo-title .title-2 {display: none;}
	
	.slider-foreground.hero-slider-mno {background-size: cover;}
	.hero-text-wrap .hero-text.hero-text-slider-def {margin-right: 120px}
	.hero-text-wrap .hero-text.hero-text-slider-mno {margin-left: 240px}
}
@media only screen and (max-width: 720px) {
	footer .side-wrap.width-20 {width: 50%}
	.com-overlay-popup .com-popup-animation.default-width {width: 98%}
	.com-overlay-popup .com-popup-animation.width-700 {width: 98%}
	.com-popup.cart .progress-bar {padding-left: 0; padding-right: 0;}
	
	.course-box .right .course-lpaths-wrap {width: 90%} 
	.course-box .right .course-main-img-wrap {display: none}
	.com-content .course-box .course-box-top .new-box-wrap {width: 40%}
	
	.ee-scrollbox > .width-50 {width: 100%}
	.ee-scrollbox .ee-scrollbox-right-pad, .ee-scrollbox .ee-scrollbox-right-pad + .ee-scrollbox-right-pad{padding-left: 5px; padding-right: 20px}
}
@media only screen and (max-width: 640px) {
	.com-popup.cart .progress-bar-bottom .progress-bar-text {font-size: .75rem; line-height: 1}
}
@media only screen and (max-width: 600px) {
	.ee-nav .default-btn.login {min-width: 12px; padding-left: 10px; padding-right: 10px;}
	.ee-nav .default-btn.login.user-is-cm {background-image: none; padding-left: 9px; padding-right: 8px}
	
	.req-extra-stu-data-body .content-width-smaller .left {padding-right: 0; width: 55%;}
	.req-extra-stu-data-body .content-width-smaller .right {padding-left: 30px; width: 45%;}
	.extra-business-data-form-wrap {width: 80%}
	
	.com-cookie-notification .com-cookie-content-width > .width-75 {width: 60%}
	.com-cookie-notification .com-cookie-content-width > .width-25 {width: 40%}
	/*.com-cookie-notification.da {height: 148px;}*/
	.com-popup.cookie-policy .body .cookie-policy-bottom .default-btn.support,
	.com-popup.cookie-policy .cookie-policy-bottom .default-btn {padding: 0; min-width: 205px;}
	.com-cookie-notification .default-btn {padding: 0;}
}
@media only screen and (max-width: 550px) {
	.req-extra-stu-data-body .content-width-smaller .left {width: 80%}
	.req-extra-stu-data-body .content-width-smaller .right {
		padding-left: 0; 
		padding-top: 28px;
		text-align: center;
		text-align-last: center;
		width: 100%; 
	}
	.req-extra-stu-data-body .content-width-smaller .right .cert-desc-right {padding-left: 15px;}
	.req-extra-stu-data-body .confirm-btn-wrap {
		width: 80%;
		text-align: center;
		text-align-last: center;
	}
	.req-extra-stu-data-body .confirm-btn-wrap .default-btn {
		padding-left: 39px;
		padding-right: 42px;
		height: 37px;
	}
	.req-extra-stu-data-body .confirm-btn-wrap .default-btn .text-normal {
		font-size: .875rem;
		letter-spacing: .25px;
		padding-bottom: 1px;
	}
	.customer-type-wrap {width: 100%}
	.com-popup.cart .bill-details-container .left, .com-popup.cart .bill-details-container .right,
	.com-popup.cart .cart-payment-method-wrap .left, .com-popup.cart .cart-payment-method-wrap .right {width: 95%; padding-right: 0; padding-left: 0}
	.com-popup.cart .bill-details-container .right {padding-top: 12px;}
	
	.hero-text-wrap .hero-text.hero-text-slider-mno {margin-left: 140px; margin-top: 20px;}
}
@media only screen and (max-width: 500px) {
	.com-content .course-holder-wrap {margin-top: 0}
	.bg-layer-container .bg-layer-shading {width: 135%;}
	/*.com-overlay-popup .com-popup {border-radius: 6px}*/
	/*.com-popup.cart .progress-bar {border-radius: 0 0 6px 6px}*/
	.com-popup.cart .progress-bar-bottom .inactive .progress-bar-text {font-weight: 600}
	.com-overlay .side-menu-holder {width: 90%}
	.com-overlay .side-menu-holder.left .side-menu.inactive {transform:translateX(-100%)}
	.com-overlay .side-menu-holder.right .side-menu.inactive {transform:translateX(100%)}
	
	.com-content .course-holder-wrap, footer {padding-left: 10px; padding-right: 10px}
	
	.com-overlay-popup .com-popup-animation.width-430 {width: 98%}
	.com-overlay-popup .com-popup-animation.width-472 {width: 98%}
	.com-overlay-popup .com-popup-animation.width-512 {width: 98%}
	
	.slide-indicator-wrap {bottom: 18px}
	.hero-text-wrap .hero-text.hero-text-slider-abc {margin-left: 210px}
	.hero-text-wrap .hero-text.hero-text-slider-abc .text-1 {margin-top: 10px; font-size: 1.7rem; line-height: 1.7rem}
	.hero-text-wrap .hero-text.hero-text-slider-abc .text-2 {font-size: 2.2rem; line-height: 2.5rem}
	.hero-text-wrap .hero-text.hero-text-slider-abc .text-3 {font-size: 2rem; line-height: 2rem}
	
	.hero-text-wrap .hero-text.hero-text-slider-def {margin-top: 14px; margin-right: 100px}
	.hero-text-wrap .hero-text.hero-text-slider-def .text-1 {font-size: 1.5rem; line-height: 1.55rem}
	.hero-text-wrap .hero-text.hero-text-slider-def .text-2 {font-size: 2rem; line-height: 2.1rem}
	
	.hero-text-wrap .hero-text.hero-text-slider-ghi .text-1 {font-size: 2.1rem; line-height: 2.3rem}
	.hero-text-wrap .hero-text.hero-text-slider-ghi .text-2 {font-size: 1.2rem; line-height: 1.4rem}
	
	.hero-text-wrap .hero-text.hero-text-slider-jkl {margin-top: 10px; margin-left: 160px}
	.hero-text-wrap .hero-text.hero-text-slider-jkl .text-1 {font-size: 1.2rem; line-height: 1.4rem;}
	.hero-text-wrap .hero-text.hero-text-slider-jkl .text-2 {font-size: 2.2rem; line-height: 2.4rem;}
	
	.stu-details-wrap-padding {padding-left: 5px; padding-right: 5px;}
	.stu-details-edit-wrap .stu-input-field-wrap, .stu-details-edit-wrap .stu-course-select-wrap {width: 100%; padding-left: 5px}
	.multi-stu-select-bottom .left {padding-left: 12px}
	.multi-stu-select-bottom .right {padding-right: 8px}
	
	.stu-input-field-wrap, .stu-course-select-wrap {padding-right: 10px}
	
	.stu-input-field-wrap .top-title, .stu-course-select-wrap .top-title {padding-left: 2px}
	.stu-details-save-wrap .left {width: 100%}
	
	.course-box {display: block;}
	.course-box > .left {width: 100%}
	.course-box .left > .width-30 {width: 18%}
	.com-content .course-box .course-box-top .new-box-wrap {width: 85%}
	.course-box > .middle {display: none}
	.course-box > .right {width: 100%; padding-top: 15px}
	.course-box-bottom .course-box-lang {display: none}
	
	.com-popup.cart .support-btn-wrap.active .support-btn-subtext {padding-left: 2px;}
	.com-popup.cart .default-btn.cart-next-btn {min-width: 100%; width: 100%}
	.com-popup.cart .default-btn.cart-next-btn p {padding-left: 0}
	
	.customer-type-container {padding-left: 5px; padding-right: 5px;}
	.customer-type-wrap > .left {padding-right: 7px}
	.customer-type-wrap > .right {padding-left: 7px}
	.customer-type-wrap .customer-type-box .customer-type-box-inside-wrap {padding-left: 2px; padding-right: 2px;}
	.customer-type-wrap .customer-type-box .bg-shape-bottom .graphics {margin-bottom: -12px; padding-left: 10px; padding-right: 10px;}
	.customer-type-wrap .customer-type-box .bg-shape-bottom .graphics .card {width: 40px}
	.customer-type-wrap .customer-type-box .bg-shape-bottom .graphics .house {width: 70px}
	.customer-type-wrap .customer-type-box .bg-shape-bottom .graphics .skyscraper {width: 23px}
	.customer-type-wrap .customer-type-box .bg-shape-bottom .graphics .briefcase {width: 29px}
	.customer-type-wrap .customer-type-box .bg-shape-bottom .graphics .industrial-park {width: 45px}
	.customer-type-wrap .customer-type-box.business .bg-shape-bottom .graphics {margin-bottom: -31px;}
	
	.com-popup.cart .bottom-order-overview-table .lang-icon-wrap.mini-ver {padding-left: 0}
	
}
@media only screen and (max-width: 400px) {
	.ee-nav .default-btn.support {min-width: 12px; padding-left: 11px; padding-right: 11px;}
	.com-overlay-popup .com-popup.token-error {padding-left: 20px; padding-right: 20px}
	.com-overlay-popup .com-popup.token-error .body {padding-left: 0; padding-right: 0}
	.com-overlay-popup .com-popup.token-error .bottom {padding-left: 5px; padding-right: 5px}
	.com-popup.token-error .popup-bg-layer {width: 210%; opacity: .45}
	
	.hero-text-wrap .hero-text.hero-text-slider-abc {margin-left: 150px}
	.hero-text-wrap .hero-text.hero-text-slider-abc .text-1 {margin-top: 5px; font-size: 1.6rem; line-height: 1.6rem}
	.hero-text-wrap .hero-text.hero-text-slider-abc .text-2 {font-size: 2rem; line-height: 2.3rem}
	.hero-text-wrap .hero-text.hero-text-slider-abc .text-3 {font-size: 1.8rem; line-height: 1.8rem}
	.hero-text-wrap .hero-text.hero-text-slider-abc .default-btn {
		margin-left: 3px;
		padding: 0 15px 0 15px;
		height: 32px;
	}
	.hero-text-wrap .hero-text.hero-text-slider-def {margin-top: 8px; margin-right: 100px}
	.hero-text-wrap .hero-text.hero-text-slider-ghi .hero-text-shape {margin-top: 10px}
	.slider-foreground.hero-slider-mno {background-size: contain;}
	
	.com-cookie-notification .com-cookie-content-width .width-80 {width: 70%}
	.com-cookie-notification .com-cookie-content-width .cookie-icon {width: 100px}
	.com-cookie-notification .com-cookie-content-width .text-large {font-size: .95rem; line-height: 1.42rem}
	.com-cookie-notification .com-cookie-content-width .width-20 {width: 26.5%; padding: 0 1.5% 0 2%}
	.com-cookie-notification .default-btn-wrap {padding: 0}
	.com-popup .body.cookie-policy {padding: 0 8px 0 2px}
	.com-popup .body.cookie-policy .col-padding {padding: 0 8px 0 15px;}
	.course-holder-wrap-topbar .default-btn.pay-invoice {padding-left: 15px; padding-right: 19px;}
	
	.com-popup.cart .top, .com-popup.cart .body, .com-popup.cart .cart-nav-bar {padding-left: 15px; padding-right: 15px}
	.cart-order-overview-table .course-icon-col {width: 54px}
	.com-popup.cart .cart-order-overview-table .course-title-col {padding-left: 5px}
	.cart-order-overview {padding: 0 10px 0 4px}
	.com-popup.cart .quantity-box {width: 28px}
	.com-popup.cart .quantity-box p {font-size: .85rem; line-height: 1rem}
	.confirmation-box-wrap {width: 100%}
	
	.com-popup.cart .total-price-container .left {width: 40%}
	.com-popup.cart .total-price-container .right {width: 60%}
	.cart-order-overview-table .course-quantity-col {width: auto}
	
	.settings-shortcuts-wrap .default-btn {height: 30px}
	.settings-shortcuts-wrap .btn-text {font-size: .85rem; line-height: 1.2rem}
	.com-overlay .side-menu-holder.right .side-menu {padding: 0 15px 0 25px}
	
	.com-content .course-holder-wrap {padding-left: 6px; padding-right: 6px}
	
	.req-extra-stu-data-body .content-width-smaller .left {width: 90%}
	
	.customer-type-wrap .customer-type-box .default-btn {
		padding-left: 14px;
		padding-right: 18px;
		height: 28px;
	}
	.customer-type-wrap .customer-type-box .default-btn p {
		font-size: .825rem;
		line-height: 1.25rem;
	}
	.extra-business-data-form-wrap {width: 80%}
	.com-popup.cart .course-title-col .lang-icon-wrap {display: none}
	.com-popup.cart .cart-payment-method-wrap {padding-right: 4px; padding-left: 4px}
	.com-popup.cart .bottom-order-overview-table .bottom-order-course-title {padding-left: 4px}
	.com-popup.cart .bottom-order-overview-table .bottom-order-course-amount {padding-left: 7px}
}
@media only screen and (max-width: 350px) {
	/* phones */
}