#infographic * {
			box-sizing: border-box;
		}

		#infographic {
			margin: 50px 0;
		}


		#infographic div.heading {

			font-weight:700;
			text-transform:uppercase;
		}

		#infographic .row-flex-container {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-content: stretch;
			color: #fff;
			margin: 0 auto;
		}

		#infographic .row-flex-container>* {
			flex: 1;
			margin: 0 10px;
		}

		#infographic .row-flex-container>:first-child {
			margin-left: 0;
		}

		#infographic .row-flex-container>:last-child {
			margin-right: 0;
		}

		#infographic .prelim-flex-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			align-content: center;
			background-color: #0080bf;
			padding: 20px;
		}

		#infographic .prelim-flex-container>* {
			margin: 5px 0;
			text-align: center;
		}

		#infographic .prelim-flex-container>:first-child {
			margin-top: 0;
		}

		#infographic .prelim-flex-container>:last-child {
			margin-bottom: 0;
		}

		#infographic .lines-flex-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			align-content: center;
		}

		#infographic .lines-flex-container>.line {
			font-size: 48px;
		}

		#bracket * {
			box-sizing: border-box;
		}

		#bracket {
			font-size: 13px;
			line-height: 16px;
			margin-bottom: 50px;
			background-color:#fff;
		}

		#bracket div.heading {
			font-size: 15px;
			line-height: 18px;
			font-weight:700;
		}

		#bracket .heading-flex-container {
			display: flex;
			flex-direction: row;
			align-content: center;
			align-items: stretch;
		}

		#bracket .heading-flex-container>* {
			flex: 1;
			display: flex;
			justify-content: center;
			background-color:#0080bf;
			padding:15px;
			margin-bottom:5px;
			border-left:1px solid #003f5f;
			border-right:1px solid #003f5f;
		}
		
				#bracket .heading-flex-container>*:first-child {
			border-left:none;
		}
						#bracket .heading-flex-container>*:last-child {
			border-right:none;
		}

#bracket div.subheading {
			font-size: 12px;
			line-height: 14px;
			font-family:"roobert",sans-serif;
			font-weight:700;
		}

		#bracket .subheading-flex-container {
			display: flex;
			flex-direction: row;
			align-content: center;
			align-items: stretch;
			color:#003f5f;
		}

		#bracket .subheading-flex-container>* {
			flex: 1;
			display: flex;
			justify-content: center;
			padding:0;
			margin:0 1px 25px 1px;
		}
		
				#bracket .subheading-flex-container>*:first-child {
			margin-left:0;
		}
						#bracket .subheading-flex-container>*:last-child {
			margin-right:0;
		}
		#bracket .horizontal-flex-container {
			display: flex;
			flex-direction: row;
			align-content: center;
			align-items: stretch;
			padding:30px;
		}

		#bracket .horizontal-flex-container>* {
			flex: 1;
			display: flex;
			justify-content: center;
		}

		#bracket .vertical-flex-container {
			display: flex;
			flex-direction: column;
		}

		#bracket .vertical-flex-container>* {
			height: auto;
		}

		#bracket .round-flex-container>* {
			flex: 1;
			margin: 50px 0;
			height: 100px;
			position: relative;
		}

		#bracket .round-flex-container>*:first-child {
			margin-top: 0;
		}

		#bracket .round-flex-container>*:last-child {
			margin-bottom: 0;
		}

		#bracket .round-flex-container>.left {
			border-top: 2px solid #003f5f;
			border-right: 2px solid #003f5f;
			border-bottom: 2px solid #003f5f;
			border-left: 2px solid transparent;
		}

		#bracket .round-flex-container>.right {
			border-top: 2px solid #003f5f;
			border-left: 2px solid #003f5f;
			border-bottom: 2px solid #003f5f;
			border-right: 2px solid transparent;
			text-align: right;
		}

		#bracket .round-flex-container>.final {
			border: none;
			height: auto;
			text-align: center;
		}

		#bracket .round-flex-container>.final:before {
			content: '';
			position: absolute;
			border-bottom: 2px solid #003f5f;
			height: 100%;
			width: 100%;
			transform: translateY(-50%);
		}

		#bracket .matchup-flex-container {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			/*white-space: nowrap;*/
			overflow:x:hidden;
		}

		#bracket .matchup-flex-container>* {
			padding: 2px;
		}

		#bracket .player-flex-container {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: stretch;
			align-content: center;
		}

		#bracket .player-flex-container>* {
			padding: 0 2px;
		}



		#bracket .final .player-flex-container {
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		
		#bracket .final .player-flex-container>* {
			padding: 4px;
		}

		#bracket .player-container {
			display: flex;
			flex-direction: row;
		}

		#bracket .player-container>* {
			padding: 0 2px;
			color:#003f5f;
		}


		#bracket .player-rank {
			/*background-color: #0f4674;*/
			/* width: 16px; */
			/* align-self:flex-start; */
			font-weight:700;
			font-size:12px;
			display:block;
		}
		
		#bracket .player-locale-flex-container {
			display:flex;
			flex-direction:column;
		}
		#bracket .player-locale-flex-container>* {
			margin:0;
		}
		#bracket .player {
			font-weight:700;
			font-size:12px;

		}
		#bracket .locale {
			font-size:11px;
			font-weight: 400;
			opacity:.75;
		}
		#bracket .player-locale-flex-container>*:first-child {
			margin-top:0;
		}
		#bracket .player-locale-flex-container>*:last-child {
			margin-bottom:0;
		}
		#bracket .results-container {
			padding: 2px 4px;
			color: #0080bf;
			display:flex;
			justify-content:center;
			align-items: center;
			font-weight:700;
			font-size:12px;
		}
		#bracket .victor {
			background-color: #0080bf;
			color: #fff;
		}
		#bracket .in-progress {
			text-align:right;
			color:#003f5f;
			font-size:12px;
			font-weight:700;
			padding-right:5px;
			margin-bottom:5px;
		}
		#bracket .in-progress-right {
			text-align:left;
			color:#003f5f;
			font-size:12px;
			font-weight:700;
			padding-left:5px;
			margin-bottom:5px;
		}
		#bracket .empty {
			background: none;
			padding: 2px 4px;
			color: inherit;
		}

		#bracket #round2 .round-flex-container>* {
			margin: 150px 0;
			height: 150px;
		}

		#bracket #round2 .round-flex-container>*:first-child {
			margin-top: 0;
		}

		#bracket #round2 .round-flex-container>*:last-child {
			margin-bottom: 0;
		}

		#bracket #round3 .round-flex-container>* {
			height: 300px;
		}

		#bracket #final .round-flex-container {
			margin: 0;
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		#bracket #final .matchup-flex-container {
			margin: 0;
			justify-content: center;
		}

		#bracket #final .top {
			justify-content: flex-start;
		}

		#bracket #final .top>* {
		background-color:#0080bf;
			padding:15px;
			width: 100%;
			text-align: center;
			visibility: hidden;
			margin-bottom:10px;
		}
		
		#bracket #final .bottom {
			justify-content: flex-end;
		}

		#bracket #final .winner {
			text-align: center;
			border: 2px solid #003f5f;
			padding: 15px;
			width: 100%;
			color:#003f5f;
			font-weight:700;
		}

		#bracket .winner-flex-container {
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

		#bracket .winner-flex-container>* {
			margin: 2px auto;
		}

		#bracket .winner-flex-container>*:first-child {
			margin-top: 0;
		}

		#bracket .winner-flex-container>*:last-child {
			margin-bottom: 0;
		}
		
		#bracket .winner-flex-container>.heading {
		background-color:#0080bf;
			padding:10px;
			width: 100%;
			text-align:center;
			
			}

		@media (max-width:1023px) {
			#infographic {
				font-size: 12px;
				line-height: 15px;
			}
			#infographic div.heading {
				font-size: 13px;
				line-height: 15px;
			}
			#bracket {
				font-size: 12px;
				line-height: 15px;
			}
			#bracket div.heading {
				font-size: 13px;
				line-height: 15px;
			}
			#bracket .heading-flex-container>*:nth-child(n+4) {
				display: none;
			}
			#bracket .subheading-flex-container>*:nth-child(n+4) {
				display: none;
			}
			#bracket .horizontal-flex-container {
				flex-wrap: wrap;
			}
			#bracket .horizontal-flex-container>* {
				flex: 1 1 33.333%;
			}
			#bracket .horizontal-flex-container>*:nth-child(1) {
				order: 1;
			}
			#bracket .horizontal-flex-container>*:nth-child(2) {
				order: 2;
			}
			#bracket .horizontal-flex-container>*:nth-child(3) {
				order: 3;
			}
			#bracket .horizontal-flex-container>*:nth-child(7) {
				order: 4;
				margin-top:50px;
			}
			#bracket .horizontal-flex-container>*:nth-child(6) {
				order: 5;
				margin-top:50px;
			}
			#bracket .horizontal-flex-container>*:nth-child(5) {
				order: 6;
				margin-top:50px;
			}
			#bracket .horizontal-flex-container>*:nth-child(4) {
				order: 7;
				margin-top: 50px;
			}

			#bracket .right .player-container {
				order: 1;
			}
			#bracket .right .results-container {
				order: 2;
			}
			#bracket .results-container {
				display:none;
			}
			#bracket .right .player-rank {
				order: 1;
			}
			#bracket .right .player {
				order: 2;
			}
			#bracket #final .final {
				margin-bottom: 25px;
			}
			#bracket .round-flex-container>.right {
				border-top: 2px solid #003f5f;
				border-right: 2px solid #003f5f;
				border-bottom: 2px solid #003f5f;
				border-left: 2px solid transparent;
				text-align: left;
			}
			#bracket #final .top>* {
				margin-bottom: 10px;
				visibility: visible;
			}
		}
		
		@media (max-width:500px) {
		
					#bracket .locale {
				display:none;
			}

			#bracket .in-progress {
				display:none;
			}
	}