/*
_______________________________

/* terms */
.tnc ol {margin-botom:5px;border-bottom:1px dashed #ccc;padding-bottom:20px;}

/* hide featured post image */
#blog-article .box-ratio {
    display: none;
}

/* not too big logo on mobile */
div#logo img {
    max-width: 40vw;
}
@media only screen and (min-width: 720px) {
  div#logo img {max-width: 250px;}
}

/* convert google+ social to Afterpay */

ul#social-iconsX li:last-child {
   background-image: url('https://cdn.shopify.com/s/files/1/0725/0765/files/afterpay-logo-no-text-120px-grey_800x.png');
    width: 30px;
    height: 25px;
  padding:25px 20px;
    background-size: contain;
  background-position-y: 11px;
    background-repeat-y: no-repeat;
}

i.fa.fa-google-plus {
    
  background-image: url('https://cdn.shopify.com/s/files/1/0725/0765/files/afterpay-logo-no-text-120px-grey_800x.png');
    width: 25px;
    height: 25px;
    background-size: contain;
  background-position-y: 10px;
    background-repeat-y: no-repeat;
}
i.fa.fa-google-plus::hover {
  background-image: url('https://cdn.shopify.com/s/files/1/0725/0765/files/afterpay-logo-no-text-120px_800x.png');
}
ul#footer-icons li i.fa.fa-google-plus {
    width: 40px;
    height: 35px;
  background-position-y: 12px;
}
ul#footer-icons li:first-child{margin-left:0px!important;}
ul#footer-icons li:last-child{display:none;}
.fa-google-plus:before {
    content: "";
}

/* afterpay */

span.afterpay-text1 {
    display: table;
}
p.afterpay-paragraph {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
}

/* icons to show NEW ARRIVAL or 5 YEAR WARRANTY */
.new-item {color:#fff;left:10px;background-color:#ddd015;}

.icn{ font-weight:bold;}
 

/* collection message at top - BLUNT mainly! */
.bluntMessage p i{
  background: #aaa;
    background: #c4b919;
  background: #ddd015;
  padding: 10px;
  color: #fff;
  font-style:italic;
  
  font-weight:bold;
}
.bluntMessage p {
  text-align:center;
}
.bluntMessage{
  margin-bottom:25px!important;
}

@media handheld, only screen and (max-width: 720px) {
  .bluntMessage p {font-size:14px!important;}
}

Desktop version layout - place your custom code here */

.collection-page .col-swatch li.color {
    width: 58px!important;
    height: 45px!important;
}


ul.megamenu li > ul.mega-stack li a:hover{
 font-weight:bold!important;
}

.swatch .color label {background-size:100%!important;}

/* popup store notice on contact page */
.popupstore {
    padding: 20px;
    border: 1px dashed #999;
    margin-bottom: 20px;
}

img.crossed-out {
    border: 4px double rgba(200,0,0,.4);
}


/* hide image excerpts on blog grid! */
#article-loop .article-content p img {
    display: none!important;
}
#article-loop .box-ratio {
    margin-bottom: 20px;
}

/* for the little colour swatches on collection page, make them rectangular */

.collection-page .col-swatch li.color {
    width: 30px;
    height: 25px;
}

.collection-page .col-swatch li.color span {
    border-radius: 0;
   background-size: cover;
  cursor:zoom-in;
}


/* make SOLD OUT button look inactive */

input.add.disabled, input.add.disabled:hover {
    background: #eee;
    border: 1px solid #ccc;
    color: #666;
}

/* make the SOLD OUT and UNAVAILABLE button not have cursors or hovers!!! */
input[value="Sold Out"].add, input[value="Unavailable"].add  { cursor:not-allowed!important; }
input[value="Sold Out"].add:hover, input[value="Unavailable"].add:hover{background:#424242!important;}
/* make ADD TO CART yellow! */
input[value="Add to Cart"].add{background:#ddd015!important;}
input.add:hover { background-color: #c4b919!important;}
input[value="Add to Cart"].add{text-transform:uppercase; font-weight:bold;}

/* table.kiwi-sizing-table {  border: 1px solid;} */
/* KIWI SIZING TABLE TWEAKS */

td.kiwi-sizing-table-cell {
    xtext-align: left!important;
}
tr.kiwi-sizing-table-row {
    border-bottom: 1px solid #ddd;
}
td.kiwi-sizing-table-cell.kiwi-sizing-table-header-cell {
    width: 25%!important;
}
.sizing-chart-container {
    padding: 10px 10px 0px 10px;
    border: 1px solid #eee;
}

/*
.swatch .swatch-element.soldout label {
    filter: alpha(opacity=30);
    -khtml-opacity: 0.3;
    -moz-opacity: 0.3;
    opacity: 0.3;
}*/
.swatch .swatch-element.soldout label {
    filter: alpha(opacity=90);
    -khtml-opacity: 0.9;
    -moz-opacity: 0.9;
    opacity: 0.9;
}

/* old tooltip */
.swatch .tooltip {
   left: -53px;
    min-width: 160px;
}

/* get rid of all the colour tooltip stuff and just make it text!! */
.swatch .tooltip {
    left: -55px;
   /* min-width: 160px;*/
    top: 37px;
 bottom: auto!important;
      font-size: 16px;
    padding: 0px;
    font-weight: bold;
  background: rgba(0,0,0,0);
    color: #666;
  box-shadow:none;
  width:fit-content;
}

.swatch .tooltip:after{
  border:none!important;
}

.swatch input + label { 
   
   box-shadow: 0px 0px 0px 3px rgba(0,0,0,0.25);
}
.swatch-element.soldout input + label { 
  
   box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.0)!important;
}

.swatch .soldout input:checked  + label img.crossed-out {display:none!important;}
.swatch .soldout input:checked  + label img {display:none!important;}

.swatch input:checked + label { 
  /* yellow */
  webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
  box-shadow: 0px 0px 0px 4px rgba(221,208,21,1)!important;
}
.swatch .soldout input:checked + label { 
  webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
   box-shadow: 0px 0px 0px 4px rgba(61,61,61,1)!important;
}

/* add borders around sub and megamenus so they don't get lost over white */
ul#main-nav li ul.submenu {
  /* drop shadow style was wrong- trying border
  -webkit-box-shadow: 0px 0px 5px 5px rgba(30, 30, 30, .1);
-moz-box-shadow: 0px 0px 5px 5px rgba(30, 30, 30, .1);
box-shadow: 0px 0px 5px 5px rgba(30, 30, 30, .1);
  */
  border-top:1px solid #eee!important;
border-left:1px solid #eee!important;
  border-bottom:1px solid #eee!important;
  border-right:1px solid #eee!important;
  color:#858383!important;
}

ul.megamenu.row {
    border: 1px solid #eee!important;
}

/* stop megamenu subs being so close together! */
ul.megamenu li > ul.mega-stack li {
  line-height: 180% !important;
}



/* add a grey hilight when you rollover any active menu item */
ul.megamenu li > ul.mega-stack li a:hover, ul#main-nav li ul.submenu li a:hover, ul#main-nav li.noSubMenu a:hover {
 /* background:#f00 !important;
  font-weight:bold!important;*/
  background:#f3f3f3 !important;
}

/* the megamenu needed a little left padding so the hilight didn't sit right against text */
ul.megamenu li > ul.mega-stack li a {
  padding-left:10px!important;
}



/* I've added classes to the main menu items so we can bold up whatever we want! */
/* they're the menu name and 'menu', so let's make 'SaleMenu' bold and red */
li.SaleMenu a {
  font-weight: bold !important;
   color:#ab0e02!important;
}

.product-info-inner h4{font-size:14px!important;}
.product-info-inner h3, #product-description h1{color:#666!important;}
.product-info-inner .price, #product-description .product-price{color:#000!important;}

#product-description .product-price{font-size:24px!important;}


/* these used to be bold too, but I've turned them off by commenting out the font-weight: bold */

li.menuItem2 a, li.menuItem3 a, li.menuItem4 a, li.menuItem5 a , li.menuItem6 a {
 /* font-weight: bold !important; */
  
}

/* if you want a dropdown styling changed, you need to affect "menuItem#-#", 
where the first # is the main menu number it's under
and the second is the number of the dropdown
So, for instance, SHOP is the second across main menu, and dresses is the 3rd dropdown under that,
thus removing commenting from the following should turn dresses bold and red */

a.menuItem2-3{
/*  font-weight: bold!important;
  color:#ff0000!important;  */
}

/*

// further customisation follows

*/

.sideMenuHeaXd{display:none;}

/* reduce the dropdown spacing to make it fit on ipad */ 
ul#main-nav li ul.sub li{
  line-height: 30px! important;}

/* force the mobile menu to be scrolling! */
.dl-menuwrapper .dl-menu.dl-menuopen {
  max-height: 375px; 
  padding-bottom:10px;
  
    overflow-y: scroll!important;
  border:1px solid #ccc;
}




/* force 3 home page promo images to full width! */
#promo-images {
    width: 100%;
}

/*make the header icons bigger */
header .fa-2x {
    font-size: 18px! important;
    padding: 2px;
  -webkit-transition: color .2s ease-in;
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    transition: color .2s ease-in;
}


/*colour up social rollovers */
i.fa-pinterest:hover{color:#cb2027;}
i.fa-facebook:hover{color: #517cd5;}
i.fa-twitter:hover{color:#02a4d8}
i.fa-instagram:hover{color:#8a3ab9;}

/* colour cart */
i.fa-shopping-cart:hover, ul#cart li a:hover {
    text-decoration: none;
    color: #dbd300;
 -webkit-transition: color .2s ease-in!important;
    -moz-transition: color .2s ease-in!important;
    -o-transition: color .2s ease-in!important;
    transition: color .2s ease-in!important;
}



div#logo {padding-top:10px;}
#hello p{color:#fff!important;}



/* product description left justified */
#product-description{text-align:left; padding: 10px 15px 10px 18px;border-bottom:2px solid #f0f0f0;}

/* on the collection page, give the image a right margin */
.collectionPageImages img{margin-right:15px;margin-bottom:8px;}

@media handheld, only screen and (min-width: 1220px) {
	.collectionPageImages { padding-left: 60px;}
}
@media handheld, only screen and (max-width: 1219px) {
	.collectionPageImages {  padding-left: 80px;}
}
@media handheld, only screen and (max-width: 996px) {
	.collectionPageImages {  padding-left: 100px;}
}
@media handheld, only screen and (max-width: 768px) {
	.collectionPageImages {  padding-left: 108px;}
}

/* make the search term entry more apparent!! */
#search_popup #search {
    border: 1px solid #ddd;
}

/* add more lineheight in the first sidebar linklist so the sale menu items aren't crowded */
ul.sidebarLinkList1 {
  line-height: 30px;
}



li.menuItem7XXXXX a {
      background: #f2f2f2;
   font-weight: bold !important;
    color:#ab0e02!important;
}


/* make the ON SALE in the drop menu bold and red */
a.saleMenuBold{
  font-weight:bold!important; color:#ab0e02!important;
}

/* style  up the PERCENTAGE OFF amount for sales */
span.percentOffM::after {
  Xcontent: "%!";
}
span.percentOffM::before {
  content: " - save ";
}
span.percentOffM {

  color: #ba2323;
  /*  font-weight: bold;*/
}

/* make the discount link on the checkout more prominent */
a#show-discount-form-link {
  color: #c00;
  text-transform: uppercase;
}

/* hide the post tags on the blog */
.post-tags {
  display: none!important;
}
/* make blog post titles a little more prominent */

.article-info h2 {
   
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
}
.article-info h2 a { color: #333 !important;}
.article-info h2 a:hover { color: #aaa !important;}
.blogFeaturedImage{
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
  display:block;
}


#article-loop .article-info {
    border-bottom: 1px dashed #eee !important;
}
.article-info {
    min-height: 780px;
}

/* hide the collection description (but leave it for search engines */
#collection-description{display:none;}

/* for the mobile menu, close up spacing so things don't disappear of bottom of screen!! */
.dl-menuwrapper li a {
  padding: 15px 20px 0px 15px;
}
.dl-menuwrapper li > a:not(:only-child):after {
	
}
.dl-menuwrapper li > a(:only-child):after {
	line-height: 30px;
}
.dl-menuwrapper li.dl-back:after {
  
}

/* for the sidebar menu in collections, put a border on the headings */
.sideMenuHead {border-top: 4px double #bbb;
    max-width: 100px;
    padding-bottom: 10px;}
.sideMenuTitle{color:#333; text-transform:uppercase;}
.sideMenuHeadSale{
  border-top: 4px double #bbb;
    max-width: 100px;
}

/* make breadcrumb bigger as it's basically the collection title!! */
#breadcrumb {
    color: #333;
    font-size: 14px;
}

/* actually, I've turned off breadcrumbs because they weren't going to sublevels and just using title now */
#collection-description h1 , #page h1{
 color:#666;
  text-transform: uppercase;
}

/* add a border to the scroll-to-top */
.scrollup {
    background: rgba(250, 250, 250, 0.8) none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 6px;
    height: 40px;
    width: 40px;
    padding:5px;
  opacity:.5;
}

.spacer10px{height:10px;}
.spacer15px{height:15px;}

/* make the circular SALE icons red */
.sale-item{background-color:#980b1b;}

/* fix the arrows on 'you  might also like' so the wrap properly!! */
.customNavigation {
    clear: both;
}

/* style the footer a little */
#footer {
    border-top: 4px double #eee;
  padding-top:15px;
}


#footer-wrapper{
  background-color:#fafafa;}

.extraHallFooter p{font-size:18px; text-transform:none!important; color:#777!important; text-align:center;}
.extraHallFooter p a{color:#444!important;}


/* give contact form on the contact page a bit of a seperator */
form#contact_form {
    border: 1px solid #ddd;
    padding: 25px;
  margin-bottom:20px;
  margin-top:20px;
      min-height: 105px;

}
.successForm.feedback {
    font-weight: bold;
    text-align: center;
    color: #198300;
    border: 1px dashed #ccc;
    padding-top: 10px;
}

.aboutUsColumn h3{
  text-transform:uppercase;
  color:#666;
  padding-top:20px;
}

.aboutUsColumn{
  float:left;
 width:42%;
  margin-right:15%;
  line-height:24px;
}
  .aboutUsColumnRight{
  margin-right:0px;
}

@media handheld, only screen and (max-width: 825px) {
  .aboutUsColumn{
    width:100%;
    margin-right:0px;
   /* padding:15px;*/
	}
}
@media handheld, only screen and (max-width: 744px) {
.lorrainePicx {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(//cdn.shopify.com/s/files/1/0725/0765/files/about-lorraine-hall-and-hall-nz-womens-fashion-m.jpg?11169349875272118447) no-repeat;
  width: 585px; /* Width of new image */
  height: 268px; /* Height of new image */
  padding-left: 585px; /* Equal to width of new image */
}
}
@media handheld, only screen and (max-width: 744px) {
.lorrainePic {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(//cdn.shopify.com/s/files/1/0725/0765/files/about-lorraine-hall-and-hall-nz-womens-fashion-m_large.jpg?14885640946022977903) no-repeat;
  width: 480px; /* Width of new image */
  height: 220px; /* Height of new image */
  padding-left: 480px; /* Equal to width of new image */
}
}
@media handheld, only screen and (max-width: 510px) {
.lorrainePic {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(//cdn.shopify.com/s/files/1/0725/0765/files/about-lorraine-hall-and-hall-nz-womens-fashion-300a.jpg?12789210669843690038) no-repeat;
  width: 293px; /* Width of new image */
  height: 268px; /* Height of new image */
  padding-left: 293px; /* Equal to width of new image */
}
}




/* column for the contact screen */

.contactLeftSide p{
	line-height: 24px;
}
.contactLeftSide a{
  color:#777;
}
.contactLeftSide a:hover{
  text-decoration:underline;
}

.contactLeftSide{
  padding-right:0px;
 
}
.contactColumn{float:left;
  margin-right:5%;
  width:30%;
     
}

.contactColumnMiddle{
  text-align:center;
}

.contactColumnLast{
  float:left;
  width:30%;
  text-align:right;
}

.centerAlignThisPic{
  margin-left:auto;
 margin-right:auto;
  display:block;
  clear:both;
}

@media handheld, only screen and (max-width: 996px) {
	.contactColumn, .contactColumnLast{
	  width:100%;margin-right:0px;
      text-align:center;
      padding-bottom:15px;
	}
  .contactLeftSide{
  	padding-right:0px;
	}
}


/*
_______________________________

Mobile version - single break point */

@media handheld, only screen and (max-width: 767px) {
  
  .sideMenuHeadSale, .sideMenuHead {max-width:100%;}

	.examplecontainer {}

	body {}
	
}




/*
_______________________________

Provide higher res assets for higher resolution mobile screens */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

	/* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size.
	.download {
	background: url(../img/downarrow@2x.png) no-repeat;
	background-size: 27px 28px;
	}
	*/

}