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

Cary Leeds Tennis Shop

Last updated: 04/13/2021
   
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 Checkout
	2.4 Styles for Photo Gallery
	2.5 Styles for About Us
	2.6 Styles for Contact Us
	2.7 Styles for Help
	2.8 Styles for Terms, Privacy, Selling
	2.9 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 */
	/* border: 1px solid red; */
}

body {
	height: 100%; /* This style makes side menu stretch until bottom of page on mobile */
	font: 1.5vw Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	background-color: white; /*#f2f2f2*/
	padding-top: 9.35%; /* 9.08% Move contents below the menu bar */
    /* border: 1px solid blue; */
}

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

/* 1.1 Styles for links */

a:link {
	color: #333;
	text-decoration: none;
}

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

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

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

/* 1.2 Styles for keyframes */

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

.divOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 888888 !important;
}

.gridContainer {
	width: 100%;
    /* border: 1px solid green; */
}

.gridWrapper {
	overflow: hidden;
}

.gridHeader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: white;
	z-index: 777777 !important;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /* border: 1px solid black; */
}

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

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

.divTableRow {
	display: table-row;
}

.divTableCell {
	display: table-cell;
    /* border: 1px solid red; */
}

.divTableCaption {
	display: table-caption;	
}

.divCaptionTop {
	caption-side: top;
}

.divCaptionBottom {
	caption-side: bottom;
}

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

.divTopMenuCell {
	padding: 1%;
	font-size: 1.25vw;
    background-color: white; /*#f2f2f2*/
	text-align: center;
	/* border: 1px solid red; */
}

.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(1) {
	display: none;
}

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

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

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

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

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

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

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

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

.divTopMenuCell img[src="images/logo_small.png"] {
    display: none;
	width: 25%;
	margin: 0 auto;
	vertical-align: middle;
	/* border: 1px solid black; */
}

.divTopMenuCell img[src="images/logo_large.png"] {
    width: 100%;
	vertical-align: middle;
	/* border: 1px solid black; */
}

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

#top-search-box {
	width: 100%;
	padding: 3% 3% 3% 12%;
	font-size: 1.25vw;
	color: #333;
    background-color: #f2f2f2; /*#ccc*/
	/* border: 1px solid #333; */
	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: #333;
}
	
#top-search-box:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	font-size: 1.25vw;
	color: #333;
}

#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.25vw;
	color: #333;
	background-color: transparent;
	vertical-align: top;
	line-height: 1;
}

.divTopMenuCell a .fa-user {
    font-size: 2.25vw;
    color: #333;
	vertical-align: middle;
	/* border: 1px solid black; */
	transition-duration: 0.4s;
}

.divTopMenuCell .fa-user:hover {
    color: #666;
}

.divTopMenuCell .fa-shopping-cart {
    font-size: 2.25vw;
    color: #333;
	vertical-align: middle;
	/* border: 1px solid black; */
	transition-duration: 0.4s;
}

.divTopMenuCell .fa-shopping-cart:hover {
    color: #666;
}

.divTopCategoriesTable {
    width: 100%;
    /* border: 1px solid crimson; */
}

.divTopCategoriesCell {
    width: auto;
	height: 100%;
    padding: 1%;
	font-size: 1.25vw;
	text-align: center;
	vertical-align: middle;
	border-bottom: 5px solid white; /*#f2f2f2*/
	transition: 0.2s ease-out;
    /* background-color: #3fb0ac; */
}

.divTopCategoriesCell:hover {
	border-bottom: 5px solid #3fb0ac;
}

.divTopCategoriesCell > a {
    color: #333; /*whitesmoke*/
	/* border: 1px solid red; */
	transition-duration: 0.4s;
}

.divTopCategoriesCell > a:hover {
    color: #666;/* white #ccc*/
	/* border-bottom: 5px solid #3fb0ac; */
}

.divTopCategoriesCell .fa-chevron-down {
    font-size: 1.125vw;
}

.divTopCategoriesCell .fa-chevron-up {
	font-size: 1.125vw;
}

.dropdown-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	position: absolute;
	left: 0;
	margin-top: 1%; /*.95vw*/
	/* border: 1px solid black; */
	min-width: 100%;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	text-align: center;
	color: whitesmoke; /*#333*/
	opacity: 1; /*0.8*/
	background-color: #3fb0ac; /*#2f8380 #3fb0ac #f2f2f2 white #3fb0ac*/
	/* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1); */
	/* z-index: 666666 !important; */
}

.dropdown-subcategories {
	flex: 0 0 25%;
	text-align: left;
	/* border: 1px solid red; */
}

.dropdown-subcategories h3 {
	margin-bottom: 2%;
}

.dropdown-subcategories ul {
	list-style-type: none;
	/* border: 1px solid blue; */
	padding: 5%;	
}

.dropdown-subcategories ul a {
	color: whitesmoke; /*#333*/
	text-decoration: none;
}

.dropdown-subcategories ul a:hover {
	color: whitesmoke; /*#333*/
	text-decoration: underline;
}

.gridMenu {
	position: fixed;
	display: none;
	z-index: 999999 !important;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 75%;
	height: 100%; /* Makes scroll menu when content overflows */
	max-height: 100%; /* Makes scroll menu when content overflows */
	margin-left: -75%; /* Makes hide menu to the left */
	/* border: 5px solid red; */
	background-color: #3fb0ac;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch; /* mobile safari */
}

.showSideMenu { 
	transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;
	margin-left: 0% !important;
}

.hideSideMenu {
	transition: 1s;
	-moz-transition: 1s;
	-ms-transition: 1s;
	-webkit-transition: 1s;
	-o-transition: 1s;
	margin-left: -75% !important;
}

.divSideMenuTable {
	width: 100%;
	/* border: 5px solid black; */
}

.divSideMenuCell {
	position: relative;
	font-size: 3.75vw;
	text-align: left;
	color: whitesmoke;
}

.divSideMenuTable .divTableBody .divTableRow:nth-child(1) .divSideMenuCell:only-child {
	/*padding: 4% 4%;  Not working on Firefox */
	border-bottom: 1px solid whitesmoke;
}

.divSideMenuTable .divTableBody .divTableRow:nth-child(n+2) .divSideMenuCell:only-child {
	padding: 0 2%;
}

.divSideMenuCell > a {
	color: whitesmoke;
	position: relative;
	display: block;
	width: 100%;
	padding: 4% 0;
}

.divSideMenuTable .divTableBody .divTableRow:not(:last-child) .divSideMenuCell:only-child > a {
	border-bottom: 1px solid whitesmoke;
}

.divSideMenuCell > a:hover {
	color: white;
	text-decoration: none;	
}

.divSideMenuCell > a .fa-chevron-down {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
  	right: 5%;
	font-size: 2.75vw;
	color: whitesmoke;
}

.divSideMenuCell > a .fa-chevron-up {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
  	right: 5%;
	font-size: 2.75vw;
	color: whitesmoke;
}

.panelMenu {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	/* border: 5px solid orange; */
}

.panel-subcategories ul {
	padding: 5%;
	list-style-type: none;
}

.panel-subcategories ul a {
	color: whitesmoke;
	text-decoration: none;
}

.panel-subcategories ul a:hover {
	color: whitesmoke;
	text-decoration: underline;
}

.panel-subcategories ul h3 {
	margin-bottom: 2%;
}

#side-search-wrapper {
	position: relative;
	width: auto;
	margin: 4%;
	/* border: 5px solid orange; */
}

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

#side-search-box::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: whitesmoke;
}

#side-search-box::-moz-placeholder, /* Firefox 19+ */
#side-search-box:-moz-placeholder { /* Firefox 18- */
	color: whitesmoke;
}
	
#side-search-box::-ms-input-placeholder,
#side-search-box:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	color: whitesmoke;
}

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

/* 1.4 Styles for body */
.divBodyTable {
	width: 100%;
	/* height: 100%; */
    /* border: 1px solid red; */
}

.warning-box {
	margin: 15px 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;
}

.black-bold-text {
	font-weight: bold;
	color: #222;
}

/* 1.5 Styles for footer */

.gridFooter {
	width: 100%;
	padding: 1%;
	font-size: 1.125vw;
	color: #333;
	text-align: center;
    /* border: 1px solid purple; */
    background-color: #f2f2f2; /* dodgerblue #66b3ff #0059b3 #4da6ff #3399ff #66b3ff #0080ff #89bdd3 #bccbde #bae1f8 */
	/* background-color: #0B82FB; For browsers that do not support gradients */
    /* background-image: linear-gradient(#0B82FB, #0B70D7, #0B62B9); Standard syntax (must be last) */
}

.gridFooter a {
	color: #333;/*#333*/
}

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

.divNavTable {
	width: 100%;
	/* border: 1px solid black; */
}

.divNavCell {
	text-align: center;
	padding: 0 0.75% 0.75% 0.75%;
	/* border: 1px solid red; */
}

.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) {
	width: 23%;
}

.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:nth-child(4) {
	width: 31%;
}

.accordionFoot {
	display: inline-block;
	padding: 0 0 3% 0;
	font: 1.125vw Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: left;
	color: #333;
	background-color: transparent;
}

.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .accordionFoot {
	width: 50%;
	cursor: auto;
}

.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:nth-child(4) .accordionFoot {
	width: 100%;
}

.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .panelFoot {
	max-height: inherit;
	overflow: hidden;
	border: none;
}

.panelFoot ul {
	display: inline-block;
	vertical-align: top;
	text-align: left;
	list-style-type: none;
	/* border: 1px solid orange; */
}

.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .panelFoot ul {
	width: 50%;
}

.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:nth-child(4) .panelFoot ul {
	width: 100%;
}

.divFootCell i.fa-facebook,
.divFootCell i.fa-twitter,
.divFootCell i.fa-instagram {
	margin: 0 0.5%;
	font-size: 1.75vw;
	vertical-align: text-bottom;
	transition-duration: 0.4s;
}

.divFootCell i.fa-facebook:hover,
.divFootCell i.fa-twitter:hover,
.divFootCell i.fa-instagram:hover {
	color: #444;
}

#subscribe-wrapper {
	position: relative;
	width: 100%;
	/* border: 1px solid black; */
}

#subscribe-email {
	width: 70%;
	padding: 4%;
	font-size: 1vw;
	color: #333;
	border-top: 1px solid #333;
	border-right: none;
	border-bottom: 1px solid #333;
	border-left: 1px solid #333;
	background-color: transparent;
	border-radius: 5px 0 0 5px;
	-webkit-appearance: none;
	-moz-appearance: none;
  	appearance: none;
}

#subscribe-email::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: #333;
}

#subscribe-email::-moz-placeholder, /* Firefox 19+ */
#subscribe-email:-moz-placeholder { /* Firefox 18- */
	color: #333;
}
	
#subscribe-email::-ms-input-placeholder,
#subscribe-email:-ms-input-placeholder { /* Internet Explorer 10-11,  Microsoft Edge */
	color: #333;
}

#subscribe-button {
	width: 30%;
	padding: 4% 0;
	font-size: 1vw;
	color: #333;
	background-color: #d9d9d9; /*#1a8cff #75c3f0 #7694bc #4597ba*/
	text-align: center;
	border: 1px solid #333;
	border-radius: 0 5px 5px 0;
	float: right;
	cursor: pointer;
	transition-duration: 0.4s;
}

#subscribe-button:hover {
	background-color: #e6e6e6; /*#3399ff #8ccdf3 #98afcd #6aacc8*/
}

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

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

.divFootTable {
	width: 100%;
	/* border: 1px solid purple; */
}

.divFootCaption {
	padding: 0.5%;
	/* border: 1px solid purple; */
}

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

.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(1) {
	width: 35%;
	padding: 0.5%;
	text-align: left;
	/* border: 1px solid black; */
}

.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(2) {
	width: 65%;
	padding: 0.5%;
	text-align: right;
	/* border: 1px solid black; */
}

/* 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 1.5% 55px;
	/* border: 1px solid blue; */
}

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

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

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

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

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

.divHomeCell h3 {
	font-size: 2.25vw;
}

/* 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 0 55px;
	/* border: 1px solid blue; */
}

.divShopCell {
	padding: 0.5%;
	text-align: left;
	/* border: 1px solid blue; */
}

.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: 80%;
	text-align: left;
	position: relative;
	padding: 0.5% 0;
}

.divShopHeader > div:nth-of-type(2) {
	width: 20%;
	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 {
	border: 1px solid #ccc;
	/* 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:hover:not(.active) { background-color: #ebebeb; }

/* 2.3 Styles for Product */

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

.divProductTable {
	/* 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 red; */
}

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

.divProductCell a {
	color: #20C1BD;
}

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

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

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

.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%;
	/* border: 1px solid green; */
}

.main-photo {
	width: 98.5%;
	margin: 0 0.75%;
	vertical-align: text-bottom;
	cursor: pointer;
	transition: 0.3s;
	border: 1px solid #ebebeb;
}

.main-photo:hover {
	/* opacity: 0.8; */
	border: 1px solid #ccc;
}

.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.75%; /*0 0.25vw*/
}

.miniature-photo {
	width: 100%;
	margin-top: 6%; /*0.5vw*/
	/* padding: 0 0.25vw; */
	/*margin-bottom: 0.5vw;*/
	vertical-align: text-bottom;
	cursor: pointer;
	transition: 0.3s;
	border: 1px solid #ebebeb;	
}

.miniature-photo:hover {
	border: 1px solid #ccc;
}

.active-photo {
	border: 1px solid #ccc;
}

.divProductBox:nth-of-type(2) {
	width: 45%;
	/* border: 1px solid black; */
}

.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: 8.5%;
	line-height: 1.5vw;
}

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

.quantity-select {
	width: 100%;
	padding: 0 !important;
	line-height: 1.5vw;
	font-size: 1.5vw;
	text-align: left;
	color: #333;
	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: none; /*1px solid black*/
	border-radius: 50px 50px;
	font-size: 1.75vw;
	text-transform: capitalize;
	text-decoration: none;
	color: white;
	background-color: #209FD4; /* For browsers that do not support gradients */
	background-image: linear-gradient(to left, #23BE94, #21AFB3, #209FD4); /* Standard syntax (must be last) */
	cursor: pointer;
	transition-duration: 0.4s;	
}

#buy-button:hover, #add-button:hover {
	/* color: black; */
	/* background-color: transparent; */
	opacity: 0.8;
}

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

#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#209FD4; /*1px solid black*/
	color: #209FD4;
}

.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: #333;
	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: #333;  
}

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

.divProductDescription ul {
	padding-left: 2%;
}

.divMoreProducts {
	width: 100%;
}

@media screen and (max-width: 800px) {

	/* 1.4 Styles for body */
	.warning-box {
		padding: 1.25%;
		font-size: 2vw;
	}
	
	.warning-box .fa-exclamation {
		font-size: 2vw;
	}

	/* 2.2 Styles for Shop */
	.divShopContainer > div {
		width: 50%;
	}
	
	.sort-wrapper {
		width: 100%;
		position: relative;
	}
	
	.sort-wrapper:after {
		font-size: 2.25vw;
	}
	
	.sort-by {
		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;
	}

}

@media only screen and (max-width:650px) {

	body {
		padding-top: 16.75%;
	}

	/* 1.4 Styles for body */
	.warning-box {
		margin: 2% 2% 2% 2%;
		padding: 2%;
		font-size: 3.75vw;
	}

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

	.divTopMenuCell {
		padding: 2%;
		font-size: 3.75vw;
		border-bottom: 1px solid #f2f2f2;
		/* background-color: #3fb0ac; */
	}

	.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(1) {
		display: table-cell;
		width: 15%;
	}

	.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(2) {
		width: 55%;
	}
	
	.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(3) {
		display: none;
	}
	
	.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(4) {
		display: none;
	}
	
	.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(5) {
		display: none;
	}
	
	.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(6) {
		width: 15%;
	}
	
	.divTopMenuTable .divTableBody .divTableRow:only-child .divTopMenuCell:nth-child(7) {
		width: 15%;
	}

	.divTopMenuCell img[src="images/logo_small.png"] {
		display: inline-block;
	}
	
	.divTopMenuCell img[src="images/logo_large.png"] {
		display: none;
	}

	.divTopMenuCell i.fa-bars {
		font-size: 7vw;
		color: #333;
		cursor: pointer;
		vertical-align: middle;
		/* border: 1px solid black; */
		transition-duration: 0.4s;
	}

	.divTopMenuCell i.fa-bars:hover {
		color: #666;
	}

	.divTopMenuCell a .fa-user {
		font-size: 7vw;
		/* color: #3fb0ac; */
	}

	/* .divTopMenuCell a .fa-user:hover {
		color: white;
	} */
	
	.divTopMenuCell .fa-shopping-cart {
		font-size: 7vw;
		/* color: #3fb0ac; */
	}

	/* .divTopMenuCell .fa-shopping-cart:hover {
		color: white;
	} */

	.divTopCategoriesTable {
		display: none;
	}

	/* 1.4 Styles for body */
	/*.divBodyTable {
		margin-top: 16.25vw; /* This style moves content below the menu bar 
	}*/

	/* 1.5 Styles for footer */

	.gridFooter {
		padding: 2%;
		font-size: 3.75vw;
		/* color: #333; */
	}

	.divNavCell {
		padding: 0 0 0 0;
	}

	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) {
		display: block;
		width: 100%;
	}
	
	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:nth-child(4) {
		display: block;
		width: 100%;
	}

	.accordionFoot {
		padding: 2%;
		font: 3.75vw Verdana, Arial, Helvetica, sans-serif;
		font-weight: bold;
		text-align: left;
	}

	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .accordionFoot {
		width: 100%;
		border-bottom: 1px solid #333;
		cursor: pointer;
	}

	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:nth-child(4) .accordionFoot {
		border-bottom: none;
	}

	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .accordionFoot:after {
		content: "\002B"; /* Unicode character for "plus" sign (+) */
		color: #333;
		font-weight: bold;
		float: right;
		margin-right: 5px;
	}

	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .active:after {
		content: "\2212"; /* Unicode character for "minus" sign (-) */
	}

	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .panelFoot {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
	}

	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:not(:last-child) .panelFoot ul {
		width: 100%;
		padding: 2%;
	}
	
	.divNavTable .divTableBody .divTableRow:nth-child(1) .divNavCell:nth-child(4) .panelFoot ul {
		width: 100%;
		padding-bottom: 2%;
	}

	#subscribe-email {
		font-size: 3.75vw;
	}

	#subscribe-button {
		font-size: 3.75vw;
	}

	.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(1) {
		width:70%;
		padding: 0.5%;
	}
	
	.divFootTable .divTableBody .divTableRow:only-child .divFootCell:nth-child(2) {
		width: 30%;
		padding: 0.5%;
		vertical-align: middle;
	}

	.divFootCell i.fa-facebook,
	.divFootCell i.fa-twitter,
	.divFootCell i.fa-instagram {
		margin: 0 1.125%;
		font-size: 7vw;
	}

	/* 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% 0 2% 0;
	}
	
	.divHomeTable .divTableBody .divTableRow:nth-child(3) .divHomeCell:only-child {
		padding: 2% 0 2% 0;
	}
	
	.divHomeTable .divTableBody .divTableRow:nth-child(5) .divHomeCell:only-child {
		padding: 2% 0 2% 0;
	}
	
	.divHomeTable .divTableBody .divTableRow:nth-child(7) .divHomeCell:only-child {
		padding: 2% 0 2% 0;
	}
	
	.divHomeCell h2 {
		font-size: 5.75vw;
	}
	
	.divHomeCell h3 {
		font-size: 5.25vw;
	}

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

	.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: 50%;
		margin: 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 */

	.caption {
		font-size: 3.75vw;
	}

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

	.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: 9.25%;
		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;
	}

	.divProductDescription ul {
		padding-left: 4%;
	}

}