/*** Custom CSS for ProFed CU Account Application ***/
/* --------------------------------------------------------- */

/*  Table of Contents: */
/*
   1. FONTS
   2. GLOBAL STYLING
   3. GLOBAL FOUNDATION.CSS OVERRIDES/ADDITIONS
   4. HEADER/MASTHEAD
   5. LOGO
   6. HEADERS
   7. TEXT
   8. TOP BAR - TITLE BAR - NAVIGATION
   9. APPLICATION PROGRESS MENU
  10. CONTENT - GENERAL CONTENT PAGE
  11. FORMS
  12. BUTTONS
  13. DIV BOXES
  14. PRODUCT SELECTION AND CART
  15. LISTS
  16. SUMMARY
  17. FOOTER

*/
	
/* 1. GLOBAL STYLING
/* --------------------------------------------------------- */

:root {
	--blue: #005596; /* blue from live site */
	--green: #017d32; /* #017d32 is from live site */
	--brandgreen: #04955F;
	--dkgreen: #006327;
	--white: #fff;
	--inputgray: #F5F5F5;
	--ltgray: #ddd;	
	--dkgray: #4a4a4a;
	--medblack: #3a3a3a;
	--black: #000; }

*{  -moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; }

*:focus { /* chrome/safari issue - this removes yellow border appearing on selected items */ 
    outline: none; }

body {
	margin: 0px; 
	padding: 0px;
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 1rem; /* 16px */
	color: var(--medblack);
	background: var(--white); }

div {
	margin: 0;
	padding: 0;	}

/* 2. GLOBAL FOUNDATION.CSS OVERRIDES/ADDITIONS
/* (also look for specific overrides in sections within css) */
/* --------------------------------------------------------- */

.menu > li > a img, .menu > li > a i, .menu > li > a svg { /*to correct and have even padding around all the .top-bar-right li items*/
	margin-right: 0; }

/* 3. HEADER/MASTHEAD
/* --------------------------------------------------------- */

header .column, #header .columns {
	padding-left: 0; /* padding-left needs to be set to 0 here to override foundation.css ln 466 default padding */
	padding-right: 0; /* see above */ }

/* End Foundation Overrides */

#masthead {
	margin: 0;
	padding: 0;
	height: 60px; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
#masthead {
	height: auto; }}

/* 4. LOGO
/* --------------------------------------------------------- */

/* Small Navigation */
.logo-small {
	width: 233px;
	height: 40px;
	display: block;
	margin: .5rem; }

.small_logo_bg {
	background-color: var(--blue); }

/* Select Medium Up/Large Navigation */	
.logo {
	width: 297px;
	height: 51px;
	margin: 2.1875rem 0 2.25rem 0; }

/* 5. HEADERS
/* --------------------------------------------------------- */

h1, h2, h3, h4 {
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
	text-transform: capitalize;
	color: var(--blue); }
	
h1 {
	font-size: 	2rem;
	font-weight: 500; }	
h2 {
	font-size: 1.375rem;
	color: var(--medblack); }
h3 {
	font-size: 1.125rem;
	color: var(--green);
	text-transform: uppercase; }
h4 {
	font-size: .8125rem;
	font-weight: 500; }

/* 6. TEXT
/* --------------------------------------------------------- */

.explain_text { 
	font-size: 1rem;
	color: var(--black); }

/* 7. TOP BAR - TITLE BAR - NAVIGATION
/* --------------------------------------------------------- */

/* Foundation Overrides */
.top-bar {
	margin: 0;
	padding: 0; }
	 	
.top-bar,.top-bar ul {
	background: transparent; }

.top-bar .menu > li > a {
	padding: 0 .5rem; }

.top-bar-title {
  	float: none;
  	margin: 0;
	padding: 0; }
/* End Foundation Overrides */

#responsive-menu .col_left .column, #responsive-menu .col_left .columns {
	background-color: var(--white);
	float: none; } /*an override for problemic default float in foundation.css */

#responsive-menu .col_right .column, #responsive-menu .col_right .columns {
	float: right; } /*an override for problemic default float in foundation.css */

/* logo_row */
.logo_row {
	background-color: var(--white); }

/* top-bar-right */
/* Foundation Overrides */
.top-bar-right {
	float: none;
	margin: 0;
	padding: 0; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
.top-bar-right {
	float: right; }}
/**** End Foundation Overrides ****/

/* Global Nav */
/* Foundation Overrides */
.global_nav_sm {
	margin: 0;
	padding: 0;
	height: auto; }

.global_nav_sm ul {
	margin: 0;
	padding: 0;
	background-color: var(--white); }

.global_nav_sm li {
	border-bottom: 1px solid var(--blue); }

.global_nav_sm li:hover {
	background-color: var(--blue); }

.global_nav_sm a:link, .global_nav_sm a:visited {
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--medblack);
	line-height: 30px; }
	
.global_nav_sm a:hover {
	color: var(--white); }

/* Foundation Overrides */
.global_nav .menu > li > a {
	padding: .875rem 0 .8125rem 2.75rem; }
/* End Foundation Overrides */

.global_nav {
	margin: 2.125rem 0 0 0;
	padding: 0; }

.global_nav li {
	text-align: center; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
.global_nav li {
	text-align: right; }}

.global_nav li a:link, .global_nav li a:visited {
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: var(--blue); }

.global_nav li a:hover {
	text-decoration: underline; }

/* MENU-ICON */
/* Foundation Overrides */
.menu-icon, .title-bar-title {
	position: relative; }
	
.menu-icon {
  	width: 40px;
  	height: 40px;
	position: absolute;
	top: 8px;
  	right: 8px;
	background-color: transparent; }

.menu-icon::after {
	width: 77%;
    height: 4px;
    background: var(--white);
	top: .5625rem;
    left: .25rem;
    box-shadow: 0 9px 0 var(--white), 0 18px 0 var(--white); }
	
.menu-icon:hover::after {
    background: var(--white);
    box-shadow: 0 9px 0 var(--white), 0 18px 0 var(--white); }

.top-bar-title {
	background-color: var(--blue); }
/* End Foundation Overrides */

/* 8. APPLICATION PROGRESS MENU
/* --------------------------------------------------------- */

/* For small view */
#app_progress_small {
	display: block;
	margin: 1.5rem 0;
	padding: 0; }
	
#app_progress_small h4 {
	color: var(--green);
	text-transform: uppercase;
	white-space: nowrap;
	letter-spacing: normal;
	margin-left: .125rem;
	margin-bottom: .125rem; }

/* Foundation Overrides */
.progress {
    border-radius: 6px;
	height: 1.25rem;
	background-color: var(--ltgray); }

.progress-meter {
	border-radius: 6px 0 0 6px;
	overflow: hidden; }

.progress-meter .progress-meter-text {
	font-size: .8125rem;
	font-weight: 500; 
	color: var(--white); }

.progress-meter {
    background-color: var(--green);
	z-index: 100; }
/* End Foundation Overrides */

/* For large view */
#app_progress_large {
	margin: 0 0 1rem 0;
	padding: 0; }

#app_progress_large li {
	margin: 0;
	padding: 0;
	font-size: 1rem;
	font-weight: 400;
	height: 38px; }

/*** active ***/
#app_progress_large li.active {
	position: relative;
	background: var(--green);
	border-top: 2px solid var(--white);
	border-right: none;
	border-bottom: 2px solid var(--white);
	border-left: none;
	color: var(--white); }

#app_progress_large li.active::after {
	content: " ";
	display: block;
	position: absolute;
	top: 4px;
	right: -13px;
	width: 26px;
	height: 26px;
	background: var(--green);
	border-top: none;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
	border-left: none;
 	-moz-transform:rotate(-45deg);
  	-webkit-transform:rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 100; }

/*** not_active ***/
#app_progress_large li.not_active {
	position: relative;
	background: var(--ltgray);
	border-top: 2px solid var(--white);
	border-right: none;
	border-bottom: 2px solid var(--white);
	border-left: none;
	color: var(--black); }

#app_progress_large li.not_active::after {
	content: " ";
	display: block;
	position: absolute;
	top: 4px;
	right: -13px;
	width: 26px;
	height: 26px;
	background: var(--ltgray);
	border-top: none;
    border-right: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
	border-left: none;
 	-moz-transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	z-index: 100; }

/* last child (last progress step in the menu) and not active */
#app_progress_large li:last-child {
	position: relative;
	background: var(--ltgray);
	border-top: 2px solid var(--white);
	border-right: none;
	border-bottom: 2px solid var(--white);
	border-left: none;
	color: var(--black); }

 /* last child (last progress step in the menu) and active */
 #app_progress_large li:last-child.active {
	position: relative;
	background: var(--green);
	border-top: 2px solid var(--white);
	border-right: none;
	border-bottom: 2px solid var(--white);
	border-left: none;
	color: var(--white); }

/* 9. CONTENT/CONTENT PAGE
/* --------------------------------------------------------- */

/* Foundation Overrides */
#content .column:last-child:not(:first-child), #content .columns:last-child:not(:first-child) {
    /*float: right;*/
	float: left; } /*this affects form fields: to align left when in columns that don't add up to 12 on grid*/
/* End Foundation Overrides */

#content {
	margin: 0;
	padding: 0;
	background-color: var(--white); }

/* content_page headers and text */
#content p {
	font-size: 1rem; }

/* header title */
#content .header_title {
	margin: 0 0 1rem 0;
	line-height: 2.25rem; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
#content .header_title {
	margin: .875rem 0 1.5rem 0;
	line-height: 2.8125rem; }}

/* subheader title */
#content .subheader_title {
	margin: 1.25rem 0 .5rem 0;
	clear: both; }

/* explain text */ /*see also .explain_text in section 10, this applies only within #content section */
#content p.explain_text {
	display: block;
	float: none; }
/* end content_page headers and text */

/* content_page */
.content_page {
	margin: 0;
	padding: 0; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
.content_page {	
	padding: 0 0 1.5rem 0; }}

.content_page small {
	display: block;
	float: none;
	text-transform: uppercase;
	color: var(--green);
	font-size: .8125rem;
	margin: 0 0 .5rem 0; }

/* 10. FORMS
/* --------------------------------------------------------- */

form {
	padding: 0;
	margin: 0;
	clear: both; }
		
label {
	color: var(--black);
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1.0625rem;
	margin-bottom: .5rem; }

[type=text], [type=email], [type=tel], [type=number], [type=date], textarea, select, .input-group-field {
    background-color: var(--inputgray);
	height: 2.5rem;
	text-transform: capitalize; }

[type=date] {
	text-transform: none; }

[type=checkbox] {
	vertical-align: -1px;
	margin: 0; }

/* select - to make the first item of the select menu mimic the look of the placeholder using :invalid */
select, select option {
	color: var(--black); }

select:invalid, select option[value=""] {
  color: var(--black); }

/* for browser compatibility*/
[hidden] {
	display: none; }
/* end select */

/* fieldset */
/* Foundation Overrides */
.fieldset {
    border: none;
    padding: 0;
    margin: .75rem 0 0 0; }

.fieldset label {
	display: block; }

.fieldset legend {
	background: transparent;
	color: var(--black);
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1.0625rem; 
	padding: 0 0 0 .1875rem;
	margin-bottom: 1.125rem; }
/*  End Foundation Overrides */

.agreement {
	border: 1px solid var(--green);
	margin: 1.5625rem 0 2rem 0;
	padding: 1rem;
	border-radius: 6px; }

.agreement h3 {
	margin-bottom: .5rem; }

.agreement_text {
	font-size: .9375rem; }

.agreement label {
	color: var(--green);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4375rem; }

/* Foundation Overrides */
.input-group-label, .input-group-field, .input-group-button {
    display: inline; }
	
.input-group-field, .input-group-button {
	height: 2.5rem; }

.input-group-button {
	padding: 0; }
/* End Foundation Overrides */

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--medblack);
	font-size: .9375rem;}

input::-moz-placeholder,
textarea::-moz-placeholder { /* Firefox 19+ */
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--black);
	font-size: .9375rem;  }

input:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* IE 10+ */
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--black);
	font-size: .9375rem;  }

input::placeholder,
textarea::placeholder {
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--black);
	font-size: .9375rem;  }

/* 11. BUTTONS
/* --------------------------------------------------------- */

/* Foundation Overrides */
button, .button {
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 32px;
	text-transform: uppercase;
	padding: .625rem 1.5rem;
	text-align: center;
	white-space: nowrap; }
/* End Foundation Overrides */
	
.client_button_group {
	margin-top: 1rem; }

.button.back {
	color: var(--white);
    background-color: var(--blue);
	border: 2px solid var(--blue);
	display: inline-block;
	width: 100%;
    margin-left: 0;
    margin-right: 0;
	-webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */		
.button.back {
	width: 160px;
	height: 56px; }}

.button.back:hover {
    text-decoration: none;
	color: var(--dkgray);
    background-color: var(--transparent);
	border: 2px solid var(--dkgray); }

.button.continue {
	color: var(--white);
    background-color: var(--green);
	border: 2px solid var(--green);
	display: inline-block;
	width: 100%;
    margin-left: 0;
    margin-right: 0;
	-webkit-transition: background-color 0.5s ease;
    -moz-transition: background-color 0.5s ease;
    -o-transition: background-color 0.5s ease;
    transition: background-color 0.5s ease; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */			
.button.continue {
	width: 160px;
	height: 56px; }}

.button.continue:hover {
	text-decoration: none;
	border: 2px solid var(--dkgreen);
    background-color: var(--dkgreen); }

.button_right, .button_left {
	float: none; }	
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */	
.button_right {
	float: right; }	
.button_left {
	float: left; }}	

/* 12. FOOTER
/* --------------------------------------------------------- */

/* needed special id (#client_footer) for footer since #content overrides footer styles */
#client_footer {
	margin: 0;
	padding: 1rem 0 1rem 0;
	color: var(--medblack);
	background-color: var(--white);
	border-top: 1px solid var(--ltgray); }

/* Foundation overrides */
#client_footer li.menu-text {
	font-size: 1rem;
	padding: 0 0 .25rem 0; }
/* End Foundation overrides */

#client_footer .footer_logo {
	width: 350px;
	height: 58px; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */
#client_footer .footer_logo {
	width: 500px;
	height: 82px; }}

/* footer_links */
#client_footer .footer_links a:link, #client_footer .footer_links a:visited {
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: var(--blue);
	padding-top: .4375rem; }

#client_footer .footer_links a:hover {
	text-decoration: underline; }

#client_footer .footer_links .menu-text {
	font-family: 'Raleway', "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 500;
	font-size: 1rem;
	color: var(--blue); }

/* legal_menu */
#client_footer .legal_menu li {
	font-size: .875rem; }

#client_footer .legal_menu li:last-child {
	padding-top: .75rem; }

#client_footer .legal_menu img.ncua {
	margin-right: 1.25rem;
	width: 155px;
	height: 73px; }

#client_footer .legal_menu img.ehl {
	width: 92px;
	height: 75px; }