@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%;
	min-height: 100%;
	font-size: 1.8rem;
	font-family: 'Crimson Text', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	color: #2A2A2A;
	background-color: #fffbf5;
	overflow-x: hidden;

	/* smooths type in all browsers */
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
	-webkit-font-smoothing: 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;
	line-height: 1.6;
	text-align: center;
}

img {
	border: 0;
	display: block;
}

a {
	color: #174c80;
	text-decoration: underline;

	transition: all .125s ease-in-out;
	-webkit-transition: all .125s ease-in-out;
	-moz-transition: all .125s ease-in-out;
	-o-transition: all .125s ease-in-out;
}

a:hover,
a:focus { text-decoration: none; }

#preview a { text-decoration: none; }
#preview a:hover { color: #fff; }

.error {
	margin: 0 0 1.5rem;
	padding-top: 0;
	padding-left: 1.7rem;
	font-weight: bold;
	color: #c00;
}

h1, h2, h3 {
	margin: 1.6rem 0;
	padding: 0;
	line-height: 1.125;
	font-family: 'Lato', sans-serif;
	font-weight: 900;
}

h1 { font-size: 4.4rem; }
h2 { font-size: 3.6rem; }
h3 { font-size: 2.4rem; }

h4 { font-size: 2.1rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.6rem; }

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

b, strong {
	font-weight: bold;
	font-weight: 600; /* or whatever your 'bold' weight is */
}

i, em { font-style: italic; }

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

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

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

header, main, footer {
	float: left;
	width: 100%;
}

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

.cf:before, .cf:after {
	content: ' ';
	display: table;
}
.cf:after {
	clear: both;
}
.cf {
	*zoom: 1;
}


/* ==========================================================================
 Category/Filter toggle viewer
 ========================================================================== */
.viewer_contain { margin-bottom: 3.2rem; }

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

	transition: all .125s ease-in-out;
	-webkit-transition: all .125s ease-in-out;
	-moz-transition: all .125s ease-in-out;
	-o-transition: all .125s ease-in-out;
}

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;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
}

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

@media all and (min-width: 801px) {
	.page {
		min-height: 100%;
		float: left;
		position: relative;
	}


	main { padding-bottom: 1rem; }
	.home main { padding-bottom: 1rem; }

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


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

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


/* ==========================================================================
 Header (contains navigation, logo, etc)
 ========================================================================== */
header {
	position: relative;
	z-index: 30;
	overflow: visible;
	background-color: #01182d;
	color: #fff;
	padding-top: 1rem;
}

header .logo_container {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -600px;
	margin-top: -65px;
	margin-top: calc(((4.4rem + 1px) / -2) - (87px / 2));
	text-decoration: none;
}

header .logotype {
	font-family: 'Cardo', Times, serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 55px;
	line-height: 1;
	width: 100%;
	float: left;
	letter-spacing: -0.125rem;
	color: #fff;
	text-decoration: none;
}

header .subtype {
	font-family: 'Crimson Text', Times, serif;
	font-weight: 400;
	font-size: 26px;
	text-align: left;
	line-height: 1.25;
	width: 100%;
	float: left;
	color: #fff;
	text-decoration: none;
}

header .logo {
	width: 100%;
	max-width: 100%;
	margin: 1rem auto;
	display: block;
	float: none;
}

header .logo img {
	display: block;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

header .phone {
	text-align: right;
	float: right;
}

header .phone_number {
	color: #fff;
	font-size: 3.75rem;
	text-decoration: none;
	display: block;
	width: 100%;
	cursor: default;
}

header .call_us {
	font-style: italic;
	width: 100%;
	display: block;
}

header .social { margin-bottom: 0; }


/* ==========================================================================
 Top Menu Navigation (drop-down menu)
 ========================================================================== */
nav {
	background-color: #333;
	border-top: 1px solid #4d4d4d;
	margin-top: 2rem;
}

.menu,
.submenu { display: none; }

/* Flexbox top menu */
.top_menu {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	max-width: 1200px;

}

.top_menu > li {
	-webkit-box-flex: 1;
	-webkit-flex: 1 1 auto;
	    -ms-flex: 1 1 auto;
	        flex: 1 1 auto;
	white-space: nowrap;
}

/* Normal fallback menu */
.top_menu {
	position: relative;
	z-index: 200;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background-color: transparent;
	text-align: center;
	font-size: 0;
}
.top_menu li {
	position: relative;
	display: inline-block;
	width: auto;
	border-bottom: none;
	border-right: 1px solid #000;
	border-left: 1px solid #666;
}


.top_menu li:first-child:before {
	content: "";
	display: inline-block;
	position: absolute;
	left: -2px;
	top: 0;
	width: 1px;
	background-color: #000;
	height: 100%;
}

.top_menu li:last-child:after {
	content: "";
	display: inline-block;
	position: absolute;
	right: -2px;
	top: 0;
	width: 1px;
	background-color: #666;
	height: 100%;
}


.top_menu li a {
	display: inline-block;
	padding: 1rem 2rem;
	font-size: 1.6rem;
	text-decoration: none;
	width: 100%;
	height: 100%;
	color: #fff;
}

/* nav .top_menu li.top_menu_active a */
.top_menu li a:hover,
.top_menu li a:focus {
	background-color: #174c80;
}

.top_menu ul.sub {
	position: absolute;
	z-index: 201;
	top: 4.25rem;
	left: -0.1rem;
	display: none;
	width: auto; 
	min-width: 18rem;
	height: auto;
	padding: 0;
	text-align: left;
	list-style: none;
	background-color: #174c80;
	border-top: 1px solid #113960;
	border-bottom: 2px solid #113960;
}

.top_menu li:last-child ul.sub {
	left: auto;
	right: -0.1rem;
}

.top_menu ul.sub li {
	width: 100%;
	height: auto;
	display: block;
	border-left: none;
	border-right: none;
	border-top: 1px solid #457099;
	border-bottom: 1px solid #113960;
}

.top_menu ul.sub li a {
	width: 100%;
	height: auto;
	white-space: nowrap;
	padding: 0.8rem 2rem;
	font-size: 1.6rem;
}

.top_menu ul.sub li a:hover,
.top_menu ul.sub li a:focus {
	background-color: #01182D;
	color: #fff;
}

.top_menu ul.sub li:first-child:before,
.top_menu ul.sub li:last-child:after {
	display: none;
	content: none;
}




/* ==========================================================================
Body / Contents
========================================================================== */
main { position: relative; }

main section { margin-bottom: 3.2rem; }
.inner main section { margin-bottom: 1.6rem; }

.inner main section .container { padding-top: 1.6rem; }

main p { margin: 1.6rem 0; }

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

main .container p img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
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.section (Lower navigation, copyright, etc)
========================================================================== */

footer .marquee_logo img {
	margin-right: 25px;
	display: inline !important;
}

footer .marquee_logo a img:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
	cursor: pointer;
}

footer .marquee {
	width: 100%;
	overflow: hidden;
	background: #fffbf5;
	padding: 15px 0;
}

footer .marquee_logo {
	height: 75px;
	width: 3350px;
}

.marquee_first {
	-webkit-animation: bannermove 10s linear infinite;
	-moz-animation: bannermove 100s linear infinite;
	-ms-animation: bannermove 1000s linear infinite;
	-o-animation: bannermove 10000s linear infinite;
	animation: bannermove 100000s linear infinite;
}
 
@keyframes "bannermove" {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: -2125px;
	}
}
 
@-moz-keyframes bannermove {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: -2125px;
	}
}
 
@-webkit-keyframes "bannermove" {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: -2125px;
	}
}
 
@-ms-keyframes "bannermove" {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: -2125px;
	}
}
 
@-o-keyframes "bannermove" {
	0% {
		margin-left: 0px;
	}
	100% {
		margin-left: -2125px;
	}
}

.home footer {
	padding-top: 0;
}

.home footer .container {
	padding-top: 40px;
}

footer {
	background-color: #01182d;
	color: #fff;
	font-size: 1.8rem;
	text-align: left;
	margin-top: 1%;
	padding: 3.2rem 0;
}

footer .container {
	padding-top: 40px;
}

footer .footer_info {
	float: left;
}

.social_vsi_wrapper {
	float: right;
}

footer .address,
footer .phone_numbers {
	display: inline-block;
	float: left;
	width: auto;
	line-height: 1;
	margin-right: 5rem;
	margin-bottom: 2.4rem;
}

footer .legal {
	width: 100%;
	font-size: 1.4rem;
}

.address span,
.phone_numbers span {
	display: block;
	margin: .8rem 0;
}

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

.social {
	float: none;
	line-height: 1;
	width: 100%;
	margin-bottom: 1rem;
	text-align: right;
}

.social .icon {
	display: inline-block;
	width: 2.6rem;
	margin-left: 0.5rem;
	transition: transform 250ms ease-in-out; 
}

.social .icon svg,
.social .icon path { transition: fill 250ms ease-in-out; }

.social .icon:hover svg,
.social .icon:hover path,
.social .icon:focus svg,
.social .icon:focus path { fill: #82a6c9; }

svg {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
	display: block;
}


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

fieldset,
.form_buttons {
	float: left;
	width: 100%;
	margin-bottom: 2rem;
	padding-right: 2rem;
}

.fieldset { margin-bottom: 1.6rem; }

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 1rem;
	border: 1px solid #BBB;
	background-color: transparent;
	border-radius: 0px;
	font-size: 1.6rem;
	font-family: inherit;
}

fieldset label {
	width: 100%;
	display: block;
	margin-bottom: .4rem;
}

.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;
	line-height: 1.4;
}

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;
	background-color: transparent;
	border: 3px solid #174c80;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	font-size: 1.6rem;
	font-weight: 900;
	font-family: 'Lato', sans-serif;
	cursor: pointer;
	color: #174c80;

	transition: all .125s ease-in-out;
	-webkit-transition: all .125s ease-in-out;
	-moz-transition: all .125s ease-in-out;
	-o-transition: all .125s ease-in-out;
}

/* 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 {
	background-color: #174c80;;
	color: #fff;
}

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

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

/* Reset/Cancel Buttons ------ */
.form_buttons input[type="reset"] {
	color: #888;
	border-color: #888;
}

.form_buttons input[type="reset"]:hover,
.form_buttons input[type="reset"]:focus,
.form_buttons input[type="reset"]:active {
	color: #fff;
	background-color: #888;
}

input.chk { display: none; }

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

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

/* ==========================================================================
Link Buttons (links that look like buttons)
========================================================================== */
.link_button {
	text-decoration: none;
	display: inline-block;
	padding: 1rem 2.4rem;
	background-color: transparent;
	border: 3px solid #174c80;
	font-weight: 900;
	font-family: 'Lato', sans-serif;
	border-radius: 0px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	color: #174c80;
}

.link_button:hover,
.link_button:focus,
.link_button:active {
	background-color: #174c80;
	border-color: #174c80;
	color: #fff;
}

/* Ghost Buttons ----- */
.ghost_button {
	text-decoration: none;
	display: inline-block;
	padding: 1rem 2rem;
	background-color: transparent;
	border: 1px solid #333;
	color: #333;
	border-radius: 0.4rem;
	-moz-border-radius: 0.4rem;
	-webkit-border-radius: 0.4rem;
}

.ghost_button:hover,
.ghost_button:focus,
.ghost_button:active {
	background-color: #333;
	color: #fff; /* or whatever your site background color is */
}


/* ==========================================================================
 Desktop view (less than 1200 pixels)
 ========================================================================== */
@media all and (max-width: 1200px) {
	.page { width: 100%; }
	.top_menu li:first-child { border-left: none; }
	.top_menu li:first-child:before { content: none; }

	.top_menu li:last-child { border-right: none;}
	.top_menu li:last-child:after { content: none; }

	.top_menu li:last-child ul.sub { right: 0; }
}

/* ==========================================================================
 Desktop view (less than 1000 pixels)
 ========================================================================== */
@media all and (max-width: 1000px) {
	.menu,
	.submenu {
		cursor: pointer;
		text-align: right;
		font-family: monospace;
	}

	.menu {
		display: block;
		width: 100%;
		padding: 0 1.6rem .5rem 0;
		font-size: 4rem;
		line-height: 1;
	}

	.menu:before {
		content: "Menu";
		display: inline-block;
		font-family: 'Crimson Text', sans-serif;
		font-size: 2.6rem;
		margin-right: .6rem;
		line-height: 1;
		vertical-align: baseline;
	}

	.submenu {
		display: inline-block;
		position: absolute;
		top: 1.5rem; /* should be equal to .top_menu li a top-padding */
		right: 1.6rem; /* should be equal to .top_menu li a side padding */
		border-left: 1.5rem solid transparent;
		border-top: 1.5rem solid #fff;
		border-right: 1.5rem solid transparent;

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

	.show_submenu .submenu {
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-ms-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	.top_menu {
		display: none;
		overflow: visible;
		width: 100%;
		list-style: none;
		background-color: #174c80;
		text-align: left;
		position: absolute;
		left: 0;
		margin: 0;
	}

	.top_menu li {
		position: relative;
		width: 100%;
		border-bottom: 1px solid #113960;
		border-right: none;
		border-left: none;

	}

	.top_menu li:last-child { border-bottom: none; }

	.top_menu li a {
		width: 80%; /* decrease width to prevent link + target overlap */
		display: block;
		padding: 1.4rem 1.6rem;
		text-decoration: none;
		line-height: 1;
		color: #fff;
		font-size: 1.8rem;
		border-left: 0 solid #01182D;
	}

	.top_menu li a:hover,
	.top_menu li a:focus {
		color: #fff;
		border-left: 5px solid #01182D;
	}

	.top_menu ul.sub {
		position: relative;
		top: 0;
		overflow: hidden;
		width: 100%;
		margin-top: 0;
		background-color: #174c80;
		border-top: 1px solid #113960;
		border-bottom: 1px solid #457099;

	}

	.top_menu ul.sub li { width: 100%; }

	.top_menu ul.sub li.sub-menu-last,
	.top_menu ul.sub li:last-child { border-bottom: none; }

	.top_menu ul.sub li a {
		width: 100%;
		padding: 1.2rem 4rem;
		font-size: 1.8rem;
	}
}


@media all and (max-width: 1200px) {
	header .logo_container {
		left: 1rem;
		margin-left: 0;
	}
}


/* ==========================================================================
 Tablet view (less than 800 pixels)
 ========================================================================== */
@media all and (max-width: 800px) {
	header {
		height: auto;
		min-height: 150px;
	}

	header .logo_container {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		margin-top: 0;
		margin-bottom: 2rem;
		float: left;
	}

	header .logotype {
		font-size: 5rem;
		font-size: 9vw;
		text-align: center;
	}

	header .subtype { text-align: center; }

	header .phone {
		width: 100%;
		text-align: center;
	}

	header .phone_number {
		width: auto;
		display: inline-block;
		text-align: left;
		margin-right: 1.6rem;
	}

	header .call_us {
		width: auto;
		display: inline-block;
		vertical-align: text-bottom;
		line-height: 1;
		font-size: 2.1rem;
	}

	header nav {
		position: relative;
		bottom: auto;
		left: auto;
		right: auto;
	}
	

	main section,
	main aside {
		float: none;
		width: 100%;
	}

	footer {
		text-align: center;
		padding: 1.6rem 0;
		position: relative;
	}

	.home footer:before {
		-webkit-animation: slideshow 30s linear infinite;
		-moz-animation: slideshow 30s linear infinite;
		animation: slideshow 30s linear infinite;
	}

	footer .footer_info { float: none; }

	footer .address,
	footer .phone_numbers {
		width: 100%;
		margin-right: 0;
	}

	footer .legal {
		width: 100%;
		font-size: 1.4rem;
	}

	.address span {
		display: inline-block;
		margin: .6rem .6rem .6rem 0;
	}

	footer .vsi {
		float: none;
		margin: 1.6rem auto;
	}

	.social_vsi_wrapper {
		float: none;
		width: 100%;
	}

	.social {
		margin-top: 1.5rem;
		text-align: center; 
	}

	/* -- Category/Filter toggle viewer -- */
	.viewer_contain {
		float: left;
		width: 100%;
	}

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

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

	fieldset.fs1 { width: 50%; }

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


/* ==========================================================================
 Mobile view (less than 520 pixels)
 ========================================================================== */
@media all and (max-width: 520px) {
	header .subtype { display: none; }

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


/* ==========================================================================
 Mobile view (less than 440 pixels)
 ========================================================================== */
@media all and (max-width: 440px) {
	body { word-break: break-word; }

	header .phone_number { margin: 0; }

	/* -- Category/Filter toggle viewer -- */
	span.viewer,
	div.viewer,
	a.viewer,
	.viewer:nth-child(odd),
	.viewer:nth-child(even) {
		float: left;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}