html,
body{
	margin: 0;
	padding: 0;
	font-family: 'Didact Gothic', sans-serif;
}

#top-screen {
	min-height: 100vh;
	width: 100%;
	margin: 0;
	padding: 0;
}

.video-container {
    position: relative;
    /*padding-top: 56.25%;  this gives you responsive aspect ratio */
    overflow: hidden;
	min-height:100vh;
}

.hero-video {
    position: absolute;
    width: auto;
	min-width:100vw;
    min-height: 100vh;
    top: 0;
    display:inline-block;
}
/* in this example we are "vertically-centering" the caption */
.hero-caption {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    font: 0/0 a;
}

.hero-caption:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: middle; 
}       

.hero-caption-inner {
    font: 16px/1 Helvetica; /* Reset the font property */
    display: inline-block;
    vertical-align: middle;
    text-align:center;
    width: 100%;
 }
 
.hero-caption-inner img {
	width:auto;
}

/* goodyear banner */
.hero-goodyear {
    position: absolute;
    display: inline-block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
    font: 0/0 a;
}

.hero-goodyear:before {
    content: ' ';
    display: inline-block;
    height: 100%;
    vertical-align: top; 
}       

.hero-goodyear-inner {
    font: 16px/1 Helvetica; /* Reset the font property */
    display: inline-block;
    vertical-align: middle;
    text-align:center;
    width: 100%;
 } 
 
.hero-goodyear-inner img {
    width: 100%;
	height:auto;
 }  
 
#menu{
  transition:1s;
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  top:calc(100% - 60px);
  background-color: #FFFFFF;
  /*unimportant*/color: #1f3e78;
  /*unimportant*/text-align: center;
   /*unimportant*/font-size: 20px;
   line-height:60px;
   font-family: 'Didact Gothic', sans-serif;
}

#menu a {
	color: #1f3e78;
	text-decoration:none;
}

#menu a:hover {
	color: #0771b9;
	text-decoration:none;
}

#pageMenu{
  transition:1s;
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  top:0;
  background-color: #FFFFFF;
  /*unimportant*/color: #1f3e78;
  /*unimportant*/text-align: center;
   /*unimportant*/font-size: 20px;
   line-height:60px;
   font-family: 'Didact Gothic', sans-serif;
   z-index:9999;
}

#pageMenu a {
	color: #1f3e78;
	text-decoration:none;
}

#pageMenu a:hover {
	color: #0771b9;
	text-decoration:none;
}

#pageMenu img {
    width: 20%;
    height: auto;
    max-width: 77px;
    vertical-align: middle;
    padding-right: 20px;
	/*display:none;*/
}

#showTickets a {
	color: #FFFFFF;
	text-decoration:none;
}

#showTickets a:hover {
	color: #fee700;
	text-decoration:none;
}

#showTickets {
	clear:both;
	width:100%;
	background-color: #1F3E78;
	color: #FFFFFF;
	text-align:center;
	font-size: 14px;
    line-height:40px;
    font-family: 'Didact Gothic', sans-serif;
	display:none;
}

#showClassic a {
	color: #FFFFFF;
	text-decoration:none;
}

#showClassic a:hover {
	color: #fee700;
	text-decoration:none;
}

#showClassic {
	clear:both;
	width:100%;
	background-color: #1F3E78;
	color: #FFFFFF;
	text-align:center;
	font-size: 14px;
    line-height:40px;
    font-family: 'Didact Gothic', sans-serif;
	display:none;
}

#showFanzone a {
	color: #FFFFFF;
	text-decoration:none;
}

#showFanzone a:hover {
	color: #fee700;
	text-decoration:none;
}

#showFanzone {
	clear:both;
	width:100%;
	background-color: #1F3E78;
	color: #FFFFFF;
	text-align:center;
	font-size: 14px;
    line-height:40px;
    font-family: 'Didact Gothic', sans-serif;
	display:none;
}

#showStadium a {
	color: #FFFFFF;
	text-decoration:none;
}

#showStadium a:hover {
	color: #fee700;
	text-decoration:none;
}

#showStadium {
	clear:both;
	width:100%;
	background-color: #1F3E78;
	color: #FFFFFF;
	text-align:center;
	font-size: 14px;
    line-height:40px;
    font-family: 'Didact Gothic', sans-serif;
	display:none;
}

#showMedia a {
	color: #FFFFFF;
	text-decoration:none;
}

#showMedia a:hover {
	color: #fee700;
	text-decoration:none;
}

#showMedia {
	clear:both;
	width:100%;
	background-color: #1F3E78;
	color: #FFFFFF;
	text-align:center;
	font-size: 14px;
    line-height:40px;
    font-family: 'Didact Gothic', sans-serif;
	display:none;
}

#menu img {
    width: 20%;
    height: auto;
    max-width: 77px;
    vertical-align: middle;
    padding-right: 20px;
	display:none;
}

#screen2{
  width: 100%;
  /*only for example*/height: 100vh; 
} 

.container {
	-webkit-align-items: center;
	align-items: center;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	overflow: hidden;
	/*padding: 15px;*/
	position: relative;
	width: 100%;
}
.container--big {
	height: 175vh;
}
.container--full {
	height: 100vh;
}
.container--small {
	height: 40vh;
}
.container--random {
	height: "289px";
}
.container .content {
	/*background: rgba(0, 0, 0, .4);
	border-radius: 3px;*/
	color: #1F3E78;
	/*margin: 0 auto;*/
	padding: 15px 20px;
	text-align: left;
	width:100%;
}

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}
.parallax__container .parallax {
	/* can be put in a seperate class for better control */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* --------------------------- */
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

.bg1 {
	background-image: url("../_images/cotton_bowl_poster_final.jpg");
}

#bg3 {
	background-image: url("../_images/2015-12-06_matchup-set.jpg");
}

#bg4 {
	background-image: url("../_images/3AH_8777.jpg");
}

#bg5 {
	background-image: url("../_images/ARL20171229116.jpg");
}

#bg6 {
	background-image: url("../_images/kids-camp.jpg");
}

.sectionHeadline {
	font-family: 'Didact Gothic', sans-serif;
	font-size:3em;
	border-bottom:2px solid #1F3E78;
	border-top:2px solid #1F3E78;
	padding:1%;
	margin:0;
	margin-top: 1em;
}

.content .sectionHeadline {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 3em;
    border-bottom: 2px solid #1F3E78;
    border-top: 2px solid #1F3E78;
    padding: 1%;
    margin: 0;
    margin-top: 1em;
    padding-left: 5%;
}

.blueHeadline {
	font-family: 'Didact Gothic', sans-serif;
	font-size:3em;
	border-bottom:2px solid #FFFFFF;
	border-top:2px solid #FFFFFF;
	padding:1%;
	margin:0;
	margin-top: 1em;
	color:#FFFFFF;
	text-align:center;
}

h2 {
	font-family: 'Didact Gothic', sans-serif;
	font-size:2em;
	border-bottom:2px solid #1F3E78;
	padding:1%;
	padding-left:0;
	margin:0;
}

h2 a {
	color:#1F3E78;
	text-decoration:none;
}
	

h3 {
	font-family: 'Didact Gothic', sans-serif;
	font-size:1.2em;
	padding:1%;
	padding-left:0;
	margin:0;
}

h3 a {
	color:#1F3E78;
	text-decoration:none;
}

.followUs {
	font-family: 'Didact Gothic', sans-serif;
	font-size:.5em;
	padding:1%;
	padding-left:0;
	margin:0;
	float:right;
}

.followUs img {
	max-width:40px;
	height:auto;
}

.viewAll {
	font-family: 'Didact Gothic', sans-serif;
	font-size:.35em;
	padding:1%;
	padding-left:0;
	margin:0;
	float:right;
}

.rankingNumber {
	width:10%;
	float:left;
}
.rankingSchool {
	width:66%;
	float:left;
	margin-left:2%;
}
.rankingRecord {
	width:20%;
	float:left;
	margin-left:2%;
}

#rankingAd {
	width:100%;
}

#rankingAdMobile {
	display:none;
}

#copy {
	width:90%;
	margin:auto;
	margin-top:2em;
}

#copy p {
	margin-bottom:2em;
}

* { box-sizing: border-box; }

.video-background {
  background: #000;
/*  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;*/
  z-index: -99;
}

.video-foreground,
.video-background iframe {
  width: 100vw;
  height: 100vh;
  /*position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;*/
}

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

#pastClassics {
	width:95%;
	margin:auto;
}

.gameProgram {
	width:20%;
	float:left;
	text-align:center;
	color:#FFFFFF;
	font-size:1em;
	margin-bottom: 1em;
}

#pastClassics img {
	width:90%;
	max-width:125px;
	height:auto;
}

.pn-ProductNav_Wrapper {
	position: relative;
	padding: 0 11px;
}

.pn-ProductNav {
    /* Make this scrollable when needed */
    overflow-x: auto;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* If JS present, let's hide the default scrollbar */
    .js & {
        /* Make an auto-hiding scroller for the 3 people using a IE */
        -ms-overflow-style: -ms-autohiding-scrollbar;
        /* Remove the default scrollbar for WebKit implementations */
        &::-webkit-scrollbar {
            display: none;
        }
    }
	/* positioning context for advancers */
	position: relative;
}

.pn-ProductNav_Contents {
	float: left;
	transition: transform .2s ease-in-out;
}

.pn-ProductNav_Contents-no-transition {
	transition: none;
}

.pn-ProductNav_Link a {
	color:#FFFFFF;
	text-decoration:none;
}

.pn-ProductNav_Link a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}

.pn-ProductNav_Link {
	padding: 20px;
	margin-top:1em;
	text-align:center;
	color:#FFFFFF;
	font-size:.8em;
	display: inline-block;
	align-items: center;
	min-height: 44px;
	& + & {
		margin-left: 11px;
		padding-left: 11px;
		border-left: 1px solid #eee;
	}
	&[aria-selected="true"] {
		color: #111;
	}
}

.pn-Advancer {
	/* Reset the button */
	appearance: none;
	background: transparent;
	padding: 0;
	border: 0;
	&:focus {
		outline: 0;
	}
	&:hover {
		cursor: pointer;
	}
	/* Now style it as needed */
	position: absolute;
	top: 0;
	bottom: 0;
	/* Set the buttons invisible by default */
	opacity: 0;
	transition: opacity .3s;
}

.pn-Advancer_Left {
	left: 0;
	[data-overflowing="both"] ~ &,
	[data-overflowing="left"] ~ & {
		opacity: 1;
	}
}

.pn-Advancer_Right {
	right: 0;
	[data-overflowing="both"]  ~ &,
	[data-overflowing="right"] ~ & {
		opacity: 1;
	}
}

.pn-Advancer_Icon {
	width: 20px;
	height: 44px;
	fill: #bbb;
}

#fbaLogo {
	width:6%;
	float:left;
	margin-right:1%;
	font-size:9px;
}

#fbaLogo img {
	width:100%;
	max-width:88px;	
}

#footerContact {
	width:13%;
	float:left;
	margin-right:1%;
	color:#FFFFFF;
	font-size:9px;
}


#footerLinks {
	width:12%;
	float:left;
	margin-right:1%;
	color:#FFFFFF;
	font-size:9px;
}

#footerSocial {
	width:5%;
	float:left;
	margin-right:1%;
	color:#FFFFFF;
	font-size:9px;
}

#footerSocialBtn {
	width:12%;
	float:left;
	margin-right:1%;
	color:#FFFFFF;
	font-size:9px;
}

#footerSocialBtn img {
	width:100%;
	max-width:30px;
}

#footerAccountMgr {
	float:left;
	margin-right:2%;
	color:#003B7B;
	font-size:10px;
	background-color:#FFFFFF;
	padding:5px;
	font-weight:900;
	margin-top:10px;
	width:100%;
	position:relative;
	text-align:center;
}

#footerLinks a {
	color:#FFFFFF;
	text-decoration:none;
}

#footerAccountMgr a {
	color:#003B7B;
	text-decoration:none;
}

#footerAccountMgr a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}

#footerDirections {
	clear:both;
	float:left;
	color:#003B7B;
	font-size:10px;
	background-color:#FFFFFF;
	padding:5px;
	font-weight:900;
	margin-top:10px;
	width:100%;
	position:relative;
	text-align:center;
}

#footerDirections a {
	color:#003B7B;
	text-decoration:none;
}

#footerDirections a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}


#footerSeatingChart {
	float:left;
	margin-right:2%;
	color:#FFFFFF;
	font-size:10px;
	/*background-color:#003B7B;*/
	padding:5px;
	font-weight:900;
	margin-top:10px;
	width:10%;
	position:relative;
	text-align:center;
}

#footerSeatingChart a {
	color:#FFFFFF;
	text-decoration:none;
}

#footerSeatingChart a:hover {
	color:#FFFFFF;
	text-decoration:underline;
}


#footerCorporate {
	width:12%;
	float:left;
	margin-right:0;
	margin-left:0;
	color:#FFFFFF;
	font-size:9px;
	text-align:center;
}

#footerCorporate img {
	padding-top:5px;
	width:70%;
	height:auto;
}

#footerMedia {
	width:12%;
	float:left;
	margin-right:0;
	color:#FFFFFF;
	font-size:9px;
	text-align:center;
}

#footerMedia img {
	padding-top:5px;
	width:70%;
	height:auto;
	/*max-height:60px;*/
}

#buttonWrapper {
	float:left; margin-right:2%; width:10%; position:relative; text-align:center;
}

#collegeHeadlines {
	width:60%; float:left; margin-top:3em; margin-left:5%; margin-right:5%;
}

#collegePoll {
	width:25%; float:left; margin-top:3em; margin-right:5%;
}