body{
    font-family: 'NunitoR' !important;
    text-rendering: optimizeLegibility !important;
    overflow-y: scroll; /* Show vertical scrollbar */
}

.fadeOnBg{
    background: rgb(48,48,48);
    background: radial-gradient(circle, rgba(48,48,48,1) 0%, rgba(27,27,27,1) 100%);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    position: fixed;
    z-index: -99;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;

}

.waitLoadFully{
    background-color: #1b243d;

    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
}

/* ***************************** */


/* MENU */


.navContainer{
    position: absolute !important;
    width:100%;
    z-index: 99;
    margin-top: -460px;
}

.searchContainer{
    width:100%;
    margin-top: 30px;

}


/* Fix space between nav and search bar when width lower than 992px*/
@media only screen and (max-width: 992px) {
    .selectInput {
        margin-top: -8px;
    }
}

.searchWrapper{
    max-width:550px; /* Same as 'nav' */
    margin: auto;
}

nav{
    margin: auto;
    max-width:700px;

    border:none 0px #000000;

    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -webkit-border-bottom-right-radius:8px;
    
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

.bg-dark{
    background-color: #000000d2 !important;
}

.nav-link{
    font-family: NunitoR;
    font-size: 16px;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: rgb(150, 150, 150);
}

/* Search */

.searchInputGroup{
    width: 100%;
}

.searchPreLogo{
    color:white;
    border-color: rgb(63, 63, 63);
    background: rgb(24, 24, 24) !important;
    border-width: 0px 2px 0px 0px;

    padding-left: 25px;
    padding-right: 25px;
}

.searchAfterLogo{
    color:white;
    border-color: rgb(63, 63, 63);
    background: rgb(24, 24, 24) !important;
    border-width: 0px 0px 0px 2px;

    padding-left: 25px;
    padding-right: 25px;
}

.stlClearSearch{
    color:white;
    background: rgb(24, 24, 24) !important;
    border-color: rgb(63, 63, 63);
    border-width: 0px 0px 0px 1px;

    padding-left: 25px;
    padding-right: 25px;
}

.searchInput{

    color:white !important;
    font-size:24px;
    background: rgb(24, 24, 24) !important;
    border-width: 0px 0px 0px 0px;

}


.searchInput:focus, .searchInput:active{
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.selectInput span{
    cursor:pointer;

    white-space: nowrap;
    width: 100% !important;
}

.selectInput ul{
    margin: 0;
    padding: 0;

    padding-top: 15px;
    padding-bottom: 15px;
}

.selectInput li{
    list-style-type: none;
    cursor:pointer;
    font-size: 14px;

    text-align:left;

    margin: 5px 0px 8px 5px;

    text-transform: uppercase;
}

.selectInput{
    color:white;
    text-align: center;

    border: solid !important;
    border-color: rgb(44, 44, 44) !important;
    border-width: 1px 0px 0px 0px !important;

    font-size:24px;

    background: rgb(24, 24, 24) !important;
    width: 100%;

    -moz-border-radius-topleft:8px;
    -moz-border-radius-topright:8px;
    -moz-border-radius-bottomleft:8px;
    -moz-border-radius-bottomright:8px;
    -webkit-border-top-left-radius:8px;
    -webkit-border-top-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
    -webkit-border-bottom-right-radius:8px;
    
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(167, 167, 167);
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: white;
}

/* CARDS */

.card{
    border-radius: 0px !important;
    background-color: #161616;
    border: none !important;
 }
 
 .card-body{
    background-color: #1f1f1f; /* #292929 */

   /* min-height: 130px;*/
 }
 
 .card-title{
    color: #ffffff;
    font-family: 'NunitoB' !important;
 }

 

.onGoingCard{
    max-width: 940px;
    box-shadow: 0px 0px 10px #000000;
}

.uLight{
    font-family: 'NunitoL' !important;
    color: #979797;
    font-size: 15px;
}

.uBold{
    font-family: 'NunitoB' !important;
    color: #979797;
}
 
/* ***************************** */


/** 
* Card image
*/

.cPointer { 
    cursor:pointer;
    
    position: relative; 
    display: block; 
    overflow: hidden; 
}

.miniCardImg {
    border-radius: 0px !important;

    filter: contrast(100%);

    transition: all .10s ease-in-out;
    
    animation-name: offMiniImg;
    animation-duration: 2s;
}

.miniCardImg:hover {

    /*filter: brightness(0.60);*/

    transition: all .10s ease-in-out;
    
    animation-fill-mode: forwards;
    animation-name: onMiniImg;
    animation-duration: 1s;
    /*animation-iteration-count:infinite;*/
}


.caption{ 
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;

    pointer-events: none;
    transform: translate(-50%, -50%);
    font-size: 60px;
    text-decoration: none !important;
    color: white;

    opacity: 0;

    transition: all .2s ease-in-out;
}

.cPointer:hover .caption{
    opacity: 1;
}

@keyframes onMiniImg {
    from {
        filter: brightness(1.0);
        transform: scale(1.0);
    }
    to {
        filter: brightness(1.1);
        transform: scale(1.2);
    }
  }

@keyframes offMiniImg {
    from {
        filter: brightness(0.3);
        transform: scale(1.2);
    }
    to {
        filter: brightness(1.0);
        transform: scale(1.0);
    }
  }


/* ***************************** */



/* Default and highlighted card */
.cardCustom{
    -webkit-box-shadow: 0 0px 10px #161616a8;
    -moz-box-shadow: 0 0px 10px #161616a8;
    box-shadow: 0 0px 10px #161616a8;
}

.showEffect{
    -webkit-box-shadow: 0 0px 10px #161616a8;
    -moz-box-shadow: 0 0px 10px #161616a8;
    box-shadow: 0 0px 10px #161616a8;

    animation-name: searchEffect;
    animation-duration: 5s;
}


@keyframes searchEffect {
    from {
        z-index: 1; 
        transform: scale(1.2);

        -webkit-box-shadow: 0 2px 30px #ff0062;
        -moz-box-shadow: 0 2px 30px #ff0062;
        box-shadow: 0 2px 30px #ff0062;
    }
    to {
        -webkit-box-shadow: 0 0px 10px #161616a8;
        -moz-box-shadow: 0 0px 10px #161616a8;
        box-shadow: 0 0px 10px #161616a8;
    }
  }

/* ********************************************* */


.cardCustom{
    max-width:270px;
    min-width:150px;
}


.card-title{
    font-size:16px;
}

.ongoingStream{
    margin-top: -80px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1180px;
}

.doneStream{
    padding-top: 8px;
    margin-left: 45px;
    margin-right: 5px;
    margin:auto;
    max-width: 1180px;
    min-height:400px;
}


.onGoingGameGroupText{
    position: absolute;
    transform: translate(-50%, -50%);

    font-family: 'NunitoB' !important;
    font-size: 42px;
    color:white;

    top: 370px;
    left: 50%;

    z-index: 1;
}

.gameGroupText{
    font-family: 'NunitoB' !important;
    font-size: 42px;
    color:white;
    margin-top:48px;
    margin-bottom:37px;
    z-index: 99;
}


/* FOOTER */

/* .footerTop{
    width:100%;
    height: 300px;

    background-image: url("../images/vr-logo.webp");

    background-repeat: no-repeat;
    background-position: center;

    background-size: 150px;

    background-color: rgb(27, 27, 27);
  
} */

.footer{
    width:100%;
    padding: 30px;

    font-family:'NunitoB';

    background: #353a40 !important;
    text-align: center;

    color: #adb5bd;
}


/* FIXING */
.row{
    margin-left:0px !important;
    margin-right:0px !important;
}

.navbar-nav li a {
    white-space: nowrap;
    margin-left: 5px;
}

.brandIcon{
    margin-left: 35px;
}

.navToggler{
    margin-right: 40px;
}