.teams .double-container{
    margin-bottom:100px;
}



.teams .head{
    margin-bottom:11.5px;
}

.teams .top{
    margin-bottom:10px;
}


.teams .left{
    text-align:left;
    position:relative;
}
.teams .double-container-1-2{
  display:grid;
  grid-template-columns:1fr 2fr;
  justify-content:space-between;
}

.teams .item {
    
    float: left;
    position: relative;
    cursor:pointer;
    background: #000;
    box-shadow:0px 15px 1.5px -7.5px #0f4c81;
    width:100%;
    margin-bottom:25px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    width:100%;
    min-width:100%;
    height:400px;
    margin-left:-10px;
}

.teams .item::after {
  width: 0px;
  height: 0px;
  background: #fff;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-bottom: 10px solid #000;
  border-right: 10px solid white;
  border-left: 10px solid #000;
  border-top: 10px solid white;
}

.teams .item:hover .inner{
  opacity:1;
  transition:.5s ease-in-out all;
}

.teams .item .play{
  width:100px;
}


.teams .item .inner{
  position:absolute;
  background:#5d5f6099;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0;
  transition:.5s ease-in-out all;
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-align:center;
  background: #5d5f6099;
}

.teams .item .inner::after {
  width: 0px;
  height: 0px;
  background: #fff;
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-bottom: 10px solid #5d5f6099;
  border-right: 10px solid white;
  border-left: 10px solid #5d5f6099;
  border-top: 10px solid white;
  z-index:10;
}

.teams .item .inner span{
  background:#ffffff99;
  width:100px;
  height:100px;
  border-radius:100px;
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:space-around;
  margin:auto;
}
.teams .item .inner span img{
  height:50px;
}


.teams .bg-1::before {
  border: 30px #0f4c81 solid;
  border-top-color: transparent;
  border-left-color: transparent;
}
.teams .bg-1::after {
  background: #0f4c81;
}


.teams .bg-2::before {
  border: 30px #fdba12 solid;
  border-top-color: transparent;
  border-left-color: transparent;
}
.teams .bg-2::after {
  background: #fdba12;
}

.teams .bg-4::before {
  border: 30px #00b3dc solid;
  border-top-color: transparent;
  border-left-color: transparent;
}
.teams .bg-4::after {
  background: #00b3dc;
}

.teams .bg::before {
  border: 30px #485865 solid;
  border-top-color: transparent;
  border-left-color: transparent;
}
.teams .bg::after {
  background: #485865;
}




/* mobile screen */
@media screen and (max-width:1275px){
    .teams .double-container-1-2{
        grid-template-columns: 1.5fr 2fr;
    }
}
@media screen and (max-width:800px){
    .teams .double-container-1-2{
        grid-template-columns: 2fr 2fr;
    }
}
@media screen and (max-width:600px){
    .teams .double-container-1-2{
        grid-template-columns: 2.5fr 2fr;
    }
}
@media screen and (max-width:600px){
    .teams .bg-4,
    .teams .bg-2,
    .teams .bg{
        margin-bottom:100px;
    }
    .teams{
        margin-bottom:100px;
    }
    .teams .item-container{
      margin-bottom:20px;
    }
    .teams .double-container-1-2{
      grid-template-columns:1fr!important;
    }
    .teams .item{
        width:100%;
    }
}