﻿@font-face {
  font-family: FuturaBold;
  src: url('../fonts/futura-bold.woff');
}

*::selection {
    color: #fff;
    background: #006778;
    opacity: 1;
    filter: alpha(opacity=100);
}

html {
    font-size: 62.5%;
    position: relative;
    min-height: 100%;
}

body {
    height: 100%;
    width: 100%;
    font-family: AvenirR;
    font-size: 1.6rem;
    color: #313435;
    margin-bottom: 160px;
}

    body.no-footer {
        margin-bottom: 0 !important;
        background-color: #04212f;
    }

a {
    text-decoration: none !important;
  border-bottom: 1px solid;
  color: rgb(33, 37, 41);
}

.content a, #contentBody a, .featureSection a {
    color: #313435;
    border-bottom: 1px solid #888;
}

    .content a:hover, #contentBody a:hover {
        color: #666;
        border-bottom: 1px solid #a0a0a0;
    }

a[href^="tel"], a[href^="tel"]:hover {
    border-bottom: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
}

html h3 {
    font-size: 2.4rem;
    margin-top: 3rem;
}

html h4 {
    font-size: 2rem;
    margin-top: 2.5rem;
}

p, dl, ol, ul, address, pre, hr, blockquote, table, form-group, breadcrumb, alert {
    margin-bottom: 1.6rem;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

img {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

li {
    padding-top: .4rem;
    /*display:table;*/
}

ul.bullet {
    list-style: none;
}

    ul.bullet li::before {
        content: "•";
        color: #444;
        display: inline-block;
        width: 2.2rem;
        margin-left: -3.1rem;
    }

ol.bigNumberList {
    list-style: none;
    padding-left: 0;
    margin: 1.6rem 0;
}

    ol.bigNumberList li > span:first-child {
        font: bold 19pt helvetica;
        position: relative;
        color: #b6b6b6;
        margin-bottom: 2rem;
        position: absolute;
        line-height: 3rem;
    }

    ol.bigNumberList li p span {
        font-size: 2rem;
    }

    ol.bigNumberList li p {
        padding-left: 3.1rem;
        color: #383838;
    }

.hamburger-region {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 1.8rem;
}

    .hamburger-region > img {
        cursor: pointer;
    }

.close-region {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    opacity: 0.8;
    cursor: pointer;
    padding: 14px;
    padding-right: 40px;
    /*height:50px !important;*/
}

    .close-region:hover {
        opacity: 1;
    }

.close-icon {
    background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C%21--%20Created%20with%20Inkscape%20%28http%3A%2F%2Fwww.inkscape.org%2F%29%20--%3E%0A%0A%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%0A%20%20%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20width%3D%2222.86124%22%0A%20%20%20height%3D%2222.83745%22%0A%20%20%20id%3D%22svg2%22%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%20%2F%3E%0A%20%20%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata7%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E%0A%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%0A%20%20%20%20%3C%2Frdf%3ARDF%3E%0A%20%20%3C%2Fmetadata%3E%0A%20%20%3Cpath%0A%20%20%20%20%20d%3D%22M%2019.649385%2C5.0026555e-4%20C%2019.552285%2C0.00551027%2019.446485%2C0.04710027%2019.368135%2C0.12549977%20L%2011.336883%2C8.1254979%203.4931325%2C0.28174747%20c%20-0.1567%2C-0.1566899%20-0.390229%2C-0.1722696%20-0.53125%2C-0.0312%20L%200.27438252%2C2.9380477%20c%20-0.14103%2C0.14103%20-0.125449%2C0.3745605%200.0312%2C0.5312505%20L%208.1493325%2C11.313049%200.12795552%2C19.334426%20c%20-0.1567%2C0.1567%20-0.17228%2C0.42148%20-0.0312%2C0.562499%20l%202.68749998%2C2.65625%20c%200.141021%2C0.141031%200.374551%2C0.125451%200.531251%2C-0.0312%20l%208.0213775%2C-8.021377%208.208895%2C8.208896%20c%200.15669%2C0.1567%200.39022%2C0.17228%200.53125%2C0.0312%20l%202.6875%2C-2.6875%20c%200.14102%2C-0.14102%200.12544%2C-0.37455%20-0.0312%2C-0.53125%20l%20-8.208895%2C-8.208896%208.031249%2C-8.0312499%20c%200.15669%2C-0.1566899%200.17227%2C-0.3902197%200.0312%2C-0.53125%20L%2019.899381%2C0.09430007%20c%20-0.0705%2C-0.070499%20-0.152868%2C-0.098902%20-0.250001%2C-0.0937000044%20z%22%0A%20%20%20%20%20id%3D%22rect3107-3-4-1-1-0-9-5-7%22%0A%20%20%20%20%20style%3D%22fill%3A%23000000%3Bfill-opacity%3A0.53333285%3Bstroke%3Anone%22%20%2F%3E%0A%20%20%3Cpath%0A%20%20%20%20%20d%3D%22m%2019.649385%2C0.65674977%20c%20-0.07671%2C0%20-0.159989%2C0.035%20-0.218747%2C0.093702%20L%2011.336888%2C8.8442021%203.4306375%2C0.93795187%20c%20-0.117521%2C-0.1175204%20-0.319981%2C-0.1175205%20-0.437501%2C-5e-7%20L%201.3056375%2C2.6254522%20c%20-0.11752%2C0.11752%20-0.11752%2C0.3199802%200%2C0.4374999%20l%207.906249%2C7.9062499%20-8.093749%2C8.093751%20c%20-0.11752%2C0.11752%20-0.11752%2C0.31998%20-10e-7%2C0.437499%20l%201.718751%2C1.687501%20c%200.117519%2C0.11752%200.28873%2C0.11752%200.40625%2C0%20l%208.0937505%2C-8.09375%208.281249%2C8.28125%20c%200.11752%2C0.11752%200.31998%2C0.11752%200.4375%2C0%20l%201.6875%2C-1.71875%20c%200.11752%2C-0.11752%200.11752%2C-0.28873%200%2C-0.40625%20l%20-8.281249%2C-8.28125%208.09375%2C-8.0937507%20c%200.117519%2C-0.1175197%200.117519%2C-0.31998%200%2C-0.4374997%20L%2019.868137%2C0.75045217%20c%20-0.0588%2C-0.058803%20-0.142063%2C-0.093697%20-0.218747%2C-0.093703%20z%22%0A%20%20%20%20%20id%3D%22rect3107-3-50-5-3-7-8-0-9%22%0A%20%20%20%20%20style%3D%22fill%3A%23ffffff%3Bfill-opacity%3A1%3Bstroke%3Anone%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
    background-position: center;
    background-repeat: no-repeat;
    height: 28px;
    width: 23px;
    transition: opacity .2s;
    margin-right: 1.1rem;
    display: inline-block;
    transform: scale(.9);
}

.close-text {
}

.smooth {
    transition: all .3s ease;
}

#overlay {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 2000;
    background: rgba(0,0,0,.66);
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s,opacity .3s ease;
}

.featureSection {
    padding-left: 8.33333%;
    padding-right: 8.33333%;
    padding-top: 3rem;
}

    .featureSection h2 {
        font: 5rem Garamond;
        margin-bottom: 2rem;
    }


.error {
    color: #ea3232;
    font-size: 1.4rem;
    transition: visibility 0s,opacity .5s linear;
}

ol.breadcrumb {
    margin-top: -1em;
}

.forceUnderline {
    border-bottom: 1px solid #888;
}

.hero {
    padding: 0rem 0 2rem 0;
    margin-bottom: 1rem;
    color: #fff;
}

.blackbg {
    background-color: hsla(199, 84%, 10%, 1);
}

.bgImage {
    background: url('../Images/NZ MAP.png') no-repeat 30% 50%;
    background-size: contain;
}

.titleSection h1 {
    margin-bottom: 1.5rem;
    font: 5.4rem Garamond;
}

.titleSection h2 {
    font-size: 2.2rem;
    line-height: 1.5;
}

.titleSection h3 {
    font-size: 3.4rem;
    line-height: 1.5;
}

.titleSection h4 {
    font-size: 3.4rem;
    line-height: 1.5;
}

.hero .row:first-child {
    padding: 1rem 0 2rem;
}

#application.slide-up {
    opacity: 0;
}


#application .hrtbtn {
    width: 53%;
    margin-left: auto;
    margin-right: auto;
}


#application {
    padding: 2.5rem 1.5% 2.75rem 1.5%;
    border-radius: 3px;
    background: #f3f3f3;
    box-shadow: 0 18px 50px 0 rgba(0, 0, 0, .03), 0 4px 8px 0 rgba(0, 0, 0, .08), 0 18px 40px 0 rgba(0, 0, 0, .13);
    padding-left: 0;
    padding-right: 0.7rem;
    color: #333;
}

    #application h4 {
        font-size: 2.4rem;
        margin: 0 3rem 0rem 3rem;
        line-height: 1.5;
        color: #333;
    }

.form-group {
    margin: 1rem 0;
}

.wellslider1 {
    padding: 2.4rem 2.9rem 2.4rem 2.8rem;
    border-radius: 0;
    color: #333;
    font-size: 1.8rem;
}

    .wellslider1 > div {
        display: flex;
        justify-content: space-between;
        padding-right: 0.7rem;
    }

.btn {
    cursor: pointer;
}

    .btn:focus, .btn:active .btn:hover {
        outline: none !important;
        -webkit-box-shadow: none;
        box-shadow: none;
    }


.hrtbtn {
    color: #fff;
    font-size: 1.8rem;
    line-height: 1.5;
    background-color: #5b8f22;
    border-color: #5b8f22;
}

    .hrtbtn:active {
        background-color: #568a1c;
    }

p > .hrtbtn {
    margin: 1.6rem;
}

#btnSubmit {
    margin-top: 2rem;
    font-size: 1.9rem;
}

button#btnSubmit:hover {
    background-color: #5e9423;
}

.findOutMore {
    position: absolute;
    bottom: 0;
    margin-bottom: 1em;
    width: 100%;
}

.findOutMoreArrowText {
    margin-top: .5rem;
    color: #ccc;
    text-align: center;
    font-size: 2rem;
    cursor: pointer;
}

.findOutMoreArrow {
    margin: 10px auto 0 auto !important;
    width: 45px;
    height: 45px;
    background-image: url(../Images/white-arrow-down.png);
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: .85;
}

footer {
    margin-top: 4em;
}

.footerBody {
    background-color: #f6f7fb;
    padding: 1rem 1.5rem 0 1.5rem;
    position: absolute;
    bottom: 0;
    width: 100%;
  font-family: 'Maven Pro';
}

.footerLinks {
    padding: 1.3rem 5% 1.7rem 5%;
    color: #666;
    font-size: 1.4rem;
}

    .footerLinks a {
        color: #666;
        margin: 0.5rem 1rem;
        border-bottom: 1px solid #aaa;
        line-height: 12px;
    }

        .footerLinks a:hover {
            color: #666;
            border-bottom: 1px solid #aaa;
        }

.logo {
    min-width: 140px;
    max-width: 200px;
}

nav {
    width: 100%;
    padding: 2.5rem 0;
    min-height: 65px !important;
}

    nav .row > div {
        transition: all .4s ease;
    }

    nav span {
        margin-left: 1.5rem;
        color: #fff;
    }

#sliderMenu {
    font-size: 18px;
    z-index: 3000;
    width: 400px;
    padding: 0;
    background-color: #444;
    height: 100%;
    overflow: auto;
}

    #sliderMenu > div {
        height: 58px;
        color: #fff;
        transition: all .15s ease;
    }

        #sliderMenu > div > div:not(:first-child) {
            width: 100%;
            height: 58px;
            margin-left: 20px;
            margin-right: 20px;
        }

        #sliderMenu > div:not(:first-child):hover {
            background-color: #606060;
            color: #fff;
        }

        #sliderMenu > div:not(:first-child) > div {
            padding-top: 16px;
            height: 58px;
            margin-left: 40px;
            margin-right: 40px;
        }

        #sliderMenu > div:first-child {
            padding: 14px;
            padding-right: 40px;
            height: 50px;
        }

.borderbottom {
    border-bottom: 1px solid silver;
}

.menuHidden {
    right: -400px;
}

.defaultPointer {
    cursor: default;
}

.mousePointer {
    cursor: pointer;
}

.positionMenuTop {
    top: 0;
    position: fixed;
}

.menuOpen {
    right: 0 !important;
    box-shadow: rgba(0, 0, 0, 0.156863) 0px 3px 10px, rgba(0, 0, 0, 0.227451) 0px 3px 10px;
}

.transition {
    -webkit-transition: right .3s ease;
    -moz-transition: right .3s ease;
    -o-transition: right .3s ease;
    transition: right .3s ease;
}

.featureBox {
    color: #313435;
    background-color: #f3f3f3;
    -webkit-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    padding: 4rem 2rem 3rem 2rem;
    box-sizing: border-box;
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s ease;
    text-align: center;
    margin: 0 15px;
}

.featureBlurb {
    font-size: 2rem;
}

.featureBox * {
    -webkit-flex: 1;
    flex: 1;
}

.featureBox:first-child {
    margin-left: 0;
}

.featureBox:last-child {
    margin-right: 0;
}

.featureBox:hover {
    background-color: #666;
}

    .featureBox:hover h3, .featureBox:hover p, .featureBox:hover a {
        color: #fff;
    }

.featureBox h3 {
    font-size: 2.2rem;
    margin-top: 0;
}

.featureBox p {
    font-size: 1.5rem;
    margin: 10px 0 25px;
}

.featureBox a {
    padding: 15px;
    border-radius: 3px;
    font-size: 1.7rem;
    text-decoration: none;
    box-sizing: border-box;
    text-align: center;
    width: 80%;
    min-width: 170px;
    margin: auto;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 0;
}

.featureBox_button {
    background-color: #5b8f22;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    width: 100%;
    border-radius: .3rem;
}

.featureBox:active .featureBox_button {
    background-color: #568a1c;
}

.content .container-fluid {
    overflow-x: hidden;
}

.content header {
    padding-top: 11rem;
    padding-bottom: 0;
}

#contentBody {
    padding-top: 3.0rem;
}

.content header h1 {
    font-family: AvenirR;
    font-size: 5.4rem;
    color: #fff;
}

.content h3 {
    font-size: 2.4rem;
}

@-moz-keyframes bounce {
    0%,20%,50%,80%,100% {
        -moz-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -moz-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    60% {
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@-webkit-keyframes bounce {
    0%,20%,50%,80%,100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    60% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@keyframes bounce {
    0%,20%,50%,80%,100% {
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -moz-transform: translateY(-25px);
        -ms-transform: translateY(-25px);
        -webkit-transform: translateY(-25px);
        transform: translateY(-25px);
    }

    60% {
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

.bounce {
    -moz-animation: bounce 3s infinite;
    -webkit-animation: bounce 3s infinite;
    animation: bounce 3s infinite;
    animation-delay: 2s;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(2%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.slide-up {
    opacity: 1 !important;
    -webkit-animation: slideUp .4s 1 cubic-bezier(.77,0,.175,1);
    -moz-animation: slideUp .4s 1 cubic-bezier(.77,0,.175,1);
    -ms-animation: slideUp .4s 1 cubic-bezier(.77,0,.175,1);
    -o-animation: slideUp .4s 1 cubic-bezier(.77,0,.175,1);
    animation: slideUp .4s 1 cubic-bezier(.77,0,.175,1);
}

.fade-in {
    opacity: 1 !important;
    -webkit-animation: fadeIn .4s;
    -moz-animation: fadeIn .4s;
    -ms-animation: fadeIn .4s;
    -o-animation: fadeIn .4s;
    animation: fadeIn 1s;
}

/*@media(max-width:400px){
    .row{
        height : 150px;
    }
}*/


@media(max-width:575px) {
    .row {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }

    .footer {
        margin-top: 20em;
    }

    .footerBody {
        background-color: #f6f7fb;
        padding: 1rem 0.0rem !important;
        position: absolute;
        bottom: 0;
        width: 100%;
    }
}

.footerLinks p {
    margin: 0.2rem 1rem;
}

a.anchor {
    display: block;
    position: relative;
    top: -89px;
    visibility: hidden;
}

.header__hino-logo{
    width: 90px;
    height: 100px;
}

nav.nav-login--transparent {
    padding-top: 0;
    background-color: transparent;
}
div.login-page__content.blackbg{
    background-color: transparent;
}


.login-page__hino-background {
    width: 100%;
    /*min-height: 909px;*/
    height: 100%;
    z-index: -15;
    position: absolute;
    top: 0;
    background-image: url('http://www.hino.co.nz/wp-content/uploads/2013/10/HINO2016_0001_web.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

    .login-page__hino-background:after{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .4);
        content: '';
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

.hrtbtn{
    background-color: #b3001a;
    border-color: #b3001a;
}
.hrtbtn:active {
    background-color: #b3001a;
    border: 1px solid #b3001a;
    box-shadow: 0 0 8px 0px rgba(0, 0, 0, .5) inset;
}
button#btnSubmit:hover {
    background-color: #d00b28;
}
button#btnSubmit:hover {
    background-color: #b3001a;
}