.hero {position:relative; text-align: center; overflow: hidden; color: #fcfcfc; }
.hero h1 {font-family: 'Play', sans-serif;font-weight: normal;font-size: 5.4em;margin:0 0 20px; text-shadow:0 0 12px rgba(0, 0, 0, 0.5);text-transform: uppercase;letter-spacing:-1px;}
.hero p {font-family: 'Abel', sans-serif;text-transform: uppercase; color: #5CCA87; letter-spacing: 6px;text-shadow:0 0 12px rgba(0, 0, 0, 0.5);font-size: 1.2em;}
.hero-wrap {padding: 0.5em 10px; width:922px;}
.hero p.intro {font-family: 'Play', sans-serif;text-transform: uppercase;letter-spacing: 1px;font-size: 3em;margin-bottom:-10px;}
.hero p.year {color: #fff; letter-spacing: 20px; font-size: 34px; margin: -25px 0 25px;}
.hero p.year i {font-size: 14px;vertical-align: middle;}
#bracket {overflow:hidden;background-color: #e1e1e1;background-color:rgba(225,225,225,0.9);padding-top: 20px;font-size: 12px;padding: 40px 0;}
.container {max-width: 940px; font-family: 'Play', sans-serif; font-size:10px;margin: 0 auto;display:block;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -webkit-flex;display: flex;-webkit-flex-direction:row;flex-direction: row;}
.container2 {max-width: 100%; font-family: 'Play', sans-serif; font-size:10px;margin: 0 auto;display:block;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -webkit-flex;display: flex;-webkit-flex-direction:row;flex-direction: row;}
.split {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;width: 42%;-webkit-flex-direction:row;-moz-flex-direction:row;flex-direction:row;}
.split-full {width: 75%;}
.split-full2 {width: 50%;}
.champion {float:left;display:block;width: 16%;-webkit-flex-direction:row;flex-direction:row;-webkit-align-self:center;align-self:center;margin-top: -15px;text-align: center;padding: 230px 0\9;} 
.champ-full {width: 25%;}
.champ-full2 {width: 50%;}
.champion em {color: #a0a6a8; font-size: 45px;padding: 10px 0; }
.round {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:95%;width:30.8333%\9;}
.split-two {}
.split-one .round {margin: 0 2.5% 0 0;}
.split-two .round {margin: 0 0 0 2.5%;}

.matchup {margin:0;width: 100%;padding: 10px 0;height:60px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.matchup2 {margin:0;width: 100%;padding: 10px 0;height:100px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.matchup3 {margin:0;width: 100%;padding: 10px 0;height:80px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.matchup4 {margin:0;width: 100%;padding: 10px 0;height:100px;-webkit-transition: all 0.2s;transition: all 0.2s;}


.score {font-size: 11px;text-transform: uppercase;float: right;color: #2C7399;font-weight: bold;font-family: 'Play', sans-serif; position: absolute;right: 5px;}
.score2 {font-size: 11px; background: #1877f2; padding: 1px 4px 2px 4px; color: #fff; border-radius: 5px; text-align: center;}
.team {padding: 0 5px;margin: 6px 0;height: 25px; line-height: 25px;white-space: nowrap; overflow: hidden;position: relative;}
.round-two .matchup {margin:0; height: 60px;padding: 50px 0;}
.round-three .matchup {margin:0; height: 60px; padding: 130px 0;}
.round-details {font-family: 'Play', sans-serif; font-size: 13px; font-weight:600; color: #2C7399;text-transform: uppercase;text-align: center;height: 40px;}
.champion li, .round li {background-color: #e3e3e3;box-shadow: none; list-style:none;}

.current li {opacity: 1; }

.current li.team {background-color: #e3e3e3;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);opacity: 1;}
.current .matchup2 li.team {background-color: #d1e5ff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);opacity: 1; overflow: auto; overflow-y: hidden;}
.current .matchup3 li.team {background-color: #d1e5ff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);opacity: 1; overflow: auto; overflow-y: hidden;}

.vote-options {display: block;height: 52px;}
.share .container {margin: 0 auto; text-align: center;}
.share-icon {font-size: 24px; color: #fff;padding: 25px;}
.share-wrap {max-width: 1100px; text-align: center; margin: 60px auto;}
.final {margin: 4.5em 0;}

.divider {border-top: 1px solid #ccc; width: 10px; height: 162px; margin-top: 123px; border-right: 1px solid #ccc; margin-right: 15px; border-bottom: 1px solid #ccc;}

.para {color: #fff; width: 48px; padding: 0px 5px; background: #1877f2 !important; margin-bottom: -6px;}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.share-icon {color: #fff; opacity: 0.35; }
.share-icon:hover { opacity:1;  -webkit-animation: pulse 0.5s; animation: pulse 0.5s;}
.date {font-size: 10px; letter-spacing: 2px;font-family: 'Istok Web', sans-serif;color:#3F915F;}



@media screen and (min-width: 980px) and (max-width: 1099px) {
  .container {margin: 0 1%;}
  .champion {width: 14%;}
  .split {width:43%; }
  .split-one .vote-box {margin-left: 138px;}
  .hero p.intro {font-size: 28px;}
  .hero p.year {margin: 5px 0 10px;}

}

@media screen and (max-width: 979px) {
  .container {-webkit-flex-direction:column;-moz-flex-direction:column;flex-direction:column;}
  .split, .champion {width: 100%;margin: 0;}
  .champion {-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;}
  .split {border-bottom: 1px solid #b6b6b6; padding-bottom: 20px;}
  .hero p.intro {font-size: 24px;}
  .hero h1 {font-size: 3em; margin: 15px 0;}
  .hero-wrap {padding: 0.5em; max-width:630px;}
  .hero p {font-size: 1em;}
}

@media (min-width: 631px) and (max-width: 979px) {
	
	.container {max-width:620px;}
}


@media (min-width: 381px) and (max-width: 630px) {

  .split {width: 95%;margin: 0;}
  .round {width:21%;}
  .current {-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1;}
  .hero h1 {font-size: 2.15em; letter-spacing: 0;margin:0; }
  .hero p.intro {font-size: 1.15em;margin-bottom: -10px;}
  .round-details {font-size: 110%;}
  .hero-wrap {padding: 0.5em; max-width:350px;}
  .hero p.year {margin: 5px 0 10px; font-size: 18px;}

}


@media screen and (max-width: 380px) {

  .split {width: 95%;margin: 0;}
  .round {width:21%;}
  .current {-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1;}
  .hero h1 {font-size: 2.15em; letter-spacing: 0;margin:0; }
  .hero p.intro {font-size: 1.15em;margin-bottom: -10px;}
  .round-details {font-size: 110%;}
  .hero-wrap {padding: 0.5em; max-width:290px;}
  .hero p.year {margin: 5px 0 10px; font-size: 18px;}

}