@import '/projectassets/VINpromo/assets/css/fonts/fonts.css';

:root {
	/* Carlos M: vars for the css custom properties spec, have to include fallbacks as well for now */
	--vin-blue: #002855;
	--vin-blue-shade: #00244D;
	--vin-blue-light: #003c80;
	--vin-blue-tint: #F8FBFF;

	--vspn-green: #006f62;
	--vspn-green-shade: #004D44;
	--vspn-green-light: #00A28F;
	--vspn-green-tint: #F5FFFE;

	--orange: #de7c00;

	--link-color: #00426a;
	--link-active: #001a72;

	--off-white: #f7f7f7;
	--cool-darker-grey: #4B4F54;
	--cool-dark-grey: #53565A;

	--warm-grey: #6e6259;
	--light-warm-grey: #d7d2cb;

	/* Carlos M: Bootstrap 4's fallback font stack with my re-ordering and addition of 'Open Sans' */
	--fallback-stack: 
		"Open Sans",
		"Helvetica Neue",
		"Roboto",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

	--base-font-family: ProximaNovaRgRegular, var(--fallback-stack);
	--light-font-family: ProximaNovaLtLight, var(--fallback-stack);
	--bold-font-family: ProximaNovaLtSemibold, var(--fallback-stack);

	--vin-ce-backgroundImage: url('/AppUtil/Image/handler.ashx?imgid=5115061');
	--vspn-ce-backgroundImage: url('/AppUtil/Image/handler.ashx?imgid=4949734');
	
	/*
	custom properties will not work for media query values, here for reference
	--scrn_lg: 1200px;
	--scrn_md: 992px;
	--scrn_sm: 768px;
	--scrn_xs: 640px;
	--scrn_xxs: 390px;
	*/
}
:root, 
html {
	font-size: 16px;
}
body {
	--vertical-gutter: .5rem;
	--horizontal-gutter: .75rem;
	--main-col-width: 65%;
	--side-col-width: 35%;

	color: #4B4F54;
	color: var(--cool-darker-grey);
	line-height: 2rem;
	font-size: 100%;
	font-family: ProximaNovaRgRegular,
		"Open Sans",
		"Helvetica Neue",
		"Roboto",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-family: var(--base-font-family);
	overflow-x: hidden;
}
body #contentBody {
	margin: 0;
	height: 100%;
}
a {
	padding: 0;
}
a,
button,
.btn {
	margin: 0;
}
a,
a:link,
a:focus,
a:hover,
a:visited,
a:active,
button,
button:focus,
button:hover,
button:active,
.btn,
.btn:link,
.btn:focus,
.btn:hover,
.btn:active {
	text-decoration: none;
	border: none;
	box-shadow: none;
	cursor: default;
}
a:hover,
button:hover,
.btn:hover {
	cursor: pointer;
}
nav .current .btn,
nav .current button {
	cursor: default;
}
a:focus,
button:focus,
.btn:focus {
	border: 1px solid;
}
button,
.btn,
.btn:link,
button:active,
.btn:active,
a:focus,
button:focus,
.btn:focus {
	color: white;
	background-color: #4B4F54;
	background-color: var(--cool-darker-grey);
}
button.vin,
.btn.vin {
	background-color: #002855;
	background-color: var(--vin-blue);
}
button.vspn,
.btn.vspn {
	background-color: #006f62;
	background-color: var(--vspn-green);
}
button:hover,
.btn:hover,
nav .current .btn,
nav .current button {
	color: #4B4F54;
	color: var(--cool-darker-grey);
	background-color: white;
}
button.vin:active,
.btn.vin:active,
button.vin:hover,
.btn.vin:hover,
nav .current .btn.vin,
nav .current button.vin {
	color: #002855;
	color: var(--vin-blue);
}
button.vspn:active,
.btn.vspn:active,
button.vspn:hover,
.btn.vspn:hover,
nav .current .btn.vspn,
nav .current button.vspn {
	color: #006f62;
	color: var(--vspn-green);
} 
main#content a:not(.btn),
footer a:not(.btn) {
	color: #00426a;
	color: var(--link-color);
	font-size: 1em;
	padding-bottom: .1em;
	border-bottom: 1px solid;
	text-decoration: none;
}
main#content a:not(.btn):active,
main#content a:not(.btn):hover,
footer a:not(.btn):active,
footer a:not(.btn):hover {
	color: #001a72;
	color: var(--link-active);
}
main#content a:not(.btn):focus,
footer a:not(.btn):focus {
	border-style: dotted;
}

h1,
h2,
h3 {
	border: none;
}

/* Header */
header {
	line-height: 1;
	border-bottom: 1px solid;
	padding-top: .5rem;
	padding-top: var(--horizontal-gutter);
	border-color: #4B4F54;
	border-color: var(--cool-darker-grey);
	background-color: #f7f7f7;
	background-color: var(--off-white);
}
header ul,
header ol {
	list-style-type: none;
}
header h1,
header h2,
header h3,
header ul,
header ol,
header li {
	margin: 0;
	padding: 0;
}
header .navLead {
	padding-bottom: .75rem;
	padding-bottom: var(--horizontal-gutter);
	padding-left: .5rem;
	padding-left: var(--vertical-gutter);
	padding-right: .5rem;
    padding-right: var(--vertical-gutter);
}
header .navLead .menuControl {
	float: left;
	height: 3.5rem;
	width: 14.25vw;
	color: white;
	background-color: #6e6259;
	background-color: var(--warm-grey);
}
header .navLead .menuControl .fa {
	font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
	header .navLead {
		padding-left: .5rem;
		padding-left: var(--vertical-gutter);
		padding-right: .5rem;
		padding-right: var(--vertical-gutter);
	}
	header .navLead .menuControl {
		width: 7vw;
	}
}
@media screen and (min-width: 992px) {
	header .navLead {
		padding-left: 0;
		padding-right: 0;
		border-bottom: 1px solid;
		border-color: #4B4F54;
		border-color: var(--cool-darker-grey);
	}
}
header .navLead .menuControl:active,
header .navLead .menuControl:hover {
	border: 1px solid;
	background-color: white;
	border-color: #6e6259;
	border-color: var(--warm-grey);
	color: #6e6259;
	color: var(--warm-grey);
}
header .navLead .menuControl:focus {
	color: white;
	background-color: #4B4F54;
	background-color: var(--cool-darker-grey);
	border-color: #de7c00;
	border-color: var(--orange);
}
header .navLead .branding {
	padding-left: .5rem;
	padding-left: var(--vertical-gutter);
	padding-right: .5rem;
	padding-right: var(--vertical-gutter);
}
header .navLead .branding a:focus {
	border-style: dotted;
}
header .navLead .branding a:hover {
	cursor: pointer;
}
header .navLead .branding h1 {
	float: left;
}
header .navLead .branding h1:first-of-type {
	margin-right: .5rem;
	margin-right: var(--vertical-gutter);
}
header .navLead .branding h2 {
	float: right;
	margin-top: .75rem;
	margin-top: var(--horizontal-gutter);
}
header .navLead .branding h1 img {
	width: auto;
	height: 28px;
}
header .navLead .branding h2 img {
	width: auto;
	height: 22px;
}
header .headerToggle[aria-expanded="true"] {
	border-top: 1px solid;
	border-color: #4B4F54;
	border-color: var(--cool-dark-grey);
}
@media screen and (max-width: 321px) {
	header .navLead .branding h2 img {
		width: auto;
		height: 20px;
	}
}
@media screen and (min-width: 768px) {
	header .navLead .branding h1 {
		margin-right: .5rem;
		margin-right: var(--vertical-gutter);
	}
	header .navLead .branding h2 {
		margin-top: 0;
	}
	header .navLead .branding h2 img {
		height: 30px;
	}
}
@media screen and (min-width: 992px) {
	header .navLead .branding h2 {
		margin-left: auto;
	}

	header .headerToggle {
		display: block;
		visibility: visible;
	}
}

/* Main Nav */
header nav {
	width: 100%;
}
#mainNav {
	width: 100%;
	padding: .75rem .5rem;
	padding: var(--horizontal-gutter) var(--vertical-gutter);
}
#mainNav li {
	width: 100%;
	padding: 0;
	padding-bottom: .5rem;
	padding-bottom: var(--vertical-gutter);
}
#mainNav li a {
	width: 100%;
	padding: .25em .5em;
	border-radius: .25em;
	text-align: left;
}
#mainNav li a:focus {
	border-style: solid;
}
@media screen and (min-width: 992px) {
	#mainNav {
		padding: .75rem .5rem;
		padding: var(--horizontal-gutter) var(--vertical-gutter);
		height: 2.75rem;
	}
	#mainNav li {
		width: auto;
		display: inline-block;
		padding-bottom: 0;
	}
	#mainNav li a {
		font-size: .9rem;
	}
}
/* end Main Nav */

/* Tool Bar */
.headerToggle .tools {
	position: relative;
	height: 3em;
	padding: 0;
	margin: 0;
	background-color: #d7d2cb;
	background-color: var(--light-warm-grey);
}
.headerToggle .tools ul, .headerToggle .tools ol {
	width: 25%;
	height: 100%;
	margin: 0;
	float: left;
}
.headerToggle .tools li {
	display: inline-block;
	float: left;
	width: 2em;
	height: 100%;
	padding: 0 .1em;
	margin-right: .5rem;
	margin-right: var(--vertical-gutter);
}
.headerToggle .tools li a {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
	font-size: 1.5rem;
	padding-top: .5em;
	color: #6e6259;
	color: var(--warm-grey);
}
.headerToggle .tools li a:active,
.headerToggle .tools li a:hover {
	background-color: #f7f7f7;
	background-color: var(--off-white);
}
.headerToggle .tools li a:focus {
	border: 1px dotted;
	border-color: #de7c00;
	border-color: var(--orange);
	border-radius: .25em;
}
.headerToggle .tools .menuToggle {
	float: right;
	margin-right: .5rem;
	margin-right: var(--vertical-gutter);
	margin-top: .325rem;
	margin-top: calc(var(--horizontal-gutter) / 2);
}
@media screen and (min-width: 992px) {
	.headerToggle .tools {
		height: 1.6rem;
	}
	.headerToggle .tools li a {
		font-size: 1.25rem;
		padding-top: .2em;
	}
}
/* end Tool Bar */

@supports (display: flex) and (display: inline-flex) {
	header .navLead, 
	header .navLead .branding, 
	#mainNav,
	.headerToggle .tools, 
	.headerToggle .tools ul, 
	.headerToggle .tools ol,
	.headerToggle .tools li a {
		display: flex;
	}
	header .navLead,
	header .navLead .branding,
	.headerToggle .tools ul,
	.headerToggle .tools ol {
		flex-direction: row;
	}
	header .navLead,
	header .navLead .branding,
	.headerToggle .tools,
	.headerToggle .tools ul,
	.headerToggle .tools ol {
		justify-content: left;
	}
	#mainNav {
		justify-content: space-between;
		align-content: center;
	}
	header .navLead .menuControl {
		flex: 1;
		width: auto;
		float: none;
	}
	header .navLead .branding {
		align-items: center;
		flex-wrap: wrap;
		flex: 7;
	}
	@media screen and (min-width: 640px) {
		header .navLead .branding {
			flex: 15;
		}
	}
	header .navLead .branding h1,
	header .navLead .branding h2 {
		float: none;
	}

	#mainNav {
		flex-direction: column;
	}
	#mainNav li {
		flex: 1;
		margin: 0;
		align-self: center;
	}
	@media screen and (min-width: 992px) {
		#mainNav {
			flex-direction: row;
		}
		#mainNav li {
			flex: none;
		}
	}
	@media screen and (min-width: 1200px) {
		#mainNav {
			justify-content: left;
		}
		#mainNav li {
			margin-right: .5rem;
			margin-right: var(--vertical-gutter);
		}
	}

	.headerToggle .tools {
		align-items: center;
		padding: 0 .5rem;
		padding: 0 var(--vertical-gutter);
	}
	.headerToggle .tools ul,
	.headerToggle .tools ol {
		flex: 4;
		float: none;
		width: auto;
	}
	.headerToggle .tools .menuToggle {
		flex: 1;
		position: relative;
		top: auto;
		float: none;
		margin: 0;
	}
	.headerToggle .tools li {
		float: none;
	}
	.headerToggle .tools li a {
		padding: 0;
		justify-content: center;
		align-items: center;
	}
}
/* end Header */

/* Main */
main#content {
	width: 100%;
	margin: 0;
	margin-bottom: .75rem;
	margin-bottom: var(--horizontal-gutter);
	padding: 0;
	background-color: white;
}
main#content h2 {
	margin-top: 0;
	margin-bottom: .75rem;
	margin-bottom: var(--horizontal-gutter);
	line-height: 36px;
	line-height: calc(.75rem * 3);
    line-height: calc(var(--horizontal-gutter) * 3);
}
@media screen and (min-width: 992px) {
	main#content {
		margin-bottom: 0;
	}
}
/* .lead styles */
main#content .lead {
	margin: 0;
	padding: 0 .5rem;
	padding: 0 var(--vertical-gutter);
	padding-top: 1rem;
	padding-top: calc(var(--vertical-gutter) * 2);
	padding-bottom: .5rem;
    padding-bottom: var(--vertical-gutter);
	width: 100%;
	background-color: #f7f7f7;
	background-color: var(--off-white);
}
main#content.vin .lead {
	background-color: #F8FBFF;
	background-color: var(--vin-blue-tint);
}
main#content.vspn .lead {
	background-color: #F5FFFE;
	background-color: var(--vspn-green-tint);
}
main#content .lead h1,
main#content .DocumentTitle {
	font-size: 1.75rem;
	margin-top: 0;
	margin-bottom: 1rem;
	margin-bottom: calc(var(--vertical-gutter) * 2);
	font-family: ProximaNovaLtSemibold,
		"Open Sans",
		"Helvetica Neue",
		"Roboto",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Arial,
		sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-family: var(--bold-font-family);
	padding-bottom: .5rem;
	padding-bottom: var(--vertical-gutter);
}
main#content.vin .lead h1,
main#content.vin .DocumentTitle {
	color: #002855;
	color: var(--vin-blue);
}
main#content.vspn .lead h1,
main#content.vspn .DocumentTitle {
	color: #006f62;
	color: var(--vspn-green);
}
main#content [aria-controls="documentNav"] {
	margin-bottom: .75rem;
	margin-bottom: var(--horizontal-gutter);
}
main#content .lead nav,
main#content .lead nav > ul,
main#content .lead > ul {
	margin: 0;
	padding: 0;
}
main#content.about .lead #coursePageMeta,
main#content.non-int .lead #aboutPageMeta,
main#content.vin .lead #aboutPageMeta,
main#content.vspn .lead #aboutPageMeta {
	display: none;
	visibility: hidden;
}
main#content .lead #aboutPageMeta > li {
	font-size: 1rem;
	margin-bottom: .75rem;
    margin-bottom: var(--horizontal-gutter);
}
main#content .lead ul {
	list-style-type: none;
}
main#content .lead #documentNav h2 small,
main#content .lead #documentNav .btn {
	display: block;
	width: 100%;
}
main#content .lead #documentNav ul {
	padding-bottom: .75rem;
	padding-bottom: var(--horizontal-gutter);
	margin-bottom: 1.5rem;
	margin-bottom: calc(var(--horizontal-gutter) * 2);
	border-bottom: 1px solid;
	border-color: #4B4F54;
	border-color: var(--cool-darker-grey);
}
main#content.vin .lead #documentNav ul {
	border-color: #002855;
	border-color: var(--vin-blue);
}
main#content.vspn .lead #documentNav ul {
	border-color: #006f62;
	border-color: var(--vspn-green);
}
main#content .lead li {
	margin-bottom: .75rem;
	margin-bottom: var(--horizontal-gutter);
	width: 100%;
}
@media screen and (min-width: 640px) {
	main#content .lead {
		background-repeat: no-repeat;
		background-position: 98% 100%;
		background-position: calc(100% - .5rem) 100%;
		background-position: calc(100% - var(--vertical-gutter)) 100%;
	}
	main#content.vin .lead,
	main#content.vspn .lead {		
		background-position: 98% 97.5%;
		background-position: calc(100% - .5rem) calc(100% - .75rem);
		background-position: calc(100% - var(--vertical-gutter)) calc(100% - var(--horizontal-gutter));
	}
	main#content.vin .lead {
		background-size: 35%;
		background-image: var(--vin-ce-backgroundImage);
	}
	main#content.vspn .lead {
		background-size: 31%;
		background-image: var(--vspn-ce-backgroundImage);
	}
	main#content .lead #documentNav ul {
		clear: both;
	}
	main#content .lead #documentNav ul li {
		width: 50%;
		float: left;
	}
	main#content .lead #documentNav .btn {
		width: 98%;
		width: calc(100% - .5rem);
		width: calc(100% - var(--vertical-gutter));
	}
	main#content .lead #coursePageMeta {
		width: 65%;
		width: var(--main-col-width);
	}
}
@media screen and (min-width: 992px) {
	main#content .lead {
		position: relative;
		padding-left: 1rem;
		padding-left: calc(var(--vertical-gutter) * 2);
		padding-right: 1rem;
		padding-right: calc(var(--vertical-gutter) * 2);
		background-position: 94% 100%;
		background-position: calc(100% - 1rem) 100%;
		background-position: calc(100% - (var(--vertical-gutter) * 2)) 100%;
	}
	main#content.vin .lead {
		background-size: min(275px, 50%);
	}
	main#content.vspn .lead {
		background-size: min(230px, 50%);
	}
	main#content .lead h1,
	main#content .DocumentTitle {
		padding-right: 1rem;
		padding-right: calc(var(--vertical-gutter) * 2);
	}
	main#content .lead #aboutPageMeta {
		width: 65%;
		width: var(--main-col-width);
		padding-left: 1em;
		list-style-type: disc;
	}
	main#content .lead #aboutPageMeta > li {
		margin-bottom: 3px;
		margin-bottom: calc(.75rem / 4);
		margin-bottom: calc(var(--horizontal-gutter) / 4);
	}
	main#content .lead #documentNav {
		display: block;
		visibility: visible;
		width: 27.5%;
		width: calc((35% / 1.25) - 1rem);
		width: calc((var(--side-col-width) / 1.25) - (var(--vertical-gutter) * 2));
		position: absolute;
		top: 102%;
		top: calc(100% + .75rem);
		top: calc(100% + var(--horizontal-gutter));
		right: 1rem;
		right: calc(var(--vertical-gutter) * 2);
		padding: .75rem .5rem;
		padding: var( --horizontal-gutter) var(--vertical-gutter);
		background-color: #f7f7f7;
		background-color: var( --off-white);
		border-bottom: 1px solid;
		border-top: 1px solid;
		border-color: #4B4F54;
		border-color: var(--cool-darker-grey);
	}
	main#content .lead #documentNav ul {
		border: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	main#content .lead #documentNav ul li,
	main#content .lead #documentNav ul .btn {
		width: 100%;
	}
	main#content .lead #documentNav ul li {		
		float: none;
	}
	main#content .lead #coursePageMeta {
		padding-right: .5rem;
		padding-right: var(--vertical-gutter);
	}
}
/* end .lead styles */

/* Document Content styles */
main#content #documentHeading {
	color: white;
	background-color: #4B4F54;
	background-color: var(--cool-darker-grey);
	padding: .75rem .5rem;
    padding: var(--horizontal-gutter) var(--vertical-gutter);
}
main#content.about #documentHeading {
	display: none;
	visibility: hidden;
}
main#content.vin #documentHeading {
	background-color: #002855;
	background-color: var(--vin-blue);
}
main#content.vspn #documentHeading {
	background-color: #006f62;
	background-color: var(--vspn-green);
}
@media screen and (min-width: 992px) {
	main#content #documentHeading,
	main#content.vin #documentHeading,
	main#content.vspn #documentHeading {
		background: transparent;
	}
	main#content #documentHeading {
		width: 63%;
		width: calc(65% - 1.5rem);
		width: calc(var(--main-col-width) - calc(var(--vertical-gutter) * 3));
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
		margin-left: 1rem;
		margin-left: calc(var(--vertical-gutter) * 2);
		border-bottom: 1px dotted;
		border-color: #4B4F54;
		border-color: var(--cool-darker-grey);
		color: #4B4F54;
		color: var(--cool-darker-grey);
	}
	main#content.vin #documentHeading {
		border-color: #002855;
		border-color: var(--vin-blue);
		color: #002855;
		color: var(--vin-blue);
	}
	main#content.vspn #documentHeading {
		border-color: #006f62;
		border-color: var(--vspn-green);
		color: #006f62;
		color: var(--vspn-green);
	}
}
main#content .DocumentMainContent {
	font-size: inherit;
	font-weight: inherit;
	padding: 0 .5rem;
	padding: 0 var(--vertical-gutter);
	line-height: 1.5rem;
    line-height: calc(var(--horizontal-gutter) * 2);
}

/* Carlos M: hiding repeated content in docs that is now part of template, will remove some of these selectors as document content changes/updates */
main#content .DocumentTitle,
main#content .DocumentAuthors,
main#content .DatesDivClass,
main#content.about .DocumentMainContent > p:first-of-type,
main#content.non-int .DocumentMainContent > p:first-of-type,
main#content.about .DocumentMainContent > h3:first-of-type,
main#content.non-int .DocumentMainContent > h3:first-of-type,
main#content.about .DocumentMainContent > ul:first-of-type,
main#content.about .DocumentMainContent > hr:first-of-type,
main#content.non-int .DocumentMainContent > hr:first-of-type,
main#content.about .DocumentMainContent > hr:first-of-type + p + p,
main#content.about .DocumentMainContent > hr:first-of-type + p,
main#content.non-int .DocumentMainContent > hr:first-of-type + p,
main#content.about .DocumentMainContent > blockquote:first-of-type,
main#content.non-int .DocumentMainContent > blockquote:first-of-type,
main#content.vspn .DocumentMainContent > blockquote:first-of-type,
main#content.vspn .DocumentMainContent > blockquote:first-of-type + p,
main#content.vspn .DocumentMainContent > blockquote:first-of-type + p + p,
main#content.vspn .DocumentMainContent > blockquote:first-of-type + p + p + hr,
main#content.non-int .DocumentMainContent > table:last-of-type,
main#content.vspn .DocumentMainContent > table:last-of-type,
main#content.non-int .DocumentMainContent > table:first-of-type div[align="center"]:first-of-type,
main#content.vin .DocumentMainContent > table:first-of-type,
main#content.vspn .DocumentMainContent > table:first-of-type,
main#content.vin .DocumentMainContent > table:first-of-type + hr:first-of-type,
main#content.vin .DocumentMainContent > div[align="center"]:first-of-type,
main#content.vin .DocumentMainContent > div[align="center"]:first-of-type + hr {
	display: none;
	visibility: hidden;
}
/* end Document Content styles */
main#content .DocumentMainContent {
	clear: both;
}
main#content .DocumentPanel .VersionLink {
    font-size: x-small;
    font-weight: normal;
    border: 0px dotted gray;
    background-image: url(/images/versionhistory3.jpg);
    background-repeat: no-repeat;
    background-position: bottom left;
    width: 100%;
    height: auto;
    padding: 0 0 0 120px;
	margin-top: 18px;
	margin-bottom: .75rem;
    margin-bottom: var(--horizontal-gutter);
    line-height: 1.85rem;
	background-color: white;
	padding-right: .5rem;
    padding-right: var(--vertical-gutter);
}
main#content .DocumentPanel .EmbedAdminIcons {
	float: right;
}
main#content .DocumentUrlLink {
	padding: 0 .5rem;
	padding: 0 var(--vertical-gutter);
    font-size: .8rem;
}
@media screen and (min-width: 992px) {
	main#content .DocumentPanel {
		width: 65%;
		width: var(--main-col-width);
		background-color: white;
		padding-top: .75rem;
		padding-top: var(--horizontal-gutter);
		padding-left: .5rem;
		padding-left: var(--vertical-gutter);
	}
	main#content .DocumentUrlLink {
		padding-bottom: .75rem;
		padding-bottom: var(--horizontal-gutter);
	}
}
/* end Main */

/* Footer */
footer {
	background-color: #f7f7f7;
	background-color: var(--off-white);
	padding: 0 .5rem;
	padding: 0 var(--vertical-gutter);
	line-height: 1.5rem;
    line-height: calc(var(--horizontal-gutter) * 2);
}
@media screen and (max-width: 639px) {
	footer #contactUs,
	footer #phoneUs {
		width: 100%;
		float: none;
	}
}
@media screen and (max-width: 389px) {
	footer > .row:not(.end) > .col-xs-6 {
		width: 100%;
		float: none;
	}
}
footer h2 {
	color: #002855;
	color: var(--vin-blue);
	font-style: normal;
	font-weight: bold;
	font-size: 1.1rem;
}
footer h2.subLogo.vinLogo,
footer #connectWithUs .vin h2 {
	color: #002855;
	color: var(--vin-blue);
}
footer h2.subLogo.vspnLogo,
footer #connectWithUs .vspn h2 {
	color: #006f62;
	color: var(--vspn-green);
}
footer #footerLogo .row,
footer #connectWithUs .row {
	margin-left: 0;
	margin-right: 0;
}

footer #footerLogo .subLogo {
	margin-top: 0;
	font-size: .8rem;
}

footer .socialMedia a {
	color: white;
	border-radius: 50%;
	font-size: 1.25rem;
	width: 1.5em;
	height: 1.5em;
	line-height: 1;
	text-align: center;
	padding-top: .25em;
	display: block;
}
@media screen and (max-width: 639px) {
	footer .socialMedia a {
		font-size: 1.15rem;
	}
}
footer #connectWithUs .vin .socialMedia a {
	background-color: #002855;
	background-color: var(--vin-blue);
}
footer #connectWithUs .vspn .socialMedia a {
	background-color: #006f62;
	background-color: var(--vspn-green);
}
@supports (display: flex) {
	footer .socialMedia a {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
	}
}
footer .socialMedia a:active,
footer .socialMedia a:hover {
	text-decoration: none;
}
footer .socialMedia a:focus {
	border-style: solid;
}
footer #connectWithUs .vin .socialMedia a:active,
footer #connectWithUs .vin .socialMedia a:hover {
	background-color: #003c80;
	background-color: var(--vin-blue-light);
}
footer #connectWithUs .vspn .socialMedia a:active,
footer #connectWithUs .vspn .socialMedia a:hover {
	background-color: #00A28F;
	background-color: var(--vspn-green-light);
}
@media screen and (min-width: 768px) {
	footer .socialMedia a {
		font-size: 1rem;
	}
}
@media screen and (min-width: 1200px) {
	footer .socialMedia a {
		font-size: 1.2rem;
	}
}

footer #phoneUs h3 {
	margin-top: 0;
	margin-bottom: .375rem;
	margin-bottom: calc(var(--horizontal-gutter) / 2);
	font-size: 1rem;
	font-family: ProximaNovaLtSemibold,
		"Open Sans",
        "Helvetica Neue",
        "Roboto",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-family: var(--bold-font-family);
}
footer #phoneUs h3 img {
	width: 20%;
}
@media screen and (min-width: 992px) {
	footer #phoneUs h3 img {
		width: 10%;
	}
}
@media screen and (max-width: 639px) {
	footer #phoneUs h3 {
		font-size: 1.25rem;
	}
	footer #phoneUs h3 img {
		width: 10%;
	}
}
@media screen and (max-width: 389px) {
	footer #phoneUs h3 {
		font-size: 1rem;
	}
	footer #phoneUs h3 img {
		width: 15%;
	}
}

footer .end {
	padding-bottom: .75rem;
	padding-top: .5rem;
}
footer .end p {
	font-size: .85rem;
	width: 97.5%;
	width: calc(100% - .5rem);
	width: calc(100% - var(--vertical-gutter));
	margin: 0 auto;
	text-align: center;
}
/* end Footer */