:root {
  --main-bg-color: #202020; 
  
  
  
}


.fleft {float:left;}
.fright {float:right;}
.tcenter {text-align: center;}
.fmedium {font-size:1.3rem;}
.invisible {visibility: hidden;}
.opaque {
	opacity: 0;
}

.hint {
	font-size: 0.8rem;
	color: #777;
}
.hint u {
	color: #999;
}
.downarrow {
	display: inline-block;
	top: 4px;
	position: relative;
	transform: rotate(90deg);
	font-size: 1.4rem;
	color: #fff;
	
}
.backarrow,
.nextarrow {
	display: inline-block;
	top: 3px;
	position: relative;
	
	font-size: 1.4rem;

	
}

.section-heading {
	font-size: 1.4rem;
	font-weight: bold;
}

.stroke {
	text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000;
}


.honeypot {display:none}

.title-bar {
	line-height: 3rem;	
	background: var(--main-bg-color);
}




.logo .sitename {
	color: #fff;
	font-size: 1.5rem;
	margin: 0 .5rem;
}

.top-bar,
.top-bar ul,
#main-menu {
	
	font-size: .9rem;
	color:#aaa;
	background: var(--main-bg-color);
	padding: 10px;
	z-index: 50;
}

#main-menu .fi{
	font-size:1.2rem;
}
#main-menu .badgex {
	border-radius: 10%;
	font-size: .9rem;
}


.menu li a {
	color:#aaa;
}


.menu li.main_nav_item .current {
	color: #fff;
}

/* from index.html */

.no-js .top-bar {
	display: none;
  }
  
  .top-bar .logo {
	  display: none; /* kill desktop logo image when on mobile*/
  }
  
  body {
	  background: var(--main-bg-color);
  }



  
  .top-bar, .top-bar ul, #main-menu {
	  padding-bottom: 0;
	  padding-top: 0;
  }
  
#mainmenu_items {
	margin-top: 2rem;
}

  
  /***** https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation#demo ******/
  
  .scroll {
	display: flex;
	flex-wrap: nowrap;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar; }

   .flexscroll .flexscroll {
	display: flex;
	flex-wrap: nowrap; }



	
	.noscroll {
	  flex: 0 0 120px; }
	
  .scroll::-webkit-scrollbar {
  display: none; }


  /*
  .busy {
	  background-image: url(../../images/ajax_loader.gif);
	  background-repeat: no-repeat;
	  background-position: center;
	  width: 100%;
	  height: 100%;
  }
  */
  

  
  
  .center-cropped {
  width: 200px;
  height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  }

  .imgsq {
	width: 100%;
  }


/****** /

.contact_email {
	padding: 3px 0;
}


.filternav:hover {
	cursor: pointer;
	color:#ddd;
	
}
.filternav .active{
	color:#fff;
}  

.filternav .likes_showx {
	display:none;
}

.filternav .hide_sort {
	display:none;
}


.is-drilldown .likesnav,
.likesnav,
.is-drilldown .checkoutnav,
.checkoutnav,
.is-drilldown .cartnav,
.cartnav	 {
	display:none;
}



/*** cat_selected ***/
#artwork_nav .is-dropdown-submenu {
	background: #212121;
	border: 1px solid #212121;
	padding: 10px;
	font-size: 1rem;
	line-height: 1.5;
	z-index:99;
	
}
#artwork_nav .is-dropdown-submenu a {
	font-size: 1.2rem;
}

#artwork_nav .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
	right: 0rem;
	border-color: rgba(255, 255, 255, 0.5) transparent transparent;
	 /* http://www.evotech.net/articles/testjsentities.html */
	border:0;
	top: 0;
	width: 0;
	height: 0;
	left: auto;
	margin-top: 10px;
	position: unset;
	display: unset;
	content: '\FE40';
	}
	
}

.palette_show .up {
	display: inline-block;
}




.cartnav .checkout{
	cursor:pointer;
}

#cartsummary{
	display:none;
	z-index: 99;
	font-size: .95rem;
	height:0;
	position: absolute;
	right: 0;

}

#cartsummary .close-button{
	float: right;
}
#cartsummary .close-button:after{
	clear:both;
}
.cartsummary_items {
	background: #ccc;
}
.cartsummary_items ul {
	margin:0;
}

#cartsummary .cart_item_remove {
	font-size: 0.7rem;
}

ol.cartsummary_item {
	border-bottom: 1px solid #999;
}
ol.cartsummary_totals  {
	border-bottom: 1px solid #999;
	padding: 5px 0;
	font-weight: bold;
}


/***********/

.artwork-item {
	position: relative;
}


.artwork_meta{
	/*position: absolute ;
	bottom:0px;*/

	padding: 0px 5px;
	background: rgba(0,0,0,.5);
	color: #fff;
	margin:0;
	width: 100%;

	z-index: 25;
	height: 25px;
}

.artwork_meta > div {
	opacity: .1;
}
.artwork_meta .artwork_ref {
	opacity: 1;
	text-align: center;
	font-size: .7rem;
	/*line-height:36px;*/
}


.artwork-item:hover > .artwork_meta div,
.artwork-item:hover > .zoom  {
   /* opacity: 1;*/
}

.artwork-item .fi:hover {
	cursor: pointer;
	opacity: 1;
}
.artwork-item .zoom {
	opacity:0;
	position: absolute;
	top: 50%;
	left:50%;
	transform: translate(-50%, -50%); /* https://css-tricks.com/centering-css-complete-guide/#both-unknown */
	font-size: 1.5rem;
	color: #222;
	padding: 50px 50px;
	/*background: rgba(0,0,0,.5);
	display:none;*/
	z-index: 20;
	
}

.artwork-item .is_limited {
	position: absolute ;
	top:8px;
	right: 8px;
	font-size: .5rem;
	background: rgba(0,0,0,.6);
	color: yellow;
	padding: 2px 4px;
}

.artwork-item .info_wrapper {
	position: absolute ;
	bottom:10%;
	width: 100%;
	background:rgba(255,255,255,.3);
	display:none;
}
.artwork-item .info_wrapper h3 {
	font-size: 1.2rem;
}
.artwork-item .info_wrapper:after{
	clear:both;
}
.artwork-item .palette_item {
	width: 18.8%; height: 30px;
	float:left;
	margin-right:1%;
}
.artwork-item .palette_item:nth-of-type(1){
	margin-left:1%;
}

.artwork_meta ul {
	list-style:none;
	padding:0;
	margin: 0 5px;
}
.artwork_meta ul li{
	float:left;
	margin:0;
	padding:0;
}



.artwork_meta .fi {
	color: #ccc;

} 

.fi-fave {
	background-image: url("/assets/images/favourite-outline-white.svg");
	background-repeat: no-repeat;
	width: 20px;
	height: 20px;
	z-index: 999;
	color: #fff;
	background-size: cover;
	display: inline-block;
}
.selected .fi-fave {
	background-image: url("/assets/images/favourite-solid-yellow.svg");
}
.fi.unselected,
.like.unselected .fi {
	color: #ccc;

}
.like.selected  {
	color: rgb(255, 255, 0);

}



.like {
z-index: 25;
padding: 10px;

position: absolute ;
top:0px;
left: 8px;
}

.like:hover,
.like:hover > .fi-heart {
	cursor: pointer;
	opacity: 1;
}



.fi-right:before {
	text-align: right;
	float:right;
}
i.fi {
	font-style: normal;
}



/*** popup **/

.close-button, .close-button.medium {
	right: 0.3rem;
	top: 0rem;
	font-size: 1.5em;
	color: #000;

}

#pop_artwork_insitu {
	background-size: 34%;
	background-position: 51.5% 20%;
	background-repeat: no-repeat


}

#productOptions .rightpane {
	padding: 0 20px 20px 20px;
}

#productOptions h3 {
	font-size: 1.5rem;
}

.slick-prev, .slick-next {
	color: #fff;
}
.slick-prev:before, .slick-next:before {
	color: #000;
}

.slick-next {
	right: 5px !important;
	z-index: 99;
}
.slick-prev {
	left:5px  !important;
	z-index: 99;
}

.leftpane .insitu_label {
	background: rgba(255,255,255,0.8);
	padding: 5px 2px;
}

#productOptions label {
	font-weight: bold;

	padding:2px 2px;
	border: 0px solid #ccc;
	
}

#productOptions .accordion-title {
	padding: .8rem 1rem;
	font-size: 0.8rem;
}
#productOptions .accordion-content {
	padding: 0 .5rem;
}

.tabs .limited_edition_tabx {
	display: none;
}


#productOptions .fi {
	color: #444;
}
.printsize,
.accnext {
	display: inline-block;
	align-items: center;
	vertical-align: top;
	text-align: center;
	justify-content: center;
	
	position:relative;
	
	color: #000;
	border: 1px solid #888;
	border-radius: 2px;

	cursor: pointer;
	height: 35px;
	line-height: 30px;
	width: 12%;
	padding: 0px 0px;
	margin: .1rem .1rem .2rem 0px;
	max-width: 100px;
	min-width: 60px;
	background-color: #fff
}
.printsize:hover {
	
	color: #30beef;
	border: 1px solid #30beef
}

.printsize.selected{
	background-color: rgba(48, 190, 239, .1);
	color: #30beef;
	border: 1px solid #30beef
}

.printsize.selected:after {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #30beef;
	font-size: 0;
	line-height: 0;
}


.printoption_box {
	/*
	list-style-type: none;
	align-items: center;
	vertical-align: top;
	text-align: center;
	justify-content: center;
	*/
	margin-top: 1rem;
}
.printoption_box:after {
	clear:both;
}

.printoption_item {
	width: 16%;
	float: left;
	cursor: pointer;
	padding: 0px 5px;
	margin: .1rem .1rem .2rem 0px;
	min-width: 70px;
	max-width: 120px;
	height: 80px;
	color: #000;
	position:relative;
	
}
.printoption_item.ed_limited {
	width: 20%;
	display: none;
}
.printoption {

	color: #000;
	border: 1px solid #888;
	border-radius: 2px;
	background-color: #fff;
	line-height: 1;	
	height: 60px;
	position: relative;
}




.printsize .sizename,
.printoption .optionname{
	/*position:absolute;*/
	margin-top:5%;
}

.printsize .edition_info {
	line-height: 35px;
	display:inline-block;
}

.print_options_wrapper:after {
	clear:both;
}

.optionprice {
	
	text-align: center;
	font-size: .8rem;
	padding-top: 0.2rem;
	line-height: 1;
}

.optionprice .price_text {
	font-weight: bold;
	font-size: .9rem;
}

.printoption_item.selected .optionprice .price_text {
	font-weight: bold;
	font-size: 1rem;
	color: #30beef;
}
.optionprice .component_prices {
	font-weight: normal;
	font-size: .6rem;
}


.printsize.breakx {clear:both;} 
.printsize .sizename,
.printoption .optionname,
.accnext .sizename,
.accprev .sizename {
	font-weight: normal;
	display:block;
	font-size: .8rem; 
	text-align:center;
}

.print_options_wrapper {
	position: relative;
}
.print_options_wrapper .sizedesc {

}
.printoptionx .optionname:after {
  content: '\A';
  display: contents;
  white-space: pre;
}

.printoption_item:hover > .printoption {
	color: #30beef;
	border: 1px solid #30beef;
}

.printoption_item.selected .printoption {
	background-color: rgba(48, 190, 239, .1);
	color: #30beef;
	border: 1px solid #30beef
}

.printoption_item.disabled {
	opacity: 0.25;
	cursor: default;
}
.printoption_item.disabled:hover .printoption {
	color: #000;
	border: 1px solid #888;
}
.printoption_item .printtooltip {
	position: absolute;
	bottom: 12px;
	right: -1px;
	text-align: center;
	font-size: 1.1rem;
	cursor: pointer;
	z-index: 20;
	background: #fff;
	padding-left:3px;

}

.printoption_item.selected .printtooltip .fi-info {
	
	color: #30beef !important;
}

.printoption_desc
{
	position: absolute;
	top: -5px;
	left: 0px;
	padding: 15px;

	font-size: .75rem;
	background-color: rgba(206, 206, 206, 1);
	border: 1px solid rgb(206, 206, 206);
	z-index: 30;
	min-height: 220px;
	width:100%;
}
.printoption_desc h3 {
	font-size: 1.1rem;
	font-weight: bold;
}
.printoption_desc h4 {
	font-size: 1.0rem;
	font-weight: bold;
}
.printoption_desc,
.printoption_desc_item {
	display: none;
}

.printoption_desc .fi-x {
	
}
#productOptions .sizedesc {
	clear: both;
	font-weight: normal;
	font-size: .9rem;
	color: #333;
}

#productOptions .disclaimer {
	color: #333;
	font-size: .6rem;
	font-weight: normal;
}

#size_ref_wrapper {
	position: relative;
	margin-top: .4rem;
}

#size_ref_wrapper .size_ref {
	position: absolute;
	font-weight: normal;
	bottom: 150px;
}
.size_x {position: absolute;z-index:99;color: white}


.product_wrapper {
	margin-top: 0rem;
}

.btn_wrapper {
	margin-left: 1px;
	width: 100%;
}


/****** checkout ****/


.checkout {
	
}

.checkout .cart-item {
	border: 1px solid #e6e6e6;
}
.checkout .cart-item.totalrow {
	border: 1px solid #ccc;
}
.checkout ul.tabs {
	
}



.checkout li.tabs-title > a {
	display: block;
	padding: .5rem 1.5rem;
	font-size: 0.75rem;
	line-height: 1;
	color: #1779ba;
	outline: none;
}

.checkout li..tabs-title > a:focus, 
.checkout li..tabs-title > a[aria-selected='true'] {
	background: #e6e6e6;
	color: #1779ba;
}


.checkout li.tabs-title.is-disabled > a{
	color: #ccc;
} 
.checkout li.tabs-title.is-disabled > a:hover {
	cursor: default;
} 

.checkout li.tabs-title .fi-check{
	visibility: hidden;
	color: green;
	font-size: 1rem;
	/*position: relative;
	left: 10px;*/
}
.checkoutx .btn-back {
	font-size: 0.7rem;
	
}

.checkout .cart-item {
	padding: 1rem 0;
	margin-bottom: 0rem;
	font-size: 0.8rem;
	margin-bottom: 3px;
}

.checkout .totalrow {
	padding: 0.7rem 0;
	line-height:30px;
	font-size: 1.2rem;
	font-weight: bold;
	
	
}
.checkout p {
	font-size: 0.8rem;
}


.checkout h3 {
	font-size: 1.2rem;
	line-height:1;
	margin-bottom: 0.5rem;
	font-weight: bold;
	
}
.checkout h4 {
	font-size: 1rem;
	line-height:1;
	margin:0;
	font-weight: bold;
}

.checkout .cart-amend {
	display: inline;
	font-size: 0.7rem;
	margin-left: .2rem;
	font-weight: normal;

}
.checkout .item-edits {
	font-size: 0.7rem;
}
.checkout .item-price {
	text-align: right;
	font-size: 1.2rem;
	font-weight: bold;
}

.checkout input::placeholder {
  text-align: center;
}
.checkout #cmobile {
	padding-left: 25px;
}
.checkout label .err {
	margin-top: -1.2rem;
	color: red;
	font-size: 0.7rem;
}
.checkout label .prefix {
	position: absolute;
	top: 24px;
	left: 10px;
	font-size: 1.4rem;
}

.checkout .button {
	margin:0;
	width: 100%;
	padding: 0.7rem 0;
	line-height: 100%;
}
.checkout .cart-next {

	padding: 0.7rem 0;	
}

.checkout .btn-chk-back {
	font-size: 0.8rem;
}

/******* ADMIN ******/

.sel_size_filter {
	display: none;
}

.sel_sku_wrapper {
	display: none;
}

#addnew_component_wrapper {
	display: none;
}


/*** gspinner ****/

#g-spinner {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  opacity: 0;
}

#g-spinner.loading {
  opacity: 1;
  transition: 1s ease-in-out all;
  animation: rotate 2s cubic-bezier(0.465, 0.183, 0.153, 0.946) infinite;
}

#g-spinner > .circle {
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

#g-spinner.loading > .circle.c1 {
  left: 80px;
  top: 5px;
  background: #4384F8;
  animation: c1Center 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

#g-spinner.loading > .circle.c2 {
  left: 5px;
  top: 80px;
  background: #34A855;
  animation: c2Center 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

#g-spinner.loading > .circle.c3 {
  left: 80px;
  bottom: 5px;
  background: #FBBD06;
  animation: c3Center 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

#g-spinner.loading > .circle.c4 {
  right: 5px;
  top: 80px;
  background: #EA4436;
  animation: c4Center 4s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

@keyframes rotate {
  from {
   transform: rotate(0deg); 
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes c1Center {
  0% {
    top: 5px;
    background: #4384F8;
  }
  24% {
    background: #4384F8;
  }
  24% {
    background: #4384F8;
  }
  25% {
    background: #FBBD06;
    top: 80px;
  }
  50% {
    background: #FBBD06;
    top: 5px;
  }
  55% {
    background: #FBBD06;
    top: 5px;
  }
  74% {
    background: #FBBD06;
  }
  75% {
    background: #4384F8;
    top: 80px;
  }
  100% {
    background: #4384F8;
    top: 5px;
  }
}

@keyframes c2Center {
  0% {
    background: #34A855;
    left: 5px;
  }
  24% {
    background: #34A855;
  }
  25% {
    background: #EA4436;
    left: 80px;
  }
  50% {
    background: #EA4436;
    left: 5px;
  }
  55% {
    background: #EA4436;
    left: 5px;
  }
  74% {
    background: #EA4436;
  }
  75% {
    background: #34A855;
    left: 80px;
  }
  100% {
    background: #34A855;
    left: 5px;
  }
}

@keyframes c3Center {
  0% {
    background: #FBBD06;
    bottom: 5px;
  }
  24% {
    background: #FBBD06;
  }
  25% {
    background: #4384F8;
    bottom: 80px;
  }
  50% {
    background: #4384F8;
    bottom: 5px;
  }
  55% {
    background: #4384F8;
    bottom: 5px;
  }
  74% {
    background: #4384F8;
  }
  75% {
    background: #FBBD06;
    bottom: 80px;
  }
  100% {
    background: #FBBD06;
    bottom: 5px;
  }
}

@keyframes c4Center {
  0% {
    background: #EA4436;
    right: 5px;
  }
  24% {
    background: #EA4436;
  }
  25% {
    background: #34A855;
    right: 80px;
  }
  50% {
    background: #34A855;
    right: 5px;
  }
  55% {
    background: #34A855;
    right: 5px;
  }
  74% {
    background: #34A855;
  }
  75% {
    background: #EA4436;
    right: 80px;
  }
  100% {
    background: #EA4436;
    right: 5px;
  }
}


/*** about.html ***/

.about p {
	margin: 1rem 0;
	font-size: 1.5rem;
	line-height: 1.8;

}
.about h3.title {
	font-size: 2rem;
	font-weight: 600;
	margin: 1rem 0;
}
.about .callout {
	margin: 1rem 0;
	padding: 1rem;
	border: 0px ;
	background: var(--main-bg-color);
	color: #fff;

}

.about .user_actions {
	display: none;
}


/* Small only */
@media screen and (max-width: 39.9375em) {
	
	
	.cell {
		
		margin: 0px;
	}
	
	.fi {
		
		font-size: 1.5rem;
	}
	.artwork-item:hover > .artwork_meta,
	.artwork-item:hover > .zoom  {
	    /*opacity: 0.1;*/
	}
	
	.like {
		padding: 10px;
	}
	
}

/* Medium and up */
@media screen and (min-width: 40em) {
	.no-js .top-bar {
	  display: block;
	}

	.no-js .title-bar {
	  display: none;
	}
	.top-bar .logo {
		display: block;
	}

  }

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}