$font: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
$font-size: 16px;
$background-color: #FFFFFF;
$content-wrapper-width: 1050px;
$content-border-color: #EEEEEE;
$text-color: #555555;
$header-color: #394352;
$price-color: #999999;
$rrp-color: #BBBBBB;
$featured-header-font: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", sans-serif;
$featured-header-color: #FFFFFF;
$btn-color: #4b505c;
* {
	box-sizing: border-box;
	font-family: $font;
    font-size: $font-size;
}
html {
  	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	color: $text-color;
    background-color: $background-color;
	margin: 0;
	padding-bottom: 100px; /* Same height as footer */
}
h1, h2, h3, h4, h5 {
	color: $header-color;
}
.content-wrapper {
    width: $content-wrapper-width;
    margin: 0 auto;
	&.error {
		padding: 40px 0;
	}
}
header {
	position: relative;
    border-bottom: 1px solid $content-border-color;
	.content-wrapper {
		display: flex;
	}
    h1, img {
        display: flex;
        flex-grow: 1;
        flex-basis: 0;
        font-size: 20px;
        margin: 0;
        padding: 24px 0;
    }
    nav {
        display: flex;
        flex-grow: 1;
        flex-basis: 0;
        justify-content: center;
        align-items: center;
        a {
			white-space: nowrap;
            text-decoration: none;
            color: $text-color;
            padding: 10px 10px;
            margin: 0 10px;
            &:hover {
                border-bottom: 1px solid darken($background-color, 15);
            }
        }
    }
    .link-icons {
        display: flex;
        flex-grow: 1;
        flex-basis: 0;
        justify-content: flex-end;
        align-items: center;
		position: relative;
		.search {
			i {
                font-size: 18px;
				padding: 9px;
				border-radius: 50%;
				cursor: pointer;
				&:hover {
					background-color: darken($background-color, 3);
				}
            }
			input {
				display: none;
				border: 0;
				border-bottom: 1px solid $content-border-color;
				padding: 10px 0;
				max-width: 200px;
				outline: none;
				margin-right: 10px;
			}
		}
		.responsive-toggle {
			display: none;
		}
        a {
			position: relative;
            text-decoration: none;
            color: #394352;
            padding: 9px;
			border-radius: 50%;
			margin-left: 5px;
            &:hover {
				background-color: darken($background-color, 5);
            }
            i {
                font-size: 18px;
            }
			span {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				background-color: lighten($header-color, 20);
				background-color: #eea965;
				border-radius: 50%;
				color: #000;
				font-size: 12px;
				width: 16px;
				height: 16px;
				font-weight: 500;
				position: absolute;
				top: 0;
				right: 0;
			}
        }
    }
}
main {
	.featured {
		display: flex;
		flex-direction: column;
		background-repeat: no-repeat;
		background-size: cover;
		height: 500px;
		align-items: center;
		justify-content: center;
		text-align: center;
		h2 {
			display: inline-block;
			margin: 0;
			width: $content-wrapper-width;
			font-family: $featured-header-font;
			font-size: 68px;
			color: $featured-header-color;
			padding-bottom: 10px;
		}
		p {
			display: inline-block;
			margin: 0;
			width: $content-wrapper-width;
			font-size: 24px;
			color: $featured-header-color;
		}
	}
	.recentlyadded {
		h2 {
			display: block;
			font-weight: normal;
			margin: 0;
			padding: 40px 0;
			font-size: 24px;
			text-align: center;
			width: 100%;
			border-bottom: 1px solid $content-border-color;
		}
	}
	.recentlyadded .products, .products .products-wrapper {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 40px 0 0 0;
		.product {
			display: block;
			overflow: hidden;
			text-decoration: none;
			width: 25%;
			padding-bottom: 60px;
			img {
				transform: scale(1.0);
				transition: transform 1s;
			}
			.name {
				display: block;
				color: $text-color;
				padding: 20px 0 2px 0;
			}
			.price {
				display: block;
				color: $price-color;
			}
			.rrp {
				color: $rrp-color;
				text-decoration: line-through;
			}
			&:hover {
				img {
					transform: scale(1.05);
					transition: transform 1s;
				}
				.name {
					text-decoration: underline;
				}
			}
		}
	}
	> .product {
		display: flex;
		padding: 40px 0;
		h1 {
			font-size: 34px;
			font-weight: normal;
			margin: 0;
			padding: 20px 0 10px 0;
		}
		.product-img-large {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 500px;
		}
		.product-small-imgs {
			display: flex;
			flex-flow: wrap;
			.product-img-small {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-basis: 31%;
				border: 1px solid $content-border-color;
				cursor: pointer;
				margin: 20px 12px 0 0;
				&:nth-child(3n) {
					margin-right: 0;
				}
				&.selected {
					border: 1px solid darken($content-border-color, 15);
				}
			}
		}
		.product-img-large img, .product-img-small img {
			max-width: 100%;
			max-height: 100%;
			width: auto;
			height: auto;
			object-fit: contain;
		}
		.product-imgs {
			flex: 1;
			padding: 15px;
		}
		.product-wrapper {
			padding-left: 25px;
			flex: 1;
		}
		.prices {
			display: flex;
		}
		.price {
			display: block;
			font-size: 22px;
			color: $price-color;
		}
		.rrp {
			color: $rrp-color;
			text-decoration: line-through;
			font-size: 22px;
			padding-left: 10px;
		}
		form {
			display: flex;
			flex-flow: column;
			margin: 25px 0 40px 0;
			label {
				padding-bottom: 10px;
			}
			select, input[type="number"], input[type="text"], input[type="datetime-local"]   {
				width: 400px;
				padding: 8px 10px;
				margin-bottom: 15px;
				border: 1px solid darken($content-border-color, 10);
				color: $text-color;
				border-radius: 4px;
				background-color: #fff;
			}
			.radio-checkbox {
				display: flex;
				flex-flow: wrap;
				max-width: 400px;
				input {
					margin: 0 10px 10px 0;
				}
				label {
					padding-right: 15px;
				}
			}
			.btn {
				margin-top: 10px;
				width: 400px;
				text-transform: uppercase;
			}
		}
	}
	> .products {
		h1 {
			display: block;
			font-weight: normal;
			margin: 0;
			padding: 40px 0;
			font-size: 24px;
			text-align: center;
			width: 100%;
		}
		.products-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 40px;
			p {
				margin: 0;
			}
			label {
				padding-left: 20px;
			}
			select {
				padding: 5px;
				margin-left: 15px;
				border: 1px solid darken($content-border-color, 10);
				color: $text-color;
				border-radius: 4px;
			}
		}
		.buttons {
			text-align: right;
			padding-bottom: 40px;
			a:first-child {
				margin-right: 5px;
			}
		}
	}
	.cart, .myaccount {
		h1 {
			display: block;
			font-weight: normal;
			margin: 0;
			padding: 40px 0;
			font-size: 24px;
			text-align: center;
			width: 100%;
		}
		table {
			width: 100%;
			thead td {
				padding: 30px 0;
				border-bottom: 1px solid $content-border-color;
				&:last-child {
					text-align: right;
				}
			}
			tbody td {
				padding: 20px 0;
				border-bottom: 1px solid $content-border-color;
				&:last-child {
					text-align: right;
				}
			}
			.img {
				width: 80px;
			}
			.remove {
				color: #777777;
				font-size: 12px;
				padding-top: 3px;
				&:hover {
					text-decoration: underline;
				}
			}
			.price, .options {
				color: $price-color;
			}
			.options {
				font-size: 14px;
				max-width: 200px;
			}
			a {
				text-decoration: none;
				color: $text-color;
			}
			input[type="number"] {
				width: 68px;
				padding: 10px;
				border: 1px solid darken($content-border-color, 10);
				color: $text-color;
				border-radius: 4px;
			}
		}
		.total {
			text-align: right;
			padding: 30px 0 40px 0;
			.text {
				padding-right: 40px;
				font-size: 18px;
			}
			.price {
				font-size: 18px;
				color: $price-color;
			}
			.note {
				display: block;
				padding-top: 15px;
			}
		}
		.buttons {
			text-align: right;
			padding-bottom: 40px;
			.btn {
				margin: 0 0 10px 5px;
			}
		}
	}
	.placeorder {
		h1 {
			display: block;
			font-weight: normal;
			margin: 0;
			padding: 40px 0;
			font-size: 24px;
			text-align: center;
			width: 100%;
		}
		p {
			text-align: center;
		}
	}
	.checkout, .myaccount {
		h1 {
			display: block;
			font-weight: normal;
			margin: 0;
			padding: 40px 0;
			font-size: 24px;
			text-align: center;
			width: 100%;
		}
		.shipping-details {
			width: 600px;
			display: flex;
			flex-flow: wrap;
			padding-bottom: 40px;
			h2 {
				width: 100%;
				font-weight: normal;
				font-size: 20px;
				padding: 30px 0 20px 0;
				margin: 0 0 10px 0;
				border-bottom: 1px solid $content-border-color;
				&:first-child {
					padding: 20px 0 20px 0;
				}
			}
			label {
				display: block;
				padding: 15px 0 10px 0;
			}
			.row1, .row2 {
				width: 50%;
				display: inline-block;
			}
			.row1 {
				padding-right: 10px;
			}
			.row2 {
				padding-left: 10px;
			}
		}
	}
	.checkout {
		.container {
			display: flex;
			align-items: flex-start;
		}
		.shipping-details {
			margin-right: 25px;
			width: 100%;
		}
		.payment-methods {
			display: flex;
			flex-flow: wrap;
			width: 100%;
			justify-content: space-between;
			label {
				text-decoration: none;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid $content-border-color;
				border-radius: 5px;
				height: 60px;
				width: 159px;
				margin: 10px;
				font-weight: 500;
				color: lighten($header-color, 5);
				padding: 0;
				cursor: pointer;
				.fa-stripe {
					color: #6671E4;
				}
				&:nth-child(2), &:nth-child(8) {
					margin-left: 0;
				}
				&:nth-child(3n) {
					margin-right: 0;
				}
				&:hover {
					border: 1px solid darken($content-border-color, 10);
				}
			}
			input {
				position: absolute;
				top: -9999px;
				left: -9999px;
				visibility: hidden;
				&:checked + label {
					border:2px solid #7ed1a1;
				}
			}
		}
		.cart-details {
			width: 90%;
			box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.15);
			border-radius: 4px;
			margin-left: 25px;
			margin-bottom: 50px;
			h2 {
				margin: 0;
				padding: 23px 15px;
				font-weight: 500;
				border-bottom: 1px solid $content-border-color;
			}
			table {
				width: 100%;
				padding: 20px;
				.price {
					text-align: right;
					font-weight: 500;
				}
				td {
					padding: 5px;
				}
			}
			.discount-code {
				padding: 0 23px 23px 23px;
				.result {
					display: block;
					padding-top: 10px;
				}
			}
			.shipping-methods {
				border-top: 1px solid $content-border-color;
				padding: 23px;
				h3 {
					margin: 0;
					padding: 0 0 10px;
					font-weight: 500;
				}
				.shipping-method {
					padding-top: 10px;
					margin: 0;
				}
			}
			.total {
				border-top: 1px solid $content-border-color;
				display: flex;
				justify-content: space-between;
				padding: 23px;
				font-size: 18px;
				font-weight: 500;
			}
			.alt {
				font-size: 14px;
				color: mix($header-color, #fff, 45);
				padding-left: 5px;
			}
			.summary {
				border-top: 1px solid $content-border-color;
				padding: 23px 0;
				div {
					display: flex;
					justify-content: space-between;
					padding: 10px 23px;
					span {
						font-size: 14px;
						font-weight: 500;
					}
				}
				.discount span {
					color: #de0000;
				}
			}
			.buttons {
				margin: 0 23px 23px 23px;
				.btn {
					width: 100%;
				}
			}
		}
	}
	.myaccount {
		display: flex;
		flex-flow: wrap;
		.menu {
			padding-right: 35px;
			width: 300px;
			a {
				display: block;
				text-decoration: none;
				color: lighten($text-color, 20);
				padding: 15px 0;
				border-bottom: 1px solid lighten($content-border-color,3);
				&:hover {
					color: darken($text-color, 10);
				}
			}
		}
		.myorders, .mydownloads, .settings {
			flex: 1;
			padding-bottom: 50px;
		}
		.myorders {
			.order {
				box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.15);
				margin: 30px 0 30px 0;
				.order-header {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid lighten($content-border-color,3);
					> div {
						display: flex;
						padding: 15px;
						div {
							padding-right: 35px;
							&:last-child {
								padding-right: 0;
							}
							span {
								display: block;
								font-size: 14px;
							}
						}
					}
				}
				.order-items {
					padding: 15px;
					table {
						margin: 0;
						padding: 0;
					}
				}
			}
		}
		.settings {
			form {
				max-width: 400px;
				.btn {
					margin-top: 25px;
				}
			}
		}
		form {
			width: 100%;
		}
		h2 {
			width: 100%;
			font-weight: normal;
			font-size: 20px;
			padding: 30px 0 20px 0;
			margin: 0 0 10px 0;
			border-bottom: 1px solid $content-border-color;
		}
		table {
			padding-bottom: 40px;
			tr:last-child td {
				border-bottom: 0;
			}
			a {
				display: inline-flex;
				justify-content: center;
				align-items: center;
				height: 40px;
				border: 1px solid $content-border-color;
				border-radius: 4px;
				padding: 0 10px;
				font-size: 14px;
				color: #de0000;
				margin: 0 5px 5px 0;
				&:hover {
					color: darken(#de0000, 10);
				}
				i {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					align-self: center;
					padding-right: 10px;
					margin-right: 10px;
					height: 100%;
					border-right: 1px solid $content-border-color;
				}
			}
			.name {
				word-break: break-all;
			}
		}
		.login-register {
			display: flex;
			width: 100%;
			justify-content: space-between;
			margin-top: 40px;
			h1 {
				text-align: left;
				padding-top: 15px;

			}
			.login {
				width: 100%;
				border-right: 1px solid lighten($content-border-color, 3);
				padding-right: 45px;
			}
			.register {
				width: 100%;
				padding-left: 45px;
			}
			.btn {
				margin-top: 25px;
			}
		}
	}
	p.error {
		color: red;
	}
}
.img-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.7);
	div {
		position: absolute;
		display: flex;
		flex-flow: column;
		width: 800px;
		height: 800px;
		max-width: 90%;
		max-height: 90%;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFFFF;
		padding: 15px;
		a {
			display: inline-flex;
			align-self: flex-end;
			text-decoration: none;
			font-size: 34px;
			line-height: 26px;
			color: lighten($text-color, 40);
			&:hover {
				color: lighten($text-color, 30);
			}
		}
		img {
			width: auto;
			height: auto;
			max-width: 100%;
			max-height: 100%;
			object-fit: contain;
			padding-top: 20px;
			padding-bottom: 25px;
		}
	}
}
.btn {
	text-decoration: none;
	background: $btn-color;
	border: 0;
	color: #FFFFFF;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	&:hover {
		background: darken($btn-color, 3);
	}
	&:disabled {
		background: #ddd;
	}
}
.form-label {
	display: block;
	padding: 20px 0 10px 0;
}
.form-field {
	width: 100%;
	padding: 10px;
	border: 1px solid darken($content-border-color, 10);
	border-radius: 4px;
	background-color: #fff;
}
footer {
	position: absolute;
	bottom: 0;
	border-top: 1px solid $content-border-color;
	padding: 20px 0;
	width: 100%;
	a {
		text-decoration: none;
		color: $text-color;
		&:hover {
			text-decoration: underline;
		}
	}
}
/* Responsive CSS below */
@media screen and (max-width: $content-wrapper-width) {
	.rhide {
		display: none;
	}
	.content-wrapper {
		width: 100%;
		padding: 0 10px;
	}
	header {
		justify-content:space-between;
	    h1 {
	        font-size: 16px;
			flex-basis: auto;
	    }
	    nav {
	        display: none;
			position: absolute;
			left: 0;
			top: calc(100% + 1px);
			width: 100%;
			background-color: #FFFFFF;
			a {
				display: block;
				padding: 10px 12px;
				margin: 0;
				border-bottom: 1px solid lighten($content-border-color, 3);
			}
	    }
		.link-icons {
			display: inline-flex;
			width: 100px;
			.responsive-toggle {
				display: block;
			}
			.search input {
				max-width: 150px;
			}
		}
	}
	main {
		.recentlyadded .products, .products .products-wrapper {
			justify-content: center;
			.product {
				width: auto;
			}
		}
		.featured {
			height: 300px;
			h2 {
				font-size: 48px;
				width: 100%;
				padding: 0 10px;
			}
			p {
				font-size: 22px;
				width: 100%;
				padding: 0 10px;
			}
		}
		> .products {
			.products-header {
				flex-flow: column;
				p {
					padding-bottom: 10px;
				}
				form {
					display: flex;
					flex-flow: column;
					label {
						padding-top: 15px;
					}
				}
			}
		}
		> .product {
			padding: 0 10px;
			flex-flow: column;
			.product-imgs {
				padding: 20px 10px 0 10px;
				.product-img-large {
					height: 300px;
				}
				.product-small-imgs {
					.product-img-small {
						height: 80px;
						flex-basis: 30%;
					}
				}
			}
			form {
				input[type="number"], input[type="text"], input[type="datetime-local"], input[type="submit"], select {
					width: 100%;
				}
			}
			.product-wrapper {
				padding: 0;
			}
		}
		.cart {
			table {
				input[type="number"] {
					width: 40px;
				}
			}
		}
		.checkout, .myaccount {
			.container {
				flex-flow: column;
			}
			.shipping-details {
				.payment-methods {
					flex-flow: column;
					label {
						margin: 0 0 10px 0;
					}
				}
			}
			.cart-details {
				margin: 0 0 40px 0;
				width: 100%;
			}
			form {
				width: 100%;
			}
		}
		.myaccount {
			.login-register {
				flex-flow: column;
				.login {
					border-right: 0;
					padding: 10px;
				}
				.register {
					padding: 10px;
				}
			}
			.menu {
				width: 100%;
				padding-right: 0;
			}
		}
	}
}