* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  justify-content: center;
  align-items: center;
}

.site-footer
{
  background-color:#141414;
  padding:45px 0 20px;
  font-size:15px;
  line-height:24px;
  color:#EEEEEE;
  margin-top: 200px;
}
.site-footer h5
{
  color:#fff;
  font-size:16px;
  text-transform:uppercase;
  margin-top:5px;
  letter-spacing:2px
}
.site-footer a
{
  color:#737373;
}
.site-footer a:hover
{
  color:#3366cc;
  text-decoration:none;
}
.site-footer .social-icons a
{
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:5px;
  border-radius:100%;
  background-color:#33353d;
}

.social-icons
{
  padding-left:0;
  margin-bottom:0;
  list-style:none

}
.social-icons li
{
  display:inline-block;
  margin-bottom:4px
}
.social-icons a{
  background-color:#eceeef;
  color:#818a91;
  font-size:16px;
  display:inline-block;
  line-height:44px;
  width:44px;
  height:44px;
  text-align:center;
  margin-right:8px;
  border-radius:100%;
  -webkit-transition:all .2s linear;
  -o-transition:all .2s linear;
  transition:all .2s linear
}
.social-icons a:active,.social-icons a:focus,.social-icons a:hover
{
  color:#fff;
}
.social-icons.size-sm a
{
  line-height:34px;
  height:34px;
  width:34px;
  font-size:14px
}

.social-icons a.facebook:hover
{
  background-color:#1db954 !important;
}

.social-icons a.linkedin:hover
{
  background-color:#1db954 !important;
}

.social-icons a.github:hover
{
  background-color:#1db954 !important;
}

.jwoc-logo{
  display:inline-block;
  height: 50px;
  width: 50px;
  margin-right: 10px;
}

.icons:hover {
  color: black;
}
.Links {
  margin-top: 30px;
  z-index: 100;
}




#team
{
    margin-top:200px;
    margin-bottom: 100px;
}

.team__heading_2019 {
  font-family: 'Roboto Slab', serif;
  font-weight: bolder;
  font-size: 40px;
  outline: none;
  color: #EEEEEE;  
}

details[open] summary ~ * {
  animation: sweep 0.5s ease-in-out;
}

@keyframes sweep {
  from { 
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.team__heading_2019:hover {
    color: #1db954;
    transition: 0.4s;
    font-size: 42px;
}

.container {
  width: 1050px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.container .card {
  position: relative;
  width: 320px;
  height: 420px;
  margin: 15px;
  overflow: hidden;
}

.container .card span {
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  opacity: 0.95;
  background-color: #1db954;
  z-index: 1;
  transition: width 0.5s,height 0.5s;
}

.container .card:hover span {
  width: 1000px;
  height: 1000px;
}

.container .card .imgBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.container .card .imgBox img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.container .card .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.container .card .content div {
  padding: 40px;
  color: #ffffff;
  visibility: hidden;
  opacity: 0;
  transform: translateY(50px);
  transition: 0.2s;
}

.container .card:hover .content div {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}
