@charset "utf-8";
/*----------intial declartaion of css----------*/
* {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, select, input, option {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

html {
    -webkit-text-size-adjust: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: none
}

q:before, q:after {
    content: '';
    content: none
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em
}

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}

button, input, select, textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: none;
    cursor: pointer;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

ol, ul {
    list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    font-weight: normal;
}

a {
    text-decoration: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}

blockquote, q {
    quotes: "" "";
}

table {
    border: 0 none;
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    vertical-align: top;
}

img {
    border: 0 none;
    max-width: 100%;
}

a {
    outline: none;
    cursor: pointer;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
}

/* End hide from IE Mac */
.none {
    display: none;
}

/* End Clearfix */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block
}

.clear {
    clear: both;
}

img {
    max-width: 100%;
}

/* For modern browsers */
.cf:before, .cf:after {
    content: "";
    display: table
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

/* For IE 6/7 (trigger hasLayout) */

p {
    font-family: 'open sans';
    font-size: 14px;
    line-height: 22px;
}

h1 {
    font-size: 88px;
    color: #fff;
    font-family: 'HelveticaNeueCE-blackcond';
    font-weight: 400;
    line-height: 38px;
    padding-top: 23px;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, .75);
}

h2 {
    font-size: 38px;
    color: #fff;
    font-family: 'HelveticaNeueCE-blackcond';
    font-weight: 400;
    line-height: 38px;
    margin-bottom: 30px;
}

h3 {
    font-size: 18px;
    color: #df2927;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-family: 'FranklinGothic-Heavy';
    font-weight: 400;
    line-height: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 12px;
}

/*--------sticky footer or vertical footer------------*/
body {
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #fff;
    font-family: 'Open Sans', Arial, sans-serif;
}

.wrapper {
    margin: 0 auto; /*initialize footer height in negative for sticky footer*/
}

body, html {
    height: 100%;
}

/*--------sticky footer or vertical footer------------*/

/*-----------------------main styles starts here-----------------------------------------------*/
.main {
    width: 960px;
    margin: 0 auto
}

/*-----------header section styles goes here---------------*/
#header-main {
    background: #df2927;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    position: fixed;
    z-index: 999
}

#header-main .logo {
    display: inline-block
}

#header-main .logo a {
    display: inline-block
}

#header-main .logo a img {
    display: inline-block;
    width: 245px;
}

/*-----------header section styles ends here----------------*/

/*-----------Banner section styles goes here---------------*/
.banner {
    width: 100%;
    background: url(../images/banner.jpg) no-repeat center center;
    background-size: cover;
    height: 675px;
    -ms-behavior: url(../backgroundsize.min.htc);
    behavior: url(../backgroundsize.min.htc);
}

.banner-wrapper {
    height: 675px;
    width: 100%;
    display: table;
    padding-top: 10px;
    text-align: center
}

.banner-contain {
    height: 100%;
    width: 100%;
    display: table-cell;
    padding-top: 150px;
}

.banner h1 {
    position: relative;
    z-index: 10;
    text-shadow: 1.414px 1.414px 5px rgba(0, 0, 0, 0.75);
}

.banner h1:before {
    content: "";
    position: absolute;
    left: 0px;
    top: -90px;
    background: url(../images/banner-shadow.png) no-repeat;
    width: 100%;
    height: 237px;
    z-index: -5
}

/*-----------Banner section styles ends here---------------*/

/*-----------midd section styles goes here-----------*/
#mid-container {
    width: 100%;
}

/*-----------About section styles goes here---------------*/
.about-section {
    width: 100%;
    background: #df2927;
    padding: 27px 0 20px;
    text-align: center
}

.about-main {
    margin-top: 15px;
}

.about-section h2 {
    display: inline-block;
    font-size: 39px;
    vertical-align: middle;
    margin-bottom: 5px;
    line-height: 1.2em;
}

.about-section .btn {
    padding-left: 70px;
}

.btn {
    display: inline-block;
    vertical-align: middle
}

.btn a {
    border: 2px solid #fff;
    padding: 4px 67px 5px 14px;
    display: inline-block;
    color: #fff;
    font-size: 16px;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    position: relative;
    height: 34px;
}

.about-section .btn a:after {
    content: "";
    position: absolute;
    right: 0;
    top: -1px;
    border-left: 2px solid #fff;
    background: url(../images/arrow.png) no-repeat center 6px;
    width: 33px;
    height: 31px;
}

.btn a:hover {
    background: #fff;
    color: #df2927
}

.btn a:hover:after {
    background: url(../images/arrow-hover.png) no-repeat center 6px;
    border-color: #df2927
}

/*-----------About section styles ends here---------------*/

/*-----------Own lifetime section styles goes here---------------*/
.own-lifetime-section {
    background: url(../images/own-lifetime-banner.jpg) no-repeat center center;
    width: 100%;
    height: 615px;
    background-color: #000000;
    position: relative;
    z-index: 10;
    -ms-behavior: url(../backgroundsize.min.htc);
    behavior: url(../backgroundsize.min.htc);
}

.own-lifetime-section:after {
    content: "";
    position: absolute;
    right: 0;
    width: 100%;
    /*height: 100%;*/
    z-index: -9;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+10,000000+100&0+10,1+100 */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 10%, rgba(0,0,0,1) 100%); /* FF3.6+
    background: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 10%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
    /*background: -o-linear-gradient(left, rgba(255,255,255,0) 10%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
    */ /*background: -ms-linear-gradient(left, rgba(255,255,255,0) 10%,rgba(0,0,0,1) 100%); /* IE10+ */ */ /*background: linear-gradient(to right, rgba(255,255,255,0) 10%,rgba(0,0,0,1) 100%); /* W3C */ */ /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=1 ); /* IE6-8 */ */
}

* /*/*/
.own-lifetime-section .right-section {
    float: left;
    width: 400px;
    margin: 173px 35px;
}

.own-lifetime-section .right-section h2 {
    font-size: 52px;
    line-height: 48px;
    text-shadow: 3px 3px 10px rgba(0, 0, 0, .75);
    margin-bottom: 26px;
}

.own-lifetime-section .right-section p {
    font-family: "Open Sans";
    font-size: 16px;
    color: #fff;
    width: 345px !important;
    margin-top: -13px !important;
    line-height: 21px !important;
}

.own-lifetime-section .btn {
    margin-top: 40px;
}

.own-lifetime-section .btn a {
    font-size: 16px;
    color: #fff;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    padding: 6px 15px;
    display: inline-block;
    background: #df2927;
    width: 100%;
    position: relative;
    border: none;
    text-align: left;
    min-width: 200px;
    height: 35px;
}

.own-lifetime-section .btn a:after {
    content: "";
    position: absolute;
    right: -36px;
    top: 0px;
    background: #df2927 url(../images/arrow.png) no-repeat center 8px;
    width: 35px;
    height: 35px;
}

.own-lifetime-section .btn a:hover {
    color: #df2927;
    background: #fff
}

/*.own-lifetime-section .btn a:hover:after{background:#fff url(../images/arrow-hover.png) no-repeat center 8px;}*/
/*-----------Own lifetime section styles ends here---------------*/

/*-----------Left to chance section styles goes here---------------*/
.left-to-chance {
    background: url(../images/left-to-chance-bg.jpg) no-repeat;
    width: 100%;
    background-size: cover;
    min-height: 566px;
    text-align: center;
    padding: 55px 0;
    -ms-behavior: url(../backgroundsize.min.htc);
    behavior: url(../backgroundsize.min.htc);
}

.left-to-chance ul {
    width: 100%;
    margin-top: 40px;
    display: inline-block
}

.left-to-chance ul li {
    width: 23.5%;
    display: inline-block;
    margin: 0 5px;
    vertical-align: top
}

.left-to-chance img {
    display: block
}

.left-to-chance .tab-img {
    display: none
}

.left-to-chance .list-contain {
    background: #fff;
    padding: 20px 20px 25px;
    min-height: 236px;
}

.left-to-chance .list-contain p {
    font-size: 12px;
    color: #000;
    line-height: 14px;
    text-align: left
}

/*-----------Left to chance section styles ends here---------------*/

.our-range {
    background: #171a1d;
    text-align: center;
    padding: 48px 0 48px;
}

.our-range h2, .range-at-bunnings h2, .kits-at-bunning h2 {
    color: #df2927;
}

.range-at-bunnings .soon {
    position: absolute;
    z-index: 10;
}

.range-at-bunnings .soon img {
    float: left;
}

.range-at-bunnings .comingsoon {
    position: absolute;
    width: 100%;
    height: 226px;
    background-color: #fff;
    opacity: 0.5;
}

.range-at-bunnings {
    width: 100%;
}

.range-at-bunnings h4 {
    font-size: 18px;
    color: #df2927;
    font-family: 'FranklinGothic-Heavy';
    font-weight: 400;
    line-height: 18px;
    margin: 8px 0 10px;
    width: 100%;
    margin-top: 165px;
}

.range-at-bunnings a {
    font-size: 14px;
    color: #fff;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    padding: 6px 40px 4px 8px;
    display: inline-block;
    background: #df2927;
    width: 100%;
    position: absolute;
    text-align: right;
    left: 0;
    bottom: 0;
    height: 30px;
}

.range-at-bunnings a:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0px;
    border-left: 1px solid #fff;
    background: #333333 url(../images/arrow.png) no-repeat center 6px;
    width: 30px;
    height: 30px;
}

.range-at-bunnings a:hover {
    color: #df2927;
    background: #fff
}

.range-at-bunnings a:hover::after {
    border-left: 1px solid #df2927;
    background: #fff url(../images/arrow-hover.png) no-repeat center 6px;
    width: 30px;
    height: 30px;
}

.range-at-bunnings a.not-active {
    pointer-events: none;
    cursor: default;
}

.range-at-bunnings .range-at-bunnings-contain img {
    cursor: pointer;
}

/*.range-at-bunnings-wrapper:hover {background-color: rgba(223, 41, 39, 0.5); width: 460px !important; height: 572px !important;}*/

.product {
    color: red;
    z-index: auto;
}

.product img {
    transition: all 0.2s linear;
    max-width:100%;
    width:100%;
}

.product:hover h4 {
    color: #fff;
}

.product:hover img {
    transform: scale(1.2);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%); /* For Webkit browsers */
    filter: gray; /* For IE 6 - 9 */
    -webkit-transition: all .6s ease; /* Transition for Webkit browsers */
}

.product .mask {
    width: 100%;
    height: 210px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0
}

/*.product .mask { background-color: rgba(219,127,8, 0.7);  transition: all 0.4s ease-in-out;}*/
.product:hover .mask {
    background-color: rgba(223, 41, 39, 0.8);
    cursor: pointer;
    background-blend-mode: multiply;
}

.product:hover a{
    color: #DF2927;
    background: #FFF none repeat scroll 0% 0%;
}

.product:hover a:after{
    background: #FFF url("../images/arrow-hover.png") no-repeat scroll center 7px;
    border-left: 1px solid;

}

/*.range-at-bunnings a:hover:after{background:#df2927 url(../images/arrow.png) no-repeat center 6px;}*/
.range-at-bunnings ul {
    margin: 0px 0 0;
}

.range-at-bunnings ul li {
    display: inline-block;
    margin: 0 5px 10px;
    width: 23.6%;
    height: 230px;
    position: relative;
    vertical-align: top;
    overflow: hidden;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f2f2+0,ffffff+50 */
    background: #fff;
}

.range-at-bunnings ul li .soon {
}

.range-at-bunnings .range-at-bunnings-wrapper {
    display: table;
    width: 100%;
    height: 160px;
}

.range-at-bunnings .range-at-bunnings-contain {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle
}

.kits-at-bunning {
    width: 100%;
    margin-top: 45px;
    display: none
}

.kits-at-bunning ul {
    width: 100%;
    margin: 52px 0 0
}

.kits-at-bunning ul li {
    display: inline-block;
    margin: 0 5px;
    width: 32%;
    border: 2px solid #e5e5e5;
    text-align: center;
    padding: 18px 20px 30px;
    vertical-align: top;
    position: relative;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f2f2+0,ffffff+50 */
    background: #f2f2f2; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YyZjJmMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(left, #f2f2f2 0%, #ffffff 50%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #f2f2f2), color-stop(50%, #ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #f2f2f2 0%, #ffffff 50%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #f2f2f2 0%, #ffffff 50%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #f2f2f2 0%, #ffffff 50%); /* IE10+ */
    background: linear-gradient(to right, #f2f2f2 0%, #ffffff 50%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#ffffff', GradientType=1); /* IE6-8 */
}

.kits-at-bunning p {
    font-size: 12px;
    line-height: 14px;
    color: #000;
    text-align: left
}

.kits-at-bunning h3 {
    margin: 15px 0
}

.kits-at-bunning .btn {
    margin: 30px 0 0 0;
}

.kits-at-bunning .btn a {
    font-size: 14px;
    color: #fff;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-weight: 700;
    padding: 6px 45px 5px 0;
    display: inline-block;
    background: #df2927;
    width: 100%;
    position: absolute;
    text-align: right;
    left: 0;
    bottom: 0;
    border: 0;
    height: 30px
}

.kits-at-bunning .btn a:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0px;
    border-left: 1px solid #fff;
    background: #333333 url(../images/arrow.png) no-repeat center 6px;
    width: 30px;
    height: 30px;
}

.kits-at-bunning .btn a:hover {
    background: #333333;
    color: #fff
}

.kits-at-bunning .btn a:hover:after {
    background: #df2927 url(../images/arrow.png) no-repeat center 6px;
}

/*----------------midd section styles ends here-------*/

/*----------------footer section  styles goes here-----------*/
header, footer {
    margin: 0;
    background-color: #000;
}

#footer-main {
    background: #df2927;
    width: 100%;
    color: #fff;
    padding: 20px 0px;
}

#footer-main p {
    text-align: left;
    color: #fff;
    font-size: 14px;
    line-height: 60px;
    margin: 0;
    padding: 0
}

#footer-main .footer-left {
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    float: left;
    text-align: left;
}

#footer-main .footer-right {
    display: inline-block;
    vertical-align: middle;
    width: 20%;
    text-align: right
}

#footer-main a {
    display: inline-block
}

#footer-main img {
    display: block
}

.preloader {
    display: none;
}

footer .terms-conditions {
    width: 1000px;
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 40px;
}

footer .terms-conditions p {
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: normal;
    margin: 0;
    padding: 0
}

footer .terms-conditions a {
    color: #fff;
    text-decoration: underline;
}

/*----------------footer section styles ends here--------*/

.featured-products {
    max-width: 800px;
    margin: auto;
    display: table;
}

.featured-products .left-pro {
    float: left;
    width: 50%;
    position: relative;
}

.featured-products .right-pro {
    float: left;
    width: 50%;
    position: relative;
}

.fea-thumb {
    float: left;
    width: 50%;
    position: relative;
}

.fea-content {
    float: right;
    width: 50%;
    position: relative;
    text-align: left;
}

.fea-content h3 {
    font-size: 18px;
    color: #FFFFFF;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-family: 'FranklinGothic-Heavy';
    font-weight: 400;
    line-height: 18px;
}

.fea-content p {
    font-size: 12px;
    line-height: normal;
    margin-bottom: 18px;
}