/*card flip on click */
    
.card-container {
    width: 100%;
    /*height: 440px;*/
    position: relative;
    -webkit-perspective: 800px;
    -ms-perspective: 800px;
    perspective: 800px;
    border-radius: 4px;
  }
  .card {
    width: 100%;
    height: 300px;
    position: absolute;
    margin-top: 20px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    cursor: pointer;
    border: none;
  }
  .card div {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 6px;
    background: #fff;
    /*display: -ms-flexbox;
    display: box;
    display: flex;
    -o-box-pack: center;
    justify-content: center;
    -o-box-align: center;
    align-items: center; */
    font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #47525d;
  }

  .card .front {
    height: 300px;
  }

  .card .front h3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    width: 85%;
    transition: 1s color ease;
  }

  .card .front h3:hover {
    color: #ff7e3d;
  }

  .card .front img {
    height: 100%;
    width: auto;
    opacity: 0.5;
    transition: all .2s ease-in-out;
  }

  .card .front img:hover {
    transform: scale(1.05);
  }

  .card .back p {
    font-size: 14px;
    padding: 0 10px;
  }

  .card .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  .card .back img {
    margin-top: -20%;
  }

  .front .card-content {
    background: black !important;
  }

  .card-content {
   display: block !important; 
   overflow: hidden; 
  }

  .card.flipped {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    height: 350px;
    margin-top: 0;

  }

  @media screen and (max-width: 490px) {
    .card.flipped {
      height: 320px;
    }
  }

  .card.flipped .back {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  #cards {
    height: 350px;
  }

  @media screen and (max-width: 686px) and (min-width: 657px){
    .card .back h4 {
      font-size: 1.25rem;
    }

    .card .back p {
      font-size: 13px;
    }
  }

  @media screen and (max-width: 656px) {
    .card-wrapper {
      display: none;
    }
  }

/*
  @media screen and (max-width: 575px){
    #cards {
      height: 1000px !important;
    }

    .contact-image img {
      width: 20%;
    }
    footer .logo {
      text-align: center;
    }
    footer .social-footer {
      justify-content: center;
    }

    .card .back img {
      margin-top: -27%;
    }

    .card.flipped {
      height: 320px;
    }
  }

  @media screen and (max-width: 575px) and (min-width: 509px){
    .card .front img {
      width: 100%;
    }
  }
*/
  /* end card flip on click */