/* --- Fonts --- */
/* --- Playfair --- */

@font-face {
    font-family: 'Playfair';
    src: url('../fonts/playfairdisplay-regular-webfont.eot');
    src: url('../fonts/playfairdisplay-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/playfairdisplay-regular-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-regular-webfont.woff') format('woff'),
         url('../fonts/playfairdisplay-regular-webfont.ttf') format('truetype'),
         url('../fonts/playfairdisplay-regular-webfont.svg#playfair_displayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair';
    src: url('../fonts/playfairdisplay-italic-webfont.eot');
    src: url('../fonts/playfairdisplay-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/playfairdisplay-italic-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-italic-webfont.woff') format('woff'),
         url('../fonts/playfairdisplay-italic-webfont.ttf') format('truetype'),
         url('../fonts/playfairdisplay-italic-webfont.svg#playfair_displayitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Playfair';
    src: url('../fonts/playfairdisplay-bold-webfont.eot');
    src: url('../fonts/playfairdisplay-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/playfairdisplay-bold-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-bold-webfont.woff') format('woff'),
         url('../fonts/playfairdisplay-bold-webfont.ttf') format('truetype'),
         url('../fonts/playfairdisplay-bold-webfont.svg#playfair_displaybold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Playfair';
    src: url('../fonts/playfairdisplay-bolditalic-webfont.eot');
    src: url('../fonts/playfairdisplay-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/playfairdisplay-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/playfairdisplay-bolditalic-webfont.woff') format('woff'),
         url('../fonts/playfairdisplay-bolditalic-webfont.ttf') format('truetype'),
         url('../fonts/playfairdisplay-bolditalic-webfont.svg#playfair_displaybold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

/* --- Raleway --- */

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-light-webfont.eot');
    src: url('../fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-light-webfont.woff2') format('woff2'),
         url('../fonts/raleway-light-webfont.woff') format('woff'),
         url('../fonts/raleway-light-webfont.ttf') format('truetype'),
         url('../fonts/raleway-light-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-lightitalic-webfont.eot');
    src: url('../fonts/raleway-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-lightitalic-webfont.woff') format('woff'),
         url('../fonts/raleway-lightitalic-webfont.ttf') format('truetype'),
         url('../fonts/raleway-lightitalic-webfont.svg#ralewaylight_italic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-medium-webfont.eot');
    src: url('../fonts/raleway-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-medium-webfont.woff2') format('woff2'),
         url('../fonts/raleway-medium-webfont.woff') format('woff'),
         url('../fonts/raleway-medium-webfont.ttf') format('truetype'),
         url('../fonts/raleway-medium-webfont.svg#ralewaymedium') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-mediumitalic-webfont.eot');
    src: url('../fonts/raleway-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/raleway-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/raleway-mediumitalic-webfont.woff') format('woff'),
         url('../fonts/raleway-mediumitalic-webfont.ttf') format('truetype'),
         url('../fonts/raleway-mediumitalic-webfont.svg#ralewaymedium_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}

/* --- Global --- */
* {
	box-sizing: border-box;
	outline: none;
}

html {
	font-size: 14px;
}

body, input {
	color: #2d2d2d;
	font-family: 'Raleway', sans-serif;
	font-style: normal;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1;
}

img {
	height: auto;
	max-width: 100%;
}

a img {
	border: 0;
}

h1, h2, h3, h4 {
	font-family: 'Playfair', serif;
	line-height: 1;
}

h2 {
	font-size: 2.25rem;
}

h3 {
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 1.4rem;
}

h4 {
	color: #e2574c;
	font-size: 1.38rem;
	margin-bottom: 1.5rem;
}

a:link, a:visited {
	color: #fff;
}

a:hover, a:active {
	color: #b64036;
}

.container {
	margin: 0 auto;
	max-width: 1240px;
	padding: 0 2%;
 	text-align: center;
	width: 100%;
}

.about, .catalogue, .newsletter, .main-footer {
	padding: 3.75rem 0;
}

.catalogue {
	padding-bottom: 0;
}

.text-wrapper {
	font-size: 1.05rem;
	line-height: 2;
}

/* --- Helper Classes --- */

.screen-reader {
	display: none;
	height: 0;
	width: 0;
}

.italic-style {
	font-weight: normal;
	font-style: italic;
}

/* --- Sections --- */
/* --- Header --- */

.site-header {
	background-color: #fff;
	border-bottom: 1px solid #d7d7d7;
	box-shadow: 0 1px 4px rgba(100, 100, 100, 0.15);
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

.site-header-container {
	padding-top: 1rem;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
}

.navigation a {
	color: #e2574c;
	text-decoration: none;
}

.navigation {
	border-top: 1px solid #d7d7d7;
	font-weight: bold;
	margin-top: .5rem;
	-webkit-box-ordinal-group: 4;
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	padding: 1rem 1.15rem;
	text-transform: uppercase;
	width: 100%;
}

.navigation li {
	display: inline-block;
	margin: 0 1rem;
}

.logo {
	-webkit-flex-basis: 50%;
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%;
	max-width: 8.6rem;
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}

.shop-cart {
	-webkit-flex-basis: 50%;
	-ms-flex-preferred-size: 50%;
	flex-basis: 50%;
	max-width: 3.6rem;
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
}

.cart-items {
	background-color: #e2574c;
	border-radius: 50%;
	color: #fff;
	display: none;
	font-size: .8rem;
	font-weight: bold;
	height: 20px;
	line-height: 1;
	padding-top: 4px;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 20px;
}

/* --- Hero Banner --- */

.hero-banner {
	background:
    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
		url('../images/banner-girl.png') no-repeat center 4.3rem,
		url('../images/flower-bkgd.jpg') repeat-x center;
	background-size: cover, 9.75rem auto, cover;
	color: #fff;
	height: 26.25rem;
	margin-top: 116px;
	position: relative;
}

.hero-text {
	left: 50%;
	position: absolute;
	text-shadow: 2px 2px 3px rgba(100, 100, 100, 0.8);
	top: 50%;
	-webkit-transform: translate(-50%, -50%); /*Safari fix for centering text*/
	transform: translate(-50%, -50%);
}

.hero-text p {
	font-size: 1.15rem;
	font-weight: bold;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

/* --- Product Categories --- */

.product-categories {
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	text-shadow: 2px 2px 3px rgba(100, 100, 100, 0.8);
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
}

.product-categories a {
	text-decoration: none;
}

.product-categories a:hover {
	color: #f5ebc6;
}

.categories-wide:before, .categories-square:before {
	content: '';
	display: table; /* expands boxes in firefox */
}

.categories-wide:before {
	padding-top: 50%;
}

.categories-square:before {
	padding-top: 100%;
}

.categories-wide, .categories-square {
	border: .3rem solid #fff;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		-ms-flex-align: center;
		align-items: center;
 		-webkit-box-pack: center;
 		-webkit-justify-content: center;
 		-ms-flex-pack: center;
 		justify-content: center;
	text-transform: uppercase;
}

.categories-wide {
	border-left: 0;
	border-right: 0;
	-webkit-box-flex: 2;
	-webkit-flex: 2 0 100%;
	-ms-flex: 2 0 100%;
	flex: 2 0 100%;
	max-width: 100%;
}

.categories-square {
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 50%;
	-ms-flex: 1 0 50%;
	flex: 1 0 50%;
	max-width: 50%;
}

.categories-square:nth-child(even) {
	border-left: 0;
}

.categories-square:nth-child(odd) {
	border-right: 0;
}

.mens {
	background:
    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
		url('../images/mens-category.jpg') no-repeat center center;
	background-size: cover, cover;
}

.trends {
	background:
    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
    	url('../images/trends-category.jpg') no-repeat center;
	background-size: cover, cover;
}

.glasses {
	background:
    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
    	url('../images/glasses-category.jpg') no-repeat center;
	background-size: cover, cover;
}

.sale {
	background:
    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
    	url('../images/sale-category.jpg') no-repeat center;
	background-size: cover, cover;
}

.bags {
	background:
    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
    	url('../images/bags-category.jpg') no-repeat center;
	background-size: cover, cover;
}

.womens {
	background:
	    linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
		url('../images/womens-category.jpg') no-repeat center;
	background-size: cover, cover;
}

/* --- Product list --- */
/* --- bxSlider -- */

.bx-wrapper img {
	margin: 0 auto;
}

.bx-wrapper .bx-viewport {
	box-shadow: none;
}

.bx-clone {
    display: none;
}

.products li {
	padding: 3rem 0;
	text-align: center;
	width: 100vw !important;
}

.product-category, .price {
	color: #969696;
	font-weight: bold;
}

.product-category {
	font-size: .7rem;
	margin: .75rem 0 1.25rem;
	text-transform: uppercase;
}

.price {
	margin-bottom: 1.2rem;
}

.add-to-cart {
	background-color: #000;
	border: 0;
	border-radius: 25px;
	color: #fff;
	cursor: pointer;
	font-size: .8rem;
	padding: 7px 15px;
}

.add-to-cart:hover {
   background-color: #0f87a2;
}

/* --- Newsletter --- */

.newsletter {
	background:
    	linear-gradient( rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100% ),
		url('../images/wave-bkgd.jpg') no-repeat center bottom;
	background-size: cover, 100rem auto;
    color: #fff;
    text-shadow: 2px 2px 3px rgba(100, 100, 100, 0.8);
}

/* --- Sign Up Form --- */

.newsletter-form {
	display: block;
	margin: 2rem auto 0;
	position: relative;
	width: 90%;
}

input[type="email"], input[type="submit"] {
   border: 0;
   border-radius: 2rem;
   font-size: .9rem;
}

input[type="email"] {
	padding: .9rem 1.5rem;
	width: 100%;
	line-height: 1.2rem;
}

input[type="submit"] {
	background: #e2574c;
	color: white;
	cursor: pointer;
	font-weight: bold;
	padding: .7rem 1.5rem;
	position: absolute;
	right: .25rem;
	top: .25rem;
}

input[type="email"]:focus {
	box-shadow: 1px 1px 6px rgba(100, 100, 100, 0.8);
}

input[type="submit"]:hover {
	background: #b64036;
}

/* --- Footer --- */

.main-footer {
	background-color: #242424;
	color: #fff;
	line-height: 1.5;
	margin-top: .575rem;
}

.credits, .address {
	font-family: 'Playfair', serif;
	font-size: .92rem;
}

.copyright, .contact, .address {
   	margin-bottom: 1rem;
}

.address {
	color: #969696;
}

.social {
	font-size: 1rem;
	line-height: 1.75;
	margin-top: 1.75rem;
}

.social li {
	display: inline;
}

.social-net {
	display: none;
	visibility: hidden;
}

.social a {
	text-decoration: none;
}

.social i {
	width: 1.6rem;
}

/* --- Breakpoints --- */

/* --- Viewport @ 600px ---  */
@media screen and (min-width:600px) {
/* --- Global --- */

	html {
		font-size: 16px;
	}

	h2 {
		font-size: 3rem;
	}

	h3 {
		font-size: 2.4rem;
		margin-bottom: 1.5rem;
	}

	h4 {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}
	.about, .catalogue, .newsletter, .main-footer {
		padding: 4rem 0;
	}

	.catalogue {
		padding-bottom: 1rem;
	}

	.text-wrapper {
		font-size: 1.15rem;
	}

/* --- Sections --- */
/* --- Header --- */

	.site-header {
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		padding-bottom: 1rem;
	}

	.logo {
		-webkit-flex-basis: 20%;
		-ms-flex-preferred-size: 20%;
		flex-basis: 20%;
		-webkit-box-ordinal-group: 2;
		-webkit-order: 1;
		-ms-flex-order: 1;
		order: 1;
	}

	.logo img {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
			-webkit-align-self: flex-start;
			-ms-flex-item-align: start;
			align-self: flex-start;
		max-width: 7.5rem;
	}

	.navigation {
		-webkit-align-self: center;
		-ms-flex-item-align: center;
		align-self: center;
		border: 0;
		-webkit-flex-basis: 60%;
		-ms-flex-preferred-size: 60%;
		flex-basis: 60%;
		font-size: .9rem;
		margin-top: .5rem;
		-webkit-box-ordinal-group: 3;
		-webkit-order: 2;
		-ms-flex-order: 2;
		order: 2;
		padding: 0 3rem 0 0;
		text-align: center;
	}

	.navigation li {
		margin: 0 .5rem 0;
	}

	.shop-cart {
		-webkit-flex-basis: 20%;
		-ms-flex-preferred-size: 20%;
		flex-basis: 20%;
		-webkit-box-ordinal-group: 4;
		-webkit-order: 3;
		-ms-flex-order: 3;
		order: 3;
		position: relative;
	}

	.shop-cart img {
		max-width: 3rem;
	}

	.cart-items {
		font-size: .8rem;
		line-height: 1;
		padding-top: 2px;
		right: 0;
		top: -2px;
	}

/* --- Hero Banner --- */

	.hero-banner {
		background:
	    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
			url('../images/banner-girl.png') no-repeat center 3.75rem,
			url('../images/flower-bkgd.jpg') repeat-x center;
	    background-size: cover, 9.35rem auto, cover;
		height: 25rem;
		margin-top: 67px;
	}

	.hero-text p {
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
	}

/* --- Product Catagories --- */

	.product-categories {
		font-size: 1.8rem;
	}
	.categories-wide {
		-webkit-flex: 2 0 50%;
		-ms-flex: 2 0 50%;
		flex: 2 0 50%;
		max-width: 50%;
	}

	.categories-square {
		-webkit-flex: 1 0 25%;
		-ms-flex: 1 0 25%;
		flex: 1 0 25%;
		max-width: 25%;
	}

	.categories-wide, .categories-square {
		border: .25rem solid #fff;
	}

	.categories-wide:first-child, .categories-square:nth-child(4) {
		border-left: 0;
	}

	.categories-square:nth-child(2) {
		border-left: .25rem solid #fff;
	}

	.categories-square:nth-child(5) {
		border-right: .25rem solid #fff;
	}

	.categories-square:nth-child(3), .categories-wide:last-child {
		border-right: 0;
	}

/* --- Product list --- */

	.bx-clone {
    	display: block;
	}

	.products li {
		padding: 2.5rem 2rem;
		width: 50vw !important;
	}

	.product-category {
		font-size: .75rem;
		margin: .9rem 0 1rem 0;
	}

	.price {
		font-size: 1rem;
	}

/* --- Newsletter --- */

	.newsletter {
		background:
	    	linear-gradient( rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100% ),
			url('../images/wave-bkgd.jpg') no-repeat center bottom;
	    background-size: cover, 175% auto;
	}

/* --- Sign Up Form --- */

	.newsletter-form {
		margin: 2.26rem auto 0;
		width: 67%;
	}

	input[type="email"], input[type="submit"] {
	   font-size: 1rem;
	}

	input[type="email"] {
	    padding: .8rem 1.5rem;
		line-height: 1.3rem;
	}

	input[type="submit"] {
		padding: .65rem 1.3rem;
		right: .23rem;
		top: .23rem;
	}

/* --- Footer --- */

	.footer-flex {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			-ms-flex-pack: justify;
			justify-content: space-between;
	}

	.credits, .social {
		text-align: left;
	}

	.credits, .address {
		font-size: 1rem;
	}

	.copyright, .contact {
		margin-bottom: 1rem;
	}

	.social {
		font-size: .95rem;
		line-height: 2.15;
		margin-top: 0;
		padding-right: 2.25rem;
	}

	.social li {
 		display: block;
	}

	.social-net {
		display: inline-block;
		visibility: visible;
	}

	.social i {
		width: 1.6rem;
	}

}

/* --- Viewport @ 1240px ---  */
@media screen and (min-width:1240px) {
/* --- Global --- */

	.container {
		padding: 0 2%;
	}

	h2 {
		font-size: 4rem;
	}

	h3 {
		font-size: 2.4rem;
		margin-bottom: 1.5rem;
	}

	h4 {
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
	}

	.about, .catalogue, .newsletter, .main-footer {
		padding: 4rem 0;
	}

	.catalogue {
		padding-bottom: 2rem;
	}

	.text-wrapper {
		font-size: 1.15rem;
		width: 720px;
	}

/* --- Sections --- */
/* --- Header --- */

	.site-header {
		margin-bottom: 0;
		padding: 1rem 0;
	}

	.navigation {
		font-size: 1rem;
		padding-right: 5rem;
		text-align: center;
	}

	.navigation li {
		margin: 1rem;
	}

	.logo img {
		max-width: 10rem;
	}

	.shop-cart img {
		max-width: 4rem;
	}

	.cart-items {
		font-size: .8rem;
		height: 25px;
		line-height: 1;
		padding-top: 5px;
		right: -5px;
		top: -5px;
		width: 25px;
	}

/* --- Hero Banner --- */

	.hero-banner {
		background:
	    	linear-gradient( rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.25) 100% ),
			url('../images/banner-girl.png') no-repeat center 3.75rem,
			url('../images/flower-bkgd.jpg') repeat-x center;
	    background-size: cover, 15.5rem auto, contain;
		height: 34.375rem;
		margin-top: 97px;
	}

	.hero-text p {
		font-size: 1.25rem;
		margin-bottom: 1.5rem;
	}

/* --- Product Catagories --- */

	.product-categories {
		font-size: 2.4rem;
	}

/* --- Product List --- */

	.products li {
		width: 25vw !important;
	}

	.product-category {
		font-size: .75rem;
		margin-bottom: 1rem;
	}

	.price {
		font-size: 1rem;
	}

/* --- Newsletter --- */

	.newsletter {
		background:
	    	linear-gradient( rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 100% ),
			url('../images/wave-bkgd.jpg') no-repeat center bottom;
	    background-size: cover, 115% auto;
	}

/* --- Sign Up Form --- */

	.newsletter-form {
		margin-top: 2rem;
	}

	input[type="email"], input[type="submit"] {
		font-size: 1rem;
	}

	input[type="email"] {
		line-height: 1.25rem;
	    padding: .9rem 1.75rem;
	}

	input[type="submit"] {
		padding: .75rem 1.5rem;
		right: .25rem;
		top: .25rem;
	}

/* --- Footer --- */

	.main-footer {
		line-height: 1.5;
		margin-top: .5rem;
	}

	.copyright, .contact {
		margin-bottom: 1rem;
	}

	.credits {
		font-size: 1rem;
	}

	.address {
		font-size: 1rem;
	}

	.social {
		font-size: 1rem;
		line-height: 2;
		padding-right: 4rem;
	}

	.social i {
		width: 1.6rem;
	}

}