body {
      font-family: "Montserrat", sans-serif;
    }
    header {
      display: block;
      position: fixed;
      margin: 0 auto;
      width: 100%;
      padding: 0;
      background-color: #131313;
      z-index: 999;
      top: 0;
    }

    .headtop {
      margin: 0 auto;
      /* max-width: 720px; */
      top: 0;
      height: 60px;
      background: #131313;
      z-index: 1000;
    }

    .noshow{
      visibility: hidden;
    }

    .brand-logo p {
      color: #999999;
      font-size: 16px;
      text-align: center;
    }


    a:link {
    color: #111111;
    }
    a:visited {
    color: #111111;
    }
    a:hover {
    color: #333333;
    }
    a:active {
    color: #333333;
    }

    p a {
      color: #ff9900;
      font-weight: normal;
    }
    footer p a:visited {
      color: #fa9000;
      text-decoration: none;
      font-weight: normal;
    }

    footer p a:link {
      color: #fa9000;
      text-decoration: none;
      font-weight: normal;
    }

    footer p a {
      color: #fa9000;
      text-decoration: none;
      font-weight: normal;
    }

    footer p a:hover {
      color: #fa9000;
      text-decoration: none;
      font-weight: normal;
    }


    footer p a:active {
      color: #fa9000;
      text-decoration: none;
      font-weight: normal;
    }


    .countryax{
      padding-right: 5px;
    }

    .countrybx{
      padding-left:5px;
    }
    p {
      line-height: 1.5;
      font-size: 1em;
      color: #222222;
    }

    footer {
      align-items: center;
      justify-content: center;
      background: #131313;
      margin-top: 0px;
      padding: 15px;
      z-index: 99999;
      position: relative;
    }

    .bg {
      background-image: url("images/black.png");
      background-repeat: no-repeat;
      position: fixed;
      width: 100%;
      height: 100vh;
      z-index: -100;
      top: 0;
      background-size: cover;
      background-position: 53% 0%;
    }

    .cleanbutton{
      border: none;
    }

    .blackstripe{
      background-color:#222222;
    }

    .graystripe{
      background-color:#9b9b9b;
    }

    .whitetripe{
      background-color:#ffffff;
    }


    .font700{
      font-weight: 700;
    }

    .font400{
      font-weight: 400;
    }

    .nomb{
      margin-bottom:0;
    }

    .top10{
      padding-top:10px;
    }

    .headpad{
      padding:15px 0 10px 0;
    }

    .headline-span{
      display: block !important;
    }

    .color-change-black {
      -webkit-animation: color-change-black 8s ease-in alternate both;
      animation: color-change-black 8s ease-in alternate both;
    }
    .color-change-text {
      -webkit-animation: color-change-text 8s linear alternate both;
      animation: color-change-text 8s linear alternate both;
    }
    .color-change-sub {
      -webkit-animation: color-change-sub 6s ease-in alternate both;
      animation: color-change-sub 6s ease-in alternate both;
    }

    @keyframes color-change-black {
      0% {
        background: rgba(0, 0, 0, 0.8);
      }
      100% {
        background: rgba(0, 0, 0, 0.3);
      }
    }
    @keyframes color-change-harsh {
      0% {
        opacity: 0.3;
      }
      100% {
        opacity: 0.6;
      }
    }
    @keyframes color-change-text {
      0% {
        color: rgba(255, 255, 255, 1);
      }
      100% {
        color: rgba(255, 255, 255, 1);
      }
    }
    @keyframes color-change-sub {
      0% {
        opacity: 0;
      }
      40% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

    .carousel-control-prev, .carousel-control-next {
      /* height:400px; */
      /* width:1%; */
      width:50px;
      opacity:0.9;
    }

    /* .carousel-control-next-icon{
      background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#ff9900'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>")
    }

    .carousel-control-prev-icon{
      background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#f90'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>")
    } */
    .carousel-control-prev-icon, .carousel-control-next-icon{
      width:30px;
      height:40px;
    }

    .openshot {
      display: flex;
      margin-top: 15%;
      width: 100%;
      justify-content: center;
      align-items: center;
      position: absolute;
      z-index: 991;
    }

    .historypage{
      /* background-image:url('../images/historybackground.jpg'); */

      background: rgb(187,194,204);
      background: radial-gradient(circle, rgba(187,194,204,0.1) 0%, rgba(187,194,204,1) 100%);
      background-position: 50% 0%;
      background-repeat:no-repeat;
      background-size:cover;
    }

    .predictionpage{
      /* background-image:url('../images/predictiongold.png'); */
      background: rgb(230,175,13);
      background: radial-gradient(circle, rgba(230,175,13,0.6166841736694677) 0%, rgba(230,175,13,1) 100%);
      background-position: 50% 0%;
      background-repeat:no-repeat;
      background-size:cover;
    }
    
    .homepage{
      background-image:url('../images/homepage.png');
      background-position: 70% 50%;
    }
    .fullscreen70 {
      display:flex;
      flex-direction: column;
      width: 100%;
      min-height: 70vh;
      background-repeat:no-repeat;
      background-size:cover;
      background-position: 50% 30%;
    }

   .caption250{
      min-height: 250px;
    }
   .caption300{
      min-height: 300px;
    }

    .caption400{
      min-height: 400px;
    }
    .fullscreen {
      display:flex;
      flex-direction: column;
      width: 100%;
      min-height: 100vh;
      background-repeat:no-repeat;
      background-size:cover;
    }

    .iframe-1 {
      height: 600px !important;
}
.iframe-2 {
  height: 500px !important;
}
    
    .display-small{ font-size:16px; line-height:100%; }
    .display-head{ font-size:48px; line-height:140%; }
    .display-days{ font-size:46px; line-height:100%; }

    @media all and (min-width: 500px) {
      .openshot {
        margin-top: 15%;
      }
      .display-small{ font-size:18px; line-height:100%; }
      .display-head{ font-size:60px; line-height:140%; }
      .display-days{ font-size:54px; line-height:100%; }
      .iframe-1 {
        height: 700px !important;
  }
  .iframe-2 {
    height: 600px !important;
}
    }
    @media all and (min-width: 768px) {
      .openshot {
        margin-top: 18%;
      }
      .display-small{ font-size:22px; line-height:100%; }
      .display-head{ font-size:80px; line-height:140%; }
      .display-days{ font-size:62px; line-height:100%; }
      .iframe-1 {
        height: 850px !important;
  }
  .iframe-2 {
    height: 700px !important;
}
    }
    @media all and (min-width: 992px) {
      .openshot {
        margin-top: 20%;
      }
      .display-small{ font-size:22px; line-height:100%; }
      .display-head{ font-size:58px; line-height:140%; }
      .display-days{ font-size:70px; line-height:100%; }
      .iframe-1 {
        height: 860px !important;
  }      .iframe-2 {
        height: 950px !important;
  }
    }
    @media all and (min-width: 1200px) {
      .openshot {
        margin-top: 22%;
      }
      .display-small{ font-size:22px; line-height:100%; }
      .display-head{ font-size:64px; line-height:140%; }
      .display-days{ font-size:80px; line-height:100%; }
      .iframe-1 {
        height: 920px !important;
  }
  .iframe-2 {
    height: 1100px !important;
}
    }
    @media all and (min-width: 1600px) {
      .openshot {
        margin-top: 25%;
      }
      .display-small{ font-size:22px; line-height:100%; }
      .display-head{ font-size:85px; line-height:140%; }
      .display-days{ font-size:110px; line-height:100%; }
    }

    .brand-logo-img {
      margin: auto;
     display: block;
    }

    #vizboard {
      margin: 10px auto;
      text-align: center;
      width: 100%;
    }

    .svg-vizboard {
      display: block;
      top: 0;
      left: 0;
    }

    .axis line,
    .axis path {
      stroke: grey;
      opacity: 0.4;
      shape-rendering: crispEdges;
    }

    .axis text {
      fill: grey;
      font-size: 7px;
      opacity: 0.5;
    }

    #myVideox {
      
      right: 0;
      top: 0;
      min-width: 100%;
      min-height: auto;
    }

    #myVideo {
      padding-top:20px;
      margin:0 auto;
      text-align:center;
    }

    video {
    width: 100%    !important;
    height: auto   !important;
    }

    .font900{
      font-weight: 900;
    }

    .display-2{
      line-height: 1;
    }
    /* ----------------------------------------------------- */
    .custom-select {
      display: inline-block;
      position: relative;
      font-size: 24px;
      line-height: 8px;
    }

    iframe {
      overflow: hidden;
    }

    .custom-select select {
      display: none; 
    }

    .select-selected {
      background-color: rgb(0, 0, 0);
    }

    .select-selected:after {
      position: absolute;
      content: "";
      top: 10px;
      right: 10px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-color: #fff transparent transparent transparent;
    }

    .select-selected.select-arrow-active:after {
      border-color: transparent transparent #fff transparent;
      top: 5px;
    }

    .select-items div,
    .select-selected {
      color: #ffffff;
      padding: 4px 16px;
      border: 1px solid transparent;
      border-color: transparent transparent rgba(123, 123, 123, 0.268)
        transparent;
      cursor: pointer;
    }

    .select-items {
      position: absolute;
      background-color: black;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 99;
    }

    .select-hide {
      display: none;
    }

    .select-items div:hover,
    .same-as-selected {
      background-color: rgb(0, 0, 128);
    }

    .team-select {
      margin: 10px auto;
      vertical-align: middle;
      text-align: center;
    }
    .team-a-select {
      margin-right: 3px;
    }
    .team-b-select {
      margin-left: 3px;
    } 

    .days{
      margin-top:-20px;
      padding-bottom:30px;
    }

    .circle{
      border-radius: 50%;
      width:12px;
      height:12px;
      margin:0px;
      margin-right:3px;
      display:inline-block;
    }
    .circlex{
    border-radius: 50%;
      width:21px;
      height:21px;
      margin:0px;
      margin-right:3px;
      display:inline-block;
      vertical-align: middle;
      margin-bottom:2px;
    }
    .loss{
      background-color:#c5033f;
    }
    .win{
      background-color:#00eaff;
    }
    .draw{
      background-color:#f6ff00;
    }

    .whiteline{
      border-top:1px solid #545454;
      padding-top:15px;
      padding-bottom:15px;
      width:50%;
      text-align:center;
      margin:0 auto;
    }
    .white{
      color:#eeeeee;
    }





    .ratio{
      margin-left:5px;
    }
    .ratio-9x16 {
      @include media-breakpoint-up(md) {
        --bs-aspect-ratio: 177%; // 2x1
      }
      
    }




/* carousel */


/* predictionbox */

.predictionbox{
  background-color:red;
}


.videobox{
  background-color:#222222;
}

.wc101box{
  /* background-color:#6c757d; */
    background-image: url("../images/wc101v.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* .carousel-control-next, .carousel-control-prev{
  width:30px;
  background-color:#222222;
  opacity:100%;
} */

/* .carousel {
 padding:0 20px 0 20px;
} */
/* .carousel-control-next {
  right: -10px;
} */

.pad30{
  padding:30px;
}

.carousel-caption{
  position: static;
  color:#222222;
}

.carousel-control-next {
  right: -40px;
}

.carousel-control-prev {
  left: -40px;
}

/* .carousel-control-prev {
  left: -10px;
} */


    /* head-to-head */



  .head-to-headh1 {
      font-size: 1em;
      text-align: center;
      color: white;
      opacity: 1;
      margin-bottom: 20px;
      font-weight: 400;
      padding-top: 20px;
      /*border: 0.5px solid grey;*/
  }

  .head-to-headp {
      display: inline-block;
      font-size: 12px;
      color: grey;
  }

  #vizboard-head-en {
      display: inline-block;
      position: relative;
      margin: 10px auto;
      text-align: center;
      width: 100%;
  }
  /* ----------------------------------------------------- */
  .custom-select-2 {
      display: inline-block;
      position: relative;
      font-size: 24px;
      line-height: 8px;
  }

  .custom-select-2 select {
      display: none; /*hide original SELECT element: */
  }

  .select-selected {
      background-color: rgb(255, 255, 255);
  }

  /* Style the arrow inside the select element: */
  .select-selected:after {
      position: absolute;
      content: "";
      top: 10px;
      right: 10px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-color: #c3c3c3 transparent transparent transparent;
  }

  /* Point the arrow upwards when the select box is open (active): */
  .select-selected.select-arrow-active:after {
      border-color: transparent transparent #c3c3c3 transparent;
      top: 5px;
  }

  /* style the items (options), including the selected item: */
  .select-items div,
  .select-selected {
      color: #393939;
      font-weight: 500;
      padding: 8px 10px;
      border: 1px solid transparent;
      border-color: transparent transparent rgba(167, 167, 167, 0.268) transparent;
      cursor: pointer;
  }

  /* Style items (options): */
  .select-items {
      position: absolute;
      background-color: rgba(232, 232, 232, 0.96);
      font-size: 14px;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 99;
  }

  /* Hide the items when the select box is closed: */
  .select-hide {
      display: none;
  }

  .select-items div:hover,
  .same-as-selected {
      background-color: #cbcbcb;
  }

  .team-a-select {
      margin-right: 5px;
      margin-top: 10px;
  }
  .team-b-select {
      margin-left: 0px;
  }
  .title-comp {
      font-size: 19px;
      font-weight: 500;
      color: black;
      margin-top: 0px;
      padding-top: 0px;
  }

.borderright{
  border-right:2px solid #6c757d;
}
  .buttoncalendar{
    background:#6c757d;
  }


  .football_total_bar{
    padding:0;
    margin:0;
    z-index: 9999;
  }

  .football_left_bar, .football_right_bar, .football_draw_bar{
      display: inline-block;
      padding:0;
      margin:0;
      height:30px;
      z-index:99;
  }
  

.football_draw_bar {
	width:1%;
	background:#666666;
	float:left;
}
  
  .football_right_bar{
    width:1%;
    float:right;
  }
  
  .football_left_bar {
    width:1%;
    float:left;
  }

  .winbar{
    background:#32a2ef;
  }
  .losebar{
    background:#eb7716;
  }