html,
body {
font-family: "Muli", sans-serif;
margin: 0;
background-color: #E4E3E1;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
.container-fixed {
width: 100%;
max-width: 1250px;
margin: 0 auto;
padding: 0 15px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.hide {
display: none !important;
}
.text-right {
text-align: right !important;
}
.text-center {
text-align: center !important;
}
.text-left {
text-align: left !important;
}
#tmwc-bracket {
overflow-x: visible;
-webkit-overflow-scrolling: touch;
position: relative;
padding: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.fade-enter-active,
.fade-leave-active {
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.page-enter-active,
.page-leave-active {
-webkit-transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, -webkit-transform 1s;
transition: opacity 1s, transform 1s;
transition: opacity 1s, transform 1s, -webkit-transform 1s;
}
.page-enter,
.page-leave-to {
opacity: 0;
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
.flip-list-move {
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
form {
display: block;
margin: 0 0 15px;
}
form .input-flex-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
form .input-flex-container .input-group {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
form .input-flex-container .input-group.is-share-input {
margin: 0 auto 0;
}
form .input-flex-container .input-group.is-share-input input[type="text"],
form .input-flex-container .input-group.is-share-input select,
form .input-flex-container .input-group.is-share-input .v-select {
max-width: none;
width: 500px;
text-align: center;
}
form .input-flex-container.is-share-container {
width: 100%;
max-width: 1024px;
margin: 0 auto;
}
form .input-group input[type="text"],
form .input-group .checkbox,
form .input-group select,
form .input-group .v-select {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto 15px;
padding: 12px;
text-align: left;
color: #000;
width: 100%;
max-width: 235px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border: none;
background-color: #FFF;
}
form .input-group input[type="text"].is-danger,
form .input-group .checkbox.is-danger,
form .input-group select.is-danger,
form .input-group .v-select.is-danger {
margin-bottom: 0;
}
form .input-group input[type="text"].checkbox,
form .input-group .checkbox.checkbox,
form .input-group select.checkbox,
form .input-group .v-select.checkbox {
background-color: transparent;
padding: 0;
margin-bottom: 5px;
font-size: 13px;
line-height: 13px;
padding-left: 16px;
position: relative;
cursor: pointer;
}
form .input-group input[type="text"].checkbox a,
form .input-group .checkbox.checkbox a,
form .input-group select.checkbox a,
form .input-group .v-select.checkbox a {
text-decoration: none;
color: #3097D1;
}
form .input-group input[type="text"].checkbox [type="checkbox"],
form .input-group .checkbox.checkbox [type="checkbox"],
form .input-group select.checkbox [type="checkbox"],
form .input-group .v-select.checkbox [type="checkbox"] {
position: absolute;
top: 0;
left: 0;
margin: 0;
}
form .input-group .v-select {
padding: 0;
border-radius: 0;
}
form .input-group .v-select * {
font-size: 13.3333px !important;
}
form .input-group .v-select .dropdown-toggle {
border: 0;
border-radius: 0;
}
form .input-group .v-select .dropdown-toggle .selected-tag {
position: absolute;
padding: 0 12px;
}
form .input-group .v-select .dropdown-toggle .clear {
bottom: 6px;
}
form .input-group .v-select .dropdown-toggle .clear span {
font-size: 22px !important;
}
form .input-group .v-select .dropdown-toggle input {
padding: 0 12px;
}
form .input-group .v-select .dropdown-menu {
max-height: 150px !important;
border: 0;
border-radius: 0;
padding: 0;
}
form .input-group .v-select .dropdown-menu li a {
padding: 5px 12px;
}
form .input-group .input-warning {
display: block;
color: #E71F1F;
padding: 0.3rem;
font-size: 0.8rem;
text-align: center;
}
form input[type="submit"],
form button {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #E71F1F;
color: #FFF;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
text-align: center;
text-transform: uppercase;
font-weight: 600;
width: 100%;
max-width: 235px;
margin: 0 auto;
padding: 0.7rem 1rem;
font-size: 1rem;
border: 2px solid #E71F1F;
}
form input[type="submit"]:hover,
form button:hover {
cursor: pointer;
background-color: #FFF;
color: #E71F1F;
}
@media (max-width: 768px) {
form .is-share-container.is-share-container {
display: block;
}
form .is-share-container.is-share-container .input-group.is-share-input {
width: 100%;
display: block;
}
form .is-share-container.is-share-container .input-group.is-share-input input[type="text"],
form .is-share-container.is-share-container .input-group.is-share-input select,
form .is-share-container.is-share-container .input-group.is-share-input .v-select {
width: 100%;
}
}
.logos-header-component {
/*
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
margin: 0 0 $mrg*2;
*/
display: block;
margin: 0;
}
.logos-header-component .logo .aux-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 3rem 0;
}
.logos-header-component .logo .aux-container img {
display: inline-block;
}
.logos-header-component .logo .aux-container img:first-of-type {
width: 100%;
max-width: 382px;
}
.logos-header-component .logo .aux-container p {
text-transform: uppercase;
margin: 0 50px;
font-weight: 800;
}
.logos-header-component .how-to-play {
padding: 1rem 0;
text-align: center;
background-color: #FFF;
width: 100%;
}
.logos-header-component .how-to-play p {
margin: 0 0 25px;
font-weight: 600;
}
.logos-header-component .how-to-play a {
display: inline-block;
padding: 0.5rem 3rem;
text-transform: uppercase;
font-weight: 800;
color: #000;
background-color: #E4E3E1;
}
.logos-header-component .how-to-play a:hover {
cursor: pointer;
}
@media (max-width: 768px) {
.logos-header-component .logo .aux-container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 2rem 0;
}
.logos-header-component .logo .aux-container p {
margin: 25px 0;
}
.logos-header-component .how-to-play p {
font-weight: 100;
font-size: 0.8rem;
}
}
.login-component .spinner-overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.login-component .login-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.login-component .login-container .credentials-login {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 100%;
max-width: 300px;
-ms-flex-preferred-size: 300px;
flex-basis: 300px;
padding-top: 25px;
}
.login-component .login-container .credentials-login .form-message {
margin: 0 auto 10px;
width: 100%;
max-width: 235px;
text-align: left;
background-color: #cbb956;
color: #FFF;
padding: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.login-component .login-container .credentials-login .pass-recovery p {
margin: 0;
color: #000;
text-align: center;
font-size: 0.8rem;
}
.login-component .login-container .credentials-login .pass-recovery p a {
color: #000;
text-decoration: underline;
}
.login-component .login-container .credentials-login .pass-recovery p a:hover {
cursor: pointer;
}
.login-component .login-container p {
text-align: center;
font-weight: 800;
margin: 0 2rem 0 0px;
}
.login-component .login-container .social-login {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 100%;
max-width: 300px;
-ms-flex-preferred-size: 300px;
flex-basis: 300px;
}
.login-component .login-container .social-login button,
.login-component .login-container .social-login .fb-signin-button {
-webkit-box-shadow: none;
box-shadow: none;
border: none;
display: block;
color: #FFF;
text-align: center;
text-transform: uppercase;
font-weight: 800;
width: 100%;
max-width: 300px;
padding: 0.8rem;
margin: 0 auto 12.5px;
font-size: 0.9rem;
}
.login-component .login-container .social-login button i,
.login-component .login-container .social-login .fb-signin-button i {
display: inline-block;
vertical-align: middle;
font-size: 1.8rem;
margin-right: 12.5px;
}
.login-component .login-container .social-login button.button-twitter,
.login-component .login-container .social-login .fb-signin-button.button-twitter {
background-color: #42C0FB;
margin-bottom: 0;
}
.login-component .login-container .social-login button:hover,
.login-component .login-container .social-login .fb-signin-button:hover {
cursor: pointer;
}
.login-component .login-container .social-login .fb-signin-button {
background-color: #3b5998;
}
@media (max-width: 768px) {
.login-component .login-container {
display: block;
padding: 0 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.login-component .login-container .credentials-login {
max-width: none;
}
.login-component .login-container > p {
margin: 25px 0 50px;
}
.login-component .login-container .social-login {
max-width: none;
}
.login-component .login-container .social-login .fb-signin-button {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.login-component .login-container .social-login .button-facebook {
max-width: 235px;
font-size: 0.7rem;
}
}
.modes-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.modes-container .mode {
background-color: #FFF;
padding: 2rem;
width: 100%;
max-width: 395px;
-ms-flex-preferred-size: 399px;
flex-basis: 399px;
margin: 0 12.5px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.modes-container .mode .aux-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
}
.modes-container .mode .aux-container h2 {
margin: 0 0 25px;
text-transform: uppercase;
text-align: center;
font-weight: 800;
}
.modes-container .mode .aux-container img {
display: block;
margin: 0 auto 25px;
height: 150px;
width: auto;
}
.modes-container .mode .aux-container p {
text-align: center;
margin: 0 0 25px;
font-weight: 600;
}
.modes-container .mode .aux-container a {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #DD1D12;
text-transform: uppercase;
text-align: center;
font-weight: 800;
padding: 1rem 0;
color: #FFF;
border: 2px solid #DD1D12;
}
.modes-container .mode .aux-container a:hover {
cursor: pointer;
background-color: #FFF;
color: #DD1D12;
}
@media (max-width: 980px) {
.modes-container {
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.modes-container .mode {
padding: 1rem;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.modes-container .mode h2 {
font-size: 1.2rem;
}
.modes-container .mode img {
width: 100%;
height: auto;
}
.modes-container .mode p {
font-size: 0.9rem;
font-weight: 100;
}
.modes-container .mode a {
font-size: 0.8rem;
width: 100%;
}
}
@media (max-width: 768px) {
.modes-container {
display: block;
}
.modes-container .mode {
margin: 0 auto 50px;
width: 100%;
max-width: none;
}
}
.bracket-component {
position: relative;
padding-top: 3em;
}
.bracket-component .owners-bracket-name {
display: block;
text-align: center;
background-color: #FFF;
margin: 2rem 0;
}
.bracket-component .owners-bracket-name p {
margin: 0;
text-transform: uppercase;
font-weight: 800;
background-color: #E71F1F;
color: #FFF;
padding: 0.5rem 0;
padding: 0.3rem 6rem;
display: inline-block;
letter-spacing: 1px;
}
.bracket-component .spinner-overlay {
background-color: #FFF;
padding: 1rem;
position: absolute;
width: 100%;
height: 100%;
z-index: 10;
opacity: 1;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
overflow: hidden;
-webkit-overflow-scrolling: touch;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bracket-component .spinner-overlay.is-hidden {
opacity: 0;
}
.bracket-component .winner-text {
text-align: center;
padding: 3rem 1rem;
}
.bracket-component .winner-text p {
margin: 0;
text-transform: uppercase;
font-size: 1.3rem;
font-weight: 800;
}
.bracket-component .brackets-outer-container {
position: relative;
}
.bracket-component .brackets-outer-container .brackets-columns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals,
.bracket-component .brackets-outer-container .brackets-columns .semifinals,
.bracket-component .brackets-outer-container .brackets-columns .final {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
position: relative;
padding-top: 40px;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .date,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .date,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .date,
.bracket-component .brackets-outer-container .brackets-columns .final .date {
text-align: center;
min-height: 40px;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .date > h2,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .date > h2,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .date > h2,
.bracket-component .brackets-outer-container .brackets-columns .final .date > h2 {
width: 100%;
color: #000;
text-align: center;
text-transform: uppercase;
font-weight: 800;
font-size: 0.8rem;
margin: 0;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .date p,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .date p,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .date p,
.bracket-component .brackets-outer-container .brackets-columns .final .date p {
text-transform: uppercase;
font-weight: 800;
font-size: 0.8rem;
margin: 0;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container {
display: block;
height: 100%;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-ms-flex-pack: distribute;
justify-content: space-around;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 100%;
-ms-flex-pack: distribute;
justify-content: space-around;
padding: 0 5px;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team {
background-color: #FFF;
padding: 0.8rem;
min-height: 30px;
width: 100%;
max-width: 115px;
margin: 0 auto 25px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team a,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team a,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team a,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team a {
display: inline-block;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team img,
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team span,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team img,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team span,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team img,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team span,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team img,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team span {
display: inline-block;
vertical-align: middle;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team img,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team img,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team img,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team img {
width: 100%;
max-width: 45px;
height: auto;
margin: 0 auto;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team img[src],
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team img[src],
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team img[src],
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team img[src] {
border: 1px solid #E4E3E1;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team span,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team span,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team span,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team span {
margin-left: 5px;
display: inline-block;
width: 30px;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .team.is-loser,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .team.is-loser,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .team.is-loser,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team.is-loser {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .final-container,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .final-container,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .final-container,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .final-container {
background-color: #FFF;
padding: 0.5rem;
height: 100px;
width: 100%;
max-width: none;
margin: 0 0 12.5px;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
z-index: 2;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .final-container .flag-container,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .final-container .flag-container,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .final-container .flag-container,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .final-container .flag-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .final-container .flag-container span,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .final-container .flag-container span,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .final-container .flag-container span,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .final-container .flag-container span {
margin: 0.5rem;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container .final-container .team,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container .final-container .team,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container .final-container .team,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .final-container .team {
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: auto;
padding: 0;
}
.bracket-component .brackets-outer-container .brackets-columns .final {
z-index: 4;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container .result-container {
background-color: #FFF;
padding: 1rem;
height: 100px;
width: 100%;
max-width: 115px;
margin: 0 auto 25px;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container .result-container img {
width: 100%;
max-width: 80px;
height: auto;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container .result-container img[src] {
border: 1px solid #E4E3E1;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team img {
display: block;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .team span {
margin: 0;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .date {
position: relative;
top: 0;
text-align: center;
}
.bracket-component .brackets-outer-container .brackets-columns .final .date {
top: 36%;
}
.bracket-component .brackets-outer-container .brackets-columns .semifinals {
z-index: 3;
}
.bracket-component .brackets-outer-container .brackets-columns .semifinals .date {
top: 18%;
}
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals {
z-index: 2;
}
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .date {
top: 6%;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 {
z-index: 1;
}
.bracket-component .bracket-actions {
text-align: center;
padding: 2rem 0;
}
.bracket-component .bracket-actions a {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #DD1D12;
text-transform: uppercase;
text-align: center;
font-weight: 800;
padding: 1rem;
color: #FFF;
border: 2px solid #DD1D12;
text-decoration: none;
font-size: 1.3rem;
margin: 0 12.5px;
}
.bracket-component .bracket-actions a.is-big {
padding: 1rem 4rem;
}
.bracket-component .bracket-actions a.is-share-bracket {
font-size: 1rem;
font-weight: 800;
padding: 0.6rem 4rem;
}
.bracket-component .bracket-actions a:hover {
cursor: pointer;
background-color: #FFF;
color: #DD1D12;
}
.bracket-component .bracket-actions .share-league {
text-align: center;
padding: 1rem;
}
.bracket-component .bracket-actions .share-league a {
text-align: center;
text-transform: uppercase;
font-weight: 400;
background-color: transparent;
border: none;
font-size: 0.8rem;
text-decoration: underline;
color: #E71F1F;
}
.bracket-component .bracket-actions.is-mobile {
display: none;
}
@media (max-width: 960px) {
.bracket-component .brackets-outer-container .brackets-columns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals,
.bracket-component .brackets-outer-container .brackets-columns .semifinals,
.bracket-component .brackets-outer-container .brackets-columns .final {
padding-top: 0;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .matches-container > div .match-container,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .matches-container > div .match-container,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .matches-container > div .match-container,
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .date,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .date,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .date,
.bracket-component .brackets-outer-container .brackets-columns .final .date {
position: relative;
top: initial;
height: auto;
margin: 0 0 12.5px;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 .date > h2,
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals .date > h2,
.bracket-component .brackets-outer-container .brackets-columns .semifinals .date > h2,
.bracket-component .brackets-outer-container .brackets-columns .final .date > h2 {
display: block;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .match-container .final-container {
margin: 0 auto 25px;
max-width: 305px;
}
.bracket-component .brackets-outer-container .brackets-columns .round-of-16 {
-webkit-box-ordinal-group: -6;
-ms-flex-order: -7;
order: -7;
}
.bracket-component .brackets-outer-container .brackets-columns .quarterfinals {
-webkit-box-ordinal-group: -4;
-ms-flex-order: -5;
order: -5;
}
.bracket-component .brackets-outer-container .brackets-columns .semifinals {
-webkit-box-ordinal-group: -2;
-ms-flex-order: -3;
order: -3;
}
.bracket-component .brackets-outer-container .brackets-columns .final {
-webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
}
.bracket-component .brackets-outer-container .brackets-columns .final .matches-container > div .final-match {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
}
}
@media (max-width: 480px) {
.bracket-component .bracket-actions.is-mobile {
display: block;
}
}
.menu-brackets-component {
background-color: #FFF;
}
.menu-brackets-component .menu {
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.menu-brackets-component .menu .is-logout {
display: inline-block;
text-align: center;
text-transform: uppercase;
color: #E71F1F;
background-color: #FFF;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
}
.menu-brackets-component .menu .is-logout:hover {
cursor: pointer;
}
.menu-brackets-component .menu ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
.menu-brackets-component .menu ul li {
display: inline-block;
vertical-align: middle;
text-align: center;
text-transform: uppercase;
color: #000;
font-size: 1rem;
font-weight: 600;
padding: 0.5rem 1rem;
position: relative;
}
.menu-brackets-component .menu ul li.is-active {
background-color: #E71F1F;
color: #FFF;
}
.menu-brackets-component .menu ul li.is-lenguage-select {
margin: 0;
}
.menu-brackets-component .menu ul li.is-lenguage-select div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.menu-brackets-component .menu ul li.is-lenguage-select div a {
display: inline-block;
background-color: #E71F1F;
color: #FFF;
padding: 0.5rem 2rem;
font-size: 1rem;
}
.menu-brackets-component .menu ul li.is-lenguage-select div a:after {
display: none;
}
.menu-brackets-component .menu ul li.is-lenguage-select div a.is-active {
background-color: #FFF;
color: #000;
}
.menu-brackets-component .menu ul li:hover {
cursor: pointer;
}
@media (max-width: 768px) {
.menu-brackets-component .menu {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.menu-brackets-component .menu ul {
width: 100%;
}
.menu-brackets-component .menu ul li {
display: block;
}
.menu-brackets-component .menu .lang-switcher {
-webkit-box-ordinal-group: 0;
-ms-flex-order: -1;
order: -1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
width: 100%;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.menu-brackets-component .menu .lang-switcher .lang-button,
.menu-brackets-component .menu .lang-switcher .logout-button {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.menu-brackets-component .menu .lang-switcher .lang-button {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.menu-brackets-component .menu .lang-switcher .logout-button {
-webkit-box-flex: 4;
-ms-flex: 4;
flex: 4;
text-align: left;
}
.menu-brackets-component .menu .lang-switcher .logout-button a {
display: inline-block;
}
.menu-brackets-component .menu .is-logout {
display: block;
background-color: transparent;
}
}
@-webkit-keyframes swipe {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes swipe {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
.leaderboard-component {
margin: 0 0 50px;
}
.leaderboard-component .v-spinner {
margin: 30px auto;
}
.leaderboard-component .tabs {
background-color: #FFF;
/*
.scroll-indication {
text-align: center;
padding: 1rem;
justify-content: space-between;
flex-direction: row;
align-items: center;
display: none;
p {
margin: 0;
font-size: 0.8rem;
font-style: italic;
}
i {
animation: swipe 1s linear infinite alternate;
}
}
*/
}
.leaderboard-component .tabs ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
list-style: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.leaderboard-component .tabs ul li {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
background-color: #FFF;
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease;
}
.leaderboard-component .tabs ul li a {
display: block;
padding: 0.8rem 0;
text-align: center;
text-transform: uppercase;
color: #E71F1F;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
-webkit-transition: color 0.3s ease;
transition: color 0.3s ease;
}
.leaderboard-component .tabs ul li a:hover {
cursor: pointer;
}
.leaderboard-component .tabs ul li.is-active {
background-color: #E71F1F;
}
.leaderboard-component .tabs ul li.is-active a {
color: #FFF;
}
.leaderboard-component .scores {
padding: 1rem 1rem;
border-top: none;
}
.leaderboard-component .scores table {
display: block;
}
.leaderboard-component .scores table thead,
.leaderboard-component .scores table tbody {
display: block;
}
.leaderboard-component .scores table thead tr,
.leaderboard-component .scores table tbody tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0 0 25px;
-ms-flex-pack: distribute;
justify-content: space-around;
align-items: center;
}
.leaderboard-component .scores table thead tr th,
.leaderboard-component .scores table thead tr td,
.leaderboard-component .scores table tbody tr th,
.leaderboard-component .scores table tbody tr td {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: left;
width: 33.33%;
display: inline-block;
}
.leaderboard-component .scores table thead tr th {
font-weight: 100;
font-size: 0.9rem;
}
.leaderboard-component .scores table tbody tr {
border-bottom: 2px solid #000;
}
.leaderboard-component .scores table tbody tr td img {
display: block;
width: 100%;
max-width: 35px;
}
.leaderboard-component .scores table tbody tr td.is-position,
.leaderboard-component .scores table tbody tr td.is-score {
font-weight: 800;
font-size: 1.2rem;
}
.leaderboard-component .scores .no-data {
text-align: center;
padding: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.leaderboard-component .pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.leaderboard-component .pagination a {
display: inline-block;
padding: 0.8rem 2rem;
text-transform: uppercase;
margin: 0 15px;
background-color: #FFF;
font-size: 0.8rem;
color: #636b6f;
width: 100%;
max-width: 150px;
text-align: center;
}
.leaderboard-component .pagination a:hover {
cursor: pointer;
}
.leaderboard-component .pagination a.pagination-link-left {
margin-right: auto;
}
.leaderboard-component .pagination a.pagination-link-right {
margin-left: auto;
}
@media (max-width: 768px) {
.leaderboard-component .tabs {
/*
.scroll-indication {
display: flex;
}
*/
}
.leaderboard-component .tabs ul {
display: block;
}
.leaderboard-component .scores table {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.leaderboard-component .scores table thead tr th {
/*
&:nth-child(3) {
display: none;
}
*/
}
.leaderboard-component .scores table tbody tr td {
/*
&:nth-child(3) {
display: none;
}
*/
}
.leaderboard-component .scores table tbody tr td img {
max-width: 25px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.leaderboard-component .pagination a {
padding: 0.5rem 0rem;
font-size: 0.7rem;
max-width: 130px;
}
}
.matches-component .spinner-overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
padding: 1rem;
}
.matches-component .phase-title {
padding: 2rem 0;
}
.matches-component .phase-title h2 {
margin: 0;
text-transform: uppercase;
font-weight: 800;
text-align: center;
}
.matches-component .matches-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.matches-component .matches-container .match-outer-container {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 100%;
margin: 0 0 20px;
}
.matches-component .matches-container .match-outer-container .match-inner-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: right;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .aux-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .date-and-hour {
text-align: right;
display: inline-block;
vertical-align: middle;
margin-right: 25px;
min-width: 150px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .date-and-hour p {
display: block;
margin: 0;
font-weight: 800;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .flag {
display: inline-block;
vertical-align: middle;
background-color: #FFF;
padding: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-height: 80px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .flag span {
display: inline-block;
vertical-align: middle;
font-weight: 800;
text-transform: uppercase;
margin-right: 25px;
width: 40px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .flag img {
display: inline-block;
vertical-align: middle;
width: auto;
margin: 0 auto;
height: 47px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .flag img[src] {
border: 1px solid #E4E3E1;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: center;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center .aux-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
max-width: 400px;
margin: 0 auto;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center input[type="number"] {
display: inline-block;
vertical-align: middle;
border: none;
width: 100%;
max-width: 60px;
font-size: 2.5rem;
text-align: center;
color: #E71F1F;
background-color: #FFF;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 5px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center input[type="number"].is-chrome-browser {
height: 50px;
padding-left: 0.7rem;
padding-bottom: 5px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center input[type="number"]::-webkit-input-placeholder {
color: #E71F1F;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center input[type="number"]:focus {
outline: 0;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center span {
display: inline-block;
vertical-align: middle;
font-weight: 800;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: left;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .aux-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .channel {
text-align: center;
display: inline-block;
vertical-align: middle;
margin-left: 25px;
min-width: 150px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .channel p {
display: inline-block;
margin: 0;
font-weight: 800;
text-transform: uppercase;
font-size: 0.8rem;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .channel a {
display: inline-block;
vertical-align: middle;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .channel a img {
height: 50px;
width: auto;
display: inline-block;
vertical-align: middle;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .channel.is-empty {
opacity: 0;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .flag {
display: inline-block;
vertical-align: middle;
background-color: #FFF;
padding: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-height: 80px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .flag .aux-container img {
display: inline-block;
vertical-align: middle;
width: auto;
margin: 0 auto;
height: 47px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .flag .aux-container img[src] {
border: 1px solid #E4E3E1;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .flag .aux-container span {
display: inline-block;
vertical-align: middle;
font-weight: 800;
text-transform: uppercase;
margin-left: 25px;
width: 40px;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile {
display: none;
}
.matches-component .scores-table table {
display: block;
text-transform: uppercase;
text-align: center;
width: 100%;
max-width: 650px;
margin: 0 auto 50px;
}
.matches-component .scores-table table thead,
.matches-component .scores-table table tbody {
display: block;
}
.matches-component .scores-table table thead tr,
.matches-component .scores-table table tbody tr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
padding: 1rem 0;
border-bottom: 2px solid #000;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.matches-component .scores-table table thead tr th,
.matches-component .scores-table table tbody tr th {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 16.66%;
display: inline-block;
}
.matches-component .scores-table table thead tr td,
.matches-component .scores-table table tbody tr td {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 16.66%;
display: inline-block;
}
.matches-component .scores-table table tbody tr:last-child {
border-bottom: none;
}
.matches-component .actions {
text-align: center;
}
.matches-component .actions input[type="submit"],
.matches-component .actions button[type="submit"] {
text-transform: uppercase;
font-weight: 800;
font-size: 1rem;
text-align: center;
display: inline-block;
padding: 1rem 1rem;
color: #FFF;
background-color: #DD1D12;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.matches-component .actions input[type="submit"]:hover,
.matches-component .actions button[type="submit"]:hover {
cursor: pointer;
}
@media (max-width: 768px) {
.matches-component .matches-container .match-outer-container .match-inner-container .left,
.matches-component .matches-container .match-outer-container .match-inner-container .right {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .flag,
.matches-component .matches-container .match-outer-container .match-inner-container .right .flag {
padding: 0.5rem;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .flag img,
.matches-component .matches-container .match-outer-container .match-inner-container .right .flag img {
height: 30px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .flag span,
.matches-component .matches-container .match-outer-container .match-inner-container .right .flag span {
font-size: 0.8rem;
}
.matches-component .matches-container .match-outer-container .match-inner-container .left .date-and-hour p {
font-size: 0.8rem;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .channel {
margin-left: 12.5px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .right .channel a img {
height: 45px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center {
margin: 0 25px;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center input[type="number"] {
max-width: 45px;
height: 45px;
padding: 0;
}
.matches-component .matches-container .match-outer-container .match-inner-container .center span {
margin: 0 8.33333333px;
}
}
@media (max-width: 480px) {
.matches-component .matches-container .match-outer-container .match-inner-container {
display: none;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 1rem 1rem;
border-bottom: 4px solid #FFF;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin: 0 0 12.5px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .date-and-hour {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .date-and-hour p {
display: block;
text-align: left;
vertical-align: middle;
font-weight: 800;
font-size: 1rem;
margin: 0;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .channel {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
text-align: right;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .channel p {
display: inline-block;
vertical-align: middle;
margin: 0;
font-weight: 800;
font-size: 1rem;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .channel a {
display: inline-block;
vertical-align: middle;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .channel a img {
height: 50px;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
width: 100%;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .left,
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .right {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .left .flag,
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .right .flag {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .left .flag img,
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .right .flag img {
max-height: 30px;
width: 100%;
max-width: 48px;
margin: 0 auto;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .left .flag span,
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .right .flag span {
margin: 8.33333333px auto;
font-weight: 400;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .center {
margin: 0;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .center .aux-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 0.5rem;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .center input[type="number"] {
padding: 0;
margin: 0 0 8.33333333px;
max-width: 40px;
height: 40px;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .center input[type="number"]:first-of-type {
margin-right: 8.33333333px;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .center span {
margin: 0;
display: block;
width: 100%;
text-align: center;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .right .flag a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.matches-component .scores-table {
width: 100%;
padding: 0 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 0.8rem;
}
}
@media (max-width: 320px) {
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .date-and-hour p,
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .channel p {
font-size: 0.8rem;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .date-container .channel a img {
height: 40px;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .left img,
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .right img {
height: 20px;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .left span,
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .right span {
font-size: 0.7rem;
}
.matches-component .matches-container .match-outer-container .match-inner-container.is-mobile .teams-container .center .aux-container input[type="number"] {
max-width: 35px;
height: 35px;
}
}
.share-component {
padding: 2rem 2rem;
}
.share-component .spinner-overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 100%;
padding: 1rem;
}
.share-component h2 {
font-weight: 800;
text-transform: uppercase;
text-align: center;
margin: 0 0 25px;
}
.share-component .share-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
width: 100%;
max-width: 1024px;
margin: 0 auto 25px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.share-component .share-link input[type="text"] {
display: block;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
width: 100%;
max-width: 650px;
-ms-flex-preferred-size: 650px;
flex-basis: 650px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 12px;
text-align: left;
color: #000;
background-color: #FFF;
text-align: center;
}
.share-component .share-link .social-links {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
width: 100%;
max-width: 240px;
min-width: 240px;
height: 40px;
}
.share-component .share-link .social-links button {
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #E71F1F;
color: #FFF;
-webkit-box-shadow: none;
box-shadow: none;
border: none;
text-align: center;
text-transform: uppercase;
font-weight: 600;
width: 100%;
max-width: 235px;
margin: 0 auto;
padding: 0.7rem 1rem;
font-size: 1rem;
border: 2px solid #E71F1F;
height: 100%;
}
.share-component .share-link .social-links button:hover {
cursor: pointer;
background-color: #FFF;
color: #E71F1F;
}
.share-component .share-link .social-links ul {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.share-component .share-link .social-links ul li a {
display: inline-block;
vertical-align: middle;
color: #000;
}
.share-component .share-link .social-links ul li a i {
font-size: 2.5rem;
}
.share-component .share-link .social-links ul li a i.fa-facebook-square:hover {
color: #3b5998;
}
.share-component .share-link .social-links ul li a i.fa-twitter-square:hover {
color: #42C0FB;
}
.share-component .share-link .social-links ul li a i.fa-envelope:hover {
color: #CC3333;
}
.share-component .share-link .social-links ul li a:hover {
cursor: pointer;
}
.share-component .form-fields-container form {
text-align: center;
}
.share-component .form-fields-container form button[type="submit"],
.share-component .form-fields-container form button[type="button"] {
display: inline-block;
vertical-align: middle;
margin: 0 auto 12.5px;
font-size: 0.8rem;
}
@media (max-width: 768px) {
.share-component h2 {
font-weight: 100;
}
.share-component .share-link {
display: block;
}
.share-component .share-link input[type="text"] {
display: block;
margin: 0 0 25px;
}
.share-component .share-link .social-links {
margin: 0 auto;
}
}
@media (max-width: 768px) {
.private-or-public-component .modes-container .mode:first-child img {
max-width: 280px;
}
.private-or-public-component .modes-container .mode:last-child img {
max-width: 180px;
}
}
.tie-breaker-component {
text-align: center;
margin: 25px 0;
}
.tie-breaker-component .teams {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 20px;
}
.tie-breaker-component .teams .inner {
background-color: #FFF;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding: 10px 20px;
}
.tie-breaker-component .teams .inner h2 {
width: 100%;
}
.tie-breaker-component .teams .inner .team {
position: relative;
padding: 0 15px;
}
.tie-breaker-component .teams .inner .team img {
display: block;
width: 130px;
margin: auto;
border: 1px solid #E4E3E1;
}
.tie-breaker-component .teams .inner .team div {
display: block;
width: 130px;
margin: auto;
margin-top: 5px;
}
.tie-breaker-component .teams .inner .team:before {
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
color: #E71F1F;
font-weight: 800;
text-align: center;
font-size: 14px;
width: 35px;
height: 35px;
border-radius: 100%;
border: 1px solid #E71F1F;
padding-top: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.tie-breaker-component .teams .inner .team.first:before {
content: "1st";
}
.tie-breaker-component .teams .inner .team.second:before {
content: "2nd";
}
.tie-breaker-component .teams .inner .team.third:before {
content: "3rd";
}
.tie-breaker-component .teams .inner .team.fourth:before {
content: "4th";
}
.tie-breaker-component .teams.first-not-plays .inner .team.first:before {
content: "2nd";
}
.tie-breaker-component .teams.first-not-plays .inner .team.second:before {
content: "3rd";
}
.tie-breaker-component .teams.first-not-plays .inner .team.third:before {
content: "4th";
}
.tie-breaker-component button {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #DD1D12;
text-transform: uppercase;
text-align: center;
font-weight: 800;
padding: 1rem;
color: #FFF;
border: 2px solid #DD1D12;
text-decoration: none;
font-size: 1.3rem;
margin: 25px 12.5px 0;
}
.tie-breaker-component button.is-big {
padding: 1rem 4rem;
}
.tie-breaker-component button:hover {
cursor: pointer;
background-color: #FFF;
color: #DD1D12;
}
.tie-breaker-component.is-penalties form .teams .inner {
padding-bottom: 30px;
}
.tie-breaker-component.is-penalties form .teams .inner .team {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding-bottom: 40px;
}
.tie-breaker-component.is-penalties form .teams .inner .team:before {
content: "";
display: block;
width: 28px;
height: 28px;
border: 4px solid #000;
margin: 25px auto 0;
background-color: transparent;
position: absolute;
z-index: 1;
left: calc(50% - 13px);
top: 95px;
bottom: 0;
border-radius: 100%;
}
.tie-breaker-component.is-penalties form .teams .inner .team:after {
content: "";
display: block;
width: 18px;
height: 18px;
margin: 25px auto 0;
background-color: #E71F1F;
position: absolute;
z-index: 2;
left: calc(50% - 8px);
top: 100px;
bottom: 5px;
opacity: 0;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
}
.tie-breaker-component.is-penalties form .teams .inner .team.first:before {
content: "";
}
.tie-breaker-component.is-penalties form .teams .inner .team.second:before {
content: "";
}
.tie-breaker-component.is-penalties form .teams .inner .team.third:before {
content: "";
}
.tie-breaker-component.is-penalties form .teams .inner .team.fourth:before {
content: "";
}
.tie-breaker-component.is-penalties form .teams .inner .team.first:after {
opacity: 1;
}
.tie-breaker-component.is-penalties form .teams .inner .team:hover {
cursor: pointer;
}
@media (max-width: 768px) {
.tie-breaker-component.is-penalties form .teams {
width: 100%;
max-width: none;
margin: 0 auto 50px;
}
.tie-breaker-component.is-penalties form .teams .inner h2 {
margin: 8.33333333px 0 0;
}
.tie-breaker-component.is-penalties form .teams .inner .team {
margin: 25px 0;
max-width: 280px;
}
.tie-breaker-component.is-penalties form .teams .inner .team img {
width: 80px;
margin: 0 auto 12.5px;
}
.tie-breaker-component.is-penalties form .teams .inner .team:before {
left: calc(50% - 15px);
}
.tie-breaker-component.is-penalties form .teams .inner .team:after {
left: calc(50% - 10px);
}
}
[lang="es"] .tie-breaker-component .teams .inner .team.first:before {
content: "1ro";
}
[lang="es"] .tie-breaker-component .teams .inner .team.second:before {
content: "2do";
}
[lang="es"] .tie-breaker-component .teams .inner .team.third:before {
content: "3ro";
}
[lang="es"] .tie-breaker-component .teams .inner .team.fourth:before {
content: "4to";
}
[lang="es"] .tie-breaker-component .teams.first-not-plays .inner .team.first:before {
content: "2do";
}
[lang="es"] .tie-breaker-component .teams.first-not-plays .inner .team.second:before {
content: "3ro";
}
[lang="es"] .tie-breaker-component .teams.first-not-plays .inner .team.third:before {
content: "4to";
}
.breadcrumbs-component {
background-color: #FFF;
}
.breadcrumbs-component .breadcrumbs-index ul {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
text-align: center;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.breadcrumbs-component .breadcrumbs-index ul li {
display: inline-block;
text-align: center;
text-transform: uppercase;
text-decoration: none;
padding: 0.5rem 1rem;
}
.breadcrumbs-component .breadcrumbs-index ul li p {
font-size: 1rem;
font-weight: 800;
color: #000;
margin: 0;
}
.breadcrumbs-component .breadcrumbs-index ul li.is-active {
background-color: #E71F1F;
}
.breadcrumbs-component .breadcrumbs-index ul li.is-active p {
color: #FFF;
}
@media (max-width: 768px) {
.breadcrumbs-component .breadcrumbs-index .container-fixed {
padding: 0;
}
.breadcrumbs-component .breadcrumbs-index .container-fixed ul {
display: block;
}
.breadcrumbs-component .breadcrumbs-index .container-fixed ul li {
display: none;
}
.breadcrumbs-component .breadcrumbs-index .container-fixed ul li.is-active {
display: block;
}
}
.how-to-play-component {
background-color: #FFF;
text-align: center;
padding: 2rem 0;
}
.how-to-play-component .header {
margin: 0 0 25px;
}
.how-to-play-component .header h2 {
text-transform: uppercase;
margin: 0 0 12.5px;
}
.how-to-play-component .header p {
margin: 0 auto 0;
width: 100%;
max-width: 720px;
font-size: 1.2rem;
}
.how-to-play-component .info-box {
margin: 0 auto 0;
width: 100%;
max-width: 720px;
}
.how-to-play-component .info-box .label {
font-size: 1.2rem;
font-weight: 800;
max-width: 270px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
margin: 0 auto 12.5px;
padding: 0.5rem 0;
background-color: #bdc3c7;
}
.how-to-play-component .info-box .label p {
margin: 0;
color: #FFF;
text-transform: uppercase;
}
.how-to-play-component .info-box .games {
display: block;
font-size: 0.7rem;
font-weight: 600;
}
.how-to-play-component .info-box ul {
text-align: left;
width: 100%;
max-width: 450px;
margin: 1rem auto;
}
.how-to-play-component .info-box ul li {
font-size: 1.3rem;
margin: 0 0 8.33333333px;
}
.how-to-play-component .info-box ul li.sub-item {
display: block;
font-weight: 100;
font-size: 1rem;
}
.how-to-play-component .info-box.is-details ul li {
font-size: 1rem;
font-style: italic;
}
.how-to-play-component .disclaimer {
width: 100%;
font-size: 12px;
padding-top: 20px;
max-width: 450px;
display: inline-block;
}
.how-to-play-component .cta {
margin-top: 75px;
}
.how-to-play-component .cta a {
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #DD1D12;
text-transform: uppercase;
text-align: center;
font-weight: 800;
padding: 0.5rem 0;
color: #FFF;
border: 2px solid #DD1D12;
max-width: 300px;
margin: 0 auto;
}
.how-to-play-component .cta a:hover {
cursor: pointer;
background-color: #FFF;
color: #DD1D12;
}
@media (max-width: 768px) {
.how-to-play-component .header h2 {
font-size: 1.2rem;
margin: 0 0 5px;
}
.how-to-play-component .header p {
font-size: 1rem;
}
.how-to-play-component .info-box .label {
max-width: 230px;
}
.how-to-play-component .info-box .label p {
font-size: 1rem;
}
.how-to-play-component .info-box ul {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.how-to-play-component .info-box ul li {
font-size: 1rem;
}
}
.social-share-outer-container {
margin-top: 50px;
}
.social-share-outer-container .social-share-component {
text-align: center;
padding: 3rem 0;
background-color: #FFF;
}
.social-share-outer-container .social-share-component h2 {
margin: 0 0 25px;
text-transform: uppercase;
color: #FFF;
font-size: 1.2rem;
}
.social-share-outer-container .social-share-component .buttons-container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.social-share-outer-container .social-share-component .buttons-container .button-social {
padding: 1rem 2rem !important;
}
@media (max-width: 768px) {
.social-share-outer-container .social-share-component {
padding: 1rem;
}
.social-share-outer-container .social-share-component .buttons-container {
display: block;
}
.social-share-outer-container .social-share-component .buttons-container a {
display: block;
width: 100%;
text-align: center;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
.footer-component {
margin-top: 50px;
}
.footer-component .how-to-play {
padding: 1rem 0;
text-align: center;
background-color: #FFF;
width: 100%;
}
.footer-component .how-to-play p {
margin: 0 0 25px;
font-weight: 600;
}
.footer-component .how-to-play a {
display: inline-block;
padding: 0.5rem 3rem;
text-transform: uppercase;
font-weight: 800;
color: #000;
background-color: #E4E3E1;
}
.footer-component .how-to-play a:hover {
cursor: pointer;
}
@media (max-width: 768px) {
.footer-component .how-to-play p {
font-weight: 100;
font-size: 0.8rem;
}
}