@charset "utf-8";
/* ==========================================================================
 Global CSS - Visionary Site OnCall (visionary.com)
 ========================================================================== */

*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	height: 100%;
	font-size: 62.5%;
}

body {
	height: 100%;
	font-size: 1.6rem; /* reset base body font to 16px */
	font-family: 'Source Sans Pro', sans-serif;
	line-height: 1.5; 
	color: #656972;
	background-color: #F6F4F3;

	/* smooths type in all browsers */
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#preview {
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	right: 0;
	padding: 1rem 0;
	background-color: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	font-weight: 700;
	line-height: 1.6;
	text-align: center;
}

img {
	display: block;
	border: 0;
}

a {
	color: #F03A47;
	text-decoration: none;

	transition: all 0.1s linear;
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
}

/* add high visibility focus indicators */
a:hover, a:focus { color: #265FBC; }

#preview a { text-decoration: none; }

#preview a:hover,
#preview a:focus { color: #fff; }

h1, h2, h3 {
	padding: 0;
	line-height: 1.125;
}

h2, h3, h4, h5, h5 { margin: 3.2rem 0 1.6rem 0;}

h1 {
	margin: 1.6rem 0;
	font-size: 3.6rem;
	font-weight: 900;
	color: #265FBC;
	text-transform: capitalize;
}

h2 {
	font-size: 2.8rem;
	font-weight: 700;
	color: #183059;
}

h3 {
	font-size: 2.8rem;
	font-weight: 300;
	color: #000;
}

h4 {
	font-size: 2.1rem;
	color: #265FBC;
}

h5 {
	font-size: 2.1rem;
	font-weight: 300;
	color: #000;
}

h6 {
	font-size: 1.8rem;
	color: #000;
	font-weight: 700;
}


sup, sub { font-size: 70%; }

sup { vertical-align: super; }
sub { vertical-align: sub; }

b, strong {
	font-weight: bold;
	font-weight: 700;
}

i, em { font-style: italic; }

hr {
	width: 100%;
	height: 1px;
	border: 0;
	background-color: #DDD;
}

.search_desktop {
	display: block;
}

.search_mobile {
	display: none;
}


/* ==========================================================================
Error Styles
========================================================================== */

.error {
	margin: 0 0 1.6rem 0;
	padding-top: 0;
	padding-left: 1.6rem;
	font-weight: bold;
	font-weight: 700;
	color: #F03A47;
}

.form_error a {
	color: #265fbc;
	text-decoration: underline;
}


/* ==========================================================================
 Clearfix CSS
========================================================================== */

.cf:before,
.cf:after {
	content: ' ';
	display: table;
}

.cf:after { clear: both; }

.cf { *zoom: 1; }


/* ==========================================================================
 Category/Filter toggle viewer
 ========================================================================== */
.viewer_contain {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #ccc;
}

span.viewer,
div.viewer,
a.viewer {
	display: inline-block;
	width: auto;
	margin-bottom: 1rem;
	padding: 1rem 2rem;
	text-align: center;
	background-color: #e53939;
	color: white;
	font-weight: normal;
	cursor: pointer;
	text-decoration: none;
}

span.viewer:hover,
span.viewer:focus,
div.viewer:hover,
div.viewer:focus,
a.viewer:hover,
a.viewer:focus,
span.viewer.active,
div.viewer.active,
a.viewer.active {
	background-color: #000;
	font-weight: normal;
	text-decoration: none;
}


/* ==========================================================================
 Page + Container
 ========================================================================== */
.page {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.container {
	margin: 0 auto;
	/*overflow: hidden;*/
	padding: 0 1.6rem;
	max-width: 1000px; /* set desired width */
}


/* ==========================================================================
Header (contains navigation, logo, etc)
========================================================================== */
header {
	position: fixed;
	width: 100%;
	z-index: 30;
	overflow: visible;
	background-color: #F6F4F3;
	border-bottom: 5px solid #F03A47;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
}

header .logo {
	display: inline-block;
	float: left;
	width: 250px;
	margin: 1.6rem 0;
}
header .logo img {
	width: 100%;
	max-width: 100%; /* logo never wider than container */
	max-height: 100%; /* logo never taller than container */
	display: block;
}


/* ==========================================================================
Top Menu Navigation (drop-down menu)
========================================================================== */

nav {
	display: inline-block;
	float: right;
	margin: 2.4rem 0;
}

nav .menu, nav .submenu {
	display: none;
}
nav .top_menu {
	position: relative;
	z-index: 200; /* removed height. height should be determined by menu items */
	margin: 0;
	padding: 0;
	list-style: none;
	top: 1rem;
}

nav .top_menu li {
	position: relative;
	z-index: 200;
	display: inline-block;
	margin-left: .4rem;
}

nav .top_menu li a {
	z-index: 200;
	display: inline-block;
	padding: .6rem 1.4rem;
	border-radius: 3px;
	font-size: 1.6rem;
	color: #656972;
	text-decoration: none;
}

/* nav .top_menu li.top_menu_active a ///* remove */
nav .top_menu li a:hover, nav .top_menu li a:focus {
	color: #fff;
	background-color: #265FBC;
}

nav .top_menu ul.sub {
	position: absolute;
	z-index: 201;
	top: 33px;
	left: -1px;
	display: none;
	width: 18rem;
	height: auto;
	list-style: none;
	background-color: #265FBC;
    border-bottom: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

nav .top_menu ul.sub li {
	width: 100%;
	height: auto;
	margin: 0;
}

nav .top_menu ul.sub li a {
	width: 100%;
	height: auto;
	border-radius: 0;
	padding: 0.8rem 2rem;
	color: white;
	font-size: 1.4rem; /* should be 'font-size' */
	/* removed line-height. target area should be based on padding */
}

nav .top_menu ul.sub li a:hover, nav .top_menu ul.sub li a:focus {
	background-color: #F03A47;
}


/* ==========================================================================
 Body / Contents
 ========================================================================== */
main {
	position: relative;
	margin-top: 20rem;
	padding-top: 0;
}

.inner main { padding-top: 3.5rem; }

.home main .container { margin-top: 1rem; }

main section {
	width: calc(100% - 260px);
	float: left;
}

main aside {
	width: 245px;
	margin-left: 15px;
	float: left;
    background-color: #265FBC;
    padding: 2rem;
    color: white;
}

.subnav.home { display: none; }

main p { margin: 1.6rem 0; }

main p a {
	line-height: 1;
	display: inline-block;
	border-bottom: 1px dotted #F03A47;
}

main p a:hover,
main p a:focus {
	color: #265FBC;
	border-bottom-color: #265FBC; 
}

main ol, main ul {
	list-style-position: outside;
	padding-left: 4rem;
	margin: 1.6rem 0; /* prefer to have this the same as 'main p' but design my differ */
}

main ol li,
main ul li { padding-left: .5rem; }


/* ==========================================================================
 Sub Nav Aside
 ========================================================================== */
.sub_links .title {
	font-size: 20px;
	font-weight: bold;
}

.links {
    list-style: none;
	margin: 1rem 0;
	padding-left: 2rem;
}

.links li {
	padding: 6px 0;
}

.links li a {
	color: white;
	font-size: 17px;
}

.links li a:hover {
	color: #F03A47;
}


/* ==========================================================================
 CMS Sections
 ========================================================================== */
.cms_section {
	
}

.cms_section_title {
	padding-left: .8rem;
    padding-right: .8rem;
}

.cms_section_title h2 {
	margin-top: 0;
}

.cms_section_content,
.cms_section_media {
	float: left;
	width: 33.3%;
	padding-left: .8rem;
	padding-right: .8rem;
}

.cms_section_media img {
	width: 100%;
}

.cms_section_video {
	float: left;
	width: calc(33.3% - 1.2rem);
	position: relative;
	padding-bottom: 18%;
	padding-top: 25px;
	margin: 0 .6rem;
	height: 0;
}

.cms_section_video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.cms_section_layout_1 .cms_section_content {
	width: 100%;
}

.cms_section_layout_2 .cms_section_content {
	width: 66%;
}

.cms_section_content p {
	margin-top: 0;
}

.cms_section_content .button {
	margin: 1rem 0;
    padding: .6rem 0;
}

.cms_section_content .section_button {
	padding: .6rem 1.8rem;
    font-size: 1.6rem;
    text-decoration: none;
    width: auto;
    background-color: #F03A47;
    color: white;
    text-transform: uppercase;
    text-align: center;
	border: 1px solid #F03A47;
    border-radius: 0.3rem;
    -moz-border-radius: 0.3rem;
    -webkit-border-radius: 0.3rem;
}

.cms_section_content .section_button:hover,
.cms_section_content .section_button:focus {
	background-color: #656972;
	border-color: #656972;
}

.media_align_l .cms_section_media {
	float: left;
}

.media_align_r .cms_section_media {
	float: right;
}


/* ==========================================================================
 Sticky Footer -- If so desired
========================================================================== */

.page {
	min-height: 100%;
	float: left;
	position: relative;
}

main { padding-bottom: 22rem; } /* More than height of footer to accomodate for :before footer element */

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}


/* ==========================================================================
CSS for Embeded videos
========================================================================== */
.video { /* wrap your iframe in an element with class="video" */
	width: 100%;
    position: relative;
    overflow: hidden;
    height: 0px;
    padding: 30px 0px 62.5%;
}

.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
 Footer (Lower navigation, copyright, etc)
 ========================================================================== */
footer {
	padding: 1.6rem 0;
	background-color: #265FBC;
	color: #fff;
	font-size: 1.4rem;
}

footer:before {
	content: "";
	width: 100%;
	display: block;
	height: 63px;
	background: url('/images/footer/footer-bg.png') repeat-x center;
	position: absolute;
	top: -6.3rem;
	left: 0;
}

footer .menu {
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
}

footer .menu li {
	display: inline-block;
	padding-right: 0.5rem;
}

footer .menu li:after {
	content: '|';
	margin-left: 1rem;
	font-family: sans-serif;
}

footer .menu li:last-child:after { content: none; }


footer .menu li a {
	text-decoration: none;
	color: #fff;
}

footer .menu li ul { display: none; }

footer .address,
footer .legal {
	width: auto;
	float: left;
}

footer .vsi {
	float: right;
	display: block;
	overflow: hidden;
	margin: 0 auto;
	width: 120px;
	height: 30px;
	background: no-repeat url("https://static.visionary.com/siteoncall/visionary-reverse.png");
	text-indent: 100%;
	white-space: nowrap;
}


footer .social {
	margin-top: 1.2rem;
	margin-bottom: 1.2rem;
	float: left;
	clear: both;
}


footer .social .icon {
	height: 24px;
	width: 24px;
	float: left;
	border-radius: 100%;
	margin-right: .6rem;
	background: #fff;
}

footer .social .icon:last-of-type { margin: 0; }


/* ==========================================================================
Basic form styling
========================================================================== */
.form_row {
	float: left;
	width: 100%;
}

label.req {
	font-weight: bold;
	font-weight: 700;
	padding-right: .5rem;
}

label.req:after {
	content: '*';
	color: #F03A47;
	margin-left: .25rem;
	font-family: sans-serif;
}

fieldset, .form_buttons {
	float: left;
	width: 100%;
	margin-bottom: 2rem;
	padding-right: 2rem;
}
fieldset.no_bottom, .form_buttons.no_bottom {
	margin-bottom: 0;
}
fieldset.fs1 { width: 25%; }
fieldset.fs2 { width: 50%; }
fieldset.fs3 { width: 75%; }

fieldset input,
fieldset select,
fieldset textarea {
	width: 100%;
	height: 4.2rem;
	margin: 0;
	padding: .5rem;
	border: 1px solid #DDD;
	border-radius: 0px;
	font-size: 1.6rem;
	font-family: inherit;
}

.form_buttons button,
.form_buttons input[type="submit"],
.form_buttons input[type="reset"],
fieldset input[type="text"],
fieldset input[type="password"],
fieldset input[type="email"],
fieldset input[type="number"],
fieldset input[type="tel"],
fieldset input[type="url"],
fieldset input[type="search"],
fieldset textarea {
	/* remove form element default browser appearance styles */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

fieldset textarea { height: 10rem; }

fieldset .form_note { font-size: 1.2rem; }

/* Button, Submit, and Cancel Form Buttons */
.form_buttons button,
.form_buttons input[type="submit"],
.form_buttons input[type="reset"] {
	margin: 0 1rem 1rem 0;
	padding: 1rem 2rem;
	color: #fff;
	background-color: #F03A47;
	border: 1px solid #F03A47;
	border-radius: 0.3rem;
	-moz-border-radius: 0.3rem;
	-webkit-border-radius: 0.3rem;
	font-size: 1.6rem;
	font-weight: normal;
	cursor: pointer;

	transition: all .125s linear;
	-webkit-transition: all .125s linear;
	-moz-transition: all .125s linear;
	-o-transition: all .125s linear;
}

/* Hover & Focus Changes */
.form_buttons button:hover,
.form_buttons button:focus,
.form_buttons button:active,
.form_buttons input[type="submit"]:hover,
.form_buttons input[type="submit"]:focus,
.form_buttons input[type="submit"]:active,
.form_buttons input[type="reset"]:hover,
.form_buttons input[type="reset"]:focus,
.form_buttons input[type="reset"]:active {
	background-color: #656972;
	border-color: #656972;
}

.form_buttons button:last-child,
.form_buttons input[type="submit"]:last-child,
.form_buttons input[type="reset"]:last-child {
	margin-right: 0;
}

input.chk { display: none; }

/* Form Errors ------- */
.form_error {
	margin-bottom: 1.6rem;
	color: #F03A47;
}

.form_error ul { padding-left: 1.6rem; }


/* ==========================================================================
Link Buttons (links that look like buttons)
========================================================================== */
.link_button {
	text-decoration: none;
	display: inline-block;
	padding: 1.4rem 2rem;
	color: #fff;
	background-color: #F03A47;
	border: 1px solid #F03A47;
	border-radius: 0.3rem;
	-moz-border-radius: 0.3rem;
	-webkit-border-radius: 0.3rem;
}

.link_button:hover,
.link_button:focus,
.link_button:active {
	background-color: #656972;
	border-color: #656972;
}


/* ==========================================================================
Event Widget
========================================================================== */
.event_widget {
	position: relative;
	width: 30rem;
	float: left;
	background-color: #F03A47;
	color: #F6F4F3;
	padding: 1.6rem;
	min-height: 42.4rem;
}

.event_widget:before {
	content: "";
	display: block;
	position: absolute;
	top: -3.5rem;
	left: 50%;
    transform: translateX(-50%);
    background: url('/images/body/cal_icon.png') no-repeat center;
	background-color: #fff;
	border: 5px solid #F03A47;
	height: 7rem;
	width: 7rem;
	border-radius: 100%;
}

.event_widget .event {
	margin-bottom: 1.6rem;
}
.event_widget .event a {
	color: #F6F4F3;
	font-weight: 700;
	line-height: 1.125;
	display: block;
	margin: 0;
}
.event_widget_title {
	font-weight: 700;
	font-size: 2.4rem;
	color: #F6F4F3;
	text-align: center;
	display: block;
	padding-bottom: 1rem;
	padding-top: 2rem;
	margin-bottom: 1.6rem;
	border-bottom: 1px solid #F6F4F3;
}


/* ==========================================================================
 Special media queries for Retina devices
 ========================================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    background-image: url('/images/header/social-sprite-2X.png');
    background-size: 72px 48px; /* This replicates the original standard sprite dimensions */
}


/* ==========================================================================
Desktop view (less than 1000 pixels) -- adjust for .page max-width
========================================================================== */
@media all and (max-width:1005px) {
	.page {
		width: 100%;
	}
	
	nav {
		width: 100%;
	}
	
	nav .top_menu {
		text-align: center;
	}
	
	header .logo {
		display: block;
		float: none;
		margin: auto;
		margin-top: 1.6rem;
	}
	
	.inner main {
		padding-top: 10rem;
	}
}

/* ==========================================================================
Tablet view (less than 800 pixels) -- this may change based on breakpoint of nav menu
========================================================================== */
@media all and (max-width: 800px) {
	header {
		position: relative;
		height: 16rem;
		margin-top: -1.25rem;
		padding-top: 1.25rem;
		border-bottom: 0;
	    box-shadow: none;
	}

	header .logo {
		position: relative;
		margin: 1.2rem auto;
		float: none;
		display: block;
		width: 100%;
		max-width: 250px;
	}
	
	header nav {
		position: relative;
		width: calc(100% + 4rem);
		left: 2rem;
		margin: 0;
		padding-bottom: 1rem;
	    border-bottom: 5px solid #F03A47;
    	box-shadow: 0px 5px 10px -4px rgba(0,0,0,0.25);
		margin-bottom: 2rem;
	}
	
	nav .menu {
		width: 100%;
		text-align: center;
		display: inline-block;
		cursor: pointer;
		font-size: 2.4rem;
		font-weight: 400;
		color: #265FBC;
		line-height: 1;
		margin: 1rem 0;
	}
	
	nav .menu:before {
		content: '\2261';
		display: inline-block;
		font-family: monospace;
		font-size: 3.2rem;
		margin-right: 1rem;
	}

	nav .submenu {
		position: absolute;
		top: 3px;
		right: 2rem;
		display: inline-block;
		cursor: pointer;
		font-size: 3.4rem;
	}
	
	nav .top_menu {
		display: block;
		width: 100%;
		height: auto;
		text-align: center;
	}

	nav .top_menu li {
		width: 100%;
		border-bottom: 1px solid #ccc;
		margin: 0;
	}
	
	nav .top_menu li:last-child { border-bottom: none; }

	nav .top_menu li a {
		width: 100%;
		height: auto;
		line-height: 4rem;
	}
	
	nav .top_menu ul.sub {
		position: relative;
		top: 0;
		display: block;
		overflow: visible;
		width: 100%;
		margin-top: 0;
	}
	
	nav .top_menu ul.sub li {
		width: 100%;
	}
	
	nav .top_menu ul.sub li.sub-menu-first {
		border-top: 1px solid #ccc;
	}
	
	nav .top_menu ul.sub li.sub-menu-last {
		border-bottom-width: 0;
	}
	
	nav .top_menu ul.sub li a {
		width: 100%;
		padding: 1rem 2rem 1rem 4rem;
	}
	
	main section, main aside {
		float: none;
		margin: 0;
		width: 100%;
	}
	
	main aside {
		margin-top: 3rem;
	}
	
	main {
		margin: 0;
		padding-bottom: 10rem;
	}
	
	.inner main {
		padding-top: 0;
	}
	
	.cms_section_title, .cms_section_content {
		margin: 0;
		padding: 0;
	}
	
	.cms_section_layout_1 .cms_section_content {
		width: 100%;
	}
	
	.cms_section_layout_2 .cms_section_content {
		width: 100%;
	}

	.cms_section_layout_2 .cms_section_image {
		width: 100%;
		margin: 0;
		padding: 0;
    	margin-top: .5rem;
	    margin-bottom: .5rem;
	}
	
	.cms_section_layout_3 .cms_section_content {
		width: 100%;
	}

	.cms_section_layout_3 .cms_section_image {
		width: 100%;
		margin: 0;
		padding: 0;
    	margin-top: .5rem;
	    margin-bottom: .5rem;
	}

	.cms_section_layout_4 .cms_section_image {
		width: 100%;
		margin: 0;
		padding: 0;
    	margin-top: .5rem;
	    margin-bottom: .5rem;
	}
	
	.media_align_r .cms_section_layout {
		display: flex;
		flex-direction: column;
	}
	
	.cms_section_content { order: 1; }
	.cms_media_container { order: 2; }
	
	.cms_section_video {
		width: 100%;
    	padding-bottom: 60%;
		margin: 0;
	    margin-bottom: .5rem;
	}

	.cms_section_video iframe {
		padding-bottom: 0;
	}

	.event_widget {
		width: 100%;
		padding: 1.6rem 3.2rem;
		margin-bottom: 1.6rem;
		text-align: center;
		min-height: auto;
		margin-top: 7rem;
	}

	.event { margin: 3.2rem 0; }
	
	footer {
		position: relative;
		text-align: center;
	}

	footer ul, footer .address, footer .legal {
		width: 100%;
		margin: 1rem auto;
	}

	footer .menu { float: none; }

	footer .vsi {
		display: block;
		margin: 1rem auto;
		float: none;
	}
	
	.viewer_contain { overflow: hidden; }

 	span.viewer,
 	div.viewer,
 	a.viewer {
 		float: left;
 		width: 49%;
 		margin-right: 1%;
 	}

 	.viewer:nth-child(odd) { margin-left: 0; }

	fieldset.fs1 { width: 50%; }
	
	fieldset.fs2, fieldset.fs3 { width: 100%; }
}

/* ==========================================================================
Mobile view (less than 620 pixels)
========================================================================== */
@media all and (max-width:620px) {
	.search_desktop {
		display: none;
	}
	
	.search_mobile {
		display: block;
	}
}

/* ==========================================================================
Mobile view (less than 520 pixels)
========================================================================== */
@media all and (max-width:520px) {
	span.viewer,
	div.viewer,
	a.viewer {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	
	fieldset.fs1, fieldset.fs2, fieldset.fs3 {
		width: 100%;
	}
	
	.cms_section_layout_2 .cms_section_media {
		width: 100%;
		margin-left: 0;
	}
	
	.cms_section_layout_3 .cms_section_media {
		width: 100%;
		margin-left: 0;
	}

	.cms_section_layout_4 .cms_section_media {
		width: 100%;
		margin-left: 0;
	}
}

/* ==========================================================================
Mobile view (less than 440 pixels)
========================================================================== */
@media all and (max-width:440px) {
	/* placeholder for media query styling */
}