/*resize the screen*/


@font-face {
  font-family: 'soccer';
  src: url('fonts/Barbara.ttf');
}

@font-face {
  font-family: 'stragey';
  src: url('fonts/FtyStrategycideNcv-elGl.ttf');
}

@font-face {
  font-family: 'prem';
  src: url('fonts/Premier2019-rPv9.ttf');
}


.soccerfont{
  font-family: 'soccer', sans-serif !important;
}

.stragey{
  font-family: 'stragey', sans-serif !important;
}

.prem{
  font-family: 'prem', sans-serif !important;
}











@media only screen and (min-width: 768px) {
  html, body, .breakpointed {
/*    max-width: 500px;*/
    width: 100%;
    margin: 0 auto;

    
  }
}


/*for overlay when API is downloading content*/
#center-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}





/*###########*/

/*.mainChildren::before {*/
.mainChildren.now::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    zIndex: 999999999999999999999999999999999999;
    /*    transition: background-color 2s ease-in-out;*/
    animation: fadeInOut 0.5s ease-in-out;
   
}
.main-footer.now::after {
    content: "";
    background-color: rgba(0, 0, 0, 0.8);
    zIndex: 999999999999999999;
    /*    transition: background-color 2s ease-in-out;*/
    animation: fadeInOut 0.5s ease-in-out;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 75px;
    width: 100%;
   
}

@keyframes fadeInOut {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }
    50% {
        background-color: rgba(0, 0, 0, 0);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.8);
    }
}
/*###########*/



/*hide the scrollbar*/
::-webkit-scrollbar {
    width: 0.2em;
    background-color: transparent;
}

.main-text-1{
    color: #fff !important;
}


.league-img-circle{
    border-radius: 30px; 
    text-align: center; 
    align-items: center; 
    justify-content: center; 
    width: 48px;
    height: 48px; 
    display: flex;
    background-color: #24006c;
}

.mgl-10{
    margin-left: -10px;
}




/*for the input fields*/

/*for label*/

.new-input-label{
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/*for input*/

.auth-input{
    border-width: 0px !important;
    border-radius: 10px !important;
    color: #fff;
}

.input-appended-icon{
    background-color: transparent;
    border-width: 0px !important;
}





/*for homepage matches boxes*/

.overflow-hide::-webkit-scrollbar {
  display: none;
}

.popular-matches-slider .slick-slide {
  padding-right: 20px;
  margin-top: 10px;
}



/*side menu sub*/
.my-submenu:hover {
  background-color: transparent !important;
}
.my-menu-item:hover {
  background-color: transparent !important;
}




.right-overlay::after {
  content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: '#f90';
    zIndex: 999999999999999999999999999999999999999999999999999999999999999999999999;
}



/*add style to wysiwyg editors*/
.wysiwyg-no-style{
    color: inherit !important;
}




/*in conjuction with admin color settings*/
.mother-of-all, .tickerplace{
    background-repeat:      no-repeat !important;
    background-size:        cover !important;
    background-attachment: fixed !important;
}

.menu-only{
    background-size:     cover;
}




.ticker-container {
  width: 100%;
  height: 50px;
  overflow: hidden;
/*  border: 2px solid black;*/
  border-radius: 5px;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0 5px 0;
}

.each-ticker {
/*  font-size: 30px;*/
/*  font-weight: bold;*/
  color: red;
/*  animation: ticker 10s linear infinite, fadeIn 0.5s ease-in-out;*/
}

@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/*roll text*/
.ellititle{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}





.glass-element {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1);
  animation: glass-animation 1s ease-in-out infinite alternate;
}

@keyframes glass-animation {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.05);
    opacity: 0.6;
  }
}