html { scroll-behavior:smooth; }
*:focus { outline:none; }
body {
  margin:0;
  width:100vw;
  min-height:100vh;
  box-sizing:border-box;
  font:18px 'Source Sans Pro', sans-serif;
  color:#333;
  background:#eee;
}

h1 { font-size:2.6rem;font-weight:700;color:#000; }
h2 { font-size:1.8rem;font-weight:500;color:#000; }
h3 { font-size:1.6rem;font-weight:600;color:#000; }
h4 { font-size:1.2rem;font-weight:600;color:#000; }

a { font-weight:600;color:#000;text-decoration:none;transition:all .2s ease-in; }
a:hover, a:active { color:#e41f24;text-decoration:underline; }
a.special { color:#e41f24; }

/* nav */
header { background:#1e1e1e; }
header ul { margin:0 auto;padding:0; }
header li { display:inline-block;padding:14px 10px;user-select:none; }
header a:not(:hover) { color:#fff; }
header a:hover { text-decoration:none; }
header > div { color:#fff;background:#101010;padding:20px 0;font-size:2.4rem;font-weight:300;text-align:center; }

#individual-detail header ul { display:flex;flex-flow:row; }
#individual-detail header li:last-of-type { flex-grow:2;text-align:right; }
#individual-detail header li:last-of-type img { height:30px; }

.spotlight { padding:20px 0 40px;position:relative; }
.spotlight::after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(https://media.nbclosangeles.com/2021/01/GettyImages-1230455457.jpg) no-repeat center center;
  background-size:cover;
  filter:brightness(0.3);
}
.spotlight h1, .spotlight h2 { color:#fff;text-shadow:2px 2px 4px #000; }
.spotlight > div {
  margin:0 auto;
  position:relative;
  z-index:2;
}
.spotlight .info {
  background:rgba(255,255,255,.8);
  box-shadow:4px 4px 10px #000;
  border-radius:10px;
  padding:20px;
  margin:20px 0 0;
}
.spotlight .info ul { margin:10px 0;line-height:1.6; }

.spotlight .reminder {
  grid-column:1 / span 2;
  background:#e41f24;
  color:#fff;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  padding:10px;
  font-weight:700;
  margin:20px -20px -20px;
}

.individuals h2 { background:#107CBD;margin:0; }
.individuals h2 span { display:block;padding:14px 0;margin:0 auto;color:#fff; }
.individuals .individual-container {
  padding:20px 0;
  margin:0 auto;
  text-align:center;
}

.imagecontainer { padding:8px;background:#fff;border-radius:6px;transition:all .2s ease-in; }
.imagecontainer:hover { box-shadow:2px 2px 2px rgba(0,0,0,.1); }
.imagecontainer > a {
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:6px;
  height:202px;
  width:100%;
  background:#000;
  position:relative;
}
.imagecontainer > a::before {
  content:'View Details';
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-weight:700;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  background:rgba(0,0,0,.6);
  transition:all .2s ease-in;
  opacity:0;
}
.imagecontainer > a:hover::before { opacity:1; }
.name a { font-weight:600;letter-spacing:-.3px; }
.hashtag a:not(:hover) { color:#107CBD; }
.hashtag a { font-size:1rem; }
.misc-link { font-weight:400;font-size:.8rem;padding:4px 0; }
.misc-link:last-of-type { padding-bottom:0; }

/* individual-detail */
#individual-detail .individual-info {
  display:grid;
  grid-gap:20px;
}

#individual-detail .individual-info { padding:40px 0;font-size:1rem; }
#individual-detail .individual-info img { margin-top:10px; }
#individual-detail .individual-info a:hover { text-decoration:none; }
#individual-detail .individual-info svg { height:40px;width:40px;fill:#1DA1F2;display:inline-block; }
#individual-detail .individual-info h1 { text-decoration:none;display:inline-block;font-size:2.6rem;vertical-align:middle;margin-left:6px; }
#individual-detail .individual-info a:hover h1 { color:#1DA1F2; }
#individual-detail .individual-info .tags { margin-top:10px; }
#individual-detail .individual-info .tags span { padding:6px 14px;border-radius:4px;font-weight:600;font-size:.9rem;display:inline-block;margin:10px 10px 0 0; }
#individual-detail .individual-info .proudboy { background:#ffd71e;color:#000; }
#individual-detail .individual-info .threepercenter { background:#000;color:#fff; }
#individual-detail .individual-info .oathkeeper { background:#dbaf00;color:#000; }
#individual-detail .individual-info .violent { background:#e41f24;color:#fff; }
#individual-detail .individual-info .breach6 { background:#079e3c;color:#fff; }
#individual-detail .individual-info .tunnel { background:#cfbc90;color:#000; }
#individual-detail .individual-info .orangetape { background:#f85607;color:#fff; }
#individual-detail .individual-info .northside { background:#439ad6;color:#fff; }
#individual-detail .individual-info .crypt { background:#54277e;color:#fff; }
#individual-detail .individual-info .inside { background:#d23f9c;color:#fff; }
#individual-detail .individual-info .sprayer { background:#713e0b;color:#fff; }
#individual-detail .individual-info .vandalism { background:#132fa9;color:#fff; }
#individual-detail .individual-info .comms { background:#5f5f5f;color:#fff; }
#individual-detail .individual-info .gear { background:#456c33;color:#fff; }


#individual-detail .individual-detail { column-gap:10px;margin:20px 0; }
#individual-detail .masonry-item { vertical-align:top;margin-bottom:10px;position:relative;overflow:hidden; }
#individual-detail .masonry-item::after {
  content:'image missing :(';
  display:flex;
  align-items:center;
  justify-content:center;
  color:#bbb;
  font-weight:900;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#dedede;
  z-index:-1;
}
#individual-detail .masonry-item img,
#individual-detail .masonry-item video { width:100%; }
/*#individual-detail .masonry-item a { display:block; }*/

.hidden { display:none; }

.top {
  position:fixed;
  bottom:5px;
  right:10px;
  padding:10px;
  color:#000;
  font-weight:600;
  font-size:1.2rem;
  cursor:pointer;
  transform:rotate(-90deg) scaleY(1.8);
}
.top:hover { color:#e41f24;text-decoration:none;}


.badge-blue-front {
font-size:2rem;
margin:1.25rem;
background:#84bcfc !important;
}

/* filters */
.filters {
  width:100%;
  background:#ddd;
}
#individuals .filters { padding-bottom:40px; }
#videos .filters { padding-bottom:20px; }
.filters form { display:flex;flex-flow:row;margin:0 auto; }
.filters form > div > div {
  display:grid;
  grid-gap:0 10px;
  align-items:start;
}
.filters form .vidnumber { flex-grow:2;text-align:right; }
.filters .vidnumber label { margin:0; }
.filters .vidnumber span {
  display:inline-block;
  font-size:2rem;
  font-weight:900;
  font-family:'Unica One';
  background:#000;
  color:#84ff0b;
  padding:0 10px;
  border-top:2px solid #fff;
  border-left:2px solid #fff;
  border-bottom:2px solid #ccc;
  border-right:2px solid #ccc; }

.filters form > div > div label { grid-row:1;white-space:nowrap; }
.filters select { display:block;font-size:1rem;margin:0 10px 10px 0; }
.filters label { margin:0 10px 0 0;font-size:.8rem;font-weight:400;text-transform:uppercase; }
[class$='hide'] { display:none; }
.show { display:block; }

table { font-size:1rem;background:#f2f2f2;width:calc(100% - 40px); }
table th { background:#107CBD;color:#fff;font-size:.8rem;font-weight:600;text-transform:uppercase;padding:4px 10px;border:1px solid #0d6ba5; }
table td { padding:10px;border:1px solid #ccc; }
table tr:nth-child(even) { background:#ebebeb; }
table tr:hover { background:#fff; }
.thumb { display:block;max-width:160px;max-height:100px;overflow:hidden;text-align:center; }
.thumb img { max-width:160px; }
#sorttable_sortrevind, #sorttable_sortfwdind { visibility:hidden; }
#sorttable_sortrevind::before, #sorttable_sortfwdind::before {
  content:'>';
  visibility:visible;
  font-weight:600;
  display:inline-block;
  font-size:.6rem;
  margin-left:10px;
}
#sorttable_sortrevind::before { transform:rotate(-90deg) scaleY(1.8); }
#sorttable_sortfwdind::before { transform:rotate(90deg) scaleY(1.8); }

.cards {
  display:grid;
  grid-gap:2rem;
}
.cards > div { margin:40px 0; }
.cards div a { display:block;padding:15px 20px;background:#e8e8e8; }
.cards div > a:not(:last-of-type) { border-bottom:1px solid #ddd; }
.cards div > a:hover { background:#ddd; }

.thanks { background:#fff;padding:14px 14px 14px 44px;position:relative;margin:40px auto!important; }
.thanks::before {
  content:'';
  background:url(heart.png) no-repeat center center;
  background-size:cover;
  position:absolute;
}

.sync { padding:40px 0; }
.sync > div {
  display:grid;
  grid-gap:20px;
  padding:20px;
  background:#ddd;
}
.sync > div > div {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
.sync > div > div iframe, .sync > div > div object, .sync > div > div embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.parler { padding:40px 0; }
.parler > div { padding:20px 0;background:#ddd;display:flex;flex-flow:row wrap; }
.parler > div > div { padding:0 20px; }

.cards h3, .sync h3, .parler h3 { padding:10px 20px;background:#101010;color:#fff;margin:0; }

/* media queries */
@media only screen and (max-width:1199px) {
  header ul, .spotlight > div, .individuals .individual-container, .individuals h2 span, .filters form,
  #individual-detail section, .cards, .sync, .thanks, .parler  { width:90%;margin:0 auto; }
  .filters form > div { padding-top:20px; }
  .filters form > div:not(:last-of-type) { margin-right:40px; }
  table { margin:20px; }

  #videos table th:nth-child(n+6):nth-child(-n+13),
  #videos table td:nth-child(n+6):nth-child(-n+13) { display:none; }

  .cards { grid-template-columns:1fr; }
  .sync { grid-template-columns:1fr 1fr 1fr; }
  .sync > div > a { grid-column:1 / span 3; }.thanks::before { top:0;left:-14px;width:48px;height:42px; }
}

@media only screen and (max-width:575px) {
  #videos table th:nth-child(n+2):nth-child(-n+4),
  #videos table td:nth-child(n+2):nth-child(-n+4)  { display:none; }
  .sync { grid-template-columns:1fr; }
  #individual-detail iframe { width:100%; }
  #individual-detail .individual-info { grid-template-columns:1fr; }
  #individual-detail .individual-info > div:first-of-type > a { display:block;text-align:center; }
  #individual-detail .individual-detail { columns:2; }
}
@media only screen and (min-width:575px) and (max-width:1199px) {
  .individuals .individual-container {
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-gap:2rem 1rem;
  }
}
@media only screen and (min-width:575px) and (max-width:767px) {
  #individual-detail .individual-detail { columns:2; }
}
@media only screen and (min-width:768px) and (max-width:959px) {
  #individual-detail .individual-detail { columns:3; }
}
@media only screen and (min-width:960px) and (max-width:1199px) {
  #individual-detail .individual-detail { columns:4; }
}

@media only screen and (min-width:575px) { #individual-detail .individual-info { grid-template-columns:200px auto; } }
@media only screen and (max-width:1600px) { .filters form { flex-wrap:wrap; } }

@media only screen and (min-width:1200px) {
  header ul, .spotlight > div, #individual-detail section, .cards, .sync, .thanks, .parler  { width:70%;margin:0 auto; }
  #individuals .spotlight .info { display:grid;grid-gap:20px; grid-template-columns:1fr 1fr; }
  .filters form > div { padding-top:40px; }
  .filters form > div:not(:last-of-type) { margin-right:60px; }
  .filters form > div:nth-child(3) > div { grid-template-columns:1fr 1fr 1fr; }
  .filters form > div:not(:nth-child(3)) > div { grid-template-columns:1fr 1fr; }
  .individuals .individual-container, .individuals h2 span, .filters form { width:94%; }
  #individual-detail .individual-detail { columns:5; }
  table { margin:20px; }
  .cards { grid-template-columns:1fr 1fr; }
  .sync { grid-template-columns:1fr 1fr 1fr; }
  .sync > div > a { grid-column:1 / span 3; }.thanks::before { top:-9px;left:-34px;width:68px;height:60px; }
  .individuals .individual-container {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    grid-gap:2rem 1rem;
  }
}