/*
 * Contents copyright Phase One Website Design & Hosting
 * https://www.phaseonewebsitedesign.com/
 */
/* #003399 000,051,153, Dark Blue, somewhat subdued */
/* #000066 000,000,102, Dark Blue */
/* #000099 000,000,153, Dark Blue, but brighter */
/* #164e82 022,078,130, Steel Blue */
/* #428bca 066,139,202, Steel Blue, but lighter */
/* #3399cc 051,153,204, Steel Blue, but even lighter */
/* #006699 000,102,153, Mid-Blue, muted */
/* #336699 051,102,153, Mid-Blue, muted */
/* #0061bb 051,102,153, A bit Bluer then the 2 above */
/* #3399cc 051,153,204, Light Blue */
/* #0066cc 000,102,204, Light Blue, but slightly darker */
/* #d8e9f9 216,233,249, Very Light Blue */
/* #ccffff 204,255,255, Very Pale Blue */
/* #66cccc 102,204,204, Teal, Lighter */
/* #009999 000,153,153, Teal, Darker */
/* #006666 000,102,102, Teal, even Darker */
/* #009900 000,153,000, Mid-, almost Forest Green */
/* #449d44 068,157,068, Lighter Green */
/* #1ec279 030,194,121, A not-too-pleasing green used in a button */
/* #ffcc00 255,204,000, A muted yellow used in a button */
/* #ff0000 255,000,000, A bright red used in a button */
/* #cc3333 204,051,051, Brick Red */
/* #cc6666 204,102,102, Brick Red, but washed out a bit */
/* #333333 051,051,051, Flat Black */
/* #999999 153,153,153, Darkest Grey */
/* #aaaaaa 170,170,170, Darker Grey */
/* #cccccc 204,204,204, Slightly Lighter Grey */
/* #dddddd 221,221,221, Lighter Grey */
/* #eeeeee 240,240,240, Off-White */

body {
	/*background-color:rgba(0, 51, 153, 1.0); margin:0; padding:0; /* #039 */
	/*font-size:1.6em; /* currently ems cause chrome bug misinterpreting rems on body element */
	line-height:1.5;
	font-weight:normal;
	/*font-family:Calibri, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	font-family:'Roboto', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color:#000;
}
/*.container {box-sizing:border-box; margin:0 auto; max-width:1200px; padding:0 20px; position:relative; width:100%;}*/
.container {
	background-color:#fff;
	color:#000;
	font-family:'Roboto', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height:1.5;
	margin-bottom:20px;
	max-width:1200px;
	width:100%;
	padding:2% 2% 2% 2%;
}

header { background:#fff; height:500px; /*margin-bottom:20px;*/ overflow:hidden; width:100%; }
#headerBackground {
	/*background-image:url("https://unsplash.it/2000/1200/?random");*/
	/*background-image:url("http://www.phaseonewebsitedesign.com/hero-image.jpg");*/
	background-position:center;
	background-size:cover;
	display:table;
	height:inherit;
	width:inherit;
	}
#headerCentered { display:table-cell; text-align:center; text-shadow:1px 1px 8px rgba(0, 0, 0, 0.4); vertical-align:middle; }
/*#headerCentered > img { border:1px solid #fff; border-radius:100%; display:block; margin:0 auto; width:130px; }*/
#headerCentered > h1 { color:#fff; font-family:"Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:3.0em; }
#headerCentered > h2 { color:#fff; font-family:"Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:2.0em; }
.inner { margin:0 auto; max-width:1200px; padding:20px; }
.inner > p { font-size:16px; line-height:40px; }

footer {background-color:#164e82; margin:0; padding:0; padding:10px 0 20px 0;}
footer p {color:#fff; margin:0; padding:0; font-size:12px;}
footer a {margin:0; padding:1px 3px; text-decoration:underline;}
footer a:link,  footer a:visited {color:#fff; text-decoration:underline;}
footer a:hover, footer a:active  {background-color:#06C; color:#fff; text-decoration:none;}

/* ****************************************** */
/* ******* Hyperlinks *********************** */
/* For links, list them in this order: "link-visited-hover-active", or "LVHA", or LoVeHAte */
a:link	{color:#009900;}
a:visited {color:#009900;}
a:hover   {color:#003399; text-decoration:none;}
a:active  {color:#009900;}


.hr-blue-fade-1 {background-image:url(../images/hr-1px-blue-line-fade.png); border:0; height:7px;}
.hr-blue-fade-2 {background-image:url(../images/hr-blue-lines-fade.png); border:0; height:16px;}

.img-responsive {box-sizing:border-box; max-width:100%;}
.img-circle {border-radius:50%; border:1px solid #069;}
.img-circle-160 {border-radius:50%; border:1px solid #069; width:160px; height:auto;}

.border-blue {border:2px solid #039;}

.float-left  {float:left; margin-right:10px; margin-bottom:7px;}
.float-right {float:right; margin-left:10px; margin-bottom:7px;}
.float-none-then-left  {}
.float-none-then-right {}

/* ****************************************** */
/* ******* Typography *********************** */
h2 {color:#039; font-size:1.8em; font-family:'Sonsie One', cursive; font-weight:bold; padding-bottom:1%; text-shadow:2px 2px 1px #aaa;}
h3 {color:#039; font-size:1.7em; font-family:'Playball', cursive; font-weight:bold; padding-bottom:0; text-shadow:2px 2px 1px #aaa;}
h4 {color:#039; font-size:1.6em; font-family:'Playball', cursive; font-weight:bold; padding-bottom:0;}
h5 {color:#039; font-size:1.4em; font-family:'Playball', cursive; font-weight:bold; padding-bottom:0;}
h6 {color:#039; font-size:1.2em; font-family:'Playball', cursive; font-weight:bold; padding-bottom:0;}
h1.inline, h2.inline, h3.inline, h4.inline, h5.inline, h6.inline {display:inline;}

.sub {line-height:0.2em; position:relative; top:0.3em; font-size:0.8em;}
.sup {line-height:0.2em; position:relative; bottom:0.5em; font-size:0.8em;}

.inset-area-nobg    {margin-left:-20px; padding:20px 20px 1px 20px; width:97%;}
.inset-area-whitebg {margin-left:-20px; padding:20px 20px 1px 20px; width:97%; background-color:#fff; border-radius:20px;}

.form-width {width:100%; margin:auto;} /* Similar situation here */
.full-width {width:100%; margin:auto;} /* This is used ONLY when single columns (.twelve .columns) are used for text - otherwise lines would be too long and difficult to read */

ul.in-content {list-style-type:none;} /* Remove the disk so it can be styled */
ul li.in-content { /* Now add the new styling */
	background:url(../images/gear-icon-for-bullets.png) no-repeat top left;
	background-position:0 3px; /* Adjusts the vertical position of the bullet */
	line-height:1.5625;
	padding:0 0 0px 25px; /* Adjusts the distance between the bullet and the text */
	margin-left:1em;
}
/* This one is okay, if you are happy with the default bullet size.
ul li::before {
  color:#039; /* Change the color *
  content:"\2022";  /* Add content:\2022 is the CSS Code/unicode for a bullet *
  display:inline-block; /* Needed to add space between the bullet and the text *
  font-weight:bold; /* If you want it to be bold *
  margin-left:-1em; /* Also needed for space (tweak if needed) *
  size:200%;
  width:1em; /* Also needed for space (tweak if needed) *
}
*/

/* ****************************************** */
/* ******* Buttons ************************** */
input[type="submit"] {background-color:#039; border:2px solid #06C; color:#fff; line-height:2;}
input[type="submit"]:hover, input[type="submit"]:focus {background-color:#090; border:2px solid #039; color:#fff; line-height:2;}

/*
	Use examples:
	<p><button class="button-plain"><a href="#">Plain</a></button></p>
	<p><button class="button-blue"><a href="#">Blue</a></button></p>
	<p><button class="button-green"><a href="#">Green</a></button></p>
	<p><button class="button-yellow"><a href="#">Yellow</a></button></p>
	<p><button class="button-red"><a href="#">Red</a></button></p>
*/
button.button-plain {
	background-color:rgba(255,255,255,.2);
	border:2px solid #fff;
	border-radius:10px;
	font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height:1.8;
	margin:0px 15px 0px 15px;
	padding:0px 15px 1px 15px !important;
	transition:0.8s;
}
button.button-plain a { color:#fff; text-decoration:none; }
button.button-plain:hover { background-color:rgba(255,255,255,1); border:1px solid #069; cursor:pointer; }
button.button-plain:hover a { color:#069; }

button.button-blue {
	background-color:#069;
	border:2px solid #039;
	border-radius:10px;
	font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height:1.8;
	margin:0px 15px 0px 15px;
	padding:0px 15px 3px 15px !important;
	transition:0.8s;
}
button.button-blue a { color:#fff; text-decoration:none; }
button.button-blue:hover { background-color:rgba(255,255,255,0); border:2px solid #069; cursor:pointer; }
button.button-blue:hover a { color:#069; }

button.button-blue-sml {
	background-color:#069;
	border:2px solid #039;
	border-radius:15px;
	font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height:0.5;
	margin:0px 7px 20px 7px;
	padding:0px 10px 0px 10px !important;
	transition:0.8s;
}
button.button-blue-sml a { color:#fff; text-decoration:none; }
button.button-blue-sml:hover { background-color:rgba(255,255,255,0); border:2px solid #069; cursor:pointer; }
button.button-blue-sml:hover a { color:#069; }

button.button-green {
	background-color:#1ec279;
	border:2px solid #1ec279;
	border-radius:10px;
	font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin:0px 15px 0px 15px;
	padding:0px 15px 3px 15px !important;
	transition:0.8s;
}
button.button-green a { color:#fff; text-decoration:none; }
/*button.button-green:hover { background-color:rgba(255,255,255,0); cursor:pointer; font-family:TimesNewRoman,"Times New Roman",Times,Baskerville,Georgia,serif; font-style:italic; font-weight:bold; }*/
button.button-green:hover { background-color:rgba(255,255,255,0); cursor:pointer; }
button.button-green:hover a { color:#1ec279; }

button.button-yellow {
	background-color:#FC0;
	border:2px solid #FC0;
	border-radius:10px;
	font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin:0px 15px 0px 15px;
	padding:0px 15px 3px 15px !important;
	transition:0.8s;
}
button.button-yellow a { color:#fff; text-decoration:none; }
button.button-yellow:hover { background-color:rgba(255,255,255,0); cursor:pointer; }
button.button-yellow:hover a { color:#FC0; }

button.button-red {
	background-color:#F00;
	border:2px solid #F00;
	border-radius:10px;
	font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin:0px 15px 0px 15px;
	padding:0px 15px 3px 15px !important;
	transition:0.8s;
}
button.button-red a { color:#fff; text-decoration:none; }
button.button-red:hover { background-color:rgba(255,255,255,0); cursor:pointer; }
button.button-red:hover a { color:#F00; }


/* ************************************************* */
/* ******* BEGIN Hosting Plan Pricing Tables ******* */
.pricing_table_wdg {
	/*
	border:1px solid #c4cbcc;
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	float:left;
	margin-top:25px;
	display:inline-block;
	*/
	margin:0;
	padding:0;
	width:100%;
	}
.pricing_table_wdg ul { 
	background-color:#FFF;
	border:1px solid #039;
			 border-radius:5px;
		-moz-border-radius:5px;
	 -webkit-border-radius:5px;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	/*padding:5px;*/
	text-align:center;
	/*width:147px;*/
	/*width:31.4%;*/
	width:90%;
	}
.pricing_table_wdg ul:hover {
	background:#d8e9f9;
	box-shadow:3px 5px 7px rgba(0,0,0,.7);
	cursor:pointer;
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-o-transform:scale(1.1);
	-moz-box-shadow:3px 5px 7px rgba(0,0,0,.7);
	-webkit-box-shadow:3px 5px 7px rgba(0,0,0,.7);
	}
.pricing_table_wdg ul li {border-bottom:1px dashed #cfd2d2; list-style:none; margin:0; padding:10px 0;}
.pricing_table_wdg ul li:first-child {background-color:#369; color:#FFFFFF; font-family:'Playball', cursive; font-size:1.7em; font-weight:bold; text-shadow:1.5px 1.5px 2px #039;}
.pricing_table_wdg ul li:nth-child(2) {background:#CFF; color:#039; font-family:'Playball', cursive; font-size:1.8em; font-weight:bold; text-shadow:1px 1px 1px #039;}
.pricing_table_wdg ul li:nth-child(3) {font-size:13px; /*font-weight:bold;*/}
.pricing_table_wdg ul li:nth-child(n+4) {font-size:13px;}
.pricing_table_wdg ul li:last-child a {
	background:#0061bb; /* Old browsers */
	background:linear-gradient(top, #0061bb 0%,#164e82 100%); /* W3C */
	background:-moz-linear-gradient(top, #0061bb 0%, #164e82 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#0061bb), color-stop(100%,#164e82)); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, #0061bb 0%,#164e82 100%); /* Opera11.10+ */
	background:-ms-linear-gradient(top, #0061bb 0%,#164e82 100%); /* IE10+ */
	border:1px solid #c4cbcc;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	color:#F0F0F0;
	display:block;
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0061bb', endColorstr='#164e82',GradientType=0 ); /* IE6-9 */
	font-weight:bold;
	margin:5px 0;
	padding:10px;
	text-decoration:none;
	}
.table-spacer {float:left; width:2%;}


/* ********************************** */
/* ******* BEGIN Panels ************* */
.panel {
	margin-bottom:20px;
	background-color:#ffffff;
	border:1px solid transparent;
	border-radius:4px;
	-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.05);
			box-shadow:0 1px 1px rgba(0, 0, 0, 0.05);
	}

.panel-body {margin-bottom:-10px; padding:15px 15px 0 15px;}
.panel-body:before, .panel-body:after {display:table; content:" ";}
.panel-body:after {clear:both;}
.panel-body:before, .panel-body:after {display:table; content:" ";}
.panel-body:after {clear:both;}

.panel-heading {padding:10px 15px; border-bottom:1px solid transparent; border-top-right-radius:3px; border-top-left-radius:3px;}
.panel-heading > .dropdown .dropdown-toggle {color:inherit;}
.panel-title {color:#ffffff; font-size:20px; margin-top:0; margin-bottom:0; text-shadow:none;}
.panel-title > a {color:inherit;}
.panel-footer {padding:10px 15px; background-color:#f5f5f5; border-top:1px solid #dddddd; border-bottom-right-radius:3px; border-bottom-left-radius:3px;}

.panel-primary {border-color:#428bca;}
.panel-primary > .panel-heading {color:#ffffff; background-color:#428bca; border-color:#428bca;}
.panel-primary > .panel-heading + .panel-collapse .panel-body {border-top-color:#428bca;}
.panel-primary > .panel-heading > .dropdown .caret {border-color:#ffffff transparent;}
.panel-primary > .panel-footer + .panel-collapse .panel-body {border-bottom-color:#428bca;}
/* ******* END Panels ************* */


/* ************************************************* */
/* ******* BEGIN Pagination for Clients Pages ****** */
.paginationEnds   {/*margin-right:-120px;*/}
.paginationCenter {/*margin-right:-150px;*/}
/*.pagination {border-radius:4px; display:inline-block; font-size:12px; margin:20px 0;}*/
.pagination {border-radius:4px; display:inline-block; font-size:12px; margin-bottom:20px;}
.pagination > li {display:inline;}

.pagination > li > a, .pagination > li > span {
	background-color:#ffffff;
	border:1px solid #dddddd;
	color:#039;
	float:left;
	line-height:1.428571429;
	margin-left:-1px;
	padding:6px 12px;
	position:relative;
	text-decoration:none;
	}
.pagination > li:first-child > a, .pagination > li:first-child > span {border-bottom-left-radius:4px; border-top-left-radius:4px; margin-left:0;}
.pagination > li:last-child > a, .pagination > li:last-child > span {border-bottom-right-radius:4px; border-top-right-radius:4px;}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {background-color:#eeeeee; color:#6CC;}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {z-index:2; color:#ffffff; cursor:default; background-color:#428bca; border-color:#428bca;}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {color:#999999; cursor:not-allowed; background-color:#ffffff; border-color:#dddddd;}

.pagination-lg > li > a, .pagination-lg > li > span {padding:10px 16px; font-size:18px;}
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span {border-bottom-left-radius:6px; border-top-left-radius:6px;}
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span {border-top-right-radius:6px; border-bottom-right-radius:6px;}

.pagination-sm > li > a, .pagination-sm > li > span {padding:5px 10px; font-size:12px;}
.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span {border-bottom-left-radius:3px; border-top-left-radius:3px;}
.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span {border-top-right-radius:3px; border-bottom-right-radius:3px;}

.sr-only {border:0; height:1px; margin:-1px; overflow:hidden;clip:rect(0, 0, 0, 0); padding:0; position:absolute; width:1px;}
/* ******* END Pagination for Clients Pages ****** */


/* ************************************************* */
/* ******* BEGIN Thumbnails for Clients Pages ****** */
.clientListing {border:1px solid #dddddd; border-radius:4px; margin-bottom:5px; padding:4px; position:relative; transition:all .2s ease-out 0s;}
.clientListing .clientBoxContent,.clientListing:after {position:absolute; /*left:20px; right:20px;*/ left:0px; right:0px; text-align:center;}
.clientListing:after {content:""; display:block; background:#428bca; /*top:20px; bottom:20px;*/ top:0px; bottom:0px; opacity:0; transform:rotate3d(-1,1,0,100deg); transition:all .4s ease-in-out 0s;}
.clientListing:hover:after {opacity:.9; transform:rotate3d(0,0,0,0deg);}
.clientListing img {width:100%; height:auto;}
.clientListing .clientBoxContent {top:45%; opacity:0; z-index:1; -webkit-transform:translate(10%,-30%); transform:translate(10%,-30%); transition:all .2s ease-out 0s;}
.clientListing:hover .clientBoxContent {opacity:1; transform:translate(0,-50%); transition-delay:.2s;}
.clientListing .title {display:block; font-size:21px; font-weight:700; color:#039; margin:0 0 10px;} /* May not need this, I'm using <h3> */
.clientListing .post {display:block; font-size:15px; color:#f7f7b9; margin-bottom:20px;} /* May not need this, I'm using the next line instead */
.clientListing .clientBoxContent h3 {line-height:1.2; padding-top:30px;}
.clientListing .clientBoxContent p {display:block; font-size:15px; color:#f7f7b9; margin-bottom:20px; padding:0 7px;}
.clientListing p {line-height:1.2;}
.clientListing p.caption {line-height:1.2;} /* Not currently in use */
/*.box14 .icon li,.box14 .post {display:inline-block;}*/
@media (min-width:550px) {
	.clientListing .clientBoxContent h3 {font-size:1.5em; padding-left:7px; padding-right:7px;}
	.clientListing .clientBoxContent p {font-size:14px;}
}
@media (min-width:1000px) {
	.clientListing .clientBoxContent h3 {font-size:1.7em; padding-left:7px; padding-right:7px;}
	.clientListing .clientBoxContent p {font-size:16px;}
}


/* *** BEGIN Tooltips for Clients Pages *** */
.tooltip {display:block; filter:alpha(opacity=0); font-size:12px; line-height:1.4; opacity:0; position:absolute; visibility:visible; z-index:1030;}
.tooltip.in {filter:alpha(opacity=90); opacity:0.9;}
.tooltip.top {margin-top:-3px; padding:5px 0;}
.tooltip.right {margin-left:3px; padding:0 5px;}
.tooltip.bottom {margin-top:3px; padding:5px 0;}
.tooltip.left {margin-left:-3px; padding:0 5px;}
.tooltip-inner {background-color:#000000; border-radius:4px; color:#ffffff; max-width:200px; padding:3px 8px; text-align:center; text-decoration:none;}
.tooltip-arrow {border-color:transparent; border-style:solid; height:0; position:absolute; width:0;}
.tooltip.top .tooltip-arrow {border-top-color:#000000; border-width:5px 5px 0; bottom:0; left:50%; margin-left:-5px;}
.tooltip.top-left .tooltip-arrow {border-top-color:#000000; border-width:5px 5px 0; bottom:0; left:5px;}
.tooltip.top-right .tooltip-arrow {border-top-color:#000000; border-width:5px 5px 0; bottom:0; right:5px;}
.tooltip.right .tooltip-arrow {border-right-color:#000000; border-width:5px 5px 5px 0; left:0; margin-top:-5px; top:50%;}
.tooltip.left .tooltip-arrow {border-left-color:#000000; border-width:5px 0 5px 5px; margin-top:-5px; right:0; top:50%;}
.tooltip.bottom .tooltip-arrow {border-bottom-color:#000000; border-width:0 5px 5px; left:50%; margin-left:-5px; top:0;}
.tooltip.bottom-left .tooltip-arrow {border-bottom-color:#000000; border-width:0 5px 5px; left:5px; top:0;}
.tooltip.bottom-right .tooltip-arrow {border-bottom-color:#000000; border-width:0 5px 5px; right:5px; top:0;}
/* *** END Tooltips for Clients Pages *** */

/* BEGIN Labels */
label {display:inline-block; margin-bottom:5px; font-weight:bold;}
.label {border-radius:.25em; color:#ffffff; display:inline; font-size:75%; font-weight:bold; line-height:1; padding:.2em .6em .3em; text-align:center; vertical-align:baseline; white-space:nowrap;}
.label[href]:hover, .label[href]:focus {color:#ffffff; text-decoration:none; cursor:pointer;}
.label:empty {display:none;}
.label-danger {background-color:#d9534f;}
.label-danger[href]:hover, .label-danger[href]:focus {background-color:#c9302c;}
.label-default {background-color:#999999;}
.label-default[href]:hover, .label-default[href]:focus {background-color:#808080;}
.label-info {background-color:#5bc0de;}
.label-info[href]:hover, .label-info[href]:focus {background-color:#31b0d5;}
.label-primary {background-color:#428bca;}
.label-primary[href]:hover, .label-primary[href]:focus {background-color:#3071a9;}
.label-success {background-color:#5cb85c;}
.label-success[href]:hover, .label-success[href]:focus {background-color:#449d44;}
.label-warning {background-color:#f0ad4e;}
.label-warning[href]:hover, .label-warning[href]:focus {background-color:#ec971f;}
/* END Labels */

/* Image overlay effect when hovering over images */
/* Original effect found here:  https://codepen.io/brunobeneducci/pen/ZaRmVQ   then highly modified to fit my needs */
.hoverEffect .item {padding:0;}
.hoverEffect .item img {padding:0 !important; display:block; max-width:100%; height:auto; outline:transparent 2px solid #069; outline-offset:0px;}
.hoverEffect a:hover .item img, .hoverEffect a:focus .item img {opacity:0.8; outline:#069 solid 2px; outline-offset:-10px;}
.hoverEffect h4, .hoverEffect p {-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;}

/*.hoverEffect a .item h4 {font-family:'Raleway', sans-serif; font-size:16px; position:absolute; color:#039; text-transform:uppercase; letter-spacing:2px; position:absolute; top:42%; left:0; right:0; margin:0 auto; text-align:center; opacity:0;}*/
.hoverEffect a .item h4 {display:none; font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; opacity:0; text-transform:uppercase;}
.hoverEffect a:hover .item h4, .hoverEffect a:focus .item h4 {background-color:#069; border:2px solid #093; border-radius:10px; color:#fff; display:inline-block; font-size:12px; font-weight:normal; opacity:1; padding:10px 18px; position:absolute; text-decoration:none; top:7%; left:40%}

/*.hoverEffect a .item p {font-family:'Raleway', sans-serif; font-size:8px; position:absolute; color:#039; text-transform:uppercase; letter-spacing:2px; position:absolute; top:52%; left:0; right:0; margin:0 auto; text-align:center; opacity:0;}*/
.hoverEffect a .item p {display:none; font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; opacity:0; text-transform:uppercase;}
.hoverEffect a:hover .item p, .hoverEffect a:focus .item p {background-color:#069; border:2px solid #093; border-radius:10px; color:#fff; display:inline-block; font-size:12px; font-weight:normal; opacity:1; padding:10px 18px; position:absolute; text-decoration:none; top:7%; left:40%}

.transition {-webkit-transition:all .5s ease; -moz-transition:all .5s ease; -o-transition:all .5s ease;  transition:all .5s ease;}



/* *************************************************** */
/* ******* BEGIN Navigation Menu with dropdowns ****** */

/* Found Here:https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp */
/* Navigation area background color */
	.topnav {background-color:#164e82; overflow:hidden;}
	#myTopnav {background-color:#164e82; overflow:hidden;}
/* Style the links inside the navigation bar */
	.topnav a {color:#fff; display:block; float:left; font-size:17px; padding:14px 16px; text-align:center; text-decoration:none;}
/* Add an active class to, when used, highlight the current page */
	.active {background-color:#4CAF50; color:white;}
/* Hide the link being clicked on and close .topnav on small screens */
	.topnav .icon {display:none;}
/* Add a dark background on .topnav links and the dropdownLinks button on hover */
	.topnav a:hover, .dropdownLinks:hover .dropbtn {background-color:#428bca; color:white;}
/* dropdownLinks container - needed to position the dropdownLinks content */
	.dropdownLinks {float:left; overflow:hidden;}
/* Style the dropdownLinks button to fit inside .topnav */
	.dropdownLinks .dropbtn {background-color:inherit; /*background-color:#164e82;*/ border:none; color:white; font-family:inherit; font-size:17px; margin:0; outline:none; padding:14px 16px;}
/* Style the dropdownLinks content (hidden by default) */
	.dropdownLinks-content {background-color:#428bca; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); display:none; min-width:160px; position:absolute; z-index:1;}
/* Style the links inside the dropdownLinks */
	.dropdownLinks-content a {color:#fff; display:block; float:none; padding:12px 16px; text-align:left; text-decoration:none;}
/* Add a grey background to dropdownLinks links on hover */
	.dropdownLinks-content a:hover {background-color:#fff; color:black;}
/* Show the dropdownLinks menu when the user moves the mouse over the dropdownLinks button */
	.dropdownLinks:hover .dropdownLinks-content {display:block; margin-top:53px;}

.bggrad {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0000cc+0,a7cfdf+0,23538a+100 */
	background: #0000cc; /* Old browsers */
	background: -moz-linear-gradient(top,  #0000cc 0%, #a7cfdf 0%, #23538a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #0000cc 0%,#a7cfdf 0%,#23538a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #0000cc 0%,#a7cfdf 0%,#23538a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000cc', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
	border:1px solid #C00;
	-webkit-border-radius:5px;
		-moz-border-radius:5px;
		border-radius:5px;
}

/* Media breakpoint rules for the Navigation Menu */
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that opens and closes .topnav (.icon) */
@media screen and (max-width:600px) {
	.topnav a:not(:first-child), .dropdownLinks .dropbtn {display:none;}
	.topnav a.icon {display:block; float:right;}
}
/* The "responsive" class is added to .topnav with JavaScript when the user clicks on the icon. This class makes .topnav look good on small screens (displaying links vertically instead of horizontally) */
@media screen and (max-width:600px) {
	.topnav.responsive {position:relative;}
	.topnav.responsive a.icon {position:absolute; right:0; top:0;}
	.topnav.responsive a {display:block; float:none; text-align:left;}
	.topnav.responsive .dropdownLinks {float:none;}
	.topnav.responsive .dropdownLinks-content {position:relative; margin-top:0px;}
	.topnav.responsive .dropdownLinks .dropbtn {display:block; text-align:left; width:100%;}
}
@media (min-width:100px) {
	.topnav {margin-left:5%; margin-right:5%;}
}
@media (min-width:601px) {
	.topnav {margin-left:7%; margin-right:0%;}
}
@media (min-width:650px) {
	.topnav {margin-left:10%; margin-right:0%;}
}
@media (min-width:700px) {
	.topnav {margin-left:12.5%; margin-right:0%;}
}
@media (min-width:750px) {
	.topnav {margin-left:15%; margin-right:0%;}
}
@media (min-width:800px) {
	.topnav {margin-left:17.5%; margin-right:0%;}
}
@media (min-width:850px) {
	.topnav {margin-left:20%; margin-right:0%;}
}
@media (min-width:900px) {
	.topnav {margin-left:22.5%; margin-right:0%;}
}
@media (min-width:950px) {
	.topnav {margin-left:25%; margin-right:0%;}
}
@media (min-width:1050px) {
	.topnav {margin-left:27.5%; margin-right:0%;}
}
@media (min-width:1200px) {
	.topnav {margin-left:30%; margin-right:0%;}
}



/* *************************************************** */
/* *** Media breakpoint rules for all other styles *** */

@media (min-width:100px) {
	header {height:200px;}
	#headerCentered > h1 {font-size:1.7em;}
	#headerCentered > h2 {font-size:1.2em;}
	.container {padding:2% 2% 2% 2%;}
	.float-none-then-left  {float:none; margin:auto; margin-bottom:15px; text-align:center;}
	.float-none-then-right {float:none; margin:auto; margin-bottom:15px; text-align:center;}
	.three.columns {width:50%; margin:auto;}
}
@media (max-width:360px) {
	.pricing_table_wdg ul {float:none; margin:auto; margin-bottom:25px; width:85%;}
	}
@media (min-width:361px) {
	.pricing_table_wdg ul {float:none; margin:auto; margin-bottom:25px; width:85%;}
	/* Use these if both are needed
	.hoverEffect a:hover .item h4, .hoverEffect a:focus .item h4 {top:6.5%; left:40%}
	.hoverEffect a:hover .item p, .hoverEffect a:focus .item p {top:8.0%; left:40%}
	 */
	.hoverEffect a:hover .item h4, .hoverEffect a:focus .item h4 {top:7.5%; left:34%} 	/* Use this if only one is needed */
	}
@media (min-width:551px) {
	.hideAbove550 {display:none;}
	.four.columns  {width:80%; padding-left:14%;}
	}
@media (min-width:600px) {
	header {height:300px;}
	#headerCentered > h1 {font-size:2.0em;}
	#headerCentered > h2 {font-size:1.7em;}
	.float-none-then-left  {float:left; margin-bottom:15px; margin-right:20px;}
	.float-none-then-right {float:right; margin-bottom:15px; margin-left:20px;}
}
@media (min-width:641px) {
	.hoverEffect a:hover .item h4, .hoverEffect a:focus .item h4 {top:7%; left:42%} 	/* Use this if only one is needed on the page */
	}
@media (min-width:700px) {
	.four.columns  {width:30.6666666667%; padding-left:0;}
	}
@media (max-width:767px) { .nav-container {width:99.7%;} }
@media (min-width:768px) {
	.hoverEffect a:hover .item h4, .hoverEffect a:focus .item h4 {top:8.5%; left:54%} 	/* Use this if only one is needed on the page */
	}
@media (min-width:800px) {
	header {height:400px;}
	#headerCentered > h1 {font-size:2.0em;}
	#headerCentered > h2 {font-size:1.7em;}
	.form-width {width:50%; margin:auto;}
	.full-width {width:90%; margin:auto;} /* This is used ONLY when single columns (.twelve .columns) are used for text - otherwise lines would be too long and difficult to read */
	.three.columns {width:22%;}
}
@media (min-width:900px) {
	.form-width {width:45%; margin:auto;}
	.full-width {width:80%; margin:auto;}
}
@media (min-width:992px) {
	.hoverEffect a:hover .item h4, .hoverEffect a:focus .item h4 {top:9%; left:62.5%} 	/* Use this if only one is needed */
	}
@media (min-width:1000px) {
	header {height:500px;}
	#headerCentered > h1 {font-size:3.0em;}
	#headerCentered > h2 {font-size:2.0em;}
	.form-width {width:40%; margin:auto;}
	.full-width {width:70%; margin:auto;}
}
@media (min-width:1100px) {
	.form-width {width:35%; margin:auto;}
	.full-width {width:60%; margin:auto;}
}
@media (min-width:1200px) {
	.hoverEffect a:hover .item h4, .hoverEffect a:focus .item h4 {top:9.5%; left:65%} 	/* Use this if only one is needed */
	}



/* Styles that may no longer be needed */
#special-announcement {background-color:#fff; border:4px solid #000275; padding:25px; text-align:center; width:100%;}
#special-announcement h2 {margin:0; padding:0;}
#special-announcement p  {margin:0; padding:0;}