/*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: 0.5px !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;
  }
}










.parent-container {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}

.child-element {
  width: calc(33.33% - 10px);
  margin-right: 10px;
  height: 70px;
  border-radius: 2px;
}

.child-element:nth-child(1) {
  background: linear-gradient(to right, #f12711, #f5af19);
}

.child-element:nth-child(2) {
  background: linear-gradient(to right, #662d8c, #ed1e79);
}

.child-element:nth-child(3) {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  width: 33.33%;
  margin-right: 0px !important;
}


.DialogueBox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  background-color: #692d8c;
}

.CloseIcon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}









h2 {
  margin: 0;
  font-size: 1.4rem;
}

@media (min-width: 50em) {
  h2 {
    font-size: 1.8rem;
  }
}

.cta {
  --shadowColor: 187 60% 40%;
  display: flex;
  flex-wrap: wrap;
  background: hsl(187 70% 85%);
  max-width: 50rem;
  width: 100%;
  box-shadow: 0.65rem 0.65rem 0 hsl(var(--shadowColor) / 1);
  border-radius: 0.8rem;
  overflow: hidden;
  border: 0.5rem solid;
  margin-bottom: 10px;
}

.cta img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  flex: 1 1 300px;
  outline: 0.5rem solid;
}

.cta__text-column {
  flex: 1 0 50%;
  padding: 10px;
}

.cta__text-column > * + * {
/*  margin: min(1.5rem, 2.5vw) 0 0 0;*/
}

.cta a, .crazy-btn {
  display: inline-block;
  color: black;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background: hsl(187 75% 64%);
  border-radius: 0.6rem;
  font-weight: 700;
  border: 0.35rem solid;
}





/*card */

:root {
  --hue: 223;
  --bg: hsl(var(--hue), 10%, 90%);
  --fg: hsl(var(--hue), 10%, 10%);
  --primary: hsl(var(--hue), 90%, 55%);
  font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}


.card,
.card__chip {
  overflow: hidden;
  position: relative;
}
.card,
.card__chip-texture,
.card__texture {
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.card {
  animation-name: rotate;
  background-color: var(--primary);
  background-image: radial-gradient(
      circle at 100% 0%,
      hsla(0, 0%, 100%, 0.08) 29.5%,
      hsla(0, 0%, 100%, 0) 30%
    ),
    radial-gradient(
      circle at 100% 0%,
      hsla(0, 0%, 100%, 0.08) 39.5%,
      hsla(0, 0%, 100%, 0) 40%
    ),
    radial-gradient(
      circle at 100% 0%,
      hsla(0, 0%, 100%, 0.08) 49.5%,
      hsla(0, 0%, 100%, 0) 50%
    );
  border-radius: 0.5em;
  box-shadow: 0 0 0 hsl(0, 0%, 80%), 0 0 0 hsl(0, 0%, 100%),
    -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
  color: hsl(0, 0%, 100%);
  width: 10.3em;
  height: 6.8em;
  transform: translate3d(0, 0, 0);
}
.card__info,
.card__chip-texture,
.card__texture {
  position: absolute;
}
.card__chip-texture,
.card__texture {
  animation-name: texture;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
}
.card__info {
  font: 0.75em/1 "DM Sans", sans-serif;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.75rem;
  inset: 0;
}
.card__logo,
.card__number {
  width: 100%;
}
.card__logo {
  font-weight: bold;
  font-style: italic;
}
.card__chip {
  background-image: linear-gradient(hsl(0, 0%, 70%), hsl(0, 0%, 80%));
  border-radius: 0.2rem;
  box-shadow: 0 0 0 0.05rem hsla(0, 0%, 0%, 0.5) inset;
  width: 1.25rem;
  height: 1.25rem;
  transform: translate3d(0, 0, 0);
}
.card__chip-lines {
  width: 100%;
  height: auto;
}
.card__chip-texture {
  background-image: linear-gradient(
    -80deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.6) 48% 52%,
    hsla(0, 0%, 100%, 0)
  );
}
.card__type {
  align-self: flex-end;
  margin-left: auto;
}
.card__digit-group,
.card__exp-date,
.card__name {
  background: linear-gradient(
    hsl(0, 0%, 100%),
    hsl(0, 0%, 85%) 15% 55%,
    hsl(0, 0%, 70%) 70%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Courier Prime", monospace;
  filter: drop-shadow(0 0.05rem hsla(0, 0%, 0%, 0.3));
}
.card__number {
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
}
.card__valid-thru,
.card__name {
  text-transform: uppercase;
}
.card__valid-thru,
.card__exp-date {
  margin-bottom: 0.25rem;
  width: 50%;
}
.card__valid-thru {
  font-size: 0.3rem;
  padding-right: 0.25rem;
  text-align: right;
}
.card__exp-date,
.card__name {
  font-size: 0.6rem;
}
.card__exp-date {
  padding-left: 0.25rem;
}
.card__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 6.25rem;
}
.card__vendor,
.card__vendor:before,
.card__vendor:after {
  position: absolute;
}
.card__vendor {
  right: 0.375rem;
  bottom: 0.375rem;
  width: 2.55rem;
  height: 1.5rem;
}
.card__vendor:before,
.card__vendor:after {
  border-radius: 50%;
  content: "";
  display: block;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
}
.card__vendor:before {
  background-color: #e71d1a;
  left: 0;
}
.card__vendor:after {
  background-color: #fa5e03;
  box-shadow: -1.05rem 0 0 #f59d1a inset;
  right: 0;
}
.card__vendor-sr {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}
.card__texture {
  animation-name: texture;
  background-image: linear-gradient(
    -80deg,
    hsla(0, 0%, 100%, 0.3) 25%,
    hsla(0, 0%, 100%, 0) 45%
  );
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 10%, 30%);
    --fg: hsl(var(--hue), 10%, 90%);
  }
}

/* Animation */
@keyframes rotate {
  from,
  to {
    animation-timing-function: ease-in;
    box-shadow: 0 0 0 hsl(0, 0%, 80%), 0.1rem 0 0 hsl(0, 0%, 100%),
      -0.2rem 0 0.75rem 0 hsla(0, 0%, 0%, 0.3);
    transform: rotateY(-10deg);
  }
  25%,
  75% {
    animation-timing-function: ease-out;
    box-shadow: 0 0 0 hsl(0, 0%, 80%), 0 0 0 hsl(0, 0%, 100%),
      -0.25rem -0.05rem 1rem 0.15rem hsla(0, 0%, 0%, 0.3);
    transform: rotateY(0deg);
  }
  50% {
    animation-timing-function: ease-in;
    box-shadow: -0.1rem 0 0 hsl(0, 0%, 80%), 0 0 0 hsl(0, 0%, 100%),
      -0.3rem -0.1rem 1.5rem 0.3rem hsla(0, 0%, 0%, 0.3);
    transform: rotateY(10deg);
  }
}
@keyframes texture {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-50%, 0, 0);
  }
}





/*profile*/

lazy.img {
  width: 100%;
  height: 100%;
}

.bg-black {
  background: #000;
}

.skill-block {
  width: 30%;
}

@media (min-width: 991px) and (max-width:1200px) {
  .skill-block {
    padding: 32px !important;
  }
}

@media (min-width: 1200px) {
  .skill-block {
    padding: 56px !important;
  }
}

body {
  background-color: #eeeeee;
}




/*############################# fixture search*/