/* ==========

Forage Inc.

Last updated: 23/02/2023
   
Styles menu (large screen):
   
1. Global styles:
	1.1 Styles for links
	1.2 Styles for keyframes  
	1.x Styles for modals???
	1.3 Styles for header
	1.4 Styles for body
	1.5 Styles for footer
	   
2. Styles for pages:
	2.1 Styles for Home
	2.2 Styles for Shop
	2.3 Styles for Product
	2.4 Styles for Cart
	2.5 Styles for Shipping, Review, Confirmation
	2.6 Styles for Signin
	2.7 Styles for Forgot
	2.8 Styles for My Account
	2.9 Styles for Listing
	2.10 Styles for Photo Gallery
	2.11 Styles for About Us
	2.12 Styles for Contact Us
	2.13 Styles for Help
	2.14 Styles for Terms, Privacy, Selling
	2.15 Styles for SiteMap

========== */

/* 1. Global styles */
* { 
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	box-sizing: border-box;
}

html, body {
	position: relative;
	max-width: 100%;
	overflow-x: hidden; /* It doesn't scroll sideways on mobile devices */
}

body {
	font: 1.5vw Verdana, Arial, Helvetica, sans-serif;
	color: #999;
	background-color: white;
}

select::-ms-expand {
	display: none;
}

/* 1.1 Styles for links */
a:link {
	color: #999;
	text-decoration: none;
}

a:visited {
	color: #999;
	text-decoration: none;
}

a:hover {
	color: #666;
	text-decoration: underline;
}

a:active {
	color: #999;
	text-decoration: none;
}

/* 1.2 Styles for keyframes */
@-webkit-keyframes fadeIn { /* Chrome, Safari, Opera */
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@-webkit-keyframes fadein {
	from { bottom: 0; opacity: 0; } 
	to { bottom: 25px; opacity: 1; }
}

@keyframes fadein {
	from { bottom: 0; opacity: 0; }
	to { bottom: 25px; opacity: 1; }
}

@-webkit-keyframes fadeout {
	from { bottom: 25px; opacity: 1; } 
	to { bottom: 0; opacity: 0; }
}

@keyframes fadeout {
	from { bottom: 25px; opacity: 1; }
	to { bottom: 0; opacity: 0; }
}

@-webkit-keyframes mission {
	25% { background-image: url(images/products/230a4a5cb/230a4a5cb-carousel.jpg); }  /* Flag */
	50% { background-image: url(images/products/c27bb965d/c27bb965d-carousel.jpg); } /* Platter */
	75% { background-image: url(images/products/4f7da1c7a/4f7da1c7a-carousel.jpg); } /* Sink */
	100% { background-image: url(images/products/c54d4572f/c54d4572f-carousel.jpg); } /* Table */
}

@keyframes mission {
	25% { background-image: url(images/products/230a4a5cb/230a4a5cb-carousel.jpg); }
	50% { background-image: url(images/products/c27bb965d/c27bb965d-carousel.jpg); }
	75% { background-image: url(images/products/4f7da1c7a/4f7da1c7a-carousel.jpg); }
	100% { background-image: url(images/products/c54d4572f/c54d4572f-carousel.jpg); }
}

@-webkit-keyframes zoom {
	from { -webkit-transform: scale(0); } 
	to { -webkit-transform: scale(1); }
}

@keyframes zoom {
	from { transform: scale(0); } 
	to { transform: scale(1); }
}

/* 1.3 Styles for header */
.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 777777 !important; /* No declared before */
}

.gridContainer {
	width: 100%;
}

.gridWrapper {
	overflow: hidden;
}

.gridHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
	z-index: 666666 !important; /* 1 */
}

.gridMenu {
	position: fixed;
	display: none;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important; /* Makes scroll menu when content overflows */
	transform: scale(0);
	background-color: #dfcfb9; /* #d7c2a7, #d3f8f7, rgba(235, 235, 235, 1) */
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch; /* mobile Safari */
	z-index: 888888 !important; /* No declared before */
}

.showGridMenu {
	transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-webkit-transition: 0.6s;
	-o-transition: 0.6s;
	transform: scale(1);
}

.hideGridMenu {
	transition: 0.6s;
	-moz-transition: 0.6s;
	-ms-transition: 0.6s;
	-webkit-transition: 0.6s;
	-o-transition: 0.6s;
	transform: scale(0);
}

.divTable {
	display: table;
	table-layout: fixed; /* Set columns with equal widths */
}

.divTableBody {
	display: table-row-group;
}

.divTableRow {
	display: table-row;
}

.divTableCell {
	display: table-cell;
}

.divTableCaption {
	display: table-caption;	
}

.divCaptionTop {
	caption-side: top;
}

.divCaptionBottom {
	caption-side: bottom;
}

.divTopMenuCaption {
	position: relative;
	padding: 1%;
	font-size: 1.25vw;
	text-align: left;
}

.divTopMenuCaption img[src="images/forage-logo.jpg"] {
	width: 8.5%;
	vertical-align: text-bottom;
}

#top-search-wrapper {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
}

#top-search-wrapper .fa-close {
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
	font-style: normal;
	font-size: 1.5vw;
	user-select: none;
	color: #999;
	opacity: 1;
	cursor: pointer;
	border: none;
	visibility: hidden;
}

#top-search-box {
	width: 100%;
	padding: 3% 3% 3% 9%;
	font-size: 1.25vw;
	color: #999;
	background-color: white;
	border: 1px solid #ddd;
	border-radius: 50px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#top-search-box::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 1.25vw;
	color: #ccc;
}
	
#top-search-box:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	font-size: 1.25vw;
	color: #ccc;
}

#top-search-box::-webkit-search-cancel-button {
    -webkit-appearance: none;
	appearance: none;
}

#top-search-button {
	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	left: 3%;
	font-size: 1.5vw;
	background-color: transparent;
	line-height: 1;
}

#top-search-button .fa-search {
	font-size: 1.5vw;
	color: #434B67;
	background-color: transparent;
	vertical-align: top;
	line-height: 1;
}

.divTopMenuCaption .fa-bars {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 5%;
	font-size: 8vw;
	display: none;
}

.divTopMenuCaption .fa-user {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 8%;
	font-size: 2.25vw;
}

.divTopMenuCaption .fa-shopping-cart {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1%;
	font-size: 2.25vw;
}

.divTopMenuTable {
	width: 100%;
	position: relative;
}

.divTopMenuCell {
	padding: 1%;
	font-size: 1.25vw;
	text-align: center;
	vertical-align: middle;
}

.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(1) {
	width: 25%;
}

.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(2) {
	width: 20%;
}

.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(1n+3) {
	width: 13.75%;
}

.divTopMenuCell a {
	color: #999;
	text-transform: capitalize;
	text-decoration: none;
	font-weight: normal;
}

.divTopMenuCell a:hover {
	color: #666;
	text-decoration: none;
}

.divTopMenuCell a:active {
 	color: #999;
	text-decoration: none;
}

.dropbtn1 .fa-chevron-up {
	font-size: 1vw;
	vertical-align: middle;
	margin-left: 3.5%;
}

.dropbtn1 .fa-chevron-down {
	font-size: 1vw;
	vertical-align: middle;
	margin-left: 3.5%;
}

.dropdown-content {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 3.40vw;
	padding: 1%;
	min-width: 100%;
	text-align: center;
	/*border-radius: 0 0 10px 10px;*/
	color: #8d6b3f; /* #20C1BD */
	background-color: #dfcfb9; /* #d3f8f7, rgba(235, 235, 235, 1) */
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 666666 !important; /* 999999 */
}

.dropdown-content a {
	font-size: 1.25vw;
	color: #9e7947; /* #20C1BD */
}

.dropdown-content a:hover {
	color: #9e7947; /* #20C1BD */
	text-decoration: underline;
}

.dropdown-content a:active {
	color: #9e7947; /* #20C1BD */
	text-decoration: none;
}

.dropdown-categories {
	display: table;
	table-layout: fixed; /* Set columns with equal widths */
	width: 100%;
}

.dropdown-subcategories {
	display: table-cell;
	width: auto;
}

.dropdown-categories > h3 {
	display: table-caption;
	caption-side: top;
	width: 8%;
	padding-bottom: 0.5%;
	margin: 0 auto 0.5% auto;
	border-bottom: 3px solid #9e7947; /* #20C1BD */
	font-size: 1.75vw !important;
}

.dropdown-subcategories > h4 {
	margin-bottom: 0.75%;
	font-size: 1.5vw;
}

.dropdown-subcategories ul {
	list-style: none;
	line-height: 1.6;
}

.divSideMenuTable {
	width: 100%;
}

.divSideMenuCell {
	position: relative;
	padding: 1% 2%;
	text-align: center;
}

.divSideMenuTable .divTableBody .divTableRow:nth-child(3) .divSideMenuCell:only-child {
	padding-left: 0;
	padding-right: 0;
}

.divSideMenuCell > a {
	font-size: 3.5vw;
	color: #8d6b3f;
}

.divSideMenuCell > a:hover {
	color: #6a502f;
	text-decoration: none;	
}

.divSideMenuCell > a:active {
	color: #8d6b3f;
	text-decoration: none;
}

.divSideMenuCell h1 {
	font-size: 5.25vw;
	color: #8d6b3f;
}

.divSideMenuCell h2 {
	font-size: 3.5vw;
	font-weight: normal;
	color: #8d6b3f;
}

.divSideMenuCell img[src="images/forage-logo.png"] {
	width: 25%;
	vertical-align: text-bottom;
}

.divSideMenuCell .fa-close {
	position: absolute;
	top: 10%;
	right: 2%;
	transform: translate(-10%, -6%);
	font-size: 2vw;
	color: #8d6b3f;
	cursor: pointer;
}

.divSideMenuCell .fa-close:hover {
	color: #6a502f;
}

.divSideMenuCell .fa-close:active {
	color: #8d6b3f;
}

#side-search-wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

#side-search-wrapper .fa-close {
	position: absolute;
	right: 3%;
	top: 50%;
	transform: translateY(-50%);
	font-style: normal;
	font-size: 4vw;
	user-select: none;
	color: white;
	opacity: 1;
	cursor: pointer;
	border: none;
	visibility: hidden;
}

#side-search-box {
	width: 100%;
	padding: 3% 3% 3% 9%;
	font-size: 3.75vw;
	color: white;
	background-color: #8d6b3f;
	border-radius: 50px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;	
}

#side-search-box::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 3.75vw;
	color: rgba(255, 255, 255, 0.6);
}
	
#side-search-box:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	font-size: 3.75vw;
	color: rgba(255, 255, 255, 0.6);
}

#side-search-box::-webkit-search-cancel-button {
    -webkit-appearance: none;
	appearance: none;
}

#side-search-button {
	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	left: 3%;
	font-size: 4vw;
	background-color: transparent;
	line-height: 1;
}

#side-search-button .fa-search {
	font-size: 4vw;
	color: white;
	background-color: transparent;
	vertical-align: top;
	line-height: 1;
}

.divSideMenuCell hr {
	height: 1px;
	border-width: 0;
	color: #8d6b3f;
	background-color: #8d6b3f;
}

.accordionHelp { /* Styles for accordion */
	width: 100%;
	font-size: 3.5vw;
	color: #8d6b3f;
	background-color: #dfcfb9; /*#d7c2a7*/
	/*background-color: rgba(235, 235, 235, 1);*/
    cursor: pointer;
}

.accordionHelp:hover {
	color: #6a502f;
}

.accordionHelp:active {
	color: #8d6b3f;
}

.accordionHelp .fa-chevron-up {
	font-size: 1vw;
	vertical-align: middle;
	margin-left: 1%;
}

.accordionHelp .fa-chevron-down {
	font-size: 1vw;
	vertical-align: middle;
	margin-left: 1%;
}

.panelHelp {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.panelHelp a {
	color: #8d6b3f;
	text-decoration: none;
}

.panelHelp a:hover {
	text-decoration: underline;
}

.panelHelp a:active {
	text-decoration: none;
}

.panelHelp h3 { 
	width: 25%;
	margin: 0 auto;
	padding: 3% 0 1.5% 0;
	font-size: 5vw;
	color: #8d6b3f;
	border-bottom: 3px solid #8d6b3f;
}

.panelHelp h4 {
	padding: 3% 0 1.5% 0;
	font-size: 4vw;
	color: #8d6b3f;
}

.panelHelp ul { /* Styles for accordion */
	list-style-type: none;
	line-height: 2;
}

/* 1.4 Styles for body */
.divBodyTable {
	width: 100%;
	margin-top: 13.25%; /* This style moves content below the menu bar */
	/*background-color: rgb(230, 230, 230);*/
}

/*.divBodyCell {
	text-align: center;*/
	/*padding: 0 55px 10px 55px; *1%
}*/

.warning-box {
	margin: 0 55px 10px 55px;
	padding: 1%;
	font-size: 1.5vw;
	color: #666;
	border: 1px solid rgba(232, 111, 104, 1);
	border-radius: 5px;
	background-color: rgba(232, 111, 104, 0.5);
}

.warning-box .fa-exclamation {
	font-size: 1.5vw;
	color: #666;
	margin-right: 5px;
	vertical-align: text-bottom;
}

.info-box {
	font-size: 1.5vw;
}

.black-bold-text {
	font-weight: bold;
	color: #222;
}
 
/* 1.5 Styles for footer */
.gridFooter {
	width: 100%;
}

.divContactTable {
	width: 100%;
	background-color: #222;
}

.divContactCell {
	padding: 1%;
	font-size: 1vw;
	text-align: center;
	vertical-align: middle;
}

.divContactContainer {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	border-top: 1px solid #ccc;
	/*background-color: #222;*/
}

.divContactBox {
	width: 33.33%;
	font-size: 1vw;
	text-align: center;
	vertical-align: middle;
}

.divContactBox:nth-of-type(1) {
	order: 1;
	padding: 1% 1% 0.5% 1%;
}

.divContactBox:nth-of-type(2) {
	order: 2;
	padding: 1% 1% 0.5% 1%;
}

.divContactBox:nth-of-type(3) {
	order: 3;
	padding: 1% 1% 0.5% 1%;
}

.divContactBox:nth-of-type(4) {
	order: 4;
	line-height: 1.5;
	padding: 0.5% 1% 1% 1%;
}

.divContactBox:nth-of-type(5) {
	order: 5;
	padding: 1% 1% 1% 1%;
}

.divContactBox:nth-of-type(6) {
	order: 6;
	padding: 1% 1% 1% 1%;
}

.divContactBox .fa-facebook {
	font-size: 1.75vw;
	margin: 0 1%;
}

.divContactBox .fa-twitter {
	font-size: 1.75vw;
	margin: 0 1%;
}

.divContactBox .fa-pinterest-p {
	font-size: 1.75vw;
	margin: 0 1%;
}

.divContactBox .fa-instagram {
	font-size: 1.75vw;
	margin: 0 1%;
}

.divContactBoxTable {
	display: table;
	width: 75%;
	margin: 0 auto;
}

.divContactBoxCell {
	display: table-cell;
}

.divContactBoxCell:nth-of-type(1) {
	width: 6%;
	text-align: center;
}

.divContactBoxCell:nth-of-type(2) {
	width: 94%;
	padding-left: 5px;
	text-align: left;
}

.divContactBoxCell i {
	font-size: 1vw;
}

#subscribe-wrapper {
	position: relative;
	width: 90%;
	margin: 0 auto;
}

#subscribe-email {
	width: 70%;
	padding: 5%;
	font-size: 1vw;
	color: #999;
	border-top: 1px solid #999;
	border-right: none;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	background-color: transparent; /* rgba(255, 255, 255, 1) */
	border-radius: 5px 0 0 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#subscribe-email::placeholder, #subscribe-email::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #ccc;
}
	
#subscribe-email::-ms-input-placeholder, #subscribe-email:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	color: #ccc;
}

#subscribe-button {
	width: 30%;
	padding: 5%;
	font-size: 1vw;
	/*font-weight:bolder;*/
	color: #999; /* black */
	background-color: rgba(223, 223, 223); /* white */
	text-align: center;
	border: 1px solid #999;
	border-radius: 0 5px 5px 0;
	float: right;
	cursor: pointer;
	transition-duration: 0.4s;
}

#subscribe-button:hover {
	background-color: white;
}

#subscribe-button:active {
	background-color: rgba(223, 223, 223);
}

#subscribe-alert {
	display: none;
	padding: 0.75%;
	color: #E86F68;
}

.active {
	opacity: 1;
	cursor: pointer;
}

.inactive {
	opacity: 0.6;
	cursor: not-allowed;
}

.divFootTable {
	width: 100%;
	/*background-color: #222;*/
}

.divFootCaption {
	padding: 1%;
	/*background-color: #222;*/
}

.divFootCaption hr {
	height: 1px;
	border-width: 0;
	color: #CCC;
	background-color: #CCC;
}

.divFootContainer {
	width: 100%;
	padding: 1% 1% 3% 1%;
	font-size: 1vw;
	text-align: center;
}

.divFootContainer a {
	color: #999;
	text-decoration: none;
}

.divFootContainer a:hover {
	color: #666;
	text-decoration: underline;
}

.divFootContainer a:active {
 	color: #999;
	text-decoration: none;
}

.divFootContainer hr {
	height: 1px;
	border-width: 0;
	color: #CCC;
	background-color: #CCC;
}

#divChatBox {
	width: 5.5%;
	position: fixed;
	left: 25px;
	bottom: 25px;
	z-index: 555555 !important;
}

#divChatBox IMG {
	width: 100%;
	vertical-align: text-bottom;
	opacity: 0.8;
	cursor: pointer;
	/*-webkit-filter: drop-shadow(2px 2px 2px #222);
  	filter: drop-shadow(2px 2px 2px #222);*/
}

#snackbar {
	visibility: hidden;
	min-width: 25%; /*250px*/
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 555555 !important; /*1*/
	left: 50%;
	transform: translateX(-50%);
	bottom: 25px;
	font-size: 1.125vw; /*17px*/
}

.snackbarGreen {
	background-color: #33CC66;
}

.snackbarRed {
	background-color: #E86F68;
}

#snackbar.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#divAnchorBox {
	width: auto;
	height: auto;
	position: fixed;
	right: 25px;
	bottom: 25px;
	padding: 1.5%;
	color: #999;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 50%;
	cursor: pointer;
	transition-duration: 0.4s;
	z-index: 555555 !important;
}

#divAnchorBox:hover {
	color: #666;
}

#divAnchorBox:active {
	color: #999;
}

#divAnchorBox .fa-arrow-up {
	font-size: 2.5vw;
}

.divShareTable {
	width: 100%;
}

.divShareCell {
	padding: 1%;
	font-size: 1vw;
	text-align: center;
}
 
/* 2. Styles for pages */

/* 2.1 Styles for Home */
.divHomeTable {
	/* Firefox */
	width: -moz-calc(100% - 110px);
	/* WebKit */
	width: -webkit-calc(100% - 110px);
	/* Opera */
	width: -o-calc(100% - 110px);
	/* Standard */
	width: calc(100% - 110px);
	margin: 0 55px 10px 55px;
	/*border: 1px solid red;*/
}

/*.divHomeCell {
	padding: 0.5%;*/
	/*border: 1px solid blue;
}*/

.divHomeTable .divTableBody .divTableRow:nth-child(2) .divHomeCell:only-child {
	padding: 0.5%;
}

.divHomeTable .divTableBody .divTableRow:nth-child(3) .divHomeCell:only-child {
	padding: 0;
}

.divHomeCell h2 {
	font-size: 2.5vw;
	color: #666;
}

.divPresentationContainer {
	position: relative;
	width: auto;
	z-index: auto;
	opacity: 0;
	background-image: url(images/products/c54d4572f/c54d4572f-carousel.jpg);
	background-attachment: scroll;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 30%;
}

.mission {
	-webkit-animation-name: fadeIn, mission; /* Safari 4.0 - 8.0 */
  	animation-name: fadeIn, mission;
	-webkit-animation-duration: 0.8s, 10s;
  	animation-duration: 0.8s, 10s;
	-webkit-animation-delay: 0s, 2.5s; /*1s, 2s*/
	animation-delay: 0s, 2.5s;
	-webkit-animation-timing-function: ease-in-out, ease-in-out;
	animation-timing-function: ease-in-out, ease-in-out;
	-webkit-animation-iteration-count: 1, infinite;
	animation-iteration-count: 1, infinite;
	-webkit-animation-play-state: running;
	animation-play-state: running;
	-webkit-animation-fill-mode: forwards, none;
	animation-fill-mode: forwards, none;
}

.divPresentationText {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 3%;
	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

.divPresentationText h1 {
	color: white;
	font-weight: normal;
	font-size: 2.75vw;
}

a.shopNowButton {
	position: absolute;
	bottom: 5%;
	right: 3%;
	transform: translate(-3%, -5%);
	padding: 1.5vw 2vw; /* The vw unit makes padding looks same on all devices */
	border: none;
	border-radius: 50px 50px;
	color: black;
	background-color: rgba(255, 255, 255, 1);
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition-duration: 0.4s;	
}

a.ContinueShoppingButton {
	display: block; /* This style makes... */
	padding: 1.125vw;
	border: 1px solid black;
	border-radius: 50px 50px;
	color: white;
	background-color: black;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	text-align: center;
	/* cursor: pointer; */
	transition-duration: 0.4s;	
}

a.ContinueShoppingButton:hover {
	color: black;
	background-color: transparent;

}

a.shopNowButton:hover {
	color: white;
	background-color: rgba(0, 0, 0, 1);
}

.mySlides { display: none }
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 30%;
  position: relative;
  margin: auto;
  border: 1px solid green;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dotActive, .dot:hover {
	background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
	.prev, .next,.text { font-size: 11px }

	/* Change styles for cancel button and delete button on extra small screens */
	.modal-clearfix .cancelbtn,
	.modal-clearfix .deletebtn {
		width: 100%;
 	}

}

/* 2.2 Styles for Shop */
.divShopTable {
	/*width: auto;*/
	/* Firefox */
	width: -moz-calc(100% - 110px);
	/* WebKit */
	width: -webkit-calc(100% - 110px);
	/* Opera */
	width: -o-calc(100% - 110px);
	/* Standard */
	width: calc(100% - 110px);
	margin: 0 55px 10px 55px;
}

.divShopCell {
	padding: 0.5%;
	text-align: left;
}

.divShopHeader {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
}

.divShopHeader h2 {
	font-size: 2.5vw;
	font-weight: normal;
	color: #666;
	position: absolute;
  	top: 50%;
	left: 0;
	transform: translateY(-50%);
}

.divShopHeader > div:nth-of-type(1) {
	width: 77%;
	text-align: left;
	position: relative;
	padding: 0.5% 0;
}

.divShopHeader > div:nth-of-type(2) {
	width: 23%;
	text-align: right;
	padding: 0.5% 0;
	position: relative;
}

.sort-wrapper {
	width: 80%;
	margin: 0 0 0 auto;
}

.sort-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 1.75vw;
  	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	right: 10px;
  	color: #434B67;
  	pointer-events: none;
}

.sort-by {
	background: white;
	border: 1px solid #ddd;
	border-radius: 50px;
	width: 100%;
	padding: 5%;
	font-size: 1.5vw;
	color: #999;
	-webkit-appearance: none; /* Here's the code we need to hide arrow */
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}

.divShopContainer {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	align-items: stretch;
}

.divShopContainer > div {
	width: 25%;
	padding: 8px 4px 0 4px; /*1% 0.5% 0 0.5%*/
}

.shop-content {
	height: 100%; /* This style makes grow box to fill 100% of container */
	border: 1px solid #ebebeb;
	border-radius: 5px;
	background-color: white;
	transition: 0.2s;
}

.shop-content:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	transform: scale(1.005);
}

.shop-content IMG {
	border-radius: 5px 5px 0 0;
	vertical-align: text-bottom;
}

.shop-content h3 {
	padding: 2.5%;
	font-size: 1.40vw;
	font-weight: normal;
}

.shop-content p {
	padding: 2.5%;
	font-size: 1.25vw;
}

.shop-content .fa-heart-o {
	padding: 2.5%;
	font-size: 1.25vw;
	color: #999;
	cursor: pointer;
}

.shop-content .fa-heart {
	padding: 2.5%;
	font-size: 1.25vw;
	color: #E86F68;
	cursor: pointer;
}

.shop-content .fa-heart-o:hover {
	color: #666;
}

.center {
	text-align: center;
}

.pagination {
	display: inline-block;
	padding-top: 1.75%; /*24px*/
}

.pagination a {
	color: #999;
	float: left;
	padding: 8px 16px;
	font-size: 1.5vw;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid #ebebeb;
	border-radius: 5px;
	margin: 4px;
}

.pagination a.active {
	background-color: #20C1BD;
	color: white;
	border: 1px solid #20C1BD;
}

.pagination a.same-page {
	pointer-events: none;
	cursor: default;
}

.pagination a:hover:not(.active) { background-color: #ebebeb; }

/* 2.3 Styles for Product */
.divProductTable {
	width: auto;
	margin: 0 55px 10px 55px;
}

.divProductCell {
	padding: 0.5%;
	font-size: 1.5vw;
	text-align: left;
}

.divProductCell a {
	color: #20C1BD;
}

.divProductCell a:hover {
	text-decoration: underline;
}

.divProductCell a:active {
	text-decoration: none;
}

.divProductCell h2 {
	font-size: 2.5vw;
	color: #666;
}

.divProductCell hr {
	height: 1px;
	border-width: 0;
	color: #ebebeb;
	background-color: #ebebeb;
}

.divProductContainer {
	width: 100%;
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
}

.divProductBox:nth-of-type(1) {
	width: 55%;
}

.main-photo {
	width: 100%;
	padding: 0 0.25vw;
	vertical-align: text-bottom;
	cursor: pointer;
	transition: 0.3s;
}

.main-photo:hover {
	opacity: 0.8;
}

.miniature-box {
	width: 100%;
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
}

.miniature-box div {
	width: 25%;
	padding: 0 0.25vw;
}

.miniature-photo {
	width: 100%;
	margin-top: 0.5vw;
	/*margin-bottom: 0.5vw;*/
	vertical-align: text-bottom;
	cursor: pointer;
	transition: 0.3s;	
}

.miniature-photo:hover {
	opacity: 0.8;
}

.divProductBox:nth-of-type(2) {
	width: 45%;
}

.divProductBox:nth-of-type(2) div.product-detail {
	padding: 2%;
	font-size: 1.5vw;
}

.divProductBox:nth-of-type(2) div.product-detail:first-of-type {
	padding: 0 2%;
}

.divProductBox:nth-of-type(2) div.product-detail:last-of-type {
	padding: 0 2%;
}

.divProductBox:nth-of-type(2) div.product-detail h1 {
	font-size: 2.75vw;
	font-weight: normal;
	color: #666;
}

.checked {
	color: orange;
}

.quantity-wrapper {
	display: inline-block;
	position: relative;
	width: 7%;
	line-height: 1.5vw;
}

.quantity-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 1.75vw;
  	position: absolute;
  	top: 0;
  	right: 0;
  	color: #434B67;
  	pointer-events: none;
}

.quantity-select {
	width: 100%;
	padding: 0 !important;
	line-height: 1.5vw;
	font-size: 1.5vw;
	text-align: left;
	color: #999;
	border-radius: 0;
	background: white;
	-ms-appearance: none;
	-webkit-appearance: none; /* Here's the code we need to hide arrow */
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}

.product-price {
	font-size: 1.75vw;
}

#buy-wrapper, #add-wrapper, #favorites-wrapper {
	position: relative;
	width: 100%;
}

#buy-wrapper:after, #add-wrapper:after, #favorites-wrapper:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 5.5%;
	height: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3%;
	visibility: hidden;
}

#buy-button, #add-button {
	width: 100%;
	padding: 1.125vw; /* The vw unit makes padding looks same on all devices */
	border: 1px solid black;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: black;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#buy-button:hover, #add-button:hover {
	color: black;
	background-color: transparent;
}

#buy-button:active, #add-button:active {
	color: white;
	background-color: black;
}

#buy-button:disabled, #add-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

#favorites-button {
	width: 100%;
	padding: 1.125vw; /* The vw unit makes padding looks same on all devices */
	border-radius: 50px 50px;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	background-color: transparent;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#favorites-button:hover {
	opacity: 0.8;
}

.add-favorites {
	border: 1px solid black;
	color: black;
}

.remove-favorites {
	border: 1px solid #E86F68;
	color: #E86F68;
}

.accordionProduct { /* Styles for accordion */
	width: 100%;
	padding: 3.5%;
	border-bottom: 1px solid #ebebeb;
	font-size: 1.75vw;
	text-align: left;
	color: #999;
	background-color: white;
    cursor: pointer;
}

.accordionProduct:hover {
	color: #666;
}

.accordionProduct:active {
	color: #999;
}

.accordionProduct:after {
    content: '\002B'; /* Unicode character for "plus" sign (+) */
    float: right;
    margin-left: 5px;
	font-size: 1.5vw;
	font-weight: bold;
	color: #999;  
}

.accodionActive:after {
    content: "\2212"; /* Unicode character for "minus" sign (-) */
}

.panelProduct {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

.panelProduct a:hover {
	color: #666;
	text-decoration: underline;
}

.panelProduct a:active {
	color: #999;
	text-decoration: none;
}

.panelProduct p { /* Styles for accordion */
	padding: 1.75% 0;
}

.divProductDescription {
	width: 100%;
}

.divMoreProducts {
	width: 100%;
}

/* 2.4 Styles for Cart */
.divCartTable {
	width: -moz-calc(100% - 110px); /* Firefox */
	width: -webkit-calc(100% - 110px); /* WebKit */
	width: -o-calc(100% - 110px); /* Opera */
	width: calc(100% - 110px); /* Standard */
	margin: 0 55px 10px 55px;
}

.divCartCell {
	padding: 0.5%;
	font-size: 1.5vw;
	text-align: left;
}

.divCartCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.divCartCell h2 {
	font-size: 2.5vw;
	color: #666;
}

.divCartCell hr {
	height: 1px;
	border-width: 0;
	color: #ebebeb;
	background-color: #ebebeb;
}

.divCartFlex {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.divCartContainer {
	width: 65%;
	padding-right: 1.5%;
}

.divCartBox {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2.5%;
	border: 1px solid #ebebeb;
	border-radius: 5px;
	transition: 0.2s;
}
/*
.divCartBox:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	/*transform: scale(1.005);*
}
*/
.divCartBox:last-of-type {
	margin-bottom: 0;	
}

.divCartBox a {
	color: #666;
	text-decoration: none;
}

.divCartBox a:hover {
	color: #999;
	text-decoration: underline;
}

.divCartBox a:active {
	color: #666;
	text-decoration: none;
}

.cart-photo {
	width: 30%;
	border-radius: 5px 0 0 5px;
	background-color: #ccc; /* rgba(0, 0, 0, 0.5) */
}

.cart-photo img {
	width: 100%;
	border-radius: 5px 0 0 5px;
	vertical-align: text-bottom;
	/*object-fit: cover;*/
}

.cart-info {
	width: 70%;
	font-size: 1.5vw;
}

.cart-info > div {
	padding: 1% 2%;
}

.cart-info h3 {
	font-size: 2vw;
	font-weight: normal;
}

.cart-wrapper {
	display: inline-block;
	position: relative;
	width: 3vw;
	line-height: 1.5vw;
}

.cart-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	position: absolute;
  	top: 0;
	right: 0;
	font-size: 1.75vw;
  	color: #434B67;
	pointer-events: none;
}

.cart-select {
	width: 100%;
	line-height: 1.5vw;
	font-size: 1.5vw;
	text-align: left;
	color: #999;
	background: white;
	-ms-appearance: none;
	-webkit-appearance: none; /* Here's the code we need to hide arrow */
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}

.cart-action-button {
	display: inline-block;
	padding: 0.5vw 0;
	font-size: 1.5vw;
	text-decoration: underline;
	color: #20C1BD;
	background-color: #fff;
	cursor: pointer;
}

.cart-action-button:hover {
	text-decoration: none;
}

.cart-action-button:active {
	text-decoration: underline;
}

.cart-action-button:disabled {
	cursor: not-allowed;
}

.cart-total { /*************** Not using this style *******************/
	width: 15%;
	display: flex;
  	align-items: center;
	justify-content: center;
	font-size: 1.75vw;
	font-weight: bold;
	color: #222;
	text-align: center;
	vertical-align: middle;
}

.divSummaryContainer {
	width: 35%;
	/* border: 1px solid #ebebeb;
	border-radius: 5px; */
	vertical-align: top;
	transition: 0.2s;
}

.divSummaryBox {
	width: 100%;
	border: 1px solid #ebebeb;
	border-radius: 5px;
	/* position: sticky; Make this box move down on scroll */
}

.divSummaryBox > div:nth-last-child(1n+3) {
	display: table;
	width: 100%;
	padding: 1.5% 2.5%;
}

.divSummaryBox > div:last-child {
	padding: 2.5%;
}

.summary-text {
	display: table-cell;
	width: 70%;
}

.summary-price {
	display: table-cell;
	width: 30%;
	text-align: right;
}

#checkout-wrapper {
	position: relative;
	width: 100%;
	/* margin-bottom: 0.5vw; */
}

#checkout-wrapper:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 7%;
	height: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3%;
	visibility: hidden;
}

#checkout-button {
	width: 100%;
	/*padding: 1.5vw 2vw; /* The vw unit makes padding looks same on all devices */
	padding: 1.125vw; /* class shopping-button */
	border: 1px solid black;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	font-weight: normal;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: black;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#checkout-button:hover {
	color: black;
	background-color: transparent;
}

#checkout-button:active {
	color: white;
	background-color: black;
}

/* 2.5 Styles for Shipping, Review, Confirmation */
.divCheckoutHeaderTable {
	display: table;
	table-layout: fixed; /* Set columns with equal widths */
	width: -moz-calc(100% - 110px); /* Firefox */
	width: -webkit-calc(100% - 110px); /* WebKit */
	width: -o-calc(100% - 110px); /* Opera */
	width: calc(100% - 110px); /* Standard */
	margin: 0 55px 0 55px; /* 0 55px 2.5% 55px */
	/* border: 1px solid red; */
}

.divCheckoutHeaderCell {
	width: 25%;
	display: table-cell;
	padding: 0.5%;
	text-align: center;
	/* border-bottom: 6px solid blue; */
}

.border-black {
	border-bottom: 6px solid #333 !important;
}

.border-gray {
	border-bottom: 6px solid #ccc !important;
}

.divCheckoutBodyTable {
	width: -moz-calc(100% - 110px); /* Firefox */
	width: -webkit-calc(100% - 110px); /* WebKit */
	width: -o-calc(100% - 110px); /* Opera */
	width: calc(100% - 110px); /* Standard */
	margin: 0 55px 10px 55px;
	/* border: 1px solid blue; */
}

.divCheckoutBodyCell {
	font-size: 1.5vw;
	text-align: left;
	/* border: 1px solid blue; */
}

.divCheckoutBodyCell:nth-of-type(1) {
	padding: 0.5%;
	/* border: 1px solid red; */
}

.divCheckoutBodyCell:nth-of-type(2) {
	display: flex;
	flex-direction: row;
	/* border: 1px solid blue; */
}

.divCheckoutBodyCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.divCheckoutBodyCell h2 {
	font-size: 2.5vw;
	color: #666;
}

.divCheckoutBodyCell input[type=text] {
	font-size: 1.5vw;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

.divCheckoutBodyCell input[type=text]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 1.5vw;
	color: #ccc;
}
	
.divCheckoutBodyCell input[type=text]::-ms-input-placeholder,
.divCheckoutBodyCell input[type=text]:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	font-size: 1.5vw;
	color: #ccc;
}

.divCheckoutInfo {
	width: 65%;
	padding: 0 1.5% 0 0;
	/* border: 1px solid black; */
	/* vertical-align: top; */
}

.divCheckoutCart {
	width: 35%;
	/* border: 1px solid purple; */
	/* vertical-align: top; */
}

#divOrderConfirmation {
	padding: 2%;
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 5px solid #20C1BD; /* #33CC66 */
	border-radius: 0;
	line-height: 1.5;
	color: #20C1BD; /* #0f3e1e */
	background-color: #d3f8f7; /* rgb(51, 204, 102, 0.5) */
}

#divOrderConfirmation h2 {
	color: #20C1BD; /* #0f3e1e */
	margin-bottom: 0.75%;
}

.divUserData {
	position: relative;
	padding: 1%;
	border: 1px solid #ebebeb;
	border-radius: 5px;
}

.divUserData h2 {
	margin-bottom: 0.75%;
}

.divUserData p {
	line-height: 1.5;
}

.divUserData a {
	position: absolute;
	top: 6.5%;
	transform: translateY(-6.5%);
  	right: 10px;
	font-size: 1.5vw;
	color: #20C1BD;
}

.divUserData img {
	margin-top: 1%;
}

.divUserData img[src="images/paypal-logo.png"] {
	width: 15%;
}

.divUserData img[src="images/amazon-pay-logo.png"] {
	width: 25%;
}

.divUserData img[src="images/google-pay-logo.png"] {
	width: 12%;
}
/*#shipping-form {
	border: 1px solid orange;
}*/
#shipping-form > div:not(#shipping-details):not(#email-row):not(#phone-row) {
	padding: 1%;
}

#shipping-form > div#email-row {
	padding: 1%;
}

#shipping-form > div#phone-row {
	padding: 1%;
}

#shipping-details {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	/* border: 1px solid blue; */
}

#shipping-details > div {
	padding: 1%;
	/* border: 1px solid black; */
}

.shipping-message {
	display: none;
	color: #E86F68; /*#666;*/
}

#state-wrapper {
	width: 50%;
	position: relative;
	display: inline-block;
	text-align: center;
}

#state-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 1.75vw;
  	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	right: 10px;
  	pointer-events: none;
}

#shipping-state {
	border-radius: 5px;
	width: 100%;
	padding: 3.5%;
	font-size: 1.5vw;
	-webkit-appearance: none; /* Here's the code we need to hide arrow */
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}

#country-wrapper {
	width: 50%;
	position: relative;
	text-align: center;
}

#country-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	font-size: 1.75vw;
  	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	right: 10px;
  	color: #999;
  	pointer-events: none;
}

#shipping-country {
	background: #ddd;
	border: 1px solid #999;
	border-radius: 5px;
	width: 100%;
	padding: 3.5%;
	font-size: 1.5vw;
	color: #999;
	-webkit-appearance: none; /* Here's the code we need to hide arrow */
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
}

.valid-field { /* gray-field */
	color: #999;
	border: 1px solid #999;
	background-color: transparent;
}

.invalid-field { /* red-field */
	/* color: #E86F68; */
	border: 1px solid #E86F68;
	/* background-color: rgba(232, 111, 104, 0.4); */
}

#shipping-street,
#shipping-apartment,
#delivery-state,
#shipping-city,
#shipping-code,
#shipping-name,
#shipping-lastname,
#shipping-email,
#shipping-phone {
	width: 50%;
	padding: 1.75%;
}

#payment-wrapper {
	position: relative;
	width: 100%;
}

#payment-wrapper:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 6.5%; /* 8.5% */
	height: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3%;
	visibility: hidden;
}

#payment-button {
	width: 100%;
	padding: 1.125vw;
	border: 1px solid black;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	font-weight: normal;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: black;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#payment-button:hover {
	color: black;
	background-color: transparent;
}

#payment-button:active {
	color: white;
	background-color: black;
}

/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	font-size: 1.75vw;
	/* line-height: 1; */
	color: #666;
	cursor: pointer;
	vertical-align: text-bottom; /*bottom*/
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 20vw !important;
	background-color: #555;
	font-size: 1.125vw;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	padding: 0.75vw;
	/* Position the tooltip text */
	position: absolute;
	z-index: 1;
	top: 50%;
	transform: translateY(-50%);
	left: 135%;
	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
	content: " ";
	position: absolute;
	top: 50%;
	right: 100%; /* To the left of the tooltip */
	margin-top: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent #555 transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

#divPaymentInfo { /***** Check if style is been used *******/
	/* border: 1px solid blue; */
	display: none;
}

#divSummaryInfo { /***** Check if style is been used *******/
	/* border: 1px solid red; */
	display: none;
}

.divCartInfo {
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #ebebeb;
	border-radius: 5px;
}

.divCartSummary {
	position: relative;
	border-bottom: 1px solid #ebebeb; 
}

.divCartSummary > div {
	padding: 2%;
}

.divCartSummary a {
	position: absolute;
	top: 8%;
	transform: translateY(-8%);
  	right: 10px;
	font-size: 1.5vw;
	color: #20C1BD;
}

.divCartSummary > div:nth-child(5) {
	padding-top: 0;
	padding-bottom: 0;
}

.divCartSummary > div:nth-child(5) hr {
	height: 1px;
	border-width: 0;
	color: #ebebeb;
	background-color: #ebebeb;
}

/* The radio button container */
.container {
	display: block;
	width: fit-content;
	position: relative;
	padding-left: 2.25vw; /* Percentage doesn't display horizontal spaces accurately 3.75% */
	margin-bottom: 1.25vw; /* 1.5% */
	font-size: 1.5vw;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Remove margin for last radio button */
.container:last-of-type {
	margin-bottom: 0;
}
  
/* Hide the browser's default radio button */
.container input {
	position: absolute;
	opacity: 0;
}
  
/* Create a custom radio button */
.checkmark {
	position: absolute;
	top: 0.3vw;
	left: 0;
	height: 1.5vw;
	width: 1.5vw;
	background-color: transparent;
	border-radius: 50%;
	border-width: 1px;
	border-style: solid;
	border-color: #999;
	cursor: pointer;
}
  
/* On mouse-over, add a grey background color */
.checkmark:hover {
	border-color: #666;
}
  
/* When the radio button is checked, add a blue border */
.container input:checked ~ .checkmark {
	border-color: #2196F3;
}
  
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
  
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
	display: block;
}
  
/* Style the indicator (dot/circle) */
.container .checkmark:after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0.75vw;
	height: 0.75vw;
	border-radius: 50%;
	background: #2196F3;
}

/* Text format for prices */
.container p {
	font-weight: bold;
	color: #222;
}

.summary-table {
	width: 100%;
	/* border: 1px solid blueviolet; */
}

.summary-left {
	width: 70%;
	text-align: left;
}

.summary-right {
	width: 30%;
	text-align: right;
}

.divCartItems {
	-ms-flex: 1;
	flex: 1;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: auto !important;
	/* border: 1px solid purple;
	max-height: 150px;
	padding-bottom: 1px;
	margin-bottom: -1px; */
}

.items-table {
	width: 100%;
	/* border: 1px solid blueviolet; */
}

.items-left {
	width: 30%;
	padding: 2%;
	border-bottom: 1px solid #ebebeb;
}

.items-left img {
	width: 100%;
	vertical-align: middle;
}

/* This element acts like an image tag */
.thumbnail {
	position: relative;
	width: 100%;
	max-width: 750px;
	height: 0;
	max-height: 482px;
	box-sizing: content-box;
	padding-bottom: 63%; /* Aspect ratio of the width/height */
	border-radius: 5px;
  	background-color: #ccc;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;	
}

.items-left .thumbnail {
	width: 100%;
	vertical-align: middle;
}

.items-right {
	width: 70%;
	padding: 2%;
	border-bottom: 1px solid #ebebeb;
	vertical-align: top;
}

.items-right p {
	/* padding-top: 2%; */
	line-height: 1.35;
	font-size: 1.25vw;
}

.items-right p:first-of-type {
	color: #666;
}

.divCartButtons {
	padding: 2.5%;
	/* background-color: #20C1BD; */
}

/* #divCartPayPal {
	padding: 0 0 1.125% 0;
} */

#paypal-button {
	width: 100%;
	padding: 1.125vw;
	background-color: #0070BA;
	border-radius: 50px 50px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.75vw;
	font-style: oblique;
	font-weight: bold;
	color: white;
	cursor: pointer;
}

#paypal-button:hover {
	background-color: #006bb3;
	color: #f2f2f2;	
}

#divCartAmazon {
	padding: 1.125% 0 1.125% 0;
}

#divCartGoogle {
	padding: 1.125% 0 0 0;
}

.divCheckoutFooterTable {
	display: table;
	width: -moz-calc(100% - 110px); /* Firefox */
	width: -webkit-calc(100% - 110px); /* WebKit */
	width: -o-calc(100% - 110px); /* Opera */
	width: calc(100% - 110px); /* Standard */
	margin: 0 55px 10px 55px;
	padding: 0.5%;
	text-align: center;
	/* border: 1px solid purple; */
}

.divCheckoutFooterTable a {
	color: #20C1BD;
}

.divCheckoutFooterTable a:hover {
	text-decoration: underline;
}

.divCheckoutFooterTable a:active {
	text-decoration: none;
}

/* 2.6 Styles for Signin */
#signinContainer {
	width: 35%;
	margin: 5% auto 5% auto;
	border: 1px solid #ddd;
	background-color: white;
	border-radius: 5px;	
}

#signin-form > div {
	padding: 3% 6%;
	font-size: 1.5vw;
	text-align: center;
}

.signin-alert {
	display: none;
	color: rgba(232, 111, 104, 1);
}

#signin-form > div.signin-alert:nth-child(4),
#signin-form > div.signin-alert:nth-child(6) {
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
}

#signin-form > div:nth-child(7) {
	padding-top: 1.5%;
	padding-bottom: 1.5%;
}

#signin-form > div:nth-child(9) {
	padding-top: 1.5%;
}

.alert_message {
	width: auto;
	padding: 2%;
	text-align: left;
	color: #666;
	background-color: rgba(232, 111, 104, 0.5);
	border-left: solid 3px rgba(232, 111, 104, 1);
}

#signin-form > div h2 {
	font-weight: normal;
}

#signin-form > div a {
	color: #20C1BD;
	text-decoration: none;
}

#signin-form > div a:hover {
	text-decoration: underline;
}

#signin-form > div a:active {
	text-decoration: none;
}

#signin-form > div label {
    display: block;
    width: 100%;
	margin: 0 auto;
    position: relative;
}

#signin-form > div input[type=text],
#signin-form > div input[type=password] {
	width: 100%;
	padding: 2.5%;
	font-size: 1.5vw;
	color: #999;
	border: 1px solid #ddd; /*#ebebeb*/
	background-color: transparent;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#signin-form > div span {
    position: absolute;
    display: block;
	top: 50%;
	transform: translateY(-50%);
	background-color: white;
	padding-left: 1%;
	padding-right: 1%;
    left: 5px;
    color: #ebebeb;
	font-size: 1.5vw;
    transition: .3s ease;
}

#signin-form > div input:focus + span {
    transform: translateY(-150%);
	color: #999;
}

#signin-wrapper {
	position: relative;
	width: 100%;
}

#signin-wrapper:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 7.25%; /* 8.5% */
	height: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3%;
	visibility: hidden;
}

#signin-button {
	width: 100%;
	padding: 1.125vw;
	border: 1px solid black;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	font-weight: normal;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: black;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#signin-button:hover {
	color: black;
	background-color: transparent;
}

#signin-button:active {
	color: white;
	background-color: black;
}

/* .divLoginCell label {
	display: flex;
	flex-direction: column-reverse;
	width: 50%;
	margin: 0 auto;
	border: 1px solid red;
}

.divLoginCell label > span {
	transition: all .2s;
	transform-origin: top left;
}

.divLoginCell label > input[placeholder = " "]:not(:focus):placeholder-shown + span {
	transform: translateY(1em) scale(1.25);
	pointer-events: none;
	opacity: .5;
}

#login-email::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ *
	font-size: .25vw;
	position: absolute;
	bottom: 0;
	right: 0;
} */

/* .divLoginCell input, .divLoginCell label {
    display: block;
} */

/* input {
    height: 30px;
    padding: 5px;
} */
/* .divLoginCell label {
    display: block;
    width: 100%;
	margin: 0 auto;
    position: relative;
    /* padding-top: 20px;
    margin-top: 20px; */
	/* border: 1px solid red; *
}

/* 2.7 Styles for Forgot */
#forgotContainer {
	width: 35%;
	margin: 5% auto 5% auto;
	border: 1px solid #ddd;
	background-color: white;
	border-radius: 5px;	
}

#forgot-form > div {
	padding: 3% 6%;
	font-size: 1.5vw;
	text-align: center;
}

#forgot-form > div.forgot-alert:nth-child(4) {
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
}

#forgot-form > div:nth-child(5) {
	padding-top: 1.5%;
	padding-bottom: 1.5%;
}

#forgot-form > div:nth-child(7) {
	padding-top: 1.5%;
}

.forgot-alert {
	display: none;
	color: rgba(232, 111, 104, 1);
}

.forgot-message {
	width: auto;
	padding: 2%;
	text-align: left;
	color: #666;
	background-color: rgba(232, 111, 104, 0.5);
	border-left: solid 3px rgba(232, 111, 104, 1);
}

#forgot-form > div h2 {
	font-weight: normal;
}

#forgot-form > div a {
	color: #20C1BD;
	text-decoration: none;
}

#forgot-form > div a:hover {
	text-decoration: underline;
}

#forgot-form > div a:active {
	text-decoration: none;
}

#forgot-form > div label {
    display: block;
    width: 100%;
	margin: 0 auto;
    position: relative;
}

#forgot-form > div input[type=text],
#forgot-form > div input[type=password] {
	width: 100%;
	padding: 2.5%;
	font-size: 1.5vw;
	color: #999;
	border: 1px solid #ddd;
	background-color: transparent;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#forgot-form > div span {
    position: absolute;
    display: block;
	top: 50%;
	transform: translateY(-50%);
	background-color: white;
	padding-left: 1%;
	padding-right: 1%;
    left: 5px;
    color: #ebebeb;
	font-size: 1.5vw;
    transition: .3s ease;
}

#forgot-form > div input:focus + span {
    transform: translateY(-150%);
	color: #999;
}

#forgot-wrapper {
	position: relative;
	width: 100%;
}

#forgot-wrapper:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 7.25%; /* 8.5% */
	height: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3%;
	visibility: hidden;
}

#forgot-button {
	width: 100%;
	padding: 1.125vw;
	border: 1px solid black;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	font-weight: normal;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: black;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#forgot-button:hover {
	color: black;
	background-color: transparent;
}

#forgot-button:active {
	color: white;
	background-color: black;
}

/* 2.8 Styles for My Account */
.divMyAccountTable {
	/* Firefox */
	width: -moz-calc(100% - 110px);
	/* WebKit */
	width: -webkit-calc(100% - 110px);
	/* Opera */
	width: -o-calc(100% - 110px);
	/* Standard */
	width: calc(100% - 110px);
	margin: 0 55px 10px 55px;
}

.divMyAccountCell {
	padding: 0.5%;
	text-align: left;
}

.divMyAccountCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.navigation-container {
	display: table;
	width: 100%;
}

.navigation-box {
	display: table-cell;
}

.navigation-sidebar {
	width: 100%;
	border-radius: 5px;
	background-color: #333; /* #5D5C61 #d3f8f7 */
}

.navigation-sidebar a {
	display: block;
	padding: 16px; /* 6.5% */
	font-size: 1.5vw;
	text-align: left;
	text-decoration: none;
	color: #199a97; /* #20C1BD */
	transition: 0.4s;
}

.navigation-sidebar a:first-child {
	border-bottom: 1px solid #20C1BD;
	text-align: center;
}

.navigation-sidebar a:nth-child(n+2):hover:not(.navigation-active) {
	color: white;
	background-color: rgb(32, 193, 189, 0.8);
}

.navigation-sidebar a:last-child {
	border-top: 1px solid #20C1BD;
	border-radius: 0;
}

.navigation-sidebar a.navigation-active {
	color: white;
	background-color: #20C1BD;
	pointer-events: none;
}

.navigation-sidebar h3 {
	margin-top: 10px;
	font-size: 1.75vw;
	font-weight: normal;
	color: #199a97;
}

.navigation-sidebar a:first-child img {
	width: 40%;
	vertical-align: top;
	border-radius: 50%;
}

.navigation-sidebar i {
	margin-right: 5px;
}

.navigation-sidebar a:first-child i {
	margin-right: 0;
	font-size: 6.75vw;
}

.navigation-content {
	display: table-cell;
	width: 79%;
	padding: 0 1.5%; /*Quede aca. Cambiar paddings dependiendo del tamano de navegador*/
	/* border: 1px solid red; */
	vertical-align: top;
	font-size: 1.5vw;
	-webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect { /* Fade in tabs */
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect { /* Fade in tabs */
    from {opacity: 0;}
    to {opacity: 1;}
}

.divCategoriesContainer {
	width: 100%;
	text-align: left;
	/* border: 1px solid red; */
}

.divCategoriesContainer > div {
	padding: 1.5%;
	border-bottom: 1px solid #ddd;
	/* border: 1px solid green; */
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}

.divCategoriesContainer > div:nth-of-type(3) {
	border-bottom: none;
}

.divCategoriesContainer h3 {
	font-size: 2.5vw;
	font-weight: normal;
	color: #666;
}

#account-new-item {
	width: 25%;
	padding: 1.5vw;
	margin: 0;
	outline: none;
	border: none;
	border-radius: 50px;
	font-size: 1.5vw;
	font-weight: normal;
	text-transform: capitalize;
	text-align: center;
	background-color: DodgerBlue;
	color: white;
	cursor: pointer;
	transition: .3s;
}

#account-new-item:hover {
	background-color: #4da6ff;
}

.categories-wrapper {
	position: relative;
	width: auto;	
}

/* .divCategoriesContainer > div:nth-of-type(3) .categories-wrapper {
	display: none;
} */

.categories-wrapper:after {
	font-family: FontAwesome;
  	content: '\f107';
  	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	right: 10px;
	font-size: 1.75vw;
  	color: #434B67;
	pointer-events: none;
}

.categories-select {
	width: 100%;
	padding: 1.25vw 3vw 1.25vw 1.25vw;
	font-size: 1.5vw;
	text-align: left;
	color: #999;
	background: white;
	outline: none;
	border: 1px solid #ddd;
	border-radius: 50px;
	cursor: pointer;
	-ms-appearance: none;
	-webkit-appearance: none; /* Here's the code we need to hide arrow */
	-moz-appearance: none;
	-o-appearance: none;
	appearance: none;
}

.account-action-button {
	display: inline-block;
	width: auto;
	padding: .5vw 1.5vw;
	border: 1px solid #20C1BD;
	border-radius: 50px;
	font-size: 1.5vw;
	font-weight: normal;
	text-transform: capitalize;
	text-align: center;
	background-color: rgb(211, 248, 247, 1);
	color: #20C1BD;
	cursor: pointer;
	transition: .3s;
}

.account-action-button:hover {
	background-color: rgb(211, 248, 247, 0.5);
}

.account-action-button:disabled {
	cursor: not-allowed;
}

.divProductsContainer {
	width: 100%;
}

.divProductsBox {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	margin-bottom: 2.5%;
	border: 1px solid #ebebeb;
	border-radius: 5px;
}

.divProductsBox:last-of-type {
	margin-bottom: 0;
}

.divProductsPhoto {
	width: 25%;
	border-radius: 5px 0 0 5px;
	background-color: #ccc; /* rgba(0, 0, 0, 0.5) */
}

.divProductsPhoto img {
	width: 100%;
	border-radius: 5px 0 0 5px;
	vertical-align: text-bottom;
}

.divProductsInfo {
	width: 75%;
	padding: 1% 2%;
	line-height: 1.75;
	font-size: 1.5vw;
}

.divProductsInfo h3 {
	font-size: 2vw;
	font-weight: normal;
}

.divProductsInfo a {
	color: #666;
	text-decoration: none;
}

.divProductsInfo a:hover {
	color: #999;
	text-decoration: underline;
}

.divProductsInfo a:active {
	color: #666;
	text-decoration: none;
}

/* 2.9 Styles for Listing */
#listing-container {
	/* Firefox */
	width: -moz-calc(100% - 110px);
	/* WebKit */
	width: -webkit-calc(100% - 110px);
	/* Opera */
	width: -o-calc(100% - 110px);
	/* Standard */
	width: calc(100% - 110px);
	margin: 0 55px 0 55px;
	/* border: 1px solid black; */
}

/* #listing-form {
	border: 1px solid green;
} */

#listing-form > div {
	padding: 0.5%;
	font-size: 1.5vw;
	text-align: left;
	/* border: 1px solid blue; */
}

#listing-form h1 {
	font-size: 3.75vw;
	color: #222;
}

#listing-form h2 {
	font-size: 2.5vw;
	color: #666;	
}

#listing-form h2#photos {
	display: inline-block;	
}

/* Styles for links */
#listing-form a {
	color: #20C1BD;
}

#listing-form a:hover {
	text-decoration: underline;
}

#listing-form a:active {
	text-decoration: none;
}

#listing-form hr {
	height: 1px;
	border-width: 0;
	color: #ccc;
	background-color: #ccc;
}

#pencil-button {
	width: 5%;
	padding: 0.125vw;
	border: 1px solid white;
	border-radius: 50px 50px;
	color: #222;
	font-size: 1.5vw;
	background-color: white;
	cursor: pointer;
	transition-duration: 0.4s;
}

#pencil-button:hover {
	border: 1px solid #222;
	color: white;
	background-color: #222;
}

/* Styles to display alert messages */
.listing-alert {
	display: none;
	color: rgba(232, 111, 104, 1);
}

/* Styles for category select */
.category-container {
	display: none;
	-webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

#category-wrapper {
	width: 100%;
	/* height: 150px;
	overflow-y: auto; */
	position: relative;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: transparent;
	text-align: left;
}

#category-modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: whitesmoke;
	opacity: 0.5;
	z-index: auto;
	visibility: hidden;
}

#category-modal:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	width: 50px;
	height: 50px;
	visibility: hidden;
}

#category-wrapper h3 {
	width: 100%;
	padding: 1.25%; /*1.75%*/
	border-bottom: 2px solid #ccc;
	/* border: 1px solid red; */
	font-size: 2.25vw;
	color: #999;
}

#category-wrapper button {
	position: relative;
	width: 100%;
	border-bottom: 1px solid #ccc;
	/* border: 1px solid red; */
	padding: 1.25%; /*1.75%*/
	text-align: left;
	background-color: transparent;
	font-size: 1.5vw;
	color: #999;
	cursor: pointer;
	transition-duration: 0.4s;
}

#category-wrapper button:last-child {
	border-bottom: none;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#category-wrapper button:hover:not(.active-button) {
	background-color: #f5f5f5;	
}

#category-wrapper button.active-button {
	/*border-left: 3px solid #b3b3b3;
	background-color: #ebebeb; /*#ddd*/
	/* border-left: 3px solid #20C1BD; */
	color: #20C1BD;
	background-color: #d3f8f7;
	/* border-left: 3px solid dodgerblue;
	color: dodgerblue;
	background-color: #cce6ff; */
}

#category-wrapper button i {
	position: absolute;
  	top: 50%;
	transform: translateY(-50%);
  	right: 10px;
	font-size: 2vw;
	color: #20C1BD;
}

/* Styles for Photos input file */
.listing-photos {
	width: 100%;
	padding: 5%;
	border-width: 2px;
	border-style: dashed;
	border-color: #ccc;
	border-radius: 5px;
	text-align: center;
	transition-duration: 0.4s;
}

/* Style for input file */
.image-upload > input {
	display: none;
	pointer-events: visible;
}

.display-none {
	display: none;
}

.display-block {
	display: block;
}

.display-grid {
	display: grid;
}

.photos-modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	background-color: whitesmoke;
	opacity: 0.5;
	z-index: auto;
	visibility: hidden;
}

.photos-modal:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -15px;
	margin-left: -15px;
	width: 30px;
	height: 30px;
	/* visibility: hidden; */
}

.photos-modal.hidden:after {
	visibility: hidden;	
}

.photos-modal.visible:after {
	visibility: visible;	
}

/* The photo grid container */
/* .item1 {
	grid-area: MainPhoto;
	grid-area: 1 / 1 / span 2 / span 2;
	grid-row: 1 / span 2;
	grid-column: 1 / span 2;
} */

/* .item2 { grid-area: photo2; }
.item3 { grid-area: photo3; }
.item4 { grid-area: photo4; }
.item5 { grid-area: photo5; }
.item6 { grid-area: photo6; }
.item7 { grid-area: photo7; }
.item8 { grid-area: photo8; }
.item9 { grid-area: photo9; } */

:root {
	--grid-columns: 6;
	/*--grid-rows: 2;*/
	--column-gap: 10px;
	--row-gap: 10px;
}

.item1 {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

/* .product2 { grid-area: pic2; }
.product3 { grid-area: pic3; }
.product4 { grid-area: pic4; }
.product5 { grid-area: pic5; }
.product6 { grid-area: pic6; }
.product7 { grid-area: pic7; }
.product8 { grid-area: pic8; }
.product9 { grid-area: pic9; } */

.grid-container {
	/* display: grid; */
	grid-template-columns: repeat(var(--grid-columns), 1fr);
  	grid-column-gap: var(--column-gap);
  	grid-row-gap: var(--row-gap);
	justify-content: center;
	/* padding: 10px; */
	/* border: 2px dashed #ccc; */
	border-radius: 5px;
	-webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

.grid-item {
	position: relative;
	/* padding: 10%; */
	background-color: rgba(255, 255, 255, 0.8);
	border-width: 2px;
	border-style: dashed;
	border-radius: 5px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
  	align-items: center;
	/* transition: 0.3s; */
}

.grid-padding { padding: 10%; }

.grid-nopadding { padding: 0; }

.grid-bordergray { border-color:#ccc; }

.grid-borderred { border-color:rgba(232, 111, 104, 1); }

.grid-item:hover { border-color: #999; }

/* .grid-item:after { /* Place image inside div using after selector *
	content: "";
	background-image: url('images/no-image-icon.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 60px;
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	visibility: visible;
} */

button.delete-photo {
	position: absolute;
	top: 0.75vw;
	right: 0.75vw;
	width: 3.75vw;
	height: 3.75vw;
	padding: 0.5vw;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid;
	/* visibility: hidden; */
	/* transition: 0.3s; */
}

.visible {
	visibility: visible;	
}

.hidden {
	visibility: hidden;	
}

button.delete-photo:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

/* .grid-item button.delete-photo {
	visibility: hidden;
} */

/* .grid-item:hover button.delete-photo {
	visibility: visible;
} */

button.delete-photo i {
	font-size: 2vw;
	color: whitesmoke;
}

.grid-item IMG {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
}

.image-data {
	position: absolute;
	width: calc(100% - 10%);
	bottom: 0.75vw;
	padding: 0.25vw;
	border: 1px solid black;
	border-radius: 50px;
	color: whitesmoke;
	background-color: rgba(0, 0, 0, 0.7);
	font-size: 1.125vw;
	overflow-wrap: break-word; /* Long words will break if they overflow the container */
	text-align: center;
	/* visibility: hidden; */
}

#listing-miniatures {
	/* display: -ms-grid;
	display: -moz-grid;
	display: grid; */
	display: none;
	/* grid: 500px 500px / repeat(6, 500px); */
  	/* width: 100%; */
	/* align-content: center; */
	grid-template-areas:
		'MainPhoto MainPhoto photo2 photo3 photo4 photo5'
		'MainPhoto MainPhoto photo6 photo7 photo8 photo9';
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	/*grid-template-rows: repeat(var(--grid-rows), 1fr);*/
  	grid-column-gap: var(--column-gap);
  	grid-row-gap: var(--row-gap);
	justify-content: center;
	/* grid-template-columns: calc(25% - 10px) calc(15% - 10px) calc(15% - 10px) calc(15% - 10px) calc(15% - 10px) calc(15% - 10px); */
	/* grid-template-rows: 50px 50px; */
	/* gap: 10px; */
	padding: 10px;
	border: 2px dashed #ccc;
	border-radius: 5px;
	-webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

.listing-item {
	padding: 10%;
	border: 2px dashed #ccc;
	border-radius: 5px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
  	align-items: center;
}

/* Hide image tag */
.listing-item IMG {
	display: none;
	width: 100%;
	object-fit: cover;
	border-radius: 5px;
	/* align-self: center; */
}

/* Styles for input text */
#listing-title,
#listing-price,
#listing-quantity {
	padding: 1.5%;
	font-size: 1.5vw;
	color: #999;
	border: 1px solid #ddd; /*#ebebeb*/
	border-radius: 5px;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#listing-title::placeholder,
#listing-price::placeholder,
#listing-quantity::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 1.5vw;
	color: #ccc;
}

#listing-title::-ms-input-placeholder,
#listing-title:-ms-input-placeholder,
#listing-price::-ms-input-placeholder,
#listing-price:-ms-input-placeholder,
#listing-quantity::-ms-input-placeholder,
#listing-quantity:-ms-input-placeholder { /* Internet Explorer 10-11, Microsoft Edge */
	font-size: 1.5vw;
	color: #ccc;
}

#listing-title {
	width: 100%;
}

#listing-price,
#listing-quantity {
	width: 25%;
}

/* Styles for textarea */
#listing-description {
	width: 100%;
	padding: 1.5%;
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: transparent;
	font-size: 1.5vw;
	text-align: left;
	color: #999;
	-webkit-appearance: none; /* This property hides shadow */
  	-moz-appearance: none;
  	appearance: none;
	resize: none;
}

#listing-description::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 1.5vw;
	color: #ccc;
}
	
#listing-description::-ms-input-placeholder,
#listing-description:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	font-size: 1.5vw;
	color: #ccc;
}

/* Style for input text labels */
.listing-pricing {
	/* border: 1px solid red; */
	display: block;
	width: 25%;
	padding: 0.5%;
}

/* Styles for new category and list and cancel buttons */
.list-wrapper {
	position: relative;
	display: inline-block; /* Display buttons next to each other */
	width: 25%;
}

.list-wrapper:first-of-type {
	margin: 0.75% 0.75% 0.75% 0;
	/* display: none; */
}

.list-wrapper:last-of-type {
	margin: 0.75% 0 0.75% 0.75%;
}

.list-wrapper:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 10%;
	height: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 3%;
	visibility: hidden;
}

#back-category-button {
	width: 100%;
	padding: 1.125vw; /* The vw unit makes padding looks same on all devices */
	border: 1px solid dodgerblue;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: dodgerblue;
	cursor: not-allowed;
	opacity: 0.5;
	transition-duration: 0.4s;
}

/* #back-category-button:hover {
	color: dodgerblue;
	background-color: transparent;
}

#back-category-button:active {
	color: white;
	background-color: dodgerblue;
} */

#cancel-category-button {
	width: 100%;
	padding: 1.125vw;
	border: 1px solid dodgerblue;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	color: dodgerblue;
	background-color: transparent;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#list-button {
	width: 100%;
	padding: 1.125vw;
	border: 1px solid black;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: black;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#list-button:hover {
	color: black;
	background-color: transparent;
}

#list-button:active {
	color: white;
	background-color: black;
}

#cancel-button {
	width: 100%;
	padding: 1.125vw;
	border: 1px solid black;
	border-radius: 50px 50px;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	color: black;
	background-color: transparent;
	cursor: pointer;
	transition-duration: 0.4s;	
}

/* #cancel-button:hover {
	color: white;
	background-color: black;
}

#cancel-button:active {
	color: black;
	background-color: white;
} */

/* #buy-button:disabled, #add-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
} */

/* 2.10 Styles for Photo Gallery */
.row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	margin: 0 55px 10px 55px;
}

.column { /* Create four equal columns that sits next to each other */
	-ms-flex: 25%; /* IE10 */
	flex: 25%;
	max-width: 25%;
	padding: 0 4px;
}

.column img {
	margin-top: 8px;
	vertical-align: middle;
	width: 100%;
	cursor: pointer;
	transition: 0.3s;
}

.column img:hover {
	opacity: 0.8;
	/*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.modal { /* The Modal (background) */
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 999999 !important; /* 777777 1 Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

.modal-content { /* Modal Content (image) */
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
}

.caption { /* Caption of Modal Image */
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	font-size: 1.5vw;
	color: #ccc;
	padding: 10px 0;
	height: 150px;
}

.modal-content, .caption { /* Add Animation */ 
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
}

.close { /* The Close Button */
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
}

.close:hover, .close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
}

/* Modal account delete product Content/Box */
.modal-container {
	background-color: #fefefe;
	padding: 16px;
	margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	border: 1px solid #888;
	width: 80%; /* Could be more or less, depending on screen size */
	text-align: center;
}

/* Clear floats */
.modal-clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* Set a style for all buttons */
.modal-clearfix button {
	font-size: 1.5vw;
  	color: white;
  	padding: 14px 20px;
  	margin: 8px 0;
  	border: none;
  	cursor: pointer;
  	width: 100%;
	opacity: 0.9;
}

.modal-clearfix button:hover {
	opacity: 1;
}

/* Float cancel and delete buttons and add an equal width */
.modal-clearfix .cancelbtn,
.modal-clearfix .deletebtn {
	float: left;
	width: 50%;
}

/* Add a color to the cancel button */
.modal-clearfix .cancelbtn {
	background-color: #ccc;
}
  
/* Add a color to the delete button */
.modal-clearfix .deletebtn {
	background-color: DodgerBlue;
}

/* 2.11 Styles for About Us */
.divAboutUsTable {
	width: auto;
	margin: 0 55px 10px 55px;
}

.divAboutUsCell {
	padding: 0.5%;
	text-align: left;
}

.divAboutUsCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.divAboutUsContainer {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
}

.divAboutUsBox {
	width: 50%;
	font-size: 1.5vw;
	color: #222;
	text-align: left;
}

.divAboutUsBox:nth-of-type(1) {
	background-color: #d7c2a7;
	padding: 2% 12.5% 5% 5%;
}

.divAboutUsBox:nth-of-type(2) {
	background-color: #bc986a;
	padding: 2% 5% 5% 12.5%;
}

.divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(1) {
	position: absolute;
	top: 10%;
	left: 50%;
	transform: translate(-50%, -10%);
	width: 25%;
	padding: 0;
	text-align: center;
	color: white;
	line-height: 1.5;
}

.divAboutUsInfo:nth-of-type(1) IMG {
	width: 100%;
	border-radius: 50%;
	vertical-align: text-bottom;
}

.divAboutUsBox:nth-of-type(1) .divAboutUsInfo {
	padding: 1.75% 5% 1.75% 0;
}

.divAboutUsBox:nth-of-type(2) .divAboutUsInfo {
	padding: 1.75% 0 1.75% 5%;
}

.divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(1) h1, .divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(1) h2 {
	font-size: 2.25vw;
	color: #222;
}

.divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(2) h1 {
	font-size: 3.125vw;
	color: #222;
}

.divAboutUsBox:nth-of-type(2) .divAboutUsInfo:nth-of-type(1) h1 {
	font-size: 3.125vw;
	color: #222;
}

/* 2.12 Styles for Contact Us */
.divContactUsTable {
	/* Firefox */
	width: -moz-calc(100% - 110px);
	/* WebKit */
	width: -webkit-calc(100% - 110px);
	/* Opera */
	width: -o-calc(100% - 110px);
	/* Standard */
	width: calc(100% - 110px);
	margin: 0 55px 10px 55px;
}

.divContactUsCell {
	padding: 0.5%;
	text-align: left;
}

.divContactUsCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.divContactInfoContainer {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/forage-studio.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 5%;
}

.divContactInfoBox {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	font-size: 1.25vw;
	color: white;
}

.divContactInfoBox a {
	font-size: 1.25vw;
	color: #20C1BD;
}

.divContactInfoBox a:hover {
	text-decoration: underline;
}

.divContactInfoBox a:active {
	text-decoration: none;
}

.divContactInfoTable {
	width: auto;
	margin: 0 auto;
}

.divContactInfoCell {
	padding-bottom: 5%;
	line-height: 1.5;
}

.divContactInfoTable .divTableBody .divTableRow .divContactInfoCell h1 {
	font-size: 3.125vw;
	color: white;
}

.divContactInfoTable .divTableBody .divTableRow .divContactInfoCell i {
	font-size: 2.25vw;
	color: #999;
}

.divQuestionContainer {
	width: 100%;
	padding: 5%;
	text-align: center;
	background-color: #fae596; /* #fbe8a6 #bc986a #d7c2a7 */
}

.divQuestionContainer h1 {
	padding-bottom: 1%;
	font-size: 3.125vw;
	color: #222;
}

#contact-email {
	width: 50%;
	padding: 1.5%;
	font-size: 1.5vw;
	color: #222;
	border: 1px solid #222;
	background-color: transparent;
	border-radius: 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#contact-question {
	width: 50%;
	padding: 1.5%;
	font-size: 1.5vw;
	color: #222;
	border: 1px solid #222;
	border-radius: 5px;
	background-color: transparent;
	vertical-align: text-bottom;
	resize: none;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#contact-email::placeholder, #contact-question::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 1.5vw;
	color: #222;
}
	
#contact-email::-ms-input-placeholder, #contact-question:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	font-size: 1.5vw;
	color: #222;
}

.divQuestionContainer p {
	width: auto;
	font-size: 1.5vw;
	color: #222;
	padding-bottom: 0.5%;
}

.alert {
	width: auto;
	font-size: 1.5vw;
	color: red;
	padding: 0.1% 0;
}

.recaptcha {
	width: auto;
	margin: 0 auto;
	padding: 2.25% 0 2.25% 0;
}

.g-recaptcha {
	display: inline-block;
	vertical-align: text-bottom;
}

#contact-wrapper {
	position: relative;
	width: 50%;
	height: auto;
	margin: 0 auto;
}

#contact-wrapper:after { /* Place image inside div using after selector */
	content: "";
	background-image: url('images/loader.gif');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/*display: inline-block; /* This styles makes width and height proportional */
	width: 6%;
	height: 50%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
	visibility: hidden;
}

#contact-button {
	width: 100%;
	padding: 1.125vw; /* 1.5vw 2vw. The vw unit makes padding looks same on all devices */
	border: 1px solid black;
	border-radius: 50px 50px;
	color: white;
	background-color: black;
	font-size: 1.75vw;
	font-weight: normal;
	text-transform: capitalize;
	text-decoration: none;
	cursor: pointer;
	transition-duration: 0.4s;	
}

#contact-button:hover {
	color: black;
	background-color: transparent;
}

#contact-button:active {
	color: white;
	background-color: black;
}

/* 2.13 Styles for Help */
.divHelpTable {
	/* Firefox */
	width: -moz-calc(100% - 110px);
	/* WebKit */
	width: -webkit-calc(100% - 110px);
	/* Opera */
	width: -o-calc(100% - 110px);
	/* Standard */
	width: calc(100% - 110px);
	margin: 0 55px 10px 55px;
}

.divHelpCell {
	padding: 0.5%;
	text-align: left;
}

.divHelpCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.divHelpCell h2 {
	font-size: 2.5vw;
	color: #666;
}

.divHelpCell h3 {
	font-size: 2.25vw;
	color: #666;
}

.divHelpContentTable {
	width: 100%;
}

.divHelpContentTable .divTableBody .divTableRow:nth-child(1) .divHelpContentCell:only-child {
	padding: 0;
}

.divHelpContentTable .divTableBody .divTableRow:nth-child(2) .divHelpContentCell:only-child {
	padding: 0.5% 0;
}

.divHelpContentTable .divTableBody .divTableRow:nth-child(2) .divHelpContentCell:only-child h2 {
	font-size: 2.5vw;
	color: #666;
}

.divHelpHeaderContainer {
	width: 100%;
	padding: 4%;
	background-color: #5D5C61; /* #5D5C61 #fae596 */
}

.divHelpHeaderBox {
	width: auto;
	margin: 0 auto;
	text-align: center;
	line-height: 1.25;
	padding: 2%;
	background-color: #E86F68; /*#ff6666*/
	border: 5px solid #5D5C61;
	outline: 5px solid #E86F68; /*#ff6666*/
}

.divHelpHeaderContainer .divHelpHeaderBox h2 {
	font-size: 3.125vw;
	color: #E4D8B4; /* #ffffcc #323135 #c39b09*/
	text-shadow: 2px 2px 2px #705e29;
}

.divHelpTopicsContainer {
	width: 30%;
	float: left;
	padding: 0.75% 0;
}

.divHelpContentCell .divHelpTopicsContainer h2 { /* Not same size on mobile */
	font-size: 2.5vw;
	color: #666;
	margin-bottom: 7%;
}

.divHelpTopicsContainer a {
	display: block;
	width: auto;
	padding: 2%;
	margin: 3% 0;
	font-size: 1.5vw;
	color: #20C1BD;
	text-align: center;
	border: 1px solid #20C1BD;
	border-radius: 50px 50px;
	transition: 0.4s;
}

.divHelpTopicsContainer a:hover {
	text-decoration: none;
	color: white;
	background-color: #20C1BD;
}

.divHelpQuestionsContainer {
	width: 70%;
	float: left;
}

.divQuestionsTable {
	width: 100%;
}

.divQuestionsCell {
	padding: 1.15% 2%;
}

.divQuestionsTable .divQuestionsCell h2 {
	font-size: 2.5vw;	
}

.divQuestionsTable .divQuestionsCell h2 a {
	color: #666;
	text-decoration: none;
}

.divQuestionsTable .divQuestionsCell h3 {
	font-size: 2vw;
}

.divQuestionsTable .divQuestionsCell p {
	font-size: 1.5vw;
	color: #999;
}

.divQuestionsCell hr {
	height: 1px;
	border-width: 0;
	color: #ccc;
	background-color: #ccc;
}

.divMoreHelpContainer {
	width: 100%;
	clear: both;
	text-align: center;
	padding: 4%;
	background-color: #d3f8f7;
}

.divHelpContentCell .divMoreHelpContainer h2 {
	font-size: 3.125vw;
	color: #20C1BD;
}

/* 2.14 Styles for Terms, Privacy, Selling */
.divLegalTable {
	width: auto;
	margin: 0 55px 10px 55px;
}

.divLegalCell {
	padding: 0.5%;
	text-align: left;
	font-size: 1.5vw;
}

.divLegalCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.divLegalCell h2 {
	font-size: 2.5vw; /*2vw*/
	color: #666;
}

.divLegalCell h3 {
	font-size: 2vw;
	color: #666;
}

.divLegalCell h4 {
	font-size: 1.75vw;
	color: #666;
}

.divLegalCell a {
	color: #20C1BD; /* #1FA5A6 */
}

.divLegalCell a:hover {
	text-decoration: underline;
}

.divLegalCell a:active {
	text-decoration: none;
}

.uppercase {
	text-transform: uppercase;
}

.divLegalCell ul {
	list-style: none;
	padding-left: 0;
	line-height: 1.5;
}

/* 2.15 Styles for SiteMap */
.divSiteMapTable {
	width: auto;
	margin: 0 55px 10px 55px;
}

.divSiteMapCell {
	padding: 0.5%;
	text-align: left;
}

.divSiteMapCell a {
	font-size: 1.5vw;
	color: #20C1BD;
}

.divSiteMapCell a:hover {
	text-decoration: underline;
}

.divSiteMapCell a:active {
	text-decoration: none;
}

.divSiteMapCell h1 {
	font-size: 3.75vw;
	color: #222;
}

.divSiteMapCell h2 {
	font-size: 2.5vw; /* Not same size on mobile */
	color: #666;
}

.divSiteMapCell ul {
	list-style: none;
	padding-left: 0;
	line-height: 1.5;
}

.divCategoriesTable {
	display: table;
	width: 100%;
}

.divCategoriesTable:nth-of-type(1) {
	border-bottom: 1px solid #ccc;
}

.divCategoriesCell {
	display: table-cell;
}

.divCategoriesCell:nth-of-type(1) {
	width: 30%;
	padding: 2%;
	text-align: left;
	vertical-align: middle;
	border-right: 1px solid #ccc;
}

.divCategoriesCell:nth-of-type(2) {
	width: 70%;
}

.divCategoriesCell h3 {
	font-size: 2.25vw;
	color: #666;
}

.divSubcategoriesContainer {
	display: table;
	width: 100%;
	table-layout: fixed; /* Set columns with equal widths */
}

.divSubcategoriesFlex {
	display: -webkit-flex; /* Safari */
	display: flex;
	flex-wrap: wrap;
}

.divSubcategoriesList1 {
	-ms-flex: 25%; /* IE10 */
	flex: 25%;
	max-width: 25%;
	padding: 2%;
	text-align: left;
}

.divSubcategoriesList1:nth-of-type(1) {
	-ms-flex: 100%; /* IE10 */
	flex: 100%;
	max-width: 100%;
	padding: 1%;
	text-align: center;
}

.divSubcategoriesList1 h4 { /* Not same size on mobile */
	font-size: 2vw;
	color: #666;
}

.divSubcategoriesList1 h5 {
	font-size: 1.75vw;
	color: #666;
	margin-bottom: 1.5%;
}

.divSubcategoriesFlex ul {
	list-style: none;
	padding-left: 0;
	text-align: left;
}

.divSubcategoriesList2 { /* Find a better name */
	-ms-flex: 33.33%; /* IE10 */
	flex: 33.33%;
	max-width: 33.33%;
	padding: 2%;
	text-align: left;
}

.divSubcategoriesList2 h5 {
	font-size: 1.75vw;
	color: #666;
	margin-bottom: 1.5%;
}

@media screen and (max-width: 800px) {
	/* 1.4 Styles for body */
	/*.divBodyCell {
		padding: 1%;
	}*/
	
	.warning-box {
		padding: 1.25%;
		font-size: 2vw;
	}
	
	.warning-box .fa-exclamation {
		font-size: 2vw;
	}

	.info-box {
		font-size: 2vw;
	}
	
	/* 2. Styles for pages */

	/* 2.2 Styles for Shop */
	.divShopContainer > div {
		width: 50%;
	}
	
	.sort-wrapper {
		width: 100%;
		position: relative;
	}
	
	.sort-wrapper:after {
		font-size: 2.25vw;
	}
	
	.sort-by {
		padding: 2.5%;
		font-size: 2vw;
	}
	
	.shop-content h3 {
		font-size: 2.25vw;
	}
	
	.shop-content p {
		font-size: 2vw;
	}

	.shop-content .fa-heart-o {
		font-size: 2vw;
	}
	
	.shop-content .fa-heart {
		font-size: 2vw;
	}
	
	.pagination a {
		font-size: 2vw;
	}

	/* 2.8 Styles for My Account */
	.navigation-container {
		display: block;
	}

	.navigation-box {
		display: block;
	}

	.navigation-sidebar {
		display: -ms-flexbox; /* IE10 */
		display: -webkit-flex; /* Safari */
		display: flex;
		-ms-flex-wrap: wrap; /* IE10 */
		flex-wrap: wrap; 
		flex-direction: row;
		width: 100%;
	}

	.navigation-sidebar a {
		flex: 1;
		font-size: 1.75vw;
	}

	.navigation-sidebar a:first-child {
		min-width: 100%;
	}

	.navigation-sidebar a:nth-child(n+2) {
		min-width: 20%;
	}

	.navigation-sidebar a:nth-child(2) {
		border-radius: 0 0 0 5px;
	}

	.navigation-sidebar a:last-child {
		border-top: 0;
		border-radius: 0 0 5px 0;
	}

	.navigation-sidebar h3 {
		font-size: 2.25vw;
	}

	.navigation-sidebar a:first-child img {
		width: 15%;
	}
	
	.navigation-sidebar a:first-child i {
		font-size: 12vw;
	}

	.navigation-content {
		display: block;
		width: 100%;
		padding: 0;
	}
	
	/* 2.10 Styles for Photo Gallery */
	.column {
		-ms-flex: 50%;
		flex: 50%;
		max-width: 50%;
	}
  
	.caption {
		font-size: 2.25vw;
	}

}

@media only screen and (max-width:650px) {
	/* 1. Global styles */
	.divTopMenuCaption {
		text-align: center;
	}

	.divTopMenuCaption img[src="images/forage-logo.jpg"] {
		width: 20%;
	}

	#top-search-wrapper {
		display: none;
	}

	.divTopMenuCaption .fa-bars {
		display: block;	
	}

	.divTopMenuCaption .fa-user {
		right: 20%;
		font-size: 7vw;
	}

	.divTopMenuCaption .fa-shopping-cart {
		right: 2%;
		font-size: 7vw;
	}
	
	/* 1.3 Styles for header */
	.divTopMenuTable .divTableBody .divTableRow:only-child {
		display: none;
	}
	
	.divSideMenuCell {
		font-size: 3.5vw;
		padding: 2% 4%;
	}
	
	.divSideMenuCell .fa-close {
		font-size: 6vw;
	}
	
	.divSideMenuCell .fa-chevron-up {
		font-size: 3vw;
		margin-left: 3.5%;
	}
	
	.divSideMenuCell .fa-chevron-down {
		font-size: 3vw;
		margin-left: 3.5%;
	}
	
	/* 1.4 Styles for body */
	.divBodyTable { 
		margin-top: 19.75%;
	}
	
	/*.divBodyCell {
		padding: 0 4% 4% 4%;
	}*/
	
	.warning-box {
		margin: 0 2% 2% 2%;
		padding: 2%;
		font-size: 3.75vw;
	}

	.warning-box .fa-exclamation {
		font-size: 3.75vw;
	}

	.info-box {
		font-size: 3.75vw;
	}

	/* 1.5 Styles for footer */
	.divContactTable .divTableBody .divContactCell {
		padding: 2%;
		font-size: 3.5vw;
	}
	
	.divContactBox {
		width: 100%;
		font-size: 3.5vw;
	}
	
	.divContactBox:nth-of-type(1) {
		order: 1;
		padding: 2%;
	}

	.divContactBox:nth-of-type(2) {
		order: 3;
		padding: 2%;
	}

	.divContactBox:nth-of-type(3) {
		order: 5;
		padding: 2%;
	}

	.divContactBox:nth-of-type(4) {
		order: 2;
		padding: 2%;
	}
	
	.divContactBox:nth-of-type(5) {
		order: 4;
		padding: 2%;
	}
	
	.divContactBox:nth-of-type(6) {
		order: 6;
		padding: 2%;
	}
	
	.divContactBox .fa-facebook {
		font-size: 6vw;
		margin: 0 1%;
	}
	
	.divContactBox .fa-twitter {
		font-size: 6vw;
		margin: 0 1%;
	}
	
	.divContactBox .fa-pinterest-p {
		font-size: 6vw;
		margin: 0 1%;
	}
	
	.divContactBox .fa-instagram {
		font-size: 6vw;
		margin: 0 1%;
	}

	.divContactBoxCell i {
		font-size: 3.5vw;
	}
	
	#subscribe-email {
		font-size: 3.5vw;
	}
	
	#subscribe-button {
		font-size: 3.5vw;
	}

	.divContactTable .divTableBody .divTableRow:nth-child(2) .divContactCell:nth-child(1) {
		display: block;
		width: 100%;
		float: right;
		border: 1px solid blue;
	}
	
	.divContactTable .divTableBody .divTableRow:nth-child(2) .divContactCell:nth-child(2) {
		display: block;
		width: 100%;
		float: right;
		border: 1px solid purple;
	}

	.divFootCaption {
		padding: 2%;
	}
	
	.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(1) {
		display: table-row-group;
		width: 100%;
	}
	
	.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(2) {
		display: table-header-group;
		width: 100%;
	}
	
	.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(1) .divFootContainer {
		padding: 2% 2% 5% 2%;
		font-size: 3.5vw;
	}
	
	.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(2) .divFootContainer {
		padding: 2%;
		font-size: 3.5vw;
	}
	
	#divChatBox {
		width: 16%;
	}
	
	#snackbar {
		font-size: 3.5vw;
	}
	
	#divAnchorBox {
		padding: 4%;
	}
	
	#divAnchorBox .fa-arrow-up {
		font-size: 7vw;
	}
	
	.divShareCell {
		padding: 2.5%;
	}

	/* 2. Styles for pages */

	/* 2.1 Styles for Home */
	.divHomeTable {
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;
	}

	.divHomeTable .divTableBody .divTableRow:nth-child(2) .divHomeCell:only-child {
		padding: 2%;
	}

	.divHomeCell h2 {
		font-size: 5.75vw;
	}

	.divPresentationText h1 {
		font-size: 3.75vw;
	}
	
	a.shopNowButton {
		padding: 2.5vw 3vw;
		font-size: 3.75vw;
	}
	
	/* 2.2 Styles for Shop */
	.divShopTable {
		/* Firefox */
		width: -moz-calc(100% - 4%);
		/* WebKit */
		width: -webkit-calc(100% - 4%);
		/* Opera */
		width: -o-calc(100% - 4%);
		/* Standard */
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;
	}

	.divShopCell {
		padding: 2%;
		font-size: 3.75vw;
	}
	
	.divShopHeader h2 {
		position: relative;
		font-size: 5.75vw;
	}
	
	.divShopHeader > div:nth-of-type(1) {
		width: 100%;
		padding: 2% 0;
		text-align: left;
	}
	
	.divShopHeader > div:nth-of-type(2) {
		width: 100%;
		padding: 2% 0;
		text-align: left;
	}

	.sort-wrapper {
		width: 100%;
		margin: 0; /*  0 auto 0 0 */
	}
	
	.sort-wrapper:after {
		font-size: 5vw;
	}
	
	.sort-by {
		font-size: 3.75vw;
	}
	
	.divShopContainer > div {
		width: 100%;
		padding: 8px 0 0 0;
	}
	
	.shop-content h3 {
		font-size: 4vw;
	}
	
	.shop-content p {
		font-size: 3.75vw;
	}

	.shop-content .fa-heart-o {
		font-size: 3.75vw;
	}
	
	.shop-content .fa-heart {
		font-size: 3.75vw;
	}
	
	.pagination {
		padding-top: 5%;
	}
	
	.pagination a {
		font-size: 3.75vw;
	}

	/* 2.3 Styles for Product */
	.divProductTable {
		margin: 0 2% 2% 2%;
	}

	.divProductCell {
		padding: 2%;
		font-size: 3.75vw;
	}

	.divProductCell h2 {
		font-size: 5.75vw;
	}

	.divProductBox:nth-of-type(1) {
		width: 100%;
	}

	.main-photo {
		padding: 0 0.75vw;
	}

	.miniature-box div { /* Replace name for thumbnail-box */
		padding: 0 0.75vw;
	}
	
	.miniature-photo { /* Replace name for product-thumbnails */
		margin-top: 1.5vw;
		/*margin-bottom: 1.5vw;*/
	}

	.divProductBox:nth-of-type(2) {
		width: 100%;
	}

	.divProductBox:nth-of-type(2) div.product-detail {
		font-size: 3.75vw;
	}

	.divProductBox:nth-of-type(2) div.product-detail h1 {
		font-size: 7vw;
	}

	.quantity-wrapper {
		width: 8%;
		line-height: 3.75vw;
	}
	
	.quantity-wrapper:after {
		font-size: 4vw;
	}
	
	.quantity-select {
		line-height: 3.75vw;
		font-size: 3.75vw;
	}

	.product-price {
		font-size: 4vw;
	}

	#buy-wrapper:after, #add-wrapper:after, #favorites-wrapper:after {
		width: 7%;
	}

	#buy-button, #add-button {
		padding: 3vw;
		font-size: 4.25vw;
	}

	#favorites-button {
		padding: 3vw;
		font-size: 4.25vw;
	}

	.accordionProduct { /* Styles for accordion */
		padding: 5%;
		font-size: 3.75vw;
	}

	.accordionProduct:after {
		font-size: 3.75vw;
		margin-left: 5px;
	}

	.panelProduct p { /* Styles for accordion */
		padding: 2% 0;
	}

	/* 2.4 Styles for Cart */
	.divCartTable {
		/* Firefox */
		width: -moz-calc(100% - 4%);
		/* WebKit */
		width: -webkit-calc(100% - 4%);
		/* Opera */
		width: -o-calc(100% - 4%);
		/* Standard */
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;
	}

	.divCartCell {
		padding: 2%;
		font-size: 3.75vw;
	}
	
	.divCartCell h1 {
		font-size: 7vw;
	}

	.divCartCell h2 {
		font-size: 5.75vw;
	}

	.divCartContainer {
		width: 100%;
		padding-right: 0;
	}

	.divCartBox {
		margin-bottom: 4%;
	}

	.cart-photo {
		width: 100%;
		border-radius: 5px 5px 0 0;
	}

	.cart-photo img {
		border-radius: 5px 5px 0 0;
	}
	
	.cart-wrapper {
		width: 8vw;
		line-height: 3.75vw;
	}
	
	.cart-wrapper:after {
		font-size: 4vw;
	}
	
	.cart-select {
		line-height: 3.75vw;
		font-size: 3.75vw;
	}

	.cart-action-button {
		padding: 1vw 0;
		font-size: 3.75vw;
	}

	.cart-info {
		width: 100%;
		font-size: 3.75vw;
	}

	.cart-info > div {
		padding: 2%;
	}

	.cart-info h3 {
		font-size: 5.25vw;
	}

	.cart-total { /* Not using this style */
		width: 25%;
		font-size: 3.75vw;
	}

	.divSummaryContainer {
		width: 100%;
		margin-top: 4%;
	}

	/* .divSummaryBox > div {
		padding: 2%;
	} */

	/* #checkout-wrapper {
		margin-bottom: 2vw;
	} */

	#checkout-wrapper:after {
		width: 7%;
	}
	
	#checkout-button {
		/* width: 100%; */
		padding: 3vw;
		font-size: 4.25vw;	
	}

	/* 2.5 Styles for Shipping, Review, Confirmation */
	.divCheckoutHeaderTable {
		width: -moz-calc(100% - 4%); /* Firefox */
		width: -webkit-calc(100% - 4%); /* WebKit */
		width: -o-calc(100% - 4%); /* Opera */
		width: calc(100% - 4%); /* Standard */
		margin: 0 2% 0 2%;
	}

	.divCheckoutHeaderCell {
		width: auto;
		/*padding: 2%;*/
		font-size: 3.75vw;
	}

	.divCheckoutBodyTable {
		width: -moz-calc(100% - 4%); /* Firefox */
		width: -webkit-calc(100% - 4%); /* WebKit */
		width: -o-calc(100% - 4%); /* Opera */
		width: calc(100% - 4%); /* Standard */
		margin: 0 2% 2% 2%;
	}

	.divCheckoutBodyCell {
		font-size: 3.75vw;
	}

	.divCheckoutBodyCell:nth-of-type(1) {
		padding: 2%;
	}
	
	.divCheckoutBodyCell:nth-of-type(2) {
		flex-direction: column;
		padding: 0 2% 0 2%;
	}

	.divCheckoutBodyCell h1 {
		font-size: 7vw;
	}

	.divCheckoutBodyCell h2 {
		font-size: 5.75vw;
	}

	.divCheckoutBodyCell input[type=text] {
		font-size: 3.75vw;	
	}

	.divCheckoutBodyCell input[type=text]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		font-size: 3.75vw;
	}
		
	.divCheckoutBodyCell input[type=text]::-ms-input-placeholder,
	.divCheckoutBodyCell input[type=text]:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
		font-size: 3.75vw;
	}

	.divCheckoutInfo {
		width: 100%;
		padding: 0 0 4% 0;
	}
	
	.divCheckoutCart {
		width: 100%;
	}

	.divUserData {
		padding: 2%;
	}

	.divUserData a {
		right: 15px;
		font-size: 3.75vw;
	}

	.divUserData img[src="images/paypal-logo.png"] {
		width: 25%;
	}
	
	.divUserData img[src="images/amazon-pay-logo.png"] {
		width: 45%;
	}
	
	.divUserData img[src="images/google-pay-logo.png"] {
		width: 22%;
	}

	#shipping-form > div:not(#shipping-details):not(#email-row):not(#phone-row) {
		padding: 2%;
	}
	
	#shipping-form > div#email-row {
		padding: 2% 2% 0 2%;
	}
	
	#shipping-form > div#phone-row {
		padding: 0 2% 2% 2%;
	}

	#shipping-details > div {
		padding: 2%;
	}

	#state-wrapper {
		width: 100%;
	}
	
	#state-wrapper:after {
		font-size: 4.5vw;
	}
	
	#shipping-state {
		padding: 3.5%;
		font-size: 3.75vw;
	}

	#country-wrapper {
		width: 100%;
	}
	
	#country-wrapper:after {
		font-size: 4.5vw;
	}
	
	#shipping-country {
		padding: 3.5%;
		font-size: 3.75vw;
	}

	#shipping-street,
	#shipping-apartment,
	#shipping-city,
	#delivery-state,
	#shipping-code,
	#shipping-name,
	#shipping-lastname,
	#shipping-email,
	#shipping-phone {
		width: 100%;
		padding: 3.5%;
	}

	#payment-wrapper {
		width: 100%;
	}

	#payment-wrapper:after {
		width: 7%;
	}

	#payment-button {
		padding: 3vw;
		font-size: 4.25vw;	
	}

	a.ContinueShoppingButton {
		/* margin: 2.5%; */
		padding: 3vw;
		font-size: 4.25vw;
	}

	/* Tooltip container */
	.tooltip {
		margin: 0.75% 0;
		font-size: 3.75vw;
	}

	/* Tooltip text */
	.tooltip .tooltiptext {
		width: 50vw !important;
		font-size: 2.75vw;
		padding: 1.75vw;
	}

	.divCartSummary > div {
		padding: 2%;
	}

	.divCartSummary a {
		top: 8%;
		transform: translateY(-8%);
		right: 15px;
		font-size: 3.75vw;
	}

	/* The radio button container */
	.container {
		padding-left: 6vw; /* 6% */
		margin-bottom: 3vw; /* 3% */
		font-size: 3.75vw;
	}

	/* Create a custom radio button */
	.checkmark {
		top: 0.5vw;
		height: 4vw;
		width: 4vw;
	}

	/* Style the indicator (dot/circle) */
	.container .checkmark:after {
		width: 2vw;
		height: 2vw;
	}

	.items-right p {
		line-height: 1.5;
		font-size: 3vw;
	}

	#paypal-button {
		padding: 3vw;
		font-size: 4.25vw;
	}

	.divCheckoutFooterTable {
		/* Firefox */
		width: -moz-calc(100% - 4%);
		/* WebKit */
		width: -webkit-calc(100% - 4%);
		/* Opera */
		width: -o-calc(100% - 4%);
		/* Standard */
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;
		padding: 2%;
		font-size: 3.75vw;
	}

	/* 2.6 Styles for Signin */
	#signinContainer {
		width: auto;
		margin: 4% 4% 4% 4%;
	}

	#signin-form > div {
		font-size: 3.75vw;
	}

	#signin-form > div input[type=text],
	#signin-form > div input[type=password] {
		padding: 3.5%;
		font-size: 3.75vw;
	}

	#signin-form > div span {
		font-size: 3.75vw;
	}

	#signin-wrapper {
		width: 100%;
	}

	#signin-wrapper:after {
		width: 6.75%;
	}

	#signin-button {
		padding: 3vw;
		font-size: 4.25vw;	
	}

	/* 2.7 Styles for Forgot */
	#forgotContainer {
		width: auto;
		margin: 4% 4% 4% 4%;
	}

	#forgot-form > div {
		font-size: 3.75vw;
	}

	#forgot-form > div input[type=text],
	#forgot-form > div input[type=password] {
		padding: 3.5%;
		font-size: 3.75vw;
	}

	#forgot-form > div span {
		font-size: 3.75vw;
	}

	#forgot-wrapper {
		width: 100%;
	}

	#forgot-wrapper:after {
		width: 6.75%;
	}

	#forgot-button {
		padding: 3vw;
		font-size: 4.25vw;	
	}

	/* 2.8 Styles for My Account */
	.divMyAccountTable {
		/* Firefox */
		width: -moz-calc(100% - 4%);
		/* WebKit */
		width: -webkit-calc(100% - 4%);
		/* Opera */
		width: -o-calc(100% - 4%);
		/* Standard */
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;
	}

	.divMyAccountCell {
		padding: 2%;
	}

	.divMyAccountCell h1 {
		font-size: 7vw;
	}

	.navigation-container {
		display: block;
	}

	.navigation-sidebar {
		display: block;
		width: 100%;
	}

	.navigation-sidebar a {
		display: block;
		font-size: 3.75vw;
	}

	.navigation-sidebar a:nth-child(2) {
		border-radius: 0;
	}

	.navigation-sidebar a:last-child {
		border-top: 1px solid #20C1BD;
		border-radius: 0 0 5px 5px;
	}

	.navigation-sidebar h3 {
		font-size: 4.5vw;
	}

	.navigation-sidebar a:first-child img {
		width: 25%;
	}

	.navigation-sidebar a:first-child i {
		font-size: 20vw;
	}

	.navigation-content {
		display: block;
		width: 100%;
		padding: 0;
		font-size: 3.75vw;
	}

	.divCategoriesContainer > div {
		padding: 2.5%;
	}

	.divCategoriesContainer > div:nth-of-type(2) {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.divCategoriesContainer > div:nth-of-type(3) {
		justify-content: center;
		align-items: center;
	}

	.divCategoriesContainer h3 {
		font-size: 5.25vw;
	}

	#account-new-item {
		width: 50%;
		padding: 3.75vw;
		font-size: 3.75vw;
	}

	.categories-wrapper {
		width: 100%;
	}

	.categories-wrapper:after {
		right: 10px;
		font-size: 3.75vw;
	}

	.categories-select {
		margin: 2vw 0;
		padding: 2.5vw 7vw 2.5vw 2.5vw;
		font-size: 3.75vw;
	}

	.account-action-button {
		padding: 1.125vw 2.5vw;
		font-size: 3.75vw;
	}

	.divProductsBox {
		flex-direction: column;
		margin-bottom: 4%;
	}
	
	.divProductsPhoto {
		width: 100%;
		border-radius: 5px 5px 0 0;
	}

	.divProductsPhoto img {
		border-radius: 5px 5px 0 0;
	}
	
	.divProductsInfo {
		width: 100%;
		padding: 2%;
		line-height: 2;
		font-size: 3.75vw;
	}

	.divProductsInfo h3 {
		font-size: 5.25vw;
	}

	/* 2.9 Styles for Listing */
	#listing-container {
		/* Firefox */
		width: -moz-calc(100% - 4%);
		/* WebKit */
		width: -webkit-calc(100% - 4%);
		/* Opera */
		width: -o-calc(100% - 4%);
		/* Standard */
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;	
	}

	#listing-form > div {
		padding: 2%;
		font-size: 3.75vw;
	}

	#listing-form h1 {
		font-size: 7vw;
	}
	
	#listing-form h2 {
		font-size: 5.75vw;
	}

	#pencil-button {
		width: 13.5%;
		padding: 0.75vw;
		font-size: 3.75vw;
	}

	/* Styles for category select */
	#category-wrapper h3 {
		padding: 3.5%;
		font-size: 5.25vw;
	}
	
	#category-wrapper button {
		padding: 3.5%;
		font-size: 3.75vw;
	}
	
	#category-wrapper button i {
		font-size: 5vw;
	}

	/* The photo grid */
	.item1 {
		grid-column: 1 / 7;
		grid-row: auto;
	}

	.item2 { grid-column: 1 / 7; }
	.item3 { grid-column: 1 / 7; }
	.item4 { grid-column: 1 / 7; }
	.item5 { grid-column: 1 / 7; }
	.item6 { grid-column: 1 / 7; }
	.item7 { grid-column: 1 / 7; }
	.item8 { grid-column: 1 / 7; }
	.item9 { grid-column: 1 / 7; }

	#listing-miniatures {
		grid-template-areas:
			'MainPhoto MainPhoto MainPhoto MainPhoto MainPhoto MainPhoto'
			'photo2 photo2 photo2 photo2 photo2 photo2'
			'photo3 photo3 photo3 photo3 photo3 photo3'
			'photo4 photo4 photo4 photo4 photo4 photo4'
			'photo5 photo5 photo5 photo5 photo5 photo5'
			'photo6 photo6 photo6 photo6 photo6 photo6'
			'photo7 photo7 photo7 photo7 photo7 photo7'
			'photo8 photo8 photo8 photo8 photo8 photo8'
			'photo9 photo9 photo9 photo9 photo9 photo9';
		/* grid-template-rows: 200px auto auto auto auto auto auto auto auto; */
	}

	button.delete-photo {
		top: 2vw;
		right: 2vw;
		width: 10vw;
		height: 10vw;
		padding: 2vw;
	}

	button.delete-photo i {
		font-size: 5vw;
	}

	.image-data {
		bottom: 2vw;
		padding: 1.75vw;
		font-size: 3.75vw;
	}

	/* Styles for input text */
	#listing-title,
	#listing-price,
	#listing-quantity {
		padding: 3.5%;
		font-size: 3.75vw;
	}

	#listing-title::placeholder,
	#listing-price::placeholder,
	#listing-quantity::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		font-size: 3.75vw;
	}

	#listing-title::-ms-input-placeholder,
	#listing-title:-ms-input-placeholder,
	#listing-price::-ms-input-placeholder,
	#listing-price:-ms-input-placeholder,
	#listing-quantity::-ms-input-placeholder,
	#listing-quantity:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
		font-size: 3.75vw;
	}

	#listing-price,
	#listing-quantity {
		width: 100%;	
	}

	#listing-description {
		padding: 3.5%;
		font-size: 3.75vw;
	}
	
	#listing-description::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		font-size: 3.75vw;
	}
		
	#listing-description::-ms-input-placeholder,
	#listing-description:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
		font-size: 3.75vw;
	}

	/* Label tags for price and quantity input text */
	.listing-pricing {
		width: 100%;
		padding: 1.5%;
	}

	/* Styles for new category and list and cancel buttons */
	.list-wrapper {
		display: block;
		width: 100%;
	}

	.list-wrapper:first-of-type {
		margin: 0 0 3.5% 0;
	}

	.list-wrapper:last-of-type {
		margin: 3.5% 0 0 0;
	}
	
	.list-wrapper:after { /* Place image inside div using after selector */
		width: 6%;
	}

	#back-category-button {
		padding: 3vw; /* The vw unit makes padding looks same on all devices */
		font-size: 4.25vw;
	}

	#cancel-category-button {
		padding: 3vw;
		font-size: 4.25vw;
	}
	
	#list-button {
		padding: 3vw;
		font-size: 4.25vw;
	}
	
	#cancel-button {
		padding: 3vw;
		font-size: 4.25vw;	
	}

	/* 2.10 Styles for Photo Gallery */
	.row {
		margin: 0 4px 8px 4px;
	}

	.column {
		-ms-flex: 100%;
		flex: 100%;
		max-width: 100%;
	}

	.modal-content {
		width: 100%;
	}

	.caption {
		font-size: 3.75vw;
	}

	.modal-clearfix button { /* Change location to My Account or General Styles for Modals */
		font-size: 3.75vw;
	}

	/* 2.11 Styles for About Us */
	.divAboutUsTable {
		margin: 0 2% 2% 2%;
	}

	.divAboutUsCell {
		padding: 2%;
	}
	
	.divAboutUsCell h1 {
		font-size: 7vw;
	}
	
	.divAboutUsBox {
		width: 100%;
		font-size: 3.5vw;
	}
	
	.divAboutUsBox:nth-of-type(1) {
		padding: 5%;
	}
	
	.divAboutUsBox:nth-of-type(2) {
		padding: 5%;
	}
	
	.divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(1) {
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0, 0);
		width: 100%;
	}
	
	.divAboutUsBox:nth-of-type(1) .divAboutUsInfo {
		padding: 2% 0;
	}
	
	.divAboutUsBox:nth-of-type(2) .divAboutUsInfo {
		padding: 2% 0;
	}
	
	.divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(1) h1, .divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(1) h2 {
		font-size: 5.5vw;
	}
	
	.divAboutUsBox:nth-of-type(1) .divAboutUsInfo:nth-of-type(2) h1 {
		font-size: 7vw;
	}
	
	.divAboutUsBox:nth-of-type(2) .divAboutUsInfo:nth-of-type(1) h1 {
		font-size: 7vw;
	}

	/* 2.12 Styles for Contact Us */
	.divContactUsTable {
		/* Firefox */
		width: -moz-calc(100% - 4%);
		/* WebKit */
		width: -webkit-calc(100% - 4%);
		/* Opera */
		width: -o-calc(100% - 4%);
		/* Standard */
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;
	}

	.divContactUsCell {
		padding: 2%;
	}
	
	.divContactUsCell h1 {
		font-size: 7vw;
	}

	.divContactInfoBox {
		width: 100%;
		font-size: 3.5vw;
	}
	
	.divContactInfoBox a {
		font-size: 3.5vw;
	}
	
	.divContactInfoTable .divTableBody .divTableRow .divContactInfoCell h1 {
		font-size: 6vw;
	}
	
	.divContactInfoTable .divTableBody .divTableRow .divContactInfoCell i {
		font-size: 6vw;
	}

	.divQuestionContainer h1 {
		padding-bottom: 2.5%;
		font-size: 6vw;
	}
	
	#contact-email {
		width: 100%;
		padding: 3%;
		font-size: 3.5vw;
	}
	
	#contact-question {
		width: 100%;
		padding: 3%;
		font-size: 3.5vw;
	}
	
	#contact-email::placeholder, #contact-question::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
		font-size: 3.5vw;
	}
		
	#contact-email::-ms-input-placeholder, #contact-question:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
		font-size: 3.5vw;
	}

	.divQuestionContainer p {
		padding-bottom: 2.5%;
		font-size: 3.5vw;
	}
	
	.alert {
		padding: 1% 0;
		font-size: 3.5vw;
	}
	
	.recaptcha {
		padding: 5% 0 7% 0;
	}
	
	#contact-wrapper {
		width: 100%;
	}
	
	#contact-wrapper:after {
		width: 6.5%;
	}

	#contact-button {
		/* width: 100%; */
		padding: 3vw; /* 3vw 4vw. The vw unit makes padding looks same on all devices */
		font-size: 4.25vw;
	}

	/* 2.13 Styles for Help */
	.divHelpTable {
		/* Firefox */
		width: -moz-calc(100% - 4%);
		/* WebKit */
		width: -webkit-calc(100% - 4%);
		/* Opera */
		width: -o-calc(100% - 4%);
		/* Standard */
		width: calc(100% - 4%);
		margin: 0 2% 2% 2%;
	}

	.divHelpCell {
		padding: 2%;
	}

	.divHelpCell h1 {
		font-size: 7vw;
	}
	
	.divHelpCell h2 {
		font-size: 5vw;
	}

	.divHelpHeaderContainer {
		padding: 5%;
	}

	.divHelpHeaderContainer .divHelpHeaderBox h2 {
		font-size: 5vw;
	}

	.divHelpContentTable .divTableBody .divTableRow:nth-child(2) .divHelpContentCell:only-child {
		padding: 2% 0;
	}

	.divHelpContentTable .divTableBody .divTableRow:nth-child(2) .divHelpContentCell:only-child h2 {
		font-size: 5vw;
	}

	.divHelpTopicsContainer {
		width: 100%;
		float: none;
		padding: 0;
	}
	
	.divHelpContentCell .divHelpTopicsContainer h2 {
		font-size: 5vw;
		margin-bottom: 6%;
	}
	
	.divHelpTopicsContainer a {
		font-size: 3.75vw;
	}
	
	.divHelpQuestionsContainer {
		width: 100%;
		float: none;
	}
	
	.divQuestionsCell {
		padding: 2% 0;
	}

	.divQuestionsTable .divQuestionsCell h2 {
		font-size: 5vw;	
	}
	
	.divQuestionsTable .divQuestionsCell h3 {
		font-size: 4vw;	
	}
	
	.divQuestionsTable .divQuestionsCell p {
		font-size: 3.75vw;
	}
	
	.divMoreHelpContainer {
		padding: 5%;
	}

	.divHelpContentCell .divMoreHelpContainer h2 {
		font-size: 5vw;
	}
	
	/* 2.14 Styles for Terms, Privacy, Selling */
	.divLegalTable {
		margin: 0 2% 2% 2%;
	}

	.divLegalCell {
		padding: 2%;
		font-size: 3.75vw;
	}
	
	.divLegalCell h1 {
		font-size: 7vw;
	}
	
	.divLegalCell h2 {
		font-size: 5vw;
	}
	
	/* 2.15 Styles for SiteMap */
	.divSiteMapTable {
		margin: 0 2% 2% 2%;
	}

	.divSiteMapCell {
		padding: 2%;
	}

	.divSiteMapCell a {
		font-size: 3.75vw;
	}
	
	.divSiteMapCell h1 {
		font-size: 7vw;
	}
	
	.divSiteMapCell h2 {
		font-size: 5.75vw;
	}
	
	.divCategoriesCell {
		display: block;
	}
	
	.divCategoriesCell:nth-of-type(1) {
		width: 100%;
		padding: 2% 0;
		border-right: none;
	}

	.divCategoriesCell:nth-of-type(2) {
		width: 100%;
	}
	
	.divCategoriesCell h3 {
		font-size: 5vw;
	}

	.divSubcategoriesList1 {
		-ms-flex: 100%; /* IE10 */
		flex: 100%;
		max-width: 100%;
		padding: 2% 0;
	}
	
	.divSubcategoriesList1:nth-of-type(1) {
		padding: 1% 0;
		text-align: left;
	}
	
	.divSubcategoriesList1 h4 {
		font-size: 4.75vw;
	}
	
	.divSubcategoriesList1 h5 {
		font-size: 4.25vw;
	}
	
	.divSubcategoriesList2 {
		-ms-flex: 100%; /* IE10 */
		flex: 100%;
		max-width: 100%;
		padding: 2% 0;
	}
	
	.divSubcategoriesList2 h5 {
		font-size: 4vw;
	}

}