.title, .cta-text {
  font-family: "BWHaasText-75Bold","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 25px;
  line-height: 28px;
  color: #3C3C3C;
  margin-bottom:5px;
}

.caption{
  color:  #999;
  font-family: "HaasText","Georgia";
  font-size: 16px;
}

.caption.school{
  color: black;
}

.info-round{
  color: #999;
  font-family: "HaasText","Georgia";
  font-size: 16px;
  text-align: center;
}

.start-time,.location{
  text-align: center;
  font-family: "HaasText","Georgia";
  font-size: 16px;
  color: #999;

}

#list{
  float: left;
  width: 380px;
}
.list-item{
  background-color: rgb(232,232,232);
  margin-bottom: 5px;
}
.list-item:hover{
  background-color: rgb(193,193,193);
}
.list-item.graph-scroll-active{
  /*border-top: 2px solid rgb(232,232,232);*/
  background-color: #fff;
}

.graph-scroll-active .title{
  color: rgb(246,0,82);
}

#scroll-container {
  position: relative;
  overflow: auto;
}

#ncaa {
  position: absolute;
  width: 760px;
  margin-left: 380px;
}

#ncaa.graph-scroll-above{
  position: absolute;
}

#ncaa.graph-scroll-fixed{
  position: fixed;
  top: 0;
}

#ncaa.graph-scroll-below{
  position: absolute;
  bottom: 0;
}

svg{
  margin: -20px 0 0 0;
}

.key{
  padding: 10px 20px;
  color: #363636;
  margin: 20px auto 0;
  height: 50px;
  width: 350px;
}
.key .title{
  float: left;
  width: 60px;
  color: #363636;
  font-weight: 700;
  font-size: 16px;
}
.key .text{
  font-family: "HaasText","Georgia";
  font-weight: 300;
  font-size: 14px;
  line-height: 33px;
  width: 100px;
  float: right;
}

.key .box{
  margin-left: -30px;
  margin-top: -30px;
  height: 20px;
  width: 20px;
}

.key .correct{
  background-color: #c00;
  opacity: .2;
}
.key .incorrect{
  background-color: #0c0;
  opacity: .2;
}

.game {
  fill: none;
  stroke: rgb(232,232,232);
}
.person{
  height: auto;
  padding: 10px 20px;
  -webkit-transition: height 1s ease-in-out, opacity 1s ease-in-out;
  -moz-transition: height 1s ease-in-out, opacity 1s ease-in-out;
  -o-transition: height 1s ease-in-out, opacity 1s ease-in-out;
  -ms-transition: height 1s ease-in-out, opacity 1s ease-in-out;
  transition: height 1s ease-in-out, opacity 1s ease-in-out;
}

.person:first-child(){
  border-top: 2px solid rgb(232,232,232);
}

.results{
  height: 80px;
  padding: 10px 20px;
}
.results.graph-scroll-active{
  border-top: 0px solid rgb(232,232,232);
}
.results.collapsed{
  height: 55px;
  /*padding-bottom: 40px;*/
}
.results.collapsed:hover img{
  top: 5px;
}
.last{
  height: 500px;
}
.visible{

}
.about{
  float: left;
  width: 70%;
}
.results .about{
  width: 90%;
}
.score{
  float: left;
  width: 30%;
  text-align: center;
}
.list-headline{
  padding: 10px 20px;
  color: #767676;
  font-weight: 700;
  font-size: 16px;
}
.details{
  height: 100px;
  opacity: 1;
  margin-top: 20px;
  -webkit-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  -moz-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  -o-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  -ms-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  transition: height .15s ease-in-out, opacity  .15s ease-in-out;
}
.collapsed .details{
  height:0px;
  opacity: 0;
  display: none;
  -webkit-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  -moz-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  -o-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  -ms-transition: height .15s ease-in-out, opacity  .15s ease-in-out;
  transition: height .15s ease-in-out, opacity  .15s ease-in-out;
}
.collapsed img{
  position: relative;
  right: -10px;
  top: 55px;
  float: right;
  opacity: 0;
}
.collapsed:hover img{
  opacity: 1;
}
.results.collapsed:hover img{
  top: 5px;
}
.outcome{
  width:16%;
  height: 75px;
  float: left;
  text-align: center;
  border: 2px solid rgb(232,232,232);
  border-top: none;
  border-bottom: none;
  border-right: none;
}
.outcome:first-child{
  border-left: none;
  margin-left: -12px;
}

.outcome .val{
  margin: 0px auto;
  width:60%;
  color: #999;
  font-family: "HaasText","Georgia";
  font-size: 12px
}

.outcome .val:nth-child(2){
  color: #363636;
  font-family: "HaasText","Georgia";
  margin-top: 10px;
}

.charity{
  margin-top: 5px;
  color: #363636;
}

.info-box{
  position: absolute;
  pointer-events: none;
  width: 260px;
  top: 390px;
  left: 250px;
  box-sizing: border-box;
  padding: 10px;
  font-family: "HaasText","Georgia";
  color: black;
}

.info-box .match {
  margin: auto;
  color: black;
}
.match .team {
  line-height: 40px;
  height: 40px;
  text-align: center;
}
.match .team .caption{
  margin: 0 0 0 50px;
  line-height: 20px
}
.match .team img, .match .team .imgBlock{
  float: left;
  width: 40px;
  margin-top: -10px
}
.match .team .imgBlock{
  height: 40px;
}
.debug {
  display: none;
}

.logos, .logos-shadows {
  pointer-events: none;
}

.logos-shadows image {
  opacity: .4
}

.logos-shadows image.highlighted {
  opacity: 1;
}

.layer-highlights path {
  pointer-events: none;
  fill: none;
  stroke: #000;
  stroke-width: 4px;
}

.team, .game {
  stroke: #fff;
  stroke-width: 1px;
}

.team {
  fill: #fff;
}

.game {
  fill: #ccc;
  opacity: .3;
}

.team.highlight-team {
  fill: #ccc;
}

.game.played {
  fill: #aaa;
}

.game.winnerCircle {
  fill: #fff;
}

.games.scored .game.correct {
  fill: #0c0;
}

.games.scored .game.incorrect {
  fill: #d33;
}

.game.highlight-team {
  opacity: .6;
}

.radialLines line {
  stroke: #fff;
  pointer-events: none;
}

.dividers {
  fill: #fff;
  pointer-events: none;
}

.dividers path {
  stroke: #ccc;
}

.dividers .quadrant {
  stroke: #aaa;
}

.regions {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 24px;
  fill: #ccc;
}
@media only screen and (max-width: 1680px)  {
  #inner-content{
    max-width: 98%;
  }
}

@media only screen and (max-width: 1100px)  {
  #inner-content{
    margin: 30px 0;
    max-width: 100%;
  }
  #list{
    width: 340px;
  }

  .caption{
    font-size: 12px
  }
  .match .team {
    max-width: 170px;
    height: 30px
  }
  .match .team img, .match .team .imgBlock{
    float: left;
    width: 30px;
    margin-top: -5px;
  }
  .match-info {
    max-width: 190px;
  }
  .match .team .caption{
    margin: 0 20px 0 50px;
    line-height: 14px
  }
}

@media only screen and (max-width: 880px)  {
  #list{
    width: 100%;
  }
  #ncaa{
    display: none;
  }
  .results{
    display: none;
  }
}


@media only screen and (max-width: 680px)  {
  .top-banner{
    display: none;
  }
}