/*-----------------------------------------------------------
#0. Other
-----------------------------------------------------------*/
body {
	background-color: #fff;
	overflow-x: hidden;
	font-family: 'Josefin Sans', sans-serif;
}

html {
	min-width: 320px;
}


/*-----------------------------------------------------------
#1 - Search, Logo Section
-----------------------------------------------------------*/
.navbar-brand {
	font-weight: 700;
	font-size: 28px;
}

.search-area {
	background-color: #eee;
}

	.search-area ul {
		padding: 0;
	}

	.navbar-form .form-control {
		width: 350px;
	}

.shop-user {
	color: #888;
}

	.shop-user li {
		color: #999;
	}

	.shop-user li:hover {
		color: #f4b956;
		-webkit-transition-duration: 0.1s; /* Safari */
    	transition-duration: 0.1s;
	}

	.shop-user ul li {
		display: inline-block;
		font-size: 13px;
	}

	.shop-user>.nostyle {
		color: #999;			
	}

	.shop-user .nostyle:hover {
		color: #999;				
	}


/*-----------------------------------------------------------
#2 - Navigation Section
-----------------------------------------------------------*/
.menu-section {
	background-color: #fff;
	padding: 25px 10px 5px 10px;
}

.nav, .navbar-default {
	background-color: #fff;
	border: 0;	
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
	background-color: #fff;
	-webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}

.logo {	
	background-position: left center;
	background-repeat: no-repeat;	
	background-size: cover;
	background-image: url(../images/logo.png);
	width: 47px;
	height: 47px;
	margin: 0;
	padding: 0;
}


/*-----------------------------------------------------------
#3 - Banner Section
-----------------------------------------------------------*/
.banner {		
	background-position: left center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #fff;
	background-image: url(../images/banner.jpg);
	height: 526px;	
	padding: 100px 0 0 0;
	width: auto;
}

	.banner h1 {
		font-size: 48px;
		font-weight: 700;		
	}

	.banner p {
		font-size: 16px;
	}

	.banner .btn-default {
		border: 1px solid #fff;
	}

	.banner .btn-default:hover {
		border: 1px solid #f4b956;
		-webkit-transition-duration: 0.1s; /* Safari */
    	transition-duration: 0.1s;
	}


/*-----------------------------------------------------------
#4 - Product List Section
-----------------------------------------------------------*/
.product {
	margin: 20px 0;
}

	.product b {
		font-size: 25px;
		color: #f66875;
	}

	.product s {
		font-size: 22px;
		color: #ccc;
	}

	.product-hover:hover {
		opacity: 0.8;
		-webkit-transition-duration: 0.1s; /* Safari */
    	transition-duration: 0.1s;
	}

.product-list h1 {
	color: #333;
}

.product-list h1:hover {
	color: #f4b956;
	text-decoration: none;
	-webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}

.product-list a:hover {
	color: #f4b956;
	text-decoration: none;
	-webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}

.product-list img {
	width: 240px;
	height: 240px;
	border: 3px solid #f7f7f7;
}

.product-list li {
	display: inline-block;
	padding: 0 3px;
	margin: 0;
}

.product-list .sale {
	background-color: #f4b956;	
	border-radius: 15px;
	position: absolute;
	width: 70px;
	z-index: 1;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}

.product-list i {
	color: #fff;
	font-size: 14px;
	font-style: normal;
	padding: 5px;
	margin: 2%;
	text-transform: uppercase;	
}


/*-----------------------------------------------------------
#5 - Background image section
-----------------------------------------------------------*/
.background {
	width: auto;
	height: 428px;
	background-image: url(../images/background.jpg);	
	filter: alpha(opacity=50); /* For IE8 and earlier */
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	-ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
	background-color: transparent;
	background-attachment: fixed;
	color: #000;
	margin: 20px 0;
	padding: 0;
	overflow: hidden;
	content: ' ';
	z-index: 1;
}

.content {
	background-color: rgba(255,255,255,0.7);
	width: auto;
	height: 428px;		
	filter: alpha(opacity=50); /* For IE8 and earlier */
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	-ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;	
	background-attachment: fixed;
	color: #000;
	margin: 0;
	padding: 0;
	z-index: 1;
}

	.content section {
		padding: 100px 0;
	}

	.content h1 {
		font-size: 48px;
	}

	.content p {
		font-size: 18px;
	}


/*-----------------------------------------------------------
#6 - Main Footer Section
-----------------------------------------------------------*/
.footer .title {
	font-weight: 700;
	font-size: 17px;
	text-transform: uppercase;
}

.footer li {
	display: block;
	margin: 0 0 0 -40px;
	font-size: 16px;
	line-height: 30px;
}

	.footer li a {
		color: #333;
	}

	.footer li a:hover {
		text-decoration: none;
		color: #f4b956;
	}
.footer p {
	line-height: 30px;
}

.footer .contact li {
	height: 40px;
}

.footer .social li {
	margin-right: 70px;
	color: #777;
	display: inline-block;
}

	.footer .social li:hover {
		color: #f4b956;
	}

.contact p {
	line-height: 20px;
}

.contact i {
	font-family: 'Josefin Sans', sans-serif;
	font-style: normal;
	font-size: 16px;
}


/*-----------------------------------------------------------
#7 - Secondary footer section
-----------------------------------------------------------*/
.footer-bottom {
	border-top: 1px solid #ccc;
}

.fcontent {
	padding: 30px 0;
	color: #ccc;
}


/*-----------------------------------------------------------
#8 - Hacks section
-----------------------------------------------------------*/
.vertical-align {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}


/*-----------------------------------------------------------
#9 - Other section
-----------------------------------------------------------*/
.btn {
	padding: 12px 30px;
	font-size: 18px;
	margin: 4px;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}

.btn-default {
	color: #fff;
	background-color: #f66875;
	border: 0;
}

	.btn-default:hover {
		background-color: #f4b956;
		color: #fff;
		border: 0;
		-webkit-transition-duration: 0.1s; /* Safari */
    	transition-duration: 0.1s;
	}


/*-----------------------------------------------------------
#10 - @ Media
-----------------------------------------------------------*/
@media (max-width: 767px) {
	.fa {
		font-size: 22px;
	}

	.banner {
		padding: 0;
	}

	.search-area .row {
		text-align: center;
	}

	.pull-right {
		float: left!important;
	}

	.navbar-default .navbar-nav>li>a {
		font-size: 22px;
	}

	.footer li {
		font-size: 18px;
	}

	.navbar-form .form-control {
		width: 250px;
	}

	.navbar-nav .open .dropdown-menu {
		font-size: 20px;
	}	
}

@media (max-width: 387px) and (min-width: 250px) {
	.content section {
		padding: 0;
	}
}

@media (max-width: 728px) and (min-width: 387px) {
	.content section {
		padding: 50px 0;
	}
}

@media (max-width: 767px) and (min-width: 400px) {
	.product-list img {
		width: 380px;
		height: 380px;
		border: 4px solid #fcfcfc;
	}
}

@media (max-width: 991px) and (min-width: 768px) {
	.product-list img {
		width: 350px;
		height: 350px;
		border: 4px solid #fcfcfc;
	}
}

@media (max-width: 991px) {
	.logo {
		display: none;
	}
}

@media (min-width: 800px) {
	.navbar-default .navbar-nav>li>a {
		font-size: 18px;
	}
}

@media (min-width: 768px) {
	.shop-user .fa {
		font-size: 26px;
	}

	.navbar-nav>li {	    
	    font-size: 17px;
	}

	.search-area ul {
		padding: 12px 0 0 0;
	}
}