body {
      //display: table;
      //width: 100%;
      height: 100%;
      background: url(../images2/footback.jpg);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      font-family: sans-serif;
    }
    
    #preloader {
        display: table;
        position: fixed;
        z-index: 2;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 150px;
        color: rgba(255, 255, 255, 0.7);
    }


    .swiper {
      //width: 240px;
      width: calc(90% - 50px);
      height: 320px;
      margin: 20px auto;
    }

    .swiper-slide {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 18px;
      //border: 1px solid #111;
      font-size: 22px;
      font-weight: bold;
      color: #fff;
    }
    .swiper-slide .descr{
       //position: absolute;
       //bottom: 0;
       box-sizing: border-box;
       background: rgba(0, 0, 0, 0.4);
       width: 100%;
       height: 100%;
       text-decoration: none;
       color: #fff;
       text-align: center;
       padding-top: 5px;
       padding-bottom: 5px;
       transition: .2s;
       opacity: 0;
    }
    .swiper-slide .descr:hover{
       opacity: 1;
       background: rgba(0, 0, 0, 0.3);
    }
    .swiper-slide .descr .txt{
       position: absolute;
       bottom: 0;
       padding: 5px;
       font-size: 12px;
       text-align: left;
       max-height: 100%;
       overflow: auto;

    }
    
    .navy{
       display: table;
       width: 90%;
       margin: 40px auto 20px auto; 
    }
    .navy a{
       display: table;
       padding-top: 5px;
       padding-bottom: 5px;
       width: calc(25% - 12px);
       margin: 5px;
       float: left;
       text-decoration: none;
       text-align: center;
       color: #fff;
       background: url(../images2/net.jpg);
       background-position: center;
       background-size: cover;
       border: 1px solid #111;
       border-radius: 5px;
       font-weight: bold;
       transition: .2s;
       text-shadow: 2px 2px #111;
    }

    .navy a:hover{
       //background: #407c16;
       background: url(../images2/greenfoot.jpg);
       background-position: center;
       background-size: cover;
    }

    .navy a.active{
       //background: #407c16;
       background: url(../images2/greenfoot.jpg);
       background-position: center;
       background-size: cover;
    }

    .navy2{
       display: none;
       width: 90%;
       margin: 40px auto 20px auto; 
    }
    .navy2 a{
       display: table;
       padding-top: 5px;
       padding-bottom: 5px;
       width: calc(25% - 12px);
       margin: 5px;
       float: left;
       text-decoration: none;
       text-align: center;
       color: #fff;
       background: url(../images2/net.jpg);
       background-position: center;
       background-size: cover;
       border: 1px solid #111;
       border-radius: 5px;
       font-weight: bold;
       font-size: 25px;
       transition: .2s;
       text-shadow: 2px 2px #111;
    }

    .navy2 a:hover{
       //background: #407c16;
       background: url(../images2/greenfoot.jpg);
       background-position: center;
       background-size: cover;
    }

    .navy2 a.active{
       //background: #407c16;
       background: url(../images2/greenfoot.jpg);
       background-position: center;
       background-size: cover;
    }

    .penaltyBox{
       diplay: table;
       width: 90%;
       min-height: 500px;
       //background: #fff;
       margin: 0px auto 20px auto;
       padding-bottom: 20px;
    }
    .penaltyBox #individualMatch{
       margin: 8px 0px;
       width: 100%;
       height: 70px;
       //line-height: 70px;
       text-align: center;
       background: rgba(0, 0, 0, 0.5);
       border-radius: 8px;
       overflow: hidden;
       color: #fff;
    }
    .penaltyBox #individualMatch #teamBuffer{
      float:left;      
      width: calc(100% - 210px);
      height: 70px;
      line-height: 70px;
    }

    .penaltyBox #individualMatch #teamPosition{
      float:left;      
      width: 30px;
      height: 70px;
      line-height: 70px;
    }

    .penaltyBox #individualMatch #teamBadge{
      float:left;
      padding: 5px;
      width: calc(70px - 10px);
      height: calc(70px - 10px);
      background: #fff;
      //position: absolute;
      //top: 0;
    }
    .penaltyBox #individualMatch #teamNameLong{
      float:left;      
      width: calc(100% - 310px);
      overflow: auto;
      height: 70px;
      line-height: 70px;
      //position: absolute;
      //top: 0;
    }
    .penaltyBox #individualMatch #teamNameLongLong{
      float:left;      
      width: calc(100% - 140px);
      overflow: auto;
      height: 70px;
      line-height: 70px;
      //position: absolute;
      //top: 0;
    }
    .penaltyBox #individualMatch #teamGoal{
      float:left;      
      width: 40px;
      height: 70px;
      line-height: 70px;
    }
    .penaltyBox #individualMatch #teamPts{
      float:left;      
      width: 35px;
      height: 70px;
      line-height: 70px;
      //position: absolute;
      //top: 0;
    }

     .penaltyBox #individualMatch #matchInfo {
         float: left;
         width: calc(100% - 140px);
         height: 70px;
         //background: red;
     }
    .penaltyBox #individualMatch #matchInfo #match_date{
       padding-top: 5px;
       width: 100%;
       height: calc(20px - 5px);
       line-height: 20px;
       float: left;
       text-align: center;
       //background: rgba(0, 0, 0, 0.5);
    }

    .penaltyBox #individualMatch #matchInfo #teamName{
      float:left;
      width: calc(50% - 30px);
      height: 50px;
      line-height: 50px;
      overflow-x: auto;
    }
    .penaltyBox #individualMatch #matchInfo #scores{
      float:left;
      width: 60px;
      height: 50px;
      line-height: 50px;
      overflow-X: auto;
    }


    @media screen and (max-width: 860px) {
      .navy {
        display: none;
      }
      .navy2 {
        display: table;
      }
    }


    @media screen and (max-width: 760px) {
      .swiper {
         height: 200px;
      }
    }