@charset "UTF-8";
/* CSS Document */

@import url("https://fonts.googleapis.com/css?family=Oswald:500,400,300|Roboto:400,300,500,700");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {	margin: 0;	padding: 0;	border: 0;	outline: 0;	font-size: 100%; vertical-align: baseline; background: transparent }
body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { 	content: ''; content: none } :focus { outline: 0 } ins { text-decoration: none } del { text-decoration: line-through } table { border-collapse: collapse; border-spacing: 0 }
img { display: block }

*, *:before, *:after { box-sizing: border-box; }

/*http://snook.ca/archives/html_and_css/font-size-with-rem*/
html {
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	-webkit-font-smoothing: antialiased;
}

body {
	font-family: "Roboto", sans-serif;	/*SemiBold=500, Bold=700, */
	background-image: url('../img/texture.png');
}

.blueBG {
	background: #494949;
	width: 100%;
}

.home { background: #494949 }

/* Fly-out navigation menu */

nav {
	position: fixed;
	width: 100%;
	z-index: 1000;
	background-color: #494949;
}

.seahawks-logo {
	height: 70px;
	display: block;
	width: 167px;
	margin: 0 auto;
}

	.seahawks-logo img {
		position: absolute;
		top: 10px;
		left: 0;
		right: 0;
		margin: auto;
		width: 80px;
	}

.fo-menu {
	color: #fff;
	height: 70px;
	position: absolute;
	top: 0px;
	right: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-family: "Oswald", sans-serif;
	font-size: 20px;
}

.mbl-arrow { display: none; }

.player-menu {
	color: #fff;
	height: 70px;
	position: absolute;
	top: 0px;
	left: 26px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	z-index: 2;
	
}

.did-you-know {
	width: 150px; height: 150px; border-radius: 500px; margin: 0 auto 30px auto;
}

.fo-menu span.lines {
	display: block;
	width: 20px;
	height: 18px;
	text-indent: -9999px;
	font-family: "Roboto", sans-serif;
	display: inline-block;
	margin-left: 8px;
	background-image: linear-gradient(to bottom, #fff 0px, #fff 2px, #494949 2px, #494949 8px, #fff 8px, #fff 10px, #494949 10px, #494949 16px, #fff 16px, #fff 18px);
}

.player-icon {
	width: 30px;
	height: 30px;
	background: url(/img/search.svg) no-repeat;
	display: block;
	background-size: 20px;
	background-position: 50% 5px;
	text-indent: -9999px;
	font-family: "Roboto", sans-serif;
}

.fo-nav {
	position: absolute;
	right: -540px;
	width: 540px;
	overflow: hidden;
	background: #494949;
	transition: right .35s;
	min-height: 550px;
	padding: 0 140px;
	/* new */
	height: 100vh;
	margin-top: -70px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	z-index: -1;
}

.player-nav {
	position: absolute;
	left: -540px;
	width: 540px;
	overflow: hidden;
	background: #494949;
	transition: left .35s;
	min-height: 550px;
	padding: 0 100px;
	/* new */
	height: 100vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
}


nav input { display: none; }


.homeOverlay {
	width: 100%;
	height: 100%;
	background-image: radial-gradient( rgba(73, 73, 73, 0.18) 0%, #494949 70%, #494949 80%, #494949 100% );
	position: relative;
	display: flex;
	justify-content: center;
	padding: 10em 12em;
	flex-direction: column;
	min-height: 790px;
}

.home-hero {
	position: relative;
	background-repeat: no-repeat;
	background-color: #0c223e;
	background-image:url(../img/home_hero.jpg);
	background-position: 50% 50%;
	background-size: cover;
	height: 86vh;
	min-height: 790px;
}

.home-content {
	width: 100%;
	display: flex;
	justify-content: space-between;
}


.home-nav {
	position: relative;
	width: 270px;
}

.all-years {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-right: 5em;
	/* height: 392px; */
}

.fo-nav .all-years { 
	padding-right: 10px; 
	border: none; 	
	border-top: 0px solid #fff; 
	padding-top: 17px;
	border-bottom: 0px solid #fff;
 }

.home-intro {
	width: 550px;
	color: #D5DBE6;
	font-size: 1.6rem;
	line-height: 1.4em;
}
.home-intro p { color: #fff }
.home-intro-logo {
	width: 150px;
}

.home-intro-head {
    	font-size: 5.8rem;
    	font-family: "Oswald",sans-serif;
    	font-weight: 300;
    	line-height: 1.1em;
    	margin: 1em 0 .5em 0;
    	color: #fff;
}

.fo-decade {
	font-size: 4.5rem;
	font-weight: 300;
	cursor: pointer;
	font-family: "Oswald",sans-serif;
	color: #b3d3c3;
	line-height: 1em;
	margin-bottom: .35em;
	padding-bottom: .25em;
	width: 136px;
	border-bottom: 1px solid #fff;
}

.fo-decade:not(.decade-range)::after {
	content: "s";
	font-size: 3rem;
}

.fo-decade.fo-nav-on, .fo-decade.fo-nav-on:hover {
	color: #008E4C;
	border-bottom: 1px solid #008E4C;
	background-image: url(../img/chevron.svg);
	background-repeat: no-repeat;
	background-position: 100% 25%;
}

.decade-range {
	font-size: 2.5em;
	font-weight: 400;
	margin: 1em 0;
	padding-bottom: 1em;
}


.years {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 3px;
}


.home-nav .years {
	    margin-top: 3px;
	    height: 369px;
}
.home-nav .fo-year {
	margin-bottom: .843em
}

.fo-year {
	font-family: "Oswald",sans-serif;
	color: #b3d3c3;
	font-weight: 300;
	font-size: 2rem;
	line-height: 1em;
	margin-bottom: .848em;
	display: none;
	text-decoration: none;
		
}
.fo-year:hover { color: #fff;  }

.fo-nav-on, .fo-nav-on:hover{ color: #008E4C;  }


.fo-decade:hover, .fo-decade:active {

	color: #fff;
}
.home-byYear {
	color: #fff;
	font-size: 1.5rem;
	margin-bottom: 1em;
}

.fo-player {
	padding-top: 3em;
	white-space: nowrap;
	width: 100%;
	border-top: 0px solid #fff;
}

.fo-player-head {
	font-family:  'Roboto', sans-serif;
	font-size: 2.5rem;
	color: #fff;
	font-weight: 300;
	margin-bottom: 20px;
	text-align: center;
}
.player-nav {
	padding-bottom: 20px;
}
.player-nav p {
	color: #e1e8f3;
	margin-bottom: 1.8em;
	line-height: 1.5em; 
	padding: 0 10px;
}

.player-nav p a { color: #6d9abc; text-decoration: none;  background-image: linear-gradient( transparent 0%, transparent 96%, #6d9abc 99% )}
.player-nav p a:hover { color: #69bf28; text-decoration: none;  background-image: linear-gradient( transparent 0%, transparent 96%, #69bf28 99% )}
.fo-player-box {
	display: flex;
}

.fo-player-label {
	color: #e1e8f3;
	font-size: 1.5em;
	margin-bottom: 15px;
}

.fo-player-input {
	-webkit-appearance: none;
	border: none;
	font-size: 1.6rem;
	padding: 0 1em;
	display: inline-block;
	width: 100%;
	border-radius: 3px 0 0 0;
	background: #ffffff;
	height: 40px;
}
.fo-player-input:focus  {
	background: #fff;
	transition:  background-color .2s;
	
}
.fo-player-input::-webkit-input-placeholder {
   color: #8f8f8f;
   font-style: italic;
   
   
   
   
   
}

.fo-player-input:-moz-placeholder { /* Firefox 18- */
   color: #8f8f8f;
   font-style: italic;
}

.fo-player-input::-moz-placeholder {  /* Firefox 19+ */
   color: #8f8f8f;
   font-style: italic;
}

.fo-player-input:-ms-input-placeholder {  
   color: #8f8f8f;
   font-style: italic;
}






.autocomplete-suggestions { 
    background: rgb(204, 204, 204);
    font-size: 1.5rem;
    color: #000;
    line-height: 1.2em;
    width: 270px !important;
    padding: 0;
 }
 
.autocomplete-suggestion { padding: 8px 17px; white-space: nowrap; overflow: hidden; border-bottom:  }
.autocomplete-selected { background: rgba(226, 229, 230, 1); cursor: pointer;  }
.autocomplete-suggestions strong { font-weight: 600; }


.fo-player-submit {
	-webkit-appearance: none;
	border: none;
	background-color: #ccc;
	background-image: url(../img/chevron-wt.svg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: inline-block;
	width: 44px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 0 3px 0 0;
	transition:  background-color .2s;
}


.fo-player-submit-ready {
	background-color: #008E4C;
	cursor: pointer;
}


.fo-player-submit-ready:hover {
	background-color: #357dc5;
}


.home-arrows {
	background-image: linear-gradient(to right, #008E4C 0px, #008E4C 100%), url(../img/arrows.svg);
	background-repeat: no-repeat;
	background-size: 100% 1px, contain;
	background-position: 80px 50%, 0 0;
	height: 60px;
	width: 100%;
	margin-top: 30px;
}


/* revealed fly-out nav */
#hamb:checked ~ .fo-nav {
	right: 0;
	width: 540px;
}



#hamb-player:checked ~ .player-nav {
	left: 0;
	width: 540px;
}

#hamb:checked ~ .bg-cover, #hamb-player:checked ~ .bg-cover  {
	transition: all .25s;
	visibility: visible;
	opacity: 1;
}

#hamb:checked ~ .player-nav{ border: 1px solid red;  }


.bg-cover { 
	width:  100vw; 
	height: 100vh; 
	background: rgba(73,  73,  73, 0.55);
	position: absolute; 
	z-index: -1; 
	transition: all .35s; 
	visibility: hidden;
	opacity: 0;
	margin-top: -70px;
}

/* hides the hamburger and shows the X */
nav input:checked + label span.lines {
	position: relative;
	top: -14px;
	left: -2px;
	text-indent: 0;
	background: none;
	font-size: 45px;
	color: #fff;
	font-weight: 100;
	margin-top: -6px;
}

nav input:checked + label span.player-icon {
	position: relative;
	top: -8px;
	left: 4px;
	text-indent: 0;
	background: none;
	font-size: 45px;
	color: #fff;
	font-weight: 100;
	margin-top: -6px;
}




.overallWrapper {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
}


.hero {
	position: relative;
	background-repeat: no-repeat;
	background-color: #0c223e;
	background-position: center 70px;
	background-size: cover;
	
	height: 85vh;
	min-height: 650px;
}


.filters {
 	font-size: 1.4rem;
	margin: 0 34px 20px 34px
}

.filters-wrap {
	margin: 0 auto;
	display: flex;
	align-items: center;
	max-width: 1338px;
	border-bottom: 1px solid #cccccc;
}

.filterRadio {
	margin-top: 2px;
	display: inline-block;
	text-align: center;
	font-weight: 700;
	font-size: 1.4rem;
	height: 56px;
	display: flex;
	align-items: center;
	padding: 0 25px;
	color: #4c4c4c;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
	text-transform: uppercase;
	margin-right: 1px;
}

	.tagName { 
		margin-top: 2px;
		display: inline-block;
		text-align: center;
		font-weight: 700;
		font-size: 2rem;
		height: 56px;
		display: flex;
		align-items: center;
		padding: 0 25px;
		color: #4c4c4c;
		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
		margin-right: 1px;
		background: #fff;
	}

.goGames {
	background: #7f8385;
	margin-top: 0px;
	display: inline-block;
	text-align: center;
	font-weight: 700;
	font-size: 1.35rem;
	height: 28px;
	display: flex;
	align-items: center;
	padding: 0px 20px;
	color: #fff;
	text-transform: uppercase;
	margin-right: 1px;
	right: 0; 
	position: absolute; 
	text-decoration: none;	
	border-radius:  2px; 
	border: 1px solid #5f676b;
	box-shadow: 0px 2px 2px  rgba(0, 0, 0, 0.2);
	margin-right:  20px;
	text-shadow: 0px 1px 0px #686f73;
}
.goGames:hover {
		background: #596063;
	}

.filterRadio input { display: none; }

.filterRadio:hover {
	cursor: pointer;
	box-shadow: inset 0px -6px 0px 0px #b1b1b1;
	transition: box-shadow .2s;
}

.filterOn, .filterOn:hover, .filterOn:active {
	box-shadow: inset 0px -6px 0px 0px #008E4C;
	transition: box-shadow .2s;
}

.filterRadio:active { box-shadow: inset 0px -6px 0px 0px #838383; }

.yearCaption {
	background: rgba(12, 34, 62, 0.9);
	color: #ececec;
	font-size: 220px; /* max-font-size: 50px; */
	padding: 1.3em 1.4em;
	position: absolute;
	bottom: 0;
	font-weight: 400;
	text-align: left;
	text-transform: none;
	width: 65%;
	border-top: 4px solid #69be28;
}

.heroOverlay {
	width: 100%;
	height: 100%;
	background-image: radial-gradient( rgba(73, 73, 73, 0.3) 0%, #494949 70%, #494949 80%, #494949 100% );

	position: relative;
	display: flex;
	justify-content: space-between;
	padding: 10em 12em 6em;
	flex-wrap: wrap;
    }
    





.heroOverlay-text {
	width: 100%;
	padding-bottom: 3em;
	display: flex;
	justify-content: space-between;
	min-height: 310px;
	/*  	flex-direction: column-reverse */
}

.heroOverlay p {
	font-weight: 400;
	color: #fff;
	line-height: 1.55em;
	font-size: 1.65em;
}


/*
.theYear {
	color: #06386b;
	font-family: "Oswald",sans-serif;
	font-size: 5rem;
	width: 150px;
	height: 150px;
	line-height: 150px;
	background: #fff;
	border-radius: 50%;
	margin: 0 auto;
	
	display: none;
}
*/

.theYear {
	color: #fff;
	font-family: "Oswald", sans-serif;
	order: 2;
	margin-bottom: 0;
	display: flex;
	/* 	align-items: flex-start;
 */
	align-items: flex-end;
	flex-direction: column;
}

.theYear h2 {
	margin: 20px 0 .5em 0;
	font-size: 18rem;
	font-weight: 300;
	margin: 1rem 0;
	text-shadow: 0 7px 3px rgba(0, 0, 0, 0.2);

}

.scan-wrap { 
	width: 100%; 
	height: 20px; 
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.theStory-wrap  { 
	width: 100%; 
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.line-wrap {
	width: calc(100% - 8em);
    height: 2px;

}

.scan-prev { }
.scan-next { }
.scan {
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	margin-bottom: 2px;
	cursor: pointer;
	border-left: 0px #5c7188 solid;
	padding-left: 0px;
	color: #f1f1f1;
	line-height: 1.3em;
	z-index: 2;
	text-decoration: none;
}

.scan span:hover {
	color: #008E4C;
	background-image: linear-gradient( transparent 0%, transparent 96%, #008E4C 99% );
}

.scan img {
	height: 12px;
	display: inline;
}

.scan span.line {
	width: 1px;
	height: 13px;
	background: #6485b3;
	display: inline-block;
}

.scan span { margin: 0 8px; }

.theStory {
	max-width: 460px;
	color: #fff;
	margin-bottom:  30px;
}


.theStory h1 {
	font-size:  18em;
	font-weight: 300;
	color: #fff;
	font-family: 'Oswald',sans-serif;
	display: none;
}


.theStory h2 {
	font-size:  6em;
	margin-bottom: .5em;
	margin-top: 1em;
	color: #fff
}
.theStory h2 span {
	
	  color: #fff;
}


.yearInReview-link {
	display: inline-block;
	border: 1px solid #008E4C;
	padding: .8em 3em .7em 3em;
	font-weight: 700;
	color: #008E4C;
	font-size: 1.4rem;
	text-decoration: none;
	cursor: pointer;
	border-radius: 3px;
	transition: all .2s;
	background: rgba(255, 255, 255, 0.9);
	margin-top: 28px;
}

.yearInReview-link:hover {
	background: #008E4C;
	color: #fff;
}


.theLine {
	height: 1px;
	background: rgba(255, 255, 255, 0.26);
	width: 100%; /* fallback if needed */
}

.arrows {
	width: 50px;
	height: 100px;
	background-image: url(../img/arrows.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 60%;
	position: absolute;
	margin-top: -80px;
	right: 11em;
	cursor: pointer;
}

.yearColumns {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 30px;
}

#grid1 {
	-webkit-column-count: 4;
	-moz-column-count: 4;
	column-count: 4;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
	padding-bottom: 50px;
}

.panel {
	margin: 15px 0;
	font-size: 1.6rem;
	line-height: 1.3em;
	display: inline-block;
	width: 100%;
	color: #3c3c3c;
	position: relative;
	background: #f5f5f5;
	padding: 3rem;
	border-radius: 2px;
	box-shadow: 0px 2px 6px rgba(0,0,0,.1);
}

.panel-subhead {
	text-align: center;
	font-size: 1.45rem;
	margin: .5em 0 1em 0;
	font-weight: 400;
	line-height: 1.2em;
}

.collectionsPanel { background: #02326a; color: #fff; text-align: center;}
.collectionsPanel a { color: #e2e5e6; text-decoration: none; background-image: linear-gradient( transparent 0%, transparent 96%, rgba(222, 248, 198, 0.2) 99% ); }
.collectionsPanel a:hover { color: #69bf28;  background-image: linear-gradient( transparent 0%, transparent 96%, rgba(105, 191, 40, 1) 99% ); }
.collectionsPanel p { color: #fff; margin-bottom: 10px; line-height: 1em; font-weight: 600; font-size: 1.1em; }
.collectionsPanel p:last-of-type { margin-bottom: 0; }
.collectionsPanel h2 { color: #fff;  font-size: 1.4em; text-transform: uppercase; margin-bottom:  20px; border-bottom: 1px solid #2b4563; padding-bottom: 20px; }
.collectionsPanel .hash { font-weight: 900; color: #81a7d2; margin-right: 2px } 

.rosterPanel {
	padding: 3rem 2.5rem;
	
	border-radius: 4px;
	text-align: left;
	border: 1px solid #C9C9C9;
	border-top-color: #0d498d;
	box-shadow: inset 0px 10px 0px -9px #0d498d;
	text-shadow: 0 1px 0 #fff;
	padding-bottom:  23px;
	
}

.schedulePanel {
	background: #377baf;
	background-image: radial-gradient(circle at top, #168fc5, #0d498d);
	color: #fff;
	padding: 3.5rem 2.5rem;
}

.listPanel {
	padding: 1em;
	background: #b3d3c3;
}

	.listTable { width: 100%; border-collapse: collapse; background: #fff; margin-top: 16px; border: 2px solid #006737; }
	.listTable td { padding: 6px 8px; border: 1px solid #b3d3c3; font-weight: 400; font-size: 1.4rem;}

.scheduleRow-hover:hover {
	color: #8be943;
	cursor: pointer;
}

.scheduleOpponent {
	background-image: linear-gradient( transparent 0%, transparent 96%, #f3faff 98% );
	display: inline;
	margin-bottom: .3em;
}

.playerName {
	background-image: linear-gradient( transparent 0%, transparent 96%, #2b85c5 98% );
	display: inline;
	margin-bottom: .3em;
}
.scheduleOpponent .lcase {
	font-style: italic;
	font-size: .9em;
	margin-top: 1px;
}

.textPanel {
	border-radius: 2px;
	text-align: left;
	border: 1px solid #C9C9C9;
	border-top-color: #006737;
	box-shadow: inset 0px 10px 0px -9px #006737;
	text-shadow: 0 1px 0 #fff;
	text-decoration: none;
	transition: box-shadow .25s;
}

.home-items a {
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -moz-transition: -moz-transform 0.2s ease-out;
    -ms-transition: -ms-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    }
.home-items a:hover {
	-webkit-transform: translate3d(0px, -3px, 0px);
	-moz-transform: translate3d(0px, -3px, 0px);
	-ms-transform: translate3d(0px, -3px, 0px);
	transform: translate3d(0px, -3px, 0px);
}


.home-items .textPanel  {
	box-shadow: none;
	border: none;
}
.home-items .photoPanel-year span:hover, .home-items .photoPanel-year:hover  {
	box-shadow: none;
}
.home-items .photoPanel img {
    border: 0;
    border-radius:  2px 2px 0 0;

}


/* sponsor */
.sponsor { 
	text-decoration: none;
	box-shadow: inset 0 0 0 10px #56a916; 
	border: none; 
	background: #69bf28; 
	color: #fff;
	border-radius: 0; 
	text-align: center; 
	cursor: pointer;
	    transition: transform 0.2s ease-out;
	    -webkit-transform: translate3d(0, 0, 0);
	    -moz-transform: translate3d(0, 0, 0);
	    -ms-transform: translate3d(0, 0, 0);
	    transform: translate3d(0, 0, 0);
	 
	}
.sponsor span { text-transform: uppercase;  position: absolute; right: 24px; font-size: 10px; top: 20px; color: #d3f7b8; }	
.sponsor p { color: #fff; }
.sponsor img { width: 100px; display: inline-block; margin-bottom:  15px; }

.sponsor:hover { 	
	-webkit-transform: translate3d(0px, -3px, 0px);
	-moz-transform: translate3d(0px, -3px, 0px);
	-ms-transform: translate3d(0px, -3px, 0px);
	transform: translate3d(0px, -3px, 0px);
 }

.sponsor-home { margin-top:  30px;  text-align: center; width: 230px}
.sponsor-home p { color: #5e86ad; text-transform: uppercase; font-size: 12px; font-weight: 500; margin-bottom: 10px; line-height: 1.2em; margin-top: 15px;  }
.sponsor-home img { width: 80px; height: 80px; display: inline-block; margin-top: 20px;  }


.home-items .panel  {
    border-radius:  2px;
    background: #fff;
   
}
.home-items .photoPanel-year span { background:  #fff;}

.textPanel-subhead {
	color: #000913;
	font-size: 2.8rem;
	font-weight: 400;
	font-family: "Oswald", sans-serif;
	line-height: 1.2em;
}

.textPanel-date {
	font-size: 1.3rem;
	margin: 1.5em 0 1em;
	font-weight: 900;
	text-transform: uppercase;
}

.textPanel p, .audioPanel p { color: 565656; }

.audioPanel {
	border-radius: 4px;
	text-align: center;
	border: 1px solid #C9C9C9;
	border-top-color: #008E4C;
	box-shadow: inset 0px 10px 0px -9px #008E4C;
	text-shadow: 0 1px 0 #fff;
}

.audioPanel-title {
	font-size: 2rem;
	margin: 1em 0;
	font-weight: 700;
}

.circleBG {
	position: relative;
	width: 125px;
	height: 125px;
	margin: 20px auto;
	display: block;
}

.audioCircle {
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg); /* otherwise starts at 3:00 */
}

.audioCircle circle {
	stroke: #008E4C;
	stroke-width: 8px;
}

#bar1, #bar2, #bar3, #bar4, #bar5 { /* can't use classes because using SVG */ stroke: #e5e5e5; }

.playBox {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-size: 25px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.play {
	background-image: url(../img/play-audio.svg);
	background-position: 53% 50%;
}

.pause {
	background-image: url(../img/pause.svg);
	background-position: 50% 50%;
}

.play:hover, .pause:hover { opacity: .8; }

.quotePanel {
	background: none;
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
	background-size: 15%, 15%;
	box-shadow: none;
	padding: 4.5rem 2.5rem;
}

.quote {
	color: #021425;
	font-size: 2rem;
	line-height: 1.4em;
	font-weight: 300;
}

.quoteAuthor {
	font-weight: 700;
	font-size: 1.3rem;
	margin-top: 1em;
}
.quoteAuthor span { font-weight:  100; margin-right:  4px;}
.home-header {
	color: #fff;
	font-size: 1.7rem;
	line-height: 1.3em;
	text-align: center;
	font-weight: 400;
	color: #D5DBE6;
	margin-bottom: 1em;
}
.home-header span {
	font-weight: 600;
	color: #fff;
}	
/* .home .yearColumns {
	position: relative;
	top: -150px;
} */

/* .home .quotePanel {
	color: #fff;
	background-image: url('../img/quote-wt.svg'), url('../img/quote-wt.svg');
}

.home .quotePanel .quote {
	color: #fff;
}

no quote on home page anymore */

.photoPanel, .videoPanel { padding: 0; }

.photoPanel img {
	border: 10px solid #f5f5f5;
	border-radius: 6px;
}

.videoPanel img { border: none; }

.watchVideo {
	position: absolute;
	left: 0;
	right: 0;
	top: -40px;
	bottom: 0;
	width: 80px;
	height: 80px;
	margin: auto;
	background: url(../img/play.svg) no-repeat 100%;
	opacity: .7;
}

.videoPanel > a:hover .watchVideo, .watchVideo:hover { opacity: 1; }

.photoPanel, .videoPanel { 
	cursor: pointer; 	
	text-decoration: none;
	-webkit-transition: -webkit-transform 0.2s ease-out;
	-moz-transition: -moz-transform 0.2s ease-out;
	-ms-transition: -ms-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.photoPanel:hover, .videoPanel:hover {
	-webkit-transform: translate3d(0px, -3px, 0px);
	-moz-transform: translate3d(0px, -3px, 0px);
	-ms-transform: translate3d(0px, -3px, 0px);
	transform: translate3d(0px, -3px, 0px);
}

.photoYearTag {
	color: #fff;
	font-weight: 300;
	font-size: 2.6rem;
	position: absolute;
	bottom: 12px;
	right: 10px;
	text-decoration: none;
	width: 35px;
	height: 35px;
	background-image: url(../img/open.svg);
	background-repeat: no-repeat;
	background-color: rgba(0, 0, 0, 0.3);
	display: none;
}

.photoPanel:hover .photoYearTag {
	background-image: url(../img/open.svg);
	background-repeat: no-repeat;
	background-color: #1a70c5;
}

.photoPanel.photoPanel-home:hover {
	box-shadow: none;
}

.photoPanel-year {
	text-align: center;
	text-decoration: none;
	padding: .75em 0;
	font-family: "Oswald",sans-serif;
	font-size: 2rem;
	color: #3c3c3c;
	transition: all .15s;
	background-image: linear-gradient(to right, #ccc 0%, #ccc 100%);
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-size: 100% 1px;
	margin: 0 1em;
}

.photoPanel-year span { background: #f5f5f5; padding: 0 1.5em; }

.ogTitle {
	padding: .5em 0 0 0;
	text-align: center;
}

#recordBox {
	 background-image: radial-gradient(circle at top, #205ba0, #001932);
	border-radius: 2px;
	padding: 20px 40px;
	color: #fff;
	text-align: center;
	box-shadow: none;

    }

.recordBox-wl {
	font-family: "Oswald", sans-serif;
	font-size: 4rem;
	line-height: 1.6em;
	letter-spacing: .06em;
	font-weight: 600;
	margin: 6px 0 0 0;
	color: #ebebeb;
	text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
}

.recordBox-wl span {
	background: #fff;
	display: inline-block;
	margin: 0 13px;
	height: 1px;
	width: 5px;
	position: relative;
	top: -.35em;
}

.recordBox-playoffs { font-weight: 400; }

.sgl-header, .qt-header {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.sgl-header *, .qt-header *{ display: inline-block; }

.sgl-header span, .qt-header span {
	height: 1px;
	background: #C9C9C9;
	width: 100%;
}
.qt-header span { margin-bottom:  3rem; }
.sgl-header div, .qt-header div {
	white-space: nowrap;
	font-family: "Oswald", sans-serif;
	font-weight: 300;
	font-size: 2rem;
	text-transform: uppercase;
	padding: 0 1em;
	flex-shrink: 0; /* https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored    for Safari */
}
.qt-header div { margin-bottom:  0; font-size:  4em;  padding: 11px 20px 16px; font-family:  sans-serif; font-weight: 800; text-shadow: 0 1px 0 rgb(255, 255, 255);}
.schedulePanel .sgl-header span { background: rgba(255, 255, 255, 0.5); }
#recordBox .sgl-header span{ background: #008E4C; }
.allTimeRoster {
    display: block;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: #006737;
    background: none;;
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 17px;
    padding: 5px 6px 4px 6px;
    text-shadow: none;
    border: 1px solid #9ab2cc;
    border-radius: 3px;
    transition: all .2s;
    }

.allTimeRoster:hover {
	color: #fff;
	background: #237be1;
	border: 1px solid #006737;
}

.footerBG {
	background: #333;
	width: 100%;
}

.rabbitBG { padding: 20px 0; }

.rabbits {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
}

.rabbit-onThisDay {
	color: #fff;
	font-size: 2.2rem;
	font-weight: 300;
	margin: 0 35px;
	padding: 40px 0 32px;
	text-align: left;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.17);
	;
}

.rabbit {
	text-decoration: none;
	display: block;
	color: #fff;
	padding: 0;
	cursor: pointer;
	flex: 1;
	padding: 0 35px;
}

.rabbit:hover .rabbit-text {
	color: #fff;
	transition: all .3s;
}

.rabbit:hover .rabbit-cta {
	color: #008E4C;
	background-image: linear-gradient( transparent 0%, transparent 96%, #008E4C 99% );
}

.rabbit-date {
	font-size: 1.7rem;
	margin: 1em 0;
	font-weight: 900;
	text-transform: uppercase;
}

.rabbit-text {
	font-size: 1.5rem;
	line-height: 1.4em;
	color: #b3d3c3;
}

.rabbit-cta {
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 1.5rem;
	color: #fff;
	display: inline-block;
	display: inline-block;
	line-height: 1.4em;
	background-image: linear-gradient( transparent 0%, transparent 96%, #417298 99% );
}

.legal {
	text-align: center;
	justify-content: center;
	flex-direction: column;
}

.legal img {
	width: 300px;
	margin: 40px auto 30px;
}

.copyright {
	color: #b3d3c3;
	font-size: 1.3rem;
	padding: 2em;
	margin-bottom: 1em;
	width: 100%;
}

.copyright a {
	color: #008E4C;
	text-decoration: none;
}

.copyright span {
	border-right: 1px solid rgba(114, 129, 148, 0.44);
	padding-right: 10px;
	margin-right: 14px
}

table.year {
	width: 100%;
}



th {
	font-size: 1.3rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: left;
	padding: .25em 0;
}

td {
	font-size: 1.35rem;
	padding: 0;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.4em
}

td a { color: #144b8a; }

td a:hover { color: #237be1; }

td span {
	font-size: 1.2rem;
	display: block;
}

.winLoss { font-weight: 700; }

.ucase { text-transform: uppercase; }

.lcase {
	text-transform: none;
	margin: -4px 0 4px 0;
}

p {
	color: #4a4a4a;
	font-size: 1.5rem;
	line-height: 1.45em;
}

h1 {
	color: #0b3a69;
	font-size: 5rem;
	font-weight: 700;
}

h2 {
	color: #fff;
	font-family: "Oswald", sans-serif;
	font-size: 5rem;
	font-weight: 300;
	line-height: 1.1em;
}

h4 {
	color: #0a2648;
	font-size: 2.1rem;
	font-weight: 400;
	margin-left: -2.5rem;
	margin-top: -2.5rem;
	margin-right: -2.5rem;
	line-height: 1.2em;
	padding: .9em 1.1em 0 1.1em;
}

/******************** http://salvattore.com/ */
.size-1of4 { width: 25%; }

.size-1of3 { width: 33.333333333%; }

.size-1of2 { width: 50%; }

.size-1of1 { width: 100%; }

.singleColCaption, .videoCaption {
	font-size: 1.3rem;
	display: none;
	padding: 0;
	color: #333;
}

.singleColCaption p, .videoCaption p {
	padding: 13px 18px 16px;
	font-size: 1.4rem;
	line-height: 1.3em;
}

.videoCaption {
	display: block;
	padding-top: 1em;
}

.backToTop { display: none; }

.isFixed {
	position: fixed;
	margin: auto;
	left: 0;
	right: 0;
}

.overlay {
	width: 100%;
	height: 100%;
	background: rgba(73, 73, 73, 0.8); 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
}

.story-modal {
	background: #fff;
	max-width: 1100px;
	width: 100%;
	border-radius: 5px;
	padding: 60px;
	position: absolute;
	margin: auto;
	margin-bottom: 80px;
	top: 80px;
	left: 0;
	right: 0;
	z-index: 120;
	display: flex;
	transition: all 2s;
}

.mainStory {
	width: 65%;
	border-right: 1px solid #ccc;
	padding-right: 50px;
	padding-bottom: 120px;
}

.mainStory-head {
	font-family: "Oswald", sans-serif;
	font-size: 5rem;
	margin-bottom: .5em;
	color: #006737;
	line-height: 1.2em;
	padding-right:  60px; 
}

.mainStory p {
	line-height: 1.6em;
	margin-bottom: 1em;
}
.mainStory p:last-of-type {
	margin-bottom: 3em;
}


.modal-close {
	position: absolute;
	right: 26px;
	top: 15px;
	font-size: 40px;
	cursor: pointer;
	font-weight: 300;
	color: #494949;
}
.close-btm { 
	background: #fff;	
	color: #acbbc7;
	width: 100%;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	text-align: center;
	text-transform: uppercase;
	padding:  40px;
	font-weight: 800;
	
	
}
.close-btm p { padding: 10px; border-radius: 4px; border: none; color: #006737; background: none;  font-size: 13px; }
.close-btm p span { font-size:  1.3em; vertical-align: -1px; margin-left: 4px;}

.yearInReview {
	padding-left: 40px;
	font-size: 1.5rem;
	width: 35%;
	padding-top: 30px;
}

.yir-head {
	font-family: "Oswald", sans-serif;
	font-size: 2.6rem;
	color: #006737;
}

.yir-label {
	color: #006737;
	font-weight: 700;
	margin: 2em 0 .25em 0;
}

.yir-text { line-height: 1.3em; }

/* .hideMe { opacity: 0; }
.showMe { opacity: 1; -webkit-transition: .5s; transition: .5s; } */

.hideMe { display: none; }

.fbiframe { overflow: hidden; }

.backToTop-hide { opacity: 0; }

.fancybox { text-decoration: none !important; }

.playerHead { text-align: center;  padding-top: 120px;}
.playerHead h1 {  font-weight: 600; font-size: 2.8em;}

.rosterTable {
	width: 80%;
	margin: 80px auto;
}

.rosterTable td { padding: 12px 8px;  font-size: 14px; font-weight: 400; }
.rosterTable td a { text-decoration: none; }
.letterDivider {
	color: #ffffff;
	font-size: 2rem;
	text-align: left;
	font-weight: 800;
}
.rosterTable tr { border-bottom: 1px solid #b7bdc0; } 
.rosterTable tr:nth-child(2n) { background: none; }
.rosterTable .ld td { padding: 4px 12px;  background: #a6adb0 !important; }
.rosterTable tr.player:hover { background: #f0f2f3; transition: all .2s; cursor: pointer; }
.rosterTable tr.category  th { background: none; padding-bottom:  20px;  }

.rosterRow { color: #1a6096; }

.rosterRow:hover {
	cursor: pointer;
	color: #4b9803;
	transition: all .1s;
}

.roster-name { 
	color: #144b8a;
	text-decoration: underline;
}

.tagHead { text-align: center;  padding: 120px 0 60px 0;}
.tagHead h1 {  font-weight: 600; font-size: 2.8em;}

a { text-decoration: none;}

@media screen and (max-height: 730px) {
	.fo-decade { font-size: 3.5rem;}
	.decade-range { font-size: 2.2rem; }
}

@media screen and (min-width: 1401px) {
	#grid1 {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}
}

@media screen and (max-width: 1200px) {
	#grid1 {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
	.heroOverlay-text { max-width: 1000px; }
	.rabbit { width: 30%; }
	.rabbit:last-of-type { display: none; }

}

@media screen and (max-width: 988px) {
	#grid1 {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
						column-gap: 25px;

	}
	.photoPanel :hover { box-shadow: 0px 2px 6px rgba(0,0,0,.1); }
	.rabbit { width: 45%; }
	.rabbit:nth-child(2n) { display: none; }
	.arrows { right: 4em; }
	.scan { display: none; }
	.theYear { margin-bottom: 10px;  align-items: flex-start;}
	.heroOverlay {padding: 6em 4em; }
	.home-intro-head { margin-top:  1em; font-size: 3em;}
}

@media screen and (max-width: 900px) {
	.home-hero { height: auto; min-height: 0; }
	.homeOverlay {padding: 4em 4em 2em 4em; 	background-image: radial-gradient( rgba(73, 73, 73, 0.48) 0%, #494949 70%, #494949 80%, #494949 100% );}
	.home-content { padding-bottom: 0; }
	.heroOverlay-text { flex-direction: column-reverse; }
	.heroOverlay-text h2 { font-size: 11rem; }
	.theStory h2 { font-size: 4.5rem;  margin-top: 20px;}
	.homeOverlay { justify-content: flex-start; }
	.home-content { display: block; }
	.home-intro { width: 100%; text-align: center; padding: 0; }
	.home-intro-logo { margin: 0 auto; }
	.home-nav { width: 250px; margin: 40px auto;  }
	.all-years { padding-right: 0; border: none; }
	.home-arrows { display: none; }
	.fo-nav .all-years {  border-top: none; border-bottom: 0; margin-bottom: 0; }
	.sponsor-home { margin-top:  30px;  text-align: center; width: 100%; }


}
@media screen and (max-width: 749px) {
	.filters { display: none; }
	#grid1 {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
		padding-bottom: 0;
		
	}
	.rabbit { width: 85%; }
	.rabbit:not(:first-of-type) { display: none; }
	.yearColumns { padding-top: 20px; }
	.yearCaption { display: none; }
	.photoYearTag { display: none; }
	.singleColCaption { display: block; }
	.photoPanel img { box-shadow: none; border: none; border-radius: 2px 2px 0 0; }
	.panel { margin: 10px 0; }
	.story-modal { flex-direction: column; padding: 30px;  margin-bottom: 0; padding-bottom: 80px; z-index: 3000; top: 70px;}
	.mainStory-head { font-size: 3.5rem; }
	.mainStory, .yearInReview {
		width: 100%;
		padding: 0;
		border: none;
	}
	.photoPanel:hover { box-shadow: none; }
}

@media screen and (max-width: 650px) {
	/* .hero { height: 100vh } */
	.heroOverlay-text h2 { font-size: 11rem; }
	.hero { height: auto; min-height: 0; }
	.heroOverlay { padding: 60px 3em; height: 600px;}
	.heroOverlay-text { min-height: 100px; }
	.heroOverlay p { display: none; }
	.yearInReview-link { margin-top: 30px; }
	.fo-menu { color: #494949; font-size: 0 }
	.seahawks-logo { background-size: 140px; }
	.gamesPlayed { display: none; }
	.yearColumns h1 { margin: 50px 30px 10px 30px; }
	.rosterTable { margin: 30px auto; width: 80%; }
	.close-btm { position: fixed;     padding:  12px; }
	.close-btm p { border: 1px solid #9ab2cc; color: #006737;   }
	.theStory h1 { font-size: 12em;}
		.theStory h2 { font-size: 1.8rem; font-family: 'Roboto', sans-serif; font-weight: 400;  line-height:  1.3em;}
.theStory h2 span { font-size: 4em; display: block; margin-bottom: 40px; font-family: 'Oswald',sans-serif;}
.lbl-hide { display: none; }
.panel { box-shadow: none;}
}

@media screen and (max-width: 540px) {
	#hamb:checked ~ .fo-nav { width: 100%; padding: 10px 50px;  }
	.fo-nav { display: flex; flex-direction: column-reverse; }
	
	#hamb-player:checked ~ .player-nav {
		left: 0;
		width: 100%;
		padding: 0 40px;
		justify-content: center;
	}

	#hamb-player:checked ~ .player-nav p { margin-bottom: 0; }
	.did-you-know { display: none; }
}

@media screen and (max-width: 400px) {
	
	.mbl-arrow { display: inline-block; width: 40px; margin-top: 20px;  }
	.nextYear { display: none; }
	.theYear { border-bottom: 0px solid #008E4C; padding-bottom: 0px; margin-bottom: 0;}
	.legal img { width: 200px; margin: 20px auto; }
	.yearColumns { width: 100%; padding:12px 20px; }
	.heroOverlay { background: rgba(73, 73, 73, 0.85); }
.homeOverlay {
    padding: 3em;
    background-image: linear-gradient( rgba(73, 73, 73, .4) 0%, rgba(73, 73, 73, 0.9) 48%, #494949 56%, #494949 100% );
}
.home-intro-logo {
    margin: 0 auto;
    margin-top: 50px;
}
.theStory { text-align: center}
	.theStory h2 {  padding:  20px 40px; }

.home-hero{     background-position: 50% -300px;}
	.home-intro-head { margin-top: 40px; font-size: 2.8em;}
	.home-header { text-align: left; font-size: 1.7em;     padding: 24px 15px 5px;     border-top: 1px solid #fff; }
	.home-header span { display: block; margin-bottom: 6px; }
	.fo-player { margin-top: 0px; margin-bottom: 0; }
	.home-nav {  margin-bottom: 0;}
	.seahawks-logo { background-position: 50% 50%; }
	.heroOverlay-text { padding-bottom: 4em; }
	.theLine { display: none; }
	.yearInReview-link { display: block; text-align: center; margin-bottom: 1em; }
	.arrows {
		background-image: url(../img/arrowsSml.svg);
		margin-top: -3em;
		position: absolute;
		height: 50px;
		left: 50%;
		margin-left: -25px
	}
	.photoPanel {
		
		 pointer-events: none;
   cursor: default;
	}
}
	.photoPanel-home {
		
		 pointer-events:  all;
   cursor: pointer;
	}
}