/* main menu styles */
.menu-container{
    width:100%;
    height:90px;
    display:flex;
    background-color:#2f855a;
    right:0;
    top:0;
    z-index:199;
    position:fixed;

}

.mav,.mav ul {
    list-style:none;
    margin:0;
    padding:0;
}

.mav {
    position:absolute;
    width:75%;
    right:0px;
}

.mav ul {
    height:0;
    left:0;
    overflow:hidden;
    position:absolute;
    top:46px;
}

.mav li {
    color:#FFF;
    float:right;
    position:relative;
    width:11%;
}

.mav li a {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    background-color:#2f855a;
    color:#FFF;
    display:flex;
    font-size:16px;
    line-height:45px;
    padding-top :10px;
    padding-left: 10px;
    text-decoration:none;
    transition:0.5s;
    height:55px;
    width:90%;
    text-align: center;
    font-size:20px;
}

.mav li:hover > a {
    background:#8CCA33;
    border-color:#2f855a;
    color:#fff;
}

.mav li:hover ul.subs {
    height:auto;
    width:180px;
}

.mav ul li {
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -webkit-transition:0.5s;
    opacity:0;
    transition:0.5s;
    width:100%;
    z-index:100;
}

.mav li ul li {
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -webkit-transition-delay:0s;
    transition-delay:0s;
}

.mav li:hover ul li {
    opacity:1;
    -moz-transition-delay:0.5s;
    -o-transition-delay:0.5s;
    -webkit-transition-delay:0.5s;
    transition-delay:0.5s;
}

.mav ul li a {
    background:#2f855a;
    border-color:#2f855a;
    color:#fff;
    line-height:1px;
    -moz-transition:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
    font-size: large;
}

.mav li:hover ul li a {
    line-height:35px;
}

.mav ul li a:hover {
    background:#8CCA33;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
    background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(-90deg,rgba(255,255,255,0.5),rgba(255,255,25,0));
}
/*team logo and name*/
.teamname{
    display:flex;
    height:70px;
    width:40%;
    font-family:'Shrik';

}
.teamlogo{
    position:relative;
    width:110px;
    height:90px;

}


/* teananme style*/
/* From Uiverse.io by eslam-hany */ /* mediumturquoise*/
.card {
    position: relative;
    width: 330px;
    height: 50px;
    background:#2f855a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    border-radius: 15px;
    cursor: pointer;
    color:#eee;
    margin-top: 20px;
  }
  
  .card::before,
  .card::after {
    position: absolute;
    content: "";
    width: 20%;
    height: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    background-color: lightblue;
    transition: all 0.1s;
  }
  
  .card::before {
    top: 0;
    right: 0;
    border-radius: 0 15px 0 100%;
  }
  
  .card::after {
    bottom: 0;
    left: 0;
    border-radius: 0 100%  0 15px;
  }
  
  .card:hover::before,
  .card:hover:after {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    transition: all 0.1s;
  }
  
  .card:hover:after {
    content: "Aqua Guardian²";
  }