@charset "utf-8";
/* CSS Document */

#background { background:url(../images/background.jpg) no-repeat center top; left:0; width:100%; min-width:100%; height:100%; min-height:100%; position:fixed; top:0; z-index:0; }
.clear { clear: both; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }/* ----- clear fix for floats ----- */
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }/* hides clearfix from IE-mac */
.clearfix { display:block; }/* end hide from IE-mac */
.alignleft { float:left; }
.alignright { float:right; }
.aligncenter { margin:auto; display:block; }
.alignnone { clear:both; font-size:0; line-height:0; margin:0; padding:0; border:0; height:0; width:0; }
.centered { text-align:center; }

/* =Common
--------------------------------------------------------------------------------------------------------*/
a:visited,
a:link {
    color: #fff;
}
/* =End Common
--------------------------------------------------------------------------------------------------------*/

/* =Typography
--------------------------------------------------------------------------------------------------------*/
body { font: 12px Arial, Helvetica, sans-serif; background-color: #000;}
.bold {font-size:11px; font-weight:700; }
strong { font-weight:700; }
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =Headings
--------------------------------------------------------------------------------------------------------*/
h1 { }
h3 { font-size:24px; font-weight:normal; color:#000; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; line-height:24px; }
h4 { font-size:16px; font-weight:normal; color:#000; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; line-height:20px; }
/* End Headings
--------------------------------------------------------------------------------------------------------*/


/* =Branding
--------------------------------------------------------------------------------------------------------*/
p { padding:4px 0 5px 0; line-height:20px; }
p a { color:#0073bf; text-decoration:none; border-bottom:1px dotted #0073bf; }
p a:hover { text-decoration:none; border-bottom:1px solid #0073bf; }
#wrapper { width:100%; background:#000; color: #fff; z-index:1; }
#header { width:100%; }
#header-bottom {}
h1#logo { display:inline-block; float: left;}
.columns-2-wrapper #logo img{
    height: 90px;
}
.columns-2-wrapper #container {
    padding-top: 120px;
}
h1#logo a { display:block; width:261px; height:91px; text-indent:-9999px; text-decoration:none; background:url(../images/bg-logo.jpg) left top no-repeat; }
/* End Branding
--------------------------------------------------------------------------------------------------------*/

/* jssor */

#slider1_container .slide-caption{
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
    height: 28px;
    line-height: 28px;
    font-size: 14px;
    color: #fff;
    background:rgba(0,0,0,0.5);
}

/* jssor slider thumbnail navigator skin 01 css */
/*
.jssort01 .p            (normal)
.jssort01 .p:hover      (normal mouseover)
.jssort01 .p.pav        (active)
.jssort01 .p.pdn        (mousedown)
*/

.jssort01 {
    position: absolute;
    /* size of thumbnail navigator container */
    width: 100%;
    height: 80px;
}

    .jssort01 .p {
        position: absolute;
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
    }

    .jssort01 .t {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: none;
    }

    .jssort01 .w {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .jssort01 .c {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 68px;
        height: 68px;
        border: #000 0px solid;
        background: url(images/jssor_slider/t01.png) -800px -800px no-repeat;
        _background: none;
    }

    /*
    .jssort01 .pav .c {
        top: 2px;
        _top: 0px;
        left: 2px;
        _left: 0px;
        width: 68px;
        height: 68px;
        border: #000 0px solid;
        _border: #fff 2px solid;
        background-position: 50% 50%;
    }
    */
    .jssort01 .pav .c {
        border: #000 2px solid;
        background-position: 50% 50%;
    }

    .jssort01 .p:hover .c {
        top: 0px;
        left: 0px;
        width: 70px;
        height: 70px;
        border: #fff 1px solid;
        background-position: 50% 50%;
    }

    .jssort01 .p.pdn .c {
        background-position: 50% 50%;
        width: 68px;
        height: 68px;
        border: #000 2px solid;
    }

    * html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c {
        /* ie quirks mode adjust */
        width /**/: 72px;
        height /**/: 72px;
    }
/* End jssor slider thumbnail navigator skin 01 css */

/* =Main Nav
--------------------------------------------------------------------------------------------------------*/
ul#mainNavigation li { float:left; padding-left:30px; }
ul#mainNavigation li.first { padding-left:0px; }
ul#mainNavigation li a { color:#828282; font-size:18px; font-weight:normal; line-height:53px; text-decoration:none; }
ul#mainNavigation li a:hover, ul#mainNavigation li a.active { color:#324c96; }
/* End Main Nav
--------------------------------------------------------------------------------------------------------*/

/* =Breadcrumb
--------------------------------------------------------------------------------------------------------*/
.breadcrumbs-wrapper {
	height: 30px;
	line-height: 30px;
    font-size: 16px;
    border-bottom: 1px solid;
}

/* End Breadcrumb
--------------------------------------------------------------------------------------------------------*/

/* =Main Content
--------------------------------------------------------------------------------------------------------*/
#container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 40px 10px 25px 10px;
    width: 100%;
    margin: 0 auto;
    z-index: 1;
    position: relative;
}

#container .home-category-container,
#container .home-category-container-2{
    display: inline-block;
    text-align: center;
    width: 280px;
    height: 286px;
}

#container .home-category-container-2 .title {
    font-size: 16px;
    margin-bottom: 10px;
}

#container .home-category-container-2 .image-wrapper {
    height: 230px;
    overflow: hidden;
    transition: all .3s ease;
}

#container .home-category-container-2 .image-wrapper:hover {
    transform: scale(1.05);
}

#container .home-category-container-2 img {
    -webkit-box-reflect: below 3px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 70%,rgba(250,250,250,0.3));
    box-reflect: below 3px linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 70%,rgba(250,250,250,0.3));
    border-radius: 10px;
}


.index-products-container {
    text-align: center;
}

.col1-2 { width:470px; padding:50px 0px 0 0; float:left; }
.col1-3 { width:300px; padding:0px 20px 0 0; float:left; }
.col2-3 { width:620px; padding:50px 20px 0 0; float:left; }
.col1-4 { width:235px; padding:50px 0px 0 0; float:left; }
.col1-5 { width:220px; padding:0px 20px 0 0; float:left; }
.col1-6 { width:235px; margin-top:-10px; float:left; }
.col3-4 { width:700px; padding:50px 10px 0 0; float:left; }
.last { padding:50px 0 0 0; }
.last5 { padding:0px 0 0 0; }
.padding-top { padding-top:35px; }
.padding-right { padding-right:15px; }
.googlemaps { padding:11px 10px 45px 10px !important; }
#googlemaps { z-index:108 !important; display:block; position:relative; margin-top:167px; }
#googlemaps-bottom { z-index:108 !important; display:block; position:relative; height:4px; background:#fff; border-bottom:1px solid #d2d2d2; }
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =Secondary Content
--------------------------------------------------------------------------------------------------------*/
.header-content {
    text-align: center;
    width: 100%;
    background: #000;
    position: relative;
}

.header-inner-container {
    width: 960px;
    margin: 0 auto;
}

#off-canvas-btn {
    position: absolute;
    top: 20px;
    right:20px;
    font-size: 20px;
    display: none;
}

.topnavbar { padding-bottom:11px; background: url(../images/header-bg.jpg) top repeat-x; }
.topnavbar a { line-height:32px; color:#fff; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; padding-bottom:10px; }
.topnavbar a.padding-left { padding-right:20px; }
.topnavbar .padding { padding:0 13px; }
.topnavbar a.active { font-weight:700; }
.topnavbar a:hover { color:#dbdcdd; text-decoration:none; }
.content { width:940px; }
.content h2 { padding-bottom:24px; }
.content h2.no-subtext { padding-bottom:0px; }
.content h2.second { padding-top:41px; display:inline-block; position:relative; width:100%; font-size:60px; line-height:60px; }
.content h3 { padding:41px 0 17px 0; }
.content h3 a { text-decoration:none; color:#000; }
.content h3 a:hover { text-decoration:none; color:#363636; }
.content h4 { padding:5px 0 4px 0; }
.content h4 a { text-decoration:none; color:#000; }
.content h4 a:hover { text-decoration:none; color:#0073bf; }
.content p { line-height:20px; width:auto; }
.content p.large { line-height:24px; font-size:14px; }
.content p a.button { display:inline-block; padding:4px 16px 6px 15px; padding:5px 16px 5px 15px\9; background:url(../images/buttons/bg-button.jpg) repeat-x; border-bottom:0px; border:1px solid #206d9e; color:#fff; margin:5px 0 4px 0; }
.content p a.button:hover { background:url(../images/buttons/bg-buttonHover.jpg) repeat-x; }
ul.list, ul.check, ul.normal { padding:3px 0 2px 0; }
.normal li { display:block; line-height:20px; padding:2px 0; }
.list li { background:url(../images/list-bullet.png) 10px 10px no-repeat; display:block; padding:2px 0; padding-left:27px; line-height:20px; }
.check li { background:url(../images/list-check.png) 9px 9px no-repeat; display:block; padding:2px 0; padding-left:27px; line-height:20px; }
.list li a, .check li a, .normal li a { color:#0073bf; text-decoration:none; border-bottom:1px dotted #0073bf; }
.no-deco li a { color:#363636; text-decoration:none; border-bottom:0px dotted #0073bf; }
.list li a:hover, .check li a:hover, .normal li a:hover { text-decoration:none; border-bottom:1px solid #0073bf; }
.no-deco li a:hover { color:#0073bf; text-decoration:none; border-bottom:0px dotted #0073bf; }
.pics { background:#fff; border:#d2d2d2 1px solid; padding:4px; margin:0px 0px 10px 0; }
.infobox { background:#fff; border:#d2d2d2 1px solid; padding:20px; margin:10px 0px 10px 0; }
/* End Secondary Content
--------------------------------------------------------------------------------------------------------*/

/* yuxiangtang secondary content
---------------------------------------------------------------------------------------------------------*/
.container_16 { 

}

.portlet .portlet-decoration .l_head {
	font-size: 18px;
    border-bottom: 2px solid;
    line-height: 36px;
    margin-bottom: 20px;
}

.portlet .portlet-content .sub_menus {
	margin-left: 20px;
}

.portlet .portlet-content .sub_menus li{
	font-size: 16px;
	line-height: 24px;
}

.portlet .portlet-content .sub_menus li>a{

}

.main-content-container {
	padding-top: 20px;
    text-align: left;
}
/* End yuxiangtang secondary content
---------------------------------------------------------------------------------------------------------*/

/* off canvas
---------------------------------------------------------------------------------------------------------*/
#off-canvas {
    display: none;
    background-color: #fff;
    font-size: 14px;
}
#off-canvas a {
    color: #000;
}
#off-canvas h6 {
    font-size: 18px;
    font-weight: bold;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #ddd;
    margin-bottom: 0;
}
#off-canvas ul {
    padding: 0;
}
#off-canvas ul li {
    list-style-type: none;
    font-size: 16px;
    padding: 1.5rem 0 1.5rem 3rem;
    border-bottom: 1px solid #ddd;
}

/* product list page
---------------------------------------------------------------------------------------------------------*/
.list_1{
	width: 700px;
	height: 240px;
}

.product-list-container {
    /*text-align: center;*/
}

.loading-product-list {
    display: none;
}

.product-list{
	width: 220px;
	height:240px;
    margin-right: 5px;
    display: inline-block;
    transition: all .3s ease-in-out;
}

.product-list:hover {
    transform: scale(1.03);
}

.list_img{
	border: 1px solid #c5c5c5;
	width: 218px;
	height:178px;
	overflow: hidden;
}
.list_img .product-image{
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

.list_name{
	background-color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 16px;
}

.list_name a{
	color: #363636;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
/* end product list page
---------------------------------------------------------------------------------------------------------*/

/* =Footer
--------------------------------------------------------------------------------------------------------*/
#footer {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    color: #fff;
    padding: 10px 0;
    background: #000 url(../images/footer-bg.jpg) center top no-repeat;
    text-align: center;
}
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* =Custom Navi
--------------------------------------------------------------------------------------------------------*/
ul.topnav>li { float:left; padding:0px 10px; margin: 0; position:relative; text-align: left}
ul.topnav>li.first { padding-left:0px; }
ul.topnav>li a { color:#828282; font-size:17px; font-weight:normal; line-height:83px; text-decoration:none; text-transform:uppercase; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; }
ul.topnav>li:hover a, ul.topnav>li.active a { color:#0074c0; }
ul.topnav>li:hover a.cursor { cursor:default; }
ul.topnav>li .subnav { 
    position:absolute; 
    left: -10px;
    background: rgba(255, 255, 255, 1);
    width: 150px;
    border: 1px solid #ddd;
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    visibility: hidden; 
    padding-bottom: 20px;
    padding-left: 10px;
    opacity: 0;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2)

    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;
}
ul.topnav>li:hover .subnav { 
    visibility: visible;
    opacity: 1;
}

ul.topnav>li .subnav li { display:block;}
ul.topnav>li .subnav li a { font-size:14px; color:#828282; line-height:30px; background:url(../images/arrow.png) 1px 5px no-repeat; padding-left:16px; text-transform:none; font-family:Arial, Helvetica, sans-serif; }
ul.topnav>li .subnav li a:hover { color:#0074c0; background:url(../images/arrow-hover.png) 0px 4px no-repeat; }
ul.topnav>li li.head { padding-top:15px; }
/* End Custom Navi
--------------------------------------------------------------------------------------------------------*/


/* =Slideshow
--------------------------------------------------------------------------------------------------------*/
#slideshow { width:940px; height:auto; position:relative; z-index:99; background:none; overflow:visible; }
#slideshow-full-width-image { width:930px; height:auto; position:relative; z-index:99; background:#fff; border:#d2d2d2 1px solid; padding:4px; overflow:visible; }
#slider { position:relative; z-index:100; overflow:visible; }
#cyclenav { position:relative; display:inline-block; margin-bottom:10px; }
#cyclenav-full-width-image { position:relative; display:inline-block; z-index:101; top:-40px; left:-30px; }
#cyclenav a { font-size:12px; color:#363636; text-decoration:none; background:url(../images/bg-transparent.png) repeat; padding:4px 7px; border:1px solid #d2d2d2; margin-left:5px; }
#cyclenav-full-width-image a { font-size:12px; margin-left:5px; text-decoration:none; padding:4px 7px; border:0px solid #fff; background:url(../images/bg-transparent-dark.png) repeat; color:#d2d2d2; }
#cyclenav a:hover { color:#0074c0; }
#cyclenav-full-width-image a:hover { color:#fff; }
#cyclenav a.activeSlide { font-weight:700; background:#fff; }
#cyclenav-full-width-image a.activeSlide { font-weight:700; background:url(../images/bg-transparent-dark2.png) repeat !important; color:#fff !important; }
/* End Slideshow
--------------------------------------------------------------------------------------------------------*/


/* =Quote
--------------------------------------------------------------------------------------------------------*/
#quote { width:902px; height:auto; background:#fff; border:1px solid #d2d2d2; margin:45px 0 10px 0; display:inline-block; padding:8px 18px 8px 18px; position:relative; }
.logos { padding:25px 0px 0 30px; display:inline-block; width:189px; }
.quoter { font-size:11px; text-transform:uppercase; font-weight:bold; padding:0px 0 5px 0; }
.quote { width:640px; display:inline-block; border-left:1px solid #d2d2d2; padding:10px 0 13px 20px; }
/* End Quote
--------------------------------------------------------------------------------------------------------*/


/* =Accordion
--------------------------------------------------------------------------------------------------------*/
#accordion { width:auto; }
#accordion div { padding:0px 0 0px 0; }
#accordion h6 { padding:0px; }
#accordion h6 a { 
    cursor:pointer; display:block; text-decoration:none; font:16px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#000; line-height:20px; padding:11px 0px 12px 49px; width:auto; border:1px solid #d2d2d2; text-transform:none; background:#fff; margin-top:10px; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#accordion h6 a:hover { color:#363636; }
#accordion h6 a.last { border-bottom:0px; }
#accordion h6.ui-state-active a { background:url(../images/buttons/bg-open.jpg) no-repeat 17px 12px #fff; }
#accordion h6.ui-state-active a:hover { color:#000; cursor:default; }
#accordion h6.ui-corner-all a { background:url(../images/buttons/bg-close.jpg) no-repeat 17px 12px #fff; }
#accordion h6.ui-state-hover { }
#accordion p { padding:0px 17px 9px 17px; }
/* End Accordion
--------------------------------------------------------------------------------------------------------*/


/* =Image Hover
--------------------------------------------------------------------------------------------------------*/
.proj-img { position:relative; overflow:hidden; height: 180px;}
.proj-img.main {height: 417px; }
.proj-img i { display:block; font-style:normal; position:absolute; width:100%; height:100%; z-index:9; text-indent:-9000px; top:0; left:0; background:#fff; opacity:0; filter:alpha(opacity:0); }
.proj-img img { display:block; visibility:visible; width: 100%; height: 100%;}
.proj-img a { display:inline-block; width:50px; height:50px; position:absolute; top:-30px; left:50%; background:url(../images/buttons/bg-zoom.png) 50% 50% no-repeat; margin-top:-25px; margin-left:-25px; z-index:10 }
.proj-img a.details { background:url(../images/buttons/bg-link.png) 50% 50% no-repeat; }
/* End Image Hover
--------------------------------------------------------------------------------------------------------*/


/* =Blog
--------------------------------------------------------------------------------------------------------*/
.date { background:url(http://www.ppandp.de/404.html) no-repeat 10px 10px #fff; display:block; z-index:10; height:43px; width:38px; border:1px solid #d2d2d2; margin-top:10px; margin-right:15px; }
.date p { line-height:14px; padding:7px 0px 0 0; width:auto; text-align:center; text-transform:uppercase; margin-left:0px; }
.next-to-date { padding:0 0 5px 55px; }
.calendar { background:url(../images/buttons/bg-calendar.png) no-repeat; padding:0 15px 0 25px; }
.user { background:url(../images/buttons/bg-users.png) no-repeat; padding:0 15px 0 25px; }
.comment { background:url(../images/buttons/bg-bubble.png) no-repeat; padding:0 15px 0 25px; }
.avatar { float:left; margin:10px 0px 0 0; padding:16px 16px; background:#fff; border:1px solid #d2d2d2; }
.reply { margin:5px 0 4px 66px; }
.no-wrap { margin-left:66px; }
.posted { font-size:11px; text-transform:uppercase; font-weight:bold; color:#363636; }
#navi-blog { padding:41px 0; }
#navi-blog .page a { font-size:12px; color:#363636; text-decoration:none; background:url(../images/bg-transparent.png) repeat; padding:4px 7px; border:1px solid #d2d2d2; margin-right:5px; text-align:center; float:left; }
#navi-blog .page a:hover { color:#0074c0; text-decoration:none; background:#fff; }
#navi-blog .active a { background:#fff; color:#363636; font-weight:700; }
#navi-blog .active a:hover { cursor:default; color:#363636; }
/* End Blog
--------------------------------------------------------------------------------------------------------*/


/* =Social
--------------------------------------------------------------------------------------------------------*/
.social li { display:inline-block; }
.social li a { margin:10px 0 10px 15px; display:block; }
.social li.first a { margin:10px 0 0 0; }
.twitter a { text-indent:-9000px; text-decoration:none; width:16px; height:16px; background:url(../images/buttons/bg-twitter.png) no-repeat left top; }
.twitter a:hover { background:url(../images/buttons/bg-twitter.png) no-repeat 0px -16px; }
.facebook a { text-indent:-9000px; text-decoration:none; width:16px; height:16px; background:url(../images/buttons/bg-facebook.png) no-repeat left top; }
.facebook a:hover { background:url(../images/buttons/bg-facebook.png) no-repeat 0px -16px; }
.dribble a { text-indent:-9000px; text-decoration:none; width:16px; height:16px; background:url(../images/buttons/bg-dribble.png) no-repeat left top; }
.dribble a:hover { background:url(../images/buttons/bg-dribble.png) no-repeat 0px -16px; }
.flickr a { text-indent:-9000px; text-decoration:none; width:16px; height:16px; background:url(../images/buttons/bg-flickr.png) no-repeat left top; }
.flickr a:hover { background:url(../images/buttons/bg-flickr.png) no-repeat 0px -16px; }
.vimeo a { text-indent:-9000px; text-decoration:none; width:17px; height:16px; background:url(../images/buttons/bg-vimeo.png) no-repeat left top; }
.vimeo a:hover { background:url(../images/buttons/bg-vimeo.png) no-repeat 0px -16px; }
.google a { text-indent:-9000px; text-decoration:none; width:16px; height:16px; background:url(../images/buttons/bg-google.png) no-repeat left top; }
.google a:hover { background:url(../images/buttons/bg-google.png) no-repeat 0px -16px; }
.mail a { text-indent:-9000px; text-decoration:none; width:16px; height:16px; background:url(../images/buttons/bg-mail.png) no-repeat left top; }
.mail a:hover { background:url(../images/buttons/bg-mail.png) no-repeat 0px -16px; }
.skype a { text-indent:-9000px; text-decoration:none; width:16px; height:16px; background:url(../images/buttons/bg-skype.png) no-repeat left top; }
.skype a:hover { background:url(../images/buttons/bg-skype.png) no-repeat 0px -16px; }
ul#twitter_update_list { margin:3px 0 2px 0; }
ul#twitter_update_list li { line-height:20px; background:url(../images/buttons/bg-twitter-feed.png) 0px 2px no-repeat; display:block; padding:2px 0; padding-left:25px; line-height:20px; }
ul#twitter_update_list li span { line-height:20px; }
ul#twitter_update_list li span a { color:#0073bf; text-decoration:none; border-bottom:1px dotted #0073bf; font-size:12px !important; font-weight:400; text-transform:none; }
ul#twitter_update_list li span a:hover { text-decoration:none; border-bottom:1px solid #0073bf; }
ul#twitter_update_list li a { font-size:11px !important; text-transform:uppercase; font-weight:bold; color:#363636; text-decoration:none; }
ul#twitter_update_list li a:hover { text-decoration:none; border-bottom:0px solid #0073bf; color:#0073bf; }
/* End Social
--------------------------------------------------------------------------------------------------------*/


/* =Image Subtitle
--------------------------------------------------------------------------------------------------------*/
.subtitle { background:#fff; text-align:center; border-bottom:1px solid #d2d2d2; border-right:1px solid #d2d2d2; border-left:1px solid #d2d2d2; padding:11px 16px 9px 16px; margin-top:-16px; margin-bottom:10px; }
.subtitle h4 { font:14px 'Trebuchet MS', Arial, Helvetica, sans-serif; height:14px; color:#493636; font-weight:700; padding:0px 0 2px 0; width:auto; }
.subtitle h4 a { font:14px 'Trebuchet MS', Arial, Helvetica, sans-serif; height:14px; color:#493636; font-weight:700; text-decoration:none; margin-left:0px; text-transform:none; }
.subtitle h4 a:hover { color:#dc6868; text-decoration:none; }
/* End Subtitle
--------------------------------------------------------------------------------------------------------*/


/* =Tabs
--------------------------------------------------------------------------------------------------------*/
.hide { display: none; }
.clear { clear: both; }
#tab-one { background: #fff; margin:50px 0 10px 0; border:1px solid #d2d2d2; }
#tab-one .nav { overflow: hidden; margin-bottom:10px; margin-top:-41px; margin-left:-1px; position:absolute; }
#tab-one .nav li { width: auto; float: left; margin: 0; background:url(../images/bg-transparent.png) repeat; }
#tab-one .nav li.last { margin-right: 10px; }
#tab-one .nav li.first { border-left:1px solid #d2d2d2; }
#tab-one .nav li a { font-size:16px; font-weight:normal; color:#828282; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; height:14px; border-right:1px solid #d2d2d2; border-top:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2; width:auto; text-decoration:none; }
#tab-one .nav li a:hover { text-decoration:none; color:#0074c0; }
.list-wrap { padding:20px; }
#tab-one ul li a { display: block; padding:9px 20px 16px 20px; }
#tab-one ul li.nav-li a.current, #example-one ul.featured li a:hover { background-color: #fff; border-bottom:0px; padding-top:10px; cursor:default; text-decoration:none; color:#000; }
/* =End Tabs
--------------------------------------------------------------------------------------------------------*/


/* =Pricing Table
--------------------------------------------------------------------------------------------------------*/
#price { width:100%; border-left:1px solid #d2d2d2; border-top:1px solid #d2d2d2; margin:41px 0 10px 0; }
th { border-right:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2; font:12px Arial, Helvetica, sans-serif; color:#707070; line-height:20px; padding:9px 0px 8px 0px; width:148px; background:url(../images/bg-transparent.png) repeat; text-align:center; }
tr.odd { background:#fff; }
th.first-column { width:179px; padding:9px 0px 13px 0px; }
th.first-row { font:16px 'Trebuchet MS', Arial, Helvetica, sans-serif; color:#000; line-height:20px; padding:15px 0px 0px 0px; text-transform:uppercase; }
th.featured { font-weight:700; }
th.header { font-size:11px; text-transform:uppercase; color:#363636; font-weight:700; }
th a { color:#0074c0; margin-left:2px; color:#0073bf; text-decoration:none; border-bottom:1px dotted #0073bf; }
th a:hover { text-decoration:none; border-bottom:1px solid #0073bf; }
th a.button { display:inline-block; padding:5px 16px 5px 16px; padding:5px 16px 5px 16px\9; background:url(../images/buttons/bg-button.jpg) repeat-x; border-bottom:0px; border:1px solid #206d9e; color:#fff; margin:7px 0 12px 0; }
th a.button:hover { background:url(../images/buttons/bg-buttonHover.jpg) repeat-x; }
/* =End Pricing Table
--------------------------------------------------------------------------------------------------------*/


/* =Filterable Portfolio
--------------------------------------------------------------------------------------------------------*/
.masonry-container { width:960px !important; overflow:visible; }
.nav-filter { padding:41px 0 0 0; }
.nav-filter a { font-size:12px; color:#363636; text-decoration:none; background:url(../images/bg-transparent.png) repeat; padding:4px 7px; border:1px solid #d2d2d2; margin-right:5px; text-align:center; float:left; }
.nav-filter a:hover { color:#0074c0; text-decoration:none; background:#fff; }
.nav-filter .active a { background:#fff; color:#363636; font-weight:700; }
.nav-filter .active a:hover { cursor:default; color:#363636; }
/* =End Pricing Table
--------------------------------------------------------------------------------------------------------*/

/* =Category list
--------------------------------------------------------------------------------------------------------*/
.cat_list_container{
    margin-bottom: 20px;
}
.cat_list {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 5px;
}

.cat_list.active {
    background-color: #ffffff;
    color: #363636;
}

.cat_list.active a {
    color: #363636;
}
/* =End Category list
--------------------------------------------------------------------------------------------------------*/

/* =Product Detail
--------------------------------------------------------------------------------------------------------*/
.foc_product {
    font-size: 14px;
}

.foc_product .foc_product_name{
    font-size: 20px;
    margin-bottom: 20px;
    max-height: 50px;
}

.foc_product .parameter li{
    margin-bottom: 5px;
    height: 24px;
    line-height: 24px;
}

.foc_product .parameter li .title {
    display: inline-block;
    width: 150px;
    font-size: 16px;
    font-weight: bold;
}

.foc_product .inquiry-button {
    display: block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    background-color: #f2f2f2;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    color: #000;
    margin-top: 20px;
    cursor: pointer;
}

.image-slider-wrapper,
.product-summary-wrapper {
    margin-bottom:20px;
}

.product-image-wrapper {
    text-align: center;
    margin-bottom: 20px;
}

.product_detail_wrapper{
    color: #000;
    background-color: #fff;
    padding: 1px;
}

.product_detail_wrapper .tabs{
    font-size: 18px;
    line-height: 36px;
}

.product_detail_wrapper .tabs li{
    background-color: #fff;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-bottom: none;
    display: inline-block;
    float: left;
}

.product_detail_wrapper .tabs li.active{
    font-weight: bold;
    border: 1px solid #ddd;
    border-bottom: none;
    margin-bottom: -1px;
}

.product_detail_wrapper .tabs_content_wrapper{
    clear: both;
    border: 1px solid #ddd;
    margin-top: -1px;
    padding-bottom: 20px;
}

.product_detail_wrapper .tabs_content_wrapper .tabs_content{
    padding: 20px 10px;
    white-space: pre-line;
}
/* =End Product Detail
--------------------------------------------------------------------------------------------------------*/

/* =Message page
--------------------------------------------------------------------------------------------------------*/
div.form
{
}

div.form input,
div.form textarea,
div.form select
{
    margin: 0.2em 0 0.5em 0;
}

div.form fieldset
{
    border: 1px solid #DDD;
    padding: 10px;
    margin: 0 0 10px 0;
    -moz-border-radius:7px;
}

div.form label
{
    font-weight: bold;
    font-size: 0.9em;
    display: block;
}

div.form .row
{
    margin: 5px 0;
}

div.form .hint
{
    margin: 0;
    padding: 0;
    color: #999;
}

div.form .note
{
    font-style: italic;
}

div.form span.required
{
    color: red;
}

div.form div.error label:first-child,
div.form label.error,
div.form span.error
{
    color: #C00;
}

div.form div.error input,
div.form div.error textarea,
div.form div.error select,
div.form input.error,
div.form textarea.error,
div.form select.error
{
    background: #FEE;
    border-color: #C00;
}

div.form div.success input,
div.form div.success textarea,
div.form div.success select,
div.form input.success,
div.form textarea.success,
div.form select.success
{
    background: #E6EFC2;
    border-color: #C6D880;
}

div.form div.success label
{
    color: inherit;
}

div.form .errorSummary
{
    border: 2px solid #C00;
    padding: 7px 7px 12px 7px;
    margin: 0 0 20px 0;
    background: #FEE;
    font-size: 0.9em;
}

div.form .errorMessage
{
    color: red;
    font-size: 0.9em;
}

div.form .errorSummary p
{
    margin: 0;
    padding: 5px;
}

div.form .errorSummary ul
{
    margin: 0;
    padding: 0 0 0 20px;
}

div.wide.form label
{
    float: left;
    margin-right: 10px;
    position: relative;
    text-align: right;
    width: 100px;
}

div.wide.form .row
{
    clear: left;
}

div.wide.form .buttons, div.wide.form .hint, div.wide.form .errorMessage
{
    clear: left;
    padding-left: 110px;
}
/* =End Message page
--------------------------------------------------------------------------------------------------------*/


/* =side bar
--------------------------------------------------------------------------------------------------------*/

.sidebar-contact-us ul{
    padding-left: 34px;
}

.sidebar-contact-us ul li{
    font-size: 14px;
    text-indent: -42px;
}
/* =End sidebar
--------------------------------------------------------------------------------------------------------*/

/* =Custom styles for Home page
--------------------------------------------------------------------------------------------------------*/
.home-page h1#logo {
    float: none;
}

.home-page .topnav {
    display: none;
}

.home-page .bottom-nav-menu {
    text-align: center;
    font-size: 18px;
}

.home-page .bottom-nav-menu a{
    margin-right: 20px;
}

.home-page .bottom-nav-menu a + a:before{
    content: "|";
    margin-right: 20px;
    color: #666;
}

/* =End Custom styles for Home page
--------------------------------------------------------------------------------------------------------*/

.dialog-container .input-row input.invalid,
.dialog-container .input-row textarea.invalid{
    border: 1px solid #f00;
}

.dialog-container .input-row input:focus,
.dialog-container .input-row textarea:focus {
    border:none;
}

.dialog-container {
    /*display: none;*/
    opacity: 0;
    z-index: 0;
    width: 500px;
    padding:0;
    background: #fff;
    position: fixed;
    left: 50%;
    top: -100%;
    transform: translate3d(-50%,-50%, 0);
    font-size: 14px;
    transition: all 1s ease;
}

.dialog.show  .dialog-container {
    /*display: block;*/
    opacity: 1;
    top: 50%;
    z-index: 100;
}

.dialog-shadow {
    display: none;
    opacity: 0;
    z-index: 99;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .8);
}

.dialog.show .dialog-shadow {
    display: block;
    opacity: 1;
}

.dialog.show .dialog-container .dialog-header {
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: bold;
    padding-left: 30px;
    padding-right: 30px;
    color: #333;
    height: 50px;
    line-height: 50px;
}

.dialog-container .dialog-content {
    padding: 20px;
}

.dialog-container .input-row {
    line-height: 30px;
    margin-bottom: 10px;
    display: flex;
}

.dialog-container .input-row label {
    width: 80px;
    display: inline-block;
    color: #333;
}

.dialog-container .comment-row label {
    vertical-align: top;
}

.dialog-container label.required:after {
    content: '*';
    color: #f00;
    margin-left: 5px;
}

.dialog-container .input-row input {
    height: 30px;
    border: 1px solid #999;
    flex: 1;
    margin-right: 50px;
}

.dialog-container .input-row {
    flex: 1;
    margin-right: 20px;
}

.dialog-container .comment-row textarea{
    flex: 1;
}

.dialog-container .dialog-bottom {
    text-align: right;

    border: none;
    padding: 0 30px;
    font-size: 14px;
    font-size: 14px;
    padding: 0 30px;
    margin-bottom: 20px;
    border: none;
}

.dialog-container .dialog-bottom button {
    color: #fff;
    background-color: #000;
    height: 30px;
    line-height: 30px;
    padding: 0 30px;
    border: none;
}

/* ===========global tip=============== */
.ns-global-tip {
    display: none;
    position: fixed;
    z-index: 99999999999;
    top: 0px;
    right: 0;
    color: #000;
    height: 30px;
    line-height: 30px;
    padding: 5px 20px;
    background: #fff;
}

/* ===========signature section=============== */
.sig-wrapper {
    width: 100%;
    margin-top: 50px;
}
.sig-wrapper img {
    width: 100%;
}