/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat',Arial,sans-serif;
  color: #000;
}

a {
  color: #4154f1;
  text-decoration: none;
}

a:hover {
  color: rgba(16,106,254,1);
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat',Arial,sans-serif;
}
h4 {
    font-weight: 600;    
}
p { font-size: 14pt}

h5 {
    font-weight: 600;
    font-size: 1.15rem;
}

.mw-800 {max-width: 800px}
body .container {max-width: 1140px !important}
h1 {background-color: #323F48; font-weight: 700}
.bg-grey {background: #F5F5F5}
.player {background: #D7D7D7; border-radius: 1rem; position: relative}
.namp {background: #323F48; color: #fff; padding: .5rem; font-size: 16px; font-weight: 400; margin: 20px 0}
.plr {position: relative; display: block}
.over {position: absolute; top: 0; left: 0; background: rgba(50,63,72,0.6);  border-radius: 1rem;  text-align: center;  width: 100%; height: 100%; display: none }
.plr:hover .over {display: block}
span.perc {color: #fff; font-weight: 800; border: 1px solid #fff; border-radius: 1rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; display: inline-block; height: 90%; line-height: 200px; font-size: 45px; display: none}

.plr .over.active, .plr span.active {display: block !important}
.namp.active {background: #fff; color: #323F48; border: 1px solid #323F48}
.red {color: #D80406}
form .button1 {border-radius: 1rem; margin: 20px auto; padding: 10px 20px; background: #000; border: none; display: block; color: #fff}

.bg-band {  background: url("../img/band.png") top no-repeat rgb(242,242,242);
background: url("../img/band.png") top  linear-gradient(180deg, rgba(242,242,242,1) 35%, rgba(255,255,255,1) 75%); background-size: 130% auto;}
.bg-w80 {background: rgba(255,255,255,0.8);}
.rad20 {border-radius: 20px}
hr.linered {background: #E02527; height: 5px !important; border: none; margin: 0; opacity: 1;}

.bot-line-red {border: 1px solid #E02527; color: #E02527; display: inline-block;  border-radius: 5px; font-weight: 600}
.bot-line-red:hover {background-color: #E02527; color: #fff;}
.bot-line-red:hover img {filter: brightness(100)}

.bg-dark-x {background: #000 url("../img/ph_x-logo-bold.png") no-repeat top right}
.post {background:rgba(0,0,0,.3)}
.post textarea {background:none; border: 1px solid #fff; border-radius: 5px; width: 100%; color: #fff}
.post .fs-6.text-light {font-size: 14px !important; opacity: .6}

.name {padding-left: 40px; font-size: 22px}
.name span {background: url("../img/shape-num.png"); width: 36px; height: 36px; background-size: 100%; color: #fff; text-align: center; display: inline-block; font-size: 20px; line-height: 36px; position: absolute; left: 20px}
.name hr.linered {height: 2px !important; width: 100px; margin: 5px 0}

.jugador .flag {position: absolute; left: 0}
.jugador.noganador img {filter: grayscale(100)}
.card-vot {background: rgba(255,255,255,0.5); border-radius: 20px; border: 1px solid #fff}
.card-vot p {font-size: 14px; line-height: 130%}
.btn.btn-red {background: #E02527; color: #fff; text-align: center; border-radius: 5px; font-weight: 700}
.btn.btn-red.disable {background: #C9C9C9; color: #fff; text-align: center; border-radius: 5px; font-weight: 700}


.swiper-pagination-clickable .swiper-pagination-bullet {border-radius: 0;width: 30%;}
.swiper-pagination-bullet-active {background: #000}

.winner {position: absolute; top: -10px;
  left: 50%;
  transform: translateX(-50%);}
.winner:before {content: url("../img/ic-stars.png"); display: block}

@media (max-width: 768px) {
    .container {padding-left: 0; padding-right: 0}
    h3 {font-size: 18px;}
    .plr {margin: 20px 0}
    .bg-band {  background: url("../img/bandM.png") top no-repeat rgb(242,242,242);
background: url("../img/band.png") top  linear-gradient(180deg, rgba(242,242,242,1) 35%, rgba(255,255,255,1) 75%); background-size: 130% auto;}
}