/****************************************

*           Global style

/****************************************/



:root{

    --main-color: #ed1d24;

    --secondary-color: #41b468;

    --hot-color: #ee395f;

    --gray-color: #F5F5F5;

    --base-font: 'Rubik', sans-serif;

}

html{

    background-color: #fff;

    -moz-osx-font-smoothing: grayscale;

    -webkit-font-smoothing: antialiased;

    min-width: 320px;

    overflow-x: hidden;

    overflow-y: scroll;

    text-rendering: optimizeLegibility;

    -ms-text-size-adjust: 100%;

    -webkit-text-size-adjust: 100%;

    min-height: 100vh;

}

button{

    padding: 0; 

}

button:focus{

  outline: none;

}

img{

    max-width: 100%;

}

a {

    color: var(--dark-color);

}

a:hover{

    text-decoration: none;

     color: var(--main-color);

}

ul{

    padding: 0;

    margin: 0;

    list-style: none;

}

p{ 

    line-height: 1.7;

}

body {

    padding-top: 65px;

    font-family: var(--base-font);

    font-size: 14px;

    color: var(--dark-color);

    transition: all 0.3s ease-in-out;

    background-color: var(--gray-color);

    min-height: 100vh;

    color: #333;

    font-weight: 400;

    word-wrap: break-word;

}

}



.container--mini{

  max-width: 960px;

}



.u-m-b-10{margin-bottom: 10px}

.u-m-b-15{margin-bottom: 15px}

.u-m-b-30{margin-bottom: 30px}

.u-m-b-20{margin-bottom: 20px}

.u-m-b-25{margin-bottom: 25px}

.u-m-b-30{margin-bottom: 30px}

.u-m-b-60{margin-bottom: 60px}



.u-m-t-10{margin-top: 10px}

.u-m-t-15{margin-top: 15px}

.u-m-t-20{margin-top: 20px}

.u-m-t-25{margin-top: 25px}

.u-m-t-30{margin-top: 30px}

.u-m-t-40{margin-top: 40px}

.u-m-t-50{margin-top: 50px}

.u-m-t-60{margin-top: 60px}



.u-m-l-10{

  margin-left: 10px;

}

.u-m-l-20{

  margin-left: 20px;

}

.u-m-l-25{

  margin-left: 25px;

}



.u-m-r-15{

  margin-right: 15px;

}

.u-p-t-20{padding-top: 20px}

.u-p-t-30{padding-top: 30px}

.u-p-t-60{padding-top: 60px}

.u-p-t-70{padding-top: 70px}

.u-p-t-80{padding-top: 80px}

.u-p-t-100{padding-top: 100px}

.u-p-t-90{padding-top: 90px}

.u-p-t-100{padding-top: 100px}

.u-p-t-110{padding-top: 110px}







.u-p-t-10{

  padding-top: 10px;

}



.u-p-b-30{padding-bottom: 30px}

.u-p-b-40{padding-bottom: 40px}

.u-p-b-50{padding-bottom: 50px}

.u-p-b-60{padding-bottom: 60px}





.u-relative{

  position: relative;

}

.u-flex {

    display: -webkit-box;

    display: -webkit-flex;

    display:    -moz-box;

    display: -ms-flexbox;

    display:         flex;

}



.u-flex--wrap {

    -webkit-flex-wrap: wrap;

        -ms-flex-wrap: wrap;

            flex-wrap: wrap;

}



.u-flex--content-center {

    -webkit-box-pack: center;

       -moz-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

            justify-content: center;

}



.u-flex--content-between {

    -webkit-box-pack: justify;

       -moz-box-pack: justify;

    -ms-flex-pack: justify;

    -webkit-justify-content: space-between;

            justify-content: space-between;

}



.u-flex--content-start {

    -webkit-box-pack: start;

       -moz-box-pack: start;

    -ms-flex-pack: start;

    -webkit-justify-content: flex-start;

            justify-content: flex-start;

}



.u-flex--content-end {

    -webkit-box-pack: end;

       -moz-box-pack: end;

    -ms-flex-pack: end;

    -webkit-justify-content: flex-end;

            justify-content: flex-end;

}



.u-flex--item-center {

    -webkit-align-items: center;

            align-items: center; 

    -webkit-box-align: center;

       -moz-box-align: center;

    -ms-flex-align: center;

}



.clear::before,.clear::after,

section::before,section::after  {

    display: block;

    clear: both;

    content: "";

}

.img-block{

  width: 100%;

  display: block;

}



.has-border-top{

  border-top: 1px solid #e5e5e5;

}

.u-overflow-hidden{

  overflow: hidden;

}

.u-pointer{

  cursor: pointer;

}

.u-shadow{

  box-shadow: 0 0 30px rgba(82, 92, 118, 0.3);

  background: #fff;

}

button{

  cursor: pointer;

}

.has-shadow{

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);

  box-shadow: 0 1px 3px rgba(0,0,0,.1);

  background: #fff;

}

.d_none{

  display: none;

}

/****************************************

*           Components

/****************************************/

input:focus{

  outline: none;

}







/****************************************

*           Header

/****************************************/

.header{

  background: var(--main-color);

  padding: 10px 0;

  position: fixed;

  width: 100%;

  left: 0;

  top: 0;

  z-index: 999;

}

.header-alt{



}

.header__logo{

  max-width: 240px;

  width: 100%;

}

.header__logo img{

width:55px;

}

.header__act {

    max-width: 240px;

    width: 100%;

    justify-content: flex-end;

    display: flex;

}

.header__search{

  flex: 0 0 466px;

}

.header__search form{

  position: relative;

  background: #fff;

  display: flex;

  height: 34px;

  border-radius: 3px;

  width: 100%;

  justify-content: space-between;

}

.header__search form input{

  background: transparent;

  border: 0;

  flex: 1;

  padding: 0 12px;

  font-size: 13px;

}

.header__search form .ico-left {

    color: #777;

    font-size: 19px;

    width: 32px;

    text-align: center;

    line-height: 37px;

    position: relative;

    display: none;

}

.header__search form .ico-left:before {

    content: "";

    height: 22px;

    width: 1px;

    background: #ddd;

    position: absolute;

    right: -1px;

    top: 7px;

}

.header__search form .ico-right{

  border: 0;

  background: var(--secondary-color);

  color: #fff;

  width: 34px;

  border-radius: 0 3px 3px 0;

  line-height: 37px;

}

.header__act{}

.header__act .user_btn a{

  color: #fff;

  font-size: 13px;

  margin-right: 25px;

}

.user-avater{

  margin-right: 15px;

}

.user-avater a{

  display: inline-block;

  height: 40px;

  width: 40px;

  border-radius: 50%;

  overflow: hidden;

}
.user_btn,
.user_logout a{
  color: #fff;
}
.user-avater a img{}

.header__cart{

  color: #fff;

  font-size: 30px;

  cursor: pointer;

  position: relative;
  margin-left: 15px;

}

.cart-open .header__cart{

  color: rgba(0,0,0,.3);

}
.modal__hero img {
    width: 240px;
}

.modal__hero {
    position: relative;
    text-align: center;
    padding-top: 15px;
}
.cart-count {

    position: absolute;

    height: 22px;

    width: 22px;

    background: #fcbf14;

    font-size: 12px;

    text-align: center;

    line-height: 22px;

    border-radius: 50%;

    color: #333;

    top: -2px;

    right: -9px;

}



.header__logo .menu-bar{

    display: none;

}

.mobile-cats{

    display: none;

    position: fixed;

    left: 0;

    top: 55px;

    z-index: 99999999;

    width: 100%;

    max-width: 320px;

    background: #fff;

    height: 100vh;

    transform: translateX(-100%);

    transition: .3s;

}

.mCatOpen .mobile-cats{

    transform: translateX(0);

}

.back__home{

  color: #fff!important;

  font-size: 23px;

  margin-right: 15px;

}



.mCatOpen .mobile-cats:before {

    content: "";

    height: 100%;

    width: 990px;

    background: #333;

    position: absolute;

    left: 100%;

    opacity: .95;

}



.mCatOpen .header__logo .menu-bar{

  color: rgba(0,0,0,.3);

}

.cat-tab{



}

.cat-tab>div {

    flex: 1;

    height: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.cat-tab .user {

  background: #fcbf14;

}



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

    .header__search{

        flex: 0 0 300px;

    }

}

@media (max-width: 767px) {

    .header__search{

        flex: 0 0 100%;

        order: 5;

    }

    .header .container{

        flex-wrap: wrap;

    }

    .header__act,

    .header__logo {

        width: 50%;

    }

    #overlay{

        display: none;

    }

    .cart-aside {

        z-index: 9999999999!important;

        top: -11px!important;

    }

    .cart-aside .inner{

        border: 1px solid #efefef;

    }

    .main__slider {

        margin-top: 50px!important;

    }

    .header__logo{

        display: flex;

        align-items: center;

    }

    .header__logo .menu-bar{

        display: inline-flex;

        color: #fff;

        font-size: 30px;

        cursor: pointer;

        margin-right: 15px;

    }

    .user_btn{

      display: none;

    }

}





/*cart-aside*/

.cart-open{

/*  overflow: hidden;

  height: 100vh;*/

}

.cart-aside{

    z-index: 300;

    position: fixed;

    overflow: hidden;

    margin-top: 65px;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    opacity: 0;

    visibility: hidden;

    display: block;

    width: 100%;

    padding: 0;

    border: 0;

    cursor: pointer;

    transition: .5s;



}

#overlay{

  height: 100%;

  width: 100%;

  background-color: rgba(0,0,0,.5);

}

.cart-open .cart-aside{

  visibility: visible;

  opacity: 1;

}

.cart-aside .inner{

    width: 360px;

    padding-left: 20px;

    padding-right: 20px;

    cursor: default;

    position: absolute;

    top: 0;

    bottom: 0;

    right: 0;

    background-color: #fff;

    -webkit-transform: translateX(100%);

    transform: translateX(100%);

    transition: .3s;

}

.cart-open .cart-aside .inner{

    -webkit-transform: translateX(0);

    transform: translateX(0);

    transition: .3s;

}

.cart-aside .head{

  padding: 15px 10px;

}

.cart-aside .head h5{

  font-size: 16px;

  color: var(--main-color);

}

.cart-aside .head .list-close{

  font-size: 20px;

  cursor: pointer;

}

.items-cart{

  max-height: calc(100% - 200px);

  height: 100%;

  overflow-y: auto;

  padding-left: 10px;

  padding-right: 10px;

}

.items-cart .item{

  border: 1px solid #eee;

  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);

  box-shadow: 0 1px 3px rgba(0,0,0,.1);

  padding: 10px 10px 0;

  margin-bottom: 20px;

  border-left: 4px solid var(--secondary-color);

  border-radius: 3px 0 0 3px;

}

.items-cart .item .top{

  position: relative;

}

.items-cart .item figure{

  flex: 0 0 70px;

  margin-right: 10px;

}

.items-cart .item .top .item-close{

  position: absolute;

  right: 0;

  top: 0;

  cursor: pointer;

  font-size: 9px;

}

.items-cart .item h5{

  font-size: 13px;

  padding-right: 20px;

  line-height: 1.5;

}

.price-calc{

  border-top: 1px solid #eee;

  border-bottom: 1px solid #eee;

}

.price-calc .fs{

  font-size: 15px;

}

.price-calc .btn-set{

  display: flex;

  align-items: center;

}

.price-calc .btn-set button{

    text-align: center;

    cursor: pointer;

    border: 0;

    background-color: transparent;

    font-weight: 400;

    padding-top: 10px;

    padding-bottom: 10px;

    color: rgba(0,0,0,.44);

    fill: rgba(0,0,0,.44);

    -webkit-transition: all .2s ease;

    transition: all .2s ease;

    background-color: rgba(0,0,0,.1);

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    height: 30px;

    width: 24px;

    border-radius: 0;

}

.price-calc .btn-set button:hover{
  background: var(--main-color);
  color: #fff;
}
.price-calc .btn-set .item__count {
    padding: 0 8px;
    font-size: 13px;
    width: 34px;
    border: 0;
    text-align: center;
    background: transparent;
}
.item-meta{

    color: #888;

    font-size: 13px;

    height: 31px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}

.cart-footer{

  padding: 16px 10px 0;

}

.cart-footer .total-count{

    margin-bottom: 15px;

}

.cart-footer .total-count div{

  font-size: 18px;

}

.cart-footer .act{



}

.cart-footer .act p{}

.cart-footer .order-end{}

.cart-footer .order-end .text{

  font-size: 13px;

    line-height: 1.55;

    color: rgba(0,0,0,.44);

}

.cart-footer .order-end .btn-order{

      display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    align-items: center;

    width: 60%;

    margin-top: 5px;

    border-style: solid;

    border-width: 1px;

    color: #fff;

    fill: #fff;

    padding-top: 10px;

    padding-bottom: 10px;

    background-color: #41b468;

    border-color: #3aa15d #338f52 #2d7c48;

    background: -webkit-gradient(linear,left top,left bottom,from(#57c27b),to(#41b468));

    background: linear-gradient(180deg,#57c27b,#41b468);

    -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.4) inset;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

}



.cart-footer .order-end .btn-order:hover{

  color: #fff;

    fill: #fff;

    background-color: #3aa15d;

    background: -webkit-gradient(linear,left top,left bottom,from(#41b468),to(#41b468));

    background: linear-gradient(180deg,#41b468,#41b468);

}







@media (max-width: 767px) {

    .mobile-cats {

        display: block;

    }

}





.footer-logo img {

    width: 100px;

}









/****************************************

*           main slider

/****************************************/



.JS__main__slider{}

.JS__main__slider .slider__item{

  height: 420px;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

}



.main__slider{

  position: relative;

}

.main__slider__bottom {

    max-width: 340px;

    margin-left: auto;

    margin-right: auto;

    position: absolute;

    bottom: 30px;

    left: 50%;

    width: 100%;

    transform: translateX(-50%);

}

.slider__nav__fig{

  padding: 5px 0

}

.slider__nav__fig .inner{

  border-radius: 50%;

  overflow: hidden;

  background: #fff;

  margin: 0 3px!important;

  width: 68px;

  height: 68px;

  padding: 8px;

  cursor: pointer;

}

.slider__nav__fig svg{

  width: 100%;

}

.slick-current .inner{

  background: #e9d8aa;

  box-shadow: 0 0 0 3px #fcbf14;

}

.btn__slider {

    border-style: solid;

    border-width: 1px;

    color: #fff;

    fill: #fff;

    background-color: #41b468;

    border-color: #3aa15d #338f52 #2d7c48;

    background: -webkit-gradient(linear,left top,left bottom,from(#57c27b),to(#41b468));

    background: linear-gradient(180deg,#57c27b,#41b468);

    -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.4) inset;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

    max-width: 280px;

    width: 280px;

    margin-left: auto;

    margin-right: auto;

    border-radius: 6px;

    min-height: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    position: absolute;

    left: 50%;

    bottom: 120px;

    transform: translateX(-50%);

    cursor: pointer;

}



/****************************************

*           Home Content

/****************************************/

.row10{

  margin: 0 -10px;

}

.sec-head {

    background: #fff;

    box-shadow: 0 1px 3px rgba(0,0,0,.1);

    border-left: 4px solid var(--main-color);

    padding: 10px 15px;

    margin-bottom: 5px;

}

.sec-head h4{

  font-weight: 700;

  font-size: 20px;

  color: var(--main-color);

  margin-bottom: 0;

}

.sec-head .Btn {

    color: var(--main-color);

    font-size: 12px;

    border-radius: 4px;

    height: 26px;

    display: flex;

    align-items: center;

    font-weight: bold;

}

.sec-head .Btn i{

    font-size: 10px;

    margin-left: 2px;

}

.section--home{

/*  border-bottom: 1px solid #e5e5e5;*/

  padding-bottom: 20px;

  margin-bottom: 15px;

}

.section:last-child{

  margin-bottom: 0;

  padding-bottom: 0;

  border-bottom: 0;

}

.categories{

}

.categories .title{}

.categories .title h4{

  display: block;

  padding: 11px 0 11px 15px;

  font-size: 15px;

  font-weight: 600;

  margin-bottom: 0;

  cursor: pointer;

  line-height: 1.87;

}

.categories .parent_ul{}

.categories .parent_ul li{

  border-top: 1px solid #e5e5e5;

  position: relative;

}

.categories .parent_ul>li:last-child{

 border-bottom: 1px solid #e5e5e5;

}

.cat-more {

    position: absolute;

    height: 47px;

    width: 30px;

    text-align: center;

    right: 0;

    top: 0;

    font-size: 7px;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

}

.open .cat-more {

  transform: rotate(180deg);

}

.cat-more i {

    display: inline-block;

    border: 1px solid rgba(0,0,0,.33);

    border-radius: 3px;

    height: 15px;

    width: 15px;

    line-height: 14px;

}

.categories .parent_ul li a {
    display: block;
    padding: 11px 26px 11px 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.87;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.categories .parent_ul li.open>a{

  color: var(--main-color);

}

.categories .parent_ul li a:hover{

  color: var(--main-color);

  background: rgba(0,0,0,.02);

}

.categories .parent_ul ul{

  padding-left: 15px;

  display: none;

}

.categories .parent_ul ul a{

  font-size: 12px;

}

.col-cat{

  flex: 0 0 235px;

  max-width: 235px;

  padding: 0 10px;

}

.sidebr{

  background: #fff;

  height: 100%;

}

.col-content{

  flex: calc(100% - 235px);

  padding: 0 10px;

  padding-bottom: 40px;

}

.products{

  margin: 0 -7px;

}

.product a{

  background: #fff;

  display: block;
  height: 100%;
  padding-top:40px;
  position:relative;

}
@media (max-width: 767px){
    .product a{
    
      background: #fff;
    
      display: block;
      height: 100%;
      padding-top:0;
      position:relative;
    
    }
}
.discount-div-r-product {
	position: absolute;
	top: 0px;
	color: white;
	right: 0px;
	padding: 7px 7px;
	background: #ed1d24;
	border-bottom-left-radius: 1rem;
}
.product figure {
    margin-bottom: 0;
    height: 227px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product{

  width: 25%;

  max-width: 25%;

  padding: 7px;

}

.product .content{

  padding: 8px;

}

.product .content h5{

  font-size: 15px;

  margin-top: 4px;

  margin-bottom: 10px;

  max-height: 38px;

  overflow: hidden;

}

.product .price{}

.product .price .top{

  display: flex;

}

.product .price .old{

  font-size: 12px;

  color: #aaa;

  text-decoration: line-through;

}

.product .price .save{

  color: var(--hot-color);

  font-size: 12px;

  padding-left: 10px;

}

.product .price .bottom{

  font-size: 16px;

}

@media (max-width: 991px) {

    .product {

        width: 50%;

        max-width: 50%;

    }

    .col-content {

        flex: 0 0 100%;

    }

    .col-cat{

        display: none;

    }

}

/****************************************

*           Footer

/****************************************/

.footer{

      position: relative;

    background-color: #fff;

    border-top: 1px solid #eee;

    z-index: 100;

}

.footer-blocks{

  padding: 40px 0;

}

.about-block{

  padding-right: 40px;

}

.about-block p{

    color: #999;

    fill: #999;

    line-height: 1.77;

    font-size: 14px;

    margin-top: 11px;

    max-width: 350px;

}



.about-block h5{

    color: #999;

    line-height: 1.77;

    font-size: 20px;

    text-decoration: none;

    margin-bottom: 22px;

}

.about-block .social a {

    height: 36px;

    width: 36px;

    background: #999;

    border-radius: 4px;

    margin-right: 5px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-size: 15px;

    transition: .3s;

}

.about-block .social a:hover{

  background: var(--main-color);

}

.block-title h6{

    font-size: 15px;

    line-height: 1.33;

    font-weight: 700;

    color: #333;

    fill: #333;

    padding-top: 10px;

    margin-bottom: 20px;

}

.block-link ul li a{

  color: #999;

  line-height: 1.8;

} 

.block-link ul li a:hover{

  color: #333;

}



.block-link ul li a:before{

  content: "\e649";

  font-family: 'themify';

  font-size: 9px;

  margin-right: 5px;

  width: 0;

  opacity: 0;

  transition: .3s;

  display: inline-block;

}

.block-link ul li a:hover:before{

  width: 10px;

  opacity: 1;

}

.footer__end{

  font-size: 13px;

  text-align: center;

  padding-bottom: 15px;

  color: #999;

}

.footer__end a{

  color: #999;

}

.footer__end a:hover{

  text-decoration: underline;

  color: #333;

}

.footer__end .address{

  margin-bottom: 5px;

}

.footer__end .copyright li{

  margin: 0 15px;

}

.footer__end .copyright li a{

  position: relative;

  display: inline-block;

}

.footer__end .copyright li a:before {

    content: "";

    height: 3px;

    width: 3px;

    background-color: #999;

    position: absolute;

    left: -16px;

    top: 9px;

    border-radius: 50%;

}

.footer__end .copyright li:first-child a:before{

  display: none;

}



.footer__end .copyright ul{

  padding-right: 15px;

}

@media (max-width: 991px) {

    .footer-blocks .col-lg-5{

        margin-bottom: 30px;

    }

    .footer-blocks .col-lg-4{

        margin-bottom: 30px;

    }

    .footer-blocks .col-lg-4:last-child{

        margin-bottom: 0;

    }

}

@media (max-width: 767px) {

  .footer__end .copyright ul {

      padding-right: 0;

      flex: 0 0 100%;

      justify-content: center;

      padding-bottom: 5px;

  }

  .footer__end .copyright {

      flex-wrap: wrap;

  }

}





/*popup styling*/

.popup{

  position: fixed;

  height: 100vh;

  width: 100vw;

  background: rgba(0,0,0,.9);

  z-index: 999999999;

  top: 0;

  left: 0;

  padding: 30px;

  display: none;

}

span.popup__close {

    color: #fff;

    font-size: 35px;

    position: absolute;

    top: 12px;

    right: 40px;

    z-index: 9999999;

    cursor: pointer;

    width: 40px;

    text-align: center;

}

.popup .inner{

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.popup .inner .figure{

  height: 100%;

}

.popup .inner .figure img{

  height: 100%;

}

.popup__btnset button{

  position: fixed;

  height: 100vh;

  width: 50vw;

  top: 0;

  background: transparent;

  border: 0;

  display: flex;

}

.popup__btnset button i {

    height: 60px;

    width: 60px;

    display: inline-block;

    line-height: 60px;

    background: hsla(0,0%,100%,.88);

    color: #333;

    border-radius: 50%;

    font-size: 21px;

}

.popup__btnset .next{

  right: 0;

    justify-content: flex-end;

    padding-right: 20px;

}

.popup__btnset .prev{

  left: 0;

    justify-content: flex-start;

    padding-left: 20px;

}

















/**********************************

*     Category Page

***********************************/

.category-intro{

    background-color: #fff;

    padding: 20px;

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);

    box-shadow: 0 1px 3px rgba(0,0,0,.1);

}

.category-intro h3{

  font-weight: bold;

  margin-bottom: 2px;

}

.category-intro .breadcrumb{

  background: transparent;

  padding: 0;

  margin: 0;

}

.category-intro .breadcrumb li{

  font-size: 12px;

}

.category-intro .breadcrumb li a{}

.category-intro .breadcrumb li a:after{

  content: "\e649";

  font-family: "themify";

  font-size: 9px;

  margin-left: 8px;

  margin-right: 8px;

}

.category-intro .breadcrumb li.active{

  font-weight: 600;

}

.cat-banner{

  height: 290px;

  position: relative;

  overflow: hidden;

  margin-bottom: 15px;

}

.cat-banner figure{

  margin-bottom: 0;

}

.cat-banner img{

  position: absolute;

  width: 100%;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

}



.section--category .sec-head{

  padding-top: 15px;

}

.section--category .products{

  padding-bottom: 15px;

}

.section--subcategory{

/*  border-bottom: 1px solid #ddd;*/

  padding-bottom: 15px;

  margin-bottom: 15px;

}



@media (max-width: 767px){

  .cat-banner{

    height: auto;

  }

  .cat-banner img{

    position: static;

    transform: translate(0);

  }

  .page-wrap{

    padding-top: 55px;

  }

}



/**************************

*       Product Details

****************************/

.content-det{

  background: #fff;

  padding: 15px;

}

.product-preview{

  flex: 0 0 40%;

  max-width: 4.%;

}

.det-content{

  flex:  0 0 60%;

  max-width: 60%;

  padding-left: 40px;

}

.product__fig{

  margin-bottom: 10px;

  cursor: zoom-in;

}

.product__thum li{

  flex: 0 0 70px;

  margin-right: 5px;

  margin-bottom: 5px;

  border: 1px solid #e5e5e5;

  cursor: pointer;

}

.product__thum li.active {

    border: 1px solid var(--main-color);

    box-shadow: 0 0 0 1px var(--main-color);

}

.det-content .id{

  position: relative;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

  background: #41b468;

    height: 17px;

    color: #fff;

    text-decoration: none;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-pack: end;

    -ms-flex-pack: end;

    justify-content: flex-end;

        min-width: 150px;

    height: 25px;

    margin-bottom: 10px;

}

.det-content .id:before {

    content: "";

    height: 0;

    width: 0;

    display: block;

    position: absolute;

    top: 0;

    right: -8.5px;

    border-top: 8.5px solid var(--secondary-color);

    border-bottom: 8.5px solid var(--secondary-color);

    border-right: 8.5px solid transparent;

    border-left: 8.5px solid transparent;

    z-index: 0;

    right: -12.5px;

    border-top: 12.5px solid var(--secondary-color);

    border-bottom: 12.5px solid var(--secondary-color);

    border-right: 12.5px solid transparent;

    border-left: 12.5px solid transparent;

}

.det-content .id .inner{

    color: #fff;

    position: relative;

    padding-left: 5px;

    padding-right: 5px;

    line-height: 1.11;

    width: 100%;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    font-size: 16px;

    padding-left: 10px;

    padding-right: 10px;



}

.det-content .payment-offers{

  margin-bottom: 10px;

}

.det-content .payment-offers img{

  max-width: 115px;

}

.det-content .product-inf{}

.det-content .product-inf h4{

  color: var(--main-color);

  font-size: 19px;

}



.det-content .product-inf .price{

  margin-bottom: 15px;

}

.det-content .product-inf .price .top{

  display: flex;

}

.det-content .product-inf .price .old{

  font-size: 13px;

  color: #aaa;

  text-decoration: line-through;

}

.det-content .product-inf .price .save{

  color: var(--hot-color);

  font-size: 13px;

  padding-left: 10px;

}

.det-content .product-inf .price .bottom{

  font-size: 20px;

}

.det-content .color-meta{}

.det-content .color-meta h6{

  font-size: 14px;

  color: var(--main-color);

}

.det-content .color-meta .btn-set{



}

.det-content .color-meta .btn-set button{

  margin-bottom: 10px;

  margin-right: 10px;

  border-radius: 6px;

  border: 2px solid var(--main-color);

  font-size: 14px;

  padding: 4px 10px;

  background: transparent;

}

.det-content .color-meta .btn-set button.active{

  background: var(--main-color);

  color: #fff;

}

.product-act{}

.product-act .act-det {

    display: inline-block;

    position: relative;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    border-radius: 6px;

    width: 200px;

    margin-top: 15px;

    -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    height: 44px;

    font-size: 16px;

    font-weight: 700;

    padding: 0 7px;

    padding-left: 10px;

    padding-right: 10px;

    border-style: solid;

    border-width: 1px;

    color: #fff;

    background-color: #ed1d24;

    border-color: #ed1d24 #bf0e14 #6f060a;

    background: linear-gradient(180deg,#f02e35,#b21015);

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

    vertical-align: middle;

    line-height: 42px;

}

.product-act .act-det.cart {

    background-color: #41b468;

    border-color: #6bcd8c #169240 #0d662b;

    background: linear-gradient(180deg,#5cd485,#24974b);

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

}

.product-act .act-det.buy{

  margin-left: 10px;

}

.product-meta{

  margin-top: 20px;

}

.product-meta li{

  margin-bottom: 7px;

}

.product-meta li svg{

  width: 20px;

  vertical-align: middle;

  margin-right: 7px;

}

.product-meta li path{

  fill: var(--secondary-color);

}

.det-box .box-body{

  padding: 20px 20px 1px;

}

.det-box .title{

    padding: 12px 15px;

    font-size: 16px;

    font-weight: 700;

    color: #333;

    fill: #333;

    border-bottom: 1px solid #ddd;

}

.pro-desc ul{

  padding-left: 30px;

    list-style: initial;

    margin-bottom: 32px;

}



.offers-det{}

.pro-desc h6,

.offers-det h6{

    margin-top: 10px;

    margin-bottom: 10px;

    font-size: 14px;

    font-weight: 700;

}

.offers-det ul{

  padding-left: 30px;

  list-style: initial;

  margin-bottom: 32px;

}

.offers-det li{

    margin-bottom: 10px;

    line-height: 1.33;

}

.features-det{

  padding-bottom: 5px;

}

ul.pul{

  font-size: 14px;

}

ul.pul .pli{

  display: flex;

  border-bottom: 1px solid #f5f5f5;

  padding: 7px 0;

}

ul.pul .pli:last-child{

  border-bottom: 0;

}

ul.pul .pli h6{

  color: #aaa;

  width: 25%;

  font-size: 14px;

  margin-bottom: 0;

}

ul.pul .pli .cul{

  color: #555;

}







@media (min-width: 1280px){

  .container{

    width: 1230px;

    max-width: 1230px;

  }

}

@media (max-width: 767px) {

    .content-det{

        flex-wrap: wrap;

    }

    .det-content,

    .product-preview,

    .feat-list li{

        flex: 0 0 100%;

        max-width: 100%;

    }

    .product__thum ul {

        justify-content: center;

    }

    .det-content{

        margin-top: 15px;

        padding-left: 0;

    }

    .popup{

      opacity: 0;

      pointer-events: none;



    }

}



@media (max-width: 575px){

  .product-act {

    display: flex;

    width: 100%;

    max-width: 400px;

}

  .product-act .act-det{

    flex: 0 0 50%;

    width: auto;

    max-width: 50%;

    margin-left: 0!important;

    margin-right: 0;

  }

  .product-act .act-det.cart{

    border-radius: 6px 0 0 6px;

  }

  .product-act .act-det.buy{

    border-radius: 0px 6px 6px 0px;

  }

}











/******** about page ********/

.page-about{

  background: #fff;

  padding: 100px 0;

}

.page-about .inner{

    margin-left: auto;

    margin-right: auto;

}

.page-about .top{

  max-width: 800px;

  padding-left: 120px;

  margin-bottom: 60px;

}

.page-about .top h1{

  font-size: 52px;

  font-weight: 900;

}

.page-about .top h1 span{

  display: block;

  color: #9ea0a6;

}



.page-about .top p{

  font-size: 21px;

  margin-top: 30px;

}



.about__des{

  margin: auto;

  padding-top: 60px;

  max-width: 700px;

}



.about__des__i:last-child{

  margin-bottom: 0;

}

.about__des__i{

  margin-bottom: 40px;

}

.about__des__i h3{

  font-weight: 700;

  margin-bottom: 25px;

  font-size: 26px;

}

.about__des__i p{

  margin-bottom: 0;

  font-size: 16px;

}



@media (max-width: 767px) {

    .page-about .top h1 {

        font-size: 28px;

        line-height: 1.6;

    }

    .page-wrap{

        padding-top: 60px;

    }



    .page-about .top{

      padding-left: 0;

    }

}







/*login modal*/

.login__modal{

  position: fixed;

  height: 100vh;

  width: 100vw;

  overflow-y: auto;

  overflow-x: hidden;

  background: rgba(255,255,255,.98);

  z-index: 99999;

  left: 0;

  top: 0;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 55px 0;

  display: none;

}

.login__active .login__modal{

  display: flex;

}

.login__modal .inner{

      position: relative;

    display: inline-block;

    vertical-align: middle;

    outline: 0;

    overflow: hidden;

    width: 100%;

    max-width: 400px;

    padding: 0;

    background-color: #fff;

    min-height: 500px;

    text-align: left;

    -webkit-box-shadow: 0 4px 14px 0 rgba(0,0,0,.3);

    box-shadow: 0 4px 14px 0 rgba(0,0,0,.3);



}



.modal__hero{

  position: relative;

}

.modal__hero .login__close {

    position: absolute;

    right: 0;

    top: 0;

    color: #fff;

    font-size: 27px;

    width: 30px;

    text-align: center;

    cursor: pointer;

    opacity: .6;

    transition: .2s;

}

.modal__hero .login__close:hover {

    opacity: 1;

}

.login__modal .modal__content{

  padding: 25px;

}



.login__fb{}

.login__fb p{}

.login__fb a{

  width: 100%;

  display: block;

  text-align: center;

  color: #3aa15d;

  margin-top: 20px;

  font-weight: 300px;

}

.login__fb a:hover{

  text-decoration: underline;

}

.login__fb .btn-fb{

    display: inline-block;

    position: relative;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    border: 0;

    border-radius: 2px;

    background-color: transparent;

    vertical-align: top;

    white-space: nowrap;

    text-rendering: auto;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    letter-spacing: 0;

    font-weight: 400;

    font-style: normal;

    -webkit-box-shadow: none;

    box-shadow: none;

    padding-top: 10px;

    padding-bottom: 10px;

    color: rgba(0,0,0,.44);

    fill: rgba(0,0,0,.44);

    -webkit-transition: all .2s ease;

    transition: all .2s ease;

    height: 52px;

    background-color: #3b5997;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    width: 100%;

    text-align: left;

    padding: 0 20px;

    color: #fff;

    fill: #fff;

    font-size: 14px;

    font-weight: 400;

    border-radius: 1px;

}

button.btn-fb i {

    height: 28px;

    width: 28px;

    background: #fff;

    display: flex;

    justify-content: flex-end;

    align-items: flex-end;

    color: #3b5997;

    border-radius: 4px;

    font-size: 20px;

    margin-right: 10px;

}



.login__phone{}

.login__phone .login__box{

  padding-top: 8px;

}

.login__phone .login__box label{

  display: block;

  padding-left: 15px;

}

.login__phone .login__box input{

  width: 100%;

      -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    border: 1px solid transparent;

    border-radius: 2px;

    -webkit-box-shadow: none;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    font-size: 16px;

    font-size: 1rem;

    height: 36px;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    line-height: 1.5;

    padding: 6px 15px;

    position: relative;

    vertical-align: top;

    background-color: #fcfcfc;

    border-color: #e5e5e5;

    color: #333;

    fill: #333;

    box-shadow: none;

    max-width: 100%;

    width: 100%;

    font-size: 14px;

    font-weight: 400;

    -webkit-transition: all .1s ease-out;

    transition: all .1s ease-out;

}



.login__phone .btn-number{

  margin-top: 20px;

  margin-bottom: 20px;

  display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    align-item: center;

    width: 100%;

    border-style: solid;

    border-width: 1px;

    color: #fff;

    fill: #fff;

    padding-top: 7px;

    padding-bottom: 7px;

    background-color: #41b468;

    border-color: #3aa15d #338f52 #2d7c48;

    background: -webkit-gradient(linear,left top,left bottom,from(#57c27b),to(#41b468));

    background: linear-gradient(180deg,#57c27b,#41b468);

    -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.4) inset;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

}



.login__phone a{

  color: #333;

  display: block;

  text-align: center;

}

.login__phone a:hover{

  text-decoration: underline;

}







/*checkout*/

.checkout-step{

  padding: 10px 0;

}

.step-left{

  flex: 1;

  padding: 0 5px;

}

.step-right {

    width: 370px;

    flex: 0 0 370px;

    padding: 0 5px;

    max-height: calc(100vh - 86px);

}

.checkout-cart {

    height: 100%;

}

.step-right .inner{

  padding: 20px;

  height: 100%;

}

.step-right .inner .head{

  padding: 0 7px;

  padding-top: 6px;

  padding-bottom: 10px;

}



.step-right .items-cart {

    max-height: calc(100% - 168px);

    height: auto;

}

.step-right .cart-footer .act p{

  color: rgba(0,0,0,.44);

}

.step-right .cart-footer .act a{

  cursor: not-allowed;

  color: var(--main-color)

}



.step-box{}

.step-box .title{

  padding: 15px 20px;

  

}

.step-box .title span{

      width: 32px;

    height: 32px;

    min-width: 32px;

    min-height: 32px;

    background-color: #e5e5e5;

    border-radius: 500em;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    font-size: inherit;

    font-weight: inherit;

}

.step-box.complete .title span{

  background: var(--secondary-color);

  color: #fff;

}

.step-box .title h6{

  margin-left: 15px;

  margin-bottom: 0px;

}

.step-box .step-body{

  padding: 30px;

  border-top: 1px solid #ddd;

}

.fb-verify figure{

  flex: 0 0 50%;

  overflow: hidden;

  margin-bottom: 0;

  position: relative;

}

.fb-verify figure img{
  max-width: 150px!important;
  width: 150px!important;
}
.fb-verify.u-flex {
    align-items: center;
    padding-left: 40px;
}
.step-box .step-body .fb-content{

  padding-left: 30px;

  flex: 1;

}

.step-box .step-body .fb-content .login__fb{

  padding: 20px 0;

}

.step-box .step-body .fb-content .login__phone{

  padding: 0px 0 20px;

}



@media (max-width: 991px){
  .checkout-step.checkout-step-a .row10 {
      flex-wrap: wrap;
  }
  .step-right,
  .step-left {
    width: 100%;
      flex: 0 0 100%;
  }

  .step-right{
    margin-top: 15px;
  }
}


@media (max-width: 575px){
  .fb-verify.u-flex {
      padding-left: 0;
      flex-wrap: wrap;
  }
  .step-box .step-body .fb-content,
  .fb-verify figure{
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
  }
  }
}

.delivery-det {}

.delivery-det .top{

  margin-bottom: 10px;

}

.delivery-det .top li{}

.delivery-det .top li.gray{

  font-size: 15px;

    color: #999;

}

.delivery-det .address{

  margin-bottom: 15px;

}

.delivery-det .address figure{

  margin-right: 15px;

  margin-bottom: 0;

}

.delivery-det .address .text{}

.delivery-det .address .text span{

  display: block;

}

.set-address{}

.set-address a{

display: inline-block;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    border: 0;

    border-radius: 2px;

    background-color: transparent;

    white-space: nowrap;

    letter-spacing: 0;

    font-weight: 400;

    font-style: normal;

    -webkit-box-shadow: none;

    box-shadow: none;

    padding-top: 10px;

    padding-bottom: 10px;

    color: rgba(0,0,0,.44);

    -webkit-transition: all .2s ease;

    transition: all .2s ease;

    border: 1px solid #d9d9d9;

    height: 32px;

    padding: 0 10px;

    font-size: 13px;

    color: #333;

    fill: #333;

    margin-top: 15px;

    margin-bottom: 25px;

    line-height: 30px;

} 



.note__ad{}

.note__ad label{

    display: block;

    color: #333;

    fill: #333;

    font-size: 14px;

    font-weight: 400;

    margin-bottom: 6px;

    letter-spacing: .04em;

    padding-left: 15px;

    padding-right: 15px;

    text-transform: uppercase;

    font-size: 13px;

    letter-spacing: .06em;

    font-weight: 700;

}

.note__ad input{

      -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    border: 1px solid transparent;

    border-radius: 2px;

    -webkit-box-shadow: none;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    font-size: 16px;

    font-size: 1rem;

    height: 36px;

    -webkit-box-pack: start;

    -ms-flex-pack: start;

    justify-content: flex-start;

    line-height: 1.5;

    padding: 0px 15px;

    position: relative;

    vertical-align: top;

    background-color: #fcfcfc;

    border-color: #e5e5e5;

    color: #333;

    fill: #333;

    box-shadow: none;

    max-width: 100%;

    width: 100%;

    font-size: 14px;

    font-weight: 400;

    -webkit-transition: all .1s ease-out;

    transition: all .1s ease-out;

    height: auto;

    min-height: 36px;

    outline: none;

    overflow: auto;

    white-space: nowrap;

    resize: none;

    height: 36px;

}

.conform-order{

  text-align: right;

  padding-top: 40px;

}

.conform-order button{

  height: 40px;

    font-size: 16px;

    border-style: solid;

    border-width: 1px;

    color: #fff;

    fill: #fff;

    background-color: #41b468;

    border-color: #3aa15d #338f52 #2d7c48;

    background: -webkit-gradient(linear,left top,left bottom,from(#57c27b),to(#41b468));

    background: linear-gradient(180deg,#57c27b,#41b468);

    -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.4) inset;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

        width: 310px;

}

.conform-order .terms{    

  margin-top: 15px;

    font-size: 13px;

    color: rgba(0,0,0,.44);

    fill: rgba(0,0,0,.44);

    text-align: right;

}

.conform-order .terms a{

  color: rgba(0,0,0,.44);

  text-decoration: underline;

}



/*profile*/

.profile .categories .parent_ul li a{

  font-weight: 500;

}

.profile {}

.profile__wrap{

  padding: 20px 30px 30px;

}



.profile__wrap .name{

  font-size: 16px;

  font-weight: 700;

  margin-bottom: 20px;

}

.profile__wrap .left{

  flex: 0 0 390px;

  margin-right: 60px

}

.profile__wrap  .mobile label{

  font-weight: 700;

}

.profile__wrap  .mobile{

  margin-bottom: 30px;

}

.profile__wrap  .mobile div{

    padding: 0 15px;

    margin-right: 0;

    background-color: #f5f5f5;

    height: 32px;

    display: flex;

    align-items: center;

}

.deli-poin{}

.deli-poin h6{

  font-weight: 700;

  font-size: 15px;

  margin-bottom: 5px;

}

.deli-poin p{

      font-size: 16px;

    font-weight: 400;

    color: inherit;

    display: block;

}

.profile__wrap.address{

  margin-bottom: 15px;

}

.profile__wrap .address figure{

  margin-right: 15px;

  margin-bottom: 0;

}

.profile__wrap .address .text{}

.profile__wrap .address .text span{

  display: block;

}



.profile__wrap .right{}

.profile__wrap .right figure{

  width: 150px;

    height: 150px;

    background-color: rgba(120,51,146,.24);

    border-radius: 50%;

    overflow: hidden;

    margin-left: auto;

    margin-right: auto;

    color: #fff;

    fill: #fff;

}

.fb-connect {

  text-align: center;

}

.fb-connect button{

      border: none;

    background-color: #3b5997;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    text-align: left;

    padding: 5px 15px;

    color: #fff;

    fill: #fff;

    border-radius: 3px;

}

.fb-connect button img{

  width: 13px;

  margin-right: 7px;

}



.order-table{

  width: 100%;

}

.order-table thead td{

  border-top: 0;

      -webkit-box-flex: 1;

    -ms-flex: 1;

    flex: 1;

    display: table-cell;

    padding-right: 15px;

    line-height: 1.3;

    font-size: 13px;

    color: rgba(0,0,0,.4);

    font-weight: 400;

    text-align: left;

    max-width: 20%;

    min-width: 20%;

    padding-top: 0;

    padding-bottom: 0;

    flex: 1;

}



.order-table tbody td{

  border-top: 0;

  font-size: 13px; 

  max-width: 20%;

  min-width: 20%;

  padding-top: 0;

  padding-bottom: 0;

  flex: 1;

}

 

.order-table tr{

  padding: 20px 0; 

  display: flex;

}

.order-table tr:hover{

  background: rgba(0,0,0,.04);

}

.order-table button{

      display: inline-block;

    position: relative;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    border: 0;

    background-color: transparent;

    vertical-align: top;

    white-space: nowrap;

    text-rendering: auto;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    letter-spacing: 0;

    font-weight: 400;

    font-style: normal;

    -webkit-box-shadow: none;

    box-shadow: none;

    padding-top: 10px;

    padding-bottom: 10px;

    color: rgba(0,0,0,.44);

    fill: rgba(0,0,0,.44);

    -webkit-transition: all .2s ease;

    transition: all .2s ease;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;

    -webkit-box-orient: horizontal;

    -webkit-box-direction: normal;

    -ms-flex-flow: row wrap;

    flex-flow: row wrap;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    padding: 0 10px;

    height: 24px;

    border-radius: 2px;

    font-size: 13px;

}



.order-table .btn-det{

  border-style: solid;

    border-width: 1px;

    color: #fff;

    fill: #fff;

    background-color: #333;

    border-color: #262626 #1a1a1a #0d0d0d;

    background: -webkit-gradient(linear,left top,left bottom,from(#616161),to(#333));

    background: linear-gradient(180deg,#616161,#333);

    -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.4) inset;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

}

.order-table .btn-play{

    border-style: solid;

    border-width: 1px;

    color: #fff;

    fill: #fff;

    background-color: #41b468;

    border-color: #3aa15d #338f52 #2d7c48;

    background: -webkit-gradient(linear,left top,left bottom,from(#57c27b),to(#41b468));

    background: linear-gradient(180deg,#57c27b,#41b468);

    -webkit-box-shadow: 0 1px 0 hsla(0,0%,100%,.4) inset;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);

}



.address__add{}

.address__add p{}

.address__add .btn_add{}

.address__add .btn_add .button{

    display: inline-block;

    position: relative;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    border: 0;

    border-radius: 2px;

    box-shadow: none;

    padding-top: 10px;

    padding-bottom: 10px;

    color: rgba(0,0,0,.44);

    transition: all .2s ease;

    border: 1px solid #d9d9d9;

    height: 32px;

    padding: 0 10px;

    font-size: 13px;

    color: #333;

    fill: #333;

    line-height: 2.2

}





.address__form{

    position: relative;

    max-width: 735px;

    background-color: #f5f5f5;

    padding: 30px 25px;

    font-style: normal;

    line-height: 1.5;

    background-color: #fff;

    border: 1px solid #e5e5e5;

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.1);

    box-shadow: 0 1px 3px rgba(0,0,0,.1);

}

.address__form .form__item{

  margin-bottom: 15px;

}

.address__form .form__item select{

  display: block;

  width: 100%;

  height: 40px;

  border: 1px solid #e8e8e8;

  padding: 0 10px;

}

.address__form .form__item label{

  display: block;

  width: 100%;

  text-transform: uppercase;

  font-weight: 700;

  font-size: 13px;

  padding-left: 15px;

}

.address__form .form__item input{

  display: block;

  width: 100%;

    height: 40px;

  border: 1px solid #e8e8e8;

  padding: 0 10px;

}

.address__form .form__item textarea{

  display: block;

  width: 100%;

  border: 1px solid #e8e8e8;

  padding: 10px;

}



select:focus, textarea:focus{

  outline: none;

}



.address__form .form__act{

  text-align: right;

}

.address__form .form__act button{

      display: inline-block;

    position: relative;

    text-align: center;

    text-decoration: none;

    cursor: pointer;

    border: 0;

    border-radius: 2px;

    background-color: transparent;

    vertical-align: top;

    white-space: nowrap;

    text-rendering: auto;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    letter-spacing: 0;

    font-weight: 400;

    font-style: normal;

    -webkit-box-shadow: none;

    box-shadow: none;

    padding-top: 10px;

    padding-bottom: 10px;

    color: rgba(0,0,0,.44);

    fill: rgba(0,0,0,.44);

    -webkit-transition: all .2s ease;

    transition: all .2s ease;

}

.address__form .form__act .save{

  margin-right: 5px;

    color: #41b468;

    border: 1px solid #48d277;

    height: 32px;

    padding: 0 10px;

    font-size: 13px;

}

.address__form .form__act .cancel{

  border: 1px solid #d9d9d9;

    height: 32px;

    padding: 0 10px;

    font-size: 13px;

    color: #333;

    fill: #333;

}



@media (max-width: 767px){

  .profile__wrap .left {

    flex: 0 0 100%;

  }

  .profile-content.u-flex {

    flex-wrap: wrap;

}

}

.step-box .title{
  position: relative;
}
.ctrl-coll {
    position: absolute;
    right: 12px;
    top: 18px;
    height: 24px;
    width: 24px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    display: none;
    cursor: pointer;

}
.complete  .step-body{
  display: none;
}
.complete .ctrl-coll {
  display: flex;
}