@charset "utf-8";

#contact-title
{

}

#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;
}

#products h4
{
	color:lime;
	font-size:1.5em;
	font-weight:900;
	text-align:center;
}

#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) ========== */



	/* ========== (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%);
								}




}