/* PHONE SETUP Home Page *START* */

@media screen and (min-width: 250px) and (max-width: 550px)
{		

	body	{	font-family:Calibri,sans-serif;
			margin: 55px auto 55px auto; font-size: 14pt;
			max-width:98%;
			border: 1px solid #000;	   -moz-box-shadow:    0 0 10px #000000;
   -webkit-box-shadow: 0 0 10px #000000;
   box-shadow:         0 0 10px #000000;			}


	h1	{	font-weight: bold; font-size: 16pt; margin: 5px;	}
	h2	{	font-weight: bold; font-size: 14pt; margin: 5px;	}
	h3	{	font-weight: bold; font-size: 14pt; margin: 5px;	}
	p	{	line-height: 1.3;	}
	ul.st-nav, ul.nav, #page > botnav, .phone-off
		{	display: none !important;	}
	#top_fixed, .phone-show
		{	display: inherit !important;	}	

	#page	{	
		display: grid;
		grid-template-areas:
	 	"logo"
		"showcase"
		"main"
		"footer1"
		"footer3"
		"footer4"
		"footer2"
		"end";
		grid-gap: 2px;
		grid-template-rows: auto;
		grid-template-columns: 100%;}
	#page		{
		padding: 2px 2px 0px 2px; background-color: #272727; }

	#page > logo	{
		grid-area: logo; 
		background-color: #272727;
		padding: 5px;}
	#page > showcase	{
		grid-area: showcase;
		background-color: #fff;
		color: #555555;}
	#page > main	{
		grid-area: main;
		background-color: #fff;
		color: #555555;}
	#page > footer1	{
		grid-area: footer1;
		text-align: center; 	color: #fff; background-color: #fff;}
	#page > footer2	{
		grid-area: footer2;
		text-align: center; 	color: #fff; background-color: #272727;}
	#page > footer3	{
		grid-area: footer3;
		text-align: center; 	color: #fff; background-color: #fff;}
	#page > footer4	{
		grid-area: footer4;
		text-align: center; 	color: #fff; background-color: #fff;}
	#page > end	{
		grid-area: end;
		text-align: center; 	color: #fff; background-color: #272727;}
	#page > showcase, #page > main, #page > main2, #page > footer1, #page > footer3, #page > footer4
			{	border: 1px solid #000;
				padding: 20px 10px;
				-moz-box-shadow: inset 0 0 10px #000000;
				-webkit-box-shadow: inset 0 0 10px #000000;
				box-shadow: inset 0 0 10px #000000;	}

	.h1-logo		{	text-align: center; font-size: 12pt; color: #fff;}
	.h2-logo		{	text-align: center; font-size: 10pt; color: #fff;}
	img.top_logo	{	display: block; margin: 10px auto;
				min-width: 250px; max-width: 90%; height: auto;	}
	img.bot_logo	{	display: block; margin: 20px auto;min-width: 200px; max-width: 60%; height: auto;	}

	img.hallmark	{	display: block; margin: 20px auto;min-width: 32px; max-width: 64px; height: auto;	}

	img.img-jewellery-home-page
			{	display: block; margin: 5px auto; width: 250px; height: auto; border: 1px solid #000;
				-moz-box-shadow: 0 0 10px #000000;
				-webkit-box-shadow: 0 0 10px #000000;
				box-shadow: 0 0 10px #000000;}
	.home-blurb
			{	text-align:  center; width: 90%; margin: 20px auto 40px auto; padding: 0;	}
	.home-blurb2
			{	text-align: left; width: 100%; margin: 20px auto 20px auto;
				padding: 0;	}
	.h2-home-blurb
			{	text-align: center; font-size: 12pt; color: #555555; margin: 10px 0 0 0; padding: 0;	}

	.main-text	{	padding: 0; margin: 0; overflow: hidden;}
	.main-text h1	{	margin: 15px 0 15px 5px;	}
	.main-text h2	{	margin: 15px 0 15px 10px;	}
	.main-text h3	{	margin: 15px 0 15px 15px;	}
	.main-text p	{	margin: 15px 0 15px 20px;	}
	.main-text input[type="checkbox"],.main-text input.inputcheckbox
	{	margin: 0 10px 0 45px; vertical-align: middle; height: 25px; width: 25px; background-color: #eee;}


	#public-list-items-container	{	width:100%; margin: auto;	}

	.public-list-items		{	float: left; width: 50%; height: 310px;
					margin: 10px auto 0 auto;	}

	.public-list-items img	{	display: block; margin: 10px auto; 
					width: 80%; height: auto;
					border: 1px solid #000;
					-moz-box-shadow:    0 0 10px #000000;
					-webkit-box-shadow: 0 0 10px #000000;
					box-shadow: 0 0 10px #000000;}

	.public-list-items p		{	margin-left: 25px;	}

	#page > footer4 p	{	font-size: 10pt;	}

	ul.terms, ul.jewellery-care
			{	padding-left: 2rem;
				list-style-type: none;	}
	ul.jewellery-care li {
				padding-left: 1.5rem;
				background-image: url(../images/icons/Sapphire2-ul.png);
				background-position: 0 0;
				background-size: 1.3rem 1.1rem;
				background-repeat: no-repeat;	}
	ul.terms li	{
				padding-left: 1.5rem;
				background-image: url(../images/icons/Sapphire2-ul.png);
				background-position: 0 0;
				background-size: 1.3rem 1.1rem;
				background-repeat: no-repeat;	}
	img.hallmark-guarantee
			{	display: block; margin: 10px auto; 
				width: 80%; height: auto;
				border: 1px solid #000;
				box-shadow: 0 0 10px #000000;	}
}

@media screen and (min-width: 250px) and (max-width: 350px)
{
	#feature-holder
			{	max-width: 350px; display: block; margin: 10px auto 0 auto;
				text-align: center; text-transform: uppercase;
					}
	#feature-holder h2
			{	font-size: 9pt;	}
	#feature-holder h3
			{	font-size: 8pt;	}

	#feature-holder li
			{	width: 248px; display: inline-block; margin: 0 1px;
				padding: 0 0 20px 0;
				background: #f2f2f2;
				border: 1px solid #f2f2f2;
				box-shadow: inset 0 0 10px #000000;	}
	#feature-holder img
			{	width: 85px; height: auto;
				display: inline-block; margin: 20px 5px; padding: 3px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}
	#categories-holder, #types-holder
			{	max-width: 350px; display: block; margin: 10px auto 10px auto;
				text-align: center; text-transform: uppercase;
					}
	#categories-holder h2, #types-holder h2
			{	font-size: 9pt;	}
	#categories-holder h3, #types-holder h3
			{	font-size: 8pt;	}
	#categories-holder li, #types-holder li 
			{	width: 120px; display: inline-block; margin: 0 1px 10px 1px;
				padding: 0 0 20px 0;
				background: #f2f2f2;
				border: 1px solid #f2f2f2;
				box-shadow: inset 0 0 10px #000000;	}
	#categories-holder img, #types-holder img
			{	width: 85px; height: auto;
				display: block; margin: 20px auto; padding: 3px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}
	#categories-holder img:hover, #types-holder img:hover
				{}
	.home-event-map	{	width: 91px; margin: 20px auto; 
				position: relative;
				overflow: hidden;
				padding-top: 91px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}
	.home-blurb p
			{	font-size: 10pt;	}
	.home-blurb2 p
			{	font-size: 10pt;	}
	img.home-blurb
			{	width: 100px; height: auto;	}

	.left		{	margin: 0 30px 10px 0; float: left; clear: both; padding: 3px; border: solid 1px #555555; box-shadow: 0 0 10px #000000;	}
	.right		{	margin: 0 0 10px 30px; float: right; clear: both; padding: 3px; border: solid 1px #555555; box-shadow: 0 0 10px #000000;	}
	.middle		{	display: block; margin: 20px auto; padding: 3px; border: solid 1px #555555; box-shadow: 0 0 10px #000000;	}

	#page > end p	{	font-size: 10pt;	}

}		
@media screen and (min-width: 350px) and (max-width: 550px)
{
	#feature-holder	{	max-width: 550px; display: block; margin: 10px auto 0 auto;
				text-align: center; text-transform: uppercase;	}
	#feature-holder h2
			{	font-size: 9pt;	}
	#feature-holder h3
			{	font-size: 8pt;	}

	#feature-holder li
			{	width: 288px; display: inline-block; margin: 0 1px;
				padding: 0 0 20px 0;
				background: #f2f2f2;
				border: 1px solid #f2f2f2;
				box-shadow: inset 0 0 10px #000000;	}
	#feature-holder img
			{	width: 110px; height: auto;
				display: inline-block; margin: 20px 5px; padding: 3px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}

	#categories-holder	{	max-width: 550px; display: block; margin: 10px auto 10px auto;
				text-align: center; text-transform: uppercase;	}
	#categories-holder h2
			{	font-size: 9pt;	}
	#categories-holder h3
			{	font-size: 8pt;	}

	#categories-holder li
			{	width: 140px; display: inline-block; margin: 0 1px 10px 1px;
				padding: 0 0 20px 0;
				background: #f2f2f2;
				border: 1px solid #f2f2f2;
				box-shadow: inset 0 0 10px #000000;	}
	#categories-holder img
			{	width: 110px; height: auto;
				display: block; margin: 20px auto; padding: 3px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}
	#categories-holder img:hover {}

	.home-event-map	{	width: 116px; margin: 20px auto; 
				position: relative;
				overflow: hidden;
				padding-top: 116px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}

	.home-blurb p
			{	font-size: 11pt;	}
	.home-blurb2 p
			{	font-size: 11pt;	}
	img.home-blurb
			{	width: 100px; height: auto;	}

	.left		{	margin: 0 30px 10px 0; float: left; clear: both; padding: 3px; border: solid 1px #555555; box-shadow: 0 0 10px #000000;	}
	.right		{	margin: 5px 0 10px 30px; float: right; clear: both; padding: 3px; border: solid 1px #555555; box-shadow: 0 0 10px #000000;	}
	.middle		{	display: block; margin: 20px auto; padding: 3px; border: solid 1px #555555; box-shadow: 0 0 10px #000000;	}
	#page > end p	{	font-size: 11pt;	}
}
@media screen and (min-width: 250px) and (max-width: 550px)
{
#feature-holder img, #categories-holder img
			{background: #fff;}
#feature-holder li a, #categories-holder li a
			{transition: 0.8s;text-decoration: none; color: #555555;}
#feature-holder li a:hover, #categories-holder li a:hover
			{transition: 0.8s; color: #555555;}
}	
/* MOBILE SETUP *END* */