:root {
	--osa-primary: #002060;
	--osa-accent: #dd8047;
}

body {
	/*
	background-color: var(--osa-accent);
	background-image: url("https://www.transparenttextures.com/patterns/concrete-wall-2.png");
	*/


	/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
	font-family: 'Blinker', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--osa-primary);
	font-family: 'Blinker', sans-serif;
}

.btn { text-transform: uppercase; }

.btn-osa-primary {
	background-color: var(--osa-primary);
	border-color: var(--osa-primary);
	color: white !important;
	text-decoration: none !important;
}

.btn-osa-primary:hover,
.btn-osa-primary:focus {
	background-color: white;
	color: var(--osa-primary) !important;
}

.btn-osa-accent:link,
.btn-osa-accent:visited {
	background-color: var(--osa-primary);
	border-color: white;
	color: white !important;
	text-decoration: none !important;
}

.btn-osa-accent:hover,
.btn-osa-accent:focus {
	background-color: white;
	color: var(--osa-primary) !important;
}

header.row { align-items: center; }

.logo {
	background-image: url(../img/logo.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
	width: 86px;
	height: 75px;
	margin: 40px 5px 35px 5px;
}

#tagline {
	display: inline-block;
	margin-bottom: 0;
	line-height: 25px;
	position: relative;
	top: -50px;
	text-transform: uppercase;
}

#tagline small {
	text-transform: none;
	color: var(--osa-accent);
	font-size: 0.75em;
}

#navigation {
	list-style: none;
	padding-left: 0;
	text-align: right;
	margin-top: 5px;
}

#navigation li {
	display: inline;
}

#navigation li a:link,
#navigation li a:visited {
	padding: 10px 15px;
	color: var(--osa-primary);
	font-size: 1.5em;
}

#navigation li a:hover,
#navigation li a:focus {
	background-color: var(--osa-primary);
	color: white;
	text-decoration: none;
}

#navigation li ul {
	display: none;
}

.masthead-container {
	border-top: solid var(--osa-accent) 15px;
}

.carousel {
	padding-left: 0;
	padding-right: 0;
}

#overlay {
	position: absolute;
	z-index: 1;
	top: 48%;
	right: 0;
	background-color: rgba(0, 32, 96, 0.8);
	padding: 50px;
	color: white;
}

#overlay h2 {
	color: var(--osa-accent)
}

.products h2 { margin: 0 auto; }

.product-carousel { margin: 0 0 80px 0; }

.product-carousel div.product {
	margin: 20px 10px;
	background-color: var(--osa-accent);
	padding: 10px;
}

.product-carousel div.product:hover {
	background-color: var(--osa-primary);
	transition: background-color 0.2s ease;
}

.product-carousel div.product h3 {
	color: white;
	font-size: 1.5em;
}

.product-header {
	margin: 25px;
}

.products a.product-item {
	margin-bottom: 20px;
}

.products a.product-item:link,
.products a.product-item:visited {
	text-decoration: none;
}

.products a.product-item:hover h3,
.products a.product-item:focus h3 {
	background-color: var(--osa-accent);
	transition: background-color 0.2s ease;
}

.products .product-item h3 {
	background-color: var(--osa-primary);
	color: white;
	text-align: center;
	padding: 10px;
	text-transform: uppercase;
}

.product-carousel div.product a:hover,
.product-carousel div.product a:focus {
	text-decoration: none;
}

.slick-slide img { max-width: 100%; }

.slick-arrow::before { color: var(--osa-primary); }

.main-copy { padding: 6%; }

.main-copy img {
	width: 100%;
}

.img-thumbnail.pull-right {
	max-width: 40%;
	margin: 0 0 20px 20px;
}

@media (max-width: 768px) {
	.img-thumbnail.pull-right {
		margin: 15px 0;
		max-width: 100%;
	}	
}

.main-copy ul {
	column-count: 2;
}

.main-copy ul li {
	page-break-inside: avoid;
}

.main-copy a:link,
.main-copy a:visited {
	color: var(--osa-primary);
	text-decoration: underline;
}

.main-copy a:hover,
.main-copy a:focus {
	color: var(--osa-accent);
	text-decoration: none;
}

.main-copy.dark {
	background-color: var(--osa-primary);
	color: white;
}

.main-copy.dark h2 {
	color: var(--osa-accent);
}

.main-img { padding: 0; }

.main-img img {
	object-fit: cover;
	height: 100%;
	width: 100%;
	object-position: center center;
}

footer {
	border-top: solid var(--osa-accent) 15px;
}

footer address p {
	font-size: 1.2em;
}

footer address p a:link,
footer address p a:visited {
	color: var(--osa-primary);
}

footer address p a:hover,
footer address p a:focus {
	color: var(--osa-accent);
}

footer address p i {
	width: 25px;
	text-align: center;
	margin-right: 10px;
}

.copyright {
	opacity: 0.6;
}

.copyright a:link,
.copyright a:visited {
	color: black;
}

footer .col-md {
	padding: 4% 6%;
}