/*
COLOURS:

BORDERS: #ccc
TEXT: #333
EMPHASIS TEXT: #000
LINKS: #f48028


/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
 

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: open sans; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; overflow:auto; -webkit-overflow-scrolling: touch; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection { background: #64b544; color: #fff; text-shadow: none; }
::selection { background: #64b544; color: #fff; text-shadow: none; }


/* =============================================================================
   Links
   ========================================================================== */

a { color: #7c3b95; text-decoration:none;	transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s; }
a:visited {}
a:hover {text-decoration: none;	transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;}


/* =============================================================================
   Typography
   ========================================================================== */

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: 900; color:#333; }

blockquote {font-size:1.3em; line-height:1.6em; margin:0 0 1.3em 0; font-style:italic;}

dfn { font-style: italic; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ddd; margin: 0; padding: 0; }

ins { background: #ff9; color: #000; text-decoration: none; }

mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1.3em; }

/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }

small { font-size: 85%; }

/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }


/* =============================================================================
   Lists
   ========================================================================== */

ul, ol { margin: 1em 0; padding: 0 0 0 20px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

/*
 * Correct overflow not hidden in IE9
 */

svg:not(:root) { overflow: hidden; }


/* =============================================================================
   Figures
   ========================================================================== */
figure { margin: 0; }


/* =============================================================================
   Tables
   ========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* =============================================================================
   Form Style
   ========================================================================== */
input {box-sizing:border-box}

/* =============================================================================
   Button Style
   ========================================================================== */
.btn-line { color:#fff; border:2px solid #fff; background:none; padding:12px 0; margin:14px auto; text-decoration:none; font-size:1.6em; display:block; font-weight:700}
.btn-line:hover {background:#8841a5;}
.btn { background:#64b544; font-size: 1.4em; color:#fff; padding:14px 0; text-align:center; margin:16px 0; display:inline-block; width:100%;}
.btn:hover { background:#82c866;}
.btn-center { margin: 14px auto;}
.btn-large { font-size:1.4em; padding:16px 0px;}
.btn-grey {background:#a29ca2; }
.btn-blue {background:#468ed1; }
.btn-red {background:#da5d50; }
.btn-grey:hover {background:#cac3ca; }
.btn-blue:hover {background:#6caae4; }
.btn-red:hover {background:#e27267; }
/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }


/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
body{font-size:62.5%; color:#333;}

p{font-size:1.3em; line-height:1.6em; margin:0 0 1em 0;}

h1{font-size:2.5em; line-height:1em; color:#010101; font-weight:300;}
h2{font-size:2.5em; line-height:1em; color:#010101; font-weight:300;}
h3{font-size:2em; line-height:1em; color:#4f4f4f; font-weight:300;}
h4 {font-size:1.7em; line-height:1em; color:#8c4ca5; font-weight:300;}

p.emph{font-size:1.5em; color:#000;}

ul, ol{}
ul li, ol li{font-size:1em; line-height:1.6em;}
#main ul li, #main ol li{color:#000}
#main ul li span, #main ol li span{color:#333;}
ol ul{margin-bottom:0;}
ol{list-style-type:lower-alpha;}

.clear{clear:both;}

.block{max-width:1100px; margin:0 auto; overflow:auto}
.container{width:90%; margin:60px auto; overflow:auto}

.m10-0{margin:10px 0; overflow:auto;}
.m20-0{margin:20px 0; overflow:auto;}
.m30-0{margin:30px 0; overflow:auto;}
.m40-0{margin:40px 0; overflow:auto;}
.p10-0{padding:10px 0; overflow:auto;}
.p20-0{padding:20px 0; overflow:auto;}
.p30-0{padding:30px 0; overflow:auto;}
.p40-0{padding:40px 0; overflow:auto;}

.w10{width:10%;}
.w20{width:20%;}
.w30{width:30%;}
.w40{width:40%;}
.w50{width:50%;}
.w60{width:60%;}
.w70{width:70%;}
.w80{width:80%;}
.w90{width:90%;}
.w100{width:100%;}

.no-margin{margin:0;}
.no-padding{padding:0;}
.top-margin{margin-top:0;}
.bottom-margin{margin-bottom:0;}
.right-margin{margin-right:0;}
.left-margin{margin-left:0;}
.top-padding{padding-top:0;}
.bottom-padding{padding-bottom:0;}
.right-padding{padding-right:0;}
.left-padding{padding-left:0;}

.half{width:48%;}
.left{float:left;}
.right{float:right;}

.align-right{text-align:right;}
.align-left{text-align:left;}
.align-center{text-align:center;}

.img-bdr{padding:3px; border:1px solid #000;}

span img { width:100%; height:auto;}

/* =============================================================================
   Background Styles (Global)
   ========================================================================== */
 
.greyback { background:#e6e6e6}  
.lightgrey {background-color:#f2f0ee}
.titlehead { border-top: 50px solid rgba(0,0,0,0.08); background-color: #fff; padding-bottom:60px;}

/* =============================================================================
   Navigation & Header (most styles in nav.css)
   ========================================================================== */
   header {
	background:#090708;
    color: #FFFFFF;
    height: 60px;
    line-height: 40px;
    padding: 0px;
    text-align: center;
	position:fixed;
	top:0;
	width:100%;
	z-index:20;}
header .block { overflow:visible;}
header .container{margin:0px auto; overflow:visible; width:100%;}
#logo{width:56px; height:25px; display:block; float:right; text-indent:-9990em;  padding:17px 16px 18px 12px; background:#090708; z-index:10; position:absolute; left:50%; margin-left:-50px;}
#logo:hover{ background:#df4c3c;}
#logo img{width: 100%; display:block; height:auto;}

#mobile-header {
display: block; text-align:left;}
#mobile-header #responsive-menu-button { background-image:url(../images/structure/hamburger.png); background-repeat:no-repeat; background-position:0px 10px; text-indent:-9999em; height:60px; width:66px; display:inline-block; background-size: contain;}
#mobile-header #responsive-menu-button:hover { background-color:#454545}
#mobile-header #basket { background-image:url(../images/structure/basket.png); background-repeat:no-repeat; background-position: 0px 10px; height:60px; width:66px; display:inline-block; float:right;  background-size: contain;}
#mobile-header #basket:hover { background-color:#454545}

#navigation {display:none; height:60px; width:604px; background:#090708;}
#navigation ul {height:60px}
#navigation li { display:inline-block;}
#navigation li a { font-size:1.2em; color:#fff; text-transform:uppercase; line-height:4.9em; padding:4px 12px;}
#navigation li a:hover, #navigation li a:focus, #navigation li a.active  {background:#CA271A}
#navigation li ul { width:100%; position:absolute; height:auto; overflow:hidden; top:50px; left:0; background: rgba(0,0,0,0.3); height:50px; padding:5px 0 2px 112px}
#navigation li:hover ul, #navigation li:focus ul {width:100%; display: block}
#navigation li ul li {display:inline-block; float:left; }
#navigation li ul li a {}

#choice {height:60px; /*width:604px; *//*background:#090708;*/ visibility:visible;}
#choice ul {height:60px}
#choice li { display:inline-block;}
#choice li a { font-size:1.2em; color:#fff; text-transform:uppercase; line-height:4.9em; padding:0;}
#choice li a:hover, #choice li a:focus, #choice li a.active  {background:#CA271A}
#choice li ul { width:100%; position:absolute; height:auto; overflow:hidden; top:0; left:0; background: rgba(0,0,0,0.3); height:60px; padding:0}
#choice li:hover ul, #choice li:focus ul {width:100%; display: block}
#choice li ul li {display:inline-block; float:left; width:50%; }
#choice li ul li a { display:block; height:60px; }
/*#choice .container li*/.wholesale {background:rgba(202, 39, 26, 0.7)}
/*#choice .container li*/.retail {background:rgba(17, 92, 117, 0.7)}


/* =============================================================================
   Nav Search & social
   ========================================================================== */
.searchandsocial { background:#fff; height:60px; width:340px; position:absolute; top:0; right:0; z-index:20}
.searchandsocial #search { color: rgb(204, 204, 204); border: 0 none; padding:10px 22px; text-align:left; position:relative;}
.searchandsocial #search input[type="text"] { display:inline-block; border:none 0;text-transform:uppercase; width:auto; min-width:188px;}
.searchandsocial #search #searchbodyjewellery { width:20px; height:20px; display:inline-block; background:url(../images/structure/social-icons.png) 0 0; position:absolute; top:17px; right:108px;}
.searchandsocial #search #searchbodyjewellery:hover { width:20px; height:20px; display:inline-block; opacity:0.5;}
.searchandsocial .twitter {width:30px; height:21px; display:inline-block; background:url(../images/structure/social-icons.png) -32px 0; text-indent:-9999em; position:absolute; top:16px ;right:70px;}
.searchandsocial .facebook{width:21px; height:21px; display:inline-block; background:url(../images/structure/social-icons.png) -68px 0; text-indent:-9999em; position:absolute; top:16px ;right:48px;}
.searchandsocial .pinterest {width:25px; height:21px; display:inline-block; background:url(../images/structure/social-icons.png) -103px 0; text-indent:-9999em; position:absolute; top:16px ;right:14px;}

/* =============================================================================
   In wrong shop pop
   ========================================================================== */
   
   .wrongplace { width:400px; height:400px; position:fixed; top:30px; left:50%; margin-left:-220px; background: url(../images/content/index/wrong-place.png) 100px 90px no-repeat #82C866; border:5px solid #82C866; border-radius:50%; box-shadow: 10px 10px 5px rgba(0,0,0,0.4), inset 0px 0px 0px 4px #fff; color:#3f3f3f; text-align:center; z-index:200}
   .wrongplace p {color:#fff; padding:180px 0 30px; font-size:1.8em;}
     .wrongplace .btn { text-align:center; margin:20px 30px 20px 30px}

/* =============================================================================
   Banner
   ========================================================================== */
/* Ash guy */
/*#banner { background:url(../images/content/index/tdi-banner-light-bg.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}*/
/* christmas banner */
/*#banner { background:url(../images/content/index/tdi-banner-xmas-bauble.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}*/
/* #banner { background:url(../images/content/index/xmas-tdi-2019-background4.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;} */
/* #banner { background:url(../images/content/index/tdi-xmas-banner-2022-2000x676.jpg?v=xmas) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;} */
/* #banner { background:url(../images/content/index/tdi-xmas-banner-2023-2000x676.jpg?v=xmas) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;} */
/* #banner { background:url(../images/content/index/tdi-xmas-banner-2024-2000x676.jpg?v=xmas) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;} */
#banner { background:url(../images/content/index/tdi-xmas-banner-2025-2026-2000x676.jpg?v=xmas2025) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}
/*#banner { background:url(../images/content/index/xmas-2020-background-2000x676.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}*/
/*#banner { background:url(../images/content/index/tdi-banner-less-watermark.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}
*//*#banner { background:url(../images/content/index/tdi-banner.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}*/
/*#banner { background:url(../images/content/index/tdi-banner-left.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}*/
/*#banner { background:url(../images/content/index/index-master-banner.jpg) no-repeat; width:100%; margin-top:0px; padding-top:0px; display:block; overflow:auto; background-size:cover; position:relative;}*/
#banner .container {margin:0; position:relative; text-align:center; width:100%;}

#banner .container h1 { font-size:3em; font-weight:400; position:relative; top:0; bottom:0; width:90%; height:100%; margin:0; padding:70px 5%; background: rgba(255,255,255,0.5)}
#banner .container h1 span {/*background:url(../images/content/index/banner-logo.png) no-repeat; background-size:contain;*/ width:240px; height:97px; position:absolute; bottom:-126px; left:0px; display:none;}
#banner .container h1 span a {display:inline-block; width:45%;float:left;height:80px; color:#fff; line-height: 2.8em; padding:0; text-decoration:none; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; padding-left:5px;}
#banner .container h1 span a:hover {color:#fff; text-decoration:none;background-color:rgba(202, 39, 26, 1);transition: all 0.2s ease-in-out 0s;
  -webkit-transition: all 0.2s ease-in-out 0s;}
#banner .container h1 span a.wholesale {margin-right:5px;}
#banner .container h1 a { font-weight:900; color:#000; }
#banner .container h1 a:hover { font-weight:900; color:#000; text-decoration:underline; }

#banner .photo_info { position:absolute; bottom:14px; right:14px; font-size:0.9em; color:#fff; display:none}

/* =============================================================================
   Your Piercing Section
   ========================================================================== */
#your-piercings {background: #cb4850; text-align:center;}
#your-piercings h3 { color:#fff; text-transform:uppercase; font-size:4.2em; margin:10px 0;}
#your-piercings p { background:rgba(54,2,5,0.5); padding:20px; color:#fff; max-width:500px; text-align:center; margin:0 auto}


/* =============================================================================
   Main Styles
   ========================================================================== */
#main{clear:both;}

section h1 { text-align:center;}
section p.statement { text-align:center; padding-bottom:40px}
section p.intro { font-size:1.6em; color:#7e9fad}

.container img { width:100%; height:auto;}
#quotation.container {margin-bottom:0;}

/* Large column on top of small
Swap round the style from small to large if the small columns is to display first */
.small-left-col{padding-bottom:30px;}
.small-right-col{padding-bottom:30px;}
.large-left-col{padding-bottom:40px;}
.large-right-col{padding-bottom:40px;}
.mid-left-col{padding-bottom:40px;}
.mid-right-col{padding-bottom:40px;}
.three-left-col {padding-bottom:40px; width:100%; text-align:center; display:inline-block;}
.five-left-col {width:91%; float:left; padding:14px}

.three-left-col h2,.three-left-col p { padding:0 20px;}

.announcement { background:#dfdedc; text-align:center; text-transform:uppercase;}
.announcement .container{width:90%; margin:60px auto; overflow:auto}
.announcement h3{ font-size:4.2em; color: #1f1e1b;  font-weight:600; margin:0 0 14px 0}
.announcement p{ color:#296a7b; font-size:1.6em;}

/* =============================================================================
   Index Product Links used for slider on index only so could be moved to index css file
   ========================================================================== */
   	.indexproducts .block { width:100%; max-width:100%; background-color:#fff;}
	.indexproducts .container{margin:16px auto; width:100%;}
	.indexcat { padding:0; position:relative; text-align:center; height: auto;}
	.indexcat img { width:100%; height:auto; position:absolute; top:0; left:0; z-index:10; opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;}
	.indexcat img:hover {opacity:0.7; filter:alpha(opacity=100); transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;}
	.indexcat h3 { color: #fff; text-transform: uppercase; position:relative; z-index:11; font-weight:700; margin:40px 0 0 0; font-size:1.9em; pointer-events: none;}
	.indexcat h3 span { display:block; font-size:0.7em; font-weight:600; color:#fff!important;}
	.cat1 { background:#ca271a}
	.cat2 { background:#115c75}
	.cat3 { background:#1dbd68}


/* ------ Elastislide Styles ------*/
.elastislide-list {list-style-type: none;display: none;}
.no-js .elastislide-list {display: block;}
.elastislide-carousel ul li {min-width: 180px; /* minimum width of the image (min width + border) */}
.elastislide-wrapper {position: relative;background-color: #fff; margin: 0; min-height: 123px;}
.elastislide-wrapper.elastislide-loading { background-image: url(../images/loading.gif);background-repeat: no-repeat;background-position: center center;}
.elastislide-vertical {padding: 0px;}
.elastislide-carousel {overflow: hidden;position: relative;}
.elastislide-carousel ul {
	position: relative;
	display: block;
	list-style-type: none;
	padding: 0;
	margin: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	-ms-transform: translateX(0px);
	-o-transform: translateX(0px);
	transform: translateX(0px);
}
.elastislide-horizontal ul { white-space: nowrap;}
.elastislide-carousel ul li {margin: 0;-webkit-backface-visibility: hidden;}
.elastislide-horizontal ul li {height: 100%;display: inline-block; width:400px; border-left:8px solid #fff; border-right:8px solid #fff;}
.elastislide-vertical ul li {display: block;}
.elastislide-carousel ul li a {display: inline-block;width: 100%; height:124px}
.elastislide-carousel ul li a img {display: block;max-width: 400px;}

/* Navigation Arrows */
.elastislide-wrapper nav span {position: absolute; background: rgba(255,255,255,0.3); width: 50px; height: 34px; cursor: pointer; padding:20px 0;
box-shadow: 0px 0px 40px rgba(0,0,0,0.2)}
	.elastislide-wrapper nav span span {position: inherit; padding:0; background: none;height: auto ;color:#fff; font-size:2.8em; text-align:center; margin-left:0px;
	transform:scale(1,2); /* W3C */
    -webkit-transform:scale(1,2); /* Safari and Chrome */
    -moz-transform:scale(1,2); /* Firefox */
    -ms-transform:scale(1,2); /* IE 9 */
    -o-transform:scale(1,2); /* Opera */}
.elastislide-wrapper nav span:hover {background: rgba(255,255,255,0.74);transition: all 0.2s ease-in-out 0s;
	-webkit-transition: all 0.2s ease-in-out 0s;}
.elastislide-wrapper nav span span:hover {background: none;}
.elastislide-horizontal nav span {top: 40%; left: 0px; margin-top: -11px;}
.elastislide-vertical nav span {top: 10px;left: 50%;margin-left: -11px;}
.elastislide-horizontal nav span.elastislide-next { right: 0px; left: auto;}
.elastislide-vertical nav span.elastislide-next {bottom: 10px; top: auto;}



/* =============================================================================
   Product Links
   ========================================================================== */
   .item {}
   .item h4 { font-size:1.4em; text-transform:uppercase; color:#1f1e1b;}
   .item span.five {}
   .item span.four {}
      .item span.three {}
	     .item span.two {}
		    .item span.one {}
      .item p {color:#1f1e1b; font-size:1.2em; margin:0;} 
	  .item p.price {font-size:1.4em; font-weight:600;} 
	  
	   
   .item:hover { background:#da5d50;}
   .item:hover  h4{color:#fff;}
      .item:hover p {color:#fff;} 
	  
   
#quotation { border-top:1px solid #d03222; position:relative; overflow:visible; padding-top:40px;  }
#quotation:before { text-align:center; content:'"'; font-family:"Times New Roman", Times, serif; font-size:6em; color:#d03222; background:#fff; width:60px; position:absolute;top:-30px; left:50%; margin-left:-30px}
#quotation p { font-size:2.2em; font-style:italic; font-weight:300; position:relative; z-index:2}
#quotation p.author { color:#d03222; position:absolute; bottom:0; right:0; margin:0;}
/* =============================================================================
   Footer
   ========================================================================== */
footer{clear:both; background:#2e2e2e; color:#fff; -webkit-overflow-scrolling: auto;}
footer .container {overflow:auto;}
footer .container img { width:auto;}
footer h3, footer dt { text-transform:uppercase; color:#fff; font-size:1.3em; font-weight:600; letter-spacing:1.5px; margin-bottom:12px}
footer p{ font-size:1.1em; line-height:1.4em; margin-bottom:2px; color:#818080}
footer .footer-nav { width:100%; overflow:auto;}
footer dl { width:32%; float:left;}
footer dt { text-transform:uppercase; color:#fff;}
footer dd { margin:0; line-height:1.6em;}
footer dd a { color: #616162;}
footer form { margin-bottom:40px}
footer form input[type="text"], footer form input[type="email"] { border:1px solid #616162; background: none; padding:5px 14px; color:#616162}
footer form input[type="submit"] { border: none; background: fff; text-transform:uppercase; color:#2e2e2e; padding:5px 14px; margin-left:2px}
footer form input::-webkit-input-placeholder  { color:#616162}
footer form input:-moz-placeholder  { color:#616162}
footer form input:-moz-placeholder  { color:#616162}
footer form input:-ms-input-placeholder  { color:#616162}
footer .footer-bottom { width:100%; padding-top:40px; display:block; text-align:left; color:#161514; margin-top:20px; text-transform:uppercase; font-size:1.2em;}

/* scroll to top pop-up */
#to-top{position:fixed; right:0; top:90%; border-left:1px solid #fff; border-top:1px solid #fff; border-bottom:1px solid #fff; display:none;}
#to-top:hover{cursor:pointer;}

.titlehead .block { overflow:visible;}
.titlehead h3 { margin:-30px 0 0 40px; font-size:1.5em;}




top60 {padding-top:60px}
.btn { border:none; cursor:pointer;}
.container {margin: 12px auto}
#quotation.container {margin: 60px auto}
hr {padding-bottom:14px}

a.item { min-height:281px;}
a.item span.product {min-height:180px; background:#fff; overflow:auto; display:block}
a.item span.product img {width:80%; margin:10%;}


.titlehead h3 { text-transform:uppercase}


#product-variants label {display:block; font-size:1.2em; padding:0px 0; text-transform:uppercase}
#product-variants select, #product-variants input {margin:7px 0 10px 0}

a.btn-grey { border:1px solid #A29CA2}


.yotpo-testimonials-btn { border-radius:0; border:none;}

.yotpo { background:#efefef}

#reviewbox #closereview { position:absolute; top:-16px; right:0px; width:24px; font-weight: 900; padding:10px}


/* basket styles - feel free to move me */

#cartform {background:#f4f4f4; border-bottom:1px solid #ccc;  overflow:auto; border-left: 1px solid #EFEFEF; border-right: 1px solid #EFEFEF;}

#basket {margin:0; width:100%; font-size: 1.4em}
#basket p {margin:0; line-height:1.4em;}
#basket .basket-desc span{ font-size:0.9em; padding-right:16px;}
#basket thead th { text-align:left; font-size:1.1em; background:#fff; padding:18px 0;border-bottom:3px solid #e14029;}
#basket tbody tr { border-bottom:1px solid #ddd;}
#basket tbody tr td {padding:10px; vertical-align:top}
#basket tbody tr td.basket-column-one {width:57%; padding:10px;}
#basket tbody tr td:first-child, #basket thead th:first-child {padding-left:20px; width:9%;}
#basket tbody tr td:last-child, #basket thead th:last-child {padding-right:20px}
.basket-right { background:#f4f4f4; border-bottom:1px solid #ddd; overflow: auto; padding:20px }
.basket-right p.delivery, .basket-right p.shipping { width:100%; margin-bottom:0; font-size:1.5em;  }  
.basket-right p.shipping {color:#a9a9a9; font-size:2em;}
.basket-right h2 { margin:0;text-align:center;}
#basket-buttons { background:#dfdfdf; border-top:1px solid #efefef; padding:10px 20px}
#basket-buttons .btn {display:block}
 #basket-buttons .btn-green { position: fixed; bottom:-20px; left:0}

#quotation p.author { position: static}


footer dl { width:100%;}
footer form input[type="text"], footer form input[type="email"] { margin-bottom:10px}



.gsc-tabHeader.gsc-tabhActive, .gsc-tabHeader.gsc-tabhInactive { padding:10px 14px}
.cse .gsc-webResult.gsc-result, .gsc-webResult.gsc-result, .gsc-imageResult-classic, .gsc-imageResult-column { margin:0!important;}
.gsc-webResult.gsc-result, .gsc-results .gsc-imageResult  { padding:0!important; border-left:4px solid #fff!important;}
.gsc-webResult.gsc-result:hover, .gsc-imageResult:hover { border-left-color:#DA5D50!important;}
.gsc-webResult .gs-result { padding:10px; border-bottom:1px solid #eee;}
.gsc-webResult .gs-result:hover { background: #efefef;}
.gsc-results .gsc-cursor-box { text-align:center;}
.gsc-results .gsc-cursor-box .gsc-cursor-page {padding:5px 8px!important; margin:0!important;}
.gsc-results .gsc-cursor-box .gsc-cursor-current-page { color:#fff!important;}

/* NEILS UPDATE */
#banner span { position:absolute; bottom:84px; right:90px; width:300px; display:none; text-align:center}
  #banner span p { display:block; text-align:center; padding:6px 0; margin-bottom:0}
  #banner span a {   color: #FFFFFF;
  display: inline-block;
  float: left;
  line-height: 2.8em;
  padding: 7px 0;
  text-decoration: none;
  transition: all 0.2s ease-in-out 0s;
  width: 45%;
  text-align:center;
  font-size:1.4em;
  /*padding-left:10px;*/
}
/*#banner span a.wholesale { background:url(../images/button-box.png) no-repeat 16px 16px rgba(202, 39, 26, 0.7)}
#banner span a.retail {background:url(../images/button-bag.png) no-repeat 16px 14px rgba(17, 92, 117, 0.701961)}
#banner span a.wholesale:hover { background:url(../images/button-box.png) no-repeat 16px 16px #c9685d}
#banner span a.retail:hover { background:url(../images/button-bag.png) no-repeat 16px 14px #4788a3;}*/
#banner span a.wholesale { background-color: rgba(202, 39, 26, 0.7)}
#banner span a.retail {background-color: rgba(17, 92, 117, 0.701961)}
#banner span a.wholesale:hover { background-color: #c9685d}
#banner span a.retail:hover { background-color: #4788a3;}

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

body:after {
	content: "less than 320px";
	font-size: 300%;
	font-weight: bold;
	position: fixed;
	bottom: 60px;
	width: 100%;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7);
	color: #fff;
	display:none;
} /* Media Reporter for testing */

@media only screen and (min-width: 320px) {
	body:after {
		content: "320 to 480px";
		background-color: hsla(90,60%,40%,0.7);
	} /* Media Reporter for testing */
  header {position:static;}
  #banner {height:320px;}
}
@media only screen and (min-width: 480px) {
	body:after {
		content: "480 to 768px";
		background-color: hsla(180,60%,40%,0.7);
	} /* Media Reporter for testing */
.five-left-col {width:43.2%}
.elastislide-carousel ul li a { height:158px}
header {position:static;}
}
@media only screen and (min-width: 767px) {
	body:after {
		content: "768 to 1024px";
		background-color: hsla(270,60%,40%,0.7);
	} /* Media Reporter for testing */

#banner {opacity:1;}
#banner.contact {height:400px }
#banner.contact h1 {margin-top:80px;}
#banner .photo_info { display: inline-block}
a.btn-line {display:inline-block; padding:14px 20px;}
.elastislide-carousel ul li a { height:256px}
.indexcat h3 {margin:80px 0 0 0; font-size:2.2em;}

	.small-left-col{float:left;width:30%; display:block; padding:0; border:0;}
	.small-right-col{float:right; width:30%; display:block; padding:0; border:0;}
	.large-right-col{float:right; width:65%; display:block; padding:0; border:0;}
	.large-left-col{float:left; width:65%; display:block; padding:0; border:0;}
	.mid-right-col{float:right; width:47.6%; display:block; padding:0; border:0;}
	.mid-left-col{float:left; width:47.6%; display:block; padding:0; border:0;}
.three-left-col {float:left; width:31.8%; margin-right:15px; }
	.three-left-col:nth-child(3) {margin-right:0px; }
	.three-left-col span img{ width:100%; height:auto;}
	.four-left-col { width: 49%; margin:0; float:left; min-height:66px;}
.four-left-col div { margin:0 35px}
.four-left-col:last-child { border:0}
.four-left-col:last-child > div { margin-right:0;}
.five-left-col {width:21%}
	.btn { width:160px;}
	
	  footer dl { width:15%;margin-left:10px}   
   footer dl:first-child { width:32.4%;margin:0} 
header {position:static;}
}

@media only screen and (min-width: 1024px) {
	body:after {
		content: "1024 and up";
		background-color: hsla(360,60%,40%,0.7);
		display:none;
	} /* Media Reporter for testing */
	header {position:fixed;}
  header a[href="#menu"]{display: none;}
  #mobile-header {display: none;}
  #logo{float:left; position:relative; left: auto; margin:0;}
  #navigation { display:block }
  #choice { visibility: hidden; }
  #banner { height:500px; background-position: -95px 0; padding-top:40px;}
  #banner .container { height:500px; text-align:left}
  #banner .container h1 { font-size:3em; font-weight:400; width:320px; height:auto; float:right; margin:80px 70px 0 0; position:relative; padding:0; background:0;}
  #banner .container h1 span { display:block;}
  #banner .container h1 a { font-weight:900; color:#000; }
  #banner .container h1 a:hover { font-weight:900; color:#000; text-decoration:underline; }
	
  .two-left-col {float:left; width:47%; padding:0 }
  .two-left-col:nth-child(2) {float:right; padding:0 }
  .four-left-col { width: 24.2%; margin:0;}
  .five-left-col { width: 17%; margin:0;}
  	
  .indexcat { padding:0; position:relative; text-align:center; height:auto; min-height:219px;}	
  #quotation { width:80%;}
  .elastislide-carousel ul li a { height:234px}

  .container {margin: 60px auto;}
  
  #basket tbody tr td {vertical-align:middle}  
  .basket-right p.shipping { float:left; width:40%;}  
  .basket-right p.delivery { float:right; width:40%; font-weight:900;  color:#ca2715; text-align:right;}
  .basket-right h2 { text-align:right;}
  #basket-buttons .btn {display:inline-block}
  #basket-buttons .btn-green { float:right; position: static;}
  
  #reviewbox { display:none; width:800px; background:#efefef; padding:50px 20px 20px 20px; position: fixed; top:140px; left:50%; margin-left:-480px; -moz-box-shadow: 5px 5px #888;
-webkit-box-shadow: 5px 5px #888; box-shadow: 5px 5px #888; }
  
  #quotation p.author { position: absolute; right:0;}
  
  footer dl { width:18.2%; margin:0}   
  footer dl:first-child { width:25%;}
  .choice {visibility:hidden;}

  #banner span {display: inline-block}

  /* Christmas banner background */
  #banner #test {background-color:white; padding:20px; opacity:.8;}
  #banner #trade_or_retail {color: white;}
}

@media only screen and (min-width: 1400px) {
	#banner { height:600px;  background-position: 0 0;}
	#banner .container { height:550px;}
	#banner .container h1 { font-size:3em; font-weight:400; width:320px; height:auto; float:right; margin:100px 40px 0 0; position:relative; padding:0; background:0;}
  #banner .logo { /*background:url(../images/content/index/banner-logo.png) no-repeat; background-size:contain; */width:120px; height:97px; position:absolute; bottom:40px; right:40px;}
  #banner span { right:60px; }
}

/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}