@font-face {
    font-family: 'UniversCondensed';
    src: url('font/UniversCondensed.ttf') format('truetype');
}
/*@font-face {
    font-family: 'Thonburi';
    src: url('font/Thonburi.otf') format('opentype');
}*/
@font-face {
    font-family: 'Thonburi';
    src: url('font/Thonburi.ttc') format('truetype');
}
html{
    cursor:default !important;
}
body {
    font-family: "Thonburi";
    padding-top: 2.5vw;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

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

/* New css */
.clear {
    clear: both;
}

.container {
    /*max-width: 1889px;
    width: 100%;*/
    /*padding-right: 2.7vw;
    padding-left: 2.7vw;*/
    /*padding-right: 4vw;
    padding-left: 4vw;*/
}

.bg-grey {
    background-color: #898585;
}

.navbar {
    border: 0;
   
}
.banner{
    margin-bottom:1.2%;
}
.navbar-nav > li > a {
    font-family: 'UniversCondensed';
    color: #fff;
    font-size: 2.3em;
    padding-top: 13px;
    padding-bottom: 13px;
}

.navbar-nav > li:after {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: #fff;
    position: absolute;
    right: 0;
    top: 6px;
}

.navbar-nav > li:last-child:after {
    display: none;
}

.navbar-nav > li > a:hover {
    color: #333;
}

.navbar-collapse.collapse {
    padding-left: 0;
    padding-right: 0;
}

footer .bg-grey {
    padding: .7% 1%;
}

footer {
    font-family: 'UniversCondensed';
}

    footer .links {
        margin-bottom: .4%;
    }

        footer .links li {
            list-style: none;
            display: inline-block;
        }

            footer .links li a {
                color: #fff;
                font-size: 1.4em;
            }

        footer .links em {
            display: inline-block;
            margin: 0 10px;
            font-size: 1.4em;
            color: #fff;
        }

    footer .callus {
        font-size: 1.4em;
        color: #fff;
    }
        footer .callus a {
            color: #fff;
        }
        #content {
            min-height: 200px;
        }

.top-wrap {
    padding: 1% 2% 1.5%;
}

.top-title {
    font-size: 1.5em;
    color: #000;
    font-weight: 700;
    margin-bottom: 1em;
}

.title2 {
    font-size: 14px;
    color: #000;
    font-weight: 700;
    margin-bottom: 1em;
    padding-left: 2%;
    line-height: 1;
}


.sub-desc {
    font-size: 1em;
    color: #000;
}

.space-hr {
    overflow: hidden;
    width: 100%;
    height: 3em;
    background: #898585;
    margin-bottom: 2%;
}

.imgGroup {
    text-align: justify;
}

    .imgGroup:after {
        content: "";
        display: inline-block;
        width: 100%;
    }

    .imgGroup img {
        display: inline-block;
        width: 32%;
    }

.imgGroup2 {
}

    .imgGroup2 img {
        display: block;
        float: left;
        width: 32%;
        margin-right: 2%;
        margin-bottom: 2%;
    }

    .imgGroup2 a:nth-child(3n) img {
        margin-right: 0;
    }

.space {
    overflow: hidden;
    clear: both;
    height: 20px;
    display: block;
}

.hardware-list {
    max-width: 982px;
    width: 100%;
    text-align: justify;
}

.hardware-type {
    width: 100%;
    text-align: justify;
}

.hardware-list::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.hardware-list .hardware {
    display: inline-block;
    width: 31%;
    margin-bottom: 1%;
}

    .hardware-list .hardware .img {
        position: relative;
    }

    .hardware-list .hardware img {
        max-width: 100%;
    }

.hardware-list .style {
    font-family: Arial;
    font-size: 16px;
    font-weight: bold;
    line-height: 2;
}

.hardware-list .img:hover .cover {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.5);
    -webkit-transform: scale(0.9,0.9);
    -moz-transform: scale(0.9,0.9);
    -ms-transform: scale(0.9,0.9);
    -webkit-transform: scale(0.9,0.9);
}

.hardware-list .img .cover {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    -webkit-transition: 0.3s ease-in;
    -moz-transition: 0.3s ease-in;
    -ms-transition: 0.3s ease-in;
    transition: 0.3s ease-in;
}

.hardware-type > div {
    display: table-cell;
    padding: 1%;
}

.hardware-type .style {
    font-family: Arial;
    font-size: 1.8em;
    font-weight: bold;
}

.hardware-type img {
    height: 21vw;
}

.track-length {
    margin-top: 2% ;
    margin-bottom: 4%;
}

    .track-length .box {
        border: 2px solid #333;
        padding: 4% 8%;
        font-size: 2em;
        font-weight: bold;
    }

    .track-length .box2 {
        border: 2px solid #333;
        padding: 4% 3%;
        font-size: 2em;
        font-weight: bold;
    }

        .track-length .box2 input {
            color: #898585;
            width: 23%;
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid #333;
            outline: 0;
            text-align: center;
        }

.colorhardware {
    max-width: 80%;
    margin: 2% 1% 0%;
}



/*.box3:after {
        content: '';
        display: block;
        padding-top: 100%;
    }*/

.col-3 {
    width: 24%;
    float: left;
    margin-right: 1%;
}


    .col-3 p {
        font-size: 1.2em;
        line-height: 2;
        margin-bottom: 10%;
    }

.b1 {
    background: #ffffff;
}

.b2 {
    background: #848484;
}

.b3 {
    background: #505455;
}

.b4 {
    background: url('../Image/4BlackStandard.jpg') no-repeat;
    background-size: cover;
}

.b5 {
    background: #e3d2bf;
}

.b6 {
    background: #e8d398;
}

.b7 {
    background: #c2a368;
}

.b8 {
    background: #b1a58c;
}

.b9 {
    background: #985b2c;
}

.b10 {
    background: #6f4c2f;
}

.b11 {
    background: #673b36;
}

.b12 {
    background: #4f3c36;
}

.b13 {
    background: #c2ebb6;
}

.b14 {
    background: #8ac4bc;
}

.b15 {
    background: #5aa242;
}

.b16 {
    background: #235b44;
}

.b17 {
    background: #4484bd;
}

.b18 {
    background: #0e546a;
}

.b19 {
    background: #696c8c;
}

.b20 {
    background: #1f384f;
}

.b21 {
    background: #ce2e2d;
}

.b22 {
    background: #ee7d33;
}

.b23 {
    background: #fbd331;
}

.b24 {
    background: #df4f8c;
}

.box3 {
    border: 3px solid #666;
    position: relative;
    height: 18vw;display:block;cursor:pointer;
}

    .box3:before, .box3:after {
        -webkit-transition: all 1s;
        transition: all 1s;
        content: '';
        border-style: solid;
        position: absolute;
        z-index: 5;
        box-sizing: content-box;
    }



    .box3:before {
        width: 0;
        height: 100%;
        border-width: 2px 0 2px 0;
        top: -2px;
        left: 0px;
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
        border-color: #fff;
    }

    .box3:after {
        width: 100%;
        height: 0;
        border-width: 0 2px 0 2px;
        top: 0px;
        left: -2px;
        border-color: #fff;
    }

    .box3:hover:before {
        width: 100%;
    }

    .box3:hover:after {
        height: 100%;
    }

.colorhardware .col-3.selected {
    position: relative;
}

    .colorhardware .col-3.selected::before {
        content: "";
        position: absolute;
        width: 48px;
        height: 48px;
        right: 3px;
        top: 3px;
        z-index: 999;
        background: url('../Image/selected.png') center no-repeat;
        background-size: cover;
    }



.options-img {
    max-width: 330px;width:100%;
    margin-top: 10px;
    margin-bottom: 30px;
}


.option text {
    font-size: 1.25em;
    font-weight: 400;
}

.colorbox {
    width: 300px;
    height: 280px;
    border: 3px solid #333;
    margin-top: 1%;
}

.option {
    padding-left: 2%;
}

.review-page .title2 {
    margin-bottom: 0.1em;
}

.manuals-list {
    padding-left: 0;
}

    .manuals-list li {
        list-style: circle;
        display: block;
        font-size: 1.25em;margin-bottom:12px;
    }
    .manuals-list li p{
        font-size: 15px;
    }
        .manuals-list li a {
        font-size: 15px;
            color: #000;
        }

        .radio{margin-bottom:0;margin-top:0;
   position:relative;
        }
.radio input[type="radio"] {
    opacity: 0;
    z-index: 1;
}

.radio input[type="radio"], .radio-inline input[type="radio"] {
    position: absolute;
    margin-left: -24px;top:10px;
}

.radio label {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
    font-weight: 700;
    cursor: pointer;
}
.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
  
}
.radio label::after {
       content: "";
    display: block;
    position: absolute;
  
    left: -2px;
    top: -2px;
    bottom: -2px;
    right: -2px;
}

.radio input[type="radio"]:focus + label::before {


}
.radio input[type="radio"]:checked + label::after {
     border: 4px solid #5cb85c;

}

input[name="radio3"]{
    display:none;
}
input[name="radio3"]:checked+label{
    border: 3px solid #5cb85c;
}

#loading{
        color: #898585;
    font-size: 3em;
    display: inline-block;
    vertical-align: text-bottom;
}
.continueshopping,.revieworder{
    background:#898585;    color: #fff;
    padding: 8px 12px;
    border: 1px solid;
    border-radius: 3px;
    outline: 0;
}


.message{
        font-size: 1.6em;
    text-align: center;
    margin-top: 6%;
    color: #999;
}
 body{ overflow-x: hidden !important;}


 .embed-responsive.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}
 .embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}
 .embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.relativediv {
    position:relative;
}
.absolutologo {
    width: 60px;
    position: absolute;
    left: 10px;
    top: 10px;
}

.calculateshipping {
    width: 123px;
    height: 25px;
    margin-bottom: 5px;
    cursor: pointer;
    border: none;
    outline: none;
    background: url(/content/images/calculate-shipping.jpg) no-repeat left 0px;
    text-indent: -999999em;
}

/*purchase*/

.purchage table{
    width:100%;
}

.p-container {
    display: flex;
    flex-wrap: nowrap;
}

.length {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom:12px;
}

    .length .p_length {
        width: 150px;
        flex-shrink: 1;
        flex-grow: 1;
        text-align: center;
    }

.length-info {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    border:2px solid gray;
    box-sizing:border-box;
    max-width:567px;
    margin:auto;
    height:89px;
    
}

.color {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 12px;
    font-size: 30px;
    color: #898585;
}

    .color .p_length a img {
        width:30px;
    }

    .length-info div, .length-info input, .length-info label {
        font-size: 30px;
        color: #898585;
    }

.input_length {
    max-width: 100px;
    outline: none;
    height: 30px;
    text-align: center;
}

    .input_length:focus {
        border: none;
        box-shadow: none;
        outline: none;
        border-bottom: 1px solid black;
    }


.p_length .length-info div input[type=radio] {
    border: 0px;
    width: 0.8em;
    height: 0.8em;
}

.input_length {
    border: none;
    border-bottom: 1px solid black;
}


.p_length div input[type=radio] {
    border: 0px;
    width: 0.7em;
    height: 0.7em;
}

    .p-line {
        width: 1px;
        background-color: gray;
    }

.hardware .img a img {
    max-width: 100%;
}

.hardware .img img {
    max-width: 100%;
}

.p_title {
    font-size: 36px;
    color: #898585;
    font-weight: bold;
    font-family: Arial;
    text-align:center;
}

.p_sub_title {
    font-size: 15px;
    color: #898585;
    font-weight: bold;
    font-family: Arial;
    text-align: center;
    font-style: italic;
    margin-top:0;
    padding-top:0;
}

.p_title1 {
    font-size: 50px;
    color: #898585;
    font-weight: bold;
    font-family: Arial;
    text-align: center;
}

.p-container {
    display: flex;
    flex-wrap: wrap;
    border: 2px solid gray;
    margin-bottom:12px;
    max-width:1170px;
    box-sizing:border-box;
}

.p-box {
    border: 1px solid gray;
}

.col-md-2 {
    padding-left:5px;
    padding-right:5px;
}

.p-img-box-bottom {
    max-width: 1150px;
    margin: auto;
    margin-bottom: 12px;
}

.hardware-type label span {
    font-size: 24px;
    font-family: Arial;
    font-style: italic;
    color: #898585;
}

.radio1 {
    text-align:center;
}

.hardware-type .radio1 .radio-hardware-type {
    border: 0px;
    width: 20px;
    height: 20px;
    opacity:1;
}

.hardware .style {
    font-family: Arial;
    font-size: 1.5em;
    font-weight: bold;
    color: #898585;
}

.hardware input[type="radio"] {
    width:20px;
    height:20px;
    font-family:Arial;
    margin:5px 0;
}

.colortable{
    width:100%;
}

    .colortable tr td {
        height:40px;
        font-family: Arial;
        font-size: 2rem;
        font-weight: bold;
        color: #898585;
        line-height:40px;
    }