/*
Carlos M: vars for the css --var spec

html {
	--vin-blue: #002855;
	--vin-blue-shade: #00244D;
	--vin-blue-light: #003c80;
	--vin-blue-tint: #D3E7FE;

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

	--nuetral-light-grey: #f7f7f7;
	--neutral-mid-grey: #848484;
	--warm-light-grey: #FFFDFD;
	--cool-light-grey: #F9FEFF;

	--scrn_lg: 1200px;
	--scrn_md: 992px;
	--scrn_sm: 768px;
	--scrn_xs: 640px;
	--scrn_xxs: 390px;
}
*/

html {
	font-size: 16px;
}
body {
	font-size: 100%;
	overflow-x: hidden;
}

main#content a:not(.btn),
footer a:not(.btn) {
	font-size: 1em;
	padding-bottom: .1em;
	border-bottom: 1px solid;
}
body.vin main#content a:not(.btn),
main#content #CurrentRegOpenCourses.vin a:not(.btn),
main#content #CurrentRegOpenCoursesXS.vin a:not(.btn),
body.vin footer a:not(.btn) {
	color: #002855;
}
body.vspn main#content a:not(.btn),
main#content #CurrentRegOpenCourses.vspn a:not(.btn),
main#content #CurrentRegOpenCoursesXS.vspn a:not(.btn),
body.vspn footer a:not(.btn) {
	color: #006f62;
}
main#content a:not(.btn):active,
main#content a:not(.btn):hover,
footer a:not(.btn):active,
footer a:not(.btn):hover {
	text-decoration: none;
	cursor: pointer;
}

/* Header */
header {
	line-height: 1;
	border-bottom: 1px solid;
	padding-top: 10px;
}
body.vin header {
	border-color: #002855;
}
body.vspn header {
	border-color: #006f62;
}
header a,
header a:focus,
header a:hover,
header a:visited,
header a:active,
header button,
header button:focus,
header button:hover,
header button:active,
header .btn,
header .btn:focus,
header .btn:hover,
header .btn:active {
	text-decoration: none;
	border: none;
	box-shadow: none;
	padding: 0;
	margin: 0;
	cursor: default;
}
header a:hover,
header button:hover,
header .btn:hover {
	cursor: pointer;
}
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: 10px;
}
header .navLead .menuControl {
	float: left;
	height: 40px;
	width: 14.25vw;
	color: white;
}
@media screen and (min-width: 768px) {
	header .navLead {
		padding-left: 10px;
		padding-right: 10px;
	}
	header .navLead .menuControl {
		width: 7vw;
	}
}
@media screen and (min-width: 992px) {
	header .navLead {
		padding-left: 0;
		padding-right: 0;
		border-bottom: 1px solid;
	}
	body.vin header .navLead {
		border-color: #002855;
	}
	body.vspn header .navLead {
		border-color: #006f62;
	}
}
body.vin header .navLead .menuControl {
	background-color: #002855;
}
body.vspn header .navLead .menuControl {
	background-color: #006f62;
}
header .navLead .menuControl:active,
header .navLead .menuControl:hover {
	border: 1px solid;
	background-color: white;
}
body.vin header .navLead .menuControl:active,
body.vin header .navLead .menuControl:hover {
	border-color: #002855;
	color: #002855;
}
body.vspn header .navLead .menuControl:active,
body.vspn header .navLead .menuControl:hover {
	border-color: #006f62;
	color: #006f62;
}
header .navLead .menuControl:focus {
	color: white;
}
body.vin header .navLead .menuControl:focus {
	background-color: #003c80;
}
body.vspn header .navLead .menuControl:focus {
	background-color: #00A28F;
}

header .navLead .branding {
	padding-left: 10px;
}
header .navLead .branding a:focus {
	border: 1px dotted;
}
body.vin header .navLead .branding a:focus {
	border-color: #003c80;
}
body.vspn header .navLead .branding a:focus {
	border-color: #00A28F;
}
header .navLead .branding a:hover {
	cursor: pointer;
}
header .navLead .branding h1 {
	float: left;
}
header .navLead .branding h1:first-of-type {
	margin-right: 10px;
}
header .navLead .branding h2 {
	float: right;
	margin-top: 10px;
}
header .navLead .branding h1 img {
	width: auto;
	height: 28px;
}
header .navLead .branding h2 img {
	width: auto;
	height: 22px;
}
@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: 10px;
	}
	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 {
	background-color: white;
}
@media screen and (min-width: 992px) {
	header .headerToggle {
		display: block;
		visibility: visible;
	}
}

nav #mainNav {
	width: 100vw;
	padding: 10px 5px;
}
nav #mainNav li, nav #mainNav li a {
	width: 100%; 
}
nav #mainNav li {
	padding: 5px 0;
}
nav #mainNav li a {
	display: block;
	padding: 5px 5px;
	color: white;
	border-radius: 5px;
}
body.vin nav #mainNav li a {
	background-color: #002855;
}
body.vspn nav #mainNav li a {
	background-color: #006f62;
}
body.vin nav #mainNav li a:active,
body.vin nav #mainNav li a:hover {
	background-color: #D3E7FE;
	color: #002855;
}
body.vspn nav #mainNav li a:active,
body.vspn nav #mainNav li a:hover {
	background-color: #E3FFFC;
	color: #006f62;
}
nav #mainNav li a:focus {
	color: white;
}
body.vin nav #mainNav li a:focus {
	background-color: #003c80;
}
body.vspn nav #mainNav li a:focus {
	background-color: #00A28F;
}
@media screen and (min-width: 992px) {
	nav #mainNav {
		padding: 5px;
		height: 2.75rem;
	}
	nav #mainNav li {
		width: auto;
		display: inline-block;
	}
	nav #mainNav li a {
		font-size: .9rem;
	}
}

.headerToggle .tools {
	position: relative;
	height: 3rem;
	padding: 0;
	margin: 0;
}
body.vin .headerToggle .tools {
	background-color: #D3E7FE;
}
body.vspn .headerToggle .tools {
	background-color: #E3FFFC;
}
.headerToggle .tools ul, .headerToggle .tools ol {
	width: 100vw;
	height: 100%;
	padding: 0 5px;
	margin: 0;
}
.headerToggle .tools li {
	display: inline-block;
	float: left;
	width: 2em;
	height: 100%;
	padding: 0 .1em;
	margin-right: 5px;
}
.headerToggle .tools li a {
	display: block;
	text-align: center;
	width: 100%;
	height: 100%;
	font-size: 1.5rem;
	padding-top: .5em;
}
body.vin .headerToggle .tools li a {
	color: #002855;
}
body.vspn .headerToggle .tools li a {
	color: #006f62;
}
.headerToggle .tools li a:active,
.headerToggle .tools li a:hover {
	background-color: white;
}
.headerToggle .tools li a:focus {
	border: 1px dotted #c90a00;
	border-radius: 5px;
}
.headerToggle .tools button {
	position: absolute;
	padding: .25em .5em;
	line-height: 1;
	margin: 0;
	margin-right: 10px;
	height: 2.5em;
	right: 0;
	top: .5em;
	color: white;
}
body.vin .headerToggle .tools button {
	background-color: #002855;
}
body.vspn .headerToggle .tools button {
	background-color: #006f62;
}
@media screen and (min-width: 992px) {
	.headerToggle .tools {
		height: 1.6rem;
	}
	.headerToggle .tools li a {
		font-size: 1.25rem;
		padding-top: .2em;
	}
}

@supports (display: flex) and (display: inline-flex) {
	header .navLead, 
	header .navLead .branding, 
	nav #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;
	}
	nav #mainNav {
		justify-content: space-between;
	}
	header .navLead .menuControl {
		flex: 1;
		width: auto;
		float: none;
	}
	header .navLead .branding {
		align-items: center;
		flex-wrap: wrap;
		flex: 7;
	}
	header .navLead .branding h1,
	header .navLead .branding h2 {
		float: none;
	}

	nav #mainNav {
		flex-direction: column;
	}
	nav #mainNav li {
		flex: 1;
		margin: 0;
	}
	@media screen and (min-width: 992px) {
		nav #mainNav {
			flex-direction: row;
		}
		nav #mainNav li {
			flex: none;
		}
	}
	@media screen and (min-width: 1200px) {
		nav #mainNav {
			justify-content: left;
		}
		nav #mainNav li {
			margin-right: 5px;
		}
	}

	.headerToggle .tools {
		align-items: center;
	}
	.headerToggle .tools ul,
	.headerToggle .tools ol {
		flex: 4;
	}
	.headerToggle .tools button {
		flex: 1;
		position: relative;
		top: auto;
	}
	.headerToggle .tools li {
		float: none;
	}
	.headerToggle .tools li a {
		padding: 0;
		justify-content: center;
		align-items: center;
	}
}
/* end Header */

/* Main */
main#content {
	width: 100vw;
	margin: 0;
	background-color: white;
}
body.vin main#content {
	color: #00244D;
}
body.vspn main#content {
	color: #004D44;
}
main#content h1,
main#content h2,
main#content h3 {
	line-height: 1;
}
body.vin main#content h1,
body.vin main#content h2,
body.vin main#content h3 {
	color: #00244D;	
}
body.vspn main#content h1,
body.vspn main#content h2,
body.vspn main#content h3 {
	color: #004D44;
}
main#content h1 {
	font-size: 1.5rem;
}
main#content h2 {
	font-size: 1.3rem;
}
main#content h3 {
	font-size: 1.2rem;
}
main#content ol,
main#content ul {
	padding-left: 1.5em;
}
main#content button,
main#content .btn {
	font-size: .9em;
	padding: .25em .5em;
	color: white;
	border: none;
}
body.vin main#content button,
body.vin main#content .btn,
main#content #CurrentRegOpenCourses.vin button,
main#content #CurrentRegOpenCourses.vin .btn,
main#content #CurrentRegOpenCoursesXS.vin button,
main#content #CurrentRegOpenCoursesXS.vin .btn {
	background-color: #002855;
}
body.vspn main#content button,
body.vspn main#content .btn,
main#content #CurrentRegOpenCourses.vspn button,
main#content #CurrentRegOpenCourses.vspn .btn,
main#content #CurrentRegOpenCoursesXS.vspn button,
main#content #CurrentRegOpenCoursesXS.vspn .btn {
	background-color: #006f62;
}
main#content button:active,
main#content button:hover,
main#content .btn:active,
main#content .btn:hover {
	background-color: white !important;
}
body.vin main#content button:active,
body.vin main#content button:hover,
main#content #CurrentRegOpenCourses.vin button:active,
main#content #CurrentRegOpenCourses.vin button:hover,
main#content #CurrentRegOpenCoursesXS.vin button:active,
main#content #CurrentRegOpenCoursesXS.vin button:hover,
body.vin main#content .btn:active,
body.vin main#content .btn:hover,
main#content #CurrentRegOpenCourses.vin .btn:active,
main#content #CurrentRegOpenCourses.vin .btn:hover,
main#content #CurrentRegOpenCoursesXS.vin .btn:active,
main#content #CurrentRegOpenCoursesXS.vin .btn:hover {
	color: #002855;
}
body.vspn main#content button:active,
body.vspn main#content button:hover,
main#content #CurrentRegOpenCourses.vspn button:active,
main#content #CurrentRegOpenCourses.vspn button:hover,
main#content #CurrentRegOpenCoursesXS.vspn button:active,
main#content #CurrentRegOpenCoursesXS.vspn button:hover,
body.vspn main#content .btn:active,
body.vspn main#content .btn:hover,
main#content #CurrentRegOpenCourses.vspn .btn:active,
main#content #CurrentRegOpenCourses.vspn .btn:hover,
main#content #CurrentRegOpenCoursesXS.vspn .btn:active,
main#content #CurrentRegOpenCoursesXS.vspn .btn:hover {
	color: #006f62;
}

main#content .courseHeading {
	background-color: #F9FEFF;
	padding-top: 15px;
	margin-bottom: .5em;
	border-bottom: 1px dotted;
	background-repeat: no-repeat;
	background-position: bottom 0 right 15px;
	background-size: 20%;
}
body.vin main#content .courseHeading {
	border-color: #002855;
}
body.vspn main#content .courseHeading {
	border-color: #006f62;
}
main#content .courseHeading .today-date {
	width: 100vw;
	margin: 0;
	margin-bottom: .75rem;
	padding: .25rem 15px;
	font-size: 1.25rem;
}
body.vin main#content .courseHeading .today-date .label {
	color: #002855;
	background-color: #D3E7FE;
}
body.vspn main#content .courseHeading .today-date .label {
	color: #006f62;
	background-color: #E3FFFC;
}
@media screen and (min-width: 640px) {
	main#content .courseHeading {
		background-size: 15%;
	}
}
@media screen and (min-width: 768px) {
	main#content .courseHeading {
		background-size: auto;
	}
	main#content .courseHeading .today-date {
		margin-bottom: 0;
	}
}
@media screen and (min-width: 992px) {
	main#content .courseHeading .today-date {
		width: 25%;
	}
	main#content .courseHeading .today-date .label {
		display: block;
		margin-left: -295%;
		width: 150%;
	}
}
@media screen and (min-width: 1200px) {
	main#content .courseHeading {
		background-position-x: 90%;
	}
}

main#content .courseHeading .lead h1 {
	font-size: 1.25rem;
	line-height: 1.15;
}
main#content .courseHeading .lead h1 img {
	display: block;
	height: 1.5rem;
	margin-bottom: .25em;
}
@media screen and (min-width: 768px) {
	main#content .courseHeading {
		margin-bottom: 15px;
	}
	main#content .courseHeading .lead h1 img {
		height: 2rem;
	}
}
@media screen and (min-width: 992px) {
	main#content .courseHeading .lead h1 {
		margin-top: 0;
	}
}

main#content #CurrentRegOpenCourses,
main#content #CurrentRegOpenCoursesXS {
	padding: 0;
	border: 1px solid;
	border-radius: 5px;	
}
main#content #CurrentRegOpenCourses.vin,
main#content #CurrentRegOpenCoursesXS.vin {
	background-color: #002855;
	border-color: #002855;	
}
main#content #CurrentRegOpenCourses.vspn,
main#content #CurrentRegOpenCoursesXS.vspn {
	background-color: #006f62;
	border-color: #006f62;	
}
main#content #CurrentRegOpenCoursesXS {
	width: auto;
	margin-left: 15px;
	margin-right: 15px;
}
main#content #CurrentRegOpenCourses h1,
main#content #CurrentRegOpenCoursesXS h1,
main#content #CurrentRegOpenCoursesXS h1 button,
main#content #CurrentRegOpenCoursesXS #openCourseList,
main#content #CurrentRegOpenCourses .courses,
main#content #CurrentRegOpenCoursesXS .courses,
main#content #CurrentRegOpenCourses .courses li,
main#content #CurrentRegOpenCoursesXS .courses li  {
	width: 100%;
}
main#content #CurrentRegOpenCourses h1,
main#content #CurrentRegOpenCoursesXS h1 {
	padding: .5rem 0;
	margin: 0;
	font-size: 1rem;
	color: white;
	line-height: 1.5;
	text-align: center;
}
main#content #CurrentRegOpenCourses h1 {
	padding: .5rem 10px;
}
main#content #CurrentRegOpenCoursesXS h1 {
	padding-bottom: 0;
	font-size: .9rem;
}
main#content #CurrentRegOpenCourses.vin h1,
main#content #CurrentRegOpenCoursesXS.vin h1 {
	background-color: #002855;
}
main#content #CurrentRegOpenCourses.vspn h1,
main#content #CurrentRegOpenCoursesXS.vspn h1 {
	background-color: #006f62;
}
main#content #CurrentRegOpenCoursesXS h1 button,
main#content #CurrentRegOpenCoursesXS h1 button:hover,
main#content #CurrentRegOpenCoursesXS h1 button:active,
main#content #CurrentRegOpenCoursesXS h1 button:focus {
	margin: 0;
	margin-top: .5em;
	padding: .5em 10px;
	border-top: 1px dotted white;
}
main#content #CurrentRegOpenCoursesXS h1 button .glyphicon {
	font-size: .8em;
}
main#content #CurrentRegOpenCoursesXS #openCourseList {
	background-color: #F9FEFF;
}
main#content #CurrentRegOpenCourses .courses,
main#content #CurrentRegOpenCoursesXS .courses {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
main#content #CurrentRegOpenCoursesXS .courses {
	border-bottom: 1px dotted;
}
main#content #CurrentRegOpenCoursesXS.vin .courses {
	border-color: #002855;
}
main#content #CurrentRegOpenCoursesXS.vspn .courses {
	border-color: #006f62;
}
main#content #CurrentRegOpenCourses .courses li,
main#content #CurrentRegOpenCoursesXS .courses li {
	background-color: white;
	padding: .5em 10px;
	line-height: 2;
}
main#content #CurrentRegOpenCourses.vin .courses li:nth-of-type(2n+1),
main#content #CurrentRegOpenCoursesXS.vin .courses li:nth-of-type(2n+1) {
	background-color: #D3E7FE;
}
main#content #CurrentRegOpenCourses.vspn .courses li:nth-of-type(2n+1),
main#content #CurrentRegOpenCoursesXS.vspn .courses li:nth-of-type(2n+1) {
	background-color: #E3FFFC;
}
main#content #CurrentRegOpenCoursesXS #openCourseList button {
	float: right;
	margin: .75em 0;
	margin-right: 10px;
}
/* end Main */

/* Footer */
footer {
	margin-top: 15px;
	background-color: #f7f7f7;
}
footer h2 {
	color: #002855;
	font-style: normal;
	font-weight: bold;
	font-size: 1.1rem;
}
footer h2.subLogo.vinLogo,
footer #connectWithUs .vin h2 {
	color: #002855;
}
footer h2.subLogo.vspnLogo,
footer #connectWithUs .vspn h2 {
	color: #006f62;
}
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 !important;
	border-radius: 50%;
	font-size: 1.25rem;
	width: 1.5em;
	height: 1.5em;
	line-height: 1;
	text-align: center;
	padding-top: .25em;
	display: block;
}
footer #connectWithUs .vin .socialMedia a {
	background-color: #002855;
}
footer #connectWithUs .vspn .socialMedia a {
	background-color: #006f62;
}
@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 #connectWithUs .vin .socialMedia a:active,
footer #connectWithUs .vin .socialMedia a:hover {
	background-color: #003c80;
}
footer #connectWithUs .vspn .socialMedia a:active,
footer #connectWithUs .vspn .socialMedia a:hover {
	background-color: #00A28F;
}
@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;
}
footer #phoneUs h3 img {
	width: 20%;
}
@media screen and (min-width: 992px) {
	footer #phoneUs h3 img {
		width: 10%;
	}
}

footer .end {
	padding-bottom: 15px;
	margin-top: 15px;
}
footer .end p {
	font-size: .85rem;
	border-top: 1px dotted;
	width: 90%;
	margin: 0 auto;
	text-align: center;
}
body.vin footer .end p {
	border-color: #002855;
}
body.vspn footer .end p {
	border-color: #006f62;
}
@media screen and (min-width: 768px) {
	footer .end p {
		width: 95%;
	}
}
@media screen and (min-width: 992px) {
	footer .end p {
		width: 98%;
	}
}
/* end Footer */