::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background:rgb(192, 40, 103);
}

::-webkit-scrollbar-track {
  background: black;
}

.wrapper {
  overflow: hidden;
  max-width: 100%;
  max-height: 80vh;
}

.frame-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  padding-top: 25px;
  width: 300%;
  /* enlarge beyond browser width */
  left: -100%;
  /* center */
}

.frame-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-text {
  text-align: center;
  position: absolute;
  color: white;
  width: 100%;
  height: 100%;
  z-index: 10;
  font-size: 5vw;
  font-weight: bold;
  opacity: 0.2;
}

.banner {
  position: relative;
}

.banner img {
  width: calc(100% + 30px); 
  margin-left: -15px; 
  height: 300px;
}

.landing_card-pink {
  border-radius: 1.5em;
  padding-top: 1.5em;
  padding-bottom: .5em;
  cursor: pointer;
  font-weight: 700;
  margin: 2.5em auto 5.5em 0rem;
  color: #b51854;
  border: 0.5rem solid #b51854;
  width: 700px;
  transition: .5s;
}

.landing_card-pink .card_name {
  font-size: clamp(1rem, 10vw, 3rem);
  margin-left: 1em;
}

.landing_card-pink i {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  color: #b51854;
  transition: .5s;
}

.landing_card-pink:hover {
  color:#fd4189;
  border: 0.5rem solid #fd4189;
}

.landing_card-pink:hover i {
  color:#fd4189;
}

.landing_card-blue {
  border-radius: 1.5em;
  padding-top: 1.5em;
  padding-bottom: .5em;
  cursor: pointer;
  font-weight: 700;
  margin: 2.5em auto 5.5em 0;
  color: #1954ad;
  border: 0.5rem solid #1954ad;
  width: 700px;
  transition: .5s;
}

.landing_card-blue .card_name {
  font-size: clamp(1rem, 10vw, 3rem);
  margin-left: 1em;
}

.landing_card-blue i {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  color: #1954ad;
  transition: .5s;
}

.landing_card-blue:hover {
  color: #2d81ff;
  border: 0.5rem solid #2d81ff;
}

.landing_card-blue:hover i {
  color: #2d81ff;
}

.gray-text {
  color: #8a8a8a;
}

.fa-icon-custom {
  color: #dd184e;
  font-size: 3rem;
}

.cta-b-tournament {
  width: 15rem !important;
}

.leaderboard-tables-cm {
  border-radius: 0.5rem;
  color: white;
  background-color: #292929;
}

.table-body-text {
  color: white;
}

.table-header-text {
  color: white;
}

.nav-item a {
  color: white;
  padding-right: .5rem;
  padding-left: .5rem;
  background-color: #211a1d; 
}

.navbar {
  height: 70px; 
  background-color: #211a1d; 
  position: fixed; 
  z-index: 99; 
  width: 100%;
  box-shadow: 0px 0px 8px 2px #171616;
}

.navbar .nav-item a.active {
  color: #da2268;
}

.navbar .nav-item a:hover a.dropdown {
  color: rgba(255,255,255,.5);
}

.navbar a:hover {
  color:rgba(255,255,255,.5);
}

.navbar .dropdown {
  font-size: medium;
  height: 70px;
  display: table-cell; 
  vertical-align: middle;
  text-decoration: none;
}

.stage-dot {
  height: 25px;
  width: 25px;
  background-color: transparent;
  border: white 1px solid;
  border-radius: 50%;
  display: inline-block;
}

.stage-dot-active {
  background-color: #2a76f6;
  border-color: #2a76f6;
  box-shadow: 0 0 5px #204585;
}

.stage-dot-separator {
  width: 7em;
  border-top: 1px white dotted;
  padding-bottom: 0.7rem;
  display: inline-block;
}

.stage-wrapper {
  min-width: 100%;
  font-size: 1vw;
}

.cms-image {
  max-width: 100%;
  max-height: 250px;
}

.cms-card {
  background-color: transparent;
  position: relative;
  z-index: 5;
}

.cms-card .cms-cb-alpha {
  position: absolute;
  background-color: #ffffff;
  opacity: 0.4;
  width: 100%;
  height: 100%;
}

.card-bg {
  background-color: silver;
}

.card-br {
  border: 1px whitesmoke solid;
  border-radius: 0.5rem;
}


.footer {
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  min-height: 750px;
}

.body {
  display: flex;
  flex-direction: column;
  position: relative;
}

.cta-buttons {
  background-color: #673ab7;
  color: white !important;
  padding: 1rem;
  background: linear-gradient(300deg, #f60260, #227bfc) !important;
  border: transparent;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.red-text {
  color: red;
}

.white-text {
  color: white;
}

.width-300 {
  width: 300px;
}

.max-width-100 {
  max-width: 100%;
}

.a-no-hover:hover {
  text-decoration: none;
}

.numerical-input {
  width: 100px !important;
}

.sp-width-220 {
  width: 220px !important;
}

/* Customize the label (the container) */
.checkbox-div {
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-div input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-div:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-div input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-div input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-div .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*# sourceMappingURL=valvr.css.map */

.fa, .fab {
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 0;
  color: white;
  transition: color .2s ease-out;
  background: #211a1d66;
  border-radius: 20px;
  transition: .3s;
}

.fa:hover, .fab:hover {
  background: #211a1d66;
  color: #aa1e53;
  text-decoration: none;
}

.dropdown-item.active {
  background-color: #ffffff;
  color: black;
}

.dropdown .btn {
  width: 250px;
}

#id_Logo {
  width: 100%;
}

.dropdown-content {
  /* top: 60px; */
  position: absolute;
  background-color: rgb(39, 39, 39);
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 99;
  min-width: 135px;
  visibility: hidden;
  opacity: 0;
  transition: all .25s;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

#team_dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
  transform: translateY(-10px);

}

.navbar a {
  font-size: large;
}

.team_row {
  border-top: 2px solid #211a1e;
  text-decoration: none;
}

.team_row:hover {
  background-color: #1a1417;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #211a1d;
  margin: auto;
  padding: 20px;
  width: 80%;

}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  width: 20px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-content #message {
  background-color: #211a1d67;
  width: 80%;
  margin: auto;
  color: gray;
  height: 150px;
  padding: 5px;
}

.modal-content #message:hover,
.modal-content #message:focus {
  outline: none !important;
}

.modal-content button {
  width: 30%;
  margin: 40px auto 0px auto;
}

.c2 {
  position: relative;
}

.c2:after {
  content: "";
  background-color: white;
  position: absolute;
  width: 2.5px;
  height: 25px;
  top: 10px;
  left: 0;
  display: block;
}

.login a {
  color: white;
  text-decoration: none;
}

.login a:hover {
  color: rgba(255, 255, 255, 0.418);
}

.blue-btn {
  margin-top: 15px;
  background: black;
  border: solid 3px #1464db;
  color: #1464db;  
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 650;
  outline: none;
  transition: .5s;
}

.blue-btn:hover {
  background: #1464db;
  color: black;
  outline: none;
}

.blue-btn:focus {
  outline: none;
}

.pink-btn-2 {
  margin-top: 15px;
  background: #211a1d;
  border: solid 3px #da2268;
  color: #da2268;  
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 650;
  outline: none;
  transition: .5s;
}

.pink-btn-2:hover {
  background: #da2268;
  color: #211a1d;
  outline: none;
}

.pink-btn-2:focus {
  outline: none;
}

.pink-btn {
  margin-top: 15px;
  background: transparent;
  border: solid 3px #da2268;
  color: #da2268;  
  border-radius: 10px;
  padding: 10px 15px;
  font-weight: 700;
  outline: none;
  transition: .5s;
}

.pink-btn:hover {
  background: #da2268;
  color: #211a1d;
  outline: none;
}

.pink-btn:focus {
  outline: none;
}

#myBtn h5 {
  color: gray;
}

#myBtn:hover svg #outline, 
#myBtn:hover svg #cross {
  transition: .3s;
  fill: #aa1e53;
}

#myBtn:hover h5 {
  transition: .3s;
  color: #aa1e53;  
}

.card_description {
  text-align: left;
  margin-left: 3rem;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.mobile {
  display: none !important;
}

.page-title {
  font-weight: 600; 
  font-size: 2.7rem;
}

@media (max-width: 750px) {

  .mobile {
    display: block !important;
  }

  .desktop {
    display: none !important;
  }
  .landing_card-blue {
    width: 220px;
  }

  .landing_card-pink {
    width: 220px;
  }

  .discord {
    padding: 5rem 1rem;
  }

  .discord iframe {
    width: 250px;
  }

  .landing_card-blue .card_name {
    margin-left: 0;
    text-align: center;
    font-size: 1.25rem;
  }

  .landing_card-pink .card_name {
    margin-left: 0;
    text-align: center;
    font-size: 1.25rem;
  }

  .card_description {
    text-align: center;
    margin-left: 0rem;
  }
}