/*
Brock U plugin CSS

*/

/* ----------------------------------------------
   ----------------------------------------------
   Large Screen desktops (Default)
   ----------------------------------------------
   ---------------------------------------------- */


/* Filter bar */

.filterbar-container {
	padding: 2em 0 0 0; margin-bottom: 0;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #e8e8e8;
	}
.filterbar-container hr { clear: both; background: transparent; margin-bottom: 2em !important; }


/* List */

.filterbar-container ul,
.filterbar-container ul li {
	padding: 0 !important; margin: 0 !important;
	list-style-type: none;
	}
	
.filterbar-container ul li {
	float: left;
	padding-right: 3em !important;
	}

/* Search */

.filterbar-container ul li.tableSearchContainer { width: 35%; }

.filterbar-container input.search-input {
	padding: 15px !important;
	display: block;
	width: 100%;
	font-size: 1em !important;
	}
	.filterbar-container input.search-input:hover,
	.filterbar-container input.search-input:focus { }


/* Drop down */

.filterbar-container ul li.filterbycolumn { 
	display: block; 
	width: 30%;
	}

.filterbar-container select {
	margin-top: .8em;
	width: 100%;
	font-size: .9em !important;
	
	}

.filterbar-container p {
	padding: 1em 0 0 0;
	display: block;
	clear: both;
	}


/* Reset */

.filterbar-container ul li.control { float: right; width: auto; padding: 0 0 0 0 !important; text-align: right; }

.filterbar-container .button.reset { padding: 19px 20px 18px 20px !important; font-size: .8em; }
.filterbar-container .button.reset:after { content: none !important; }


/* Filter by buttons */

.filterbar-container .btn {
	padding: 5px 10px; margin-right: 5px;
	border: none !important;
	font-size: .8em;
	background: #cc0000;
	outline: none;
	white-space: normal !important;
	display: inline;
	line-height: 245%;
	color: #fff !important;
	text-decoration: none !important;
	-webkit-transition: color .1s ease-out !important;
		-ms-transition: color .1s ease-out !important;
       -moz-transition: color .1s ease-out !important;
       	 -o-transition: color .1s ease-out !important;
    		transition: color .1s ease-out !important;
    -webkit-transition: background-color .1s ease-out !important;
    	-ms-transition: background-color .1s ease-out !important;
       -moz-transition: background-color .1s ease-out !important;
       	 -o-transition: background-color .1s ease-out !important;
    		transition: background-color .1s ease-out !important;
	}
.filterbar-container .btn:hover,
.filterbar-container .btn:focus,
.filterbar-container .btn.active {
	color: #fff !important;
	cursor: pointer;
	background: #000;
	border: none !important;
	}
.filterbar-container .btn:active {
	color: #fff !important;
	cursor: pointer;
	background: #000;
	}

.filterbar-container .btn .fa { color: #d8d8d8; }
.filterbar-container .btn:hover .fa,
.filterbar-container .btn:focus .fa,
.filterbar-container .btn.active .fa { color: #fff; }

/* Filter alphabetically */

.filterbar-container li.alpha { margin-top: 1.8em !important; width: 100%; clear: both; padding-right: 0 !important; }

.filterbar-container li.alpha {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
	grid-template-rows: 1fr; 
	grid-column-gap: 1px;
	grid-row-gap: 0px;
	}

.filterbar-container .btn.alpha { 
	padding: 4px 0; margin: 0;
	display: inline-block;
	text-align: center;
	font-size: .7em;
	font-family: "Bliss Bold";
	font-weight: bold;
/*
	width: 3.84%; margin: 0;
	border-right: 1px solid #fff !important;
*/
	}
	
.filterbar-container .btn.alpha.off,
.filterbar-container .btn.alpha.off:hover,
.filterbar-container .btn.alpha.off:focus { background: #f8f8f8; color: #585858 !important; cursor: default; }



/* Item list */

.directory-listing .item {
	padding: 1.2em 1.5em 1.3em 1.5em;margin: 0 0 0 0;
	display: block;	
	background: #f8f8f8;
	border-bottom: 1px solid #e8e8e8;
	
	-webkit-transition: background-color .1s ease-out !important;
		-ms-transition: background-color .1s ease-out !important;
       -moz-transition: background-color .1s ease-out !important;
       	 -o-transition: background-color .1s ease-out !important;
    		transition: background-color .1s ease-out !important;
	}
	
	.directory-listing .item:nth-of-type(odd) { background: #fcfcfc; }
	.directory-listing .item:hover { background: #f4f4f4; }


.directory-listing .item .vitals {
	float: left;
	-webkit-transition: padding .1s ease-out !important;
		-ms-transition: padding .1s ease-out !important;
       -moz-transition: padding .1s ease-out !important;
       	 -o-transition: padding .1s ease-out !important;
    		transition: padding .1s ease-out !important;
	}
/* 	.directory-listing .item:hover .vitals { padding-left: 15px; border-left: 5px solid #cc0000; } */
	
	.directory-listing .item .vitals h2 { font-size: 1.2em !important; }
	.directory-listing .item:hover .vitals h2 { }
	
.directory-listing .item .link {
	margin-right: 3em;
	float: left;
	font-size: .9em;
	}
	.directory-listing .item .link .fa-link {
		float: left;
		font-size: .9em;
		}
	.directory-listing .item .link a .fa {
		margin: 0 0 0 10px;
		}
.directory-listing .item .phone,
.directory-listing .item .extension {
	margin-right: 3em;
	float: left;
	font-size: .9em;
	}
.directory-listing .item .email {
	float: left;
	font-size: .9em;
	}

.directory-listing .item .tags {
	float: left;
	font-size: .9em;
	}

.directory-listing .item .link .fa,
.directory-listing .item .phone .fa,
.directory-listing .item .extension .fa,
.directory-listing .item .email .fa {
	margin-right: 10px;
	color: #cc0000;
	}


.directory-listing .item .social {
	padding-top: 1em;
	float: right;
	}
	.directory-listing .item .social a {
		font-size: 1.3em;
		margin-left: 20px;
		}
	
	/* Social colours */
	.directory-listing .item .social a span.fa-facebook,
	.directory-listing .item .social a span.fa-facebook-square { color: #3b5998; }
	.directory-listing .item .social a span.fa-twitter { color: #00aced; }
	.directory-listing .item .social a span.fa-instagram { color: #a62bb5; }
	.directory-listing .item .social a span.fa-snapchat-ghost { color: #000; } /* yellow fffc00 */
	.directory-listing .item .social a span.fa-linkedin,
	.directory-listing .item .social a span.fa-linkedin-square { color: #007bb6; }
	.directory-listing .item .social a span.fa-youtube,
	.directory-listing .item .social a span.fa-youtube-play { color: #bb0000; }
	.directory-listing .item .social a span.fa-google-plus { color: #dd4b39; }
	.directory-listing .item .social a span.fa-flickr { color: #ff0084; }
	.directory-listing .item .social a span.fa-pinterest { color: #cb2027; }
	.directory-listing .item .social a span.fa-tumblr { color: #32506d; }
	.directory-listing .item .social a span.fa-vimeo { color: #aad450; }
	.directory-listing .item .social a span.fa-qq { color: #000000; }
	.directory-listing .item .social a span.fa-weibo { color: #E71D34; }
	
	#content .directory-listing .item .social a span { color: #cc0000; } /* Set all icons to Brock red for now */
	
	#content .directory-listing .item .social a:hover span,
	#content .directory-listing .item .social a:focus span { color: #000; }

/* ----------------------------------------------
   ----------------------------------------------
   tablets
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width : 951px) and (max-width: 1114px) {
	


}



/* ----------------------------------------------
   ----------------------------------------------
   Small tablets
   ----------------------------------------------
   ---------------------------------------------- */
   
@media only screen 
and (min-width : 841px) and (max-width: 950px) {
	
	.filterbar-container ul li.control { float: left; }
	
	.filterbar-container li.alpha {
		display: inline;
		}
	
	.filterbar-container .btn.alpha { 
		padding: 3px 0; margin: 0 1px 1px 0; 
		width: 40px; 
		font-size: .7em;
		border-right: none !important;
		}

}



/* ----------------------------------------------
   ----------------------------------------------
   Mobile
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (max-width: 840px) {
	
	/* Filterbar */
	.filterbar-container ul li {
		padding-bottom: 1em !important;
		float: none;
		width: 100% !important;
		padding: 0 0 5px 0 !important;
		}
	.filterbar-container ul li.separator { display: none; }
	
	.filterbar-container ul li.control {
		padding: 1em 0 1em 0 !important;
		text-align: left;
		}
	.filterbar-container button {
		margin: 0 1em 0 0;
		}
	.filterbar-container select {
		border: none;
		font-size: 16px !important;
		}
	
	.filterbar-container input.search-input {
		padding: 15px !important;
		display: block;
		width: 100%;
		font-size: 16px !important;
		}
		
	.filterbar-container li.alpha {
		display: inline;
		}
	.filterbar-container .btn.alpha { 
		padding: 3px 0; margin: 0 1px 1px 0; 
		width: 40px; 
		font-size: .7em;
		border-right: none !important;
		}	
	
	
	.filterbar-container .button.reset { padding: 15px 20px 14px !important; float: none; margin-bottom: 15px; }
	
	/* Items */
	
	.directory-listing .item { padding: 15px 15px; }
	
	.directory-listing .item:hover .vitals { padding-left: 0; border-left: none; }
	
	.directory-listing .item .link {
		margin: 0;
		float: none;
		font-size: .9em;
		}
		.directory-listing .item .link .fa-link {
			float: left;
			font-size: .9em;
			}
		.directory-listing .item .link a .fa {
			margin: 0 0 0 10px;
			}
	.directory-listing .item .phone,
	.directory-listing .item .extension {
		margin: 10px 15px 0 0;
		float: none; display: inline-block;
		font-size: .9em;
		}
	.directory-listing .item .email {
		margin: 10px 0 0 0;
		float: none; display: inline-block;
		font-size: .9em;
		}
	
	.directory-listing .item .social {
		padding-top: 10px;
		float: none; clear: both;
		}
		.directory-listing .item .social a {
			font-size: 1.5em;
			margin: 0 10px 0 0;
			}

}