/**********************************
Firmenkurse Popup Boxes
**********************************/

.business {
  background-image: url("../Images/Firmenkurse/Business.png");
  background-size: 100%;
  background-position: 0px 200px;
}

.stufen {
  background-image: url("../Images/Firmenkurse/Stufen.png");
  background-size: 100%;
  background-position: 0px 200px;
}

.diplom {
  background-image: url("../Images/Firmenkurse/Diplom.png");
  background-size: 100%;
  background-position: 0px 200px;
}

.konversation {
  background-image: url("../Images/Firmenkurse/Konversation.png");
  background-size: 100%;
  background-position: 0px 200px;
}

.imagebox {
  width: 8vw;
  height: 8vw;
  background-size: 8vw;
  background-position: 0vw -8vw;
}

.button:hover .imagebox {background-position: 0px -16vw;}


/************************************************
Adjusted Styles for Small Screens
************************************************/

@media screen and (max-width: 666px), (hover: none){
    .button {
      display: flex;
      align-items: center;
      width: 100%;
      text-align: left;
      padding: 20px 10px 10px 20px;
      font-size: 4vw;
    }

    .imagebox {
      width: 14vw;
      height: 14vw;
      float: left;
      margin: 0px 20px 10px 0px;
    }
    .imageboxAK {
      width: 15vw;
      height: 8.7575vw;
      float: left;
      margin-left: 0px;
      margin-right: 20px;
    }

    .AKbuttonright {
      float: left;
      vertical-align: middle;
      margin-bottom: 20px; /*raises the content up by 20px, optically more pleasing*/
    }

    .imagebox:first-child {
      background-size: 14vw;
      background-position: 14vw -14vw;
    }
    .button:hover .imagebox {
      background-position: 0px 14vw;
    }
    .popup{
      width: 90%;
      padding-right: 20px;
    }
    .popup img {
      float:none;
    }
    .PUimgbox {
      display: none;
    }
    .PUcontent {
      width: 100%;
      margin: 0px;
      padding: 15px;
    }
    .button h2 {
      float: left;
      font-size: 5vw;
      margin-top: 0;
    }
    .halves {
      width: 100%;
      margin-bottom: 15px;
    }
    .rightpad {
      padding-left: 0px;
    }
    .leftpad {
      padding-right: 0px;
    }
}



/**********************************
Meet the Team
**********************************/
.team-member {overflow: hidden;}
.team-member, .team-member .team-img {position: relative;}
.team-img img {width: calc((100% - 100px)/3);}
.team-member img {width: calc((100% - 100px)/3);}

.team-hover {
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    right: 0;
    margin: 0;
    background-color: rgba(0, 185, 242, 0.25);
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.team-hover .desk {
    position: absolute;
    top: 0%;
    width: calc((100% - 100px)/3);
    opacity: 0;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
    -webkit-transition: all 0.3s 0.2s ease;
    transition: all 0.3s 0.2s ease;
}
.desk {text-align: center;}
.team-member:hover .team-hover, .team-member:hover .team-hover .desk, {opacity: 1;}


.team-title {
    position: static;
    padding: 15px 0px 25px 0px;
    display: inline-block;
    width: 100%;
    color: #fff;
    outline: #fff;
    background-color: rgba(0, 0, 0, 0.3);
}
.team-title .FBh3, .team-title .FBtext {display: block; font-size: smaller;
}