@charset "utf-8";
@font-face {
    font-family: 'DB Helvethaica X 35';
    src: url('../fonts/DBHelvethaicaX-35Thin.eot');
    src: url('../fonts/DBHelvethaicaX-35Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DBHelvethaicaX-35Thin.woff2') format('woff2'),
        url('../fonts/DBHelvethaicaX-35Thin.woff') format('woff'),
        url('../fonts/DBHelvethaicaX-35Thin.ttf') format('truetype'),
        url('../fonts/DBHelvethaicaX-35Thin.svg#DBHelvethaicaX-35Thin') format('svg');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'DB Helvethaica X 45 Li';
    src: url('../fonts/DBHelvethaicaX-45Li.eot');
    src: url('../fonts/DBHelvethaicaX-45Li.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DBHelvethaicaX-45Li.woff2') format('woff2'),
        url('../fonts/DBHelvethaicaX-45Li.woff') format('woff'),
        url('../fonts/DBHelvethaicaX-45Li.ttf') format('truetype'),
        url('../fonts/DBHelvethaicaX-45Li.svg#DBHelvethaicaX-45Li') format('svg');
    font-weight: 300;
    font-style: normal;
}


@font-face {
    font-family: 'db_helvethaica_x55_regular';
    src: url('../fonts/db_helvethaica_x_v3.2_0-webfont.eot');
    src: url('../fonts/db_helvethaica_x_v3.2_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_helvethaica_x_v3.2_0-webfont.woff2') format('woff2'),
         url('../fonts/db_helvethaica_x_v3.2_0-webfont.woff') format('woff'),
         url('../fonts/db_helvethaica_x_v3.2_0-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'db_helvethaica_x65_med';
    src: url('../fonts/db_helvethaicaboldv3.2-webfont.eot');
    src: url('../fonts/db_helvethaicaboldv3.2-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_helvethaicaboldv3.2-webfont.woff2') format('woff2'),
         url('../fonts/db_helvethaicaboldv3.2-webfont.woff') format('woff'),
         url('../fonts/db_helvethaicaboldv3.2-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'db_helvethaica_x75_bd';
    src: url('../fonts/db_helvethaica_x_bd_v3.2-webfont.eot');
    src: url('../fonts/db_helvethaica_x_bd_v3.2-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_helvethaica_x_bd_v3.2-webfont.woff2') format('woff2'),
         url('../fonts/db_helvethaica_x_bd_v3.2-webfont.woff') format('woff'),
         url('../fonts/db_helvethaica_x_bd_v3.2-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
*{ border: 0;}

/*reset*/
a{color: #2a2e2e;}
a:hover,a:focus{ text-decoration: none; outline: none!important; }
button:focus{outline: none!important;}
textarea{resize:none;}
/* Basic Styles 
-------------------------------------------------- */
h1,h2,h3{ margin: 0; padding: 0;}
html{overflow-x: hidden !important;}
body {
  font-family: "db_helvethaica_x55_regular";
  font-size: 20px;
	background: #454545;
  color: #7f7f7f;
  overflow-x: hidden !important;
  line-height: 20px;
}
a,.glyphicon,.flaticonsocial:before,.navmenu li,.faqgroup h3,button{
  transition: all 0.3s ease 0s;
  -webkit-transition: all 0.3s ease 0s;
}
a{
  text-decoration: none;
  color: inherit;
}
a,span{display: inline-block;}
ul{margin: 0;}
.red,a:hover{color: #ef1d25;}
.noborderbot{border-bottom: 0!important;}
.nopad{padding-left: 0; padding-right: 0;}
.padleft10{ padding-left: 10px;}
.padright10{ padding-right: 10px;}
.padright5{padding-right: 5px;}
.padleft5{padding-left: 5px;}
.padbot-0{padding-bottom: 0!important;}
.mbot20{margin-bottom: 20px;}
.mbot30{margin-bottom: 30px;}
.relative{position: relative;}
.mainwrapper{position: relative; height: 100%;}
.block{display: block;}
/*container*/
.relative{position: relative;}
.container2{ max-width: 1400px !important; width: 100%; position: relative; margin: 0 auto;}
.glyphicon{margin-right: 5px;}
.text-center img{display: inline-block;}
#preloader {
  position: fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:#000 ; /* change if the mask should have another color then white */
  z-index:99; /* makes sure it stays on top */
}

#status {
  width:220px;
  height:20px;
  position:absolute;
  left:50%; /* centers the loading animation horizontally one the screen */
  top:50%; /* centers the loading animation vertically one the screen */
  background-image:url(../img/status.gif); /* path to your loading animation */
  background-repeat:no-repeat;
  background-position:center;
  margin:-10px 0 0 -110px; /* is width and height divided by two */
}

/*header*/
.mm-listview{font-size: 19px;}
#searchtop{
  font-size: 21px;
  position: absolute;
  right: 50px;
  top: 7px;
  cursor: pointer;
  display: none;
}
.sticky-wrapper{z-index: 100; height: 36px!important;}
.header{background: #fff; padding-top: 20px;position: relative; z-index: 100;}
.header .wraptop{padding-bottom: 15px;}
.header .logo{float: left;}
.header .rightsection{float: right; margin-top: 10px;}
.header .topmenu{float:left; margin: 5px 5px 0 0;}
.header .topmenu li{float: left;padding: 0 10px; border-right: 1px solid #ccc; line-height: 20px;}
.header .topmenu li:last-child{border-right: 0;}
.header .topmenu li a:hover{color: #ef1d25;}
.header .searchmain{width: 220px; float: left; position: relative;}
.header .searchmain .form-control{border-radius: 0; background: #999; color: #fff; height: 27px;font-size: 18px;
border:0;}
.header .searchmain .form-control::-webkit-input-placeholder {
   color: #fff;
}

.header .searchmain .form-control:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

.header .searchmain .form-control::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

.header .searchmain .form-control:-ms-input-placeholder {  
   color: #fff;  
}
.header .searchmain .glyphicon-search{position: absolute; height: 100%; background: #616367; padding: 5px 10px; right: 0; top: 0;
font-size: 13px; color: #fff; margin-right: 0;}
.header .searchmain .glyphicon-search:hover{background:#ef1d25; }
/*hammerberger*/
#hamburger {
    height: 25px;
    float: left;
    position: relative;
    width: 30px;
    margin:2px 0 0 20px;
   
}
#hamburger::before, #hamburger::after, #hamburger span {
    background: #616367 none repeat scroll 0 0;
    content: "";
    display: block;
    height: 5px;
    left: 0px;
    position: absolute;
    width: 30px;
}
#hamburger::before {
    top: 0px;
}
#hamburger span {
    top: 10px;
}
#hamburger::after {
    bottom: 0px;
}
#hamburger::before, #hamburger::after, #hamburger span {
    transition-delay: 0.5s;
    transition-duration: 0.5s;
    transition-property: transform, top, bottom, left, opacity;
    transition-timing-function: ease;
}
.header .lang{float: left; margin-left: 15px;}
.header .lang .active,.header .lang a:hover{color: #ef1d25;}

.ls-action > a{z-index: 9;}
/*Mainmenu*/
.navproduct {background: #232323; margin-bottom: 5px; width: 100%; z-index: 999;}
.miannav>li{float: left; color: #fff; font-size: 18px; 
background: url(../images/linemenu.jpg) no-repeat right;}
.miannav>li>a{display: block; padding: 8px 20px;}
.miannav>li>a:hover,.miannav>li>a.active{background: #ef1d25; color: #fff;}

.submenu{position: absolute; left: 0; padding-top: 20px; padding-bottom: 20px; background: #fff;
z-index: 99; width: 100%; display: none;}
.submenu li{float: left; text-align: center; }
.submenu li a{display: block;padding-left: 20px; padding-right: 20px; color: #626367;}
.submenu li a:hover{opacity: 0.6; color: #fe0000;}

.forceshow {
    opacity: 0;
    position: relative;
    top: -30px;
    transition: all 0.8s ease 0s;
}
.forceshow.active {
    opacity: 1;
    top: 0;
}
/*banner*/
.ls-slide-outer .ls-pager.ls-pg{position: absolute; width: 100%; bottom: 20px; z-index: 10;}
.ls-slide-outer .ls-pager.ls-pg > li a{width: 12px; height: 12px; background: #ff0000;}
.ls-slide-outer .ls-pager.ls-pg > li:hover a, .ls-slide-outer .ls-pager.ls-pg > li.active a {background: #fff;}
.ls-action > a{width: 27px; height: 27px; background-color: #ff0000; }
.banner li a{display: block;}
.wrapbanner{margin-top: 10px; margin-bottom: 5px;}
.wrapbanner .ls-prev{ width: 27px; height: 27px; background: url(../images/prev.jpg); left: 0; }
.wrapbanner .ls-next{ width: 27px; height: 27px; background: url(../images/next.jpg); right: 0;}
/* Main Nav 

-------------------------------------------------------------------------------------------------------*/
#menu-button { float:right; font-size:14px; font-family: "db_helvethaica_x55_regular", serif; text-transform:uppercase; display:table; height:52px; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color:#888}
.lt-ie10 #menu-button { position:relative; float:right; right:auto }
#menu-button .centralizer { display: table-cell; vertical-align: middle; }
#menu-button .centralizer .cursor { display:block; height:auto; cursor:pointer; }
#nav-button { display:inline-block; width:16px; margin:0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position:relative; top:2px; }
.nav-bar { background-color:#888; border-radius:1px; display:block; width:16px; height:2px; margin:0px auto 2px; }
#main-nav { background-color: #232323; width: 100%; padding-top:15px; padding-bottom:15px; padding-left:10px; padding-right:10px; }
#main-nav a { text-decoration: none; color: #fff; font-size: 18px; font-family: "db_helvethaica_x55_regular", serif; }
#main-nav > ul { float:left; padding:0; margin:0; list-style: none;}
#main-nav > ul a { text-transform: uppercase; }
#main-nav > ul .active > a, #main-nav > ul a.active, #main-nav > .additional-links .active > a, #main-nav > .additional-links a.active, #main-nav li a:hover, #options li a.current, #options li a.selected { color: #fff; background:#ef1d25;  }
#main-nav > ul li {float: left; margin-right: 4px; }
.slidefilter,#main-nav > ul li.textshow { color:#fff; font-size:20px; font-family: "db_helvethaica_x55_regular", serif; 
margin-right: 10px; display: none; }
#main-nav > ul li.textshow{display: block;}
.suboption {float: left;}
#content{overflow: hidden;}

#main-nav > ul li a { padding: 2px 10px;  position:relative; display:block; background:#616367; }
#main-nav > ul li a.last { border-bottom:1px solid rgba(255, 255, 255, 0.1); }
#main-nav > ul li a.sub-nav-toggle:before { background:none repeat scroll 0 0 rgba(255, 255, 255, 0.5); bottom:18px; content:""; height:8px; left:120px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); width:8px; }
#main-nav > ul li a.sub-nav-toggle:after { background:#111; bottom:20px; content:""; height:10px; left:120px; margin-left:-1px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); width:10px; }
#main-nav > ul > li > .sub-nav { padding:12px 0 5px 0; }
#main-nav > ul > li > .sub-nav > li:last-child { padding-bottom: 0px; }
#main-nav > ul > li > .sub-nav > li > a { font-size: 13px; text-transform:none; border:0; padding:0px 0 11px 0; }
 #menu-button.open #nav-button span:nth-child(1) {
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
 position: relative;
 top: 0px;
 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 -o-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;
}
 #menu-button.open #nav-button span:nth-child(2) {
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
 position: relative;
 top: -4px;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}
 #menu-button.open #nav-button span:nth-child(3) {
 display: none;
}
#menu:not( .mm-menu ),.show-m-menu {
   display: none;
}
.slidefilter .glyphicon-plus{float: right; color: #fff; font-size: 15px; margin-top: 3px;} 
.menunav{cursor: pointer;}
.menuhamberger{position: absolute; right: 65px; z-index: 999; width: 195px; background: #848484; 
   opacity: 0; transition: all 1s ease 0s; top: -20px; display: none;}
.menuhamberger.active{ opacity: 1;  top: 56px;  }
.menuhamberger li{display: block; float: none; background: none; text-align: right; }
.menuhamberger a{display: block;}
.menuhamberger ul{position: relative;}
.menuhamberger ul::before{
  content: "";
  width: 16px;
  height: 6px;
  background: url(../images/bulletmenu.jpg);
  position: absolute;
  top: -6px;
  right: 30px;
}

#hamburger::before, #hamburger::after, #hamburger span , {
    transition-delay: 0.5s;
    transition-duration: 0.5s;
    transition-property: transform, top, bottom, left, opacity;
    transition-timing-function: ease;
}
#hamburger.active::before, html.mm-opening #hamburger::after {
    top: 20px;
}
#hamburger.active span {
    left: -50px;
    opacity: 0;
}
#hamburger.active::before {
    transform: rotate(45deg);
}
#hamburger.active::after {
    transform: rotate(-45deg);
}
.container-iso { padding:0px; width:1280px; position:relative; margin:0 auto; font-size:20px; line-height:22px; font-family: "db_helvethaica_x55_regular", serif;  }
.container-iso h3 { font-size:22px; font-weight:700; line-height:24px; padding:0; margin:0; font-family: "db_helvethaica_x55_regular", serif; }
.container-iso p{ padding:0; margin:0; }
.col1-3 { width:417px; height:720px; margin:5px; float:left; position:relative }
.col2-3 { width:843px; height:720px; margin:5px; float:left; position:relative }
.col3-3 { width:940px; height:720px; margin:5px; float:left; position:relative }
.col4-3 { width:1260px; height:auto; margin:5px; position:relative }
.col1-3.auto, .col2-3.auto, .col3-3.auto { height:auto; }
.col1-3.half { height:355px; }
.col2-3.half { height:355px; }
.col1-3.white { padding:35px 40px 25px 40px; background:#fff; position:relative }
.col2-3.white, .col3-3.white, .col4-3.white { padding:45px 50px 44px 50px; background:#fff; }
.col1-3.white-bottom{ padding:0px 0px 0px 0px; background:#fff; z-index:33; position:absolute; bottom:0; min-height:150px; }
.col3-3.white-bottom { padding:0px 0px 0px 0px; background:#fff; z-index:33; position:absolute; bottom:0; min-height:150px; }
.col2-3.white-bottom { padding:0px 0px 0px 0px; background:#fff; z-index:33; position:absolute; bottom:0; min-height:150px;  }

.col2-3.white-bottom:after { left:52px }
.connect { position:absolute; left:0; top:0; }
.white-right { width:360px; float:right; padding:40px 45px 30px !important }
.white-right:before { background:#fff; top:47px; content:""; height:20px; left:-8px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); width:20px; }
.element .col1-3, .element .col2-3, .element .col3-3 { margin:0 }
.col-info .product-code {font-size:22px;line-height:24px; padding:0; margin:0; float:right}
.col-info .product { color:#ef1d25; float:left;}
.col-info { padding:5px 10px;}
.col-bor { border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; height:48px; overflow:hidden;}
.col-delist  { padding:0; margin:0;}
.col-delist li{ display:inline-block; border-left:1px solid #d8d8d8; padding:5px 10px; }
.col-delist li:first-child { border-left:none; padding-left:0;}
.boxtag { background:#ef1d25; z-index:33; font-size:19px; line-height: 19px; color:#fff; text-align:center; position:absolute; left:0; top:0; padding:10px 15px;}
.boxtag .glyphicon{font-size: 18px; margin-right: 0;}
.boxtag p{margin-top: -2px;}
.thumb-hover-1 { position: relative;  overflow: hidden; width: 100%;}
.thumb-hover-1 img { max-width: 100%;vertical-align: top;-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
.thumb-hover-1:hover img,
.thumb-hover-1.hover img { -webkit-transform: scale(1.1);transform: scale(1.1);}
.wrapfilter{margin-top: 7px; margin-bottom: 3px;}
.overflow, .element { overflow:hidden; }
.break { display:block; position:relative; height:20px; width:100%; }

.images { display:block; position:relative; }
.images a{display: block;}
.images img { width:100%; display: block; max-width: 100% !important; z-index:9 }
img { box-shadow: #000 0 0 0 }
.title, .subtitle { z-index:1001; position:absolute; top:35px; left:35px; width:auto; cursor:pointer; pointer-events: none; background:#fff; }
.subtitle { top: 69px; font-weight: 400; left:35px !important; }
.title-wrap, .subtitle-wrap { overflow: hidden; position: relative; }
.title-wrap h5, .subtitle-wrap p { overflow: hidden; white-space: nowrap; color:#2b2b2b; line-height:1; text-decoration:none }
.title-wrap h5 { font-size:14px; padding:9px 10px 10px 10px; font-weight:700; text-transform:uppercase; }
.subtitle-wrap p { font-size:12px; font-weight:400; padding:8px 10px 9px 10px; text-transform:uppercase; font-family:'Open Sans', 'Helvetica Neue', Arial, Helvetica, sans-serif; color:#555; font-style:normal }
/* End Image Hover
--------------------------------------------------------------------------------------------------------*/
.groupiconM{display: none;}
.col-footer{width: 14.285%; float: left;}
.col-footer h3{color: #000; font-size: 19px; font-family: 'db_helvethaica_x65_med';}
.col-footer li{margin-bottom: 5px;}
.footermain{background:#fff; font-size: 18px; padding: 20px 0; margin-top: 5px;}
.footermain .headfooter h2{font-size: 19px; color: #fe0000; font-family: 'db_helvethaica_x65_med'; float: left;}
.footermain .gototop{float: right;color: #fe0000; cursor: pointer;  }
.footermain .headfooter{ margin-bottom: 10px; }
.footermain a:hover{color: #fe0000; }
.footermain .glyphicon-chevron-up{font-size: 13px;}
.copyright{background: #454545; color: #fff; padding: 20px 0;}
.copyright h2{font-size: 20px; font-family: 'db_helvethaica_x65_med';}
.copyright p{margin-bottom: 0; font-size: 18px; line-height: 18px;}

/*productlist*/
.filteroption{float: right;}
.fieldgroup{float: left; width: 138px; margin-left: 5px;}
.fieldgroup .form-control{border-radius: 0; font-size: 18px; padding-top: 2px; height: 30px;}
.selection-box{position: relative;}
.selection-box::after {
    background-position: center center;
    content: "";
    height: 30px;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
}
.selection-box::after {
    background-image: url("../images/selectdrop.jpg");
}
select {
    -moz-appearance: none;
    }

.containermain{background: #fff;}
.container-list .col-info .product-code{float: left; margin-left: 5px;}
.compareclick{float: right; padding: 3px 7px; color: #fff; background: #959595; cursor: pointer;}
.compareclick:hover,.compareclick.active{background: #ef1d25; color: #fff;}
.removeclick{float: right; padding: 3px 7px; color: #fff; background: #959595; cursor: pointer;}
.removeclick:hover,.removeclick.active{background: #ef1d25; color: #fff;}
/*productdetail*/
.page{color: #fff; padding: 10px 0;}
.ls-slide-outer .ls-pager.ls-gallery a{display: block;}

.productdetail .listdetail{padding-left: 17px;}
.productdetail .listdetail li{ color: #ff0000; margin-left: 0; }
.productdetail .listdetail span{color: #7f7f7f;}
.productdetail h2{font-size: 30px; line-height: 30px; color: #232323;}
.productdetail h3{font-size: 24px; line-height: 24px; color: #232323;}
.productdetail .showcolor{ width: 18px; margin-right: 5px;}
.productdetail .showcolor img{max-width: 100%;border:1px solid #616367;}
.productdetail .button{margin-top: 20px;}
.productdetail .button .fb-like{float: right;}
.productdetail .button a{padding: 5px 20px; background: #ff0000; color: #fff;}
.productdetail .detailbox{ background: #f1f1f1; padding: 20px; border:1px solid #d8d8d8; margin-top: 50px;
float: left; }
.colorselect{margin-bottom: 15px;}
.colorselect .showcolor{cursor: pointer;}
.colorselect .showcolor img{ transition: all 0.2s ease 0s;}
.colorselect .showcolor:hover img,.colorselect .showcolor.active img{border: 2px solid #ff0000;}
.shop i{margin: -5px 2px 0 0; position: relative; top: -2px;}
.videosection{ margin: 30px 0;}
.productdetail .tabdetail{background: #e0e0e0;}
.productdetail .tabdetail li{float: left; border-right: 2px solid #fff;}
.productdetail .tabdetail li a{display: block; padding: 5px 20px; background: #828282; color: #000; text-align: center;
color: #fff; line-height: 20px; font-size: 20px;position: relative;}
.productdetail .tabdetail li a.active,.productdetail .tabdetail li a:hover{background: #ff0000;}
.productdetail .tabdetail li i{display: block; margin-bottom: 5px;}
.productdetail .tabdetail li a.active:before{content: ""; width: 18px; height: 8px; background:url(../images/bullettab.png) no-repeat;
position: absolute; left: 50%; bottom: -8px;margin-left: -9px; }

.productdetail .tabshow,.productdetail .specific{margin-top: 20px; padding-left: 15px; padding-right: 15px;}
.productdetail .tabshow section{margin-bottom: 20px;}
.productdetail .detailpic img{display: inline-block;}
.productdetail .detailpic{padding-top: 20px; padding-bottom: 20px; border:1px solid #ccc;}
.productdetail .tabshow h3{font-size: 24px; line-height: 24px; color: #ef1d25; margin-top: 15px;}
p{line-height: 20px;}
.specific,.tabshow{padding-bottom: 20px;}
.specific h3{color: #ef1d25; font-size: 20px;}
.specific li {
    border-bottom: 1px solid #eaeaea;
    padding: 7px 5px;
}
.feature div:nth-child(4n+1) {clear:both;}
.specific li:nth-child(2n+1) {}

.specific li p{margin-bottom: 0;}
.tabinner{display: none;}
.relate h2{font-size: 20px; color: #fff; margin: 15px 0;}
.productdetail .ls-slide img{display: inline-block;}
.productdetail .ls-slide{text-align: center;}

.compare{padding-top: 0; padding-bottom: 0; background: #898989; height: 0; overflow: hidden;  
  transition: all 1s ease 0s; position: relative;}
.compare .ls-slide-outer .ls-pager.ls-pg{bottom: -5px;}
.compare.show{height: auto; padding-top: 15px; padding-bottom: 25px;}
.compare h3{font-size:22px; font-weight:700; line-height:24px; padding:0; margin:0; font-family: "db_helvethaica_x55_regular", serif;}
.compare .col1-3{height: auto; }
.compare .comparelist{position: relative;}
.compare .white-bottom { padding:0px 0px 0px 0px; background:#fff;min-height:150px;
width: 100%; }
.compare .product-code{float: left; margin-left: 5px;}
.compare h2{float: left; font-size: 22px; color: #fff; margin-left: 10px;}
.compare .compareresult{float: right; background: #454545; color: #fff;font-size: 20px; padding: 3px 25px; cursor:pointer; margin-right: 10px;}
.compareslide{margin-top: 20px;}
.compareshow{width: 82%; float: left; padding-right: 10px;}
.compareleft{width: 18%;float: left; text-align: right;}
.compareleft h2{font-size: 45px; line-height: 40px; margin: 135px 15px 0 10px;}
.compare .col-delist li{font-size: 17px; padding: 5px 7px;}

/*compareinfo*/
.compareinfo{padding: 20px 0;}
.compareinfo .glyphicon-cog{font-size: 14px; margin-left: 3px;}
.compare-tr{float: left; border-right: 1px solid #ccc;}
.compare-tr h2{ margin-right: 10px; font-size: 22px; color: #ef1d25; margin-bottom: 15px; }
.compare-tr ul{padding: 0 10px;}
.compare-tr li{padding: 5px; border-bottom: 1px solid #ccc;}
.compare-thead{width: 18%; text-align: right; }
.compare-thead li{color: #282828;}
.compare-inner{width: 82%; float: left;}
.compare-inner .compare-tr{width: 33.333%;}
.compare-inner .compare-tr h2{margin-left: 10px; color: #282828;}
.infohide{display: none; font-size: 16px; color: #ef1d25;}
.banner-m{display: none;}

/*service*/
.isotopedetail{margin-left: -5px; margin-right: -5px;}
.isotopedetail .element{float: left; margin-bottom: 10px;padding-left: 5px; padding-right: 5px; }
.isotopedetail .box{background-size: cover;}
.box1{width: 70%; height: 570px;}
.box-h-280{width: 100%;  height: 280px;}

.box1 .boxcenter{background:url(../images/bgservicecenter-3.jpg) center left;  background-size: cover; }
.box1 .boxdriver{background:url(../images/driverbg.jpg) center left;  background-size: cover; }


.box2{width: 23.5%; height: 280px;}
.box2 .boxregis{background:url(../images/warranty.jpg) center left;  background-size: cover;}

.box2 .boxform{background: #6f6e6e;}


.box3{width: 30%; height: 570px; }
.box-h-670{width: 100%;  height: 670px;}
.box-h-570{width: 100%;  height: 570px;}

.box3 .boxfaq { background: url(../images/faq-2.jpg); width: 100%; height: 570px;}
.isotopedetail h2{font:48px "db_helvethaica_x75_bd"; color: #fff; line-height: 40px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.89);}
.isotopedetail a{text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.89);}
.isotopedetail .box{background-size: cover;}

/*csr*/
.box-h-330{width: 100%;  height: 330px;}
.box-h-575{height: 575px;}
.maincsr .box1{height: 330px;}
.maincsr .box2{height: 330px;}
.maincsr .box1 .box_csrspirit{background-image:url(../images/csrspiritcover.jpg);}
.maincsr .box2 .box_csr{background-image:url(../images/csrourcover.jpg);}
.maincsr .box2 .box_csrnews{background-image:url(../images/csrnewscover.jpg);}
.maincsr .box3{height: 670px; }
.maincsr .box3 .box_csrfoundation{background-image:url(../images/csrfoundationcover.jpg);}
/*csrphilosophy*/
.csrphilosophy .box1{width: 35%;}
.csrphilosophy .box2{width: 65%;}
.csrphilosophy .box4{width: 65%;}
.csrphilosophy .boxphilosophy1{background-image: url(../images/philosophy1.jpg);}
.csrphilosophy .boxphilosophy2{background-image: url(../images/philosophy2.jpg);}
.csrphilosophy .boxphilosophy3{background-image: url(../images/philosophy3.jpg);}
.csrphilosophy .boxphilosophy4{background-image: url(../images/philosophy4.jpg);}

.foundation .box1,.foundation .box2{height: 570px;}
.foundation .box1{width: 35%;}
.foundation .box2{width: 65%;}

.isotopedetail .element{text-align: right;}
.isotopedetail a:hover{color: #fff; text-decoration: underline;}
.isotopedetail .box{padding-right: 15px; padding-left: 15px; padding-top: 15px; color: #fff;}
.isotopedetail .moredetail{line-height: 20px;}
.isotopedetail .moredetail i{margin-left:5px; position: relative; top: -2px;}
.isotopedetail .forminsur{text-align: left;}
.isotopedetail .forminsur p{margin: 5px 0 10px;}
.isotopedetail .forminsur fieldset{margin-bottom: 10px;}
.isotopedetail .forminsur label{font-size: 20px; font-weight: normal;}
.isotopedetail .form-control{color: #333; border-radius:0; height: 28px; font-size: 18px;}
.btnred{background: #ef1d25; padding:5px 15px; color: #fff;}
.btnred:hover{color: #fff;}
.filteroption .btnred {margin-left:10px;}
.wrapbannerdetail{height: 277px;}
.wrapbannerdetail.bg-service-center{background: url(../images/bannerservicecenter.jpg) center;}
.mainnav{background: #232323; margin: 7px 0;}
.mainnav li{float: left; border-right: 5px solid #454545;}
.mainnav li a{color: #fff; font-size: 19px; padding: 8px 15px; min-height: 37px;}
.mainnav li a:hover,.mainnav li a.active{background: #ef1d25;}

.sidebarform{padding-top: 25px; padding-bottom: 15px;}
.sidebarform .form-control{border-radius: 0; height: 30px; font-size: 18px;}
.sidebarform select.form-control{ padding-top: 2px; background: #828282; border: 0; color: #fff;}
.sidebarform .selection-box::after{background-image: url(../images/selectgray.jpg);}
.sidebarform .searchside,.sidebarform .selection-box{margin-bottom: 7px;}
.sidebarform .addressnav{margin-top: 40px;}
.addressnav ul{margin-bottom: 10px;padding-bottom: 10px;border-bottom: 1px solid #ccc;}
.addressnav ul li{position: relative; padding-left: 30px; margin-bottom: 10px;}
.addressnav ul li i{position: absolute; left: 0;}
.sidebarform h2{font-size: 24px; color: #282828; margin-bottom: 15px;}


.service-center-list{ background: #ececec;  min-height: 700px; padding-top: 20px;}
.service-center-list li{border-right: 5px solid #ececec; border-left: 5px solid #ececec;
font-size: 19px; line-height: 19px; padding-top: 10px; padding-bottom: 10px; 
min-height: 215px; margin-bottom: 10px; padding-left: 30px; position: relative; 
background: url(../images/pinicon.jpg) no-repeat 10px 15px #fff;}
.service-center-list h2{color: #232323; font-size: 23px; line-height: 23px;}
.service-center-list h3{margin-top: 5px; font-size: 19px; line-height: 19px;}

.tabledownload{background: #fff;}
.tabledownload tr th{text-align: center; background: #d2d2d2; color:#282828;}
.tabledownload tr .download{margin-left: 5px;}
.faqaside{display: block;}
.faqaside li{ border-bottom: 1px solid #ccc; }
.faqaside li a{ color: #616367; font-size: 20px; padding: 10px 15px; display: block; }
.faqaside li a:hover,.faqaside li a.active{ color: #fff; background: #ef1d25; }
.faqaside li i{font-size: 13px;}

.faqlist li{margin-bottom: 3px;}
.faqlist h3{background:url(../images/iconfaq.jpg) #e4e4e4 no-repeat 20px 13px; padding: 5px 40px; cursor: pointer;
line-height: 24px; }
.faqlist h3:hover,.faqlist h3.active{background-image:url(../images/iconfaqactive.jpg); color: #232323;}

.faqlist .faqshow{padding:20px 40px; display: none;}

.detailfaq{border-left: 1px solid #ccc; min-height: 400px;}
.sidebarfaq h2{padding-left: 20px;}

#main-nav.detail-nav{background: #232323 ; padding: 0;}
#main-nav.detail-nav li{margin-right: 0; border-right: 5px solid #454545;}
#main-nav.detail-nav li a{
  color: #fff;
    font-size: 19px;
    padding: 8px 15px;
    background: #242424;
}
#main-nav.detail-nav li a.selected{background:#ef1d25; }

.newslist .date{float: right;}
.newslist .col-info{padding-top: 7px; padding-bottom: 7px;}
.newslist i{margin-right: 3px;}
.newsdetail{margin-top: 5px;}
.newsdetail .containermain{padding-top: 20px; padding-bottom: 20px;}

.newsdetail h1{float: left; font-size: 30px; color: #282828;}
.newsdetail header{margin-top: 20px;}
.newsdetail header .date{float: right; margin-right: 20px;}
.newsdetail header .fb-like{float: right;}
.newsdetail section{margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
.cataloglist{padding: 40px 0; background: #ececec; border-left: 1px solid #ccc;}
.cataloglist a{display:block;}
.cataloglist a img{display: inline-block;}
.cataloglist li{margin-bottom: 20px; min-height: 250px;}
.cataloglist h2{font-size: 24px; margin-top: 7px;}

.clipvideo figure{background: #000; display:block; float: left;}
.clipvideo h2{font-size: 18px;} 

.play{
    background:url(../images/clipinner.png);
    content: "";
    display: block;
    height: 56px;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
    position: absolute;
    width: 55px;
}

.gal{background: url(../images/showgallery.png); width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0;}
.clipvideo a:hover .gal{opacity: 1;}
.clipvideo h2{font-size: 20px;}
.clipvideo a:hover .img-responsive{opacity: 0.5;}
.gallerydownload li{min-height: auto;}
.cataloglist h1{margin-left: 15px; margin-bottom: 20px;}
.gallerydownload .gal{background: url(../images/downloadpicicon.png);}

.cooking .box1{width: 35%; height: 337px;}
.cooking .box2{width: 65%; height: 684px;}

.aboutus .box1{width: 70%; height: 383px;}
.aboutus .box2{width: 35%; height: 383px;}
.aboutus .box3{width: 30%; height: 251px;}
.aboutus .box4{width: 30%; height: 515px;}

.csr_our .box1,.csr_our .box2{height: 337px;}
.csr_our .box4{height: 684px;}

.box-h-337{width: 100%; height: 337px;}
.box-h-684{width: 100%; height: 684px;}
.box-h-383{width: 100%; height: 383px;}
.box-h-251{width: 100%; height: 251px;}
.box-h-515{width: 100%; height: 515px;}

.box1 .boxcooking_menu{background:url(../images/menucook.jpg) center center;  
  background-size: cover; }
.box2 .boxcooking_new{background:url(../images/cookingnews.jpg) center center;  
  background-size: cover; }
.box1 .boxcooking_download{background:url(../images/cookingdownload.jpg) center center;  
  background-size: cover; }
.box1 .box_company{background:url(../images/box_company.jpg) center center;  
  background-size: cover; }
.box3 .box_contact{background:url(../images/contactus.jpg) center center;  
  background-size: cover; }
.box4 .boxaboutgroup{background:url(../images/aboutgroup.jpg) center center;  
  background-size: cover; }
.box2 .box_history{background:url(../images/abouthistory.jpg) center center;  
  background-size: cover; }  
.box2 .box_massage{background:url(../images/about_message.jpg) center center;  
  background-size: cover; }

.box1 .boxphilosophy{background:url(../images/bgphilosophy.jpg) center center;  
  background-size: cover; }
.csrnews .box1,.csrnews .box2{height: 570px;}
.videoshow{margin-bottom: 30px; text-align: center; padding-bottom: 20px; border-bottom: 1px solid #ccc;}
#slidenewsdetail{text-align: center;}
#slidenewsdetail img{display: inline-block;}
/*aboutus*/
.aboutcompany .section1{background: #e2e2e2;}
.aboutcompany ul{ margin: 15px 0 0 0px;}
.aboutcompany li{font-size: 20px; margin-bottom: 15px;}
.aboutcompany h2{font:24px 'db_helvethaica_x65_med'; color: #282828;}
.aboutcompany img{display: inline-block;}
.detailrightgray{border-left: 1px solid #ccc; min-height: 400px; background: #e4e4e4; padding: 20px; display:none;}
.detailrightgray .textb{font:30px 'db_helvethaica_x65_med'; margin-top: -3px;}
.detailrightgray article{margin-top: 20px;}
.detailrightgray article p{margin-bottom: 20px;}

.aboutgroup h2{font:24px 'db_helvethaica_x65_med'; color: #282828; padding-left: 25px; background: url(../images/iconhomered.jpg) no-repeat left;}
.aboutgroup li{ padding: 20px; border-bottom: 1px solid #ccc; font-family:'db_helvethaica_x65_med';}
.aboutgroup li:last-child{border-bottom: 0;}
.groupleft{border-right: 1px solid #ccc; }

.message{position: relative; min-height: 500px;}
.message article{ padding: 25px;}
.message .mdpic{position: absolute;right: 0; bottom: 0; z-index: 2;}
.message .mdname{font-family:'db_helvethaica_x65_med'; padding-left:20px; }
.message .mdname h2{font-size: 30px; color: #232323; line-height: 30px;}
.message .mdname h3{font-size: 24px; line-height: 23px; margin-bottom: 10px;}
.message .detailmessage{padding: 25px 340px 25px 25px; background: #e2e2e2; position: relative; z-index: 1; font-family:'db_helvethaica_x65_med'; margin-bottom: 10px;}
.message .quote{padding-right: 240px;}
.message .quote h4{font:36px 'db_helvethaica_x65_med'; color: #282828; text-align: right; line-height: 34px;  position: relative;}
.message .quote1{position: relative; top: -10px;}
.message .quoteend{position: absolute; bottom: 5px; right: -20px; top: auto;}

.contactpage{padding-left: 15px; padding-right: 15px;}
.contactpage .addressnav ul{border: 0; margin-bottom: 0; margin-top: 30px;}
.contactpage .red{font:25px 'db_helvethaica_x65_med';}
.bold{font:22px 'db_helvethaica_x65_med'; color: #282828;}
.contactpage .map a{display: block;}
.contactpage .map{padding: 15px;}

.philosophy{padding: 20px;}
.philosophy h2{font:30px 'db_helvethaica_x65_med'; color: #484349; border-bottom: 1px solid #ccc;}
.philosophy h2 .red{font-size: 36px;}
.philosophy h3{font:24px 'db_helvethaica_x65_med'; color: #616367; margin-bottom: 20px; }
.philosophy .picphilosophy img{display: inline-block;}
.philosophy section{ margin-top: 2px; }
.philosophy .detailphilosophy{font:22px 'db_helvethaica_x65_med'; color: #7f7f7f; padding-top: 60px; }
.philosophy .gray{ background: #ececec; }

.csrmassage {min-height: auto;}
.csrmassage article {padding-bottom: 0;}
.csrmassage .mdpic{position: relative;}
.csrmassage .mdpic img{ display: inline-block;}
.csrmassage .quote,.csrspirit .quote{padding-right: 0; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #ccc;}
.csrmassage .quote h4{font-family:'db_helvethaica_x55_regular';}
.csrmassage p{font-size: 21px; margin-bottom: 15px;}
.csrmassage .bold{font-size: 30px; line-height: 21px;}

.csrspirit{padding-bottom: 20px;}
.csrspirit .quote h4,.foundation .quote h4{text-align: center; font-family:'db_helvethaica_x55_regular';}
.csrspirit .quote{border-bottom: 0; padding-bottom: 0;}
.csrspirit .quoteend,.csrisr .quoteend,.foundation .quoteend{position: relative; bottom: auto; right: auto; top: -7px; margin-right:3px;}
.csrspirit .picspirit{margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc;}

.csrisr article{padding: 0;background: #ececec; }
.csrisr .isrdetail{min-height: 300px; padding-top: 20px;}
.isrpic{background: #fff;}
.isrpic,.isrdetail{padding-top: 40px; padding-bottom: 40px;}

.mainpad20{padding: 20px; min-height: auto;}
.foundation{min-height: auto;}
.foundation .quote{ padding-right: 0;}
.foundation .quote h4 {text-align: left; font-size: 30px;}
.foundation .endfoundation{margin-top: 10px; padding-top: 10px; border-top: 1px solid #ccc;}

.alliance p{ margin-bottom: 0; font-size: 24px; line-height: 24px; }
.alliance li{border-right: 1px solid #ccc;}
.alliance li:last-child{border-right: 0;}

.job{background:#ececec;}
.job .detailjob{background: #fff; padding-top: 20px; padding-bottom: 20px; display:none;}
.job .detailjob h3{font:30px 'db_helvethaica_x75_bd'; color: #ef1d25;}
.job .detailjob h3 .black{color: #232323;}
.job .detailjob section{margin-bottom: 15px;}
.job .sidebarjob,.job .detailjob{ padding-top: 20px; padding-bottom: 20px;}
.job .sidebarjob h2{font:30px 'db_helvethaica_x65_med'; color: #232323;}
.job .sidebarjob a{display: block; padding: 10px 5px;}
.job .sidebarjob li{border-bottom: 1px solid #ccc;}
.job .sidebarjob .active,.job .sidebarjob a:hover{background:#ef1d25; color: #fff; }
.job .sidebarjob a:hover .red,.job .sidebarjob .active .red{color: #fff;}
.gotojobs{padding-top: 10px; margin-top: 10px; border-top:1px solid #ccc;}

.jobonline{padding: 40px 20px;}
.jobonline fieldset{padding-bottom: 10px; margin-bottom: 30px; border-bottom: 1px solid #ccc;}
.jobonline label{font-size: 24px; font-weight: normal;}
.jobonline .form-control{background: #e2e2e2; height: 30px; border-radius: 0; font-size: 17px;
padding-top: 5px;}
.jobonline .padright8{padding-right: 8px;}
.jobonline .rowgroup{margin-bottom: 15px;}
.jobonline textarea.form-control{height:120px; line-height: 18px;}
.jobonline .endeducateform{padding-right: 25px;}
.jobonline .to{position: absolute; right: 0; top: 0px; right: 5px; font:30px 'db_helvethaica_x65_med';}
#imageGallery li img{cursor: crosshair;}

/*newcss*/
.specific p{text-align: right;}
.cliprelate li{}
.cliprelate li a img{display: block; max-width: 195px;}
.wrapservicelist {height:220px; position:relative;}
.wrapservicelist .fb {position:absolute; bottom:0; right:0;}

.comparetable .t-col1{width: 18%; text-align: right;}
.comparetable .t-col3{width: 27.333%;}
.remark li{font-size:16px;}
.catalogfix h2 {height:50px;}
/*
.header, .boxtag, .footermain, .product, #main-nav, .button, .tabdetail, .feature{
	filter: none; 
	filter: url('../js/filters.svg#grayscale');
	filter: gray;
	-webkit-filter: grayscale(1);
}
*/
.containercatalog{background: none;}
.containercatalog .sidebarform{background: #fff; padding-bottom: 0;}
.containercatalog .cataloglist{background: none; border:none;}
.containercatalog .faqaside {padding-left: 30px;}
.containercatalog .faqaside li{border-bottom: 0;}
.containercatalog .faqaside li a{padding: 2px 15px;}
.containercatalog .faqaside li a:hover,.containercatalog .faqaside li a.active {
color: #ef1d25;
background: none;
}
.subfaqslide{margin: 5px 0;}
.subfaqslide a{display: block; padding-left: 40px!important; position: relative;}
.subfaqslide a:after{content: ''; width: 5px; height: 5px; background: #989898; position: absolute; left: 22px; top: 10px;}
.searchcatalog{display: block; width: 100%; background: #989898; height: 35px; color: #fff; margin-top: 20px;}


.cataloglistNew{padding-top: 0; padding-left: 20px; margin-bottom: 20px;}
.cataloglistNew .catalog{padding-top: 30px; background: url(../images/topcatalog.jpg) repeat-x top center;}
.cataloglistNew li{ height: 385px; background:  url(../images/bglicatalog.jpg) repeat-x top center; padding-top: 85px; position: relative; }
.cataloglistNew .wrapimage{max-width: 200px; -webkit-box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.75);
box-shadow: 5px 5px 10px -5px rgba(0,0,0,0.75);}
.cataloglistNew  h2{font-size: 21px; color: #000; font-weight: normal; height: auto; margin-top: 26px;}
.loadiconcat{position: absolute; right: 10px; top: 83px; width: 40px;}
.loadiconcat a{ display: block; margin-bottom: 5px; }
.allcatalog{display: none; cursor: pointer;}

.allcatalog.active i{transform: rotate(180deg);}
.allcatalog,.allcatalogD{position: relative;}
.allcatalog i,.allcatalogD i{position: absolute; right: 10px; top: 5px; font-size: 12px; transition: all 0.3s ease 0s;}



/*newcsslanding*/
.wrapper-fluid{max-width: 1920px; width: 100%; margin: 0 auto;}
.pagelanding{font-size: 23px; font-family: 'DB Helvethaica X 45 Li';}
.pagelanding p{line-height: 24px; font-family: 'DB Helvethaica X 45 Li';}
.pagename{background: #000; color: #fff;}
.pagename h1{font-size: 20px; padding: 7px;}

.bannerSM{background: url(../images/banner-landing-1.jpg) no-repeat right top #fff; 
  background-attachment: fixed; height: 680px; position: relative; z-index: 5; }

#banner2{position: relative; height: 680px;}

.coverbanner{float: right; width: 45%; padding-top: 150px;}
.coverbanner h2{font-family: 'DB Helvethaica X 35'; font-size: 50px; color: #231f20;}
.bannerSM .coverbanner h2,.bannerSM .coverbanner h3,.bannerSM .coverbanner p,.bannerSM .coverbanner aside{
-webkit-animation-name: fadeIn;
  animation-name: fadeIn;}
.coverbanner h3{font-family: 'db_helvethaica_x75_bd'; color: #000;font-size: 60px;
line-height: 50px; margin-bottom: 20px;}
.coverbanner p{font-family: 'DB Helvethaica X 45 Li'; color: #231f20;}
.coverbanner aside{margin-top: 20px;}
.groupbutton a{display: inline-block; background: #39b54a; color: #fff;
padding: 15px 0 15px; width: 250px; text-align: center; font-family: 'db_helvethaica_x75_bd';}
.groupbutton a.seemore{background: #142230;}
.Woodtop{position: absolute; bottom: 0; width: 100%;
z-index: 0;  height: 100px; background: url(../images/bgWood.jpg) repeat-x center center;}

.itembanner{float: right; width: 55%; height: 680px; position: relative;}
.itembanner > div{position: absolute; z-index: 1;}
#producttop{bottom: 30px; left: 160px; z-index: 2;}
#orange{bottom: 20px; z-index: 3;  left: -10px;}
#juice{bottom: 20px; z-index: 1; right:50px; }
.transition{transition: all 1s ease-in-out 0s;}
.bannerSM .coverbanner,.bannerSM .itembanner{float: left;}


#bannerSM{position: relative; min-height: 100%;}
.switch{position: absolute;
    bottom: 142px;
    left: 111px;
  }

#bannerSM.leave h2,#bannerSM.leave h3,#bannerSM.leave p,
#bannerSM.leave aside{-webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;}

#bannerSM.leave #orange{left: 20px;}
#bannerSM.leave #juice{right: 80px;}
#bannerSM.leave .switch{transform: rotate(90deg);}

.delay-0-2s {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.delay-0-4s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s!important;
}
.delay-0-6s {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s!important;
}

.trans-delay-0-2s {
  transition-delay: 0.2s!important;
}
.trans-delay-0-4s {
  transition-delay: 0.4s!important;
}
.trans-delay-0-6s {
  transition-delay: 0.6s!important;
}
.trans-delay-0-8s {
  transition-delay: 0.8s!important;
}
.trans-delay-1s {
  transition-delay: 1s!important;
}

/*section2*/
.text-light{font-family: 'DB Helvethaica X 45 Li';}
#juice-2{position: absolute; left: 0; top: 0; z-index: 2; width: 350px;}
.picturesection{ background: #142230; height: 880px; position: relative; z-index: 4;}
#pic-landing-1{position: absolute; top: 170px;
left: 10%; transform: rotate(0deg); z-index: 1; opacity: 0;}
#pic-landing-2{position: absolute; bottom: 0;
left: 5%; transform: rotate(0deg); z-index: 0; opacity: 0;}

#pic-landing-1.leave{opacity: 1; transform: rotate(-10deg);}
#pic-landing-2.leave{opacity: 1; transform: rotate(10deg);}
.textpicture{float: left; width: 50%; margin-left: 50%; padding-top: 150px; color: #fff;}
.textpicture h2{font-size: 50px; line-height: 50px;  font-family: 'db_helvethaica_x75_bd';
margin-bottom: 30px; }
.textpicture ul{margin: 50px 0 80px;}
.textpicture li{float: left; width: 50%; margin-bottom: 15px;}
.textpicture .fa-check-circle{font-size: 20px; margin-right: 10px;}
.yellow{color: #f7f18f;}


.animate-text{transition: all 1s ease;}
.animate-text.fadegroup{-webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)}
.leave .animate-text{opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);}

/*section3*/
.cause-section{background: #d9dce1; padding-top: 200px; padding-bottom: 200px; overflow: hidden;
position: relative;}
.cause-section h2{font-size: 50px; line-height: 50px;  font-family: 'db_helvethaica_x75_bd';
margin-bottom: 30px;  color: #231f20;}
.cause-section li{margin-bottom: 15px; color: #9d1d20;}
.cause-section ul{margin-top: 50px;}
.cause-section .fa-times{font-size: 20px; margin-right: 10px; color: #ed1c24;}
#bg-cause{position: absolute; width: 992px; height: 860px; right: 0; bottom: 0;
background: url(../images/bg-cause.jpg) no-repeat; z-index: 1;}
.textanimate-2{position: relative; z-index: 2;}

/*section4*/
.recommend{
  background: rgba(255,255,255,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(52%, rgba(253,253,253,1)), color-stop(100%, rgba(226,228,229,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
}

.recommend h2{font-family: 'DB Helvethaica X 35'; font-size: 50px; color: #231f20;}
.recommend h3{font-family: 'db_helvethaica_x75_bd'; color: #000; font-size: 60px;
line-height: 50px; margin-bottom: 40px;}
.recommend h4{font-family: 'db_helvethaica_x75_bd'; color: #231f20; font-size: 24px;
line-height: 24px; margin-bottom: 0;}
.recommend p{color: #231f20;}
.recommend .groupbutton{margin-top: 50px;}
.textanimate-3{padding: 140px 0 85px;}

.itembanner.itembanner-s{float: none; width: 45%; height: 450px; position: relative;
margin: 0 auto;}

.itembanner-s #producttop{bottom: -50px; width: 250px; left: 160px; z-index: 2;}
.itembanner-s #orange{bottom: -65px; top: auto!important; z-index: 3;  left: 23px; width: 220px;}
.itembanner-s #juice{bottom: -55px; top: auto!important; z-index: 1; right: 7px; width: 233px; }
.itembanner-s .switch{bottom: 114px;left: 88px;width: 56px; }
/**/
.icon1-section{color: #fff; background: #111d28; padding: 145px 0 130px; position: relative; overflow:hidden;}
.icon1-section .container{position: relative; z-index: 1;}
.icon1-section h2{ font-size: 50px; z-index: 2; position: relative; }
.text-bold{font-family: 'db_helvethaica_x75_bd'!important;}
.list-3-item li{float: left; width: 33.33333%; z-index: 1; position: relative;}
.list-3-item figure{margin-bottom: 20px;}
.list-3-item h3{margin-bottom: 20px; padding-bottom: 20px; position: relative; font-size: 25px;}
.list-3-item h3:before{position: absolute; content: "";  width: 25px; height: 2px; background: #70777d;
bottom: 0; left: 50%; margin-left: -12.5px;
}
.bg-line-icon{position: absolute; top: 0; right: 0; z-index: 0;}


/**/
.icon2-section{padding: 115px 0; color: #fff; background: #070101; position: relative; overflow: hidden;}
.icon2-section .container{position: relative; z-index: 1;}
.icon2-section li{display: inline-block; vertical-align: top; width: 20%; margin-bottom: 15px;}
.icon2-section h3{font-size: 25px; margin-bottom: 5px;}
.bg-section-icon{width: 100%; height: 1000px; top: 50%; margin-top: -500px; right: 0; background: 
  url(../images/bg-section-icon.jpg) right no-repeat;
position: absolute; z-index: 0;}
.blend-light{mix-blend-mode: soft-light; }

/*compareJuice*/
.compareJuice {background: #f7f7f2; overflow: hidden; position: relative;}
.compareJuice .coverbanner{float: left; padding: 280px 0 170px;}
.compareJuice .container{position: relative; z-index: 2;}
.wrap-comparejuice{ width: 100%; height: 967px; 
position: absolute; right: 0; top: 0px; z-index: 1;  padding-top: 530px; padding-right: 7%; }

.bg-comparejuice{position: absolute; right: 0; top: -220px;}
.conmparejuice-detail{float: right; width: 100%; max-width: 700px;}
.conmparejuice-detail>div{padding: 0 80px; color: #555655; border-left: 1px solid #d9d9d9;}
.conmparejuice-detail h3{font-size: 21px;  font-family: 'db_helvethaica_x55_regular';
margin-bottom: 30px;}
.conmparejuice-detail .text-bold{font-size: 30px;}
.conmparejuice-detail li{margin-bottom: 15px; padding-left: 5px;}
.conmparejuice-detail i{font-size: 18px; margin-right: 8px;}
.compare-toshiba h3{color: #df1f27;}
.compare-toshiba i{color: #39b54a;}

/*fast*/
.fastPower{background: #04090e; position: relative; overflow: hidden;}
.fastPower .container{position: relative; z-index: 3;}
.fastPower .coverbanner h2,
.fastPower .coverbanner p{color: #fff;}
.fastPower .coverbanner{padding: 185px 0 270px; width: 50%;}
.fastpicture{position: absolute; left: 0; top: -110px; z-index: 2;}
.bg-smoke{background: url(../images/bg-smoke.jpg) repeat-x; animation: backgroundScroll 100s linear infinite; 
  width: 100%; height: 500px; 
position: absolute; z-index: 1; top: 10%; opacity: 0.8; }

@keyframes backgroundScroll {
    0%   {background-position: 0 0; transform: scale(1);}
    100%  {background-position: 100% 10%;}
}
.gradient-white{
   background: rgba(255,255,255,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(52%, rgba(253,253,253,1)), color-stop(100%, rgba(226,228,229,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(253,253,253,1) 52%, rgba(226,228,229,1) 100%);
}
/*offsenter*/
.offsenter{ padding: 155px 0 125px;}
.offsenter .coverbanner{text-align: center; float: none; width: 100%; padding-top: 0;}
.offsenter figure{padding-left: 300px;}
.offsenter figure img{width: 100%; max-width: 200px;}

.offsenter .text-left{color: #231f20;}
.offsenter .text-left .text-bold-h{font-size: 40px; font-family: 'db_helvethaica_x75_bd'!important;
margin-bottom: 40px;}
.offsenter .text-left span{display: inline;}
.offsenter .text-2row{margin-top: 180px;}
.offsenter .blade{position: absolute;top: 30px; left: 10%; }
.wrap-circle{background: #fff; border-radius: 100%; overflow: hidden;
-webkit-box-shadow: 2px 3px 14px 0px rgba(0,0,0,0.32); -moz-box-shadow: 2px 3px 14px 0px rgba(0,0,0,0.2);
box-shadow: 2px 3px 14px 0px rgba(0,0,0,0.2); padding: 30px;}

.text-blade{position: absolute; color: #231f20;} 
.text-blade h4{font-family: 'db_helvethaica_x75_bd'; font-size: 23px; }
.text-blade.blade-blue{right:-55%; top: 8%;} 
.text-blade.blade-blue h4{color: #17457a;}
.text-blade.blade-green{right:-55%; top: 65%; } 
.text-blade.blade-green h4{color: #1db251;}
.text-blade.blade-red{left:-70%; top: 55%; text-align: right; } 
.text-blade.blade-red h4{color: #df1f27;}

.line-blade{
  width: 75%;
  border-bottom: 3px dotted #17447a;
  left: -80%;
  position: absolute;
  top: 10px;
}
.parent{
    width:18px;
    height:18px;
    background:#17447a;
    border-radius:100%;
    position:absolute;
    left: -25px;
    top: -10px;
  }

  @keyframes breathe2{
    0%{transform:scale(1)}
    50%{transform:scale(1.2)}
    100%{transform:scale(1)}
  }
  .parent:before{
    content:"";
    position:absolute;
    top: -6px;
    left: -6px;
    z-index: 2;
    width: 30px;
    height: 30px;
    background:#17447a;
    opacity:0.3;
    border-radius:100%;
    animation:breathe2 2s infinite;
  }
/*blade-red*/
.blade-red .line-blade{
  border-color:#f52727;
   width: 55%;
  right: -60%; left: auto;}

.blade-red .parent,.blade-red .parent:before{
background:#f52727;}
.blade-red .parent:before{animation:breathe2 2.1s infinite;}
.blade-red .parent{right: -25px; left: auto;}
/*blade-green*/
.blade-green .line-blade{
  border-color:#00b651; width: 65%; left: -70%;}
.blade-green .parent,.blade-green .parent:before{
background:#00b651;}
.blade-green .parent:before{animation:breathe2 2.2s infinite;}
/*offsenter2*/
.offsenter2{
  background: rgba(231,233,233,1);
background: -moz-linear-gradient(45deg, rgba(231,233,233,1) 0%, rgba(231,233,233,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(231,233,233,1)), color-stop(100%, rgba(231,233,233,1)));
background: -webkit-linear-gradient(45deg, rgba(231,233,233,1) 0%, rgba(231,233,233,1) 100%);
background: -o-linear-gradient(45deg, rgba(231,233,233,1) 0%, rgba(231,233,233,1) 100%);
background: -ms-linear-gradient(45deg, rgba(231,233,233,1) 0%, rgba(231,233,233,1) 100%);
background: linear-gradient(45deg, rgba(231,233,233,1) 0%, rgba(231,233,233,1) 100%);
}
.offsenter2 .coverbanner{width: 100%; float: none; padding-top: 135px;}
.offsenter2 span{display: inline;}
.offcenter-2-img{padding-top: 145px; position: relative;}
.order-first{    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
}
.float-md-right{float: right;}


.service-sec{background: #111d28; position: relative; overflow: hidden;}
.service-sec .container{position: relative; z-index: 3;}
.service-sec .coverbanner h2,
.service-sec .coverbanner p,.service-sec ul{color: #fff;}
.service-sec .coverbanner{padding: 185px 0 180px; width: 60%; float: left;}
.service-sec ul{margin-top: 60px;}
.service-sec li{ margin-bottom: 35px; position: relative; padding-left: 30px; line-height: 25px}
.service-sec li i{position: absolute; left: 0;top: 2px;}
.service-sec .fa-check-circle{font-size: 20px; margin-right: 10px;}
.btn-line{display: inline-block; border: 1px solid #fff; color: #fff;
padding: 15px 0 15px; width: 265px; margin-top: 205px; text-align: center; }
.btn-line:hover,.btn-line:focus{color: #fff;}
.pic-service{position: absolute; right: 100px; bottom: -44px;}
.orange-service{position: absolute; right: 0; bottom: -154px;}

.best-offer{padding: 135px 0 165px;}
.best-offer .coverbanner{text-align: center;
float: none;
width: 100%;
padding-top: 0; margin-bottom: 100px;}

.table-service{width: 100%;  font-size: 20px; color: #231f20; border-collapse: collapse;}
.table-service th{text-align: center;}
.table-service thead th{padding-bottom: 25px;}
.hidecol{display: none;}
.table-service td{height: 60px; border: 1px solid #bbb; width: 25%; text-align: center;}
.table-service .thead-inner td{text-align: center; background: #000;color: #fff; 
font-family: 'db_helvethaica_x55_regular'; }
.table-service td.thead-active{background: #2f2f2f;}
.tr-active{background: #f7f7f7;}
.table-service .yellow{color: #b28d2e;}
.table-service .green{color: #01a64f;}
.numh{font-family: 'db_helvethaica_x75_bd'; font-size: 22px;}
.table-service h4{color: #231f20; font-family: 'db_helvethaica_x75_bd'; font-size: 24px;}
.table-service h4.red{color: #df1f27; font-size: 30px;}
/*teaste*/
.taste{background: #d2dde7; padding: 185px 0 250px;}
.taste .coverbanner{text-align: center;
float: none;
width: 100%;
padding-top: 0;}
.taste-picture{width: 100%; max-width: 266px; margin: 180px auto 0; position: relative;}
.taste span{display: inline;}
.taste .parent:before{
    display: none;
  }
.taste .text-blade{text-align: center;}
.taste .line-blade{top: 35%; border-style:dashed; border-width: 1px;}
.taste .blade-red .parent{right: auto; left: -5px; }
.taste .blade-red .line-blade{right: -50%;}
.taste .text-blade.blade-red{left: -145%;}
.taste .text-blade h4{margin-top: 20px; color: #9d1d20;}
.taste .text-blade.blade-red.right{left: auto; right: -124%; top: 28%;}
.taste .blade-red.right .line-blade{left: -53%; right: auto; }
.taste .blade-red.right .parent{ left: auto; right: -5px; }
/*transform*/
.transform{padding: 185px 0 160px; background: #f5f5f5;}
.transform .coverbanner{text-align: center;
float: none;
width: 100%;
padding-top: 0;}
.picturelast{ margin: 60px 0 70px; }
.btn-ordernow{color: #fff; font-size: 30px; max-width: 380px; width: 100%; padding: 30px 0 30px;
background: #39b54a; font-family: 'db_helvethaica_x75_bd'; }
.btn-ordernow:hover,.btn-ordernow:focus{color: #fff;}