/**

    * PJ Modern Product Main CSS Stylesheet

    ** Table of Codes **

    * CSS Reset
    * Font Declaration
    * Header Banner
        * Header Banner Left
            * Slider
        * Header Banner Right
    * Main Content
        * Left Sidebar
        * Right Content
            * Product Selection
    * Footer
    * Enquiry


**/


/** ------------------------------------------------------------------------------ **/
/** CSS Reset 
/** ------------------------------------------------------------------------------ **/

/**
 * html5doctor.com Reset Stylesheet v1.6.1 (http://html5doctor.com/html-5-reset-stylesheet/)
 * Richard Clark (http://richclarkdesign.com)
 * http://cssreset.com
 */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	
}
body {
    line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
nav ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none;
    -webkit-transition: all 100ms linear;-moz-transition: all 100ms linear;-o-transition: all 100ms linear;transition: all 100ms linear;
}
/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}

textarea:focus, input:focus{
    outline: 0;
}

em,i{
    font-style: italic;
}

/* @end of CSS Reset  */




/** ------------------------------------------------------------------------------ **/
/** Font Declaration
/** ------------------------------------------------------------------------------ **/
@font-face {
    font-family: 'robotoslabthin';
    src: url('../font/robotoslab/RobotoSlab-Thin.eot');
    src: url('../font/robotoslab/RobotoSlab-Thin.eot?#iefix') format('embedded-opentype'),
         url('../font/robotoslab/RobotoSlab-Thin.woff') format('woff'),
         url('../ont/robotoslab/RobotoSlab-Thin.ttf') format('truetype'),
         url('../font/robotoslab/RobotoSlab-Thin.svg#robotoslabthin') format('svg');
    font-weight: normal;
    font-style: normal;
}


html{
    padding:0;
    margin:0;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
	zoom:100%;
}
body{
    background: url(../images/body-bg.jpg) repeat;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    color: #232323;
	width: 100%;
}
.container{
    width: 1170px;
    margin: 0 auto;
}

/** ------------------------------------------------------------------------------ **/
/** Header Banner
/** ------------------------------------------------------------------------------ **/
header{
    position: relative;
    background: #0082c8;
    z-index: 0;
    height: auto;
    padding-top: 30px;
    padding-bottom: 13px;
    margin-top: -10px;
    overflow: hidden;
}
#top_stripe{
    position: relative;
    z-index: 1;
    background: url(../images/top_stripe.png) repeat-x;
    width: 100%;
    height: 26px;
    display: block;
}

/** ------------------------------------------------------------------------------ **/
/** Header Banner - Header Banner Left
/** ------------------------------------------------------------------------------ **/
.headerbanner_left{
    width: 670px;
    float: left;
    margin-right: 62px;
    overflow: hidden;
}
.logo{
    position: relative;
    margin-bottom: 25px;
    clear: both;
    overflow: hidden;
}
.the_slider{
    position: relative;
    widows: 670px;
    height: 312px;
    padding: 10px;
    background: #eee;
    display: block;
    border-radius: 10px;
    -webkit-border-radius: 10px
    -moz-border-radius: 10px;
}
.the_slider_shadow{
    position: absolute;
    z-index: 1;
    width: 400px;
    height: 77px;
    display: block;
    background: url(../images/slider_shadow.png) no-repeat;
    margin-left: 20px;
    margin-top: -35px;
}

/** ------------------------------------------------------------------------------ **/
/** Header Banner - Header Banner Left - Slider
/** ------------------------------------------------------------------------------ **/
.carousel{
    height:330px;
    overflow:hidden;
}
.carousel-indicators {
    height: 35px;
    bottom: 13%;
    margin: 0;
    padding: 0 5px;
    width: inherit;
    right: 1%;
}

.carousel-indicators .active {
    background: url(../images/banner/banner-indicator/nav-active.png) no-repeat;
    width: 20px;
    height: 20px;
    margin: 6px 1px 0 0;
}

.carousel-indicators li {
    width: 20px;
    height: 20px;
    border: none;
    margin: 6px 1px 0 0;
    background: url(../images/banner/banner-indicator/nav-static.png) no-repeat;
}

.carousel-caption {
    text-align: left;
    left:0;
    margin-left:24px;
    background: rgb(0, 0, 0); /* The Fallback */
    background: rgba(0, 0, 0, 0.4); 
    width: 345px;
    text-shadow:none !important;
    padding: 14px 18px 14px 18px !important;
}
.carousel-caption h2{
    margin: 0;
    font-size: 24px;
    font-family: 'Archivo Narrow', sans-serif;
    color:#fff;
    margin-bottom:10px;
    line-height: 28px;
}
.carousel-caption p {
    font-size:16px;
    font-family: 'Archivo Narrow', sans-serif;
    color:#fff;
    line-height:23px;
    margin-bottom:10px;
}
.carousel-caption a{
    background: #ffd65e; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
    color: #0c5690;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 4px 10px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    /* display: block; */
    width: auto;
    text-align: center;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}
.carousel-caption a:hover{
    background: #febf04; /* Old browsers */
    background: -moz-linear-gradient(top,  #febf04 0%, #ffd65e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febf04), color-stop(100%,#ffd65e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #febf04 0%,#ffd65e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #febf04 0%,#ffd65e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #febf04 0%,#ffd65e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #febf04 0%,#ffd65e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf04', endColorstr='#ffd65e',GradientType=0 ); /* IE6-9 */
    text-decoration: none;
}
.carousel-caption span a:hover {
    text-decoration: none;
    color: #fff;
}
.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

/** ------------------------------------------------------------------------------ **/
/** Header Banner - Header Banner Right
/** ------------------------------------------------------------------------------ **/
.headerbanner_right{
    position: relative;
    float: right;
    width: 438px;
    display: block;
    padding-top: 5px;
    overflow: hidden;
}
a.the_number{
    background: url(../images/phone_icon.png) left center no-repeat;
    padding-left: 40px;
    color: #fff;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 400;
    font-size: 36px;
    float: left;
    margin: 18px 18px 0 0;
}
a.the_number:hover{
    cursor: default;
    text-decoration: none;
}
.address_section{
    position: relative;
    overflow: hidden;
    clear: both;
    margin-top: 45px;
}
h2.the_address{
    background: url(../images/address_icon.png) left center no-repeat;
    padding-left: 28px;
    color: #fff;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 400;
    font-size: 36px;
    padding-top: 3px;
    margin-bottom: 11px;
}
.address_section h3{
    color: #fff;
    font-family: Arial;
    font-weight: 700;
    font-size: 24px;
}
.address_section h4{
    margin-top: 10px;
    color: #fff;
    font-family: Arial;
    font-weight: normal;
    font-size: 20px;
    line-height: 24px;
}
.address_section p{
    margin-top: 5px;
    color: #fff;
    font-family: Arial;
    font-weight: normal;
    font-size: 14px;
    line-height: 20px;
}
.map_social{
    position: relative;
    margin-top: 38px;
    overflow: hidden;
    clear: both;
}
.map_social a.maplogo{
    float: left;
    margin-right: 40px;
}
.map_social a.fbicon{
    float: left;
    margin-right: 5px;
}
.map_social a.twittericon{
    float: left;
}
.headerbanner_bottom{
    position: relative;
    z-index: 0;
    /*width: 1300px;
    height: 89px;*/
    width: 100%;
    height: 105px;
    background: url(../images/headerbanner_bottom.png) no-repeat;
    display: block;
    margin: 0 auto;
    margin-top: 0;
    background-size: 100%;
}

/** ------------------------------------------------------------------------------ **/
/** Main Content
/** ------------------------------------------------------------------------------ **/
#main_content{
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    clear: both;
}


/** ------------------------------------------------------------------------------ **/
/** Main Content - Left Sidebar
/** ------------------------------------------------------------------------------ **/
.left_sidebar{
    width: 23.1%;
    float: left;
    margin-right: 28px;
}
.widget{
    background: #fff;
    border: 1px solid #0082c8;
    text-align: center;
    padding: 32px 0;
    margin-bottom: 20px;
}
.customer_love{
    padding: 0;
    padding-bottom: 15px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    text-align: left;
    background: #f7f7f7;
}
.customer_love h2{
    background: #0082c8;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 26px;
    font-weight: normal;
    color: #fff;
    padding:10px 20px;
}
ul.left_sidebar_list{
    margin-top: 10px;
    padding: 0 20px;
}
ul.left_sidebar_list li{
    display: block;
    list-style-type: none;
    padding: 9px 0;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #fff;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 16px;
    color: #666666;
}
ul.left_sidebar_list li:first-child{
    border-top: 0;
}
ul.left_sidebar_list li:last-child{
    border-bottom: 0;
}
ul.left_sidebar_list li a{
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 16px;
    color: #666666;
}

/** ------------------------------------------------------------------------------ **/
/** Main Content - Right Sidebar
/** ------------------------------------------------------------------------------ **/
.right_content{
    width: 870px;
    float: left;
}
.right_content h1{
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 32px;
    color: #2887d2;
    margin-bottom: 8px;
}
.right_content h2{
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 26px;
    color: #2887d2;
    font-weight: normal;
    margin-bottom: 20px;
}
.right_content p{
    font-family: Arial;
    font-size: 14px;
    color: #666666;
    line-height: 24px;
    margin-bottom: 25px;
}

/** ------------------------------------------------------------------------------ **/
/** Main Content - Right Sidebar - Product Selection
/** ------------------------------------------------------------------------------ **/
.product_selection{
    position: relative;
    overflow: hidden;
}
.product_selection ul{
    position: relative;
}
.product_selection ul li{
    list-style-type: none;
    width: 260px;
    float: left;
    margin-right: 30px;
    margin-bottom: 45px;
}
.product_selection ul li:nth-child(3),
.product_selection ul li:nth-child(6),
.product_selection ul li:nth-child(9),
.product_selection ul li:nth-child(12){
    margin-right:0;
    clear: right;
}
.product_selection ul li img{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.product_selection ul li h3{
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 20px;
    color: #2887d2;
    font-weight: normal;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 400;
}
.product_selection ul li p{
    font-family: Arial;
    font-size: ]14px;
    color: #666666;
    line-height: 24px;
    margin-bottom: 13px;
}
a.vli{
    background: #ffd65e; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
    color: #0c5690;
    font-family: 'Archivo Narrow', sans-serif;
    font-weight: 700;
    font-size: 18px;
    padding: 5px 2px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    display: block;
    width: 144px;
    text-align: center;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}
a.vli:hover{
    background: #febf04; /* Old browsers */
    background: -moz-linear-gradient(top,  #febf04 0%, #ffd65e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#febf04), color-stop(100%,#ffd65e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #febf04 0%,#ffd65e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #febf04 0%,#ffd65e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #febf04 0%,#ffd65e 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #febf04 0%,#ffd65e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febf04', endColorstr='#ffd65e',GradientType=0 ); /* IE6-9 */
    text-decoration: none;
}

/** ------------------------------------------------------------------------------ **/
/** Footer
/** ------------------------------------------------------------------------------ **/
footer{
    position: relative;
    z-index: 0;
    background: #0082c8;
    padding: 20px 0;
    margin-top: -10px;
    overflow: hidden;
}

/** ------------------------------------------------------------------------------ **/
/** Footer - Copyright
/** ------------------------------------------------------------------------------ **/
.copyright{
    position: relative;
    float: left
}
.copyright p{
    font-family: Arial;
    font-size: 12px;
    color: #fff;
    float: left;
    padding-top: 10px;
}
.copyright img{
    float: left;
    margin-left: 15px;
}
.footer_nav{
    position: relative;
    float: right;
    padding-top: 10px;
}
.footer_nav ul li{
    list-style-type: none;
    display: inline-block;
}
.footer_nav ul li a,
.footer_nav ul li span{
    font-family: Arial;
    font-size: 12px;
    color: #fff;
}

/** ------------------------------------------------------------------------------ **/
/** Enquiry
/** ------------------------------------------------------------------------------ **/
#inquiry{background:none;}
#inquiry{border:0;}
.formWrap{border:1px #eee solid; width:462px; padding:20px 30px;}
.formWrap .masthead{text-align:center; border-bottom:4px #FFD701 solid;}
.formWrap h2{font-family: 'Archivo Narrow', sans-serif;color:#136B9C;margin-top:16px;margin-bottom: 16px;line-height: 1.2;font-size: 1.5em;}
.formWrap .input-wrap{overflow:hidden; margin-bottom:8px;font-size: 75%;}
.input-det{float:left; width:90px;}
.input-area{float:right; width:260px;}
.input-area input[type="text"]{width:240px;}
.input-wrap textarea{width:390px; height:120px;}
.input-wrap input[type="file"]{border:0;}
input[type="text"], textarea, select {
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
font-size: 100%;
border: 1px #ccc solid;
}

.back-to-top {position: fixed;right: 15px;text-decoration: none;color: #000000;font-size: 12px; padding: 1em;display: none;top:88%;z-index:99999;opacity:0.8;-webkit-opacity:0.8;-moz-opacity:0.8;}
.back-to-top:hover{opacity:1;-webkit-opacity:1;-moz-opacity:1;}

#enquiry-product errors {
font-size: 12px;
text-align: center;
color: red;
}



/***********************************************************************************************/
/* 22. Thankyou Page */
/***********************************************************************************************/
#popForm {
 width: 460px;
 margin: 2em;
 border: 1px #eee solid;
 padding: 2em;
 background: #fff;
}
#popForm .masthead {
 padding-bottom: 2em;
 margin-bottom: 2em;
 text-align: center;
 border-bottom: 3px #c5b12c solid;
}
#popForm h1 {
 font: bold 28px "Droid Sans", Helvetica, Arial, sans-serif;
 color: #2887d2;
}