@import url('products.css');

.shopPage .contentContainer .content {
display: flex;
flex-direction: row-reverse;
}
.shopPage .contentContainer .content.full {
display: block;
}

/*________ PRODUCT LISTING ________*/

.content .shopContent {
width: 74.16666666666666%;
margin-left: 1.666666666666667%;
padding-bottom: 32px;
padding-bottom: 2rem;
}
.content .shopMenu {
overflow: hidden;
width: 24.16666666666667%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
background: #f1f2f2;
}
.content .shopMenu h2 {
text-transform: uppercase;
font-size: 24px;
font-size: 1.5rem;
font-weight: 600;
}
.content .shopMenu ul {
list-style-type: none;
padding: 0;
}
.content .shopMenu a {
text-decoration: none;
padding-left: 16px;
}
.content .shopMenu .categories > li > a {
text-transform: uppercase;
display: inline-block;
margin-bottom: 12px;
margin-bottom: 0.75rem;
}
.content .shopMenu ul ul {
 
}
.content .shopMenu .categories> li > ul {
padding-bottom: 12px;
padding-bottom: 0.75rem;
}
.content .shopMenu .categories li.level-1 > a.catWithKids {
padding-left: 0;  
}
.content .shopMenu .categories li a.catWithKids:before {
content: "\25B8";
color: #000;
vertical-align: -1px;
font-size: 20px;
font-size: 1.25rem;
padding-right: 5px;
padding-right: 0.3125rem;  
}
.content .shopMenu li a.catWithKids.show:before {
content: "\25be ";
}
.content .shopMenu li a:hover,
.content .shopMenu a.show:not(.catWithKids),
.content .shopMenu li ul li.current-cat a,
.content .shopMenu li ul li.current a {
color: #ff0000;
}
.content .shopMenu li ul ul a {
font-weight: 300;  
}
.content .shopMenu li.level-2 {
margin-bottom: 4px;
margin-bottom: 0.25rem;
}
.content .shopMenu li.level-2 > a {
padding-left: 32px;
padding-left: 2rem;
}
.content .shopMenu li.level-2 > a.catWithKids {
padding-left: 28px;
padding-left: 1.75rem;
}
.content .shopMenu li.level-3 > a {
padding-left: 72px;
padding-left: 4.5rem;  
}
.content .shopMenu li ul {
display: none;  
}

.content .shopMenu .prFilter {
	border-top: 1px solid #ccc;
	margin-top: 20px;
	margin-top: 1.25rem
	padding-top: 40px;
	padding-top: 2.5rem;
}
.content .shopMenu .prFilter h3 {
	text-transform: uppercase;
	font-size: 16px;
	font-size: 1rem;
	padding: 4px 8px;
	padding: 0.25rem 0.5rem;
	margin: 0 0 8px 0;
	margin: 0 0 0.5rem 0;
	background: #ccc;
}
.content .shopMenu .prFilter label input,
.content .shopMenu .prFilter label span {
	display: inline-block;
	vertical-align: middle;
}
.content .shopMenu .prFilter label span {
	font-size: 14px;
	font-size: 0.875rem;
}  

.content .navSplitPagesLinks {
float: right;
margin: 0 0 20px 0;
margin: 0 0 1.25rem 0;
}
.content .navSplitPagesLinks .current,
.content .navSplitPagesLinks a {
float: left;
margin-left: 6px;
padding: 8px;  
text-transform: lowercase;  
}
.content .navSplitPagesLinks a {
color: #fff;            
background: #000;
text-decoration: none;  
}
.content .navSplitPagesLinks a:hover {
background: #ff0000;
}
.content .navSplitPagesResult {
font-size: 12px;
font-size: 0.75rem;  
}

.content #prLoading {
margin: 0 auto;
padding: 30% 0;
}

/*________ PRODUCT DETAIL ________*/

.content .imagesArea {
float: left;
width: 65.1685393258427%;
margin: 0 2.247191011235955% 40px 0;
margin: 0 2.247191011235955% 2.5rem 0;
}
.content .productsImage .imgHolder {
display: block;
height: 580px;
height: 36.25rem;
position: relative;
margin-bottom: 16px;
margin-bottom: 1rem;        
}
.content .productsImage .imgHolder .smImg {
width: auto;
height: auto;  
max-width: 100%;
max-height: 100%;  
position: absolute;
z-index: 100;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
.content .additionalImages {
overflow: hidden;
}
.content .additionalImages a {
float: left;
width: 32%;
margin-right: 2%;
height: 180px;
height: 11.25rem;
position: relative;
}
.content .additionalImages a.right {
margin-right: 0;  
}
.content .additionalImages a img {
width: auto;
height: auto;  
max-width: 100%;
max-height: 100px;  
position: absolute;
z-index: 100;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
.imagesArea .slick-slider button.slick-prev-arr,
.imagesArea .slick-slider button.slick-next-arr {
	width: 32px;
	width: 1rem;
	height: 32px;
	height: 2rem;
	position: absolute;
	top: auto;
	left: 38%;
	bottom: -7px;
	display: block;
	z-index: 100;
	background-color: transparent;
	font-size: 48px;
	font-size: 3rem;
	font-weight: 400;
	line-height: 0;
}
.imagesArea .slick-slider button.slick-next-arr {
	left: auto;
	right: 38%;
}
.imagesArea .slick-slider button.slick-prev-arr:hover,
.imagesArea .slick-slider button.slick-next-arr:hover {
	color: #ff0000;
}
.imagesArea .slick-slider .slick-dots li {
width: 10px;
width: 0.625rem;
height: 10px;
height: 0.625rem;
margin: 0 5px;
margin: 0 0.5rem;
}
.imagesArea .slick-slider .slick-dots li button {
border: none;
background-color: #bec1c8;
}
.imagesArea .slick-slider .slick-dots li.slick-active button,
.imagesArea .slick-slider .slick-dots li button:hover {
background-color: #000007;
}

.content .productsDetail,
.content .prOptions,
.content .prOptions #cartAdd,
.content .prInfoPanel {
overflow: hidden;  
}
.content .productsDetail {
width: 32.58426966292135%;  
margin-bottom: 40px;
margin-bottom: 2.5rem;
}
.content .productsDetail .prodVariation {
color: #ff0000;
font-size: 24px;
font-size: 1.5rem;
padding-bottom: 12px;
padding-bottom: 0.75rem;
text-align: left;
}
.content .productsDetail .price {
margin: 0;
padding: 0 0 20px 0;
padding: 0 0 1.25rem 0;
text-align: left;
}
.content .productsDetail .price span {
font-size: 36px;
font-size: 2.25rem;
font-weight: 300;
display: inline;
word-wrap: break-word;
}
.content .productsDetail .price .normalprice {
text-decoration: line-through;
margin-right: 8px;
margin-right: 0.5rem;
}
.content .productsDetail .price .productSpecialPrice {
color: #e53d3d;
display: inline-block;
margin-right: 8px;
margin-right: 0.5rem;
}
.content .productsDetail .price .productPriceDiscount {
font-size: 16px;
font-size: 1rem;
}
.content .prOptions {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.content .prOptions fieldset {
margin-bottom: 20px;
margin-bottom: 1.25rem;      
}
.content .prOptions fieldset select {
max-width: 300px;
}
.content .prOptions fieldset .attrRadLab {
float: left;
}
.content .prOptions fieldset .attrRadLab:hover {
cursor: pointer;
}
.content .prOptions fieldset .attrRadLab.opt1 {
border: 1px solid;
padding: 8px;
padding: 0.5rem;
margin: 0 8px 8px 0;
margin: 0 0.5rem 0.5rem 0;
}    
.content .prOptions fieldset .opt1.selected,
.content .prOptions fieldset .opt1:hover {
background: #262626;
color: #fff;
cursor: default;
}
.content .dispOnly .prOptions fieldset .opt1.selected,
.content .dispOnly .prOptions fieldset .opt1:hover {
background: #fff;
color: #262626;
}
.content .prOptions fieldset .attrRadLab.opt2 {
width: 23%;
margin: 0 1% 8px;
margin: 0 1% 0.5rem;
}
.content .prOptions fieldset .opt2.selected,
.content .prOptions fieldset .opt2:hover {
border: 2px solid #3366cc;
}
.content .prOptions fieldset .attrRadLab input[type="radio"] {
display: none;  
}
.content .prOptions fieldset .attrRadLab .attrImg {
pointer-events: none;
}

.content .prOptions #cartAdd {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.content .prOptions #cartAdd input[type="submit"] {
font-size: 16px;
font-size: 1rem;
text-transform: uppercase;
float: left;
margin-right: 8px;
}
.content .prOptions #cartAdd input[type="submit"].inactive {
background: #cecece;
cursor: default;
}
.content .prOptions #cartAdd #a2cLoad {
float: left;
padding: 10px 60px;
}
.content .prOptions #cartAdd #attrMsg {
font-size: 12px;
font-size: 0.75rem;
color: #ff0000;
margin: 0;
padding: 12px 0;
padding: 0.75rem 0;
text-align: center;
clear: left;
}

.content .prOptions .dealer {
width: 100%;
text-align: center;
font-weight: 300;
}

.content .prInfoPanel {
clear: both;
}
.content .prInfoPanel .panelNav {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0 0 28px 0;
margin: 0 0 1.75rem 0;
text-transform: uppercase;
font-weight: 600;  
}
.content .prInfoPanel .panelNav li {
float: left;
background: #d7d7d7;
width: 32.66666666666667%;
margin-right: 1%;
text-align: center;
padding: 12px 0;
padding: 0.75rem 0; 
}
.content .prInfoPanel .panelNav li:last-child {
margin-right: 0;
}
.content .prInfoPanel .panelNav li.current,
.content .prInfoPanel .panelNav li:hover {
background: #ff0000;   
}
.content .prInfoPanel .panelNav li a {
display: block;
text-decoration: none;
}
.content .prInfoPanel .panelNav li.current a,
.content .prInfoPanel .panelNav li:hover a {
color: #fff;
}
.content .prInfoPanel .panelContent {
 
}

.content .relatedProducts {
clear: both;  
}

/*________ LOGIN / SIGNUP ________*/

.content .loginForm {
margin-bottom: 32px;
margin-bottom: 2rem;      
}
.content form #lg_login {
margin-right: 5px;
}

.content .forgotPassword {
font-size: 91%;
}

.content .alert {
text-align: right;
overflow: hidden;
font-weight: bold;
margin-bottom: 5px;
}

/*________ ACCOUNT SUCCESS ________*/

#createAcctSuccess legend,
#addressBookDefault legend {
display: none;
}

#createAcctSuccess fieldset {
border: 0;
margin-bottom: 20px;
} 

#createAcctSuccess address {
float: left;
margin-right: 50px;
margin-bottom: 10px;
}

#createAcctSuccess .forward a {
margin-bottom: 5px;
}

#createAcctSuccess .addressBookDefaultName {
clear: both;
}

/*________ MY ACCOUNT ________*/

#accountDefault p.forward {
float: right;
}

#accountDefault table {
margin-bottom: 15px;
}

#accountDefault table tr th,
#accountHistInfo table tr th {
color: #fff;
background: #555555;
border-bottom: 1px solid #e6e6e6;
padding: 5px;
text-align: left;
}

#accountDefault table tr td,
#accountHistInfo table tr td {
border-bottom: 1px solid #e6e6e6;
padding: 10px 5px;
text-align: left;
}

#accountHistInfo #orderTotals {
padding-top: 5px;
}

#accountHistInfo p.forward {
float: right;
font-size: 91%;
}

#accountHistInfo #myAccountShipInfo {
float: left;

width: 50%;
}

#accountHistInfo #myAccountShipInfo,
#accountHistInfo #myAccountPaymentInfo {
padding: 20px 0;
}

#accountHistInfo p.shipBill {
font-weight: bold;
font-size: 116%;
padding: 7px 0 3px 0;
color: #fff;
}

#accountHistoryDefault fieldset {
border: 0;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #e6e6e6;
}

#accountHistoryDefault legend {
margin-bottom: 3px;
font-weight: bold;
}

#accountHistoryDefault .view {
float: right;
}

#accountHistInfo #orderTotals .forward {
margin-bottom: 5px;
padding: 0 5px 5px 5px;
border-bottom: 1px solid #e6e6e6;
}

#accountHistInfo #orderTotals .forward img {
display: inline;
}

#accountHistInfo #orderTotals .amount {
float: right;
clear: right;
font-weight: bold;
border-bottom: 1px solid #e6e6e6;
}

#dcRedeem {
margin-bottom: 20px;  
}

/*________ ADDRESS BOOK ________*/

#addressBookDefault address {
margin-bottom: 15px;
}

#addressBookDefault fieldset {
border: 0;
}

#content #addressBookDefault .alert {
text-align: right;
margin-bottom: 5px;
float: none;
}

#addressBookDefault fieldset .address {
overflow: hidden;
border-bottom: 1px dotted #e6e6e6;
margin-bottom: 15px;
clear: right;  
}

#addressBookDefault fieldset address {
float: left;
}

#addressBookDefault .forward {
float: right;
}

#addressBookDefault .forward a {
margin-bottom: 5px;
}

.content .chAddress {
margin-bottom: 16px;
margin-bottom: 1rem;
overflow: hidden;      
}
.content .chAddress input[type="radio"] {
float: left;
margin: 2px 4px 0 0;  
}
.content .chAddress label {
display: block;
overflow: hidden;
float: none;
width: auto;
margin: 0;
line-height: normal;
}

/*________ FORMS ________*/

form.shopForm fieldset label {
	float: left;
	width: 22%;
	margin-right: 2%;
	line-height: 40px;
  line-height: 2.5rem;
}
form.shopForm fieldset input[type="text"],
form.shopForm fieldset input[type="email"],
form.shopForm fieldset input[type="number"],
form.shopForm fieldset input[type="password"],
form.shopForm fieldset select,
form.shopForm fieldset textarea {
	width: 76%;
}
form.shopForm fieldset label.checkbox {
	width: auto;
	float: none;
	text-align: left;
	margin-right: 0;
	padding: 0;
	font-size: 13px;
	font-size: 0.8125rem;
	line-height: 1;
}
form.shopForm fieldset label.checkbox input {
	width: auto;
	display: inline-block;
	vertical-align: top;
}

form.shopForm fieldset label.checkbox,
form.shopForm input[type="submit"],
form.shopForm .fieldUnder {
	margin-left: 24%;
}

.content .field {
display: block;
overflow: hidden;
width: 100%;
margin-bottom: 10px;
margin-bottom: 0.625rem;  
}
.content .field.col2 {
width: 48%;
margin-right: 4%;
float: left; 
}
.content .field.col3 {
width: 32%;
margin-right: 2%;
float: left; 
}
.content .field.right {
margin-right: 0;  
}
.content .field.cBox {
clear: both;  
}
.content .field label {
float: none;
clear: none;
display: block;
margin: 0 0 4px 0;
margin: 0 0 0.25rem 0;
padding: 0;
text-align: left;
width: 100%;
line-height: normal;  
}
.content .field.cBox label {
margin: 0;
line-height: 1;  
}
.content .field input[type="text"],
.content .field input[type="password"],
.content .field select {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 4px;
padding: 0.25rem;
margin: 0;
width: 100%;  
}
.content .field input[type="checkbox"] {
padding: 0;
width: auto;    
}
.content .field.cBox input[type="checkbox"] {
float: left;
margin-right: 4px;
}
.content .fieldCols input[type="submit"] {
margin-left: 0;    
}
.content .fgpass {
float: right;  
}
.content .fieldUnder {
	font-size: 12px;
	font-size: 0.75rem;
	padding: 0;
	margin: -4px 0 8px 0;
}

/*________ CHECKOUT FIELDS ________*/

.content .chk-field {
position: relative;
border: 1px solid #d9d9d9; 
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 4px;
height: 48px;
height: 3rem;
margin-bottom: 12px;
margin-bottom: 0.75rem;
}
.content .chk-field.col2 {
width: 49%;
margin-right: 2%;
}
.content .chk-field.col2.right {
margin-right: 0;  
}
.content .chk-field.active {
border-color: #1990c6;  
}
.content .chk-field label {
position: absolute;
top: 2px;
top: 0.125rem;
left: 8px;
left: 0.5rem;
z-index: 1;
font-size: 13px;
font-size: 0.8125rem;
color: #999;
white-space: nowrap;
cursor: text;
pointer-events: none;
opacity: 0;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.content .chk-field.show-label label {
opacity: 1;
transform: none;  
}
.content .chk-field input[type="text"],
.content .chk-field input[type="password"],
.content .chk-field select {
padding: 8px;
padding: 0.5rem;
height: 46px;
height: 2.875rem;
line-height: 46px;
line-height: 2.875rem;
border: 0;
font-size: 15px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;  
}
.content .chk-field.show-label input[type="text"],
.content .chk-field.show-label input[type="password"],
.content .chk-field.show-label select {
padding: 14px 8px 0;
padding: 0.875rem 0.5rem 0;
}
.content .chk-field.show-label select {
appearance:none;
-moz-appearance: none;
-webkit-appearance: none;
background: url("/shop/images/chk-field-dropdown-arrow.svg") no-repeat 95% center;
line-height: normal;
}
.content .chk-field.show-label select:focus {
text-shadow: 0 0 0 #000;
}

.content .chk-field.country,
.content .chk-field.state {
width: 37%;   
}
.content .chk-field.postcode {
width: 22%;        
}
    
/*________ MISC ________*/

.messageStackCaution,
.messageStackError,
.messageStackSuccess,
.messageStackWarning {
color: #fff;
padding: 10px;
margin-bottom: 10px;
overflow: hidden;
font-size: 14px;
font-size: 0.875rem;
}
.messageStackCaution img,
.messageStackError img,
.messageStackSuccess img,
.messageStackWarning img {
float: left;
margin-right: 10px;
}
.messageStackCaution,
.messageStackWarning {
background: #cfd100;
}
.messageStackError {
background: #e51f1f;
}
.messageStackSuccess {
background: #22c302;
}

/*________ Responsive Structure ________*/

/* 1000px */
@media (max-width: 62.5rem) {
	.shopPage .contentContainer .content {
		flex-direction: column;
	}
	.content .shopContent {
		width: 100%;
		margin-left: 0%;
	}
	.content .shopMenu {
		width: 100%;
		max-width: 300px;
	}
}

/* 832px */
@media (max-width: 52rem) {
	.content .prInfoPanel .panelNav li a {
		padding-left: 16px;
	  	padding-left: 1rem;
	  	padding-right: 16px;
	  	padding-right: 1rem;
	}
	.content .prInfoPanel .panelNav li {
		float: none;
		background: #d7d7d7;
		width: 100%;
		margin-right: 0;
		margin-bottom: 8px;
	}
}
    
/* 720px */
@media (max-width: 45em) {
	.content .prInfoPanel .panelNav li a {
		padding-left: 12px;
	  	padding-left: 0.75rem;
	  	padding-right: 12px;
	  	padding-right: 0.75rem;
	}
}
        
/* 640px */
@media (max-width: 40em) {
	.content .imagesArea,
	.content .productsDetail {
		float: none;
   		overflow: hidden;
		width: 100%;
		margin-right: 0; 
	}
	.imagesArea .slick-slider button.slick-prev-arr {
		left: 10%;
	}
	.imagesArea .slick-slider button.slick-next-arr {
		right: 10%;
	}
	form.shopForm fieldset label {
    	width: 33%;
    	margin-right: 2%;
  	}
  	form.shopForm fieldset input[type="text"],
 	form.shopForm fieldset input[type="email"],
	form.shopForm fieldset input[type="number"],
	form.shopForm fieldset input[type="password"],
  	form.shopForm fieldset select {
    	width: 65%;
  	}
  	form.shopForm fieldset label.checkbox,
  	form.shopForm input[type="submit"] {
    	margin-left: 35%;
  	}
}

/* 520px */
@media (max-width: 32.5em) {
 	.content .field {
		width: 100% !important;
		margin-right: 0 !important;
  		margin-left: 0 !important;
		float: none !important;
	}
}

/* 480px */
@media (max-width: 30em) {
	.svButton,
	form input[type="submit"] {
		padding-left: 16px;
		padding-left: 1rem;
		padding-right: 16px;
		padding-right: 1rem;
	}
}

/* 400px */
@media (max-width: 25em) {
	form.shopForm fieldset label {
		width: 100%;
 		margin-right: 0%;
    	text-align: left;
  		float: none;
  		padding-top: 0;
 	}
  	form.shopForm fieldset input[type="text"],
  	form.shopForm fieldset input[type="email"],
  	form.shopForm fieldset input[type="number"],
  	form.shopForm fieldset input[type="password"],
  	form.shopForm fieldset select {
 		width: 100%;
 	}
  	form.shopForm fieldset label.checkbox,
  	form.shopForm input[type="submit"] {
 		margin-left: 0%;
 	}
}