/*
 *   Header
 */

header {
    height: 69px;
    padding-top: 16px;
    position: absolute;
    opacity: 1;
    width: 100%;
    max-width: 100%;
}

html.menuOpen .mainBodyHolder {
    display: none;
}

html.menuOpen:after {
    display:none;
}

header.offScreen {
    opacity: 0;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    -ms-transition: all 0.15s;
}

.menuOpen header,
.menuOpen.whiteHeaderBasePage header {
    background-color: #fff;
}

.menuOpen header,
.whiteHeaderBasePage header {
    background-color: #fff;
}

@media only screen and (min-width: 768px) {
    header {
        height:100px;
        padding-top: 26px;
    }
}

@media only screen and (min-width: 1280px) {
    header {
        width:100vw;
    }
}

header .widthHolder {
    height: 100%;
    position: relative;

}

.menu .widthHolder {
    height: 100vh;
    position: relative;
    min-height: 100vh;
}

.navButton {
    background-image: url("../../images/v2/icons/iconMiniStack.svg#IconMenu");
    background-position: -2px 1px;
    background-color: transparent;
    height: 44px;
    position:absolute;
    right: -12px;
    text-indent: -9999px;
    top: -4px;
    width: 44px;
}

.navButton:hover {
    opacity: 0.6;
}

.menuOpen .inPage .navButton,
.menuOpen.whiteHeaderBasePage .navButton,
.menuOpen .navButton {
    background-image: url("../../images/v2/icons/iconMiniStack.svg#IconCloseDark");
    background-position: 1px -1px;
}

.inPage .navButton,
.whiteHeaderBasePage .navButton {
    background-image: url("../../images/v2/icons/iconMiniStack.svg#IconMenuBlack");
}


@media only screen and (min-width: 768px) {
    .menuOpen header {
        position: fixed;
    }

    .navButton {
        top: 2px;
    }

    header .contentHolder {
        height:100%;
    }

    header .contentHolder:after,
    header .contentHolder:before {
        background-color: rgba(255,255, 255,0.08);
        bottom: 0;
        content: "";
        height: 1px;
        position: absolute;
        visibility: visible;
        width: 100%;
    }
    .whiteHeaderBasePage header .contentHolder:after {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .menuOpen header .contentHolder:after,
    .menuOpen header .contentHolder:before {
        background-color: rgba(0, 0, 0, 0.05);
    }

}

@media only screen and (min-width:1280px) {
    .menuOpen header, .menuOpen header.inPage, .menuOpen.whiteHeaderBasePage header {
        background-color: transparent;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .menuOpen header, .menuOpen header.inPage, .menuOpen.whiteHeaderBasePage header {
        background-color: #fff;
    }
}


/*
 *  brandLogo
 */

.branchLogo {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 60px;
    text-decoration: none;
    color: #fff;
    font-size: 0.6875rem;
    display: block;
    letter-spacing: 0.03em;
    line-height: 122%;
    height: 38px;
    font-family: 'MINISansSerif-Regular', sans-serif;
}

.branchLogo span.branchText {
    display: block;
    position: relative;
    top: 48%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.branchLogo:hover span.branchText {
    opacity: 0.6;
}

.menuOpen .branchLogo,
.inPage .branchLogo,
.whiteHeaderBasePage .branchLogo {
    color: #242424;
}

.menuOpen .inPage .branchLogo,
.menuOpen.whiteHeaderBasePage .branchLogo {
    color: #242424;
}

.branchLogo span.logo {
    background: url("../../images/v2/icons/miniLogoForWhite.png") center center no-repeat;
    background-size: 54px 24px;
    display: block;
    height: 24px;
    left: -3px;
    position: absolute;
    top: 4px;
    width: 54px;
}
.menuOpen .branchLogo span.logo,
.inPage .branchLogo span.logo,
.whiteHeaderBasePage .branchLogo span.logo {
    background: url("../../images/v2/icons/miniLogo.png") center center no-repeat;
    background-size: 54px 24px;
}

@media only screen and (min-width: 768px) {
    .branchLogo {
        font-size: 0.75rem;
        height: 48px;
        padding-left: 92px;
        position: absolute;
    }

    .branchLogo span.logo {
        display: inline-block;
        background-size: 83px 37px;
        height: 37px;
        right: 0;
        top: 5px;
        width: 83px;
    }
    .menuOpen .branchLogo span.logo,
    .inPage .branchLogo span.logo,
    .whiteHeaderBasePage .branchLogo span.logo {
        background-size: 83px 37px;
    }
}


/*
 *   Core Links
 */

.whiteHeaderBasePage .coreLinks {
    background: #666;
}

.coreLinks {
    background-color: rgba(0,0,0,0.3);
    bottom: 0;
    height: 40px;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 12px 0;
    position: absolute;
    width: 100%;
    top: 40px;
}

.menuOpen .coreLinks {
    background: #0085ac;
    display: block !important;
}

.coreLinks li {
    float: left;
    height: 16px;
    width: 50%;
}

.coreLinks li.call {
    display: none;
}

.coreLinks li:first-child {
    border-right: 1px solid #949494;
    padding-right: 6%;
    text-align: right;
}

.menuOpen .coreLinks li:first-child {
    border-right: 1px solid #4cabc5;
}

.coreLinks li:nth-child(2) {
    padding-left: 6%;
}

.coreLinks a {
    color: #fff;
    font-size: 0.625rem;
    font-family: 'MINISansSerif-Regular', sans-serif;
    letter-spacing: 0.073em;
    line-height: 1.5rem;
    position: relative;
    text-decoration: none;
    text-transform :uppercase;
    top: -5px;
}

.coreLinks a:hover {
    opacity:0.6;
}

.menuOpen .coreLinks a,
.inPage .coreLinks a {
    color: #fff;
}

@media only screen and (min-width: 1280px) {
    .menuCloseBtn {
        font-family: 'MINISerif-Bold',sans-serif;
        font-weight: bolder;
        line-height: 120%;
        color: #242424;
        padding-top: 20% !important;
        display: inline-block;
        font-size: 1rem !important;
        bottom: 27px;
        left: 20%;
        text-decoration: underline !important;
    }
}

@media only screen and (max-width: 1279px) {
    .menuCloseBtn {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .coreLinks {
        background-color: transparent;
        bottom: auto;
        height: auto;
        left: auto;
        padding: 0;
        right: 76px;
        text-align: right;
        top: 15px;
        width: auto;
        display: block;
    }

    .modelSelectionPage .coreLinks {
        display:none;
    }

    .menuOpen .coreLinks {
        background-color: transparent;
    }

    .coreLinks li {
        float: left;
        height: 16px;
        padding: 0 40px 0 0;
        width: auto;
    }

    .coreLinks li.call {
        display: block;
    }

    .coreLinks li:first-child {
        border-right: none;
        padding: 0 40px 0 0;
        text-align: right;
    }

    .coreLinks li:nth-child(2) {
        padding-left: 0;
    }

    .coreLinks a {
        font-size: 0.75rem;
        position: relative;
        top: -5px;
    }

    .menuOpen .coreLinks li.call {
        /*display: none;*/
    }

    .menuOpen .coreLinks a,
    .inPage .coreLinks a {
        color: #242424;
    }

    .menuOpen.whiteHeaderBasePage .coreLinks a,
    .whiteHeaderBasePage .coreLinks a {
        color: #242424;
    }
    .whiteHeaderBasePage .coreLinks {
        background: transparent;
    }
}


@media only screen and (min-width: 900px) {
    .coreLinks {
        right: 89px;
    }
}

@media only screen and (min-width: 1280px) {
    .coreLinks {
        right: 151px;
    }
    .menuOpen .coreLinks li:first-child {
        border-right:none;
    }

}


/*
 *   Amends for minimal header
 */

.minimalHeader header .contentHolder:before {
    width:0;
}

.minimalHeader .coreLinks,
.minimalHeader .pageAnchors {
    display: none;
}

.menuOpen .coreLinks {
    display: block;
    bottom: -38px;
}


/*
 *   Menu
 */

@media only screen and (min-width: 768px)  and (max-width: 1279px) {
    .menuOpen .coreLinks {
        background-color: #666666;
        height: 62px;
        list-style: none;
        margin: 0;
        padding: 20px 0;
        position: absolute;
        top: 74px;
        left: 0;
        width: 100%;
    }

    .menuOpen .coreLinks {
        background: #0085ac;
    }

    .menuOpen .coreLinks li {
        float: left;
        height: 24px;
        width: 50%;
    }

    .menuOpen .coreLinks li:first-child {
        border-right: 1px solid #4cabc5;
        padding-right: 13%;
        text-align: right;
    }

    .menuOpen .coreLinks li:nth-child(2) {
        padding-left: 13%;
        text-align: left;
    }

    .menuOpen .coreLinks a {
        color: #fff !important;
        text-decoration: none;
        font-size:  0.875rem;
        font-family: 'MINISansSerif-Regular', sans-serif;
        line-height: 1.5rem;
        text-transform :uppercase;
        position: relative;
        top: unset;
        letter-spacing: 0.073em;
    }
}

.menu {
    position: absolute;
    top:0;
    width:100%;
    height: 100vh;
    opacity: 0;
    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -o-transition: opacity .5s;
    -ms-transition: opacity .5s;
}

.menuOpen .menu {
    opacity:1;
}

.menuOpen .tier1Banner,
.menuOpen .mainBodyHolder {
    visibility: hidden;
}

html.menuOpen {
    background-color: #fff;
}

.menu .contentHolder {
    margin: 0%;
    padding: 108px 0 0;
    height: 100vh;
    display: block;
}

@media only screen and (min-width: 768px) {
    .menu .contentHolder {
        margin: 0;
        padding: 162px 0;
    }
}

@media only screen and (max-width:1279px) {
    .menu .contentHolder {
        background: #fff;
    }

    html.menuOpen.activeMenu .menu .contentHolder {
        background: #F9F9F9 !important;
    }
    html.menuOpen.activeMenu{
        background: #F9F9F9;
    }

}

@media only screen and (min-width: 1280px) {
    .menu .contentHolder {
        background: #fff;
        height: 760px;
        margin: 0 0 0 0;
        padding: 0;
        position: relative;
    }


    .activeMenu .menu .contentHolder {
        background: rgb(255,255,255);
        background: linear-gradient(90deg, rgba(255,255,255,1) 30%, rgba(249,249,249,1) 30%);
        height: 760px;
        margin: 0 0 0 0%;
        padding: 0;
        position: relative;
    }
}

.mainLinks {
    list-style: none;
    line-height: 22px;
    padding: 0;
    list-style: none;
    line-height: 22px;
    padding: 0;
    width: 30%;
    float: left;
    padding-bottom: 65px;
    min-height: 660px;
    padding-top: 8em;
}

@media only screen and (max-width:1279px) {
    .mainLinks {
        width: 100%;
        position: relative;
        display: block;
        padding-top: 44px;
        padding-bottom: 65px;
        height: 100%;
        box-sizing: border-box;
        margin: 0;
    }
}

    .mainLinks a {
        color: #242424;
        display: block;
        font-size: 1.25rem;
        font-family: 'MINISerif-Regular', sans-serif;
        padding: 0 0 0 5%;
        text-decoration: none;
    }

    .mainLinks a span {
        color: inherit;
        display: inline-block;
        padding: 15px 20px 14px 0;
    }

    .mainLinks li.has-child span {
        background: url(../../images/v2/icons/rightArrow.svg) right 19px no-repeat;
    }

    @media only screen and (min-width: 768px) {
        .mainLinks a {
            font-size: 1.375rem;
            padding: 0 0 0 6.25%;
        }
    }

    @media only screen and (min-width: 1280px) {
        .mainLinks li:hover a,
        .mainLinks .active a {
            background-color: #F9F9F9;
        }

        .mainLinks a {
            font-size: 1.375rem;
            padding: 0 0 0 20%;
        }

        .menu {
            height: 100vh;
        }
    }