/* FINDER FORM */
#find_beer {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-gap: 15px;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 20px 20px;
}

#find_beer .form-control:not(:last-child) {
	grid-column: span 10;
}
#find_beer .form-control:last-child {
	grid-column: span 10;
}

@media screen and (min-width: 600px) {
	#find_beer .form-control:not(:last-child) {
		grid-column: span 5;
	}
	#find_beer .form-control:last-child {
		grid-column: span 10;
	}
}

@media screen and (min-width: 1025px) {
	#find_beer .form-control:not(:last-child) {
		grid-column: span 2;
	}
	#find_beer .form-control:last-child {
		grid-column: span 2;
	}
}

#find_beer input[type="submit"] {
	background: var(--contrast-2);
	border: 2px solid var(--contrast-2);
	border-radius: 25px;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	font: 600 0.9rem Metropolis, Helvetica, sans-serif;
	letter-spacing: 0.05em;
	line-height: 1.65;
	padding: 11px 20px;
	min-width: 150px;
	text-decoration: none;
	text-transform: uppercase;
}

#find_beer input[type="submit"]:hover {
	background: var(--contrast-3);
	text-decoration: none;
}

#finder select,
#finder input {
	background-color: #fff;
	border: 1px solid var(--contrast);
	border-radius: 25px;
	color: var(--contrast);
	font: 500 1rem Metropolis, Helvetica, sans-serif;
	padding: 0.675em 1em;
}

#finder select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-size: 16px 12px;
	background-repeat: no-repeat;
	background-position-x: 96%;
	background-position-y: 50%;
}

/* RESULTS */
.results-container {
	background: #fff;
	margin-top: 6em;
}

.location-count {
	text-align: center;
	font: 500 1.5rem Metropolis, Helvetica, sans-serif;
}

#results {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 50px;
	max-width: 1400px;
	margin: 0 auto;
}

.feed-item {
	grid-column: span 6;
	border: 1px solid var(--base);
	font: 500 1.1rem Metropolis, Helvetica, sans-serif;
	line-height: 1.4;
	padding: 30px 20px;
	text-align: center;
}

@media screen and (min-width: 600px) {
	.feed-item {
		grid-column: span 3;
	}
}

@media screen and (min-width: 900px) {
	.feed-item {
		grid-column: span 2;
	}
}

.feed-item h3 {
	font-family: "Bebas Neue", "Arial Narrow", sans-serif;
	margin-bottom: 5px;
}

.feed-item .meta {
	padding-top: 20px;
	border-top: 1px solid var(--base);
	text-transform: capitalize;
}

.inside-article .feed-item a {
	background: var(--contrast);
	border: 2px solid var(--contrast);
	border-radius: 25px;
	color: #fff;
	display: inline-flex;
	justify-content: center;
	font: 600 0.9rem Metropolis, Helvetica, sans-serif;
	letter-spacing: 0.05em;
	line-height: 1.65;
	padding: 11px 20px;
	min-width: 150px;
	text-decoration: none;
	text-transform: uppercase;
}

.inside-article .feed-item a:hover {
	background: #fff;
	color: var(--contrast);
	text-decoration: none;
}

.no-results,
.loading-results {
	font-size: 1.25rem;
	padding: 1em 0;
	text-align: center;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid var(--contrast);
	margin: 0 auto;
	transition: all 0.3s ease-in-out;
	display: none;
}

.sr-only {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}