/* reset.css */
@charset "UTF-8";
/* standard reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
/* ________________________________________________________________________________________ */	

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: -1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* .clear { clear: both; width: 100%; height: 1px;	margin: 0 0 -1px; } */
.fitter { width: 100%; position:relative; overflow:visible; }
a {cursor:pointer; text-decoration: none; }
html { -webkit-font-smoothing: antialiased; 
/* -webkit-font-smoothing: subpixel-antialiased;  */
	 /* stop webkit from messing with your formatting */
/* 	-webkit-font-smoothing: antialiased; */ /* Fix for webkit rendering */
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
text-align: left; /* font-family: 'tga', sans-serif; line-height: 130%; */ 
 }

div, .boxFix, *:after, *:before, 
input[type=text],textarea, input[type=checkbox], form input[type=password], form input[type=text]:focus, 
form input[type=submit]:focus,form input[type=password]:focus, form textarea:focus,
.checkMark, ul, li, .boxFix, a { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
img { display:block; margin:0; padding: 0; border: none; }
.relative { position: relative; }
.fixed { position: fixed; }
.clear:after { content: ""; display: table; clear: both; }
strong { font-weight: 700; }
.brClear { clear: both; width: 100%; height: 1px;	margin: 0 0 -1px; }



@font-face {
    font-family: 'fa5-brands';
    src: url('/cmsb/3rdParty/font-awesome/webfonts/fa-brands-400.eot');
    src: url('/cmsb/3rdParty/font-awesome/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'),
        url('/cmsb/3rdParty/font-awesome/webfonts/fa-brands-400.woff2') format('woff2'),
        url('/cmsb/3rdParty/font-awesome/webfonts/fa-brands-400.woff') format('woff'),
        url('/cmsb/3rdParty/font-awesome/webfonts/fa-brands-400.ttf') format('truetype'),
        url('/cmsb/3rdParty/font-awesome/webfonts/fa-brands-400.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fa5-Solid';
    src: url('/webfonts/fa5-Solid.eot');
    src: url('/webfonts/fa5-Solid.eot?#iefix') format('embedded-opentype'),
        url('/webfonts/fa5-Solid.woff2') format('woff2'),
        url('/webfonts/fa5-Solid.woff') format('woff'),
        url('/webfonts/fa5-Solid.ttf') format('truetype'),
        url('/webfonts/fa5-Solid.svg#fa5-Solid') format('svg');
    font-weight: normal;
    font-style: normal;
}


h1,h2,h3,h4,h5,h6,p,ul,ol,input,textarea,div,a,button { font-family: 'Roboto', sans-serif; }


.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
.skip-link:focus {
  left: 8px;  /* snaps into view on Tab key */
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* :root {
  --wallCoverings6: #656370;
  --screenPrintedFabrics2: #DB612B;
  --handBlockFabrics5: #757D5E;
  --standardColor: rgb(32, 17, 53);
} */
:root {
  --wallCoverings6: #9B8768;
  --screenPrintedFabrics2: #9B8768;
  --handBlockFabrics5: #9B8768;
  --standardColor: rgb(32, 17, 53);
}


.wallCoverings6, .sub6, .home6 {
    background-color:var(--wallCoverings6) !important;
}
.screenPrintedFabrics2, .sub2, .home2 {
    background-color:var(--screenPrintedFabrics2) !important;
}
.handBlockFabrics5, .sub5, .home5 {
    background-color:var(--handBlockFabrics5) !important;
}

.ba6 {
  background: linear-gradient(
    to right,
    var(--wallCoverings6) 0,
    var(--wallCoverings6) 4rem,
    transparent 4rem
  );
}
.ba2 {
  background: linear-gradient(
    to right,
    var(--screenPrintedFabrics2) 0,
    var(--screenPrintedFabrics2) 4rem,
    transparent 4rem
  );
}
.ba5 {
  background: linear-gradient(
    to right,
    var(--handBlockFabrics5) 0,
    var(--handBlockFabrics5) 4rem,
    transparent 4rem
  );
}


.sub6:hover, .sub2:hover, .sub5:hover {
    opacity:0.8;
}
.baOff5, .baOff6, .baOff2 {
    background-color:none;
    color:black !important;
    border:none !important;
    padding: 1rem !important;
      padding-left:1.4rem !important;
      padding-right:1.4rem !important;

}
.baOff5:hover, .baOff5Selected{
    background-color: var(--handBlockFabrics5) !important;
    color:white !important;
    
}
.baOff6:hover, .baOff6Selected {
    background-color: var(--wallCoverings6) !important;
    color:white !important;
}
.baOff2:hover, .baOff2Selected {
    background-color: var(--screenPrintedFabrics2) !important;
    color:white !important;
}



/* jquery.bxslider.css */
/** VARIABLES
===================================*/
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
  position: relative;
  margin-bottom: 0;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxslider {
  margin: 0;
  padding: 0;
  /*fix flickering when used background-image instead of <img> (on Chrome)*/
  -webkit-perspective: 1000;
}
ul.bxslider {
  list-style: none;
}
.bx-viewport {
  /* fix other elements on the page moving (in Chrome) */
  -webkit-transform: translateZ(0);
}
/** THEME
===================================*/
.bx-wrapper {
/*
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc;
  border: 5px solid #fff;
  background: #fff;
*/
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
  min-height: 50px;
  background: url('/gfx/bx_loader.gif') center center no-repeat #ffffff;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  vertical-align: bottom;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('/gfx/controls.png') no-repeat 0 -32px;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('/gfx/controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url('/gfx/controls.png') -86px -11px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url('/gfx/controls.png') -86px -44px no-repeat;
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

/* fresco.css */
/* box-sizing */
.fr-window,
.fr-window [class^="fr-"],
.fr-overlay,
.fr-overlay [class^="fr-"],
.fr-spinner,
.fr-spinner [class^="fr-"] {
  box-sizing: border-box;
}

.fr-window {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-family: 'Muli', sans-serif;  
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
/*
  font: 13px/20px "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana,
    Arial, sans-serif;
*/
  /* Chrome hack, this fixes a visual glitch when quickly toggling a video */
  transform: translateZ(0px);
}

/* z-index */
.fr-overlay {
  z-index: 99998;
}
.fr-window {
  z-index: 99999;
}
.fr-spinner {
  z-index: 100000;
}

/* overlay */
.fr-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.fr-overlay-background {
  float: left;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.9;
/*   filter: alpha(opacity=90); */
}

.fr-overlay-ui-fullclick .fr-overlay-background {
  background: #292929;
  opacity: 1;
/*   filter: alpha(opacity=100); */
}

/* mobile touch has position:absolute to allow zooming */
.fr-window.fr-mobile-touch,
.fr-overlay.fr-mobile-touch {
  position: absolute;
  overflow: visible;
}

/* some properties on the window are used to toggle things
 * like margin and the fullclick mode,
 * we reset those properties after measuring them
 */
.fr-measured {
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.fr-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.fr-pages {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fr-page {
  position: absolute;
  width: 100%;
  height: 100%;
}

.fr-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.fr-hovering-clickable .fr-container {
  cursor: pointer;
}

/*
   padding:
   youtube & vimeo always have buttons on the outside
   side button = 72 = 54 + (2 * 9 margin)
   close button = 48
*/
/* padding ui:inside */
.fr-ui-inside .fr-container {
  padding: 20px 20px;
}
.fr-ui-inside.fr-no-sides .fr-container {
  padding: 20px;
}

/* padding ui:outside */
.fr-ui-outside .fr-container {
  padding: 20px 82px;
}
.fr-ui-outside.fr-no-sides .fr-container {
  padding: 20px 48px;
}

/* reduce padding on smaller screens */
@media all and (max-width: 700px) and (orientation: portrait),
  all and (orientation: landscape) and (max-height: 700px) {
  /* padding ui:inside */
  .fr-ui-inside .fr-container {
    padding: 12px 12px;
  }
  .fr-ui-inside.fr-no-sides .fr-container {
    padding: 12px;
  }

  /* padding ui:outside */
  .fr-ui-outside .fr-container {
    padding: 12px 72px;
  }
  .fr-ui-outside.fr-no-sides .fr-container {
    padding: 12px 48px;
  }
}

@media all and (max-width: 500px) and (orientation: portrait),
  all and (orientation: landscape) and (max-height: 500px) {
  /* padding ui:inside */
  .fr-ui-inside .fr-container {
    padding: 0px 0px;
  }
  .fr-ui-inside.fr-no-sides .fr-container {
    padding: 0px;
  }

  /* padding ui:outside */
  .fr-ui-outside .fr-container {
    padding: 0px 72px;
  }
  .fr-ui-outside.fr-no-sides .fr-container {
    padding: 0px 48px;
  }
}

/* padding ui:fullclick */
.fr-ui-fullclick .fr-container {
  padding: 0;
}
.fr-ui-fullclick.fr-no-sides .fr-container {
  padding: 0;
}

/* video fullclick */
.fr-ui-fullclick.fr-type-video .fr-container {
  padding: 0px 62px;
}
.fr-ui-fullclick.fr-no-sides.fr-type-video .fr-container {
  padding: 48px 0px;
}

/* overflow-y should always have 0 padding top and bottom */
.fr-overflow-y .fr-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.fr-content,
.fr-content-background {
  position: absolute;
  top: 50%;
  left: 50%;
  /* IE11 has a 1px blur bug on the edges of the caption (ui:inside)
     during animation with overflow:hidden */
  overflow: visible;
}

/* img/iframe/error */
.fr-content-element {
  float: left;
  width: 100%;
  height: 100%;
}

.fr-content-background {
  background: #101010;
}

.fr-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #efefef;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.fr-info-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: #000;
  line-height: 1%;
  filter: none;
  opacity: 1;
}
.fr-ui-inside .fr-info-background {
  filter: alpha(opacity=80);
  opacity: 0.8;
  zoom: 1;
}
/* ui:outside has a slightly lighter info background to break up from black page backgrounds */
.fr-ui-outside .fr-info-background {
  background: #0d0d0d;
}

/* info at the bottom for ui:inside */
.fr-content .fr-info {
  top: auto;
  bottom: 0;
}

.fr-info-padder {
  display: block;
  overflow: hidden;
  padding: 12px;
  position: relative;
  width: auto;
}
.fr-caption {
  width: auto;
  display: inline;
}

.fr-position {
  color: #b3b3b3;
  float: right;
  line-height: 21px;
  opacity: 0.99;
  position: relative;
  text-align: right;
  margin-left: 15px;
  white-space: nowrap;
}

/* positions not within the info bar
   for ui:outside/inside */
.fr-position-outside,
.fr-position-inside {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 12px;
  width: auto;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 20px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  display: none;
  overflow: hidden;
  white-space: nowrap;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
.fr-position-inside {
  border: 0;
}

.fr-position-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0d0d0d;
  filter: alpha(opacity=80);
  opacity: 0.8;
  zoom: 1; /* oldIE */
}
.fr-position-text {
  color: #b3b3b3;
}
.fr-position-outside .fr-position-text,
.fr-position-inside .fr-position-text {
  float: left;
  position: relative;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

/* display it for the outside ui, hide the caption inside */
.fr-ui-outside .fr-position-outside {
  display: block;
}
.fr-ui-outside .fr-info .fr-position {
  display: none;
}

.fr-ui-inside.fr-no-caption .fr-position-inside {
  display: block;
}

/* links */
.fr-info a,
.fr-info a:hover {
  color: #ccc;
  border: 0;
  background: none;
  text-decoration: underline;
}
.fr-info a:hover {
  color: #eee;
}

/* no-caption */
.fr-ui-outside.fr-no-caption .fr-info {
  display: none;
}
.fr-ui-inside.fr-no-caption .fr-caption {
  display: none;
}

/* --- stroke */
.fr-stroke {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}
.fr-stroke-vertical {
  width: 1px;
  height: 100%;
}
.fr-stroke-horizontal {
  padding: 0 1px;
}

.fr-stroke-right {
  left: auto;
  right: 0;
}
.fr-stroke-bottom {
  top: auto;
  bottom: 0;
}

.fr-stroke-color {
  float: left;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.08);
}

/* the stroke is brighter inside the info box */
.fr-info .fr-stroke-color {
  background: rgba(80, 80, 80, 0.3);
}

/* remove the stroke when outside ui has a caption */
.fr-ui-outside.fr-has-caption .fr-content .fr-stroke-bottom {
  display: none;
}

/* remove stroke and shadow when ui:fullclick */
.fr-ui-fullclick .fr-stroke {
  display: none;
}
.fr-ui-fullclick .fr-content-background {
  box-shadow: none;
}

/* the info box never bas a top stroke */
.fr-info .fr-stroke-top {
  display: none;
}

/* < > */
.fr-side {
  position: absolute;
  top: 50%;
  width: 54px;
  height: 72px;
  margin: 0 9px;
  margin-top: -36px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  zoom: 1;
}
.fr-side-previous {
  left: 0;
}
.fr-side-next {
  right: 0;
  left: auto;
}

.fr-side-disabled {
  cursor: default;
}
.fr-side-hidden {
  display: none !important;
}

.fr-side-button {
  float: left;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.fr-side-button-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #101010;
}
.fr-side-button-icon {
  float: left;
  position: relative;
  height: 100%;
  width: 100%;
  zoom: 1;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
/* smaller side buttons */
@media all and (max-width: 500px) and (orientation: portrait),
  all and (orientation: landscape) and (max-height: 414px) {
  .fr-side {
    width: 54px;
    height: 60px;
    margin: 0;
    margin-top: -30px;
  }
  .fr-side-button {
    width: 48px;
    height: 60px;
    margin: 0 3px;
  }
}

/* X */
.fr-close {
  position: absolute;
  width: 48px;
  height: 48px;
  top: 0;
  right: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.fr-close-background,
.fr-close-icon {
  position: absolute;
  top: 12px;
  left: 12px;
  height: 26px;
  width: 26px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.fr-close-background {
  background-color: #000;
}

/* Thumbnails */
.fr-thumbnails {
  position: absolute;
  overflow: hidden;
}
.fr-thumbnails-disabled .fr-thumbnails {
  display: none !important;
}
.fr-thumbnails-horizontal .fr-thumbnails {
  width: 100%;
  height: 12%;
  min-height: 74px;
  max-height: 160px;
  bottom: 0;
}

.fr-thumbnails-vertical .fr-thumbnails {
  height: 100%;
  width: 10%;
  min-width: 74px;
  max-width: 160px;
  left: 0;
}

.fr-thumbnails,
.fr-thumbnails * {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.fr-thumbnails-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
}
.fr-thumbnails-vertical .fr-thumbnails-wrapper {
  top: 50%;
  left: 0;
}

.fr-thumbnails-slider {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  zoom: 1;
}

.fr-thumbnails-slider-slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.fr-thumbnails-thumbs {
  float: left;
  height: 100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
}

.fr-thumbnails-slide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.fr-thumbnail-frame {
  position: absolute;
  zoom: 1;
  overflow: hidden;
}

.fr-thumbnail {
  position: absolute;
  width: 30px;
  height: 100%;
  left: 50%;
  top: 50%;
  zoom: 1;
  cursor: pointer;
  margin: 0 10px;
}
.fr-ltIE9 .fr-thumbnail * {
  overflow: hidden; /* IE6(7) */
  z-index: 1;
  zoom: 1;
}

.fr-thumbnail-wrapper {
  position: relative;
  background: #161616;
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  display: inline; /* IE6(7) */
  z-index: 0; /* IE8 */
}

.fr-thumbnail-overlay {
  cursor: pointer;
}
.fr-thumbnail-active .fr-thumbnail-overlay {
  cursor: default;
}
.fr-thumbnail-overlay,
.fr-thumbnail-overlay-background,
.fr-thumbnail-overlay-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-width: 0;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
}
.fr-ltIE9 .fr-thumbnail-overlay-border {
  border-width: 0 !important;
}
.fr-thumbnail .fr-thumbnail-image {
  position: absolute;
  filter: alpha(opacity=85);
  opacity: 0.85;
  max-width: none;
}
.fr-thumbnail:hover .fr-thumbnail-image,
.fr-thumbnail-active:hover .fr-thumbnail-image {
  filter: alpha(opacity=99);
  opacity: 0.99;
}
.fr-thumbnail-active .fr-thumbnail-image,
.fr-thumbnail-active:hover .fr-thumbnail-image {
  filter: alpha(opacity=35);
  opacity: 0.35;
}
.fr-thumbnail-active {
  cursor: default;
}

/* Thumbnails loading */
.fr-thumbnail-loading,
.fr-thumbnail-loading-background,
.fr-thumbnail-loading-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.fr-thumbnail-loading-background {
  background-color: #161616;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  opacity: 0.8;
  position: relative;
  float: left;
}
/* this element is there as an alternative to putting the loading image on the background */
.fr-thumbnail-loading-icon {
  display: none;
}

/* error on thumbnail */
.fr-thumbnail-error .fr-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #202020;
}

/* Thumbnail < > */
.fr-thumbnails-side {
  float: left;
  height: 100%;
  width: 28px;
  margin: 0 5px;
  position: relative;
  overflow: hidden;
}
.fr-thumbnails-side-previous {
  margin-left: 12px;
}
.fr-thumbnails-side-next {
  margin-right: 12px;
}

.fr-thumbnails-vertical .fr-thumbnails-side {
  height: 28px;
  width: 100%;
  margin: 10px 0;
}
.fr-thumbnails-vertical .fr-thumbnails-side-previous {
  margin-top: 20px;
}
.fr-thumbnails-vertical .fr-thumbnails-side-next {
  margin-bottom: 20px;
}

.fr-thumbnails-side-button {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -14px;
  margin-left: -14px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}

.fr-thumbnails-side-button-background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  filter: alpha(opacity=80);
  opacity: 0.8;
  -moz-transition: background-color 0.2s ease-in;
  -webkit-transition: background-color 0.2s ease-in;
  transition: background-color 0.2s ease-in;
  background-color: #333;
  cursor: pointer;
  border-radius: 4px;
}
.fr-thumbnails-side-button:hover .fr-thumbnails-side-button-background {
  background-color: #3b3b3b;
}

.fr-thumbnails-side-button-disabled * {
  cursor: default;
}
.fr-thumbnails-side-button-disabled:hover
  .fr-thumbnails-side-button-background {
  background-color: #333;
}

.fr-thumbnails-side-button-icon {
  position: absolute;
  /*top: -7px;
  left: -7px;*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* vertical thumbnails */
.fr-thumbnails-vertical .fr-thumbnails-side,
.fr-thumbnails-vertical .fr-thumbnails-thumbs,
.fr-thumbnails-vertical .fr-thumbnail-frame {
  clear: both;
}

/* ui:fullclick has a dark thumbnail background */
.fr-window-ui-fullclick .fr-thumbnails {
  background: #090909;
}

/* put a stroke on the connecting caption*/
.fr-window-ui-fullclick.fr-thumbnails-enabled.fr-thumbnails-horizontal
  .fr-info
  .fr-stroke-bottom {
  display: block !important;
} /*({ box-shadow: inset 0 -1px 0 rgba(255,255,255,.1); } */
.fr-window-ui-fullclick.fr-thumbnails-enabled.fr-thumbnails-vertical
  .fr-info
  .fr-stroke-left {
  display: block !important;
}

/* thumbnail spacing  */
.fr-thumbnails-horizontal .fr-thumbnails-thumbs {
  padding: 12px 5px;
}
.fr-thumbnails-vertical .fr-thumbnails-thumbs {
  padding: 5px 12px;
}
.fr-thumbnails-measured .fr-thumbnails-thumbs {
  padding: 0 !important;
}
/* horizontal */
@media all and (min-height: 700px) {
  .fr-thumbnails-horizontal .fr-thumbnails-thumbs {
    padding: 16px 8px;
  }
  .fr-thumbnails-horizontal .fr-thumbnails-side {
    margin: 0 8px;
  }
  .fr-thumbnails-horizontal .fr-thumbnails-side-previous {
    margin-left: 16px;
  }
  .fr-thumbnails-horizontal .fr-thumbnails-side-next {
    margin-right: 16px;
  }
}
@media all and (min-height: 980px) {
  .fr-thumbnails-horizontal .fr-thumbnails-thumbs {
    padding: 20px 10px;
  }
  .fr-thumbnails-horizontal .fr-thumbnails-side {
    margin: 0 10px;
  }
  .fr-thumbnails-horizontal .fr-thumbnails-side-previous {
    margin-left: 20px;
  }
  .fr-thumbnails-horizontal .fr-thumbnails-side-next {
    margin-right: 20px;
  }
}

/* vertical */
@media all and (min-width: 1200px) {
  .fr-thumbnails-vertical .fr-thumbnails-thumbs {
    padding: 8px 16px;
  }
  .fr-thumbnails-vertical .fr-thumbnails-side {
    margin: 0 8px;
  }
  .fr-thumbnails-vertical .fr-thumbnails-side-previous {
    margin-top: 16px;
  }
  .fr-thumbnails-vertical .fr-thumbnails-side-next {
    margin-bottom: 16px;
  }
}
@media all and (min-width: 1800px) {
  .fr-thumbnails-vertical .fr-thumbnails-thumbs {
    padding: 10px 20px;
  }
  .fr-thumbnails-vertical .fr-thumbnails-side {
    margin: 10px 0;
  }
  .fr-thumbnails-vertical .fr-thumbnails-side-previous {
    margin-top: 20px;
  }
  .fr-thumbnails-vertical .fr-thumbnails-side-next {
    margin-bottom: 20px;
  }
}

/* hide thumbnails on smaller screens
   the js always hides them on touch based devices
*/
@media all and (max-width: 500px) and (orientation: portrait),
  all and (orientation: landscape) and (max-height: 500px) {
  .fr-thumbnails-horizontal .fr-thumbnails {
    display: none !important;
  }
}
@media all and (max-width: 700px) and (orientation: portrait),
  all and (orientation: landscape) and (max-height: 414px) {
  .fr-thumbnails-vertical .fr-thumbnails {
    display: none !important;
  }
}

/* force fullClick: true
   and force overflow: false */
@media all and (max-width: 500px) and (orientation: portrait),
  all and (orientation: landscape) and (max-height: 414px) {
  .fr-page {
    min-width: 100%;
  } /* fullclick */
  .fr-page {
    min-height: 100%;
  } /* overflow: false */
}

/* switch between ui modes
   we force everything not in the current UI mode to hide
*/
.fr-window-ui-fullclick .fr-side-next-outside,
.fr-window-ui-fullclick .fr-side-previous-outside,
.fr-window-ui-fullclick .fr-close-outside,
.fr-window-ui-fullclick .fr-content .fr-side-next,
.fr-window-ui-fullclick .fr-content .fr-side-previous,
.fr-window-ui-fullclick .fr-content .fr-close,
.fr-window-ui-fullclick .fr-content .fr-info,
.fr-window-ui-outside .fr-side-next-fullclick,
.fr-window-ui-outside .fr-side-previous-fullclick,
.fr-window-ui-outside .fr-close-fullclick,
.fr-window-ui-outside .fr-content .fr-side-next,
.fr-window-ui-outside .fr-content .fr-side-previous,
.fr-window-ui-outside .fr-content .fr-close,
.fr-window-ui-outside .fr-content .fr-info,
.fr-window-ui-inside .fr-page > .fr-info,
.fr-window-ui-inside .fr-side-next-fullclick,
.fr-window-ui-inside .fr-side-previous-fullclick,
.fr-window-ui-inside .fr-close-fullclick,
.fr-window-ui-inside .fr-side-next-outside,
.fr-window-ui-inside .fr-side-previous-outside,
.fr-window-ui-inside .fr-close-outside {
  display: none !important;
}

/* some ui elements can be toggled on mousemove.
   filter:alpha(opacity) is bugged so we use display in oldIE
*/
.fr-toggle-ui {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.fr-visible-fullclick-ui .fr-box > .fr-toggle-ui,
.fr-visible-inside-ui .fr-ui-inside .fr-toggle-ui {
  opacity: 1;
}

.fr-hidden-fullclick-ui .fr-box > .fr-toggle-ui,
.fr-hidden-inside-ui .fr-ui-inside .fr-toggle-ui {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.fr-ltIE9.fr-hidden-fullclick-ui .fr-box > .fr-toggle-ui,
.fr-ltIE9.fr-hidden-inside-ui .fr-ui-inside .fr-toggle-ui {
  display: none;
}

/* Spinner */
.fr-spinner {
  position: fixed;
  width: 52px;
  height: 52px;
  background: #101010;
  background: rgba(16, 16, 16, 0.85);
  border-radius: 5px;
}
.fr-spinner div {
  position: absolute;
  top: 0;
  left: 0;
  height: 64%;
  width: 64%;
  margin-left: 18%;
  margin-top: 18%;
  opacity: 1;
  -webkit-animation: fresco-12 1.2s infinite ease-in-out;
  animation: fresco-12 1.2s infinite ease-in-out;
}

.fr-spinner div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 8px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); /* fixes rendering in Firefox */
}

.fr-spinner div.fr-spin-1 {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.fr-spinner div.fr-spin-2 {
  -ms-transform: rotate(60deg);
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.fr-spinner div.fr-spin-3 {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.fr-spinner div.fr-spin-4 {
  -ms-transform: rotate(120deg);
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.fr-spinner div.fr-spin-5 {
  -ms-transform: rotate(150deg);
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.fr-spinner div.fr-spin-6 {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.fr-spinner div.fr-spin-6 {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}
.fr-spinner div.fr-spin-7 {
  -ms-transform: rotate(210deg);
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}
.fr-spinner div.fr-spin-8 {
  -ms-transform: rotate(240deg);
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}
.fr-spinner div.fr-spin-9 {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}
.fr-spinner div.fr-spin-10 {
  -ms-transform: rotate(300deg);
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}
.fr-spinner div.fr-spin-11 {
  -ms-transform: rotate(330deg);
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}
.fr-spinner div.fr-spin-12 {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

@-webkit-keyframes fresco-12 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fresco-12 {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Thumbnail spinner */
.fr-thumbnail-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  width: 40px;
  height: 40px;
}
.fr-thumbnail-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 8px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: fr-thumbnail-spin 1.1s infinite linear;
  animation: fr-thumbnail-spin 1.1s infinite linear;
}
.fr-thumbnail-spinner-spin,
.fr-thumbnail-spinner-spin:after {
  border-radius: 50%;
  width: 24px;
  height: 24px;
}
@-webkit-keyframes fr-thumbnail-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes fr-thumbnail-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Error */
.fr-error {
  float: left;
  position: relative;
  background-color: #ca3434;
  width: 160px;
  height: 160px;
}

.fr-error-icon {
  position: absolute;
  width: 42px;
  height: 42px;
  top: 50%;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
}

/* skin: 'fresco' */

/* Sprite */
.fr-window-skin-fresco .fr-side-button-icon,
.fr-window-skin-fresco .fr-close-icon,
.fr-window-skin-fresco .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.svg");
}
/* fallback png sprite */
.fr-window-skin-fresco.fr-no-svg .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg .fr-close-icon,
.fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.png");
}

.fr-window-skin-fresco .fr-error-icon {
  background-position: -160px -126px;
}

.fr-window-skin-fresco .fr-content-background {
  background: #101010;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.fr-window-skin-fresco.fr-window-ui-fullclick .fr-content-background {
  box-shadow: none;
}

/* thumbnail shadow */
.fr-window-skin-fresco .fr-thumbnail-wrapper {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-wrapper {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}

/* < > */
.fr-window-skin-fresco .fr-side-button-background {
  background-color: transparent;
}
.fr-window-skin-fresco .fr-side-previous .fr-side-button-icon {
  background-position: -13px -14px;
}
.fr-window-skin-fresco .fr-side-next .fr-side-button-icon {
  background-position: -93px -14px;
}

.fr-window-skin-fresco .fr-side-previous:hover .fr-side-button-icon {
  background-position: -13px -114px;
}
.fr-window-skin-fresco .fr-side-next:hover .fr-side-button-icon {
  background-position: -93px -114px;
}

/* transition (png) */
.fr-window-skin-fresco.fr-no-svg
  .fr-hovering-previous
  .fr-side-previous
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg.fr-mobile-touch
  .fr-side-previous
  .fr-side-button-icon {
  background-position: -13px -114px;
}
.fr-window-skin-fresco.fr-no-svg
  .fr-hovering-next
  .fr-side-next
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg.fr-mobile-touch
  .fr-side-next
  .fr-side-button-icon {
  background-position: -93px -114px;
}

/* disabled state (png) */
.fr-window-skin-fresco.fr-no-svg
  .fr-side-previous.fr-side-disabled
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg
  .fr-hovering-previous
  .fr-side-previous.fr-side-disabled
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg
  .fr-side-previous.fr-side-disabled:hover
  .fr-side-button-icon {
  background-position: -13px -214px;
}
.fr-window-skin-fresco.fr-no-svg
  .fr-side-next.fr-side-disabled
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg
  .fr-hovering-next
  .fr-side-next.fr-side-disabled
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg
  .fr-side-next.fr-side-disabled:hover
  .fr-side-button-icon {
  background-position: -93px -214px;
}

/* transition (svg) */
.fr-window-skin-fresco.fr-svg .fr-side-previous .fr-side-button-icon {
  background-position: -13px -114px;
}
.fr-window-skin-fresco.fr-svg .fr-side-next .fr-side-button-icon {
  background-position: -93px -114px;
}
.fr-window-skin-fresco.fr-svg .fr-side-button-icon {
  opacity: 0.5;
}

.fr-window-skin-fresco.fr-svg .fr-side:hover .fr-side-button-icon,
.fr-window-skin-fresco.fr-svg
  .fr-hovering-previous
  .fr-side-previous
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-svg
  .fr-hovering-next
  .fr-side-next
  .fr-side-button-icon {
  opacity: 1;
}

.fr-window-skin-fresco.fr-svg.fr-mobile-touch .fr-side .fr-side-button-icon {
  opacity: 0.8;
} /* touch always active but at lower opacity */

/* disabled (svg) */
.fr-window-skin-fresco.fr-svg .fr-side-disabled .fr-side-button-icon,
.fr-window-skin-fresco.fr-svg
  .fr-hovering-previous
  .fr-side-disabled
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-svg
  .fr-hovering-next
  .fr-side-disabled
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-svg .fr-side-disabled:hover .fr-side-button-icon,
.fr-window-skin-fresco.fr-svg.fr-mobile-touch
  .fr-side-disabled
  .fr-side-button-icon {
  opacity: 0.2;
}

/* hide for ui:inside/fullclick, only for the image type */
.fr-window-skin-fresco.fr-window-ui-inside
  .fr-type-image
  .fr-side-disabled
  .fr-side-button-icon,
.fr-window-skin-fresco.fr-window-ui-fullclick.fr-showing-type-image
  .fr-side-disabled
  .fr-side-button-icon {
  background-image: none;
}

/* < > responsive */
@media all and (max-width: 500px) and (orientation: portrait),
  all and (orientation: landscape) and (max-height: 414px) {
  .fr-window-skin-fresco .fr-side-previous .fr-side-button-icon {
    background-position: 0px -300px;
  }
  .fr-window-skin-fresco .fr-side-next .fr-side-button-icon {
    background-position: -48px -300px;
  }

  .fr-window-skin-fresco .fr-side-previous:hover .fr-side-button-icon {
    background-position: 0px -360px;
  }
  .fr-window-skin-fresco .fr-side-next:hover .fr-side-button-icon {
    background-position: -48px -360px;
  }

  /* transition (png) */
  .fr-window-skin-fresco.fr-no-svg
    .fr-hovering-previous
    .fr-side-previous
    .fr-side-button-icon,
  .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch
    .fr-side-previous
    .fr-side-button-icon {
    background-position: 0px -360px;
  }
  .fr-window-skin-fresco.fr-no-svg
    .fr-hovering-next
    .fr-side-next
    .fr-side-button-icon,
  .fr-window-skin-fresco.fr-no-svg.fr-mobile-touch
    .fr-side-next
    .fr-side-button-icon {
    background-position: -48px -360px;
  }

  /* transition (svg) */
  .fr-window-skin-fresco.fr-svg .fr-side-previous .fr-side-button-icon {
    background-position: 0px -360px;
  }
  .fr-window-skin-fresco.fr-svg .fr-side-next .fr-side-button-icon {
    background-position: -48px -360px;
  }

  /* disabled state (png) */
  .fr-window-skin-fresco.fr-no-svg
    .fr-side-previous.fr-side-disabled
    .fr-side-button-icon,
  .fr-window-skin-fresco.fr-no-svg
    .fr-hovering-previous
    .fr-side-previous.fr-side-disabled
    .fr-side-button-icon,
  .fr-window-skin-fresco.fr-no-svg
    .fr-side-previous.fr-side-disabled:hover
    .fr-side-button-icon {
    background-position: 0px -420px;
  }

  .fr-window-skin-fresco.fr-no-svg
    .fr-side-next.fr-side-disabled
    .fr-side-button-icon,
  .fr-window-skin-fresco.fr-no-svg
    .fr-hovering-next
    .fr-side-next.fr-side-disabled
    .fr-side-button-icon,
  .fr-window-skin-fresco.fr-no-svg
    .fr-side-next.fr-side-disabled:hover
    .fr-side-button-icon {
    background-position: -48px -420px;
  }
}

/* X */
/* colors */
.fr-window-skin-fresco.fr-window-ui-outside .fr-close-background {
  background-color: #363636;
}
.fr-window-skin-fresco.fr-window-ui-outside
  .fr-close:hover
  .fr-close-background {
  background-color: #434343;
}

.fr-window-skin-fresco.fr-window-ui-inside .fr-close-background,
.fr-window-skin-fresco.fr-window-ui-fullclick .fr-close-background {
  background-color: #131313;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.fr-window-skin-fresco.fr-window-ui-inside .fr-close:hover .fr-close-background,
.fr-window-skin-fresco.fr-window-ui-fullclick
  .fr-close:hover
  .fr-close-background {
  background-color: #191919;
}

/* - image */
.fr-window-skin-fresco .fr-close .fr-close-icon {
  background-position: -168px -8px;
}
.fr-window-skin-fresco .fr-close:hover .fr-close-icon {
  background-position: -210px -8px;
}

/* - transition */
.fr-window-skin-fresco.fr-svg .fr-close .fr-close-icon {
  background-position: -210px -8px;
  opacity: 0.8;
}
.fr-window-skin-fresco .fr-close:hover .fr-close-icon {
  opacity: 1;
}
/* iOS 8.4.1 bug: when opacity changes it'll require 2 taps
   force a single opacity to fix this
*/
.fr-window-skin-fresco.fr-svg.fr-mobile-touch .fr-close .fr-close-icon,
.fr-window-skin-fresco.fr-mobile-touch .fr-close:hover .fr-close-icon {
  opacity: 1;
}

/* Thumbnails */
.fr-window-skin-fresco .fr-thumbnail-wrapper {
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}
.fr-window-skin-fresco .fr-thumbnail-wrapper {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-wrapper {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
}
.fr-window-skin-fresco .fr-thumbnail-wrapper {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.3);
}
.fr-window-skin-fresco .fr-thumbnail-overlay-border {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.08); /* should remain rgba */
}
/* no inner border on active thumbnail */
.fr-window-skin-fresco .fr-thumbnail-active .fr-thumbnail-overlay-border,
.fr-window-skin-fresco .fr-thumbnail-active:hover .fr-thumbnail-overlay-border {
  border: 0;
}

/* Thumbnails < > */
.fr-window-skin-fresco
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-icon {
  background-position: -167px -49px;
}
.fr-window-skin-fresco
  .fr-thumbnails-side-previous:hover
  .fr-thumbnails-side-button-icon {
  background-position: -209px -49px;
}
.fr-window-skin-fresco
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-icon {
  background-position: -167px -91px;
}
.fr-window-skin-fresco
  .fr-thumbnails-side-next:hover
  .fr-thumbnails-side-button-icon {
  background-position: -209px -91px;
}
/* vertical ^ (up/down) adjustments */
.fr-window-skin-fresco.fr-thumbnails-vertical
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-icon {
  background-position: -293px -49px;
}
.fr-window-skin-fresco.fr-thumbnails-vertical
  .fr-thumbnails-side-previous:hover
  .fr-thumbnails-side-button-icon {
  background-position: -335px -49px;
}
.fr-window-skin-fresco.fr-thumbnails-vertical
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-icon {
  background-position: -293px -91px;
}
.fr-window-skin-fresco.fr-thumbnails-vertical
  .fr-thumbnails-side-next:hover
  .fr-thumbnails-side-button-icon {
  background-position: -335px -91px;
}

/* Thumbnails < > transition */
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side
  .fr-thumbnails-side-button-icon {
  -moz-transition: opacity 0.2s ease-in;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  opacity: 0.8;
}
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-disabled {
  background-position: -167px -49px;
}
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-disabled {
  background-position: -209px -91px;
}
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side:hover
  .fr-thumbnails-side-button-icon {
  opacity: 1;
}
/* vertical ^ (up/down) adjustments */
.fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-disabled {
  background-position: -293px -49px;
}
.fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-disabled {
  background-position: -335px -91px;
}

/* lower opacity on disabled states */
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side
  .fr-thumbnails-side-button-disabled,
.fr-window-skin-fresco.fr-svg
  .fr-thumbnails-side:hover
  .fr-thumbnails-side-button-disabled {
  opacity: 0.5;
}

/* lower opacity IE < 9 using images */
.fr-window-skin-fresco.fr-no-svg
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-no-svg
  .fr-thumbnails-side-previous:hover
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon {
  background-position: -251px -49px;
}
.fr-window-skin-fresco.fr-no-svg
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-no-svg
  .fr-thumbnails-side-next:hover
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon {
  background-position: -251px -91px;
}
.fr-window-skin-fresco.fr-no-svg
  .fr-thumbnails-side
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-background,
.fr-window-skin-fresco.fr-no-svg
  .fr-thumbnails-side:hover
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-background {
  filter: alpha(opacity=50);
}
/* vertical ^ (up/down) adjustments */
.fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-previous
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-previous:hover
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon {
  background-position: -377px -49px;
}
.fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-next
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco.fr-no-svg.fr-thumbnails-vertical
  .fr-thumbnails-side-next:hover
  .fr-thumbnails-side-button-disabled
  .fr-thumbnails-side-button-icon {
  background-position: -377px -91px;
}

/* smart.css */
@media (min-width: 200px) and (max-width: 767px) {
@charset "UTF-8";

html,
body {
  font-size: 10px;
  position: relative;
}

.desktop {
  display: none;
}

.smart {
  display: block;
}

.flexCentreCentre {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexLeftCentre {
  display: flex;
  justify-content: left;
  align-items: center;
}

.flexRightCentre {
  display: flex;
  justify-content: right;
  align-items: center;
}

.flexLeftBottom {
  display: flex;
  justify-content: left;
  align-items: baseline;
}

.fixed {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  /* background-color: white;  */
}

.fixedOffset {
  height: 11.3rem;
  width: 100%;
  display: block;
}

.fixedOffsetNeg {
  height: 6.2rem;
  width: 100%;
  display: block;
}

.greyBg {
  background-color: rgb(233, 233, 233);
}

.ltGreyBg {
  background-color: rgb(237, 237, 237);
}

.whiteBg {
  background-color: rgb(255, 255, 255);
}

.mb8 {
  margin-bottom: 0.8rem;
}

.borderLR8 {
  border-left: 0.8rem solid white;
  border-right: 0.8rem solid white;
}

.borderLRT8 {
  border-left: 0.8rem solid white;
  border-right: 0.8rem solid white;
  border-top: 0.8rem solid white;
}

.shadHeader {
  box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.15);
  transition: all 0.4s ease;
}

.padBoth4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.korlaGrey {
  color: rgb(155, 155, 155);
}


.linkBand {
  /* max-width: 128rem; */
  padding-left: 4rem;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

.linkBand {
  /* padding-top: 1rem; padding-bottom: 1rem; */
}

.linkBand ul {
  float: right;
  display: table;
}

.linkBand ul li {
  height: 2.9rem;
  width: auto;
  display: inline-block;
  padding-left: 0.8rem;
  border-left: 2px solid white;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  padding-right: 0.8rem;
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

/* .linkBand ul li:first-of-type {height:auto; width:auto; display: inline-block; padding-left: 4rem;} */
.linkBand ul li:first-of-type {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 120%;
  border-left: none;
}

.linkBand img {
  height: 2.9rem;
  width: auto;
  display: block;
  transition: all 0.4s ease;
}

.linkBand a {
  display: block;
  box-sizing: border-box;
}

.linkBand a:hover img {
  transform: scale(1.1);
}

.linkBand a:hover .linkBandScreen {
  display: block;
}

.linkBandScreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.08);
  z-index: 102;
  display: none;
}


.header {
  /* max-width: 128rem; */
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.4s ease;
}

.smart .logo {
  position: absolute;
  left: 7rem;
  top: 1.9rem;
  height: 2.3rem;
  transition: all 0.4s ease;
}

.smart .logo img {
  height: 100%;
  transition: all 0.4s ease;
}

.smart .navBand {
  width: 100%;
  position: relative;
  height: 6rem;
  background-color: white;
}

.smart .functional {
  /* position:absolute; right:3rem; top:2rem; */
}





.smart .functional .basket {
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  overflow: visible;
  background-size: 16%;
}

.smart .functional .basket {
  display: inline-block;
  /*  margin-left: 4rem; */
  font-weight: 300;
  text-transform: uppercase;
  font-size: 2.2rem;
  line-height: 120%;
  text-align: left;
  padding-left: 3rem;
  color: rgb(128, 128, 128);
}

.smart .functional .basket img {
  width: 0.6rem;
  height: auto;
  position: absolute;
  left: 1.3rem;
  top: -0.6rem;
}

.smart .functional .basket:hover,
.header .navigation .functional .basket .selected {
  color: black;
  background-image: url(/gfx/heart-full.png);
}






#menu-wrapper {
  overflow: hidden;
  max-width: 7rem;
  cursor: pointer;
}

#menu-wrapper #hamburger-menu {
  position: relative;
  width: 2.5rem;
  height: 2rem;
  margin: 2rem;
  margin-bottom: 2rem;
}

#menu-wrapper #hamburger-menu span {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 10px;
  color: white;
  background-color: #434c51;
  position: absolute;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

#menu-wrapper #hamburger-menu span:nth-child(1) {
  top: 0;
}

#menu-wrapper #hamburger-menu span:nth-child(2) {
  top: 9px;
}

#menu-wrapper #hamburger-menu span:nth-child(3) {
  top: 18px;
}

#menu-wrapper #hamburger-menu.open span:nth-child(1) {
  color: black;
  top: 9px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

#menu-wrapper #hamburger-menu.open span:nth-child(2) {
  color: black;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  left: -60px;
}

#menu-wrapper #hamburger-menu.open span:nth-child(3) {
  color: black;
  top: 9px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}



/* accordion */
#menu-container a {
  text-decoration: none;
  color: #434c51;
}

#menu-container a:hover {
  text-decoration: none;
  color: black;
}


#menu-container .menu-list .menu-submenu {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

#menu-container .menu-list {
  padding-left: 0;
  display: block;
  position: absolute;
  width: 100%;
  max-width: 667px;
  /*    max-width: 200px; */
  background: white;
  /*   box-shadow: rgba(100,100,100,0.2) 6px 2px 10px; */
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  left: -100%;
  padding-top: 2rem;
  padding-bottom: 100%;
  background-color: rgba(237, 237, 237, 1);
}


#menu-container .menu-list li:first-of-type {
  border-top: 0;
}

#menu-container .menu-list li.accordion-non,
.menu-link {
  font-size: 2.2rem;
  line-height: 4rem;
  padding-left: 2rem;
  display: block;
  color: rgb(128, 128, 128);
  text-decoration: none;
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
}

.menu-link {
  padding-left: 0;
}

.menu-link:hover {
  color: black;
}


.accordion-toggle,
.accordion-content {
  cursor: pointer;
  position: relative;
  display: block;
  color: rgb(128, 128, 128);
  text-decoration: none;
  font-weight: 300;
  text-align: left;
  text-transform: uppercase;
}

.accordion-toggle {
  font-size: 2.2rem;
  line-height: 6rem;
  padding-left: 2rem;
}

.accordion-content {
  font-size: 2rem;
  line-height: 4rem;
  padding-left: 4rem;
}

.accordion-content {
  display: none;
}

.accordion-toggle a:before,
.accordion-toggle a:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  right: 30px;
  width: 15px;
  height: 2px;
  margin-top: -1px;
  background-color: #434c51;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s ease-out;
}

.active {
  color: black !important;
}

.accordion-toggle a:before {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  opacity: 1;
  z-index: 102;
}

.accordion-toggle.active-tab {
  background: #e2e4df;
  transition: all 0.3s ease;
}

.accordion-toggle a.active:before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  background: #434c51 !important;
}

.accordion-toggle a.active:after {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
  background: #434c51 !important;
  opacity: 0;
}





/* header shrink */
.header-shrink {
  height: 7.8rem !important;
}

.header-logo-shrink {
  padding-top: 3rem !important;
}

.header-logo-img-shrink {
  height: 2rem !important;
}

.header-functional-shrink {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}


/* .offset-sub-shrink { height: calc(9rem + 4.2rem + 4rem) !important;} */
.offset-sub-shrink {
  height: calc(9rem + 4.2rem + 2.3rem) !important;
}

.offset-nosub-shrink {
  height: calc(9rem + 4.2rem) !important;
}

.offset-subPlus-shrink {
  height: calc(9rem + 4.2rem + 3.1rem) !important;
}

.txtSlice {
  max-width: 128rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.txtSliceNarrow {
  max-width: 100rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.txtSliceNarrow2 {
  max-width: 90rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.genTxt h1 {
  font-size: 2.4rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.genTxt p {
  font-size: 1.8rem;
  line-height: 190%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.genTxt p a {
  color: black;
  font-weight: 300;
}

.genTxt p a:hover {
  color: black;
  text-decoration: underline;
  /* background-color:rgb(240,240,240); */
}

.genTxt .webLink {
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  text-decoration: none;
}

.genTxt .webLink:hover {
  color: white;
  background-color: black;
  text-decoration: none;
}

.moreBtn {
  display: inline-block;
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  margin-left: auto;
  margin-right: auto;
}

.genTxt ul {
  margin-bottom: 2rem;
}

.genTxt ul li {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 140%;
  margin-bottom: 1rem;
  color: rgb(128, 128, 128);
}

.genTxt ul li {
  padding-left: 4rem;
  position: relative;
}

.genTxt ul li:before {
  content: "\2022";
  width: 2rem;
  display: block;
  position: absolute;
  top: 0rem;
  left: 0;
  padding-left: 0;
  font-weight: 500;
  font-size: 2.4rem;
  color: black;
}


.genTxt ol {
  margin-bottom: 2rem;
  counter-reset: my-awesome-counter;
}

.genTxt ol li {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 120%;
  margin-bottom: 1rem;
  /* color: #ABACAE;  */
  counter-increment: my-awesome-counter;
}

.genTxt ol li {
  padding-left: 4rem;
  position: relative;
}

.genTxt ol li:before {
  content: counter(my-awesome-counter);
  width: 2rem;
  display: block;
  position: absolute;
  top: 0.265rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
}

.genTxt strong {
  font-weight: 400;
}


/* home page */

.homeSlider {
  padding-bottom: 60%;
}

.homeImageBox {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 80;
  background-color: rgba(32, 17, 53, 0.5);
}

.sliderBox {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 90;
}

.sliderBox div {
  width: 80%;
  text-align: center;
}

.sliderBox img {
  width: 100%;
}

.sliderBox h1 {
  font-weight: 300;
  text-transform: uppercase;
  color: white;
  font-size: 2.4rem;
  padding-top: 2rem;
}

.lightBg {
  background-color: rgb(242, 242, 242);
}

.homeIntro {
  max-width: 112rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.homeIntro h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 3.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem;
}

.homeIntro p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.homeIntro .btn {
  display: inline-block;
  padding: 1.4rem;
  padding-left: 5.4rem;
  padding-right: 5.4rem;
  font-size: 1.6rem;
  line-height: 100%;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  border: 1px solid rgb(128, 128, 128);
  background-color: white;
  text-align: center;
  margin-top: 3.2rem;
}

.homeIntro .btn:hover {
  color: white;
  border: 1px solid white;
  background-color: rgb(32, 17, 53);
}


.homeTypes {
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.homeTypes .item {
  width: 100%;
  padding: 1rem;
}

.homeTypes .imgArea {
  display: block;
  padding-bottom: 67%;
  width: 100%;
  overflow: hidden;
}

.homeTypes .captionBack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.4rem;
  background-color: rgba(32, 17, 53, 0.7);
  transition: all 0.4s ease;
}

/* .homeTypes .caption { position: absolute; left:2rem;  bottom:2rem; font-size: 1.6rem; line-height: 100%; text-transform: uppercase; color: white; font-weight: 300; } */


.homeTypes .imgArea:hover .captionBack {
  height: 100%;
}


.homeTypes .captionBack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5.4rem;
  background-color: rgba(32, 17, 53, 0.7);
  transition: all 0.4s ease;
}

.homeTypes .caption {
  position: absolute;
  left: 2rem;
  top: 85%;
  font-size: 1.6rem;
  line-height: 100%;
  text-transform: uppercase;
  color: white;
  font-weight: 300;
  transition: all 0.4s ease;
}

.homeTypes .textBlock {
  display: block;
  position: absolute;
  left: 2rem;
  top: 100%;
  transition: all 0.4s ease;
  width: calc(100% - 4rem);
}

.homeTypes .textBlock p {
  font-size: 1.6rem;
  line-height: 140%;
  color: white;
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
  transition: all 0.4s ease;
}

.homeTypes .imgArea:hover .captionBack {
  height: 100%;
}

.homeTypes .imgArea:hover .textBlock {
  display: block;
  top: 5rem;
}

.homeTypes .imgArea:hover .caption {
  top: 2rem;
  bottom: auto;
}

.homeTypes .goArrow {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 100%;
  color: rgb(32, 17, 53);
  text-align: left;
  text-transform: uppercase;
  padding: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  margin-top: 0.8rem;
}



/* home Gallery */
.viewGallery {
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.viewGallery .txtArea {
  width: 80%;
  padding-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}

.viewGallery .txtArea h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem
}

.viewGallery .txtArea p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.viewGallery .imgArea ul li {
  padding-bottom: 52%;
}

.actionButtonOuter {
  text-align: center;
  position: absolute;
  top: 0;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  /* padding-top: 7.6%;  */
}

.actionButton {
  display: inline-block;
  padding: 2.4rem;
  padding-left: 7.2rem;
  padding-right: 7.2rem;
  font-size: 2rem;
  line-height: 100%;
  text-transform: uppercase;
  color: white;
  text-align: center;
  background-color: rgba(32, 17, 53, 0.7);
  font-weight: 300;
}

.actionButton:hover {
  background-color: rgba(32, 17, 53, 1);
  color: white;
}

.actionArea {
  background-color: rgba(32, 17, 53, 0.7);
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
  display: none;
}


/* home Stockist */
.homeStockist {
  width: calc(100% - 4rem);
  max-width: 81rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: rgba(32, 17, 53, 0.15);
  display: flex;
  border: 1px solid rgba(32, 17, 53, 1);
}

.homeStockist .imgArea {
  width: 50%;
  padding-bottom: 30%;
  float: left;
}

.homeStockist .txtArea {
  width: 50%;
  float: right;
}

.homeStockist h2 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 1.6rem;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 0;
  text-decoration: none;
}

.homeStockist:hover {
  background-color: rgba(32, 17, 53, 1);
  display: flex;
  border: 1px solid rgba(32, 17, 53, 1)
}

.homeStockist:hover h2 {
  color: white;
  text-decoration: none;
}



/* lifestyle slider on fabric list page */
.lifeStyle {
  width: 50%;
  float: left;
}

.lifeStyle ul li {
  padding-bottom: 66%;
}

.dividingLine {
  padding-top: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
}


.mb4 {
  margin-bottom: 4rem;
}





/* about */
.fullWidthImage {
  width: 100%;
  padding-bottom: 62%;
}

.fullWidthImage .halfTint {
  position: absolute;
  bottom: 0;
  height: 7rem;
  width: 100%;
  display: block;
  background-color: rgba(32, 17, 53, 0.5);
}

.fullWidthImage .halfTint .caption {
  width: 100%;
  bottom: 0;
  padding-left: 5%;
}

.fullWidthImage .halfTint .caption {
  font-size: 2.4rem;
  line-height: 120%;
  color: white;
  text-align: left;
  font-weight: 300;
  margin-bottom: 2rem;
  text-transform: uppercase;
  position: absolute;
}

.titleStripe {
  max-width: 120rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 6rem;
}

.titleStripe h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 2.4rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 0;
}

.textStripe {
  max-width: 112rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.textStripe p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.thirdStripe {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.thirdStripe .item {
  width: 33.333333%;
  padding: 1rem;
  float: left;
}

.thirdStripe .item .image {
  width: 100%;
  padding-bottom: 80%;
}

.aboutPageStripe .aboutTextInner {
  padding-top: 4rem;
  padding-bottom: 3rem;
  padding-left: 8%;
  padding-right: 8%;
}


/* video wrapper */
.video {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* contact */

.contactBgd {
  background-image: url(/gfx/contactBg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 4rem;
  background-size: cover;
}

.contactArea {
  max-width: 60rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  letter-spacing: 0.05rem;
}

.contactBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 2rem;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  border-radius: 0.4rem;
  background-color: rgb(255, 255, 255, 0.5);
}



.legalArea {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 0;
  letter-spacing: 0.05rem;
  text-align: left;
}

.legalBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 2rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.9);
  text-align: left;
}

.legalTxt h1 {
  font-size: 2.4rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt h2 {
  font-size: 2.2rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt h3 {
  font-size: 1.8rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt p {
  font-size: 1.5rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.legalTxt p a {
  color: black;
  font-weight: 300;
}

.legalTxt p a:hover {
  color: black;
  /* text-decoration: underline; */
  background-color: rgb(240, 240, 240);
}

.legalTxt ul {
  margin-bottom: 2rem;
}

.legalTxt ul li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 130%;
  margin-bottom: 1rem;
  color: rgb(128, 128, 128);
}

.legalTxt ul li {
  padding-left: 3rem;
  position: relative;
}

.legalTxt ul li:before {
  content: "\2022";
  width: 2rem;
  display: block;
  position: absolute;
  top: 0rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.5rem;
  color: rgb(128, 128, 128);
}


.legalTxt ol {
  margin-bottom: 2rem;
  counter-reset: my-awesome-counter;
}

.legalTxt ol li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 130%;
  margin-bottom: 1rem;
  /* color: #ABACAE;  */
  counter-increment: my-awesome-counter;
}

.legalTxt ol li {
  padding-left: 4rem;
  position: relative;
}

.legalTxt ol li:before {
  content: counter(my-awesome-counter);
  width: 2rem;
  display: block;
  position: absolute;
  top: 0.265rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
}

.legalTxt strong {
  font-weight: 400;
}

/* new */

.imageDefaults {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.imageDefaults2 {
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.imageDefaultsTop {
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.fabricThumbsNavigation {
  padding-left: 1rem;
  padding-right: 1rem;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 0;
}

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

.fabricThumbs .messageBox {
  background-color: rgb(237, 237, 237);
  border: 1px solid rgb(128, 128, 128);
  padding: 4rem;
  margin-top: 1rem;
}

.fabricThumbs .messageBox p {
  font-size: 1.6rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 400;
}

.fabricThumbs .fabricThumbItem {
  width: 50%;
  padding: 1rem;
  display: block;
  float: left;
}

.fabricThumbs .fabricThumbItem .fabricThumbImage {
  width: 100%;
  padding-bottom: 120%;
  margin-bottom: 1rem;
  position: relative;
}

.fabricThumbs .fabricThumbItem .fabricThumbText {
  width: 100%;
  height: 3.2rem;
}

.fabricThumbs .fabricThumbItem .fabricThumbText h2.styleh3 {
  font-size: 1.4rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
}

.pageBuffer {
  transition: all 0.4s ease;
}

.pageBufferPad {
  width: 100%;
  height: 6rem;
}

.fabricThumbSheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.fabricThumbItem:hover .fabricThumbSheerEdge {
  opacity: 1;
}

.fabricThumbItem:hover .fabricThumbText h3 {
  color: black;
}


.fabricThumbsNavigation {
  background-color: white;
}

.fixMe {
  z-index: 30;
}

.fabricThumbsNavigation h2 {
  font-size: 1.6rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  /* border-bottom: 1px solid rgb(128,128,128); */
  color: rgb(128, 128, 128);
  padding-bottom: 1rem;
  padding-left: 1.8rem;
  text-transform: uppercase;
}

.fabricThumbsNavigation ul {
  padding-top: 1.2rem;
}

.fabricThumbsNavigation ul li {
  font-size: 1.4rem;
  line-height: 100%;
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  float: left;
  margin-right: 2rem;
}

.fabricThumbsNavigation ul li:after {
  content: "";
  display: table;
  clear: both;
}

.fabricThumbsNavigation ul li a {
  color: rgb(128, 128, 128);
  padding-left: 0;
}

/* .fabricThumbsNavigation ul li a::before { content:''; width:1.4rem; height:1.4rem; background-image: url(/gfx/korlaBullet.gif); background-repeat: no-repeat; background-size: contain; float: left; margin-right: 0.4rem; visibility: hidden; margin-top: 0.1rem;} */

.fabricThumbsNavigation ul li a:hover,
.fabricThumbsNavigation ul li a.selected {
  color: black;
}

/* .fabricThumbsNavigation ul li a:hover::before, .fabricThumbsNavigation ul li a.selected::before { visibility: visible; } */

.fabricThumbsNavigation ul {
  float: left;
}


.fabricThumbsNavigation .coloursHead {
  font-size: 1.6rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1rem;
  border-bottom: none;
  color: rgb(128, 128, 128);
  padding-bottom: 0.6rem;
  padding-left: 1.4rem;
}

.collectionHeader {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom:
}

.collectionHeaderTextColumn {
  width: 30%;
  height: 46rem;
  float: left;
  background-color: rgb(155, 155, 155);
}

.collectionHeaderImageColumn {
  width: 70%;
  height: 46rem;
  float: right;
}

.collectionHeaderTextColumn {
  padding: 4rem;
}

.collectionHeaderTextColumn h1 {
  font-size: 2.3vw;
  line-height: 120%;
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.2vw;
  text-transform: uppercase;
  color: white;
  font-stretch: expanded;
}

.collectionHeaderTextColumn p {
  font-size: 1.5vw;
  line-height: 170%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 0;
  color: white;
}

.alsoLike {
  max-width: 121rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.alsoLike h3.styleh1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 2.4rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem
}


.galleryStripHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  height: 6.4rem;
}

.galleryStripHeader h1 {
  font-size: 2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.galleryStrip {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 4rem;
}


.galleryStrip .item {
  float: left;
  position: relative;
}

.galleryStrip .item {
  width: 12.5%;
  display: block;
  float: left;
  padding-bottom: 12.5%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
}

.galleryStrip .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.galleryStrip .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 15%;
  background-position: center center;
  background-repeat: no-repeat;
}


.galleryStripBottom {
  margin-bottom: 0;
}


.dropbtn {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  border: 1px solid rgb(128, 128, 128);
  padding: 1rem;
  padding-right: 4rem;
  padding-left: 1.7rem;
  width: 25rem;
  display: block;
  box-sizing: border-box;
}

.dropbtn {
  background-image: url(/gfx/downArrow.png);
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
}

.branded {
  color: black;
}

.dropdown {
  float: left;
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: calc(1.4rem + 20% + 1.2rem);
  /*   background-color: #f1f1f1; */
  z-index: 1;
  border: 1px solid rgb(128, 128, 128);
  width: 25rem;
  padding-top: 1.2rem;
  background-color: rgba(255, 255, 255, 0.95);

}

.dropdown-content a {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  width: 100%;
  padding-left: 1.4rem;
  margin-bottom: 1.2rem;
  display: block;

}

.dropdown-content a:hover,
.dropdown-content .selected {
  color: black;
}

.subSelected {
  background-color: #f1f1f1 !important;
  color: black !important;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  color: black;
  background-color: rgb(237, 237, 237);
}

/* end new */



/* fabric detail page */

.fabric {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fabric .fabricProduct {
  width: 100%;
}

.fabric .fabricProduct .col1 .item {
  position: relative;
  border: 0.6rem solid white;
}

.fabric .fabricProduct .col1 .item {
  width: 100%;
  display: block;
  padding-bottom: calc(120% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
}

.fabricProduct .col1 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fabricProduct .col1 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 4%;
  background-position: center center;
  background-repeat: no-repeat;
}



.fabric .fabricInfo {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fabric .fabricInfo .col1 {
  width: 100%;
}

.fabricInfo .col2 {
  width: 100%;
}

.fabric .fabricInfo .col2 .item {
  float: left;
  position: relative;
  border: 0.6rem solid white;
}

.fabric .fabricInfo .col2 .item {
  width: 25%;
  display: block;
  float: left;
  padding-bottom: calc(25% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: 200%;
}

.fabric .fabricInfo .col2 .itemNone {
  width: 25%;
  display: block;
  float: left;
  padding-bottom: calc(25% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: 200%;
  float: left;
  position: relative;
  border: 0.6rem solid white;
  filter: grayscale(100%);
  opacity: 0.15;
  position: relative;
}




.fabric .fabricInfo .col2 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fabric .fabricInfo .col2 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/link.png);
  background-size: 19%;
  background-position: center center;
  background-repeat: no-repeat;
}

/* .fabricInfo .col2 .item:nth-of-type(n+4) {display: none;} */

.fabric .fabricInfo h1 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.fabric .fabricInfo h2 {
  font-size: 1.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  padding-top: 0.6rem;
  margin-right: 0.6rem;
  margin-left: 0.6rem;
}

.fabric .fabricInfoTable {
  width: 100%;
}

.fabric .fabricInfoTable td:nth-of-type(odd),
.fabricInfo .title {
  width: 35%;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.fabric .fabricInfoTable td:nth-of-type(even) {
  width: 65%;
  color: black;
}

.fabric .fabricInfoTable tr:first-of-type {
  text-transform: uppercase;
}

.fabric .fabricInfoTable td {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.fabric .fabricInfoTable td {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
}

.fabric .fabricInfo .title {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 0.5rem;
}

.fabric .fabricInfo .topInfo {
  border-bottom: 1px solid #999999;
  padding-bottom: 1.2rem;
  margin-bottom: 2.2rem;
}

.fabric .fabricInfo .botInfo {}

.fabric .fabricInfo .buttons {
  padding-top: 1rem;
}

.fabric .fabricInfo .buttonBase {
  display: block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
}

.fabric .fabricInfo .buttonFavourites {
  color: white;
  background-color: rgba(32, 17, 53, 0.5);
  width: 100%;
}

.fabric .fabricInfo .buttonFavourites img {
  height: 1.6rem;
  vertical-align: middle;
  display: inline-block;
  margin-right: 1rem;
}

.fabric .fabricInfo .buttonFavourites:hover {
  background-color: rgba(32, 17, 53);
}

.fabric .fabricInfo .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.fabric .fabricInfo .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.fabric .fabricInfo .buttonLimit {
  color: white;
  background-color: #A34C24;
  cursor: not-allowed;
}

.fabric .fabricInfo .buttonLimit:hover {
  color: white;
  background-color: #A34C24;
  cursor: not-allowed;
}

.buttonAction,
.goButtons {
  margin-bottom: 2rem;
}

.fabric .fabricInfo .buttonStockist {
  color: white;
  background-color: #A7A59B;
}

.fabric .fabricInfo .buttonStockist:hover {
  color: white;
  background-color: #7F7F65;
}

.fabric .fabricInfo .buttonBack {
  color: white;
  background-color: #88A9C4;
}

.fabric .fabricInfo .buttonBack:hover {
  color: white;
  background-color: #618AB5;
}

.fabric .fabricInfo a {
  margin-right: 0;
}

.fabric .fabricInfo a:last-of-type {
  margin-right: 0;
}

.fabric .fabricInfo .description {
  margin-bottom: 3rem;
}

.fabric .fabricInfo .description p {
  font-size: 1.8rem;
  line-height: 190%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.fabric .fabricInfo .description p a {
  color: black;
  font-weight: 300;
}

.fabric .fabricInfo .description p a:hover {
  color: black;
  text-decoration: underline;
  /* background-color:rgb(240,240,240); */
}


.boxIn {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid black;
}

.fabric .fabricInfo .goFavourites {
  color: grey;
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: left center;
  width: 49%;
  padding-left: 3rem;
  text-align: left;
  display: block;
  float: left;
  background-image: url(/gfx/heartPurple.png);
}

.fabric .fabricInfo .goBack {
  color: grey;
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: left center;
  width: 49%;
  padding-left: 3rem;
  text-align: left;
  display: block;
  float: right;
  background-image: url(/gfx/caterpillarPurple.png)
}

.fabric .fabricInfo .goFavourites:hover,
.fabric .fabricInfo .goBack:hover {
  color: black;
  background-repeat: no-repeat;
  background-size: 12%;
}

.fabEnquire {
  margin-bottom: 1rem;
}

.fabEnquire p {
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.fabEnquire a {
  font-size: 1.8rem;
  line-height: 120%;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  color: black;
}

/* cart */


.cartHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.cartHeaderTextBlock {
  max-width: 80rem;
}

.cartHeader h1 {
  font-size: 2.4rem;
  line-height: 130%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.cartHeader p {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.cartTable {
  max-width: 80rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
}

.cartTable table {
  width: 100%;
}

.cartTable td {
  font-size: 1.8rem;
  line-height: 130%;
  text-align: left;
  font-weight: 400;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
  vertical-align: middle;
}

.cartTable td:nth-of-type(1) {
  width: 16.8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.cartTable td:nth-of-type(2) {
  width: calc(100% - 21.8rem);
  text-align: left;
  padding-left: 2rem;
  padding-right: 2rem;
}

.cartTable td:nth-of-type(3) {
  width: 5rem;
  text-align: right;
}

.cartTable .tableImage {
  padding-bottom: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: cover;
}

.sheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-image: url(/gfx/sheerEdge.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cartTable .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem
}

.cartTable .buttonDelete {
  display: inline-block;
  padding: 0.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  border-radius: 0.6rem
}

.cartTable .buttonDelete {
  color: black;
  background-color: rgb(207, 207, 207);
  font-family: 'fa5-Solid';
  font-size: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
}

.cartTable .buttonDelete:hover {
  color: white;
  background-color: #A34C24;
}

.cartTable .buttonRow {
  margin-top: 2rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
  border-top: 1px solid #ccc;
}

.cartTable .buttonRow .item {
  float: left;
  padding: 1rem;
  width: 33.333333%;
  text-align: center;
}

.cartTable .buttonRow .item:last-of-type {
  margin-right: 0;
}

.cartTable .buttonRow .item p {
  font-size: 1.5rem;
  line-height: 130%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
  padding-top: 1rem;
}

.cartTable .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem
}

.cartTable .buttonBack {
  color: white;
  background-color: rgba(32, 17, 53, 0.5);
}

.cartTable .buttonBack:hover {
  color: white;
  background-color: rgba(32, 17, 53, 1);
}

.cartTable .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.cartTable .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.cartTable a {
  margin-right: 1rem;
}

.cartTable a:last-of-type {
  margin-right: 0;
}





/* checkout */
.checkout {
  max-width: 100rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.checkout .checkoutItems {
  width: 100%;
}

.checkout .checkoutItems h1 {
  font-size: 2.4rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem;
}

.checkout .checkoutItems h1 img {
  height: 2rem;
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 0.4rem;
}

.checkout .checkoutItems .item {
  width: 16.666666%;
  padding: 0.5rem;
  float: left;
}

/* .checkout .checkoutItems item td:nth-of-type(1) { width:10rem; padding-top: 0.4rem; padding-bottom: 0.4rem;} */
/* .checkout .checkoutItems table td:nth-of-type(2) { width:calc(100% - 16.8rem); text-align: left; padding-left: 2rem; padding-left: 2rem; } */

.checkout .checkoutItems .item .swatch {
  padding-bottom: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: cover;
  overflow: hidden;
}

.checkout .checkoutItems .item .name {
  opacity: 0;
  top: 100%;
  left: 10%;
  width: 100%;
  height: 64%;
  background-color: rgb(255, 255, 255, 0.85);
  position: absolute;
  z-index: 3;
  padding: 1rem;
  transition: all 0.4s ease;
  padding-right: 2rem;
}

/* .checkout .checkoutItems .item .name p {font-size: 1.4rem; line-height: 130%; text-align: left; font-weight: 400; color:rgb(128,128,128); text-transform: uppercase;  padding:0.4rem;} */
.checkout .checkoutItems .item .name p {
  font-family: 'Caveat', cursive;
  font-size: 2rem;
  line-height: 100%;
  text-align: left;
  font-weight: 400;
  color: #A34C24;
  padding: 0.4rem;
}




.checkout .checkoutItems .item .swatch:hover .name {
  opacity: 1;
  top: 36%;
  transform: rotate(13deg);
}

.addressForm {
  max-width: 70rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}



/* pay */

.payArea {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  letter-spacing: 0.05rem;
}

.contactBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 2rem;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  border-radius: 0.4rem;
  background-color: rgb(255, 255, 255, 0.5);
}


/* stockist */

.stockist {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

.stockist .country {
  width: 100%;
  padding-bottom: 2rem;
}

.stockist .company {
  float: left;
  width: 100%;
  padding: 1rem;
  min-height: 14.8rem;
}

.stockist h1 {
  font-size: 2.4rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  margin: 1rem;
}

.stockist h2 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  padding: 1rem;
}

.stockist h3 {
  font-size: 1.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 0.6rem;
}

.stockist p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: left;
  font-weight: 300;
  color: black;
}

.stockist p span {
  font-family: 'fa5-Solid';
  font-weight: normal;
  font-style: normal;
  color: rgba(32, 17, 53, 0.5);
  width: 2.6rem;
  display: inline-block;
}

.stockist a {
  color: rgba(32, 17, 53, 0.5);
}

.stockist a:hover,
.stockist a:hover span {
  color: rgba(32, 17, 53, 1);
}


/* shipping (used on pay) */
.shipping {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.shipping .charge p,
.payArea .charge p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
  font-weight: 300;
  color: black;
}

.shipping .charge p strong,
.payArea .charge p strong {
  font-weight: 400;
}

.shipping .charge h2 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.shipping .charge p:first-of-type {
  font-size: 2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  color: black;
  margin-bottom: 2rem;
}

.shipping .charge p:first-of-type span {
  color: #A34C24;
  font-weight: 400;
}

.payArea .charge img {
  width: 100%;
  margin-bottom: 2rem;
}

.payBorder {
  border: 1px solid rgb(153, 153, 153);
  background-color: white;
  padding: 3rem;
  border-radius: 0.8rem;
}

.payArea .charge h2 {
  font-size: 1.8rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

/* social */

.social {
  margin-bottom: 4rem;
}

.social .socialIcon {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 1rem;
}

.social .facebook {
  background-image: url(/social/facebook.png);
  filter: grayscale(100%);
  opacity: 0.5;
}

.social .twitter {
  background-image: url(/social/twitter.png);
  filter: grayscale(100%);
  opacity: 0.5;
}

.social .instagram {
  background-image: url(/social/instagram.png);
  filter: grayscale(100%);
  opacity: 0.45;
}

.social .pinterest {
  background-image: url(/social/pinterest.png);
  filter: grayscale(100%);
  opacity: 0.35;
}

.social .socialIcon:hover {
  filter: none;
  opacity: 1;
}

.social .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem;
  margin-right: 1rem;
}

.social .buttonStandard {
  color: white;
  background-color: rgb(186, 186, 186);
}

.social .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.social .buttonStandard img {
  display: inline-block;
  height: 1.6rem;
  vertical-align: middle;
  margin-right: 0.6rem;
}

.socialPad {
  width: 100%;
  padding-bottom: 4rem;
}

/* logins */

.loginBgd {
  background-image: url(/gfx/loginBack.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.loginArea {
  max-width: 60rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.loginBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.9);
}

/* form */
form {
  padding-top: 0;
  max-width: 100%;
}

form .row {
  margin-bottom: 2rem;
}

form .plusMargin {
  margin-bottom: 1rem;
}

form label,
form p,
.label {
  font-size: 1.8rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  display: block;
  margin-bottom: 0.5rem;
}

form a {
  color: #A34C24;
  font-weight: 400;
}

form a:hover {
  color: black;
}

form .offsetLabel {
  display: inline-block !important;
}

form .offsetLabel::after {
  content: " ";
  display: inline-block;
  width: 2rem;
}

form .floatLabel {
  display: block;
  float: left;
  width: 90%;
}

form .floatCheckbox {
  display: block;
  float: left;
  margin-right: 0.6rem;
}

form .left {
  float: left;
  width: 47.5%;
}

form .right {
  float: right;
  width: 47.5%;
}

form .left2 {
  float: left;
  width: 70%;
}

form .right2 {
  float: right;
  width: 30%;
  padding-top: 2%;
}

form .right2 img {
  width: 100%;
  vertical-align: middle;
}

form input[type=text],
form input[type=password],
form .emptyBox,
#card_number,
#card_expiry,
#card_cvc {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: block;
  font-style: normal;
  font-size: 1.8rem;
  color: #000;
  padding: 1.4rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}


form textarea {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: block;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 130%;
  color: #000;
  padding: 1.4rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}


form input[type=text]:focus,
form input[type=password]:focus,
form textarea:focus {
  border: 1px solid #A34C24;
  outline: none;
  -webkit-appearance: none;
}

input[type=button],
input[type=submit],
input[type=reset],
form .btn {
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}

form .btn {
  background-color: rgba(32, 17, 53, 0.5);
}

form input[type=submit]:hover,
form .btn:hover {
  background-color: black;
  color: white;
}

form .btncenter {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

form label span {
  font-size: 1.8rem;
  line-height: 2rem;
  color: #A34C24;
}

form input[type=checkbox] {
  height: 1.8rem;
  width: 1.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid rgb(128, 128, 128);
  border-radius: 0.4rem;
  outline: none;
  transition-duration: 0.3s;
  background-color: none;
  cursor: pointer;
  vertical-align: text-bottom;
  display: inline-block;
  position: relative;
  padding-right: 1rem;
}

form input[type=checkbox]:checked {
  border: 1px solid rgb(128, 128, 128);
  background-color: #eee;
}

form input[type=checkbox]:checked::before {
  content: '\2713';
  font-size: 1.6rem;
  font-weight: 400;
  display: block;
  text-align: center;
  color: #A34C24;
  position: absolute;
  left: 0.2rem;
  top: -0.1rem;
}


.filled {
  background-color: rgba(0, 0, 0, 0.05);
}


form textarea {
  display: block;
  min-height: 10rem;
}

form .greyed {
  display: none;
}

form input[type=checkbox],
form input[type=radio],
form input[type=text],
form button {
  box-shadow: none;
  outline: none;
}


.alert {
  border: 1px solid #A34C24;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: rgb(242, 228, 213, 0.5);
  margin-bottom: 2rem;
}

.alert p {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 130%;
  margin-bottom: 0;
}

.alert a {
  color: #A34C24;
  font-weight: 400;
}

.alert a:hover {
  color: black;
}

#paymentResponse p {
  border: 1px solid #A34C24;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: rgb(242, 228, 213, 0.5);
  margin-bottom: 2rem;
  margin-top: 2rem;
}

#paymentResponse p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 110%;
}

.select-css {
  display: block;
  font-size: 1.6rem;
  font-family: sans-serif;
  font-weight: 400;
  color: #444;
  line-height: 1.3;
  padding: 1.4rem 2.4rem;
  width: 100%;
  max-width: 100%;
  /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgb(153, 153, 153);
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
  box-shadow: none;

  border-radius: 0.8rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('/gfx/selectArrow.png'),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right .7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 1.2rem auto, 100%;
}

/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}

/* Hover style */
.select-css:hover {
  border-color: #888;
}

/* Focus style */
.select-css:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

/* Set options to normal weight */
.select-css option {
  font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css,
:root:lang(ar) .select-css,
:root:lang(iw) .select-css {
  background-position: left .7em top 50%, 0 0;
  padding: .6rem .8rem .5rem 1.4rem;
}

/* Disabled styles */
.select-css:disabled,
.select-css[aria-disabled=true] {
  color: graytext;
  background-image: url('/gfx/selectArrow.png'),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

.select-css:disabled:hover,
.select-css[aria-disabled=true] {
  border-color: #aaa;
}

/* payment */

.status {
  padding-top: 4rem;
  padding-bottom: 4rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.status p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
  font-weight: 300;
  color: black;
}

.status p strong {
  font-weight: 400;
}

.status p span {
  text-transform: uppercase;
}

.status h1 {
  font-size: 3rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.status h2 {
  font-size: 2.2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 0.5rem;
  margin-top: 3rem;
}

.status .error {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.status .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem;
  margin-top: 3rem;
}

.status .buttonBack {
  color: white;
  background-color: #88A9C4;
}

.status .buttonBack:hover {
  color: white;
  background-color: #618AB5;
}

.status .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.status .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.status .success {
  color: #34A853;
}

.status .error {
  color: #bf3838;
}


/* footer */
.footer {
  max-width: 128rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 3rem;
  letter-spacing: 0.05rem;
}

.footer .col {
  width: 25%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer h3 {
  font-size: 1.5rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.footer h3 a {
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.footer h3 a:hover,
.footer h3 a.selected {
  color: black;
  text-transform: uppercase;
}

.footer ul li {
  font-size: 1.3rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer ul li a {
  color: rgb(128, 128, 128);
}

.footer ul li a:hover,
.footer ul li a.selected {
  color: black;
  /* text-decoration: underline; */
  background-color: none !important;
}

.footer .email {
  text-transform: none;
}

.signOff {
  max-width: 128rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.signOff p {
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
}

/* gallery */

.gallery {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
}

.gallery .item {
  position: relative;
  border: 0.6rem solid white;
}

.gallery .item {
  width: 50%;
  display: block;
  padding-bottom: 66%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
  float: left;
}

.gallery .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.gallery .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 8%;
  background-position: center center;
  background-repeat: no-repeat;
}




/* footer */
.footer {
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
  padding-bottom: 2rem;
  letter-spacing: 0.05rem;
}

.footer .col {
  width: 100%;
  margin-bottom: 2rem;
}

.footer h3 {
  font-size: 1.5rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.footer h3 a {
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.footer h3 a:hover,
.footer h3 a.selected {
  color: black;
  text-transform: uppercase;
}

.footer ul li {
  font-size: 1.3rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer ul li a {
  color: rgb(128, 128, 128);
}

.footer ul li a:hover,
.footer ul li a.selected {
  color: black;
  /* text-decoration: underline; */
  background-color: none !important;
}

.footer .email {
  text-transform: none;
}

.signOff {
  max-width: 128rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 2rem;
  padding-bottom: 6rem;
  letter-spacing: 0.05rem;
}

.signOff p {
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
}




/* fresco (inline popup overrides) */
.fr-window {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

.fr-overlay-background {
  background: rgba(32, 17, 53, 0.9) !important;
  /*   opacity: 0.8; */
  /*   filter: alpha(opacity=90); */
}

.fr-overlay-ui-fullclick .fr-overlay-background {
  background: rgba(32, 17, 53, 0.9) !important;
  /*   opacity: 0.4 !important; */
  /*   filter: alpha(opacity=100); */

}


.fr-position-outside,
.fr-position-inside {
  font-size: 16px !important;
  line-height: 24px !important;
}

.fr-info {
  font-size: 16px;
  line-height: 24px;
}


/* Sprite */
.fr-window-skin-fresco .fr-side-button-icon,
.fr-window-skin-fresco .fr-close-icon,
.fr-window-skin-fresco .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.svg") !important;
}

/* fallback png sprite */
.fr-window-skin-fresco.fr-no-svg .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg .fr-close-icon,
.fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.png") !important;
}

.search {
  display: inline-block;
  width: 34rem;
}

.search button,
.search input[type="submit"],
.search input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.search button {
  background-image: url(/gfx/magPurpleTint.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

.search button {
  display: inline-block;
  width: 2rem;
  height: 3.1rem;
  vertical-align: bottom;
  margin-left: 0.5rem;
}

.search button:hover {
  color: black;
  background-image: url(/gfx/magPurple.png);
}

.headerNeg .search button:hover {
  color: white;
  background-image: url(/gfx/magWhite.png);
}

.search input[type=text] {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: inline-block;
  font-style: normal;
  font-size: 1.4rem;
  color: #000;
  padding: 0.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  border-radius: 0.4rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  width: 16rem;
}

.search input[type=text]:focus {
  border: 1px solid rgb(33, 17, 53);
}

/* .search label { font-size: 1.8rem; line-height: 120%; color: rgb(128,128,128); text-align: left; font-weight: 300;  display:inline-block; } */
.search label {
  display: inline-block;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: left;
  padding-right: 1rem;
  color: rgb(128, 128, 128);
  white-space: nowrap;
}




/* searchBlock */




.searchStripHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.searchStripHeader h1 {
  font-size: 2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.searchStripHeader p {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
}

.searchStripHeader p strong {
  font-weight: 600;
  color: rgb(32, 17, 53);
}


.searchBlock .searchThumbItem {
  width: 25%;
  padding: 1rem;
  display: block;
  float: left;
}

.searchBlock .searchThumbItem .searchThumbImage {
  width: 100%;
  padding-bottom: 120%;
  margin-bottom: 1rem;
  position: relative;
}

.searchBlock .searchThumbItem .searchThumbText {
  width: 100%;
  height: 3.4rem;
}

.searchBlock .searchThumbItem .searchThumbText h3 {
  font-size: 1.4rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 400;
}




.searchThumbSheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0: right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.searchThumbItem:hover .searchThumbSheerEdge {
  opacity: 1;
}

.searchThumbItem:hover .searchThumbText h3 {
  color: black;
}








@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .collectionSliderTextColumn p {
    font-size: 1.4vw;
  }

  .collectionSliderTextColumn .webLink {
    padding: 0.9rem 1.8rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-weight: 300;
  }

  .collectionGrid .itemName {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    padding: 1.6rem;
    width: 50%;
    height: 7.6rem;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.4s ease;
    z-index: 2;
  }

  .collectionGrid .itemName h1 {
    font-size: 1.7rem;
    line-height: 120%;
    text-align: left;
    font-weight: 300;
    margin-bottom: 1vw;
    text-transform: uppercase;
    color: black;
    position: absolute;
    left: 1.6rem;
    top: 1.6rem;
  }

  .collectionText {
    position: absolute;
    top: 6rem;
    left: 0;
    padding: 4rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: all 0.2s ease;
    z-index: 20;
    display: block;
    width: 100%;
    visibility: hidden;
  }




  .dropbtn {
    font-size: 1.3rem;
    width: 22rem;
  }

  .dropdown-content {

    width: 22rem;


  }

  .dropdown-content a {
    font-size: 1.3rem;
  }


  .fabricThumbsNavigation ul li {
    font-size: 1.3rem;
  }

  .fabricThumbsNavigation ul li a::before {
    content: '';
    width: 1.4rem;
    height: 1.3rem;
  }

  .fabricThumbsNavigationColumn {
    width: 24rem;
  }

  .fabricThumbsColumn {
    width: calc(100% - 24rem);
  }

  .stockist .company {
    float: left;
    width: 33.333333%;
    padding: 1rem;
    min-height: 14.8rem;
  }
}





/* new */
  .buttonAvailableBase {
    display: block !important;
    padding: 1.2rem !important;
    padding-left: 5rem !important;
    font-size: 1.5rem !important;
    line-height: 120% !important;
    text-align: left !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: black;
    width: 100% !important;
    margin-top:1rem;
    text-align: left;
}


  .ba2:hover,   .ba5:hover,   .ba6:hover {
  opacity:0.8;  
}
.fabric .fabricInfo h1 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.subFabric {
  display: block !important;
  padding: 1.2rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  font-size: 1.5rem !important;
  line-height: 120% !important;
  text-align: center !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: white;
  width: 100% !important;
  margin-bottom: 1rem;
}
.subFabric:hover {
  opacity: 1 !important;
}

.fabricThumbsNavigation ul li a {
  color: rgb(128, 128, 128);
  padding-left: 0;
  display:inline-block;
  padding: 1rem;
  padding-left:1.4rem;
  padding-right:1.4rem;
}

.fabricThumbsNavigation ul li a:hover,
.fabricThumbsNavigation ul li a.selected {
  color: black;
  border: 1px solid black;
  padding: 0.8rem;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  }
.fabricThumbsNavigation ul {
  float: left;
  padding-top: 0;
}


/* new video code */

.fabric .fabricProduct .col2 {
  width: 100%;
  margin-bottom: 2rem;
}


/* Standard image tiles */
.fabric .fabricProduct .col2 .item {
  width: 33.333333%;
  width: 100%;
  display: block;
  padding-bottom: calc(80% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border: 0.6rem solid white;
  float: left;
  box-sizing: border-box;
}


/* Image Fresco overlay */
.fabric .fabricProduct .col2 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


.fabric .fabricProduct .col2 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 11%;
  background-position: center center;
  background-repeat: no-repeat;
}



/* Video tile */
.fabric .fabricProduct .col2 .videoItem {
  width:100%;
  display:block;
  padding-bottom:calc(80% - 1.2rem);
  position:relative;
  overflow:hidden;
  border:0.6rem solid white;
  float:left;
  box-sizing:border-box;
}


.fabric .fabricProduct .col2 .videoBackground {
  position:absolute;
  inset:-20px;
  background-size:cover;
  background-position:center;
filter:none;
  transform:scale(1.15);
opacity:0.45;
}


.fabric .fabricProduct .col2 .fabricVideo {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:contain;
  z-index:2;
}



/* .fabric .fabricProduct .col2 .videoItem video {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  background: #eee;
} */



/* Fake placeholder tiles */
.fabric .fabricProduct .col2 .itemNone {
  display:none !important;
  width: 100%;
  display: block;
  padding-bottom: calc(80% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border: 0.6rem solid white;
  filter: grayscale(100%);
  opacity: 0.15;
  float: left;
  box-sizing: border-box;
}



.fabricThumbHoverImage {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.fabricThumbItem:hover .fabricThumbHoverImage {
  opacity: 1;
}



.gallery .videoItem {
  position:relative;
  float:left;
  width:50%;
  padding-bottom:66%;
  overflow:hidden;
  background:#eee;
  box-sizing:border-box;
}
.gallery .videoItem {
  position: relative;
  border: 0.6rem solid white;
}


.gallery .videoBackground {
  position:absolute;
  /* inset:-20px; */
  background-size:cover;
  background-position:center;
  transform:scale(1.15);
  filter:blur(16px);
  opacity:.35;
}

.gallery .galleryVideo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  z-index:2;
}

.newDesign {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 5.2rem;
  height: 5.2rem;
  background-image: url('/gfx/newIcon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
}
}
/* tablet.css */
@media (min-width: 768px) and (max-width: 1023px) {
@charset "UTF-8";

html,
body {
  font-size: 10px;
  position: relative;
}

.desktop {
  display: block;
}

.smart {
  display: none;
}

/*
@media screen and (min-width: 1600px) and (max-width: 1920px) {
	html, body { font-size: 10.8px; position:relative; }
}
@media screen and (min-width: 1921px) and (max-width: 9999px) {
	html, body { font-size: 11.4px; position:relative; }
}
*/
.flexCentreCentre {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexLeftCentre {
  display: flex;
  justify-content: left;
  align-items: center;
}

.flexRightCentre {
  display: flex;
  justify-content: right;
  align-items: center;
}

.flexLeftBottom {
  display: flex;
  justify-content: left;
  align-items: baseline;
}

.fixed {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  /* background-color: white;  */
}

.fixedOffset {
  height: calc(6.2rem + 11.6rem);
  width: 100%;
  display: block;
}

.fixedOffsetNeg {
  height: 6.2rem;
  width: 100%;
  display: block;
}

.greyBg {
  background-color: rgb(233, 233, 233);
}

.ltGreyBg {
  background-color: rgb(237, 237, 237);
}

.whiteBg {
  background-color: rgb(255, 255, 255);
}

.mb8 {
  margin-bottom: 0.8rem;
}

.borderLR8 {
  border-left: 0.8rem solid white;
  border-right: 0.8rem solid white;
}

.borderLRT8 {
  border-left: 0.8rem solid white;
  border-right: 0.8rem solid white;
  border-top: 0.8rem solid white;
}

.shadHeader {
  box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.15);
  transition: all 0.4s ease;
}

.padBoth4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.korlaGrey {
  color: rgb(155, 155, 155);
}


.linkBand {
  /* max-width: 128rem; */
  padding-left: 4rem;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

.linkBand {
  /* padding-top: 1rem; padding-bottom: 1rem; */
}

.linkBand ul {
  float: right;
  display: table;
}

.linkBand ul li {
  height: 5.4rem;
  width: auto;
  display: inline-block;
  padding-left: 2rem;
  border-left: 2px solid white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 2rem;
  display: table-cell;
  vertical-align: bottom;
  position: relative;
}

/* .linkBand ul li:first-of-type {height:auto; width:auto; display: inline-block; padding-left: 4rem;} */
.linkBand ul li:first-of-type {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 120%;
  border-left: none;
}

.linkBand img {
  height: 3.4rem;
  width: auto;
  display: block;
  transition: all 0.4s ease;
}

.linkBand a {
  display: block;
  box-sizing: border-box;
}

.linkBand a:hover img {
  transform: scale(1.1);
}

.linkBand a:hover .linkBandScreen {
  display: block;
}

.linkBandScreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.08);
  z-index: 102;
  display: none;
}

.header {
  /* max-width: 128rem; */
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.4s ease;
  height: 11.6rem;
}

.headerNeg {
  background-color: rgba(0, 0, 0, 0.85);
  /* background-color: white; */
}

.headerNotNeg {
  background-color: white;
}

.header .logo {
  float: left;
  transition: all 0.4s ease;
  padding-top: 4rem;
}

.header .logo img {
  transition: all 0.4s ease;
  height: 2.1rem;
}

.header .navigation {
  width: calc(100% - 25rem);
  float: right;
  display: block;
}

.header .navigation .functional {
  width: 100%;
  text-align: right;
  padding-top: 2.8rem;
  padding-bottom: 1.4rem;
  transition: all 0.4s ease;
  overflow: visible;
}

.header .navigation .functional .basket {
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  overflow: visible;
}

.header .navigation .functional .basket {
  display: inline-block;
  margin-left: 4rem;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: right;
  padding-left: 3rem;
  color: rgb(128, 128, 128);
}

.header .navigation .functional .basket img {
  width: 1.4rem;
  height: auto;
  position: absolute;
  left: 1.3rem;
  top: -0.6rem;
}

.header .navigation .functional .basket:hover,
.header .navigation .functional .basket .selected {
  color: black;
  background-image: url(/gfx/heart-full.png);
}

.headerNeg .navigation .functional .basket:hover,
.headerNeg .navigation .functional .basket .selected {
  color: white;
  background-image: url(/gfx/heart-full.png);
}




.header nav {}

.header nav ul {
  float: right;
}

.header nav ul li {
  display: inline-block;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: right;
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  transition: all 0.4s ease;
}

.header nav ul li:last-of-type {
  padding-right: 0;
}

.header nav ul li:first-of-type {
  padding-left: 0;
}

.header nav ul li a {
  color: rgb(128, 128, 128);
}

.header nav ul li a:hover,
.header nav ul li a.selected {
  color: black;
}

.headerNeg nav ul li a:hover,
.headerNeg nav ul li a.selected {
  color: white;
}





/* header shrink */
.header-shrink {
  height: 7.8rem !important;
}

.header-logo-shrink {
  padding-top: 3rem !important;
}

.header-logo-img-shrink {
  height: 2rem !important;
}

.header-functional-shrink {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}


/* .offset-sub-shrink { height: calc(9rem + 4.2rem + 4rem) !important;} */
.offset-sub-shrink {
  height: calc(9rem + 4.2rem + 2.3rem) !important;
}

.offset-nosub-shrink {
  height: calc(9rem + 4.2rem) !important;
}

.offset-subPlus-shrink {
  height: calc(9rem + 4.2rem + 3.1rem) !important;
}

.txtSlice {
  max-width: 128rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.txtSliceNarrow {
  max-width: 100rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.txtSliceNarrow2 {
  max-width: 90rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.genTxt h1 {
  font-size: 2.8rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.genTxt p {
  font-size: 1.8rem;
  line-height: 190%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.genTxt p a {
  color: black;
  font-weight: 300;
}

.genTxt p a:hover {
  color: black;
  text-decoration: underline;
  /* background-color:rgb(240,240,240); */
}

.genTxt .webLink {
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  text-decoration: none;
}

.genTxt .webLink:hover {
  color: white;
  background-color: black;
  text-decoration: none;
}

.moreBtn {
  display: inline-block;
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  margin-left: auto;
  margin-right: auto;
}

.genTxt ul {
  margin-bottom: 2rem;
}

.genTxt ul li {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 140%;
  margin-bottom: 1rem;
  color: rgb(128, 128, 128);
}

.genTxt ul li {
  padding-left: 4rem;
  position: relative;
}

.genTxt ul li:before {
  content: "\2022";
  width: 2rem;
  display: block;
  position: absolute;
  top: 0rem;
  left: 0;
  padding-left: 0;
  font-weight: 500;
  font-size: 2.4rem;
  color: black;
}


.genTxt ol {
  margin-bottom: 2rem;
  counter-reset: my-awesome-counter;
}

.genTxt ol li {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 120%;
  margin-bottom: 1rem;
  /* color: #ABACAE;  */
  counter-increment: my-awesome-counter;
}

.genTxt ol li {
  padding-left: 4rem;
  position: relative;
}

.genTxt ol li:before {
  content: counter(my-awesome-counter);
  width: 2rem;
  display: block;
  position: absolute;
  top: 0.265rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
}

.genTxt strong {
  font-weight: 400;
}


/* home page */

.homeSlider {
  padding-bottom: 60%;
}

.homeImageBox {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 80;
  background-color: rgba(32, 17, 53, 0.5);
}

.sliderBox {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 90;
}

.sliderBox div {
  width: 36%;
  text-align: center;
}

.sliderBox img {
  width: 100%;
}

.sliderBox h1 {
  font-weight: 300;
  text-transform: uppercase;
  color: white;
  font-size: 3.2rem;
  padding-top: 2rem;
}

.lightBg {
  background-color: rgb(242, 242, 242);
}

.homeIntro {
  max-width: 112rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.homeIntro h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem;
}

.homeIntro p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.homeIntro .btn {
  display: inline-block;
  padding: 1.4rem;
  padding-left: 5.4rem;
  padding-right: 5.4rem;
  font-size: 1.6rem;
  line-height: 100%;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  border: 1px solid rgb(128, 128, 128);
  background-color: white;
  text-align: center;
  margin-top: 3.2rem;
}

.homeIntro .btn:hover {
  color: white;
  border: 1px solid white;
  background-color: rgb(32, 17, 53);
}


.homeTypes {
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.homeTypes .item {
  width: 50%;
  padding: 2rem;
  float: left;
}

.homeTypes .imgArea {
  display: block;
  padding-bottom: 90%;
  width: 100%;
  overflow: hidden;
}

.homeTypes .captionBack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6.4rem;
  background-color: rgba(32, 17, 53, 0.7);
  transition: all 0.4s ease;
}

.homeTypes .caption {
  position: absolute;
  left: 3rem;
  top: 87%;
  font-size: 2rem;
  line-height: 100%;
  text-transform: uppercase;
  color: white;
  font-weight: 300;
  transition: all 0.4s ease;
}

.homeTypes .textBlock {
  display: block;
  position: absolute;
  left: 3rem;
  top: 100%;
  transition: all 0.4s ease;
  width: calc(100% - 6rem);
}

.homeTypes .textBlock p {
  font-size: 1.6rem;
  line-height: 180%;
  color: white;
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
  transition: all 0.4s ease;
}

.homeTypes .imgArea:hover .captionBack {
  height: 100%;
}

.homeTypes .imgArea:hover .textBlock {
  display: block;
  top: 7rem;
}

.homeTypes .imgArea:hover .caption {
  top: 3rem;
  bottom: auto;
}

.homeTypes .goArrow {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 100%;
  color: rgb(32, 17, 53);
  text-align: left;
  text-transform: uppercase;
  padding: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  margin-top: 1.8rem;
}


/* home Gallery */
.viewGallery {
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.viewGallery .txtArea {
  width: 80%;
  padding-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}

.viewGallery .txtArea h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem
}

.viewGallery .txtArea p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.viewGallery .imgArea ul li {
  padding-bottom: 22%;
}

.actionButtonOuter {
  text-align: center;
  position: absolute;
  top: 0;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  /* padding-top: 7.6%;  */
}

.actionButton {
  display: inline-block;
  padding: 2.4rem;
  padding-left: 7.2rem;
  padding-right: 7.2rem;
  font-size: 2rem;
  line-height: 100%;
  text-transform: uppercase;
  color: white;
  text-align: center;
  background-color: rgba(32, 17, 53, 0.7);
  font-weight: 300;
}

.actionButton:hover {
  background-color: rgba(32, 17, 53, 1);
  color: white;
}

.actionArea {
  background-color: rgba(32, 17, 53, 0.7);
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
  display: none;
}


/* home Stockist */
.homeStockist {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: rgba(32, 17, 53, 0.15);
  display: flex;
  border: 1px solid rgba(32, 17, 53, 1)
}

.homeStockist .imgArea {
  width: 50%;
  padding-bottom: 30%;
  float: left;
}

.homeStockist .txtArea {
  width: 50%;
  float: right;
}

.homeStockist h2 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 3rem;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 0;
  text-decoration: none;
}

.homeStockist:hover {
  background-color: rgba(32, 17, 53, 1);
  display: flex;
  border: 1px solid rgba(32, 17, 53, 1)
}

.homeStockist:hover h2 {
  color: white;
  text-decoration: none;
}



/* lifestyle slider on fabric list page */
.lifeStyle {
  width: 50%;
  float: left;
}

.lifeStyle ul li {
  padding-bottom: 36%;
}

.dividingLine {
  padding-top: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
}

/*
.homeStripWelcome { margin-left: 1rem; margin-right: 1rem; background-color:  rgb(233,233,233);  padding-top: 3rem; padding-bottom: 2rem; margin-bottom: 3rem; padding-left: 4rem; padding-right: 4rem;}
.homeStripWelcome .textBlock {}
.homeStripWelcome h1 {font-size: 2.0rem; line-height: 140%;  text-align: center; font-weight: 400;  color: rgb(128,128,128); text-align: center;}

.homeStripWelcome p { font-size: 1.6rem; line-height: 140%; color: rgb(128,128,128); text-align: center; font-weight: 300; margin-bottom: 1.4rem; }
.homeStripWelcome p a { color: black; font-weight: 300; }
.homeStripWelcome p a:hover { color: black; text-decoration: underline; }
*/


/*
.favouritesStrip { max-width: 108rem; margin-left: auto; margin-right: auto;   padding-top: 0; padding-bottom: 2rem;}



.favouritesStrip .favouritesThumbItem { width:25%; padding: 1rem; display:block; float:left; padding-top: 0;}
.favouritesStrip .favouritesThumbItem .favouritesThumbImage { width:100%; padding-bottom: 100%; margin-bottom: 1rem; position:relative; }
.favouritesStrip .favouritesThumbItem .favouritesThumbText { width:100%;  }
.favouritesStrip .favouritesThumbItem .favouritesThumbText h3 { font-size: 1.4rem; line-height: 120%; color: rgb(128,128,128); text-align: center; font-weight: 400; margin-bottom: 1.4rem;}




.favouritesThumbSheerEdge { position:absolute; left:0; Top:0; bottom:0: right:0; width:100%; height:100%; opacity: 0;
   transition: opacity .25s ease-in-out;
}
.favouritesThumbItem:hover .favouritesThumbSheerEdge { opacity: 1;  }

.favouritesThumbItem:hover .favouritesThumbText h3 {color:black;}


.aboutStrip { max-width: 108rem; margin-left: auto; margin-right: auto; display:flex; padding-left: 1rem; padding-right: 1rem;}
.aboutStrip .aboutBox { background-color: rgb(213,216,208); }
.aboutStrip .textBox { width:50%; float:left; padding:3rem;  }
.aboutStrip .imageBox { width:50%; float:left; height:100%;}

.stockStrip { max-width: 108rem; margin-left: auto; margin-right: auto; display:flex; padding-left: 1rem; padding-right: 1rem; }
.stockStrip .imageBox { width:33.333333%; float:left; padding-bottom: 33.333333%; }
.stockStrip .stockBox { width:33.333333%; float:left; background-color: #ccc; padding: 3rem;}


.aboutStrip h1, .stockStrip h1 {font-size: 2rem; line-height: 140%;  text-align: center; font-weight: 300;  color: black; text-align: center; margin-bottom: 1.4rem; text-transform: uppercase; overflow:visible;}
.aboutStrip p, .stockStrip p { font-size: 1.5rem; line-height: 180%; color: black; text-align: center; font-weight: 300; margin-bottom: 2.4rem; text-align: center;}
.aboutStrip h1::before,
.stockStrip h1::before {content:""; background-image: url(/gfx/korlaIconWhite.png); background-repeat: no-repeat; background-size: contain; width:100%; height: 3.4rem; display:block; background-position: center center; margin-bottom: 1rem; }
.stockStrip h1::before {background-image: url(/gfx/korlaPlaceWhite.png); }


.stockStrip .webLink,
.aboutStrip .webLink {
  background-color: rgba(255,255,255,0.2);
  border: none;
  color: black;
  padding: 0.8rem 1.6rem;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.5rem; line-height: 1.5rem; text-align: center; font-weight: 300;
border-radius: 0.5rem; box-shadow: none; outline: none; -webkit-appearance: none;
  text-decoration: none !important; text-transform: uppercase; }
.stockStrip .webLink:hover,
.aboutStrip .webLink:hover { color:white;   background-color: rgba(0,0,0,0.2);
   text-decoration: none;
}

.stockStrip {margin-bottom: 4rem;}
*/



.mb4 {
  margin-bottom: 4rem;
}



/* about */
.fullWidthImage {
  width: 100%;
  padding-bottom: 52%;
}

.fullWidthImage .halfTint {
  position: absolute;
  bottom: 0;
  height: 12rem;
  width: 100%;
  display: block;
  background-color: rgba(32, 17, 53, 0.5);
}

.fullWidthImage .halfTint .caption {
  width: 100%;
  bottom: 0;
  padding-left: 5%;
}

.fullWidthImage .halfTint .caption {
  font-size: 3.6rem;
  line-height: 120%;
  color: white;
  text-align: left;
  font-weight: 300;
  margin-bottom: 4rem;
  text-transform: uppercase;
  position: absolute;
}

.titleStripe {
  max-width: 120rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 6rem;
}

.titleStripe h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 0;
}

.textStripe {
  max-width: 112rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.textStripe p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.thirdStripe {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.thirdStripe .item {
  width: 33.333333%;
  padding: 1rem;
  float: left;
}

.thirdStripe .item .image {
  width: 100%;
  padding-bottom: 80%;
}

.aboutPageStripe .aboutTextInner {
  padding-top: 4rem;
  padding-bottom: 3rem;
  padding-left: 8%;
  padding-right: 8%;
}


/* video wrapper */
.video {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* contact */

.contactBgd {
  background-image: url(/gfx/contactBg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 4rem;
  background-size: cover;
}

.contactArea {
  max-width: 60rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.contactBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.5);
}



/* legal */

/* .legalBgd { background-image: url(/gfx/legalBg.jpg); background-repeat: repeat; background-position: center center; } */
.legalArea {
  max-width: 96rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 0;
  letter-spacing: 0.05rem;
  text-align: left;
}

.legalBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.9);
  text-align: left;
}

.legalTxt h1 {
  font-size: 2.8rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt h2 {
  font-size: 2.2rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt h3 {
  font-size: 1.8rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt p {
  font-size: 1.5rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.legalTxt p a {
  color: black;
  font-weight: 300;
}

.legalTxt p a:hover {
  color: black;
  /* text-decoration: underline; */
  background-color: rgb(32, 17, 53);
}

.legalTxt ul {
  margin-bottom: 2rem;
}

.legalTxt ul li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 130%;
  margin-bottom: 1rem;
  color: rgb(128, 128, 128);
}

.legalTxt ul li {
  padding-left: 3rem;
  position: relative;
}

.legalTxt ul li:before {
  content: "\2022";
  width: 2rem;
  display: block;
  position: absolute;
  top: 0rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.5rem;
  color: rgb(32, 17, 53);
}


.legalTxt ol {
  margin-bottom: 2rem;
  counter-reset: my-awesome-counter;
}

.legalTxt ol li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 130%;
  margin-bottom: 1rem;
  /* color: #ABACAE;  */
  counter-increment: my-awesome-counter;
}

.legalTxt ol li {
  padding-left: 4rem;
  position: relative;
}

.legalTxt ol li:before {
  content: counter(my-awesome-counter);
  width: 2rem;
  display: block;
  position: absolute;
  top: 0.265rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 120%;
  color: rgb(32, 17, 53);
}

.legalTxt strong {
  font-weight: 400;
}


/* new */

.imageDefaults {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.imageDefaults2 {
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.imageDefaultsTop {
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

/* .fabricThumbsContainer { padding-left: 4rem; padding-right: 4rem; width:100%; margin-bottom: 4rem; } */
/* .fabricThumbsNavigationColumn { width: 100%; position:relative; } */
.fabricThumbsNavigation {
  padding-left: 2rem;
  padding-right: 2rem;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 0;
}

.fabricThumbs {
  width: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
}

.fabricThumbs .messageBox {
  background-color: rgb(237, 237, 237);
  border: 1px solid rgb(128, 128, 128);
  padding: 4rem;
  margin-top: 1rem;
}

.fabricThumbs .messageBox p {
  font-size: 1.6rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 400;
}

.fabricThumbs .fabricThumbItem {
  width: 25%;
  padding: 1rem;
  display: block;
  float: left;
}

.fabricThumbs .fabricThumbItem .fabricThumbImage {
  width: 100%;
  padding-bottom: 120%;
  margin-bottom: 1rem;
  position: relative;
}

.fabricThumbs .fabricThumbItem .fabricThumbText {
  width: 100%;
  height: 3.2rem;
}

.fabricThumbs .fabricThumbItem .fabricThumbText h2.styleh3 {
  font-size: 1.4rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
}

.pageBuffer {
  transition: all 0.4s ease;
}

.pageBufferPad {
  width: 100%;
  height: 6rem;
}

.fabricThumbSheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.fabricThumbItem:hover .fabricThumbSheerEdge {
  opacity: 1;
}

.fabricThumbItem:hover .fabricThumbText h3 {
  color: black;
}


.fabricThumbsNavigation {
  background-color: white;
}

.fixMe {
  z-index: 30;
}

.fabricThumbsNavigation h2 {
  font-size: 1.6rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  /* border-bottom: 1px solid rgb(128,128,128); */
  color: rgb(128, 128, 128);
  padding-bottom: 1rem;
  padding-left: 1.8rem;
  text-transform: uppercase;
}

.fabricThumbsNavigation ul {
  padding-top: 1.2rem;
}

.fabricThumbsNavigation ul li {
  font-size: 1.4rem;
  line-height: 100%;
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  float: left;
  margin-right: 2rem;
}

.fabricThumbsNavigation ul li:after {
  content: "";
  display: table;
  clear: both;
}

.fabricThumbsNavigation ul li a {
  color: rgb(128, 128, 128);
  padding-left: 0;
}

/* .fabricThumbsNavigation ul li a::before { content:''; width:1.4rem; height:1.4rem; background-image: url(/gfx/korlaBullet.gif); background-repeat: no-repeat; background-size: contain; float: left; margin-right: 0.4rem; visibility: hidden; margin-top: 0.1rem;} */

.fabricThumbsNavigation ul li a:hover,
.fabricThumbsNavigation ul li a.selected {
  color: black;
}

/* .fabricThumbsNavigation ul li a:hover::before, .fabricThumbsNavigation ul li a.selected::before { visibility: visible; } */

.fabricThumbsNavigation ul {
  float: left;
}


.fabricThumbsNavigation .coloursHead {
  font-size: 1.6rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1rem;
  border-bottom: none;
  color: rgb(128, 128, 128);
  padding-bottom: 0.6rem;
  padding-left: 1.4rem;
}

.collectionHeader {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom:
}

.collectionHeaderTextColumn {
  width: 30%;
  height: 46rem;
  float: left;
  background-color: rgb(155, 155, 155);
}

.collectionHeaderImageColumn {
  width: 70%;
  height: 46rem;
  float: right;
}

.collectionHeaderTextColumn {
  padding: 4rem;
}

.collectionHeaderTextColumn h1 {
  font-size: 2.3vw;
  line-height: 120%;
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.2vw;
  text-transform: uppercase;
  color: white;
  font-stretch: expanded;
}

.collectionHeaderTextColumn p {
  font-size: 1.5vw;
  line-height: 170%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 0;
  color: white;
}

.alsoLike {
  max-width: 121rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 0;
  padding-right: 0;
}

.alsoLike h3.styleh1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem
}


.galleryStripHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  height: 6.4rem;
}

.galleryStripHeader h1 {
  font-size: 2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.galleryStrip {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 4rem;
}


.galleryStrip .item {
  float: left;
  position: relative;
}

.galleryStrip .item {
  width: 12.5%;
  display: block;
  float: left;
  padding-bottom: 12.5%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
}

.galleryStrip .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.galleryStrip .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 15%;
  background-position: center center;
  background-repeat: no-repeat;
}


.galleryStripBottom {
  margin-bottom: 0;
}


.dropbtn {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  border: 1px solid rgb(128, 128, 128);
  padding: 1rem;
  padding-right: 4rem;
  padding-left: 1.7rem;
  width: 25rem;
  display: block;
  box-sizing: border-box;
}

.dropbtn {
  background-image: url(/gfx/downArrow.png);
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
}

.branded {
  color: black;
}

.dropdown {
  float: right;
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: calc(1.4rem + 20% + 1.2rem);
  /*   background-color: #f1f1f1; */
  z-index: 1;
  border: 1px solid rgb(128, 128, 128);
  width: 25rem;
  padding-top: 1.2rem;
  background-color: rgba(255, 255, 255, 0.95);

}

.dropdown-content a {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  width: 100%;
  padding-left: 1.4rem;
  margin-bottom: 1.2rem;
  /*
  padding-left: 1.8rem;
    padding-right: 1.8rem;

  padding-top:0.8rem;
  padding-bottom: 0.8rem;
  text-decoration: none;
*/
  display: block;
  /*
  text-align: left;
  font-weight: 300; text-transform: uppercase; font-size: 1.6rem; line-height: 120%;
*/
}

.dropdown-content a:hover,
.dropdown-content .selected {
  color: black;
}

.subSelected {
  background-color: #f1f1f1 !important;
  color: black !important;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  color: black;
  background-color: rgb(237, 237, 237);
}

/* end new */



/* fabric detail page */

.fabric {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fabric .fabricProduct {
  float: left;
  width: 60%;
}

.fabric .fabricProduct .col1 .item {
  position: relative;
  border: 0.6rem solid white;
}

.fabric .fabricProduct .col1 .item {
  width: 100%;
  display: block;
  padding-bottom: calc(120% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
}

.fabricProduct .col1 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fabricProduct .col1 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 4%;
  background-position: center center;
  background-repeat: no-repeat;
}



.fabric .fabricInfo {
  float: right;
  width: 40%;
  padding-left: 2rem;
}

.fabric .fabricInfo .col1 {
  width: 100%;
}

.fabricInfo .col2 {
  width: 100%;
}

.fabric .fabricInfo .col2 .item {
  float: left;
  position: relative;
  border: 0.6rem solid white;
}

.fabric .fabricInfo .col2 .item {
  width: 25%;
  display: block;
  float: left;
  padding-bottom: calc(25% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: 200%;
}

.fabric .fabricInfo .col2 .itemNone {
  width: 25%;
  display: block;
  float: left;
  padding-bottom: calc(25% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: 200%;
  float: left;
  position: relative;
  border: 0.6rem solid white;
  filter: grayscale(100%);
  opacity: 0.15;
  position: relative;
}




.fabric .fabricInfo .col2 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fabric .fabricInfo .col2 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/link.png);
  background-size: 19%;
  background-position: center center;
  background-repeat: no-repeat;
}

/* .fabricInfo .col2 .item:nth-of-type(n+4) {display: none;} */

.fabric .fabricInfo h1 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.fabric .fabricInfo h2 {
  font-size: 1.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  padding-top: 0.6rem;
  margin-right: 0.6rem;
  margin-left: 0.6rem;
}

.fabric .fabricInfoTable {
  width: 100%;
}

.fabric .fabricInfoTable td:nth-of-type(odd),
.fabricInfo .title {
  width: 35%;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.fabric .fabricInfoTable td:nth-of-type(even) {
  width: 65%;
  color: black;
}

.fabric .fabricInfoTable tr:first-of-type {
  text-transform: uppercase;
}

.fabric .fabricInfoTable td {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.fabric .fabricInfoTable td {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
}

.fabric .fabricInfo .title {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 0.5rem;
}

.fabric .fabricInfo .topInfo {
  border-bottom: 1px solid #999999;
  padding-bottom: 1.2rem;
  margin-bottom: 2.2rem;
}

.fabric .fabricInfo .botInfo {}

.fabric .fabricInfo .buttons {
  padding-top: 1rem;
}

.fabric .fabricInfo .buttonBase {
  display: block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
}

.fabric .fabricInfo .buttonFavourites {
  color: white;
  background-color: rgba(32, 17, 53, 0.5);
  width: 100%;
}

.fabric .fabricInfo .buttonFavourites img {
  height: 1.6rem;
  vertical-align: middle;
  display: inline-block;
  margin-right: 1rem;
}

.fabric .fabricInfo .buttonFavourites:hover {
  background-color: rgba(32, 17, 53);
}

.fabric .fabricInfo .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.fabric .fabricInfo .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.fabric .fabricInfo .buttonLimit {
  color: white;
  background-color: #A34C24;
  cursor: not-allowed;
}

.fabric .fabricInfo .buttonLimit:hover {
  color: white;
  background-color: #A34C24;
  cursor: not-allowed;
}

.buttonAction,
.goButtons {
  margin-bottom: 2rem;
}

.fabric .fabricInfo .buttonStockist {
  color: white;
  background-color: #A7A59B;
}

.fabric .fabricInfo .buttonStockist:hover {
  color: white;
  background-color: #7F7F65;
}

.fabric .fabricInfo .buttonBack {
  color: white;
  background-color: #88A9C4;
}

.fabric .fabricInfo .buttonBack:hover {
  color: white;
  background-color: #618AB5;
}

.fabric .fabricInfo a {
  margin-right: 0;
}

.fabric .fabricInfo a:last-of-type {
  margin-right: 0;
}

.fabric .fabricInfo .description {
  margin-bottom: 3rem;
}

.fabric .fabricInfo .description p {
  font-size: 1.8rem;
  line-height: 190%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.fabric .fabricInfo .description p a {
  color: black;
  font-weight: 300;
}

.fabric .fabricInfo .description p a:hover {
  color: black;
  text-decoration: underline;
  /* background-color:rgb(240,240,240); */
}


.boxIn {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid black;
}

.fabric .fabricInfo .goFavourites {
  color: grey;
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: left center;
  width: 49%;
  padding-left: 3rem;
  text-align: left;
  display: block;
  float: left;
  background-image: url(/gfx/heartPurple.png);
}

.fabric .fabricInfo .goBack {
  color: grey;
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: left center;
  width: 49%;
  padding-left: 3rem;
  text-align: left;
  display: block;
  float: right;
  background-image: url(/gfx/caterpillarPurple.png)
}

.fabric .fabricInfo .goFavourites:hover,
.fabric .fabricInfo .goBack:hover {
  color: black;
  background-repeat: no-repeat;
  background-size: 12%;
}

.fabEnquire {
  margin-bottom: 1rem;
}

.fabEnquire p {
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.fabEnquire a {
  font-size: 1.8rem;
  line-height: 120%;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  color: black;
}

/* cart */


.cartHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.cartHeaderTextBlock {
  max-width: 80rem;
}

.cartHeader h1 {
  font-size: 2.8rem;
  line-height: 130%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.cartHeader p {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.cartTable {
  max-width: 80rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
}

.cartTable table {
  width: 100%;
}

.cartTable td {
  font-size: 1.8rem;
  line-height: 130%;
  text-align: left;
  font-weight: 400;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
  vertical-align: middle;
}

.cartTable td:nth-of-type(1) {
  width: 16.8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.cartTable td:nth-of-type(2) {
  width: calc(100% - 21.8rem);
  text-align: left;
  padding-left: 2rem;
  padding-right: 2rem;
}

.cartTable td:nth-of-type(3) {
  width: 5rem;
  text-align: right;
}

.cartTable .tableImage {
  padding-bottom: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: cover;
}

.sheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-image: url(/gfx/sheerEdge.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cartTable .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem
}

.cartTable .buttonDelete {
  display: inline-block;
  padding: 0.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  border-radius: 0.6rem
}

.cartTable .buttonDelete {
  color: black;
  background-color: rgb(207, 207, 207);
  font-family: 'fa5-Solid';
  font-size: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
}

.cartTable .buttonDelete:hover {
  color: white;
  background-color: #A34C24;
}

.cartTable .buttonRow {
  margin-top: 2rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
  border-top: 1px solid #ccc;
}

.cartTable .buttonRow .item {
  float: left;
  padding: 1rem;
  width: 33.333333%;
  text-align: center;
}

.cartTable .buttonRow .item:last-of-type {
  margin-right: 0;
}

.cartTable .buttonRow .item p {
  font-size: 1.5rem;
  line-height: 130%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
  padding-top: 1rem;
}

.cartTable .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem
}

.cartTable .buttonBack {
  color: white;
  background-color: rgba(32, 17, 53, 0.5);
}

.cartTable .buttonBack:hover {
  color: white;
  background-color: rgba(32, 17, 53, 1);
}

.cartTable .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.cartTable .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.cartTable a {
  margin-right: 1rem;
}

.cartTable a:last-of-type {
  margin-right: 0;
}





/* checkout */
.checkout {
  max-width: 100rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.checkout .checkoutItems {
  width: 100%;
}

.checkout .checkoutItems h1 {
  font-size: 2.4rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem;
}

.checkout .checkoutItems h1 img {
  height: 2rem;
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 0.4rem;
}

.checkout .checkoutItems .item {
  width: 16.666666%;
  padding: 0.5rem;
  float: left;
}

/* .checkout .checkoutItems item td:nth-of-type(1) { width:10rem; padding-top: 0.4rem; padding-bottom: 0.4rem;} */
/* .checkout .checkoutItems table td:nth-of-type(2) { width:calc(100% - 16.8rem); text-align: left; padding-left: 2rem; padding-left: 2rem; } */

.checkout .checkoutItems .item .swatch {
  padding-bottom: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: cover;
  overflow: hidden;
}

.checkout .checkoutItems .item .name {
  opacity: 0;
  top: 100%;
  left: 10%;
  width: 100%;
  height: 64%;
  background-color: rgb(255, 255, 255, 0.85);
  position: absolute;
  z-index: 3;
  padding: 1rem;
  transition: all 0.4s ease;
  padding-right: 2rem;
}

/* .checkout .checkoutItems .item .name p {font-size: 1.4rem; line-height: 130%; text-align: left; font-weight: 400; color:rgb(128,128,128); text-transform: uppercase;  padding:0.4rem;} */
.checkout .checkoutItems .item .name p {
  font-family: 'Caveat', cursive;
  font-size: 2rem;
  line-height: 100%;
  text-align: left;
  font-weight: 400;
  color: #A34C24;
  padding: 0.4rem;
}




.checkout .checkoutItems .item .swatch:hover .name {
  opacity: 1;
  top: 36%;
  transform: rotate(13deg);
}

.addressForm {
  max-width: 70rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}



/* pay */

.payArea {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  letter-spacing: 0.05rem;
}

.contactBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.5);
}


/* stockist */

.stockist {
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
}

.stockist .country {
  width: 100%;
  padding-bottom: 2rem;
}

.stockist .company {
  float: left;
  width: 33.333333%;
  padding: 1rem;
  min-height: 14.8rem;
}

.stockist h1 {
  font-size: 2.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  margin: 1rem;
}

.stockist h2 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  padding: 1rem;
}

.stockist h3 {
  font-size: 1.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 0.6rem;
}

.stockist p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: left;
  font-weight: 300;
  color: black;
}

.stockist p span {
  font-family: 'fa5-Solid';
  font-weight: normal;
  font-style: normal;
  color: rgba(32, 17, 53, 0.5);
  width: 2.6rem;
  display: inline-block;
}

.stockist a {
  color: rgba(32, 17, 53, 0.5);
}

.stockist a:hover,
.stockist a:hover span {
  color: rgba(32, 17, 53, 1);
}


/* shipping (used on pay) */
.shipping {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.shipping .charge p,
.payArea .charge p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
  font-weight: 300;
  color: black;
}

.shipping .charge p strong,
.payArea .charge p strong {
  font-weight: 400;
}

.shipping .charge h2 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.shipping .charge p:first-of-type {
  font-size: 2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  color: black;
  margin-bottom: 2rem;
}

.shipping .charge p:first-of-type span {
  color: #A34C24;
  font-weight: 400;
}

.payArea .charge img {
  width: 100%;
  margin-bottom: 2rem;
}

.payBorder {
  border: 1px solid rgb(153, 153, 153);
  background-color: white;
  padding: 3rem;
  border-radius: 0.8rem;
}

.payArea .charge h2 {
  font-size: 1.8rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

/* social */

.social {
  margin-bottom: 4rem;
}

.social .socialIcon {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 1rem;
}

.social .facebook {
  background-image: url(/social/facebook.png);
  filter: grayscale(100%);
  opacity: 0.5;
}

.social .twitter {
  background-image: url(/social/twitter.png);
  filter: grayscale(100%);
  opacity: 0.5;
}

.social .instagram {
  background-image: url(/social/instagram.png);
  filter: grayscale(100%);
  opacity: 0.45;
}

.social .pinterest {
  background-image: url(/social/pinterest.png);
  filter: grayscale(100%);
  opacity: 0.35;
}

.social .socialIcon:hover {
  filter: none;
  opacity: 1;
}

.social .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem;
  margin-right: 1rem;
}

.social .buttonStandard {
  color: white;
  background-color: rgb(186, 186, 186);
}

.social .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.social .buttonStandard img {
  display: inline-block;
  height: 1.6rem;
  vertical-align: middle;
  margin-right: 0.6rem;
}

.socialPad {
  width: 100%;
  padding-bottom: 4rem;
}

/* logins */

.loginBgd {
  background-image: url(/gfx/loginBack.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.loginArea {
  max-width: 60rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.loginBlock {
  /* border: 1px solid rgb(153,153,153); */
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.9);
}

/* form */
form {
  padding-top: 0;
  max-width: 100%;
}

form .row {
  margin-bottom: 2rem;
}

form .plusMargin {
  margin-bottom: 1rem;
}

form label,
form p,
.label {
  font-size: 1.8rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  display: block;
  margin-bottom: 0.5rem;
}

form a {
  color: #A34C24;
  font-weight: 400;
}

form a:hover {
  color: black;
}

form .offsetLabel {
  display: inline-block !important;
}

form .offsetLabel::after {
  content: " ";
  display: inline-block;
  width: 2rem;
}

form .floatLabel {
  display: block;
  float: left;
  width: 90%;
}

form .floatCheckbox {
  display: block;
  float: left;
  margin-right: 0.6rem;
}

form .left {
  float: left;
  width: 47.5%;
}

form .right {
  float: right;
  width: 47.5%;
}

form .left2 {
  float: left;
  width: 70%;
}

form .right2 {
  float: right;
  width: 30%;
  padding-top: 2%;
}

form .right2 img {
  width: 100%;
  vertical-align: middle;
}

form input[type=text],
form input[type=password],
form .emptyBox,
#card_number,
#card_expiry,
#card_cvc {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: block;
  font-style: normal;
  font-size: 1.8rem;
  color: #000;
  padding: 1.4rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}


form textarea {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: block;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 130%;
  color: #000;
  padding: 1.4rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}


/* #card_number, #card_expiry, #card_cvc */


/* #form input[type=text], #form input[type=submit], #form input[type=password], #form textarea {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } */
form input[type=text]:focus,
form input[type=password]:focus,
form textarea:focus {
  border: 1px solid #A34C24;
  outline: none;
  -webkit-appearance: none;
}

input[type=button],
input[type=submit],
input[type=reset],
form .btn {
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}

form .btn {
  background-color: rgba(32, 17, 53, 0.5);
}

form input[type=submit]:hover,
form .btn:hover {
  background-color: black;
  color: white;
}

form .btncenter {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

form label span {
  font-size: 1.8rem;
  line-height: 2rem;
  color: #A34C24;
}



form input[type=checkbox] {
  height: 1.8rem;
  width: 1.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid rgb(128, 128, 128);
  border-radius: 0.4rem;
  outline: none;
  transition-duration: 0.3s;
  background-color: none;
  cursor: pointer;
  vertical-align: text-bottom;
  display: inline-block;
  position: relative;
  padding-right: 1rem;
}

form input[type=checkbox]:checked {
  border: 1px solid rgb(128, 128, 128);
  background-color: #eee;
}

form input[type=checkbox]:checked::before {
  content: '\2713';
  font-size: 1.6rem;
  font-weight: 400;
  display: block;
  text-align: center;
  color: #A34C24;
  position: absolute;
  left: 0.2rem;
  top: -0.1rem;
}


.filled {
  background-color: rgba(0, 0, 0, 0.05);
}


form textarea {
  display: block;
  min-height: 10rem;
}

form .greyed {
  display: none;
}


form input[type=checkbox],
form input[type=radio],
form input[type=text],
form button {
  box-shadow: none;
  outline: none;
}


.alert {
  border: 1px solid #A34C24;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: rgb(242, 228, 213, 0.5);
  margin-bottom: 2rem;
}

.alert p {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 130%;
  margin-bottom: 0;
}

.alert a {
  color: #A34C24;
  font-weight: 400;
}

.alert a:hover {
  color: black;
}

#paymentResponse p {
  border: 1px solid #A34C24;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: rgb(242, 228, 213, 0.5);
  margin-bottom: 2rem;
  margin-top: 2rem;
}

#paymentResponse p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 110%;
}

.select-css {
  display: block;
  font-size: 1.6rem;
  font-family: sans-serif;
  font-weight: 400;
  color: #444;
  line-height: 1.3;
  padding: 1.4rem 2.4rem;
  width: 100%;
  max-width: 100%;
  /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgb(153, 153, 153);
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
  box-shadow: none;

  border-radius: 0.8rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
 
  background-image: url('/gfx/selectArrow.png'),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right .7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 1.2rem auto, 100%;
}

/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}

/* Hover style */
.select-css:hover {
  border-color: #888;
}

/* Focus style */
.select-css:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

/* Set options to normal weight */
.select-css option {
  font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css,
:root:lang(ar) .select-css,
:root:lang(iw) .select-css {
  background-position: left .7em top 50%, 0 0;
  padding: .6rem .8rem .5rem 1.4rem;
}

/* Disabled styles */
.select-css:disabled,
.select-css[aria-disabled=true] {
  color: graytext;
  background-image: url('/gfx/selectArrow.png'),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

.select-css:disabled:hover,
.select-css[aria-disabled=true] {
  border-color: #aaa;
}

/* payment */

.status {
  padding-top: 4rem;
  padding-bottom: 4rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.status p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
  font-weight: 300;
  color: black;
}

.status p strong {
  font-weight: 400;
}

.status p span {
  text-transform: uppercase;
}

.status h1 {
  font-size: 3rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.status h2 {
  font-size: 2.2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 0.5rem;
  margin-top: 3rem;
}

.status .error {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.status .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem;
  margin-top: 3rem;
}

.status .buttonBack {
  color: white;
  background-color: #88A9C4;
}

.status .buttonBack:hover {
  color: white;
  background-color: #618AB5;
}

.status .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.status .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.status .success {
  color: #34A853;
}

.status .error {
  color: #bf3838;
}



/* gallery */

.gallery {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
}

.gallery .item {
  position: relative;
  border: 0.6rem solid white;
}

.gallery .item {
  width: 25%;
  display: block;
  padding-bottom: 33%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
  float: left;
}

.gallery .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.gallery .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 8%;
  background-position: center center;
  background-repeat: no-repeat;
}





/* footer */
.footer {
  max-width: 128rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 3rem;
  letter-spacing: 0.05rem;
}

.footer .col {
  width: 25%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer .col:nth-of-type(1) {
  width: 17%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer .col:nth-of-type(3) {
  width: 33%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer h3 {
  font-size: 1.5rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.footer h3 a {
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.footer h3 a:hover,
.footer h3 a.selected {
  color: black;
  text-transform: uppercase;
}

.footer ul li {
  font-size: 1.3rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer ul li a {
  color: rgb(128, 128, 128);
}

.footer ul li a:hover,
.footer ul li a.selected {
  color: black;
  /* text-decoration: underline; */
  background-color: none !important;
}

.footer .email {
  text-transform: none;
}

.signOff {
  max-width: 128rem;
  padding-left: 2rem;
  padding-right: 2rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.signOff p {
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
}




/* fresco (inline popup overrides) */
.fr-window {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

.fr-overlay-background {
  background: rgba(32, 17, 53, 0.9) !important;
  /*   opacity: 0.8; */

  /*   filter: alpha(opacity=90); */
}

.fr-overlay-ui-fullclick .fr-overlay-background {
  background: rgba(32, 17, 53, 0.9) !important;
  /*   filter: alpha(opacity=100); */

}


.fr-position-outside,
.fr-position-inside {
  font-size: 16px !important;
  line-height: 24px !important;
}

.fr-info {
  font-size: 16px;
  line-height: 24px;
}


/* Sprite */
.fr-window-skin-fresco .fr-side-button-icon,
.fr-window-skin-fresco .fr-close-icon,
.fr-window-skin-fresco .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.svg") !important;
}

/* fallback png sprite */
.fr-window-skin-fresco.fr-no-svg .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg .fr-close-icon,
.fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.png") !important;
}

.search {
  display: inline-block;
  width: 29rem;
}

.search button,
.search input[type="submit"],
.search input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.search button {
  background-image: url(/gfx/magPurpleTint.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

.search button {
  display: inline-block;
  width: 2rem;
  height: 3.1rem;
  vertical-align: bottom;
  margin-left: 0.5rem;
}

.search button:hover {
  color: black;
  background-image: url(/gfx/magPurple.png);
}

.headerNeg .search button:hover {
  color: white;
  background-image: url(/gfx/magWhite.png);
}

.search input[type=text] {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: inline-block;
  font-style: normal;
  font-size: 1.4rem;
  color: #000;
  padding: 0.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  border-radius: 0.4rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  width: 14rem;
}

.search input[type=text]:focus {
  border: 1px solid rgb(33, 17, 53);
}

/* .search label { font-size: 1.8rem; line-height: 120%; color: rgb(128,128,128); text-align: left; font-weight: 300;  display:inline-block; } */
.search label {
  display: inline-block;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: left;
  padding-right: 1rem;
  color: rgb(128, 128, 128);
  white-space: nowrap;
}




/* searchBlock */




.searchStripHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.searchStripHeader h1 {
  font-size: 2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.searchStripHeader p {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
}

.searchStripHeader p strong {
  font-weight: 600;
  color: rgb(32, 17, 53);
}


.searchBlock .searchThumbItem {
  width: 33.333333%;
  padding: 1rem;
  display: block;
  float: left;
}

.searchBlock .searchThumbItem .searchThumbImage {
  width: 100%;
  padding-bottom: 120%;
  margin-bottom: 1rem;
  position: relative;
}

.searchBlock .searchThumbItem .searchThumbText {
  width: 100%;
  height: 3.4rem;
}

.searchBlock .searchThumbItem .searchThumbText h3 {
  font-size: 1.4rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 400;
}




.searchThumbSheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0: right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.searchThumbItem:hover .searchThumbSheerEdge {
  opacity: 1;
}

.searchThumbItem:hover .searchThumbText h3 {
  color: black;
}








@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .collectionSliderTextColumn p {
    font-size: 1.4vw;
  }

  .collectionSliderTextColumn .webLink {
    padding: 0.9rem 1.8rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-weight: 300;
  }

  .collectionGrid .itemName {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    padding: 1.6rem;
    width: 50%;
    height: 7.6rem;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.4s ease;
    z-index: 2;
  }

  .collectionGrid .itemName h1 {
    font-size: 1.7rem;
    line-height: 120%;
    text-align: left;
    font-weight: 300;
    margin-bottom: 1vw;
    text-transform: uppercase;
    color: black;
    position: absolute;
    left: 1.6rem;
    top: 1.6rem;
  }

  .collectionText {
    position: absolute;
    top: 6rem;
    left: 0;
    padding: 4rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: all 0.2s ease;
    z-index: 20;
    display: block;
    width: 100%;
    visibility: hidden;
  }




  .dropbtn {
    font-size: 1.3rem;
    width: 22rem;
  }

  .dropdown-content {

    width: 22rem;


  }

  .dropdown-content a {
    font-size: 1.3rem;
  }


  .fabricThumbsNavigation ul li {
    font-size: 1.3rem;
  }

  .fabricThumbsNavigation ul li a::before {
    content: '';
    width: 1.4rem;
    height: 1.3rem;
  }

  .fabricThumbsNavigationColumn {
    width: 24rem;
  }

  .fabricThumbsColumn {
    width: calc(100% - 24rem);
  }

  .stockist .company {
    float: left;
    width: 33.333333%;
    padding: 1rem;
    min-height: 14.8rem;
  }
}




/* new */
  .buttonAvailableBase {
    display: block !important;
    padding: 1.2rem !important;
    padding-left: 5rem !important;
    font-size: 1.5rem !important;
    line-height: 120% !important;
    text-align: left !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: black;
    width: 100% !important;
    margin-top:1rem;
    text-align: left;
}


  .ba2:hover,   .ba5:hover,   .ba6:hover {
  opacity:0.8;  
}
.fabric .fabricInfo h1 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.subFabric {
  display: block !important;
  padding: 1.2rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  font-size: 1.5rem !important;
  line-height: 120% !important;
  text-align: center !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: white;
  width: 100% !important;
  margin-bottom: 1rem;
}
.subFabric:hover {
  opacity: 1 !important;
}

.fabricThumbsNavigation ul li a {
  color: rgb(128, 128, 128);
  padding-left: 0;
  display:inline-block;
  padding: 1rem;
  padding-left:1.4rem;
  padding-right:1.4rem;
}

.fabricThumbsNavigation ul li a:hover,
.fabricThumbsNavigation ul li a.selected {
  color: black;
  border: 1px solid black;
  padding: 0.8rem;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  }
.fabricThumbsNavigation ul {
  float: left;
  padding-top: 0;
}





/* new video code */

.fabric .fabricProduct .col2 {
  width: 100%;
}


/* Standard image tiles */
.fabric .fabricProduct .col2 .item {
  width: 33.333333%;
  display: block;
  padding-bottom: calc(40% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border: 0.6rem solid white;
  float: left;
  box-sizing: border-box;
}


/* Image Fresco overlay */
.fabric .fabricProduct .col2 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


.fabric .fabricProduct .col2 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 11%;
  background-position: center center;
  background-repeat: no-repeat;
}



/* Video tile */
.fabric .fabricProduct .col2 .videoItem {
  width:33.333333%;
  display:block;
  padding-bottom:calc(40% - 1.2rem);
  position:relative;
  overflow:hidden;
  border:0.6rem solid white;
  float:left;
  box-sizing:border-box;
}


.fabric .fabricProduct .col2 .videoBackground {
  position:absolute;
  inset:-20px;
  background-size:cover;
  background-position:center;
filter:none;
  transform:scale(1.15);
opacity:0.45;
}


.fabric .fabricProduct .col2 .fabricVideo {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:contain;
  z-index:2;
}



/* .fabric .fabricProduct .col2 .videoItem video {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  background: #eee;
} */



/* Fake placeholder tiles */
.fabric .fabricProduct .col2 .itemNone {
  width: 33.333333%;
  display: block;
  padding-bottom: calc(40% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border: 0.6rem solid white;
  filter: grayscale(100%);
  opacity: 0.15;
  float: left;
  box-sizing: border-box;
}



.fabricThumbHoverImage {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.fabricThumbItem:hover .fabricThumbHoverImage {
  opacity: 1;
}



.gallery .videoItem {
  position:relative;
  float:left;
  width:25%;
  padding-bottom:33%;
  overflow:hidden;
  background:#eee;
  box-sizing:border-box;
}
.gallery .videoItem {
  position: relative;
  border: 0.6rem solid white;
}


.gallery .videoBackground {
  position:absolute;
  /* inset:-20px; */
  background-size:cover;
  background-position:center;
  transform:scale(1.15);
  filter:blur(16px);
  opacity:.35;
}

.gallery .galleryVideo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  z-index:2;
}

.newDesign {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 5.2rem;
  height: 5.2rem;
  background-image: url('/gfx/newIcon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
}
}
/* desktop.css */
@media (min-width: 1024px) {
@charset "UTF-8";

html,
body {
  font-size: 10px;
  position: relative;
}

.desktop {
  display: block;
}

.smart {
  display: none;
}


.flexCentreCentre {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexLeftCentre {
  display: flex;
  justify-content: left;
  align-items: center;
}

.flexRightCentre {
  display: flex;
  justify-content: right;
  align-items: center;
}

.flexLeftBottom {
  display: flex;
  justify-content: left;
  align-items: baseline;
}

.fixed {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
}

.fixedOffset {
  height: calc(6.2rem + 11.6rem);
  width: 100%;
  display: block;
}

.fixedOffsetNeg {
  height: 6.2rem;
  width: 100%;
  display: block;
}

.greyBg {
  background-color: rgb(233, 233, 233);
}

.ltGreyBg {
  background-color: rgb(237, 237, 237);
}

.whiteBg {
  background-color: rgb(255, 255, 255);
}

.mb8 {
  margin-bottom: 0.8rem;
}

.borderLR8 {
  border-left: 0.8rem solid white;
  border-right: 0.8rem solid white;
}

.borderLRT8 {
  border-left: 0.8rem solid white;
  border-right: 0.8rem solid white;
  border-top: 0.8rem solid white;
}

.shadHeader {
  box-shadow: 0px 1px 2px 0px rgba(50, 50, 50, 0.15);
  transition: all 0.4s ease;
}

.padBoth4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.korlaGrey {
  color: rgb(155, 155, 155);
}

.mb4 {
  margin-bottom: 4rem;
}

.linkBand {
  padding-left: 4rem;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}

.linkBand {
}

.linkBand ul {
  float: right;
  display: table;
}

.linkBand ul li {
  height: 5.4rem;
  width: auto;
  display: inline-block;
  padding-left: 2rem;
  border-left: 2px solid white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-right: 2rem;
  display: table-cell;
  vertical-align: bottom;
  position: relative;
}

.linkBand ul li:first-of-type {
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.2rem;
  line-height: 120%;
  border-left: none;
}

.linkBand img {
  height: 3.4rem;
  width: auto;
  display: block;
  transition: all 0.4s ease;
}

.linkBand a {
  display: block;
  box-sizing: border-box;
}

.linkBand a:hover img {
  transform: scale(1.1);
}

.linkBand a:hover .linkBandScreen {
  display: block;
}

.linkBandScreen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.08);
  z-index: 102;
  display: none;
}

.header {
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  transition: all 0.4s ease;
  height: 11.6rem;
}

.headerNeg {
  background-color: rgba(0, 0, 0, 0.85);
}

.headerNotNeg {
  background-color: white;
}

.header .logo {
  float: left;
  transition: all 0.4s ease;
  padding-top: 4rem;
}

.header .logo img {
  transition: all 0.4s ease;
  height: 3rem;
}

.header .navigation {
  width: calc(100% - 38rem);
  float: right;
  display: block;
}

.header .navigation .functional {
  width: 100%;
  text-align: right;
  padding-top: 2.8rem;
  padding-bottom: 1.4rem;
  transition: all 0.4s ease;
  overflow: visible;
}

.header .navigation .functional .basket {
  position: relative;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  overflow: visible;
}

.header .navigation .functional .basket {
  display: inline-block;
  margin-left: 4rem;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: right;
  padding-left: 3rem;
  color: rgb(128, 128, 128);
}

.header .navigation .functional .basket img {
  width: 1.4rem;
  height: auto;
  position: absolute;
  left: 1.3rem;
  top: -0.6rem;
}

.header .navigation .functional .basket:hover,
.header .navigation .functional .basket .selected {
  color: black;
  background-image: url(/gfx/heart-full.png);
}

.headerNeg .navigation .functional .basket:hover,
.headerNeg .navigation .functional .basket .selected {
  color: white;
  background-image: url(/gfx/heart-full.png);
}




.header nav {}

.header nav ul {
  float: right;
}

.header nav ul li {
  display: inline-block;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: right;
  padding-left: 1.4rem;
  padding-right: 1.4rem;
  transition: all 0.4s ease;
}

.header nav ul li:last-of-type {
  padding-right: 0;
}

.header nav ul li a {
  color: rgb(128, 128, 128);
}

.header nav ul li a:hover,
.header nav ul li a.selected {
  color: black;
}

.headerNeg nav ul li a:hover,
.headerNeg nav ul li a.selected {
  color: white;
}





/* header shrink */
.header-shrink {
  height: 7.8rem !important;
}

.header-logo-shrink {
  padding-top: 3rem !important;
}

.header-logo-img-shrink {
  height: 2rem !important;
}

.header-functional-shrink {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.offset-sub-shrink {
  height: calc(9rem + 4.2rem + 2.3rem) !important;
}

.offset-nosub-shrink {
  height: calc(9rem + 4.2rem) !important;
}

.offset-subPlus-shrink {
  height: calc(9rem + 4.2rem + 3.1rem) !important;
}

.txtSlice {
  max-width: 128rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.txtSliceNarrow {
  max-width: 100rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.txtSliceNarrow2 {
  max-width: 90rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.genTxt h1 {
  font-size: 2.8rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.genTxt p {
  font-size: 1.8rem;
  line-height: 190%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.genTxt p a {
  color: black;
  font-weight: 300;
}

.genTxt p a:hover {
  color: black;
  text-decoration: underline;
  /* background-color:rgb(240,240,240); */
}

.genTxt .webLink {
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  text-decoration: none;
}

.genTxt .webLink:hover {
  color: white;
  background-color: black;
  text-decoration: none;
}

.moreBtn {
  display: inline-block;
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  margin-left: auto;
  margin-right: auto;
}

.genTxt ul {
  margin-bottom: 2rem;
}

.genTxt ul li {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 140%;
  margin-bottom: 1rem;
  color: rgb(128, 128, 128);
}

.genTxt ul li {
  padding-left: 4rem;
  position: relative;
}

.genTxt ul li:before {
  content: "\2022";
  width: 2rem;
  display: block;
  position: absolute;
  top: 0rem;
  left: 0;
  padding-left: 0;
  font-weight: 500;
  font-size: 2.4rem;
  color: black;
}


.genTxt ol {
  margin-bottom: 2rem;
  counter-reset: my-awesome-counter;
}

.genTxt ol li {
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 120%;
  margin-bottom: 1rem;
  /* color: #ABACAE;  */
  counter-increment: my-awesome-counter;
}

.genTxt ol li {
  padding-left: 4rem;
  position: relative;
}

.genTxt ol li:before {
  content: counter(my-awesome-counter);
  width: 2rem;
  display: block;
  position: absolute;
  top: 0.265rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
}

.genTxt strong {
  font-weight: 400;
}


/* home page */

.homeSlider {
  padding-bottom: 60%;
}

.homeImageBox {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 80;
  background-color: rgba(32, 17, 53, 0.5);
}

.sliderBox {
  top: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 90;
}

.sliderBox div {
  width: 36%;
  text-align: center;
}

.sliderBox img {
  width: 100%;
}

.sliderBox h1 {
  font-weight: 300;
  text-transform: uppercase;
  color: white;
  font-size: 3.2rem;
  padding-top: 2rem;
}

.lightBg {
  background-color: rgb(242, 242, 242);
}

.homeIntro {
  max-width: 112rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.homeIntro h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem;
}

.homeIntro p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.homeIntro .btn {
  display: inline-block;
  padding: 1.4rem;
  padding-left: 5.4rem;
  padding-right: 5.4rem;
  font-size: 1.6rem;
  line-height: 100%;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  border: 1px solid rgb(128, 128, 128);
  background-color: white;
  text-align: center;
  margin-top: 3.2rem;
}

.homeIntro .btn:hover {
  color: white;
  border: 1px solid white;
  background-color: rgb(32, 17, 53);
}


.homeTypes {
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.homeTypes .item {
  width: 33.333333%;
  padding: 2rem;
  float: left;
}

.homeTypes .imgArea {
  display: block;
  padding-bottom: 110%;
  width: 100%;
  overflow: hidden;
}

.homeTypes .captionBack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6.4rem;
  //background-color: rgba(32, 17, 53, 0.7);
  transition: all 0.4s ease;
}

.homeTypes .caption {
  position: absolute;
  left: 3rem;
  top: 89%;
  font-size: 2rem;
  line-height: 100%;
  text-transform: uppercase;
  color: white;
  font-weight: 300;
  transition: all 0.4s ease;
}

.homeTypes .textBlock {
  display: block;
  position: absolute;
  left: 3rem;
  top: 100%;
  transition: all 0.4s ease;
  width: calc(100% - 6rem);
}

.homeTypes .textBlock p {
  font-size: 1.6rem;
  line-height: 180%;
  color: white;
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
  transition: all 0.4s ease;
}

.homeTypes .imgArea:hover .captionBack {
  height: 100%;
}

.homeTypes .imgArea:hover .textBlock {
  display: block;
  top: 7rem;
}

.homeTypes .imgArea:hover .caption {
  top: 3rem;
  bottom: auto;
}

.homeTypes .goArrow {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 100%;
  color: rgb(32, 17, 53);
  text-align: left;
  text-transform: uppercase;
  padding: 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  background-color: rgba(255, 255, 255, 0.6);
  display: inline-block;
  margin-top: 2.8rem;
}

/* home Gallery */
.viewGallery {
  max-width: 124rem;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.viewGallery .txtArea {
  width: 80%;
  padding-bottom: 3rem;
  margin-left: auto;
  margin-right: auto;
}

.viewGallery .txtArea h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem
}

.viewGallery .txtArea p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.viewGallery .imgArea ul li {
  padding-bottom: 22%;
}

.actionButtonOuter {
  text-align: center;
  position: absolute;
  top: 0;
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  /* padding-top: 7.6%;  */
}

.actionButton {
  display: inline-block;
  padding: 2.4rem;
  padding-left: 7.2rem;
  padding-right: 7.2rem;
  font-size: 2rem;
  line-height: 100%;
  text-transform: uppercase;
  color: white;
  text-align: center;
  background-color: rgba(32, 17, 53, 0.7);
  font-weight: 300;
}

.actionButton:hover {
  background-color: rgba(32, 17, 53, 1);
  color: white;
}

.actionArea {
  background-color: rgba(32, 17, 53, 0.7);
  position: absolute;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
  display: none;
}


/* home Stockist */
.homeStockist {
  max-width: 81rem;
  margin-left: auto;
  margin-right: auto;
  display: block;
  background-color: rgba(32, 17, 53, 0.15);
  display: flex;
  border: 1px solid rgba(32, 17, 53, 1)
}

.homeStockist .imgArea {
  width: 50%;
  padding-bottom: 30%;
  float: left;
}

.homeStockist .txtArea {
  width: 50%;
  float: right;
}

.homeStockist h2 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 3rem;
  line-height: 100%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 0;
  text-decoration: none;
}

.homeStockist:hover {
  background-color: rgba(32, 17, 53, 1);
  display: flex;
  border: 1px solid rgba(32, 17, 53, 1)
}

.homeStockist:hover h2 {
  color: white;
  text-decoration: none;
}



/* lifestyle slider on fabric list page */
.lifeStyle {
  width: 50%;
  float: left;
}

.lifeStyle ul li {
  padding-bottom: 36%;
}

.dividingLine {
  padding-top: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid black;
  margin-left: 1rem;
  margin-right: 1rem;
}



/* about */
.fullWidthImage {
  width: 100%;
  padding-bottom: 52%;
}

.fullWidthImage .halfTint {
  position: absolute;
  bottom: 0;
  height: 12.5rem;
  width: 100%;
  display: block;
  background-color: rgba(32, 17, 53, 0.5);
}

.fullWidthImage .halfTint .caption {
  width: 100%;
  bottom: 0;
  padding-left: 10%;
}

.fullWidthImage .halfTint .caption {
  font-size: 3.6rem;
  line-height: 120%;
  color: white;
  text-align: left;
  font-weight: 300;
  margin-bottom: 4rem;
  text-transform: uppercase;
  position: absolute;
}

.titleStripe {
  max-width: 120rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 6rem;
}

.titleStripe h1 {
  font-family: 'Sorts Mill Goudy', serif;
  font-size: 4.2rem;
  line-height: 120%;
  text-align: center;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 0;
}

.textStripe {
  max-width: 112rem;
  margin-right: auto;
  margin-left: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.textStripe p {
  font-size: 1.6rem;
  line-height: 180%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.thirdStripe {
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.thirdStripe .item {
  width: 33.333333%;
  padding: 1rem;
  float: left;
}

.thirdStripe .item .image {
  width: 100%;
  padding-bottom: 80%;
}

.aboutPageStripe .aboutTextInner {
  padding-top: 4rem;
  padding-bottom: 3rem;
  padding-left: 8%;
  padding-right: 8%;
}


/* video wrapper */
.video {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



/* contact */

.contactBgd {
  background-image: url(/gfx/contactBg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  margin-bottom: 4rem;
  background-size: cover;
}

.contactArea {
  max-width: 60rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.contactBlock {
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.5);
}



/* legal */
.legalArea {
  max-width: 96rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  padding-bottom: 0;
  letter-spacing: 0.05rem;
  text-align: left;
}

.legalBlock {
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.9);
  text-align: left;
}

.legalTxt h1 {
  font-size: 2.8rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt h2 {
  font-size: 2.2rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt h3 {
  font-size: 1.8rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

.legalTxt p {
  font-size: 1.5rem;
  line-height: 130%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.legalTxt p a {
  color: black;
  font-weight: 300;
}

.legalTxt p a:hover {
  color: black;
  background-color: rgb(32, 17, 53);
}

.legalTxt ul {
  margin-bottom: 2rem;
}

.legalTxt ul li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 130%;
  margin-bottom: 1rem;
  color: rgb(128, 128, 128);
}

.legalTxt ul li {
  padding-left: 3rem;
  position: relative;
}

.legalTxt ul li:before {
  content: "\2022";
  width: 2rem;
  display: block;
  position: absolute;
  top: 0rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.5rem;
  color: rgb(32, 17, 53);
}


.legalTxt ol {
  margin-bottom: 2rem;
  counter-reset: my-awesome-counter;
}

.legalTxt ol li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 130%;
  margin-bottom: 1rem;
  counter-increment: my-awesome-counter;
}

.legalTxt ol li {
  padding-left: 4rem;
  position: relative;
}

.legalTxt ol li:before {
  content: counter(my-awesome-counter);
  width: 2rem;
  display: block;
  position: absolute;
  top: 0.265rem;
  left: 0;
  padding-left: 0;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 120%;
  color: rgb(32, 17, 53);
}

.legalTxt strong {
  font-weight: 400;
}


/* new */

.imageDefaults {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.imageDefaults2 {
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.imageDefaultsTop {
  background-position: center top, center top;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.fabricThumbsNavigation {
  padding-left: 4rem;
  padding-right: 4rem;
  width: 100%;
  padding-top: 2rem;
  padding-bottom: 0;
}

.fabricThumbs {
  width: 100%;
  padding-left: 3rem;
  padding-right: 3rem;
}

.fabricThumbs .messageBox {
  background-color: rgb(237, 237, 237);
  border: 1px solid rgb(128, 128, 128);
  padding: 4rem;
  margin-top: 1rem;
}

.fabricThumbs .messageBox p {
  font-size: 1.6rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 400;
}

.fabricThumbs .fabricThumbItem {
  width: 25%;
  padding: 1rem;
  display: block;
  float: left;
}

.fabricThumbs .fabricThumbItem .fabricThumbImage {
  width: 100%;
  padding-bottom: 120%;
  margin-bottom: 1rem;
  position: relative;
}

.fabricThumbs .fabricThumbItem .fabricThumbText {
  width: 100%;
  height: 3.2rem;
}

.fabricThumbs .fabricThumbItem .fabricThumbText h2.styleh3 {
  font-size: 1.4rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
}

.pageBuffer {
  transition: all 0.4s ease;
}

.pageBufferPad {
  width: 100%;
  height: 6rem;
}

.fabricThumbSheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0: right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.fabricThumbItem:hover .fabricThumbSheerEdge {
  opacity: 1;
}

.fabricThumbItem:hover .fabricThumbText h3 {
  color: black;
}


.fabricThumbsNavigation {
  background-color: white;
}

.fixMe {
  z-index: 30;
}

.fabricThumbsNavigation h2 {
  font-size: 1.6rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  color: rgb(128, 128, 128);
  padding-bottom: 1rem;
  padding-left: 1.8rem;
  text-transform: uppercase;
}

.fabricThumbsNavigation ul {
  padding-top: 1.2rem;
}

.fabricThumbsNavigation ul li {
  font-size: 1.4rem;
  line-height: 100%;
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  float: left;
  margin-right: 2rem;
}

.fabricThumbsNavigation ul li:after {
  content: "";
  display: table;
  clear: both;
}

.fabricThumbsNavigation ul li a {
  color: rgb(128, 128, 128);
  padding-left: 0;
}

.fabricThumbsNavigation ul li a:hover,
.fabricThumbsNavigation ul li a.selected {
  color: black;
}

.fabricThumbsNavigation ul {
  float: left;
}


.fabricThumbsNavigation .coloursHead {
  font-size: 1.6rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1rem;
  border-bottom: none;
  color: rgb(128, 128, 128);
  padding-bottom: 0.6rem;
  padding-left: 1.4rem;
}

.collectionHeader {
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom:
}

.collectionHeaderTextColumn {
  width: 30%;
  height: 46rem;
  float: left;
  background-color: rgb(155, 155, 155);
}

.collectionHeaderImageColumn {
  width: 70%;
  height: 46rem;
  float: right;
}

.collectionHeaderTextColumn {
  padding: 4rem;
}

.collectionHeaderTextColumn h1 {
  font-size: 2.3vw;
  line-height: 120%;
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.2vw;
  text-transform: uppercase;
  color: white;
  font-stretch: expanded;
}

.collectionHeaderTextColumn p {
  font-size: 1.5vw;
  line-height: 170%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 0;
  color: white;
}

.alsoLike {
  max-width: 121rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
  padding-left: 0;
  padding-right: 0;
}



.galleryStripHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  height: 6.4rem;
}

.galleryStripHeader h1 {
  font-size: 2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.galleryStrip {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 4rem;
}


.galleryStrip .item {
  float: left;
  position: relative;
}

.galleryStrip .item {
  width: 12.5%;
  display: block;
  float: left;
  padding-bottom: 12.5%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
}

.galleryStrip .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.galleryStrip .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 15%;
  background-position: center center;
  background-repeat: no-repeat;
}


.galleryStripBottom {
  margin-bottom: 0;
}


.dropbtn {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  border: 1px solid rgb(128, 128, 128);
  padding: 1rem;
  padding-right: 4rem;
  padding-left: 1.7rem;
  width: 25rem;
  display: block;
  box-sizing: border-box;
}

.dropbtn {
  background-image: url(/gfx/downArrow.png);
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
}

.branded {
  color: black;
}

.dropdown {
  float: right;
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  top: calc(1.4rem + 20% + 1.2rem);
  z-index: 1;
  border: 1px solid rgb(128, 128, 128);
  width: 25rem;
  padding-top: 1.2rem;
  background-color: rgba(255, 255, 255, 0.95);

}

.dropdown-content a {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  width: 100%;
  padding-left: 1.4rem;
  margin-bottom: 1.2rem;
  display: block;

}

.dropdown-content a:hover,
.dropdown-content .selected {
  color: black;
}

.subSelected {
  background-color: #f1f1f1 !important;
  color: black !important;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  color: black;
  background-color: rgb(237, 237, 237);
}

/* end new */



/* fabric detail page */

.fabric {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
}

.fabric .fabricProduct {
  float: left;
  width: 60%;
}

.fabric .fabricProduct .col1 .item {
  position: relative;
  border: 0.6rem solid white;
}

.fabric .fabricProduct .col1 .item {
  width: 100%;
  display: block;
  padding-bottom: calc(120% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
}

.fabricProduct .col1 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fabricProduct .col1 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 4%;
  background-position: center center;
  background-repeat: no-repeat;
}



.fabric .fabricInfo {
  float: right;
  width: 40%;
  padding-left: 4rem;
}

.fabric .fabricInfo .col1 {
  width: 100%;
}

.fabricInfo .col2 {
  width: 100%;
}

.fabric .fabricInfo .col2 .item {
  float: left;
  position: relative;
  border: 0.6rem solid white;
}

.fabric .fabricInfo .col2 .item {
  width: 25%;
  display: block;
  float: left;
  padding-bottom: calc(25% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: 200%;
}

.fabric .fabricInfo .col2 .itemNone {
  width: 25%;
  display: block;
  float: left;
  padding-bottom: calc(25% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: 200%;
  float: left;
  position: relative;
  border: 0.6rem solid white;
  filter: grayscale(100%);
  opacity: 0.15;
  position: relative;
}




.fabric .fabricInfo .col2 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.fabric .fabricInfo .col2 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/link.png);
  background-size: 19%;
  background-position: center center;
  background-repeat: no-repeat;
}

.fabric .fabricInfo h1 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.fabric .fabricInfo h2 {
  font-size: 1.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  padding-top: 0.6rem;
  margin-right: 0.6rem;
  margin-left: 0.6rem;
}

.fabric .fabricInfoTable {
  width: 100%;
}

.fabric .fabricInfoTable td:nth-of-type(odd),
.fabricInfo .title {
  width: 35%;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.fabric .fabricInfoTable td:nth-of-type(even) {
  width: 65%;
  color: black;
}

.fabric .fabricInfoTable tr:first-of-type {
  text-transform: uppercase;
}

.fabric .fabricInfoTable td {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.fabric .fabricInfoTable td {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
}

.fabric .fabricInfo .title {
  font-size: 1.4rem;
  line-height: 120%;
  text-align: left;
  font-weight: 400;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 0.5rem;
}

.fabric .fabricInfo .topInfo {
  border-bottom: 1px solid #999999;
  padding-bottom: 1.2rem;
  margin-bottom: 2.2rem;
}

.fabric .fabricInfo .botInfo {}

.fabric .fabricInfo .buttons {
  padding-top: 1rem;
}

.fabric .fabricInfo .buttonBase {
  display: block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
}

.fabric .fabricInfo .buttonFavourites {
  color: white;
  background-color: rgba(32, 17, 53, 0.5);
  width: 100%;
}

.fabric .fabricInfo .buttonFavourites img {
  height: 1.6rem;
  vertical-align: middle;
  display: inline-block;
  margin-right: 1rem;
}

.fabric .fabricInfo .buttonFavourites:hover {
  background-color: rgba(32, 17, 53);
}

.fabric .fabricInfo .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.fabric .fabricInfo .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.fabric .fabricInfo .buttonLimit {
  color: white;
  background-color: #A34C24;
  cursor: not-allowed;
}

.fabric .fabricInfo .buttonLimit:hover {
  color: white;
  background-color: #A34C24;
  cursor: not-allowed;
}

.buttonAction,
.goButtons {
  margin-bottom: 2rem;
}

.fabric .fabricInfo .buttonStockist {
  color: white;
  background-color: #A7A59B;
}

.fabric .fabricInfo .buttonStockist:hover {
  color: white;
  background-color: #7F7F65;
}

.fabric .fabricInfo .buttonBack {
  color: white;
  background-color: #88A9C4;
}

.fabric .fabricInfo .buttonBack:hover {
  color: white;
  background-color: #618AB5;
}

.fabric .fabricInfo a {
  margin-right: 0;
}

.fabric .fabricInfo a:last-of-type {
  margin-right: 0;
}

.fabric .fabricInfo .description {
  margin-bottom: 3rem;
}

.fabric .fabricInfo .description p {
  font-size: 1.8rem;
  line-height: 190%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  margin-bottom: 1.4rem;
}

.fabric .fabricInfo .description p a {
  color: black;
  font-weight: 300;
}

.fabric .fabricInfo .description p a:hover {
  color: black;
  text-decoration: underline;
}


.boxIn {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 1px solid black;
}

.fabric .fabricInfo .goFavourites {
  color: grey;
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: left center;
  width: 49%;
  padding-left: 3rem;
  text-align: left;
  display: block;
  float: left;
  background-image: url(/gfx/heartPurple.png);
}

.fabric .fabricInfo .goBack {
  color: grey;
  background-repeat: no-repeat;
  background-size: 10%;
  background-position: left center;
  width: 49%;
  padding-left: 3rem;
  text-align: left;
  display: block;
  float: right;
  background-image: url(/gfx/caterpillarPurple.png)
}

.fabric .fabricInfo .goFavourites:hover,
.fabric .fabricInfo .goBack:hover {
  color: black;
  background-repeat: no-repeat;
  background-size: 12%;
}

.fabEnquire {
  margin-bottom: 1rem;
}

.fabEnquire p {
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.fabEnquire a {
  font-size: 1.8rem;
  line-height: 120%;
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  color: black;
}

/* cart */


.cartHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.cartHeaderTextBlock {
  max-width: 80rem;
}

.cartHeader h1 {
  font-size: 2.8rem;
  line-height: 130%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.cartHeader p {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.cartTable {
  max-width: 80rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
}

.cartTable table {
  width: 100%;
}

.cartTable td {
  font-size: 1.8rem;
  line-height: 130%;
  text-align: left;
  font-weight: 400;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
  vertical-align: middle;
}

.cartTable td:nth-of-type(1) {
  width: 16.8rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.cartTable td:nth-of-type(2) {
  width: calc(100% - 21.8rem);
  text-align: left;
  padding-left: 2rem;
  padding-right: 2rem;
}

.cartTable td:nth-of-type(3) {
  width: 5rem;
  text-align: right;
}

.cartTable .tableImage {
  padding-bottom: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: cover;
}

.sheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-image: url(/gfx/sheerEdge.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cartTable .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem
}

.cartTable .buttonDelete {
  display: inline-block;
  padding: 0.8rem;
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  border-radius: 0.6rem
}

.cartTable .buttonDelete {
  color: black;
  background-color: rgb(207, 207, 207);
  font-family: 'fa5-Solid';
  font-size: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
}

.cartTable .buttonDelete:hover {
  color: white;
  background-color: #A34C24;
}

.cartTable .buttonRow {
  margin-top: 2rem;
  padding-top: 2rem;
  padding-bottom: 4rem;
  border-top: 1px solid #ccc;
}

.cartTable .buttonRow .item {
  float: left;
  padding: 1rem;
  width: 33.333333%;
  text-align: center;
}

.cartTable .buttonRow .item:last-of-type {
  margin-right: 0;
}

.cartTable .buttonRow .item p {
  font-size: 1.5rem;
  line-height: 130%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
  text-transform: uppercase;
  padding-top: 1rem;
}

.cartTable .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem
}

.cartTable .buttonBack {
  color: white;
  background-color: rgba(32, 17, 53, 0.5);
}

.cartTable .buttonBack:hover {
  color: white;
  background-color: rgba(32, 17, 53, 1);
}

.cartTable .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.cartTable .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.cartTable a {
  margin-right: 1rem;
}

.cartTable a:last-of-type {
  margin-right: 0;
}





/* checkout */
.checkout {
  max-width: 100rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.checkout .checkoutItems {
  width: 100%;
}

.checkout .checkoutItems h1 {
  font-size: 2.4rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128);
  margin-bottom: 1rem;
}

.checkout .checkoutItems h1 img {
  height: 2rem;
  vertical-align: middle;
  display: inline-block;
  margin-bottom: 0.4rem;
}

.checkout .checkoutItems .item {
  width: 16.666666%;
  padding: 0.5rem;
  float: left;
}


.checkout .checkoutItems .item .swatch {
  padding-bottom: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  background-size: cover;
  overflow: hidden;
}

.checkout .checkoutItems .item .name {
  opacity: 0;
  top: 100%;
  left: 10%;
  width: 100%;
  height: 64%;
  background-color: rgb(255, 255, 255, 0.85);
  position: absolute;
  z-index: 3;
  padding: 1rem;
  transition: all 0.4s ease;
  padding-right: 2rem;
}
.checkout .checkoutItems .item .name p {
  font-family: 'Caveat', cursive;
  font-size: 2rem;
  line-height: 100%;
  text-align: left;
  font-weight: 400;
  color: #A34C24;
  padding: 0.4rem;
}




.checkout .checkoutItems .item .swatch:hover .name {
  opacity: 1;
  top: 36%;
  transform: rotate(13deg);
}

.addressForm {
  max-width: 70rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 4rem;
}



/* pay */

.payArea {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0;
  letter-spacing: 0.05rem;
}

.contactBlock {
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.5);
}


/* stockist */

.stockist {
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
}

.stockist .country {
  width: 100%;
  padding-bottom: 2rem;
}

.stockist .company {
  float: left;
  width: 25%;
  padding: 1rem;
  min-height: 14.8rem;
}

.stockist h1 {
  font-size: 2.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: 1px solid #999999;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  margin: 1rem;
}

.stockist h2 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  padding: 1rem;
}

.stockist h3 {
  font-size: 1.8rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 0.6rem;
}

.stockist p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: left;
  font-weight: 300;
  color: black;
}

.stockist p span {
  font-family: 'fa5-Solid';
  font-weight: normal;
  font-style: normal;
  color: rgba(32, 17, 53, 0.5);
  width: 2.6rem;
  display: inline-block;
}

.stockist a {
  color: rgba(32, 17, 53, 0.5);
}

.stockist a:hover,
.stockist a:hover span {
  color: rgba(32, 17, 53, 1);
}


/* shipping (used on pay) */
.shipping {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.shipping .charge p,
.payArea .charge p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
  font-weight: 300;
  color: black;
}

.shipping .charge p strong,
.payArea .charge p strong {
  font-weight: 400;
}

.shipping .charge h2 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.shipping .charge p:first-of-type {
  font-size: 2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  color: black;
  margin-bottom: 2rem;
}

.shipping .charge p:first-of-type span {
  color: #A34C24;
  font-weight: 400;
}

.payArea .charge img {
  width: 100%;
  margin-bottom: 2rem;
}

.payBorder {
  border: 1px solid rgb(153, 153, 153);
  background-color: white;
  padding: 3rem;
  border-radius: 0.8rem;
}

.payArea .charge h2 {
  font-size: 1.8rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

/* social */

.social {
  margin-bottom: 4rem;
}

.social .socialIcon {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 1rem;
}

.social .facebook {
  background-image: url(/social/facebook.png);
  filter: grayscale(100%);
  opacity: 0.5;
}

.social .twitter {
  background-image: url(/social/twitter.png);
  filter: grayscale(100%);
  opacity: 0.5;
}

.social .instagram {
  background-image: url(/social/instagram.png);
  filter: grayscale(100%);
  opacity: 0.45;
}

.social .pinterest {
  background-image: url(/social/pinterest.png);
  filter: grayscale(100%);
  opacity: 0.35;
}

.social .socialIcon:hover {
  filter: none;
  opacity: 1;
}

.social .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem;
  margin-right: 1rem;
}

.social .buttonStandard {
  color: white;
  background-color: rgb(186, 186, 186);
}

.social .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.social .buttonStandard img {
  display: inline-block;
  height: 1.6rem;
  vertical-align: middle;
  margin-right: 0.6rem;
}

.socialPad {
  width: 100%;
  padding-bottom: 4rem;
}

/* logins */

.loginBgd {
  background-image: url(/gfx/loginBack.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.loginArea {
  max-width: 60rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 7rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.loginBlock {
  padding: 4rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  background-color: rgb(255, 255, 255, 0.9);
}

/* form */
form {
  padding-top: 0;
  max-width: 100%;
}

form .row {
  margin-bottom: 2rem;
}

form .plusMargin {
  margin-bottom: 1rem;
}

form label,
form p,
.label {
  font-size: 1.8rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
  display: block;
  margin-bottom: 0.5rem;
}

form a {
  color: #A34C24;
  font-weight: 400;
}

form a:hover {
  color: black;
}

form .offsetLabel {
  display: inline-block !important;
}

form .offsetLabel::after {
  content: " ";
  display: inline-block;
  width: 2rem;
}

form .floatLabel {
  display: block;
  float: left;
  width: 90%;
}

form .floatCheckbox {
  display: block;
  float: left;
  margin-right: 0.6rem;
}

form .left {
  float: left;
  width: 47.5%;
}

form .right {
  float: right;
  width: 47.5%;
}

form .left2 {
  float: left;
  width: 70%;
}

form .right2 {
  float: right;
  width: 30%;
  padding-top: 2%;
}

form .right2 img {
  width: 100%;
  vertical-align: middle;
}

form input[type=text],
form input[type=password],
form .emptyBox,
#card_number,
#card_expiry,
#card_cvc {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: block;
  font-style: normal;
  font-size: 1.8rem;
  color: #000;
  padding: 1.4rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}


form textarea {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: block;
  font-style: normal;
  font-size: 1.8rem;
  line-height: 130%;
  color: #000;
  padding: 1.4rem;
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}




form input[type=text]:focus,
form input[type=password]:focus,
form textarea:focus {
  border: 1px solid #A34C24;
  outline: none;
  -webkit-appearance: none;
}

input[type=button],
input[type=submit],
input[type=reset],
form .btn {
  background-color: rgb(153, 153, 153);
  border: none;
  color: white;
  padding: 1.2rem 2.4rem;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 2rem;
  text-align: center;
  font-weight: 300;
  -webkit-border-radius: 0.8rem;
  -moz-border-radius: 0.8rem;
  border-radius: 0.8rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
}

form .btn {
  background-color: rgba(32, 17, 53, 0.5);
}

form input[type=submit]:hover,
form .btn:hover {
  background-color: black;
  color: white;
}

form .btncenter {
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

form label span {
  font-size: 1.8rem;
  line-height: 2rem;
  color: #A34C24;
}




form input[type=checkbox] {
  height: 1.8rem;
  width: 1.8rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid rgb(128, 128, 128);
  border-radius: 0.4rem;
  outline: none;
  transition-duration: 0.3s;
  background-color: none;
  cursor: pointer;
  vertical-align: text-bottom;
  display: inline-block;
  position: relative;
  padding-right: 1rem;
}

form input[type=checkbox]:checked {
  border: 1px solid rgb(128, 128, 128);
  background-color: #eee;
}

form input[type=checkbox]:checked::before {
  content: '\2713';
  font-size: 1.6rem;
  font-weight: 400;
  display: block;
  text-align: center;
  color: #A34C24;
  position: absolute;
  left: 0.2rem;
  top: -0.1rem;
}


.filled {
  background-color: rgba(0, 0, 0, 0.05);
}


form textarea {
  display: block;
  min-height: 10rem;
}

form .greyed {
  display: none;
}

form input[type=checkbox],
form input[type=radio],
form input[type=text],
form button {
  box-shadow: none;
  outline: none;
}


.alert {
  border: 1px solid #A34C24;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: rgb(242, 228, 213, 0.5);
  margin-bottom: 2rem;
}

.alert p {
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 130%;
  margin-bottom: 0;
}

.alert a {
  color: #A34C24;
  font-weight: 400;
}

.alert a:hover {
  color: black;
}

#paymentResponse p {
  border: 1px solid #A34C24;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: rgb(242, 228, 213, 0.5);
  margin-bottom: 2rem;
  margin-top: 2rem;
}

#paymentResponse p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 110%;
}

.select-css {
  display: block;
  font-size: 1.6rem;
  font-family: sans-serif;
  font-weight: 400;
  color: #444;
  line-height: 1.3;
  padding: 1.4rem 2.4rem;
  width: 100%;
  max-width: 100%;
  /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid rgb(153, 153, 153);
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04);
  box-shadow: none;

  border-radius: 0.8rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
        for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference

    */
  background-image: url('/gfx/selectArrow.png'),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
  background-repeat: no-repeat, repeat;
  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
  background-position: right .7em top 50%, 0 0;
  /* icon size, then gradient */
  background-size: 1.2rem auto, 100%;
}

/* Hide arrow icon in IE browsers */
.select-css::-ms-expand {
  display: none;
}

/* Hover style */
.select-css:hover {
  border-color: #888;
}

/* Focus style */
.select-css:focus {
  border-color: #aaa;
  /* It'd be nice to use -webkit-focus-ring-color here but it doesn't work on box-shadow */
  box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
  box-shadow: 0 0 0 3px -moz-mac-focusring;
  color: #222;
  outline: none;
}

/* Set options to normal weight */
.select-css option {
  font-weight: normal;
}

/* Support for rtl text, explicit support for Arabic and Hebrew */
*[dir="rtl"] .select-css,
:root:lang(ar) .select-css,
:root:lang(iw) .select-css {
  background-position: left .7em top 50%, 0 0;
  padding: .6rem .8rem .5rem 1.4rem;
}

/* Disabled styles */
.select-css:disabled,
.select-css[aria-disabled=true] {
  color: graytext;
  background-image: url('/gfx/selectArrow.png'),
    linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}

.select-css:disabled:hover,
.select-css[aria-disabled=true] {
  border-color: #aaa;
}

/* payment */

.status {
  padding-top: 4rem;
  padding-bottom: 4rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.status p {
  font-size: 1.6rem;
  line-height: 150%;
  text-align: center;
  font-weight: 300;
  color: black;
}

.status p strong {
  font-weight: 400;
}

.status p span {
  text-transform: uppercase;
}

.status h1 {
  font-size: 3rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.status h2 {
  font-size: 2.2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 0.5rem;
  margin-top: 3rem;
}

.status .error {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: center;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  margin-bottom: 1rem;
}

.status .buttonBase {
  display: inline-block;
  padding: 1.2rem;
  padding-left: 2rem;
  padding-right: 2rem;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  border-radius: 0.6rem;
  margin-top: 3rem;
}

.status .buttonBack {
  color: white;
  background-color: #88A9C4;
}

.status .buttonBack:hover {
  color: white;
  background-color: #618AB5;
}

.status .buttonStandard {
  color: black;
  background-color: rgb(207, 207, 207);
}

.status .buttonStandard:hover {
  color: white;
  background-color: #999999;
}

.status .success {
  color: #34A853;
}

.status .error {
  color: #bf3838;
}



/* gallery */

.gallery {
  max-width: 120rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
}

.gallery .item {
  position: relative;
  border: 0.6rem solid white;
}

.gallery .item {
  width: 25%;
  display: block;
  padding-bottom: 33%;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;
  overflow: hidden;
  background-size: cover;
  float: left;
}

.gallery .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.gallery .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 8%;
  background-position: center center;
  background-repeat: no-repeat;
}





/* footer */
.footer {
  max-width: 128rem;
  padding-left: 3rem;
  padding-right: 3rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 3rem;
  letter-spacing: 0.05rem;
}

.footer .col {
  width: 25%;
  float: left;
  padding-left: 1rem;
  padding-right: 1rem;
}

.footer h3 {
  font-size: 1.5rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.footer h3 a {
  color: rgb(128, 128, 128);
  text-transform: uppercase;
}

.footer h3 a:hover,
.footer h3 a.selected {
  color: black;
  text-transform: uppercase;
}

.footer ul li {
  font-size: 1.3rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  font-weight: 300;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.footer ul li a {
  color: rgb(128, 128, 128);
}

.footer ul li a:hover,
.footer ul li a.selected {
  color: black;
  /* text-decoration: underline; */
  background-color: none !important;
}

.footer .email {
  text-transform: none;
}

.signOff {
  max-width: 128rem;
  padding-left: 4rem;
  padding-right: 4rem;
  margin-left: auto;
  margin-right: auto;
  padding-top: 4rem;
  padding-bottom: 8rem;
  letter-spacing: 0.05rem;
}

.signOff p {
  font-size: 1.4rem;
  line-height: 2rem;
  color: rgb(128, 128, 128);
  text-align: left;
  font-weight: 300;
}




/* fresco (inline popup overrides) */
.fr-window {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

.fr-overlay-background {
  background: rgba(32, 17, 53, 0.9) ;
}

.fr-overlay-ui-fullclick .fr-overlay-background {
  background: rgba(32, 17, 53, 0.9) ;
}


.fr-position-outside,
.fr-position-inside {
  font-size: 16px !important;
  line-height: 24px !important;
}

.fr-info {
  font-size: 16px;
  line-height: 24px;
}


/* Sprite */
.fr-window-skin-fresco .fr-side-button-icon,
.fr-window-skin-fresco .fr-close-icon,
.fr-window-skin-fresco .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.svg") !important;
}

/* fallback png sprite */
.fr-window-skin-fresco.fr-no-svg .fr-side-button-icon,
.fr-window-skin-fresco.fr-no-svg .fr-close-icon,
.fr-window-skin-fresco.fr-no-svg .fr-thumbnails-side-button-icon,
.fr-window-skin-fresco .fr-error-icon {
  background-image: url("/gfx/sprite.png") !important;
}

.search {
  display: inline-block;
  width: 34rem;
}

.search button,
.search input[type="submit"],
.search input[type="reset"] {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.search button {
  background-image: url(/gfx/magPurpleTint.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

.search button {
  display: inline-block;
  width: 2rem;
  height: 3.1rem;
  vertical-align: bottom;
  margin-left: 0.5rem;
}

.search button:hover {
  color: black;
  background-image: url(/gfx/magPurple.png);
}

.headerNeg .search button:hover {
  color: white;
  background-image: url(/gfx/magWhite.png);
}

.search input[type=text] {
  border: 1px solid rgb(153, 153, 153);
  width: 100%;
  display: inline-block;
  font-style: normal;
  font-size: 1.4rem;
  color: #000;
  padding: 0.4rem;
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-border-radius: 0.4rem;
  -moz-border-radius: 0.4rem;
  border-radius: 0.4rem;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  width: 16rem;
}

.search input[type=text]:focus {
  border: 1px solid rgb(33, 17, 53);
}

/* .search label { font-size: 1.8rem; line-height: 120%; color: rgb(128,128,128); text-align: left; font-weight: 300;  display:inline-block; } */
.search label {
  display: inline-block;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 120%;
  text-align: left;
  padding-right: 1rem;
  color: rgb(128, 128, 128);
  white-space: nowrap;
}




/* searchBlock */




.searchStripHeader {
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: rgb(233, 233, 233);
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.searchStripHeader h1 {
  font-size: 2rem;
  line-height: 120%;
  text-align: center;
  font-weight: 400;
  text-transform: uppercase;
  color: rgb(128, 128, 128)
}

.searchStripHeader p {
  font-size: 1.5rem;
  line-height: 170%;
  text-align: center;
  font-weight: 400;
  margin-bottom: 0;
  color: rgb(128, 128, 128);
}

.searchStripHeader p strong {
  font-weight: 600;
  color: rgb(32, 17, 53);
}


.searchBlock .searchThumbItem {
  width: 25%;
  padding: 1rem;
  display: block;
  float: left;
}

.searchBlock .searchThumbItem .searchThumbImage {
  width: 100%;
  padding-bottom: 120%;
  margin-bottom: 1rem;
  position: relative;
}

.searchBlock .searchThumbItem .searchThumbText {
  width: 100%;
  height: 3.4rem;
}

.searchBlock .searchThumbItem .searchThumbText h3 {
  font-size: 1.4rem;
  line-height: 120%;
  color: rgb(128, 128, 128);
  text-align: center;
  font-weight: 400;
}




.searchThumbSheerEdge {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0: right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.searchThumbItem:hover .searchThumbSheerEdge {
  opacity: 1;
}

.searchThumbItem:hover .searchThumbText h3 {
  color: black;
}








@media screen and (min-width: 1024px) and (max-width: 1280px) {
  .collectionSliderTextColumn p {
    font-size: 1.4vw;
  }

  .collectionSliderTextColumn .webLink {
    padding: 0.9rem 1.8rem;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    font-weight: 300;
  }

  .collectionGrid .itemName {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    padding: 1.6rem;
    width: 50%;
    height: 7.6rem;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.4s ease;
    z-index: 2;
  }

  .collectionGrid .itemName h1 {
    font-size: 1.7rem;
    line-height: 120%;
    text-align: left;
    font-weight: 300;
    margin-bottom: 1vw;
    text-transform: uppercase;
    color: black;
    position: absolute;
    left: 1.6rem;
    top: 1.6rem;
  }

  .collectionText {
    position: absolute;
    top: 6rem;
    left: 0;
    padding: 4rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    transition: all 0.2s ease;
    z-index: 20;
    display: block;
    width: 100%;
    visibility: hidden;
  }




  .dropbtn {
    font-size: 1.3rem;
    width: 22rem;
  }

  .dropdown-content {

    width: 22rem;


  }

  .dropdown-content a {
    font-size: 1.3rem;
  }


  .fabricThumbsNavigation ul li {
    font-size: 1.3rem;
  }

  .fabricThumbsNavigation ul li a::before {
    content: '';
    width: 1.4rem;
    height: 1.3rem;
  }

  .fabricThumbsNavigationColumn {
    width: 24rem;
  }

  .fabricThumbsColumn {
    width: calc(100% - 24rem);
  }

  .stockist .company {
    float: left;
    width: 33.333333%;
    padding: 1rem;
    min-height: 14.8rem;
  }
}

  /* additions 08/06/2006 */
  /* 2 is screen printed fabrics, 5 is hand block fabrics, 6 is wall coverings */
  /* .buttonAvailableBase {
    display: block !important;
    padding: 1.2rem !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    font-size: 1.5rem !important;
    line-height: 120% !important;
    text-align: center !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: white;
    width: 100% !important;
    margin-top:1rem;
  } */
  
  .buttonAvailableBase {
    display: block !important;
    padding: 1.2rem !important;
    padding-left: 5rem !important;
    font-size: 1.5rem !important;
    line-height: 120% !important;
    text-align: left !important;
    font-weight: 400 !important;
    text-transform: uppercase !important;
    color: black;
    width: 100% !important;
    margin-top:1rem;
    text-align: left;
}


  .ba2:hover,   .ba5:hover,   .ba6:hover {
  opacity:0.8;  
}
.fabric .fabricInfo h1 {
  font-size: 2.2rem;
  line-height: 140%;
  text-align: left;
  font-weight: 300;
  text-transform: uppercase;
  color: black;
  width: 100%;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 1rem;
}

.subFabric {
  display: block !important;
  padding: 1.2rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  font-size: 1.5rem !important;
  line-height: 120% !important;
  text-align: center !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  color: white;
  width: 100% !important;
  margin-bottom: 1rem;
}
.subFabric:hover {
  opacity: 1 !important;
}

.fabricThumbsNavigation ul li a {
  color: rgb(128, 128, 128);
  padding-left: 0;
  display:inline-block;
  padding: 1rem;
  padding-left:1.4rem;
  padding-right:1.4rem;
}

.fabricThumbsNavigation ul li a:hover,
.fabricThumbsNavigation ul li a.selected {
  color: black;
  border: 1px solid black;
  padding: 0.8rem;
  padding-left: 1.3rem;
  padding-right: 1.3rem;
  }
.fabricThumbsNavigation ul {
  float: left;
  padding-top: 0;
}

/* new video code */

.fabric .fabricProduct .col2 {
  width: 100%;
}


/* Standard image tiles */
.fabric .fabricProduct .col2 .item {
  width: 33.333333%;
  display: block;
  padding-bottom: calc(40% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border: 0.6rem solid white;
  float: left;
  box-sizing: border-box;
}


/* Image Fresco overlay */
.fabric .fabricProduct .col2 .item a {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


.fabric .fabricProduct .col2 .item a:hover {
  background-color: rgba(255, 255, 255, 0.8);
  background-image: url(/gfx/magnifier.png);
  background-size: 11%;
  background-position: center center;
  background-repeat: no-repeat;
}



/* Video tile */
.fabric .fabricProduct .col2 .videoItem {
  width:33.333333%;
  display:block;
  padding-bottom:calc(40% - 1.2rem);
  position:relative;
  overflow:hidden;
  border:0.6rem solid white;
  float:left;
  box-sizing:border-box;
}


.fabric .fabricProduct .col2 .videoBackground {
  position:absolute;
  inset:-20px;
  background-size:cover;
  background-position:center;
filter:none;
  transform:scale(1.15);
opacity:0.45;
}


.fabric .fabricProduct .col2 .fabricVideo {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:contain;
  z-index:2;
}




/* .fabric .fabricProduct .col2 .videoItem video {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  background: #eee;
} */



/* Fake placeholder tiles */
.fabric .fabricProduct .col2 .itemNone {
  width: 33.333333%;
  display: block;
  padding-bottom: calc(40% - 1.2rem);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
  border: 0.6rem solid white;
  filter: grayscale(100%);
  opacity: 0.15;
  float: left;
  box-sizing: border-box;
}






.fabricThumbHoverImage {
  position: absolute;
  left: 0;
  Top: 0;
  bottom: 0;
  right:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.fabricThumbItem:hover .fabricThumbHoverImage {
  opacity: 1;
}


.gallery .videoItem {
  position:relative;
  float:left;
  width:25%;
  padding-bottom:33%;
  overflow:hidden;
  background:#eee;
  box-sizing:border-box;
}
.gallery .videoItem {
  position: relative;
  border: 0.6rem solid white;
}


.gallery .videoBackground {
  position:absolute;
  /* inset:-20px; */
  background-size:cover;
  background-position:center;
  transform:scale(1.15);
  filter:blur(16px);
  opacity:.35;
}

.gallery .galleryVideo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  background:transparent;
  z-index:2;
}

.newDesign {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 5.2rem;
  height: 5.2rem;
  background-image: url('/gfx/newIcon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 5;
}
}