#f1_container {
    position: relative;
    //overflow: auto;
    margin-bottom: 20px;
    //width: 450px;
    //height: 281px;
    z-index: 1;

    .section-title{
      &:after{
        background: none;
      }
    }

    @media screen and (max-width: 981px) {
      .section-title{
          font-size: 20px;
      }
    }
  }

  #f1_container {
    perspective: 1000;
  }
  #f1_card {
    //width: 100%;
    //height: 100%;
    margin-bottom: 40px;
    //transform-style: preserve-3d;
   // transition: all 1.0s linear;
  }

  #f1_container:hover #f1_card {
    //transform: rotateY(180deg);
    //box-shadow: -5px 5px 5px #aaa;
  }
  .root-wrapper{
    cursor: pointer;
    padding: 0px;
    position: relative;
    top:0;
    transform-style: preserve-3d;
    transition: all 0.6s linear;
    @media screen and (min-width: 767px){
    &:hover{
      transform: rotateY(180deg);
    }
    }
  }
  .face {
   // position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    @media screen and (max-width: 767px){
   &:before{
     content: '';
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.5);
   }
  }
  }
  .face.back{
    position: absolute;
    display: block;
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    top: 0;
    text-align: center;
    background-color: #aaa;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
    &:hover{
      //transform: rotateY(180deg);
    }
    h2{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px 10px;
      margin-bottom: 0;
      font-weight: 900;
      font-size: 15px;
      //font-weight: bold;
      //text-transform: uppercase;
      color: @onaccent;
      background: darken(@background, 20%);
    }
  }
  @media screen and (max-width: 991px) {
    #f1_card {
      margin-bottom: 40px !important;
    }
  }
  @media screen and (min-width: 767px)  {
    .mobile-screen{
      display: none;
    }
  }
  @media screen and (max-width: 767px)  {
    .mobile-screen{
      h2{
        font-size: 18px !important;
      }
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      transform: translateY(50%);
      color: @onaccent;
      padding: 0px 20px;
    }

  }