/*------------------------------------------------------------------
[Table of contents]

1. GLOBAL
  1.0.0 Side Menu Nav Switcher
	1.1.0 General
	1.2.0 Fonts
	1.3.0 Toolbar
	1.3.1 Toolbar Language

2. LAYOUT
	2.1.0 Header
	2.1.1 Search
	2.2.0 Hero Banner
	2.2.5 Page Title
	2.3.0 Alert Banner
	2.4.0 Snapshots
	2.4.5 Dashboard
	2.5.0 Quick Access
	2.6.0 Cool Tools
	2.7.0 Messages
	2.8.0 Footer

3. MEDIA QUERIES
	3.1 General

4. BOOTSTRAP OVERRIDES
	4.1 General
	
5. PAGES
	5.1 Introductions
	5.2 Paperwork
	5.3 Team
	5.4 Orientation
	5.5 Training
	5.6 Prep
	5.7 Beyond
	
-------------------------------------------------------------------*/



/* -----------------------------------======   @start: 1 GLOBAL   ======----------------------------------- */
/* -------======= @start: 1.0.0  Side Menu Nav Switcher =======------- */

label {
  cursor: pointer;
}
label:focus {
  outline: none;
}
.menu {
  position: absolute;
  top: 0;
  left: 0;
  background: #f4f7f6; /* Old browsers */
  width: 240px;
  height: 100%;
  transform: translate3d(-240px, 0, 0);
  transition: transform 0.35s;
  z-index: 9;
}
.menu label.menu-toggle {
  position: absolute;
  right: -30px;
  width: 30px;
  height: 100%;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: -9999px;
}
.menu label.menu-toggle:hover {
  position: absolute;
  right: -30px;
  width: 30px;
  height: 100%;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent:0px;
  background: #eee;
  opacity:0.7;
  color: #202121;
}
.menu label.menu-toggled {
  position: absolute;
  right: -30px;
  width: 30px;
  height: 100%;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent: 0px;
  background: #f4f7f6; /* Old browsers */
  opacity:0.9;
  color: #202121;
  -webkit-box-shadow: 20px 0px 14px -7px rgba(0,0,0,0.14);
  -moz-box-shadow: 20px 0px 14px -7px rgba(0,0,0,0.14);
  box-shadow: 20px 0px 14px -7px rgba(0,0,0,0.14);
}
.menu label.menu-toggled:hover {
  position: absolute;
  right: -30px;
  width: 30px;
  height: 100%;
  line-height: 0px;
  display: block;
  padding: 0;
  text-indent:0px;
  background: #f4f7f6;
  opacity:0.7;
  color: #202121 !important;
}
.menu label.menu-toggled .glyphicons-option-vertical::before {
    content: "\E208";
	font-size: 28px;
}
.menu label span.glyphicons-option-vertical {
	font-size: 34px !important;
}
.menu .back {
	text-align:right;
}
.menu h4 {
  display: block;
  text-align: left;
  padding: 0 15px;
  line-height: 40px;
  text-decoration: none;
  color: #202121;
}
.menu ul {
	list-style-type: none;
	margin: 20px 0;
}
.menu li {
	margin:10px;
}
.menu ul li a, .menu ul li label {
  display: block;
  text-align: left;
  padding: 14px 30px;
  line-height: 34px;
  text-decoration: none;
  color: #202121;
  border-bottom: 1px solid #e6eaea;
}
.menu ul li a:hover, .menu ul li label:hover {
  color: #ccc;
}

/* hide inputs */
.menu-checkbox {
  display: none;
}

/* hide navigation icon for sublabels */
.menu .menu label.menu-toggle {
  background: none;
}

/* fade in checked menu */
.menu-checkbox:checked + .menu {
  transform: translate3d(0, 0, 0);
  z-index: 99999;
  opacity: 1;
}
/* -------======= @end: 1.0.0  Side Menu Nav Switcher =======------- */


/* ------------------=======================   @start: 1.1.0 General   ======================------------------- */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
	font-family: "Georgia",Times Roman,sans-serif;
	background-color: #F9F9FA;
}
a{ color:#000; font-weight:bold; text-decoration:underline}
a:hover{ color:#e0301e}
.row {
	 margin-right: 0; 
	 margin-left: 0; 
}
ul {
	padding: 0px;
	list-style-type: none;
}
p{ font-family:Arial, Helvetica, sans-serif}
.btn-default, .btn-primary {
    background-color: transparent;
    border:1px solid #000;
    border-radius:0px;
    color: #000;
	font-family:Arial, Helvetica, sans-serif;
}
.btn-primary:active {background:#000 !important; color:#fff}
.btn-primary:focus {background:#000!important; color:#fff}
.btn-default:hover, .btn-primary:hover {
    background-color: #000;
    border-color: #000;
	color: #fff;
}
.alertsWrapper .btn-default {
    background-color: #fff;
    border-color: transparent;
    border-radius: 30px;
    color: #000;
	margin-right:10px;
}
.alertsWrapper .btn-default:hover {
    background-color: #e0301e;
    border-color: transparent;
    border-radius: 30px;
    color: #fff;
}
.toolsWrapper,
.bigPictureWrapper {
	background:#fff;
	color:#000;
	padding:5px 0; border-bottom:2px solid #cdcdcd;border-top:1px solid #cdcdcd;
}
.bigPictureWrapper a {
    color: #fff;
    text-decoration: none;
}
.bigPictureWrapper a:hover,
.bigPictureWrapper a:focus {
    color: #000;
    text-decoration: none;
}

.bigPictureWrapper a:hover h4,
.bigPictureWrapper a:focus h4 {
    border-bottom:3px solid #000;
	padding-bottom: 5px;
}

.toolsWrapper h4 {
	margin-top: 5px;
}
.toolsWrapper .active {
	color:#000
}
.toolsWrapper .active h4{
	border-bottom:3px solid #e0301e;
	padding-bottom: 5px;
}
.complete {
	color:#339933;
}
.pending {
	color:#ffcc00;
}
.contentWrapper h1 {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 75px 0px 0px 0px;
	text-align: center;
	font-size: 42px;
}
.toolsWrapper h1,
.bigPictureWrapper h1 {
	font-family: Georgia, sans-serif;
	line-height: 1.1;
	/*text-transform: uppercase;*/
	margin: 15px;
	text-align: left;
	font-size: 28px;
}
#snapshotHeading {margin-top: 35px;}
.contentWrapper h1 small{
	text-transform: none;
	margin-left: 5px;
}

.expander {
	position: absolute;
	right: -17px;
	bottom: 0;
	border-width: 0 0 40px 40px;
	border-color: transparent transparent rgba(255,255,255,.5) transparent;
	border-style: solid;
	z-index: 2;
}
.expander::before {
	content: "\E191";
	font-family: 'Glyphicons Regular';
	position: relative;
	top: 40px;
	right: 22px;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	z-index: 2;
}
button.close {
	color:#000;
	color: #000;
    font-size: 36px;
    font-weight: bold;
    opacity: 1;
}
#closeTile {
	position: absolute;
	top: 15px;
	right: 15px;
	font-size: 18px;
}
#closeTile:hover {
	cursor: pointer;
}

footer {
	background-color: #6d6e71;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 5%;
}
footer a {
	color: #fff;
}
.footerContact ul li a {
	display: block;
	padding: 15px;
	margin: 5px;
	border: 1px solid #fff;
}
.footerSocial ul li {
	display: inline-block;
}
.footerSocial ul li a {
	font-size: 2em;
	margin: 5px;
}

.footerSocial ul li a:hover{ color:#000}
.footerLegal ul li a {
	display: block;
	padding: 10px;
	margin: 5px;
}
span.pdf {
    background: transparent url("../images/icon-pdf.png") no-repeat scroll 0 0;
    padding: 0 12px 10px 8px;
    margin-left: 5px;
}
/* -------======= @end: 1.1.0 General =======------- */


/* -------======= @start: 1.2.0 Fonts =======------- */

/** Proxima Nova **/
@font-face {
    font-family: 'proxima_nova_altblack';
    src: url('../fonts/Proxima Nova Alt Black-webfont.eot');
    src: url('../fonts/Proxima Nova Alt Black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Proxima Nova Alt Black-webfont.woff2') format('woff2'),
         url('../fonts/Proxima Nova Alt Black-webfont.woff') format('woff'),
         url('../fonts/Proxima Nova Alt Black-webfont.ttf') format('truetype'),
         url('../fonts/Proxima Nova Alt Black-webfont.svg#proxima_nova_altblack') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'proxima_nova_altbold';
    src: url('../fonts/Proxima Nova Alt Bold-webfont.eot');
    src: url('../fonts/Proxima Nova Alt Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Proxima Nova Alt Bold-webfont.woff2') format('woff2'),
         url('../fonts/Proxima Nova Alt Bold-webfont.woff') format('woff'),
         url('../fonts/Proxima Nova Alt Bold-webfont.ttf') format('truetype'),
         url('../fonts/Proxima Nova Alt Bold-webfont.svg#proxima_nova_altbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/Proxima Nova Alt Regular-webfont.eot');
    src: url('../fonts/Proxima Nova Alt Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Proxima Nova Alt Regular-webfont.woff2') format('woff2'),
         url('../fonts/Proxima Nova Alt Regular-webfont.woff') format('woff'),
         url('../fonts/Proxima Nova Alt Regular-webfont.ttf') format('truetype'),
         url('../fonts/Proxima Nova Alt Regular-webfont.svg#proxima_nova_altregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'proxima_nova_scosfthin';
    src: url('../fonts/Proxima Nova ScOsf Thin-webfont.eot');
    src: url('../fonts/Proxima Nova ScOsf Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Proxima Nova ScOsf Thin-webfont.woff2') format('woff2'),
         url('../fonts/Proxima Nova ScOsf Thin-webfont.woff') format('woff'),
         url('../fonts/Proxima Nova ScOsf Thin-webfont.ttf') format('truetype'),
         url('../fonts/Proxima Nova ScOsf Thin-webfont.svg#proxima_nova_scosfthin') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'proxima_nova_ltsemibold';
    src: url('../fonts/Proxima Nova Semibold-webfont.eot');
    src: url('../fonts/Proxima Nova Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Proxima Nova Semibold-webfont.woff2') format('woff2'),
         url('../fonts/Proxima Nova Semibold-webfont.woff') format('woff'),
         url('../fonts/Proxima Nova Semibold-webfont.ttf') format('truetype'),
         url('../fonts/Proxima Nova Semibold-webfont.svg#proxima_nova_ltsemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'proxima_nova_ltthin';
    src: url('../fonts/Proxima Nova Thin-webfont.eot');
    src: url('../fonts/Proxima Nova Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Proxima Nova Thin-webfont.woff2') format('woff2'),
         url('../fonts/Proxima Nova Thin-webfont.woff') format('woff'),
         url('../fonts/Proxima Nova Thin-webfont.ttf') format('truetype'),
         url('../fonts/Proxima Nova Thin-webfont.svg#proxima_nova_ltthin') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* -------======= @end: 1.2.0 Fonts =======------- */


/* -------======= @start: 1.3.0  Toolbar =======------- */
#toolBarMobile {
	display: none;
}
.toolBarList {
	float: right;
	padding: 2px 10px;
}
.toolBarList a, #toolBarHamburger {
	color: #202121;  
}
.toolBarList a:hover, #toolBarHamburger:hover  {
	color: #000 !important;
}
.toolBarHidden {
	display: none;
	position: absolute;
	right: 0px; top: 24px;
	width: 227px;
	text-align: center;
	border: 1px solid #333;
}
#toolBarHamburger:hover {
	cursor: pointer;
	color: #049fd9;
	text-decoration:none;
}
.toolBarList:hover .toolBarHidden {
	display: block;
}
.toolBarList .badge {
	padding: 3px 6px;
	background-color: #FB5300;
	position: relative;
	top: -3px;
}
#showMore {
	display: none;
	position: absolute;
	top: 55px;
	right: 15px;
	background: #f4f7f6;
	border: 1px solid #ddd;
	width: 145px;
	text-align: left;
	float: left;
	color: #202121;
	height: 80px;
	vertical-align: bottom;
	border-radius: 0 0 5px 5px;
	box-shadow: 0px 4px 2px 0px rgba(0, 0, 0, 0.1);
	opacity: 0.97;
	z-index: 99;
	-webkit-transition: all .6s ease;
	-moz-transition: all .6s ease;
	-ms-transition: all .6s ease;
	-o-transition: all .6s ease;
	transition: all .6s ease;
}	
#showMore ul {
	margin: 0 auto;
	-webkit-transition: all .6s ease;
	-moz-transition: all .6s ease;
	-ms-transition: all .6s ease;
	-o-transition: all .6s ease;
	transition: all .6s ease;
}	
#showMore a {
	display: block;
	padding: 7px;
}
#showMore a:hover {
}
#showMore:after, 
#showMore:before {
	bottom: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#showMore:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #f4f7f6;
	border-width: 19px;
	left: 70%;
	margin-left: -19px;
}
#showMore:before {
	border-color: rgba(113, 158, 206, 0);
	border-bottom-color: #ddd;
	border-width: 20px;
	left: 70%;
	margin-left: -20px;
}
/* -------======= @end: 1.3.0  Toolbar =======------- */


/* -------======= @Start: 1.3.1  Toolbar Language =======------- */
.bfh-selectbox-options ul.optionsli > :first-child {display:none;}
.bfh-selectbox-options,.bfh-selectbox-options ul{width:150px;}
.bfh-selectbox .bfh-selectbox-options{font-size:12px; text-align:left;}
.bfh-selectbox .bfh-selectbox-toggle .selectbox-caret{margin-right:2px;}
.bfh-selectbox > .bfh-selectbox-toggle > .bfh-selectbox-option:before {
	content:"\E341"; display: inline-block;
  font-family: "Glyphicons Regular";
  font-size:12px;
	font-style: normal;
  font-weight: normal;
	padding-right: 5px;
  padding-top: 1px;}
.bfh-selectbox > .bfh-selectbox-toggle > .bfh-selectbox-option{padding-left:5px; padding-right:15px; line-height:120%;}
.bfh-selectbox > .bfh-selectbox-toggle{height:24px;padding-top:2px;font-size:12px;}
.bfh-selectbox .bfh-selectbox-options ul li > a {background-color: transparent;
  color: #8e9aaa;
	font-weight:normal;
	background-image:none;
	max-height:100% !important;}
.bfh-selectbox-options ul{ max-height: 100% !important;}
.bfh-selectbox .bfh-selectbox-options ul li > a:hover,
.bfh-selectbox .bfh-selectbox-options ul li > a:focus {background-color: #0047BA ;
  color: #fff!important;
  font-weight: 600;
	background-image:none;
	opacity:1;}
/* -------======= @end: 1.3.1  Toolbar Language =======------- */

/* -------======= @end: 1 GLOBAL =======------- */



/* -----------------------------------======   @start: 2 LAYOUT   ======----------------------------------- */

/* ------------------=======================   @start: 2.1 Header   ======================------------------- */
.headerWrapper {
	background-color: #fff;
	z-index: 5;
	position: sticky;
	top: 0px;
	width: 100%;
}
.headerLogo{
	display: none;
}
.headerMenu{
	display: none;
}
.navbar {
	margin-bottom: 0px;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
	color: #58585b;
	background-color: #fff;
	border-bottom: 5px solid #000;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    background-color: transparent;
    color: #000 !important;
    border-bottom: 4px solid #000;
}
/* -------======= @end: 2.1 Header =======------- */


/* ------------------=======================   @start: 2.1.1 Search   ======================------------------- */
#searchBtn {
	display: inline-block;
}
.searchWrapper {
	display: none;
	background: #000;
	padding: 2px;
	border-radius: 20px;
	position: relative;
}
.searchWrapper.searchOpen {
	display: inline-block;
}
.searchWrapper form {
	background: #fff;
	padding: 5px;
	border-radius: 20px;
}
.searchField {
	border: 0;
	width: 350px;
}
.searchSubmit {
	background-color: #000;
	color: #fff;
	border-radius: 20px;
	padding: 0px 7px;
}
.searchSubmit:hover {
	color: #fff;
}
/* .searchClose {
	color: #fff;
	font-size: 14px;
	position: absolute;
	right: 6px;
	top: 12px;
}
.searchClose:hover {
	cursor: pointer;
} */
/* -------======= @end: 2.1.1 Search =======------- */


/* ------------------=======================   @start: 2.2.0 Hero Banner  ======================------------------- */
.heroWrapper{
	background: url("../images/Hero_01.jpg") no-repeat;
	background-size: cover;
	overflow: auto;
}
.heroWrapper .btn { border:1px solid #fff; color:#fff}
.heroWrapper .btn:hover { background:#2d2d2d; border:1px solid #2d2d2d}
.heroText {

}
.heroText .row {
    margin-left: 0;
    margin-right: 0;
}
.heroText .btn {
	margin: 0 5px 15px;
}
.profile_photo {
	border-radius: 50%;
    height: 100px;
    max-width: 100px;
    min-width: 100px;
    overflow: hidden;
	background:#fff;
	text-align: center;
	margin:15px auto;
}
.profile_photo img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
}
.profile_photo span.icon {
    color:#e0301e;
    font-size: 68px;
    font-weight: bold;
}
/* -------======= @end: 2.2 Header =======------- */

/* ------------------=======================   @start: 2.2.5 Page Title   ======================------------------- */

.PageTitle {
	color: #000;
}
.PageTitle .icon {
    font-size: 36px; color:#a32020
}
.PageTitle h1 {
    display: inline;
}
.PageTitle h3 {
	margin:0 0 10px 60px;
	font-size:16px;
	font-style:italic;
	
}
/* -------======= @end: 2.2.5 Page Title =======------- */

/* ------------------=======================   @start: 2.3.0 Alert Banner   ======================------------------- */
.alertsWrapper {
	max-width: 960px;
	margin:0 auto;
	position: relative;
}
.alertsText {
	background: #000;
    margin-top: 5px;
	color: #fff;
	padding: 15px;
}
.alertsText h3 {
	margin-top: 0px;
	font-family: 'proxima_nova_altbold';
	font-size: 32px;
	text-transform:uppercase;
}
.alertsText h4 {
	font-weight:bold;
	margin: 5px 0;
}
.alertsText .glyphicons {
	font-size: 36px;
}
.alertsText .col-xs-2 { 
	text-align:center;
}
.alertsText .col-md-8 {
	padding-left:0;
}
#closeAlerts {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 18px;
}
#closeAlerts:hover {
	cursor: pointer;
}
/* -------======= @end: 2.3.0 Alert Banner =======------- */


/* ------------------=======================   @start: 2.4.0 Snapshots   ======================------------------- */
.snapshotWrapper {
	margin: 0px -15px;
	position: relative;
	overflow: hidden;
}
.snapshotButtons {
	display: flex;
	flex-wrap: wrap;
}
.snapshotButton1 {
  background: url("../images/Snap_Health.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton2 { 
  background: url("../images/Snap_Savings.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton3 {
  background: url("../images/Snap_Pension.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton4 {
  background: url("../images/Snap_Wallet.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton5 { 
  background: url("../images/Snap_Retire.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton6 {
  background: url("../images/Snap_Pay.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton7 {
  background: url("../images/Snap_Time.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton8 {
  background: url("../images/Snap_Rewards.jpg") no-repeat;
	flex: 1 100%;
}
.snapshotButton {
	position: relative;
	background-size: cover;
	text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
	overflow: hidden;
}
.snapshotButton a {
	text-decoration: none;
}
.snapshotButton .text {
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.15),rgba(0,0,0,0));
}
.snapshotButton .text h2 {
	color: #fff;
}

.snapshotContent h2 {
	font-family: "Proxima Nova";
    font-size: 48px;
	text-transform:uppercase;
}
.snapshot {
	position: relative;
	text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
	overflow: hidden;
	height: 600px;
	margin: 5px 0px;
	background-color: #fff;
}
.snapshot.active {
	border-radius: 16px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
	margin:10px;
}
.pullTab {
	display: none;
}
.snapshotButtons.gridOpen + .pullTab {
	display: block;
	position: absolute;
	top: 50%;
	right: 175px;
	z-index: 2;
	transition: right .75s ease-out;
	padding: 5px;
	background-color: #f9f9fa;
	border-radius: 10px 0 0 10px;
}
.pullTab:hover {
	cursor: pointer;
}
.snapshotButtons.gridOpen {
	display: block;
	position: absolute;
	right: 7px;
	top: 15%;
	transition: right .75s ease-out;
}
.snapshotButtons.gridOpen.slideButtons {
	right: -175px;
}
.snapshotButtons.gridOpen.slideButtons + .pullTab {
	right: 10px;
}
.snapshotButtons.gridOpen + .pullTab > .glyphicons {
	transition: transform .75s;
}
.snapshotButtons.gridOpen.slideButtons + .pullTab > .glyphicons {
	transform: rotate(180deg);
}
.snapshotButtons.gridOpen .snapshotButton {
	border-radius: 5px;
	z-index: 2;
	background: #049fd9;
	box-shadow: 0px 4px 6px rgba(0,0,0, 0.4);
	margin: 10px;
	height: auto;
}
.snapshotButtons.gridOpen .snapshotButton.active,
.snapshotButtons.gridOpen .snapshotButton.active:hover {
	box-shadow: none;
	background: #000;
}
.snapshotButtons.gridOpen .snapshotButton a {
	padding: 10px;
}
.snapshotButtons.gridOpen .snapshotButton:hover {
	transform: none;
	box-shadow: 0px 4px 6px rgba(0,0,0, 0.4);
	background: #000;
}
.snapshotButtons.gridOpen .text {
	background: none;
}
.snapshotButtons.gridOpen .text h2{
	font-size: 20px;
	margin: 0px;
}
.snapshotButtons.gridOpen .expander {
	border-width: 0 0 30px 30px;
	right: -19px;
	display:none;
}
.snapshotButtons.gridOpen .expander::before {
	font-size: 10px;
	top: 34px;
	right: 20px;
}
.snapshotContent {
    font-size: 16px;
}
.snapshotContent h3 {
	color: #4CA3CE;
	text-align: left;
	margin-left: 10px;
}
.snapshotContent h5 {
	color: #4CA3CE;
	text-align: center;
	font-size: 24px;
}
.snapshotContent .smallfont {
	font-size:12px;
}
.snapshot .row {
    margin-bottom: 10px;
}
.snapshotHealthContent .btn.btn-primary {
    margin-left: 13px;
}
.healthCoverage {
    position: relative;
    left: 46%;
    top: -126px;
}
.healthProvider {
    position: relative;
    left: 70%;
    top: -284px;
}
.box {
	width: 160px;
	height: 160px;
	background: #000;
}
.circle {
	border-radius: 50%;
	color: #fff;
	padding: 15px;
	text-align: center;
	font-family: 'proxima_nova_scosfthin';
	font-size: 26px;
}
.inner-border {
	border: 8px solid #000;
	box-shadow: inset 0px 0px 0px 4px #fff;
	box-sizing: border-box; 
}
.box2 {
	width: 160px;
	height: 160px;
	background: #00a1d8;
}
.circle2 {
	border-radius: 50%;
	color: #fff;
	padding: 32px 22px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
}
.inner-border2 {
	border: 8px solid #00a1d8;
	box-shadow: inset 0px 0px 0px 4px #fff;
	box-sizing: border-box; 
}
.teledoc, .primaryCare, .urgentCare, .emergencyRoom {
    color: #fff;
	padding: 20px;
	min-height: 280px;
	border-radius: 8%;
	border: 5px solid #fff;
}
.teledoc h4, .primaryCare h4, .urgentCare h4, .emergencyRoom h4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	margin:0;
}
.teledoc a, .primaryCare a, .urgentCare a, .emergencyRoom a {
	color: #fff;
	text-decoration: underline;
}
.snapshotHealthContent .cash {
	position: absolute;
	bottom: 0px;
	font-size: 40px;
}
.teledoc {
    background-color: #5bd622;
}
.primaryCare {
    background-color: #fcc41b;
}
.urgentCare {
    background-color: #f7950c;
}
.emergencyRoom {
    background-color: #d61111;
}
element {

}
.snapshotHealthContent .glyphicons.glyphicons-money {
    margin-right: 15px;
}
/* -------======= @end: 2.3 Snapshots =======------- */

/* ------------------=======================   @start: 2.4.5 Dashboard   ======================------------------- */

.dashboard {
	margin-top:20px;
}
.dashboard h3 {
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    line-height: 1.1;
    margin: 15px;
    text-transform: uppercase;
}
.dashboard .clockdiv {
	background: #000 none repeat scroll 0 0;
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius:15px;
	margin:0 auto;
}
.dashboard .days {
	font-size:72px;
}
.dashboard .percent {
	font-size:72px;
	background: #fff none repeat scroll 0 0;
    color: #000;
	border-radius: 50%;
	height: 100px;
    max-width: 100px;
    min-width: 100px;
	margin: 10px auto;
	letter-spacing:-10px;
	line-height:125%;
}
.onecharacter {
	padding-right: 10px;
}
.twocharacters {
	padding-right: 20px;
}
.twocharacters2 {
	padding-right: 10px;
    letter-spacing: -5px !important;
}
.twocharacters3 {
	padding-right: 0px;
    letter-spacing: -5px !important;
}
.dashboard .date {
	text-align:center;
	display:block;
	margin-top: 10px;
}
.dashboard .progressdiv {
	background: #B2B8C9 none repeat scroll 0 0;
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius: 50%;
	margin:0 auto;
}
.dashboard .progressdiv2 {
	background: #000 url(../images/15percent.png);
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius: 50%;
	margin:0 auto;
}
.dashboard .progressdiv3 {
	background: #000 url(../images/25percent.png);
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius: 50%;
	margin:0 auto;
}
.dashboard .progressdiv4 {
	background: #000 url(../images/45percent.png);
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius: 50%;
	margin:0 auto;
}
.dashboard .progressdiv5 {
	background: #000 url(../images/60percent.png);
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius: 50%;
	margin:0 auto;
}
.dashboard .progressdiv6 {
	background: #000 url(../images/65percent.png);
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius: 50%;
	margin:0 auto;
}
.dashboard .progressdiv7 {
	background: #000 url(../images/90percent.png);
    color: #fff;
    padding: 15px;
	width:153px;
	height:153px;
	text-align:center;
	display:block;
	border-radius: 50%;
	margin:0 auto;
}
.progressdiv3 .smalltext {
	display:block;
}
.dashboard .smalltext {
	font-size:18px;
}
.DashProgress .alert-warning {
	background-color: #fcf8e3;
    border-color: #ffcc00;
    color: #000;
	margin-top:15px;
	text-align:center;
} 
.DashProgress .alert-warning em{
	font-size:12px
}
.DashContacts,
.DashCommCenter {
	text-align:left}
.DashContacts .row,
.DashCommCenter .row {
	margin-bottom:25px;
}
.DashCommCenter h3 {
	text-align:left;
}
.DashContacts h4,
.DashCommCenter h4 {
	text-align:left;
	text-transform:none;
	font-size:18px;
	margin:0; 
	font-family:Arial, Helvetica, sans-serif
}
.contact_photo {
	border-radius: 50%;
    height: 75px;
    max-width: 75px;
    min-width: 75px;
    overflow: hidden;
	background:#fff;
	text-align: center;
	margin-left: 20px;
}
.contact_photo img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
}
.DashContacts span.icon {
    font-size: 18px;
    font-weight: bold;
}
.DashContacts span.icon img {
    height: 20px;
    padding-bottom: 5px;
	width:22px;
}
.DashContacts .btn-default {
	width:60px;
}

/* -------======= @end: 2.4.5 Dashboard =======------- */

/* ------------------=======================   @start: 2.4 Quick Access   ======================------------------- */
.quickAccessWrapper {
	
}
#quickAccess .content{
	padding: 10px 0 6px;
}
#quickAccess h5 {
	margin: 0px;
	color: #fff;
	position: relative;
	font-weight: 700;
	text-transform: uppercase;
}
#quickAccess h5::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 50%;
	width: 30px;
	margin-left: -15px;
	height: 2px;
	background: #fff;
}
#quickAccess h4 {
	color: #fff;
	font-size:21px;
}

/* -------======= @end: 2.4 Quick Access =======------- */


/* ------------------=======================   @start: 2.5 Cool Tools   ======================------------------- */
.coolToolsWrapper {
	display: grid;
	grid-gap: 10px;
	grid-auto-rows: 80px;
}
.funfacts,
.coolTools {
	font-size:46px;
}
.funfacts .icon,
.coolTools .icon {
	font-size:46px; color:#a32020; 
}
.coolTools h4,
.funfacts h4 {
	font-size:16px; color:#000
}
.coolTools h4{ color:#000}
.dashboard a:hover { text-decoration:underline; color:#e0301e  }
.funfacts h4 {
	margin-bottom:40px
}


/* -------======= @end: 2.5 Cool Tools =======------- */


/* ------------------=======================   @start: 2.6 Messages   ======================------------------- */
.messagesWrapper {
	
}
.card-outer {
	background: #FFF;
	border-radius: 3px;
	position: relative;
}
.card-outer:-moz-any(:hover, :focus, .active):not(.placeholder) {
	outline: none;
	box-shadow: 0 0 0 5px #D7D7DB;
	transition: box-shadow 150ms;
}
.card-outer .card {
	border-radius: 3px;
	box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.1);
}
.card-outer .card-preview-image-outer {
	background-color: #F9F9FA;
	position: relative;
	height: 122px;
	border-radius: 3px 3px 0 0;
	overflow: hidden;
}
.card-preview-image {
	height: 100%;
}
.card-outer .card-details {
	padding: 15px;
}
.messages {
	margin: 5px -10px;
}
.messages1 .card-preview-image {
 	background: url("../images/Message_001.jpg") no-repeat;
}
.messages2 .card-preview-image {
 	background: url("../images/Message_002.jpg") no-repeat;
}
.messages2 .card-preview-image-outer {
	height: 182px;
}
.messages .card-preview-image {
	background-size: cover;
}

/* -------======= @end: 2.6 Messages =======------- */


/* ------------------=======================   @start: 2.7 Footer   ======================------------------- */
.footerWrapper {
	padding:20px;
}
/* -------======= @end: 2.7 Footer =======------- */

/* -------======= @end: 2 LAYOUT =======------- */




/* -----------------------------------======   @start: 3 MEDIA QUERIES   ======----------------------------------- */

/* ------------------=======================   @start: 3.1 General   ======================------------------- */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	/* Header */
	.headerWrapper {
		
	}
	.headerNav {
		
	}
	
	/* Snapshots */

	
	
	/* Quick Access */
	.quickAccessWrapper {
		
	}
	
	/* Cool Tools */
	.coolToolsWrapper {
		grid-template-columns: repeat(8, 1fr);
		grid-template-rows: 100px;
	}
	.funfacts,
	.coolTools {
		text-align:center;
	}
	
	
	/* Company Messages */
	.messagesWrapper {
		
	}
	
	/* Footer */
	.footerWrapper {
		
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	/* Header */
	.headerWrapper {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.headerMenu {
		display: block;
		border: none;
		font-size: 1.1em;
		flex: 1 25%;
		align-self: flex-start;
		text-align: right;
		margin-right: 15px;
	}
	.headerLogo {
		display: block;
		border: none;
		flex: 1 10%;
		order: -1;
	}
	.headerLogo img {
		padding: 15px;
	}
	.headerNav {
		flex: 1 100%;
		align-self: flex-end;
		margin-bottom: 0;
	}
	.navbar-default {
		border: none;
	}
	.heroText h1 {
		font-family: 'Georgia', Times Roman;
		font-size: 46px; font-weight:normal;
		margin: 15px 0 0;
	}
	
		/* Snapshots */
	.snapshotWrapper {
		
	}
	.snapshotButton {
		margin: 3px;
	}
	.snapshot {
		height: 570px;
	}
	.snapshot1 {
		
	}
	.snapshot2 { 
		
	}
	.snapshot3 {
		
	}
	.snapshot4 {
		
	}
	.snapshot5 { 
		
	}
	.snapshot6 {
		
	}
	.snapshot7 {
		
	}
	.snapshot8 {
		
	}
	.snapshot .text h2 {
		font-size: 30px;
	}
	.snapshotWrapper.gridOpen .snapshot.tileOpen {
		
	}
	
	.quickAccess {
		margin: 5px -12px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	/* Header */
	.headerWrapper {
		
	}
	.headerMenu {
		flex-basis: 100%;
		margin-bottom: -15px;
	}
	.headerLogo {
		order: 0;
		flex-basis: 15%;
		margin-top: -25px;
	}
	.headerNav {
		flex-basis: 75%;
	}
	
	/* Snapshots */
	.snapshotWrapper {
		
	}
	.snapshotButton {
		transition: transform .2s, box-shadow .2s;
		height: 275px;
	}
	.snapshotButton:hover {
		transform: scale(1.03);
		box-shadow: 7px 7px 7px rgba(0,0,0,0.5);
		z-index: 2;
	}
	.snapshotButton:hover .overlay {
		background-color: rgba(0, 0, 0, 0);
	}
	
	
	.snapshotButton1 {
		flex-basis: 32%;
	}
	.snapshotButton2 {
		flex-basis: 32%;
	}
	.snapshotButton3 {
		flex-basis: 32%;
	}
	.snapshotButton4 {
		flex-basis: 19%;
	}
	.snapshotButton5 {
		flex-basis: 19%;
	}
	.snapshotButton6 {
		flex-basis: 19%;
	}
	.snapshotButton7 {
		flex-basis: 19%;
	}
	.snapshotButton8 {
		flex-basis: 19%;
	}	
	
	.snapshotButton:first-child {
		border-radius: 16px 0px 0px 0px;
	}
	.snapshotButton:nth-child(3) {
		border-radius: 0px 16px 0px 0px;
	}
	.snapshotButton:nth-child(4) {
		border-radius: 0px 0px 0px 16px;
	}
	.snapshotButton:last-child {
		border-radius: 0px 0px 16px 0px;
	}
	
	/* Quick Access */
	.quickAccessWrapper {
		
	}
	.quickAccess {
		transition: all .2s;		
		border-radius: 16px;
	}
	.quickAccess:hover {
		transform: scale(1.03);
		box-shadow: 7px 7px 7px rgba(0,0,0,0.5);
		z-index: 2;
		cursor: pointer;
	}
	.quickAccess:hover .overlay {
		visibility: visible;
		transition: all .2s;
	}
	
	/* Cool Tools */
	.coolToolsWrapper {
		grid-template-rows: 90px;
	}

	/* Footer */
	.footerWrapper {
		
	}
	.footerContact ul li a,
	.footerLegal ul li a {
		width: 50%;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	/* Hero */
	.heroWrapper {
		height: 210px;
	}
	.heroText {
		position: relative;
		color: #fff;
   		margin: 0 auto;
    	max-width: 960px;
	}
	.heroText h3 {
		margin-top: 0px;
	}
	
	.snapshotButton {
		margin: 5px;
	}
	.snapshotWrapper.gridOpen .snapshot.tileOpen {
		
	}
	
	.quickAccess {
		margin: 5px -10px;
	}
	
	/* Cool Tools */
	.coolTools .text {
		position: static;
	}

}
/* -------======= @end: 3.1 General =======------- */

/* -------======= @end: 3 MEDIA QUERIES =======------- */




/* -----------------------------------======   @start: 4 BOOTSTRAP OVERRIDES   ======----------------------------------- */

/* ------------------=======================   @start: 4.1 General   ======================------------------- */

/* -------======= @end: 4.1 General =======------- */
.navbar-default {
	background-color: #fff;
}
.navbar-brand {
	padding: 0;
}
.navbar-brand img {
	height: 100%;
}
.label {
	border-radius: 0;
    color: #000;
    display: inline;
    font-size: 100%;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    text-align: right;
    vertical-align:middle;
    white-space: nowrap;
}

/* -------======= @end: 4 BOOTSTRAP OVERRIDES =======------- */





/* -----------------------------------======   @start: 5 PAGES   ======----------------------------------- */

/* ------------------=======================   @start: 5.1 Introductions   ======================------------------- */
.Introductions { font-family:Arial, Helvetica, sans-serif}
.Introductions .row {
	margin:10px 0;
	padding:0 0 10px;
	vertical-align:middle;
}
.Introductions .row.line {
	border-bottom:1px solid #EDEDED;
}
.Introductions .row .col-md-2 {
	padding-right:0;
}
.IntroPhoto {
	text-align:center;
}
.intro_photo {
	border-radius: 50%;
    height: 100px;
    max-width: 100px;
    min-width: 100px;
    overflow: hidden;
	background:#B2B8C9;
	text-align: center;
	margin:15px auto;
}
.intro_photo img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
}
.intro_photo span.icon {
    color: #fff;
    font-size: 68px;
    font-weight: bold;
}
.panel-footer-buttons {
    padding: 10px;
    text-align: right;
}
.panel-footer-buttons .btn {
    margin-left: 10px;
}
#uploadPhoto {
	opacity: 0;
	height: 0;
}

/* -------======= @end: 5.1 Introductions =======------- */


/* -------======= @end: 5 PAGES =======------- */

.smalltext {font-size:10px; font-style:italic;}
#library {
    margin: 5px 0px;
}
.panel-heading-library:first-of-type {
    border-radius: 4px 4px 0 0;
}
.panel-heading-library {
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    font-size: 14px;
    line-height: 24px;
    padding: 10px 0 10px 15px;
}
#collapse1 {
	border-bottom: 1px solid #ddd;
}	
.panel-heading-library.collapsed .toggle::after {
    border-left: 1px solid #ccc;
    color: #333;
    content: "+";
    cursor: pointer;
    float: right;
    font-family: "Glyphicons Halflings";
    font-size: 15px;
    line-height: 46px;
    margin-top: -10px;
    padding-left: 20px;
    padding-right: 20px;
}
.panel-heading-library .toggle::after {
    border-left: 1px solid #ccc;
    color: #333;
    content: "−";
    cursor: pointer;
    float: right;
    font-family: "Glyphicons Halflings";
    font-size: 15px;
    line-height: 46px;
    margin-top: -10px;
    padding-left: 20px;
    padding-right: 20px;
}

.custom-range {
	width: 100%;
	padding-left: 0;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.bd-example {
	position: relative;
	padding: 1rem;
	margin: 1rem -15px 0;
	border: solid #f8f9fa;
	border-width: .2rem 0 0;
}
.bd-example {
	padding: 1.5rem;
	margin-right: 0;
	margin-left: 0;
	border-width: .2rem;
}
.bd-example::after {
	display: block;
	clear: both;
	content: "";
}
.custom-range::-moz-range-thumb {
	width: 2.5rem;
	height: 2.5rem;
	background-color: #e0301e;
	border: 0;
	border-radius: 2rem;
	transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
	-moz-appearance: none;
	appearance: none;
}
.custom-range::-moz-focus-outer {
	border: 0;
}
.custom-range::-moz-range-track {
	width: 100%;
	height: 1rem;
	color: transparent;
	cursor: pointer;
	background-color: #dee2e6;
	border-color: transparent;
	border-radius: 1rem;
}
.rating1 {
	padding: 0 20px 0 0;
}
.rating {
	padding: 0 73px
}
.rating5 {
	padding: 0 0 0 70px
}
.textarea2 {
	width:680px !important;
}


.progress-bar-striped  {
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent);
    background-image: linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent);
    -webkit-background-size: 40px 40px;
    background-size: 40px 40px;
}
.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #ff0000;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}