@charset "utf-8";

body
{
	abackground-color:rgba(0,0,0,0.15);
	background-blend-mode:color-burn;
}


#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;

	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
	
}

#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;

	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
}

#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;

	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
}

#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;
	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
}

#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;
	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
}

#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;

	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
}
#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;
	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
}

#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;

	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
	
}
#contact-intro-out
{
	color: navy;
	font-weight:600;
}

#contact-intro p
{
	margin: 1em 2vw;

	text-align:justify;
}

#li-contact-intro-out p::first-letter
{
	color:darkred;
	font-size:1.5em;
	font-weight:900;
}

h1
{
font-size: 100%;
}

h1 div
{
	font-size: 50%;
	margin-bottom:0.25em;
	margin-top:0.25em;
}

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




.ctc-sec-t1 li
{
	line-height:200%;
	margin-left:2em;
	margin-right:2em;
}



/* ========== (Banner) */
/* ========== (Banner) */

/* ========== (Brands) */

#input-spare-brands,
#input-bicycle-brands
{
	margin: 0 15px;
	vertical-align: middle;
}

#spare-brands > section > div > ul > li,
#bicycle-brands > section > div > ul > li
{
	float:left;
	width:calc(100% - 3em);
}

.sand-box
{
	margin:0 auto;
	position:relative;
	aaawidth:100%;
}

.sand
{
	box-shadow:  2px -0px 5px 1px black;
	display:block;
	padding:4px 3px;
}

#aul-spare-brands li:hover,
#ul-bicycle-brands li:hover	
{
	background-color: yellow;
	color:red;
	font-weight:700;
}


#bicycle-brands section:hover .sand
{
	box-shadow: inset 2px -0px 5px 1px black;
}

#ul-spare-brands,
#ul-bicycle-brands
{
	background:0;
	display:relative;
	height:calc(( 100vw / 3)); /* Height of Sandbox */
	max-height:16em;
	overflow-x:hidden;
	overflow-y:scroll;
	
	width:100%;
}

#ul-spare-brands li a,
#ul-bicycle-brands li a
{
	display:inline-block;
	position:relative;
	/* margin-top: -1px; /* Prevent double borders */
	padding:0 0.5em;
	text-decoration: none;
	vertical-align: middle;
}

/* ========== (Brands) */

/* ========== (Map)  */
/* ========== (Map)  */


/* ========== (Notes) */
/* ========== (Notes) */


/* ========== (Office Hours) */
/* ========== (Office Hours) */


/* ========== (Phone) */
/* ========== (Phone) */


/* ========== (Terms) */
/* ========== (Terms) */


/* ========== (Post) */
#contact-box li
{
	display:block;
	margin-left:2em;
}
/* ========== (Post) */


/* ========== (Products) */
/* ========== (Products) */


/* ========== (Web) */
/* ========== (Web) */


/* ========== (Staff) */
/* ========== (Staff) */


/* ========== (Streetl) */
/* ========== (Streetl) */

#staff 
{
	overflow: hidden;
}

#staff
{
	padding: 1em auto;
}

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


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


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

}


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




@media screen and (min-width:311px) and (max-width:479px)
{

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

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

	/* ========== (311) ========== */
	/* Management Section
	/* ========== (311) ========== */

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

	ul.main-ul-paddings li:hover
 	{	/* Highlight li when hovered */
		font-weight: 700;
	}

	/* ========== (311) ========== */
	/* Service Locations Section
	/* ========== (311) ========== */

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

	/* ========== (311) ========== */
	/* Staff Section
	/* ========== (311) ========== */

	#contact-data li#li-contact-staff-out
	{
		margin:10px auto;

	}


	/* #staff ul > li */
	/* { */
		/* display:block; */
		/* line-height:200%; */
		/* object-fit:contain; */
		/* padding-left:4%; */
		/* padding-right:4%; */
		/* text-align: center; */
		/* vertical-align: top; */
	/* } */

	/* #staff  img */
	/* { */
		/* width:calc(100% - 10px); */
	/* } */

	/* #staff img:hover */
	/* {	padding:3px; */
		/* box-shadow: inset 2px 2px 2px 2px black; */
	/* } */


	/* ========== (311) ========== */
	/* Suburb
	/* ========== (311) ========== */

	#li-contact-suburb-out
	{
		position:relative;
	}

	#contact-suburb
	{
		position:relative;
	}

	/* ========== (311) ========== */
	/* Telephone
	/* ========== (311) ========== */

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

}

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

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

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

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

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

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

	/* ========== (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) ========== */
	/* Management
	/* ========== (480) ========== */


	#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) ========== */
	/* Staff Section
	/* ========== (480) ========== */

	/* #contact-data li#li-contact-staff-out */
	/* { */
		/* margin:10px auto; */
	/* } */


	/* #staff ul > li */
	/* { */
		/* display:block; */
		/* line-height:200%; */
		/* object-fit:contain; */
		/* padding-left:4%; */
		/* padding-right:4%; */
		/* text-align: center; */
		/* vertical-align: top; */
	/* } */

	/* #staff  img */
	/* { */
		/* width:calc(100% - 10px); */
	/* } */
	/* #staff img:hover */
	/* {	padding:3px; */
		/* box-shadow: inset 2px 2px 2px 2px black; */
	/* } */

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

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

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

	#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) ========== */
	/* Payment Terms Section
	/* ========== (480) ========== */

	/* #li-contact-terms-out ul */
	/* { */
		/* margin: 15px 0 0 25px; */
	/* } */


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

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


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

	#contact-data li#li-contact-staff-out
	{
		margin:10px auto;
	}


	/* #staff ul > li */
	/* { */
		/* display:block; */
		/* line-height:200%; */
		/* object-fit:contain; */
		/* padding-left:4%; */
		/* padding-right:4%; */
		/* text-align: center; */
		/* vertical-align: top; */
	/* } */

	/* #staff  img */
	/* { */
		/* width:calc(100% - 10px); */
	/* } */

	/* #staff img:hover */
	/* {	padding:3px; */
		/* box-shadow: inset 2px 2px 2px 2px black; */
	/* } */

	#li-contact-suburb-out
	{
		position:relative;
	}

	#contact-suburb
	{
		position:relative;
	}

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

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

}



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



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



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

	/* Format li with bullets */
	/* #contact-accessories li, */
	/* #contact-cat li, */
	/* #contact-info-gen li, */
	/* #contact-info-add li, */
	/* #contact-management li, */
	/* #contact-suburb li, */
	/* #contact-terms li */
	/* { */
		/* display:list-item; */
		/* list-style: url(/img/bul/index_bullet_round_gray_15px.png); */
		/* line-height:200%; */
		/* margin-left:10%; */
		/* width:calc(100% - 15%); */
	/* } */

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

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

	/* ========== (720) ========== */
	/* Staff 
	/* ========== (720) ========== */

	#contact-data li#li-contact-staff-out
	{
		margin:10px auto;
		width:100%;
	}


	/* #staff ul > li */
	/* {	background-color:0; */
		/* display:inline-block; */
		/* line-height:200%; */
		/* text-align: center; */
		/* vertical-align: top; */
		/* width:calc((100% / 3) - 4px); /* Width - Margin-Left */ */
	/* } */

	/* #staff div */
	/* { */
		/* padding:10px; */
	/* } */

	/* #staff img */
	/* { */
		/* width:100%; */
	/* } */
	/* #staff img:hover */
	/* {	padding:3px; */
		/* box-shadow: inset 2px 2px 2px 2px black; */
	/* } */

}


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

	/* ========== (1280) ========== */
	/* Main
	/* ========== (1280) ========== */

	/* Format li with bullets */
	#contact-accessories li,
	#contact-cat li,
	#contact-info-gen li,
	#contact-info-add li,
	#contact-management li,
	#contact-suburb li,
	#contact-terms li
	{
		display:list-item;
		list-style: url(/img/bul/index_bullet_round_gray_15px.png);
		line-height:200%;
		margin-left:10%;
		width:calc(100% - 15%);
	}

}

hr.style10
{
	margin: 2px 15px;
}