/*@font-face {
    font-family: 'Helvetica Condensed Bold';
    src: url('../fonts/HelveticaNeue-HeavyCond.eot');
    src: url('../fonts/HelveticaNeue-HeavyCond.eot?iefix') format('eot'), url('../fonts/HelveticaNeue-HeavyCond.woff') format('woff'), url('../fonts/HelveticaNeue-HeavyCond.ttf') format('truetype'), url('../fonts/HelveticaNeue-HeavyCond.svg#helvetica') format('svg');
}
*/

html {
    font-size: 12px;
}

body {
    padding-bottom: 20px;
    background-color: #2F2F2F;
    color: white;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

h2, .h2, h3, .h3 {
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

h1, .h1 {
    font-weight: normal;
    font-family: 'Helvetica Condensed Bold', sans-serif;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.no-padding {
    padding: 0 !important;
}

.center {
    text-align: center;
}

.page {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
}

.cover-page {
    height: 100%;
    min-height: 100%;
}

.container {
    width: 100%;
}

.cover .feature {
    /*background: #2A2A2A;*/
    height: 33%;
    min-height: 120px;
    max-height: 250px;
    width: 100%;
    top: 30%;
    position: absolute;
    background-image: url(Images/cover.png);
    background-color: #2A2A2A;
    background-position: right center;
    background-repeat: no-repeat;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    -webkit-background-size: auto 100%;
    background-size: auto 100%;
}

    .cover .feature .container {
        padding-top: 20px;
        padding-bottom: 20px;
        height: 100%;
    }

    .cover .feature h1 {
        text-align: center;
        font-size: 1.3rem;
        margin-top: -4.3rem;
        vertical-align: top;
        display: block;
        text-transform: uppercase;
    }

        .cover .feature h1 span {
            font-size: 1.7rem;
        }

.title {
    height: 3.5rem;
    margin-top: -5rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    background: url('images/vs-title.png') no-repeat center top;
    background-size: contain;
    max-width:200px;
}

    .title img {
        height: 100%;
    }


.cover .feature #secondword {
    color: #666;
    margin-top: 0;
}

.cover-contactus {
    clear: both;
    height: 7.5rem;
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

    .cover-contactus .container > a {
        text-decoration: none;
        color: #ccc;
        font-size: 1.5rem;
        line-height: 1.4;
        font-weight: 200;
        font-family: 'Roboto', sans-serif;
    }

        .cover-contactus .container > a > span {
            padding: 0 0 0 15px;
        }

        .cover-contactus .container > a:hover {
            color: #fff;
        }

.cover-on .page {
    display: none;
}

.cover-on .cover {
    display: block;
}

.item {
    position: relative;
    float: left;
    padding: 10px;
}

    .item .card {
        padding: 1.8rem;
        border-radius: 5px;
        background-color: #eee;
        background-position: 94% 92%;
        background-repeat: no-repeat;
        color: #262524;
        border-top: 0.5rem solid;
        -moz-min-width: 215px;
        -ms-min-width: 215px;
        -o-min-width: 215px;
        -webkit-min-width: 215px;
        min-width: 215px;
        /*min-width: 240px;*/
        box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
        max-height: 19.8rem;
        overflow:hidden;
    }

.text-height {
    max-height: 8.5rem;
}

.tag-nz_north .card {
    background-image: url('Images/nz-north.png');
}

.tag-nz_south .card {
    background-image: url('Images/nz-south.png');
}

.tag-account.tag-nz .card {
    background-image: url('Images/nz-admin.png') !important;
}


.tag-au_nsw .card {
    background-image: url('Images/au-nsw.png');
}

.tag-au_qld .card {
    background-image: url('Images/au-qld.png');
}

.tag-au_vic .card {
    background-image: url('Images/au-vic.png');
}

.tag-au_sa .card {
    background-image: url('Images/au-sa.png');
}

.tag-au_wa .card {
    background-image: url('Images/au-wa.png');
}

.tag-account.tag-au .card {
    background-image: url('Images/au-admin.png') !important;
}

.item .card:hover {
    box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
    background-color: #fff;
}


.tag-steel .card {
    border-top-color: #429867; /* blue */
}

.btn.filter-steel.active, .navbar-inverse .navbar-nav > li.filter-steel.active > a {
    background-color: #429867;
}

.filtermenu .btn-group .filter-steel {
    border-top: 2px solid #429867;
}

.filtermenu .btn-group .filter-plate {
    border-top: 2px solid #3c708c;
}

.tag-plate .card {
    border-top-color: #3c708c; 
}

.btn.filter-plate.active, .navbar-inverse .navbar-nav > li.filter-plate.active > a {
    background-color: #3c708c;
}

.filtermenu .btn-group .filter-coil {
    border-top: 2px solid #FAB243;
}

.tag-coil .card {
    border-top-color: #FAB243; 
}

.btn.filter-coil.active, .navbar-inverse .navbar-nav > li.filter-coil.active > a {
    background-color: #FAB243;
}

.filtermenu .btn-group .filter-account  {
    border-top: 2px solid #cc4141;
}

.tag-account .card {
    border-top-color: #cc4141; 
}

.btn.filter-account.active, .navbar-inverse .navbar-nav > li.filter-account.active > a {
    background-color: #cc4141;
}

.filtermenu .btn-group .filter-stainless  {
    border-top: 2px solid #9a458b;
}

.tag-stainless .card {
    border-top-color: #9a458b;
}

.btn.filter-stainless.active, .navbar-inverse .navbar-nav > li.filter-stainless.active > a {
    background-color: #9a458b;
}

.item .card h2 {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    line-height: 1.5rem;
    max-height: 3rem;
}

.item .card p {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.4rem;
}

.item .card address {
    line-height: 1.4rem;
    border-top: 1px solid #ccc;
    font-style: normal;
    margin-bottom: 0px;
    margin-top: 1.2rem;
    padding-top: 0.7rem;
}

.item .card .contact-title {
    display: block;
    font-size: 0.8rem;
    line-height: 1em;
    margin-bottom: 2px;
    margin-top: 8px;
    text-transform: uppercase;
}

.iso-container {
    padding: 10px 0;
    margin-left: -15px;
    margin-right: -15px;
}

.btn-grey {
    color: #ccc;
    background-color: #555555;
    margin-right: 4px;
    padding: 8px 16px;
    font-weight: 300;
    font-size: 1rem;
    text-transform: uppercase;
}

    .btn-grey:hover {
        color: #fff;
    }

.btn-group {
    margin: 5px 0;
    width: 100%;
}

.btn-equal {
    width: 50%;
    padding: 8px 0px;
    margin-right: 0px;
}

.mobilemenu .btn-group > .btn:first-child {
border-right: 2px solid #2f2f2f;
}

.mobilemenu .btn-group > .btn:last-child {
border-left: 2px solid #2f2f2f;
}

.mobilemenu .navbar-inverse .navbar-toggle {
border-color: #2f2f2f;
}



.btn:active, .btn.active {
    background-color: #333333;
    color: #FFF;
}

.btn-grey:focus {
    color: #FFF;
}

.navbar-inverse {
    background-color: #2f2f2f;
    border: 0 none;
}

.logo {
    background-image: url('Images/logo.jpg');
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    width: 120px;
    height: 80px;
    display: block;
    margin-top: 17px;
}

.filter-location {
    margin-left: 5px;
}


    .filter-location .dropdown > a {
        color: #fff;
        text-decoration: none;
    }

    .filter-location .dropdown a:hover {
        color: #2a6496;
    }


.filter-location .dropdown .ng-scope, .mobilemenu .dropdown .ng-scope {
    display: inline-block;
    height: 23px;
    width: 43px;
    position:relative;
    top: 3px;
}

.filter-location .dropdown .ng-scope span, .mobilemenu .dropdown .ng-scope span {
    display: inline-block;
    height: 23px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 0 16px;
    background-image: url(images/flag.png);
    background-repeat:no-repeat;
    }
.nz-flag {
    background-position: -34px -23px;
}

.au-flag {
    background-position: 0 -23px;
}

.active .nz-flag {
    background-position: -34px 0;
}

.active .au-flag {
    background-position: 0 0;
}



.filter-division {
    margin-left: 15px;
}

nav .row {
    position: relative;
}

.filter-logo {
    position: absolute;
    top: 0;
    right: 12px;
}

#menu-wrap {
    width: 100%;
    top: 0;
    z-index: 10;
}

.stay {
    height: 97px;
}

.mobilemenu .dropdown h3 {
    font-size: 1.2rem;
    font-weight: 300;
    margin-top: 15px;
    margin-bottom: 0px;
    padding-bottom: 5px;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
}

.mobilemenu .dropdown a:hover, .mobilemenu .dropdown a:focus {
    text-decoration: none;
}

.mobilemenu .dropdown h3 .caret {
    float: right;
    margin-top: 10px;
}

.mobilemenu .dropdown-menu {
    width: 100%;
    background: #2f2f2f;
    position: relative;
    text-transform: uppercase;
    border: none;
    border-top: 1px solid #666;
    box-shadow: none;
    padding-bottom: 0px;
    border-radius: 0;
}

    .mobilemenu .dropdown-menu > li > a {
        color: #777;
        padding: 5px 0px;
    }

        .mobilemenu .dropdown-menu > li > a:hover {
            color: #fff;
            background: transparent;
        }

.break-mobile {
    display: inline !important;
}

.mobilemenu .container {
padding-left: 5px;
padding-right: 5px;
}

/*Medium Devices (Phones)*/
@media (max-width: 767px) {
    .collapsed {
        outline: none;
        color: #FFF;
        background-color: #555555;
    }

    .navbar-inverse {
        margin-bottom: 5px;
    }

    .nav > li {
        color: #FFF;
    }
}

/* Landscape Medium Devices (Phones) */
@media (min-width : 469px) {
    .cover .feature {
        min-height: 90px;
    }

    .cover-contactus {
        height: 3.5rem;
    }

    .break-mobile {
        display: none !important;
    }

    .col-xs-12 {
    width: 50%;
}

    .item {
    padding:5px;
    }
}

/*Small Devices (Tablets)*/
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    .stay {
        height: 102px;
    }

    .cover .feature {
        top: 33%;
        min-height: 190px;
    }

    .container {
        width: 95%;
    }

    .btn-grey {
        font-size: 0.8rem;
        padding: 8px 5px;
        margin-right:3px;
    }

       .item {
    padding:10px;
    }

    .item .card p {
        font-size: 1rem;
    }

    .btn-group {
        width: auto;
    }

    .item .card .contact-title {
        font-size: 0.7rem;
    }

    .cover .feature h1 {
        text-align: left;
        font-size: 2.9rem;
        margin-top: 0rem;
        vertical-align: middle;
        display: table-cell;
    }

        .cover .feature h1 span {
            font-size: 3.5rem;
        }


    .title {
        margin-top: 0rem;
        width:48%;
    margin-left: 0;
    margin-right: 0;
    display: block;
    height: 100%;
    background: url('images/vs-title.png') no-repeat left center;
    background-size: contain;
    max-width: none;
    }

    .cover-contactus {
        height: 6rem;
    }

        .cover-contactus .container > a {
            font-size: 2rem;
            line-height: 6rem;
        }
}

/*Medium Devices (Desktops)*/
@media (min-width: 992px) {
        .col-md-4 {
    width: 33.3333%;
}

    .cover .feature .vulcan-circle {
        display: inline;
    }

    .container {
        width: 98%;
    }

    .btn-grey {
        padding: 8px 13px;
        margin-right:4px;

    }

    .cover .feature h1 {
        font-size: 3.2rem;
    }

        .cover .feature h1 span {
            font-size: 4.5rem;
        }


}

/*Large Devices (Desktops)*/
@media (min-width: 1200px) {
        .btn-grey {
        padding: 8px 16px;
        margin-right:4px;

    }

    .container {
        max-width: 1180px;
    }
}