.mainWrapper
{
    width:100%;
    min-height:80vh;
    margin-top:200px;
    box-sizing: border-box;
    padding:0px 5%;
    position:relative;
    display: block;
}
.mainWrapper>.memberWrapper
{
    width:33.33%;
    height: 340px;
    float: left;
    position: relative;
    display: block;
}
.mainWrapper>.memberWrapper>.member
{
    height:240px;
    margin-left: -120px;
    left:50%;
    width:240px;
    top:0;
    position:absolute;
}
.mainWrapper>.memberWrapper>.member:after,.mainWrapper>.memberWrapper>.member:before
{
    width: 2px;
    height:50px;
    margin:-25px -1px;
    background:rgba(0,0,0,0.2);
    position:absolute;
    transform:rotate(45deg);
    content: "";
    transition: left 0.2s,top 0.2s, height 1s,margin-top 1s;
    z-index: -1;
}
.mainWrapper>.memberWrapper>.member:after
{
    left:60%;
    top:40%;
}
.mainWrapper>.memberWrapper>.member:before
{
    top:60%;
    left:40%;
}
.mainWrapper>.memberWrapper>.member:hover:after
{
    left:100%;
    top:0%;
    height:0;
    margin-top:0;
}
.mainWrapper>.memberWrapper>.member:hover:before
{
    height:0;
    margin-top:0;
    top:100%;
    left:0%;
}
.mainWrapper>.memberWrapper>.member>.displayPicture
{
    font-family:"FontAwesome";
    background-size:cover;
    background-repeat: no-repeat;
    background-blend-mode: color;
    height:100%;
    width:100%;
    transition:background-color 0.2s;
    position:absolute;
    border-radius: 50% 50% 50% 50%;
}
.mainWrapper>.memberWrapper>.member:hover>.displayPicture
{
    background-color:rgba(0,54,102,0.71);
}
.mainWrapper>.memberWrapper>.member>.meta
{
    width:90%;
    height:90%;
    top:5%;
    left:5%;
    box-sizing:border-box;
    position:absolute;
    z-index: +1;
    transition:all 0.3s;
    opacity: 0;
    transform: scale(0.8);
}
.mainWrapper>.memberWrapper>.member:hover>.meta
{
    opacity: 1;
    transform: scale(1);
}
.mainWrapper>.memberWrapper>.member:hover>.meta:after,.mainWrapper>.memberWrapper>.member:hover>.meta:before
{
    content:"";
    position:absolute;
    box-sizing: border-box;
    border:2px solid rgba(255,255,255,0.5);
    border-radius:50%;
    animation:ripple 1.5s 0s 1 cubic-bezier(0.07,-0.49, 0, 1.19);
}
.mainWrapper>.memberWrapper>.member:hover>.meta:before
{
    animation-delay: 0s;
}
@keyframes ripple
{
    from{
        top:20;
        right:20;
        left:20;
        bottom:20;
    }
    to{
        top:0;
        right:0;
        left:0;
        bottom:0;
        opacity:0;
    }
}
.mainWrapper>.memberWrapper>.member>.meta>.name,.mainWrapper>.memberWrapper>.member>.meta>.job
{
    display: block;
    text-align: center;
    float: left;
    clear: both;
    left: 10%;
    width: 80%;
    text-align: center;
    color: white;
    transition:all 1s;
    position: absolute;
    font-family: "Roboto";
}
.mainWrapper>.memberWrapper>.member>.meta>.name
{
    bottom:45%;
    font-size: 1.5em;
    line-height: 1;
    margin-bottom:5px;
    font-weight: 500;
}
.mainWrapper>.memberWrapper>.member>.meta>.job
{
    top:55%;
    padding-top:5px;
    font-size: 1.2em;
    font-weight: 300;
}

/*Responsiveness*/
@media(max-width:1100px)
{
    .mainWrapper
    {
        margin-top:150px;
    }
    .mainWrapper>.memberWrapper
    {
        height: 250px;
    }
    .mainWrapper>.memberWrapper>.member
    {
        width:200px;
        height:200px;
        margin-left: -100px;
    }
    .mainWrapper>.memberWrapper>.member>.meta>.name
    {
        font-size:1.2em;
    }
    .mainWrapper>.memberWrapper>.member>.meta>.job
    {
        font-size:1em;
    }
    .mainWrapper>.memberWrapper>.member:after,.mainWrapper>.memberWrapper>.member:before
    {
        height:40px;
        margin-top:-20px;
    }
}
@media(max-width:900px)
{
    .mainWrapper
    {
        margin-top:120px;
    }
    .mainWrapper>.memberWrapper
    {
        height: 220px;
    }
    .mainWrapper>.memberWrapper>.member
    {
        width:180px;
        height:180px;
        margin-left: -90px;
    }
    .mainWrapper>.memberWrapper>.member>.meta>.name
    {
        font-size:1.1em;
        font-weight: 600;
        bottom:50%;
    }
    .mainWrapper>.memberWrapper>.member>.meta>.job
    {
        font-size:0.95em;
        top:50%;
    }
    .mainWrapper>.memberWrapper>.member:after,.mainWrapper>.memberWrapper>.member:before
    {
        height:30px;
        margin-top:-15px;
    }
}

@media(max-width:800px)
{
    .mainWrapper
    {
        padding:0px 5%;
    }
    .mainWrapper>.memberWrapper
    {
        width:50%;
    }
    .mainWrapper>.memberWrapper>.member
    {
        margin-left: 0px;
        left:0;
        height:100px;
        width:100%;
    }
    .mainWrapper>.memberWrapper>.member:after,.mainWrapper>.memberWrapper>.member:before
    {
        display: none;
    }
    .mainWrapper>.memberWrapper>.member>.displayPicture{
        width:100px;
        margin-left: -50px;
        left: 25%;
    }
    .mainWrapper>.memberWrapper>.member:hover>.displayPicture{
        background-color: transparent;
    }
    .mainWrapper>.memberWrapper>.member>.displayPicture,    .mainWrapper>.memberWrapper>.member>.meta
    {
        position:relative;
        float:left;
        height:100%;
    }
    .mainWrapper>.memberWrapper>.member:hover>.meta:after,.mainWrapper>.memberWrapper>.member:hover>.meta:before
    {
        display: none;
    }
    .mainWrapper>.memberWrapper>.member>.meta
    {
        width:50%;
        opacity: 1;
        left: 25%;
        transform:none;
    }
    .mainWrapper>.memberWrapper>.member>.meta>.name,.mainWrapper>.memberWrapper>.member>.meta>.job
    {
        color:black;
        white-space: nowrap;
    }
}
@media(max-width:600px)
{
    .mainWrapper>.memberWrapper
    {
        width:100%;
        height:180px;
    }   
}
@media(max-width:500px)
{
    .mainWrapper>.memberWrapper
    {
        width:100%;
        height:150px;
    }   
}