@font-face {
	font-family: IvyMode;
	src: url(../fonts/IvyMode-Thin.ttf);
	font-weight: 300;
}

@font-face {
	font-family: IvyMode;
	src: url(../fonts/IvyMode-Regular.ttf);
	font-weight: 400;
}

@font-face {
	font-family: IvyMode;
	src: url(../fonts/IvyMode-SemiBold.ttf);
	font-weight: 500;
}

:root{
	--branco: #FFFFFF;
	--branco-gelo: #F9F9FF;
	--amarelo-clarissimo: #FFE88E;
	--amarelo-claro: #E6CD6D;
	--amarelo-medio: #C7B673;
	--amarelo-medio-escuro: #9F8F4F;
	--amarelo: #BBA346;
	--amarelo-escuro: #AA9133;
	--amarelo-mostarda: #5D5226;
	--preto: #342A04;
	--marron: #6B580E;
	--marron-escuro: #342A04;
	--azul: #17173E;
	--azul-escuro: #020223;

	--padding-x-global: 6.25rem;
	--padding-x-global-mobile: 2rem;
	--section-y-global: 5rem;

	--IvyMode: "IvyMode", sans-serif;
	--Raleway: "Raleway", sans-serif;

	--h1-fs: 3.8rem;
	--h1-lh: 1.2em;
	--h2-fs: 3rem;
	--h2-lh: 1.2em;
	--h3-fs: 2.3rem;
	--h3-lh: 1.2em;
	--h4-fs: 1.8rem;
	--h4-lh: 1.em;
	--h5-fs: 1.4em;
	--h5-lh: 1.2em;
	--h6-fs: 1.2rem;
	--h6-lh: 1.2em; 

	--h1-fs-mobile: 3rem;
	--h1-lh-mobile: 1.2em;
	--h2-fs-mobile: 2.5rem;
	--h2-lh-mobile: 1.2em;
	--h3-fs-mobile: 2rem;
	--h3-lh-mobile: 1.2em;
	--h4-fs-mobile: 1.8rem;
	--h4-lh-mobile: 1.2em;
	--h5-fs-mobile: 1.2em;
	--h5-lh-mobile: 1.2em;
	--h6-fs-mobile: 1rem;
	--h6-lh-mobile: 1.2em; 
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--Raleway);
	font-size: calc(10px + 0.390625vw);
}

body {
	color: var(--branco);
	background: var(--azul-escuro);
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wrapper {
	padding: var(--section-y-global) 0;
	overflow: hidden;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
	padding: 0 var(--padding-x-global);
	max-width: 100rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--IvyMode);
	font-weight: 400;
}

.h1, h1 {
	font-size: var(--h1-fs);
	line-height: var(--h1-lh);
}

.h2, h2 {
	font-size: var(--h2-fs);
	line-height: var(--h2-lh);
}

.h3, h3 {
	font-size: var(--h3-fs);
	line-height: var(--h3-lh);
}

.h4, h4 {
	font-size: var(--h4-fs);
	line-height: var(--h4-lh);
}

.h5, h5 {
	font-size: var(--h5-fs);
	line-height: var(--h5-lh);
}

.h6, h6 {
	font-size: var(--h6-fs);
	line-height: var(--h6-lh);
}

.btn.btn-default {
	font-family: var(--IvyMode);
	font-weight: 500;
	color: var(--marron-escuro);
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: 2px solid var(--amarelo);
	background-color: var(--amarelo);
	transition: 0.3s;
}

.btn.btn-default:hover {
	border: 2px solid var(--marron);
	background-color: var(--amarelo-escuro);
}

.btn.btn-default.light {
	border: 2px solid var(--amarelo-claro);
	background-color: var(--amarelo-claro);
}

.btn.btn-default.light:hover {
	border: 2px solid var(--amarelo-medio-escuro);
	background-color: var(--amarelo-medio);
}

header {
	background: transparent;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	transition: 1s;
}

header .navbar {
	padding: 1rem 0;
}

header .navbar-brand img {
	height: 60px;
}

footer {
	background: var(--azul);
}

footer .wrapper {
	padding-bottom: 0;
}

footer i {
	font-size: 1.75rem;
}

footer .credits {
	display: flex;
	justify-content: end;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	padding: 1.5rem;
	margin-top: 3rem;
}

footer .credits a {
	margin-left: 2rem;
}

#page-banner {
	position: relative;
	height: 400px;
}

#page-banner .banner-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#page-banner:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent radial-gradient(closest-side at 50% 50%, #040A6799 0%, #030850B3 24%, #03084CCF 53%, #020534E6 100%) 0% 0% no-repeat padding-box;
}

#page-banner .content {
	position: absolute;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	padding-bottom: 4rem;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	text-align: center;
}

#page-banner .header-title {
	color: var(--amarelo-claro);
	font-weight: 300;
}

#united .content,
#help .content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

#united .content p,
#help .content p {
	max-width: 700px;
	margin-top: 1rem;
}

@media(max-width: 768px) {

	* {
		font-size: calc(14px + 0.390625vw);
	}

	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		padding: 0 var(--padding-x-global-mobile);
	}

	.h1, h1 {
		font-size: var(--h1-fs-mobile);
		line-height: var(--h1-lh-mobile);
	}

	.h2, h2 {
		font-size: var(--h2-fs-mobile);
		line-height: var(--h2-lh-mobile);
	}

	.h3, h3 {
		font-size: var(--h3-fs-mobile);
		line-height: var(--h3-lh-mobile);
	}

	.h4, h4 {
		font-size: var(--h4-fs-mobile);
		line-height: var(--h4-lh-mobile);
	}

	.h5, h5 {
		font-size: var(--h5-fs-mobile);
		line-height: var(--h5-lh-mobile);
	}

	.h6, h6 {
		font-size: var(--h6-fs-mobile);
		line-height: var(--h6-lh-mobile);
	}

	header .navbar-brand img {
		height: 40px;
	}

	footer .credits .links {
		display: flex;
		flex-direction: column;
	}

	footer .credits .links a {
		margin: 0 0 1rem 0;
	}

}

.preloader {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--branco-gelo) radial-gradient(closest-side at 50% 50%, #040A6799 0%, #030850B3 24%, #03084CCF 53%, #020534E6 100%) 0% 0% no-repeat padding-box;
	color: var(--branco);
	z-index: 9999;
	transition: 1s;
}