@charset "utf-8";
/* CSS Document */
@import url("../webfonts/Graphik_Light/stylesheet.css");

@font-face {font-family: "Graphik Light"; src: url(../webfonts/Graphik_Light/Graphik-Light.woff)} 

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Graphik Light";
}

/* Extra small  Major Second (landscape phones, 576px and up) */
html, body {font-size: 14px !important;}
@media only screen and (min-width:0px) and (max-width:576px) {
.h1, h1 {font-size: 1.602rem;}
.h2, h2 {font-size: 1.424rem;}
.h3, h3 {font-size: 1.266rem;}
.h4, h4 {font-size: 1.125rem;}
.h5, h5 {font-size: 1.0rem;}
.h6, h6 {font-size: 0.889rem;}
.display-1 {font-size: 3.906rem;}
.display-2 {font-size: 3.125rem;}
.display-3 {font-size: 2.5rem;}
.display-4 {font-size: 2rem;}  
}
/* Small   Minor Third (landscape phones, 576px and up) */
@media (min-width: 576px) {  
.h1, h1  {font-size: 1.901rem;}
.h2, h2 {font-size: 1.616rem;}
.h3, h3 {font-size: 1.427rem;}
.h4, h4 {font-size: 1.250rem;}
.h5, h5 {font-size: 1.083rem;}
.h6, h6 {font-size: 0.926rem;}
.display-1 {font-size: 4.604rem;}
.display-2 {font-size: 3.917rem;}
.display-3 {font-size: 3.167rem;}
.display-4 {font-size: 2.5rem;}	
}*/
/* Medium   Major Third (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) { 
.h1, h1  {font-size: 2.201rem;}
.h2, h2 {font-size: 1.808rem;}
.h3, h3 {font-size: 1.589rem;}
.h4, h4 {font-size: 1.375rem;}
.h5, h5 {font-size: 1.167rem;}
.h6, h6 {font-size: 0.963rem;}	
.display-1 {font-size: 5.302rem;}
.display-2 {font-size: 4.708rem;}
.display-3 {font-size: 3.833rem;}
.display-4 {font-size: 3.00rem;}	
}
/* Large devices (desktops, 992px and up)*/
@media screen and (min-width: 992px) { 
  html, body {font-size: 16px !important;}    
.h1, h1  {font-size: 2.50rem;}
.h2, h2 {font-size: 2.0rem;}
.h3, h3 {font-size: 1.75rem;}
.h4, h4 {font-size: 1.50rem;}
.h5, h5 {font-size: 1.25rem;}
.h6, h6 {font-size: 1.0rem;}	
.display-1 {font-size: 6rem;}
.display-2 {font-size: 5.5rem;}
.display-3 {font-size: 4.5rem;}
.display-4 {font-size: 3.5rem;}	
} 
/* Extra Large 
@media screen and (min-width: 1200px) {
html, body {font-size: 18px !important;}
}*/


.lineheight30{
    line-height: 30px;
}
.fancyp{
    line-height: 30px;
    color: #636363;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}
.myriad{
    font-family: Myriad-Pro;
    color: #333333;   
}
.inputerror {
    color: #F00;
}
.nobottommargin {
	margin-bottom: 0px;
}
.topofheaderone {
    background-color: #f4f5f4;
    color: #737373;
	text-align: center;	
	font-size: .75rem;
}
.zerotop {
	margin-bottom: 0;
 	font-size: .75rem;
	padding-top: 2px;
	padding-bottom: 2px;
	}
.topofheadertwo {
    background-color: #25597F;
    text-align: center;
    color: #F0F0F0;
  font-size: .75em;
	padding-top: 2px;
	padding-bottom: 2px;
}
.topofheadertwo a {
    color: #FFFFFF;
}
.topallblue {
	 background-color: #25597F;
	
}
.topofheaderthree {
    background-color: #25597F;
    text-align: center;
    color: #F0F0F0;
    font-size: 1.3em;
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.topofheaderthree a {
    color: #FFFFFF;
}
.topsigninbtn {
    color: #3484bd;
    border: 1px solid #3484bd;
}
.topsigninbtn:hover {
    color: #FFFFFF;
	background-color: #3484bd;
}
/* button on rates page blue */
.extranowbtn {
    color: #FFFFFF;
    border: 1px solid #25597F;
	background-color: #25597F;	
}
.extranowbtn:hover {
    color: #25597F;
	background-color: #FFFFFF;
}
/* end button on rates page blue */

.navlinks {
  color: #0c4569 !important;
}

a.navlinks:hover, a.navlinks:focus {
    color: #2081bf !important;
    text-decoration: underline;
}
.telephone {
    color: #417BA2;
    font-size: 1.5rem;
    font-style: normal;
}
a.telephone:hover, a.telephone:focus {
    color: #417BA2 !important;
    text-decoration: none;
}


.newtopbutton {
    color: #3484bd;
    bg: #FFFFFF;
    border: 1px solid #3484bd;
    border-radius: .5rem;
   
    background-color: #FFFFFF;
}
.newtopbutton:hover {
	
	  color: #FFFFFF;
	background-color: #3484bd;
	
}
.redbutton {
    color: #d13239;
    bg: #FFFFFF;
    border: 2px solid #d13239;
    border-radius: .5rem;
    font-weight: normal;
    font-size: large;
}

.redbutton:hover {
	 color: #FFFFFF;
	background-color: #d13239;
}



/* Puts border around Card */

.hoverborder:hover {
    border-color: #2c80fc;
    transition: border 150ms ease-in-out;
}
/* End Puts border around Card */
/* Puts foot link at bottom of Card */
.cardfootlink {
    color: #3484bd;
	
}
.cardfootlink:hover {
    color: #FFFFFF;
    background-color: #007bff;
}
/* Ends Puts foot link at bottom of Card */
.green-checkmark .gap{margin-bottom:15px;}
.green-checkmark, .bulletList{margin:0 0 2em;padding:0;list-style-type:none;}
.green-checkmark li, .bulletList li{background-image:url(../images/green-checkmark.png);background-repeat:no-repeat;background-position:0px 5px;padding:0 0 0 18px;margin:5px 0 0;line-height:18px;background-size:auto auto;}
/*  Small Simple P&I Calculator */
#calc {
    border: 1px solid #818386;
    text-align: center;
    border-radius: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#calc #mc {
    border-collapse: collapse;
    border-style: none;
    width: 100%;
}
#calc #mc td {
    border: 0px solid black;
    text-align: center;
    font-size: 1.1em;
}
#calc #mc td input {
    width: 60%;
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    margin-top: 2px;
    margin-bottom: 2px;	
}
/*  End Small Simple P&I Calculator */
/* For calculator chart start */
.chart {
    width: 358px;/* was 300  */
    margin-left: auto;
    margin-right: auto;
}
/* For calculator chart end */
/* For Main Calculator start */
.width100 {width: 98%}
.fl65 {width: 64%;float: left;}		
.fl35 {width: 34%;float: left;}
#maincalc {width: 358px;padding-left: 10px;border: 1px solid #747070;border-radius: 3px;color: #2C3E50;box-sizing: border-box;padding-right: 10px;font-size: 17px;margin-left: auto;margin-right: auto;padding-bottom: 20px;padding-top: 20px;}
#maincalc input {text-align: center;font-size: 17px;line-height: 23px;padding-top: 3px;padding-bottom: 3px;box-sizing: border-box;margin-right: 0px;padding-right: 10px;padding-left: 10px;margin-bottom: 3px;color: inherit;margin-top: 4px;border: 1px solid #ccc;border-radius: 3px;
}
.relative {position: relative;}
.spolay {position: absolute;top: 32px;color: #aaa;left: 40px;z-index: 10;}
.dppolay {position: absolute;top: 32px;color: #aaa;left: 305px;z-index: 10;}
.ltolay {position: absolute;top: 32px;color: #aaa;left: 205px;z-index: 10;}
.ptyolay {position: absolute;top: 32px;color: #aaa;left: 155px;z-index: 10;}
/* For Main Calculator end */
/* For DTI calculator start */
#dtione, #dtitwo {padding-left: 10px;box-sizing: border-box;padding-right: 10px;font-size: 17px;margin-left: auto;margin-right: auto;padding-bottom: 20px;padding-top: 20px;/* [disabled]margin-top: 35px; */
}
#dtione input, #dti select, #dtitwo input, #dtitwo select {width: 100%;text-align: center;font-size: 17px;padding-top: 3px;padding-bottom: 3px;box-sizing: border-box;margin-right: 0px;padding-right: 10px;padding-left: 10px;color: inherit;border: 1px solid #ccc;border-radius: 3px;}
.pandi {text-align: center;color: #33cc33;border: 1px solid #33cc33;font-size: 1.25em;}


/* For DTI calculator end */
/* For VA Purchase Calculator and DTI calculator start */
#vapurchase, #varefinance {padding-left: 11px;color: #2C3E50;box-sizing: border-box;font-size: 17px;margin-left: auto;margin-right: auto;margin-top: 35px;border-collapse: collapse;
}
#vapurchase input, #vapurchase select, #varefinance input, #varefinance select {width: 100%;text-align: center;font-size: 17px;padding-top: 3px;padding-bottom: 3px;box-sizing: border-box;margin-right: 0px;padding-right: 10px;padding-left: 10px;color: inherit;border: 1px solid #ccc;border-radius: 3px;background-color: #EBEBEB;}
#vapurchase tr:hover {background-color:#d4e3e5;}
#varefinance tr:hover {background-color:#d4e3e5;}

/* End VA Purchase Calculator and DTI calculator */

/* Bottom Nav */
.bottomnav {
    color: #14344E;
    background-color: #70A5CC;
    font-size: 0.9em;
    line-height: 17px;
}
.bottomnav a {
    color: #FFFFFF;
    text-decoration: none;
}
.bottomnav a:hover {
    color: #25597F;
    text-decoration: underline;
}
/* End Bottom Nav */
/* Footer */
.footer {
    color: #959595;
     background-color: #25597F;
}
.footer a {
    color: #FFFFFF;
    text-decoration: none;
}
.footer a:hover {
    color: #96C3E4;
    text-decoration: underline;
}
.social-links{}
.social-links a{text-decoration:none;padding-left:1.0rem;}
.social-links a:hover{color:#34D566;text-decoration:underline;}
/* End Footer */

/* Colors */
.lightblue{background-color: rgba(37,89,127,0.55);}
.lighttan{background-color:#f5f1ed;}
.tan{background-color:#D89D73;}
.powderblue{background-color:#bdd4dc;}
.greybackground {background-color: #f6f6f6;}
.jumbotronbground {background-color: #e9ecef;}
.green_heading {color: #19b300;font-weight: normal;}
.darkblue{background-color:#417BA2;}

.darkblue1{background-color:#184768;}
.darkblue1{background-color:#184768;}
.darkblue2{background-color:#27628c;}
.darkblue3{background-color:#3384bd;}
.bluetoh{background-color:#25597F;}

.blackletters{color: #000000;}
/* End Colors */

/*
********************************
       Text Sizes
********************************
*/
.smallerletters {
    font-size: 0.85rem;
}
.size70 {
    font-size: 0.70rem;
    font-family: "Graphik Light";
}
.size75 {
    font-size: 0.75rem;
    font-family: "Graphik Light";
}
.size85 {
    font-size: 0.85rem;
    font-family: "Graphik Light";
}
.size90 {
    font-size: 0.9rem;
    font-family: "Graphik Light";
}
.size115 {
    font-family: "Graphik Light";
    font-style: normal;
    font-size: 1.15rem;
    
}
.size125 {
    font-family: "Graphik Light";
    font-size: 1.25rem;  
}
.size145 {
    font-family: "Graphik Light";
    font-style: normal;
    font-size: 1.45rem;
}
.size150 {
    font-family: "Graphik Light";
    font-style: normal;
    font-size: 1.50rem;
}
.size1875 {
    font-family: "Graphik Light";
    font-size: 1.875rem;
}
.size225 {
    font-family: "Graphik Light";
    font-style: normal;
    font-size: 2.25rem;
}
.size275 {
    font-family: "Graphik Light";
    font-style: normal;
    font-size: 2.75rem;
}
/*
********************************
   End Text Sizes
********************************
*/

.nobullets {
  list-style-type: none;
	
}




/* Removes underline from links */
.nounderline:hover {
    text-decoration: none;
}
/* End Removes underline from links */

/* ********************************
  Start CSS style for multi-form
******************************** */
#next-10, #form_part15, #form_part20, #next-20, #form_part30, #next-30, #form_part40, #form_part50, #form_part60, #final {
	display: none;
}
.smak input[type="radio"] {
    display: none;
}
.smak label {
    cursor: pointer;
    padding: 8px;
    color: #3484bd;
    border: 1px solid #3484bd;
    background-color: #ffffff;
    font-size: 1.125em;
    width: 300px;
    height: 45px;
    font-weight: 600;
    text-align: center;
    border-radius: 10px;
	/* added next 3 */
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.smak label:hover {
	color: #FFFFFF;
    background-color: #3ca84a;
    border: 1px solid #3ca84a;
	} 
.smak input[type="radio"]:checked+label {
	
    width: 300px;
    height: 45px;
    font-weight: 600;
    text-align: center;
    font-size: 1.125em;
    color: #FFFFFF;
    background-color: #3ca84a;
    border: 1px solid #3ca84a;
}
/* End CSS style for multi-form */
/* Start of Bottom Navigation */

#snavterry ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}
#snavterry ul li {
    margin: 1em 0;
}
.snavterry-head {
    font-size: 1.2em;
    font-weight: 400;
    padding-bottom: 0px;
}
.sepbnav{
    margin-bottom: 2em;    
	}	
/* End of Bottom Navigation */



@media only screen and (min-width:0px) and (max-width:767.98px) {

	
.snavterry-head {
    font-size: 1.2em;
    font-weight: 400;
    background-color: #ffffff;
    padding-top: 10px;
    padding-left: 10px;
    border-radius: 7px;
    padding-bottom: 10px;
    cursor: pointer;
    border-bottom: 1px solid #5F5F5F;
}	
	#snavterry ul li {
    margin: .2em 0;
    padding-right: 0;
    padding-left: 21px;
    padding-bottom: 15px;
    font-size: 1rem;
}
	#snavterry ul li a {
    color: #007bff;
    }
	#snavterry ul li a:hover{
    color: #2081bf;
    text-decoration: underline;

	}
	.sepbnav{
    margin-bottom: 6px;
    background-color: #FFFFFF;
	border-radius: 10px;
	font-size: 1em;
    font-weight: normal;
	}
	
	/* Plus Minus
	.sepbnav .snavterry-head:after{
    font-family: 'FontAwsome';
    content: "-";
    float: right;
    padding-right: 25px;
    font-size: 2rem;
	}
	.sepbnav .snavterry-head.collapsed:after{
		font-family: 'FontAwsome';
		content: "+";
		font-size: 1.5rem;
	} 
	*/
	.sepbnav .snavterry-head:after {
    font-family: 'FontAwesome';
    content: "\f068";
    float: right;
    padding-right: 25px;
    color: #2d5b7e;
	}

	.sepbnav .snavterry-head.collapsed:after {
	content: "\f067"; 
	}
	
	
}