/* Left and right aligned images. */
 .align-left,
 .align-right {
   max-width: 100%;
   margin-left: 0;
   margin-right: 0;
 }
 .align-left {
   float: left;
   margin-right: 1em;
 }
 .align-right {
   float: right;
   margin-left: 1em;
 }
 /* A wrapper tag is used to center images. */
 .align-center {
   text-align: center;
 }
 /**
  * Override block display of centered figure elements
  * made by some overzealous Normalize.css scripts.
  */
 .align-center figure {
   display: inline-block;
 }
 /* Reset text alignment in center-aligned images with captions. */
 .align-center figcaption {
   text-align: left; /* LTR */
 }
 
 /* Add whitespace below aligned images */
 .align-left,
 .align-right,
 .align-center {
   margin-bottom: 1em;
 }
 /* Kill default whitespace on figure tag when configured with alignment. */
 .align-left figure,
 .align-right figure,
 .align-center figure {
   margin-bottom: 0;
 }

 
 /* Reset text alignment in center-aligned images with captions. */
.align-center figcaption {
   text-align: right; /* RTL */
 }
 
/* Default to responsive images */
img {
    vertical-align: baseline;
    max-width: 100%;
    height: auto !important;
}

@media (max-width: 480px) {

    .align-right,
    .align-left {
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 481px) {
    .align-left {
        float: left;
        margin-right: 1em;
        width: auto;
        max-width: 46%;
    }

    .align-right {
        float: right;
        margin-left: 1em;
        width: auto;
        max-width: 46%;
    }
}

/* Narrow screens & tablets */
@media (min-device-width: 740px) and (min-width: 740px),
(max-device-width: 800px) and (min-width: 740px) and (orientation: landscape) {
    .align-left {
        max-width: 40%;
    }

    .align-right {
        max-width: 40%;
    }
}

/* Normal screens */
@media (min-device-width: 980px) and (min-width: 980px),
(max-device-width: 1024px) and (min-width: 1024px) and (orientation: landscape) {
    .align-left {
        max-width: 30%;
    }

    .align-right {
        max-width: 30%;
    }
}

/* Wide screens */
@media (min-width: 1220px) {
    .align-left {
        max-width: 46%;
    }

    .align-right {
        max-width: 46%;
    }
}


/**
 * @file
 * Enhanced Image alignment and theming presets.
 *
 * Note: All whitespace is set to 1em to facilitate
 * easy overriding via the theme.
 */

/**
 * Specify a consistent default figure & caption
 * style to apply to both frontend and backend.
 */
 figure {
    text-align: inherit;
    border: 0;
    border-radius: 0;
    background: #efefef;
    background: rgba(0, 0, 0, 0.05);
    padding: 0;
    margin: 0 0 1em;
    display: inline-block;
    max-width: 100%;
  }
  figure > figcaption {
    text-align: inherit;
    display: block; /* For IE8 */
    margin: 0;
    padding: .3em 1em .6em;
  }
  figure img {
    margin: 0 auto;
    padding: 0;
    display: block;
  }
  /**
   * Enhanced Image adds line breaks around
   * the figcaption that may be converted to
   * <br> tags on the frontend in some cases
   * via the Drupal input format filtering
   * process. Thus we hide the extra br tags
   * with this CSS hack.
   */
  figure > br {
    display: none;
  }