/*
Project Name: Charmy Trading
File: Style.css - Main css
Version: 1.0
Date: 04/12/2016

------------------------*/

/* = Default List View Style  
----------------------------------------------------------------------------------------------- */
ul.default, ol.default { color: #aaa; clear: both; padding: 0 0 0 15px; margin: 0 0 15px; font: 400 14px/24px 'Roboto', sans-serif;  }
ol.default { padding: 0 0 0 20px; }
ol.default li{  color: #aaa; }
ol.default li:last-child { margin: 0; }
ol.default li, ul.default li,  ul.arrow li{ margin-bottom: 10px;list-style-position: outside; color: #ffffff;}
ol.default li { list-style-type: decimal; }
ul.default li { list-style-type: disc;}
ul.circle li { list-style-type: circle; }
ul.alpha li { list-style-type: lower-alpha; }
ol.roman { overflow: hidden; }
ol.roman li { list-style-type: lower-roman; }
ol.decimal li { list-style-type: decimal; }
ul.no-bullet li, ol.no-bullet li { list-style: none; }
.no-border  { border: 0 none !important; }
.no-padding { padding: 0 !important; }
.no-margin  { margin: 0 !important; }

.alignC { text-align: center;}

/* = Header  
----------------------------------------------------------------------------------------------- */
#wrap-header { position: relative; }
.top-header { background: #ffffff; }
.top-header, .menu-bg { padding: 0 20px; }
.top-header p { text-align: right; padding: 6px 0px;}
.menu-bg { background: rgba(255,255,255,1); }
.logo {display: block;position: absolute;top: -22px;}
.logo img { width: 210px; }
.main-menu::before { display: none; }
.main-menu { background: transparent; height: auto;} 

.navbar-default .navbar-nav li a { padding: 45px 10px;}
.navbar-default .navbar-nav > li.sp-btn:not(:last-child) { margin-right: 15px;}
.navbar-default .navbar-nav > li.sp-btn > a { background: #d04383; padding: 10px 25px; margin: 35px 0;color: #ffffff;}
.navbar-default .navbar-nav > li.sp-btn > a:hover {  background: #1e1239; }
.menu .navbar-collapse > ul { float: right;}
.select-wrapper::after { top: 0; }
.select-wrapper button { font-size: 13px; }
.search-by .heading h3 { height: auto; }
.heading h3::after { top: -2px; right: -65px; }


.sub-heading { color: #d04383; display: none; }
.search-box { right:0; top: 22px; }

.wd-timezone { text-align: right;}
.wd-timezone p { color:#555555; display: inline-block; vertical-align: middle;  }
.wd-timezone p span { font-weight: 500;}
.wd-timezone p:not(:last-child) {}

.ht-breadcrumb li:last-child, .ht-breadcrumb li:hover {background: #d04383; color: #ffffff; }
.ht-breadcrumb li:last-child::after, .ht-breadcrumb li:hover::after { border-left-color: #d04383; }

.bg-5{
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-position:top center;
	background-size:cover;
}
.bg-5{
	background-image:url('../images/landing.png');
	/*background-color:#111;*/	
}

.landing-logo { display: table; margin: 0 auto; background: rgba(255,255,255,0.9); padding: 25px; border-radius: 20px;}
.landing-logo img { width: 440px; }
.ht-btn-default.landing-btn { font-size: 22px; letter-spacing: 12px; border-radius: 14px; padding: 16px 70px; box-shadow: 3px 3px 0 #fff;}

.landing-menu { display: flex; justify-content: center; margin-top: 30px;  }
.landing-menu-item { margin: 0 30px; }
.landing-menu-item a { position: relative; width: 160px; height: 160px; background: #000000; border-radius: 50%; transition: all 0.25s ease-in-out; }
.landing-menu-item a img { position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 85px; }
.landing-menu-item a, .landing-menu-item span { display: block; }
.landing-menu-item a.phomacys-item img { width: 80px; }
.landing-menu-item a.grocery-item img {width: 70px; }
.search-box:hover .search-txt { width: 240px; }
.landing-menu-item span { text-transform: uppercase; margin-top: 8px; font-size: 16px; }
.landing-menu-item a:hover { background: #d04383; }

.search-1 { margin-bottom: -85px; }
.m-btn { text-align: right; }
.search-option { padding: 15px 15px 0 15px; }
.search-option .ht-btn { width:100%; padding: 5px 20px; }
.counterup { margin-bottom: 10px; }
/* ================================================================================================ */
/* FAQ SECTION
/* ================================================================================================ */
.accordion{font-family:'roboto',sans-serif;margin:0 auto;font-size:14px;border-radius:10px; }
.accordion ul{list-style:none;margin:0;padding:0}
.accordion li{margin:0;padding:0}
.accordion [type=radio], .accordion [type=checkbox] { display:none;}
.accordion label{display:block;font-size:16px;line-height:18px;color:#ffffff;font-weight:400;cursor:pointer;
-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label { background:#d04383; color:#FFF;  }
.accordion .content{padding:0 10px;overflow:hidden;border:1px solid #fff;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out}
.accordion p{color:#333;margin:0 0 10px;padding-top:10px; font-size: 13px; }
.accordion h3{color:#542437;padding:0;margin:10px 0}

/* Vertical */
.vertical ul li { overflow:hidden; margin:0 0 10px; position: relative; }
.vertical ul li label { padding:15px 10px; margin: 0; width: 100%;}
.vertical ul li .content { height:0px; border:0;}
.vertical [type=radio]:checked ~ label ~ .content, .vertical [type=checkbox]:checked ~ label ~ .content { height:auto; background: #ffffff; }

/* Icon */
.vertical ul li label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 2.3em;
  height: 2.3em;
  line-height: 2.3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.vertical ul li input[type=radio] + label::after {content: "+"; font-size: 20px; font-weight: 400; }
.vertical ul li input[type=radio]:checked + label::after {transform: rotate(315deg);}
.txtContent { font:400 14px/18px 'Roboto',sans-serif; margin-bottom: 15px;  }

ul.bank-details li { color: #000000; margin-bottom: 5px; }
ul.bank-details li:last-child { margin: 0; }
ul.bank-details li span { display: inline-block; color: #000000; width: 30%; }
ul.bank-details li img { display: inline-block; vertical-align: middle; margin-left: 15px; width: 60px; margin-bottom: 5px; }
.bank-title {color: #d04383; }

.bank-info-container { background: #fff; padding: 5px 20px 20px 20px; }
.product-grid-2 .product-caption .product-name a { text-transform: uppercase ; font-weight: 400;}
.product-grid-2 .product-caption .product-name a:hover {color: #aaaaaa; }

.search-by { background: #170e2a; }
.search-by-one { border-bottom: 1px solid #555555; padding-bottom: 10px; }
.futures .heading-1 { margin-bottom: 10px; border-bottom: 1px solid #555555; }
.search-by .heading-1 { border: 0; margin: 0 0 10px 0; padding: 0; }
.search-by .heading-1 h3 { padding: 0; font-weight: 700; font-size: 14px; border: 0; }
.futures .heading-1 h3 { padding-top: 0; }
.search-by ul li:not(:last-child) {  }
.search-by ul li a { width: 215px; padding: 0; border: 0; margin: 0 auto; text-align: center; border-left-style: none; font-size: 13px; font-weight: 400; }
.search-by .collapse.in {  display: -webkit-box;display: -moz-box;display: -ms-flexbox; display: -moz-flex;display: -webkit-flex;display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.category ul li a:hover { background: none; text-decoration: underline; text-decoration-thickness: 2px;
text-decoration-color: #d11717; }
 
ul.short-stocklist { display: block; overflow: hidden; margin-bottom: 20px; margin-top: 5px;}
ul.short-stocklist li { float: left; margin-right: 25px; font-size: 16px;}
ul.short-stocklist li:last-child { margin: 0;}
ul.short-stocklist li span { display: block;}
ul.short-stocklist li i.status { font-style: normal; font-size: 16px; font-weight: 500; }
.static-caption { clear: both; overflow: hidden;}



.product_para-container { display: block; overflow: hidden; }
.product_para-1 li{padding: 8px 15px; display: block; overflow: hidden; }
.product_para-1 li span { width: 50%; }
.product_para-1 li, .product_para-1 li span { font-size: 13px; }
.product-item .product-caption .ht-btn { background: #d04383; margin-top: 0;}
.product-item .product-caption .ht-btn:hover { background: #a90c0c; }

.product-header { display: flex; align-items: center; }
.product-header h3 { padding: 0; }

.product-price-box { flex:1 auto; text-transform: uppercase; text-align: right; }
.product-price-box strong { font-size: 20px; margin-right: 15px;}
.product-price-box span { margin: 0 15px 0 0; font-size: 20px;}
.product-price-box .price-old { text-decoration: line-through; }
.product-price-box .save-detail { border:1px solid green; padding: 2px 6px; }

.product-item .product-caption .ht-btn.buttonsinglerent { font-size: 12px; display: block; overflow: hidden; padding: 4px 5px; width: 100%;}

.product-grid-2 .product-caption .product-name span { background: #000000; }
.product-grid-2 .product-item .product-caption .product-name { padding: 10px; height: 90px; }
.product-grid-2 .product-item .product-caption .product-name p { display: block; clear: both; margin: 0; font-size:12px; color: #ffffff; line-height: 16px; font-weight: normal; text-align: left; }
.product-grid-2 .product-item .product-caption .product-name a { width: 100%; margin-bottom: 8px; text-transform: capitalize; }
.product-grid-2 .product-item .product-caption .product-name a b { display: block; clear: both; margin-bottom: 5px; color: #ffffff; font-size: 13px; }
.product-grid-2 .product-item .product-caption .product-name a b i { font-style: normal; font-size: 12px; font-weight: normal; margin-left: 10px; background:#1E90FF; padding: 1px 3px; }

.car .absolute-caption li { font-size: 13px; }

.futures ul { display: flex; flex-wrap: wrap; }
.futures ul li { text-align: center;
border-radius: 2px;
padding: 3px 3px;
vertical-align: middle;
font-size: 13px;
width: 126px;
max-width: 126px; margin: 0 4px 4px 0; }
.futures ul li.attached_on { background-color: #d04383;}
.futures ul li.attached_off { background-color: #333; color: #666; }

/** TAB **/
.tab-container .tab-Content.current { display: block;}
.tab-container .tab-Content { display: none;	padding: 20px 30px 0; overflow: hidden; padding: 15px 0 0; font: 13px/18px 'Roboto', sans-serif; -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s; }

ul.common-tabs { display: flex; margin-bottom: 20px; }
ul.common-tabs li.tab { width: 25%; float: left;  cursor: pointer; font: 400 14px/16px 'Roboto', sans-serif; padding: 0 0 5px; color: #ffffff; text-transform: uppercase; }
ul.common-tabs li.tab { font: 600 16px/20px 'Roboto', sans-serif; width: auto; color: #777777; background:#191919; padding:6px 15px; margin-right: 5px; transition: all 0.25s ease-in-out ; }
ul.common-tabs li.tab.current, ul.common-tabs li.tab:hover.current { background: #d04383; color: #ffffff; }
ul.common-tabs li.tab:hover { background: #170e2a222;}

ul.common-tabs li.tab.current span{ border-bottom: 2px solid #f7e62b; }

/** CHAT ICON **/
.chat-icon { position: fixed;bottom: 60px;right: 0;width: 100px; z-index: 999; }	
.triggerButton { display: none; }
.triggerButton + label {
  cursor: pointer;
  position: absolute;
  right: 1em;
  bottom: 1em;
  background-color: #d04383;
  height: 4em;
  width: 4em;
  border-radius: 50%;
  z-index: 2;
}
.triggerButton + label svg { margin: 12px;}

.triggerButton + label:before, .triggerButton + label:after {
  position: absolute;
  content: '';
  height: calc(4em / 2 );
  width: .25em;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: .5em;
  transition: all .25s;
  display: none;
}

.triggerButton + label:before {
  height: calc(4em / 2 );
  width: .25em;
}

.triggerButton + label:after {
  width: calc(4em / 2 );
  height: .25em;
}

.triggerButton:checked + label:before { transform: rotatez(-45deg); }
.triggerButton:checked + label:after { transform: rotatez(-45deg); }

.one, .two, .three {
  cursor: pointer;
  position: absolute;
  right: 1em;
  bottom: 1em;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  transform: rotateZ(90deg);
  font-size: 1em;
  color: #fff;
  transition-property: all;
  transition-duration: .35s;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
}
.one img, .two img, .three img { width: auto; height: 42px;}
.triggerButton:checked ~ .one, .triggerButton:checked ~ .two, .triggerButton:checked ~ .three { opacity: 1; }
.triggerButton:checked ~ .one {transform: translateX(-5em);transition-delay: .2s;}
.triggerButton:checked ~ .two { transform: translateX(-3.5em) translateY(-3.5em); transition-delay: .1s;}
.triggerButton:checked ~ .three { transform: translateY(-5em);}
.triggerButton:checked ~.one:hover, .triggerButton:checked ~ .two:hover, .triggerButton:checked ~ .three:hover { opacity: .9; }

@keyframes fadeEffect {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
  }
  .shipping-info p, .direct-action p, .content-info p { margin-bottom: 20px;}
  .shipping-info p span, .direct-action p span, .content-info p span { display: block; font-size: 16px; margin-bottom: 10px; line-height: 18px;}
  .direct-action p a, .content-info p a { color: #aaa; }

  .landing-page-footer { position: fixed; left: 0; right: 0; bottom: 0;}
.product-grid-2 .product-item { padding: 10px; }
.footer-bt .p-l-r { padding: 10px !important; }

/* = The Modal (background)  
----------------------------------------------------------------------------------------------- */
.box {
  width: 40%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.button:hover {
  background: #06D85F;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px 20px 40px 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 3s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Roboto, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #d04383;
}
.popup .content span { display: block; color: #d04383; font-size: 30px; font-weight: 600; }
.popup .content {
  max-height: 30%;
  overflow: auto; color: #000000; font-family: Roboto, sans-serif; margin-top: 10%; font-size: 35px; font-weight: 300;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}

/* = Home page slider  
----------------------------------------------------------------------------------------------- */
.menu-bg { margin: 0; }
.banner-item {
position: relative;
left: 0;
right: 0;
margin: 0 auto;}
.img-caption {position: absolute;
left: 0;
top: 0;
transform: translate(50%,50%);
text-align: left;}


.jd-slider,.jd-slider .slide-inner{overflow:hidden;position:relative;width:100%}
.jd-slider{margin:0 auto;padding:0}
.jd-slider .slide-area{width:100%;margin:0;padding:0}
.jd-slider .slide-area img { object-fit: cover; width: 100%; height: 300px; }
.jd-slider .slide-area:after{display:block;content:'';clear:both}
.jd-slider .slide-area li{display:none;float:left;width:100%}
.jd-slider .slide-area li:first-child{display:block}
.jd-slider .slide-area li img{display:block;width:100%}
.jd-slider .next,.jd-slider .prev{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#000}
.jd-slider .hidden.next,.jd-slider .hidden.prev{display:none}
.jd-slider .prev{left:20px;background:rgba(0,0,0,0.5);padding:20px}
.jd-slider .next svg,.jd-slider .prev svg{width:40px;fill:#fff;padding-top:5px}
.fa-angle-right::before,.fa-angle-left::before{display:none}
.jd-slider .next{right:20px;background:rgba(0,0,0,0.5);padding:20px}
.jd-slider .controller{width:100%;text-align:center}
.jd-slider .controller .auto{display:inline-block;vertical-align:middle}
.jd-slider .controller .auto i{display:none;color:#333}
.jd-slider .controller .auto.pause .fa-pause,.jd-slider .controller .auto.play .fa-play{display:none}
.jd-slider .controller .indicate-area{display:inline-block}
.jd-slider .controller .indicate-area a{display:inline-block;position:relative;width:16px;height:16px;margin:0 5px;font-size:0;color:transparent;vertical-align:middle}
.jd-slider .controller .indicate-area a:after{content:'';position:absolute;top:0;left:0;width:inherit;height:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;border:2px solid #fff;border-radius:50%}
.jd-slider .controller .indicate-area a.on:after{background-color:#d04383}
.jd-slider a{font-size:1.5rem}
.jd-slider.fade .slide-area li{display:block;position:absolute;top:0;left:0;opacity:0;-webkit-transform:translateZ(0);transform:translateZ(0)}
.jd-slider.fade .slide-area li:first-child{position:static;opacity:1}
.jd-slider.slider--none .controller,.jd-slider.slider--none .next,.jd-slider.slider--none .prev{display:none}
.jd-slider .slide-inner::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}
.jd-slider .slide-area > li{box-sizing:border-box;text-align:center}
.jd-slider .slide-area > li > a{display:block;height:auto;line-height:auto;font-size:3em;font-weight:700;outline:0}
.jd-slider .controller{margin:10px 0 30px;position:absolute;bottom:0}

/* = Footer  
----------------------------------------------------------------------------------------------- */
#wrap-footer{background:#ffffff !important; padding-top: 20px; }
.footer-top .list-default li, .footer-top p { color: #170e2a222; }
.footer-top .heading-1 h3 { color: #000000; }
a.footer-logo {display: block; }
a.footer-logo img { width: 250px;margin: 0 0 20px 0; }
.footer-top .list-default li a:hover { color: #ffffff; }
.footer-top .p-l-r { background: #ffffff; }
.footer-top .list-default li { padding: 0 0 10px; border: none; }
.footer-address { margin: 20px 0 0 20px; }
.footer-address .cmp-address { font-size: 14px; }
.cmp-address strong { text-transform: uppercase; margin-bottom: 2px;  }
.cmp-address span { display: block; color: #555555;}
.cmp-contact p { margin: 0; }
/*.footer-top .heading-1 { margin-top: 5%;} */
.footer-top .list-default li a:hover { color:#d04383; }
.footer-bt { background: #eeeeee !important; }
.footer-bt p { color: #666666; padding: 10px 0; }
.footer-bt .social-icon li a { margin-top: 0; }
.footer-bt .social-icon li a i.fa-facebook { background:#4267B2; color: #ffffff; }
.footer-bt .social-icon li a i.fa-twitter { background:#1DA1F2; color: #ffffff; }
.footer-bt .social-icon li a i.fa-google { background:#ea4335; color: #ffffff; }
.mark-news { padding-right: 25px; }

.bg-1 { background-color: rgba(23, 14, 42, 1) !important; background-image: none !important; }

  @media (min-width: 1200px){
	  .product-grid .col-lg-2 { width: 19.888%; }
  }
  @media (min-width : 768px) and (max-width: 992px){
    .product-header { display: block;}
    .product-price-box { text-align: left; margin-bottom: 20px;}
    .product-price-box strong { display: block; font-size: 15px;}
    .product-price-box span { font-size: 15px;}
    .product-price-box .save-detail { margin: 0;}
    .product-header .dropdown-toggle { width: 100%;}
	
	.jd-slider .slide-area img { height: auto; }
	.main-menu { margin: 100px 0 20px 0; }
	.navbar-default .navbar-nav li a { padding: 10px; }
	.navbar-default .navbar-nav > li.sp-btn > a { margin: 0; }
	
  }
  @media (max-width : 767px){
	.jd-slider .slide-area img { height: auto; }
	.landing-menu-item { margin: 0 7px; }
	.landing-menu-item a { width: 100px; height: 100px; text-align: center; margin: 0 auto; }
	.landing-menu-item a img { width: 52px; }
	.landing-menu-item a.phomacys-item img { width: 46px; }
	.landing-menu-item a.grocery-item img { width: 40px; }
	.landing-menu-item span { font-size: 14px; line-height: 16px; }
    .menu .navbar-collapse > ul { margin-top: 20px; padding: 0; width: 100%; background: #eeeeee;}
    .navbar-nav .open .dropdown-menu { background: #f5f5f5 !important;}
    .navbar-default .navbar-nav > li.sp-btn > a{ width: auto; border: 0; }
    .navbar-default .navbar-nav > li.sp-btn:not(:last-child) { margin: 0;}
    .navbar-default .navbar-nav li a { width: 100%; }
    .product-header { display: block;}
    .product-price-box { text-align: left; margin-bottom: 20px;}
    .product-price-box strong { display: block; font-size: 15px;}
    .product-price-box span { font-size: 15px;}
    .product-price-box .save-detail { margin: 0;}
    a.footer-logo { margin:8% 0;}
    .footer-address { margin: 20px 0 0;}
    .footer-top .heading-1 { margin-top: 0; }

    .logo img { width: 100px; margin: 32px 0 0; }
    .navbar-toggle { margin-top: 14px; }
    .main-menu .navbar-default .navbar-nav .open > a { color: #000000; }
    .main-menu { height: 70px; margin: 0; }
    .search-box form .search-txt, .search-box:hover .search-txt { width: 100%; }
    .search-box { top: 70px; right: 0; width: 100%; }
    .wd-timezone { text-align: center;}
    .wd-timezone p:not(:last-child){ padding: 0; border-right: none; }
    .chat-icon { bottom: 80px;}
    .ht-btn-default.landing-btn { letter-spacing: normal; font-size: 16px;}
    .footer-bt p { padding-bottom: 0; text-align: center;}
    .social-icon { float: none !important; margin: 0 auto; text-align: center; }
	
	.navbar-default .navbar-nav li a { padding: 20px 10px; }
	.navbar-default .navbar-nav > li.sp-btn > a { margin: 10px 0; }
	ul.common-tabs li.tab { font-size: 14px; }
	.search-by ul li { width: 100px; }
	.search-by ul li a { width: auto; }
	.jd-slider { margin: 15px auto; }
  }