body {
	background: #151515;
	font-family: Avenir, Helvetica, Arial, sans-serif;
	color: #fff;
	margin: 0;
	padding: 0 0 72px 0;
	font-size: 16px;
	
}

.mobile {
	display: none;
	
}

a:link, a:hover, a:active, a:visited {
	text-decoration: none;
	color: inherit;
}

#backToTop {
	width: 72px;
	height: 72px;
	position: fixed;
	bottom: 32px;
	right: 32px;
	cursor: pointer;
	opacity: 0;
	z-index: 99;
}

h1 {
	font-size:6em;
	letter-spacing: 0;
	font-weight: normal;
	color: black;
	text-transform: none;
	text-align: center;
}

p {
	margin: .5em 0;
}

#topNav {
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: .1em;
	font-size: .75em;
	padding: 24px;
}

.standingsPage #topNav {
	margin-bottom: 32px;
}



#topNav > * {
	vertical-align: middle;
}

#topNav a {
	display: inline-block;
	margin: 0 16px;
	opacity: .67;
}

#topNav a:hover {
	opacity: 1;
}

#topNav a.currentRed {
	color: #C21D24;
	opacity: 1;
}

#topNav a.currentBlue {
	color: #2F76BC;
	opacity: 1;
}

#logo {
	display: inline;
	margin: 0 32px;
	height: 80px;
}

#mobileLogo {
	display: none;
}

.siteIntro {
	font-size: 2em;
	text-align: center;
	width: 67%;
	margin: 120px auto 160px;
}

.siteIntro a {
	border-bottom: 4px solid #444;
}

.siteIntro a:hover {
	border-bottom: 4px solid #fff;
}

.filter {
	font-weight: bold;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin: 0 72px;
	font-size: .75em;
}

.custom-select {
  position: relative;
	  margin: 0 auto;
	width: 320px;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

.select-selected {
  background-color: #2F76BC;
	border-radius: 20px;
	padding-right: 12px;
}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 16px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}

.select-selected.select-arrow-active {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 10px;
}

/* style the items (options), including the selected item: */
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
}

/* Style items (options): */
.select-items {
  position: absolute;
  background-color: #2F76BC;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}

.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.grid {
	margin: 24px;
	display: flex;
  	justify-content: center;
	flex-wrap: wrap;
}

.card, .standingsCard {
	width: 320px;
	height: 540px;
	background: black;
	border-radius: 16px;
	color: white;
	font-size: 1.5em;
	text-align: center;
	padding: 32px;
	margin: 12px;
}

.card img {
	margin-top: 32px;
	margin-left: -32px;
	width: 200px;
}

.standingsCard {
	width: 328px;
	height: 572px;
	padding: 16px 32px 16px 24px;
}

.standingsCard .thumbnail img {
	margin-bottom: 16px;
	margin-top: 0;
	margin-left: -32px;
	width: 188px;
}

.standingsCard .logoThumbnail img {
    width: 100%;
    margin: 72px 0;
}

.standingsCard table {
	border: none;
	width: 100%;
}

.standingsCard table tr {
	vertical-align: middle;
	text-align: left;
}

.standingsCard .rank {
	width: 64px;
	font-size: 2em;
	text-align: left;
}

.standingsCard .likes, .standingsCard .secondaryRank {
	color: #909090;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-weight: bold;
	font-size: .5em;
}

.standingsCard .likes span {
	padding-bottom: 2px;
}

.standingsCard .secondaryRank {
	text-align: right;
}

i {
	width: 320px;
	height: 540px;
	padding: 32px;
	margin: 12px;
}

.detailIntro {
	width: 100%;
	display: flex;
  	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 64px;
}

.detailIntroLeft {
	width: 720px;
	margin: 36px;
	align-self: flex-start;
}

.detailIntroRight {
	width: 480px;
	margin: 36px;
	align-self: flex-start;
}

.detailPage {
	background: #f0f0f0;
	color: black;
}

.detailPage h1 {
	text-align: left;
	margin: 0 0 32px 0;
	line-height: 1;
}

h2 {
	font-weight: bold;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-size: 1em;
	padding: 0 0 8px 0;
	border-bottom: 8px solid black;
	margin: 0
}

h4 {
	font-size: 1.25em;
	font-weight: normal;
	line-height: 1.75em;
	margin: 0;
}

h3 {
	font-size: 1.25em;
	font-weight: bold;
	margin: 16px 0 48px 0;
}

.statsBox {
	background: black;
	margin-bottom: 48px;
	color: white;
	display: flex;
	justify-content: center;
	padding: 15px;
}

.statAvg, .statMedian, .statHigh, .statLow {
	width: 20%;
	margin: 2.5%;
	text-align: center
}

.statNumber {
	font-size: 4em;
	font-weight: normal;
	margin: -24px 0 0;
}

.statLabel {
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75em;
	margin-top: -10px;
}


.pullQuoteHate h3{
	color: #C21D24;
}

.detailLogo {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
}

.pageDivider {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 8px solid black;
	margin-bottom: 64px;
}

.pageDivderRank, .likeButton {
	width: 144px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pageDividerTitle {
	font-size: 2em;
	letter-spacing: .4em;
	text-transform: uppercase;
	font-weight: bold;
	width: 992px;
	height: 64px;
	display: flex;
	align-items: center;
}

.likeButton {
	background: #2F76BC;
}

.likeButtonLabel {
	margin-left: 4px;
}

.likeButtonLabel, .pageDivderRank {
	color: white;
	font-size: .75em;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: bold;
}

.pageDivderRank {
	color: #909090;
}

.logoBeforeAFter {
	width: 100%;
	max-width: 1280px;
	margin: 64px auto 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 64px;
}

.logoCurrent, .logoProposed {
	width: 572px;
}

.arrow {
	width: 136px;
	display: flex;
	justify-content: center;
	margin-top: -212px;
}

.logoBeforeAFter h2, .branding h2 {
	border-bottom: none;
	border-top: 8px solid black;
	padding: 8px 0 16px 0;
	margin-top: -6px;
}

.logoBeforeAFter p, .branding p {
	font-size: 1em;
	line-height: 2em;
}

.branding img, .uniformHero img {
	width: 100%;
}

.branding p {
	width: 50%;
	margin-bottom: 64px;
}

.detailUniforms {
	background: black;
	color: white;
	width: 100%;
	margin: 0 auto;
	padding: 64px 0
}

.detailUniforms .pageDividerTitle {
	width: 100%;
	max-width: 1280px;
	border-bottom: 8px solid white;
}

.uniformHero, #uniformDeepDive {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto 64px auto;
}

.caption {
  position: sticky;
  position: -webkit-sticky;
  width: 280px;
  height: 540px;
  top: calc(50vh - 270px);
  justify-content: center;
  color: #fff;
}

.logoSticker {
	position: sticky;
	position: -webkit-sticky;
	width: 1280px;
	height: 72px;
	top: 0;
	background: #f0f0f0;
}

.likeWrap {
	display:flex;
}

.caption .pageDividerTitle {
	font-size: 1.5em;
	letter-spacing: .3em;
}

.caption .pageDivderRank, .caption .likeButton {
	width: 160px;
}

.caption p {
	margin: 2em 0 0 0;
	font-size: 1em;
	line-height: 1.7em;
}

#iconWrapper .caption, #statementWrapper .caption {
	margin-left:1000px;
}

#associationWrapper, #iconWrapper, #cityWrapper, #statementWrapper {
  width: 100%;
  margin: 64px 0%;
}

.imgWrapper {
	margin-top: -540px;
}

.bgImg {
	width: 960px;
	margin: 0 0 16px 320px;
}

#iconWrapper .bgImg, #statementWrapper .bgImg {
	margin: 0 0 16px 0;
}

.nextLink {
	border-top: 8px solid white;
	font-size: 72px;
	color: white;
	padding: 72px 0 0;
	width: 100%;
	height: 50vh;
	text-align: center;
}

i { display: none; }

.detailPage {
	padding: 0;
}

@media only screen and (min-width: 1680px) and (max-width: 2090px) {
	i { display: block; }
}

@media only screen and (max-width: 1350px) {
	.detailIntroLeft {
		width: 640px;
		margin: 12px;
	}
	
	h1 {
		font-size: 5em;
	}
	
	h2 {
		font-size: .75em;
	}
	
	h4 {
		font-size: 1.15em;
	}
	
	.statLabel {
		font-size: .5em;
	}
	
	.statNumber {
		font-size: 3.5em;
	}
	
	.logoSticker {
		width: 1024px;
	}
	.detailIntroRight {
		width: 360px;
		margin: 12px;
	}
	
	.detailLogo, .logoBeforeAFter {
		max-width: 1024px;
	}
	
	.pageDividerTitle {
		font-size: 1.7em;
		width: 768px;
	}
	
	.logoCurrent, .logoProposed, .logoCurrent img, .logoProposed img {
    	width: 480px;
	}
	
	.arrow {
		width: 64px;
		margin-top: -333px;
	}
	
	.arrow img {
		width: 32px;
	}
	
	.detailUniforms .pageDividerTitle {
    max-width: 1024px;
	}
	
	.uniformHero, #uniformDeepDive {
    	width: 100%;
    	max-width: 1024px;
	}
	
	.bgImg {
    	width: 704px;
	}
	
	#iconWrapper .caption, #statementWrapper .caption {
    margin-left: 736px;
	}
}

@media only screen and (max-width: 1200px) {
	.siteIntro {
		font-size: 1.7em;
	}
}

@media only screen and (max-width: 900px) {
	#topNav {
		font-size: .7em;
	}
	
	.siteIntro {
		font-size: 1.2em;
		line-height: 1.7em;
		width: 80%;
   	 	margin: 48px auto;
	}
	
	.card, .standingsCard {
		width: 270px;
	} 
	
	h1 {
		font-size: 3.5em;
	}
	

	
	
}

@media only screen and (max-width: 1080px) {
	.detailIntroLeft, .detailIntroRight {
		width: 300px;
	}
	
	h1 {
		font-size: 3em;
	}
	
	h2 {
		font-size: .6em;
	}
	
	h3 {
		font-size: 1em;
	}
	
	h4 {
		font-size: .8em;
	}
	
	.statNumber {
		margin: -18px 0 0;
		font-size: 3em;
	}
	
	.pageDividerTitle {
		font-size: 1.1em;
		width: 420px;
	}
	
	.pageDivderRank, .likeButton {
    	width: 114px;
	}
	
	.logoSticker {
		width: 648px;
		margin: 0 auto;
	}
	
	.detailIntro, .pageDivider {
		margin-bottom: 32px;
	}
	
	.logoBeforeAFter {
		max-width: 648px;
		margin-top: 32px;
		margin-bottom: 32px;
	}
	
	.logoCurrent, .logoProposed, .logoCurrent img, .logoProposed img {
    	width: 308px;
	}
	
	.arrow {
		width: 32px;
		margin-top: -283px;
	}
	
	.arrow img {
		width: 16px;
	}
	
	.logoBeforeAFter p, .branding p {
		font-size: .8em;
		line-height: 1.75em;
	}
	
	.branding {
		margin: 0 auto;
		width: 648px;
	}
	
	.pageDivider {
		margin: 0 auto;
		width: 648px;
	}
	
	.uniformHero, #uniformDeepDive {
		width: 100%;
		max-width: 648px;
		margin-bottom: 0;
	}
	
	.detailUniforms {
		padding:32px 0;
	}
	
	.caption {
		width: 200px;
	}
	
	#iconWrapper .caption, #statementWrapper .caption {
		margin-left: 456px;
	}
	
	.caption p {
		font-size: 1em;
    	line-height: 1.75em;
	}
	
	.caption .pageDividerTitle {
		font-size: 1.1em;
		letter-spacing: .3em;
	}
	
	.likeButtonLabel, .pageDivderRank {
    	font-size: .6em;
	}
	
	.bgImg {
		width: 436px;
		margin: 0 0 0 220px;
	}
	
	.nextLink {
		font-size: 48px;
	}
	

@media only screen and (max-width: 700px) {
	#logo {
		display: none;
	}
	
	#mobileLogo {
		background: black;
		text-align: center;
		display: block;
		padding: 24px 0 0;
	}
	
	.detailPage #mobileLogo {
		background: white;
	}
	
	#mobileLogo img {
		height: 64px;
	}
	
	#topNav {
		background: black;
		font-size: 0.6em;
		padding: 16px 6px 24px;
	}
	
	.detailPage #topNav {
		background: white;
		color: black;
	}
	
	#topNav a {
		margin: 0 6px;
	}
	
	.filter {
		margin: 0 24px;
	}
	
	.siteIntro {
		font-size: 1.2em;
	}
	
	.detailIntroLeft, .detailIntroRight {
		width: 100%;
		margin:32px 32px 0 32px;
	}
	
	h3 {
		margin: 16px 0;
		font-size: 1.75em;
	}
	
	.logoSticker {
		width: calc(100% - 64px);
		margin: 0 auto;
	}
	
	.pageDivider {
		width: 100%;
	}
	
	.pageDividerTitle {
		font-size: 1em;
		width: 70%;
	}
	
	.arrow {
		display: none;
	}
	
	.logoBeforeAFter, .detailLogo {
		width: 100%;
    	max-width: 100%;
	}
	
	.logoBeforeAFter {
		display: block;
		margin: 0 32px;
	}
	
	.logoBeforeAFter, .logoCurrent, .logoProposed {
		width: auto;
	}
	
	.logoCurrent img, .logoProposed img {
		width: 100%;
	}
	
	h4, .logoBeforeAFter p, .branding p {
		font-size: 1em;
		margin-bottom: 32px;
		width: 100%;
	}
	
	.branding {
		margin: 32px;
		width: auto;
	}
	
	.caption .pageDividerTitle, .pageDivider .pageDividerTitle {
	    margin: 0;
	}
	
	
	
	.detailUniforms .pageDividerTitle {
	    margin: 0 32px;
	}
	
	.detailUniforms .caption .pageDividerTitle {
	    margin: 0;
	}
	
	.uniformHero, #uniformDeepDive {
		width: auto;
		margin: 0 32px;
	}
	
	.caption {
    position: relative;
    top: auto;
	width: 100%;
		height: auto;
	}
	
	.caption .pageDividerTitle {
		font-size: 1em;
		border-bottom: none;
	}
	
	.caption .logoSticker {
		width: 100%;
		background: black;
	}
	
	.caption .pageDivider {
		border-bottom: 8px solid white;
	}
	
	.bgImg {
		width: 100%;
		margin: 0;
	}
	
	.imgWrapper {
		margin-top: 0;
	}
	
	.desktop {
		display: none;
	}
	
	.mobile {
		display: block;
	}
	
	#iconWrapper .caption, #statementWrapper .caption {
		margin-left: 0;
	}
	
	.caption .pageDivderRank, .caption .likeButton {
		width: 170px;
	}
	
	.nextLink {
		font-size: 32px;
	}
	
	.pageDividerTitle, .pageDivderRank, .likeButton {
		height: 48px;
	}
	
	.logoSticker {
		height: 56px;
	}
	
	.likeButtonIcon img {
		height: 16px;
	}
	
	h4, .logoBeforeAFter p, .branding p, .pageDividerTitle, .caption .pageDividerTitle {
		font-size: 1em;
	}
	
	
	.pageDivderRank {
		display: none;
	}
	
	
}

@media only screen and (max-width: 370px) {
	
	.siteIntro {
		font-size: 1em;
	}
	
	.card, .standingsCard {
		width: 220px;
	} 
	
	.card img {
    	margin-top: 12px;
	}
	
	
	.custom-select {
	width: 270px;
	}
		
		.standingsCard .thumbnail img {
    margin-bottom: 0px;
    margin-top: -12px;
		}
	
	.standingsCard .logoThumbnail img {
    margin: 112px 0;
}
	
	.detailIntroLeft, .detailIntroRight {
		margin: 24px 24px 0 24px;
	}
	
	h1, .statNumber {
		font-size: 2.5em;
	}
	
	h3 {
		font-size: 1.25em;
	}
	
	h4, .logoBeforeAFter p, .branding p, .pageDividerTitle, .caption .pageDividerTitle {
    	font-size: .75em;
	}

}



}