/* colors */
:root {
	--main-color:#29c8ff;
	--main-color-filter: brightness(0) saturate(100%) invert(59%) sepia(55%) saturate(1238%) hue-rotate(167deg) brightness(105%) contrast(103%);
	--secondary-color:#ff00ff;
	--secondary-color-filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(4265%) hue-rotate(293deg) brightness(114%) contrast(125%);
}

/* Custom Nav*/
@media only screen and (max-width: 720px) {
	header .nav {
		animation: background-light 20.0s infinite;
		background-image: url(../img/logo-white.svg);
	}

	@keyframes background-light {
		0% {
			background-color:var(--main-color);
		}
		50% {
			background-color:var(--secondary-color);
			}
		100% {
			background-color:var(--main-color);
		}
	}

	header .nav li a {
        color: var(--white);
	}

	header .nav li a.login  {
		color: var(--white);
	}

	header .nav li a.login .icon {
		filter: var(--white-filter);
	}
}


/* ---------------------- FRONTEND - Hero Section ---------------------- */
.page-title.homepage {
	background-position: top;
}

.page-title.homepage .hero-section .title {
	/* font-size: 4.0em; */
}

.page-title.homepage .hero-section .subtitle {
	/* font-size: 2.4em; */
}

@media only screen and (max-width: 960px) {
	.page-title.homepage .hero-section .title {
		/* font-size: 3.2em; */
	}

	.page-title.homepage .hero-section .subtitle {
		/* font-size: 2.0em; */
	}
}

@media only screen and (max-width: 520px) {
	.page-title.homepage .hero-section .title {
		font-size: 2.4em;
	}

	.page-title.homepage .hero-section .subtitle {
		/* font-size: 1.2em; */
	}
}