/* -------------------------------------------------- */
/*                  BASIC PAGE SETUP                  */
/* -------------------------------------------------- */
body {
    color: #333333;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background: #ffffff;
    overflow-x: hidden
    }

body, html {
    height: 100%;
    }

@font-face {
    font-family: 'muliregular';
    src: url('../font/muli-webfont.woff2') format('woff2'), url('../font/muli-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins-Bold.woff2') format('woff2'), url('../font/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    }
    
@font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins-Regular.woff2') format('woff2'), url('../font/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }


/* -------------------------------------------------- */
/*                     NAVIGATION                     */
/* -------------------------------------------------- */
.navbar-background {
    border-top: 0px solid #e9eced;
    border-bottom: 0px solid #e9eced;
    background-color: #000000;
    }

.navbar-container {
    margin: 0px auto;
    max-width: 1200px;
    }

.navbar-default {
    border: 0px solid #e9eced;
    background-color: #000000;
    }

.nav {
    float: none;
    text-align: left
    }

.navbar {
    border: 0px solid transparent;
    position: relative;
    min-height: 50px;
    margin-bottom: 0px;
    }

.navbar-nav {
    width: 100%;
    margin: 0px;
    text-align: center;
    }

.navbar-nav > li {
    float: none;
    color: #a6d609;
    margin: 0px;
    padding: 0px;
    display: inline-block;
    line-height: auto;
    }

.navbar-default .navbar-nav > li > a {
    color: #a6d609;
    font-size: 14px;
    margin-top: 0px;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    padding-left: 14px;
    padding-right: 0px;
    }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #9da589;
    text-decoration: none;
    background-color: transparent;
    }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #9da589;
    text-decoration: none;
    background-color: transparent;
    }

.navbar-default .navbar-toggle {
    margin-top: 10px;
    border-color: #ffffff;
    background-color: #a6d609;
    }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #9da589;
    }

.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
    }

.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #ffffff;
    }

@media (max-width: 767px) {
    .navbar {
        border: 0px solid transparent;
        position: relative;
        min-height: 40px;
        margin-bottom: 0px;
        }

    .navbar-nav > li {
        float: none;
        color: #ffffff;
        display: block;
        line-height: 40px;
        }

    .navbar-default .navbar-nav > li > a {
        width: 100%;
        font-size: 16px;
        text-align: center;
        margin-top: 10px;
        }

    .navbar-default .navbar-nav > li > a:hover {
        text-align: center;
        margin-top: 10px;
        }
    }    
    

/* -------------------------------------------------- */
/*                     MAIN LAYOUT                    */
/* -------------------------------------------------- */
#skiptomain {
    display: none;
    }

#headcontainer {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    }

.headcontent {
    clear: both;
    color: #000000;
    margin: 0px auto;
    padding: 20px;
    position: relative;
    max-width: 1200px;
    }

.banner, .payments {
    width: 100%;
    height: auto;
    margin: 0px auto;
    padding: 80px 0px;
    background-size: cover;
    background-image: url(../image/banner_image.jpg);
    background-repeat: no-repeat;
    background-position: right;
    }
    .banner img, .payments img { width: 100%;}
    .payments { padding: 0px; border-top: 2px solid #ffffff;}
    .payment-overlay { background: rgba(0, 0, 0, 0.4);}
    .payment-overlay img { border-radius: 5px;}

.bannerbackground {
    width: 50%;
    height: 100%;
    margin: 0px;
    padding: 50px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 0 5px 5px 0px
    }
.bannercontent {
    width: 500px;
    margin: 0px 0px 0px auto;
    padding: 20px;
    }
.paymentbackground {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 30px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 5px
    }

@media screen and (max-width: 1024px) {
    .banner {
        padding: 10px;

        }
    .bannerbackground {
        padding: 10px;
        border-radius: 5px;
        }
    .bannercontent {
        width: 100%;
        padding: 10px;
        }
    }
@media screen and (max-width: 767px) {
    .banner {
        padding: 10px;
        }
    .bannerbackground {
        width: 100%;
        padding: 10px;
        }
    .bannercontent {
        width: 100%;
        padding: 10px;
        }
    }    

.maincontent, .productcontent {
    clear: both;
    margin: 0px auto;
    padding: 100px 20px;
    position: relative;
    max-width: 1200px;
    }
    .productcontent {
        padding: 20px 20px 100px 20px;
        }

.colourblock {
    background-color: #a6d609;
    }

#footer {
    height: auto;
    margin: 0px;
    padding: 0px 20px;
    border-top: 2px solid #ffffff;  
    padding-bottom: 0px;
    background-color: #a6d609;
    }

.footercontent {
    clear: both;
    color: #ffffff;
    margin: 0px auto;
    padding: 15px 0px 5px 0px;
    position: relative;
    max-width: 1200px;
    vertical-align: bottom;
    }

.nomore {
    display: none !important;
    }

@media screen and (max-width: 816px) {
    .maincontent { padding: 50px 20px; }
    .productcontent { padding: 20px 20px 50px 20px; }
    }

/* -------------------------------------------------- */
/*                    TYPOGRAPHY                      */
/* -------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: bold;
    }

h1 {
    color: #000000;
    margin: 0px 0px 30px 0px;
    padding: 0px;
    font-size: 46px;
    text-align: center;
    line-height: 50px;
    font-weight: bold;
    }
    .banner h1 { color: #a6d609; text-align: left; font-size: 48px; line-height: 56px;}

h2 {
    color: #000000;
    margin: 0px;
    padding: 0px;
    font-size: 42px;
    text-align: center;
    line-height: 46px;
    }

h3 { 
    color: #000000;
    margin: 0px;
    padding: 0px;
    font-size: 28px;
    text-align: center;
    line-height: 32px;
    }
    .paymentbackground h3 { color: #a6d609}

h4 {
    color: #000000;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    font-size: 16px;
    text-align: left;
    line-height: 20px;
    text-transform: uppercase;
    }

h5 {
    color: #7ea21e;
    margin: 0px;
    padding: 10px 0px 0px 0px;
    font-size: 20px;
    text-align: center;
    line-height: 18px;
    text-transform: uppercase;
    }

h6 {
    color: #000000;
    margin: 0px 0px 10px 0px;
    padding: 10px 0px;
    font-size: 14px;
    text-align: center;
    line-height: 18px;
    text-transform: uppercase;
    border-bottom: 2px solid #a6d609
    }

p {
    color: #000000;
    margin: 5px 0px 30px 0px;
    padding: 0px;
    hyphens: auto;
    font-size: 16px;
    text-align: justify;
    line-height: 24px;    
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    }

.bannercontent p { 
    color: #ffffff; 
    margin: 30px 0px 0px 0px; 
    font-size: 17px; 
    text-align: left;        
    letter-spacing: 1px;
    }

p.logo {
    margin: 0px;
    padding: 0px;
    text-align: left;
    }

p.quickcontacts {
    color: #000000;
    margin: 25px 0px;
    font-size: 20px;
    text-align: right;    
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    }

p.intro {
    font-size: 20px;
    text-align: center;
    line-height: 26px;
    margin: auto 30px 30px 30px;
    }

p.footer {
    color: #000000;
    margin: 0px;
    padding: 0px 0px 10px 0px;
    font-size: 11px;
    text-align: left;
    line-height: 34px;
    }

p.distributor {
    margin: 0px auto;
    padding: 0px 0px 10px 0px;
    font-size: 11px;
    text-align: right;
    line-height: 34px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    }    

.products {
    padding: 0px 13px;    
    text-align: center;
    }

p.forms {
    margin: 5px 0px;
    }

hr {
    width: 150px;
    margin: 30px auto;    
    border: 3px solid #a6d609;
    }

@media screen and (max-width: 767px) {
    h1 {
        font-size: 40px;
        line-height: 40px;
        }
    p.distributor, p.footer, p.logo { text-align: center;}
    }


ul.navbar-nav {
    margin: 0px;
    padding: 0px !important;
    }


/* -------------------------------------------------- */
/*                     7. LINKS                       */
/* -------------------------------------------------- */
a:link, a:visited, a:hover, a:active {
    text-decoration: none
    }

a {
    color: #000000;
    text-decoration: none;
    }

a:link, a:visited {
    color: #000000;
    }
    
 a:hover, a:active {
    color: #a6d609;
    }

.footer a:link, .footer a:visited, .footer a:active, .footer a:hover {
    color: #ffffff;
    border: 0px;    
    padding: 0px 0px 5px 0px;    
    /*margin-right: 10px;*/
    }
    
.btn-primary, .btn-info {
    float: none;
    color: #000000!important;
    margin: 50px auto 50px 0px;
    border: 1px solid #bce453 !important; 
    padding: 15px 30px; 
    font-size: 20px;
    text-align: center;    
    font-weight: bold; 
    font-family: 'poppins', Arial, Helvetica, sans-serif;           
    text-transform: uppercase;    
    background-color: #a3cd35 !important;
    }
    .btn-info {
        margin: 10px 0px;
        padding: 5px 8px; 
        font-size: 13px;
        font-weight: normal; 
        }
.btn-primary:hover, .btn-info:hover {
    color: #000000!important;
    border: 1px solid #a3cd35;    
    background-color: #bce453;
    }

    .btn-primary-alt {
        float: none;
        color: #000000 !important;
        margin: 0px auto;
        border: 1px solid #bce453;  
        background-color: #bce453;
        text-align: center;    
        font-weight: bold;
        text-transform: uppercase;
        }
    .btn-primary-alt:hover {
        color: #000000!important;
        border: 1px solid #bce453;    
        background-color: #bce453;
        }    

@media screen and (max-width: 767px) {
    .btn-primary {
        margin: 20px auto 20px 0px;
        padding: 15px 30px; 
        font-size: 20px;
        background-color: #a3cd35;
        }    
    }


/* -------------------------------------------------- */
/*                   COLOURS                          */
/* -------------------------------------------------- */
.clr1 { color: #a6d609; } /* green */
.clr2 { color: #000000; } /* black */
.clr3 { color: #ffffff; } /* white */


/* -------------------------------------------------- */
/*                      IMAGES                        */
/* -------------------------------------------------- */
img {
    width: auto\9; /* ie8 */
    height: auto\9;
    margin: 0px;
    padding: 0px;
    max-width: 100%;
    border-style: none;
    border-color: inherit;
    border-width: 0;
    }

img.action { margin-bottom: 20px; border-radius: 5px; }

.productcontent img { margin-top: 50px; }


/* ------------------------------------------------- */
/*                      FORMS                        */
/* ------------------------------------------------- */
.access-enabled-form {
    width: 100%;
    color: #000000;
    border: 0px;
    height: 42px;
    padding: 5px 10px;
    font-size: 16px;
    max-width: 100%;
    text-align: justify;
    background: #ffffff;
    line-height: 26px;
    letter-spacing: 1px;
    border-bottom: 1px solid #a6d609
    }

textarea.access-enabled-form { height: 85px; }
.submit { text-align: center; }

:-moz-placeholder { color: #8f9a74; }
::-moz-placeholder { color: #8f9a74 !important; opacity: 1 }
:-ms-input-placeholder { color: #8f9a74; }
::-webkit-input-placeholder { color: #8f9a74; }

/* Fixes */

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #a6d609;
    border-color: #a6d609;
}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #000;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover {
    z-index: 3;
    color: #000;
    background-color: #eee;
    border-color: #ddd;
}

/* IFrame */

.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height:1600px;
    }
    
    /* Then style the iframe to fit in the container div with full height and width */
    .responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    }  

 /*Image product statuses*/

.box{
    position:relative;
}
.img-title {
    font-weight: bold;
    position: absolute;
    color: red;
    left: 40px;
    top: 20%;
    font-size: 16px;
}

/* Store Notice*/
.store-notice {
    display: block;
    padding: 15px 20px;
    font-weight: 700;
    color: #000;
    text-align: center;
    background-color: #a6d609;
}