@import url(//fonts.googleapis.com/css?family=Roboto:,100,300,400,500,700,900,300italic);


/* Basic
----------------------------------------------------------------------------------------------------*/
p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure { margin-bottom: 15px; }
input{ -webkit-appearance: none; border-radius: 0;}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }

.clearfix:after { clear: both; }

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix { zoom: 1; }


/* Common
----------------------------------------------------------------------------------------------------*/
* { position: relative; outline: none; }
.inner { position: static; }
.scrollto { }
.localscroll { }
img { border: 0; }
strong { font-weight: 700; }
em { font-style: normal; }
 
/* Platforms */
.visible-phone { }
.visible-tablet { }
.visible-desktop { }
.hidden-phone { }
.hidden-tablet { }
.hidden-desktop { }

/* Layout */
.mt1 { margin-top: 10px; }
.mt2 { margin-top: 20px; }
.mt3 { margin-top: 30px; }
.mt4 { margin-top: 40px; }
.ml1 { margin-left: 10px; }
.ml2 { margin-left: 20px; }
.ml3 { margin-left: 30px; }
.ml4 { margin-left: 40px; }
.mb1 { margin-bottom: 10px; top: 0px; left: 0px; }
.mb2 { margin-bottom: 20px; top: 0px; left: 0px; }
.mb3 { margin-bottom: 30px; top: 0px; left: 0px; }
.mb4 { margin-bottom: 40px; top: 0px; left: 0px; }
.pt1 { padding-top: 10px; }
.pt2 { padding-top: 20px; }
.pb1 { padding-bottom: 10px; }
.pb2 { padding-bottom: 20px; }
.bb1 { border-bottom: 1px #ccc solid; }
.bt1 { border-top: 1px #ccc solid; }
.bl1 { border-left: 1px #ccc solid; }
.br1 { border-right: 1px #ccc solid; }

.alignCenter { margin-left: auto; margin-right: auto; }
.textAlignCenter { text-align: center; }
.textAlignRight { text-align: right; }
.left { float: left; }
.right { float: right; }
.upper-case { text-transform: uppercase; }
.lower-case { text-transform: lowercase; }
.left-col,
.right-col { float: left; }
.block { float: left; width: 100%; }
.row:before, .row:after { content: ""; display: table; }
.row:after { clear: both; }


/*grid_percent*/
.grid_percent,
.grid_left,
.grid_right { display: inline; float: left; position: relative; margin-left: 0; margin-right: 0; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
.grid_percent.right { float: right; }
.grid_percent.d1 { width: 100%; }
.grid_percent.d2 { width: 50%; *width: 49.9%; }
.grid_percent.d3 { width: 33.3%; *width: 33.3%; }
.grid_percent.d4 { width: 25%; *width: 24.9%; }
.grid_percent.d5 { width: 20%; *width: 19.9%; }

.grid_percent.p25 { width: 25%; *width: 24.9%; }
.grid_percent.p50 { width: 50%; *width: 49.8%; }
.grid_percent.p75 { width: 75%; *width: 74.9%; }

/*Multiple Columns Text*/
.two-col { -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; }
.three-col { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; }
/* transition*/  
.transition-background-color a,
.transition-background-color select { transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; -moz-transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */ -webkit-transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */ -o-transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */ }
.transition-all { transition: all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; -moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */ -webkit-transition: all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */ -o-transition: all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */ }
.transition-width { transition: width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; -moz-transition: width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */ -webkit-transition: width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */ -o-transition: width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */ }
.transition-height { transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; -moz-transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */ -webkit-transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */ -o-transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */ }

::-webkit-input-placeholder { color: #ccc; }
::-moz-placeholder { color: #ccc; }
/* firefox 19+ */
:-ms-input-placeholder { color: #ccc; }
/* ie */
input:-moz-placeholder { color: #ccc; }


/* -------------------------------------------------------------------------------------------------------------------------------------------- oversixty */
/*General*/
html { overflow-x: hidden; }
body { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.6em; background-color: transparent; color: #455560; -webkit-font-smoothing: antialiased; overflow-x: hidden; font-weight: 400; font-style: normal; }
h1, h2, h3, h4, h5, h6 { }
h1 { font-size: 82px; line-height: 70px; font-weight: 900; text-transform: uppercase; }
h2 { font-size: 34px; font-weight: 300; text-transform: uppercase; text-align: center; margin-bottom: 40px; line-height: 1.2em; }
h3 { font-size: 21px; text-transform: uppercase; font-weight: 700; margin-top: 40px; margin-bottom: 30px; }

a { text-decoration: none; }
a:hover { cursor: pointer; transition: color .2s,background-color .2s; -moz-transition: color .2s,background-color .2s; /* Firefox 4 */ -webkit-transition: color .2s,background-color .2s; /* Safari and Chrome */ -o-transition: color .2s,background-color .2s; /* Opera */ }



.check-list li { list-style-image: url(../images/ico-check.png); margin-left: 35px; font-size: 18px; font-weight: 500; margin-bottom: 10px; padding-left: 10px; }
blockquote { font-size: 21px; font-style: italic; font-weight: 300; line-height: 1.4em; padding-right: 40px; margin-bottom: 20px; }
cite { font-size: 21px; font-weight: 400; line-height: 1.4em; }

.call-us { display: inline; float: right; }
.call-us h6 { color: #455560; text-align: right; line-height: 1em; margin-bottom: 10px; }
.call-us a { font-size: 34px; font-weight: 900; color: #455560; }


/*form style*/
select { border: 1px solid #455560; border-radius: 3px; height: 30px; }
input[type=radio]:not(old) { width: 21px; margin: 0; padding: 0; opacity: 0; }
input[type=radio] + i { content: ""; display: inline-block; background: url('../images/radio-off.png') no-repeat 0 0; line-height: 21px; height: 21px; width: 21px; margin-left: -21px; top: 4px; margin-right: 10px; }
input[type=radio]:checked + i { background: url('../images/radio-on.png') no-repeat 0 0; }

input.text {
    background:#fff;
    border:1px solid #455560;
    border-radius:3px;
    line-height:50px;
    padding:0 1em;
    color:#455560;
    height:50px;
}
input.number { padding-right: 0 !important;} 
input.have-pre{padding-left:30px;
               width:220px;
               -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
.inp-row{margin-bottom:15px; float: left; width: 100%;}
.inp-wrap{ min-height:52px; float:left; width:100%;}
.inp-wrap .pre{ position:absolute; left:10px; top:12px; font-weight:500;}
.inp-wrap .unit{ margin-left:-40px; font-weight:500;}
.calculator .inp-wrap .unit{ margin-left:-30px;}
.radio-wrap{ font-weight: 400;
margin-top: 10px;
float: left;
margin-right: 20px;
cursor:pointer;
}
.label{ font:16px; text-transform:uppercase; font-weight:500; width:100%; margin-bottom:5px; float:left; }



/*table*/
table { width: 100%; float: left; }
table th { font-size: 16px; text-transform: uppercase; font-weight: 700; }
table th:last-child,
table td:last-child { text-align: right; padding-right: 10px; background-color: #f6f6cf; font-weight: 700; }
table th,
table td { border-bottom: 1px solid #455560; padding: 10px 0; }
table td:nth-child(2) { color: #888; }


/*result-page*/
.result-page h2 { text-align: left; margin-bottom: 20px; margin-top: 40px; }
#repayments { background-color: #d4d00f; font-size: 70px; text-align: center; display: block; height: 143px; float: left; width: 100%; border-radius: 5px; height: 150px; }
#repayments .unit { position: absolute; bottom: 20px; font-size: 16px; margin: 0; width: 100%; position: absolute; bottom: 15px; left: 0; }
#repayments .repayments-amount { margin-top: 50px; float: left; width: 100%; font-weight: 500; }

.saving-chart { background-color: #eceeef; border-radius: 5px; padding: 20px 20px 0; display: block; height: 392px; }
.saving-chart .inner { }
.saving-chart .savings-amount { color: #dd0000; font-size: 21px; font-weight: 700; }
.saving-chart .chart-bar { position: absolute; bottom: 0; text-align: center; }
.saving-chart .chart-bar h6 { font-weight: 700; font-size: 16px; text-transform: uppercase; line-height: 1em; }
.saving-chart .bar { background-color: #455560; width: 120px; padding: 10px; box-sizing: border-box; text-align: center;  font-size: 12px; color: #455560; overflow: hidden; transition: all 1s cubic-bezier(0.8, 0, 0.2, 1) 1s; -moz-transition: all 1s cubic-bezier(0.8, 0, 0.2, 1) 1s; /* Firefox 4 */ -webkit-transition: all 2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */ -o-transition: all 1s cubic-bezier(0.8, 0, 0.2, 1) 1s; /* Opera */ }
.saving-chart .bar p { margin-bottom: 5px; }
.saving-chart .bar .price { font-weight: 700; font-size: 21px; }
.saving-chart .chart-bar-novated { right: 20px; }
.saving-chart .chart-bar-novated .bar { background-color: #d4d00f; }
.saving-chart .chart-bar-loan .bar { color: #fff; }
.saving-chart .bar { height: 130px; }
.saving-chart .chart-bar-novated .bar { height: 220px; }

.uibutton.reload img{ top:4px; margin-right:10px; position:relative;}

 
/*hero-section*/
.hero-section { background: url(../images/hero.jpg) 50% 0%; background-size: cover; padding-bottom: 100px; }
.hero-section h1 { color: #fff; text-shadow: 2px 2px 6px #000; }
.hero-section .left-col { width: calc(100% - 350px); float: left; }
.hero-section .left-col .inner { padding-right: 20px; }
.hero-section .right-col { width: 350px; }
.hero-section .logo-row { padding: 30px 0; }
.logo { float: left; width: 227px; }
.logo img { width: 100%; }

.calculator { width: 100%; background-color: #fff; float: left; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; }
.calculator .title-row { background-color: #455560; }
.calculator .title-row h6 { font-size: 16px; color: #fff; margin-bottom: 0; }
.calculator .title-row h6 img { margin-right: 10px; top: 5px; }
.calculator .title-row .inner { text-align: center; padding: 10px 0 15px; }
.calculator .inp-row { width: 100%; float: left; border-bottom: 1px solid #d9dce0; margin-bottom: 0; min-height: none; }
.calculator .inp-row.last { border-bottom: 0 solid #d9dce0; }
.calculator .inp-row .inner { padding: 10px 20px 0; }
.calculator .label { font-size: 16px; font-weight: 500; text-transform: uppercase; color: #455560; float: left; width: 100%; margin-bottom: 12px; }
.calculator .pre { position: absolute; left: 10px; font-weight: 700; top: 4px; font-size: 16px; }
.calculator .slide-wrap { display: inline; float: left; width: 60%; }
.calculator .inp-wrap { display: inline; float: right; margin-top: 7px; width: auto; }
.calculator input.text { height: 30px; width: 110px; text-align: center; font-size: 14px; color: #455560; padding: 0; line-height: 30px; }
.calculator #kilometers { text-align: left; padding-left: 10px; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
.calculator .ui-slider { float: left; width: 90%; height: 3px; background: #d4d00f; border: none; }
.calculator .ui-slider .ui-slider-handle { width: 34px; height: 15px; background-image: url(../images/ico-scalebar.png); border: none !important; }
.calculator .ui-slider-horizontal .ui-slider-handle { top: -6px; cursor: pointer; }
.calculator .radio-wrap { margin-right: 20px; font-size: 16px; cursor: pointer; margin-top: 0; margin-bottom: 10px; }
.calculator .radio-wrap:last-child { margin-right: 0; }
.calculator .business-use-wrap .label { margin-bottom: 5px; }
.calculator .detail-row input.text { width: 100%; margin-bottom: 10px; text-align: left; padding: 0 10px; box-sizing: border-box; }
.calculator .uibutton { width: 100%; }
.calculator .submit-row .inner { padding: 20px; }
.calculator #state { width: 150px; margin-right: 10px; float: left; }
.calculator #postcode { width: 150px; float: left; }
.calculator select { font-size: 14px; }

/*tabs*/
.ui-widget { font-family: 'Roboto', sans-serif; }
.ui-tabs { background: none !important; border: none; margin-top: -60px; }
.ui-tabs .ui-widget-header { background: none; border: none; }
.ui-tabs .ui-tabs-nav { padding: 0; top: -10px; }
.ui-tabs .ui-tabs-nav li { width: 307px; margin-right: 7px; border-top-left-radius: 5px; border-top-right-radius: 5px; }
.ui-tabs .ui-tabs-nav li.last { margin-right: 0; }
.ui-tabs .ui-tabs-nav li.first .ui-tabs-anchor { padding-top: 15px; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { text-align: center; font-size: 21px; font-weight: 700; padding: 12px 0; width: 100%; height: 45px; color: #455560; line-height: 1em; padding-top: 25px; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: transparent url(../images/white50.png); border: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { background-color: #fff; }
.ui-widget-content { color: #455560; }
.ui-tabs .ui-tabs-panel { padding-left: 0; padding-right: 0; float: left; width: 100%; box-sizing: border-box; padding: 40px 0; }
.img-what { margin-top: 100px; float: right; }

.step-col { text-align: center; }
.step-col p { font-size: 14px; }
.step-col h3 { height: 40px; }
.step-col .step-img { height: 90px; }

.why-col { margin-bottom: 60px; }
.why-col h3 { margin-top: 0; }
.why-col .why-text { float: left; width: 60%; padding-right: 5%; }
.why-col .why-img { float: right; width: 35%; text-align: right; }
.why-col.second .why-text { float: right; padding-right: 0; padding-left: 5%; }
.why-col.second .why-img { float: left; text-align: left; }


/*Calculate your savings now*/
.calculate-your-savings-now { display: block; text-align: center; margin-bottom: 60px; }
.calculate-your-savings-now p { font-weight: 500; font-size: 18px; }
.calculate-your-savings-now .grid_12 { background-color: #eeeff0; }
.calculate-your-savings-now .inner { padding: 30px; }


/*testimonial*/
.testimonial { background-color: #eeeff0; padding: 80px 0; border-top: 1px solid #ccd0d3; }
.testimonial-img-wrap { text-align: center; }


/*contact-block*/
.contact-block{ background-color:#6a7780;  }
.contact-block .inner{ padding:30px 0; float:left;  }
.contact-block h3{ margin:0; float:left; margin-top:10px; color:#fff; font-weight:500;}
.contact-block .uibutton{ float:right; width:265px;}


/*footer*/
.footer { background-color: #455560; }
.footer .inner { padding: 20px 0; float: left; }
.footer p { text-align: right; color: #d2d4d7; font-size: 14px; margin-top: 20px; }
.footer .logo-footer { margin-top: 10px; float: left; }


/*header-section*/
.header-seciton { padding: 20px 0; }



/*Hide form desktop*/
.ui-tabs-panel .calculate-your-savings-now{ display:none;}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Big screen 1600*/
@media (min-width:1600px) {
    .hero-section { background: url(../images/hero.jpg) 50% 20%; background-size: cover; }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Mobile 767*/
@media (max-width: 767px) {  
    * { box-sizing: border-box; }    
    input.text { width: 100%; }
    select { width: 100% !important; }
    .row { float: left; width: 100%; }
    h2 { margin-bottom: 20px; }
    h3 { text-align: center; }
    .left-col,
    .right-col { width: 100% !important; float: none; }
    div .uibutton { width:100%; margin-bottom:20px;}


    .hero-section h1 { display: none; }
    .hero-section { background: none; padding-bottom: 0; }
    .hero-section .logo-row { padding: 10px 0; }
    .hero-section .left-col {  padding: 0; background-color:#fff; position:fixed; top:0; left:0;z-index:999; border-bottom:#ccc 1px solid;}
    .hero-section .left-col .inner{ padding:0 4%;}
    .hero-section .right-col { margin-top:85px;}
    .logo { width: 30%; float: left; }
    .call-us { width: 70%; float: right; text-align: right; }
    .call-us h6 { display: none; }
    .call-us a { font-size: 18px; text-align: right; }
    .logo img { width: 120px; }

    .calculator { border-radius: 5px; border: 1px solid #455560; }
    .calculator .inp-row .inner { width: auto; float: none; padding: 10px; }
    .calculator .business-use-wrap { float: left; }
    .calculator input.text { width: 95px; }
    .calculator .label { font-weight: 700; font-size: 14px; }
    .calculator #state { width: calc(50% - 5px); }
    .calculator #postcode { width: calc(50% - 5px); }
    .calculator .slide-wrap { width: calc(100% - 110px); }
    .calculator .uibutton{margin-bottom:0;}


    .ui-tabs { margin-top: 0; }
    .ui-tabs-nav { display: none; }
    #tabs-2 { background-color: #f2f2f2; }
    .ui-tabs .ui-tabs-panel { display: block !important; padding: 0; border-bottom: 1px solid #ccc; padding: 30px 0; }
    .img-what-wrap { text-align: center; }
    .img-what { margin: auto; float: none; }
    .step-line { display: none; }
    .step-col .step-img { height: auto; padding-bottom: 10px; }
    .step-col h3 { height: auto; }

    .why-col.third { margin-bottom: 0; }
    .why-col .why-text, .why-col .why-img { padding: 0 !important; float: left; width: 100%; }
    .why-col .why-img { float: left; text-align: center !important; width: 100%; }
    .why-col .why-text { margin-bottom: 30px; }
    .why-col.second .why-text { float: left; }

    .calculate-your-savings-now { background-color: #fff; margin-bottom: 0; }
    .calculate-your-savings-now .grid_12 { background-color: #fff; }
    .calculate-your-savings-now .inner { padding: 30px 0; }
    .ui-tabs-panel .calculate-your-savings-now{ border-top:1px solid #ccc; background-color:transparent; display:block;}

    .testimonial { padding: 30px 0; }
    blockquote { padding-right: 0; font-size: 16px; text-align: center; }
    cite { font-size: 16px; text-align: center; width: 100%; float: left; margin-bottom: 20px; }

    .contact-block { text-align: center; }
    .contact-block .uibutton { float: none; margin: auto; margin-top: 20px; }
    .print-btn { display: none; }

    .logo-footer { width: 100%; text-align: center; margin-bottom: 20px; }
    .footer p { text-align: center; line-height: 1.4em; }

    table { font-size: 13px !important; float: none; }
    table th { font-size: 13px; line-height: 1em; }

    .saving-chart { margin-top: 20px; float: left; }
    .saving-chart.on .chart-bar { width: 43%; }
    .saving-chart.on .chart-bar .bar { width: 100%; }

    .result-page{ padding-top:85px;}
    .result-page h2 { margin-top: 0; }
    .result-page .header-seciton { position:fixed; top:0; left:0; border-bottom:1px solid #ccc; padding:10px 0; z-index:999; background-color:#fff; }
}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Big screen 1600*/
@media (max-width:400px) {
    .calculator .label { font-size: 12px; }
}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Mozilla hack*/
@-moz-document url-prefix() { table th:last-child, table td:last-child;
{ background-color: transparent; }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------ IE9 hack*/
.lt-ie10 .hero-section h1{ color:#1c1c1c;}
/* ------------------------------------------------------------------------------------------------------------------------------------------------------ IE8 hack*/
.lt-ie9 .hero-section{ background-repeat:no-repeat;}
.lt-ie9 .hero-section .left-col{ width:590px;}
.lt-ie9 input[type=radio]{ opacity:1; margin-right:10px;}
.lt-ie9 input.text{ height:50px;}
.lt-ie9 .calculator input.text{ height:30px;}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Added by Ben*/
input.error-box, select.error-box { border-color: #f00; }