﻿body {
    line-height: 1.3;
    font-family: 'Roboto', Arial,'Noto Serif', serif;
    position:relative;
}

a:hover {
    text-decoration: none;
    color: #D10A11;
}

.logo {
}
img{
    max-width:100%!important;
}

.mainnav {
    background-color: #fff;
    height: 54px;
    border-top: solid 1px #ddd;
}

.headtop {
    padding: 15px 0;
    position: relative;
}

.mainnav .nav {
    float: left;
}

    .mainnav .nav li {
        padding: 0 14px;
    }

        .mainnav .nav li a {
            line-height: 54px;
            color: #054e25;
            transition-property: color;
            transition-duration: .5s;
            text-transform: uppercase;
            font-weight: bold;
        }

            .mainnav .nav li a:hover {
                color: #D10A11;
            }

        /*.mainnav .nav li.active > a {
            color: #D10A11;
        }*/

.subnav {
    display: none;
    position: absolute;
    top: 53px;
    min-width: 220px;
    background: #fff;
    border: 1px solid rgba(201, 201, 201, 0.6);
    padding: 4px;
    margin: 0;
    box-shadow: rgba(0, 0, 0, 0.107059) 0px 2px 8px, rgba(0, 0, 0, 0.368627) 0px 0px 0px;
    z-index: 999;
}

.mainnav .subnav li {
    display: block;
    padding: 8px;
}

    .mainnav .subnav li a {
        line-height: normal;
        display: block;
        width: 100%;
        font-weight: normal;
        text-transform: capitalize;
    }
/*.dropdown:hover .subnav{
    display:block;
}*/
.frm-mainform {
    position: relative;
}

    .frm-mainform input {
        background-color: transparent;
        color: #A6B3BC;
        border: 1px solid #212529;
        height: 32px;
        padding: 0px 30px 0 10px;
        font-size: 13px;
        width: 160px;
        margin: 0;
        -webkit-appearance: none;
        vertical-align: top;
        font-weight: 400;
        width: 270px;
    }

        .frm-mainform input[placeholder] {
            color: #A6B3BC;
        }

    .frm-mainform button {
        background-color: transparent;
        border: none;
        position: absolute;
        right: 10px;
        top: 5px;
    }

.mainnav .right-nav {
    float: right;
}

    .mainnav .right-nav li {
        padding: 0 8px;
    }

    .mainnav .right-nav .subnav li {
        padding: 8px;
    }

a, input {
    outline: none;
}

.breadcrumb {
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    margin: auto;
    text-align: center;
    display: inline-block;
}

.breadcrumb-item a {
    color: #fff;
}

.breadcrumb-item.active {
    color: #f3650e;
}

.wrlnl {
    width: 100px;
    margin-right: 10px;
    float: left;
}

.wrlnr {
    width: calc(100% - 110px);
    float: left;
}

.latestnews h3 {
    margin-bottom: 1em;
}

    .latestnews h3 a {
        color: #054e25;
        font-size: 20px;
        font-weight: 700;
    }

.latestnews h4 a {
    font-size: 15px;
    color: #333;
}

.latestnews .row {
    margin-bottom: 10px;
    border-bottom: dotted 1px #ddd;
    padding-bottom: 15px;
}

.latestnews .col-3 {
    padding-left: 0;
    padding-right: 0;
}

.latestnews img {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
}

footer {
    background-color: rgba(76, 87, 93, 1.00);
    padding: 1em 0;
    color: #f8f9fa;
    border-top: solid 3px #f3650e;
}

    footer a {
        color: #ddd;
    }

    footer ul {
        margin-top: 1rem;
    }

        footer ul li.lead {
            margin-bottom: 1em;
            padding: 0;
        }

        footer ul li {
            padding: 6px 0;
        }

.blockquote {
    padding-left: 16px;
    border-left: solid 4px #D10A11;
    font-size: 18px;
    margin: 1.5em 0;
}

.price {
    margin-top: 10px;
}

.wr-logo {
    float: left;
}

header {
    background-color: #fff;
}

.top-header {
    padding: 6px 0;
    border-bottom: solid 1px #ddd;
    background: url(images/header-bg.png);
    background-position: right top;
    background-repeat: no-repeat;
    min-height:45px
}

    .top-header ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .top-header ul li a {
            line-height: 32px;
            color: #054e25;
        }

            .top-header ul li a:after {
                display: inline-block;
                content: "|";
                margin-left: 8px;
                font-size: 14px;
                position: relative;
                top: -2px;
            }

        .top-header ul li:last-child a::after {
            display: none;
        }

.hot-line span {
    color: #555;
}

.hot-line a {
    color: #054e25;
    font-weight: bold;
}

.mid-nav #carouselHeaderbanner {
    margin: 10px 0;
}


.page-banner {
    position: relative;
    padding: 30px 0px 30px;
    color: #ffffff;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: rgba(103, 100, 100, 0.84);
    text-align: center;
    background-image: url(images/bg.jpg);
}

#map {
    /*height: 400px;*/
    width: 100%;
}

.ofl {
    overflow: hidden;
}

.page-item.item_1 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.rainbow_0 {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.address-contact, .email-contact, .hotline-contact {
    padding-left: 64px;
    position: relative;
}

    .address-contact::before, .email-contact::before, .hotline-contact::before {
        font-family: fontawesome;
        display: inline-block;
        width: 42px;
        height: 42px;
        background-color: #ff6517;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        color: #fff;
        position: absolute;
        left: 0px;
        top: 0px;
        text-align: center;
        line-height: 42px;
    }

    .hotline-contact:before {
        content: "\f095";
        font-size: 21px;
    }

    .address-contact:before {
        content: "\f041";
        font-size: 21px;
    }

    .email-contact:before {
        content: "\f0e0";
        font-size: 17px;
    }

.contactinfo {
    background: #054e25;
    color: #fff;
    padding: 45px 0;
}
.contactinfo a{color:#fff;border-bottom: dashed 1px #fff;}
.contactinfo a:hover{
        color: #ff6517;

}
.gototop {
    position: fixed;
    right: 10px;
    bottom: 20px;
    padding: 4px 10px;
    display: none
}
.btn-orange{
    background-color: #18406f;
    color: #fff;
}
.fixed-top{
   box-shadow: 1px 0 7px 1px #d4d4d4;
}
hr{
    border:none;
    height:1px;
    margin:0;
}
.mobilemenu a{
    color:#000;
    font-size:95%;
}
.callus{
    position:fixed;
    left:0;
    top:70%;
}
.logo img {
    padding: 10px 0;
    max-width:152px;
}
#productdetail img{
    max-width:100%!important;
    height:auto!important;
}
.retail-list select{
    background-color:transparent;
    border-color:#111;
    height:36px;
}
.wr-q {
    width: 90px;
    display: inline-block;
}
    .wr-q .cal {
        width: 25px;
        height: 36px;
        display: inline-block;
        float: left;
        text-align: center;
        line-height: 36px;
        cursor: pointer;
    }
    .wr-q input {
        width: 35px;
        float: left;
        height: 36px;
        display: inline-block;
        text-align: center;
        border: none;
        background-color: transparent;
        font-size: 14px;
    }
    .wr-q.border{
        border-color:#111 !important;
    }
.retail-list a {
    color: #054e25;
}
    .retail-list a i {
        font-size: 12px;
    }
.retail-list .fa-shopping-cart {
    font-size: 18px;
}

#dlding {
    position: fixed;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0;
    margin: auto;
    height:44px;
    padding: 10px 10px 5px 10px;
    color: #1d1d1d;
    background: #f5f5f5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    width: 290px;
    font-size: 13px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: none;
    z-index: 99999999999;
}

    #dlding p {
        height: 23px;
        display: inline-block;
        vertical-align: top;
        padding-top: 2px;
        margin-bottom: 0;
        padding-left: 5px;
    }

.throbber {
    width: 23px;
    height: 23px;
    display: inline-block;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    float: left;
}

    .throbber:after {
        display: inline-block;
        position: relative;
        width: 20px;
        height: 20px;
        -webkit-animation: rotate 0.6s linear infinite;
        -moz-animation: rotate 0.6s linear infinite;
        -ms-animation: rotate 0.6s linear infinite;
        -o-animation: rotate 0.6s linear infinite;
        animation: rotate 0.6s linear infinite;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        border-top: 1px solid #545a6a;
        border-bottom: 1px solid #d4d4db;
        border-left: 1px solid #545a6a;
        border-right: 1px solid #d4d4db;
        content: '';
        opacity: .5;
    }
.bx {
    border-left: solid 1px #e5e5e5;
    border-right: solid 1px #e5e5e5;
}

.by {
    border-top: solid 1px #e5e5e5;
    border-bottom: solid 1px #e5e5e5;
}

.bt {
    border-top: solid 1px #e5e5e5;
}

.bb {
    border-bottom: solid 1px #e5e5e5;
}

.bl {
    border-left: solid 1px #e5e5e5;
}

.br {
    border-right: solid 1px #e5e5e5;
}
@keyframes rotate {
    0% {
        -ms-transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }

    100% {
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -ms-transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }

    100% {
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}

@-moz-keyframes rotate {
    0% {
        -ms-transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }

    100% {
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}

@-o-keyframes rotate {
    0% {
        -ms-transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
        -moz-transform: rotateZ(-360deg);
        -o-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
    }

    100% {
        -ms-transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
        -moz-transform: rotateZ(0deg);
        -o-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
    }
}