/* ========================================== Images ========================================== */

.Image_BackgroundFill {
  background-size: cover; 
  background-position: center; 
  background-repeat: no-repeat;
}

.Image_MakeResponsive {
  max-width: 100%;
  height: auto;
}

/* Image Floats & Text Wraping - No Caption */ 

.Image_Float_Right { 
    max-width: 20rem; /* 320px / 16px */ 
    float: right; 
    margin: 0 0 0.625rem 0.625rem; /* 10px / 16px */
    text-align: right;
}

.Image_Float_Left { 
    max-width: 20rem; /* 320px / 16px */ 
    float: left;
    text-align: left; 
    margin: 0 0 0.625rem 0.625rem; /* 10px / 16px */
}

/* Image Floats & Text Wraping - With Caption */ 

.Image_Float_Right_Caption { 
    max-width: 20rem; /* 320px / 16px */ 
    float: right; 
    margin: 0 0 0.625rem 0.625rem; /* 10px / 16px */
    text-align: right;
}


/* Clears the float applied to images. This can be used if an image is bleeding over into other elements.
   It should be applied to the element suffering the bleed, not the image itself. */
.clearFloat {
    clear: both;
}

/* ======= Image Text Wrap ======= */

/* Centered Image with a Caption */
.imageCenteredAndCaption {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.625rem; /* 10px / 16px */
  outline: 0.0625rem solid rgb(138, 0, 0); /* 1px / 16px */
}

.backgroundFill_Bevel_Upper {
    border-top-left-radius: 0.5rem; 
    border-top-right-radius: 0.5rem;
}