[ Avaa Bypassed ]

.gsc-team{
   .social-icons{
      a{
         @include size(35px, 35px);
         line-height: 35px;
         text-align: center;
         @include border-radius(50%);
         margin-right: 10px;
         display: inline-block;
         color: $white;
         @include transition(all 0.35s);
         @include box-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
         &:hover{
            @include box-shadow(0 3px 8px rgba(0, 0, 0, 0.4));
         }
      }
   }
   .team-name{
      font-size: 14px;
      text-transform: uppercase;
      padding: 0 0 15px ;
      position: relative;
      font-weight: 600;
      margin: 0;
      letter-spacing: 1px;
   }
   .team-position{
      text-transform: capitalize;
      color: $theme-color;
      font-weight: 400;
      font-size: 13px;
   }  
   .team-info{
      margin: 15px 0;
   }  

   &.team-horizontal{
      margin-top: 50px;
      .team-header{
         position: relative;
         overflow: hidden;
         img{
            @include transition(all 3s);
            display: inline-block;
         }
         .box-hover{
            @include opacity(0);
            @include scale(0.8);
            position: absolute;
            top: 0;
            left: 0;
            @include transition(all 0.35s);
            @include size(100%, 100%);
            background: rgba(0, 0, 0, 0.6);
            .content-inner{
               position: absolute;
               top: 50%;
               margin-top: -15px;
               left: 0;
               width: 100%;
               height: auto;
               padding: 0 20px;
            }
         }
         .social-list{
            a{
               background: none;
               color: $white!important;
               @include transition(all 0.35s);
               margin-right: 20px;
               display: inline-block;
               font-size: 16px;
               &:last-child{
                  margin-right: 0;
               }
               &:hover{
                  color: $theme-color!important;
               }
            }
         }
      }
      .team-name{
         font-size: 14px;
         margin: 0 0 12px 0;
         text-transform: uppercase;
         padding: 0 0 12px;
         position: relative;
         font-weight: 800;
         &:after{
            bottom: 0;
            left: 0;
            content: "";
            background: $theme-color;
            @include size(45px, 1px);
            position: absolute;
         } 
      }
      &:hover{
         .box-hover{
            @include opacity(1);
            @include scale(1);
         }
         .team-header{
            img{
               @include scale(1.2);
            }
         }
      } 
   }

   &.team-vertical-small{
      background: #F6F6F6;
      padding: 30px;
      text-align: center;
      @include transition(all 0.35s);
      .team-header{
         @include size(110px, 110px);
         @include border-radius(50%);
         display: inline-block;
      }
      &:hover{
         @include box-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
      }
   }

   &.team-vertical{  //vertical
      margin-bottom: 30px;
      position: relative;
      background: none;
      @include transition(all 0.35s);
      @include border-radius(6px);  
      .team-header{
         overflow: hidden;
         position: relative;
         img{
            @include transition(all 3s);
            display: inline-block;  
         }
      }
      .social-list{
         a{
            background: none;
            color: $white!important;
            @include transition(all 0.35s);
            margin-right: 20px;
            display: inline-block;
            font-size: 16px;
            &:last-child{
               margin-right: 0;
            }
            &:hover{
               color: $black!important;
            }
         }
      }
      .team-name{
         padding: 0;
         color: $white;
      }
      .team-position{
         color: $white;
      }
      .team-content{
         color: $white;
      }
      .box-hover{
         @include opacity(0);
         @include scale(0.8);
         position: absolute;
         top: 0;
         left: 0;
         @include transition(all 0.35s);
         @include size(100%, 100%);
         background: rgba(0, 0, 0, 0.6);
         .team-content{
            position: absolute;
            left: 0;
            width: 100%;
            height: auto;
            padding: 0 20px;
            top: 50%;
            @include translateY(-50%);
         }
      }
      .team-body{
         bottom: 0;
         left: 0;
         @include transition(all 0.35s);
         .content-hover{
            @include opacity(0);
         }
         .info{
            padding: 20px 15px;
            position: relative;
            margin-top: -35px;
            margin-left: 15px;
            margin-right: 15px;
            z-index: 99;
            background: $theme-color;
         }
      }
      &:hover{
         .box-hover{
            @include opacity(1);
            @include scale(1);
         }
      }  
   }
   &.team-circle{  //vertical
      .team-header, .box-hover{
         @include border-radius(50%);
      } 
   }
}