.ladder-container { position: absolute; margin-left: 50%; transform: translateX(-50%); background-color: rgba(0,0,0,0.85); top: 200px; opacity: 0; transition: opacity 1s; color: white; >.bracket { >.connector { display: none; } } } .ladder-container.show { opacity: 1; } .bracket { display: flex; justify-content: flex-end; position: relative; &:first-child { >.connector { top: 50%; } } &:nth-child(2) { >.connector { top: 0%; } } } .parent-brackets { display: flex; flex-direction: column; justify-content: center; position: relative; } .empty-bracket { position: relative; >.bracket { padding-right: 240px; } >.connector { width: 240px; height: 1px; top: 50%; } &:nth-child(2) { >.bracket { >.connector { top: 0%; } } } } .loser-parent-indicator { position: absolute; width: 15px; height: 15px; left: 5px; top: calc(50% - 20px); background-size: contain; opacity: 0.2; } .connector { position: absolute; right: 0; height: 50%; background-color: #ffd700; width: 1px; } .bracket-details { .match-details { .team-data { &:first-child { border-bottom: 1px solid transparent; } display: flex; .team-name { flex: 1; display: flex; align-items: center; } .team-score { width: 10px; display: flex; align-items: center; } .team-logo { width: 30px; height: 24px; display: flex; align-items: center; justify-content: center; img { height: 20px; } } } display: flex; flex-direction: column; width: 200px; margin: 10px 20px; background: rgba(0,0,0,0.5); border-radius: 2px; padding: 5px; z-index: 1; cursor: pointer; } display: flex; justify-content: center; align-items: center; position: relative; } .match-connector { width: 100%; position: absolute; height: 1px; background: #ffd700; } .match-connector.last-match { width: 220px; left: 0; } .match-connector.first-match { width: 220px; right: 0; } .tournament-data { img { max-height: 64px; } display: flex; padding: 10px; align-items: center; justify-content: center; } .tournament-name { text-transform: uppercase; font-size: 45px; padding-left: 22px; } .match-details.current { border: 1px solid gold; }