:root {
    --fontSize: 1.35em;
    --lineHeight: 1em;
    }

/* Tablet Styles */
@media (max-width: 1199px) {
    :root {
        --fontSize: 1.2em;
        --lineHeight: 1em;
        }
    }

/* Phone Styles */
@media (max-width: 561px) {
    :root {
        --fontSize: 1.5em;
        --lineHeight: 1em;
        }
    }

.wp-block-atb-animated-card {
    background: #006939;
    text-align: center;
    border-radius: 5px;
    background-color: #006939; /* Used if the image is unavailable */
    height: 250px; /* You must set a specified height */
    max-height: 275px;
    min-height: 250px;
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    }

div.card-content, a.card-content {
    display: block;
    position: absolute;
    z-index: 3;
    /*top: 72%; */
    background: #006939;
    overflow: hidden;
    height: 100%;
    width: 100%;
    padding: 0 20px;
    transition: all .5s;
    transform: translateY(calc(145px + 2em));
    bottom: 0;
    }

div.card-content:hover, 
a.card-content:hover,
div.card-content:focus,
a.card-content:focus {
    transition: all .5s;
    transform: translateY(0);
    /* cursor: pointer; */
    }


.card-content:hover p.card-text,
.card-content:focus p.card-text,
p.card-text:hover,
p.card-text:active,
p.card-text:focus {
    opacity: 1;
    transition: all .5s;
    }

.card-text:focus-within {
    opacity: 1;
    transition: all .5s;
    }

.wp-block-atb-animated-card .card-title, .wp-block-atb-animated-card p.card-text {
    color: #fff;
    margin: auto;
    padding: 0;
    }

.wp-block-atb-animated-card .card-title {
    /*line-height: 1em;
    font-size: 1.35em;*/
    padding-bottom: 1em;
    padding-top: .75em;
    font-size: var(--fontSize);
    line-height: var(--lineHeight);
    }

p.card-text {
    opacity: 0;
    line-height: 1.5em;
    transition: all .5s;
    }

p.card-text a {
    color: #FFF;
    text-decoration: none;
    border-bottom: 1px solid white;
    }

p.card-text a:hover,
p.card-text a:focus {
    color: #FFF;
    text-decoration: none;
    }

p.card-text a:focus{
   outline: 2px dotted #fff;
   }

.atb-animated-card-content {
    font-family: serif;
    font-size: 24px;
    color: #fff;
    padding-bottom: 30px;
    margin-bottom: 0;
    
    
    position: absolute;
    top: 0px;
    z-index: 3;
    }

.atb-animated-card-button {
    background: #000;
    border: 0px;
    border-radius: 5px;
    padding: 12px 35px;
    color: #fff;
    font-family: sans-serif;
    }

/**
 * Note that these styles are loaded *before* editor styles, so that
 * editor-specific styles using the same selectors will take precedence.
 */
.wp-block-atb-animated-card .card-bg {
    min-height: 250px;
    text-align: center;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 5px;
    }

.wp-block-atb-animated-card .card-bg button {
    margin-top: 30px;
    }

.wp-block-atb-animated-card .card-bg button.image-button {
    margin: 0;
    padding: 0;
    display: block;
    }

.wp-block-atb-animated-card .card-bg img {
    display: block;
    z-index: 1;
    position: relative;
    
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
    
    object-fit: cover;
    }

.wp-block-atb-animated-card:after {
    content:"";
    clear:both;
    display: table;
}



// Base styles
.card {
  float: left;
  padding: 0 1.7rem;
  width: 50%;
  .menu-content {
    @include cf;
    margin: 0;
    padding: 0;
    list-style-type: none;
    li {
      display: inline-block;
    }
    a {
      color: $white;
    }
    span {
      position: absolute;
      left: 50%;
      top: 0;
      font-size: 10px;
      font-weight: 700;
      font-family: 'Open Sans';
      transform: translate(-50%, 0);
    }
  }
  .wrapper {
    background-color: $white;
    min-height: 540px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.2);
    &:hover {
      .data {
        transform: translateY(0);
      }
    }
  }
  .data {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(calc(70px + 1em));
    transition: transform 0.3s;
    .content {
      padding: 1em;
      position: relative;
      z-index: 1;
    }
  }
  .title {
    margin-top: 10px;
  }
  .text {
    height: 70px;
    margin: 0;
  }
}

// First example styles
.example-1 {
  .wrapper {
    background: url(https://images.unsplash.com/photo-1496979551903-46e46589a88b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cda12b505afa1beb06e49d89014cbd65&auto=format&fit=crop&w=634&q=80) 20% 1% / cover no-repeat;
  }
  .content {
    background-color: $white;
  }
  .title {
    a {
      color: lighten($black, 50%);
    }
  }
}

@media (max-width: 1199px) {
    .wp-block-atb-animated-card .card-title {
        /* font-size: 1.2em; */
        }
    }

@media (max-width: 561px) {
    .wp-block-atb-animated-card .card-title {
        /*  font-size: 1.5em;*/
        }
    }