/*flip animation of cards*/
    
   .info-card {
    float: left;
    margin: 10px;
    -webkit-perspective: 600px;
}

.front, .back {
    background: #FFF;
    border-radius: 10px;
    transition: -webkit-transform 1s;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    /*border: 1px solid black;*/
}

.front {
    overflow: hidden;
    width: 250px;
    height: 330px;
    position: absolute;
    z-index: 1;
}

.back {
    color: #333;
    padding: 20px;
    /* padding-top: 0; */
    width: 250px;
    height: 330px;
    -webkit-transform: rotateY(-180deg);
    /*overflow: scroll;*/
}

.info-card:hover .back {
    -webkit-transform: rotateY(0);
}

.info-card:hover .front {
    -webkit-transform: rotateY(180deg);
}

.card-image {
    width: 100%;
    height: 100%;
}


/* Social buttons */
.social {
    list-style: none;
    padding: 0;
    margin-top: 25px;
    text-align: center;
}

.social a {
    position: relative;
    display: inline-block;
    min-width: 40px;
    padding: 10px 0;
    margin: 0 5px;
    overflow: hidden;
    text-align: center;
    background-color: rgb(215, 215, 215);
    border-radius: 40px;
}


a.social-icon {
    text-decoration: none !important;
    box-shadow: 0px 0px 1px rgb(51, 51, 51);
    box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.7);
}
a.social-icon:hover {
    color: rgb(255, 255, 255) !important;
}
a.facebook {
    color: rgb(59, 90, 154) !important;
}
a.facebook:hover {
    background-color: rgb(59, 90, 154) !important;
}
a.twitter {
    color: rgb(45, 168, 225) !important;
}
a.twitter:hover {
    background-color: rgb(45, 168, 225) !important;
}
a.github {
    color: rgb(51, 51, 51) !important;
}
a.github:hover {
    background-color: rgb(51, 51, 51) !important;
}