@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
*********************************/

* {
	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 {
	margin-bottom: 0px;
}


::selection {
	background: #fde0db;
	color: #B62937;
}

p::selection {
	background: #fde0db;
}

h1, h2, h3, h4, h5, h6 {
	color: #282828;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
	text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}

::-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;
}

::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;
}

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

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	z-index: 10;
}

.top_nav {
	width: 100%;
	height: 50px;
	background: #fff;
	background-color: #123374;
}

.social-icon{
	width: 35px;
	height: 35px;
	background-color: #B62937;
}

.social-icon i{
	font-weight: 500;
	font-size: 16px;
	color: #fff;
	margin-top: 8px;
}

.social-icon:hover{
	background-color: #123374;
}

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

.main_nav_container {
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
}

.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: 13px;
	font-weight: 500;
	text-transform: uppercase;
	padding: 20px;
	-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: #B62937;
}

.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: 10px;
	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%);
}

/*********************************
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;
}

.red_button {
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	flex-direction: column;
	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: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%;
}

.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;
}