.image-align-left {
  float: left;
  margin: 20px 20px 20px 0; 
}

.image-align-right {
  float: right;
  margin: 20px 0 20px 20px;
}

img.full-width {
  display: block;
  width: 100%;
  margin: 20px 0;
}

img.border-blue { border: 5px solid #0046ff; }
img.border-yellow { border: 5px solid #FFB304; }

a.cta-button { }

sup.superscript { }

table.simple-grid{}

p.large {
  font-size: 1.25rem;
}

body#tinymce .hero-slider,
body#tinymce .hero-text {
  border: 1px dashed red;
  width: 100%;
  position: relative;
  padding-top: 40px;
  margin: 20px 0;
}
body#tinymce .hero-slider:before,
body#tinymce .hero-text:before {
  color: red;
  background: white;
  content: 'Images within <div class="hero-slider"> will be put into a slider on the front end';
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  height: 40px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap; /* to make align-content work */
}
body#tinymce .hero-text:before {
  content: 'Text within <div class="hero-text"> will be overlaid on image slider';
}
body#tinymce .hero-slider img {
    max-width: 100%;
}