@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

#team {
  position: relative;
  width: 100%;
  background: url(../home-icon/newblurbackground.png) center/cover no-repeat;
  overflow: hidden;
}

/* Animated overlay */
#team::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(circle at 50% 70%, rgba(255,140,0,0.35), rgba(0,0,0,0.9) 80%);
  background-size: 250% 250%;
  animation: glowMove 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

/* Keep text/content above */
#team > * {
  position: relative;
  z-index: 2;
}

/* More visible animation */
@keyframes glowMove {
  0% {
    background-position: 40% 60%;
    opacity: 0.6;
  }
  50% {
    background-position: 60% 80%;
    opacity: 0.85;
  }
  100% {
    background-position: 45% 65%;
    opacity: 0.6;
  }
}


.btn-primary:focus,
.btn-primary:hover {
    background-color: #108d6f;
    border-color: #108d6f;
    box-shadow: none;
    outline: 0
}

.btn-primary {
    color: #fff;
    background-color: #ed7a5d;
    border-color: #ed7a5d
}

section {
    padding: 60px 0
}

section .section-title {
    text-align: center;
    color: #ed7a5d;
    margin-bottom: 50px;
    text-transform: uppercase
}

#team .card {
    border: none;
    background: #171b22;
    color: #fff
}

.image-flip.hover .backside,
.image-flip:hover .backside {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -o-transform: rotateY(0);
    -ms-transform: rotateY(0);
    transform: rotateY(0);
    border-radius: .25rem
}

.image-flip.hover .frontside,
.image-flip:hover .frontside {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.mainflip {
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 1s;
    -moz-transition: 1s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d;
    position: relative
}

.frontside {
    position: relative;
    -webkit-transform: rotateY(0);
    -ms-transform: rotateY(0);
    z-index: 2;
    margin-bottom: 30px
}

.backside {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-box-shadow: 5px 7px 9px -4px #9e9e9e;
    -moz-box-shadow: 5px 7px 9px -4px #9e9e9e;
    box-shadow: 5px 7px 9px -4px #ecdb57
}

.backside,
.frontside {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 1s;
    -moz-transform-style: preserve-3d;
    -o-transition: 1s;
    -o-transform-style: preserve-3d;
    -ms-transition: 1s;
    -ms-transform-style: preserve-3d;
    transition: 1s;
    transform-style: preserve-3d
}

.backside .card,
.frontside .card {
    min-height: 312px
}

.backside .card a {
    font-size: 18px;
    color: #ed7a5d !important
}

.backside .card .card-title,
.frontside .card .card-title {
    color: #ed7a5d !important
}

.frontside .card .card-body img {
    width: 120px;
    height: 120px;
    border-radius: 50%
}

@media (max-width:767px) {
    .image-flip {
        perspective: 1000px
    }

    .backside,
    .frontside {
        width: 100%
    }
}