/*
----------------------------------
  Kiwibank Home Page
----------------------------------

- Latest revision: April 2012
- Structure:

----------------------------------
  Made with love by Springload
  www.springload.co.nz
----------------------------------

*/
/* ------------------------------------------------------------------- *
 |  Include all helper functions here
 |
 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- *
 |  TYPE:           Function
 |  AUTHOR(S):      Frej
 |  DATE CREATED:   2012
 |  DATE UPDATED:   25/09/2012
 |  DESCRIPTION:    Px-to-em function
 |                  Converts a pixel value to em based on a base font size
 |
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------

    .selector{
        font-size: px-to-em(30);
    }

    If element's parent has a different font size from the site's base font size

    .selector_parent{
        font-size: px-to-em(30);

        .selector{
	        font-size: px-to-em(14, 30);
	    }
    }

 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- *
 |  TYPE:           Function
 |  AUTHOR(S):      Frej
 |  DATE CREATED:   10/10/2012
 |  DATE UPDATED:   10/10/2012
 |  DESCRIPTION:    Function to return a value as a percentage
 |					Contrary to SASS' function 'percentage()', this one
 |					rounds DOWN to 2 decimals
 |  
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------

	SCSS:
	-------

	.selector{
		width: percentage-round( 1/3 );
	}

	.selector_2{
		width: percentage-round( 2/3 );
	}

	CSS:
	-------

	.selector{
		width: 33.33%;
	}

	.selector_2{
		width: 66.66%; // not 66.67%
	}

 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- *
 |  TYPE:           Mixin
 |  AUTHOR(S):      Frej
 |  DATE CREATED:   24/09/2012
 |  DATE UPDATED:   24/09/2012
 |  DESCRIPTION:    Border-box mixin
 |                  When used in nested context, i.e. in a media query,
 |                  the styles are printed to the selector. Otherwise they,
 |                  will extend the %clearfix.
 |
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------

    .selector{
        @include border-box;
    }

    If nested in a media query:

    @include media(skinny){
        .selector{
            @include border-box( $in-media-query: true );
        }
    }

 * ------------------------------------------------------------------- */
.banner li,
.banner li figure, .learn-more, figure.squares .squares-cell, figure.squares div.vs, figure.squares .squares-nav, ul.rates li, span.ui_mobile_link, span.ui_mobile_search, span.ui_mobile_login, span.ui_mobile_call,
a.ui_mobile_link,
a.ui_mobile_search,
a.ui_mobile_login,
a.ui_mobile_call {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ------------------------------------------------------------------- *
 |  TYPE:           Mixin
 |  AUTHOR(S):      Frej
 |  DATE CREATED:   24/09/2012
 |  DATE UPDATED:   24/09/2012
 |  DESCRIPTION:    Clearfix mixin
 |                  Based on the micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
 |                  When used in nested context, i.e. in a media query, 
 |                  the styles are printed to the selector. Otherwise they,
 |                  will extend the %clearfix.  
 |  
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------

    .selector{
        @include clearfix;
    }

    If nested in a media query:

    @include media(skinny){
        .selector{
            @include clearfix( $in-media-query: true );
        }
    }

 * ------------------------------------------------------------------- */
.clearfix, .media, figure.squares .squares-table, ul.rates {
  *zoom: 1;
}
.clearfix:before, .media:before, figure.squares .squares-table:before, ul.rates:before, .clearfix:after, .media:after, figure.squares .squares-table:after, ul.rates:after {
  content: " ";
  display: table;
}
.clearfix:after, .media:after, figure.squares .squares-table:after, ul.rates:after {
  clear: both;
}

/* ------------------------------------------------------------------- *
 |  TYPE:           Mixin
 |  AUTHOR(S):      Josh, Frej
 |  DATE CREATED:   2012
 |  DATE UPDATED:   08/01/2013
 |  DESCRIPTION:    Media query mixin.
 |                  polyfill-unsupported-browsers targets IE8 and below based on the conditional
 |                  comment classes in the root of the HTML document.
 |
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------

    .selector{
        @include media( 'mobile-only' ){
            color: hotpink;
        }
    }

    When the selector is inside the media query

    @include media( 'skinny-up', $wrapping-selector: true ){
        .selector{
            color: hotpink;
        }
    }

 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- *
 |  TYPE:           Mixin
 |  AUTHOR(S):      Frej
 |  DATE CREATED:   2012
 |  DATE UPDATED:   25/09/2012
 |  DESCRIPTION:    Conditional background mixin
 |                  For reference: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
 |
 |                  In use this will show different background for desktop and mobile
 |
 |                  Note that if you want to show no background for mobile, 
 |                  you can get away with hiding the parent element with display: none;
 |  
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------



 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- *
 |  TYPE:           Mixin
 |  AUTHOR(S):
 |  DATE CREATED:   2012
 |  DATE UPDATED:   25/09/2012
 |  DESCRIPTION:    Needed for ie7 inline block
  |
 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- *
 |  TYPE:           Mixin
 |  AUTHOR(S):      Josh, Frej, MikeM
 |  DATE CREATED:   18/09/2012
 |  DATE UPDATED:   12/12/2012
 |  DESCRIPTION:    Sprites mixin
 |                  Supports hi-res backgrounds
 |
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------

    STEP 1)
    Creating the sprite (only call once per sprite):

        All options:
        ------------

        @include make-sprite(
                    $folder-name:       'base',
                    $use-retina:        true,
                    $sprite-spacing:    8
                )


        Simple use:
        -----------

        @include make-sprite( $folder-name: 'base', $use-retina: true );


    STEP 2)
    Using the sprite:

        All options:
        ------------

        .box1 {
            @include background-sprite(
                                        $folder-name:   'base',
                                        $image-name:    'icon-mobile-menu',
                                        $offset-x:      0px,
                                        $offset-y:      0px,
                                        $use-retina:    true,
                                        $print-dimensions: false
                                    );
        }

        Simple use:
        -----------

        .box2 {
            @include background-sprite( 'base', 'icon-app-store' );
        }


    SPRITE IMAGE WIDTH & HEIGHT
    ---------------------

    .box1{
        width: sprite-width( 'base', 'icon-app-store' );
        height: sprite-height( 'base', 'icon-app-store' );
    }


 * ------------------------------------------------------------------- */
/* ------------------------------------------------------------- *
    Sprite store
    All generated sprites will be put in this array:
    ( folder name, spacing, sprite-map, sprite-map-retina )
   ------------------------------------------------------------- */
/* ------------------------------------------------------------------- *
 |  TYPE:           Mixin calls
 |  AUTHOR(S):      Frej
 |  DATE CREATED:   20/09/2012
 |  DATE UPDATED:   20/09/2012
 |  DESCRIPTION:    Building sprites.
 |                  Create your new sprites in this document.
 |
 * ------------------------------------------------------------------- *
    EXAMPLE
    -------

    See _mixin-sprites.scss for documentation

 * ------------------------------------------------------------------- */
.testing-sprite-mixin, .learn-more .ui_learn_more_close span, .learn-more .ui_learn_more_close:hover span, #tweets section.tweet b, #tweets section.tweet.even b, #tweets .icon-twitter-blue, #tweets .icon-twitter-load, figure.squares div.vs, ul.list_horizontal a, .ui_mobile_search, .ui_mobile_login, .ui_mobile_call, .ui_read_more span {
  background-image: url('/assets/img/sprites/base/1x.png?1436136279');
  background-repeat: no-repeat;
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin, .learn-more .ui_learn_more_close span, .learn-more .ui_learn_more_close:hover span, #tweets section.tweet b, #tweets section.tweet.even b, #tweets .icon-twitter-blue, #tweets .icon-twitter-load, figure.squares div.vs, ul.list_horizontal a, .ui_mobile_search, .ui_mobile_login, .ui_mobile_call, .ui_read_more span {
    background-image: url('/assets/img/sprites/base/2x.png?1436136279');
    background-size: 56px auto;
  }
}

.testing-sprite-mixin {
  background-image: url('/assets/img/sprites/button/1x.png?1436136279');
  background-repeat: no-repeat;
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin {
    background-image: url('/assets/img/sprites/button/2x.png?1436136279');
    background-size: 46px auto;
  }
}

.testing-sprite-mixin {
  background-image: url('/assets/img/sprites/repeat-x/1x.png?1436136279');
  background-repeat: no-repeat;
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin {
    background-image: url('/assets/img/sprites/repeat-x/2x.png?1436136279');
    background-size: 220px auto;
  }
}

.testing-sprite-mixin {
  background-image: url('/assets/img/sprites/repeat-y/1x.png?1436136279');
  background-repeat: no-repeat;
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin {
    background-image: url('/assets/img/sprites/repeat-y/2x.png?1436136279');
    background-size: 30px auto;
  }
}

.testing-sprite-mixin {
  background-image: url('/assets/img/sprites/video-js/1x.png?1436136279');
  background-repeat: no-repeat;
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin {
    background-image: url('/assets/img/sprites/video-js/2x.png?1436136279');
    background-size: 60px auto;
  }
}

/* ------------------------------------------------------------------- *
 |  PAGE SPRITES
 |  Add all page- or section-specific sprites here
 * ------------------------------------------------------------------- */
.testing-sprite-mixin {
  background-image: url('/assets/img/sprites/mobile-app/1x.png?1436136279');
  background-repeat: no-repeat;
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin {
    background-image: url('/assets/img/sprites/mobile-app/2x.png?1436136279');
    background-size: 157px auto;
  }
}

.testing-sprite-mixin {
  background-position: 0 -1625px;
  background-position: 0 -422px;
  background-position: 0 0;
  background-position: 0 0;
  background-position: 0 -199px;
  background-position: 0 -565px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin {
    background-position: 0 -1865px;
  }
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .testing-sprite-mixin {
    background-position: 0 -469px;
  }
}

.media__image {
  float: left;
}

.media__body {
  overflow: hidden;
}

.media__body > :first-child {
  margin-top: 0;
}

.ui_read_more span {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

#feature_banner {
  position: relative;
  width: 100%;
  margin-top: -55px;
}
#feature_banner .home-arrow {
  position: absolute;
  margin: 0;
}
#feature_banner:hover .home-arrow.css {
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=1);
}
@media screen and (max-width: 600px) {
  #feature_banner {
    display: none;
  }
}
@media screen and (min-width: 708px) {
  #feature_banner {
    position: static;
  }
}
@media screen and (min-width: 1141px) {
  #feature_banner {
    position: relative;
  }
}

.banner {
  z-index: 1;
  position: relative;
  max-width: 100%;
  padding: 0;
  margin-top: -2px;
  font-weight: 300;
  width: 100%;
  min-height: 396px;
  line-height: 1.5em;
  top: -1px;
}
.banner .ui_button {
  font-size: 16px;
}
.banner ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.banner h1 {
  font-size: 1.5em;
  line-height: 1em;
  font-weight: 900;
  margin-top: 1.4em;
}
.banner li {
  padding: 58px 0 0;
  list-style: none;
  min-height: 338px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: none;
}
.banner li .pa {
  font-size: 0.5em;
  margin-left: 0.2em;
}
.banner li p {
  margin-top: 0.2em;
}
.banner li.active {
  display: block;
}
.banner li.active .home-figure {
  opacity: 1;
}
.banner li.relative {
  position: relative;
}
.banner.no-css li {
  background-color: #fff;
}
.banner.no-css li.animating {
  z-index: 10;
}
.banner.css li {
  display: block;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 900ms ease-out, visibility 900ms linear;
  -webkit-transition-delay: 500ms, 500ms;
  -moz-transition: opacity 900ms ease-out 500ms, visibility 900ms linear 500ms;
  -o-transition: opacity 900ms ease-out 500ms, visibility 900ms linear 500ms;
  transition: opacity 900ms ease-out 500ms, visibility 900ms linear 500ms;
}
.banner.css li.active {
  visibility: visible;
  opacity: 1;
}
.banner.css li.active .home-figure {
  -webkit-transition: opacity 900ms ease-in;
  -webkit-transition-delay: 500ms;
  -moz-transition: opacity 900ms ease-in 500ms;
  -o-transition: opacity 900ms ease-in 500ms;
  transition: opacity 900ms ease-in 500ms;
  -webkit-transition-delay: 1300ms;
  -moz-transition-delay: 1300ms;
  -o-transition-delay: 1300ms;
  transition-delay: 1300ms;
}
.banner.css li.active.wait {
  -webkit-transition-delay: 1500ms;
  -moz-transition-delay: 1500ms;
  -o-transition-delay: 1500ms;
  transition-delay: 1500ms;
}
.banner.css li.active.wait .home-figure {
  -webkit-transition-delay: 2500ms;
  -moz-transition-delay: 2500ms;
  -o-transition-delay: 2500ms;
  transition-delay: 2500ms;
}
.banner.css li.wait {
  -webkit-transition-delay: 1700ms;
  -moz-transition-delay: 1700ms;
  -o-transition-delay: 1700ms;
  transition-delay: 1700ms;
}
.banner.css li.wait .home-figure {
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  transition-delay: 1200ms;
}
.banner.css .home-figure {
  opacity: 0;
  -webkit-transition: opacity 500ms ease-out;
  -webkit-transition-delay: 0ms;
  -moz-transition: opacity 500ms ease-out 0ms;
  -o-transition: opacity 500ms ease-out 0ms;
  transition: opacity 500ms ease-out 0ms;
}
.banner .home-figure {
  min-height: 340px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}
@media screen and (min-width: 601px) and (max-width: 959px) {
  .banner .home-figure {
    min-height: 500px;
  }
}

@media screen and (max-width: 960px) {
  ul#banner {
    height: 559px;
  }
}
.learn-more {
  height: 0;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #eee;
}
.learn-more .ui_learn_more_close {
  width: 46px;
  height: 46px;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  padding: 0;
  margin-top: 0;
}
.learn-more .ui_learn_more_close span {
  background-position: 0 -341px;
  width: 46px;
  height: 46px;
  display: block;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .learn-more .ui_learn_more_close span {
    background-position: 0 -263px;
  }
}
.learn-more .ui_learn_more_close:hover span {
  background-position: 0 -287px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .learn-more .ui_learn_more_close:hover span {
    background-position: 0 -317px;
  }
}

.css .learn-more {
  -webkit-transition: all 1200ms cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-delay: 500ms;
  -moz-transition: all 1200ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
  -o-transition: all 1200ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
  transition: all 1200ms cubic-bezier(0.77, 0, 0.175, 1) 500ms;
}
.css .learn-more .ui_learn_more_close span {
  margin-top: -48px;
  -webkit-transition: margin-top 1200ms cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition-delay: 400ms;
  -moz-transition: margin-top 1200ms cubic-bezier(0.77, 0, 0.175, 1) 400ms;
  -o-transition: margin-top 1200ms cubic-bezier(0.77, 0, 0.175, 1) 400ms;
  transition: margin-top 1200ms cubic-bezier(0.77, 0, 0.175, 1) 400ms;
}
.css .learn-more.open {
  height: 520px;
}
.css .learn-more.open .ui_learn_more_close span {
  margin-top: 0;
  -webkit-transition-delay: 400ms;
  -moz-transition-delay: 400ms;
  -o-transition-delay: 400ms;
  transition-delay: 400ms;
}
.css .learn-more.open .fader {
  opacity: 1;
  -webkit-transition-delay: 1600ms;
  -moz-transition-delay: 1600ms;
  -o-transition-delay: 1600ms;
  transition-delay: 1600ms;
}
.css .learn-more .fader {
  opacity: 0;
  -webkit-transition: opacity 1100ms ease-out;
  -webkit-transition-delay: 0ms;
  -moz-transition: opacity 1100ms ease-out 0ms;
  -o-transition: opacity 1100ms ease-out 0ms;
  transition: opacity 1100ms ease-out 0ms;
}

.home-arrow {
  z-index: 3;
}
@media screen and (max-width: 600px) {
  .home-arrow {
    display: none;
  }
}
@media screen and (min-width: 601px) {
  .home-arrow {
    top: 280px;
    position: absolute;
  }
  .home-arrow.previous {
    left: 0;
  }
  .home-arrow.next {
    right: 0;
  }
}
@media screen and (min-width: 961px) {
  .home-arrow {
    position: absolute;
    top: 175px;
    display: block;
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=1);
  }
  .home-arrow.css {
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 500ms ease-out;
    -moz-transition: opacity 500ms ease-out;
    -o-transition: opacity 500ms ease-out;
    transition: opacity 500ms ease-out;
  }
  .home-arrow.next {
    right: 0;
  }
  .home-arrow.previous {
    left: 0;
    display: block;
  }
}

.green {
  background-color: #94c668;
  color: #fff;
}

.light-green {
  background-color: #a2dd68;
}

.lighter-green {
  background-color: #c7e8a4;
}

.olive {
  background-color: #536631;
  color: #fff;
}

.white {
  background: #fff;
}

.mint {
  background-color: #3a7047;
  color: #fff;
}

.light-grey {
  background-color: #f1f1f1;
  color: #333;
}
.light-grey a {
  color: #333;
}

.banner figure.home-figure h1 {
  width: auto;
}

.banner-content {
  font-size: 1.1635em;
}
.banner-content .home-figure {
  border-bottom: solid 1px #eee;
}
.banner-content h1 {
  margin-top: 3em;
  margin-bottom: 0.25em;
}
.banner-content p {
  line-height: 1.55em;
}
@media screen and (min-width: 601px) {
  .banner-content .home-figure img {
    margin: auto;
  }
}
@media screen and (min-width: 961px) {
  .banner-content h1 {
    max-width: 60%;
  }
  .banner-content .home-figure img {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
  }
}

.banner-image-right h1,
.banner-image-right p,
.banner-image-right .banner_buttons {
  padding-left: 45px;
  max-width: 29%;
}
.banner-image-right h1 {
  font-size: 1.73684em;
  margin-top: 45px;
}
.banner-image-right .image_holder img {
  max-width: auto;
}
@media screen and (max-width: 960px) {
  .banner-image-right h1,
  .banner-image-right p,
  .banner-image-right .banner_buttons {
    padding-left: 32px;
    max-width: 90%;
  }
  .banner-image-right h1 {
    margin-top: 29px;
  }
  .banner-image-right .image_holder img {
    max-width: 80%;
  }
}
@media screen and (min-width: 1141px) {
  .banner-image-right h1,
  .banner-image-right p,
  .banner-image-right .banner_buttons {
    padding-left: 81px;
    max-width: 33%;
  }
  .banner-image-right h1 {
    margin-top: 65px;
  }
  .banner-image-right .image_holder img {
    max-width: auto;
  }
}
.banner-image-right .banner_buttons {
  margin-top: 20px;
}
.banner-image-right a.ui_arrow {
  font-size: 0.8125em;
  float: left;
  clear: both;
}
.banner-image-right a.ui_arrow.ui_darker {
  background: #6aa035;
}
.banner-image-right a.ui_arrow.ui_darker:hover {
  background: #77b33b;
}
.banner-image-right .image_holder {
  position: absolute;
  bottom: 0;
  right: 5%;
}
.banner-image-right .image_holder img {
  position: static;
}
html.ie6 .banner-image-right figure.home-figure h1, html.ie7 .banner-image-right figure.home-figure h1 {
  float: none;
}
html.ie6 .banner-image-right .image_holder img, html.ie7 .banner-image-right .image_holder img, html.ie8 .banner-image-right .image_holder img {
  position: static;
}
@media screen and (max-width: 960px) {
  .banner-image-right figure.home-figure {
    max-width: 100%;
  }
  .banner-image-right .image_holder {
    right: auto;
    width: 100%;
    text-align: center;
  }
}

.banner-kwks-independence {
  position: relative;
  height: 332px;
}
.banner-kwks-independence .banner__content {
  width: 23em;
  padding-left: 56px;
  padding-top: 40px;
  padding-left: 3.5rem;
  padding-top: 2.5rem;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-kwks-independence .banner__content {
    padding: 2.5em 0;
    margin: 0 auto;
    height: auto;
    text-align: center;
    width: 80%;
  }
}
.banner-kwks-independence .banner__content--heading {
  -webkit-font-smoothing: antialiased;
  font-size: 2.5em;
  line-height: 1.2;
  /*40px*/
  margin: 0;
  color: #444444;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-kwks-independence .banner__content--heading {
    margin: 0 auto;
    margin-bottom: 0.25em;
  }
}
.banner-kwks-independence .banner__content--copy {
  font-size: 1.125em;
  margin: 0.75em 0 1em;
}
.banner-kwks-independence .banner__content--disclaimer {
  font-size: 0.6875em;
  line-height: 1.5;
  margin: 0;
  position: absolute;
  left: 3.5rem;
  bottom: 32px;
  bottom: 2rem;
}
.banner-kwks-independence .banner__content--disclaimer a {
  color: #444444;
  text-decoration: underline;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-kwks-independence .banner__content--disclaimer {
    position: static;
    margin: 1.5em auto 0;
  }
}
.ie7 .banner-kwks-independence .home-figure {
  width: auto;
}
.banner-kwks-independence .banner--image {
  position: absolute;
}
.banner-kwks-independence .woman {
  right: 50%;
  margin-right: -250px;
  bottom: 0;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-kwks-independence .woman {
    margin-right: -60px;
    width: 30%;
  }
}
.banner-kwks-independence .logo {
  right: 32px;
  bottom: 32px;
  right: 2em;
  bottom: 2em;
}
.banner-kwks-independence figure {
  position: relative;
  height: 100%;
  background-color: #F1EDE5;
  background-repeat: no-repeat;
  background-position: bottom right;
  background-image: url("/assets/img/home/banner-kwks-independence.png");
}
.ie8 .banner-kwks-independence figure {
  background-image: url("/assets/img/home/banner-kwks-independence.png");
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-kwks-independence figure {
    background-size: auto 100%;
  }
}

.banner-independence {
  position: relative;
  height: 332px;
}
.banner-independence .banner--heading {
  -webkit-font-smoothing: antialiased;
  font-size: 2.25em;
  line-height: 1.2;
  /*40px*/
  margin: 0;
  margin-bottom: 0.8em;
  width: 9em !important;
  color: #444444;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence .banner--heading {
    margin: 0 auto;
    width: 13em !important;
    margin-bottom: 0.25em;
  }
}
.ie7 .banner-independence .home-figure {
  width: auto;
}
.banner-independence .banner__content {
  width: 22.5em;
  background: #eff1ec;
  height: 100%;
  padding-left: 3.5em;
  padding-top: 3.5em;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence .banner__content {
    padding: 2.5em 0;
    width: 100%;
    height: auto;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .banner-independence .banner__content .ui_button {
    margin: 0;
    float: left;
  }
  .banner-independence .banner__content br {
    display: none;
  }
  .banner-independence .banner__content .btn-group {
    clear: both;
    text-align: center;
    display: inline-block;
  }
}
.banner-independence figure.v2 {
  height: 100%;
  background-color: #C5C7C4;
  background-repeat: no-repeat;
  background-position: right -2em;
  background-image: url("/assets/img/home/banner-independence-tablet.jpg");
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
  .banner-independence figure.v2 {
    background-size: 61%;
  }
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence figure.v2 {
    background-size: auto;
    background-position-x: center;
    background-position-y: -5.5em;
    background-image: url("/assets/img/home/banner-independence-tablet.jpg");
  }
}
.ie8 .banner-independence figure.v2 {
  background-image: url("/assets/img/home/banner-independence-tablet.jpg");
}
.banner-independence figure {
  height: 100%;
  background-color: #C5C7C4;
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 100%;
  background-image: url("/assets/img/home/banner-independence-gradient.jpg");
}
@media screen and (max-width: 1260px) {
  .banner-independence figure {
    background-size: auto 100%;
  }
}
@media screen and (min-width: 961px) and (max-width: 1200px) {
  .banner-independence figure {
    background-size: cover;
    background-position-x: 35%;
  }
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence figure {
    background-size: auto;
    background-position-x: center;
    background-position-y: 0;
    background-image: url("/assets/img/home/banner-independence-tablet-gradient.jpg");
  }
}
.ie8 .banner-independence figure {
  background-image: url("/assets/img/home/banner-independence-gradient.jpg");
}
.banner-independence figure .banner__content {
  background: transparent;
}
.banner-independence figure .banner--heading {
  color: #fff;
}

.banner-independence-bb {
  position: relative;
  height: 332px;
}
.ie7 .banner-independence-bb .home-figure {
  width: auto;
}
.banner-independence-bb .banner__content {
  padding-left: 3.5em;
  padding-top: 3em;
  color: #fff;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence-bb .banner__content {
    padding: 1.5em 0;
    width: 100%;
    height: auto;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
.banner-independence-bb .banner__content .btn-group {
  clear: both;
  text-align: center;
  display: inline-block;
}
.banner-independence-bb .banner__content .ui_button {
  margin: 0;
  float: left;
}
.banner-independence-bb .banner__content--heading {
  max-width: 450px;
  -webkit-font-smoothing: antialiased;
  font-size: 2.25em;
  line-height: 1.2;
  /*40px*/
  margin: 0;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence-bb .banner__content--heading {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}
.banner-independence-bb .banner__content--copy {
  max-width: 400px;
  font-size: 1.125em;
  line-height: 1.4;
  margin-bottom: 1.5em;
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence-bb .banner__content--copy {
    max-width: 550px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
  }
}
.banner-independence-bb figure {
  height: 100%;
  background-color: #353c2e;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url("/assets/img/home/banner-bb-independence-desktop.jpg");
}
@media only screen and (min-width: 37.5625em) and (max-width: 60em) {
  .banner-independence-bb figure {
    background-image: url("/assets/img/home/banner-bb-independence-tablet.jpg");
    background-position: center top;
  }
}
.ie8 .banner-independence-bb figure {
  background-image: url("/assets/img/home/banner-bb-independence-desktop.jpg");
}

.banner_iphone .home-figure {
  background: #eff1ec;
}
.banner_iphone .home-figure img.mobile_banner_img {
  position: absolute;
  bottom: 0 !important;
  left: 140px;
  width: 56%;
}
.banner_iphone .home-figure img.shadow_line {
  left: auto;
  margin-left: 18%;
  position: relative;
  right: auto;
  top: 0px;
  width: 448px;
  display: block;
}
.banner_iphone .home-figure .banner_info {
  margin: 0 auto;
  display: block;
}
.banner_iphone .home-figure .banner_info h1 {
  margin-top: 1.207em;
  font-weight: 600;
  line-height: 1.2em;
}
.banner_iphone .home-figure .banner_info p {
  margin-bottom: 20px;
}
.banner_iphone .home-figure .banner_info .first:hover {
  text-decoration: none;
}
.banner_iphone .home-figure .banner_info .first img {
  margin-right: 5px;
}

@media screen and (min-width: 601px) {
  .banner_iphone .home-figure {
    background: #eff1ec;
  }
  .banner_iphone .home-figure img.mobile_banner_img {
    position: relative;
    top: 0;
    margin: 0 auto;
    width: 42%;
    padding-left: 70px;
    padding-right: 70px;
    padding-top: 22px;
  }
  .banner_iphone .home-figure .ui_read_more {
    display: inline-block;
  }
  .banner_iphone .home-figure .banner_info {
    margin: 0 auto;
    display: block;
    text-align: center;
    width: 82%;
  }
  .banner_iphone .home-figure .banner_info h1 {
    margin-top: 1em;
    margin-bottom: 8px;
  }
  .banner_iphone .home-figure .banner_info p {
    margin-bottom: 20px;
    line-height: 1.5em;
    margin: 0 auto;
  }
  .banner_iphone .home-figure .banner_info a {
    margin: auto;
  }
  .banner_iphone .home-figure .banner_info a.ui_read_more {
    display: block;
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 961px) {
  .banner_iphone.banner-content .home-figure img.mobile_banner_img {
    bottom: 0;
    top: auto;
    padding-left: 0px;
    padding-right: 0px;
    position: absolute;
    border-bottom: none;
    margin: 0;
  }
  .banner_iphone .ui_read_more {
    display: block;
  }
  .banner_iphone .home-figure img {
    position: relative;
  }
  .banner_iphone .home-figure img.mobile_banner_img {
    left: 45px;
    width: 381px;
    bottom: 0;
  }
  .banner_iphone .home-figure img.shadow_line {
    display: none;
  }
  .banner_iphone .home-figure .banner_info {
    margin-left: 470px;
    max-width: 44%;
    margin-top: 60px;
    text-align: left;
  }
  .banner_iphone .home-figure .banner_info h1 {
    max-width: 100%;
  }
  .banner_iphone .home-figure .banner_info a {
    margin: 0;
  }
}
@media screen and (min-width: 1200px) {
  .banner_iphone .home-figure {
    background: #eff1ec;
  }
  .banner_iphone .home-figure img.mobile_banner_img {
    left: 65px;
    bottom: 0;
  }
  .banner_iphone .home-figure .banner_info {
    margin-top: 85px;
    margin-left: 500px;
    max-width: 50%;
  }
}
.mobile_feature_banner {
  display: block;
  height: 6em;
  width: 100%;
  padding: 0.8em 0;
  position: relative;
  background: #90cf4c;
  padding-left: 0.875em;
  padding-right: 0.875em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: white;
  margin-top: -1px;
}
.mobile_feature_banner h1 {
  font-weight: 900;
  font-size: 36px;
  margin: 0;
}
.mobile_feature_banner a {
  bottom: 0;
  background-color: #364a1e;
}

.mobile_banner_app {
  background: #90cf4c url('/assets/img/home/banner-mobile-iphone.png') no-repeat 50% 55px;
  height: 255px;
}
.mobile_banner_app h1 {
  margin-top: 11px;
  font-size: 24px;
  margin: 0;
}
.mobile_banner_app .banner_action {
  background-image: url('/assets/img/home/app-download.png');
  background-repeat: no-repeat;
  background-position: 78% 45%;
  height: 19px;
  width: 13px;
  font-weight: bold;
  width: 100%;
  padding-top: 8px;
  padding-bottom: 10px;
  padding-left: 32px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3 / 2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  .mobile_banner_app {
    background: #90cf4c url('/assets/img/home/banner-mobile-iphone-retina.png') no-repeat 50% 55px;
    background-size: 199px 213px;
  }
  .mobile_banner_app .banner_action {
    background-image: url('/assets/img/home/app-download-retina.png');
    background-size: 13px 15px;
  }
}
@media screen and (max-width: 600px) {
  .mobile_contact_info .grid {
    list-style: none;
    padding-top: 1em;
  }
  .mobile_contact_info .grid li {
    font-size: 18px;
    margin-bottom: 0.75em;
  }
}

#can_you_hear_us {
  text-align: left;
  background-image: url("../img/home/can-you-hear-us-update.jpg");
  background-repeat: no-repeat;
  background-position: left 0;
}
@media screen and (min-width: 601px) {
  #can_you_hear_us {
    background-position: right 0;
  }
}
#can_you_hear_us p {
  font-size: 1em;
  line-height: 22px;
  padding: 0.7em 0 0 0.9em;
  color: #fff;
  max-width: 16em;
}
#can_you_hear_us .ui_arrow {
  position: absolute;
  bottom: 0;
  left: 0;
}

#tweets .tweet_container {
  min-height: 178px;
}
#tweets .username {
  margin-left: 0em;
  padding: 0.5em 1em;
  font-size: 1em;
  position: relative;
  float: left;
}
#tweets section.tweet {
  visibility: hidden;
}
#tweets section.tweet.active {
  visibility: visible;
}
#tweets section.tweet cite {
  font-style: normal;
}
#tweets section.tweet .tweet-body {
  background: #e7f4d8;
  padding: 0.8em 1em;
  min-height: 65px;
  margin: 0;
}
#tweets section.tweet b {
  display: block;
  position: absolute;
  right: -20px;
  width: 20px;
  top: 0;
  height: 29px;
  background-position: 0 -1459px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  #tweets section.tweet b {
    background-position: 0 -1346px;
  }
}
#tweets section.tweet.even b {
  background-position: 0 -1545px;
  left: -20px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  #tweets section.tweet.even b {
    background-position: 0 -1405px;
  }
}
#tweets section.tweet.even .username {
  float: right;
}
#tweets .twitter {
  display: inline-block;
  clear: both;
  margin-top: 0.8em;
}
#tweets .icon-twitter-blue,
#tweets .icon-twitter-load {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
  margin-right: .375em;
}
#tweets .icon-twitter-blue {
  background-position: 0 -742px;
  width: 1.7em;
  height: 17px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  #tweets .icon-twitter-blue {
    background-position: 0 -665px;
  }
}
#tweets .icon-twitter-load {
  background-position: 0 -1190px;
  width: 1.3em;
  height: 17px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  #tweets .icon-twitter-load {
    background-position: 0 -1058px;
  }
}
#tweets .screen_name {
  font-size: 0.875em;
  font-family: 'Helvetica', arial, sans-serif;
  padding-left: 0.3em;
}
#tweets header {
  position: relative;
  margin-bottom: 0.4em;
}
#tweets ul.grid {
  list-style: none;
}
#tweets #twitter-link {
  display: inline;
}
@media screen and (max-width: 960px) {
  #tweets .tweet_container {
    min-height: 280px;
  }
}
@media screen and (max-width: 600px) {
  #tweets .tweet_container {
    min-height: 298px;
  }
  #tweets.collection .tweet.item.active {
    height: auto;
  }
  #tweets section.tweet {
    display: none;
    margin-bottom: 1em;
  }
  #tweets section.tweet.active {
    display: block;
  }
  #tweets section.tweet .username {
    line-height: 1;
  }
  #tweets section.tweet b {
    left: 40px;
  }
  #tweets section.tweet.even .username {
    float: left;
  }
  #tweets section.tweet.even b {
    left: 40px;
  }
  #tweets ul li {
    text-align: center;
  }
  #tweets #twitter-link {
    display: none;
  }
  #tweets .username {
    padding-top: 1.8em;
  }
  #tweets #twitter_load_more {
    display: none;
  }
}

/* ------------------------------------------------------------------- *
 |  TYPE:           UI rates elements
 |  AUTHOR(S):      Josh, Paul, Frej
 |  DATE CREATED:   23/05/2012
 |  DATE UPDATED:   24/09/2012
 |  DESCRIPTION:    Rates build.
 * ------------------------------------------------------------------- */
figure.squares {
  position: relative;
  min-height: 150px;
  width: 100%;
  margin: 0 0 0.375em 0;
}
figure.squares .squares-table {
  list-style: none;
  width: 100%;
  visibility: hidden;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: visibility 600ms linear, opacity 600ms ease-in-out;
  -moz-transition: visibility 600ms linear, opacity 600ms ease-in-out;
  -o-transition: visibility 600ms linear, opacity 600ms ease-in-out;
  transition: visibility 600ms linear, opacity 600ms ease-in-out;
}
figure.squares .squares-table.active {
  visibility: visible;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
figure.squares.comparison {
  overflow: hidden;
  text-align: left;
}
figure.squares.comparison a {
  display: block;
}
figure.squares .squares-cell {
  /*padding-left: 1.75em;*/
  height: 170px;
  float: left;
  position: relative;
}
figure.squares .squares-cell.others {
  display: none;
}
figure.squares .squares-cell.selected, figure.squares .squares-cell.kiwibank {
  display: block;
}
figure.squares .squares-cell h3, figure.squares .squares-cell a, figure.squares .squares-cell p {
  color: white;
}
figure.squares .squares-cell h3 {
  padding-top: 1em;
  padding: 0.24em 0 0.1em;
}
figure.squares .squares-cell.kiwibank {
  background-color: #89c54e;
}
figure.squares .squares-cell .dropdown {
  position: relative;
  z-index: 500;
  font-size: 1em;
}
figure.squares .squares-cell.others {
  background-color: #5a6e47;
}
figure.squares .squares-cell a.open {
  color: white;
}
figure.squares.big-numbers h3 {
  padding-top: 0.40em;
  margin-left: 0;
}
figure.squares p {
  font-size: 13px;
  color: #000;
}
figure.squares div.vs {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 38px;
  width: 38px;
  margin-left: -19px;
  margin-top: -19px;
  padding: 0.3em 0.5em;
  font-size: 20px;
  z-index: 502;
  font-weight: 500;
  background-position: 0 -696px;
  line-height: 28px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  figure.squares div.vs {
    background-position: 0 -563px;
  }
}
figure.squares div.feenotice {
  position: absolute;
  bottom: 6px;
  left: 25%;
}
figure.squares div.feenotice p {
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 420px) {
  figure.squares div.feenotice {
    left: 5%;
  }
}
figure.squares h4 {
  text-align: center;
  font-weight: 500;
  padding-top: 0.2em;
  color: white;
  font-size: 1.1em;
}
figure.squares h3.field {
  padding-bottom: 0.1em;
  padding-top: 0;
}
figure.squares .lighter a.button {
  background: white;
  color: #222222;
  width: 85%;
  margin: 0 auto;
  font-weight: 500;
  line-height: 1.6em;
  padding-bottom: 0.4em;
}
figure.squares .lighter a.button span {
  padding-top: 0.8em;
}
figure.squares .squares-nav {
  position: absolute;
  top: -230px;
  left: 0;
  background: #353c2e;
  height: 84%;
  width: 50%;
  padding: 0 2%;
  visibility: hidden;
  overflow: hidden;
  -webkit-transition: visibility 600ms linear, top 600ms ease-in-out;
  -webkit-transition-delay: 0ms, 0ms;
  -moz-transition: visibility 600ms linear 0ms, top 600ms ease-in-out 0ms;
  -o-transition: visibility 600ms linear 0ms, top 600ms ease-in-out 0ms;
  transition: visibility 600ms linear 0ms, top 600ms ease-in-out 0ms;
}
figure.squares .squares-nav a {
  color: white;
  border-bottom: solid 1px #4e5944;
  font-weight: 300;
  padding-left: 0;
  padding-right: 0;
}
figure.squares .squares-nav.other-banks {
  right: 0;
  left: auto;
}
figure.squares .squares-nav.active {
  visibility: visible;
  top: 38px;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
figure.squares .squares-nav.delay {
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}

ul.rates {
  background: none;
  color: inherit;
  text-align: center;
  min-height: 150px;
  width: 100%;
  position: relative;
}
ul.rates li {
  padding: 0 0.75em;
}
@media screen and (min-width: 28em) {
  ul.rates li {
    width: 50%;
    float: left;
  }
}
ul.rates li.active {
  height: 160px;
}
ul.rates h2 {
  font-size: 1em;
  text-align: center;
  margin-top: 3px;
  margin-bottom: 0.5em;
}
ul.rates h2 a {
  color: #6ab421;
  text-decoration: none;
}
ul.rates h3 a {
  color: #353c2e;
  text-decoration: none;
}
ul.rates h4 {
  color: #77b731;
}
ul.rates p {
  color: #353c2e;
  font-size: 0.875em;
  line-height: 1.125;
  line-height: 18px;
  max-width: 14em;
  margin-left: auto;
  margin-right: auto;
}
#homepage ul.rates p {
  max-width: 14.2em;
}

.collection li.item,
.collection section.item,
.collection div.item {
  visibility: hidden;
  height: 0px;
  overflow: hidden;
  margin: 0 0 0 -10px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 800ms ease-out, visibility 800ms linear, height 0s linear, margin-left 800ms ease-in-out, background 300ms ease-out;
  -webkit-transition-delay: 0ms, 800ms, 1000ms, 0ms, 0s;
  -moz-transition: opacity 800ms ease-out 0ms, visibility 800ms linear 800ms, height 0s linear 1000ms, margin-left 800ms ease-in-out 0ms, background 300ms ease-out;
  -o-transition: opacity 800ms ease-out 0ms, visibility 800ms linear 800ms, height 0s linear 1000ms, margin-left 800ms ease-in-out 0ms, background 300ms ease-out;
  transition: opacity 800ms ease-out 0ms, visibility 800ms linear 800ms, height 0s linear 1000ms, margin-left 800ms ease-in-out 0ms, background 300ms ease-out;
}
.collection li.item.even,
.collection section.item.even,
.collection div.item.even {
  -webkit-transition: opacity 800ms ease-out, visibility 800ms linear, height 0s linear, margin-left 800ms ease-in-out, background 300ms ease-out;
  -webkit-transition-delay: 200ms, 1000ms, 1000ms, 200ms, 0s;
  -moz-transition: opacity 800ms ease-out 200ms, visibility 800ms linear 1000ms, height 0s linear 1000ms, margin-left 800ms ease-in-out 200ms, background 300ms ease-out;
  -o-transition: opacity 800ms ease-out 200ms, visibility 800ms linear 1000ms, height 0s linear 1000ms, margin-left 800ms ease-in-out 200ms, background 300ms ease-out;
  transition: opacity 800ms ease-out 200ms, visibility 800ms linear 1000ms, height 0s linear 1000ms, margin-left 800ms ease-in-out 200ms, background 300ms ease-out;
}
.collection li.item.active,
.collection section.item.active,
.collection div.item.active {
  -webkit-transition: opacity 800ms ease-in, visibility 1000ms linear, height 0s linear, background 300ms ease-out;
  -webkit-transition-delay: 1000ms, 0s, 1000ms, 0s;
  -moz-transition: opacity 800ms ease-in 1000ms, visibility 1000ms linear 0s, height 0s linear 1000ms, background 300ms ease-out;
  -o-transition: opacity 800ms ease-in 1000ms, visibility 1000ms linear 0s, height 0s linear 1000ms, background 300ms ease-out;
  transition: opacity 800ms ease-in 1000ms, visibility 1000ms linear 0s, height 0s linear 1000ms, background 300ms ease-out;
  visibility: visible;
  height: 150px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  margin-left: 0;
}

.tile__img {
  display: block;
}

#masthead {
  background: transparent;
}

#home_content {
  background-color: white;
}

.new-round-here ul {
  margin-top: 0.4em;
}

ul.rates {
  margin-top: -7px;
}
ul.rates h2 {
  margin-top: 10px;
}

.collection .ui_button {
  position: absolute;
  right: 0.875em;
  margin: 0;
  top: 37%;
}

.feature ul {
  list-style: none;
}
.feature h2 {
  font-size: 1.1875em;
  margin-top: 0;
  margin-bottom: 0.4em;
}
.feature p {
  margin: 0;
}
.feature a {
  display: block;
}

.story h2 {
  font-size: 1.3125em;
  padding-bottom: 0.2em;
  margin: 0;
}
.story p {
  margin: 0;
}
.story.picture p {
  width: 60%;
  padding-right: 1em;
  float: left;
}
.story.picture img {
  position: absolute;
}
.story.picture a {
  clear: both;
  white-space: nowrap;
}
.story[class*=pic_] figure {
  position: relative;
}
.story[class*=pic_] figure a, .story[class*=pic_] figure img {
  display: block;
}
.story[class*=pic_] figure .ui_button {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -30px 0 0 -30px;
}
.story.pic_right figure {
  float: right;
  margin-left: 12px;
}
.story.pic_left figure {
  float: left;
  margin-right: 12px;
}

.comparison li {
  text-align: center;
}
.ie7 .comparison li h3 {
  padding-top: 13px;
}

ul.list_horizontal a {
  background-position: 100% -1382px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  ul.list_horizontal a {
    background-position: 100% -1514px;
  }
}

span.ui_mobile_link, span.ui_mobile_search, span.ui_mobile_login, span.ui_mobile_call,
a.ui_mobile_link,
a.ui_mobile_search,
a.ui_mobile_login,
a.ui_mobile_call {
  margin-bottom: 0.75em;
  padding: 0.6em 0.5em 0.4em 2em;
  display: block;
  color: #222222;
  font-weight: bold;
  background-color: #eaebec;
}
span.ui_mobile_link:hover, span.ui_mobile_search:hover, span.ui_mobile_login:hover, span.ui_mobile_call:hover,
a.ui_mobile_link:hover,
a.ui_mobile_search:hover,
a.ui_mobile_login:hover,
a.ui_mobile_call:hover {
  text-decoration: none;
}

.ui_mobile_search {
  background-position: 2px -809px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .ui_mobile_search {
    background-position: 2px -806px;
  }
}

.ui_mobile_login {
  background-position: 2px -1258px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .ui_mobile_login {
    background-position: 2px -1181px;
  }
}

.ui_mobile_call {
  background-position: 3px -644px;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .ui_mobile_call {
    background-position: 3px -511px;
  }
}

.ui_read_more {
  white-space: nowrap;
}
.ui_read_more span {
  background-position: 6px -1991px;
  vertical-align: middle;
  width: 12px;
  height: 10px;
  line-height: .5;
}
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  .ui_read_more span {
    background-position: 6px -2031px;
  }
}

.list-styled--pipe {
  margin-left: 0;
  margin-top: 0.25em;
  list-style: none;
  overflow: hidden;
  padding-left: 0;
}
.list-styled--pipe > li {
  padding-right: 0.75em;
  display: inline-block;
  margin-left: 0;
  position: relative;
}
.list-styled--pipe > li::before {
  content: "|";
  font-size: 0.9375em;
  display: inline-block;
  color: #e8e8e7;
  margin-left: -0.75em;
  position: absolute;
  background-size: cover;
}

.rm_short {
  white-space: nowrap;
}

.smallprint {
  padding-bottom: 1em;
}
.smallprint .terms {
  font-size: 13px;
  color: #878787;
}

.notification--legal {
  background-color: #F2F8EB;
  padding-bottom: 1em;
  padding-top: 1em;
}

.tertiary_tile .tile__img {
  background-image: url("/assets/img/home/tile-survival-kit.jpg");
  background-attachment: scroll;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 106px;
  height: 134px;
  float: left;
  margin: 0 2.65em 0 1em;
}
@media only screen and (max-width: 37.5em) {
  .tertiary_tile .tile__img {
    display: none;
  }
}

.nzoty_tile .tile__img {
  background-image: url("/assets/img/home/tile-nzoty2015.jpg");
  background-attachment: scroll;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 70px;
  height: 117px;
  float: right;
  margin: 0 1.85em 2em 2.75em;
}
@media only screen and (max-width: 37.5em) {
  .nzoty_tile .tile__img {
    display: none;
  }
}

.airnz_tile .tile__img {
  background-image: url("/assets-personal-banking/images/personal-banking/credit-cards/ap-platinum-small.png");
  background-attachment: scroll;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 108px;
  height: 62px;
  float: left;
  margin: 2.5em 2.25em 2.5em 1.25em;
}
@media only screen and (max-width: 37.5em) {
  .airnz_tile .tile__img {
    display: none;
  }
}

.majorbank_tile .tile__img {
  background-image: url("/assets/img/home/major-bank-of-2014.png");
  background-attachment: scroll;
  background-color: transparent;
  background-position: 0 0;
  background-repeat: no-repeat;
  width: 74px;
  height: 150px;
  float: right;
  margin: -0.6em 1.85em 0 3em;
}
@media only screen and (max-width: 37.5em) {
  .majorbank_tile .tile__img {
    display: none;
  }
}

@media only screen and (max-width: 37.5em) {
  span.hp_divider {
    border-top: 1px solid #e8e8e7;
    height: 20px;
    display: block;
    width: 90%;
    margin: 0 auto;
    position: relative;
  }

  span.video_join {
    position: relative;
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  span.video_join a.ui_arrow_right {
    position: absolute;
    left: 50%;
    top: -35px;
    margin-left: -50px;
    display: none;
  }

  #banner {
    display: none;
  }

  .mobile_home {
    display: block;
  }

  .mobile_feature_banner .grid,
  .mobile_contact_info .grid {
    width: 100%;
    padding-left: 0.875em;
    padding-right: 0.875em;
    margin-left: auto;
    margin-right: auto;
    list-style: none;
    padding-top: 1em;
  }
  .mobile_feature_banner .grid li,
  .mobile_contact_info .grid li {
    font-size: 18px;
    margin-bottom: 0.75em;
  }

  .mobile_feature_banner .ui_button {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .mobile_feature_banner .mobile_app_download {
    left: 0;
    right: 0;
    margin: 0;
  }

  ul.list_horizontal li {
    border-bottom: solid 1px #eee;
  }
  ul.list_horizontal a {
    padding: 0.6em 0;
  }

  #featured_rates .ui_arrow_sml_next {
    position: static;
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    color: #4AA1C5;
    text-indent: 0;
    text-align: center;
  }
  #featured_rates .ui_arrow_sml_next em {
    font-style: normal;
  }
  #featured_rates .ui_arrow_sml_next i {
    display: none;
  }

  .collection .tweet.item.active {
    height: 225px;
  }

  ul.rates {
    margin-left: -15px;
  }

  #can_you_hear_us {
    background-image: none;
    background-color: #90cf4c;
  }

  .grid.story.picture p {
    width: inherit;
  }
  .grid.story.picture img, .grid.story.picture figure {
    position: static;
  }

  .grid.story[class*=pic_] figure {
    display: none;
  }
}
@media only screen and (min-width: 37.5625em) {
  span.hp_divider {
    width: 98%;
    background: url('/assets/img/home/divider-shadow.png') no-repeat center 0;
    display: block;
    clear: both;
    height: 45px;
    border-top: 1px solid #e8e8e7;
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
  }

  span.video_join {
    position: relative;
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  span.video_join a.ui_arrow_right {
    position: absolute;
    left: 50%;
    top: -35px;
    margin-left: -50px;
    display: none;
  }

  #tweets ul {
    text-align: left;
  }
  #tweets ul li {
    display: inline;
  }
  #tweets ul .twitter_load {
    float: right;
    display: inline-block;
    margin-top: 0.8em;
  }

  #welcome {
    padding-top: 2.5em;
  }

  .banner-content {
    margin-left: auto;
    margin-right: auto;
  }

  ul.list_horizontal {
    *zoom: 1;
    margin: 0.625em 0 0;
  }
  ul.list_horizontal:before, ul.list_horizontal:after {
    content: " ";
    display: table;
  }
  ul.list_horizontal:after {
    clear: both;
  }
  ul.list_horizontal li {
    float: left;
    margin-left: 0.45em;
    padding-left: 0.45em;
    border-left: solid 1px #eaeaea;
  }
  ul.list_horizontal li:first-child {
    margin-left: 0;
    padding-left: 0;
    border: 0;
  }
  ul.list_horizontal a {
    background: none;
  }

  #featured_rates {
    position: relative;
  }

  .new-round-here {
    margin-bottom: 2.5em;
  }

  body.non_desktop #featured_rates .ui_arrow_sml_next i {
    display: none;
  }
  body.non_desktop #featured_rates .ui_arrow_sml_next em {
    display: block;
  }
}
.no_media_queries span.hp_divider {
  width: 98%;
  background: url('/assets/img/home/divider-shadow.png') no-repeat center 0;
  display: block;
  clear: both;
  height: 45px;
  border-top: 1px solid #e8e8e7;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
}
.no_media_queries span.video_join {
  position: relative;
  display: block;
  width: 90%;
  margin: 0 auto;
}
.no_media_queries span.video_join a.ui_arrow_right {
  position: absolute;
  left: 50%;
  top: -35px;
  margin-left: -50px;
  display: none;
}
.no_media_queries #tweets ul {
  text-align: left;
}
.no_media_queries #tweets ul li {
  display: inline;
}
.no_media_queries #tweets ul .twitter_load {
  float: right;
  display: inline-block;
  margin-top: 0.8em;
}
.no_media_queries #welcome {
  padding-top: 2.5em;
}
.no_media_queries .banner-content {
  margin-left: auto;
  margin-right: auto;
}
.no_media_queries ul.list_horizontal {
  *zoom: 1;
  margin: 0.625em 0 0;
}
.no_media_queries ul.list_horizontal:before, .no_media_queries ul.list_horizontal:after {
  content: " ";
  display: table;
}
.no_media_queries ul.list_horizontal:after {
  clear: both;
}
.no_media_queries ul.list_horizontal li {
  float: left;
  margin-left: 0.45em;
  padding-left: 0.45em;
  border-left: solid 1px #eaeaea;
}
.no_media_queries ul.list_horizontal li:first-child {
  margin-left: 0;
  padding-left: 0;
  border: 0;
}
.no_media_queries ul.list_horizontal a {
  background: none;
}
.no_media_queries #featured_rates {
  position: relative;
}
.no_media_queries .new-round-here {
  margin-bottom: 2.5em;
}
.no_media_queries body.non_desktop #featured_rates .ui_arrow_sml_next i {
  display: none;
}
.no_media_queries body.non_desktop #featured_rates .ui_arrow_sml_next em {
  display: block;
}

.ie7 .latest .save_text,
.ie8 .latest .save_text {
  float: left;
  width: 250px;
}

.ie7 .internet_fraud .hometile_text_wrapper, .ie7 .computer_fraud .hometile_text_wrapper, .ie7 .mobile_fraud .hometile_text_wrapper, .ie7 .identity_fraud .hometile_text_wrapper, .ie7 .card_fraud .hometile_text_wrapper {
  max-width: 50%;
}

.ie7 .orm_home_tile .hometile_text_wrapper {
  max-width: 55%;
}

@media only screen and (min-width: 60.0625em) {
  body {
    background-color: #fff;
    font-size: 15px;
    line-height: 21px;
  }

  .story h2 {
    font-size: 18px;
    padding-bottom: 0.4em;
  }

  #masthead,
  .mobile_feature_banner {
    margin-bottom: 0;
  }

  #featured_rates.css #rates_load_more {
    opacity: 0;
    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
  }
  #featured_rates.css:hover #rates_load_more {
    opacity: 1;
  }

  body.non_desktop #featured_rates.css #rates_load_more {
    opacity: 1;
  }

  .banner .home-figure {
    min-height: 338px;
  }
  .banner .home-figure .std-para {
    max-width: 55%;
  }

  ul.list_horizontal {
    font-size: 0.875em;
  }

  span.video_join {
    position: relative;
  }
  span.video_join a.ui_arrow_right {
    top: -74px;
  }
}
.no_media_queries body {
  background-color: #fff;
  font-size: 15px;
  line-height: 21px;
}
.no_media_queries .story h2 {
  font-size: 18px;
  padding-bottom: 0.4em;
}
.no_media_queries #masthead,
.no_media_queries .mobile_feature_banner {
  margin-bottom: 0;
}
.no_media_queries #featured_rates.css #rates_load_more {
  opacity: 0;
  -webkit-transition: opacity 200ms ease-out;
  -moz-transition: opacity 200ms ease-out;
  -o-transition: opacity 200ms ease-out;
  transition: opacity 200ms ease-out;
}
.no_media_queries #featured_rates.css:hover #rates_load_more {
  opacity: 1;
}
.no_media_queries body.non_desktop #featured_rates.css #rates_load_more {
  opacity: 1;
}
.no_media_queries .banner .home-figure {
  min-height: 338px;
}
.no_media_queries .banner .home-figure .std-para {
  max-width: 55%;
}
.no_media_queries ul.list_horizontal {
  font-size: 0.875em;
}
.no_media_queries span.video_join {
  position: relative;
}
.no_media_queries span.video_join a.ui_arrow_right {
  top: -74px;
}

.ie7 span.video_join {
  z-index: 2;
}
span.video_join a.ui_arrow_right {
  z-index: 2;
}

@media only screen and (min-width: 71.3125em) {
  body {
    background-color: #eaeaea;
    font-size: 16px;
    line-height: 22px;
  }

  .story h2 {
    font-size: 20px;
    padding-bottom: 0.4em;
  }

  ul.list_horizontal {
    font-size: 1em;
  }
  ul.list_horizontal li {
    width: 60%;
    float: left;
    margin-left: 0.45em;
    padding-left: 0.45em;
    border-left: solid 1px #eaeaea;
    width: inherit;
  }

  span.video_join {
    position: relative;
  }
  span.video_join a.ui_arrow_right {
    top: -78px;
  }
}