/*TEMP TEST*/
#test {display: none;}
/********************CREATIVE CONTENT************************************/
.hero img {position: relative; left: -10%; width: 100%; max-width: 600px; border: 1px solid #999999; /*border-radius: 8px;*/ margin: 2em 0;}
#creative-content {position: relative; margin: 0 auto;}
#creative-content .readmore_content {display: none;}
.creative1, .creative2, .creative3 {position: relative;} /*for absolute positioning*/
.creative1, .creative2, .creative3 {padding: 2em 0; border: 1px solid #cccccc;}
.creative1, .creative2 {margin-bottom: 2em;}
.creative1 .slogan, .creative2 .slogan, .creative3 .slogan {display: block; width: 49%; padding: 1em;}
.creative1 .slogan, .creative3 .slogan {position: absolute; top: 2em; right: 2em; }
.creative2 .slogan {position: absolute; top: 2em; left: 2em;}

.creative1 img, .creative2 img {display: block; width: 49%; max-width: 450px; border: 1px solid #999999; /*border-radius: 8px;*/}
.creative1 img, .creative3 img {margin-left: 4em;}
.creative2 img {position: absolute; top: 2em; right: 4em;}
.creative3 img {display: block; width: 49%; max-width: 600px; border: 1px solid #999999; /*border-radius: 8px;*/ }
.creative1>div:nth-child(3), .creative2>div:nth-child(3), .creative3>div:nth-child(3) {display: block; width: 49%; padding: 1em 1em 2em 1em;}
.creative1>div:nth-child(3), .creative3>div:nth-child(3) {position: absolute; bottom: 4em; right: 4em;}
.creative2>div:nth-child(3) {position: absolute; bottom: 4em; left: 4em;}/*necessary for float!*/
button.showMore {background: inherit; border: none; color: #3a3c58;}
button.showMore:hover {color: #000000;}

/*colours:*/
.creative1, .creative3 {background: #d4d4d6; padding: 2em 0;}
.creative1 .slogan, .creative3 .slogan, .creative1>div:nth-child(3), .creative3>div:nth-child(3) {background: #f9fafd; border: 1px solid #cccccc; /*border-radius: 8px;*/}
.creative2 .slogan, .creative2>div:nth-child(3) {background: #e6e6e8; border: 1px solid #bbbbbb; /*border-radius: 8px;*/}

/* loading page */
#loader {position: fixed; top:0; right:0; width: 100%; height: 100%; display: block;
	/*background-color: #fff; opacity: 1;*/
	background: transparent; /* apply to all */
	z-index: 5; /* over everything; default is 5*/
	transition: opacity 1s ease-out;}
.spinner1, .spinner2 {
    width: 7em; height: 7em;
	top: 50%; right: 50%; margin-top: -3.5em; margin-right: -3.5em;
	border: .8em solid #f3f3f3;
    border-top: .8em solid #666;
    border-radius: 50%;
	position: absolute;
	box-sizing: border-box;}
/* minimised */
#loader.minimised {opacity: 0;}
/* for loading images */
#loader.sidelined {background-color: transparent; bottom: auto; left: auto;}
.spinner1.sidelined, .spinner2.sidelined {
	width: 2em; height: 2em; top: 0; right: 0; margin-top: .5em; margin-right: .5em;
	border: .2em solid #f3f3f3;
	border-top: .2em solid #666;
}
/* animation */
.spinner1 {animation: spin1 1.5s linear infinite; opacity: .5;}
.spinner2 {animation: spin2 2s linear infinite; opacity: .25;}

@keyframes spin1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes spin2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* general fonts & styles */

@font-face {font-family: AvenirNextLTPro; src:url('fonts/Avenir Next LT Pro Regular.otf'); font-stretch: normal; font-style: normal; font-weight: normal; font-display: swap;}
@font-face {font-family: AvenirNextLTPro; src:url('fonts/Avenir Next LT Pro Italic.otf'); font-stretch: normal; font-style: italic; font-weight: normal; font-display: swap;}
@font-face {font-family: AvenirNextLTPro; src:url('fonts/Avenir Next LT Pro Demi.otf'); font-stretch: normal; font-style: normal; font-weight: bold; font-display: swap;}
@font-face {font-family: AvenirNextLTPro; src:url('fonts/Avenir Next LT Pro Demi Italic.otf'); font-stretch: normal; font-style: italic; font-weight: bold; font-display: swap;}
body {font-family: AvenirNextLTPro, Trebuchet, Verdana, san-serif; font-size: 16px; color: #5f5a64;}
#nav, #banner h1, .tile_caption, .serif {font-family: AvenirNextLTPro, Trebuchet, Verdana, san-serif; /*Georgia, "Times New Roman", serif;*/} /*selectively apply serif font*/
#banner h1 {text-transform: uppercase; font-size: 1em; text-shadow: none;}
#enquiry input, #enquiry option, #enquiry textarea {font-family: "Tahoma", "Century Gothic", sans-serif;}
.accent1 {font-size: 1.1em; }
.accent2 {font-size: 1.2em; font-weight: bold; color: #888888;}
.accent3 {font-size: 1.2em; font-weight: bold; font-style: italic; color: #888888;}
.title {font-size: 1.5em; font-style: italic; font-weight: bold; color: #888888;}
.smallprint {font-size: .85em; }
.bold {font-weight: bold;}
.italic {font-style: italic;}
.burgundy {color: #990033;}
.centred {text-align: center;}
.justified {text-align: justify;}
.left {text-align: left;}
.right {text-align: right;}
.button  {background: #B4FFE1; border: .25em outset #E3FFFD; padding: .25em 1em; margin-left: .75em; margin-right: .75em; text-align: center; /*font-family: Georgia, "Times New Roman", serif;*/}
.hidden {display:none} /* for market-items filter */
#warning {display: block; position: absolute; top: 0; right: 0; max-width:15%; margin: 1em 1em 0 0; text-align: right; color: #ff0000;}
.accent1.button a {text-decoration: none; color: #555555;}

/* box sizing */
* {box-sizing: border-box; } /* for accurate 100% width */

/* link fonts & styles  REDO*/
a {color: #999999;}
a:link {color: #999999;}
a:visited {color: #999999;}
a:focus, a:hover {color: #333333;}
a img {border:none; outline:none;} /* for IE */

/* MENU LINKS */
/*top level*/
#nav {font-size: 125%; /*line-height: 1.5;*/}
#nav>ul>li>a, #nav #collections a {display: block; font-weight: normal;  text-decoration: none; padding-left: .7em; text-indent: -.7em;}
#nav>ul>li>a:link, #nav #collections a:link {color: #5f5a64;}
#nav>ul>li>a:visited, #nav #collections a:visited {color: #5f5a64;}
#nav>ul>li>a:focus, #nav #collections a:focus {color: #39363c; font-weight: 500; }
#nav>ul>li>a:hover, #nav #collections a:hover {color: #39363c; font-weight: 500; font-style: italic;}
#nav>ul>li>a:active, #nav #collections a:active {color: #39363c; font-weight: 500; }
#nav #collections {padding-left: 10%; }
/* toggle collections menu jewellery home page only */
#home #nav #collections {display: none; }
#home #nav label {cursor: pointer; display: block; padding-left: .7em;
  text-indent: -.7em;}
#home #nav #collections_menu {display: none;} /* hide the checkbox */
#home #nav #collections_menu:checked~label~#collections {display: block;}
#home #nav #collections_menu:checked+label {font-style: italic;}

/* show menu for full screen */
#nav {width: 20%; margin: 0; float: left; text-align: left; padding-left: 1em;}
#nav ul {padding: 0 1em /*NEW CHANGE!*/; margin: 0; list-style: none; position: relative; z-index: 4; max-height: none;} /* position for stacking context; max-height initialises js */
/* animated menu icon */
.icon_menu {position: absolute; left: 0; top: 1em;/*top: 50%; transform: translateY(-50%);*/ padding: 0 1em; display: none;}
.bar1, .bar2, .bar3 {width: 25.2px; height: 1.26px; background-color: #5f5a64; margin: 6.72px auto; transition: 0.5s;}
/* Rotate first bar */
.change .bar1 {
   -webkit-transform: rotate(-45deg) translate(-6.48px, 5.28px);
    transform: rotate(-45deg) translate(-6.48px, 5.28px);}
/* Hide/Slide second bar */
.change .bar2 {width: 0;}
/* Rotate last bar */
.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-6px, -4.56px);
    transform: rotate(45deg) translate(-6px, -4.56px);}

/* content */
body {position: relative; margin: 0;} /*position loader?*/
#page {max-width: 1800px; /*margin: -8px auto;*/ text-align: center; position: relative; background-color: #ffffff;} /*see also market.css*/
#page {min-height: 100vh;}/*for wide screens*/
h1 {font-size: 140%; font-weight: normal; line-height: 1.4em; margin-top: .4em; text-shadow : .25px .25px 0 #5f5a64;}
#banner {position: static; background: linear-gradient(to bottom, rgba(203,238,227,1) 0%, rgba(255,255,255,1) 100%),#ffffff; /*margin: -1% -1% 0 -1%;*/ z-index: 4; } /*NB covers #page padding; 60% color-hint*/
#banner a {display: inline-block; width: 35%; margin: 1em auto; z-index: 6; color: #5f5a64; text-decoration: none;} /* home link; stacked above #loader */
#banner img {width: 100%; font-size: 3em;} /* alt text > banner*/

/* error page*/
#error_content {width: 60%; margin: 2em auto; position: relative;}
#error_pic {position: relative; margin: 3em auto;}
#error_title {display: block; font-size: 150%; font-weight: bold; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#error_content img {width: 100%; max-width: 600px; opacity: .25;}
#error_content div {display: inline-block;}
#error_content>#enquiry_link {display: none;} /* override previous */
#error_side_pic {float:right; width: 18%; margin-top: 2em;}

/* home page*/
#announcement {max-width: 18%; margin-top: 1em; padding: 1.5em .5em; float: left; clear:both; text-align: left; border: 1px solid #7f7b83; display: none; color: #990033; }
#announcement a {color: #990033;}
.expires {display: none;} /* hide expiry dates */

#homeshow2 {position: relative; max-width: 600px; margin: 0 auto;}
.slideshow div {padding-top: 75%;}
.slideshow img {max-height:450px; width: 100%;}
.slideshow img {opacity: 0;
animation: slideshow_fade 30s linear infinite 0s;}
.slideshow img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 0 0 0;}
.slideshow img:nth-child(1) {animation-delay: 0s;}
.slideshow img:nth-child(2) {animation-delay: 5s;}
.slideshow img:nth-child(3) {animation-delay: 10s;}
.slideshow img:nth-child(4) {animation-delay: 15s;}
.slideshow img:nth-child(5) {animation-delay: 20s;}
.slideshow img:nth-child(6) {animation-delay: 25s;}
@keyframes slideshow_fade {
	0% {animation-timing-function: ease-in; opacity: 0; filter: grayscale(100%) blur(20px); padding: 15% 20%; }
  3.333333% {opacity: 1; filter: grayscale(0%) blur(0px); padding: 0;}
13.333333% {animation-timing-function: ease-out; opacity: 1; filter: grayscale(0%) blur(0px); padding: 0;/* scale:1;*/}
16.6666667% {opacity: 0; filter: grayscale(100%) blur(20px); padding: 0;/* scale:1.25;*/}
  100% {opacity: 0; filter: grayscale(100%) blur(20px); padding: 0;}
}

/* Home page slogans*/
.slogan {font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 2em; display: inline-block; color: #656569;}
#slogan1, #slogan2 {padding: 0 1em; }
/* !!!!!!!!!!!!!! MOVE THE ABOVE TO CONSOLIDATE!!!!!!!!!!!!!!!*/

/*slider bars*/
.slider {width: 100%; border: 2px solid #bbbbbb; padding: 5px; margin: 2em auto; }
.slider_inner {width: 100%; white-space: nowrap; overflow-x: scroll; border: 0; padding: 0; font-size: 0; }
.slider figure {margin: 0; max-width: 240px; height: auto; display: inline-block; /*border: 1px solid #5f5a64;*/ margin-bottom: 5px;}
.slider figure img {display: block; width: 100%; border: 1px solid #5f5a64;}/*no whitespace under img; keep in border*/
.slider figcaption {/*background-color: #5f5a64; color: #fff;*/ color: #484848; font-size: 16px; font-weight: bold; padding: 3px; text-align: center;}
.slider a {text-decoration: none;}

/* slide gallery (sculpture, jewellery, exhibition) */
#wrapper {position: relative; margin-bottom: 3em;}
#slide_container {width: 60%; max-width: 600px; margin: 0 auto; position: relative; }
#slide {width: 100%; padding-top: 75%; } /*aspect ratio*/
#slide>img[src*="data:image/gif;base64"] {display: none;} /* all images with inline src; for deferred loading script*/
.slide {max-height: 100%; max-width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; border: 1px solid #bbbbbb; opacity:0; transition: opacity .4s; object-fit:contain;/*TEST!*/}
.slide.showing {opacity: 1;}
#slide_caption {width: 20%; text-align: right; position: absolute; right:2em; top: 0;} /* align with image */
#caption_wrapper {position: relative; }
.caption {position: absolute; right: 0; top: 0; opacity: 0; transition: opacity .4s;}
.caption.showing {opacity: 1;}
.caption>p.title {margin-top: 0; }
input.next, input.previous {border: none; outline: none; height: 3.5em; width: auto; padding: .8em;}
input.next:focus, input.previous:focus {outline: none;}
input.previous {position: absolute; left: 0; bottom: 0; z-index: 6; }
input.next {position: absolute; right: 0; bottom: 0; z-index: 6; }
#progress {position: absolute; top: 0; left: 0; font-family: Sans-Serif; padding: .2em 0 0 .2em; }
#progress {text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;}

/* modal text box */
.readmore_link {display: block; font-weight: bold; padding: 1em .5em; cursor: pointer; border: 0;}
#openModal {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(125,125,125,0.75);
	z-index: 8;
	opacity:0;
	transition: opacity 400ms ease-in;
	pointer-events: none;}
.readmore_content > div {
	position: relative; top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	margin: auto 20%; padding: 2em 2em; border-radius: 1em;	background: #fff;
	text-align: left;}
.close_readmore {
	background: #606060;
	color: #ffffff;
	line-height: 2em; font-size: 2em;
	position: absolute;
	right: -1em;
	text-align: center;
	top: -1em;
	width: 2em;
	text-decoration: none;
	font-weight: bold;
	border-radius: 1em;
	/*-moz-box-shadow: .1em .1em .15em #000;
	-webkit-box-shadow: .1em .1em .15em #000;
	box-shadow: .1em .1em .15em #000;*/
	pointer-events: auto; cursor: pointer; }
.close_readmore:hover {color: black; background: #b4ffe1; }

/* page: jewellery */
#tile_container  {margin: 0 0 2em 20%; text-align: left;
	-webkit-columns: auto auto; /* Chrome, Safari, Opera */
    -moz-columns: auto auto; /* Firefox */
    columns: auto auto;}
.tile_frame {display: inline-block; position: relative; margin: .6em;  outline: .1em solid #afafaf; transition: outline, margin .2s linear;}
.tile_frame:focus, .tile_frame:hover {outline-color: #333333; margin: .5em; font-style: italic; }
a.tile {text-decoration: none; padding: 0;}
.tile_caption {position: absolute; top: 1em; right: 1em; color: #333333; opacity: .5; pointer-events: none;}
.tile img {display: block; height: auto; max-width: 12.5em; transition: max-width, .2s linear;}
.tile img:focus, .tile img:hover {max-width: 12.7em;}

/*.care_text {display: inline-block; width: 60%; text-align: left;}
.carepic {width: 10%; padding-left: 1em; float: right;} */

 /* pages: about, contact */
#centretext, .contact {width: 50%; margin-left: 25%; margin-right: auto; text-align: justify; position: relative;}
#mecontent {width: 24%; float: right; padding: 0 2em 2em 2em; text-align: right; font-size: 75%; color: #939393;}
#mecontent img {width: 100%; max-width: 17.5em; border: 1px solid #bbbbbb;}
.findit_intro {text-align: left; margin-left: 20%;}
#findit_table {margin-left: 20%; }
#findit_table td {padding-top: .25em; padding-bottom: .25em; text-align: left;}
#findit_table tr td:first-child {text-align: right; padding-right: 2em;}
#contact_pic {position: absolute; bottom: 6em; right: 0; width: 30%;}
#enquiry_link {margin: 1em 0 0 0; display: none;} /* set by JS */
#form_container {display: inline-block; padding: .5em; border: .32em ridge #eee; margin-left: -20%;} /* to centre */
#enquiry tr:first-child {visibility: hidden; }
#enquiry td {text-align: left;}
#required5 {max-width: 25em; width: 100%;}
#enquiry_content {margin: 2em 0 2em 21%; text-align: left;}
#centretext img {width: 100%; max-width: 600px; margin: auto; display: block;} /*centred*/

/**********************NEW STYLES*********************/
#leader {width: 100%; background-color: #79797d; color: #ffffff; padding:.5em 0 1em 0; font-size: 1.5em;}
.shoplink1 {display: inline-block; font-size: 1.5em; padding: .5em; color: #656569; border: 1px solid #656569; border-radius: .25em; margin-bottom: .5em;}
.shoplink1 a, .shoplink1 a:link, .shoplink1 a:visited {color: #656569; text-decoration: none;}
.shoplink1 a:focus, .shoplink1 a:hover {color: #3a3c58;}
.shoplink2 {display: inline-block; font-size: 1.5em; padding: .5em; border: 1px solid #ffffff; border-radius: .25em; margin: .5em 0;}
.shoplink2 a {text-decoration: none; color: #656569;}
.shoplink2 a, .shoplink2 a:link, .shoplink2 a:visited {color: #ffffff; text-decoration: none;}
.shoplink2 a:focus, .shoplink2 a:hover {color: #bbbbbb;}

#homeband1 {position: relative; padding-bottom: 2em;}
#slogan1, #slogan2 {position: absolute; right: 0; text-align: right; padding: 0 .5em;}
#slogan1 {top: 5em;}
@media screen and (max-width: 80em) {
	#slogan1, #slogan2 {position: static; text-align: center; top: auto; right: auto; padding: 1em .5em .5em 0;}
	#slogan1 span, #slogan2 span {display: none;}
	.shoplink1 {margin: 1em 0;} /*CHECK!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
}
#homeband2 {background-color: #79797d; padding: 2em 0; margin: .5em 0 0 0; color: #ffffff; }
.slogan {margin-bottom: 1em; padding: 0 .5em;}
#homeband2 .slogan, #homeband4 .slogan, #homeband5 .slogan {color: #ffffff;}
#homeband3, #homeband6 {background-image: linear-gradient(to bottom, rgba(203,238,227,1) 0%, rgba(255,255,255,1) 30%); margin: 0; padding: 2em 0 3em 0;}
#homeband4 {background-color: #79797d; padding: 2em 0; color: #ffffff;}
#homeband5 {position: relative; background-color: #656569; padding: 2em 0; color: #ffffff;}
/*#homeband6 {background-image: linear-gradient(to bottom, rgba(203,238,227,1) 0%, rgba(255,255,255,1) 30%); padding: 2em 0; margin: 0; color: #666666;}
#homeband6 .shoplink1 {margin: 2em 0 .5em 0;}*/
.container {display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; margin: 0 auto;}
figure.homepage {max-width: 450px; height: auto;}
figure.homepage figcaption {font-size: 1.5em; margin-bottom: 1em;}
figure.homepage img {width: 100%;}/*responsive; all homepage pics*/
#homeband3>div, #homeband6>div {color: #656569;}
#homeband3 figure.homepage, #homeband6 figure.homepage {margin: 0 auto;}
#homeband3 figure.homepage figcaption, #homeband6 figure.homepage figcaption {color: #3a3c58;}
#homeband3 div, #homeband6 div {margin-top: .5em;}
/*#homeband6 .container {padding: 1em 0;}
#homeband6 .container img {width: 100%; max-width: 450px; margin-bottom: 2em;}
#homeband6 #inner-container div:first-child {display: block; font-size: 1.5em; padding: 0 .5em; color:#3a3c58;}*/
#sculpture-link {background-image: url("homepage-pics/x1/nicola-bannerman-orb-sunrise-w.jpg"); background-size: 100% auto; aspect-ratio: 16/9; max-width: 1200px; position: relative; margin: 0 auto;}
@supports not (aspect-ratio: 16 / 9) {
	#sculpture-link::before {float: left;	padding-top: 56.25%; content: '';}
	#sculpture-link::after {display: block;content: '';clear: both;}
}
#sculpture-link div:first-child {width: 100%; position: absolute; top: 1em; padding: 0 .25em; font-size: 1.5em;}
#sculpture-link div:nth-child(2) {position: absolute; right: 2em; bottom: 1em;}

@media screen and (max-width: 600px) {
	#sculpture-link {background-image: url("homepage-pics/x1/nicola-bannerman-orb-sunrise.jpg"); aspect-ratio: 4/3;}
	#sculpture-link div:nth-child(2) {position: absolute; right: .25em; bottom: -.75em;}
}
#footer-menu ul {display: block; padding: 0;}
#footer-menu li {display: inline-block; padding: 1em 1em;}
#footer-menu a {font-size: 120%;}
/* NEW VERSION REPLACES ABOVE*/
#footer {display: block; background: linear-gradient(to top, rgba(203,238,227,1) 25%, rgba(255,255,255,1) 100%),#ffffff; padding-top: 1em;}
#icons {padding: .25em .25em; }
#icons * {display: inline-block;/*for height*/ height: 2.5em; padding: 0 2em;}
#icon_top {max-height: 5em; padding: 1em; position: fixed; bottom: 0; right: 0; mix-blend-mode: difference; z-index: 10;}
#icon_faq:not(#market-footer #icon_faq) {display: none;}
div.smallprint.centred {margin-bottom: 1em;}
#country.slogan {font-size: 1em; margin-top: 1.5em; padding 0 .5em;}
a[href^='#top'] {position: relative; z-index:10;} /*CHECK--keep on top*/

/* respond to screen width/orientation*/

@media (min-width: 116.25em /*1860px*/){
	body {background: repeat url(img-pattern.jpg); padding-bottom: 1em;}
	#page {border: 1px solid #bbbbbb;}
}
@media screen and (orientation:portrait){
	#banner {position: sticky; top: 0;}
}
@media screen and (max-width: 110em){
	.creative3 .slogan {top: 1em;}
	.creative3>div:nth-child(3) {bottom: 2em;}
}
@media screen and (max-width: 97.5em){
	.creative3 .slogan {width: 40%;}
	.creative3>div:nth-child(3) {width: 40%;}
}
@media screen and (max-width: 80em){
	.creative1 .slogan {right:1em;}
	.creative1>div:nth-child(3) {right: 2em;}
	.creative1 img {margin-left: 2em;}
	.creative2 .slogan {margin-left:1em;}
	.creative2>div:nth-child(3) {left: 2em;}
	.creative2 img {right: 2em;}
	.creative3 .slogan {right:1em;}
	.creative3>div:nth-child(3) {right: 2em;}
	.creative3 img {margin-left: 2em;}
	.hero img {left: 0; }}
@media screen and (max-width: 75em /*1200px*/), screen and (max-width: 75em /*1200px*/) and (orientation:portrait){
		#homeband1 {padding-right: 0;}
		#banner a {width: 50%;}
		#banner img {font-size: 2.67em;} /* alt text > banner*/
		#announcement div {font-size: 1.2em;}
		}
		@media screen and (max-width: 70em){
			.creative1, .creative2, .creative3 {
				position: static;
				padding: 2em 4em;}
			.creative1 .slogan, .creative2 .slogan, .creative3 .slogan{
				position: static;
				margin: 0 auto;
				width: 100%;}
			.creative1 img, .creative2 img, .creative3 img {
				position: static;
				margin: 2em auto;}
			.creative1>div:nth-child(3), .creative2>div:nth-child(3), .creative3>div:nth-child(3) {
				position: static;
				margin: 0 auto;
				width: 100%}
			#slide_container {width: 70%; margin-left: 25%; /*padding-right: 2em;*/}
				#slide_caption {width: 100%; position: static; text-align: center; margin-top: 1em; }
				.caption {left: 0; }
		}
@media screen and (max-width: 60em /*960px*/), screen and (max-width: 60em /*960px*/) and (orientation:portrait) {
		body {font-size: 95%;}
		#banner a {width: 60%;}
		h1 {font-size: 130%; line-height: 1.3em; margin-top: .3em; text-shadow : .22px .22px 0 #777777;}
		#form_container {margin-left: 0; }
		#error_side_pic {float: none; width: 25%;}
				}
/* 2-column*/
@media screen and (max-width: 55em /*880px*/), screen and (max-width: 55em /*880px*/) and (orientation:portrait) {
		body {font-size: 90%;}
		h1 {font-size: 120%; line-height: 1.2em; margin-top: .2em; text-shadow : .2px .2px 0 #777777;}
		#banner img {font-size: 2.25em;} /* alt text > banner*/
		#nav {width: 24%; }
		#centretext, .findit_intro, #findit_table, .contact {margin-left: 25%;}
		#homeband1 {margin-left: 25%;}
		#announcement {max-width: 22%;}
		input.next, input.previous {/*height: 4em;*/ padding: .6em;}
		#tile_container {margin-left: 25%; }
		#contact_pic {right: -6em;}
		#error_content {width: 70%;}
		#error_side_pic {width: 30%;}
		#enquiry_content {margin: 1.5em 0 1.5em 25%;}
		}
@media screen and (max-width: 55em){
	 .creative1 .slogan, .creative2 .slogan, .creative3 .slogan {position: static; width: 98%; margin: 0 auto;}
	 #creative-content {padding: 2em 0 0 0; }
	 .creative1 img, .creative2 img, .creative3 img  {width: 100%; position: static; margin-bottom: 2em;}
	 .creative1>div:nth-child(3), .creative2>div:nth-child(3), .creative3>div:nth-child(3) {position: static; width: 100%;}
	 #icons * {height: 2em; padding:.25em .5em;}
}
@media screen and (max-width: 600px /*37.5px?*/){
	.creative1, .creative2, .creative3 {
		position: static; padding: 2em .5em;}
	.hero img {
		position: static;
		margin: 1em auto;}
}
@media screen and (max-width: 45em /*720px*/), screen and (orientation:portrait) {
			.slider {width: 100%;}
			#footer {padding: 0;}
		}
/* hide menu */
@media screen and (max-width: 36em /*576px*/) , screen and (orientation:portrait) {
		body {font-size: 80%; /*background-color: #000000;*/}
		#banner a {width: 70%;}
		h1 {font-size: 105%; line-height: 1.15em; margin-top: .15em; text-shadow : .1px .1px 0 #777777;}
		/* reset menu styling, hide as default */
		#nav {float: none; width: auto; margin: 0 .5em 1em .5em; font-size: 125%; }
		#nav ul {list-style: none; overflow: hidden;}
		#nav li a {display: block; text-decoration: none;}
		#home #nav label {padding: .75em 0 .25em 0; } /* finger spacing */
		#nav>ul>li>a {padding: .75em 0 .25em 0; } /* finger spacing */
		/*#nav>ul>li:first-child>a {padding-top: 1em; } extra spacing for top*/
		/*#nav>ul>li:last-child>a {padding-bottom: 1.25em; }  extra spacing for bottom*/
		#nav #collections a {padding: .5em 0 .25em 0; }  /*spacing for sub-menu */
		#nav #collections {float: right; text-align: right; margin-top:-2em;} /* match padding on left */
		/* activate menu icon */
		.icon_menu {display: block; cursor: pointer;}
		#nav .menu {max-height: 0; transition: max-height 1s ease-out;} /*hide by default*/
		/*menu decoration */
		/* #nav {background: url("img-menu-jewellery.png") no-repeat right top; background-size: contain; }
		body.exhibition #nav {background: url("img-menu-exhibition.png") no-repeat right top; background-size: contain;}
		body.sculpture #nav {background: url("img-menu-sculpture.png") no-repeat right top; background-size: contain;}*/
		body.jewellery #nav {background: none; position: relative;}
		#homeband1 {margin-left: 0;}
		/*#announcement {margin: 0 auto 1em auto; max-width: 70%; float: none; text-align:center; border: none;}*/
		#announcement {margin: 0 auto 1em auto; max-width: 70%; float: none; text-align:center;}
		#announcement>div {font-size: 1.6em;}
		#slide_container {margin-left: auto; width: 80%;}
		#gallery_wrap {width: 79%; text-align: center;}
		input.next, input.previous {height: 3em; padding: .4em;}
		input.next, input.previous {bottom: -3em;}/*remove from touchzone*/
		.title {padding: 0 2em;} /*clear arrows*/
		#centretext, .contact {width: 68%; margin-left: 1%; margin-right: auto;}
		#contact_pic {padding-right: 1em;}
		.findit_intro, #findit_table {width: 98%; margin-left: auto; margin-right: auto;}
		#form_container {margin-left: auto; margin-right: auto; border: none;}
		#tile_container {margin-left: auto; margin-right: auto; text-align: center;}
		/* reformat readmore */
		.readmore_link { position: absolute; right:0; bottom: 0; z-index: 7; }
		.readmore_content > div {margin: .5em .5em; padding: 1em 1em; top: auto; opacity:50%;
		transform: none;
		-webkit-transform: none;
		-ms-transform: none;}
		.close_readmore {position: static; float: right; margin: 0 0 .5em .5em;}
		#slide_container {margin: 0 auto; width: 100%;}
		/*.slide {transition: none !important;}*/
		/*.caption {transition: none !important;}*/
		#mecontent {width:100%; padding: 1%; text-align: center;}
		#centretext { width: 100%; margin-left: auto; margin-right: auto; }
		#centretext, #centretext img{padding: 0 1em;}
		/* error */
		#error_pic {margin: 0 auto;}
		#error_content div {margin-bottom: 1em;}
		#error_content {width: 100%;}
		#error_title {font-size: 100%;}
		#error_side_pic {width: 40%;}
		#enquiry_content {margin: 1em 0 1em 0;}
		/*#icon_top {float: none; position: fixed; right: 0; bottom: 0; border: 0; height: 1.6em; width: auto; z-index: 3;}*/
		}
/* one column */
@media screen and (max-width: 30em /*480px*/) {
		#banner a {width: 65%;}
		#banner img {font-size: 2em;}
		#banner h1 {font-size: .85em;}
		/*#banner.error {margin-right: auto;}*/
		input.next, input.previous {height: 2em; padding: .3em;}
		#announcement {max-width: 100%; }
		}
@media screen and (max-width: 22.5em /*360px*/) {
		h1 {font-size: 100%; line-height: 1.25em; margin-top: .2em; text-shadow : .1px .1px 0 #777777;}
		#banner h1 {font-size: .75em;}
		#nav {font-size: 112.5%;}
		 /*#nav, body.sculpture #nav, body.exhibition #nav {background: none;}*/ /*menu decoration*/
		 #gallery_wrap {width: 100%; }
		 .contact {width: 96%; margin-left: auto; margin-right: auto; text-align: center;}
		 #contact_pic {display: none;}
		 /*.care_text {width: 100%; text-align: justify;}
		 .carepic {padding-left: 0; padding-bottom: .5em; float: none; display: block; margin-left: auto; margin-right: auto;} */
		 #enquiry>table, #enquiry>tbody, #enquiry>tr, #enquiry>td,
			#findit_table>table, #findit_table>tbody, #findit_table>tr, #findit_table>td
		 	{display: block; width: 100%;} /* drop tables*/
		 .findit_intro {/*margin-left: auto;*/ text-align: center;}
		 #findit_table tr td:first-child {text-align: center; padding-right: 0;}
		 #findit_table td {text-align: center; padding-right: 0;}
		 #enquiry label {display: inline-block; padding-top: .5em;}
		 #findit_table {text-align: center;}
		 #form_container {width: 96%;}
		 #form_container > * {text-align: left;} /* left-align the CONTENTS of all items within container */
		 #required1, #required2, #required3, #required4, #telephone {max-width: 15em;}
		}