.EditableDiv {
  display: inline-block;
  position: relative;
}

.EditableDiv-text {
  font-size: 1.2rem;
  margin-right: 2.5rem;
  position: relative;
}

.EditableDiv-text.readOnly {
  cursor: default;
}

/* themes */

.EditableDiv.title .EditableDiv-text {
  font-size: 2rem;
  line-height: 1.8rem;
  margin-right: 3rem;
}

.EditableDiv.title .SuccessAnimation {
  top: 0.1rem;
}

.EditableDiv.accent .EditableDiv-text {
  font-family: 'Lato', 'Aller-Light', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

/* hover */

.EditableDiv-text:hover:after {
  background:
    url(./images/edit.svg)
    no-repeat
    center
    center
    transparent;
  background-size: contain;
  display: inline-block;
  content: "";
  position: absolute;
  width: 1.375rem;
}

.EditableDiv.title .EditableDiv-text:hover:after {
  height: 2.1rem;
  right: -2.8rem;
  top: 0;
}

.EditableDiv-text:hover:after {
  height: 0.9rem;
  right: -2.1rem;
  top: 0.35rem;
}

.EditableDiv.accent .EditableDiv-text:hover:after {
  height: 0.8rem;
  right: -1.7rem;
  top: 0.2rem;
}

.EditableDiv-text.readOnly:hover:after {
  display: none !important;
}

/* active */

.EditableDiv.isEditing .EditableDiv-text {
  display: none;
}

/* saved animation */

.EditableDiv.showSaved .EditableDiv-text:hover:after {
  display: none;
}

/* overrides */

.EditableDiv .Input {
  margin-bottom: 0;
}

.EditableDiv .Input-label {
  display: none;
}


/*===========================================
                BREAKPOINTS
===========================================*/
/*@media only screen and (min-width: 1024px) {
}*/

/*@media only screen and (min-width: 1280px) {
}*/

/*@media only screen and (min-width: 1500) {
}*/