/* TABLET SETUP Home Page *START* */

@media screen and (min-width: 550px) and (max-width: 1000px)
{	body	{	font-family:Calibri,sans-serif;
			margin: 55px auto 55px auto; font-size: 14pt;
			max-width:95%;
			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 logo"
		"showcase showcase"
                   		"main main"
                     	"footer1 footer3"
                     	"footer2 footer2"
                     	"footer4 footer4"
		"end end";
		grid-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: 50% 1fr;}
	#page		{
		padding: 5px 5px 0px 5px; background-color: #272727; }

	#page > logo	{
		grid-area: logo; 
		background-color: #272727;
		padding: 10px;}
	#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, #page >  end
			{	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: 60%; height: auto;	}
	img.bot_logo	{	display: block; margin: 10px auto;min-width: 200px; max-width: 50%; height: auto;	}

	img.hallmark	{	display: block; margin: auto auto;min-width: 64px; max-width: 128px; 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;}

	#feature-holder	{	max-width: 800px; display: block;
				margin: 30px auto 20px auto;					border: solid 1px #555555;
				text-align: center; text-transform: uppercase;
				overflow: hidden;
				background: #f2f2f2;
				border: 1px solid #f2f2f2;
				box-shadow: inset 0 0 10px #000000;		}

	#feature-holder li
			{	transition: 0.8s;
				display: inline-block; margin: 0;
				padding: 0 0 20px 0;
}
	#feature-holder img
			{	min-width: 200px; max-width: 300px; height: auto;
				display: inline-block; margin: 20px 10px; padding: 3px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}

	#feature-holder:hover {	transition: 0.8s;
				box-shadow: inset 0 0 10px #ffff00;	}

	#categories-holder, #types-holder
			{	max-width: 800px; display: block; margin: 0 auto 60px auto;		border: solid 1px #555555;
				background: #f2f2f2;
				border: 1px solid #f2f2f2;
				box-shadow: inset 0 0 10px #000000;
				text-align: center; text-transform: uppercase;	}

	#categories-holder li, #types-holder li
			{	transition: 0.8s;
				display: inline-block; margin: 5px;
				padding: 0 0 20px 0;	}
	#categories-holder img, #types-holder img
			{	width: 200px; height: auto;
				display: block; margin: 20px; padding: 3px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}
	#categories-holder li:hover, #types-holder li:hover
			{	transition: 0.8s;
				box-shadow: inset 0 0 10px #ffff00;	}

#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;}
	.home-event-map	{	width: 206px; margin: 20px auto; 
				position: relative;
				overflow: hidden;
				padding-top: 206px;
				border: solid 1px #555555; box-shadow: 0 0 10px #000000;				}


	.home-blurb
			{	text-align: center; width: 95%; margin: 20px auto 20px 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: 16pt; color: #555555; margin: 20px 0 0 0; padding: 0;	}
	img.home-blurb
			{	width: 125px; height: auto; margin-top:10px;	}

	.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;	}
	.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:95%; margin: auto;	}

	.public-list-items		{	float: left; width: 33%; height: 325px;
					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;	}
}

/* TABLET SETUP *END* */