html,body,h1,h2,h3,h4,h5,h6,a,p,span{ font-family: Roboto,sans-serif; }
h1,h2,h3,h4,h5,h6,a,p{ user-select: none; }
.text-grey{ color: #a3a3a3; } .handy{ cursor: pointer; }
.fs-18{ font-size: 1.125rem; }.fs-16{ font-size: 1rem !important; }.fs-14{ font-size: .875rem; }.fs-12{ font-size: .75rem; }
.mt-32{ margin-top: 2rem; }.mb-32{ margin-bottom: 2rem; } .ls-5{ letter-spacing: .5px; }
.hc-title{ color: #000; text-align: center; font-weight: bold; }

/*header*/
.navbar-nav .nav-item{ margin: 0 .688rem; }
.navbar-nav .nav-link{ padding: .47rem 1.21rem !important; color: #737373; font-size: 0.875rem; }
.nav-link.active,.nav-link:hover{ background: #f7f7f7; color: #000; }
.nav-btn{ background: #373972; text-transform: capitalize; padding: .5rem 1.07rem; font-size: 0.875rem; }
.nav-control{ height: calc(1.3em + 1.25rem); border: none; background: #f6f6f6; width: 20rem; }
.nav-search-group{ width: 26rem !important; }
.nav-search,.nav-control:focus{ background: #f6f6f6; }
.nav-search{ padding-top: 1px; }
.text-black{ color: #000; }
.card-img-overlay.bg-transparent:after{ display: none; }
.headroom--top:after{ content: ""; display: block; height: 60px; }
.banner{ background: url(../images/banner-bg.jpg) repeat-y center top; padding-top: 9rem; background-size: 100%; border-radius: 1.5rem; min-height: 300px; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); } 

/*footer*/
.ft-nav{ padding: 0; }
.ft-nav li{ list-style: none; }
.ft-nav li a{ color: #737373; }
.ft-link{ font-size: 1.2rem; background: #272785; color: #fff; line-height: 1; display: inline-block; border-radius: 50%; vertical-align: top; }
.ft-link:hover{ color: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0); }

/*index*/
.to-start{
    padding: 13px 28px 13px 30px; border-radius: 50px; position: relative; line-height: 40px; letter-spacing: .5px; background: #fff; color: #000;
}
.to-start:hover{ color: #000; }
.to-start>.mdi-chevron-right{ font-size: 1.125rem; line-height: 1; margin-left: 0.4rem; }
.fulfillment-bg{ position: relative; }
.fulfillment-bg:after{ 	content: ""; width: 100%; height: 290px; display: block; position: absolute; bottom: -210px; left: 0; background: url('../images/fulfillment.svg') center bottom #fff no-repeat; z-index: 1; }
.banner{ margin-left: 5%; margin-right: 5%; }

/*swiper*/
.swiper-slide img{ width: 100%; }
.ws-button-prev,.ws-button-next{ position: absolute; z-index: 1100; top: 0; width: 8%; height: 100%;  }
.ws-button-prev{ background-image: linear-gradient(to right, rgba(255, 255, 255, 1),rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); left: 0; }
.ws-button-next{ background-image: linear-gradient(to right, rgba(255, 255, 255, 0),rgba(255, 255, 255, .8), rgba(255, 255, 255, 1)); right: 0; }
.ws-button-prev>.mdi,.ws-button-next>.mdi{ font-size: 30px; margin-top: 66%;  display: inline-block; cursor: pointer; }

/*product*/
.tocustom{ margin: 0 12px 28px; border-radius: 12px; float: left; cursor: pointer; overflow: hidden; position: relative; transition:all .3s ease-in; }
.tocustom > div{ bottom: 0; width: 100%; position: absolute; min-height: 80px; }
.tocustom > div > span{ padding: 10px 43px; font-size: 1rem; color: #000; text-align: center; background: #fff; }
.tocustom > div > div{ display: none; }
.tocustom > div > div > a:hover{ color: #fff; }
.tocustom:hover > img{ transform: scale(1.08); transition:all .3s ease-in; }
.tocustom:hover > div > div{ display: block; }

.custom-tip > .card{ background-image: linear-gradient(to bottom, #eaf3fa, #f5f9fd, #fff); border-radius: .8rem .8rem 0 0 !important; }
.custom-tip > .card  .card-header{ padding: 1.5rem 1rem 1.125rem 2rem; cursor: pointer; }
.custom-tip > .card  .card-body{ padding: 0 1rem 0 2rem; color: #949aa4; font-size: .875rem; line-height: 1.7; }
.custom-tip > .card > .card-header:not(.collapsed){ background: none; border:none; }
.custom-tip > .card > .card-header:not(.collapsed)>h6{ color: #35399f; }
.custom-tip > .card > .card-header .mdi:after{ content: "\F0142"; font: normal normal normal 24px/1 "Material Design Icons";vertical-align: middle; float:right; }
.custom-tip > .card > .card-header:not(.collapsed) .mdi:after{ content: "\F0143"; color: #6b72d6; }

/*service*/
.how-work > .card{ background: none; }
.how-work > .card  .card-header{ padding: 1.25rem 1.25rem 1.25rem 1.625rem; border: none; border-radius: 0.7rem 0.7rem 0 0 !important; }
.how-work > .card  .card-header span{ display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 100%; font-weight: normal; vertical-align: middle; margin-right: 1rem; line-height: 24px; background: #ececf7; font-size: .75rem; }
.how-work > .card  .card-body{ padding: 0 1.25rem 0 1.625rem; color: #737373; background: #fff; font-size: 1rem; line-height: 1.4; min-height: 90px; border-radius: 0 0 0.7rem 0.7rem; }
.how-work > .card > .card-header.collapsed{ background: none; }
.how-work > .card > .card-header .mdi:after{ content: "\F0142"; font: normal normal normal 20px/1 "Material Design Icons"; vertical-align: middle; float:right; }
.how-work > .card > .card-header:not(.collapsed) .mdi:after{ content: "\F0143"; }
.hc-round{ border-radius: 50%; background: #fff; box-shadow: 0 .6rem 2rem rgba(0,0,0,.05); padding: 9px; }
.pod-size{ width: 45px; height: 45px; display: inline-block; color: #8390cb; font-weight: bold; margin-top: .6rem; margin-bottom: 1.9rem; box-shadow: 0 .3rem .6rem rgba(0,0,0,.1); }
.pod-size-active{ width: 61px; height: 61px; display: inline-block; background: #373972; font-weight: bold; line-height: 43px; margin-bottom: 1.5rem; color: #fff;}

.hc-line{ background-color: #e5e5e5; width: 1px; margin: 0 auto; height: 50px; }
.badge-steps{ background: #8a00ff;padding: 0.15rem 0.6rem; }

/*dropship*/
.dropship{ cursor: pointer; user-select: none; }
.dropship>.media:after{ content:""; height: 5px; border-radius: 5px; background-color: #eee; width: 100%; position: absolute; bottom: 0; left: 0; }
.dropship.active>.media:after{ background-color: #0044eb; }

/*fearures*/

.feature{ width: 361px; right: -12%; }
.feat-live{ margin-right: 3rem; }

@media  only screen and (min-width: 1360px) {
	.container {
		max-width: 1200px;
	}
}
@media (max-width: 575.98px) {
  h1{ font-size: 1.5rem !important; } 
  h2{ font-size: 1.4rem !important; } 
  
  .m-mt-20{ margin-top: 0 !important; }
  .m-hide { display: none !important; } .m-block{ display: block !important; }
  .m-ml-0{ margin-left: 0 !important; }
  .m-mt-0{ margin-top: 0 !important; }
  .m-mr-0{ margin-right: 0 !important; }
  .m-mb-0{ margin-bottom: 0 !important; }
  .m-pl{ padding-left: 15px !important; } .m-pr{ padding-right: 15px !important; } .m-p0{ padding: 0 !important; }
  .m-border-none{ border: none !important; }
  .m-center{ text-align: center !important; }
  .m-w100{ width: 100% !important; }
  .ft-nav{ display: none !important; }
  .m-fs14{ font-size: .875rem !important; }
  .m-fs12{ font-size: .75rem !important; }
  .m-bg-none{ background: none !important; }

  
  .tocustom{ width: calc( 100% - 24px) !important; }
  .banner{ margin-left: 15px; margin-right: 15px; }
  .nav-search-group{ width: calc(100% - 7rem) !important; }
  .fulfillment-bg:after{ display: none !important; }
  .banner{ min-height: 200px; }
  .badge-steps{ padding: 0.3rem 0.6rem 0.05rem; }
  .pod-size,.pod-size-active{ margin-bottom: .8rem; }
  .hc-line{ display: none; }
  .dropship > .media{ text-align: center; display: block; padding-bottom: .75rem !important; }
  .dropship > .media > img{ width: 50%; }
  .dropship > .media > .media-body > h5{ padding: 0 !important; font-size: 1rem; line-height: 1; }
  .list-group.flex-xl-row{ flex-direction: row !important }
  .feature{  right: 0; }
  .feat-live{  margin-right: 1rem; font-size: .875rem; }
}