/* ------------------------------------------------------------------------------ */
/* ****************************************************************************** */
/* --------- (C) Copyright 2024/2025 by machtWeb | Reinhard Lange --------------- */
/* ---------------------- machtWeb.de | relaXits@machtWeb.de -------------------- */
/* ------------------------------------------------------------------------------ */
/* update	->							                          6.00/04 - 26-06-24
/* layout	-> team									                              */
/* file 	-> design/teamcards.css		       		                              */
/* colors	-> http://www.color-hex.com | https://oklch.com		                  */
/* ------------------------------------------------------------------------------ */
/* CARD with hover-animation */
/* https://codepen.io/Kaveh_Karami/pen/rNLXWxw */
/* 23-11-2020 */
/* ------------------------------------------------------------------------------ */

  .container-team {
    /*width: 1200px;*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container-team .box-team {
    width: 300px;
    height: 300px;
    position: relative;
    display: flex;
    margin: 40px;
  }
  .container-team .box-team:hover .imgBx {
    transform: translate(0, -35px);
  }
  .container-team .box-team:hover .content-team {
    transform: translate(0, 35px);
  }
  .container-team .imgBx {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s ease-in-out;
    z-index: 2;
  }
  .container-team .imgBx img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s ease-in-out;
    z-index: 2;
    object-fit: cover;
  }
  .container-team .content-team {
    position: absolute;
    top: 32px;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.5s ease-in-out;
    background: #fff;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 15px;
    border: 0px solid red;
  }
  .container-team .content-team .card-name {
    font-size: 20px;
    color: #111;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
  }
  .container-team .content-team card-name span {
    font-size: 14px;
    font-weight: 300;
  }
  
  @media only screen and (min-width: 768px) {
    .box-team:hover .imgBx {
      transform: translate(35px, -35px) !important;
    }
    .box-team:hover .content-team {
      transform: translate(-35px, 35px) !important;
    }
  }