@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root {

	/* Colors */
	--blue: #0C4589;
	--blueDark: #07356b;
	--blueLight: #1671de;
	--gray: #737373;
	--grayLight: #dadada;
	--grayBlue: #6e8198;

	/* Fonts */
	--lato: 'Lato', sans-serif;
	
}

html {
	font-family: var(--lato);
}

h1, h2, h3 {
	font-weight: 600;
}

ul {
	list-style: none;
}

header {
	z-index: 1;
}

#logo {
	border-bottom: 1px solid var(--grayLight);
}

/* ------ NAVIGATION ------ */
.nav-item {
	cursor: pointer;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--gray);
}
.nav-item:hover,
.nav-item.active {
	color: var(--blue);
}
.dropdown {
	position: absolute;
	display: none;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding: 2rem;
	background: white;
	border-radius: .5rem;
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.dropdown.open {
	display: block;
}
.dropdown_nav-item {
	display: inline-block;
	color: var(--blueLight);
	padding: .25rem 1rem;
	width: 32%;
	text-decoration: none !important;
}
.dropdown_nav-item:hover {
	background: var(--grayLight);
}

/* ------ HERO ------ */
#hero img {
	width: 100%;
}

/* ------ BRANDS ------ */
#brands h1 {
	font-size: 1.75rem;
	text-align: center;
	color: var(--gray);
}
a.brand {
	border: 1px solid var(--blue);
	max-width: 100px;
	transition: all .2s ease;
	text-decoration: none !important;
}
.brand:hover {
	border-color: var(--blueDark);
}
.brand img {
	transition: inherit;
	max-width: inherit;
}
.brand:hover img {
	transform: scale(1.05);
}
.brand p {
	margin: 0;
	text-align: center;
	color: white;
	background: var(--blue);
	padding: .25rem;
	font-size: .8rem;
	transition: inherit;
}
.brand:hover p {
	background: var(--blueDark);
}

/* ------ CONTENT ------ */
#info p {
	color: var(--gray);
}
#info h2 {
	color: var(--blue);
	font-size: 1.5rem;
}
#info img {
	width: 100%;
}

/* ------ FOOTER ------ */
.footer-copy {
	border-top: 1px solid var(--grayLight);
	color: var(--grayBlue);
	font-size: .9rem;
}

@media (max-width: 767px) {
	.dropdown_nav-item {
		width: 100%;
	}
}