/*
Plugin: Brock University CPT Builder
Author: Sebastien Marchal / BrockU
*/

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

/* Global
----------------------- */
.btn {
	padding: 5px 7px 5px 7px; margin-right: 5px;
	border: none;
	font-size: .8em;
	background: #f0f0f0;
	white-space: normal !important;
	display: inline;
	line-height: 100%;
	color: #585858;
	text-decoration: none !important;
    transition: color .1s ease-out !important;
    transition: background-color .1s ease-out !important;
	}

.btn:hover,
.btn.is-checked {
	color: #fff !important;
	cursor: pointer;
	background: #cc0000;
/* 	box-shadow: 0 3px 0 #cc0000, 0 -3px 0 #cc0000; */
	border: none !important;
	}
.btn:focus,
.btn:active {
	color: #fff !important;
	cursor: pointer;
	background: #000;
/* 	box-shadow: 0 3px 0 #8c0000, 0 -3px 0 #8c0000; */
	}

.btn .fa { color: #d8d8d8; }
.btn:hover .fa,
.btn:focus .fa,
.btn.is-checked .fa { color: #fff; }

.btn img { vertical-align: middle; margin: 0 3px 3px 0 !important; }
.btn:hover img, .btn:active img, .btn:focus img, .btn.is-checked img { filter: brightness(0) invert(1); }


/* Filter bar
----------------------- */
#sorts {
	padding: 1.5em 0 1.2em 0;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
/* 	line-height: 200%; */
	}
#sorts hr,
hr.clear { clear: both; background: transparent; }

/* buttons sub group */
.buttons {
	display: inline-block;
	vertical-align: top;
}
.buttons:first-child { width: 30%; }
.buttons:nth-child(2) { width: 30%; padding-right: 0; }
.buttons:nth-child(3) { width: 39%; padding-left: 3em; }

#sorts .btn { padding: 5px 7px; margin: 0 8px 8px 0; display: inline-block; }

#sorts .btn.reset {
	padding: 5px 7px 5px 7px; margin-right: 0;
	border: none;
	font-size: 1em;
	float: right;
}
h2 .btn.reset {
	padding: 8px 10px;
	font-size: .6em !important;
	font-family: "Bliss Light", "Trebuchet MS", sans-serif;
	font-weight: 200;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	float: right; display: none;
}
h2 .btn.reset:hover { background-color: #000; }

#sorts .brocku-cpt-search label { margin-bottom: 10px; }
#sorts .brocku-cpt-search input { width: 80%; margin-bottom: 10px; }

#sorts .select { margin: 0 0 10px 0; display: block; clear: both; }
#sorts .select label { padding-top: 5px; }
#sorts .select select { width: 250px; margin-left: 10px; padding: 4px; float: right; }
#sorts .meta { display: inline; float: right; }
#sorts label { float: left; font-family: "Circular Black", "Trebuchet MS", sans-serif; font-weight: bold; color: #000; }
#sorts .filter-label { display: inline-block; font-family: "Circular Black", "Trebuchet MS", sans-serif; font-weight: bold; color: #000; margin-bottom: 10px; }

h2.filtertitle { margin-top: 1.5em !important; }
h2.filtertitle span.count { padding-left: 10px; font-size: .5em; font-family: "Circular Light", "Trebuchet MS", sans-serif; font-weight: 200; color: #000; line-height: normal; }

/* Keywords panel */
.keywords-panel {
	overflow: hidden;
	transition: max-height 500ms ease-out, opacity 500ms ease-out;
	max-height: 0;
	opacity: 0;
}
.keywords-more-toggle { display: inline-block; width: 30px; text-align: center; color: #fff; background: #cc0000; }
.keywords-panel.is-open {
	max-height: 20rem;
	opacity: 1;
}

.keywords-panel-inner { padding-top: 0.75em; }

@media (prefers-reduced-motion: reduce) { 
	.keywords-panel { transition: none; }
}

/* Grid specific adjustments */

#grid .btn { line-height: 160%; }


/* Grid
----------------------- */
#grid {
	margin: 1.3em 0 !important; padding: 0 !important;
	list-style-type: none;
	}

.grid-sizer,
#grid .item { width: 23.5%; }
.gutter-sizer { width: 2%; }

#grid .item {
	margin: 0 0 1.5em 0 !important;
	float: left;
	position: relative;
	padding: 0 0 .5em 0;
    transition: background-color .1s ease-out;
	border: 1px solid #e0e0e0;
	}
#grid .item:hover { border-color: #585858; }
#grid .item:hover img { opacity: .9; }

#grid .item .content {
	padding: 1em;
}
#grid .item .image {
	overflow: hidden;
}
#grid .item .image img {
	transition: opacity .1s ease-out;
}
#grid h3 {
	margin: 0; padding: 0;
	font-size: 1.2em;
	line-height: 110%;
	font-family: "Circular Black", "Trebuchet MS", sans-serif;
	font-weight: bold;
	text-transform: none;
	letter-spacing: 0;
	}
	#grid .item:hover h3 a,
	#grid .item:focus h3 a { color: #000 !important; text-decoration: none !important; }
	
#grid .item p { margin: .5em 0 0 0; font-size: 1em; line-height: 120%; }

.item span.tags { padding-left: 5px; margin-bottom: 10px !important; line-height: 100% !important; }
.item span.tags a {
	margin: 0 4px 5px 0;
	position: relative;
	white-space: nowrap;
	font-size: .6em;
	z-index: 2;
	border: none !important;
	}

.item .readmore {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: transparent;
	text-indent: -99999px;
	z-index: 1;
	}

#grid .item hr {
	visibility: hidden;
	clear: both;
	margin: 0;
}


/* Single CPT page
----------------------- */

.single-cpt h1 { }

.specs { margin-bottom: 2em; padding-bottom: 1em; border-bottom: 1px solid #f0f0f0; }
.specs p { line-height: 190% !important; }

.specs .chip { 
	padding: 5px 7px 5px 7px; margin: 0 10px 5px 0 !important;
	border: none;
	font-size: .8em;
	background: #f0f0f0;
	white-space: normal !important;
	color: #585858;
	display: inline-block; padding: 0 7px; line-height: 200%; 
}

#content .specs a.btn { border: none !important; color: #585858; }

.col1 { width: 60%; float: left; }
.col2 { width: 33%; float: right; }
.full-width { width: 100%; clear: both; margin-top: 3em; /* padding-top: 3em; border-top: 1px solid #f0f0f0; */ background: #f8f8f8; }

.single-cpt .button { margin-bottom: 1em; font-size: .9em !important; border: none !important; }
.single-cpt .button.clear { padding: 14px 19px 13px 19px !important; }

.block { margin-bottom: 2em !important; padding: 1em 1em 1.2em 1em; border: 1px solid #787878 !important; border: none !important; background: #f6f6f6 !important; }
.block span.title { display: inline-block; margin-top: 15px !important; text-transform: uppercase; letter-spacing: 0.05em; font-size: .7em; }
.block span.fa { margin-right: 10px; color: #cc0000; }
.block .general { margin-bottom: 0; display: inline-block; }



/* ----------------------------------------------
   ----------------------------------------------
   Tablets
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width : 1115px) and (max-width: 1500px) {

	#sorts .select select { width: 200px; }

	
}

/* ----------------------------------------------
   ----------------------------------------------
   Tablets
   ----------------------------------------------
   ---------------------------------------------- */

@media only screen 
and (min-width : 951px) and (max-width: 1114px) {
	
	#sorts .select select { width: 300px; }

	.buttons:first-child { width: 40%; }
	.buttons:nth-child(2) { width: 59%; padding-right: 0; }
	.buttons:nth-child(3) { width: 100%; padding: 2em 0 0 0; }
	
	.grid-sizer,
	#grid .item { width: 32%; }
	.gutter-sizer { width: 2%; }
	#grid .item { margin: 0 0 1.5em 0 !important; }

}



/* ----------------------------------------------
   ----------------------------------------------
   Small Tablet
   ----------------------------------------------
   ---------------------------------------------- */
   
@media only screen 
and (min-width : 841px) and (max-width: 950px) {
	
	#sorts .select select { width: 250px; }
	
	.buttons:first-child { width: 40%; }
	.buttons:nth-child(2) { width: 59%; padding-right: 0; }
	.buttons:nth-child(3) { width: 100%; padding: 2em 0 0 0; }
	
	.grid-sizer,
	#grid .item { width: 32%; }
	.gutter-sizer { width: 2%; }
	#sorts .meta { padding-top: 15px; display: inline; float: left; }
	
	.full-width .col { width: 50%; -webkit-flex-basis: 50%; -ms-flex-basis: 50%; }
	.full-width .col.mid { border: none; }
	.full-width .col.last { width: 100%; float: none; clear: both; margin-bottom: 0em; border-top: 1px solid #e8e8e8; -webkit-flex-basis: 100%; -ms-flex-basis: 100%; }

}



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

@media only screen 
and (min-width : 481px) and (max-width: 840px) {

	#sorts .meta { padding-top: 15px; display: inline; float: left; }
	
	#sorts .select select { width: 100%; margin-left: 0; }
	#sorts .brocku-cpt-search input { width: 100%; margin-bottom: 10px; }
	
	#sorts .brocku-cpt-search label,
	#sorts .select label { margin-bottom: 5px; }
	
	.buttons:first-child { width: 100%; }
	.buttons:nth-child(2) { width: 100%; padding: 2em 0 0 0; }
	.buttons:nth-child(3) { width: 100%; padding: 2em 0 0 0; }
	
	h2.filtertitle span.label { max-width: 100%; display: block; }
	h2.filtertitle span.count { display: block; clear: both; padding-left: 0; font-size: .5em; }
	h2 .btn.reset {
		padding: 4px 6px;
		font-size: .5em !important;
		float: none; display: none;
	}
	
	.grid-sizer,
	#grid .item { width: 48%; }
	.gutter-sizer { width: 4%; }
	#grid .item { margin: 0 0 1em 0 !important; }
	

	.full-width .information { display: inherit; /* disable flexbox to prevent bugging out */ }

	.col1 { width: 100%; float: none; margin-bottom: 3em; }
	.col2 { width: 100%; float: none; }
	.full-width .col { width: 100%; float: none; margin-bottom: 0em; border-bottom: 1px solid #e8e8e8; border-right: none; }
	.full-width .col.last { border: none; }

}



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

@media only screen 
and (max-width: 480px) {
	
	#sorts { border-bottom: none; padding-bottom: 0; }
	#sorts .select { margin: 10px 0; display: block; width: 100%; clear: both; }
	#sorts .select select { width: 100%; margin-left: 0; }
	#sorts .brocku-cpt-search input { width: 100%; margin-bottom: 10px; }
	
	#sorts .brocku-cpt-search label,
	#sorts .select label { margin-bottom: 5px; }
	
	.buttons:first-child { width: 100%; }
	.buttons:nth-child(2) { width: 100%; padding: 2em 0 0 0; }
	.buttons:nth-child(3) { width: 100%; padding: 2em 0 0 0; }
	
	#sorts .meta { display: inline; float: left; }

	h2.filtertitle span.label { max-width: 100%; display: block; }
	h2.filtertitle span.count { display: block; clear: both; padding-left: 0; font-size: .5em; }
	h2 .btn.reset {
		padding: 4px 6px;
		font-size: .5em !important;
		float: none; display: none;
	}

	#grid {  }
	.grid-sizer,
	#grid .item { width: 100%; padding-bottom: 0 !important; }
	.gutter-sizer { width: 0; }
	#grid .item { margin: 0 0 1.5em 0 !important; border: 1px solid #e0e0e0; background: transparent !important; }
	#grid .item .content { padding-top: 1.5em; }
	#grid .item h3 { margin: 0 0 5px 0; }
	#grid .item p { margin: 0; }
	
	.full-width .information { display: inherit; /* disable flexbox to prevent bugging out */ }
	
	.col1 { width: 100%; float: none; margin-bottom: 3em; }
	.col2 { width: 100%; float: none; }
	.full-width .col { width: 100%; float: none; margin-bottom: 0em; border-bottom: 1px solid #e8e8e8; border-right: none; }
	.full-width .col.last { border: none; }

}