/******************** GENERAL ADJUSTMENTS ********************/                                                                                                            
body, html {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
    overflow: visible;
    overscroll-behavior: none; 
} 

/* lock body */  
body {
	width: 100%; 
	height: auto;  
	position: fixed; 
	top: 0;
	left: 0;
	right: 0;
}

/* all elements */
* {                 
	margin: 0px auto;
	padding: 0px;
	box-sizing: border-box;
}

/* font family */
h1, h2, h3, h4, h5, h6, p, a, label, input, input[type=file]::file-selector-button { 
	font-family: 'Montserrat', sans-serif;
}

/* link */ 
a, a:hover {
	text-decoration: none;
} 

/* background image */
.background {
	background-size: cover;
	background-position: 50% 50%;
} 

/* fill-parent */ 
.fill-parent {
	width: 100%;
	height: 100%; 
}   








/******************** PAGE LOADER ********************/
#PageLoader {          
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 9999999999;
    background-color: #70757f;
    opacity: 1;
    pointer-events: auto;
    transition: 500ms;
}

#PageLoader.deactivate {
    opacity: 0;
    pointer-events: none;
}

/* dvh */
@supports (height: 100dvh) {
    #PageLoader { height: 100dvh; }
}

/* loader */
#PageLoader img {
    display: block;
    height: 50px;
    position: relative;
    top: calc(50% - 35px);
}








/******************** NAV SECTION ********************/ 
#LoginNavSection {
	width: 50vw;
	height: 100vh; 
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #70757f;
}

/* dvh */
@supports (height: 100dvh) {
    #LoginNavSection { height: 100dvh; }
}

/* nav */
#LoginNav {
	width: auto;
	height: 70px;
	padding: 0px 23px;
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 9999;
	background-color: white;
	border-radius: 10px;
}

#LoginNav img {
	display: inline-block;
	width: auto;
	height: 25px;
	position: relative;
	top: 23px;
}

#LoginNav #Logo {
	margin-left: 30px; 
}

/* image */
#LoginNavSection #LoginNavImage {
	opacity: 0.4;
	background-image: url("../../Assets/Images/bg_login.png");       
}







  
/******************** IN APP ALERTS ********************/ 
#AequusAlerts {                        
    width: 250px;
    height: auto;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999999999;
}

/* notif */
#AequusAlerts .aeq-alert {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    padding: 15px 0px 15px 65px;
    position: relative;
    top: 30px;
    opacity: 0;
    background-color: rgb(200,200,200);
    border-radius: 20px; 
}

/* notif icon */
#AequusAlerts .aeq-alert .aeq-alert-icon {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px; 
    border-right: 1px solid white; 
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

#AequusAlerts .aeq-alert .aeq-alert-icon img { 
    width: 20px;
    height: auto;
    position: absolute;
    top: calc(50% - 13px);
    left: 15px;
}

/* notif body */
#AequusAlerts .aeq-alert p {
    padding-right: 20px;  
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: white; 
}








/******************** WELCOME SECTION AND CAROUSEL ********************/ 
#WelcomeSection {         
	width: 50vw;
	height: 100vh;
	position: absolute;
	top: 0px;
	right: 0px;
	background-color: #70757f;
}

/* dvh */
@supports (height: 100dvh) {
    #WelcomeSection { height: 100dvh; }
}

/* carousel */
#WelcomeCarousel {   
    width: 500px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: calc(50% - 250px); 
    overflow: hidden;
}

#WelcomeCarousel #WelcomeCarouselInner {
    width: 2000px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    transition: 300ms;  
}

/* slide */
#WelcomeCarousel #WelcomeCarouselInner .wc-slide {
    display: inline-block; 
    width: 500px; 
    height: 100%;
    margin-right: 50px; 
    float: left;
    overflow-y: scroll;
    overscroll-behavior: contain;  
    -webkit-overflow-scrolling: touch; 
    text-align: center; 
} 
  
/* inner */
.wc-slide-inner {   
	width: 450px; 
    padding-bottom: 100px;
    position: relative;
    top: 250px; 
}








/******************** DOT NAV ********************/ 
#DotNav {
	display: none !important;
	width: 100%;
	height: 100px;
	padding-top: 25px;
	position: absolute;
	left: 0px;
	top: 0px; 
	z-index: 9999;
	text-align: center;
	background-color: #70757f;
	border-bottom: 1px solid rgba(0,0,0,0.2);
}

#DotNav.active {
	display: block !important; 
}

#DotNav img {
	display: inline-block;
	width: 30px;
	height: 30px;
	padding: 10px;
	position: relative;
	top: 10px;
	opacity: 0.2;
	cursor: pointer; 
	border: 1px solid white;
	border-radius: 100%;
	transition: 1s;
}

#DotNav img:hover {
	opacity: 1;
}

#DotNav h1 {
	display: inline-block;
	margin: 0px 35px;
	opacity: 0.2;
	cursor: pointer;   
	font-size: 12px;
	color: white;
	transition: 1s;
}

#DotNav h1:hover,
#DotNav h1.active {
	opacity: 1;
}

#DotNav .dotnavdivider {
	display: inline-block;
	width: 40px;
	height: 1px;
	position: relative;
	bottom: 3px;
	opacity: 0.2;
	background-color: black;
}

#DotNav br.mobile {
	display: none;
}










/******************** FORM FIELDS ********************/ 
/* text header */       
.wc-text {
	margin-bottom: 65px;
}

.wc-text h1 {
	font-size: 35px;
	color: black; 
}

.wc-text p {
	margin-top: 5px;
	font-size: 15px;
	font-weight: 300;
}

/* hide el */ 
.form-el-hide {
	display: none !important;  
}

.form-el-hide.active {
	display: block !important;
} 

/* input outer */
.wc-input-outer { 
	display: inline-block; 
	width: 100%;
	height: auto;
	position: relative;
	float: left;
}

.wc-input-outer.col-1-2 { 
	width: calc(50% - 5px); 
}

.wc-input-outer.col-1-3 {
	width: calc(33.3333333333% - 6.666666667px);
}

.wc-input-outer.col-1-4 {
	width: calc(25% - 7.5px);
}

.wc-input-outer.full {
	display: block;
	width: 100%;
	float: none;
}

/* input label */
.wc-input-outer label {
	display: block;
	width: 100%;
	padding-bottom: 5px;
	padding-left: 2px;
	text-align: left;
	font-size: 14px;
	font-weight: 400;  
	color: rgba(0,0,0,0.5);
}

/* input */
.wc-input {  
	height: 45px; 
	width: 100%;
	padding-left: 10px;  
    background-color: transparent;
	font-size: 14px;
	font-weight: 300;
    color: white;
	border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
    transition: 1s;
} 

.wc-input:focus {
	outline: none;
	border: 1px solid white;
}

/* two btns */  
.wc-twobtns {
	height: 45px;
}

.wc-twobtns h2 {
	display: inline-block;
	width: calc(50% - 5px);
	height: 45px;
	padding-top: 14px;
	float: left;
	cursor: pointer;
	background-color: rgba(0,0,0,0.5);
	font-size: 14px;    
    border-radius: 15px;
	color: white;
	transition: 1s; 
}

.wc-twobtns h2.active,
.wc-twobtns h2:not(.active):hover {
	opacity: 0.5;
}   

/* password show icon */
.show-password {
    width: auto;
    height: 12px;
    position: absolute;
    bottom: 16px;	
    right: 15px;
    z-index: 2; 
    opacity: 0.3;
    cursor: pointer;
    transition: 1s;
}

.show-password:hover {
	opacity: 1;
}

/* continue */
.wc-continue {
	width: 100%;
	height: 45px;
	padding-top: 14px;
	cursor: pointer; 
	font-size: 14px;
    border-radius: 15px;
	color: black;
	border: 1px solid black; 
    transition: 1s;
}

.wc-continue:hover {
	opacity: 0.5;
}

/* error msg */
.wc-error-messages {
	width: 100%;
	padding-top: 20px;
	text-align: left;
}

.wc-error-messages p {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 400;
	color: rgba(0,0,0,0.5); 
}

.wc-error-messages p span {
	font-weight: bold;
	padding-right: 10px; 
}

.wc-error-messages p:nth-child(1) {
	padding-top: 25px;
	border-top: 1px solid rgba(0,0,0,0.1); 
}
 
/* dividers */
.wc-divider-clear {
	width: 100%;
	height: 1px;
	clear: both;
}

.wc-divider-show {
	width: 100%;
	height: 1px;
	margin: 30px 0px;
	clear: both;
	background-color: rgba(0,0,0,0.1);
}

/* margin */
.wc-mar-top { margin-top: 30px; }
.wc-mar-top-small { margin-top: 10px; }
.wc-mar-bottom { margin-bottom: 30px; }
.wc-mar-bottom-small { margin-bottom: 10px; }
.wc-mar-right { margin-right: 10px; }  
.wc-mar-right-small { margin-right: 10px; }







 
/******************** MEMBERSHIP AREA ********************/ 
/* account tiers */                
.account-tier {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 30px;
	padding: 20px;
	cursor: pointer;
	text-align: left;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 20px;
	transition: 1s; 
}

.account-tier:hover,
.account-tier.active {
	background-color: rgba(255,255,255,0.2);
}

.account-tier.t3 {
	margin-bottom: 0px; 
}

.account-tier h1 {
	margin-bottom: 20px;
	padding-bottom: 5px;
	position: relative;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	color: white;
}

.account-tier h1 span {
	position: absolute;
	bottom: 5px;
	right: 0px;
	font-size: 14px;
	font-weight: 300;
	color: rgba(255,255,255,0.5); 
}

.account-tier p {
	font-size: 14px;
	font-weight: 400;
	color: rgba(0,0,0,0.5); 
}

/* payment form */   
#Tier3PaymentForm .t3pf-ordersummary {
	text-align: left;
	line-height: 1;
}

#Tier3PaymentForm .t3pf-ordersummary h1 {
	padding-bottom: 5px;
	position: relative;
	font-size: 20px;
	font-weight: bold;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	color: rgba(0,0,0,0.5);
}

#Tier3PaymentForm .t3pf-ordersummary h1 span {   
	position: absolute;
	bottom: 6px;
	right: 0px;
	font-size: 14px;
	font-weight: 300;
}

#Tier3PaymentForm .t3pf-ordersummary p {
	margin-top: 15px;
	font-size: 14px;
	font-weight: 400;
	color: rgba(0,0,0,0.5);
}

/* stripe card fields */       
#Tier3PaymentForm #login-card-element {
    height: 45px; 
    padding: 15.5px; 
	border: 1px solid rgba(255,255,255,0.2);
    border-radius: 15px;
}







  
/******************** RESET MODAL ********************/ 
#ResetModal {        
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
	z-index: -1;
    opacity: 0;
	background-color: #70757f;  
	transition: 1s;
}

#ResetModal.active {
	z-index: 999;
	opacity: 1;
}

/* close btn */
#ResetModal #ResetModalClose {
	width: 100px;
	height: 40px;
	padding-top: 12px;
	position: absolute;
	top: 15px;
	left: calc(50% - 50px);
	z-index: 99;
	background-color: white;
	text-align: center;
	font-size: 12px;
	border-radius: 10px;
	color: #70757f;
}

/* inner */
#ResetModal .reset-modal-inner {
	width: 300px;
	height: calc(100% - 100px);
	position: absolute;
	top: 120px;
	left: calc(50% - 150px);
	z-index: 9;
	text-align: center; 
	overflow-y: scroll;
}

/* content */
#ResetModal .reset-modal-content {
	width: 100%;
	height: auto;
	padding-bottom: 100px;
}

#ResetModal .wc-text {
	margin-bottom: 40px;
}

#ResetModal .wc-text h1 {
	font-size: 30px;
}

#ResetModal .wc-text p {
	font-size: 13px;
}

#ResetModal h2 {
	width: 100%;
	height: 45px;
	padding-top: 14px;
	cursor: pointer; 
	font-size: 14px;
    border-radius: 15px;
	color: black;
	border: 1px solid black; 
    transition: 1s;
}

#ResetModal h2:hover {
	opacity: 0.5;
}

/* link */
.reset-pw-link {
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	text-decoration: underline;
	font-weight: 500;
	transition: 1s;
}

.reset-pw-link:hover {
	opacity: 0.3;
}








/******************** LOADING ********************/ 
#LoadingScreen {   
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
	z-index: -1;
    opacity: 0;
	background-color: rgba(252,252,252);
	text-align: center;
	transition: 1s; 
}

#LoadingScreen.active {
	z-index: 999999; 
	opacity: 0.75;
}

#LoadingScreen img {
	width: auto;
	height: 300px;
	position: relative;
	top: calc(50% - 150px);
}








/****************************************************/ 
/******************** MOBILE ********************/       
/****************************************************/ 








/******************** PAGE LOADER ********************/

/********* 550px *********/ 
@media (max-width: 550px) {   
#PageLoader img {
    height: 30px;
    top: calc(50% - 25px);
}
}








/******************** NAV SECTION ********************/ 

/********* 800px *********/ 
@media (max-width: 800px) {     
#LoginNavSection {
	width: 40px;   
	border-right: 1px solid rgba(255,255,255,0.2);   
}

/* nav */
#LoginNav {
	width: 40px;   
	height: 100%;   
	padding: 0px !important;   
	top: 0px;   
	left: 0px;   
	border-radius: 0px;   
	background-color: transparent;   
}

#LoginNav img {
	display: block;   
	height: 20px;   
	top: 30px;   
}

#LoginNav #Logo {
	margin-left: 0px;   
	position: absolute;    
	top: auto;   
	bottom: 75px;   
	/* top: 128px; */
	left: -37px;   
	transform: rotate(90deg);   
}

/* image */
#LoginNavSection #LoginNavImage {
	display: none;   
}
}








/******************** WELCOME SECTION AND CAROUSEL ********************/ 
                       
/********* 1050px *********/ 
@media (max-width: 1050px) {     
#WelcomeCarousel {   
    width: 300px;   
    left: calc(50% - 150px);     
}

#WelcomeCarousel #WelcomeCarouselInner {
    width: 1200px;    
}

/* slide */
#WelcomeCarousel #WelcomeCarouselInner .wc-slide {
    width: 300px;   
} 

/* inner */
.wc-slide-inner {   
	width: 300px;   
    top: 200px;    
}
}

/********* 800px *********/ 
@media (max-width: 800px) {     
#WelcomeSection {
	width: calc(100% - 40px);   
}

/* inner */
.wc-slide-inner {   
    top: 135px;    
}
}








/******************** DOT NAV ********************/ 
     
/********* 1050px *********/ 
@media (max-width: 1050px) {     
#DotNav {  
	height: 80px;   
	padding-top: 19px;   
}

#DotNav img {
	width: 25px;   
	height: 25px;   
	padding: 8px;   
	top: 9px;   
	opacity: 0.3;   
}

#DotNav h1 {
	margin: 0px 15px;   
	font-size: 9px;   
}

#DotNav .dotnavdivider {
	width: 20px;   
	bottom: 2.5px;   
} 
}








/******************** FORM FIELDS ********************/ 
    
/********* 1050px *********/ 
@media (max-width: 1050px) {     
/* text header */       
.wc-text {
	margin-bottom: 56px;   
}

.wc-text h1 {
	font-size: 30px;   
}

.wc-text p {
	margin-top: 4px;   
	font-size: 13px;   
}

/* input label */
.wc-input-outer label {
	font-size: 12px;   
}

/* input */
.wc-input {
	font-size: 12px;   
} 

/* two btns */   
.wc-twobtns h2 {
	padding-top: 15px;   
	font-size: 12px;     
}

/* continue */
.wc-continue {
	padding-top: 15px;   
	font-size: 12px;   
}

/* error msg */
.wc-error-messages p {
	font-size: 11px;   
}
}








/******************** MEMBERSHIP AREA ********************/ 
   
/********* 1050px *********/ 
@media (max-width: 1050px) {     
/* account tiers */      
.account-tier h1 {
	padding-bottom: 4px;   
	font-size: 18px;   
}

.account-tier h1 span {
	bottom: 4px;   
	font-size: 13px;   
}

.account-tier p {
	font-size: 13px;   
}

/* payment form */    
#Tier3PaymentForm .t3pf-ordersummary h1 {
	padding-bottom: 4px;   
	font-size: 18px;   
}

#Tier3PaymentForm .t3pf-ordersummary h1 span {
	bottom: 5px;   
	font-size: 13px;   
}

#Tier3PaymentForm .t3pf-ordersummary p {
	font-size: 13px;   
}
}








/******************** RESET MODAL ********************/ 

/********* 1050px *********/ 
@media (max-width: 1050px) {      
/* close btn */
#ResetModal #ResetModalClose {
	width: 90px;   
	padding-top: 14px;   
	left: calc(50% - 45px);   
	font-size: 11px;   
}

/* content */
#ResetModal h2 {
	padding-top: 15px;   
	font-size: 12px;    
}
}








/******************** LOADING ********************/ 
  
/********* 1050px *********/ 
@media (max-width: 1050px) {  
#LoadingScreen img {
	height: 200px;
	top: calc(50% - 100px);
}
}