@charset "utf-8";
/* CSS Document */
body{ background:#fff; margin:0px; padding:0px; margin:auto; font-family:'Open Sans', sans-serif; }
h1, h2, h3, h4, h5, h6, p, ul, span{ margin:0px; padding:0px;}


header, footer, article, aside, figure, nav, section{ display:block;}   
li{ list-style:none;}
a{ text-decoration:none; color:#2980b9; font-size:14px;}
p{ color:#353535; font-size:15px;}
h2{font-family:'Roboto', sans-serif; color:#000216; font-size:32px; font-weight:300; padding-bottom:12px;}
h3{font-family:'Roboto', sans-serif; color:#000216; font-size:24px; font-weight:400;}
h4{font-family:'Roboto', sans-serif; color:#000; font-size:18px; font-weight:normal;}
h5{font-family:'Roboto', sans-serif; color:#000; font-size:15px; font-weight:normal;}
h6{font-family:'Roboto', sans-serif; color:#000; font-size:15px; font-weight:normal;}
img{ border:none; vertical-align:bottom;}
input{border:1px solid #dbdbdb; outline:none; border-radius:2px;}
input:focus{ border:1px solid #3498db}
button{ background:#e74b43; border:none; color:#fff; font-size:15px; padding:0 15px; border-radius:3px; cursor:pointer; outline:none; -webkit-appearance:none; height:40px; line-height:40px;}
button:hover{ background:#fc5047;}
.clr{ clear:both;}

.animatedParent{ overflow:hidden;}

table{ width:100%; color:#000; font-size:14px; border-collapse:collapse; font-size:13px;}
input[type="radio"] {padding:0px; width:inherit; border:none; height:15px;}

textarea{ border:0; font-family:'Open Sans', sans-serif;}
.mrg-lt-10{ margin-left:10px;}

.pd-5{ padding-top:5px;}
.pd-10{ padding-top:10px;}
.pd-15{ padding-top:15px;}
.pd-20{ padding-top:20px;}
.pd-30{ padding-top:30px;}

.mrg-bottom{ margin-bottom:0 !important;}

/* -----header --- */
.hdr-wrapper{ background:#fff; box-shadow:0 1px 2px #b3b3b3; border-top:3px solid #bd081d; position:fixed; z-index:999; width:100%;}
.call-us{ position:absolute; top:-3px; right:0; width:195px; height:34px; background:url(../images/red-bg.png) 0 0 no-repeat;}
.call-us span{ width:110px; margin:auto; background:url(../images/phone-i.png) 0 8px no-repeat; color:#fff; font-size:14px; padding-left:20px; line-height:34px; text-align:center; display:block;}

header{ max-width:1280px; margin:auto; position:relative; padding:12px 0; text-align:center;}
header h1{ float:left;}
header aside{ float:right; padding-top:33px; padding-right:30px;}
header aside a{ color:#fff; height:26px; line-height:25px; font-size:13px; display:block; float:left; border-radius:2px;}

.signup-bt{ background:#3498db; padding:0 10px; margin-right:15px; border:1px solid #3498db;}
.hdr-ads{ margin:auto; max-width:500px; display:inline-block;}


/* -----header End--- */

.btn-link { float:right; font-size:15px;}
.btn-link a{ text-decoration:underline; font-size:15px;}
.btn-link a:hover{ text-decoration:none;}

.mrq{ padding-left:155px;}
.mrq p{ color:#fff; position:relative; padding-left:55px; float:left;}
.new-i{ position:absolute; top:-8px; right:-30px; z-index:99;}

/* ----container-page -----*/
.container-page{ margin:auto; padding-top:89px;}

.top-inner{ background:#080808;}
.search-row{ max-width:1280px; margin:auto;}
.search-row aside{ float:left; width:55%; padding-top:13px;}
.search-row aside h3{ color:#fff; font-size:18px; padding:0 12px; float:left; position:relative;}
.search-row aside h3:after {left:100%; top:50%; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none;}

.search-row aside h3:after {border-color:rgba(136, 183, 213, 0); border-left-color:#f3f2f0;	border-width:7px; margin-top:-6px;}


.search-box{ float:right; width:350px; margin:8px 20px 8px 0; }
.search-input{background:#f7f7f7; height:35px;  border-radius:3px; padding:0 10px; position:relative; padding-right:50px;}
.search-box input{ width:100%; height:33px; border:0; background:#f7f7f7; color:#333; font-size:14px;}
.go-btn{ position:absolute; top:0; right:-1px; background:url(../images/search-i.png) center center no-repeat #e74b43; border:none; color:#fff; font-size:15px; padding:0 20px; border-radius:0 4px 4px 0; cursor:pointer; height:35px; line-height:35px; font-size:18px; float:right;}
.go-btn:hover{ background:url(../images/search-i.png) center center no-repeat #fc5047;}

/* mn slider */
.big-slider{}
.big-slider{ width:100%;}

@keyframes jssorl-oval {
 from {transform:rotate(0deg);}
 to {transform:rotate(360deg);}
 }
.jssora22l, .jssora22r {display:block; position:absolute; width:42px; height:70px; cursor:pointer; background:url(../images/a22.png) center center no-repeat; overflow:hidden;}
.jssora22l { background-position:-6px -4px; }
.jssora22r { background-position:-70px -4px; }
/*.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }*/


/*---- categories-section ---*/
.categories-section{ max-width:1280px; margin:auto; padding:30px 0;}
.categories-section h2{ margin-bottom:10px;}
/*.categories-section h2 span{ padding-top:20px;}*/
.categories-section li{ float:left; width:15%; box-shadow:0 0px 2px #b2b2b2; margin-right:1.9%; text-align:center; border-radius:4px; overflow:hidden; }
.categories-section li span{ padding:30px 0; display:block; text-align:center;}
.categories-section li:hover .categori-item{}
.categories-section li:last-child{ margin-right:0;}
.categori-item{ background:#f2f4f8; text-align:center; height:45px; position:relative; }
.categori-item a{ display:block; line-height:45px; color:#3a3a3a; font-size:16px; font-weight:400; box-sizing: border-box; -webkit-transition:0.5s ease-in-out;
    transition:0.5s ease-in-out;}

.categories-section li:hover .categori-item a { background:#3498db; color:#fff;}




/* ----cart-section---- */
.cart-section{ background:#f2f4f8; padding:40px 0;}
.cart-section h2{max-width:1280px; margin:auto;}

/* --- video-section ---- */
.video-section{ padding:40px 0; background:#2f3d51;}
.vd-row{ max-width:1280px; margin:auto;}
.vd-row h2{ color:#fff;}
.vd-image{ position:relative; border-radius:8px 8px 0 0; overflow:hidden; position:relative;}
.vd-image img{width:100%; }
.vd-bg{ background:url(../images/video-i.png) center center no-repeat #e5e5e5; opacity:0.5; filter:alpha(opacity=50); position:absolute; top:0; z-index:99; height:100%; width:100%; border-radius:8px 8px 0 0;}
.vd-info{ text-align:left; padding:10px 12px; background:#fff; border-radius:0 0 8px 8px;}
.vd-info h4{ color:#000;}
.vd-info p{ font-weight:normal; padding-top:5px; font-size:13px;}

/* --- video-section End ---- */

.newsletter-row{ max-width:1280px; margin:auto; padding:40px 0;}
.newsletter-row h3{ text-align:center; font-weight:300;}
.newsletter-col{ max-width:750px; margin:auto; background:#f2f4f8; padding:10px; margin-top:20px; border-radius:4px; box-shadow:0 1px 2px #ccc;}
.newsletter-tx{ float:left; padding-top:10px; font-size:18px;}

.newsletter-search{ margin-left:10px; float:left; width:468px; margin-bottom:0; height:42px; line-height:40px; background:#fff; padding:0 10px; border:1px solid #dbdbdb; border-radius:3px;}
.newsletter-search input{ width:100%; border:0;}
.newsletter-bt{ float:left; background:#e74b43; border:none; color:#fff; font-size:15px; padding:0 15px; border-radius:4px; cursor:pointer; height:43px; line-height:43px; font-size:18px;}
.newsletter-bt:hover{ background:#fc5047;}

/* --- login ---- */

.detail-popup-box{background: url(../images/popup-bg.png);position:fixed;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;display:none;}
.login-section{ position:relative; max-width:550px; margin:auto; margin-top:60px; padding:0 30px;}
.login-section aside{ background:#f4f4f4; padding:60px 30px 40px 30px; margin-top:-50px; border-radius:6px;}

.login-section aside h3{ text-align:center;}
#close-login{ position:absolute; right:24px; top:56px}
#close-signup{ position:absolute; right:24px; top:56px}
#close-detail{ position:absolute; right:24px; top:6px}

.dtl-popup aside{ padding:20px 30px 40px 30px;  border-radius:6px;}

.login-fild{ padding-top:15px; font-size:14px;}
.login-fild input{ border:0; width:100%; height:40px;}

.close-bt{ background:none; background:url(../images/close.png) 5px 3px no-repeat; height:30px;}
.close-bt:hover{ background:url(../images/close.png) 5px 3px no-repeat;}

.email-bg{ background:url(../images/socal-sprite.png) 10px 11px no-repeat #fff;}
.password-bg{ background:url(../images/socal-sprite.png) 10px -31px no-repeat #fff;}
.name-bg { background:url(../images/socal-sprite.png) 10px -72px no-repeat #fff;}
.phone-bg { background:url(../images/socal-sprite.png) 10px -113px no-repeat #fff;}

.log-bt{width:100%; margin-top:15px; font-size:16px; font-weight:500;}

#div_id_remember{ padding-top: 15px;}
#div_id_remember input { float:left; width:14px; height:18px; margin-top:-1px;}
.forgot-pass{ float:right;}
.forgot-pass a:hover{ text-decoration:underline;}
/* --- login End ---- */


.bg-bdr { border:1px solid #dbdbdb; margin-bottom:10px; border-radius:3px; padding:0 10px 0 35px;}
.bg-bdr:hover { border:1px solid #2980b9;}



.cart-zoom-pic{ float:left; width:50%; border-radius:6px; overflow:hidden;}
.cart-zoom-pic img{width:100%;}
.cart-zoom-right{float:right; padding:0 30px; width:50%; box-sizing:border-box; }
.cart-zoom-right h3{ padding-bottom:10px;}
.cart-zoom-right p{ padding-bottom:15px;}

ul.social-icon{ padding-top:10px;}
ul.social-icon li{ float:left; background:grey; width:16px; color:#fff; padding:9px; cursor:pointer; padding-left:10px; border-radius:50%; display:inline-block;
    margin-right:0px; margin-right:6px; height:16px; line-height:16px;}
ul.social-icon li a i.fa-facebook{margin-left: 2px;}
ul.social-icon li.fb:hover{background:#3b5998;}	
ul.social-icon li.tw:hover{background:#00aeeb;}	
ul.social-icon li.gp:hover{background:#da4a34;}	
ul.social-icon li.pin:hover{background:#c1404a;}
ul.social-icon li a{ color:#fff;}
	
ul.social-icon li i{font-size:19px !important;}	
ul.social-icon li i.fa-pinterest{  background:url(../images/pintrest-i.png) 0 0px no-repeat; font-size:0 !important; width:20px; height:20px; display:block; }

.btn-big{ float:left; background:#e74b43; color:#fff; padding:0 15px; border-radius:3px; cursor:pointer; height:43px; line-height:43px; font-size:18px;}
.btn-big:hover{ background:#fc5047;}

.video-popup{ width:100%;}
.video-popup iframe{ width:100%; border:0;}


/* inner Page */

.search-row-inner{ max-width:1280px; margin:auto; padding:8px 0; position:relative;}
.inner-search{ float:right; width:35%; padding-right:30px;}
.search-input input{ width:100%; line-height:33px; border:0; background:none;}

.menu-icon{ float:left; padding:8px 30px 0 0; position:relative;}
.menu-icon a{  background:#f2f4f8; padding:3px 12px; border-radius:3px; color:#000; font-size:21px; line-height: 0;}
.menu-icon a:hover{ background:#fc5047; color:#fff;}

.nav-col{ padding-bottom:15px; position:absolute; z-index:99; background:#fff; border-radius:4px; top:53px; left:0; width:70%; display:none; box-shadow: 0px 1px 5px #9e9e9e;}
.nav-col:after {bottom:100%; left:46px; border:solid transparent; content:""; height:0; width:0; position:absolute; pointer-events:none;}
.nav-col:after {border-color:rgba(136, 183, 213, 0); border-bottom-color:#fff; border-width:8px; margin-left:-32px;}

.categories-list{ padding-bottom:10px; float:left; width:180px; padding:15px 0 0 15px;}
.categories-list h5{ font-size:16px;}
.categories-list h5 a { font-size:16px;color:#3a3a3a;}
.categories-list h5 a:hover { font-size:16px;color:#3a3a3a;text-decoration:underline;}
.categories-list ul{ padding-top:5px;}
.categories-list li{ background:url(../images/5.gif) 0 7px no-repeat; padding-left:15px; margin-bottom:3px;}
.categories-list li a{ font-size:13px; color:#3a3a3a;}
.categories-list li a:hover{ text-decoration:underline; color:#2980b9;}

.common-section{ max-width:1280px; margin:auto; padding:40px 0;}
.common-section h2{ font-weight:400;}
.common-section h3{ padding:10px 0;}
.common-section p{ padding-bottom:15px; line-height:26px;}
.common-section ul{ padding-bottom:10px;}
.common-section li{background:url(../images/7.gif) 0 9px no-repeat; padding-left:18px; margin-bottom:10px; line-height:26px; font-size:15px;}
.banner-inner img{ width:100%;}

.left-dtl{ float:left; width:40%; padding-top:20px;}
.left-dtl span { font-size:14px; color:#333; display:block; padding:0 0 5px 22px; margin-bottom:10px;}
.location{ background:url(../images/location.jpg) no-repeat; }
.phone-number{background:url(../images/mobile-i.jpg) no-repeat;}
.skype-id{background:url(../images/skype-i.jpg) 0 2px no-repeat; margin-top:12px;}
.left-dtl h3{ font-size:24px; font-weight:300; padding:20px 0 10px 0;}
.map-col img{ width:100%;}


.right-detail{ float:right; width:55%; }
.right-detail h3{ font-size:24px; font-weight:300; padding-bottom:10px;}

.form-col{ padding:0 20px 15px 20px; background:#f6f6f6; border:1px solid #e8e8e8; border-radius:6px;}
.form-col p{ padding:15px 0; font-size:16px; line-height:26px;}

.fild-country{ background:url(../images/country.jpg) 8px 12px no-repeat #fff;}
.fild-skype{ background:url(../images/skype-i.jpg) 10px 12px no-repeat #fff;}
.fild-company{ background:url(../images/office-i.jpg) 10px 11px no-repeat #fff;}
.fild-mgs{ background:url(../images/socal-sprite.png) 10px -198px no-repeat #fff;}
.fild-mgs textarea{width:98%; border:0px; resize:none; height:40px; font-family:Arial; padding:8px 1%;}


.gallary-section{max-width:1280px; margin:auto; padding:40px 0;}
.photo-gallery{ width:48%; float:left; padding-bottom:10px;}
.video-gallery{ width:48%; float:right; overflow:hidden; padding-bottom:10px;}
.detail{ padding-top:30px;}
.detail ul{ padding:10px 0;}
.detail p{ line-height:28px; padding-bottom:20px;}
.detail li{background:url(../images/6.gif) 0 9px no-repeat; padding-left:20px; margin-bottom:10px; line-height:26px; font-size:15px;}

.dtl-contact{ max-width:1280px; margin:auto; background:#f2f4f8; border-radius:6px; box-shadow:0 1px 4px #bababa;}
.add-info{ float:left; width:48%;}
.add-info p{ padding:10px 0; line-height:24px;}
.add-map{ float:right; width:48%;}
.add-map iframe{ width:100%  !important;height:200px !important;}

.pd-col{ padding:20px;}
.rt-none{ float:inherit !important;}


.service-section{ padding:50px 30px;}
.service-section aside{ float:left; width:37%; border-radius:6px; overflow:hidden; box-shadow:0 2px 2px #ccc;}
.service-section aside img { width:100%;}
.service-section article{ float:right; width:60%}

.bg-color{ background:#f3f3f3;}
.bg-color aside{ float:right !important;}
.bg-color article{ float:left !important;}

.service-section article p{ padding:10px 0; line-height:24px;}
.service-section article ul{ padding-top:10px;}
.service-section article li{background:url(../images/7.gif) 0 6px no-repeat; padding-left:18px; margin-bottom:10px; font-size:15px;}


.feedback-detail{ max-width:700px; margin:auto;}



/*---- footer ---*/

footer{ background:#f2f4f8; border-top:1px solid #e0e2e6;}
.ftr-row{ max-width:1280px; margin:auto; padding:30px 0;}
.footer-ads-lt{ width:50%; float:left;}
.footer-ads-lt img{ width:100%;}

.ftr-ads-rt{ float:right;}
.ftr-ads-rt span{ border:1px solid #dfdfdf; border-radius:4px; float:left; margin-left:8px; overflow:hidden;}
.footer-inner-row{ padding-top:20px;}
.menu-ftr{ float:left; color:#bababa;}
.menu-ftr a{ color:#4d4d4d; font-size:12px; padding:0 10px;}
.menu-ftr a:hover{ text-decoration:underline;}
ul.follow-ftr{ float:right;}
ul.follow-ftr li{ float:left; margin-right:20px; font-size:18px; color:#5e5e5e;}
ul.follow-ftr li a i{ color:#545454; font-size:20px;}
ul.follow-ftr li a i.fa-facebook:hover{ color:#3b5998;}
ul.follow-ftr li a i.fa-twitter:hover{ color:#00aeeb;}
ul.follow-ftr li a i.fa-linkedin:hover{ color:#3b5998;}
ul.follow-ftr li a i.fa-youtube-play{ margin-top:3px;}
ul.follow-ftr li a i.fa-youtube-play:hover{ color:#da4a34;}

footer p{ color:#fff; padding-top:10px; font-size:14px; text-align:center; background:#78797b; padding:10px 0;}

/*---- footer End ---*/





/*--------------------  @media screen ----------------------*/


@media screen and (max-width:1000px){
header{ padding:12px 30px;}	
header h1{ width:200px;}
header h1 img{ width:100%;}	
header aside{ padding-right:0;}
.hdr-ads{width:360px; margin-top:10px;}
.hdr-ads img{ width:100%;}
.search-row{ padding:0 30px;}
.search-box{ margin-right:0;}

.categories-section{ padding:30px;}
.video-section{ padding:30px;}
.newsletter-row{ padding:30px;}
.search-row-inner{ padding:8px 30px;}
.menu-icon{ padding-right:0;}
.inner-search{ padding-right:0;}

.common-section{ padding:30px;}
.gallary-section{padding:30px;}

.nav-col{ width:90%; margin-left:30px;}

}


@media screen and (max-width:900px){
.search-box{width:300px;}
.categories-section li{width:31%; margin-right:3%; margin-bottom:30px;}
.categories-section li:nth-child(3n+3){ margin-right:0;}	

.newsletter-col{ max-width:480px;}
.newsletter-tx{float:inherit; display:block; padding-bottom:10px;}
.newsletter-search{ margin-left:0; width: 360px;}
.cart-section h2{ padding:0 30px 20px 30px;}
.ftr-row{ padding:30px;}
.footer-ads-lt{ width:100%;}
.ftr-ads-rt{float:inherit;}
.ftr-ads-rt span{margin-top:20px;}
.menu-ftr{ float:inherit;}
ul.follow-ftr {float:inherit; margin-top:15px;}
.ftr-ads-rt span:first-child{ margin-left:0;}
ul.follow-ftr li{ font-size:16px; padding-left:10px; margin-right:10px;}

.left-dtl {float:inherit; width:inherit; margin-bottom:30px;}
.right-detail { float:inherit; width:inherit;}

.add-info{ float:inherit; width:inherit; margin-bottom:80px;}
.add-map{ float:inherit; width:inherit;}

.photo-gallery{ width: inherit; float:inherit; margin-bottom:30px;}
.video-gallery{ width: inherit; float:inherit;}
}

@media screen and (max-width:800px){
.prodct-list li {width:31% !important;}	
	
	
.hdr-ads{margin:inherit; display:inherit; clear:both; padding-top:10px; float:left;}
header h1 {line-height:0;}	
header aside{padding-top:10px;}
.container-page{padding-top: 110px;}
}

@media screen and (max-width:768px){

.search-row aside{ width:100%; margin-bottom:10px;}	
.search-box{float:inherit; clear:both; width:100%; margin-bottom:0px;}
.search-row aside h3{ padding-left:0;}
.search-row{padding-bottom:10px !important;}
.inner-search{width:80%;}

.service-section aside{ float:inherit !important; width:inherit; margin-bottom:20px;}
.service-section article{ float:inherit; width:inherit;}

}

@media screen and (max-width:600px){
.prodct-list li {width:47% !important;}	
.hdr-ads{width:260px; margin-top:10px; padding-top:0;}	
header h1 {width:150px;}
header{padding:10px 30px;}
.container-page {padding-top:87px;}

.categories-section li{width:47%; margin-right:5%;}
.categories-section li:nth-child(2n+2){ margin-right:0;}
.categories-section li:nth-child(3n+3){ margin-right:5%;}
.categories-section li:last-child{ margin-right:0;}

.newsletter-col{ max-width:380px;}
.newsletter-search{ margin-left:0; width:260px;}

.cart-zoom-pic{ float:inherit; width:100%;}
.cart-zoom-right{float:inherit; width:100%; padding:0; padding-top:20px;}

.nav-col{ width:83%;}
}

@media screen and (max-width:480px){
.prodct-list li {width:100% !important;}	
.nav-col{ width:90%; margin-left:5% !important;}
.hdr-wrapper{ position:inherit;}
.container-page{padding-top:0;}	
	
.hdr-ads{width:100%;}	
header aside{ float:left;}

.categories-section li{width:100%; margin-right:0;}

.newsletter-search{ margin-left:0; width:250px;}
.newsletter-bt{ margin-left:0; margin-top:10px;}

header{ padding:10px 20px;}
.common-section{ padding:30px 20px;}
.gallary-section{padding:30px 20px;}

.search-row{ padding:0 20px;}
.categories-section{ padding:30px 20px;}
.video-section{ padding:30px 20px;}
.newsletter-row{ padding:30px 20px;}
.search-row-inner{ padding:8px 20px;}
.ftr-row{padding:30px 20px;}

}


/* Validator */

label.error {color:#ff0000 !important;position:absolute;top:40px; left:0;}
.bg-bdr  {position:relative;margin-bottom:15px;}

.success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
	padding: 15px;
}

.success a {
    color: #2b542c;
}
.credit {font-size: 13px;padding-top:5px; margin-top:5px; border-top:1px solid #ddd;
    color: #707070;}
.credit span{ color: #000216;}

.loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid #bd081d;
  border-bottom: 10px solid #bd081d;
  width:30px;
  height:30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  margin:auto;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.grid {display:none;min-height:300px;}

ul.tab{ margin:0px; padding:0px; list-style:none;}
ul.tab li{ text-align:center; margin-right:10px; float:left;}
ul.tab li a{ background:#fff; text-decoration:none; padding:7px 15px; display:block; color:#444;border:1px solid #ccc; border-bottom:0;font-size:15px;cursor:pointer; border-top-left-radius:5px; border-top-right-radius:5px;}
ul.tab li a:hover, ul.tab li a.current{ background:#bd081d; text-decoration:none;color:#fff;}

.shwContent{ max-width:700px; background:#fff; border:1px solid #ccc; display:block; padding:10px; clear:both;}.shwContent img {width:100%;}
.hideContent{ width:500px; background:#eaeaea; border:1px solid #000000; display:none; padding:10px; clear:both;}.cd-top {  display: inline-block;  height: 40px;  width: 40px;  position: fixed;  bottom: 10px;  right: 10px;  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);  /* image replacement properties */  overflow: hidden;  text-indent: 100%;  white-space: nowrap;  background: rgba(232, 98, 86, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%;  visibility: hidden;  opacity: 0;  -webkit-transition: opacity .3s 0s, visibility 0s .3s;  -moz-transition: opacity .3s 0s, visibility 0s .3s;  transition: opacity .3s 0s, visibility 0s .3s;  border-radius:50%;  overflow:hidden;}.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {  -webkit-transition: opacity .3s 0s, visibility 0s 0s;  -moz-transition: opacity .3s 0s, visibility 0s 0s;  transition: opacity .3s 0s, visibility 0s 0s;}.cd-top.cd-is-visible {  /* the button becomes visible */  visibility: visible;  opacity: 1;}.cd-top.cd-fade-out {  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */  opacity: .8;}.no-touch .cd-top:hover {  background-color: #e86256;  opacity: 1;}@media only screen and (min-width: 768px) {  .cd-top {    right: 10px;    bottom: 10px;  }}@media only screen and (min-width: 1024px) {  .cd-top {    height: 60px;    width: 60px;    right: 10px;    bottom: 10px;  }}






.prodct-list{ max-width:1280px; margin:auto;}
.prodct-list ul{ background:#fff; padding:30px; border-radius:8px; box-shadow:0 0px 6px #acacac;}
.prodct-list li{ position:relative; float:left; width:23.5%; box-shadow:0 0px 2px #b2b2b2; margin-right:1.9%; text-align:center; border-radius:4px; margin-bottom:30px;}
.prodct-list li span{ padding:30px 0; display:block; text-align:center;}
.prodct-list li:nth-child(4n+4){ margin-right:0;}

.categori-item{ background:#f2f4f8; text-align:center; height:45px; position:relative; }
.categori-item a{ display:block; line-height:45px; color:#3a3a3a; font-size:16px; font-weight:400; box-sizing:border-box; -webkit-transition:0.5s ease-in-out;
    transition:0.5s ease-in-out;}

.prodct-list li:hover .categori-item a { background:#3498db; color:#fff;}
.product-item{ display:none;}
.prodct-list li:hover .product-item{ display:block; position:absolute; width:100%; top:170px; background:#3498db; z-index:99; overflow:hidden;}

.product-item:after {bottom:100%; left:50%; border:solid transparent; content:""; height:0; width:0; position:absolute; pointer-events:none; border-bottom-color:#3498db; border-width:5px; margin-left:-5px;}

.product-item a{ display:block; color:#fff; font-size:14px; padding:8px; border-bottom:1px solid #68b6e9; transform:perspective(1px) translateZ(0);
    box-shadow:0 0 1px transparent; -webkit-transition-duration:0.3s; transition-duration:0.3s; -webkit-transition-property:transform;
    transition-property:transform; box-sizing:border-box; -webkit-transition:0.5s ease-in-out; transition:0.5s ease-in-out;}
.product-item a:hover{-webkit-transform: translateX(8px); transform:translateX(8px); background:#68b6e9;}
.prodct-list li img {max-height:66px;}