/*
Import based font for site using Bunny.NET rather than Google Fonts because Bunny doesn't track IP address,
and it's faster!
*/
/* @import url(https://fonts.bunny.net/css?family=nunito-sans:400,600,700,800,900); */
@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
/*
Set default font size for login - all other font sizing is relative to this size.
*/

body.login {
   font-size: 18px;
   font-family: 'Inter', sans-serif;
   font-weight: 400;
}

body.login div#login {
   width: 100%;
}
body.login div#login h1 {}
body.login div#login h1 a {}

body.login div#login form#loginform, 
body.login div#login form#lostpasswordform {
   background: none;
   border: 0px none;
   box-shadow: none;
}

body.login div#login form#loginform p {}
body.login div#login form#loginform p label,
body.login div#login form#lostpasswordform p label,
body.login div#login form#loginform label,

body.login div#login form#lostpasswordform label {
   font-size:0.95rem;
}

body.login div#login form#loginform input,
body.login div#login form#lostpasswordform input {
   border: 1px solid rgba(36,59,83,.5);
   border-radius: 5px;
   background: #fff;
   padding: 11px 10px;
   position: relative;
   z-index: 10;
}

body.login div#login form#loginform input#user_login,
body.login div#login form#lostpasswordform input#user_login {
   font-size: 1.8rem;
}
body.login div#login form#loginform input#user_pass {

   font-size: 1.8rem;

}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {
   padding: 32px;
   height: 18px;
   width: 18px;
   font-size: 1rem;
   line-height:18px;
}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit,
body.login div#login form#lostpasswordform p.submit input#wp-submit,
div#wfls-prompt-wrapper p.submit input#wfls-token-submit {
   background: #714bb7 !important;
   padding: 8px 32px 8px 32px;
   font-size: 1rem;
   font-weight: 600;
   width: 100%;
   margin-top: 24px;
}



div#wfls-prompt-wrapper p.submit input#wfls-token-submit {
   z-index: 110;
}


body.login div#login form#loginform input#wp-submit:hover,
body.login div#login form#lostpasswordform input#wp-submit:hover,
#wfls-token-submit:hover {
   box-shadow: 0 0 0 2px #fff, 0 0 0 4px #714bb7;
}
body.login div#login p#nav {
   position: relative;
   top: -165px;
   display: flex;
   justify-content: flex-end;
   align-content: flex-end;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: stretch;
   align-items: center;
   text-decoration:underline dotted;
   font-size: 0.9rem;
}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {
   display: none;
}

body.login-action-lostpassword div#login p#nav {
   top: 0px !important;

}

body.login div#login p#backtoblog a {}

.login .button.wp-hide-pw {
   z-index: 50;
}
.login #login_error {
    border-left-color: #d63638;
    margin-left: 20px;
    background: #d6363840;
    margin-right: 20px;
}

.login #login_error, .login .message, .login .success {
   margin-left: 20px;
   margin-right: 20px;
}

.interim-login #login_error, .interim-login.login .message {
    margin: 16px 16px 16px;
}


#container {
   container-type: inline-size;
   height: 100vh;
   display: flex !important;
}




body.login div#login {
   margin-left:0;
   margin-right:0;
}


#wfls-prompt-overlay {
   z-index: 100;
   background-color: #f0f0f1;
}




#login h1 a, .login h1 a {
background-image: url("/wp-content/themes/mncdiv/images/mnc-logo-black.svg");
height: 80px;
width:  250px;
background-size: 250px 80px;
background-repeat: no-repeat;
padding-bottom: 30px;
}



/*
 CSS relevant to the slider module in the right side pane
 */
.features-slider-wrap {
    width: 100%;
    padding: 0 2rem;
    max-width: 660px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}

#feature-slider .item{
  padding: 30px 0px;
  margin: 10px;
  color: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-align: center;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}

#feature-slider .item .feature-image {
    display: inline-flex;
    justify-content: center;
    max-width: 450px;
	margin-bottom: 3rem;
    
}

#feature-slider .item .feature-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
	line-height: 3rem;

}

#feature-slider .item .feature-text {
    font-size: 1.375rem;
    margin-bottom: 2rem;

}

#feature-slider .item .feature-more {
    margin-bottom: 1rem;

}

#feature-slider .item .feature-more a {
	color: #f7d070;
	text-decoration: none;
}



/* 
 *	Responsive changes to default values are set below 
 *
*/

/* sets the width of the slider wrap, when the container size starts to get smaller */
@container (max-width: 1024px) {
	.features-slider-wrap 
		{
			max-width: 400px;
		}
	
	#feature-slider .item .feature-image 
	{
		max-width:300px;
	}
	
	#feature-slider .item .feature-title 
	{
		font-size: 1.6rem;
		line-height:1.8rem;
	}
	
	#feature-slider .item .feature-text 
	{
		font-size: 1.175rem;
	}
}





@container (min-width: 500px){
   #side-block
   {
     display: inline-flex;
	 flex: 1;
     order: 2;
     background: #714bb7;
     background: linear-gradient(0deg, #390099 0%, rgb(15,81,159) 49%, #3b8ced 100%);
     align-items: center;
	  
   }


   #login-container {
     width: 36vw;
     max-height: 100vh;
     padding: 4rem 4rem;
     margin-top: auto;
     margin-bottom: auto;
     display:flex;
     flex:1;
     max-width: 36vw;
     justify-content: space-around;
   }
}


@container (min-width: 500px) and (max-width: 1200px) {
	#login-container {
		padding: 0.3rem 0.3rem;
		width: 42vw;
		max-width: 42vw;
	}
}

@container (min-width: 700px) and (max-width: 800px) {
	body.login div#login p#nav {
		top: 0px;
		justify-content: space-evenly;
	}
}

/*
Disable's the Side Block where the colour background/carousel will display,
if the container width is anything less than 500px
*/

@container (max-width: 700px) {
	#side-block 
	{
		display: none;
	}
	
	#login-container
	{
		max-width: 100vw;
		width: 100vw;
}