@charset "utf-8";
/* CSS Document */

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

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Home
	3.1 Currency
	3.2 Language
	3.3 Account
	3.4 Main Navigation
	3.5 Hamburger Menu
	3.6 Logo
	3.7 Main Slider
4. Banner
5. New Arrivals
	5.1 New Arrivals Sorting
	5.2 New Arrivals Products Grid
6. Deal of the week
7. Best Sellers
	7.1 Slider Nav
8. Benefit
9. Blogs
10. Newsletter
11. Footer



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

/***********
1. Fonts
***********/

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,900");

/*********************************
2. Body and some general stuff
*********************************/
html {
  min-height: 100%;
  position: relative;
}
* {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 23px;
  font-weight: 400;
  background: #ffffff;
  color: #1e1e27;
}
div {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
ul {
  list-style: none;
  margin-bottom: 0px;
}
p {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 500;
  color: #989898;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
p a {
  display: inline;
  position: relative;
  color: inherit;
  border-bottom: solid 2px #fde0db;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
a,
a:hover,
a:visited,
a:active,
a:link {
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

p a:active {
  position: relative;
  color: #ff6347;
}
p a:hover {
  color: #ff6347;
  background: #fde0db;
}
p a:hover::after {
  opacity: 0.2;
}
::selection {
  background: #fde0db;
  color: #ff6347;
}
p::selection {
  background: #fde0db;
}
h1 {
  font-size: 72px;
}
h2 {
  font-size: 50px;
}
h3 {
  font-size: 28px;
}
h4 {
  font-size: 24px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 14px;
}
h2 {
  color: #e3041d;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}
h1,
h3,
h4,
h5,
h6 {
  color: #282828;
  -webkit-font-smoothing: antialiased;
  -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection {
}
::-webkit-input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
:-moz-placeholder /* older Firefox*/ {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
::-moz-placeholder /* Firefox 19+ */ {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}
:-ms-input-placeholder {
  font-size: 16px !important;
  font-weight: 500;
  color: #777777 !important;
}

.form-control {
  color: #db5246;
}
section {
  display: block;
  position: relative;
  box-sizing: border-box;
}
.clear {
  clear: both;
}
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  zoom: 1;
}
.float_left {
  float: left;
}
.float_right {
  float: right;
}
.trans_200 {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.trans_300 {
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.trans_400 {
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}
.trans_500 {
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
.fill_height {
  height: 100%;
}
.super_container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 50px;
}

/*********************************
3. Home
*********************************/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  z-index: 10;
}
.top_nav {
  width: 100%;
  height: 30px;
  background: #fafafa;
}
.top_nav_left {
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  color: #b5aec4;
  text-transform: uppercase;
}

/*********************************
3.1 Currency
*********************************/

.currency {
  display: inline-block;
  position: relative;
  min-width: 50px;
  border-right: solid 1px #33333b;
  padding-right: 20px;
  padding-left: 20px;
  text-align: center;
  vertical-align: middle;
  background: #1e1e27;
}
.currency > a {
  display: block;
  color: #b5aec4;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  text-transform: uppercase;
}
.currency > a > i {
  margin-left: 8px;
}
.currency:hover .currency_selection {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.currency_selection {
  display: block;
  position: absolute;
  right: 0;
  top: 120%;
  margin: 0;
  width: 100%;
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: all 0.3s ease;
}
.currency_selection li {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 50px;
}
.currency_selection li a {
  display: block;
  color: #232530;
  border-bottom: solid 1px #dddddd;
  font-size: 13px;
  text-transform: uppercase;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: all 0.3s ease;
}
.currency_selection li a:hover {
  color: #b5aec4;
}
.currency_selection li:last-child a {
  border-bottom: none;
}

/*********************************
3.2 Language
*********************************/

.language {
  display: inline-block;
  position: relative;
  min-width: 50px;
  border-right: solid 1px #33333b;
  padding-right: 20px;
  padding-left: 20px;
  text-align: center;
  vertical-align: middle;
  background: #1e1e27;
}
.language > a {
  display: block;
  color: #b5aec4;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  font-size: 13px;
}
.language > a > i {
  margin-left: 8px;
}
.language:hover .language_selection {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.language_selection {
  display: block;
  position: absolute;
  right: 0;
  top: 120%;
  margin: 0;
  width: 100%;
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: all 0.3s ease;
}
.language_selection li {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 50px;
}
.language_selection li a {
  display: block;
  color: #232530;
  border-bottom: solid 1px #dddddd;
  font-size: 13px;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: all 0.3s ease;
}
.language_selection li a:hover {
  color: #b5aec4;
}
.language_selection li:last-child a {
  border-bottom: none;
}

/*********************************
3.3 Account
*********************************/

.account {
  display: inline-block;
  position: relative;
  min-width: 50px;
  padding-left: 20px;
  text-align: center;
  vertical-align: middle;
  background: #1e1e27;
}
.account > a {
  display: block;
  color: #b5aec4;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  font-size: 13px;
}
.account > a > i {
  margin-left: 8px;
}
.account:hover .account_selection {
  visibility: visible;
  opacity: 1;
  top: 100%;
}
.account_selection {
  display: block;
  position: absolute;
  right: 0;
  top: 120%;
  margin: 0;
  width: 100%;
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  z-index: 1;
  box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: all 0.3s ease;
}
.account_selection li {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 50px;
}
.account_selection li a {
  display: block;
  color: #232530;
  border-bottom: solid 1px #dddddd;
  font-size: 14px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.account_selection li a:hover {
  color: #b5aec4;
}
.account_selection li:last-child a {
  border-bottom: none;
}
.account_selection li a i {
  margin-right: 10px;
}

/*********************************
3.4 Main Navigation
*********************************/

.main_nav_container {
  width: 100%;
  background: #ffffff;
  box-shadow: 0 3px 5px -2px rgb(0 0 0 / 20%);
  height: 80px;
}
.navbar {
  width: auto;
  height: 100px;
  float: right;
  padding-left: 0px;
  padding-right: 0px;
}
.navbar_menu li {
  display: inline-block;
}
.navbar_menu li a {
  display: block;
  color: #1e1e27;
  font-size: 20px;
  /*font-weight: 500;
	text-transform: uppercase;*/
  padding: 15px;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.navbar_menu li a:hover {
  color: #fe4c50;
}
.navbar_user {
  margin-left: 37px;
}
.navbar_user li {
  display: inline-block;
  text-align: center;
}
.navbar_user li a {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 40px;
  height: 40px;
  color: #1e1e27;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.navbar_user li a:hover {
  color: #b5aec4;
}
.checkout a {
  background: #eceff6;
  border-radius: 50%;
}
.checkout_items {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -9px;
  left: 22px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fe4c50;
  font-size: 12px;
  color: #ffffff;
}

/*********************************
3.5 Hamburger Menu
*********************************/

.hamburger_container {
  display: none;
  margin-left: 40px;
}
.hamburger_container i {
  font-size: 24px;
  color: #1e1e27;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.hamburger_container:hover i {
  color: #b5aec4;
}
.hamburger_menu {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: rgba(255, 255, 255, 0.95);
  z-index: 10;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.hamburger_menu.active {
  right: 0;
}
.fs_menu_overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}
.hamburger_close {
  position: absolute;
  top: 26px;
  right: 95px;
  padding: 10px;
  z-index: 1;
}
.hamburger_close i {
  font-size: 24px;
  color: #1e1e27;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.hamburger_close:hover i {
  color: #b5aec4;
}
.hamburger_menu_content {
  padding-top: 100px;
  width: 100%;
  height: 100%;
  padding-right: 20px;
}
.menu_item {
  display: block;
  position: relative;
  border-bottom: solid 1px #b5aec4;
  vertical-align: middle;
}
.menu_item > a {
  display: block;
  color: #1e1e27;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  text-transform: uppercase;
}
.menu_item > a:hover {
  color: #b5aec4;
}
.menu_item > a > i {
  margin-left: 8px;
}
.menu_item.active .menu_selection {
  display: block;
  visibility: visible;
  opacity: 1;
}
.menu_selection {
  margin: 0;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  z-index: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.menu_selection li {
  padding-left: 10px;
  padding-right: 10px;
  line-height: 50px;
}
.menu_selection li a {
  display: block;
  color: #232530;
  border-bottom: solid 1px #dddddd;
  font-size: 13px;
  text-transform: uppercase;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -ms-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: all 0.3s ease;
}
.menu_selection li a:hover {
  color: #b5aec4;
}
.menu_selection li:last-child a {
  border-bottom: none;
}

/*********************************
3.6 Logo
*********************************/

.logo_container {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 15px;
}
.logo_container a {
  font-size: 24px;
  color: #1e1e27;
  font-weight: 700;
  text-transform: uppercase;
}
.logo_container a span {
  color: #fe4c50;
}

/*********************************
3.7 Main Slider
*********************************/

.main_slider {
  width: 100%;
  height: 700px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin-top: 150px;
}
.main_slider_content {
  width: 60%;
}
.main_slider_content h6 {
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 29px;
}
.main_slider_content h1 {
  font-weight: 400;
  line-height: 1;
}

.shop_now_button {
  width: 140px;
  margin-top: 32px;
}

/*********************************
4. Banner
*********************************/

.banner {
  width: 100%;
  margin-top: 30px;
}
.banner_item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 265px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.banner_category {
  height: 50px;
  background: #ffffff;
  min-width: 180px;
  padding-left: 25px;
  padding-right: 25px;
}
.banner_category a {
  display: block;
  color: #1e1e27;
  text-transform: uppercase;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  line-height: 50px;
  width: 100%;
  -webkit-transition: color 0.3s ease;
  -moz-transition: color 0.3s ease;
  -ms-transition: color 0.3s ease;
  -o-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.banner_category a:hover {
  color: #b5aec4;
}

/*********************************
5. New Arrivals
*********************************/

.new_arrivals {
  width: 100%;
}
.new_arrivals_title {
  margin-top: 74px;
}

/*********************************
5.1 New Arrivals Sorting
*********************************/

.new_arrivals_sorting {
  display: inline-block;
  border-radius: 3px;
  margin-top: 59px;
  overflow: visible;
}
.grid_sorting_button {
  height: 40px;
  min-width: 102px;
  padding-left: 25px;
  padding-right: 25px;
  cursor: pointer;
  border: solid 1px #ebebeb;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  background: #ffffff;
  border-radius: 3px;
  margin: 0;
  float: left;
  margin-left: -1px;
}
.grid_sorting_button:first-child {
  margin-left: 0px;
}

.grid_sorting_button.active:hover {
  background: #fe7c7f !important;
}
.grid_sorting_button.active {
  color: #ffffff;
  background: #fe4c50;
}

/*********************************
5.2 New Arrivals Products Grid
*********************************/

.product-grid {
  width: 100%;
  margin-top: 57px;
}
.product-item {
  width: 20%;
  height: 380px;
  cursor: pointer;
}
.product-item::after {
  display: block;
  position: absolute;
  top: 0;
  left: -1px;
  width: calc(100% + 1px);
  height: 100%;
  pointer-events: none;
  content: "";
  border: solid 2px rgba(235, 235, 235, 0);
  border-radius: 3px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.product-item:hover::after {
  box-shadow: 0 25px 29px rgba(63, 78, 100, 0.15);
  border: solid 2px rgba(235, 235, 235, 1);
}
.product {
  width: 100%;
  height: 340px;
  border-right: solid 1px #e9e9e9;
}
.product_image {
  width: 100%;
}
.product_image img {
  width: 100%;
}
.product_info {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}
.product_name {
  margin-top: 27px;
}
.product_name a {
  color: #1e1e27;
  line-height: 20px;
}
.product_name:hover a {
  color: #b5aec4;
}
.discount .product_info .product_price {
  font-size: 14px;
}
.product_price {
  font-size: 16px;
  color: #fe4c50;
  font-weight: 600;
}
.product_price span {
  font-size: 12px;
  margin-left: 10px;
  color: #b5aec4;
  text-decoration: line-through;
}
.product_bubble {
  position: absolute;
  top: 15px;
  width: 50px;
  height: 22px;
  border-radius: 3px;
  text-transform: uppercase;
}
.product_bubble span {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}
.product_bubble_right::after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: 6px;
  right: auto;
  top: auto;
  bottom: -6px;
  border: 6px solid;
}
.product_bubble_left::after {
  content: " ";
  position: absolute;
  width: 0;
  height: 0;
  left: auto;
  right: 6px;
  bottom: -6px;
  border: 6px solid;
}
.product_bubble_red::after {
  border-color: transparent transparent transparent #fe4c50;
}
.product_bubble_left::after {
  border-color: #51a042 #51a042 transparent transparent;
}
.product_bubble_red {
  background: #fe4c50;
}
.product_bubble_green {
  background: #51a042;
}
.product_bubble_left {
  left: 15px;
}
.product_bubble_right {
  right: 15px;
}
.add_to_cart_button {
  width: 100%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.add_to_cart_button a {
  font-size: 12px;
  font-weight: 600;
}
.product-item:hover .add_to_cart_button {
  visibility: visible;
  opacity: 1;
}
.favorite {
  position: absolute;
  top: 15px;
  right: 15px;
  color: #b9b4c7;
  width: 17px;
  height: 17px;
  visibility: hidden;
  opacity: 0;
}
.favorite_left {
  left: 15px;
}
.favorite.active {
  visibility: visible;
  opacity: 1;
}
.product-item:hover .favorite {
  visibility: visible;
  opacity: 1;
}
.favorite.active::after {
  font-family: "FontAwesome";
  content: "\f004";
  color: #fe4c50;
}
.favorite::after {
  font-family: "FontAwesome";
  content: "\f08a";
}
.favorite:hover::after {
  color: #fe4c50;
}

/*********************************
6. Deal of the week
*********************************/

.deal_ofthe_week {
  width: 100%;
  margin-top: 41px;
  background: #f2f2f2;
}
.deal_ofthe_week_img {
  height: 540px;
}
.deal_ofthe_week_img img {
  height: 100%;
}
.deal_ofthe_week_content {
  height: 100%;
}
.section_title {
  display: inline-block;
  text-align: center;
  z-index: -1;
}
.section_title h2 {
  display: inline-block;
}

.timer {
  margin-top: 66px;
}
.timer li {
  display: inline-block;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ffffff;
  margin-right: 10px;
}
.timer li:last-child {
  margin-right: 0px;
}
.timer_num {
  font-size: 48px;
  font-weight: 600;
  color: #fe4c50;
  margin-top: 10px;
}
.timer_unit {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #51545f;
}
.deal_ofthe_week_button {
  width: 140px;
  background: #1e1e27;
  margin-top: 52px;
}
.deal_ofthe_week_button:hover {
  background: #2b2b34 !important;
}

/*********************************
7. Best Sellers
*********************************/

.product_slider_container {
  width: 100%;
  height: 340px;
  margin-top: 73px;
}
.product_slider_container::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #ffffff;
  content: "";
  z-index: 1;
}
.product_slider {
  overflow: visible !important;
}
.product_slider_item .product-item {
  height: 340px;
}
.product_slider_item {
  width: 20%;
}
.product_slider_item .product-item {
  width: 100% !important;
}

/*********************************
7.1 Slider Nav
*********************************/

.product_slider_nav {
  position: absolute;
  width: 30px;
  height: 70px;
  background: #d3d3d6;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.product_slider_container:hover .product_slider_nav {
  visibility: visible;
  opacity: 1;
}
.product_slider_nav i {
  color: #ffffff;
  font-size: 12px;
}
.product_slider_nav_left {
  top: 50%;
  left: 0;
}
.product_slider_nav_right {
  top: 50%;
  right: 0;
}

/*********************************
8. Benefit
*********************************/

.benefit {
  margin-top: 74px;
}
.benefit_row {
  padding-left: 15px;
  padding-right: 15px;
}
.benefit_col {
  padding-left: 0px;
  padding-right: 0px;
}
.benefit_item {
  height: 100px;
  background: #f3f3f3;
  border-right: solid 1px #ffffff;
  padding-left: 25px;
}
.benefit_col:last-child .benefit_item {
  border-right: none;
}
.benefit_icon i {
  font-size: 30px;
  color: #fe4c50;
}
.benefit_content {
  padding-left: 22px;
}
.benefit_content h6 {
  text-transform: uppercase;
  line-height: 18px;
  font-weight: 500;
  margin-bottom: 0px;
}
.benefit_content p {
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 0px;
  color: #51545f;
}

/*********************************
9. Blogs
*********************************/

.blogs {
  margin-top: 72px;
}
.blogs_container {
  margin-top: 53px;
}
.blog_item {
  height: 255px;
  width: 100%;
}
.blog_background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.blog_content {
  position: absolute;
  top: 30px;
  left: 30px;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  background: rgba(255, 255, 255, 0.9);
  padding-left: 10px;
  padding-right: 10px;
  visibility: hidden;
  opacity: 0;
  transform-origin: center center;
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -o-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.blog_item:hover .blog_content {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}
.blog_title {
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0px;
}
.blog_meta {
  font-size: 12px;
  line-height: 30px;
  font-weight: 400;
  text-transform: uppercase;
  color: #51545f;
  margin-bottom: 0px;
  margin-top: 3px;
  letter-spacing: 1px;
}
.blog_more {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #fe4c50;
  border-bottom: solid 1px #fe4c50;
  margin-top: 12px;
}
.blog_more:hover {
  color: #fe7c7f;
}

/*********************************
10. Newsletter
*********************************/

.newsletter {
  width: 100%;
  background: #f2f2f2;
   margin-bottom: 5px;
  position: fixed;
  bottom: 0;
}
.newsletter_text {
  height: 120px;
}
.newsletter_text h4 {
  margin-bottom: 0px;
  line-height: 24px;
}
.newsletter_text p {
  margin-bottom: 0px;
  line-height: 1.7;
  color: #51545f;
}
.newsletter_form {
  height: 120px;
}
#newsletter_email {
  width: 300px;
  height: 46px;
  background: #ffffff;
  border: none;
  padding-left: 20px;
}
#newsletter_email:focus {
  border: solid 1px #7f7f7f !important;
  box-shadow: none !important;
}
:focus {
  outline: none !important;
}
#newsletter_email::-webkit-input-placeholder {
  font-size: 14px !important;
  font-weight: 400;
  color: #b9b4c7 !important;
}
#newsletter_email:-moz-placeholder /* older Firefox*/ {
  font-size: 14px !important;
  font-weight: 400;
  color: #b9b4c7 !important;
}
#newsletter_email::-moz-placeholder /* Firefox 19+ */ {
  font-size: 14px !important;
  font-weight: 400;
  color: #b9b4c7 !important;
}
#newsletter_email:-ms-input-placeholder {
  font-size: 14px !important;
  font-weight: 400;
  color: #b9b4c7 !important;
}

.newsletter_submit_btn {
  width: 160px;
  height: 46px;
  border: none;
  background: #fe4c50;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  cursor: pointer;
}
.newsletter_submit_btn:hover {
  background: #fe7c7f;
}

/*********************************
11. Footer
*********************************/
.footer_nav_container {
  height: 20;          /* deja que se ajuste al contenido */
  display: block;        /* evita flexbox que centra verticalmente */
  padding-top: 0;        /* sin espacio extra arriba */
  text-align: center;    /* centrado horizontal */
}

.cr {
  margin: 0;             /* elimina márgenes extra */
  font-size: 0.85rem;
}

.footer_nav li {
  display: inline-block;
  margin-right: 45px;
}
.footer_nav li:last-child {
  margin-right: 0px;
}
.footer_nav li a,
.cr {
  font-size: 14px;
  color: #51545f;
  line-height: 80px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}
.footer_nav li a:hover,
.cr a,
.cr i {
  color: #fe4c50;
}
.footer_social {
  height: 130px;
}
.footer_social ul li {
  display: inline-block;
  margin-right: 10px;
}
.footer_social ul li:last-child {
  margin-right: 0px;
}
.footer_social ul li a {
  color: #51545f;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  padding: 10px;
}
.footer_social ul li:last-child a {
  padding-right: 0px;
}
.footer_social ul li a:hover {
  color: #fe4c50;
}

/*pa cambiar el style del scroll*/
::-webkit-scrollbar {
  width: 8px;
  height: 2px;
}

::-webkit-scrollbar-thumb {
  border: 1px solid #666666;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #666666;
  /*background: rgba(0,0,0,.1);*/
}

::-webkit-scrollbar-thumb:hover {
  background: grey;
}
/**********************************/

/*****CSS CARGANDO PAGINA*************/
.cargando {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #f7f7f7;
  z-index: 999999;
}
.cargando .loader-inner {
  position: absolute;
  border: 2px solid #f50136;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  border-right: 0;
  border-top-color: transparent;
  -webkit-animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
    infinite;
  animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

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

/************Mis css Generales*****************/
hr {
  background-color: #e3041d;
  height: 0.1em;
  max-width: 50%;
  margin: 0 auto;
}
.btn_raza {
  background: #fe4c50 !important;
  color: #ffffff;
  /* text-transform: uppercase; para convertir a mayuscula*/
  border: none;
  cursor: pointer;
}
.btn_raza:hover {
  cursor: pointer !important;
  color: #fff !important;
  background: #e3041d !important;
}

.btn_puntos {
  background: #e3041d !important;
  color: #ffffff;
  /* text-transform: uppercase; para convertir a mayuscula*/
  width: 100%;
  border: none;
  height: 46px;
  cursor: pointer;
  padding: 10px 25px;
}
.btn_puntos:hover {
  cursor: pointer !important;
  color: #fff !important;
  background: #fe4c50 !important;
}

#mi_cuenta {
  color: #b5aec4 !important;
}
#mi_cuenta:hover {
  text-decoration: underline !important;
  color: #fe4c50 !important;
}
#titleSpecial {
  font-size: 18px !important;
  color: #777777;
}
#hrSpecial {
  background-color: #e3041d;
  height: 0.2em;
  margin: 0 auto;
  max-width: 100%;
}
#perfilUser {
  color: #fe4c50 !important;
}
#titleRegister {
  color: #fe4c50 !important;
  font-size: 18px;
}
.btnEnviarForm {
  background-color: #e3041d;
  color: #fff;
}
.btnEnviarForm:hover {
  cursor: pointer;
  background: #fe4c50 !important;
}

.red_button {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 40px;
  background: #fe4c50;
  border-radius: 3px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.red_button a:hover {
  background: #fe7c7f !important;
}
.red_button a {
  display: block;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  width: 100%;
}
/******estilos de los Inputs para el formulario******/

/* textarea,
select {
  margin: 15px 0;
  width: 100%;
  /*display: block;*/
 /* border: none;
  padding: 10px 0;
  border-bottom: solid 1px red;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, red 2%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, red 2%);
  background-position: -850px 0;
  background-size: 850px 100%;
  background-repeat: no-repeat;
  color: red;
} */




.MiLinkActivo {
  color: #611232 !important;
  font-weight: bold;
}

.fa-power-off:hover {
  color: #33333b;
}

.card_title {
  color: #611232 !important;
}
.p_puntos {
  font-size: 18px;
  color: #611232 !important;
  opacity: 0.7;
}
#titleArticulo {
  color: #611232 !important;
}
.fa-angle-left:hover {
  cursor: pointer;
  color: #fe4c50 !important;
}

/*animacion hover al pasar cursor sobre los productos*/
@keyframes myanimation {
  50% {
    transform: scale(1.05);
  }
}
.Products:hover {
  cursor: pointer;
  animation-name: myanimation;
  animation-duration: 0.3s;
}
/***/

/*****Animacion al pasar el cursor sobre las imagenes de los productos, descripcion del producto.*****/
@keyframes descriptionProductsAnimation {
  50% {
    transform: scale(1.03);
  }
}
.hoverAnimationProduct:hover {
  cursor: pointer;
  animation-name: descriptionProductsAnimation;
  animation-duration: 0.3s;
}

#theadTableSpecial {
  background-color: #ff4545 !important;
  color: #fff;
}
.btn-success:hover {
  cursor: pointer !important;
}
.aumentarCant {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #28a745;
  border-color: #28a745;
  text-align: center;
  line-height: 40px;
  color: white;
}
.restarCant {
  display: inline-block;
  width: 40px; /* Ajusta el ancho según tus necesidades */
  height: 40px; /* Ajusta el alto según tus necesidades */
  border-radius: 50%; /* Convierte el botón en un círculo */
  background-color: red; /* Establece el color de fondo a rojo */
  text-align: center; /* Centra el contenido horizontalmente */
  line-height: 40px; /* Centra el contenido verticalmente */
  color: white; /* Establece el color del ícono a blanco */
}
.btn {
  cursor: pointer !important;
}
.bi-plus {
  color: white;
  font-size: 20px;
}
.bi-dash {
  color: #fff !important;
  font-size: 20px;
}
#totalPuntos {
  font-weight: 900;
  float: right;
  color: #610707 !important;
}

.card {
  box-shadow: 0px 17px 26px -8px rgba(151, 172, 193, 0.6);
}
.mi_logo {
  width: 60px;
  width: 60px;
  transition: transform ease 0.3s;
  margin-top: -20px;
  background: #ffc7cd;
  border-radius: 50%;
  padding: 7px;
}
.mi_logo:hover {
  transform: scale(1.2);
}
.yesDelete {
  margin: 0px 30px;
  color: #fff;
  padding: 0px 50px;
  border-radius: 20px;
  margin: 0px 30px;
}

.noDelete {
  color: #fff;
  padding: 0px 50px;
  border-radius: 20px;
}

.bi-arrow-right-circle {
  padding: 5px 15px;
  font-size: 20px;
}
.bi-arrow-left-circle {
  padding: 5px 15px;
  font-size: 20px;
}