/*** Custom CSS for Cedar Point Federal Credit Union Account Application ***/
/* --------------------------------------------------------- */

/*  Table of Contents: */
/*
   1. GLOBAL STYLING
   2. GLOBAL FOUNDATION.CSS OVERRIDES/ADDITIONS
   3. HEADER/MASTHEAD
   4. LOGO
   5. HEADERS
   6. TEXT
   7. LINKS
   8. TOP BAR - TITLE BAR - NAVIGATION
   9. APPLICATION PROGRESS MENU
  10. CONTENT/CONTENT PAGE
  11. FORMS
  12. BUTTONS
  13. SUMMARY
  14. FOOTER
*/

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

:root {
	--blue: #0094c0; /* from client live site, page heading (large text only) text color */
	--dkblue: #00447c; /* from client live site, link color */
	--ltgray: #f2f2f2; /* from client live site, sidebar bg color */
	--footergray: #f0f0f0; /* Cedar Point requested to match aerofed's gray footer color */
	--progressgray: #cacaca; /* only used for small progress bar, passes contrast ratio */
	--medgray: #7f7d79;
	--dkgrayaf: #606870; /* requested by BA to use aerofed "not active" progress state; meets CC req */
	--dkgray: #4F4C46; /* from client live site footer */
	--altblack: #282828; /* from client live site, body text color */
	--black: #000;
	--white: #fff; }

*{  -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: 0;
	padding: 0;
	font-family: 'Calibri', Arial, Helvetica, sans-serif;
	font-weight: 300;
	font-size: 1.1875rem; /* 19px */
	color: var(--altblack);
	background-color: 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 {
	padding: .25rem 1rem .125rem 1rem;
} /* this controls all the padding for all .top-bar-right li items and other menu items */

.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
/* --------------------------------------------------------- */

#masthead {
	/* do not add a height dec to masthead or the top-bar-right for small view: li items will not be able to expand and push the rest of the content down when expanded. For this layout, masthead needs to be able to have a elastic height */
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(74,74,74,.1);
	height: auto;
	background: rgb(250,250,251);
	background: radial-gradient(circle, rgba(250,250,251,1) 0%, rgba(229,234,237,1) 50%, rgba(250,250,251,1) 100%);
	-webkit-box-shadow: 0px 0px 9px 0px rgba(84,102,112,0.31);
    -moz-box-shadow: 0px 0px 9px 0px rgba(84,102,112,0.31);
    box-shadow: 0px 0px 9px 0px rgba(84,102,112,0.31); } 
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
#masthead {
	height: 60px; }}
	
/* 4. LOGO
/* --------------------------------------------------------- */

/* Small Navigation */
.logo-small {
	/* margin: 10px 0; */
	width: 160px;
	height: 31px;
	position: absolute;
	top: 15px;
    left: calc(50% - 75px);
  	z-index: 10;
}
/* Select Medium Up/Large Navigation */	
.logo {
	width: 188px;
	height: 36px; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */ 
.logo {
	/* margin: 11px 0 11px 25px; */
	margin: 12px auto;
 }}

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

h1, h2, h3 {
	font-family: 'Calibri', Arial, Helvetica, sans-serif;
	font-weight: 400;
	color: var(--dkblue);
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
	text-transform: capitalize; }
	
/* h1 { /* 43px Can use this if you need a main page title as it appears on client site
	font-size: 2.6875rem; 
	color: var(--blue);
 } */
	
h1 {
	font-size: 2.125rem; /* 34px */ }
h2 {
	font-size: 1.5rem; /* 24px */ }
h3 {
	font-size: 1.125rem; } /* 18px */

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

.explain_text { /* see also #content section for addt'l specific styling w/in that section */
	color: var(--black); }

/* 7. LINKS
/* --------------------------------------------------------- */
a.cedarpoint_link:link, a.cedarpoint_link:visited {
	color: var(--dkblue); }

a.cedarpoint_link:hover {
	text-decoration: underline; }

a.cedarpoint_link:active {}

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

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

.top-bar-title {
	margin-right: .625rem;
  	float: none;
	position: relative;
	height: 60px; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
.top-bar-title {
	height: auto; }}

/* End Foundation Overrides */

/* responsive-menu */
.responsive_menu_wrapper {
	display: block;
	margin: 0;
	padding: 0;
	height: auto; }

/* 9. APPLICATION PROGRESS MENU
/* --------------------------------------------------------- */

/* For small view */
#app_progress_small {
	display: block;
	margin: 0;
	padding: 1rem 0 0 0;
	background-color: var(--white);
	z-index: -10;
	position: relative; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */
#app_progress_small {
	display: block;
	margin: 0;
	padding: .875rem 0 0 0;
	background-color: var(--white);
	z-index: -1;
	position: relative; }}
		
#app_progress_small h4 {
	color: var(--dkblue);
	font-weight: 400;
	white-space: nowrap;
	letter-spacing: normal;
	margin-bottom: .125rem; }

/* Foundation Overrides */
.progress {
	margin-bottom: 0;
	background-color: var(--progressgray);
	height: 1.3125rem;
	/* Safari 3-4, iOS 1-3.2, Android 1.6- */
	-webkit-border-radius: 5px;
	/* Firefox 1-3.6 */
	-moz-border-radius: 5px;
	/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-radius: 5px;
	overflow: hidden; }

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

.progress-meter {
    background-color: var(--dkblue);
	/* Safari 3-4, iOS 1-3.2, Android 1.6- */
	-webkit-border-radius: 5px 0 0 5px;
	/* Firefox 1-3.6 */
	-moz-border-radius: 5px 0 0 5px;
	/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
	border-radius: 5px 0 0 5px;
	overflow: hidden; }
/* End Foundation Overrides */

/* For large view */
/* righthand progress bar */
/*----------------------from CPM--------------------------*/
#app_progress_large {
	margin: 5rem .5rem 1.875rem 0;
	padding: 1.5rem 0;
	display: block;
	border: 1px solid var(--dkgrayaf);
	width: 24%;
	float: right; }

#app_progress_large ul {
	margin: 0;
	padding: 0; }

#app_progress_large li {
	margin: 0;
	padding: .375rem 2.5rem;
	list-style-type: none;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 400;
	color: var(--dkgrayaf); }

#app_progress_large .progress_title {
	line-height: 1.3;
	margin-bottom: 1rem;
	text-align: center; }

/* active */
#app_progress_large li.active {
	font-weight: 700;
	background-color: var(--dkblue);
	color: var(--white); }

#app_progress_large li.not_active {
	font-weight: 700; }
/*----------------------from CPM--------------------------*/


/*#app_progress_large::before, #app_progress_large::after {
	content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -40px;
    left: 0;
    border-top: 40px solid transparent;
	border-right: 300px solid var(--ltgray);
    border-bottom: 0px solid transparent; }

 #app_progress_large::after {
	bottom: -40px;
    top: auto;
    border-bottom: 40px solid transparent;
    border-left: 300px solid var(--ltgray);
    border-top: 0px solid transparent;
    border-right: 0; }

#app_progress_large {
	position: relative;
	width: 300px;
	margin: 87px .5rem 1.5rem 0; !* lined up with header title of content page *!
	padding: 2rem;
	background-color: var(--ltgray);
	display: block;
	float: right;
    z-index: 2; }

#app_progress_large .progress_title {
	!*font-size: 1.3125;*! !* look and feel from client live site sidebar *!
	line-height: 1.25;
	font-weight: 400;
	text-transform: uppercase;
	text-align: center;
	margin-top: 0;
	margin-bottom: 1rem;
	padding: 0 0 .1875rem 0; }

#app_progress_large ul {
	margin: 0;
	padding: 0; }

#app_progress_large li {
	margin: 0;
	padding: 0;
	list-style-type: none; }

#app_progress_large li.simple_li {
	margin: 0;
	padding: 0; }

#app_progress_large li.progress_li {
	margin: 0;
	list-style-type: none;
	padding: 0 .5rem 0 0;
	white-space: nowrap;
	position: relative;
	z-index: 10; }

!* active *!
!* active text *!
#app_progress_large li.progress_text_active {
	font-size: 1rem;
	color: var(--dkblue);
	font-weight: 700;
	padding: .25rem; }
!* active shape *!
#app_progress_large .circle_active {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--white);
	border: 3px solid var(--dkblue);
	overflow: hidden; }

!* not active *!
!* not active text *!
#app_progress_large li.progress_text_not_active {
	font-size: 1rem;
	color: var(--dkgrayaf);
	font-weight: 400;
	padding: .25rem; }
!* not active shape *!
#app_progress_large .circle_not_active {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--progressgray);
	border: 3px solid var(--dkgrayaf);
	overflow: hidden; }

!* completed *!
!* completed text *!
#app_progress_large li.progress_text_completed {
	font-size: 1rem;
	font-weight: 700;
	color: var(--dkblue);
	padding: .25rem; }
!* completed circle *!
#app_progress_large .circle_completed {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--dkblue);
	border: 3px solid var(--dkblue);
	overflow: hidden; }*/

/* 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*/
@media screen and (min-width: 64em) {  /* any screen 1024px or wider (large screens and up) */
.large-3 {
	width: 24%; }

.large-9 {
	width: 73%; }}
/* End Foundation Overrides */

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

/* content_page headers */
/* header title */
#content .header_title {
	margin: 0; }

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

/* #content .page_title {
	margin: .3125rem 0 .5rem 0; } */
#content .page_title {
	margin: 1rem 0 .5rem 0;
	display: block;
	float: none;
	clear: both; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */
#content .page_title {
	float: left; }}
/* end content_page headers */

/* explain text */ 
/*see also .explain_text in TEXT & FORM section, this applies only within the #content section */
#content p.explain_text {
	margin-bottom: 1rem;
	display: block; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
#content p.explain_text {
	margin-bottom: 0; }}

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

.content_page small {
	display: block;
	float: none;
	text-transform: uppercase;
	color: var(--altblack);
	font-size: .75rem;
	margin: 0 0 .5rem 0; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */
.content_page small {
	margin: 1.875rem 0 0 0;
	float: right; }}

/* 11. FORMS
/* --------------------------------------------------------- */

form {
	padding: 0;
	margin: 0;
	clear: both;
	background-color: var(--white);
    z-index: 2; }
		
label {
	font-family: 'Calibri', Arial, Helvetica, sans-serif;
	font-size: 1.1875rem; /* 19px */
	font-weight: 300;
	color: var(--altblack);
	line-height: 1.5rem;
	margin-bottom: 0; }

label.promo_code {
	font-size: 1rem; }

form a:link, form a:visited {
	color: var(--blue);
	text-decoration: none; }

form a:hover {
	text-decoration: underline; }

[type='text'], [type='date'], [type='email'], [type='tel'], [type='number'], [type='password'], textarea, select {
	color: var(--altblack);
	border: 1px solid var(--medgray);
	background-color: var(--fieldfill);
	overflow: hidden;
	height: 2.5rem;
	/*text-transform: capitalize;*/
	border-radius: 5px; }

[type=checkbox] {
	vertical-align: -2px; }

[type='radio'] {
	margin: 0; }

.fieldset_select {
	margin: 1rem 0 0 0; }

.fieldset_select .select_col, .fieldset_select .select_col2 {
    width: 100%;
    float: left;
    padding-left: 0;
    padding-right: 0; }

.fieldset_select .select_col {
	margin: 0 0 1rem 0; }

.fieldset_select select  {
	margin: 0 0 0 0; }

.fieldset_simple {
	margin: 0;
	padding: 0; }

.fieldset_simple .select_col {
	width: 100%;
	float: left;
	padding-left: 0;
	padding-right: 0; }

.fieldset_radio {
	border-top: 1px solid var(--black);
	border-right: none;
	border-bottom: none;
	border-left: none;
	padding: 1rem 0;
	margin: 0; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
.fieldset_radio {
	margin: 0;
	padding: .5rem 0; }}

.fieldset h3 {
	margin: .25rem 0; }

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

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

.fs_first .fs_question, .fs_mid .fs_question, .fs_last .fs_question { 
	margin-right: -.625rem;
	margin-left: -.625rem;
	font-size: 1.1875rem;
	padding-top: .5rem; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */
.fs_first .fs_question, .fs_mid .fs_question, .fs_last .fs_question { 
	margin-right: -.9375rem;
	margin-left: -.9375rem;
	padding-top: 0; }}

.fs_first .fs_label, .fs_mid .fs_label, .fs_last .fs_label  {
	font-size: 1.1875rem;
	padding-right: 1.25rem;
	padding-left: .3125rem; }

.radio_row {
	text-align: center; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */
.radio_row {
	text-align: left; }}

/* 12. BUTTONS
/* --------------------------------------------------------- */

/* Foundation Overrides */
button, .button {
	font-family: 'Calibri', Arial, Helvetica, sans-serif;
    font-weight: 700;
	font-size: .9375rem; /* 15px */
	text-transform: uppercase;
	line-height: 20px;
	padding: 10px 25px;
	margin-bottom: 0; }
/* End Foundation Overrides */

.button.cta {
	color: var(--white);
	background-color: var(--dkblue);
	border: 1px solid var(--dkblue);
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	display: block;
    width: 100%;
	max-width: 100%;
    margin-left: 0;
    margin-right: 0; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */		
.button.cta {
	width: 142px; }}

.button.cta:hover {
	text-decoration: none;
	color: var(--white);
	border: 1px solid var(--blue);
	background-color: var(--blue); }

.button.cta_long {
	color: var(--white);
	background-color: var(--blue);
	border: 1px solid var(--blue);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */		
.button.cta_long {
	width: auto; }}

.button.cta_long:hover {
	text-decoration: none;
	color: var(--white);
	border: 1px solid var(--dkblue);
	background-color: var(--dkblue); }

/* review_cta is the button within review */
.button.review_cta {
	color: var(--white);
	background-color: var(--blue);
	border: 1px solid var(--blue);
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	display: block;
	width: 85px;
    margin-left: 0;
    margin-right: 0; }

.button.review_cta:hover {
	text-decoration: none;
	color: var(--white);
	border: 1px solid var(--dkblue);
	background-color: var(--dkblue); }

.client_button_group {
	text-align: center; /* centering trick */
	margin-top: 0; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
.client_button_group {
	margin-top: 1rem;
	margin-left: 0; }}

.client_button_group li {
	padding-right: 1.5rem; }

.client_button_group li:last-child {
	padding-right: 0; }

.cta_menu > li > a {
	padding: 10px 20px; }

.cta_menu {
	display: inline-block; /* centering trick */ }

/* 13. SUMMARY
/* --------------------------------------------------------- */

/* review page */
/* Foundation Overrides */
table {
    margin-bottom: .5rem; }

table tbody th {
	padding: .625rem 0; }

 table tbody td {
    padding: .1875rem 0 .5625rem 0;
	font-weight: 300;
	font-size: 1.1875rem; }

/* end Foundation Overrides */

.review_section .page_title_review {
	margin: 1rem 0 .5rem 0;
	display: block;
	float: none;
	clear: both; }

.review_section h3 {
	font-weight: 400; }

.review_section p {
	margin-top: .25rem;
	margin-bottom: .5rem; }

.review_section .review_agreement_text {
	font-size: 1rem;
	margin-top: 1rem;
	margin-bottom: 0; }

.review_section .review_table {
	background-color: var(--white); }

.review_section table tbody tr:nth-child(even) {
	background-color: var(--white); }

.review_section table thead, table tbody, table tfoot {
	border: none;
	background-color: var(--white); }

.review_section table tbody tr {
	border-bottom: 1px dotted var(--dkgray); }

.review_section table tbody tr:last-child {
	border-bottom: none; }

.review_section .review_table thead, .review_section .review_table tbody, .review_section .review_table tfoot {
    border: none;
    background-color: var(--white); }

.review_section .loan_info_table, .review_section .applicant_information_table, .review_section .beneficiary_table {
	/* padding: 1.75rem; */
	background-color: var(--white);
	border-bottom: 1px solid var(--blue); }

.review_section .review_cta {
	float: right; }

/* whichever table is the LAST table on the review section page, remove the border-bottom. Can use this .last_table class or remove the table from the css dec that assigns the border-bottom (above).  */
.review_section .last_table {
	border-bottom: none; }

.review_section .review_table tbody th {
	font-size: 1rem;
	text-align: left; }

.review_section .sub_table {
	margin-bottom: 0; }

/* review table and .sub_table */
.review_table, .sub_table {
	table-layout: fixed; }

/* .sub_table */
.sub_table tr {
	vertical-align: top; }

.sub_table address {
	font-style: normal;
	font-size: 1rem; }

/* 14. FOOTER
/* --------------------------------------------------------- */

/* needed special id (#client_footer) for footer since #content overrides footer styles */
#client_footer {
	margin: 0;
    padding: 20px 0;
	background-color: var(--footergray); }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
#client_footer {
    padding: 20px 0 15px 0; }}

#client_footer .footer_divider {
	padding-right: .4375rem;
	padding-left: .4375rem; }
@media only screen and (min-width: 40em) { /* any screen 640px or wider (medium screens) */
#client_footer .footer_divider {
	padding-right: .75rem;
	padding-left: .75rem; }}

#client_footer p {
	margin-bottom: 0;
	font-size: .9375rem;
	color: var(--black); }

#client_footer a:link, #client_footer a:visited {
	font-weight: 300;
	font-size: .9375rem;
	color: var(--black);
	text-decoration: none;
	padding: 0; }

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

/* footer_links */
#client_footer .footer_links li {
	color: var(--black);
	font-size: .9375rem;
	padding: 0; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
#client_footer .footer_links li {
	padding: .25rem .3125rem 0 .3125rem; }}

#client_footer .ehl {
	margin-right: .5rem;
	width: 30px;
	height: 32px; }
@media only screen and (min-width: 64em) { /* any screen 1024px or wider (large screens and up) */
#client_footer .ehl {
	margin-right: .0625rem; }}