/*==========  Mobile First Method  ==========*/

.login-overlay-wrapper{
    width: 100%;   
	background-image: url('../img/login-bg.jpg'); 
    background-size: cover; /* This ensures the image covers the entire header */
    background-position: center; /* This centers the image within the header */
    background-repeat: no-repeat; /* This prevents the image from repeating */
	height: 110vh; /* Adjust the height as needed */  
    position: relative;         
    z-index: 900;
}

.login-overlay-wrapper {
  background-image: url('../img/login-bg-pec.jpg');  
}

.nav-login{
    border-bottom:0px;
}

.nav-login .nav-link{
    color:white;
    padding:0px;
    font-size:16px;
    margin-right: 30px; 
    border:0 !important;    
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    color: #e94e25;
    border-color:transparent;
}

.nav-tabs.nav-login .nav-item.show .nav-link, .nav-tabs .nav-link.active{
    background-color:transparent;
    color:#E34E25;
    border:0px;
    font-weight:400;
}     

.nav-item:focus-visible{
    outline: none;    
}   

.login-mobile{
    position:relative;
    top:120px;
    left:15px;        
}  

.login-overlay-wrapper.overlay-show {
    visibility: visible;
}

.login-wrapper{
	width:100%;
	max-width:500px;
    text-align:left;        
    padding-left:15px;
    padding-right:15px;
    position:relative;
    top:200px;
    left:0px;   
}

.orange{
    color:#e56714;
    text-decoration:none;
}

.login-wrapper .btn{
    margin-top:30px;
}

.login-wrapper .btn, .custom-input{
    width:100%;
}

.email-input{
    margin-bottom:15px;
    margin-top:30px;
}

.form p{
    font-style:italic;
    font-size:16px !important;
    margin-top:5px;
}

.w2ncloud-link{
	color:white !Important;
}

.w2ncloud-link:hover{
	color:#e56714 !Important;
}



	/* Custom, iPhone Retina */ 
	@media only screen and (min-width : 320px) {
		
	}

	/* Extra Small Devices, Phones */ 
	@media only screen and (min-width : 480px) {

	}
    
	/* Extra Small Devices, Phones */ 
	@media only screen and (min-width : 530px) {


	}    

	/* Small Devices, Tablets */
	@media only screen and (min-width : 768px) {
    
    .login-mobile{
        top:120px;
        left:70px;          
    } 
               
    .login-wrapper{
        position:relative;
        top:250px;
        left:50px;
    }

	}

	/* Medium Devices, Desktops */
	@media only screen and (min-width : 992px) {
        
    .login-mobile{
        display:none;
    }

    .login-overlay-wrapper{
        display: inline-block;
    }        

    .login-overlay-wrapper .menu{
        left: 240px;
    }     
    
    .login-wrapper{
        position:relative;
        top:150px;
        left:150px;
    }
          
     
	}

	/* Large Devices, Wide Screens */
	@media only screen and (min-width : 1200px) {   
       
    .login-wrapper{
        top:200px;
        left:360px;
        max-width:600px;
    }       
       
    .nav-login .nav-link{
        font-size:18px;
    }
    
    .login-overlay-wrapper .menu{
        left: 396px;
    }     

	}  
    
    /* Large Devices, Wide Screens */
	@media only screen and (min-width : 1400px) {


	}
    
    /* Large Devices, Wide Screens */
	@media only screen and (min-width : 1600px) {

    .login-wrapper{
		top:300px;
        left:490px;
    } 

    .nav-login .nav-link{
        font-size:24px;
    }   

    .login-overlay-wrapper .menu{
        left: 510px;
    }     

	}
    
    /* Large Devices, Wide Screens */
	@media only screen and (min-width : 1900px) {

    .login-wrapper{
        left:560px;
    } 

    .login-overlay-wrapper .menu{
        left: 580px;    
        top:122px;        
    }         

	}
    
    /* Large Devices, Wide Screens */
	@media only screen and (min-width : 2500px) {

    .login-wrapper{
		top:400px;	
        left:650px;
        max-width:725px;
    } 

    .nav-login .nav-link {
        font-size: 28px;
        margin-right:110px;
    }
    
    .login-overlay-wrapper .menu{
        left: 680px;
    }   


	}