@charset "utf-8";


body
{
	background-position:top, bottom, left, right, bottom!important;
}

#contact-title
{

}

#products
{
	background:azure;


}

#contact-title .storefront-transparent img
{
	abox-shadow:
	inset -15px 0 120px -70px #f0f, /* left magenta */
	inset -60px 0 120px -70px #0ff; /* right cyan */
	amix-blend-mode: overlay;
}

.storeinside.logo div,
.storeinside-transparent.logo div
{
	afont-size: 300%;
	color:white;
	font-weight: 700;
	line-height: 100%;
	amargin-bottom:1em;
	margin-top:2em;
	avertical-align:bottom!important;
	text-align: center;
	text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black, 1px 1px 3px black, 3px 3px 3px black;
}


.storeinside.logo div:nth-child(2),
.storeinside-transparent.logo div:nth-child(2)
{
	margin-bottom:1em;
	margin-top:1em;
}

.storeinside .logo
{
	margin-top:1em;
}

.storeinside .logo:hover
{
	box-shadow:none!important;
}


#products li
{
	
}

#products p
{
}

#products h4
{
	color:blue;
	font-size:1.2em;
	font-weight:900;
	atext-shadow: -1px -1px 1px black, -1px 1px 1px black, 1px -1px 1px black, 1px 1px 1px black;
}

#contact-title  #header-txt-title
{

}


	#contact-staff 
	{
		overflow: hidden;
	}

	#contact-staff
	{
		padding: 1em auto;
	}
	#contact-staff ul:nth-of-type(1) li
	{
		display:block;
		afilter:grayscale(100%);
		margin:0 auto 2em;
		text-align: center;
		transition: 0.5s all;
		vertical-align: top;
		width:100%;
	}


	#contact-staff ul:nth-of-type(1) li > div 
	{
		border-color:rgba(231,231,231,1.00);
		border-radius: 50%;
		abox-shadow: 3px 3px 3px black;
		border-style:solid;
		border-width:5px;
		height:15em;
		position:relative;
		text-align: center;
		margin:auto;
		width:15em;
	}


	#contact-staff ul:nth-of-type(1) li > div > div
	{
		border-color:black;
		border-radius:50%;
		border-style:solid;
		border-width:4px;
		height:calc(100% - 8px);
		left:50%;
		overflow:hidden;
		position:absolute;
		top:50%;
		transform: translate(-50%, -50%);
		width:calc(100% - 8px);
	}

	#acontact-staff .ps div:hover
	{
		abox-shadow: -3px -3px 3px black;
	}

	#contact-staff a img
	{
		
		height:100%;
		width:100%;
	}


	#acontact-staff ul:nth-child(1) > li:hover
	{
		filter:none;
	}


	#acontact-staff img:hover
	{	
		box-shadow: inset 3px 3px 3px black;
	}


/* ========== (All) ========== */
/* Postal Address
/* ========== (All) ========== */

#contact-box li 				{
									display:block;
									margin-left:2em;
								}



/* ========== (All) ========== */
/* Street Address
/* ========== (All) ========== */

#li-contact-str-out 			{}

#contact-str 					{}

#contact-str li 				{
									display:block;
									margin-left:2em;
								}

/* ========== (All) ========== */
/* Suburb
/* ========== (All) ========== */



/* ========== (All) ========== */
/* Categories
/* ========== (All) ========== */


li #contact-cat					{
									padding:5%;	
								}


#contact-cat > ul > li		{
									clear:both;
									list-style: url(../../../../../../../../img/bul/index_bullet_round_gray_15px.png);
									margin-bottom:1em;
									margin-left:1em;
									margin-top:1em;
								}




@media screen and (min-width:311px) and (max-width:719px)
{
	/* ========== (480) ========== */
	/* Header
	/* ========== (480) ========== */

	.header-title-txt 				{
										font-size: 2em;
										margin:auto;
									}

	/* ========== (480) ========== */
	/* Section  - Data Section
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/* Information Section - General
	/* ========== (480) ========== */

	ul.main-ul-paddings li ul li 	{
									}


	ul.main-ul-paddings li:hover 	{	/* Highlight li when hovered */
										color:yellow;
										font-weight: 700;
										text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black, 1px 1px 5px black, 1px 1px 1px black;
									}

	ul#contact-data 				{	/* Provision for li shadows */
										padding:3%;
									}

	#contact-data > li				{}





	.shopinside  					{	/* Container for shop inside images */
										background-color:white;
										padding:8px;
									}

	.shopinside img 				{
										display:block;
										margin:0 auto;
										width:100%;
									}




	/* ========== (480) ========== */
	/* Sections Floated Right 								 */
	/* ========== (480) ========== */

	#li-contact-www-out,
	#li-contact-box-out,
	#li-contact-suburb-out,
	#li-contact-info-add-out

									{}

	#contact-www,
	#contact-box,
	#contact-suburb,
	#contact-info-add 				{	/* Change properties for Number block ul li's */
										display:block;
									}




	/* ========== (480) ========== */
	/* Format Sections with clickable Buttons!
	/*----------------------------
	/* Section - Telephone Numbers
	/* Section - Internet Address
	/* Section - Social Media
	/* Section - Service Location
	/* ========== (480) ========== */




	/* ========== (480) ========== */
	/* Section - Telephone Numbers 					 */
	/* ========== (480) ========== */

	#contact-tel ul li:nth-child(2) ul li:nth-child(1) 	/* Set height for fax icon */
									{
										height:62px;
									}



	/* ========== (480) ========== */
	/* Social Media Section
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/* Postal Address
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/* Street Address
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/* Slideshow
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/* Management
	/* ========== (480) ========== */

	#contact-staff ul:nth-of-type(1) li > div 
	{
		height:12em;
		width:12em;
	}

	/* ========== (480) ========== */
	/* Section -  Google Map 						 */
	/* ========== (480) ========== */





	/* ========== (480) ========== */
	/* Office Hours Section
	/* ========== (480) ========== */


	.contact-office-weekday  		{
										margin-left:25px;
									}

	.contact-office-weekday ul 		{}

	.contact-office-weekday > li 	{
										margin:4.7px auto auto 0;
										text-align: left;
										width:100%;
									}

	.contact-office-hours 			{}

	.contact-office-hours ul 		{}

	.contact-office-hours li 		{
										display:inline-block;
										line-height:100%;
										text-align: center;
									}

	.office-hours-start-time	 	{
										width:40%;
									}

	.office-hours-end-time			{
										width:40%;
									}

	/* ========== (480) ========== */
	/* Section - Payment Method Section

	/* ========== (480) ========== */


	/* ========== (480) ========== */
	/* Section - Payment Method
	/* Section - Suburb

	/* ========== (480) ========== */

	#li-contact-terms-out			{}

	#contact-terms					{}

	/* ========== (480) ========== */
	/* Staff Section
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/* Suburb Section
	/* ========== (480) ========== */

	#li-contact-suburb-out			{}

	#contact-suburb					{}




	/* ========== (480) ========== */
	/* Service Locations 							 */
	/* ========== (480) ========== */

	#li-contact-loc-out				{
										display:block;
									}

	/* ========== (480) ========== */
	/* General Info 								 */
	/* ========== (480) ========== */


	#li-contact-info-gen-out 		{}


	#contact-info-gen				{}

	#li-contact-info-gen-out p 		{
										display:list-item;
										line-height:200%;
										margin-left:15px;
										margin-right:15px;
									}


	/* ========== (480) ========== */
	/*  Banner Section
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/*  Brands Section 					 		 */
	/* ========== (480) ========== */


	/* ========== (480) ========== */
	/*  Section
	/* ========== (480) ========== */

	#li-contact-cat-out				{}

	#contact-cat 					{}

	/* ========== (480) ========== */
	/* Information Additional Section
	/* ========== (480) ========== */

	#li-contact-info-add-out 		{}

	#contact-info-add 				{}



	/* ========== (480) ========== */
	/* Management Section
	/* ========== (480) ========== */

	#li-contact-management-out		{}

	#contact-management-out h4		{		
										font-size: 120%;
										font-weight: bold;
									}

	#contact-management ul li h4 	{	/* Display Bullets with Headers */
										display:list-item;
									}

	#contact-management ul			{
										font-size: 100%;
										font-weight:normal;
										margin-left:10%;
										text-align: left;
									}

	#contact-management li			{	
										width:calc(100% - 25px);
									}

	div #contact-management > ul > li:hover	{	/* Highlight all li when hovered */
										color:yellow;
										font-weight: 900;
										text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black, 1px 1px 5px black, 1px 1px 1px black;
									}



	/* ========== (480) ========== */
	/* Office Hours Section
	/* ========== (480) ========== */


	.contact-office-weekday  		{
										margin-left:25px;
									}

	.contact-office-weekday ul 		{}

	.contact-office-weekday > li 	{
										margin:4.7px auto auto 0;
										text-align: left;
										width:100%;
									}

	.contact-office-hours 			{	
										margin-left:10%;
									}

	.contact-office-hours ul 		{}

	.contact-office-hours li 		{
										display:inline-block;
										line-height:100%;
										text-align: center;
									}

	.office-hours-start-time	 	{
										width:40%;
									}

	.office-hours-end-time			{
										width:40%;
									}



	/* ========== (480) ========== */
	/*	Footer
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/*	WIKINAM Navigation Section - Left Side Menu
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/*	Navigation Section - Right Side Menu
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/* Define buttons with characters
	/* ========== (480) ========== */



	/* ========== (480) ========== */
	/*	Footer Title
	/* ========== (480) ========== */

}



@media screen and (min-width:720px) and (max-width:1279px)
{
	/* ========== (720) ========== */
	/* Page
	/* ========== (720) ========== */

li#products
{
	margin-left:10%!important;
	width:80%!important;
}

	/* ========== (720) ========== */
	/* Header
	/* ========== (720) ========== */



	/* ========== (720) ========== */
	/* Main
	/* ========== (720) ========== */



	/* ========== (720) ========== */
	/* Data Section
	/* ========== (720) ========== */



	/* ========== (720) ========== */
	/* Information General
	/* ========== (720) ========== */



	/* ========== (720) ========== */
	/* Sections Floated left
	/* ========== (720) ========== */



	/* ========== (720) ========== */
	/* Sections Floated Right
	/* ========== (720) ========== */



	/* ========== (720) ========== */
	/* Format Sections with clickable Buttons!
	/* ========== (720) ========== */



	/* ========== (720) ========== */
	/* Format Sections with clickable Buttons!
	/*----------------------------
	/* Telephone Numbers
	/* Internet Address
	/* Social Media
	/* Service Location
	/* ========== (720) ========== */

	#contact-tel ul li ul li:nth-child(1),
	#contact-www ul li ul li:nth-child(1),	/* Modify li containing Image */
	#contact-sm ul li ul li:nth-child(1),
	#contact-loc ul li ul li:nth-child(1)

									{	/* Position li Button */
										display:inline-block;
										margin-left:10%;
										width:64px;
									}

	#contact-tel ul li ul li:nth-child(2),	/* Modify li containing Data */
	#contact-www ul li ul li:nth-child(2),
	#contact-sm ul li ul li:nth-child(2),
	#contact-loc ul li ul li:nth-child(2)
									{
										display:inline-block;
										text-align:right;
										width:calc(100% - 10% - 100px);
									}


	#contact-tel ul.main-ul-paddings > li,
	#contact-www ul.main-ul-paddings > li,
	#contact-sm ul.main-ul-paddings > li,
	#contact-loc ul.main-ul-paddings > li
										/* Change properties for Contact Number block ul li's */
									{
										width:100%;
									}



	/* ========== (720) ========== */
	/* Telephone Numbers
	/* ========== (720) ========== */

	#contact-tel ul li:nth-child(2) ul li:nth-child(1) 	/* Set height for fax icon */
									{
										height:62px;
									}


}


@media screen and (min-width:1280px)
{

	#contact-info-gen p
								{	/* Format li with bullets */
									display:list-item;
									line-height:200%;
									margin-left:10%;
									width:calc(100% - 15%);
								}




}