:root {
	--primary-text-color: #013862;
	--primary-text-font: Mulish;
	--secondary-text-color: #0166A1;
	--splash-logo: url(../../../images/login/earthcheck/splash.jpg);
	--splash-event-logo: url(../../../images/login/failte_ireland/splashevent.jpg);
	--link-color: #208ec9;
	--link-hover-color: #00aced;
	--brand-logo: url(../../../images/logos/earthcheck/login-logo.svg);
	--primary-button-color: #0067A1;
	--primary-button-text: #FFF;
	--splash-background: #0138621A;
	--splash-opacity: 0;
	--slogan-text-size: clamp(48.05px, 4vw, 24px);
}

.login-body {
	color: var(--primary-text-color);
	font-family: var(--primary-text-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 15.06px;
}

h2 {
	color: var(--header-color);
}

.login-body a {
	color: var(--link-color);
}

.brand-logo {
	content: var(--brand-logo);
	user-select: none;
}

.splash-background {
	background-color: var(--splash-background);
	opacity: var(--splash-opacity);
}

.right-box-rounding {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.left-box-rounding {
	border-bottom-left-radius: 10px;
	border-top-left-radius: 10px;
}

.login-section {
	max-width: 290px;
}

.trigger-button {
	width: 290px;
	height: 40px;
	background: var(--primary-button-color);
	border: none;
	font-size: 16px;
	font-weight: 400;
	color: var(--primary-button-text)
}

.input-box {
	font-weight: 600;
	background: #FBFBFB;
	border: 1px solid #E7E7E7;
	max-height: 40px;
	min-height: 40px;
	width: 290px;
}

.primary-col {
	background: white;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	flex: 1 1 270px;
}

.slogan-col {
	background-color: white;
	background-image: var(--splash-logo);
	background-size: cover;
	background-position: center;
	flex: 2 1 360px !important;
}

.slogan-event-col {
	background-color: white;
	background-image: var(--splash-event-logo);
	background-size: cover;
	background-position: center;
	flex: 2 1 360px !important;
}

.slogan-main-text {
	font-family: Open Sans;
	font-size: var(--slogan-text-size);
	font-weight: 700;
	word-wrap: break-word;
	line-height: 61.78px;
	letter-spacing: 0.15em;
	text-align: center;
}

.secondary-text {
	color: var(--secondary-text-color);
}

@media only screen and (max-width: 576px) {
	.box {
		margin: unset;
		max-width: 100%;
		max-height: 100%;
	}
}