/* ----- Services Effects -------*/

.flip-container.hover .flipper {
    transform: rotateY(180deg);
}

.flip-container,
.front,
.back {
    width: 100%;
    padding-bottom: 100%;
}

.flipper {
  transition: 0.8s;
  transform-style: preserve-3d;
  position: relative;
    
}

.front,
.back {
  position: absolute;
  top: 0;
  left: 0; 
  -webkit-perspective: 0;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;


}

.front {
    background-color: black;
    z-index: 2;
    transform: rotateY(0deg);

}

.front:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(39,32,110,.7);
  transition: 300ms;
  opacity: 0;
}

.front:hover:before {
  opacity: 1;
 
}

.flip-container:hover {

}

.back {
  font-size: 16px;
  font-size: 1.5rem;
  transform: rotateY(180deg);
  background-color: #fff;
  padding: 2.4em;
  padding-bottom: 100%;
}

.back h4 {
    font-weight: bold;
  }


.card--title {
  /* background-color: rgba(39,32,110,.7); */
  background: rgba(248, 249, 250, .9);
  border: solid 2px rgba(39,32,110,.7);
  transition: 300ms;; 
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 1em;
  min-height: 54px;
  width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  padding:5px 10px;
  
}

.card--title:hover {
  background-color: rgba(39,32,110,.7);
  color: #ccc;
  transition: 300ms;
}

 .goback {
    font-size: 1.8 rem;
    text-decoration: underline;
    cursor: pointer;
}

.service-1 {
    background: url(../img/typewriter.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
}

.service-2 {
    background: url(../img/Division_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
}

.service-3 {
    background: url(../img/a-votre-sante_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
}

.service-4 {
    background: url(../img/Waterfall-And-Rocks_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
}


.service-5 {
    background: url(../img/Toxic-Waltz_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
    
}

.service-6 {
    background: url(../img/Space-Lint-and-Star-Dust_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;

}

.service-7 {
    background: url(../img/War-Water_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
}

.service-8 {
    background: url(../img/Empress-Tree-Blooms_Wilson-Reorting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
}

.service-9 {
    background: url(../img/Waiting-Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;

}

.service-10 {
    background: url(../img/Darkness-and-Light_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;

}

.service-11 {
    background: url(../img/Hanonka_painting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;
    
}

.service-12 {
    background: url(../img/Green-Beauty_Wilson-Reporting.jpg) center center no-repeat;
    background-size: cover;
    object-fit: cover;




.outer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.8s;
}

.outer:hover:before {
  opacity: 1;
 
}
.inner{
  position: relative;
}


@media (max-width: 1250px){
  .back {
    font-size: 14px;
    font-size: 1.2rem;
    transform: rotateY(180deg);
    background-color: #fff;
    padding: 2em;
    padding-bottom: 100%;
  } 
} 

@media (max-width: 991px){
    .flip-container{
        margin-bottom: 1em ;

    }

     .front,
    .back {
        border-radius: 4px;
    }
  .back {
    font-size: 20px;
    font-size: 2rem;
    transform: rotateY(180deg);
    background-color: #fff;
    padding: 5em;
    padding-bottom: 100%;
  } 
}

@media (max-width: 768px){
    
    .card--title {
      font-size: 18px;
      font-size: 3rem;
      padding:5px 10px;
  }

  .back {
    font-size: 22px;
    font-size: 1.9rem;
    transform: rotateY(180deg);
    background-color: #fff;
    padding: 2em;
    padding-bottom: 100%;
  } 
} 

@media (max-width: 768px){


    .card--title {
          font-size: 1.2em;
    }

    .back {
        border: solid 1px rgba(39,32,110,.7);
    }
}