@charset "utf-8";
/* CSS Document */
html,body{
	margin:0;
	padding:0;
	height:720px;
	overflow-y:hidden;
}
_:-ms-lang(x), html,body { overflow-x:hidden; }
body{
	font-size:16px;
	font-family: 'Lato', sans-serif;
	font-weight:700;
	/* background:#56637F; */
	background-color:#C5C5C5;
	/* background-image: linear-gradient(135deg, #9CA4B4, #828489); */
	background-repeat:no-repeat;
	color:white;
}
#modal{
	display:none;
	position:fixed;
	top:0;
	left:0;
	z-index:10;
	width:100%;
	height:100%;
	background-color:#ffffff;
	background-color:rgba(255,255,255,0.80);
}
.fixedwidth {
	/* max-width:1024px; */
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	padding:43px 2% 0; 
}
#calculatorWrap{
	max-width:1200px;
	width:100%;
	margin:0 auto;
	box-sizing:border-box;
	background-color:#FFFFFF;
	border:15px solid #3D7FB1;
	border-top-left-radius:30px;
	border-top-right-radius:75px;
	border-bottom-right-radius:30px;
	border-bottom-left-radius:75px;
}
h1{
	display:inline;
	color: #FFFFFF;
	background-color:#3D7FB1;
    font-size: 2.2em;
	font-family: 'Montserrat', sans-serif;
	font-weight:600;
	text-align:center;
	padding:5px 30px;
	border-radius:40px;
	position:relative;
	left:1%;
	top:-28px;
	-webkit-transform:translate(-50%,0);
	transform:translate(-50%,0);
}
h1 span{ color:#F89845; font-weight:700; }
#mainCalcSection,#intSavingsSection,#altShortenSection{
	margin:-10px 0 35px 45px;
}
.row,.pop-up-row,.title-row{
	display:inline-block;
	min-width:490px;
	font-size:1.5em;
	margin-top:10px;
	padding:6px 6px 6px 10px;
	border-top-left-radius:8px;
	border-top-right-radius:30px;
	border-bottom-right-radius:30px;
	border-bottom-left-radius:8px;
	/* transition-duration:0.3s; */
	width:49%;
}
.line-row{ line-height:1.5em; }
.row span,.pop-up-row span,.change-data{
	float:right;
	font-weight:500;
	font-size:1em;
	font-family:'Lato', sans-serif;
	margin-right:20px;
}
.orange-row{ background-color:#F89845; }
.blue-row{ background-color:#3D7FB1; }
#freeNewTerm,#freeCurrPnI{ margin-bottom:10px; }
.change-data{
	width:160px;
	background:rgba(255,255,255,0.3);
	padding:2px 0;
	margin-right:0 !important;
	text-align:center;
	color:white;
	outline:none;
	border:1.5px dotted transparent;
	border-top-left-radius:8px;
	border-top-right-radius:30px;
	border-bottom-right-radius:30px;
	border-bottom-left-radius:8px;
	transition-duration:0.3s;
}
.change-data:hover{
	border:1.5px dotted white;
	opacity:0.8;
}
#graphSection{
	float:right;
	width:42%;
	position:relative;
	top:-490px;
}
.outer-graph{ display:inline-block; overflow:initial !important; }
.bar-graph,.bar-year{ font-size:1.1em; padding:10px; }
.bar-graph{	display:inline-block; white-space:nowrap; }
.orange-text{ color:#F89845; }
#outerNew{ margin-top:19.2px; }
.blue-text{ color:#3D7FB1; }
#highchartGraph{ 
	width:100%;
	height:225px;
	margin-left:-13px;
}
.hc-tip{
	margin:-5px -6px -6px -5px;
	padding:5px;
	color:white;
	font-family: 'Lato', sans-serif;
}
.graph-text{
	margin-top:-37px;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
}
.graph-text,.graph-val{ 
	font-size:1.2em;
}
.int-savings{
	cursor:pointer;
	transition-duration:0.75s;
	transition-property:opacity;
	position:relative;
	z-index:8;
}
.int-savings:hover{ opacity:0.7; }
.rotate-cog{
	transition-duration:1s;
	transition-property:transform;
	position:relative;
	top:1px;
}
.int-savings:hover .rotate-cog{
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.graph-val{ position:relative; z-index:8; }
.blue-val{ float:right; margin-right:30px; }
.slider-container{ margin-top:15px; }
.time-slider-text{
	font-size:1.2em;
	font-weight:700;
}
#newTermSlider,#rateReturnSlider{ padding-right:32px; }
#newTermSlider{ width:92%; margin-top:20px; margin-left:1%; }
.alt-btn{
	float:right;
	margin:8px 20px 0 0;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	font-size:1.4em;
	cursor:pointer;
	transition-duration:0.75s;
	transition-property:color:
}
.alt-btn:hover{ color:#F89845; }
.alt-image{
	transition-duration:0.75s;
	transition-property:transform;
	position:relative;
	top:13px;
}
.alt-btn:hover .alt-image{
	-webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
	transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
	-webkit-filter:hue-rotate(160deg) saturate(1.6) brightness(160%);
	filter:hue-rotate(160deg) saturate(1.6) brightness(160%);
}

#intSavingsSection,#altShortenSection{ display:none; }
#intSavingsSection,#altShortenSection{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	background-color: #FFFFFF;
	border: 15px solid #F89845;
	border-top-left-radius: 30px;
	border-top-right-radius: 75px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 75px;
	position:absolute;
	/* top:100px; */
	left:50%;
	-webkit-transform:translateX(-50%);
	transform:translateX(-50%);
	z-index:10;
}
/* #intSavingsSection{ border-color:#3D7FB1; } */
.inner-section{
	margin:20px 0 35px 30px;
}
.savings-title{
	font-size:1.5em;
	margin-bottom:15px;
}
#intSavingsSection .pop-up-row{
	margin-left:4%;
}
.pop-up-row{ width:80%; }
.title-row{
	width:70%;
	padding: 10px 0 10px 20px;
	font-size: 1.7em;
	border-radius: 20px;
	border-top-left-radius: 8px;
}
#altShortenSection .pop-up-row{
	margin-left:10%;
}
#altShortenSection p{
	margin:5px 0 15px 7%;
	font-size:1.4em;
}
#freeExtraPnI1{ margin-bottom:10px; }
#rateReturnSlider{ width:52%; margin:35px 0 25px 25%; }
.close-section{
	float:right;
	font-size:5em;
	transition-duration:0.75s;
	transition-property:transform;
	cursor:pointer;
	position:absolute;
	top:10px;
	right:30px;
}
.close-section:hover{
	-webkit-transform:rotate(180deg);
	transform:rotate(180deg);
	-webkit-transform-origin:50% 51%;
	transform-origin:50% 51%;
}
#nobranding{ display:inline-block; position:relative; bottom:35px; }
/* ###################### TOOLTIP ################################### */
#tooltip
{
    text-align: center;
    color: #3D7FB1;
    background: #F2F2F2;
    position: absolute;
    z-index: 100;
    border-radius:12px;
    padding: 15px;
    box-shadow: 0px 3px 1px 0px rgba(0,0,0,0.49);
	transition:all .3s ease;
	border:2px solid #F89845;
	font-size:0.8em;
}

    #tooltip:after /* triangle decoration */
    {
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #F89845;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        margin-left: -10px;
    }

        #tooltip.top:after
        {
            border-top-color: transparent;
            border-bottom: 10px solid #F89845;
            top: -20px;
            bottom: auto;
			z-index:100;
        }

        #tooltip.left:after
        {
            left: 10px;
            margin: 0;
        }

        #tooltip.right:after
        {
            right: 10px;
            left: auto;
            margin: 0;
        }

/* ###################################################### STYLES BY AZIZ ############################################################# */

.bottom_btn_div_icons{ width:200px;	margin: 0px auto; text-align:center;	padding: 7px 0px 7px 0px; }
.button-icon { text-align: center; text-decoration: none;	display:inline-block;	cursor: pointer; padding:8px;	color:#535b5d; }
.button-icon:hover { color: #4dabf7; }
.button-icon:active {	color: #4dabf7; }

/* ######################################################MEDIA QUERIES############################################################# */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	h1{ left:23%; }
 }
 @media only screen and (max-width: 1110px){
	 .graph-text span{ font-size:0.9em; }
	 #mainCalcSection{ margin:-10px 0 35px 25px; }
 }
 @media only screen and (max-width: 1024px){
	 html,body{ height:1180px; }
	 .fixedwidth{ padding:43px 0 0; }
	 #calculatorWrap{ max-width:800px; }
	 #mainCalcSection{ margin:-10px 0 35px 45px; }
	 .row{ width:92%; }
	 #graphSection{ float:none; width:92%; min-width:320px; margin:-10px 0 75px 45px; top:auto; }
	 #highchartGraph{ width:97%; }
	 .blue-val{ margin-right:50px; }
	 #intSavingsSection .pop-up-row,#altShortenSection .pop-up-row{ min-width:320px; }
	 .close-section{ font-size:3em; }
 }
 @media only screen and (max-width: 768px){
	 .row,#graphSection{ width:90%; }
	 #intSavingsSection .pop-up-row{ width:87%; }
	 #altShortenSection p{ margin:5px 0 15px 3%; font-size:1.3em; }
	 #altShortenSection .pop-up-row{ margin-left:6%; width:87%; }
 }
 @media only screen and (max-width: 700px){
	 #intSavingsSection .pop-up-row,#altShortenSection .pop-up-row{ margin-left:0; width:92%; font-size:1em; }
	 .title-row{ min-width:220px; font-size:1.3em; padding-left:10px; }
	 #altShortenSection p{ margin:5px 0 15px; font-size:1em; }
 }
 @media only screen and (max-width: 600px){
	 #calculatorWrap,#intSavingsSection,#altShortenSection{ border-width:6px; border-radius:30px; }
	 h1{ display:inline-block; left:50%; top:-53px; font-size:2em; }
	 #mainCalcSection{ margin:-60px 10px 35px; }
	 .row{ min-width:320px; width:97%; }
	 #graphSection{ width:99%; margin:-10px 10px 75px; }
	 .blue-val{ margin-right:40px; }
	 .inner-section{ margin:20px 0 35px 10px; }
	 .close-section{ top:5px; right:10px; }
	 #intSavingsSection .pop-up-row{ width:96%; }
 }
 @media only screen and (max-width: 520px){
	 html,body{ height:1030px; }
	 .row,.pop-up-row{ font-size:1em; line-height:1.5em; margin-top:5px; padding:3px 6px 3px 10px; }
	 .br-bar{ content:''; }
	 #intSavingsSection .pop-up-row,#altShortenSection .pop-up-row{ width:94%; }
 }
 @media only screen and (max-width: 480px){
	 html,body{ height:1090px; }
	 .change-data{ width:100px; }
	 #freeNewTerm1{ margin-bottom:-15px; }
	 .bar-year{ display:block; }
	 #outerNew{ margin-top:0; }
	 .blue-val{ margin-right:30px; }
	 #highchartGraph{ width:99%; }
	 #rateReturnSlider{ width:76%; margin:35px 0 25px 10%; }
 }
 @media only screen and (max-width: 420px){
	 #intSavingsSection .pop-up-row,#altShortenSection .pop-up-row{ min-width:296px; font-size:0.92em; }
	 .title-row{}
 }
 @media only screen and (max-width: 400px){
	 .graph-text, .graph-val{ font-size:1em; }
	 #intSavingsSection .pop-up-row,#altShortenSection .pop-up-row{ font-size:0.88em; }
 }
 @media only screen and (max-width: 360px){
	 html,body{ overflow-x:hidden; height:1050px; }
	 #calculatorWrap,#intSavingsSection,#altShortenSection{ border-width:2px; }
	 #mainCalcSection{ margin:-60px 3px 35px; }
	 .row{ min-width:296px; width:94.5%; font-size:0.92em; }
	 #graphSection{ margin:-10px 3px 75px; }
	 .graph-text, .graph-val{ font-size:0.9em; }
	 .inner-section{ margin:20px 0 35px 3px; }
	 #intSavingsSection .pop-up-row,#altShortenSection .pop-up-row{ width:94.5%; font-size:0.8em; }
	 #rateReturnSlider{ width:76%; }
 }